111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
import { Currency } from '@repo/ui/components/currency'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import { Separator } from '@repo/ui/components/ui/separator'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableFooter,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow
|
|
} from '@repo/ui/components/ui/table'
|
|
|
|
import { useWizard } from '@/components/wizard'
|
|
|
|
import { applyDiscount } from './discount'
|
|
|
|
type ReviewProps = {
|
|
state: any
|
|
}
|
|
|
|
export function Review({ state }: ReviewProps) {
|
|
const wizard = useWizard()
|
|
const { coupon, items } = state || { items: [], coupon: {} }
|
|
const subtotal =
|
|
items?.reduce(
|
|
(acc, { course, quantity }) =>
|
|
acc +
|
|
(course?.unit_price || 0) *
|
|
(Number.isFinite(quantity) && quantity > 0 ? quantity : 1),
|
|
0
|
|
) || 0
|
|
const discount = coupon
|
|
? applyDiscount(subtotal, coupon.amount, coupon.type) * -1
|
|
: 0
|
|
const total = subtotal > 0 ? subtotal + discount : 0
|
|
|
|
return (
|
|
<>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="pointer-events-none">
|
|
<TableHead>Curso</TableHead>
|
|
<TableHead>Quantidade</TableHead>
|
|
<TableHead>Valor unit.</TableHead>
|
|
<TableHead>Total</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{items?.map(({ course, quantity }, index) => {
|
|
return (
|
|
<TableRow key={index}>
|
|
<TableCell>{course.name}</TableCell>
|
|
<TableCell>{quantity}</TableCell>
|
|
<TableCell>
|
|
<Currency>{course.unit_price}</Currency>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{course.unit_price * quantity}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
<TableFooter>
|
|
<TableRow className="pointer-events-none">
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Subtotal
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{subtotal}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="pointer-events-none">
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Descontos
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{discount}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="pointer-events-none">
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Total
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{total}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableFooter>
|
|
</Table>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex justify-between gap-4 *:cursor-pointer">
|
|
<Button
|
|
type="button"
|
|
variant="link"
|
|
className="text-black dark:text-white"
|
|
onClick={() => wizard('payment')}
|
|
>
|
|
Voltar
|
|
</Button>
|
|
<Button type="submit">
|
|
Pagar <Currency>{total}</Currency>
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|