mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-29 01:13:59 +00:00
Voucherify Phase 2 minor update
This commit is contained in:
Dillon
+1
-6
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<loading-component style="height: 100px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
|
||||
<div class="row text-left no-margin bg-white" v-if="!isLoading" v-for="item in vouchers" v-bind:key="item.id" >
|
||||
<div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" @click="selectVoucher(item)">
|
||||
<div class="row parentContainer">
|
||||
@@ -28,11 +27,7 @@
|
||||
props: {
|
||||
section: {
|
||||
type: String,
|
||||
default: 'vouchersDropDownListSection',
|
||||
},
|
||||
isClicked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: 'availableVouchersSection',
|
||||
},
|
||||
employee: {
|
||||
type: Object,
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<loading-component style="height: 100px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
|
||||
<div class="row align-items-center justify-content-center bg-white p-t-50 p-b-50" v-show="!isLoading && vouchers.length === 0">
|
||||
<div class="col-10">
|
||||
<div class="row align-items-center justify-content-center hint-text">
|
||||
<div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col">
|
||||
<div class="row m-t-20">
|
||||
<div class="col">
|
||||
<p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">You have no vouchers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-left no-margin bg-white" v-if="!isLoading" v-for="item in vouchers" v-bind:key="item.id" >
|
||||
<div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" @click="selectVoucher(item)">
|
||||
<div class="row parentContainer">
|
||||
<div class="col">
|
||||
<p>{{ item.voucher.code }}</p>
|
||||
<p v-if="item.voucher.type == 'AMOUNT'">RM{{ item.voucher.value/100 }} Discount</p>
|
||||
<p v-if="item.voucher.type == 'PERCENT'">{{ item.voucher.value }}% Discount</p>
|
||||
</div>
|
||||
<div class="col" v-if="item.voucher.end_date">
|
||||
Valid till {{ item.voucher.end_date }}
|
||||
</div>
|
||||
<div class="col" v-else>
|
||||
No expiry date
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
section: {
|
||||
type: String,
|
||||
default: 'vouchersDropDownListSection',
|
||||
},
|
||||
employee: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
vouchers: null,
|
||||
isLoading: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pendingQueue () {
|
||||
return this.$store.getters.isInCompleteQueue(this.section);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
pendingQueue(inComplete){
|
||||
if(inComplete){
|
||||
this.fetchVouchers();
|
||||
}
|
||||
},
|
||||
},
|
||||
created(){
|
||||
this.$store.dispatch('updateListQueue', {'name': this.section});
|
||||
},
|
||||
methods: {
|
||||
fetchVouchers(){
|
||||
this.isLoading = true;
|
||||
if(this.employee){
|
||||
this.submit(route('api.voucher.user.list') + '?filters=' + JSON.stringify( { 'has_active_reward': this.employee.id} ), 'get', this.section, false, false);
|
||||
}
|
||||
},
|
||||
successHandler(response){
|
||||
this.isLoading = false;
|
||||
this.$store.dispatch('completeList', {'name': this.section, 'data': []});
|
||||
this.vouchers = response.payload.data;
|
||||
},
|
||||
selectVoucher(item){
|
||||
this.$emit('selected-voucher', item.voucher.code);
|
||||
this.closeModal();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -253,7 +253,7 @@
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<!-- <modal-component id="choose-voucher-modal" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="voucherList">
|
||||
<list-vouchers :isClicked="!voucherListDropDownStatus" :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></list-vouchers>
|
||||
<list-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></list-vouchers-component>
|
||||
</modal-component> -->
|
||||
</div>
|
||||
<span class="text-primary bold text-underline m-l-5 cursor text-small fs-12" style="margin-bottom: -10px; margin-top: -5px;" @click="showApplyVoucher=!showApplyVoucher" v-show="!showApplyVoucher">Apply a voucher</span>
|
||||
@@ -262,6 +262,11 @@
|
||||
<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-l-0 m-r-0">
|
||||
<div class="col">
|
||||
<available-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></available-vouchers-component>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row m-t-5">
|
||||
<div class="col">
|
||||
<div class="row p-l-15 p-r-15">
|
||||
@@ -600,7 +605,6 @@
|
||||
voucherValidated: false,
|
||||
voucherIsChecking: false,
|
||||
showApplyVoucher: false,
|
||||
voucherListDropDownStatus: false,
|
||||
}
|
||||
},
|
||||
validations () {
|
||||
@@ -702,12 +706,8 @@
|
||||
this.voucherValidated = false;
|
||||
this.voucherCode = event.target.value;
|
||||
},
|
||||
toggleDropdown() {
|
||||
this.voucherListDropDownStatus = !this.voucherListDropDownStatus;
|
||||
},
|
||||
handleSelectedVoucher(value){
|
||||
this.voucherCode = value;
|
||||
this.voucherListDropDownStatus = !this.voucherListDropDownStatus;
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler],
|
||||
|
||||
Reference in New Issue
Block a user