Merge pull request Expensify#52521 from nkdengineer/fix/52316

Feat: require magic code validation for add missing detail
bernhardoj · Nov 26, 2024 · 9f87df4 · 9f87df4
2 parents df4f8b8 + ab621ba
commit 9f87df4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/src/libs/API/parameters/SetPersonalDetailsAndShipExpensifyCardsParams.ts b/src/libs/API/parameters/SetPersonalDetailsAndShipExpensifyCardsParams.ts
@@ -9,6 +9,7 @@ type SetPersonalDetailsAndShipExpensifyCardsParams = {
     addressCountry: string;
     addressState: string;
     dob: string;
+    validateCode: string;
 };
 
 export default SetPersonalDetailsAndShipExpensifyCardsParams;
diff --git a/src/libs/actions/PersonalDetails.ts b/src/libs/actions/PersonalDetails.ts
@@ -465,7 +465,7 @@ function clearAvatarErrors() {
     });
 }
 
-function updatePersonalDetailsAndShipExpensifyCards(values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>) {
+function updatePersonalDetailsAndShipExpensifyCards(values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>, validateCode: string) {
     const parameters: SetPersonalDetailsAndShipExpensifyCardsParams = {
         legalFirstName: values.legalFirstName?.trim() ?? '',
         legalLastName: values.legalLastName?.trim() ?? '',
@@ -477,6 +477,7 @@ function updatePersonalDetailsAndShipExpensifyCards(values: FormOnyxValues<typeo
         addressCountry: values.country,
         addressState: values.state.trim(),
         dob: values.dob,
+        validateCode,
     };
 
     API.write(WRITE_COMMANDS.SET_PERSONAL_DETAILS_AND_SHIP_EXPENSIFY_CARDS, parameters, {

diff --git a/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx b/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx
@@ -1,15 +1,18 @@
-import React, {useCallback, useMemo, useRef} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import type {InteractiveStepSubHeaderHandle} from '@components/InteractiveStepSubHeader';
 import ScreenWrapper from '@components/ScreenWrapper';
+import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FormActions from '@libs/actions/FormActions';
+import {requestValidateCodeAction} from '@libs/actions/User';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
@@ -34,6 +37,11 @@ const formSteps = [LegalName, DateOfBirth, Address, PhoneNumber, Confirmation];
 function MissingPersonalDetailsContent({privatePersonalDetails, draftValues}: MissingPersonalDetailsContentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
+    const primaryLogin = account?.primaryLogin ?? '';
+    const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
+
     const ref: ForwardedRef<InteractiveStepSubHeaderHandle> = useRef(null);
 
     const values = useMemo(() => getSubstepValues(privatePersonalDetails, draftValues), [privatePersonalDetails, draftValues]);
@@ -44,9 +52,7 @@ function MissingPersonalDetailsContent({privatePersonalDetails, draftValues}: Mi
         if (!values) {
             return;
         }
-        PersonalDetails.updatePersonalDetailsAndShipExpensifyCards(values);
-        FormActions.clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
-        Navigation.goBack();
+        setIsValidateCodeActionModalVisible(true);
     }, [values]);
 
     const {
@@ -75,6 +81,23 @@ function MissingPersonalDetailsContent({privatePersonalDetails, draftValues}: Mi
         prevScreen();
     };
 
+    const handleValidateCodeEntered = useCallback(
+        (validateCode: string) => {
+            PersonalDetails.updatePersonalDetailsAndShipExpensifyCards(values, validateCode);
+            FormActions.clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
+            Navigation.goBack();
+        },
+        [values],
+    );
+
+    const sendValidateCode = () => {
+        if (validateCodeAction?.validateCodeSent) {
+            return;
+        }
+
+        requestValidateCodeAction();
+    };
+
     const handleNextScreen = useCallback(() => {
         if (isEditing) {
             goToTheLastStep();
@@ -108,6 +131,17 @@ function MissingPersonalDetailsContent({privatePersonalDetails, draftValues}: Mi
                 screenIndex={screenIndex}
                 personalDetailsValues={values}
             />
+
+            <ValidateCodeActionModal
+                handleSubmitForm={handleValidateCodeEntered}
+                sendValidateCode={sendValidateCode}
+                clearError={() => {}}
+                onClose={() => setIsValidateCodeActionModalVisible(false)}
+                isVisible={isValidateCodeActionModalVisible}
+                title={translate('cardPage.validateCardTitle')}
+                descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
+                hasMagicCodeBeenSent={!!validateCodeAction?.validateCodeSent}
+            />
         </ScreenWrapper>
     );
 }