@ikas/storefront-providers 4.0.0-alpha.59 → 4.0.0-alpha.60

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

@@ -0,0 +1,712 @@
+import _uniq from "lodash/uniq";
+import { makeAutoObservable } from "mobx";
+
+import {
+  IkasThemeJson,
+  IkasThemeJsonPageType,
+  IkasThemeJsonPageComponent,
+  IkasThemeJsonComponentPropType,
+  IkasThemeJsonComponentProp,
+  IkasThemeJsonPage,
+  IkasHTMLMetaDataTargetType,
+  IkasHTMLMetaData,
+  IkasMerchantSettings,
+  IkasCustomerReviewSummary,
+  IkasProduct,
+  IkasBlogMetaData,
+  IkasBlogMetaDataTargetType,
+  IkasThemeJsonPageSpecification,
+  IkasRaffleMetaData,
+  IkasRaffleMetadataTargetType,
+} from "@ikas/storefront-models";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import { IkasProductFunctions } from "@ikas/storefront-model-functions";
+
+import { IkasProductListPropValueProvider } from "./prop-value/product-list";
+import IkasPropValueProvider from "./prop-value";
+import { IkasProductPropValueProvider } from "./prop-value/product-detail";
+import { IkasBrandListPropValueProvider } from "./prop-value/brand-list";
+import { IkasBrandPropValueProvider } from "./prop-value/brand";
+import {
+  IkasLinkPropValueProvider,
+  IkasLinkMetaDataTargetId,
+  IkasLinkMetaDataType,
+} 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 { IkasSliderPropValueProvider } from "./prop-value/slider";
+import { IkasRichTextPropValueProvider } from "./prop-value/rich-text";
+import { IkasBlogPropValueProvider } from "./prop-value/blog";
+import { IkasBlogListPropValueProvider } from "./prop-value/blog-list";
+import { IkasAttributePropValueProvider } from "./prop-value/attribute";
+import { IkasAttributeListPropValueProvider } from "./prop-value/attribute-list";
+import { IkasBlogCategoryPropValueProvider } from "./prop-value/blog-category";
+import { IkasBlogCategoryListPropValueProvider } from "./prop-value/blog-category-list";
+import { IkasRafflePropValueProvider } from "./prop-value/raffle";
+import { IkasRaffleListPropValueProvider } from "./prop-value/raffle-list";
+import { IkasPageComponentPropValue } from "./types";
+import {
+  listBlog,
+  listBlogCategory,
+  listBlogMetaData,
+  listProductBrand,
+  listCategory,
+  listCustomerReviewSummary,
+  listHTMLMetaData,
+  listMerchantSettings,
+  listProductOptionSet,
+  listStorefrontRaffle,
+  listRaffleMetaData,
+  searchProducts,
+} from "@ikas/storefront-api";
+import { populateRaffleProducts } from "./helpers/raffle";
+import { IkasBrandPropValue } from "../models/prop-value/brand";
+import { IkasBrandListPropValue } from "../models/prop-value/brand-list";
+import { IkasProductListPropValue } from "../models/prop-value/product-list";
+import { IkasProductPropValue } from "../models/prop-value/product";
+import { IkasAttributePropValue } from "../models/prop-value/attribute";
+import { IkasAttributeListPropValue } from "../models/prop-value/attribute-list";
+import { IkasCategoryPropValue } from "../models/prop-value/category";
+import { IkasCategoryListPropValue } from "../models/prop-value/category-list";
+
+export class IkasPageDataProvider {
+  theme: IkasThemeJson;
+  pageType?: IkasThemeJsonPageType | null = null;
+  pageParams: Record<string, any> = {};
+  private pageComponentPropValues: IkasPageComponentPropValue[] = [];
+  pageSpecificData?: any | null = null;
+  merchantSettings?: IkasMerchantSettings | null = null;
+  possiblePageTypes?: IkasThemeJsonPageType[] = []; // Used for distinguishing blog slug page from main slug page
+  linkMetaDataTargetIds: IkasLinkMetaDataTargetId[] = []; // Used for bulk fetching of link slugs
+
+  // Only used for product pages
+  productReviewSummary: IkasCustomerReviewSummary | null = null;
+
+  constructor(
+    theme: IkasThemeJson,
+    pageParams?: Record<string, any>,
+    pageType?: IkasThemeJsonPageType
+  ) {
+    this.theme = theme;
+    this.pageParams = pageParams || {};
+    this.pageType = pageType;
+
+    makeAutoObservable(this);
+  }
+
+  get page(): IkasThemeJsonPage | undefined {
+    if (this.pageType === IkasThemeJsonPageType.CUSTOM) {
+      const { slug } = this.pageParams;
+      return this.theme.pages.find(
+        (page) =>
+          page.type === IkasThemeJsonPageType.CUSTOM && page.slug === slug
+      );
+    }
+
+    return this.theme.pages.find((page) => page.type === this.pageType);
+  }
+
+  get nextPageData() {
+    return {
+      props: JSON.parse(
+        JSON.stringify({
+          propValues: this.pageComponentPropValues,
+          pageSpecificData: this.pageSpecificData || null,
+          pageType: this.page?.type || IkasThemeJsonPageType.CUSTOM,
+          pageTitle: this.page?.pageTitle || null,
+          pageDescription: this.page?.description || null,
+          canonicals: this.page?.canonicals || null,
+          disableIndex: this.page?.disableIndex || null,
+          themeSettings: this.theme.settings || {},
+          productReviewSummary: this.productReviewSummary,
+          configJson: IkasStorefrontConfig.toJSON(),
+        })
+      ),
+    };
+  }
+
+  get specification() {
+    const selectedPage = this.page;
+    let specification: IkasThemeJsonPageSpecification | undefined;
+
+    if (selectedPage?.type === IkasThemeJsonPageType.PRODUCT) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === (this.pageSpecificData as IkasProduct)?.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 || [];
+  }
+
+  get $pageComponentPropValues() {
+    return this.pageComponentPropValues;
+  }
+
+  async getMerchantSettings() {
+    const merchantSettingsResponse = await listMerchantSettings({});
+
+    if (merchantSettingsResponse.isSuccess && merchantSettingsResponse.data) {
+      this.merchantSettings = merchantSettingsResponse.data;
+    }
+  }
+
+  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)
+      )
+    );
+
+    await this.setLinkSlugs();
+    await this.getProductReviewSummary();
+  }
+
+  async getProductReviewSummary() {
+    if (this.pageType === IkasThemeJsonPageType.PRODUCT) {
+      const responseReviewSummaryResponse = await listCustomerReviewSummary({
+        productId: {
+          eq: (this.pageSpecificData as IkasProduct)?.id,
+        },
+      });
+
+      if (
+        responseReviewSummaryResponse.isSuccess &&
+        responseReviewSummaryResponse.data?.data?.length
+      ) {
+        this.productReviewSummary = responseReviewSummaryResponse.data.data[0];
+      }
+    }
+  }
+
+  async getPageSpecificData() {
+    if (
+      this.pageType &&
+      ![
+        IkasThemeJsonPageType.BRAND,
+        IkasThemeJsonPageType.PRODUCT,
+        IkasThemeJsonPageType.CATEGORY,
+        IkasThemeJsonPageType.BLOG,
+        IkasThemeJsonPageType.BLOG_CATEGORY,
+        IkasThemeJsonPageType.RAFFLE_DETAIL,
+      ].includes(this.pageType)
+    )
+      return;
+
+    const { slug } = this.pageParams as Record<string, string>;
+    if (!slug) {
+      return;
+    }
+
+    let metaDataList:
+      | IkasHTMLMetaData[]
+      | IkasBlogMetaData[]
+      | IkasRaffleMetaData[] = [];
+
+    if (
+      this.possiblePageTypes?.includes(IkasThemeJsonPageType.BLOG) ||
+      this.possiblePageTypes?.includes(IkasThemeJsonPageType.BLOG_CATEGORY)
+    ) {
+      const response = await listBlogMetaData({
+        slug: { eq: slug },
+      });
+      metaDataList = response.data?.data || [];
+
+      if (!metaDataList.length) return;
+    } else if (
+      this.possiblePageTypes?.includes(IkasThemeJsonPageType.RAFFLE_DETAIL)
+    ) {
+      const response = await listRaffleMetaData({
+        slug: { eq: slug },
+      });
+      metaDataList = response.data || [];
+
+      if (!metaDataList.length) return;
+    } else {
+      const response = await listHTMLMetaData({
+        slug: { eq: slug },
+      });
+      metaDataList = response.data || [];
+
+      if (!metaDataList || !metaDataList.length) return;
+    }
+
+    const metaData = metaDataList[0];
+    if (!metaData.targetId) return;
+
+    const handleProductPage = async () => {
+      const productsResponse = await searchProducts({
+        input: {
+          productIdList: [metaData.targetId!],
+          priceListId: IkasStorefrontConfig.getPriceListId(),
+          salesChannelId: IkasStorefrontConfig.getSalesChannelId(),
+        },
+      });
+
+      if (!productsResponse?.data?.data?.length) {
+        return;
+      }
+
+      const product = productsResponse.data.data[0];
+
+      // Set product option set if exists
+      if (product.productOptionSetId) {
+        const optionSetResponse = await listProductOptionSet({
+          id: { eq: product.productOptionSetId },
+        });
+        if (optionSetResponse.isSuccess && optionSetResponse?.data?.length) {
+          //@ts-ignore
+          product.productOptionSet = optionSetResponse.data[0];
+        }
+      }
+
+      const selectedVariant = product.variants.find((v) => v.isActive);
+      if (!selectedVariant) return;
+
+      //@ts-ignore
+      product.selectedVariantValues = selectedVariant.variantValues;
+
+      const { getDisplayedVariantTypes } = IkasProductFunctions;
+
+      this.pageSpecificData = product as IkasProduct;
+
+      const displayedVariantTypes = getDisplayedVariantTypes(
+        this.pageSpecificData as IkasProduct,
+        //@ts-ignore
+        product.selectedVariantValues
+      );
+
+      // Select the first displayed in stock variant
+      if (displayedVariantTypes.length) {
+        const displayedVariantType = displayedVariantTypes[0];
+
+        if (displayedVariantType.displayedVariantValues.length) {
+          const inStockVariant =
+            displayedVariantType.displayedVariantValues.find(
+              (dvv) => dvv.hasStock
+            );
+          if (inStockVariant) {
+            this.pageSpecificData.selectedVariantValues =
+              inStockVariant.variant.variantValues;
+          }
+        }
+      }
+
+      this.pageType = IkasThemeJsonPageType.PRODUCT;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleBrandPage = async () => {
+      const brandsResponse = await listProductBrand({
+        id: { eq: metaData.targetId },
+      });
+      if (!brandsResponse.isSuccess || !brandsResponse.data?.data?.length)
+        return;
+
+      const brand = brandsResponse.data.data[0];
+      this.pageSpecificData = brand;
+      this.pageType = IkasThemeJsonPageType.BRAND;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleCategoryPage = async () => {
+      const categoriesResponse = await listCategory({
+        id: { eq: metaData.targetId },
+      });
+
+      if (
+        !categoriesResponse.isSuccess ||
+        !categoriesResponse.data?.data?.length
+      )
+        return;
+
+      const category = categoriesResponse.data.data[0];
+      this.pageSpecificData = category;
+      this.pageType = IkasThemeJsonPageType.CATEGORY;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleBlogPage = async () => {
+      const blogsResponse = await listBlog({
+        id: { eq: metaData.targetId },
+      });
+      if (!blogsResponse.isSuccess || !blogsResponse.data?.data?.length) return;
+
+      const blog = blogsResponse.data.data[0];
+      this.pageSpecificData = blog;
+      this.pageType = IkasThemeJsonPageType.BLOG;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleBlogCategoryPage = async () => {
+      const blogCategoriesResponse = await listBlogCategory({
+        id: { eq: metaData.targetId },
+        pagination: {
+          page: 1,
+          limit: 1,
+        },
+      });
+
+      if (
+        !blogCategoriesResponse.isSuccess ||
+        !blogCategoriesResponse.data?.data?.length
+      )
+        return;
+
+      const blogCategory = blogCategoriesResponse.data.data[0];
+      this.pageSpecificData = blogCategory;
+      this.pageType = IkasThemeJsonPageType.BLOG_CATEGORY;
+      this.setPageMetaData(metaData);
+    };
+
+    const handleRafflePage = async () => {
+      const response = await listStorefrontRaffle({
+        id: { eq: metaData.targetId },
+      });
+
+      if (!response.isSuccess || !response.data?.data?.length) return;
+
+      const raffle = response.data.data[0];
+      await populateRaffleProducts([raffle]);
+
+      this.pageSpecificData = raffle;
+      this.pageType = IkasThemeJsonPageType.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: IkasThemeJsonPageComponent) {
+    const component = this.theme!.components.find(
+      (c) => c.id === pageComponent.componentId
+    )!;
+
+    const result: IkasPageComponentPropValue = {
+      pageComponent,
+      component,
+      propValues: {},
+    };
+
+    const setPageComponentPropValue = async (
+      prop: IkasThemeJsonComponentProp
+    ) => {
+      result.propValues[prop.name] = await this.getPageComponentPropValue(
+        pageComponent,
+        prop
+      );
+    };
+
+    await Promise.all(component.props.map(setPageComponentPropValue));
+
+    return result;
+  }
+
+  async getPageComponentPropValue(
+    pageComponent: IkasThemeJsonPageComponent,
+    prop: IkasThemeJsonComponentProp
+  ) {
+    let propValueProvider: IkasPropValueProvider<any> | undefined;
+    const propValue = pageComponent.propValues[prop.name];
+    const emptyPropValueTypes = [IkasThemeJsonComponentPropType.RAFFLE_LIST];
+
+    if (
+      (propValue === null || propValue === undefined) &&
+      !emptyPropValueTypes.includes(prop.type)
+    )
+      return null;
+
+    switch (prop.type) {
+      case IkasThemeJsonComponentPropType.TEXT:
+        propValueProvider = new IkasTextPropValueProvider(propValue as string);
+        break;
+
+      case IkasThemeJsonComponentPropType.RICH_TEXT:
+        propValueProvider = new IkasRichTextPropValueProvider(
+          propValue as string
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.BOOLEAN:
+        propValueProvider = new IkasBooleanPropValueProvider(
+          propValue as boolean
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.IMAGE:
+        propValueProvider = new IkasImagePropValueProvider(propValue as string);
+        break;
+
+      case IkasThemeJsonComponentPropType.IMAGE_LIST:
+        propValueProvider = new IkasImageListPropValueProvider(
+          propValue as string[]
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.BRAND:
+        propValueProvider = new IkasBrandPropValueProvider(
+          propValue as IkasBrandPropValue
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.BRAND_LIST:
+        propValueProvider = new IkasBrandListPropValueProvider(
+          propValue as IkasBrandListPropValue
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.PRODUCT_LIST:
+        propValueProvider = new IkasProductListPropValueProvider(
+          this.pageType!,
+          propValue as IkasProductListPropValue,
+          this.pageSpecificData
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.PRODUCT_DETAIL:
+        propValueProvider = new IkasProductPropValueProvider(
+          propValue as IkasProductPropValue
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE:
+        propValueProvider = new IkasAttributePropValueProvider(
+          propValue as IkasAttributePropValue
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE_LIST:
+        propValueProvider = new IkasAttributeListPropValueProvider(
+          propValue as IkasAttributeListPropValue
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.CATEGORY:
+        propValueProvider = new IkasCategoryPropValueProvider(
+          propValue as IkasCategoryPropValue
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.CATEGORY_LIST:
+        propValueProvider = new IkasCategoryListPropValueProvider(
+          propValue as IkasCategoryListPropValue
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.LINK:
+      case IkasThemeJsonComponentPropType.LIST_OF_LINK:
+        propValueProvider = new IkasLinkPropValueProvider(
+          propValue,
+          this.theme,
+          this.linkMetaDataTargetIds
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.COLOR:
+        propValueProvider = new IkasColorPropValueProvider(propValue as string);
+        break;
+
+      case IkasThemeJsonComponentPropType.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 IkasThemeJsonComponentPropType.COMPONENT:
+      case IkasThemeJsonComponentPropType.COMPONENT_LIST:
+        const pageComponents = propValue as IkasThemeJsonPageComponent[];
+        return await Promise.all(
+          pageComponents.map((tp) => this.getPageComponentPropValues(tp))
+        );
+
+      case IkasThemeJsonComponentPropType.BLOG:
+        propValueProvider = new IkasBlogPropValueProvider(propValue);
+        break;
+
+      case IkasThemeJsonComponentPropType.BLOG_LIST:
+        propValueProvider = new IkasBlogListPropValueProvider(
+          this.pageType!,
+          propValue,
+          this.pageSpecificData
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.BLOG_CATEGORY:
+        propValueProvider = new IkasBlogCategoryPropValueProvider(propValue);
+        break;
+
+      case IkasThemeJsonComponentPropType.BLOG_CATEGORY_LIST:
+        propValueProvider = new IkasBlogCategoryListPropValueProvider(
+          propValue
+        );
+        break;
+
+      case IkasThemeJsonComponentPropType.RAFFLE:
+        propValueProvider = new IkasRafflePropValueProvider(propValue);
+        break;
+
+      case IkasThemeJsonComponentPropType.RAFFLE_LIST:
+        propValueProvider = new IkasRaffleListPropValueProvider();
+        break;
+
+      case IkasThemeJsonComponentPropType.SLIDER:
+        propValueProvider = new IkasSliderPropValueProvider(propValue);
+        break;
+
+      default:
+        break;
+    }
+
+    return await propValueProvider?.getValue();
+  }
+
+  private setPageMetaData(
+    metaData: IkasHTMLMetaData | IkasBlogMetaData | IkasRaffleMetaData
+  ) {
+    if (this.page) {
+      this.page.pageTitle = metaData.pageTitle || null;
+      this.page.description = metaData.description || null;
+      this.page.canonicals = metaData.canonicals || null;
+      this.page.disableIndex = metaData.disableIndex || null;
+    }
+  }
+
+  async setLinkSlugs() {
+    const defaultLinks: IkasLinkMetaDataTargetId[] = [];
+    const blogLinks: IkasLinkMetaDataTargetId[] = [];
+    const raffleLinks: IkasLinkMetaDataTargetId[] = [];
+
+    this.linkMetaDataTargetIds.forEach((target) => {
+      switch (target.type) {
+        case "DEFAULT":
+          defaultLinks.push(target);
+          break;
+
+        case "BLOG":
+          blogLinks.push(target);
+          break;
+
+        case "RAFFLE":
+          raffleLinks.push(target);
+          break;
+
+        default:
+          break;
+      }
+    });
+
+    return await Promise.all([
+      this.getLinkSlugs(defaultLinks, "DEFAULT"),
+      this.getLinkSlugs(blogLinks, "BLOG"),
+      this.getLinkSlugs(raffleLinks, "RAFFLE"),
+    ]);
+  }
+
+  private async getLinkSlugs(
+    targets: IkasLinkMetaDataTargetId[],
+    type: IkasLinkMetaDataType
+  ) {
+    const idList = _uniq(targets.map((t) => t.id));
+    let metaDataList: (
+      | IkasHTMLMetaData
+      | IkasBlogMetaData
+      | IkasRaffleMetaData
+    )[] = [];
+
+    const getPage = async () => {
+      let results:
+        | (IkasHTMLMetaData | IkasBlogMetaData | IkasRaffleMetaData)[]
+        | undefined = [];
+
+      switch (type) {
+        case "DEFAULT":
+          const htmlMetaDataResponse = await listHTMLMetaData({
+            targetId: { in: idList },
+          });
+          results = htmlMetaDataResponse.data || [];
+          break;
+
+        case "BLOG":
+          const blogMetaDataResponse = await listBlogMetaData({
+            targetId: { in: idList },
+          });
+          results = blogMetaDataResponse.data?.data || [];
+          break;
+
+        case "RAFFLE":
+          const raffleMetaDataResponse = await listRaffleMetaData({
+            targetId: { in: idList },
+          });
+          results = raffleMetaDataResponse.data || [];
+          break;
+
+        default:
+          break;
+      }
+
+      if (results.length) metaDataList = results;
+    };
+
+    await getPage();
+
+    targets.forEach((target) => {
+      const metaData = metaDataList.find((md) => md.targetId === target.id);
+      if (metaData) {
+        target.navigationLink.href += metaData.slug;
+      }
+    });
+  }
+}