diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 4a9bbe12203d..7750e795e9c7 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -418,9 +418,6 @@ const ONYXKEYS = { /** Stores the last export method for policy */ LAST_EXPORT_METHOD: 'lastExportMethod', - /** Stores the information about the state of issuing a new card */ - ISSUE_NEW_EXPENSIFY_CARD: 'issueNewExpensifyCard', - /** Stores the information about the state of addint a new company card */ ADD_NEW_COMPANY_CARD: 'addNewCompanyCard', @@ -556,6 +553,9 @@ const ONYXKEYS = { /** Whether the bank account chosen for Expensify Card in on verification waitlist */ NVP_EXPENSIFY_ON_CARD_WAITLIST: 'nvp_expensify_onCardWaitlist_', + + /** Stores the information about the state of issuing a new card */ + ISSUE_NEW_EXPENSIFY_CARD: 'issueNewExpensifyCard_', }, /** List of Form ids */ @@ -897,6 +897,7 @@ type OnyxCollectionValuesMapping = { [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION]: boolean; [ONYXKEYS.COLLECTION.LAST_SELECTED_FEED]: OnyxTypes.CompanyCardFeed; [ONYXKEYS.COLLECTION.NVP_EXPENSIFY_ON_CARD_WAITLIST]: OnyxTypes.CardOnWaitlist; + [ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD]: OnyxTypes.IssueNewCard; }; type OnyxValuesMapping = { @@ -1036,7 +1037,6 @@ type OnyxValuesMapping = { [ONYXKEYS.SUBSCRIPTION_RETRY_BILLING_STATUS_PENDING]: boolean; [ONYXKEYS.NVP_TRAVEL_SETTINGS]: OnyxTypes.TravelSettings; [ONYXKEYS.REVIEW_DUPLICATES]: OnyxTypes.ReviewDuplicates; - [ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD]: OnyxTypes.IssueNewCard; [ONYXKEYS.ADD_NEW_COMPANY_CARD]: OnyxTypes.AddNewCompanyCardFeed; [ONYXKEYS.ASSIGN_CARD]: OnyxTypes.AssignCard; [ONYXKEYS.MOBILE_SELECTION_MODE]: OnyxTypes.MobileSelectionMode; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 33c94e343568..781ccbb66814 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -1310,7 +1310,7 @@ const ROUTES = { }, WORKSPACE_EXPENSIFY_CARD: { route: 'settings/workspaces/:policyID/expensify-card', - getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card` as const, + getRoute: (policyID: string | undefined) => `settings/workspaces/${policyID}/expensify-card` as const, }, WORKSPACE_EXPENSIFY_CARD_DETAILS: { route: 'settings/workspaces/:policyID/expensify-card/:cardID', diff --git a/src/libs/API/parameters/CreateExpensifyCardParams.ts b/src/libs/API/parameters/CreateExpensifyCardParams.ts index f6aa9eb8e512..d90b7649a7d6 100644 --- a/src/libs/API/parameters/CreateExpensifyCardParams.ts +++ b/src/libs/API/parameters/CreateExpensifyCardParams.ts @@ -1,5 +1,5 @@ type CreateExpensifyCardParams = { - policyID: string; + policyID: string | undefined; assigneeEmail: string; limit: number; limitType: string; diff --git a/src/libs/API/parameters/StartIssueNewCardFlowParams.ts b/src/libs/API/parameters/StartIssueNewCardFlowParams.ts index 8ed04b756a10..8bff276b9cd0 100644 --- a/src/libs/API/parameters/StartIssueNewCardFlowParams.ts +++ b/src/libs/API/parameters/StartIssueNewCardFlowParams.ts @@ -1,5 +1,5 @@ type StartIssueNewCardFlowParams = { - policyID: string; + policyID: string | undefined; }; export default StartIssueNewCardFlowParams; diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts index 271da9b4eada..17943440c1f1 100644 --- a/src/libs/actions/Card.ts +++ b/src/libs/actions/Card.ts @@ -35,6 +35,9 @@ type IssueNewCardFlowData = { /** Data required to be sent to issue a new card */ data?: Partial; + + /** ID of the policy */ + policyID: string | undefined; }; function reportVirtualExpensifyCardFraud(card: Card, validateCode: string) { @@ -381,19 +384,19 @@ function getCardDefaultName(userName?: string) { return `${userName}'s Card`; } -function setIssueNewCardStepAndData({data, isEditing, step}: IssueNewCardFlowData) { - Onyx.merge(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, {data, isEditing, currentStep: step, errors: null}); +function setIssueNewCardStepAndData({data, isEditing, step, policyID}: IssueNewCardFlowData) { + Onyx.merge(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {data, isEditing, currentStep: step, errors: null}); } -function clearIssueNewCardFlow() { - Onyx.set(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, { +function clearIssueNewCardFlow(policyID: string | undefined) { + Onyx.set(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, { currentStep: null, data: {}, }); } -function clearIssueNewCardError() { - Onyx.merge(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, {errors: null}); +function clearIssueNewCardError(policyID: string | undefined) { + Onyx.merge(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {errors: null}); } function updateExpensifyCardLimit(workspaceAccountID: number, cardID: number, newLimit: number, newAvailableSpend: number, oldLimit?: number, oldAvailableSpend?: number) { @@ -664,7 +667,7 @@ function deactivateCard(workspaceAccountID: number, card?: Card) { API.write(WRITE_COMMANDS.CARD_DEACTIVATE, parameters, {optimisticData, failureData}); } -function startIssueNewCardFlow(policyID: string) { +function startIssueNewCardFlow(policyID: string | undefined) { const parameters: StartIssueNewCardFlowParams = { policyID, }; @@ -725,7 +728,7 @@ function configureExpensifyCardsForPolicy(policyID: string, bankAccountID?: numb }); } -function issueExpensifyCard(policyID: string, feedCountry: string, validateCode: string, data?: IssueNewCardData) { +function issueExpensifyCard(policyID: string | undefined, feedCountry: string, validateCode: string, data?: IssueNewCardData) { if (!data) { return; } @@ -735,7 +738,7 @@ function issueExpensifyCard(policyID: string, feedCountry: string, validateCode: const optimisticData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, + key: `${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, value: { isLoading: true, errors: null, @@ -747,7 +750,7 @@ function issueExpensifyCard(policyID: string, feedCountry: string, validateCode: const successData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, + key: `${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, value: { isLoading: false, isSuccessful: true, @@ -758,7 +761,7 @@ function issueExpensifyCard(policyID: string, feedCountry: string, validateCode: const failureData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, + key: `${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, value: { isLoading: false, errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'), diff --git a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx index 769532e49351..f6841113b706 100644 --- a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx @@ -12,11 +12,11 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; -import * as OptionsListUtils from '@libs/OptionsListUtils'; -import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; -import * as PolicyUtils from '@libs/PolicyUtils'; +import {getHeaderMessage, getSearchValueForPhoneOrEmail, sortAlphabetically} from '@libs/OptionsListUtils'; +import {getPersonalDetailByEmail, getUserNameByEmail} from '@libs/PersonalDetailsUtils'; +import {isDeletedPolicyEmployee} from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; -import * as Card from '@userActions/Card'; +import {clearIssueNewCardFlow, getCardDefaultName, setIssueNewCardStepAndData} from '@userActions/Card'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type * as OnyxTypes from '@src/types/onyx'; @@ -33,7 +33,8 @@ function AssigneeStep({policy}: AssigneeStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); - const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD); + const policyID = policy?.id; + const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`); const isEditing = issueNewCard?.isEditing; @@ -44,25 +45,26 @@ function AssigneeStep({policy}: AssigneeStepProps) { assigneeEmail: assignee?.login ?? '', }; - if (isEditing && issueNewCard?.data?.cardTitle === Card.getCardDefaultName(PersonalDetailsUtils.getUserNameByEmail(issueNewCard?.data?.assigneeEmail, 'firstName'))) { + if (isEditing && issueNewCard?.data?.cardTitle === getCardDefaultName(getUserNameByEmail(issueNewCard?.data?.assigneeEmail, 'firstName'))) { // If the card title is the default card title, update it with the new assignee's name - data.cardTitle = Card.getCardDefaultName(PersonalDetailsUtils.getUserNameByEmail(assignee?.login ?? '', 'firstName')); + data.cardTitle = getCardDefaultName(getUserNameByEmail(assignee?.login ?? '', 'firstName')); } - Card.setIssueNewCardStepAndData({ + setIssueNewCardStepAndData({ step: isEditing ? CONST.EXPENSIFY_CARD.STEP.CONFIRMATION : CONST.EXPENSIFY_CARD.STEP.CARD_TYPE, data, isEditing: false, + policyID, }); }; const handleBackButtonPress = () => { if (isEditing) { - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false}); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false, policyID}); return; } Navigation.goBack(); - Card.clearIssueNewCardFlow(); + clearIssueNewCardFlow(policyID); }; const shouldShowSearchInput = policy?.employeeList && Object.keys(policy.employeeList).length >= MINIMUM_MEMBER_TO_SHOW_SEARCH; @@ -75,11 +77,11 @@ function AssigneeStep({policy}: AssigneeStepProps) { } Object.entries(policy.employeeList ?? {}).forEach(([email, policyEmployee]) => { - if (PolicyUtils.isDeletedPolicyEmployee(policyEmployee, isOffline)) { + if (isDeletedPolicyEmployee(policyEmployee, isOffline)) { return; } - const personalDetail = PersonalDetailsUtils.getPersonalDetailByEmail(email); + const personalDetail = getPersonalDetailByEmail(email); membersList.push({ keyForList: email, text: personalDetail?.displayName, @@ -97,7 +99,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { }); }); - membersList = OptionsListUtils.sortAlphabetically(membersList, 'text'); + membersList = sortAlphabetically(membersList, 'text'); return membersList; }, [isOffline, policy?.employeeList]); @@ -112,7 +114,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { ]; } - const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm).toLowerCase(); + const searchValue = getSearchValueForPhoneOrEmail(debouncedSearchTerm).toLowerCase(); const filteredOptions = membersDetails.filter((option) => !!option.text?.toLowerCase().includes(searchValue) || !!option.alternateText?.toLowerCase().includes(searchValue)); return [ @@ -127,7 +129,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { const headerMessage = useMemo(() => { const searchValue = debouncedSearchTerm.trim().toLowerCase(); - return OptionsListUtils.getHeaderMessage(sections[0].data.length !== 0, false, searchValue); + return getHeaderMessage(sections[0].data.length !== 0, false, searchValue); }, [debouncedSearchTerm, sections]); return ( diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx index 75ea83755704..81ac308b746b 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx @@ -9,53 +9,62 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as CardUtils from '@libs/CardUtils'; -import * as ErrorUtils from '@libs/ErrorUtils'; -import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; -import * as ValidationUtils from '@libs/ValidationUtils'; -import * as Card from '@userActions/Card'; +import {getDefaultCardName} from '@libs/CardUtils'; +import {addErrorMessage} from '@libs/ErrorUtils'; +import {getUserNameByEmail} from '@libs/PersonalDetailsUtils'; +import {getFieldRequiredErrors} from '@libs/ValidationUtils'; +import {setIssueNewCardStepAndData} from '@userActions/Card'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/IssueNewExpensifyCardForm'; -function CardNameStep() { +type CardNameStepProps = { + /** ID of the policy */ + policyID: string | undefined; +}; + +function CardNameStep({policyID}: CardNameStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const {inputCallbackRef} = useAutoFocusInput(); - const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD); + const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`); const isEditing = issueNewCard?.isEditing; const data = issueNewCard?.data; - const userName = PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName'); - const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? CardUtils.getDefaultCardName(userName) : ''; + const userName = getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName'); + const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? getDefaultCardName(userName) : ''; const validate = (values: FormOnyxValues): FormInputErrors => { - const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); + const errors = getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); const length = values.cardTitle.length; if (length > CONST.STANDARD_LENGTH_LIMIT) { - ErrorUtils.addErrorMessage(errors, INPUT_IDS.CARD_TITLE, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT})); + addErrorMessage(errors, INPUT_IDS.CARD_TITLE, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT})); } return errors; }; - const submit = useCallback((values: FormOnyxValues) => { - Card.setIssueNewCardStepAndData({ - step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, - data: { - cardTitle: values.cardTitle, - }, - isEditing: false, - }); - }, []); + const submit = useCallback( + (values: FormOnyxValues) => { + setIssueNewCardStepAndData({ + step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, + data: { + cardTitle: values.cardTitle, + }, + isEditing: false, + policyID, + }); + }, + [policyID], + ); const handleBackButtonPress = useCallback(() => { if (isEditing) { - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false}); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false, policyID}); return; } - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.LIMIT}); - }, [isEditing]); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.LIMIT, policyID}); + }, [isEditing, policyID]); return ( ) => { - Card.setIssueNewCardStepAndData({ + setIssueNewCardStepAndData({ step: isEditing ? CONST.EXPENSIFY_CARD.STEP.CONFIRMATION : CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE, data: { cardType: value, }, isEditing: false, + policyID, }); }; const handleBackButtonPress = () => { if (isEditing) { - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false}); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false, policyID}); return; } - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.ASSIGNEE}); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.ASSIGNEE, policyID}); }; return ( diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 154cc53a882c..b4cb6d8f6a95 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -11,13 +11,13 @@ import useBeforeRemove from '@hooks/useBeforeRemove'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; +import {clearIssueNewCardError, clearIssueNewCardFlow, issueExpensifyCard, setIssueNewCardStepAndData} from '@libs/actions/Card'; +import {requestValidateCodeAction, resetValidateActionCodeSent} from '@libs/actions/User'; import {getTranslationKeyForLimitType} from '@libs/CardUtils'; -import * as CurrencyUtils from '@libs/CurrencyUtils'; -import * as ErrorUtils from '@libs/ErrorUtils'; -import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; +import {convertToShortDisplayString} from '@libs/CurrencyUtils'; +import {getLatestErrorMessage, getLatestErrorMessageField} from '@libs/ErrorUtils'; +import {getUserNameByEmail} 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'; @@ -26,7 +26,7 @@ import type {IssueNewCardStep} from '@src/types/onyx/Card'; type ConfirmationStepProps = { /** ID of the policy that the card will be issued under */ - policyID: string; + policyID: string | undefined; /** Route to navigate to */ backTo?: Route; @@ -37,9 +37,9 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { const styles = useThemeStyles(); const {isOffline} = useNetwork(); const [account] = useOnyx(ONYXKEYS.ACCOUNT); - const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD); + const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`); const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE); - const validateError = ErrorUtils.getLatestErrorMessageField(issueNewCard); + const validateError = getLatestErrorMessageField(issueNewCard); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false); const data = issueNewCard?.data; const isSuccessful = issueNewCard?.isSuccessful; @@ -51,29 +51,29 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { useEffect(() => { submitButton.current?.focus(); - User.resetValidateActionCodeSent(); + resetValidateActionCodeSent(); }, []); useEffect(() => { if (!isSuccessful) { return; } - Navigation.navigate(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1')); - Card.clearIssueNewCardFlow(); + Navigation.navigate(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID)); + clearIssueNewCardFlow(policyID); }, [backTo, policyID, isSuccessful]); const submit = (validateCode: string) => { - Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, validateCode, data); + issueExpensifyCard(policyID, CONST.COUNTRY.US, validateCode, data); }; - const errorMessage = ErrorUtils.getLatestErrorMessage(issueNewCard); + const errorMessage = getLatestErrorMessage(issueNewCard); const editStep = (step: IssueNewCardStep) => { - Card.setIssueNewCardStepAndData({step, isEditing: true}); + setIssueNewCardStepAndData({step, isEditing: true, policyID}); }; const handleBackButtonPress = () => { - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CARD_NAME}); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CARD_NAME, policyID}); }; const translationForLimitType = getTranslationKeyForLimitType(data?.limitType); @@ -96,7 +96,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { {translate('workspace.card.issueNewCard.willBeReady')} editStep(CONST.EXPENSIFY_CARD.STEP.ASSIGNEE)} /> @@ -108,7 +108,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { /> editStep(CONST.EXPENSIFY_CARD.STEP.LIMIT)} /> @@ -140,10 +140,10 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { User.requestValidateCodeAction()} + sendValidateCode={() => requestValidateCodeAction()} validateError={validateError} hasMagicCodeBeenSent={validateCodeSent} - clearError={() => Card.clearIssueNewCardError()} + clearError={() => clearIssueNewCardError(policyID)} onClose={() => setIsValidateCodeActionModalVisible(false)} isVisible={isValidateCodeActionModalVisible} title={translate('cardPage.validateCardTitle')} diff --git a/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx b/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx index 27653df9f9b0..7e0e3762646d 100644 --- a/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx @@ -2,12 +2,12 @@ import React, {useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper'; import ScreenWrapper from '@components/ScreenWrapper'; +import {startIssueNewCardFlow} from '@libs/actions/Card'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; -import * as Card from '@userActions/Card'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; @@ -21,17 +21,15 @@ import LimitTypeStep from './LimitTypeStep'; type IssueNewCardPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { - const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD); - + const policyID = policy?.id; + const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`); const {currentStep} = issueNewCard ?? {}; - - const policyID = policy?.id ?? '-1'; const backTo = route?.params?.backTo; const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => !!account?.delegatedAccess?.delegate}); useEffect(() => { - Card.startIssueNewCardFlow(policyID); + startIssueNewCardFlow(policyID); }, [policyID]); const getCurrentStep = () => { @@ -39,13 +37,13 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { case CONST.EXPENSIFY_CARD.STEP.ASSIGNEE: return ; case CONST.EXPENSIFY_CARD.STEP.CARD_TYPE: - return ; + return ; case CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE: return ; case CONST.EXPENSIFY_CARD.STEP.LIMIT: - return ; + return ; case CONST.EXPENSIFY_CARD.STEP.CARD_NAME: - return ; + return ; case CONST.EXPENSIFY_CARD.STEP.CONFIRMATION: return ( ) => { - const limit = CurrencyUtils.convertToBackendAmount(Number(values?.limit)); - Card.setIssueNewCardStepAndData({ + const limit = convertToBackendAmount(Number(values?.limit)); + setIssueNewCardStepAndData({ step: isEditing ? CONST.EXPENSIFY_CARD.STEP.CONFIRMATION : CONST.EXPENSIFY_CARD.STEP.CARD_NAME, data: {limit}, isEditing: false, + policyID, }); }, - [isEditing], + [isEditing, policyID], ); const handleBackButtonPress = useCallback(() => { if (isEditing) { - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false}); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false, policyID}); return; } - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE}); - }, [isEditing]); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE, policyID}); + }, [isEditing, policyID]); const validate = useCallback( (values: FormOnyxValues): FormInputErrors => { - const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.LIMIT]); + const errors = getFieldRequiredErrors(values, [INPUT_IDS.LIMIT]); // We only want integers to be sent as the limit if (!Number(values.limit)) { @@ -87,7 +93,7 @@ function LimitStep() { > { - Card.setIssueNewCardStepAndData({ + setIssueNewCardStepAndData({ step: isEditing ? CONST.EXPENSIFY_CARD.STEP.CONFIRMATION : CONST.EXPENSIFY_CARD.STEP.LIMIT, data: {limitType: typeSelected}, isEditing: false, + policyID, }); - }, [isEditing, typeSelected]); + }, [isEditing, typeSelected, policyID]); const handleBackButtonPress = useCallback(() => { if (isEditing) { - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false}); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false, policyID}); return; } - Card.setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CARD_TYPE}); - }, [isEditing]); + setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CARD_TYPE, policyID}); + }, [isEditing, policyID]); const data = useMemo(() => { const options = []; diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 614cd398ec82..64d07fc337cc 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -177,6 +177,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM assigneeEmail: memberLogin, }, isEditing: false, + policyID, }); Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, activeRoute)); }, [accountID, hasMultipleFeeds, memberLogin, policyID]); diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx index 4a6d9e7f4c5c..dbe4bf9f3b86 100644 --- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx @@ -67,6 +67,7 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew assigneeEmail: memberLogin, }, isEditing: false, + policyID, }); Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(policyID, accountID))); } else {