add dialog
This commit is contained in:
@@ -176,160 +176,151 @@ export function CreditCard({ control }: { control: Control<Schema> }) {
|
||||
<CardContent>
|
||||
<FieldGroup>
|
||||
<FieldSet>
|
||||
<FieldGroup>
|
||||
{/* Credir card number */}
|
||||
{/* Credir card number */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="credit_card.number"
|
||||
render={({ field: { onChange, ref, ...field }, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>Número do cartão</FieldLabel>
|
||||
<PatternFormat
|
||||
id={field.name}
|
||||
format="#### #### #### ####"
|
||||
mask="_"
|
||||
placeholder="•••• •••• •••• ••••"
|
||||
customInput={Input}
|
||||
getInputRef={ref}
|
||||
aria-invalid={fieldState.invalid}
|
||||
onValueChange={({ value }) => {
|
||||
onChange(value)
|
||||
}}
|
||||
{...field}
|
||||
/>
|
||||
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
{/* Holder name */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="credit_card.holder_name"
|
||||
defaultValue=""
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>Nome do titular</FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
aria-invalid={fieldState.invalid}
|
||||
{...field}
|
||||
/>
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FieldSet className="grid grid-cols-3 gap-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="credit_card.number"
|
||||
render={({
|
||||
field: { onChange, ref, ...field },
|
||||
fieldState
|
||||
}) => (
|
||||
name="credit_card.exp_month"
|
||||
defaultValue=""
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
Número do cartão
|
||||
</FieldLabel>
|
||||
<PatternFormat
|
||||
<FieldLabel htmlFor={field.name}>Mês</FieldLabel>
|
||||
<NativeSelect
|
||||
id={field.name}
|
||||
format="#### #### #### ####"
|
||||
mask="_"
|
||||
placeholder="•••• •••• •••• ••••"
|
||||
customInput={Input}
|
||||
getInputRef={ref}
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
aria-invalid={fieldState.invalid}
|
||||
onValueChange={({ value }) => {
|
||||
onChange(value)
|
||||
}}
|
||||
{...field}
|
||||
/>
|
||||
>
|
||||
<NativeSelectOption value="" disabled>
|
||||
Selecione
|
||||
</NativeSelectOption>
|
||||
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
{Array.from({ length: 12 }, (_, i) => {
|
||||
const v = String(i + 1).padStart(2, '0')
|
||||
return (
|
||||
<NativeSelectOption key={v} value={v}>
|
||||
{v}
|
||||
</NativeSelectOption>
|
||||
)
|
||||
})}
|
||||
</NativeSelect>
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
{/* Holder name */}
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="credit_card.holder_name"
|
||||
name="credit_card.exp_year"
|
||||
defaultValue=""
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>Ano</FieldLabel>
|
||||
<NativeSelect
|
||||
id={field.name}
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
aria-invalid={fieldState.invalid}
|
||||
>
|
||||
<NativeSelectOption value="" disabled>
|
||||
Selecione
|
||||
</NativeSelectOption>
|
||||
|
||||
{years.map((year) => (
|
||||
<NativeSelectOption key={year} value={String(year)}>
|
||||
{year}
|
||||
</NativeSelectOption>
|
||||
))}
|
||||
</NativeSelect>
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="credit_card.cvv"
|
||||
defaultValue=""
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
Nome do titular
|
||||
CVC
|
||||
<HoverCard openDelay={0}>
|
||||
<HoverCardTrigger asChild>
|
||||
<button type="button" tabIndex={-1}>
|
||||
<CircleQuestionMarkIcon className="size-4 text-muted-foreground" />
|
||||
</button>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent
|
||||
align="end"
|
||||
className="text-sm space-y-1.5 lg:w-78"
|
||||
>
|
||||
<p>
|
||||
O <Kbd>CVC</Kbd> é o código de segurança do cartão
|
||||
de crédito.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ele fica no verso do cartão e geralmente possui{' '}
|
||||
<Kbd>3 dígitos</Kbd> (ou <Kbd>4 dígitos</Kbd> na
|
||||
frente, no caso do American Express).
|
||||
</p>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
aria-invalid={fieldState.invalid}
|
||||
{...field}
|
||||
/>
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="credit_card.exp_month"
|
||||
defaultValue=""
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>Mês</FieldLabel>
|
||||
<NativeSelect
|
||||
id={field.name}
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
aria-invalid={fieldState.invalid}
|
||||
>
|
||||
<NativeSelectOption value="" disabled>
|
||||
Selecione
|
||||
</NativeSelectOption>
|
||||
|
||||
{Array.from({ length: 12 }, (_, i) => {
|
||||
const v = String(i + 1).padStart(2, '0')
|
||||
return (
|
||||
<NativeSelectOption key={v} value={v}>
|
||||
{v}
|
||||
</NativeSelectOption>
|
||||
)
|
||||
})}
|
||||
</NativeSelect>
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="credit_card.exp_year"
|
||||
defaultValue=""
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>Ano</FieldLabel>
|
||||
<NativeSelect
|
||||
id={field.name}
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
aria-invalid={fieldState.invalid}
|
||||
>
|
||||
<NativeSelectOption value="" disabled>
|
||||
Selecione
|
||||
</NativeSelectOption>
|
||||
|
||||
{years.map((year) => (
|
||||
<NativeSelectOption key={year} value={String(year)}>
|
||||
{year}
|
||||
</NativeSelectOption>
|
||||
))}
|
||||
</NativeSelect>
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="credit_card.cvv"
|
||||
defaultValue=""
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
CVC
|
||||
<HoverCard openDelay={0}>
|
||||
<HoverCardTrigger asChild>
|
||||
<button type="button" tabIndex={-1}>
|
||||
<CircleQuestionMarkIcon className="size-4 text-muted-foreground" />
|
||||
</button>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent
|
||||
align="end"
|
||||
className="text-sm space-y-1.5 lg:w-78"
|
||||
>
|
||||
<p>
|
||||
O <Kbd>CVC</Kbd> é o código de segurança do cartão
|
||||
de crédito.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ele fica no verso do cartão e geralmente possui{' '}
|
||||
<Kbd>3 dígitos</Kbd> (ou <Kbd>4 dígitos</Kbd> na
|
||||
frente, no caso do American Express).
|
||||
</p>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
aria-invalid={fieldState.invalid}
|
||||
{...field}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
</FieldSet>
|
||||
</FieldGroup>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user