@greatapps/common 1.1.290 → 1.1.292

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":";AA6DU,cAmDA,YAnDA;AA3DV,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB,sBAAsB;AAE/C,SAAS,aAAa;AACtB,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB,aAAa,iBAAiB;AAC1D,SAAS,aAAa;AAEP,SAAR,eAAgC;AACrC,QAAM,EAAE,aAAa,WAAW,WAAW,IAAI,gBAAgB;AAC/D,QAAM,SAAS,gBAAgB;AAE/B,QAAM,cAAc,UAAU;AAE9B,QAAM,qBAAqB,cAAc;AACzC,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,UAAU;AAEzB,QAAM,OAAO,QAAsB;AAAA,IACjC,UAAU,YAAY,cAAc;AAAA,IACpC,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,eAAe;AAAA,MACb,SAAS;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,cAAc,YAAY,MAAM;AACpC,SAAK,MAAM;AACX,eAAW;AAAA,EACb,GAAG,CAAC,MAAM,UAAU,CAAC;AAErB,iBAAe,aAAa,MAAoB;AAC9C,QAAI,CAAC,UAAU,CAAC,SAAU;AAE1B,UAAM,cAAc,SAAS,WAAW,iBAAiB;AACzD,QAAI,CAAC,YAAa;AAElB,UAAM,EAAE,OAAO,cAAc,IAAI,MAAM,OAAO,oBAAoB;AAAA,MAChE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,iBAAiB;AAAA,QACf,MAAM,KAAK;AAAA,QACX,SAAS;AAAA,UACP,SAAS,KAAK;AAAA,UACd,aAAa,KAAK;AAAA,QACpB;AAAA,MACF;AAAA,IACF,CAAC;AAED,QAAI,OAAO;AACT,YAAM;AAAA,QACJ,CAAC,MACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAQ;AAAA,YACR,SAAS;AAAA;AAAA,QACX;AAAA,QAEF,EAAE,UAAU,IAAK;AAAA,MACnB;AACA;AAAA,IACF;AAEA,UAAM,SAAS,MAAM,mBAAmB;AAAA,MACtC,EAAE,mBAAmB,cAAc,GAAG;AAAA,MACtC;AAAA,QACE,SAAS,MAAM;AACb,sBAAY;AACZ,gBAAM;AAAA,YACJ,CAAC,MACC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,SAAS;AAAA;AAAA,YACX;AAAA,YAEF,EAAE,UAAU,IAAK;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,QAAI,OAAO,WAAW,OAAO,MAAM,MAAM,MAAM;AAC7C,oBAAc,OAAO,KAAK,GAAG,SAAS,CAAC;AAAA,IACzC;AAEA,UAAM;AAAA,MACJ,CAAC,MAAM,oBAAC,SAAM,SAAQ,WAAU,SAAQ,qCAAiC,SAAS,GAAG;AAAA,MACrF,EAAE,UAAU,IAAK;AAAA,IACnB;AACA,gBAAY;AAAA,EACd;AAEA,QAAM,eAAe,mBAAmB,aAAa,KAAK,UAAU;AACpE,QAAM,UAAU,KAAK,UAAU;AAE/B,SACE,oBAAC,UAAO,MAAM,QAAQ,cAAc,aAClC;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB,WAAU;AAAA,MAEV;AAAA,4BAAC,gBAAa,WAAU,OACtB,+BAAC,SAAI,WAAU,8FACb;AAAA,8BAAC,eAAY,WAAU,uDAAsD,iCAE7E;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,SAAM,MAAM,IAAI;AAAA;AAAA,UACnB;AAAA,WACF,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK,aAAa,YAAY;AAAA,YACxC,WAAU;AAAA,YAEV;AAAA,kCAAC,SAAI,WAAU,+DACb,8BAAC,kBAAe,MAAY,GAC9B;AAAA,cAEA,qBAAC,SAAI,WAAU,+FACb;AAAA,oCAAC,UAAO,SAAQ,aAAY,MAAK,UAAS,SAAS,aAAa,WAAU,SAAQ,sBAElF;AAAA,gBACA,oBAAC,UAAO,MAAK,UAAS,WAAU,SAAQ,UAAU,gBAAgB,CAAC,SAChE,yBAAe,6BAA0B,uBAC5C;AAAA,iBACF;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","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":";AAiFU,SAmGI,UAnGJ,KA8DA,YA9DA;AA/EV,SAAS,aAAa,gBAAgB;AACtC,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,mBAAmB,gBAAgB,oBAAoB;AAEhF,SAAS,aAAa;AACtB,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB,aAAa,iBAAiB;AAC1D,SAAS,aAAa;AAEP,SAAR,eAAgC;AACrC,QAAM,EAAE,aAAa,WAAW,WAAW,IAAI,gBAAgB;AAC/D,QAAM,SAAS,gBAAgB;AAC/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAEhD,QAAM,cAAc,UAAU;AAE9B,QAAM,qBAAqB,cAAc;AACzC,QAAM,wBAAwB,iBAAiB;AAC/C,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,UAAU;AAEzB,QAAM,OAAO,QAAsB;AAAA,IACjC,UAAU,YAAY,cAAc;AAAA,IACpC,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,eAAe;AAAA,MACb,SAAS;AAAA,MACT,YAAY;AAAA,IACd;AAAA,EACF,CAAC;AAED,QAAM,cAAc,YAAY,MAAM;AACpC,SAAK,MAAM;AACX,mBAAe,CAAC;AAChB,eAAW;AAAA,EACb,GAAG,CAAC,MAAM,UAAU,CAAC;AAErB,QAAM,iBAAiB,YAAY,YAAY;AAC7C,UAAM,QAAQ,MAAM,KAAK,QAAQ,YAAiD;AAClF,QAAI,OAAO;AACT,qBAAe,CAAC;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,aAAa,YAAY,MAAM;AACnC,mBAAe,CAAC;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,iBAAe,aAAa,MAAoB;AAC9C,QAAI,CAAC,UAAU,CAAC,SAAU;AAE1B,UAAM,cAAc,SAAS,WAAW,iBAAiB;AACzD,QAAI,CAAC,YAAa;AAElB,UAAM,EAAE,OAAO,cAAc,IAAI,MAAM,OAAO,oBAAoB;AAAA,MAChE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,iBAAiB;AAAA,QACf,MAAM,KAAK;AAAA,QACX,SAAS;AAAA,UACP,SAAS,KAAK;AAAA,UACd,aAAa,KAAK;AAAA,UAClB,OAAO,GAAG,KAAK,MAAM,KAAK,KAAK,YAAY;AAAA,UAC3C,OAAO,KAAK,cAAc;AAAA,UAC1B,MAAM,KAAK;AAAA,UACX,OAAO,KAAK;AAAA,QACd;AAAA,MACF;AAAA,IACF,CAAC;AAED,QAAI,OAAO;AACT,YAAM;AAAA,QACJ,CAAC,MACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAQ;AAAA,YACR,SAAS;AAAA;AAAA,QACX;AAAA,QAEF,EAAE,UAAU,IAAK;AAAA,MACnB;AACA;AAAA,IACF;AAEA,QAAI;AACF,YAAM,CAAC,UAAU,IAAI,MAAM,QAAQ,IAAI;AAAA,QACrC,mBAAmB,YAAY,EAAE,mBAAmB,cAAc,GAAG,CAAC;AAAA,QACtE,sBAAsB,YAAY;AAAA,UAChC,yBAAyB,KAAK,eAAe,OAAO,IAAI;AAAA,UACxD,oBAAoB,KAAK,eAAe,OAAO,KAAK,MAAM,KAAK;AAAA,UAC/D,gBAAgB,KAAK;AAAA,UACrB,SAAS,KAAK;AAAA,UACd,SAAS,KAAK;AAAA,UACd,gBAAgB,KAAK;AAAA,UACrB,oBAAoB,KAAK,cAAc;AAAA,UACvC,MAAM,KAAK;AAAA,UACX,OAAO,KAAK;AAAA,QACd,CAAC;AAAA,MACH,CAAC;AAED,UAAI,WAAW,WAAW,WAAW,MAAM,MAAM,MAAM;AACrD,sBAAc,WAAW,KAAK,GAAG,SAAS,CAAC;AAAA,MAC7C;AAEA,YAAM;AAAA,QACJ,CAAC,MAAM,oBAAC,SAAM,SAAQ,WAAU,SAAQ,qCAAiC,SAAS,GAAG;AAAA,QACrF,EAAE,UAAU,IAAK;AAAA,MACnB;AACA,kBAAY;AAAA,IACd,QAAQ;AACN,YAAM;AAAA,QACJ,CAAC,MACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAQ;AAAA,YACR,SAAS;AAAA;AAAA,QACX;AAAA,QAEF,EAAE,UAAU,IAAK;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,eACJ,mBAAmB,aACnB,sBAAsB,aACtB,KAAK,UAAU;AAEjB,SACE,oBAAC,UAAO,MAAM,QAAQ,cAAc,aAClC;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB,WAAU;AAAA,MAEV;AAAA,4BAAC,gBAAa,WAAU,OACtB,+BAAC,SAAI,WAAU,8FACb;AAAA,8BAAC,eAAY,WAAU,uDACpB,0BAAgB,IAAI,wBAAqB,wBAC5C;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,SAAM,MAAM,IAAI;AAAA;AAAA,UACnB;AAAA,WACF,GACF;AAAA,QAGA,oBAAC,SAAI,WAAU,0BACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,gBAAgB,IAAI,QAAQ,OAAO;AAAA;AAAA,QACrD,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK,aAAa,YAAY;AAAA,YACxC,WAAU;AAAA,YAEV;AAAA,kCAAC,SAAI,WAAU,+DACZ,0BAAgB,IACf,oBAAC,kBAAe,MAAY,IAE5B,oBAAC,qBAAkB,MAAY,GAEnC;AAAA,cAEA,oBAAC,SAAI,WAAU,+FACZ,0BAAgB,IACf,iCACE;AAAA,oCAAC,UAAO,SAAQ,aAAY,MAAK,UAAS,SAAS,aAAa,WAAU,SAAQ,sBAElF;AAAA,gBACA,oBAAC,UAAO,MAAK,UAAS,WAAU,SAAQ,SAAS,gBAAgB,uBAEjE;AAAA,iBACF,IAEA,iCACE;AAAA,oCAAC,UAAO,SAAQ,aAAY,MAAK,UAAS,SAAS,YAAY,WAAU,SAAQ,oBAEjF;AAAA,gBACA,oBAAC,UAAO,MAAK,UAAS,WAAU,SAAQ,UAAU,cAC/C,yBAAe,6BAA0B,uBAC5C;AAAA,iBACF,GAEJ;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","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/index.mjs

@@ -227,8 +227,10 @@ import {
   formatTimer,
   formatFullName,
   formatCPF,
+  formatCNPJ,
   formatCardNumber
 } from "./utils/format/masks";
+import { BR_STATE_OPTIONS } from "./utils/constants/br-states";
 import {
   buildLocaleOptions,
   LANGUAGE_OPTIONS
@@ -286,6 +288,7 @@ export {
   AppMobileNavBar,
   AppNavBar,
   AppNavigation,
+  BR_STATE_OPTIONS,
   Badge,
   Button,
   default2 as BuyCreditsModal,
@@ -456,6 +459,7 @@ export {
   copyToClipboard,
   createAuthMiddleware,
   createMiddlewareChain,
+  formatCNPJ,
   formatCPF,
   formatCardNumber,
   formatFullName,