@meeovi/layer-commerce 1.0.10 → 1.0.13

package/app/components/marketing/promotions/giftcards.vue

@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <!---->
+        <v-row>
+            <v-col cols="12">
+                <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+                    <h4 style="left: 15px; position: relative;">{{ callouts?.menus?.[0]?.name }}</h4>
+                    <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                        <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
+                            v-for="products in mycards" :key="products">
+                            <productCard :product="products" :class="['ma-4', selectedClass]"
+                                @click="toggle" />
+                            <div class="d-flex fill-height align-center justify-center">
+                                <v-scale-transition>
+                                    <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline"
+                                        size="48"></v-icon>
+                                </v-scale-transition>
+                            </div>
+                        </v-slide-group-item>
+                    </v-slide-group>
+                </v-sheet>
+            </v-col>
+
+            <v-col cols="12">
+                <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+                    <h4 style="left: 15px; position: relative;">{{ callouts?.menus?.[1]?.name }}</h4>
+                    <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                        <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
+                            v-for="products in cards" :key="products">
+                            <productCard :product="products" :class="['ma-4', selectedClass]"
+                                @click="toggle" />
+                            <div class="d-flex fill-height align-center justify-center">
+                                <v-scale-transition>
+                                    <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline"
+                                        size="48"></v-icon>
+                                </v-scale-transition>
+                            </div>
+                        </v-slide-group-item>
+                    </v-slide-group>
+                </v-sheet>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import productCard from '~/components/catalog/product/productCard.vue'
+    import {
+        ref,
+        onMounted,
+        computed
+    } from 'vue';
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const model = ref(null);
+    const userStore = useUserStore()
+
+    const userDisplayName = computed(() => {
+        return userStore.name || userStore.username || 'User'
+    })
+
+    const { $commerce } = useNuxtApp()
+    import { useCatalogFallback } from '../../../composables/useCatalog'
+    const catalog = useCatalogFallback()
+
+    const {
+        data: cards
+    } = await useAsyncData('cards', async () => {
+        return await catalog.listProducts({
+            fields: ['*', 'image.*', 'currency.currency_id.*'],
+            filter: { product_types: { product_types_id: { name: { _eq: 'Gift Card' } } } }
+        })
+    })
+
+    const {
+        data: mycards
+    } = await useAsyncData('mycards', async () => {
+        // user-specific filtering may not map directly to adapters; fall back handled by composable
+        return await catalog.listProducts({
+            fields: ['*', 'image.*', 'currency.currency_id.*'],
+            filter: { product_types: { product_types_id: { name: { _eq: 'Gift Card' } } }, user: { directus_users: { _eq: `${userDisplayName.user.displayName}` } } }
+        })
+    })
+
+    const {
+        data: callouts
+    } = await useAsyncData('callouts', async () => {
+        // callouts remain stored in Directus; use Nuxt runtime for these CMS pieces
+        const nuxtApp = useNuxtApp() as any
+        return nuxtApp.$directus ? await nuxtApp.$directus.request(nuxtApp.$readItem('callouts', '4')) : null
+    })
+
+    useHead({
+        title: 'Gift Cards',
+    })
+
+    definePageMeta({
+        middleware: ['authenticated'],
+    })
+</script>

package/app/components/marketing/promotions/subscriptions.vue

@@ -0,0 +1,121 @@
+<template>
+    <div>
+        <v-row>
+            <v-col cols="12">
+                <v-toolbar title="Your Subscriptions" subtitle=""></v-toolbar>
+                <v-row class="accountRow">
+                    <v-col cols="3" v-for="(subscriptions, index) in mySubscriptions" :key="index">
+                        <v-card class="mx-auto" max-width="400">
+                            <img loading="lazy" class="align-end text-white" height="200"
+                            :src="subscriptions?.image?.filename_disk" :alt="subscriptions?.name" cover />
+                                <v-card-title>{{subscriptions?.name}}</v-card-title>
+                            <v-card-subtitle class="pt-4">
+                                Status: {{ subscriptions?.status }}
+                            </v-card-subtitle>
+
+                            <v-card-text>
+                                <div>Start Date: {{ subscriptions?.start_date }}</div>
+
+                                <div>End Date: {{ subscriptions?.end_date }}</div>
+                            </v-card-text>
+
+                            <v-card-actions>
+                                <v-btn color="red" :href="`/commerce/subscriptions/${subscriptions?.id}`">
+                                    Manage subscription
+                                </v-btn>
+                            </v-card-actions>
+                        </v-card>
+                    </v-col>
+                </v-row>
+            </v-col>
+
+            <v-col cols="12">
+                <v-toolbar title="Available Subscriptions" subtitle=""></v-toolbar>
+                <v-row class="accountRow">
+                    <v-col cols="3" v-for="(subscriptions, index) in subscriptions" :key="index">
+                        <v-card class="mx-auto" max-width="400">
+                            <NuxtImg loading="lazy" class="align-end text-white" height="200"
+                            :src="subscriptions?.image?.filename_disk" :alt="subscriptions?.name" cover />
+                                <v-card-title>{{subscriptions?.name}}</v-card-title>
+
+                            <v-card-subtitle class="pt-4">
+                                Status: {{ subscriptions?.status }}
+                            </v-card-subtitle>
+
+                            <v-card-text>
+                                <div>Start Date: {{ subscriptions?.start_date }}</div>
+
+                                <div>End Date: {{ subscriptions?.end_date }}</div>
+                            </v-card-text>
+
+                            <v-card-actions>
+                                <v-btn color="red">
+                                    Add to Cart
+                                </v-btn>
+                            </v-card-actions>
+                        </v-card>
+                    </v-col>
+                </v-row>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import productCard from '~/components/related/post.vue'
+    import { computed, unref } from 'vue'
+    // BetterAuth `useAuth()` fallback
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const auth: any = (globalThis as any).$useAuth ?? (typeof useAuth !== 'undefined' ? useAuth() : null)
+    const user = computed(() => {
+        if (!auth) return null
+        if (auth.user) return unref(auth.user) || null
+        if (auth.session) return unref(auth.session)?.user || null
+        return null
+    })
+
+    const { $commerce } = useNuxtApp()
+    import { useCatalogFallback } from '../../../composables/useCatalog'
+    const catalog = useCatalogFallback()
+    const tab = ref(null);
+
+    const {
+        data: incentiveBar
+    } = await useAsyncData('incentiveBar', async () => {
+        const resp = await $directus.request($readItem('navigation', '118', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+        return resp?.data ?? resp ?? null
+    })
+
+    const {
+        data: incentivePage
+    } = await useAsyncData('incentivePage', () => {
+        return $directus.request($readItem('pages', '86', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: subscriptions
+    } = await useAsyncData('subscriptions', async () => {
+        const resp = await catalog.listProducts({
+            fields: ['*', { '*': ['*'] }],
+            filter: { user_id: { _eq: user?.id }, type: { name: { _eq: 'Subscription' } } }
+        })
+        return resp || []
+    })
+
+
+    useHead({
+        title: 'Subscriptions',
+    })
+
+    definePageMeta({
+	  middleware: ['authenticated'],
+	})
+</script>

package/app/components/marketing/update-incentive.vue

@@ -0,0 +1,326 @@
+<!-- modify-rewards.vue -->
+<template>
+    <div class="rewards-dashboard">
+        <v-row>
+            <!-- Header -->
+            <v-col cols="12">
+                <v-toolbar color="primary">
+                    <v-toolbar-title>Modify Rewards</v-toolbar-title>
+                </v-toolbar>
+            </v-col>
+
+            <!-- Current Balance Card -->
+            <v-col cols="12" md="6">
+                <v-card class="mb-4">
+                    <v-card-title>Current Balance</v-card-title>
+                    <v-card-text>
+                        <div class="text-h4 text-primary">
+                            {{ currentBalance }} Points
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <!-- Active Rewards Card -->
+            <v-col cols="12" md="6">
+                <v-card class="mb-4">
+                    <v-card-title>Active Cart Rewards</v-card-title>
+                    <v-card-text>
+                        <v-list v-if="activeRewards.length">
+                            <v-list-item v-for="reward in activeRewards" :key="reward.cartId">
+                                <v-list-item-content>
+                                    <v-list-item-title>Cart ID: {{ reward.cartId }}</v-list-item-title>
+                                    <v-list-item-subtitle>Points: {{ reward.points }}</v-list-item-subtitle>
+                                </v-list-item-content>
+                                <v-list-item-action>
+                                    <v-btn color="error" small @click="removeReward(reward.cartId)"
+                                        :loading="removingReward === reward.cartId">
+                                        Remove
+                                    </v-btn>
+                                </v-list-item-action>
+                            </v-list-item>
+                        </v-list>
+                        <v-alert v-else type="info" text="No active rewards"></v-alert>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <!-- Modify Rewards Form -->
+            <v-col cols="12">
+                <v-card>
+                    <v-card-title>Modify Rewards</v-card-title>
+                    <v-card-text>
+                        <v-form ref="form" v-model="valid" @submit.prevent="handleModify">
+                            <v-row>
+                                <v-col cols="12" md="6">
+                                    <v-select v-model="formData.cartId" :items="activeRewards" item-text="cartId"
+                                        item-value="cartId" label="Select Cart" required
+                                        :rules="[v => !!v || 'Cart is required']"></v-select>
+                                </v-col>
+
+                                <v-col cols="12" md="6">
+                                    <v-text-field v-model="formData.points" label="New Points Amount" type="number"
+                                        required :rules="[
+                        v => !!v || 'Points are required',
+                        v => v >= 0 || 'Points must be non-negative'
+                      ]"></v-text-field>
+                                </v-col>
+
+                                <v-col cols="12">
+                                    <v-textarea v-model="formData.reason" label="Modification Reason" rows="3" required
+                                        :rules="[v => !!v || 'Reason is required']"></v-textarea>
+                                </v-col>
+                            </v-row>
+
+                            <!-- Action Buttons -->
+                            <v-row>
+                                <v-col cols="12" class="text-right">
+                                    <v-btn color="error" class="mr-4" @click="resetForm">
+                                        Reset
+                                    </v-btn>
+                                    <v-btn color="primary" type="submit" :loading="loading" :disabled="!valid">
+                                        Update Rewards
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                        </v-form>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <!-- Modification History -->
+            <v-col cols="12">
+                <v-card>
+                    <v-card-title>Modification History</v-card-title>
+                    <v-card-text>
+                        <v-data-table :headers="historyHeaders" :items="modificationHistory" :loading="loadingHistory"
+                            class="elevation-1">
+                            <template v-slot:item.points_change="{ item }">
+                                <span :class="item.points_change > 0 ? 'success--text' : 'error--text'">
+                                    {{ item.points_change > 0 ? '+' : '' }}{{ item.points_change }}
+                                </span>
+                            </template>
+                            <template v-slot:item.modified_at="{ item }">
+                                {{ formatDate(item.modified_at) }}
+                            </template>
+                        </v-data-table>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <!-- Snackbar for notifications -->
+        <v-snackbar v-model="snackbar.show" :color="snackbar.color">
+            {{ snackbar.message }}
+            <template v-slot:action="{ attrs }">
+                <v-btn text v-bind="attrs" @click="snackbar.show = false">
+                    Close
+                </v-btn>
+            </template>
+        </v-snackbar>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted
+    } from 'vue';
+    import {
+        getRewardBalance,
+        useRewardPoints,
+        removeRewardPoints,
+        getRewardHistory
+    } from '#commerce/app/composables/commerce/marketing/useReward';
+
+    // State
+    const currentBalance = ref(0);
+    const activeRewards = ref([]);
+    const modificationHistory = ref([]);
+    const loading = ref(false);
+    const loadingHistory = ref(false);
+    const removingReward = ref(null);
+    const valid = ref(false);
+    const form = ref(null);
+
+    const formData = ref({
+        cartId: '',
+        points: '',
+        reason: ''
+    });
+
+    const snackbar = ref({
+        show: false,
+        message: '',
+        color: 'success'
+    });
+
+    // Table headers for history
+    const historyHeaders = [{
+            text: 'Date',
+            value: 'modified_at'
+        },
+        {
+            text: 'Cart ID',
+            value: 'cart_id'
+        },
+        {
+            text: 'Points Change',
+            value: 'points_change'
+        },
+        {
+            text: 'Reason',
+            value: 'reason'
+        },
+        {
+            text: 'Modified By',
+            value: 'modified_by'
+        }
+    ];
+
+    // Methods
+    const loadInitialData = async () => {
+        try {
+            // Load balance
+            const balance = await getRewardBalance();
+            currentBalance.value = balance;
+
+            // Load active rewards
+            await loadActiveRewards();
+
+            // Load modification history
+            await loadHistory();
+        } catch (error) {
+            showError('Error loading initial data');
+            console.error('Error loading initial data:', error);
+        }
+    };
+
+    const loadActiveRewards = async () => {
+        // Implementation depends on your API structure
+        // This is a placeholder
+        activeRewards.value = [];
+    };
+
+    const loadHistory = async () => {
+        loadingHistory.value = true;
+        try {
+            const history = await getRewardHistory({
+                pageSize: 10,
+                currentPage: 1,
+                filters: [{
+                    field: 'type',
+                    value: 'modification',
+                    conditionType: 'eq'
+                }]
+            });
+            modificationHistory.value = history.items || [];
+        } catch (error) {
+            showError('Error loading modification history');
+            console.error('Error loading history:', error);
+        } finally {
+            loadingHistory.value = false;
+        }
+    };
+
+    const handleModify = async () => {
+        if (!valid.value) return;
+
+        loading.value = true;
+        try {
+            // Remove existing rewards
+            await removeRewardPoints(formData.value.cartId);
+
+            // Add new rewards if points > 0
+            if (formData.value.points > 0) {
+                await useRewardPoints(formData.value.cartId);
+            }
+
+            // Refresh data
+            await loadInitialData();
+
+            showSuccess('Rewards modified successfully');
+            resetForm();
+        } catch (error) {
+            showError('Error modifying rewards');
+            console.error('Error modifying rewards:', error);
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const removeReward = async (cartId) => {
+        removingReward.value = cartId;
+        try {
+            await removeRewardPoints(cartId);
+            await loadInitialData();
+            showSuccess('Rewards removed successfully');
+        } catch (error) {
+            showError('Error removing rewards');
+            console.error('Error removing rewards:', error);
+        } finally {
+            removingReward.value = null;
+        }
+    };
+
+    const resetForm = () => {
+        if (form.value) {
+            form.value.reset();
+        }
+        formData.value = {
+            cartId: '',
+            points: '',
+            reason: ''
+        };
+    };
+
+    const showSuccess = (message) => {
+        snackbar.value = {
+            show: true,
+            message,
+            color: 'success'
+        };
+    };
+
+    const showError = (message) => {
+        snackbar.value = {
+            show: true,
+            message,
+            color: 'error'
+        };
+    };
+
+    const formatDate = (date) => {
+        return new Date(date).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+
+    // Lifecycle
+    onMounted(() => {
+        loadInitialData();
+    });
+
+    // Meta
+    definePageMeta({
+        layout: 'dashboard'
+    });
+
+    useHead({
+        title: 'Modify Rewards',
+    });
+</script>
+
+<style scoped>
+    .rewards-dashboard {
+        padding: 20px;
+    }
+
+    .v-data-table {
+        background: transparent !important;
+    }
+</style>

package/app/components/menus/lowernav.vue

@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <v-card variant="text" class="lowerBar">
+            <v-tabs v-model="tab" :bg-color="lowerbar?.color" :color="lowerbar?.colortext" align-tabs="center">
+                <v-tab>
+                    <NuxtLink style="color: black;" to="/">{{ lowerbar?.name }}</NuxtLink>
+                </v-tab>
+                <div v-for="(menu, index) in lowerbar?.menus" :key="index">
+                    <v-tab :value="menu?.value">
+                        <v-btn variant="text" :style="`color: ${lowerbar?.colortext} !important`"
+                            :href="menu?.slug">{{ menu?.name }}</v-btn>
+                    </v-tab>
+                </div>
+
+                <v-btn variant="text" prepend-icon="fas fa-plus" class="lowerBarBtn">
+                    Add
+
+                    <v-menu activator="parent">
+                        <v-list lines="two">
+                            <v-list-item>
+                                <!--<addList />-->
+                            </v-list-item>
+
+                            <v-list-item>
+                                <!--<addBookmark />-->
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+            </v-tabs>
+        </v-card>
+
+        <!--<v-tabs-window v-model="tab">
+            <v-tabs-window-item :value="lowerbar?.menus?.[0]?.value">
+                <myLists />
+            </v-tabs-window-item>
+            <v-tabs-window-item :value="lowerbar?.menus?.[1]?.value">
+                <bookmarks />
+            </v-tabs-window-item>
+            <v-tabs-window-item :value="lowerbar?.menus?.[2]?.value">
+                <starredLists />
+            </v-tabs-window-item>
+            <v-tabs-window-item :value="lowerbar?.menus?.[3]?.value">
+                <archivedLists />
+            </v-tabs-window-item>
+        </v-tabs-window>-->
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    //import addList from '~/components/related/add-list.vue'
+    //import addBookmark from '~/components/related/add-bookmark.vue'
+    //import myLists from '~/components/features/lists.vue'
+    //import bookmarks from '~/components/features/bookmarks.vue'
+    //import starredLists from '~/components/features/starred.vue'
+    //import archivedLists from '~/components/features/archived.vue'
+
+    const tab = ref(null);
+
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+    const route = useRoute()
+
+    const {
+        data: lowerbar
+    } = await useAsyncData('lowerbar', () => {
+        return $directus.request($readItem('navigation', '46', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>

package/app/components/partials/LocaleSelector.vue

@@ -0,0 +1,24 @@
+<template>
+    <select aria-label="Select language"
+        class="mt-1 block w-full p-2.5 border border-secondary-300 text-secondary-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-light"
+        @change="onChangeHandler">
+        <option v-for="locale in availableLocales" :key="locale" :value="locale"
+            :selected="currentLocale === locale" :label="locale">
+            {{ locale }}
+        </option>
+    </select>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { ref, computed } from 'vue';
+
+const { locale, availableLocales, t } = useI18n();
+const currentLocale = computed(() => locale.value);
+
+const onChangeHandler = (event: Event) => {
+    const lang = (event.target as HTMLSelectElement).value;
+    locale.value = lang as typeof locale.value;
+    window.location.reload();
+};
+</script>