mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Dillon Ngo
113 lines
6.2 KiB
Vue
113 lines
6.2 KiB
Vue
<template>
|
||
<div class="row">
|
||
<div class="col">
|
||
<div v-if="vouchers && vouchers.length > 0" class="row fs-10 p-b-5">List of Vouchers, click to select</div>
|
||
<div class="row text-left no-margin bg-white p-b-10" 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">
|
||
<div class="col text-left no-padding">{{ item.voucher.code }}</div>
|
||
<div class="col text-right no-padding" v-if="item.voucher.type == 'AMOUNT'">
|
||
RM{{ item.voucher.value/100 }} Discount
|
||
</div>
|
||
<!-- <div class="col text-right no-padding" v-if="item.voucher.type == 'PERCENT'">
|
||
{{ item.voucher.value }}% Discount
|
||
</div> -->
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12 col-md-8 text-left no-padding">
|
||
<span v-if="item.voucher.end_date">
|
||
Valid till {{ item.voucher.end_date }}
|
||
</span>
|
||
<span v-else>
|
||
No expiry date
|
||
</span>
|
||
</div>
|
||
<div class="col-12 col-md-4 text-right no-padding">
|
||
<a class="requestModal" :data-type="'showVoucherTnC-' + item.id">Terms</a>
|
||
</div>
|
||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" size="extra-large" :type="'showVoucherTnC-' + item.id">
|
||
<div class="container">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
Terms & Conditions
|
||
</div>
|
||
<div class="card-body">
|
||
<ol>
|
||
<li>Vouchers are only valid for purchases made on <a href="https://exchange.cief-malaysia.com/" target="_blank">https://exchange.cief-malaysia.com/</a>.</li>
|
||
<li>Each voucher is applicable for a single transaction (unless stated otherwise).</li>
|
||
<li>Each voucher is only applicable for new orders.</li>
|
||
<li>Voucher codes are to be entered at the checkout or cart page (unless stated otherwise).</li>
|
||
<li>Vouchers are not valid for promotions or discounted products (unless stated otherwise).</li>
|
||
<li>Customers should take note of the expiry dates of the voucher(s) that they wish to redeem. Any voucher(s) which have expired will be invalid.</li>
|
||
<li>Individual vouchers are only valid during its respective promotion period. This guideline overrides any individual voucher policy (unless stated otherwise).</li>
|
||
<li>CIEF reserves the right to cancel any order if a customer’s purchasing behavior appears to be suspicious or potentially fraudulent.</li>
|
||
<li>CIEF vouchers are not exchangeable for cash at <a href="https://exchange.cief-malaysia.com/" target="_blank">https://exchange.cief-malaysia.com/</a>.</li>
|
||
<li>This voucher can only be used and redeemed by a registered customer who has already logged into their account during purchase.</li>
|
||
<li>CIEF reserves the right to amend the terms & conditions or cancel any vouchers/promotions without prior notice.</li>
|
||
<li>Additional terms & conditions are stated on the respective promotion banners (e.g., duration, discount amounts, validity for campaigns/promotions or certain services).</li>
|
||
</ol>
|
||
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</modal-component>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
section: {
|
||
type: String,
|
||
default: 'availableVouchersSection',
|
||
},
|
||
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_vouchers_all_with_company': 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>
|