@ikas/storefront 0.0.122 → 0.0.123

package/build/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var mobx = require('mobx');
 var React = require('react');
 var mobxReactLite = require('mobx-react-lite');
+var Head = require('next/head');
 var router = require('next/router');
 var Image$1 = require('next/image');
 var Link = require('next/link');
-var Head = require('next/head');
 var fs = require('fs');
 var getConfig = require('next/config');
 var dynamic = require('next/dynamic');
@@ -17,9 +17,9 @@ var Error$1 = require('next/error');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
 var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image$1);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
-var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
 var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 var getConfig__default = /*#__PURE__*/_interopDefaultLegacy(getConfig);
 var dynamic__default = /*#__PURE__*/_interopDefaultLegacy(dynamic);
@@ -11401,12 +11401,27 @@ var IkasCategoryListPropValueProvider = /** @class */ (function () {
     return IkasCategoryListPropValueProvider;
 }());
 
+var IkasRichTextPropValueProvider = /** @class */ (function () {
+    function IkasRichTextPropValueProvider(textPropValue) {
+        this.text = textPropValue;
+    }
+    IkasRichTextPropValueProvider.prototype.getValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.text];
+            });
+        });
+    };
+    return IkasRichTextPropValueProvider;
+}());
+
 var IkasCustomPropValueProvider = /** @class */ (function () {
-    function IkasCustomPropValueProvider(value, customData, theme, pageType, pageSpecificData, pageParams) {
+    function IkasCustomPropValueProvider(value, customData, theme, pageType, pageDataProvider, pageSpecificData, pageParams) {
         this.value = value;
         this.customData = customData;
         this.theme = theme;
         this.pageType = pageType;
+        this.pageDataProvider = pageDataProvider;
         this.pageSpecificData = pageSpecificData;
         this.pageParams = pageParams;
     }
@@ -11420,89 +11435,100 @@ var IkasCustomPropValueProvider = /** @class */ (function () {
                             return [2 /*return*/];
                         _b.label = 1;
                     case 1:
-                        _b.trys.push([1, 32, , 33]);
+                        _b.trys.push([1, 36, , 37]);
                         _a = this.customData.type;
                         switch (_a) {
                             case exports.IkasThemeCustomDataType.TEXT: return [3 /*break*/, 2];
-                            case exports.IkasThemeCustomDataType.BOOLEAN: return [3 /*break*/, 4];
-                            case exports.IkasThemeCustomDataType.BRAND_LIST: return [3 /*break*/, 6];
-                            case exports.IkasThemeCustomDataType.BRAND: return [3 /*break*/, 8];
-                            case exports.IkasThemeCustomDataType.CATEGORY_LIST: return [3 /*break*/, 10];
-                            case exports.IkasThemeCustomDataType.CATEGORY: return [3 /*break*/, 12];
-                            case exports.IkasThemeCustomDataType.COLOR: return [3 /*break*/, 14];
-                            case exports.IkasThemeCustomDataType.IMAGE_LIST: return [3 /*break*/, 16];
-                            case exports.IkasThemeCustomDataType.IMAGE: return [3 /*break*/, 18];
-                            case exports.IkasThemeCustomDataType.LINK: return [3 /*break*/, 20];
-                            case exports.IkasThemeCustomDataType.LIST_OF_LINK: return [3 /*break*/, 20];
-                            case exports.IkasThemeCustomDataType.PRODUCT_DETAIL: return [3 /*break*/, 22];
-                            case exports.IkasThemeCustomDataType.PRODUCT_LIST: return [3 /*break*/, 24];
-                            case exports.IkasThemeCustomDataType.OBJECT: return [3 /*break*/, 26];
-                            case exports.IkasThemeCustomDataType.DYNAMIC_LIST: return [3 /*break*/, 28];
-                            case exports.IkasThemeCustomDataType.STATIC_LIST: return [3 /*break*/, 28];
+                            case exports.IkasThemeCustomDataType.RICH_TEXT: return [3 /*break*/, 4];
+                            case exports.IkasThemeCustomDataType.BOOLEAN: return [3 /*break*/, 6];
+                            case exports.IkasThemeCustomDataType.BRAND_LIST: return [3 /*break*/, 8];
+                            case exports.IkasThemeCustomDataType.BRAND: return [3 /*break*/, 10];
+                            case exports.IkasThemeCustomDataType.CATEGORY_LIST: return [3 /*break*/, 12];
+                            case exports.IkasThemeCustomDataType.CATEGORY: return [3 /*break*/, 14];
+                            case exports.IkasThemeCustomDataType.COLOR: return [3 /*break*/, 16];
+                            case exports.IkasThemeCustomDataType.IMAGE_LIST: return [3 /*break*/, 18];
+                            case exports.IkasThemeCustomDataType.IMAGE: return [3 /*break*/, 20];
+                            case exports.IkasThemeCustomDataType.LINK: return [3 /*break*/, 22];
+                            case exports.IkasThemeCustomDataType.LIST_OF_LINK: return [3 /*break*/, 22];
+                            case exports.IkasThemeCustomDataType.PRODUCT_DETAIL: return [3 /*break*/, 24];
+                            case exports.IkasThemeCustomDataType.PRODUCT_LIST: return [3 /*break*/, 26];
+                            case exports.IkasThemeCustomDataType.OBJECT: return [3 /*break*/, 28];
+                            case exports.IkasThemeCustomDataType.DYNAMIC_LIST: return [3 /*break*/, 30];
+                            case exports.IkasThemeCustomDataType.STATIC_LIST: return [3 /*break*/, 30];
+                            case exports.IkasThemeCustomDataType.COMPONENT: return [3 /*break*/, 32];
+                            case exports.IkasThemeCustomDataType.COMPONENT_LIST: return [3 /*break*/, 32];
                         }
-                        return [3 /*break*/, 30];
+                        return [3 /*break*/, 34];
                     case 2: return [4 /*yield*/, this.getTextValue()];
                     case 3:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 4: return [4 /*yield*/, this.getBooleanValue()];
+                        return [3 /*break*/, 35];
+                    case 4: return [4 /*yield*/, this.getRichTextPropValue()];
                     case 5:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 6: return [4 /*yield*/, this.getBrandListPropValue()];
+                        return [3 /*break*/, 35];
+                    case 6: return [4 /*yield*/, this.getBooleanValue()];
                     case 7:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 8: return [4 /*yield*/, this.getBrandPropValue()];
+                        return [3 /*break*/, 35];
+                    case 8: return [4 /*yield*/, this.getBrandListPropValue()];
                     case 9:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 10: return [4 /*yield*/, this.getCategoryListPropValue()];
+                        return [3 /*break*/, 35];
+                    case 10: return [4 /*yield*/, this.getBrandPropValue()];
                     case 11:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 12: return [4 /*yield*/, this.getCategoryPropValue()];
+                        return [3 /*break*/, 35];
+                    case 12: return [4 /*yield*/, this.getCategoryListPropValue()];
                     case 13:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 14: return [4 /*yield*/, this.getColorPropValue()];
+                        return [3 /*break*/, 35];
+                    case 14: return [4 /*yield*/, this.getCategoryPropValue()];
                     case 15:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 16: return [4 /*yield*/, this.getImageListPropValue()];
+                        return [3 /*break*/, 35];
+                    case 16: return [4 /*yield*/, this.getColorPropValue()];
                     case 17:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 18: return [4 /*yield*/, this.getImagePropValue()];
+                        return [3 /*break*/, 35];
+                    case 18: return [4 /*yield*/, this.getImageListPropValue()];
                     case 19:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 20: return [4 /*yield*/, this.getLinkPropValue()];
+                        return [3 /*break*/, 35];
+                    case 20: return [4 /*yield*/, this.getImagePropValue()];
                     case 21:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 22: return [4 /*yield*/, this.getProductDetailPropValue()];
+                        return [3 /*break*/, 35];
+                    case 22: return [4 /*yield*/, this.getLinkPropValue()];
                     case 23:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 24: return [4 /*yield*/, this.getProductListPropValue()];
+                        return [3 /*break*/, 35];
+                    case 24: return [4 /*yield*/, this.getProductDetailPropValue()];
                     case 25:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 26: return [4 /*yield*/, this.getObjectValue()];
+                        return [3 /*break*/, 35];
+                    case 26: return [4 /*yield*/, this.getProductListPropValue()];
                     case 27:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 28: return [4 /*yield*/, this.getArrayValue()];
+                        return [3 /*break*/, 35];
+                    case 28: return [4 /*yield*/, this.getObjectValue()];
                     case 29:
                         customDataValue = _b.sent();
-                        return [3 /*break*/, 31];
-                    case 30: return [3 /*break*/, 31];
-                    case 31: return [3 /*break*/, 33];
-                    case 32:
+                        return [3 /*break*/, 35];
+                    case 30: return [4 /*yield*/, this.getArrayValue()];
+                    case 31:
+                        customDataValue = _b.sent();
+                        return [3 /*break*/, 35];
+                    case 32: return [4 /*yield*/, this.getComponentListValue()];
+                    case 33:
+                        customDataValue = _b.sent();
+                        return [3 /*break*/, 35];
+                    case 34: return [3 /*break*/, 35];
+                    case 35: return [3 /*break*/, 37];
+                    case 36:
                         _b.sent();
                         return [2 /*return*/];
-                    case 33: return [2 /*return*/, JSON.parse(JSON.stringify(customDataValue))];
+                    case 37: return [2 /*return*/, JSON.parse(JSON.stringify(customDataValue))];
                 }
             });
         });
@@ -11615,6 +11641,24 @@ var IkasCustomPropValueProvider = /** @class */ (function () {
             });
         });
     };
+    IkasCustomPropValueProvider.prototype.getRichTextPropValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var provider, value;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        provider = new IkasRichTextPropValueProvider(this.value);
+                        return [4 /*yield*/, provider.getValue()];
+                    case 1:
+                        value = _a.sent();
+                        return [2 /*return*/, {
+                                value: value,
+                                customData: this.customData,
+                            }];
+                }
+            });
+        });
+    };
     IkasCustomPropValueProvider.prototype.getImageListPropValue = function () {
         return __awaiter(this, void 0, void 0, function () {
             var provider, value;
@@ -11741,7 +11785,7 @@ var IkasCustomPropValueProvider = /** @class */ (function () {
                         if (nestedData.isRequired &&
                             (nestedValue === undefined || nestedValue === null))
                             throw new Error("Required data is missing");
-                        nestedProvider = new IkasCustomPropValueProvider(nestedValue, nestedData, this.theme, this.pageSpecificData);
+                        nestedProvider = new IkasCustomPropValueProvider(nestedValue, nestedData, this.theme, this.pageType, this.pageDataProvider, this.pageSpecificData);
                         return [4 /*yield*/, nestedProvider.getValue()];
                     case 2:
                         _itemValue = _b.sent();
@@ -11779,7 +11823,7 @@ var IkasCustomPropValueProvider = /** @class */ (function () {
                         if (nestedData.isRequired &&
                             (itemValue === undefined || itemValue === null))
                             throw new Error("Required data is missing");
-                        provider = new IkasCustomPropValueProvider(itemValue, nestedData, this.theme, this.pageSpecificData);
+                        provider = new IkasCustomPropValueProvider(itemValue, nestedData, this.theme, this.pageType, this.pageDataProvider, this.pageSpecificData);
                         return [4 /*yield*/, provider.getValue()];
                     case 2:
                         _itemValue = _b.sent();
@@ -11801,6 +11845,28 @@ var IkasCustomPropValueProvider = /** @class */ (function () {
             });
         });
     };
+    IkasCustomPropValueProvider.prototype.getComponentListValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var pageComponents;
+            var _a;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        pageComponents = this.value
+                            ? this.value.map(function (v) { return new IkasThemePageComponent(v); })
+                            : [];
+                        _a = {};
+                        return [4 /*yield*/, Promise.all(pageComponents.map(function (tp) {
+                                return _this.pageDataProvider.getPageComponentPropValues(tp);
+                            }))];
+                    case 1: return [2 /*return*/, (_a.value = _b.sent(),
+                            _a.customData = this.customData,
+                            _a)];
+                }
+            });
+        });
+    };
     return IkasCustomPropValueProvider;
 }());
 
@@ -11832,79 +11898,346 @@ var decodeBase64 = function (base64) {
     return buffer.toString("ascii");
 };
 
-var IkasPageDataProvider = /** @class */ (function () {
-    function IkasPageDataProvider(theme, pageParams, pageType) {
-        this.pageType = null;
-        this.pageParams = {};
-        this.pageComponentPropValues = [];
-        this.pageSpecificData = null;
-        this.merchantSettings = null;
-        this.theme = new IkasTheme(theme);
-        this.pageParams = pageParams || {};
-        this.pageType = pageType;
-        mobx.makeAutoObservable(this);
-    }
-    Object.defineProperty(IkasPageDataProvider.prototype, "page", {
-        get: function () {
-            var _this = this;
-            if (this.pageType === exports.IkasThemePageType.CUSTOM) {
-                var slug_1 = this.pageParams.slug;
-                return this.theme.pages.find(function (page) { return page.type === exports.IkasThemePageType.CUSTOM && page.slug === slug_1; });
-            }
-            return this.theme.pages.find(function (page) { return page.type === _this.pageType; });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(IkasPageDataProvider.prototype, "nextPageData", {
-        get: function () {
-            return {
-                props: {
-                    propValuesStr: JSON.stringify(this.pageComponentPropValues),
-                    pageSpecificDataStr: this.pageSpecificData
-                        ? JSON.stringify(this.pageSpecificData || {})
-                        : "",
-                    page: mobx.toJS(this.page) || null,
-                    settingsStr: JSON.stringify(this.theme.settings || {}),
-                    merchantSettings: this.merchantSettings
-                        ? JSON.stringify(this.merchantSettings)
-                        : null,
-                    configJson: IkasStorefrontConfig.getJson(),
-                },
-            };
-        },
-        enumerable: false,
-        configurable: true
+var ThemeComponent = mobxReactLite.observer(function (_a) {
+    var pageComponentPropValue = _a.pageComponentPropValue, index = _a.index, settings = _a.settings;
+    var store = IkasStorefrontConfig.store, components = IkasStorefrontConfig.components;
+    var pageComponent = pageComponentPropValue.pageComponent;
+    var propValues = pageComponentPropValue.propValues;
+    var hasNullValue = mobx.computed(function () {
+        return Object.entries(propValues || {}).some(function (_a) {
+            var _b;
+            var propName = _a[0], propValue = _a[1];
+            return (propValue === null || propValue === undefined) && ((_b = pageComponentPropValue.component.props.find(function (p) { return p.name === propName; })) === null || _b === void 0 ? void 0 : _b.isRequired);
+        });
     });
-    Object.defineProperty(IkasPageDataProvider.prototype, "specification", {
-        get: function () {
-            var _this = this;
-            var _a, _b, _c;
-            var selectedPage = this.page;
-            var specification;
-            if ((selectedPage === null || selectedPage === void 0 ? void 0 : selectedPage.type) === exports.IkasThemePageType.PRODUCT) {
-                specification = (_a = selectedPage.specifications) === null || _a === void 0 ? void 0 : _a.find(function (s) { var _a; return s.id === ((_a = _this.pageSpecificData) === null || _a === void 0 ? void 0 : _a.product.id); });
+    var Component = components[pageComponent.componentId];
+    return (React.createElement("div", { id: index + "" }, hasNullValue.get() ? null : (React.createElement(Component, __assign({ key: pageComponent.id }, propValues, { settings: settings, store: store })))));
+});
+
+var IkasPageHead = mobxReactLite.observer(function (_a) {
+    var _b;
+    var page = _a.page, pageTitle = _a.pageTitle, description = _a.description, pageSpecificDataStr = _a.pageSpecificDataStr, props = __rest(_a, ["page", "pageTitle", "description", "pageSpecificDataStr"]);
+    var ogpMetas = [];
+    var schemas = [];
+    var isCanonicalLinkAdd = false;
+    var canonicalHref = "";
+    if (props.addOgpMetas) {
+        ogpMetas.push({
+            property: "og:type",
+            content: "website",
+        });
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:site_name",
+                content: "https://" + window.location.hostname,
+            });
+        }
+        if (pageTitle) {
+            ogpMetas.push({
+                property: "og:title",
+                content: pageTitle,
+            });
+        }
+        if (description) {
+            ogpMetas.push({
+                property: "og:description",
+                content: description,
+            });
+        }
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:url",
+                content: window.location.href,
+            });
+        }
+        if (props.merchantSettings) {
+            if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.PRODUCT) {
+                var productDetailParsed = JSON.parse(pageSpecificDataStr);
+                var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
+                if (productDetail.selectedVariant.mainImage) {
+                    ogpMetas.push({
+                        property: "og:image",
+                        content: (_b = productDetail.selectedVariant.mainImage) === null || _b === void 0 ? void 0 : _b.src,
+                    });
+                }
             }
-            if ((selectedPage === null || selectedPage === void 0 ? void 0 : selectedPage.type) === exports.IkasThemePageType.CATEGORY) {
-                specification = (_b = selectedPage.specifications) === null || _b === void 0 ? void 0 : _b.find(function (s) { var _a; return s.id === ((_a = _this.pageSpecificData) === null || _a === void 0 ? void 0 : _a.id); });
+            else {
+                var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
+                ogpMetas.push({
+                    property: "og:image",
+                    content: merchantSettings.logo.src,
+                });
             }
-            if ((selectedPage === null || selectedPage === void 0 ? void 0 : selectedPage.type) === exports.IkasThemePageType.BRAND) {
-                specification = (_c = selectedPage.specifications) === null || _c === void 0 ? void 0 : _c.find(function (s) { var _a; return s.id === ((_a = _this.pageSpecificData) === null || _a === void 0 ? void 0 : _a.id); });
+        }
+    }
+    if (props.merchantSettings) {
+        // for schema.org
+        var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
+        var websiteSchema = createWebsiteSchema();
+        var storeSchema = createStoreSchema(merchantSettings);
+        schemas.push(websiteSchema);
+        schemas.push(storeSchema);
+    }
+    if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.PRODUCT) {
+        var productDetailParsed = JSON.parse(pageSpecificDataStr);
+        var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
+        if (typeof window !== "undefined" && productDetail.product.hasVariant) {
+            isCanonicalLinkAdd =
+                window.location.pathname !== productDetail.product.href;
+            canonicalHref =
+                "https://" + window.location.hostname + productDetail.product.href;
+        }
+        var schema = createProductSchema(productDetail);
+        if (schema)
+            schemas.push(schema);
+    }
+    if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.CATEGORY) {
+        var categorySchema = createCategorySchema(pageSpecificDataStr);
+        if (categorySchema)
+            schemas.push(categorySchema);
+        var categoryBreadcrumbSchema = createCategoryBreadcrumbSchema(pageSpecificDataStr);
+        if (categoryBreadcrumbSchema)
+            schemas.push(categoryBreadcrumbSchema);
+    }
+    return (React.createElement(Head__default['default'], null,
+        React.createElement("title", null, pageTitle || ""),
+        React.createElement("meta", { name: "description", content: description || "" }),
+        isCanonicalLinkAdd && React.createElement("link", { rel: "canonical", href: canonicalHref }),
+        !!props.addOgpMetas &&
+            ogpMetas.map(function (ogpMeta, index) { return (React.createElement("meta", { key: ogpMeta.content + "-" + index, property: ogpMeta.property, content: ogpMeta.content })); }),
+        !!schemas.length &&
+            schemas.map(function (schema, index) { return (React.createElement("script", { key: index, type: "application/ld+json", dangerouslySetInnerHTML: {
+                    __html: JSON.stringify(schema),
+                } })); })));
+});
+function createWebsiteSchema() {
+    var _a;
+    var hostname = "";
+    if (typeof window !== "undefined") {
+        hostname = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.hostname;
+    }
+    return {
+        "@context": "https://schema.org",
+        "@type": "Website",
+        url: "https://" + hostname,
+    };
+}
+function createStoreSchema(merchantSettings) {
+    var _a, _b;
+    var hostname = "";
+    if (typeof window !== "undefined") {
+        hostname = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.hostname;
+    }
+    return {
+        "@context": "https://schema.org",
+        "@type": "Store",
+        name: merchantSettings === null || merchantSettings === void 0 ? void 0 : merchantSettings.merchantName,
+        logo: (_b = merchantSettings === null || merchantSettings === void 0 ? void 0 : merchantSettings.logo) === null || _b === void 0 ? void 0 : _b.src,
+        url: "https://" + hostname,
+    };
+}
+function createProductSchema(productDetail) {
+    var _a, _b;
+    try {
+        var isBrowser = typeof window !== "undefined";
+        if (isBrowser) {
+            var urlParams = new URLSearchParams(window.location.search);
+            var vid_1 = urlParams.get("vid");
+            if (vid_1) {
+                var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
+                if (variant) {
+                    productDetail.selectedVariantValues = variant.variantValues;
+                }
             }
-            return specification;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(IkasPageDataProvider.prototype, "pageComponents", {
-        get: function () {
-            var _a;
-            if (this.specification)
-                return this.specification.components;
-            return ((_a = this.page) === null || _a === void 0 ? void 0 : _a.components) || [];
-        },
-        enumerable: false,
-        configurable: true
+        }
+        var productUrl = isBrowser
+            ? "https://" + window.location.hostname + productDetail.href
+            : "";
+        return {
+            "@context": "https://schema.org/",
+            "@type": "Product",
+            name: productDetail.product.name,
+            description: (_a = productDetail.product.metaData) === null || _a === void 0 ? void 0 : _a.description,
+            image: productDetail.selectedVariant.images.map(function (i) { return i.src; }),
+            productId: productDetail.selectedVariant.id,
+            sku: productDetail.selectedVariant.sku,
+            mpn: productDetail.selectedVariant.barcodeList.length
+                ? productDetail.selectedVariant.barcodeList[0]
+                : "",
+            brand: {
+                "@type": "Brand",
+                name: (_b = productDetail.product.brand) === null || _b === void 0 ? void 0 : _b.name,
+            },
+            offers: {
+                "@type": "Offer",
+                url: productUrl,
+                priceCurrency: productDetail.selectedVariant.price.currency || "TRY",
+                price: productDetail.selectedVariant.price.finalPrice,
+                priceValidUntil: "",
+                itemCondition: "https://schema.org/NewCondition",
+                availability: productDetail.selectedVariant.stock > 0
+                    ? "https://schema.org/InStock"
+                    : "https://schema.org/OutOfStock",
+            },
+        };
+    }
+    catch (err) { }
+}
+function createCategorySchema(pageSpecificDataStr) {
+    var _a, _b, _c;
+    try {
+        var categoryParsed = JSON.parse(pageSpecificDataStr);
+        var category = new IkasCategory(categoryParsed);
+        var categoryUrl = typeof window !== undefined
+            ? "https://" + window.location.hostname + category.href
+            : "";
+        return {
+            "@context": "http://schema.org",
+            "@type": "CollectionPage",
+            url: categoryUrl,
+            name: (_a = category.metaData) === null || _a === void 0 ? void 0 : _a.pageTitle,
+            description: (_b = category.metaData) === null || _b === void 0 ? void 0 : _b.description,
+            image: (_c = category.image) === null || _c === void 0 ? void 0 : _c.src,
+        };
+    }
+    catch (_d) { }
+}
+function createCategoryBreadcrumbSchema(pageSpecificDataStr) {
+    try {
+        var categoryParsed = JSON.parse(pageSpecificDataStr);
+        var category = new IkasCategory(categoryParsed);
+        return {
+            "@context": "http://schema.org",
+            "@type": "BreadcrumbList",
+            itemListElement: category.path.map(function (categoryPath, index) { return ({
+                "@type": "ListItem",
+                position: index + 1,
+                name: categoryPath.name,
+                item: typeof window !== undefined
+                    ? "https://" + window.location.hostname + categoryPath.href
+                    : "",
+            }); }),
+        };
+    }
+    catch (_a) { }
+}
+
+var IkasPage = mobxReactLite.observer(function (_a) {
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, addOgpMetas = _a.addOgpMetas;
+    var store = IkasStorefrontConfig.store;
+    var settings = React.useState(new IkasThemeSettings(JSON.parse(settingsStr)))[0];
+    if (page) {
+        store.currentPageType = page.type;
+    }
+    React.useEffect(function () {
+        //@ts-ignore
+        store.setSettings(settingsStr);
+        //@ts-ignore
+        store.cartStore.getCart();
+        store.checkLocalization();
+    }, []);
+    var headerComponentPropValue = propValues.find(function (pv) { return pv.component.isHeader; });
+    var footerComponentPropValue = propValues.find(function (pv) { return pv.component.isFooter; });
+    var others = propValues.filter(function (pv) { return !pv.component.isHeader && !pv.component.isFooter; }) || [];
+    if (!page)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings, addOgpMetas: addOgpMetas }),
+        React.createElement("div", { style: pageStyle },
+            React.createElement("div", null,
+                headerComponentPropValue &&
+                    renderComponent(headerComponentPropValue, settings, -1),
+                others.map(function (pageComponentPropValue, index) {
+                    return renderComponent(pageComponentPropValue, settings, index);
+                })),
+            footerComponentPropValue &&
+                renderComponent(footerComponentPropValue, settings, -1))));
+});
+var renderComponent = function (pageComponentPropValue, settings, index) {
+    return (React.createElement(ThemeComponent, { key: pageComponentPropValue.pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, settings: settings }));
+};
+var pageStyle = {
+    position: "relative",
+    minHeight: "100vh",
+    width: "100vw",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+};
+
+var IkasPageDataProvider = /** @class */ (function () {
+    function IkasPageDataProvider(theme, pageParams, pageType) {
+        this.pageType = null;
+        this.pageParams = {};
+        this.pageComponentPropValues = [];
+        this.pageSpecificData = null;
+        this.merchantSettings = null;
+        this.theme = new IkasTheme(theme);
+        this.pageParams = pageParams || {};
+        this.pageType = pageType;
+        mobx.makeAutoObservable(this);
+    }
+    Object.defineProperty(IkasPageDataProvider.prototype, "page", {
+        get: function () {
+            var _this = this;
+            if (this.pageType === exports.IkasThemePageType.CUSTOM) {
+                var slug_1 = this.pageParams.slug;
+                return this.theme.pages.find(function (page) { return page.type === exports.IkasThemePageType.CUSTOM && page.slug === slug_1; });
+            }
+            return this.theme.pages.find(function (page) { return page.type === _this.pageType; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasPageDataProvider.prototype, "nextPageData", {
+        get: function () {
+            return {
+                props: {
+                    propValuesStr: JSON.stringify(this.pageComponentPropValues),
+                    pageSpecificDataStr: this.pageSpecificData
+                        ? JSON.stringify(this.pageSpecificData || {})
+                        : "",
+                    page: mobx.toJS(this.page) || null,
+                    settingsStr: JSON.stringify(this.theme.settings || {}),
+                    merchantSettings: this.merchantSettings
+                        ? JSON.stringify(this.merchantSettings)
+                        : null,
+                    configJson: IkasStorefrontConfig.getJson(),
+                },
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasPageDataProvider.prototype, "specification", {
+        get: function () {
+            var _this = this;
+            var _a, _b, _c;
+            var selectedPage = this.page;
+            var specification;
+            if ((selectedPage === null || selectedPage === void 0 ? void 0 : selectedPage.type) === exports.IkasThemePageType.PRODUCT) {
+                specification = (_a = selectedPage.specifications) === null || _a === void 0 ? void 0 : _a.find(function (s) { var _a; return s.id === ((_a = _this.pageSpecificData) === null || _a === void 0 ? void 0 : _a.product.id); });
+            }
+            if ((selectedPage === null || selectedPage === void 0 ? void 0 : selectedPage.type) === exports.IkasThemePageType.CATEGORY) {
+                specification = (_b = selectedPage.specifications) === null || _b === void 0 ? void 0 : _b.find(function (s) { var _a; return s.id === ((_a = _this.pageSpecificData) === null || _a === void 0 ? void 0 : _a.id); });
+            }
+            if ((selectedPage === null || selectedPage === void 0 ? void 0 : selectedPage.type) === exports.IkasThemePageType.BRAND) {
+                specification = (_c = selectedPage.specifications) === null || _c === void 0 ? void 0 : _c.find(function (s) { var _a; return s.id === ((_a = _this.pageSpecificData) === null || _a === void 0 ? void 0 : _a.id); });
+            }
+            return specification;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasPageDataProvider.prototype, "pageComponents", {
+        get: function () {
+            var _a;
+            if (this.specification)
+                return this.specification.components;
+            return ((_a = this.page) === null || _a === void 0 ? void 0 : _a.components) || [];
+        },
+        enumerable: false,
+        configurable: true
     });
     Object.defineProperty(IkasPageDataProvider.prototype, "isStaticPage", {
         get: function () {
@@ -12155,60 +12488,87 @@ var IkasPageDataProvider = /** @class */ (function () {
     };
     IkasPageDataProvider.prototype.getPageComponentPropValue = function (pageComponent, prop) {
         return __awaiter(this, void 0, void 0, function () {
-            var propValueProvider, propValue, customData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var propValueProvider, propValue, _a, customData, pageComponents;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         propValue = pageComponent.propValues[prop.name];
                         if (propValue === null || propValue === undefined)
                             return [2 /*return*/, null];
-                        switch (prop.type) {
-                            case exports.IkasThemeComponentPropType.TEXT:
-                                propValueProvider = new IkasTextPropValueProvider(propValue);
-                                break;
-                            case exports.IkasThemeComponentPropType.BOOLEAN:
-                                propValueProvider = new IkasBooleanPropValueProvider(propValue);
-                                break;
-                            case exports.IkasThemeComponentPropType.IMAGE:
-                                propValueProvider = new IkasImagePropValueProvider(propValue);
-                                break;
-                            case exports.IkasThemeComponentPropType.IMAGE_LIST:
-                                propValueProvider = new IkasImageListPropValueProvider(propValue);
-                                break;
-                            case exports.IkasThemeComponentPropType.BRAND:
-                                propValueProvider = new IkasBrandPropValueProvider(propValue, this.pageSpecificData);
-                                break;
-                            case exports.IkasThemeComponentPropType.BRAND_LIST:
-                                propValueProvider = new IkasBrandListPropValueProvider(propValue);
-                                break;
-                            case exports.IkasThemeComponentPropType.PRODUCT_LIST:
-                                propValueProvider = new IkasProductListPropValueProvider(this.pageType, propValue, this.pageParams, this.pageSpecificData);
-                                break;
-                            case exports.IkasThemeComponentPropType.PRODUCT_DETAIL:
-                                propValueProvider = new IkasProductDetailPropValueProvider(propValue, this.pageSpecificData);
-                                break;
-                            case exports.IkasThemeComponentPropType.CATEGORY:
-                                propValueProvider = new IkasCategoryPropValueProvider(propValue, this.pageSpecificData);
-                                break;
-                            case exports.IkasThemeComponentPropType.CATEGORY_LIST:
-                                propValueProvider = new IkasCategoryListPropValueProvider(propValue);
-                                break;
-                            case exports.IkasThemeComponentPropType.LINK:
-                            case exports.IkasThemeComponentPropType.LIST_OF_LINK:
-                                propValueProvider = new IkasLinkPropValueProvider(propValue, this.theme);
-                                break;
-                            case exports.IkasThemeComponentPropType.COLOR:
-                                propValueProvider = new IkasColorPropValueProvider(propValue);
-                                break;
-                            case exports.IkasThemeComponentPropType.CUSTOM:
-                                customData = this.theme.customData.find(function (cd) { return cd.id === prop.customDataId; });
-                                if (!customData)
-                                    return [2 /*return*/];
-                                propValueProvider = new IkasCustomPropValueProvider(propValue, customData, this.theme, this.pageType, this.pageSpecificData, this.pageParams);
-                                break;
+                        _a = prop.type;
+                        switch (_a) {
+                            case exports.IkasThemeComponentPropType.TEXT: return [3 /*break*/, 1];
+                            case exports.IkasThemeComponentPropType.RICH_TEXT: return [3 /*break*/, 2];
+                            case exports.IkasThemeComponentPropType.BOOLEAN: return [3 /*break*/, 3];
+                            case exports.IkasThemeComponentPropType.IMAGE: return [3 /*break*/, 4];
+                            case exports.IkasThemeComponentPropType.IMAGE_LIST: return [3 /*break*/, 5];
+                            case exports.IkasThemeComponentPropType.BRAND: return [3 /*break*/, 6];
+                            case exports.IkasThemeComponentPropType.BRAND_LIST: return [3 /*break*/, 7];
+                            case exports.IkasThemeComponentPropType.PRODUCT_LIST: return [3 /*break*/, 8];
+                            case exports.IkasThemeComponentPropType.PRODUCT_DETAIL: return [3 /*break*/, 9];
+                            case exports.IkasThemeComponentPropType.CATEGORY: return [3 /*break*/, 10];
+                            case exports.IkasThemeComponentPropType.CATEGORY_LIST: return [3 /*break*/, 11];
+                            case exports.IkasThemeComponentPropType.LINK: return [3 /*break*/, 12];
+                            case exports.IkasThemeComponentPropType.LIST_OF_LINK: return [3 /*break*/, 12];
+                            case exports.IkasThemeComponentPropType.COLOR: return [3 /*break*/, 13];
+                            case exports.IkasThemeComponentPropType.CUSTOM: return [3 /*break*/, 14];
+                            case exports.IkasThemeComponentPropType.COMPONENT: return [3 /*break*/, 15];
+                            case exports.IkasThemeComponentPropType.COMPONENT_LIST: return [3 /*break*/, 15];
                         }
-                        return [4 /*yield*/, (propValueProvider === null || propValueProvider === void 0 ? void 0 : propValueProvider.getValue())];
-                    case 1: return [2 /*return*/, _a.sent()];
+                        return [3 /*break*/, 17];
+                    case 1:
+                        propValueProvider = new IkasTextPropValueProvider(propValue);
+                        return [3 /*break*/, 18];
+                    case 2:
+                        propValueProvider = new IkasRichTextPropValueProvider(propValue);
+                        return [3 /*break*/, 18];
+                    case 3:
+                        propValueProvider = new IkasBooleanPropValueProvider(propValue);
+                        return [3 /*break*/, 18];
+                    case 4:
+                        propValueProvider = new IkasImagePropValueProvider(propValue);
+                        return [3 /*break*/, 18];
+                    case 5:
+                        propValueProvider = new IkasImageListPropValueProvider(propValue);
+                        return [3 /*break*/, 18];
+                    case 6:
+                        propValueProvider = new IkasBrandPropValueProvider(propValue, this.pageSpecificData);
+                        return [3 /*break*/, 18];
+                    case 7:
+                        propValueProvider = new IkasBrandListPropValueProvider(propValue);
+                        return [3 /*break*/, 18];
+                    case 8:
+                        propValueProvider = new IkasProductListPropValueProvider(this.pageType, propValue, this.pageParams, this.pageSpecificData);
+                        return [3 /*break*/, 18];
+                    case 9:
+                        propValueProvider = new IkasProductDetailPropValueProvider(propValue, this.pageSpecificData);
+                        return [3 /*break*/, 18];
+                    case 10:
+                        propValueProvider = new IkasCategoryPropValueProvider(propValue, this.pageSpecificData);
+                        return [3 /*break*/, 18];
+                    case 11:
+                        propValueProvider = new IkasCategoryListPropValueProvider(propValue);
+                        return [3 /*break*/, 18];
+                    case 12:
+                        propValueProvider = new IkasLinkPropValueProvider(propValue, this.theme);
+                        return [3 /*break*/, 18];
+                    case 13:
+                        propValueProvider = new IkasColorPropValueProvider(propValue);
+                        return [3 /*break*/, 18];
+                    case 14:
+                        customData = this.theme.customData.find(function (cd) { return cd.id === prop.customDataId; });
+                        if (!customData)
+                            return [2 /*return*/];
+                        propValueProvider = new IkasCustomPropValueProvider(propValue, customData, this.theme, this.pageType, this, this.pageSpecificData, this.pageParams);
+                        return [3 /*break*/, 18];
+                    case 15:
+                        pageComponents = propValue;
+                        return [4 /*yield*/, Promise.all(pageComponents.map(function (tp) { return _this.getPageComponentPropValues(tp); }))];
+                    case 16: return [2 /*return*/, _b.sent()];
+                    case 17: return [3 /*break*/, 18];
+                    case 18: return [4 /*yield*/, (propValueProvider === null || propValueProvider === void 0 ? void 0 : propValueProvider.getValue())];
+                    case 19: return [2 /*return*/, _b.sent()];
                 }
             });
         });
@@ -12222,7 +12582,8 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider.isServer = function () {
         return typeof window === "undefined";
     };
-    IkasPageDataProvider.initPropValues = function (propValuesStr, router, isBrowser) {
+    IkasPageDataProvider.initPropValues = function (propValuesStr, router, settingsStr, isBrowser) {
+        var settings = new IkasThemeSettings(JSON.parse(settingsStr));
         var pageComponentPropValues = JSON.parse(propValuesStr).map(function (v) { return ({
             pageComponent: new IkasThemePageComponent(v.pageComponent),
             component: new IkasThemeComponent(v.component),
@@ -12263,8 +12624,14 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case exports.IkasThemeComponentPropType.LIST_OF_LINK:
                         IkasPageDataProvider.initLinkPropValue(prop, propValue, pageComponentPropValue);
                         break;
+                    case exports.IkasThemeComponentPropType.COMPONENT:
+                        IkasPageDataProvider.initComponentPropValue(prop, propValue, pageComponentPropValue, router, settings, isBrowser);
+                        break;
+                    case exports.IkasThemeComponentPropType.COMPONENT_LIST:
+                        IkasPageDataProvider.initComponentListPropValue(prop, propValue, pageComponentPropValue, router, settings, isBrowser);
+                        break;
                     case exports.IkasThemeComponentPropType.CUSTOM:
-                        IkasPageDataProvider.initCustomDataPropValue(prop, propValue, pageComponentPropValue, router, isBrowser);
+                        IkasPageDataProvider.initCustomDataPropValue(prop, propValue, pageComponentPropValue, router, settings, isBrowser);
                         break;
                 }
             });
@@ -12346,14 +12713,14 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider._initImageListPropValue = function (propValue) {
         return propValue.map(function (i) { return new IkasImage(i.id); });
     };
-    IkasPageDataProvider.initCustomDataPropValue = function (prop, customDataValue, pageComponentPropValue, router, isBrowser) {
+    IkasPageDataProvider.initCustomDataPropValue = function (prop, customDataValue, pageComponentPropValue, router, settings, isBrowser) {
         if (!customDataValue ||
             !customDataValue.value ||
             !customDataValue.customData)
             return;
-        pageComponentPropValue.propValues[prop.name] = this._initCustomDataPropValue(customDataValue, customDataValue.customData, router, isBrowser);
+        pageComponentPropValue.propValues[prop.name] = this._initCustomDataPropValue(customDataValue, customDataValue.customData, router, settings, isBrowser);
     };
-    IkasPageDataProvider._initCustomDataPropValue = function (customDataValue, customData, router, isBrowser) {
+    IkasPageDataProvider._initCustomDataPropValue = function (customDataValue, customData, router, settings, isBrowser) {
         var _this = this;
         if (!customDataValue)
             return null;
@@ -12384,7 +12751,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                 for (var _i = 0, _a = customData.nestedData || []; _i < _a.length; _i++) {
                     var nestedCustomData = _a[_i];
                     var value = propValue[nestedCustomData.key];
-                    objectValue[nestedCustomData.key] = this._initCustomDataPropValue(value, nestedCustomData, router, isBrowser);
+                    objectValue[nestedCustomData.key] = this._initCustomDataPropValue(value, nestedCustomData, router, settings, isBrowser);
                 }
                 return objectValue;
             case exports.IkasThemeCustomDataType.DYNAMIC_LIST:
@@ -12395,17 +12762,51 @@ var IkasPageDataProvider = /** @class */ (function () {
                     var listValue_1 = [];
                     var nestedCustomData_1 = customData.nestedData[0];
                     propValue.forEach(function (itemValue) {
-                        listValue_1.push(_this._initCustomDataPropValue(itemValue, nestedCustomData_1, router, isBrowser));
+                        listValue_1.push(_this._initCustomDataPropValue(itemValue, nestedCustomData_1, router, settings, isBrowser));
                     });
                     return listValue_1;
                 }
                 catch (err) {
                     return [];
                 }
+            case exports.IkasThemeCustomDataType.COMPONENT:
+                return this._initComponentPropValue(propValue, router, settings, isBrowser);
+            case exports.IkasThemeCustomDataType.COMPONENT_LIST:
+                return this._initComponentListPropValue(propValue, router, settings, isBrowser);
             default:
                 return propValue;
         }
     };
+    IkasPageDataProvider.initComponentPropValue = function (prop, propValue, pageComponentPropValue, router, settings, isBrowser) {
+        pageComponentPropValue.propValues[prop.name] = this._initComponentPropValue(propValue, router, settings, isBrowser);
+    };
+    IkasPageDataProvider._initComponentPropValue = function (propValue, router, settings, isBrowser) {
+        var pValue = propValue.length ? propValue[0] : undefined;
+        if (!pValue)
+            return;
+        var pageComponentPropValue = new IkasPageComponentPropValue(pValue);
+        var initializedPageComponentPropValues = this.initPropValues(JSON.stringify([pageComponentPropValue]), router, JSON.stringify(settings), isBrowser);
+        if (!initializedPageComponentPropValues.length)
+            return;
+        return new IkasComponentRenderer(function () {
+            return renderComponent(initializedPageComponentPropValues[0], settings, -10);
+        });
+    };
+    IkasPageDataProvider.initComponentListPropValue = function (prop, propValue, pageComponentPropValue, router, settings, isBrowser) {
+        pageComponentPropValue.propValues[prop.name] = this._initComponentListPropValue(propValue, router, settings, isBrowser);
+    };
+    IkasPageDataProvider._initComponentListPropValue = function (propValue, router, settings, isBrowser) {
+        var _this = this;
+        if (propValue && propValue.length)
+            return propValue.map(function (p) {
+                var pageComponentPropValue = new IkasPageComponentPropValue(p);
+                var initializedPageComponentPropValues = _this.initPropValues(JSON.stringify([pageComponentPropValue]), router, JSON.stringify(settings), isBrowser);
+                return new IkasComponentRenderer(function () {
+                    return renderComponent(initializedPageComponentPropValues[0], settings, -1);
+                });
+            });
+        return [];
+    };
     return IkasPageDataProvider;
 }());
 var IkasPageComponentPropValue = /** @class */ (function () {
@@ -18580,6 +18981,58 @@ var GoogleTagManager = /** @class */ (function () {
             console.error(err);
         }
     };
+    GoogleTagManager.completeRegistration = function () {
+        try {
+            var event_8 = {
+                event: "customer_register",
+            };
+            //@ts-ignore
+            !isServer$2 && window.dataLayer && window.dataLayer.push(event_8);
+            return event_8;
+        }
+        catch (err) {
+            console.error(err);
+        }
+    };
+    GoogleTagManager.search = function (searchKeyword) {
+        try {
+            var event_9 = {
+                event: "search",
+                search_string: searchKeyword,
+            };
+            //@ts-ignore
+            !isServer$2 && window.dataLayer && window.dataLayer.push(event_9);
+            return event_9;
+        }
+        catch (err) {
+            console.error(err);
+        }
+    };
+    GoogleTagManager.viewCategory = function (category, categoryPath) {
+        try {
+            var event_10 = {
+                event: "view_category",
+                ecommerce: {
+                    category: [
+                        {
+                            id: category.id,
+                            name: category.name,
+                            metaData: category.metaData,
+                            href: category.href,
+                            image: category.image,
+                            path: categoryPath,
+                        },
+                    ],
+                },
+            };
+            //@ts-ignore
+            !isServer$2 && window.dataLayer && window.dataLayer.push(event_10);
+            return event_10;
+        }
+        catch (err) {
+            console.error(err);
+        }
+    };
     return GoogleTagManager;
 }());
 function productToGTMItem(productDetail, quantity) {
@@ -18721,6 +19174,7 @@ var Analytics = /** @class */ (function () {
     Analytics.search = function (searchKeyword) {
         try {
             FacebookPixel.search(searchKeyword);
+            GoogleTagManager.search(searchKeyword);
         }
         catch (err) {
             console.error(err);
@@ -18729,6 +19183,7 @@ var Analytics = /** @class */ (function () {
     Analytics.completeRegistration = function () {
         try {
             FacebookPixel.completeRegistration();
+            GoogleTagManager.completeRegistration();
         }
         catch (err) {
             console.error(err);
@@ -18744,9 +19199,10 @@ var Analytics = /** @class */ (function () {
             console.error(err);
         }
     };
-    Analytics.viewCategory = function (categoryPath) {
+    Analytics.viewCategory = function (categoryPath, category) {
         try {
             FacebookPixel.viewCategory(categoryPath);
+            GoogleTagManager.viewCategory(category, categoryPath);
         }
         catch (err) {
             console.error(err);
@@ -20073,6 +20529,7 @@ var IkasThemeComponentProp = /** @class */ (function () {
 }());
 (function (IkasThemeComponentPropType) {
     IkasThemeComponentPropType["TEXT"] = "TEXT";
+    IkasThemeComponentPropType["RICH_TEXT"] = "RICH_TEXT";
     IkasThemeComponentPropType["BOOLEAN"] = "BOOLEAN";
     IkasThemeComponentPropType["IMAGE"] = "IMAGE";
     IkasThemeComponentPropType["IMAGE_LIST"] = "IMAGE_LIST";
@@ -20086,8 +20543,8 @@ var IkasThemeComponentProp = /** @class */ (function () {
     IkasThemeComponentPropType["CATEGORY_LIST"] = "CATEGORY_LIST";
     IkasThemeComponentPropType["COLOR"] = "COLOR";
     IkasThemeComponentPropType["CUSTOM"] = "CUSTOM";
-    // TODO number
-    // TODO productAttribute
+    IkasThemeComponentPropType["COMPONENT"] = "COMPONENT";
+    IkasThemeComponentPropType["COMPONENT_LIST"] = "COMPONENT_LIST";
 })(exports.IkasThemeComponentPropType || (exports.IkasThemeComponentPropType = {}));
 
 var IkasThemeComponent = /** @class */ (function () {
@@ -20135,6 +20592,7 @@ var IkasThemeCustomData = /** @class */ (function () {
 }());
 (function (IkasThemeCustomDataType) {
     IkasThemeCustomDataType["TEXT"] = "TEXT";
+    IkasThemeCustomDataType["RICH_TEXT"] = "RICH_TEXT";
     IkasThemeCustomDataType["NUMBER"] = "NUMBER";
     IkasThemeCustomDataType["BOOLEAN"] = "BOOLEAN";
     IkasThemeCustomDataType["IMAGE"] = "IMAGE";
@@ -20148,6 +20606,8 @@ var IkasThemeCustomData = /** @class */ (function () {
     IkasThemeCustomDataType["CATEGORY"] = "CATEGORY";
     IkasThemeCustomDataType["CATEGORY_LIST"] = "CATEGORY_LIST";
     IkasThemeCustomDataType["COLOR"] = "COLOR";
+    IkasThemeCustomDataType["COMPONENT"] = "COMPONENT";
+    IkasThemeCustomDataType["COMPONENT_LIST"] = "COMPONENT_LIST";
     IkasThemeCustomDataType["OBJECT"] = "OBJECT";
     IkasThemeCustomDataType["STATIC_LIST"] = "STATIC_LIST";
     IkasThemeCustomDataType["DYNAMIC_LIST"] = "DYNAMIC_LIST";
@@ -24232,6 +24692,13 @@ var AccountInfoForm = /** @class */ (function () {
     return AccountInfoForm;
 }());
 
+var IkasComponentRenderer = /** @class */ (function () {
+    function IkasComponentRenderer(render) {
+        this.render = render;
+    }
+    return IkasComponentRenderer;
+}());
+
 var IkasProductListPropValue = /** @class */ (function () {
     function IkasProductListPropValue(data) {
         this.initialSort = null;
@@ -27585,214 +28052,6 @@ var PolicyModal = mobxReactLite.observer(function (_a) {
             React.createElement("div", { className: styles$k.ModalContent, dangerouslySetInnerHTML: { __html: modalContent } }))));
 });
 
-var IkasPageHead = mobxReactLite.observer(function (_a) {
-    var _b;
-    var page = _a.page, pageTitle = _a.pageTitle, description = _a.description, pageSpecificDataStr = _a.pageSpecificDataStr, props = __rest(_a, ["page", "pageTitle", "description", "pageSpecificDataStr"]);
-    var ogpMetas = [];
-    var schemas = [];
-    var isCanonicalLinkAdd = false;
-    var canonicalHref = "";
-    if (props.addOgpMetas) {
-        ogpMetas.push({
-            property: "og:type",
-            content: "website",
-        });
-        if (typeof window !== "undefined") {
-            ogpMetas.push({
-                property: "og:site_name",
-                content: "https://" + window.location.hostname,
-            });
-        }
-        if (pageTitle) {
-            ogpMetas.push({
-                property: "og:title",
-                content: pageTitle,
-            });
-        }
-        if (description) {
-            ogpMetas.push({
-                property: "og:description",
-                content: description,
-            });
-        }
-        if (typeof window !== "undefined") {
-            ogpMetas.push({
-                property: "og:url",
-                content: window.location.href,
-            });
-        }
-        if (props.merchantSettings) {
-            if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.PRODUCT) {
-                var productDetailParsed = JSON.parse(pageSpecificDataStr);
-                var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
-                if (productDetail.selectedVariant.mainImage) {
-                    ogpMetas.push({
-                        property: "og:image",
-                        content: (_b = productDetail.selectedVariant.mainImage) === null || _b === void 0 ? void 0 : _b.src,
-                    });
-                }
-            }
-            else {
-                var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
-                ogpMetas.push({
-                    property: "og:image",
-                    content: merchantSettings.logo.src,
-                });
-            }
-        }
-    }
-    if (props.merchantSettings) {
-        // for schema.org
-        var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
-        var websiteSchema = createWebsiteSchema();
-        var storeSchema = createStoreSchema(merchantSettings);
-        schemas.push(websiteSchema);
-        schemas.push(storeSchema);
-    }
-    if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.PRODUCT) {
-        var productDetailParsed = JSON.parse(pageSpecificDataStr);
-        var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
-        if (typeof window !== "undefined" && productDetail.product.hasVariant) {
-            isCanonicalLinkAdd =
-                window.location.pathname !== productDetail.product.href;
-            canonicalHref =
-                "https://" + window.location.hostname + productDetail.product.href;
-        }
-        var schema = createProductSchema(productDetail);
-        if (schema)
-            schemas.push(schema);
-    }
-    if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.CATEGORY) {
-        var categorySchema = createCategorySchema(pageSpecificDataStr);
-        if (categorySchema)
-            schemas.push(categorySchema);
-        var categoryBreadcrumbSchema = createCategoryBreadcrumbSchema(pageSpecificDataStr);
-        if (categoryBreadcrumbSchema)
-            schemas.push(categoryBreadcrumbSchema);
-    }
-    return (React.createElement(Head__default['default'], null,
-        React.createElement("title", null, pageTitle || ""),
-        React.createElement("meta", { name: "description", content: description || "" }),
-        isCanonicalLinkAdd && React.createElement("link", { rel: "canonical", href: canonicalHref }),
-        !!props.addOgpMetas &&
-            ogpMetas.map(function (ogpMeta, index) { return (React.createElement("meta", { key: ogpMeta.content + "-" + index, property: ogpMeta.property, content: ogpMeta.content })); }),
-        !!schemas.length &&
-            schemas.map(function (schema, index) { return (React.createElement("script", { key: index, type: "application/ld+json", dangerouslySetInnerHTML: {
-                    __html: JSON.stringify(schema),
-                } })); })));
-});
-function createWebsiteSchema() {
-    var _a;
-    var hostname = "";
-    if (typeof window !== "undefined") {
-        hostname = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.hostname;
-    }
-    return {
-        "@context": "https://schema.org",
-        "@type": "Website",
-        url: "https://" + hostname,
-    };
-}
-function createStoreSchema(merchantSettings) {
-    var _a, _b;
-    var hostname = "";
-    if (typeof window !== "undefined") {
-        hostname = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.hostname;
-    }
-    return {
-        "@context": "https://schema.org",
-        "@type": "Store",
-        name: merchantSettings === null || merchantSettings === void 0 ? void 0 : merchantSettings.merchantName,
-        logo: (_b = merchantSettings === null || merchantSettings === void 0 ? void 0 : merchantSettings.logo) === null || _b === void 0 ? void 0 : _b.src,
-        url: "https://" + hostname,
-    };
-}
-function createProductSchema(productDetail) {
-    var _a, _b;
-    try {
-        var isBrowser = typeof window !== "undefined";
-        if (isBrowser) {
-            var urlParams = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams.get("vid");
-            if (vid_1) {
-                var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
-                if (variant) {
-                    productDetail.selectedVariantValues = variant.variantValues;
-                }
-            }
-        }
-        var productUrl = isBrowser
-            ? "https://" + window.location.hostname + productDetail.href
-            : "";
-        return {
-            "@context": "https://schema.org/",
-            "@type": "Product",
-            name: productDetail.product.name,
-            description: (_a = productDetail.product.metaData) === null || _a === void 0 ? void 0 : _a.description,
-            image: productDetail.selectedVariant.images.map(function (i) { return i.src; }),
-            productId: productDetail.selectedVariant.id,
-            sku: productDetail.selectedVariant.sku,
-            mpn: productDetail.selectedVariant.barcodeList.length
-                ? productDetail.selectedVariant.barcodeList[0]
-                : "",
-            brand: {
-                "@type": "Brand",
-                name: (_b = productDetail.product.brand) === null || _b === void 0 ? void 0 : _b.name,
-            },
-            offers: {
-                "@type": "Offer",
-                url: productUrl,
-                priceCurrency: productDetail.selectedVariant.price.currency || "TRY",
-                price: productDetail.selectedVariant.price.finalPrice,
-                priceValidUntil: "",
-                itemCondition: "https://schema.org/NewCondition",
-                availability: productDetail.selectedVariant.stock > 0
-                    ? "https://schema.org/InStock"
-                    : "https://schema.org/OutOfStock",
-            },
-        };
-    }
-    catch (err) { }
-}
-function createCategorySchema(pageSpecificDataStr) {
-    var _a, _b, _c;
-    try {
-        var categoryParsed = JSON.parse(pageSpecificDataStr);
-        var category = new IkasCategory(categoryParsed);
-        var categoryUrl = typeof window !== undefined
-            ? "https://" + window.location.hostname + category.href
-            : "";
-        return {
-            "@context": "http://schema.org",
-            "@type": "CollectionPage",
-            url: categoryUrl,
-            name: (_a = category.metaData) === null || _a === void 0 ? void 0 : _a.pageTitle,
-            description: (_b = category.metaData) === null || _b === void 0 ? void 0 : _b.description,
-            image: (_c = category.image) === null || _c === void 0 ? void 0 : _c.src,
-        };
-    }
-    catch (_d) { }
-}
-function createCategoryBreadcrumbSchema(pageSpecificDataStr) {
-    try {
-        var categoryParsed = JSON.parse(pageSpecificDataStr);
-        var category = new IkasCategory(categoryParsed);
-        return {
-            "@context": "http://schema.org",
-            "@type": "BreadcrumbList",
-            itemListElement: category.path.map(function (categoryPath, index) { return ({
-                "@type": "ListItem",
-                position: index + 1,
-                name: categoryPath.name,
-                item: typeof window !== undefined
-                    ? "https://" + window.location.hostname + categoryPath.href
-                    : "",
-            }); }),
-        };
-    }
-    catch (_a) { }
-}
-
 var CustomerLoginRequiredError = mobxReactLite.observer(function (_a) {
     var onClose = _a.onClose;
     return (React.createElement(ErrorContainer, { onClose: onClose },
@@ -27924,67 +28183,6 @@ var style = {
     backgroundColor: "rgba(255, 0, 0, 0.5)",
 };
 
-var ThemeComponent = mobxReactLite.observer(function (_a) {
-    var pageComponentPropValue = _a.pageComponentPropValue, pageComponent = _a.pageComponent, index = _a.index, settingsStr = _a.settingsStr;
-    var store = IkasStorefrontConfig.store, components = IkasStorefrontConfig.components;
-    var settings = new IkasThemeSettings(JSON.parse(settingsStr));
-    React.useEffect(function () {
-        settings.colors.map(function (sc) {
-            return document.documentElement.style.setProperty(sc.key, sc.color);
-        });
-    }, [settings]);
-    var propValues = pageComponentPropValue.propValues;
-    var hasNullValue = mobx.computed(function () {
-        return Object.entries(propValues || {}).some(function (_a) {
-            var _b;
-            var propName = _a[0], propValue = _a[1];
-            return (propValue === null || propValue === undefined) && ((_b = pageComponentPropValue.component.props.find(function (p) { return p.name === propName; })) === null || _b === void 0 ? void 0 : _b.isRequired);
-        });
-    });
-    var Component = components[pageComponent.componentId];
-    return (React.createElement("div", { id: index + "" }, hasNullValue.get() ? (React.createElement(ErrorComponent, null)) : (React.createElement(Component, __assign({ key: pageComponent.id }, propValues, { settings: settings, store: store })))));
-});
-
-var IkasPage = mobxReactLite.observer(function (_a) {
-    var _b, _c;
-    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, addOgpMetas = _a.addOgpMetas;
-    var store = IkasStorefrontConfig.store;
-    if (page) {
-        store.currentPageType = page.type;
-    }
-    React.useEffect(function () {
-        store.checkLocalization();
-        //@ts-ignore
-        store.cartStore.getCart();
-    }, []);
-    var renderComponent = function (pageComponent, index) {
-        var pageComponentPropValue = propValues.find(function (pv) { return pv.pageComponent.id === pageComponent.id; });
-        return (React.createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent, settingsStr: settingsStr }));
-    };
-    var headerComponent = (_b = propValues.find(function (pv) { return pv.component.isHeader; })) === null || _b === void 0 ? void 0 : _b.pageComponent;
-    var footerComponent = (_c = propValues.find(function (pv) { return pv.component.isFooter; })) === null || _c === void 0 ? void 0 : _c.pageComponent;
-    var others = propValues
-        .filter(function (pv) { return !pv.component.isHeader && !pv.component.isFooter; })
-        .map(function (pv) { return pv.pageComponent; }) || [];
-    if (!page)
-        return null;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings, addOgpMetas: addOgpMetas }),
-        React.createElement("div", { style: pageStyle },
-            React.createElement("div", null,
-                headerComponent && renderComponent(headerComponent, -1),
-                others.map(renderComponent)),
-            footerComponent && renderComponent(footerComponent, -1))));
-});
-var pageStyle = {
-    position: "relative",
-    minHeight: "100vh",
-    width: "100vw",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between",
-};
-
 var PageViewModel = /** @class */ (function () {
     function PageViewModel(router) {
         var _this = this;
@@ -28096,18 +28294,6 @@ var PageViewModel = /** @class */ (function () {
                 data: data,
             }, "*");
         };
-        this.getComponentPropValues = function (pageComponent) {
-            var _a;
-            var json = {};
-            var component = (_a = _this.theme) === null || _a === void 0 ? void 0 : _a.components.find(function (c) { return c.id === pageComponent.componentId; });
-            component === null || component === void 0 ? void 0 : component.props.forEach(function (prop) {
-                // TODO get prop values
-                if (prop.type === exports.IkasThemeComponentPropType.TEXT) {
-                    json[prop.name] = pageComponent.propValues[prop.name];
-                }
-            });
-            return json;
-        };
         this.getPagePropValues = function () { return __awaiter(_this, void 0, void 0, function () {
             var pageDataProvider;
             var _this = this;
@@ -28120,7 +28306,7 @@ var PageViewModel = /** @class */ (function () {
                         return [4 /*yield*/, pageDataProvider.getPageData()];
                     case 1:
                         _b.sent();
-                        pageDataProvider.pageComponentPropValues = IkasPageDataProvider.initPropValues(JSON.stringify(pageDataProvider.pageComponentPropValues), this.router);
+                        pageDataProvider.pageComponentPropValues = IkasPageDataProvider.initPropValues(JSON.stringify(pageDataProvider.pageComponentPropValues), this.router, JSON.stringify(this.theme.settings));
                         mobx.runInAction(function () {
                             _this.pageDataProvider = pageDataProvider;
                             _this.isLoading = false;
@@ -28184,7 +28370,13 @@ var PageViewModel = /** @class */ (function () {
                             if (pageComponentPropValues) {
                                 pageComponentPropValues.propValues[propName] = propValue;
                                 if (prop.type === exports.IkasThemeComponentPropType.CUSTOM) {
-                                    IkasPageDataProvider.initCustomDataPropValue(prop, propValue, pageComponentPropValues, _this.router, true);
+                                    IkasPageDataProvider.initCustomDataPropValue(prop, propValue, pageComponentPropValues, _this.router, _this.theme.settings, true);
+                                }
+                                else if (prop.type === exports.IkasThemeComponentPropType.COMPONENT) {
+                                    IkasPageDataProvider.initComponentPropValue(prop, propValue, pageComponentPropValues, _this.router, _this.theme.settings, true);
+                                }
+                                else if (prop.type === exports.IkasThemeComponentPropType.COMPONENT_LIST) {
+                                    IkasPageDataProvider.initComponentListPropValue(prop, propValue, pageComponentPropValues, _this.router, _this.theme.settings, true);
                                 }
                             }
                         });
@@ -28253,7 +28445,7 @@ var PageViewModel = /** @class */ (function () {
                         mobx.runInAction(function () {
                             var customDataProps = pageComponentPropValues.component.props.filter(function (p) { return p.type === exports.IkasThemeComponentPropType.CUSTOM; });
                             customDataProps.forEach(function (customDataProp) {
-                                IkasPageDataProvider.initCustomDataPropValue(customDataProp, pageComponentPropValues.propValues[customDataProp.name], pageComponentPropValues, _this.router, true);
+                                IkasPageDataProvider.initCustomDataPropValue(customDataProp, pageComponentPropValues.propValues[customDataProp.name], pageComponentPropValues, _this.router, _this.theme.settings, true);
                             });
                             _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValues);
                             _this.pageComponents.push(pageComponent);
@@ -28838,7 +29030,9 @@ var Page = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues, addOgpMetas: true }));
 };
 var getStaticProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -28861,14 +29055,16 @@ var Page$1 = function (_a) {
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
     var _b = React.useState(false), isBrowser = _b[0], setIsBrowser = _b[1];
-    var initialPropValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var initialPropValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     var _c = React.useState(initialPropValues), propValues = _c[0], setPropValues = _c[1];
     React.useEffect(function () {
         setIsBrowser(typeof window !== "undefined");
         handleAnalytics(page, pageSpecificDataStr);
     }, []);
     React.useEffect(function () {
-        setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router$1, isBrowser));
+        setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr, isBrowser));
     }, [isBrowser, propValuesStr]);
     return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings, addOgpMetas: true }));
 };
@@ -28961,7 +29157,7 @@ function handleAnalytics(page, pageSpecificDataStr) {
                 else {
                     categoryPath = category.name;
                 }
-                Analytics.viewCategory(categoryPath);
+                Analytics.viewCategory(categoryPath, category);
             }
         }
         catch (err) {
@@ -28981,7 +29177,9 @@ var Page$2 = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { page: page, settingsStr: settingsStr, propValues: propValues }));
 };
 var getStaticPaths$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29130,7 +29328,9 @@ var Page$3 = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$3 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29152,7 +29352,9 @@ var Page$4 = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$4 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29174,7 +29376,9 @@ var Page$5 = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$5 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29196,7 +29400,9 @@ var Page$6 = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getServerSideProps$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29218,7 +29424,9 @@ var Page$7 = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$6 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29240,7 +29448,9 @@ var Page$8 = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$7 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29262,7 +29472,9 @@ var Page$9 = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$8 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29284,7 +29496,9 @@ var Page$a = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$9 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29306,7 +29520,9 @@ var Page$b = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     var store = IkasStorefrontConfig.store;
     React.useEffect(function () {
         Analytics.viewCart(store.cartStore.cart);
@@ -29343,7 +29559,9 @@ var Page$d = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, configJson = _a.configJson;
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$b = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29366,13 +29584,15 @@ var Page$e = function (_a) {
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
     var _b = React.useState(false), isBrowser = _b[0], setIsBrowser = _b[1];
-    var initialPropValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var initialPropValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     var _c = React.useState(initialPropValues), propValues = _c[0], setPropValues = _c[1];
     React.useEffect(function () {
         setIsBrowser(typeof window !== "undefined");
     }, []);
     React.useEffect(function () {
-        setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router$1, isBrowser));
+        setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr, isBrowser));
     }, [isBrowser, propValuesStr]);
     return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues, addOgpMetas: true }));
 };
@@ -29397,7 +29617,9 @@ var Page$f = function (_a) {
         return React.createElement(Error__default['default'], { statusCode: 404 });
     IkasStorefrontConfig.initWithJson(configJson);
     var router$1 = router.useRouter();
-    var propValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var propValues = React.useMemo(function () {
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr);
+    }, [propValuesStr]);
     return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$d = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -29455,6 +29677,7 @@ var IkasBaseStore = /** @class */ (function () {
         this.localeOptions = [];
         this.showLocaleOptions = false;
         this.localeChecked = false;
+        this.settingsSet = false;
         this.customerStore = new IkasCustomerStore(this);
         this.cartStore = new IkasCartStore(this);
         mobx.makeObservable(this, {
@@ -29543,6 +29766,14 @@ var IkasBaseStore = /** @class */ (function () {
                 (localeOption.routing.path ? "/" + localeOption.routing.path : ""));
         }
     };
+    IkasBaseStore.prototype.setSettings = function (settingsStr) {
+        if (this.settingsSet)
+            return;
+        var settings = new IkasThemeSettings(JSON.parse(settingsStr));
+        settings.colors.map(function (sc) {
+            return document.documentElement.style.setProperty(sc.key, sc.color);
+        });
+    };
     return IkasBaseStore;
 }());
 
@@ -29580,6 +29811,7 @@ exports.IkasCheckout = IkasCheckout;
 exports.IkasCheckoutAPI = IkasCheckoutAPI;
 exports.IkasCheckoutPage = IkasCheckoutPage;
 exports.IkasCityAPI = IkasCityAPI;
+exports.IkasComponentRenderer = IkasComponentRenderer;
 exports.IkasContactForm = IkasContactForm;
 exports.IkasContactFormAPI = IkasContactFormAPI;
 exports.IkasCountryAPI = IkasCountryAPI;