From 9899e1d164dd735af3331d3739ed821377771f37 Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Tue, 2 Sep 2025 23:08:37 +0800
Subject: [PATCH] fix: update billing card to reflect period end date and
 adjust related translations

---
 messages/en.json                              |  2 +-
 messages/zh.json                              |  2 +-
 .../settings/billing/billing-card.tsx         | 43 +++++++------------
 3 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 8b32a7e..f0487de 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -592,7 +592,7 @@
         },
         "price": "Price:",
         "periodStartDate": "Period start date:",
-        "nextBillingDate": "Next billing date:",
+        "periodEndDate": "Period end date:",
         "trialEnds": "Trial ends:",
         "freePlanMessage": "You are currently on the free plan with limited features",
         "lifetimeMessage": "You have lifetime access to all premium features",
diff --git a/messages/zh.json b/messages/zh.json
index 9a23698..ee59280 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -592,7 +592,7 @@
         },
         "price": "价格：",
         "periodStartDate": "周期开始日期：",
-        "nextBillingDate": "下次账单日期：",
+        "periodEndDate": "周期结束日期：",
         "trialEnds": "试用结束日期：",
         "freePlanMessage": "您当前使用的是功能有限的免费方案",
         "lifetimeMessage": "您拥有所有高级功能的终身使用权限",
diff --git a/src/components/settings/billing/billing-card.tsx b/src/components/settings/billing/billing-card.tsx
index f517fc2..4a41900 100644
--- a/src/components/settings/billing/billing-card.tsx
+++ b/src/components/settings/billing/billing-card.tsx
@@ -60,23 +60,21 @@ export default function BillingCard() {
   const isFreePlan = currentPlanWithTranslations?.isFree || false;
   const isLifetimeMember = currentPlanWithTranslations?.isLifetime || false;
 
-  // Get subscription price details
-  const currentPrice =
-    subscription &&
-    currentPlanWithTranslations?.prices.find(
-      (price) => price.priceId === subscription?.priceId
-    );
-
   // Get current period start date
   const currentPeriodStart = subscription?.currentPeriodStart
     ? formatDate(subscription.currentPeriodStart)
     : null;
 
-  // Format next billing date if subscription is active
-  const nextBillingDate = subscription?.currentPeriodEnd
+  // Get current period end date
+  const currentPeriodEnd = subscription?.currentPeriodEnd
     ? formatDate(subscription.currentPeriodEnd)
     : null;
 
+  // Get current trial end date
+  const trialEndDate = subscription?.trialEndDate
+    ? formatDate(subscription.trialEndDate)
+    : null;
+
   // Retry payment data fetching
   const handleRetry = useCallback(() => {
     // console.log('handleRetry, refetch payment info');
@@ -229,36 +227,25 @@ export default function BillingCard() {
         )}
 
         {/* Subscription plan message */}
-        {subscription && currentPrice && (
+        {subscription && (
           <div className="text-sm text-muted-foreground space-y-2">
-            {/* <div>
-              {t('price')}{' '}
-              {formatPrice(currentPrice.amount, currentPrice.currency)} /{' '}
-              {currentPrice.interval === PlanIntervals.MONTH
-                ? t('interval.month')
-                : currentPrice.interval === PlanIntervals.YEAR
-                  ? t('interval.year')
-                  : t('interval.oneTime')}
-            </div> */}
-
             {currentPeriodStart && (
               <div className="text-muted-foreground">
                 {t('periodStartDate')} {currentPeriodStart}
               </div>
             )}
 
-            {nextBillingDate && (
+            {currentPeriodEnd && (
               <div className="text-muted-foreground">
-                {t('nextBillingDate')} {nextBillingDate}
+                {t('periodEndDate')} {currentPeriodEnd}
               </div>
             )}
 
-            {subscription.status === 'trialing' &&
-              subscription.currentPeriodEnd && (
-                <div className="text-amber-600">
-                  {t('trialEnds')} {formatDate(subscription.currentPeriodEnd)}
-                </div>
-              )}
+            {subscription.status === 'trialing' && trialEndDate && (
+              <div className="text-amber-600">
+                {t('trialEnds')} {trialEndDate}
+              </div>
+            )}
           </div>
         )}
       </CardContent>