feat: Add OTP resend timer functionality to ConfirmCode - [CU-869bgc23c] (#242)

Co-authored-by: Saif <78622218+im-saif@users.noreply.github.com>

Author: Exo1i

src/__tests__/screens/auth/password/ConfirmCode.test.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
 import { NavigationContainer } from '@react-navigation/native';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ConfirmCode } from '@/screens/auth/password/ConfirmCode';
 import { resendResetOtp, verifyResetCode } from '@/services/auth';
@@ -39,9 +39,14 @@ const mockResendResetOtp = resendResetOtp as jest.MockedFunction<typeof resendRe
 describe('ConfirmCode Component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.useFakeTimers();
   });
 
-  it('renders correctly with initial state', () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('renders correctly with initial state and timer', () => {
     const { getByText, getByTestId } = render(
       <NavigationContainer>
         <ConfirmCode />
@@ -51,7 +56,8 @@ describe('ConfirmCode Component', () => {
     expect(getByText('We sent you a code')).toBeTruthy();
     expect(getByTestId('text-input')).toBeTruthy();
     expect(getByText('Confirm')).toBeTruthy();
-    expect(getByText('Resend')).toBeTruthy();
+    // Timer should be shown on initial load
+    expect(getByText('Resend code in 60s')).toBeTruthy();
   });
 
   it('validates code input', () => {
@@ -126,18 +132,27 @@ describe('ConfirmCode Component', () => {
     });
   });
 
-  it('handles resend OTP successfully', async () => {
+  it('handles resend OTP successfully and resets timer', async () => {
     mockResendResetOtp.mockResolvedValue({
       success: true,
       message: 'A new code has been sent',
     });
 
-    const { getByText } = render(
+    const { getByText, queryByText } = render(
       <NavigationContainer>
         <ConfirmCode />
       </NavigationContainer>
     );
 
+    // Wait for timer to expire so resend button appears
+    act(() => {
+      jest.advanceTimersByTime(60000);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Resend')).toBeTruthy();
+    });
+
     const resendButton = getByText('Resend');
     fireEvent.press(resendButton);
 
@@ -147,6 +162,10 @@ describe('ConfirmCode Component', () => {
       });
       expect(getByText('A new code has been sent to your email')).toBeTruthy();
     });
+
+    // Timer should be reset to 60s after successful resend
+    expect(getByText('Resend code in 60s')).toBeTruthy();
+    expect(queryByText(/^Resend$/)).toBeNull();
   });
 
   it('handles resend OTP error', async () => {
@@ -161,6 +180,15 @@ describe('ConfirmCode Component', () => {
       </NavigationContainer>
     );
 
+    // Wait for timer to expire so resend button appears
+    act(() => {
+      jest.advanceTimersByTime(60000);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Resend')).toBeTruthy();
+    });
+
     const resendButton = getByText('Resend');
     fireEvent.press(resendButton);
 
@@ -205,13 +233,28 @@ describe('ConfirmCode Component', () => {
       </NavigationContainer>
     );
 
+    // Wait for timer to expire so resend button appears
+    act(() => {
+      jest.advanceTimersByTime(60000);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Resend')).toBeTruthy();
+    });
+
     const resendButton = getByText('Resend');
     fireEvent.press(resendButton);
 
     expect(getByText('Sending...')).toBeTruthy();
 
+    // Advance timers to resolve the promise
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+
     await waitFor(() => {
-      expect(getByText('Resend')).toBeTruthy(); // Button text should return to normal
+      // After successful resend, timer should be shown instead of Resend button
+      expect(getByText('Resend code in 60s')).toBeTruthy();
     });
   });
 
@@ -259,4 +302,101 @@ describe('ConfirmCode Component', () => {
 
     expect(mockGoBack).toHaveBeenCalled();
   });
+
+  it('timer starts on screen load and prevents immediate resend', async () => {
+    const { getByText, queryByText } = render(
+      <NavigationContainer>
+        <ConfirmCode />
+      </NavigationContainer>
+    );
+
+    // Timer should be shown immediately on load
+    expect(getByText('Resend code in 60s')).toBeTruthy();
+    expect(queryByText(/^Resend$/)).toBeNull();
+
+    // resendResetOtp should not have been called
+    expect(mockResendResetOtp).not.toHaveBeenCalled();
+  });
+
+  it('counts down the timer correctly from initial load', async () => {
+    const { getByText } = render(
+      <NavigationContainer>
+        <ConfirmCode />
+      </NavigationContainer>
+    );
+
+    // Timer should start at 60s on load
+    expect(getByText('Resend code in 60s')).toBeTruthy();
+
+    // Advance timer by 1 second
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Resend code in 59s')).toBeTruthy();
+    });
+
+    // Advance timer by 10 more seconds
+    act(() => {
+      jest.advanceTimersByTime(10000);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Resend code in 49s')).toBeTruthy();
+    });
+  });
+
+  it('shows resend button after timer expires on initial load', async () => {
+    const { getByText } = render(
+      <NavigationContainer>
+        <ConfirmCode />
+      </NavigationContainer>
+    );
+
+    // Timer should start at 60s
+    expect(getByText('Resend code in 60s')).toBeTruthy();
+
+    // Advance timer by 60 seconds to expire the timer
+    act(() => {
+      jest.advanceTimersByTime(60000);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Resend')).toBeTruthy();
+    });
+  });
+
+  it('does not start timer on failed resend', async () => {
+    mockResendResetOtp.mockResolvedValue({
+      success: false,
+      message: 'Failed to resend code',
+    });
+
+    const { getByText, queryByText } = render(
+      <NavigationContainer>
+        <ConfirmCode />
+      </NavigationContainer>
+    );
+
+    // Wait for initial timer to expire
+    act(() => {
+      jest.advanceTimersByTime(60000);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Resend')).toBeTruthy();
+    });
+
+    const resendButton = getByText('Resend');
+    fireEvent.press(resendButton);
+
+    await waitFor(() => {
+      expect(getByText('Failed to resend code')).toBeTruthy();
+    });
+
+    // Timer should not restart on failure - resend button should still be available
+    expect(queryByText(/Resend code in/)).toBeNull();
+    expect(getByText('Resend')).toBeTruthy();
+  });
 });

src/screens/auth/password/ConfirmCode.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { KeyboardAvoidingView, Text, View } from 'react-native';
 
@@ -37,6 +37,25 @@ export function ConfirmCode() {
   const [hasChangedAfterError, setHasChangedAfterError] = useState(true);
   const [resendLoading, setResendLoading] = useState(false);
   const [resendMessage, setResendMessage] = useState<string | undefined>(undefined);
+  const [resendTimer, setResendTimer] = useState(60);
+
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval> | null = null;
+    if (resendTimer > 0) {
+      interval = setInterval(() => {
+        setResendTimer((prev) => {
+          if (prev <= 1) {
+            if (interval) clearInterval(interval);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [resendTimer]);
 
   const valid = useMemo(() => code.trim().length === 6, [code]);
 
@@ -85,13 +104,15 @@ export function ConfirmCode() {
   };
 
   const handleResend = async () => {
+    if (resendLoading || resendTimer > 0) return;
     setResendLoading(true);
     setResendMessage(undefined);
 
     try {
       const response = await resendResetOtp({ confirmationToken });
       if (response.success) {
         setResendMessage('A new code has been sent to your email');
+        setResendTimer(60);
       } else {
         handleApiFormError(response, {
           setFieldError: (field: string, message?: string) => {
@@ -167,16 +188,22 @@ export function ConfirmCode() {
 
           <View className="">
             <Text className="text-sm" style={{ color: mutedTextColor }}>
-              Didn&apos;t receive the code?{' '}
-              <Text
-                className="font-semibold underline"
-                style={{ color: colors[theme].primary }}
-                onPress={handleResend}
-                disabled={resendLoading}
-                accessibilityLabel="confirm-code-resend-button"
-              >
-                {resendLoading ? 'Sending...' : 'Resend'}
-              </Text>
+              {resendTimer > 0 ? (
+                `Resend code in ${resendTimer}s`
+              ) : (
+                <>
+                  Didn&apos;t receive the code?{' '}
+                  <Text
+                    className="font-semibold underline"
+                    style={{ color: colors[theme].primary }}
+                    onPress={handleResend}
+                    disabled={resendLoading || resendTimer > 0}
+                    accessibilityLabel="confirm-code-resend-button"
+                  >
+                    {resendLoading ? 'Sending...' : 'Resend'}
+                  </Text>
+                </>
+              )}
             </Text>
             {resendMessage && (
               <Text