@greatapps/common 1.1.789 → 1.1.791

package/src/components/account/sections/subscription/downgrade/CannotDowngradeDialog.tsx

@@ -0,0 +1,297 @@
+'use client';
+
+import { Fragment, useEffect } from 'react';
+import { IconCheck, IconLoader, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../../ui/buttons/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from '../../../../ui/overlay/Dialog';
+import { useCountDomains } from '../../../../../modules/domains/hooks/count-domains.hook';
+import { useCountPublishedPages } from '../../../../../modules/pages/hooks/count-published-pages.hook';
+import { useWhitelabelUrls } from '../../../../../providers/whitelabel.provider';
+import { cn } from '../../../../../infra/utils/clsx';
+import { useSubscriptionFlows } from '../../../../../store/useSubscriptionFlows';
+
+/**
+ * Estado de cada etapa do roteiro sequencial:
+ * done = check verde · active = spinner girando + botão liberado ·
+ * locked = spinner parado + botão desabilitado, à espera das etapas anteriores.
+ */
+type StepStatus = 'done' | 'active' | 'locked';
+
+type DowngradeStep = {
+  key: string;
+  title: string;
+  subtitle: string;
+  action: string;
+  status: StepStatus;
+  /** Presente apenas na etapa ativa. */
+  onAction?: () => void;
+};
+
+/** Roteiro do que a conta precisa ajustar antes de caber no plano mais barato. */
+export function CannotDowngradeDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations(
+    'common.account.workspace.subscription.cannotDowngrade'
+  );
+  const { pagesUrl } = useWhitelabelUrls();
+
+  const data = useSubscriptionFlows((state) => state.cannotDowngrade);
+  const close = useSubscriptionFlows((state) => state.closeCannotDowngrade);
+  const updateCannotDowngrade = useSubscriptionFlows((state) => state.updateCannotDowngrade);
+  const openChangePlan = useSubscriptionFlows((state) => state.openChangePlan);
+
+  const open = !!data;
+  const planName = data?.planName ?? '';
+  const planIncludedDomains = data?.planIncludedDomains ?? 0;
+  const planIncludedPages = data?.planIncludedPages ?? null;
+
+  // Recursos com etapa na tela — persistidos no payload, para a etapa não sumir ao ser
+  // resolvida nem quando um excedente só é descoberto com o roteiro já aberto.
+  const tracksDomains = data?.domainsExceeded ?? false;
+  const tracksPages = data?.pagesExceeded ?? false;
+
+  // Contagens ao vivo: o ajuste acontece fora daqui, então precisam ser reconferidas.
+  const { data: registeredDomains, refetch: refetchDomains } = useCountDomains({ enabled: open });
+  const { data: publishedPagesCount, refetch: refetchPages } = useCountPublishedPages({
+    enabled: open,
+  });
+
+  const currentDomains = registeredDomains ?? data?.registeredDomains ?? 0;
+  const publishedPages = publishedPagesCount ?? 0;
+
+  // Volta do app de páginas: reconfere as duas contagens — tanto para destravar etapas já
+  // resolvidas quanto para revelar limites que só estouram depois de um ajuste.
+  useEffect(() => {
+    if (!open) return;
+
+    const recount = () => {
+      if (document.visibilityState !== 'visible') return;
+      refetchDomains();
+      refetchPages();
+    };
+
+    window.addEventListener('focus', recount);
+    document.addEventListener('visibilitychange', recount);
+
+    return () => {
+      window.removeEventListener('focus', recount);
+      document.removeEventListener('visibilitychange', recount);
+    };
+  }, [open, refetchDomains, refetchPages]);
+
+  // Vale o incluso no plano alvo — no downgrade não há a válvula dos domínios extras pagos.
+  const domainsOverLimit = currentDomains > planIncludedDomains;
+  const rawPagesOverLimit = planIncludedPages != null && publishedPages > planIncludedPages;
+  // Páginas só são avaliadas com os domínios dentro do limite: antes disso a conta ainda
+  // contém as páginas dos domínios que serão apagados, e o excedente seria falso positivo.
+  const pagesOverLimit = !domainsOverLimit && rawPagesOverLimit;
+  const excessDomains = Math.max(0, currentDomains - planIncludedDomains);
+  const excessPages = planIncludedPages != null ? Math.max(0, publishedPages - planIncludedPages) : 0;
+  const readyToFinish = !domainsOverLimit && !pagesOverLimit;
+
+  // Excedente descoberto ao vivo vira etapa do roteiro: o latch mora no payload do fluxo, não
+  // em estado local — uma vez na tela a etapa fica, e ao ser resolvida vira check.
+  useEffect(() => {
+    if (!open) return;
+
+    const promote = {
+      ...(domainsOverLimit && !tracksDomains ? { domainsExceeded: true } : {}),
+      ...(pagesOverLimit && !tracksPages ? { pagesExceeded: true } : {}),
+    };
+    if (Object.keys(promote).length > 0) updateCannotDowngrade(promote);
+  }, [open, domainsOverLimit, pagesOverLimit, tracksDomains, tracksPages, updateCannotDowngrade]);
+
+  // Abre em outra aba de propósito: o roteiro continua aqui esperando o ajuste terminar.
+  const openInPagesApp = (path: string) => {
+    const base = pagesUrl.replace(/\/$/, '');
+    if (!base) return;
+    window.open(`${base}${path}`, '_blank', 'noopener,noreferrer');
+  };
+
+  // Conta ajustada: segue para a troca, que mostra o que se perde e depois o pagamento.
+  const handleFinish = () => {
+    if (!data) return;
+
+    openChangePlan({
+      targetPlan: data.targetPlan,
+      billingPeriod: data.billingPeriod,
+      isDowngrade: true,
+      selectedCreditIndex: 0,
+    });
+  };
+
+  // Uma frase por recurso ainda excedido + a instrução final, num único parágrafo. Resolvido
+  // tudo, o aviso vermelho passaria a se contradizer — vira confirmação.
+  const alert = readyToFinish
+    ? translateDialog('alertReady', { planName })
+    : [
+        ...(domainsOverLimit
+          ? [
+              planIncludedDomains > 0
+                ? translateDialog('alertDomains', {
+                    planName,
+                    registeredDomains: currentDomains,
+                    planIncludedDomains,
+                  })
+                : translateDialog('alertDomainsNone', {
+                    planName,
+                    registeredDomains: currentDomains,
+                  }),
+            ]
+          : []),
+        ...(pagesOverLimit
+          ? [
+              translateDialog('alertPages', {
+                planName,
+                publishedPages,
+                planIncludedPages: planIncludedPages ?? 0,
+              }),
+            ]
+          : []),
+        translateDialog('alertReviewSteps'),
+      ].join(' ');
+
+  // Com os dois recursos estourados o título genérico repetiria — aí nomeia cada um.
+  const bothTracked = tracksDomains && tracksPages;
+
+  // Stepper sequencial: a primeira etapa pendente é a ativa; concluir uma libera a seguinte.
+  // Uma etapa resolvida DEPOIS da ativa fica travada mesmo assim — sua resolução só é
+  // confiável quando chega a vez dela (ex.: páginas antes dos domínios).
+  const stepOrder = [
+    ...(tracksDomains ? [{ key: 'domains' as const, resolved: !domainsOverLimit }] : []),
+    ...(tracksPages ? [{ key: 'pages' as const, resolved: !rawPagesOverLimit }] : []),
+    { key: 'confirm' as const, resolved: false },
+  ];
+  // Sempre existe: a confirmação nunca se resolve sozinha.
+  const activeIndex = stepOrder.findIndex((step) => !step.resolved);
+
+  const steps: DowngradeStep[] = stepOrder.map((step, index) => {
+    const status: StepStatus =
+      index === activeIndex ? 'active' : index < activeIndex ? 'done' : 'locked';
+
+    if (step.key === 'domains') {
+      return {
+        key: step.key,
+        title: bothTracked ? translateDialog('stepDomainsTitle') : translateDialog('stepReviewTitle'),
+        subtitle:
+          status === 'done'
+            ? translateDialog('stepDomainsDone')
+            : translateDialog('stepDomainsSubtitle', { count: excessDomains }),
+        action: translateDialog('stepDomainsAction', { count: excessDomains }),
+        status,
+        onAction: status === 'active' ? () => openInPagesApp('/domains') : undefined,
+      };
+    }
+
+    if (step.key === 'pages') {
+      return {
+        key: step.key,
+        title: bothTracked ? translateDialog('stepPagesTitle') : translateDialog('stepReviewTitle'),
+        subtitle:
+          status === 'done'
+            ? translateDialog('stepPagesDone')
+            : translateDialog('stepPagesSubtitle', { limit: planIncludedPages ?? 0 }),
+        action: translateDialog('stepPagesAction', { count: excessPages }),
+        status,
+        onAction: status === 'active' ? () => openInPagesApp('') : undefined,
+      };
+    }
+
+    return {
+      key: step.key,
+      title: translateDialog('stepConfirmTitle'),
+      subtitle: translateDialog('stepConfirmSubtitle'),
+      action: translateDialog('stepConfirmAction'),
+      status,
+      onAction: status === 'active' && readyToFinish ? handleFinish : undefined,
+    };
+  });
+
+  return (
+    <Dialog open={open} 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-135! lg:max-w-150! rounded-lg border"
+      >
+        <div className="relative flex h-14 md:h-16 items-center justify-center px-4 py-3">
+          <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
+            {translateDialog('heading', { planName })}
+          </DialogTitle>
+          <button
+            type="button"
+            onClick={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 focus:outline-none"
+          >
+            <IconX size={18} className="text-zinc-400" />
+            <span className="sr-only">{translate('common.actions.close')}</span>
+          </button>
+        </div>
+
+        <div className="flex flex-col gap-3 px-4 pb-4 lg:px-6 lg:pb-6">
+          <div className={cn('rounded-lg p-4', readyToFinish ? 'bg-green-50' : 'bg-red-50')}>
+            <DialogDescription className="paragraph-small-regular text-zinc-950">
+              {alert}
+            </DialogDescription>
+          </div>
+
+          <div className="flex flex-col gap-5 rounded-xl border border-zinc-200 p-4 lg:p-5">
+            {steps.map((step, index) => (
+              <Fragment key={step.key}>
+                {index > 0 && <div className="h-px bg-zinc-200 ml-14" />}
+
+                <div className="flex items-start gap-4">
+                  {/* Centralizado no bloco de texto (44px), não na linha inteira. */}
+                  <span
+                    className={cn(
+                      'mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-full',
+                      step.status === 'done' ? 'bg-green-50' : 'bg-zinc-50'
+                    )}
+                  >
+                    {step.status === 'done' ? (
+                      <IconCheck size={20} className="text-green-600" />
+                    ) : step.status === 'active' ? (
+                      /* Só a etapa ativa gira — mesmo ritmo do spinner de propagação de domínio. */
+                      <IconLoader
+                        size={20}
+                        className="animate-spin text-zinc-950"
+                        style={{ animationDuration: '10s' }}
+                      />
+                    ) : (
+                      /* Travada: parada e apagada, esperando as etapas anteriores. */
+                      <IconLoader size={20} className="text-zinc-400" />
+                    )}
+                  </span>
+
+                  <div className="flex flex-1 flex-col gap-3 min-w-0">
+                    <div className="flex flex-col gap-1">
+                      <span className="paragraph-small-semibold text-zinc-950">{step.title}</span>
+                      <span className="paragraph-small-regular text-zinc-500">{step.subtitle}</span>
+                    </div>
+
+                    {step.status !== 'done' && (
+                      <Button
+                        type="button"
+                        variant={step.key === 'confirm' ? 'default' : 'secondary'}
+                        className="h-8 w-fit px-3"
+                        disabled={!step.onAction}
+                        onClick={step.onAction}
+                      >
+                        {step.action}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/sections/subscription/downgrade/DowngradeReasonDialog.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../../ui/buttons/Button';
+import { RadioGroup, RadioGroupItem } from '../../../../ui/form/RadioGroup';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from '../../../../ui/overlay/Dialog';
+import { useCountPublishedPages } from '../../../../../modules/pages/hooks/count-published-pages.hook';
+import {
+  DOWNGRADE_REASONS,
+  DOWNGRADE_REASON_OTHER,
+  getDowngradeReasonLabels,
+} from '../../../../../modules/subscriptions/constants/downgrade.constants';
+import { useWhitelabel } from '../../../../../providers/whitelabel.provider';
+import { cn } from '../../../../../infra/utils/clsx';
+import { useSubscriptionFlows } from '../../../../../store/useSubscriptionFlows';
+
+/** Primeiro passo do downgrade: por que a conta está descendo de plano. */
+export function DowngradeReasonDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations(
+    'common.account.workspace.subscription.changePlan.downgradeReason'
+  );
+  const { whitelabel } = useWhitelabel();
+
+  const data = useSubscriptionFlows((state) => state.downgradeReason);
+  const close = useSubscriptionFlows((state) => state.closeDowngradeReason);
+  const openCannotDowngrade = useSubscriptionFlows((state) => state.openCannotDowngrade);
+  const openChangePlan = useSubscriptionFlows((state) => state.openChangePlan);
+
+  const reasonLabels = getDowngradeReasonLabels(translate);
+
+  const [selectedReason, setSelectedReason] = useState('');
+  const [reasonText, setReasonText] = useState('');
+
+  // `isPending` trava o continuar até a contagem chegar: sem ela o check de páginas passaria batido.
+  const { data: publishedPagesCount, isPending: isPagesPending } = useCountPublishedPages({
+    enabled: !!data,
+  });
+
+  const canContinue =
+    !!selectedReason && (selectedReason !== DOWNGRADE_REASON_OTHER || !!reasonText.trim());
+
+  const handleClose = () => {
+    setSelectedReason('');
+    setReasonText('');
+    close();
+  };
+
+  const handleContinue = () => {
+    if (!data) return;
+
+    const publishedPages = publishedPagesCount ?? 0;
+    // No downgrade vale o incluso no plano — sem a válvula dos domínios extras pagos
+    // (ex.: Agência com 14 domínios → Negócio, que inclui 3, exige apagar 11).
+    const domainsExceeded = data.registeredDomains > data.planIncludedDomains;
+    // Com domínios a apagar, as páginas deles ainda inflam a contagem: o excedente real só
+    // aparece depois do ajuste, e o roteiro o detecta ao vivo naquele momento.
+    const pagesExceeded =
+      !domainsExceeded && data.planIncludedPages != null && publishedPages > data.planIncludedPages;
+
+    if (domainsExceeded || pagesExceeded) {
+      openCannotDowngrade({ ...data, domainsExceeded, pagesExceeded });
+      return;
+    }
+
+    handleClose();
+    openChangePlan({
+      targetPlan: data.targetPlan,
+      billingPeriod: data.billingPeriod,
+      isDowngrade: true,
+      selectedCreditIndex: 0,
+    });
+  };
+
+  return (
+    <Dialog open={!!data} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>
+      <DialogContent 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-117.5 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 [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
+        <div className="flex flex-col gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
+          <div className="flex flex-col gap-1">
+            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+              {translateDialog('title')}
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-zinc-500">
+              {translateDialog('subtitle', { wlName: whitelabel?.name ?? '' })}
+            </DialogDescription>
+          </div>
+
+          <RadioGroup value={selectedReason} onValueChange={setSelectedReason}>
+            <div className="flex flex-col border border-zinc-200 rounded-lg overflow-hidden">
+              {DOWNGRADE_REASONS.map((reason, index) => (
+                <label
+                  key={reason}
+                  htmlFor={`downgrade-reason-${reason}`}
+                  className={cn(
+                    'flex items-center justify-between px-4 py-3.5 lg:px-5 lg:py-6 cursor-pointer hover:bg-zinc-50 transition-colors',
+                    index < DOWNGRADE_REASONS.length - 1 && 'border-b border-zinc-200',
+                    selectedReason === reason && 'bg-zinc-50'
+                  )}
+                >
+                  <span className="paragraph-small-medium text-zinc-600">
+                    {reasonLabels[reason]}
+                  </span>
+                  <RadioGroupItem
+                    value={reason}
+                    id={`downgrade-reason-${reason}`}
+                    className={cn(
+                      'size-[18px] border-[1.5px] shrink-0',
+                      selectedReason === reason && 'border-zinc-950'
+                    )}
+                  />
+                </label>
+              ))}
+            </div>
+          </RadioGroup>
+
+          {selectedReason === DOWNGRADE_REASON_OTHER && (
+            <div className="flex flex-col gap-2">
+              <label htmlFor="downgrade-reason-text" className="paragraph-small-medium text-zinc-950">
+                {translateDialog('reasonLabel')}{' '}
+                <span className="text-red-500">{translateDialog('reasonRequired')}</span>
+              </label>
+              <textarea
+                id="downgrade-reason-text"
+                className="w-full min-h-25 p-3 border border-zinc-200 rounded-lg resize-none paragraph-small-regular text-zinc-950 placeholder:text-zinc-400 focus:outline-none hover:border-zinc-400 focus:border-zinc-950 transition-colors"
+                placeholder={translateDialog('reasonPlaceholder')}
+                value={reasonText}
+                onChange={(event) => setReasonText(event.target.value)}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-zinc-200 flex flex-row items-center gap-2 px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
+          <Button
+            className="h-10 w-fit"
+            onClick={handleContinue}
+            disabled={!canContinue || isPagesPending}
+          >
+            {translateDialog('continueWithDowngrade')}
+          </Button>
+          <Button variant="secondary" className="h-10 w-fit" onClick={handleClose}>
+            {translate('common.actions.cancel')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}