From f920ad6508d785ebcffd197045d0ccf6b8b0fd94 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 17 Jul 2024 19:11:57 +0700
Subject: [PATCH 1/2] fix: only display last 4 digits

---
 src/pages/settings/Subscription/CardSection/CardSection.tsx | 3 ++-
 src/pages/settings/Subscription/CardSection/utils.ts        | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx
index 4cc160fc13b2..b77cd2486144 100644
--- a/src/pages/settings/Subscription/CardSection/CardSection.tsx
+++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx
@@ -30,6 +30,7 @@ import CardSectionActions from './CardSectionActions';
 import CardSectionDataEmpty from './CardSectionDataEmpty';
 import type {BillingStatusResult} from './utils';
 import CardSectionUtils from './utils';
+import { getPaymentMethodDescription } from '@libs/PaymentUtils';
 
 function CardSection() {
     const [isRequestRefundModalVisible, setIsRequestRefundModalVisible] = useState(false);
@@ -113,7 +114,7 @@ function CardSection() {
                                 medium
                             />
                             <View style={styles.flex1}>
-                                <Text style={styles.textStrong}>{translate('subscription.cardSection.cardEnding', {cardNumber: defaultCard?.accountData?.cardNumber})}</Text>
+                                <Text style={styles.textStrong}>{getPaymentMethodDescription(defaultCard?.accountType, defaultCard?.accountData)}</Text>
                                 <Text style={styles.mutedNormalTextLabel}>
                                     {translate('subscription.cardSection.cardInfo', {
                                         name: defaultCard?.accountData?.addressName,
diff --git a/src/pages/settings/Subscription/CardSection/utils.ts b/src/pages/settings/Subscription/CardSection/utils.ts
index 9a797d98e025..48999f1bb7cb 100644
--- a/src/pages/settings/Subscription/CardSection/utils.ts
+++ b/src/pages/settings/Subscription/CardSection/utils.ts
@@ -24,7 +24,7 @@ function getBillingStatus(
     translate: <TKey extends TranslationPaths>(phraseKey: TKey, ...phraseParameters: PhraseParameters<Phrase<TKey>>) => string,
     accountData?: AccountData,
 ): BillingStatusResult | undefined {
-    const cardEnding = accountData?.cardNumber ?? '';
+    const cardEnding = (accountData?.cardNumber ?? '')?.slice(-4);
 
     const amountOwed = SubscriptionUtils.getAmountOwed();
 

From 792bad5d893cceb66a9eadce8a8f64a0960a221e Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 17 Jul 2024 19:38:27 +0700
Subject: [PATCH 2/2] fix lint

---
 src/pages/settings/Subscription/CardSection/CardSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx
index b77cd2486144..bbdc5aa67838 100644
--- a/src/pages/settings/Subscription/CardSection/CardSection.tsx
+++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx
@@ -16,6 +16,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as User from '@libs/actions/User';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import {getPaymentMethodDescription} from '@libs/PaymentUtils';
 import * as SubscriptionUtils from '@libs/SubscriptionUtils';
 import * as Subscription from '@userActions/Subscription';
 import CONST from '@src/CONST';
@@ -30,7 +31,6 @@ import CardSectionActions from './CardSectionActions';
 import CardSectionDataEmpty from './CardSectionDataEmpty';
 import type {BillingStatusResult} from './utils';
 import CardSectionUtils from './utils';
-import { getPaymentMethodDescription } from '@libs/PaymentUtils';
 
 function CardSection() {
     const [isRequestRefundModalVisible, setIsRequestRefundModalVisible] = useState(false);