@greatapps/common 1.1.790 → 1.1.792

package/src/components/account/sections/subscription/PendingChangeDialog.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Badge } from '../../../ui/data-display/Badge';
+import { Separator } from '../../../ui/data-display/Separator';
+import { Dialog, DialogContent, DialogTitle } from '../../../ui/overlay/Dialog';
+import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import {
+  getBillingPeriodLabel,
+  getPeriodicityLabel,
+  periodicityToBillingPeriod,
+} from '../../../../modules/subscriptions/utils/periodicity';
+import { useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';
+import { formatShortDate } from '../../../../infra/utils/date';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+
+/** Resumo da alteração de plano já agendada: o que passa a valer e a partir de quando. */
+export function PendingChangeDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations('common.account.workspace.subscription.pendingChange');
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+
+  const pendingChange = useSubscriptionFlows((state) => state.pendingChange);
+  const close = useSubscriptionFlows((state) => state.closePendingChange);
+
+  const newPlan = pendingChange?.new_plan;
+  const newItems = pendingChange?.new_items ?? [];
+  const newDiscounts = pendingChange?.new_discounts ?? [];
+
+  const planItem = newItems.find((item) => item.is_plan_base);
+  const addonItems = newItems.filter(
+    (item) => !item.is_plan_base && !item.is_ai_credit && item.value > 0
+  );
+  const aiItem = newItems.find((item) => item.is_ai_credit && item.value > 0);
+
+  const billingLabel = newPlan
+    ? getBillingPeriodLabel(periodicityToBillingPeriod(newPlan.periodicity) ?? 'monthly', translate)
+    : translate('common.periodicity.monthly');
+  const periodicityLabel = newPlan ? getPeriodicityLabel(newPlan.periodicity, translate) : '';
+  const effectDateLabel = pendingChange?.takes_effect_at_iso
+    ? formatShortDate(pendingChange.takes_effect_at_iso)
+    : '';
+
+  const periodicityDiscount = newDiscounts.find((discount) => discount.kind === 'periodicity');
+  const couponDiscount = newDiscounts.find(
+    (discount) => discount.kind && discount.kind !== 'periodicity'
+  );
+
+  return (
+    <Dialog open={!!pendingChange} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <DialogContent
+        showCloseButton={false}
+        className="flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-100! lg:max-w-105! rounded-lg border shadow-[0px_4px_6px_0px_rgba(26,26,26,0.1)]"
+      >
+        <div className="flex items-center justify-center px-4 py-3 h-14 md:h-16 relative border-b border-zinc-200">
+          <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+            {translateDialog('title')}
+          </DialogTitle>
+          <button
+            type="button"
+            onClick={close}
+            aria-label={translate('common.actions.close')}
+            className="absolute right-3 md:right-4 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>
+        </div>
+
+        <div className="flex flex-col gap-5 p-4 lg:p-5">
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center gap-2">
+              <span className="paragraph-medium-semibold text-zinc-950">
+                {translate('common.account.workspace.subscription.planCard.planName', {
+                  name: newPlan?.name ?? '',
+                })}
+              </span>
+              <Badge className="text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold">
+                {periodicityLabel}
+              </Badge>
+            </div>
+            <span className="paragraph-small-regular text-zinc-500">
+              {translateDialog('startsOn', { date: effectDateLabel })}
+            </span>
+          </div>
+
+          <Separator className="bg-zinc-200" />
+
+          <div className="flex flex-col gap-4">
+            {planItem && (
+              <div className="flex items-center justify-between">
+                <span className="paragraph-small-medium text-zinc-500">
+                  {translate('common.account.workspace.subscription.planCard.planName', {
+                    name: planItem.addon_name ?? '',
+                  })}
+                </span>
+                <span className="paragraph-small-semibold text-zinc-500">
+                  {formatCurrencyNumber(planItem.value)}
+                </span>
+              </div>
+            )}
+
+            {addonItems.map((item, index) => (
+              <div key={`${item.addon_name ?? 'addon'}-${index}`} className="flex items-center justify-between">
+                <span className="paragraph-small-medium text-zinc-500">
+                  {item.quantity > 1
+                    ? translateDialog('addonExtras', {
+                        qty: String(item.quantity),
+                        name: (item.addon_name ?? '').toLowerCase(),
+                      })
+                    : item.addon_name}
+                </span>
+                <span className="paragraph-small-semibold text-zinc-500">
+                  {formatCurrencyNumber(item.value)}
+                </span>
+              </div>
+            ))}
+
+            {isDefaultWhitelabel && aiItem && (
+              <div className="flex items-center justify-between">
+                <span className="paragraph-small-medium text-zinc-500">
+                  {translateDialog('aiCredits', { qty: aiItem.quantity.toLocaleString('pt-BR') })}
+                </span>
+                <span className="paragraph-small-semibold text-zinc-500">
+                  {formatCurrencyNumber(aiItem.value)}
+                </span>
+              </div>
+            )}
+
+            {periodicityDiscount?.percent_off ? (
+              <div className="flex items-center justify-between">
+                <span className="paragraph-small-medium text-green-600">
+                  {translateDialog('periodicityDiscount')}
+                </span>
+                <span className="paragraph-small-semibold text-green-600">
+                  -{periodicityDiscount.percent_off}%
+                </span>
+              </div>
+            ) : null}
+
+            {couponDiscount?.percent_off ? (
+              <div className="flex items-center justify-between">
+                <span className="paragraph-small-medium text-green-600">
+                  {couponDiscount.name ?? translateDialog('couponDiscount')}
+                </span>
+                <span className="paragraph-small-semibold text-green-600">
+                  -{couponDiscount.percent_off}%
+                </span>
+              </div>
+            ) : null}
+
+            <Separator className="bg-zinc-200" />
+
+            <div className="flex items-center justify-between">
+              <span className="paragraph-small-medium text-zinc-500">
+                {translateDialog('billing', { period: billingLabel })}
+              </span>
+              <span className="paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950">
+                {formatCurrencyNumber(newPlan?.value ?? 0)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/sections/subscription/PixDetailsDialog.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { IconCalendar, IconCopy, IconCoin, IconQrcode } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../../ui/buttons/Button';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Toast } from '../../../ui/feedback/Toast';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';
+import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { useRefreshChargePix } from '../../../../modules/charges/hooks/refresh-pix.hook';
+import type { Charge } from '../../../../modules/charges/types/charge.type';
+import type { PixRefreshData } from '../../../../modules/charges/types/refresh-pix.type';
+import useCountdownTimer from '../../../../hooks/useCountdownTimer';
+import { copyToClipboard } from '../../../../utils/browser/clipboard';
+import { qrCodeToDataUrl } from '../../../../utils/qrcode/to-data-url';
+
+type PixDetailsDialogProps = {
+  open: boolean;
+  charge: Charge | null | undefined;
+  onOpenChange: (open: boolean) => void;
+};
+
+function formatCountdown(seconds: number): string {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remaining = seconds % 60;
+  const mm = String(minutes).padStart(2, '0');
+  const ss = String(remaining).padStart(2, '0');
+
+  return hours > 0 ? `${String(hours).padStart(2, '0')}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+
+function isSameDay(a: Date, b: Date) {
+  return (
+    a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+  );
+}
+
+/** QR code e copia-e-cola do PIX de uma cobrança em aberto, regenerando quando o código expirou. */
+export function PixDetailsDialog({ open, charge, onOpenChange }: PixDetailsDialogProps) {
+  const translate = useTranslations('common.account.workspace.subscription.pixDetails');
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+
+  const paymentDetails = charge?.payment_details as Record<string, unknown> | null | undefined;
+  const staleQrCode = paymentDetails?.qr_code as string | null | undefined;
+  const staleExpiresAt = paymentDetails?.expires_at as string | null | undefined;
+  // Flags do backend: `expired` = QR vencido; `refreshable` = pode regenerar. Regenera quando é
+  // refreshable e não há QR utilizável (vencido, ou mandato pendente que nunca teve QR próprio).
+  const isExpired = Boolean(paymentDetails?.expired);
+  const isRefreshable = Boolean(paymentDetails?.refreshable);
+  const needsRefresh = isRefreshable && (isExpired || !staleQrCode);
+
+  const [refreshedPix, setRefreshedPix] = useState<PixRefreshData | null>(null);
+  const [mountedAt, setMountedAt] = useState<number | null>(null);
+  const [generatedQrImage, setGeneratedQrImage] = useState<string | null>(null);
+  const refreshPix = useRefreshChargePix();
+
+  useEffect(() => {
+    if (!open) {
+      setRefreshedPix(null);
+      refreshPix.reset();
+      return;
+    }
+
+    setMountedAt(Date.now());
+    if (needsRefresh && charge?.id) {
+      refreshPix.mutate(String(charge.id), {
+        onSuccess: (result) => {
+          if (result.pix) setRefreshedPix(result.pix);
+        },
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  // Se regenerou, usa o novo; se está expirado e regenerável, esconde o vencido (shimmer até vir o
+  // novo); senão usa o da listagem.
+  const qrCode = refreshedPix?.qr_code ?? (needsRefresh ? null : staleQrCode);
+  const expiresAtRaw = refreshedPix?.expires_at ?? (needsRefresh ? null : staleExpiresAt);
+  const isRefreshing = needsRefresh && refreshPix.isPending;
+  const refreshNotice = refreshPix.data && !refreshPix.data.pix ? refreshPix.data.message : null;
+
+  const expiresInSeconds =
+    expiresAtRaw && mountedAt
+      ? Math.max(0, Math.floor((new Date(expiresAtRaw).getTime() - mountedAt) / 1000))
+      : null;
+  const shouldShowCountdown = typeof expiresInSeconds === 'number' && expiresInSeconds > 0;
+  const { seconds } = useCountdownTimer({ initialSeconds: shouldShowCountdown ? expiresInSeconds : 1 });
+
+  useEffect(() => {
+    if (!qrCode) {
+      setGeneratedQrImage(null);
+      return;
+    }
+
+    let cancelled = false;
+    qrCodeToDataUrl(qrCode, {
+      width: 396,
+      margin: 1,
+      errorCorrectionLevel: 'M',
+      color: { dark: '#171412', light: '#FFFFFF' },
+    })
+      .then((dataUrl) => {
+        if (!cancelled) setGeneratedQrImage(dataUrl);
+      })
+      .catch(() => {
+        if (!cancelled) setGeneratedQrImage(null);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [qrCode]);
+
+  const handleCopyCode = async () => {
+    if (!qrCode) return;
+    await copyToClipboard(qrCode);
+    toast.custom((toastId) => (
+      <Toast variant="success" message={translate('copiedToast')} toastId={toastId} />
+    ));
+  };
+
+  if (!charge) return null;
+
+  const dueDateLabel = (() => {
+    if (!expiresAtRaw || !mountedAt) {
+      if (!charge.date_due) return '—';
+      return new Date(charge.date_due).toLocaleDateString('pt-BR', { timeZone: 'UTC' });
+    }
+
+    const expiresAt = new Date(expiresAtRaw);
+    const today = new Date(mountedAt);
+    const tomorrow = new Date(mountedAt);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+
+    if (isSameDay(expiresAt, today)) return translate('dueDateToday');
+    if (isSameDay(expiresAt, tomorrow)) return translate('dueDateTomorrow');
+    return expiresAt.toLocaleDateString('pt-BR');
+  })();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex flex-col p-0 gap-0 w-full sm:max-w-130 lg:max-w-130 max-h-[90vh] overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
+        <DialogHeader className="gap-3 text-left p-5 border-b border-zinc-200">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center justify-center size-10 bg-zinc-50 rounded-lg shrink-0">
+              <IconQrcode size={20} className="text-zinc-950" />
+            </div>
+            <div className="flex flex-col gap-0.5">
+              <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+                {translate('title')}
+              </DialogTitle>
+              <span className="paragraph-xsmall-medium text-zinc-500">{translate('subtitle')}</span>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-5 p-5">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-3">
+              <div className="size-10 bg-zinc-50 rounded-lg flex items-center justify-center shrink-0">
+                <IconCalendar size={20} className="text-zinc-950" />
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="paragraph-xsmall-medium text-zinc-500">{translate('dueDate')}</span>
+                <span className="paragraph-small-semibold text-zinc-950">{dueDateLabel}</span>
+              </div>
+            </div>
+
+            <div className="h-10 w-px bg-zinc-200" />
+
+            <div className="flex items-center gap-3">
+              <div className="size-10 bg-zinc-50 rounded-lg flex items-center justify-center shrink-0">
+                <IconCoin size={20} className="text-zinc-950" />
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="paragraph-xsmall-medium text-zinc-500">{translate('value')}</span>
+                <span className="paragraph-small-semibold text-zinc-950">
+                  {formatCurrencyNumber(charge.value)}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-6 p-5 border border-zinc-200 rounded-lg bg-white items-center">
+            {shouldShowCountdown && (
+              <p className="paragraph-small-semibold text-zinc-950 text-center">
+                {translate('payIn')} <span className="text-red-600">{formatCountdown(seconds)}</span>
+              </p>
+            )}
+
+            {isRefreshing ? (
+              <div className="flex flex-col items-center gap-3">
+                <Skeleton className="size-[198px] rounded-lg shrink-0" />
+                <p className="paragraph-small-regular text-zinc-500 text-center">
+                  {translate('generating')}
+                </p>
+              </div>
+            ) : generatedQrImage ? (
+              <div className="size-[198px] border border-zinc-200 rounded-lg overflow-hidden bg-white shrink-0 p-3">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={generatedQrImage}
+                  alt={translate('qrCodeAlt')}
+                  className="size-full object-contain"
+                />
+              </div>
+            ) : (
+              <div className="size-[198px] border border-dashed border-zinc-300 rounded-lg bg-zinc-50 shrink-0 flex items-center justify-center p-6 text-center">
+                <p className="paragraph-small-regular text-zinc-500">
+                  {refreshPix.isError
+                    ? refreshPix.error?.message || translate('refreshError')
+                    : (refreshNotice ?? translate('qrCodeUnavailable'))}
+                </p>
+              </div>
+            )}
+
+            {qrCode && (
+              <>
+                <div className="flex items-center w-full">
+                  <div className="flex-1 h-px bg-zinc-200" />
+                  <span className="px-2 paragraph-xsmall-medium text-zinc-500 whitespace-nowrap">
+                    {translate('orCopyCode')}
+                  </span>
+                  <div className="flex-1 h-px bg-zinc-200" />
+                </div>
+
+                <div className="flex flex-col items-center gap-4 w-full">
+                  <p className="paragraph-small-medium text-zinc-950 text-center break-all w-full">
+                    {qrCode}
+                  </p>
+                  <Button variant="secondary" onClick={handleCopyCode} className="h-10 gap-1.5">
+                    <IconCopy size={20} />
+                    {translate('copyCode')}
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/sections/subscription/PixPaymentDialog.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { IconAlertTriangle, IconCircleCheck, IconCopy, IconQrcode } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../../ui/buttons/Button';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Toast } from '../../../ui/feedback/Toast';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';
+import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { usePendingPixStatus } from '../../../../modules/subscriptions/hooks/pending-pix-status.hook';
+import useCountdownTimer from '../../../../hooks/useCountdownTimer';
+import { copyToClipboard } from '../../../../utils/browser/clipboard';
+import { qrCodeToDataUrl } from '../../../../utils/qrcode/to-data-url';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+import { cn } from '../../../../infra/utils/clsx';
+
+function formatCountdown(seconds: number): string {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remaining = seconds % 60;
+  const mm = String(minutes).padStart(2, '0');
+  const ss = String(remaining).padStart(2, '0');
+
+  return hours > 0 ? `${String(hours).padStart(2, '0')}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+
+/**
+ * QR code do pix gerado na troca de plano ou reativação. Fica em polling até o backend confirmar
+ * o pagamento — no gapps esse passo era uma página de checkout à parte.
+ */
+export function PixPaymentDialog() {
+  const translate = useTranslations('common.account.workspace.subscription.pixPayment');
+  const translateActions = useTranslations();
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+
+  const pixPayment = useSubscriptionFlows((state) => state.pixPayment);
+  const close = useSubscriptionFlows((state) => state.closePixPayment);
+  const openPlansCatalog = useSubscriptionFlows((state) => state.openPlansCatalog);
+
+  const [mountedAt, setMountedAt] = useState<number | null>(null);
+  const [generatedQrImage, setGeneratedQrImage] = useState<string | null>(null);
+
+  const { data: statusData } = usePendingPixStatus(pixPayment?.correlationId);
+  const phase = statusData?.data?.phase;
+
+  useEffect(() => {
+    if (!pixPayment) {
+      setMountedAt(null);
+      return;
+    }
+    setMountedAt(Date.now());
+  }, [pixPayment]);
+
+  useEffect(() => {
+    const qrCode = pixPayment?.qrCode;
+    if (!qrCode) {
+      setGeneratedQrImage(null);
+      return;
+    }
+
+    let cancelled = false;
+    qrCodeToDataUrl(qrCode, {
+      width: 396,
+      margin: 1,
+      errorCorrectionLevel: 'M',
+      color: { dark: '#171412', light: '#FFFFFF' },
+    })
+      .then((dataUrl) => {
+        if (!cancelled) setGeneratedQrImage(dataUrl);
+      })
+      .catch(() => {
+        if (!cancelled) setGeneratedQrImage(null);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [pixPayment?.qrCode]);
+
+  const isPaid = phase === 'completed';
+  const isRejected = phase === 'rejected';
+  const isExpired = phase === 'expired';
+
+  // Pago avisa uma vez; a janela fica com a confirmação na tela, como a página do gapps fazia.
+  const paidNotifiedRef = useRef(false);
+  useEffect(() => {
+    if (!isPaid || paidNotifiedRef.current) return;
+    paidNotifiedRef.current = true;
+    toast.custom((toastId) => (
+      <Toast variant="success" message={translate('paidToast')} toastId={toastId} />
+    ));
+  }, [isPaid, translate]);
+
+  useEffect(() => {
+    if (!pixPayment) paidNotifiedRef.current = false;
+  }, [pixPayment]);
+
+  const handleGenerateAnother = () => {
+    close();
+    openPlansCatalog();
+  };
+
+  const expiresInSeconds =
+    pixPayment?.expiresAt && mountedAt
+      ? Math.max(0, Math.floor((new Date(pixPayment.expiresAt).getTime() - mountedAt) / 1000))
+      : null;
+  const shouldShowCountdown = typeof expiresInSeconds === 'number' && expiresInSeconds > 0;
+  const { seconds } = useCountdownTimer({ initialSeconds: shouldShowCountdown ? expiresInSeconds : 1 });
+
+  const handleCopyCode = async () => {
+    if (!pixPayment?.qrCode) return;
+    await copyToClipboard(pixPayment.qrCode);
+    toast.custom((toastId) => (
+      <Toast variant="success" message={translate('copiedToast')} toastId={toastId} />
+    ));
+  };
+
+  const payNowLabel =
+    pixPayment?.payNowCents != null && pixPayment.payNowCents > 0
+      ? formatCurrencyNumber(pixPayment.payNowCents / 100)
+      : null;
+
+  return (
+    <Dialog open={!!pixPayment} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <DialogContent className="flex flex-col p-0 gap-0 w-full sm:max-w-130 lg:max-w-130 max-h-[90vh] overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
+        <DialogHeader className="gap-3 text-left p-5 border-b border-zinc-200">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center justify-center size-10 bg-zinc-50 rounded-lg shrink-0">
+              <IconQrcode size={20} className="text-zinc-950" />
+            </div>
+            <div className="flex flex-col gap-0.5">
+              <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+                {translate('title')}
+              </DialogTitle>
+              <span className="paragraph-xsmall-medium text-zinc-500">{translate('subtitle')}</span>
+            </div>
+          </div>
+        </DialogHeader>
+
+        {/* Fechado o ciclo (pago, recusado ou expirado), o QR perde a função: a janela vira o
+            desfecho, como a página de pix do gapps. */}
+        {isPaid || isRejected || isExpired ? (
+          <div className="flex flex-col items-center justify-center gap-4 p-8 text-center">
+            <div
+              className={cn(
+                'size-12 rounded-full flex items-center justify-center',
+                isPaid ? 'bg-green-50' : 'bg-red-50'
+              )}
+            >
+              {isPaid ? (
+                <IconCircleCheck size={24} className="text-green-500" />
+              ) : (
+                <IconAlertTriangle size={24} className="text-red-500" />
+              )}
+            </div>
+
+            <div className="flex flex-col gap-1">
+              <span className="paragraph-xlarge-semibold text-zinc-950">
+                {isPaid
+                  ? translate('paidTitle')
+                  : isRejected
+                    ? translate('rejectedTitle')
+                    : translate('expiredTitle')}
+              </span>
+              <span className="paragraph-small-regular text-zinc-500">
+                {isPaid ? translate('paidToast') : translate('rejectedOrExpiredDescription')}
+              </span>
+            </div>
+
+            {isPaid ? (
+              <Button variant="secondary" className="h-10" onClick={close}>
+                {translateActions('common.actions.close')}
+              </Button>
+            ) : (
+              <Button variant="secondary" className="h-10" onClick={handleGenerateAnother}>
+                {translate('generateAnother')}
+              </Button>
+            )}
+          </div>
+        ) : (
+        <div className="flex flex-col gap-5 p-5">
+          {payNowLabel && (
+            <div className="flex items-center justify-between">
+              <span className="paragraph-small-medium text-zinc-500">{translate('payNowLabel')}</span>
+              <span className="paragraph-medium-semibold text-zinc-950">{payNowLabel}</span>
+            </div>
+          )}
+
+          <div className="flex flex-col gap-6 p-5 border border-zinc-200 rounded-lg bg-white items-center">
+            {shouldShowCountdown && (
+              <p className="paragraph-small-semibold text-zinc-950 text-center">
+                {translate('payIn')} <span className="text-red-600">{formatCountdown(seconds)}</span>
+              </p>
+            )}
+
+            {generatedQrImage ? (
+              <div className="size-[198px] border border-zinc-200 rounded-lg overflow-hidden bg-white shrink-0 p-3">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={generatedQrImage}
+                  alt={translate('qrCodeAlt')}
+                  className="size-full object-contain"
+                />
+              </div>
+            ) : (
+              <Skeleton className="size-[198px] rounded-lg shrink-0" />
+            )}
+
+            {pixPayment?.qrCode && (
+              <>
+                <div className="flex items-center w-full">
+                  <div className="flex-1 h-px bg-zinc-200" />
+                  <span className="px-2 paragraph-xsmall-medium text-zinc-500 whitespace-nowrap">
+                    {translate('orCopyCode')}
+                  </span>
+                  <div className="flex-1 h-px bg-zinc-200" />
+                </div>
+
+                <div className="flex flex-col items-center gap-4 w-full">
+                  <p className="paragraph-small-medium text-zinc-950 text-center break-all w-full">
+                    {pixPayment.qrCode}
+                  </p>
+                  <Button variant="secondary" onClick={handleCopyCode} className="h-10 gap-1.5">
+                    <IconCopy size={20} />
+                    {translate('copyCode')}
+                  </Button>
+                </div>
+              </>
+            )}
+
+            <p className="paragraph-xsmall-medium text-zinc-500 text-center">
+              {translate('waitingPayment')}
+            </p>
+          </div>
+        </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}