S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(subscribe): Add unit time

Browse Source
This commit is contained in:
web@ppanel
2024-12-20 18:52:30 +07:00
parent d8b0bd9c2d
commit 39d07ecee5
80 changed files with 553 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/app/(main)/(user)/order/purchase.tsx
+16 -14
View File
@@ -112,27 +112,29 @@ export default function Purchase({
}}
className='flex flex-wrap gap-0.5 *:w-20 md:gap-2'
>
<div className='relative'>
<RadioGroupItem value='1' id='1' className='peer sr-only' />
<Label
htmlFor='1'
className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary relative flex h-full flex-col items-center justify-center gap-2 rounded-md border-2 p-2'
>
1 {t('month')}
</Label>
</div>
{subscribe?.unit_time !== 'Minute' && (
<div className='relative'>
<RadioGroupItem value='1' id='1' className='peer sr-only' />
<Label
htmlFor='1'
className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary relative flex h-full flex-col items-center justify-center gap-2 rounded-md border-2 p-2'
>
1 / {t(subscribe?.unit_time || 'Month')}
</Label>
</div>
)}
{subscribe?.discount?.map((item) => (
<div key={item.months}>
<div key={item.quantity}>
<RadioGroupItem
value={String(item.months)}
id={String(item.months)}
value={String(item.quantity)}
id={String(item.quantity)}
className='peer sr-only'
/>
<Label
htmlFor={String(item.months)}
htmlFor={String(item.quantity)}
className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary relative flex h-full flex-col items-center justify-center gap-2 rounded-md border-2 p-2'
>
{item.months} {t('months')}
{item.quantity} / {t(subscribe?.unit_time || 'Month')}
{item.discount < 100 && (
<Badge variant='destructive'>-{100 - item.discount}%</Badge>
)}
apps/user/app/(main)/(user)/order/renewal.tsx
+16 -14
View File
@@ -107,27 +107,29 @@ export default function Renewal({ token, subscribe }: { token: string; subscribe
}}
className='flex flex-wrap gap-2'
>
<div className='relative'>
<RadioGroupItem value='1' id='1' className='peer sr-only' />
<Label
htmlFor='1'
className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary relative flex h-full flex-col items-center justify-center gap-2 rounded-md border-2 p-2'
>
1 {t('month')}
</Label>
</div>
{subscribe?.unit_time !== 'Minute' && (
<div className='relative'>
<RadioGroupItem value='1' id='1' className='peer sr-only' />
<Label
htmlFor='1'
className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary relative flex h-full flex-col items-center justify-center gap-2 rounded-md border-2 p-2'
>
1 / {t(subscribe?.unit_time || 'Month')}
</Label>
</div>
)}
{subscribe?.discount?.map((item) => (
<div key={item.months}>
<div key={item.quantity}>
<RadioGroupItem
value={String(item.months)}
id={String(item.months)}
value={String(item.quantity)}
id={String(item.quantity)}
className='peer sr-only'
/>
<Label
htmlFor={String(item.months)}
htmlFor={String(item.quantity)}
className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary relative flex h-full flex-col items-center justify-center gap-2 rounded-md border-2 p-2'
>
{item.months} {t('months')}
{item.quantity} / {t(subscribe?.unit_time || 'Month')}
{item.discount < 100 && (
<Badge variant='destructive'>-{100 - item.discount}%</Badge>
)}
apps/user/app/(main)/(user)/subscribe/billing.tsx
+10 -9
View File
@@ -15,44 +15,45 @@ interface SubscribeBillingProps {
fee_amount?: number;
amount?: number;
unit_price?: number;
unit_time?: number;
};
}
export function SubscribeBilling({ order }: SubscribeBillingProps) {
const t = useTranslations('subscribe.billing');
const t = useTranslations('subscribe');
return (
<>
<div className='font-semibold'>{t('billingTitle')}</div>
<div className='font-semibold'>{t('billing.billingTitle')}</div>
<ul className='grid grid-cols-2 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1'>
{order?.type && [1, 2].includes(order?.type) && (
<li>
<span className='text-muted-foreground'>{t('duration')}</span>
<span className='text-muted-foreground'>{t('billing.duration')}</span>
<span>
{order?.quantity || 1} {t('months')}
{order?.quantity || 1} {t(order?.unit_time || 'Month')}
</span>
</li>
)}
<li>
<span className='text-muted-foreground'>{t('price')}</span>
<span className='text-muted-foreground'>{t('billing.price')}</span>
<span>
<Display type='currency' value={order?.price || order?.unit_price} />
</span>
</li>
<li>
<span className='text-muted-foreground'>{t('productDiscount')}</span>
<span className='text-muted-foreground'>{t('billing.productDiscount')}</span>
<span>
<Display type='currency' value={order?.discount} />
</span>
</li>
<li>
<span className='text-muted-foreground'>{t('couponDiscount')}</span>
<span className='text-muted-foreground'>{t('billing.couponDiscount')}</span>
<span>
<Display type='currency' value={order?.coupon_discount} />
</span>
</li>
<li>
<span className='text-muted-foreground'>{t('fee')}</span>
<span className='text-muted-foreground'>{t('billing.fee')}</span>
<span>
<Display type='currency' value={order?.fee_amount} />
</span>
@@ -60,7 +61,7 @@ export function SubscribeBilling({ order }: SubscribeBillingProps) {
</ul>
<Separator />
<div className='flex items-center justify-between font-semibold'>
<span className='text-muted-foreground'>{t('total')}</span>
<span className='text-muted-foreground'>{t('billing.total')}</span>
<span>
<Display type='currency' value={order?.amount} />
</span>
apps/user/app/(main)/(user)/subscribe/page.tsx
+1 -1
View File
@@ -120,7 +120,7 @@ export default function Page() {
<CardFooter className='relative mt-2 flex flex-col gap-2'>
<h2 className='pb-5 text-2xl font-semibold sm:text-3xl'>
<Display type='currency' value={item.unit_price} />
<span className='text-base font-medium'>/{t('perMonth')}</span>
<span className='text-base font-medium'>/{t(item.unit_time || 'Month')}</span>
</h2>
<Button
className='absolute bottom-0 w-full rounded-b-xl rounded-t-none'