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'
-})

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

@@ -1,6 +1,12 @@
 import { Fragment } from 'react'
 import { MinusIcon, PlusIcon, Trash2Icon, XIcon } from 'lucide-react'
-import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
+import {
+  useForm,
+  useFieldArray,
+  Controller,
+  useWatch,
+  type UseFormSetValue
+} from 'react-hook-form'
 import { ErrorMessage } from '@hookform/error-message'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
@@ -15,13 +21,14 @@ import { Form } from '@repo/ui/components/ui/form'
 import { Button } from '@repo/ui/components/ui/button'
 import { Separator } from '@repo/ui/components/ui/separator'
 import { Spinner } from '@repo/ui/components/ui/spinner'
+import { Kbd } from '@repo/ui/components/ui/kbd'
+import { Abbr } from '@repo/ui/components/abbr'
 
 import { Cell } from '../_.$orgid.enrollments.add/route'
 import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
 import { MAX_ITEMS, type Course } from '../_.$orgid.enrollments.add/data'
-import { Discount } from './discount'
-import { Kbd } from '@repo/ui/components/ui/kbd'
-import { Abbr } from '@repo/ui/components/abbr'
+import { Discount, applyDiscount } from './discount'
+import { currency } from './utils'
 
 const emptyRow = {
   course: undefined
@@ -93,7 +100,7 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
   const discount = coupon
     ? applyDiscount(subtotal, coupon.amount, coupon.type) * -1
     : 0
-  const total = subtotal > 0 ? subtotal - discount : 0
+  const total = subtotal > 0 ? subtotal + discount : 0
 
   const onSubmit_ = async (data: Schema) => {
     await onSubmit(data)
@@ -277,6 +284,47 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
             </Button>
           </div>
 
+          <Summary {...{ total, subtotal, discount, coupon, setValue }} />
+        </div>
+
+        <Separator />
+
+        <div className="flex justify-end">
+          <Button
+            type="submit"
+            className="cursor-pointer"
+            disabled={formState.isSubmitting}
+          >
+            {formState.isSubmitting && <Spinner />}
+            Continuar
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+type SummaryProps = {
+  subtotal: number
+  total: number
+  discount: number
+  coupon?: {
+    code: string
+    type: 'FIXED' | 'PERCENT'
+    amount: number
+  }
+  setValue: UseFormSetValue<Schema>
+}
+
+export function Summary({
+  subtotal,
+  total,
+  discount,
+  coupon,
+  setValue
+}: SummaryProps) {
+  return (
+    <>
       {/* Subtotal */}
       <>
         <div className="col-start-3 flex items-center justify-end text-sm font-medium max-lg:hidden">
@@ -372,44 +420,6 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
           />
         </InputGroup>
       </>
-        </div>
-
-        <Separator />
-
-        <div className="flex justify-end">
-          <Button
-            type="submit"
-            className="cursor-pointer"
-            disabled={formState.isSubmitting}
-          >
-            {formState.isSubmitting && <Spinner />}
-            Continuar
-          </Button>
-        </div>
-      </form>
-    </Form>
+    </>
   )
 }
-
-function currency(value: number) {
-  return new Intl.NumberFormat('pt-BR', {
-    style: 'currency',
-    currency: 'BRL'
-  }).format(value)
-}
-function applyDiscount(
-  subtotal: number,
-  discountAmount: number,
-  discountType: 'FIXED' | 'PERCENT'
-) {
-  if (subtotal <= 0) {
-    return 0
-  }
-
-  const amount =
-    discountType === 'PERCENT'
-      ? (subtotal * discountAmount) / 100
-      : discountAmount
-
-  return Math.min(amount, subtotal)
-}

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

@@ -134,3 +134,20 @@ export function Discount({ onChange, ...props }: DiscountProps) {
     </Popover>
   )
 }
+
+export function applyDiscount(
+  subtotal: number,
+  discountAmount: number,
+  discountType: 'FIXED' | 'PERCENT'
+) {
+  if (subtotal <= 0) {
+    return 0
+  }
+
+  const amount =
+    discountType === 'PERCENT'
+      ? (subtotal * discountAmount) / 100
+      : discountAmount
+
+  return Math.min(amount, subtotal)
+}

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.buy/utils.ts

@@ -0,0 +1,6 @@
+export function currency(value: number) {
+  return new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL'
+  }).format(value)
+}