@greatapps/common 1.1.452 → 1.1.453

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

@@ -63,7 +63,7 @@ function AddCardModal() {
     setStripeErrors(newStripeErrors);
     const stripeValid = stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
     if (rhfValid && stripeValid) {
-      form.clearErrors(["fullName", "cep", "street", "streetNumber", "city", "state"]);
+      form.clearErrors(["fullName", "cep", "street", "streetNumber", "neighborhood", "city", "state"]);
       setCurrentStep(2);
     }
   }, [form, stripeStatus]);
@@ -114,6 +114,7 @@ function AddCardModal() {
           address: data.street,
           address_number: data.streetNumber,
           address_complement: data.complement || "",
+          neighborhood: data.neighborhood,
           city: data.city,
           state: data.state
         })
@@ -141,10 +142,10 @@ function AddCardModal() {
     }
   }
   const isSubmitting = createCardMutation.isPending || updateAccountMutation.isPending || form.formState.isSubmitting;
-  const watchedValues = form.watch(["name", "country", "personType", "cpf", "cnpj", "fullName", "cep", "street", "streetNumber", "city", "state"]);
-  const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, city, state] = watchedValues;
+  const watchedValues = form.watch(["name", "country", "personType", "cpf", "cnpj", "fullName", "cep", "street", "streetNumber", "neighborhood", "city", "state"]);
+  const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, neighborhood, city, state] = watchedValues;
   const isStep1Valid = !!name && !!country && !!personType && (personType === "pf" ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) && stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
-  const isStep2Valid = !!fullName && !!cep && cep.length >= 9 && !!street && !!streetNumber && !!city && !!state;
+  const isStep2Valid = !!fullName && !!cep && cep.length >= 9 && !!street && !!streetNumber && !!neighborhood && !!city && !!state;
   return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
     DialogContent,
     {

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, 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 } from './CardFormFields';\nimport type { CardFormData, StripeElementsStatus } from './CardFormFields';\nimport { IconLoader2, 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\nconst INITIAL_STRIPE_STATUS: StripeElementsStatus = {\n  cardNumber: false,\n  cardExpiry: false,\n  cardCvc: false,\n};\n\nexport default function AddCardModal() {\n  const { activeModal, modalData, closeModal } = useModalManager();\n  const isOpen = activeModal === 'addCardModal';\n  const [currentStep, setCurrentStep] = useState(1);\n  const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);\n  const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});\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    setStripeStatus(INITIAL_STRIPE_STATUS);\n    setStripeErrors({});\n    closeModal();\n  }, [form, closeModal]);\n\n  const handleStripeChange = useCallback(\n    (field: keyof StripeElementsStatus, complete: boolean) => {\n      setStripeStatus((prev) => ({ ...prev, [field]: complete }));\n      if (complete) {\n        setStripeErrors((prev) => ({ ...prev, [field]: undefined }));\n      }\n    },\n    []\n  );\n\n  const handleContinue = useCallback(async () => {\n    const rhfValid = await form.trigger(['name', 'country', 'personType', 'cpf', 'cnpj']);\n\n    const newStripeErrors: Record<string, string | undefined> = {};\n    if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = 'Número do cartão é obrigatório';\n    if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = 'Data de validade é obrigatória';\n    if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = 'Código de segurança é obrigatório';\n    setStripeErrors(newStripeErrors);\n\n    const stripeValid = stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;\n\n    if (rhfValid && stripeValid) {\n      form.clearErrors(['fullName', 'cep', 'street', 'streetNumber', 'city', 'state']);\n      setCurrentStep(2);\n    }\n  }, [form, stripeStatus]);\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  const watchedValues = form.watch(['name', 'country', 'personType', 'cpf', 'cnpj', 'fullName', 'cep', 'street', 'streetNumber', 'city', 'state']);\n  const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, city, state] = watchedValues;\n  const isStep1Valid =\n    !!name &&\n    !!country &&\n    !!personType &&\n    (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&\n    stripeStatus.cardNumber &&\n    stripeStatus.cardExpiry &&\n    stripeStatus.cardCvc;\n  const isStep2Valid =\n    !!fullName &&\n    !!cep && cep.length >= 9 &&\n    !!street &&\n    !!streetNumber &&\n    !!city &&\n    !!state;\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 ${currentStep !== 1 ? 'hidden' : ''}`}>\n            <CardFormFields\n              form={form}\n              onStripeChange={handleStripeChange}\n              stripeErrors={stripeErrors}\n            />\n          </div>\n          <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? 'hidden' : ''}`}>\n            <BillingFormFields 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            {currentStep === 1 ? (\n              <>\n                <Button variant=\"secondary\" type=\"button\" onClick={handleClose} className=\"h-10!\">\n                  Cancelar\n                </Button>\n                <Button\n                  type=\"button\"\n                  className=\"h-10!\"\n                  onClick={handleContinue}\n                  disabled={!isStep1Valid}\n                >\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 || !isStep2Valid}>\n                  {isSubmitting && <IconLoader2 className=\"size-4 animate-spin\" />}\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":[]}
+{"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 } from './CardFormFields';\nimport type { CardFormData, StripeElementsStatus } from './CardFormFields';\nimport { IconLoader2, 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\nconst INITIAL_STRIPE_STATUS: StripeElementsStatus = {\n  cardNumber: false,\n  cardExpiry: false,\n  cardCvc: false,\n};\n\nexport default function AddCardModal() {\n  const { activeModal, modalData, closeModal } = useModalManager();\n  const isOpen = activeModal === 'addCardModal';\n  const [currentStep, setCurrentStep] = useState(1);\n  const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);\n  const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});\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    setStripeStatus(INITIAL_STRIPE_STATUS);\n    setStripeErrors({});\n    closeModal();\n  }, [form, closeModal]);\n\n  const handleStripeChange = useCallback(\n    (field: keyof StripeElementsStatus, complete: boolean) => {\n      setStripeStatus((prev) => ({ ...prev, [field]: complete }));\n      if (complete) {\n        setStripeErrors((prev) => ({ ...prev, [field]: undefined }));\n      }\n    },\n    []\n  );\n\n  const handleContinue = useCallback(async () => {\n    const rhfValid = await form.trigger(['name', 'country', 'personType', 'cpf', 'cnpj']);\n\n    const newStripeErrors: Record<string, string | undefined> = {};\n    if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = 'Número do cartão é obrigatório';\n    if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = 'Data de validade é obrigatória';\n    if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = 'Código de segurança é obrigatório';\n    setStripeErrors(newStripeErrors);\n\n    const stripeValid = stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;\n\n    if (rhfValid && stripeValid) {\n      form.clearErrors(['fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);\n      setCurrentStep(2);\n    }\n  }, [form, stripeStatus]);\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          neighborhood: data.neighborhood,\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  const watchedValues = form.watch(['name', 'country', 'personType', 'cpf', 'cnpj', 'fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);\n  const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, neighborhood, city, state] = watchedValues;\n  const isStep1Valid =\n    !!name &&\n    !!country &&\n    !!personType &&\n    (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&\n    stripeStatus.cardNumber &&\n    stripeStatus.cardExpiry &&\n    stripeStatus.cardCvc;\n  const isStep2Valid =\n    !!fullName &&\n    !!cep && cep.length >= 9 &&\n    !!street &&\n    !!streetNumber &&\n    !!neighborhood &&\n    !!city &&\n    !!state;\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 ${currentStep !== 1 ? 'hidden' : ''}`}>\n            <CardFormFields\n              form={form}\n              onStripeChange={handleStripeChange}\n              stripeErrors={stripeErrors}\n            />\n          </div>\n          <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? 'hidden' : ''}`}>\n            <BillingFormFields 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            {currentStep === 1 ? (\n              <>\n                <Button variant=\"secondary\" type=\"button\" onClick={handleClose} className=\"h-10!\">\n                  Cancelar\n                </Button>\n                <Button\n                  type=\"button\"\n                  className=\"h-10!\"\n                  onClick={handleContinue}\n                  disabled={!isStep1Valid}\n                >\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 || !isStep2Valid}>\n                  {isSubmitting && <IconLoader2 className=\"size-4 animate-spin\" />}\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

@@ -3,9 +3,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useViaCep } from "../../../modules/accounts/hooks/useViaCep";
 import { FormField } from "../../ui/form/FormField";
 import { SelectField } from "../../ui/form/SelectField";
-import { formatCPF, formatCNPJ, formatPostalCode } from "../../../utils/format/masks";
+import {
+  formatCPF,
+  formatCNPJ,
+  formatPostalCode
+} from "../../../utils/format/masks";
 import z from "zod";
-import { CardCvcElement, CardExpiryElement, CardNumberElement } from "@stripe/react-stripe-js";
+import {
+  CardCvcElement,
+  CardExpiryElement,
+  CardNumberElement
+} from "@stripe/react-stripe-js";
 const stripeElementOptions = {
   style: {
     base: {
@@ -30,6 +38,7 @@ const cardFormSchema = z.object({
   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"),
+  neighborhood: z.string().min(1, "Bairro \xE9 obrigat\xF3rio"),
   complement: z.string().optional()
 }).refine(
   (data) => {
@@ -41,8 +50,18 @@ const cardFormSchema = z.object({
     path: ["cpf"]
   }
 );
-const STEP1_FIELDS = ["name", "country", "personType", "cpf", "cnpj"];
-function CardFormFields({ form, onStripeChange, stripeErrors }) {
+const STEP1_FIELDS = [
+  "name",
+  "country",
+  "personType",
+  "cpf",
+  "cnpj"
+];
+function CardFormFields({
+  form,
+  onStripeChange,
+  stripeErrors
+}) {
   const {
     register,
     watch,
@@ -173,6 +192,7 @@ function BillingFormFields({ form }) {
     if (digits.length === 8) {
       lookupCep(digits).then((data) => {
         setValue("street", data.logradouro, { shouldValidate: true });
+        setValue("neighborhood", data.bairro, { shouldValidate: true });
         setValue("city", data.localidade, { shouldValidate: true });
         setValue("state", data.uf, { shouldValidate: true });
       }).catch(() => {
@@ -246,17 +266,29 @@ function BillingFormFields({ form }) {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx(
-      FormField,
-      {
-        label: "Complemento",
-        optional: true,
-        placeholder: "",
-        ...register("complement"),
-        error: !!errors.complement,
-        errorMessage: errors.complement?.message
-      }
-    )
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "Bairro",
+          placeholder: "",
+          ...register("neighborhood"),
+          error: !!errors.neighborhood,
+          errorMessage: errors.neighborhood?.message
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "Complemento",
+          optional: true,
+          placeholder: "",
+          ...register("complement"),
+          error: !!errors.complement,
+          errorMessage: errors.complement?.message
+        }
+      )
+    ] })
   ] });
 }
 export {

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 { useViaCep } from '../../../modules/accounts/hooks/useViaCep';\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    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 type StripeElementsStatus = {\n  cardNumber: boolean;\n  cardExpiry: boolean;\n  cardCvc: boolean;\n};\n\nexport const STEP1_FIELDS = ['name', 'country', 'personType', 'cpf', 'cnpj'] as const;\n\ntype CardFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n  readonly onStripeChange: (field: keyof StripeElementsStatus, complete: boolean) => void;\n  readonly stripeErrors: { cardNumber?: string; cardExpiry?: string; cardCvc?: string };\n};\n\nexport function CardFormFields({ form, onStripeChange, stripeErrors }: 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: { complete: boolean }) => onStripeChange('cardNumber', e.complete)}\n            />\n          </div>\n        </div>\n        {stripeErrors.cardNumber && (\n          <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardNumber}</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: { complete: boolean }) => onStripeChange('cardExpiry', e.complete)}\n              />\n            </div>\n          </div>\n          {stripeErrors.cardExpiry && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardExpiry}</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: { complete: boolean }) => onStripeChange('cardCvc', e.complete)}\n              />\n            </div>\n          </div>\n          {stripeErrors.cardCvc && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardCvc}</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  const { mutateAsync: lookupCep } = useViaCep();\n\n  const handleCepChange = (rawValue: string) => {\n    const masked = formatPostalCode(rawValue);\n    setValue('cep', masked);\n\n    const digits = rawValue.replace(/\\D/g, '');\n    if (digits.length === 8) {\n      lookupCep(digits).then((data) => {\n        setValue('street', data.logradouro, { shouldValidate: true });\n        setValue('city', data.localidade, { shouldValidate: true });\n        setValue('state', data.uf, { shouldValidate: true });\n      }).catch(() => {\n        // silently ignore — user can fill manually\n      });\n    }\n  };\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) => handleCepChange(e.target.value),\n        })}\n        error={!!errors.cep}\n        errorMessage={errors.cep?.message}\n      />\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-[4]\">\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":[]}
+{"version":3,"sources":["../../../../src/components/modals/cards/CardFormFields.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseFormReturn } from \"react-hook-form\";\nimport { useViaCep } from \"../../../modules/accounts/hooks/useViaCep\";\nimport { FormField } from \"../../ui/form/FormField\";\nimport { SelectField } from \"../../ui/form/SelectField\";\nimport {\n  formatCPF,\n  formatCNPJ,\n  formatPostalCode,\n} from \"../../../utils/format/masks\";\nimport z from \"zod\";\nimport {\n  CardCvcElement,\n  CardExpiryElement,\n  CardNumberElement,\n} 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    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    neighborhood: z.string().min(1, \"Bairro é 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 type StripeElementsStatus = {\n  cardNumber: boolean;\n  cardExpiry: boolean;\n  cardCvc: boolean;\n};\n\nexport const STEP1_FIELDS = [\n  \"name\",\n  \"country\",\n  \"personType\",\n  \"cpf\",\n  \"cnpj\",\n] as const;\n\ntype CardFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n  readonly onStripeChange: (\n    field: keyof StripeElementsStatus,\n    complete: boolean,\n  ) => void;\n  readonly stripeErrors: {\n    cardNumber?: string;\n    cardExpiry?: string;\n    cardCvc?: string;\n  };\n};\n\nexport function CardFormFields({\n  form,\n  onStripeChange,\n  stripeErrors,\n}: 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          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: { complete: boolean }) =>\n                onStripeChange(\"cardNumber\", e.complete)\n              }\n            />\n          </div>\n        </div>\n        {stripeErrors.cardNumber && (\n          <p className=\"paragraph-xsmall-semibold text-red-600\">\n            {stripeErrors.cardNumber}\n          </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: { complete: boolean }) =>\n                  onStripeChange(\"cardExpiry\", e.complete)\n                }\n              />\n            </div>\n          </div>\n          {stripeErrors.cardExpiry && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">\n              {stripeErrors.cardExpiry}\n            </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: { complete: boolean }) =>\n                  onStripeChange(\"cardCvc\", e.complete)\n                }\n              />\n            </div>\n          </div>\n          {stripeErrors.cardCvc && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">\n              {stripeErrors.cardCvc}\n            </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  const { mutateAsync: lookupCep } = useViaCep();\n\n  const handleCepChange = (rawValue: string) => {\n    const masked = formatPostalCode(rawValue);\n    setValue(\"cep\", masked);\n\n    const digits = rawValue.replace(/\\D/g, \"\");\n    if (digits.length === 8) {\n      lookupCep(digits)\n        .then((data) => {\n          setValue(\"street\", data.logradouro, { shouldValidate: true });\n          setValue(\"neighborhood\", data.bairro, { shouldValidate: true });\n          setValue(\"city\", data.localidade, { shouldValidate: true });\n          setValue(\"state\", data.uf, { shouldValidate: true });\n        })\n        .catch(() => {\n          // silently ignore — user can fill manually\n        });\n    }\n  };\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) => handleCepChange(e.target.value),\n        })}\n        error={!!errors.cep}\n        errorMessage={errors.cep?.message}\n      />\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-[4]\">\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      <div className=\"flex gap-4\">\n        <FormField\n          label=\"Bairro\"\n          placeholder=\"\"\n          {...register(\"neighborhood\")}\n          error={!!errors.neighborhood}\n          errorMessage={errors.neighborhood?.message}\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    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.452",
+  "version": "1.1.453",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

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

@@ -75,7 +75,7 @@ export default function AddCardModal() {
     const stripeValid = stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
 
     if (rhfValid && stripeValid) {
-      form.clearErrors(['fullName', 'cep', 'street', 'streetNumber', 'city', 'state']);
+      form.clearErrors(['fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);
       setCurrentStep(2);
     }
   }, [form, stripeStatus]);
@@ -131,6 +131,7 @@ export default function AddCardModal() {
           address: data.street,
           address_number: data.streetNumber,
           address_complement: data.complement || '',
+          neighborhood: data.neighborhood,
           city: data.city,
           state: data.state,
         }),
@@ -164,8 +165,8 @@ export default function AddCardModal() {
     updateAccountMutation.isPending ||
     form.formState.isSubmitting;
 
-  const watchedValues = form.watch(['name', 'country', 'personType', 'cpf', 'cnpj', 'fullName', 'cep', 'street', 'streetNumber', 'city', 'state']);
-  const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, city, state] = watchedValues;
+  const watchedValues = form.watch(['name', 'country', 'personType', 'cpf', 'cnpj', 'fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);
+  const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, neighborhood, city, state] = watchedValues;
   const isStep1Valid =
     !!name &&
     !!country &&
@@ -179,6 +180,7 @@ export default function AddCardModal() {
     !!cep && cep.length >= 9 &&
     !!street &&
     !!streetNumber &&
+    !!neighborhood &&
     !!city &&
     !!state;
 

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

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