@mframework/layer-commerce 0.0.5 → 0.0.8

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

@@ -0,0 +1,134 @@
+<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 {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+    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 $directus.request($readItems('products', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                },
+                type: {
+                    name: {
+                        _eq: 'Subscription'
+                    }
+                }
+            }
+        }))
+        return resp?.data ?? 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>

package/app/components/partials/ShoppingCart.vue

@@ -0,0 +1,128 @@
+<template>
+  <v-sheet class="pa-4" elevation="2">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-lg font-semibold">Your Cart ({{ cartStore.itemCount }})</h3>
+      <v-btn color="primary" variant="tonal" @click="proceedToCheckout" :disabled="cartStore.isEmpty || cartStore.loading">
+        Proceed to Checkout
+      </v-btn>
+    </div>
+
+    <v-divider />
+
+    <div v-if="cartStore.loading" class="py-6 text-center">Loading cart…</div>
+
+    <div v-else>
+      <v-list two-line>
+        <v-list-item v-for="item in cartItems" :key="item.id" class="py-4">
+          <PartialsCartItem :item="item" @cart-changed="initialize" />
+        </v-list-item>
+      </v-list>
+
+      <v-divider class="my-4" />
+
+      <div class="flex flex-col gap-2">
+        <div class="flex justify-between">
+          <span>Subtotal</span>
+          <span>{{ formatPrice(cartStore.subtotal) }}</span>
+        </div>
+        <div class="flex justify-between">
+          <span>Tax</span>
+          <span>{{ formatPrice(cartStore.taxAmount) }}</span>
+        </div>
+        <div class="flex justify-between font-semibold text-lg">
+          <span>Total</span>
+          <span>{{ formatPrice(cartStore.total) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="cartStore.error" class="mt-4 text-sm text-error">{{ cartStore.error }}</div>
+  </v-sheet>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue'
+import { useCartStore } from '~/stores/cart'
+import { useRouter } from 'vue-router'
+
+const cartStore = useCartStore()
+const router = useRouter()
+
+const placeholder = '/_assets/placeholder.png'
+
+const quantities = ref({})
+
+const cartItems = computed(() => (cartStore.cart?.items || []))
+
+const initialize = async () => {
+  await cartStore.initializeCart()
+  // initialize local quantity map
+  cartItems.value.forEach((it) => {
+    quantities.value[it.id] = it.quantity
+  })
+}
+
+onMounted(() => {
+  initialize()
+})
+
+watch(cartItems, (newItems) => {
+  // keep local quantities in sync when items change
+  newItems.forEach((it) => {
+    if (!quantities.value[it.id]) quantities.value[it.id] = it.quantity
+  })
+})
+
+const getImageUrl = (item) => {
+  const file = item.product?.images?.[0]
+  const config = useRuntimeConfig()
+  if (file && file.id) return `${config.public.directus.url}/assets/${file.id}`
+  return placeholder
+}
+
+const formatPrice = (value) => {
+  const amount = typeof value === 'number' ? value : Number(value || 0)
+  return new Intl.NumberFormat(undefined, { style: 'currency', currency: cartStore.cart?.currency || 'USD' }).format(amount)
+}
+
+const removeItem = async (item) => {
+  await cartStore.removeProductFromCart(item.id)
+}
+
+const updateQty = async (itemId, qty) => {
+  qty = Number(qty)
+  if (isNaN(qty) || qty < 1) return
+  await cartStore.updateProductQuantity(itemId, qty)
+}
+
+const onQtyChange = async (item) => {
+  const newQty = quantities.value[item.id]
+  await updateQty(item.id, newQty)
+}
+
+const increaseQty = async (item) => {
+  quantities.value[item.id] = (quantities.value[item.id] || item.quantity) + 1
+  await updateQty(item.id, quantities.value[item.id])
+}
+
+const decreaseQty = async (item) => {
+  const newVal = (quantities.value[item.id] || item.quantity) - 1
+  if (newVal <= 0) {
+    // remove item
+    await removeItem(item)
+    return
+  }
+  quantities.value[item.id] = newVal
+  await updateQty(item.id, newVal)
+}
+
+const proceedToCheckout = () => {
+  // navigate to a checkout route; adjust if project uses a different path
+  router.push('/checkout')
+}
+</script>
+
+<style scoped>
+.v-list-item { align-items: flex-start; }
+.w-24 { width: 6rem; }
+</style>