@greatapps/common 1.1.698 → 1.1.700

package/src/components/modals/CreditsDisabledModal.tsx

@@ -1,62 +1,62 @@
-'use client';
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { Separator } from '../ui/data-display/Separator';
-import { IconAlertTriangle } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-import { useCreditsDisabledModal } from '../../store/useCreditsDisabledModal';
-
-export default function CreditsDisabledModal() {
-  const translate = useTranslations();
-  const { open, closeModal } = useCreditsDisabledModal();
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(nextOpen) => {
-        if (!nextOpen) closeModal();
-      }}
-    >
-      <DialogContent
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        className="flex flex-col p-0 gap-0 md:w-[410px]! lg:w-[410px]! max-w-[410px]! max-[410px]:w-[calc(100%-32px)] duration-0!"
-      >
-        <DialogHeader className="gap-3 text-left p-5">
-          <div className="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-lg">
-            <IconAlertTriangle size={20} className="text-gray-950" />
-          </div>
-          <div className="flex flex-col gap-2">
-            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-              {translate('common.credits.disabled.title')}
-            </DialogTitle>
-            <DialogDescription className="paragraph-small-regular text-zinc-600" asChild>
-              <div className="flex flex-col gap-3">
-                <p>{translate('common.credits.disabled.descriptionLine1')}</p>
-                <p>{translate('common.credits.disabled.descriptionLine2')}</p>
-              </div>
-            </DialogDescription>
-          </div>
-        </DialogHeader>
-
-        <Separator />
-
-        <div className="flex items-center gap-2 p-5">
-          <Button
-            variant="secondary"
-            className="h-10! transition-colors"
-            onClick={() => closeModal()}
-          >
-            {translate('common.credits.disabled.understood')}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { Separator } from '../ui/data-display/Separator';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useCreditsDisabledModal } from '../../store/useCreditsDisabledModal';
+
+export default function CreditsDisabledModal() {
+  const translate = useTranslations();
+  const { open, closeModal } = useCreditsDisabledModal();
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) closeModal();
+      }}
+    >
+      <DialogContent
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className="flex flex-col p-0 gap-0 md:w-[410px]! lg:w-[410px]! max-w-[410px]! max-[410px]:w-[calc(100%-32px)] duration-0!"
+      >
+        <DialogHeader className="gap-3 text-left p-5">
+          <div className="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-lg">
+            <IconAlertTriangle size={20} className="text-gray-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+              {translate('common.credits.disabled.title')}
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-zinc-600" asChild>
+              <div className="flex flex-col gap-3">
+                <p>{translate('common.credits.disabled.descriptionLine1')}</p>
+                <p>{translate('common.credits.disabled.descriptionLine2')}</p>
+              </div>
+            </DialogDescription>
+          </div>
+        </DialogHeader>
+
+        <Separator />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button
+            variant="secondary"
+            className="h-10! transition-colors"
+            onClick={() => closeModal()}
+          >
+            {translate('common.credits.disabled.understood')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/modals/HexaPromoModal.tsx

@@ -0,0 +1,212 @@
+'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';
+
+interface HexaCombo {
+  coupon: string;
+  name: string;
+  features: string[];
+  highlighted: boolean;
+}
+
+// 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,
+    features: ['10% OFF no plano mensal', 'Webinars exclusivos'],
+  },
+  {
+    coupon: 'SEMESTRAL10',
+    name: 'Combo Hexa',
+    highlighted: true,
+    features: ['10% OFF no plano semestral', '3 templates exclusivos', 'Webinars exclusivos'],
+  },
+  {
+    coupon: 'ANUAL10',
+    name: 'Combo escalação',
+    highlighted: false,
+    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) => {
+    closeModal();
+    const url = `${accountsUrl}/subscriptions?tab=plans&coupon=${encodeURIComponent(coupon)}`;
+    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]"
+      >
+        <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] select-none"
+            />
+
+            <DialogClose className="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-lg 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)} />
+              ))}
+            </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 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

@@ -0,0 +1,80 @@
+'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 } = useModalManager();
+  const { data } = useActiveSubscription();
+
+  const subscription = data?.data?.[0] ?? null;
+  const eligible =
+    isAuthenticated && whitelabel?.id === 1 && subscription?.type === 'trial';
+
+  const forcedRef = useRef(false);
+
+  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(() => {
+      // 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/components/modals/Modals.tsx

@@ -1,25 +1,25 @@
-'use client';
-
-import { ComponentType, useEffect } from 'react';
-import AccountModals from '../account/AccountModals';
-import { ModalManager } from './ModalManager';
-import { useAccountModals } from '../../store/useAccountModals';
-interface ModalsProps {
-  registry: Record<string, ComponentType>;
-  onGoToSubscription?: () => void;
-}
-
-export function Modals({ registry, onGoToSubscription }: ModalsProps) {
-  const { updateConfig } = useAccountModals();
-
-  useEffect(() => {
-    updateConfig({ onGoToSubscription });
-  }, [onGoToSubscription, updateConfig]);
-
-  return (
-    <>
-      <AccountModals />
-      <ModalManager registry={registry} />
-    </>
-  );
-}
+'use client';
+
+import { ComponentType, useEffect } from 'react';
+import AccountModals from '../account/AccountModals';
+import { ModalManager } from './ModalManager';
+import { useAccountModals } from '../../store/useAccountModals';
+interface ModalsProps {
+  registry: Record<string, ComponentType>;
+  onGoToSubscription?: () => void;
+}
+
+export function Modals({ registry, onGoToSubscription }: ModalsProps) {
+  const { updateConfig } = useAccountModals();
+
+  useEffect(() => {
+    updateConfig({ onGoToSubscription });
+  }, [onGoToSubscription, updateConfig]);
+
+  return (
+    <>
+      <AccountModals />
+      <ModalManager registry={registry} />
+    </>
+  );
+}

package/src/components/modals/PaidPlanRequiredModal.tsx

@@ -1,60 +1,60 @@
-"use client";
-
-import { IconLock } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-import { Button } from '../ui/buttons/Button';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from '../ui/overlay/Dialog';
-import { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';
-import { useModalManager } from '../../store/useModalManager';
-import type { ModalData } from '../../store/useModalManager';
-
-export default function PaidPlanRequiredModal() {
-    const translate = useTranslations();
-    const { activeModal, modalData, closeModal } = useModalManager();
-    const isOpen = activeModal === 'paidPlanRequiredModal';
-    const data = modalData as ModalData & { title?: string; description?: string };
-    const { accountsUrl } = useWhitelabelUrls();
-    const { redirectToExternal } = useExternalContracting();
-
-    const title = (data.title as string) ?? translate('common.credits.paidPlanRequired.defaultTitle');
-    const description = (data.description as string) ?? translate('common.credits.paidPlanRequired.defaultDescription');
-
-    const handleKnowPlans = () => {
-        if (redirectToExternal('plans')) return;
-        window.location.href = `${accountsUrl}/subscriptions?tab=plans`;
-    };
-
-    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}
-                    >
-                        {translate('common.credits.paidPlanRequired.knowPlans')}
-                    </Button>
-                </div>
-            </DialogContent>
-        </Dialog>
-    );
-}
+"use client";
+
+import { IconLock } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../ui/buttons/Button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '../ui/overlay/Dialog';
+import { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';
+import { useModalManager } from '../../store/useModalManager';
+import type { ModalData } from '../../store/useModalManager';
+
+export default function PaidPlanRequiredModal() {
+    const translate = useTranslations();
+    const { activeModal, modalData, closeModal } = useModalManager();
+    const isOpen = activeModal === 'paidPlanRequiredModal';
+    const data = modalData as ModalData & { title?: string; description?: string };
+    const { accountsUrl } = useWhitelabelUrls();
+    const { redirectToExternal } = useExternalContracting();
+
+    const title = (data.title as string) ?? translate('common.credits.paidPlanRequired.defaultTitle');
+    const description = (data.description as string) ?? translate('common.credits.paidPlanRequired.defaultDescription');
+
+    const handleKnowPlans = () => {
+        if (redirectToExternal('plans')) return;
+        window.location.href = `${accountsUrl}/subscriptions?tab=plans`;
+    };
+
+    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}
+                    >
+                        {translate('common.credits.paidPlanRequired.knowPlans')}
+                    </Button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}