@greatapps/common 1.1.375 → 1.1.376

package/src/components/modals/cards/CardFormFields.tsx

@@ -1,294 +1,294 @@
-'use client';
-
-import { UseFormReturn } from 'react-hook-form';
-import { useViaCep } from '../../../modules/accounts/hooks/useViaCep';
-import { FormField } from '../../ui/form/FormField';
-import { SelectField } from '../../ui/form/SelectField';
-import { formatCPF, formatCNPJ, formatPostalCode } from '../../../utils/format/masks';
-import z from 'zod';
-import { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';
-
-const stripeElementOptions = {
-  style: {
-    base: {
-      fontSize: '16px',
-      color: '#030712',
-      fontFamily: 'Inter, sans-serif',
-      '::placeholder': {
-        color: '#9ca3af',
-      },
-    },
-  },
-};
-
-export const cardFormSchema = z
-  .object({
-    name: z.string().min(1, 'Nome é obrigatório'),
-    country: z.string().min(1, 'País é obrigatório'),
-    personType: z.enum(['pf', 'pj']),
-    cpf: z.string().optional(),
-    cnpj: z.string().optional(),
-    fullName: z.string().min(1, 'Nome completo é obrigatório'),
-    cep: z.string().min(9, 'CEP é obrigatório'),
-    street: z.string().min(1, 'Endereço é obrigatório'),
-    streetNumber: z.string().min(1, 'Número é obrigatório'),
-    city: z.string().min(1, 'Cidade é obrigatória'),
-    state: z.string().min(1, 'UF é obrigatório'),
-    complement: z.string().optional(),
-  })
-  .refine(
-    (data) => {
-      if (data.personType === 'pf') return !!data.cpf && data.cpf.length >= 14;
-      return !!data.cnpj && data.cnpj.length >= 18;
-    },
-    {
-      message: 'Documento é obrigatório',
-      path: ['cpf'],
-    }
-  );
-
-export type CardFormData = z.infer<typeof cardFormSchema>;
-
-export type StripeElementsStatus = {
-  cardNumber: boolean;
-  cardExpiry: boolean;
-  cardCvc: boolean;
-};
-
-export const STEP1_FIELDS = ['name', 'country', 'personType', 'cpf', 'cnpj'] as const;
-
-type CardFormFieldsProps = {
-  readonly form: UseFormReturn<CardFormData>;
-  readonly onStripeChange: (field: keyof StripeElementsStatus, complete: boolean) => void;
-  readonly stripeErrors: { cardNumber?: string; cardExpiry?: string; cardCvc?: string };
-};
-
-export function CardFormFields({ form, onStripeChange, stripeErrors }: CardFormFieldsProps) {
-  const {
-    register,
-    watch,
-    setValue,
-    formState: { errors },
-  } = form;
-
-  const personType = watch('personType');
-
-  return (
-    <div className="flex flex-col gap-5">
-      <FormField
-        label="Nome impresso no cartão"
-        placeholder="Digite aqui"
-        {...register('name')}
-        error={!!errors.name}
-        errorMessage={errors.name?.message}
-      />
-
-      <div className="flex flex-col gap-1.5">
-        <label className="paragraph-xsmall-semibold text-zinc-600">Número do cartão</label>
-        <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative">
-          <div className="w-full">
-            <CardNumberElement
-              options={{ ...stripeElementOptions, showIcon: true }}
-              onChange={(e: { complete: boolean }) => onStripeChange('cardNumber', e.complete)}
-            />
-          </div>
-        </div>
-        {stripeErrors.cardNumber && (
-          <p className="paragraph-xsmall-semibold text-red-600">{stripeErrors.cardNumber}</p>
-        )}
-      </div>
-
-      <div className="flex gap-4">
-        <div className="flex-1 flex flex-col gap-1.5">
-          <label className="paragraph-xsmall-semibold text-zinc-600">Data de validade</label>
-          <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
-            <div className="w-full">
-              <CardExpiryElement
-                options={stripeElementOptions}
-                onChange={(e: { complete: boolean }) => onStripeChange('cardExpiry', e.complete)}
-              />
-            </div>
-          </div>
-          {stripeErrors.cardExpiry && (
-            <p className="paragraph-xsmall-semibold text-red-600">{stripeErrors.cardExpiry}</p>
-          )}
-        </div>
-
-        <div className="flex-1 flex flex-col gap-1.5">
-          <label className="paragraph-xsmall-semibold text-zinc-600">CVC</label>
-          <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
-            <div className="w-full">
-              <CardCvcElement
-                options={stripeElementOptions}
-                onChange={(e: { complete: boolean }) => onStripeChange('cardCvc', e.complete)}
-              />
-            </div>
-          </div>
-          {stripeErrors.cardCvc && (
-            <p className="paragraph-xsmall-semibold text-red-600">{stripeErrors.cardCvc}</p>
-          )}
-        </div>
-      </div>
-
-      <SelectField
-        label="País"
-        placeholder="Selecione"
-        value={watch('country')}
-        onChange={(value) => setValue('country', value as string)}
-        options={[
-          { value: 'BR', label: 'Brasil' },
-          { value: 'ES', label: 'Espanha' },
-          { value: 'US', label: 'Estados Unidos' },
-        ]}
-      />
-
-      <div className="flex gap-4">
-        <SelectField
-          label="Tipo de pessoa"
-          placeholder="Selecione"
-          value={personType}
-          onChange={(value) => {
-            setValue('personType', value as 'pf' | 'pj');
-            setValue('cpf', '');
-            setValue('cnpj', '');
-          }}
-          options={[
-            { value: 'pf', label: 'Pessoa física' },
-            { value: 'pj', label: 'Pessoa jurídica' },
-          ]}
-          containerClassName="flex-1"
-        />
-        <div className="flex-1">
-          {personType === 'pj' ? (
-            <FormField
-              label="CNPJ"
-              placeholder="__.___.___/____-__"
-              {...register('cnpj', {
-                onChange: (e) => {
-                  setValue('cnpj', formatCNPJ(e.target.value));
-                },
-              })}
-              error={!!errors.cpf}
-              errorMessage={errors.cpf?.message}
-            />
-          ) : (
-            <FormField
-              label="CPF"
-              placeholder="___.___.___-__"
-              {...register('cpf', {
-                onChange: (e) => {
-                  setValue('cpf', formatCPF(e.target.value));
-                },
-              })}
-              error={!!errors.cpf}
-              errorMessage={errors.cpf?.message}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-type BillingFormFieldsProps = {
-  readonly form: UseFormReturn<CardFormData>;
-};
-
-export function BillingFormFields({ form }: BillingFormFieldsProps) {
-  const {
-    register,
-    setValue,
-    formState: { errors },
-  } = form;
-
-  const { mutateAsync: lookupCep } = useViaCep();
-
-  const handleCepChange = (rawValue: string) => {
-    const masked = formatPostalCode(rawValue);
-    setValue('cep', masked);
-
-    const digits = rawValue.replace(/\D/g, '');
-    if (digits.length === 8) {
-      lookupCep(digits).then((data) => {
-        setValue('street', data.logradouro, { shouldValidate: true });
-        setValue('city', data.localidade, { shouldValidate: true });
-        setValue('state', data.uf, { shouldValidate: true });
-      }).catch(() => {
-        // silently ignore — user can fill manually
-      });
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-5">
-      <FormField
-        label="Nome completo"
-        placeholder="Digite aqui"
-        {...register('fullName')}
-        error={!!errors.fullName}
-        errorMessage={errors.fullName?.message}
-      />
-
-      <FormField
-        label="CEP"
-        placeholder="_____-___"
-        {...register('cep', {
-          onChange: (e) => handleCepChange(e.target.value),
-        })}
-        error={!!errors.cep}
-        errorMessage={errors.cep?.message}
-      />
-
-      <div className="flex gap-4">
-        <div className="flex-[4]">
-          <FormField
-            label="Endereço"
-            placeholder=""
-            {...register('street')}
-            error={!!errors.street}
-            errorMessage={errors.street?.message}
-          />
-        </div>
-        <div className="flex-[1]">
-          <FormField
-            label="Número"
-            placeholder=""
-            {...register('streetNumber')}
-            error={!!errors.streetNumber}
-            errorMessage={errors.streetNumber?.message}
-          />
-        </div>
-      </div>
-
-      <div className="flex gap-4">
-        <div className="flex-1">
-          <FormField
-            label="Cidade"
-            placeholder=""
-            {...register('city')}
-            error={!!errors.city}
-            errorMessage={errors.city?.message}
-          />
-        </div>
-        <div className="flex-1">
-          <FormField
-            label="UF"
-            placeholder=""
-            {...register('state')}
-            error={!!errors.state}
-            errorMessage={errors.state?.message}
-          />
-        </div>
-      </div>
-
-      <FormField
-        label="Complemento"
-        optional
-        placeholder=""
-        {...register('complement')}
-        error={!!errors.complement}
-        errorMessage={errors.complement?.message}
-      />
-    </div>
-  );
-}
+'use client';
+
+import { UseFormReturn } from 'react-hook-form';
+import { useViaCep } from '../../../modules/accounts/hooks/useViaCep';
+import { FormField } from '../../ui/form/FormField';
+import { SelectField } from '../../ui/form/SelectField';
+import { formatCPF, formatCNPJ, formatPostalCode } from '../../../utils/format/masks';
+import z from 'zod';
+import { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';
+
+const stripeElementOptions = {
+  style: {
+    base: {
+      fontSize: '16px',
+      color: '#030712',
+      fontFamily: 'Inter, sans-serif',
+      '::placeholder': {
+        color: '#9ca3af',
+      },
+    },
+  },
+};
+
+export const cardFormSchema = z
+  .object({
+    name: z.string().min(1, 'Nome é obrigatório'),
+    country: z.string().min(1, 'País é obrigatório'),
+    personType: z.enum(['pf', 'pj']),
+    cpf: z.string().optional(),
+    cnpj: z.string().optional(),
+    fullName: z.string().min(1, 'Nome completo é obrigatório'),
+    cep: z.string().min(9, 'CEP é obrigatório'),
+    street: z.string().min(1, 'Endereço é obrigatório'),
+    streetNumber: z.string().min(1, 'Número é obrigatório'),
+    city: z.string().min(1, 'Cidade é obrigatória'),
+    state: z.string().min(1, 'UF é obrigatório'),
+    complement: z.string().optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.personType === 'pf') return !!data.cpf && data.cpf.length >= 14;
+      return !!data.cnpj && data.cnpj.length >= 18;
+    },
+    {
+      message: 'Documento é obrigatório',
+      path: ['cpf'],
+    }
+  );
+
+export type CardFormData = z.infer<typeof cardFormSchema>;
+
+export type StripeElementsStatus = {
+  cardNumber: boolean;
+  cardExpiry: boolean;
+  cardCvc: boolean;
+};
+
+export const STEP1_FIELDS = ['name', 'country', 'personType', 'cpf', 'cnpj'] as const;
+
+type CardFormFieldsProps = {
+  readonly form: UseFormReturn<CardFormData>;
+  readonly onStripeChange: (field: keyof StripeElementsStatus, complete: boolean) => void;
+  readonly stripeErrors: { cardNumber?: string; cardExpiry?: string; cardCvc?: string };
+};
+
+export function CardFormFields({ form, onStripeChange, stripeErrors }: CardFormFieldsProps) {
+  const {
+    register,
+    watch,
+    setValue,
+    formState: { errors },
+  } = form;
+
+  const personType = watch('personType');
+
+  return (
+    <div className="flex flex-col gap-5">
+      <FormField
+        label="Nome impresso no cartão"
+        placeholder="Digite aqui"
+        {...register('name')}
+        error={!!errors.name}
+        errorMessage={errors.name?.message}
+      />
+
+      <div className="flex flex-col gap-1.5">
+        <label className="paragraph-xsmall-semibold text-zinc-600">Número do cartão</label>
+        <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative">
+          <div className="w-full">
+            <CardNumberElement
+              options={{ ...stripeElementOptions, showIcon: true }}
+              onChange={(e: { complete: boolean }) => onStripeChange('cardNumber', e.complete)}
+            />
+          </div>
+        </div>
+        {stripeErrors.cardNumber && (
+          <p className="paragraph-xsmall-semibold text-red-600">{stripeErrors.cardNumber}</p>
+        )}
+      </div>
+
+      <div className="flex gap-4">
+        <div className="flex-1 flex flex-col gap-1.5">
+          <label className="paragraph-xsmall-semibold text-zinc-600">Data de validade</label>
+          <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
+            <div className="w-full">
+              <CardExpiryElement
+                options={stripeElementOptions}
+                onChange={(e: { complete: boolean }) => onStripeChange('cardExpiry', e.complete)}
+              />
+            </div>
+          </div>
+          {stripeErrors.cardExpiry && (
+            <p className="paragraph-xsmall-semibold text-red-600">{stripeErrors.cardExpiry}</p>
+          )}
+        </div>
+
+        <div className="flex-1 flex flex-col gap-1.5">
+          <label className="paragraph-xsmall-semibold text-zinc-600">CVC</label>
+          <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
+            <div className="w-full">
+              <CardCvcElement
+                options={stripeElementOptions}
+                onChange={(e: { complete: boolean }) => onStripeChange('cardCvc', e.complete)}
+              />
+            </div>
+          </div>
+          {stripeErrors.cardCvc && (
+            <p className="paragraph-xsmall-semibold text-red-600">{stripeErrors.cardCvc}</p>
+          )}
+        </div>
+      </div>
+
+      <SelectField
+        label="País"
+        placeholder="Selecione"
+        value={watch('country')}
+        onChange={(value) => setValue('country', value as string)}
+        options={[
+          { value: 'BR', label: 'Brasil' },
+          { value: 'ES', label: 'Espanha' },
+          { value: 'US', label: 'Estados Unidos' },
+        ]}
+      />
+
+      <div className="flex gap-4">
+        <SelectField
+          label="Tipo de pessoa"
+          placeholder="Selecione"
+          value={personType}
+          onChange={(value) => {
+            setValue('personType', value as 'pf' | 'pj');
+            setValue('cpf', '');
+            setValue('cnpj', '');
+          }}
+          options={[
+            { value: 'pf', label: 'Pessoa física' },
+            { value: 'pj', label: 'Pessoa jurídica' },
+          ]}
+          containerClassName="flex-1"
+        />
+        <div className="flex-1">
+          {personType === 'pj' ? (
+            <FormField
+              label="CNPJ"
+              placeholder="__.___.___/____-__"
+              {...register('cnpj', {
+                onChange: (e) => {
+                  setValue('cnpj', formatCNPJ(e.target.value));
+                },
+              })}
+              error={!!errors.cpf}
+              errorMessage={errors.cpf?.message}
+            />
+          ) : (
+            <FormField
+              label="CPF"
+              placeholder="___.___.___-__"
+              {...register('cpf', {
+                onChange: (e) => {
+                  setValue('cpf', formatCPF(e.target.value));
+                },
+              })}
+              error={!!errors.cpf}
+              errorMessage={errors.cpf?.message}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type BillingFormFieldsProps = {
+  readonly form: UseFormReturn<CardFormData>;
+};
+
+export function BillingFormFields({ form }: BillingFormFieldsProps) {
+  const {
+    register,
+    setValue,
+    formState: { errors },
+  } = form;
+
+  const { mutateAsync: lookupCep } = useViaCep();
+
+  const handleCepChange = (rawValue: string) => {
+    const masked = formatPostalCode(rawValue);
+    setValue('cep', masked);
+
+    const digits = rawValue.replace(/\D/g, '');
+    if (digits.length === 8) {
+      lookupCep(digits).then((data) => {
+        setValue('street', data.logradouro, { shouldValidate: true });
+        setValue('city', data.localidade, { shouldValidate: true });
+        setValue('state', data.uf, { shouldValidate: true });
+      }).catch(() => {
+        // silently ignore — user can fill manually
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      <FormField
+        label="Nome completo"
+        placeholder="Digite aqui"
+        {...register('fullName')}
+        error={!!errors.fullName}
+        errorMessage={errors.fullName?.message}
+      />
+
+      <FormField
+        label="CEP"
+        placeholder="_____-___"
+        {...register('cep', {
+          onChange: (e) => handleCepChange(e.target.value),
+        })}
+        error={!!errors.cep}
+        errorMessage={errors.cep?.message}
+      />
+
+      <div className="flex gap-4">
+        <div className="flex-[4]">
+          <FormField
+            label="Endereço"
+            placeholder=""
+            {...register('street')}
+            error={!!errors.street}
+            errorMessage={errors.street?.message}
+          />
+        </div>
+        <div className="flex-[1]">
+          <FormField
+            label="Número"
+            placeholder=""
+            {...register('streetNumber')}
+            error={!!errors.streetNumber}
+            errorMessage={errors.streetNumber?.message}
+          />
+        </div>
+      </div>
+
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <FormField
+            label="Cidade"
+            placeholder=""
+            {...register('city')}
+            error={!!errors.city}
+            errorMessage={errors.city?.message}
+          />
+        </div>
+        <div className="flex-1">
+          <FormField
+            label="UF"
+            placeholder=""
+            {...register('state')}
+            error={!!errors.state}
+            errorMessage={errors.state?.message}
+          />
+        </div>
+      </div>
+
+      <FormField
+        label="Complemento"
+        optional
+        placeholder=""
+        {...register('complement')}
+        error={!!errors.complement}
+        errorMessage={errors.complement?.message}
+      />
+    </div>
+  );
+}