✨ feat(subscribe): Add subscription credits

apps/user/app/(main)/(user)/subscribe/billing.tsx

@@ -1,71 +0,0 @@
-'use client';
-
-import { Display } from '@/components/display';
-import { Separator } from '@workspace/ui/components/separator';
-import { useTranslations } from 'next-intl';
-
-interface SubscribeBillingProps {
-  order?: {
-    type?: number;
-    subscribe_id?: number;
-    quantity?: number;
-    price?: number;
-    discount?: number;
-    coupon_discount?: number;
-    fee_amount?: number;
-    amount?: number;
-    unit_price?: number;
-    unit_time?: number;
-  };
-}
-
-export function SubscribeBilling({ order }: SubscribeBillingProps) {
-  const t = useTranslations('subscribe');
-
-  return (
-    <>
-      <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('billing.duration')}</span>
-            <span>
-              {order?.quantity || 1} {t(order?.unit_time || 'Month')}
-            </span>
-          </li>
-        )}
-        <li>
-          <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('billing.productDiscount')}</span>
-          <span>
-            <Display type='currency' value={order?.discount} />
-          </span>
-        </li>
-        <li>
-          <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('billing.fee')}</span>
-          <span>
-            <Display type='currency' value={order?.fee_amount} />
-          </span>
-        </li>
-      </ul>
-      <Separator />
-      <div className='flex items-center justify-between font-semibold'>
-        <span className='text-muted-foreground'>{t('billing.total')}</span>
-        <span>
-          <Display type='currency' value={order?.amount} />
-        </span>
-      </div>
-    </>
-  );
-}

apps/user/app/(main)/(user)/subscribe/detail.tsx

@@ -1,53 +0,0 @@
-'use client';
-
-import { Display } from '@/components/display';
-import { useTranslations } from 'next-intl';
-
-interface SubscribeDetailProps {
-  subscribe?: {
-    traffic?: number | null;
-    speed_limit?: number | null;
-    device_limit?: number | null;
-    name?: string | null;
-    quantity?: number | null;
-    unit_price?: number | null;
-  };
-}
-
-export function SubscribeDetail({ subscribe }: SubscribeDetailProps) {
-  const t = useTranslations('subscribe.detail');
-
-  return (
-    <>
-      <div className='font-semibold'>{t('productDetail')}</div>
-      <ul className='grid grid-cols-2 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1'>
-        {subscribe?.name && (
-          <li className='flex items-center justify-between'>
-            <span className='text-muted-foreground line-clamp-2 flex-1'>{subscribe?.name}</span>
-            <span>
-              x <span>{subscribe?.quantity || 1}</span>
-            </span>
-          </li>
-        )}
-        <li>
-          <span className='text-muted-foreground'>{t('availableTraffic')}</span>
-          <span>
-            <Display type='traffic' value={subscribe?.traffic} unlimited />
-          </span>
-        </li>
-        <li>
-          <span className='text-muted-foreground'>{t('connectionSpeed')}</span>
-          <span>
-            <Display type='traffic' value={subscribe?.speed_limit} unlimited />
-          </span>
-        </li>
-        <li>
-          <span className='text-muted-foreground'>{t('connectedDevices')}</span>
-          <span>
-            <Display value={subscribe?.device_limit} type='number' unlimited />
-          </span>
-        </li>
-      </ul>
-    </>
-  );
-}

apps/user/app/(main)/(user)/subscribe/page.tsx

@@ -13,8 +13,8 @@ import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
 import { Empty } from '@/components/empty';
-import Purchase from '../order/purchase';
-import { SubscribeDetail } from './detail';
+import { SubscribeDetail } from '@/components/subscribe/detail';
+import Purchase from '@/components/subscribe/purchase';
 
 export default function Page() {
   const t = useTranslations('subscribe');
@@ -112,7 +112,7 @@ export default function Page() {
                   <SubscribeDetail
                     subscribe={{
                       ...item,
-                      name: null,
+                      name: undefined,
                     }}
                   />
                 </CardContent>