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:
commit
b41368a410
|
|
@ -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();
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue