Merge pull request #48317 from koko57/fix/48092-default-card-name

Expensify · Aug 30, 2024 · 4b075a0 · 4b075a0
2 parents 1f71ce6 + b46eea7
commit 4b075a0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git 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[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
@@ -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
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -35,6 +35,12 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
 
     const data = issueNewCard?.data;
 
+    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'));
@@ -76,7 +82,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 +112,7 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
                 />
                 <View style={[styles.mh5, styles.pb5, styles.mt3, styles.flexGrow1, styles.justifyContentEnd]}>
                     <Button
+                        ref={submitButton}
                         isDisabled={isOffline}
                         success
                         large