@ikas/storefront 0.0.24 → 0.0.25

package/build/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var mobx = require('mobx');
-var queryString$1 = require('querystring');
+var queryString = require('querystring');
 var React = require('react');
 var mobxReactLite = require('mobx-react-lite');
 var router = require('next/router');
@@ -14,7 +14,7 @@ var dynamic = require('next/dynamic');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var queryString__default = /*#__PURE__*/_interopDefaultLegacy(queryString$1);
+var queryString__default = /*#__PURE__*/_interopDefaultLegacy(queryString);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
@@ -11047,505 +11047,6 @@ var IkasBrandListPropValueProvider = /** @class */ (function () {
     return IkasBrandListPropValueProvider;
 }());
 
-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 IkasBrandPropValueProvider = /** @class */ (function () {
     function IkasBrandPropValueProvider(prop, pageSpecificData) {
         this.brandPropValue = prop;
@@ -11899,24 +11400,16 @@ var IkasPageDataProvider = /** @class */ (function () {
     };
     IkasPageDataProvider.prototype.getPageSpecificData = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var slug, metaDataList, metaData, setPageMetaData, handleBrandPage, handleCategoryPage, handleProductPage, _a;
+            var slug, metaDataList, metaData, handleBrandPage, handleCategoryPage, _a;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         if (this.pageType &&
-                            [
-                                exports.IkasThemePageType.INDEX,
-                                exports.IkasThemePageType.ACCOUNT,
-                                exports.IkasThemePageType.ADDRESSES,
-                                exports.IkasThemePageType.ORDERS,
-                                exports.IkasThemePageType.ORDER_DETAIL,
-                                exports.IkasThemePageType.LOGIN,
-                                exports.IkasThemePageType.REGISTER,
-                                exports.IkasThemePageType.FORGOT_PASSWORD,
-                                exports.IkasThemePageType.RECOVER_PASSWORD,
-                                exports.IkasThemePageType.CUSTOM,
-                                exports.IkasThemePageType.CART,
+                            ![
+                                exports.IkasThemePageType.BRAND,
+                                exports.IkasThemePageType.PRODUCT,
+                                exports.IkasThemePageType.CATEGORY,
                             ].includes(this.pageType))
                             return [2 /*return*/];
                         slug = this.pageParams.slug;
@@ -11924,15 +11417,9 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 1:
                         metaDataList = _b.sent();
                         if (!metaDataList || !metaDataList.length) {
-                            return [2 /*return*/];
+                            return [2 /*return*/, this.getPageSpecificProduct()];
                         }
                         metaData = metaDataList[0];
-                        setPageMetaData = function () {
-                            if (_this.page) {
-                                _this.page.pageTitle = metaData.pageTitle;
-                                _this.page.description = metaData.description;
-                            }
-                        };
                         handleBrandPage = function () { return __awaiter(_this, void 0, void 0, function () {
                             var brandsResponse, brand;
                             return __generator(this, function (_a) {
@@ -11947,7 +11434,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                                         brand = brandsResponse.brands[0];
                                         this.pageSpecificData = brand;
                                         this.pageType = exports.IkasThemePageType.BRAND;
-                                        setPageMetaData();
+                                        this.setPageMetaData(metaData);
                                         return [2 /*return*/];
                                 }
                             });
@@ -11966,26 +11453,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                                         category = categoriesResponse.categories[0];
                                         this.pageSpecificData = category;
                                         this.pageType = exports.IkasThemePageType.CATEGORY;
-                                        setPageMetaData();
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); };
-                        handleProductPage = function () { return __awaiter(_this, void 0, void 0, function () {
-                            var productsResponse, product;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, IkasProductAPI.listProducts({
-                                            idList: [metaData.targetId],
-                                        })];
-                                    case 1:
-                                        productsResponse = _a.sent();
-                                        if (!productsResponse.products.length)
-                                            return [2 /*return*/];
-                                        product = productsResponse.products[0];
-                                        this.pageSpecificData = new IkasProductDetail(product, product.variants[0].variantValues, true);
-                                        this.pageType = exports.IkasThemePageType.PRODUCT;
-                                        setPageMetaData();
+                                        this.setPageMetaData(metaData);
                                         return [2 /*return*/];
                                 }
                             });
@@ -12001,7 +11469,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 3: return [2 /*return*/, _b.sent()];
                     case 4: return [4 /*yield*/, handleCategoryPage()];
                     case 5: return [2 /*return*/, _b.sent()];
-                    case 6: return [4 /*yield*/, handleProductPage()];
+                    case 6: return [4 /*yield*/, this.getPageSpecificProduct()];
                     case 7: return [2 /*return*/, _b.sent()];
                     case 8: return [3 /*break*/, 9];
                     case 9: return [2 /*return*/];
@@ -12009,6 +11477,82 @@ var IkasPageDataProvider = /** @class */ (function () {
             });
         });
     };
+    IkasPageDataProvider.prototype.getPageSpecificProduct = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var slug, getProductMetaData, metaDataResponse, productsResponse, product, isMainProductSlug, selectedVariantValues, variantSlugPart, variantSlugs, _i, _a, variant, isSelectedVariant, _loop_1, _b, variantSlugs_1, variantSlug, state_1;
+            var _this = this;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        slug = this.pageParams.slug;
+                        getProductMetaData = function (slug) { return __awaiter(_this, void 0, void 0, function () {
+                            var metaDataList, splitParts, newSlug;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData(slug)];
+                                    case 1:
+                                        metaDataList = _a.sent();
+                                        if (!(!metaDataList || !metaDataList.length)) return [3 /*break*/, 3];
+                                        splitParts = slug.split("-");
+                                        newSlug = splitParts.slice(0, splitParts.length - 1).join("-");
+                                        return [4 /*yield*/, getProductMetaData(newSlug)];
+                                    case 2: return [2 /*return*/, _a.sent()];
+                                    case 3: return [2 /*return*/, {
+                                            metaData: metaDataList[0],
+                                            slug: slug,
+                                        }];
+                                }
+                            });
+                        }); };
+                        return [4 /*yield*/, getProductMetaData(slug)];
+                    case 1:
+                        metaDataResponse = _c.sent();
+                        if (!metaDataResponse)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, IkasProductAPI.listProducts({
+                                idList: [metaDataResponse.metaData.targetId],
+                            })];
+                    case 2:
+                        productsResponse = _c.sent();
+                        if (!productsResponse.products.length)
+                            return [2 /*return*/];
+                        product = productsResponse.products[0];
+                        isMainProductSlug = slug.length === metaDataResponse.slug.length;
+                        selectedVariantValues = [];
+                        if (!isMainProductSlug) {
+                            variantSlugPart = slug.slice(metaDataResponse.slug.length + 1);
+                            variantSlugs = variantSlugPart.split("-");
+                            for (_i = 0, _a = product.variants; _i < _a.length; _i++) {
+                                variant = _a[_i];
+                                isSelectedVariant = true;
+                                _loop_1 = function (variantSlug) {
+                                    if (!variant.variantValues.some(function (vv) { return vv.slug === variantSlug; })) {
+                                        isSelectedVariant = false;
+                                        return "break";
+                                    }
+                                };
+                                for (_b = 0, variantSlugs_1 = variantSlugs; _b < variantSlugs_1.length; _b++) {
+                                    variantSlug = variantSlugs_1[_b];
+                                    state_1 = _loop_1(variantSlug);
+                                    if (state_1 === "break")
+                                        break;
+                                }
+                                if (isSelectedVariant) {
+                                    selectedVariantValues = variant.variantValues;
+                                    break;
+                                }
+                            }
+                        }
+                        this.pageSpecificData = new IkasProductDetail(product, selectedVariantValues.length
+                            ? selectedVariantValues
+                            : product.variants[0].variantValues, true);
+                        this.pageType = exports.IkasThemePageType.PRODUCT;
+                        this.setPageMetaData(metaDataResponse.metaData);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     IkasPageDataProvider.prototype.getPageComponentPropValues = function (pageComponent) {
         return __awaiter(this, void 0, void 0, function () {
             var component, result, setPageComponentPropValue;
@@ -12094,14 +11638,16 @@ var IkasPageDataProvider = /** @class */ (function () {
             });
         });
     };
+    IkasPageDataProvider.prototype.setPageMetaData = function (metaData) {
+        if (this.page) {
+            this.page.pageTitle = metaData.pageTitle;
+            this.page.description = metaData.description;
+        }
+    };
     IkasPageDataProvider.isServer = function () {
         return typeof window === "undefined";
     };
-    IkasPageDataProvider.initPropValues = function (propValuesStr, router, queryParams) {
-        var _queryParams = queryParams ||
-            (IkasPageDataProvider.isServer()
-                ? {}
-                : queryString.parse(location.search.replace("?", "")));
+    IkasPageDataProvider.initPropValues = function (propValuesStr, router) {
         var pageComponentPropValues = JSON.parse(propValuesStr).map(function (v) { return ({
             pageComponent: new IkasThemePageComponent(v.pageComponent),
             component: new IkasThemeComponent(v.component),
@@ -12136,7 +11682,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                         IkasPageDataProvider.initProductListPropValue(prop, propValue, pageComponentPropValue);
                         break;
                     case exports.IkasThemeComponentPropType.PRODUCT_DETAIL:
-                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, _queryParams, router);
+                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, router);
                         break;
                     case exports.IkasThemeComponentPropType.LINK:
                     case exports.IkasThemeComponentPropType.LIST_OF_LINK:
@@ -12167,47 +11713,11 @@ var IkasPageDataProvider = /** @class */ (function () {
         var productList = new IkasProductList(propValue);
         pageComponentPropValue.propValues[prop.name] = productList;
     };
-    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, queryParams, router) {
+    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, router) {
         var usePageData = propValue.usePageData;
         var _propValue = propValue;
         var productDetail = new IkasProductDetail(_propValue.product, _propValue.selectedVariantValues);
-        var product = productDetail.product;
-        var selectedVariantValues = [];
-        if (usePageData && product.variantTypes.length) {
-            var vid_1 = queryParams.vid;
-            var hasVid = false;
-            if (vid_1 && typeof vid_1 === "string") {
-                var variant = product.variants.find(function (v) { return v.id === vid_1; });
-                if (variant) {
-                    selectedVariantValues = variant.variantValues;
-                    hasVid = true;
-                }
-            }
-            if (!hasVid) {
-                product.variantTypes.forEach(function (pvt) {
-                    var slug = pvt.variantType.slug;
-                    var variantValueParam = queryParams[slug];
-                    if (variantValueParam) {
-                        var variantValueSlug_1 = variantValueParam;
-                        if (Array.isArray(variantValueParam)) {
-                            variantValueSlug_1 = variantValueParam[0];
-                        }
-                        var variantValue = pvt.variantType.values.find(function (vv) { return vv.slug === variantValueSlug_1; });
-                        if (variantValue)
-                            selectedVariantValues.push(variantValue);
-                        else
-                            selectedVariantValues.push(pvt.variantType.values[0]);
-                    }
-                    else {
-                        selectedVariantValues.push(pvt.variantType.values[0]);
-                    }
-                });
-            }
-        }
-        else {
-            selectedVariantValues = productDetail.selectedVariantValues || [];
-        }
-        pageComponentPropValue.propValues[prop.name] = new IkasProductDetail(productDetail.product, selectedVariantValues, usePageData, router);
+        pageComponentPropValue.propValues[prop.name] = new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues, usePageData, router);
     };
     IkasPageDataProvider.initLinkPropValue = function (prop, propValue, pageComponentPropValue) {
         if (Array.isArray(propValue)) {
@@ -14101,17 +13611,13 @@ var IkasProductDetail = /** @class */ (function () {
     });
     Object.defineProperty(IkasProductDetail.prototype, "href", {
         get: function () {
-            var _this = this;
             var metaData = this.product.metaData;
             if (!(metaData === null || metaData === void 0 ? void 0 : metaData.slug))
                 return "";
             if (this.product.hasVariant) {
-                var queryParams_1 = {};
-                this.selectedVariantValues.forEach(function (vv) {
-                    var vt = _this.product.variantTypes.find(function (vt) { return vt.variantType.id === vv.variantTypeId; });
-                    queryParams_1[vt.variantType.slug] = vv.slug;
-                });
-                return "/" + metaData.slug + "?" + queryString__default['default'].stringify(queryParams_1);
+                return "/" + metaData.slug + "-" + this.selectedVariantValues
+                    .map(function (vv) { return vv.slug; })
+                    .join("-");
             }
             return "/" + metaData.slug;
         },
@@ -14119,20 +13625,18 @@ var IkasProductDetail = /** @class */ (function () {
         configurable: true
     });
     IkasProductDetail.prototype.selectVariantValue = function (variantValue) {
-        var _this = this;
         var _a;
+        var metaData = this.product.metaData;
         var selectedVariantValues = this.selectedVariantValues.map(function (vv) {
             if (vv.variantTypeId === variantValue.variantTypeId)
                 return variantValue;
             return vv;
         });
-        var queryParams = {};
-        selectedVariantValues.forEach(function (vv) {
-            var vt = _this.product.variantTypes.find(function (vt) { return vt.variantType.id === vv.variantTypeId; });
-            queryParams[vt.variantType.slug] = vv.slug;
-        });
         this.selectedVariantValues = selectedVariantValues;
-        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(location.pathname + "?" + queryString__default['default'].stringify(queryParams), undefined, { shallow: true });
+        var newUrl = "/" + metaData.slug + "-" + this.selectedVariantValues
+            .map(function (vv) { return vv.slug; })
+            .join("-");
+        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(newUrl);
     };
     return IkasProductDetail;
 }());
@@ -23476,7 +22980,7 @@ var PageViewModel = /** @class */ (function () {
                         return [4 /*yield*/, pageDataProvider.getPageData()];
                     case 1:
                         _b.sent();
-                        pageDataProvider.pageComponentPropValues = IkasPageDataProvider.initPropValues(JSON.stringify(pageDataProvider.pageComponentPropValues), this.router, this.queryParams);
+                        pageDataProvider.pageComponentPropValues = IkasPageDataProvider.initPropValues(JSON.stringify(pageDataProvider.pageComponentPropValues), this.router);
                         mobx.runInAction(function () {
                             _this.pageDataProvider = pageDataProvider;
                             _this.isLoading = false;
@@ -23821,18 +23325,76 @@ var home = /*#__PURE__*/Object.freeze({
 });
 
 var Page$1 = function (_a) {
-    var page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, propValuesStr = _a.propValuesStr, queryParams = _a.queryParams;
+    var page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, propValuesStr = _a.propValuesStr;
     var router$1 = router.useRouter();
     var propValues = mobx.computed(function () {
-        return IkasPageDataProvider.initPropValues(propValuesStr, router$1, typeof window !== "undefined"
-            ? queryString.parse(window.location.search.replace("?", ""))
-            : queryParams);
+        return IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     });
     handleGTM(page, pageSpecificDataStr);
     return React.createElement(IkasPage, { page: page, propValues: propValues.get() });
 };
 var index$1 = mobxReactLite.observer(Page$1);
-var getServerSideProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+    var metaData, targetTypes, brandCategoryMetaData, productMetaData, productsResponse, productParams, _loop_1, _i, _a, product;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0: return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData()];
+            case 1:
+                metaData = _b.sent();
+                targetTypes = [
+                    exports.IkasHTMLMetaDataTargetType.BRAND,
+                    exports.IkasHTMLMetaDataTargetType.CATEGORY,
+                ];
+                brandCategoryMetaData = metaData.filter(function (m) { return m.targetType && targetTypes.includes(m.targetType); });
+                productMetaData = metaData.filter(function (m) { return m.targetType && m.targetType === exports.IkasHTMLMetaDataTargetType.PRODUCT; });
+                return [4 /*yield*/, IkasProductAPI.listProducts({
+                        idList: productMetaData.map(function (p) { return p.targetId; }),
+                    })];
+            case 2:
+                productsResponse = _b.sent();
+                productParams = [];
+                _loop_1 = function (product) {
+                    var meta = productMetaData.find(function (pm) { return pm.targetId === product.id; });
+                    if (meta) {
+                        for (var _i = 0, _a = product.variants; _i < _a.length; _i++) {
+                            var variant = _a[_i];
+                            if (product.hasVariant) {
+                                var variantSlug = variant.variantValues
+                                    .map(function (vv) { return vv.slug; })
+                                    .join("-");
+                                productParams.push({
+                                    slug: meta.slug + "-" + variantSlug,
+                                });
+                            }
+                            else {
+                                productParams.push({
+                                    slug: meta.slug,
+                                });
+                            }
+                        }
+                    }
+                };
+                for (_i = 0, _a = productsResponse.products; _i < _a.length; _i++) {
+                    product = _a[_i];
+                    _loop_1(product);
+                }
+                return [2 /*return*/, {
+                        paths: brandCategoryMetaData
+                            .map(function (m) { return ({
+                            params: {
+                                slug: m.slug,
+                                originalSlug: m.slug,
+                            },
+                        }); })
+                            .concat(productParams.map(function (pp) { return ({
+                            params: pp,
+                        }); })),
+                        fallback: "blocking",
+                    }];
+        }
+    });
+}); };
+var getStaticProps$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -23849,7 +23411,8 @@ var getServerSideProps = function (context) { return __awaiter(void 0, void 0, v
                         }];
                 }
                 return [2 /*return*/, {
-                        props: __assign(__assign({}, provider.nextPageData.props), { pageSpecificDataStr: JSON.stringify(provider.pageSpecificData || {}), queryParams: context.query }),
+                        props: __assign(__assign({}, provider.nextPageData.props), { pageSpecificDataStr: JSON.stringify(provider.pageSpecificData || {}) }),
+                        revalidate: 60,
                     }];
         }
     });
@@ -23873,7 +23436,8 @@ function handleGTM(page, pageSpecificDataStr) {
 var index$2 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': index$1,
-    getServerSideProps: getServerSideProps
+    getStaticPaths: getStaticPaths,
+    getStaticProps: getStaticProps$1
 });
 
 var Page$2 = function (_a) {
@@ -23882,7 +23446,7 @@ var Page$2 = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticPaths$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, customPages, customPagePaths;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -23902,7 +23466,7 @@ var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void
         }
     });
 }); };
-var getStaticProps$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticProps$2 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -23921,8 +23485,8 @@ var getStaticProps$1 = function (context) { return __awaiter(void 0, void 0, voi
 var _slug_ = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$2,
-    getStaticPaths: getStaticPaths,
-    getStaticProps: getStaticProps$1
+    getStaticPaths: getStaticPaths$1,
+    getStaticProps: getStaticProps$2
 });
 
 var CheckoutPage = function (_a) {
@@ -23932,7 +23496,7 @@ var CheckoutPage = function (_a) {
     return React.createElement(IkasCheckoutPage, { checkout: checkout, queryParams: queryParams });
 };
 var _id_ = mobxReactLite.observer(CheckoutPage);
-var getServerSideProps$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getServerSideProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var id, redirect, checkout;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -23967,7 +23531,7 @@ var getServerSideProps$1 = function (context) { return __awaiter(void 0, void 0,
 var _id_$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': _id_,
-    getServerSideProps: getServerSideProps$1
+    getServerSideProps: getServerSideProps
 });
 
 var Page$3 = function (_a) {
@@ -23976,7 +23540,7 @@ var Page$3 = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getStaticProps$2 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticProps$3 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -23995,7 +23559,7 @@ var getStaticProps$2 = function (context) { return __awaiter(void 0, void 0, voi
 var index$3 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$3,
-    getStaticProps: getStaticProps$2
+    getStaticProps: getStaticProps$3
 });
 
 var Page$4 = function (_a) {
@@ -24004,7 +23568,7 @@ var Page$4 = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getStaticProps$3 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticProps$4 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -24023,7 +23587,7 @@ var getStaticProps$3 = function (context) { return __awaiter(void 0, void 0, voi
 var addresses = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$4,
-    getStaticProps: getStaticProps$3
+    getStaticProps: getStaticProps$4
 });
 
 var Page$5 = function (_a) {
@@ -24032,7 +23596,7 @@ var Page$5 = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getStaticProps$4 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticProps$5 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -24051,7 +23615,7 @@ var getStaticProps$4 = function (context) { return __awaiter(void 0, void 0, voi
 var index$4 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$5,
-    getStaticProps: getStaticProps$4
+    getStaticProps: getStaticProps$5
 });
 
 var Page$6 = function (_a) {
@@ -24060,7 +23624,7 @@ var Page$6 = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getServerSideProps$2 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getServerSideProps$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -24079,7 +23643,7 @@ var getServerSideProps$2 = function (context) { return __awaiter(void 0, void 0,
 var _id_$2 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$6,
-    getServerSideProps: getServerSideProps$2
+    getServerSideProps: getServerSideProps$1
 });
 
 var Page$7 = function (_a) {
@@ -24088,7 +23652,7 @@ var Page$7 = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getStaticProps$5 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticProps$6 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -24107,7 +23671,7 @@ var getStaticProps$5 = function (context) { return __awaiter(void 0, void 0, voi
 var login = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$7,
-    getStaticProps: getStaticProps$5
+    getStaticProps: getStaticProps$6
 });
 
 var Page$8 = function (_a) {
@@ -24116,7 +23680,7 @@ var Page$8 = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getStaticProps$6 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticProps$7 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -24135,7 +23699,7 @@ var getStaticProps$6 = function (context) { return __awaiter(void 0, void 0, voi
 var register = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$8,
-    getStaticProps: getStaticProps$6
+    getStaticProps: getStaticProps$7
 });
 
 var Page$9 = function (_a) {
@@ -24144,7 +23708,7 @@ var Page$9 = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getStaticProps$7 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticProps$8 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -24163,7 +23727,7 @@ var getStaticProps$7 = function (context) { return __awaiter(void 0, void 0, voi
 var forgotPassword = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$9,
-    getStaticProps: getStaticProps$7
+    getStaticProps: getStaticProps$8
 });
 
 var Page$a = function (_a) {
@@ -24172,7 +23736,7 @@ var Page$a = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getStaticProps$8 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticProps$9 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -24191,7 +23755,7 @@ var getStaticProps$8 = function (context) { return __awaiter(void 0, void 0, voi
 var recoverPassword = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$a,
-    getStaticProps: getStaticProps$8
+    getStaticProps: getStaticProps$9
 });
 
 var Page$b = function (_a) {
@@ -24200,7 +23764,7 @@ var Page$b = function (_a) {
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
     return React.createElement(IkasPage, { page: page, propValues: propValues });
 };
-var getStaticProps$9 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
+var getStaticProps$a = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -24219,7 +23783,7 @@ var getStaticProps$9 = function (context) { return __awaiter(void 0, void 0, voi
 var cart = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': Page$b,
-    getStaticProps: getStaticProps$9
+    getStaticProps: getStaticProps$a
 });
 
 var IkasPageEditor$1 = dynamic__default['default'](function () { return Promise.resolve().then(function () { return index; }).then(function (mod) { return mod.IkasPageEditor; }); }, { ssr: false });