{"version":3,"sources":["webpack:///./Scripts/Components/ProductCards/AccessoryProductCard.js","webpack:///./Scripts/Components/AccessoryModal/AccessoryModal.js"],"names":["props","item","cart","useSelector","state","dispatch","useDispatch","isActive","setIsActive","useState","decodedDescription","shortDescription","replace","priceToShow","price","campaignPrice","formattedCampaignPrice","productPrice","priceStyle","React","Fragment","className","href","url","src","accessoryImageUrl","name","dangerouslySetInnerHTML","__html","includeVat","translate","onClick","async","articleNumber","id","quantityFieldId","packageQuantity","quantity","addToCartService","receive","current","setTimeout","ex","catchError","error","loadError","type","checkoutUrl","accessoryItems","accessory","onClose","useCallback","hide","visible","Modal","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","overlayClassName","accessories","map","i","AccessoryProductCard","_extends","key"],"mappings":"6NASA,MAiEA,EAjE8BA,IAE1B,MAAMC,EAAOD,EACPE,GAAOC,SAAaC,GAAUA,EAAMF,OAC1C,IAAIG,GAAWC,UACf,MAAOC,EAAUC,IAAeC,eAAS,GAoBnCC,EAAqBT,EAAKU,iBAAiBC,QADnC,gBACkD,IAC1DC,EAAcZ,EAAKa,MAAMC,cACzBd,EAAKa,MAAME,uBACXf,EAAKgB,aAELC,EAAajB,EAAKa,MAAME,uBACxB,iBACA,GACN,OACIG,gBAACC,WAAQ,KACLD,gBAAA,OAAKE,UAAU,6BACXF,gBAAA,OAAKE,UAAU,0BACXF,gBAAA,OAAKE,UAAU,gCACXF,gBAAA,OAAKE,UAAU,yCACXF,gBAAA,KAAGG,KAAMrB,EAAKsB,KACdJ,gBAAA,OAAKK,IAAKvB,EAAKwB,sBAGnBN,gBAAA,OAAKE,UAAU,gCACXF,gBAAA,OAAKE,UAAU,qCAAoCF,gBAAA,KAAGG,KAAMrB,EAAKsB,KAAKJ,gBAAA,SAAIlB,EAAKyB,QAC/EP,gBAAA,OAAKE,UAAU,2CAA2CM,wBAAyB,CAACC,OAAQlB,KAC5FS,gBAAA,OAAKE,UAAW,sCAAwCH,GAAaC,gBAAA,SAAIN,GAAgB,IAACM,gBAAA,YAAOjB,EAAK2B,YAAaC,OAAU,oBAAqBA,OAAU,uBAGpKX,gBAAA,OAAKE,UAAU,kCACXF,gBAAA,UACIY,QA7CRC,OAASC,gBAAgBhC,EAAKiC,GAAIC,kBAAkBlC,EAAKkC,gBAAiBC,kBAAgBnC,EAAKmC,oBAE3G,IACI,IAAIC,EAAW,EAEXF,IACAE,GAAsBD,GAE1B,MAAMlC,QAAaoC,QAAiB,CAAEL,gBAAeI,aAIrD,OAHAhC,GAASkC,QAAQrC,IACjBM,GAAYgC,IAAYA,IACxBC,YAAW,IAAMjC,GAAYgC,IAAYA,KAAU,MAC5C,CACX,CAAE,MAAOE,GAEL,OADArC,GAASsC,OAAWD,GAAKE,IAAUC,QAAUD,OACtC,CACX,GA8BoBvB,UAAWd,EAAW,8BAAgC,uBACtDuC,KAAK,UAEJvC,GAAWuB,OAAU,oBAAqBA,OAAU,qBAM9D,E,wNC9DlB,MA0ED,EAzDwBiB,IACtB,IAAI1C,GAAWC,UACf,MAAM0C,GAAiB7C,SAAaC,GAAUA,EAAM6C,aAAc,CAAC,EAC7DC,GAAUC,kBAAY,IAAM9C,GAAS+C,SAAK,KAAS,CAAC/C,IAE1D,OACEc,2BAAA,KACG6B,GAAkBA,EAAeK,SAChClC,gBAACmC,IAAK,CACJC,aAAa,EACbC,eAAe,EACfC,OAAQT,EAAeK,QACvBK,eAAgBR,EAChBS,2BAA2B,EAC3BtC,UAAU,0BACVuC,iBAAiB,qBAEjBzC,gBAAA,UACEY,QAASmB,EACT7B,UAAU,8BACX,KAGDF,gBAAA,OAAKE,UAAU,qBACfF,gBAAA,OAAKE,UAAU,2BACfF,gBAAA,OAAKE,UAAU,mBAAkBF,gBAAA,WAAKW,OAAU,qBAChDX,gBAAA,OAAKE,UAAU,0BAAyBS,OAAU,2BAElDX,gBAAA,OAAKE,UAAU,kCACd2B,EAAea,YAAYC,KAAI,CAAC7D,EAAM8D,IACrC5C,gBAAC6C,EAAoBC,EAAA,CAACC,IAAKH,GACrB9D,OAGRkB,gBAAA,OAAKE,UAAU,qBACXF,gBAAA,OAAKE,UAAU,0BACbF,gBAAA,UACEY,QAASmB,EACT7B,UAAW,cACXyB,KAAK,WAEJhB,OAAU,0BAIfX,gBAAA,OAAKE,UAAU,8BACfF,gBAAA,KAAGG,KAAM0B,EAAea,YAAY,GAAGd,YAAa1B,UAAU,oBAAmBS,OAAU,2BAMlG,C","file":"310.76fe3e0424e6a639b887.js","sourcesContent":["import React, { useEffect, useState, useCallback, Fragment, createRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { translate } from '../../Services/translation';\nimport StyledAccessoryBuyButton from '../AccessoryBuyButton';\nimport { catchError} from '../../Actions/Error.action';\nimport { receive, loadError } from '../../Actions/Cart.action';\nimport { add as addToCartService } from '../../Services/Cart.service';\nimport { setIncludeVat } from '../../Actions/Checkout.action';\n\nconst AccessoryProductCard = (props) => {\n\n    const item = props;\n    const cart = useSelector((state) => state.cart);\n    var dispatch = useDispatch();\n    const [isActive, setIsActive] = useState(false);\n    const onClick = async ({ articleNumber = item.id, quantityFieldId = item.quantityFieldId, packageQuantity=item.packageQuantity }) => {\n\n        try {\n            let quantity = 1;\n\n            if(!quantityFieldId){\n                quantity = quantity * packageQuantity;\n            }\n            const cart = await addToCartService({ articleNumber, quantity });\n            dispatch(receive(cart));\n            setIsActive(current => !current);\n            setTimeout(() => setIsActive(current => !current), 3000);\n            return true;\n        } catch (ex) {\n            dispatch(catchError(ex, (error) => loadError(error)));\n            return false;\n        }\n    };\n    const regex = /(<([^>]+)>)/ig;\n    const decodedDescription = item.shortDescription.replace(regex, '');\n    const priceToShow = item.price.campaignPrice\n        ? item.price.formattedCampaignPrice\n        : item.productPrice;\n\n    const priceStyle = item.price.formattedCampaignPrice\n        ? \"campaign-price\"\n        : \"\";\n    return (\n        <Fragment>\n            <div className=\"small-12 large-12 columns\">\n                <div className=\"accessory-product-card\">\n                    <div className=\"accessory-product-card__left\">\n                        <div className=\"accessory-product-card__image-wrapper\">\n                            <a href={item.url}>\n                            <img src={item.accessoryImageUrl} />\n                            </a>\n                        </div>\n                        <div className=\"accessory-product-card__info\">\n                            <div className='accessory-product-card__info-name'><a href={item.url}><b>{item.name}</b></a></div>\n                            <div className='accessory-product-card__info-description' dangerouslySetInnerHTML={{__html: decodedDescription}}></div>\n                            <div className={\"accessory-product-card__info-price \" + priceStyle} ><b>{priceToShow}</b> <span>{cart.includeVat ? translate('product.inclvat') : translate('product.exclvat')}</span></div>\n                        </div>\n                    </div>\n                    <div className=\"accessory-product-card__button\">\n                        <button\n                            onClick={onClick}\n                            className={isActive ? \"accessory-buy-button--style\" : \"accessory-buy-button\"}\n                            type='button'\n                        >\n                            {isActive ? translate('accessory.added') : translate('accessory.add')}\n\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </Fragment>\n    );\n}\n\nexport default AccessoryProductCard","import React, { useEffect, useState, useCallback, createRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport Modal from 'react-modal';\nimport { hide } from '../../Actions/Accessory.action';\nimport AccessoryProductCard from '../ProductCards/AccessoryProductCard';\nimport StyledAccessoryBuyButton from '../AccessoryBuyButton'\nimport { translate } from '../../Services/translation';\n\n const customStyles = {\n    content: {\n      background: '#F6F6F4',\n      padding: 0,\n      border: 'none',\n      height: '80%',\n      width: '50%',\n      display: 'flex',\n      justifyContent:'center',\n      alignSelf:'center',\n    },\n    overlay: {\n      background: 'rgba(0, 0, 0, 0.5)',\n      zIndex: 2003,\n  },\n };\n\nconst AccessoryModal = (checkoutUrl) => {\n  var dispatch = useDispatch();\n  const accessoryItems = useSelector((state) => state.accessory) || {};\n  const onClose = useCallback(() => dispatch(hide(false)), [dispatch]);\n\n  return (\n    <>\n      {accessoryItems && accessoryItems.visible &&\n        <Modal\n          ariaHideApp={false}\n          preventScroll={true}\n          isOpen={accessoryItems.visible}\n          onRequestClose={onClose}\n          shouldCloseOnOverlayClick={false}\n          className=\"accessory-modal-content\"\n          overlayClassName=\"accessory-overlay\"\n        >\n          <button\n            onClick={onClose}\n            className=\"accessory-modal__close-btn\"\n          >\n            &times;\n          </button>\n          <div className='accessory-wrapper'>\n          <div className='accessory-text--wrapper'>\n          <div className='accessory-title'><h2>{translate('accessory.title')}</h2></div>\n          <div className='accessory-description'>{translate('accessory.description')}</div>\n          </div>\n          <div className='accessory-product-card-wrapper'>\n          {accessoryItems.accessories.map((item, i) =>\n            <AccessoryProductCard key={i}\n              {...item}  />          \n          )}\n          </div>\n          <div className='accessory-buttons'>\n              <div className=\"accessory-buttons-back\">\n                <button\n                  onClick={onClose}\n                  className={\"back-button\"}\n                  type='button'\n                >\n                  {translate('accessory.keepbrowse')}\n\n                </button>\n              </div>\n              <div className=\"accessory-buttons-checkout\">\n              <a href={accessoryItems.accessories[0].checkoutUrl} className=\"checkout-button\">{translate('accessory.checkout')}</a>\n              </div>\n          </div>\n          </div>\n        </Modal>\n      }\n    </>\n\n  );\n};\n\nexport default AccessoryModal;"],"sourceRoot":""}