exchange-2.0/resources/assets/vue/components/vouchers/sections/VoucherCampaignsSectionComponent.vue

<template>
    <div class="row" v-if="authStore.isAdmin">
        <div class="col">
            <div class="row m-b-10">
                <div class="col">
                    <div class="font-heading fs-16 all-caps bold m-b-15">Voucher Campaigns ALL CUSTOMERS</div>
                </div>
            </div>
            <div class="row m-b-10">
                <div class="col">
                    <div class="row padding-10">
                        <div class="col-2 fs-10">Name</div>
                        <div class="col-1 fs-10 text-center">Issued</div>
                        <div class="col-1 fs-10 text-center">Month</div>
                        <div class="col-1 fs-10 text-center">Limit Per Month</div>
                        <div class="col-3 fs-10">Campaign Id</div>
                    </div>

                    <list-component section="voucherCampaignsSection" :endpoint="route('api.voucher.campaigns.list')" :options="options">
                        <template #list="{ data }">
                            <single-voucher-campaign-item-component :data="data"></single-voucher-campaign-item-component>
                        </template>
                    </list-component>
                </div>
            </div>
            <div class="row m-b-10">
                <div class="col">
                    <div class="font-heading fs-16 all-caps bold m-b-15">Update Campaign End Date</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <select class="form-control" v-model="selectedCampaignId">
                        <option value="">Select campaign</option>
                        <option v-for="campaign in campaigns" :key="campaign.campaign_id" :value="campaign.campaign_id">
                            {{ campaign.name }} ({{ campaign.campaign_id }})
                        </option>
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="date" class="form-control" v-model="selectedEndDate">
                </div>
                <div class="col-md-3 d-flex align-items-center">
                    <button class="btn btn-primary" :disabled="!canUpdateCampaign" @click="updateCampaignEndDate">
                        Update
                    </button>
                    <span v-tooltip:top="'This only updates the display end date. The actual business logic end date must be updated in the Voucherify Dashboard.'" class="info-tooltip ml-2" style="cursor: pointer;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                        </svg>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import { useAuthStore } from '@/stores/auth';
import route from '@/general/functions/router';
import { useQueueStore } from '@/stores/queue';
import { useRequest } from '@/composables/useRequest';

const authStore = useAuthStore();
const queueStore = useQueueStore();
const { submit } = useRequest();

const campaigns = ref<Record<string, any>[]>([]);
const selectedCampaignId = ref('');
const selectedEndDate = ref('');

const options = {
    include_metadata: true,
    is_display: 1
};

const canUpdateCampaign = computed(() => Boolean(selectedCampaignId.value && selectedEndDate.value));

onMounted(async () => {
    await queueStore.fetchSelectable({ section: 'voucherCampaignsList', endpoint: route('api.voucher.campaigns.list') });
    campaigns.value = queueStore.getSelectableList('voucherCampaignsList');
});

const updateCampaignEndDate = async () => {
    if (!canUpdateCampaign.value) {
        return;
    }

    await submit(
        route('api.voucher.campaigns.update.end_date'),
        'post',
        'voucherCampaignsSection',
        true,
        true,
        {
            campaign_id: selectedCampaignId.value,
            end_date: selectedEndDate.value
        },
        {
            successHandler: () => {
                queueStore.reloadList({ name: 'voucherCampaignsSection' });
                queueStore.reloadList({ name: 'customerVouchersListSection' });
                queueStore.reloadList({ name: 'customerRewardsListSection' });
                queueStore.reloadList({ name: 'customerUsedVouchersListSection' });
                selectedCampaignId.value = '';
                selectedEndDate.value = '';
            }
        }
    );
};
</script>