From e9cff4725b7d19c261e085ce7d7c4eef47ca66cb Mon Sep 17 00:00:00 2001
From: Nico Prananta <311343+nicnocquee@users.noreply.github.com>
Date: Tue, 16 Sep 2025 20:34:06 +0200
Subject: [PATCH] Enhanced PageClient to display resend error message and
 updated tests for useRegisterResend hook to include error validation.

---
 apps/web/actions/resend/index.test.ts      |  4 ++--
 apps/web/actions/resend/index.ts           |  1 -
 apps/web/app/page.client.test.tsx          | 22 ++++++++++++++++++
 apps/web/app/page.client.tsx               | 26 ++++++++++++----------
 apps/web/hooks/use-register-resend.test.ts |  4 +++-
 5 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/apps/web/actions/resend/index.test.ts b/apps/web/actions/resend/index.test.ts
index 34e967f..1bcc432 100644
--- a/apps/web/actions/resend/index.test.ts
+++ b/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
diff --git a/apps/web/actions/resend/index.ts b/apps/web/actions/resend/index.ts
index e787274..b1696c2 100644
--- a/apps/web/actions/resend/index.ts
+++ b/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),
 });
 /**
diff --git a/apps/web/app/page.client.test.tsx b/apps/web/app/page.client.test.tsx
index 7208798..5a6d719 100644
--- a/apps/web/app/page.client.test.tsx
+++ b/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",
diff --git a/apps/web/app/page.client.tsx b/apps/web/app/page.client.tsx
index 8a1a0d3..16a7ceb 100644
--- a/apps/web/app/page.client.tsx
+++ b/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
diff --git a/apps/web/hooks/use-register-resend.test.ts b/apps/web/hooks/use-register-resend.test.ts
index 54fe16f..2254f11 100644
--- a/apps/web/hooks/use-register-resend.test.ts
+++ b/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 () => {