@meeovi/layer-commerce 1.0.10 → 1.0.13

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,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/index.ts

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

package/app/composables/useContent/types.ts

@@ -0,0 +1,44 @@
+import type { Ref } from 'vue';
+import type { Maybe } from '../_types';
+import type { HeadingProps } from '~/components/Heading/types';
+import type { ProductSliderProps } from '~/components/ProductSlider/types';
+import type { CategoryCardProps } from '~/components/ui/CategoryCard/types';
+import type { DisplayProps } from '~/components/ui/Display/types';
+import type { HeroProps } from '~/components/ui/Hero/types';
+
+type EntryFields<TFields> = Array<{
+  fields: TFields;
+}>;
+
+type WithComponentField<TProps, TComponent> = TProps & {
+  component: TComponent;
+};
+
+export type DynamicContentFields =
+  | WithComponentField<HeroProps, 'Hero'>
+  | WithComponentField<CategoryCardProps, 'Card'>
+  | WithComponentField<HeadingProps, 'Heading'>
+  | WithComponentField<DisplayProps, 'Display'>
+  | WithComponentField<ProductSliderProps, 'ProductSlider'>;
+
+export interface ContentDynamicPage {
+  component: 'Page';
+  content: EntryFields<DynamicContentFields>;
+  name: string;
+  url: string;
+}
+
+export interface UseContentState {
+  data: Maybe<EntryFields<ContentDynamicPage>>;
+  loading: boolean;
+}
+
+export type GetContent = () => Promise<Ref<Maybe<EntryFields<ContentDynamicPage>>>>;
+
+export interface UseContent {
+  data: Readonly<Ref<UseContentState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  getContent: GetContent;
+}
+
+export type UseContentReturn = (url: string) => UseContent;

package/app/composables/useContent/useContent.ts

@@ -0,0 +1,45 @@
+import { toRefs } from '@vueuse/shared';
+import type { UseContentReturn, UseContentState, GetContent } from './types';
+import { getCommerceClient } from '../../utils/client';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+
+/**
+ * @description Composable for managing content from CMS.
+ * @param url Parameter of the content to fetch.
+ * @returns {@link UseContent}
+ * @example
+ * const { data, loading, getContent } = useContent<ContentFieldsType>('url');
+ */
+export const useContent: UseContentReturn = (url) => {
+  const state = useState<UseContentState>(`content-${url}`, () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /**
+   * @description Function for fetching the content.
+   * @example
+   * getContent();
+   */
+  const getContent: GetContent = async () => {
+    state.value.loading = true;
+    try {
+      const client = getCommerceClient();
+      const result = await useAsyncData(() => client.listProducts?.());
+      const { data, error } = result as unknown as { data: Awaited<ReturnType<GetContent>>; error: any };
+      useHandleError(error?.value ?? error);
+      state.value.data = data.value;
+      return data;
+    } catch (error) {
+      throw new Error(error as string);
+    } finally {
+      state.value.loading = false;
+    }
+  };
+
+  return {
+    getContent,
+    ...toRefs(state.value),
+  };
+};

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;