@mframework/layer-commerce 0.0.3

package/app/pages/departments/[...slug].vue

@@ -0,0 +1,353 @@
+<template>
+    <div>
+        <div v-if="department?.name === 'Deals'">
+            <v-toolbar :style="`background-color: ${department?.color}; color: ${department?.colortext}`"
+                :title="department?.name"></v-toolbar>
+            <deals :category="department?.id" />
+        </div>
+
+        <div v-else>
+            <v-card variant="text">
+                <v-toolbar :style="`background-color: ${department?.color}; color: ${department?.colortext}`"
+                    :title="department?.name">
+                    <v-slide-group show-arrows v-if="department?.categories?.length">
+                        <v-slide-group-item v-slot="{ isSelected, toggle }">
+                            <v-menu>
+                                <template v-slot:activator="{ props }">
+                                    <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2" @click="toggle"
+                                        v-bind="props" append-icon="fas:fa fa-caret-down" variant="text">
+                                        Categories
+                                    </v-btn>
+                                </template>
+                                <v-list class="departmentMenu">
+                                    <v-row>
+                                        <v-col cols="3" v-for="categories in department?.categories"
+                                            :key="categories?.id">
+                                            <v-list-item>
+                                                <v-chip><NuxtLink
+                                                    :to="`/departments/category/${categories?.categories_id?.slug}`">
+                                                    {{ categories?.categories_id?.name }}</NuxtLink></v-chip>
+                                            </v-list-item>
+                                        </v-col>
+                                    </v-row>
+                                </v-list>
+                            </v-menu>
+                        </v-slide-group-item>
+
+                        <v-slide-group-item v-if="department?.menus?.length" v-for="menu in department?.menus"
+                            :key="menu" v-slot="{ isSelected, toggle }">
+                            <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2" @click="toggle"
+                                :href="`${menu?.url}`">
+                                {{ menu?.name }}
+                            </v-btn>
+                        </v-slide-group-item>
+                    </v-slide-group>
+                </v-toolbar>
+
+                <!--Department Top Banner Section-->
+                <section data-bs-version="5.1" class="pricing6 shopm5 cid-tZY31Y2JxZ" id="apricing6-6g">
+
+                    <div class="mbr-overlay"></div>
+                    <div class="container-fluid">
+                        <div class="row align-items-stretch items-row justify-content-center">
+
+                            <div class="col-lg-6">
+                                <div v-if="department?.name === 'Travel'">
+                                    <travel :category="department?.name" />
+                                </div>
+                                <!--<div v-else-if="department?.name === 'Appstore'">
+            <appstore :category="department?.name" />
+          </div>-->
+                                <div v-else-if="department?.name === 'Weather'">
+                                    <weather :category="department?.name" />
+                                </div>
+
+                                <div v-else-if="department?.name === 'Time'">
+                                    <timeComponent :category="department?.name" />
+                                </div>
+
+                                <div v-else class="mbr-section-head" :style="`background-color: ${department?.color}`">
+                                    <h4 class="mbr-section-title mbr-fonts-style mb-0 display-7"
+                                        :style="`color: ${department?.colortext}`">
+                                        <strong>Meeovi</strong>
+                                    </h4>
+                                    <h5 class="mbr-section-subtitle mbr-fonts-style mb-0 display-2"
+                                        :style="`color: ${department?.colortext}`">
+                                        <strong>{{ department?.name }}</strong>
+                                    </h5>
+                                    <h5 class="main-text mbr-fonts-style mb-0 display-7"
+                                        :style="`color: ${department?.colortext}`">
+                                        {{ department?.description }}
+                                    </h5>
+                                </div>
+                            </div>
+
+                            <v-sheet
+                                class="mx-auto col-lg-6" style="background-color: transparent; box-shadow: none;">
+                                <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 department?.products" :key="products">
+                                        <productCard :product="products?.products_id" :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>
+                        </div>
+                    </div>
+                </section>
+
+                <!--Department Content Section-->
+                <section data-bs-version="5.1" class="gallery2 shopm5 cid-uW1BojE78S" id="agallery2-0" v-if="department?.shorts?.length && department?.products?.products_id?.type === 'department'"
+                    :style="`background-image: url(${getAssetUrl(department?.image)})`">
+                    <div class="mbr-overlay" style="opacity: 0.8; background-color: rgb(255, 255, 255);">
+                    </div>
+
+                    <div class="container-fluid">
+                        <div class="row">
+                            <!--Vibez Slider-->
+                            <v-sheet
+                                class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+                                <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="shorts in department?.shorts" :key="shorts">
+                                        <shorts :short="shorts?.shorts_id" :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>
+                        </div>
+                    </div>
+                </section>
+
+                <v-row class="departmentRow">
+                    <!--Best Seller Product Slider-->
+                    <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 best?.products" :key="products">
+                                <productCard :product="products?.products_id" :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>
+
+                    <!--List of latest products in the department-->
+                    <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+                        <h4 style="left: 15px; position: relative;">{{ callouts?.menus?.[2]?.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 latestProducts?.products" :key="products">
+                                <productCard :product="products?.products_id" :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>
+
+                    <!--List of products in the department-->
+                    <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+                        <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 department?.products" :key="products">
+                                <productCard :product="products?.products_id" :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>
+
+                    <!--List of events in this department-->
+                    <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center"
+                        v-if="department?.products?.products_id?.type === 'department' && events?.length">
+                        <h4 style="left: 15px; position: relative;">{{ callouts?.menus?.[3]?.name }}
+                            {{ department?.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 events" :key="products">
+                                <productCard :product="products?.events_id" :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>
+                    <!---->
+
+                    <!--List of spaces in the department-->
+                    <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center"
+                        v-if="department?.spaces?.length">
+                        <h4 style="left: 15px; position: relative;">{{ callouts?.menus?.[4]?.name }}
+                            {{ department?.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="spaces in department?.spaces" :key="spaces">
+                                <spaces :space="spaces?.spaces_id" :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-row>
+            </v-card>
+        </div>
+    </div>
+</template>
+
+<script setup>
+        import productCard from '#commerce/app/components/catalog/product/productCard.vue'
+    import travel from '@/components/categories/travel.vue'
+    import deals from '@/components/categories/deals.vue'
+    import timeComponent from '@/components/categories/time/time.vue'
+    import weather from '@/components/categories/weather/weather.vue'
+
+    const route = useRoute()
+    const model = ref(null)
+import useDirectusRequest from '#shared/app/composables/useDirectusRequest'
+const { readItems, readItem, getAssetUrl } = useDirectusRequest()
+
+    const slug = computed(() => {
+        const s = route.params.slug
+        return Array.isArray(s) ? s[0] : s
+    })
+
+    const { data: departmentRaw } = await useAsyncData('department', async () => {
+        const resp = await readItems('departments', {
+            fields: [
+                '*',
+                'categories.categories_id.*',
+                'spaces.spaces_id.*',
+                'products.products_id.*',
+                'products.products_id.image.*',
+                'shorts.shorts_id.*',
+                'shops.shops_id.*',
+                'image.*'
+            ],
+            filter: { slug: { _eq: slug.value } },
+            limit: 1
+        })
+        return resp?.data || resp || []
+    })
+
+    const department = computed(() => departmentRaw.value?.[0] || null)
+
+    const { data: introProducts } = await useAsyncData('introProducts', async () => {
+        const resp = await readItems('departments', { fields: ['*', { '*': ['*'] }], limit: 2 })
+        return resp?.data || resp || []
+    })
+
+    const { data: best } = await useAsyncData('best', async () => {
+        const resp = await readItems('departments', {
+            fields: ['*', 'products.products_id.*', 'images.*'],
+            limit: 10,
+            filter: { showcases: { showcases_id: { name: { _eq: 'Best Sellers' } } } }
+        })
+        return resp?.data || resp || []
+    })
+
+    const {
+        data: latestProducts
+    } = await useAsyncData('latestProducts', () => {
+        return $directus.request($readItems('departments', {
+            fields: ['*',
+                'products.products_id.*',
+                'images.*'
+            ],
+            limit: 10,
+            filter: {
+                products: {
+                    products_id: {
+                        const { data: latestProducts } = await useAsyncData('latestProducts', async () => {
+                            const resp = await readItems('departments', {
+                                fields: ['*', 'products.products_id.*', 'images.*'],
+                                limit: 10,
+                                filter: {
+        data: limitProducts
+    } = await useAsyncData('limitProducts', () => {
+        return $directus.request($readItems('departments', {
+            fields: ['*',
+                'products.products_id.*',
+                'images.*'
+            ],
+                                }
+                            })
+                            return resp?.data || resp || []
+                        })
+                    products_id: {
+                        status: {
+                            _eq: "published"
+                        }
+                    }
+                },
+            }
+        }))
+    })
+
+    const {
+        data: events
+    } = await useAsyncData('events', () => {
+        return $directus.request($readItems('departments', {
+            fields: ['*',
+                'products.products_id.*',
+                'images.*'
+            ],
+            limit: 10,
+            filter: {
+                products: {
+                    products_id: {
+                        type: {
+                            _eq: "event"
+                        }
+                    }
+                },
+            }
+        }))
+    })
+
+    const {
+        data: callouts
+    } = await useAsyncData('callouts', () => {
+        return $directus.request($readItem('callouts', '2'))
+    })
+
+    useHead({
+        title: computed(() => department?.value?.name || 'Department Page')
+    });
+</script>

package/app/pages/departments/category/[...slug].vue

@@ -0,0 +1,114 @@
+<template>
+    <div v-if="category">
+
+        <!-- Special Categories -->
+        <div v-if="category.slug === 'charts'">
+            <charts />
+        </div>
+
+        <div v-else-if="category.slug === 'radio-stations'">
+            <stations />
+        </div>
+
+        <div v-else-if="category.slug === 'eats'">
+            <eats />
+        </div>
+
+        <div v-else-if="category.slug === 'restaurants'">
+            <div v-for="(shop, i) in restaurantsList" :key="i">
+                <restaurants :restaurant="shop" />
+            </div>
+        </div>
+
+        <!-- Default Category Layout -->
+        <v-card variant="text" v-else>
+            <v-toolbar :style="`background-color: ${category?.color}; color: ${category?.colortext}`">
+                <v-toolbar-title><NuxtLink :to="`/departments/${category?.departments?.[0]?.departments_id?.name}`">Meeovi {{ category?.departments?.[0]?.departments_id?.name }}</NuxtLink> - {{ category?.name }}</v-toolbar-title>
+                <v-slide-group show-arrows v-if="category?.categories?.length">
+                    <v-slide-group-item v-slot="{ isSelected, toggle }">
+                        <v-menu>
+                            <template #activator="{ props }">
+                                <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2" v-bind="props"
+                                    variant="text">
+                                    Categories
+                                </v-btn>
+                            </template>
+
+                            <v-list class="departmentMenu">
+                                <v-row>
+                                    <v-col cols="3" v-for="sub in category.categories" :key="sub?.categories_id?.id">
+                                        <v-list-item>
+                                            <NuxtLink :to="`/departments/categories/${sub.categories_id.id}`">
+                                                {{ sub.categories_id.name }}
+                                            </NuxtLink>
+                                        </v-list-item>
+                                    </v-col>
+                                </v-row>
+                            </v-list>
+                        </v-menu>
+                    </v-slide-group-item>
+
+                    <v-slide-group-item v-for="menu in category.menus" :key="menu.id" v-slot="{ isSelected, toggle }">
+                        <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2" :href="menu.url">
+                            {{ menu.name }}
+                        </v-btn>
+                    </v-slide-group-item>
+                </v-slide-group>
+            </v-toolbar>
+        </v-card>
+
+        <!-- Product List -->
+        <v-row>
+            <v-col cols="3" v-for="productRel in category.products" :key="productRel.products_id.id">
+                <productCard :product="productRel.products_id" />
+            </v-col>
+        </v-row>
+
+    </div>
+
+    <!-- Loading / Not Found -->
+    <div v-else class="p-10 text-center text-xl text-neutral-700">
+        Loading category...
+    </div>
+</template>
+
+<script setup>
+    import charts from '~/components/categories/charts.vue'
+    import stations from '~/components/categories/stations.vue'
+    import eats from '~/components/categories/eats.vue'
+    import restaurants from '~/components/categories/restaurants.vue'
+    import productCard from '~/components/catalog/product/productCard.vue'
+
+    const route = useRoute()
+import useDirectusRequest from '#shared/app/composables/useDirectusRequest'
+const { readItems, readItem } = useDirectusRequest()
+
+    const slug = computed(() => {
+        const s = route.params.slug
+        return Array.isArray(s) ? s[0] : s
+    })
+
+    const { data: categoryRaw } = await useAsyncData('categoryRaw', async () => {
+        const resp = await readItems('categories', {
+            fields: ['*', 'tags.tags_id.*', 'departments.departments_id.*', 'products.products_id.*', 'products.products_id.image.*', 'menus.*', 'image.*'],
+            filter: { slug: { _eq: slug.value } },
+            limit: 1
+        })
+        return resp?.data || resp || []
+    })
+
+    // Unwrap array cleanly
+    const category = computed(() => categoryRaw.value?.[0] || null)
+
+
+    // FETCH SHOPS FOR RESTAURANTS CATEGORY
+    const { data: restaurantsList } = await useAsyncData('restaurantsList', async () => {
+        const resp = await readItems('shops', { fields: ['*'] })
+        return resp?.data || resp || []
+    })
+
+    // SEO
+    useHead({
+        title: computed(() => category.value?.name || 'Category Page')
+    })
+</script>

package/app/pages/incentive/[...id].vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="firmm4_features1 features1 cid-uhBuptnWmV" id="features1-9v"
+            data-sortbtn="btn-primary">
+            <div class="container-fluid">
+                <div class="row justify-content-center">
+                    <div class="card">
+                        <div class="card_wrapper">
+                            <div class="card-box">
+                                <div class="icon_block">
+                                    <div class="iconfont-wrapper">
+                                        <span class="mbr-iconfont mobi-mbri-cart-full mobi-mbri"></span>
+                                    </div>
+                                </div>
+                                <p class="card-text mbr-fonts-style display-4">Invoice: {{ invoice?.id }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Invoice Date: {{ new Date(invoice?.created_at).toLocaleDateString() }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Order #: {{ invoice?.order_id?.orders_id?.id }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Order Date: {{ new Date(invoice?.updated_at).toLocaleDateString() }}
+                                </p>
+                                <p class="card-text mbr-fonts-style display-4">Bill to Name: {{ invoice?.user?.first_name }} {{ invoice?.user?.last_name }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Status: {{ invoice?.state }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Grand Total (Base): {{ invoice?.base_grand_total }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Grand Total (Purchased): {{ invoice?.grand_total }}</p>
+                                <p class="btn_link mbr-fonts-style display-4"><NuxtLink :to="`/commerce/invoice/${invoice?.id}`" class="text-secondary">View<span class="mobi-mbri mobi-mbri-right mbr-iconfont"></span></NuxtLink></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted
+    } from 'vue';
+    const route = useRoute();
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+    const user = useSupabaseUser()
+
+    const {
+        data: invoice
+    } = await useAsyncData('invoice', () => {
+        return $directus.request($readItem('invoices', route.params.id, {
+            filter: {
+                user: {
+                    _eq: `${user?.id}`
+                }
+            },
+            limit: 1
+        })).then(response => response?.[0])
+    })
+
+    useHead({
+        title: 'Invoice' + invoice?.value?.id || 'Invoice Page',
+    })
+
+    definePageMeta({
+        //middleware: ['auth-logged-in'],
+    })
+</script>