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

'use client';

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

interface PurchaseProps {
  subscribe?: API.Subscribe;
}

interface PurchaseDialogRef {
  show: (subscribe: API.Subscribe, tabValue: string) => void;
  hide: () => void;
}

const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
  const t = useTranslations('subscribe');
  const { getUserInfo } = useGlobalStore();
  const router = useRouter();
  const [params, setParams] = useState<Partial<API.PurchaseOrderRequest>>({
    quantity: 1,
    subscribe_id: 0,
    payment: -1,
    coupon: '',
  });
  const [subscribe, setSubscribe] = useState<API.Subscribe | undefined>(props.subscribe);
  const [loading, startTransition] = useTransition();
  const [open, setOpen] = useState(false);
  const lastSuccessOrderRef = useRef<any>(null);
  const [tabValue, setTabValue] = useState('year');

  useImperativeHandle(ref, () => ({
    show: (newSubscribe: API.Subscribe, tabValue: string) => {
      setSubscribe(newSubscribe);
      setParams((prev) => ({
        ...prev,
        subscribe_id: newSubscribe.id,
        quantity: tabValue === 'year' ? 12 : 1,
      }));
      setTabValue(tabValue);
      setOpen(true);
    },
    hide: () => {
      setOpen(false);
      setSubscribe(undefined);
      setParams({ quantity: 1, subscribe_id: 0, payment: -1, coupon: '' });
    },
  }));

  const { data: order } = useQuery({
    enabled: !!subscribe?.id && params.quantity !== undefined,
    queryKey: ['preCreateOrder', subscribe?.id, params.quantity],
    queryFn: async () => {
      try {
        console.log('123123', subscribe);
        const { data } = await preCreateOrder({
          ...params,
          subscribe_id: subscribe?.id as number,
          quantity: params.quantity as number,
        } as API.PurchaseOrderRequest);
        const result = data.data;
        if (result) {
          lastSuccessOrderRef.current = result;
        }
        return result;
      } catch (error) {
        if (lastSuccessOrderRef.current) {
          return lastSuccessOrderRef.current;
        }
        throw error;
      }
    },
  });

  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 purchase(params as API.PurchaseOrderRequest);
        const orderNo = response.data.data?.order_no;
        if (orderNo) {
          await getUserInfo();
          router.push(`/payment?order_no=${orderNo}`);
        }
      } catch (error) {
        /* empty */
      }
    });
  }, [params, router, getUserInfo]);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className='px-4 sm:h-auto sm:w-[675px] sm:py-12'>
        <DialogHeader className='p-6 pb-0'>
          <DialogTitle className='sr-only'>{t('buySubscription')}</DialogTitle>
        </DialogHeader>
        <div>
          <div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
            {t('purchaseTitle')}
          </div>
          <div>
            <Tabs
              defaultValue='year'
              className='mt-8 text-center sm:mt-6'
              value={tabValue}
              onValueChange={(val) => {
                if (val === 'year') {
                  handleChange('quantity', 12);
                } else if (val === 'month') {
                  handleChange('quantity', 1);
                }
                setTabValue(val);
              }}
            >
              <TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
                {tabValue === 'year' ? (
                  <span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
                    {t('discount20')}
                    {/* 小三角箭头 */}
                    <span
                      className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
                      style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
                    />
                  </span>
                ) : null}
                <TabsTrigger
                  className='rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
                  value='year'
                >
                  {t('yearlyPlan')}
                </TabsTrigger>
                <TabsTrigger
                  className='rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
                  value='month'
                >
                  {t('monthlyPlan')}
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
          <div className={'px-4 sm:px-0'}>
            <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
              titleClassName={'text-[15px] text-[#225BA9]'}
              value={params.payment!}
              onChange={(value) => {
                handleChange('payment', value);
              }}
            />
          </div>
          <div className='mt-8 flex items-center justify-center'>
            <Button
              className='w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] text-xl hover:bg-[#225BA9] hover:text-white'
              disabled={loading}
              onClick={handleSubmit}
            >
              {loading && <LoaderCircle className='mr-2 animate-spin' />}
              {t('buyNow')}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
});

Purchase.displayName = 'Purchase';
export default Purchase;