Fix email template preview UX and add comprehensive shortcodes

1. Remove duplicate close button in preview modal - Removed extra X button in DialogHeader since Dialog already has close functionality 2. Fix test email to include master layout - Process shortcodes and render with master template before sending - Import EmailTemplateRenderer and ShortcodeProcessor in sendTestEmail - Send complete HTML email with header, footer, and styling applied 3. Add comprehensive table shortcodes for all notification types - User info: {nama}, {email} - Order info: {order_id}, {tanggal_pesanan}, {total}, {metode_pembayaran}, {status_pesanan}, {invoice_url} - Product info: {produk}, {kategori_produk}, {harga_produk}, {deskripsi_produk} - Access info: {link_akses}, {username_akses}, {password_akses}, {kadaluarsa_akses} - Consulting: {tanggal_konsultasi}, {jam_konsultasi}, {durasi_konsultasi}, {jenis_konsultasi}, {topik_konsultasi} - Event: {judul_event}, {tanggal_event}, {jam_event}, {link_event}, {lokasi_event}, {kapasitas_event} - Bootcamp: {judul_bootcamp}, {progres_bootcamp}, {modul_selesai}, {modul_selanjutnya}, {link_progress} - Company: {nama_perusahaan}, {website_perusahaan}, {email_support}, {telepon_support} - Payment: {bank_tujuan}, {nomor_rekening}, {atas_nama}, {jumlah_pembayaran}, {batas_pembayaran} 4. Improve shortcode UI display - Scrollable shortcode list with better organization - Show available shortcodes summary - Categorize shortcodes by type (User, Orders, Products, etc.) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-22 21:13:09 +07:00
parent 4bb6e8d08c
commit 0668ed22a7
3 changed files with 99 additions and 17 deletions
--- a/src/components/admin/EmailTemplatePreview.tsx
+++ b/src/components/admin/EmailTemplatePreview.tsx
@@ -88,13 +88,6 @@ export function EmailTemplatePreview({
          <DialogDescription>
            Preview template email dengan master styling
          </DialogDescription>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onClose}
-          >
-            <X className="w-4 h-4" />
-          </Button>
        </DialogHeader>

        <div className="space-y-4">
@@ -188,10 +181,28 @@ export function EmailTemplatePreview({
          {/* Shortcodes Used */}
          <div className="p-3 bg-blue-50 border border-blue-200 rounded">
            <h4 className="font-semibold text-sm mb-2">Shortcodes Used in This Template:</h4>
-            <div className="grid grid-cols-2 gap-2 text-sm">
-              {['{nama}', '{email}', '{order_id}', '{tanggal_pesanan}', '{total}', '{metode_pembayaran}',
-               '{produk}', '{link_akses}', '{tanggal_konsultasi}', '{jam_konsultasi}', '{link_meet}',
-               '{judul_event}', '{tanggal_event}', '{jam_event}', '{link_event}'].filter(shortcode =>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm max-h-32 overflow-y-auto">
+              {[
+                // User information
+                '{nama}', '{email}',
+                // Order information
+                '{order_id}', '{tanggal_pesanan}', '{total}', '{metode_pembayaran}', '{status_pesanan}', '{invoice_url}',
+                // Product information
+                '{produk}', '{kategori_produk}', '{harga_produk}', '{deskripsi_produk}',
+                // Access information
+                '{link_akses}', '{username_akses}', '{password_akses}', '{kadaluarsa_akses}',
+                // Consulting information
+                '{tanggal_konsultasi}', '{jam_konsultasi}', '{durasi_konsultasi}', '{link_meet}',
+                '{jenis_konsultasi}', '{topik_konsultasi}',
+                // Event information
+                '{judul_event}', '{tanggal_event}', '{jam_event}', '{link_event}', '{lokasi_event}', '{kapasitas_event}',
+                // Bootcamp/Course information
+                '{judul_bootcamp}', '{progres_bootcamp}', '{modul_selesai}', '{modul_selanjutnya}', '{link_progress}',
+                // Company information
+                '{nama_perusahaan}', '{website_perusahaan}', '{email_support}', '{telepon_support}',
+                // Payment information
+                '{bank_tujuan}', '{nomor_rekening}', '{atas_nama}', '{jumlah_pembayaran}', '{batas_pembayaran}'
+              ].filter(shortcode =>
                (template.email_subject && template.email_subject.includes(shortcode)) ||
                (template.email_body_html && template.email_body_html.includes(shortcode))
              ).map(shortcode => (
@@ -200,6 +211,21 @@ export function EmailTemplatePreview({
                </code>
              ))}
            </div>
+            {((template.email_subject && template.email_subject.includes('{')) ||
+              (template.email_body_html && template.email_body_html.includes('{'))) && (
+              <div className="mt-3 pt-3 border-t border-blue-200">
+                <p className="text-xs text-blue-700">
+                  <strong>All Available Shortcodes:</strong> User ({nama}, {email}), Orders ({order_id}, {tanggal_pesanan}, {total}, {metode_pembayaran}, {status_pesanan}, {invoice_url}),
+                  Products ({produk}, {kategori_produk}, {harga_produk}),
+                  Access ({link_akses}, {username_akses}, {password_akses}),
+                  Consulting ({tanggal_konsultasi}, {jam_konsultasi}, {link_meet}),
+                  Events ({judul_event}, {tanggal_event}, {link_event}),
+                  Bootcamp ({judul_bootcamp}, {progres_bootcamp}, {modul_selesai}),
+                  Payment ({bank_tujuan}, {nomor_rekening}, {jumlah_pembayaran}),
+                  Company ({nama_perusahaan}, {email_support})
+                </p>
+              </div>
+            )}
          </div>

          {/* Template Actions */}
--- a/src/components/admin/settings/NotifikasiTab.tsx
+++ b/src/components/admin/settings/NotifikasiTab.tsx
@@ -461,6 +461,18 @@ export function NotifikasiTab() {
        throw new Error('Konfigurasi email provider belum lengkap');
      }

+      // Import EmailTemplateRenderer and ShortcodeProcessor
+      const { EmailTemplateRenderer, ShortcodeProcessor } = await import('@/lib/email-templates/master-template');
+
+      // Process shortcodes and render with master template
+      const processedSubject = ShortcodeProcessor.process(template.email_subject || '');
+      const processedContent = ShortcodeProcessor.process(template.email_body_html || '');
+      const fullHtml = EmailTemplateRenderer.render({
+        subject: processedSubject,
+        content: processedContent,
+        brandName: 'ACCESS HUB'
+      });
+
      // Send test email using send-email-v2
      const { data, error } = await supabase.functions.invoke('send-email-v2', {
        body: {
@@ -468,8 +480,8 @@ export function NotifikasiTab() {
          api_token: emailData.api_token,
          from_name: emailData.from_name,
          from_email: emailData.from_email,
-          subject: template.email_subject,
-          html_body: template.email_body_html,
+          subject: processedSubject,
+          html_body: fullHtml,
        },
      });

--- a/src/lib/email-templates/master-template.ts
+++ b/src/lib/email-templates/master-template.ts
@@ -347,21 +347,65 @@ export const EmailComponents = {
 // Shortcode processor
 export class ShortcodeProcessor {
  private static readonly DEFAULT_DATA = {
+    // User information
    nama: 'John Doe',
    email: 'john@example.com',
+
+    // Order information
    order_id: 'ORD-123456',
    tanggal_pesanan: '22 Desember 2025',
    total: 'Rp 1.500.000',
    metode_pembayaran: 'Transfer Bank',
-    produk: 'Product Name',
+    status_pesanan: 'Diproses',
+    invoice_url: 'https://example.com/invoice/ORD-123456',
+
+    // Product information
+    produk: 'Digital Marketing Masterclass',
+    kategori_produk: 'Digital Marketing',
+    harga_produk: 'Rp 1.500.000',
+    deskripsi_produk: 'Kelas lengkap digital marketing dari pemula hingga mahir',
+
+    // Access information
    link_akses: 'https://example.com/access',
+    username_akses: 'john.doe',
+    password_akses: 'Temp123!',
+    kadaluarsa_akses: '22 Desember 2026',
+
+    // Consulting information
    tanggal_konsultasi: '22 Desember 2025',
    jam_konsultasi: '14:00',
+    durasi_konsultasi: '60 menit',
    link_meet: 'https://meet.google.com/example',
+    jenis_konsultasi: 'Digital Marketing Strategy',
+    topik_konsultasi: 'Social Media Marketing for Beginners',
+
+    // Event information
    judul_event: 'Workshop Digital Marketing',
    tanggal_event: '25 Desember 2025',
    jam_event: '19:00',
-    link_event: 'https://event.example.com'
+    link_event: 'https://event.example.com',
+    lokasi_event: 'Zoom Online',
+    kapasitas_event: '100 peserta',
+
+    // Bootcamp/Course information
+    judul_bootcamp: 'Digital Marketing Bootcamp',
+    progres_bootcamp: '75%',
+    modul_selesai: '15 dari 20 modul',
+    modul_selanjutnya: 'Final Assessment',
+    link_progress: 'https://example.com/progress',
+
+    // Company information
+    nama_perusahaan: 'ACCESS HUB',
+    website_perusahaan: 'https://accesshub.example.com',
+    email_support: 'support@accesshub.example.com',
+    telepon_support: '+62 812-3456-7890',
+
+    // Payment information
+    bank_tujuan: 'BCA',
+    nomor_rekening: '123-456-7890',
+    atas_nama: 'PT Access Hub Indonesia',
+    jumlah_pembayaran: 'Rp 1.500.000',
+    batas_pembayaran: '22 Desember 2025 23:59'
  };

  static process(content: string, customData: Record<string, string> = {}): string {