Merge pull request #6601 from papnoisanjeev/multipe-message-issue-coupon-remove

Multiple flash messages issue while removing a coupon, if clicked multiple time.
This commit is contained in:
Jitendra Singh 2022-08-06 12:12:29 +05:30 committed by GitHub
commit b41368a410
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 55 deletions

View File

@ -3,21 +3,21 @@
<div class="coupon-container"> <div class="coupon-container">
<div class="discount-control"> <div class="discount-control">
<form class="coupon-form" method="post" @submit.prevent="applyCoupon"> <form class="coupon-form" method="post" @submit.prevent="applyCoupon">
<div class="control-group" :class="[error_message ? 'has-error' : '']"> <div class="control-group" :class="[errorMessage ? 'has-error' : '']">
<input type="text" class="control" v-model="coupon_code" name="code" placeholder="{{ __('shop::app.checkout.onepage.enter-coupon-code') }}"> <input type="text" class="control" v-model="couponCode" name="code" placeholder="{{ __('shop::app.checkout.onepage.enter-coupon-code') }}">
<div class="control-error">@{{ error_message }}</div> <div class="control-error">@{{ errorMessage }}</div>
</div> </div>
<button class="btn btn-lg btn-black" :disabled="disable_button">{{ __('shop::app.checkout.onepage.apply-coupon') }}</button> <button class="btn btn-lg btn-black" :disabled="disableButton">{{ __('shop::app.checkout.onepage.apply-coupon') }}</button>
</form> </form>
</div> </div>
<div class="applied-coupon-details" v-if="applied_coupon"> <div class="applied-coupon-details" v-if="appliedCoupon">
<label>{{ __('shop::app.checkout.total.coupon-applied') }}</label> <label>{{ __('shop::app.checkout.total.coupon-applied') }}</label>
<label class="right" style="display: inline-flex; align-items: center;"> <label class="right" style="display: inline-flex; align-items: center;">
<b>@{{ applied_coupon }}</b> <b>@{{ appliedCoupon }}</b>
<span class="icon cross-icon" title="{{ __('shop::app.checkout.total.remove-coupon') }}" v-on:click="removeCoupon"></span> <span class="icon cross-icon" title="{{ __('shop::app.checkout.total.remove-coupon') }}" v-on:click="removeCoupon"></span>
</label> </label>
@ -33,22 +33,24 @@
data: function() { data: function() {
return { return {
coupon_code: '', couponCode: '',
applied_coupon: "{{ $cart->coupon_code }}", appliedCoupon: "{{ $cart->coupon_code }}",
error_message: '', errorMessage: '',
route_name: "{{ request()->route()->getName() }}", routeName: "{{ request()->route()->getName() }}",
disable_button: false disableButton: false,
removeIconEnabled: true
} }
}, },
watch: { watch: {
coupon_code: function (value) { couponCode: function (value) {
if (value != '') { if (value != '') {
this.error_message = ''; this.errorMessage = '';
} }
} }
}, },
@ -57,24 +59,24 @@
applyCoupon: function() { applyCoupon: function() {
let self = this; let self = this;
if (! this.coupon_code.length) { if (! this.couponCode.length) {
this.error_message = '{{ __('shop::app.checkout.total.invalid-coupon') }}'; this.errorMessage = '{{ __('shop::app.checkout.total.invalid-coupon') }}';
return; return;
} }
self.error_message = null; self.errorMessage = null;
self.disable_button = true; self.disableButton = true;
axios.post('{{ route('shop.checkout.cart.coupon.apply') }}', {code: self.coupon_code}) axios.post('{{ route('shop.checkout.cart.coupon.apply') }}', {code: self.couponCode})
.then(function(response) { .then(function(response) {
if (response.data.success) { if (response.data.success) {
self.$emit('onApplyCoupon'); self.$emit('onApplyCoupon');
self.applied_coupon = self.coupon_code; self.appliedCoupon = self.couponCode;
self.coupon_code = ''; self.couponCode = '';
window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}]; window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];
@ -82,26 +84,31 @@
self.redirectIfCartPage(); self.redirectIfCartPage();
} else { } else {
self.error_message = response.data.message; self.errorMessage = response.data.message;
} }
self.disable_button = false; self.disableButton = false;
}) })
.catch(function(error) { .catch(function(error) {
self.error_message = error.response.data.message; self.errorMessage = error.response.data.message;
self.disable_button = false; self.disableButton = false;
}); });
}, },
removeCoupon: function () { removeCoupon: function () {
let self = this; let self = this;
if (self.removeIconEnabled) {
self.removeIconEnabled = false;
axios.delete('{{ route('shop.checkout.coupon.remove.coupon') }}') axios.delete('{{ route('shop.checkout.coupon.remove.coupon') }}')
.then(function(response) { .then(function(response) {
self.$emit('onRemoveCoupon') self.$emit('onRemoveCoupon')
self.applied_coupon = ''; self.appliedCoupon = '';
self.removeIconEnabled = true;
window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}]; window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];
@ -113,11 +120,14 @@
window.flashMessages = [{'type': 'alert-error', 'message': error.response.data.message}]; window.flashMessages = [{'type': 'alert-error', 'message': error.response.data.message}];
self.$root.addFlashMessages(); self.$root.addFlashMessages();
self.removeIconEnabled = true;
}); });
}
}, },
redirectIfCartPage: function() { redirectIfCartPage: function() {
if (this.route_name != 'shop.checkout.cart.index') return; if (this.routeName != 'shop.checkout.cart.index') return;
setTimeout(function() { setTimeout(function() {
window.location.reload(); window.location.reload();

View File

@ -3,26 +3,26 @@
<div class="coupon-container"> <div class="coupon-container">
<div class="discount-control"> <div class="discount-control">
<form class="custom-form" method="post" @submit.prevent="applyCoupon"> <form class="custom-form" method="post" @submit.prevent="applyCoupon">
<div class="control-group" :class="[error_message ? 'has-error' : '']"> <div class="control-group" :class="[errorMessage ? 'has-error' : '']">
<input <input
type="text" type="text"
name="code" name="code"
class="control" class="control"
v-model="coupon_code" v-model="couponCode"
placeholder="{{ __('shop::app.checkout.onepage.enter-coupon-code') }}" /> placeholder="{{ __('shop::app.checkout.onepage.enter-coupon-code') }}" />
<div class="control-error">@{{ error_message }}</div> <div class="control-error">@{{ errorMessage }}</div>
</div> </div>
<button class="theme-btn light" :disabled="disable_button">{{ __('shop::app.checkout.onepage.apply-coupon') }}</button> <button class="theme-btn light" :disabled="disableButton">{{ __('shop::app.checkout.onepage.apply-coupon') }}</button>
</form> </form>
</div> </div>
<div class="applied-coupon-details" v-if="applied_coupon"> <div class="applied-coupon-details" v-if="appliedCoupon">
<label>{{ __('shop::app.checkout.total.coupon-applied') }}</label> <label>{{ __('shop::app.checkout.total.coupon-applied') }}</label>
<label class="right" style="display: inline-flex; align-items: center;"> <label class="right" style="display: inline-flex; align-items: center;">
<b>@{{ applied_coupon }}</b> <b>@{{ appliedCoupon }}</b>
<i class="rango-close fs18" title="{{ __('shop::app.checkout.total.remove-coupon') }}" v-on:click="removeCoupon"></i> <i class="rango-close fs18" title="{{ __('shop::app.checkout.total.remove-coupon') }}" v-on:click="removeCoupon"></i>
</label> </label>
@ -38,35 +38,36 @@
data: function() { data: function() {
return { return {
coupon_code: '', couponCode: '',
error_message: '', errorMessage: '',
applied_coupon: "{{ $cart->coupon_code }}", appliedCoupon: "{{ $cart->coupon_code }}",
route_name: "{{ request()->route()->getName() }}", routeName: "{{ request()->route()->getName() }}",
disable_button: false, disableButton: false,
removeIconEnabled: true
} }
}, },
watch: { watch: {
coupon_code: function (value) { couponCode: function (value) {
if (value != '') { if (value != '') {
this.error_message = ''; this.errorMessage = '';
} }
} }
}, },
methods: { methods: {
applyCoupon: function() { applyCoupon: function() {
if (! this.coupon_code.length) { if (! this.couponCode.length) {
this.error_message = '{{ __('shop::app.checkout.total.invalid-coupon') }}'; this.errorMessage = '{{ __('shop::app.checkout.total.invalid-coupon') }}';
return; return;
} }
this.error_message = null; this.errorMessage = null;
this.disable_button = true; this.disableButton = true;
let code = this.coupon_code; let code = this.couponCode;
axios axios
.post( .post(
@ -75,8 +76,8 @@
if (response.data.success) { if (response.data.success) {
this.$emit('onApplyCoupon'); this.$emit('onApplyCoupon');
this.applied_coupon = this.coupon_code; this.appliedCoupon = this.couponCode;
this.coupon_code = ''; this.couponCode = '';
window.showAlert( window.showAlert(
'alert-success', 'alert-success',
@ -86,28 +87,33 @@
this.redirectIfCartPage(); this.redirectIfCartPage();
} else { } else {
this.error_message = response.data.message; this.errorMessage = response.data.message;
} }
this.disable_button = false; this.disableButton = false;
}).catch(error => { }).catch(error => {
this.error_message = error.response.data.message; this.errorMessage = error.response.data.message;
this.disable_button = false; this.disableButton = false;
}); });
}, },
removeCoupon: function () { removeCoupon: function () {
let self = this; let self = this;
if (self.removeIconEnabled) {
self.removeIconEnabled = false;
axios axios
.delete('{{ route('shop.checkout.coupon.remove.coupon') }}') .delete('{{ route('shop.checkout.coupon.remove.coupon') }}')
.then(function(response) { .then(function(response) {
self.$emit('onRemoveCoupon') self.$emit('onRemoveCoupon')
self.applied_coupon = ''; self.appliedCoupon = '';
self.disable_button = false; self.disableButton = false;
self.removeIconEnabled = true;
window.showAlert( window.showAlert(
'alert-success', 'alert-success',
@ -121,11 +127,16 @@
window.flashMessages = [{'type': 'alert-error', 'message': error.response.data.message}]; window.flashMessages = [{'type': 'alert-error', 'message': error.response.data.message}];
self.$root.addFlashMessages(); self.$root.addFlashMessages();
self.disableButton = false;
self.removeIconEnabled = true;
}); });
}
}, },
redirectIfCartPage: function() { redirectIfCartPage: function() {
if (this.route_name != 'shop.checkout.cart.index') return; if (this.routeName != 'shop.checkout.cart.index') return;
setTimeout(function() { setTimeout(function() {
window.location.reload(); window.location.reload();