@greatapps/common 1.1.290 → 1.1.291

package/dist/components/modals/cards/AddCardModal.mjs

@@ -1,12 +1,13 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../ui/overlay/Dialog";
 import { Button } from "../../ui/buttons/Button";
 import { Toast } from "../../ui/feedback/Toast";
 import { useModalManager } from "../../../store/useModalManager";
 import { useCreateCard } from "../../../modules/cards/hooks/create-card.hook";
-import { CardFormFields, cardFormSchema } from "./CardFormFields";
+import { useUpdateAccount } from "../../../modules/accounts/hooks/useAccountManagement";
+import { CardFormFields, BillingFormFields, cardFormSchema, STEP1_FIELDS } from "./CardFormFields";
 import { IconX } from "@tabler/icons-react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -15,8 +16,10 @@ import { toast } from "sonner";
 function AddCardModal() {
   const { activeModal, modalData, closeModal } = useModalManager();
   const isOpen = activeModal === "addCardModal";
+  const [currentStep, setCurrentStep] = useState(1);
   const onCardAdded = modalData.onCardAdded;
   const createCardMutation = useCreateCard();
+  const updateAccountMutation = useUpdateAccount();
   const elements = useElements();
   const stripe = useStripe();
   const form = useForm({
@@ -24,13 +27,24 @@ function AddCardModal() {
     mode: "onSubmit",
     reValidateMode: "onChange",
     defaultValues: {
-      country: "BR"
+      country: "BR",
+      personType: "pf"
     }
   });
   const handleClose = useCallback(() => {
     form.reset();
+    setCurrentStep(1);
     closeModal();
   }, [form, closeModal]);
+  const handleContinue = useCallback(async () => {
+    const valid = await form.trigger(STEP1_FIELDS);
+    if (valid) {
+      setCurrentStep(2);
+    }
+  }, [form]);
+  const handleBack = useCallback(() => {
+    setCurrentStep(1);
+  }, []);
   async function handleSubmit(data) {
     if (!stripe || !elements) return;
     const cardElement = elements.getElement(CardNumberElement);
@@ -39,10 +53,14 @@ function AddCardModal() {
       type: "card",
       card: cardElement,
       billing_details: {
-        name: data.name,
+        name: data.fullName,
         address: {
           country: data.country,
-          postal_code: data.postalCode
+          postal_code: data.cep,
+          line1: `${data.street}, ${data.streetNumber}`,
+          line2: data.complement || void 0,
+          city: data.city,
+          state: data.state
         }
       }
     });
@@ -60,36 +78,44 @@ function AddCardModal() {
       );
       return;
     }
-    const result = await createCardMutation.mutateAsync(
-      { payment_method_id: paymentMethod.id },
-      {
-        onError: () => {
-          handleClose();
-          toast.custom(
-            (t) => /* @__PURE__ */ jsx(
-              Toast,
-              {
-                variant: "error",
-                message: "N\xE3o foi poss\xEDvel salvar o seu novo cart\xE3o, tente novamente.",
-                toastId: t
-              }
-            ),
-            { duration: 5e3 }
-          );
-        }
+    try {
+      const [cardResult] = await Promise.all([
+        createCardMutation.mutateAsync({ payment_method_id: paymentMethod.id }),
+        updateAccountMutation.mutateAsync({
+          financial_document_type: data.personType === "pf" ? 1 : 2,
+          financial_document: data.personType === "pf" ? data.cpf : data.cnpj,
+          financial_name: data.fullName,
+          zipcode: data.cep,
+          address: data.street,
+          address_number: data.streetNumber,
+          address_complement: data.complement || "",
+          city: data.city,
+          state: data.state
+        })
+      ]);
+      if (cardResult.success && cardResult.data?.id != null) {
+        onCardAdded?.(cardResult.data.id.toString());
       }
-    );
-    if (result.success && result.data?.id != null) {
-      onCardAdded?.(result.data.id.toString());
+      toast.custom(
+        (t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "Cart\xE3o adicionado com sucesso.", toastId: t }),
+        { duration: 5e3 }
+      );
+      handleClose();
+    } catch {
+      toast.custom(
+        (t) => /* @__PURE__ */ jsx(
+          Toast,
+          {
+            variant: "error",
+            message: "N\xE3o foi poss\xEDvel salvar o seu novo cart\xE3o, tente novamente.",
+            toastId: t
+          }
+        ),
+        { duration: 5e3 }
+      );
     }
-    toast.custom(
-      (t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "Cart\xE3o adicionado com sucesso.", toastId: t }),
-      { duration: 5e3 }
-    );
-    handleClose();
   }
-  const isSubmitting = createCardMutation.isPending || form.formState.isSubmitting;
-  const isValid = form.formState.isValid;
+  const isSubmitting = createCardMutation.isPending || updateAccountMutation.isPending || form.formState.isSubmitting;
   return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
@@ -97,7 +123,7 @@ function AddCardModal() {
       className: "flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto",
       children: [
         /* @__PURE__ */ jsx(DialogHeader, { className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0", children: [
-          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: "Adicionar cart\xE3o" }),
+          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: currentStep === 1 ? "Adicionar cart\xE3o" : "Dados de cobran\xE7a" }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -109,17 +135,27 @@ function AddCardModal() {
             }
           )
         ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-1 bg-zinc-100 w-full", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full bg-cyan-400 transition-all duration-300 ease-in-out",
+            style: { width: currentStep === 1 ? "50%" : "100%" }
+          }
+        ) }),
         /* @__PURE__ */ jsxs(
           "form",
           {
             onSubmit: form.handleSubmit(handleSubmit),
             className: "flex flex-col flex-1 lg:flex-none",
             children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none", children: /* @__PURE__ */ jsx(CardFormFields, { form }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none", children: currentStep === 1 ? /* @__PURE__ */ jsx(CardFormFields, { form }) : /* @__PURE__ */ jsx(BillingFormFields, { form }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0", children: currentStep === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: handleClose, className: "h-10!", children: "Cancelar" }),
-                /* @__PURE__ */ jsx(Button, { type: "submit", className: "h-10!", disabled: isSubmitting || !isValid, children: isSubmitting ? "Adicionando cart\xE3o..." : "Adicionar cart\xE3o" })
-              ] })
+                /* @__PURE__ */ jsx(Button, { type: "button", className: "h-10!", onClick: handleContinue, children: "Continuar" })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: handleBack, className: "h-10!", children: "Voltar" }),
+                /* @__PURE__ */ jsx(Button, { type: "submit", className: "h-10!", disabled: isSubmitting, children: isSubmitting ? "Adicionando cart\xE3o..." : "Adicionar cart\xE3o" })
+              ] }) })
             ]
           }
         )

package/dist/components/modals/cards/AddCardModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modals/cards/AddCardModal.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';\nimport { CardFormFields, cardFormSchema } from './CardFormFields';\nimport type { CardFormData } from './CardFormFields';\nimport { IconX } from '@tabler/icons-react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { CardNumberElement, useElements, useStripe } from '@stripe/react-stripe-js';\nimport { toast } from 'sonner';\n\nexport default function AddCardModal() {\n  const { activeModal, modalData, closeModal } = useModalManager();\n  const isOpen = activeModal === 'addCardModal';\n\n  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;\n\n  const createCardMutation = useCreateCard();\n  const elements = useElements();\n  const stripe = useStripe();\n\n  const form = useForm<CardFormData>({\n    resolver: zodResolver(cardFormSchema),\n    mode: 'onSubmit',\n    reValidateMode: 'onChange',\n    defaultValues: {\n      country: 'BR',\n    },\n  });\n\n  const handleClose = useCallback(() => {\n    form.reset();\n    closeModal();\n  }, [form, closeModal]);\n\n  async function handleSubmit(data: CardFormData) {\n    if (!stripe || !elements) return;\n\n    const cardElement = elements.getElement(CardNumberElement);\n    if (!cardElement) return;\n\n    const { error, paymentMethod } = await stripe.createPaymentMethod({\n      type: 'card',\n      card: cardElement,\n      billing_details: {\n        name: data.name,\n        address: {\n          country: data.country,\n          postal_code: data.postalCode,\n        },\n      },\n    });\n\n    if (error) {\n      toast.custom(\n        (t) => (\n          <Toast\n            variant=\"error\"\n            message=\"Não foi possível adicionar o cartão na Stripe, tente novamente.\"\n            toastId={t}\n          />\n        ),\n        { duration: 5000 }\n      );\n      return;\n    }\n\n    const result = await createCardMutation.mutateAsync(\n      { payment_method_id: paymentMethod.id },\n      {\n        onError: () => {\n          handleClose();\n          toast.custom(\n            (t) => (\n              <Toast\n                variant=\"error\"\n                message=\"Não foi possível salvar o seu novo cartão, tente novamente.\"\n                toastId={t}\n              />\n            ),\n            { duration: 5000 }\n          );\n        },\n      }\n    );\n\n    if (result.success && result.data?.id != null) {\n      onCardAdded?.(result.data.id.toString());\n    }\n\n    toast.custom(\n      (t) => <Toast variant=\"success\" message=\"Cartão adicionado com sucesso.\" toastId={t} />,\n      { duration: 5000 }\n    );\n    handleClose();\n  }\n\n  const isSubmitting = createCardMutation.isPending || form.formState.isSubmitting;\n  const isValid = form.formState.isValid;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto\"\n      >\n        <DialogHeader className=\"p-0\">\n          <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0\">\n            <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n              Adicionar cartão\n            </DialogTitle>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              className=\"size-8! p-0 absolute right-4\"\n              onClick={handleClose}\n            >\n              <IconX size={18} />\n            </Button>\n          </div>\n        </DialogHeader>\n\n        <form\n          onSubmit={form.handleSubmit(handleSubmit)}\n          className=\"flex flex-col flex-1 lg:flex-none\"\n        >\n          <div className=\"flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none\">\n            <CardFormFields form={form} />\n          </div>\n\n          <div className=\"flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0\">\n            <Button variant=\"secondary\" type=\"button\" onClick={handleClose} className=\"h-10!\">\n              Cancelar\n            </Button>\n            <Button type=\"submit\" className=\"h-10!\" disabled={isSubmitting || !isValid}>\n              {isSubmitting ? 'Adicionando cartão...' : 'Adicionar cartão'}\n            </Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/modals/cards/AddCardModal.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';\nimport { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';\nimport { CardFormFields, BillingFormFields, cardFormSchema, STEP1_FIELDS } from './CardFormFields';\nimport type { CardFormData } from './CardFormFields';\nimport { IconX } from '@tabler/icons-react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { CardNumberElement, useElements, useStripe } from '@stripe/react-stripe-js';\nimport { toast } from 'sonner';\n\nexport default function AddCardModal() {\n  const { activeModal, modalData, closeModal } = useModalManager();\n  const isOpen = activeModal === 'addCardModal';\n  const [currentStep, setCurrentStep] = useState(1);\n\n  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;\n\n  const createCardMutation = useCreateCard();\n  const updateAccountMutation = useUpdateAccount();\n  const elements = useElements();\n  const stripe = useStripe();\n\n  const form = useForm<CardFormData>({\n    resolver: zodResolver(cardFormSchema),\n    mode: 'onSubmit',\n    reValidateMode: 'onChange',\n    defaultValues: {\n      country: 'BR',\n      personType: 'pf',\n    },\n  });\n\n  const handleClose = useCallback(() => {\n    form.reset();\n    setCurrentStep(1);\n    closeModal();\n  }, [form, closeModal]);\n\n  const handleContinue = useCallback(async () => {\n    const valid = await form.trigger(STEP1_FIELDS as unknown as (keyof CardFormData)[]);\n    if (valid) {\n      setCurrentStep(2);\n    }\n  }, [form]);\n\n  const handleBack = useCallback(() => {\n    setCurrentStep(1);\n  }, []);\n\n  async function handleSubmit(data: CardFormData) {\n    if (!stripe || !elements) return;\n\n    const cardElement = elements.getElement(CardNumberElement);\n    if (!cardElement) return;\n\n    const { error, paymentMethod } = await stripe.createPaymentMethod({\n      type: 'card',\n      card: cardElement,\n      billing_details: {\n        name: data.fullName,\n        address: {\n          country: data.country,\n          postal_code: data.cep,\n          line1: `${data.street}, ${data.streetNumber}`,\n          line2: data.complement || undefined,\n          city: data.city,\n          state: data.state,\n        },\n      },\n    });\n\n    if (error) {\n      toast.custom(\n        (t) => (\n          <Toast\n            variant=\"error\"\n            message=\"Não foi possível adicionar o cartão na Stripe, tente novamente.\"\n            toastId={t}\n          />\n        ),\n        { duration: 5000 }\n      );\n      return;\n    }\n\n    try {\n      const [cardResult] = await Promise.all([\n        createCardMutation.mutateAsync({ payment_method_id: paymentMethod.id }),\n        updateAccountMutation.mutateAsync({\n          financial_document_type: data.personType === 'pf' ? 1 : 2,\n          financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,\n          financial_name: data.fullName,\n          zipcode: data.cep,\n          address: data.street,\n          address_number: data.streetNumber,\n          address_complement: data.complement || '',\n          city: data.city,\n          state: data.state,\n        }),\n      ]);\n\n      if (cardResult.success && cardResult.data?.id != null) {\n        onCardAdded?.(cardResult.data.id.toString());\n      }\n\n      toast.custom(\n        (t) => <Toast variant=\"success\" message=\"Cartão adicionado com sucesso.\" toastId={t} />,\n        { duration: 5000 }\n      );\n      handleClose();\n    } catch {\n      toast.custom(\n        (t) => (\n          <Toast\n            variant=\"error\"\n            message=\"Não foi possível salvar o seu novo cartão, tente novamente.\"\n            toastId={t}\n          />\n        ),\n        { duration: 5000 }\n      );\n    }\n  }\n\n  const isSubmitting =\n    createCardMutation.isPending ||\n    updateAccountMutation.isPending ||\n    form.formState.isSubmitting;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto\"\n      >\n        <DialogHeader className=\"p-0\">\n          <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0\">\n            <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n              {currentStep === 1 ? 'Adicionar cartão' : 'Dados de cobrança'}\n            </DialogTitle>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              className=\"size-8! p-0 absolute right-4\"\n              onClick={handleClose}\n            >\n              <IconX size={18} />\n            </Button>\n          </div>\n        </DialogHeader>\n\n        {/* Progress bar */}\n        <div className=\"h-1 bg-zinc-100 w-full\">\n          <div\n            className=\"h-full bg-cyan-400 transition-all duration-300 ease-in-out\"\n            style={{ width: currentStep === 1 ? '50%' : '100%' }}\n          />\n        </div>\n\n        <form\n          onSubmit={form.handleSubmit(handleSubmit)}\n          className=\"flex flex-col flex-1 lg:flex-none\"\n        >\n          <div className=\"flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none\">\n            {currentStep === 1 ? (\n              <CardFormFields form={form} />\n            ) : (\n              <BillingFormFields form={form} />\n            )}\n          </div>\n\n          <div className=\"flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0\">\n            {currentStep === 1 ? (\n              <>\n                <Button variant=\"secondary\" type=\"button\" onClick={handleClose} className=\"h-10!\">\n                  Cancelar\n                </Button>\n                <Button type=\"button\" className=\"h-10!\" onClick={handleContinue}>\n                  Continuar\n                </Button>\n              </>\n            ) : (\n              <>\n                <Button variant=\"secondary\" type=\"button\" onClick={handleBack} className=\"h-10!\">\n                  Voltar\n                </Button>\n                <Button type=\"submit\" className=\"h-10!\" disabled={isSubmitting}>\n                  {isSubmitting ? 'Adicionando cartão...' : 'Adicionar cartão'}\n                </Button>\n              </>\n            )}\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/modals/cards/CardFormFields.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FormField } from "../../ui/form/FormField";
 import { SelectField } from "../../ui/form/SelectField";
-import { formatCPF, formatPostalCode } from "../../../utils/format/masks";
+import { formatCPF, formatCNPJ, formatPostalCode } from "../../../utils/format/masks";
 import z from "zod";
 import { CardCvcElement, CardExpiryElement, CardNumberElement } from "@stripe/react-stripe-js";
 const stripeElementOptions = {
@@ -23,9 +23,27 @@ const cardFormSchema = z.object({
   expiry: z.string().min(1, "Data de validade \xE9 obrigat\xF3ria"),
   cvv: z.string().min(1, "C\xF3digo de seguran\xE7a \xE9 obrigat\xF3rio"),
   country: z.string().min(1, "Pa\xEDs \xE9 obrigat\xF3rio"),
-  postalCode: z.string().optional(),
-  cpf: z.string().min(14, "CPF \xE9 obrigat\xF3rio")
-});
+  personType: z.enum(["pf", "pj"]),
+  cpf: z.string().optional(),
+  cnpj: z.string().optional(),
+  fullName: z.string().min(1, "Nome completo \xE9 obrigat\xF3rio"),
+  cep: z.string().min(9, "CEP \xE9 obrigat\xF3rio"),
+  street: z.string().min(1, "Endere\xE7o \xE9 obrigat\xF3rio"),
+  streetNumber: z.string().min(1, "N\xFAmero \xE9 obrigat\xF3rio"),
+  city: z.string().min(1, "Cidade \xE9 obrigat\xF3ria"),
+  state: z.string().min(1, "UF \xE9 obrigat\xF3rio"),
+  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 \xE9 obrigat\xF3rio",
+    path: ["cpf"]
+  }
+);
+const STEP1_FIELDS = ["name", "number", "expiry", "cvv", "country", "personType", "cpf", "cnpj"];
 function CardFormFields({ form }) {
   const {
     register,
@@ -33,6 +51,7 @@ function CardFormFields({ form }) {
     setValue,
     formState: { errors }
   } = form;
+  const personType = watch("personType");
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
     /* @__PURE__ */ jsx(
       FormField,
@@ -79,56 +98,161 @@ function CardFormFields({ form }) {
         errors.cvv && /* @__PURE__ */ jsx("p", { className: "paragraph-xsmall-semibold text-red-600", children: errors.cvv.message })
       ] })
     ] }),
+    /* @__PURE__ */ jsx(
+      SelectField,
+      {
+        label: "Pa\xEDs",
+        placeholder: "Selecione",
+        value: watch("country"),
+        onChange: (value) => setValue("country", value),
+        options: [
+          { value: "BR", label: "Brasil" },
+          { value: "ES", label: "Espanha" },
+          { value: "US", label: "Estados Unidos" }
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
       /* @__PURE__ */ jsx(
         SelectField,
         {
-          label: "Pa\xEDs",
+          label: "Tipo de pessoa",
           placeholder: "Selecione",
-          value: watch("country"),
-          onChange: (value) => setValue("country", value),
+          value: personType,
+          onChange: (value) => {
+            setValue("personType", value);
+            setValue("cpf", "");
+            setValue("cnpj", "");
+          },
           options: [
-            { value: "BR", label: "Brasil" },
-            { value: "ES", label: "Espanha" },
-            { value: "US", label: "Estados Unidos" }
+            { value: "pf", label: "Pessoa f\xEDsica" },
+            { value: "pj", label: "Pessoa jur\xEDdica" }
           ],
           containerClassName: "flex-1"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: personType === "pj" ? /* @__PURE__ */ jsx(
         FormField,
         {
-          label: "C\xF3digo postal",
-          optional: true,
-          placeholder: "",
-          ...register("postalCode", {
+          label: "CNPJ",
+          placeholder: "__.___.___/____-__",
+          ...register("cnpj", {
             onChange: (e) => {
-              setValue("postalCode", formatPostalCode(e.target.value));
+              setValue("cnpj", formatCNPJ(e.target.value));
             }
           }),
-          error: !!errors.postalCode,
-          errorMessage: errors.postalCode?.message
+          error: !!errors.cpf,
+          errorMessage: errors.cpf?.message
+        }
+      ) : /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "CPF",
+          placeholder: "___.___.___-__",
+          ...register("cpf", {
+            onChange: (e) => {
+              setValue("cpf", formatCPF(e.target.value));
+            }
+          }),
+          error: !!errors.cpf,
+          errorMessage: errors.cpf?.message
         }
       ) })
-    ] }),
+    ] })
+  ] });
+}
+function BillingFormFields({ form }) {
+  const {
+    register,
+    setValue,
+    formState: { errors }
+  } = form;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
     /* @__PURE__ */ jsx(
       FormField,
       {
-        label: "CPF",
-        placeholder: "___.___.___-__",
-        ...register("cpf", {
+        label: "Nome completo",
+        placeholder: "Digite aqui",
+        ...register("fullName"),
+        error: !!errors.fullName,
+        errorMessage: errors.fullName?.message
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: "CEP",
+        placeholder: "_____-___",
+        ...register("cep", {
           onChange: (e) => {
-            setValue("cpf", formatCPF(e.target.value));
+            setValue("cep", formatPostalCode(e.target.value));
           }
         }),
-        error: !!errors.cpf,
-        errorMessage: errors.cpf?.message
+        error: !!errors.cep,
+        errorMessage: errors.cep?.message
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-[2]", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "Endere\xE7o",
+          placeholder: "",
+          ...register("street"),
+          error: !!errors.street,
+          errorMessage: errors.street?.message
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "N\xFAmero",
+          placeholder: "",
+          ...register("streetNumber"),
+          error: !!errors.streetNumber,
+          errorMessage: errors.streetNumber?.message
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "Cidade",
+          placeholder: "",
+          ...register("city"),
+          error: !!errors.city,
+          errorMessage: errors.city?.message
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "UF",
+          placeholder: "",
+          ...register("state"),
+          error: !!errors.state,
+          errorMessage: errors.state?.message
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: "Complemento",
+        optional: true,
+        placeholder: "",
+        ...register("complement"),
+        error: !!errors.complement,
+        errorMessage: errors.complement?.message
       }
     )
   ] });
 }
 export {
+  BillingFormFields,
   CardFormFields,
+  STEP1_FIELDS,
   cardFormSchema
 };
 //# sourceMappingURL=CardFormFields.mjs.map

package/dist/components/modals/cards/CardFormFields.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modals/cards/CardFormFields.tsx"],"sourcesContent":["'use client';\n\nimport { UseFormReturn } from 'react-hook-form';\nimport { FormField } from '../../ui/form/FormField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport { formatCPF, formatPostalCode } from '../../../utils/format/masks';\nimport z from 'zod';\nimport { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';\n\nconst stripeElementOptions = {\n  style: {\n    base: {\n      fontSize: '16px',\n      color: '#030712',\n      fontFamily: 'Inter, sans-serif',\n      '::placeholder': {\n        color: '#9ca3af',\n      },\n    },\n  },\n};\n\nexport const cardFormSchema = z.object({\n  name: z.string().min(1, 'Nome é obrigatório'),\n  number: z.string().min(1, 'Número do cartão é obrigatório'),\n  expiry: z.string().min(1, 'Data de validade é obrigatória'),\n  cvv: z.string().min(1, 'Código de segurança é obrigatório'),\n  country: z.string().min(1, 'País é obrigatório'),\n  postalCode: z.string().optional(),\n  cpf: z.string().min(14, 'CPF é obrigatório'),\n});\n\nexport type CardFormData = z.infer<typeof cardFormSchema>;\n\ntype CardFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n};\n\nexport function CardFormFields({ form }: CardFormFieldsProps) {\n  const {\n    register,\n    watch,\n    setValue,\n    formState: { errors },\n  } = form;\n\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <FormField\n        label=\"Nome impresso no cartão\"\n        placeholder=\"Digite aqui\"\n        {...register('name')}\n        error={!!errors.name}\n        errorMessage={errors.name?.message}\n      />\n\n      <div className=\"flex flex-col gap-1.5\">\n        <label className=\"paragraph-xsmall-semibold text-zinc-600\">\n          Número do cartão\n        </label>\n        <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\">\n          <div className=\"w-full\">\n            <CardNumberElement\n              options={{ ...stripeElementOptions, showIcon: true }}\n              onChange={(e) =>\n                setValue('number', e.complete ? 'complete' : '', { shouldValidate: true })\n              }\n            />\n          </div>\n        </div>\n        {errors.number && (\n          <p className=\"paragraph-xsmall-semibold text-red-600\">{errors.number.message}</p>\n        )}\n      </div>\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">\n            Data de validade\n          </label>\n          <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\">\n            <div className=\"w-full\">\n              <CardExpiryElement\n                options={stripeElementOptions}\n                onChange={(e) =>\n                  setValue('expiry', e.complete ? 'complete' : '', { shouldValidate: true })\n                }\n              />\n            </div>\n          </div>\n          {errors.expiry && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{errors.expiry.message}</p>\n          )}\n        </div>\n\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">\n            CVC\n          </label>\n          <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\">\n            <div className=\"w-full\">\n              <CardCvcElement\n                options={stripeElementOptions}\n                onChange={(e) =>\n                  setValue('cvv', e.complete ? 'complete' : '', { shouldValidate: true })\n                }\n              />\n            </div>\n          </div>\n          {errors.cvv && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{errors.cvv.message}</p>\n          )}\n        </div>\n      </div>\n\n      <div className=\"flex gap-4\">\n        <SelectField\n          label=\"País\"\n          placeholder=\"Selecione\"\n          value={watch('country')}\n          onChange={(value) => setValue('country', value as string)}\n          options={[\n            { value: 'BR', label: 'Brasil' },\n            { value: 'ES', label: 'Espanha' },\n            { value: 'US', label: 'Estados Unidos' },\n          ]}\n          containerClassName=\"flex-1\"\n        />\n        <div className=\"flex-1\">\n          <FormField\n            label=\"Código postal\"\n            optional\n            placeholder=\"\"\n            {...register('postalCode', {\n              onChange: (e) => {\n                setValue('postalCode', formatPostalCode(e.target.value));\n              },\n            })}\n            error={!!errors.postalCode}\n            errorMessage={errors.postalCode?.message}\n          />\n        </div>\n      </div>\n\n      <FormField\n        label=\"CPF\"\n        placeholder=\"___.___.___-__\"\n        {...register('cpf', {\n          onChange: (e) => {\n            setValue('cpf', formatCPF(e.target.value));\n          },\n        })}\n        error={!!errors.cpf}\n        errorMessage={errors.cpf?.message}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/modals/cards/CardFormFields.tsx"],"sourcesContent":["'use client';\n\nimport { UseFormReturn } from 'react-hook-form';\nimport { FormField } from '../../ui/form/FormField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport { formatCPF, formatCNPJ, formatPostalCode } from '../../../utils/format/masks';\nimport z from 'zod';\nimport { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';\n\nconst stripeElementOptions = {\n  style: {\n    base: {\n      fontSize: '16px',\n      color: '#030712',\n      fontFamily: 'Inter, sans-serif',\n      '::placeholder': {\n        color: '#9ca3af',\n      },\n    },\n  },\n};\n\nexport const cardFormSchema = z\n  .object({\n    name: z.string().min(1, 'Nome é obrigatório'),\n    number: z.string().min(1, 'Número do cartão é obrigatório'),\n    expiry: z.string().min(1, 'Data de validade é obrigatória'),\n    cvv: z.string().min(1, 'Código de segurança é obrigatório'),\n    country: z.string().min(1, 'País é obrigatório'),\n    personType: z.enum(['pf', 'pj']),\n    cpf: z.string().optional(),\n    cnpj: z.string().optional(),\n    fullName: z.string().min(1, 'Nome completo é obrigatório'),\n    cep: z.string().min(9, 'CEP é obrigatório'),\n    street: z.string().min(1, 'Endereço é obrigatório'),\n    streetNumber: z.string().min(1, 'Número é obrigatório'),\n    city: z.string().min(1, 'Cidade é obrigatória'),\n    state: z.string().min(1, 'UF é obrigatório'),\n    complement: z.string().optional(),\n  })\n  .refine(\n    (data) => {\n      if (data.personType === 'pf') return !!data.cpf && data.cpf.length >= 14;\n      return !!data.cnpj && data.cnpj.length >= 18;\n    },\n    {\n      message: 'Documento é obrigatório',\n      path: ['cpf'],\n    }\n  );\n\nexport type CardFormData = z.infer<typeof cardFormSchema>;\n\nexport const STEP1_FIELDS = ['name', 'number', 'expiry', 'cvv', 'country', 'personType', 'cpf', 'cnpj'] as const;\n\ntype CardFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n};\n\nexport function CardFormFields({ form }: CardFormFieldsProps) {\n  const {\n    register,\n    watch,\n    setValue,\n    formState: { errors },\n  } = form;\n\n  const personType = watch('personType');\n\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <FormField\n        label=\"Nome impresso no cartão\"\n        placeholder=\"Digite aqui\"\n        {...register('name')}\n        error={!!errors.name}\n        errorMessage={errors.name?.message}\n      />\n\n      <div className=\"flex flex-col gap-1.5\">\n        <label className=\"paragraph-xsmall-semibold text-zinc-600\">Número do cartão</label>\n        <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\">\n          <div className=\"w-full\">\n            <CardNumberElement\n              options={{ ...stripeElementOptions, showIcon: true }}\n              onChange={(e) =>\n                setValue('number', e.complete ? 'complete' : '', { shouldValidate: true })\n              }\n            />\n          </div>\n        </div>\n        {errors.number && (\n          <p className=\"paragraph-xsmall-semibold text-red-600\">{errors.number.message}</p>\n        )}\n      </div>\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">Data de validade</label>\n          <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\">\n            <div className=\"w-full\">\n              <CardExpiryElement\n                options={stripeElementOptions}\n                onChange={(e) =>\n                  setValue('expiry', e.complete ? 'complete' : '', { shouldValidate: true })\n                }\n              />\n            </div>\n          </div>\n          {errors.expiry && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{errors.expiry.message}</p>\n          )}\n        </div>\n\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">CVC</label>\n          <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\">\n            <div className=\"w-full\">\n              <CardCvcElement\n                options={stripeElementOptions}\n                onChange={(e) =>\n                  setValue('cvv', e.complete ? 'complete' : '', { shouldValidate: true })\n                }\n              />\n            </div>\n          </div>\n          {errors.cvv && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{errors.cvv.message}</p>\n          )}\n        </div>\n      </div>\n\n      <SelectField\n        label=\"País\"\n        placeholder=\"Selecione\"\n        value={watch('country')}\n        onChange={(value) => setValue('country', value as string)}\n        options={[\n          { value: 'BR', label: 'Brasil' },\n          { value: 'ES', label: 'Espanha' },\n          { value: 'US', label: 'Estados Unidos' },\n        ]}\n      />\n\n      <div className=\"flex gap-4\">\n        <SelectField\n          label=\"Tipo de pessoa\"\n          placeholder=\"Selecione\"\n          value={personType}\n          onChange={(value) => {\n            setValue('personType', value as 'pf' | 'pj');\n            setValue('cpf', '');\n            setValue('cnpj', '');\n          }}\n          options={[\n            { value: 'pf', label: 'Pessoa física' },\n            { value: 'pj', label: 'Pessoa jurídica' },\n          ]}\n          containerClassName=\"flex-1\"\n        />\n        <div className=\"flex-1\">\n          {personType === 'pj' ? (\n            <FormField\n              label=\"CNPJ\"\n              placeholder=\"__.___.___/____-__\"\n              {...register('cnpj', {\n                onChange: (e) => {\n                  setValue('cnpj', formatCNPJ(e.target.value));\n                },\n              })}\n              error={!!errors.cpf}\n              errorMessage={errors.cpf?.message}\n            />\n          ) : (\n            <FormField\n              label=\"CPF\"\n              placeholder=\"___.___.___-__\"\n              {...register('cpf', {\n                onChange: (e) => {\n                  setValue('cpf', formatCPF(e.target.value));\n                },\n              })}\n              error={!!errors.cpf}\n              errorMessage={errors.cpf?.message}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype BillingFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n};\n\nexport function BillingFormFields({ form }: BillingFormFieldsProps) {\n  const {\n    register,\n    setValue,\n    formState: { errors },\n  } = form;\n\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <FormField\n        label=\"Nome completo\"\n        placeholder=\"Digite aqui\"\n        {...register('fullName')}\n        error={!!errors.fullName}\n        errorMessage={errors.fullName?.message}\n      />\n\n      <FormField\n        label=\"CEP\"\n        placeholder=\"_____-___\"\n        {...register('cep', {\n          onChange: (e) => {\n            setValue('cep', formatPostalCode(e.target.value));\n          },\n        })}\n        error={!!errors.cep}\n        errorMessage={errors.cep?.message}\n      />\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-[2]\">\n          <FormField\n            label=\"Endereço\"\n            placeholder=\"\"\n            {...register('street')}\n            error={!!errors.street}\n            errorMessage={errors.street?.message}\n          />\n        </div>\n        <div className=\"flex-1\">\n          <FormField\n            label=\"Número\"\n            placeholder=\"\"\n            {...register('streetNumber')}\n            error={!!errors.streetNumber}\n            errorMessage={errors.streetNumber?.message}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-1\">\n          <FormField\n            label=\"Cidade\"\n            placeholder=\"\"\n            {...register('city')}\n            error={!!errors.city}\n            errorMessage={errors.city?.message}\n          />\n        </div>\n        <div className=\"flex-1\">\n          <FormField\n            label=\"UF\"\n            placeholder=\"\"\n            {...register('state')}\n            error={!!errors.state}\n            errorMessage={errors.state?.message}\n          />\n        </div>\n      </div>\n\n      <FormField\n        label=\"Complemento\"\n        optional\n        placeholder=\"\"\n        {...register('complement')}\n        error={!!errors.complement}\n        errorMessage={errors.complement?.message}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/utils/constants/br-states.mjs

@@ -0,0 +1,33 @@
+const BR_STATE_OPTIONS = [
+  { value: "AC", label: "AC" },
+  { value: "AL", label: "AL" },
+  { value: "AP", label: "AP" },
+  { value: "AM", label: "AM" },
+  { value: "BA", label: "BA" },
+  { value: "CE", label: "CE" },
+  { value: "DF", label: "DF" },
+  { value: "ES", label: "ES" },
+  { value: "GO", label: "GO" },
+  { value: "MA", label: "MA" },
+  { value: "MT", label: "MT" },
+  { value: "MS", label: "MS" },
+  { value: "MG", label: "MG" },
+  { value: "PA", label: "PA" },
+  { value: "PB", label: "PB" },
+  { value: "PR", label: "PR" },
+  { value: "PE", label: "PE" },
+  { value: "PI", label: "PI" },
+  { value: "RJ", label: "RJ" },
+  { value: "RN", label: "RN" },
+  { value: "RS", label: "RS" },
+  { value: "RO", label: "RO" },
+  { value: "RR", label: "RR" },
+  { value: "SC", label: "SC" },
+  { value: "SP", label: "SP" },
+  { value: "SE", label: "SE" },
+  { value: "TO", label: "TO" }
+];
+export {
+  BR_STATE_OPTIONS
+};
+//# sourceMappingURL=br-states.mjs.map

package/dist/utils/constants/br-states.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/constants/br-states.ts"],"sourcesContent":["export const BR_STATE_OPTIONS = [\n  { value: 'AC', label: 'AC' },\n  { value: 'AL', label: 'AL' },\n  { value: 'AP', label: 'AP' },\n  { value: 'AM', label: 'AM' },\n  { value: 'BA', label: 'BA' },\n  { value: 'CE', label: 'CE' },\n  { value: 'DF', label: 'DF' },\n  { value: 'ES', label: 'ES' },\n  { value: 'GO', label: 'GO' },\n  { value: 'MA', label: 'MA' },\n  { value: 'MT', label: 'MT' },\n  { value: 'MS', label: 'MS' },\n  { value: 'MG', label: 'MG' },\n  { value: 'PA', label: 'PA' },\n  { value: 'PB', label: 'PB' },\n  { value: 'PR', label: 'PR' },\n  { value: 'PE', label: 'PE' },\n  { value: 'PI', label: 'PI' },\n  { value: 'RJ', label: 'RJ' },\n  { value: 'RN', label: 'RN' },\n  { value: 'RS', label: 'RS' },\n  { value: 'RO', label: 'RO' },\n  { value: 'RR', label: 'RR' },\n  { value: 'SC', label: 'SC' },\n  { value: 'SP', label: 'SP' },\n  { value: 'SE', label: 'SE' },\n  { value: 'TO', label: 'TO' },\n];\n"],"mappings":"AAAO,MAAM,mBAAmB;AAAA,EAC9B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAC7B;","names":[]}

package/dist/utils/format/masks.mjs

@@ -27,6 +27,16 @@ function formatPostalCode(value) {
   if (numbers.length <= 5) return numbers;
   return `${numbers.slice(0, 5)}-${numbers.slice(5, 8)}`;
 }
+function formatCNPJ(value) {
+  const numbers = value.replace(/\D/g, "");
+  if (numbers.length <= 2) return numbers;
+  if (numbers.length <= 5) return `${numbers.slice(0, 2)}.${numbers.slice(2)}`;
+  if (numbers.length <= 8)
+    return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5)}`;
+  if (numbers.length <= 12)
+    return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5, 8)}/${numbers.slice(8)}`;
+  return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5, 8)}/${numbers.slice(8, 12)}-${numbers.slice(12, 14)}`;
+}
 function formatPhone(value) {
   const numbers = value.replace(/\D/g, "").substring(0, 11);
   if (numbers.length <= 2) return numbers;
@@ -44,6 +54,7 @@ function formatTimer(seconds) {
   return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
 }
 export {
+  formatCNPJ,
   formatCPF,
   formatCardNumber,
   formatCvv,

package/dist/utils/format/masks.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/format/masks.ts"],"sourcesContent":["export function formatCardNumber(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  const groups = numbers.match(/.{1,4}/g);\r\n  return groups ? groups.join(' ').substring(0, 19) : '';\r\n}\r\n\r\nexport function formatExpiry(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  if (numbers.length >= 2) {\r\n    return numbers.substring(0, 2) + '/' + numbers.substring(2, 4);\r\n  }\r\n  return numbers;\r\n}\r\n\r\nexport function formatCvv(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  return numbers.substring(0, 4);\r\n}\r\n\r\nexport function formatCPF(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  if (numbers.length <= 3) return numbers;\r\n  if (numbers.length <= 6) return `${numbers.slice(0, 3)}.${numbers.slice(3)}`;\r\n  if (numbers.length <= 9)\r\n    return `${numbers.slice(0, 3)}.${numbers.slice(3, 6)}.${numbers.slice(6)}`;\r\n  return `${numbers.slice(0, 3)}.${numbers.slice(3, 6)}.${numbers.slice(6, 9)}-${numbers.slice(9, 11)}`;\r\n}\r\n\r\nexport function formatPostalCode(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  if (numbers.length <= 5) return numbers;\r\n  return `${numbers.slice(0, 5)}-${numbers.slice(5, 8)}`;\r\n}\r\n\r\nexport function formatPhone(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '').substring(0, 11);\r\n  if (numbers.length <= 2) return numbers;\r\n  if (numbers.length <= 6) return `(${numbers.slice(0, 2)}) ${numbers.slice(2)}`;\r\n  if (numbers.length <= 10)\r\n    return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 6)}-${numbers.slice(6)}`;\r\n  return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 3)} ${numbers.slice(3, 7)}-${numbers.slice(7)}`;\r\n}\r\n\r\nexport function formatFullName(value: string): string {\r\n  return value.replace(/[^a-zA-ZÀ-ÿ\\s]/g, '');\r\n}\r\n\r\nexport function formatTimer(seconds: number): string {\r\n  const m = Math.floor(seconds / 60);\r\n  const s = seconds % 60;\r\n  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;\r\n}\r\n"],"mappings":"AAAO,SAAS,iBAAiB,OAAuB;AACtD,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE;AACvC,QAAM,SAAS,QAAQ,MAAM,SAAS;AACtC,SAAO,SAAS,OAAO,KAAK,GAAG,EAAE,UAAU,GAAG,EAAE,IAAI;AACtD;AAEO,SAAS,aAAa,OAAuB;AAClD,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE;AACvC,MAAI,QAAQ,UAAU,GAAG;AACvB,WAAO,QAAQ,UAAU,GAAG,CAAC,IAAI,MAAM,QAAQ,UAAU,GAAG,CAAC;AAAA,EAC/D;AACA,SAAO;AACT;AAEO,SAAS,UAAU,OAAuB;AAC/C,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE;AACvC,SAAO,QAAQ,UAAU,GAAG,CAAC;AAC/B;AAEO,SAAS,UAAU,OAAuB;AAC/C,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE;AACvC,MAAI,QAAQ,UAAU,EAAG,QAAO;AAChC,MAAI,QAAQ,UAAU,EAAG,QAAO,GAAG,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,CAAC,CAAC;AAC1E,MAAI,QAAQ,UAAU;AACpB,WAAO,GAAG,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,CAAC,CAAC;AAC1E,SAAO,GAAG,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,GAAG,EAAE,CAAC;AACrG;AAEO,SAAS,iBAAiB,OAAuB;AACtD,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE;AACvC,MAAI,QAAQ,UAAU,EAAG,QAAO;AAChC,SAAO,GAAG,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,GAAG,CAAC,CAAC;AACtD;AAEO,SAAS,YAAY,OAAuB;AACjD,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE,EAAE,UAAU,GAAG,EAAE;AACxD,MAAI,QAAQ,UAAU,EAAG,QAAO;AAChC,MAAI,QAAQ,UAAU,EAAG,QAAO,IAAI,QAAQ,MAAM,GAAG,CAAC,CAAC,KAAK,QAAQ,MAAM,CAAC,CAAC;AAC5E,MAAI,QAAQ,UAAU;AACpB,WAAO,IAAI,QAAQ,MAAM,GAAG,CAAC,CAAC,KAAK,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,CAAC,CAAC;AAC5E,SAAO,IAAI,QAAQ,MAAM,GAAG,CAAC,CAAC,KAAK,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,MAAM,CAAC,CAAC;AACnG;AAEO,SAAS,eAAe,OAAuB;AACpD,SAAO,MAAM,QAAQ,mBAAmB,EAAE;AAC5C;AAEO,SAAS,YAAY,SAAyB;AACnD,QAAM,IAAI,KAAK,MAAM,UAAU,EAAE;AACjC,QAAM,IAAI,UAAU;AACpB,SAAO,GAAG,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC;AACpE;","names":[]}
+{"version":3,"sources":["../../../src/utils/format/masks.ts"],"sourcesContent":["export function formatCardNumber(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  const groups = numbers.match(/.{1,4}/g);\r\n  return groups ? groups.join(' ').substring(0, 19) : '';\r\n}\r\n\r\nexport function formatExpiry(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  if (numbers.length >= 2) {\r\n    return numbers.substring(0, 2) + '/' + numbers.substring(2, 4);\r\n  }\r\n  return numbers;\r\n}\r\n\r\nexport function formatCvv(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  return numbers.substring(0, 4);\r\n}\r\n\r\nexport function formatCPF(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  if (numbers.length <= 3) return numbers;\r\n  if (numbers.length <= 6) return `${numbers.slice(0, 3)}.${numbers.slice(3)}`;\r\n  if (numbers.length <= 9)\r\n    return `${numbers.slice(0, 3)}.${numbers.slice(3, 6)}.${numbers.slice(6)}`;\r\n  return `${numbers.slice(0, 3)}.${numbers.slice(3, 6)}.${numbers.slice(6, 9)}-${numbers.slice(9, 11)}`;\r\n}\r\n\r\nexport function formatPostalCode(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  if (numbers.length <= 5) return numbers;\r\n  return `${numbers.slice(0, 5)}-${numbers.slice(5, 8)}`;\r\n}\r\n\r\nexport function formatCNPJ(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '');\r\n  if (numbers.length <= 2) return numbers;\r\n  if (numbers.length <= 5) return `${numbers.slice(0, 2)}.${numbers.slice(2)}`;\r\n  if (numbers.length <= 8)\r\n    return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5)}`;\r\n  if (numbers.length <= 12)\r\n    return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5, 8)}/${numbers.slice(8)}`;\r\n  return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5, 8)}/${numbers.slice(8, 12)}-${numbers.slice(12, 14)}`;\r\n}\r\n\r\nexport function formatPhone(value: string): string {\r\n  const numbers = value.replace(/\\D/g, '').substring(0, 11);\r\n  if (numbers.length <= 2) return numbers;\r\n  if (numbers.length <= 6) return `(${numbers.slice(0, 2)}) ${numbers.slice(2)}`;\r\n  if (numbers.length <= 10)\r\n    return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 6)}-${numbers.slice(6)}`;\r\n  return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 3)} ${numbers.slice(3, 7)}-${numbers.slice(7)}`;\r\n}\r\n\r\nexport function formatFullName(value: string): string {\r\n  return value.replace(/[^a-zA-ZÀ-ÿ\\s]/g, '');\r\n}\r\n\r\nexport function formatTimer(seconds: number): string {\r\n  const m = Math.floor(seconds / 60);\r\n  const s = seconds % 60;\r\n  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;\r\n}\r\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.290",
+  "version": "1.1.291",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -16,6 +16,14 @@
     "./middleware": {
       "import": "./dist/middleware.mjs",
       "types": "./src/middleware.ts"
+    },
+    "./utils/constants/br-states": {
+      "import": "./dist/utils/constants/br-states.mjs",
+      "types": "./src/utils/constants/br-states.ts"
+    },
+    "./utils/format/masks": {
+      "import": "./dist/utils/format/masks.mjs",
+      "types": "./src/utils/format/masks.ts"
     }
   },
   "files": [

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

@@ -1,12 +1,13 @@
 'use client';
 
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
 import { Button } from '../../ui/buttons/Button';
 import { Toast } from '../../ui/feedback/Toast';
 import { useModalManager } from '../../../store/useModalManager';
 import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
-import { CardFormFields, cardFormSchema } from './CardFormFields';
+import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
+import { CardFormFields, BillingFormFields, cardFormSchema, STEP1_FIELDS } from './CardFormFields';
 import type { CardFormData } from './CardFormFields';
 import { IconX } from '@tabler/icons-react';
 import { useForm } from 'react-hook-form';
@@ -17,10 +18,12 @@ import { toast } from 'sonner';
 export default function AddCardModal() {
   const { activeModal, modalData, closeModal } = useModalManager();
   const isOpen = activeModal === 'addCardModal';
+  const [currentStep, setCurrentStep] = useState(1);
 
   const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;
 
   const createCardMutation = useCreateCard();
+  const updateAccountMutation = useUpdateAccount();
   const elements = useElements();
   const stripe = useStripe();
 
@@ -30,14 +33,27 @@ export default function AddCardModal() {
     reValidateMode: 'onChange',
     defaultValues: {
       country: 'BR',
+      personType: 'pf',
     },
   });
 
   const handleClose = useCallback(() => {
     form.reset();
+    setCurrentStep(1);
     closeModal();
   }, [form, closeModal]);
 
+  const handleContinue = useCallback(async () => {
+    const valid = await form.trigger(STEP1_FIELDS as unknown as (keyof CardFormData)[]);
+    if (valid) {
+      setCurrentStep(2);
+    }
+  }, [form]);
+
+  const handleBack = useCallback(() => {
+    setCurrentStep(1);
+  }, []);
+
   async function handleSubmit(data: CardFormData) {
     if (!stripe || !elements) return;
 
@@ -48,10 +64,14 @@ export default function AddCardModal() {
       type: 'card',
       card: cardElement,
       billing_details: {
-        name: data.name,
+        name: data.fullName,
         address: {
           country: data.country,
-          postal_code: data.postalCode,
+          postal_code: data.cep,
+          line1: `${data.street}, ${data.streetNumber}`,
+          line2: data.complement || undefined,
+          city: data.city,
+          state: data.state,
         },
       },
     });
@@ -70,38 +90,49 @@ export default function AddCardModal() {
       return;
     }
 
-    const result = await createCardMutation.mutateAsync(
-      { payment_method_id: paymentMethod.id },
-      {
-        onError: () => {
-          handleClose();
-          toast.custom(
-            (t) => (
-              <Toast
-                variant="error"
-                message="Não foi possível salvar o seu novo cartão, tente novamente."
-                toastId={t}
-              />
-            ),
-            { duration: 5000 }
-          );
-        },
+    try {
+      const [cardResult] = await Promise.all([
+        createCardMutation.mutateAsync({ payment_method_id: paymentMethod.id }),
+        updateAccountMutation.mutateAsync({
+          financial_document_type: data.personType === 'pf' ? 1 : 2,
+          financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,
+          financial_name: data.fullName,
+          zipcode: data.cep,
+          address: data.street,
+          address_number: data.streetNumber,
+          address_complement: data.complement || '',
+          city: data.city,
+          state: data.state,
+        }),
+      ]);
+
+      if (cardResult.success && cardResult.data?.id != null) {
+        onCardAdded?.(cardResult.data.id.toString());
       }
-    );
 
-    if (result.success && result.data?.id != null) {
-      onCardAdded?.(result.data.id.toString());
+      toast.custom(
+        (t) => <Toast variant="success" message="Cartão adicionado com sucesso." toastId={t} />,
+        { duration: 5000 }
+      );
+      handleClose();
+    } catch {
+      toast.custom(
+        (t) => (
+          <Toast
+            variant="error"
+            message="Não foi possível salvar o seu novo cartão, tente novamente."
+            toastId={t}
+          />
+        ),
+        { duration: 5000 }
+      );
     }
-
-    toast.custom(
-      (t) => <Toast variant="success" message="Cartão adicionado com sucesso." toastId={t} />,
-      { duration: 5000 }
-    );
-    handleClose();
   }
 
-  const isSubmitting = createCardMutation.isPending || form.formState.isSubmitting;
-  const isValid = form.formState.isValid;
+  const isSubmitting =
+    createCardMutation.isPending ||
+    updateAccountMutation.isPending ||
+    form.formState.isSubmitting;
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
@@ -112,7 +143,7 @@ export default function AddCardModal() {
         <DialogHeader className="p-0">
           <div className="flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0">
             <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
-              Adicionar cartão
+              {currentStep === 1 ? 'Adicionar cartão' : 'Dados de cobrança'}
             </DialogTitle>
             <Button
               type="button"
@@ -125,21 +156,46 @@ export default function AddCardModal() {
           </div>
         </DialogHeader>
 
+        {/* Progress bar */}
+        <div className="h-1 bg-zinc-100 w-full">
+          <div
+            className="h-full bg-cyan-400 transition-all duration-300 ease-in-out"
+            style={{ width: currentStep === 1 ? '50%' : '100%' }}
+          />
+        </div>
+
         <form
           onSubmit={form.handleSubmit(handleSubmit)}
           className="flex flex-col flex-1 lg:flex-none"
         >
           <div className="flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none">
-            <CardFormFields form={form} />
+            {currentStep === 1 ? (
+              <CardFormFields form={form} />
+            ) : (
+              <BillingFormFields form={form} />
+            )}
           </div>
 
           <div className="flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0">
-            <Button variant="secondary" type="button" onClick={handleClose} className="h-10!">
-              Cancelar
-            </Button>
-            <Button type="submit" className="h-10!" disabled={isSubmitting || !isValid}>
-              {isSubmitting ? 'Adicionando cartão...' : 'Adicionar cartão'}
-            </Button>
+            {currentStep === 1 ? (
+              <>
+                <Button variant="secondary" type="button" onClick={handleClose} className="h-10!">
+                  Cancelar
+                </Button>
+                <Button type="button" className="h-10!" onClick={handleContinue}>
+                  Continuar
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button variant="secondary" type="button" onClick={handleBack} className="h-10!">
+                  Voltar
+                </Button>
+                <Button type="submit" className="h-10!" disabled={isSubmitting}>
+                  {isSubmitting ? 'Adicionando cartão...' : 'Adicionar cartão'}
+                </Button>
+              </>
+            )}
           </div>
         </form>
       </DialogContent>

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

@@ -3,7 +3,7 @@
 import { UseFormReturn } from 'react-hook-form';
 import { FormField } from '../../ui/form/FormField';
 import { SelectField } from '../../ui/form/SelectField';
-import { formatCPF, formatPostalCode } from '../../../utils/format/masks';
+import { formatCPF, formatCNPJ, formatPostalCode } from '../../../utils/format/masks';
 import z from 'zod';
 import { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';
 
@@ -20,18 +20,39 @@ const stripeElementOptions = {
   },
 };
 
-export const cardFormSchema = z.object({
-  name: z.string().min(1, 'Nome é obrigatório'),
-  number: z.string().min(1, 'Número do cartão é obrigatório'),
-  expiry: z.string().min(1, 'Data de validade é obrigatória'),
-  cvv: z.string().min(1, 'Código de segurança é obrigatório'),
-  country: z.string().min(1, 'País é obrigatório'),
-  postalCode: z.string().optional(),
-  cpf: z.string().min(14, 'CPF é obrigatório'),
-});
+export const cardFormSchema = z
+  .object({
+    name: z.string().min(1, 'Nome é obrigatório'),
+    number: z.string().min(1, 'Número do cartão é obrigatório'),
+    expiry: z.string().min(1, 'Data de validade é obrigatória'),
+    cvv: z.string().min(1, 'Código de segurança é 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 const STEP1_FIELDS = ['name', 'number', 'expiry', 'cvv', 'country', 'personType', 'cpf', 'cnpj'] as const;
+
 type CardFormFieldsProps = {
   readonly form: UseFormReturn<CardFormData>;
 };
@@ -44,6 +65,8 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
     formState: { errors },
   } = form;
 
+  const personType = watch('personType');
+
   return (
     <div className="flex flex-col gap-5">
       <FormField
@@ -55,9 +78,7 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
       />
 
       <div className="flex flex-col gap-1.5">
-        <label className="paragraph-xsmall-semibold text-zinc-600">
-          Número do cartão
-        </label>
+        <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
@@ -75,9 +96,7 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
 
       <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>
+          <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
@@ -94,9 +113,7 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
         </div>
 
         <div className="flex-1 flex flex-col gap-1.5">
-          <label className="paragraph-xsmall-semibold text-zinc-600">
-            CVC
-          </label>
+          <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
@@ -113,45 +130,148 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
         </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="País"
+          label="Tipo de pessoa"
           placeholder="Selecione"
-          value={watch('country')}
-          onChange={(value) => setValue('country', value as string)}
+          value={personType}
+          onChange={(value) => {
+            setValue('personType', value as 'pf' | 'pj');
+            setValue('cpf', '');
+            setValue('cnpj', '');
+          }}
           options={[
-            { value: 'BR', label: 'Brasil' },
-            { value: 'ES', label: 'Espanha' },
-            { value: 'US', label: 'Estados Unidos' },
+            { value: 'pf', label: 'Pessoa física' },
+            { value: 'pj', label: 'Pessoa jurídica' },
           ]}
           containerClassName="flex-1"
         />
         <div className="flex-1">
-          <FormField
-            label="Código postal"
-            optional
-            placeholder=""
-            {...register('postalCode', {
-              onChange: (e) => {
-                setValue('postalCode', formatPostalCode(e.target.value));
-              },
-            })}
-            error={!!errors.postalCode}
-            errorMessage={errors.postalCode?.message}
-          />
+          {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;
+
+  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="CPF"
-        placeholder="___.___.___-__"
-        {...register('cpf', {
+        label="CEP"
+        placeholder="_____-___"
+        {...register('cep', {
           onChange: (e) => {
-            setValue('cpf', formatCPF(e.target.value));
+            setValue('cep', formatPostalCode(e.target.value));
           },
         })}
-        error={!!errors.cpf}
-        errorMessage={errors.cpf?.message}
+        error={!!errors.cep}
+        errorMessage={errors.cep?.message}
+      />
+
+      <div className="flex gap-4">
+        <div className="flex-[2]">
+          <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>
   );

package/src/modules/accounts/types.ts

@@ -146,6 +146,16 @@ export interface UpdateAccountRequest {
     currency?: string;
     timezone?: string;
     bussiness_type?: number;
+    financial_document_type?: number;
+    financial_document?: string;
+    financial_name?: string;
+    zipcode?: string;
+    address?: string;
+    address_number?: string;
+    address_complement?: string;
+    neighborhood?: string;
+    city?: string;
+    state?: string;
 }
 
 export interface UpdateAccountResponse {

package/src/utils/constants/br-states.ts

@@ -0,0 +1,29 @@
+export const BR_STATE_OPTIONS = [
+  { value: 'AC', label: 'AC' },
+  { value: 'AL', label: 'AL' },
+  { value: 'AP', label: 'AP' },
+  { value: 'AM', label: 'AM' },
+  { value: 'BA', label: 'BA' },
+  { value: 'CE', label: 'CE' },
+  { value: 'DF', label: 'DF' },
+  { value: 'ES', label: 'ES' },
+  { value: 'GO', label: 'GO' },
+  { value: 'MA', label: 'MA' },
+  { value: 'MT', label: 'MT' },
+  { value: 'MS', label: 'MS' },
+  { value: 'MG', label: 'MG' },
+  { value: 'PA', label: 'PA' },
+  { value: 'PB', label: 'PB' },
+  { value: 'PR', label: 'PR' },
+  { value: 'PE', label: 'PE' },
+  { value: 'PI', label: 'PI' },
+  { value: 'RJ', label: 'RJ' },
+  { value: 'RN', label: 'RN' },
+  { value: 'RS', label: 'RS' },
+  { value: 'RO', label: 'RO' },
+  { value: 'RR', label: 'RR' },
+  { value: 'SC', label: 'SC' },
+  { value: 'SP', label: 'SP' },
+  { value: 'SE', label: 'SE' },
+  { value: 'TO', label: 'TO' },
+];

package/src/utils/format/masks.ts

@@ -32,6 +32,17 @@ export function formatPostalCode(value: string): string {
   return `${numbers.slice(0, 5)}-${numbers.slice(5, 8)}`;
 }
 
+export function formatCNPJ(value: string): string {
+  const numbers = value.replace(/\D/g, '');
+  if (numbers.length <= 2) return numbers;
+  if (numbers.length <= 5) return `${numbers.slice(0, 2)}.${numbers.slice(2)}`;
+  if (numbers.length <= 8)
+    return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5)}`;
+  if (numbers.length <= 12)
+    return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5, 8)}/${numbers.slice(8)}`;
+  return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5, 8)}/${numbers.slice(8, 12)}-${numbers.slice(12, 14)}`;
+}
+
 export function formatPhone(value: string): string {
   const numbers = value.replace(/\D/g, '').substring(0, 11);
   if (numbers.length <= 2) return numbers;