{"version":3,"sources":["webpack:///./Scripts/Components/Comparison/ComparisonProductButtons.js","webpack:///./Scripts/Components/Comparison/ComparisonList.js","webpack:///./Scripts/Containers/Comparison/ComparisonList.container.js"],"names":["ComparisonProductButtons","_ref","articleNumber","showBuyButton","quantityFieldId","href","label","cssClass","concat","_useState","useState","_useState2","_slicedToArray","quantity","setQuantity","React","createElement","Fragment","BuyButton","translate","className","htmlFor","id","type","data-buy-quantity-input","value","onChange","event","target","min","max","maxLength","ComparisonList","_context","amountOfProducts","storedData","JSON","parse","localStorage","getItem","listOfArticleNumbers","setArticleNumbers","_useState3","_useState4","listOfProducts","setProducts","getStockStatusStyle","product","isExpired","notInStockOrderArticle","isInStock","useEffect","get","join","then","response","json","result","_toConsumableArray","mainProduct","length","_mapInstanceProperty","call","key","onClick","remainingProducts","_","without","setItem","_JSON$stringify","src","imageUrl","alt","name","fields","field","matchedField","_findInstanceProperty","f","differs","price","hasReplacementArticle","itemProp","itemScope","itemType","campaignPrice","includeVat","url","stockStatusDescription","connect","state","comparison","_objectSpread","dispatch","amount","props"],"mappings":"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","file":"15.96aa0aa8b2ec896fd25c.js","sourcesContent":["import React from 'react';\r\nimport BuyButton from '../../Containers/BuyButton.Container';\r\nimport { translate } from '../../Services/translation';\r\nimport { useState } from 'react';\r\n\r\nexport default function ComparisonProductButtons({\r\n  articleNumber,\r\n  showBuyButton,\r\n  quantityFieldId,\r\n  href,\r\n}) {\r\n  const label = showBuyButton ? 'product.buy' : 'product.show';\r\n  const cssClass = `${\r\n    showBuyButton ? 'button buy-button' : 'button buy-button'\r\n  } product-detail__buy-button`;\r\n\r\n  const [quantity, setQuantity] = useState(1);\r\n\r\n  return (\r\n    <>\r\n      <BuyButton\r\n        {...{\r\n          label: translate(label),\r\n          articleNumber: showBuyButton ? articleNumber : null,\r\n          quantityFieldId,\r\n          href,\r\n          cssClass: cssClass,\r\n        }}\r\n      ></BuyButton>\r\n      {showBuyButton && (\r\n        <div className=\"product__quantity-container\">\r\n          <label htmlFor=\"quantity\" className=\"product__quantity\">\r\n            {translate('product.quantity')}\r\n          </label>\r\n          <input\r\n            id={quantityFieldId}\r\n            type=\"number\"\r\n            data-buy-quantity-input\r\n            value={quantity}\r\n            onChange={event => {\r\n              setQuantity(event.target.value);\r\n            }}\r\n            min=\"0\"\r\n            max=\"999\"\r\n            maxLength=\"3\"\r\n            className=\"product__buy-quantity form__input\"\r\n          />\r\n        </div>\r\n      )}\r\n    </>\r\n  );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport { get } from '../../Services/http';\r\nimport ComparisonProductButtons from './ComparisonProductButtons';\r\nimport _ from 'lodash';\r\nimport { translate } from '../../Services/translation';\r\n\r\nexport default function ComparisonList({ amountOfProducts }) {\r\n    // saved comparison data\r\n    const storedData = JSON.parse(localStorage.getItem('products'));\r\n    const [listOfArticleNumbers, setArticleNumbers] = useState(\r\n        storedData ? storedData : [],\r\n    );\r\n    const [listOfProducts, setProducts] = useState([]);\r\n\r\n    // create function to remove products from list\r\n    function removeProduct(articleNumber) {\r\n        const remainingProducts = _.without(\r\n            listOfArticleNumbers,\r\n            articleNumber,\r\n        );\r\n        setArticleNumbers(remainingProducts);\r\n        localStorage.setItem('products', JSON.stringify(remainingProducts));\r\n\r\n        amountOfProducts(remainingProducts.length);\r\n    }\r\n\r\n    function getStockStatusStyle(product) {\r\n      if (product.isExpired) {\r\n        return 'article-is-expired';\r\n      } else if (product.notInStockOrderArticle) {\r\n        return 'orderable-article';\r\n      } else if (product.isInStock) {\r\n        return 'in-stock';\r\n      } else {\r\n        return 'out-of-stock';\r\n      }\r\n    }\r\n\r\n    // get product data for list\r\n    useEffect(() => {\r\n        get(\r\n            `/api/products/get?articlenumbers=${listOfArticleNumbers.join(\r\n                '&articleNumbers=',\r\n            )}`,\r\n        )\r\n            .then(response => response.json())\r\n            .then(result => {\r\n                setProducts([...result]);\r\n            });\r\n    }, [listOfArticleNumbers]);\r\n\r\n    const mainProduct = listOfProducts[0];\r\n\r\n    if (listOfProducts && listOfProducts.length > 0)\r\n        return (\r\n            <div className=\"comparison-list__container\">\r\n                <div className=\"comparison-table\">\r\n                    <div className=\"row top-wrapper\">\r\n                        <div className=\"columns\"></div>\r\n                            {listOfProducts.map(product => (\r\n                            <div key={`headers-${product.id}`} className=\"columns product-item-top\">\r\n                                <a className=\"delete-button\"\r\n                                    onClick={() =>\r\n                                        removeProduct(product.id)\r\n                                    } >\r\n                                    <img src=\"/ui/images/delete.svg\"></img>\r\n                                </a>\r\n                                <div className=\"product-wrapper\">\r\n                                    <img\r\n                                        src={product.imageUrl}\r\n                                        alt={product.name}>\r\n                                    </img>\r\n                                </div>\r\n                                <div className=\"title-wrapper\">\r\n                                    <p className=\"product-detail__name\">\r\n                                        {product.name}\r\n                                    </p>\r\n                                </div>\r\n                                <div className=\"article-number-wrapper\">\r\n                                    <div className=\"article-number-text\">{translate('product.articlenumber')}</div>\r\n                                    <div className='article-number'>{product.id}</div>\r\n                                </div>\r\n                            </div>\r\n                            ))}\r\n                    </div>\r\n\r\n                    {mainProduct.fields.map(field => {\r\n                        return (\r\n                            <div\r\n                                className=\"row property-row\"\r\n                                key={`properties-${field.id}`}\r\n                            >\r\n                                <div className=\"columns comparison-list__property-name\">\r\n                                    {field.name}\r\n                                </div>\r\n                                {listOfProducts.map(product => {\r\n                                    const matchedField = _.find(\r\n                                        product.fields,\r\n                                        f => f.id === field.id,\r\n                                    );\r\n                                    const differs = !_.find(\r\n                                        product.fields,\r\n                                        f => f.value === field.value,\r\n                                    );\r\n                                    return (\r\n                                        <div\r\n                                            key={`fields-${product.id}`}\r\n                                            className={`columns ${\r\n                                                differs ? 'highlight' : ''\r\n                                            }`}\r\n                                        >\r\n                                            {(matchedField &&\r\n                                                matchedField.value) ||\r\n                                                ''}\r\n                                        </div>\r\n                                    );\r\n                                })}\r\n                            </div>\r\n                        );\r\n                    })}\r\n\r\n                    <div className=\"row\">\r\n                        <div className=\"columns\"></div>\r\n                        {listOfProducts &&\r\n                            listOfProducts.map(product => (\r\n                                <div\r\n                                    key={`buttons-${product.id}`}\r\n                                    className=\"columns product-item-bottom\"\r\n                                >\r\n                                    <div\r\n                                        className={(product.notInStockOrderArticle && !product.price) || product.isExpired || product.hasReplacementArticle ? \"product__price hidden\" : \"product__price\"}\r\n                                        itemProp=\"offers\"\r\n                                        itemScope\r\n                                        itemType=\"http://schema.org/Offer\"\r\n                                    >\r\n                                        {product.campaignPrice ? (\r\n                                            <>\r\n                                                <span className=\"product__old-price\">\r\n                                                    {product.price}\r\n                                                </span>\r\n                                                <span className=\"product__campaign-price\">\r\n                                                    {product.campaignPrice}\r\n                                                </span>\r\n                                            </>\r\n                                        ) : (\r\n                                            <span className=\"price\">\r\n                                                {product.price ? product.price : translate(\"price.missing\")}\r\n                                            </span>\r\n                                        )}\r\n\r\n                                        <div className=\"vat-setting\">\r\n                                            {product.includeVat ? translate('product.inclvat') : translate('product.exvat')}\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div>\r\n                                        <ComparisonProductButtons\r\n                                            {...{\r\n                                                showBuyButton:\r\n                                                    product.showBuyButton && !(product.isExpired || product.hasReplacementArticle || (product.notInStockOrderArticle && !product.price)),\r\n                                                articleNumber: product.id,\r\n                                                quantityFieldId:\r\n                                                    product.quantityFieldId,\r\n                                                href: product.url,\r\n                                            }}\r\n                                        ></ComparisonProductButtons>\r\n                                    </div>\r\n                                    <div className=\"stock\">\r\n                                        <div className={\"stock-color \" + getStockStatusStyle(product)}>\r\n                                        </div>\r\n                                        <div className=\"stock-count\">\r\n                                            {product.stockStatusDescription}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            ))}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    else return null;\r\n}\r\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport ComparisonList from '../../Components/Comparison/ComparisonList';\r\nimport { amountOfProducts } from '../../Actions/Comparison.action';\r\n\r\nconst ComparisonListContainer = props => (\r\n    <ComparisonList {...props}></ComparisonList>\r\n);\r\n\r\nconst mapStateToProps = state => {\r\n    const { comparison } = state;\r\n    return {\r\n        ...comparison,\r\n    };\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n    return {\r\n        amountOfProducts: amount => dispatch(amountOfProducts(amount)),\r\n    };\r\n};\r\n\r\nexport default connect(\r\n    mapStateToProps,\r\n    mapDispatchToProps,\r\n)(ComparisonListContainer);\r\n"],"sourceRoot":""}