refactor(deposit): send email throws true method

app/components/UI/Ramp/Deposit/Views/EnterEmail/EnterEmail.test.tsx

@@ -15,8 +15,10 @@ const mockResponse = {
   isFetching: false,
 };
 
+const mockSendEmail = jest.fn().mockResolvedValue('Success');
+
 const mockUseDepositSdkMethodInitialValues: DepositSdkMethodResult<'sendUserOtp'> =
-  [mockResponse, jest.fn().mockResolvedValue('Success')];
+  [mockResponse, mockSendEmail];
 
 let mockUseDepositSdkMethodValues: DepositSdkMethodResult<'sendUserOtp'> = {
   ...mockUseDepositSdkMethodInitialValues,
@@ -56,12 +58,6 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-jest.mock('../../../../Navbar', () => ({
-  getDepositNavbarOptions: jest.fn().mockReturnValue({
-    title: 'Enter Email',
-  }),
-}));
-
 function render(Component: React.ComponentType) {
   return renderDepositTestComponent(Component, Routes.DEPOSIT.ENTER_EMAIL);
 }
@@ -71,7 +67,7 @@ describe('EnterEmail Component', () => {
     jest.clearAllMocks();
     mockUseDepositSdkMethodValues = [
       { ...mockResponse },
-      jest.fn().mockResolvedValue('Success'),
+      mockSendEmail.mockResolvedValue('Success'),
     ];
   });
 
@@ -82,11 +78,7 @@ describe('EnterEmail Component', () => {
 
   it('calls setOptions when the component mounts', () => {
     render(EnterEmail);
-    expect(mockSetNavigationOptions).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: 'Enter Email',
-      }),
-    );
+    expect(mockSetNavigationOptions).toHaveBeenCalled();
   });
 
   it('renders loading state snapshot', async () => {
@@ -121,11 +113,14 @@ describe('EnterEmail Component', () => {
   });
 
   it('renders error message snapshot when API call fails', async () => {
-    mockUseDepositSdkMethodValues = [
-      { ...mockResponse, error: 'API Error' },
-      jest.fn(),
-    ];
+    mockSendEmail.mockRejectedValue(new Error('API Error'));
     render(EnterEmail);
+    const emailInput = screen.getByPlaceholderText('name@domain.com');
+    fireEvent.changeText(emailInput, 'test@example.com');
+    fireEvent.press(screen.getByRole('button', { name: 'Send email' }));
+    await waitFor(() => {
+      expect(mockSendEmail).toHaveBeenCalledWith();
+    });
     expect(screen.toJSON()).toMatchSnapshot();
   });
 });

app/components/UI/Ramp/Deposit/Views/EnterEmail/EnterEmail.tsx

@@ -44,6 +44,8 @@ export const createEnterEmailNavDetails =
 const EnterEmail = () => {
   const navigation = useNavigation();
   const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const [validationError, setValidationError] = useState(false);
   const { quote, paymentMethodId, cryptoCurrencyChainId } =
     useParams<EnterEmailParams>();
@@ -60,38 +62,47 @@ const EnterEmail = () => {
     );
   }, [navigation, theme]);
 
-  const [{ error, isFetching: loading }, submitEmail] = useDepositSdkMethod(
-    { method: 'sendUserOtp', onMount: false },
+  const [, submitEmail] = useDepositSdkMethod(
+    { method: 'sendUserOtp', onMount: false, throws: true },
     email,
   );
 
   const emailInputRef = useRef<TextInput>(null);
 
+  const handleTextChange = useCallback(
+    (text: string) => {
+      setEmail(text);
+      setValidationError(false);
+      setError(null);
+    },
+    [setEmail, setValidationError, setError],
+  );
+
   const handleSubmit = useCallback(async () => {
     try {
+      setIsLoading(true);
       if (validateEmail(email)) {
         setValidationError(false);
         await submitEmail();
-
-        if (!error) {
-          navigation.navigate(
-            ...createOtpCodeNavDetails({
-              quote,
-              email,
-              paymentMethodId,
-              cryptoCurrencyChainId,
-            }),
-          );
-        }
+        navigation.navigate(
+          ...createOtpCodeNavDetails({
+            quote,
+            email,
+            paymentMethodId,
+            cryptoCurrencyChainId,
+          }),
+        );
       } else {
         setValidationError(true);
       }
     } catch (e) {
+      setError(strings('deposit.enter_email.error'));
       Logger.error(e as Error, 'Error submitting email');
+    } finally {
+      setIsLoading(false);
     }
   }, [
     email,
-    error,
     navigation,
     submitEmail,
     quote,
@@ -119,10 +130,10 @@ const EnterEmail = () => {
               returnKeyType={'done'}
               autoCapitalize="none"
               ref={emailInputRef}
-              onChangeText={setEmail}
+              onChangeText={handleTextChange}
               value={email}
               keyboardAppearance={theme.themeAppearance}
-              isDisabled={loading}
+              isDisabled={isLoading}
             />
             {validationError && (
               <Text style={{ color: theme.colors.error.default }}>
@@ -145,8 +156,8 @@ const EnterEmail = () => {
             label={strings('deposit.enter_email.submit_button')}
             variant={ButtonVariants.Primary}
             width={ButtonWidthTypes.Full}
-            loading={loading}
-            isDisabled={loading}
+            loading={isLoading}
+            isDisabled={isLoading}
           />
           <PoweredByTransak name="powered-by-transak-logo" />
         </ScreenLayout.Content>