@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/providers/page-data-get.ts

@@ -0,0 +1,569 @@
+import { makeAutoObservable } from "mobx";
+const LZUTF8 = require("lzutf8");
+
+import {
+  IkasTheme,
+  IkasThemePageType,
+  IkasThemePageComponent,
+  IkasThemeComponentPropType,
+  IkasProductDetail,
+  IkasProductListPropValue,
+  IkasProductDetailPropValue,
+  IkasThemeComponentProp,
+  IkasThemeComponent,
+  IkasBrandListPropValue,
+  IkasBrandPropValue,
+  IkasThemePage,
+  IkasHTMLMetaDataTargetType,
+  IkasCategoryPropValue,
+  IkasCategoryListPropValue,
+  IkasHTMLMetaData,
+  IkasMerchantSettings,
+} from "../models";
+import {
+  IkasBrandAPI,
+  IkasHTMLMetaDataAPI,
+  IkasCategoryAPI,
+  IkasMerchantAPI,
+  IkasProductSearchAPI,
+  IkasBlogAPI,
+  IkasProductOptionSetAPI,
+  IkasRaffleAPI,
+} from "../api";
+import { IkasProductListPropValueProvider } from "./prop-value/product-list";
+import IkasPropValueProvider from "./prop-value";
+import { IkasProductDetailPropValueProvider } from "./prop-value/product-detail";
+import { IkasBrandListPropValueProvider } from "./prop-value/brand-list";
+import { IkasBrandPropValueProvider } from "./prop-value/brand";
+import { IkasLinkPropValueProvider } from "./prop-value/link";
+import { IkasImageListPropValueProvider } from "./prop-value/image-list";
+import { IkasTextPropValueProvider } from "./prop-value/text";
+import { IkasColorPropValueProvider } from "./prop-value/color";
+import { IkasBooleanPropValueProvider } from "./prop-value/boolean";
+import { IkasImagePropValueProvider } from "./prop-value/image";
+import { IkasCategoryPropValueProvider } from "./prop-value/category";
+import { IkasCategoryListPropValueProvider } from "./prop-value/category-list";
+import { IkasCustomPropValueProvider } from "./prop-value/custom";
+import { IkasStorefrontConfig } from "../storefront";
+import { IkasThemePageSpecification } from "../models/theme/page";
+import { IkasRichTextPropValueProvider } from "./prop-value/rich-text";
+import {
+  IkasBlogMetaData,
+  IkasBlogMetadataTargetType,
+} from "../models/data/blog";
+import { IkasBlogPropValueProvider } from "./prop-value/blog";
+import { IkasBlogListPropValueProvider } from "./prop-value/blog-list";
+import { IkasAttributePropValue } from "../models/theme/page/component/prop-value/attribute";
+import { IkasAttributePropValueProvider } from "./prop-value/attribute";
+import { IkasAttributeListPropValueProvider } from "./prop-value/attribute-list";
+import { IkasAttributeListPropValue } from "../models/theme/page/component/prop-value/attribute-list";
+import { IkasBlogCategoryPropValueProvider } from "./prop-value/blog-category";
+import { IkasBlogCategoryListPropValueProvider } from "./prop-value/blog-category-list";
+import {
+  IkasRaffleMetaData,
+  IkasRaffleMetadataTargetType,
+} from "../models/data/raffle";
+import { IkasRafflePropValueProvider } from "./prop-value/raffle";
+import { IkasRaffleListPropValueProvider } from "./prop-value/raffle-list";
+import { populateRaffleProducts } from "../providers/helpers/raffles";
+
+export class IkasPageDataProvider {
+  theme: IkasTheme;
+  pageType?: IkasThemePageType | null = null;
+  pageParams: Record<string, any> = {};
+  pageComponentPropValues: IkasPageComponentPropValue[] = [];
+  pageSpecificData?: any | null = null;
+  merchantSettings?: IkasMerchantSettings | null = null;
+  possiblePageTypes?: IkasThemePageType[] = []; // Used for distinguishing blog slug page from main slug page
+
+  constructor(
+    theme: IkasTheme,
+    pageParams?: Record<string, any>,
+    pageType?: IkasThemePageType
+  ) {
+    this.theme = new IkasTheme(theme);
+    this.pageParams = pageParams || {};
+    this.pageType = pageType;
+
+    makeAutoObservable(this);
+  }
+
+  get page(): IkasThemePage | undefined {
+    if (this.pageType === IkasThemePageType.CUSTOM) {
+      const { slug } = this.pageParams;
+      return this.theme.pages.find(
+        (page) => page.type === IkasThemePageType.CUSTOM && page.slug === slug
+      );
+    }
+
+    return this.theme.pages.find((page) => page.type === this.pageType);
+  }
+
+  get nextPageData() {
+    const compressed = LZUTF8.compress(
+      JSON.stringify(this.pageComponentPropValues),
+      {
+        outputEncoding: "Base64",
+      }
+    );
+
+    return {
+      props: {
+        propValuesStr: compressed,
+        pageSpecificDataStr: this.pageSpecificData
+          ? JSON.stringify(this.pageSpecificData || {})
+          : "",
+        pageType: this.page?.type || IkasThemePageType.CUSTOM,
+        pageTitle: this.page?.pageTitle || null,
+        pageDescription: this.page?.description || null,
+        settingsStr: JSON.stringify(this.theme.settings || {}),
+        merchantSettingsStr: this.merchantSettings
+          ? JSON.stringify(this.merchantSettings)
+          : null,
+        configJson: IkasStorefrontConfig.getJson(),
+      },
+    };
+  }
+
+  get specification() {
+    const selectedPage = this.page;
+    let specification: IkasThemePageSpecification | undefined;
+
+    if (selectedPage?.type === IkasThemePageType.PRODUCT) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === (this.pageSpecificData as IkasProductDetail)?.product.id
+      );
+    } else {
+      specification = selectedPage?.specifications?.find(
+        (s) => s.id === this.pageSpecificData?.id
+      );
+    }
+
+    return specification;
+  }
+
+  get pageComponents() {
+    if (this.specification) return this.specification.components;
+    return this.page?.components || [];
+  }
+
+  async getMerchantSettings() {
+    const merchantSettingsResponse = await IkasMerchantAPI.listMerchantSettings();
+
+    if (merchantSettingsResponse) {
+      this.merchantSettings = merchantSettingsResponse;
+    }
+  }
+
+  async getPageData() {
+    if (!this.pageSpecificData) {
+      await this.getPageSpecificData();
+    }
+
+    if (!this.page) return;
+
+    await this.getMerchantSettings();
+    this.pageComponentPropValues = await Promise.all(
+      this.pageComponents.map((pageComponent) =>
+        this.getPageComponentPropValues(pageComponent)
+      )
+    );
+  }
+
+  async getPageSpecificData() {
+    if (
+      this.pageType &&
+      ![
+        IkasThemePageType.BRAND,
+        IkasThemePageType.PRODUCT,
+        IkasThemePageType.CATEGORY,
+        IkasThemePageType.BLOG,
+        IkasThemePageType.BLOG_CATEGORY,
+        IkasThemePageType.RAFFLE_DETAIL,
+      ].includes(this.pageType)
+    )
+      return;
+
+    const { slug } = this.pageParams;
+    if (!slug) {
+      return;
+    }
+
+    let metaDataList:
+      | IkasHTMLMetaData[]
+      | IkasBlogMetaData[]
+      | IkasRaffleMetaData[] = [];
+
+    if (
+      this.possiblePageTypes?.includes(IkasThemePageType.BLOG) ||
+      this.possiblePageTypes?.includes(IkasThemePageType.BLOG_CATEGORY)
+    ) {
+      metaDataList = await IkasBlogAPI.listBlogMetaData(slug);
+      if (!metaDataList.length) return;
+    } else if (
+      this.possiblePageTypes?.includes(IkasThemePageType.RAFFLE_DETAIL)
+    ) {
+      metaDataList = await IkasRaffleAPI.listRaffleMetaData(slug);
+      if (!metaDataList.length) return;
+    } else {
+      metaDataList = await IkasHTMLMetaDataAPI.listHTMLMetaData(slug);
+      if (!metaDataList || !metaDataList.length) return;
+    }
+
+    const metaData = metaDataList[0];
+    if (!metaData.targetId) return;
+
+    const handleProductPage = async () => {
+      const productsResponse = await IkasProductSearchAPI.searchProducts({
+        productIdList: [metaData.targetId!],
+        priceListId: IkasStorefrontConfig.priceListId,
+        salesChannelId: IkasStorefrontConfig.salesChannelId,
+      });
+
+      if (!productsResponse?.data.length) {
+        return;
+      }
+
+      const product = productsResponse.data[0];
+
+      // Set product option set if exists
+      if (product.productOptionSetId) {
+        const optionSetResponse = await IkasProductOptionSetAPI.list([
+          product.productOptionSetId,
+        ]);
+        if (optionSetResponse?.length) {
+          product.productOptionSet = optionSetResponse[0];
+        }
+      }
+
+      const selectedVariant = product.variants.find((v) => v.isActive);
+      if (!selectedVariant) return;
+
+      this.pageSpecificData = new IkasProductDetail(
+        product,
+        selectedVariant.variantValues
+      );
+
+      // Select the first displayed in stock variant
+      if (this.pageSpecificData.displayedVariantTypes.length) {
+        const displayedVariantType = (this
+          .pageSpecificData as IkasProductDetail).displayedVariantTypes[0];
+
+        if (displayedVariantType.displayedVariantValues.length) {
+          const inStockVariant = displayedVariantType.displayedVariantValues.find(
+            (dvv) => dvv.hasStock
+          );
+          if (inStockVariant) {
+            this.pageSpecificData.selectedVariantValues =
+              inStockVariant.variant.variantValues;
+          }
+        }
+      }
+
+      this.pageType = IkasThemePageType.PRODUCT;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleBrandPage = async () => {
+      const brandsResponse = await IkasBrandAPI.listBrands({
+        idList: [metaData.targetId!],
+      });
+      if (!brandsResponse.brands.length) return;
+
+      const brand = brandsResponse.brands[0];
+      this.pageSpecificData = brand;
+      this.pageType = IkasThemePageType.BRAND;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleCategoryPage = async () => {
+      const categoriesResponse = await IkasCategoryAPI.listCategories({
+        idList: [metaData.targetId!],
+      });
+      if (!categoriesResponse.categories.length) return;
+
+      const category = categoriesResponse.categories[0];
+      this.pageSpecificData = category;
+      this.pageType = IkasThemePageType.CATEGORY;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleBlogPage = async () => {
+      const blog = await IkasBlogAPI.getBlog({
+        id: metaData.targetId!,
+      });
+      if (!blog) return;
+
+      this.pageSpecificData = blog;
+      this.pageType = IkasThemePageType.BLOG;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleBlogCategoryPage = async () => {
+      const blogCategoriesResponse = await IkasBlogAPI.listBlogCategory({
+        idList: [metaData.targetId!],
+        page: 1,
+        limit: 1,
+      });
+      if (
+        !blogCategoriesResponse ||
+        !blogCategoriesResponse.blogCategories.length
+      )
+        return;
+
+      const blogCategory = blogCategoriesResponse.blogCategories[0];
+
+      this.pageSpecificData = blogCategory;
+      this.pageType = IkasThemePageType.BLOG_CATEGORY;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleRafflePage = async () => {
+      const response = await IkasRaffleAPI.listRaffles({
+        id: metaData.targetId!,
+      });
+      if (!response || !response.raffles.length) return;
+
+      const raffle = response.raffles[0];
+      await populateRaffleProducts([raffle]);
+
+      this.pageSpecificData = raffle;
+      this.pageType = IkasThemePageType.RAFFLE_DETAIL;
+      this.setPageMetaData(metaData);
+    };
+
+    switch (metaData.targetType) {
+      case IkasHTMLMetaDataTargetType.BRAND:
+        return await handleBrandPage();
+
+      case IkasHTMLMetaDataTargetType.CATEGORY:
+        return await handleCategoryPage();
+
+      case IkasHTMLMetaDataTargetType.PRODUCT:
+        return await handleProductPage();
+
+      case IkasBlogMetadataTargetType.BLOG:
+        return await handleBlogPage();
+
+      case IkasBlogMetadataTargetType.BLOG_CATEGORY:
+        return await handleBlogCategoryPage();
+
+      case IkasRaffleMetadataTargetType.RAFFLE:
+        return await handleRafflePage();
+      default:
+        break;
+    }
+  }
+
+  async getPageComponentPropValues(pageComponent: IkasThemePageComponent) {
+    const component = this.theme!.components.find(
+      (c) => c.id === pageComponent.componentId
+    )!;
+
+    const result: IkasPageComponentPropValue = {
+      pageComponent,
+      component,
+      propValues: {},
+    };
+
+    const setPageComponentPropValue = async (prop: IkasThemeComponentProp) => {
+      result.propValues[prop.name] = await this.getPageComponentPropValue(
+        pageComponent,
+        prop
+      );
+    };
+
+    await Promise.all(component.props.map(setPageComponentPropValue));
+
+    return result;
+  }
+
+  async getPageComponentPropValue(
+    pageComponent: IkasThemePageComponent,
+    prop: IkasThemeComponentProp
+  ) {
+    let propValueProvider: IkasPropValueProvider<any> | undefined;
+    const propValue = pageComponent.propValues[prop.name];
+    const emptyPropValueTypes = [IkasThemeComponentPropType.RAFFLE_LIST];
+
+    if (
+      (propValue === null || propValue === undefined) &&
+      !emptyPropValueTypes.includes(prop.type)
+    )
+      return null;
+
+    switch (prop.type) {
+      case IkasThemeComponentPropType.TEXT:
+        propValueProvider = new IkasTextPropValueProvider(propValue as string);
+        break;
+
+      case IkasThemeComponentPropType.RICH_TEXT:
+        propValueProvider = new IkasRichTextPropValueProvider(
+          propValue as string
+        );
+        break;
+
+      case IkasThemeComponentPropType.BOOLEAN:
+        propValueProvider = new IkasBooleanPropValueProvider(
+          propValue as boolean
+        );
+        break;
+
+      case IkasThemeComponentPropType.IMAGE:
+        propValueProvider = new IkasImagePropValueProvider(propValue as string);
+        break;
+
+      case IkasThemeComponentPropType.IMAGE_LIST:
+        propValueProvider = new IkasImageListPropValueProvider(
+          propValue as string[]
+        );
+        break;
+
+      case IkasThemeComponentPropType.BRAND:
+        propValueProvider = new IkasBrandPropValueProvider(
+          propValue as IkasBrandPropValue
+        );
+        break;
+
+      case IkasThemeComponentPropType.BRAND_LIST:
+        propValueProvider = new IkasBrandListPropValueProvider(
+          propValue as IkasBrandListPropValue
+        );
+        break;
+
+      case IkasThemeComponentPropType.PRODUCT_LIST:
+        propValueProvider = new IkasProductListPropValueProvider(
+          this.pageType!,
+          propValue as IkasProductListPropValue,
+          this.pageSpecificData
+        );
+        break;
+
+      case IkasThemeComponentPropType.PRODUCT_DETAIL:
+        propValueProvider = new IkasProductDetailPropValueProvider(
+          propValue as IkasProductDetailPropValue
+        );
+        break;
+
+      case IkasThemeComponentPropType.PRODUCT_ATTRIBUTE:
+        propValueProvider = new IkasAttributePropValueProvider(
+          propValue as IkasAttributePropValue
+        );
+        break;
+
+      case IkasThemeComponentPropType.PRODUCT_ATTRIBUTE_LIST:
+        propValueProvider = new IkasAttributeListPropValueProvider(
+          propValue as IkasAttributeListPropValue
+        );
+        break;
+
+      case IkasThemeComponentPropType.CATEGORY:
+        propValueProvider = new IkasCategoryPropValueProvider(
+          propValue as IkasCategoryPropValue
+        );
+        break;
+
+      case IkasThemeComponentPropType.CATEGORY_LIST:
+        propValueProvider = new IkasCategoryListPropValueProvider(
+          propValue as IkasCategoryListPropValue
+        );
+        break;
+
+      case IkasThemeComponentPropType.LINK:
+      case IkasThemeComponentPropType.LIST_OF_LINK:
+        propValueProvider = new IkasLinkPropValueProvider(
+          propValue,
+          this.theme
+        );
+        break;
+
+      case IkasThemeComponentPropType.COLOR:
+        propValueProvider = new IkasColorPropValueProvider(propValue as string);
+        break;
+
+      case IkasThemeComponentPropType.CUSTOM:
+        const customData = this.theme.customData.find(
+          (cd) => cd.id === prop.customDataId
+        );
+        if (!customData) return;
+
+        propValueProvider = new IkasCustomPropValueProvider(
+          propValue,
+          customData,
+          this.theme,
+          this.pageType!,
+          this,
+          this.pageSpecificData,
+          this.pageParams
+        );
+        break;
+
+      case IkasThemeComponentPropType.COMPONENT:
+      case IkasThemeComponentPropType.COMPONENT_LIST:
+        const pageComponents = propValue as IkasThemePageComponent[];
+        return await Promise.all(
+          pageComponents.map((tp) => this.getPageComponentPropValues(tp))
+        );
+
+      case IkasThemeComponentPropType.BLOG:
+        propValueProvider = new IkasBlogPropValueProvider(propValue);
+        break;
+
+      case IkasThemeComponentPropType.BLOG_LIST:
+        propValueProvider = new IkasBlogListPropValueProvider(
+          this.pageType!,
+          propValue,
+          this.pageSpecificData
+        );
+        break;
+
+      case IkasThemeComponentPropType.BLOG_CATEGORY:
+        propValueProvider = new IkasBlogCategoryPropValueProvider(propValue);
+        break;
+
+      case IkasThemeComponentPropType.BLOG_CATEGORY_LIST:
+        propValueProvider = new IkasBlogCategoryListPropValueProvider(
+          propValue
+        );
+        break;
+
+      case IkasThemeComponentPropType.RAFFLE:
+        propValueProvider = new IkasRafflePropValueProvider(propValue);
+        break;
+
+      case IkasThemeComponentPropType.RAFFLE_LIST:
+        propValueProvider = new IkasRaffleListPropValueProvider();
+        break;
+
+      default:
+        break;
+    }
+
+    return await propValueProvider?.getValue();
+  }
+
+  private setPageMetaData(
+    metaData: IkasHTMLMetaData | IkasBlogMetaData | IkasRaffleMetaData
+  ) {
+    if (this.page) {
+      this.page.pageTitle = metaData.pageTitle;
+      this.page.description = metaData.description;
+    }
+  }
+}
+
+export class IkasPageComponentPropValue {
+  pageComponent: IkasThemePageComponent;
+  component: IkasThemeComponent;
+  propValues: Record<string, any>;
+
+  constructor(data: Partial<IkasPageComponentPropValue>) {
+    this.pageComponent = data.pageComponent
+      ? new IkasThemePageComponent(data.pageComponent)
+      : new IkasThemePageComponent({});
+    this.component = data.component
+      ? new IkasThemeComponent(data.component)
+      : new IkasThemeComponent({});
+    this.propValues = data.propValues || {};
+  }
+}