{"version":3,"sources":["webpack:///./src/js/modules/ProductSampleSelection.js","webpack:///./src/js/modules/ProductGuideOverlay.js","webpack:///./src/js/modules/ProductSample.js"],"names":["ProductSampleSelection","el","props","filters","Filters","tableAttributes","TableAttributes","skus","Skus","originalSkus","displayNextFilter","clicked","clickedValue","this","dom","sampleSelection","querySelector","noSampleMessage","dataset","addToBasketLabel","skuTerms","selectionIndex","showedQuestions","addEventListener","event","target","type","handleOptionSelect","findIndex","filter","SKUPropertyName","name","querySelectorAll","forEach","section","index","remove","nextFilter","selectedFilter","sku","SKUPropertyValue","value","valuesArray","map","idsArray","ID","labelsArray","values","self","indexOf","labels","ids","length","displayFilter","displayHiddenFilter","displayResultsTable","document","createElement","classList","add","filterValues","i","find","id","split","join","innerHTML","forAFreeSample","concat","Text","appendChild","input","previousInput","checked","element","skuId","lastSibling","getClosestParent","parentNode","lastChild","selector","currentElement","matches","setAttribute","selectedValues","selectedSkuIds","push","Object","skuValue","includes","_","CanSample","tableHeading","attribute","Label","button","e","preventDefault","window","addProduct","Component","ProductGuideOverlay","title","downloadUrl","downloadLabel","addToBasketColumnLabel","isDansac","label","data","useState","isOpen","setIsOpen","count","setCount","Items","setItems","isDesktop","setIsDesktop","colWidth","setColWidth","tableRef","useRef","cols","setWidth","minWidth","maxWidth","handleSample","some","item","calculateColWidth","current","offsetWidth","useEffect","handleResize","matchMedia","removeEventListener","className","onClick","parse","open","currentTarget","role","xlinkHref","href","download","ref","key","cloneItems","sortedSKUS","sort","a","b","reverse","handleSort","style","att","j","parsedContent","string","spanElement","React","isValidElement","colorStyle","color","data-label","keys","skuKey","data-id","propTypes","PropTypes","isRequired","object","ProductSample","loadData","sampleSelector","productOverlayButton","axios","get","endpoint","initModules","console","log","nodeList","node","render","reactModule"],"mappings":"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","file":"27.bundle.js","sourcesContent":["import { Component } from '@verndale/core';\n\nclass ProductSampleSelection extends Component {\n constructor(el, props) {\n super(el);\n this.filters = props.Filters;\n this.tableAttributes = props.TableAttributes;\n this.skus = props.Skus;\n this.originalSkus = props.Skus;\n this.displayNextFilter();\n this.clicked = 0;\n this.clickedValue = '';\n }\n\n setupDefaults() {\n this.dom = {\n sampleSelection: this.el.querySelector(\n '.product-detail__sample-selection'\n ),\n noSampleMessage: this.el.dataset.noSampleMessage,\n addToBasketLabel: this.el.dataset.addToBasketLabel,\n skuTerms: this.el.dataset.skuTerms,\n };\n\n this.selectionIndex = 0;\n this.showedQuestions = 0;\n this.filters = {};\n this.tableAttributes = [];\n this.skus = [];\n }\n\n addListeners() {\n this.el.addEventListener('change', (event) => {\n if (event.target.type === 'radio') {\n this.handleOptionSelect(event.target);\n }\n });\n }\n\n handleOptionSelect(target) {\n const selectionIndex = this.filters.findIndex(\n (filter) => filter.SKUPropertyName === target.name\n );\n if (this.selectionIndex > selectionIndex) {\n this.selectionIndex = selectionIndex;\n\n // Remove all filters after the current selection\n const sections = this.el.querySelectorAll(\n '.product-detail__sample-selection-section'\n );\n sections.forEach((section, index) => {\n if (index > selectionIndex) {\n section.remove();\n }\n });\n }\n\n this.selectionIndex++;\n this.displayNextFilter();\n }\n\n displayNextFilter() {\n const nextFilter = this.filters[this.selectionIndex];\n if (nextFilter) {\n // Get all values for nextFilter in the this.skus array without duplicating\n let skus = this.skus;\n\n this.filters.forEach((filter) => {\n // Get value for filter\n const selectedFilter = this.el.querySelector(\n `input[name=\"${filter.SKUPropertyName}\"]:checked`\n );\n // check here after the first filter\n if (selectedFilter) {\n skus = skus.filter((sku) => sku[filter.SKUPropertyValue] === selectedFilter.value);\n }\n });\n const valuesArray = skus.map((sku) => sku[nextFilter.SKUPropertyValue]);\n const idsArray = skus.map((sku) => sku.ID);\n const labelsArray = skus.map((sku) => sku[nextFilter.SKUPropertyName]);\n\n const values = valuesArray.filter(\n (value, index, self) => self.indexOf(value) === index\n );\n const labels = labelsArray.filter(\n (value, index, self) => self.indexOf(value) === index\n );\n const ids = idsArray.filter(\n (value, index, self) => self.indexOf(value) === index\n );\n\n if (values.length > 1) {\n // Display the filter\n if (this.clickedValue !== '') {\n this.displayFilter(nextFilter, values, labels, ids);\n }\n } else {\n // Add the hidden filter and skip to the next filter\n this.selectionIndex++;\n this.displayHiddenFilter(nextFilter, values[0]);\n this.displayNextFilter();\n }\n } else {\n // Display results table\n this.displayResultsTable();\n }\n }\n\n displayFilter(filter, values, labels, ids) {\n const section = document.createElement('div');\n section.classList.add('product-detail__sample-selection-section');\n const filterValues = values\n .map(\n (value, i) =>\n value &&\n ``\n )\n .join('');\n\n section.innerHTML = `\n

${this.showedQuestions < 1 ? this.el.dataset.forAFreeSample.concat(' ') : ''}${filter.Text}

\n
\n ${filterValues}\n
`;\n\n this.showedQuestions++;\n\n this.el.appendChild(section);\n const inputs = section.querySelectorAll('.product-detail__sample-selection-options input');\n\n inputs.forEach((input) => {\n input.addEventListener('click', (event) => {\n if (this.clickedValue !== '' && this.clickedValue !== event.target.value) {\n const previousInput = section.querySelector(`input[value=\"${this.clickedValue}\"]`);\n if (previousInput) {\n previousInput.checked = false;\n }\n this.clickedValue = event.target.value;\n this.clicked = 0;\n }\n\n if (this.clicked === 0) {\n event.target.checked = true;\n this.clickedValue = event.target.value;\n this.clicked++;\n } else {\n const element = this.el.querySelector(\n `[value=\"${this.clickedValue}\"][data-sku-id=\"${event.target.dataset.skuId}\"]`\n );\n const closestParent = this.getClosestParent(\n element,\n '.product-detail__sample-selection-section'\n );\n\n const lastSibling = closestParent.parentNode.lastChild;\n\n if (lastSibling) {\n lastSibling.remove();\n }\n event.target.checked = false;\n this.clickedValue = '';\n this.clicked = 0;\n }\n });\n });\n this.skus = this.originalSkus;\n }\n\n getClosestParent(element, selector) {\n let currentElement = element;\n\n while(currentElement) {\n if (currentElement.matches(selector)) {\n return currentElement;\n }\n currentElement = currentElement.parentNode;\n }\n return null;\n }\n\n displayHiddenFilter(filter, value) {\n const section = document.createElement('div');\n section.classList.add('product-detail__sample-selection-section');\n section.setAttribute('hidden', '');\n\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = filter.SKUPropertyName;\n input.value = value;\n section.appendChild(input);\n this.el.appendChild(section);\n }\n\n displayResultsTable() {\n // Get the selected sku\n let sku = this.skus[0];\n if (sku) {\n const selectedValues = [];\n const selectedSkuIds = [];\n this.filters.forEach((filter) => {\n const selectedFilter = this.el.querySelector(\n `input[name=\"${filter.SKUPropertyName}\"]:checked`\n );\n\n if (selectedFilter) {\n selectedValues.push(selectedFilter.value);\n selectedSkuIds.push(selectedFilter.dataset.skuId);\n }\n });\n\n if (selectedSkuIds.length > 0) {\n sku = Object.values(this.skus)\n .filter((skuValue) => {\n return selectedSkuIds.includes(skuValue.ID);\n })\n .filter((_, i, self) => {\n return i === self.length - 1;\n })[0];\n }\n\n const section = document.createElement('div');\n section.classList.add('product-detail__sample-selection-section');\n section.innerHTML = `\n ${sku.CanSample ? `

${this.el.dataset.tableHeading}

` : ''}\n \n ${this.tableAttributes.map((attribute) => `\n \n \n \n `).join('')}\n
${attribute.Label}${sku[attribute.SKUPropertyName]}
\n ${this.dom.skuTerms ? `

${this.dom.skuTerms}

` : ''}\n ${sku.CanSample ? `` : `

${this.dom.noSampleMessage}

`}\n `;\n\n\n const button = section.querySelector('.product-detail__cta');\n if (button) {\n button.addEventListener('click', (e) => {\n e.preventDefault();\n window.addProduct(e.target.dataset.id);\n });\n }\n\n this.el.appendChild(section);\n\n }\n }\n}\n\nexport default ProductSampleSelection;\n","import PropTypes from 'prop-types';\nimport React, { useState, useEffect, useRef } from 'react';\nimport parse from 'html-react-parser';\n\nconst ProductGuideOverlay = (props) => {\n const {\n title,\n downloadUrl,\n downloadLabel,\n addToBasketLabel,\n addToBasketColumnLabel,\n skuTerms,\n isDansac,\n label,\n data,\n } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n const [count, setCount] = useState(1);\n const { TableAttributes, Skus } = data;\n const [originalSkus] = useState([...data.Skus]);\n const [Items, setItems] = useState(Skus);\n const [isDesktop, setIsDesktop] = useState(true);\n const [colWidth, setColWidth] = useState(0);\n const tableRef = useRef(null);\n const cols = TableAttributes.length + 1;\n const setWidth = isDesktop\n ? { minWidth: `${colWidth}px`, maxWidth: `${colWidth}px` }\n : null;\n const handleSample = () => Items.some((item) => item['CanSample']);\n\n const calculateColWidth = () => {\n if (tableRef.current) {\n const tableWidth = tableRef.current.offsetWidth;\n const colWidth = tableWidth / (cols - (handleSample() ? 0 : 1));\n setColWidth(colWidth);\n }\n };\n\n useEffect(() => {\n tableRef.current && isOpen && calculateColWidth();\n }, [isOpen]);\n\n const handleResize = () => {\n calculateColWidth();\n if (window.matchMedia('(min-width: 1024px)').matches) {\n setIsDesktop(true);\n } else {\n setIsDesktop(false);\n }\n };\n\n useEffect(() => {\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleSort = (attribute) => {\n const cloneItems = [...Items];\n if (attribute === 'ID') {\n return;\n }\n\n if (count === 3) {\n setCount(1);\n setItems(originalSkus);\n return;\n }\n\n const sortedSKUS = cloneItems.sort((a, b) => {\n if (a[attribute] < b[attribute]) {\n return -1;\n }\n if (a[attribute] > b[attribute]) {\n return 1;\n }\n return 0;\n });\n // count number of clicks on attribute\n setCount(count + 1);\n\n // if count is odd, sort ascending, if count is even, sort descending\n if (count % 2 === 0) {\n sortedSKUS.reverse();\n }\n\n setItems(sortedSKUS);\n };\n\n return (\n <>\n setIsOpen(true)}\n >\n {parse(label)}\n \n\n {isOpen ? (\n {\n if (e.target === e.currentTarget) {\n setIsOpen(false);\n }\n }}\n >\n
\n setIsOpen(false)}\n >\n \n \n \n \n
\n
\n

\n {parse(title)}\n

\n \n {parse(downloadLabel)}\n \n \n \n \n
\n \n \n \n {TableAttributes.map((attribute, i) => (\n handleSort(attribute.SKUPropertyName)}\n style={setWidth}\n >\n \n {parse(attribute.Label)}\n \n \n \n \n \n ))}\n {handleSample() && (\n {parse(addToBasketColumnLabel)}\n )}\n \n \n \n {Items.length\n ? Items.map((item, i) => (\n \n {TableAttributes.length &&\n TableAttributes.map((att, j) => {\n if (\n item[att.SKUPropertyName] &&\n item[att.SKUPropertyName].includes('color_dot')\n ) {\n const parsedContent = parse(\n item[att.SKUPropertyName]\n );\n let string = '',\n spanElement = null;\n parsedContent.forEach(element => {\n if (typeof element === 'string') {\n string = element;\n } else if (React.isValidElement(element)) {\n spanElement = element;\n }\n });\n const colorStyle =\n spanElement.props.style.color || '';\n if (colorStyle && string) {\n return (\n \n
\n \n •\n \n {string}\n
\n \n );\n }\n }\n\n return item[att.SKUPropertyName] ? (\n \n {parse(item[att.SKUPropertyName])}\n \n ) : (\n \n );\n })}\n\n {handleSample() &&\n Object.keys(item).map((skuKey, i) => {\n if (skuKey === 'ID') {\n return (\n \n {item.CanSample && (\n {\n window.addProduct(item[skuKey]);\n setIsOpen(false);\n }}\n >\n {parse(addToBasketLabel)}\n \n )}\n \n );\n }\n })}\n \n ))\n : null}\n \n \n {skuTerms ? (\n
\n

\n {parse(skuTerms)}\n

\n
\n ) : (\n ''\n )}\n
\n
\n \n ) : null}\n \n );\n};\n\nProductGuideOverlay.propTypes = {\n title: PropTypes.string.isRequired,\n downloadUrl: PropTypes.string.isRequired,\n downloadLabel: PropTypes.string.isRequired,\n addToBasketLabel: PropTypes.string.isRequired,\n addToBasketColumnLabel: PropTypes.string.isRequired,\n data: PropTypes.object.isRequired,\n};\n\nexport default ProductGuideOverlay;\n","import { Component } from '@verndale/core';\nimport React from 'react';\nimport { render } from 'react-dom';\nimport axios from 'axios';\nimport ProductSampleSelection from './ProductSampleSelection';\nimport ProductGuideOverlay from './ProductGuideOverlay';\n\nconst reactModule = (Component, nodeList, data) => {\n nodeList.forEach((node) => render(, node));\n};\n\nclass ProductSample extends Component {\n constructor(el) {\n super(el);\n this.loadData();\n }\n\n setupDefaults() {\n this.dom = {\n sampleSelector: this.el.querySelector(\n '.product-detail__sample-selection'\n ),\n productOverlayButton: this.el.querySelector('.product-detail__footer-button-container')\n };\n }\n\n async loadData() {\n try {\n const { data } = await axios.get(this.el.dataset.endpoint);\n this.initModules(data);\n\n } catch (error) {\n console.log(error);\n }\n }\n\n initModules(data) {\n if (this.dom.sampleSelector) {\n new ProductSampleSelection(this.dom.sampleSelector, data);\n }\n if (this.dom.productOverlayButton) {\n reactModule(ProductGuideOverlay, [this.dom.productOverlayButton], data);\n }\n }\n}\n\nexport default ProductSample;\n"],"sourceRoot":""}