feat(deposit): fixes routing after user is authenticated (#17393)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Updates the `useDepositRouting` hook to correctly follow the rules
needed for maintaining user state when routing. Pages now call
`routeAfterAuthentication` when they are routing which will take care of
fetching forms for updated kyc status.


<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: georgeweiler

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

@@ -123,7 +123,6 @@ describe('BasicInfo Component', () => {
           mobileNumber: '+1234567890',
           ssn: '123456789',
         },
-        kycUrl: undefined,
         quote: mockQuote,
       }),
     );

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

@@ -36,7 +36,6 @@ import useAnalytics from '../../../hooks/useAnalytics';
 
 export interface BasicInfoParams {
   quote: BuyQuote;
-  kycUrl?: string;
 }
 
 export const createBasicInfoNavDetails =
@@ -54,7 +53,7 @@ const BasicInfo = (): JSX.Element => {
   const navigation = useNavigation();
   const { styles, theme } = useStyles(styleSheet, {});
   const trackEvent = useAnalytics();
-  const { quote, kycUrl } = useParams<BasicInfoParams>();
+  const { quote } = useParams<BasicInfoParams>();
   const { selectedRegion } = useDepositSDK();
 
   const firstNameInputRef = useRef<TextInput>(null);
@@ -152,7 +151,6 @@ const BasicInfo = (): JSX.Element => {
               : '',
           },
           quote,
-          kycUrl,
         }),
       );
     }
@@ -161,7 +159,6 @@ const BasicInfo = (): JSX.Element => {
     validateFormData,
     formData,
     quote,
-    kycUrl,
     selectedRegion?.isoCode,
     trackEvent,
   ]);

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

@@ -44,25 +44,20 @@ const mockUseDepositSdkMethodInitialState = {
 };
 
 let mockKycFunction = jest.fn().mockResolvedValue(undefined);
-let mockPurposeFunction = jest.fn().mockResolvedValue(undefined);
+
 let mockSsnFunction = jest.fn().mockResolvedValue(undefined);
 let mockKycValues = [mockUseDepositSdkMethodInitialState, mockKycFunction];
-let mockPurposeValues = [
-  mockUseDepositSdkMethodInitialState,
-  mockPurposeFunction,
-];
+
 let mockSsnValues = [
   { ...mockUseDepositSdkMethodInitialState },
   mockSsnFunction,
 ];
 
-const mockNavigateToKycProcessing = jest.fn();
-const mockNavigateToAdditionalVerification = jest.fn();
+const mockRouteAfterAuthentication = jest.fn();
 
 jest.mock('../../hooks/useDepositRouting', () => ({
   useDepositRouting: jest.fn(() => ({
-    navigateToKycProcessing: mockNavigateToKycProcessing,
-    navigateToAdditionalVerification: mockNavigateToAdditionalVerification,
+    routeAfterAuthentication: mockRouteAfterAuthentication,
   })),
 }));
 
@@ -71,9 +66,6 @@ jest.mock('../../hooks/useDepositSdkMethod', () => ({
     if (config?.method === 'patchUser') {
       return mockKycValues;
     }
-    if (config?.method === 'submitPurposeOfUsageForm') {
-      return mockPurposeValues;
-    }
     if (config?.method === 'submitSsnDetails') {
       return mockSsnValues;
     }
@@ -150,22 +142,16 @@ describe('EnterAddress Component', () => {
       selectedRegion: { isoCode: 'US', name: 'United States', flag: '🇺🇸' },
     };
     mockKycFunction = jest.fn().mockResolvedValue(undefined);
-    mockPurposeFunction = jest.fn().mockResolvedValue(undefined);
     mockSsnFunction = jest.fn().mockResolvedValue(undefined);
     mockKycValues = [
       { ...mockUseDepositSdkMethodInitialState },
       mockKycFunction,
     ];
-    mockPurposeValues = [
-      { ...mockUseDepositSdkMethodInitialState },
-      mockPurposeFunction,
-    ];
     mockSsnValues = [
       { ...mockUseDepositSdkMethodInitialState },
       mockSsnFunction,
     ];
-    mockNavigateToKycProcessing.mockClear();
-    mockNavigateToAdditionalVerification.mockClear();
+    mockRouteAfterAuthentication.mockClear();
     mockTrackEvent.mockClear();
   });
 
@@ -178,7 +164,7 @@ describe('EnterAddress Component', () => {
     render(EnterAddress);
     fireEvent.press(screen.getByTestId('address-continue-button'));
     expect(screen.toJSON()).toMatchSnapshot();
-    expect(mockNavigateToKycProcessing).not.toHaveBeenCalled();
+    expect(mockRouteAfterAuthentication).not.toHaveBeenCalled();
   });
 
   it('submits form data and navigates to next page when form is valid and continue is pressed', async () => {
@@ -187,13 +173,11 @@ describe('EnterAddress Component', () => {
     fillFormAndSubmit();
 
     await waitFor(() => {
-      expect(mockNavigateToKycProcessing).toHaveBeenCalledWith({
-        quote: mockQuote,
-      });
+      expect(mockRouteAfterAuthentication).toHaveBeenCalledWith(mockQuote);
     });
   });
 
-  it('navigates to additional verification when kycUrl is provided', async () => {
+  it('submits form data and calls routeAfterAuthentication when kycUrl is provided', async () => {
     const kycUrl = 'https://example.com/kyc';
 
     mockUseParamsReturnValue = {
@@ -215,14 +199,7 @@ describe('EnterAddress Component', () => {
     });
 
     await waitFor(() => {
-      expect(mockPurposeFunction).toHaveBeenCalled();
-    });
-
-    await waitFor(() => {
-      expect(mockNavigateToAdditionalVerification).toHaveBeenCalledWith({
-        quote: mockQuote,
-        kycUrl,
-      });
+      expect(mockRouteAfterAuthentication).toHaveBeenCalledWith(mockQuote);
     });
   });
 
@@ -236,7 +213,7 @@ describe('EnterAddress Component', () => {
     expect(mockKycFunction).toHaveBeenCalled();
 
     await waitFor(() => {
-      expect(mockNavigateToKycProcessing).not.toHaveBeenCalled();
+      expect(mockRouteAfterAuthentication).not.toHaveBeenCalled();
     });
   });
 
@@ -254,9 +231,7 @@ describe('EnterAddress Component', () => {
     fillFormAndSubmit();
     await waitFor(() => {
       expect(mockSsnFunction).toHaveBeenCalledWith('123-45-6789');
-      expect(mockNavigateToKycProcessing).toHaveBeenCalledWith({
-        quote: mockQuote,
-      });
+      expect(mockRouteAfterAuthentication).toHaveBeenCalledWith(mockQuote);
     });
   });
 
@@ -279,9 +254,7 @@ describe('EnterAddress Component', () => {
 
     await waitFor(() => {
       expect(mockSsnFunction).not.toHaveBeenCalled();
-      expect(mockNavigateToKycProcessing).toHaveBeenCalledWith({
-        quote: mockQuote,
-      });
+      expect(mockRouteAfterAuthentication).toHaveBeenCalledWith(mockQuote);
     });
   });
 
@@ -294,7 +267,7 @@ describe('EnterAddress Component', () => {
 
     await waitFor(() => {
       expect(mockSsnFunction).toHaveBeenCalledWith('123-45-6789');
-      expect(mockNavigateToKycProcessing).not.toHaveBeenCalled();
+      expect(mockRouteAfterAuthentication).not.toHaveBeenCalled();
     });
   });
 
@@ -333,7 +306,7 @@ describe('EnterAddress Component', () => {
     fireEvent.press(screen.getByTestId('address-continue-button'));
 
     expect(screen.getByText('Please enter a valid address')).toBeOnTheScreen();
-    expect(mockNavigateToKycProcessing).not.toHaveBeenCalled();
+    expect(mockRouteAfterAuthentication).not.toHaveBeenCalled();
   });
 
   it('accepts valid address line 2', async () => {
@@ -342,9 +315,7 @@ describe('EnterAddress Component', () => {
     fillFormAndSubmit({ addressLine2: 'Apt 4B' });
 
     await waitFor(() => {
-      expect(mockNavigateToKycProcessing).toHaveBeenCalledWith({
-        quote: mockQuote,
-      });
+      expect(mockRouteAfterAuthentication).toHaveBeenCalledWith(mockQuote);
     });
   });
 
@@ -361,7 +332,7 @@ describe('EnterAddress Component', () => {
     fireEvent.press(screen.getByTestId('address-continue-button'));
 
     expect(screen.getByText('State/Region is required')).toBeOnTheScreen();
-    expect(mockNavigateToKycProcessing).not.toHaveBeenCalled();
+    expect(mockRouteAfterAuthentication).not.toHaveBeenCalled();
   });
 
   it('displays selected region in disabled country field', () => {
@@ -387,7 +358,6 @@ describe('EnterAddress Component', () => {
         countryCode: 'US',
       });
       expect(mockSsnFunction).toHaveBeenCalledWith('123-45-6789');
-      expect(mockPurposeFunction).toHaveBeenCalled();
     });
   });
 
@@ -419,7 +389,6 @@ describe('EnterAddress Component', () => {
         countryCode: 'US',
       });
       expect(mockSsnFunction).not.toHaveBeenCalled();
-      expect(mockPurposeFunction).toHaveBeenCalled();
     });
   });
 
@@ -435,9 +404,7 @@ describe('EnterAddress Component', () => {
     });
 
     await waitFor(() => {
-      expect(mockNavigateToKycProcessing).toHaveBeenCalledWith({
-        quote: mockQuote,
-      });
+      expect(mockRouteAfterAuthentication).toHaveBeenCalledWith(mockQuote);
     });
   });
 });

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

@@ -39,7 +39,6 @@ import useAnalytics from '../../../hooks/useAnalytics';
 export interface EnterAddressParams {
   formData: BasicInfoFormData;
   quote: BuyQuote;
-  kycUrl?: string;
 }
 
 export const createEnterAddressNavDetails =
@@ -57,11 +56,8 @@ interface AddressFormData {
 const EnterAddress = (): JSX.Element => {
   const navigation = useNavigation();
   const { styles, theme } = useStyles(styleSheet, {});
-  const {
-    formData: basicInfoFormData,
-    quote,
-    kycUrl,
-  } = useParams<EnterAddressParams>();
+  const { formData: basicInfoFormData, quote } =
+    useParams<EnterAddressParams>();
   const { selectedRegion } = useDepositSDK();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -78,11 +74,10 @@ const EnterAddress = (): JSX.Element => {
     quote.network,
   );
 
-  const { navigateToAdditionalVerification, navigateToKycProcessing } =
-    useDepositRouting({
-      cryptoCurrencyChainId: cryptoCurrency?.chainId || '',
-      paymentMethodId: quote.paymentMethod,
-    });
+  const { routeAfterAuthentication } = useDepositRouting({
+    cryptoCurrencyChainId: cryptoCurrency?.chainId || '',
+    paymentMethodId: quote.paymentMethod,
+  });
 
   const initialFormData: AddressFormData = {
     addressLine1: '',
@@ -180,15 +175,6 @@ const EnterAddress = (): JSX.Element => {
     throws: true,
   });
 
-  const [, submitPurpose] = useDepositSdkMethod(
-    {
-      method: 'submitPurposeOfUsageForm',
-      onMount: false,
-      throws: true,
-    },
-    ['Buying/selling crypto for investments'],
-  );
-
   const [, submitSsnDetails] = useDepositSdkMethod({
     method: 'submitSsnDetails',
     onMount: false,
@@ -227,13 +213,7 @@ const EnterAddress = (): JSX.Element => {
         await submitSsnDetails(basicInfoFormData.ssn);
       }
 
-      await submitPurpose();
-
-      if (kycUrl) {
-        navigateToAdditionalVerification({ quote, kycUrl });
-      } else {
-        navigateToKycProcessing({ quote });
-      }
+      await routeAfterAuthentication(quote);
     } catch (submissionError) {
       setLoading(false);
       setError(
@@ -253,12 +233,9 @@ const EnterAddress = (): JSX.Element => {
     basicInfoFormData,
     formData,
     postKycForm,
-    submitPurpose,
     quote,
-    kycUrl,
-    navigateToAdditionalVerification,
     submitSsnDetails,
-    navigateToKycProcessing,
+    routeAfterAuthentication,
     selectedRegion?.isoCode,
     trackEvent,
   ]);

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

@@ -10,7 +10,7 @@ const mockGoBack = jest.fn();
 const mockSetNavigationOptions = jest.fn();
 const mockStopPolling = jest.fn();
 const mockStartPolling = jest.fn();
-const mockHandleApprovedKycFlow = jest.fn();
+const mockRouteAfterAuthentication = jest.fn();
 
 const mockTrackEvent = jest.fn();
 
@@ -78,7 +78,7 @@ jest.mock('../../../../../UI/Navbar', () => ({
 
 jest.mock('../../hooks/useDepositRouting', () => ({
   useDepositRouting: jest.fn(() => ({
-    handleApprovedKycFlow: mockHandleApprovedKycFlow,
+    routeAfterAuthentication: mockRouteAfterAuthentication,
   })),
 }));
 
@@ -95,7 +95,7 @@ describe('KycProcessing Component', () => {
     mockUseUserDetailsPolling.userDetails = null;
     mockUseUserDetailsPolling.loading = false;
     mockUseUserDetailsPolling.error = null;
-    mockHandleApprovedKycFlow.mockClear();
+    mockRouteAfterAuthentication.mockClear();
     mockTrackEvent.mockClear();
   });
 
@@ -156,15 +156,15 @@ describe('KycProcessing Component', () => {
       };
     });
 
-    it('calls handleApprovedKycFlow when continue button is pressed', async () => {
-      mockHandleApprovedKycFlow.mockResolvedValueOnce(undefined);
+    it('calls routeAfterAuthentication when continue button is pressed', async () => {
+      mockRouteAfterAuthentication.mockResolvedValueOnce(undefined);
       render(KycProcessing);
 
       const continueButton = screen.getByText('Complete your order');
       fireEvent.press(continueButton);
 
       await waitFor(() => {
-        expect(mockHandleApprovedKycFlow).toHaveBeenCalledWith(mockQuote);
+        expect(mockRouteAfterAuthentication).toHaveBeenCalledWith(mockQuote);
       });
     });
   });

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

@@ -54,7 +54,7 @@ const KycProcessing = () => {
     quote.network,
   );
 
-  const { handleApprovedKycFlow } = useDepositRouting({
+  const { routeAfterAuthentication } = useDepositRouting({
     cryptoCurrencyChainId: cryptoCurrency?.chainId || '',
     paymentMethodId: quote.paymentMethod,
   });
@@ -98,14 +98,14 @@ const KycProcessing = () => {
 
   const handleContinue = useCallback(async () => {
     try {
-      await handleApprovedKycFlow(quote);
+      await routeAfterAuthentication(quote);
     } catch (error) {
       Logger.error(error as Error, {
         message: 'KycProcessing::handleContinue error',
         quote,
       });
     }
-  }, [handleApprovedKycFlow, quote]);
+  }, [routeAfterAuthentication, quote]);
 
   const error = userDetailsError || kycFormsError;
   const hasPendingForms = kycForms && kycForms.forms.length > 0;