@meeovi/layer-commerce 1.0.10 → 1.0.13

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/usePageTitle.ts

@@ -0,0 +1,16 @@
+import useHead from "../modules/vue-head/composables/useHead";
+import { useAppConfig } from "nuxt/app";
+
+/**
+ * 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();
+
+  useHead({
+    titleTemplate: (titleChunk: any) => {
+      return 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) => 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;

package/app/composables/useProductRecommended/useProductRecommended.ts

@@ -0,0 +1,43 @@
+import { toRefs } from '@vueuse/shared';
+import { computed } from 'vue';
+import type { Ref } from 'vue';
+import type { Maybe, SfProduct } from '../_types';
+import { useAsyncData, useState } from 'nuxt/app';
+import type {
+  UseProductRecommendedReturn,
+  UseProductRecommendedState,
+  FetchProductRecommended,
+} from './types';
+import { getCommerceClient } from '../../utils/client';
+import { useHandleError } from '../useHandleError';
+
+/**
+ * Composable for getting recommended products data
+ * @param {string} slug Product slug
+ */
+export const useProductRecommended: UseProductRecommendedReturn = (slug) => {
+  const state = useState<UseProductRecommendedState>(`useProductRecommended-${slug}`, () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /** Function for fetching product recommended data
+   * @param {string} slug Product slug
+   * @example
+   * fetchProductRecommended('product-slug');
+   */
+  const fetchProductRecommended: FetchProductRecommended = async (slug) => {
+    state.value.loading = true;
+    const client = getCommerceClient();
+    const { data, error } = await useAsyncData(() => client.listProducts?.());
+    useHandleError(error.value);
+    state.value.data = data.value as unknown as Maybe<SfProduct[]>;
+    state.value.loading = false;
+    return computed(() => state.value.data) as unknown as Ref<Maybe<SfProduct[]>>;
+  };
+
+  return {
+    fetchProductRecommended,
+    ...toRefs(state.value),
+  };
+};

package/app/composables/useProductReviews/__tests__/productReviews.mock.ts

@@ -0,0 +1,20 @@
+import type { SfProductReview } from '../_types';
+
+export const mockProductReviews: SfProductReview[] = [
+  {
+    id: '1',
+    text: "I recently purchased a pair of sneakers and I am thoroughly impressed with their quality and comfort. The design is sleek and modern, and the shoes are available in a variety of colors to suit anyone's style preferences. The upper is made of a breathable and durable material that allows my feet to stay cool and dry during long walks or runs. The sole is also very comfortable and provides great support for my feet, making it easy for me to wear them all day without experiencing any discomfort or fatigue. Overall, I highly recommend these sneakers to anyone in the market for a comfortable and stylish shoe that can handle any activity. They are definitely worth the investment!",
+    reviewer: 'John Doe',
+    rating: 5,
+    title: 'Great product!',
+    createdAt: '2022-04-28T12:00:00.000Z',
+  },
+  {
+    id: '2',
+    text: "I recently purchased a pair of sneakers and I am thoroughly impressed with their quality and comfort. The design is sleek and modern, and the shoes are available in a variety of colors to suit anyone's style preferences. The upper is made of a breathable and durable material that allows my feet to stay cool and dry during long walks or runs. The sole is also very comfortable and provides great support for my feet, making it easy for me to wear them all day without experiencing any discomfort or fatigue. Overall, I highly recommend these sneakers to anyone in the market for a comfortable and stylish shoe that can handle any activity. They are definitely worth the investment!",
+    reviewer: 'John Doe',
+    rating: 5,
+    title: 'Great product!',
+    createdAt: '2022-03-01T09:30:00.000Z',
+  },
+];

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

@@ -0,0 +1,22 @@
+import { vi } from 'vitest';
+import { useProductReviews } from '~/composables/useProductReviews';
+import { mockProductReviews } from './productReviews.mock';
+
+vi.mock('@meeovi/sdk', () => ({
+  sdk: {
+    commerce: {
+      getProductReviews: vi.fn(() => mockProductReviews),
+    },
+  },
+}));
+
+describe('useProductReview', () => {
+  it('should return product reviews', async () => {
+    const slug = 'athletic-mens-walking-sneakers';
+    const { data, fetchProductReviews } = useProductReviews(slug);
+
+    await fetchProductReviews(slug);
+
+    expect(data.value).toEqual(mockProductReviews);
+  });
+});

package/app/composables/useProductReviews/index.ts

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

package/app/composables/useProductReviews/types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type { SfProductReview, Maybe } from '../_types';
+
+export interface UseProductReviewsState {
+  data: Maybe<SfProductReview[]>;
+  loading: boolean;
+}
+
+export type FetchProductReviews = (slug: string) => Promise<Ref<Maybe<SfProductReview[]>>>;
+
+export interface UseProductReviewsReturn {
+  data: Readonly<Ref<UseProductReviewsState['data']>>;
+  loading: Readonly<Ref<boolean>>;
+  fetchProductReviews: FetchProductReviews;
+}
+
+export type UseProductReviews = (slug: string) => UseProductReviewsReturn;

package/app/composables/useProductReviews/useProductReviews.ts

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

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

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