@ikas/storefront 4.0.0-alpha.32 → 4.0.0-alpha.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.32",
+  "version": "4.0.0-alpha.34",
   "description": "Storefront functionality for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
@@ -24,11 +24,11 @@
     "libphonenumber-js": "^1.10.6"
   },
   "devDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.32",
-    "@ikas/storefront-config": "^4.0.0-alpha.32",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.32",
-    "@ikas/storefront-models": "^4.0.0-alpha.32",
-    "@ikas/storefront-providers": "^4.0.0-alpha.32",
+    "@ikas/storefront-api": "^4.0.0-alpha.34",
+    "@ikas/storefront-config": "^4.0.0-alpha.34",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.34",
+    "@ikas/storefront-models": "^4.0.0-alpha.34",
+    "@ikas/storefront-providers": "^4.0.0-alpha.34",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -52,11 +52,11 @@
     "html-react-parser": "^1.4.0"
   },
   "peerDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.32",
-    "@ikas/storefront-config": "^4.0.0-alpha.32",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.32",
-    "@ikas/storefront-models": "^4.0.0-alpha.32",
-    "@ikas/storefront-providers": "^4.0.0-alpha.32",
+    "@ikas/storefront-api": "^4.0.0-alpha.34",
+    "@ikas/storefront-config": "^4.0.0-alpha.34",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.34",
+    "@ikas/storefront-models": "^4.0.0-alpha.34",
+    "@ikas/storefront-providers": "^4.0.0-alpha.34",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
     "next": "12.2.0",

package/src/components/checkout/model.ts

@@ -762,6 +762,8 @@ export default class CheckoutViewModel {
     const newCart = await this.saveCart();
 
     if (newCart) this.checkout = new IkasCheckout(newCart);
+    if (this.checkout.shippingAddress)
+      this.checkout.shippingAddress.checkoutSettings = this.checkoutSettings;
     this.isChangingShippingMethod = false;
   };
 
@@ -986,6 +988,9 @@ export default class CheckoutViewModel {
         customer.addresses.push(newAddress);
 
         await this.store.customerStore.saveCustomer(customer);
+        this.store.customerStore.customer.addresses?.forEach(
+          (address) => (address.checkoutSettings = this.checkoutSettings)
+        );
 
         if (type === "shipping") {
           this.checkout.shippingAddress!.id = newAddress.id;

package/src/components/checkout/steps/step-payment/index.tsx

@@ -48,7 +48,12 @@ export const CheckoutStepPayment: React.FC<Props> = observer(({ vm }) => {
   const policyLabel = policyInputData.map((p) =>
     p.isVariable ? (
       <span
-        className={styles.TermsLabelSpan}
+        className={[
+          styles.TermsLabelSpan,
+          vm.isErrorsVisible && !vm.isTermsAndConditionsChecked
+            ? styles.Error
+            : "",
+        ].join(" ")}
         onClick={
           p.value === "{{ ackPrivacyPolicy }}"
             ? onShowPrivacyPolicyClick

package/src/components/checkout/steps/step-payment/style.module.scss

@@ -5,12 +5,17 @@
 
   .TermsLabelSpan {
     color: $primaryTextColor;
+    font-weight: 500;
 
     &:hover {
       text-decoration: underline;
     }
   }
 
+  .Error {
+    color: $errorColor;
+  }
+
   .SecurePaymentContainer {
     width: 100%;
     display: flex;

package/src/components/page/index.tsx

@@ -75,7 +75,11 @@ export const IkasPage: React.FC<IkasPageProps> = observer(
         pageType,
         isBrowser
       );
-      return IkasPageDataInit.initPropValues(propValues, settings, isBrowser);
+      return IkasPageDataInit.initPagePropValues(
+        propValues,
+        settings,
+        isBrowser
+      );
     }, [isBrowser, propValues, pageType, settings, pageSpecificData]);
 
     React.useEffect(() => {
@@ -183,11 +187,6 @@ async function handleAnalytics(
     if (pageType === IkasThemeJsonPageType.PRODUCT) {
       const product = pageSpecificData as IkasProduct;
 
-      const isBrowser = typeof window !== "undefined";
-      // if (isBrowser) {
-      //   IkasPageDataInit._initProductOnBrowser(product);
-      // }
-
       Analytics.productView(product);
 
       //@ts-ignore

package/src/components/page-editor/ThemeComponentEditor.tsx

@@ -15,6 +15,11 @@ import {
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { IkasPageDataInit } from "../../page-data-init";
 import { IkasBaseStore } from "../../store";
+import {
+  IkasCheckout,
+  IkasOrderLineItem,
+  IkasCheckoutSettings,
+} from "../../models/data";
 
 type Props = {
   vm: IkasPageEditorViewModel;
@@ -59,7 +64,7 @@ export class ThemeEditorComponent extends React.Component<Props> {
   get pageComponentPropValue() {
     const { vm, pageComponent } = this.props;
 
-    return vm.pageDataProvider?.pageComponentPropValues.find(
+    return vm.initializedPropValues.find(
       (pc) => pc.pageComponent.id === pageComponent.id
     );
   }
@@ -70,13 +75,16 @@ export class ThemeEditorComponent extends React.Component<Props> {
 
     if (vm.page?.type === IkasThemeJsonPageType.CHECKOUT) {
       const checkoutProps: IkasCheckoutPageProps = {
-        checkout: {
+        checkout: new IkasCheckout({
+          currencyCode: "TRY",
+          currencySymbol: "₺",
           orderLineItems: [
-            {
+            new IkasOrderLineItem({
               id: "",
               createdAt: 0,
               updatedAt: 0,
               currencyCode: "TRY",
+              currencySymbol: "₺",
               discount: null,
               discountPrice: null,
               finalPrice: 100,
@@ -106,11 +114,10 @@ export class ThemeEditorComponent extends React.Component<Props> {
                 variantValues: [],
               },
               orderedAt: 0,
-              refundQuantity: null,
-            },
+            }),
           ],
-        } as any,
-        checkoutSettings: {
+        }),
+        checkoutSettings: new IkasCheckoutSettings({
           createdAt: 0,
           updatedAt: 0,
           id: "",
@@ -126,7 +133,7 @@ export class ThemeEditorComponent extends React.Component<Props> {
           showCheckoutNote: true,
           showTermsAndConditionsCheckbox: true,
           storefrontId: "",
-        },
+        }),
         customizationProps: {
           ...propValues,
         },

package/src/components/page-editor/model.ts

@@ -14,7 +14,10 @@ import {
   IkasThemeJsonSettings,
   IkasVariantValue,
 } from "../../models";
-import { IkasPageDataProvider } from "@ikas/storefront-providers";
+import {
+  IkasPageComponentPropValue,
+  IkasPageDataProvider,
+} from "@ikas/storefront-providers";
 import { makeAutoObservable, reaction } from "mobx";
 import { NextRouter } from "next/router.js";
 import { IkasPageDataInit } from "../../page-data-init";
@@ -24,6 +27,7 @@ import BlogStore from "../../store/blog";
 import RaffleStore from "../../store/raffle";
 import ProductStore from "../../store/product";
 import { setAPIClientConfig } from "@ikas/storefront-api";
+import { runInAction } from "mobx";
 
 const PACKAGE_VERSION = "2.0.20";
 // import { version as PACKAGE_VERSION } from "../../../package.json";
@@ -44,6 +48,7 @@ export default class IkasPageEditorViewModel {
   pageParams: Record<string, any> = {};
   apiKey?: string | null = null;
   pageDataProvider?: IkasPageDataProvider | null = null;
+  initializedPropValues: IkasPageComponentPropValue[] = [];
 
   router: NextRouter;
 
@@ -367,18 +372,20 @@ export default class IkasPageEditorViewModel {
       this.pageParams
     );
 
-    IkasBaseStore.getInstance().currentPageType = pageType;
-    this.pageDataProvider = pageDataProvider;
+    runInAction(() => {
+      IkasBaseStore.getInstance().currentPageType = pageType;
+      this.pageDataProvider = pageDataProvider;
 
-    if (pageType === IkasThemeJsonPageType.CUSTOM)
-      this.page = this.theme?.pages.find(
-        (p) => p.type === pageType && p.slug === this.pageParams.slug
-      );
-    else this.page = this.theme?.pages.find((p) => p.type === pageType);
+      if (pageType === IkasThemeJsonPageType.CUSTOM)
+        this.page = this.theme?.pages.find(
+          (p) => p.type === pageType && p.slug === this.pageParams.slug
+        );
+      else this.page = this.theme?.pages.find((p) => p.type === pageType);
 
-    requestAnimationFrame(() => {
-      document.body.scrollTop = 0;
-      if (document.scrollingElement) document.scrollingElement.scrollTop = 0;
+      requestAnimationFrame(() => {
+        document.body.scrollTop = 0;
+        if (document.scrollingElement) document.scrollingElement.scrollTop = 0;
+      });
     });
 
     this.sendMessage(BridgeMessageType.EDITOR_PAGE_CHANGE, {
@@ -505,8 +512,8 @@ export default class IkasPageEditorViewModel {
       IkasPageDataInit.pageSpecificData = undefined;
     }
 
-    pageDataProvider.pageComponentPropValues = IkasPageDataInit.initPropValues(
-      pageDataProvider.pageComponentPropValues,
+    this.initializedPropValues = IkasPageDataInit.initPagePropValues(
+      pageDataProvider.$pageComponentPropValues,
       theme!.settings,
       false
     );
@@ -608,31 +615,28 @@ export default class IkasPageEditorViewModel {
 
     if (!prop || !this.selectedPageComponent) return;
 
-    const pageComponentPropValues =
-      this.pageDataProvider?.pageComponentPropValues.find(
-        (pv) => pv.pageComponent.id === this.selectedPageComponentId
-      );
+    const pageComponentPropValues = this.initializedPropValues.find(
+      (pv) => pv.pageComponent.id === this.selectedPageComponentId
+    );
+    if (!this.pageDataProvider || !pageComponentPropValues) return;
 
     this.selectedPageComponent.propValues[propName] = value;
 
-    if (!this.pageDataProvider) return;
-
     const propValue = await this.pageDataProvider.getPageComponentPropValue(
       this.selectedPageComponent,
       prop
     );
 
-    if (propValue.linkType || JSON.stringify(propValue)?.includes("linkType"))
+    if (propValue && JSON.stringify(propValue).includes("href"))
       await this.pageDataProvider.setLinkSlugs();
 
-    if (pageComponentPropValues) {
-      pageComponentPropValues.propValues[propName] = propValue;
+    pageComponentPropValues.propValues[propName] =
       IkasPageDataInit.initPropValue(
-        pageComponentPropValues,
+        prop,
+        propValue,
         this.theme!.settings,
         true
       );
-    }
   };
 
   handleUpdatePageParams = async (data: any) => {
@@ -700,15 +704,14 @@ export default class IkasPageEditorViewModel {
     const pageComponentPropValues =
       await this.pageDataProvider!.getPageComponentPropValues(pageComponent);
 
-    IkasPageDataInit.initPropValue(
-      pageComponentPropValues,
-      this.theme!.settings,
-      true
-    );
+    const initializedPageComponentPropValues =
+      IkasPageDataInit.initPageComponentPropValue(
+        pageComponentPropValues,
+        this.theme!.settings,
+        true
+      );
 
-    this.pageDataProvider!.pageComponentPropValues.push(
-      pageComponentPropValues
-    );
+    this.initializedPropValues.push(initializedPageComponentPropValues);
     this.pageComponents.push(pageComponent);
   };
 

package/src/models/data/cart/index.ts

@@ -12,7 +12,7 @@ export class IkasCart extends IkasOrder implements ICart {
   shippingZoneRateId: string | null = null;
   stockLocationId: string | null = null;
 
-  constructor(data: ICart) {
+  constructor(data: Partial<ICart>) {
     super(data);
 
     this.availableShippingMethods =

package/src/models/data/checkout/index.ts

@@ -17,9 +17,13 @@ export class IkasCheckout extends IkasCart implements ICheckout {
   selectedPaymentGateway?: IkasPaymentGateway | null = null;
   masterPassPaymentGateway?: IkasPaymentGateway | null = null;
 
-  constructor(data: IkasCheckoutConstructorData) {
+  constructor(data: Partial<IkasCheckoutConstructorData>) {
     super(data);
 
+    this.appliedCouponCode = data.couponCode;
+    this.selectedPaymentGateway = data.selectedPaymentGateway;
+    this.masterPassPaymentGateway = data.masterPassPaymentGateway;
+
     makeObservable(this, {
       appliedCouponCode: observable,
       selectedPaymentGateway: observable,

package/src/models/data/order/index.ts

@@ -58,15 +58,15 @@ export class IkasOrder extends IkasBaseModel implements IOrder {
   // Extra
   refundSettings?: IkasOrderRefundSettings | null;
 
-  constructor(data: IOrderConstructorData) {
-    super(data);
+  constructor(data: Partial<IOrderConstructorData>) {
+    super(data as any);
 
     this.billingAddress = data.billingAddress
       ? new IkasOrderAddress(data.billingAddress)
       : null;
     this.cancelReason = data.cancelReason || null;
     this.cancelledAt = data.cancelledAt || null;
-    this.currencyCode = data.currencyCode;
+    this.currencyCode = data.currencyCode || "";
     this.currencySymbol = data.currencySymbol || null;
     this.customer = data.customer ? new IkasOrderCustomer(data.customer) : null;
     this.customerId = data.customerId || null;
@@ -80,7 +80,9 @@ export class IkasOrder extends IkasBaseModel implements IOrder {
     this.orderAdjustments =
       data.orderAdjustments?.map((oa) => new IkasOrderAdjustment(oa)) || null;
     this.orderLineItems =
-      data.orderLineItems.map((oli) => new IkasOrderLineItem(oli)) || null;
+      data.orderLineItems
+        ?.map((oli) => new IkasOrderLineItem(oli))
+        .filter((i) => !i.deleted) || [];
     this.orderNumber = data.orderNumber || null;
     this.orderPackageStatus = data.orderPackageStatus || null;
     this.orderPackages =
@@ -92,12 +94,15 @@ export class IkasOrder extends IkasBaseModel implements IOrder {
     this.shippingAddress = data.shippingAddress
       ? new IkasOrderAddress(data.shippingAddress)
       : null;
-    this.shippingMethod = data.shippingMethod;
-    this.status = data.status;
+    this.shippingLines =
+      data.shippingLines?.map((sl) => new IkasOrderShippingLine(sl)) || null;
+    this.shippingMethod =
+      data.shippingMethod || IkasOrderShippingMethod.SHIPMENT;
+    this.status = data.status || IkasOrderStatus.CREATED;
     this.taxLines =
       data.taxLines?.map((tl) => new IkasOrderTaxLine(tl)) || null;
-    this.totalFinalPrice = data.totalFinalPrice;
-    this.totalPrice = data.totalPrice;
+    this.totalFinalPrice = data.totalFinalPrice ?? 0;
+    this.totalPrice = data.totalPrice ?? 0;
 
     this.refundSettings = data.refundSettings;
 

package/src/models/data/state/index.ts

@@ -1,6 +1,6 @@
 import { IkasBaseModel } from "../base";
 import { IkasState as IState } from "@ikas/storefront-models";
-import { makeAutoObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 
 export class IkasState extends IkasBaseModel implements IState {
   countryId: string;
@@ -13,6 +13,10 @@ export class IkasState extends IkasBaseModel implements IState {
     this.name = data.name;
     this.stateCode = data.stateCode;
 
-    makeAutoObservable(this);
+    makeObservable(this, {
+      countryId: observable,
+      name: observable,
+      stateCode: observable,
+    });
   }
 }

package/src/models/ui/product-list/index.ts

@@ -56,31 +56,45 @@ export class IkasProductList {
   private _fetchRequestTime = 0;
   private router?: NextRouter | null = null;
 
-  constructor(data: IkasProductListParams, router?: NextRouter) {
+  constructor(
+    data: IkasProductListParams | IkasProductList,
+    router?: NextRouter
+  ) {
+    const _params = data as IkasProductListParams;
+    const _list = data as IkasProductList;
+
     this.data = data.data ? data.data.map((d) => new IkasProduct(d)) : [];
     this._type =
-      data.type ||
-      data.productListPropValue.productListType ||
+      _params.type ||
+      _list._type ||
+      _params.productListPropValue.productListType ||
+      _list._productListPropValue.productListType ||
       IkasProductListType.ALL;
     this._pageType = data.pageType;
     this._sort =
       data.sort ||
       data.productListPropValue.initialSort ||
       IkasProductListSortType.LAST_ADDED;
-
-    this._limit = data.limit || data.productListPropValue.initialLimit || 20;
+    this._limit =
+      data.limit ||
+      _params.productListPropValue.initialLimit ||
+      _list._productListPropValue.initialLimit ||
+      20;
     this._page = data.page || 1;
     this._minPage = data.minPage || null;
     this._count = data.count || 0;
     this._searchKeyword = data.searchKeyword || "";
-    this._productListPropValue = data.productListPropValue;
+    this._productListPropValue =
+      _params.productListPropValue || _list._productListPropValue;
 
-    this._filterBrandId = data.filterBrandId || null;
-    this._filterCategoryId = data.filterCategoryId || null;
+    this._filterBrandId = _params.filterBrandId || _list._filterBrandId || null;
+    this._filterCategoryId =
+      _params.filterCategoryId || _list._filterCategoryId || null;
 
-    this._relatedProductData = data.relatedProductData || null;
+    this._relatedProductData =
+      _params.relatedProductData || _list._relatedProductData || null;
 
-    this._recommendFor = data.recommendFor;
+    this._recommendFor = _params.recommendFor || _list._recommendFor;
 
     this.filters = data.filters
       ? data.filters.map((f) => new IkasProductFilter(f, this))
@@ -88,7 +102,8 @@ export class IkasProductList {
     this._filterCategories = data.filterCategories
       ? data.filterCategories.map((c) => new IkasFilterCategory(c))
       : null;
-    this.pageSpecificData = data.pageSpecificData || null;
+    this.pageSpecificData =
+      _params.pageSpecificData || _list.pageSpecificData || null;
 
     this.router = router;
 

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

@@ -112,225 +112,136 @@ export class IkasPageDataInit {
     return typeof window === "undefined";
   }
 
-  static initPropValues(
+  static initPagePropValues(
     pageComponentPropValues: IkasPageComponentPropValue[],
     settings: IkasThemeJsonSettings,
     isBrowser?: boolean
   ) {
-    pageComponentPropValues.forEach((pageComponentPropValue) => {
-      IkasPageDataInit.initPropValue(
+    return pageComponentPropValues.map((pageComponentPropValue) =>
+      IkasPageDataInit.initPageComponentPropValue(
         pageComponentPropValue,
         settings,
         isBrowser
+      )
+    );
+  }
+
+  static initPageComponentPropValue(
+    pageComponentPropValue: IkasPageComponentPropValue,
+    settings: IkasThemeJsonSettings,
+    isBrowser?: boolean
+  ) {
+    const props = pageComponentPropValue.component.props;
+    const initializedPropValues: Record<string, any> = {};
+
+    props.map((prop) => {
+      const propValue = pageComponentPropValue.propValues[prop.name];
+
+      initializedPropValues[prop.name] = IkasPageDataInit.initPropValue(
+        prop,
+        propValue,
+        settings,
+        isBrowser
       );
     });
 
-    return pageComponentPropValues;
+    return new IkasPageComponentPropValue({
+      ...pageComponentPropValue,
+      propValues: initializedPropValues,
+    });
   }
 
   static initPropValue(
-    pageComponentPropValue: IkasPageComponentPropValue,
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
     settings: IkasThemeJsonSettings,
     isBrowser?: boolean
   ) {
-    const props = pageComponentPropValue.component.props;
+    if (propValue === null || propValue === undefined) return null;
 
-    props.forEach((prop) => {
-      const propValue = pageComponentPropValue.propValues[prop.name];
-      if (propValue === null || propValue === undefined) return;
-
-      switch (prop.type) {
-        case IkasThemeJsonComponentPropType.IMAGE:
-          IkasPageDataInit.initImagePropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+    switch (prop.type) {
+      case IkasThemeJsonComponentPropType.IMAGE:
+        return IkasPageDataInit.initImagePropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.IMAGE_LIST:
-          IkasPageDataInit.initImageListPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.IMAGE_LIST:
+        return IkasPageDataInit.initImageListPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.BRAND:
-          IkasPageDataInit.initBrandPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.BRAND:
+        return IkasPageDataInit.initBrandPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.BRAND_LIST:
-          IkasPageDataInit.initBrandListPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.BRAND_LIST:
+        return IkasPageDataInit.initBrandListPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.CATEGORY:
-          IkasPageDataInit.initCategoryPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.CATEGORY:
+        return IkasPageDataInit.initCategoryPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.CATEGORY_LIST:
-          IkasPageDataInit.initCategoryListPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.CATEGORY_LIST:
+        return IkasPageDataInit.initCategoryListPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.PRODUCT_LIST:
-          IkasPageDataInit.initProductListPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.PRODUCT_LIST:
+        return IkasPageDataInit.initProductListPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.PRODUCT_DETAIL:
-          IkasPageDataInit.initProductPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.PRODUCT_DETAIL:
+        return IkasPageDataInit.initProductPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE:
-          IkasPageDataInit.initAttributePropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE:
+        return IkasPageDataInit.initAttributePropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE_LIST:
-          IkasPageDataInit.initAttributeListPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
-
-        case IkasThemeJsonComponentPropType.LINK:
-        case IkasThemeJsonComponentPropType.LIST_OF_LINK:
-          IkasPageDataInit.initLinkPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE_LIST:
+        return IkasPageDataInit.initAttributeListPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.COMPONENT:
-          IkasPageDataInit.initComponentPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue,
-            settings,
-            isBrowser
-          );
-          break;
+      case IkasThemeJsonComponentPropType.LINK:
+      case IkasThemeJsonComponentPropType.LIST_OF_LINK:
+        return IkasPageDataInit.initLinkPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.COMPONENT_LIST:
-          IkasPageDataInit.initComponentListPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue,
-            settings,
-            isBrowser
-          );
-          break;
+      case IkasThemeJsonComponentPropType.COMPONENT:
+        return IkasPageDataInit.initComponentPropValue(
+          propValue,
+          settings,
+          isBrowser
+        );
 
-        case IkasThemeJsonComponentPropType.CUSTOM:
-          IkasPageDataInit.initCustomDataPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue,
-            settings,
-            isBrowser
-          );
-          break;
+      case IkasThemeJsonComponentPropType.COMPONENT_LIST:
+        return IkasPageDataInit.initComponentListPropValue(
+          propValue,
+          settings,
+          isBrowser
+        );
 
-        case IkasThemeJsonComponentPropType.BLOG:
-          IkasPageDataInit.initBlogPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.CUSTOM:
+        return IkasPageDataInit.initCustomDataPropValue(
+          propValue,
+          settings,
+          isBrowser
+        );
 
-        case IkasThemeJsonComponentPropType.BLOG_LIST:
-          IkasPageDataInit.initBlogListPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.BLOG:
+        return IkasPageDataInit.initBlogPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.BLOG_CATEGORY:
-          IkasPageDataInit.initBlogCategoryPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.BLOG_LIST:
+        return IkasPageDataInit.initBlogListPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.BLOG_LIST:
-          IkasPageDataInit.initBlogCategoryListPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.BLOG_CATEGORY:
+        return IkasPageDataInit.initBlogCategoryPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.RAFFLE:
-          IkasPageDataInit.initRafflePropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.BLOG_LIST:
+        return IkasPageDataInit.initBlogCategoryListPropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.RAFFLE_LIST:
-          IkasPageDataInit.initRaffleListPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.RAFFLE:
+        return IkasPageDataInit.initRafflePropValue(propValue);
 
-        case IkasThemeJsonComponentPropType.SLIDER:
-          IkasPageDataInit.initSliderPropValue(
-            prop,
-            propValue,
-            pageComponentPropValue
-          );
-          break;
+      case IkasThemeJsonComponentPropType.RAFFLE_LIST:
+        return IkasPageDataInit.initRaffleListPropValue(propValue);
 
-        default:
-          break;
-      }
-    });
-  }
+      case IkasThemeJsonComponentPropType.SLIDER:
+        return IkasPageDataInit.initSliderPropValue(propValue);
 
-  static initBrandPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: IkasBrandPropValueData,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      IkasPageDataInit._initBrandPropValue(propValue);
+      default:
+        return propValue;
+    }
   }
 
-  static _initBrandPropValue(propValue: IkasBrandPropValueData) {
+  static initBrandPropValue(propValue: IkasBrandPropValueData) {
     if (propValue.brandPropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -342,29 +253,11 @@ export class IkasPageDataInit {
     return getPlaceholderBrand();
   }
 
-  static initBrandListPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      IkasPageDataInit._initBrandListPropValue(propValue);
-  }
-
-  static _initBrandListPropValue(propValue: IkasBrandListParams) {
+  static initBrandListPropValue(propValue: IkasBrandListParams) {
     return new IkasBrandList(propValue);
   }
 
-  static initCategoryPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: IkasCategoryPropValueData,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      IkasPageDataInit._initCategoryPropValue(propValue);
-  }
-
-  static _initCategoryPropValue(propValue: IkasCategoryPropValueData) {
+  static initCategoryPropValue(propValue: IkasCategoryPropValueData) {
     if (propValue.categoryPropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -376,44 +269,15 @@ export class IkasPageDataInit {
     return getPlaceholderCategory();
   }
 
-  static initCategoryListPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    const categoryList = new IkasCategoryList(
-      propValue as IkasCategoryListParams
-    );
-    pageComponentPropValue.propValues[prop.name] = categoryList;
-  }
-
-  static _initCategoryListPropValue(propValue: IkasCategoryListParams) {
+  static initCategoryListPropValue(propValue: IkasCategoryListParams) {
     return new IkasCategoryList(propValue);
   }
 
-  static initProductListPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initProductListPropValue(propValue);
-  }
-
-  static _initProductListPropValue(propValue: IkasProductListParams) {
+  static initProductListPropValue(propValue: IkasProductListParams) {
     return new IkasProductList(propValue);
   }
 
-  static initProductPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: IkasProductPropValueData,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initProductPropValue(propValue);
-  }
-
-  static _initProductPropValue(propValue: IkasProductPropValueData) {
+  static initProductPropValue(propValue: IkasProductPropValueData) {
     let product: IkasProduct = new IkasProduct(getPlaceholderProduct() as any);
 
     if (propValue.productDetailPropValue.usePageData && this.pageSpecificData) {
@@ -469,16 +333,7 @@ export class IkasPageDataInit {
     }
   }
 
-  static initAttributePropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: IkasAttributePropValueData,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      IkasPageDataInit._initAttributePropValue(propValue);
-  }
-
-  static _initAttributePropValue(propValue: IkasAttributePropValueData) {
+  static initAttributePropValue(propValue: IkasAttributePropValueData) {
     let product: IkasProduct | null = null;
 
     if (propValue.attributePropValue.usePageData && this.pageSpecificData) {
@@ -495,18 +350,7 @@ export class IkasPageDataInit {
     return new IkasAttributeDetail(product, propValue.attributePropValue);
   }
 
-  static initAttributeListPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: IkasAttributeListPropValueData,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      IkasPageDataInit._initAttributeListPropValue(propValue);
-  }
-
-  static _initAttributeListPropValue(
-    propValue: IkasAttributeListPropValueData
-  ) {
+  static initAttributeListPropValue(propValue: IkasAttributeListPropValueData) {
     let product: IkasProduct | null = null;
 
     if (propValue.attributeListPropValue.usePageData && this.pageSpecificData) {
@@ -524,15 +368,8 @@ export class IkasPageDataInit {
   }
 
   static initLinkPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
+    propValue: IkasNavigationLink | IkasNavigationLink[]
   ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initLinkPropValue(propValue);
-  }
-
-  static _initLinkPropValue(propValue: any) {
     if (Array.isArray(propValue)) {
       return (propValue as IkasNavigationLink[]).map(
         (p) =>
@@ -548,41 +385,21 @@ export class IkasPageDataInit {
         propValue.href,
         propValue.label,
         propValue.subLinks,
-        propValue.isExternal
+        propValue.isExternal || undefined
       );
     }
   }
 
-  static initImagePropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initImagePropValue(propValue);
-  }
-
-  static _initImagePropValue(propValue: any) {
+  static initImagePropValue(propValue: IkasImage) {
     return new IkasImage(propValue);
   }
 
-  static initImageListPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initImageListPropValue(propValue);
-  }
-
-  static _initImageListPropValue(propValue: any) {
+  static initImageListPropValue(propValue: IkasImage[]) {
     return (propValue as IkasImage[]).map((i) => new IkasImage(i));
   }
 
   static initCustomDataPropValue(
-    prop: IkasThemeJsonComponentProp,
     customDataValue: IkasCustomDataPropValueData | undefined,
-    pageComponentPropValue: IkasPageComponentPropValue,
     settings: IkasThemeJsonSettings,
     isBrowser?: boolean
   ) {
@@ -593,13 +410,12 @@ export class IkasPageDataInit {
     )
       return;
 
-    pageComponentPropValue.propValues[prop.name] =
-      this._initCustomDataPropValue(
-        customDataValue,
-        new IkasThemeJsonCustomData(customDataValue.customData as any),
-        settings,
-        isBrowser
-      );
+    return this._initCustomDataPropValue(
+      customDataValue,
+      new IkasThemeJsonCustomData(customDataValue.customData as any),
+      settings,
+      isBrowser
+    );
   }
 
   static _initCustomDataPropValue(
@@ -615,58 +431,58 @@ export class IkasPageDataInit {
 
     switch (customData.type) {
       case IkasThemeJsonComponentPropType.BRAND:
-        return this._initBrandPropValue(propValue);
+        return this.initBrandPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BRAND_LIST:
-        return this._initBrandListPropValue(propValue);
+        return this.initBrandListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.CATEGORY_LIST:
-        return this._initCategoryListPropValue(propValue);
+        return this.initCategoryListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.CATEGORY:
-        return this._initCategoryPropValue(propValue);
+        return this.initCategoryPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.IMAGE_LIST:
-        return this._initImageListPropValue(propValue);
+        return this.initImageListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.IMAGE:
-        return this._initImagePropValue(propValue);
+        return this.initImagePropValue(propValue);
 
       case IkasThemeJsonComponentPropType.LINK:
-        return this._initLinkPropValue(propValue);
+        return this.initLinkPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.PRODUCT_DETAIL:
-        return this._initProductPropValue(propValue);
+        return this.initProductPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.PRODUCT_LIST:
-        return this._initProductListPropValue(propValue);
+        return this.initProductListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE:
-        return this._initAttributePropValue(propValue);
+        return this.initAttributePropValue(propValue);
 
       case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE_LIST:
-        return this._initAttributeListPropValue(propValue);
+        return this.initAttributeListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BLOG:
-        return this._initBlogPropValue(propValue);
+        return this.initBlogPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BLOG_LIST:
-        return this._initBlogListPropValue(propValue);
+        return this.initBlogListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BLOG_CATEGORY:
-        return this._initBlogCategoryPropValue(propValue);
+        return this.initBlogCategoryPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BLOG_CATEGORY_LIST:
-        return this._initBlogCategoryListPropValue(propValue);
+        return this.initBlogCategoryListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.RAFFLE:
-        return this._initRafflePropValue(propValue);
+        return this.initRafflePropValue(propValue);
 
       case IkasThemeJsonComponentPropType.RAFFLE_LIST:
-        return this._initRaffleListPropValue(propValue);
+        return this.initRaffleListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.SLIDER:
-        return this._initSliderPropValue(propValue);
+        return this.initSliderPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.OBJECT:
         const objectValue: Record<string, any> = {};
@@ -718,10 +534,10 @@ export class IkasPageDataInit {
         }
 
       case IkasThemeJsonComponentPropType.COMPONENT:
-        return this._initComponentPropValue(propValue, settings, isBrowser);
+        return this.initComponentPropValue(propValue, settings, isBrowser);
 
       case IkasThemeJsonComponentPropType.COMPONENT_LIST:
-        return this._initComponentListPropValue(propValue, settings, isBrowser);
+        return this.initComponentListPropValue(propValue, settings, isBrowser);
 
       default:
         return propValue;
@@ -729,17 +545,11 @@ export class IkasPageDataInit {
   }
 
   static initComponentPropValue(
-    prop: IkasThemeJsonComponentProp,
     propValue: IkasPageComponentPropValue[],
-    pageComponentPropValue: IkasPageComponentPropValue,
     settings: IkasThemeJsonSettings,
     isBrowser?: boolean
   ) {
-    pageComponentPropValue.propValues[prop.name] = this._initComponentPropValue(
-      propValue,
-      settings,
-      isBrowser
-    );
+    return this._initComponentPropValue(propValue, settings, isBrowser);
   }
 
   static _initComponentPropValue(
@@ -751,11 +561,12 @@ export class IkasPageDataInit {
     if (!pValue) return;
 
     const pageComponentPropValue = new IkasPageComponentPropValue(pValue);
-    const initializedPageComponentPropValues = IkasPageDataInit.initPropValues(
-      [pageComponentPropValue],
-      settings,
-      isBrowser
-    );
+    const initializedPageComponentPropValues =
+      IkasPageDataInit.initPagePropValues(
+        [pageComponentPropValue],
+        settings,
+        isBrowser
+      );
 
     if (!initializedPageComponentPropValues.length) return;
 
@@ -765,14 +576,11 @@ export class IkasPageDataInit {
   }
 
   static initComponentListPropValue(
-    prop: IkasThemeJsonComponentProp,
     propValue: IkasPageComponentPropValue[],
-    pageComponentPropValue: IkasPageComponentPropValue,
     settings: IkasThemeJsonSettings,
     isBrowser?: boolean
   ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initComponentListPropValue(propValue, settings, isBrowser);
+    return this._initComponentListPropValue(propValue, settings, isBrowser);
   }
 
   static _initComponentListPropValue(
@@ -784,7 +592,7 @@ export class IkasPageDataInit {
       return propValue.map((p: IkasPageComponentPropValue) => {
         const pageComponentPropValue = new IkasPageComponentPropValue(p);
         const initializedPageComponentPropValues =
-          IkasPageDataInit.initPropValues(
+          IkasPageDataInit.initPagePropValues(
             [pageComponentPropValue],
             settings,
             isBrowser
@@ -797,16 +605,7 @@ export class IkasPageDataInit {
     return [];
   }
 
-  static initBlogPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: IkasBlogPropValueData,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      IkasPageDataInit._initBlogPropValue(propValue);
-  }
-
-  static _initBlogPropValue(propValue: IkasBlogPropValueData) {
+  static initBlogPropValue(propValue: IkasBlogPropValueData) {
     if (propValue.blogPropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -818,29 +617,11 @@ export class IkasPageDataInit {
     return getPlaceholderBlog();
   }
 
-  static initBlogListPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initBlogListPropValue(propValue);
-  }
-
-  static _initBlogListPropValue(propValue: IkasBlogListParams) {
+  static initBlogListPropValue(propValue: IkasBlogListParams) {
     return new IkasBlogList(propValue);
   }
 
-  static initBlogCategoryPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: IkasBlogCategoryPropValueData,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      IkasPageDataInit._initBlogCategoryPropValue(propValue);
-  }
-
-  static _initBlogCategoryPropValue(propValue: IkasBlogCategoryPropValueData) {
+  static initBlogCategoryPropValue(propValue: IkasBlogCategoryPropValueData) {
     if (propValue.blogCategoryPropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -852,29 +633,11 @@ export class IkasPageDataInit {
     return getPlaceholderBlogCategory();
   }
 
-  static initBlogCategoryListPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initBlogCategoryListPropValue(propValue);
-  }
-
-  static _initBlogCategoryListPropValue(propValue: IkasBlogCategoryListParams) {
+  static initBlogCategoryListPropValue(propValue: IkasBlogCategoryListParams) {
     return new IkasBlogCategoryList(propValue);
   }
 
-  static initRafflePropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: IkasRafflePropValueData,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      IkasPageDataInit._initRafflePropValue(propValue);
-  }
-
-  static _initRafflePropValue(propValue: IkasRafflePropValueData) {
+  static initRafflePropValue(propValue: IkasRafflePropValueData) {
     if (propValue.rafflePropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -886,29 +649,11 @@ export class IkasPageDataInit {
     return new IkasRaffle(getPlaceholderRaffle() as any);
   }
 
-  static initRaffleListPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initRaffleListPropValue(propValue);
-  }
-
-  static _initRaffleListPropValue(propValue: IkasRaffleListParams) {
+  static initRaffleListPropValue(propValue: IkasRaffleListParams) {
     return new IkasRaffleList(propValue);
   }
 
-  static initSliderPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    pageComponentPropValue: IkasPageComponentPropValue
-  ) {
-    pageComponentPropValue.propValues[prop.name] =
-      this._initSliderPropValue(propValue);
-  }
-
-  static _initSliderPropValue(propValue: IkasSliderPropValueData) {
+  static initSliderPropValue(propValue: IkasSliderPropValueData) {
     return propValue;
   }
 }