@ikas/storefront 0.0.168-alpha.9 → 0.0.169-alpha.2

package/build/index.js

@@ -11044,7 +11044,7 @@ var Apollo = /** @class */ (function () {
             });
             var authLink = setContext(function (_request, _a) {
                 var headers = _a.headers;
-                var newHeaders = __assign(__assign({}, headers), { "x-api-key": apiKey || IkasStorefrontConfig.config.apiKey });
+                var newHeaders = __assign(__assign({}, headers), { "x-api-key": apiKey || IkasStorefrontConfig.config.apiKey, "x-sfid": IkasStorefrontConfig.storefrontId, "x-sfrid": IkasStorefrontConfig.storefrontRoutingId });
                 if (Apollo.customerToken) {
                     newHeaders.Authorization = "Bearer " + Apollo.customerToken;
                 }
@@ -12085,15 +12085,14 @@ function formatDate(date) {
         minute: "numeric",
         hour12: false,
     };
+    var locale = IkasStorefrontConfig.getCurrentLocale();
     if (typeof navigator !== "undefined") {
         options.hour12 = is12Hour(navigator.language);
-        return new Intl.DateTimeFormat(navigator.language, options).format(date);
     }
     else {
-        var locale = IkasStorefrontConfig.getCurrentLocale();
         options.hour12 = is12Hour(locale);
-        return new Intl.DateTimeFormat(locale, options).format(date);
     }
+    return new Intl.DateTimeFormat(locale, options).format(date);
 }
 function tryForEach(items, callback, printErrors) {
     if (printErrors === void 0) { printErrors = false; }
@@ -19843,6 +19842,8 @@ var IkasPaymentGateway = /** @class */ (function () {
         this.id = data.id || null;
         this.name = data.name || "";
         this.code = data.code || "";
+        this.type = data.type || IkasPaymentGatewayType.INTERNAL;
+        this.logoUrl = data.logoUrl || null;
         this.testMode = data.testMode || null;
         this.description = data.description || null;
         this.additionalPrices =
@@ -19920,7 +19921,12 @@ var IkasPaymentGatewayAdditionalPriceAmountType;
 (function (IkasPaymentGatewayAdditionalPriceAmountType) {
     IkasPaymentGatewayAdditionalPriceAmountType["AMOUNT"] = "AMOUNT";
     IkasPaymentGatewayAdditionalPriceAmountType["RATIO"] = "RATIO";
-})(IkasPaymentGatewayAdditionalPriceAmountType || (IkasPaymentGatewayAdditionalPriceAmountType = {}));
+})(IkasPaymentGatewayAdditionalPriceAmountType || (IkasPaymentGatewayAdditionalPriceAmountType = {}));
+var IkasPaymentGatewayType;
+(function (IkasPaymentGatewayType) {
+    IkasPaymentGatewayType["EXTERNAL"] = "EXTERNAL";
+    IkasPaymentGatewayType["INTERNAL"] = "INTERNAL";
+})(IkasPaymentGatewayType || (IkasPaymentGatewayType = {}));
 
 var IkasCheckout = /** @class */ (function () {
     function IkasCheckout(data) {
@@ -23279,6 +23285,16 @@ var IkasCartStore = /** @class */ (function () {
             _this.cart = undefined;
             _this._checkoutId = undefined;
         };
+        this.waitUntilInitialized = function () {
+            return new Promise(function (resolve) {
+                var interval = setInterval(function () {
+                    if (_this.cartLoadFinished) {
+                        clearInterval(interval);
+                        resolve(null);
+                    }
+                }, 100);
+            });
+        };
         this.baseStore = baseStore;
         mobx.makeAutoObservable(this);
     }
@@ -23576,6 +23592,7 @@ var CheckoutViewModel = /** @class */ (function () {
                         _b.label = 11;
                     case 11:
                         this.isCheckoutLoaded = true;
+                        Analytics.checkoutStep(this.checkout, this.step);
                         return [2 /*return*/];
                 }
             });
@@ -24150,7 +24167,10 @@ var CheckoutViewModel = /** @class */ (function () {
                         if (!this.checkout.selectedPaymentGateway)
                             return [2 /*return*/];
                         return [4 /*yield*/, IkasCheckoutAPI.createSaleTransactionWithCheckout(this.checkout.id, this.checkout.selectedPaymentGateway.id, this.checkout.selectedPaymentGateway.paymentMethodType ===
-                                IkasPaymentMethodType.CREDIT_CARD && this.cardData
+                                IkasPaymentMethodType.CREDIT_CARD &&
+                                this.checkout.selectedPaymentGateway.type ===
+                                    IkasPaymentGatewayType.INTERNAL &&
+                                this.cardData
                                 ? this.cardData.toInput()
                                 : undefined)];
                     case 1:
@@ -24229,7 +24249,9 @@ var CheckoutViewModel = /** @class */ (function () {
             var paymentGateway = _this.paymentGateways[index];
             _this.checkout.selectedPaymentGateway = paymentGateway;
             if (_this.step !== CheckoutStep.SUCCESS) {
-                if (paymentGateway.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD) {
+                if (paymentGateway.paymentMethodType ===
+                    IkasPaymentMethodType.CREDIT_CARD &&
+                    paymentGateway.type === IkasPaymentGatewayType.INTERNAL) {
                     _this.cardData = new CreditCardData();
                 }
                 _this.installmentInfo = undefined;
@@ -24389,15 +24411,16 @@ var CheckoutViewModel = /** @class */ (function () {
     });
     Object.defineProperty(CheckoutViewModel.prototype, "canPerformPayment", {
         get: function () {
-            var _a, _b, _c;
+            var _a, _b;
             if (this.checkoutSettings.showTermsAndConditionsCheckbox &&
                 !this.isTermsAndConditionsChecked)
                 return false;
+            var pg = this.checkout.selectedPaymentGateway;
             return (this.canProceedToShipping &&
                 !!((_a = this.checkout.billingAddress) === null || _a === void 0 ? void 0 : _a.isValid) &&
-                (((_b = this.checkout.selectedPaymentGateway) === null || _b === void 0 ? void 0 : _b.paymentMethodType) ===
-                    IkasPaymentMethodType.CREDIT_CARD
-                    ? (_c = this.cardData) === null || _c === void 0 ? void 0 : _c.isValid : true));
+                ((pg === null || pg === void 0 ? void 0 : pg.paymentMethodType) === IkasPaymentMethodType.CREDIT_CARD &&
+                    pg.type === IkasPaymentGatewayType.INTERNAL
+                    ? (_b = this.cardData) === null || _b === void 0 ? void 0 : _b.isValid : true));
         },
         enumerable: false,
         configurable: true
@@ -24806,6 +24829,7 @@ var IkasEventType;
     IkasEventType["VIEW_CART"] = "VIEW_CART";
     IkasEventType["VIEW_CATEGORY"] = "VIEW_CATEGORY";
     IkasEventType["VIEW_SEARCH_RESULTS"] = "VIEW_SEARCH_RESULTS";
+    IkasEventType["VIEW_LISTING"] = "VIEW_LISTING";
     IkasEventType["CONTACT_FORM"] = "CONTACT_FORM";
 })(IkasEventType || (IkasEventType = {}));
 
@@ -25209,6 +25233,24 @@ var Analytics = /** @class */ (function () {
             console.error(err);
         }
     };
+    Analytics.viewListing = function (productDetails) {
+        try {
+            if (Analytics.subscribers.length) {
+                var cloneProductDetails_2 = cloneDeep_1(productDetails).map(function (p) { return new IkasProductDetail(p.product, p.selectedVariantValues); });
+                tryForEach(Analytics.subscribers, function (s) {
+                    s.callback({
+                        type: IkasEventType.VIEW_LISTING,
+                        data: {
+                            productDetails: cloneProductDetails_2,
+                        },
+                    });
+                });
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+    };
     Analytics.contactForm = function (form) {
         try {
             FacebookPixel.contactForm();
@@ -37626,6 +37668,7 @@ var CheckoutRequirementEnum;
 var CheckoutStatusEnum;
 (function (CheckoutStatusEnum) {
     CheckoutStatusEnum["COMPLETED"] = "COMPLETED";
+    CheckoutStatusEnum["KILLED"] = "KILLED";
     CheckoutStatusEnum["OPEN"] = "OPEN";
 })(CheckoutStatusEnum || (CheckoutStatusEnum = {}));
 /**
@@ -37745,6 +37788,12 @@ var PaymentGatewayTransactionFeeTypeEnum;
     PaymentGatewayTransactionFeeTypeEnum["AMOUNT"] = "AMOUNT";
     PaymentGatewayTransactionFeeTypeEnum["RATIO"] = "RATIO";
 })(PaymentGatewayTransactionFeeTypeEnum || (PaymentGatewayTransactionFeeTypeEnum = {}));
+var PaymentGatewayTypeEnum;
+(function (PaymentGatewayTypeEnum) {
+    PaymentGatewayTypeEnum["EXTERNAL"] = "EXTERNAL";
+    PaymentGatewayTypeEnum["INTERNAL"] = "INTERNAL";
+    PaymentGatewayTypeEnum["THIRD_PARTY"] = "THIRD_PARTY";
+})(PaymentGatewayTypeEnum || (PaymentGatewayTypeEnum = {}));
 var PaymentMethodEnum;
 (function (PaymentMethodEnum) {
     PaymentMethodEnum["APP_PAYMENT"] = "APP_PAYMENT";
@@ -37768,6 +37817,7 @@ var ProductAttributeTypeEnum;
     ProductAttributeTypeEnum["HTML"] = "HTML";
     ProductAttributeTypeEnum["MULTIPLE_CHOICE"] = "MULTIPLE_CHOICE";
     ProductAttributeTypeEnum["NUMERIC"] = "NUMERIC";
+    ProductAttributeTypeEnum["PRODUCT"] = "PRODUCT";
     ProductAttributeTypeEnum["TABLE"] = "TABLE";
     ProductAttributeTypeEnum["TEXT"] = "TEXT";
 })(ProductAttributeTypeEnum || (ProductAttributeTypeEnum = {}));
@@ -38025,7 +38075,7 @@ var IkasProductList = /** @class */ (function () {
                         this._minPage = this.page;
                         if (!isInfiteScrollReturn)
                             this._infiniteScrollPage = null;
-                        this.handleViewSearchResults();
+                        this.handleListingEvent();
                         return [2 /*return*/, true];
                     case 12:
                         err_1 = _a.sent();
@@ -38221,6 +38271,9 @@ var IkasProductList = /** @class */ (function () {
             else if (this.isLastViewed) {
                 this.getInitial();
             }
+            else {
+                this.handleListingEvent();
+            }
         }
     }
     Object.defineProperty(IkasProductList.prototype, "sort", {
@@ -38666,9 +38719,9 @@ var IkasProductList = /** @class */ (function () {
         this._searchKeyword = "";
         if (this._pageType !== exports.IkasThemePageType.CATEGORY) {
             this._filterCategoryId = undefined;
-            //@ts-ignore
-            (_b = this._filterCategories) === null || _b === void 0 ? void 0 : _b.forEach(function (fc) { return (fc._isSelected = false); });
         }
+        //@ts-ignore
+        (_b = this._filterCategories) === null || _b === void 0 ? void 0 : _b.forEach(function (fc) { return (fc._isSelected = false); });
         this.applyFilters();
     };
     IkasProductList.prototype.setSortType = function (sortType) {
@@ -38762,10 +38815,13 @@ var IkasProductList = /** @class */ (function () {
             }, 1000);
         });
     };
-    IkasProductList.prototype.handleViewSearchResults = function () {
+    IkasProductList.prototype.handleListingEvent = function () {
         if (this.searchKeyword && this.data.length) {
             Analytics.viewSearchResults(this._searchKeyword, this.data);
         }
+        else if (this.data.length && this._type === exports.IkasProductListType.ALL) {
+            Analytics.viewListing(this.data);
+        }
     };
     return IkasProductList;
 }());
@@ -38913,6 +38969,37 @@ var groupBy = _createAggregator(function(result, value, key) {
 
 var groupBy_1 = groupBy;
 
+var IkasAttributeList = /** @class */ (function () {
+    function IkasAttributeList(productDetail, attributeListPropValue) {
+        this.productDetail = null;
+        this.productDetail = productDetail;
+        this.attributeListPropValue = attributeListPropValue;
+        mobx.makeAutoObservable(this);
+    }
+    Object.defineProperty(IkasAttributeList.prototype, "values", {
+        get: function () {
+            var _this = this;
+            var _a;
+            if (!this.productDetail)
+                return [];
+            var groupedValues = this.productDetail.product.hasVariant
+                ? groupBy_1(this.productDetail.selectedVariant.attributes.filter(function (a) { var _a; return (_a = _this.attributeListPropValue.attributeIds) === null || _a === void 0 ? void 0 : _a.includes(a.productAttributeId || ""); }), "productAttributeId")
+                : groupBy_1(this.productDetail.product.attributes.filter(function (a) { var _a; return (_a = _this.attributeListPropValue.attributeIds) === null || _a === void 0 ? void 0 : _a.includes(a.productAttributeId || ""); }), "productAttributeId");
+            return (((_a = this.attributeListPropValue.attributeIds) === null || _a === void 0 ? void 0 : _a.map(function (attributeId) {
+                var values = groupedValues[attributeId];
+                if ((values === null || values === void 0 ? void 0 : values.length) && values[0].productAttribute)
+                    return {
+                        attribute: values[0].productAttribute,
+                        values: values,
+                    };
+            }).filter(function (v) { return !!v; })) || []);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return IkasAttributeList;
+}());
+
 var Validator = /** @class */ (function () {
     function Validator(model, rules) {
         var _this = this;
@@ -41410,7 +41497,7 @@ var IkasCheckoutAPI = /** @class */ (function () {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        QUERY = src(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      query listPaymentGateway($id: StringFilterInput, $locale: String) {\n        listPaymentGateway(id: $id, locale: $locale) {\n          paymentMethods {\n            name\n            logoUrl\n          }\n          paymentMethodType\n          id\n          name\n          description\n          testMode\n          code\n          additionalPrices {\n            amount\n            amountType\n            name\n            type\n          }\n          translations {\n            description\n            locale\n            name\n          }\n        }\n      }\n    "], ["\n      query listPaymentGateway($id: StringFilterInput, $locale: String) {\n        listPaymentGateway(id: $id, locale: $locale) {\n          paymentMethods {\n            name\n            logoUrl\n          }\n          paymentMethodType\n          id\n          name\n          description\n          testMode\n          code\n          additionalPrices {\n            amount\n            amountType\n            name\n            type\n          }\n          translations {\n            description\n            locale\n            name\n          }\n        }\n      }\n    "])));
+                        QUERY = src(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      query listPaymentGateway($id: StringFilterInput, $locale: String) {\n        listPaymentGateway(id: $id, locale: $locale) {\n          paymentMethods {\n            name\n            logoUrl\n          }\n          paymentMethodType\n          id\n          name\n          description\n          testMode\n          code\n          type\n          logoUrl\n          additionalPrices {\n            amount\n            amountType\n            name\n            type\n          }\n          translations {\n            description\n            locale\n            name\n          }\n        }\n      }\n    "], ["\n      query listPaymentGateway($id: StringFilterInput, $locale: String) {\n        listPaymentGateway(id: $id, locale: $locale) {\n          paymentMethods {\n            name\n            logoUrl\n          }\n          paymentMethodType\n          id\n          name\n          description\n          testMode\n          code\n          type\n          logoUrl\n          additionalPrices {\n            amount\n            amountType\n            name\n            type\n          }\n          translations {\n            description\n            locale\n            name\n          }\n        }\n      }\n    "])));
                         _b.label = 1;
                     case 1:
                         _b.trys.push([1, 3, , 4]);
@@ -42152,15 +42239,16 @@ var IkasCustomerAPI = /** @class */ (function () {
         });
     };
     IkasCustomerAPI.getLastViewedProducts = function (customerId) {
+        var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var QUERY, _a, data, errors, error_2;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var QUERY, _b, data, errors, error_2;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         QUERY = src(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      query getLastViewedProducts($customerId: String) {\n        getLastViewedProducts(customerId: $customerId) {\n          products {\n            productId\n            variantId\n          }\n        }\n      }\n    "], ["\n      query getLastViewedProducts($customerId: String) {\n        getLastViewedProducts(customerId: $customerId) {\n          products {\n            productId\n            variantId\n          }\n        }\n      }\n    "])));
-                        _b.label = 1;
+                        _c.label = 1;
                     case 1:
-                        _b.trys.push([1, 3, , 4]);
+                        _c.trys.push([1, 3, , 4]);
                         return [4 /*yield*/, apollo
                                 .getClient()
                                 .query({
@@ -42170,12 +42258,12 @@ var IkasCustomerAPI = /** @class */ (function () {
                                 },
                             })];
                     case 2:
-                        _a = _b.sent(), data = _a.data, errors = _a.errors;
+                        _b = _c.sent(), data = _b.data, errors = _b.errors;
                         if (errors && errors.length)
                             return [2 /*return*/, []];
-                        return [2 /*return*/, data.getLastViewedProducts.products];
+                        return [2 /*return*/, ((_a = data.getLastViewedProducts) === null || _a === void 0 ? void 0 : _a.products) || []];
                     case 3:
-                        error_2 = _b.sent();
+                        error_2 = _c.sent();
                         console.log(error_2);
                         return [2 /*return*/, []];
                     case 4: return [2 /*return*/];
@@ -42926,37 +43014,6 @@ var IkasVariantTypeAPI = /** @class */ (function () {
 }());
 var templateObject_1$g;
 
-var IkasAttributeList = /** @class */ (function () {
-    function IkasAttributeList(productDetail, attributeListPropValue) {
-        this.productDetail = null;
-        this.productDetail = productDetail;
-        this.attributeListPropValue = attributeListPropValue;
-        mobx.makeAutoObservable(this);
-    }
-    Object.defineProperty(IkasAttributeList.prototype, "values", {
-        get: function () {
-            var _this = this;
-            var _a;
-            if (!this.productDetail)
-                return [];
-            var groupedValues = this.productDetail.product.hasVariant
-                ? groupBy_1(this.productDetail.selectedVariant.attributes.filter(function (a) { var _a; return (_a = _this.attributeListPropValue.attributeIds) === null || _a === void 0 ? void 0 : _a.includes(a.productAttributeId || ""); }), "productAttributeId")
-                : groupBy_1(this.productDetail.product.attributes.filter(function (a) { var _a; return (_a = _this.attributeListPropValue.attributeIds) === null || _a === void 0 ? void 0 : _a.includes(a.productAttributeId || ""); }), "productAttributeId");
-            return (((_a = this.attributeListPropValue.attributeIds) === null || _a === void 0 ? void 0 : _a.map(function (attributeId) {
-                var values = groupedValues[attributeId];
-                if ((values === null || values === void 0 ? void 0 : values.length) && values[0].productAttribute)
-                    return {
-                        attribute: values[0].productAttribute,
-                        values: values,
-                    };
-            }).filter(function (v) { return !!v; })) || []);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return IkasAttributeList;
-}());
-
 var IkasProductListPropValueProvider = /** @class */ (function () {
     function IkasProductListPropValueProvider(pageType, productListPropValue, pageSpecificData) {
         this.pageType = pageType;
@@ -44726,7 +44783,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                         propValueProvider = new IkasImageListPropValueProvider(propValue);
                         return [3 /*break*/, 24];
                     case 6:
-                        propValueProvider = new IkasBrandPropValueProvider(propValue, this.pageSpecificData);
+                        propValueProvider = new IkasBrandPropValueProvider(propValue);
                         return [3 /*break*/, 24];
                     case 7:
                         propValueProvider = new IkasBrandListPropValueProvider(propValue);
@@ -44766,13 +44823,13 @@ var IkasPageDataProvider = /** @class */ (function () {
                         return [4 /*yield*/, Promise.all(pageComponents.map(function (tp) { return _this.getPageComponentPropValues(tp); }))];
                     case 18: return [2 /*return*/, _b.sent()];
                     case 19:
-                        propValueProvider = new IkasBlogPropValueProvider(propValue, this.pageSpecificData);
+                        propValueProvider = new IkasBlogPropValueProvider(propValue);
                         return [3 /*break*/, 24];
                     case 20:
                         propValueProvider = new IkasBlogListPropValueProvider(this.pageType, propValue, this.pageSpecificData);
                         return [3 /*break*/, 24];
                     case 21:
-                        propValueProvider = new IkasBlogCategoryPropValueProvider(propValue, this.pageSpecificData);
+                        propValueProvider = new IkasBlogCategoryPropValueProvider(propValue);
                         return [3 /*break*/, 24];
                     case 22:
                         propValueProvider = new IkasBlogCategoryListPropValueProvider(propValue);
@@ -45448,7 +45505,7 @@ var IkasPage = mobxReactLite.observer(function (_a) {
     var propValues = React.useMemo(function () {
         IkasPageDataInit.setPageSpecificData(pageSpecificDataStr, pageType, isBrowser);
         return IkasPageDataInit.initPropValues(propValuesStr, router$1, settingsStr, isBrowser);
-    }, [isBrowser, propValuesStr, pageType, settingsStr]);
+    }, [isBrowser, propValuesStr, pageType, settingsStr, pageSpecificDataStr]);
     store.currentPageType = pageType;
     React.useEffect(function () {
         if (reInitOnBrowser)
@@ -45490,37 +45547,52 @@ var renderComponent = function (pageComponentPropValue, settings, index) {
     return (React.createElement(ThemeComponent, { key: pageComponentPropValue.pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, settings: settings }));
 };
 function handleAnalytics(pageType, pageSpecificDataStr, store) {
-    Analytics.pageView(pageType);
-    try {
-        if (pageType === exports.IkasThemePageType.PRODUCT) {
-            var productDetailParsed = JSON.parse(pageSpecificDataStr);
-            var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
-            var isBrowser = typeof window !== "undefined";
-            if (isBrowser) {
-                IkasPageDataInit._initProductDetailOnBrowser(productDetail);
-            }
-            Analytics.productView(productDetail);
-            // @ts-ignore
-            IkasStorefrontConfig.store.customerStore.onProductView(productDetail.product.id, productDetail.selectedVariant.id);
-        }
-        if (pageType === exports.IkasThemePageType.CATEGORY) {
-            var category = JSON.parse(pageSpecificDataStr);
-            var categoryPath = category.path.map(function (cat) { return cat.name; }).join(" > ");
-            if (category.path.length > 0) {
-                categoryPath = categoryPath + " > " + category.name;
-            }
-            else {
-                categoryPath = category.name;
+    return __awaiter(this, void 0, void 0, function () {
+        var productDetailParsed, productDetail, isBrowser, category, categoryPath, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    Analytics.pageView(pageType);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    if (pageType === exports.IkasThemePageType.PRODUCT) {
+                        productDetailParsed = JSON.parse(pageSpecificDataStr);
+                        productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
+                        isBrowser = typeof window !== "undefined";
+                        if (isBrowser) {
+                            IkasPageDataInit._initProductDetailOnBrowser(productDetail);
+                        }
+                        Analytics.productView(productDetail);
+                        // @ts-ignore
+                        IkasStorefrontConfig.store.customerStore.onProductView(productDetail.product.id, productDetail.selectedVariant.id);
+                    }
+                    if (pageType === exports.IkasThemePageType.CATEGORY) {
+                        category = JSON.parse(pageSpecificDataStr);
+                        categoryPath = category.path.map(function (cat) { return cat.name; }).join(" > ");
+                        if (category.path.length > 0) {
+                            categoryPath = categoryPath + " > " + category.name;
+                        }
+                        else {
+                            categoryPath = category.name;
+                        }
+                        Analytics.viewCategory(categoryPath, category);
+                    }
+                    if (!(pageType === exports.IkasThemePageType.CART)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, store.cartStore.waitUntilInitialized()];
+                case 2:
+                    _a.sent();
+                    Analytics.viewCart(store.cartStore.cart);
+                    _a.label = 3;
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    err_1 = _a.sent();
+                    console.error(err_1);
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
             }
-            Analytics.viewCategory(categoryPath, category);
-        }
-        if (pageType === exports.IkasThemePageType.CART) {
-            Analytics.viewCart(store.cartStore.cart);
-        }
-    }
-    catch (err) {
-        console.error(err);
-    }
+        });
+    });
 }
 
 function ErrorComponent(_a) {
@@ -69469,6 +69541,30 @@ var Installments = mobxReactLite.observer(function (_a) {
 
 var styles$b = {"PaymentLogoContainer":"style-module_PaymentLogoContainer__224HZ","AdditionalPrice":"style-module_AdditionalPrice__gW28c"};
 
+var SVGExternal = function (_a) {
+    var className = _a.className;
+    return (React.createElement("svg", { width: "82", height: "52", viewBox: "0 0 82 52", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+        React.createElement("mask", { id: "path-1-inside-1_1206:13861", fill: "white" },
+            React.createElement("rect", { y: "7", width: "46", height: "36.8", rx: "0.925786" })),
+        React.createElement("rect", { y: "7", width: "46", height: "36.8", rx: "0.925786", fill: "#F7F7F9" }),
+        React.createElement("rect", { y: "7", width: "46", height: "6.9697", fill: "#F7F7F9" }),
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.65531 11.3106C4.01723 11.3106 4.31062 11.0172 4.31062 10.6553C4.31062 10.2934 4.01723 10 3.65531 10C3.29339 10 3 10.2934 3 10.6553C3 11.0172 3.29339 11.3106 3.65531 11.3106Z", fill: "#272727" }),
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.27543 11.3106C6.63735 11.3106 6.93074 11.0172 6.93074 10.6553C6.93074 10.2934 6.63735 10 6.27543 10C5.91351 10 5.62012 10.2934 5.62012 10.6553C5.62012 11.0172 5.91351 11.3106 6.27543 11.3106Z", fill: "#272727" }),
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.89554 11.3106C9.25746 11.3106 9.55085 11.0172 9.55085 10.6553C9.55085 10.2934 9.25746 10 8.89554 10C8.53363 10 8.24023 10.2934 8.24023 10.6553C8.24023 11.0172 8.53363 11.3106 8.89554 11.3106Z", fill: "#272727" }),
+        React.createElement("rect", { x: "0.697266", y: "13.2727", width: "44.6061", height: "1", fill: "#272727" }),
+        React.createElement("rect", { y: "7", width: "46", height: "36.8", rx: "0.925786", stroke: "#272727", "stroke-width": "2", mask: "url(#path-1-inside-1_1206:13861)" }),
+        React.createElement("rect", { x: "16.5", y: "0.5", width: "65", height: "51", rx: "0.828302", fill: "#F7F7F9" }),
+        React.createElement("rect", { x: "16", width: "66", height: "9.84848", fill: "#F7F7F9" }),
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20.9402 5.88045C21.4595 5.88045 21.8805 5.4595 21.8805 4.94023C21.8805 4.42095 21.4595 4 20.9402 4C20.421 4 20 4.42095 20 4.94023C20 5.4595 20.421 5.88045 20.9402 5.88045Z", fill: "#272727" }),
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24.7 5.88045C25.2193 5.88045 25.6402 5.4595 25.6402 4.94023C25.6402 4.42095 25.2193 4 24.7 4C24.1807 4 23.7598 4.42095 23.7598 4.94023C23.7598 5.4595 24.1807 5.88045 24.7 5.88045Z", fill: "#272727" }),
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M28.4588 5.88045C28.9781 5.88045 29.399 5.4595 29.399 4.94023C29.399 4.42095 28.9781 4 28.4588 4C27.9395 4 27.5186 4.42095 27.5186 4.94023C27.5186 5.4595 27.9395 5.88045 28.4588 5.88045Z", fill: "#272727" }),
+        React.createElement("rect", { x: "17", y: "9", width: "64", height: "1", fill: "#272727" }),
+        React.createElement("rect", { x: "16.5", y: "0.5", width: "65", height: "51", rx: "0.828302", stroke: "#272727" }),
+        React.createElement("rect", { width: "16", height: "16", transform: "translate(9 21)", fill: "#F7F7F9" }),
+        React.createElement("path", { d: "M19.333 28L22.6663 31.3333L19.333 34.6667", stroke: "#272727", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        React.createElement("path", { d: "M12 23.5V28.6667C12 29.3739 12.281 30.0522 12.781 30.5523C13.2811 31.0524 13.9594 31.3333 14.6667 31.3333H22.6667", stroke: "#272727", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+
 var PaymentGateways = mobxReactLite.observer(function (_a) {
     var vm = _a.vm;
     var t = useTranslation().t;
@@ -69490,14 +69586,22 @@ var PaymentGateways = mobxReactLite.observer(function (_a) {
     };
     return (React.createElement(React.Fragment, null, vm.paymentGateways.map(function (pg, index) {
         var _a;
-        return (React.createElement(SelectBox$1, { key: pg.id, label: pg.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD
+        return (React.createElement(SelectBox$1, { key: pg.id, label: pg.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD &&
+                pg.type === IkasPaymentGatewayType.INTERNAL
                 ? t("checkout-page:creditCard")
-                : pg.name, isSelected: vm.selectedPaymentGatewayIndex === index, rightContent: ((_a = pg.additionalPrices) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(PaymentMethodAdjustment, null, getAdditionalPriceText(pg.additionalPrices[0]))) : (React.createElement(PaymentMethodLogos, null, pg.paymentMethods.map(function (pm, index) {
-                return pm.logoUrl ? (React.createElement("div", { className: styles$b.PaymentLogoContainer, key: index },
-                    React.createElement("img", { src: pm.logoUrl }))) : (React.createElement("div", { className: styles$b.PaymentLogoContainer, key: index }));
-            }))), bottomContent: pg.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD ? (React.createElement("div", null,
+                : pg.name, isSelected: vm.selectedPaymentGatewayIndex === index, rightContent: ((_a = pg.additionalPrices) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(PaymentMethodAdjustment, null, getAdditionalPriceText(pg.additionalPrices[0]))) : (React.createElement(PaymentMethodLogos, null, !!pg.logoUrl && (React.createElement("div", { className: styles$b.PaymentLogoContainer },
+                React.createElement("img", { src: pg.logoUrl }))))), bottomContent: pg.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD &&
+                pg.type === IkasPaymentGatewayType.INTERNAL ? (React.createElement("div", null,
                 React.createElement(CreditCardForm, { vm: vm }),
-                vm.installmentInfo && React.createElement(Installments, { vm: vm }))) : pg.description ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: pg.description } })) : undefined, onClick: function () {
+                vm.installmentInfo && React.createElement(Installments, { vm: vm }))) : pg.description ? (React.createElement(React.Fragment, null,
+                pg.type === IkasPaymentGatewayType.EXTERNAL && (React.createElement("div", { style: {
+                        height: "52px",
+                        display: "flex",
+                        justifyContent: "center",
+                        margin: "24px 0",
+                    } },
+                    React.createElement(SVGExternal, null))),
+                React.createElement("div", { dangerouslySetInnerHTML: { __html: pg.description } }))) : undefined, onClick: function () {
                 return vm.selectedPaymentGatewayIndex !== index &&
                     vm.setPaymentGateway(index);
             } }));
@@ -69964,7 +70068,8 @@ var StepSuccess = mobxReactLite.observer(function (_a) {
                 React.createElement("div", { className: styles$h.InfoTitle }, t("checkout-page:paymentMethod")),
                 paymentGateway && (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: styles$h.InfoText }, paymentGateway.name),
-                    !!paymentGateway.description && (React.createElement("div", { className: styles$h.InfoText },
+                    !!paymentGateway.description &&
+                        paymentGateway.type !== IkasPaymentGatewayType.EXTERNAL && (React.createElement("div", { className: styles$h.InfoText },
                         React.createElement("div", { dangerouslySetInnerHTML: {
                                 __html: paymentGateway.description,
                             } }))))),
@@ -70168,7 +70273,7 @@ var IMAGE_SIZES = [
     3840,
 ];
 var Image = function (_a) {
-    var image = _a.image, others = __rest(_a, ["image"]);
+    var image = _a.image, useBlur = _a.useBlur, others = __rest(_a, ["image", "useBlur"]);
     var loader = function (_a) {
         var width = _a.width;
         var closest = IMAGE_SIZES.reduce(function (prev, curr) {
@@ -70176,7 +70281,7 @@ var Image = function (_a) {
         });
         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", placeholder: useBlur ? "blur" : "empty", blurDataURL: useBlur ? image.getSrc(180) : undefined })));
 };
 
 var styles$k = {"StepContainer":"style-module_StepContainer__1O2dD","Step":"style-module_Step__1iOYA","StepTitleContainer":"style-module_StepTitleContainer__2GUg2","First":"style-module_First__cAzdJ","StepTitleTop":"style-module_StepTitleTop__3zfsj","WithRightContent":"style-module_WithRightContent__2fqb1","StepCircle":"style-module_StepCircle__36A5q","Selected":"style-module_Selected__3j91L","StepTitle":"style-module_StepTitle__10YDP","Light":"style-module_Light__15wSX","StepTitleRightContent":"style-module_StepTitleRightContent__2Q43m","StepContent":"style-module_StepContent__20QIi"};
@@ -70291,7 +70396,7 @@ var IkasCheckoutPage = function (_a) {
             router$1.push("/account/login?redirect=" + encodeURIComponent(vm.checkoutUrl));
         }
         Analytics.beginCheckout(vm.checkout);
-        Analytics.checkoutStep(vm.checkout, vm.step);
+        Analytics.pageView(exports.IkasThemePageType.CHECKOUT);
     }, []);
     React.useEffect(function () {
         document.documentElement.style.setProperty("--checkout-button-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonBgColor) || "#272727");
@@ -71798,6 +71903,7 @@ exports.ForgotPasswordForm = ForgotPasswordForm;
 exports.ForgotPasswordPage = forgotPassword$1;
 exports.IkasApplicableProductFilterValue = IkasApplicableProductFilterValue;
 exports.IkasAttributeDetail = IkasAttributeDetail;
+exports.IkasAttributeList = IkasAttributeList;
 exports.IkasBaseStore = IkasBaseStore;
 exports.IkasBlog = IkasBlog;
 exports.IkasBlogAPI = IkasBlogAPI;

package/build/models/data/payment-gateway/index.d.ts

@@ -5,6 +5,8 @@ export declare class IkasPaymentGateway {
     id: string | null;
     name: string;
     code: string;
+    type: IkasPaymentGatewayType;
+    logoUrl: string | null;
     testMode: boolean | null;
     description: string | null;
     additionalPrices: IkasPaymentGatewayAdditionalPrice[] | null;
@@ -45,6 +47,10 @@ export declare enum IkasPaymentGatewayAdditionalPriceAmountType {
     AMOUNT = "AMOUNT",
     RATIO = "RATIO"
 }
+export declare enum IkasPaymentGatewayType {
+    EXTERNAL = "EXTERNAL",
+    INTERNAL = "INTERNAL"
+}
 declare type IkasPaymentGatewayTranslation = {
     description: string | null;
     locale: string;

package/build/models/ui/index.d.ts

@@ -7,6 +7,7 @@ export { IkasNavigationLink } from "./navigation-link/index";
 export { IkasProductDetail, IkasDisplayedVariantType, IkasDisplayedVariantValue, } from "./product-detail/index";
 export { IkasProductList, IkasProductListType, IkasProductListSortType, } from "./product-list/index";
 export * from "./product-attribute-detail/index";
+export * from "./product-attribute-list/index";
 export { Validator, ValidationStatus } from "./validator/index";
 export * from "./validator/rules/index";
 export { LoginForm } from "./validator/form/login";

package/build/models/ui/product-list/index.d.ts

@@ -89,7 +89,7 @@ export declare class IkasProductList {
     private getQueryParams;
     private isBrowser;
     private waitForCustomerStoreInit;
-    private handleViewSearchResults;
+    private handleListingEvent;
     private searchDebouncer;
     private searchAnalyticsDebouncer;
 }

package/build/store/cart.d.ts

@@ -22,4 +22,5 @@ export declare class IkasCartStore {
     removeItem: (item: IkasOrderLineItem) => Promise<void>;
     removeCardIfEmpty: () => void;
     removeCart: () => void;
+    waitUntilInitialized: () => Promise<unknown>;
 }

package/package.json

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