update block

apps/admin.saladeaula.digital/app/middleware/workspace.ts

@@ -66,7 +66,7 @@ export const workspaceMiddleware = async (
     workspaces,
     subscription: org?.['subscription'] || null,
     address: org?.['address'] || null,
-    blocked: 'subscription_freeze' in org
+    blocked: 'subscription_frozen' in org
   })
 
   return await next()

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

@@ -127,7 +127,7 @@ export async function action({ params, request, context }: Route.ActionArgs) {
   })
 
   const data = (await r.json()) as { sk: string }
-  return redirect(`/${params.orgid}/enrollments/${data.sk}/submitted`)
+  return redirect(`/${org_id}/enrollments/${data.sk}/submitted`)
 }
 
 export default function Route({

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

@@ -5,8 +5,10 @@ import valid from 'card-validator'
 import { ExternalLinkIcon, PencilIcon, SearchIcon } from 'lucide-react'
 import { Controller, useForm } from 'react-hook-form'
 import { PatternFormat } from 'react-number-format'
+import { useParams } from 'react-router'
 import { z } from 'zod'
 
+import { useWizard } from '@/components/wizard'
 import { Abbr } from '@repo/ui/components/abbr'
 import { Currency } from '@repo/ui/components/currency'
 import { Button } from '@repo/ui/components/ui/button'
@@ -20,6 +22,28 @@ import {
   DialogTitle,
   DialogTrigger
 } from '@repo/ui/components/ui/dialog'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle
+} from '@repo/ui/components/ui/empty'
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldSet
+} from '@repo/ui/components/ui/field'
+import { Input } from '@repo/ui/components/ui/input'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from '@repo/ui/components/ui/input-group'
 import {
   Item,
   ItemActions,
@@ -42,31 +66,6 @@ import {
 } from '@repo/ui/components/ui/table'
 import { paymentMethods } from '@repo/ui/routes/orders/data'
 
-import { useWizard } from '@/components/wizard'
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-  FieldSet
-} from '@repo/ui/components/ui/field'
-import { Input } from '@repo/ui/components/ui/input'
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput
-} from '@repo/ui/components/ui/input-group'
-
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyTitle
-} from '@repo/ui/components/ui/empty'
-import { useParams } from 'react-router'
 import { useWizardStore } from './store'
 
 type ReviewProps = {

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

@@ -1,6 +1,7 @@
 import type { Route } from './+types/route'
 
 import { useForm } from 'react-hook-form'
+import { PatternFormat } from 'react-number-format'
 import { useOutletContext } from 'react-router'
 
 import { Button } from '@repo/ui/components/ui/button'
@@ -22,10 +23,12 @@ import {
 } from '@repo/ui/components/ui/form'
 import { Input } from '@repo/ui/components/ui/input'
 
+import type { Org } from '../_app.orgs.$id/data'
+
 export default function Route({}: Route.ComponentProps) {
-  const { org } = useOutletContext()
+  const { org } = useOutletContext() as { org: Org }
   const form = useForm({ defaultValues: org })
-  const { handleSubmit, formState } = form
+  const { handleSubmit, control } = form
 
   const onSubmit = async () => {}
 
@@ -45,7 +48,7 @@ export default function Route({}: Route.ComponentProps) {
           <CardContent className="space-y-6">
             <FieldSet disabled={true}>
               <FormField
-                control={form.control}
+                control={control}
                 name="name"
                 render={({ field }) => (
                   <FormItem>
@@ -59,7 +62,7 @@ export default function Route({}: Route.ComponentProps) {
               />
 
               <FormField
-                control={form.control}
+                control={control}
                 name="email"
                 render={({ field }) => (
                   <FormItem>
@@ -73,13 +76,28 @@ export default function Route({}: Route.ComponentProps) {
               />
 
               <FormField
-                control={form.control}
+                control={control}
                 name="cnpj"
-                render={({ field }) => (
+                render={({
+                  field: { onChange, ref, ...field },
+                  fieldState
+                }) => (
                   <FormItem>
                     <FormLabel>CNPJ</FormLabel>
                     <FormControl>
-                      <Input {...field} />
+                      <PatternFormat
+                        id={field.name}
+                        format="##.###.###/####-##"
+                        mask="_"
+                        placeholder="__.___.___/____-__"
+                        customInput={Input}
+                        getInputRef={ref}
+                        aria-invalid={fieldState.invalid}
+                        onValueChange={({ value }) => {
+                          onChange(value)
+                        }}
+                        {...field}
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>

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

@@ -1,11 +1,165 @@
 import type { Route } from './+types/route'
 
-import { Card, CardContent } from '@repo/ui/components/ui/card'
+import { Controller, 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 {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldSet
+} from '@repo/ui/components/ui/field'
+import { Input } from '@repo/ui/components/ui/input'
+
+import type { Org } from '../_app.orgs.$id/data'
 
 export default function Route({}: Route.ComponentProps) {
+  const { org } = useOutletContext() as { org: Org }
+  const { handleSubmit, control } = useForm({ defaultValues: org?.address })
+
+  const onSubmit = async () => {}
+
   return (
-    <Card>
-      <CardContent>address</CardContent>
-    </Card>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="font-semibold text-lg">
+            Editar endereço
+          </CardTitle>
+          <CardDescription>
+            Este endereço será usado automaticamente sempre que for necessário
+            informar um endereço.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <FieldSet disabled={true}>
+            <Controller
+              control={control}
+              name="address1"
+              defaultValue=""
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>Endereço</FieldLabel>
+                  <Input
+                    id={field.name}
+                    aria-invalid={fieldState.invalid}
+                    {...field}
+                  />
+
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="address2"
+              defaultValue=""
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>
+                    Complemento{' '}
+                    <span className="text-muted-foreground">(opcional)</span>
+                  </FieldLabel>
+                  <Input
+                    id={field.name}
+                    aria-invalid={fieldState.invalid}
+                    {...field}
+                  />
+
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <FieldGroup className="grid grid-cols-3">
+              {/* Neighborhood */}
+              <Controller
+                control={control}
+                name="neighborhood"
+                defaultValue=""
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>Bairro</FieldLabel>
+                    <Input
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      {...field}
+                    />
+
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+              {/* City */}
+              <Controller
+                control={control}
+                name="city"
+                defaultValue=""
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>Cidade</FieldLabel>
+                    <Input
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      {...field}
+                    />
+
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+              {/* State */}
+              <Controller
+                control={control}
+                name="state"
+                defaultValue=""
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>Estado</FieldLabel>
+                    <Input
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      {...field}
+                    />
+
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+            </FieldGroup>
+          </FieldSet>
+
+          <Button
+            type="submit"
+            className="cursor-pointer"
+            // disabled={formState.isSubmitting}
+            disabled={true}
+          >
+            Atualizar endereço
+          </Button>
+        </CardContent>
+      </Card>
+    </form>
   )
 }

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

@@ -1,7 +1,9 @@
 import type { Route } from './+types/route'
 
+import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { useOutletContext } from 'react-router'
+import { useFetcher, useOutletContext } from 'react-router'
+import { z } from 'zod'
 
 import { Button } from '@repo/ui/components/ui/button'
 import {
@@ -11,6 +13,7 @@ import {
   CardHeader,
   CardTitle
 } from '@repo/ui/components/ui/card'
+import { Checkbox } from '@repo/ui/components/ui/checkbox'
 import { FieldGroup, FieldLegend, FieldSet } from '@repo/ui/components/ui/field'
 import {
   Form,
@@ -27,23 +30,87 @@ import {
   NativeSelectOption
 } from '@repo/ui/components/ui/native-select'
 import { RadioGroup, RadioGroupItem } from '@repo/ui/components/ui/radio-group'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+import { HttpMethod, request as req } from '@repo/util/request'
+
+import type { Org, Subscription } from '../_app.orgs.$id/data'
+
+const formSchema = z.object({
+  plan: z.enum(['NOTHING', 'FLEXIVEL']),
+  billing_day: z.number({ error: 'Deve estar entre 1 e 31' }).min(1).max(31),
+  payment_method: z.enum(['BANK_SLIP', 'MANUAL'], {
+    error: 'Selecione uma opção'
+  }),
+  subscription_frozen: z.boolean().optional()
+})
+
+type Schema = Subscription & z.infer<typeof formSchema>
+
+export async function action({ params, request, context }: Route.ActionArgs) {
+  const method = request.method
+
+  if (method === 'DELETE') {
+    await req({
+      url: `orgs/${params.id}/subscription`,
+      method: HttpMethod.DELETE,
+      request,
+      context
+    })
+
+    return { ok: true }
+  }
+
+  const r = await req({
+    url: `orgs/${params.id}/subscription`,
+    headers: new Headers({ 'Content-Type': 'application/json' }),
+    method: method as HttpMethod,
+    body: JSON.stringify(await request.json()),
+    request,
+    context
+  })
+
+  console.log(r)
+
+  return { ok: true }
+}
 
 export default function Route({}: Route.ComponentProps) {
-  const { org } = useOutletContext()
-  const form = useForm({ defaultValues: org?.subscription })
-  const { handleSubmit, formState } = form
+  const fetcher = useFetcher()
+  const { org } = useOutletContext() as { org: Org }
+  const subscribed = !!org?.subscription
+  const form = useForm<Schema>({
+    defaultValues: {
+      plan: subscribed ? 'FLEXIVEL' : 'NOTHING',
+      ...org?.subscription
+    },
+    resolver: zodResolver(formSchema)
+  })
+  const { handleSubmit, formState, watch } = form
+  const plan = watch('plan')
 
-  const onSubmit = async (data) => {
-    console.log(data)
+  const onSubmit = async ({ plan, ...data }: Schema) => {
+    if (plan === 'NOTHING') {
+      fetcher.submit(null, {
+        method: 'DELETE'
+      })
+      return
+    }
+
+    fetcher.submit(JSON.stringify({ name: org.name, ...data }), {
+      method: subscribed ? 'PUT' : 'POST',
+      encType: 'application/json'
+    })
   }
 
+  console.log(org)
+
   return (
     <Form {...form}>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Card>
           <CardHeader>
             <CardTitle className="font-semibold text-lg">
-              Escolha seu plano
+              Escolha um plano
             </CardTitle>
             <CardDescription>
               Escolha o plano que será utilizado para configurar o funcionamento
@@ -52,33 +119,57 @@ export default function Route({}: Route.ComponentProps) {
           </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>
+            <FormField
+              control={form.control}
+              name="plan"
+              render={({ field: { value, onChange } }) => (
+                <FormItem>
+                  <FormControl>
+                    <RadioGroup
+                      defaultValue={value}
+                      onValueChange={onChange}
+                      className="lg:grid-cols-2 grid gap-4
+                                 *:border *:p-4 *:rounded-lg *:cursor-pointer
+                                 *:has-[[aria-checked=true]]:bg-muted"
+                    >
+                      <Label className="flex items-center gap-3">
+                        <RadioGroupItem value="NOTHING" />
+                        <div className="font-medium">Sem plano</div>
+                      </Label>
 
-            <FieldSet className="border rounded-lg p-6 bg-accent/10">
+                      <Label className="flex items-center gap-3">
+                        <RadioGroupItem value="FLEXIVEL" />
+                        <div className="font-medium">Flexível</div>
+                      </Label>
+                    </RadioGroup>
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FieldSet
+              className="border rounded-lg p-6 bg-accent/10"
+              disabled={plan === 'NOTHING'}
+            >
               <FieldLegend className="mb-0">Configurações do plano</FieldLegend>
 
               <FieldGroup>
                 <FormField
                   control={form.control}
                   name="billing_day"
-                  render={({ field }) => (
+                  render={({ field: { onChange, ...field } }) => (
                     <FormItem>
                       <FormLabel>Dia para faturar</FormLabel>
                       <FormControl>
-                        <Input type="number" min={1} max={30} {...field} />
+                        <Input
+                          type="number"
+                          min={1}
+                          max={30}
+                          onChange={(e) => onChange(Number(e.target.value))}
+                          {...field}
+                        />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -93,6 +184,9 @@ export default function Route({}: Route.ComponentProps) {
                       <FormLabel>Forma de pagamento</FormLabel>
                       <FormControl>
                         <NativeSelect {...field}>
+                          <NativeSelectOption value="">
+                            Selecione
+                          </NativeSelectOption>
                           <NativeSelectOption value="BANK_SLIP">
                             Boleto bancário
                           </NativeSelectOption>
@@ -105,6 +199,26 @@ export default function Route({}: Route.ComponentProps) {
                     </FormItem>
                   )}
                 />
+
+                <FormField
+                  control={form.control}
+                  name="subscription_frozen"
+                  defaultValue={false}
+                  render={({ field: { onChange, value, ...field } }) => (
+                    <FormItem className="flex items-center gap-2">
+                      <FormControl>
+                        <Checkbox
+                          checked={value}
+                          onCheckedChange={onChange}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormLabel>
+                        Suspender temporariamente o funcionamento do plano
+                      </FormLabel>
+                    </FormItem>
+                  )}
+                />
               </FieldGroup>
             </FieldSet>
 
@@ -113,6 +227,7 @@ export default function Route({}: Route.ComponentProps) {
               className="cursor-pointer"
               disabled={formState.isSubmitting}
             >
+              {formState.isSubmitting ? <Spinner /> : null}
               Atualizar plano
             </Button>
           </CardContent>

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

@@ -21,10 +21,12 @@ import { initials } from '@repo/ui/lib/utils'
 import { request as req } from '@repo/util/request'
 import { BadgeCheckIcon } from 'lucide-react'
 
+import type { Org } from './data'
+
 const links = [
   { to: '', title: 'Perfil', end: true },
-  { to: 'subscription', title: 'Plano' },
-  { to: 'address', title: 'Endereço' }
+  { to: 'address', title: 'Endereço' },
+  { to: 'subscription', title: 'Plano' }
 ]
 
 export function meta() {
@@ -46,7 +48,9 @@ export async function loader({ params, request, context }: Route.LoaderArgs) {
     throw new Response(null, { status: r.status })
   }
 
-  return { org: await r.json() } as { org: any }
+  return { org: await r.json() } as {
+    org: Org
+  }
 }
 
 export function shouldRevalidate({