From aba777773c96fba9f0393f96639a1d975dcdd30b Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@hebeler.club>
Date: Mon, 21 Nov 2022 14:57:31 +0100
Subject: [PATCH] added a summary step after redeem

---
 pass/resources/js/checkout.js    | 14 +++++++++++++-
 pass/views/checkout/checkout.ejs | 21 +++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/pass/resources/js/checkout.js b/pass/resources/js/checkout.js
index 888a69a..f79c2cd 100644
--- a/pass/resources/js/checkout.js
+++ b/pass/resources/js/checkout.js
@@ -193,7 +193,14 @@ function four_finish_purchase() {
       body: JSON.stringify(post_data),
     }).then(response => response.json())
       .then(response => {
-
+        // Show Summary and fill data for it
+        let dayjs = require('dayjs');
+        document.querySelector("#redeem-successful .key").textContent = response.metager_pass_key.key;
+        document.querySelector("#redeem-successful .searches").textContent = response.metager_pass_key.searches;
+        document.querySelector("#redeem-successful .valid-until").textContent = dayjs(response.metager_pass_key.expire_at).format("DD.MM.YYYY HH:mm:ss");
+        current_step_container.classList.remove("current");
+        current_step_container.classList.add("finished");
+        five_summary();
         console.log(response);
       }).catch(reason => {
         e.target.disabled = false;
@@ -202,3 +209,8 @@ function four_finish_purchase() {
       });
   });
 }
+
+function five_summary() {
+  let current_step_container = document.getElementById("summary");
+  current_step_container.classList.add("current");
+}
diff --git a/pass/views/checkout/checkout.ejs b/pass/views/checkout/checkout.ejs
index d58a123..833c5e7 100644
--- a/pass/views/checkout/checkout.ejs
+++ b/pass/views/checkout/checkout.ejs
@@ -121,10 +121,31 @@
                         <div>
                             <input type="text" name="metager-pass-key" id="metager-pass-key">
                             <button id="recharge-key-button">MetaGer-Pass Schlüssel aufladen</button>
+
+
                         </div>
                     </div>
                 </div>
             </div>
+            <div id="summary" class="step">
+                <div class="section-heading">
+                    <div class="status">
+                        <div class="finished">✓</div>
+                    </div>
+                    <div class="content">Zusammenfassung</div>
+                    <div class="location">Lokal</div>
+                </div>
+                <div class="section-body">
+                    <div id="redeem-successful">
+                        <h1>Vielen Dank für Ihren Einkauf!</h1>
+                        <ul id="redeem-summary">
+                            <li>MetaGer-Pass Schlüssel: <span class="key"></span></li>
+                            <li>Suchanfragen: <span class="searches"></span></li>
+                            <li>Gültig Bis: <span class="valid-until"></span></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
         </div>
     </main>
 
-- 
GitLab