@greatapps/common 1.1.698 → 1.1.700

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

@@ -1,420 +1,420 @@
-'use client';
-
-import { useCallback, useState, useEffect } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
-import { Button } from '../../ui/buttons/Button';
-import { Toast } from '../../ui/feedback/Toast';
-import { useModalManager } from '../../../store/useModalManager';
-import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
-import { useCreateSetupIntent } from '../../../modules/cards/hooks/create-setup-intent.hook';
-import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
-import { useCurrentAccount } from '../../../modules/accounts/hooks/current-account.hook';
-import { useExternalContracting } from '../../../providers/whitelabel.provider';
-import { CardFormFields, BillingFormFields, buildCardFormSchema } from './CardFormFields';
-import type { CardFormData, StripeElementsStatus } from './CardFormFields';
-import { 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';
-import { toast } from 'sonner';
-import { useTranslations } from 'next-intl';
-
-const INITIAL_STRIPE_STATUS: StripeElementsStatus = {
-  cardNumber: false,
-  cardExpiry: false,
-  cardCvc: false,
-};
-
-function CardStepper({ currentStep }: { readonly currentStep: number }) {
-  const translate = useTranslations();
-  const steps = [
-    { number: 1, label: translate('common.cards.add.stepBilling') },
-    { number: 2, label: translate('common.cards.add.stepCard') },
-  ];
-  return (
-    <div className="flex items-center justify-start gap-2 px-4 py-3 bg-zinc-50 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-50 text-green-600 border border-green-200',
-                isCurrent && 'bg-primary text-zinc-950',
-                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 translate = useTranslations();
-  const { activeModal, modalData, closeModal } = useModalManager();
-  const isOpen = activeModal === 'addCardModal';
-  const { isExternalContracting, redirectToExternal } = useExternalContracting();
-  const { data: account } = useCurrentAccount();
-  const isInternational = account?.gateway === 'stripe_usd';
-  const [currentStep, setCurrentStep] = useState(1);
-  const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);
-  const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});
-  const [isAuthenticating, setIsAuthenticating] = useState(false);
-
-  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;
-
-  const createSetupIntentMutation = useCreateSetupIntent();
-  const createCardMutation = useCreateCard();
-  const updateAccountMutation = useUpdateAccount();
-  const elements = useElements();
-  const stripe = useStripe();
-
-  const form = useForm<CardFormData>({
-    resolver: zodResolver(buildCardFormSchema(isInternational)),
-    mode: 'onSubmit',
-    reValidateMode: 'onChange',
-    defaultValues: {
-      country: 'BR',
-      personType: 'pf',
-    },
-  });
-
-  useEffect(() => {
-    if (isInternational) {
-      form.setValue('country', 'US');
-    }
-  }, [isInternational, form]);
-
-  const handleClose = useCallback(() => {
-    form.reset();
-    setCurrentStep(1);
-    setStripeStatus(INITIAL_STRIPE_STATUS);
-    setStripeErrors({});
-    setIsAuthenticating(false);
-    closeModal();
-  }, [form, closeModal]);
-
-  const handleStripeChange = useCallback(
-    (field: keyof StripeElementsStatus, complete: boolean) => {
-      setStripeStatus((prev) => ({ ...prev, [field]: complete }));
-      if (complete) {
-        setStripeErrors((prev) => ({ ...prev, [field]: undefined }));
-      }
-    },
-    []
-  );
-
-  const handleContinue = useCallback(async () => {
-    const fields: (keyof CardFormData)[] = isInternational
-      ? ['fullName', 'cep', 'street', 'city', 'state']
-      : ['fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state'];
-    const isValid = await form.trigger(fields);
-    if (!isValid) return;
-    setCurrentStep(2);
-  }, [form, isInternational]);
-
-  const handleBack = useCallback(() => {
-    setCurrentStep(1);
-  }, []);
-
-  async function handleSubmit(data: CardFormData) {
-    const newStripeErrors: Record<string, string | undefined> = {};
-    if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = translate('common.cards.form.cardNumberRequired');
-    if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = translate('common.cards.form.cardExpiryRequired');
-    if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = translate('common.cards.form.cardCvcRequired');
-    setStripeErrors(newStripeErrors);
-
-    const stripeValid =
-      stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
-    if (!stripeValid) return;
-    if (!stripe || !elements) return;
-
-    const cardElement = elements.getElement(CardNumberElement);
-    if (!cardElement) return;
-
-    setIsAuthenticating(true);
-    try {
-      const intentResult = await createSetupIntentMutation.mutateAsync();
-      const intent = intentResult?.data;
-      if (!intent?.client_secret || !intent?.setup_intent_id) {
-        toast.custom(
-          (t) => (
-            <Toast
-              variant="error"
-              message={translate('common.cards.add.errorInitAuth')}
-              toastId={t}
-            />
-          ),
-          { duration: 5000 }
-        );
-        return;
-      }
-
-      const billingDetails = isInternational
-        ? {
-            name: data.name,
-            address: {
-              line1: data.street,
-              line2: data.complement || undefined,
-              city: data.city,
-              state: data.state,
-              postal_code: data.cep,
-              country: data.country,
-            },
-          }
-        : { name: data.name };
-
-      const { setupIntent, error } = await stripe.confirmCardSetup(intent.client_secret, {
-        payment_method: {
-          card: cardElement,
-          billing_details: billingDetails,
-        },
-      });
-
-      if (error) {
-        toast.custom(
-          (t) => (
-            <Toast
-              variant="error"
-              message={error.message || translate('common.cards.add.errorAuth')}
-              toastId={t}
-            />
-          ),
-          { duration: 5000 }
-        );
-        return;
-      }
-
-      if (setupIntent?.status !== 'succeeded') {
-        toast.custom(
-          (t) => (
-            <Toast
-              variant="error"
-              message={translate('common.cards.add.errorAuthStatus', { status: setupIntent?.status ?? translate('common.cards.add.statusUnknown') })}
-              toastId={t}
-            />
-          ),
-          { duration: 5000 }
-        );
-        return;
-      }
-
-      const [cardResult] = await Promise.all([
-        createCardMutation.mutateAsync({
-          setup_intent_id: intent.setup_intent_id,
-          name: data.name,
-          set_default: true,
-        }),
-        updateAccountMutation.mutateAsync({
-          ...(isInternational
-            ? {}
-            : {
-                financial_document_type: data.personType === 'pf' ? 1 : 2,
-                financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,
-              }),
-          financial_name: data.fullName,
-          zipcode: data.cep,
-          address: data.street,
-          address_number: data.streetNumber || '',
-          address_complement: data.complement || '',
-          neighborhood: data.neighborhood || '',
-          city: data.city,
-          state: data.state,
-          country: data.country,
-        }),
-      ]);
-
-      if (cardResult.success && cardResult.data?.id != null) {
-        onCardAdded?.(cardResult.data.id.toString());
-      }
-
-      toast.custom(
-        (t) => <Toast variant="success" message={translate('common.cards.add.successToast')} toastId={t} />,
-        { duration: 5000 }
-      );
-      handleClose();
-    } catch {
-      toast.custom(
-        (t) => (
-          <Toast
-            variant="error"
-            message={translate('common.cards.add.errorSave')}
-            toastId={t}
-          />
-        ),
-        { duration: 5000 }
-      );
-    } 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 isBillingValid = isInternational
-    ? !!fullName && !!cep && !!street && !!city && !!state
-    : !!fullName &&
-      !!cep && cep.length >= 9 &&
-      !!street &&
-      !!streetNumber &&
-      !!neighborhood &&
-      !!city &&
-      !!state;
-  const isCardValid = isInternational
-    ? !!name && !!country && stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc
-    : !!name &&
-      !!country &&
-      !!personType &&
-      (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&
-      stripeStatus.cardNumber &&
-      stripeStatus.cardExpiry &&
-      stripeStatus.cardCvc;
-
-  if (isExternalContracting) {
-    return (
-      <Dialog open={isOpen} onOpenChange={handleClose}>
-        <DialogContent className="flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]">
-          <DialogHeader className="gap-3 text-left p-5">
-            <div className="flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg">
-              <IconCreditCard size={24} className="text-zinc-950" />
-            </div>
-            <div className="flex flex-col gap-2">
-              <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-                {translate('common.cards.add.externalTitle')}
-              </DialogTitle>
-              <span className="paragraph-small-regular text-zinc-600">
-                {translate('common.cards.add.externalDescription')}
-              </span>
-            </div>
-          </DialogHeader>
-          <div className="flex items-center gap-2 p-5 border-t border-zinc-200">
-            <Button
-              className="w-fit h-10!"
-              onClick={() => {
-                handleClose();
-                redirectToExternal('contracting');
-              }}
-            >
-              {translate('common.cards.add.externalButton')}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent
-        showCloseButton={false}
-        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-[502px] 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"
-      >
-        <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">
-              {translate('common.cards.add.title')}
-            </DialogTitle>
-            <Button
-              type="button"
-              variant="ghost"
-              className="size-8! p-0 absolute right-4"
-              onClick={handleClose}
-            >
-              <IconX size={18} />
-            </Button>
-          </div>
-        </DialogHeader>
-
-        <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">
-              {translate('common.cards.add.billingHeading')}
-            </h2>
-            <BillingFormFields form={form} isInternational={isInternational} />
-          </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">
-              {translate('common.cards.add.cardHeading')}
-            </h2>
-            <CardFormFields
-              form={form}
-              onStripeChange={handleStripeChange}
-              stripeErrors={stripeErrors}
-              isInternational={isInternational}
-            />
-          </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 ? (
-              <>
-                <Button variant="secondary" type="button" onClick={handleClose} className="h-10!">
-                  {translate('common.actions.cancel')}
-                </Button>
-                <Button
-                  type="button"
-                  className="h-10!"
-                  onClick={handleContinue}
-                  disabled={!isBillingValid}
-                >
-                  {translate('common.actions.continue')}
-                </Button>
-              </>
-            ) : (
-              <>
-                <Button variant="secondary" type="button" onClick={handleBack} className="h-10!">
-                  {translate('common.actions.back')}
-                </Button>
-                <Button
-                  type="submit"
-                  className="h-10!"
-                  disabled={isSubmitting || isAuthenticating || !isCardValid}
-                  loading={isAuthenticating || isSubmitting}
-                >
-                  {isAuthenticating
-                    ? translate('common.cards.add.authenticating')
-                    : isSubmitting
-                      ? translate('common.cards.add.submitting')
-                      : translate('common.cards.add.submit')}
-                </Button>
-              </>
-            )}
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useCallback, useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
+import { Button } from '../../ui/buttons/Button';
+import { Toast } from '../../ui/feedback/Toast';
+import { useModalManager } from '../../../store/useModalManager';
+import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
+import { useCreateSetupIntent } from '../../../modules/cards/hooks/create-setup-intent.hook';
+import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
+import { useCurrentAccount } from '../../../modules/accounts/hooks/current-account.hook';
+import { useExternalContracting } from '../../../providers/whitelabel.provider';
+import { CardFormFields, BillingFormFields, buildCardFormSchema } from './CardFormFields';
+import type { CardFormData, StripeElementsStatus } from './CardFormFields';
+import { 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';
+import { toast } from 'sonner';
+import { useTranslations } from 'next-intl';
+
+const INITIAL_STRIPE_STATUS: StripeElementsStatus = {
+  cardNumber: false,
+  cardExpiry: false,
+  cardCvc: false,
+};
+
+function CardStepper({ currentStep }: { readonly currentStep: number }) {
+  const translate = useTranslations();
+  const steps = [
+    { number: 1, label: translate('common.cards.add.stepBilling') },
+    { number: 2, label: translate('common.cards.add.stepCard') },
+  ];
+  return (
+    <div className="flex items-center justify-start gap-2 px-4 py-3 bg-zinc-50 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-50 text-green-600 border border-green-200',
+                isCurrent && 'bg-primary text-zinc-950',
+                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 translate = useTranslations();
+  const { activeModal, modalData, closeModal } = useModalManager();
+  const isOpen = activeModal === 'addCardModal';
+  const { isExternalContracting, redirectToExternal } = useExternalContracting();
+  const { data: account } = useCurrentAccount();
+  const isInternational = account?.gateway === 'stripe_usd';
+  const [currentStep, setCurrentStep] = useState(1);
+  const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);
+  const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});
+  const [isAuthenticating, setIsAuthenticating] = useState(false);
+
+  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;
+
+  const createSetupIntentMutation = useCreateSetupIntent();
+  const createCardMutation = useCreateCard();
+  const updateAccountMutation = useUpdateAccount();
+  const elements = useElements();
+  const stripe = useStripe();
+
+  const form = useForm<CardFormData>({
+    resolver: zodResolver(buildCardFormSchema(isInternational)),
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+    defaultValues: {
+      country: 'BR',
+      personType: 'pf',
+    },
+  });
+
+  useEffect(() => {
+    if (isInternational) {
+      form.setValue('country', 'US');
+    }
+  }, [isInternational, form]);
+
+  const handleClose = useCallback(() => {
+    form.reset();
+    setCurrentStep(1);
+    setStripeStatus(INITIAL_STRIPE_STATUS);
+    setStripeErrors({});
+    setIsAuthenticating(false);
+    closeModal();
+  }, [form, closeModal]);
+
+  const handleStripeChange = useCallback(
+    (field: keyof StripeElementsStatus, complete: boolean) => {
+      setStripeStatus((prev) => ({ ...prev, [field]: complete }));
+      if (complete) {
+        setStripeErrors((prev) => ({ ...prev, [field]: undefined }));
+      }
+    },
+    []
+  );
+
+  const handleContinue = useCallback(async () => {
+    const fields: (keyof CardFormData)[] = isInternational
+      ? ['fullName', 'cep', 'street', 'city', 'state']
+      : ['fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state'];
+    const isValid = await form.trigger(fields);
+    if (!isValid) return;
+    setCurrentStep(2);
+  }, [form, isInternational]);
+
+  const handleBack = useCallback(() => {
+    setCurrentStep(1);
+  }, []);
+
+  async function handleSubmit(data: CardFormData) {
+    const newStripeErrors: Record<string, string | undefined> = {};
+    if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = translate('common.cards.form.cardNumberRequired');
+    if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = translate('common.cards.form.cardExpiryRequired');
+    if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = translate('common.cards.form.cardCvcRequired');
+    setStripeErrors(newStripeErrors);
+
+    const stripeValid =
+      stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
+    if (!stripeValid) return;
+    if (!stripe || !elements) return;
+
+    const cardElement = elements.getElement(CardNumberElement);
+    if (!cardElement) return;
+
+    setIsAuthenticating(true);
+    try {
+      const intentResult = await createSetupIntentMutation.mutateAsync();
+      const intent = intentResult?.data;
+      if (!intent?.client_secret || !intent?.setup_intent_id) {
+        toast.custom(
+          (t) => (
+            <Toast
+              variant="error"
+              message={translate('common.cards.add.errorInitAuth')}
+              toastId={t}
+            />
+          ),
+          { duration: 5000 }
+        );
+        return;
+      }
+
+      const billingDetails = isInternational
+        ? {
+            name: data.name,
+            address: {
+              line1: data.street,
+              line2: data.complement || undefined,
+              city: data.city,
+              state: data.state,
+              postal_code: data.cep,
+              country: data.country,
+            },
+          }
+        : { name: data.name };
+
+      const { setupIntent, error } = await stripe.confirmCardSetup(intent.client_secret, {
+        payment_method: {
+          card: cardElement,
+          billing_details: billingDetails,
+        },
+      });
+
+      if (error) {
+        toast.custom(
+          (t) => (
+            <Toast
+              variant="error"
+              message={error.message || translate('common.cards.add.errorAuth')}
+              toastId={t}
+            />
+          ),
+          { duration: 5000 }
+        );
+        return;
+      }
+
+      if (setupIntent?.status !== 'succeeded') {
+        toast.custom(
+          (t) => (
+            <Toast
+              variant="error"
+              message={translate('common.cards.add.errorAuthStatus', { status: setupIntent?.status ?? translate('common.cards.add.statusUnknown') })}
+              toastId={t}
+            />
+          ),
+          { duration: 5000 }
+        );
+        return;
+      }
+
+      const [cardResult] = await Promise.all([
+        createCardMutation.mutateAsync({
+          setup_intent_id: intent.setup_intent_id,
+          name: data.name,
+          set_default: true,
+        }),
+        updateAccountMutation.mutateAsync({
+          ...(isInternational
+            ? {}
+            : {
+                financial_document_type: data.personType === 'pf' ? 1 : 2,
+                financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,
+              }),
+          financial_name: data.fullName,
+          zipcode: data.cep,
+          address: data.street,
+          address_number: data.streetNumber || '',
+          address_complement: data.complement || '',
+          neighborhood: data.neighborhood || '',
+          city: data.city,
+          state: data.state,
+          country: data.country,
+        }),
+      ]);
+
+      if (cardResult.success && cardResult.data?.id != null) {
+        onCardAdded?.(cardResult.data.id.toString());
+      }
+
+      toast.custom(
+        (t) => <Toast variant="success" message={translate('common.cards.add.successToast')} toastId={t} />,
+        { duration: 5000 }
+      );
+      handleClose();
+    } catch {
+      toast.custom(
+        (t) => (
+          <Toast
+            variant="error"
+            message={translate('common.cards.add.errorSave')}
+            toastId={t}
+          />
+        ),
+        { duration: 5000 }
+      );
+    } 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 isBillingValid = isInternational
+    ? !!fullName && !!cep && !!street && !!city && !!state
+    : !!fullName &&
+      !!cep && cep.length >= 9 &&
+      !!street &&
+      !!streetNumber &&
+      !!neighborhood &&
+      !!city &&
+      !!state;
+  const isCardValid = isInternational
+    ? !!name && !!country && stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc
+    : !!name &&
+      !!country &&
+      !!personType &&
+      (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&
+      stripeStatus.cardNumber &&
+      stripeStatus.cardExpiry &&
+      stripeStatus.cardCvc;
+
+  if (isExternalContracting) {
+    return (
+      <Dialog open={isOpen} onOpenChange={handleClose}>
+        <DialogContent className="flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]">
+          <DialogHeader className="gap-3 text-left p-5">
+            <div className="flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg">
+              <IconCreditCard size={24} className="text-zinc-950" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+                {translate('common.cards.add.externalTitle')}
+              </DialogTitle>
+              <span className="paragraph-small-regular text-zinc-600">
+                {translate('common.cards.add.externalDescription')}
+              </span>
+            </div>
+          </DialogHeader>
+          <div className="flex items-center gap-2 p-5 border-t border-zinc-200">
+            <Button
+              className="w-fit h-10!"
+              onClick={() => {
+                handleClose();
+                redirectToExternal('contracting');
+              }}
+            >
+              {translate('common.cards.add.externalButton')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        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-[502px] 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"
+      >
+        <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">
+              {translate('common.cards.add.title')}
+            </DialogTitle>
+            <Button
+              type="button"
+              variant="ghost"
+              className="size-8! p-0 absolute right-4"
+              onClick={handleClose}
+            >
+              <IconX size={18} />
+            </Button>
+          </div>
+        </DialogHeader>
+
+        <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">
+              {translate('common.cards.add.billingHeading')}
+            </h2>
+            <BillingFormFields form={form} isInternational={isInternational} />
+          </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">
+              {translate('common.cards.add.cardHeading')}
+            </h2>
+            <CardFormFields
+              form={form}
+              onStripeChange={handleStripeChange}
+              stripeErrors={stripeErrors}
+              isInternational={isInternational}
+            />
+          </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 ? (
+              <>
+                <Button variant="secondary" type="button" onClick={handleClose} className="h-10!">
+                  {translate('common.actions.cancel')}
+                </Button>
+                <Button
+                  type="button"
+                  className="h-10!"
+                  onClick={handleContinue}
+                  disabled={!isBillingValid}
+                >
+                  {translate('common.actions.continue')}
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button variant="secondary" type="button" onClick={handleBack} className="h-10!">
+                  {translate('common.actions.back')}
+                </Button>
+                <Button
+                  type="submit"
+                  className="h-10!"
+                  disabled={isSubmitting || isAuthenticating || !isCardValid}
+                  loading={isAuthenticating || isSubmitting}
+                >
+                  {isAuthenticating
+                    ? translate('common.cards.add.authenticating')
+                    : isSubmitting
+                      ? translate('common.cards.add.submitting')
+                      : translate('common.cards.add.submit')}
+                </Button>
+              </>
+            )}
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}