mirror of
https://github.com/perfect-panel/ppanel-web.git
synced 2026-02-06 03:30:25 -05:00
🐛 fix(payment): Fix payment related type definitions and update payment method references
This commit is contained in:
web@ppanel
parent
7fa3a57df4
commit
c3138a863d
@ -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>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// @ts-ignore
|
||||
|
||||
|
||||
// API 更新时间：
|
||||
// API 唯一标识：
|
||||
import * as ads from './ads';
|
||||
|
||||
31
apps/admin/services/admin/typings.d.ts
vendored
31
apps/admin/services/admin/typings.d.ts
vendored
@ -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;
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// @ts-ignore
|
||||
|
||||
|
||||
// API 更新时间：
|
||||
// API 唯一标识：
|
||||
import * as auth from './auth';
|
||||
|
||||
27
apps/admin/services/common/typings.d.ts
vendored
27
apps/admin/services/common/typings.d.ts
vendored
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
|
||||
@ -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;
|
||||
@ -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>
|
||||
@ -10,8 +10,8 @@
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@stripe/react-stripe-js": "^3.1.1",
|
||||
"@stripe/stripe-js": "^5.5.0",
|
||||
"@stripe/react-stripe-js": "^3.4.0",
|
||||
"@stripe/stripe-js": "^6.0.0",
|
||||
"@tanstack/react-query": "^5.63.0",
|
||||
"@tanstack/react-query-next-experimental": "^5.63.0",
|
||||
"@workspace/ui": "workspace:*",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// @ts-ignore
|
||||
|
||||
|
||||
// API 更新时间：
|
||||
// API 唯一标识：
|
||||
import * as auth from './auth';
|
||||
|
||||
27
apps/user/services/common/typings.d.ts
vendored
27
apps/user/services/common/typings.d.ts
vendored
@ -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;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// @ts-ignore
|
||||
|
||||
|
||||
// API 更新时间：
|
||||
// API 唯一标识：
|
||||
import * as announcement from './announcement';
|
||||
|
||||
29
apps/user/services/user/typings.d.ts
vendored
29
apps/user/services/user/typings.d.ts
vendored
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user