@hed-hog/core 0.0.387 → 0.0.393

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,
@@ -30,6 +33,12 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -43,6 +52,7 @@ import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Sheet,
   SheetDescription,
+  SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
@@ -59,6 +69,8 @@ import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
 import { useApp } from '@hed-hog/next-app-provider';
 import {
+  AlertCircle,
+  ChevronDown,
   Database,
   Download,
   FileDown,
@@ -67,22 +79,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 +104,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 +267,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 +722,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';
@@ -892,116 +940,97 @@ export default function EmailTemplatesPage() {
       />
 
       <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <ResizableSheetContent sheetId="mail-template-editor" defaultWidth={1152}>
-          <SheetHeader>
-            <SheetTitle>
-              {editMode ? t('editTemplate') : t('newTemplateTitle')}
-            </SheetTitle>
-            <SheetDescription>
-              {editMode
-                ? t('editTemplateDescription')
-                : t('newTemplateDescription')}
-            </SheetDescription>
-          </SheetHeader>
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <div className="grid grid-cols-2 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>
-                  <Input
-                    id="slug"
-                    value={formData.slug}
-                    onChange={(e) =>
-                      setFormData({ ...formData, slug: e.target.value })
-                    }
-                    placeholder={t('slugPlaceholder')}
-                    required
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="subject">{t('subjectLabel')}</Label>
-                  <Input
-                    id="subject"
-                    value={formData.subject}
-                    onChange={(e) =>
-                      setFormData({ ...formData, subject: e.target.value })
-                    }
-                    placeholder={t('subjectPlaceholder')}
-                    required
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="variables">{t('variablesLabel')}</Label>
-                  <TagsInput
-                    id="variables"
-                    value={formData.variables}
-                    onChange={(val) =>
-                      setFormData({ ...formData, variables: val })
-                    }
-                    placeholder={t('variablesPlaceholder')}
-                  />
-                  <p className="text-xs text-muted-foreground">
-                    {t('variablesHelp')}
-                  </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>
+        <ResizableSheetContent
+          sheetId="mail-template-editor"
+          defaultWidth={1152}
+          minWidth={760}
+          maxWidth={1440}
+          className="flex h-full min-h-0 w-full flex-col gap-0 overflow-hidden p-0"
+        >
+          <SheetHeader className="shrink-0 border-b px-4 py-4 text-left sm:px-6">
+            {/* pr-8: o botão de fechar do Radix fica em absolute top-4 right-4 */}
+            <div className="flex items-start gap-3 pr-8">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
+                <MailIcon className="h-5 w-5" />
+              </div>
+              <div className="min-w-0 space-y-1">
+                <SheetTitle>
+                  {editMode ? t('editTemplate') : t('newTemplateTitle')}
+                </SheetTitle>
+                <SheetDescription>
+                  {editMode
+                    ? t('editTemplateDescription')
+                    : t('newTemplateDescription')}
+                </SheetDescription>
               </div>
+            </div>
+          </SheetHeader>
 
-              <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>
+          <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
+            <div className="grid min-h-0 flex-1 grid-cols-1 overflow-y-auto lg:grid-cols-[minmax(260px,320px)_1fr] lg:overflow-hidden">
+              <div className="space-y-5 border-b px-4 py-4 sm:px-6 lg:min-h-0 lg:overflow-y-auto lg:border-b-0 lg:border-r">
+                <section className="space-y-3">
+                  <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {t('sectionIdentification')}
+                  </h3>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="slug">{t('slugLabel')}</Label>
+                    <Input
+                      id="slug"
+                      value={formData.slug}
+                      onChange={(e) =>
+                        setFormData({ ...formData, slug: e.target.value })
+                      }
+                      placeholder={t('slugPlaceholder')}
+                      className="font-mono text-sm"
+                      required
+                    />
+                  </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 className="space-y-1.5">
+                    <Label htmlFor="subject">{t('subjectLabel')}</Label>
+                    <Input
+                      id="subject"
+                      value={formData.subject}
+                      onChange={(e) =>
+                        setFormData({ ...formData, subject: e.target.value })
+                      }
+                      placeholder={t('subjectPlaceholder')}
+                      required
                     />
                   </div>
-                </div>
+                </section>
+
+                <section className="space-y-3">
+                  <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {t('variablesLabel')}
+                  </h3>
+
+                  <div className="space-y-1.5">
+                    <TagsInput
+                      id="variables"
+                      value={formData.variables}
+                      onChange={(val) =>
+                        setFormData({ ...formData, variables: val })
+                      }
+                      placeholder={t('variablesPlaceholder')}
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      {t('variablesHelp')}
+                    </p>
+                  </div>
 
-                {formData.variables.length > 0 && (
-                  <div className="mt-4">
-                    <h4 className="mb-2 text-sm font-semibold">
-                      {t('availableVariables')}
-                    </h4>
-                    <div className="space-y-2 grid grid-cols-2">
+                  {formData.variables.length > 0 && (
+                    <div className="space-y-2 rounded-lg border bg-muted/30 p-3">
+                      <p className="text-xs font-medium text-muted-foreground">
+                        {t('availableVariables')}
+                      </p>
                       {formData.variables.map((v, idx) => (
                         <div key={idx} className="flex items-center gap-2">
                           <Badge
                             variant="outline"
-                            className="font-mono min-w-30"
+                            className="w-32 shrink-0 justify-center bg-background font-mono"
                           >
                             {'{{' + v + '}}'}
                           </Badge>
@@ -1014,54 +1043,130 @@ export default function EmailTemplatesPage() {
                                 [v]: e.target.value,
                               })
                             }
-                            className="flex-1"
+                            className="h-9 min-w-0 flex-1 bg-background"
                           />
                         </div>
                       ))}
                     </div>
+                  )}
+                </section>
+              </div>
+
+              <div className="flex min-h-0 flex-col gap-3 px-4 py-4 sm:px-6">
+                <div className="flex flex-wrap items-end justify-between gap-3">
+                  <Label htmlFor="body">{t('bodyLabel')}</Label>
+                  <div className="flex items-center gap-2">
+                    <Label
+                      htmlFor="locale-select"
+                      className="text-xs font-normal text-muted-foreground"
+                    >
+                      {t('localeLabel')}
+                    </Label>
+                    <Select
+                      value={selectedLocaleCode}
+                      onValueChange={handleLocaleChange}
+                    >
+                      <SelectTrigger
+                        id="locale-select"
+                        className="h-9 w-45 bg-background"
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {locales.map((locale) => (
+                          <SelectItem key={locale.code} value={locale.code}>
+                            {locale.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </div>
-                )}
+                </div>
+
+                <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="min-h-100 flex-1"
+                  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 className="flex justify-between items-center pt-4 border-t">
-              <div className="flex gap-2">
+            <SheetFooter className="sticky bottom-0 shrink-0 flex-row flex-wrap items-center justify-between gap-3 border-t bg-background/95 px-4 py-3 backdrop-blur sm:justify-between sm:px-6">
+              <div className="flex items-center gap-2">
                 <Button
                   type="button"
                   variant="outline"
                   size="sm"
-                  onClick={() => {
-                    if (selectedTemplate) {
-                      downloadYAML(selectedTemplate);
-                    }
-                  }}
+                  onClick={handleSendTestEmail}
+                  disabled={!formData.subject.trim() || !formData.body.trim()}
                 >
-                  <Download className="mr-2 h-4 w-4" />
-                  {t('downloadYAML')}
+                  <MailIcon className="mr-2 h-4 w-4" />
+                  {t('sendTestEmail')}
                 </Button>
+
+                {/* Baixar YAML e Gerar Migration dependem de um template salvo. */}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button type="button" variant="outline" size="sm">
+                      {t('moreActions')}
+                      <ChevronDown className="ml-2 h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    <DropdownMenuItem
+                      disabled={!selectedTemplate}
+                      onSelect={() => {
+                        if (selectedTemplate) {
+                          downloadYAML(selectedTemplate);
+                        }
+                      }}
+                    >
+                      <Download className="mr-2 h-4 w-4" />
+                      {t('downloadYAML')}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      disabled={!selectedTemplate}
+                      onSelect={handleGenerateMigration}
+                    >
+                      <Database className="mr-2 h-4 w-4" />
+                      {t('generateMigration')}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+
+              <div className="flex items-center gap-2">
                 <Button
                   type="button"
                   variant="outline"
-                  size="sm"
-                  onClick={handleGenerateMigration}
+                  onClick={() => setIsDialogOpen(false)}
                 >
-                  <Database className="mr-2 h-4 w-4" />
-                  {t('generateMigration')}
+                  {t('cancel')}
                 </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={handleSendTestEmail}
-                >
-                  <MailIcon className="mr-2 h-4 w-4" />
-                  {t('sendTestEmail')}
+                <Button type="submit" className="min-w-32">
+                  {editMode ? t('saveChanges') : t('createTemplate')}
                 </Button>
               </div>
-              <Button type="submit" className="min-w-40">
-                {editMode ? t('saveChanges') : t('createTemplate')}
-              </Button>
-            </div>
+            </SheetFooter>
           </form>
         </ResizableSheetContent>
       </Sheet>
@@ -1127,21 +1232,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' }}