This commit is contained in:
2026-01-01 01:05:22 -03:00
parent bad7e15f46
commit e3aff10140
6 changed files with 108 additions and 93 deletions

View File

@@ -3,6 +3,7 @@ import { PatternFormat } from 'react-number-format'
import { ExternalLinkIcon, PencilIcon, SearchIcon } from 'lucide-react'
import { Controller, useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { formatCEP } from '@brazilian-utils/brazilian-utils'
import { z } from 'zod'
import valid from 'card-validator'
@@ -41,7 +42,6 @@ import { paymentMethods } from '@repo/ui/routes/orders/data'
import { useWizard } from '@/components/wizard'
import { type WizardState } from './store'
import { applyDiscount } from './discount'
import {
Field,
FieldDescription,
@@ -61,7 +61,7 @@ import {
import { useWizardStore } from './store'
type ReviewProps = {
onSubmit: (value: WizardState) => void | Promise<void>
onSubmit: () => void | Promise<void>
}
export function Review({ onSubmit }: ReviewProps) {
@@ -78,7 +78,7 @@ export function Review({ onSubmit }: ReviewProps) {
onSubmit={async (e) => {
e.preventDefault()
set(true)
// await onSubmit(state)
await onSubmit()
}}
className="space-y-4"
>
@@ -176,7 +176,7 @@ export function Review({ onSubmit }: ReviewProps) {
}
export function Summary() {
const { summary, credit_card, payment_method, installments } =
const { summary, credit_card, payment_method, installments, address } =
useWizardStore()
const { total } = summary()
const numberValidation = valid.number(credit_card?.number)
@@ -186,15 +186,18 @@ export function Summary() {
<Item variant="outline" className="items-start">
<ItemContent>
<ItemTitle>Endereço de cobrança</ItemTitle>
<ul className="text-muted-foreground text-sm leading-normal font-normal text-balance">
Rua Monsenhor Ivo Zanlorenzi, 5190, ap 1802
<br />
Cidade Industrial
<br />
Curitiba, Paraná
<br />
81280-350
</ul>
{address && (
<ul className="text-muted-foreground text-sm leading-normal font-normal text-balance">
{address?.address1}
{address?.address2 ? <>, {address?.address2}</> : null}
<br />
{address?.neighborhood}
<br />
{address?.city}, {address?.state}
<br />
{formatCEP(address?.postcode)}
</ul>
)}
</ItemContent>
<ItemActions>
<AddressDialog />
@@ -236,17 +239,19 @@ const formSchema = z.object({
state: z.string().min(1, 'Digite o estado')
})
type Address = z.infer<typeof formSchema>
export type Address = z.infer<typeof formSchema>
export function AddressDialog() {
const [open, { toggle, set }] = useToggle()
const [open, { toggle, set: setOpen }] = useToggle()
const { update, address } = useWizardStore()
const { handleSubmit, control, reset } = useForm({
defaultValues: address,
resolver: zodResolver(formSchema)
})
const onSubmit = async (data: Address) => {
set(false)
console.log(data)
const onSubmit = async (address: Address) => {
setOpen(false)
update({ address })
}
return (
@@ -317,69 +322,69 @@ export function AddressDialog() {
</Field>
)}
/>
</FieldSet>
<FieldSet 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}
/>
<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>
)}
/>
{/* 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>
)}
/>
{/* 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>
)}
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
</FieldGroup>
</FieldSet>
</FieldGroup>
@@ -414,8 +419,10 @@ function PostcodeForm({ onChange }: PostcodeFormProps) {
type Schema = z.infer<typeof formSchema>
const { address } = useWizardStore()
const { control, handleSubmit, setError, formState } = useForm({
resolver: zodResolver(formSchema)
resolver: zodResolver(formSchema),
defaultValues: address
})
const { runAsync, loading } = useRequest(