add payment section

This commit is contained in:
2026-01-19 20:16:57 -03:00
parent ed58e26e7e
commit 6732e07dfa
13 changed files with 222 additions and 58 deletions

View File

@@ -1,2 +1,3 @@
export const TZ = 'America/Sao_Paulo'
export const INTERNAL_EMAIL_DOMAIN = 'users.noreply.saladeaula.digital'
export const RYBBIT_SITE_ID = '83748b35413d'

View File

@@ -12,12 +12,11 @@ import {
import { loggingMiddleware } from '@repo/auth/middleware/logging'
import { ThemeProvider } from '@repo/ui/components/theme-provider'
import './app.css'
import { RYBBIT_SITE_ID } from './conf'
export const middleware: Route.MiddlewareFunction[] = [loggingMiddleware]
export function Layout({ children }: { children: React.ReactNode }) {
const rybbitSiteId = '83748b35413d'
return (
<html lang="pt-br" suppressHydrationWarning>
<head>
@@ -30,7 +29,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
{/* Rybbit Tracking Snippet */}
<script
src="https://analytics.eduseg.com.br/api/script.js"
data-site-id={rybbitSiteId}
data-site-id={RYBBIT_SITE_ID}
async
defer
></script>

View File

@@ -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>

View File

@@ -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>

View File

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

View File

@@ -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 } }) => (

View File

@@ -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
}

View File

@@ -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() {

View File

@@ -388,7 +388,7 @@ function Editing() {
{...field}
/>
</FormControl>
<FormLabel>Não listar no catálogo de cursos</FormLabel>
<FormLabel>Ocultar curso do catálogo público</FormLabel>
</FormItem>
)}
/>