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

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'>
-                  <Button asChild>
-                    <Link href='/subscribe'>{t('productList')}</Link>
-                  </Button>
-                  <Button asChild variant='outline'>
-                    <Link href='/order'>{t('orderList')}</Link>
-                  </Button>
-                </div>
+                {/* <div className='flex gap-4'>
+                <Button asChild>
+                  <Link href='/subscribe'>{t('productList')}</Link>
+                </Button>
+                <Button asChild variant='outline'>
+                  <Link href='/order'>{t('orderList')}</Link>
+                </Button>
+              </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;