add steps

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

@@ -2,6 +2,7 @@ import type { Route } from './+types/route'
 
 import { Link } from 'react-router'
 import { useToggle } from 'ahooks'
+import { BookSearchIcon, CircleCheckBigIcon, WalletIcon } from 'lucide-react'
 
 import {
   Card,
@@ -23,9 +24,13 @@ import { createSearch } from '@repo/util/meili'
 import { cloudflareContext } from '@repo/auth/context'
 import { Label } from '@repo/ui/components/ui/label'
 
+import { Wizard, WizardStep } from '@/components/wizard'
+import { Step, StepItem, StepSeparator } from '@/components/step'
+import type { Course } from '../_.$orgid.enrollments.add/data'
 import { Assigned } from './assigned'
 import { Bulk } from './bulk'
-import type { Course } from '../_.$orgid.enrollments.add/data'
+import { Payment } from './payment'
+import { useState } from 'react'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Comprar matrículas' }]
@@ -52,10 +57,11 @@ 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))
+    // await new Promise((r) => setTimeout(r, 2000))
     console.log(data)
   }
 
@@ -87,33 +93,55 @@ export default function Route({
           </CardHeader>
 
           <CardContent className="space-y-4">
-            <Label
-              className="flex flex-row items-center justify-between cursor-pointer
-                       bg-accent/50 hover:bg-accent rounded-lg border p-4
-                       dark:has-aria-checked:border-blue-900
-                       dark:has-aria-checked:bg-blue-950"
-            >
-              <div className="grid gap-1.5 font-normal">
-                <p className="text-sm leading-none font-medium">
-                  Adicionar colaboradores
-                </p>
-                <p className="text-muted-foreground text-sm">
-                  Você pode adicionar agora os colaboradores que irão fazer o
-                  curso ou deixar isso para depois.
-                </p>
-              </div>
-              <Switch
-                checked={state === 'assigned'}
-                onCheckedChange={toggle}
-                className="cursor-pointer"
-              />
-            </Label>
+            <Step className="mb-6" activeIndex={index}>
+              <StepItem index={0} icon={BookSearchIcon}>
+                Escolher cursos
+              </StepItem>
+              <StepSeparator />
+              <StepItem index={1} icon={WalletIcon}>
+                Pagamento
+              </StepItem>
+              <StepSeparator />
+              <StepItem index={2} icon={CircleCheckBigIcon}>
+                Revisão &amp; confirmação
+              </StepItem>
+            </Step>
 
-            {state == 'assigned' ? (
-              <Assigned {...props} />
-            ) : (
-              <Bulk {...props} />
-            )}
+            <Wizard onChange={setIndex}>
+              <WizardStep name="courses">
+                <Label
+                  className="flex flex-row items-center justify-between cursor-pointer
+                           bg-accent/50 hover:bg-accent rounded-lg border p-4
+                           dark:has-aria-checked:border-blue-900
+                           dark:has-aria-checked:bg-blue-950"
+                >
+                  <div className="grid gap-1.5 font-normal">
+                    <p className="text-sm leading-none font-medium">
+                      Adicionar colaboradores
+                    </p>
+                    <p className="text-muted-foreground text-sm">
+                      Você pode adicionar agora os colaboradores que irão fazer
+                      o curso ou deixar isso para depois.
+                    </p>
+                  </div>
+                  <Switch
+                    checked={state === 'assigned'}
+                    onCheckedChange={toggle}
+                    className="cursor-pointer"
+                  />
+                </Label>
+
+                {state == 'assigned' ? (
+                  <Assigned {...props} />
+                ) : (
+                  <Bulk {...props} />
+                )}
+              </WizardStep>
+
+              <WizardStep name="payment">
+                <Payment />
+              </WizardStep>
+            </Wizard>
           </CardContent>
         </Card>
       </div>