@meeovi/layer-commerce 1.0.3 → 1.0.4

package/app/components/marketing/promotions/subscriptions.vue

@@ -74,11 +74,9 @@
         return null
     })
 
-    const {
-        $directus,
-        $readItem,
-        $readItems
-    } = useNuxtApp()
+    const { $commerce } = useNuxtApp()
+    import { useCatalogFallback } from '../../../composables/useCatalog'
+    const catalog = useCatalogFallback()
     const tab = ref(null);
 
     const {
@@ -105,22 +103,11 @@
     const {
         data: subscriptions
     } = await useAsyncData('subscriptions', async () => {
-        const resp = await $directus.request($readItems('products', {
-            fields: ['*', {
-                '*': ['*']
-            }],
-            filter: {
-                user_id: {
-                    _eq: user?.id
-                },
-                type: {
-                    name: {
-                        _eq: 'Subscription'
-                    }
-                }
-            }
-        }))
-        return resp?.data ?? resp ?? []
+        const resp = await catalog.listProducts({
+            fields: ['*', { '*': ['*'] }],
+            filter: { user_id: { _eq: user?.id }, type: { name: { _eq: 'Subscription' } } }
+        })
+        return resp || []
     })
 
 

package/app/components/placeholders/Comments.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="comments-placeholder">
+    <p v-if="productName"><strong>Comments for:</strong> {{ productName }}</p>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  productName: { type: String, required: false },
+  productImage: { type: String, required: false },
+  productSku: { type: [String, Number], required: false },
+  comments: { type: Array, required: false }
+})
+</script>

package/app/components/placeholders/CreateListBtn.vue

@@ -0,0 +1,7 @@
+<template>
+  <button class="create-list-btn" @click="$emit('create', lists)">Create List</button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({ lists: { type: [String, Number, Object], required: false } })
+</script>

package/app/components/placeholders/Event.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="event-placeholder">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({ space: { type: Object, required: false } })
+</script>

package/app/components/placeholders/ListShowcases.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="list-showcases-placeholder">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({ list: { type: Object, required: false } })
+</script>

package/app/components/placeholders/Short.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="short-placeholder">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({ short: { type: Object, required: false } })
+</script>

package/app/components/placeholders/Space.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="space-placeholder">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({ space: { type: Object, required: false } })
+</script>

package/app/components/placeholders/Tag.vue

@@ -0,0 +1,7 @@
+<template>
+  <span class="tag-placeholder">{{ tag?.name || tag }}</span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({ tag: { type: Object, required: false } })
+</script>

package/app/components/sales/CheckoutAddress/types.ts

@@ -1,15 +1,16 @@
-import type { SfAddress, Maybe } from '@vue-storefront/unified-data-model';
+import type { Maybe } from '../../composables/_types'
 
-export interface Address extends SfAddress {
-  streetNumber: Maybe<string>;
-  phone: Maybe<string>;
-  streetName: Maybe<string>;
+export interface Address {
+  streetNumber?: Maybe<string>
+  phone?: Maybe<string>
+  streetName?: Maybe<string>
+  [key: string]: any
 }
 
 export type CheckoutAddressProps = {
-  type: 'billingAddress' | 'shippingAddress';
-  heading: string;
-  description: string;
-  buttonText: string;
-  savedAddress?: Maybe<SfAddress>;
-};
+  type: 'billingAddress' | 'shippingAddress'
+  heading: string
+  description: string
+  buttonText: string
+  savedAddress?: Maybe<Address>
+}

package/app/components/sales/OrderSummary/types.ts

@@ -1,5 +1,5 @@
-import type { SfCart } from '@vue-storefront/unified-data-model';
+import type { Cart } from '../../composables/_types'
 
 export type OrderSummaryPropsType = {
-  cart: SfCart;
-};
+  cart: Cart
+}

package/app/components/sales/incentives.vue

@@ -108,11 +108,9 @@
 
     const user = useSupabaseUser()
 
-    const {
-        $directus,
-        $readItem,
-        $readItems
-    } = useNuxtApp()
+    const { $commerce } = useNuxtApp()
+    import { useCatalogFallback } from '../../../composables/useCatalog'
+    const catalog = useCatalogFallback()
     const tab = ref(null);
 
     const {
@@ -202,43 +200,21 @@
     const {
         data: giftCards
     } = await useAsyncData('giftCards', async () => {
-        const resp = await $directus.request($readItems('products', {
-            fields: ['*', {
-                '*': ['*']
-            }],
-            filter: {
-                user_id: {
-                    _eq: user?.id
-                },                
-                incentive_type: {
-                    name: {
-                        _eq: 'Gift Card'
-                    }
-                }
-            }
-        }))
-        return resp?.data ?? resp ?? []
+        const resp = await catalog.listProducts({
+            fields: ['*', { '*': ['*'] }],
+            filter: { user_id: { _eq: user?.id }, incentive_type: { name: { _eq: 'Gift Card' } } }
+        })
+        return resp || []
     })
 
     const {
         data: certificates
     } = await useAsyncData('certificates', async () => {
-        const resp = await $directus.request($readItems('products', {
-            fields: ['*', {
-                '*': ['*']
-            }],
-            filter: {
-                user_id: {
-                    _eq: user?.id
-                },
-                incentive_type: {
-                    name: {
-                        _eq: 'Gift Certificate'
-                    }
-                }
-            }
-        }))
-        return resp?.data ?? resp ?? []
+        const resp = await catalog.listProducts({
+            fields: ['*', { '*': ['*'] }],
+            filter: { user_id: { _eq: user?.id }, incentive_type: { name: { _eq: 'Gift Certificate' } } }
+        })
+        return resp || []
     })
 
     useHead({

package/app/composables/cart/registry.ts

@@ -11,3 +11,10 @@ export function getCartProvider(name: string) {
   if (!provider) throw new Error(`Cart provider "${name}" not found`)
   return provider
 }
+
+// Runtime helper for adapter packages to register themselves when the
+// app boots. Adapter packages can import this and call it from their
+// plugin entry to wire into the commerce cart provider registry.
+export function registerCartProviderRuntime(name: string, provider: CartProvider) {
+  registerCartProvider(name, provider)
+}

package/app/composables/index.ts

@@ -3,3 +3,4 @@ export * from "./helpers";
 export * from "./methods";
 export * from "./models";
 export * from "./validationRules";
+export * from "./registry";

package/app/composables/products/registry.ts

@@ -11,3 +11,10 @@ export function getProductProvider(name: string) {
   if (!provider) throw new Error(`Product provider "${name}" not found`)
   return provider
 }
+
+// Runtime helper for adapter packages to register themselves when the
+// app boots. Adapter packages can import this and call it from their
+// plugin entry to wire into the commerce product provider registry.
+export function registerProductProviderRuntime(name: string, provider: ProductProvider) {
+  registerProductProvider(name, provider)
+}

package/app/composables/registry.ts

@@ -0,0 +1,21 @@
+import type { ProductProvider } from './products/types'
+import type { CartProvider } from './cart/types'
+import { registerProductProvider } from './products/registry'
+import { registerCartProvider } from './cart/registry'
+
+export interface CommerceProviderBundle {
+  product?: ProductProvider
+  cart?: CartProvider
+  // future: category?: CategoryProvider
+}
+
+// Register multiple domain providers at once from an adapter package.
+// Example adapter entrypoint can call this during app boot.
+export function registerCommerceProviderRuntime(name: string, bundle: CommerceProviderBundle) {
+  if (bundle.product) registerProductProvider(name, bundle.product)
+  if (bundle.cart) registerCartProvider(name, bundle.cart)
+}
+
+// Also re-export individual runtime helpers for convenience
+export { registerProductProviderRuntime } from './products/registry'
+export { registerCartProviderRuntime } from './cart/registry'

package/app/composables/useCatalog.ts

@@ -0,0 +1,64 @@
+import { ref, watchEffect } from 'vue'
+import { useAlternateContext } from '@meeovi/core'
+
+export function useCatalogFallback() {
+  // Attempt to use core runtime adapter if present
+  try {
+    const ctx = useAlternateContext() as any
+    const adapter = ctx.getAdapter('catalog')
+    if (adapter) {
+      return {
+        adapter,
+        async getProductById(id: string) {
+          return adapter.getProductById(id)
+        },
+        async getProductBySlug(slug: string) {
+          return adapter.getProductBySlug(slug)
+        },
+        async listProducts(params?: Record<string, unknown>) {
+          return adapter.listProducts(params)
+        }
+      }
+    }
+  } catch (e) {
+    // runtime context not available
+  }
+
+  // Fallback to Directus via Nuxt app runtime (assumes component calling runs in Vue context)
+  return {
+    adapter: null,
+    async getProductById(_id: string) {
+      const nuxtApp = useNuxtApp() as any
+      if (nuxtApp?.$directus && nuxtApp.$readItem) {
+        const res = await nuxtApp.$directus.request(nuxtApp.$readItem('products', { filter: { id: { _eq: _id } }, limit: 1 }))
+        return res?.[0] || null
+      }
+      return null
+    },
+    async getProductBySlug(slug: string) {
+      const nuxtApp = useNuxtApp() as any
+      if (nuxtApp?.$directus && nuxtApp.$readItem) {
+        const res = await nuxtApp.$directus.request(nuxtApp.$readItem('products', { filter: { slug: { _eq: slug } }, limit: 1 }))
+        return res?.[0] || null
+      }
+      return null
+    },
+    async listProducts(params?: Record<string, unknown>) {
+      const nuxtApp = useNuxtApp() as any
+      if (nuxtApp?.$directus && nuxtApp.$readItems) {
+        const res = await nuxtApp.$directus.request(nuxtApp.$readItems('products', params || {}))
+        return res || []
+      }
+      return []
+    }
+    ,
+    async listAttributes(filter?: Record<string, unknown>) {
+      const nuxtApp = useNuxtApp() as any
+      if (nuxtApp?.$directus && nuxtApp.$readItems) {
+        const res = await nuxtApp.$directus.request(nuxtApp.$readItems('attributes', filter || {}))
+        return res || []
+      }
+      return []
+    }
+  }
+}

package/app/composables/useContent.ts

@@ -0,0 +1,57 @@
+import { useAlternateContext } from '@meeovi/core'
+
+export function useContentFallback() {
+  try {
+    const ctx = useAlternateContext() as any
+    const adapter = ctx.getAdapter('catalog')
+    // If a content-capable adapter is available and exposes methods, use it
+    if (adapter && typeof adapter.listShops === 'function') {
+      return {
+        adapter,
+        listShops: (opts?: any) => adapter.listShops(opts),
+        getBrandBySlug: (slug: string) => adapter.getBrandBySlug?.(slug),
+        getPage: (id: string) => adapter.getPage?.(id)
+      }
+    }
+  } catch (e) {
+    // ignore
+  }
+
+  // Fallback to Directus via Nuxt runtime
+  return {
+    adapter: null,
+    async listShops(params?: Record<string, unknown>) {
+      const nuxtApp = useNuxtApp() as any
+      if (nuxtApp?.$directus && nuxtApp.$readItems) {
+        const res = await nuxtApp.$directus.request(nuxtApp.$readItems('shops', params || {}))
+        return res || []
+      }
+      return []
+    },
+    async listBrands(params?: Record<string, unknown>) {
+      const nuxtApp = useNuxtApp() as any
+      if (nuxtApp?.$directus && nuxtApp.$readItems) {
+        const res = await nuxtApp.$directus.request(nuxtApp.$readItems('brands', params || {}))
+        return res || []
+      }
+      return []
+    },
+    async getBrandBySlug(slug: string) {
+      const nuxtApp = useNuxtApp() as any
+      if (nuxtApp?.$directus && nuxtApp.$readItems) {
+        const res = await nuxtApp.$directus.request(nuxtApp.$readItems('brands', { filter: { slug: { _eq: slug } }, limit: 1 }))
+        return res?.[0] || null
+      }
+      return null
+    },
+    async getPage(id: string) {
+      const nuxtApp = useNuxtApp() as any
+      if (nuxtApp?.$directus && nuxtApp.$readItem) {
+        return await nuxtApp.$directus.request(nuxtApp.$readItem('pages', id))
+      }
+      return null
+    }
+  }
+}
+
+export default useContentFallback

package/app/composables/useProducts/types.ts

@@ -1,17 +1,22 @@
-import { Ref } from 'vue';
-import type { GetProducts } from '@vue-storefront/storefront-boilerplate-sdk';
-import type { Maybe } from '../_types';
+import { Ref } from 'vue'
+import type { Product } from '../_types'
+import type { Maybe } from '../_types'
+
+export type GetProducts = {
+  items: Product[]
+  total?: number
+}
 
 export interface UseProductsState {
-  data: GetProducts | null;
-  loading: boolean;
+  data: GetProducts | null
+  loading: boolean
 }
 
-export type FetchProducts = () => Promise<Ref<Maybe<GetProducts>>>;
+export type FetchProducts = () => Promise<Ref<Maybe<GetProducts>>>
 export interface UseProducts {
-  data: Readonly<Ref<UseProductsState['data']>>;
-  loading: Readonly<Ref<boolean>>;
-  fetchProducts: FetchProducts;
+  data: Readonly<Ref<UseProductsState['data']>>
+  loading: Readonly<Ref<boolean>>
+  fetchProducts: FetchProducts
 }
 
-export type UseProductsReturn = () => UseProducts;
+export type UseProductsReturn = () => UseProducts

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

@@ -43,7 +43,7 @@
 </template>
 
 <script setup>
-  import shorts from '#social/app/components/features/vibeSections/shorts.vue'
+  import shorts from '@/components/placeholder/shorts.vue'
   import productCard from '@/components/catalog/product/productCard.vue'
   import relatedbrands from '@/components/catalog/product/relatedbrands.vue'
   import {