@fast-simon/dashboard-utilities 1.0.35 → 1.0.37

package/dist/dashboard/dashboard-client/src/pages/NoCodeEditor/ProductGridEditor/utils.js

@@ -0,0 +1,633 @@
+import { setEditorPosition, setFamilyFont, setFastSimonSearchBox, setFilters, setFiltersElement, setMutualDisplayAttribute, setProductElement, setProductGrid, setProductGridElement, setProductInfoGridAreas, setSorting, } from "../../../store/productGridEditor/productGridEditorSlice";
+import { createCssGridLayoutString, getMaxRow } from "../components/RightMenu/components/ProductInfoPositioning/utils";
+import { isFontSetting } from "../utils";
+export const LOCK_NS = 'no_code_editor_locking_namespace';
+export const productInfoElementNameToAttribute = {
+    'Title': 'title',
+    'Vendor': 'vendor',
+    'SKU': 'SKU',
+    'Price': 'price',
+    'Compare at Price': 'compare',
+    'Swatches': 'colorSwatches',
+    'Description': 'description',
+    'Reviews': 'reviews'
+};
+export const productSubMenuItems = [
+    {
+        itemName: 'Title',
+        key: 'title',
+        isOn: true,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid']
+    },
+    {
+        itemName: 'Price',
+        key: 'price',
+        isOn: true,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: "Show product prices in the Fast Simon search results page"
+    },
+    {
+        itemName: 'Compare at Price',
+        key: 'compare',
+        displayName: 'Price Comparison',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid']
+    },
+    {
+        itemName: 'Reviews',
+        key: 'reviews',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: `Enable displaying product review ratings in the search
+                                                                result page, as well as filtering and sorting by them`,
+        tooltipOnDisabled: 'Please enable some review provider on Fast Simon Dashboard -> Integrations tab to active this feature'
+    },
+    {
+        itemName: 'Add to Cart',
+        key: 'addToCart',
+        isOn: true,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: `Add to Cart button in the search results page
+                                                                          appears on mouse hover. It allows shoppers to place the product
+                                                                          in the shopping cart directly without visiting the product page`
+    },
+    {
+        itemName: 'Back In Stock',
+        key: 'backInStock',
+        isOn: true,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: `Notify me button in the search results page
+                                                                          appears on mouse hover. It allows shoppers to place the product
+                                                                          in the back in stock to get a notification when it is available`
+    },
+    {
+        itemName: 'SKU',
+        key: 'sku',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: "Show product SKUs in the Fast Simon search results page"
+    },
+    {
+        itemName: 'Description',
+        key: 'description',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: "Show product description in the Fast Simon search results page"
+    },
+    {
+        itemName: 'In Stock',
+        key: 'inStock',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: 'Show shopper badges on in-stock products'
+    },
+    {
+        itemName: 'Out of Stock',
+        key: 'outOfStock',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: 'Show shopper badges on out of stock products'
+    },
+    {
+        itemName: 'Vendor',
+        key: 'vendor',
+        platforms: ['Shopify'],
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid']
+    },
+    {
+        itemName: 'Wishlist',
+        key: 'wishList',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid']
+    },
+    {
+        itemName: 'Quick View',
+        key: 'quickView',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: `Enable product Quick View on the search result page`
+    },
+    {
+        itemName: 'Look-A-Like',
+        key: 'lookALike',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipOnDisabled: 'Enable Look-a-like Visual Products on Fast Simon Dashboard -> Search Results tab -> Retail pack to active this feature'
+    },
+    {
+        itemName: 'Swatches',
+        key: 'colorSwatches',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 2,
+        parents: ['Product', 'Products Grid'],
+        parentsKeys: ['product', 'productGrid'],
+        tooltipText: `Show swatches for each product according to its variants`
+    }
+];
+export const productsGridSubMenuItems = [
+    {
+        itemName: 'Pagination',
+        key: 'pagination',
+        displayName: 'Paging',
+        isOn: true,
+        isSwitchable: false,
+        hasSubMenu: false,
+        itemDepth: 1,
+        parents: ['Products Grid'],
+        parentsKeys: ['productGrid']
+    },
+    {
+        itemName: 'Page Title',
+        key: 'pageTitle',
+        isOn: true,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 1,
+        parents: ['Products Grid'],
+        parentsKeys: ['productGrid']
+    },
+    {
+        itemName: 'Product',
+        key: 'product',
+        isOn: true,
+        isSwitchable: false,
+        hasSubMenu: true,
+        itemDepth: 1,
+        subMenuItems: productSubMenuItems,
+        isCollapsed: true,
+        parents: ['Products Grid'],
+        parentsKeys: ['productGrid']
+    },
+    {
+        itemName: 'Quick View Modal',
+        key: 'quickViewModal',
+        isOn: true,
+        isSwitchable: false,
+        hasSubMenu: false,
+        itemDepth: 1,
+        parents: ['Products Grid'],
+        parentsKeys: ['productGrid'],
+        adminOnly: true
+    }
+];
+export const filtersSubMenuItems = [
+    {
+        itemName: 'Removable Tags',
+        key: 'removableTags',
+        isOn: true,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 1,
+        parents: ['Filters'],
+        parentsKeys: ['filters']
+    },
+    {
+        itemName: 'Search within Filters',
+        key: 'searchWithinFilters',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 1,
+        parents: ['Filters'],
+        parentsKeys: ['filters'],
+        tooltipText: 'Allow shoppers to have a search box for each filter on the left nav bar'
+    },
+    {
+        itemName: 'Search within Results',
+        key: 'searchWithinResults',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 1,
+        parents: ['Filters'],
+        parentsKeys: ['filters'],
+        tooltipText: 'Allow shoppers to perform follow up searches narrowing results to their intention'
+    },
+    {
+        itemName: 'Show / Hide Filters Button',
+        key: 'showHideFiltersButton',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 1,
+        parents: ['Filters'],
+        parentsKeys: ['filters'],
+        tooltipText: "Give your customers a button in the search result page that show / hide the left bar filters"
+    }
+];
+export const mainMenuItems = [
+    {
+        itemName: 'Products Grid',
+        displayName: 'Product Grid',
+        key: 'productGrid',
+        isOn: true,
+        isSwitchable: false,
+        hasSubMenu: true,
+        subMenuItems: productsGridSubMenuItems,
+        itemDepth: 0,
+        isCollapsed: true,
+    },
+    {
+        itemName: 'Single Page Experience',
+        displayName: 'Single Page Experience',
+        key: 'SPA',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 0,
+        tooltipText: "Have shoppers the fastest experience switching between collections on search with a single page experience (no full page load)",
+        isSelectable: false,
+        isGeneralSwitch: true,
+        platforms: ['Shopify'],
+        addonKey: 'isSPA'
+    },
+    {
+        itemName: 'Filters',
+        key: 'filters',
+        isOn: true,
+        isSwitchable: true,
+        hasSubMenu: true,
+        itemDepth: 0,
+        subMenuItems: filtersSubMenuItems,
+    },
+    {
+        itemName: 'Search Results Sorting',
+        key: 'sorting',
+        displayName: 'Sort By',
+        isOn: false,
+        isSwitchable: true,
+        hasSubMenu: false,
+        itemDepth: 0,
+        tooltipText: `Supported search results sorting: Best Match (default),
+                                      Price Low to High, Price High to Low`,
+    },
+    {
+        itemName: 'Related Collections',
+        key: 'collections',
+        isOn: true,
+        isSwitchable: false,
+        hasSubMenu: false,
+        itemDepth: 0,
+        tooltipText: `Show relevant collections in search results and collections`,
+    },
+    {
+        itemName: 'Custom Icons',
+        key: 'customIcons',
+        isOn: true,
+        isSwitchable: false,
+        hasSubMenu: false,
+        itemDepth: 0,
+        tooltipText: `Custom Icons`,
+    },
+];
+export const defaultCollapsedItems = {
+    'Product': true,
+    'Filters': false,
+    'Products Grid': true
+};
+export const AllMenuItems = [...mainMenuItems, ...productsGridSubMenuItems, ...filtersSubMenuItems, ...productSubMenuItems];
+export const getProductGridItemSettings = (itemName, settings) => {
+    switch (itemName) {
+        case 'Filters':
+            return settings.filters;
+        case 'Removable Tags':
+            return settings.filters.removableTags;
+        case 'Search within Results':
+            return settings.filters.searchWithinResults;
+        case 'Search within Filters':
+            return settings.filters.searchWithinFilters;
+        case 'Show / Hide Filters Button':
+            return settings.filters.showHideFiltersButton;
+        case 'Fast Simon Search Box':
+            return settings.searchBox;
+        case 'Search Results Sorting':
+            return settings.sorting;
+        case 'Products Grid':
+            return settings.productGrid;
+        case 'Page Title':
+            return settings.productGrid.pageTitle;
+        case 'Pagination':
+            return settings.productGrid.pagination;
+        case 'Quick View Modal':
+            return settings.productGrid.quickViewModal;
+        case 'Product':
+            return settings.productGrid.product;
+        case 'Title':
+            return settings.productGrid.product.title;
+        case 'Price':
+            return settings.productGrid.product.price;
+        case 'Compare at Price':
+            return settings.productGrid.product.compare;
+        case 'Reviews':
+            return settings.productGrid.product.reviews;
+        case 'Add to Cart':
+            return settings.productGrid.product.addToCart;
+        case 'SKU':
+            return settings.productGrid.product.sku;
+        case 'Description':
+            return settings.productGrid.product.description;
+        case 'In Stock':
+            return settings.productGrid.product.inStock;
+        case 'Out of Stock':
+            return settings.productGrid.product.outOfStock;
+        case 'Vendor':
+            return settings.productGrid.product.vendor;
+        case 'Wishlist':
+            return settings.productGrid.product.wishList;
+        case 'Quick View':
+            return settings.productGrid.product.quickView;
+        case 'Look-A-Like':
+            return settings.productGrid.product.lookALike;
+        case 'Swatches':
+            return settings.productGrid.product.colorSwatches;
+        case 'Back In Stock':
+            return settings.productGrid.product.backInStock;
+        default:
+            return undefined;
+    }
+};
+const getValueToMerge = (attName, value, subAttName, settings) => {
+    let valueToMerge = {};
+    if (!subAttName) {
+        valueToMerge[attName] = value;
+    }
+    else {
+        valueToMerge[subAttName] = {};
+        valueToMerge[subAttName][attName] = value;
+        valueToMerge[subAttName] = Object.assign(Object.assign({}, settings[subAttName]), valueToMerge[subAttName]);
+    }
+    return valueToMerge;
+};
+const setProductElementValue = (dispatch, itemName, attributeName, value, settings, mode, elementName, subObjName) => {
+    const valToMerge = getValueToMerge(attributeName, value, subObjName, settings);
+    dispatch(setProductElement({ mode: mode, elementValues: Object.assign(Object.assign({}, settings), valToMerge), elementName: elementName }));
+};
+const setProductGridElementValue = (dispatch, itemName, attributeName, value, settings, mode, elementName, subObjName) => {
+    const valToMerge = getValueToMerge(attributeName, value, subObjName, settings);
+    dispatch(setProductGridElement({ mode: mode, elementValues: Object.assign(Object.assign({}, settings), valToMerge), elementName: elementName }));
+};
+const setFiltersElementValue = (dispatch, itemName, attributeName, value, settings, mode, elementName, subObjName) => {
+    const valToMerge = getValueToMerge(attributeName, value, subObjName, settings);
+    dispatch(setFiltersElement({ mode: mode, elementValues: Object.assign(Object.assign({}, settings), valToMerge), elementName: elementName }));
+};
+const setFiltersValue = (dispatch, itemName, attributeName, value, settings, mode, subObjName) => {
+    const valToMerge = getValueToMerge(attributeName, value, subObjName, settings.filters);
+    dispatch(setFilters({ mode: mode, filters: Object.assign(Object.assign({}, settings.filters), valToMerge) }));
+};
+const findItemMenuObj = (itemName) => {
+    let menuItem;
+    AllMenuItems.forEach((item) => {
+        if (item.itemName == itemName) {
+            menuItem = item;
+        }
+    });
+    return menuItem;
+};
+const getMutualAttKey = (itemName, attributeName, subObjName) => {
+    let key = '';
+    let itemMenu = findItemMenuObj(itemName);
+    if (!itemMenu)
+        return key;
+    itemMenu.parentsKeys && itemMenu.parentsKeys.forEach((parent) => {
+        key = parent + '_' + key;
+    });
+    key += itemMenu.key + '_';
+    if (subObjName) {
+        key += subObjName + '_';
+    }
+    key += attributeName;
+    return key;
+};
+const getDisplaysToSetMutualAtt = (key, editedSettings, mode) => {
+    const displays = [];
+    if (mode == 'desktop') {
+        if (!editedSettings[key]['tablet']) {
+            displays.push('tablet');
+            if (!editedSettings[key]['mobile']) {
+                displays.push('mobile');
+            }
+        }
+    }
+    else if (mode == 'tablet') {
+        if (!editedSettings[key]['mobile']) {
+            displays.push('mobile');
+        }
+    }
+    return displays;
+};
+const setMutualDisplaysAttributes = (dispatch, valueToMerge, value, settings, allCurrentDevicesSettings, itemName, attributeName, mode, subObjName, mutualDisplayAttributes) => {
+    if (mutualDisplayAttributes) {
+        let key = getMutualAttKey(itemName, attributeName, subObjName);
+        if (mutualDisplayAttributes[key]) {
+            if (mode != 'Desktop' && !mutualDisplayAttributes[key][mode.toLowerCase()]) {
+                dispatch(setMutualDisplayAttribute({ key: key, mode: mode.toLowerCase() }));
+            }
+            const displaysToSet = getDisplaysToSetMutualAtt(key, mutualDisplayAttributes, mode.toLowerCase());
+            displaysToSet.forEach((mode) => {
+                setDisplayItemValue(dispatch, itemName, attributeName, valueToMerge, value, allCurrentDevicesSettings[mode], mode, subObjName);
+            });
+        }
+    }
+};
+const setDisplayItemValue = (dispatch, itemName, attributeName, valueToMerge, value, settings, mode, subObjName) => {
+    switch (itemName) {
+        case 'Filters':
+            setFiltersValue(dispatch, itemName, attributeName, value, settings, mode, subObjName);
+            break;
+        case 'Removable Tags':
+            setFiltersElementValue(dispatch, itemName, attributeName, value, settings.filters.removableTags, mode, 'removableTags', subObjName);
+            break;
+        case 'Search within Results':
+            setFiltersElementValue(dispatch, itemName, attributeName, value, settings.filters.searchWithinResults, mode, 'searchWithinResults', subObjName);
+            break;
+        case 'Search within Filters':
+            setFiltersElementValue(dispatch, itemName, attributeName, value, settings.filters.searchWithinFilters, mode, 'searchWithinFilters', subObjName);
+            break;
+        case 'Show / Hide Filters Button':
+            setFiltersElementValue(dispatch, itemName, attributeName, value, settings.filters.showHideFiltersButton, mode, 'showHideFiltersButton', subObjName);
+            break;
+        case 'Fast Simon Search Box':
+            dispatch(setFastSimonSearchBox({ mode: mode, searchBox: Object.assign(Object.assign({}, settings.searchBox), valueToMerge) }));
+            break;
+        case 'Search Results Sorting':
+            dispatch(setSorting({ mode: mode, sorting: Object.assign(Object.assign({}, settings.sorting), valueToMerge) }));
+            break;
+        case 'Sort By':
+            const sortValToMerge = getValueToMerge(attributeName, value, subObjName, settings.sorting);
+            dispatch(setSorting({ mode: mode, sorting: Object.assign(Object.assign({}, settings.sorting), sortValToMerge) }));
+            break;
+        case 'Products Grid':
+            const productGridValToMerge = getValueToMerge(attributeName, value, subObjName, settings.productGrid);
+            dispatch(setProductGrid({ mode: mode, productGrid: Object.assign(Object.assign({}, settings.productGrid), productGridValToMerge) }));
+            break;
+        case 'Page Title':
+            setProductGridElementValue(dispatch, itemName, attributeName, value, settings.productGrid.pageTitle, mode, 'pageTitle', subObjName);
+            break;
+        case 'Pagination':
+            setProductGridElementValue(dispatch, itemName, attributeName, value, settings.productGrid.pagination, mode, 'pagination', subObjName);
+            break;
+        case 'Product':
+            setProductGridElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product, mode, 'product', subObjName);
+            break;
+        case 'Title':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.title, mode, 'title', subObjName);
+            break;
+        case 'Price':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.price, mode, 'price', subObjName);
+            break;
+        case 'Compare at Price':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.compare, mode, 'compare', subObjName);
+            break;
+        case 'Reviews':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.reviews, mode, 'reviews', subObjName);
+            break;
+        case 'Add to Cart':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.addToCart, mode, 'addToCart', subObjName);
+            break;
+        case 'SKU':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.sku, mode, 'sku', subObjName);
+            break;
+        case 'Description':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.description, mode, 'description', subObjName);
+            break;
+        case 'In Stock':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.inStock, mode, 'inStock', subObjName);
+            break;
+        case 'Out of Stock':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.outOfStock, mode, 'outOfStock', subObjName);
+            break;
+        case 'Vendor':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.vendor, mode, 'vendor', subObjName);
+            break;
+        case 'Wishlist':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.wishList, mode, 'wishList', subObjName);
+            break;
+        case 'Quick View':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.quickView, mode, 'quickView', subObjName);
+            break;
+        case 'Look-A-Like':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.lookALike, mode, 'lookALike', subObjName);
+            break;
+        case 'Swatches':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.colorSwatches, mode, 'colorSwatches', subObjName);
+            break;
+        case 'Back In Stock':
+            setProductElementValue(dispatch, itemName, attributeName, value, settings.productGrid.product.backInStock, mode, 'backInStock', subObjName);
+            break;
+        case 'Quick View Modal':
+            setProductGridElementValue(dispatch, itemName, attributeName, value, settings.productGrid.quickViewModal, mode, 'quickViewModal', subObjName);
+            break;
+        default:
+            break;
+    }
+};
+export const setAllFonts = (dispatch, obj, replace_value, path) => {
+    if (obj instanceof Object) {
+        if (isFontSetting(obj)) {
+            ['desktop', 'tablet', 'mobile'].forEach(mode => dispatch(setFamilyFont({ mode: mode, path: path, value: replace_value })));
+        }
+        Object.keys(obj).forEach(key => {
+            setAllFonts(dispatch, obj[key], replace_value, path.concat(key));
+        });
+    }
+};
+export const setItemValue = (dispatch, itemName, attributeName, value, settings, allCurrentDevicesSettings, mode, mutualDisplayAttributes, mutualDisplayFlag, subObjName, changeAllFonts) => {
+    dispatch(setEditorPosition({ actionName: 'SET' }));
+    let valueToMerge = {};
+    if (!subObjName) {
+        valueToMerge[attributeName] = value;
+    }
+    if (!changeAllFonts) {
+        setDisplayItemValue(dispatch, itemName, attributeName, valueToMerge, value, settings, mode, subObjName);
+        if (mutualDisplayFlag) {
+            setMutualDisplaysAttributes(dispatch, valueToMerge, value, settings, allCurrentDevicesSettings, itemName, attributeName, mode, subObjName, mutualDisplayAttributes);
+        }
+    }
+    else {
+        setAllFonts(dispatch, settings, value, []);
+    }
+};
+export const getNumberOfProductsPerRow = () => {
+    var _a;
+    const gridElement = (_a = document.querySelector("#products-grid-wrapper")) === null || _a === void 0 ? void 0 : _a.children[0].children;
+    if (gridElement) {
+        const grid = Array.from(gridElement);
+        const baseOffset = grid[0].getBoundingClientRect().top;
+        const breakIndex = grid.findIndex(item => item.getBoundingClientRect().top > baseOffset);
+        return (breakIndex === -1 ? grid.length : breakIndex);
+    }
+    return 0;
+};
+export const arrangeInfoElementsPositioning = (elementName, isActive, currentSettings, dispatch) => {
+    if (!(elementName in productInfoElementNameToAttribute))
+        return;
+    let tempLayout = (JSON.parse(JSON.stringify(currentSettings.productGrid.product.info.gridAreasObj))).filter(item => item.i != undefined);
+    if (!isActive) {
+        tempLayout = tempLayout.filter(item => item.i !== productInfoElementNameToAttribute[elementName]);
+    }
+    else {
+        tempLayout.push({ i: productInfoElementNameToAttribute[elementName], x: 0, y: getMaxRow(tempLayout), w: 4, h: 1, maxH: 1, maxW: 4, moved: false, static: false });
+    }
+    let CssGridAreas = createCssGridLayoutString(tempLayout);
+    dispatch(setProductInfoGridAreas({ areas: CssGridAreas, areasObj: tempLayout }));
+};
+//# sourceMappingURL=utils.js.map