@mframework/layer-commerce 0.0.3

package/app/composables/products/useProducts.ts

@@ -0,0 +1,12 @@
+import { getCommerceConfig } from '../config'
+import { getProductProvider } from './registry'
+
+export function useProducts() {
+  const { productProvider } = getCommerceConfig()
+  const provider = getProductProvider(productProvider)
+
+  return {
+    getProduct: provider.getProduct,
+    listProducts: provider.listProducts
+  }
+}

package/app/composables/products/useSubscriptions.ts

@@ -0,0 +1,29 @@
+
+import { getCommerceConfig } from '../config'
+import { getSubscriptionProvider } from './registry'
+
+export function useSubscriptions() {
+	const cfg = getCommerceConfig() as any
+	const providerName = cfg.subscriptionsProvider || cfg.productProvider
+
+	let provider: any
+	try {
+		provider = getSubscriptionProvider(providerName)
+	} catch (e) {
+		provider = {
+			getSubscription: async () => null,
+			listSubscriptions: async () => [],
+			subscribe: async () => ({ success: false })
+		}
+	}
+
+	return {
+		getSubscription: provider.getSubscription ?? (async (id: string) => null),
+		listSubscriptions: provider.listSubscriptions ?? (async (params?: Record<string, any>) => []),
+		subscribe: provider.subscribe ?? (async (payload: Record<string, any>) => ({ success: false }))
+	}
+}
+
+export default useSubscriptions
+
+

package/app/composables/products.ts

@@ -0,0 +1,30 @@
+import { useProducts as _useProducts } from './useProducts/useProducts'
+
+export function useProducts() {
+	const core = _useProducts()
+	return {
+		// map older names used in stores to the implementation
+		getProducts: async (opts?: any) => {
+			const res = await core.fetchProducts()
+			const maybe = (res as any)?.value ?? res
+			return maybe || []
+		},
+		getProductById: async (id: string) => {
+			const res = await core.fetchProducts()
+			const maybe = (res as any)?.value ?? res
+			return (Array.isArray(maybe) ? maybe.find((p: any) => p.id === id || p.sku === id) || null : null)
+		},
+		getProductsByCategory: async (categoryId: string, opts?: any) => {
+			const res = await core.fetchProducts()
+			const maybe = (res as any)?.value ?? res
+			return Array.isArray(maybe) ? maybe.filter((p: any) => p.category_id === categoryId || p.category === categoryId) : []
+		},
+		searchProducts: async (query: string, opts?: any) => {
+			const res = await core.fetchProducts()
+			const maybe = (res as any)?.value ?? res
+			return Array.isArray(maybe) ? maybe.filter((p: any) => (p.name || p.title || '').toLowerCase().includes((query || '').toLowerCase())) : []
+		}
+	}
+}
+
+export default useProducts

package/app/composables/registry.ts

@@ -0,0 +1,24 @@
+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'
+export { registerEventProviderRuntime } from './products/registry'
+export { registerGiftCardProviderRuntime } from './products/registry'
+export { registerSubscriptionProviderRuntime } from './products/registry'

package/app/composables/useAuth.ts

@@ -0,0 +1,43 @@
+import { ref } from 'vue'
+
+export function useAuth() {
+  const token = ref<string | null>(process.env.MAGENTO_TOKEN || null)
+  const refreshInProgress = ref(false)
+
+  function isTokenExpired() {
+    // Best-effort check: token may be JWT
+    if (!token.value) return true
+    try {
+      const parts = token.value.split('.')
+      if (parts.length !== 3) return false
+      const payload = JSON.parse(atob(parts[1]))
+      const exp = payload.exp as number | undefined
+      if (!exp) return false
+      return Date.now() / 1000 > exp - 30
+    } catch {
+      return false
+    }
+  }
+
+  async function refreshAccessToken() {
+    if (refreshInProgress.value) return
+    refreshInProgress.value = true
+    try {
+      const resp = await fetch(`${process.env.MAGENTO_API_URL}/auth/refresh`, { method: 'POST', credentials: 'include' })
+      if (resp.ok) {
+        const data = await resp.json()
+        token.value = data.token || token.value
+      }
+    } finally {
+      refreshInProgress.value = false
+    }
+  }
+
+  function logout() {
+    token.value = null
+  }
+
+  return { token, isTokenExpired, refreshAccessToken, logout }
+}
+
+export default useAuth

package/app/composables/useBreakpoints/index.ts

@@ -0,0 +1 @@
+export * from './useBreakpoints';

package/app/composables/useBreakpoints/useBreakpoints.ts

@@ -0,0 +1,28 @@
+import { ref, onMounted } from 'vue';
+import { createSharedComposable, syncRefs, useBreakpoints as useBreakpointsVueUse } from '@vueuse/core';
+
+/**
+ * @description Composable that prepares breakpoints-dependent refs
+ * @returns {@link ReturnType<typeof useBreakpoints>}
+ * @example
+ * const { isTablet, isDesktop } = useBreakpoints();
+ */
+export const useBreakpoints = createSharedComposable(() => {
+  const breakpoints = useBreakpointsVueUse({
+    tablet: '768px',
+    desktop: '1024px',
+  });
+
+  const isTablet = ref(true);
+  const isDesktop = ref(false);
+
+  onMounted(() => {
+    syncRefs(breakpoints.greaterOrEqual('tablet'), isTablet);
+    syncRefs(breakpoints.greaterOrEqual('desktop'), isDesktop);
+  });
+
+  return {
+    isTablet,
+    isDesktop,
+  };
+});

package/app/composables/useCache.ts

@@ -0,0 +1,38 @@
+export function useCache() {
+  const store = new Map<string, any>()
+
+  function setCacheItem(key: string, value: any) {
+    try {
+      store.set(key, value)
+      if (typeof window !== 'undefined' && window.localStorage) {
+        localStorage.setItem(key, JSON.stringify(value))
+      }
+    } catch (e) {
+      // ignore storage failures
+    }
+  }
+
+  function getCacheItem<T = any>(key: string): T | null {
+    if (store.has(key)) return store.get(key)
+    try {
+      if (typeof window !== 'undefined' && window.localStorage) {
+        const raw = localStorage.getItem(key)
+        if (raw) {
+          const parsed = JSON.parse(raw)
+          store.set(key, parsed)
+          return parsed as T
+        }
+      }
+    } catch {}
+    return null
+  }
+
+  function removeCacheItem(key: string) {
+    store.delete(key)
+    try { if (typeof window !== 'undefined' && window.localStorage) localStorage.removeItem(key) } catch {}
+  }
+
+  return { setCacheItem, getCacheItem, removeCacheItem }
+}
+
+export default useCache

package/app/composables/useCart/__tests__/useCart.spec.ts

@@ -0,0 +1,11 @@
+import { useCart } from '~/composables/useCart/useCart';
+
+describe('useCart', () => {
+  it('should return account data', async () => {
+    const { fetchCard, data } = useCart();
+
+    await fetchCard();
+
+    expect(data.value).not.toBeUndefined();
+  });
+});

package/app/composables/useCart/index.ts

@@ -0,0 +1 @@
+export * from './useCart';

package/app/composables/useCart/types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type { SfCart, Maybe } from '../_types';
+
+export interface UseCartState {
+  data: Maybe<SfCart>;
+  loading: boolean;
+}
+
+export type FetchCard = () => Promise<Ref<Maybe<SfCart>>>;
+
+export interface UseCart {
+  data: Readonly<Ref<UseCartState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  fetchCard: FetchCard;
+}
+
+export type UseCartReturn = () => UseCart;

package/app/composables/useCart/useCart.ts

@@ -0,0 +1,46 @@
+import type { SfCart } from '../_types';
+import { toRefs } from '@vueuse/shared';
+import type { UseCartReturn, UseCartState, FetchCard } from './types';
+import { getCommerceClient } from '../../utils/client';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+import { ref } from 'vue';
+
+/**
+ * @description Composable for managing cart.
+ * @returns {@link UseCartReturn}
+ * @example
+ * const { data, loading } = useCart();
+ */
+export const useCart: UseCartReturn = () => {
+  const state = useState<UseCartState>('useCart', () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /**
+   * @description Function for fetching the cart.
+   * @example
+   * getCart();
+   */
+  const fetchCard: FetchCard = async () => {
+    state.value.loading = true;
+    try {
+      const client = getCommerceClient();
+      const { data, error } = await useAsyncData<SfCart>(() => client.getCart?.());
+      useHandleError(error.value);
+      state.value.data = data.value;
+      // wrap the returned ref into our Vue ref to avoid cross-package Ref mismatch
+      return ref(data.value);
+    } catch (error) {
+      throw new Error(error as string);
+    } finally {
+      state.value.loading = false;
+    }
+  };
+
+  return {
+    fetchCard,
+    ...toRefs(state.value),
+  };
+};

package/app/composables/useCartShippingMethods/__tests__/useCartShippingMethods.spec.ts

@@ -0,0 +1,11 @@
+import { useCartShippingMethods } from '../useCartShippingMethods';
+
+describe('useCartShippingMethods', () => {
+  it('should return shipping methods', async () => {
+    const { getShippingMethods, data } = useCartShippingMethods();
+
+    await getShippingMethods();
+
+    expect(data.value).not.toBeUndefined();
+  });
+});

package/app/composables/useCartShippingMethods/index.ts

@@ -0,0 +1 @@
+export * from './useCartShippingMethods';

package/app/composables/useCartShippingMethods/types.ts

@@ -0,0 +1,17 @@
+import { SfShippingMethods, Maybe } from '../_types';
+import type { Ref } from 'vue';
+
+export interface UseCartShippingMethodsState {
+  data: Maybe<SfShippingMethods>;
+  loading: boolean;
+}
+
+export type GetShippingMethods = () => Promise<Ref<Maybe<SfShippingMethods>>>;
+
+export interface UseCartShippingMethods {
+  data: Readonly<Ref<UseCartShippingMethodsState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  getShippingMethods: GetShippingMethods;
+}
+
+export type UseCartShippingMethodsReturn = () => UseCartShippingMethods;

package/app/composables/useCartShippingMethods/useCartShippingMethods.ts

@@ -0,0 +1,47 @@
+import { toRefs } from '@vueuse/shared';
+import { computed } from 'vue';
+import type { Ref } from 'vue';
+import type { Maybe, SfShippingMethods } from '../_types';
+import type {
+  UseCartShippingMethodsState,
+  UseCartShippingMethodsReturn,
+  GetShippingMethods,
+} from './types';
+import { getCommerceClient } from '../../utils/client';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+
+/**
+ * @description Composable for getting shipping methods.
+ * @example
+ * const { data, loading, getShippingMethods } = useCartShippingMethods();
+ */
+
+export const useCartShippingMethods: UseCartShippingMethodsReturn = () => {
+  const state = useState<UseCartShippingMethodsState>('useCartSippingMethods', () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /**
+   * @description Function for fetching shipping methods.
+   * @example
+   * getShippingMethods();
+   */
+
+  const getShippingMethods: GetShippingMethods = async () => {
+    state.value.loading = true;
+    const client = getCommerceClient();
+    const { data, error } = await useAsyncData<any>(() => client.listShippingMethods?.());
+    useHandleError(error.value);
+    const result = (data.value && (data.value as any).methods) ? data.value : { methods: [] };
+    state.value.data = result as any;
+    state.value.loading = false;
+    return computed(() => state.value.data) as unknown as Ref<Maybe<SfShippingMethods>>;
+  };
+
+  return {
+    getShippingMethods,
+    ...toRefs(state.value),
+  };
+};

package/app/composables/useCatalog.ts

@@ -0,0 +1,26 @@
+import { ref, watchEffect } from 'vue'
+import { getCommerceClient } from '../utils/client'
+
+export function useCatalogFallback() {
+  // Prefer the generic commerce client provided by an adapter or the SDK
+  const client = getCommerceClient()
+  return {
+    adapter: client,
+    async getProductById(id: string) {
+      if (client && typeof (client as any).getProductById === 'function') return (client as any).getProductById(id)
+      return null
+    },
+    async getProductBySlug(slug: string) {
+      if (client && typeof (client as any).getProductBySlug === 'function') return (client as any).getProductBySlug(slug)
+      return null
+    },
+    async listProducts(params?: Record<string, unknown>) {
+      if (client && typeof (client as any).listProducts === 'function') return (client as any).listProducts(params)
+      return []
+    },
+    async listAttributes(filter?: Record<string, unknown>) {
+      if (client && typeof (client as any).listAttributes === 'function') return (client as any).listAttributes(filter)
+      return []
+    }
+  }
+}

package/app/composables/useContent.ts

@@ -0,0 +1,26 @@
+import { getCommerceClient } from '../utils/client'
+
+export function useContentFallback() {
+  const client = getCommerceClient()
+  return {
+    adapter: client,
+    async listShops(params?: Record<string, unknown>) {
+      if (client && typeof (client as any).listShops === 'function') return (client as any).listShops(params)
+      return []
+    },
+    async listBrands(params?: Record<string, unknown>) {
+      if (client && typeof (client as any).listBrands === 'function') return (client as any).listBrands(params)
+      return []
+    },
+    async getBrandBySlug(slug: string) {
+      if (client && typeof (client as any).getBrandBySlug === 'function') return (client as any).getBrandBySlug(slug)
+      return null
+    },
+    async getPage(id: string) {
+      if (client && typeof (client as any).getPage === 'function') return (client as any).getPage(id)
+      return null
+    }
+  }
+}
+
+export default useContentFallback

package/app/composables/useCustomer/__tests__/useCustomer.spec.ts

@@ -0,0 +1,25 @@
+import { useCustomer } from '~/composables/useCustomer/useCustomer';
+
+vi.mock('@mframework/sdk', () => ({
+  sdk: {
+    commerce: {
+      getCustomer: vi.fn(() => ({
+        id: 'SfId',
+        email: 'hieronim.anonim@gmail.com',
+        firstName: 'hieronim',
+        lastName: 'anonim'
+      })),
+    },
+  },
+}));
+
+
+describe('useCustomer', () => {
+  it('should return account data', async () => {
+    const { fetchCustomer, data } = useCustomer();
+
+    await fetchCustomer();
+
+    expect(data.value).not.toBeUndefined();
+  });
+});

package/app/composables/useCustomer/index.ts

@@ -0,0 +1,2 @@
+export * from './useCustomer';
+export * from './types';

package/app/composables/useCustomer/types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type { Maybe, SfCustomer } from '../_types';
+
+export interface UseCustomerState {
+  data: Maybe<SfCustomer>;
+  loading: boolean;
+}
+
+export type FetchCustomer = () => Promise<Ref<Maybe<SfCustomer>>>;
+
+export interface UseCustomer {
+  data: Readonly<Ref<UseCustomerState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  fetchCustomer: FetchCustomer;
+}
+
+export type UseCustomerReturn = () => UseCustomer;

package/app/composables/useCustomer/useCustomer.ts

@@ -0,0 +1,40 @@
+import { toRefs } from '@vueuse/shared';
+import { computed } from 'vue';
+import type { Ref } from 'vue';
+import type { Maybe, SfCustomer } from '../_types';
+import type { UseCustomerReturn, UseCustomerState, FetchCustomer } from './types';
+import { getCommerceClient } from '../../utils/client';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+
+/**
+ * @description Composable managing customer data
+ * @returns {@link UseCustomerReturn}
+ * @example
+ * const { data, loading, fetchCustomer } = useCustomer();
+ */
+export const useCustomer: UseCustomerReturn = () => {
+  const state = useState<UseCustomerState>('useCustomer', () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /** Function for fetching customer data
+   * @example
+   * fetchCustomer();
+   */
+  const fetchCustomer: FetchCustomer = async () => {
+    state.value.loading = true;
+      const client = getCommerceClient();
+      const { data, error } = await useAsyncData<UseCustomerState['data']>(() => client.getCustomer?.());
+    useHandleError(error.value);
+    state.value.data = data.value;
+    state.value.loading = false;
+    return computed(() => state.value.data) as unknown as Ref<Maybe<SfCustomer>>;
+  };
+
+  return {
+    fetchCustomer,
+    ...toRefs(state.value),
+  };
+};

package/app/composables/useCustomerAddress/__tests__/useCustomerAddress.spec.ts

@@ -0,0 +1,11 @@
+import { useCustomerAddress } from '~/composables/useCustomerAddress/useCustomerAddress';
+
+describe('useCustomerAddress', () => {
+  it('should return account data', async () => {
+    const { fetchCustomerAddress, data } = useCustomerAddress();
+
+    await fetchCustomerAddress();
+
+    expect(data.value).not.toBeUndefined();
+  });
+});

package/app/composables/useCustomerAddress/index.ts

@@ -0,0 +1,2 @@
+export * from './useCustomerAddress';
+export * from './types';

package/app/composables/useCustomerAddress/types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type { Maybe, SfAddress } from '../_types';
+
+export interface UseCustomerAddressState {
+  data: Maybe<SfAddress>;
+  loading: boolean;
+}
+
+export type FetchCustomerAddress = () => Promise<Ref<Maybe<SfAddress>>>;
+
+export interface UseCustomerAddress {
+  data: Readonly<Ref<UseCustomerAddressState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  fetchCustomerAddress: FetchCustomerAddress;
+}
+
+export type UseCustomerAddressReturn = () => UseCustomerAddress;

package/app/composables/useCustomerAddress/useCustomerAddress.ts

@@ -0,0 +1,55 @@
+import { toRefs } from '@vueuse/shared';
+import { computed } from 'vue';
+import type { Ref } from 'vue';
+import type { Maybe, SfAddress } from '../_types';
+import type {
+  UseCustomerAddressReturn,
+  UseCustomerAddressState,
+  FetchCustomerAddress,
+} from './types';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+
+/**
+ * @description Composable managing address data
+ * @returns {@link UseCustomerAddressReturn}
+ * @example
+ * const { data, loading, fetchCustomerAddress } = useCustomerAddress();
+ */
+export const useCustomerAddress: UseCustomerAddressReturn = () => {
+  const state = useState<UseCustomerAddressState>(`useCustomerAddress`, () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /** Function for fetching address data
+   * @example
+   * fetchCustomerAddress();
+   */
+  const fetchCustomerAddress: FetchCustomerAddress = async () => {
+    state.value.loading = true;
+    const { data, error } = await useAsyncData(() =>
+      Promise.resolve({
+        firstName: 'Hieronim',
+        lastName: 'Anonim',
+        address1: 'Oak Drive',
+        address2: '3633',
+        city: 'Colonie',
+        country: 'US',
+        phoneNumber: '+1 321 765 0987',
+        postalCode: '12205',
+        state: 'NY',
+        titleCode: '',
+      }),
+    );
+    useHandleError(error.value);
+    state.value.data = data.value;
+    state.value.loading = false;
+    return computed(() => state.value.data) as unknown as Ref<Maybe<SfAddress>>;
+  };
+
+  return {
+    fetchCustomerAddress,
+    ...toRefs(state.value),
+  };
+};

package/app/composables/useCustomerOrder/__tests__/useCustomerOrder.spec.ts

@@ -0,0 +1,11 @@
+import { useCustomerOrder } from '~/composables/useCustomerOrder/useCustomerOrder';
+
+describe('useCustomerOrder', () => {
+  it('should return customer order data', async () => {
+    const { fetchCustomerOrder, data } = useCustomerOrder('1');
+
+    await fetchCustomerOrder('1');
+
+    expect(data.value).not.toBeUndefined();
+  });
+});

package/app/composables/useCustomerOrder/adress.ts

@@ -0,0 +1,10 @@
+export default {
+  firstName: 'Hieronim',
+  lastName: 'Anonim',
+  phoneNumber: '+1 321 765 0987',
+  address1: '3633',
+  address2: 'Oak Drive',
+  city: 'Colonie',
+  state: 'NY',
+  postalCode: '12205',
+};

package/app/composables/useCustomerOrder/index.ts

@@ -0,0 +1,2 @@
+export * from './useCustomerOrder';
+export * from './types';