fix: update billing card to reflect period end date and adjust related translations

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",

messages/zh.json

@@ -592,7 +592,7 @@
         },
         "price": "价格：",
         "periodStartDate": "周期开始日期：",
-        "nextBillingDate": "下次账单日期：",
+        "periodEndDate": "周期结束日期：",
         "trialEnds": "试用结束日期：",
         "freePlanMessage": "您当前使用的是功能有限的免费方案",
         "lifetimeMessage": "您拥有所有高级功能的终身使用权限",

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
+  // Get current period end date
-  const nextBillingDate = subscription?.currentPeriodEnd
+  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.status === 'trialing' && trialEndDate && (
-              subscription.currentPeriodEnd && (
+              <div className="text-amber-600">
-                <div className="text-amber-600">
+                {t('trialEnds')} {trialEndDate}
-                  {t('trialEnds')} {formatDate(subscription.currentPeriodEnd)}
+              </div>
-                </div>
+            )}
-              )}
           </div>
         )}
       </CardContent>