@ikas/storefront-providers 4.0.0-alpha.10

package/src/providers/prop-value/link.ts

@@ -0,0 +1,259 @@
+import { IkasThemeJson, IkasThemeJsonPageType } from "@ikas/storefront-models";
+import IkasPropValueProvider from ".";
+import { IkasLinkPropValue, IkasLinkType } from "../../models/prop-value/link";
+import { IkasNavigationLink } from "../../models/ui";
+
+export type IkasLinkMetaDataType = "DEFAULT" | "BLOG" | "RAFFLE";
+export type IkasLinkMetaDataTargetId = {
+  type: IkasLinkMetaDataType;
+  id: string;
+  navigationLink: IkasNavigationLink;
+};
+
+export class IkasLinkPropValueProvider
+  implements IkasPropValueProvider<IkasNavigationLink | IkasNavigationLink[]>
+{
+  private linkPropValue: IkasLinkPropValue | IkasLinkPropValue[];
+  private theme: IkasThemeJson;
+  private linkMetaDataTargetIds: IkasLinkMetaDataTargetId[];
+
+  constructor(
+    linkPropValue: IkasLinkPropValue | IkasLinkPropValue[],
+    theme: IkasThemeJson,
+    linkMetaDataTargetIds: IkasLinkMetaDataTargetId[]
+  ) {
+    this.linkPropValue = linkPropValue;
+    this.theme = theme;
+    this.linkMetaDataTargetIds = linkMetaDataTargetIds;
+  }
+
+  private async getNavigationLink(
+    linkPropValue: IkasLinkPropValue
+  ): Promise<IkasNavigationLink> {
+    let navigationLink: IkasNavigationLink | undefined;
+
+    if (linkPropValue.linkType === IkasLinkType.PAGE) {
+      // INDEX PAGE
+      if (linkPropValue.pageType === IkasThemeJsonPageType.INDEX) {
+        navigationLink = {
+          href: "/",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (linkPropValue.pageType === IkasThemeJsonPageType.ACCOUNT) {
+        navigationLink = {
+          href: "/account",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (linkPropValue.pageType === IkasThemeJsonPageType.ADDRESSES) {
+        navigationLink = {
+          href: "/account/addresses",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (linkPropValue.pageType === IkasThemeJsonPageType.ORDERS) {
+        navigationLink = {
+          href: "/account/orders",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (
+        linkPropValue.pageType === IkasThemeJsonPageType.FAVORITE_PRODUCTS
+      ) {
+        navigationLink = {
+          href: "/account/favorite-products",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (linkPropValue.pageType === IkasThemeJsonPageType.LOGIN) {
+        navigationLink = {
+          href: "/account/login",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (linkPropValue.pageType === IkasThemeJsonPageType.REGISTER) {
+        navigationLink = {
+          href: "/account/register",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (
+        linkPropValue.pageType === IkasThemeJsonPageType.FORGOT_PASSWORD
+      ) {
+        navigationLink = {
+          href: "/account/forgot-password",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (
+        linkPropValue.pageType === IkasThemeJsonPageType.RECOVER_PASSWORD
+      ) {
+        navigationLink = {
+          href: "/account/recover-password",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (linkPropValue.pageType === IkasThemeJsonPageType.BLOG_INDEX) {
+        navigationLink = {
+          href: "/blog",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (linkPropValue.pageType === IkasThemeJsonPageType.CART) {
+        navigationLink = {
+          href: "/cart",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      } else if (linkPropValue.pageType === IkasThemeJsonPageType.SEARCH) {
+        navigationLink = {
+          href: "/search",
+          label: linkPropValue.label || "",
+          subLinks: [],
+        };
+      }
+      // CUSTOM PAGE
+      else if (linkPropValue.pageType === IkasThemeJsonPageType.CUSTOM) {
+        const themePage = this.theme.pages.find(
+          (p) => p.id === linkPropValue.pageId
+        );
+        if (themePage) {
+          navigationLink = {
+            href: "/pages/" + themePage.slug,
+            label: linkPropValue.label || "",
+            subLinks: [],
+          };
+        }
+      }
+      // ITEM PAGES
+      else if (
+        [
+          IkasThemeJsonPageType.PRODUCT,
+          IkasThemeJsonPageType.BRAND,
+          IkasThemeJsonPageType.CATEGORY,
+        ].includes(linkPropValue.pageType!)
+      ) {
+        if (linkPropValue.itemId) {
+          navigationLink = {
+            href: "/",
+            label: linkPropValue.label || "",
+            subLinks: [],
+          };
+          this.linkMetaDataTargetIds.push({
+            type: "DEFAULT",
+            id: linkPropValue.itemId,
+            navigationLink,
+          });
+        }
+      }
+      // BLOG ITEM PAGES
+      else if (
+        [
+          IkasThemeJsonPageType.BLOG,
+          IkasThemeJsonPageType.BLOG_CATEGORY,
+        ].includes(linkPropValue.pageType!)
+      ) {
+        if (linkPropValue.itemId) {
+          navigationLink = {
+            href: "/blog/",
+            label: linkPropValue.label || "",
+            subLinks: [],
+          };
+          this.linkMetaDataTargetIds.push({
+            type: "BLOG",
+            id: linkPropValue.itemId,
+            navigationLink,
+          });
+        }
+      }
+      // RAFFLE ITEM PAGE
+      else if (linkPropValue.pageType === IkasThemeJsonPageType.RAFFLE_DETAIL) {
+        if (linkPropValue.itemId) {
+          navigationLink = {
+            href: "/raffle/",
+            label: linkPropValue.label || "",
+            subLinks: [],
+          };
+          this.linkMetaDataTargetIds.push({
+            type: "RAFFLE",
+            id: linkPropValue.itemId,
+            navigationLink,
+          });
+        }
+      }
+      // RAFFLE ITEM PAGE
+      // else if (linkPropValue.pageType === IkasThemeJsonPageType.RAFFLE_DETAIL) {
+      //   if (linkPropValue.itemId) {
+      //     navigationLink = new IkasNavigationLink(
+      //       "/raffle/",
+      //       linkPropValue.label || "",
+      //       []
+      //     );
+      //     this.linkMetaDataTargetIds.push({
+      //       type: "RAFFLE",
+      //       id: linkPropValue.itemId,
+      //       navigationLink,
+      //     });
+      //   }
+      // }
+    }
+    // EXTERNAL LINK
+    else if (linkPropValue.linkType === IkasLinkType.EXTERNAL) {
+      navigationLink = {
+        href: linkPropValue.externalLink || "",
+        label: linkPropValue.label || "",
+        subLinks: [],
+        isExternal: true,
+      };
+    }
+
+    if (navigationLink) {
+      navigationLink.subLinks = await Promise.all(
+        linkPropValue.subLinks.map((sl) => this.getNavigationLink(sl))
+      );
+
+      // ADD HASH LINK
+      if (linkPropValue.pageComponentId && linkPropValue.pageId) {
+        const page = this.theme.pages.find(
+          (p) => p.id === linkPropValue.pageId
+        );
+
+        const headerComponentId = this.theme.components.find(
+          (c) => c.isHeader
+        )?.id;
+        const footerComponentId = this.theme.components.find(
+          (c) => c.isFooter
+        )?.id;
+
+        const pageComponents =
+          page?.components.filter(
+            (pc) =>
+              pc.componentId !== headerComponentId &&
+              pc.componentId !== footerComponentId
+          ) || [];
+
+        const componentIndex = pageComponents.findIndex(
+          (pc) => pc.id === linkPropValue.pageComponentId
+        );
+        if (componentIndex !== -1) {
+          navigationLink.href += "#" + componentIndex;
+        }
+      }
+
+      return navigationLink;
+    }
+
+    return { href: "", label: "", subLinks: [] } as IkasNavigationLink;
+  }
+
+  async getValue(): Promise<IkasNavigationLink | IkasNavigationLink[]> {
+    if (Array.isArray(this.linkPropValue)) {
+      return await Promise.all(
+        this.linkPropValue.map((lpv) => this.getNavigationLink(lpv))
+      );
+    } else {
+      return await this.getNavigationLink(this.linkPropValue);
+    }
+  }
+}

package/src/providers/prop-value/product-detail.ts

@@ -0,0 +1,92 @@
+import { listProductOptionSet, searchProducts } from "@ikas/storefront-api";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import { IkasProductFunctions } from "@ikas/storefront-model-functions";
+import IkasPropValueProvider from ".";
+import { IkasProductPropValue } from "../../models/prop-value/product";
+import { getPlaceholderProduct } from "../placeholders";
+import {
+  IkasProductPropValueData,
+  IkasProductPropValueProduct,
+} from "../types";
+
+export class IkasProductPropValueProvider
+  implements IkasPropValueProvider<IkasProductPropValueData | null>
+{
+  private productDetailPropValue: IkasProductPropValue;
+
+  constructor(prop: IkasProductPropValue) {
+    this.productDetailPropValue = prop;
+  }
+
+  async getValue(): Promise<IkasProductPropValueData | null> {
+    if (this.productDetailPropValue?.usePageData) {
+      return {
+        productDetailPropValue: this.productDetailPropValue,
+        productDetail: null,
+      };
+    }
+    if (!this.productDetailPropValue.productId) return null;
+
+    const productSearchResponse = await searchProducts({
+      input: {
+        productIdList: [this.productDetailPropValue.productId],
+        priceListId: IkasStorefrontConfig.getPriceListId(),
+        salesChannelId: IkasStorefrontConfig.getSalesChannelId(),
+      },
+    });
+
+    if (productSearchResponse.isSuccess && productSearchResponse.data?.data) {
+      const productList: IkasProductPropValueProduct[] =
+        productSearchResponse.data.data;
+
+      if (productList.length) {
+        const product = productList[0];
+
+        // Set product option set if exists
+        if (product.productOptionSetId) {
+          const optionSetResponse = await listProductOptionSet({
+            id: { eq: product.productOptionSetId },
+          });
+
+          if (optionSetResponse.isSuccess && optionSetResponse.data?.length) {
+            product.productOptionSet = optionSetResponse.data[0];
+          }
+        }
+
+        const { hasVariant } = IkasProductFunctions;
+
+        if (product && hasVariant(product)) {
+          const variant = product.variants.find(
+            (v) => v.id === this.productDetailPropValue.variantId
+          );
+
+          if (variant) {
+            product.selectedVariantValues = variant?.variantValues;
+
+            return {
+              productDetailPropValue: this.productDetailPropValue,
+              productDetail: product,
+            };
+          } else return null;
+        } else {
+          const selectedVariant = product.variants.find((v) => v.isActive);
+          product.selectedVariantValues = (
+            selectedVariant || product.variants[0]
+          ).variantValues;
+
+          return {
+            productDetailPropValue: this.productDetailPropValue,
+            productDetail: product,
+          };
+        }
+      } else {
+        return {
+          productDetailPropValue: this.productDetailPropValue,
+          productDetail: getPlaceholderProduct(),
+        };
+      }
+    }
+
+    return null;
+  }
+}

package/src/providers/prop-value/product-list.ts

@@ -0,0 +1,124 @@
+import {
+  IkasBrand,
+  IkasCategory,
+  IkasThemeJsonPageType,
+} from "@ikas/storefront-models";
+import IkasPropValueProvider from ".";
+import { IkasProductListPropValue } from "../../models/prop-value/product-list";
+import {
+  IkasProductList,
+  IkasProductListSortType,
+  IkasProductListType,
+  IkasRelatedProductsType,
+} from "../../models/ui";
+import { getInitial } from "../../models/ui/product-list/init";
+
+export type IkasRelatedProductProps = {
+  brandIds: string[] | null;
+  categoryIds: string[] | null;
+  productId: string;
+};
+
+export class IkasProductListPropValueProvider
+  implements IkasPropValueProvider<IkasProductList>
+{
+  private pageType: IkasThemeJsonPageType;
+  private productListPropValue: IkasProductListPropValue;
+  private pageSpecificData?: any;
+
+  private relatedProductData?: IkasRelatedProductProps | null = null;
+
+  constructor(
+    pageType: IkasThemeJsonPageType,
+    productListPropValue: IkasProductListPropValue,
+    pageSpecificData?: any
+  ) {
+    this.pageType = pageType;
+    this.productListPropValue = productListPropValue;
+    this.pageSpecificData = pageSpecificData;
+    this.relatedProductData = null;
+  }
+
+  async getValue(): Promise<IkasProductList> {
+    let filterBrandId: string | undefined;
+    let filterCategoryId: string | undefined;
+
+    if (this.productListPropValue.productListType === IkasProductListType.ALL) {
+      if (this.productListPropValue.usePageFilter) {
+        if (this.pageType === IkasThemeJsonPageType.CATEGORY) {
+          const category = this.pageSpecificData as IkasCategory;
+          filterCategoryId = category.id;
+        } else if (this.pageType === IkasThemeJsonPageType.BRAND) {
+          const brand = this.pageSpecificData as IkasBrand;
+          filterBrandId = brand.id;
+        }
+      }
+    }
+
+    if (
+      this.productListPropValue.productListType ===
+        IkasProductListType.CATEGORY &&
+      this.productListPropValue.category
+    ) {
+      filterCategoryId = this.productListPropValue.category;
+    }
+
+    if (
+      this.pageType === IkasThemeJsonPageType.PRODUCT &&
+      this.productListPropValue.productListType ===
+        IkasProductListType.RELATED_PRODUCTS &&
+      this.productListPropValue.relatedProductsType &&
+      this.pageSpecificData
+    ) {
+      this.relatedProductData = {
+        brandIds: null,
+        categoryIds: null,
+        productId: "",
+      };
+
+      if (
+        this.productListPropValue.relatedProductsType ===
+        IkasRelatedProductsType.CATEGORY
+      ) {
+        this.relatedProductData.categoryIds =
+          this.pageSpecificData.product.categories.map(
+            (category: IkasCategory) => category.id
+          );
+      } else {
+        this.relatedProductData.brandIds = [
+          this.pageSpecificData.product?.brand?.id,
+        ];
+      }
+      this.relatedProductData.productId = this.pageSpecificData.product.id;
+    }
+
+    const productList: IkasProductList = {
+      data: [],
+      count: 0,
+      page: 1,
+      limit: this.productListPropValue.initialLimit || 10,
+      type:
+        this.productListPropValue.productListType || IkasProductListType.ALL,
+      sort:
+        this.productListPropValue.initialSort ||
+        IkasProductListSortType.LAST_ADDED,
+      productListPropValue: this.productListPropValue,
+      filterBrandId,
+      filterCategoryId,
+      pageType: this.pageType,
+      pageSpecificData: [
+        IkasThemeJsonPageType.CATEGORY,
+        IkasThemeJsonPageType.BRAND,
+      ].includes(this.pageType)
+        ? this.pageSpecificData
+        : undefined,
+      relatedProductData: this.relatedProductData,
+      filters: null,
+      infiniteScrollPage: null,
+    };
+
+    await getInitial(productList);
+
+    return productList;
+  }
+}

package/src/providers/prop-value/raffle-list.ts

@@ -0,0 +1,20 @@
+import IkasPropValueProvider from ".";
+import { IkasRaffleList } from "../../models/ui";
+import { getInitial } from "../../models/ui/raffle-list/init";
+
+export class IkasRaffleListPropValueProvider
+  implements IkasPropValueProvider<IkasRaffleList>
+{
+  async getValue(): Promise<IkasRaffleList> {
+    const raffleList: IkasRaffleList = {
+      data: [],
+      count: 0,
+      page: 1,
+      limit: 20,
+    };
+
+    await getInitial(raffleList);
+
+    return raffleList;
+  }
+}

package/src/providers/prop-value/raffle.ts

@@ -0,0 +1,41 @@
+import { listRaffle } from "@ikas/storefront-api";
+import IkasPropValueProvider from ".";
+import { IkasRafflePropValue } from "../../models/prop-value/raffle";
+import { populateRaffleProducts } from "../helpers/raffle";
+import { getPlaceholderRaffle } from "../placeholders";
+import { IkasRafflePropValueData } from "../types";
+
+export class IkasRafflePropValueProvider
+  implements IkasPropValueProvider<IkasRafflePropValueData | null>
+{
+  private rafflePropValue: IkasRafflePropValue;
+
+  constructor(propValue: IkasRafflePropValue) {
+    this.rafflePropValue = propValue;
+  }
+
+  async getValue(): Promise<IkasRafflePropValueData | null> {
+    if (this.rafflePropValue?.usePageData) {
+      return {
+        raffle: null,
+        rafflePropValue: this.rafflePropValue,
+      };
+    }
+    if (!this.rafflePropValue.raffleId) return null;
+
+    const rafflesResponse = await listRaffle({
+      id: { eq: this.rafflePropValue.raffleId },
+    });
+
+    if (!rafflesResponse.isSuccess || !rafflesResponse.data?.data?.length)
+      return null;
+
+    const raffle = rafflesResponse.data.data[0];
+    await populateRaffleProducts([raffle]);
+
+    return {
+      raffle: raffle || getPlaceholderRaffle(),
+      rafflePropValue: this.rafflePropValue,
+    };
+  }
+}

package/src/providers/prop-value/rich-text.ts

@@ -0,0 +1,14 @@
+import IkasPropValueProvider from ".";
+
+export class IkasRichTextPropValueProvider
+  implements IkasPropValueProvider<string> {
+  private text: string;
+
+  constructor(textPropValue: string) {
+    this.text = textPropValue;
+  }
+
+  async getValue(): Promise<string> {
+    return this.text;
+  }
+}

package/src/providers/prop-value/slider.ts

@@ -0,0 +1,19 @@
+import IkasPropValueProvider from ".";
+import { IkasSliderPropValueData } from "../types";
+
+export class IkasSliderPropValueProvider
+  implements IkasPropValueProvider<IkasSliderPropValueData>
+{
+  private sliderData: IkasSliderPropValueData;
+
+  constructor(sliderData: IkasSliderPropValueData) {
+    this.sliderData = sliderData;
+  }
+
+  async getValue(): Promise<IkasSliderPropValueData> {
+    return {
+      value: this.sliderData.value,
+      unit: this.sliderData.unit,
+    };
+  }
+}

package/src/providers/prop-value/text.ts

@@ -0,0 +1,14 @@
+import IkasPropValueProvider from ".";
+
+export class IkasTextPropValueProvider
+  implements IkasPropValueProvider<string> {
+  private text: string;
+
+  constructor(textPropValue: string) {
+    this.text = textPropValue;
+  }
+
+  async getValue(): Promise<string> {
+    return this.text;
+  }
+}

package/src/providers/types.ts

@@ -0,0 +1,88 @@
+import {
+  IkasBlog,
+  IkasBlogCategory,
+  IkasBrand,
+  IkasCategory,
+  IkasProduct,
+  IkasProductOptionSet,
+  IkasRaffle,
+  IkasThemeJsonComponent,
+  IkasThemeJsonCustomData,
+  IkasThemeJsonPageComponent,
+  IkasVariantValue,
+} from "@ikas/storefront-models";
+import { IkasAttributeListPropValue } from "../models/prop-value/attribute-list";
+import { IkasAttributePropValue } from "../models/prop-value/attribute";
+import { IkasBlogCategoryPropValue } from "../models/prop-value/blog-category";
+import { IkasBlogPropValue } from "../models/prop-value/blog";
+import { IkasBrandPropValue } from "../models/prop-value/brand";
+import { IkasCategoryPropValue } from "../models/prop-value/category";
+import { IkasProductPropValue } from "../models/prop-value/product";
+import { IkasRafflePropValue } from "../models/prop-value/raffle";
+
+export class IkasPageComponentPropValue {
+  pageComponent: IkasThemeJsonPageComponent;
+  component: IkasThemeJsonComponent;
+  propValues: Record<string, any>;
+
+  constructor(data: IkasPageComponentPropValue) {
+    this.pageComponent = data.pageComponent;
+    this.component = data.component;
+    this.propValues = data.propValues || {};
+  }
+}
+
+export type IkasAttributeListPropValueData = {
+  productDetail: IkasProduct | null;
+  attributeListPropValue: IkasAttributeListPropValue;
+};
+
+export type IkasAttributePropValueData = {
+  productDetail: IkasProductPropValueProduct | null;
+  attributePropValue: IkasAttributePropValue;
+};
+
+export type IkasBlogCategoryPropValueData = {
+  blogCategory: IkasBlogCategory | null;
+  blogCategoryPropValue: IkasBlogCategoryPropValue;
+};
+
+export type IkasBlogPropValueData = {
+  blog: IkasBlog | null;
+  blogPropValue: IkasBlogPropValue;
+};
+
+export type IkasBrandPropValueData = {
+  brand: IkasBrand | null;
+  brandPropValue: IkasBrandPropValue;
+};
+
+export type IkasCategoryPropValueData = {
+  category: IkasCategory | null;
+  categoryPropValue: IkasCategoryPropValue;
+};
+
+export type IkasCustomDataPropValueData = {
+  value: any;
+  customData: IkasThemeJsonCustomData;
+};
+
+export type IkasProductPropValueProduct = {
+  productOptionSet?: IkasProductOptionSet | null;
+  selectedVariantValues?: IkasVariantValue[] | null;
+} & IkasProduct;
+
+export type IkasProductPropValueData = {
+  productDetailPropValue: IkasProductPropValue;
+  productDetail: IkasProductPropValueProduct | null;
+};
+
+export type IkasRafflePropValueData = {
+  raffle: IkasRaffle | null;
+  rafflePropValue: IkasRafflePropValue;
+};
+
+export type IkasSliderPropValueData = {
+  value: number;
+  unit: string | null;
+};