Merge pull request #47773 from daledah/fix/47324

Expensify · Aug 24, 2024 · 0c84552 · 0c84552
2 parents 42bed64 + c2d3138
commit 0c84552
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/SelectionList/CardListItem.tsx b/src/components/SelectionList/CardListItem.tsx
@@ -5,13 +5,14 @@ import Icon from '@components/Icon';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import SelectCircle from '@components/SelectCircle';
 import TextWithTooltip from '@components/TextWithTooltip';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {BankIcon} from '@src/types/onyx/Bank';
 import BaseListItem from './BaseListItem';
 import type {BaseListItemProps, ListItem} from './types';
 
-type CardListItemProps<TItem extends ListItem> = BaseListItemProps<TItem & {bankIcon?: BankIcon}>;
+type CardListItemProps<TItem extends ListItem> = BaseListItemProps<TItem & {bankIcon?: BankIcon; lastFourPAN?: string}>;
 
 function CardListItem<TItem extends ListItem>({
     item,
@@ -27,6 +28,7 @@ function CardListItem<TItem extends ListItem>({
     shouldSyncFocus,
 }: CardListItemProps<TItem>) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
 
     const handleCheckboxPress = useCallback(() => {
         if (onCheckboxPress) {
@@ -65,7 +67,7 @@ function CardListItem<TItem extends ListItem>({
                     </View>
                 )}
                 <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
-                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                    <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
                         <TextWithTooltip
                             shouldShowTooltip={showTooltip}
                             text={Str.removeSMSDomain(item.text ?? '')}
@@ -77,6 +79,13 @@ function CardListItem<TItem extends ListItem>({
                                 item.alternateText ? styles.mb1 : null,
                             ]}
                         />
+                        {!!item.lastFourPAN && (
+                            <TextWithTooltip
+                                shouldShowTooltip={showTooltip}
+                                text={`${translate('paymentMethodList.accountLastFour')} ${item.lastFourPAN}`}
+                                style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                            />
+                        )}
                     </View>
                 </View>
                 {canSelectMultiple && !item.isDisabled && (

diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx
@@ -34,6 +34,7 @@ function SearchFiltersCardPage() {
                 const icon = getBankIcon({bankName: card.bank as BankName, isCard: true, styles});
 
                 return {
+                    lastFourPAN: card.lastFourPAN,
                     text: card.bank,
                     keyForList: card.cardID.toString(),
                     isSelected: newCards.includes(card.cardID.toString()),