add persistence to cart

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

@@ -58,15 +58,23 @@ type Schema = z.infer<typeof formSchemaAssigned>
 type AssignedProps = {
   onSubmit: (value: any) => void | Promise<void>
   courses: Promise<{ hits: Course[] }>
+  defaultValues?: { enrollments: object[] }
 }
 
-export function Assigned({ courses, onSubmit }: AssignedProps) {
+export function Assigned({ courses, onSubmit, defaultValues }: AssignedProps) {
   const wizard = useWizard()
   const { orgid } = useParams()
   const form = useForm({
     resolver: zodResolver(formSchemaAssigned),
-    defaultValues: { enrollments: [emptyRow] }
+    defaultValues: {
+      enrollments: defaultValues?.enrollments?.map((e: any) => ({
+        ...e,
+        scheduled_for: e.scheduled_for ? new Date(e.scheduled_for) : undefined
+      })) || [emptyRow]
+    }
   })
+
+  console.log(defaultValues)
   const { formState, control, handleSubmit, setValue } = form
   const { fields, remove, append } = useFieldArray({
     control,

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

@@ -38,6 +38,7 @@ const emptyRow = {
 type BulkProps = {
   onSubmit: (value: any) => void | Promise<void>
   courses: Promise<{ hits: Course[] }>
+  defaultValues?: { items: object[] }
 }
 
 const item = z.object({
@@ -68,11 +69,11 @@ const formSchema = z.object({
 
 type Schema = z.infer<typeof formSchema>
 
-export function Bulk({ courses, onSubmit }: BulkProps) {
+export function Bulk({ courses, onSubmit, defaultValues }: BulkProps) {
   const wizard = useWizard()
   const form = useForm({
     resolver: zodResolver(formSchema),
-    defaultValues: { items: [emptyRow] }
+    defaultValues: { items: defaultValues?.items || [emptyRow] }
   })
   const {
     formState,

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

@@ -1,42 +1,99 @@
+import { useForm, Controller } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { ErrorMessage } from '@hookform/error-message'
+import z from 'zod'
+
 import { Button } from '@repo/ui/components/ui/button'
 import { Label } from '@repo/ui/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@repo/ui/components/ui/radio-group'
 import { Separator } from '@repo/ui/components/ui/separator'
 
-export function Payment() {
+import { useWizard } from '@/components/wizard'
+
+const formSchema = z.object({
+  payment_method: z.enum(['PIX', 'BANK_SLIP', 'CREDIT_CARD'], {
+    error: 'Escolha uma forma de pagamento'
+  })
+})
+
+type Schema = z.infer<typeof formSchema>
+
+type PaymentProps = {
+  onSubmit: (value: any) => void | Promise<void>
+  defaultValues?: object
+}
+
+export function Payment({ onSubmit, defaultValues }: PaymentProps) {
+  const wizard = useWizard()
+  const { control, handleSubmit } = useForm<Schema>({
+    defaultValues: {
+      payment_method: '' as any,
+      ...defaultValues
+    },
+    resolver: zodResolver(formSchema)
+  })
+
+  const onSubmit_ = async (data: Schema) => {
+    await onSubmit(data)
+    wizard('review')
+  }
+
   return (
-    <>
-      <RadioGroup
-        defaultValue="comfortable"
-        className="lg:flex *:p-5 *:border *:rounded-xl *:flex-1 *:cursor-pointer
-                 *:bg-accent/25 *:has-[button[data-state=checked]]:bg-accent"
-      >
-        <Label>
-          <RadioGroupItem value="default" id="r1" />
-          <span>Pix</span>
-        </Label>
-        <Label>
-          <RadioGroupItem value="comfortable" id="r2" />
-          <span>Boleto bancário</span>
-        </Label>
-        <Label>
-          <RadioGroupItem value="compact" id="r3" />
-          <span>Cartão de crédito</span>
-        </Label>
-      </RadioGroup>
+    <form onSubmit={handleSubmit(onSubmit_)} className="space-y-6">
+      <Controller
+        name="payment_method"
+        control={control}
+        render={({ field: { name, value, onChange }, formState }) => (
+          <div className="space-y-1.5">
+            <RadioGroup
+              value={value}
+              onValueChange={onChange}
+              className="lg:flex gap-3
+                       *:p-5 *:border *:rounded-xl *:flex-1
+                       *:cursor-pointer *:bg-accent/25
+                       *:has-[button[data-state=checked]]:bg-accent
+            "
+            >
+              <Label>
+                <RadioGroupItem value="PIX" />
+                <span>Pix</span>
+              </Label>
+
+              <Label>
+                <RadioGroupItem value="BANK_SLIP" />
+                <span>Boleto bancário</span>
+              </Label>
+
+              <Label>
+                <RadioGroupItem value="CREDIT_CARD" />
+                <span>Cartão de crédito</span>
+              </Label>
+            </RadioGroup>
+
+            <ErrorMessage
+              errors={formState.errors}
+              name={name}
+              render={({ message }) => (
+                <p className="text-destructive text-sm">{message}</p>
+              )}
+            />
+          </div>
+        )}
+      />
 
       <Separator />
 
-      <div className="flex justify-end">
+      <div className="flex justify-end gap-4 *:cursor-pointer">
         <Button
-          type="submit"
-          className="cursor-pointer"
-          // disabled={formState.isSubmitting}
+          type="button"
+          variant="link"
+          className="text-black dark:text-white"
+          onClick={() => wizard('cart')}
         >
-          {/*{formState.isSubmitting && <Spinner />}*/}
-          Continuar
+          Voltar
         </Button>
+        <Button type="submit">Continuar</Button>
       </div>
-    </>
+    </form>
   )
 }

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

@@ -0,0 +1,87 @@
+import { useWizard } from '@/components/wizard'
+import { Currency } from '@repo/ui/components/currency'
+import { Button } from '@repo/ui/components/ui/button'
+import { Separator } from '@repo/ui/components/ui/separator'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@repo/ui/components/ui/table'
+
+type ReviewProps = {
+  state: any
+}
+
+export function Review({ state }: ReviewProps) {
+  const wizard = useWizard()
+  // console.log(state)
+
+  return (
+    <>
+      <Table>
+        <TableHeader>
+          <TableRow className="pointer-events-none">
+            <TableHead>Curso</TableHead>
+            <TableHead>Quantidade</TableHead>
+            <TableHead>Valor unit.</TableHead>
+            <TableHead>Total</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {state?.cart?.items?.map(({ course, quantity }, index) => {
+            return (
+              <TableRow key={index}>
+                <TableCell>{course.name}</TableCell>
+                <TableCell>{quantity}</TableCell>
+                <TableCell>
+                  <Currency>{course.unit_price}</Currency>
+                </TableCell>
+                <TableCell>
+                  <Currency>{course.unit_price * quantity}</Currency>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+        <TableFooter>
+          <TableRow className="pointer-events-none">
+            <TableCell className="text-right" colSpan={3}>
+              Subtotal
+            </TableCell>
+            <TableCell>..</TableCell>
+          </TableRow>
+          <TableRow className="pointer-events-none">
+            <TableCell className="text-right" colSpan={3}>
+              Descontos
+            </TableCell>
+            <TableCell>..</TableCell>
+          </TableRow>
+          <TableRow className="pointer-events-none">
+            <TableCell className="text-right" colSpan={3}>
+              Total
+            </TableCell>
+            <TableCell>..</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+
+      <Separator />
+
+      <div className="flex justify-end gap-4 *:cursor-pointer">
+        <Button
+          type="button"
+          variant="link"
+          className="text-black dark:text-white"
+          onClick={() => wizard('payment')}
+        >
+          Voltar
+        </Button>
+        <Button type="submit">Confirmar</Button>
+      </div>
+    </>
+  )
+}

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>