@mframework/layer-commerce 0.0.3

package/app/composables/useCustomerOrder/product.ts

@@ -0,0 +1,37 @@
+export default {
+  name: 'Smartwatch Fitness Tracker',
+  quantity: 1,
+  price: {
+    value: {
+      currency: 'Dollar',
+      amount: 295.87,
+      precisionAmount: '295.87',
+    },
+    isDiscounted: false,
+    regularPrice: {
+      currency: 'Dollar',
+      amount: 295.87,
+      precisionAmount: '295.87',
+    },
+  },
+  gallery: [
+    {
+      alt: 'Smartwatch Fitness Tracker',
+      url: '/images/watch.png',
+    },
+  ],
+  attributes: [
+    {
+      label: 'Size',
+      name: 'Size',
+      value: '1.9″',
+      valueLabel: 'value',
+    },
+    {
+      name: 'Color',
+      label: 'color',
+      value: 'Black',
+      valueLabel: 'value',
+    },
+  ],
+};

package/app/composables/useCustomerOrder/types.ts

@@ -0,0 +1,40 @@
+import type { Ref } from 'vue';
+import type { Maybe, SfAddress, SfProduct } from '../_types';
+
+export type OrderData = {
+  id: string;
+  date: string; //probably should be number in ms
+  paymentAmount: number;
+  status: 'Completed' | 'Shipped' | 'Open' | 'Cancelled';
+  products: Array<
+    Omit<
+      SfProduct,
+      'id' | 'sku' | 'slug' | 'description' | 'primaryImage' | 'rating' | 'variants' | 'quantityLimit'
+    > & { quantity: number }
+  >;
+  summary: {
+    subtotal: number;
+    delivery: number;
+    estimatedTax: number;
+    total: number;
+  };
+  billingAddress: Partial<SfAddress>;
+  shippingAddress: Partial<SfAddress>;
+  paymentMethod: string;
+  shipping: string;
+};
+
+export interface UseCustomerOrderState {
+  data: Maybe<OrderData>;
+  loading: boolean;
+}
+
+export type FetchCustomerOrder = (id: string) => Promise<Ref<Maybe<OrderData>>>;
+
+export interface UseCustomerOrder {
+  data: Readonly<Ref<UseCustomerOrderState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  fetchCustomerOrder: FetchCustomerOrder;
+}
+
+export type UseCustomerOrderReturn = (id: string) => UseCustomerOrder;

package/app/composables/useCustomerOrder/useCustomerOrder.ts

@@ -0,0 +1,63 @@
+import { toRefs } from '@vueuse/shared';
+import addressData from './adress';
+import productData from './product';
+import type {
+  UseCustomerOrderReturn,
+  UseCustomerOrderState,
+  FetchCustomerOrder,
+  OrderData,
+} from './types';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+
+const order: OrderData = {
+  id: '0e4fec5a-61e6-48b8-94cc-d5f77687e2b0',
+  date: '2022-08-11',
+  paymentAmount: 295.87,
+  paymentMethod: 'Credit Card',
+  shipping: 'Standard (FREE)',
+  summary: {
+    subtotal: 7037.99,
+    delivery: 0,
+    estimatedTax: 457.47,
+    total: 295.87,
+  },
+  billingAddress: addressData,
+  shippingAddress: addressData,
+  status: 'Completed',
+  products: [productData, productData],
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
+const getCustomerOrder = (id: string) => order;
+
+/**
+ * @description Composable managing customer order data
+ * @returns {@link UseCustomerOrderReturn}
+ * @example
+ * const { data, loading, fetchCustomerOrder } = useCustomerOrder();
+ */
+export const useCustomerOrder: UseCustomerOrderReturn = (id) => {
+  const state = useState<UseCustomerOrderState>(`useCustomerOrder-${id}`, () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /** Function for fetching customer order data
+   * @example
+   * fetchCustomerOrder();
+   */
+  const fetchCustomerOrder: FetchCustomerOrder = async (id) => {
+    state.value.loading = true;
+    const { data, error } = await useAsyncData(() => Promise.resolve(getCustomerOrder(id)));
+    useHandleError(error.value);
+    state.value.data = data.value;
+    state.value.loading = false;
+    return data as unknown as ReturnType<FetchCustomerOrder>;
+  };
+
+  return {
+    fetchCustomerOrder,
+    ...toRefs(state.value),
+  };
+};

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

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

package/app/composables/useCustomerOrders/index.ts

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

package/app/composables/useCustomerOrders/types.ts

@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+import type { Maybe } from '../_types';
+import type { OrderData } from '../useCustomerOrder/types';
+
+export type OrdersData = Pick<OrderData, 'id' | 'date' | 'paymentAmount' | 'status'>[];
+
+export interface UseCustomerOrdersState {
+  data: Maybe<OrdersData>;
+  loading: boolean;
+}
+
+export type FetchCustomerOrders = () => Promise<Ref<Maybe<OrdersData>>>;
+
+export interface UseCustomerOrders {
+  data: Readonly<Ref<UseCustomerOrdersState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  fetchCustomerOrders: FetchCustomerOrders;
+}
+
+export type UseCustomerOrdersReturn = () => UseCustomerOrders;

package/app/composables/useCustomerOrders/useCustomerOrders.ts

@@ -0,0 +1,56 @@
+import { toRefs } from '@vueuse/shared';
+import { computed } from 'vue';
+import type { Ref } from 'vue';
+import type { Maybe } from '../_types';
+import type { OrderData } from '../useCustomerOrder/types';
+import type {
+  UseCustomerOrdersReturn,
+  UseCustomerOrdersState,
+  FetchCustomerOrders,
+  OrdersData,
+} from './types';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+
+const order: Pick<OrderData, 'id' | 'date' | 'paymentAmount'> = {
+  id: '0e4fec5a-61e6-48b8-94cc-d5f77687e2b0',
+  date: '2022-08-11',
+  paymentAmount: 295.87,
+};
+/**
+ * @description Composable managing customer orders data
+ * @returns {@link UseCustomerOrdersReturn}
+ * @example
+ * const { data, loading, fetchCustomerOrders } = useCustomerOrders();
+ */
+export const useCustomerOrders: UseCustomerOrdersReturn = () => {
+  const state = useState<UseCustomerOrdersState>('useCustomerOrders', () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /** Function for fetching customer orders data
+   * @example
+   * fetchCustomerOrders();
+   */
+  const fetchCustomerOrders: FetchCustomerOrders = async () => {
+    state.value.loading = true;
+    const { data, error } = await useAsyncData(() =>
+      Promise.resolve([
+        { ...order, status: 'Completed' },
+        { ...order, status: 'Shipped' },
+        { ...order, status: 'Open' },
+        { ...order, status: 'Cancelled' },
+      ] as OrderData[]),
+    );
+    useHandleError(error.value);
+    state.value.data = data.value;
+    state.value.loading = false;
+    return computed(() => state.value.data) as unknown as Ref<Maybe<OrdersData>>;
+  };
+
+  return {
+    fetchCustomerOrders,
+    ...toRefs(state.value),
+  };
+};

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

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

package/app/composables/useCustomerReturns/index.ts

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

package/app/composables/useCustomerReturns/types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import { Maybe } from '../_types';
+
+export interface UseCustomerReturnsState {
+  data: Maybe<unknown[]>;
+  loading: boolean;
+}
+
+export type FetchCustomerReturns = () => Promise<Ref<unknown[] | null>>;
+
+export interface UseCustomerReturns {
+  data: Readonly<Ref<UseCustomerReturnsState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  fetchCustomerReturns: FetchCustomerReturns;
+}
+
+export type UseCustomerReturnsReturn = () => UseCustomerReturns;

package/app/composables/useCustomerReturns/useCustomerReturns.ts

@@ -0,0 +1,41 @@
+import { toRefs } from '@vueuse/shared';
+import { computed } from 'vue';
+import type { Ref } from 'vue';
+import type {
+  UseCustomerReturnsReturn,
+  UseCustomerReturnsState,
+  FetchCustomerReturns,
+} from './types';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+
+/**
+ * @description Composable managing returns data
+ * @returns {@link UseCustomerReturnsReturn}
+ * @example
+ * const { data, loading, fetchCustomerReturns } = useCustomerReturns();
+ */
+export const useCustomerReturns: UseCustomerReturnsReturn = () => {
+  const state = useState<UseCustomerReturnsState>(`useCustomerReturns`, () => ({
+    data: [],
+    loading: false,
+  }));
+
+  /** Function for fetching returns data
+   * @example
+   * fetchCustomerReturns();
+   */
+  const fetchCustomerReturns: FetchCustomerReturns = async () => {
+    state.value.loading = true;
+    const { data, error } = await useAsyncData(() => Promise.resolve([]));
+    useHandleError(error.value);
+    state.value.data = data.value;
+    state.value.loading = false;
+    return computed(() => state.value.data) as unknown as Ref<unknown[] | null>;
+  };
+
+  return {
+    fetchCustomerReturns,
+    ...toRefs(state.value),
+  };
+};

package/app/composables/useHandleError/index.ts

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

package/app/composables/useHandleError/types.ts

@@ -0,0 +1,11 @@
+import type { Maybe } from '../_types';
+import { H3Error } from 'h3';
+
+export type ErrorParams = Maybe<
+  Partial<H3Error> & {
+    status?: number;
+    statusText?: string;
+  }
+>;
+
+export type UseHandleError = (error: ErrorParams) => void;

package/app/composables/useHandleError/useHandleError.ts

@@ -0,0 +1,27 @@
+import type { UseHandleError, ErrorParams } from './types';
+import { createError } from 'h3';
+
+const defaultError: ErrorParams = {
+  status: 500,
+  message: 'An error occurred',
+  statusMessage: 'An error occurred',
+};
+
+/**
+ * @description Composable for handling errors.
+ * @param error {@link ErrorParams}
+ * @returns Throws an error if there is one.
+ * @example
+ * const { data, error } = await fetch(data);
+ * useHandleError(error.value);
+ */
+export const useHandleError: UseHandleError = (error) => {
+  if (error) {
+    throw createError({
+      statusCode: error.status || defaultError.status,
+      message: error.message ?? defaultError.message,
+      statusMessage: error.message ?? defaultError.statusMessage,
+      fatal: true,
+    });
+  }
+};

package/app/composables/useInventory.ts

@@ -0,0 +1,29 @@
+import { getCommerceClient } from '../utils/client'
+
+export function useInventory() {
+  const client = getCommerceClient()
+
+  async function checkInventory(sku: string, qty: number) {
+    try {
+      // Prefer adapter-provided inventory check when available
+      if (client && typeof client.checkInventory === 'function') {
+        return await client.checkInventory(sku, qty)
+      }
+
+      // Fallback to Magento inventory endpoint
+      const url = `${process.env.COMMERCE_API_URL}${encodeURIComponent(sku)}`
+      const res = await fetch(url)
+      if (!res.ok) return false
+      const data = await res.json()
+      const available = (data?.available ?? data?.qty ?? 0) as number
+      return available >= qty
+    } catch (e) {
+      console.error('Inventory check failed', e)
+      return false
+    }
+  }
+
+  return { checkInventory }
+}
+
+export default useInventory

package/app/composables/useLoading.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+
+export function useLoading() {
+  const active = ref<Record<string, boolean>>({})
+
+  function startLoading(key = 'default') {
+    active.value[key] = true
+  }
+
+  function stopLoading(key = 'default') {
+    delete active.value[key]
+  }
+
+  function isLoading(key = 'default') {
+    return Boolean(active.value[key])
+  }
+
+  return { startLoading, stopLoading, isLoading, active }
+}
+
+export default useLoading

package/app/composables/useNotification.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+
+export type NotificationPayload = { type: 'success'|'error'|'info'|'warning'; message: string }
+
+const notifications = ref<NotificationPayload[]>([])
+
+export function useNotification() {
+  function show(payload: NotificationPayload) {
+    notifications.value.push(payload)
+    // For production-grade UX integrate with a toast library here.
+    // Using console as fallback to keep runtime deterministic.
+    if (payload.type === 'error') console.error(payload.message)
+    else console.log(payload.type.toUpperCase(), payload.message)
+  }
+
+  function clear() { notifications.value = [] }
+
+  return { notifications, show, clear }
+}
+
+export default useNotification

package/app/composables/usePageTitle.ts

@@ -0,0 +1,20 @@
+import { useAppConfig } from "nuxt/app";
+
+// Avoid relying on ambient auto-imports for `useHead` during typechecking
+const _useHead = (globalThis as any).useHead as ((h: any) => void) | undefined
+
+
+/**
+ * Composable for setting the page title.
+ * Used in layouts. Title can be changed in pages through the `useHead` composable.
+ */
+export const usePageTitle = () => {
+  const { titleSuffix } = useAppConfig();
+
+  const runner = _useHead || ((globalThis as any).useHead)
+  if (typeof runner === 'function') {
+    runner({
+      titleTemplate: (titleChunk: any) => titleChunk ? `${titleChunk} | ${titleSuffix}` : titleSuffix
+    })
+  }
+};

package/app/composables/useProduct/index.ts

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

package/app/composables/useProduct/types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type { SfProduct, Maybe } from '../_types';
+
+export interface UseProductState {
+  data: Maybe<SfProduct>;
+  loading: boolean;
+}
+
+export type FetchProduct = (slug: string) => Promise<Ref<Maybe<SfProduct>>>;
+
+export interface UseProduct {
+  data: Readonly<Ref<UseProductState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  fetchProduct: FetchProduct;
+}
+
+export type UseProductReturn = (slug: string) => UseProduct;

package/app/composables/useProduct/useProduct.ts

@@ -0,0 +1,42 @@
+import { toRefs } from '@vueuse/shared';
+import { computed } from 'vue';
+import type { Ref } from 'vue';
+import type { Maybe, Product } from '../_types';
+import type { UseProductReturn, UseProductState, FetchProduct } from './types';
+import { getCommerceClient } from '../../utils/client';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+
+/**
+ * @description Composable managing product data
+ * @param {string} slug Product slug
+ * @returns {@link UseProductReturn}
+ * @example
+ * const { data, loading, fetchProduct } = useProduct('product-slug');
+ */
+export const useProduct: UseProductReturn = (slug) => {
+  const state = useState<UseProductState>(`useProduct-${slug}`, () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /** Function for fetching product data
+   * @param {string} slug Product slug
+   * @example
+   * fetchProduct('product-slug');
+   */
+  const fetchProduct: FetchProduct = async (slug: string) => {
+    state.value.loading = true;
+    const client = getCommerceClient();
+    const { data, error } = await useAsyncData(() => client.getProduct?.(slug) ?? client.fetchProduct?.(slug));
+    useHandleError(error.value);
+    state.value.data = data.value as unknown as Maybe<Product>;
+    state.value.loading = false;
+    return computed(() => state.value.data) as unknown as Ref<Maybe<Product>>;
+  };
+
+  return {
+    fetchProduct,
+    ...toRefs(state.value),
+  };
+};

package/app/composables/useProductAttribute/__tests__/useProduct.mock.ts

@@ -0,0 +1,31 @@
+import type { SfProduct } from '../../_types';
+
+export const mockProduct: SfProduct = {
+  id: '1',
+  sku: 'product-1',
+  name: 'Product 1',
+  slug: 'product-1',
+  description: '',
+  rating: {
+    average: 4.5,
+    count: 133,
+  },
+  price: {
+    isDiscounted: false,
+    regularPrice: {
+      currency: 'USD',
+      amount: 100.0,
+      precisionAmount: '2',
+    },
+    value: {
+      currency: 'USD',
+      amount: 100.0,
+      precisionAmount: '2',
+    },
+  },
+  attributes: [],
+  primaryImage: null,
+  gallery: [],
+  variants: [],
+  quantityLimit: 1
+};

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

@@ -0,0 +1,14 @@
+import { useProductAttribute } from '../useProductAttribute';
+import { mockProduct } from './useProduct.mock';
+
+describe('useProductAttribute', () => {
+  it('should return product attributes', () => {
+    const { getAttributeList, getAttribute } = useProductAttribute(mockProduct, ['attribute']);
+
+    const attributeList = getAttributeList('attribute');
+    const attributeValue = getAttribute('attribute');
+
+    expect(attributeList).toEqual([]);
+    expect(attributeValue).toEqual(null);
+  });
+});

package/app/composables/useProductAttribute/index.ts

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

package/app/composables/useProductAttribute/useProductAttribute.ts

@@ -0,0 +1,37 @@
+import { ref } from 'vue';
+import { SfAttribute, SfProduct } from '../_types';
+import { groupBy, uniqBy } from 'lodash-es';
+
+/**
+ * composable for getting product attributes data
+ * @param {SfProduct} product Product object
+ * @param {TAttribute} attributesNames get specific product attributes
+ */
+export function useProductAttribute<TAttribute extends string>(product: SfProduct, attributesNames: TAttribute[] = []) {
+  const attributes = groupBy(
+    uniqBy(
+      (product?.variants || []).flatMap((variant: any) => variant?.attributes),
+      'value',
+    ),
+    'name',
+  );
+
+  const mapAttribute = (attributes: SfAttribute[] = []) => {
+    const defaults = attributesNames.map((attribute) => ({ name: attribute, value: null }));
+
+    return Object.fromEntries([...defaults, ...attributes].map(({ name, value }) => [name, value]));
+  };
+
+  const selectedAttrs = ref(mapAttribute(product.attributes));
+
+  return {
+    getAttributeList: (attributeName: TAttribute) => attributes[attributeName] || [],
+    getAttribute: (attributeName: TAttribute) => selectedAttrs.value[attributeName],
+    setAttribute: (attributeName: TAttribute, attributeValue: string) => {
+      selectedAttrs.value = {
+        ...selectedAttrs.value,
+        [attributeName]: attributeValue,
+      };
+    },
+  };
+}

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

@@ -0,0 +1,12 @@
+import { useProductRecommended } from '~/composables/useProductRecommended/useProductRecommended';
+
+describe('useProductRecommended', () => {
+  it('should return product reviews', async () => {
+    const slug = 'athletic-mens-walking-sneakers';
+    const { data: recommendedProducts, fetchProductRecommended } = useProductRecommended(slug);
+
+    await fetchProductRecommended(slug);
+
+    expect(recommendedProducts.value).not.toBeUndefined();
+  });
+});

package/app/composables/useProductRecommended/index.ts

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

package/app/composables/useProductRecommended/types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type { SfProduct, Maybe } from '../_types';
+
+export interface UseProductRecommendedState {
+  data: Maybe<SfProduct[]>;
+  loading: boolean;
+}
+
+export type FetchProductRecommended = (slug: string) => Promise<Ref<Maybe<SfProduct[]>>>;
+
+export interface UseProductRecommended {
+  data: Readonly<Ref<UseProductRecommendedState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  fetchProductRecommended: FetchProductRecommended;
+}
+
+export type UseProductRecommendedReturn = (slug: string) => UseProductRecommended;