@greatapps/common 1.1.704 → 1.1.705
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -80,7 +80,7 @@ function HexaPromoModal() {
|
|
|
80
80
|
className: "pointer-events-none absolute -top-10 right-0 w-[280px] rotate-[16deg] select-none"
|
|
81
81
|
}
|
|
82
82
|
),
|
|
83
|
-
/* @__PURE__ */ jsxs(DialogClose, { className: "absolute right-3 top-3 z-10 flex size-[34px] 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", children: [
|
|
83
|
+
/* @__PURE__ */ jsxs(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", children: [
|
|
84
84
|
/* @__PURE__ */ jsx("span", { className: "sr-only", children: COPY.close }),
|
|
85
85
|
/* @__PURE__ */ jsx(IconX, { className: "size-[18px]" })
|
|
86
86
|
] }),
|
|
@@ -145,7 +145,7 @@ function ComboCard({ combo, onChoose }) {
|
|
|
145
145
|
type: "button",
|
|
146
146
|
"aria-label": COPY.couponLabel,
|
|
147
147
|
onClick: () => copy(combo.coupon),
|
|
148
|
-
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",
|
|
148
|
+
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",
|
|
149
149
|
children: isCopied ? /* @__PURE__ */ jsx(IconCheck, { className: "size-[18px]" }) : /* @__PURE__ */ jsx(IconCopy, { className: "size-[18px]" })
|
|
150
150
|
}
|
|
151
151
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/modals/HexaPromoModal.tsx"],"sourcesContent":["'use client';\n\nimport { toast } from 'sonner';\nimport {\n IconCheck,\n IconCopy,\n IconInfoCircle,\n IconStar,\n IconTicket,\n IconX,\n} from '@tabler/icons-react';\nimport { Dialog, DialogClose, DialogContent, DialogTitle } from '../ui/overlay/Dialog';\nimport { Toast } from '../ui/feedback/Toast';\nimport { Button } from '../ui/buttons/Button';\nimport useCopyToClipboard from '../../hooks/copy-to-clipboard.hook';\nimport { useModalManager } from '../../store/useModalManager';\nimport { useWhitelabelUrls } from '../../providers/whitelabel.provider';\nimport { cn } from '../../infra/utils/clsx';\n\ntype ComboPeriod = 'monthly' | 'semiannual' | 'annual';\n\ninterface HexaCombo {\n coupon: string;\n name: string;\n features: string[];\n highlighted: boolean;\n period: ComboPeriod;\n}\n\n// Campanha \"Rumo ao Hexa\" — exclusiva da whitelabel 1 (público pt-br). O texto é fixo de\n// propósito: a modal precisa renderizar também no gapps, que não tem provider de next-intl.\nconst COPY = {\n title: 'Rumo ao Hexa!',\n subtitlePrefix: 'Ofertas exclusivas até ',\n subtitleDate: '24/06',\n mostChosen: 'Mais escolhido',\n couponLabel: 'Cupom',\n choosePlan: 'Escolher plano',\n couponCopied: 'Cupom copiado!',\n close: 'Fechar',\n footerPrefix: 'Válido para a ',\n footerBold: 'primeira contratação',\n footerSuffix: ' dos planos Essencial, Negócio ou Agência',\n};\n\nconst COMBOS: HexaCombo[] = [\n {\n coupon: 'MENSAL10',\n name: 'Combo convocação',\n highlighted: false,\n period: 'monthly',\n features: ['10% OFF no plano mensal', 'Webinars exclusivos'],\n },\n {\n coupon: 'SEMESTRAL10',\n name: 'Combo Hexa',\n highlighted: true,\n period: 'semiannual',\n features: ['10% OFF no plano semestral', '3 templates exclusivos', 'Webinars exclusivos'],\n },\n {\n coupon: 'ANUAL10',\n name: 'Combo escalação',\n highlighted: false,\n period: 'annual',\n features: ['10% OFF no plano anual', '3 templates exclusivos'],\n },\n];\n\n// Cores promocionais (verde/amarelo do Brasil) — específicas desta campanha, fora do design\n// system, por isso ficam hardcoded apenas aqui.\nconst GRADIENT = 'linear-gradient(180deg, #08c44f 0%, #7bd237 46.6%, #ffe31b 100%)';\n\nexport default function HexaPromoModal() {\n const { activeModal, closeModal } = useModalManager();\n const { accountsUrl } = useWhitelabelUrls();\n const isOpen = activeModal === 'hexaPromoModal';\n\n const goToPlans = (coupon: string, period: ComboPeriod) => {\n closeModal();\n const url = `${accountsUrl}/subscriptions?tab=plans&coupon=${encodeURIComponent(coupon)}&period=${encodeURIComponent(period)}`;\n window.location.assign(url);\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={() => closeModal()}>\n <DialogContent\n showCloseButton={false}\n onOpenAutoFocus={(e) => e.preventDefault()}\n 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\"\n >\n <DialogTitle className=\"sr-only\">{COPY.title}</DialogTitle>\n\n <div className=\"rounded-[12px] p-1\" style={{ background: GRADIENT }}>\n <div className=\"relative overflow-hidden rounded-[10px] bg-white p-8 shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)]\">\n {/* Arte decorativa (festão/bandeira) no canto superior direito */}\n <img\n src=\"/promo/hexa-confetti.png\"\n alt=\"\"\n aria-hidden\n className=\"pointer-events-none absolute -top-10 right-0 w-[280px] rotate-[16deg] select-none\"\n />\n\n <DialogClose className=\"absolute right-3 top-3 z-10 flex size-[34px] 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\">\n <span className=\"sr-only\">{COPY.close}</span>\n <IconX className=\"size-[18px]\" />\n </DialogClose>\n\n {/* Header: logo + bandeira */}\n <div className=\"relative z-[1] flex w-fit items-center gap-[9px] rounded-lg bg-zinc-100 px-[9px] py-2\">\n <img src=\"/promo/hexa-logo.svg\" alt=\"\" aria-hidden className=\"size-6 select-none\" />\n <img src=\"/promo/hexa-flag.png\" alt=\"\" aria-hidden className=\"size-6 rounded select-none\" />\n </div>\n\n {/* Título */}\n <div className=\"relative z-[1] mt-4 flex flex-col gap-1\">\n <h2 className=\"font-['Outfit'] text-[32px] font-semibold leading-8 text-zinc-950\">\n {COPY.title}\n </h2>\n <p className=\"paragraph-medium-medium text-zinc-950\">\n {COPY.subtitlePrefix}\n <span className=\"font-bold\">{COPY.subtitleDate}</span>\n </p>\n </div>\n\n {/* Cards */}\n <div className=\"relative z-[1] mt-10 flex flex-col items-stretch gap-3 md:flex-row\">\n {COMBOS.map((combo) => (\n <ComboCard key={combo.coupon} combo={combo} onChoose={() => goToPlans(combo.coupon, combo.period)} />\n ))}\n </div>\n\n {/* Rodapé informativo */}\n <div className=\"relative z-[1] mt-3 flex items-center justify-center gap-2.5 rounded-[10px] bg-zinc-100 p-3 text-center\">\n <IconInfoCircle className=\"size-4 shrink-0 text-zinc-950\" />\n <p className=\"paragraph-small-medium text-zinc-950\">\n {COPY.footerPrefix}\n <span className=\"font-semibold\">{COPY.footerBold}</span>\n {COPY.footerSuffix}\n </p>\n </div>\n </div>\n </div>\n </DialogContent>\n </Dialog>\n );\n}\n\ninterface ComboCardProps {\n combo: HexaCombo;\n onChoose: () => void;\n}\n\nfunction ComboCard({ combo, onChoose }: ComboCardProps) {\n const { isCopied, copy } = useCopyToClipboard({\n onSuccess: () => {\n toast.custom((t) => <Toast variant=\"success\" message={COPY.couponCopied} toastId={t} />);\n },\n });\n\n return (\n <div\n className={cn(\n 'relative flex flex-1 flex-col rounded-[10px] border bg-white pb-3 md:w-[276px]',\n combo.highlighted ? 'border-cyan-500' : 'border-zinc-200',\n )}\n >\n {combo.highlighted && (\n <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\">\n <IconStar className=\"size-3 text-cyan-600\" />\n <span className=\"paragraph-xsmall-semibold whitespace-nowrap text-cyan-600\">\n {COPY.mostChosen}\n </span>\n <IconStar className=\"size-3 text-cyan-600\" />\n </div>\n )}\n\n <h3 className=\"border-b border-zinc-200 px-4 py-4 text-center font-['Outfit'] text-base font-semibold text-zinc-950\">\n {combo.name}\n </h3>\n\n <ul className=\"flex flex-1 flex-col gap-5 px-5 pt-5\">\n {combo.features.map((feature) => (\n <li key={feature} className=\"flex items-center gap-2.5\">\n <IconCheck className=\"size-5 shrink-0 text-cyan-500\" />\n <span className=\"paragraph-small-medium text-zinc-950\">{feature}</span>\n </li>\n ))}\n </ul>\n\n <div className=\"mx-3 mt-5 flex items-center gap-3 rounded-lg bg-cyan-50 py-2 pl-3.5 pr-2.5\">\n <IconTicket className=\"size-5 shrink-0 text-cyan-600\" />\n <div className=\"flex min-w-0 flex-1 flex-col\">\n <span className=\"paragraph-xsmall-medium text-zinc-400\">{COPY.couponLabel}</span>\n <span className=\"paragraph-small-semibold text-zinc-950\">{combo.coupon}</span>\n </div>\n <button\n type=\"button\"\n aria-label={COPY.couponLabel}\n onClick={() => copy(combo.coupon)}\n 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\"\n >\n {isCopied ? <IconCheck className=\"size-[18px]\" /> : <IconCopy className=\"size-[18px]\" />}\n </button>\n </div>\n\n <div className=\"mx-3 mt-3\">\n <Button\n variant={combo.highlighted ? 'default' : 'secondary'}\n className={cn('h-11! w-full', combo.highlighted && 'bg-cyan-500 text-white hover:bg-cyan-600')}\n onClick={onChoose}\n >\n {COPY.choosePlan}\n </Button>\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modals/HexaPromoModal.tsx"],"sourcesContent":["'use client';\n\nimport { toast } from 'sonner';\nimport {\n IconCheck,\n IconCopy,\n IconInfoCircle,\n IconStar,\n IconTicket,\n IconX,\n} from '@tabler/icons-react';\nimport { Dialog, DialogClose, DialogContent, DialogTitle } from '../ui/overlay/Dialog';\nimport { Toast } from '../ui/feedback/Toast';\nimport { Button } from '../ui/buttons/Button';\nimport useCopyToClipboard from '../../hooks/copy-to-clipboard.hook';\nimport { useModalManager } from '../../store/useModalManager';\nimport { useWhitelabelUrls } from '../../providers/whitelabel.provider';\nimport { cn } from '../../infra/utils/clsx';\n\ntype ComboPeriod = 'monthly' | 'semiannual' | 'annual';\n\ninterface HexaCombo {\n coupon: string;\n name: string;\n features: string[];\n highlighted: boolean;\n period: ComboPeriod;\n}\n\n// Campanha \"Rumo ao Hexa\" — exclusiva da whitelabel 1 (público pt-br). O texto é fixo de\n// propósito: a modal precisa renderizar também no gapps, que não tem provider de next-intl.\nconst COPY = {\n title: 'Rumo ao Hexa!',\n subtitlePrefix: 'Ofertas exclusivas até ',\n subtitleDate: '24/06',\n mostChosen: 'Mais escolhido',\n couponLabel: 'Cupom',\n choosePlan: 'Escolher plano',\n couponCopied: 'Cupom copiado!',\n close: 'Fechar',\n footerPrefix: 'Válido para a ',\n footerBold: 'primeira contratação',\n footerSuffix: ' dos planos Essencial, Negócio ou Agência',\n};\n\nconst COMBOS: HexaCombo[] = [\n {\n coupon: 'MENSAL10',\n name: 'Combo convocação',\n highlighted: false,\n period: 'monthly',\n features: ['10% OFF no plano mensal', 'Webinars exclusivos'],\n },\n {\n coupon: 'SEMESTRAL10',\n name: 'Combo Hexa',\n highlighted: true,\n period: 'semiannual',\n features: ['10% OFF no plano semestral', '3 templates exclusivos', 'Webinars exclusivos'],\n },\n {\n coupon: 'ANUAL10',\n name: 'Combo escalação',\n highlighted: false,\n period: 'annual',\n features: ['10% OFF no plano anual', '3 templates exclusivos'],\n },\n];\n\n// Cores promocionais (verde/amarelo do Brasil) — específicas desta campanha, fora do design\n// system, por isso ficam hardcoded apenas aqui.\nconst GRADIENT = 'linear-gradient(180deg, #08c44f 0%, #7bd237 46.6%, #ffe31b 100%)';\n\nexport default function HexaPromoModal() {\n const { activeModal, closeModal } = useModalManager();\n const { accountsUrl } = useWhitelabelUrls();\n const isOpen = activeModal === 'hexaPromoModal';\n\n const goToPlans = (coupon: string, period: ComboPeriod) => {\n closeModal();\n const url = `${accountsUrl}/subscriptions?tab=plans&coupon=${encodeURIComponent(coupon)}&period=${encodeURIComponent(period)}`;\n window.location.assign(url);\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={() => closeModal()}>\n <DialogContent\n showCloseButton={false}\n onOpenAutoFocus={(e) => e.preventDefault()}\n 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\"\n >\n <DialogTitle className=\"sr-only\">{COPY.title}</DialogTitle>\n\n <div className=\"rounded-[12px] p-1\" style={{ background: GRADIENT }}>\n <div className=\"relative overflow-hidden rounded-[10px] bg-white p-8 shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)]\">\n {/* Arte decorativa (festão/bandeira) no canto superior direito */}\n <img\n src=\"/promo/hexa-confetti.png\"\n alt=\"\"\n aria-hidden\n className=\"pointer-events-none absolute -top-10 right-0 w-[280px] rotate-[16deg] select-none\"\n />\n\n <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\">\n <span className=\"sr-only\">{COPY.close}</span>\n <IconX className=\"size-[18px]\" />\n </DialogClose>\n\n {/* Header: logo + bandeira */}\n <div className=\"relative z-[1] flex w-fit items-center gap-[9px] rounded-lg bg-zinc-100 px-[9px] py-2\">\n <img src=\"/promo/hexa-logo.svg\" alt=\"\" aria-hidden className=\"size-6 select-none\" />\n <img src=\"/promo/hexa-flag.png\" alt=\"\" aria-hidden className=\"size-6 rounded select-none\" />\n </div>\n\n {/* Título */}\n <div className=\"relative z-[1] mt-4 flex flex-col gap-1\">\n <h2 className=\"font-['Outfit'] text-[32px] font-semibold leading-8 text-zinc-950\">\n {COPY.title}\n </h2>\n <p className=\"paragraph-medium-medium text-zinc-950\">\n {COPY.subtitlePrefix}\n <span className=\"font-bold\">{COPY.subtitleDate}</span>\n </p>\n </div>\n\n {/* Cards */}\n <div className=\"relative z-[1] mt-10 flex flex-col items-stretch gap-3 md:flex-row\">\n {COMBOS.map((combo) => (\n <ComboCard key={combo.coupon} combo={combo} onChoose={() => goToPlans(combo.coupon, combo.period)} />\n ))}\n </div>\n\n {/* Rodapé informativo */}\n <div className=\"relative z-[1] mt-3 flex items-center justify-center gap-2.5 rounded-[10px] bg-zinc-100 p-3 text-center\">\n <IconInfoCircle className=\"size-4 shrink-0 text-zinc-950\" />\n <p className=\"paragraph-small-medium text-zinc-950\">\n {COPY.footerPrefix}\n <span className=\"font-semibold\">{COPY.footerBold}</span>\n {COPY.footerSuffix}\n </p>\n </div>\n </div>\n </div>\n </DialogContent>\n </Dialog>\n );\n}\n\ninterface ComboCardProps {\n combo: HexaCombo;\n onChoose: () => void;\n}\n\nfunction ComboCard({ combo, onChoose }: ComboCardProps) {\n const { isCopied, copy } = useCopyToClipboard({\n onSuccess: () => {\n toast.custom((t) => <Toast variant=\"success\" message={COPY.couponCopied} toastId={t} />);\n },\n });\n\n return (\n <div\n className={cn(\n 'relative flex flex-1 flex-col rounded-[10px] border bg-white pb-3 md:w-[276px]',\n combo.highlighted ? 'border-cyan-500' : 'border-zinc-200',\n )}\n >\n {combo.highlighted && (\n <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\">\n <IconStar className=\"size-3 text-cyan-600\" />\n <span className=\"paragraph-xsmall-semibold whitespace-nowrap text-cyan-600\">\n {COPY.mostChosen}\n </span>\n <IconStar className=\"size-3 text-cyan-600\" />\n </div>\n )}\n\n <h3 className=\"border-b border-zinc-200 px-4 py-4 text-center font-['Outfit'] text-base font-semibold text-zinc-950\">\n {combo.name}\n </h3>\n\n <ul className=\"flex flex-1 flex-col gap-5 px-5 pt-5\">\n {combo.features.map((feature) => (\n <li key={feature} className=\"flex items-center gap-2.5\">\n <IconCheck className=\"size-5 shrink-0 text-cyan-500\" />\n <span className=\"paragraph-small-medium text-zinc-950\">{feature}</span>\n </li>\n ))}\n </ul>\n\n <div className=\"mx-3 mt-5 flex items-center gap-3 rounded-lg bg-cyan-50 py-2 pl-3.5 pr-2.5\">\n <IconTicket className=\"size-5 shrink-0 text-cyan-600\" />\n <div className=\"flex min-w-0 flex-1 flex-col\">\n <span className=\"paragraph-xsmall-medium text-zinc-400\">{COPY.couponLabel}</span>\n <span className=\"paragraph-small-semibold text-zinc-950\">{combo.coupon}</span>\n </div>\n <button\n type=\"button\"\n aria-label={COPY.couponLabel}\n onClick={() => copy(combo.coupon)}\n 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\"\n >\n {isCopied ? <IconCheck className=\"size-[18px]\" /> : <IconCopy className=\"size-[18px]\" />}\n </button>\n </div>\n\n <div className=\"mx-3 mt-3\">\n <Button\n variant={combo.highlighted ? 'default' : 'secondary'}\n className={cn('h-11! w-full', combo.highlighted && 'bg-cyan-500 text-white hover:bg-cyan-600')}\n onClick={onChoose}\n >\n {COPY.choosePlan}\n </Button>\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -101,7 +101,7 @@ export default function HexaPromoModal() {
|
|
|
101
101
|
className="pointer-events-none absolute -top-10 right-0 w-[280px] rotate-[16deg] select-none"
|
|
102
102
|
/>
|
|
103
103
|
|
|
104
|
-
<DialogClose className="absolute right-3 top-3 z-10 flex size-[34px] 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">
|
|
104
|
+
<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">
|
|
105
105
|
<span className="sr-only">{COPY.close}</span>
|
|
106
106
|
<IconX className="size-[18px]" />
|
|
107
107
|
</DialogClose>
|
|
@@ -198,7 +198,7 @@ function ComboCard({ combo, onChoose }: ComboCardProps) {
|
|
|
198
198
|
type="button"
|
|
199
199
|
aria-label={COPY.couponLabel}
|
|
200
200
|
onClick={() => copy(combo.coupon)}
|
|
201
|
-
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"
|
|
201
|
+
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"
|
|
202
202
|
>
|
|
203
203
|
{isCopied ? <IconCheck className="size-[18px]" /> : <IconCopy className="size-[18px]" />}
|
|
204
204
|
</button>
|