@meeovi/layer-commerce 1.0.11 → 1.0.14

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

@@ -0,0 +1,86 @@
+<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

@@ -0,0 +1,176 @@
+<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>

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

@@ -0,0 +1,158 @@
+<template>
+  <div class="contentPage">
+    <section data-bs-version="5.1" class="features02 essencem5 cid-uHg1VExDxg" id="features02-aq"
+      data-sortbtn="btn-primary">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <div class="title-wrapper">
+              <h2 class="mbr-section-title mbr-fonts-style display-2">
+                <strong>{{ shop?.name }}</strong>
+              </h2>
+            </div>
+          </div>
+          <div class="col-12">
+            <div class="card-wrapper">
+              <div class="item-img">
+                <NuxtImg loading="lazy" class="align-end text-white" v-if="shop?.image"
+                  :src="`${$directus.url}/assets/${shop?.image?.filename_disk}`" :alt="shop?.name" cover />
+                <div class="card-box">
+                  <div class="icon-wrapper">
+                    <span class="mbr-iconfont mobi-mbri-contact-form mobi-mbri"></span>
+                  </div>
+                  <h4 class="card-title mbr-fonts-style display-5">
+                    <strong>{{ shop?.name }}</strong>
+                  </h4>
+
+                  <div>
+                    <div>
+                      <p>Email: {{ shop?.store_email }}</p>
+                    </div>
+
+                    <div>
+                      <p>Phone: {{ shop?.store_phone }}</p>
+                    </div>
+
+                    <div>
+                      <p>Shipping Policy: {{ shop?.store_shipping_policy }}</p>
+                    </div>
+
+                    <div>
+                      <p>Address: {{ shop?.store_address }}</p>
+                    </div>
+
+                    <div>
+                      <p>Country: {{ shop?.store_country }}</p>
+                    </div>
+                  </div>
+                  <p class="card-text mbr-fonts-style display-7" v-dompurify-html="shop?.description"></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <v-card elevation="0">
+      <v-tabs v-model="tab" bg-color="info" align-tabs="center">
+        <v-tab v-for="(menu, index) in shopbar?.menus" :key="index">
+          <NuxtLink :to="menu?.url">{{ menu?.name }}</NuxtLink>
+        </v-tab>
+      </v-tabs>
+
+      <v-card-text>
+        <v-tabs-window v-model="tab">
+
+          <v-tabs-window-item :value="shopbar?.menus[1]?.value">
+            <div v-for="(products, index) in shop?.products" :key="index">
+              <productCard :product="products?.products_id" />
+            </div>
+          </v-tabs-window-item>
+
+          <v-tabs-window-item :value="shopbar?.menus[2]?.value">
+            <div v-for="(showcases, index) in shop?.showcases" :key="index">
+              <showcases :product="showcases?.showcases_id" />
+            </div>
+          </v-tabs-window-item>
+
+          <v-tabs-window-item :value="shopbar?.menus[3]?.value">
+            <div v-for="(comments, index) in shop?.comments" :key="index">
+              <comments :comments="comments?.comments_id" />
+            </div>
+          </v-tabs-window-item>
+
+          <v-tabs-window-item :value="shopbar?.menus[4]?.value">
+            <div v-for="(spaces, index) in shop?.spaces" :key="index">
+              <spaces :space="spaces?.spaces_id" />
+            </div>
+          </v-tabs-window-item>
+
+          <v-tabs-window-item :value="shopbar?.menus[5]?.value">
+            <div v-for="(events, index) in shop?.events" :key="index">
+              <events :space="events?.events_id" />
+            </div>
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import showcases from '~/components/catalog/product/relatedproducts.vue'
+  import productCard from '~/components/catalog/product/productCard.vue'
+  import comments from '@/components/placeholders/Comments.vue'
+  import spaces from '@/components/placeholders/Space.vue'
+  import events from '@/components/placeholders/Event.vue'
+  import { useContentFallback } from '../../composables/useContent'
+
+  const route = useRoute();
+  const tab = ref(null);
+  const { $directus, $readItem } = useNuxtApp()
+
+  const slug = computed(() => {
+    const s = route.params.slug
+    return Array.isArray(s) ? s[0] : s
+  })
+
+  const content = useContentFallback()
+
+  const { data: shopRaw } = await useAsyncData('shop', () => {
+    return content.listShops({
+      fields: ['*',
+        'media.*',
+        'spaces.spaces_id.*',
+        'events.events_id.*',
+        'products.products_id.*',
+        'products.products_id.image.*',
+        'showcases.showcases_id.*',
+        'comments.comments_id.*',
+        'shorts.shorts_id.*',
+        'image.*',
+        'country.country_id.*'
+      ],
+      filter: {
+        slug: {
+          _eq: slug.value
+        }
+      },
+      limit: 1
+    })
+  })
+
+  const shop = computed(() => shopRaw.value?.[0] || null)
+
+  const { data: shopbar } = await useAsyncData('shopbar', () => {
+    return $directus.request($readItem('navigation', '55'))
+  })
+
+  definePageMeta({
+    layout: 'nolive',
+  });
+
+  useHead({
+    title: computed(() => shop.value?.name || 'Shop Page')
+  })
+</script>

package/app/pages/shops.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="contentPage">
+    <v-card elevation="0">
+      <v-toolbar title="Shops on Meeovi" color="green"></v-toolbar>
+      <v-tabs v-model="tab" bg-color="green" align-tabs="center">
+        <v-tab v-if="shopbar?.active === 'Active'" v-for="(menu, index) in shopbar?.menus" :key="index">
+          <NuxtLink :to="menu?.url">{{ menu?.name }}</NuxtLink>
+        </v-tab>
+      </v-tabs>
+
+      <v-card-text>
+        <v-tabs-window v-model="tab">
+          <v-tabs-window-item :value="shopbar?.menus[0]?.value">
+            <section data-bs-version="5.1" class="clients1 cid-uHg1k6KLf8" id="clients1-ap">
+              <div class="container">
+                <div class="row justify-content-center">
+                  <div class="card col-12 col-md-6 col-lg-4" v-for="(shop, index) in stores" :key="index">
+                    <store :store="shop" />
+                  </div>
+                </div>
+              </div>
+            </section>
+          </v-tabs-window-item>
+
+          <v-tabs-window-item :value="shopbar?.menus[1]?.value">
+            <section data-bs-version="5.1" class="clients1 cid-uHg1k6KLf8" id="clients1-ap">
+              <div class="container">
+                <div class="row justify-content-center">
+                  <div class="card col-12 col-md-6 col-lg-4" v-for="(shop, index) in stores" :key="index">
+                    <store :store="shop" />
+                  </div>
+                </div>
+              </div>
+            </section>
+          </v-tabs-window-item>
+
+          <v-tabs-window-item :value="shopbar?.menus[2]?.value">
+            <section data-bs-version="5.1" class="clients1 cid-uHg1k6KLf8" id="clients1-ap">
+              <div class="container">
+                <div class="row justify-content-center">
+                  <div class="card col-12 col-md-6 col-lg-4" v-for="(shop, index) in stores" :key="index">
+                    <store :store="shop" />
+                  </div>
+                </div>
+              </div>
+            </section>
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useHead, useNuxtApp, useAsyncData } from '#imports'
+  import store from '../components/catalog/shops/stores.vue'
+
+  const tab = ref(null)
+  
+  import { useContentFallback } from '../composables/useContent'
+  const content = useContentFallback()
+
+  const { data: stores } = await useAsyncData('stores', async () => {
+    return await content.listShops({ fields: ['*', { '*': ['*'] }] })
+  })
+
+  const { data: shopbar } = await useAsyncData('shopbar', () => {
+    const nuxtApp = useNuxtApp() as any
+    return nuxtApp.$directus ? nuxtApp.$directus.request(nuxtApp.$readItem('navigation', '55')) : null
+  })
+
+  useHead({
+    title: 'Shops on Meeovi',
+  })
+</script>

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

@@ -0,0 +1,147 @@
+<template>
+    <div>
+        <!---->
+        <section data-bs-version="5.1" class="features14 cid-u3U56NDZtd" id="features15-7o" data-sortbtn="btn-primary">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="card col-12 col-md-6 col-lg-4">
+                        <div class="card-wrapper">
+                            <span class="mbr-iconfont mobi-mbri-protect mobi-mbri m-auto"></span>
+                            <div class="card-box">
+                                <h4 class="card-title mbr-fonts-style mb-2 display-7"><strong>Subscribed On</strong></h4>
+                                <h5 class="card-text mbr-fonts-style display-4">{{ subscription?.start_date}}</h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card col-12 col-md-6 col-lg-4">
+                        <div class="card-wrapper">
+                            <span class="mbr-iconfont m-auto mobi-mbri-website-theme-2 mobi-mbri"></span>
+                            <div class="card-box">
+                                <h4 class="card-title mbr-fonts-style mb-2 display-7"><strong>Subscription #</strong></h4>
+                                <h5 class="card-text mbr-fonts-style display-4">{{ subscription?.id}}</h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card col-12 col-md-6 col-lg-4">
+                        <div class="card-wrapper">
+                            <span class="mbr-iconfont m-auto mobi-mbri-features mobi-mbri"></span>
+                            <div class="card-box">
+                                <h4 class="card-title mbr-fonts-style mb-2 display-7">
+                                    <strong>View or Print Invoice</strong></h4>
+                                <h5 class="card-text mbr-fonts-style display-4"></h5>
+                            </div>
+
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+
+        <section data-bs-version="5.1" class="contacts2 cid-u3U5tKf7Hq" id="contacts2-7p" data-sortbtn="btn-primary">
+            <div class="container">
+
+                <div class="row justify-content-center mt-4">
+                    <div class="card col-12 col-md-6">
+                        <div class="card-wrapper">
+                            <div class="image-wrapper">
+                                <span class="mbr-iconfont mobi-mbri-home mobi-mbri"></span>
+                            </div>
+                            <div class="text-wrapper">
+                                <h6 class="card-title mbr-fonts-style mb-1 display-5">
+                                    <strong>Shipping Address</strong></h6>
+                                <p class="mbr-text mbr-fonts-style display-7">{{ subscription?.customer?.customers_id?.address }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card col-12 col-md-6">
+                        <div class="card-wrapper">
+                            <div class="image-wrapper">
+                                <span class="mbr-iconfont mobi-mbri-cash mobi-mbri"></span>
+                            </div>
+                            <div class="text-wrapper">
+                                <h6 class="card-title mbr-fonts-style mb-1 display-5">
+                                    <strong>Payment Method</strong></h6>
+                                <p class="mbr-text mbr-fonts-style display-7">
+                                    <NuxtLink to="mailto:info@site.com" class="text-primary">{{ subscription?.customer?.customers_id?.payment }}</NuxtLink>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card col-12 col-md-6">
+                        <div class="card-wrapper">
+                            <div class="image-wrapper">
+                                <span class="mbr-iconfont mobi-mbri-contact-form mobi-mbri"></span>
+                            </div>
+                            <div class="text-wrapper">
+                                <h6 class="card-title mbr-fonts-style mb-1 display-5">
+                                    <strong>Order Summary</strong></h6>
+                                <p class="mbr-text mbr-fonts-style display-7" v-for="customers in subscription?.customer?.customers_id">Item(s) Subtotal: ${{ customer?.subscription?.orders_id?.total_before_tax }}
+                                    <br>Shipping &amp; Handling: ${{ customer?.subscription?.orders_id?.shipping_handling }}
+                                    <br>Total before tax: ${{ customer?.subscription?.orders_id?.total_before_tax }}
+                                    <br>Estimated tax to be collected: ${{ customer?.subscription?.orders_id?.tax }}
+                                    <br>Grand Total: ${{ customer?.subscription?.orders_id?.total_price }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card col-12 col-md-6">
+                        <div class="card-wrapper">
+                            <div class="image-wrapper">
+                                <span class="mbr-iconfont mobi-mbri-bulleted-list mobi-mbri"></span>
+                            </div>
+                            <div class="text-wrapper">
+                                <h6 class="card-title mbr-fonts-style mb-1 display-5">
+                                    <strong>Receipt</strong></h6>
+                                <p class="mbr-text mbr-fonts-style display-7"></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import productCard from '~/app/components/catalog/product/productCard.vue'
+
+
+    export default {
+        components: { productCard, profilebar},
+        data: () => ({
+            model: null,
+            url: process.env.DIRECTUS_URL,
+        }),
+    }
+</script>
+
+<script setup>
+    const route = useRoute();
+    
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+    const user = useSupabaseUser()
+
+    const {
+        data: subscription
+    } = await useAsyncData('subscription', () => {
+        return $directus.request($readItem('subscriptions', route.params.id, {
+            filter: {
+                user: {
+                    _eq: `${user?.id}`
+                }
+            },
+            limit: 1
+        })).then(response => response?.[0])
+    })
+
+    useHead({
+        title: subscription?.value?.id || 'Subscription Page',
+    })
+
+	definePageMeta({
+	  middleware: ['authenticated'],
+	})
+</script>