From 0ea64e7b567e66fd653ccc4c139f4da3d036a1ca Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 16 Oct 2024 15:34:14 +0700 Subject: [PATCH 1/9] fix: Add a step validate to the Issue New Card form --- src/libs/actions/Card.ts | 3 ++- .../issueNew/ConfirmationStep.tsx | 21 +++++++++++++------ 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts index c0de9510c6ba..fb15d40322a5 100644 --- a/src/libs/actions/Card.ts +++ b/src/libs/actions/Card.ts @@ -618,7 +618,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; } @@ -631,6 +631,7 @@ function issueExpensifyCard(policyID: string, feedCountry: string, data?: IssueN limit, limitType, cardTitle, + validateCode, }; if (cardType === CONST.EXPENSIFY_CARD.CARD_TYPE.PHYSICAL) { diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index c5a852450828..c7d0cf4dbd92 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -1,4 +1,4 @@ -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 Button from '@components/Button'; @@ -8,6 +8,7 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import ScreenWrapper from '@components/ScreenWrapper'; 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'; @@ -34,9 +35,9 @@ 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 [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false); const data = issueNewCard?.data; const submitButton = useRef(null); @@ -45,8 +46,8 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { submitButton.current?.focus(); }, []); - const submit = () => { - Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, data); + const submit = (validateCode: string) => { + Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, validateCode, data); Navigation.navigate(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1')); Card.clearIssueNewCardFlow(); }; @@ -121,11 +122,19 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { success large style={[styles.w100]} - onPress={submit} + onPress={() => setIsValidateCodeActionModalVisible(true)} text={translate('workspace.card.issueCard')} /> + {}} + onClose={() => setIsValidateCodeActionModalVisible(false)} + isVisible={isValidateCodeActionModalVisible} + title={translate('cardPage.validateCardTitle')} + description={translate('cardPage.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})} + /> ); } From ef089e9a8a0b637b922cd361b021251e8f3ee626 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 30 Oct 2024 23:04:42 +0700 Subject: [PATCH 2/9] handle error code --- .../issueNew/ConfirmationStep.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 191d01985f50..2a8a5e546847 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -14,6 +14,8 @@ 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'; @@ -37,6 +39,11 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { 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; @@ -132,8 +139,20 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { User.requestValidateCodeAction()} - clearError={() => {}} - onClose={() => setIsValidateCodeActionModalVisible(false)} + 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 ?? ''})} From 4d758ef968a4b8b2989dfffe9216c3eff8eae407 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 5 Nov 2024 15:38:38 +0700 Subject: [PATCH 3/9] handle loading validate modal --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 7 ++++++- src/components/ValidateCodeActionModal/index.tsx | 2 ++ src/components/ValidateCodeActionModal/type.ts | 3 +++ .../workspace/expensifyCard/issueNew/ConfirmationStep.tsx | 1 + 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 02121ce26906..c9cd8fea8053 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/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} /> diff --git a/src/components/ValidateCodeActionModal/index.tsx b/src/components/ValidateCodeActionModal/index.tsx index ff84198002d8..05030335eb99 100644 --- a/src/components/ValidateCodeActionModal/index.tsx +++ b/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} /> {footer?.()} diff --git a/src/components/ValidateCodeActionModal/type.ts b/src/components/ValidateCodeActionModal/type.ts index 5556287b370e..1fda266ec47d 100644 --- a/src/components/ValidateCodeActionModal/type.ts +++ b/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 diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 2a8a5e546847..894caa69c8ef 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -138,6 +138,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { User.requestValidateCodeAction()} validateError={validateLoginError} clearError={() => { From 0fd888779c6a3bf6db2b37370ff2e0fd431f625e Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 7 Nov 2024 16:44:53 +0700 Subject: [PATCH 4/9] fix: logic show error in confirmation step --- src/libs/actions/Card.ts | 6 ++++++ .../expensifyCard/issueNew/ConfirmationStep.tsx | 11 +++-------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts index 5aa105148cf4..5d195f86b22d 100644 --- a/src/libs/actions/Card.ts +++ b/src/libs/actions/Card.ts @@ -388,6 +388,11 @@ function clearIssueNewCardFlow() { data: {}, }); } +function clearIssueNewCardError() { + Onyx.set(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, { + errors: null, + }); +} function updateExpensifyCardLimit(workspaceAccountID: number, cardID: number, newLimit: number, newAvailableSpend: number, oldLimit?: number, oldAvailableSpend?: number) { const authToken = NetworkStore.getAuthToken(); @@ -882,6 +887,7 @@ export { requestReplacementExpensifyCard, activatePhysicalExpensifyCard, clearCardListErrors, + clearIssueNewCardError, reportVirtualExpensifyCardFraud, revealVirtualCardDetails, updateSettlementFrequency, diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 894caa69c8ef..59a3e6b6db3b 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -41,9 +41,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { 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 validateLoginError = issueNewCard?.errors; const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false); const data = issueNewCard?.data; const isSuccessful = issueNewCard?.isSuccessful; @@ -142,15 +140,12 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { sendValidateCode={() => User.requestValidateCodeAction()} validateError={validateLoginError} clearError={() => { - if (!loginData) { - return; - } User.clearContactMethodErrors(addSMSDomainIfPhoneNumber(pendingContactAction?.contactMethod ?? contactMethod), 'addedLogin'); }} onClose={() => { - if (loginData?.errorFields && pendingContactAction?.contactMethod) { + if (validateLoginError && pendingContactAction?.contactMethod) { User.clearContactMethod(pendingContactAction?.contactMethod); - User.clearUnvalidatedNewContactMethodAction(); + Card.clearIssueNewCardError(); } setIsValidateCodeActionModalVisible(false); }} From 1d2472514ac4d2971af6cc54fe7fe5768cc96790 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 8 Nov 2024 23:29:10 +0700 Subject: [PATCH 5/9] fix some logic in confirmation step --- .../workspace/expensifyCard/issueNew/ConfirmationStep.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 59a3e6b6db3b..e16613d71868 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -14,8 +14,6 @@ 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'; @@ -40,8 +38,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { 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 validateLoginError = issueNewCard?.errors; + const validateLoginError = ErrorUtils.getLatestErrorMessageField(issueNewCard); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false); const data = issueNewCard?.data; const isSuccessful = issueNewCard?.isSuccessful; @@ -140,11 +137,10 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { sendValidateCode={() => User.requestValidateCodeAction()} validateError={validateLoginError} clearError={() => { - User.clearContactMethodErrors(addSMSDomainIfPhoneNumber(pendingContactAction?.contactMethod ?? contactMethod), 'addedLogin'); + Card.clearIssueNewCardError(); }} onClose={() => { if (validateLoginError && pendingContactAction?.contactMethod) { - User.clearContactMethod(pendingContactAction?.contactMethod); Card.clearIssueNewCardError(); } setIsValidateCodeActionModalVisible(false); From d21fb1aa2fb0ea2e4127ce559ba135e3f0ac651a Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Sat, 9 Nov 2024 23:58:29 +0700 Subject: [PATCH 6/9] remove login logic --- .../workspace/expensifyCard/issueNew/ConfirmationStep.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index e16613d71868..14dd45b1427b 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -37,8 +37,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { const {isOffline} = useNetwork(); const [account] = useOnyx(ONYXKEYS.ACCOUNT); const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD); - const [pendingContactAction] = useOnyx(ONYXKEYS.PENDING_CONTACT_ACTION); - const validateLoginError = ErrorUtils.getLatestErrorMessageField(issueNewCard); + const validateError = ErrorUtils.getLatestErrorMessageField(issueNewCard); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false); const data = issueNewCard?.data; const isSuccessful = issueNewCard?.isSuccessful; @@ -135,12 +134,12 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { handleSubmitForm={submit} isLoading={issueNewCard?.isLoading} sendValidateCode={() => User.requestValidateCodeAction()} - validateError={validateLoginError} + validateError={validateError} clearError={() => { Card.clearIssueNewCardError(); }} onClose={() => { - if (validateLoginError && pendingContactAction?.contactMethod) { + if (validateError) { Card.clearIssueNewCardError(); } setIsValidateCodeActionModalVisible(false); From 589a398ed91c08d3a7d6d15a41103ac2eb7b8340 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Sun, 10 Nov 2024 01:38:29 +0700 Subject: [PATCH 7/9] fix cannot enter validate code --- src/libs/actions/Card.ts | 7 ++-- .../issueNew/ConfirmationStep.tsx | 38 ++++++++++--------- 2 files changed, 23 insertions(+), 22 deletions(-) diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts index 1ad4b5f7053e..1c60d49e9170 100644 --- a/src/libs/actions/Card.ts +++ b/src/libs/actions/Card.ts @@ -391,10 +391,9 @@ function clearIssueNewCardFlow() { data: {}, }); } -function clearIssueNewCardError() { - Onyx.set(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, { - errors: null, - }); + +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) { diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 14dd45b1427b..5ba2a2f5de16 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -130,24 +130,26 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { /> - User.requestValidateCodeAction()} - validateError={validateError} - clearError={() => { - Card.clearIssueNewCardError(); - }} - onClose={() => { - if (validateError) { - Card.clearIssueNewCardError(); - } - setIsValidateCodeActionModalVisible(false); - }} - isVisible={isValidateCodeActionModalVisible} - title={translate('cardPage.validateCardTitle')} - description={translate('cardPage.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})} - /> + {issueNewCard && ( + User.requestValidateCodeAction()} + validateError={validateError} + 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 ?? ''})} + /> + )} ); } From 4794ac736d8fa53798eb18ce4d5c97fc51ab5aba Mon Sep 17 00:00:00 2001 From: nkdengineer <161821005+nkdengineer@users.noreply.github.com> Date: Mon, 11 Nov 2024 10:39:45 +0700 Subject: [PATCH 8/9] Update src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx Co-authored-by: Hans --- src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 5ba2a2f5de16..4dd8a8ecf84a 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -130,7 +130,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { /> - {issueNewCard && ( + {!!issueNewCard && ( Date: Wed, 13 Nov 2024 15:09:10 +0700 Subject: [PATCH 9/9] fix: add has magic code been set --- .../workspace/expensifyCard/issueNew/ConfirmationStep.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 4dd8a8ecf84a..cb5cd997b3b2 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -37,10 +37,12 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { 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(null); @@ -136,6 +138,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { isLoading={issueNewCard?.isLoading} sendValidateCode={() => User.requestValidateCodeAction()} validateError={validateError} + hasMagicCodeBeenSent={validateCodeSent} clearError={() => { Card.clearIssueNewCardError(issueNewCard); }}