fix: Add a step validate to the Issue New Card form

src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -64,6 +64,9 @@ type ValidateCodeFormProps = {
     clearError: () => void;
 
     sendValidateCode: () => void;
+
+    /** Wheather the form is loading or not */
+    isLoading?: boolean;
 };
 
 function BaseValidateCodeForm({
@@ -77,6 +80,7 @@ function BaseValidateCodeForm({
     clearError,
     sendValidateCode,
     buttonStyles,
+    isLoading,
 }: ValidateCodeFormProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -233,7 +237,8 @@ function BaseValidateCodeForm({
                     style={[styles.mt4]}
                     success
                     large
-                    isLoading={account?.isLoading}
+                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                    isLoading={account?.isLoading || isLoading}
                 />
             </OfflineWithFeedback>
         </>

src/components/ValidateCodeActionModal/index.tsx

@@ -25,6 +25,7 @@ function ValidateCodeActionModal({
     footer,
     sendValidateCode,
     hasMagicCodeBeenSent,
+    isLoading,
 }: ValidateCodeActionModalProps) {
     const themeStyles = useThemeStyles();
     const firstRenderRef = useRef(true);
@@ -78,6 +79,7 @@ function ValidateCodeActionModal({
                         clearError={clearError}
                         ref={validateCodeFormRef}
                         hasMagicCodeBeenSent={hasMagicCodeBeenSent}
+                        isLoading={isLoading}
                     />
                 </View>
                 {footer?.()}

src/components/ValidateCodeActionModal/type.ts

@@ -37,6 +37,9 @@ type ValidateCodeActionModalProps = {
 
     /** If the magic code has been resent previously */
     hasMagicCodeBeenSent?: boolean;
+
+    /** Wheather the form is loading or not */
+    isLoading?: boolean;
 };
 
 // eslint-disable-next-line import/prefer-default-export

src/libs/actions/Card.ts

@@ -622,7 +622,7 @@ function configureExpensifyCardsForPolicy(policyID: string, bankAccountID?: numb
     API.write(WRITE_COMMANDS.CONFIGURE_EXPENSIFY_CARDS_FOR_POLICY, parameters);
 }
 
-function issueExpensifyCard(policyID: string, feedCountry: string, data?: IssueNewCardData) {
+function issueExpensifyCard(policyID: string, feedCountry: string, validateCode: string, data?: IssueNewCardData) {
     if (!data) {
         return;
     }
@@ -669,6 +669,7 @@ function issueExpensifyCard(policyID: string, feedCountry: string, data?: IssueN
         limit,
         limitType,
         cardTitle,
+        validateCode,
     };
 
     if (cardType === CONST.EXPENSIFY_CARD.CARD_TYPE.PHYSICAL) {

src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx

@@ -1,20 +1,24 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
+import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getTranslationKeyForLimitType} from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import {addSMSDomainIfPhoneNumber} from '@libs/PhoneNumber';
+import * as UserUtils from '@libs/UserUtils';
 import Navigation from '@navigation/Navigation';
 import * as Card from '@userActions/Card';
+import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -33,9 +37,14 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
-
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD);
-
+    const [pendingContactAction] = useOnyx(ONYXKEYS.PENDING_CONTACT_ACTION);
+    const contactMethod = UserUtils.getContactMethod();
+    const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
+    const loginData = loginList?.[pendingContactAction?.contactMethod ?? contactMethod];
+    const validateLoginError = ErrorUtils.getLatestErrorField(loginData, 'addedLogin');
+    const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
     const data = issueNewCard?.data;
     const isSuccessful = issueNewCard?.isSuccessful;
 
@@ -53,8 +62,8 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
         Card.clearIssueNewCardFlow();
     }, [backTo, policyID, isSuccessful]);
 
-    const submit = () => {
-        Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, data);
+    const submit = (validateCode: string) => {
+        Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, validateCode, data);
     };
 
     const errorMessage = ErrorUtils.getLatestErrorMessage(issueNewCard);
@@ -122,11 +131,33 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
                         isAlertVisible={!!errorMessage}
                         isDisabled={isOffline}
                         isLoading={issueNewCard?.isLoading}
-                        onSubmit={submit}
+                        onSubmit={() => setIsValidateCodeActionModalVisible(true)}
                         buttonText={translate('workspace.card.issueCard')}
                     />
                 </View>
             </ScrollView>
+            <ValidateCodeActionModal
+                handleSubmitForm={submit}
+                isLoading={issueNewCard?.isLoading}
+                sendValidateCode={() => User.requestValidateCodeAction()}
+                validateError={validateLoginError}
+                clearError={() => {
+                    if (!loginData) {
+                        return;
+                    }
+                    User.clearContactMethodErrors(addSMSDomainIfPhoneNumber(pendingContactAction?.contactMethod ?? contactMethod), 'addedLogin');
+                }}
+                onClose={() => {
+                    if (loginData?.errorFields && pendingContactAction?.contactMethod) {
+                        User.clearContactMethod(pendingContactAction?.contactMethod);
+                        User.clearUnvalidatedNewContactMethodAction();
+                    }
+                    setIsValidateCodeActionModalVisible(false);
+                }}
+                isVisible={isValidateCodeActionModalVisible}
+                title={translate('cardPage.validateCardTitle')}
+                description={translate('cardPage.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
+            />
         </InteractiveStepWrapper>
     );
 }