From 4bb6e8d08c2e68db51fe96aaf2cef46733ad6844 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Mon, 22 Dec 2025 21:01:04 +0700
Subject: [PATCH] Fix null reference error in EmailTemplatePreview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add conditional rendering for previewTemplate to prevent null reference
- Add null checks in EmailTemplatePreview component for template properties
- Fix shortcodes filtering to handle null template properties
- Remove non-null assertion operator and use proper conditional rendering

Fixes: "Cannot read properties of null (reading 'email_subject')" error

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/admin/EmailTemplatePreview.tsx   |  9 ++++++---
 src/components/admin/settings/NotifikasiTab.tsx | 16 +++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/admin/EmailTemplatePreview.tsx b/src/components/admin/EmailTemplatePreview.tsx
index 25aa838..d067dd9 100644
--- a/src/components/admin/EmailTemplatePreview.tsx
+++ b/src/components/admin/EmailTemplatePreview.tsx
@@ -47,8 +47,10 @@ export function EmailTemplatePreview({
 
   // Generate preview with dummy shortcode data
   const generatePreview = () => {
-    const processedSubject = ShortcodeProcessor.process(template.email_subject);
-    const processedContent = ShortcodeProcessor.process(template.email_body_html);
+    if (!template) return '<div>No template selected</div>';
+
+    const processedSubject = ShortcodeProcessor.process(template.email_subject || '');
+    const processedContent = ShortcodeProcessor.process(template.email_body_html || '');
 
     if (previewMode === 'master') {
       const fullHtml = EmailTemplateRenderer.render({
@@ -190,7 +192,8 @@ export function EmailTemplatePreview({
               {['{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 =>
-                 template.email_subject.includes(shortcode) || template.email_body_html.includes(shortcode)
+                 (template.email_subject && template.email_subject.includes(shortcode)) ||
+                 (template.email_body_html && template.email_body_html.includes(shortcode))
               ).map(shortcode => (
                 <code key={shortcode} className="bg-blue-100 px-2 py-1 rounded text-xs">
                   {shortcode}
diff --git a/src/components/admin/settings/NotifikasiTab.tsx b/src/components/admin/settings/NotifikasiTab.tsx
index 0a2fe6a..ef8b949 100644
--- a/src/components/admin/settings/NotifikasiTab.tsx
+++ b/src/components/admin/settings/NotifikasiTab.tsx
@@ -679,13 +679,15 @@ export function NotifikasiTab() {
       </Card>
 
       {/* Modal Email Preview */}
-      <EmailTemplatePreview
-        template={previewTemplate!}
-        open={isPreviewOpen}
-        onClose={() => setIsPreviewOpen(false)}
-        onTest={sendTestEmail}
-        isTestSending={testingTemplate === previewTemplate?.id}
-      />
+      {previewTemplate && (
+        <EmailTemplatePreview
+          template={previewTemplate}
+          open={isPreviewOpen}
+          onClose={() => setIsPreviewOpen(false)}
+          onTest={sendTestEmail}
+          isTestSending={testingTemplate === previewTemplate.id}
+        />
+      )}
     </div>
   );
 }