128 lines
3.6 KiB
TypeScript
128 lines
3.6 KiB
TypeScript
import type { Route } from './+types/route'
|
|
|
|
import { formatCEP } from '@brazilian-utils/brazilian-utils'
|
|
import { Suspense, useEffect } from 'react'
|
|
import { Await, Link } from 'react-router'
|
|
|
|
import { Currency } from '@repo/ui/components/currency'
|
|
import { Skeleton } from '@repo/ui/components/skeleton'
|
|
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,
|
|
ItemDescription,
|
|
ItemGroup,
|
|
ItemTitle
|
|
} from '@repo/ui/components/ui/item'
|
|
import { paymentMethods } from '@repo/ui/routes/orders/data'
|
|
import { request as req } from '@repo/util/request'
|
|
import { useWizardStore } from '../_.$orgid.enrollments.buy/store'
|
|
|
|
export function meta() {
|
|
return [
|
|
{
|
|
title: 'Detalhes do pagamento'
|
|
}
|
|
]
|
|
}
|
|
|
|
export async function loader({ context, request, params }: Route.LoaderArgs) {
|
|
const order = await req({
|
|
url: `/orders/${params.id}`,
|
|
context,
|
|
request
|
|
}).then((r) => r.json())
|
|
|
|
return { order }
|
|
}
|
|
|
|
export default function Route({ loaderData: { order } }: Route.ComponentProps) {
|
|
const { reset } = useWizardStore()
|
|
const { address, total, credit_card, payment_method, invoice, installments } =
|
|
order
|
|
|
|
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 space-y-2.5">
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">Detalhes do pagamento</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<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>
|
|
<ItemDescription>
|
|
{credit_card ? (
|
|
<>
|
|
{credit_card.brand} (Crédito) **** {credit_card.last4}
|
|
<br />
|
|
{installments}x{' '}
|
|
<Currency>{total / Number(installments)}</Currency>
|
|
</>
|
|
) : (
|
|
<>
|
|
{payment_method
|
|
? paymentMethods[payment_method]
|
|
: payment_method}
|
|
</>
|
|
)}
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
</Item>
|
|
</ItemGroup>
|
|
{/*<pre>{JSON.stringify(order, null, 2)}</pre>*/}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|