review

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

@@ -1,5 +1,10 @@
 import { Fragment } from 'react'
-import { Trash2Icon, PlusIcon, CircleQuestionMarkIcon } from 'lucide-react'
+import {
+  Trash2Icon,
+  PlusIcon,
+  CircleQuestionMarkIcon,
+  ArrowRightIcon
+} from 'lucide-react'
 import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
 import { useParams } from 'react-router'
 import { ErrorMessage } from '@hookform/error-message'
@@ -58,7 +63,7 @@ type Schema = z.infer<typeof formSchemaAssigned>
 type AssignedProps = {
   onSubmit: (value: any) => void | Promise<void>
   courses: Promise<{ hits: Course[] }>
-  defaultValues?: { enrollments: object[] }
+  defaultValues?: { enrollments: object[]; coupon?: object }
 }
 
 export function Assigned({ courses, onSubmit, defaultValues }: AssignedProps) {
@@ -67,6 +72,7 @@ export function Assigned({ courses, onSubmit, defaultValues }: AssignedProps) {
   const form = useForm({
     resolver: zodResolver(formSchemaAssigned),
     defaultValues: {
+      coupon: defaultValues?.coupon || {},
       enrollments: defaultValues?.enrollments?.map((e: any) => ({
         ...e,
         scheduled_for: e.scheduled_for ? new Date(e.scheduled_for) : undefined
@@ -74,7 +80,6 @@ export function Assigned({ courses, onSubmit, defaultValues }: AssignedProps) {
     }
   })
 
-  console.log(defaultValues)
   const { formState, control, handleSubmit, setValue } = form
   const { fields, remove, append } = useFieldArray({
     control,
@@ -263,11 +268,12 @@ export function Assigned({ courses, onSubmit, defaultValues }: AssignedProps) {
         <div className="flex justify-end">
           <Button
             type="submit"
+            variant="secondary"
             className="cursor-pointer"
             disabled={formState.isSubmitting}
           >
             {formState.isSubmitting && <Spinner />}
-            Continuar
+            Continuar <ArrowRightIcon />
           </Button>
         </div>
       </form>

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

@@ -1,5 +1,11 @@
 import { Fragment } from 'react'
-import { MinusIcon, PlusIcon, Trash2Icon, XIcon } from 'lucide-react'
+import {
+  ArrowRightIcon,
+  MinusIcon,
+  PlusIcon,
+  Trash2Icon,
+  XIcon
+} from 'lucide-react'
 import {
   useForm,
   useFieldArray,
@@ -38,7 +44,7 @@ const emptyRow = {
 type BulkProps = {
   onSubmit: (value: any) => void | Promise<void>
   courses: Promise<{ hits: Course[] }>
-  defaultValues?: { items: object[] }
+  defaultValues?: { items: object[]; coupon?: object }
 }
 
 const item = z.object({
@@ -73,7 +79,10 @@ export function Bulk({ courses, onSubmit, defaultValues }: BulkProps) {
   const wizard = useWizard()
   const form = useForm({
     resolver: zodResolver(formSchema),
-    defaultValues: { items: defaultValues?.items || [emptyRow] }
+    defaultValues: {
+      items: defaultValues?.items || [emptyRow],
+      coupon: defaultValues?.coupon || {}
+    }
   })
   const {
     formState,
@@ -292,11 +301,12 @@ export function Bulk({ courses, onSubmit, defaultValues }: BulkProps) {
         <div className="flex justify-end">
           <Button
             type="submit"
+            variant="secondary"
             className="cursor-pointer"
             disabled={formState.isSubmitting}
           >
             {formState.isSubmitting && <Spinner />}
-            Continuar
+            Continuar <ArrowRightIcon />
           </Button>
         </div>
       </form>

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

@@ -2,6 +2,7 @@ import { useForm, Controller } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { ErrorMessage } from '@hookform/error-message'
 import z from 'zod'
+import { ArrowRightIcon } from 'lucide-react'
 
 import { Button } from '@repo/ui/components/ui/button'
 import { Label } from '@repo/ui/components/ui/label'
@@ -39,7 +40,7 @@ export function Payment({ onSubmit, defaultValues }: PaymentProps) {
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit_)} className="space-y-6">
+    <form onSubmit={handleSubmit(onSubmit_)} className="space-y-4">
       <Controller
         name="payment_method"
         control={control}
@@ -83,7 +84,7 @@ export function Payment({ onSubmit, defaultValues }: PaymentProps) {
 
       <Separator />
 
-      <div className="flex justify-end gap-4 *:cursor-pointer">
+      <div className="flex justify-between gap-4 *:cursor-pointer">
         <Button
           type="button"
           variant="link"
@@ -92,7 +93,9 @@ export function Payment({ onSubmit, defaultValues }: PaymentProps) {
         >
           Voltar
         </Button>
-        <Button type="submit">Continuar</Button>
+        <Button type="submit" variant="secondary">
+          Continuar <ArrowRightIcon />
+        </Button>
       </div>
     </form>
   )

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

@@ -1,4 +1,3 @@
-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'
@@ -12,13 +11,29 @@ import {
   TableRow
 } from '@repo/ui/components/ui/table'
 
+import { useWizard } from '@/components/wizard'
+
+import { applyDiscount } from './discount'
+
 type ReviewProps = {
   state: any
 }
 
 export function Review({ state }: ReviewProps) {
   const wizard = useWizard()
-  // console.log(state)
+  const { coupon, items } = state.cart || { items: [], coupon: {} }
+  const subtotal =
+    items?.reduce(
+      (acc, { course, quantity }) =>
+        acc +
+        (course?.unit_price || 0) *
+          (Number.isFinite(quantity) && quantity > 0 ? quantity : 1),
+      0
+    ) || 0
+  const discount = coupon
+    ? applyDiscount(subtotal, coupon.amount, coupon.type) * -1
+    : 0
+  const total = subtotal > 0 ? subtotal + discount : 0
 
   return (
     <>
@@ -32,7 +47,7 @@ export function Review({ state }: ReviewProps) {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {state?.cart?.items?.map(({ course, quantity }, index) => {
+          {items?.map(({ course, quantity }, index) => {
             return (
               <TableRow key={index}>
                 <TableCell>{course.name}</TableCell>
@@ -52,26 +67,32 @@ export function Review({ state }: ReviewProps) {
             <TableCell className="text-right" colSpan={3}>
               Subtotal
             </TableCell>
-            <TableCell>..</TableCell>
+            <TableCell>
+              <Currency>{subtotal}</Currency>
+            </TableCell>
           </TableRow>
           <TableRow className="pointer-events-none">
             <TableCell className="text-right" colSpan={3}>
               Descontos
             </TableCell>
-            <TableCell>..</TableCell>
+            <TableCell>
+              <Currency>{discount}</Currency>
+            </TableCell>
           </TableRow>
           <TableRow className="pointer-events-none">
             <TableCell className="text-right" colSpan={3}>
               Total
             </TableCell>
-            <TableCell>..</TableCell>
+            <TableCell>
+              <Currency>{total}</Currency>
+            </TableCell>
           </TableRow>
         </TableFooter>
       </Table>
 
       <Separator />
 
-      <div className="flex justify-end gap-4 *:cursor-pointer">
+      <div className="flex justify-between gap-4 *:cursor-pointer">
         <Button
           type="button"
           variant="link"
@@ -80,7 +101,9 @@ export function Review({ state }: ReviewProps) {
         >
           Voltar
         </Button>
-        <Button type="submit">Confirmar</Button>
+        <Button type="submit">
+          Pagar <Currency>{total}</Currency>
+        </Button>
       </div>
     </>
   )