@greatapps/common 1.1.699 → 1.1.700

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

@@ -1,363 +1,363 @@
-"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 { COUNTRIES } from "../../../utils/countries";
-import {
-  formatCPF,
-  formatCNPJ,
-  formatPostalCode,
-} from "../../../utils/format/masks";
-import z from "zod";
-import {
-  CardCvcElement,
-  CardExpiryElement,
-  CardNumberElement,
-} from "@stripe/react-stripe-js";
-import { useTranslations } from "next-intl";
-
-const stripeElementOptions = {
-  style: {
-    base: {
-      fontSize: "16px",
-      color: "#030712",
-      fontFamily: "Inter, sans-serif",
-      "::placeholder": {
-        color: "#9ca3af",
-      },
-    },
-  },
-};
-
-export function buildCardFormSchema(isInternational: boolean) {
-  const base = z.object({
-    name: z.string().min(1, "Nome é obrigatório"),
-    country: z.string().min(1, "País é obrigatório"),
-    personType: z.enum(["pf", "pj"]).optional(),
-    cpf: z.string().optional(),
-    cnpj: z.string().optional(),
-    fullName: z.string().min(1, "Nome completo é obrigatório"),
-    cep: z.string().min(isInternational ? 1 : 9, isInternational ? "Código postal é obrigatório" : "CEP é obrigatório"),
-    street: z.string().min(1, "Endereço é obrigatório"),
-    streetNumber: isInternational ? z.string().optional() : z.string().min(1, "Número é obrigatório"),
-    city: z.string().min(1, "Cidade é obrigatória"),
-    state: z.string().min(1, "UF é obrigatório"),
-    neighborhood: isInternational ? z.string().optional() : z.string().min(1, "Bairro é obrigatório"),
-    complement: z.string().optional(),
-  });
-  if (isInternational) return base;
-  return base.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 const cardFormSchema = buildCardFormSchema(false);
-
-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;
-  };
-  readonly isInternational?: boolean;
-};
-
-export function CardFormFields({
-  form,
-  onStripeChange,
-  stripeErrors,
-  isInternational = false,
-}: CardFormFieldsProps) {
-  const translate = useTranslations();
-  const {
-    register,
-    watch,
-    setValue,
-    formState: { errors },
-  } = form;
-
-  const personType = watch("personType");
-
-  return (
-    <div className="flex flex-col gap-5">
-      <FormField
-        label={translate('common.cards.form.nameOnCard')}
-        placeholder={translate('common.cards.form.typeHere')}
-        {...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">
-          {translate('common.cards.form.cardNumber')}
-        </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">
-            {translate('common.cards.form.cardExpiry')}
-          </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">{translate('common.cards.form.cardCvc')}</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={translate('common.cards.form.country')}
-        placeholder={translate('common.cards.form.select')}
-        value={watch("country")}
-        onChange={(value) => setValue("country", value as string)}
-        options={COUNTRIES.map((c) => ({ value: c.iso, label: c.name }))}
-      />
-
-      {!isInternational && (
-        <div className="flex gap-4">
-          <SelectField
-            label={translate('common.cards.form.personType')}
-            placeholder={translate('common.cards.form.select')}
-            value={personType}
-            onChange={(value) => {
-              setValue("personType", value as "pf" | "pj");
-              setValue("cpf", "");
-              setValue("cnpj", "");
-            }}
-            options={[
-              { value: "pf", label: translate('common.cards.form.personTypePf') },
-              { value: "pj", label: translate('common.cards.form.personTypePj') },
-            ]}
-            containerClassName="flex-1"
-          />
-          <div className="flex-1">
-            {personType === "pj" ? (
-              <FormField
-                label={translate('common.cards.form.cnpj')}
-                placeholder="__.___.___/____-__"
-                {...register("cnpj", {
-                  onChange: (e) => {
-                    setValue("cnpj", formatCNPJ(e.target.value));
-                  },
-                })}
-                error={!!errors.cpf}
-                errorMessage={errors.cpf?.message}
-              />
-            ) : (
-              <FormField
-                label={translate('common.cards.form.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>;
-  readonly isInternational?: boolean;
-};
-
-export function BillingFormFields({ form, isInternational = false }: BillingFormFieldsProps) {
-  const translate = useTranslations();
-  const {
-    register,
-    setValue,
-    formState: { errors },
-  } = form;
-
-  const { mutateAsync: lookupCep } = useViaCep();
-
-  const handleCepChange = (rawValue: string) => {
-    if (isInternational) {
-      setValue("cep", rawValue);
-      return;
-    }
-    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("neighborhood", data.bairro, { 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={translate('common.cards.form.fullName')}
-        placeholder={translate('common.cards.form.typeHere')}
-        {...register("fullName")}
-        error={!!errors.fullName}
-        errorMessage={errors.fullName?.message}
-      />
-
-      <FormField
-        label={isInternational ? translate('common.cards.form.postalCode') : translate('common.cards.form.cep')}
-        placeholder={isInternational ? "" : "_____-___"}
-        {...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={translate('common.cards.form.street')}
-            placeholder=""
-            {...register("street")}
-            error={!!errors.street}
-            errorMessage={errors.street?.message}
-          />
-        </div>
-        <div className="flex-[1]">
-          <FormField
-            label={translate('common.cards.form.streetNumber')}
-            placeholder=""
-            {...register("streetNumber")}
-            error={!!errors.streetNumber}
-            errorMessage={errors.streetNumber?.message}
-          />
-        </div>
-      </div>
-
-      <div className="flex gap-4">
-        <div className="flex-1">
-          <FormField
-            label={translate('common.cards.form.city')}
-            placeholder=""
-            {...register("city")}
-            error={!!errors.city}
-            errorMessage={errors.city?.message}
-          />
-        </div>
-        <div className="flex-1">
-          <FormField
-            label={isInternational ? translate('common.cards.form.stateProvince') : translate('common.cards.form.state')}
-            placeholder=""
-            {...register("state")}
-            error={!!errors.state}
-            errorMessage={errors.state?.message}
-          />
-        </div>
-      </div>
-
-      <div className="flex gap-4">
-        {!isInternational && (
-          <FormField
-            label={translate('common.cards.form.neighborhood')}
-            placeholder=""
-            {...register("neighborhood")}
-            error={!!errors.neighborhood}
-            errorMessage={errors.neighborhood?.message}
-          />
-        )}
-        <FormField
-          label={translate('common.cards.form.complement')}
-          optional
-          placeholder=""
-          {...register("complement")}
-          error={!!errors.complement}
-          errorMessage={errors.complement?.message}
-        />
-      </div>
-    </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 { COUNTRIES } from "../../../utils/countries";
+import {
+  formatCPF,
+  formatCNPJ,
+  formatPostalCode,
+} from "../../../utils/format/masks";
+import z from "zod";
+import {
+  CardCvcElement,
+  CardExpiryElement,
+  CardNumberElement,
+} from "@stripe/react-stripe-js";
+import { useTranslations } from "next-intl";
+
+const stripeElementOptions = {
+  style: {
+    base: {
+      fontSize: "16px",
+      color: "#030712",
+      fontFamily: "Inter, sans-serif",
+      "::placeholder": {
+        color: "#9ca3af",
+      },
+    },
+  },
+};
+
+export function buildCardFormSchema(isInternational: boolean) {
+  const base = z.object({
+    name: z.string().min(1, "Nome é obrigatório"),
+    country: z.string().min(1, "País é obrigatório"),
+    personType: z.enum(["pf", "pj"]).optional(),
+    cpf: z.string().optional(),
+    cnpj: z.string().optional(),
+    fullName: z.string().min(1, "Nome completo é obrigatório"),
+    cep: z.string().min(isInternational ? 1 : 9, isInternational ? "Código postal é obrigatório" : "CEP é obrigatório"),
+    street: z.string().min(1, "Endereço é obrigatório"),
+    streetNumber: isInternational ? z.string().optional() : z.string().min(1, "Número é obrigatório"),
+    city: z.string().min(1, "Cidade é obrigatória"),
+    state: z.string().min(1, "UF é obrigatório"),
+    neighborhood: isInternational ? z.string().optional() : z.string().min(1, "Bairro é obrigatório"),
+    complement: z.string().optional(),
+  });
+  if (isInternational) return base;
+  return base.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 const cardFormSchema = buildCardFormSchema(false);
+
+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;
+  };
+  readonly isInternational?: boolean;
+};
+
+export function CardFormFields({
+  form,
+  onStripeChange,
+  stripeErrors,
+  isInternational = false,
+}: CardFormFieldsProps) {
+  const translate = useTranslations();
+  const {
+    register,
+    watch,
+    setValue,
+    formState: { errors },
+  } = form;
+
+  const personType = watch("personType");
+
+  return (
+    <div className="flex flex-col gap-5">
+      <FormField
+        label={translate('common.cards.form.nameOnCard')}
+        placeholder={translate('common.cards.form.typeHere')}
+        {...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">
+          {translate('common.cards.form.cardNumber')}
+        </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">
+            {translate('common.cards.form.cardExpiry')}
+          </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">{translate('common.cards.form.cardCvc')}</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={translate('common.cards.form.country')}
+        placeholder={translate('common.cards.form.select')}
+        value={watch("country")}
+        onChange={(value) => setValue("country", value as string)}
+        options={COUNTRIES.map((c) => ({ value: c.iso, label: c.name }))}
+      />
+
+      {!isInternational && (
+        <div className="flex gap-4">
+          <SelectField
+            label={translate('common.cards.form.personType')}
+            placeholder={translate('common.cards.form.select')}
+            value={personType}
+            onChange={(value) => {
+              setValue("personType", value as "pf" | "pj");
+              setValue("cpf", "");
+              setValue("cnpj", "");
+            }}
+            options={[
+              { value: "pf", label: translate('common.cards.form.personTypePf') },
+              { value: "pj", label: translate('common.cards.form.personTypePj') },
+            ]}
+            containerClassName="flex-1"
+          />
+          <div className="flex-1">
+            {personType === "pj" ? (
+              <FormField
+                label={translate('common.cards.form.cnpj')}
+                placeholder="__.___.___/____-__"
+                {...register("cnpj", {
+                  onChange: (e) => {
+                    setValue("cnpj", formatCNPJ(e.target.value));
+                  },
+                })}
+                error={!!errors.cpf}
+                errorMessage={errors.cpf?.message}
+              />
+            ) : (
+              <FormField
+                label={translate('common.cards.form.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>;
+  readonly isInternational?: boolean;
+};
+
+export function BillingFormFields({ form, isInternational = false }: BillingFormFieldsProps) {
+  const translate = useTranslations();
+  const {
+    register,
+    setValue,
+    formState: { errors },
+  } = form;
+
+  const { mutateAsync: lookupCep } = useViaCep();
+
+  const handleCepChange = (rawValue: string) => {
+    if (isInternational) {
+      setValue("cep", rawValue);
+      return;
+    }
+    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("neighborhood", data.bairro, { 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={translate('common.cards.form.fullName')}
+        placeholder={translate('common.cards.form.typeHere')}
+        {...register("fullName")}
+        error={!!errors.fullName}
+        errorMessage={errors.fullName?.message}
+      />
+
+      <FormField
+        label={isInternational ? translate('common.cards.form.postalCode') : translate('common.cards.form.cep')}
+        placeholder={isInternational ? "" : "_____-___"}
+        {...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={translate('common.cards.form.street')}
+            placeholder=""
+            {...register("street")}
+            error={!!errors.street}
+            errorMessage={errors.street?.message}
+          />
+        </div>
+        <div className="flex-[1]">
+          <FormField
+            label={translate('common.cards.form.streetNumber')}
+            placeholder=""
+            {...register("streetNumber")}
+            error={!!errors.streetNumber}
+            errorMessage={errors.streetNumber?.message}
+          />
+        </div>
+      </div>
+
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <FormField
+            label={translate('common.cards.form.city')}
+            placeholder=""
+            {...register("city")}
+            error={!!errors.city}
+            errorMessage={errors.city?.message}
+          />
+        </div>
+        <div className="flex-1">
+          <FormField
+            label={isInternational ? translate('common.cards.form.stateProvince') : translate('common.cards.form.state')}
+            placeholder=""
+            {...register("state")}
+            error={!!errors.state}
+            errorMessage={errors.state?.message}
+          />
+        </div>
+      </div>
+
+      <div className="flex gap-4">
+        {!isInternational && (
+          <FormField
+            label={translate('common.cards.form.neighborhood')}
+            placeholder=""
+            {...register("neighborhood")}
+            error={!!errors.neighborhood}
+            errorMessage={errors.neighborhood?.message}
+          />
+        )}
+        <FormField
+          label={translate('common.cards.form.complement')}
+          optional
+          placeholder=""
+          {...register("complement")}
+          error={!!errors.complement}
+          errorMessage={errors.complement?.message}
+        />
+      </div>
+    </div>
+  );
+}