@greatapps/common 1.1.700 → 1.1.702

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

@@ -1,212 +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>
-  );
-}
+'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] 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-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>
+  );
+}