@mframework/layer-commerce 0.0.3

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 '~/types'
+  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>

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

@@ -0,0 +1,74 @@
+<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 Transaction</h2>
+                        </div>
+                    </div>
+                    <div class="col-12 col-lg-12">
+                        <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">
+                                            Transaction Information
+                                        </h4>
+                                        <a class="card-text mbr-fonts-style display-7" :href="`/order/${transaction?.orders?.orders_id?.id}`">Order #:
+                                            {{ transaction?.orders?.orders_id?.id }}</a>
+                                        <p class="card-text mbr-fonts-style display-7">Transaction ID: {{ transaction?.id }}</p>    
+                                        <p class="card-text mbr-fonts-style display-7">Transaction Date:
+                                            {{ new Date(transaction?.created_at).toLocaleDateString() }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Is it Closed?
+                                            {{ transaction?.is_closed }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Parent Transaction ID: {{ transaction?.parent_id }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Payment ID: {{ transaction?.payment_id }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <img src="../../assets/images/background10.jpg" :alt="transaction?.id">
+        </section>
+    </div>
+</template>
+
+<script setup>
+    const route = useRoute();
+    
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+    const user = useSupabaseUser()
+
+    const {
+        data: transaction
+    } = await useAsyncData('transaction', () => {
+        return $directus.request($readItem('transactions', route.params.id, {
+            filter: {
+                user: {
+                    _eq: `${user?.id}`
+                }
+            },
+            limit: 1
+        })).then(response => response?.[0])
+    })
+
+    useHead({
+        title: 'Transaction' + transaction?.value?.id || 'Transaction Page',
+    })
+
+    definePageMeta({
+        //middleware: ['auth-logged-in'],
+    })
+</script>

package/app/routes/CategoryPage/CategoryPage.config.ts

@@ -0,0 +1,28 @@
+export type CategorySortOptions = string;
+
+export const SortDirections = {
+  ASC: 'asc',
+  DESC: 'desc',
+} as const
+export const NONE_SORT_OPTION_VALUE = 'none'
+
+export const CategoryPageLayout = {
+  GRID: 'grid',
+  LIST: 'list',
+} as const
+export const CategoryDisplayMode = {
+  PRODUCTS: 'products',
+  CMS: 'cms',
+  MIXED: 'mixed',
+} as const
+
+export default {
+  SortDirections,
+  CategoryPageLayout,
+  CategoryDisplayMode,
+  NONE_SORT_OPTION_VALUE,
+}
+
+export type SortDirections = typeof SortDirections[keyof typeof SortDirections]
+export type CategoryDisplayMode = typeof CategoryDisplayMode[keyof typeof CategoryDisplayMode]
+export type CategoryPageLayout = typeof CategoryPageLayout[keyof typeof CategoryPageLayout]

package/app/routes/CategoryPage/CategoryPage.type.ts

@@ -0,0 +1,8 @@
+export type CategorySortOption = {
+  value: string
+  label: string
+}
+
+export type CategorySortOptions = CategorySortOption[]
+
+export default CategorySortOptions

package/app/routes/Checkout/Checkout.config.ts

@@ -0,0 +1,3 @@
+export enum CheckoutStepUrl {
+  CHECKOUT_URL = '/checkout',
+}

package/app/routes/Checkout/Checkout.type.ts

@@ -0,0 +1,14 @@
+export interface CheckoutAddress {
+  company?: string
+  city?: string
+  country_id?: string
+  firstname?: string
+  lastname?: string
+  postcode?: string
+  street?: Array<string | null>
+  telephone?: string
+  region?: string
+  region_id?: number
+  region_code?: string
+  vat_id?: string
+}

package/app/routes/MyAccount/MyAccount.config.ts

@@ -0,0 +1 @@
+export const CUSTOMER = 'customer';

package/app/routes/SearchPage/SearchPage.config.ts

@@ -0,0 +1 @@
+export const NONE_SORT_OPTION_VALUE = '';

package/app/routes/UrlRewrites/UrlRewrites.config.ts

@@ -0,0 +1,5 @@
+export enum UrlRewritePageType {
+  CATEGORY = 'category',
+  CMS_PAGE = 'cms_page',
+  PRODUCT = 'product',
+}

package/app/stores/Cart/Cart.type.ts

@@ -0,0 +1,26 @@
+export interface CartItem {
+  id: string
+  productId: string
+  sku?: string
+  quantity: number
+  price?: number
+  [key: string]: any
+}
+
+export interface IndexedCartItem extends CartItem {
+  index?: number
+}
+
+export interface Cart {
+  id?: string
+  items?: CartItem[]
+  subtotal?: number
+  total?: number
+  tax_amount?: number
+  shipping_amount?: number
+  discount_amount?: number
+  coupon_code?: string | null
+  [key: string]: any
+}
+
+export default Cart

package/app/stores/MyAccount/MyAccount.action.ts

@@ -0,0 +1,7 @@
+export function updateCustomerSignInStatus(isSignedIn: boolean, customer?: any) {
+  if (typeof window !== 'undefined' && 'CustomEvent' in window) {
+    window.dispatchEvent(new CustomEvent('mframework:auth:update', { detail: { isSignedIn, customer } }))
+  }
+}
+
+export default { updateCustomerSignInStatus }

package/app/stores/Notification/Notification.action.ts

@@ -0,0 +1,40 @@
+import { Notification, NotificationOptions, NotificationType } from './Notification.type'
+
+function genId() {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+export function showNotification(message: string, type: NotificationType = NotificationType.INFO, options: NotificationOptions = {}): Notification {
+  const notification: Notification = {
+    id: genId(),
+    message,
+    type: options.type || type,
+    meta: options.meta,
+    createdAt: Date.now(),
+  }
+
+  if (typeof window !== 'undefined' && 'CustomEvent' in window) {
+    window.dispatchEvent(new CustomEvent('mframework:notification', { detail: notification }))
+  }
+
+  return notification
+}
+
+export function notifyInfo(message: string, options: NotificationOptions = {}) {
+  return showNotification(message, NotificationType.INFO, options)
+}
+
+export function notifySuccess(message: string, options: NotificationOptions = {}) {
+  return showNotification(message, NotificationType.SUCCESS, options)
+}
+
+export function notifyError(message: string, options: NotificationOptions = {}) {
+  return showNotification(message, NotificationType.ERROR, options)
+}
+
+export default {
+  showNotification,
+  notifyInfo,
+  notifySuccess,
+  notifyError,
+}

package/app/stores/Notification/Notification.type.ts

@@ -0,0 +1,16 @@
+export enum NotificationType {
+  INFO = 'info',
+  SUCCESS = 'success',
+  WARNING = 'warning',
+  ERROR = 'error',
+}
+
+export interface Notification {
+  id: string
+  message: string
+  type: NotificationType
+  meta?: Record<string, unknown>
+  createdAt: number
+}
+
+export type NotificationOptions = Partial<Pick<Notification, 'meta' | 'type'>>

package/app/stores/Popup/Popup.action.ts

@@ -0,0 +1,30 @@
+export interface PopupPayload {
+  [key: string]: unknown
+}
+
+function genId() {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+export function showPopup(popupId: string, payload: PopupPayload = {}) {
+  const popup = {
+    id: genId(),
+    popupId,
+    payload,
+    openedAt: Date.now(),
+  }
+
+  if (typeof window !== 'undefined' && 'CustomEvent' in window) {
+    window.dispatchEvent(new CustomEvent('mframework:popup:open', { detail: popup }))
+  }
+
+  return popup
+}
+
+export function closePopup(popupId: string) {
+  if (typeof window !== 'undefined' && 'CustomEvent' in window) {
+    window.dispatchEvent(new CustomEvent('mframework:popup:close', { detail: { popupId } }))
+  }
+}
+
+export default { showPopup, closePopup }