exchange-2.0/resources/assets/vue/components/bookings/elements/AvailableVouchersComponent.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'">
                            <span v-if="item.voucher.value === 1">50% Discount</span>
                        </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>