@greatapps/common 1.1.714 → 1.1.715

package/src/components/modals/HexaPromoModal.tsx

@@ -1,218 +0,0 @@
-'use client';
-
-import { toast } from 'sonner';
-import {
-  IconCheck,
-  IconCopy,
-  IconInfoCircle,
-  IconStar,
-  IconTicket,
-  IconX,
-} from '@tabler/icons-react';
-import { Dialog, DialogClose, DialogContent, DialogTitle } from '../ui/overlay/Dialog';
-import { Toast } from '../ui/feedback/Toast';
-import { Button } from '../ui/buttons/Button';
-import useCopyToClipboard from '../../hooks/copy-to-clipboard.hook';
-import { useModalManager } from '../../store/useModalManager';
-import { useWhitelabelUrls } from '../../providers/whitelabel.provider';
-import { cn } from '../../infra/utils/clsx';
-
-type ComboPeriod = 'monthly' | 'semiannual' | 'annual';
-
-interface HexaCombo {
-  coupon: string;
-  name: string;
-  features: string[];
-  highlighted: boolean;
-  period: ComboPeriod;
-}
-
-// Campanha "Rumo ao Hexa" — exclusiva da whitelabel 1 (público pt-br). O texto é fixo de
-// propósito: a modal precisa renderizar também no gapps, que não tem provider de next-intl.
-const COPY = {
-  title: 'Rumo ao Hexa!',
-  subtitlePrefix: 'Ofertas exclusivas até ',
-  subtitleDate: '24/06',
-  mostChosen: 'Mais escolhido',
-  couponLabel: 'Cupom',
-  choosePlan: 'Escolher plano',
-  couponCopied: 'Cupom copiado!',
-  close: 'Fechar',
-  footerPrefix: 'Válido para a ',
-  footerBold: 'primeira contratação',
-  footerSuffix: ' dos planos Essencial, Negócio ou Agência',
-};
-
-const COMBOS: HexaCombo[] = [
-  {
-    coupon: 'MENSAL10',
-    name: 'Combo convocação',
-    highlighted: false,
-    period: 'monthly',
-    features: ['10% OFF no plano mensal', 'Webinars exclusivos'],
-  },
-  {
-    coupon: 'SEMESTRAL10',
-    name: 'Combo Hexa',
-    highlighted: true,
-    period: 'semiannual',
-    features: ['10% OFF no plano semestral', '3 templates exclusivos', 'Webinars exclusivos'],
-  },
-  {
-    coupon: 'ANUAL10',
-    name: 'Combo escalação',
-    highlighted: false,
-    period: 'annual',
-    features: ['10% OFF no plano anual', '3 templates exclusivos'],
-  },
-];
-
-// Cores promocionais (verde/amarelo do Brasil) — específicas desta campanha, fora do design
-// system, por isso ficam hardcoded apenas aqui.
-const GRADIENT = 'linear-gradient(180deg, #08c44f 0%, #7bd237 46.6%, #ffe31b 100%)';
-
-export default function HexaPromoModal() {
-  const { activeModal, closeModal } = useModalManager();
-  const { accountsUrl } = useWhitelabelUrls();
-  const isOpen = activeModal === 'hexaPromoModal';
-
-  const goToPlans = (coupon: string, period: ComboPeriod) => {
-    closeModal();
-    const url = `${accountsUrl}/subscriptions?tab=plans&coupon=${encodeURIComponent(coupon)}&period=${encodeURIComponent(period)}`;
-    window.location.assign(url);
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={() => closeModal()}>
-      <DialogContent
-        showCloseButton={false}
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        className="border-0 bg-transparent p-0 shadow-none w-[calc(100%-32px)] sm:max-w-[940px] md:w-[924px] lg:w-[924px] max-h-[calc(100dvh-32px)] overflow-y-auto"
-      >
-        <DialogTitle className="sr-only">{COPY.title}</DialogTitle>
-
-        <div className="rounded-[12px] p-1" style={{ background: GRADIENT }}>
-          <div className="relative overflow-hidden rounded-[10px] bg-white p-8 shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)]">
-            {/* Arte decorativa (festão/bandeira) no canto superior direito */}
-            <img
-              src="/promo/hexa-confetti.png"
-              alt=""
-              aria-hidden
-              className="pointer-events-none absolute -top-10 right-0 w-[280px] rotate-[16deg] select-none"
-            />
-
-            <DialogClose className="absolute right-3 top-3 z-10 flex size-[34px] cursor-pointer items-center justify-center rounded-lg bg-white p-2 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-950 focus:outline-none">
-              <span className="sr-only">{COPY.close}</span>
-              <IconX className="size-[18px]" />
-            </DialogClose>
-
-            {/* Header: logo + bandeira */}
-            <div className="relative z-[1] flex w-fit items-center gap-[9px] rounded-lg bg-zinc-100 px-[9px] py-2">
-              <img src="/promo/hexa-logo.svg" alt="" aria-hidden className="size-6 select-none" />
-              <img src="/promo/hexa-flag.png" alt="" aria-hidden className="size-6 rounded select-none" />
-            </div>
-
-            {/* Título */}
-            <div className="relative z-[1] mt-4 flex flex-col gap-1">
-              <h2 className="font-['Outfit'] text-[32px] font-semibold leading-8 text-zinc-950">
-                {COPY.title}
-              </h2>
-              <p className="paragraph-medium-medium text-zinc-950">
-                {COPY.subtitlePrefix}
-                <span className="font-bold">{COPY.subtitleDate}</span>
-              </p>
-            </div>
-
-            {/* Cards */}
-            <div className="relative z-[1] mt-10 flex flex-col items-stretch gap-3 md:flex-row">
-              {COMBOS.map((combo) => (
-                <ComboCard key={combo.coupon} combo={combo} onChoose={() => goToPlans(combo.coupon, combo.period)} />
-              ))}
-            </div>
-
-            {/* Rodapé informativo */}
-            <div className="relative z-[1] mt-3 flex items-center justify-center gap-2.5 rounded-[10px] bg-zinc-100 p-3 text-center">
-              <IconInfoCircle className="size-4 shrink-0 text-zinc-950" />
-              <p className="paragraph-small-medium text-zinc-950">
-                {COPY.footerPrefix}
-                <span className="font-semibold">{COPY.footerBold}</span>
-                {COPY.footerSuffix}
-              </p>
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-interface ComboCardProps {
-  combo: HexaCombo;
-  onChoose: () => void;
-}
-
-function ComboCard({ combo, onChoose }: ComboCardProps) {
-  const { isCopied, copy } = useCopyToClipboard({
-    onSuccess: () => {
-      toast.custom((t) => <Toast variant="success" message={COPY.couponCopied} toastId={t} />);
-    },
-  });
-
-  return (
-    <div
-      className={cn(
-        'relative flex flex-1 flex-col rounded-[10px] border bg-white pb-3 md:w-[276px]',
-        combo.highlighted ? 'border-cyan-500' : 'border-zinc-200',
-      )}
-    >
-      {combo.highlighted && (
-        <div className="absolute left-1/2 top-0 z-[1] flex h-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-[5px] rounded-md border-4 border-white bg-cyan-100 px-2">
-          <IconStar className="size-3 text-cyan-600" />
-          <span className="paragraph-xsmall-semibold whitespace-nowrap text-cyan-600">
-            {COPY.mostChosen}
-          </span>
-          <IconStar className="size-3 text-cyan-600" />
-        </div>
-      )}
-
-      <h3 className="border-b border-zinc-200 px-4 py-4 text-center font-['Outfit'] text-base font-semibold text-zinc-950">
-        {combo.name}
-      </h3>
-
-      <ul className="flex flex-1 flex-col gap-5 px-5 pt-5">
-        {combo.features.map((feature) => (
-          <li key={feature} className="flex items-center gap-2.5">
-            <IconCheck className="size-5 shrink-0 text-cyan-500" />
-            <span className="paragraph-small-medium text-zinc-950">{feature}</span>
-          </li>
-        ))}
-      </ul>
-
-      <div className="mx-3 mt-5 flex items-center gap-3 rounded-lg bg-cyan-50 py-2 pl-3.5 pr-2.5">
-        <IconTicket className="size-5 shrink-0 text-cyan-600" />
-        <div className="flex min-w-0 flex-1 flex-col">
-          <span className="paragraph-xsmall-medium text-zinc-400">{COPY.couponLabel}</span>
-          <span className="paragraph-small-semibold text-zinc-950">{combo.coupon}</span>
-        </div>
-        <button
-          type="button"
-          aria-label={COPY.couponLabel}
-          onClick={() => copy(combo.coupon)}
-          className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-cyan-100 hover:text-zinc-950"
-        >
-          {isCopied ? <IconCheck className="size-[18px]" /> : <IconCopy className="size-[18px]" />}
-        </button>
-      </div>
-
-      <div className="mx-3 mt-3">
-        <Button
-          variant={combo.highlighted ? 'default' : 'secondary'}
-          className={cn('h-11! w-full', combo.highlighted && 'bg-cyan-500 text-white hover:bg-cyan-600')}
-          onClick={onChoose}
-        >
-          {COPY.choosePlan}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/modals/HexaPromoModalGate.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
-import { useAuth } from '../../providers/auth.provider';
-import { useWhitelabel } from '../../providers/whitelabel.provider';
-import { useModalManager } from '../../store/useModalManager';
-import {
-  getHexaPromoSeenDay,
-  getHexaPromoSince,
-  hexaPromoDayKey,
-  setHexaPromoSeenDay,
-  setHexaPromoSince,
-} from '../../utils/cookies/hexa-promo';
-
-/** Janela de tempo online antes de abrir a modal (3 minutos). */
-const ONLINE_DELAY_MS = 3 * 60 * 1000;
-
-/**
- * TESTE: quando `true`, a modal abre imediatamente ao carregar o app, ignorando
- * trial / whitelabel / timer de 3 min / cookies. Manter `false` em produção.
- */
-const FORCE_OPEN_FOR_TEST = false;
-
-/**
- * Dispara a modal "Rumo ao Hexa" quando um usuário em **trial** da **whitelabel 1** fica
- * 3 minutos online. A janela é cumulativa entre gapps e gpages (timestamp compartilhado em
- * cookie no domínio pai) e a modal abre **uma única vez** — reabrindo só no dia seguinte ou
- * após logout/login. Montar este componente uma vez no layout de cada app consumidor.
- */
-export default function HexaPromoModalGate() {
-  const { isAuthenticated } = useAuth();
-  const { whitelabel } = useWhitelabel();
-  const { activeModal, openModal, closeModal } = useModalManager();
-  const { data } = useActiveSubscription();
-
-  const subscription = data?.data?.[0] ?? null;
-  const eligible =
-    isAuthenticated && whitelabel?.id === 1 && subscription?.type === 'trial';
-
-  // Elegibilidade atual visível dentro do setTimeout (que captura o valor do agendamento).
-  const eligibleRef = useRef(eligible);
-  eligibleRef.current = eligible;
-
-  const forcedRef = useRef(false);
-
-  // Nunca deixa a modal aberta para usuário deslogado/inelegível: se ele abriu logado e
-  // depois deslogou (ou perdeu a elegibilidade), fecha.
-  useEffect(() => {
-    if (FORCE_OPEN_FOR_TEST) return;
-    if (!eligible && activeModal === 'hexaPromoModal') closeModal();
-  }, [eligible, activeModal, closeModal]);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    // TESTE: abre uma vez ao carregar, sem nenhuma condição.
-    if (FORCE_OPEN_FOR_TEST) {
-      if (forcedRef.current || activeModal) return;
-      forcedRef.current = true;
-      openModal('hexaPromoModal');
-      return;
-    }
-
-    if (!eligible) return;
-    // Outra modal aberta: não empilha em cima. Reavalia quando ela fechar (dep `activeModal`).
-    if (activeModal) return;
-
-    const todayKey = hexaPromoDayKey();
-    if (getHexaPromoSeenDay() === todayKey) return; // já exibida hoje/nesta sessão
-
-    // Início da janela compartilhado entre os apps; reinicia a cada novo dia.
-    let since = getHexaPromoSince();
-    if (!since || since.day !== todayKey) {
-      since = { day: todayKey, ms: Date.now() };
-      setHexaPromoSince(since.day, since.ms);
-    }
-
-    const remaining = Math.max(0, since.ms + ONLINE_DELAY_MS - Date.now());
-    const timer = setTimeout(() => {
-      // Revalida no disparo: o usuário pode ter deslogado durante a janela.
-      if (!eligibleRef.current) return;
-      // Recheca o cookie no disparo: se o outro app já abriu, não reabre aqui.
-      if (getHexaPromoSeenDay() === todayKey) return;
-      setHexaPromoSeenDay(todayKey);
-      openModal('hexaPromoModal');
-    }, remaining);
-
-    return () => clearTimeout(timer);
-  }, [eligible, activeModal, openModal]);
-
-  return null;
-}

package/src/store/useHexaPromoModal.ts

@@ -1,13 +0,0 @@
-import { useModalManager } from './useModalManager';
-
-const HEXA_PROMO_MODAL_KEY = 'hexaPromoModal';
-
-export const useHexaPromoModal = () => {
-  const { activeModal, openModal, closeModal } = useModalManager();
-
-  return {
-    open: activeModal === HEXA_PROMO_MODAL_KEY,
-    openModal: () => openModal(HEXA_PROMO_MODAL_KEY),
-    closeModal,
-  };
-};

package/src/utils/cookies/hexa-promo.ts

@@ -1,114 +0,0 @@
-/**
- * Estado do "Rumo ao Hexa" promo modal — persistido em **cookies no domínio registrável
- * pai** (ex.: `accounts.greatpages.dev.br` → `.greatpages.dev.br`) para serem compartilhados
- * entre os subdomínios dos apps (accounts/gapps ↔ pages/gpages). Assim a janela de "3 minutos
- * online" é cumulativa entre os apps e a modal abre **uma única vez** por sessão/dia,
- * independente de em qual app o usuário esteja.
- *
- * São dois cookies:
- * - `gpromo-hexa-since` = `<dia>|<timestampMs>` — início da janela de 3 min (gravado uma vez).
- * - `gpromo-hexa-seen`  = `<dia>` — dia em que a modal já foi exibida.
- *
- * `<dia>` é a data local `YYYY-MM-DD`: vira automaticamente no dia seguinte, fazendo a modal
- * reaparecer. No logout, ambos os cookies são limpos (ver `auth.provider`), então um novo
- * login também faz a modal reaparecer.
- *
- * Em localhost (sem subdomínio) caem em cookies host-scoped — equivalente ao localStorage;
- * cross-port não compartilha (limitação aceita no dev local).
- */
-
-const SINCE_COOKIE = 'gpromo-hexa-since';
-const SEEN_COOKIE = 'gpromo-hexa-seen';
-const MAX_AGE_SECONDS = 60 * 60 * 24 * 2; // 2 dias — folga sobre a janela de 1 dia.
-
-function parentCookieDomain(): string | undefined {
-  if (typeof window === 'undefined') return undefined;
-  const host = window.location.hostname;
-  if (!host || host === 'localhost') return undefined;
-  // IP literal → sem atributo Domain (cookie host-scoped)
-  if (/^\d+\.\d+\.\d+\.\d+$/.test(host)) return undefined;
-  const parts = host.split('.');
-  if (parts.length < 2) return undefined;
-  // Tira o subdomínio mais à esquerda — `accounts.greatpages.dev.br` → `.greatpages.dev.br`
-  return '.' + parts.slice(1).join('.');
-}
-
-function readCookie(name: string): string | null {
-  if (typeof document === 'undefined') return null;
-  const m = document.cookie.match(new RegExp(`(?:^|;\\s*)${name}=([^;]+)`));
-  if (!m) return null;
-  try {
-    return decodeURIComponent(m[1]);
-  } catch {
-    return null;
-  }
-}
-
-function writeCookie(name: string, value: string): void {
-  if (typeof document === 'undefined' || typeof window === 'undefined') return;
-  const domain = parentCookieDomain();
-  const parts = [
-    `${name}=${encodeURIComponent(value)}`,
-    'Path=/',
-    `Max-Age=${MAX_AGE_SECONDS}`,
-    'SameSite=Lax',
-    domain ? `Domain=${domain}` : '',
-    window.location.protocol === 'https:' ? 'Secure' : '',
-  ].filter(Boolean);
-  try {
-    document.cookie = parts.join('; ');
-  } catch {
-    // Se o navegador bloquear cookies, seguimos com a exibição única por sessão (timer no Gate).
-  }
-}
-
-function expireCookie(name: string): void {
-  if (typeof document === 'undefined' || typeof window === 'undefined') return;
-  const domain = parentCookieDomain();
-  const parts = [
-    `${name}=`,
-    'Path=/',
-    'Max-Age=0',
-    'SameSite=Lax',
-    domain ? `Domain=${domain}` : '',
-    window.location.protocol === 'https:' ? 'Secure' : '',
-  ].filter(Boolean);
-  try {
-    document.cookie = parts.join('; ');
-  } catch {
-    // noop
-  }
-}
-
-/** Chave do dia local (`YYYY-MM-DD`) usada para reabrir a modal a cada novo dia. */
-export function hexaPromoDayKey(): string {
-  const d = new Date();
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-}
-
-export function getHexaPromoSeenDay(): string | null {
-  return readCookie(SEEN_COOKIE);
-}
-
-export function setHexaPromoSeenDay(day: string): void {
-  writeCookie(SEEN_COOKIE, day);
-}
-
-export function getHexaPromoSince(): { day: string; ms: number } | null {
-  const raw = readCookie(SINCE_COOKIE);
-  if (!raw) return null;
-  const [day, msRaw] = raw.split('|');
-  const ms = Number(msRaw);
-  if (!day || !Number.isFinite(ms)) return null;
-  return { day, ms };
-}
-
-export function setHexaPromoSince(day: string, ms: number): void {
-  writeCookie(SINCE_COOKIE, `${day}|${ms}`);
-}
-
-/** Limpa o estado da promo (chamado no logout para reabrir a modal no próximo login). */
-export function clearHexaPromo(): void {
-  expireCookie(SINCE_COOKIE);
-  expireCookie(SEEN_COOKIE);
-}