@meeovi/layer-commerce 1.0.5 → 1.0.7

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

@@ -1,309 +0,0 @@
-<template>
-  <div class="contentPage">
-    <div v-if="loading">Loading...</div>
-    <div v-else-if="error">Error: {{ error.message }}</div>
-    <div v-else-if="product">
-      <v-row>
-        <v-col cols="12">
-          <v-row>
-            <v-col cols="12">
-              <div>
-                <productDetails :productDetails="product" />
-              </div>
-            </v-col>
-          </v-row>
-        </v-col>
-
-        <v-col cols="12">
-          <v-card elevation="0">
-            <v-tabs v-model="tab" :bg-color="productbar?.color">
-              <div v-for="(menu, index) in productbar?.menus" :key="index">
-                <v-tab v-if="menu?.active === 'Active'" :value="menu?.value">{{ menu?.name }}</v-tab>
-              </div>
-              <!-- <v-tab value="four">FAQS</v-tab>
-            <v-tab value="five">Compare</v-tab>-->
-              <v-tab value="six" v-if="product?.type === 'Grouped Product'">Products</v-tab>
-              <v-tab value="seven" v-if="product?.type === 'Bundled Product'">Products</v-tab>
-              <v-tab value="eight" v-if="product?.type === 'Configurable Product'">Products</v-tab>
-              <v-tab value="nine" v-if="product?.product_types?.product_types_id?.name === 'Gift Card'">Redeem</v-tab>
-            </v-tabs>
-
-            <v-card-text>
-              <v-window v-model="tab">
-                <!--Product Description-->
-                <v-window-item :value="productbar?.menus[0]?.value">
-                  <v-card variant="text">
-                    <v-card-text style="font-size: 20px;" v-dompurify-html="product?.content"></v-card-text>
-                  </v-card>
-                </v-window-item>
-
-                <!--Product Reviews-->
-                <v-window-item :value="productbar?.menus[1]?.value">
-                  <!---<div v-if="product?.reviews?.items?.length > 0">
-                  <div v-for="(review, index) in product?.reviews?.items" :key="index">
-                    <productReviews :review="review" />
-                  </div>
-                </div>-->
-                  <comments :productName="product?.name"
-                    :productImage="`${$directus.url}/assets/${product?.image?.filename_disk}`"
-                    :productSku="product?.id" />
-                </v-window-item>
-
-                <!--Product Specifications-->
-                <v-window-item :value="productbar?.menus[2]?.value">
-                  <productSpecs :product="product" />
-                </v-window-item>
-
-                <!--Product FAQs-->
-                <v-window-item :value="productbar?.menus[3]?.value">
-                  <v-expansion-panels v-for="(faqs, index) in product?.faqs?.faqs_id" :key="index">
-                    <v-expansion-panel :title="faqs.question" :text="faqs.answer">
-                    </v-expansion-panel>
-                  </v-expansion-panels>
-                </v-window-item>
-
-                <!--Product Compare List
-                <v-window-item :value="productbar?.menus[4]?.value">
-                  <productCompare />
-                </v-window-item>-->
-
-                <!-- Group Products List -->
-                <v-window-item value="six">
-                  <v-row v-if="product?.type === 'Grouped Product'">
-                    <v-col cols="4" v-for="item in groupedProducts?.products" :key="item">
-                      <productCard :product="item?.products_id" />
-                    </v-col>
-                  </v-row>
-
-                  <v-row v-else>
-                    <v-col cols="12">
-                      <p>No products in this group.</p>
-                    </v-col>
-                  </v-row>
-                </v-window-item>
-
-                <!--Bundle Products List-->
-                <v-window-item value="seven">
-                  <v-row v-if="product?.type === 'Bundled Product'">
-                    <v-col cols="4" v-for="(product, index) in bundledProducts?.products" :key="index">
-                      <productCard :product="product?.products_id" />
-                    </v-col>
-                  </v-row>
-
-                  <v-row v-else>
-                    <v-col cols="12">
-                      <p>No products in this bundle.</p>
-                    </v-col>
-                  </v-row>
-                </v-window-item>
-
-                <!--Configurable Products List-->
-                <v-window-item value="eight">
-                  <v-row v-if="product?.type === 'Configurable Product'">
-                    <v-col cols="4" v-for="(product, index) in configurableProducts?.products" :key="index">
-                      <productCard :product="product?.products_id" />
-                    </v-col>
-                  </v-row>
-
-                  <v-row v-else>
-                    <v-col cols="12">
-                      <p>No products in this configuration.</p>
-                    </v-col>
-                  </v-row>
-                </v-window-item>
-
-                <!--Gift Cards Redeem Information-->
-                <v-window-item value="nine">
-                  <v-row v-if="product?.product_types?.product_types_id?.name === 'Gift Card'">
-                    <v-col cols="12">
-                      <giftCard :gift="product" />
-                    </v-col>
-                  </v-row>
-
-                  <v-row v-else>
-                    <v-col cols="12">
-                      <p>Not a valid Gift Card.</p>
-                    </v-col>
-                  </v-row>
-                </v-window-item>
-              </v-window>
-            </v-card-text>
-          </v-card>
-        </v-col>
-
-        <v-col cols="12">
-          <!--Crossell Products-->
-          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
-            <h4>This product goes great together with...</h4>
-            <!--Crossell Products-->
-            <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-              <v-slide-group-item v-for="(crossSell, index) in product?.cross_sell_products" :key="index"
-                v-slot="{ isSelected, toggle, selectedClass }">
-                <productCard :product="crossSell?.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>
-
-          <!--Related Products-->
-          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
-            <h4>Related Products</h4>
-            <div v-if="product?.related_products?.length > 0">
-              <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-                <v-slide-group-item v-for="(relatedProduct, index) in product?.related_products" :key="index"
-                  v-slot="{ isSelected, toggle, selectedClass }">
-                  <productCard :product="relatedProduct?.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>
-            </div>
-            <div v-else>
-              <p>No related products available.</p>
-            </div>
-          </v-sheet>
-
-          <!--Product featured in Shops-->
-          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
-            <h4>Product featured in these Shops</h4>
-            <div v-if="product?.shops?.length > 0">
-              <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-                <v-slide-group-item v-for="(shops, index) in product?.shops" :key="index"
-                  v-slot="{ isSelected, toggle, selectedClass }">
-                  <shop :shop="shops?.shops_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>
-            </div>
-            <div v-else>
-              <p>Not featured in any shops.</p>
-            </div>
-          </v-sheet>
-
-          <!--Product featured in Vibez-->
-          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
-            <h4>Product featured in these Vibez</h4>
-            <div v-if="product?.shorts?.length > 0">
-              <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-                <v-slide-group-item v-for="(shorts, index) in product?.shorts" :key="index"
-                  v-slot="{ isSelected, toggle, selectedClass }">
-                  <short :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>
-            </div>
-            <div v-else>
-              <p>Not featured in any shorts.</p>
-            </div>
-          </v-sheet>
-
-          <!--Product featured in Spaces-->
-          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
-            <h4>Product featured in these Spaces</h4>
-            <div v-if="product?.spaces?.length > 0">
-              <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-                <v-slide-group-item v-for="(spaces, index) in product?.spaces" :key="index"
-                  v-slot="{ isSelected, toggle, selectedClass }">
-                  <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>
-            </div>
-            <div v-else>
-              <p>Not featured in any spaces.</p>
-            </div>
-          </v-sheet>
-        </v-col>
-      </v-row>
-    </div>
-    <div v-else>No product found</div>
-  </div>
-</template>
-
-<script setup>
-  import {
-    ref,
-    computed,
-    watch
-  } from 'vue';
-  import comments from '@/components/placeholders/Comments.vue'
-
-  import productDetails from '../../components/catalog/product/productDetails.vue'
-  import productSpecs from '../../components/catalog/product/productSpecs.vue'
-  import productCard from '../../components/catalog/product/productCard.vue'
-  import giftCard from '../../components/catalog/product/giftCard.vue'
-  import short from '@/components/placeholders/Short.vue'
-  import spaces from '@/components/placeholders/Space.vue'
-  import shop from '../../components/catalog/shops/stores.vue'
-
-  const tab = ref(null);
-  const model = ref(null);
-  const error = ref(null);
-  const loading = ref(false)
-
-  // Product query
-  const route = useRoute()
-
-  const { $commerce } = useNuxtApp()
-
-  const { data: product } = await useAsyncData('product', async () => {
-    return await $commerce.getProduct(route.params.id)
-  })
-
-  // Grouped/bundled products: Magento provider currently doesn't expose
-  // these specific relations via the generic interface. Fetch a small page
-  // of products as a fallback so the UI can render product cards.
-  const { data: groupedProducts } = await useAsyncData('groupedProducts', async () => {
-    return await $commerce.getProducts({ pageSize: 6 })
-  })
-
-  const { data: bundledProducts } = await useAsyncData('bundledProducts', async () => {
-    return await $commerce.getProducts({ pageSize: 6 })
-  })
-
-  const {
-    data: productBlocks
-  } = await useAsyncData('productBlocks', () => {
-    return $directus.request($readItem('page_blocks', '8', {
-      fields: ['*', 'media.directus_files_id.filename_disk', 'content.*'],
-    }))
-  })
-
-  const {
-    data: productbar
-  } = await useAsyncData('productbar', () => {
-    return $directus.request($readItem('navigation', '52'))
-  })
-
-  useHead({
-    title: computed(() => product?.value?.name || 'Product Page')
-  })
-
-  import { addViewed } from '../../composables/products/useRecentlyViewed'
-
-  watch(product, (newVal) => {
-    if (process.client && newVal?.id) {
-      addViewed(newVal.id)
-    }
-  }, { immediate: true })
-</script>

package/app/pages/product/showcases/index.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="contentPage">
-    <v-card elevation="0">
-      <v-toolbar :title="showcasebar?.name" :color="showcasebar?.color"></v-toolbar>
-
-      <v-tabs v-model="tab" bg-color="purple">
-        <div v-for="(menu, index) in showcasebar?.menus" :key="index">
-          <v-tab v-if="menu?.active === 'Active'" :value="menu?.value">{{ menu?.name }}</v-tab>
-        </div>
-      </v-tabs>
-
-      <v-card-text>
-        <v-tabs-window v-model="tab">
-          <!--Bundle Products List-->
-          <v-window-item :value="showcasebar?.menus[0]?.value">
-            <v-row>
-              <v-col cols="4" v-for="(product, index) in bundledProducts" :key="index">
-                <productCard :product="product" />
-              </v-col>
-            </v-row>
-          </v-window-item>
-
-          <!-- Group Products List -->
-          <v-window-item :value="showcasebar?.menus[1]?.value">
-            <v-row>
-              <v-col cols="4" v-for="item in groupedProducts" :key="item">
-                <productCard :product="item" />
-              </v-col>
-            </v-row>
-          </v-window-item>
-
-          <!--Bundle Products List-->
-          <v-window-item :value="showcasebar?.menus[2]?.value">
-            <v-row>
-              <v-col cols="4" v-for="(product, index) in subscriptions" :key="index">
-                <productCard :product="product" />
-              </v-col>
-            </v-row>
-          </v-window-item>
-        </v-tabs-window>
-      </v-card-text>
-    </v-card>
-  </div>
-</template>
-
-<script setup>
-  import {
-    ref,
-    computed
-  } from 'vue'
-  import productCard from '~/components/catalog/product/productCard.vue'
-
-  const tab = ref(null);
-
-  const { $commerce } = useNuxtApp()
-
-  const { data: groupedProducts } = await useAsyncData('groupedProducts', async () => {
-    return await $commerce.getProducts({ pageSize: 12 })
-  })
-
-  const { data: bundledProducts } = await useAsyncData('bundledProducts', async () => {
-    return await $commerce.getProducts({ pageSize: 12 })
-  })
-
-  const { data: subscriptions } = await useAsyncData('subscriptions', async () => {
-    return await $commerce.getProducts({ pageSize: 12 })
-  })
-
-  const {
-    data: productBlocks
-  } = await useAsyncData('productBlocks', () => {
-    return $directus.request($readItem('page_blocks', '8', {
-      fields: ['*', 'media.directus_files_id.filename_disk', 'content.*'],
-    }))
-  })
-
-  const {
-    data: showcasebar
-  } = await useAsyncData('showcasebar', () => {
-    return $directus.request($readItem('navigation', '54'))
-  })
-
-  useHead({
-    title: 'Showcases',
-  });
-</script>

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

@@ -1,176 +0,0 @@
-<template>
-    <div>
-        <!--<profilebar />-->
-        <section data-bs-version="5.1" class="features07 scalem5 cid-uhB4hw1yxB mbr-fullscreen" id="features07-9l">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-lg-10 card">
-                        <div class="title-wrapper">
-                            <h2 class="mbr-section-title mbr-fonts-style display-5">
-                                View Shipment</h2>
-                        </div>
-                    </div>
-                    <div class="col-12 col-lg-8">
-                        <div class="items-wrapper">
-                            <div class="item features-without-image item-mb">
-                                <div class="item-wrapper">
-                                    <div class="card-box">
-                                        <div class="icon-wrapper">
-                                            <span class="mbr-iconfont mobi-mbri-growing-chart mobi-mbri"></span>
-                                        </div>
-                                        <h4 class="card-title mbr-fonts-style display-7">
-                                            Order Information
-                                        </h4>
-                                        <a class="card-text mbr-fonts-style display-7" :href="`/order/${shipment?.order_id}`">Order #:
-                                            {{ shipment?.order_id }}</a>
-                                        <p class="card-text mbr-fonts-style display-7">Order Date:
-                                            {{ new Date(shipment?.created_at).toLocaleDateString() }}</p>
-                                        <p class="card-text mbr-fonts-style display-7">Order Status:
-                                            {{ shipment?.shipment_status }}</p>
-                                        <p class="card-text mbr-fonts-style display-7">Purchased From: {{ shipment?.store_id }}</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="item features-without-image item-mb">
-                                <div class="item-wrapper">
-                                    <div class="card-box">
-                                        <div class="icon-wrapper">
-                                            <span class="mbr-iconfont mobi-mbri-globe-2 mobi-mbri"></span>
-                                        </div>
-                                        <h4 class="card-title mbr-fonts-style display-7">
-                                            Account Information
-                                        </h4>
-                                        <p class="card-text mbr-fonts-style display-7">Customer Name: {{ shipment?.customer_id }}</p>
-                                        <p class="card-text mbr-fonts-style display-7">Email: {{ shipment?.email_sent }}</p>
-                                        <p class="card-text mbr-fonts-style display-7">Customer Group: </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="item features-without-image item-mb">
-                                <div class="item-wrapper">
-                                    <div class="card-box">
-                                        <div class="icon-wrapper">
-                                            <span class="mbr-iconfont mobi-mbri-delivery mobi-mbri"></span>
-                                        </div>
-                                        <h4 class="card-title mbr-fonts-style display-7">
-                                            Billing Address
-                                        </h4>
-                                        <p class="card-text mbr-fonts-style display-7">{{ shipment?.billing_address_id }}
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="item features-without-image item-mb">
-                                <div class="item-wrapper">
-                                    <div class="card-box">
-                                        <div class="icon-wrapper">
-                                            <span class="mbr-iconfont mobi-mbri-refresh mobi-mbri"></span>
-                                        </div>
-                                        <h4 class="card-title mbr-fonts-style display-7">
-                                            Shipping Address
-                                        </h4>
-                                        <p class="card-text mbr-fonts-style display-7">{{ shipment?.shipping_address_id }}
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="item features-without-image item-mb">
-                                <div class="item-wrapper">
-                                    <div class="card-box">
-                                        <div class="icon-wrapper">
-                                            <span class="mbr-iconfont mobi-mbri-responsive-2 mobi-mbri"></span>
-                                        </div>
-                                        <h4 class="card-title mbr-fonts-style display-7">
-                                            Payment Information
-                                        </h4>
-                                        <p class="card-text mbr-fonts-style display-7">The order was placed using
-                                            {{ shipment?.order_currency_code }}</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="item features-without-image item-mb">
-                                <div class="item-wrapper">
-                                    <div class="card-box">
-                                        <div class="icon-wrapper">
-                                            <span class="mbr-iconfont mobi-mbri-cash mobi-mbri"></span>
-                                        </div>
-                                        <h4 class="card-title mbr-fonts-style display-7">
-                                            Shipping and Tracking Information
-                                        </h4>
-                                        <p class="card-text mbr-fonts-style display-7">Carrier: {{ shipment?.tracks?.carrier_code }}</p>
-                                        <p class="card-text mbr-fonts-style display-7">Title: {{ shipment?.tracks?.title }}</p>
-                                        <p class="card-text mbr-fonts-style display-7">Weight: {{ shipment?.tracks?.weight }}</p>
-                                        <p class="card-text mbr-fonts-style display-7">Description: {{ shipment?.tracks?.description }}</p>
-                                        <p class="card-text mbr-fonts-style display-7">Tracking #: {{ shipment?.tracks?.track_number }}</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-            <img src="../../assets/images/background2.jpg" alt="Shipments">
-        </section>
-
-        <v-card title="Shipment Items" flat>
-            <div class="container">
-                <v-data-table :headers="headers" :items="shipment?.items" :items-per-page="5" class="elevation-1">
-                    <template v-slot:[`item.name`]="{ item }">
-                        <strong>{{ item.name }}</strong>
-                    </template>
-                    <template v-slot:[`item.qty`]="{ item }">
-                        {{ item.qty }}
-                    </template>
-                </v-data-table>
-            </div>
-        </v-card>
-    </div>
-</template>
-
-<script>
-    export default {
-        data: () => ({
-            headers: [{
-                    text: 'Product',
-                    value: 'name'
-                },
-                {
-                    text: 'Quantity',
-                    value: 'qty'
-                }
-            ],
-        }),
-    }
-</script>
-
-<script setup>
-    const route = useRoute();
-    
-    const {
-        $directus,
-        $readItem
-    } = useNuxtApp()
-    const user = useSupabaseUser()
-
-    const {
-        data: shipment
-    } = await useAsyncData('shipment', () => {
-        return $directus.request($readItem('shipments', route.params.id, {
-            filter: {
-                user: {
-                    _eq: `${user?.id}`
-                }
-            },
-            limit: 1
-        })).then(response => response?.[0])
-    })
-
-    useHead({
-        title: 'Shipment' + shipment?.value?.id || 'Shipment Page',
-    })
-
-    definePageMeta({
-        //middleware: ['auth-logged-in'],
-    })
-</script>