Fixed resend error not shown

apps/web/actions/resend/index.test.ts

@@ -44,8 +44,8 @@ describe(`actions/resend`, () => {
     // act
     const resend = resendActionCreator(testDb.getPrismaClient());
     const result = await resend({
-      name: "Jo",
-      phone: "1234567890",
+      // @ts-expect-error - we want to test the invalid type
+      phonee: "1234567890",
     });
 
     // assert

apps/web/actions/resend/index.ts

@@ -26,7 +26,6 @@ export const errorCodes = {
  * This schema is used to validate the data passed to the resend function.
  */
 const resendSchema = z.object({
-  name: z.string().min(3),
   phone: z.string().min(10),
 });
 /**

apps/web/app/page.client.test.tsx

@@ -248,6 +248,28 @@ describe("PageClient", () => {
     expect(screen.getByText("Something went wrong")).toBeInTheDocument();
   });
 
+  test("TEST#4.1: should render error resend", () => {
+    vi.mocked(useRegisterResend).mockReturnValue({
+      tab: "register",
+      data: { name: "", phone: "" },
+      errors: {
+        register: "",
+        resend: "Something went wrong",
+        phone: "",
+        name: "",
+      },
+      setErrorForKey: vi.fn(),
+      setDataForKey: vi.fn(),
+      clearErrors: vi.fn(),
+      handleRegister: vi.fn(),
+      handleResend: vi.fn(),
+      isPendingRegister: false,
+      isPendingResend: false,
+    });
+    render(<PageClient />);
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+  });
+
   test("TEST#5: should render submit button", () => {
     vi.mocked(useRegisterResend).mockReturnValue({
       tab: "register",

apps/web/app/page.client.tsx

@@ -12,24 +12,19 @@ import { Tab } from "@/hooks/use-home-tab";
 const countryCodePhoneErrorMessage =
   "Phone must starts with valid country code";
 
+type UseRegisterResend = ReturnType<typeof useRegisterResend>;
+
 interface PageClientFormProps {
-  tab: Tab;
-  data: {
-    name: string;
-    phone: string;
-  };
-  errors: {
-    name: string;
-    phone: string;
-    register: string;
-  };
+  tab: UseRegisterResend["tab"];
+  data: UseRegisterResend["data"];
+  errors: UseRegisterResend["errors"];
   onNameChange: (value: string) => void;
   onPhoneChange: (value: string) => void;
   onPhoneNotValid: () => void;
   onRegister: () => void;
   onResend: () => void;
-  isPendingRegister: boolean;
-  isPendingResend: boolean;
+  isPendingRegister: UseRegisterResend["isPendingRegister"];
+  isPendingResend: UseRegisterResend["isPendingResend"];
 }
 
 /**
@@ -80,6 +75,13 @@ export const PageClientForm = ({
           <p className="font-bold">{errors.register}</p>
         </div>
       )}
+      {/* TEST#4.1 */}
+      {!!errors.resend && (
+        <div className="flex">
+          <FontAwesomeIcon className="m-1 ml-0" icon={faTimesCircle} />
+          <p className="font-bold">{errors.resend}</p>
+        </div>
+      )}
       {/* TEST#5 */}
       {tab === "register" && (
         <Button

apps/web/hooks/use-register-resend.test.ts

@@ -199,7 +199,7 @@ describe("useRegisterResend", () => {
       return deferredPromise;
     });
 
-    const { result } = renderHook(() => useRegisterResend());
+    const { result, rerender } = renderHook(() => useRegisterResend());
 
     // Set some data to pass validation
     await act(async () => {
@@ -224,6 +224,8 @@ describe("useRegisterResend", () => {
     await waitFor(() => {
       expect(result.current.isPendingResend).toBe(false);
     });
+
+    expect(result.current.errors.resend).toBe("Resend Error");
   });
 
   test("TEST#7: should return default tab", async () => {