Skip to content

Commit 6f0ec03

Browse files
w3bdesignw3bdesign
committed
Disable order button while processing
1 parent c70d5c6 commit 6f0ec03

File tree

3 files changed

+38
-16
lines changed

3 files changed

+38
-16
lines changed

‎public/css/app.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -612,6 +612,10 @@ video {
612612
border-width: 0;
613613
}
614614

615+
.pointer-events-none {
616+
pointer-events: none;
617+
}
618+
615619
.visible {
616620
visibility: visible;
617621
}

‎public/js/app.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20469,14 +20469,15 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
2046920469

2047020470
var checkout = /*#__PURE__*/function () {
2047120471
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
20472-
var _store$getCustomerDet, firstName, lastName, address, zipcode, city, state, email, _yield$localState$str, paymentMethod, error, finalCustomerDetails;
20472+
var _store$getCustomerDet, firstName, lastName, address, zipcode, city, state, email, _yield$localState$str, paymentMethod, error, stripeAmount, finalCustomerDetails;
2047320473

2047420474
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
2047520475
while (1) {
2047620476
switch (_context2.prev = _context2.next) {
2047720477
case 0:
2047820478
_store$getCustomerDet = store.getCustomerDetails, firstName = _store$getCustomerDet.firstName, lastName = _store$getCustomerDet.lastName, address = _store$getCustomerDet.address, zipcode = _store$getCustomerDet.zipcode, city = _store$getCustomerDet.city, state = _store$getCustomerDet.state, email = _store$getCustomerDet.email;
20479-
_context2.next = 3;
20479+
localState.paymentIsProcessing = true;
20480+
_context2.next = 4;
2048020481
return localState.stripe.createPaymentMethod("card", localState.cardElement, {
2048120482
billing_details: {
2048220483
name: "".concat(firstName, " ").concat(lastName),
@@ -20490,28 +20491,37 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
2049020491
}
2049120492
});
2049220493

20493-
case 3:
20494+
case 4:
2049420495
_yield$localState$str = _context2.sent;
2049520496
paymentMethod = _yield$localState$str.paymentMethod;
2049620497
error = _yield$localState$str.error;
2049720498

2049820499
if (!(error || !paymentMethod.id)) {
20499-
_context2.next = 9;
20500+
_context2.next = 10;
2050020501
break;
2050120502
}
2050220503

2050320504
localState.orderError = "Error";
2050420505
return _context2.abrupt("return");
2050520506

20506-
case 9:
20507+
case 10:
20508+
stripeAmount = store.getCartTotal * 100;
20509+
20510+
if (!(stripeAmount < 300)) {
20511+
_context2.next = 14;
20512+
break;
20513+
}
20514+
20515+
localState.orderError = "Cart total needs to be higher ";
20516+
return _context2.abrupt("return");
20517+
20518+
case 14:
2050720519
finalCustomerDetails = _objectSpread(_objectSpread({}, store.getCustomerDetails), {}, {
2050820520
cart: JSON.stringify(store.getCartContent),
20509-
amount: store.getCartTotal * 100,
20521+
amount: stripeAmount,
2051020522
payment_method_id: paymentMethod.id
2051120523
});
2051220524
axios.post("/api/purchase", finalCustomerDetails).then(function (response) {
20513-
localState.paymentIsProcessing = true;
20514-
2051520525
if (response.statusText === "Created") {
2051620526
localState.paymentIsProcessing = false;
2051720527
store.clearCart();
@@ -20524,7 +20534,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
2052420534
localState.orderError = true;
2052520535
});
2052620536

20527-
case 11:
20537+
case 16:
2052820538
case "end":
2052920539
return _context2.stop();
2053020540
}
@@ -21169,7 +21179,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
2116921179
persisted: ""
2117021180
}, {
2117121181
"default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
21172-
return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_customer_details), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_fakevisa_details), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(" TODO: Refactor Stripe into separate component "), _hoisted_8, _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("button", {
21182+
return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_customer_details), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_fakevisa_details), _hoisted_8, _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("button", {
2117321183
"class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["mt-6 px-6 py-2 font-semibold text-white rounded-md hover:opacity-90 transition-all duration-500 ease-in-out focus:outline-none bg-blue-600", {
2117421184
disabledButton: $setup.localState.paymentIsProcessing
2117521185
}]),
@@ -24615,7 +24625,7 @@ __webpack_require__.r(__webpack_exports__);
2461524625

2461624626
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
2461724627
// Module
24618-
___CSS_LOADER_EXPORT___.push([module.id, "\n.disabledButton {\n@apply cursor-not-allowed opacity-50;\n}\n.flex-container {\n@apply container mx-auto mt-4 flex border border-gray-300 rounded-lg shadow flex-wrap flex-row justify-around items-center content-center;\n}\n.item {\n@apply lg:m-2 xl:m-4 xl:w-1/6 lg:w-1/6 sm:m-2 w-auto;\n}\n.inline-block {\n@apply inline-block mt-4 lg:h-12 h-20 w-32 md:w-full lg:w-full xl:w-full;\n}\n.removing {\n@apply animate-spin cursor-not-allowed;\n}\n.fade-enter-active,\r\n.fade-leave-active {\r\n transition: all 0.5s ease;\n}\n.fade-enter-from,\r\n.fade-leave-to {\r\n opacity: 0;\n}\r\n", ""]);
24628+
___CSS_LOADER_EXPORT___.push([module.id, "\n.disabledButton {\r\n opacity: 0.2;\r\n pointer-events: none;\n}\n.flex-container {\n@apply container mx-auto mt-4 flex border border-gray-300 rounded-lg shadow flex-wrap flex-row justify-around items-center content-center;\n}\n.item {\n@apply lg:m-2 xl:m-4 xl:w-1/6 lg:w-1/6 sm:m-2 w-auto;\n}\n.inline-block {\n@apply inline-block mt-4 lg:h-12 h-20 w-32 md:w-full lg:w-full xl:w-full;\n}\n.removing {\n@apply animate-spin cursor-not-allowed;\n}\n.fade-enter-active,\r\n.fade-leave-active {\r\n transition: all 0.5s ease;\n}\n.fade-enter-from,\r\n.fade-leave-to {\r\n opacity: 0;\n}\r\n", ""]);
2461924629
// Exports
2462024630
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2462124631

‎resources/js/components/Checkout/OrderCheckout.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<div v-show="getCustomerDetails.firstName">
2222
<customer-details />
2323
<fakevisa-details />
24-
<!-- TODO: Refactor Stripe into separate component -->
24+
2525
<h2 class="h-10 p-4 mt-6 text-2xl font-bold text-center">Stripe payment</h2>
2626
<div class="flex justify-center w-full align-center">
2727
<div id="card-element" class="w-full h-16 mt-6 lg:w-5/12 xl:w-5/12">
@@ -92,6 +92,8 @@ const checkout = async () => {
9292
email,
9393
} = store.getCustomerDetails;
9494
95+
localState.paymentIsProcessing = true;
96+
9597
const { paymentMethod, error } = await localState.stripe.createPaymentMethod(
9698
"card",
9799
localState.cardElement,
@@ -114,18 +116,23 @@ const checkout = async () => {
114116
return;
115117
}
116118
119+
const stripeAmount = store.getCartTotal * 100;
120+
121+
if (stripeAmount < 300) {
122+
localState.orderError = "Cart total needs to be higher ";
123+
return;
124+
}
125+
117126
const finalCustomerDetails = {
118127
...store.getCustomerDetails,
119128
cart: JSON.stringify(store.getCartContent),
120-
amount: store.getCartTotal * 100,
129+
amount: stripeAmount,
121130
payment_method_id: paymentMethod.id,
122131
};
123132
124133
axios
125134
.post("/api/purchase", finalCustomerDetails)
126135
.then((response) => {
127-
localState.paymentIsProcessing = true;
128-
129136
if (response.statusText === "Created") {
130137
localState.paymentIsProcessing = false;
131138
store.clearCart();
@@ -143,7 +150,8 @@ const checkout = async () => {
143150

144151
<style>
145152
.disabledButton {
146-
@apply cursor-not-allowed opacity-50;
153+
opacity: 0.2;
154+
pointer-events: none;
147155
}
148156
149157
.flex-container {

0 commit comments

Comments
 (0)