@greatapps/common 1.1.516 → 1.1.517

package/src/components/modals/PaidPlanRequiredModal.tsx

@@ -1,57 +1,57 @@
-"use client";
-
-import { IconLock } from '@tabler/icons-react';
-import { Button } from '../ui/buttons/Button';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from '../ui/overlay/Dialog';
-import { useWhitelabelUrls } from '../../providers/whitelabel.provider';
-import { useModalManager } from '../../store/useModalManager';
-import type { ModalData } from '../../store/useModalManager';
-
-export default function PaidPlanRequiredModal() {
-    const { activeModal, modalData, closeModal } = useModalManager();
-    const isOpen = activeModal === 'paidPlanRequiredModal';
-    const data = modalData as ModalData & { title?: string; description?: string };
-    const { accountsUrl } = useWhitelabelUrls();
-
-    const title = (data.title as string) ?? "Recurso disponível em planos pagos";
-    const description = (data.description as string) ?? "Para acessar este recurso, faça upgrade para um plano pago";
-
-    const handleKnowPlans = () => {
-        closeModal();
-        window.open(`${accountsUrl}/subscriptions?tab=plans`, '_blank');
-    };
-
-    return (
-        <Dialog open={isOpen} onOpenChange={() => closeModal()}>
-            <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">
-                        <IconLock size={24} className="text-zinc-950" />
-                    </div>
-                    <div className="flex flex-col gap-2">
-                        <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-                            {title}
-                        </DialogTitle>
-                        <DialogDescription className="paragraph-small-regular text-zinc-600">
-                            {description}
-                        </DialogDescription>
-                    </div>
-                </DialogHeader>
-                <div className="flex items-center gap-2 p-5 border-t border-zinc-200">
-                    <Button
-                        className="w-fit h-10!"
-                        onClick={handleKnowPlans}
-                    >
-                        Conhecer planos
-                    </Button>
-                </div>
-            </DialogContent>
-        </Dialog>
-    );
-}
+"use client";
+
+import { IconLock } from '@tabler/icons-react';
+import { Button } from '../ui/buttons/Button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '../ui/overlay/Dialog';
+import { useWhitelabelUrls } from '../../providers/whitelabel.provider';
+import { useModalManager } from '../../store/useModalManager';
+import type { ModalData } from '../../store/useModalManager';
+
+export default function PaidPlanRequiredModal() {
+    const { activeModal, modalData, closeModal } = useModalManager();
+    const isOpen = activeModal === 'paidPlanRequiredModal';
+    const data = modalData as ModalData & { title?: string; description?: string };
+    const { accountsUrl } = useWhitelabelUrls();
+
+    const title = (data.title as string) ?? "Recurso disponível em planos pagos";
+    const description = (data.description as string) ?? "Para acessar este recurso, faça upgrade para um plano pago";
+
+    const handleKnowPlans = () => {
+        closeModal();
+        window.open(`${accountsUrl}/subscriptions?tab=plans`, '_blank');
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={() => closeModal()}>
+            <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">
+                        <IconLock size={24} className="text-zinc-950" />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+                            {title}
+                        </DialogTitle>
+                        <DialogDescription className="paragraph-small-regular text-zinc-600">
+                            {description}
+                        </DialogDescription>
+                    </div>
+                </DialogHeader>
+                <div className="flex items-center gap-2 p-5 border-t border-zinc-200">
+                    <Button
+                        className="w-fit h-10!"
+                        onClick={handleKnowPlans}
+                    >
+                        Conhecer planos
+                    </Button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}

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

@@ -1,265 +1,265 @@
-'use client';
-
-import { useCallback, useState } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
-import { Button } from '../../ui/buttons/Button';
-import { Toast } from '../../ui/feedback/Toast';
-import { useModalManager } from '../../../store/useModalManager';
-import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
-import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
-import { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';
-import type { CardFormData, StripeElementsStatus } from './CardFormFields';
-import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
-import { IconLoader2, IconX } from '@tabler/icons-react';
-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';
-
-const INITIAL_STRIPE_STATUS: StripeElementsStatus = {
-  cardNumber: false,
-  cardExpiry: false,
-  cardCvc: false,
-};
-
-export default function AddCardModal() {
-  const { activeModal, modalData, closeModal } = useModalManager();
-  const isDefaultWl = useIsDefaultWhitelabel();
-  const isOpen = activeModal === 'addCardModal';
-  const [currentStep, setCurrentStep] = useState(1);
-  const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);
-  const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});
-
-  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;
-
-  const createCardMutation = useCreateCard();
-  const updateAccountMutation = useUpdateAccount();
-  const elements = useElements();
-  const stripe = useStripe();
-
-  const form = useForm<CardFormData>({
-    resolver: zodResolver(cardFormSchema),
-    mode: 'onSubmit',
-    reValidateMode: 'onChange',
-    defaultValues: {
-      country: 'BR',
-      personType: 'pf',
-    },
-  });
-
-  const handleClose = useCallback(() => {
-    form.reset();
-    setCurrentStep(1);
-    setStripeStatus(INITIAL_STRIPE_STATUS);
-    setStripeErrors({});
-    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 rhfValid = await form.trigger(['name', 'country', 'personType', 'cpf', 'cnpj']);
-
-    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) {
-      form.clearErrors(['fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);
-      setCurrentStep(2);
-    }
-  }, [form, stripeStatus]);
-
-  const handleBack = useCallback(() => {
-    setCurrentStep(1);
-  }, []);
-
-  async function handleSubmit(data: CardFormData) {
-    if (!stripe || !elements) return;
-
-    const cardElement = elements.getElement(CardNumberElement);
-    if (!cardElement) return;
-
-    const { error, paymentMethod } = await stripe.createPaymentMethod({
-      type: 'card',
-      card: cardElement,
-      billing_details: {
-        name: data.fullName,
-        address: {
-          country: data.country,
-          postal_code: data.cep,
-          line1: `${data.street}, ${data.streetNumber}`,
-          line2: data.complement || undefined,
-          city: data.city,
-          state: data.state,
-        },
-      },
-    });
-
-    if (error) {
-      toast.custom(
-        (t) => (
-          <Toast
-            variant="error"
-            message="Não foi possível adicionar o cartão na Stripe, tente novamente."
-            toastId={t}
-          />
-        ),
-        { duration: 5000 }
-      );
-      return;
-    }
-
-    try {
-      const [cardResult] = await Promise.all([
-        createCardMutation.mutateAsync({ payment_method_id: paymentMethod.id }),
-        updateAccountMutation.mutateAsync({
-          financial_document_type: data.personType === 'pf' ? 1 : 2,
-          financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,
-          financial_name: data.fullName,
-          zipcode: data.cep,
-          address: data.street,
-          address_number: data.streetNumber,
-          address_complement: data.complement || '',
-          neighborhood: data.neighborhood,
-          city: data.city,
-          state: data.state,
-        }),
-      ]);
-
-      if (cardResult.success && cardResult.data?.id != null) {
-        onCardAdded?.(cardResult.data.id.toString());
-      }
-
-      toast.custom(
-        (t) => <Toast variant="success" message="Cartão adicionado com sucesso." toastId={t} />,
-        { duration: 5000 }
-      );
-      handleClose();
-    } catch {
-      toast.custom(
-        (t) => (
-          <Toast
-            variant="error"
-            message="Não foi possível salvar o seu novo cartão, tente novamente."
-            toastId={t}
-          />
-        ),
-        { duration: 5000 }
-      );
-    }
-  }
-
-  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;
-
-  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-[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"
-      >
-        <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'}
-            </DialogTitle>
-            <Button
-              type="button"
-              variant="ghost"
-              className="size-8! p-0 absolute right-4"
-              onClick={handleClose}
-            >
-              <IconX size={18} />
-            </Button>
-          </div>
-        </DialogHeader>
-
-        {/* Progress bar */}
-        <div className="h-1 bg-zinc-100 w-full">
-          <div
-            className={`h-full transition-all duration-300 ease-in-out ${isDefaultWl ? 'bg-cyan-400' : 'bg-zinc-400'}`}
-            style={{ width: currentStep === 1 ? '50%' : '100%' }}
-          />
-        </div>
-
-        <form
-          onSubmit={form.handleSubmit(handleSubmit)}
-          className="flex flex-col flex-1 lg:flex-none"
-        >
-          <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 1 ? 'hidden' : ''}`}>
-            <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 ? (
-              <>
-                <Button variant="secondary" type="button" onClick={handleClose} className="h-10!">
-                  Cancelar
-                </Button>
-                <Button
-                  type="button"
-                  className="h-10!"
-                  onClick={handleContinue}
-                  disabled={!isStep1Valid}
-                >
-                  Continuar
-                </Button>
-              </>
-            ) : (
-              <>
-                <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>
-              </>
-            )}
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useCallback, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
+import { Button } from '../../ui/buttons/Button';
+import { Toast } from '../../ui/feedback/Toast';
+import { useModalManager } from '../../../store/useModalManager';
+import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
+import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
+import { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';
+import type { CardFormData, StripeElementsStatus } from './CardFormFields';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
+import { IconLoader2, IconX } from '@tabler/icons-react';
+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';
+
+const INITIAL_STRIPE_STATUS: StripeElementsStatus = {
+  cardNumber: false,
+  cardExpiry: false,
+  cardCvc: false,
+};
+
+export default function AddCardModal() {
+  const { activeModal, modalData, closeModal } = useModalManager();
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const isOpen = activeModal === 'addCardModal';
+  const [currentStep, setCurrentStep] = useState(1);
+  const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);
+  const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});
+
+  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;
+
+  const createCardMutation = useCreateCard();
+  const updateAccountMutation = useUpdateAccount();
+  const elements = useElements();
+  const stripe = useStripe();
+
+  const form = useForm<CardFormData>({
+    resolver: zodResolver(cardFormSchema),
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+    defaultValues: {
+      country: 'BR',
+      personType: 'pf',
+    },
+  });
+
+  const handleClose = useCallback(() => {
+    form.reset();
+    setCurrentStep(1);
+    setStripeStatus(INITIAL_STRIPE_STATUS);
+    setStripeErrors({});
+    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 rhfValid = await form.trigger(['name', 'country', 'personType', 'cpf', 'cnpj']);
+
+    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) {
+      form.clearErrors(['fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);
+      setCurrentStep(2);
+    }
+  }, [form, stripeStatus]);
+
+  const handleBack = useCallback(() => {
+    setCurrentStep(1);
+  }, []);
+
+  async function handleSubmit(data: CardFormData) {
+    if (!stripe || !elements) return;
+
+    const cardElement = elements.getElement(CardNumberElement);
+    if (!cardElement) return;
+
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      type: 'card',
+      card: cardElement,
+      billing_details: {
+        name: data.fullName,
+        address: {
+          country: data.country,
+          postal_code: data.cep,
+          line1: `${data.street}, ${data.streetNumber}`,
+          line2: data.complement || undefined,
+          city: data.city,
+          state: data.state,
+        },
+      },
+    });
+
+    if (error) {
+      toast.custom(
+        (t) => (
+          <Toast
+            variant="error"
+            message="Não foi possível adicionar o cartão na Stripe, tente novamente."
+            toastId={t}
+          />
+        ),
+        { duration: 5000 }
+      );
+      return;
+    }
+
+    try {
+      const [cardResult] = await Promise.all([
+        createCardMutation.mutateAsync({ payment_method_id: paymentMethod.id }),
+        updateAccountMutation.mutateAsync({
+          financial_document_type: data.personType === 'pf' ? 1 : 2,
+          financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,
+          financial_name: data.fullName,
+          zipcode: data.cep,
+          address: data.street,
+          address_number: data.streetNumber,
+          address_complement: data.complement || '',
+          neighborhood: data.neighborhood,
+          city: data.city,
+          state: data.state,
+        }),
+      ]);
+
+      if (cardResult.success && cardResult.data?.id != null) {
+        onCardAdded?.(cardResult.data.id.toString());
+      }
+
+      toast.custom(
+        (t) => <Toast variant="success" message="Cartão adicionado com sucesso." toastId={t} />,
+        { duration: 5000 }
+      );
+      handleClose();
+    } catch {
+      toast.custom(
+        (t) => (
+          <Toast
+            variant="error"
+            message="Não foi possível salvar o seu novo cartão, tente novamente."
+            toastId={t}
+          />
+        ),
+        { duration: 5000 }
+      );
+    }
+  }
+
+  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;
+
+  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-[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"
+      >
+        <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'}
+            </DialogTitle>
+            <Button
+              type="button"
+              variant="ghost"
+              className="size-8! p-0 absolute right-4"
+              onClick={handleClose}
+            >
+              <IconX size={18} />
+            </Button>
+          </div>
+        </DialogHeader>
+
+        {/* Progress bar */}
+        <div className="h-1 bg-zinc-100 w-full">
+          <div
+            className={`h-full transition-all duration-300 ease-in-out ${isDefaultWl ? 'bg-cyan-400' : 'bg-zinc-400'}`}
+            style={{ width: currentStep === 1 ? '50%' : '100%' }}
+          />
+        </div>
+
+        <form
+          onSubmit={form.handleSubmit(handleSubmit)}
+          className="flex flex-col flex-1 lg:flex-none"
+        >
+          <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 1 ? 'hidden' : ''}`}>
+            <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 ? (
+              <>
+                <Button variant="secondary" type="button" onClick={handleClose} className="h-10!">
+                  Cancelar
+                </Button>
+                <Button
+                  type="button"
+                  className="h-10!"
+                  onClick={handleContinue}
+                  disabled={!isStep1Valid}
+                >
+                  Continuar
+                </Button>
+              </>
+            ) : (
+              <>
+                <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>
+              </>
+            )}
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}