@ikas/storefront 0.0.8 → 0.0.13

package/build/index.es.js

@@ -11643,8 +11643,8 @@ var IkasBrandPropValueProvider = /** @class */ (function () {
 }());
 
 var IkasLinkPropValueProvider = /** @class */ (function () {
-    function IkasLinkPropValueProvider(prop, theme) {
-        this.linkPropValue = prop;
+    function IkasLinkPropValueProvider(linkPropValue, theme) {
+        this.linkPropValue = linkPropValue;
         this.theme = theme;
     }
     IkasLinkPropValueProvider.prototype.getNavigationLink = function (linkPropValue) {
@@ -11769,6 +11769,122 @@ var IkasNavigationLink = /** @class */ (function () {
     return IkasNavigationLink;
 }());
 
+var IkasImageListPropValueProvider = /** @class */ (function () {
+    function IkasImageListPropValueProvider(imageListPropValue) {
+        this.imageListPropValue = imageListPropValue;
+    }
+    IkasImageListPropValueProvider.prototype.getValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.imageListPropValue.map(function (i) { return new IkasImage(i); })];
+            });
+        });
+    };
+    return IkasImageListPropValueProvider;
+}());
+
+var IkasTextPropValueProvider = /** @class */ (function () {
+    function IkasTextPropValueProvider(textPropValue) {
+        this.text = textPropValue;
+    }
+    IkasTextPropValueProvider.prototype.getValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.text];
+            });
+        });
+    };
+    return IkasTextPropValueProvider;
+}());
+
+var IkasBooleanPropValueProvider = /** @class */ (function () {
+    function IkasBooleanPropValueProvider(textPropValue) {
+        this.bool = textPropValue;
+    }
+    IkasBooleanPropValueProvider.prototype.getValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.bool];
+            });
+        });
+    };
+    return IkasBooleanPropValueProvider;
+}());
+
+var IkasImagePropValueProvider = /** @class */ (function () {
+    function IkasImagePropValueProvider(imagePropValue) {
+        this.imagePropValue = imagePropValue;
+    }
+    IkasImagePropValueProvider.prototype.getValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new IkasImage(this.imagePropValue)];
+            });
+        });
+    };
+    return IkasImagePropValueProvider;
+}());
+
+var IkasCategoryPropValueProvider = /** @class */ (function () {
+    function IkasCategoryPropValueProvider(prop, pageSpecificData) {
+        this.categoryPropValue = prop;
+        this.pageSpecificData = pageSpecificData;
+    }
+    IkasCategoryPropValueProvider.prototype.getValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, category, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.categoryPropValue.usePageData) {
+                            return [2 /*return*/, this.pageSpecificData];
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, IkasCategoryAPI.listCategories({
+                                idList: [this.categoryPropValue.categoryId],
+                            })];
+                    case 2:
+                        response = _a.sent();
+                        category = response.categories[0];
+                        return [2 /*return*/, new IkasCategory(category)];
+                    case 3:
+                        err_1 = _a.sent();
+                        console.log(err_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/, new IkasCategory({})];
+                }
+            });
+        });
+    };
+    return IkasCategoryPropValueProvider;
+}());
+
+var IkasCategoryListPropValueProvider = /** @class */ (function () {
+    function IkasCategoryListPropValueProvider(categoryListPropValue) {
+        this.categoryListPropValue = categoryListPropValue;
+    }
+    IkasCategoryListPropValueProvider.prototype.getValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var categoryList;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        categoryList = new IkasCategoryList({
+                            categoryListPropValue: this.categoryListPropValue,
+                        });
+                        return [4 /*yield*/, categoryList.getInitial()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/, categoryList];
+                }
+            });
+        });
+    };
+    return IkasCategoryListPropValueProvider;
+}());
+
 var IkasPageDataProvider = /** @class */ (function () {
     function IkasPageDataProvider(theme, pageParams, pageType) {
         this.pageType = null;
@@ -12003,10 +12119,17 @@ var IkasPageDataProvider = /** @class */ (function () {
                             return [2 /*return*/, null];
                         switch (prop.type) {
                             case IkasThemeComponentPropType.TEXT:
+                                propValueProvider = new IkasTextPropValueProvider(propValue);
+                                break;
                             case IkasThemeComponentPropType.BOOLEAN:
-                                return [2 /*return*/, propValue];
+                                propValueProvider = new IkasBooleanPropValueProvider(propValue);
+                                break;
                             case IkasThemeComponentPropType.IMAGE:
-                                return [2 /*return*/, new IkasImage(propValue)];
+                                propValueProvider = new IkasImagePropValueProvider(propValue);
+                                break;
+                            case IkasThemeComponentPropType.IMAGE_LIST:
+                                propValueProvider = new IkasImageListPropValueProvider(propValue);
+                                break;
                             case IkasThemeComponentPropType.BRAND:
                                 propValueProvider = new IkasBrandPropValueProvider(propValue, this.pageSpecificData);
                                 break;
@@ -12019,6 +12142,12 @@ var IkasPageDataProvider = /** @class */ (function () {
                             case IkasThemeComponentPropType.PRODUCT_DETAIL:
                                 propValueProvider = new IkasProductDetailPropValueProvider(propValue, this.pageSpecificData);
                                 break;
+                            case IkasThemeComponentPropType.CATEGORY:
+                                propValueProvider = new IkasCategoryPropValueProvider(propValue, this.pageSpecificData);
+                                break;
+                            case IkasThemeComponentPropType.CATEGORY_LIST:
+                                propValueProvider = new IkasCategoryListPropValueProvider(propValue);
+                                break;
                             case IkasThemeComponentPropType.LINK:
                             case IkasThemeComponentPropType.LIST_OF_LINK:
                                 propValueProvider = new IkasLinkPropValueProvider(propValue, this.theme);
@@ -12052,9 +12181,15 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case IkasThemeComponentPropType.IMAGE:
                         IkasPageDataProvider.initImagePropValue(prop, propValue, pageComponentPropValue);
                         break;
+                    case IkasThemeComponentPropType.IMAGE_LIST:
+                        IkasPageDataProvider.initImageListPropValue(prop, propValue, pageComponentPropValue);
+                        break;
                     case IkasThemeComponentPropType.BRAND_LIST:
                         IkasPageDataProvider.initBrandListPropValue(prop, propValue, pageComponentPropValue);
                         break;
+                    case IkasThemeComponentPropType.CATEGORY_LIST:
+                        IkasPageDataProvider.initCategoryListPropValue(prop, propValue, pageComponentPropValue);
+                        break;
                     case IkasThemeComponentPropType.PRODUCT_LIST:
                         IkasPageDataProvider.initProductListPropValue(prop, propValue, pageComponentPropValue);
                         break;
@@ -12074,6 +12209,10 @@ var IkasPageDataProvider = /** @class */ (function () {
         var brandList = new IkasBrandList(propValue);
         pageComponentPropValue.propValues[prop.name] = brandList;
     };
+    IkasPageDataProvider.initCategoryListPropValue = function (prop, propValue, pageComponentPropValue) {
+        var categoryList = new IkasCategoryList(propValue);
+        pageComponentPropValue.propValues[prop.name] = categoryList;
+    };
     IkasPageDataProvider.initProductListPropValue = function (prop, propValue, pageComponentPropValue) {
         var productList = new IkasProductList(propValue);
         pageComponentPropValue.propValues[prop.name] = productList;
@@ -12122,6 +12261,9 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider.initImagePropValue = function (prop, propValue, pageComponentPropValue) {
         pageComponentPropValue.propValues[prop.name] = new IkasImage(propValue.id);
     };
+    IkasPageDataProvider.initImageListPropValue = function (prop, propValue, pageComponentPropValue) {
+        pageComponentPropValue.propValues[prop.name] = propValue.map(function (i) { return new IkasImage(i.id); });
+    };
     return IkasPageDataProvider;
 }());
 var IkasPageComponentPropValue = /** @class */ (function () {
@@ -13108,57 +13250,6 @@ var IkasTransactionTypeEnum;
     IkasTransactionTypeEnum["VOID"] = "VOID";
 })(IkasTransactionTypeEnum || (IkasTransactionTypeEnum = {}));
 
-var IkasThemeComponentProp = /** @class */ (function () {
-    function IkasThemeComponentProp(data) {
-        this.name = data.name || "";
-        this.displayName = data.displayName || "";
-        this.type = data.type || IkasThemeComponentPropType.TEXT;
-        makeAutoObservable(this);
-    }
-    return IkasThemeComponentProp;
-}());
-var IkasThemeComponentPropType;
-(function (IkasThemeComponentPropType) {
-    IkasThemeComponentPropType["IMAGE"] = "IMAGE";
-    IkasThemeComponentPropType["TEXT"] = "TEXT";
-    IkasThemeComponentPropType["BOOLEAN"] = "BOOLEAN";
-    IkasThemeComponentPropType["LINK"] = "LINK";
-    IkasThemeComponentPropType["LIST_OF_LINK"] = "LIST_OF_LINK";
-    IkasThemeComponentPropType["PRODUCT_DETAIL"] = "PRODUCT_DETAIL";
-    IkasThemeComponentPropType["PRODUCT_LIST"] = "PRODUCT_LIST";
-    IkasThemeComponentPropType["BRAND"] = "BRAND";
-    IkasThemeComponentPropType["BRAND_LIST"] = "BRAND_LIST";
-    IkasThemeComponentPropType["CATEGORY"] = "CATEGORY";
-    IkasThemeComponentPropType["CATEGORY_LIST"] = "CATEGORY_LIST";
-    // TODO number
-    // TODO productAttribute
-})(IkasThemeComponentPropType || (IkasThemeComponentPropType = {}));
-
-var IkasThemeComponent = /** @class */ (function () {
-    function IkasThemeComponent(data) {
-        this.id = data.id || "";
-        this.dir = data.dir || "";
-        this.displayName = data.displayName || "";
-        this.props = data.props
-            ? data.props.map(function (p) { return new IkasThemeComponentProp(p); })
-            : [];
-        this.isHeader = data.isHeader || false;
-        this.isFooter = data.isFooter || false;
-        makeAutoObservable(this);
-    }
-    return IkasThemeComponent;
-}());
-
-var IkasThemePageComponent = /** @class */ (function () {
-    function IkasThemePageComponent(data) {
-        this.id = data.id || "";
-        this.componentId = data.componentId || "";
-        this.propValues = data.propValues || {};
-        makeAutoObservable(this);
-    }
-    return IkasThemePageComponent;
-}());
-
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
@@ -13233,6 +13324,60 @@ function v4(options, buf, offset) {
   return stringify(rnds);
 }
 
+var IkasThemeComponentProp = /** @class */ (function () {
+    function IkasThemeComponentProp(data) {
+        this.id = data.id || v4();
+        this.name = data.name || "";
+        this.displayName = data.displayName || "";
+        this.type = data.type || IkasThemeComponentPropType.TEXT;
+        this.isRequired = data.isRequired || false;
+        makeAutoObservable(this);
+    }
+    return IkasThemeComponentProp;
+}());
+var IkasThemeComponentPropType;
+(function (IkasThemeComponentPropType) {
+    IkasThemeComponentPropType["TEXT"] = "TEXT";
+    IkasThemeComponentPropType["BOOLEAN"] = "BOOLEAN";
+    IkasThemeComponentPropType["IMAGE"] = "IMAGE";
+    IkasThemeComponentPropType["IMAGE_LIST"] = "IMAGE_LIST";
+    IkasThemeComponentPropType["LINK"] = "LINK";
+    IkasThemeComponentPropType["LIST_OF_LINK"] = "LIST_OF_LINK";
+    IkasThemeComponentPropType["PRODUCT_DETAIL"] = "PRODUCT_DETAIL";
+    IkasThemeComponentPropType["PRODUCT_LIST"] = "PRODUCT_LIST";
+    IkasThemeComponentPropType["BRAND"] = "BRAND";
+    IkasThemeComponentPropType["BRAND_LIST"] = "BRAND_LIST";
+    IkasThemeComponentPropType["CATEGORY"] = "CATEGORY";
+    IkasThemeComponentPropType["CATEGORY_LIST"] = "CATEGORY_LIST";
+    // TODO number
+    // TODO productAttribute
+})(IkasThemeComponentPropType || (IkasThemeComponentPropType = {}));
+
+var IkasThemeComponent = /** @class */ (function () {
+    function IkasThemeComponent(data) {
+        this.id = data.id || "";
+        this.dir = data.dir || "";
+        this.displayName = data.displayName || "";
+        this.props = data.props
+            ? data.props.map(function (p) { return new IkasThemeComponentProp(p); })
+            : [];
+        this.isHeader = data.isHeader || false;
+        this.isFooter = data.isFooter || false;
+        makeAutoObservable(this);
+    }
+    return IkasThemeComponent;
+}());
+
+var IkasThemePageComponent = /** @class */ (function () {
+    function IkasThemePageComponent(data) {
+        this.id = data.id || "";
+        this.componentId = data.componentId || "";
+        this.propValues = data.propValues || {};
+        makeAutoObservable(this);
+    }
+    return IkasThemePageComponent;
+}());
+
 var IkasThemePage = /** @class */ (function () {
     function IkasThemePage(data) {
         this.id = data.id || v4();
@@ -13625,6 +13770,276 @@ var IkasBrandListPropValue = /** @class */ (function () {
     return IkasBrandListPropValue;
 }());
 
+var IkasCategoryList = /** @class */ (function () {
+    function IkasCategoryList(data) {
+        var _this = this;
+        this._initialized = false;
+        this._minPage = null;
+        this._isLoading = false;
+        this.getInitial = function () { return __awaiter(_this, void 0, void 0, function () {
+            var response_1, err_1;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this._isLoading)
+                            return [2 /*return*/];
+                        this._isLoading = true;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, IkasCategoryAPI.listCategories({
+                                idList: this.isStatic
+                                    ? this._categoryListPropValue.categoryIds || undefined
+                                    : undefined,
+                                page: this.isStatic ? undefined : this.page,
+                                limit: this.isStatic ? undefined : this.limit,
+                            })];
+                    case 2:
+                        response_1 = _a.sent();
+                        runInAction(function () {
+                            _this.data = response_1.categories;
+                            _this._count = response_1.count;
+                            _this._initialized = true;
+                            _this._minPage = _this.page;
+                        });
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_1 = _a.sent();
+                        console.log(err_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        runInAction(function () {
+                            _this._isLoading = false;
+                        });
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        this.getPrev = function () { return __awaiter(_this, void 0, void 0, function () {
+            var minPage_1, response_2, err_2;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.isStatic || this._isLoading || !this.hasPrev)
+                            return [2 /*return*/];
+                        this._isLoading = true;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        minPage_1 = this._minPage - 1;
+                        return [4 /*yield*/, IkasCategoryAPI.listCategories({
+                                page: minPage_1,
+                                limit: this.limit,
+                            })];
+                    case 2:
+                        response_2 = _a.sent();
+                        runInAction(function () {
+                            _this.data = response_2.categories.concat(_this.data);
+                            _this._count = response_2.count;
+                            _this._minPage = minPage_1;
+                        });
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_2 = _a.sent();
+                        console.log(err_2);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        runInAction(function () {
+                            _this._isLoading = false;
+                        });
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        this.getNext = function () { return __awaiter(_this, void 0, void 0, function () {
+            var response_3, err_3;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.isStatic || this._isLoading || !this.hasNext)
+                            return [2 /*return*/];
+                        this._isLoading = true;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, IkasCategoryAPI.listCategories({
+                                page: this.page + 1,
+                                limit: this.limit,
+                            })];
+                    case 2:
+                        response_3 = _a.sent();
+                        runInAction(function () {
+                            _this.data = _this.data.concat(response_3.categories);
+                            _this._count = response_3.count;
+                            _this._page = _this.page + 1;
+                        });
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_3 = _a.sent();
+                        console.log(err_3);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        runInAction(function () {
+                            _this._isLoading = false;
+                        });
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        this.getPage = function (page) { return __awaiter(_this, void 0, void 0, function () {
+            var response_4, err_4;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this._isLoading || this.isStatic)
+                            return [2 /*return*/];
+                        this._isLoading = true;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, IkasCategoryAPI.listCategories({
+                                page: page,
+                                limit: this.limit,
+                            })];
+                    case 2:
+                        response_4 = _a.sent();
+                        runInAction(function () {
+                            _this.data = response_4.categories;
+                            _this._count = response_4.count;
+                            _this._page = page;
+                            _this._minPage = page;
+                        });
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_4 = _a.sent();
+                        console.log(err_4);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        runInAction(function () {
+                            _this._isLoading = false;
+                        });
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        this.data = data.data ? data.data.map(function (b) { return new IkasCategory(b); }) : [];
+        this._type =
+            data.type ||
+                data.categoryListPropValue.categoryListType ||
+                IkasCategoryListType.ALL;
+        this._sort =
+            data.sort ||
+                data.categoryListPropValue.initialSort ||
+                IkasCategoryListSortType.A_Z;
+        this._limit = data.limit || data.categoryListPropValue.initialLimit || 20;
+        this._page = data.page || 1;
+        this._count = data.count || 0;
+        this._initialized = data.initialized || false;
+        this._minPage = data.minPage;
+        this._categoryListPropValue = data.categoryListPropValue;
+        makeAutoObservable(this);
+    }
+    Object.defineProperty(IkasCategoryList.prototype, "sort", {
+        get: function () {
+            return this._sort;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasCategoryList.prototype, "limit", {
+        get: function () {
+            return this._limit;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasCategoryList.prototype, "page", {
+        get: function () {
+            return this._page;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasCategoryList.prototype, "count", {
+        get: function () {
+            return this._count;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasCategoryList.prototype, "isInitialized", {
+        get: function () {
+            return this._initialized;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasCategoryList.prototype, "isStatic", {
+        get: function () {
+            return this._type === IkasCategoryListType.STATIC;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasCategoryList.prototype, "hasPrev", {
+        get: function () {
+            if (this.isStatic || !this._minPage)
+                return false;
+            return this._minPage > 1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasCategoryList.prototype, "hasNext", {
+        get: function () {
+            if (this.isStatic)
+                return false;
+            return this.page * this.limit < this.count;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasCategoryList.prototype, "isLoading", {
+        get: function () {
+            return this._isLoading;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IkasCategoryList.prototype.toJSON = function () {
+        return {
+            data: this.data,
+            type: this._type,
+            sort: this._sort,
+            limit: this._limit,
+            page: this._page,
+            count: this._count,
+            initialized: this._initialized,
+            minPage: this._minPage,
+            categoryListPropValue: this._categoryListPropValue,
+        };
+    };
+    return IkasCategoryList;
+}());
+var IkasCategoryListType;
+(function (IkasCategoryListType) {
+    IkasCategoryListType["ALL"] = "ALL";
+    IkasCategoryListType["STATIC"] = "STATIC";
+})(IkasCategoryListType || (IkasCategoryListType = {}));
+var IkasCategoryListSortType;
+(function (IkasCategoryListSortType) {
+    IkasCategoryListSortType["A_Z"] = "A_Z";
+    IkasCategoryListSortType["Z_A"] = "Z_A";
+})(IkasCategoryListSortType || (IkasCategoryListSortType = {}));
+
 var IkasProductDetail = /** @class */ (function () {
     function IkasProductDetail(product, selectedVariantValues, usePageData, router) {
         this.usePageData = null;
@@ -14105,6 +14520,35 @@ var IkasProductDetailPropValue = /** @class */ (function () {
     return IkasProductDetailPropValue;
 }());
 
+var IkasCategoryPropValue = /** @class */ (function () {
+    function IkasCategoryPropValue(data) {
+        this.categoryId = null;
+        // Only for category detail page
+        this.usePageData = null;
+        this.categoryId = data.categoryId;
+        this.usePageData = data.usePageData;
+        makeAutoObservable(this);
+    }
+    return IkasCategoryPropValue;
+}());
+
+var IkasCategoryListPropValue = /** @class */ (function () {
+    function IkasCategoryListPropValue(data) {
+        this.initialSort = null;
+        this.initialLimit = null;
+        // Only for static lists
+        this.categoryCount = null;
+        this.categoryIds = null;
+        this.categoryListType = data.categoryListType || IkasCategoryListType.ALL;
+        this.initialSort = data.initialSort || IkasCategoryListSortType.A_Z;
+        this.initialLimit = data.initialLimit || 20;
+        this.categoryCount = data.categoryCount;
+        this.categoryIds = data.categoryIds;
+        makeAutoObservable(this);
+    }
+    return IkasCategoryListPropValue;
+}());
+
 var IkasBrandAPI = /** @class */ (function () {
     function IkasBrandAPI() {
     }
@@ -14264,7 +14708,7 @@ var IkasCategoryAPI = /** @class */ (function () {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        LIST_QUERY = src(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n      query listCategory(\n        $id: StringFilterInput!\n        $paginationInput: PaginationInput\n        $name: StringFilterInput\n      ) {\n        listCategory(id: $id, paginationInput: $paginationInput, name: $name) {\n          data {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n            parentId\n            imageId\n            metaData {\n              slug\n              pageTitle\n              description\n              targetId\n              targetType\n              redirectTo\n            }\n          }\n          count\n        }\n      }\n    "], ["\n      query listCategory(\n        $id: StringFilterInput!\n        $paginationInput: PaginationInput\n        $name: StringFilterInput\n      ) {\n        listCategory(id: $id, paginationInput: $paginationInput, name: $name) {\n          data {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n            parentId\n            imageId\n            metaData {\n              slug\n              pageTitle\n              description\n              targetId\n              targetType\n              redirectTo\n            }\n          }\n          count\n        }\n      }\n    "])));
+                        LIST_QUERY = src(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n      query listCategory(\n        $id: StringFilterInput\n        $paginationInput: PaginationInput\n        $name: StringFilterInput\n      ) {\n        listCategory(id: $id, paginationInput: $paginationInput, name: $name) {\n          data {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n            parentId\n            imageId\n            metaData {\n              slug\n              pageTitle\n              description\n              targetId\n              targetType\n              redirectTo\n            }\n          }\n          count\n        }\n      }\n    "], ["\n      query listCategory(\n        $id: StringFilterInput\n        $paginationInput: PaginationInput\n        $name: StringFilterInput\n      ) {\n        listCategory(id: $id, paginationInput: $paginationInput, name: $name) {\n          data {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n            parentId\n            imageId\n            metaData {\n              slug\n              pageTitle\n              description\n              targetId\n              targetType\n              redirectTo\n            }\n          }\n          count\n        }\n      }\n    "])));
                         _b.label = 1;
                     case 1:
                         _b.trys.push([1, 3, , 4]);
@@ -14273,9 +14717,11 @@ var IkasCategoryAPI = /** @class */ (function () {
                                 .query({
                                 query: LIST_QUERY,
                                 variables: {
-                                    id: {
-                                        in: (params === null || params === void 0 ? void 0 : params.idList) || [],
-                                    },
+                                    id: (params === null || params === void 0 ? void 0 : params.idList) && params.idList.length
+                                        ? {
+                                            in: params.idList,
+                                        }
+                                        : undefined,
                                     paginationInput: (params === null || params === void 0 ? void 0 : params.page) ? {
                                         page: params.page,
                                         limit: params.limit || 10,
@@ -18856,7 +19302,7 @@ var IkasProductAPI = /** @class */ (function () {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        LIST_PRODUCTS = src(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n      query listProduct(\n        $id: StringFilterInput\n        $paginationInput: PaginationInput\n        $search: String\n      ) {\n        listProduct(\n          id: $id\n          paginationInput: $paginationInput\n          search: $search\n        ) {\n          data {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n            type\n            shortDescription\n            description\n            taxValue\n            metaData {\n              slug\n              pageTitle\n              description\n              targetId\n              targetType\n              redirectTo\n            }\n            categoryIds\n            productVariantTypes {\n              order\n              variantTypeId\n              variantValueIds\n            }\n            variants {\n              id\n              createdAt\n              updatedAt\n              deleted\n              sku\n              barcodeList\n              isActive\n              variantValueIds {\n                variantTypeId\n                variantValueId\n              }\n              attributes {\n                value\n                productAttributeId\n                productAttributeOptionId\n              }\n              images {\n                order\n                isMain\n                imageId\n              }\n              prices {\n                sellPrice\n                discountPrice\n                buyPrice\n                currency\n                salesChannelId\n              }\n            }\n            attributes {\n              value\n              productAttributeId\n              productAttributeOptionId\n            }\n          }\n          count\n        }\n      }\n    "], ["\n      query listProduct(\n        $id: StringFilterInput\n        $paginationInput: PaginationInput\n        $search: String\n      ) {\n        listProduct(\n          id: $id\n          paginationInput: $paginationInput\n          search: $search\n        ) {\n          data {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n            type\n            shortDescription\n            description\n            taxValue\n            metaData {\n              slug\n              pageTitle\n              description\n              targetId\n              targetType\n              redirectTo\n            }\n            categoryIds\n            productVariantTypes {\n              order\n              variantTypeId\n              variantValueIds\n            }\n            variants {\n              id\n              createdAt\n              updatedAt\n              deleted\n              sku\n              barcodeList\n              isActive\n              variantValueIds {\n                variantTypeId\n                variantValueId\n              }\n              attributes {\n                value\n                productAttributeId\n                productAttributeOptionId\n              }\n              images {\n                order\n                isMain\n                imageId\n              }\n              prices {\n                sellPrice\n                discountPrice\n                buyPrice\n                currency\n                salesChannelId\n              }\n            }\n            attributes {\n              value\n              productAttributeId\n              productAttributeOptionId\n            }\n          }\n          count\n        }\n      }\n    "])));
+                        LIST_PRODUCTS = src(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n      query listProduct(\n        $id: StringFilterInput\n        $paginationInput: PaginationInput\n        $search: String\n      ) {\n        listProduct(\n          id: $id\n          paginationInput: $paginationInput\n          search: $search\n        ) {\n          data {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n            type\n            shortDescription\n            description\n            taxValue\n            metaData {\n              slug\n              pageTitle\n              description\n              targetId\n              targetType\n              redirectTo\n            }\n            categoryIds\n            productVariantTypes {\n              order\n              variantTypeId\n              variantValueIds\n            }\n            variants {\n              id\n              createdAt\n              updatedAt\n              deleted\n              sku\n              barcodeList\n              isActive\n              variantValueIds {\n                variantTypeId\n                variantValueId\n              }\n              attributes {\n                value\n                productAttributeId\n                productAttributeOptionId\n              }\n              images {\n                order\n                isMain\n                imageId\n              }\n              prices {\n                sellPrice\n                discountPrice\n                buyPrice\n                currency\n              }\n            }\n            attributes {\n              value\n              productAttributeId\n              productAttributeOptionId\n            }\n          }\n          count\n        }\n      }\n    "], ["\n      query listProduct(\n        $id: StringFilterInput\n        $paginationInput: PaginationInput\n        $search: String\n      ) {\n        listProduct(\n          id: $id\n          paginationInput: $paginationInput\n          search: $search\n        ) {\n          data {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n            type\n            shortDescription\n            description\n            taxValue\n            metaData {\n              slug\n              pageTitle\n              description\n              targetId\n              targetType\n              redirectTo\n            }\n            categoryIds\n            productVariantTypes {\n              order\n              variantTypeId\n              variantValueIds\n            }\n            variants {\n              id\n              createdAt\n              updatedAt\n              deleted\n              sku\n              barcodeList\n              isActive\n              variantValueIds {\n                variantTypeId\n                variantValueId\n              }\n              attributes {\n                value\n                productAttributeId\n                productAttributeOptionId\n              }\n              images {\n                order\n                isMain\n                imageId\n              }\n              prices {\n                sellPrice\n                discountPrice\n                buyPrice\n                currency\n              }\n            }\n            attributes {\n              value\n              productAttributeId\n              productAttributeOptionId\n            }\n          }\n          count\n        }\n      }\n    "])));
                         _b.label = 1;
                     case 1:
                         _b.trys.push([1, 8, , 9]);
@@ -22784,10 +23230,15 @@ var style = {
 };
 
 var ThemeComponent = observer(function (_a) {
-    var propValues = _a.propValues, pageComponent = _a.pageComponent, index = _a.index;
+    var pageComponentPropValue = _a.pageComponentPropValue, pageComponent = _a.pageComponent, index = _a.index;
     var store = IkasStorefrontConfig.store, components = IkasStorefrontConfig.components;
+    var propValues = pageComponentPropValue.propValues;
     var hasNullValue = computed(function () {
-        return Object.values(propValues || {}).some(function (pv) { return pv === null || pv === undefined; });
+        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 (createElement("div", { id: index + "" }, hasNullValue.get() ? (createElement(ErrorComponent, null)) : (createElement(Component, __assign({ key: pageComponent.id }, propValues, { store: store })))));
@@ -22798,7 +23249,7 @@ var IkasPage = observer(function (_a) {
     var propValues = _a.propValues, page = _a.page;
     var renderComponent = function (pageComponent, index) {
         var pageComponentPropValue = propValues.find(function (pv) { return pv.pageComponent.id === pageComponent.id; });
-        return (createElement(ThemeComponent, { key: pageComponent.id, index: index, propValues: pageComponentPropValue.propValues, pageComponent: pageComponent }));
+        return (createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent }));
     };
     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;
@@ -22854,10 +23305,10 @@ var PageViewModel = /** @class */ (function () {
                             case BridgeMessageType.UPDATE_PROP_VALUE: return [3 /*break*/, 3];
                             case BridgeMessageType.UPDATE_PAGE_PARAMS: return [3 /*break*/, 5];
                             case BridgeMessageType.UPDATE_PAGE_COMPONENT_ORDER: return [3 /*break*/, 7];
-                            case BridgeMessageType.ADD_NEW_COMPONENT: return [3 /*break*/, 9];
+                            case BridgeMessageType.ADD_COMPONENT: return [3 /*break*/, 9];
                             case BridgeMessageType.DELETE_COMPONENT: return [3 /*break*/, 10];
                             case BridgeMessageType.UPDATE_COMPONENT: return [3 /*break*/, 11];
-                            case BridgeMessageType.ADD_NEW_PAGE_COMPONENT: return [3 /*break*/, 12];
+                            case BridgeMessageType.ADD_PAGE_COMPONENT: return [3 /*break*/, 12];
                             case BridgeMessageType.DELETE_PAGE_COMPONENT: return [3 /*break*/, 14];
                             case BridgeMessageType.SET_SELECTED_COMPONENT: return [3 /*break*/, 15];
                             case BridgeMessageType.SET_HOVERED_COMPONENT: return [3 /*break*/, 16];
@@ -23064,13 +23515,16 @@ var PageViewModel = /** @class */ (function () {
         this.handleAddNewPageComponent = function (data) { return __awaiter(_this, void 0, void 0, function () {
             var pageComponent, pageComponentPropValue;
             var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         pageComponent = new IkasThemePageComponent(data.pageComponent);
+                        if ((_a = this.page) === null || _a === void 0 ? void 0 : _a.components.some(function (pc) { return pc.id === pageComponent.id; }))
+                            return [2 /*return*/];
                         return [4 /*yield*/, this.pageDataProvider.getPageComponentPropValues(pageComponent)];
                     case 1:
-                        pageComponentPropValue = _a.sent();
+                        pageComponentPropValue = _b.sent();
                         runInAction(function () {
                             var _a;
                             _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValue);
@@ -23131,10 +23585,10 @@ var BridgeMessageType;
     BridgeMessageType["UPDATE_PROP_VALUE"] = "UPDATE_PROP_VALUE";
     BridgeMessageType["UPDATE_PAGE_PARAMS"] = "UPDATE_PAGE_PARAMS";
     BridgeMessageType["UPDATE_PAGE_COMPONENT_ORDER"] = "UPDATE_PAGE_COMPONENT_ORDER";
-    BridgeMessageType["ADD_NEW_COMPONENT"] = "ADD_NEW_COMPONENT";
+    BridgeMessageType["ADD_COMPONENT"] = "ADD_COMPONENT";
     BridgeMessageType["DELETE_COMPONENT"] = "DELETE_COMPONENT";
     BridgeMessageType["UPDATE_COMPONENT"] = "UPDATE_COMPONENT";
-    BridgeMessageType["ADD_NEW_PAGE_COMPONENT"] = "ADD_NEW_PAGE_COMPONENT";
+    BridgeMessageType["ADD_PAGE_COMPONENT"] = "ADD_PAGE_COMPONENT";
     BridgeMessageType["DELETE_PAGE_COMPONENT"] = "DELETE_PAGE_COMPONENT";
     BridgeMessageType["COMPONENT_MOUSE_OVER"] = "COMPONENT_MOUSE_OVER";
     BridgeMessageType["COMPONENT_MOUSE_LEAVE"] = "COMPONENT_MOUSE_LEAVE";
@@ -23152,10 +23606,10 @@ var ThemeEditorComponent = observer(function (_a) {
     useEffect(function () {
         vm.setComponentRef(ref.current, pageComponent);
     }, []);
-    var pageComponentPropValues = computed(function () {
+    var pageComponentPropValue = computed(function () {
         return vm.pageDataProvider.pageComponentPropValues.find(function (pc) { return pc.pageComponent.id === pageComponent.id; });
     });
-    var propValues = (_b = pageComponentPropValues.get()) === null || _b === void 0 ? void 0 : _b.propValues;
+    var propValues = (_b = pageComponentPropValue.get()) === null || _b === void 0 ? void 0 : _b.propValues;
     if (!propValues)
         return null;
     var Component = components[pageComponent.componentId];
@@ -23166,7 +23620,12 @@ var ThemeEditorComponent = observer(function (_a) {
         return vm.hoveredPageComponentId === pageComponent.id;
     });
     var hasNullValue = computed(function () {
-        return Object.values(propValues || {}).some(function (pv) { return pv === null || pv === undefined; });
+        return Object.entries(propValues || {}).some(function (_a) {
+            var _b, _c;
+            var propName = _a[0], propValue = _a[1];
+            return (propValue === null || propValue === undefined) && ((_c = (_b = pageComponentPropValue
+                .get()) === null || _b === void 0 ? void 0 : _b.component.props.find(function (p) { return p.name === propName; })) === null || _c === void 0 ? void 0 : _c.isRequired);
+        });
     });
     var onMouseEnter = function () {
         vm.onMouseOver(pageComponent.id);
@@ -23709,4 +24168,4 @@ var IkasBaseStore = /** @class */ (function () {
     return IkasBaseStore;
 }());
 
-export { index$2 as AccountPage, addresses as AddressesPage, _id_$1 as CheckoutPage, _secondSlug_ as CustomPage, editor$1 as EditorPage, forgotPassword as ForgotPasswordPage, GTMAddToCart, GTMBeginCheckout, GTMBody, GTMCheckoutStep, GTMDisableHTML, GTMHead, GTMPageView, GTMProductView, GTMPurchase, GTMRemoveFromCart, IkasAmountTypeEnum$1 as IkasAmountTypeEnum, IkasBaseStore, IkasBrand, IkasBrandAPI, IkasBrandList, IkasBrandListPropValue, IkasBrandListSortType, IkasBrandListType, IkasBrandPropValue, IkasCardAssociation, IkasCardType, IkasCartAPI, IkasCategory, IkasCategoryAPI, IkasCheckout, IkasCheckoutAPI, IkasCheckoutPage, IkasCheckoutRecoveryEmailStatus, IkasCheckoutRecoveryStatus, IkasCheckoutStatus, IkasCityAPI, IkasCountryAPI, IkasCustomer, IkasCustomerAPI, IkasCustomerAddress, IkasDistrictAPI, IkasHTMLMetaData, IkasHTMLMetaDataAPI, IkasHTMLMetaDataTargetType, IkasImage, IkasLinkPropValue, IkasLinkType, IkasMerchantAPI, IkasMerchantSettings, IkasNavigationLink, IkasOrder, IkasOrderCancelledReason, IkasOrderLineItem, IkasOrderPackageFulfillStatus, IkasOrderPackageStatus, IkasOrderPaymentStatus, IkasOrderShippingMethod, IkasOrderStatus, IkasOrderTransaction, IkasPage, IkasPageComponentPropValue, IkasPageDataProvider, IkasPageEditor, IkasPageHead, IkasPaymentMethod, IkasProduct, IkasProductAPI, IkasProductAttribute, IkasProductAttributeAPI, IkasProductAttributeValue, IkasProductDetail, IkasProductDetailPropValue, IkasProductList, IkasProductListFilter, IkasProductListPropValue, IkasProductListSortType, IkasProductListType, IkasProductPrice, IkasProductType, IkasProductVariant, IkasProductVariantType, IkasShippingMethod, IkasShippingMethodEnum, IkasStateAPI, IkasStorefrontAPI, IkasStorefrontConfig, IkasTheme, IkasThemeAPI, IkasThemeComponent, IkasThemeComponentProp, IkasThemeComponentPropType, IkasThemePage, IkasThemePageComponent, IkasThemePageType, IkasTransactionStatusEnum, IkasTransactionTypeEnum, IkasVariantSelectionType, IkasVariantType, IkasVariantTypeAPI, IkasVariantValue, home as IndexPage, login as LoginPage, _id_$2 as OrderDetailPage, index$3 as OrdersPage, recoverPassword as RecoverPasswordPage, register as RegisterPage, index$1 as SlugPage, apollo, decodeBase64, formatMoney, pascalCase, stringToSlug, validatePhoneNumber };
+export { index$2 as AccountPage, addresses as AddressesPage, _id_$1 as CheckoutPage, _secondSlug_ as CustomPage, editor$1 as EditorPage, forgotPassword as ForgotPasswordPage, GTMAddToCart, GTMBeginCheckout, GTMBody, GTMCheckoutStep, GTMDisableHTML, GTMHead, GTMPageView, GTMProductView, GTMPurchase, GTMRemoveFromCart, IkasAmountTypeEnum$1 as IkasAmountTypeEnum, IkasBaseStore, IkasBrand, IkasBrandAPI, IkasBrandList, IkasBrandListPropValue, IkasBrandListSortType, IkasBrandListType, IkasBrandPropValue, IkasCardAssociation, IkasCardType, IkasCartAPI, IkasCategory, IkasCategoryAPI, IkasCategoryList, IkasCategoryListPropValue, IkasCategoryListSortType, IkasCategoryListType, IkasCategoryPropValue, IkasCheckout, IkasCheckoutAPI, IkasCheckoutPage, IkasCheckoutRecoveryEmailStatus, IkasCheckoutRecoveryStatus, IkasCheckoutStatus, IkasCityAPI, IkasCountryAPI, IkasCustomer, IkasCustomerAPI, IkasCustomerAddress, IkasDistrictAPI, IkasHTMLMetaData, IkasHTMLMetaDataAPI, IkasHTMLMetaDataTargetType, IkasImage, IkasLinkPropValue, IkasLinkType, IkasMerchantAPI, IkasMerchantSettings, IkasNavigationLink, IkasOrder, IkasOrderCancelledReason, IkasOrderLineItem, IkasOrderPackageFulfillStatus, IkasOrderPackageStatus, IkasOrderPaymentStatus, IkasOrderShippingMethod, IkasOrderStatus, IkasOrderTransaction, IkasPage, IkasPageComponentPropValue, IkasPageDataProvider, IkasPageEditor, IkasPageHead, IkasPaymentMethod, IkasProduct, IkasProductAPI, IkasProductAttribute, IkasProductAttributeAPI, IkasProductAttributeValue, IkasProductDetail, IkasProductDetailPropValue, IkasProductList, IkasProductListFilter, IkasProductListPropValue, IkasProductListSortType, IkasProductListType, IkasProductPrice, IkasProductType, IkasProductVariant, IkasProductVariantType, IkasShippingMethod, IkasShippingMethodEnum, IkasStateAPI, IkasStorefrontAPI, IkasStorefrontConfig, IkasTheme, IkasThemeAPI, IkasThemeComponent, IkasThemeComponentProp, IkasThemeComponentPropType, IkasThemePage, IkasThemePageComponent, IkasThemePageType, IkasTransactionStatusEnum, IkasTransactionTypeEnum, IkasVariantSelectionType, IkasVariantType, IkasVariantTypeAPI, IkasVariantValue, home as IndexPage, login as LoginPage, _id_$2 as OrderDetailPage, index$3 as OrdersPage, recoverPassword as RecoverPasswordPage, register as RegisterPage, index$1 as SlugPage, apollo, decodeBase64, formatMoney, pascalCase, stringToSlug, validatePhoneNumber };