From a72b6740be10de53fae4eb046af0b5fddadb2265 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 30 Aug 2024 11:05:43 +0200
Subject: [PATCH 1/3] fix: default card name, confirmation step button focus

---
 src/libs/PersonalDetailsUtils.ts                         | 9 +++++++++
 .../workspace/expensifyCard/issueNew/CardNameStep.tsx    | 8 ++++++--
 .../expensifyCard/issueNew/ConfirmationStep.tsx          | 8 ++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/libs/PersonalDetailsUtils.ts b/src/libs/PersonalDetailsUtils.ts
index fe3ea7de3bac..28e89954c0d1 100644
--- a/src/libs/PersonalDetailsUtils.ts
+++ b/src/libs/PersonalDetailsUtils.ts
@@ -338,6 +338,14 @@ function getPersonalDetailsLength() {
     return personalDetails.length;
 }
 
+function getUserNameByEmail(email: string, nameToDisplay: 'firstName' | 'displayName') {
+    const userDetails = getPersonalDetailByEmail(email);
+    if (userDetails) {
+        return userDetails[nameToDisplay] ?? userDetails.login;
+    }
+    return email;
+}
+
 export {
     isPersonalDetailsEmpty,
     getDisplayNameOrDefault,
@@ -355,4 +363,5 @@ export {
     extractFirstAndLastNameFromAvailableDetails,
     getNewAccountIDsAndLogins,
     getPersonalDetailsLength,
+    getUserNameByEmail,
 };
diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx
index 556f512c725d..f90635d96f83 100644
--- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx
@@ -12,6 +12,7 @@ import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
@@ -25,6 +26,10 @@ function CardNameStep() {
     const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD);
 
     const isEditing = issueNewCard?.isEditing;
+    const data = issueNewCard?.data;
+
+    const userName = PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName');
+    const defaultCardTitle = `${userName}'s Card`;
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM> => {
@@ -88,8 +93,7 @@ function CardNameStep() {
                     hint={translate('workspace.card.issueNewCard.giveItNameInstruction')}
                     aria-label={translate('workspace.card.issueNewCard.cardName')}
                     role={CONST.ROLE.PRESENTATION}
-                    // TODO: default value for card name
-                    defaultValue={issueNewCard?.data?.cardTitle}
+                    defaultValue={issueNewCard?.data?.cardTitle ?? defaultCardTitle}
                     containerStyles={[styles.mb6]}
                     ref={inputCallbackRef}
                 />
diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
index aed246227d7d..e5899bf632dd 100644
--- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -35,6 +35,8 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
 
     const data = issueNewCard?.data;
 
+    const submitButton = useRef<View>(null);
+
     const submit = () => {
         Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, data);
         Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1'));
@@ -57,6 +59,7 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            onEntryTransitionEnd={() => submitButton.current?.focus()}
         >
             <HeaderWithBackButton
                 title={translate('workspace.card.issueCard')}
@@ -76,7 +79,7 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
                 <Text style={[styles.textSupporting, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.willBeReady')}</Text>
                 <MenuItemWithTopDescription
                     description={translate('workspace.card.issueNewCard.cardholder')}
-                    title={PersonalDetailsUtils.getPersonalDetailByEmail(data?.assigneeEmail ?? '')?.displayName}
+                    title={PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'displayName')}
                     shouldShowRightIcon
                     onPress={() => editStep(CONST.EXPENSIFY_CARD.STEP.ASSIGNEE)}
                 />
@@ -106,6 +109,7 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
                 />
                 <View style={[styles.mh5, styles.pb5, styles.mt3, styles.flexGrow1, styles.justifyContentEnd]}>
                     <Button
+                        ref={submitButton}
                         isDisabled={isOffline}
                         success
                         large

From 86d2327169e7aec8c7dab7f0f9d6cac8134881ec Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 30 Aug 2024 11:08:35 +0200
Subject: [PATCH 2/3] fix: minor fix

---
 .../workspace/expensifyCard/issueNew/ConfirmationStep.tsx  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
index e5899bf632dd..3c82d9075fc4 100644
--- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -37,6 +37,10 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
 
     const submitButton = useRef<View>(null);
 
+    useEffect(() => {
+        submitButton.current?.focus();
+    }, []);
+
     const submit = () => {
         Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, data);
         Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1'));
@@ -59,7 +63,6 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
-            onEntryTransitionEnd={() => submitButton.current?.focus()}
         >
             <HeaderWithBackButton
                 title={translate('workspace.card.issueCard')}

From b46eea71bc9a819f4af46c72b148d7ab083219b0 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 30 Aug 2024 12:37:34 +0200
Subject: [PATCH 3/3] fix: minor fix

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

diff --git a/src/libs/PersonalDetailsUtils.ts b/src/libs/PersonalDetailsUtils.ts
index 28e89954c0d1..af48fd793b43 100644
--- a/src/libs/PersonalDetailsUtils.ts
+++ b/src/libs/PersonalDetailsUtils.ts
@@ -341,7 +341,7 @@ function getPersonalDetailsLength() {
 function getUserNameByEmail(email: string, nameToDisplay: 'firstName' | 'displayName') {
     const userDetails = getPersonalDetailByEmail(email);
     if (userDetails) {
-        return userDetails[nameToDisplay] ?? userDetails.login;
+        return userDetails[nameToDisplay] ? userDetails[nameToDisplay] : userDetails.login;
     }
     return email;
 }