Draw attention to error messages, add AJAX timeout handling
This commit is contained in:
parent
0545140672
commit
2c1406b916
@ -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">
|
||||
|
||||
@ -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 */
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -11,75 +11,83 @@ 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) {
|
||||
if (resp.status == "OK") {
|
||||
$("input[name=to_name]").val(resp.address.name);
|
||||
$("input[name=to_company]").val(resp.address.company);
|
||||
$("input[name=to_street]").val(resp.address.street1);
|
||||
$("input[name=to_street2]").val(resp.address.street2);
|
||||
$("input[name=to_city]").val(resp.address.city);
|
||||
$("input[name=to_state]").val(resp.address.state);
|
||||
$("input[name=to_zip]").val(resp.address.zip);
|
||||
$.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);
|
||||
$("input[name=to_street]").val(resp.address.street1);
|
||||
$("input[name=to_street2]").val(resp.address.street2);
|
||||
$("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_street]").val(resp.fromaddress.street1);
|
||||
$("input[name=from_street2]").val(resp.fromaddress.street2);
|
||||
$("input[name=from_city]").val(resp.fromaddress.city);
|
||||
$("input[name=from_state]").val(resp.fromaddress.state);
|
||||
$("input[name=from_zip]").val(resp.fromaddress.zip);
|
||||
$("input[name=from_email]").val(resp.fromaddress.email);
|
||||
$("input[name=from_name]").val(resp.fromaddress.name);
|
||||
$("input[name=from_street]").val(resp.fromaddress.street1);
|
||||
$("input[name=from_street2]").val(resp.fromaddress.street2);
|
||||
$("input[name=from_city]").val(resp.fromaddress.city);
|
||||
$("input[name=from_state]").val(resp.fromaddress.state);
|
||||
$("input[name=from_zip]").val(resp.fromaddress.zip);
|
||||
$("input[name=from_email]").val(resp.fromaddress.email);
|
||||
|
||||
$("#toaddr").html(
|
||||
resp.address.name
|
||||
+ (resp.address.name != "" && resp.address.company != "" ? "<br>" : "")
|
||||
+ resp.address.company
|
||||
+ "<br>" + resp.address.street1
|
||||
+ (resp.address.street2 == "" ? "" : "<br>" + resp.address.street2)
|
||||
+ "<br>" + resp.address.city + " " + resp.address.state + " " + resp.address.zip
|
||||
);
|
||||
$("#toaddr").html(
|
||||
resp.address.name
|
||||
+ (resp.address.name != "" && resp.address.company != "" ? "<br>" : "")
|
||||
+ resp.address.company
|
||||
+ "<br>" + resp.address.street1
|
||||
+ (resp.address.street2 == "" ? "" : "<br>" + resp.address.street2)
|
||||
+ "<br>" + resp.address.city + " " + resp.address.state + " " + resp.address.zip
|
||||
);
|
||||
|
||||
$("#fromaddr").html(
|
||||
resp.fromaddress.name
|
||||
+ "<br>" + resp.fromaddress.street1
|
||||
+ (resp.fromaddress.street2 == "" ? "" : "<br>" + resp.fromaddress.street2)
|
||||
+ "<br>" + resp.fromaddress.city + " " + resp.fromaddress.state + " " + resp.fromaddress.zip
|
||||
);
|
||||
$("#fromaddr").html(
|
||||
resp.fromaddress.name
|
||||
+ "<br>" + resp.fromaddress.street1
|
||||
+ (resp.fromaddress.street2 == "" ? "" : "<br>" + resp.fromaddress.street2)
|
||||
+ "<br>" + resp.fromaddress.city + " " + resp.fromaddress.state + " " + resp.fromaddress.zip
|
||||
);
|
||||
|
||||
rateid = resp.rate.id;
|
||||
shipmentid = resp.shipmentid;
|
||||
price = resp.rate.price;
|
||||
rateid = resp.rate.id;
|
||||
shipmentid = resp.shipmentid;
|
||||
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.mount('#card-element');
|
||||
cardElement.addEventListener('change', function (event) {
|
||||
var displayError = document.getElementById('paymenterror');
|
||||
if (event.error) {
|
||||
displayError.textContent = event.error.message;
|
||||
} else {
|
||||
displayError.textContent = '';
|
||||
}
|
||||
});
|
||||
cardElement = elements.create('card', {});
|
||||
cardElement.mount('#card-element');
|
||||
cardElement.addEventListener('change', function (event) {
|
||||
var displayError = document.getElementById('paymenterror');
|
||||
if (event.error) {
|
||||
displayError.textContent = event.error.message;
|
||||
} else {
|
||||
displayError.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
$("#paymentform").css("display", "");
|
||||
$("#addressform").css("display", "none");
|
||||
$("#getRateAndValidateAddressButton").html('<i class="far fa-chevron-right"></i> Next</a>');
|
||||
$("#header-small-text").text("Confirm and Pay");
|
||||
document.getElementById("label").scrollIntoView();
|
||||
$("#addresserror").text("");
|
||||
disablePayButton = false;
|
||||
} else {
|
||||
$("#addresserror").text(resp.message);
|
||||
$("#getRateAndValidateAddressButton").html('<i class="far fa-chevron-right"></i> Next</a>');
|
||||
disableGetRateButton = false;
|
||||
}
|
||||
$("#paymentform").css("display", "");
|
||||
$("#addressform").css("display", "none");
|
||||
$("#getRateAndValidateAddressButton").html('<i class="far fa-chevron-right"></i> Next</a>');
|
||||
$("#header-small-text").text("Confirm and Pay");
|
||||
document.getElementById("label").scrollIntoView();
|
||||
$("#addresserror").text("");
|
||||
disablePayButton = false;
|
||||
} else {
|
||||
$("#addresserror").text(resp.message);
|
||||
$("#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,46 +105,54 @@ function submitPayment() {
|
||||
$("#paymenterror").text(result.error.message);
|
||||
$("#submitPaymentButton").html('<i class="far fa-chevron-right"></i> Purchase</a>');
|
||||
} else {
|
||||
$.post("payshipment.php",
|
||||
{
|
||||
"shipmentid": shipmentid,
|
||||
"rateid": rateid,
|
||||
"stripeid": result.paymentMethod.id,
|
||||
"price": price,
|
||||
"label_only": document.getElementById('label_only').checked ? "1" : ""
|
||||
},
|
||||
function (resp) {
|
||||
if (resp.status == "OK") {
|
||||
// load PDF to print
|
||||
$("#pdfframe").attr("src", resp.pdf + "#toolbar=0&navpanes=0&pagemode=none");
|
||||
$("#pdfbackuplink").attr("src", resp.pdf);
|
||||
//$("#pdfframe").attr("src", "assets/pdfjs/web/viewer.html?file=" + encodeURIComponent(resp.pdf) + "#zoom=page-fit&page=1&pagemode=none");
|
||||
$("#printform").css("display", "");
|
||||
$("#paymentform").css("display", "none");
|
||||
$("#trackingnumber").html(resp.trackingcode + " <i class='far fa-external-link'></i>");
|
||||
$("#trackingnumber").attr("href", "https://tools.usps.com/go/TrackConfirmAction?qtc_tLabels1=" + resp.trackingcode);
|
||||
$("#header-small-text").text("Print and Finish");
|
||||
document.getElementById("label").scrollIntoView();
|
||||
// hide tracking info for non-tracked letters
|
||||
if (resp.trackingcode.startsWith("00")) {
|
||||
$("#trackingnumberparagraph").css("display", "none");
|
||||
}
|
||||
_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;
|
||||
$.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" : ""
|
||||
},
|
||||
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");
|
||||
$("#pdfbackuplink").attr("src", resp.pdf);
|
||||
//$("#pdfframe").attr("src", "assets/pdfjs/web/viewer.html?file=" + encodeURIComponent(resp.pdf) + "#zoom=page-fit&page=1&pagemode=none");
|
||||
$("#printform").css("display", "");
|
||||
$("#paymentform").css("display", "none");
|
||||
$("#trackingnumber").html(resp.trackingcode + " <i class='far fa-external-link'></i>");
|
||||
$("#trackingnumber").attr("href", "https://tools.usps.com/go/TrackConfirmAction?qtc_tLabels1=" + resp.trackingcode);
|
||||
$("#header-small-text").text("Print and Finish");
|
||||
document.getElementById("label").scrollIntoView();
|
||||
// hide tracking info for non-tracked letters
|
||||
if (resp.trackingcode.startsWith("00")) {
|
||||
$("#trackingnumberparagraph").css("display", "none");
|
||||
}
|
||||
_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;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -81,4 +81,31 @@ xxsmall: ( null, 360px )
|
||||
@import 'layout/menu';
|
||||
@import 'layout/banner';
|
||||
@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);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user