@ikas/storefront 0.0.165-alpha.1 → 0.0.165-alpha.10

package/build/analytics/analytics.d.ts

@@ -5,10 +5,10 @@ export declare class Analytics {
     constructor();
     static pageView(url: string): void;
     static productView(productDetail: IkasProductDetail): void;
-    static addToCart(item: IkasProductDetail | IkasOrderLineItem, quantity: number): void;
+    static addToCart(item: IkasProductDetail | IkasOrderLineItem, quantity: number, eventId: string): void;
     static removeFromCart(item: IkasProductDetail | IkasOrderLineItem, quantity: number): void;
     static beginCheckout(checkout: IkasCheckout): void;
-    static purchase(checkout: IkasCheckout, orderId: string): void;
+    static purchase(checkout: IkasCheckout, eventId: string): void;
     static checkoutStep(checkout: IkasCheckout, step: CheckoutStep): void;
     static disableHTML(): void;
     static addToWishlist(id: string): void;

package/build/analytics/facebookPixel.d.ts

@@ -3,9 +3,9 @@ import { IkasCart } from "../models/data/cart/index";
 export declare class FacebookPixel {
     constructor();
     static productView(productDetail: IkasProductDetail): void;
-    static addToCart(item: IkasProductDetail | IkasOrderLineItem, quantity: number): void;
+    static addToCart(item: IkasProductDetail | IkasOrderLineItem, quantity: number, eventId: string): void;
     static beginCheckout(checkout: IkasCheckout): void;
-    static purchase(checkout: IkasCheckout, orderId: string): void;
+    static purchase(checkout: IkasCheckout, eventId: string): void;
     static addToWishlist(id: string): void;
     static search(searchKeyword: string): void;
     static completeRegistration(): void;

package/build/index.es.js

@@ -17876,13 +17876,13 @@ var FacebookPixel = /** @class */ (function () {
             console.error(err);
         }
     };
-    FacebookPixel.addToCart = function (item, quantity) {
+    FacebookPixel.addToCart = function (item, quantity, eventId) {
         try {
             !isServer &&
                 window.fbq &&
                 window.fbq("track", "AddToCart", item instanceof IkasProductDetail
                     ? productToFBPItem(item, quantity)
-                    : orderLineItemToFBPItem(item, quantity));
+                    : orderLineItemToFBPItem(item, quantity), { eventId: eventId });
             return;
         }
         catch (err) {
@@ -17900,11 +17900,11 @@ var FacebookPixel = /** @class */ (function () {
             console.error(err);
         }
     };
-    FacebookPixel.purchase = function (checkout, orderId) {
+    FacebookPixel.purchase = function (checkout, eventId) {
         try {
             !isServer &&
                 window.fbq &&
-                window.fbq("track", "Purchase", beginCheckoutFBPItem(checkout));
+                window.fbq("track", "Purchase", beginCheckoutFBPItem(checkout), { eventId: eventId });
             return;
         }
         catch (err) {
@@ -22514,7 +22514,7 @@ var IkasCartStore = /** @class */ (function () {
         this.addItem = function (variant, product, initialQuantity) {
             if (initialQuantity === void 0) { initialQuantity = 1; }
             return __awaiter(_this, void 0, void 0, function () {
-                var existingItem, input, cart, err_2;
+                var existingItem, input, cart, eventId, err_2;
                 var _a, _b, _c;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
@@ -22553,7 +22553,10 @@ var IkasCartStore = /** @class */ (function () {
                             _d.sent();
                             _d.label = 3;
                         case 3:
-                            Analytics.addToCart(new IkasProductDetail(product, variant.variantValues), initialQuantity);
+                            if (this.cart) {
+                                eventId = this.cart.id + "-" + this.cart.updatedAt;
+                                Analytics.addToCart(new IkasProductDetail(product, variant.variantValues), initialQuantity, eventId);
+                            }
                             return [3 /*break*/, 5];
                         case 4:
                             err_2 = _d.sent();
@@ -22565,7 +22568,7 @@ var IkasCartStore = /** @class */ (function () {
             });
         };
         this.changeItemQuantity = function (item, quantity) { return __awaiter(_this, void 0, void 0, function () {
-            var input, cart, oldQuantity, err_3;
+            var input, cart, eventId, oldQuantity, err_3;
             var _a, _b, _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
@@ -22599,12 +22602,15 @@ var IkasCartStore = /** @class */ (function () {
                         _d.label = 3;
                     case 3:
                         this.removeCardIfEmpty();
-                        oldQuantity = item.quantity;
-                        if (oldQuantity > quantity) {
-                            Analytics.removeFromCart(item, oldQuantity - quantity);
-                        }
-                        else {
-                            Analytics.addToCart(item, quantity - oldQuantity);
+                        if (this.cart) {
+                            eventId = this.cart.id + "-" + this.cart.updatedAt;
+                            oldQuantity = item.quantity;
+                            if (oldQuantity > quantity) {
+                                Analytics.removeFromCart(item, oldQuantity - quantity);
+                            }
+                            else {
+                                Analytics.addToCart(item, quantity - oldQuantity, eventId);
+                            }
                         }
                         return [3 /*break*/, 5];
                     case 4:
@@ -22885,6 +22891,14 @@ var CheckoutViewModel = /** @class */ (function () {
                         this.checkShippingCountries();
                         _b.label = 2;
                     case 2:
+                        // Skip shipping if there is only 1 shipping method
+                        if (this.step === CheckoutStep.SHIPPING &&
+                            this.checkout.availableShippingMethods.length === 1) {
+                            this.step = CheckoutStep.PAYMENT;
+                            this.router.replace("/checkout/" + this.checkout.id + "?step=" + this.step, undefined, {
+                                shallow: true,
+                            });
+                        }
                         if (!(this.step === CheckoutStep.PAYMENT ||
                             this.step === CheckoutStep.SUCCESS)) return [3 /*break*/, 4];
                         return [4 /*yield*/, this.listPaymentGateways()];
@@ -24100,9 +24114,9 @@ var Analytics = /** @class */ (function () {
             console.error(err);
         }
     };
-    Analytics.addToCart = function (item, quantity) {
+    Analytics.addToCart = function (item, quantity, eventId) {
         try {
-            FacebookPixel.addToCart(item, quantity);
+            FacebookPixel.addToCart(item, quantity, eventId);
             GoogleTagManager.addToCart(item, quantity);
         }
         catch (err) {
@@ -24130,11 +24144,11 @@ var Analytics = /** @class */ (function () {
             console.error(err);
         }
     };
-    Analytics.purchase = function (checkout, orderId) {
+    Analytics.purchase = function (checkout, eventId) {
         try {
             localStorage.removeItem(LS_BEGIN_CHECKOUT_KEY);
-            FacebookPixel.purchase(checkout, orderId);
-            GoogleTagManager.purchase(checkout, orderId);
+            FacebookPixel.purchase(checkout, eventId);
+            GoogleTagManager.purchase(checkout, eventId);
         }
         catch (err) {
             console.error(err);
@@ -24236,11 +24250,13 @@ var AnalyticsHead = function (_a) {
         blockHTML && (createElement("script", { dangerouslySetInnerHTML: {
                 __html: "dataLayer = [{'gtm.blocklist': ['html']}];",
             } })),
+        gtmId && (createElement(Script, { src: "https://www.googletagmanager.com/gtm.js?id=" + gtmId })),
         gtmId && (createElement("script", { dangerouslySetInnerHTML: {
                 __html: "(function(w,l){" +
                     "w[l] = w[l] || [];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});" +
                     "})(window,'dataLayer');",
             } })),
+        fbpId && (createElement(Script, { src: "https://connect.facebook.net/en_US/fbevents.js" })),
         fbpId && (createElement("script", { dangerouslySetInnerHTML: {
                 __html: "!function(f,b,e,v,n,t,s)\n          {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n          n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n          if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n          n.queue=[];}(window);\n          fbq('init', '" + fbpId + "');\n          fbq('track', 'PageView');",
             } }))));
@@ -24249,11 +24265,9 @@ var AnalyticsBody = function () {
     var gtmId = IkasStorefrontConfig.gtmId;
     var fbpId = IkasStorefrontConfig.fbpId;
     return (createElement(Fragment$1, null,
-        gtmId && (createElement(Script, { src: "https://www.googletagmanager.com/gtm.js?id=" + gtmId })),
         gtmId && (createElement("noscript", { dangerouslySetInnerHTML: {
                 __html: "<iframe src=\"https://www.googletagmanager.com/ns.html?id=" + gtmId + "\" height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe>",
             } })),
-        fbpId && (createElement(Script, { src: "https://connect.facebook.net/en_US/fbevents.js" })),
         fbpId && (createElement("noscript", { dangerouslySetInnerHTML: {
                 __html: "<img height=\"1\" width=\"1\" style=\"display:none\" \n        src=\"https://www.facebook.com/tr?id=" + fbpId + "&ev=PageView&noscript=1\"/>",
             } }))));
@@ -24950,11 +24964,15 @@ var IkasCustomerStore = /** @class */ (function () {
     };
     IkasCustomerStore.prototype.onProductView = function (productId, variantId) {
         return __awaiter(this, void 0, void 0, function () {
-            var isSuccess;
+            var existingItem, isSuccess;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!this.customer) return [3 /*break*/, 2];
+                        existingItem = this._lastViewedProducts.find(function (lvp) { return lvp.productId === productId; });
+                        if (existingItem) {
+                            return [2 /*return*/];
+                        }
                         return [4 /*yield*/, IkasCustomerAPI.saveLastViewedProducts({
                                 customerId: this.customer.id,
                                 products: [
@@ -27635,15 +27653,25 @@ 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) {
-                return "/" + metaData.slug + "-" + this.selectedVariantValues
-                    .map(function (vv) { return vv.slug; })
-                    .join("-");
-            }
-            return "/" + metaData.slug;
+            var variantParams = this.product.variantTypes
+                .map(function (pvt) {
+                var vt = pvt.variantType;
+                var selectedVariant = vt.values.find(function (vv) {
+                    return _this.selectedVariantValues.some(function (svv) { return svv.id === vv.id; });
+                });
+                if (selectedVariant)
+                    return vt.slug + "=" + selectedVariant.slug;
+            })
+                .filter(function (param) { return !!param; })
+                .join("&");
+            if (variantParams)
+                return "/" + metaData.slug + "?" + variantParams;
+            else
+                return "/" + metaData.slug;
         },
         enumerable: false,
         configurable: true
@@ -27690,6 +27718,7 @@ 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) {
@@ -27698,9 +27727,20 @@ var IkasProductDetail = /** @class */ (function () {
             return vv;
         });
         this.selectedVariantValues = selectedVariantValues;
-        var newUrl = "/" + metaData.slug + "-" + this.selectedVariantValues
-            .map(function (vv) { return vv.slug; })
-            .join("-");
+        var variantParams = this.product.variantTypes
+            .map(function (pvt) {
+            var vt = pvt.variantType;
+            var selectedVariant = vt.values.find(function (vv) {
+                return _this.selectedVariantValues.some(function (svv) { return svv.id === vv.id; });
+            });
+            if (selectedVariant)
+                return vt.slug + "=" + selectedVariant.slug;
+        })
+            .filter(function (param) { return !!param; })
+            .join("&");
+        var newUrl = "/" + metaData.slug;
+        if (variantParams)
+            newUrl = "/" + metaData.slug + "?" + variantParams;
         if (newUrl === window.location.pathname)
             return;
         var isShallow = process.env.NODE_ENV !== "production";
@@ -33280,15 +33320,33 @@ function createProductSchema(productDetail) {
     var _a, _b;
     try {
         var isBrowser = typeof window !== "undefined";
+        // TODO this code copy-pasted, organize this block
         if (isBrowser) {
-            var urlParams = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams.get("vid");
+            var urlParams_1 = new URLSearchParams(window.location.search);
+            var vid_1 = urlParams_1.get("vid");
             if (vid_1) {
                 var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
                 if (variant) {
                     productDetail.selectedVariantValues = variant.variantValues;
                 }
             }
+            else {
+                var productVariantTypeSlugs = productDetail.product.variantTypes.map(function (vt) { return vt.variantType.slug; });
+                var selectedVariantValues_1 = [];
+                productVariantTypeSlugs.forEach(function (slug, vtIndex) {
+                    var productVariantType = productDetail.product.variantTypes[vtIndex];
+                    var variantValueSlug = urlParams_1.get(slug);
+                    if (variantValueSlug) {
+                        var variantValue = productVariantType.variantType.values.find(function (v) { return v.slug === variantValueSlug; });
+                        if (variantValue)
+                            selectedVariantValues_1.push(variantValue);
+                    }
+                });
+                if (selectedVariantValues_1.length ===
+                    productDetail.selectedVariantValues.length) {
+                    productDetail.selectedVariantValues = selectedVariantValues_1;
+                }
+            }
         }
         var productUrl = isBrowser
             ? "https://" + window.location.hostname + productDetail.href
@@ -33555,7 +33613,7 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider.prototype.getPageSpecificData = function () {
         var _a, _b;
         return __awaiter(this, void 0, void 0, function () {
-            var slug, metaDataList, metaData, handleBrandPage, handleCategoryPage, handleBlogPage, handleBlogCategoryPage, _c;
+            var slug, metaDataList, metaData, handleProductPage, handleBrandPage, handleCategoryPage, handleBlogPage, handleBlogCategoryPage, _c;
             var _this = this;
             return __generator(this, function (_d) {
                 switch (_d.label) {
@@ -33584,12 +33642,47 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 2: return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData(slug)];
                     case 3:
                         metaDataList = _d.sent();
-                        if (!metaDataList || !metaDataList.length) {
-                            return [2 /*return*/, this.getPageSpecificProduct()];
-                        }
+                        if (!metaDataList || !metaDataList.length)
+                            return [2 /*return*/];
                         _d.label = 4;
                     case 4:
                         metaData = metaDataList[0];
+                        if (!metaData.targetId)
+                            return [2 /*return*/];
+                        handleProductPage = function () { return __awaiter(_this, void 0, void 0, function () {
+                            var productsResponse, product, displayedVariantType, inStockVariant;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, IkasProductSearchAPI.searchProducts({
+                                            productIdList: [metaData.targetId],
+                                            priceListId: IkasStorefrontConfig.priceListId,
+                                            salesChannelId: IkasStorefrontConfig.salesChannelId,
+                                        })];
+                                    case 1:
+                                        productsResponse = _a.sent();
+                                        if (!(productsResponse === null || productsResponse === void 0 ? void 0 : productsResponse.data.length)) {
+                                            return [2 /*return*/];
+                                        }
+                                        product = productsResponse.data[0];
+                                        this.pageSpecificData = new IkasProductDetail(product, product.variants[0].variantValues);
+                                        // Select the first displayed in stock variant
+                                        if (this.pageSpecificData.displayedVariantTypes.length) {
+                                            displayedVariantType = this
+                                                .pageSpecificData.displayedVariantTypes[0];
+                                            if (displayedVariantType.displayedVariantValues.length) {
+                                                inStockVariant = displayedVariantType.displayedVariantValues.find(function (dvv) { return dvv.hasStock; });
+                                                if (inStockVariant) {
+                                                    this.pageSpecificData.selectedVariantValues =
+                                                        inStockVariant.variant.variantValues;
+                                                }
+                                            }
+                                        }
+                                        this.pageType = IkasThemePageType.PRODUCT;
+                                        this.setPageMetaData(metaData);
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); };
                         handleBrandPage = function () { return __awaiter(_this, void 0, void 0, function () {
                             var brandsResponse, brand;
                             return __generator(this, function (_a) {
@@ -33681,7 +33774,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 6: return [2 /*return*/, _d.sent()];
                     case 7: return [4 /*yield*/, handleCategoryPage()];
                     case 8: return [2 /*return*/, _d.sent()];
-                    case 9: return [4 /*yield*/, this.getPageSpecificProduct()];
+                    case 9: return [4 /*yield*/, handleProductPage()];
                     case 10: return [2 /*return*/, _d.sent()];
                     case 11: return [4 /*yield*/, handleBlogPage()];
                     case 12: return [2 /*return*/, _d.sent()];
@@ -33693,91 +33786,6 @@ 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, _i, _a, variant, values, slugPart, displayedVariantType, inStockVariant;
-            var _this = this;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        slug = this.pageParams.slug;
-                        if (!slug) {
-                            console.log("Slug not found for getPageSpecificProduct");
-                        }
-                        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:
-                                        if (!slug)
-                                            return [2 /*return*/];
-                                        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 = _b.sent();
-                        if (!metaDataResponse)
-                            return [2 /*return*/];
-                        return [4 /*yield*/, IkasProductSearchAPI.searchProducts({
-                                productIdList: [metaDataResponse.metaData.targetId],
-                                priceListId: IkasStorefrontConfig.priceListId,
-                                salesChannelId: IkasStorefrontConfig.salesChannelId,
-                            })];
-                    case 2:
-                        productsResponse = _b.sent();
-                        if (!(productsResponse === null || productsResponse === void 0 ? void 0 : productsResponse.data.length))
-                            return [2 /*return*/];
-                        product = productsResponse.data[0];
-                        isMainProductSlug = slug.length === metaDataResponse.slug.length;
-                        selectedVariantValues = [];
-                        if (!isMainProductSlug) {
-                            variantSlugPart = slug.slice(metaDataResponse.slug.length + 1);
-                            for (_i = 0, _a = product.variants; _i < _a.length; _i++) {
-                                variant = _a[_i];
-                                values = variant.variantValues;
-                                slugPart = values.map(function (vv) { return vv.slug; }).join("-");
-                                if (slugPart === variantSlugPart) {
-                                    selectedVariantValues = values;
-                                    break;
-                                }
-                            }
-                        }
-                        this.pageSpecificData = new IkasProductDetail(product, selectedVariantValues.length
-                            ? selectedVariantValues
-                            : product.variants[0].variantValues);
-                        // Select the first displayed in stock variant
-                        if (!selectedVariantValues.length &&
-                            this.pageSpecificData.displayedVariantTypes.length) {
-                            displayedVariantType = this.pageSpecificData
-                                .displayedVariantTypes[0];
-                            if (displayedVariantType.displayedVariantValues.length) {
-                                inStockVariant = displayedVariantType.displayedVariantValues.find(function (dvv) { return dvv.hasStock; });
-                                if (inStockVariant) {
-                                    this.pageSpecificData.selectedVariantValues =
-                                        inStockVariant.variant.variantValues;
-                                }
-                            }
-                        }
-                        this.pageType = 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;
@@ -34045,14 +34053,31 @@ var IkasPageDataProvider = /** @class */ (function () {
         var _propValue = propValue;
         var productDetail = new IkasProductDetail(_propValue.product, _propValue.selectedVariantValues);
         if (isBrowser) {
-            var urlParams = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams.get("vid");
+            var urlParams_1 = new URLSearchParams(window.location.search);
+            var vid_1 = urlParams_1.get("vid");
             if (vid_1) {
                 var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
                 if (variant) {
                     productDetail.selectedVariantValues = variant.variantValues;
                 }
             }
+            else {
+                var productVariantTypeSlugs = productDetail.product.variantTypes.map(function (vt) { return vt.variantType.slug; });
+                var selectedVariantValues_1 = [];
+                productVariantTypeSlugs.forEach(function (slug, vtIndex) {
+                    var productVariantType = productDetail.product.variantTypes[vtIndex];
+                    var variantValueSlug = urlParams_1.get(slug);
+                    if (variantValueSlug) {
+                        var variantValue = productVariantType.variantType.values.find(function (v) { return v.slug === variantValueSlug; });
+                        if (variantValue)
+                            selectedVariantValues_1.push(variantValue);
+                    }
+                });
+                if (selectedVariantValues_1.length ===
+                    productDetail.selectedVariantValues.length) {
+                    productDetail.selectedVariantValues = selectedVariantValues_1;
+                }
+            }
         }
         return new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues, router);
     };
@@ -61323,6 +61348,7 @@ var StepSuccess = observer(function (_a) {
     var t = useTranslation().t;
     var _f = useState(false), isContactModalVisible = _f[0], setContactModalVisible = _f[1];
     useEffect(function () {
+        var _a;
         if (typeof localStorage !== "undefined") {
             var lsCartId = localStorage.getItem(CART_LS_KEY);
             var lsCheckoutId = localStorage.getItem(CHECKOUT_LS_KEY);
@@ -61331,7 +61357,7 @@ var StepSuccess = observer(function (_a) {
             if (lsCheckoutId && lsCheckoutId === vm.checkout.id)
                 localStorage.removeItem(CHECKOUT_LS_KEY);
         }
-        Analytics.purchase(vm.checkout, vm.checkout.orderNumber);
+        Analytics.purchase(vm.checkout, ((_a = vm.successTransaction) === null || _a === void 0 ? void 0 : _a.id) || "");
     }, []);
     var customerName = (((_b = vm.checkout.customer) === null || _b === void 0 ? void 0 : _b.firstName) || "") +
         " " +
@@ -61549,13 +61575,30 @@ var OrderStatus = observer(function (_a) {
     })) === null || _d === void 0 ? void 0 : _d.text : ""));
 });
 
+var IMAGE_SIZES = [
+    180,
+    360,
+    540,
+    720,
+    900,
+    1080,
+    1296,
+    1512,
+    1728,
+    1950,
+    2560,
+    3840,
+];
 var Image = function (_a) {
     var image = _a.image, others = __rest(_a, ["image"]);
     var loader = function (_a) {
         var width = _a.width;
-        return image.getSrc(width);
+        var closest = IMAGE_SIZES.reduce(function (prev, curr) {
+            return Math.abs(curr - width) < Math.abs(prev - width) ? curr : prev;
+        });
+        return image.getSrc(closest);
     };
-    return (createElement(NextImage, __assign({}, others, { loader: loader, quality: 100, src: image.src, alt: others.alt || "Image" })));
+    return (createElement(NextImage, __assign({}, others, { loader: loader, quality: 100, src: image.src, alt: others.alt || "Image", unoptimized: true })));
 };
 
 var css_248z$m = ".style-module_StepContainer__1O2dD {\n  width: 100%; }\n  .style-module_StepContainer__1O2dD .style-module_Step__1iOYA {\n    width: 100%; }\n    .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 {\n      padding: 24px 0;\n      border-top: 1px solid var(--checkout-border-color); }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2.style-module_First__cAzdJ {\n        border-top: none; }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitleTop__3zfsj {\n        display: flex;\n        align-items: center; }\n        .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitleTop__3zfsj.style-module_WithRightContent__2fqb1 {\n          align-items: flex-start; }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepCircle__36A5q {\n        width: 32px;\n        height: 32px;\n        border-radius: 100%;\n        border: 1px solid var(--checkout-button-bg-color);\n        color: var(--checkout-button-bg-color);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin-right: 16px;\n        flex: 0 0 auto;\n        font-size: 20px; }\n        .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepCircle__36A5q.style-module_Selected__3j91L {\n          background-color: var(--checkout-button-bg-color);\n          color: var(--checkout-button-text-color); }\n          .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepCircle__36A5q.style-module_Selected__3j91L svg {\n            transform: scale(1.5);\n            position: relative;\n            right: -1px; }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitle__10YDP {\n        font-size: 22px;\n        color: var(--checkout-primary-text-color);\n        flex: 0 0 auto;\n        font-weight: 600;\n        line-height: 32px; }\n        .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitle__10YDP.style-module_Light__15wSX {\n          color: var(--checkout-button-disabled-text-color); }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitleRightContent__2Q43m {\n        flex: 1 1 auto; }\n  .style-module_StepContainer__1O2dD .style-module_StepContent__20QIi {\n    padding-bottom: 24px;\n    padding-left: 48px;\n    width: 100%; }\n  @media only screen and (max-width: 1000px) {\n    .style-module_StepContainer__1O2dD {\n      padding: 0 24px; }\n      .style-module_StepContainer__1O2dD .style-module_StepContent__20QIi {\n        padding-left: 0px; } }\n";
@@ -61771,7 +61814,7 @@ var Steps = observer(function (_a) {
             createElement(StepSummaryAddress, { vm: vm }))) : undefined),
         new Step(t("checkout-page:shipping"), vm.step === CheckoutStep.SHIPPING, vm.step === CheckoutStep.PAYMENT, vm.step === CheckoutStep.PAYMENT ? (createElement("div", { className: styles$5.AdressStepInfo },
             createElement(StepSummaryShipping, { vm: vm }),
-            createElement("div", { className: styles$5.EditBtn, onClick: vm.onBackToShippingClick }, t("checkout-page:actions.edit")))) : undefined, vm.step === CheckoutStep.PAYMENT ? (createElement("div", { className: styles$5.AddressStepInfoMobile },
+            vm.checkout.availableShippingMethods.length > 1 && (createElement("div", { className: styles$5.EditBtn, onClick: vm.onBackToShippingClick }, t("checkout-page:actions.edit"))))) : undefined, vm.step === CheckoutStep.PAYMENT ? (createElement("div", { className: styles$5.AddressStepInfoMobile },
             createElement(StepSummaryShipping, { vm: vm }))) : undefined),
         new Step(t("checkout-page:payment"), vm.step === CheckoutStep.PAYMENT, false),
     ];
@@ -62320,21 +62363,6 @@ var Page$1 = function (_a) {
 var index$1 = observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
-        // const targetTypes = [
-        //   IkasHTMLMetaDataTargetType.BRAND,
-        //   IkasHTMLMetaDataTargetType.CATEGORY,
-        // ];
-        // const metaData = await IkasHTMLMetaDataAPI.listHTMLMetaData(
-        //   undefined,
-        //   undefined,
-        //   targetTypes
-        // );
-        // metaData.map((m) => ({
-        //   params: {
-        //     slug: m.slug,
-        //     originalSlug: m.slug,
-        //   },
-        // }))
         return [2 /*return*/, {
                 paths: [],
                 fallback: "blocking",
@@ -63344,4 +63372,4 @@ var en$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Ob
     'default': en
 }));
 
-export { AccountInfoForm, index$3 as AccountPage, AddressForm, addresses as AddressesPage, Analytics, AnalyticsBody, AnalyticsHead, index$5 as BlogPage, _slug_$2 as BlogSlugPage, cart as CartPage, _id_$1 as CheckoutPage, ContactForm, _slug_ as CustomPage, editor$1 as EditorPage, EmailRule, EqualsRule, favoriteProducts as FavoriteProductsPage, ForgotPasswordForm, forgotPassword as ForgotPasswordPage, IkasAmountTypeEnum$1 as IkasAmountTypeEnum, IkasApplicableProductFilterValue, IkasBaseStore, IkasBlog, IkasBlogAPI, IkasBlogCategory, IkasBlogCategoryList, IkasBlogCategoryListPropValue, IkasBlogCategoryListType, IkasBlogCategoryPropValue, IkasBlogContent, IkasBlogList, IkasBlogListPropValue, IkasBlogListType, IkasBlogMetaData, IkasBlogMetadataTargetType, IkasBlogPropValue, IkasBlogTag, IkasBlogWriter, IkasBrand, IkasBrandAPI, IkasBrandList, IkasBrandListPropValue, IkasBrandListSortType, IkasBrandListType, IkasBrandPropValue, IkasCardAssociation, IkasCardType, IkasCartAPI, IkasCategory, IkasCategoryAPI, IkasCategoryList, IkasCategoryListPropValue, IkasCategoryListSortType, IkasCategoryListType, IkasCategoryPropValue, IkasCheckout, IkasCheckoutAPI, IkasCheckoutRecoveryEmailStatus, IkasCheckoutRecoveryStatus, IkasCheckoutStatus, IkasCityAPI, IkasComponentRenderer, IkasContactForm, IkasContactFormAPI, IkasCountryAPI, IkasCustomer, IkasCustomerAPI, IkasCustomerAddress, IkasDistrictAPI, IkasFavoriteProduct, IkasFavoriteProductAPI, IkasHTMLMetaData, IkasHTMLMetaDataAPI, IkasHTMLMetaDataTargetType, IkasImage, IkasLinkPropValue, IkasLinkType, IkasMerchantAPI, IkasMerchantSettings, IkasNavigationLink, IkasOrder, IkasOrderCancelledReason, IkasOrderLineItem, IkasOrderPackageFulfillStatus, IkasOrderPackageStatus, IkasOrderPaymentStatus, IkasOrderRefundSettings, IkasOrderShippingMethod, IkasOrderStatus, IkasOrderTransaction, IkasPage, IkasPageComponentPropValue, IkasPageDataProvider, IkasPageEditor, IkasPageHead, IkasPaymentMethod, IkasProduct, IkasProductAttribute, IkasProductAttributeAPI, IkasProductAttributeType, IkasProductAttributeValue, IkasProductDetail, IkasProductDetailPropValue, IkasProductFilter, IkasProductFilterDisplayType, IkasProductFilterSettings, IkasProductFilterSortType, IkasProductFilterType, IkasProductFilterValue, IkasProductList, IkasProductListPropValue, IkasProductListSortType, IkasProductListType, IkasProductPrice, IkasProductSearchAPI, IkasProductType, IkasProductVariant, IkasProductVariantType, IkasShippingMethod, IkasShippingMethodEnum, IkasStateAPI, IkasStorefrontConfig, IkasTheme, IkasThemeComponent, IkasThemeComponentProp, IkasThemeComponentPropType, IkasThemeCustomData, IkasThemePage, IkasThemePageComponent, IkasThemePageType, IkasThemeSettings, IkasTransactionStatusEnum, IkasTransactionTypeEnum, IkasVariantSelectionType, IkasVariantType, IkasVariantTypeAPI, IkasVariantValue, Image, home as IndexPage, LessThanRule, LoginForm, login as LoginPage, MaxRule, MinRule, _404 as NotFoundPage, _id_$2 as OrderDetailPage, OrderLineItemStatusEnum$1 as OrderLineItemStatusEnum, index$4 as OrdersPage, PhoneRule, RangeValue, RecoverPasswordForm, recoverPassword as RecoverPasswordPage, RegisterForm, register as RegisterPage, RequiredRule, search as SearchPage, index$2 as SlugPage, ValidationRule, Validator, ValidatorErrorType, apollo, decodeBase64, findAllIndexes, formatDate, formatMoney, getPlaceholderBlog, getPlaceholderBlogCategory, getPlaceholderBrand, getPlaceholderCategory, getPlaceholderProduct, parseRangeStr, pascalCase, stringSorter, stringToSlug, useTranslation, validatePhoneNumber };
+export { AccountInfoForm, index$3 as AccountPage, AddressForm, addresses as AddressesPage, Analytics, AnalyticsBody, AnalyticsHead, index$5 as BlogPage, _slug_$2 as BlogSlugPage, cart as CartPage, _id_$1 as CheckoutPage, ContactForm, _slug_ as CustomPage, editor$1 as EditorPage, EmailRule, EqualsRule, favoriteProducts as FavoriteProductsPage, ForgotPasswordForm, forgotPassword as ForgotPasswordPage, IkasAmountTypeEnum$1 as IkasAmountTypeEnum, IkasApplicableProductFilterValue, IkasBaseStore, IkasBlog, IkasBlogAPI, IkasBlogCategory, IkasBlogCategoryList, IkasBlogCategoryListPropValue, IkasBlogCategoryListType, IkasBlogCategoryPropValue, IkasBlogContent, IkasBlogList, IkasBlogListPropValue, IkasBlogListType, IkasBlogMetaData, IkasBlogMetadataTargetType, IkasBlogPropValue, IkasBlogTag, IkasBlogWriter, IkasBrand, IkasBrandAPI, IkasBrandList, IkasBrandListPropValue, IkasBrandListSortType, IkasBrandListType, IkasBrandPropValue, IkasCardAssociation, IkasCardType, IkasCartAPI, IkasCategory, IkasCategoryAPI, IkasCategoryList, IkasCategoryListPropValue, IkasCategoryListSortType, IkasCategoryListType, IkasCategoryPropValue, IkasCheckout, IkasCheckoutAPI, IkasCheckoutRecoveryEmailStatus, IkasCheckoutRecoveryStatus, IkasCheckoutStatus, IkasCityAPI, IkasComponentRenderer, IkasContactForm, IkasContactFormAPI, IkasCountryAPI, IkasCustomer, IkasCustomerAPI, IkasCustomerAddress, IkasDistrictAPI, IkasFavoriteProduct, IkasFavoriteProductAPI, IkasHTMLMetaData, IkasHTMLMetaDataAPI, IkasHTMLMetaDataTargetType, IkasImage, IkasLinkPropValue, IkasLinkType, IkasMerchantAPI, IkasMerchantSettings, IkasNavigationLink, IkasOrder, IkasOrderCancelledReason, IkasOrderLineItem, IkasOrderPackageFulfillStatus, IkasOrderPackageStatus, IkasOrderPaymentStatus, IkasOrderRefundSettings, IkasOrderShippingMethod, IkasOrderStatus, IkasOrderTransaction, IkasPage, IkasPageComponentPropValue, IkasPageDataProvider, IkasPageEditor, IkasPageHead, IkasPaymentMethod, IkasProduct, IkasProductAttribute, IkasProductAttributeAPI, IkasProductAttributeType, IkasProductAttributeValue, IkasProductDetail, IkasProductDetailPropValue, IkasProductFilter, IkasProductFilterDisplayType, IkasProductFilterSettings, IkasProductFilterSortType, IkasProductFilterType, IkasProductFilterValue, IkasProductList, IkasProductListPropValue, IkasProductListSortType, IkasProductListType, IkasProductPrice, IkasProductSearchAPI, IkasProductType, IkasProductVariant, IkasProductVariantType, IkasShippingMethod, IkasShippingMethodEnum, IkasStateAPI, IkasStorefrontConfig, IkasTheme, IkasThemeComponent, IkasThemeComponentProp, IkasThemeComponentPropType, IkasThemeCustomData, IkasThemePage, IkasThemePageComponent, IkasThemePageType, IkasThemeSettings, IkasTransactionStatusEnum, IkasTransactionTypeEnum, IkasVariantSelectionType, IkasVariantType, IkasVariantTypeAPI, IkasVariantValue, Image, home as IndexPage, LessThanRule, LoginForm, login as LoginPage, MaxRule, MinRule, _404 as NotFoundPage, _id_$2 as OrderDetailPage, OrderLineItemStatusEnum$1 as OrderLineItemStatusEnum, index$4 as OrdersPage, PhoneRule, RangeValue, RecoverPasswordForm, recoverPassword as RecoverPasswordPage, RegisterForm, register as RegisterPage, RequiredRule, search as SearchPage, index$2 as SlugPage, ValidationRule, Validator, ValidatorErrorType, apollo, createTranslationInputData, decodeBase64, findAllIndexes, formatDate, formatMoney, getPlaceholderBlog, getPlaceholderBlogCategory, getPlaceholderBrand, getPlaceholderCategory, getPlaceholderProduct, parseRangeStr, pascalCase, stringSorter, stringToSlug, useTranslation, validatePhoneNumber };

package/build/index.js

@@ -17885,13 +17885,13 @@ var FacebookPixel = /** @class */ (function () {
             console.error(err);
         }
     };
-    FacebookPixel.addToCart = function (item, quantity) {
+    FacebookPixel.addToCart = function (item, quantity, eventId) {
         try {
             !isServer &&
                 window.fbq &&
                 window.fbq("track", "AddToCart", item instanceof IkasProductDetail
                     ? productToFBPItem(item, quantity)
-                    : orderLineItemToFBPItem(item, quantity));
+                    : orderLineItemToFBPItem(item, quantity), { eventId: eventId });
             return;
         }
         catch (err) {
@@ -17909,11 +17909,11 @@ var FacebookPixel = /** @class */ (function () {
             console.error(err);
         }
     };
-    FacebookPixel.purchase = function (checkout, orderId) {
+    FacebookPixel.purchase = function (checkout, eventId) {
         try {
             !isServer &&
                 window.fbq &&
-                window.fbq("track", "Purchase", beginCheckoutFBPItem(checkout));
+                window.fbq("track", "Purchase", beginCheckoutFBPItem(checkout), { eventId: eventId });
             return;
         }
         catch (err) {
@@ -22523,7 +22523,7 @@ var IkasCartStore = /** @class */ (function () {
         this.addItem = function (variant, product, initialQuantity) {
             if (initialQuantity === void 0) { initialQuantity = 1; }
             return __awaiter(_this, void 0, void 0, function () {
-                var existingItem, input, cart, err_2;
+                var existingItem, input, cart, eventId, err_2;
                 var _a, _b, _c;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
@@ -22562,7 +22562,10 @@ var IkasCartStore = /** @class */ (function () {
                             _d.sent();
                             _d.label = 3;
                         case 3:
-                            Analytics.addToCart(new IkasProductDetail(product, variant.variantValues), initialQuantity);
+                            if (this.cart) {
+                                eventId = this.cart.id + "-" + this.cart.updatedAt;
+                                Analytics.addToCart(new IkasProductDetail(product, variant.variantValues), initialQuantity, eventId);
+                            }
                             return [3 /*break*/, 5];
                         case 4:
                             err_2 = _d.sent();
@@ -22574,7 +22577,7 @@ var IkasCartStore = /** @class */ (function () {
             });
         };
         this.changeItemQuantity = function (item, quantity) { return __awaiter(_this, void 0, void 0, function () {
-            var input, cart, oldQuantity, err_3;
+            var input, cart, eventId, oldQuantity, err_3;
             var _a, _b, _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
@@ -22608,12 +22611,15 @@ var IkasCartStore = /** @class */ (function () {
                         _d.label = 3;
                     case 3:
                         this.removeCardIfEmpty();
-                        oldQuantity = item.quantity;
-                        if (oldQuantity > quantity) {
-                            Analytics.removeFromCart(item, oldQuantity - quantity);
-                        }
-                        else {
-                            Analytics.addToCart(item, quantity - oldQuantity);
+                        if (this.cart) {
+                            eventId = this.cart.id + "-" + this.cart.updatedAt;
+                            oldQuantity = item.quantity;
+                            if (oldQuantity > quantity) {
+                                Analytics.removeFromCart(item, oldQuantity - quantity);
+                            }
+                            else {
+                                Analytics.addToCart(item, quantity - oldQuantity, eventId);
+                            }
                         }
                         return [3 /*break*/, 5];
                     case 4:
@@ -22894,6 +22900,14 @@ var CheckoutViewModel = /** @class */ (function () {
                         this.checkShippingCountries();
                         _b.label = 2;
                     case 2:
+                        // Skip shipping if there is only 1 shipping method
+                        if (this.step === CheckoutStep.SHIPPING &&
+                            this.checkout.availableShippingMethods.length === 1) {
+                            this.step = CheckoutStep.PAYMENT;
+                            this.router.replace("/checkout/" + this.checkout.id + "?step=" + this.step, undefined, {
+                                shallow: true,
+                            });
+                        }
                         if (!(this.step === CheckoutStep.PAYMENT ||
                             this.step === CheckoutStep.SUCCESS)) return [3 /*break*/, 4];
                         return [4 /*yield*/, this.listPaymentGateways()];
@@ -24109,9 +24123,9 @@ var Analytics = /** @class */ (function () {
             console.error(err);
         }
     };
-    Analytics.addToCart = function (item, quantity) {
+    Analytics.addToCart = function (item, quantity, eventId) {
         try {
-            FacebookPixel.addToCart(item, quantity);
+            FacebookPixel.addToCart(item, quantity, eventId);
             GoogleTagManager.addToCart(item, quantity);
         }
         catch (err) {
@@ -24139,11 +24153,11 @@ var Analytics = /** @class */ (function () {
             console.error(err);
         }
     };
-    Analytics.purchase = function (checkout, orderId) {
+    Analytics.purchase = function (checkout, eventId) {
         try {
             localStorage.removeItem(LS_BEGIN_CHECKOUT_KEY);
-            FacebookPixel.purchase(checkout, orderId);
-            GoogleTagManager.purchase(checkout, orderId);
+            FacebookPixel.purchase(checkout, eventId);
+            GoogleTagManager.purchase(checkout, eventId);
         }
         catch (err) {
             console.error(err);
@@ -24245,11 +24259,13 @@ var AnalyticsHead = function (_a) {
         blockHTML && (React.createElement("script", { dangerouslySetInnerHTML: {
                 __html: "dataLayer = [{'gtm.blocklist': ['html']}];",
             } })),
+        gtmId && (React.createElement(Script__default['default'], { src: "https://www.googletagmanager.com/gtm.js?id=" + gtmId })),
         gtmId && (React.createElement("script", { dangerouslySetInnerHTML: {
                 __html: "(function(w,l){" +
                     "w[l] = w[l] || [];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});" +
                     "})(window,'dataLayer');",
             } })),
+        fbpId && (React.createElement(Script__default['default'], { src: "https://connect.facebook.net/en_US/fbevents.js" })),
         fbpId && (React.createElement("script", { dangerouslySetInnerHTML: {
                 __html: "!function(f,b,e,v,n,t,s)\n          {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n          n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n          if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n          n.queue=[];}(window);\n          fbq('init', '" + fbpId + "');\n          fbq('track', 'PageView');",
             } }))));
@@ -24258,11 +24274,9 @@ var AnalyticsBody = function () {
     var gtmId = IkasStorefrontConfig.gtmId;
     var fbpId = IkasStorefrontConfig.fbpId;
     return (React.createElement(React.Fragment, null,
-        gtmId && (React.createElement(Script__default['default'], { src: "https://www.googletagmanager.com/gtm.js?id=" + gtmId })),
         gtmId && (React.createElement("noscript", { dangerouslySetInnerHTML: {
                 __html: "<iframe src=\"https://www.googletagmanager.com/ns.html?id=" + gtmId + "\" height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe>",
             } })),
-        fbpId && (React.createElement(Script__default['default'], { src: "https://connect.facebook.net/en_US/fbevents.js" })),
         fbpId && (React.createElement("noscript", { dangerouslySetInnerHTML: {
                 __html: "<img height=\"1\" width=\"1\" style=\"display:none\" \n        src=\"https://www.facebook.com/tr?id=" + fbpId + "&ev=PageView&noscript=1\"/>",
             } }))));
@@ -24959,11 +24973,15 @@ var IkasCustomerStore = /** @class */ (function () {
     };
     IkasCustomerStore.prototype.onProductView = function (productId, variantId) {
         return __awaiter(this, void 0, void 0, function () {
-            var isSuccess;
+            var existingItem, isSuccess;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!this.customer) return [3 /*break*/, 2];
+                        existingItem = this._lastViewedProducts.find(function (lvp) { return lvp.productId === productId; });
+                        if (existingItem) {
+                            return [2 /*return*/];
+                        }
                         return [4 /*yield*/, IkasCustomerAPI.saveLastViewedProducts({
                                 customerId: this.customer.id,
                                 products: [
@@ -27619,15 +27637,25 @@ 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) {
-                return "/" + metaData.slug + "-" + this.selectedVariantValues
-                    .map(function (vv) { return vv.slug; })
-                    .join("-");
-            }
-            return "/" + metaData.slug;
+            var variantParams = this.product.variantTypes
+                .map(function (pvt) {
+                var vt = pvt.variantType;
+                var selectedVariant = vt.values.find(function (vv) {
+                    return _this.selectedVariantValues.some(function (svv) { return svv.id === vv.id; });
+                });
+                if (selectedVariant)
+                    return vt.slug + "=" + selectedVariant.slug;
+            })
+                .filter(function (param) { return !!param; })
+                .join("&");
+            if (variantParams)
+                return "/" + metaData.slug + "?" + variantParams;
+            else
+                return "/" + metaData.slug;
         },
         enumerable: false,
         configurable: true
@@ -27674,6 +27702,7 @@ 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) {
@@ -27682,9 +27711,20 @@ var IkasProductDetail = /** @class */ (function () {
             return vv;
         });
         this.selectedVariantValues = selectedVariantValues;
-        var newUrl = "/" + metaData.slug + "-" + this.selectedVariantValues
-            .map(function (vv) { return vv.slug; })
-            .join("-");
+        var variantParams = this.product.variantTypes
+            .map(function (pvt) {
+            var vt = pvt.variantType;
+            var selectedVariant = vt.values.find(function (vv) {
+                return _this.selectedVariantValues.some(function (svv) { return svv.id === vv.id; });
+            });
+            if (selectedVariant)
+                return vt.slug + "=" + selectedVariant.slug;
+        })
+            .filter(function (param) { return !!param; })
+            .join("&");
+        var newUrl = "/" + metaData.slug;
+        if (variantParams)
+            newUrl = "/" + metaData.slug + "?" + variantParams;
         if (newUrl === window.location.pathname)
             return;
         var isShallow = process.env.NODE_ENV !== "production";
@@ -33261,15 +33301,33 @@ function createProductSchema(productDetail) {
     var _a, _b;
     try {
         var isBrowser = typeof window !== "undefined";
+        // TODO this code copy-pasted, organize this block
         if (isBrowser) {
-            var urlParams = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams.get("vid");
+            var urlParams_1 = new URLSearchParams(window.location.search);
+            var vid_1 = urlParams_1.get("vid");
             if (vid_1) {
                 var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
                 if (variant) {
                     productDetail.selectedVariantValues = variant.variantValues;
                 }
             }
+            else {
+                var productVariantTypeSlugs = productDetail.product.variantTypes.map(function (vt) { return vt.variantType.slug; });
+                var selectedVariantValues_1 = [];
+                productVariantTypeSlugs.forEach(function (slug, vtIndex) {
+                    var productVariantType = productDetail.product.variantTypes[vtIndex];
+                    var variantValueSlug = urlParams_1.get(slug);
+                    if (variantValueSlug) {
+                        var variantValue = productVariantType.variantType.values.find(function (v) { return v.slug === variantValueSlug; });
+                        if (variantValue)
+                            selectedVariantValues_1.push(variantValue);
+                    }
+                });
+                if (selectedVariantValues_1.length ===
+                    productDetail.selectedVariantValues.length) {
+                    productDetail.selectedVariantValues = selectedVariantValues_1;
+                }
+            }
         }
         var productUrl = isBrowser
             ? "https://" + window.location.hostname + productDetail.href
@@ -33536,7 +33594,7 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider.prototype.getPageSpecificData = function () {
         var _a, _b;
         return __awaiter(this, void 0, void 0, function () {
-            var slug, metaDataList, metaData, handleBrandPage, handleCategoryPage, handleBlogPage, handleBlogCategoryPage, _c;
+            var slug, metaDataList, metaData, handleProductPage, handleBrandPage, handleCategoryPage, handleBlogPage, handleBlogCategoryPage, _c;
             var _this = this;
             return __generator(this, function (_d) {
                 switch (_d.label) {
@@ -33565,12 +33623,47 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 2: return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData(slug)];
                     case 3:
                         metaDataList = _d.sent();
-                        if (!metaDataList || !metaDataList.length) {
-                            return [2 /*return*/, this.getPageSpecificProduct()];
-                        }
+                        if (!metaDataList || !metaDataList.length)
+                            return [2 /*return*/];
                         _d.label = 4;
                     case 4:
                         metaData = metaDataList[0];
+                        if (!metaData.targetId)
+                            return [2 /*return*/];
+                        handleProductPage = function () { return __awaiter(_this, void 0, void 0, function () {
+                            var productsResponse, product, displayedVariantType, inStockVariant;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, IkasProductSearchAPI.searchProducts({
+                                            productIdList: [metaData.targetId],
+                                            priceListId: IkasStorefrontConfig.priceListId,
+                                            salesChannelId: IkasStorefrontConfig.salesChannelId,
+                                        })];
+                                    case 1:
+                                        productsResponse = _a.sent();
+                                        if (!(productsResponse === null || productsResponse === void 0 ? void 0 : productsResponse.data.length)) {
+                                            return [2 /*return*/];
+                                        }
+                                        product = productsResponse.data[0];
+                                        this.pageSpecificData = new IkasProductDetail(product, product.variants[0].variantValues);
+                                        // Select the first displayed in stock variant
+                                        if (this.pageSpecificData.displayedVariantTypes.length) {
+                                            displayedVariantType = this
+                                                .pageSpecificData.displayedVariantTypes[0];
+                                            if (displayedVariantType.displayedVariantValues.length) {
+                                                inStockVariant = displayedVariantType.displayedVariantValues.find(function (dvv) { return dvv.hasStock; });
+                                                if (inStockVariant) {
+                                                    this.pageSpecificData.selectedVariantValues =
+                                                        inStockVariant.variant.variantValues;
+                                                }
+                                            }
+                                        }
+                                        this.pageType = exports.IkasThemePageType.PRODUCT;
+                                        this.setPageMetaData(metaData);
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); };
                         handleBrandPage = function () { return __awaiter(_this, void 0, void 0, function () {
                             var brandsResponse, brand;
                             return __generator(this, function (_a) {
@@ -33662,7 +33755,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 6: return [2 /*return*/, _d.sent()];
                     case 7: return [4 /*yield*/, handleCategoryPage()];
                     case 8: return [2 /*return*/, _d.sent()];
-                    case 9: return [4 /*yield*/, this.getPageSpecificProduct()];
+                    case 9: return [4 /*yield*/, handleProductPage()];
                     case 10: return [2 /*return*/, _d.sent()];
                     case 11: return [4 /*yield*/, handleBlogPage()];
                     case 12: return [2 /*return*/, _d.sent()];
@@ -33674,91 +33767,6 @@ 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, _i, _a, variant, values, slugPart, displayedVariantType, inStockVariant;
-            var _this = this;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        slug = this.pageParams.slug;
-                        if (!slug) {
-                            console.log("Slug not found for getPageSpecificProduct");
-                        }
-                        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:
-                                        if (!slug)
-                                            return [2 /*return*/];
-                                        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 = _b.sent();
-                        if (!metaDataResponse)
-                            return [2 /*return*/];
-                        return [4 /*yield*/, IkasProductSearchAPI.searchProducts({
-                                productIdList: [metaDataResponse.metaData.targetId],
-                                priceListId: IkasStorefrontConfig.priceListId,
-                                salesChannelId: IkasStorefrontConfig.salesChannelId,
-                            })];
-                    case 2:
-                        productsResponse = _b.sent();
-                        if (!(productsResponse === null || productsResponse === void 0 ? void 0 : productsResponse.data.length))
-                            return [2 /*return*/];
-                        product = productsResponse.data[0];
-                        isMainProductSlug = slug.length === metaDataResponse.slug.length;
-                        selectedVariantValues = [];
-                        if (!isMainProductSlug) {
-                            variantSlugPart = slug.slice(metaDataResponse.slug.length + 1);
-                            for (_i = 0, _a = product.variants; _i < _a.length; _i++) {
-                                variant = _a[_i];
-                                values = variant.variantValues;
-                                slugPart = values.map(function (vv) { return vv.slug; }).join("-");
-                                if (slugPart === variantSlugPart) {
-                                    selectedVariantValues = values;
-                                    break;
-                                }
-                            }
-                        }
-                        this.pageSpecificData = new IkasProductDetail(product, selectedVariantValues.length
-                            ? selectedVariantValues
-                            : product.variants[0].variantValues);
-                        // Select the first displayed in stock variant
-                        if (!selectedVariantValues.length &&
-                            this.pageSpecificData.displayedVariantTypes.length) {
-                            displayedVariantType = this.pageSpecificData
-                                .displayedVariantTypes[0];
-                            if (displayedVariantType.displayedVariantValues.length) {
-                                inStockVariant = displayedVariantType.displayedVariantValues.find(function (dvv) { return dvv.hasStock; });
-                                if (inStockVariant) {
-                                    this.pageSpecificData.selectedVariantValues =
-                                        inStockVariant.variant.variantValues;
-                                }
-                            }
-                        }
-                        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;
@@ -34026,14 +34034,31 @@ var IkasPageDataProvider = /** @class */ (function () {
         var _propValue = propValue;
         var productDetail = new IkasProductDetail(_propValue.product, _propValue.selectedVariantValues);
         if (isBrowser) {
-            var urlParams = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams.get("vid");
+            var urlParams_1 = new URLSearchParams(window.location.search);
+            var vid_1 = urlParams_1.get("vid");
             if (vid_1) {
                 var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
                 if (variant) {
                     productDetail.selectedVariantValues = variant.variantValues;
                 }
             }
+            else {
+                var productVariantTypeSlugs = productDetail.product.variantTypes.map(function (vt) { return vt.variantType.slug; });
+                var selectedVariantValues_1 = [];
+                productVariantTypeSlugs.forEach(function (slug, vtIndex) {
+                    var productVariantType = productDetail.product.variantTypes[vtIndex];
+                    var variantValueSlug = urlParams_1.get(slug);
+                    if (variantValueSlug) {
+                        var variantValue = productVariantType.variantType.values.find(function (v) { return v.slug === variantValueSlug; });
+                        if (variantValue)
+                            selectedVariantValues_1.push(variantValue);
+                    }
+                });
+                if (selectedVariantValues_1.length ===
+                    productDetail.selectedVariantValues.length) {
+                    productDetail.selectedVariantValues = selectedVariantValues_1;
+                }
+            }
         }
         return new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues, router);
     };
@@ -61303,6 +61328,7 @@ var StepSuccess = mobxReactLite.observer(function (_a) {
     var t = useTranslation().t;
     var _f = React.useState(false), isContactModalVisible = _f[0], setContactModalVisible = _f[1];
     React.useEffect(function () {
+        var _a;
         if (typeof localStorage !== "undefined") {
             var lsCartId = localStorage.getItem(CART_LS_KEY);
             var lsCheckoutId = localStorage.getItem(CHECKOUT_LS_KEY);
@@ -61311,7 +61337,7 @@ var StepSuccess = mobxReactLite.observer(function (_a) {
             if (lsCheckoutId && lsCheckoutId === vm.checkout.id)
                 localStorage.removeItem(CHECKOUT_LS_KEY);
         }
-        Analytics.purchase(vm.checkout, vm.checkout.orderNumber);
+        Analytics.purchase(vm.checkout, ((_a = vm.successTransaction) === null || _a === void 0 ? void 0 : _a.id) || "");
     }, []);
     var customerName = (((_b = vm.checkout.customer) === null || _b === void 0 ? void 0 : _b.firstName) || "") +
         " " +
@@ -61529,13 +61555,30 @@ var OrderStatus = mobxReactLite.observer(function (_a) {
     })) === null || _d === void 0 ? void 0 : _d.text : ""));
 });
 
+var IMAGE_SIZES = [
+    180,
+    360,
+    540,
+    720,
+    900,
+    1080,
+    1296,
+    1512,
+    1728,
+    1950,
+    2560,
+    3840,
+];
 var Image = function (_a) {
     var image = _a.image, others = __rest(_a, ["image"]);
     var loader = function (_a) {
         var width = _a.width;
-        return image.getSrc(width);
+        var closest = IMAGE_SIZES.reduce(function (prev, curr) {
+            return Math.abs(curr - width) < Math.abs(prev - width) ? curr : prev;
+        });
+        return image.getSrc(closest);
     };
-    return (React.createElement(NextImage__default['default'], __assign({}, others, { loader: loader, quality: 100, src: image.src, alt: others.alt || "Image" })));
+    return (React.createElement(NextImage__default['default'], __assign({}, others, { loader: loader, quality: 100, src: image.src, alt: others.alt || "Image", unoptimized: true })));
 };
 
 var css_248z$m = ".style-module_StepContainer__1O2dD {\n  width: 100%; }\n  .style-module_StepContainer__1O2dD .style-module_Step__1iOYA {\n    width: 100%; }\n    .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 {\n      padding: 24px 0;\n      border-top: 1px solid var(--checkout-border-color); }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2.style-module_First__cAzdJ {\n        border-top: none; }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitleTop__3zfsj {\n        display: flex;\n        align-items: center; }\n        .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitleTop__3zfsj.style-module_WithRightContent__2fqb1 {\n          align-items: flex-start; }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepCircle__36A5q {\n        width: 32px;\n        height: 32px;\n        border-radius: 100%;\n        border: 1px solid var(--checkout-button-bg-color);\n        color: var(--checkout-button-bg-color);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin-right: 16px;\n        flex: 0 0 auto;\n        font-size: 20px; }\n        .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepCircle__36A5q.style-module_Selected__3j91L {\n          background-color: var(--checkout-button-bg-color);\n          color: var(--checkout-button-text-color); }\n          .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepCircle__36A5q.style-module_Selected__3j91L svg {\n            transform: scale(1.5);\n            position: relative;\n            right: -1px; }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitle__10YDP {\n        font-size: 22px;\n        color: var(--checkout-primary-text-color);\n        flex: 0 0 auto;\n        font-weight: 600;\n        line-height: 32px; }\n        .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitle__10YDP.style-module_Light__15wSX {\n          color: var(--checkout-button-disabled-text-color); }\n      .style-module_StepContainer__1O2dD .style-module_Step__1iOYA .style-module_StepTitleContainer__2GUg2 .style-module_StepTitleRightContent__2Q43m {\n        flex: 1 1 auto; }\n  .style-module_StepContainer__1O2dD .style-module_StepContent__20QIi {\n    padding-bottom: 24px;\n    padding-left: 48px;\n    width: 100%; }\n  @media only screen and (max-width: 1000px) {\n    .style-module_StepContainer__1O2dD {\n      padding: 0 24px; }\n      .style-module_StepContainer__1O2dD .style-module_StepContent__20QIi {\n        padding-left: 0px; } }\n";
@@ -61751,7 +61794,7 @@ var Steps = mobxReactLite.observer(function (_a) {
             React.createElement(StepSummaryAddress, { vm: vm }))) : undefined),
         new Step(t("checkout-page:shipping"), vm.step === CheckoutStep.SHIPPING, vm.step === CheckoutStep.PAYMENT, vm.step === CheckoutStep.PAYMENT ? (React.createElement("div", { className: styles$5.AdressStepInfo },
             React.createElement(StepSummaryShipping, { vm: vm }),
-            React.createElement("div", { className: styles$5.EditBtn, onClick: vm.onBackToShippingClick }, t("checkout-page:actions.edit")))) : undefined, vm.step === CheckoutStep.PAYMENT ? (React.createElement("div", { className: styles$5.AddressStepInfoMobile },
+            vm.checkout.availableShippingMethods.length > 1 && (React.createElement("div", { className: styles$5.EditBtn, onClick: vm.onBackToShippingClick }, t("checkout-page:actions.edit"))))) : undefined, vm.step === CheckoutStep.PAYMENT ? (React.createElement("div", { className: styles$5.AddressStepInfoMobile },
             React.createElement(StepSummaryShipping, { vm: vm }))) : undefined),
         new Step(t("checkout-page:payment"), vm.step === CheckoutStep.PAYMENT, false),
     ];
@@ -62300,21 +62343,6 @@ var Page$1 = function (_a) {
 var index$1 = mobxReactLite.observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
-        // const targetTypes = [
-        //   IkasHTMLMetaDataTargetType.BRAND,
-        //   IkasHTMLMetaDataTargetType.CATEGORY,
-        // ];
-        // const metaData = await IkasHTMLMetaDataAPI.listHTMLMetaData(
-        //   undefined,
-        //   undefined,
-        //   targetTypes
-        // );
-        // metaData.map((m) => ({
-        //   params: {
-        //     slug: m.slug,
-        //     originalSlug: m.slug,
-        //   },
-        // }))
         return [2 /*return*/, {
                 paths: [],
                 fallback: "blocking",
@@ -63447,6 +63475,7 @@ exports.SlugPage = index$2;
 exports.ValidationRule = ValidationRule;
 exports.Validator = Validator;
 exports.apollo = apollo;
+exports.createTranslationInputData = createTranslationInputData;
 exports.decodeBase64 = decodeBase64;
 exports.findAllIndexes = findAllIndexes;
 exports.formatDate = formatDate;

package/build/utils/index.d.ts

@@ -2,4 +2,4 @@ export * from "./providers/page-data";
 export * from "./providers/placeholders";
 export * from "./helper";
 export * from "./currency";
-export { useTranslation } from "./i18n";
+export { useTranslation, createTranslationInputData } from "./i18n";

package/build/utils/providers/page-data.d.ts

@@ -46,7 +46,6 @@ export declare class IkasPageDataProvider {
     getMerchantSettings(): Promise<void>;
     getPageData(): Promise<void>;
     getPageSpecificData(): Promise<void>;
-    getPageSpecificProduct(): Promise<void>;
     getPageComponentPropValues(pageComponent: IkasThemePageComponent): Promise<IkasPageComponentPropValue>;
     getPageComponentPropValue(pageComponent: IkasThemePageComponent, prop: IkasThemeComponentProp): Promise<any>;
     private setPageMetaData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "0.0.165-alpha.1",
+  "version": "0.0.165-alpha.10",
   "main": "./build/index.js",
   "module": "./build/index.es.js",
   "author": "Umut Ozan Yıldırım",