From 66056cbf0bc119f1b3001b9d9f6534b60878feb1 Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badrihippo@gmail.com>
Date: Fri, 28 May 2021 21:37:22 +0530
Subject: [PATCH] Add "Hit send" button

The button doesn't actually do anything yet, but hopefully it will,
very soon!
---
 src/App.svelte | 41 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 4660976..8725c29 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -191,6 +191,10 @@
 	function next() {
 		step += 1
 	}
+
+	function prev() {
+		step -= 1
+	}
 </script>
 
 <main>
@@ -198,8 +202,8 @@
 	<h1>Chip <span class="highlight">Choc</span></h1>
 	<h2>Cookie-cutter emails made easy.</h2>
 
-	{#if step != 0}
-	<h3 class="mt-3">Step {step}</h3>
+	{#if step >= 1}
+	<h3 class="mt-3">Step 1</h3>
 	{/if}
 
 	{#if step == 0}
@@ -224,6 +228,7 @@
 	{/if}
 
 	{#if step >= 2}
+	<h3 class="mt-3">Step 1</h3>
 	<div class="instructions">
 		<p>Now, fill in the fields for each user. (You can also copy-paste rows and columns directly from Air, if the ordering is right!)</p>
 	</div>
@@ -239,11 +244,39 @@
 
 	<div id="editor" bind:this={editor}></div>
 
-	{#if step == 2 && !!cookiePreviewText}
+	{#if step >= 2 && !!cookiePreviewData}
 	<h4 class="mt-3">Preview</h4>
-	<div class="cookie-preview">{@html converter.makeHtml(cookiePreviewText)}</div>
+
+	<div class="cookie-preview">
+		<div class="preview-header">
+			<p>From: {fromEmail || '[NOBODY!!!]'}</p>
+			<p>To: {cookiePreviewData.email || '[NOBODY!!!]'}</p>
+			<hr />
+		</div>
+		{@html converter.makeHtml(cookiePreviewData.text)}
+	</div>
 	<button on:click={decrementPreviewRow}>&lt; Prev</button>
 	<button on:click={incrementPreviewRow}>Next &gt;</button>
+
+	<h3>Step 3</h3>
+
+		{#if step == 2}
+		<div class="instructions">
+			<p>If everything looks okay, then we're done! Click on the button below to put the cutter in action.</p>
+		</div>
+		<button on:click={next}>Yup, send 'em out!</button>
+		{/if}
+
+		{#if step == 3}
+		<div class="instructions">
+			<p>Are you <strong>sure</strong> you want to send them out?</p>
+			<p>Are you ready?</p>
+			<p>Did you look through all the previews?</p>
+			<p>Have you double-checked the names and email IDs to make sure they match?</p>
+		</div>
+		<button>Hit send!</button> <button on:click={prev}>Ummmm..</button>
+		{/if}
+
 	{/if}
 
 </main>