reditect to order

apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/route.tsx

@@ -1,8 +1,11 @@
 import type { Route } from './+types/route'
 
-import { Link } from 'react-router'
+import { formatCEP } from '@brazilian-utils/brazilian-utils'
+import { Suspense, useEffect } from 'react'
+import { Await, Link } from 'react-router'
 
-import { request as req } from '@repo/util/request'
+import { Currency } from '@repo/ui/components/currency'
+import { Skeleton } from '@repo/ui/components/skeleton'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -11,6 +14,22 @@ import {
   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 [
@@ -20,28 +39,32 @@ export function meta() {
   ]
 }
 
-export async function loader({ params, request, context }: Route.LoaderArgs) {
-  const r = await req({
+export async function loader({ context, request, params }: Route.LoaderArgs) {
+  const order = await req({
     url: `/orders/${params.id}`,
-    request,
-    context
-  })
+    context,
+    request
+  }).then((r) => r.json())
 
-  if (!r.ok) {
-    throw new Response(null, { status: r.status })
-  }
-
-  return { order: await 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">Histórico de pagamentos</Link>
+              <Link to="../payments">Pagamentos</Link>
             </BreadcrumbLink>
           </BreadcrumbItem>
           <BreadcrumbSeparator />
@@ -50,7 +73,55 @@ export default function Route({ loaderData: { order } }: Route.ComponentProps) {
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>
-      <pre>{JSON.stringify(order, null, 2)}</pre>
+
+      <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>
   )
 }