@greatapps/common 1.1.516 → 1.1.517

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

@@ -1,348 +1,348 @@
-"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"),
-    neighborhood: z.string().min(1, "Bairro é 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("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="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>
-
-      <div className="flex gap-4">
-        <FormField
-          label="Bairro"
-          placeholder=""
-          {...register("neighborhood")}
-          error={!!errors.neighborhood}
-          errorMessage={errors.neighborhood?.message}
-        />
-        <FormField
-          label="Complemento"
-          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 {
+  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"),
+    neighborhood: z.string().min(1, "Bairro é 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("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="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>
+
+      <div className="flex gap-4">
+        <FormField
+          label="Bairro"
+          placeholder=""
+          {...register("neighborhood")}
+          error={!!errors.neighborhood}
+          errorMessage={errors.neighborhood?.message}
+        />
+        <FormField
+          label="Complemento"
+          optional
+          placeholder=""
+          {...register("complement")}
+          error={!!errors.complement}
+          errorMessage={errors.complement?.message}
+        />
+      </div>
+    </div>
+  );
+}