added a summary step after redeem

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");
+}

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>