@athoscommerce/snap-store-mobx 1.0.0

package/dist/cjs/Search/Stores/SearchResultStore.js

@@ -0,0 +1,749 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variant = exports.VariantSelection = exports.Variants = exports.ProductMask = exports.Badges = exports.Product = exports.Banner = exports.SearchResultStore = void 0;
+var mobx_1 = require("mobx");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var is_plain_object_1 = require("is-plain-object");
+var VARIANT_ATTRIBUTE = 'ss-variant-option';
+var VARIANT_ATTRIBUTE_SELECTED = 'ss-variant-option-selected';
+var SearchResultStore = /** @class */ (function (_super) {
+    __extends(SearchResultStore, _super);
+    function SearchResultStore(params) {
+        var _a, _b, _c, _d, _e, _f;
+        var _g = params || {}, config = _g.config, data = _g.data, state = _g.state, stores = _g.stores;
+        var _h = data || {}, search = _h.search, meta = _h.meta, previousSearch = _h.previousSearch;
+        var _j = search || {}, results = _j.results, merchandising = _j.merchandising, pagination = _j.pagination;
+        var previousResults = (stores || {}).previousResults;
+        var loaded = (state || {}).loaded;
+        var resultsArr = (results || []).map(function (result, idx) {
+            var _a, _b;
+            return new Product({
+                config: config,
+                data: { result: result, meta: meta },
+                position: idx + 1,
+                responseId: ((_b = (_a = params.data.search) === null || _a === void 0 ? void 0 : _a.tracking) === null || _b === void 0 ? void 0 : _b.responseId) || '',
+            });
+        });
+        var variantConfig = (_a = config === null || config === void 0 ? void 0 : config.settings) === null || _a === void 0 ? void 0 : _a.variants;
+        // preselected variant options
+        if ((_b = variantConfig === null || variantConfig === void 0 ? void 0 : variantConfig.realtime) === null || _b === void 0 ? void 0 : _b.enabled) {
+            // attach click events - ONLY happens once (known limitation)
+            if (!loaded && (resultsArr === null || resultsArr === void 0 ? void 0 : resultsArr.length)) {
+                var processedSelects_1 = new Set();
+                document.querySelectorAll("[".concat(VARIANT_ATTRIBUTE, "]")).forEach(function (elem) {
+                    if (elem.tagName == 'OPTION') {
+                        var parentSelect_1 = elem.closest('select');
+                        if (parentSelect_1) {
+                            if (!processedSelects_1.has(parentSelect_1)) {
+                                processedSelects_1.add(parentSelect_1);
+                                parentSelect_1.addEventListener('change', function (e) {
+                                    var _a;
+                                    var val = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
+                                    var clickedOption = Array.from(parentSelect_1.querySelectorAll("[".concat(VARIANT_ATTRIBUTE, "]"))).filter(function (elem) { return elem.value == val; });
+                                    if (clickedOption.length > 0) {
+                                        variantOptionClick(clickedOption[0], variantConfig, resultsArr);
+                                    }
+                                });
+                            }
+                        }
+                        else {
+                            console.warn('Warning: unable to add realtime variant event listener for element - ', elem);
+                        }
+                    }
+                    else {
+                        elem.addEventListener('click', function () {
+                            variantOptionClick(elem, variantConfig, resultsArr);
+                        });
+                    }
+                });
+            }
+            // check for attributes for preselection
+            if (resultsArr.length) {
+                var options_1 = {};
+                // grab values from elements on the page to form preselected elements
+                document.querySelectorAll("[".concat(VARIANT_ATTRIBUTE_SELECTED, "]")).forEach(function (elem) {
+                    var attr = elem.getAttribute(VARIANT_ATTRIBUTE);
+                    if (attr) {
+                        var _a = attr.split(':'), option = _a[0], value = _a[1];
+                        if (option && value) {
+                            options_1[option.toLowerCase()] = [value.toLowerCase()];
+                        }
+                    }
+                });
+                makeVariantSelections(variantConfig, options_1, resultsArr);
+            }
+        }
+        // only when infinite is enabled
+        if (((_d = (_c = config === null || config === void 0 ? void 0 : config.settings) === null || _c === void 0 ? void 0 : _c.infinite) === null || _d === void 0 ? void 0 : _d.enabled) && previousResults) {
+            // logic to determine when to concatenate previous results
+            // this logic is not bullet proof, but it is highly unlikely that the current and previous pagination data would ever be sequential unless paginating
+            // TODO: implement "load previous" with a limit to how many total products can be displayed
+            // the limit would be enforced by unloading (trimming) results based on the direction of the new search (previous page, next page)
+            if ((pagination === null || pagination === void 0 ? void 0 : pagination.page) && ((_e = previousSearch === null || previousSearch === void 0 ? void 0 : previousSearch.pagination) === null || _e === void 0 ? void 0 : _e.page) && pagination.page == previousSearch.pagination.page + 1) {
+                resultsArr = (previousResults || []).concat(resultsArr);
+            }
+        }
+        // add banners to results - banner data includes ALL banners within the entire search results (even if not on the current page)
+        if (pagination && ((_f = merchandising === null || merchandising === void 0 ? void 0 : merchandising.content) === null || _f === void 0 ? void 0 : _f.inline)) {
+            // ensure banners are sorted by index
+            var banners = merchandising.content.inline
+                .sort(function (a, b) {
+                return a.config.position.index - b.config.position.index;
+            })
+                .map(function (banner) {
+                var _a, _b;
+                return new Banner({
+                    data: { banner: banner, responseId: ((_b = (_a = params.data.search) === null || _a === void 0 ? void 0 : _a.tracking) === null || _b === void 0 ? void 0 : _b.responseId) || '' },
+                });
+            });
+            if (banners && pagination.totalResults) {
+                resultsArr = addBannersToResults(config, resultsArr, banners, pagination);
+            }
+        }
+        return _super.apply(this, resultsArr) || this;
+    }
+    Object.defineProperty(SearchResultStore, Symbol.species, {
+        get: function () {
+            return Array;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return SearchResultStore;
+}(Array));
+exports.SearchResultStore = SearchResultStore;
+var Banner = /** @class */ (function () {
+    function Banner(bannerData) {
+        this.type = 'banner';
+        this.attributes = {};
+        this.mappings = {
+            core: {},
+        };
+        this.custom = {};
+        var _a = (bannerData === null || bannerData === void 0 ? void 0 : bannerData.data) || {}, banner = _a.banner, responseId = _a.responseId;
+        var htmlString = banner.value;
+        var match = typeof htmlString === 'string' && htmlString.match(/data-banner-id="(\d+)"/);
+        var uid = match ? match[1] : 'ss-ib-' + banner.config.position.index;
+        this.id = uid;
+        this.responseId = responseId;
+        this.config = banner.config;
+        this.value = banner.value;
+        (0, mobx_1.makeObservable)(this, {
+            id: mobx_1.observable,
+            mappings: mobx_1.observable,
+            attributes: mobx_1.observable,
+        });
+    }
+    return Banner;
+}());
+exports.Banner = Banner;
+var Product = /** @class */ (function () {
+    function Product(productData) {
+        var _a, _b;
+        this.type = 'product';
+        this.attributes = {};
+        this.mappings = {
+            core: {},
+        };
+        this.custom = {};
+        this.quantity = 1;
+        this.mask = new ProductMask();
+        var config = (productData || {}).config;
+        var _c = (productData === null || productData === void 0 ? void 0 : productData.data) || {}, result = _c.result, meta = _c.meta;
+        this.id = result.id;
+        this.attributes = result.attributes;
+        this.mappings = result.mappings;
+        this.position = productData.position;
+        this.badges = new Badges({
+            data: {
+                meta: meta,
+                result: result,
+            },
+        });
+        this.responseId = result.responseId || productData.responseId;
+        // @ts-ignore - need to add bundleSeed to snapi-types
+        if (result.bundleSeed) {
+            // @ts-ignore - need to add bundleSeed to snapi-types
+            this.bundleSeed = Boolean(result.bundleSeed);
+        }
+        if (result.variants && result.variants.data) {
+            // if variants are already parsed, use them
+            this.variants = new Variants({
+                data: {
+                    mask: this.mask,
+                    variants: result.variants.data,
+                    optionConfig: result.variants.optionConfig,
+                    preferences: (_a = result.variants) === null || _a === void 0 ? void 0 : _a.preferences, // TODO: fix typing
+                    meta: meta,
+                },
+                config: (_b = config === null || config === void 0 ? void 0 : config.settings) === null || _b === void 0 ? void 0 : _b.variants,
+            });
+        }
+        (0, mobx_1.makeObservable)(this, {
+            id: mobx_1.observable,
+            display: mobx_1.computed,
+            mappings: mobx_1.observable,
+            attributes: mobx_1.observable,
+            custom: mobx_1.observable,
+            quantity: mobx_1.observable,
+        });
+    }
+    Object.defineProperty(Product.prototype, "display", {
+        get: function () {
+            return (0, deepmerge_1.default)({ id: this.id, mappings: this.mappings, attributes: this.attributes, badges: this.badges }, this.mask.data, {
+                isMergeableObject: is_plain_object_1.isPlainObject,
+            });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Product;
+}());
+exports.Product = Product;
+var Badges = /** @class */ (function () {
+    function Badges(badgesData) {
+        this.all = [];
+        var data = (badgesData || {}).data;
+        var _a = data || {}, meta = _a.meta, result = _a.result;
+        this.all = (result.badges || [])
+            .filter(function (badge) {
+            var _a, _b, _c;
+            // remove badges that are not in the meta or are disabled
+            return !!((badge === null || badge === void 0 ? void 0 : badge.tag) && ((_a = meta.badges) === null || _a === void 0 ? void 0 : _a.tags) && ((_b = meta.badges) === null || _b === void 0 ? void 0 : _b.tags[badge.tag]) && ((_c = meta.badges) === null || _c === void 0 ? void 0 : _c.tags[badge.tag].enabled));
+        })
+            .map(function (badge) {
+            var _a, _b;
+            // merge badge with badge meta data
+            var metaBadgeData = (_b = (_a = meta.badges) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b[badge.tag];
+            return __assign(__assign({}, badge), metaBadgeData);
+        })
+            .sort(function (a, b) {
+            return a.priority - b.priority;
+        });
+        (0, mobx_1.makeObservable)(this, {
+            all: mobx_1.observable,
+            tags: mobx_1.computed,
+            locations: mobx_1.computed,
+        });
+    }
+    // get all the result badges that are in a specific location
+    Badges.prototype.atLocation = function (location) {
+        var locations = Array.isArray(location) ? location : [location];
+        return this.all.filter(function (badge) {
+            // filter location
+            return locations.some(function (location) { return badge.location.startsWith("".concat(location, "/")) || badge.location == location; });
+        });
+    };
+    Object.defineProperty(Badges.prototype, "tags", {
+        get: function () {
+            return this.all.reduce(function (badgeMap, badge) {
+                badgeMap[badge.tag] = badge;
+                return badgeMap;
+            }, {});
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Badges.prototype, "locations", {
+        get: function () {
+            return this.all.reduce(function (locationMap, badge) {
+                // put badge in location by path
+                var _a = badge.location.split('/'), section = _a[0], tag = _a[1];
+                locationMap[section] = locationMap[section] || {};
+                locationMap[section][tag] = (locationMap[section][tag] || []).concat(badge);
+                return locationMap;
+            }, {});
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Badges;
+}());
+exports.Badges = Badges;
+// Mask is used to power the product display for quick attribute swapping
+var ProductMask = /** @class */ (function () {
+    function ProductMask() {
+        this.data = {};
+        (0, mobx_1.makeObservable)(this, {
+            data: mobx_1.observable,
+        });
+    }
+    ProductMask.prototype.merge = function (mask) {
+        // TODO: look into making more performant
+        // needed to prevent infinite re-render on merge with same data
+        if (JSON.stringify((0, deepmerge_1.default)(this.data, mask)) != JSON.stringify(this.data)) {
+            this.data = (0, deepmerge_1.default)(this.data, mask);
+        }
+    };
+    ProductMask.prototype.set = function (mask) {
+        // TODO: look into making more performant
+        // needed to prevent infinite re-render on set with same data
+        if (JSON.stringify(mask) != JSON.stringify(this.data)) {
+            this.data = mask;
+        }
+    };
+    ProductMask.prototype.reset = function () {
+        this.data = {};
+    };
+    return ProductMask;
+}());
+exports.ProductMask = ProductMask;
+var Variants = /** @class */ (function () {
+    function Variants(variantData) {
+        var _this = this;
+        var _a;
+        this.data = [];
+        this.selections = [];
+        var _b = variantData || {}, config = _b.config, data = _b.data;
+        var _c = data || {}, variants = _c.variants, mask = _c.mask, meta = _c.meta;
+        var preferences = ((_a = variantData === null || variantData === void 0 ? void 0 : variantData.data) === null || _a === void 0 ? void 0 : _a.preferences) || {};
+        // setting function in constructor to prevent exposing mask as class property
+        this.setActive = function (variant) {
+            _this.active = variant;
+            var activeBadges = new Badges({
+                data: {
+                    meta: meta,
+                    result: variant,
+                },
+            });
+            mask.set({ mappings: _this.active.mappings, attributes: _this.active.attributes, badges: activeBadges });
+        };
+        if (config) {
+            this.config = config;
+        }
+        if (data.optionConfig) {
+            this.optionConfig = data.optionConfig;
+        }
+        this.update(variants, config, preferences);
+    }
+    Variants.prototype.update = function (variantData, config, preferences) {
+        var _this = this;
+        if (config === void 0) { config = this.config; }
+        try {
+            var options_2 = [];
+            // create variants objects
+            this.data = variantData
+                .filter(function (variant) { var _a, _b; return ((_a = _this.config) === null || _a === void 0 ? void 0 : _a.showDisabledSelectionValues) || ((_b = variant.mappings.core) === null || _b === void 0 ? void 0 : _b.available) !== false; })
+                .map(function (variant) {
+                var _a, _b, _c, _d;
+                // normalize price fields ensuring they are numbers
+                if ((_a = variant.mappings.core) === null || _a === void 0 ? void 0 : _a.price) {
+                    variant.mappings.core.price = Number((_b = variant.mappings.core) === null || _b === void 0 ? void 0 : _b.price);
+                }
+                if ((_c = variant.mappings.core) === null || _c === void 0 ? void 0 : _c.msrp) {
+                    variant.mappings.core.msrp = Number((_d = variant.mappings.core) === null || _d === void 0 ? void 0 : _d.msrp);
+                }
+                return variant;
+            })
+                .map(function (variant) {
+                Object.keys(variant.options).forEach(function (variantOption) {
+                    if (!options_2.includes(variantOption)) {
+                        options_2.push(variantOption);
+                    }
+                });
+                return new Variant({
+                    data: { variant: variant },
+                });
+            });
+            //need to reset this.selections first
+            this.selections = [];
+            options_2.map(function (option) {
+                var _a, _b;
+                var variantOptionConfig = ((_a = _this.config) === null || _a === void 0 ? void 0 : _a.options) && _this.config.options[option];
+                _this.selections.push(new VariantSelection({
+                    config: variantOptionConfig,
+                    optionConfig: (_b = _this.optionConfig) === null || _b === void 0 ? void 0 : _b[option],
+                    data: {
+                        variants: _this,
+                        selectorField: option,
+                    },
+                }));
+            });
+            var preselectedOptions_1 = {};
+            //api preferences
+            if (preferences) {
+                Object.keys(preferences).forEach(function (option) {
+                    preselectedOptions_1[option] = preferences[option];
+                });
+            }
+            //user defined preferences - these override API preferences
+            if (config === null || config === void 0 ? void 0 : config.options) {
+                Object.keys(config === null || config === void 0 ? void 0 : config.options).forEach(function (option) {
+                    if (config.options[option].preSelected) {
+                        preselectedOptions_1[option] = config.options[option].preSelected;
+                    }
+                });
+            }
+            if (config === null || config === void 0 ? void 0 : config.autoSelect) {
+                // select first available
+                this.makeSelections(preselectedOptions_1);
+            }
+        }
+        catch (err) {
+            // failed to parse the variant JSON
+            console.error(err, "Invalid variant JSON for: ".concat(variantData));
+        }
+    };
+    Variants.prototype.makeSelections = function (options) {
+        // options = {color: 'Blue', size: 'L'};
+        if (!options || !Object.keys(options).length) {
+            // select first available for each selection
+            this.selections.forEach(function (selection) {
+                var firstAvailableOption = selection.values.find(function (value) { return value.available; });
+                if (firstAvailableOption) {
+                    selection.select(firstAvailableOption.value, true);
+                }
+            });
+        }
+        else {
+            this.selections.forEach(function (selection, idx) {
+                // filter by first available, then by preselected option preference
+                //make all options available for first selection.
+                var availableOptions = selection.values.filter(function (value) { return (idx == 0 ? true : value.available); });
+                var preferedOptions = options[selection.field.toLowerCase()];
+                var preferencedOption = selection.selected || availableOptions[0];
+                // if theres a preference for that field
+                if (preferedOptions) {
+                    var checkIfAvailable_1 = function (preference) {
+                        //see if that option is in the available options
+                        var availablePreferedOptions = availableOptions.find(function (value) { return value.value.toString().toLowerCase() == (preference === null || preference === void 0 ? void 0 : preference.toString().toLowerCase()); });
+                        //use it
+                        if (availablePreferedOptions) {
+                            preferencedOption = availablePreferedOptions;
+                        }
+                    };
+                    if (Array.isArray(preferedOptions)) {
+                        //loop through each preference option
+                        preferedOptions.forEach(function (preference) {
+                            checkIfAvailable_1(preference);
+                        });
+                    }
+                    else {
+                        checkIfAvailable_1(preferedOptions);
+                    }
+                }
+                if (preferencedOption) {
+                    selection.select(preferencedOption.value, true);
+                }
+            });
+        }
+    };
+    Variants.prototype.refineSelections = function (fromSelection) {
+        var _this = this;
+        // need to ensure the update originator is at the BOTTOM of the list for refinement
+        var orderedSelections = __spreadArray([], this.selections, true);
+        orderedSelections.sort(function (a) {
+            if (a.field == fromSelection.field) {
+                return 1;
+            }
+            return -1;
+        });
+        // refine selections ensuring that the selection that triggered the update refines LAST
+        orderedSelections.forEach(function (selection) { return selection.refineValues(_this); });
+        // check to see if we have enough selections made to update the display
+        var selectedSelections = this.selections.filter(function (selection) { var _a, _b; return (_b = (_a = selection.selected) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length; });
+        if (selectedSelections.length) {
+            var availableVariants = this.data;
+            var _loop_1 = function (selectedSelection) {
+                availableVariants = availableVariants.filter(function (variant) { var _a, _b; return ((_a = selectedSelection.selected) === null || _a === void 0 ? void 0 : _a.value) == ((_b = variant.options[selectedSelection.field]) === null || _b === void 0 ? void 0 : _b.value) && variant.available; });
+            };
+            // loop through selectedSelections and only include available products that match current selections
+            for (var _i = 0, selectedSelections_1 = selectedSelections; _i < selectedSelections_1.length; _i++) {
+                var selectedSelection = selectedSelections_1[_i];
+                _loop_1(selectedSelection);
+            }
+            // set active variant
+            if (availableVariants.length == 1) {
+                var variantToSet_1 = availableVariants[0];
+                //need to update all unselected selections to match the single result
+                var unselectedSelections = this.selections.filter(function (selection) { return !selection.selected; });
+                unselectedSelections.forEach(function (selection) {
+                    var field = selection.field;
+                    var valueToSet = variantToSet_1.options[field].value;
+                    selection.select(valueToSet);
+                });
+                this.setActive(variantToSet_1);
+            }
+        }
+    };
+    return Variants;
+}());
+exports.Variants = Variants;
+var VariantSelection = /** @class */ (function () {
+    function VariantSelection(variantSelectionData) {
+        var _this = this;
+        this.selected = undefined;
+        this.previouslySelected = undefined;
+        this.values = [];
+        var _a = variantSelectionData || {}, data = _a.data, config = _a.config, optionConfig = _a.optionConfig;
+        var _b = data || {}, variants = _b.variants, selectorField = _b.selectorField;
+        this.field = selectorField;
+        this.type = optionConfig === null || optionConfig === void 0 ? void 0 : optionConfig.type;
+        this.count = optionConfig === null || optionConfig === void 0 ? void 0 : optionConfig.count;
+        this.label = (config === null || config === void 0 ? void 0 : config.label) || selectorField;
+        this.config = config || {};
+        // needed to prevent attaching variants as class property
+        this.variantsUpdate = function () { return variants.refineSelections(_this); };
+        // create possible values from the data and refine them
+        this.refineValues(variants);
+        (0, mobx_1.makeObservable)(this, {
+            selected: mobx_1.observable,
+            values: mobx_1.observable,
+        });
+    }
+    VariantSelection.prototype.refineValues = function (variants) {
+        var _this = this;
+        // current selection should only consider OTHER selections for availability
+        var selectedSelections = variants.selections.filter(function (selection) { return selection.field != _this.field && selection.selected; });
+        var availableVariants = variants.data.filter(function (variant) { return variant.available; });
+        var _loop_2 = function (selectedSelection) {
+            availableVariants = availableVariants.filter(function (variant) { var _a, _b, _c; return ((_a = selectedSelection.selected) === null || _a === void 0 ? void 0 : _a.value) == ((_c = (_b = variant.options) === null || _b === void 0 ? void 0 : _b[selectedSelection.field]) === null || _c === void 0 ? void 0 : _c.value) && variant.available; });
+        };
+        // loop through selectedSelections and remove products that do not match
+        for (var _i = 0, selectedSelections_2 = selectedSelections; _i < selectedSelections_2.length; _i++) {
+            var selectedSelection = selectedSelections_2[_i];
+            _loop_2(selectedSelection);
+        }
+        var newValues = variants.data
+            .filter(function (variant) { return variant.options[_this.field]; })
+            .reduce(function (values, variant) {
+            var _a;
+            if (!values.some(function (val) { return variant.options[_this.field].value == val.value; })) {
+                var value_1 = variant.options[_this.field].value;
+                var thumbnailImageUrl = (_a = variant.mappings.core) === null || _a === void 0 ? void 0 : _a.thumbnailImageUrl;
+                // A value should only be disabled if there are NO available variants in the entire dataset that have this value for the current field
+                var allAvailableVariants = variants.data.filter(function (variant) { return variant.available; });
+                var disabledValue = !allAvailableVariants.some(function (availableVariant) {
+                    return availableVariant.options[_this.field].value === value_1;
+                });
+                var mappedValue = {
+                    value: value_1,
+                    label: value_1,
+                    thumbnailImageUrl: thumbnailImageUrl,
+                    available: Boolean(availableVariants.some(function (availableVariant) { return availableVariant.options[_this.field].value == variant.options[_this.field].value; })),
+                    disabled: disabledValue,
+                };
+                if (_this.config.thumbnailBackgroundImages) {
+                    mappedValue.backgroundImageUrl = thumbnailImageUrl;
+                }
+                else if (variant.options[_this.field].backgroundImageUrl) {
+                    mappedValue.backgroundImageUrl = variant.options[_this.field].backgroundImageUrl;
+                }
+                if (variant.options[_this.field].background) {
+                    mappedValue.background = variant.options[_this.field].background;
+                }
+                if (_this.config.mappings && _this.config.mappings && _this.config.mappings[value_1.toString().toLowerCase()]) {
+                    var mapping = _this.config.mappings[value_1.toString().toLowerCase()];
+                    if (mapping.label) {
+                        mappedValue.label = mapping.label;
+                    }
+                    if (mapping.background) {
+                        mappedValue.background = mapping.background;
+                    }
+                    if (mapping.backgroundImageUrl) {
+                        mappedValue.backgroundImageUrl = mapping.backgroundImageUrl;
+                    }
+                }
+                values.push(mappedValue);
+            }
+            // TODO: use sorting function from config
+            return values;
+        }, []);
+        // if selection has been made
+        if (this.selected) {
+            // check if the selection is stil available
+            if (!newValues.some(function (val) { var _a; return val.value == ((_a = _this.selected) === null || _a === void 0 ? void 0 : _a.value) && val.available; })) {
+                // the selection is no longer available, attempt to select previous selection
+                if (this.selected !== this.previouslySelected &&
+                    this.previouslySelected &&
+                    newValues.some(function (val) { var _a; return val.value == ((_a = _this.previouslySelected) === null || _a === void 0 ? void 0 : _a.value) && val.available; })) {
+                    this.select(this.previouslySelected.value, true);
+                }
+                else {
+                    // choose the first available option if previous seletions are unavailable
+                    var availableValues = newValues.filter(function (val) { return val.available; });
+                    if (newValues.length && availableValues.length) {
+                        var nextAvailableValue = availableValues[0].value;
+                        if (this.selected.value !== nextAvailableValue) {
+                            this.select(nextAvailableValue, true);
+                        }
+                    }
+                }
+            }
+        }
+        this.values = newValues;
+    };
+    VariantSelection.prototype.reset = function () {
+        this.selected = undefined;
+        this.values.forEach(function (val) { return (val.available = false); });
+    };
+    VariantSelection.prototype.select = function (value, internalSelection) {
+        if (internalSelection === void 0) { internalSelection = false; }
+        var valueExist = this.values.find(function (val) { return val.value == value; });
+        if (valueExist) {
+            if (!internalSelection) {
+                this.previouslySelected = this.selected;
+            }
+            this.selected = valueExist;
+            this.variantsUpdate();
+        }
+    };
+    return VariantSelection;
+}());
+exports.VariantSelection = VariantSelection;
+var Variant = /** @class */ (function () {
+    function Variant(variantData) {
+        var _a, _b;
+        this.type = 'variant';
+        this.attributes = {};
+        this.mappings = {
+            core: {},
+        };
+        this.custom = {};
+        var data = (variantData || {}).data;
+        var variant = (data || {}).variant;
+        this.attributes = variant.attributes || {};
+        this.mappings = variant.mappings;
+        this.options = variant.options;
+        // construct badges from data (need meta)
+        this.badges = variant.badges || [];
+        this.available = (_b = (_a = this.mappings.core) === null || _a === void 0 ? void 0 : _a.available) !== null && _b !== void 0 ? _b : true;
+        (0, mobx_1.makeObservable)(this, {
+            attributes: mobx_1.observable,
+            mappings: mobx_1.observable,
+            custom: mobx_1.observable,
+            available: mobx_1.observable,
+        });
+    }
+    return Variant;
+}());
+exports.Variant = Variant;
+function addBannersToResults(config, results, allBanners, paginationData) {
+    var _a, _b, _c;
+    var bannersAndResults = __spreadArray([], results, true);
+    var paginationBegin = paginationData.pageSize * (paginationData.page - 1) + 1;
+    var paginationEnd = paginationData.pageSize * paginationData.page;
+    // if infinite scroll is enabled, we need to adjust the begin position
+    if ((_b = (_a = config === null || config === void 0 ? void 0 : config.settings) === null || _a === void 0 ? void 0 : _a.infinite) === null || _b === void 0 ? void 0 : _b.enabled)
+        paginationBegin = 1;
+    // if the end of the page is greater than the total results, adjust the end
+    if (paginationData.pageSize * paginationData.page > paginationData.totalResults)
+        paginationEnd = paginationData.totalResults;
+    // banners that have not allready been injected
+    var bannersNotInResults = allBanners.filter(function (banner) { return !bannersAndResults.some(function (result) { return result.id == banner.id; }); });
+    // banners that have an index position within the current set of results
+    var bannersToInject = bannersNotInResults.filter(function (banner) {
+        // find banners that are within the current pagination set
+        var index = banner.config.position.index;
+        return index >= paginationBegin - 1 && index <= paginationEnd - 1;
+    });
+    // banners can have an index greater than the total results, these should be injected at the end
+    var bannersToInjectAtEnd = bannersNotInResults.filter(function (banner) {
+        var index = banner.config.position.index;
+        return index >= paginationData.totalResults;
+    });
+    // inject banners that have index position within current set into the results
+    bannersToInject.forEach(function (banner) {
+        var adjustedIndex = banner.config.position.index - (paginationBegin - 1);
+        bannersAndResults.splice(adjustedIndex, 0, banner);
+    });
+    // inject banners at the end that fall within the current pagination set (but ensure there is room based on the begin and end indexes)
+    bannersToInjectAtEnd.forEach(function (banner, index) {
+        var resultIndex = paginationData.totalResults - (bannersToInjectAtEnd.length - index);
+        if (resultIndex >= paginationBegin - 1 && resultIndex <= paginationEnd - 1) {
+            bannersAndResults.splice(resultIndex, 0, banner);
+        }
+    });
+    // when using infinite, need to adjust the inline banner responseIds
+    if ((_c = config === null || config === void 0 ? void 0 : config.settings) === null || _c === void 0 ? void 0 : _c.infinite) {
+        bannersAndResults.forEach(function (item, index) {
+            if (item.type === 'banner') {
+                // need to determine what the correctResponseId is based on the index position, pageSize (current page) and adjacent product responseIds
+                var pageSize = paginationData.pageSize;
+                var currentPage = Math.floor(index / pageSize) + 1;
+                var firstItemIndexOnPage = (currentPage - 1) * pageSize;
+                var lastItemIndexOnPage = firstItemIndexOnPage + pageSize - 1;
+                // find the first product on the current page to grab its responseId
+                for (var i = firstItemIndexOnPage; i < lastItemIndexOnPage; i++) {
+                    if (bannersAndResults[i].type === 'product') {
+                        item.responseId = bannersAndResults[i].responseId;
+                        break;
+                    }
+                }
+            }
+        });
+    }
+    return bannersAndResults;
+}
+function variantOptionClick(elem, variantConfig, results) {
+    var options = {};
+    var attr = elem.getAttribute(VARIANT_ATTRIBUTE);
+    if (attr) {
+        var _a = attr.split(':'), option = _a[0], value = _a[1];
+        if (!option || !value) {
+            console.error('Error!: realtime variant is missing option or value (option:value)!', elem, attr);
+        }
+        else {
+            options[option.toLowerCase()] = [value.toLowerCase()];
+            makeVariantSelections(variantConfig, options, results);
+        }
+    }
+}
+function makeVariantSelections(variantConfig, options, results) {
+    var _a, _b;
+    var filteredResults = results;
+    // filter based on config
+    (_b = (_a = variantConfig.realtime) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.forEach(function (filter) {
+        if (filter == 'first') {
+            filteredResults = [filteredResults[0]];
+        }
+        if (filter == 'unaltered') {
+            filteredResults = filteredResults.filter(function (result) { var _a; return !((_a = result.variants) === null || _a === void 0 ? void 0 : _a.selections.some(function (selection) { return selection.previouslySelected; })); });
+        }
+    });
+    filteredResults.forEach(function (result) {
+        var _a;
+        // no banner types
+        if (result.type == 'product') {
+            (_a = result.variants) === null || _a === void 0 ? void 0 : _a.makeSelections(options);
+        }
+    });
+}