add zustard

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.buy/route.tsx

@@ -1,8 +1,8 @@
 import type { Route } from './+types/route'
 
-import { useState } from 'react'
+import { useFetcher } from 'react-router'
 import { Link } from 'react-router'
-import { useLocalStorageState, useMount } from 'ahooks'
+import { useMount } from 'ahooks'
 import { BookSearchIcon, CircleCheckBigIcon, WalletIcon } from 'lucide-react'
 
 import {
@@ -25,39 +25,17 @@ import { createSearch } from '@repo/util/meili'
 import { cloudflareContext } from '@repo/auth/context'
 import { Label } from '@repo/ui/components/ui/label'
 import { Skeleton } from '@repo/ui/components/skeleton'
-import type { PaymentMethod } from '@repo/ui/routes/orders/data'
 
-import { Wizard, WizardStep } from '@/components/wizard'
 import { Step, StepItem, StepSeparator } from '@/components/step'
-import type { Course, Enrollment } from '../_.$orgid.enrollments.add/data'
+import { Wizard, WizardStep } from '@/components/wizard'
+import type { Course } from '../_.$orgid.enrollments.add/data'
+import { Bulk } from './bulk'
+import { Payment } from './payment'
 import { Assigned } from './assigned'
-import { Bulk, type Item } from './bulk'
-import { Payment, type CreditCard } from './payment'
 import { Review } from './review'
-import type { Coupon } from './discount'
-import { useFetcher } from 'react-router'
 
-export type WizardState = {
-  index: number
-  kind: 'bulk' | 'assigned'
-  items: Item[]
-  enrollments: Enrollment[]
-  coupon?: Coupon
-  installments?: number
-  payment_method?: PaymentMethod
-  credit_card?: CreditCard
-}
-
-const emptyWizard: WizardState = {
-  index: 0,
-  kind: 'bulk',
-  items: [],
-  enrollments: [],
-  coupon: undefined,
-  payment_method: undefined,
-  installments: undefined,
-  credit_card: undefined
-}
+import { useWizardStore, type WizardState } from './store'
+import { useState } from 'react'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Comprar matrículas' }]
@@ -87,20 +65,7 @@ export default function Route({
 }: Route.ComponentProps) {
   const fetcher = useFetcher()
   const [mounted, setMounted] = useState(false)
-  const [state, setState] = useLocalStorageState<WizardState>('wizard_cart', {
-    defaultValue: emptyWizard
-  })
-  const index = state.index
-  const kind = state.kind
-  const props = {
-    ...state,
-    courses,
-    onSubmit: async (data: any) =>
-      setState((prev) => ({
-        ...(prev ?? emptyWizard),
-        ...data
-      }))
-  }
+  const { index, kind, setIndex, setKind } = useWizardStore()
 
   const onSubmit = async (data: WizardState) => {
     await fetcher.submit(JSON.stringify(data), {
@@ -157,15 +122,7 @@ export default function Route({
               </StepItem>
             </Step>
 
-            <Wizard
-              index={index}
-              onChange={(nextIndex) =>
-                setState((prev) => ({
-                  ...(prev ?? emptyWizard),
-                  index: nextIndex
-                }))
-              }
-            >
+            <Wizard index={index} onChange={setIndex}>
               {/* Cart */}
               <WizardStep name="cart">
                 <Label
@@ -187,40 +144,27 @@ export default function Route({
                   <Switch
                     checked={kind === 'assigned'}
                     onCheckedChange={(checked) =>
-                      setState((prev) => ({
-                        ...(prev ?? emptyWizard),
-                        kind: checked ? 'assigned' : 'bulk'
-                      }))
+                      setKind(checked ? 'assigned' : 'bulk')
                     }
                     className="cursor-pointer"
                   />
                 </Label>
 
-                {kind == 'assigned' ? (
-                  <Assigned {...props} />
+                {kind === 'assigned' ? (
+                  <Assigned courses={courses} />
                 ) : (
-                  <Bulk {...props} />
+                  <Bulk courses={courses} />
                 )}
               </WizardStep>
 
               {/* Payment */}
               <WizardStep name="payment">
-                <Payment
-                  state={state}
-                  payment_method={state.payment_method}
-                  credit_card={state.credit_card}
-                  onSubmit={(data: any) => {
-                    setState((prev) => ({
-                      ...(prev ?? emptyWizard),
-                      ...data
-                    }))
-                  }}
-                />
+                <Payment />
               </WizardStep>
 
               {/* Review */}
               <WizardStep name="review">
-                <Review state={state} onSubmit={onSubmit} />
+                <Review onSubmit={onSubmit} />
               </WizardStep>
             </Wizard>
           </CardContent>