add discount

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

@@ -4,6 +4,7 @@ import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
 import { useParams } from 'react-router'
 import { ErrorMessage } from '@hookform/error-message'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
 
 import { Form } from '@repo/ui/components/ui/form'
 import {
@@ -31,6 +32,9 @@ import { ScheduledForInput } from '../_.$orgid.enrollments.add/scheduled-for'
 import { Cell } from '../_.$orgid.enrollments.add/route'
 import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
 import { UserPicker } from '../_.$orgid.enrollments.add/user-picker'
+import { Summary } from './bulk'
+import { applyDiscount } from './discount'
+import { currency } from './utils'
 
 const emptyRow = {
   user: undefined,
@@ -38,6 +42,18 @@ const emptyRow = {
   scheduled_for: undefined
 }
 
+const formSchema_ = formSchema.extend({
+  coupon: z
+    .object({
+      code: z.string(),
+      type: z.enum(['FIXED', 'PERCENT']),
+      amount: z.number().positive()
+    })
+    .optional()
+})
+
+type Schema = z.infer<typeof formSchema_>
+
 type AssignedProps = {
   onSubmit: (value: any) => void | Promise<void>
   courses: Promise<{ hits: Course[] }>
@@ -46,10 +62,10 @@ type AssignedProps = {
 export function Assigned({ courses, onSubmit }: AssignedProps) {
   const { orgid } = useParams()
   const form = useForm({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(formSchema_),
     defaultValues: { enrollments: [emptyRow] }
   })
-  const { formState, control, handleSubmit } = form
+  const { formState, control, handleSubmit, setValue } = form
   const { fields, remove, append } = useFieldArray({
     control,
     name: 'enrollments'
@@ -58,10 +74,15 @@ export function Assigned({ courses, onSubmit }: AssignedProps) {
     control,
     name: 'enrollments'
   })
+  const coupon = useWatch({ control, name: 'coupon' })
   const subtotal = items.reduce(
     (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 })
@@ -70,7 +91,7 @@ export function Assigned({ courses, onSubmit }: AssignedProps) {
     return hits
   }
 
-  const onSubmit_ = async (data: any) => {
+  const onSubmit_ = async (data: Schema) => {
     await onSubmit(data)
   }
 
@@ -193,7 +214,7 @@ export function Assigned({ courses, onSubmit }: AssignedProps) {
                     className="pointer-events-none"
                     tabIndex={-1}
                     readOnly
-                    value={currency.format(unit_price)}
+                    value={currency(unit_price)}
                   />
                 </InputGroup>
 
@@ -226,69 +247,7 @@ export function Assigned({ courses, onSubmit }: AssignedProps) {
             </Button>
           </div>
 
-          {/* Subtotal */}
-          <>
-            <div className="col-start-3 flex items-center justify-end text-sm font-medium max-lg:hidden">
-              Subtotal
-            </div>
-
-            <InputGroup>
-              <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
-                Subtotal
-              </InputGroupAddon>
-              <InputGroupInput
-                name="subtotal"
-                value={currency.format(subtotal)}
-                className="pointer-events-none text-muted-foreground"
-                readOnly
-              />
-            </InputGroup>
-          </>
-
-          {/* Discount */}
-          <>
-            <div className="col-start-3 flex items-center justify-end text-sm font-medium max-lg:hidden">
-              Cupom
-            </div>
-            <InputGroup>
-              <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
-                Cupom
-              </InputGroupAddon>
-              <InputGroupInput
-                name="discount"
-                value={currency.format(0)}
-                className="pointer-events-none text-muted-foreground"
-                readOnly
-              />
-              <InputGroupAddon align="inline-end">
-                <Button
-                  variant="outline"
-                  className="text-xs cursor-pointer h-6 px-2"
-                  type="button"
-                >
-                  Adicionar
-                </Button>
-              </InputGroupAddon>
-            </InputGroup>
-          </>
-
-          {/* Total */}
-          <>
-            <div className="col-start-3 flex items-center justify-end text-sm font-medium max-lg:hidden">
-              Total
-            </div>
-            <InputGroup>
-              <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
-                Total
-              </InputGroupAddon>
-              <InputGroupInput
-                name="total"
-                value={currency.format(subtotal)}
-                className="pointer-events-none text-muted-foreground"
-                readOnly
-              />
-            </InputGroup>
-          </>
+          <Summary {...{ total, subtotal, discount, coupon, setValue }} />
         </div>
 
         <Separator />
@@ -307,8 +266,3 @@ export function Assigned({ courses, onSubmit }: AssignedProps) {
     </Form>
   )
 }
-
-const currency = new Intl.NumberFormat('pt-BR', {
-  style: 'currency',
-  currency: 'BRL'
-})