add discount
This commit is contained in:
@@ -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,101 +284,7 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
|
||||
</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
|
||||
tabIndex={-1}
|
||||
name="subtotal"
|
||||
value={currency(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">
|
||||
{coupon ? (
|
||||
<span className="flex gap-1">
|
||||
Descontos
|
||||
<Kbd>
|
||||
<Abbr maxLen={8}>{coupon.code}</Abbr>
|
||||
</Kbd>
|
||||
</span>
|
||||
) : (
|
||||
<>Cupom</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<InputGroup>
|
||||
<InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
|
||||
{coupon ? <>Descontos</> : <>Cupom</>}
|
||||
</InputGroupAddon>
|
||||
|
||||
<InputGroupInput
|
||||
name="discount"
|
||||
value={currency(discount)}
|
||||
tabIndex={-1}
|
||||
className="pointer-events-none text-muted-foreground"
|
||||
readOnly
|
||||
/>
|
||||
|
||||
<InputGroupAddon align="inline-end">
|
||||
{coupon ? (
|
||||
<InputGroupButton
|
||||
size="icon-xs"
|
||||
className="cursor-pointer"
|
||||
tabIndex={-1}
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setValue('coupon', undefined)
|
||||
}}
|
||||
>
|
||||
<XIcon />
|
||||
</InputGroupButton>
|
||||
) : (
|
||||
<Discount
|
||||
disabled={subtotal === 0}
|
||||
onChange={({ sk, discount_amount, discount_type }) => {
|
||||
setValue('coupon', {
|
||||
code: sk,
|
||||
amount: discount_amount,
|
||||
type: discount_type
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</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"
|
||||
tabIndex={-1}
|
||||
value={currency(total)}
|
||||
className="pointer-events-none text-muted-foreground"
|
||||
readOnly
|
||||
/>
|
||||
</InputGroup>
|
||||
</>
|
||||
<Summary {...{ total, subtotal, discount, coupon, setValue }} />
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
@@ -391,25 +304,122 @@ export function Bulk({ courses, onSubmit }: BulkProps) {
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
type SummaryProps = {
|
||||
subtotal: number
|
||||
total: number
|
||||
discount: number
|
||||
coupon?: {
|
||||
code: string
|
||||
type: 'FIXED' | 'PERCENT'
|
||||
amount: number
|
||||
}
|
||||
|
||||
const amount =
|
||||
discountType === 'PERCENT'
|
||||
? (subtotal * discountAmount) / 100
|
||||
: discountAmount
|
||||
|
||||
return Math.min(amount, subtotal)
|
||||
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">
|
||||
Subtotal
|
||||
</div>
|
||||
|
||||
<InputGroup>
|
||||
<InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
|
||||
Subtotal
|
||||
</InputGroupAddon>
|
||||
<InputGroupInput
|
||||
tabIndex={-1}
|
||||
name="subtotal"
|
||||
value={currency(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">
|
||||
{coupon ? (
|
||||
<span className="flex gap-1">
|
||||
Descontos
|
||||
<Kbd>
|
||||
<Abbr maxLen={8}>{coupon.code}</Abbr>
|
||||
</Kbd>
|
||||
</span>
|
||||
) : (
|
||||
<>Cupom</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<InputGroup>
|
||||
<InputGroupAddon className="border-r pr-2.5 w-1/3 lg:hidden justify-end">
|
||||
{coupon ? <>Descontos</> : <>Cupom</>}
|
||||
</InputGroupAddon>
|
||||
|
||||
<InputGroupInput
|
||||
name="discount"
|
||||
value={currency(discount)}
|
||||
tabIndex={-1}
|
||||
className="pointer-events-none text-muted-foreground"
|
||||
readOnly
|
||||
/>
|
||||
|
||||
<InputGroupAddon align="inline-end">
|
||||
{coupon ? (
|
||||
<InputGroupButton
|
||||
size="icon-xs"
|
||||
className="cursor-pointer"
|
||||
tabIndex={-1}
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setValue('coupon', undefined)
|
||||
}}
|
||||
>
|
||||
<XIcon />
|
||||
</InputGroupButton>
|
||||
) : (
|
||||
<Discount
|
||||
disabled={subtotal === 0}
|
||||
onChange={({ sk, discount_amount, discount_type }) => {
|
||||
setValue('coupon', {
|
||||
code: sk,
|
||||
amount: discount_amount,
|
||||
type: discount_type
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</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"
|
||||
tabIndex={-1}
|
||||
value={currency(total)}
|
||||
className="pointer-events-none text-muted-foreground"
|
||||
readOnly
|
||||
/>
|
||||
</InputGroup>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user