feat(web/default): unified UI overhaul — Base UI migration, theme presets, rankings dashboard, and table toolbar refactor (#4633)
* 🎨 feat(web/default): add shadcn-style theme presets, radius prefs, and fix selection badges Integrate the qn-platform–style OKLCH color system into the default frontend while keeping the existing blue-tinted dark tokens for the default theme. Add [data-theme-preset] palettes for seven named presets plus the default zinc-like scale, define [data-theme-radius] overrides so user radius beats preset --radius, and align the Tailwind @custom-variant dark helper with .dark usage. Introduce ThemeCustomizationProvider to own preset and radius state, persist choices in cookies (theme-preset, theme-radius), and sync data-theme-preset / data-theme-radius on <html>. Wrap the tree in main.tsx. Extend ConfigDrawer with theme preset swatches (scoped data-theme-preset) and radius previews wired to context; refactor swatch/card markup so selected CircleCheck badges sit outside clipped rows (remove outer overflow-hidden that hid the centered checkmark). Add i18n keys for preset names, radius, and accessibility labels across en, zh, fr, ja, ru, vi. * 🎨 fix(web): align segmented controls with theme radius tokens - Replace hard-coded inner pill radii (rounded-[5px]) on dashboard chart toolbars with radius-md so the active state follows --radius when users change Radius in Theme Settings. - Use nested radii consistent with TabsList/TabsTrigger: outer rounded-lg (var(--radius)) and inner rounded-md (calc(var(--radius) - 2px)) so the track and active thumb stay concentric at small scales (e.g. 0.3rem) instead of a squared “focus” block inside a rounded shell. - Apply the same pattern to pricing SegmentedControl and the segmented groups in consumption-distribution-chart, model-charts, and user-charts. Verified: bun run typecheck (web/default) * ✨ feat(pricing): enrich model details with uptime sparkline and API documentation Add a compact 30-day uptime sparkline (OpenRouter-style bars + aggregate %) with per-day tooltips, surface it in a status row under quick stats and in the per-group performance table, and extend mock data so uptime series are stable and optionally scoped by group. Introduce an API tab with Shiki-highlighted code samples (cURL, Python, TypeScript, JavaScript), endpoint-type switching, authentication guidance, a supported-parameters table, and mock per-group RPM/TPM/RPD limits. Infer vendor, tokenizer, license, and data-retention hints for a provider & data privacy card on the Overview tab (capabilities/modalities stay with model identity; rate limits stay with the API tab). Update i18n for all new user-facing strings across en, zh, fr, ja, ru, and vi. * 🏆 feat(rankings): add comprehensive rankings dashboard Add a mock-data powered rankings experience with period tabs, model, app, and vendor leaderboards, market share and history charts, movers, new releases, and per-category sections while backend analytics are pending. Link ranked models to pricing details and ranked vendors to filtered pricing results, and include localized copy for all supported frontend locales. * fix(theme): correct theme preset selection state - update Base UI Radio selectors to use data-checked/data-unchecked states. - fix unchecked theme options still showing selected indicators. - isolate the default theme preview tokens to prevent preset changes from leaking into it. * fix(setup): correct usage mode radio state - use Base UI data-checked/data-unchecked states for RadioGroup styling. - hide radio indicators when options are unchecked to avoid setup page display issues. - drive usage mode card and icon selection styles from Base UI state. * fix(auth): submit sign-in and sign-up forms * 🎨 refactor: Align default theme with shadcn Base Nova and prune legacy customization Migrate shadcn UI to Base UI primitives via CLI (`base-nova` / `components.json`) and reinstall full component registry with `--overwrite`, including Hugeicons-backed widgets and newly added registry components. - Remove custom multi-preset/theme-radius system (`ThemeCustomizationProvider`, cookies, preset UI from config drawer); rely on official semantic CSS tokens + light/dark only. - Replace `theme.css` with shadcn’s documented neutral `:root`/`.dark` palette and `@theme inline` mappings (plus skeleton token vars for existing shimmer usage). - Update global styles for Base UI: collapsible animation uses `--collapsible-panel-height`; clarify scroll-lock override comment. Application compatibility: - Keep minimal shims where app code diverged from official APIs (popover collision props, combobox legacy `options` callers, Spinner prop typing). - Switch interactive styling from Radix-era `data-state` / `--radix-*` selectors to Base UI semantics (`data-open`, `data-popup-open`, `data-panel-open`, `--anchor-width`, etc.) Tooling / docs / build: - Rename Rsbuild vendor chunk grouping to `@base-ui` + transitive `@radix-ui`. - Refresh AGENTS.md / CLAUDE.md / classic→default sync skill for Base UI stack. - Bump `package.json` / lockfile for shadcn-postinstall deps (Hugeicons, chart stack, themes, etc.) Verified: `bun run typecheck` passes. Note: `bun run lint` still reports pre-existing hooks rule violations elsewhere; not addressed in this change. * 🎨 chore(web/default): unify table toolbar, relocate usage stats, refine filters - Refactor DataTableToolbar to a single wrapping flex row with a right-aligned action cluster (Reset / Search / View / Expand) for a cleaner Ant Design Pro–style filter bar; remove the dedicated stats row and the toolbar `stats` prop. - Move Common Logs summary badges (Usage / RPM / TPM) and the sensitive- data visibility toggle into the page header via CommonLogsHeaderActions and SectionPageLayout.Actions so the toolbar stays focused on filters. - Slim CommonLogsFilterBar props (no stats / preActions eye control). - Improve CompactDateTimeRangePicker: show minute-precision labels on the trigger (seconds omitted; aligns with datetime-local inputs); widen the trigger on sm+ breakpoints so the full range is visible without truncation; apply the same width in task logs filters. - Simplify DataTableViewOptions: text-only “View” trigger, no sliders icon. - Earlier layout tweak: extra top padding on SectionPageLayout scroll content so control focus rings are not clipped by overflow. * feat(web/default): Base UI migration and component foundation Migrate from Radix UI to Base UI, rewrite core UI primitives, update dependencies (recharts, date-fns, next-themes), add shadcn agent skill documentation, and refresh AI element components. This is the foundational work from the v2/localmain lineage that was not covered by the individual feature commits above. --------- Co-authored-by: t0ng7u <dev@aiass.cc> Co-authored-by: QuentinHsu <xuquentinyang@gmail.com>
This commit is contained in:
Calcium-Ion
@@ -84,7 +84,7 @@ export function AffiliateRewardsCard({
|
||||
<CopyButton
|
||||
value={affiliateLink}
|
||||
variant='outline'
|
||||
className='size-9 shrink-0 bg-background'
|
||||
className='bg-background size-9 shrink-0'
|
||||
iconClassName='size-4'
|
||||
tooltip={t('Copy referral link')}
|
||||
aria-label={t('Copy referral link')}
|
||||
|
||||
+3
-1
@@ -105,7 +105,9 @@ export function BillingHistoryDialog({
|
||||
</div>
|
||||
<Select
|
||||
value={pageSize.toString()}
|
||||
onValueChange={(value) => handlePageSizeChange(parseInt(value))}
|
||||
onValueChange={(value) =>
|
||||
value !== null && handlePageSizeChange(parseInt(value))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className='h-9 w-[92px] sm:w-32'>
|
||||
<SelectValue />
|
||||
|
||||
+262
-268
@@ -5,11 +5,7 @@ import { formatNumber } from '@/lib/format'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
} from '@/components/ui/card'
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
@@ -178,155 +174,218 @@ export function RechargeFormCard({
|
||||
icon={<WalletCards className='h-4 w-4' />}
|
||||
action={
|
||||
onOpenBilling ? (
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
onClick={onOpenBilling}
|
||||
className='w-full gap-2 sm:w-auto'
|
||||
>
|
||||
<Receipt className='h-4 w-4' />
|
||||
{t('Order History')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
onClick={onOpenBilling}
|
||||
className='w-full gap-2 sm:w-auto'
|
||||
>
|
||||
<Receipt className='h-4 w-4' />
|
||||
{t('Order History')}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
contentClassName='space-y-4 sm:space-y-6'
|
||||
>
|
||||
{/* Online Topup Section */}
|
||||
{hasAnyTopup ? (
|
||||
<div className='space-y-4 sm:space-y-6'>
|
||||
{hasConfigurableTopup && (
|
||||
<>
|
||||
{presetAmounts.length > 0 && (
|
||||
<div className='space-y-2.5 sm:space-y-3'>
|
||||
<Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Amount')}
|
||||
</Label>
|
||||
<div className='grid grid-cols-2 gap-1.5 sm:gap-3 md:grid-cols-4'>
|
||||
{presetAmounts.map((preset, index) => {
|
||||
const discount =
|
||||
preset.discount ||
|
||||
topupInfo?.discount?.[preset.value] ||
|
||||
1.0
|
||||
const {
|
||||
displayValue,
|
||||
actualPrice,
|
||||
savedAmount,
|
||||
hasDiscount,
|
||||
} = calculatePresetPricing(
|
||||
preset.value,
|
||||
priceRatio,
|
||||
discount,
|
||||
usdExchangeRate
|
||||
)
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
variant='outline'
|
||||
className={cn(
|
||||
'hover:border-foreground flex min-h-16 flex-col items-start rounded-lg px-3 py-2.5 text-left whitespace-normal sm:min-h-[72px] sm:p-4',
|
||||
selectedPreset === preset.value
|
||||
? 'border-foreground bg-foreground/5'
|
||||
: 'border-muted'
|
||||
)}
|
||||
onClick={() => onSelectPreset(preset)}
|
||||
>
|
||||
<div className='flex w-full items-center justify-between'>
|
||||
<div className='text-base font-semibold sm:text-lg'>
|
||||
{formatNumber(displayValue)}
|
||||
</div>
|
||||
{hasDiscount && (
|
||||
<div className='text-xs font-medium text-green-600'>
|
||||
{getDiscountLabel(discount)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='text-muted-foreground mt-1.5 w-full text-xs sm:mt-2'>
|
||||
Pay {formatCurrency(actualPrice)}
|
||||
{hasDiscount && savedAmount > 0 && (
|
||||
<span className='text-green-600'>
|
||||
{' '}
|
||||
• Save {formatCurrency(savedAmount)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='space-y-2.5 sm:space-y-3'>
|
||||
<Label
|
||||
htmlFor='topup-amount'
|
||||
className='text-muted-foreground text-xs font-medium tracking-wider uppercase'
|
||||
>
|
||||
{t('Custom Amount')}
|
||||
</Label>
|
||||
<div className='grid grid-cols-[minmax(0,1fr)_minmax(110px,0.55fr)] gap-2 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center'>
|
||||
<Input
|
||||
id='topup-amount'
|
||||
type='number'
|
||||
value={localAmount}
|
||||
onChange={(e) => handleAmountChange(e.target.value)}
|
||||
min={minTopup}
|
||||
placeholder={`Minimum ${minTopup}`}
|
||||
className='h-9 text-base sm:h-10 sm:text-lg'
|
||||
/>
|
||||
<div className='bg-muted/30 flex min-h-9 items-center justify-between gap-2 rounded-md border px-3 lg:min-w-52'>
|
||||
<span className='text-muted-foreground truncate text-xs'>
|
||||
{t('Amount to pay:')}
|
||||
</span>
|
||||
{calculating ? (
|
||||
<Skeleton className='h-5 w-16' />
|
||||
) : (
|
||||
<span className='text-sm font-semibold'>
|
||||
{formatCurrency(paymentAmount)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Online Topup Section */}
|
||||
{hasAnyTopup ? (
|
||||
<div className='space-y-4 sm:space-y-6'>
|
||||
{hasConfigurableTopup && (
|
||||
<>
|
||||
{presetAmounts.length > 0 && (
|
||||
<div className='space-y-2.5 sm:space-y-3'>
|
||||
<Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Payment Method')}
|
||||
{t('Amount')}
|
||||
</Label>
|
||||
{hasStandardPaymentMethods ? (
|
||||
<div className='grid grid-cols-2 gap-1.5 sm:gap-3 md:grid-cols-4'>
|
||||
{presetAmounts.map((preset, index) => {
|
||||
const discount =
|
||||
preset.discount ||
|
||||
topupInfo?.discount?.[preset.value] ||
|
||||
1.0
|
||||
const {
|
||||
displayValue,
|
||||
actualPrice,
|
||||
savedAmount,
|
||||
hasDiscount,
|
||||
} = calculatePresetPricing(
|
||||
preset.value,
|
||||
priceRatio,
|
||||
discount,
|
||||
usdExchangeRate
|
||||
)
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
variant='outline'
|
||||
className={cn(
|
||||
'hover:border-foreground flex min-h-16 flex-col items-start rounded-lg px-3 py-2.5 text-left whitespace-normal sm:min-h-[72px] sm:p-4',
|
||||
selectedPreset === preset.value
|
||||
? 'border-foreground bg-foreground/5'
|
||||
: 'border-muted'
|
||||
)}
|
||||
onClick={() => onSelectPreset(preset)}
|
||||
>
|
||||
<div className='flex w-full items-center justify-between'>
|
||||
<div className='text-base font-semibold sm:text-lg'>
|
||||
{formatNumber(displayValue)}
|
||||
</div>
|
||||
{hasDiscount && (
|
||||
<div className='text-xs font-medium text-green-600'>
|
||||
{getDiscountLabel(discount)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='text-muted-foreground mt-1.5 w-full text-xs sm:mt-2'>
|
||||
Pay {formatCurrency(actualPrice)}
|
||||
{hasDiscount && savedAmount > 0 && (
|
||||
<span className='text-green-600'>
|
||||
{' '}
|
||||
• Save {formatCurrency(savedAmount)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='space-y-2.5 sm:space-y-3'>
|
||||
<Label
|
||||
htmlFor='topup-amount'
|
||||
className='text-muted-foreground text-xs font-medium tracking-wider uppercase'
|
||||
>
|
||||
{t('Custom Amount')}
|
||||
</Label>
|
||||
<div className='grid grid-cols-[minmax(0,1fr)_minmax(110px,0.55fr)] gap-2 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center'>
|
||||
<Input
|
||||
id='topup-amount'
|
||||
type='number'
|
||||
value={localAmount}
|
||||
onChange={(e) => handleAmountChange(e.target.value)}
|
||||
min={minTopup}
|
||||
placeholder={`Minimum ${minTopup}`}
|
||||
className='h-9 text-base sm:h-10 sm:text-lg'
|
||||
/>
|
||||
<div className='bg-muted/30 flex min-h-9 items-center justify-between gap-2 rounded-md border px-3 lg:min-w-52'>
|
||||
<span className='text-muted-foreground truncate text-xs'>
|
||||
{t('Amount to pay:')}
|
||||
</span>
|
||||
{calculating ? (
|
||||
<Skeleton className='h-5 w-16' />
|
||||
) : (
|
||||
<span className='text-sm font-semibold'>
|
||||
{formatCurrency(paymentAmount)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2.5 sm:space-y-3'>
|
||||
<Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Payment Method')}
|
||||
</Label>
|
||||
{hasStandardPaymentMethods ? (
|
||||
<div className='grid grid-cols-2 gap-1.5 sm:gap-3 lg:grid-cols-3'>
|
||||
{topupInfo?.pay_methods?.map((method) => {
|
||||
const minTopup = method.min_topup || 0
|
||||
const disabled = minTopup > topupAmount
|
||||
|
||||
const button = (
|
||||
<Button
|
||||
key={method.type}
|
||||
variant='outline'
|
||||
onClick={() => onPaymentMethodSelect(method)}
|
||||
disabled={disabled || !!paymentLoading}
|
||||
className='h-9 min-w-0 justify-start gap-2 rounded-lg px-3'
|
||||
>
|
||||
{paymentLoading === method.type ? (
|
||||
<Loader2 className='h-4 w-4 animate-spin' />
|
||||
) : (
|
||||
getPaymentIcon(
|
||||
method.type,
|
||||
'h-4 w-4',
|
||||
method.icon,
|
||||
method.name
|
||||
)
|
||||
)}
|
||||
<span className='truncate'>{method.name}</span>
|
||||
</Button>
|
||||
)
|
||||
|
||||
return disabled ? (
|
||||
<TooltipProvider key={method.type}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger render={button}></TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{t('Minimum topup amount: {{amount}}', {
|
||||
amount: minTopup,
|
||||
})}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
button
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : hasWaffoPaymentMethods ? null : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
{t(
|
||||
'No payment methods available. Please contact administrator.'
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{enableWaffoTopup &&
|
||||
hasWaffoPaymentMethods &&
|
||||
onWaffoMethodSelect && (
|
||||
<div className='space-y-2.5 sm:space-y-3'>
|
||||
<Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Waffo Payment')}
|
||||
</Label>
|
||||
<div className='grid grid-cols-2 gap-1.5 sm:gap-3 lg:grid-cols-3'>
|
||||
{topupInfo?.pay_methods?.map((method) => {
|
||||
const minTopup = method.min_topup || 0
|
||||
const disabled = minTopup > topupAmount
|
||||
{waffoPayMethods?.map((method, index) => {
|
||||
const loadingKey = `waffo-${index}`
|
||||
const waffoMin = waffoMinTopup || 0
|
||||
const belowMin = waffoMin > topupAmount
|
||||
|
||||
const button = (
|
||||
<Button
|
||||
key={method.type}
|
||||
key={`${method.name}-${index}`}
|
||||
variant='outline'
|
||||
onClick={() => onPaymentMethodSelect(method)}
|
||||
disabled={disabled || !!paymentLoading}
|
||||
onClick={() => onWaffoMethodSelect(method, index)}
|
||||
disabled={belowMin || !!paymentLoading}
|
||||
className='h-9 min-w-0 justify-start gap-2 rounded-lg px-3'
|
||||
>
|
||||
{paymentLoading === method.type ? (
|
||||
{paymentLoading === loadingKey ? (
|
||||
<Loader2 className='h-4 w-4 animate-spin' />
|
||||
) : method.icon ? (
|
||||
<img
|
||||
src={method.icon}
|
||||
alt={method.name}
|
||||
className='h-4 w-4 object-contain'
|
||||
/>
|
||||
) : (
|
||||
getPaymentIcon(
|
||||
method.type,
|
||||
'h-4 w-4',
|
||||
method.icon,
|
||||
method.name
|
||||
)
|
||||
getPaymentIcon('waffo')
|
||||
)}
|
||||
<span className='truncate'>{method.name}</span>
|
||||
</Button>
|
||||
)
|
||||
|
||||
return disabled ? (
|
||||
<TooltipProvider key={method.type}>
|
||||
return belowMin ? (
|
||||
<TooltipProvider key={`${method.name}-${index}`}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipTrigger render={button}></TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{t('Minimum topup amount: {{amount}}', {
|
||||
amount: minTopup,
|
||||
amount: waffoMin,
|
||||
})}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
@@ -336,146 +395,81 @@ export function RechargeFormCard({
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : hasWaffoPaymentMethods ? null : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
{t(
|
||||
'No payment methods available. Please contact administrator.'
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{enableWaffoTopup &&
|
||||
hasWaffoPaymentMethods &&
|
||||
onWaffoMethodSelect && (
|
||||
<div className='space-y-2.5 sm:space-y-3'>
|
||||
<Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Waffo Payment')}
|
||||
</Label>
|
||||
<div className='grid grid-cols-2 gap-1.5 sm:gap-3 lg:grid-cols-3'>
|
||||
{waffoPayMethods?.map((method, index) => {
|
||||
const loadingKey = `waffo-${index}`
|
||||
const waffoMin = waffoMinTopup || 0
|
||||
const belowMin = waffoMin > topupAmount
|
||||
|
||||
const button = (
|
||||
<Button
|
||||
key={`${method.name}-${index}`}
|
||||
variant='outline'
|
||||
onClick={() => onWaffoMethodSelect(method, index)}
|
||||
disabled={belowMin || !!paymentLoading}
|
||||
className='h-9 min-w-0 justify-start gap-2 rounded-lg px-3'
|
||||
>
|
||||
{paymentLoading === loadingKey ? (
|
||||
<Loader2 className='h-4 w-4 animate-spin' />
|
||||
) : method.icon ? (
|
||||
<img
|
||||
src={method.icon}
|
||||
alt={method.name}
|
||||
className='h-4 w-4 object-contain'
|
||||
/>
|
||||
) : (
|
||||
getPaymentIcon('waffo')
|
||||
)}
|
||||
<span className='truncate'>{method.name}</span>
|
||||
</Button>
|
||||
)
|
||||
|
||||
return belowMin ? (
|
||||
<TooltipProvider key={`${method.name}-${index}`}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
{button}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{t('Minimum topup amount: {{amount}}', {
|
||||
amount: waffoMin,
|
||||
})}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
button
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
{t(
|
||||
'Online topup is not enabled. Please use redemption code or contact administrator.'
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Creem Products Section */}
|
||||
{enableCreemTopup &&
|
||||
Array.isArray(creemProducts) &&
|
||||
creemProducts.length > 0 &&
|
||||
onCreemProductSelect && (
|
||||
<div className='space-y-2.5 border-t pt-4 sm:space-y-3 sm:pt-6'>
|
||||
<Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Creem Payment')}
|
||||
</Label>
|
||||
<CreemProductsSection
|
||||
products={creemProducts}
|
||||
onProductSelect={onCreemProductSelect}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Redemption Code Section */}
|
||||
<div className='space-y-2.5 border-t pt-4 sm:space-y-3 sm:pt-6'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Gift className='text-muted-foreground h-4 w-4' />
|
||||
<Label
|
||||
htmlFor='redemption-code'
|
||||
className='text-muted-foreground text-xs font-medium tracking-wider uppercase'
|
||||
>
|
||||
{t('Have a Code?')}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='grid grid-cols-[minmax(0,1fr)_auto] gap-2'>
|
||||
<Input
|
||||
id='redemption-code'
|
||||
value={redemptionCode}
|
||||
onChange={(e) => onRedemptionCodeChange(e.target.value)}
|
||||
placeholder={t('Enter your redemption code')}
|
||||
className='h-9 min-w-0'
|
||||
/>
|
||||
<Button
|
||||
onClick={onRedeem}
|
||||
disabled={redeeming}
|
||||
variant='outline'
|
||||
className='h-9 px-4'
|
||||
>
|
||||
{redeeming && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
|
||||
{t('Redeem')}
|
||||
</Button>
|
||||
</div>
|
||||
{topupLink && (
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t('Need a code?')}{' '}
|
||||
<a
|
||||
href={topupLink}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='inline-flex items-center gap-1 underline-offset-4 hover:underline'
|
||||
>
|
||||
{t('Purchase here')}
|
||||
<ExternalLink className='h-3 w-3' />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
{t(
|
||||
'Online topup is not enabled. Please use redemption code or contact administrator.'
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Creem Products Section */}
|
||||
{enableCreemTopup &&
|
||||
Array.isArray(creemProducts) &&
|
||||
creemProducts.length > 0 &&
|
||||
onCreemProductSelect && (
|
||||
<div className='space-y-2.5 border-t pt-4 sm:space-y-3 sm:pt-6'>
|
||||
<Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
|
||||
{t('Creem Payment')}
|
||||
</Label>
|
||||
<CreemProductsSection
|
||||
products={creemProducts}
|
||||
onProductSelect={onCreemProductSelect}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Redemption Code Section */}
|
||||
<div className='space-y-2.5 border-t pt-4 sm:space-y-3 sm:pt-6'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Gift className='text-muted-foreground h-4 w-4' />
|
||||
<Label
|
||||
htmlFor='redemption-code'
|
||||
className='text-muted-foreground text-xs font-medium tracking-wider uppercase'
|
||||
>
|
||||
{t('Have a Code?')}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='grid grid-cols-[minmax(0,1fr)_auto] gap-2'>
|
||||
<Input
|
||||
id='redemption-code'
|
||||
value={redemptionCode}
|
||||
onChange={(e) => onRedemptionCodeChange(e.target.value)}
|
||||
placeholder={t('Enter your redemption code')}
|
||||
className='h-9 min-w-0'
|
||||
/>
|
||||
<Button
|
||||
onClick={onRedeem}
|
||||
disabled={redeeming}
|
||||
variant='outline'
|
||||
className='h-9 px-4'
|
||||
>
|
||||
{redeeming && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
|
||||
{t('Redeem')}
|
||||
</Button>
|
||||
</div>
|
||||
{topupLink && (
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t('Need a code?')}{' '}
|
||||
<a
|
||||
href={topupLink}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='inline-flex items-center gap-1 underline-offset-4 hover:underline'
|
||||
>
|
||||
{t('Purchase here')}
|
||||
<ExternalLink className='h-3 w-3' />
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</TitledCard>
|
||||
)
|
||||
}
|
||||
|
||||
+315
-337
@@ -6,11 +6,7 @@ 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 { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import {
|
||||
Select,
|
||||
@@ -227,344 +223,326 @@ export function SubscriptionPlansCard({
|
||||
icon={<Crown className='h-4 w-4' />}
|
||||
contentClassName='space-y-4 sm:space-y-5'
|
||||
>
|
||||
{/* My subscriptions & billing preference */}
|
||||
<div className='rounded-xl border p-3 sm:p-4'>
|
||||
<div className='flex flex-wrap items-center justify-between gap-2.5 sm:gap-3'>
|
||||
<div className='flex min-w-0 flex-wrap items-center gap-2'>
|
||||
<span className='text-sm font-medium'>
|
||||
{t('My Subscriptions')}
|
||||
</span>
|
||||
<span className='flex items-center gap-1.5 text-xs font-medium'>
|
||||
<span
|
||||
className={cn(
|
||||
'size-1.5 shrink-0 rounded-full',
|
||||
hasActive ? dotColorMap.success : dotColorMap.neutral
|
||||
)}
|
||||
aria-hidden='true'
|
||||
/>
|
||||
{hasActive ? (
|
||||
<span className={cn(textColorMap.success)}>
|
||||
{activeSubscriptions.length} {t('active')}
|
||||
</span>
|
||||
) : (
|
||||
<span className='text-muted-foreground'>
|
||||
{t('No Active')}
|
||||
</span>
|
||||
{/* My subscriptions & billing preference */}
|
||||
<div className='rounded-xl border p-3 sm:p-4'>
|
||||
<div className='flex flex-wrap items-center justify-between gap-2.5 sm:gap-3'>
|
||||
<div className='flex min-w-0 flex-wrap items-center gap-2'>
|
||||
<span className='text-sm font-medium'>
|
||||
{t('My Subscriptions')}
|
||||
</span>
|
||||
<span className='flex items-center gap-1.5 text-xs font-medium'>
|
||||
<span
|
||||
className={cn(
|
||||
'size-1.5 shrink-0 rounded-full',
|
||||
hasActive ? dotColorMap.success : dotColorMap.neutral
|
||||
)}
|
||||
{allSubscriptions.length > activeSubscriptions.length && (
|
||||
<>
|
||||
<span className='text-muted-foreground/30'>·</span>
|
||||
<span className='text-muted-foreground'>
|
||||
{allSubscriptions.length - activeSubscriptions.length}{' '}
|
||||
{t('expired')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex w-full items-center gap-2 sm:w-auto'>
|
||||
<Select
|
||||
value={displayPref}
|
||||
onValueChange={handlePreferenceChange}
|
||||
>
|
||||
<SelectTrigger className='h-8 flex-1 text-xs sm:w-[140px] sm:flex-none'>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
value='subscription_first'
|
||||
disabled={disablePref}
|
||||
>
|
||||
{t('Subscription First')}
|
||||
{disablePref ? ` (${t('No Active')})` : ''}
|
||||
</SelectItem>
|
||||
<SelectItem value='wallet_first'>
|
||||
{t('Wallet First')}
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value='subscription_only'
|
||||
disabled={disablePref}
|
||||
>
|
||||
{t('Subscription Only')}
|
||||
{disablePref ? ` (${t('No Active')})` : ''}
|
||||
</SelectItem>
|
||||
<SelectItem value='wallet_only'>
|
||||
{t('Wallet Only')}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='icon'
|
||||
className='h-8 w-8'
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`h-3.5 w-3.5 ${refreshing ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{disablePref && isSubPref && (
|
||||
<p className='text-muted-foreground mt-2 text-xs'>
|
||||
{t(
|
||||
'Preference saved as {{pref}}, but no active subscription. Wallet will be used automatically.',
|
||||
{
|
||||
pref:
|
||||
billingPreference === 'subscription_only'
|
||||
? t('Subscription Only')
|
||||
: t('Subscription First'),
|
||||
}
|
||||
aria-hidden='true'
|
||||
/>
|
||||
{hasActive ? (
|
||||
<span className={cn(textColorMap.success)}>
|
||||
{activeSubscriptions.length} {t('active')}
|
||||
</span>
|
||||
) : (
|
||||
<span className='text-muted-foreground'>
|
||||
{t('No Active')}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{hasAny && (
|
||||
<>
|
||||
<Separator className='my-3' />
|
||||
<div className='max-h-64 space-y-3 overflow-y-auto pr-1'>
|
||||
{allSubscriptions.map((sub) => {
|
||||
const subscription = sub.subscription
|
||||
const totalAmount = Number(subscription?.amount_total || 0)
|
||||
const usedAmount = Number(subscription?.amount_used || 0)
|
||||
const remainAmount =
|
||||
totalAmount > 0
|
||||
? Math.max(0, totalAmount - usedAmount)
|
||||
: 0
|
||||
const planTitle =
|
||||
planTitleMap.get(subscription?.plan_id) || ''
|
||||
const remainDays = getRemainingDays(sub)
|
||||
const usagePercent = getUsagePercent(sub)
|
||||
const now = Date.now() / 1000
|
||||
const isExpired = (subscription?.end_time || 0) < now
|
||||
const isCancelled = subscription?.status === 'cancelled'
|
||||
const isActive =
|
||||
subscription?.status === 'active' && !isExpired
|
||||
|
||||
return (
|
||||
<div
|
||||
key={subscription?.id}
|
||||
className='bg-background rounded-md border p-3 text-xs'
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='font-medium'>
|
||||
{planTitle
|
||||
? `${planTitle} · ${t('Subscription')} #${subscription?.id}`
|
||||
: `${t('Subscription')} #${subscription?.id}`}
|
||||
</span>
|
||||
{isActive ? (
|
||||
<StatusBadge
|
||||
label={t('Active')}
|
||||
variant='success'
|
||||
copyable={false}
|
||||
/>
|
||||
) : isCancelled ? (
|
||||
<StatusBadge
|
||||
label={t('Cancelled')}
|
||||
variant='neutral'
|
||||
copyable={false}
|
||||
/>
|
||||
) : (
|
||||
<StatusBadge
|
||||
label={t('Expired')}
|
||||
variant='neutral'
|
||||
copyable={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{isActive && (
|
||||
<span className='text-muted-foreground'>
|
||||
{t('{{count}} days remaining', {
|
||||
count: remainDays,
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className='text-muted-foreground mt-1.5'>
|
||||
{isActive
|
||||
? t('Until')
|
||||
: isCancelled
|
||||
? t('Cancelled at')
|
||||
: t('Expired at')}{' '}
|
||||
{new Date(
|
||||
(subscription?.end_time || 0) * 1000
|
||||
).toLocaleString()}
|
||||
</div>
|
||||
{isActive &&
|
||||
(subscription?.next_reset_time ?? 0) > 0 && (
|
||||
<div className='text-muted-foreground mt-1'>
|
||||
{t('Next reset')}:{' '}
|
||||
{new Date(
|
||||
subscription!.next_reset_time! * 1000
|
||||
).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
<div className='text-muted-foreground mt-1'>
|
||||
{t('Total Quota')}:{' '}
|
||||
{totalAmount > 0 ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className='cursor-help'>
|
||||
{formatQuota(usedAmount)}/
|
||||
{formatQuota(totalAmount)} · {t('Remaining')}{' '}
|
||||
{formatQuota(remainAmount)}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{t('Raw Quota')}: {usedAmount}/{totalAmount} ·{' '}
|
||||
{t('Remaining')} {remainAmount}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
t('Unlimited')
|
||||
)}
|
||||
{totalAmount > 0 && (
|
||||
<span className='ml-2'>
|
||||
{t('Used')} {usagePercent}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{totalAmount > 0 && isActive && (
|
||||
<Progress
|
||||
value={usagePercent}
|
||||
className='mt-2 h-1.5'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!hasAny && (
|
||||
<p className='text-muted-foreground mt-2 text-xs'>
|
||||
{t('Purchase a plan to enjoy model benefits')}
|
||||
</p>
|
||||
)}
|
||||
{allSubscriptions.length > activeSubscriptions.length && (
|
||||
<>
|
||||
<span className='text-muted-foreground/30'>·</span>
|
||||
<span className='text-muted-foreground'>
|
||||
{allSubscriptions.length - activeSubscriptions.length}{' '}
|
||||
{t('expired')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex w-full items-center gap-2 sm:w-auto'>
|
||||
<Select
|
||||
value={displayPref}
|
||||
onValueChange={(v) => v !== null && handlePreferenceChange(v)}
|
||||
>
|
||||
<SelectTrigger className='h-8 flex-1 text-xs sm:w-[140px] sm:flex-none'>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value='subscription_first' disabled={disablePref}>
|
||||
{t('Subscription First')}
|
||||
{disablePref ? ` (${t('No Active')})` : ''}
|
||||
</SelectItem>
|
||||
<SelectItem value='wallet_first'>
|
||||
{t('Wallet First')}
|
||||
</SelectItem>
|
||||
<SelectItem value='subscription_only' disabled={disablePref}>
|
||||
{t('Subscription Only')}
|
||||
{disablePref ? ` (${t('No Active')})` : ''}
|
||||
</SelectItem>
|
||||
<SelectItem value='wallet_only'>
|
||||
{t('Wallet Only')}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='icon'
|
||||
className='h-8 w-8'
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`h-3.5 w-3.5 ${refreshing ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Available plans grid */}
|
||||
{plans.length > 0 ? (
|
||||
<div className='grid grid-cols-1 gap-3 2xl:grid-cols-2 2xl:gap-4'>
|
||||
{plans.map((p, index) => {
|
||||
const plan = p?.plan
|
||||
if (!plan) return null
|
||||
const totalAmount = Number(plan.total_amount || 0)
|
||||
const price = Number(plan.price_amount || 0).toFixed(2)
|
||||
const isPopular = index === 0 && plans.length > 1
|
||||
const limit = Number(plan.max_purchase_per_user || 0)
|
||||
const count = planPurchaseCountMap.get(plan.id) || 0
|
||||
const reached = limit > 0 && count >= limit
|
||||
|
||||
const benefits = [
|
||||
`${t('Validity Period')}: ${formatDuration(plan, t)}`,
|
||||
formatResetPeriod(plan, t) !== t('No Reset')
|
||||
? `${t('Quota Reset')}: ${formatResetPeriod(plan, t)}`
|
||||
: null,
|
||||
totalAmount > 0
|
||||
? `${t('Total Quota')}: ${formatQuota(totalAmount)}`
|
||||
: `${t('Total Quota')}: ${t('Unlimited')}`,
|
||||
limit > 0 ? `${t('Purchase Limit')}: ${limit}` : null,
|
||||
plan.upgrade_group
|
||||
? `${t('Upgrade Group')}: ${plan.upgrade_group}`
|
||||
: null,
|
||||
].filter(Boolean) as string[]
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={plan.id}
|
||||
className={cn(
|
||||
'transition-shadow hover:shadow-md',
|
||||
isPopular && 'border-primary/70 shadow-sm'
|
||||
)}
|
||||
>
|
||||
<CardContent className='flex h-full flex-col p-3.5 sm:p-4'>
|
||||
<div className='mb-2 flex items-start justify-between gap-3'>
|
||||
<div className='min-w-0'>
|
||||
<h4 className='truncate font-semibold'>
|
||||
{plan.title || t('Subscription Plans')}
|
||||
</h4>
|
||||
{plan.subtitle && (
|
||||
<p className='text-muted-foreground truncate text-xs'>
|
||||
{plan.subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isPopular && (
|
||||
<StatusBadge
|
||||
variant='info'
|
||||
copyable={false}
|
||||
className='shrink-0'
|
||||
>
|
||||
<Sparkles className='h-3 w-3' />
|
||||
{t('Recommended')}
|
||||
</StatusBadge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='py-2'>
|
||||
<span className='text-primary text-2xl font-bold'>
|
||||
${price}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 space-y-1.5 pb-3'>
|
||||
{benefits.map((label) => (
|
||||
<div
|
||||
key={label}
|
||||
className='text-muted-foreground flex items-center gap-2 text-xs'
|
||||
>
|
||||
<Check className='text-primary h-3 w-3 shrink-0' />
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Separator className='mb-3' />
|
||||
|
||||
{reached ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div>
|
||||
<Button
|
||||
variant='outline'
|
||||
className='w-full'
|
||||
disabled
|
||||
>
|
||||
{t('Limit Reached')}
|
||||
</Button>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{t('Purchase limit reached')} ({count}/{limit})
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Button
|
||||
variant='outline'
|
||||
className='w-full'
|
||||
onClick={() => {
|
||||
setSelectedPlan(p)
|
||||
setPurchaseOpen(true)
|
||||
}}
|
||||
>
|
||||
{t('Subscribe Now')}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className='text-muted-foreground py-4 text-center text-sm'>
|
||||
{t('No plans available')}
|
||||
{disablePref && isSubPref && (
|
||||
<p className='text-muted-foreground mt-2 text-xs'>
|
||||
{t(
|
||||
'Preference saved as {{pref}}, but no active subscription. Wallet will be used automatically.',
|
||||
{
|
||||
pref:
|
||||
billingPreference === 'subscription_only'
|
||||
? t('Subscription Only')
|
||||
: t('Subscription First'),
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{hasAny && (
|
||||
<>
|
||||
<Separator className='my-3' />
|
||||
<div className='max-h-64 space-y-3 overflow-y-auto pr-1'>
|
||||
{allSubscriptions.map((sub) => {
|
||||
const subscription = sub.subscription
|
||||
const totalAmount = Number(subscription?.amount_total || 0)
|
||||
const usedAmount = Number(subscription?.amount_used || 0)
|
||||
const remainAmount =
|
||||
totalAmount > 0 ? Math.max(0, totalAmount - usedAmount) : 0
|
||||
const planTitle =
|
||||
planTitleMap.get(subscription?.plan_id) || ''
|
||||
const remainDays = getRemainingDays(sub)
|
||||
const usagePercent = getUsagePercent(sub)
|
||||
const now = Date.now() / 1000
|
||||
const isExpired = (subscription?.end_time || 0) < now
|
||||
const isCancelled = subscription?.status === 'cancelled'
|
||||
const isActive =
|
||||
subscription?.status === 'active' && !isExpired
|
||||
|
||||
return (
|
||||
<div
|
||||
key={subscription?.id}
|
||||
className='bg-background rounded-md border p-3 text-xs'
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='font-medium'>
|
||||
{planTitle
|
||||
? `${planTitle} · ${t('Subscription')} #${subscription?.id}`
|
||||
: `${t('Subscription')} #${subscription?.id}`}
|
||||
</span>
|
||||
{isActive ? (
|
||||
<StatusBadge
|
||||
label={t('Active')}
|
||||
variant='success'
|
||||
copyable={false}
|
||||
/>
|
||||
) : isCancelled ? (
|
||||
<StatusBadge
|
||||
label={t('Cancelled')}
|
||||
variant='neutral'
|
||||
copyable={false}
|
||||
/>
|
||||
) : (
|
||||
<StatusBadge
|
||||
label={t('Expired')}
|
||||
variant='neutral'
|
||||
copyable={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{isActive && (
|
||||
<span className='text-muted-foreground'>
|
||||
{t('{{count}} days remaining', {
|
||||
count: remainDays,
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className='text-muted-foreground mt-1.5'>
|
||||
{isActive
|
||||
? t('Until')
|
||||
: isCancelled
|
||||
? t('Cancelled at')
|
||||
: t('Expired at')}{' '}
|
||||
{new Date(
|
||||
(subscription?.end_time || 0) * 1000
|
||||
).toLocaleString()}
|
||||
</div>
|
||||
{isActive && (subscription?.next_reset_time ?? 0) > 0 && (
|
||||
<div className='text-muted-foreground mt-1'>
|
||||
{t('Next reset')}:{' '}
|
||||
{new Date(
|
||||
subscription!.next_reset_time! * 1000
|
||||
).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
<div className='text-muted-foreground mt-1'>
|
||||
{t('Total Quota')}:{' '}
|
||||
{totalAmount > 0 ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
render={<span className='cursor-help' />}
|
||||
>
|
||||
{formatQuota(usedAmount)}/
|
||||
{formatQuota(totalAmount)} · {t('Remaining')}{' '}
|
||||
{formatQuota(remainAmount)}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{t('Raw Quota')}: {usedAmount}/{totalAmount} ·{' '}
|
||||
{t('Remaining')} {remainAmount}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
t('Unlimited')
|
||||
)}
|
||||
{totalAmount > 0 && (
|
||||
<span className='ml-2'>
|
||||
{t('Used')} {usagePercent}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{totalAmount > 0 && isActive && (
|
||||
<Progress value={usagePercent} className='mt-2 h-1.5' />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!hasAny && (
|
||||
<p className='text-muted-foreground mt-2 text-xs'>
|
||||
{t('Purchase a plan to enjoy model benefits')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Available plans grid */}
|
||||
{plans.length > 0 ? (
|
||||
<div className='grid grid-cols-1 gap-3 2xl:grid-cols-2 2xl:gap-4'>
|
||||
{plans.map((p, index) => {
|
||||
const plan = p?.plan
|
||||
if (!plan) return null
|
||||
const totalAmount = Number(plan.total_amount || 0)
|
||||
const price = Number(plan.price_amount || 0).toFixed(2)
|
||||
const isPopular = index === 0 && plans.length > 1
|
||||
const limit = Number(plan.max_purchase_per_user || 0)
|
||||
const count = planPurchaseCountMap.get(plan.id) || 0
|
||||
const reached = limit > 0 && count >= limit
|
||||
|
||||
const benefits = [
|
||||
`${t('Validity Period')}: ${formatDuration(plan, t)}`,
|
||||
formatResetPeriod(plan, t) !== t('No Reset')
|
||||
? `${t('Quota Reset')}: ${formatResetPeriod(plan, t)}`
|
||||
: null,
|
||||
totalAmount > 0
|
||||
? `${t('Total Quota')}: ${formatQuota(totalAmount)}`
|
||||
: `${t('Total Quota')}: ${t('Unlimited')}`,
|
||||
limit > 0 ? `${t('Purchase Limit')}: ${limit}` : null,
|
||||
plan.upgrade_group
|
||||
? `${t('Upgrade Group')}: ${plan.upgrade_group}`
|
||||
: null,
|
||||
].filter(Boolean) as string[]
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={plan.id}
|
||||
className={cn(
|
||||
'transition-shadow hover:shadow-md',
|
||||
isPopular && 'border-primary/70 shadow-sm'
|
||||
)}
|
||||
>
|
||||
<CardContent className='flex h-full flex-col p-3.5 sm:p-4'>
|
||||
<div className='mb-2 flex items-start justify-between gap-3'>
|
||||
<div className='min-w-0'>
|
||||
<h4 className='truncate font-semibold'>
|
||||
{plan.title || t('Subscription Plans')}
|
||||
</h4>
|
||||
{plan.subtitle && (
|
||||
<p className='text-muted-foreground truncate text-xs'>
|
||||
{plan.subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isPopular && (
|
||||
<StatusBadge
|
||||
variant='info'
|
||||
copyable={false}
|
||||
className='shrink-0'
|
||||
>
|
||||
<Sparkles className='h-3 w-3' />
|
||||
{t('Recommended')}
|
||||
</StatusBadge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='py-2'>
|
||||
<span className='text-primary text-2xl font-bold'>
|
||||
${price}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 space-y-1.5 pb-3'>
|
||||
{benefits.map((label) => (
|
||||
<div
|
||||
key={label}
|
||||
className='text-muted-foreground flex items-center gap-2 text-xs'
|
||||
>
|
||||
<Check className='text-primary h-3 w-3 shrink-0' />
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Separator className='mb-3' />
|
||||
|
||||
{reached ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger render={<div />}>
|
||||
<Button variant='outline' className='w-full' disabled>
|
||||
{t('Limit Reached')}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{t('Purchase limit reached')} ({count}/{limit})
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Button
|
||||
variant='outline'
|
||||
className='w-full'
|
||||
onClick={() => {
|
||||
setSelectedPlan(p)
|
||||
setPurchaseOpen(true)
|
||||
}}
|
||||
>
|
||||
{t('Subscribe Now')}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className='text-muted-foreground py-4 text-center text-sm'>
|
||||
{t('No plans available')}
|
||||
</p>
|
||||
)}
|
||||
</TitledCard>
|
||||
|
||||
<SubscriptionPurchaseDialog
|
||||
|
||||
Reference in New Issue
Block a user