{"version":3,"sources":["add-to-cart.js"],"names":["Collapse","mounted","formatCurrency","scrollTo","onLoad","arguments","length","undefined","document","querySelectorAll","forEach","element","_element$querySelecto","fields","field","index","addEventListener","nextField","products","$data","filter","p","Array","from","f","i","every","fieldValues","some","fv","id","dataset","fieldId","value","product","appendOptions","disabled","dispatchEvent","CustomEvent","bubbles","detail","data","find","Event","querySelector","e","items","name","categoryName","productListing","brandName","taxRate","price","quantity","values","JSON","parse","v","options","remove","_loop","_i","option","createElement","filteredProducts","textContent","concat","mpn","isOnSale","displayStandardPrice","displayPrice","image","cannotOrderCssClass","canOrder","classList","add","appendChild","target"],"mappings":"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","file":"add-to-cart.js","sourcesContent":["import Collapse from 'bootstrap.collapse';\r\nimport { mounted } from 'component-utils';\r\nimport { formatCurrency } from 'intl-utils';\r\nimport { scrollTo } from 'ui-utils';\r\n\r\nonLoad();\r\n\r\ndocument.addEventListener('DOMContentUpdated', e => onLoad(e.target));\r\n\r\nexport function onLoad(context = document) {\r\n    context.querySelectorAll('.add-to-cart').forEach(element => {\r\n        const fields = element.querySelectorAll('.field');\r\n\r\n        fields.forEach((field, index) => {\r\n            field.addEventListener('change', () => {\r\n                // Get the matching products for the current fields.\r\n                const products = element.$data.products.filter(p => Array.from(fields).filter((f, i) => i <= index).every(f => p.fieldValues.some(fv => fv.field.id == f.dataset.fieldId && fv.value == f.value)));\r\n\r\n                // Get the first product (if there are any).\r\n                let product = products.length > 0 ? products[0] : null;\r\n\r\n                // If there is a next field.\r\n                if (fields.length > index + 1) {\r\n                    // Get the next field.\r\n                    const nextField = fields[index + 1];\r\n\r\n                    // Append the options.\r\n                    appendOptions(nextField, products);\r\n\r\n                    // Enable the field.\r\n                    nextField.disabled = false;\r\n\r\n                    // Reset any unreachable fields.\r\n                    Array.from(fields).filter((f, i) => i > index + 1).forEach(f => {\r\n                        f.value = '';\r\n                        f.disabled = true;\r\n                    });\r\n\r\n                    // Reset the product.\r\n                    product = null;\r\n                }\r\n\r\n                // Set the product.\r\n                element.$data.product = product;\r\n\r\n                // Trigger the \"product:update\" event.\r\n                element.dispatchEvent(new CustomEvent('product:update', { bubbles: true, detail: product }));\r\n            });\r\n        });\r\n\r\n        if (fields.length > 0) {\r\n            mounted(element, data => {\r\n                // Append the options to the first field.\r\n                appendOptions(fields[0], data.products);\r\n\r\n                // If a product has been set then set the field values.\r\n                if (data.product != null) {\r\n                    const product = data.product;\r\n\r\n                    fields.forEach(field => {\r\n                        field.value = product.fieldValues.find(fv => fv.field.id == field.dataset.fieldId).value;\r\n                        field.dispatchEvent(new Event('change'));\r\n                    });\r\n                }\r\n            });\r\n        }\r\n\r\n        // Make sure a form exists within the element. This might not be the case, e.g. for a product stock notification.\r\n        element.querySelector('form')?.addEventListener('success', e => {\r\n            // Trigger the \"cart:added\" event.\r\n            element.dispatchEvent(new CustomEvent('cart:added', { bubbles: true, detail: { items: [{ id: element.$data.product.id, name: element.$data.product.name, categoryName: element.$data.productListing.categoryName, brandName: element.$data.product.brandName, taxRate: element.$data.product.taxRate, price: element.$data.product.price, quantity: element.$data.quantity }] } }));\r\n        });\r\n    });\r\n}\r\n\r\nfunction appendOptions(field, products) {\r\n    // Get the matching values for the field.\r\n    const values = JSON.parse(field.dataset.fieldValues).filter(v => products.some(p => p.fieldValues.some(fv => fv.field.id == field.dataset.fieldId && fv.value == v.value)));\r\n\r\n    // Remove the existing options.\r\n    for (let i = field.options.length - 1; i >= 1; i--) {\r\n        field.remove(i);\r\n    }\r\n\r\n    // Add the options.\r\n    for (let i = 0; i < values.length; i++) {\r\n        const option = document.createElement('option');\r\n        const filteredProducts = products.filter(p => p.fieldValues.some(fv => fv.field.id == field.dataset.fieldId && fv.value == values[i].value));\r\n\r\n        option.textContent = `${values[i].value}${filteredProducts.length == 1 ? `${filteredProducts[0].mpn != null ? ` - ${filteredProducts[0].mpn}` : ''} (${filteredProducts[0].isOnSale ? `was ${formatCurrency(filteredProducts[0].displayStandardPrice)} now ` : ''}${formatCurrency(filteredProducts[0].displayPrice)})` : ''}`;\r\n        option.value = values[i].value;\r\n        option.dataset.image = values[i].image;\r\n\r\n        // If the product is not available to order then add the specified class (if applicable).\r\n        if (field.dataset.cannotOrderCssClass && filteredProducts.length == 1 && !filteredProducts[0].canOrder)\r\n            option.classList.add(field.dataset.cannotOrderCssClass);\r\n\r\n        field.appendChild(option);\r\n    }\r\n}"]}