Vourcherify

This commit is contained in:
Dillon
2023-05-30 22:02:09 +08:00
parent 44deab4542
commit 20d6ca47dc
39 changed files with 1102 additions and 35 deletions
@@ -224,7 +224,29 @@
</div>
</div>
</div>
<div class="row">
<div class="row m-r-0">
<div class="col p-r-0">
<validation-wrapper-component :validator="$v.amount">
<label>Enter Voucher</label>
<input class="form-control" name="voucherCode" v-model.lazy="voucherCode" @keyup="updateVoucherFlag($event)">
</validation-wrapper-component>
</div>
<div class="col-auto b-r b-t b-b b-grey">
<div class="row h-100 align-items-center">
<div class="col">
<button @click="applyVoucherCode()" class="btn btn-sm h-100 btn-primary b-rad-none all-caps">
Apply
</button>
</div>
</div>
</div>
</div>
<div class="row m-l-0 m-r-0" style="height: 20px">
<i class="fa fa-spinner fa-spin m-b-5" v-if="voucherIsChecking"></i>
<span class="text-danger" v-if="voucherCodeFailedReason">{{ voucherCodeFailedReason }}</span>
<span class="text-success" v-if="voucherCodeFailedReason === '' && voucherValidated">Voucher applied</span>
</div>
<div class="row m-t-5">
<div class="col">
<div class="row p-l-15 p-r-15">
<div class="col m-r-5 text-center">
@@ -406,7 +428,7 @@
<button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="expandPayment = false">Cancel</button>
</div>
<div class="col p-l-0">
<button id="create-booking" class="btn btn-xs all-caps b-rad-none btn-success btn-block" :class="[{'hide': paymentMethod.name === ''}]" @click="submitForm()">Create Booking</button>
<button id="create-booking" class="btn btn-xs all-caps b-rad-none btn-success btn-block" :class="[{'hide': ((paymentMethod.name === '' && !voucherValidated) || (paymentMethod.name !== '' && (!voucherValidated && voucherCode !== '')) || (paymentMethod.name === '' && voucherValidated)) }]" @click="submitForm()">Create Booking</button>
</div>
</div>
</div>
@@ -468,6 +490,17 @@
<div class="font-heading fs-12">MYR {{(Math.round((calculation.sub_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
</div>
</div>
<div class="row align-items-end m-b-10 hint-text">
<div class="col">
<div class="font-heading all-caps fs-12">Voucher</div>
</div>
<div class="col-auto text-right" v-if="calculation.voucher_discount_amount">
<div class="font-heading fs-12">- MYR {{(Math.round((calculation.voucher_discount_amount + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
</div>
<div class="col-auto text-right" v-else>
<div class="font-heading fs-12">- MYR 0.00</div>
</div>
</div>
<div class="row align-items-end m-b-5 hint-text">
<div class="col">
<div class="font-heading all-caps fs-12">Tax {{(Math.round((calculation.tax + Number.EPSILON) * 10) / 10).toFixed(1)}}%</div>
@@ -540,12 +573,16 @@
id: '',
status: false
},
onlinePayment: {
onlinePayment: {
id: '',
status: false
},
amount: (Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2),
calculation: null
calculation: null,
voucherCode: '',
voucherCodeFailedReason: '',
voucherValidated: false,
voucherIsChecking: false
}
},
validations () {
@@ -580,6 +617,7 @@
submitForm(){
this.parameters = {
payment_method: this.paymentMethod.id,
voucherCode: this.voucherCode,
amount: this.amount
};
@@ -587,7 +625,22 @@
this.calculation = null;
},
successHandler(response){
this.calculation = response.payload.data;
if(!response.payload.data){
this.voucherValidated = false;
this.voucherIsChecking = false;
this.voucherCodeFailedReason = 'Something went wrong. Please contact customer service.'
}
else if(response.payload.data.valid !== undefined && response.payload.data.code){ //applyVoucherCode()
this.voucherValidated = true;
if(response.payload.data.reason){
this.voucherCodeFailedReason = response.payload.data.reason;
this.voucherValidated = false;
}
this.voucherIsChecking = false;
}
else { //submitForm()
this.calculation = response.payload.data;
}
},
errorHandler(error) {
this.error = error.message;
@@ -600,9 +653,30 @@
cancelQuotation(){
this.calculation = null;
this.expandPayment = false;
},
applyVoucherCode(){
this.voucherIsChecking = true;
this.voucherCodeFailedReason = '';
this.voucherValidated = false;
this.parameters = {
voucherCode: this.voucherCode,
amount: this.amount
};
if(this.voucherCode.trim() !== ''){
this.submit(route('api.voucher.validate'), 'post', this.section, false, false);
}
else{
this.voucherValidated = true;
this.voucherIsChecking = false;
}
},
updateVoucherFlag(event){
this.voucherCodeFailedReason = '';
this.voucherValidated = false;
this.voucherCode = event.target.value;
}
},
mixins: [componentHandler],
directives: {money: VMoney}
}
</script>
</script>