🐛 fix(payment): Update payment information

This commit is contained in:
web@ppanel
2025-03-12 13:43:06 +07:00
parent 5c710e1add
commit 70d6a38a29
63 changed files with 292 additions and 102 deletions
+1 -1
View File
@@ -25,7 +25,7 @@ export default function Content({ subscription }: { subscription?: API.Subscribe
const [params, setParams] = useState<API.PortalPurchaseRequest>({
quantity: 1,
subscribe_id: 0,
payment: '',
payment: -1,
coupon: '',
platform: 'email',
identifier: '',
@@ -27,11 +27,7 @@ const DurationSelector: React.FC<DurationSelectorProps> = ({
[onChange],
);
const DurationOption: React.FC<{ value: string; label: string; discount?: number }> = ({
value,
label,
discount,
}) => (
const DurationOption: React.FC<{ value: string; label: string }> = ({ value, label }) => (
<div className='relative'>
<RadioGroupItem value={value} id={value} className='peer sr-only' />
<Label
@@ -39,11 +35,14 @@ const DurationSelector: React.FC<DurationSelectorProps> = ({
className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary relative flex h-full flex-col items-center justify-center gap-2 rounded-md border-2 p-2'
>
{label}
{discount && <Badge variant='destructive'>-{discount}%</Badge>}
</Label>
</div>
);
// 查找当前选中项的折扣信息
const currentDiscount = discounts.find((item) => item.quantity === quantity)?.discount;
const discountPercentage = currentDiscount ? 100 - currentDiscount : 0;
return (
<>
<div className='font-semibold'>{t('purchaseDuration')}</div>
@@ -58,10 +57,19 @@ const DurationSelector: React.FC<DurationSelectorProps> = ({
key={item.quantity}
value={String(item.quantity)}
label={`${item.quantity} / ${t(unitTime)}`}
discount={100 - item.discount}
/>
))}
</RadioGroup>
<div className='flex items-center justify-between'>
<span className='text-muted-foreground text-sm'>{t('discountInfo')}:</span>
{discountPercentage > 0 ? (
<Badge variant='destructive' className='h-6 text-sm'>
-{discountPercentage}% {t('discount')}
</Badge>
) : (
<span className='text-muted-foreground h-6 text-sm'>--</span>
)}
</div>
</>
);
};
@@ -1,8 +1,6 @@
'use client';
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,8 +9,8 @@ import Image from 'next/image';
import React, { memo } from 'react';
interface PaymentMethodsProps {
value: string;
onChange: (value: string) => void;
value: number;
onChange: (value: number) => void;
balance?: boolean;
}
@@ -24,9 +22,9 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({ value, onChange, balanc
queryFn: async () => {
const { data } = await getAvailablePaymentMethods();
const methods = data.data?.list || [];
if (!value && methods[0]?.mark) onChange(methods[0]?.mark);
if (!value && methods[0]?.id) onChange(methods[0]?.id);
if (balance) return methods;
return methods.filter((item) => item.mark !== 'balance');
return methods.filter((item) => item.id !== -1);
},
});
return (
@@ -34,26 +32,26 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({ value, onChange, balanc
<div className='font-semibold'>{t('paymentMethod')}</div>
<RadioGroup
className='grid grid-cols-2 gap-2 md:grid-cols-5'
value={value}
onValueChange={onChange}
value={String(value)}
onValueChange={(val) => onChange(Number(val))}
>
{data?.map((item) => (
<div key={item.mark}>
<RadioGroupItem value={item.mark} id={item.mark} className='peer sr-only' />
<div key={item.id}>
<RadioGroupItem value={String(item.id)} id={String(item.id)} className='peer sr-only' />
<Label
htmlFor={item.mark}
htmlFor={String(item.id)}
className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary flex flex-col items-center justify-between rounded-md border-2 py-2'
>
<div className='mb-3 size-12'>
<Image
src={item.icon || `/payment/${item.mark}.svg`}
src={item.icon || `/payment/balance.svg`}
width={48}
height={48}
alt={item.name || t(`methods.${item.mark}`)}
alt={item.name}
/>
</div>
<span className='w-full overflow-hidden text-ellipsis whitespace-nowrap text-center'>
{item.name || t(`methods.${item.mark}`)}
{item.name}
</span>
</Label>
</div>
+1 -1
View File
@@ -29,7 +29,7 @@ export default function Purchase({ subscribe, setSubscribe }: Readonly<PurchaseP
const [params, setParams] = useState<Partial<API.PurchaseOrderRequest>>({
quantity: 1,
subscribe_id: 0,
payment: 'balance',
payment: -1,
coupon: '',
});
const [loading, startTransition] = useTransition();
+6 -61
View File
@@ -2,8 +2,6 @@
import useGlobalStore from '@/config/use-global';
import { recharge } from '@/services/user/order';
import { getAvailablePaymentMethods } from '@/services/user/payment';
import { useQuery } from '@tanstack/react-query';
import { Button, ButtonProps } from '@workspace/ui/components/button';
import {
Dialog,
@@ -13,15 +11,13 @@ import {
DialogTitle,
DialogTrigger,
} from '@workspace/ui/components/dialog';
import { Label } from '@workspace/ui/components/label';
import { RadioGroup, RadioGroupItem } from '@workspace/ui/components/radio-group';
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
import { unitConversion } from '@workspace/ui/utils';
import { LoaderCircle } from 'lucide-react';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useEffect, useState, useTransition } from 'react';
import { useState, useTransition } from 'react';
import PaymentMethods from './payment-methods';
export default function Recharge(props: Readonly<ButtonProps>) {
const t = useTranslations('subscribe');
@@ -34,27 +30,9 @@ export default function Recharge(props: Readonly<ButtonProps>) {
const [params, setParams] = useState<API.RechargeOrderRequest>({
amount: 0,
payment: '',
payment: 1,
});
const { data: paymentMethods } = useQuery({
enabled: open,
queryKey: ['getAvailablePaymentMethods'],
queryFn: async () => {
const { data } = await getAvailablePaymentMethods();
return data.data?.list || [];
},
});
useEffect(() => {
if (paymentMethods?.length) {
setParams((prev) => ({
...prev,
payment: paymentMethods.find((item) => item.mark !== 'balance')?.mark as string,
}));
}
}, [paymentMethods]);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
@@ -86,43 +64,10 @@ export default function Recharge(props: Readonly<ButtonProps>) {
suffix={currency.currency_unit}
/>
</div>
<div className='font-semibold'>{t('paymentMethod')}</div>
<RadioGroup
className='grid grid-cols-5 gap-2'
<PaymentMethods
value={params.payment}
onValueChange={(value) => {
setParams({
...params,
payment: value,
});
}}
>
{paymentMethods
?.filter((item) => item.mark !== 'balance')
?.map((item) => {
return (
<div key={item.mark}>
<RadioGroupItem value={item.mark} id={item.mark} className='peer sr-only' />
<Label
htmlFor={item.mark}
className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 py-2'
>
<div className='mb-3 size-12'>
<Image
src={item.icon || `/payment/${item.mark}.svg`}
width={48}
height={48}
alt={item.name!}
/>
</div>
<span className='w-full overflow-hidden text-ellipsis whitespace-nowrap text-center'>
{item.name || t(`methods.${item.mark}`)}
</span>
</Label>
</div>
);
})}
</RadioGroup>
onChange={(value) => setParams({ ...params, payment: value })}
/>
</div>
<Button
className='fixed bottom-0 left-0 w-full rounded-none md:relative md:mt-6'
+1 -1
View File
@@ -35,7 +35,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
const router = useRouter();
const [params, setParams] = useState<Partial<API.RenewalOrderRequest>>({
quantity: 1,
payment: 'balance',
payment: -1,
coupon: '',
user_subscribe_id: id,
});
@@ -28,7 +28,7 @@ export default function ResetTraffic({ id, replacement }: Readonly<ResetTrafficP
const [open, setOpen] = useState<boolean>(false);
const router = useRouter();
const [params, setParams] = useState<API.ResetTrafficOrderRequest>({
payment: 'balance',
payment: -1,
user_subscribe_id: id,
});
const [loading, startTransition] = useTransition();
+1
View File
@@ -69,6 +69,7 @@ export const useGlobalStore = create<GlobalStore>((set, get) => ({
verify_code_interval: 60,
},
oauth_methods: [],
web_ad: false,
},
user: undefined,
setCommon: (common) =>
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Rychlost připojení",
"productDetail": "Detaily produktu"
},
"discount": "Sleva",
"discountInfo": "Informace o slevě",
"enterAmount": "Zadejte částku dobití",
"enterCoupon": "Zadejte kód kupónu",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Verbindungsgeschwindigkeit",
"productDetail": "Produktdetails"
},
"discount": "Rabatt",
"discountInfo": "Rabattinformationen",
"enterAmount": "Geben Sie den Aufladebetrag ein",
"enterCoupon": "Gutscheincode eingeben",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Connection Speed",
"productDetail": "Product Details"
},
"discount": "Discount",
"discountInfo": "Discount Info",
"enterAmount": "Enter recharge amount",
"enterCoupon": "Enter Coupon Code",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Velocidad de conexión",
"productDetail": "Detalles del producto"
},
"discount": "Descuento",
"discountInfo": "Información del Descuento",
"enterAmount": "Ingrese el monto de recarga",
"enterCoupon": "Introduce el código de cupón",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Velocidad de conexión",
"productDetail": "Detalles del producto"
},
"discount": "Descuento",
"discountInfo": "Información del Descuento",
"enterAmount": "Ingresa el monto de recarga",
"enterCoupon": "Ingresa el código de cupón",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "سرعت اتصال",
"productDetail": "جزئیات محصول"
},
"discount": "تخفیف",
"discountInfo": "اطلاعات تخفیف",
"enterAmount": "مبلغ شارژ را وارد کنید",
"enterCoupon": "کد تخفیف را وارد کنید",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Yhteysnopeus",
"productDetail": "Tuotteen tiedot"
},
"discount": "Alennus",
"discountInfo": "Alennustiedot",
"enterAmount": "Syötä latausmäärä",
"enterCoupon": "Syötä alennuskoodi",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Vitesse de connexion",
"productDetail": "Détails du produit"
},
"discount": "Remise",
"discountInfo": "Informations sur la remise",
"enterAmount": "Entrez le montant de la recharge",
"enterCoupon": "Entrez le code promo",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "कनेक्शन गति",
"productDetail": "उत्पाद विवरण"
},
"discount": "छूट",
"discountInfo": "छूट जानकारी",
"enterAmount": "रिचार्ज राशि दर्ज करें",
"enterCoupon": "कूपन कोड दर्ज करें",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Kapcsolati sebesség",
"productDetail": "Termék részletei"
},
"discount": "Kedvezmény",
"discountInfo": "Kedvezmény Információ",
"enterAmount": "Adja meg a feltöltési összeget",
"enterCoupon": "Adja meg a kuponkódot",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "接続速度",
"productDetail": "商品詳細"
},
"discount": "割引",
"discountInfo": "割引情報",
"enterAmount": "リチャージ金額を入力してください",
"enterCoupon": "クーポンコードを入力",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "연결 속도",
"productDetail": "제품 세부 정보"
},
"discount": "할인",
"discountInfo": "할인 정보",
"enterAmount": "충전 금액을 입력하세요",
"enterCoupon": "쿠폰 코드 입력",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Tilkoblingshastighet",
"productDetail": "Produktdetaljer"
},
"discount": "Rabatt",
"discountInfo": "Rabattinformasjon",
"enterAmount": "Skriv inn påfyllingsbeløp",
"enterCoupon": "Skriv inn kupongkode",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Prędkość połączenia",
"productDetail": "Szczegóły produktu"
},
"discount": "Zniżka",
"discountInfo": "Informacje o zniżce",
"enterAmount": "Wprowadź kwotę doładowania",
"enterCoupon": "Wprowadź kod kuponu",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Velocidade de conexão",
"productDetail": "Detalhes do produto"
},
"discount": "Desconto",
"discountInfo": "Informações sobre o Desconto",
"enterAmount": "Digite o valor da recarga",
"enterCoupon": "Insira o Código do Cupom",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Viteza de conectare",
"productDetail": "Detalii produs"
},
"discount": "Reducere",
"discountInfo": "Informații despre reducere",
"enterAmount": "Introduceți suma de reîncărcare",
"enterCoupon": "Introduceți codul cuponului",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Скорость соединения",
"productDetail": "Детали продукта"
},
"discount": "Скидка",
"discountInfo": "Информация о скидке",
"enterAmount": "Введите сумму пополнения",
"enterCoupon": "Введите промокод",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "ความเร็วในการเชื่อมต่อ",
"productDetail": "รายละเอียดสินค้า"
},
"discount": "ส่วนลด",
"discountInfo": "ข้อมูลส่วนลด",
"enterAmount": "กรอกจำนวนเงินที่ต้องการเติม",
"enterCoupon": "กรอกรหัสคูปอง",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Bağlantı Hızı",
"productDetail": "Ürün Detayları"
},
"discount": "İndirim",
"discountInfo": "İndirim Bilgisi",
"enterAmount": "Yükleme tutarını girin",
"enterCoupon": "Kupon Kodunu Girin",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Швидкість з'єднання",
"productDetail": "Деталі товару"
},
"discount": "Знижка",
"discountInfo": "Інформація про знижку",
"enterAmount": "Введіть суму поповнення",
"enterCoupon": "Введіть код купона",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "Tốc độ kết nối",
"productDetail": "Chi tiết sản phẩm"
},
"discount": "Giảm giá",
"discountInfo": "Thông tin giảm giá",
"enterAmount": "Nhập số tiền nạp",
"enterCoupon": "Nhập Mã Phiếu Giảm Giá",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "连接速度",
"productDetail": "商品详情"
},
"discount": "折扣",
"discountInfo": "折扣信息",
"enterAmount": "输入充值金额",
"enterCoupon": "输入优惠券代码",
"methods": {
+2
View File
@@ -27,6 +27,8 @@
"connectionSpeed": "連接速度",
"productDetail": "商品詳情"
},
"discount": "折扣",
"discountInfo": "折扣資訊",
"enterAmount": "輸入充值金額",
"enterCoupon": "輸入優惠券代碼",
"methods": {
+15
View File
@@ -2,6 +2,21 @@
/* eslint-disable */
import request from '@/utils/request';
/** Get Ads GET /v1/common/ads */
export async function getAds(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.GetAdsParams,
options?: { [key: string]: any },
) {
return request<API.Response & { data?: API.GetAdsResponse }>('/v1/common/ads', {
method: 'GET',
params: {
...params,
},
...(options || {}),
});
}
/** Get Tos Content GET /v1/common/application */
export async function getApplication(options?: { [key: string]: any }) {
return request<API.Response & { data?: API.GetAppcationResponse }>('/v1/common/application', {
+65 -6
View File
@@ -13,6 +13,10 @@ declare namespace API {
updated_at: number;
};
type AlipayNotifyResponse = {
return_code: string;
};
type Announcement = {
id: number;
title: string;
@@ -149,6 +153,19 @@ declare namespace API {
domain_suffix_list: string;
};
type EPayNotifyRequest = {
pid: number;
trade_no: string;
out_trade_no: string;
type: string;
name: string;
money: string;
trade_status: string;
param: string;
sign: string;
sign_type: string;
};
type Follow = {
id: number;
ticket_id: number;
@@ -158,6 +175,20 @@ declare namespace API {
created_at: number;
};
type GetAdsParams = {
device: string;
position: string;
};
type GetAdsRequest = {
device: string;
position: string;
};
type GetAdsResponse = {
list: Ads[];
};
type GetAppcationResponse = {
config: ApplicationConfig;
applications: ApplicationResponseInfo[];
@@ -176,6 +207,7 @@ declare namespace API {
subscribe: SubscribeConfig;
verify_code: PubilcVerifyCodeConfig;
oauth_methods: string[];
web_ad: boolean;
};
type GetStatResponse = {
@@ -331,7 +363,8 @@ declare namespace API {
type PaymenMethod = {
id: number;
name: string;
mark: string;
platform: string;
description: string;
icon: string;
fee_mode: number;
fee_percent: number;
@@ -341,7 +374,8 @@ declare namespace API {
type PaymentConfig = {
id: number;
name: string;
mark: string;
platform: string;
description: string;
icon?: string;
domain?: string;
config: Record<string, any>;
@@ -351,6 +385,31 @@ declare namespace API {
enable: boolean;
};
type PaymentMethodDetail = {
id: number;
name: string;
platform: string;
description: string;
icon: string;
domain: string;
config: Record<string, any>;
fee_mode: number;
fee_percent: number;
fee_amount: number;
enable: boolean;
notify_url: string;
};
type PlatformInfo = {
platform: string;
platform_url: string;
platform_field_description: Record<string, any>;
};
type PlatformResponse = {
list: PlatformInfo[];
};
type PreOrderResponse = {
price: number;
amount: number;
@@ -383,7 +442,7 @@ declare namespace API {
type PurchaseOrderRequest = {
subscribe_id: number;
quantity: number;
payment: string;
payment: number;
coupon?: string;
};
@@ -443,7 +502,7 @@ declare namespace API {
type RechargeOrderRequest = {
amount: number;
payment: string;
payment: number;
};
type RechargeOrderResponse = {
@@ -464,7 +523,7 @@ declare namespace API {
type RenewalOrderRequest = {
user_subscribe_id: number;
quantity: number;
payment: string;
payment: number;
coupon?: string;
};
@@ -481,7 +540,7 @@ declare namespace API {
type ResetTrafficOrderRequest = {
user_subscribe_id: number;
payment: string;
payment: number;
};
type ResetTrafficOrderResponse = {
+52 -8
View File
@@ -13,6 +13,10 @@ declare namespace API {
updated_at: number;
};
type AlipayNotifyResponse = {
return_code: string;
};
type Announcement = {
id: number;
title: string;
@@ -177,6 +181,19 @@ declare namespace API {
domain_suffix_list: string;
};
type EPayNotifyRequest = {
pid: number;
trade_no: string;
out_trade_no: string;
type: string;
name: string;
money: string;
trade_status: string;
param: string;
sign: string;
sign_type: string;
};
type Follow = {
id: number;
ticket_id: number;
@@ -372,7 +389,8 @@ declare namespace API {
type PaymenMethod = {
id: number;
name: string;
mark: string;
platform: string;
description: string;
icon: string;
fee_mode: number;
fee_percent: number;
@@ -382,7 +400,8 @@ declare namespace API {
type PaymentConfig = {
id: number;
name: string;
mark: string;
platform: string;
description: string;
icon?: string;
domain?: string;
config: Record<string, any>;
@@ -392,11 +411,36 @@ declare namespace API {
enable: boolean;
};
type PaymentMethodDetail = {
id: number;
name: string;
platform: string;
description: string;
icon: string;
domain: string;
config: Record<string, any>;
fee_mode: number;
fee_percent: number;
fee_amount: number;
enable: boolean;
notify_url: string;
};
type PlatformInfo = {
platform: string;
platform_url: string;
platform_field_description: Record<string, any>;
};
type PlatformResponse = {
list: PlatformInfo[];
};
type PortalPurchaseRequest = {
identifier: string;
platform: string;
password?: string;
payment: string;
payment: number;
subscribe_id: number;
quantity: number;
coupon?: string;
@@ -418,7 +462,7 @@ declare namespace API {
};
type PrePurchaseOrderRequest = {
payment: string;
payment: number;
subscribe_id: number;
quantity: number;
coupon?: string;
@@ -463,7 +507,7 @@ declare namespace API {
type PurchaseOrderRequest = {
subscribe_id: number;
quantity: number;
payment: string;
payment: number;
coupon?: string;
};
@@ -607,7 +651,7 @@ declare namespace API {
type RechargeOrderRequest = {
amount: number;
payment: string;
payment: number;
};
type RechargeOrderResponse = {
@@ -628,7 +672,7 @@ declare namespace API {
type RenewalOrderRequest = {
user_subscribe_id: number;
quantity: number;
payment: string;
payment: number;
coupon?: string;
};
@@ -638,7 +682,7 @@ declare namespace API {
type ResetTrafficOrderRequest = {
user_subscribe_id: number;
payment: string;
payment: number;
};
type ResetTrafficOrderResponse = {