add subscription to org

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>
+  )
+}