update items

This commit is contained in:
2025-12-26 11:19:14 -03:00
parent e7aa6a6694
commit 3cdded360f
11 changed files with 392 additions and 26 deletions

View File

@@ -1,4 +1,4 @@
import { useForm, Controller } from 'react-hook-form'
import { useForm, Controller, useWatch } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { ErrorMessage } from '@hookform/error-message'
import z from 'zod'
@@ -9,7 +9,28 @@ import { Label } from '@repo/ui/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@repo/ui/components/ui/radio-group'
import { Separator } from '@repo/ui/components/ui/separator'
import { Checkbox } from '@repo/ui/components/ui/checkbox'
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet
} from '@repo/ui/components/ui/field'
import { Input } from '@repo/ui/components/ui/input'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@repo/ui/components/ui/select'
import { Textarea } from '@repo/ui/components/ui/textarea'
import { useWizard } from '@/components/wizard'
import { Card, CardContent } from '@repo/ui/components/ui/card'
const formSchema = z.object({
payment_method: z.enum(['PIX', 'BANK_SLIP', 'CREDIT_CARD'], {
@@ -33,6 +54,7 @@ export function Payment({ onSubmit, defaultValues }: PaymentProps) {
},
resolver: zodResolver(formSchema)
})
const paymentMethod = useWatch({ control, name: 'payment_method' })
const onSubmit_ = async (data: Schema) => {
await onSubmit(data)
@@ -82,6 +104,8 @@ export function Payment({ onSubmit, defaultValues }: PaymentProps) {
)}
/>
{paymentMethod === 'CREDIT_CARD' ? <CreditCard /> : null}
<Separator />
<div className="flex justify-between gap-4 *:cursor-pointer">
@@ -100,3 +124,78 @@ export function Payment({ onSubmit, defaultValues }: PaymentProps) {
</form>
)
}
export function CreditCard() {
return (
<Card className="lg:max-w-md">
<CardContent>
<FieldGroup>
<FieldSet>
<FieldGroup>
<Field>
<FieldLabel htmlFor="checkout-7j9-card-number-uw1">
Número do cartão
</FieldLabel>
<Input id="checkout-7j9-card-number-uw1" required />
</Field>
<Field>
<FieldLabel htmlFor="checkout-7j9-card-name-43j">
Nome do titular
</FieldLabel>
<Input required />
</Field>
<div className="grid grid-cols-3 gap-4">
<Field>
<FieldLabel htmlFor="checkout-exp-month-ts6">Mês</FieldLabel>
<Select defaultValue="">
<SelectTrigger id="checkout-exp-month-ts6">
<SelectValue placeholder="MM" />
</SelectTrigger>
<SelectContent>
<SelectItem value="01">01</SelectItem>
<SelectItem value="02">02</SelectItem>
<SelectItem value="03">03</SelectItem>
<SelectItem value="04">04</SelectItem>
<SelectItem value="05">05</SelectItem>
<SelectItem value="06">06</SelectItem>
<SelectItem value="07">07</SelectItem>
<SelectItem value="08">08</SelectItem>
<SelectItem value="09">09</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="11">11</SelectItem>
<SelectItem value="12">12</SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel htmlFor="checkout-7j9-exp-year-f59">
Ano
</FieldLabel>
<Select defaultValue="">
<SelectTrigger id="checkout-7j9-exp-year-f59">
<SelectValue placeholder="AAAA" />
</SelectTrigger>
<SelectContent>
<SelectItem value="2024">2024</SelectItem>
<SelectItem value="2025">2025</SelectItem>
<SelectItem value="2026">2026</SelectItem>
<SelectItem value="2027">2027</SelectItem>
<SelectItem value="2028">2028</SelectItem>
<SelectItem value="2029">2029</SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel htmlFor="checkout-7j9-cvv">CVC</FieldLabel>
<Input id="checkout-7j9-cvv" placeholder="123" required />
</Field>
</div>
</FieldGroup>
</FieldSet>
</FieldGroup>
</CardContent>
</Card>
)
}