iupdate

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

@@ -1,14 +1,18 @@
 import { Fragment } from 'react'
-import { PlusIcon, Trash2Icon } from 'lucide-react'
+import { MinusIcon, PlusIcon, Trash2Icon } from 'lucide-react'
 import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
 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 { Input } from '@repo/ui/components/ui/input'
 import { Button } from '@repo/ui/components/ui/button'
-import { InputGroup, InputGroupInput } from '@repo/ui/components/ui/input-group'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from '@repo/ui/components/ui/input-group'
 import { Separator } from '@repo/ui/components/ui/separator'
 
 import { Cell } from '../_.$orgid.enrollments.add/route'
@@ -36,7 +40,7 @@ const item = z.object({
       { error: 'Escolha um curso' }
     )
     .required(),
-  quantity: z.number()
+  quantity: z.number().min(1)
 })
 
 const formSchema = z.object({
@@ -50,7 +54,8 @@ export function Bulk({ courses }: BulkProps) {
     resolver: zodResolver(formSchema),
     defaultValues: { items: [emptyRow] }
   })
-  const { formState, control, handleSubmit } = form
+  const { formState, control, handleSubmit, register, setValue, getValues } =
+    form
   const { fields, remove, append } = useFieldArray({
     control,
     name: 'items'
@@ -67,21 +72,26 @@ export function Bulk({ courses }: BulkProps) {
   return (
     <Form {...form}>
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-        <div className="grid w-full gap-1.5 lg:grid-cols-[repeat(3,1fr)_auto]">
+        <div className="grid w-full gap-1.5 lg:grid-cols-[4fr_2fr_2fr_2fr_auto]">
           {/* Header */}
           <>
             <Cell>Curso</Cell>
             <Cell>Quantidade</Cell>
             <Cell>Valor unit.</Cell>
+            <Cell>Total</Cell>
             <Cell>{/**/}</Cell>
           </>
 
           {/* Rows */}
           {fields.map((field, index) => {
-            const course = items?.[index]?.course
+            const item = items?.[index] || { course: {}, quantity: 1 }
+            const { course, quantity } = item
 
             return (
               <Fragment key={field.id}>
+                {/* Separator only for mobile */}
+                {index >= 1 && <div className="h-2.5 lg:hidden"></div>}
+
                 <Controller
                   control={control}
                   name={`items.${index}.course`}
@@ -108,18 +118,79 @@ export function Bulk({ courses }: BulkProps) {
                   )}
                 />
 
-                <Input type="number" defaultValue={1} />
                 <InputGroup>
-                  {/*<InputGroupAddon>
-                    <InputGroupText>R$</InputGroupText>
-                  </InputGroupAddon>*/}
+                  <InputGroupInput
+                    type="number"
+                    min={1}
+                    defaultValue={1}
+                    className="no-spinner"
+                    {...register(`items.${index}.quantity`, {
+                      valueAsNumber: true,
+                      onBlur: (e) => {
+                        const value = Number(e.target.value)
 
+                        if (!value || value < 1) {
+                          setValue(`items.${index}.quantity`, 1)
+                        }
+                      }
+                    })}
+                  />
+
+                  <InputGroupAddon align="inline-end">
+                    <InputGroupButton
+                      type="button"
+                      size="icon-xs"
+                      className="border cursor-pointer"
+                      onClick={() => {
+                        const quantity =
+                          getValues(`items.${index}.quantity`) || 1
+                        setValue(
+                          `items.${index}.quantity`,
+                          Math.max(1, quantity - 1)
+                        )
+                      }}
+                    >
+                      <MinusIcon />
+                    </InputGroupButton>
+                  </InputGroupAddon>
+
+                  <InputGroupAddon align="inline-end">
+                    <InputGroupButton
+                      type="button"
+                      size="icon-xs"
+                      className="border cursor-pointer"
+                      onClick={() => {
+                        const quantity =
+                          getValues(`items.${index}.quantity`) || 1
+                        setValue(`items.${index}.quantity`, quantity + 1)
+                      }}
+                    >
+                      <PlusIcon />
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                </InputGroup>
+
+                <InputGroup>
                   <InputGroupInput
                     className="pointer-events-none"
+                    readOnly
                     value={currency.format(course?.unit_price || 0)}
                   />
                 </InputGroup>
 
+                <InputGroup>
+                  <InputGroupInput
+                    className="pointer-events-none"
+                    readOnly
+                    value={currency.format(
+                      (course?.unit_price || 0) *
+                        (Number.isFinite(quantity) && quantity > 0
+                          ? quantity
+                          : 1)
+                    )}
+                  />
+                </InputGroup>
+
                 <Button
                   tabIndex={-1}
                   variant="destructive"