🐛 fix(payment): Fix payment related type definitions and update payment method references

apps/admin/app/dashboard/order/page.tsx

@@ -116,7 +116,7 @@ export default function Page(props: any) {
                 <ul className='grid gap-3'>
                   <li className='flex items-center justify-between'>
                     <span className='text-muted-foreground'>{t('method')}</span>
-                    <span>{t(`methods.${row.original.method}`)}</span>
+                    <span>{row.original?.payment?.name || row.original?.payment?.platform}</span>
                   </li>
                 </ul>
               </HoverCardContent>

apps/admin/services/admin/index.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-
+ 
 // API 更新时间：
 // API 唯一标识：
 import * as ads from './ads';

apps/admin/services/admin/typings.d.ts

@@ -224,7 +224,7 @@ declare namespace API {
     coupon_discount?: number;
     commission: number;
     fee_amount: number;
-    method?: string;
+    payment_id: number;
     trade_no?: string;
     status?: number;
     subscribe_id?: number;
@@ -493,7 +493,7 @@ declare namespace API {
   };
 
   type GetAvailablePaymentMethodsResponse = {
-    list: PaymenMethod[];
+    list: PaymentMethod[];
   };
 
   type GetCouponListParams = {
@@ -921,7 +921,7 @@ declare namespace API {
     coupon: string;
     coupon_discount: number;
     commission?: number;
-    method: string;
+    payment: PaymentMethod;
     fee_amount: number;
     trade_no: string;
     status: number;
@@ -943,6 +943,7 @@ declare namespace API {
     coupon: string;
     coupon_discount: number;
     commission?: number;
+    payment: PaymentMethod;
     method: string;
     fee_amount: number;
     trade_no: string;
@@ -961,17 +962,6 @@ declare namespace API {
     list?: OrdersStatistics[];
   };
 
-  type PaymenMethod = {
-    id: number;
-    name: string;
-    platform: string;
-    description: string;
-    icon: string;
-    fee_mode: number;
-    fee_percent: number;
-    fee_amount: number;
-  };
-
   type PaymentConfig = {
     id: number;
     name: string;
@@ -986,6 +976,17 @@ declare namespace API {
     enable: boolean;
   };
 
+  type PaymentMethod = {
+    id: number;
+    name: string;
+    platform: string;
+    description: string;
+    icon: string;
+    fee_mode: number;
+    fee_percent: number;
+    fee_amount: number;
+  };
+
   type PaymentMethodDetail = {
     id: number;
     name: string;
@@ -1520,7 +1521,7 @@ declare namespace API {
   type UpdateOrderStatusRequest = {
     id: number;
     status: number;
-    method?: string;
+    payment_id?: number;
     trade_no?: string;
   };
 

apps/admin/services/common/index.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-
+ 
 // API 更新时间：
 // API 唯一标识：
 import * as auth from './auth';

apps/admin/services/common/typings.d.ts

@@ -195,7 +195,7 @@ declare namespace API {
   };
 
   type GetAvailablePaymentMethodsResponse = {
-    list: PaymenMethod[];
+    list: PaymentMethod[];
   };
 
   type GetGlobalConfigResponse = {
@@ -328,7 +328,7 @@ declare namespace API {
     coupon: string;
     coupon_discount: number;
     commission?: number;
-    method: string;
+    payment: PaymentMethod;
     fee_amount: number;
     trade_no: string;
     status: number;
@@ -350,6 +350,7 @@ declare namespace API {
     coupon: string;
     coupon_discount: number;
     commission?: number;
+    payment: PaymentMethod;
     method: string;
     fee_amount: number;
     trade_no: string;
@@ -360,17 +361,6 @@ declare namespace API {
     updated_at: number;
   };
 
-  type PaymenMethod = {
-    id: number;
-    name: string;
-    platform: string;
-    description: string;
-    icon: string;
-    fee_mode: number;
-    fee_percent: number;
-    fee_amount: number;
-  };
-
   type PaymentConfig = {
     id: number;
     name: string;
@@ -385,6 +375,17 @@ declare namespace API {
     enable: boolean;
   };
 
+  type PaymentMethod = {
+    id: number;
+    name: string;
+    platform: string;
+    description: string;
+    icon: string;
+    fee_mode: number;
+    fee_percent: number;
+    fee_amount: number;
+  };
+
   type PaymentMethodDetail = {
     id: number;
     name: string;

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { Display } from '@/components/display';
+import StripePayment from '@/components/payment/stripe';
 import { SubscribeBilling } from '@/components/subscribe/billing';
 import { SubscribeDetail } from '@/components/subscribe/detail';
 import useGlobalStore from '@/config/use-global';
@@ -25,7 +26,6 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { QRCodeCanvas } from 'qrcode.react';
 import { useEffect, useState } from 'react';
-import StripePayment from './stripe';
 
 export default function Page() {
   const t = useTranslations('order');
@@ -106,7 +106,7 @@ export default function Page() {
           <dl className='grid gap-3'>
             <div className='flex items-center justify-between'>
               <dt className='text-muted-foreground'>
-                {data?.method && <Badge>{data?.method}</Badge>}
+                <Badge>{data?.payment.name || data?.payment.platform}</Badge>
               </dt>
             </div>
           </dl>
@@ -223,7 +223,7 @@ export default function Page() {
             </div>
           )}
 
-          {data?.status === 1 && payment?.type === 'Stripe' && (
+          {data?.status === 1 && payment?.type === 'stripe' && (
             <div className='flex flex-col items-center gap-8 text-center'>
               <h3 className='text-2xl font-bold tracking-tight'>{t('waitingForPayment')}</h3>
               <p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>

apps/user/app/(main)/purchasing/order/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Display } from '@/components/display';
+import StripePayment from '@/components/payment/stripe';
 import { SubscribeBilling } from '@/components/subscribe/billing';
 import { SubscribeDetail } from '@/components/subscribe/detail';
 import useGlobalStore from '@/config/use-global';
@@ -25,7 +26,6 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { QRCodeCanvas } from 'qrcode.react';
 import { useEffect, useState } from 'react';
-import StripePayment from './stripe';
 
 export default function Page() {
   const t = useTranslations('order');
@@ -111,7 +111,7 @@ export default function Page() {
             <dl className='grid gap-3'>
               <div className='flex items-center justify-between'>
                 <dt className='text-muted-foreground'>
-                  {data?.payment && <Badge>{t(`methods.${data?.payment}`)}</Badge>}
+                  <Badge>{data?.payment.name || data?.payment.platform}</Badge>
                 </dt>
               </div>
             </dl>
@@ -228,19 +228,19 @@ export default function Page() {
               </div>
             )}
 
-            {data?.status === 1 && payment?.type === 'stripe' && (
+            {data?.status === 1 && payment?.type === 'Stripe' && (
               <div className='flex flex-col items-center gap-8 text-center'>
-                <h3 className='text-2xl font-bold tracking-tight'>{t('scanToPay')}</h3>
+                <h3 className='text-2xl font-bold tracking-tight'>{t('waitingForPayment')}</h3>
                 <p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>
                 {payment.stripe && <StripePayment {...payment.stripe} />}
-                <div className='flex gap-4'>
+                {/* <div className='flex gap-4'>
-                  <Button asChild>
+                <Button asChild>
-                    <Link href='/subscribe'>{t('productList')}</Link>
+                  <Link href='/subscribe'>{t('productList')}</Link>
-                  </Button>
+                </Button>
-                  <Button asChild variant='outline'>
+                <Button asChild variant='outline'>
-                    <Link href='/order'>{t('orderList')}</Link>
+                  <Link href='/order'>{t('orderList')}</Link>
-                  </Button>
+                </Button>
-                </div>
+              </div> */}
               </div>
             )}
 

apps/user/app/(main)/purchasing/order/stripe.tsx

@@ -1,109 +0,0 @@
-import { Elements, useStripe } from '@stripe/react-stripe-js';
-import { loadStripe, PaymentIntentResult } from '@stripe/stripe-js';
-import { QRCodeCanvas } from 'qrcode.react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-interface StripePaymentProps {
-  method: string;
-  client_secret: string;
-  publishable_key: string;
-}
-
-const StripePayment: React.FC<StripePaymentProps> = ({
-  method,
-  client_secret,
-  publishable_key,
-}) => {
-  const stripePromise = useMemo(() => loadStripe(publishable_key), [publishable_key]);
-
-  return (
-    <Elements stripe={stripePromise}>
-      <CheckoutForm method={method} client_secret={client_secret} />
-    </Elements>
-  );
-};
-
-const CheckoutForm: React.FC<Omit<StripePaymentProps, 'publishable_key'>> = ({
-  client_secret,
-  method,
-}) => {
-  const stripe = useStripe();
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-
-  const handleError = useCallback((message: string) => {
-    setErrorMessage(message);
-    setIsSubmitted(false);
-  }, []);
-
-  const confirmPayment = useCallback(async (): Promise<PaymentIntentResult | null> => {
-    if (!stripe) {
-      handleError('Stripe.js is not loaded.');
-      return null;
-    }
-
-    if (method === 'alipay') {
-      return await stripe.confirmAlipayPayment(
-        client_secret,
-        { return_url: window.location.href },
-        { handleActions: false },
-      );
-    }
-
-    return await stripe.confirmWechatPayPayment(
-      client_secret,
-      {
-        payment_method_options: { wechat_pay: { client: 'web' } },
-      },
-      { handleActions: false },
-    );
-  }, [client_secret, method, stripe, handleError]);
-
-  const autoSubmit = useCallback(async () => {
-    if (isSubmitted) return;
-
-    setIsSubmitted(true);
-
-    try {
-      const result = await confirmPayment();
-      if (!result) return;
-
-      const { error, paymentIntent } = result;
-      if (error) return handleError(error.message!);
-
-      if (paymentIntent?.status === 'requires_action') {
-        const nextAction = paymentIntent.next_action as any;
-        const qrUrl =
-          method === 'alipay'
-            ? nextAction?.alipay_handle_redirect?.url
-            : nextAction?.wechat_pay_display_qr_code?.image_url_svg;
-
-        setQrCodeUrl(qrUrl || null);
-      }
-    } catch (error) {
-      handleError('An unexpected error occurred');
-    }
-  }, [confirmPayment, isSubmitted, handleError, method]);
-
-  useEffect(() => {
-    autoSubmit();
-  }, [autoSubmit]);
-
-  return qrCodeUrl ? (
-    <QRCodeCanvas
-      value={qrCodeUrl}
-      size={208}
-      imageSettings={{
-        src: `/payment/${method}.svg`,
-        width: 24,
-        height: 24,
-        excavate: true,
-      }}
-    />
-  ) : (
-    errorMessage
-  );
-};
-
-export default StripePayment;

apps/user/components/payment/stripe.tsx

@@ -145,9 +145,9 @@ const CardPaymentForm: React.FC<CardPaymentFormProps> = ({ clientSecret, onError
                 value={cardholderName}
                 onChange={(e) => setCardholderName(e.target.value)}
                 placeholder={t('name_placeholder')}
-                className={errors.name ? 'border-red-500' : ''}
+                className={errors.name ? 'border-destructive' : ''}
               />
-              {errors.name && <p className='text-xs text-red-500'>{errors.name}</p>}
+              {errors.name && <p className='text-destructive text-xs'>{errors.name}</p>}
             </div>
 
             {/* Card Number */}
@@ -166,7 +166,7 @@ const CardPaymentForm: React.FC<CardPaymentFormProps> = ({ clientSecret, onError
                   />
                 </div>
               </div>
-              {errors.cardNumber && <p className='text-xs text-red-500'>{errors.cardNumber}</p>}
+              {errors.cardNumber && <p className='text-destructive text-xs'>{errors.cardNumber}</p>}
             </div>
 
             <div className='grid grid-cols-2 gap-4'>
@@ -184,7 +184,9 @@ const CardPaymentForm: React.FC<CardPaymentFormProps> = ({ clientSecret, onError
                     onChange={(e) => handleChange(e, 'cardExpiry')}
                   />
                 </div>
-                {errors.cardExpiry && <p className='text-xs text-red-500'>{errors.cardExpiry}</p>}
+                {errors.cardExpiry && (
+                  <p className='text-destructive text-xs'>{errors.cardExpiry}</p>
+                )}
               </div>
 
               {/* Security Code */}
@@ -201,7 +203,7 @@ const CardPaymentForm: React.FC<CardPaymentFormProps> = ({ clientSecret, onError
                     onChange={(e) => handleChange(e, 'cardCvc')}
                   />
                 </div>
-                {errors.cardCvc && <p className='text-xs text-red-500'>{errors.cardCvc}</p>}
+                {errors.cardCvc && <p className='text-destructive text-xs'>{errors.cardCvc}</p>}
               </div>
             </div>
           </div>

apps/user/package.json

@@ -10,8 +10,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@stripe/react-stripe-js": "^3.1.1",
+    "@stripe/react-stripe-js": "^3.4.0",
-    "@stripe/stripe-js": "^5.5.0",
+    "@stripe/stripe-js": "^6.0.0",
     "@tanstack/react-query": "^5.63.0",
     "@tanstack/react-query-next-experimental": "^5.63.0",
     "@workspace/ui": "workspace:*",

apps/user/services/common/index.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-
+ 
 // API 更新时间：
 // API 唯一标识：
 import * as auth from './auth';

apps/user/services/common/typings.d.ts

@@ -195,7 +195,7 @@ declare namespace API {
   };
 
   type GetAvailablePaymentMethodsResponse = {
-    list: PaymenMethod[];
+    list: PaymentMethod[];
   };
 
   type GetGlobalConfigResponse = {
@@ -328,7 +328,7 @@ declare namespace API {
     coupon: string;
     coupon_discount: number;
     commission?: number;
-    method: string;
+    payment: PaymentMethod;
     fee_amount: number;
     trade_no: string;
     status: number;
@@ -350,6 +350,7 @@ declare namespace API {
     coupon: string;
     coupon_discount: number;
     commission?: number;
+    payment: PaymentMethod;
     method: string;
     fee_amount: number;
     trade_no: string;
@@ -360,17 +361,6 @@ declare namespace API {
     updated_at: number;
   };
 
-  type PaymenMethod = {
-    id: number;
-    name: string;
-    platform: string;
-    description: string;
-    icon: string;
-    fee_mode: number;
-    fee_percent: number;
-    fee_amount: number;
-  };
-
   type PaymentConfig = {
     id: number;
     name: string;
@@ -385,6 +375,17 @@ declare namespace API {
     enable: boolean;
   };
 
+  type PaymentMethod = {
+    id: number;
+    name: string;
+    platform: string;
+    description: string;
+    icon: string;
+    fee_mode: number;
+    fee_percent: number;
+    fee_amount: number;
+  };
+
   type PaymentMethodDetail = {
     id: number;
     name: string;

apps/user/services/user/index.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-
+ 
 // API 更新时间：
 // API 唯一标识：
 import * as announcement from './announcement';

apps/user/services/user/typings.d.ts

@@ -204,7 +204,7 @@ declare namespace API {
   };
 
   type GetAvailablePaymentMethodsResponse = {
-    list: PaymenMethod[];
+    list: PaymentMethod[];
   };
 
   type GetLoginLogParams = {
@@ -354,7 +354,7 @@ declare namespace API {
     coupon: string;
     coupon_discount: number;
     commission?: number;
-    method: string;
+    payment: PaymentMethod;
     fee_amount: number;
     trade_no: string;
     status: number;
@@ -376,6 +376,7 @@ declare namespace API {
     coupon: string;
     coupon_discount: number;
     commission?: number;
+    payment: PaymentMethod;
     method: string;
     fee_amount: number;
     trade_no: string;
@@ -386,17 +387,6 @@ declare namespace API {
     updated_at: number;
   };
 
-  type PaymenMethod = {
-    id: number;
-    name: string;
-    platform: string;
-    description: string;
-    icon: string;
-    fee_mode: number;
-    fee_percent: number;
-    fee_amount: number;
-  };
-
   type PaymentConfig = {
     id: number;
     name: string;
@@ -411,6 +401,17 @@ declare namespace API {
     enable: boolean;
   };
 
+  type PaymentMethod = {
+    id: number;
+    name: string;
+    platform: string;
+    description: string;
+    icon: string;
+    fee_mode: number;
+    fee_percent: number;
+    fee_amount: number;
+  };
+
   type PaymentMethodDetail = {
     id: number;
     name: string;
@@ -588,7 +589,7 @@ declare namespace API {
     coupon: string;
     coupon_discount: number;
     fee_amount: number;
-    payment: string;
+    payment: PaymentMethod;
     status: number;
     created_at: number;
     token?: string;