add subscription to org

apps/insights.saladeaula.digital/app/routes/_app.orgs.$id._index/route.tsx

@@ -1,17 +1,8 @@
 import type { Route } from './+types/route'
 
 import { useForm } from 'react-hook-form'
-import { Link } from 'react-router'
+import { useOutletContext } from 'react-router'
 
-import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator
-} from '@repo/ui/components/ui/breadcrumb'
 import { Button } from '@repo/ui/components/ui/button'
 import {
   Card,
@@ -30,139 +21,78 @@ import {
   FormMessage
 } from '@repo/ui/components/ui/form'
 import { Input } from '@repo/ui/components/ui/input'
-import { initials } from '@repo/ui/lib/utils'
-import { request as req } from '@repo/util/request'
-import { BadgeCheckIcon } from 'lucide-react'
 
-export function meta() {
-  return [
-    {
-      title: 'Editar empresa'
-    }
-  ]
-}
-
-export async function loader({ params, request, context }: Route.LoaderArgs) {
-  const r = await req({
-    url: `/orgs/${params.id}`,
-    request,
-    context
-  })
-
-  if (!r.ok) {
-    throw new Response(null, { status: r.status })
-  }
-
-  return { org: await r.json() } as { org: any }
-}
-
-export default function Route({ loaderData: { org } }: Route.ComponentProps) {
+export default function Route({}: Route.ComponentProps) {
+  const { org } = useOutletContext()
   const form = useForm({ defaultValues: org })
-  const { handleSubmit } = form
+  const { handleSubmit, formState } = form
 
   const onSubmit = async () => {}
 
   return (
-    <div className="space-y-2.5">
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <Link to="../orgs">Empresas</Link>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Editar empresa</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
+    <Form {...form}>
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
+        <Card>
+          <CardHeader>
+            <CardTitle className="font-semibold text-2xl">
+              Editar empresa
+            </CardTitle>
+            <CardDescription>
+              Configurar as informações gerais para esta empresa.
+            </CardDescription>
+          </CardHeader>
 
-      <div className="lg:max-w-2xl mx-auto space-y-2.5">
-        <div className="flex gap-2.5 items-center mb-5">
-          <div className="relative">
-            {org?.subscription ? (
-              <BadgeCheckIcon className="fill-blue-500 stroke-white absolute size-4 dark:size-3.5 -top-0 -right-0 z-2" />
-            ) : null}
+          <CardContent className="space-y-6">
+            <FieldSet disabled={true}>
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Nome</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-            <Avatar className="size-12">
-              <AvatarFallback>{initials(org.name)}</AvatarFallback>
-            </Avatar>
-          </div>
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-          <ul>
-            <li className="font-bold text-lg">{org.name}</li>
-            <li className="text-muted-foreground text-sm truncate max-lg:max-w-62">
-              {org.email}
-            </li>
-          </ul>
-        </div>
+              <FormField
+                control={form.control}
+                name="cnpj"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>CNPJ</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </FieldSet>
 
-        <Form {...form}>
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
-            <Card>
-              <CardHeader>
-                <CardTitle className="font-semibold text-2xl">
-                  Editar empresa
-                </CardTitle>
-                <CardDescription>
-                  Configurar as informações gerais para esta empresa.
-                </CardDescription>
-              </CardHeader>
-
-              <CardContent>
-                <FieldSet disabled={true}>
-                  <FormField
-                    control={form.control}
-                    name="name"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Nome</FormLabel>
-                        <FormControl>
-                          <Input {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="email"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Email</FormLabel>
-                        <FormControl>
-                          <Input {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="cnpj"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>CNPJ</FormLabel>
-                        <FormControl>
-                          <Input {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <div className="flex justify-end">
-                    <Button type="submit">Editar</Button>
-                  </div>
-                </FieldSet>
-              </CardContent>
-            </Card>
-          </form>
-        </Form>
-      </div>
-    </div>
+            <Button type="submit" disabled={true}>
+              Atualizar perfil
+            </Button>
+          </CardContent>
+        </Card>
+      </form>
+    </Form>
   )
 }

apps/insights.saladeaula.digital/app/routes/_app.orgs.$id.address/route.tsx

@@ -0,0 +1,11 @@
+import type { Route } from './+types/route'
+
+import { Card, CardContent } from '@repo/ui/components/ui/card'
+
+export default function Route({}: Route.ComponentProps) {
+  return (
+    <Card>
+      <CardContent>address</CardContent>
+    </Card>
+  )
+}

apps/insights.saladeaula.digital/app/routes/_app.orgs.$id.subscription/route.tsx

@@ -0,0 +1,123 @@
+import type { Route } from './+types/route'
+
+import { useForm } from 'react-hook-form'
+import { useOutletContext } from 'react-router'
+
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
+import { FieldGroup, FieldLegend, FieldSet } from '@repo/ui/components/ui/field'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@repo/ui/components/ui/form'
+import { Input } from '@repo/ui/components/ui/input'
+import { Label } from '@repo/ui/components/ui/label'
+import {
+  NativeSelect,
+  NativeSelectOption
+} from '@repo/ui/components/ui/native-select'
+import { RadioGroup, RadioGroupItem } from '@repo/ui/components/ui/radio-group'
+
+export default function Route({}: Route.ComponentProps) {
+  const { org } = useOutletContext()
+  const form = useForm({ defaultValues: org?.subscription })
+  const { handleSubmit, formState } = form
+
+  const onSubmit = async (data) => {
+    console.log(data)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle className="font-semibold text-lg">
+              Escolha seu plano
+            </CardTitle>
+            <CardDescription>
+              Escolha o plano que será utilizado para configurar o funcionamento
+              e os recursos da empresa.
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent className="space-y-6">
+            <RadioGroup
+              defaultValue="none"
+              className="lg:grid-cols-2 *:border *:p-4 *:rounded-lg *:cursor-pointer
+                          *:has-[[aria-checked=true]]:bg-muted"
+            >
+              <Label className="flex items-center gap-3">
+                <RadioGroupItem value="none" />
+                <div>Nenhum</div>
+              </Label>
+              <Label className="flex items-center gap-3">
+                <RadioGroupItem value="flexivel" />
+                <div>Flexível</div>
+              </Label>
+            </RadioGroup>
+
+            <FieldSet className="border rounded-lg p-6 bg-accent/10">
+              <FieldLegend className="mb-0">Configurações do plano</FieldLegend>
+
+              <FieldGroup>
+                <FormField
+                  control={form.control}
+                  name="billing_day"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Dia para faturar</FormLabel>
+                      <FormControl>
+                        <Input type="number" min={1} max={30} {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="payment_method"
+                  render={({ field }) => (
+                    <FormItem className="*:w-full">
+                      <FormLabel>Forma de pagamento</FormLabel>
+                      <FormControl>
+                        <NativeSelect {...field}>
+                          <NativeSelectOption value="BANK_SLIP">
+                            Boleto bancário
+                          </NativeSelectOption>
+                          <NativeSelectOption value="MANUAL">
+                            Depósito bancário
+                          </NativeSelectOption>
+                        </NativeSelect>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </FieldGroup>
+            </FieldSet>
+
+            <Button
+              type="submit"
+              className="cursor-pointer"
+              disabled={formState.isSubmitting}
+            >
+              Atualizar plano
+            </Button>
+          </CardContent>
+        </Card>
+      </form>
+    </Form>
+  )
+}

apps/insights.saladeaula.digital/app/routes/_app.orgs.$id/route.tsx

@@ -0,0 +1,123 @@
+import type { Route } from './+types/route'
+
+import {
+  Link,
+  NavLink,
+  Outlet,
+  type ShouldRevalidateFunctionArgs
+} from 'react-router'
+
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@repo/ui/components/ui/breadcrumb'
+import { Tabs, TabsList, TabsTrigger } from '@repo/ui/components/ui/tabs'
+import { initials } from '@repo/ui/lib/utils'
+import { request as req } from '@repo/util/request'
+import { BadgeCheckIcon } from 'lucide-react'
+
+const links = [
+  { to: '', title: 'Perfil', end: true },
+  { to: 'subscription', title: 'Plano' },
+  { to: 'address', title: 'Endereço' }
+]
+
+export function meta() {
+  return [
+    {
+      title: 'Editar empresa'
+    }
+  ]
+}
+
+export async function loader({ params, request, context }: Route.LoaderArgs) {
+  const r = await req({
+    url: `/orgs/${params.id}`,
+    request,
+    context
+  })
+
+  if (!r.ok) {
+    throw new Response(null, { status: r.status })
+  }
+
+  return { org: await r.json() } as { org: any }
+}
+
+export function shouldRevalidate({
+  currentParams,
+  nextParams
+}: ShouldRevalidateFunctionArgs) {
+  return currentParams.id !== nextParams.id
+}
+
+export default function Route({ loaderData: { org } }: Route.ComponentProps) {
+  return (
+    <div className="space-y-2.5">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link to="../orgs">Empresas</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Editar empresa</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="lg:max-w-2xl mx-auto space-y-2.5">
+        <div className="flex gap-2.5 items-center mb-5">
+          <div className="relative">
+            {org?.subscription ? (
+              <BadgeCheckIcon className="fill-blue-500 stroke-white absolute size-4 dark:size-3.5 -top-0 -right-0 z-2" />
+            ) : null}
+
+            <Avatar className="size-12">
+              <AvatarFallback>{initials(org.name)}</AvatarFallback>
+            </Avatar>
+          </div>
+
+          <ul>
+            <li className="font-bold text-lg">{org.name}</li>
+            <li className="text-muted-foreground text-sm truncate max-lg:max-w-62">
+              {org.email}
+            </li>
+          </ul>
+        </div>
+
+        <Tabs>
+          <TabsList>
+            {links.map(({ to, title, ...props }, idx) => (
+              <NavLink
+                to={to}
+                key={idx}
+                className="aria-[current=page]:pointer-events-none"
+                {...props}
+              >
+                {({ isActive }) => (
+                  <TabsTrigger
+                    data-state={isActive ? 'active' : ''}
+                    value={title}
+                    asChild
+                  >
+                    <span>{title}</span>
+                  </TabsTrigger>
+                )}
+              </NavLink>
+            ))}
+          </TabsList>
+        </Tabs>
+
+        <Outlet context={{ org }} />
+      </div>
+    </div>
+  )
+}