From 446a8420f5f8115dd22a728cea296e4d0438129d Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Wed, 6 May 2026 18:38:02 +0800
Subject: [PATCH] fix(default): correct subscription payment display

---
 .../dialogs/subscription-purchase-dialog.tsx  |  7 +++-
 .../components/subscription-plans-card.tsx    | 36 ++++++++++++++-----
 web/default/src/features/wallet/lib/format.ts | 12 +++----
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/web/default/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx b/web/default/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx
index 81abc7da..60332fd5 100644
--- a/web/default/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx
+++ b/web/default/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx
@@ -65,6 +65,11 @@ export function SubscriptionPurchaseDialog(props: Props) {
   const hasEpay =
     props.enableOnlineTopUp && (props.epayMethods || []).length > 0
   const hasAnyPayment = hasStripe || hasCreem || hasEpay
+  const selectedEpayMethodLabel =
+    (props.epayMethods || []).find((m) => m.type === selectedEpayMethod)
+      ?.name ||
+    selectedEpayMethod ||
+    t('Select payment method')
   const totalAmount = Number(plan.total_amount || 0)
   const price = Number(plan.price_amount || 0).toFixed(2)
   const limitReached =
@@ -272,7 +277,7 @@ export function SubscriptionPurchaseDialog(props: Props) {
                     disabled={limitReached}
                   >
                     <SelectTrigger className='flex-1'>
-                      <SelectValue placeholder={t('Select payment method')} />
+                      <SelectValue>{selectedEpayMethodLabel}</SelectValue>
                     </SelectTrigger>
                     <SelectContent>
                       {(props.epayMethods || []).map((m) => (
diff --git a/web/default/src/features/wallet/components/subscription-plans-card.tsx b/web/default/src/features/wallet/components/subscription-plans-card.tsx
index 76040eea..28f5e58c 100644
--- a/web/default/src/features/wallet/components/subscription-plans-card.tsx
+++ b/web/default/src/features/wallet/components/subscription-plans-card.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { formatQuota } from '@/lib/format'
 import { cn } from '@/lib/utils'
-import { useStatus } from '@/hooks/use-status'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Progress } from '@/components/ui/progress'
@@ -52,12 +51,29 @@ function getEpayMethods(payMethods: PaymentMethod[] = []): PaymentMethod[] {
   )
 }
 
+function getBillingPreferenceLabel(
+  preference: string,
+  t: (key: string) => string
+): string {
+  switch (preference) {
+    case 'subscription_first':
+      return t('Subscription First')
+    case 'wallet_first':
+      return t('Wallet First')
+    case 'subscription_only':
+      return t('Subscription Only')
+    case 'wallet_only':
+      return t('Wallet Only')
+    default:
+      return preference
+  }
+}
+
 export function SubscriptionPlansCard({
   topupInfo,
   onAvailabilityChange,
 }: SubscriptionPlansCardProps) {
   const { t } = useTranslation()
-  const { status } = useStatus()
 
   const [plans, setPlans] = useState<PlanRecord[]>([])
   const [activeSubscriptions, setActiveSubscriptions] = useState<
@@ -74,9 +90,9 @@ export function SubscriptionPlansCard({
   const [purchaseOpen, setPurchaseOpen] = useState(false)
   const [selectedPlan, setSelectedPlan] = useState<PlanRecord | null>(null)
 
-  const enableStripe = !!status?.enable_stripe_topup
+  const enableStripe = !!topupInfo?.enable_stripe_topup
   const enableCreem = !!topupInfo?.enable_creem_topup
-  const enableOnlineTopUp = !!status?.enable_online_topup
+  const enableOnlineTopUp = !!topupInfo?.enable_online_topup
   const epayMethods = useMemo(
     () => getEpayMethods(topupInfo?.pay_methods),
     [topupInfo?.pay_methods]
@@ -264,22 +280,24 @@ export function SubscriptionPlansCard({
                 onValueChange={(v) => v !== null && handlePreferenceChange(v)}
               >
                 <SelectTrigger className='h-8 flex-1 text-xs sm:w-[140px] sm:flex-none'>
-                  <SelectValue />
+                  <SelectValue>
+                    {getBillingPreferenceLabel(displayPref, t)}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value='subscription_first' disabled={disablePref}>
-                    {t('Subscription First')}
+                    {getBillingPreferenceLabel('subscription_first', t)}
                     {disablePref ? ` (${t('No Active')})` : ''}
                   </SelectItem>
                   <SelectItem value='wallet_first'>
-                    {t('Wallet First')}
+                    {getBillingPreferenceLabel('wallet_first', t)}
                   </SelectItem>
                   <SelectItem value='subscription_only' disabled={disablePref}>
-                    {t('Subscription Only')}
+                    {getBillingPreferenceLabel('subscription_only', t)}
                     {disablePref ? ` (${t('No Active')})` : ''}
                   </SelectItem>
                   <SelectItem value='wallet_only'>
-                    {t('Wallet Only')}
+                    {getBillingPreferenceLabel('wallet_only', t)}
                   </SelectItem>
                 </SelectContent>
               </Select>
diff --git a/web/default/src/features/wallet/lib/format.ts b/web/default/src/features/wallet/lib/format.ts
index c89cbbd4..1d0df8bf 100644
--- a/web/default/src/features/wallet/lib/format.ts
+++ b/web/default/src/features/wallet/lib/format.ts
@@ -1,4 +1,3 @@
-import { formatLocalCurrencyAmount } from '@/lib/currency'
 import { DEFAULT_DISCOUNT_RATE } from '../constants'
 
 // ============================================================================
@@ -36,11 +35,12 @@ export function formatQuotaShort(quota: number): string {
 export function formatCurrency(amount: number | string): string {
   const numeric =
     typeof amount === 'number' ? amount : Number.parseFloat(String(amount))
-  return formatLocalCurrencyAmount(Number.isFinite(numeric) ? numeric : null, {
-    digitsLarge: 2,
-    digitsSmall: 2,
-    abbreviate: false,
-  })
+  if (!Number.isFinite(numeric)) return '-'
+
+  return new Intl.NumberFormat(undefined, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: Math.abs(numeric) >= 1 ? 2 : 4,
+  }).format(numeric)
 }
 
 /**