@greatapps/common 1.1.747 → 1.1.748
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.
|
@@ -20,9 +20,21 @@ import { useWhitelabelUrls, useExternalContracting } from "../../providers/white
|
|
|
20
20
|
import { useModalManager } from "../../store/useModalManager";
|
|
21
21
|
import { formatShortDate } from "../../infra/utils/date";
|
|
22
22
|
const RESOURCE_GROUPS = [
|
|
23
|
-
{
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
{
|
|
24
|
+
icon: IconFile,
|
|
25
|
+
titleKey: "common.subscription.frozen.modal.resources.pages.title",
|
|
26
|
+
descriptionKey: "common.subscription.frozen.modal.resources.pages.description"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
icon: IconFolder,
|
|
30
|
+
titleKey: "common.subscription.frozen.modal.resources.projects.title",
|
|
31
|
+
descriptionKey: "common.subscription.frozen.modal.resources.projects.description"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
icon: IconWorld,
|
|
35
|
+
titleKey: "common.subscription.frozen.modal.resources.domains.title",
|
|
36
|
+
descriptionKey: "common.subscription.frozen.modal.resources.domains.description"
|
|
37
|
+
}
|
|
26
38
|
];
|
|
27
39
|
function AccountFrozenModal() {
|
|
28
40
|
const translate = useTranslations();
|
|
@@ -60,23 +72,19 @@ function AccountFrozenModal() {
|
|
|
60
72
|
/* @__PURE__ */ jsx(DialogDescription, { className: "paragraph-small-regular text-zinc-500", children: description })
|
|
61
73
|
] }),
|
|
62
74
|
showResources && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
63
|
-
/* @__PURE__ */ jsx("div", { className: "bg-white border border-zinc-100 rounded-lg", children: RESOURCE_GROUPS.map(({
|
|
75
|
+
/* @__PURE__ */ jsx("div", { className: "bg-white border border-zinc-100 rounded-lg", children: RESOURCE_GROUPS.map(({ titleKey, descriptionKey, icon: Icon }, index) => /* @__PURE__ */ jsxs("div", { children: [
|
|
64
76
|
index > 0 && /* @__PURE__ */ jsx("div", { className: "h-px bg-zinc-100" }),
|
|
65
77
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 p-4", children: [
|
|
66
78
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
67
79
|
/* @__PURE__ */ jsx(Icon, { size: 20, className: "text-zinc-950 shrink-0" }),
|
|
68
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translate(
|
|
69
|
-
`common.subscription.frozen.modal.resources.${key}.title`
|
|
70
|
-
) })
|
|
80
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translate(titleKey) })
|
|
71
81
|
] }),
|
|
72
82
|
/* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
73
83
|
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
74
84
|
"button",
|
|
75
85
|
{
|
|
76
86
|
type: "button",
|
|
77
|
-
"aria-label": translate(
|
|
78
|
-
`common.subscription.frozen.modal.resources.${key}.title`
|
|
79
|
-
),
|
|
87
|
+
"aria-label": translate(titleKey),
|
|
80
88
|
className: "flex items-center justify-center shrink-0 cursor-pointer",
|
|
81
89
|
children: /* @__PURE__ */ jsx(IconInfoCircle, { className: "size-4 text-zinc-400" })
|
|
82
90
|
}
|
|
@@ -86,14 +94,12 @@ function AccountFrozenModal() {
|
|
|
86
94
|
{
|
|
87
95
|
side: "top",
|
|
88
96
|
className: "z-[1100] max-w-[240px]",
|
|
89
|
-
children: translate(
|
|
90
|
-
`common.subscription.frozen.modal.resources.${key}.description`
|
|
91
|
-
)
|
|
97
|
+
children: translate(descriptionKey)
|
|
92
98
|
}
|
|
93
99
|
)
|
|
94
100
|
] })
|
|
95
101
|
] })
|
|
96
|
-
] },
|
|
102
|
+
] }, titleKey)) }),
|
|
97
103
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4 rounded-lg bg-cyan-50", children: [
|
|
98
104
|
/* @__PURE__ */ jsx(IconInfoCircle, { className: "size-4 text-zinc-950 shrink-0" }),
|
|
99
105
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950", children: translate("common.subscription.frozen.modal.keepsWorking") })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/modals/AccountFrozenModal.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n IconLock,\n IconFile,\n IconFolder,\n IconWorld,\n IconInfoCircle,\n type IconProps,\n} from '@tabler/icons-react';\nimport type { ComponentType } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../ui/buttons/Button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\nimport { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';\nimport { useModalManager } from '../../store/useModalManager';\nimport { formatShortDate } from '../../infra/utils/date';\n\n/* Os 9 recursos do card agrupados nos 3 grupos que o usuário reconhece na plataforma.\n * Um ícone por grupo; o texto mora no catálogo. */\nconst RESOURCE_GROUPS: { key: string; icon: ComponentType<IconProps> }[] = [\n { key: 'pages', icon: IconFile },\n { key: 'projects', icon: IconFolder },\n { key: 'domains', icon: IconWorld },\n];\n\n/* `freezeDate` no data = ainda VAI congelar (véspera); sem ele = já congelado.\n *\n * A LISTA só aparece quando o usuário PEDIU por ela, clicando em \"Detalhes\" no banner\n * (`showResources`). Na modal que abre sozinha ao entrar numa conta bloqueada fica só o\n * recado curto e o botão. */\ninterface FrozenModalData {\n freezeDate?: Date | string | null;\n showResources?: boolean;\n}\n\nexport default function AccountFrozenModal() {\n const translate = useTranslations();\n const { activeModal, closeModal, modalData } = useModalManager();\n const isOpen = activeModal === 'accountFrozenModal';\n const { accountsUrl } = useWhitelabelUrls();\n const { redirectToExternal } = useExternalContracting();\n\n const data = modalData as FrozenModalData | undefined;\n const freezeDate = data?.freezeDate ?? null;\n const isWarning = Boolean(freezeDate);\n const showResources = Boolean(data?.showResources);\n\n const title = isWarning\n ? translate('common.subscription.frozen.modal.warningTitle', {\n freezeDate: formatShortDate(freezeDate ? new Date(freezeDate) : null),\n })\n : translate('common.subscription.frozen.modal.title');\n\n /* Sem a lista o texto tem que fechar sozinho; com a lista ele a INTRODUZ (termina em \":\"). */\n const description = isWarning\n ? translate(\n showResources\n ? 'common.subscription.frozen.modal.warningDescriptionWithResources'\n : 'common.subscription.frozen.modal.warningDescription',\n )\n : translate(\n showResources\n ? 'common.subscription.frozen.modal.descriptionWithResources'\n : 'common.subscription.frozen.modal.description',\n );\n\n const handleRegularize = () => {\n if (redirectToExternal('plans')) return;\n window.location.href = `${accountsUrl}/subscriptions`;\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={() => closeModal()}>\n <DialogContent\n showCloseButton\n /* Sem isto o Radix move o foco para o primeiro focável ao abrir — que aqui é o\n * gatilho do tooltip — e o tooltip abre em FOCO, não só em hover: a modal\n * aparecia com um balão já aberto. O foco segue preso no dialog. */\n onOpenAutoFocus={(event) => event.preventDefault()}\n className=\"flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[420px]! rounded-lg border\"\n >\n <div className=\"flex flex-col gap-5 p-4 lg:p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n <IconLock size={20} className=\"text-zinc-950\" />\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n {title}\n </DialogTitle>\n <DialogDescription className=\"paragraph-small-regular text-zinc-500\">\n {description}\n </DialogDescription>\n </div>\n\n {showResources && (\n <>\n {/* Um bloco só, grupos separados por linha. A descrição de cada grupo\n * vive no tooltip do ícone de info à direita: na modal ela empilhava\n * três parágrafos e virava um paredão. */}\n <div className=\"bg-white border border-zinc-100 rounded-lg\">\n {RESOURCE_GROUPS.map(({ key, icon: Icon }, index) => (\n <div key={key}>\n {index > 0 && <div className=\"h-px bg-zinc-100\" />}\n <div className=\"flex items-center justify-between gap-3 p-4\">\n <div className=\"flex items-center gap-3\">\n <Icon size={20} className=\"text-zinc-950 shrink-0\" />\n <span className=\"paragraph-small-semibold text-zinc-950\">\n {translate(\n `common.subscription.frozen.modal.resources.${key}.title`,\n )}\n </span>\n </div>\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n aria-label={translate(\n `common.subscription.frozen.modal.resources.${key}.title`,\n )}\n className=\"flex items-center justify-center shrink-0 cursor-pointer\"\n >\n <IconInfoCircle className=\"size-4 text-zinc-400\" />\n </button>\n </TooltipTrigger>\n <TooltipContent\n side=\"top\"\n /* Acima do dialog: o globals.css do gapps-app\n * sobe o [data-slot='dialog-content'] para\n * z-index 1011 !important (o componente\n * declara 1001), então o z-50 padrão do\n * tooltip ficava atrás. */\n className=\"z-[1100] max-w-[240px]\"\n >\n {translate(\n `common.subscription.frozen.modal.resources.${key}.description`,\n )}\n </TooltipContent>\n </Tooltip>\n </div>\n </div>\n ))}\n </div>\n\n {/* Bloco de informação padrão da plataforma. Ciano fixo: o congelamento\n * é exclusivo da wl 1, então não existe o caso whitelabel/zinc aqui. */}\n <div className=\"flex items-center gap-3 p-4 rounded-lg bg-cyan-50\">\n <IconInfoCircle className=\"size-4 text-zinc-950 shrink-0\" />\n <span className=\"paragraph-small-regular text-zinc-950\">\n {translate('common.subscription.frozen.modal.keepsWorking')}\n </span>\n </div>\n </>\n )}\n </div>\n\n <div className=\"h-px bg-zinc-200\" />\n\n <div className=\"flex items-center gap-2 p-4 lg:p-5\">\n <Button className=\"h-10 w-fit\" onClick={handleRegularize}>\n {translate('common.subscription.frozen.modal.cta')}\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modals/AccountFrozenModal.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n IconLock,\n IconFile,\n IconFolder,\n IconWorld,\n IconInfoCircle,\n type IconProps,\n} from '@tabler/icons-react';\nimport type { ComponentType } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../ui/buttons/Button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\nimport { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';\nimport { useModalManager } from '../../store/useModalManager';\nimport { formatShortDate } from '../../infra/utils/date';\n\n/* Os 9 recursos do card agrupados nos 3 grupos que o usuário reconhece na plataforma.\n * Um ícone por grupo; o texto mora no catálogo. */\n/* Chaves LITERAIS, não `resources.${key}.title`: o catálogo dos apps consumidores tipa\n * translate() com a união de chaves, e a template string não resolve nessa união — o TS cai\n * na sobrecarga de 2-3 argumentos e o build do consumidor quebra (a common sozinha não\n * acusa). */\nconst RESOURCE_GROUPS = [\n {\n icon: IconFile,\n titleKey: 'common.subscription.frozen.modal.resources.pages.title',\n descriptionKey: 'common.subscription.frozen.modal.resources.pages.description',\n },\n {\n icon: IconFolder,\n titleKey: 'common.subscription.frozen.modal.resources.projects.title',\n descriptionKey: 'common.subscription.frozen.modal.resources.projects.description',\n },\n {\n icon: IconWorld,\n titleKey: 'common.subscription.frozen.modal.resources.domains.title',\n descriptionKey: 'common.subscription.frozen.modal.resources.domains.description',\n },\n] as const satisfies readonly {\n icon: ComponentType<IconProps>;\n titleKey: string;\n descriptionKey: string;\n}[];\n\n/* `freezeDate` no data = ainda VAI congelar (véspera); sem ele = já congelado.\n *\n * A LISTA só aparece quando o usuário PEDIU por ela, clicando em \"Detalhes\" no banner\n * (`showResources`). Na modal que abre sozinha ao entrar numa conta bloqueada fica só o\n * recado curto e o botão. */\ninterface FrozenModalData {\n freezeDate?: Date | string | null;\n showResources?: boolean;\n}\n\nexport default function AccountFrozenModal() {\n const translate = useTranslations();\n const { activeModal, closeModal, modalData } = useModalManager();\n const isOpen = activeModal === 'accountFrozenModal';\n const { accountsUrl } = useWhitelabelUrls();\n const { redirectToExternal } = useExternalContracting();\n\n const data = modalData as FrozenModalData | undefined;\n const freezeDate = data?.freezeDate ?? null;\n const isWarning = Boolean(freezeDate);\n const showResources = Boolean(data?.showResources);\n\n const title = isWarning\n ? translate('common.subscription.frozen.modal.warningTitle', {\n freezeDate: formatShortDate(freezeDate ? new Date(freezeDate) : null),\n })\n : translate('common.subscription.frozen.modal.title');\n\n /* Sem a lista o texto tem que fechar sozinho; com a lista ele a INTRODUZ (termina em \":\"). */\n const description = isWarning\n ? translate(\n showResources\n ? 'common.subscription.frozen.modal.warningDescriptionWithResources'\n : 'common.subscription.frozen.modal.warningDescription',\n )\n : translate(\n showResources\n ? 'common.subscription.frozen.modal.descriptionWithResources'\n : 'common.subscription.frozen.modal.description',\n );\n\n const handleRegularize = () => {\n if (redirectToExternal('plans')) return;\n window.location.href = `${accountsUrl}/subscriptions`;\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={() => closeModal()}>\n <DialogContent\n showCloseButton\n /* Sem isto o Radix move o foco para o primeiro focável ao abrir — que aqui é o\n * gatilho do tooltip — e o tooltip abre em FOCO, não só em hover: a modal\n * aparecia com um balão já aberto. O foco segue preso no dialog. */\n onOpenAutoFocus={(event) => event.preventDefault()}\n className=\"flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[420px]! rounded-lg border\"\n >\n <div className=\"flex flex-col gap-5 p-4 lg:p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n <IconLock size={20} className=\"text-zinc-950\" />\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n {title}\n </DialogTitle>\n <DialogDescription className=\"paragraph-small-regular text-zinc-500\">\n {description}\n </DialogDescription>\n </div>\n\n {showResources && (\n <>\n {/* Um bloco só, grupos separados por linha. A descrição de cada grupo\n * vive no tooltip do ícone de info à direita: na modal ela empilhava\n * três parágrafos e virava um paredão. */}\n <div className=\"bg-white border border-zinc-100 rounded-lg\">\n {RESOURCE_GROUPS.map(({ titleKey, descriptionKey, icon: Icon }, index) => (\n <div key={titleKey}>\n {index > 0 && <div className=\"h-px bg-zinc-100\" />}\n <div className=\"flex items-center justify-between gap-3 p-4\">\n <div className=\"flex items-center gap-3\">\n <Icon size={20} className=\"text-zinc-950 shrink-0\" />\n <span className=\"paragraph-small-semibold text-zinc-950\">\n {translate(titleKey)}\n </span>\n </div>\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n aria-label={translate(titleKey)}\n className=\"flex items-center justify-center shrink-0 cursor-pointer\"\n >\n <IconInfoCircle className=\"size-4 text-zinc-400\" />\n </button>\n </TooltipTrigger>\n <TooltipContent\n side=\"top\"\n /* Acima do dialog: o globals.css do gapps-app\n * sobe o [data-slot='dialog-content'] para\n * z-index 1011 !important (o componente\n * declara 1001), então o z-50 padrão do\n * tooltip ficava atrás. */\n className=\"z-[1100] max-w-[240px]\"\n >\n {translate(descriptionKey)}\n </TooltipContent>\n </Tooltip>\n </div>\n </div>\n ))}\n </div>\n\n {/* Bloco de informação padrão da plataforma. Ciano fixo: o congelamento\n * é exclusivo da wl 1, então não existe o caso whitelabel/zinc aqui. */}\n <div className=\"flex items-center gap-3 p-4 rounded-lg bg-cyan-50\">\n <IconInfoCircle className=\"size-4 text-zinc-950 shrink-0\" />\n <span className=\"paragraph-small-regular text-zinc-950\">\n {translate('common.subscription.frozen.modal.keepsWorking')}\n </span>\n </div>\n </>\n )}\n </div>\n\n <div className=\"h-px bg-zinc-200\" />\n\n <div className=\"flex items-center gap-2 p-4 lg:p-5\">\n <Button className=\"h-10 w-fit\" onClick={handleRegularize}>\n {translate('common.subscription.frozen.modal.cta')}\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -24,11 +24,31 @@ import { formatShortDate } from '../../infra/utils/date';
|
|
|
24
24
|
|
|
25
25
|
/* Os 9 recursos do card agrupados nos 3 grupos que o usuário reconhece na plataforma.
|
|
26
26
|
* Um ícone por grupo; o texto mora no catálogo. */
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
/* Chaves LITERAIS, não `resources.${key}.title`: o catálogo dos apps consumidores tipa
|
|
28
|
+
* translate() com a união de chaves, e a template string não resolve nessa união — o TS cai
|
|
29
|
+
* na sobrecarga de 2-3 argumentos e o build do consumidor quebra (a common sozinha não
|
|
30
|
+
* acusa). */
|
|
31
|
+
const RESOURCE_GROUPS = [
|
|
32
|
+
{
|
|
33
|
+
icon: IconFile,
|
|
34
|
+
titleKey: 'common.subscription.frozen.modal.resources.pages.title',
|
|
35
|
+
descriptionKey: 'common.subscription.frozen.modal.resources.pages.description',
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
icon: IconFolder,
|
|
39
|
+
titleKey: 'common.subscription.frozen.modal.resources.projects.title',
|
|
40
|
+
descriptionKey: 'common.subscription.frozen.modal.resources.projects.description',
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
icon: IconWorld,
|
|
44
|
+
titleKey: 'common.subscription.frozen.modal.resources.domains.title',
|
|
45
|
+
descriptionKey: 'common.subscription.frozen.modal.resources.domains.description',
|
|
46
|
+
},
|
|
47
|
+
] as const satisfies readonly {
|
|
48
|
+
icon: ComponentType<IconProps>;
|
|
49
|
+
titleKey: string;
|
|
50
|
+
descriptionKey: string;
|
|
51
|
+
}[];
|
|
32
52
|
|
|
33
53
|
/* `freezeDate` no data = ainda VAI congelar (véspera); sem ele = já congelado.
|
|
34
54
|
*
|
|
@@ -106,25 +126,21 @@ export default function AccountFrozenModal() {
|
|
|
106
126
|
* vive no tooltip do ícone de info à direita: na modal ela empilhava
|
|
107
127
|
* três parágrafos e virava um paredão. */}
|
|
108
128
|
<div className="bg-white border border-zinc-100 rounded-lg">
|
|
109
|
-
{RESOURCE_GROUPS.map(({
|
|
110
|
-
<div key={
|
|
129
|
+
{RESOURCE_GROUPS.map(({ titleKey, descriptionKey, icon: Icon }, index) => (
|
|
130
|
+
<div key={titleKey}>
|
|
111
131
|
{index > 0 && <div className="h-px bg-zinc-100" />}
|
|
112
132
|
<div className="flex items-center justify-between gap-3 p-4">
|
|
113
133
|
<div className="flex items-center gap-3">
|
|
114
134
|
<Icon size={20} className="text-zinc-950 shrink-0" />
|
|
115
135
|
<span className="paragraph-small-semibold text-zinc-950">
|
|
116
|
-
{translate(
|
|
117
|
-
`common.subscription.frozen.modal.resources.${key}.title`,
|
|
118
|
-
)}
|
|
136
|
+
{translate(titleKey)}
|
|
119
137
|
</span>
|
|
120
138
|
</div>
|
|
121
139
|
<Tooltip>
|
|
122
140
|
<TooltipTrigger asChild>
|
|
123
141
|
<button
|
|
124
142
|
type="button"
|
|
125
|
-
aria-label={translate(
|
|
126
|
-
`common.subscription.frozen.modal.resources.${key}.title`,
|
|
127
|
-
)}
|
|
143
|
+
aria-label={translate(titleKey)}
|
|
128
144
|
className="flex items-center justify-center shrink-0 cursor-pointer"
|
|
129
145
|
>
|
|
130
146
|
<IconInfoCircle className="size-4 text-zinc-400" />
|
|
@@ -139,9 +155,7 @@ export default function AccountFrozenModal() {
|
|
|
139
155
|
* tooltip ficava atrás. */
|
|
140
156
|
className="z-[1100] max-w-[240px]"
|
|
141
157
|
>
|
|
142
|
-
{translate(
|
|
143
|
-
`common.subscription.frozen.modal.resources.${key}.description`,
|
|
144
|
-
)}
|
|
158
|
+
{translate(descriptionKey)}
|
|
145
159
|
</TooltipContent>
|
|
146
160
|
</Tooltip>
|
|
147
161
|
</div>
|