add payment section

2026-01-19 20:16:57 -03:00
parent ed58e26e7e
commit 6732e07dfa
13 changed files with 222 additions and 58 deletions
--- a/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id._index/route.tsx
+++ b/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id._index/route.tsx
@@ -41,7 +41,8 @@ export default function Route({}: Route.ComponentProps) {
              Editar empresa
            </CardTitle>
            <CardDescription>
-              Configurar as informações gerais para esta empresa.
+              Gerencie as informações cadastrais e configurações gerais desta
+              empresa.
            </CardDescription>
          </CardHeader>

--- a/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id.address/route.tsx
+++ b/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id.address/route.tsx
@@ -36,8 +36,7 @@ export default function Route({}: Route.ComponentProps) {
            Editar endereço
          </CardTitle>
          <CardDescription>
-            Este endereço será usado automaticamente sempre que for necessário
-            informar um endereço.
+            Este endereço será usado automaticamente sempre que necessário.
          </CardDescription>
        </CardHeader>

--- a/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id.billing/route.tsx
+++ b/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id.billing/route.tsx
@@ -0,0 +1,161 @@
+import type { Route } from './+types/route'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
+import { 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 {
+  NativeSelect,
+  NativeSelectOption
+} from '@repo/ui/components/ui/native-select'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+import { HttpMethod, request as req } from '@repo/util/request'
+import { useFetcher, useOutletContext } from 'react-router'
+import type { Org } from '../_app.orgs.$id/data'
+
+const formSchema = z.object({
+  due_days: z
+    .number({ error: 'Deve estar entre 1 e 90' })
+    .min(1, { error: 'Deve ser igual 1 ou maior' })
+    .max(90, { error: 'Deve ser menor ou igual a 90' }),
+  payment_method: z.enum(['BANK_SLIP', 'MANUAL'], {
+    error: 'Selecione uma opção'
+  })
+})
+
+type Schema = z.infer<typeof formSchema>
+
+export async function action({ params, request, context }: Route.ActionArgs) {
+  const r = await req({
+    url: `orgs/${params.id}/billing`,
+    headers: new Headers({ 'Content-Type': 'application/json' }),
+    method: HttpMethod.PUT,
+    body: JSON.stringify(await request.json()),
+    request,
+    context
+  })
+
+  return { ok: r.ok }
+}
+
+export default function Route({}: Route.ComponentProps) {
+  const fetcher = useFetcher()
+  const { org } = useOutletContext() as { org: Org }
+  const form = useForm<Schema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: org?.billing
+  })
+  const { handleSubmit, control, formState } = form
+  const onSubmit = async (data: Schema) => {
+    toast.success('As condições de pagamento foram atualizadas')
+
+    fetcher.submit(JSON.stringify(data), {
+      method: 'PUT',
+      encType: 'application/json'
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle className="font-semibold text-lg">
+              Condições de pagamento
+            </CardTitle>
+            <CardDescription>
+              Estas condições serão usadas automaticamente sempre que um
+              pagamento for gerado.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <FieldSet>
+              <FormField
+                control={control}
+                name="due_days"
+                render={({ field: { onChange, ...field } }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Prazo para vencimento{' '}
+                      <span className="text-xs text-white/30 font-normal">
+                        (em dias)
+                      </span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        min={1}
+                        max={90}
+                        onChange={(e) => onChange(Number(e.target.value))}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={control}
+                name="payment_method"
+                render={({ field }) => (
+                  <FormItem className="*:w-full">
+                    <FormLabel>Forma de pagamento</FormLabel>
+                    <FormControl>
+                      <NativeSelect {...field}>
+                        <NativeSelectOption value="">
+                          Selecione
+                        </NativeSelectOption>
+                        <NativeSelectOption value="BANK_SLIP">
+                          Boleto bancário
+                        </NativeSelectOption>
+                        <NativeSelectOption value="MANUAL">
+                          Depósito bancário
+                        </NativeSelectOption>
+                        <NativeSelectOption value="PIX" disabled>
+                          Pix
+                        </NativeSelectOption>
+                        <NativeSelectOption value="CREDIT_CARD" disabled>
+                          Cartão de crédito
+                        </NativeSelectOption>
+                      </NativeSelect>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </FieldSet>
+
+            <Button
+              type="submit"
+              className="cursor-pointer"
+              disabled={formState.isSubmitting}
+            >
+              {formState.isSubmitting ? <Spinner /> : null}
+              Atualizar condições
+            </Button>
+          </CardContent>
+        </Card>
+      </form>
+    </Form>
+  )
+}
--- a/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id.subscription/route.tsx
+++ b/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id.subscription/route.tsx
@@ -26,10 +26,6 @@ import {
 } 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'
 import { Spinner } from '@repo/ui/components/ui/spinner'
 import { HttpMethod, request as req } from '@repo/util/request'
@@ -42,9 +38,6 @@ const formSchema = z.object({
    .number({ error: 'Deve estar entre 1 e 31' })
    .min(1, { error: 'Deve ser igual 1 ou maior' })
    .max(31, { error: 'Deve ser menor ou igual a 31' }),
-  payment_method: z.enum(['BANK_SLIP', 'MANUAL'], {
-    error: 'Selecione uma opção'
-  }),
  subscription_frozen: z.boolean().optional()
 })

@@ -88,7 +81,7 @@ export default function Route({}: Route.ComponentProps) {
    },
    resolver: zodResolver(formSchema)
  })
-  const { handleSubmit, formState, watch, reset } = form
+  const { handleSubmit, formState, watch, reset, control } = form
  const plan = watch('plan')

  const onSubmit = async ({ plan, ...data }: Schema) => {
@@ -129,7 +122,7 @@ export default function Route({}: Route.ComponentProps) {

          <CardContent className="space-y-6">
            <FormField
-              control={form.control}
+              control={control}
              name="plan"
              render={({ field: { value, onChange } }) => (
                <FormItem>
@@ -166,7 +159,7 @@ export default function Route({}: Route.ComponentProps) {

              <FieldGroup>
                <FormField
-                  control={form.control}
+                  control={control}
                  name="billing_day"
                  render={({ field: { onChange, ...field } }) => (
                    <FormItem>
@@ -186,31 +179,7 @@ export default function Route({}: Route.ComponentProps) {
                />

                <FormField
-                  control={form.control}
-                  name="payment_method"
-                  render={({ field }) => (
-                    <FormItem className="*:w-full">
-                      <FormLabel>Forma de pagamento</FormLabel>
-                      <FormControl>
-                        <NativeSelect {...field}>
-                          <NativeSelectOption value="">
-                            Selecione
-                          </NativeSelectOption>
-                          <NativeSelectOption value="BANK_SLIP">
-                            Boleto bancário
-                          </NativeSelectOption>
-                          <NativeSelectOption value="MANUAL">
-                            Depósito bancário
-                          </NativeSelectOption>
-                        </NativeSelect>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
+                  control={control}
                  name="subscription_frozen"
                  defaultValue={false}
                  render={({ field: { onChange, value, ...field } }) => (
--- a/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id/data.ts
+++ b/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id/data.ts
@@ -2,7 +2,11 @@ import type { Org as Org_ } from '../_app.orgs._index/columns'

 export type Subscription = {
  billing_day: number
-  payment_method: 'BANK_SLIP' | 'MANUAL'
+}
+
+export type Billing = {
+  due_days: number
+  payment_methot: 'BANK_SLIP' | 'MANUAL'
 }

 export type Address = {
@@ -14,4 +18,5 @@ export type Org = Org_ & {
  address?: Address
  subscription?: Subscription
  subscription_frozen?: boolean
+  billing: Billing
 }
--- a/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id/route.tsx
+++ b/apps/insights.saladeaula.digital/app/routes/_app.orgs.$id/route.tsx
@@ -26,7 +26,8 @@ import type { Org } from './data'
 const links = [
  { to: '', title: 'Perfil', end: true },
  { to: 'address', title: 'Endereço' },
-  { to: 'subscription', title: 'Plano' }
+  { to: 'subscription', title: 'Plano' },
+  { to: 'billing', title: 'Pagamentos' }
 ]

 export function meta() {