@ikas/storefront 0.0.48 → 0.0.50

package/build/index.js

@@ -6,7 +6,7 @@ var mobx = require('mobx');
 var React = require('react');
 var mobxReactLite = require('mobx-react-lite');
 var router = require('next/router');
-var Image = require('next/image');
+var Image$1 = require('next/image');
 var Link = require('next/link');
 var Head = require('next/head');
 var dynamic = require('next/dynamic');
@@ -14,7 +14,7 @@ var dynamic = require('next/dynamic');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
+var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image$1);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
 var dynamic__default = /*#__PURE__*/_interopDefaultLegacy(dynamic);
@@ -10895,7 +10895,7 @@ var Apollo = /** @class */ (function () {
         this.createApolloClient = function (apiKey) {
             var authLink = setContext(function (_request, _a) {
                 var headers = _a.headers;
-                var newHeaders = __assign(__assign({}, headers), { "x-api-key": apiKey || IkasStorefrontConfig.config.apiKey });
+                var newHeaders = __assign(__assign({}, headers), { "x-api-key": apiKey || IkasStorefrontConfig.config.apiKey, "X-Operation-Name": _request.operationName });
                 if (Apollo.customerToken) {
                     newHeaders.Authorization = "Bearer " + Apollo.customerToken;
                 }
@@ -10952,32 +10952,32 @@ var IkasProductListPropValueProvider = /** @class */ (function () {
     }
     IkasProductListPropValueProvider.prototype.getValue = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var filters, category, brand, productList;
+            var filterBrandId, filterCategoryId, category, brand, productList;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        filters = new IkasProductListFilter();
                         if (this.productListPropValue.productListType === exports.IkasProductListType.ALL) {
                             // TODO use pageParams to insert filters
                             if (this.productListPropValue.usePageFilter) {
                                 if (this.pageType === exports.IkasThemePageType.CATEGORY) {
                                     category = this.pageSpecificData;
-                                    filters.category = category.id;
+                                    filterCategoryId = category.id;
                                 }
                                 else if (this.pageType === exports.IkasThemePageType.BRAND) {
                                     brand = this.pageSpecificData;
-                                    filters.brand = brand.id;
+                                    filterBrandId = brand.id;
                                 }
                             }
                         }
-                        if (this.productListPropValue.productListType === exports.IkasProductListType.CATEGORY) {
-                            if (this.productListPropValue.category) {
-                                filters.category = this.productListPropValue.category;
-                            }
+                        if (this.productListPropValue.productListType ===
+                            exports.IkasProductListType.CATEGORY &&
+                            this.productListPropValue.category) {
+                            filterCategoryId = this.productListPropValue.category;
                         }
                         productList = new IkasProductList({
                             productListPropValue: this.productListPropValue,
-                            filters: filters,
+                            filterBrandId: filterBrandId,
+                            filterCategoryId: filterCategoryId,
                         });
                         if (!!this.skipInitialFetch) return [3 /*break*/, 2];
                         return [4 /*yield*/, productList.getInitial()];
@@ -11000,7 +11000,7 @@ var IkasProductDetailPropValueProvider = /** @class */ (function () {
     IkasProductDetailPropValueProvider.prototype.getValue = function () {
         var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var productListResponse, product, variant;
+            var productSearchResponse, productList, product, variant;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -11008,17 +11008,30 @@ var IkasProductDetailPropValueProvider = /** @class */ (function () {
                         if ((_a = this.productDetailPropValue) === null || _a === void 0 ? void 0 : _a.usePageData) {
                             return [2 /*return*/, this.pageSpecificData];
                         }
-                        return [4 /*yield*/, IkasProductAPI.listProducts({
-                                idList: [this.productDetailPropValue.productId],
+                        if (!this.productDetailPropValue.productId)
+                            return [2 /*return*/, null];
+                        return [4 /*yield*/, IkasProductSearchAPI.searchProducts({
+                                productIdList: [this.productDetailPropValue.productId],
                             })];
                     case 1:
-                        productListResponse = _b.sent();
-                        product = productListResponse.products[0];
-                        if (product === null || product === void 0 ? void 0 : product.hasVariant) {
-                            variant = product.variants.find(function (v) { return v.id === _this.productDetailPropValue.variantId; });
-                            return [2 /*return*/, new IkasProductDetail(product, variant.variantValues)];
+                        productSearchResponse = _b.sent();
+                        if (productSearchResponse) {
+                            productList = productSearchResponse.data;
+                            if (productList.length) {
+                                product = productList[0];
+                                if (product === null || product === void 0 ? void 0 : product.hasVariant) {
+                                    variant = product.variants.find(function (v) { return v.id === _this.productDetailPropValue.variantId; });
+                                    if (variant)
+                                        return [2 /*return*/, new IkasProductDetail(product, variant.variantValues)];
+                                    else
+                                        return [2 /*return*/, null];
+                                }
+                                else {
+                                    return [2 /*return*/, new IkasProductDetail(product, product.variants[0].variantValues)];
+                                }
+                            }
                         }
-                        return [2 /*return*/, new IkasProductDetail(product, [])];
+                        return [2 /*return*/, null];
                 }
             });
         });
@@ -11994,14 +12007,14 @@ var IkasPageDataProvider = /** @class */ (function () {
                         metaDataResponse = _b.sent();
                         if (!metaDataResponse)
                             return [2 /*return*/];
-                        return [4 /*yield*/, IkasProductAPI.listProducts({
-                                idList: [metaDataResponse.metaData.targetId],
+                        return [4 /*yield*/, IkasProductSearchAPI.searchProducts({
+                                productIdList: [metaDataResponse.metaData.targetId],
                             })];
                     case 2:
                         productsResponse = _b.sent();
-                        if (!productsResponse.products.length)
+                        if (!(productsResponse === null || productsResponse === void 0 ? void 0 : productsResponse.data.length))
                             return [2 /*return*/];
-                        product = productsResponse.products[0];
+                        product = productsResponse.data[0];
                         isMainProductSlug = slug.length === metaDataResponse.slug.length;
                         selectedVariantValues = [];
                         if (!isMainProductSlug) {
@@ -12162,7 +12175,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                         IkasPageDataProvider.initCategoryListPropValue(prop, propValue, pageComponentPropValue);
                         break;
                     case exports.IkasThemeComponentPropType.PRODUCT_LIST:
-                        IkasPageDataProvider.initProductListPropValue(prop, propValue, pageComponentPropValue);
+                        IkasPageDataProvider.initProductListPropValue(prop, propValue, pageComponentPropValue, router);
                         break;
                     case exports.IkasThemeComponentPropType.PRODUCT_DETAIL:
                         IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, router, isBrowser);
@@ -12204,11 +12217,11 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider._initCategoryListPropValue = function (propValue) {
         return new IkasCategoryList(propValue);
     };
-    IkasPageDataProvider.initProductListPropValue = function (prop, propValue, pageComponentPropValue) {
-        pageComponentPropValue.propValues[prop.name] = this._initProductListPropValue(propValue);
+    IkasPageDataProvider.initProductListPropValue = function (prop, propValue, pageComponentPropValue, router) {
+        pageComponentPropValue.propValues[prop.name] = this._initProductListPropValue(propValue, router);
     };
-    IkasPageDataProvider._initProductListPropValue = function (propValue) {
-        return new IkasProductList(propValue);
+    IkasPageDataProvider._initProductListPropValue = function (propValue, router) {
+        return new IkasProductList(propValue, router);
     };
     IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, router, isBrowser) {
         pageComponentPropValue.propValues[prop.name] = this._initProductDetailPropValue(propValue, router, isBrowser);
@@ -12286,7 +12299,7 @@ var IkasPageDataProvider = /** @class */ (function () {
             case exports.IkasThemeCustomDataType.PRODUCT_DETAIL:
                 return this._initProductDetailPropValue(propValue, router, isBrowser);
             case exports.IkasThemeCustomDataType.PRODUCT_LIST:
-                return this._initProductListPropValue(propValue);
+                return this._initProductListPropValue(propValue, router);
             case exports.IkasThemeCustomDataType.OBJECT:
                 var objectValue = {};
                 for (var _i = 0, _a = customData.nestedData || []; _i < _a.length; _i++) {
@@ -12436,6 +12449,7 @@ var IkasCategory = /** @class */ (function () {
             ? new IkasHTMLMetaData(data.metaData)
             : undefined;
         this.image = data.image ? new IkasImage(data.image.id) : null;
+        this.path = data.path || [];
         mobx.makeAutoObservable(this);
     }
     Object.defineProperty(IkasCategory.prototype, "href", {
@@ -13090,7 +13104,7 @@ var IkasVariantValue = /** @class */ (function () {
         this.id = data.id || "";
         this.name = data.name || "";
         this.colorCode = data.colorCode || null;
-        this.thumbnilImageId = data.thumbnilImageId || null;
+        this.thumbnailImageId = data.thumbnailImageId || null;
         this.variantTypeId = data.variantTypeId || "";
         mobx.makeAutoObservable(this);
     }
@@ -13103,8 +13117,8 @@ var IkasVariantValue = /** @class */ (function () {
     });
     Object.defineProperty(IkasVariantValue.prototype, "thumbnailImage", {
         get: function () {
-            if (this.thumbnilImageId)
-                return new IkasImage(this.thumbnilImageId);
+            if (this.thumbnailImageId)
+                return new IkasImage(this.thumbnailImageId);
         },
         enumerable: false,
         configurable: true
@@ -13112,11 +13126,48 @@ var IkasVariantValue = /** @class */ (function () {
     return IkasVariantValue;
 }());
 
+var IkasProductAttributeOption = /** @class */ (function () {
+    function IkasProductAttributeOption(data) {
+        if (data === void 0) { data = {}; }
+        this.id = data.id || "";
+        this.name = data.name || "";
+        mobx.makeAutoObservable(this);
+    }
+    return IkasProductAttributeOption;
+}());
+
+var IkasProductAttribute = /** @class */ (function () {
+    function IkasProductAttribute(data) {
+        this.id = data.id || "";
+        this.name = data.name || "";
+        this.type = data.type || IkasProductAttributeType.TEXT;
+        this.options = data.options || null;
+        mobx.makeAutoObservable(this);
+    }
+    return IkasProductAttribute;
+}());
+var IkasProductAttributeType;
+(function (IkasProductAttributeType) {
+    IkasProductAttributeType["CHOICE"] = "CHOICE";
+    IkasProductAttributeType["MULTIPLE_CHOICE"] = "MULTIPLE_CHOICE";
+    IkasProductAttributeType["TEXT"] = "TEXT";
+    IkasProductAttributeType["BOOLEAN"] = "BOOLEAN";
+    IkasProductAttributeType["NUMERIC"] = "NUMERIC";
+    IkasProductAttributeType["DATETIME"] = "DATETIME";
+    IkasProductAttributeType["HTML"] = "HTML";
+})(IkasProductAttributeType || (IkasProductAttributeType = {}));
+
 var IkasProductAttributeValue = /** @class */ (function () {
     function IkasProductAttributeValue(data) {
         this.value = data.value || null;
         this.productAttributeId = data.productAttributeId || "";
         this.productAttributeOptionId = data.productAttributeOptionId || null;
+        this.productAttribute = data.productAttribute
+            ? new IkasProductAttribute(data.productAttribute)
+            : null;
+        this.productAttributeOption = data.productAttributeOption
+            ? new IkasProductAttributeOption(data.productAttributeOption)
+            : null;
         mobx.makeAutoObservable(this);
     }
     return IkasProductAttributeValue;
@@ -13264,26 +13315,189 @@ var IkasProduct = /** @class */ (function () {
     IkasProductType["MEMBERSHIP"] = "MEMBERSHIP";
 })(exports.IkasProductType || (exports.IkasProductType = {}));
 
-var IkasProductAttribute = /** @class */ (function () {
-    function IkasProductAttribute(data) {
+var IkasProductFilter = /** @class */ (function () {
+    function IkasProductFilter(data) {
+        if (data === void 0) { data = {}; }
+        this.values = null;
+        this.customValues = null;
+        // Extra
+        this.numberRange = null; // Selected range value for the number slider
+        this.numberRangeLimit = null; // Limits for the number range slider
+        this.numberRangeListOptions = null; // List options for the number range select
         this.id = data.id || "";
+        this.key = data.key || "";
         this.name = data.name || "";
-        this.type = data.type || IkasProductAttributeType.TEXT;
-        this.options = data.options || null;
+        this.order = data.order || 0;
+        this.type = data.type || exports.IkasProductFilterType.BRAND;
+        this.displayType = data.displayType || exports.IkasProductFilterDisplayType.BOX;
+        this.isMultiSelect = data.isMultiSelect || false;
+        this.values = data.values
+            ? data.values.map(function (v) { return new IkasApplicableProductFilterValue(v); })
+            : null;
+        this.customValues = data.customValues || null;
+        if (this.displayType === exports.IkasProductFilterDisplayType.NUMBER_RANGE_LIST &&
+            this.customValues &&
+            this.customValues.length) {
+            this.numberRangeListOptions = this.customValues.map(function (cv) {
+                return new NumberRangeListOption(__assign(__assign({ key: cv }, parseRangeStr(cv)), { isSelected: false }));
+            });
+        }
+        if (this.displayType === exports.IkasProductFilterDisplayType.NUMBER_RANGE &&
+            this.customValues &&
+            this.customValues.length) {
+            var value = this.customValues[0];
+            this.numberRangeLimit = parseRangeStr(value);
+        }
         mobx.makeAutoObservable(this);
     }
-    return IkasProductAttribute;
+    Object.defineProperty(IkasProductFilter.prototype, "isCustomValueFilter", {
+        get: function () {
+            return [
+                exports.IkasProductFilterDisplayType.NUMBER_RANGE_LIST,
+                exports.IkasProductFilterDisplayType.NUMBER_RANGE,
+            ].includes(this.displayType);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasProductFilter.prototype, "valueList", {
+        get: function () {
+            var _this = this;
+            var _a;
+            if (this.numberRange)
+                return [this.rangeToId(this.numberRange)];
+            if (this.numberRangeListOptions)
+                return this.numberRangeListOptions
+                    .filter(function (o) { return o.isSelected; })
+                    .map(function (o) { return _this.rangeToId(o); });
+            return ((_a = this.values) === null || _a === void 0 ? void 0 : _a.filter(function (v) { return v.isSelected; }).map(function (v) { return v.id; })) || [];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasProductFilter.prototype, "keyList", {
+        get: function () {
+            var _this = this;
+            var _a;
+            if (this.numberRange)
+                return [this.rangeToId(this.numberRange)];
+            if (this.numberRangeListOptions)
+                return this.numberRangeListOptions
+                    .filter(function (o) { return o.isSelected; })
+                    .map(function (o) { return _this.rangeToId(o); });
+            return ((_a = this.values) === null || _a === void 0 ? void 0 : _a.filter(function (v) { return v.isSelected; }).map(function (v) { return v.key; })) || [];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IkasProductFilter.prototype.clear = function () {
+        var _a, _b;
+        this.numberRange = null;
+        (_a = this.numberRangeListOptions) === null || _a === void 0 ? void 0 : _a.forEach(function (o) { return (o.isSelected = false); });
+        (_b = this.values) === null || _b === void 0 ? void 0 : _b.forEach(function (v) { return (v.isSelected = false); });
+    };
+    IkasProductFilter.prototype.toInput = function () {
+        return {
+            id: this.key,
+            type: this.type,
+            valueList: this.valueList,
+        };
+    };
+    IkasProductFilter.prototype.rangeToId = function (range) {
+        return range.from + ":" + (range.to || "");
+    };
+    return IkasProductFilter;
 }());
-var IkasProductAttributeType;
-(function (IkasProductAttributeType) {
-    IkasProductAttributeType["CHOICE"] = "CHOICE";
-    IkasProductAttributeType["MULTIPLE_CHOICE"] = "MULTIPLE_CHOICE";
-    IkasProductAttributeType["TEXT"] = "TEXT";
-    IkasProductAttributeType["BOOLEAN"] = "BOOLEAN";
-    IkasProductAttributeType["NUMERIC"] = "NUMERIC";
-    IkasProductAttributeType["DATETIME"] = "DATETIME";
-    IkasProductAttributeType["HTML"] = "HTML";
-})(IkasProductAttributeType || (IkasProductAttributeType = {}));
+var IkasApplicableProductFilterValue = /** @class */ (function () {
+    function IkasApplicableProductFilterValue(data) {
+        if (data === void 0) { data = {}; }
+        this.colorCode = null;
+        this.thumbnailImageId = null;
+        this.thumbnailImage = null;
+        // Extra
+        this._isSelected = false;
+        this.id = data.id || "";
+        this.key = data.key || "";
+        this.name = data.name || "";
+        this.colorCode = data.colorCode || null;
+        this.thumbnailImageId = data.thumbnailImageId || null;
+        if (this.thumbnailImageId)
+            this.thumbnailImage = new IkasImage(this.thumbnailImageId);
+        this._isSelected = data.isSelected || false;
+        mobx.makeAutoObservable(this);
+    }
+    Object.defineProperty(IkasApplicableProductFilterValue.prototype, "isSelected", {
+        get: function () {
+            return this._isSelected;
+        },
+        set: function (value) {
+            this._isSelected = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return IkasApplicableProductFilterValue;
+}());
+var IkasProductFilterValue = /** @class */ (function () {
+    function IkasProductFilterValue(data) {
+        this.id = data.id;
+        this.type = data.type;
+        this.valueList = data.valueList;
+        mobx.makeAutoObservable(this);
+    }
+    return IkasProductFilterValue;
+}());
+(function (IkasProductFilterType) {
+    IkasProductFilterType["ATTRIBUTE"] = "ATTRIBUTE";
+    IkasProductFilterType["BRAND"] = "BRAND";
+    IkasProductFilterType["DISCOUNT_RATIO"] = "DISCOUNT_RATIO";
+    IkasProductFilterType["PRICE"] = "PRICE";
+    IkasProductFilterType["STOCK_STATUS"] = "STOCK_STATUS";
+    IkasProductFilterType["TAG"] = "TAG";
+    IkasProductFilterType["VARIANT_TYPE"] = "VARIANT_TYPE";
+})(exports.IkasProductFilterType || (exports.IkasProductFilterType = {}));
+(function (IkasProductFilterDisplayType) {
+    IkasProductFilterDisplayType["BOX"] = "BOX";
+    IkasProductFilterDisplayType["DATE_RANGE"] = "DATE_RANGE";
+    IkasProductFilterDisplayType["LIST"] = "LIST";
+    IkasProductFilterDisplayType["NUMBER_RANGE_LIST"] = "NUMBER_RANGE_LIST";
+    IkasProductFilterDisplayType["NUMBER_RANGE"] = "NUMBER_RANGE";
+    IkasProductFilterDisplayType["SWATCH"] = "SWATCH";
+})(exports.IkasProductFilterDisplayType || (exports.IkasProductFilterDisplayType = {}));
+var RangeValue = /** @class */ (function () {
+    function RangeValue(data) {
+        this.from = data.from || 0;
+        this.to = data.to || null;
+        mobx.makeAutoObservable(this);
+    }
+    return RangeValue;
+}());
+var NumberRangeListOption = /** @class */ (function () {
+    function NumberRangeListOption(data) {
+        this.from = data.from || 0;
+        this.to = data.to || null;
+        this.key = data.key || "";
+        this.isSelected = data.isSelected || false;
+        mobx.makeAutoObservable(this);
+    }
+    return NumberRangeListOption;
+}());
+function parseRangeStr(rangeStr) {
+    try {
+        var parsedValues = rangeStr.split(":").map(function (i) { return parseInt(i); });
+        return new RangeValue({
+            from: isNaN(parsedValues[0]) ? 0 : parsedValues[0],
+            to: isNaN(parsedValues[1]) ? undefined : parsedValues[1],
+        });
+    }
+    catch (err) {
+        console.log(err);
+        return new RangeValue({
+            from: 0,
+            to: 0,
+        });
+    }
+}
 
 var IkasOrderTransaction = /** @class */ (function () {
     function IkasOrderTransaction(data) {
@@ -14272,111 +14486,611 @@ var IkasProductDetail = /** @class */ (function () {
     return IkasProductDetail;
 }());
 
-var IkasProductListFilter = /** @class */ (function () {
-    function IkasProductListFilter(data) {
-        if (data === void 0) { data = {}; }
-        this.category = null;
-        this.brand = null;
-        this.category = data.category || null;
-        this.brand = data.brand || null;
-        this.categories = data.categories || [];
-        this.brands = data.brands || [];
-        this.variantValues = data.variantValues || [];
-        this.attributes = data.attributes || [];
-        mobx.makeAutoObservable(this);
-    }
-    return IkasProductListFilter;
-}());
+var strictUriEncode = str => encodeURIComponent(str).replace(/[!'()*]/g, x => `%${x.charCodeAt(0).toString(16).toUpperCase()}`);
+
+var token = '%[a-f0-9]{2}';
+var singleMatcher = new RegExp(token, 'gi');
+var multiMatcher = new RegExp('(' + token + ')+', 'gi');
+
+function decodeComponents(components, split) {
+	try {
+		// Try to decode the entire string first
+		return decodeURIComponent(components.join(''));
+	} catch (err) {
+		// Do nothing
+	}
+
+	if (components.length === 1) {
+		return components;
+	}
+
+	split = split || 1;
+
+	// Split the array in 2 parts
+	var left = components.slice(0, split);
+	var right = components.slice(split);
+
+	return Array.prototype.concat.call([], decodeComponents(left), decodeComponents(right));
+}
+
+function decode(input) {
+	try {
+		return decodeURIComponent(input);
+	} catch (err) {
+		var tokens = input.match(singleMatcher);
+
+		for (var i = 1; i < tokens.length; i++) {
+			input = decodeComponents(tokens, i).join('');
+
+			tokens = input.match(singleMatcher);
+		}
+
+		return input;
+	}
+}
+
+function customDecodeURIComponent(input) {
+	// Keep track of all the replacements and prefill the map with the `BOM`
+	var replaceMap = {
+		'%FE%FF': '\uFFFD\uFFFD',
+		'%FF%FE': '\uFFFD\uFFFD'
+	};
+
+	var match = multiMatcher.exec(input);
+	while (match) {
+		try {
+			// Decode as big chunks as possible
+			replaceMap[match[0]] = decodeURIComponent(match[0]);
+		} catch (err) {
+			var result = decode(match[0]);
+
+			if (result !== match[0]) {
+				replaceMap[match[0]] = result;
+			}
+		}
+
+		match = multiMatcher.exec(input);
+	}
+
+	// Add `%C2` at the end of the map to make sure it does not replace the combinator before everything else
+	replaceMap['%C2'] = '\uFFFD';
+
+	var entries = Object.keys(replaceMap);
+
+	for (var i = 0; i < entries.length; i++) {
+		// Replace all decoded components
+		var key = entries[i];
+		input = input.replace(new RegExp(key, 'g'), replaceMap[key]);
+	}
+
+	return input;
+}
+
+var decodeUriComponent = function (encodedURI) {
+	if (typeof encodedURI !== 'string') {
+		throw new TypeError('Expected `encodedURI` to be of type `string`, got `' + typeof encodedURI + '`');
+	}
+
+	try {
+		encodedURI = encodedURI.replace(/\+/g, ' ');
+
+		// Try the built in decoder first
+		return decodeURIComponent(encodedURI);
+	} catch (err) {
+		// Fallback to a more advanced decoder
+		return customDecodeURIComponent(encodedURI);
+	}
+};
+
+var splitOnFirst = (string, separator) => {
+	if (!(typeof string === 'string' && typeof separator === 'string')) {
+		throw new TypeError('Expected the arguments to be of type `string`');
+	}
+
+	if (separator === '') {
+		return [string];
+	}
+
+	const separatorIndex = string.indexOf(separator);
+
+	if (separatorIndex === -1) {
+		return [string];
+	}
+
+	return [
+		string.slice(0, separatorIndex),
+		string.slice(separatorIndex + separator.length)
+	];
+};
+
+var queryString = createCommonjsModule(function (module, exports) {
+
+
+
+
+const isNullOrUndefined = value => value === null || value === undefined;
+
+function encoderForArrayFormat(options) {
+	switch (options.arrayFormat) {
+		case 'index':
+			return key => (result, value) => {
+				const index = result.length;
+
+				if (
+					value === undefined ||
+					(options.skipNull && value === null) ||
+					(options.skipEmptyString && value === '')
+				) {
+					return result;
+				}
+
+				if (value === null) {
+					return [...result, [encode(key, options), '[', index, ']'].join('')];
+				}
+
+				return [
+					...result,
+					[encode(key, options), '[', encode(index, options), ']=', encode(value, options)].join('')
+				];
+			};
+
+		case 'bracket':
+			return key => (result, value) => {
+				if (
+					value === undefined ||
+					(options.skipNull && value === null) ||
+					(options.skipEmptyString && value === '')
+				) {
+					return result;
+				}
+
+				if (value === null) {
+					return [...result, [encode(key, options), '[]'].join('')];
+				}
+
+				return [...result, [encode(key, options), '[]=', encode(value, options)].join('')];
+			};
+
+		case 'comma':
+		case 'separator':
+			return key => (result, value) => {
+				if (value === null || value === undefined || value.length === 0) {
+					return result;
+				}
+
+				if (result.length === 0) {
+					return [[encode(key, options), '=', encode(value, options)].join('')];
+				}
+
+				return [[result, encode(value, options)].join(options.arrayFormatSeparator)];
+			};
+
+		default:
+			return key => (result, value) => {
+				if (
+					value === undefined ||
+					(options.skipNull && value === null) ||
+					(options.skipEmptyString && value === '')
+				) {
+					return result;
+				}
+
+				if (value === null) {
+					return [...result, encode(key, options)];
+				}
+
+				return [...result, [encode(key, options), '=', encode(value, options)].join('')];
+			};
+	}
+}
+
+function parserForArrayFormat(options) {
+	let result;
+
+	switch (options.arrayFormat) {
+		case 'index':
+			return (key, value, accumulator) => {
+				result = /\[(\d*)\]$/.exec(key);
+
+				key = key.replace(/\[\d*\]$/, '');
+
+				if (!result) {
+					accumulator[key] = value;
+					return;
+				}
+
+				if (accumulator[key] === undefined) {
+					accumulator[key] = {};
+				}
+
+				accumulator[key][result[1]] = value;
+			};
+
+		case 'bracket':
+			return (key, value, accumulator) => {
+				result = /(\[\])$/.exec(key);
+				key = key.replace(/\[\]$/, '');
+
+				if (!result) {
+					accumulator[key] = value;
+					return;
+				}
+
+				if (accumulator[key] === undefined) {
+					accumulator[key] = [value];
+					return;
+				}
+
+				accumulator[key] = [].concat(accumulator[key], value);
+			};
+
+		case 'comma':
+		case 'separator':
+			return (key, value, accumulator) => {
+				const isArray = typeof value === 'string' && value.includes(options.arrayFormatSeparator);
+				const isEncodedArray = (typeof value === 'string' && !isArray && decode(value, options).includes(options.arrayFormatSeparator));
+				value = isEncodedArray ? decode(value, options) : value;
+				const newValue = isArray || isEncodedArray ? value.split(options.arrayFormatSeparator).map(item => decode(item, options)) : value === null ? value : decode(value, options);
+				accumulator[key] = newValue;
+			};
+
+		default:
+			return (key, value, accumulator) => {
+				if (accumulator[key] === undefined) {
+					accumulator[key] = value;
+					return;
+				}
+
+				accumulator[key] = [].concat(accumulator[key], value);
+			};
+	}
+}
+
+function validateArrayFormatSeparator(value) {
+	if (typeof value !== 'string' || value.length !== 1) {
+		throw new TypeError('arrayFormatSeparator must be single character string');
+	}
+}
+
+function encode(value, options) {
+	if (options.encode) {
+		return options.strict ? strictUriEncode(value) : encodeURIComponent(value);
+	}
+
+	return value;
+}
+
+function decode(value, options) {
+	if (options.decode) {
+		return decodeUriComponent(value);
+	}
+
+	return value;
+}
+
+function keysSorter(input) {
+	if (Array.isArray(input)) {
+		return input.sort();
+	}
+
+	if (typeof input === 'object') {
+		return keysSorter(Object.keys(input))
+			.sort((a, b) => Number(a) - Number(b))
+			.map(key => input[key]);
+	}
+
+	return input;
+}
+
+function removeHash(input) {
+	const hashStart = input.indexOf('#');
+	if (hashStart !== -1) {
+		input = input.slice(0, hashStart);
+	}
+
+	return input;
+}
+
+function getHash(url) {
+	let hash = '';
+	const hashStart = url.indexOf('#');
+	if (hashStart !== -1) {
+		hash = url.slice(hashStart);
+	}
+
+	return hash;
+}
+
+function extract(input) {
+	input = removeHash(input);
+	const queryStart = input.indexOf('?');
+	if (queryStart === -1) {
+		return '';
+	}
+
+	return input.slice(queryStart + 1);
+}
+
+function parseValue(value, options) {
+	if (options.parseNumbers && !Number.isNaN(Number(value)) && (typeof value === 'string' && value.trim() !== '')) {
+		value = Number(value);
+	} else if (options.parseBooleans && value !== null && (value.toLowerCase() === 'true' || value.toLowerCase() === 'false')) {
+		value = value.toLowerCase() === 'true';
+	}
+
+	return value;
+}
+
+function parse(query, options) {
+	options = Object.assign({
+		decode: true,
+		sort: true,
+		arrayFormat: 'none',
+		arrayFormatSeparator: ',',
+		parseNumbers: false,
+		parseBooleans: false
+	}, options);
+
+	validateArrayFormatSeparator(options.arrayFormatSeparator);
+
+	const formatter = parserForArrayFormat(options);
+
+	// Create an object with no prototype
+	const ret = Object.create(null);
+
+	if (typeof query !== 'string') {
+		return ret;
+	}
+
+	query = query.trim().replace(/^[?#&]/, '');
+
+	if (!query) {
+		return ret;
+	}
+
+	for (const param of query.split('&')) {
+		let [key, value] = splitOnFirst(options.decode ? param.replace(/\+/g, ' ') : param, '=');
+
+		// Missing `=` should be `null`:
+		// http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
+		value = value === undefined ? null : ['comma', 'separator'].includes(options.arrayFormat) ? value : decode(value, options);
+		formatter(decode(key, options), value, ret);
+	}
+
+	for (const key of Object.keys(ret)) {
+		const value = ret[key];
+		if (typeof value === 'object' && value !== null) {
+			for (const k of Object.keys(value)) {
+				value[k] = parseValue(value[k], options);
+			}
+		} else {
+			ret[key] = parseValue(value, options);
+		}
+	}
+
+	if (options.sort === false) {
+		return ret;
+	}
+
+	return (options.sort === true ? Object.keys(ret).sort() : Object.keys(ret).sort(options.sort)).reduce((result, key) => {
+		const value = ret[key];
+		if (Boolean(value) && typeof value === 'object' && !Array.isArray(value)) {
+			// Sort object keys, not values
+			result[key] = keysSorter(value);
+		} else {
+			result[key] = value;
+		}
+
+		return result;
+	}, Object.create(null));
+}
+
+exports.extract = extract;
+exports.parse = parse;
+
+exports.stringify = (object, options) => {
+	if (!object) {
+		return '';
+	}
+
+	options = Object.assign({
+		encode: true,
+		strict: true,
+		arrayFormat: 'none',
+		arrayFormatSeparator: ','
+	}, options);
+
+	validateArrayFormatSeparator(options.arrayFormatSeparator);
+
+	const shouldFilter = key => (
+		(options.skipNull && isNullOrUndefined(object[key])) ||
+		(options.skipEmptyString && object[key] === '')
+	);
+
+	const formatter = encoderForArrayFormat(options);
+
+	const objectCopy = {};
+
+	for (const key of Object.keys(object)) {
+		if (!shouldFilter(key)) {
+			objectCopy[key] = object[key];
+		}
+	}
+
+	const keys = Object.keys(objectCopy);
+
+	if (options.sort !== false) {
+		keys.sort(options.sort);
+	}
+
+	return keys.map(key => {
+		const value = object[key];
+
+		if (value === undefined) {
+			return '';
+		}
+
+		if (value === null) {
+			return encode(key, options);
+		}
+
+		if (Array.isArray(value)) {
+			return value
+				.reduce(formatter(key), [])
+				.join('&');
+		}
+
+		return encode(key, options) + '=' + encode(value, options);
+	}).filter(x => x.length > 0).join('&');
+};
+
+exports.parseUrl = (url, options) => {
+	options = Object.assign({
+		decode: true
+	}, options);
+
+	const [url_, hash] = splitOnFirst(url, '#');
+
+	return Object.assign(
+		{
+			url: url_.split('?')[0] || '',
+			query: parse(extract(url), options)
+		},
+		options && options.parseFragmentIdentifier && hash ? {fragmentIdentifier: decode(hash, options)} : {}
+	);
+};
+
+exports.stringifyUrl = (object, options) => {
+	options = Object.assign({
+		encode: true,
+		strict: true
+	}, options);
+
+	const url = removeHash(object.url).split('?')[0] || '';
+	const queryFromUrl = exports.extract(object.url);
+	const parsedQueryFromUrl = exports.parse(queryFromUrl, {sort: false});
+
+	const query = Object.assign(parsedQueryFromUrl, object.query);
+	let queryString = exports.stringify(query, options);
+	if (queryString) {
+		queryString = `?${queryString}`;
+	}
+
+	let hash = getHash(object.url);
+	if (object.fragmentIdentifier) {
+		hash = `#${encode(object.fragmentIdentifier, options)}`;
+	}
+
+	return `${url}${queryString}${hash}`;
+};
+});
 
 var IkasProductList = /** @class */ (function () {
-    function IkasProductList(data) {
+    function IkasProductList(data, router) {
         var _this = this;
+        this.filters = null;
         this._initialized = false;
         this._minPage = null;
-        // Used for ProducListType.ALL
-        this._filters = null;
-        // Used for recommending products for a specific product
+        this._filterBrandId = null;
+        this._filterCategoryId = null;
         this._recommendFor = null; // productId
         this._isLoading = false;
-        this.getInitial = function () { return __awaiter(_this, void 0, void 0, function () {
-            var page, limit, response_1, data_1, err_1;
-            var _this = this;
-            var _a, _b, _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
+        this._fetchRequestTime = 0;
+        this.router = null;
+        this.applyFilters = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, this.getInitial()];
+                    case 1:
+                        _c.sent();
+                        // Change url params
+                        if (this.isBrowser()) {
+                            if (this.isFiltered) {
+                                (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(location.pathname + "?" + this.filterQueryParams, undefined, { shallow: true });
+                            }
+                            else {
+                                (_b = this.router) === null || _b === void 0 ? void 0 : _b.replace("" + location.pathname, undefined, {
+                                    shallow: true,
+                                });
+                            }
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.getInitial = function (queryParams) { return __awaiter(_this, void 0, void 0, function () {
+            var fetchRequestTime, page, limit, response_1, data, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        if (this._isLoading)
-                            return [2 /*return*/];
                         this._isLoading = true;
-                        _d.label = 1;
+                        fetchRequestTime = Date.now();
+                        this._fetchRequestTime = fetchRequestTime;
+                        _a.label = 1;
                     case 1:
-                        _d.trys.push([1, 3, 4, 5]);
-                        page = this._page;
+                        _a.trys.push([1, 5, 6, 7]);
+                        page = 1;
                         limit = this._limit;
+                        if (!(this.isFilterable && !this.filters)) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.getFilters()];
+                    case 2:
+                        _a.sent();
+                        _a.label = 3;
+                    case 3:
+                        this.applyQueryParamFilters(queryParams);
                         if (this.isStatic) {
                             page = undefined;
                             limit = undefined;
                         }
                         else if (this.isDiscounted) {
-                            // TODO use filter
                             page = 1;
                             limit = 10;
                         }
                         else if (this.isRecommended) {
-                            // TODO use filter
                             page = 1;
                             limit = 10;
                         }
-                        return [4 /*yield*/, IkasProductAPI.listProducts({
-                                idList: this.isStatic
-                                    ? (_a = this._productListPropValue.productIds) === null || _a === void 0 ? void 0 : _a.map(function (p) { return p.productId; }) : undefined,
-                                page: page,
-                                limit: limit,
-                                brandId: ((_b = this._filters) === null || _b === void 0 ? void 0 : _b.brand) ? this._filters.brand : undefined,
-                                categoryIds: ((_c = this._filters) === null || _c === void 0 ? void 0 : _c.category) ? [this._filters.category]
-                                    : undefined,
-                            })];
-                    case 2:
-                        response_1 = _d.sent();
-                        data_1 = [];
+                        return [4 /*yield*/, this.searchProducts(page || 1, limit || 10)];
+                    case 4:
+                        response_1 = _a.sent();
+                        if (!response_1 || this._fetchRequestTime !== fetchRequestTime)
+                            return [2 /*return*/];
+                        data = [];
                         if (this.isStatic) {
-                            data_1 = this._productListPropValue.productIds.map(function (pID) {
-                                var product = response_1.products.find(function (p) { return p.id === pID.productId; });
+                            data = this._productListPropValue.productIds.map(function (pID) {
+                                var product = response_1.data.find(function (p) { return p.id === pID.productId; });
                                 var variant = product === null || product === void 0 ? void 0 : product.variants.find(function (v) { return v.id === pID.variantId; });
                                 return new IkasProductDetail(product, variant.variantValues);
                             });
                         }
                         else {
-                            data_1 = response_1.products.map(function (product, index) {
+                            data = response_1.data.map(function (product) {
                                 return new IkasProductDetail(product, product.variants[0].variantValues);
                             });
                         }
-                        mobx.runInAction(function () {
-                            _this.data = data_1;
-                            _this._count = response_1.count;
-                            _this._initialized = true;
-                            _this._minPage = _this.page;
-                        });
-                        return [3 /*break*/, 5];
-                    case 3:
-                        err_1 = _d.sent();
+                        this.data = data;
+                        this._count = response_1.count;
+                        this._initialized = true;
+                        this._page = page || 1;
+                        this._minPage = this.page;
+                        return [3 /*break*/, 7];
+                    case 5:
+                        err_1 = _a.sent();
                         console.log(err_1);
-                        return [3 /*break*/, 5];
-                    case 4:
-                        mobx.runInAction(function () {
-                            _this._isLoading = false;
-                        });
+                        return [3 /*break*/, 7];
+                    case 6:
+                        if (fetchRequestTime === this._fetchRequestTime)
+                            this._isLoading = false;
                         return [7 /*endfinally*/];
-                    case 5: return [2 /*return*/];
+                    case 7: return [2 /*return*/];
                 }
             });
         }); };
         this.getPrev = function () { return __awaiter(_this, void 0, void 0, function () {
-            var minPage_1, response_2, data_2, err_2;
-            var _this = this;
-            var _a, _b, _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
+            var minPage, response, data, err_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
                         if (this.isStatic ||
                             this.isDiscounted ||
@@ -14385,49 +15099,37 @@ var IkasProductList = /** @class */ (function () {
                             !this.hasPrev)
                             return [2 /*return*/];
                         this._isLoading = true;
-                        _d.label = 1;
+                        _a.label = 1;
                     case 1:
-                        _d.trys.push([1, 3, 4, 5]);
-                        minPage_1 = this._minPage - 1;
-                        return [4 /*yield*/, IkasProductAPI.listProducts({
-                                idList: this.isStatic
-                                    ? (_a = this._productListPropValue.productIds) === null || _a === void 0 ? void 0 : _a.map(function (p) { return p.productId; }) : undefined,
-                                page: minPage_1,
-                                limit: this._limit,
-                                brandId: ((_b = this._filters) === null || _b === void 0 ? void 0 : _b.brand) ? this._filters.brand : undefined,
-                                categoryIds: ((_c = this._filters) === null || _c === void 0 ? void 0 : _c.category) ? [this._filters.category]
-                                    : undefined,
-                            })];
+                        _a.trys.push([1, 3, 4, 5]);
+                        minPage = this._minPage - 1;
+                        return [4 /*yield*/, this.searchProducts(minPage, this.limit)];
                     case 2:
-                        response_2 = _d.sent();
-                        data_2 = response_2.products.map(function (product) {
+                        response = _a.sent();
+                        if (!response)
+                            return [2 /*return*/];
+                        data = response.data.map(function (product) {
                             return new IkasProductDetail(product, product.variants[0].variantValues);
                         });
-                        mobx.runInAction(function () {
-                            _this.data = data_2.concat(_this.data);
-                            _this._count = response_2.count;
-                            _this._minPage = minPage_1;
-                        });
+                        this.data = data.concat(this.data);
+                        this._count = response.count;
+                        this._minPage = minPage;
                         return [3 /*break*/, 5];
                     case 3:
-                        err_2 = _d.sent();
+                        err_2 = _a.sent();
                         console.log(err_2);
                         return [3 /*break*/, 5];
                     case 4:
-                        mobx.runInAction(function () {
-                            _this._isLoading = false;
-                        });
+                        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, data_3, err_3;
-            var _this = this;
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var response, data, err_3;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
                         if (this.isStatic ||
                             this.isDiscounted ||
@@ -14436,46 +15138,36 @@ var IkasProductList = /** @class */ (function () {
                             !this.hasNext)
                             return [2 /*return*/];
                         this._isLoading = true;
-                        _c.label = 1;
+                        _a.label = 1;
                     case 1:
-                        _c.trys.push([1, 3, 4, 5]);
-                        return [4 /*yield*/, IkasProductAPI.listProducts({
-                                page: this.page + 1,
-                                limit: this.limit,
-                                brandId: ((_a = this._filters) === null || _a === void 0 ? void 0 : _a.brand) ? this._filters.brand : undefined,
-                                categoryIds: ((_b = this._filters) === null || _b === void 0 ? void 0 : _b.category) ? [this._filters.category]
-                                    : undefined,
-                            })];
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, this.searchProducts(this.page + 1, this.limit)];
                     case 2:
-                        response_3 = _c.sent();
-                        data_3 = response_3.products.map(function (product) {
+                        response = _a.sent();
+                        if (!response)
+                            return [2 /*return*/];
+                        data = response.data.map(function (product) {
                             return new IkasProductDetail(product, product.variants[0].variantValues);
                         });
-                        mobx.runInAction(function () {
-                            _this.data = _this.data.concat(data_3);
-                            _this._count = response_3.count;
-                            _this._page = _this.page + 1;
-                        });
+                        this.data = this.data.concat(data);
+                        this._count = response.count;
+                        this._page = this.page + 1;
                         return [3 /*break*/, 5];
                     case 3:
-                        err_3 = _c.sent();
+                        err_3 = _a.sent();
                         console.log(err_3);
                         return [3 /*break*/, 5];
                     case 4:
-                        mobx.runInAction(function () {
-                            _this._isLoading = false;
-                        });
+                        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, data_4, err_4;
-            var _this = this;
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var response, data, err_4;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
                         if (this._isLoading ||
                             this.isStatic ||
@@ -14483,36 +15175,28 @@ var IkasProductList = /** @class */ (function () {
                             this.isRecommended)
                             return [2 /*return*/];
                         this._isLoading = true;
-                        _c.label = 1;
+                        _a.label = 1;
                     case 1:
-                        _c.trys.push([1, 3, 4, 5]);
-                        return [4 /*yield*/, IkasProductAPI.listProducts({
-                                page: this.page + 1,
-                                limit: this.limit,
-                                brandId: ((_a = this._filters) === null || _a === void 0 ? void 0 : _a.brand) ? this._filters.brand : undefined,
-                                categoryIds: ((_b = this._filters) === null || _b === void 0 ? void 0 : _b.category) ? [this._filters.category]
-                                    : undefined,
-                            })];
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, this.searchProducts(page, this.limit)];
                     case 2:
-                        response_4 = _c.sent();
-                        data_4 = response_4.products.map(function (product) {
+                        response = _a.sent();
+                        if (!response)
+                            return [2 /*return*/];
+                        data = response.data.map(function (product) {
                             return new IkasProductDetail(product, product.variants[0].variantValues);
                         });
-                        mobx.runInAction(function () {
-                            _this.data = data_4;
-                            _this._count = response_4.count;
-                            _this._page = page;
-                            _this._minPage = page;
-                        });
+                        this.data = data;
+                        this._count = response.count;
+                        this._page = page;
+                        this._minPage = page;
                         return [3 /*break*/, 5];
                     case 3:
-                        err_4 = _c.sent();
+                        err_4 = _a.sent();
                         console.log(err_4);
                         return [3 /*break*/, 5];
                     case 4:
-                        mobx.runInAction(function () {
-                            _this._isLoading = false;
-                        });
+                        this._isLoading = false;
                         return [7 /*endfinally*/];
                     case 5: return [2 /*return*/];
                 }
@@ -14532,12 +15216,21 @@ var IkasProductList = /** @class */ (function () {
         this._limit = data.limit || data.productListPropValue.initialLimit || 20;
         this._page = data.page || 1;
         this._count = data.count || 0;
+        this._searchKeyword = data.searchKeyword || "";
         this._productListPropValue = data.productListPropValue;
-        this._filters = data.filters
-            ? new IkasProductListFilter(data.filters)
-            : undefined;
+        this._filterBrandId = data.filterBrandId || null;
+        this._filterCategoryId = data.filterCategoryId || null;
         this._recommendFor = data.recommendFor;
+        this.filters = data.filters
+            ? data.filters.map(function (f) { return new IkasProductFilter(f); })
+            : null;
+        this.router = router;
         mobx.makeAutoObservable(this);
+        console.log("constructor");
+        if (this.isBrowser() && location.search) {
+            var queryParams = this.getQueryParams();
+            this.getInitial(queryParams);
+        }
     }
     Object.defineProperty(IkasProductList.prototype, "sort", {
         get: function () {
@@ -14567,6 +15260,16 @@ var IkasProductList = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IkasProductList.prototype, "searchKeyword", {
+        get: function () {
+            return this._searchKeyword;
+        },
+        set: function (value) {
+            this._searchKeyword = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IkasProductList.prototype, "isInitialized", {
         get: function () {
             return this._initialized;
@@ -14574,6 +15277,22 @@ var IkasProductList = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IkasProductList.prototype, "isFilterable", {
+        get: function () {
+            return (this._type === exports.IkasProductListType.ALL ||
+                this._type === exports.IkasProductListType.CATEGORY);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IkasProductList.prototype, "isFiltered", {
+        get: function () {
+            var _a;
+            return (_a = this.filters) === null || _a === void 0 ? void 0 : _a.some(function (f) { return !!f.valueList.length; });
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IkasProductList.prototype, "isStatic", {
         get: function () {
             return this._type === exports.IkasProductListType.STATIC;
@@ -14623,8 +15342,111 @@ var IkasProductList = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    IkasProductList.prototype.applyFilters = function () {
-        return;
+    Object.defineProperty(IkasProductList.prototype, "filterQueryParams", {
+        get: function () {
+            var _a;
+            var queryParams = {};
+            (_a = this.filters) === null || _a === void 0 ? void 0 : _a.forEach(function (f) {
+                queryParams[f.key] = f.keyList;
+            });
+            return queryString.stringify(queryParams, { arrayFormat: "comma" });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IkasProductList.prototype.searchProducts = function (page, limit) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var filterList;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        filterList = [];
+                        if (this._filterBrandId) {
+                            filterList.push(new IkasProductFilterValue({
+                                id: this._filterBrandId,
+                                type: exports.IkasProductFilterType.BRAND,
+                                valueList: [this._filterBrandId],
+                            }));
+                        }
+                        (_a = this.filters) === null || _a === void 0 ? void 0 : _a.forEach(function (filter) {
+                            if (filter.valueList.length) {
+                                filterList.push(new IkasProductFilterValue({
+                                    id: filter.id,
+                                    type: filter.type,
+                                    valueList: filter.valueList,
+                                }));
+                            }
+                        });
+                        return [4 /*yield*/, IkasProductSearchAPI.searchProducts({
+                                page: page,
+                                perPage: limit,
+                                productIdList: this.isStatic
+                                    ? (_b = this._productListPropValue.productIds) === null || _b === void 0 ? void 0 : _b.map(function (p) { return p.productId; }) : undefined,
+                                filterList: filterList,
+                                categoryIdList: this._filterCategoryId
+                                    ? [this._filterCategoryId]
+                                    : undefined,
+                                query: this._searchKeyword,
+                            })];
+                    case 1: return [2 /*return*/, _c.sent()];
+                }
+            });
+        });
+    };
+    IkasProductList.prototype.clear = function () {
+        var _a;
+        (_a = this.filters) === null || _a === void 0 ? void 0 : _a.forEach(function (filter) { return filter.clear(); });
+        this._searchKeyword = "";
+    };
+    IkasProductList.prototype.getFilters = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this;
+                        return [4 /*yield*/, IkasProductSearchAPI.getProductFilterData()];
+                    case 1:
+                        _a.filters = _b.sent();
+                        // this._filterCategoryId ? [this._filterCategoryId] : undefined
+                        if (this.filters)
+                            this.filters.sort(function (f1, f2) { return (f1.order > f2.order ? 1 : -1); });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    IkasProductList.prototype.applyQueryParamFilters = function (queryParams) {
+        var _this = this;
+        try {
+            queryParams === null || queryParams === void 0 ? void 0 : queryParams.forEach(function (value, key) {
+                var _a, _b, _c;
+                var filter = (_a = _this.filters) === null || _a === void 0 ? void 0 : _a.find(function (f) { return f.key === key; });
+                var valueKeys = value.split(",");
+                if (filter) {
+                    if (filter.displayType === exports.IkasProductFilterDisplayType.NUMBER_RANGE) {
+                        filter.numberRange = new RangeValue(parseRangeStr(value));
+                    }
+                    else if (filter.displayType ===
+                        exports.IkasProductFilterDisplayType.NUMBER_RANGE_LIST) {
+                        (_b = filter.numberRangeListOptions) === null || _b === void 0 ? void 0 : _b.forEach(function (o) {
+                            if (valueKeys.includes(o.key))
+                                o.isSelected = true;
+                        });
+                    }
+                    else {
+                        (_c = filter.values) === null || _c === void 0 ? void 0 : _c.forEach(function (filterValue) {
+                            if (valueKeys.includes(filterValue.key))
+                                filterValue.isSelected = true;
+                        });
+                    }
+                }
+            });
+        }
+        catch (err) {
+            console.log(err);
+        }
     };
     IkasProductList.prototype.toJSON = function () {
         return {
@@ -14634,13 +15456,24 @@ var IkasProductList = /** @class */ (function () {
             limit: this._limit,
             page: this._page,
             count: this._count,
+            searchKeyword: this._searchKeyword,
             initialized: this._initialized,
             minPage: this._minPage,
-            filters: this._filters,
+            pageBrandId: this._filterBrandId,
+            pageCategoryId: this._filterCategoryId,
+            filters: this.filters,
             recommendFor: this._recommendFor,
             productListPropValue: this._productListPropValue,
         };
     };
+    IkasProductList.prototype.getQueryParams = function () {
+        if (!this.isBrowser())
+            return;
+        return new URLSearchParams(location.search);
+    };
+    IkasProductList.prototype.isBrowser = function () {
+        return typeof window !== "undefined";
+    };
     return IkasProductList;
 }());
 (function (IkasProductListType) {
@@ -19435,6 +20268,8 @@ var AddressForm = /** @class */ (function () {
         this.store = props.store;
         this.validator = new Validator(this.address, this.validatorRules());
         this.listCountries();
+        if (this.address.state)
+            this.listStates();
         if (this.address.country)
             this.listCities();
         if (this.address.city)
@@ -21889,7 +22724,7 @@ var IkasVariantTypeAPI = /** @class */ (function () {
                                             id: vv.id,
                                             name: vv.name,
                                             colorCode: vv.colorCode,
-                                            thumbnilImageId: vv.thumbnailImageId,
+                                            thumbnailImageId: vv.thumbnailImageId,
                                             variantTypeId: vt.id,
                                         });
                                     }),
@@ -22147,6 +22982,220 @@ var IkasProductAPI = /** @class */ (function () {
 }());
 var templateObject_1$d;
 
+var IkasProductSearchAPI = /** @class */ (function () {
+    function IkasProductSearchAPI() {
+    }
+    IkasProductSearchAPI.searchProducts = function (input) {
+        return __awaiter(this, void 0, void 0, function () {
+            var SEARCH_PRODUCTS, _a, data, errors, err_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        SEARCH_PRODUCTS = src(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n        query searchProducts($input: SearchInput!) {\n          searchProducts(input: $input) {\n            count\n            data\n            facets {\n              id\n              values {\n                count\n                id\n              }\n            }\n            limit\n            page\n            totalCount\n          }\n        }\n      "], ["\n        query searchProducts($input: SearchInput!) {\n          searchProducts(input: $input) {\n            count\n            data\n            facets {\n              id\n              values {\n                count\n                id\n              }\n            }\n            limit\n            page\n            totalCount\n          }\n        }\n      "])));
+                        return [4 /*yield*/, apollo
+                                .getClient()
+                                .query({
+                                query: SEARCH_PRODUCTS,
+                                variables: {
+                                    input: input,
+                                },
+                            })];
+                    case 1:
+                        _a = _b.sent(), data = _a.data, errors = _a.errors;
+                        if (errors && errors.length) {
+                            console.log(errors);
+                            return [2 /*return*/];
+                        }
+                        return [2 /*return*/, __assign(__assign({}, data.searchProducts), { data: data.searchProducts.data.map(function (d) {
+                                    return simpleToProduct(d);
+                                }) })];
+                    case 2:
+                        err_1 = _b.sent();
+                        console.log(err_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    IkasProductSearchAPI.getProductFilterData = function (categoryIds) {
+        return __awaiter(this, void 0, void 0, function () {
+            var QUERY, _a, data, errors, err_2;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        QUERY = src(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n        query getProductFilterData($categoryIds: [String!]) {\n          getProductFilterData(categoryIds: $categoryIds) {\n            customValues\n            displayType\n            id\n            isMultiSelect\n            key\n            name\n            order\n            type\n            values {\n              colorCode\n              id\n              key\n              name\n              thumbnailImageId\n            }\n          }\n        }\n      "], ["\n        query getProductFilterData($categoryIds: [String!]) {\n          getProductFilterData(categoryIds: $categoryIds) {\n            customValues\n            displayType\n            id\n            isMultiSelect\n            key\n            name\n            order\n            type\n            values {\n              colorCode\n              id\n              key\n              name\n              thumbnailImageId\n            }\n          }\n        }\n      "])));
+                        return [4 /*yield*/, apollo
+                                .getClient()
+                                .query({
+                                query: QUERY,
+                                variables: {
+                                    categoryIds: categoryIds || null,
+                                },
+                            })];
+                    case 1:
+                        _a = _b.sent(), data = _a.data, errors = _a.errors;
+                        if (errors && errors.length) {
+                            console.log(errors);
+                            return [2 /*return*/];
+                        }
+                        return [2 /*return*/, data.getProductFilterData.map(function (d) {
+                                var _a;
+                                return new IkasProductFilter(__assign(__assign({}, d), { displayType: d.displayType, type: d.type, values: (_a = d.values) === null || _a === void 0 ? void 0 : _a.map(function (v) { return new IkasApplicableProductFilterValue(v); }) }));
+                            })];
+                    case 2:
+                        err_2 = _b.sent();
+                        console.log(err_2);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return IkasProductSearchAPI;
+}());
+function simpleToProduct(simple) {
+    var _a, _b, _c, _d, _e;
+    return new IkasProduct({
+        id: simple.id,
+        attributes: (_a = simple.attributes) === null || _a === void 0 ? void 0 : _a.map(function (a) {
+            var _a, _b, _c, _d, _e;
+            return new IkasProductAttributeValue({
+                value: a.value,
+                productAttributeId: (_a = a.productAttribute) === null || _a === void 0 ? void 0 : _a.id,
+                productAttributeOptionId: (_b = a.productAttributeOption) === null || _b === void 0 ? void 0 : _b.id,
+                productAttribute: new IkasProductAttribute({
+                    id: (_c = a.productAttribute) === null || _c === void 0 ? void 0 : _c.id,
+                    name: (_d = a.productAttribute) === null || _d === void 0 ? void 0 : _d.name,
+                    type: (_e = a.productAttribute) === null || _e === void 0 ? void 0 : _e.type,
+                }),
+                productAttributeOption: a.productAttributeOption,
+            });
+        }),
+        brand: new IkasBrand({
+            id: (_b = simple.brand) === null || _b === void 0 ? void 0 : _b.id,
+            name: (_c = simple.brand) === null || _c === void 0 ? void 0 : _c.name,
+            metaData: new IkasHTMLMetaData({
+                slug: ((_d = simple.brand) === null || _d === void 0 ? void 0 : _d.slug) || "",
+            }),
+        }),
+        categories: (_e = simple.categories) === null || _e === void 0 ? void 0 : _e.map(function (c) {
+            return new IkasCategory({
+                id: c.id,
+                name: c.name,
+                path: c.path,
+                metaData: new IkasHTMLMetaData({
+                    slug: c.slug || "",
+                }),
+            });
+        }),
+        description: simple.description || undefined,
+        metaData: new IkasHTMLMetaData(simple.metaData || undefined),
+        name: simple.name,
+        shortDescription: simple.shortDescription || undefined,
+        taxValue: simple.taxValue || undefined,
+        type: simple.type || undefined,
+        variantTypes: simple.productVariantTypes.map(function (pvt) {
+            return new IkasProductVariantType({
+                variantType: new IkasVariantType({
+                    id: pvt.variantType.id,
+                    name: pvt.variantType.name,
+                    selectionType: pvt.variantType.selectionType,
+                    values: pvt.variantType.values
+                        .map(function (v) {
+                        return new IkasVariantValue({
+                            id: v.id,
+                            colorCode: v.colorCode,
+                            name: v.name,
+                            thumbnailImageId: v.thumbnailImageId,
+                            variantTypeId: pvt.variantType.id,
+                        });
+                    })
+                        .filter(function (v) { return pvt.variantValueIds.includes(v.id); }),
+                }),
+                variantValueIds: pvt.variantValueIds,
+            });
+        }),
+        variants: simple.variants.map(function (v) {
+            var _a, _b, _c, _d;
+            return new IkasProductVariant({
+                id: v.id,
+                attributes: (_a = v.attributes) === null || _a === void 0 ? void 0 : _a.map(function (a) {
+                    var _a, _b, _c, _d, _e;
+                    return new IkasProductAttributeValue({
+                        value: a.value,
+                        productAttributeId: (_a = a.productAttribute) === null || _a === void 0 ? void 0 : _a.id,
+                        productAttributeOptionId: (_b = a.productAttributeOption) === null || _b === void 0 ? void 0 : _b.id,
+                        productAttribute: new IkasProductAttribute({
+                            id: (_c = a.productAttribute) === null || _c === void 0 ? void 0 : _c.id,
+                            name: (_d = a.productAttribute) === null || _d === void 0 ? void 0 : _d.name,
+                            type: (_e = a.productAttribute) === null || _e === void 0 ? void 0 : _e.type,
+                        }),
+                        productAttributeOption: a.productAttributeOption,
+                    });
+                }),
+                sku: v.sku,
+                barcodeList: v.barcodeList || undefined,
+                images: (_b = v.images) === null || _b === void 0 ? void 0 : _b.map(function (i) { return new IkasImage(i.id); }),
+                price: new IkasProductPrice((_c = v.prices) === null || _c === void 0 ? void 0 : _c.find(function (p) { return p.priceListId === null; })),
+                stock: v.stocks.length ? v.stocks[0].stockCount : 0,
+                variantValues: (_d = v.variantValues) === null || _d === void 0 ? void 0 : _d.map(function (vv) {
+                    var _a;
+                    var variantValue = (_a = simple.productVariantTypes
+                        .find(function (pvt) { return pvt.variantType.id === vv.variantTypeId; })) === null || _a === void 0 ? void 0 : _a.variantType.values.find(function (_vv) { return _vv.id === vv.variantValueId; });
+                    return new IkasVariantValue({
+                        id: vv.variantValueId,
+                        name: variantValue === null || variantValue === void 0 ? void 0 : variantValue.name,
+                        colorCode: variantValue === null || variantValue === void 0 ? void 0 : variantValue.colorCode,
+                        thumbnailImageId: variantValue === null || variantValue === void 0 ? void 0 : variantValue.thumbnailImageId,
+                    });
+                }),
+            });
+        }),
+    });
+}
+var templateObject_1$e, templateObject_2$4;
+// type SearchInput = {
+//   categoryIdList: string[] | null;
+//   filterList: SearchInputFilter[] | null;
+//   order: SearchInputOrder[] | null;
+//   page: number | null;
+//   perPage: number | null;
+//   priceListId: string | null;
+//   productId: string | null;
+//   query: string | null;
+//   slug: string | null;
+// };
+// type SearchInputFilter = {
+//   id: string;
+//   type: ProductFilterType;
+//   valueList: string[];
+// };
+// export type SearchInputOrder = {
+//   direction: SortByDirection;
+//   type: SortByType;
+// };
+// enum SortByDirection {
+//   ASC = "ASC",
+//   DESC = "DESC",
+// }
+// enum SortByType {
+//   CREATED_AT = "CREATED_AT",
+//   DISCOUNT_RATIO = "DISCOUNT_RATIO",
+//   PRICE = "PRICE",
+// }
+// export enum ProductFilterType {
+//   ATTRIBUTE = "ATTRIBUTE",
+//   BRAND = "BRAND",
+//   DISCOUNT_RATIO = "DISCOUNT_RATIO",
+//   PRICE = "PRICE",
+//   STOCK_STATUS = "STOCK_STATUS",
+//   TAG = "TAG",
+//   VARIANT_TYPE = "VARIANT_TYPE",
+// }
+
 var IkasProductAttributeAPI = /** @class */ (function () {
     function IkasProductAttributeAPI() {
     }
@@ -22156,7 +23205,7 @@ var IkasProductAttributeAPI = /** @class */ (function () {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        LIST_PRODUCT_ATTRIBUTES = src(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n      query listProductAttribute($id: StringFilterInput!) {\n        listProductAttribute(id: $id) {\n          id\n          createdAt\n          updatedAt\n          deleted\n          name\n          description\n          type\n          options {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n          }\n        }\n      }\n    "], ["\n      query listProductAttribute($id: StringFilterInput!) {\n        listProductAttribute(id: $id) {\n          id\n          createdAt\n          updatedAt\n          deleted\n          name\n          description\n          type\n          options {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n          }\n        }\n      }\n    "])));
+                        LIST_PRODUCT_ATTRIBUTES = src(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n      query listProductAttribute($id: StringFilterInput!) {\n        listProductAttribute(id: $id) {\n          id\n          createdAt\n          updatedAt\n          deleted\n          name\n          description\n          type\n          options {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n          }\n        }\n      }\n    "], ["\n      query listProductAttribute($id: StringFilterInput!) {\n        listProductAttribute(id: $id) {\n          id\n          createdAt\n          updatedAt\n          deleted\n          name\n          description\n          type\n          options {\n            id\n            createdAt\n            updatedAt\n            deleted\n            name\n          }\n        }\n      }\n    "])));
                         _b.label = 1;
                     case 1:
                         _b.trys.push([1, 3, , 4]);
@@ -22189,7 +23238,7 @@ var IkasProductAttributeAPI = /** @class */ (function () {
     };
     return IkasProductAttributeAPI;
 }());
-var templateObject_1$e;
+var templateObject_1$f;
 
 var IkasStateAPI = /** @class */ (function () {
     function IkasStateAPI() {
@@ -22200,7 +23249,7 @@ var IkasStateAPI = /** @class */ (function () {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        QUERY = src(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n      query listState($countryId: StringFilterInput!) {\n        listState(countryId: $countryId) {\n          id\n          name\n          stateCode\n        }\n      }\n    "], ["\n      query listState($countryId: StringFilterInput!) {\n        listState(countryId: $countryId) {\n          id\n          name\n          stateCode\n        }\n      }\n    "])));
+                        QUERY = src(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n      query listState($countryId: StringFilterInput!) {\n        listState(countryId: $countryId) {\n          id\n          name\n          stateCode\n        }\n      }\n    "], ["\n      query listState($countryId: StringFilterInput!) {\n        listState(countryId: $countryId) {\n          id\n          name\n          stateCode\n        }\n      }\n    "])));
                         _b.label = 1;
                     case 1:
                         _b.trys.push([1, 3, , 4]);
@@ -22237,7 +23286,7 @@ var IkasStateAPI = /** @class */ (function () {
     };
     return IkasStateAPI;
 }());
-var templateObject_1$f;
+var templateObject_1$g;
 
 var IkasStorefrontDomain = /** @class */ (function () {
     function IkasStorefrontDomain(data) {
@@ -22330,7 +23379,7 @@ var IkasStorefrontAPI = /** @class */ (function () {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        QUERY = src(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n      query getStorefront($storefrontId: String!) {\n        getStorefront(id: $storefrontId) {\n          id\n          name\n          themeId\n          themeVersionId\n          userId\n          # domains {\n          #   id\n          #   merchantDomainId\n          #   name\n          #   redirectDomainName\n          # }\n          regions {\n            id\n            locale\n            # themeJSON\n            privacyPolicy\n            returnPolicy\n            termsOfService\n          }\n        }\n      }\n    "], ["\n      query getStorefront($storefrontId: String!) {\n        getStorefront(id: $storefrontId) {\n          id\n          name\n          themeId\n          themeVersionId\n          userId\n          # domains {\n          #   id\n          #   merchantDomainId\n          #   name\n          #   redirectDomainName\n          # }\n          regions {\n            id\n            locale\n            # themeJSON\n            privacyPolicy\n            returnPolicy\n            termsOfService\n          }\n        }\n      }\n    "])));
+                        QUERY = src(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n      query getStorefront($storefrontId: String!) {\n        getStorefront(id: $storefrontId) {\n          id\n          name\n          themeId\n          themeVersionId\n          userId\n          # domains {\n          #   id\n          #   merchantDomainId\n          #   name\n          #   redirectDomainName\n          # }\n          regions {\n            id\n            locale\n            # themeJSON\n            privacyPolicy\n            returnPolicy\n            termsOfService\n          }\n        }\n      }\n    "], ["\n      query getStorefront($storefrontId: String!) {\n        getStorefront(id: $storefrontId) {\n          id\n          name\n          themeId\n          themeVersionId\n          userId\n          # domains {\n          #   id\n          #   merchantDomainId\n          #   name\n          #   redirectDomainName\n          # }\n          regions {\n            id\n            locale\n            # themeJSON\n            privacyPolicy\n            returnPolicy\n            termsOfService\n          }\n        }\n      }\n    "])));
                         _b.label = 1;
                     case 1:
                         _b.trys.push([1, 3, , 4]);
@@ -22360,7 +23409,7 @@ var IkasStorefrontAPI = /** @class */ (function () {
     };
     return IkasStorefrontAPI;
 }());
-var templateObject_1$g;
+var templateObject_1$h;
 
 var IkasThemeAPI = /** @class */ (function () {
     function IkasThemeAPI() {
@@ -22779,6 +23828,7 @@ var CheckoutViewModel = /** @class */ (function () {
                         lines = this.cart.items.map(function (i) { return ({
                             quantity: i.quantity,
                             variantId: i.variant.id,
+                            productId: i.variant.productId,
                         }); });
                         return [4 /*yield*/, IkasCheckoutAPI.checkStocks(lines)];
                     case 1:
@@ -24984,9 +26034,63 @@ var PolicyModal = mobxReactLite.observer(function (_a) {
 });
 
 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);
@@ -24994,7 +26098,15 @@ var IkasPageHead = mobxReactLite.observer(function (_a) {
         schemas.push(storeSchema);
     }
     if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.PRODUCT) {
-        var schema = createProductSchema(pageSpecificDataStr);
+        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);
     }
@@ -25011,12 +26123,15 @@ var IkasPageHead = mobxReactLite.observer(function (_a) {
     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(merchantSettings) {
+function createWebsiteSchema() {
     var _a;
     var hostname = "";
     if (typeof window !== "undefined") {
@@ -25042,11 +26157,9 @@ function createStoreSchema(merchantSettings) {
         url: "https://" + hostname,
     };
 }
-function createProductSchema(pageSpecificDataStr) {
+function createProductSchema(productDetail) {
     var _a;
     try {
-        var productDetailParsed = JSON.parse(pageSpecificDataStr);
-        var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
         var isBrowser = typeof window !== "undefined";
         if (isBrowser) {
             var urlParams = new URLSearchParams(window.location.search);
@@ -25288,7 +26401,7 @@ var ThemeComponent = mobxReactLite.observer(function (_a) {
 
 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;
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, addOgpMetas = _a.addOgpMetas;
     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 }));
@@ -25301,7 +26414,7 @@ var IkasPage = mobxReactLite.observer(function (_a) {
     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 }),
+        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),
@@ -25563,7 +26676,7 @@ var PageViewModel = /** @class */ (function () {
                 _this.theme.components[index] = new IkasThemeComponent(data.component);
         };
         this.handleAddNewPageComponent = function (data) { return __awaiter(_this, void 0, void 0, function () {
-            var pageComponent, pageComponentPropValue;
+            var pageComponent, pageComponentPropValues;
             var _this = this;
             var _a;
             return __generator(this, function (_b) {
@@ -25574,10 +26687,14 @@ var PageViewModel = /** @class */ (function () {
                             return [2 /*return*/];
                         return [4 /*yield*/, this.pageDataProvider.getPageComponentPropValues(pageComponent)];
                     case 1:
-                        pageComponentPropValue = _b.sent();
+                        pageComponentPropValues = _b.sent();
                         mobx.runInAction(function () {
                             var _a;
-                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValue);
+                            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);
+                            });
+                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValues);
                             (_a = _this.page) === null || _a === void 0 ? void 0 : _a.components.push(pageComponent);
                         });
                         return [2 /*return*/];
@@ -25746,6 +26863,10 @@ var pageStyle$1 = {
     justifyContent: "space-between",
 };
 
+var Image = function (props) {
+    return React.createElement(Image__default['default'], __assign({}, props, { unoptimized: true, quality: 100 }));
+};
+
 var GTMHead = function (_a) {
     var blockHTML = _a.blockHTML;
     var gtmId = process.env.GTM_ID;
@@ -25774,6 +26895,7 @@ var index = /*#__PURE__*/Object.freeze({
     IkasPage: IkasPage,
     IkasPageHead: IkasPageHead,
     IkasPageEditor: IkasPageEditor,
+    Image: Image,
     GTMHead: GTMHead,
     GTMBody: GTMBody,
     GTMPageView: GTMPageView,
@@ -25790,7 +26912,7 @@ var Page = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
+    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 () {
     var theme, provider;
@@ -25818,7 +26940,8 @@ var Page$1 = function (_a) {
     var page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
     var router$1 = router.useRouter();
     var _b = React.useState(false), isBrowser = _b[0], setIsBrowser = _b[1];
-    var _c = React.useState(IkasPageDataProvider.initPropValues(propValuesStr, router$1)), propValues = _c[0], setPropValues = _c[1];
+    var initialPropValues = React.useMemo(function () { return IkasPageDataProvider.initPropValues(propValuesStr, router$1); }, [propValuesStr]);
+    var _c = React.useState(initialPropValues), propValues = _c[0], setPropValues = _c[1];
     React.useEffect(function () {
         setIsBrowser(typeof window !== "undefined");
     }, []);
@@ -25826,7 +26949,7 @@ var Page$1 = function (_a) {
         setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router$1, isBrowser));
     }, [isBrowser, propValuesStr]);
     handleGTM(page, pageSpecificDataStr);
-    return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings }));
+    return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings, addOgpMetas: true }));
 };
 var index$1 = mobxReactLite.observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -26325,6 +27448,7 @@ exports.GTMPageView = GTMPageView;
 exports.GTMProductView = GTMProductView;
 exports.GTMPurchase = GTMPurchase;
 exports.GTMRemoveFromCart = GTMRemoveFromCart;
+exports.IkasApplicableProductFilterValue = IkasApplicableProductFilterValue;
 exports.IkasBaseStore = IkasBaseStore;
 exports.IkasBrand = IkasBrand;
 exports.IkasBrandAPI = IkasBrandAPI;
@@ -26368,10 +27492,12 @@ exports.IkasProductAttributeAPI = IkasProductAttributeAPI;
 exports.IkasProductAttributeValue = IkasProductAttributeValue;
 exports.IkasProductDetail = IkasProductDetail;
 exports.IkasProductDetailPropValue = IkasProductDetailPropValue;
+exports.IkasProductFilter = IkasProductFilter;
+exports.IkasProductFilterValue = IkasProductFilterValue;
 exports.IkasProductList = IkasProductList;
-exports.IkasProductListFilter = IkasProductListFilter;
 exports.IkasProductListPropValue = IkasProductListPropValue;
 exports.IkasProductPrice = IkasProductPrice;
+exports.IkasProductSearchAPI = IkasProductSearchAPI;
 exports.IkasProductVariant = IkasProductVariant;
 exports.IkasProductVariantType = IkasProductVariantType;
 exports.IkasStateAPI = IkasStateAPI;
@@ -26388,6 +27514,7 @@ exports.IkasThemeSettings = IkasThemeSettings;
 exports.IkasVariantType = IkasVariantType;
 exports.IkasVariantTypeAPI = IkasVariantTypeAPI;
 exports.IkasVariantValue = IkasVariantValue;
+exports.Image = Image;
 exports.IndexPage = home;
 exports.LessThanRule = LessThanRule;
 exports.LoginForm = LoginForm;
@@ -26397,6 +27524,7 @@ exports.MinRule = MinRule;
 exports.OrderDetailPage = _id_$2;
 exports.OrdersPage = index$4;
 exports.PhoneRule = PhoneRule;
+exports.RangeValue = RangeValue;
 exports.RecoverPasswordForm = RecoverPasswordForm;
 exports.RecoverPasswordPage = recoverPassword;
 exports.RegisterForm = RegisterForm;
@@ -26408,6 +27536,7 @@ exports.Validator = Validator;
 exports.apollo = apollo;
 exports.decodeBase64 = decodeBase64;
 exports.formatMoney = formatMoney;
+exports.parseRangeStr = parseRangeStr;
 exports.pascalCase = pascalCase;
 exports.stringToSlug = stringToSlug;
 exports.validatePhoneNumber = validatePhoneNumber;