From 1aa4fe744ef5e64f39f89b6a67efd5097435ff62 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 5 Nov 2024 12:33:16 +0100
Subject: [PATCH 1/4] Add Card name display to the confirmation step

---
 src/CONST.ts                                  |  1 +
 .../API/parameters/AssignCompanyCardParams.ts |  1 +
 src/libs/actions/CompanyCards.ts              |  3 +-
 .../WorkspaceCompanyCardEditCardNamePage.tsx  |  5 +-
 .../assignCard/AssignCardFeedPage.tsx         |  3 +
 .../companyCards/assignCard/AssigneeStep.tsx  |  5 +
 .../companyCards/assignCard/CardNameStep.tsx  | 97 +++++++++++++++++++
 .../assignCard/CardSelectionStep.tsx          |  4 +-
 .../assignCard/ConfirmationStep.tsx           |  8 +-
 src/types/onyx/AssignCard.ts                  |  5 +-
 10 files changed, 126 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/workspace/companyCards/assignCard/CardNameStep.tsx

diff --git a/src/CONST.ts b/src/CONST.ts
index fbe12d1fdfb2..ba8f1f0cc062 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -2684,6 +2684,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/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts
index a106fbeff510..6ebdab59a9e6 100644
--- a/src/libs/actions/CompanyCards.ts
+++ b/src/libs/actions/CompanyCards.ts
@@ -159,7 +159,7 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial<AssignCardD
     if (!data) {
         return;
     }
-    const {bankName = '', email = '', encryptedCardNumber = '', startDate = ''} = data;
+    const {bankName = '', email = '', encryptedCardNumber = '', startDate = '', cardName = ''} = data;
     const assigneeDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
     const optimisticCardAssignedReportAction = ReportUtils.buildOptimisticCardAssignedReportAction(assigneeDetails?.accountID ?? -1);
 
@@ -167,6 +167,7 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial<AssignCardD
         policyID,
         bankName,
         encryptedCardNumber,
+        cardName,
         email,
         startDate,
         reportActionID: optimisticCardAssignedReportAction.reportActionID,
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
index 5431206c13c4..f3a8e81a7ed6 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
@@ -6,6 +6,7 @@ import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
@@ -63,6 +64,9 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC
                     title={translate('workspace.moreFeatures.companyCards.cardName')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, bank))}
                 />
+                <Text style={[styles.mt3, styles.mh5, styles.mb5]}>
+                    <Text style={styles.textNormal}>{translate('workspace.moreFeatures.companyCards.giveItNameInstruction')}</Text>
+                </Text>
                 <FormProvider
                     formID={ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM}
                     submitButtonText={translate('common.save')}
@@ -75,7 +79,6 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC
                         InputComponent={TextInput}
                         inputID={INPUT_IDS.NAME}
                         label={translate('workspace.moreFeatures.companyCards.cardName')}
-                        hint={translate('workspace.moreFeatures.companyCards.giveItNameInstruction')}
                         aria-label={translate('workspace.moreFeatures.companyCards.cardName')}
                         role={CONST.ROLE.PRESENTATION}
                         defaultValue={defaultValue}
diff --git a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
index ad3589651b3a..20c51b882054 100644
--- a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
+++ b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
@@ -9,6 +9,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import AssigneeStep from './AssigneeStep';
+import CardNameStep from './CardNameStep';
 import CardSelectionStep from './CardSelectionStep';
 import ConfirmationStep from './ConfirmationStep';
 import TransactionStartDateStep from './TransactionStartDateStep';
@@ -39,6 +40,8 @@ function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
             );
         case CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE:
             return <TransactionStartDateStep />;
+        case CONST.COMPANY_CARD.STEP.CARD_NAME:
+            return <CardNameStep policyID={policyID} />;
         case CONST.COMPANY_CARD.STEP.CONFIRMATION:
             return (
                 <ConfirmationStep
diff --git a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx
index a57395d69cec..e8e8c81cba07 100644
--- a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx
@@ -53,10 +53,15 @@ function AssigneeStep({policy}: AssigneeStepProps) {
             setShouldShowError(true);
             return;
         }
+
+        const personalDetail = PersonalDetailsUtils.getPersonalDetailByEmail(selectedMember);
+        const memberName = personalDetail?.firstName ? personalDetail.firstName : personalDetail?.login;
+
         CompanyCards.setAssignCardStepAndData({
             currentStep: isEditing ? CONST.COMPANY_CARD.STEP.CONFIRMATION : CONST.COMPANY_CARD.STEP.CARD,
             data: {
                 email: selectedMember,
+                cardName: `${memberName}'s card`,
             },
             isEditing: false,
         });
diff --git a/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx b/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx
new file mode 100644
index 000000000000..56065ed7570e
--- /dev/null
+++ b/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import {useOnyx} from 'react-native-onyx';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import * as CompanyCards from '@userActions/CompanyCards';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import INPUT_IDS from '@src/types/form/EditExpensifyCardNameForm';
+
+type CardNameStepProps = {
+    /** Current policy id */
+    policyID: string;
+};
+
+function CardNameStep({policyID}: CardNameStepProps) {
+    const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
+    const styles = useThemeStyles();
+    const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);
+
+    const data = assignCard?.data;
+
+    const submit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM>) => {
+        CompanyCards.setAssignCardStepAndData({
+            currentStep: CONST.COMPANY_CARD.STEP.CONFIRMATION,
+            data: {
+                cardName: values.name,
+            },
+            isEditing: false,
+        });
+    };
+
+    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM> => {
+        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 (
+        <AccessOrNotFoundWrapper
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
+        >
+            <ScreenWrapper
+                testID={CardNameStep.displayName}
+                shouldEnablePickerAvoiding={false}
+                shouldEnableMaxHeight
+            >
+                <HeaderWithBackButton
+                    title={translate('workspace.moreFeatures.companyCards.cardName')}
+                    onBackButtonPress={() => CompanyCards.setAssignCardStepAndData({currentStep: CONST.COMPANY_CARD.STEP.CONFIRMATION, isEditing: false})}
+                />
+                <Text style={[styles.mt3, styles.mh5, styles.mb5]}>
+                    <Text style={styles.textNormal}>{translate('workspace.moreFeatures.companyCards.giveItNameInstruction')}</Text>
+                </Text>
+                <FormProvider
+                    formID={ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM}
+                    submitButtonText={translate('common.confirm')}
+                    onSubmit={submit}
+                    style={[styles.flex1, styles.mh5]}
+                    enabledWhenOffline
+                    validate={validate}
+                >
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        inputID={INPUT_IDS.NAME}
+                        label={translate('workspace.moreFeatures.companyCards.cardName')}
+                        aria-label={translate('workspace.moreFeatures.companyCards.cardName')}
+                        role={CONST.ROLE.PRESENTATION}
+                        defaultValue={data?.cardName}
+                        ref={inputCallbackRef}
+                    />
+                </FormProvider>
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+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 2d0fab26b070..002ad9eac254 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) {
                 />
                 <MenuItemWithTopDescription
                     description={translate('workspace.companyCards.card')}
-                    title={data?.cardName}
+                    title={data?.cardNumber}
                     shouldShowRightIcon
                     onPress={() => 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)}
                 />
+                <MenuItemWithTopDescription
+                    description={translate('workspace.companyCards.cardName')}
+                    title={data?.cardName}
+                    shouldShowRightIcon
+                    onPress={() => editStep(CONST.COMPANY_CARD.STEP.CARD_NAME)}
+                />
                 <View style={[styles.mh5, styles.pb5, styles.mt3, styles.flexGrow1, styles.justifyContentEnd]}>
                     <Button
                         isDisabled={isOffline}
diff --git a/src/types/onyx/AssignCard.ts b/src/types/onyx/AssignCard.ts
index 690900fe5f74..3e69de72541f 100644
--- a/src/types/onyx/AssignCard.ts
+++ b/src/types/onyx/AssignCard.ts
@@ -9,9 +9,12 @@ type AssignCardData = {
     /** The email address of the assignee */
     email: string;
 
-    /** Number of the selected card */
+    /** Encrypted number of the selected card */
     encryptedCardNumber: string;
 
+    /** Number of the selected card */
+    cardNumber: string;
+
     /** The name of the feed */
     bankName: string;
 

From b14b70429807c48313a6b29cb8ea54de071562f1 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 5 Nov 2024 14:42:25 +0100
Subject: [PATCH 2/4] Minor improvement

---
 .../companyCards/WorkspaceCompanyCardEditCardNamePage.tsx     | 4 +---
 src/pages/workspace/companyCards/assignCard/CardNameStep.tsx  | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
index f3a8e81a7ed6..0b61b37ba402 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
@@ -64,9 +64,7 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC
                     title={translate('workspace.moreFeatures.companyCards.cardName')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, bank))}
                 />
-                <Text style={[styles.mt3, styles.mh5, styles.mb5]}>
-                    <Text style={styles.textNormal}>{translate('workspace.moreFeatures.companyCards.giveItNameInstruction')}</Text>
-                </Text>
+                <Text style={[styles.mh5, styles.mt3, styles.mb5]}>{translate('workspace.moreFeatures.companyCards.giveItNameInstruction')}</Text>
                 <FormProvider
                     formID={ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM}
                     submitButtonText={translate('common.save')}
diff --git a/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx b/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx
index 56065ed7570e..7223b9ce1b12 100644
--- a/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx
@@ -66,9 +66,7 @@ function CardNameStep({policyID}: CardNameStepProps) {
                     title={translate('workspace.moreFeatures.companyCards.cardName')}
                     onBackButtonPress={() => CompanyCards.setAssignCardStepAndData({currentStep: CONST.COMPANY_CARD.STEP.CONFIRMATION, isEditing: false})}
                 />
-                <Text style={[styles.mt3, styles.mh5, styles.mb5]}>
-                    <Text style={styles.textNormal}>{translate('workspace.moreFeatures.companyCards.giveItNameInstruction')}</Text>
-                </Text>
+                <Text style={[styles.mh5, styles.mt3, styles.mb5]}>{translate('workspace.moreFeatures.companyCards.giveItNameInstruction')}</Text>
                 <FormProvider
                     formID={ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM}
                     submitButtonText={translate('common.confirm')}

From 25ae51a4c1705c38a319ceb7f4e62ea465d3c9d2 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 6 Nov 2024 09:57:35 +0100
Subject: [PATCH 3/4] Minor fix

---
 src/libs/CardUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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<string, string>, 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 {

From 98bf01c1ccc8c739e9d8b34f44a41021e62d31c5 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 6 Nov 2024 10:56:58 +0100
Subject: [PATCH 4/4] Align the UI between steps

---
 src/pages/workspace/companyCards/assignCard/CardNameStep.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx b/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx
index 7223b9ce1b12..95bfadd23957 100644
--- a/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/CardNameStep.tsx
@@ -60,7 +60,7 @@ function CardNameStep({policyID}: CardNameStepProps) {
             <ScreenWrapper
                 testID={CardNameStep.displayName}
                 shouldEnablePickerAvoiding={false}
-                shouldEnableMaxHeight
+                includeSafeAreaPaddingBottom={false}
             >
                 <HeaderWithBackButton
                     title={translate('workspace.moreFeatures.companyCards.cardName')}