From 3cbbde1fe486cc6381da201f9b059bb0242078f7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 21 May 2021 14:22:22 +0100
Subject: [PATCH] Render email template inside iframe and render custom
 templates inside base template

---
 .../src/components/start/AppCard.svelte       |  2 --
 .../src/components/start/AppRow.svelte        |  1 -
 .../portal/manage/email/[template].svelte     | 32 +++++++++++++++----
 packages/builder/src/stores/portal/email.js   |  2 +-
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index b7e593b7e2..0d7b155f2a 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -9,8 +9,6 @@
     StatusLight,
   } from "@budibase/bbui"
   import { gradient } from "actions"
-  import { auth } from "stores/portal"
-  import { AppStatus } from "constants"
 
   export let app
   export let exportApp
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 00daeb6ba1..8bc24be624 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -8,7 +8,6 @@
     MenuItem,
     StatusLight,
   } from "@budibase/bbui"
-  import { auth } from "stores/portal"
 
   export let app
   export let exportApp
diff --git a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte b/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
index b3613a09a1..182201d2ba 100644
--- a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
@@ -22,11 +22,13 @@
   let htmlEditor
   let mounted = false
 
-  $: selectedTemplate = $email?.templates?.find(
+  $: selectedTemplate = $email.templates?.find(
     ({ purpose }) => purpose === template
   )
+  $: baseTemplate = $email.templates?.find(({ purpose }) => purpose === "base")
   $: templateBindings =
     $email.definitions?.bindings?.[selectedTemplate.purpose] || []
+  $: previewContent = makePreviewContent(baseTemplate, selectedTemplate)
 
   async function saveTemplate() {
     try {
@@ -41,12 +43,23 @@
   function setTemplateBinding(binding) {
     htmlEditor.update((selectedTemplate.contents += `{{ ${binding.name} }}`))
   }
+
+  const makePreviewContent = (baseTemplate, selectedTemplate) => {
+    if (!selectedTemplate) {
+      return ""
+    }
+    if (selectedTemplate.purpose === "base") {
+      return selectedTemplate.contents
+    }
+    const base = baseTemplate?.contents ?? ""
+    return base.replace("{{ body }}", selectedTemplate?.contents ?? "")
+  }
+
   onMount(() => {
     mounted = true
   })
 
   async function fixMountBug({ detail }) {
-    console.log(detail)
     if (detail === "Edit") {
       await tick()
       mounted = true
@@ -112,11 +125,11 @@
             </Tabs>
           {/if}
         </div>
-      </div></Tab
-    >
+      </div>
+    </Tab>
     <Tab title="Preview">
       <div class="preview">
-        {@html selectedTemplate?.contents}
+        <iframe srcdoc={previewContent} />
       </div>
     </Tab>
   </Tabs>
@@ -138,8 +151,13 @@
   }
 
   .preview {
-    background: white;
     height: 800px;
-    padding: var(--spacing-xl);
+    padding: var(--spacing-xl) 0;
+    position: relative;
+  }
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
   }
 </style>
diff --git a/packages/builder/src/stores/portal/email.js b/packages/builder/src/stores/portal/email.js
index 3adc4a5132..4ec6d72d3e 100644
--- a/packages/builder/src/stores/portal/email.js
+++ b/packages/builder/src/stores/portal/email.js
@@ -2,7 +2,7 @@ import { writable } from "svelte/store"
 import api from "builderStore/api"
 
 export function createEmailStore() {
-  const store = writable([])
+  const store = writable({})
 
   return {
     subscribe: store.subscribe,