修复 sku 缺失显示问题

src/components/composites/purchase/long/center.tsx

@@ -3,24 +3,67 @@ import {FormField} from '@/components/ui/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import FormOption from '@/components/composites/purchase/option'
 import {Schema} from '@/components/composites/purchase/long/form'
-import {useWatch} from 'react-hook-form'
+import {useEffect} from 'react'
+import {useFormContext, useWatch} from 'react-hook-form'
 import {Card} from '@/components/ui/card'
 import {BillingMethodField} from '../shared/billing-method-field'
 import {FeatureList} from '../shared/feature-list'
 import {NumberStepperField} from '../shared/number-stepper-field'
-import {getPurchaseSkuPrice} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
 
-export default function Center({priceMap, expireList, liveList}: {
-  priceMap: Map<string, string>
-  liveList: string[]
-  expireList: string[]
+export default function Center({skuData}: {
+  skuData: PurchaseSkuData
 }) {
+  const {setValue} = useFormContext<Schema>()
   const type = useWatch<Schema>({name: 'type'}) as Schema['type']
+  const live = useWatch<Schema>({name: 'live'}) as Schema['live']
   const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
+  const {modeList, priceMap} = skuData
+  const liveList = type === '1'
+    ? getAvailablePurchaseLives(skuData, {mode: type, expire})
+    : getAvailablePurchaseLives(skuData, {mode: type})
+  const expireList = type === '1'
+    ? getAvailablePurchaseExpires(skuData, {mode: type, live})
+    : []
+
+  useEffect(() => {
+    const nextType = modeList.includes(type) ? type : modeList[0]
+
+    if (!nextType) {
+      return
+    }
+
+    if (nextType !== type) {
+      setValue('type', nextType)
+      return
+    }
+
+    const nextLiveList = nextType === '1'
+      ? getAvailablePurchaseLives(skuData, {mode: nextType, expire})
+      : getAvailablePurchaseLives(skuData, {mode: nextType})
+    const nextLive = nextLiveList.includes(live) ? live : nextLiveList[0]
+
+    if (nextLive && nextLive !== live) {
+      setValue('live', nextLive)
+      return
+    }
+
+    if (nextType === '2') {
+      if (expire !== '0') {
+        setValue('expire', '0')
+      }
+      return
+    }
+
+    const nextExpireList = getAvailablePurchaseExpires(skuData, {mode: nextType, live: nextLive})
+    if (!nextExpireList.includes(expire) && nextExpireList[0]) {
+      setValue('expire', nextExpireList[0])
+    }
+  }, [expire, live, modeList, setValue, skuData, type])
 
   return (
     <Card className="flex-auto p-6 flex flex-col gap-6 relative">
-      <BillingMethodField expireList={expireList} timeDailyLimit={100}/>
+      <BillingMethodField modeList={modeList} timeDailyLimit={100}/>
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
@@ -31,13 +74,27 @@ export default function Center({priceMap, expireList, liveList}: {
           <RadioGroup
             id={id}
             value={field.value}
-            onValueChange={field.onChange}
+            onValueChange={(value) => {
+              field.onChange(value)
+
+              if (type !== '1') {
+                return
+              }
+
+              const nextExpireList = getAvailablePurchaseExpires(skuData, {mode: type, live: value})
+              if (!nextExpireList.includes(expire) && nextExpireList[0]) {
+                setValue('expire', nextExpireList[0])
+              }
+            }}
             className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
             {liveList.map((live) => {
+              const priceExpire = type === '1' && !hasPurchaseSku(skuData, {mode: type, live, expire})
+                ? getAvailablePurchaseExpires(skuData, {mode: type, live})[0] || '0'
+                : String(expire)
               const price = getPurchaseSkuPrice(priceMap, {
                 mode: type,
                 live,
-                expire: String(expire),
+                expire: priceExpire,
               })
               return (
                 <FormOption
@@ -58,7 +115,18 @@ export default function Center({priceMap, expireList, liveList}: {
       {type === '1' && (
         <FormField className="space-y-4" name="expire" label="套餐时效">
           {({id, field}) => (
-            <RadioGroup id={id} value={field.value} onValueChange={field.onChange} className="flex gap-4 flex-wrap">
+            <RadioGroup
+              id={id}
+              value={field.value}
+              onValueChange={(value) => {
+                field.onChange(value)
+
+                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
+                if (!nextLiveList.includes(live) && nextLiveList[0]) {
+                  setValue('live', nextLiveList[0])
+                }
+              }}
+              className="flex gap-4 flex-wrap">
               {expireList.map(day => (
                 <FormOption
                   key={day}