@greatapps/common 1.1.606 → 1.1.607

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

@@ -10,7 +10,8 @@ import { useCreateSetupIntent } from "../../../modules/cards/hooks/create-setup-
 import { useUpdateAccount } from "../../../modules/accounts/hooks/useAccountManagement";
 import { useExternalContracting } from "../../../providers/whitelabel.provider";
 import { CardFormFields, BillingFormFields, cardFormSchema } from "./CardFormFields";
-import { IconLoader2, IconX, IconCreditCard } from "@tabler/icons-react";
+import { IconLoader2, IconX, IconCreditCard, IconCheck, IconChevronRight } from "@tabler/icons-react";
+import { cn } from "../../../infra/utils/clsx";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js";
@@ -20,6 +21,43 @@ const INITIAL_STRIPE_STATUS = {
   cardExpiry: false,
   cardCvc: false
 };
+const STEPS = [
+  { number: 1, label: "Cobran\xE7a" },
+  { number: 2, label: "Cart\xE3o" }
+];
+function CardStepper({ currentStep }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-2 px-4 py-3 border-b border-zinc-200 lg:border-b-0", children: STEPS.map((step, idx) => {
+    const isCompleted = currentStep > step.number;
+    const isCurrent = currentStep === step.number;
+    const isPending = !isCompleted && !isCurrent;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-center size-6 rounded-full paragraph-xsmall-semibold",
+            isCompleted && "bg-green-500 text-white",
+            isCurrent && "bg-primary text-white",
+            isPending && "border border-zinc-200 text-zinc-400"
+          ),
+          children: isCompleted ? /* @__PURE__ */ jsx(IconCheck, { size: 14, stroke: 3 }) : step.number
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "paragraph-xsmall-semibold",
+            (isCompleted || isCurrent) && "text-zinc-950",
+            isPending && "text-zinc-400"
+          ),
+          children: step.label
+        }
+      ),
+      idx < STEPS.length - 1 && /* @__PURE__ */ jsx(IconChevronRight, { size: 16, className: "text-zinc-300 ml-1" })
+    ] }, step.number);
+  }) });
+}
 function AddCardModal() {
   const { activeModal, modalData, closeModal } = useModalManager();
   const isOpen = activeModal === "addCardModal";
@@ -27,7 +65,6 @@ function AddCardModal() {
   const [currentStep, setCurrentStep] = useState(1);
   const [stripeStatus, setStripeStatus] = useState(INITIAL_STRIPE_STATUS);
   const [stripeErrors, setStripeErrors] = useState({});
-  const [setupIntentId, setSetupIntentId] = useState(null);
   const [isAuthenticating, setIsAuthenticating] = useState(false);
   const onCardAdded = modalData.onCardAdded;
   const createSetupIntentMutation = useCreateSetupIntent();
@@ -49,7 +86,6 @@ function AddCardModal() {
     setCurrentStep(1);
     setStripeStatus(INITIAL_STRIPE_STATUS);
     setStripeErrors({});
-    setSetupIntentId(null);
     setIsAuthenticating(false);
     closeModal();
   }, [form, closeModal]);
@@ -63,14 +99,29 @@ function AddCardModal() {
     []
   );
   const handleContinue = useCallback(async () => {
-    const rhfValid = await form.trigger(["name", "country", "personType", "cpf", "cnpj"]);
+    const isValid = await form.trigger([
+      "fullName",
+      "cep",
+      "street",
+      "streetNumber",
+      "neighborhood",
+      "city",
+      "state"
+    ]);
+    if (!isValid) return;
+    setCurrentStep(2);
+  }, [form]);
+  const handleBack = useCallback(() => {
+    setCurrentStep(1);
+  }, []);
+  async function handleSubmit(data) {
     const newStripeErrors = {};
     if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = "N\xFAmero do cart\xE3o \xE9 obrigat\xF3rio";
     if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = "Data de validade \xE9 obrigat\xF3ria";
     if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = "C\xF3digo de seguran\xE7a \xE9 obrigat\xF3rio";
     setStripeErrors(newStripeErrors);
     const stripeValid = stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
-    if (!rhfValid || !stripeValid) return;
+    if (!stripeValid) return;
     if (!stripe || !elements) return;
     const cardElement = elements.getElement(CardNumberElement);
     if (!cardElement) return;
@@ -95,7 +146,7 @@ function AddCardModal() {
       const { setupIntent, error } = await stripe.confirmCardSetup(intent.client_secret, {
         payment_method: {
           card: cardElement,
-          billing_details: { name: form.getValues("name") }
+          billing_details: { name: data.name }
         }
       });
       if (error) {
@@ -126,34 +177,9 @@ function AddCardModal() {
         );
         return;
       }
-      setSetupIntentId(intent.setup_intent_id);
-      form.clearErrors(["fullName", "cep", "street", "streetNumber", "neighborhood", "city", "state"]);
-      setCurrentStep(2);
-    } catch {
-      toast.custom(
-        (t) => /* @__PURE__ */ jsx(
-          Toast,
-          {
-            variant: "error",
-            message: "N\xE3o foi poss\xEDvel iniciar a autentica\xE7\xE3o do cart\xE3o, tente novamente.",
-            toastId: t
-          }
-        ),
-        { duration: 5e3 }
-      );
-    } finally {
-      setIsAuthenticating(false);
-    }
-  }, [form, stripeStatus, stripe, elements, createSetupIntentMutation]);
-  const handleBack = useCallback(() => {
-    setCurrentStep(1);
-  }, []);
-  async function handleSubmit(data) {
-    if (!setupIntentId) return;
-    try {
       const [cardResult] = await Promise.all([
         createCardMutation.mutateAsync({
-          setup_intent_id: setupIntentId,
+          setup_intent_id: intent.setup_intent_id,
           name: data.name,
           set_default: true
         }),
@@ -190,13 +216,15 @@ function AddCardModal() {
         ),
         { duration: 5e3 }
       );
+    } finally {
+      setIsAuthenticating(false);
     }
   }
   const isSubmitting = createCardMutation.isPending || updateAccountMutation.isPending || form.formState.isSubmitting;
   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 && !!neighborhood && !!city && !!state;
+  const isBillingValid = !!fullName && !!cep && cep.length >= 9 && !!street && !!streetNumber && !!neighborhood && !!city && !!state;
+  const isCardValid = !!name && !!country && !!personType && (personType === "pf" ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) && stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
   if (isExternalContracting) {
     return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]", children: [
       /* @__PURE__ */ jsxs(DialogHeader, { className: "gap-3 text-left p-5", children: [
@@ -226,7 +254,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: currentStep === 1 ? "Adicionar cart\xE3o" : "Dados de cobran\xE7a" }),
+          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: "Adicionar cart\xE3o" }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -238,28 +266,28 @@ function AddCardModal() {
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "h-1 bg-zinc-100 w-full", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "h-full transition-all duration-300 ease-in-out bg-primary",
-            style: { width: currentStep === 1 ? "50%" : "100%" }
-          }
-        ) }),
+        /* @__PURE__ */ jsx(CardStepper, { currentStep }),
         /* @__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 ${currentStep !== 1 ? "hidden" : ""}`, children: /* @__PURE__ */ jsx(
-                CardFormFields,
-                {
-                  form,
-                  onStripeChange: handleStripeChange,
-                  stripeErrors
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: `flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? "hidden" : ""}`, children: /* @__PURE__ */ jsx(BillingFormFields, { form }) }),
+              /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 1 ? "hidden" : ""}`, children: [
+                /* @__PURE__ */ jsx("h2", { className: "font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950", children: "Adicione suas informa\xE7\xF5es de cobran\xE7a" }),
+                /* @__PURE__ */ jsx(BillingFormFields, { form })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? "hidden" : ""}`, children: [
+                /* @__PURE__ */ jsx("h2", { className: "font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950", children: "Adicione informa\xE7\xF5es do seu cart\xE3o" }),
+                /* @__PURE__ */ jsx(
+                  CardFormFields,
+                  {
+                    form,
+                    onStripeChange: handleStripeChange,
+                    stripeErrors
+                  }
+                )
+              ] }),
               /* @__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(
@@ -268,17 +296,25 @@ function AddCardModal() {
                     type: "button",
                     className: "h-10!",
                     onClick: handleContinue,
-                    disabled: !isStep1Valid,
-                    loading: isAuthenticating,
-                    children: isAuthenticating ? "Autenticando..." : "Continuar"
+                    disabled: !isBillingValid,
+                    children: "Continuar"
                   }
                 )
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: handleBack, className: "h-10!", children: "Voltar" }),
-                /* @__PURE__ */ jsxs(Button, { type: "submit", className: "h-10!", disabled: isSubmitting || !isStep2Valid, children: [
-                  isSubmitting && /* @__PURE__ */ jsx(IconLoader2, { className: "size-4 animate-spin" }),
-                  isSubmitting ? "Adicionando cart\xE3o..." : "Adicionar cart\xE3o"
-                ] })
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "submit",
+                    className: "h-10!",
+                    disabled: isSubmitting || isAuthenticating || !isCardValid,
+                    loading: isAuthenticating || isSubmitting,
+                    children: [
+                      isAuthenticating && /* @__PURE__ */ jsx(IconLoader2, { className: "size-4 animate-spin" }),
+                      isAuthenticating ? "Autenticando..." : 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, 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 { useCreateSetupIntent } from '../../../modules/cards/hooks/create-setup-intent.hook';\nimport { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';\nimport { useExternalContracting } from '../../../providers/whitelabel.provider';\nimport { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';\nimport type { CardFormData, StripeElementsStatus } from './CardFormFields';\nimport { IconLoader2, IconX, IconCreditCard } 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 { isExternalContracting, redirectToExternal } = useExternalContracting();\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  const [setupIntentId, setSetupIntentId] = useState<string | null>(null);\n  const [isAuthenticating, setIsAuthenticating] = useState(false);\n\n  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;\n\n  const createSetupIntentMutation = useCreateSetupIntent();\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    setSetupIntentId(null);\n    setIsAuthenticating(false);\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) return;\n    if (!stripe || !elements) return;\n\n    const cardElement = elements.getElement(CardNumberElement);\n    if (!cardElement) return;\n\n    setIsAuthenticating(true);\n    try {\n      const intentResult = await createSetupIntentMutation.mutateAsync();\n      const intent = intentResult?.data;\n      if (!intent?.client_secret || !intent?.setup_intent_id) {\n        toast.custom(\n          (t) => (\n            <Toast\n              variant=\"error\"\n              message=\"Não foi possível iniciar a autenticação do cartão, tente novamente.\"\n              toastId={t}\n            />\n          ),\n          { duration: 5000 }\n        );\n        return;\n      }\n\n      const { setupIntent, error } = await stripe.confirmCardSetup(intent.client_secret, {\n        payment_method: {\n          card: cardElement,\n          billing_details: { name: form.getValues('name') },\n        },\n      });\n\n      if (error) {\n        toast.custom(\n          (t) => (\n            <Toast\n              variant=\"error\"\n              message={error.message || 'Falha na autenticação do cartão.'}\n              toastId={t}\n            />\n          ),\n          { duration: 5000 }\n        );\n        return;\n      }\n\n      if (setupIntent?.status !== 'succeeded') {\n        toast.custom(\n          (t) => (\n            <Toast\n              variant=\"error\"\n              message={`Autenticação não concluída (status: ${setupIntent?.status ?? 'desconhecido'}).`}\n              toastId={t}\n            />\n          ),\n          { duration: 5000 }\n        );\n        return;\n      }\n\n      setSetupIntentId(intent.setup_intent_id);\n      form.clearErrors(['fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);\n      setCurrentStep(2);\n    } catch {\n      toast.custom(\n        (t) => (\n          <Toast\n            variant=\"error\"\n            message=\"Não foi possível iniciar a autenticação do cartão, tente novamente.\"\n            toastId={t}\n          />\n        ),\n        { duration: 5000 }\n      );\n    } finally {\n      setIsAuthenticating(false);\n    }\n  }, [form, stripeStatus, stripe, elements, createSetupIntentMutation]);\n\n  const handleBack = useCallback(() => {\n    setCurrentStep(1);\n  }, []);\n\n  async function handleSubmit(data: CardFormData) {\n    if (!setupIntentId) return;\n\n    try {\n      const [cardResult] = await Promise.all([\n        createCardMutation.mutateAsync({\n          setup_intent_id: setupIntentId,\n          name: data.name,\n          set_default: true,\n        }),\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  if (isExternalContracting) {\n    return (\n      <Dialog open={isOpen} onOpenChange={handleClose}>\n        <DialogContent className=\"flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]\">\n          <DialogHeader className=\"gap-3 text-left p-5\">\n            <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n              <IconCreditCard size={24} className=\"text-zinc-950\" />\n            </div>\n            <div className=\"flex flex-col gap-2\">\n              <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n                Gerenciamento de cartões indisponível\n              </DialogTitle>\n              <span className=\"paragraph-small-regular text-zinc-600\">\n                Acesse sua área de assinatura para gerenciar formas de pagamento.\n              </span>\n            </div>\n          </DialogHeader>\n          <div className=\"flex items-center gap-2 p-5 border-t border-zinc-200\">\n            <Button\n              className=\"w-fit h-10!\"\n              onClick={() => {\n                handleClose();\n                redirectToExternal('contracting');\n              }}\n            >\n              Acessar área de assinatura\n            </Button>\n          </div>\n        </DialogContent>\n      </Dialog>\n    );\n  }\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 transition-all duration-300 ease-in-out bg-primary\"\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                  loading={isAuthenticating}\n                >\n                  {isAuthenticating ? 'Autenticando...' : '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":";AAiGY,SA4NE,UA5NF,KAoJA,YApJA;AA/FZ,SAAS,aAAa,gBAAgB;AACtC,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,gBAAgB,mBAAmB,sBAAsB;AAElE,SAAS,aAAa,OAAO,sBAAsB;AACnD,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB,aAAa,iBAAiB;AAC1D,SAAS,aAAa;AAEtB,MAAM,wBAA8C;AAAA,EAClD,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX;AAEe,SAAR,eAAgC;AACrC,QAAM,EAAE,aAAa,WAAW,WAAW,IAAI,gBAAgB;AAC/D,QAAM,SAAS,gBAAgB;AAC/B,QAAM,EAAE,uBAAuB,mBAAmB,IAAI,uBAAuB;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,cAAc,eAAe,IAAI,SAA+B,qBAAqB;AAC5F,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6C,CAAC,CAAC;AACvF,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,QAAM,cAAc,UAAU;AAE9B,QAAM,4BAA4B,qBAAqB;AACvD,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,oBAAgB,qBAAqB;AACrC,oBAAgB,CAAC,CAAC;AAClB,qBAAiB,IAAI;AACrB,wBAAoB,KAAK;AACzB,eAAW;AAAA,EACb,GAAG,CAAC,MAAM,UAAU,CAAC;AAErB,QAAM,qBAAqB;AAAA,IACzB,CAAC,OAAmC,aAAsB;AACxD,sBAAgB,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,SAAS,EAAE;AAC1D,UAAI,UAAU;AACZ,wBAAgB,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,OAAU,EAAE;AAAA,MAC7D;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,YAAY,YAAY;AAC7C,UAAM,WAAW,MAAM,KAAK,QAAQ,CAAC,QAAQ,WAAW,cAAc,OAAO,MAAM,CAAC;AAEpF,UAAM,kBAAsD,CAAC;AAC7D,QAAI,CAAC,aAAa,WAAY,iBAAgB,aAAa;AAC3D,QAAI,CAAC,aAAa,WAAY,iBAAgB,aAAa;AAC3D,QAAI,CAAC,aAAa,QAAS,iBAAgB,UAAU;AACrD,oBAAgB,eAAe;AAE/B,UAAM,cAAc,aAAa,cAAc,aAAa,cAAc,aAAa;AAEvF,QAAI,CAAC,YAAY,CAAC,YAAa;AAC/B,QAAI,CAAC,UAAU,CAAC,SAAU;AAE1B,UAAM,cAAc,SAAS,WAAW,iBAAiB;AACzD,QAAI,CAAC,YAAa;AAElB,wBAAoB,IAAI;AACxB,QAAI;AACF,YAAM,eAAe,MAAM,0BAA0B,YAAY;AACjE,YAAM,SAAS,cAAc;AAC7B,UAAI,CAAC,QAAQ,iBAAiB,CAAC,QAAQ,iBAAiB;AACtD,cAAM;AAAA,UACJ,CAAC,MACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAQ;AAAA,cACR,SAAS;AAAA;AAAA,UACX;AAAA,UAEF,EAAE,UAAU,IAAK;AAAA,QACnB;AACA;AAAA,MACF;AAEA,YAAM,EAAE,aAAa,MAAM,IAAI,MAAM,OAAO,iBAAiB,OAAO,eAAe;AAAA,QACjF,gBAAgB;AAAA,UACd,MAAM;AAAA,UACN,iBAAiB,EAAE,MAAM,KAAK,UAAU,MAAM,EAAE;AAAA,QAClD;AAAA,MACF,CAAC;AAED,UAAI,OAAO;AACT,cAAM;AAAA,UACJ,CAAC,MACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,MAAM,WAAW;AAAA,cAC1B,SAAS;AAAA;AAAA,UACX;AAAA,UAEF,EAAE,UAAU,IAAK;AAAA,QACnB;AACA;AAAA,MACF;AAEA,UAAI,aAAa,WAAW,aAAa;AACvC,cAAM;AAAA,UACJ,CAAC,MACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,mDAAuC,aAAa,UAAU,cAAc;AAAA,cACrF,SAAS;AAAA;AAAA,UACX;AAAA,UAEF,EAAE,UAAU,IAAK;AAAA,QACnB;AACA;AAAA,MACF;AAEA,uBAAiB,OAAO,eAAe;AACvC,WAAK,YAAY,CAAC,YAAY,OAAO,UAAU,gBAAgB,gBAAgB,QAAQ,OAAO,CAAC;AAC/F,qBAAe,CAAC;AAAA,IAClB,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,UAAE;AACA,0BAAoB,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,MAAM,cAAc,QAAQ,UAAU,yBAAyB,CAAC;AAEpE,QAAM,aAAa,YAAY,MAAM;AACnC,mBAAe,CAAC;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,iBAAe,aAAa,MAAoB;AAC9C,QAAI,CAAC,cAAe;AAEpB,QAAI;AACF,YAAM,CAAC,UAAU,IAAI,MAAM,QAAQ,IAAI;AAAA,QACrC,mBAAmB,YAAY;AAAA,UAC7B,iBAAiB;AAAA,UACjB,MAAM,KAAK;AAAA,UACX,aAAa;AAAA,QACf,CAAC;AAAA,QACD,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,cAAc,KAAK;AAAA,UACnB,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,QAAM,gBAAgB,KAAK,MAAM,CAAC,QAAQ,WAAW,cAAc,OAAO,QAAQ,YAAY,OAAO,UAAU,gBAAgB,gBAAgB,QAAQ,OAAO,CAAC;AAC/J,QAAM,CAAC,MAAM,SAAS,YAAY,KAAK,MAAM,UAAU,KAAK,QAAQ,cAAc,cAAc,MAAM,KAAK,IAAI;AAC/G,QAAM,eACJ,CAAC,CAAC,QACF,CAAC,CAAC,WACF,CAAC,CAAC,eACD,eAAe,OAAO,CAAC,CAAC,OAAO,IAAI,UAAU,KAAK,CAAC,CAAC,QAAQ,KAAK,UAAU,OAC5E,aAAa,cACb,aAAa,cACb,aAAa;AACf,QAAM,eACJ,CAAC,CAAC,YACF,CAAC,CAAC,OAAO,IAAI,UAAU,KACvB,CAAC,CAAC,UACF,CAAC,CAAC,gBACF,CAAC,CAAC,gBACF,CAAC,CAAC,QACF,CAAC,CAAC;AAEJ,MAAI,uBAAuB;AACzB,WACE,oBAAC,UAAO,MAAM,QAAQ,cAAc,aAClC,+BAAC,iBAAc,WAAU,4DACvB;AAAA,2BAAC,gBAAa,WAAU,uBACtB;AAAA,4BAAC,SAAI,WAAU,oEACb,8BAAC,kBAAe,MAAM,IAAI,WAAU,iBAAgB,GACtD;AAAA,QACA,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,eAAY,WAAU,2CAA0C,yDAEjE;AAAA,UACA,oBAAC,UAAK,WAAU,yCAAwC,kFAExD;AAAA,WACF;AAAA,SACF;AAAA,MACA,oBAAC,SAAI,WAAU,wDACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,MAAM;AACb,wBAAY;AACZ,+BAAmB,aAAa;AAAA,UAClC;AAAA,UACD;AAAA;AAAA,MAED,GACF;AAAA,OACF,GACF;AAAA,EAEJ;AAEA,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,WAAW,+DAA+D,gBAAgB,IAAI,WAAW,EAAE,IAC9G;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA,gBAAgB;AAAA,kBAChB;AAAA;AAAA,cACF,GACF;AAAA,cACA,oBAAC,SAAI,WAAW,+DAA+D,gBAAgB,IAAI,WAAW,EAAE,IAC9G,8BAAC,qBAAkB,MAAY,GACjC;AAAA,cAEA,oBAAC,SAAI,WAAU,+FACZ,0BAAgB,IACf,iCACE;AAAA,oCAAC,UAAO,SAAQ,aAAY,MAAK,UAAS,SAAS,aAAa,WAAU,SAAQ,sBAElF;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,SAAS;AAAA,oBACT,UAAU,CAAC;AAAA,oBACX,SAAS;AAAA,oBAER,6BAAmB,oBAAoB;AAAA;AAAA,gBAC1C;AAAA,iBACF,IAEA,iCACE;AAAA,oCAAC,UAAO,SAAQ,aAAY,MAAK,UAAS,SAAS,YAAY,WAAU,SAAQ,oBAEjF;AAAA,gBACA,qBAAC,UAAO,MAAK,UAAS,WAAU,SAAQ,UAAU,gBAAgB,CAAC,cAChE;AAAA,kCAAgB,oBAAC,eAAY,WAAU,uBAAsB;AAAA,kBAC7D,eAAe,6BAA0B;AAAA,mBAC5C;AAAA,iBACF,GAEJ;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 { useCreateSetupIntent } from '../../../modules/cards/hooks/create-setup-intent.hook';\nimport { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';\nimport { useExternalContracting } from '../../../providers/whitelabel.provider';\nimport { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';\nimport type { CardFormData, StripeElementsStatus } from './CardFormFields';\nimport { IconLoader2, IconX, IconCreditCard, IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport { cn } from '../../../infra/utils/clsx';\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\nconst STEPS = [\n  { number: 1, label: 'Cobrança' },\n  { number: 2, label: 'Cartão' },\n] as const;\n\nfunction CardStepper({ currentStep }: { readonly currentStep: number }) {\n  return (\n    <div className=\"flex items-center justify-center gap-2 px-4 py-3 border-b border-zinc-200 lg:border-b-0\">\n      {STEPS.map((step, idx) => {\n        const isCompleted = currentStep > step.number;\n        const isCurrent = currentStep === step.number;\n        const isPending = !isCompleted && !isCurrent;\n        return (\n          <div key={step.number} className=\"flex items-center gap-2\">\n            <div\n              className={cn(\n                'flex items-center justify-center size-6 rounded-full paragraph-xsmall-semibold',\n                isCompleted && 'bg-green-500 text-white',\n                isCurrent && 'bg-primary text-white',\n                isPending && 'border border-zinc-200 text-zinc-400',\n              )}\n            >\n              {isCompleted ? <IconCheck size={14} stroke={3} /> : step.number}\n            </div>\n            <span\n              className={cn(\n                'paragraph-xsmall-semibold',\n                (isCompleted || isCurrent) && 'text-zinc-950',\n                isPending && 'text-zinc-400',\n              )}\n            >\n              {step.label}\n            </span>\n            {idx < STEPS.length - 1 && (\n              <IconChevronRight size={16} className=\"text-zinc-300 ml-1\" />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default function AddCardModal() {\n  const { activeModal, modalData, closeModal } = useModalManager();\n  const isOpen = activeModal === 'addCardModal';\n  const { isExternalContracting, redirectToExternal } = useExternalContracting();\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  const [isAuthenticating, setIsAuthenticating] = useState(false);\n\n  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;\n\n  const createSetupIntentMutation = useCreateSetupIntent();\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    setIsAuthenticating(false);\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 isValid = await form.trigger([\n      'fullName',\n      'cep',\n      'street',\n      'streetNumber',\n      'neighborhood',\n      'city',\n      'state',\n    ]);\n    if (!isValid) return;\n    setCurrentStep(2);\n  }, [form]);\n\n  const handleBack = useCallback(() => {\n    setCurrentStep(1);\n  }, []);\n\n  async function handleSubmit(data: CardFormData) {\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 =\n      stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;\n    if (!stripeValid) return;\n    if (!stripe || !elements) return;\n\n    const cardElement = elements.getElement(CardNumberElement);\n    if (!cardElement) return;\n\n    setIsAuthenticating(true);\n    try {\n      const intentResult = await createSetupIntentMutation.mutateAsync();\n      const intent = intentResult?.data;\n      if (!intent?.client_secret || !intent?.setup_intent_id) {\n        toast.custom(\n          (t) => (\n            <Toast\n              variant=\"error\"\n              message=\"Não foi possível iniciar a autenticação do cartão, tente novamente.\"\n              toastId={t}\n            />\n          ),\n          { duration: 5000 }\n        );\n        return;\n      }\n\n      const { setupIntent, error } = await stripe.confirmCardSetup(intent.client_secret, {\n        payment_method: {\n          card: cardElement,\n          billing_details: { name: data.name },\n        },\n      });\n\n      if (error) {\n        toast.custom(\n          (t) => (\n            <Toast\n              variant=\"error\"\n              message={error.message || 'Falha na autenticação do cartão.'}\n              toastId={t}\n            />\n          ),\n          { duration: 5000 }\n        );\n        return;\n      }\n\n      if (setupIntent?.status !== 'succeeded') {\n        toast.custom(\n          (t) => (\n            <Toast\n              variant=\"error\"\n              message={`Autenticação não concluída (status: ${setupIntent?.status ?? 'desconhecido'}).`}\n              toastId={t}\n            />\n          ),\n          { duration: 5000 }\n        );\n        return;\n      }\n\n      const [cardResult] = await Promise.all([\n        createCardMutation.mutateAsync({\n          setup_intent_id: intent.setup_intent_id,\n          name: data.name,\n          set_default: true,\n        }),\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    } finally {\n      setIsAuthenticating(false);\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 isBillingValid =\n    !!fullName &&\n    !!cep && cep.length >= 9 &&\n    !!street &&\n    !!streetNumber &&\n    !!neighborhood &&\n    !!city &&\n    !!state;\n  const isCardValid =\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\n  if (isExternalContracting) {\n    return (\n      <Dialog open={isOpen} onOpenChange={handleClose}>\n        <DialogContent className=\"flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]\">\n          <DialogHeader className=\"gap-3 text-left p-5\">\n            <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n              <IconCreditCard size={24} className=\"text-zinc-950\" />\n            </div>\n            <div className=\"flex flex-col gap-2\">\n              <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n                Gerenciamento de cartões indisponível\n              </DialogTitle>\n              <span className=\"paragraph-small-regular text-zinc-600\">\n                Acesse sua área de assinatura para gerenciar formas de pagamento.\n              </span>\n            </div>\n          </DialogHeader>\n          <div className=\"flex items-center gap-2 p-5 border-t border-zinc-200\">\n            <Button\n              className=\"w-fit h-10!\"\n              onClick={() => {\n                handleClose();\n                redirectToExternal('contracting');\n              }}\n            >\n              Acessar área de assinatura\n            </Button>\n          </div>\n        </DialogContent>\n      </Dialog>\n    );\n  }\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        <CardStepper currentStep={currentStep} />\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            <h2 className=\"font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950\">\n              Adicione suas informações de cobrança\n            </h2>\n            <BillingFormFields form={form} />\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            <h2 className=\"font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950\">\n              Adicione informações do seu cartão\n            </h2>\n            <CardFormFields\n              form={form}\n              onStripeChange={handleStripeChange}\n              stripeErrors={stripeErrors}\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\n                  type=\"button\"\n                  className=\"h-10!\"\n                  onClick={handleContinue}\n                  disabled={!isBillingValid}\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\n                  type=\"submit\"\n                  className=\"h-10!\"\n                  disabled={isSubmitting || isAuthenticating || !isCardValid}\n                  loading={isAuthenticating || isSubmitting}\n                >\n                  {isAuthenticating && <IconLoader2 className=\"size-4 animate-spin\" />}\n                  {isAuthenticating\n                    ? 'Autenticando...'\n                    : isSubmitting\n                      ? 'Adicionando cartão...'\n                      : '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/package.json

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

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

@@ -11,7 +11,8 @@ import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountMana
 import { useExternalContracting } from '../../../providers/whitelabel.provider';
 import { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';
 import type { CardFormData, StripeElementsStatus } from './CardFormFields';
-import { IconLoader2, IconX, IconCreditCard } from '@tabler/icons-react';
+import { IconLoader2, IconX, IconCreditCard, IconCheck, IconChevronRight } from '@tabler/icons-react';
+import { cn } from '../../../infra/utils/clsx';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CardNumberElement, useElements, useStripe } from '@stripe/react-stripe-js';
@@ -23,6 +24,49 @@ const INITIAL_STRIPE_STATUS: StripeElementsStatus = {
   cardCvc: false,
 };
 
+const STEPS = [
+  { number: 1, label: 'Cobrança' },
+  { number: 2, label: 'Cartão' },
+] as const;
+
+function CardStepper({ currentStep }: { readonly currentStep: number }) {
+  return (
+    <div className="flex items-center justify-center gap-2 px-4 py-3 border-b border-zinc-200 lg:border-b-0">
+      {STEPS.map((step, idx) => {
+        const isCompleted = currentStep > step.number;
+        const isCurrent = currentStep === step.number;
+        const isPending = !isCompleted && !isCurrent;
+        return (
+          <div key={step.number} className="flex items-center gap-2">
+            <div
+              className={cn(
+                'flex items-center justify-center size-6 rounded-full paragraph-xsmall-semibold',
+                isCompleted && 'bg-green-500 text-white',
+                isCurrent && 'bg-primary text-white',
+                isPending && 'border border-zinc-200 text-zinc-400',
+              )}
+            >
+              {isCompleted ? <IconCheck size={14} stroke={3} /> : step.number}
+            </div>
+            <span
+              className={cn(
+                'paragraph-xsmall-semibold',
+                (isCompleted || isCurrent) && 'text-zinc-950',
+                isPending && 'text-zinc-400',
+              )}
+            >
+              {step.label}
+            </span>
+            {idx < STEPS.length - 1 && (
+              <IconChevronRight size={16} className="text-zinc-300 ml-1" />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 export default function AddCardModal() {
   const { activeModal, modalData, closeModal } = useModalManager();
   const isOpen = activeModal === 'addCardModal';
@@ -30,7 +74,6 @@ export default function AddCardModal() {
   const [currentStep, setCurrentStep] = useState(1);
   const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);
   const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});
-  const [setupIntentId, setSetupIntentId] = useState<string | null>(null);
   const [isAuthenticating, setIsAuthenticating] = useState(false);
 
   const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;
@@ -56,7 +99,6 @@ export default function AddCardModal() {
     setCurrentStep(1);
     setStripeStatus(INITIAL_STRIPE_STATUS);
     setStripeErrors({});
-    setSetupIntentId(null);
     setIsAuthenticating(false);
     closeModal();
   }, [form, closeModal]);
@@ -72,17 +114,33 @@ export default function AddCardModal() {
   );
 
   const handleContinue = useCallback(async () => {
-    const rhfValid = await form.trigger(['name', 'country', 'personType', 'cpf', 'cnpj']);
+    const isValid = await form.trigger([
+      'fullName',
+      'cep',
+      'street',
+      'streetNumber',
+      'neighborhood',
+      'city',
+      'state',
+    ]);
+    if (!isValid) return;
+    setCurrentStep(2);
+  }, [form]);
+
+  const handleBack = useCallback(() => {
+    setCurrentStep(1);
+  }, []);
 
+  async function handleSubmit(data: CardFormData) {
     const newStripeErrors: Record<string, string | undefined> = {};
     if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = 'Número do cartão é obrigatório';
     if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = 'Data de validade é obrigatória';
     if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = 'Código de segurança é obrigatório';
     setStripeErrors(newStripeErrors);
 
-    const stripeValid = stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
-
-    if (!rhfValid || !stripeValid) return;
+    const stripeValid =
+      stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
+    if (!stripeValid) return;
     if (!stripe || !elements) return;
 
     const cardElement = elements.getElement(CardNumberElement);
@@ -109,7 +167,7 @@ export default function AddCardModal() {
       const { setupIntent, error } = await stripe.confirmCardSetup(intent.client_secret, {
         payment_method: {
           card: cardElement,
-          billing_details: { name: form.getValues('name') },
+          billing_details: { name: data.name },
         },
       });
 
@@ -141,36 +199,9 @@ export default function AddCardModal() {
         return;
       }
 
-      setSetupIntentId(intent.setup_intent_id);
-      form.clearErrors(['fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);
-      setCurrentStep(2);
-    } catch {
-      toast.custom(
-        (t) => (
-          <Toast
-            variant="error"
-            message="Não foi possível iniciar a autenticação do cartão, tente novamente."
-            toastId={t}
-          />
-        ),
-        { duration: 5000 }
-      );
-    } finally {
-      setIsAuthenticating(false);
-    }
-  }, [form, stripeStatus, stripe, elements, createSetupIntentMutation]);
-
-  const handleBack = useCallback(() => {
-    setCurrentStep(1);
-  }, []);
-
-  async function handleSubmit(data: CardFormData) {
-    if (!setupIntentId) return;
-
-    try {
       const [cardResult] = await Promise.all([
         createCardMutation.mutateAsync({
-          setup_intent_id: setupIntentId,
+          setup_intent_id: intent.setup_intent_id,
           name: data.name,
           set_default: true,
         }),
@@ -208,6 +239,8 @@ export default function AddCardModal() {
         ),
         { duration: 5000 }
       );
+    } finally {
+      setIsAuthenticating(false);
     }
   }
 
@@ -218,15 +251,7 @@ export default function AddCardModal() {
 
   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 =
+  const isBillingValid =
     !!fullName &&
     !!cep && cep.length >= 9 &&
     !!street &&
@@ -234,6 +259,14 @@ export default function AddCardModal() {
     !!neighborhood &&
     !!city &&
     !!state;
+  const isCardValid =
+    !!name &&
+    !!country &&
+    !!personType &&
+    (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&
+    stripeStatus.cardNumber &&
+    stripeStatus.cardExpiry &&
+    stripeStatus.cardCvc;
 
   if (isExternalContracting) {
     return (
@@ -277,7 +310,7 @@ export default function AddCardModal() {
         <DialogHeader className="p-0">
           <div className="flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0">
             <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
-              {currentStep === 1 ? 'Adicionar cartão' : 'Dados de cobrança'}
+              Adicionar cartão
             </DialogTitle>
             <Button
               type="button"
@@ -290,28 +323,28 @@ export default function AddCardModal() {
           </div>
         </DialogHeader>
 
-        {/* Progress bar */}
-        <div className="h-1 bg-zinc-100 w-full">
-          <div
-            className="h-full transition-all duration-300 ease-in-out bg-primary"
-            style={{ width: currentStep === 1 ? '50%' : '100%' }}
-          />
-        </div>
+        <CardStepper currentStep={currentStep} />
 
         <form
           onSubmit={form.handleSubmit(handleSubmit)}
           className="flex flex-col flex-1 lg:flex-none"
         >
           <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 1 ? 'hidden' : ''}`}>
+            <h2 className="font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950">
+              Adicione suas informações de cobrança
+            </h2>
+            <BillingFormFields form={form} />
+          </div>
+          <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? 'hidden' : ''}`}>
+            <h2 className="font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950">
+              Adicione informações do seu cartão
+            </h2>
             <CardFormFields
               form={form}
               onStripeChange={handleStripeChange}
               stripeErrors={stripeErrors}
             />
           </div>
-          <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? 'hidden' : ''}`}>
-            <BillingFormFields form={form} />
-          </div>
 
           <div className="flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0">
             {currentStep === 1 ? (
@@ -323,10 +356,9 @@ export default function AddCardModal() {
                   type="button"
                   className="h-10!"
                   onClick={handleContinue}
-                  disabled={!isStep1Valid}
-                  loading={isAuthenticating}
+                  disabled={!isBillingValid}
                 >
-                  {isAuthenticating ? 'Autenticando...' : 'Continuar'}
+                  Continuar
                 </Button>
               </>
             ) : (
@@ -334,9 +366,18 @@ export default function AddCardModal() {
                 <Button variant="secondary" type="button" onClick={handleBack} className="h-10!">
                   Voltar
                 </Button>
-                <Button type="submit" className="h-10!" disabled={isSubmitting || !isStep2Valid}>
-                  {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
-                  {isSubmitting ? 'Adicionando cartão...' : 'Adicionar cartão'}
+                <Button
+                  type="submit"
+                  className="h-10!"
+                  disabled={isSubmitting || isAuthenticating || !isCardValid}
+                  loading={isAuthenticating || isSubmitting}
+                >
+                  {isAuthenticating && <IconLoader2 className="size-4 animate-spin" />}
+                  {isAuthenticating
+                    ? 'Autenticando...'
+                    : isSubmitting
+                      ? 'Adicionando cartão...'
+                      : 'Adicionar cartão'}
                 </Button>
               </>
             )}