{"version":3,"file":"822.da71c0737f583105.js","mappings":"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","sources":["webpack:///./Scripts/Components/ByRydens/UpsellProducts.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { translate } from '../../Services/translation';\r\nimport { useDispatch } from 'react-redux';\r\nimport { post } from '../../Services/http';\r\nimport { catchError } from '../../Actions/Error.action';\r\n\r\nconst UpsellProducts = ({ ownerVariantId, lightSources, lampPlugs, quantityFieldId }) => {\r\n    const refLampList = useRef(null);\r\n    const refLampSelect = useRef(null);\r\n    const refSourceList = useRef(null);\r\n    const refSourceSelect = useRef(null);\r\n    const [lightSourceId, setLightSource] = useState(null);\r\n    const [lampPlugId, setLampPlug] = useState(null);\r\n    const dispatch = useDispatch();\r\n    const refplug = useRef(null);\r\n    const refsource = useRef(null);\r\n\r\n    document.addEventListener('click', function (event) {\r\n        if (refplug.current && !refplug.current.contains(event.target)) {\r\n            if (refLampList.current.classList.contains('dropdown__block-select-list--show')) {\r\n                refLampList.current.classList.toggle('dropdown__block-select-list--show');\r\n            }\r\n        }\r\n        if (refsource.current && !refsource.current.contains(event.target)) {\r\n            if (refSourceList.current.classList.contains('dropdown__block-select-list--show')) {\r\n                refSourceList.current.classList.toggle('dropdown__block-select-list--show');\r\n            }\r\n        }\r\n    });\r\n\r\n    const onLightSourceChange = (value, text) => {\r\n        setLightSource(value);\r\n        refSourceList.current.classList.toggle('dropdown__block-select-list--show');\r\n        refSourceSelect.current.innerText = text;\r\n    };\r\n    const onLampPlugChange = (value, text) => {\r\n        setLampPlug(value);\r\n        refLampList.current.classList.toggle('dropdown__block-select-list--show');\r\n        refLampSelect.current.innerText = text;\r\n    };\r\n    const productQuantityElement = document.getElementById(quantityFieldId);\r\n\r\n    useEffect(() => {\r\n        const updatePrice = () => {\r\n            const productQuantity = productQuantityElement ? quantityFieldId.value : '1';\r\n            post('/api/product-upsell', {\r\n                parentId: ownerVariantId,\r\n                lightSourceId,\r\n                lampPlugId,\r\n                productQuantity,\r\n            })\r\n                .then((response) => response.json())\r\n                .then((result) => {\r\n                    var priceElement = document.querySelector('.product-detail__price-info .price_span');\r\n                    priceElement.textContent = result.formattedCampaignPrice ? result.formattedCampaignPrice : result.formattedPrice;\r\n                    var priceElementOldPrice = document.querySelector('.product__old-price');\r\n                    if (priceElementOldPrice !== null) {\r\n                        priceElementOldPrice.textContent = result.formattedPrice;\r\n                    }\r\n                    var buyButton = document.querySelector('buy-button');\r\n                    buyButton.setAttribute('data-lightsourceid', result.lightSourceId ?? '');\r\n                    buyButton.setAttribute('data-lightplugid', result.lampPlugId ?? '');\r\n                    buyButton.setAttribute('data-lightplugquantity', result.lampPlugId ? '1' : '0');\r\n                    buyButton.setAttribute('data-lightsourcequantity', result.lightSourceId ? result.lightSourceQuantity : '0');\r\n                })\r\n                .catch((ex) => dispatch(catchError(ex, (error) => loadError(error))));\r\n        };\r\n\r\n        if (lightSourceId !== null || lampPlugId !== null) {\r\n            updatePrice();\r\n        }\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [lightSourceId, lampPlugId]);\r\n\r\n    return (\r\n        <div className=\"upsell-product-selector\">\r\n            {lightSources && lightSources.length > 0 && (\r\n                <div ref={refsource} className=\"dropdown\">\r\n                    <div className=\"dropdown__block-title\">{translate(`product.LightSourceRelationShipSelectCaption`)}</div>\r\n                    <div>\r\n                        <div\r\n                            onClick={() => refSourceList.current.classList.toggle('dropdown__block-select-list--show')}\r\n                            ref={refSourceSelect}\r\n                            className=\"dropdown__block-select\"\r\n                        >\r\n                            {translate('product.LightSourceRelationShipSelectLabel')}\r\n                        </div>\r\n                        <ul ref={refSourceList} className=\"dropdown__block-select-list\" title={translate('product.LightSourceRelationShipSelectLabel')}>\r\n                            <li\r\n                                className=\"dropdown__block-select-list-item\"\r\n                                onClick={() => onLightSourceChange('', translate('product.LightSourceRelationShipSelectLabel'))}\r\n                            >\r\n                                {translate('product.LightSourceRelationShipSelectLabel')}\r\n                            </li>\r\n                            {lightSources.map((src, index) => (\r\n                                <li className=\"dropdown__block-select-list-item\" onClick={() => onLightSourceChange(src.id, src.name)} key={index}>\r\n                                    {src.name}\r\n                                </li>\r\n                            ))}\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n            )}\r\n            {lampPlugs && lampPlugs.length > 0 && (\r\n                <div ref={refplug} className=\"dropdown\">\r\n                    <div className=\"dropdown__block-title\">{translate(`product.LampPlugsRelationShipSelectCaption`)}</div>\r\n                    <div>\r\n                        <div\r\n                            onClick={() => refLampList.current.classList.toggle('dropdown__block-select-list--show')}\r\n                            ref={refLampSelect}\r\n                            className=\"dropdown__block-select\"\r\n                        >\r\n                            {translate('product.LampPlugsRelationShipSelectLabel')}\r\n                        </div>\r\n                        <ul ref={refLampList} className=\"dropdown__block-select-list\" title={translate('product.LampPlugsRelationShipSelectLabel')}>\r\n                            <li\r\n                                className=\"dropdown__block-select-list-item\"\r\n                                onClick={() => onLampPlugChange('', translate('product.LampPlugsRelationShipSelectLabel'))}\r\n                            >\r\n                                {translate('product.LampPlugsRelationShipSelectLabel')}\r\n                            </li>\r\n                            {lampPlugs.map((src, index) => (\r\n                                <li className=\"dropdown__block-select-list-item\" onClick={() => onLampPlugChange(src.id, src.name)} key={index}>\r\n                                    {src.name}\r\n                                </li>\r\n                            ))}\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default UpsellProducts;\r\n"],"names":["ownerVariantId","lightSources","lampPlugs","quantityFieldId","refLampList","useRef","refLampSelect","refSourceList","refSourceSelect","lightSourceId","setLightSource","useState","lampPlugId","setLampPlug","dispatch","useDispatch","refplug","refsource","document","addEventListener","event","current","contains","target","classList","toggle","onLightSourceChange","value","text","innerText","onLampPlugChange","productQuantityElement","getElementById","useEffect","productQuantity","post","parentId","then","response","json","result","querySelector","textContent","formattedCampaignPrice","formattedPrice","priceElementOldPrice","buyButton","setAttribute","lightSourceQuantity","catch","ex","catchError","error","loadError","updatePrice","className","length","ref","translate","onClick","title","map","src","index","id","name","key"],"sourceRoot":""}