✨ feat(subscription): Refactor subscription handling and update imports for better organization

apps/user/components/subscribe/payment-methods.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { getAvailablePaymentMethods } from '@/services/user/payment';
+import { getAvailablePaymentMethods } from '@/services/user/portal';
+// import { getAvailablePaymentMethods } from '@/services/user/payment';
+// import { getAvailablePaymentMethods } from '@/services/user/payment';
 import { useQuery } from '@tanstack/react-query';
 import { Label } from '@workspace/ui/components/label';
 import { RadioGroup, RadioGroupItem } from '@workspace/ui/components/radio-group';
@@ -11,22 +13,30 @@ import React, { memo } from 'react';
 interface PaymentMethodsProps {
   value: string;
   onChange: (value: string) => void;
+  balance?: boolean;
 }
 
-const PaymentMethods: React.FC<PaymentMethodsProps> = ({ value, onChange }) => {
+const PaymentMethods: React.FC<PaymentMethodsProps> = ({ value, onChange, balance = true }) => {
   const t = useTranslations('subscribe');
 
   const { data } = useQuery({
-    queryKey: ['getAvailablePaymentMethods'],
+    queryKey: ['getAvailablePaymentMethods', { balance }],
     queryFn: async () => {
       const { data } = await getAvailablePaymentMethods();
-      return data.data?.list || [];
+      const methods = data.data?.list || [];
+      if (!value && methods[0]?.mark) onChange(methods[0]?.mark);
+      if (balance) return methods;
+      return methods.filter((item) => item.mark !== 'balance');
     },
   });
   return (
     <>
       <div className='font-semibold'>{t('paymentMethod')}</div>
-      <RadioGroup className='grid grid-cols-5 gap-2' value={value} onValueChange={onChange}>
+      <RadioGroup
+        className='grid grid-cols-2 gap-2 md:grid-cols-5'
+        value={value}
+        onValueChange={onChange}
+      >
         {data?.map((item) => (
           <div key={item.mark}>
             <RadioGroupItem value={item.mark} id={item.mark} className='peer sr-only' />

apps/user/components/subscribe/purchase.tsx

@@ -4,7 +4,8 @@ import CouponInput from '@/components/subscribe/coupon-input';
 import DurationSelector from '@/components/subscribe/duration-selector';
 import PaymentMethods from '@/components/subscribe/payment-methods';
 import useGlobalStore from '@/config/use-global';
-import { checkoutOrder, preCreateOrder, purchase } from '@/services/user/order';
+import { preCreateOrder, purchase } from '@/services/user/order';
+import { purchaseCheckout } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import { Card, CardContent } from '@workspace/ui/components/card';
@@ -69,7 +70,7 @@ export default function Purchase({ subscribe, setSubscribe }: Readonly<PurchaseP
         const response = await purchase(params as API.PurchaseOrderRequest);
         const orderNo = response.data.data?.order_no;
         if (orderNo) {
-          const { data } = await checkoutOrder({
+          const { data } = await purchaseCheckout({
             orderNo,
             returnUrl: `${window.location.origin}/payment?order_no=${orderNo}`,
           });

apps/user/components/subscribe/recharge.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import useGlobalStore from '@/config/use-global';
-import { checkoutOrder, recharge } from '@/services/user/order';
+import { recharge } from '@/services/user/order';
 import { getAvailablePaymentMethods } from '@/services/user/payment';
+import { purchaseCheckout } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
 import { Button, ButtonProps } from '@workspace/ui/components/button';
 import {
@@ -133,7 +134,7 @@ export default function Recharge(props: Readonly<ButtonProps>) {
                   const response = await recharge(params);
                   const orderNo = response.data.data?.order_no;
                   if (orderNo) {
-                    const { data } = await checkoutOrder({
+                    const { data } = await purchaseCheckout({
                       orderNo,
                       returnUrl: `${window.location.origin}/payment?order_no=${orderNo}`,
                     });

apps/user/components/subscribe/renewal.tsx

@@ -4,7 +4,8 @@ import CouponInput from '@/components/subscribe/coupon-input';
 import DurationSelector from '@/components/subscribe/duration-selector';
 import PaymentMethods from '@/components/subscribe/payment-methods';
 import useGlobalStore from '@/config/use-global';
-import { checkoutOrder, preCreateOrder, renewal } from '@/services/user/order';
+import { preCreateOrder, renewal } from '@/services/user/order';
+import { purchaseCheckout } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import { Card, CardContent } from '@workspace/ui/components/card';
@@ -77,7 +78,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
         const response = await renewal(params as API.RenewalOrderRequest);
         const orderNo = response.data.data?.order_no;
         if (orderNo) {
-          const { data } = await checkoutOrder({
+          const { data } = await purchaseCheckout({
             orderNo,
             returnUrl: `${window.location.origin}/payment?order_no=${orderNo}`,
           });

apps/user/components/subscribe/reset-traffic.tsx

@@ -2,7 +2,8 @@
 
 import { Display } from '@/components/display';
 import useGlobalStore from '@/config/use-global';
-import { checkoutOrder, resetTraffic } from '@/services/user/order';
+import { resetTraffic } from '@/services/user/order';
+import { purchaseCheckout } from '@/services/user/portal';
 import { Button } from '@workspace/ui/components/button';
 import {
   Dialog,
@@ -84,7 +85,7 @@ export default function ResetTraffic({ id, replacement }: Readonly<ResetTrafficP
                   const response = await resetTraffic(params);
                   const orderNo = response.data.data?.order_no;
                   if (orderNo) {
-                    const { data } = await checkoutOrder({
+                    const { data } = await purchaseCheckout({
                       orderNo,
                       returnUrl: `${window.location.origin}/payment?order_no=${orderNo}`,
                     });