add persistence to cart

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

@@ -1,7 +1,8 @@
 import type { Route } from './+types/route'
 
+import { useState } from 'react'
 import { Link } from 'react-router'
-import { useToggle } from 'ahooks'
+import { useLocalStorageState, useMount, useToggle } from 'ahooks'
 import { BookSearchIcon, CircleCheckBigIcon, WalletIcon } from 'lucide-react'
 
 import {
@@ -30,13 +31,28 @@ import type { Course } from '../_.$orgid.enrollments.add/data'
 import { Assigned } from './assigned'
 import { Bulk } from './bulk'
 import { Payment } from './payment'
-import { useState } from 'react'
+import { Review } from './review'
+import { Skeleton } from '@repo/ui/components/skeleton'
+
+type WizardState = {
+  index: number
+  kind: 'bulk' | 'assigned'
+  cart: any
+  payment: any
+}
+
+const emptyWizard: WizardState = {
+  index: 0,
+  kind: 'bulk',
+  cart: {},
+  payment: {}
+}
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Comprar matrículas' }]
 }
 
-export async function loader({ params, context, request }: Route.LoaderArgs) {
+export async function loader({ context }: Route.LoaderArgs) {
   const cloudflare = context.get(cloudflareContext)
   const courses = createSearch<Course>({
     index: 'saladeaula_courses',
@@ -57,15 +73,29 @@ export async function action({ request }: Route.ActionArgs) {
 export default function Route({
   loaderData: { courses }
 }: Route.ComponentProps) {
-  const [index, setIndex] = useState(0)
-  const [state, { toggle }] = useToggle('bulk', 'assigned')
-
-  const onSubmit = async (data: any) => {
-    // await new Promise((r) => setTimeout(r, 2000))
-    console.log(data)
+  const [mounted, setMounted] = useState(false)
+  const [state, setState] = useLocalStorageState<WizardState>('wizard_cart', {
+    defaultValue: emptyWizard
+  })
+  const index = state.index
+  const kind = state.kind
+  const props = {
+    courses,
+    defaultValues: state.cart,
+    onSubmit: async (data: any) =>
+      setState((prev) => ({
+        ...(prev ?? emptyWizard),
+        cart: data
+      }))
   }
 
-  const props = { courses, onSubmit }
+  useMount(() => {
+    setMounted(true)
+  })
+
+  if (!mounted) {
+    return <Skeleton />
+  }
 
   return (
     <div className="space-y-2.5">
@@ -107,8 +137,17 @@ export default function Route({
               </StepItem>
             </Step>
 
-            <Wizard onChange={setIndex}>
-              <WizardStep name="courses">
+            <Wizard
+              index={index}
+              onChange={(nextIndex) =>
+                setState((prev) => ({
+                  ...(prev ?? emptyWizard),
+                  index: nextIndex
+                }))
+              }
+            >
+              {/* Cart */}
+              <WizardStep name="cart">
                 <Label
                   className="flex flex-row items-center justify-between cursor-pointer
                            bg-accent/50 hover:bg-accent rounded-lg border p-4
@@ -125,21 +164,40 @@ export default function Route({
                     </p>
                   </div>
                   <Switch
-                    checked={state === 'assigned'}
-                    onCheckedChange={toggle}
+                    checked={kind === 'assigned'}
+                    onCheckedChange={() =>
+                      setState((prev) => ({
+                        ...(prev ?? emptyWizard),
+                        kind: kind === 'bulk' ? 'assigned' : 'bulk'
+                      }))
+                    }
                     className="cursor-pointer"
                   />
                 </Label>
 
-                {state == 'assigned' ? (
+                {kind == 'assigned' ? (
                   <Assigned {...props} />
                 ) : (
                   <Bulk {...props} />
                 )}
               </WizardStep>
 
+              {/* Payment */}
               <WizardStep name="payment">
-                <Payment />
+                <Payment
+                  defaultValues={state.payment}
+                  onSubmit={(data: any) => {
+                    setState((prev) => ({
+                      ...(prev ?? emptyWizard),
+                      payment: data
+                    }))
+                  }}
+                />
+              </WizardStep>
+
+              {/* Review */}
+              <WizardStep name="review">
+                <Review state={state} />
               </WizardStep>
             </Wizard>
           </CardContent>