Sherwin-Williams Resuflor™ Topcoat Metallic on Material Bank (2024)

`; this.toggleMaterials(mit.removeSpecialCharAndSpaces(group), productId); }, toggleMaterials(group, productId) { let el = document.getElementById('material_' + productId), selectedItem = document.querySelector('.' + group + '.item-material.selected'); el.classList.add('selected'); if (selectedItem !== null) { selectedItem.classList.remove('selected'); } }, addToCart(item) { const self = this; if (!item.product_id) { dispatchMessages([ { type: 'error', text: 'Product\u0020not\u0020found' } ], 5000); } if (this.projectList && this.projectList.length <= 0) { this.dispatchCreateProject(item); } else { if (this.shouldTriggerProjectSelectionDialog()) { window.dispatchEvent( new CustomEvent('open-project-selection-dialog', { detail: { currentProjectId: self.customer.current_project, analyticsEventLocation: 'Product detail page', onCurrentProjectSave: (project) => { window.dispatchEvent(new CustomEvent('project-selected', { detail: { project } })); this.dispatchAddToCart( item, project.project_id, project.project_title, project.project_type ); } }, }), ); } else { this.dispatchAddToCart( item, self.customer.current_project, self.customer.current_project_name, self.customer.current_project_type ); } } }, shouldTriggerProjectSelectionDialog() { const selectProjectTimestamp = JSON.parse(localStorage.getItem('select-project-timestamp') ?? '0'); const userData = JSON.parse(localStorage.getItem('mage-cache-storage') || '{}')?.customer || {}; const currentTimestamp = Date.now(); const isTier13 = userData?.groupId === this.tier13GroupId; if (isTier13) { return false } return currentTimestamp - selectProjectTimestamp > 86400000; // 24 hours }, dispatchCreateProject(item) { const self = this; self.openCreateProject(); window.addEventListener("res-create-project", (res)=> { if (res.detail.status === 'success') { self.dispatchAddToCart( item, res.detail['project_id'], res.detail['project_title'], res.detail['project_type'] ); } }); }, openCreateProject() { window.dispatchEvent( new CustomEvent( "open-create-project-modal" ) ); }, isRecommendationsModalEnabled() { const browserStorage = JSON.parse(hyva.getBrowserStorage()?.getItem('recommendations-modal-settings')); if (!browserStorage) { return false; } const allowedGroups = browserStorage.hasOwnProperty('allowed-groups') ? browserStorage['allowed-groups'] : []; return allowedGroups.includes((this.customer.groupId).toString()); }, openRecommendationsModal(data, project, inProgress = false) { const inventoryProduct = this.inventory ? Object.values(this.inventory).find(item => item.product_id == data.productId ) : null; const controlRuleId = data.hasOwnProperty('modal_data') ? data.modal_data?.[0]?.control_rule_id || null : null; const detail = { inProgress: inProgress, serverMessage: data?.message ?? null, isInRealTimeStock: inventoryProduct?.qty > 0, skus: [data.product_id], bagProject: project, addedMaterialImage: data.photo ?? null, controlRuleId: controlRuleId, forceAllow: data?.forceAllow ?? false }; if (data && data.hasOwnProperty('service')) { detail.service = data.service; window.dispatchEvent( new CustomEvent('open-services-modal', { detail: detail }) ); } else { window.dispatchEvent( new CustomEvent('open-recommendations-modal', { detail: detail }) ); } }, dispatchAddToCart(item, projectId, projectName, projectType) { const self = this, productId = item.product_id; const project = { 'project_title': projectName, 'project_type': projectType, 'project_id': projectId }; self.disableBtn = true; self.startLoader(true); if (this.isRecommendationsModalEnabled() && !this.blockRecommendationsModal) { this.openRecommendationsModal(item, project, true); } let associatedProductData = ''; if (Object.keys(this.parentProduct).length) { associatedProductData = '&related_product[0]=' + this.parentProduct.brand + ': ' + this.parentProduct.name + '&related_product_id[0]=' + this.parentProduct.id; if (typeof pdpUrlParams !== 'undefined') { const listParams = { item_list_id: pdpUrlParams.get('itemListId'), item_list_name: pdpUrlParams.get('itemListName') ? decodeURI(pdpUrlParams.get('itemListName')) : null, index: pdpUrlParams.get('index') ? parseInt(pdpUrlParams.get('index')) : null, }; associatedProductData += `&item_list_id[0]=${listParams.item_list_id}&item_list_name[0]=${listParams.item_list_name}&index[0]=${listParams.index}`; } } fetch(self.addToCartUrl, { method: 'POST', body:'product_id[0]=' + productId + '&' + 'project_id[0]=' + projectId + '&' + 'project_name[0]=' + projectName + '&' + 'project_type[0]=' + projectType + '&' + 'qty[0]=1' + associatedProductData, headers: { 'Content-type': 'application/x-www-form-urlencoded' } }).then(response => { return response.json(); }).then(res => { if (res.status === 'success') { this.gtmTrackAddToCart(item); const inventoryProduct = Object.values(this.inventory || []).find(inventoryItem => inventoryItem.product_id === item.productId ); const isProductOutOfStock = !inventoryProduct || (inventoryProduct?.qty ?? 0) <= 0; if ( isProductOutOfStock && this.isRecommendationsModalEnabled() && !this.blockRecommendationsModal ) { this.openRecommendationsModal(item, project); window.dispatchEvent(new CustomEvent("block-recommendations-modal")); } else { setTimeout(() => { hyva.setCookie('mage-cache-sessid', '', -1, true); // remove the cookie to force customer section window.dispatchEvent(new CustomEvent("reload-customer-section-data")); }, 1000); self.itemAdded = productId; if (res.hasOwnProperty('message') && res.message) { const project = { 'project_title': projectName, 'project_type': projectType, 'project_id': projectId }; item.forceAllow = true; this.openRecommendationsModal(item, project); } else { dispatchMessages([ { type: 'success', text: 'Added\u0020to\u0020cart' } ], 5000); if ( inventoryProduct && inventoryProduct.qty > 0 ) { this.checkDiverzify(res, project); } if (self.customer && (self.customer.groupId === 1 || self.customer.groupId === 2)) { /* window.dispatchEvent( new CustomEvent("show-brand-package-text", { detail: { hideAfter: 5000 } }) ); */ } } } } else { dispatchMessages([ { type: 'error', text: res && res.message ? res.message : 'Some\u0020error\u0020occurred' } ], 5000); } }).finally(() => { self.startLoader(false); self.disableBtn = false; setTimeout(() => { self.itemAdded = false; }, 2000); }); }, loadFavoriteList(items) { this.boardList = items ? items : []; }, getInventory (data) { this.inventory = data; }, responseSaveToBoard(detail) { const self = this; const response = detail.response; if (response.hasOwnProperty('items')) { response.items.forEach((newItem) => { if (self.boardList.find( (item) => item && (Number(item.item_id) === Number(newItem.item_id)) ) === undefined) { self.boardList.push(newItem); } }); clearTimeout(self.timeout); self.disableBtn = false; } else if (response.id) { if (self.boardList.find( (item) => item && (Number(item.item_id) === Number(response.item_id)) ) === undefined) { self.boardList.push(response); } } // force update boardList self.boardList.push({id:1}); }, isSaved(productId) { return this.boardList.find( (item) => item && (Number(item.item_id) === Number(productId)) ) !== undefined; }, openBoardModal(productId) { window.dispatchEvent( new CustomEvent('open-save-to-board-modal', { detail: {itemIds: [productId]} }) ); }, receiveData(data) { if (data.customer?.firstname) { this.cart = data.cart; this.customer = data.customer; this.mapCartItems(data.cart.items); } }, mapCartItems(items) { const self = this; items.forEach(item => { self.cartItemList.push({ 'product_sku' : item.product_sku }); }); }, updateClass(listTitle, index) { if (index > 9) { return 'hide-finishes-on-mobile ' + mit.removeSpecialCharAndSpaces(listTitle); } return mit.removeSpecialCharAndSpaces(listTitle); }, generateUrl(baseUrl, params = {}) { const url = new URL(baseUrl); Object.entries(params).map(([key, value]) => { url.searchParams.set(key, value); }); return url.toString(); }, seeMore() { document.getElementsByClassName('hide-finishes-on-mobile').forEach(el => { el.classList.remove('hide-finishes-on-mobile'); }); }, /** Dispatch event to open mini pdp modal **/ openMiniPdp(productId) { window.dispatchEvent( new CustomEvent( "open-mini-pdp", { detail: productId } ) ); }, getProjects(projectList) { this.projectList = projectList; }, startLoader(isLoading) { window.dispatchEvent( new CustomEvent( "start-loader", { detail: isLoading } ) ); }, gtmTrackAddToCart(item) { const listParams = { item_list_id: pdpUrlParams.get('itemListId'), item_list_name: pdpUrlParams.get('itemListName') ? decodeURI(pdpUrlParams.get('itemListName')) : null, index: pdpUrlParams.get('index') ? parseInt(pdpUrlParams.get('index')) : null, }; item = this.prepareGTMItemData({ ...item, ...listParams }); mitGTM.addToCart([item], 'Product detail page'); }, prepareGTMItemData(item) { const itemCategory = []; const itemCategory2 = []; const itemCategory3 = []; if (item.hasOwnProperty('taxonomy')) { const taxonomies = item.taxonomy.split('|'); for (const taxonomy of taxonomies) { const splittedTaxonomy = taxonomy.split('.'); if (splittedTaxonomy[0] && !itemCategory.includes(splittedTaxonomy[0])) { itemCategory.push(splittedTaxonomy[0]); } if (splittedTaxonomy[1] && !itemCategory2.includes(splittedTaxonomy[1])) { itemCategory2.push(splittedTaxonomy[1]); } if (splittedTaxonomy[2] && !itemCategory3.includes(splittedTaxonomy[2])) { itemCategory3.push(splittedTaxonomy[2]); } } } return { 'item_name': item.hasOwnProperty('title') ? item.title : null, 'item_id': item.hasOwnProperty('sku') ? item.sku : null, 'item_brand': item.hasOwnProperty('brand') ? item.brand : null, 'item_type': mitGTM.getItemType(item), 'item_category': itemCategory.join(', '), 'item_category2': itemCategory2.join(', '), 'item_category3': itemCategory3.join(', '), 'item_variant': item.hasOwnProperty('color') ? item.color : null, 'item_list_id': item?.item_list_id || null, 'item_list_name': item?.item_list_name || null, 'index': item?.index || null, 'quantity': 1, 'price': 0, } }, /* MB activeChild Param */ preselectActiveChild() { let productId = mit.getUrlParameter('activeChild'), self = this; if (!productId && typeof window.productConfigurableJson !== 'undefined') { productId = window.productConfigurableJson['first_child_id']; } if ( productId && typeof window.productConfigurableJson !== 'undefined' && window.productConfigurableJson['child_list'][productId] ) { const parentProduct = window.productConfigurableJson['child_list'][productId]; this.parentProduct = { id: parentProduct.product_id.value, name: parentProduct.name.value, brand: parentProduct.manufacturer.value, }; } }, checkDiverzify(addToCartResponse, project) { const formData = new FormData(); formData.append('product_id', this.productId); fetch(this.diverzifyUrl, { method: 'POST', body: formData, }).then(response => { return response.json(); }).then(res => { if (res?.data?.hasOwnProperty('customer_3m_dealer')) { addToCartResponse.service = res; this.openRecommendationsModal(addToCartResponse, project, false); } }); }, } }