{"version":3,"sources":["webpack:///./Scripts/Components/Modal.js","webpack:///./Scripts/Components/NotifyMeButton.js","webpack:///./Scripts/Services/BackInStock.Service.js"],"names":["ModalHeader","children","onCloseClicked","className","onClick","ModalFooter","ModalContent","Modal","open","onClose","title","style","size","closeOnOverlayClick","overlayZIndex","customStyle","overlay","background","zIndex","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","NotifyMeButton","articleNumber","productName","useState","showNotifyMe","setShowNotifyMe","isSuccess","setIsSuccess","email","setEmail","error","setError","isValidEmail","setIsValidEmail","isLoading","setIsLoading","ref","useRef","onConfirm","translate","post","registerForBackInStock","then","catch","finally","useEffect","EmailValidator","validate","current","parentElement","querySelectorAll","forEach","elem","classList","remove","add","paddingLeft","paddingRight","disabled","onChange","e","target","value","onKeyDown","key","type"],"mappings":"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","file":"13.cfb47f45c7e152ecb52a.js","sourcesContent":["import React from 'react';\r\nimport ReactModal from 'react-modal';\r\n\r\nconst Modal = ({\r\n  children,\r\n  open,\r\n  onClose,\r\n  title,\r\n  style,\r\n  className,\r\n  size,\r\n  closeOnOverlayClick = true,\r\n  overlayZIndex = 2003,\r\n}) => {\r\n  const customStyle = {\r\n    overlay: {\r\n      background: 'rgba(0, 0, 0, 0.4)',\r\n      zIndex: overlayZIndex,\r\n    },\r\n  };\r\n\r\n  return (\r\n    <ReactModal\r\n      ariaHideApp={false}\r\n      preventScroll={true}\r\n      isOpen={open}\r\n      onRequestClose={onClose}\r\n      style={style ?? customStyle}\r\n      shouldCloseOnOverlayClick={closeOnOverlayClick}\r\n      className={`modal ${className ?? ''} ${size ? 'modal--' + size : ''}`}\r\n    >\r\n      {title && (\r\n        <ModalHeader onCloseClicked={onClose}>\r\n          <h4>{title}</h4>\r\n        </ModalHeader>\r\n      )}\r\n      {children}\r\n    </ReactModal>\r\n  );\r\n};\r\n\r\nexport const ModalHeader = ({ children, onCloseClicked }) => (\r\n  <div className=\"modal__header\">\r\n    {children}\r\n    <div className=\"modal__close\" onClick={onCloseClicked}>\r\n      <i\r\n        className=\"icon-close\"\r\n      ></i>\r\n    </div>\r\n  </div>\r\n);\r\n\r\nexport const ModalFooter = ({ children }) => (\r\n  <div className=\"modal__footer\">{children}</div>\r\n);\r\n\r\nexport const ModalContent = ({ children }) => (\r\n  <div className=\"modal__content\">{children}</div>\r\n);\r\n\r\nexport default Modal;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { registerForBackInStock } from '../Services/BackInStock.Service';\r\nimport { translate } from '../Services/translation';\r\nimport Modal, { ModalContent, ModalFooter } from './Modal';\r\nimport EmailValidator from \"email-validator\"\r\n\r\nconst NotifyMeButton = ({ articleNumber, productName }) => {\r\n  const [showNotifyMe, setShowNotifyMe] = useState(false);\r\n  const [isSuccess, setIsSuccess] = useState(false);\r\n  const [email, setEmail] = useState('');\r\n  const [error, setError] = useState();\r\n  const [isValidEmail, setIsValidEmail] = useState(false);\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const ref = useRef();\r\n\r\n  const onConfirm = () => {\r\n    if (!isValidEmail) {\r\n      setError(translate('notify-me.enter-valid-email'));\r\n      if (email == null) {\r\n        setEmail('');\r\n      }\r\n      return;\r\n    }\r\n\r\n    setIsLoading(true);\r\n    registerForBackInStock(email, articleNumber)\r\n    .then(() => { \r\n      setIsSuccess(true);\r\n    })\r\n    .catch(() => setError(translate('notify-me.error')))\r\n    .finally(() => setIsLoading(false));\r\n  }\r\n\r\n  useEffect(() => {\r\n    setIsValidEmail(email != null && EmailValidator.validate(email));\r\n  }, [email])\r\n\r\n  useEffect(() => {\r\n    if (isSuccess) {\r\n      const wrapper = ref.current.parentElement.parentElement;\r\n      wrapper.querySelectorAll(\".small-6\").forEach((elem) => {\r\n        elem.classList.remove(\"small-6\");\r\n        elem.classList.add(\"small-12\");\r\n        elem.style.paddingLeft = \"0\";\r\n        elem.style.paddingRight = \"0\";\r\n      });\r\n    }\r\n  }, [isSuccess])\r\n\r\n  return (\r\n    <>\r\n      <button \r\n        className=\"product-detail__buy-button\"\r\n        onClick={() => setShowNotifyMe(true)}\r\n        ref={ref}\r\n        disabled={isSuccess}>\r\n        {!isSuccess \r\n          ? translate('notify-me.button-text') \r\n          : translate('notify-me.button-text.success')\r\n        }\r\n        {!isSuccess ? <i className=\"icon-envelope\"></i> : <i className=\"icon-check\"></i>}\r\n      </button>\r\n      <Modal \r\n        open={showNotifyMe} \r\n        size=\"small\" \r\n        className=\"notify-me__modal\" \r\n        onClose={() => setShowNotifyMe(false)}\r\n        title={!isSuccess ? productName : translate('notify-me.modal-header.success')}\r\n      >\r\n        {!isSuccess &&\r\n          <ModalContent>\r\n            <label>{translate('notify-me.modal-text')}</label>\r\n            <input\r\n              disabled={isLoading}\r\n              className={`form__input ${isValidEmail ? 'valid' : (email != null && email != '' ? 'invalid' : '')}`} \r\n              onChange={(e) => setEmail(e.target.value)} value={email} \r\n              onKeyDown={(e) => e.key == \"Enter\" && onConfirm()}\r\n              type=\"email\"\r\n            />\r\n            {error && !isLoading && <div className=\"notify-me__error\">{error}</div>}\r\n          </ModalContent>\r\n        }\r\n        {isSuccess && <ModalContent>\r\n          {translate('notify-me.success')}\r\n        </ModalContent>}\r\n        <ModalFooter>\r\n          <button className=\"modal__footer__button\" disabled={isLoading} onClick={() => setShowNotifyMe(false)}>\r\n            {!isSuccess ? translate('general.cancel') : translate('notify-me.continue-shopping')}\r\n          </button>\r\n          {!isSuccess && <button className=\"modal__footer__button\" disabled={isLoading} onClick={onConfirm}>\r\n            {translate('general.confirm')}\r\n          </button>}\r\n        </ModalFooter>\r\n      </Modal>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default NotifyMeButton;","import { post } from \"./http\"\r\n\r\nexport const registerForBackInStock = (email, articleNumber) => {\r\n  return post(\"/api/backinstock/register\", { email, articleNumber })\r\n};\r\n"],"sourceRoot":""}