Draw attention to error messages, add AJAX timeout handling

source/pages/index.html

@@ -213,7 +213,7 @@
                         </div>
 
                         <br />
-                        <div id="addresserror"></div>
+                        <div id="addresserror" class="box"></div>
                         <br />
                         <div>
                             By continuing, you acknowledge that you aren't sending anything except paper documents.
@@ -242,7 +242,7 @@
                         <div id="card-element" style="width: 500px; max-width: 100%; background-color: white; padding: 1em; border-radius: 4px;"></div>
 
                         <br />
-                        <div id="paymenterror"></div>
+                        <div id="paymenterror" class="box"></div>
                         <br />
 
                         <ul class="actions">

source/static/assets/css/main.css

@@ -3793,4 +3793,31 @@ body.is-preload #banner:after {
   }
 }
 
+.box:empty {
+  display: none;
+}
+
+.box:not(.box:empty) {
+  animation: flashbox 300ms;
+  animation-timing-function: linear;
+  animation-iteration-count: 2;
+}
+
+.wrapper.style1 .box {
+  border-color: white;
+  border-width: 1px;
+}
+
+@keyframes flashbox {
+  0% {
+    background-color: rgba(255, 255, 255, 0);
+  }
+  50% {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    background-color: rgba(255, 255, 255, 0);
+  }
+}
+
 /*# sourceMappingURL=main.css.map */

source/static/assets/js/shipment.js

@@ -11,9 +11,11 @@ function getRateAndValidateAddress() {
     $("#getRateAndValidateAddressButton").html('<i class="far fa-spinner fa-spin"></i> Working...</a>');
     disableGetRateButton = true;
     $("#addresserror").text("");
-    $.post("makeshipment.php",
-            $("#addressform").serialize(),
-            function (resp) {
+    $.ajax({
+        type: "POST",
+        url: "makeshipment.php",
+        data: $("#addressform").serialize(),
+        success: function (resp) {
             if (resp.status == "OK") {
                 $("input[name=to_name]").val(resp.address.name);
                 $("input[name=to_company]").val(resp.address.company);
@@ -78,8 +80,14 @@ function getRateAndValidateAddress() {
                 $("#getRateAndValidateAddressButton").html('<i class="far fa-chevron-right"></i> Next</a>');
                 disableGetRateButton = false;
             }
-            }
-    );
+        },
+        dataType: "json",
+        timeout: 1000 * 10
+    }).fail(function () {
+        $("#addresserror").text("There was a network glitch or your request took too long. Please try again.");
+        $("#getRateAndValidateAddressButton").html('<i class="far fa-chevron-right"></i> Next</a>');
+        disableGetRateButton = false;
+    });
 }
 
 function submitPayment() {
@@ -97,15 +105,19 @@ function submitPayment() {
             $("#paymenterror").text(result.error.message);
             $("#submitPaymentButton").html('<i class="far fa-chevron-right"></i> Purchase</a>');
         } else {
-            $.post("payshipment.php",
-                    {
+            $.ajax({
+                type: "POST",
+                url: "payshipment.php",
+                data: {
                     "shipmentid": shipmentid,
                     "rateid": rateid,
                     "stripeid": result.paymentMethod.id,
                     "price": price,
                     "label_only": document.getElementById('label_only').checked ? "1" : ""
                 },
-                    function (resp) {
+                dataType: "json",
+                timeout: 1000 * 30,
+                success: function (resp) {
                     if (resp.status == "OK") {
                         // load PDF to print
                         $("#pdfframe").attr("src", resp.pdf + "#toolbar=0&navpanes=0&pagemode=none");
@@ -136,7 +148,11 @@ function submitPayment() {
                         disablePayButton = false;
                     }
                 }
-            );
+            }).fail(function () {
+                $("#paymenterror").html("There was a network glitch or your request took too long to process. It's possible your payment went through; check with your card provider or <a href='https://postalportal.net/#contact' target='_BLANK'>click here to contact us</a>.");
+                $("#submitPaymentButton").html('<i class="far fa-chevron-right"></i> Purchase</a>');
+                disablePayButton = false;
+            });
         }
     });
 }

source/static/assets/sass/main.scss

@@ -82,3 +82,30 @@ xxsmall:  ( null,    360px  )
 @import 'layout/banner';
 @import 'layout/main';
 @import 'layout/footer';
+
+.box:empty {
+    display: none;
+}
+
+.box:not(.box:empty) {
+    animation: flashbox 300ms;
+    animation-timing-function: linear;
+    animation-iteration-count: 2;
+}
+
+.wrapper.style1 .box {
+    border-color: white;
+    border-width: 1px;
+}
+
+@keyframes flashbox {
+    0% {
+        background-color: rgba(255,255,255,0);
+    }
+    50% {
+        background-color: rgba(255,255,255,0.5);
+    }
+    100% {
+        background-color: rgba(255,255,255,0);
+    }
+}