panel-web/apps/user/components/subscribe/renewal.tsx

'use client';

import PaymentMethods from '@/components/subscribe/payment-methods';
import PlanTabs from '@/components/SubscribePlan/PlanTabs/PlanTabs';
import useGlobalStore from '@/config/use-global';
import { preCreateOrder, renewal } from '@/services/user/order';
import { useQuery } from '@tanstack/react-query';
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import { Button } from '@workspace/airo-ui/components/button';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@workspace/airo-ui/components/dialog';
import { Separator } from '@workspace/airo-ui/components/separator';
import { LoaderCircle } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
import { SubscribeBilling } from './billing';
import { SubscribeDetail } from './detail';

interface RenewalProps {
  id: number;
  subscribe: API.Subscribe;
  className: string;
}

export default function Renewal({ id, subscribe, className }: Readonly<RenewalProps>) {
  const t = useTranslations('subscribe');
  const { getUserInfo } = useGlobalStore();
  const [open, setOpen] = useState<boolean>(false);
  const router = useRouter();
  const [params, setParams] = useState<Partial<API.RenewalOrderRequest>>({
    quantity: 1,
    payment: -1,
    coupon: '',
    user_subscribe_id: id,
  });
  const [loading, startTransition] = useTransition();
  const lastSuccessOrderRef = useRef<any>(null);

  const [tabValue, setTabValue] = useState('year');

  const { data: order } = useQuery({
    enabled: !!subscribe.id && open,
    queryKey: ['preCreateOrder', params],
    queryFn: async () => {
      try {
        const { data } = await preCreateOrder({
          ...params,
          subscribe_id: subscribe.id,
        } as API.PurchaseOrderRequest);
        const result = data.data;
        // 请求成功时保存数据
        if (result) {
          lastSuccessOrderRef.current = result;
        }
        return result;
      } catch (error) {
        if (lastSuccessOrderRef.current) {
          return lastSuccessOrderRef.current;
        }
      }
    },
  });

  useEffect(() => {
    if (subscribe.id && id) {
      setParams((prev) => ({
        ...prev,
        quantity: 1,
        subscribe_id: subscribe.id,
        user_subscribe_id: id,
      }));
    }
  }, [subscribe.id, id]);

  const handleChange = useCallback((field: keyof typeof params, value: string | number) => {
    setParams((prev) => ({
      ...prev,
      [field]: value,
    }));
  }, []);

  const handleSubmit = useCallback(async () => {
    startTransition(async () => {
      try {
        const response = await renewal(params as API.RenewalOrderRequest);
        const orderNo = response.data.data?.order_no;
        if (orderNo) {
          getUserInfo();
          router.push(`/payment?order_no=${orderNo}`);
        }
      } catch (error) {
        /* empty */
      }
    });
  }, [params, router, getUserInfo]);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size='sm' className={className}>
          {t('renewPlan')}
        </Button>
      </DialogTrigger>
      <DialogContent className='flex h-full flex-col md:h-auto'>
        <DialogHeader>
          <DialogTitle className={'sr-only'}>{t('renewSubscription')}</DialogTitle>
        </DialogHeader>
        <div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
          {t('renewSubscription')}
        </div>
        <div>
          <PlanTabs
            tabValue={tabValue}
            setTabValue={(val) => {
              if (val === 'year') {
                handleChange('quantity', 12);
              } else if (val === 'month') {
                handleChange('quantity', 1);
              }
              setTabValue(val);
            }}
            discount={20}
          />
        </div>

        <div className='w-full'>
          <div className='border-transparent shadow-none md:border-inherit'>
            <div className='grid p-0 text-sm md:p-6'>
              <SubscribeDetail
                subscribe={{
                  ...subscribe,
                  quantity: params.quantity,
                }}
              />
              <Separator className='mb-3 mt-4 bg-[#225BA9]' />
              <SubscribeBilling
                order={{
                  ...order,
                  quantity: params.quantity,
                  unit_price: subscribe?.unit_price,
                }}
              />
              <Separator className='mb-3 mt-4 bg-[#225BA9]' />
              <PaymentMethods
                value={params.payment!}
                onChange={(value) => {
                  handleChange('payment', value);
                }}
              />
            </div>
            <div className='mt-8 flex items-center justify-center'>
              <AiroButton
                variant='primary'
                className='w-[150px]'
                disabled={loading}
                onClick={handleSubmit}
              >
                {loading && <LoaderCircle className='mr-2 animate-spin' />}
                {t('buyNow')}
              </AiroButton>
            </div>
          </div>
          {/* <div className='flex flex-col justify-between text-sm'>
            <div className='mb-6 grid gap-3'>
              <DurationSelector
                quantity={params.quantity!}
                unitTime={subscribe?.unit_time}
                discounts={subscribe?.discount}
                onChange={(value) => {
                  handleChange('quantity', value);
                }}
              />
              <CouponInput
                coupon={params.coupon}
                onChange={(value) => handleChange('coupon', value)}
              />
              <PaymentMethods
                value={params.payment!}
                onChange={(value) => {
                  handleChange('payment', value);
                }}
              />
            </div>
            <Button
              className='fixed bottom-0 left-0 w-full rounded-none md:relative md:mt-6'
              disabled={loading}
              onClick={handleSubmit}
            >
              {loading && <LoaderCircle className='mr-2 animate-spin' />}
              {t('buyNow')}
            </Button>
          </div>*/}
        </div>
      </DialogContent>
    </Dialog>
  );
}