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
GitHub
commit
b41368a410
|
|
@ -3,21 +3,21 @@
|
|||
<div class="coupon-container">
|
||||
<div class="discount-control">
|
||||
<form class="coupon-form" method="post" @submit.prevent="applyCoupon">
|
||||
<div class="control-group" :class="[error_message ? 'has-error' : '']">
|
||||
<input type="text" class="control" v-model="coupon_code" name="code" placeholder="{{ __('shop::app.checkout.onepage.enter-coupon-code') }}">
|
||||
<div class="control-group" :class="[errorMessage ? 'has-error' : '']">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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 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>
|
||||
</label>
|
||||
|
|
@ -33,22 +33,24 @@
|
|||
|
||||
data: function() {
|
||||
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: {
|
||||
coupon_code: function (value) {
|
||||
couponCode: function (value) {
|
||||
if (value != '') {
|
||||
this.error_message = '';
|
||||
this.errorMessage = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -57,24 +59,24 @@
|
|||
applyCoupon: function() {
|
||||
let self = this;
|
||||
|
||||
if (! this.coupon_code.length) {
|
||||
this.error_message = '{{ __('shop::app.checkout.total.invalid-coupon') }}';
|
||||
if (! this.couponCode.length) {
|
||||
this.errorMessage = '{{ __('shop::app.checkout.total.invalid-coupon') }}';
|
||||
|
||||
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) {
|
||||
if (response.data.success) {
|
||||
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}];
|
||||
|
||||
|
|
@ -82,26 +84,31 @@
|
|||
|
||||
self.redirectIfCartPage();
|
||||
} else {
|
||||
self.error_message = response.data.message;
|
||||
self.errorMessage = response.data.message;
|
||||
}
|
||||
|
||||
self.disable_button = false;
|
||||
self.disableButton = false;
|
||||
})
|
||||
.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 () {
|
||||
let self = this;
|
||||
|
||||
if (self.removeIconEnabled) {
|
||||
self.removeIconEnabled = false;
|
||||
|
||||
axios.delete('{{ route('shop.checkout.coupon.remove.coupon') }}')
|
||||
.then(function(response) {
|
||||
self.$emit('onRemoveCoupon')
|
||||
|
||||
self.applied_coupon = '';
|
||||
self.appliedCoupon = '';
|
||||
|
||||
self.removeIconEnabled = true;
|
||||
|
||||
window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];
|
||||
|
||||
|
|
@ -113,11 +120,14 @@
|
|||
window.flashMessages = [{'type': 'alert-error', 'message': error.response.data.message}];
|
||||
|
||||
self.$root.addFlashMessages();
|
||||
|
||||
self.removeIconEnabled = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
redirectIfCartPage: function() {
|
||||
if (this.route_name != 'shop.checkout.cart.index') return;
|
||||
if (this.routeName != 'shop.checkout.cart.index') return;
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.reload();
|
||||
|
|
|
|||
|
|
@ -3,26 +3,26 @@
|
|||
<div class="coupon-container">
|
||||
<div class="discount-control">
|
||||
<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
|
||||
type="text"
|
||||
name="code"
|
||||
class="control"
|
||||
v-model="coupon_code"
|
||||
v-model="couponCode"
|
||||
placeholder="{{ __('shop::app.checkout.onepage.enter-coupon-code') }}" />
|
||||
|
||||
<div class="control-error">@{{ error_message }}</div>
|
||||
<div class="control-error">@{{ errorMessage }}</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>
|
||||
</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 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>
|
||||
</label>
|
||||
|
|
@ -38,35 +38,36 @@
|
|||
|
||||
data: function() {
|
||||
return {
|
||||
coupon_code: '',
|
||||
error_message: '',
|
||||
applied_coupon: "{{ $cart->coupon_code }}",
|
||||
route_name: "{{ request()->route()->getName() }}",
|
||||
disable_button: false,
|
||||
couponCode: '',
|
||||
errorMessage: '',
|
||||
appliedCoupon: "{{ $cart->coupon_code }}",
|
||||
routeName: "{{ request()->route()->getName() }}",
|
||||
disableButton: false,
|
||||
removeIconEnabled: true
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
coupon_code: function (value) {
|
||||
couponCode: function (value) {
|
||||
if (value != '') {
|
||||
this.error_message = '';
|
||||
this.errorMessage = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
applyCoupon: function() {
|
||||
if (! this.coupon_code.length) {
|
||||
this.error_message = '{{ __('shop::app.checkout.total.invalid-coupon') }}';
|
||||
if (! this.couponCode.length) {
|
||||
this.errorMessage = '{{ __('shop::app.checkout.total.invalid-coupon') }}';
|
||||
|
||||
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
|
||||
.post(
|
||||
|
|
@ -75,8 +76,8 @@
|
|||
if (response.data.success) {
|
||||
this.$emit('onApplyCoupon');
|
||||
|
||||
this.applied_coupon = this.coupon_code;
|
||||
this.coupon_code = '';
|
||||
this.appliedCoupon = this.couponCode;
|
||||
this.couponCode = '';
|
||||
|
||||
window.showAlert(
|
||||
'alert-success',
|
||||
|
|
@ -86,28 +87,33 @@
|
|||
|
||||
this.redirectIfCartPage();
|
||||
} else {
|
||||
this.error_message = response.data.message;
|
||||
this.errorMessage = response.data.message;
|
||||
}
|
||||
|
||||
this.disable_button = false;
|
||||
this.disableButton = false;
|
||||
}).catch(error => {
|
||||
this.error_message = error.response.data.message;
|
||||
this.errorMessage = error.response.data.message;
|
||||
|
||||
this.disable_button = false;
|
||||
this.disableButton = false;
|
||||
});
|
||||
},
|
||||
|
||||
removeCoupon: function () {
|
||||
let self = this;
|
||||
|
||||
if (self.removeIconEnabled) {
|
||||
self.removeIconEnabled = false;
|
||||
|
||||
axios
|
||||
.delete('{{ route('shop.checkout.coupon.remove.coupon') }}')
|
||||
.then(function(response) {
|
||||
self.$emit('onRemoveCoupon')
|
||||
|
||||
self.applied_coupon = '';
|
||||
self.appliedCoupon = '';
|
||||
|
||||
self.disable_button = false;
|
||||
self.disableButton = false;
|
||||
|
||||
self.removeIconEnabled = true;
|
||||
|
||||
window.showAlert(
|
||||
'alert-success',
|
||||
|
|
@ -121,11 +127,16 @@
|
|||
window.flashMessages = [{'type': 'alert-error', 'message': error.response.data.message}];
|
||||
|
||||
self.$root.addFlashMessages();
|
||||
|
||||
self.disableButton = false;
|
||||
|
||||
self.removeIconEnabled = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
redirectIfCartPage: function() {
|
||||
if (this.route_name != 'shop.checkout.cart.index') return;
|
||||
if (this.routeName != 'shop.checkout.cart.index') return;
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.reload();
|
||||
|
|
|
|||
Loading…
Reference in New Issue