From 0f7eed50a6a2d035dcea33fc1bfe24ce245d038b Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 10 Sep 2024 02:32:13 +0300
Subject: [PATCH] #238 Fix voucher execution alert (#239)

---
 .../components/inputs/voucherExecution.tsx    |  6 ++--
 .../inputs/voucherExecution.test.tsx          | 31 ++++++++++++++++++-
 packages/ui/src/InputDetails/index.tsx        |  1 +
 .../test/InputDetails/InputDetails.test.tsx   |  3 ++
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/inputs/voucherExecution.tsx b/apps/web/src/components/inputs/voucherExecution.tsx
index a393e8724..016273c01 100644
--- a/apps/web/src/components/inputs/voucherExecution.tsx
+++ b/apps/web/src/components/inputs/voucherExecution.tsx
@@ -86,9 +86,9 @@ const VoucherExecution: FC<VoucherExecutionType> = (props) => {
     }, [wait.isSuccess]);
 
     useEffect(() => {
-        if (prepare.isError) {
+        if (hasVoucherProof && prepare.isError) {
             notifications.show({
-                message: prepare.error.message,
+                message: `Voucher error: ${prepare.error.message}`,
                 color: "red",
                 withBorder: true,
                 withCloseButton: true,
@@ -101,7 +101,7 @@ const VoucherExecution: FC<VoucherExecutionType> = (props) => {
                 },
             });
         }
-    }, [prepare.error, prepare.isError]);
+    }, [hasVoucherProof, prepare.error, prepare.isError]);
 
     return (
         <div>
diff --git a/apps/web/test/components/inputs/voucherExecution.test.tsx b/apps/web/test/components/inputs/voucherExecution.test.tsx
index 85ae6d206..66d3a1547 100644
--- a/apps/web/test/components/inputs/voucherExecution.test.tsx
+++ b/apps/web/test/components/inputs/voucherExecution.test.tsx
@@ -357,7 +357,7 @@ describe("VoucherExecution component", () => {
 
         expect(showMock).toHaveBeenCalledWith(
             expect.objectContaining({
-                message: prepareData.error.message,
+                message: `Voucher error: ${prepareData.error.message}`,
                 color: "red",
                 withBorder: true,
                 withCloseButton: true,
@@ -366,6 +366,35 @@ describe("VoucherExecution component", () => {
         );
     });
 
+    it("should not display prepare error when proof is pending", async () => {
+        const mantineNotifications = await import("@mantine/notifications");
+        const showMock = vi.fn();
+        mantineNotifications.notifications = {
+            ...mantineNotifications.notifications,
+            show: showMock,
+        } as any;
+
+        const prepareData = {
+            data: false,
+            isError: true,
+            error: {
+                message: "Some error message",
+            },
+        };
+
+        useSimulateCartesiDAppExecuteVoucherMock.mockReturnValue(
+            prepareData as any,
+        );
+        render(
+            <Component
+                {...defaultProps}
+                voucher={{ ...defaultProps.voucher, proof: null }}
+            />,
+        );
+
+        expect(showMock).toHaveBeenCalledTimes(0);
+    });
+
     it("should not execute voucher when preparation has failed and execute button is clicked", () => {
         useReadCartesiDAppWasVoucherExecutedMock.mockReturnValue({
             data: false,
diff --git a/packages/ui/src/InputDetails/index.tsx b/packages/ui/src/InputDetails/index.tsx
index 56a147b8a..5a230aae4 100644
--- a/packages/ui/src/InputDetails/index.tsx
+++ b/packages/ui/src/InputDetails/index.tsx
@@ -143,6 +143,7 @@ const Details: FC<InputDetailsProps> = (props) => {
         <Tabs
             defaultValue={selected}
             orientation={isSmallDevice ? "horizontal" : "vertical"}
+            keepMounted={false}
         >
             <InputDetailsTabs />
             <InputDetailsContent />
diff --git a/packages/ui/test/InputDetails/InputDetails.test.tsx b/packages/ui/test/InputDetails/InputDetails.test.tsx
index 8f2748133..b1ddff2ee 100644
--- a/packages/ui/test/InputDetails/InputDetails.test.tsx
+++ b/packages/ui/test/InputDetails/InputDetails.test.tsx
@@ -84,6 +84,7 @@ describe("Rollups InputDetails", () => {
             </InputDetailsE>,
         );
 
+        fireEvent.click(screen.getByText("Reports"));
         fireEvent.click(screen.getByText("As JSON"));
         fireEvent.click(screen.getByText("As Text"));
         fireEvent.click(screen.getByText("Raw"));
@@ -105,6 +106,7 @@ describe("Rollups InputDetails", () => {
             </InputDetailsE>,
         );
 
+        fireEvent.click(screen.getByText("Vouchers"));
         fireEvent.click(screen.getByText("As JSON"));
         fireEvent.click(screen.getByText("As Text"));
         fireEvent.click(screen.getByText("Raw"));
@@ -126,6 +128,7 @@ describe("Rollups InputDetails", () => {
             </InputDetailsE>,
         );
 
+        fireEvent.click(screen.getByText("Notices"));
         fireEvent.click(screen.getByText("As JSON"));
         fireEvent.click(screen.getByText("As Text"));
         fireEvent.click(screen.getByText("Raw"));