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

src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -65,6 +65,9 @@ type ValidateCodeFormProps = {
 
     /** Function is called when validate code modal is mounted and on magic code resend */
     sendValidateCode: () => void;
+
+    /** Wheather the form is loading or not */
+    isLoading?: boolean;
 };
 
 function BaseValidateCodeForm({
@@ -78,6 +81,7 @@ function BaseValidateCodeForm({
     clearError,
     sendValidateCode,
     buttonStyles,
+    isLoading,
 }: ValidateCodeFormProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -259,7 +263,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

@@ -26,6 +26,7 @@ function ValidateCodeActionModal({
     footer,
     sendValidateCode,
     hasMagicCodeBeenSent,
+    isLoading,
 }: ValidateCodeActionModalProps) {
     const themeStyles = useThemeStyles();
     const safePaddingBottomStyle = useSafePaddingBottomStyle();
@@ -81,6 +82,7 @@ function ValidateCodeActionModal({
                         buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1, safePaddingBottomStyle]}
                         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

@@ -392,6 +392,10 @@ function clearIssueNewCardFlow() {
     });
 }
 
+function clearIssueNewCardError(issueNewCard: IssueNewCardFlowData) {
+    Onyx.set(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, {...issueNewCard, errors: null});
+}
+
 function updateExpensifyCardLimit(workspaceAccountID: number, cardID: number, newLimit: number, newAvailableSpend: number, oldLimit?: number, oldAvailableSpend?: number) {
     const authToken = NetworkStore.getAuthToken();
 
@@ -721,7 +725,7 @@ function configureExpensifyCardsForPolicy(policyID: string, bankAccountID?: numb
     });
 }
 
-function issueExpensifyCard(policyID: string, feedCountry: string, data?: IssueNewCardData) {
+function issueExpensifyCard(policyID: string, feedCountry: string, validateCode: string, data?: IssueNewCardData) {
     if (!data) {
         return;
     }
@@ -768,6 +772,7 @@ function issueExpensifyCard(policyID: string, feedCountry: string, data?: IssueN
         limit,
         limitType,
         cardTitle,
+        validateCode,
     };
 
     if (cardType === CONST.EXPENSIFY_CARD.CARD_TYPE.PHYSICAL) {
@@ -884,6 +889,7 @@ export {
     requestReplacementExpensifyCard,
     activatePhysicalExpensifyCard,
     clearCardListErrors,
+    clearIssueNewCardError,
     reportVirtualExpensifyCardFraud,
     revealVirtualCardDetails,
     updateSettlementFrequency,

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

@@ -1,11 +1,12 @@
-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';
@@ -15,6 +16,7 @@ import * as ErrorUtils from '@libs/ErrorUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 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,11 +35,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 [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
+    const validateError = ErrorUtils.getLatestErrorMessageField(issueNewCard);
+    const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
     const data = issueNewCard?.data;
     const isSuccessful = issueNewCard?.isSuccessful;
+    const validateCodeSent = validateCodeAction?.validateCodeSent;
 
     const submitButton = useRef<View>(null);
 
@@ -53,8 +58,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 +127,32 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
                         isAlertVisible={!!errorMessage}
                         isDisabled={isOffline}
                         isLoading={issueNewCard?.isLoading}
-                        onSubmit={submit}
+                        onSubmit={() => setIsValidateCodeActionModalVisible(true)}
                         buttonText={translate('workspace.card.issueCard')}
                     />
                 </View>
             </ScrollView>
+            {!!issueNewCard && (
+                <ValidateCodeActionModal
+                    handleSubmitForm={submit}
+                    isLoading={issueNewCard?.isLoading}
+                    sendValidateCode={() => User.requestValidateCodeAction()}
+                    validateError={validateError}
+                    hasMagicCodeBeenSent={validateCodeSent}
+                    clearError={() => {
+                        Card.clearIssueNewCardError(issueNewCard);
+                    }}
+                    onClose={() => {
+                        if (validateError) {
+                            Card.clearIssueNewCardError(issueNewCard);
+                        }
+                        setIsValidateCodeActionModalVisible(false);
+                    }}
+                    isVisible={isValidateCodeActionModalVisible}
+                    title={translate('cardPage.validateCardTitle')}
+                    description={translate('cardPage.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
+                />
+            )}
         </InteractiveStepWrapper>
     );
 }