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