Netsyms/CertifiedFromHome.com
Netsyms/CertifiedFromHome.com
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Draw attention to error messages, add AJAX timeout handling

Browse Source
This commit is contained in:
Skylar Ittner 2024-08-27 20:02:41 -06:00
parent 0545140672
commit 2c1406b916
5 changed files with 172 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/pages/index.html
View File

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

27
source/static/assets/css/main.css
View File

@ -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 */ /*# sourceMappingURL=main.css.map */

2
source/static/assets/css/main.css.map
View File

File diff suppressed because one or more lines are too long

212
source/static/assets/js/shipment.js
View File

@ -11,75 +11,83 @@ function getRateAndValidateAddress() {
$("#getRateAndValidateAddressButton").html('<i class="far fa-spinner fa-spin"></i> Working...</a>'); $("#getRateAndValidateAddressButton").html('<i class="far fa-spinner fa-spin"></i> Working...</a>');
disableGetRateButton = true; disableGetRateButton = true;
$("#addresserror").text(""); $("#addresserror").text("");
$.post("makeshipment.php", $.ajax({
$("#addressform").serialize(), type: "POST",
function (resp) { url: "makeshipment.php",
if (resp.status == "OK") { data: $("#addressform").serialize(),
$("input[name=to_name]").val(resp.address.name); success: function (resp) {
$("input[name=to_company]").val(resp.address.company); if (resp.status == "OK") {
$("input[name=to_street]").val(resp.address.street1); $("input[name=to_name]").val(resp.address.name);
$("input[name=to_street2]").val(resp.address.street2); $("input[name=to_company]").val(resp.address.company);
$("input[name=to_city]").val(resp.address.city); $("input[name=to_street]").val(resp.address.street1);
$("input[name=to_state]").val(resp.address.state); $("input[name=to_street2]").val(resp.address.street2);
$("input[name=to_zip]").val(resp.address.zip); $("input[name=to_city]").val(resp.address.city);
$("input[name=to_state]").val(resp.address.state);
$("input[name=to_zip]").val(resp.address.zip);
$("input[name=from_name]").val(resp.fromaddress.name); $("input[name=from_name]").val(resp.fromaddress.name);
$("input[name=from_street]").val(resp.fromaddress.street1); $("input[name=from_street]").val(resp.fromaddress.street1);
$("input[name=from_street2]").val(resp.fromaddress.street2); $("input[name=from_street2]").val(resp.fromaddress.street2);
$("input[name=from_city]").val(resp.fromaddress.city); $("input[name=from_city]").val(resp.fromaddress.city);
$("input[name=from_state]").val(resp.fromaddress.state); $("input[name=from_state]").val(resp.fromaddress.state);
$("input[name=from_zip]").val(resp.fromaddress.zip); $("input[name=from_zip]").val(resp.fromaddress.zip);
$("input[name=from_email]").val(resp.fromaddress.email); $("input[name=from_email]").val(resp.fromaddress.email);
$("#toaddr").html( $("#toaddr").html(
resp.address.name resp.address.name
+ (resp.address.name != "" && resp.address.company != "" ? "<br>" : "") + (resp.address.name != "" && resp.address.company != "" ? "<br>" : "")
+ resp.address.company + resp.address.company
+ "<br>" + resp.address.street1 + "<br>" + resp.address.street1
+ (resp.address.street2 == "" ? "" : "<br>" + resp.address.street2) + (resp.address.street2 == "" ? "" : "<br>" + resp.address.street2)
+ "<br>" + resp.address.city + " " + resp.address.state + " " + resp.address.zip + "<br>" + resp.address.city + " " + resp.address.state + " " + resp.address.zip
); );
$("#fromaddr").html( $("#fromaddr").html(
resp.fromaddress.name resp.fromaddress.name
+ "<br>" + resp.fromaddress.street1 + "<br>" + resp.fromaddress.street1
+ (resp.fromaddress.street2 == "" ? "" : "<br>" + resp.fromaddress.street2) + (resp.fromaddress.street2 == "" ? "" : "<br>" + resp.fromaddress.street2)
+ "<br>" + resp.fromaddress.city + " " + resp.fromaddress.state + " " + resp.fromaddress.zip + "<br>" + resp.fromaddress.city + " " + resp.fromaddress.state + " " + resp.fromaddress.zip
); );
rateid = resp.rate.id; rateid = resp.rate.id;
shipmentid = resp.shipmentid; shipmentid = resp.shipmentid;
price = resp.rate.price; price = resp.rate.price;
$("#paymentamount").text("$" + price.toFixed(2)); $("#paymentamount").text("$" + price.toFixed(2));
var elements = stripe.elements(); var elements = stripe.elements();
cardElement = elements.create('card', {}); cardElement = elements.create('card', {});
cardElement.mount('#card-element'); cardElement.mount('#card-element');
cardElement.addEventListener('change', function (event) { cardElement.addEventListener('change', function (event) {
var displayError = document.getElementById('paymenterror'); var displayError = document.getElementById('paymenterror');
if (event.error) { if (event.error) {
displayError.textContent = event.error.message; displayError.textContent = event.error.message;
} else { } else {
displayError.textContent = ''; displayError.textContent = '';
} }
}); });
$("#paymentform").css("display", ""); $("#paymentform").css("display", "");
$("#addressform").css("display", "none"); $("#addressform").css("display", "none");
$("#getRateAndValidateAddressButton").html('<i class="far fa-chevron-right"></i> Next</a>'); $("#getRateAndValidateAddressButton").html('<i class="far fa-chevron-right"></i> Next</a>');
$("#header-small-text").text("Confirm and Pay"); $("#header-small-text").text("Confirm and Pay");
document.getElementById("label").scrollIntoView(); document.getElementById("label").scrollIntoView();
$("#addresserror").text(""); $("#addresserror").text("");
disablePayButton = false; disablePayButton = false;
} else { } else {
$("#addresserror").text(resp.message); $("#addresserror").text(resp.message);
$("#getRateAndValidateAddressButton").html('<i class="far fa-chevron-right"></i> Next</a>'); $("#getRateAndValidateAddressButton").html('<i class="far fa-chevron-right"></i> Next</a>');
disableGetRateButton = false; 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() { function submitPayment() {
@ -97,46 +105,54 @@ function submitPayment() {
$("#paymenterror").text(result.error.message); $("#paymenterror").text(result.error.message);
$("#submitPaymentButton").html('<i class="far fa-chevron-right"></i> Purchase</a>'); $("#submitPaymentButton").html('<i class="far fa-chevron-right"></i> Purchase</a>');
} else { } else {
$.post("payshipment.php", $.ajax({
{ type: "POST",
"shipmentid": shipmentid, url: "payshipment.php",
"rateid": rateid, data: {
"stripeid": result.paymentMethod.id, "shipmentid": shipmentid,
"price": price, "rateid": rateid,
"label_only": document.getElementById('label_only').checked ? "1" : "" "stripeid": result.paymentMethod.id,
}, "price": price,
function (resp) { "label_only": document.getElementById('label_only').checked ? "1" : ""
if (resp.status == "OK") { },
// load PDF to print dataType: "json",
$("#pdfframe").attr("src", resp.pdf + "#toolbar=0&navpanes=0&pagemode=none"); timeout: 1000 * 30,
$("#pdfbackuplink").attr("src", resp.pdf); success: function (resp) {
//$("#pdfframe").attr("src", "assets/pdfjs/web/viewer.html?file=" + encodeURIComponent(resp.pdf) + "#zoom=page-fit&page=1&pagemode=none"); if (resp.status == "OK") {
$("#printform").css("display", ""); // load PDF to print
$("#paymentform").css("display", "none"); $("#pdfframe").attr("src", resp.pdf + "#toolbar=0&navpanes=0&pagemode=none");
$("#trackingnumber").html(resp.trackingcode + " <i class='far fa-external-link'></i>"); $("#pdfbackuplink").attr("src", resp.pdf);
$("#trackingnumber").attr("href", "https://tools.usps.com/go/TrackConfirmAction?qtc_tLabels1=" + resp.trackingcode); //$("#pdfframe").attr("src", "assets/pdfjs/web/viewer.html?file=" + encodeURIComponent(resp.pdf) + "#zoom=page-fit&page=1&pagemode=none");
$("#header-small-text").text("Print and Finish"); $("#printform").css("display", "");
document.getElementById("label").scrollIntoView(); $("#paymentform").css("display", "none");
// hide tracking info for non-tracked letters $("#trackingnumber").html(resp.trackingcode + " <i class='far fa-external-link'></i>");
if (resp.trackingcode.startsWith("00")) { $("#trackingnumber").attr("href", "https://tools.usps.com/go/TrackConfirmAction?qtc_tLabels1=" + resp.trackingcode);
$("#trackingnumberparagraph").css("display", "none"); $("#header-small-text").text("Print and Finish");
} document.getElementById("label").scrollIntoView();
_paq.push(['addEcommerceItem', // hide tracking info for non-tracked letters
"letter", if (resp.trackingcode.startsWith("00")) {
price * 1.0, $("#trackingnumberparagraph").css("display", "none");
1
]);
_paq.push(['trackEcommerceOrder',
shipmentid,
price * 1.0
]);
} else {
$("#paymenterror").text(resp.message);
$("#submitPaymentButton").html('<i class="far fa-chevron-right"></i> Purchase</a>');
disablePayButton = false;
} }
_paq.push(['addEcommerceItem',
"letter",
price * 1.0,
1
]);
_paq.push(['trackEcommerceOrder',
shipmentid,
price * 1.0
]);
} else {
$("#paymenterror").text(resp.message);
$("#submitPaymentButton").html('<i class="far fa-chevron-right"></i> Purchase</a>');
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;
});
} }
}); });
} }

29
source/static/assets/sass/main.scss
View File

@ -81,4 +81,31 @@ xxsmall: ( null, 360px )
@import 'layout/menu'; @import 'layout/menu';
@import 'layout/banner'; @import 'layout/banner';
@import 'layout/main'; @import 'layout/main';
@import 'layout/footer'; @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);
}
}