465 lines
12 KiB
TypeScript
465 lines
12 KiB
TypeScript
import type { Route } from './+types/route'
|
|
|
|
import { formatCEP } from '@brazilian-utils/brazilian-utils'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useRequest } from 'ahooks'
|
|
import {
|
|
AlertCircleIcon,
|
|
ArrowLeftRightIcon,
|
|
HelpCircleIcon
|
|
} from 'lucide-react'
|
|
import { useEffect } from 'react'
|
|
import { useForm } from 'react-hook-form'
|
|
import { Link } from 'react-router'
|
|
import { z } from 'zod'
|
|
|
|
import { Currency } from '@repo/ui/components/currency'
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator
|
|
} from '@repo/ui/components/ui/breadcrumb'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle
|
|
} from '@repo/ui/components/ui/card'
|
|
import {
|
|
Item,
|
|
ItemContent,
|
|
ItemGroup,
|
|
ItemTitle
|
|
} from '@repo/ui/components/ui/item'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableFooter,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow
|
|
} from '@repo/ui/components/ui/table'
|
|
import { request as req } from '@repo/util/request'
|
|
|
|
import { Abbr } from '@repo/ui/components/abbr'
|
|
import { Badge } from '@repo/ui/components/ui/badge'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import { Kbd } from '@repo/ui/components/ui/kbd'
|
|
import { cn } from '@repo/ui/lib/utils'
|
|
import {
|
|
labels,
|
|
statuses,
|
|
type Order as Order_
|
|
} from '@repo/ui/routes/orders/data'
|
|
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger
|
|
} from '@repo/ui/components/ui/dialog'
|
|
import { Separator } from '@repo/ui/components/ui/separator'
|
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
|
import {
|
|
CreditCard,
|
|
creditCardSchema,
|
|
type CreditCard as CreditCardProps
|
|
} from '../_.$orgid.enrollments.buy/payment'
|
|
import type { Address } from '../_.$orgid.enrollments.buy/review'
|
|
import { useWizardStore } from '../_.$orgid.enrollments.buy/store'
|
|
|
|
export function meta() {
|
|
return [
|
|
{
|
|
title: 'Detalhes do pagamento'
|
|
}
|
|
]
|
|
}
|
|
|
|
const PaymentMethodComponent = {
|
|
PIX: PixPaymentMethod,
|
|
BANK_SLIP: BankSlipPaymentMethod,
|
|
CREDIT_CARD: CreditCardPaymentMethod
|
|
}
|
|
|
|
type Item = {
|
|
id: string
|
|
name: string
|
|
unit_price: number
|
|
quantity: number
|
|
}
|
|
|
|
type User = {
|
|
id: string
|
|
name: string
|
|
}
|
|
|
|
type Invoice = {
|
|
invoice_id: string
|
|
secure_url: string
|
|
}
|
|
|
|
type Order = Order_ & {
|
|
items: Item[]
|
|
interest_amount: number
|
|
due_date: string
|
|
created_at: string
|
|
subtotal: number
|
|
discount: number
|
|
address: Address
|
|
credit_card?: CreditCardProps
|
|
coupon?: string
|
|
installments?: number
|
|
created_by?: User
|
|
invoice: Invoice
|
|
}
|
|
|
|
export async function loader({ context, request, params }: Route.LoaderArgs) {
|
|
const order = (await req({
|
|
url: `/orders/${params.id}`,
|
|
context,
|
|
request
|
|
}).then((r) => r.json())) as Order
|
|
|
|
return { order }
|
|
}
|
|
|
|
export default function Route({ loaderData: { order } }: Route.ComponentProps) {
|
|
const { reset } = useWizardStore()
|
|
const {
|
|
coupon,
|
|
address,
|
|
total,
|
|
payment_method,
|
|
interest_amount,
|
|
discount,
|
|
invoice,
|
|
subtotal,
|
|
items = []
|
|
} = order
|
|
|
|
const Component =
|
|
(PaymentMethodComponent as Record<string, React.ComponentType<any>>)[
|
|
payment_method
|
|
] ?? UnknownPaymentMethod
|
|
|
|
useEffect(() => {
|
|
reset()
|
|
}, [])
|
|
|
|
return (
|
|
<div className="space-y-2.5">
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild>
|
|
<Link to="../payments">Pagamentos</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Detalhes do pagamento</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
|
|
<Card className="lg:max-w-4xl mx-auto">
|
|
<CardHeader className="gap-0">
|
|
<CardTitle className="text-2xl">Detalhes do pagamento</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-4">
|
|
<ItemGroup className="grid lg:grid-cols-2 gap-4">
|
|
<Item variant="outline">
|
|
<ItemContent>
|
|
<ItemTitle>Endereço de cobrança</ItemTitle>
|
|
<ul className="text-muted-foreground text-sm leading-normal font-normal text-balance">
|
|
{address?.address1}
|
|
{address?.address2 ? <>, {address?.address2}</> : null}
|
|
<br />
|
|
{address?.neighborhood}
|
|
<br />
|
|
{address?.city}, {address?.state}
|
|
<br />
|
|
{formatCEP(address?.postcode)}
|
|
</ul>
|
|
</ItemContent>
|
|
</Item>
|
|
|
|
<Item variant="outline" className="items-start">
|
|
<ItemContent>
|
|
<ItemTitle>Forma de pagamento</ItemTitle>
|
|
<div className="text-muted-foreground text-sm leading-normal font-normal text-balance">
|
|
{Component && (
|
|
<Component {...order} invoice_id={invoice['invoice_id']} />
|
|
)}
|
|
</div>
|
|
</ItemContent>
|
|
</Item>
|
|
</ItemGroup>
|
|
|
|
<Table className="pointer-events-none">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Curso</TableHead>
|
|
<TableHead>Quantidade</TableHead>
|
|
<TableHead>Valor unit.</TableHead>
|
|
<TableHead>Total</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{items?.map(({ name, unit_price, quantity }, index) => {
|
|
return (
|
|
<TableRow key={index}>
|
|
<TableCell>{name}</TableCell>
|
|
<TableCell>{quantity}</TableCell>
|
|
<TableCell>
|
|
<Currency>{unit_price}</Currency>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{unit_price * quantity}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
|
|
{/* Summary */}
|
|
<TableFooter>
|
|
<TableRow>
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Subtotal
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{subtotal}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
{/* Discount */}
|
|
<TableRow>
|
|
<TableCell colSpan={3}>
|
|
<span className="flex gap-1 justify-end">
|
|
Descontos
|
|
{coupon && (
|
|
<Kbd>
|
|
<Abbr maxLen={8}>{coupon}</Abbr>
|
|
</Kbd>
|
|
)}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{discount}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
{/* Interest */}
|
|
{interest_amount ? (
|
|
<TableRow>
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Juros
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{interest_amount}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{/* Total */}
|
|
<TableRow>
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Total
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{total}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableFooter>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/*<pre>{JSON.stringify(order, null, 2)}</pre>*/}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Status({ status: s }: { status: string }) {
|
|
const status = labels[s] ?? s
|
|
const { icon: Icon, color } = statuses?.[s] ?? { icon: HelpCircleIcon }
|
|
|
|
return (
|
|
<Badge variant="outline" className={cn(color, ' px-1.5')}>
|
|
<Icon className={cn('stroke-2', color)} />
|
|
{status}
|
|
</Badge>
|
|
)
|
|
}
|
|
|
|
type PaymentMethodProps = {
|
|
id: string
|
|
status: string
|
|
total: number
|
|
invoice_id: string
|
|
installments: number
|
|
}
|
|
|
|
type BankSlipPaymentMethodProps = PaymentMethodProps & {}
|
|
|
|
function BankSlipPaymentMethod({ status }: BankSlipPaymentMethodProps) {
|
|
return (
|
|
<ul className="flex max-lg:flex-col gap-x-1.5">
|
|
<li>Boleto bancário</li>
|
|
<li>
|
|
<Status status={status} />
|
|
</li>
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
type PixPaymentMethodrops = PaymentMethodProps & {}
|
|
|
|
function PixPaymentMethod({}: PixPaymentMethodrops) {
|
|
return <>Pix</>
|
|
}
|
|
|
|
function UnknownPaymentMethod() {
|
|
return <>Deposito bancário</>
|
|
}
|
|
|
|
type CreditCardPaymentMethodProps = PaymentMethodProps & {
|
|
stats: { last_attempt_succeeded: boolean }
|
|
credit_card: { last4: string; brand: string }
|
|
}
|
|
|
|
function CreditCardPaymentMethod({
|
|
id,
|
|
status,
|
|
total,
|
|
credit_card,
|
|
installments,
|
|
invoice_id,
|
|
stats
|
|
}: CreditCardPaymentMethodProps) {
|
|
return (
|
|
<>
|
|
<ul className="flex max-lg:flex-col gap-x-1.5">
|
|
<li>
|
|
{credit_card.brand} (Crédito) **** {credit_card.last4}
|
|
</li>
|
|
<li>
|
|
{stats.last_attempt_succeeded === false ? (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-red-400 border-red-400 px-1.5"
|
|
>
|
|
<AlertCircleIcon /> Pagamento não aprovado
|
|
</Badge>
|
|
) : (
|
|
<Status status={status} />
|
|
)}
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
{installments}x <Currency>{total / Number(installments)}</Currency>
|
|
</p>
|
|
|
|
{stats.last_attempt_succeeded === false ? (
|
|
<div className="flex justify-center mt-2">
|
|
<CreditCardPaymentDialog
|
|
id={id}
|
|
total={total}
|
|
installments={installments}
|
|
invoice_id={invoice_id}
|
|
>
|
|
<Button size="sm" variant="secondary" className="cursor-pointer">
|
|
<ArrowLeftRightIcon /> Pagar com outro cartão
|
|
</Button>
|
|
</CreditCardPaymentDialog>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const formSchema = z.object({
|
|
credit_card: creditCardSchema
|
|
})
|
|
|
|
type Schema = z.input<typeof formSchema>
|
|
|
|
function CreditCardPaymentDialog({
|
|
children,
|
|
id,
|
|
installments,
|
|
invoice_id,
|
|
total
|
|
}) {
|
|
const { runAsync } = useRequest(
|
|
async ({ credit_card }) => {
|
|
return await fetch(`/~/api/orders/${id}/payment-retries`, {
|
|
method: 'POST',
|
|
headers: new Headers({ 'Content-Type': 'application/json' }),
|
|
body: JSON.stringify({ credit_card, installments, invoice_id })
|
|
})
|
|
},
|
|
{ manual: true }
|
|
)
|
|
const { control, handleSubmit, formState } = useForm<Schema>({
|
|
resolver: zodResolver(formSchema)
|
|
})
|
|
|
|
const onSubmit = async ({ credit_card }: Schema) => {
|
|
const r = await runAsync({ credit_card })
|
|
console.log(r.ok)
|
|
console.log(await r.json())
|
|
}
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>{children}</DialogTrigger>
|
|
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Novo cartão de crédito</DialogTitle>
|
|
<DialogDescription>
|
|
Use um novo cartão para concluir o pagamento. Nenhuma cobrança foi
|
|
realizada no cartão anterior.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<CreditCard control={control} />
|
|
|
|
<Separator />
|
|
|
|
<DialogFooter className="*:cursor-pointer">
|
|
<DialogClose asChild>
|
|
<Button
|
|
type="button"
|
|
variant="link"
|
|
className="text-black dark:text-white"
|
|
tabIndex={-1}
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
</DialogClose>
|
|
|
|
<Button type="submit" disabled={formState.isSubmitting}>
|
|
{formState.isSubmitting && <Spinner />}
|
|
Pagar <Currency>{total}</Currency>
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|