@ikas/storefront 1.0.21 → 2.0.0-alpha.1

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

@@ -0,0 +1,956 @@
+import { renderComponent } from "../components/page";
+import { IkasThemePageType } from "../models";
+import { IkasCategoryListParams } from "../models/ui/category-list";
+import { IkasAttributeList } from "../models/ui/product-attribute-list";
+import { IkasProductListParams } from "../models/ui/product-list";
+import { IkasRaffleListParams } from "../models/ui/raffle-list";
+import { observable } from "mobx";
+import { NextRouter } from "next/router";
+
+const LZUTF8 = require("lzutf8");
+
+import {
+  IkasThemeSettings,
+  IkasThemePageComponent,
+  IkasThemeComponent,
+  IkasThemeComponentPropType,
+  IkasThemeComponentProp,
+  IkasBrand,
+  IkasBrandListParams,
+  IkasBrandList,
+  IkasCategory,
+  IkasCategoryList,
+  IkasProductList,
+  IkasProductDetail,
+  IkasVariantValue,
+  IkasAttributeDetail,
+  IkasNavigationLink,
+  IkasImage,
+  IkasThemeCustomData,
+  IkasComponentRenderer,
+  IkasBlog,
+  IkasBlogListParams,
+  IkasBlogList,
+  IkasBlogCategory,
+  IkasBlogCategoryListParams,
+  IkasBlogCategoryList,
+  IkasRaffle,
+  IkasRaffleList,
+} from "../models";
+import { IkasPageComponentPropValue } from "./page-data-get";
+import {
+  getPlaceholderBlog,
+  getPlaceholderBlogCategory,
+  getPlaceholderBrand,
+  getPlaceholderCategory,
+  getPlaceholderProduct,
+  getPlaceholderRaffle,
+} from "./placeholders";
+import { IkasAttributePropValueData } from "./prop-value/attribute";
+import { IkasAttributeListPropValueData } from "./prop-value/attribute-list";
+import { IkasBlogPropValueData } from "./prop-value/blog";
+import { IkasBlogCategoryPropValueData } from "./prop-value/blog-category";
+import { IkasBrandPropValueData } from "./prop-value/brand";
+import { IkasCategoryPropValueData } from "./prop-value/category";
+import { CustomDataValue } from "./prop-value/custom";
+import { IkasProductDetailData } from "./prop-value/product-detail";
+import { IkasRafflePropValueData } from "./prop-value/raffle";
+
+export class IkasPageDataInit {
+  static pageSpecificData: any = observable({});
+
+  static setPageSpecificData(
+    pageSpecficicDataStr: string,
+    pageType: IkasThemePageType,
+    isBrowser: boolean // Will be sent from reinit on IkasPage
+  ) {
+    if (!pageSpecficicDataStr) return;
+    const parsed = JSON.parse(pageSpecficicDataStr);
+
+    switch (pageType) {
+      case IkasThemePageType.PRODUCT:
+        const productDetail = parsed as IkasProductDetail;
+        IkasPageDataInit.pageSpecificData = new IkasProductDetail(
+          productDetail.product,
+          productDetail.selectedVariantValues
+        );
+        if (isBrowser) {
+          this._initProductDetailOnBrowser(IkasPageDataInit.pageSpecificData);
+        }
+        break;
+
+      case IkasThemePageType.CATEGORY:
+        const category = parsed as IkasCategory;
+        IkasPageDataInit.pageSpecificData = new IkasCategory(category);
+        break;
+
+      case IkasThemePageType.BRAND:
+        const brand = parsed as IkasCategory;
+        IkasPageDataInit.pageSpecificData = new IkasCategory(brand);
+        break;
+
+      case IkasThemePageType.BLOG:
+        const blog = parsed as IkasBlog;
+        IkasPageDataInit.pageSpecificData = new IkasBlog(blog);
+        break;
+
+      case IkasThemePageType.BLOG_CATEGORY:
+        const blogCategory = parsed as IkasBlogCategory;
+        IkasPageDataInit.pageSpecificData = new IkasBlogCategory(blogCategory);
+        break;
+
+      case IkasThemePageType.RAFFLE_DETAIL:
+        const raffle_detail = parsed as IkasRaffle;
+        IkasPageDataInit.pageSpecificData = new IkasRaffle(raffle_detail);
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  static isServer() {
+    return typeof window === "undefined";
+  }
+
+  static initPropValues(
+    propValuesStr: string,
+    router: NextRouter,
+    settingsStr: string,
+    isCompressed: boolean,
+    isBrowser?: boolean
+  ) {
+    const settings = new IkasThemeSettings(JSON.parse(settingsStr));
+    const decompressed = !isCompressed
+      ? propValuesStr
+      : LZUTF8.decompress(propValuesStr, {
+          inputEncoding: "Base64",
+        });
+
+    const pageComponentPropValues: IkasPageComponentPropValue[] = JSON.parse(
+      decompressed
+    ).map((v: IkasPageComponentPropValue) => ({
+      pageComponent: new IkasThemePageComponent(v.pageComponent),
+      component: new IkasThemeComponent(v.component),
+      propValues: v.propValues,
+    }));
+
+    pageComponentPropValues.forEach((pageComponentPropValue) => {
+      const props = pageComponentPropValue.component.props;
+
+      props.forEach((prop) => {
+        const propValue = pageComponentPropValue.propValues[prop.name];
+        if (propValue === null || propValue === undefined) return;
+
+        switch (prop.type) {
+          case IkasThemeComponentPropType.IMAGE:
+            IkasPageDataInit.initImagePropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.IMAGE_LIST:
+            IkasPageDataInit.initImageListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.BRAND:
+            IkasPageDataInit.initBrandPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.BRAND_LIST:
+            IkasPageDataInit.initBrandListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.CATEGORY:
+            IkasPageDataInit.initCategoryPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.CATEGORY_LIST:
+            IkasPageDataInit.initCategoryListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.PRODUCT_LIST:
+            IkasPageDataInit.initProductListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue,
+              router
+            );
+            break;
+
+          case IkasThemeComponentPropType.PRODUCT_DETAIL:
+            IkasPageDataInit.initProductDetailPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue,
+              router
+            );
+            break;
+
+          case IkasThemeComponentPropType.PRODUCT_ATTRIBUTE:
+            IkasPageDataInit.initAttributePropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.PRODUCT_ATTRIBUTE_LIST:
+            IkasPageDataInit.initAttributeListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.LINK:
+          case IkasThemeComponentPropType.LIST_OF_LINK:
+            IkasPageDataInit.initLinkPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.COMPONENT:
+            IkasPageDataInit.initComponentPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue,
+              router,
+              settings,
+              isBrowser
+            );
+            break;
+
+          case IkasThemeComponentPropType.COMPONENT_LIST:
+            IkasPageDataInit.initComponentListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue,
+              router,
+              settings,
+              isBrowser
+            );
+            break;
+
+          case IkasThemeComponentPropType.CUSTOM:
+            IkasPageDataInit.initCustomDataPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue,
+              router,
+              settings,
+              isBrowser
+            );
+            break;
+
+          case IkasThemeComponentPropType.BLOG:
+            IkasPageDataInit.initBlogPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.BLOG_LIST:
+            IkasPageDataInit.initBlogListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.BLOG_CATEGORY:
+            IkasPageDataInit.initBlogCategoryPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.BLOG_LIST:
+            IkasPageDataInit.initBlogCategoryListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.RAFFLE:
+            IkasPageDataInit.initRafflePropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeComponentPropType.RAFFLE_LIST:
+            IkasPageDataInit.initRaffleListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          default:
+            break;
+        }
+      });
+    });
+
+    return pageComponentPropValues;
+  }
+
+  static initBrandPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasBrandPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = IkasPageDataInit._initBrandPropValue(propValue);
+  }
+
+  static _initBrandPropValue(propValue: IkasBrandPropValueData) {
+    if (propValue.brandPropValue.usePageData) {
+      return this.pageSpecificData;
+    }
+
+    if (propValue.brand) {
+      return new IkasBrand(propValue.brand);
+    }
+
+    return getPlaceholderBrand();
+  }
+
+  static initBrandListPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = IkasPageDataInit._initBrandListPropValue(propValue);
+  }
+
+  static _initBrandListPropValue(propValue: IkasBrandListParams) {
+    return new IkasBrandList(propValue);
+  }
+
+  static initCategoryPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasCategoryPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = IkasPageDataInit._initCategoryPropValue(propValue);
+  }
+
+  static _initCategoryPropValue(propValue: IkasCategoryPropValueData) {
+    if (propValue.categoryPropValue.usePageData) {
+      return this.pageSpecificData;
+    }
+
+    if (propValue.category) {
+      return new IkasCategory(propValue.category);
+    }
+
+    return getPlaceholderCategory();
+  }
+
+  static initCategoryListPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    const categoryList = new IkasCategoryList(
+      propValue as IkasCategoryListParams
+    );
+    pageComponentPropValue.propValues[prop.name] = categoryList;
+  }
+
+  static _initCategoryListPropValue(propValue: IkasCategoryListParams) {
+    return new IkasCategoryList(propValue);
+  }
+
+  static initProductListPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue,
+    router: NextRouter
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = this._initProductListPropValue(propValue, router);
+  }
+
+  static _initProductListPropValue(
+    propValue: IkasProductListParams,
+    router: NextRouter
+  ) {
+    return new IkasProductList(propValue, router);
+  }
+
+  static initProductDetailPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasProductDetailData,
+    pageComponentPropValue: IkasPageComponentPropValue,
+    router: NextRouter
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = this._initProductDetailPropValue(propValue, router);
+  }
+
+  static _initProductDetailPropValue(
+    propValue: IkasProductDetailData,
+    router: NextRouter
+  ) {
+    let productDetail: IkasProductDetail = getPlaceholderProduct();
+
+    if (propValue.productDetailPropValue.usePageData) {
+      productDetail = this.pageSpecificData;
+    } else if (propValue.productDetail) {
+      productDetail = new IkasProductDetail(
+        propValue.productDetail.product,
+        propValue.productDetail.selectedVariantValues
+      );
+    }
+
+    //@ts-ignore
+    productDetail.router = router;
+
+    return productDetail;
+  }
+
+  static _initProductDetailOnBrowser(productDetail: IkasProductDetail) {
+    // Do not re-create a new IkasProductDetail instance in this function
+    // Only modify the provided one!
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const vid = urlParams.get("vid");
+
+    if (vid) {
+      const variant = productDetail.product.variants.find((v) => v.id === vid);
+      if (variant) {
+        productDetail.selectedVariantValues = variant.variantValues;
+      }
+    } else {
+      const productVariantTypeSlugs = productDetail.product.variantTypes.map(
+        (vt) => vt.variantType.slug
+      );
+
+      const selectedVariantValues: IkasVariantValue[] = [];
+
+      productVariantTypeSlugs.forEach((slug, vtIndex) => {
+        const productVariantType = productDetail.product.variantTypes[vtIndex];
+        const variantValueSlug = urlParams.get(slug);
+
+        if (variantValueSlug) {
+          const variantValue = productVariantType.variantType.values.find(
+            (v) => v.slug === variantValueSlug
+          );
+          if (variantValue) selectedVariantValues.push(variantValue);
+        }
+      });
+
+      if (
+        selectedVariantValues.length ===
+        productDetail.selectedVariantValues.length
+      ) {
+        productDetail.selectedVariantValues = selectedVariantValues;
+      }
+    }
+  }
+
+  static initAttributePropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasAttributePropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = IkasPageDataInit._initAttributePropValue(propValue);
+  }
+
+  static _initAttributePropValue(propValue: IkasAttributePropValueData) {
+    let productDetail: IkasProductDetail | null = null;
+
+    if (propValue.attributePropValue.usePageData) {
+      productDetail = this.pageSpecificData;
+    } else if (propValue.productDetail) {
+      productDetail = new IkasProductDetail(
+        propValue.productDetail.product,
+        propValue.productDetail.selectedVariantValues
+      );
+    }
+
+    return new IkasAttributeDetail(productDetail, propValue.attributePropValue);
+  }
+
+  static initAttributeListPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasAttributeListPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = IkasPageDataInit._initAttributeListPropValue(propValue);
+  }
+
+  static _initAttributeListPropValue(
+    propValue: IkasAttributeListPropValueData
+  ) {
+    let productDetail: IkasProductDetail | null = null;
+
+    if (propValue.attributeListPropValue.usePageData) {
+      productDetail = this.pageSpecificData;
+    } else if (propValue.productDetail) {
+      productDetail = new IkasProductDetail(
+        propValue.productDetail.product,
+        propValue.productDetail.selectedVariantValues
+      );
+    }
+
+    return new IkasAttributeList(
+      productDetail,
+      propValue.attributeListPropValue
+    );
+  }
+
+  static initLinkPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] = this._initLinkPropValue(
+      propValue
+    );
+  }
+
+  static _initLinkPropValue(propValue: any) {
+    if (Array.isArray(propValue)) {
+      return (propValue as IkasNavigationLink[]).map(
+        (p) =>
+          new IkasNavigationLink(
+            p.href,
+            p.label,
+            p.subLinks,
+            p.isExternal || undefined
+          )
+      );
+    } else if (propValue) {
+      return new IkasNavigationLink(
+        propValue.href,
+        propValue.label,
+        propValue.subLinks,
+        propValue.isExternal
+      );
+    }
+  }
+
+  static initImagePropValue(
+    prop: IkasThemeComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] = this._initImagePropValue(
+      propValue
+    );
+  }
+
+  static _initImagePropValue(propValue: any) {
+    return new IkasImage(propValue.id);
+  }
+
+  static initImageListPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] = this._initImageListPropValue(
+      propValue
+    );
+  }
+
+  static _initImageListPropValue(propValue: any) {
+    return (propValue as IkasImage[]).map((i) => new IkasImage(i.id));
+  }
+
+  static initCustomDataPropValue(
+    prop: IkasThemeComponentProp,
+    customDataValue: CustomDataValue | undefined,
+    pageComponentPropValue: IkasPageComponentPropValue,
+    router: NextRouter,
+    settings: IkasThemeSettings,
+    isBrowser?: boolean
+  ) {
+    if (
+      !customDataValue ||
+      !customDataValue.value ||
+      !customDataValue.customData
+    )
+      return;
+
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = this._initCustomDataPropValue(
+      customDataValue,
+      customDataValue.customData,
+      router,
+      settings,
+      isBrowser
+    );
+  }
+
+  static _initCustomDataPropValue(
+    customDataValue: CustomDataValue | undefined,
+    customData: IkasThemeCustomData,
+    router: NextRouter,
+    settings: IkasThemeSettings,
+    isBrowser?: boolean
+  ) {
+    if (!customDataValue) return null;
+
+    const propValue = customDataValue.value;
+    if (propValue === null || propValue === undefined) return null;
+
+    switch (customData.type) {
+      case IkasThemeComponentPropType.BRAND:
+        return this._initBrandPropValue(propValue);
+
+      case IkasThemeComponentPropType.BRAND_LIST:
+        return this._initBrandListPropValue(propValue);
+
+      case IkasThemeComponentPropType.CATEGORY_LIST:
+        return this._initCategoryListPropValue(propValue);
+
+      case IkasThemeComponentPropType.CATEGORY:
+        return this._initCategoryPropValue(propValue);
+
+      case IkasThemeComponentPropType.IMAGE_LIST:
+        return this._initImageListPropValue(propValue);
+
+      case IkasThemeComponentPropType.IMAGE:
+        return this._initImagePropValue(propValue);
+
+      case IkasThemeComponentPropType.LINK:
+        return this._initLinkPropValue(propValue);
+
+      case IkasThemeComponentPropType.PRODUCT_DETAIL:
+        return this._initProductDetailPropValue(propValue, router);
+
+      case IkasThemeComponentPropType.PRODUCT_LIST:
+        return this._initProductListPropValue(propValue, router);
+
+      case IkasThemeComponentPropType.PRODUCT_ATTRIBUTE:
+        return this._initAttributePropValue(propValue);
+
+      case IkasThemeComponentPropType.PRODUCT_ATTRIBUTE_LIST:
+        return this._initAttributeListPropValue(propValue);
+
+      case IkasThemeComponentPropType.BLOG:
+        return this._initBlogPropValue(propValue);
+
+      case IkasThemeComponentPropType.BLOG_LIST:
+        return this._initBlogListPropValue(propValue);
+
+      case IkasThemeComponentPropType.BLOG_CATEGORY:
+        return this._initBlogCategoryPropValue(propValue);
+
+      case IkasThemeComponentPropType.BLOG_CATEGORY_LIST:
+        return this._initBlogCategoryListPropValue(propValue);
+
+      case IkasThemeComponentPropType.RAFFLE:
+        return this._initRafflePropValue(propValue);
+
+      case IkasThemeComponentPropType.RAFFLE_LIST:
+        return this._initRaffleListPropValue(propValue);
+
+      case IkasThemeComponentPropType.OBJECT:
+        const objectValue: Record<string, any> = {};
+
+        for (const nestedCustomData of customData.nestedData || []) {
+          const value = propValue[nestedCustomData.key!];
+
+          let selectedCustomData: IkasThemeCustomData | undefined;
+          if (nestedCustomData.customDataId) {
+            selectedCustomData = value.customData;
+          }
+
+          objectValue[nestedCustomData.key!] = this._initCustomDataPropValue(
+            value,
+            selectedCustomData || nestedCustomData,
+            router,
+            settings,
+            isBrowser
+          );
+        }
+
+        return objectValue;
+
+      case IkasThemeComponentPropType.DYNAMIC_LIST:
+      case IkasThemeComponentPropType.STATIC_LIST:
+        try {
+          if (!propValue || !propValue.length) return null;
+
+          const listValue: any[] = [];
+          const nestedCustomData = customData.nestedData![0];
+
+          propValue.forEach((itemValue: any) => {
+            let selectedCustomData: IkasThemeCustomData | undefined;
+            if (nestedCustomData.customDataId) {
+              selectedCustomData = itemValue.customData;
+            }
+            listValue.push(
+              this._initCustomDataPropValue(
+                itemValue,
+                selectedCustomData || nestedCustomData,
+                router,
+                settings,
+                isBrowser
+              )
+            );
+          });
+
+          return listValue;
+        } catch (err) {
+          return [];
+        }
+
+      case IkasThemeComponentPropType.COMPONENT:
+        return this._initComponentPropValue(
+          propValue,
+          router,
+          settings,
+          isBrowser
+        );
+
+      case IkasThemeComponentPropType.COMPONENT_LIST:
+        return this._initComponentListPropValue(
+          propValue,
+          router,
+          settings,
+          isBrowser
+        );
+
+      default:
+        return propValue;
+    }
+  }
+
+  static initComponentPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasPageComponentPropValue[],
+    pageComponentPropValue: IkasPageComponentPropValue,
+    router: NextRouter,
+    settings: IkasThemeSettings,
+    isBrowser?: boolean
+  ) {
+    pageComponentPropValue.propValues[prop.name] = this._initComponentPropValue(
+      propValue,
+      router,
+      settings,
+      isBrowser
+    );
+  }
+
+  static _initComponentPropValue(
+    propValue: IkasPageComponentPropValue[],
+    router: NextRouter,
+    settings: IkasThemeSettings,
+    isBrowser?: boolean
+  ) {
+    const pValue = propValue.length ? propValue[0] : undefined;
+    if (!pValue) return;
+
+    const pageComponentPropValue = new IkasPageComponentPropValue(pValue);
+    const initializedPageComponentPropValues = this.initPropValues(
+      JSON.stringify([pageComponentPropValue]),
+      router,
+      JSON.stringify(settings),
+      false,
+      isBrowser
+    );
+
+    if (!initializedPageComponentPropValues.length) return;
+
+    return new IkasComponentRenderer(() =>
+      renderComponent(initializedPageComponentPropValues[0], settings, -10)
+    );
+  }
+
+  static initComponentListPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasPageComponentPropValue[],
+    pageComponentPropValue: IkasPageComponentPropValue,
+    router: NextRouter,
+    settings: IkasThemeSettings,
+    isBrowser?: boolean
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = this._initComponentListPropValue(
+      propValue,
+      router,
+      settings,
+      isBrowser
+    );
+  }
+
+  static _initComponentListPropValue(
+    propValue: IkasPageComponentPropValue[],
+    router: NextRouter,
+    settings: IkasThemeSettings,
+    isBrowser?: boolean
+  ) {
+    if (propValue && propValue.length)
+      return propValue.map((p: IkasPageComponentPropValue) => {
+        const pageComponentPropValue = new IkasPageComponentPropValue(p);
+        const initializedPageComponentPropValues = this.initPropValues(
+          JSON.stringify([pageComponentPropValue]),
+          router,
+          JSON.stringify(settings),
+          false,
+          isBrowser
+        );
+
+        return new IkasComponentRenderer(() =>
+          renderComponent(initializedPageComponentPropValues[0], settings, -1)
+        );
+      });
+    return [];
+  }
+
+  static initBlogPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasBlogPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = IkasPageDataInit._initBlogPropValue(propValue);
+  }
+
+  static _initBlogPropValue(propValue: IkasBlogPropValueData) {
+    if (propValue.blogPropValue.usePageData) {
+      return this.pageSpecificData;
+    }
+
+    if (propValue.blog) {
+      return new IkasBlog(propValue.blog);
+    }
+
+    return getPlaceholderBlog();
+  }
+
+  static initBlogListPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] = this._initBlogListPropValue(
+      propValue
+    );
+  }
+
+  static _initBlogListPropValue(propValue: IkasBlogListParams) {
+    return new IkasBlogList(propValue);
+  }
+
+  static initBlogCategoryPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasBlogCategoryPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = IkasPageDataInit._initBlogCategoryPropValue(propValue);
+  }
+
+  static _initBlogCategoryPropValue(propValue: IkasBlogCategoryPropValueData) {
+    if (propValue.blogCategoryPropValue.usePageData) {
+      return this.pageSpecificData;
+    }
+
+    if (propValue.blogCategory) {
+      return new IkasBlogCategory(propValue.blogCategory);
+    }
+
+    return getPlaceholderBlogCategory();
+  }
+
+  static initBlogCategoryListPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = this._initBlogCategoryListPropValue(propValue);
+  }
+
+  static _initBlogCategoryListPropValue(propValue: IkasBlogCategoryListParams) {
+    return new IkasBlogCategoryList(propValue);
+  }
+
+  static initRafflePropValue(
+    prop: IkasThemeComponentProp,
+    propValue: IkasRafflePropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = IkasPageDataInit._initRafflePropValue(propValue);
+  }
+
+  static _initRafflePropValue(propValue: IkasRafflePropValueData) {
+    if (propValue.rafflePropValue.usePageData) {
+      return this.pageSpecificData;
+    }
+
+    if (propValue.raffle) {
+      return new IkasRaffle(propValue.raffle);
+    }
+
+    return getPlaceholderRaffle();
+  }
+
+  static initRaffleListPropValue(
+    prop: IkasThemeComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[
+      prop.name
+    ] = this._initRaffleListPropValue(propValue);
+  }
+
+  static _initRaffleListPropValue(propValue: IkasRaffleListParams) {
+    return new IkasRaffleList(propValue);
+  }
+}