{"version":3,"sources":["webpack:///./Scripts/Hooks/useScroll.js","webpack:///./Scripts/Components/ProductPage.CtaBar.js","webpack:///./Scripts/Containers/withReactiveStyleBuyButton.js","webpack:///./Scripts/Components/BuyButton.js","webpack:///./Scripts/Services/utilities.js","webpack:///./Scripts/Containers/BuyButton.Container.js","webpack:///./Scripts/Components/SizePicker.NotifyMe.js"],"names":["shouldDebounce","React","useState","window","scrollY","scroll","setScroll","storeScroll","useEffect","document","addEventListener","fn","params","frame","cancelAnimationFrame","requestAnimationFrame","passive","props","productBrand","productName","articleNumber","quantityFieldId","productPrice","productCampaignPrice","isInStock","outOfStockLabel","useScroll","getElementsByClassName","mainBuyButtonWrapper","isVisible","setIsVisible","headerHeight","getElementById","clientHeight","isMobile","useIsMobile","dispatch","useDispatch","wrapperHeight","twoColumnTopRow","querySelector","getBoundingClientRect","y","header","style","transform","setSizePickerRenderFunction","sizePicker","ReactDOM","createPortal","classList","add","remove","direction","in","appear","className","id","label","translate","cssClass","StateStyles","withReactiveStyleBuyButton","WrappedComponent","onClick","stylePrefix","state","stateClass","startTime","this","setState","success","changeState","autoReset","onNeutralState","resetTimeout","loadingDuration","minimumLoadingTime","a","onLoadingState","data","onCompleteState","onSuccess","onError","onButtonClick","Component","BuyButton","showSizePicker","selectedSizeItem","notifyMeActive","setNotifyMeActive","notifyMeError","setNotifyMeError","body","contains","display","size","visible","showError","err","href","getQueryParameter","name","url","location","replace","results","RegExp","exec","decodeURIComponent","connect","sizePickerVisible","cart","receive","showMiniCart","ex","catchError","error","loadError","setSizeFromQuery","setSelectedSizeByName","addToCartAfterSizePicker","setAddToCartAfterSizePicker","querySize","toLowerCase","searchParams","set","history","pushState","title","addToCartAfter","quantity","value","addToCartService","privacyPolicyUrl","email","setEmail","setError","subscribed","setSubscribed","isLoading","setIsLoading","onSubmit","subcribeToBackInStock","response","json","res","errorMessage","message","status","autoFocus","type","onKeyDown","e","key","disabled","onChange","target"],"mappings":"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","file":"12.96cb54d138a69a8323f3.js","sourcesContent":["import React from 'react';\r\n\r\nexport default shouldDebounce => {\r\n    const [scroll, setScroll] = React.useState(window.scrollY)\r\n    // The debounce function receives our function as a parameter\r\n    const debounce = (fn) => {\r\n\r\n        // This holds the requestAnimationFrame reference, so we can cancel it if we wish\r\n        let frame;\r\n    \r\n        // The debounce function returns a new function that can receive a variable number of arguments\r\n        return (...params) => {\r\n        \r\n        // If the frame variable has been defined, clear it now, and queue for next frame\r\n        if (frame) { \r\n            cancelAnimationFrame(frame);\r\n        }\r\n    \r\n        // Queue our function call for the next frame\r\n        frame = requestAnimationFrame(() => {\r\n            \r\n            // Call our function and pass any params we received\r\n            fn(...params);\r\n        });\r\n    \r\n        } \r\n    };\r\n    \r\n    // Reads out the scroll position and stores it in the data attribute\r\n    // so we can use it in our stylesheets\r\n    const storeScroll = () => {\r\n        setScroll(window.scrollY)\r\n    }\r\n\r\n    React.useEffect(() => {\r\n        // Update scroll position for first time\r\n        storeScroll();\r\n\r\n        // Listen for new scroll events, here we debounce our `storeScroll` function\r\n        return document.addEventListener('scroll', shouldDebounce ? debounce(storeScroll) : storeScroll, { passive: true })\r\n    })\r\n\r\n    return scroll\r\n}","import { Slide } from '@material-ui/core';\r\nimport React, { createRef, useEffect, useRef, useState } from 'react';\r\nimport BuyButtonContainer from '../Containers/BuyButton.Container';\r\nimport useScroll from '../Hooks/useScroll';\r\nimport useIsMobile from '../Hooks/useIsMobile';\r\nimport { translate } from '../Services/translation';\r\nimport { useDispatch } from 'react-redux';\r\nimport ReactDOM from 'react-dom';\r\nimport { setSizePickerRenderFunction } from '../Actions/SizePicker.action';\r\n\r\nexport default props => {\r\n    const {productBrand, productName, articleNumber, quantityFieldId, productPrice, productCampaignPrice, isInStock, outOfStockLabel } = props\r\n    const scrollY = useScroll(false)\r\n    const [mainBuyButtonWrapper] = useState(document.getElementsByClassName(\"main-buy-button-wrapper\")[0])\r\n    const [isVisible, setIsVisible] = useState(false)\r\n    const headerHeight = document.getElementById(\"header\").clientHeight;\r\n    const isMobile = useIsMobile()\r\n    const dispatch = useDispatch()\r\n\r\n    useEffect(() => {\r\n        if(!mainBuyButtonWrapper) return;\r\n\r\n        var headerHeight = document.getElementById(\"header-container\").clientHeight\r\n        var wrapperHeight = mainBuyButtonWrapper.clientHeight\r\n\r\n        var twoColumnTopRow = document.querySelector('.header__two-columns__top-row');\r\n        if (twoColumnTopRow && !isMobile) {\r\n            headerHeight = twoColumnTopRow.clientHeight;\r\n        }\r\n\r\n        if(isMobile) {\r\n            setIsVisible(mainBuyButtonWrapper.getBoundingClientRect().y <= headerHeight)\r\n        }else{\r\n            setIsVisible(mainBuyButtonWrapper.getBoundingClientRect().y + (wrapperHeight - headerHeight) <= 0)\r\n        }\r\n    }, [scrollY])\r\n\r\n    useEffect(() => {\r\n        if(!mainBuyButtonWrapper) return;\r\n        \r\n        var header = document.getElementById(\"header-container\")\r\n        if (!isMobile) {\r\n            header.style.transform = `translateY(${isVisible ? \"-100%\" : 0})`;\r\n        }\r\n\r\n        if(!isMobile && isVisible) {\r\n            // Not proud of this\r\n            dispatch(setSizePickerRenderFunction(sizePicker => ReactDOM.createPortal(sizePicker, document.getElementById(\"cta-bar-buy-button-wrapper\"))))\r\n        }else{\r\n            dispatch(setSizePickerRenderFunction(null))\r\n        }\r\n\r\n        if(isMobile && isVisible) {\r\n            mainBuyButtonWrapper.classList.add(\"sticky\")\r\n        }else{\r\n            mainBuyButtonWrapper.classList.remove(\"sticky\")\r\n        }\r\n    }, [isVisible])\r\n\r\n    // Only render cta bar if scroll is further down than header + top menu, which fixes the weird slide-up animation when scrolling to the top fast\r\n    return scrollY > (headerHeight + 30) ? <Slide direction=\"down\" in={isVisible} appear={false}>\r\n        <div className=\"row expanded cta-bar\">\r\n            <div className=\"columns cta-bar__name-wrapper\">\r\n                <h5>{productBrand}</h5>\r\n                <span>{productName}</span>\r\n            </div>\r\n            <div className=\"cta-bar__right \">\r\n               {!productCampaignPrice && <div className=\"cta-bar__price\">{productPrice}</div>}\r\n               {productCampaignPrice && <div className=\"cta-bar__campaign-price\">\r\n                    <div className=\"cta-bar__price\">{productCampaignPrice}</div>\r\n                    <div className=\"cta-bar__price cta-bar__price--old\">{productPrice}</div>\r\n                </div>}\r\n                <span id=\"cta-bar-buy-button-wrapper\">\r\n                    <BuyButtonContainer\r\n                        label={translate(\"buy-button.add-to-cart\")}\r\n                        outOfStockLabel={outOfStockLabel}\r\n                        isInStock={isInStock}\r\n                        cssClass=\"btn btn--atc btn--primary\"\r\n                        articleNumber={articleNumber}\r\n                        quantityFieldId={quantityFieldId} />\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </Slide> : null\r\n}","import React, { Component } from 'react';\r\n\r\nconst StateStyles = {\r\n    LOADING: \"--loading\",\r\n    SUCCESS: \"--success\",\r\n    ERROR: \"--error\",\r\n};\r\n\r\n/**\r\n * Represents a HOC which wraps a BuyButton or ReorderButton and applies diffrent styles to it\r\n * depending on its click state.\r\n * @param {*} WrappedComponent The button component.\r\n * @param {*} onClick The button's onClick event.\r\n * @param {*} stylePrefix The style prefix to append state's modifiers. For\r\n * example, 'button' will result as 'button--loading'.\r\n * \r\n * Some available props that the HOC component supports:\r\n * autoReset : it is true by default. Not its value, but the behaviour is like that. Unless people set it as false, by default, button is always reset to neutral state after the request is completed.\r\n * resetTimeout: Number milisecond after the complete state, the style of button will be reset. If don't set, it is 2000\r\n * minimumLoadingTime: Mininum milisecond to display the loading state. If don't set, it is 1000\r\n * onSuccess: callback if onClick method returns data\r\n * onError: callback if onClick method throws an exception\r\n */\r\nexport default function withReactiveStyleBuyButton(WrappedComponent, onClick, stylePrefix) {\r\n    return class extends Component {\r\n        constructor(props) {\r\n            super(props);\r\n            this.state = {\r\n                stateClass: '',\r\n                startTime: 0,\r\n            }\r\n        }\r\n\r\n        onNeutralState() {\r\n            this.setState({\r\n                stateClass: '',\r\n                startTime: 0,\r\n            });\r\n        }\r\n    \r\n        onLoadingState() {\r\n            this.setState({\r\n                stateClass: `${stylePrefix}${StateStyles.LOADING}`,\r\n                startTime: Date.now(),\r\n            });\r\n        }\r\n    \r\n        onCompleteState(success) {\r\n            const changeState = () => {\r\n                this.setState({\r\n                    stateClass: `${stylePrefix}${success ? StateStyles.SUCCESS : StateStyles.ERROR}`,\r\n                });\r\n                // if `autoReset` is true, which is default, the style will be changed\r\n                // to neutral after a `resetTimeout` amount of time (2 seconds by default).\r\n                this.props.autoReset !== false && setTimeout(() => {\r\n                    this.onNeutralState();\r\n                }, this.props.resetTimeout || 2000);\r\n            }\r\n\r\n            const loadingDuration = Date.now() - this.state.startTime;\r\n            const minimumLoadingTime = this.props.minimumLoadingTime || 1000;\r\n            // ensure the loading indicator is displayed at least a `minimumLoadingTime`\r\n            // amount of time before changing it to Success or Error.\r\n            if (loadingDuration >= minimumLoadingTime) {\r\n                changeState();\r\n            } else {\r\n                setTimeout(() => {\r\n                    changeState();\r\n                }, minimumLoadingTime - loadingDuration);\r\n            }\r\n        }\r\n\r\n        async onButtonClick(params) {\r\n            try {\r\n                this.onLoadingState();\r\n                const data = await onClick(params);\r\n                if(data) {\r\n                    this.onCompleteState(true);\r\n                    this.props.onSuccess(data);\r\n                } else {\r\n                    this.onNeutralState();\r\n                }\r\n            } catch(err) {\r\n                this.onCompleteState(false);\r\n                this.props.onError(err);\r\n            }\r\n        }\r\n    \r\n        render() {\r\n            return (\r\n                <span className={this.state.stateClass}>\r\n                    <WrappedComponent onClick={(params) => this.onButtonClick(params)} {...this.props} />\r\n                </span>\r\n            );\r\n        }\r\n    }\r\n}","import { Article } from 'phosphor-react';\r\nimport React, { useState } from 'react'\r\nimport { translate } from '../Services/translation';\r\nimport { Envelope } from \"phosphor-react\";\r\nimport SizePickerNotifyMe from './SizePicker.NotifyMe';\r\n\r\nconst BuyButton = ({ isInStock, articleNumber, cssClass, showSizePicker, label, outOfStockLabel, selectedSizeItem, onClick }) => {\r\n    const [notifyMeActive, setNotifyMeActive] = useState(false);\r\n    const [notifyMeError, setNotifyMeError] = useState();\r\n\r\n    return <>\r\n    {document.body.classList.contains('product-page--without-variants') ?\r\n        <>\r\n            {isInStock && <a className={cssClass} onClick={onClick}>\r\n                <span className=\"hide-on-reactive-styling\">\r\n                    {label}\r\n                </span>\r\n            </a>}\r\n            {!isInStock && <>\r\n                <div className=\"variant-out-of-stock\">\r\n                    <span style={{display: notifyMeActive ? 'none' : 'inline-block'}} className=\"variant-out-of-stock__text\">{translate(\"size-picker.out-of-stock\")}</span>\r\n                    <span className=\"message-me\" style={{display: notifyMeActive ? 'none' : 'flex'}} onClick={setNotifyMeActive}>{translate(\"size-picker.notify-me\")} <Envelope size=\"20\" /></span>\r\n                    <SizePickerNotifyMe visible={notifyMeActive}\r\n                                        className=\"notify-me-onesize\"\r\n                                        showError={false}\r\n                                        onError={err => setNotifyMeError(err)}\r\n                                        articleNumber={articleNumber} />\r\n                </div>\r\n                {notifyMeError && <div className=\"field-wrapper\">\r\n                    <div className=\"input-error\">{notifyMeError}</div>\r\n                </div>}\r\n                <a href=\"#\" className=\"variant-out-of-stock__privacy-policy\">Privacy policy</a>\r\n            </>}\r\n        </>\r\n        : <div className=\"buy-button-wrapper\">\r\n            <div className=\"fake-select\" onClick={() => showSizePicker(false)} >\r\n                <div className=\"fake-select__content\">\r\n                    {selectedSizeItem \r\n                        ? selectedSizeItem.size\r\n                        : translate(\"size-picker.placeholder\")\r\n                    }\r\n                </div>\r\n                <i className='ph-caret-down fake-select__icon'></i>\r\n            </div>\r\n            <a className={cssClass} onClick={() => selectedSizeItem ? onClick() : showSizePicker(true)}>\r\n                <span className=\"hide-on-reactive-styling\">\r\n                    {!isInStock && outOfStockLabel ? outOfStockLabel : label}\r\n                </span>\r\n            </a>\r\n        </div>\r\n        }\r\n    </>\r\n}\r\n\r\nexport default BuyButton;","export const getQueryParameter = name => {\r\n    const url = window.location.href;\r\n    name = name.replace(/[\\[\\]]/g, '\\\\$&');\r\n    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),\r\n      results = regex.exec(url);\r\n    if (!results) return null;\r\n    if (!results[2]) return '';\r\n    return decodeURIComponent(results[2].replace(/\\+/g, ' '));\r\n};","import React, { forwardRef, useEffect, useRef, useState } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport BuyButton from '../Components/BuyButton';\r\nimport { receive, loadError, showMiniCart } from '../Actions/Cart.action';\r\nimport { catchError } from '../Actions/Error.action';\r\nimport { add as addToCartService} from '../Services/Cart.service';\r\nimport withReactiveStyleBuyButton from './withReactiveStyleBuyButton';\r\nimport { getQueryParameter } from '../Services/utilities';\r\nimport { setSelectedSizeByName, showSizePicker } from '../Actions/SizePicker.action';\r\n\r\nconst BuyButtonContainer = props => {\r\n    const { isInStock, articleNumber, onClick, showSizePicker, sizePickerVisible, setSizeFromQuery, selectedSizeItem } = props\r\n\r\n    const [addToCartAfterSizePicker, setAddToCartAfterSizePicker] = useState(false)\r\n\r\n    // Pre-set the size based on the query parameter\r\n    useEffect(() => {\r\n        var querySize = getQueryParameter(\"size\")\r\n        if(querySize) {\r\n            setSizeFromQuery(querySize)\r\n        }\r\n    }, [])\r\n\r\n    useEffect(() => {\r\n        if(selectedSizeItem && !sizePickerVisible && addToCartAfterSizePicker) {\r\n            onClick(selectedSizeItem.articleNumber, props.quantityFieldId)\r\n        }\r\n    }, [sizePickerVisible])\r\n\r\n    // Set correct size in the URL\r\n    useEffect(() => {\r\n        if(!selectedSizeItem) return\r\n\r\n        var querySize = getQueryParameter(\"size\")\r\n        if(!querySize || querySize.toLowerCase() != selectedSizeItem.size.toLowerCase()) {\r\n            var url = new URL(window.location)\r\n            url.searchParams.set(\"size\", selectedSizeItem.size)\r\n            window.history.pushState(\"sizeSelected\", document.title, url)\r\n        }\r\n    }, [selectedSizeItem])\r\n\r\n    return <>\r\n        <BuyButton\r\n            cssClass={props.cssClass}\r\n            label={props.label}\r\n            href={props.href}\r\n            showSizePicker={addToCartAfter => { showSizePicker(); setAddToCartAfterSizePicker(addToCartAfter) }} \r\n            selectedSizeItem={selectedSizeItem}\r\n            onClick={() => (articleNumber || selectedSizeItem) && onClick(selectedSizeItem ? selectedSizeItem.articleNumber : articleNumber, props.quantityFieldId)}\r\n            onSuccess={props.onSuccess}\r\n            onError={props.onError}\r\n            isInStock = {isInStock == \"true\"} \r\n            articleNumber={props.articleNumber}\r\n            outOfStockLabel={props.outOfStockLabel}\r\n        />\r\n    </>\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n    return {\r\n        selectedSizeItem: state.sizePicker.selectedSizeItem,\r\n        sizePickerVisible: state.sizePicker.visible,\r\n    }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n    return {\r\n        onSuccess: (cart) => {\r\n            dispatch(receive(cart));\r\n            dispatch(showMiniCart())\r\n        },\r\n        onError: (ex) => {\r\n            dispatch(catchError(ex, error => loadError(error)));\r\n        },\r\n        showSizePicker: () => dispatch(showSizePicker()),\r\n        setSizeFromQuery: size => dispatch(setSelectedSizeByName(size))\r\n    }\r\n}\r\n\r\nconst onClick = (articleNumber, quantityFieldId) => {\r\n    const quantity = quantityFieldId ? document.getElementById(quantityFieldId).value : 1;\r\n    return addToCartService(articleNumber, quantity);\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(\r\n            withReactiveStyleBuyButton(BuyButtonContainer, onClick, 'buy-button-container'));","import React, { useEffect, useState } from \"react\";\r\nimport { translate } from \"../Services/translation\";\r\nimport { subcribeToBackInStock } from \"../Services/Product.service\";\r\n\r\nexport default ({ className, articleNumber, visible, privacyPolicyUrl, showError = true, onError }) => {\r\n    const [email, setEmail] = useState();\r\n    const [error, setError] = useState();\r\n    const [subscribed, setSubscribed] = useState(false);\r\n    const [isLoading, setIsLoading] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setError();\r\n        setIsLoading();\r\n        setSubscribed();\r\n    }, [articleNumber])\r\n    \r\n    useEffect(() => {\r\n        if(onError) onError(error);\r\n    }, [error])\r\n\r\n    const onKeyDownInput = e => {\r\n        if(e.key == \"Enter\") {\r\n            onSubmit(articleNumber, email);\r\n        }\r\n    }\r\n\r\n    const onSubmit = async (articleNumber, email) => {\r\n        setIsLoading(true);\r\n        try {\r\n            await subcribeToBackInStock(articleNumber, email);\r\n            setSubscribed(true);\r\n            setError(null);\r\n        }catch(err) {\r\n            let res;\r\n            \r\n            if(err.response) {\r\n                try {\r\n                    res = await err.response.json();\r\n                }catch(_) {}\r\n            }\r\n\r\n            let errorMessage = null;\r\n            if(res) {\r\n                errorMessage = res.message;\r\n            }\r\n            setSubscribed(false);\r\n            if(err.response.status == 409) {\r\n                // Conflict, already subscribed\r\n                setError(errorMessage || translate(\"size-picker.notify-me.conflict\"));\r\n            }else{\r\n                // Something went wrong, display error response or generic error message\r\n                setError(errorMessage || translate(\"size-picker.notify-me.error\"));\r\n            }\r\n        }\r\n        setIsLoading(false);\r\n    }\r\n\r\n    return visible && <>\r\n        <div className={className || \"notify-me\"}>\r\n            <input autoFocus type=\"email\" name=\"email\" onKeyDown={onKeyDownInput} disabled={subscribed} onChange={e => setEmail(e.target.value)} />\r\n            <span className=\"email-label\">{translate(\"size-picker.email-placeholder\")}</span>\r\n            <span className={`send-button ${isLoading || subscribed ? 'send-button--disabled' : ''}`} onClick={() => !isLoading && !subscribed && onSubmit(articleNumber, email)}>\r\n                {!isLoading && !subscribed && translate(\"size-picker.send\")}\r\n                {isLoading && <i className=\"ph-arrow-clockwise spin\"></i>}\r\n                {!isLoading && subscribed && <i className=\"ph-check\"></i>}\r\n            </span>\r\n            {showError && error && \r\n                <div className=\"field-wrapper\">\r\n                    <div className=\"input-error\">{error}</div>\r\n                </div>\r\n            }\r\n        </div>\r\n        {privacyPolicyUrl && <div className=\"size-picker__privacy-policy--wrapper\"> <a href={privacyPolicyUrl} className=\"size-picker__privacy-policy\">{translate(\"size-picker.privacy-policy\")}</a></div>}\r\n    </>\r\n}"],"sourceRoot":""}