From 687af6b6e7f488ee98298ea8bb73db613488ffe5 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 21 Aug 2024 14:59:14 +0700
Subject: [PATCH 1/3] feat: add last 4 digits to card list

---
 src/components/SelectionList/CardListItem.tsx | 11 +++++++++--
 src/pages/Search/SearchFiltersCardPage.tsx    |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectionList/CardListItem.tsx b/src/components/SelectionList/CardListItem.tsx
index a8e642aa4be7..fe6d1df4d72d 100644
--- a/src/components/SelectionList/CardListItem.tsx
+++ b/src/components/SelectionList/CardListItem.tsx
@@ -11,7 +11,7 @@ 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,
@@ -65,7 +65,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, styles.optionRow]}>
                         <TextWithTooltip
                             shouldShowTooltip={showTooltip}
                             text={Str.removeSMSDomain(item.text ?? '')}
@@ -77,6 +77,13 @@ function CardListItem<TItem extends ListItem>({
                                 item.alternateText ? styles.mb1 : null,
                             ]}
                         />
+                        {!!item.lastFourPAN && (
+                            <TextWithTooltip
+                                shouldShowTooltip={showTooltip}
+                                text={`Ending in ${item.lastFourPAN}`}
+                                style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                            />
+                        )}
                     </View>
                 </View>
                 {canSelectMultiple && !item.isDisabled && (
diff --git a/src/pages/Search/SearchFiltersCardPage.tsx b/src/pages/Search/SearchFiltersCardPage.tsx
index 4760dcdf0ff3..27a63f778634 100644
--- a/src/pages/Search/SearchFiltersCardPage.tsx
+++ b/src/pages/Search/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()),

From e341e1dcb1045acc31ea9a2ff0d98b48fa001e8c Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 22 Aug 2024 13:10:02 +0700
Subject: [PATCH 2/3] fix: remove extra padding, change text

---
 src/components/SelectionList/CardListItem.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectionList/CardListItem.tsx b/src/components/SelectionList/CardListItem.tsx
index fe6d1df4d72d..7008e7f5620c 100644
--- a/src/components/SelectionList/CardListItem.tsx
+++ b/src/components/SelectionList/CardListItem.tsx
@@ -5,6 +5,7 @@ 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';
@@ -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.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
+                    <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
                         <TextWithTooltip
                             shouldShowTooltip={showTooltip}
                             text={Str.removeSMSDomain(item.text ?? '')}
@@ -80,7 +82,7 @@ function CardListItem<TItem extends ListItem>({
                         {!!item.lastFourPAN && (
                             <TextWithTooltip
                                 shouldShowTooltip={showTooltip}
-                                text={`Ending in ${item.lastFourPAN}`}
+                                text={translate('subscription.cardSection.cardEnding', {cardNumber: item.lastFourPAN})}
                                 style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                             />
                         )}

From 0a26f6e188457b90b542fa4af4c9395d2c02b4d6 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Fri, 23 Aug 2024 13:51:10 +0700
Subject: [PATCH 3/3] fix: change text

---
 src/components/SelectionList/CardListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectionList/CardListItem.tsx b/src/components/SelectionList/CardListItem.tsx
index 7008e7f5620c..2b3baa3d3037 100644
--- a/src/components/SelectionList/CardListItem.tsx
+++ b/src/components/SelectionList/CardListItem.tsx
@@ -82,7 +82,7 @@ function CardListItem<TItem extends ListItem>({
                         {!!item.lastFourPAN && (
                             <TextWithTooltip
                                 shouldShowTooltip={showTooltip}
-                                text={translate('subscription.cardSection.cardEnding', {cardNumber: item.lastFourPAN})}
+                                text={`${translate('paymentMethodList.accountLastFour')} ${item.lastFourPAN}`}
                                 style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                             />
                         )}