update billing

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

@@ -5,14 +5,15 @@ 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 { Button } from '@repo/ui/components/ui/button'
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput
 } from '@repo/ui/components/ui/input-group'
+import { Input } from '@repo/ui/components/ui/input'
+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 { Cell } from '../_.$orgid.enrollments.add/route'
@@ -70,6 +71,13 @@ export function Bulk({ courses }: BulkProps) {
     control,
     name: 'items'
   })
+  const subtotal = items.reduce(
+    (acc, { course, quantity }) =>
+      acc +
+      (course?.unit_price || 0) *
+        (Number.isFinite(quantity) && quantity > 0 ? quantity : 1),
+    0
+  )
 
   const onSubmit = async (data: Schema) => {
     console.log(data)
@@ -98,6 +106,7 @@ export function Bulk({ courses }: BulkProps) {
                 {/* Separator only for mobile */}
                 {index >= 1 && <div className="h-2.5 lg:hidden"></div>}
 
+                {/* Course */}
                 <Controller
                   control={control}
                   name={`items.${index}.course`}
@@ -128,7 +137,12 @@ export function Bulk({ courses }: BulkProps) {
                   )}
                 />
 
+                {/* Quantity */}
                 <InputGroup>
+                  <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
+                    Qtd.
+                  </InputGroupAddon>
+
                   <InputGroupInput
                     type="number"
                     min={1}
@@ -182,7 +196,11 @@ export function Bulk({ courses }: BulkProps) {
                   </InputGroupAddon>
                 </InputGroup>
 
+                {/* Unit price */}
                 <InputGroup>
+                  <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
+                    Valor unit.
+                  </InputGroupAddon>
                   <InputGroupInput
                     tabIndex={-1}
                     className="pointer-events-none"
@@ -191,7 +209,12 @@ export function Bulk({ courses }: BulkProps) {
                   />
                 </InputGroup>
 
+                {/* Total */}
                 <InputGroup>
+                  <InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
+                    Total
+                  </InputGroupAddon>
+
                   <InputGroupInput
                     tabIndex={-1}
                     className="pointer-events-none"
@@ -205,6 +228,7 @@ export function Bulk({ courses }: BulkProps) {
                   />
                 </InputGroup>
 
+                {/* Action */}
                 <Button
                   tabIndex={-1}
                   variant="destructive"
@@ -217,24 +241,90 @@ export function Bulk({ courses }: BulkProps) {
               </Fragment>
             )
           })}
-        </div>
 
-        <Button
-          type="button"
-          onClick={() => {
-            // @ts-ignore
-            append(emptyRow, { shouldFocus: false })
-            queueMicrotask(() => {
-              setFocus(`items.${fields.length}.course`)
-            })
-          }}
-          className="cursor-pointer"
-          disabled={fields.length == MAX_ITEMS}
-          variant="outline"
-          size="sm"
-        >
-          <PlusIcon /> Adicionar
-        </Button>
+          {/* Add button */}
+          <div className="max-lg:mb-2.5">
+            <Button
+              type="button"
+              onClick={() => {
+                // @ts-ignore
+                append(emptyRow, { shouldFocus: false })
+                queueMicrotask(() => {
+                  setFocus(`items.${fields.length}.course`)
+                })
+              }}
+              className="cursor-pointer"
+              variant="outline"
+              size="sm"
+            >
+              <PlusIcon /> Adicionar
+            </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>
+          </>
+        </div>
 
         <Separator />