@meeovi/layer-commerce 1.0.11 → 1.0.14

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,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/useCustomer/__tests__/useCustomer.spec.ts

@@ -0,0 +1,25 @@
+import { useCustomer } from '~/composables/useCustomer/useCustomer';
+
+vi.mock('@meeovi/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';

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;