update block
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user