124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
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>
|
|
)
|
|
}
|