[Workspace feed] Add selected employee name to the subtitle of assign card flow

src/components/InteractiveStepWrapper.tsx

@@ -20,6 +20,9 @@ type InteractiveStepWrapperProps = {
     // Title of the back button header
     headerTitle: string;
 
+    // Subtitle of the back button header
+    headerSubtitle?: string;
+
     // Index of the highlighted step
     startStepIndex?: number;
 
@@ -48,6 +51,7 @@ function InteractiveStepWrapper(
         wrapperID,
         handleBackButtonPress,
         headerTitle,
+        headerSubtitle,
         startStepIndex,
         stepNames,
         shouldEnableMaxHeight,
@@ -72,6 +76,7 @@ function InteractiveStepWrapper(
         >
             <HeaderWithBackButton
                 title={headerTitle}
+                subtitle={headerSubtitle}
                 onBackButtonPress={handleBackButtonPress}
                 guidesCallTaskID={guidesCallTaskID}
             />

src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx

@@ -42,7 +42,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
     const accountCardList = cardFeeds?.settings?.oAuthAccountDetails?.[feed]?.accountList ?? [];
 
     const isEditing = assignCard?.isEditing;
-    const assignee = assignCard?.data?.email ?? '';
+    const assigneeDisplayName = PersonalDetailsUtils.getPersonalDetailByEmail(assignCard?.data?.email ?? '')?.displayName ?? '';
     const {cardList, ...cards} = list ?? {};
     // We need to filter out cards which already has been assigned
     const filteredCardList = Object.fromEntries(
@@ -124,6 +124,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
             startStepIndex={listOptions.length ? 1 : undefined}
             stepNames={listOptions.length ? CONST.COMPANY_CARD.STEP_NAMES : undefined}
             headerTitle={translate('workspace.companyCards.assignCard')}
+            headerSubtitle={assigneeDisplayName}
         >
             {!listOptions.length ? (
                 <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.ph5, styles.mb9]}>
@@ -149,7 +150,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
                     <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt3]}>{translate('workspace.companyCards.chooseCard')}</Text>
                     <Text style={[styles.textSupporting, styles.ph5, styles.mv3]}>
                         {translate('workspace.companyCards.chooseCardFor', {
-                            assignee: PersonalDetailsUtils.getPersonalDetailByEmail(assignee ?? '')?.displayName ?? '',
+                            assignee: assigneeDisplayName,
                             feed: CardUtils.getCardFeedName(feed),
                         })}
                     </Text>

src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx

@@ -36,6 +36,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
     const safePaddingBottomStyle = useSafePaddingBottomStyle();
 
     const data = assignCard?.data;
+    const cardholderName = PersonalDetailsUtils.getPersonalDetailByEmail(data?.email ?? '')?.displayName ?? '';
 
     const submit = () => {
         CompanyCards.assignWorkspaceCompanyCard(policyID, data);
@@ -58,6 +59,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
             startStepIndex={3}
             stepNames={CONST.COMPANY_CARD.STEP_NAMES}
             headerTitle={translate('workspace.companyCards.assignCard')}
+            headerSubtitle={cardholderName}
         >
             <ScrollView
                 style={styles.pt0}
@@ -67,7 +69,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
                 <Text style={[styles.textSupporting, styles.ph5, styles.mv3]}>{translate('workspace.companyCards.confirmationDescription')}</Text>
                 <MenuItemWithTopDescription
                     description={translate('workspace.companyCards.cardholder')}
-                    title={PersonalDetailsUtils.getPersonalDetailByEmail(data?.email ?? '')?.displayName ?? ''}
+                    title={cardholderName}
                     shouldShowRightIcon
                     onPress={() => editStep(CONST.COMPANY_CARD.STEP.ASSIGNEE)}
                 />

src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx

@@ -11,6 +11,7 @@ import useLocalize from '@hooks/useLocalize';
 import useSafePaddingBottomStyle from '@hooks/useSafePaddingBottomStyle';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -24,6 +25,7 @@ function TransactionStartDateStep() {
     const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);
     const isEditing = assignCard?.isEditing;
     const data = assignCard?.data;
+    const assigneeDisplayName = PersonalDetailsUtils.getPersonalDetailByEmail(data?.email ?? '')?.displayName ?? '';
 
     const [dateOptionSelected, setDateOptionSelected] = useState(data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.FROM_BEGINNING);
     const [isModalOpened, setIsModalOpened] = useState(false);
@@ -88,6 +90,7 @@ function TransactionStartDateStep() {
             startStepIndex={2}
             stepNames={CONST.COMPANY_CARD.STEP_NAMES}
             headerTitle={translate('workspace.companyCards.assignCard')}
+            headerSubtitle={assigneeDisplayName}
         >
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt3]}>{translate('workspace.companyCards.chooseTransactionStartDate')}</Text>
             <Text style={[styles.textSupporting, styles.ph5, styles.mv3]}>{translate('workspace.companyCards.startDateDescription')}</Text>