@meeovi/layer-commerce 1.0.10 → 1.0.13

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>

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/types/shims-imports.d.ts

@@ -0,0 +1,13 @@
+declare module '#imports' {
+  export function useRuntimeConfig(): any;
+  export function useState<T = any>(key: string, init?: T): any;
+  export function useFetch(...args: any[]): any;
+  export function defineNuxtPlugin(fn: any): any;
+  export const navigateTo: any;
+  export const useRouter: any;
+  export const useNuxtApp: any;
+  export const useRequestEvent: any;
+  export const useCookie: any;
+  export const useHeaders: any;
+  export const useQuery: any;
+}

package/app/utils/client.ts

@@ -0,0 +1,26 @@
+import * as CommercePkg from '#imports';
+import { sdk } from '@meeovi/sdk';
+
+const CommerceAny: any = CommercePkg as any;
+
+/**
+ * Returns a commerce client. Prefer `@meeovi/commerce` client creation APIs
+ * when available, otherwise fall back to `sdk.commerce`.
+ */
+export function getCommerceClient(provider?: string, providerConfig?: any) {
+  try {
+    if (typeof CommerceAny.createClient === 'function') {
+      return CommerceAny.createClient(provider, providerConfig);
+    }
+    if (typeof CommerceAny.init === 'function') {
+      return CommerceAny.init(providerConfig);
+    }
+  } catch (e) {
+    // swallow and fallback to sdk
+  }
+
+  // fallback: return the SDK's commerce helper (already used in many composables)
+  return sdk.commerce;
+}
+
+export default getCommerceClient;

package/app/utils/index.ts

@@ -0,0 +1,53 @@
+import { NormalizerRegistry, CommerceNormalizer } from './normalizer';
+
+// Keep imports loose because host `@meeovi/commerce` implementations may vary
+import * as CommercePkg from '#imports';
+const CommerceAny: any = CommercePkg as any;
+
+export type Provider = string;
+
+export interface CommerceLayerConfig {
+  provider: Provider;
+  providerConfig?: Record<string, any>;
+  normalizer?: CommerceNormalizer;
+  registry?: NormalizerRegistry;
+}
+
+export function createCommerceLayer(config: CommerceLayerConfig) {
+  const registry = config.registry ?? new NormalizerRegistry();
+  const normalizer = config.normalizer ?? registry.get(config.provider);
+
+  if (!normalizer) {
+    throw new Error('No normalizer found for provider: ' + config.provider);
+  }
+
+  // Create or obtain a client from `@meeovi/commerce` in a resilient way
+  const client = ((): any => {
+    try {
+      if (typeof CommerceAny.createClient === 'function') {
+        return CommerceAny.createClient(config.provider, config.providerConfig);
+      }
+      if (typeof CommerceAny.init === 'function') {
+        return CommerceAny.init(config.providerConfig);
+      }
+      return CommerceAny;
+    } catch (e) {
+      // In production, surface useful message while avoiding leaking secrets
+      throw new Error('Failed to initialize commerce client for provider: ' + config.provider);
+    }
+  })();
+
+  async function getProduct(id: string) {
+    const raw = await (client.getProduct?.(id) ?? client.fetchProduct?.(id) ?? client.product?.(id));
+    return normalizer!.normalizeProduct(raw);
+  }
+
+  return {
+    client,
+    getProduct,
+    registry,
+    normalizer,
+  } as const;
+}
+
+export default createCommerceLayer;

package/app/utils/normalizer.ts

@@ -0,0 +1,23 @@
+export interface CommerceNormalizer {
+  normalizeProduct(data: any): any;
+  normalizeCategory?(data: any): any;
+  normalizeCart?(data: any): any;
+}
+
+export class NormalizerRegistry {
+  private registry = new Map<string, CommerceNormalizer>();
+
+  register(name: string, normalizer: CommerceNormalizer) {
+    this.registry.set(name, normalizer);
+  }
+
+  get(name: string): CommerceNormalizer | undefined {
+    return this.registry.get(name);
+  }
+
+  list(): string[] {
+    return Array.from(this.registry.keys());
+  }
+}
+
+export default NormalizerRegistry;

package/app/utils/normalizers/magento.ts

@@ -0,0 +1,29 @@
+import { CommerceNormalizer } from "../normalizer";
+
+export const magentoNormalizer: CommerceNormalizer = {
+  normalizeProduct(data: any) {
+    return {
+      id: data?.id ?? data?.sku ?? data?.item_id,
+      title: data?.name ?? data?.title,
+      price:
+        data?.price ?? data?.price_range?.minimum_price?.final_price?.value,
+      description: data?.description ?? data?.short_description,
+      images: (data?.media_gallery_entries ?? []).map((m: any) => m.file || m.url),
+      raw: data,
+    };
+  },
+
+  normalizeCategory(data: any) {
+    return {
+      id: data?.id,
+      name: data?.name,
+      raw: data,
+    };
+  },
+
+  normalizeCart(data: any) {
+    return { raw: data };
+  },
+};
+
+export default magentoNormalizer;

package/app/utils/normalizers/shopify.ts

@@ -0,0 +1,29 @@
+import { CommerceNormalizer } from "../normalizer";
+
+export const shopifyNormalizer: CommerceNormalizer = {
+  normalizeProduct(data: any) {
+    // Shopify payloads vary depending on SDK; this maps common fields
+    return {
+      id: data?.id ?? data?.variants?.[0]?.id,
+      title: data?.title ?? data?.name,
+      price: data?.variants?.[0]?.price ?? data?.price,
+      description: data?.body_html ?? data?.description,
+      images: (data?.images ?? []).map((i: any) => i?.src || i?.url),
+      raw: data,
+    };
+  },
+
+  normalizeCategory(data: any) {
+    return {
+      id: data?.id,
+      name: data?.title ?? data?.name,
+      raw: data,
+    };
+  },
+
+  normalizeCart(data: any) {
+    return { raw: data };
+  },
+};
+
+export default shopifyNormalizer;