Changes

src/components/admin/settings/NotifikasiTab.tsx

@@ -41,14 +41,49 @@ const SHORTCODES_HELP = {
   event: ['{judul_event}', '{tanggal_event}', '{jam_event}', '{link_event}'],
 };
 
-const DEFAULT_TEMPLATES = [
-  { key: 'payment_success', name: 'Pembayaran Berhasil' },
-  { key: 'access_granted', name: 'Akses Produk Diberikan' },
-  { key: 'order_created', name: 'Pesanan Dibuat' },
-  { key: 'payment_reminder', name: 'Pengingat Pembayaran' },
-  { key: 'consulting_scheduled', name: 'Konsultasi Terjadwal' },
-  { key: 'event_reminder', name: 'Reminder Webinar/Bootcamp' },
-  { key: 'bootcamp_progress', name: 'Progress Bootcamp' },
+const DEFAULT_TEMPLATES: { key: string; name: string; defaultSubject: string; defaultBody: string }[] = [
+  { 
+    key: 'payment_success', 
+    name: 'Pembayaran Berhasil',
+    defaultSubject: 'Pembayaran Berhasil - Order #{order_id}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Terima kasih, pembayaran Anda sebesar <strong>{total}</strong> telah berhasil dikonfirmasi.</p><p><strong>Detail Pesanan:</strong></p><ul><li>Order ID: {order_id}</li><li>Tanggal: {tanggal_pesanan}</li><li>Metode: {metode_pembayaran}</li></ul><p>Produk: {produk}</p>'
+  },
+  { 
+    key: 'access_granted', 
+    name: 'Akses Produk Diberikan',
+    defaultSubject: 'Akses Anda Sudah Aktif - {produk}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Selamat! Akses Anda ke <strong>{produk}</strong> sudah aktif.</p><p><a href="{link_akses}" style="display:inline-block;padding:12px 24px;background:#0066cc;color:white;text-decoration:none;border-radius:6px;">Akses Sekarang</a></p>'
+  },
+  { 
+    key: 'order_created', 
+    name: 'Pesanan Dibuat',
+    defaultSubject: 'Pesanan Anda #{order_id} Sedang Diproses',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Pesanan Anda dengan nomor <strong>{order_id}</strong> telah kami terima.</p><p>Total: <strong>{total}</strong></p><p>Silakan selesaikan pembayaran sebelum batas waktu.</p>'
+  },
+  { 
+    key: 'payment_reminder', 
+    name: 'Pengingat Pembayaran',
+    defaultSubject: 'Jangan Lupa Bayar - Order #{order_id}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Pesanan Anda dengan nomor <strong>{order_id}</strong> menunggu pembayaran.</p><p>Total: <strong>{total}</strong></p><p>Segera selesaikan pembayaran agar tidak kedaluwarsa.</p>'
+  },
+  { 
+    key: 'consulting_scheduled', 
+    name: 'Konsultasi Terjadwal',
+    defaultSubject: 'Konsultasi Anda Sudah Terjadwal - {tanggal_konsultasi}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Sesi konsultasi Anda telah dikonfirmasi:</p><ul><li>Tanggal: <strong>{tanggal_konsultasi}</strong></li><li>Jam: <strong>{jam_konsultasi}</strong></li></ul><p>Link meeting: <a href="{link_meet}">{link_meet}</a></p><p>Jika ada pertanyaan, hubungi kami.</p>'
+  },
+  { 
+    key: 'event_reminder', 
+    name: 'Reminder Webinar/Bootcamp',
+    defaultSubject: 'Reminder: {judul_event} Dimulai {tanggal_event}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Jangan lupa, <strong>{judul_event}</strong> akan dimulai:</p><ul><li>Tanggal: {tanggal_event}</li><li>Jam: {jam_event}</li></ul><p><a href="{link_event}" style="display:inline-block;padding:12px 24px;background:#0066cc;color:white;text-decoration:none;border-radius:6px;">Bergabung</a></p>'
+  },
+  { 
+    key: 'bootcamp_progress', 
+    name: 'Progress Bootcamp',
+    defaultSubject: 'Update Progress Bootcamp Anda',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Ini adalah update progress bootcamp Anda.</p><p>Terus semangat belajar!</p>'
+  },
 ];
 
 const emptySmtp: SmtpSettings = {
@@ -94,8 +129,8 @@ export function NotifikasiTab() {
       key: t.key,
       name: t.name,
       is_active: false,
-      email_subject: '',
-      email_body_html: '',
+      email_subject: t.defaultSubject,
+      email_body_html: t.defaultBody,
       webhook_url: '',
     }));
     const { data, error } = await supabase.from('notification_templates').insert(toInsert).select();
@@ -261,8 +296,8 @@ export function NotifikasiTab() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="text-sm text-muted-foreground p-3 bg-muted rounded-md">
-            <p className="font-medium mb-2">Shortcode yang tersedia:</p>
+          <div className="text-sm text-muted-foreground p-3 bg-muted rounded-md space-y-2">
+            <p className="font-medium">Shortcode yang tersedia:</p>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
               <div>
                 <span className="font-medium">Umum:</span> {SHORTCODES_HELP.common.join(', ')}
@@ -277,6 +312,11 @@ export function NotifikasiTab() {
                 <span className="font-medium">Event:</span> {SHORTCODES_HELP.event.join(', ')}
               </div>
             </div>
+            <p className="text-xs mt-2 p-2 bg-background rounded border">
+              <strong>Penting:</strong> Toggle "Aktifkan" hanya mengontrol pengiriman email. 
+              Jika <code>webhook_url</code> diisi, sistem tetap akan mengirim payload ke URL tersebut 
+              meskipun email dinonaktifkan.
+            </p>
           </div>
 
           {templates.map((template) => (