[No QA] Fix/52558 fix card name and images

src/components/Icon/BankIcons/index.native.ts

@@ -26,9 +26,9 @@ export default function getBankIcon({styles, bankName, isCard = false}: BankIcon
         bankIcon.iconSize = variables.iconSizeExtraLarge;
         bankIcon.iconStyles = [styles.bankIconContainer];
     } else {
-        bankIcon.iconHeight = variables.bankCardHeight;
-        bankIcon.iconWidth = variables.bankCardWidth;
-        bankIcon.iconStyles = [styles.assignedCardsIconContainer];
+        bankIcon.iconHeight = variables.cardIconHeight;
+        bankIcon.iconWidth = variables.cardIconWidth;
+        bankIcon.iconStyles = [styles.cardIcon];
     }
 
     return bankIcon;

src/components/Icon/BankIcons/index.ts

@@ -34,9 +34,9 @@ export default function getBankIcon({styles, bankName, isCard = false}: BankIcon
         bankIcon.iconSize = variables.iconSizeExtraLarge;
         bankIcon.iconStyles = [styles.bankIconContainer];
     } else {
-        bankIcon.iconHeight = variables.bankCardHeight;
-        bankIcon.iconWidth = variables.bankCardWidth;
-        bankIcon.iconStyles = [styles.assignedCardsIconContainer];
+        bankIcon.iconHeight = variables.cardIconHeight;
+        bankIcon.iconWidth = variables.cardIconWidth;
+        bankIcon.iconStyles = [styles.cardIcon];
     }
 
     return bankIcon;

src/libs/CardUtils.ts

@@ -363,6 +363,13 @@ function hasOnlyOneCardToAssign(list: FilteredCardList) {
     return Object.keys(list).length === 1;
 }
 
+function getDefaultCardName(cardholder?: string) {
+    if (!cardholder) {
+        return '';
+    }
+    return `${cardholder}'s card`;
+}
+
 export {
     isExpensifyCard,
     isCorporateCard,
@@ -391,4 +398,5 @@ export {
     removeExpensifyCardFromCompanyCards,
     getFilteredCardList,
     hasOnlyOneCardToAssign,
+    getDefaultCardName,
 };

src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx

@@ -3,20 +3,21 @@ import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import getBankIcon from '@components/Icon/BankIcons';
-import type {BankName} from '@components/Icon/BankIconsUtils';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import CardListItem from '@components/SelectionList/CardListItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as CardUtils from '@libs/CardUtils';
 import type {CategorySection} from '@libs/OptionsListUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
+import variables from '@styles/variables';
 import * as SearchActions from '@userActions/Search';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {CompanyCardFeed} from '@src/types/onyx';
 
 function SearchFiltersCardPage() {
     const styles = useThemeStyles();
@@ -32,7 +33,7 @@ function SearchFiltersCardPage() {
         const cards = Object.values(cardList ?? {})
             .sort((a, b) => a.bank.localeCompare(b.bank))
             .map((card) => {
-                const icon = getBankIcon({bankName: card.bank as BankName, isCard: true, styles});
+                const icon = CardUtils.getCardFeedIcon(card?.bank as CompanyCardFeed);
                 const cardName = card?.nameValuePairs?.cardTitle ?? card?.cardName;
                 const text = card.bank === CONST.EXPENSIFY_CARD.BANK ? card.bank : cardName;
 
@@ -42,7 +43,12 @@ function SearchFiltersCardPage() {
                     text,
                     keyForList: card.cardID.toString(),
                     isSelected: newCards.includes(card.cardID.toString()),
-                    bankIcon: icon,
+                    bankIcon: {
+                        icon,
+                        iconWidth: variables.cardIconWidth,
+                        iconHeight: variables.cardIconHeight,
+                        iconStyles: [styles.cardIcon],
+                    },
                 };
             });
         newSections.push({

src/pages/settings/Wallet/PaymentMethodList.tsx

@@ -250,8 +250,9 @@ function PaymentMethodList({
                                 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR
                                 : undefined,
                         icon,
-                        iconStyles: [styles.assignedCardsIconContainer],
-                        iconSize: variables.iconSizeExtraLarge,
+                        iconStyles: [styles.cardIcon],
+                        iconWidth: variables.cardIconWidth,
+                        iconHeight: variables.cardIconHeight,
                     });
                     return;
                 }
@@ -290,9 +291,9 @@ function PaymentMethodList({
                             ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR
                             : undefined,
                     icon,
-                    iconStyles: [styles.assignedCardsIconContainer],
-                    iconWidth: variables.bankCardWidth,
-                    iconHeight: variables.bankCardHeight,
+                    iconStyles: [styles.cardIcon],
+                    iconWidth: variables.cardIconWidth,
+                    iconHeight: variables.cardIconHeight,
                 });
             });
             return assignedCardsGrouped;

src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx

@@ -124,7 +124,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                             >
                                 <MenuItemWithTopDescription
                                     description={translate('workspace.moreFeatures.companyCards.cardName')}
-                                    title={customCardNames?.[cardID] ?? ''}
+                                    title={customCardNames?.[cardID] ?? CardUtils.getDefaultCardName(cardholder?.firstName)}
                                     shouldShowRightIcon
                                     brickRoadIndicator={card?.nameValuePairs?.errorFields?.cardTitle ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                                     onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_NAME.getRoute(policyID, cardID, bank))}

src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx

@@ -54,9 +54,9 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
         leftElement: (
             <Icon
                 src={CardUtils.getCardFeedIcon(feed)}
-                height={variables.iconSizeExtraLarge}
-                width={variables.iconSizeExtraLarge}
-                additionalStyles={styles.mr3}
+                height={variables.cardIconHeight}
+                width={variables.cardIconWidth}
+                additionalStyles={[styles.mr3, styles.cardIcon]}
             />
         ),
     }));

src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx

@@ -61,7 +61,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
                         <WorkspaceCompanyCardsListRow
                             cardholder={personalDetails?.[item.accountID ?? '-1']}
                             cardNumber={CardUtils.maskCardNumber(cardName, item.bank)}
-                            name={customCardNames?.[item.cardID] ?? ''}
+                            name={customCardNames?.[item.cardID] ?? CardUtils.getDefaultCardName(personalDetails?.[item.accountID ?? '-1']?.firstName)}
                         />
                     </PressableWithFeedback>
                 </OfflineWithFeedback>

src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

@@ -90,8 +90,9 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                 >
                     <Icon
                         src={CardUtils.getCardFeedIcon(selectedFeed)}
-                        width={variables.iconSizeExtraLarge}
-                        height={variables.iconSizeExtraLarge}
+                        height={variables.cardIconHeight}
+                        width={variables.cardIconWidth}
+                        additionalStyles={styles.cardIcon}
                     />
                     <View>
                         <View style={[styles.flexRow, styles.gap1]}>

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

@@ -68,7 +68,7 @@ function AssigneeStep({policy}: AssigneeStepProps) {
             currentStep: isEditing ? CONST.COMPANY_CARD.STEP.CONFIRMATION : nextStep,
             data: {
                 email: selectedMember,
-                cardName: `${memberName}'s card`,
+                cardName: CardUtils.getDefaultCardName(memberName),
             },
             isEditing: false,
         });

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

@@ -74,9 +74,9 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
         leftElement: (
             <Icon
                 src={CardUtils.getCardFeedIcon(feed)}
-                height={variables.iconSizeExtraLarge}
-                width={variables.iconSizeExtraLarge}
-                additionalStyles={styles.mr3}
+                height={variables.cardIconHeight}
+                width={variables.cardIconWidth}
+                additionalStyles={[styles.mr3, styles.cardIcon]}
             />
         ),
     }));
@@ -107,9 +107,9 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
         leftElement: (
             <Icon
                 src={CardUtils.getCardFeedIcon(feed)}
-                height={variables.iconSizeExtraLarge}
+                height={variables.cardIconHeight}
                 width={variables.iconSizeExtraLarge}
-                additionalStyles={styles.mr3}
+                additionalStyles={[styles.mr3, styles.cardIcon]}
             />
         ),
     }));

src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx

@@ -9,6 +9,7 @@ import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as CardUtils from '@libs/CardUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -27,7 +28,7 @@ function CardNameStep() {
     const data = issueNewCard?.data;
 
     const userName = PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName');
-    const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? `${userName}'s Card` : '';
+    const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? CardUtils.getDefaultCardName(userName) : '';
 
     const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM> => {
         const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]);

src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

@@ -335,9 +335,8 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                                             icon={CardUtils.getCardFeedIcon(memberCard.bank as CompanyCardFeed)}
                                                             displayInDefaultIconColor
                                                             iconStyles={styles.cardIcon}
-                                                            contentFit="contain"
-                                                            iconWidth={variables.iconSizeExtraLarge}
-                                                            iconHeight={variables.iconSizeExtraLarge}
+                                                            iconWidth={variables.cardIconWidth}
+                                                            iconHeight={variables.cardIconHeight}
                                                             onPress={() => navigateToDetails(memberCard)}
                                                             shouldRemoveHoverBackground={isCardDeleted}
                                                             disabled={isCardDeleted}

src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx

@@ -105,9 +105,9 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
         leftElement: (
             <Icon
                 src={CardUtils.getCardFeedIcon(key)}
-                height={variables.iconSizeExtraLarge}
-                width={variables.iconSizeExtraLarge}
-                additionalStyles={styles.mr3}
+                height={variables.cardIconHeight}
+                width={variables.cardIconWidth}
+                additionalStyles={[styles.mr3, styles.cardIcon]}
             />
         ),
     }));

src/styles/index.ts

@@ -4545,17 +4545,9 @@ const styles = (theme: ThemeColors) =>
             position: 'absolute',
         },
 
-        assignedCardsIconContainer: {
-            height: variables.bankCardHeight,
-            width: variables.bankCardWidth,
-            borderRadius: 4,
-            overflow: 'hidden',
-            alignSelf: 'center',
-        },
-
         bankIconContainer: {
-            height: variables.bankCardWidth,
-            width: variables.bankCardWidth,
+            height: variables.cardIconWidth,
+            width: variables.cardIconWidth,
             borderRadius: 8,
             overflow: 'hidden',
             alignSelf: 'center',
@@ -5219,7 +5211,6 @@ const styles = (theme: ThemeColors) =>
         cardIcon: {
             overflow: 'hidden',
             borderRadius: variables.cardBorderRadius,
-            height: variables.cardIconHeight,
             alignSelf: 'center',
         },
 

src/styles/variables.ts

@@ -200,8 +200,6 @@ export default {
     reportActionImagesDoubleImageHeight: 138,
     reportActionImagesMultipleImageHeight: 110,
     reportActionItemImagesMoreCornerTriangleWidth: 40,
-    bankCardWidth: 40,
-    bankCardHeight: 26,
     popoverzIndex: 10000,
     workspaceTypeIconWidth: 34,
     sectionMargin: 16,
@@ -238,8 +236,8 @@ export default {
     cardPreviewHeight: 148,
     cardPreviewWidth: 235,
     cardIconWidth: 40,
-    cardIconHeight: 25.29,
-    cardBorderRadius: 2.35,
+    cardIconHeight: 26,
+    cardBorderRadius: 4,
 
     cardNameWidth: 156,
     holdMenuIconSize: 64,