From 485263903fa2cb83d45f9b237672de897a6f82fc Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 3 Jan 2026 08:53:31 +0700
Subject: [PATCH] Add order_created email template with QR code section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This migration updates the order_created email template to include:
- QR code image display for payment
- Order summary section with all details
- Payment link button
- QR expiry time display
- Professional layout and styling

The template uses these shortcodes:
- {qr_code_image} - Base64 QR code image generated by send-notification
- {qr_expiry_time} - QR code expiration timestamp
- {nama}, {email}, {order_id}, {tanggal_pesanan}
- {total}, {metode_pembayaran}, {produk}
- {payment_link}, {thank_you_page}, {platform_name}

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 ..._update_order_created_template_with_qr.sql | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 supabase/migrations/20250103000001_update_order_created_template_with_qr.sql

diff --git a/supabase/migrations/20250103000001_update_order_created_template_with_qr.sql b/supabase/migrations/20250103000001_update_order_created_template_with_qr.sql
new file mode 100644
index 0000000..6b8a8fe
--- /dev/null
+++ b/supabase/migrations/20250103000001_update_order_created_template_with_qr.sql
@@ -0,0 +1,86 @@
+-- Update order_created email template to include QR code
+-- This migration adds the QR code section to the order confirmation email
+
+UPDATE notification_templates
+SET
+  body_html = '
+<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
+  <h2 style="color: #333;">Konfirmasi Pesanan</h2>
+
+  <p>Halo {nama},</p>
+
+  <p>Terima kasih telah melakukan pemesanan! Berikut adalah detail pesanan Anda:</p>
+
+  <!-- QR Code Section -->
+  <div style="text-align: center; margin: 30px 0; padding: 20px; background-color: #f5f5f5; border-radius: 8px;">
+    <h3 style="margin: 0 0 15px 0; font-size: 18px; color: #333;">Scan QR untuk Pembayaran</h3>
+
+    <!-- QR Code Image -->
+    <img src="{qr_code_image}" alt="QRIS Payment QR Code" style="width: 200px; height: 200px; border: 2px solid #000; padding: 10px; background-color: #fff; display: inline-block;" />
+
+    <p style="margin: 15px 0 5px 0; font-size: 14px; color: #666;">
+      Scan dengan aplikasi e-wallet atau mobile banking Anda
+    </p>
+
+    <p style="margin: 5px 0 0 0; font-size: 12px; color: #999;">
+      Berlaku hingga: {qr_expiry_time}
+    </p>
+
+    <div style="margin-top: 15px;">
+      <a href="{payment_link}" style="display: inline-block; padding: 12px 24px; background-color: #000; color: #fff; text-decoration: none; border-radius: 4px; font-weight: bold;">
+        Bayar Sekarang
+      </a>
+    </div>
+  </div>
+
+  <!-- Order Summary Section -->
+  <div style="margin: 30px 0; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
+    <h3 style="margin: 0 0 15px 0; font-size: 16px; color: #333;">Detail Pesanan</h3>
+
+    <p style="margin: 5px 0; font-size: 14px;">
+      <strong>Order ID:</strong> {order_id}
+    </p>
+
+    <p style="margin: 5px 0; font-size: 14px;">
+      <strong>Tanggal:</strong> {tanggal_pesanan}
+    </p>
+
+    <p style="margin: 5px 0; font-size: 14px;">
+      <strong>Produk:</strong> {produk}
+    </p>
+
+    <p style="margin: 5px 0; font-size: 14px;">
+      <strong>Metode Pembayaran:</strong> {metode_pembayaran}
+    </p>
+
+    <p style="margin: 15px 0 5px 0; font-size: 16px; font-weight: bold; color: #000;">
+      Total: {total}
+    </p>
+  </div>
+
+  <p style="font-size: 14px; color: #666;">
+    Silakan selesaikan pembayaran Anda sebelum waktu habis. Setelah pembayaran berhasil, akses ke produk akan segera aktif.
+  </p>
+
+  <p style="font-size: 14px;">
+    Jika Anda memiliki pertanyaan, jangan ragu untuk menghubungi kami.
+  </p>
+
+  <p style="font-size: 14px;">
+    Terima kasih,<br>
+    Tim {platform_name}
+  </p>
+</div>
+',
+  updated_at = NOW()
+WHERE key = 'order_created';
+
+-- Verify the update
+SELECT
+  key,
+  subject,
+  is_active,
+  LEFT(body_html, 100) as body_preview,
+  updated_at
+FROM notification_templates
+WHERE key = 'order_created';