@hed-hog/core 0.0.387 → 0.0.390

package/hedhog/frontend/app/mail/layout/page.tsx.ejs

@@ -0,0 +1,344 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { HtmlContentEditor } from '@/components/html-content-editor';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp } from '@hed-hog/next-app-provider';
+import { AlertCircle, Save } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+type LayoutTranslation = {
+  name?: string;
+  header?: string;
+  footer?: string;
+};
+
+interface MailLayoutResponse {
+  id: number;
+  slug: string;
+  is_default: boolean;
+  wrapper: string;
+  locale: Record<string, LayoutTranslation>;
+}
+
+/** Tokens que o wrapper e os fragmentos aceitam. */
+const LAYOUT_TOKENS = [
+  '{{{content}}}',
+  '{{{header}}}',
+  '{{{footer}}}',
+  '{{subject}}',
+  '{{brandName}}',
+  '{{year}}',
+  '{{lang}}',
+];
+
+/** Tokens oferecidos no autocomplete do editor de código. */
+const EDITOR_VARIABLES = LAYOUT_TOKENS.map((label) => ({ label }));
+
+function hasContentToken(wrapper: string) {
+  return wrapper.includes('{{{content}}}') || wrapper.includes('{{content}}');
+}
+
+export default function MailLayoutPage() {
+  const { locales, request, currentLocaleCode } = useApp();
+  const t = useTranslations('core.MailLayoutPage');
+
+  const [layoutId, setLayoutId] = useState<number | null>(null);
+  const [wrapper, setWrapper] = useState('');
+  // Guarda TODOS os idiomas ao mesmo tempo: trocar de idioma nunca descarta
+  // edição não salva, e o PATCH envia o conjunto inteiro.
+  const [translations, setTranslations] = useState<
+    Record<string, LayoutTranslation>
+  >({});
+  const [selectedLocaleCode, setSelectedLocaleCode] =
+    useState<string>(currentLocaleCode);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [previewHtml, setPreviewHtml] = useState('');
+  const [previewLoading, setPreviewLoading] = useState(false);
+
+  const current = translations[selectedLocaleCode] || {};
+  const missingContentToken = !hasContentToken(wrapper);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      setLoading(true);
+      try {
+        const list = await request<{ data?: MailLayoutResponse[] }>({
+          url: '/mail-layout',
+          params: { pageSize: 100 },
+        });
+
+        const rows = list.data?.data || [];
+        const target = rows.find((row) => row.is_default) || rows[0];
+
+        if (!target) {
+          toast.error(t('loadError'));
+          return;
+        }
+
+        // A listagem vem achatada em um único idioma; o detalhe traz o mapa
+        // completo de traduções que a tela precisa.
+        const detail = await request<MailLayoutResponse>({
+          url: `/mail-layout/${target.id}`,
+        });
+
+        if (cancelled) return;
+
+        setLayoutId(detail.data.id);
+        setWrapper(detail.data.wrapper || '');
+        setTranslations(detail.data.locale || {});
+      } catch (error) {
+        console.error('Error loading mail layout:', error);
+        if (!cancelled) toast.error(t('loadError'));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [request, t]);
+
+  // Preview do layout inteiro com um corpo de exemplo, enviando as alterações
+  // ainda não salvas para o servidor renderizar.
+  useEffect(() => {
+    if (loading || !wrapper.trim()) {
+      setPreviewHtml('');
+      return;
+    }
+
+    const controller = new AbortController();
+    const timer = setTimeout(async () => {
+      setPreviewLoading(true);
+      try {
+        const response = await request<{ html: string }>({
+          url: '/mail/preview',
+          method: 'POST',
+          params: { locale: selectedLocaleCode },
+          data: {
+            subject: t('sampleSubject'),
+            body: t('sampleBody'),
+            layout: {
+              wrapper,
+              header: current.header ?? '',
+              footer: current.footer ?? '',
+            },
+          },
+          signal: controller.signal,
+          showErrors: false,
+        });
+        setPreviewHtml(response.data?.html || '');
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          console.error('Error rendering layout preview:', error);
+        }
+      } finally {
+        if (!controller.signal.aborted) setPreviewLoading(false);
+      }
+    }, 400);
+
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [
+    loading,
+    wrapper,
+    current.header,
+    current.footer,
+    selectedLocaleCode,
+    request,
+    t,
+  ]);
+
+  const updateTranslation = useCallback(
+    (field: keyof LayoutTranslation, value: string) => {
+      setTranslations((prev) => ({
+        ...prev,
+        [selectedLocaleCode]: {
+          ...(prev[selectedLocaleCode] || {}),
+          [field]: value,
+        },
+      }));
+    },
+    [selectedLocaleCode]
+  );
+
+  const handleSave = useCallback(async () => {
+    if (layoutId === null) return;
+
+    if (missingContentToken) {
+      toast.error(t('missingContentTokenError'));
+      return;
+    }
+
+    setSaving(true);
+    try {
+      await request({
+        url: `/mail-layout/${layoutId}`,
+        method: 'PATCH',
+        data: { wrapper, locale: translations },
+      });
+      toast.success(t('saveSuccess'));
+    } catch (error) {
+      console.error('Error saving mail layout:', error);
+      toast.error(t('saveError'));
+    } finally {
+      setSaving(false);
+    }
+  }, [layoutId, missingContentToken, request, t, translations, wrapper]);
+
+  const editorHeight = 'h-[calc(100vh-360px)]';
+
+  const tokenPanel = useMemo(
+    () => (
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-xs text-muted-foreground">{t('tokensHelp')}</span>
+        {LAYOUT_TOKENS.map((token) => (
+          <Badge key={token} variant="outline" className="font-mono text-xs">
+            {token}
+          </Badge>
+        ))}
+      </div>
+    ),
+    [t]
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbHome'), href: '/' },
+          { label: t('breadcrumbMail'), href: '/core/mail/template' },
+          { label: t('breadcrumbTitle') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        actions={[
+          {
+            label: saving ? t('saving') : t('save'),
+            onClick: handleSave,
+            icon: <Save className="h-4 w-4" />,
+            disabled: saving || loading || layoutId === null,
+          },
+        ]}
+      />
+
+      {loading ? (
+        <div className="space-y-4">
+          <Skeleton className="h-10 w-64" />
+          <Skeleton className="h-[420px] w-full" />
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div className="flex flex-wrap items-end justify-between gap-4">
+            {tokenPanel}
+            <div className="space-y-1.5">
+              <Label htmlFor="layout-locale">{t('localeLabel')}</Label>
+              <Select
+                value={selectedLocaleCode}
+                onValueChange={setSelectedLocaleCode}
+              >
+                <SelectTrigger id="layout-locale" className="w-48">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {locales.map((locale) => (
+                    <SelectItem key={locale.code} value={locale.code}>
+                      {locale.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <Tabs defaultValue="header" className="space-y-3">
+            <TabsList>
+              <TabsTrigger value="header">{t('tabHeader')}</TabsTrigger>
+              <TabsTrigger value="footer">{t('tabFooter')}</TabsTrigger>
+              <TabsTrigger value="wrapper">{t('tabWrapper')}</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="header" className="mt-0">
+              <p className="mb-2 text-sm text-muted-foreground">
+                {t('headerHelp')}
+              </p>
+              <HtmlContentEditor
+                key={`header-${selectedLocaleCode}`}
+                value={current.header ?? ''}
+                onChange={(value) => updateTranslation('header', value)}
+                variables={EDITOR_VARIABLES}
+                previewHtml={previewHtml}
+                previewLoading={previewLoading}
+                zoomStorageKey="mail-layout-html-editor-zoom"
+                className={editorHeight}
+              />
+            </TabsContent>
+
+            <TabsContent value="footer" className="mt-0">
+              <p className="mb-2 text-sm text-muted-foreground">
+                {t('footerHelp')}
+              </p>
+              <HtmlContentEditor
+                key={`footer-${selectedLocaleCode}`}
+                value={current.footer ?? ''}
+                onChange={(value) => updateTranslation('footer', value)}
+                variables={EDITOR_VARIABLES}
+                previewHtml={previewHtml}
+                previewLoading={previewLoading}
+                zoomStorageKey="mail-layout-html-editor-zoom"
+                className={editorHeight}
+              />
+            </TabsContent>
+
+            <TabsContent value="wrapper" className="mt-0">
+              <p className="mb-2 text-sm text-muted-foreground">
+                {t('wrapperHelp')}
+              </p>
+              {/* allowRichText desligado: o wrapper contém <style> e <head>, que
+                  o editor visual descartaria silenciosamente. */}
+              <HtmlContentEditor
+                value={wrapper}
+                onChange={setWrapper}
+                variables={EDITOR_VARIABLES}
+                previewHtml={previewHtml}
+                previewLoading={previewLoading}
+                allowRichText={false}
+                defaultTab="code"
+                zoomStorageKey="mail-layout-html-editor-zoom"
+                className={editorHeight}
+                warnings={
+                  missingContentToken ? (
+                    <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 p-2.5 text-xs text-destructive">
+                      <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                      <span>{t('missingContentTokenError')}</span>
+                    </div>
+                  ) : null
+                }
+              />
+            </TabsContent>
+          </Tabs>
+        </div>
+      )}
+    </Page>
+  );
+}

package/hedhog/frontend/app/mail/template/page.tsx.ejs

@@ -1,6 +1,5 @@
 'use client';
 
-import dynamic from 'next/dynamic';
 import type React from 'react';
 
 import {
@@ -10,6 +9,10 @@ import {
   PaginationFooter,
   SearchBar,
 } from '@/components/entity-list';
+import {
+  HtmlContentEditor,
+  isFullHtmlDocument,
+} from '@/components/html-content-editor';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -59,6 +62,7 @@ import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
 import { useApp } from '@hed-hog/next-app-provider';
 import {
+  AlertCircle,
   Database,
   Download,
   FileDown,
@@ -67,22 +71,9 @@ import {
   Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
-const RichTextEditor = dynamic(
-  () =>
-    import('@/components/rich-text-editor').then((mod) => ({
-      default: mod.RichTextEditor,
-    })),
-  {
-    ssr: false,
-    loading: () => (
-      <div className="min-h-48 bg-muted rounded-md animate-pulse" />
-    ),
-  }
-);
-
 interface Mail {
   id: number;
   slug: string;
@@ -105,6 +96,70 @@ interface ImportResponse {
   templates?: number[];
 }
 
+/**
+ * Renderiza o preview no servidor, pelo mesmo caminho do envio real
+ * (interpolação Handlebars + layout base), com debounce para não disparar uma
+ * requisição por tecla digitada.
+ */
+function useMailPreview({
+  enabled,
+  subject,
+  body,
+  variables,
+  locale,
+  request,
+}: {
+  enabled: boolean;
+  subject: string;
+  body: string;
+  variables: Record<string, string>;
+  locale: string;
+  request: ReturnType<typeof useApp>['request'];
+}) {
+  const [html, setHtml] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    if (!body.trim()) {
+      setHtml('');
+      return;
+    }
+
+    const controller = new AbortController();
+    const timer = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const response = await request<{ html: string }>({
+          url: '/mail/preview',
+          method: 'POST',
+          params: { locale },
+          data: { subject, body, variables },
+          signal: controller.signal,
+          showErrors: false,
+        });
+        setHtml(response.data?.html || '');
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          console.error('Error rendering mail preview:', error);
+        }
+      } finally {
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
+      }
+    }, 400);
+
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [enabled, subject, body, variables, locale, request]);
+
+  return { html, loading };
+}
+
 export default function EmailTemplatesPage() {
   const { locales, request, currentLocaleCode, getSettingValue } = useApp();
   const t = useTranslations('core.MailPage');
@@ -204,6 +259,34 @@ export default function EmailTemplatesPage() {
     }
   }, [testEmailRecipient]);
 
+  const { html: previewHtml, loading: previewLoading } = useMailPreview({
+    enabled: isDialogOpen,
+    subject: formData.subject,
+    body: formData.body,
+    variables: variableTestValues,
+    locale: selectedLocaleCode,
+    request,
+  });
+
+  const { html: testPreviewHtml } = useMailPreview({
+    enabled: isTestEmailDialogOpen,
+    subject: formData.subject,
+    body: formData.body,
+    variables: testEmailVariableValues,
+    locale: selectedLocaleCode,
+    request,
+  });
+
+  const bodyBypassesLayout = useMemo(
+    () => isFullHtmlDocument(formData.body),
+    [formData.body]
+  );
+
+  const editorVariables = useMemo(
+    () => formData.variables.map((name) => ({ label: `{{${name}}}` })),
+    [formData.variables]
+  );
+
   const handleCreate = () => {
     setEditMode(false);
     setSelectedTemplate(null);
@@ -631,49 +714,6 @@ export default function EmailTemplatesPage() {
     }
   };
 
-  const replaceVariablesInHTML = (html: string) => {
-    let result = html;
-    Object.entries(variableTestValues).forEach(([variable, value]) => {
-      if (value) {
-        const regex = new RegExp(`{{\\s*${variable}\\s*}}`, 'g');
-        result = result.replace(regex, value);
-      }
-    });
-    return result;
-  };
-
-  const renderHTMLPreview = (html: string) => {
-    const processedHtml = replaceVariablesInHTML(html);
-    return `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <meta charset="UTF-8">
-          <style>
-            body {
-              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-              line-height: 1.6;
-              color: #333;
-              max-width: 600px;
-              margin: 0 auto;
-              padding: 20px;
-            }
-            a {
-              color: #0066cc;
-              text-decoration: none;
-            }
-            a:hover {
-              text-decoration: underline;
-            }
-          </style>
-        </head>
-        <body>
-          ${processedHtml}
-        </body>
-      </html>
-    `;
-  };
-
   const handleImportClick = () => {
     const input = document.createElement('input');
     input.type = 'file';
@@ -904,7 +944,7 @@ export default function EmailTemplatesPage() {
             </SheetDescription>
           </SheetHeader>
           <form onSubmit={handleSubmit} className="space-y-6">
-            <div className="grid grid-cols-2 gap-6">
+            <div className="grid grid-cols-3 gap-6">
               <div className="space-y-4 overflow-y-auto max-h-[calc(90vh-200px)] pr-4">
                 <div className="space-y-2">
                   <Label htmlFor="slug">{t('slugLabel')}</Label>
@@ -947,56 +987,12 @@ export default function EmailTemplatesPage() {
                   </p>
                 </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="body">{t('bodyLabel')}</Label>
-                  <RichTextEditor
-                    key={selectedLocaleCode}
-                    value={formData.body}
-                    onChange={(value) =>
-                      setFormData({ ...formData, body: value })
-                    }
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-4">
-                <div className="absolute top-4 right-8 space-y-2">
-                  <Label htmlFor="locale-select">{t('localeLabel')}</Label>
-                  <Select
-                    value={selectedLocaleCode}
-                    onValueChange={handleLocaleChange}
-                  >
-                    <SelectTrigger id="locale-select" className="bg-background">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {locales.map((locale) => (
-                        <SelectItem key={locale.code} value={locale.code}>
-                          {locale.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="space-y-2">
-                  <Label>{t('preview')}</Label>
-                  <div className="rounded-lg border bg-white overflow-auto max-h-[calc(90vh-280px)]">
-                    <iframe
-                      srcDoc={renderHTMLPreview(formData.body)}
-                      className="w-full min-h-125 border-0"
-                      title="Email Preview"
-                      style={{ colorScheme: 'light' }}
-                    />
-                  </div>
-                </div>
-
                 {formData.variables.length > 0 && (
-                  <div className="mt-4">
-                    <h4 className="mb-2 text-sm font-semibold">
+                  <div className="space-y-2">
+                    <h4 className="text-sm font-semibold">
                       {t('availableVariables')}
                     </h4>
-                    <div className="space-y-2 grid grid-cols-2">
+                    <div className="space-y-2">
                       {formData.variables.map((v, idx) => (
                         <div key={idx} className="flex items-center gap-2">
                           <Badge
@@ -1022,6 +1018,57 @@ export default function EmailTemplatesPage() {
                   </div>
                 )}
               </div>
+
+              <div className="col-span-2 space-y-4">
+                <div className="absolute top-4 right-8 space-y-2">
+                  <Label htmlFor="locale-select">{t('localeLabel')}</Label>
+                  <Select
+                    value={selectedLocaleCode}
+                    onValueChange={handleLocaleChange}
+                  >
+                    <SelectTrigger id="locale-select" className="bg-background">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {locales.map((locale) => (
+                        <SelectItem key={locale.code} value={locale.code}>
+                          {locale.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="body">{t('bodyLabel')}</Label>
+                  <HtmlContentEditor
+                    key={selectedLocaleCode}
+                    value={formData.body}
+                    onChange={(value) =>
+                      setFormData({ ...formData, body: value })
+                    }
+                    variables={editorVariables}
+                    previewHtml={previewHtml}
+                    previewLoading={previewLoading}
+                    zoomStorageKey="mail-template-html-editor-zoom"
+                    className="h-[calc(90vh-260px)]"
+                    warnings={
+                      bodyBypassesLayout ? (
+                        <div className="flex items-start gap-2 rounded-lg border border-amber-400/30 bg-amber-50 p-2.5 text-xs text-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
+                          <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                          <span>
+                            <span className="font-medium">
+                              {t('fullDocumentWarningTitle')}
+                            </span>
+                            {' — '}
+                            {t('fullDocumentWarningDesc')}
+                          </span>
+                        </div>
+                      ) : null
+                    }
+                  />
+                </div>
+              </div>
             </div>
 
             <div className="flex justify-between items-center pt-4 border-t">
@@ -1127,21 +1174,8 @@ export default function EmailTemplatesPage() {
               <Label>{t('emailPreview')}</Label>
               <div className="rounded-lg border bg-white overflow-hidden max-h-100">
                 <iframe
-                  srcDoc={renderHTMLPreview(
-                    Object.entries(testEmailVariableValues).reduce(
-                      (html, [variable, value]) => {
-                        if (value) {
-                          const regex = new RegExp(
-                            `{{\\s*${variable}\\s*}}`,
-                            'g'
-                          );
-                          return html.replace(regex, value);
-                        }
-                        return html;
-                      },
-                      formData.body
-                    )
-                  )}
+                  srcDoc={testPreviewHtml}
+                  sandbox=""
                   className="w-full min-h-100 border-0"
                   title="Email Test Preview"
                   style={{ colorScheme: 'light' }}