add abbr

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

@@ -20,6 +20,8 @@ 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'
 
 const emptyRow = {
   course: undefined
@@ -49,7 +51,7 @@ const formSchema = z.object({
   items: z.array(item).min(1).max(MAX_ITEMS),
   coupon: z
     .object({
-      coupon: z.string(),
+      code: z.string(),
       type: z.enum(['FIXED', 'PERCENT']),
       amount: z.number().positive()
     })
@@ -219,7 +221,7 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
                     tabIndex={-1}
                     className="pointer-events-none"
                     readOnly
-                    value={currency.format(course?.unit_price || 0)}
+                    value={currency(course?.unit_price || 0)}
                   />
                 </InputGroup>
 
@@ -233,7 +235,7 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
                     tabIndex={-1}
                     className="pointer-events-none"
                     readOnly
-                    value={currency.format(
+                    value={currency(
                       (course?.unit_price || 0) *
                         (Number.isFinite(quantity) && quantity > 0
                           ? quantity
@@ -288,7 +290,7 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
               <InputGroupInput
                 tabIndex={-1}
                 name="subtotal"
-                value={currency.format(subtotal)}
+                value={currency(subtotal)}
                 className="pointer-events-none text-muted-foreground"
                 readOnly
               />
@@ -298,7 +300,16 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
           {/* Discount */}
           <>
             <div className="col-start-3 flex items-center justify-end text-sm font-medium max-lg:hidden">
-              {coupon ? <>Descontos</> : <>Cupom</>}
+              {coupon ? (
+                <span className="flex gap-1">
+                  Descontos
+                  <Kbd>
+                    <Abbr maxLen={8}>{coupon.code}</Abbr>
+                  </Kbd>
+                </span>
+              ) : (
+                <>Cupom</>
+              )}
             </div>
 
             <InputGroup>
@@ -308,7 +319,7 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
 
               <InputGroupInput
                 name="discount"
-                value={currency.format(discount * -1)}
+                value={currency(discount * -1)}
                 tabIndex={-1}
                 className="pointer-events-none text-muted-foreground"
                 readOnly
@@ -331,7 +342,7 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
                     disabled={subtotal === 0}
                     onChange={({ sk, discount_amount, discount_type }) => {
                       setValue('coupon', {
-                        coupon: sk,
+                        code: sk,
                         amount: discount_amount,
                         type: discount_type
                       })
@@ -354,7 +365,7 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
               <InputGroupInput
                 name="total"
                 tabIndex={-1}
-                value={currency.format(total)}
+                value={currency(total)}
                 className="pointer-events-none text-muted-foreground"
                 readOnly
               />
@@ -377,11 +388,12 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
   )
 }
 
-const currency = new Intl.NumberFormat('pt-BR', {
+function currency(value: number) {
+  return new Intl.NumberFormat('pt-BR', {
     style: 'currency',
     currency: 'BRL'
-})
-
+  }).format(value)
+}
 function applyDiscount(
   subtotal: number,
   discountAmount: number,

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

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes } from 'react'
+import type { ButtonHTMLAttributes } from 'react'
 import { useRequest, useToggle } from 'ahooks'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -28,10 +28,11 @@ export const formSchema = z.object({
 export type Schema = z.infer<typeof formSchema>
 
 interface DiscountProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'value' | 'onChange'
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'onChange'
 > {
   onChange?: (value: any) => void
+  disabled?: boolean
 }
 
 export function Discount({ onChange, ...props }: DiscountProps) {