reditect to order

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.buy/route.tsx

@@ -1,17 +1,12 @@
 import type { Route } from './+types/route'
 
-import { useEffect, useState } from 'react'
-import { useFetcher, Link } from 'react-router'
 import { useMount } from 'ahooks'
 import { BookSearchIcon, CircleCheckBigIcon, WalletIcon } from 'lucide-react'
+import { use, useEffect, useState } from 'react'
+import { Link, redirect, useFetcher } from 'react-router'
 
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardDescription,
-  CardTitle
-} from '@repo/ui/components/ui/card'
+import { cloudflareContext, userContext } from '@repo/auth/context'
+import { Skeleton } from '@repo/ui/components/skeleton'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -20,22 +15,27 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator
 } from '@repo/ui/components/ui/breadcrumb'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
+import { Label } from '@repo/ui/components/ui/label'
 import { Switch } from '@repo/ui/components/ui/switch'
 import { createSearch } from '@repo/util/meili'
-import { cloudflareContext, userContext } from '@repo/auth/context'
-import { Label } from '@repo/ui/components/ui/label'
-import { Skeleton } from '@repo/ui/components/skeleton'
-import { request as req, HttpMethod } from '@repo/util/request'
+import { HttpMethod, request as req } from '@repo/util/request'
 
-import { INTERNAL_EMAIL_DOMAIN } from '@/conf'
-import { workspaceContext } from '@/middleware/workspace'
-import { useWorksapce } from '@/components/workspace-switcher'
 import { Step, StepItem, StepSeparator } from '@/components/step'
 import { Wizard, WizardStep } from '@/components/wizard'
+import { useWorksapce } from '@/components/workspace-switcher'
+import { INTERNAL_EMAIL_DOMAIN } from '@/conf'
+import { workspaceContext } from '@/middleware/workspace'
 import type { Course } from '../_.$orgid.enrollments.add/data'
+import { Assigned } from './assigned'
 import { Bulk } from './bulk'
 import { Payment } from './payment'
-import { Assigned } from './assigned'
 import { Review } from './review'
 import { useWizardStore } from './store'
 
@@ -43,7 +43,7 @@ export function meta({}: Route.MetaArgs) {
   return [{ title: 'Comprar matrículas' }]
 }
 
-export async function loader({ context }: Route.LoaderArgs) {
+export async function loader({ context, params, request }: Route.LoaderArgs) {
   const cloudflare = context.get(cloudflareContext)
   const courses = createSearch<Course>({
     index: 'saladeaula_courses',
@@ -53,10 +53,16 @@ export async function loader({ context }: Route.LoaderArgs) {
     env: cloudflare.env
   })
 
-  return { courses }
+  const seats = req({
+    url: `/orgs/${params.orgid}/seats`,
+    request,
+    context
+  }).then((r) => r.json() as any)
+
+  return { courses, seats }
 }
 
-export async function action({ params, request, context }: Route.ActionArgs) {
+export async function action({ request, context }: Route.ActionArgs) {
   const body = (await request.json()) as object
   const user = context.get(userContext)!
   const { activeWorkspace } = context.get(workspaceContext)
@@ -83,13 +89,12 @@ export async function action({ params, request, context }: Route.ActionArgs) {
     return { ok: false, error }
   }
 
-  console.log(await r.json())
-
-  return { ok: true }
+  const { id } = (await r.json()) as { id: string }
+  throw redirect(`../payments/${id}`)
 }
 
 export default function Route({
-  loaderData: { courses }
+  loaderData: { courses, seats: seats_ }
 }: Route.ComponentProps) {
   const fetcher = useFetcher()
   const [mounted, setMounted] = useState(false)
@@ -97,6 +102,9 @@ export default function Route({
   const { index, kind, setIndex, setKind, reset, update, ...state } =
     useWizardStore()
 
+  // @TODO
+  const seats = use(seats_)
+
   const onSubmit = async () => {
     const items = state.items.map(({ course, quantity }) => ({
       ...course,
@@ -119,14 +127,12 @@ export default function Route({
     }
   }, [address])
 
-  useEffect(() => {
-    console.log(fetcher.data)
-  }, [fetcher.data])
-
   if (!mounted) {
     return <Skeleton />
   }
 
+  console.log(seats)
+
   return (
     <div className="space-y-2.5">
       <Breadcrumb>