@greatapps/common 1.1.515 → 1.1.517

package/src/components/modals/BuyCreditsModal.tsx

@@ -1,354 +1,354 @@
-'use client';
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { Separator } from '../ui/data-display/Separator';
-import { Toast } from '../ui/feedback/Toast';
-import { SelectField } from '../ui/form/SelectField';
-import { Skeleton } from '../ui/feedback/Skeleton';
-import { PaymentInfoCard } from '../ui/data-display/PaymentInfoCard';
-import { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';
-import {
-  AI_CREDIT_OPTIONS,
-  AI_CREDIT_VALUES,
-} from '../../modules/subscriptions/constants/addons.constants';
-import { useBuyCreditsModal } from '../../store/useBuyCreditsModal';
-import { useModalManager } from '../../store/useModalManager';
-import { useCards } from '../../modules/cards/hooks/cards.hook';
-import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
-import { useCalculateSubscription } from '../../modules/subscriptions/hooks/calculate-subscription.hook';
-import { useUpdateSubscriptionPlan } from '../../modules/subscriptions/hooks/update-subscription-plan.hook';
-import { getPriceFromCalculatedData } from '../../modules/subscriptions/utils/periodicity';
-import { useIsDefaultWhitelabel } from '../../providers/whitelabel.provider';
-import { IconInfoCircle, IconX, IconLoader2 } from '@tabler/icons-react';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import z from 'zod';
-import { toast } from 'sonner';
-
-const buyCreditSchema = z.object({
-  creditOption: z.number().refine((val) => AI_CREDIT_VALUES.has(val), {
-    message: 'Selecione uma opção de créditos',
-  }),
-  selectedCardId: z.string().min(1, 'Selecione um cartão'),
-});
-
-type BuyCreditFormData = z.infer<typeof buyCreditSchema>;
-
-export default function BuyCreditsModal() {
-  const { open, closeModal } = useBuyCreditsModal();
-  const { openModal } = useModalManager();
-  const isDefaultWl = useIsDefaultWhitelabel();
-  const { data: cardsData } = useCards();
-  const { data: subscriptionData } = useActiveSubscription();
-  const subscription = subscriptionData?.data?.[0] ?? null;
-  const defaultCardId =
-    cardsData?.data?.find((card) => card.is_default)?.id?.toString() ??
-    cardsData?.data?.[0]?.id?.toString() ??
-    '';
-
-  const {
-    mutate: calculate,
-    isPending: isCalculatePending,
-    data: calculateData,
-  } = useCalculateSubscription();
-  const updatePlanMutation = useUpdateSubscriptionPlan();
-
-  const aiItem = useMemo(
-    () => subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AI),
-    [subscription]
-  );
-
-  const currentCredits = aiItem?.quantity ?? 0;
-  const subscriptionId = subscription?.id;
-  const planId = subscription?.id_plan;
-
-  const form = useForm<BuyCreditFormData>({
-    resolver: zodResolver(buyCreditSchema),
-    mode: 'onChange',
-    defaultValues: {
-      creditOption: currentCredits,
-      selectedCardId: defaultCardId,
-    },
-  });
-
-  const hasInitialized = useRef(false);
-
-  useEffect(() => {
-    if (!open) {
-      hasInitialized.current = false;
-      return;
-    }
-
-    if (hasInitialized.current || !subscription) return;
-    hasInitialized.current = true;
-
-    form.reset({
-      creditOption: currentCredits,
-      selectedCardId: defaultCardId,
-    });
-
-    calculate({
-      id_product: 1,
-      ...(planId != null && { id_plan: planId }),
-      ...(subscriptionId != null && { id_subscription: subscriptionId }),
-      plan_extras: [
-        { id_addon: ADDON_IDS.AI, quantity: currentCredits },
-      ],
-    });
-  }, [
-    open,
-    subscription,
-    currentCredits,
-    defaultCardId,
-    form,
-    calculate,
-    planId,
-    subscriptionId,
-  ]);
-
-  // Sync selectedCardId when cards load after modal opened
-  useEffect(() => {
-    if (open && defaultCardId && !form.getValues('selectedCardId')) {
-      form.setValue('selectedCardId', defaultCardId, { shouldValidate: true });
-    }
-  }, [open, defaultCardId, form]);
-
-  const creditOption = form.watch('creditOption');
-  const selectedCardId = form.watch('selectedCardId');
-  const { isDirty, isSubmitting, isValid } = form.formState;
-
-
-  const handleCreditOptionChange = useCallback(
-    (value: string | number | boolean) => {
-      const credits = Number(value);
-
-      form.setValue('creditOption', credits, {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
-
-      const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === credits);
-      if (!option) return;
-
-      calculate({
-        id_product: 1,
-        ...(planId != null && { id_plan: planId }),
-        ...(subscriptionId != null && { id_subscription: subscriptionId }),
-        plan_extras: [
-          { id_addon: ADDON_IDS.AI, quantity: option.credits, currency: 'BRL' },
-        ],
-      });
-    },
-    [form, subscriptionId, planId, calculate]
-  );
-
-  const calculatedData = calculateData?.data ?? null;
-
-  const isIncreasingCredits = creditOption > currentCredits;
-  const hasChanged = creditOption !== currentCredits;
-
-  const immediateChargeTotal = calculatedData?.target?.immediate_charge?.total ?? null;
-
-  const totalPrice = useMemo(() => {
-    if (!calculatedData) return null;
-    return getPriceFromCalculatedData(calculatedData, subscription?.periodicity);
-  }, [calculatedData, subscription]);
-
-  const formatPrice = useCallback((price: number) => {
-    return price.toLocaleString('pt-BR', {
-      style: 'currency',
-      currency: 'BRL',
-    });
-  }, []);
-
-  const isConfirmDisabled = !isDirty || !isValid || isCalculatePending || isSubmitting;
-
-  const handleClose = useCallback(() => {
-    form.reset();
-    closeModal();
-  }, [form, closeModal]);
-
-  const handleOpenAddCardModal = useCallback(() => {
-    openModal('addCardModal');
-  }, [openModal]);
-
-  const selectOptions = useMemo(() => {
-    return AI_CREDIT_OPTIONS.map((opt) => ({
-      value: opt.credits,
-      label: (
-        <div className="flex items-center justify-between gap-2 w-full">
-          <span className="paragraph-small-medium text-zinc-950 flex-1">
-            {opt.credits.toLocaleString('pt-BR')} créditos de IA
-          </span>
-          <span className="paragraph-small-medium text-zinc-500 opacity-70">{opt.priceLabel}</span>
-        </div>
-      ),
-      displayValue: `${opt.credits.toLocaleString('pt-BR')} créditos de IA`,
-    }));
-  }, []);
-
-  const onSubmit = useCallback(
-    async (data: BuyCreditFormData) => {
-      if (!subscriptionId) return;
-
-      const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === data.creditOption);
-      if (!option) return;
-
-      await updatePlanMutation.mutateAsync({
-        subscriptionId,
-        data: {
-          plan_extras: [
-            {
-              id_addon: ADDON_IDS.AI,
-              quantity: option.credits,
-            },
-          ],
-        },
-      });
-
-      toast.custom((t) => (
-        <Toast
-          variant="success"
-          message={`Créditos de IA alterados para ${data.creditOption.toLocaleString('pt-BR')}`}
-          toastId={t}
-        />
-      ));
-      form.reset();
-      closeModal();
-    },
-    [subscriptionId, updatePlanMutation, form, closeModal]
-  );
-
-  const renderPriceDisplay = useCallback(() => {
-    if (isCalculatePending) {
-      return <Skeleton className="h-7 w-24" />;
-    }
-    if (totalPrice !== null) {
-      return (
-        <span className="paragraph-xlarge-semibold text-zinc-950">
-          {totalPrice === 0 ? 'Incluso' : formatPrice(totalPrice)}
-        </span>
-      );
-    }
-    return <span className="paragraph-xlarge-semibold text-zinc-400">--</span>;
-  }, [isCalculatePending, totalPrice, formatPrice]);
-
-  return (
-    <Dialog open={open} 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-[433px] 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-hidden lg:overflow-y-auto"
-      >
-        <DialogHeader className="px-4 py-3 border-b border-zinc-200 shrink-0 relative">
-          <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
-            Comprar créditos de IA
-          </DialogTitle>
-          <button
-            type="button"
-            onClick={handleClose}
-            className="absolute right-3 top-1/2 -translate-y-1/2 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors"
-          >
-            <IconX size={18} className="text-zinc-400" />
-          </button>
-        </DialogHeader>
-
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="flex flex-col flex-1 lg:flex-none overflow-hidden"
-        >
-          <div className="flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none overflow-y-auto">
-            <div className="flex flex-col gap-4">
-              <SelectField
-                options={selectOptions}
-                value={creditOption}
-                onChange={handleCreditOptionChange}
-                className="h-12!"
-              />
-
-              <PaymentInfoCard
-                selectedCardId={selectedCardId}
-                onCardSelect={(cardId) =>
-                  form.setValue('selectedCardId', cardId, { shouldValidate: true })
-                }
-                onOpenAddCard={handleOpenAddCardModal}
-              />
-
-              {hasChanged && (
-                <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>
-                  <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
-                  <span className="paragraph-small-regular text-zinc-950">
-                    {isIncreasingCredits
-                      ? 'O pagamento será processado no momento da confirmação.'
-                      : 'As alterações entrarão em vigor a partir da sua próxima fatura.'}
-                  </span>
-                </div>
-              )}
-            </div>
-
-            <Separator className="bg-zinc-200 hidden lg:block" />
-
-            <div className="hidden lg:flex flex-col gap-2">
-              {immediateChargeTotal !== null && immediateChargeTotal > 0 && (
-                <div className="flex items-center justify-between">
-                  <span className="paragraph-xsmall-medium text-zinc-500">Cobrança imediata</span>
-                  {isCalculatePending ? (
-                    <Skeleton className="h-5 w-20" />
-                  ) : (
-                    <span className="paragraph-small-semibold text-zinc-950">
-                      {formatPrice(immediateChargeTotal)}
-                    </span>
-                  )}
-                </div>
-              )}
-              <div className="flex items-center justify-between">
-                <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
-                {renderPriceDisplay()}
-              </div>
-            </div>
-
-            <Button
-              type="submit"
-              disabled={isConfirmDisabled}
-              className="w-full hidden lg:inline-flex"
-            >
-              {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
-              Confirmar e pagar
-            </Button>
-          </div>
-
-          <div className="flex flex-col gap-4 p-4 border-t border-zinc-200 shrink-0 lg:hidden">
-            <div className="flex flex-col gap-2">
-              {immediateChargeTotal !== null && immediateChargeTotal > 0 && (
-                <div className="flex items-center justify-between">
-                  <span className="paragraph-xsmall-medium text-zinc-500">Cobrança imediata</span>
-                  {isCalculatePending ? (
-                    <Skeleton className="h-5 w-20" />
-                  ) : (
-                    <span className="paragraph-small-semibold text-zinc-950">
-                      {formatPrice(immediateChargeTotal)}
-                    </span>
-                  )}
-                </div>
-              )}
-              <div className="flex items-center justify-between">
-                <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
-                {renderPriceDisplay()}
-              </div>
-            </div>
-            <Button type="submit" disabled={isConfirmDisabled} className="w-full">
-              {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
-              Confirmar e pagar
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { Separator } from '../ui/data-display/Separator';
+import { Toast } from '../ui/feedback/Toast';
+import { SelectField } from '../ui/form/SelectField';
+import { Skeleton } from '../ui/feedback/Skeleton';
+import { PaymentInfoCard } from '../ui/data-display/PaymentInfoCard';
+import { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';
+import {
+  AI_CREDIT_OPTIONS,
+  AI_CREDIT_VALUES,
+} from '../../modules/subscriptions/constants/addons.constants';
+import { useBuyCreditsModal } from '../../store/useBuyCreditsModal';
+import { useModalManager } from '../../store/useModalManager';
+import { useCards } from '../../modules/cards/hooks/cards.hook';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+import { useCalculateSubscription } from '../../modules/subscriptions/hooks/calculate-subscription.hook';
+import { useUpdateSubscriptionPlan } from '../../modules/subscriptions/hooks/update-subscription-plan.hook';
+import { getPriceFromCalculatedData } from '../../modules/subscriptions/utils/periodicity';
+import { useIsDefaultWhitelabel } from '../../providers/whitelabel.provider';
+import { IconInfoCircle, IconX, IconLoader2 } from '@tabler/icons-react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import z from 'zod';
+import { toast } from 'sonner';
+
+const buyCreditSchema = z.object({
+  creditOption: z.number().refine((val) => AI_CREDIT_VALUES.has(val), {
+    message: 'Selecione uma opção de créditos',
+  }),
+  selectedCardId: z.string().min(1, 'Selecione um cartão'),
+});
+
+type BuyCreditFormData = z.infer<typeof buyCreditSchema>;
+
+export default function BuyCreditsModal() {
+  const { open, closeModal } = useBuyCreditsModal();
+  const { openModal } = useModalManager();
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const { data: cardsData } = useCards();
+  const { data: subscriptionData } = useActiveSubscription();
+  const subscription = subscriptionData?.data?.[0] ?? null;
+  const defaultCardId =
+    cardsData?.data?.find((card) => card.is_default)?.id?.toString() ??
+    cardsData?.data?.[0]?.id?.toString() ??
+    '';
+
+  const {
+    mutate: calculate,
+    isPending: isCalculatePending,
+    data: calculateData,
+  } = useCalculateSubscription();
+  const updatePlanMutation = useUpdateSubscriptionPlan();
+
+  const aiItem = useMemo(
+    () => subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AI),
+    [subscription]
+  );
+
+  const currentCredits = aiItem?.quantity ?? 0;
+  const subscriptionId = subscription?.id;
+  const planId = subscription?.id_plan;
+
+  const form = useForm<BuyCreditFormData>({
+    resolver: zodResolver(buyCreditSchema),
+    mode: 'onChange',
+    defaultValues: {
+      creditOption: currentCredits,
+      selectedCardId: defaultCardId,
+    },
+  });
+
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    if (!open) {
+      hasInitialized.current = false;
+      return;
+    }
+
+    if (hasInitialized.current || !subscription) return;
+    hasInitialized.current = true;
+
+    form.reset({
+      creditOption: currentCredits,
+      selectedCardId: defaultCardId,
+    });
+
+    calculate({
+      id_product: 1,
+      ...(planId != null && { id_plan: planId }),
+      ...(subscriptionId != null && { id_subscription: subscriptionId }),
+      plan_extras: [
+        { id_addon: ADDON_IDS.AI, quantity: currentCredits },
+      ],
+    });
+  }, [
+    open,
+    subscription,
+    currentCredits,
+    defaultCardId,
+    form,
+    calculate,
+    planId,
+    subscriptionId,
+  ]);
+
+  // Sync selectedCardId when cards load after modal opened
+  useEffect(() => {
+    if (open && defaultCardId && !form.getValues('selectedCardId')) {
+      form.setValue('selectedCardId', defaultCardId, { shouldValidate: true });
+    }
+  }, [open, defaultCardId, form]);
+
+  const creditOption = form.watch('creditOption');
+  const selectedCardId = form.watch('selectedCardId');
+  const { isDirty, isSubmitting, isValid } = form.formState;
+
+
+  const handleCreditOptionChange = useCallback(
+    (value: string | number | boolean) => {
+      const credits = Number(value);
+
+      form.setValue('creditOption', credits, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+
+      const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === credits);
+      if (!option) return;
+
+      calculate({
+        id_product: 1,
+        ...(planId != null && { id_plan: planId }),
+        ...(subscriptionId != null && { id_subscription: subscriptionId }),
+        plan_extras: [
+          { id_addon: ADDON_IDS.AI, quantity: option.credits, currency: 'BRL' },
+        ],
+      });
+    },
+    [form, subscriptionId, planId, calculate]
+  );
+
+  const calculatedData = calculateData?.data ?? null;
+
+  const isIncreasingCredits = creditOption > currentCredits;
+  const hasChanged = creditOption !== currentCredits;
+
+  const immediateChargeTotal = calculatedData?.target?.immediate_charge?.total ?? null;
+
+  const totalPrice = useMemo(() => {
+    if (!calculatedData) return null;
+    return getPriceFromCalculatedData(calculatedData, subscription?.periodicity);
+  }, [calculatedData, subscription]);
+
+  const formatPrice = useCallback((price: number) => {
+    return price.toLocaleString('pt-BR', {
+      style: 'currency',
+      currency: 'BRL',
+    });
+  }, []);
+
+  const isConfirmDisabled = !isDirty || !isValid || isCalculatePending || isSubmitting;
+
+  const handleClose = useCallback(() => {
+    form.reset();
+    closeModal();
+  }, [form, closeModal]);
+
+  const handleOpenAddCardModal = useCallback(() => {
+    openModal('addCardModal');
+  }, [openModal]);
+
+  const selectOptions = useMemo(() => {
+    return AI_CREDIT_OPTIONS.map((opt) => ({
+      value: opt.credits,
+      label: (
+        <div className="flex items-center justify-between gap-2 w-full">
+          <span className="paragraph-small-medium text-zinc-950 flex-1">
+            {opt.credits.toLocaleString('pt-BR')} créditos de IA
+          </span>
+          <span className="paragraph-small-medium text-zinc-500 opacity-70">{opt.priceLabel}</span>
+        </div>
+      ),
+      displayValue: `${opt.credits.toLocaleString('pt-BR')} créditos de IA`,
+    }));
+  }, []);
+
+  const onSubmit = useCallback(
+    async (data: BuyCreditFormData) => {
+      if (!subscriptionId) return;
+
+      const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === data.creditOption);
+      if (!option) return;
+
+      await updatePlanMutation.mutateAsync({
+        subscriptionId,
+        data: {
+          plan_extras: [
+            {
+              id_addon: ADDON_IDS.AI,
+              quantity: option.credits,
+            },
+          ],
+        },
+      });
+
+      toast.custom((t) => (
+        <Toast
+          variant="success"
+          message={`Créditos de IA alterados para ${data.creditOption.toLocaleString('pt-BR')}`}
+          toastId={t}
+        />
+      ));
+      form.reset();
+      closeModal();
+    },
+    [subscriptionId, updatePlanMutation, form, closeModal]
+  );
+
+  const renderPriceDisplay = useCallback(() => {
+    if (isCalculatePending) {
+      return <Skeleton className="h-7 w-24" />;
+    }
+    if (totalPrice !== null) {
+      return (
+        <span className="paragraph-xlarge-semibold text-zinc-950">
+          {totalPrice === 0 ? 'Incluso' : formatPrice(totalPrice)}
+        </span>
+      );
+    }
+    return <span className="paragraph-xlarge-semibold text-zinc-400">--</span>;
+  }, [isCalculatePending, totalPrice, formatPrice]);
+
+  return (
+    <Dialog open={open} 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-[433px] 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-hidden lg:overflow-y-auto"
+      >
+        <DialogHeader className="px-4 py-3 border-b border-zinc-200 shrink-0 relative">
+          <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
+            Comprar créditos de IA
+          </DialogTitle>
+          <button
+            type="button"
+            onClick={handleClose}
+            className="absolute right-3 top-1/2 -translate-y-1/2 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors"
+          >
+            <IconX size={18} className="text-zinc-400" />
+          </button>
+        </DialogHeader>
+
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="flex flex-col flex-1 lg:flex-none overflow-hidden"
+        >
+          <div className="flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none overflow-y-auto">
+            <div className="flex flex-col gap-4">
+              <SelectField
+                options={selectOptions}
+                value={creditOption}
+                onChange={handleCreditOptionChange}
+                className="h-12!"
+              />
+
+              <PaymentInfoCard
+                selectedCardId={selectedCardId}
+                onCardSelect={(cardId) =>
+                  form.setValue('selectedCardId', cardId, { shouldValidate: true })
+                }
+                onOpenAddCard={handleOpenAddCardModal}
+              />
+
+              {hasChanged && (
+                <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>
+                  <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
+                  <span className="paragraph-small-regular text-zinc-950">
+                    {isIncreasingCredits
+                      ? 'O pagamento será processado no momento da confirmação.'
+                      : 'As alterações entrarão em vigor a partir da sua próxima fatura.'}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            <Separator className="bg-zinc-200 hidden lg:block" />
+
+            <div className="hidden lg:flex flex-col gap-2">
+              {immediateChargeTotal !== null && immediateChargeTotal > 0 && (
+                <div className="flex items-center justify-between">
+                  <span className="paragraph-xsmall-medium text-zinc-500">Cobrança imediata</span>
+                  {isCalculatePending ? (
+                    <Skeleton className="h-5 w-20" />
+                  ) : (
+                    <span className="paragraph-small-semibold text-zinc-950">
+                      {formatPrice(immediateChargeTotal)}
+                    </span>
+                  )}
+                </div>
+              )}
+              <div className="flex items-center justify-between">
+                <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
+                {renderPriceDisplay()}
+              </div>
+            </div>
+
+            <Button
+              type="submit"
+              disabled={isConfirmDisabled}
+              className="w-full hidden lg:inline-flex"
+            >
+              {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
+              Confirmar e pagar
+            </Button>
+          </div>
+
+          <div className="flex flex-col gap-4 p-4 border-t border-zinc-200 shrink-0 lg:hidden">
+            <div className="flex flex-col gap-2">
+              {immediateChargeTotal !== null && immediateChargeTotal > 0 && (
+                <div className="flex items-center justify-between">
+                  <span className="paragraph-xsmall-medium text-zinc-500">Cobrança imediata</span>
+                  {isCalculatePending ? (
+                    <Skeleton className="h-5 w-20" />
+                  ) : (
+                    <span className="paragraph-small-semibold text-zinc-950">
+                      {formatPrice(immediateChargeTotal)}
+                    </span>
+                  )}
+                </div>
+              )}
+              <div className="flex items-center justify-between">
+                <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
+                {renderPriceDisplay()}
+              </div>
+            </div>
+            <Button type="submit" disabled={isConfirmDisabled} className="w-full">
+              {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
+              Confirmar e pagar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}