Fetch dynamically-updating text from server, add FAQ to money order page

www/assets/css/app.css

@@ -199,4 +199,18 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     max-height: 40vh;
     max-width: 90%;
     height: 50rem;
+}
+
+dl {
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+dt {
+    font-weight: 700;
+}
+
+dd {
+    margin-left: 1rem;
+    margin-bottom: .5rem;
 }

www/assets/js/main.js

@@ -226,6 +226,38 @@ function openStartpageURLArg() {
     return false;
 }
 
+/**
+ * Get the cached dynamic page content if available, else return null (and try to fetch it for next time)
+ * @param {string} page the page ID
+ * @returns {string|null}
+ */
+function getDynamicPageContent(page) {
+    if (inStorage("dynamiccontent_" + page)) {
+        return getStorage("dynamiccontent_" + page);
+    }
+    apirequest(SETTINGS.apis.dynamicappcontent, {page: page}, function (resp) {
+        if (resp.status == "OK") {
+            setStorage("dynamiccontent_" + resp.page, resp.content);
+        }
+    });
+    return null;
+}
+
+// update dynamic page text cache
+setTimeout(function () {
+    dynamicPages.forEach(function (pageid) {
+        // Only update if it's been over an hour since last update
+        if (!inStorage("dynamiccontent-lastupdated_" + pageid) || getStorage("dynamiccontent-lastupdated_" + pageid) < time() - 60 * 60) {
+            apirequest(SETTINGS.apis.dynamicappcontent, {page: pageid}, function (resp) {
+                if (resp.status == "OK") {
+                    setStorage("dynamiccontent_" + resp.page, resp.content);
+                    setStorage("dynamiccontent-lastupdated_" + resp.page, time());
+                }
+            });
+        }
+    });
+}, 500);
+
 if (setup) {
     router.navigate("/home");
 } else {

www/pages/moneyorder.html

@@ -13,16 +13,38 @@
                     <span class="if-not-md">Back</span>
                 </a>
             </div>
-            <div class="title">Verify Money Order</div>
+            <div class="title">Money Orders</div>
         </div>
     </div>
 
 
     <div class="page-content">
         <div class="row justify-content-center">
-            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
+            <div class="col-100 small-50 xlarge-40">
                 <div class="card margin">
+                    <div class="card-content padding-vertical" id="moneyorder-dyncontent">
+                        <dl>
+                            <dt>How do I purchase a money order?</dt>
+                            <dd>You can buy a money order during any notary or shipping appointment. You can also call us to schedule a visit. We’re available where you are and on your schedule.</dd>
+
+                            <dt>How can I pay for my money order?</dt>
+                            <dd>We only accept cash payment for money orders at this time.</dd>
+
+                            <dt>How much does a money order cost?</dt>
+                            <dd>You can send money orders up to $500 with Helena Express for a $3 fee ($6 if by appointment).</dd>
+
+                            <dt>How can a recipient cash a Helena Express money order?</dt>
+                            <dd>Our money orders can be cashed like a check. Just bring it to your bank or any business offering check cashing services.</dd>
+                    </div>
+                </div>
+            </div>
+            <div class="col-100 small-50 xlarge-40">
+                <div class="card margin">
+                    <div class="card-header">Verify Money Order</div>
                     <form class="card-content padding-vertical" id="moneyorderForm">
+                        <div class="block">
+                            Enter the serial number from the top-right corner of the money order.
+                        </div>
                         <div class="list media-list">
                             <ul>
                                 <li class="item-content item-input item-input-outline">

www/pages/notary.html

@@ -19,7 +19,7 @@
 
     <div class="page-content noselect">
         <div class="row justify-content-center">
-            <div class="col-100 medium-60 large-70">
+            <div class="col-100 medium-60 large-70" id="notary-dyncontent">
                 <div class="swiper margin-top" id="notary-info-swiper">
                     <div class="swiper-wrapper">
                         <div class="swiper-slide display-flex justify-contenty-center align-items-center flex-direction-column">

www/pages/telegram.html

@@ -28,7 +28,7 @@
                                 <li>
                                     <div class="block text-align-center">
                                         <img src="assets/images/telegram.svg" class="margin" style="max-height: 20vh; max-width: 80%;" />
-                                        <p class="margin">
+                                        <p class="margin" id="telegram-dyncontent">
                                             Send a telegram with Helena Express for $15.
                                             We'll hand-deliver your message to anywhere in Helena, East Helena, Montana City, the Helena Valley, and the hills around Helena.
                                         </p>

www/pages/trailer.html

@@ -23,9 +23,9 @@
                 <div class="card">
                     <div class="card-body padding-top">
                         <div class="block text-align-center">
-                            <img src="assets/images/trailer-front-august2022-cleaned.jpg" style="max-width: 100%; max-height: 300px;"/>
+                            <img src="assets/images/mail-trailer.svg" class="margin" style="max-height: 20vh; max-width: 80%;" />
                         </div>
-                        <div class="block margin-bottom">
+                        <div class="block margin-bottom" id="trailer-dyncontent">
                             Our Mobile Shipping Center is a specialized trailer equipped to offer mailing,
                             shipping, notarizing, copying, and faxing services. With no pickup or travel fees,
                             it's a good way to save money and skip the line at the post office.

www/routes.js

@@ -4,6 +4,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+var dynamicPages = [
+    "notary",
+    "telegram",
+    "trailer",
+    "moneyorder"
+];
 var compiledPages = {};
 var pagesToCompile = [
     "home",
@@ -178,7 +184,7 @@ var routes = [
                             title: "Money Services",
                             href: "/money",
                             icon: "fa-duotone fa-money-bill-wave",
-                            text: "Manage cryptocurrency and verify money orders."
+                            text: "Manage money orders and cryptocurrency."
                         },
                         {
                             title: "My Account",
@@ -235,7 +241,7 @@ var routes = [
                 content: compiledPages.money({
                     pages: [
                         {
-                            title: "Verify Money Order",
+                            title: "Money Orders",
                             href: "/moneyorder",
                             icon: "fa-duotone fa-money-check-dollar",
                             text: "Check and verify a Helena Express money order."
@@ -254,13 +260,27 @@ var routes = [
     {
         path: '/moneyorder',
         content: compiledPages.moneyorder(),
-        name: 'moneyorder'
+        name: 'moneyorder',
+        on: {
+            pageBeforeIn: function () {
+                dyncontent = getDynamicPageContent("moneyorder");
+                if (dyncontent != null) {
+                    $("#moneyorder-dyncontent").html(dyncontent);
+                }
+            }
+        }
     },
     {
         path: '/notary',
         content: compiledPages.notary(),
         name: 'notary',
         on: {
+            pageBeforeIn: function () {
+                dyncontent = getDynamicPageContent("notary");
+                if (dyncontent != null) {
+                    $("#notary-dyncontent").html(dyncontent);
+                }
+            },
             pageAfterIn: function () {
                 app.swiper.destroy("#notary-info-swiper");
                 app.swiper.create("#notary-info-swiper", {
@@ -433,6 +453,14 @@ var routes = [
                     })
                 }, {});
             }, "GET");
+        },
+        on: {
+            pageBeforeIn: function () {
+                dyncontent = getDynamicPageContent("trailer");
+                if (dyncontent != null) {
+                    $("#trailer-dyncontent").html(dyncontent);
+                }
+            }
         }
     },
     {
@@ -448,6 +476,10 @@ var routes = [
                 }, function (error) {
                     $("#addPaymentMethodNag").css("display", "");
                 });
+                dyncontent = getDynamicPageContent("telegram");
+                if (dyncontent != null) {
+                    $("#telegram-dyncontent").html(dyncontent);
+                }
             }
         }
     },

www/settings.js

@@ -6,6 +6,8 @@
 
 var SETTINGS = {
     apis: {
+        // Dynamic text content updater
+        dynamicappcontent: "http://localhost/helena.express/apis/dynamicappcontent/",
         // Tracking
         track: "http://localhost/helena.express/apis/track/",
         trackmultiple: "http://localhost/helena.express/apis/trackmultiple/",