Add receipt viewer to account page

www/assets/css/app.css

@@ -271,6 +271,14 @@ Framework7 and FontAwesome both have a .fab class
     height: 30vh;
 }
 
+#receiptvieweriframe {
+    width: 100%;
+    height: calc(100% - var(--f7-navbar-height));
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
 @media all and (min-width: 1024px) {
     #trackMapContainer {
         height: calc(calc(100vh - calc(var(--f7-list-margin-vertical) * 2)) - var(--f7-navbar-height));

www/assets/js/account.js

@@ -306,4 +306,26 @@ function openCheckoutWindowToSaveCard(onaccountpage) {
     setTimeout(initAccountPage, 1000 * 60);
     setTimeout(initAccountPage, 1000 * 90);
     setTimeout(initAccountPage, 1000 * 120);
+}
+
+function loadReceiptHTMLIntoPopup(receiptid) {
+    app.dialog.preloader("Loading...");
+    apirequest(SETTINGS.apis.getreceipt, {
+        accountnumber: getStorage("accountnumber"),
+        accountkey: getStorage("accountkey"),
+        receiptid: receiptid
+    }, function (success) {
+        app.dialog.close();
+        if (success.status == "OK") {
+            $('#receiptvieweriframe').attr("src", "data:text/html," + encodeURIComponent(success.receipt.html));
+            app.popup.open("#receiptViewerPopup");
+        } else {
+            app.dialog.alert(success.msg, "Error");
+            sendErrorReport("Receipts", "Loading receipt", success.msg);
+        }
+    }, function (xhr, status, error) {
+        app.dialog.close();
+        app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later.", "Error");
+        sendErrorReport("Receipts", "Couldn't load receipt", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
+    }, "POST");
 }

www/pages/account.html

@@ -45,8 +45,17 @@
                                 <h2 id="loyaltyCreditBalanceHeading">...</h2>
                                 <img id="loyaltyBarcodeImg" style="width: 90%; max-width: 300px; padding: 1.2em; background: white; display: none;" />
                             </div>
-                            <div class="block">
-                                <div class="button hapticbtn popup-open button-outline" data-popup="#accountUpdatePopup"><i class="fas fa-edit fa-fw"></i> Update account details</div>
+                            <div class="row">
+                                <div class="col-100 medium-50">
+                                    <div class="block padding-half">
+                                        <a class="button hapticbtn button-fill" href="/receipts"><i class="fas fa-receipt fa-fw"></i> Receipts</a>
+                                    </div>
+                                </div>
+                                <div class="col-100 medium-50">
+                                    <div class="block padding-half">
+                                        <div class="button hapticbtn popup-open button-outline" data-popup="#accountUpdatePopup"><i class="fas fa-edit fa-fw"></i> Update account details</div>
+                                    </div>
+                                </div>
                             </div>
                             <div id="loyaltyErrorMessage"></div>
                             <div class="block margin-top">

www/pages/receipts.html

@@ -0,0 +1,60 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<div class="page" data-name="receipts">
+
+    <div class="navbar">
+        <div class="navbar-bg"></div>
+        <div class="navbar-inner">
+            <div class="left">
+                <a class="link back hapticbtn" href="#">
+                    <i class="icon icon-back"></i>
+                    <span class="if-not-md">Back</span>
+                </a>
+            </div>
+            <div class="title">Receipts</div>
+        </div>
+    </div>
+
+
+    <div class="page-content noselect">
+        <div class="row justify-content-center">
+            <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
+                <div class="list transparent media-list no-hairlines no-margin-top no-margin-bottom tablet-inset">
+                    <ul>
+                        {{#each receipts}}
+                        <li>
+                            <div class="item-content item-link hapticbtn" data-receiptid="{{id}}" onclick="loadReceiptHTMLIntoPopup('{{id}}')">
+                                <div class="item-inner">
+                                    <div class="item-title-row">
+                                        <div class="item-title">{{datestring}}</div>
+                                    </div>
+                                    <div class="item-text">{{total}}</div>
+                                </div>
+                            </div>
+                        </li>
+                        {{/each}}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="popup" id="receiptViewerPopup" style="overflow: hidden;">
+        <div class="navbar">
+            <div class="navbar-bg"></div>
+            <div class="navbar-inner">
+                <div class="left">
+                    <a class="link popup-close" href="#">
+                        <i class="icon icon-back"></i>
+                        <span class="if-not-md">Close</span>
+                    </a>
+                </div>
+                <div class="title">Receipt</div>
+            </div>
+        </div>
+        <iframe id="receiptvieweriframe"></iframe>
+    </div>
+
+</div>

www/routes.js

@@ -17,7 +17,8 @@ var pagesToCompile = [
     "rateresult",
     "account",
     "trackresult",
-    "settings"
+    "settings",
+    "receipts"
 ];
 console.log("Compiling page templates...");
 for (var i = 0; i < pagesToCompile.length; i++) {
@@ -298,6 +299,35 @@ var routes = [
             }
         }
     },
+    {
+        path: '/receipts',
+        name: 'receipts',
+        async: function ( {resolve, reject}) {
+            app.dialog.preloader("Loading...");
+            apirequest(SETTINGS.apis.getreceipts, {
+                accountnumber: getStorage("accountnumber"),
+                accountkey: getStorage("accountkey")
+            }, function (success) {
+                app.dialog.close();
+                if (success.status == "OK") {
+                    resolve({
+                        content: compiledPages.receipts({
+                            receipts: success.receipts
+                        })
+                    });
+                } else {
+                    app.dialog.alert(success.msg, "Error");
+                    sendErrorReport("Receipts", "Loading receipt list", success.msg);
+                    reject();
+                }
+            }, function (xhr, status, error) {
+                app.dialog.close();
+                app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later.", "Error");
+                sendErrorReport("Receipts", "Couldn't load receipts", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
+                reject();
+            }, "POST");
+        }
+    },
     {
         path: '/credits',
         url: './pages/credits.html',

www/settings.js

@@ -21,7 +21,9 @@ var SETTINGS = {
         finishpaymentsetup: "http://localhost/helena.express/apis/account/finishpaymentsetup/",
         sendtelegram: "http://localhost/helena.express/apis/telegram",
         shopitems: "http://localhost/helena.express/apis/shop/items",
-        shopbuy: "http://localhost/helena.express/apis/shop/buy"
+        shopbuy: "http://localhost/helena.express/apis/shop/buy",
+        getreceipts: "http://localhost/helena.express/apis/account/getreceipts",
+        getreceipt: "http://localhost/helena.express/apis/account/getreceipt"
     },
     stripe_pubkey: "pk_test_51J6qFXCa1Fboir5UzPO3LCiMsVNiFP2lq4wR0dEcjJJVzAaJ3uRggDekZPB3qeYpMD3ayIYHKyD5sSn0IFLlEXMW001LqrvGSH",
     branding: {