diff --git a/src/CONST.ts b/src/CONST.ts index d8e8b11bd3f1..72dff8c87b17 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2699,6 +2699,7 @@ const CONST = { STEP: { ASSIGNEE: 'Assignee', CARD: 'Card', + CARD_NAME: 'CardName', TRANSACTION_START_DATE: 'TransactionStartDate', CONFIRMATION: 'Confirmation', }, diff --git a/src/libs/API/parameters/AssignCompanyCardParams.ts b/src/libs/API/parameters/AssignCompanyCardParams.ts index c4dcd7c628a0..782345686c62 100644 --- a/src/libs/API/parameters/AssignCompanyCardParams.ts +++ b/src/libs/API/parameters/AssignCompanyCardParams.ts @@ -1,6 +1,7 @@ type AssignCompanyCardParams = { policyID: string; bankName: string; + cardName: string; encryptedCardNumber: string; email: string; startDate: string; diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 80b784a162cf..ad9bf7f4b90e 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -190,7 +190,7 @@ function getCompanyCardNumber(cardList: Record, lastFourPAN?: st return ''; } - return Object.keys(cardList).find((card) => card.endsWith(lastFourPAN)) ?? ''; + return Object.keys(cardList).find((card) => card.endsWith(lastFourPAN)) ?? maskCard(lastFourPAN); } function getCardFeedIcon(cardFeed: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK): IconAsset { diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts index 2955a62f28c7..be928bc67f3a 100644 --- a/src/libs/actions/CompanyCards.ts +++ b/src/libs/actions/CompanyCards.ts @@ -183,7 +183,7 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial; + case CONST.COMPANY_CARD.STEP.CARD_NAME: + return ; case CONST.COMPANY_CARD.STEP.CONFIRMATION: return ( ) => { + CompanyCards.setAssignCardStepAndData({ + currentStep: CONST.COMPANY_CARD.STEP.CONFIRMATION, + data: { + cardName: values.name, + }, + isEditing: false, + }); + }; + + const validate = (values: FormOnyxValues): FormInputErrors => { + const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.NAME]); + const length = values.name.length; + + if (length > CONST.STANDARD_LENGTH_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT})); + } + + return errors; + }; + + return ( + + + CompanyCards.setAssignCardStepAndData({currentStep: CONST.COMPANY_CARD.STEP.CONFIRMATION, isEditing: false})} + /> + {translate('workspace.moreFeatures.companyCards.giveItNameInstruction')} + + + + + + ); +} + +CardNameStep.displayName = 'CardNameStep'; + +export default CardNameStep; diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx index 84e7ea5723a7..9795adb3fa0d 100644 --- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx @@ -88,14 +88,14 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) { return; } - const cardName = + const cardNumber = Object.entries(filteredCardList) .find(([, encryptedCardNumber]) => encryptedCardNumber === cardSelected) ?.at(0) ?? ''; CompanyCards.setAssignCardStepAndData({ currentStep: isEditing ? CONST.COMPANY_CARD.STEP.CONFIRMATION : CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE, - data: {encryptedCardNumber: cardSelected, cardName: accountCardList?.length > 0 ? cardSelected : cardName}, + data: {encryptedCardNumber: cardSelected, cardNumber: accountCardList?.length > 0 ? cardSelected : cardNumber}, isEditing: false, }); }; diff --git a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx index 01933f827362..6d8c00504998 100644 --- a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx @@ -75,7 +75,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { /> editStep(CONST.COMPANY_CARD.STEP.CARD)} /> @@ -85,6 +85,12 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { shouldShowRightIcon onPress={() => editStep(CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE)} /> + editStep(CONST.COMPANY_CARD.STEP.CARD_NAME)} + />