add steps

api.saladeaula.digital/app/routes/orders/checkout.py

@@ -52,6 +52,12 @@ class Item(BaseModel):
     quantity: int = 1
 
 
+class Coupon(BaseModel):
+    code: str
+    type: Literal['PERCENT', 'FIXED']
+    amount: Decimal
+
+
 class Checkout(BaseModel):
     model_config = ConfigDict(str_strip_whitespace=True)
 
@@ -60,6 +66,7 @@ class Checkout(BaseModel):
     address: Address
     payment_method: Literal['PIX', 'CREDIT_CARD', 'BANK_SLIP', 'MANUAL']
     items: tuple[Item, ...]
+    coupon: Coupon | None = None
     user: User | None = None
     org_id: UUID4 | str | None = None
     user_id: UUID4 | str | None = None

apps/admin.saladeaula.digital/app/components/step.tsx

@@ -0,0 +1,80 @@
+import { type ReactNode, createContext, useContext } from 'react'
+import { type LucideIcon } from 'lucide-react'
+
+import { cn } from '@repo/ui/lib/utils'
+
+type StepContextValue = {
+  activeIndex: number
+}
+
+const StepContext = createContext<StepContextValue | null>(null)
+
+function useStep() {
+  const ctx = useContext(StepContext)
+  if (!ctx) {
+    throw new Error('StepItem must be used inside <Step />')
+  }
+  return ctx
+}
+
+export function Step({
+  children,
+  className,
+  activeIndex
+}: {
+  children: ReactNode
+  className?: string
+  activeIndex: number
+}) {
+  return (
+    <StepContext.Provider value={{ activeIndex }}>
+      <ul
+        className={cn(
+          'flex max-lg:flex-col lg:items-center gap-1.5 lg:gap-4',
+          className
+        )}
+      >
+        {children}
+      </ul>
+    </StepContext.Provider>
+  )
+}
+
+export function StepSeparator() {
+  return (
+    <div className="max-lg:w-px max-lg:ml-[19px] h-3 lg:h-px lg:w-full bg-foreground/25" />
+  )
+}
+
+export function StepItem({
+  children,
+  icon: Icon,
+  index
+}: {
+  children: ReactNode
+  icon: LucideIcon
+  index: number
+}) {
+  const { activeIndex } = useStep()
+  const active = index === activeIndex
+
+  return (
+    <li
+      className={cn(
+        'flex items-center gap-2 flex-none text-muted-foreground',
+        active && 'dark:text-white'
+      )}
+    >
+      <div
+        className={cn(
+          'p-3 rounded-full',
+          active ? 'bg-primary text-white' : 'bg-accent'
+        )}
+      >
+        <Icon className="size-4" />
+      </div>
+
+      <div className="text-sm">{children}</div>
+    </li>
+  )
+}

apps/admin.saladeaula.digital/app/components/wizard.tsx

@@ -0,0 +1,76 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+  type ReactElement
+} from 'react'
+
+type WizardContextProps = (name: string) => void
+
+const WizardContext = createContext<WizardContextProps | null>(null)
+
+export function useWizard(): WizardContextProps {
+  const ctx = useContext(WizardContext)
+
+  if (!ctx) {
+    throw new Error('useWizard must be used within <Wizard />')
+  }
+
+  return ctx
+}
+
+type WizardProps = {
+  children: ReactNode
+  index?: number
+  onChange?: (index: number) => void
+}
+
+export function Wizard({
+  children,
+  index: initIndex = 0,
+  onChange
+}: WizardProps) {
+  const [index, setIndex] = useState<number>(initIndex)
+
+  const components = useMemo(
+    () => React.Children.toArray(children) as ReactElement<WizardStepProps>[],
+    [children]
+  )
+
+  const steps = useMemo(
+    () => components.map((child) => child.props.name),
+    [components]
+  )
+
+  const child = components[index]
+
+  const onChange_ = useCallback<WizardContextProps>(
+    (name) => {
+      const nextIndex = steps.findIndex((n) => n === name)
+
+      if (nextIndex >= 0) {
+        setIndex(nextIndex)
+        onChange?.(nextIndex)
+      }
+    },
+    [steps]
+  )
+
+  return (
+    <WizardContext.Provider value={onChange_}>
+      {React.isValidElement(child) ? React.cloneElement(child) : child}
+    </WizardContext.Provider>
+  )
+}
+
+export type WizardStepProps = {
+  name: string
+  children: React.ReactNode
+}
+
+export function WizardStep({ children }: WizardStepProps) {
+  return <>{children}</>
+}

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

@@ -58,11 +58,13 @@ export async function loader({ params, context, request }: Route.LoaderArgs) {
   })
 
   return {
-    data: enrollments
+    enrollments
   }
 }
 
-export default function Route({ loaderData: { data } }: Route.ComponentProps) {
+export default function Route({
+  loaderData: { enrollments }
+}: Route.ComponentProps) {
   const { orgid } = useParams()
   const [searchParams, setSearchParams] = useSearchParams()
   const [selectedRows, setSelectedRows] = useState<Enrollment[]>([])
@@ -80,7 +82,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
         </p>
       </div>
 
-      <Await resolve={data}>
+      <Await resolve={enrollments}>
         {({ hits, page = 1, hitsPerPage, totalHits }) => (
           <DataTable
             sort={[{ id: 'created_at', desc: true }]}
@@ -88,9 +90,9 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
             data={hits as Enrollment[]}
             columnPinning={{ left: ['select'], right: ['action'] }}
             pageIndex={page - 1}
-            pageSize={hitsPerPage}
+            pageSize={Number(hitsPerPage)}
             setSelectedRows={setSelectedRows}
-            rowCount={totalHits}
+            rowCount={Number(totalHits)}
             columnVisibilityInit={{
               created_at: true,
               completed_at: false,

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

@@ -35,6 +35,7 @@ import { UserPicker } from '../_.$orgid.enrollments.add/user-picker'
 import { Summary } from './bulk'
 import { applyDiscount } from './discount'
 import { currency } from './utils'
+import { useWizard } from '@/components/wizard'
 
 const emptyRow = {
   user: undefined,
@@ -42,7 +43,7 @@ const emptyRow = {
   scheduled_for: undefined
 }
 
-const formSchema_ = formSchema.extend({
+const formSchemaAssigned = formSchema.extend({
   coupon: z
     .object({
       code: z.string(),
@@ -52,7 +53,7 @@ const formSchema_ = formSchema.extend({
     .optional()
 })
 
-type Schema = z.infer<typeof formSchema_>
+type Schema = z.infer<typeof formSchemaAssigned>
 
 type AssignedProps = {
   onSubmit: (value: any) => void | Promise<void>
@@ -60,9 +61,10 @@ type AssignedProps = {
 }
 
 export function Assigned({ courses, onSubmit }: AssignedProps) {
+  const wizard = useWizard()
   const { orgid } = useParams()
   const form = useForm({
-    resolver: zodResolver(formSchema_),
+    resolver: zodResolver(formSchemaAssigned),
     defaultValues: { enrollments: [emptyRow] }
   })
   const { formState, control, handleSubmit, setValue } = form
@@ -79,10 +81,6 @@ export function Assigned({ courses, onSubmit }: AssignedProps) {
     (acc, { course }) => acc + (course?.unit_price || 0),
     0
   )
-  const discount = coupon
-    ? applyDiscount(subtotal, coupon.amount, coupon.type) * -1
-    : 0
-  const total = subtotal > 0 ? subtotal + discount : 0
 
   const onSearch = async (search: string) => {
     const params = new URLSearchParams({ q: search })
@@ -93,6 +91,7 @@ export function Assigned({ courses, onSubmit }: AssignedProps) {
 
   const onSubmit_ = async (data: Schema) => {
     await onSubmit(data)
+    wizard('payment')
   }
 
   return (
@@ -247,7 +246,8 @@ export function Assigned({ courses, onSubmit }: AssignedProps) {
             </Button>
           </div>
 
-          <Summary {...{ total, subtotal, discount, coupon, setValue }} />
+          {/* Summary */}
+          <Summary {...{ subtotal, coupon, setValue }} />
         </div>
 
         <Separator />

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

@@ -29,6 +29,7 @@ import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
 import { MAX_ITEMS, type Course } from '../_.$orgid.enrollments.add/data'
 import { Discount, applyDiscount } from './discount'
 import { currency } from './utils'
+import { useWizard } from '@/components/wizard'
 
 const emptyRow = {
   course: undefined
@@ -68,6 +69,7 @@ const formSchema = z.object({
 type Schema = z.infer<typeof formSchema>
 
 export function Bulk({ courses, onSubmit }: BulkProps) {
+  const wizard = useWizard()
   const form = useForm({
     resolver: zodResolver(formSchema),
     defaultValues: { items: [emptyRow] }
@@ -97,13 +99,10 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
         (Number.isFinite(quantity) && quantity > 0 ? quantity : 1),
     0
   )
-  const discount = coupon
-    ? applyDiscount(subtotal, coupon.amount, coupon.type) * -1
-    : 0
-  const total = subtotal > 0 ? subtotal + discount : 0
 
   const onSubmit_ = async (data: Schema) => {
     await onSubmit(data)
+    wizard('payment')
   }
 
   return (
@@ -284,7 +283,7 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
             </Button>
           </div>
 
-          <Summary {...{ total, subtotal, discount, coupon, setValue }} />
+          <Summary {...{ subtotal, coupon, setValue }} />
         </div>
 
         <Separator />
@@ -306,23 +305,20 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
 
 type SummaryProps = {
   subtotal: number
-  total: number
-  discount: number
   coupon?: {
     code: string
     type: 'FIXED' | 'PERCENT'
     amount: number
   }
-  setValue: UseFormSetValue<Schema>
+  setValue: UseFormSetValue<any>
 }
 
-export function Summary({
+export function Summary({ subtotal, coupon, setValue }: SummaryProps) {
-  subtotal,
+  const discount = coupon
-  total,
+    ? applyDiscount(subtotal, coupon.amount, coupon.type) * -1
-  discount,
+    : 0
-  coupon,
+  const total = subtotal > 0 ? subtotal + discount : 0
-  setValue
+
-}: SummaryProps) {
   return (
     <>
       {/* Subtotal */}

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

@@ -0,0 +1,42 @@
+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() {
+  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>
+
+      <Separator />
+
+      <div className="flex justify-end">
+        <Button
+          type="submit"
+          className="cursor-pointer"
+          // disabled={formState.isSubmitting}
+        >
+          {/*{formState.isSubmitting && <Spinner />}*/}
+          Continuar
+        </Button>
+      </div>
+    </>
+  )
+}

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
+            <Step className="mb-6" activeIndex={index}>
-              className="flex flex-row items-center justify-between cursor-pointer
+              <StepItem index={0} icon={BookSearchIcon}>
-                       bg-accent/50 hover:bg-accent rounded-lg border p-4
+                Escolher cursos
-                       dark:has-aria-checked:border-blue-900
+              </StepItem>
-                       dark:has-aria-checked:bg-blue-950"
+              <StepSeparator />
-            >
+              <StepItem index={1} icon={WalletIcon}>
-              <div className="grid gap-1.5 font-normal">
+                Pagamento
-                <p className="text-sm leading-none font-medium">
+              </StepItem>
-                  Adicionar colaboradores
+              <StepSeparator />
-                </p>
+              <StepItem index={2} icon={CircleCheckBigIcon}>
-                <p className="text-muted-foreground text-sm">
+                Revisão &amp; confirmação
-                  Você pode adicionar agora os colaboradores que irão fazer o
+              </StepItem>
-                  curso ou deixar isso para depois.
+            </Step>
-                </p>
-              </div>
-              <Switch
-                checked={state === 'assigned'}
-                onCheckedChange={toggle}
-                className="cursor-pointer"
-              />
-            </Label>
 
-            {state == 'assigned' ? (
+            <Wizard onChange={setIndex}>
-              <Assigned {...props} />
+              <WizardStep name="courses">
-            ) : (
+                <Label
-              <Bulk {...props} />
+                  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>

package-lock.json

@@ -3315,6 +3315,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -7522,6 +7554,7 @@
         "@radix-ui/react-navigation-menu": "^1.2.14",
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-progress": "^1.1.8",
+        "@radix-ui/react-radio-group": "^1.3.8",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",

packages/ui/package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",

packages/ui/src/components/ui/radio-group.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }