{"version":3,"sources":["webpack:///./Scripts/Components/Custom/TendenzBuyButton.js","webpack:///./Scripts/Components/withReactiveStyleBuyButton.js","webpack:///./Scripts/Services/Cart.service.js"],"names":["TendenzBuyButton","label","articleNumber","quantityFieldId","href","cssClass","onClick","Fragment","className","props","dispatch","useDispatch","Button","withReactiveStyleBuyButton","async","quantity","document","getElementById","value","cart","addToCartService","receive","ex","catchError","error","loadError","StateStyles","WrappedComponent","stylePrefix","stateClass","setStateClass","useState","startTime","useRef","useEffect","changeState","complete","autoReset","setTimeout","current","resetTimeout","onButtonClick","params","Date","now","loadingDuration","minimumLoadingTime","onComplete","add","isNaN","parseFloat","post","json","reorder","orderId"],"mappings":"iLAOA,MAAMA,EAAmB,EACrBC,QACAC,gBACAC,kBACAC,OACAC,WACAC,aAGI,gBAAC,EAAAC,SAAD,KACKL,EACG,qBACIM,UAAWH,EACXC,QAAS,IAAMA,EAAQ,CAAEJ,gBAAeC,qBAExC,qBAAGK,UAAU,qBACZP,GAGL,qBAAGO,UAAY,GAAEH,kBAA0BD,KAAMA,GAC7C,qBAAGI,UAAU,qBACZP,IA0BrB,EAnBsBQ,IAClB,MAAMC,GAAWC,UAcXC,GAASC,OAA2Bb,GAb1Bc,OAASZ,gBAAeC,sBACpC,IACI,MAAMY,EAAWZ,EACXa,SAASC,eAAed,GAAiBe,MACzC,EACAC,QAAaC,OAAiB,CAAElB,gBAAea,aAErD,OADAL,GAASW,QAAQF,KACV,EACT,MAAOG,GAEL,OADAZ,GAASa,OAAWD,GAAKE,IAAUC,QAAUD,OACtC,KAGsD,cACrE,OAAO,gBAACZ,EAAWH,K,0QCjDvB,MAAMiB,EACO,YADPA,EAEO,YAFPA,EAGK,UAgBI,SAASb,EACpBc,EACArB,EACAsB,GAEA,OAAQnB,IACJ,MAAOoB,EAAYC,IAAiBC,cAAS,IACvCC,GAAYC,YAAO,IAEzBC,gBAAU,IACC,KACHJ,EAAc,MAEnB,IAYH,MAAMK,EAAeC,IACjBN,EACK,GAAEF,IACCQ,EAAWV,EAAsBA,MAMrB,IAApBjB,EAAM4B,WACFC,YAAW,KAnBfR,EAAc,IACdE,EAAUO,QAAU,IAoBb9B,EAAM+B,cAAgB,MAiBjC1B,eAAe2B,EAAcC,GAjCzBZ,EAAe,GAAEF,IAAcF,KAC/BM,EAAUO,QAAUI,KAAKC,OAkB7B,SAAoBR,GAChB,MAAMS,EAAkBF,KAAKC,MAAQZ,EAAUO,QACzCO,EAAqBrC,EAAMqC,oBAAsB,IAGnDD,GAAmBC,EACnBX,EAAYC,GAEZE,YAAW,KACPH,EAAYC,KACbU,EAAqBD,GAO5BE,OADmBzC,EAAQoC,IAI/B,OACI,wBAAMlC,UAAWqB,GACb,gBAACF,EAAD,GACIrB,QAAUoC,GAAWD,EAAcC,IAC/BjC,Q,mECnFjB,MAAMuC,EAAMlC,OAASZ,gBAAea,WAAW,MAClD,IAAKA,GAAYkC,MAAMlC,IAAamC,WAAWnC,IAAa,EACxD,KAAM,mBAOV,aAJuBoC,QAAK,gBAAiB,CACzCjD,gBACAa,SAAUmC,WAAWnC,MAETqC,QAGPC,EAAUvC,gBACIqC,QAAK,oBAAqB,CAAEG,aACnCF","file":"599.95695f64eca89362620a.js","sourcesContent":["import React, { Fragment } from 'react';\r\nimport { add as addToCartService } from '../../Services/Cart.service';\r\nimport withReactiveStyleBuyButton from '.././withReactiveStyleBuyButton';\r\nimport { receive, loadError } from '../../Actions/Cart.action';\r\nimport { catchError } from '../../Actions/Error.action';\r\nimport { useDispatch } from 'react-redux';\r\n\r\nconst TendenzBuyButton = ({\r\n    label,\r\n    articleNumber,\r\n    quantityFieldId,\r\n    href,\r\n    cssClass,\r\n    onClick,\r\n}) => {\r\n    return (\r\n        <Fragment>\r\n            {articleNumber ? (\r\n                <a\r\n                    className={cssClass}\r\n                    onClick={() => onClick({ articleNumber, quantityFieldId })}\r\n                >\r\n                    <i className=\"add-to-cart-icon\"></i>\r\n                    {label}\r\n                </a>\r\n            ) : (\r\n                <a className={`${cssClass} disabled_grey`} href={href}>\r\n                    <i className=\"add-to-cart-icon\"></i>\r\n                    {label}\r\n                </a>\r\n            )}\r\n        </Fragment>\r\n    );\r\n};\r\n\r\nconst StyledButton = (props) => {\r\n    const dispatch = useDispatch();\r\n    const onClick = async ({ articleNumber, quantityFieldId }) => {\r\n        try {\r\n            const quantity = quantityFieldId\r\n                ? document.getElementById(quantityFieldId).value\r\n                : 1;\r\n            const cart = await addToCartService({ articleNumber, quantity });\r\n            dispatch(receive(cart));\r\n            return true;\r\n        } catch (ex) {\r\n            dispatch(catchError(ex, (error) => loadError(error)));\r\n            return false;\r\n        }\r\n    };\r\n    const Button = withReactiveStyleBuyButton(TendenzBuyButton, onClick, 'buy-button');\r\n    return <Button {...props} />;\r\n};\r\n\r\nexport default StyledButton;\r\n","import React, { useState, useRef, useEffect } 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 async button's onClick event. It should return true if everything is OK, or false if there is any error.\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 */\r\nexport default function withReactiveStyleBuyButton(\r\n    WrappedComponent,\r\n    onClick,\r\n    stylePrefix\r\n) {\r\n    return (props) => {\r\n        const [stateClass, setStateClass] = useState('');\r\n        const startTime = useRef(0);\r\n\r\n        useEffect(() => {\r\n            return () => {\r\n                setStateClass('');\r\n            };\r\n        }, []);\r\n\r\n        function onNeutralState() {\r\n            setStateClass('');\r\n            startTime.current = 0;\r\n        }\r\n\r\n        function onLoadingState() {\r\n            setStateClass(`${stylePrefix}${StateStyles.LOADING}`);\r\n            startTime.current = Date.now();\r\n        }\r\n\r\n        const changeState = (complete) => {\r\n            setStateClass(\r\n                `${stylePrefix}${\r\n                    complete ? StateStyles.SUCCESS : StateStyles.ERROR\r\n                }`\r\n            );\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            props.autoReset !== false &&\r\n                setTimeout(() => {\r\n                    onNeutralState();\r\n                }, props.resetTimeout || 2000);\r\n        };\r\n\r\n        function onComplete(complete) {\r\n            const loadingDuration = Date.now() - startTime.current;\r\n            const minimumLoadingTime = 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(complete);\r\n            } else {\r\n                setTimeout(() => {\r\n                    changeState(complete);\r\n                }, minimumLoadingTime - loadingDuration);\r\n            }\r\n        }\r\n\r\n        async function onButtonClick(params) {\r\n            onLoadingState();\r\n            const data = await onClick(params);\r\n            onComplete(data);\r\n        }\r\n\r\n        return (\r\n            <span className={stateClass}>\r\n                <WrappedComponent\r\n                    onClick={(params) => onButtonClick(params)}\r\n                    {...props}\r\n                />\r\n            </span>\r\n        );\r\n    };\r\n}\r\n","import { post } from './http';\r\n\r\nexport const add = async ({ articleNumber, quantity = 1 }) => {\r\n    if (!quantity || isNaN(quantity) || parseFloat(quantity) <= 0) {\r\n        throw 'Invalid quantity';\r\n    }\r\n\r\n    const response = await post('/api/cart/add', {\r\n        articleNumber,\r\n        quantity: parseFloat(quantity),\r\n    });\r\n    return response.json();\r\n};\r\n\r\nexport const reorder = async (orderId) => {\r\n    const response = await post('/api/cart/reorder', { orderId });\r\n    return response.json();\r\n};\r\n"],"sourceRoot":""}