🐛 fix(payment): Update payment information

2025-03-12 13:43:06 +07:00
parent 5c710e1add
commit 70d6a38a29
63 changed files with 292 additions and 102 deletions
@@ -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>
@@ -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();
@@ -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'
@@ -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();