{counter}
\n * }\n */\n\nexport var useSelector = /*#__PURE__*/createSelectorHook();","export * from './exports';\nimport { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates';\nimport { setBatch } from './utils/batch'; // Enable batched updates in our subscriptions for use\n// with standard React renderers (ReactDOM, React Native)\n\nsetBatch(batch);\nexport { batch };","import React from 'react';\nimport wwlLogo from '../Logos/wwl-logo.svg';\nimport iconImage from '../Logos/icon-image.svg';\nimport iconText from '../Logos/icon-text.svg';\nimport iconGallery from '../Logos/icon-gallery.svg';\nimport iconDuplicate from '../Logos/icon-tool-duplicate.svg';\nimport iconDelete from '../Logos/icon-tool-delete.svg';\nimport iconCenterHo from '../Logos/icon-tool-centerhorizontal.svg';\nimport iconCenterVe from '../Logos/icon-tool-centervertical.svg';\nimport iconRedo from '../Logos/icon-tool-redo.svg';\nimport iconUndo from '../Logos/icon-tool-undo.svg';\nimport iconToTop from '../Logos/icon-tool-totop.svg';\nimport iconToButtom from '../Logos/icon-tool-tobottom.svg';\nimport iconToRight from '../Logos/icon-tool-toright.svg';\nimport iconToLeft from '../Logos/icon-tool-toleft.svg';\nimport { ReactSVG } from 'react-svg';\nimport { imageOrtext } from '../actions';\nimport { connect } from 'react-redux';\nimport ReactTooltip from 'react-tooltip';\nimport '../style/tools.css';\n\nconst isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);\n\n\n\nconst Tools = props => {\n let canvas, workArea;\n if (props.sideIs === 'front') {\n canvas = props.frontCurrent;\n workArea = props.product.workArea.front;\n } else {\n canvas = props.backCurrent;\n workArea = props.product.workArea.back;\n }\n\n function undo() {\n if (props.sideIs === 'front') {\n props.undoFront();\n } else props.undoBack();\n }\n\n function redo() {\n if (props.sideIs === 'front') {\n props.redoFront();\n } else props.redoBack();\n }\n\n function showPortraitOverlay () {\n // for portrait orientation - show content using z-index\n if (document.documentElement.clientWidth <= document.documentElement.clientHeight ) {\n document.getElementById('content').style.zIndex = '3';\n }\n }\n\n return(\n \n
\n );\n};\n\n\nconst mapStateToProps = state => {\n const { frontCurrent, backCurrent } = state.currentFigureReducer;\n const { contentIs, sideIs } = state.optionsReducer;\n const { undoFront } = state.undoredoReducer;\n const { undoBack } = state.undoredoReducer;\n const { redoBack } = state.undoredoReducer;\n const { redoFront } = state.undoredoReducer;\n const { product } = state.productReducer;\n\n return {\n frontCurrent, contentIs, backCurrent, sideIs,\n undoFront, undoBack, redoBack, redoFront, product\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n imageOrtext: data => dispatch(imageOrtext(data)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Tools);\n","/* eslint-disable no-redeclare */\nimport React, { Component } from 'react';\nimport textItalic from '../Logos/icon-text-italic.svg';\nimport textBold from '../Logos/icon-text-bold.svg';\nimport textUnderline from '../Logos/icon-text-underline.svg';\nimport textCenter from '../Logos/icon-text-center.svg';\nimport textLeft from '../Logos/icon-text-left.svg';\nimport textRight from '../Logos/icon-text-right.svg';\nimport { ReactSVG } from 'react-svg';\nimport { connect } from 'react-redux';\nimport { addEngraving, setStyle } from '../actions';\nvar FontFaceObserver = require('fontfaceobserver');\n\nconst withoutBold = 'Abel, Audiowide, CarterOne, GreatVibes, Graduate, Great Vibes, Michroma, Niconne, vast-shadow, Teko, VastShadow';\nconst withoutItalic = 'Abel, Audiowide, CarterOne, GreatVibes, Cinzel, Kameron, Graduate, Great Vibes, Michroma, Niconne, vast-shadow, RobotoSlab, kameron, Monda, monda, OleoScript, Play, Teko, boldCinzel, boldKameron, boldMonda, boldOleoScript, boldPlay, boldRobotoSlab, VastShadow';\n\nclass TextOptions extends Component {\n state = {\n fontSize: 40,\n lineHeight: 0,\n charSpacing: 50,\n textDecoration: false,\n textAlign: '',\n fontFamily: '',\n }\n\n componentWillReceiveProps(nextprops) {\n const { style } = nextprops\n const { fontSize , lineHeight, charSpacing , textAlign, textDecoration, fontFamily } = style\n\n if(fontSize && fontSize !== this.state.fontSize) {\n this.setState({ fontSize : fontSize });\n }\n if(lineHeight && lineHeight !== this.state.lineHeight) {\n this.setState({ lineHeight : lineHeight });\n }\n if(charSpacing && parseInt(charSpacing) !== this.state.charSpacing) {\n this.setState({ charSpacing : parseInt(charSpacing) });\n }\n if(textAlign && textAlign !== this.state.textAlign ) {\n this.setState({ textAlign : textAlign });\n }\n if(textDecoration && textDecoration !== this.state.textDecoration) {\n this.setState({ textDecoration : textDecoration });\n }\n if(fontFamily && fontFamily !== this.state.fontFamily) {\n this.setState({ fontFamily : fontFamily });\n }\n return true;\n }\n\n findFontfamilyvalue = () => {\n const { fontFamily } = this.state;\n if (fontFamily.includes('Abel')) {\n return 'Abel';\n } else if(fontFamily.includes('Audiowide')) {\n return 'Audiowide';\n } else if(fontFamily.includes('Bitter')) {\n return 'Bitter';\n } else if(fontFamily.includes('Carter')) {\n return 'CarterOne';\n } else if(fontFamily.includes('Cinzel')) {\n return 'Cinzel';\n } else if(fontFamily.includes('Graduate')) {\n return 'Graduate';\n } else if(fontFamily.includes('GreatVibes')) {\n return 'GreatVibes';\n } else if(fontFamily.includes('Kameron')) {\n return 'Kameron';\n } else if(fontFamily.includes('LobsterTwo')) {\n return 'LobsterTwo';\n } else if(fontFamily.includes('Michroma')) {\n return 'Michroma';\n } else if(fontFamily.includes('Monda')) {\n return 'Monda';\n } else if(fontFamily.includes('Niconne')) {\n return 'Niconne';\n } else if(fontFamily.includes('OleoScript')) {\n return 'OleoScript';\n } else if(fontFamily === 'Play') {\n return 'Play';\n } else if(fontFamily.includes('PlayfairDisplay')) {\n return 'PlayfairDisplay';\n } else if(fontFamily.includes('PTSans')) {\n return 'PTSans';\n } else if(fontFamily.includes('Raleway')) {\n return 'Raleway';\n } else if(fontFamily.includes('RobotoSlab')) {\n return 'RobotoSlab';\n } else if(fontFamily.includes('Teko')) {\n return 'Teko';\n } else if(fontFamily.includes('VastShadow')) {\n return 'VastShadow';\n }\n }\n\n render() {\n let canvas;\n if (this.props.sideIs === 'front') {\n canvas = this.props.frontCurrent;\n } else canvas = this.props.backCurrent;\n let addFigure;\n if (this.props.sideIs === 'front') {\n addFigure = 'FRONT_ADD_FIGURE';\n } else addFigure = 'BACK_ADD_FIGURE';\n return(\n \n
\n \n {\n showPortraitOverlay();\n props.imageOrtext('Text');\n canvas.discardActiveObject();\n canvas.renderAll();\n }}/>\n \n Text einfügen\n \n
\n \n {\n showPortraitOverlay();\n props.imageOrtext('uploadImage');\n canvas.discardActiveObject();\n canvas.renderAll();\n }}\n className={props.contentIs === 'uploadImage' ? 'textImagePic' : ''}\n />\n \n Bild-Upload\n \n
\n \n {\n showPortraitOverlay();\n props.imageOrtext('galleryImages');\n canvas.discardActiveObject();\n canvas.renderAll();\n }}\n className={props.contentIs === 'galleryImages' ? 'textImagePic' : ''}\n />\n \n Motivgalerie\n \n
\n \n
\n \n {\n if (canvas.getActiveObject()) {\n canvas.remove(canvas.getActiveObject());\n } else alert('Wählen Sie eine Gravur aus');\n }} />\n \n Löschen\n \n
\n \n {\n if (canvas.getActiveObject()) {\n var object = canvas.getActiveObject();\n object.clone(clone => {\n clone.set({\n borderColor: 'black',\n cornerColor: '#3D3D3D',\n });\n canvas.add(clone);\n canvas.centerObject(clone);\n clone.setCoords();\n canvas.setActiveObject(clone);\n canvas.renderAll(clone);\n });\n } else alert('Wählen Sie eine Gravur aus');\n }} />\n \n Kopieren\n \n
\n \n
\n \n {\n if (canvas.getActiveObject()) {\n const obj = canvas.getActiveObject();\n if (obj.angle && obj.angle < 90 ) {\n obj.set({ left: obj.angle + workArea.left });\n obj.setCoords();\n canvas.renderAll();\n } else {\n obj.set({ left: workArea.left });\n obj.setCoords();\n canvas.renderAll();\n }\n } else alert('Wählen Sie eine Gravur aus');\n } }/>\n \n Linksbündig ausrichten\n \n
\n \n {\n if (canvas.getActiveObject()) {\n const center = ((workArea.width - canvas.getActiveObject().getScaledWidth() ) /2) + workArea.left;\n const obj = canvas.getActiveObject();\n if (obj.angle && obj.angle < 90 ) {\n obj.set({ left: obj.angle + center });\n obj.setCoords();\n canvas.renderAll();\n } else {\n obj.set({ left: center });\n obj.setCoords();\n canvas.renderAll();\n }\n } else alert('Wählen Sie eine Gravur aus');\n }} />\n \n Horizontal zentrieren\n \n
\n \n\n {\n if (canvas.getActiveObject()) {\n const right = workArea.width - canvas.getActiveObject().getScaledWidth() + workArea.left;\n const obj = canvas.getActiveObject();\n if (obj.angle && obj.angle < 90 ) {\n obj.set({ left: obj.angle + right });\n obj.setCoords();\n canvas.renderAll();\n } else {\n obj.set({ left: right });\n obj.setCoords();\n canvas.renderAll();\n }\n } else alert('Wählen Sie eine Gravur aus');\n }}/>\n \n Rechtsbündig ausrichten\n \n
\n \n {\n if (canvas.getActiveObject()) {\n canvas.getActiveObject().set({ top: workArea.top });\n canvas.getActiveObject().setCoords();\n canvas.renderAll();\n } else alert('Wählen Sie eine Gravur aus');\n } } />\n \n Oben ausrichten\n \n
\n \n {\n if (canvas.getActiveObject()) {\n const center = ((workArea.height - canvas.getActiveObject().getScaledHeight()) /2) + workArea.top ;\n canvas.getActiveObject().set({ top: center });\n canvas.getActiveObject().setCoords();\n canvas.renderAll();\n } else alert('Wählen Sie eine Gravur aus');\n }}\n />\n \n Vertikal zentrieren\n \n
\n \n {\n if (canvas.getActiveObject()) {\n const bottom = workArea.height - canvas.getActiveObject().getScaledHeight() + workArea.top;\n canvas.getActiveObject().set({ top: bottom });\n canvas.getActiveObject().setCoords();\n canvas.renderAll();\n } else alert('Wählen Sie eine Gravur aus');\n }} />\n \n Unten ausrichten\n \n
\n \n
\n \n \n \n Zurück\n \n
\n \n \n Wiederholen\n \n
\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n const { frontCurrent, backCurrent } = state.currentFigureReducer;\n const { style } = state.styleReducer;\n const { sideIs } = state.optionsReducer;\n return {\n frontCurrent, style, sideIs, backCurrent\n };\n};\nconst mapDispatchToProps = dispatch => ({\n addEngraving: data => dispatch(addEngraving(data)),\n setStyle: fs => dispatch(setStyle(fs))\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TextOptions);\n","/* eslint-disable prefer-destructuring */\nimport React , { Component } from 'react';\nimport uploadIcon from '../Logos/upload.svg';\nimport { connect } from 'react-redux';\nimport { addEngraving, addoriginalPics, acceptTerms, imageOrtext } from '../actions';\n// import { SVG } from '@svgdotjs/svg.js';\n// import Filter from '@svgdotjs/svg.filter.js/src/svg.filter';\n// import Filter from '@svgdotjs/svg.filter.js'; //3.0.2\nimport { ReactSVG } from 'react-svg';\n\n\nconst isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);\n\nclass ImageOptions extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n range: 145,\n userImages: [],\n invert: true,\n showCanvas: false,\n invertedImageUrl: null,\n userSVG: [],\n color: [this.props.product.engColor.r,this.props.product.engColor.g,this.props.product.engColor.b]\n };\n this.canvas = React.createRef();\n this.image = React.createRef();\n }\n\n checkImage = e => {\n if (e.target.files[0] &&\n e.target.files[0].type.includes('jpeg') ||\n e.target.files[0].type.includes('jpg') ||\n e.target.files[0].type.includes('png')) {\n const { userImages } = this.state;\n userImages.push(e.target.files[0]);\n const img = new Image();\n img.id = e.target.files[0].name;\n img.src = window.URL.createObjectURL(e.target.files[0]);\n img.onload = () => {\n if(img.width > 599 && img.height > 599 && img.width < 2501 && img.height < 2501) {\n this.image.current = img;\n this.setState({ showCanvas: true, userImages });\n this.invertColor();\n } else alert('Die Datei kann nicht hochgeladen werden. Bitte beachten Sie die Dateivoraussetzungen.');\n };\n } else if ( e.target.files[0].type.includes('svg') ) {\n const { userSVG } = this.state;\n const reader = new FileReader();\n reader.addEventListener('load', event => {\n const invertedImageUrl = { url: event.target.result };\n userSVG.push(event.target.result);\n this.setState({ invertedImageUrl, userSVG });\n let addFigure;\n if (this.props.sideIs === 'front') {\n addFigure = 'FRONT_ADD_FIGURE';\n } else addFigure = 'BACK_ADD_FIGURE';\n this.props.addoriginalPics([this.state.userImages, this.state.userSVG]);\n this.props.addEngraving([addFigure, invertedImageUrl]);\n });\n reader.readAsText(e.target.files[0]);\n } else {\n alert('Laden Sie Bitte ein Bild hoch');\n }\n }\n\n reInverColor = e => {\n let value;\n if (e) {\n value = e.target.value;\n } else value = this.state.range;\n const img = this.image.current;\n const { color } = this.state;\n const canvas = this.canvas.current;\n canvas.width = img.width;\n canvas.height = img.height;\n canvas.id = img.id;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0);\n var imgData = ctx.getImageData(0, 0, img.width, img.height);\n var i;\n for (i = 0; i < imgData.data.length; i += 4) {\n if (imgData.data[i] < value || imgData.data[i+1] < value || imgData.data[i+2] < value) {\n imgData.data[i+3] = 0;\n } else {\n imgData.data[i] = color[0];\n imgData.data[i+1] = color[1];\n imgData.data[i+2] = color[2];\n imgData.data[i+3] = 255;\n }\n }\n ctx.putImageData(imgData, 0, 0);\n const invertedImageUrl = { url: canvas.toDataURL(), id: canvas.id };\n this.setState({ invertedImageUrl });\n }\n\n invertColor = e => {\n let value;\n if (e) {\n value = e.target.value;\n } else value = this.state.range;\n const img = this.image.current;\n const { color } = this.state;\n const canvas = this.canvas.current;\n canvas.width = img.width;\n canvas.height = img.height;\n canvas.id = img.id;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0);\n var imgData = ctx.getImageData(0, 0, img.width, img.height);\n var i;\n\n for (i = 0; i < imgData.data.length; i += 4) {\n if (imgData.data[i] > value || imgData.data[i+1] > value || imgData.data[i+2] > value) {\n imgData.data[i+3] = 0;\n } else {\n imgData.data[i] = color[0];\n imgData.data[i+1] = color[1];\n imgData.data[i+2] = color[2];\n imgData.data[i+3] = 255;\n }\n }\n ctx.putImageData(imgData, 0, 0);\n const invertedImageUrl = { url: canvas.toDataURL(), id: canvas.id };\n this.setState({ invertedImageUrl });\n }\n\n checkColor(state) {\n const color = state.color\n if (color[0] > 200 && color[1] > 200 && color[2] > 200) {\n return false\n } else {\n return true\n }\n };\n\n render() {\n let addFigure;\n if (this.props.sideIs === 'front') {\n addFigure = 'FRONT_ADD_FIGURE';\n } else addFigure = 'BACK_ADD_FIGURE';\n return (\n \n document.getElementById('content').style.zIndex = '1' }>X
\n \n
\n \n TEXTGRÖSSE\n {\n canvas.getActiveObject().set('fontSize', e.target.value);\n canvas.renderAll();\n const newStyle = { ...this.state, fontSize: e.target.value/1 };\n this.props.setStyle(newStyle);\n }}\n step=\"1\"/>\n \n
\n \n ZEILENHÖHE\n {\n canvas.getActiveObject().set('lineHeight', `${ e.target.value}`);\n canvas.renderAll();\n const newStyle = { ...this.state, lineHeight: e.target.value/1 };\n this.props.setStyle(newStyle);\n }\n }\n step=\"0.1\"/>\n \n\n
\n \n ZEICHENABSTAND\n {\n canvas.getActiveObject().set('charSpacing', e.target.value);\n canvas.renderAll();\n const newStyle = { ...this.state, charSpacing: e.target.value };\n // this.setState({ charSpacing: e.target.value });\n this.props.setStyle(newStyle);\n }}\n step=\"10\"/>\n \n\n
\n \n
\n\n \n AUSRICHTUNG\n
\n \n\n {\n canvas.getActiveObject().set('textAlign', 'left');\n canvas.renderAll();\n this.setState({ textAlign: 'left' });\n }}\n style={{ fill: this.state.textAlign === 'left'\n ? '#B39964' : 'black' }}\n />\n {\n canvas.getActiveObject().set('textAlign', 'center');\n canvas.renderAll();\n const newStyle = { ...this.state, textAlign: 'center' };\n this.props.setStyle(newStyle);\n this.setState({ textAlign: 'center' });\n }}\n style={{ fill: this.state.textAlign === 'center' ? '#B39964' : 'black' }}\n />\n {\n canvas.getActiveObject().set('textAlign', 'right');\n canvas.renderAll();\n const newStyle = { ...this.state, textAlign: 'right' };\n this.props.setStyle(newStyle);\n this.setState({ textAlign: 'right' });\n }}\n style={{ fill: this.state.textAlign === 'right' ? '#B39964' : 'black' }}\n />\n
\n\n \n GESTALTUNG\n
\n \n {\n const { fontFamily } = this.state;\n const italic = 'italic';\n if (!fontFamily.includes(italic)) {\n const newfont = fontFamily + italic;\n this.setState({ fontFamily: newfont });\n const newStyle = { ...this.state, fontFamily: newfont };\n this.props.setStyle(newStyle);\n var myfont = new FontFaceObserver(newfont);\n myfont.load()\n .then(() => {\n // when font is loaded, use it.\n canvas.getActiveObject().set('fontFamily', newfont);\n canvas.requestRenderAll();\n }).catch(e => {\n alert('die Schriftart ist nicht in kursiv oder kursiv & fett verfügbar');\n });\n } else {\n const newfont = fontFamily.replace(italic,'');\n this.setState({ fontFamily: newfont });\n const newStyle = { ...this.state, fontFamily: newfont };\n this.props.setStyle(newStyle);\n // eslint-disable-next-line no-redeclare\n var myfont = new FontFaceObserver(newfont);\n myfont.load()\n .then(() => {\n canvas.getActiveObject().set('fontFamily', newfont);\n canvas.requestRenderAll();\n }).catch(e => {\n alert('für diese Schriftart wählen Sie entweder kursiv oder fett aus');\n });\n }\n }\n\n }\n style={{ fill: withoutItalic.includes(this.state.fontFamily)\n ? '#A9A9A9' :\n this.state.fontFamily.includes('italic') ? '#B39964' : 'black'\n }}\n />\n {\n const { fontFamily } = this.state;\n const bold = 'bold';\n if (!fontFamily.includes(bold)) {\n const newfont = bold + fontFamily;\n this.setState({ fontFamily: newfont });\n const newStyle = { ...this.state, fontFamily: newfont };\n this.props.setStyle(newStyle);\n var myfont = new FontFaceObserver(newfont);\n myfont.load()\n .then(() => {\n // when font is loaded, use it.\n canvas.getActiveObject().set('fontFamily', newfont);\n canvas.requestRenderAll();\n }).catch(e => {\n alert('für diese Schriftart wählen Sie entweder kursiv oder fett aus');\n });\n } else {\n const newfont = fontFamily.replace(bold,'');\n this.setState({ fontFamily: newfont });\n const newStyle = { ...this.state, fontFamily: newfont };\n this.props.setStyle(newStyle);\n var myfont = new FontFaceObserver(newfont);\n myfont.load()\n .then(() => {\n // when font is loaded, use it.\n canvas.getActiveObject().set('fontFamily', newfont);\n canvas.requestRenderAll();\n }).catch(e => {\n alert('die Schriftart ist nicht in fett oder fett & kursiv verfügbar');\n });\n }\n }}\n style={{ fill: withoutBold.includes(this.state.fontFamily)\n ? '#A9A9A9' :\n this.state.fontFamily.includes('bold') ? '#B39964' : 'black'\n\n }}\n />\n {\n if (this.state.textDecoration === false) {\n canvas.getActiveObject().set('underline', true);\n canvas.renderAll();\n this.setState({ textDecoration: true });\n canvas.getActiveObject().dirty = true;\n } else {\n canvas.getActiveObject().set('underline', false);\n canvas.renderAll();\n this.setState({ textDecoration: false });\n canvas.getActiveObject().dirty = false;\n }\n } }\n style={{ fill: this.state.textDecoration === true ? '#B39964' : 'black' }}\n />\n
\n \n SCHRIFTART\n\n \n
\n \n this.props.addEngraving([addFigure, 'Meine Gravur'])} >Textfeld einfügen\n
\n \n
\n );\n }\n}\nconst mapStateToProps = state => {\n const { sideIs, userAccept } = state.optionsReducer;\n const { product } = state.productReducer;\n\n return {\n sideIs, userAccept, product\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n acceptTerms: yes => dispatch(acceptTerms(yes)),\n addEngraving: data => dispatch(addEngraving(data)),\n addoriginalPics: pics => dispatch(addoriginalPics(pics)),\n imageOrtext: data => dispatch(imageOrtext(data))\n\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ImageOptions);\n","export default function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}","import defineProperty from \"./defineProperty.js\";\n\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nexport default function _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n\n return target;\n}","function _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\nimport _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';\n/**\n * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js\n *\n * Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes\n * during build.\n * @param {number} code\n */\n\nfunction formatProdErrorMessage(code) {\n return \"Minified Redux error #\" + code + \"; visit https://redux.js.org/Errors?code=\" + code + \" for the full message or \" + 'use the non-minified dev environment for full errors. ';\n} // Inlined version of the `symbol-observable` polyfill\n\n\nvar $$observable = function () {\n return typeof Symbol === 'function' && Symbol.observable || '@@observable';\n}();\n/**\n * These are private action types reserved by Redux.\n * For any unknown actions, you must return the current state.\n * If the current state is undefined, you must return the initial state.\n * Do not reference these action types directly in your code.\n */\n\n\nvar randomString = function randomString() {\n return Math.random().toString(36).substring(7).split('').join('.');\n};\n\nvar ActionTypes = {\n INIT: \"@@redux/INIT\" + randomString(),\n REPLACE: \"@@redux/REPLACE\" + randomString(),\n PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {\n return \"@@redux/PROBE_UNKNOWN_ACTION\" + randomString();\n }\n};\n/**\n * @param {any} obj The object to inspect.\n * @returns {boolean} True if the argument appears to be a plain object.\n */\n\nfunction isPlainObject(obj) {\n if (_typeof(obj) !== 'object' || obj === null) return false;\n var proto = obj;\n\n while (Object.getPrototypeOf(proto) !== null) {\n proto = Object.getPrototypeOf(proto);\n }\n\n return Object.getPrototypeOf(obj) === proto;\n} // Inlined / shortened version of `kindOf` from https://github.com/jonschlinkert/kind-of\n\n\nfunction miniKindOf(val) {\n if (val === void 0) return 'undefined';\n if (val === null) return 'null';\n\n var type = _typeof(val);\n\n switch (type) {\n case 'boolean':\n case 'string':\n case 'number':\n case 'symbol':\n case 'function':\n {\n return type;\n }\n }\n\n if (Array.isArray(val)) return 'array';\n if (isDate(val)) return 'date';\n if (isError(val)) return 'error';\n var constructorName = ctorName(val);\n\n switch (constructorName) {\n case 'Symbol':\n case 'Promise':\n case 'WeakMap':\n case 'WeakSet':\n case 'Map':\n case 'Set':\n return constructorName;\n } // other\n\n\n return type.slice(8, -1).toLowerCase().replace(/\\s/g, '');\n}\n\nfunction ctorName(val) {\n return typeof val.constructor === 'function' ? val.constructor.name : null;\n}\n\nfunction isError(val) {\n return val instanceof Error || typeof val.message === 'string' && val.constructor && typeof val.constructor.stackTraceLimit === 'number';\n}\n\nfunction isDate(val) {\n if (val instanceof Date) return true;\n return typeof val.toDateString === 'function' && typeof val.getDate === 'function' && typeof val.setDate === 'function';\n}\n\nfunction kindOf(val) {\n var typeOfVal = _typeof(val);\n\n if (process.env.NODE_ENV !== 'production') {\n typeOfVal = miniKindOf(val);\n }\n\n return typeOfVal;\n}\n/**\n * Creates a Redux store that holds the state tree.\n * The only way to change the data in the store is to call `dispatch()` on it.\n *\n * There should only be a single store in your app. To specify how different\n * parts of the state tree respond to actions, you may combine several reducers\n * into a single reducer function by using `combineReducers`.\n *\n * @param {Function} reducer A function that returns the next state tree, given\n * the current state tree and the action to handle.\n *\n * @param {any} [preloadedState] The initial state. You may optionally specify it\n * to hydrate the state from the server in universal apps, or to restore a\n * previously serialized user session.\n * If you use `combineReducers` to produce the root reducer function, this must be\n * an object with the same shape as `combineReducers` keys.\n *\n * @param {Function} [enhancer] The store enhancer. You may optionally specify it\n * to enhance the store with third-party capabilities such as middleware,\n * time travel, persistence, etc. The only store enhancer that ships with Redux\n * is `applyMiddleware()`.\n *\n * @returns {Store} A Redux store that lets you read the state, dispatch actions\n * and subscribe to changes.\n */\n\n\nfunction createStore(reducer, preloadedState, enhancer) {\n var _ref2;\n\n if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(0) : 'It looks like you are passing several store enhancers to ' + 'createStore(). This is not supported. Instead, compose them ' + 'together to a single function. See https://redux.js.org/tutorials/fundamentals/part-4-store#creating-a-store-with-enhancers for an example.');\n }\n\n if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {\n enhancer = preloadedState;\n preloadedState = undefined;\n }\n\n if (typeof enhancer !== 'undefined') {\n if (typeof enhancer !== 'function') {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(1) : \"Expected the enhancer to be a function. Instead, received: '\" + kindOf(enhancer) + \"'\");\n }\n\n return enhancer(createStore)(reducer, preloadedState);\n }\n\n if (typeof reducer !== 'function') {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(2) : \"Expected the root reducer to be a function. Instead, received: '\" + kindOf(reducer) + \"'\");\n }\n\n var currentReducer = reducer;\n var currentState = preloadedState;\n var currentListeners = [];\n var nextListeners = currentListeners;\n var isDispatching = false;\n /**\n * This makes a shallow copy of currentListeners so we can use\n * nextListeners as a temporary list while dispatching.\n *\n * This prevents any bugs around consumers calling\n * subscribe/unsubscribe in the middle of a dispatch.\n */\n\n function ensureCanMutateNextListeners() {\n if (nextListeners === currentListeners) {\n nextListeners = currentListeners.slice();\n }\n }\n /**\n * Reads the state tree managed by the store.\n *\n * @returns {any} The current state tree of your application.\n */\n\n\n function getState() {\n if (isDispatching) {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(3) : 'You may not call store.getState() while the reducer is executing. ' + 'The reducer has already received the state as an argument. ' + 'Pass it down from the top reducer instead of reading it from the store.');\n }\n\n return currentState;\n }\n /**\n * Adds a change listener. It will be called any time an action is dispatched,\n * and some part of the state tree may potentially have changed. You may then\n * call `getState()` to read the current state tree inside the callback.\n *\n * You may call `dispatch()` from a change listener, with the following\n * caveats:\n *\n * 1. The subscriptions are snapshotted just before every `dispatch()` call.\n * If you subscribe or unsubscribe while the listeners are being invoked, this\n * will not have any effect on the `dispatch()` that is currently in progress.\n * However, the next `dispatch()` call, whether nested or not, will use a more\n * recent snapshot of the subscription list.\n *\n * 2. The listener should not expect to see all state changes, as the state\n * might have been updated multiple times during a nested `dispatch()` before\n * the listener is called. It is, however, guaranteed that all subscribers\n * registered before the `dispatch()` started will be called with the latest\n * state by the time it exits.\n *\n * @param {Function} listener A callback to be invoked on every dispatch.\n * @returns {Function} A function to remove this change listener.\n */\n\n\n function subscribe(listener) {\n if (typeof listener !== 'function') {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(4) : \"Expected the listener to be a function. Instead, received: '\" + kindOf(listener) + \"'\");\n }\n\n if (isDispatching) {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(5) : 'You may not call store.subscribe() while the reducer is executing. ' + 'If you would like to be notified after the store has been updated, subscribe from a ' + 'component and invoke store.getState() in the callback to access the latest state. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');\n }\n\n var isSubscribed = true;\n ensureCanMutateNextListeners();\n nextListeners.push(listener);\n return function unsubscribe() {\n if (!isSubscribed) {\n return;\n }\n\n if (isDispatching) {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(6) : 'You may not unsubscribe from a store listener while the reducer is executing. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');\n }\n\n isSubscribed = false;\n ensureCanMutateNextListeners();\n var index = nextListeners.indexOf(listener);\n nextListeners.splice(index, 1);\n currentListeners = null;\n };\n }\n /**\n * Dispatches an action. It is the only way to trigger a state change.\n *\n * The `reducer` function, used to create the store, will be called with the\n * current state tree and the given `action`. Its return value will\n * be considered the **next** state of the tree, and the change listeners\n * will be notified.\n *\n * The base implementation only supports plain object actions. If you want to\n * dispatch a Promise, an Observable, a thunk, or something else, you need to\n * wrap your store creating function into the corresponding middleware. For\n * example, see the documentation for the `redux-thunk` package. Even the\n * middleware will eventually dispatch plain object actions using this method.\n *\n * @param {Object} action A plain object representing “what changed”. It is\n * a good idea to keep actions serializable so you can record and replay user\n * sessions, or use the time travelling `redux-devtools`. An action must have\n * a `type` property which may not be `undefined`. It is a good idea to use\n * string constants for action types.\n *\n * @returns {Object} For convenience, the same action object you dispatched.\n *\n * Note that, if you use a custom middleware, it may wrap `dispatch()` to\n * return something else (for example, a Promise you can await).\n */\n\n\n function dispatch(action) {\n if (!isPlainObject(action)) {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(7) : \"Actions must be plain objects. Instead, the actual type was: '\" + kindOf(action) + \"'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.\");\n }\n\n if (typeof action.type === 'undefined') {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(8) : 'Actions may not have an undefined \"type\" property. You may have misspelled an action type string constant.');\n }\n\n if (isDispatching) {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(9) : 'Reducers may not dispatch actions.');\n }\n\n try {\n isDispatching = true;\n currentState = currentReducer(currentState, action);\n } finally {\n isDispatching = false;\n }\n\n var listeners = currentListeners = nextListeners;\n\n for (var i = 0; i < listeners.length; i++) {\n var listener = listeners[i];\n listener();\n }\n\n return action;\n }\n /**\n * Replaces the reducer currently used by the store to calculate the state.\n *\n * You might need this if your app implements code splitting and you want to\n * load some of the reducers dynamically. You might also need this if you\n * implement a hot reloading mechanism for Redux.\n *\n * @param {Function} nextReducer The reducer for the store to use instead.\n * @returns {void}\n */\n\n\n function replaceReducer(nextReducer) {\n if (typeof nextReducer !== 'function') {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(10) : \"Expected the nextReducer to be a function. Instead, received: '\" + kindOf(nextReducer));\n }\n\n currentReducer = nextReducer; // This action has a similiar effect to ActionTypes.INIT.\n // Any reducers that existed in both the new and old rootReducer\n // will receive the previous state. This effectively populates\n // the new state tree with any relevant data from the old one.\n\n dispatch({\n type: ActionTypes.REPLACE\n });\n }\n /**\n * Interoperability point for observable/reactive libraries.\n * @returns {observable} A minimal observable of state changes.\n * For more information, see the observable proposal:\n * https://github.com/tc39/proposal-observable\n */\n\n\n function observable() {\n var _ref;\n\n var outerSubscribe = subscribe;\n return _ref = {\n /**\n * The minimal observable subscription method.\n * @param {Object} observer Any object that can be used as an observer.\n * The observer object should have a `next` method.\n * @returns {subscription} An object with an `unsubscribe` method that can\n * be used to unsubscribe the observable from the store, and prevent further\n * emission of values from the observable.\n */\n subscribe: function subscribe(observer) {\n if (_typeof(observer) !== 'object' || observer === null) {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(11) : \"Expected the observer to be an object. Instead, received: '\" + kindOf(observer) + \"'\");\n }\n\n function observeState() {\n if (observer.next) {\n observer.next(getState());\n }\n }\n\n observeState();\n var unsubscribe = outerSubscribe(observeState);\n return {\n unsubscribe: unsubscribe\n };\n }\n }, _ref[$$observable] = function () {\n return this;\n }, _ref;\n } // When a store is created, an \"INIT\" action is dispatched so that every\n // reducer returns their initial state. This effectively populates\n // the initial state tree.\n\n\n dispatch({\n type: ActionTypes.INIT\n });\n return _ref2 = {\n dispatch: dispatch,\n subscribe: subscribe,\n getState: getState,\n replaceReducer: replaceReducer\n }, _ref2[$$observable] = observable, _ref2;\n}\n/**\n * Prints a warning in the console if it exists.\n *\n * @param {String} message The warning message.\n * @returns {void}\n */\n\n\nfunction warning(message) {\n /* eslint-disable no-console */\n if (typeof console !== 'undefined' && typeof console.error === 'function') {\n console.error(message);\n }\n /* eslint-enable no-console */\n\n\n try {\n // This error was thrown as a convenience so that if you enable\n // \"break on all exceptions\" in your console,\n // it would pause the execution at this line.\n throw new Error(message);\n } catch (e) {} // eslint-disable-line no-empty\n\n}\n\nfunction getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {\n var reducerKeys = Object.keys(reducers);\n var argumentName = action && action.type === ActionTypes.INIT ? 'preloadedState argument passed to createStore' : 'previous state received by the reducer';\n\n if (reducerKeys.length === 0) {\n return 'Store does not have a valid reducer. Make sure the argument passed ' + 'to combineReducers is an object whose values are reducers.';\n }\n\n if (!isPlainObject(inputState)) {\n return \"The \" + argumentName + \" has unexpected type of \\\"\" + kindOf(inputState) + \"\\\". Expected argument to be an object with the following \" + (\"keys: \\\"\" + reducerKeys.join('\", \"') + \"\\\"\");\n }\n\n var unexpectedKeys = Object.keys(inputState).filter(function (key) {\n return !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key];\n });\n unexpectedKeys.forEach(function (key) {\n unexpectedKeyCache[key] = true;\n });\n if (action && action.type === ActionTypes.REPLACE) return;\n\n if (unexpectedKeys.length > 0) {\n return \"Unexpected \" + (unexpectedKeys.length > 1 ? 'keys' : 'key') + \" \" + (\"\\\"\" + unexpectedKeys.join('\", \"') + \"\\\" found in \" + argumentName + \". \") + \"Expected to find one of the known reducer keys instead: \" + (\"\\\"\" + reducerKeys.join('\", \"') + \"\\\". Unexpected keys will be ignored.\");\n }\n}\n\nfunction assertReducerShape(reducers) {\n Object.keys(reducers).forEach(function (key) {\n var reducer = reducers[key];\n var initialState = reducer(undefined, {\n type: ActionTypes.INIT\n });\n\n if (typeof initialState === 'undefined') {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(12) : \"The slice reducer for key \\\"\" + key + \"\\\" returned undefined during initialization. \" + \"If the state passed to the reducer is undefined, you must \" + \"explicitly return the initial state. The initial state may \" + \"not be undefined. If you don't want to set a value for this reducer, \" + \"you can use null instead of undefined.\");\n }\n\n if (typeof reducer(undefined, {\n type: ActionTypes.PROBE_UNKNOWN_ACTION()\n }) === 'undefined') {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(13) : \"The slice reducer for key \\\"\" + key + \"\\\" returned undefined when probed with a random type. \" + (\"Don't try to handle '\" + ActionTypes.INIT + \"' or other actions in \\\"redux/*\\\" \") + \"namespace. They are considered private. Instead, you must return the \" + \"current state for any unknown actions, unless it is undefined, \" + \"in which case you must return the initial state, regardless of the \" + \"action type. The initial state may not be undefined, but can be null.\");\n }\n });\n}\n/**\n * Turns an object whose values are different reducer functions, into a single\n * reducer function. It will call every child reducer, and gather their results\n * into a single state object, whose keys correspond to the keys of the passed\n * reducer functions.\n *\n * @param {Object} reducers An object whose values correspond to different\n * reducer functions that need to be combined into one. One handy way to obtain\n * it is to use ES6 `import * as reducers` syntax. The reducers may never return\n * undefined for any action. Instead, they should return their initial state\n * if the state passed to them was undefined, and the current state for any\n * unrecognized action.\n *\n * @returns {Function} A reducer function that invokes every reducer inside the\n * passed object, and builds a state object with the same shape.\n */\n\n\nfunction combineReducers(reducers) {\n var reducerKeys = Object.keys(reducers);\n var finalReducers = {};\n\n for (var i = 0; i < reducerKeys.length; i++) {\n var key = reducerKeys[i];\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof reducers[key] === 'undefined') {\n warning(\"No reducer provided for key \\\"\" + key + \"\\\"\");\n }\n }\n\n if (typeof reducers[key] === 'function') {\n finalReducers[key] = reducers[key];\n }\n }\n\n var finalReducerKeys = Object.keys(finalReducers); // This is used to make sure we don't warn about the same\n // keys multiple times.\n\n var unexpectedKeyCache;\n\n if (process.env.NODE_ENV !== 'production') {\n unexpectedKeyCache = {};\n }\n\n var shapeAssertionError;\n\n try {\n assertReducerShape(finalReducers);\n } catch (e) {\n shapeAssertionError = e;\n }\n\n return function combination(state, action) {\n if (state === void 0) {\n state = {};\n }\n\n if (shapeAssertionError) {\n throw shapeAssertionError;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);\n\n if (warningMessage) {\n warning(warningMessage);\n }\n }\n\n var hasChanged = false;\n var nextState = {};\n\n for (var _i = 0; _i < finalReducerKeys.length; _i++) {\n var _key = finalReducerKeys[_i];\n var reducer = finalReducers[_key];\n var previousStateForKey = state[_key];\n var nextStateForKey = reducer(previousStateForKey, action);\n\n if (typeof nextStateForKey === 'undefined') {\n var actionType = action && action.type;\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(14) : \"When called with an action of type \" + (actionType ? \"\\\"\" + String(actionType) + \"\\\"\" : '(unknown type)') + \", the slice reducer for key \\\"\" + _key + \"\\\" returned undefined. \" + \"To ignore an action, you must explicitly return the previous state. \" + \"If you want this reducer to hold no value, you can return null instead of undefined.\");\n }\n\n nextState[_key] = nextStateForKey;\n hasChanged = hasChanged || nextStateForKey !== previousStateForKey;\n }\n\n hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length;\n return hasChanged ? nextState : state;\n };\n}\n\nfunction bindActionCreator(actionCreator, dispatch) {\n return function () {\n return dispatch(actionCreator.apply(this, arguments));\n };\n}\n/**\n * Turns an object whose values are action creators, into an object with the\n * same keys, but with every function wrapped into a `dispatch` call so they\n * may be invoked directly. This is just a convenience method, as you can call\n * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.\n *\n * For convenience, you can also pass an action creator as the first argument,\n * and get a dispatch wrapped function in return.\n *\n * @param {Function|Object} actionCreators An object whose values are action\n * creator functions. One handy way to obtain it is to use ES6 `import * as`\n * syntax. You may also pass a single function.\n *\n * @param {Function} dispatch The `dispatch` function available on your Redux\n * store.\n *\n * @returns {Function|Object} The object mimicking the original object, but with\n * every action creator wrapped into the `dispatch` call. If you passed a\n * function as `actionCreators`, the return value will also be a single\n * function.\n */\n\n\nfunction bindActionCreators(actionCreators, dispatch) {\n if (typeof actionCreators === 'function') {\n return bindActionCreator(actionCreators, dispatch);\n }\n\n if (_typeof(actionCreators) !== 'object' || actionCreators === null) {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(16) : \"bindActionCreators expected an object or a function, but instead received: '\" + kindOf(actionCreators) + \"'. \" + \"Did you write \\\"import ActionCreators from\\\" instead of \\\"import * as ActionCreators from\\\"?\");\n }\n\n var boundActionCreators = {};\n\n for (var key in actionCreators) {\n var actionCreator = actionCreators[key];\n\n if (typeof actionCreator === 'function') {\n boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);\n }\n }\n\n return boundActionCreators;\n}\n/**\n * Composes single-argument functions from right to left. The rightmost\n * function can take multiple arguments as it provides the signature for\n * the resulting composite function.\n *\n * @param {...Function} funcs The functions to compose.\n * @returns {Function} A function obtained by composing the argument functions\n * from right to left. For example, compose(f, g, h) is identical to doing\n * (...args) => f(g(h(...args))).\n */\n\n\nfunction compose() {\n for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {\n funcs[_key] = arguments[_key];\n }\n\n if (funcs.length === 0) {\n return function (arg) {\n return arg;\n };\n }\n\n if (funcs.length === 1) {\n return funcs[0];\n }\n\n return funcs.reduce(function (a, b) {\n return function () {\n return a(b.apply(void 0, arguments));\n };\n });\n}\n/**\n * Creates a store enhancer that applies middleware to the dispatch method\n * of the Redux store. This is handy for a variety of tasks, such as expressing\n * asynchronous actions in a concise manner, or logging every action payload.\n *\n * See `redux-thunk` package as an example of the Redux middleware.\n *\n * Because middleware is potentially asynchronous, this should be the first\n * store enhancer in the composition chain.\n *\n * Note that each middleware will be given the `dispatch` and `getState` functions\n * as named arguments.\n *\n * @param {...Function} middlewares The middleware chain to be applied.\n * @returns {Function} A store enhancer applying the middleware.\n */\n\n\nfunction applyMiddleware() {\n for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {\n middlewares[_key] = arguments[_key];\n }\n\n return function (createStore) {\n return function () {\n var store = createStore.apply(void 0, arguments);\n\n var _dispatch = function dispatch() {\n throw new Error(process.env.NODE_ENV === \"production\" ? formatProdErrorMessage(15) : 'Dispatching while constructing your middleware is not allowed. ' + 'Other middleware would not be applied to this dispatch.');\n };\n\n var middlewareAPI = {\n getState: store.getState,\n dispatch: function dispatch() {\n return _dispatch.apply(void 0, arguments);\n }\n };\n var chain = middlewares.map(function (middleware) {\n return middleware(middlewareAPI);\n });\n _dispatch = compose.apply(void 0, chain)(store.dispatch);\n return _objectSpread(_objectSpread({}, store), {}, {\n dispatch: _dispatch\n });\n };\n };\n}\n/*\n * This is a dummy function to check if the function name has been altered by minification.\n * If the function has been minified and NODE_ENV !== 'production', warn the user.\n */\n\n\nfunction isCrushed() {}\n\nif (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {\n warning('You are currently using minified code outside of NODE_ENV === \"production\". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');\n}\n\nexport { ActionTypes as __DO_NOT_USE__ActionTypes, applyMiddleware, bindActionCreators, combineReducers, compose, createStore };","/** A function that accepts a potential \"extra argument\" value to be injected later,\r\n * and returns an instance of the thunk middleware that uses that value\r\n */\nfunction createThunkMiddleware(extraArgument) {\n // Standard Redux middleware definition pattern:\n // See: https://redux.js.org/tutorials/fundamentals/part-4-store#writing-custom-middleware\n var middleware = function middleware(_ref) {\n var dispatch = _ref.dispatch,\n getState = _ref.getState;\n return function (next) {\n return function (action) {\n // The thunk middleware looks for any functions that were passed to `store.dispatch`.\n // If this \"action\" is really a function, call it and return the result.\n if (typeof action === 'function') {\n // Inject the store's `dispatch` and `getState` methods, as well as any \"extra arg\"\n return action(dispatch, getState, extraArgument);\n } // Otherwise, pass the action down the middleware chain as usual\n\n\n return next(action);\n };\n };\n };\n\n return middleware;\n}\n\nvar thunk = createThunkMiddleware(); // Attach the factory function so users can create a customized version\n// with whatever \"extra arg\" they want to inject into their thunks\n\nthunk.withExtraArgument = createThunkMiddleware;\nexport default thunk;","import { SET_CONTENT,\n FRONT_CANVAS, BACK_CANVAS,\n SET_STYLE,\n SET_SIDE,\n FRONT_ADD_FIGURE,\n BACK_ADD_FIGURE,\n UNDO_FRONT_CANVAS, UNDO_BACK_CANVAS, REDO_BACK_CANVAS, REDO_FRONT_CANVAS,\n HIDE_CANVAS_BORDER, ORGINAL_PICS, ACCEPT_TERMS, objectFS, objectBS,\n\n UNSELECT_GALLERY_CATEGORY, SET_GALLERY_SEARCH,\n LOAD_GALLERY_CATEGORIES, LOAD_GALLERY_CATEGORY_IMAGES,\n} from './actions';\n\nconst initCurrent = {\n frontCurrent: null,\n backCurrent: null\n};\n\nconst initFrontside = {\n frontEngraving: [],\n countFS: 0,\n};\n\nconst initBackside = {\n backEngraving: [],\n countBS: 0\n};\n\nconst initUndoRedo = {\n undoFront: [],\n undoBack: [],\n redoFront: [],\n redoBack: []\n};\n\nconst initOptions = {\n contentIs: 'Text',\n sideIs: 'front',\n // canvasBorder: {},\n orginalPics: [],\n userAccept: false,\n gallery: {\n selected: 0,\n images: [],\n categories: [],\n search: ''\n }\n};\n\nconst initStyle = {\n style: {\n fontSize: 40,\n lineHeight: 1.0,\n charSpacing: 50,\n textDecoration: false,\n textAlign: '',\n fontFamily: 'Abel',\n }\n};\n\nexport const optionsReducer = (state = initOptions, action) => {\n switch (action.type) {\n case SET_CONTENT:\n return {\n ...state,\n contentIs: action.payload\n };\n case SET_SIDE: {\n return {\n ...state,\n sideIs: action.payload\n };\n }\n\n case HIDE_CANVAS_BORDER: {\n let canvasBorder = [state.canvasBorder];\n canvasBorder = action.payload;\n return {\n ...state,\n canvasBorder\n };\n }\n\n case ACCEPT_TERMS: {\n let userAccept = [state.acceptTerms];\n userAccept = action.payload;\n return {\n ...state,\n userAccept\n };\n }\n\n case ORGINAL_PICS: {\n const orginalPics = action.payload;\n return {\n ...state,\n orginalPics\n };\n }\n\n case UNSELECT_GALLERY_CATEGORY: {\n return {\n ...state,\n gallery: {\n ...state.gallery,\n selected: 0,\n images: []\n }\n }\n }\n\n case LOAD_GALLERY_CATEGORIES: {\n return {\n ...state,\n gallery: {\n ...state.gallery,\n categories: action.payload\n }\n };\n }\n\n case LOAD_GALLERY_CATEGORY_IMAGES: {\n return {\n ...state,\n gallery: {\n ...state.gallery,\n images: action.payload\n }\n };\n }\n\n case SET_GALLERY_SEARCH: {\n return {\n ...state,\n gallery: {\n ...state.gallery,\n search: action.payload\n }\n }\n }\n\n default:\n return state;\n }\n};\n\n\nexport const currentFigureReducer = (state = initCurrent, action) => {\n\n switch (action.type) {\n case FRONT_CANVAS:\n let frontCurrent = [state.frontCurrent];\n frontCurrent = action.payload;\n return {\n ...state,\n frontCurrent\n };\n case BACK_CANVAS:\n let backCurrent = [state.backCurrent];\n backCurrent = action.payload;\n return {\n ...state,\n backCurrent\n };\n default:\n return state;\n }\n};\n\nexport const styleReducer = (state = initStyle, action) => {\n switch (action.type) {\n case SET_STYLE:\n let style = [state.style];\n style = action.payload;\n return {\n style\n };\n default:\n return state;\n }\n};\n\nexport const productReducer = (state = {}, action) => {\n switch (action.type) {\n case 'ADD_PRODUCT':\n const product = action.payload;\n return {\n product\n };\n default:\n return state;\n }\n};\n\nexport const frontsideReducer = (state = initFrontside, action) => {\n switch (action.type) {\n case FRONT_ADD_FIGURE:\n const frontEngraving = [ ...state.frontEngraving];\n frontEngraving.push(action.payload);\n return {\n ...state,\n frontEngraving\n };\n case objectFS:\n const countFS = action.payload;\n return {\n ...state,\n countFS\n };\n default:\n return state;\n }\n};\n\nexport const backsideReducer = (state = initBackside, action) => {\n switch (action.type) {\n case BACK_ADD_FIGURE:\n const backEngraving = [ ...state.backEngraving];\n backEngraving.push(action.payload);\n return {\n ...state,\n backEngraving\n };\n case objectBS:\n const countBS = action.payload;\n return {\n ...state,\n countBS\n };\n default:\n return state;\n }\n};\n\nexport const undoredoReducer = (state = initUndoRedo, action) => {\n switch (action.type) {\n case UNDO_FRONT_CANVAS:\n let undoFront = [state.undoFront];\n undoFront = action.payload;\n return {\n ...state,\n undoFront\n };\n case UNDO_BACK_CANVAS:\n let undoBack = [state.undoBack];\n undoBack = action.payload;\n return {\n ...state,\n undoBack\n };\n\n case REDO_FRONT_CANVAS:\n let redoFront = [state.redoFront];\n redoFront = action.payload;\n return {\n ...state,\n redoFront\n };\n case REDO_BACK_CANVAS:\n let redoBack = [state.redoBack];\n redoBack = action.payload;\n return {\n ...state,\n redoBack\n };\n default:\n return state;\n }\n};\n","import { createStore, combineReducers, applyMiddleware } from 'redux';\nimport thunkMiddleware from 'redux-thunk';\nimport { optionsReducer,\n currentFigureReducer,\n styleReducer,\n productReducer,\n frontsideReducer,\n backsideReducer,\n undoredoReducer\n} from './reducers';\n\n\n\nfunction lastAction(state = null, action) {\n return action;\n}\n\n\nconst rootReducer = combineReducers({\n optionsReducer, productReducer, frontsideReducer,\n backsideReducer, currentFigureReducer, styleReducer, undoredoReducer,\n lastAction\n});\n\nexport const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));\n\n// store.subscribe( () => {\n// console.log(store.getState().lastAction, 'last action');\n// console.log(store.getState());\n// });\n","/* eslint-disable prefer-destructuring */\n\nimport React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { addEngraving,\n fetchGalleryCategories, fetchGalleryImages,\n unselectGalleryCategory, setGallerySearch } from '../actions';\nimport { store } from '../store';\n\nclass GalleryOptions extends Component {\n\n constructor(props) {\n super(props);\n\n store.dispatch(fetchGalleryCategories);\n }\n\n addSVGToProduct = img => {\n\n fetch(img.url, { headers: {\n 'pragma': 'no-cache',\n 'cache-control': 'no-cache'\n }})\n .then(r => r.blob())\n .then(b => {\n const reader = new FileReader();\n reader.addEventListener('load', evt => {\n const side = this.props.sideIs === 'front' ? 'FRONT_ADD_FIGURE' : 'BACK_ADD_FIGURE';\n\n this.props.addEngraving([side, { url: evt.target.result }]);\n });\n reader.readAsText(b);\n });\n }\n\n showPreview = img => {\n let previewContainer = document.getElementById('gallery-preview');\n previewContainer.style.zIndex = '3';\n previewContainer.querySelector('img').src = img.url;\n previewContainer.querySelector('span').innerHTML = img.name;\n\n previewContainer.classList.add('show');\n }\n\n hidePreview = () => {\n document.getElementById('gallery-preview').classList.remove('show');\n }\n\n renderImages = () => {\n let images = this.props.images.filter(img => {\n if (this.props.search === '') return true;\n let keywords = this.props.search.split(/, /);\n return keywords.every(tested => img.keywords.includes(tested.trim().toLowerCase()));\n });\n\n if (!images.length) {\n return \n
\n \n document.getElementById('content').style.zIndex = '1' }>X
\n \n
\n \n akzeptierte Dateiformate: jpg, png, jpeg, svg\n Mindestabmessungen: 600x600 Pixel\n Maximalabmessungen: 2500x2500 Pixel\n
\n \n \n this.checkImage(e)}\n onClick={ event => event.target.value = null }/>\n
\n {this.state.showCanvas? : null }\n {this.state.showCanvas? \n Kontrast\n {\n if (this.state.invert === true) {\n this.invertColor(e);\n } else this.reInverColor(e);\n this.setState({ range: e.target.value });\n }}\n step=\"1\"/>\n
: null }\n \n\n {this.state.showCanvas? {\n if (this.state.invert === true) {\n this.reInverColor();\n this.setState({ invert: !this.state.invert });\n } else {\n this.invertColor();\n }\n this.setState({ invert: !this.state.invert });\n }} >Invertieren : null }\n {this.state.showCanvas? {\n this.setState({ showCanvas: false });\n }} >Löschen : null }\n {this.state.showCanvas? {\n this.props.addoriginalPics([this.state.userImages, this.state.userSVG]);\n this.props.addEngraving([addFigure, this.state.invertedImageUrl]);\n this.props.imageOrtext('Text');\n document.getElementById('content').style.zIndex = '1';\n }\n }>Hinzufügen : null }\n
\n \n akzeptierte Dateiformate: jpg, png, jpeg, svg\n Mindestabmessungen: 600x600 Pixel\n Maximalabmessungen: 2500x2500 Pixel\n \n Ich habe das Recht, das Bild für kommerzielle Zwecke zu\n verwenden und verletze keine Rechte Dritter mit der Nutzung des Bildes.\n \n \n Im Fall einer Rechtsverletzung wird WeLoveLaser den Rechteinhaber mit sämtlichen Forderungen\n an mich verweisen.\n \n \n Mir ist bekannt, dass die unrechtmäßige Verwendung, von durch Dritte geschützen Motiven,\n kein Kavaliersdelikt ist und mit hohen Geldstrafen geahndet werden kann.\n \n \n Wir behalten uns vor die Produktion von gestalteten Produkten, die offensichtlich markenrechtlich\n relevante Bestandteile beinhalten, abzulehnen.\n \n
\n this.props.acceptTerms(true)}>\n \n this.checkImage(e)}/>\n
\n Nothing found
;\n }\n\n return images.map((img) => {\n return \n\n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n const { sideIs, gallery: {selected, images, categories, search}} = state.optionsReducer;\n\n return {\n sideIs, selected, images, categories, search\n }\n};\n\nconst mapDispatchToProps = dispatch => ({\n unselectGalleryCategory: () => dispatch(unselectGalleryCategory()),\n addEngraving: data => dispatch(addEngraving(data)),\n setGallerySearch: (query) => dispatch(setGallerySearch(query)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(GalleryOptions);\n","import React, { Component } from 'react';\nimport '../style/content';\nimport { connect } from 'react-redux';\nimport TextOptions from './TextOptions';\nimport ImageOptions from './ImageOptions';\nimport GalleryOptions from './GalleryOptions';\n\n\nclass Content extends Component {\n\n render() {\n return(\n \n ![\"\"](\"\")
\n \n
\n\n \n
\n \n document.getElementById('content').style.zIndex = '1' }>X
\n\n { shouldRenderImages &&\n \n \n {\n this.hidePreview();\n this.props.setGallerySearch(e.target.value);\n }}\n />\n \n
\n }\n\n \n { shouldRenderCategories && this.props.categories.map((category) => {\n return store.dispatch(fetchGalleryImages(category.id))}\n key={category.id}\n >\n {category.name}\n \n })\n }\n\n { shouldRenderImages &&\n this.renderImages()\n }\n\n {\n !shouldRenderCategories && !shouldRenderImages &&\n
\n Category is empty
\n }\n \n { (() => {\n switch(this.props.contentIs) {\n case 'Text': return
\n );\n }\n}\n\nconst mapStateToProps = state => {\n const { contentIs } = state.optionsReducer;\n return {\n contentIs\n };\n};\n\n\n\nexport default connect(mapStateToProps)(Content);\n","function _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\n/*!\n * reactjs-popup v1.5.0\n * (c) 2019-present Youssouf EL AZIZI \n \n
);\n }\n}\n\nconst mapStateToProps = state => {\n const { frontEngraving } = state.frontsideReducer;\n const frontImage = state.productReducer.product.front_image;\n const { sideIs } = state.optionsReducer;\n const { canvasBorder } = state.optionsReducer;\n const { product } = state.productReducer;\n const { frontCurrent } = state.currentFigureReducer;\n\n return {\n frontEngraving, frontImage, sideIs, canvasBorder, product, frontCurrent\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n undoFrontSide: undoFun => dispatch(undoFrontSide(undoFun)),\n redoFrontSide: undoFun => dispatch(redoFrontSide(undoFun)),\n selectCurrent: current => dispatch(selectCurrent(current)),\n setStyle: fs => dispatch(setStyle(fs)),\n imageOrtext: data => dispatch(imageOrtext(data)),\n countObjectFS: data => dispatch(countObjectFS(data)),\n});\n\nexport default React.memo(connect(mapStateToProps, mapDispatchToProps)(FrontSide));\n","/* eslint-disable no-unused-expressions */\n/* eslint-disable no-sequences */\n/* eslint-disable prefer-destructuring */\nimport React, { Component }from 'react';\nimport { connect } from 'react-redux';\nimport { undoBackSide, redoBackSide, selectCurrent, setStyle,\n countObjectBS, imageOrtext } from '../actions';\nimport { fabric } from 'fabric';\nimport { SVGFilter } from './SVGFilter';\n\nclass BackSide extends Component {\n constructor(props) {\n super(props);\n this.state = {\n canvasHistory: {\n state: [],\n currentStateIndex: -1,\n undoStatus: false,\n redoStatus: false,\n undoFinishedStatus: true,\n redoFinishedStatus: true,\n },\n };\n this.backcanvas = React.createRef();\n }\n\n componentDidMount() {\n const img = new Image();\n img.src = this.props.product.back_image;\n let left , top, width, height;\n if (this.props.product.workArea.back) {\n left = this.props.product.workArea.back.left;\n top = this.props.product.workArea.back.top;\n width = this.props.product.workArea.back.width;\n height = this.props.product.workArea.back.height;\n } else {\n left , top = 0 ,\n width, height = '100%';\n }\n\n this.backcanvas.current = new fabric.Canvas(this.backcanvas.current, {\n preserveObjectStacking: true,\n height: 652,\n width: 670,\n });\n this.backcanvas.current.setBackgroundImage(this.props.product.back_image, () => this.backcanvas.current.renderAll());\n this.backcanvas.current.on('object:removed', () => {\n this.props.countObjectBS(this.backcanvas.current.getObjects().length -1);\n });\n this.backcanvas.current.on('object:added', () => {\n this.props.countObjectBS(this.backcanvas.current.getObjects().length -1);\n this.updateHistory();\n this.updateTextOptions();\n });\n this.backcanvas.current.on('mouse:down', options => {\n if (options.target && options.target.text) {\n this.props.imageOrtext('Text');\n this.updateTextOptions();\n }\n });\n\n this.backcanvas.current.on('object:modified', () => {\n this.updateHistory();\n this.updateTextOptions();\n });\n var out_frame = new fabric.Rect({\n width: width,\n height: height,\n top: top,\n left: left,\n fill: 'rgba(0, 0, 0, 0)',\n selectable: false,\n stroke: 'rgba(0,0,0,1)',\n strokeWidth: 1,\n evented: false,\n id: 'out_frame'\n });\n this.backcanvas.current.add(out_frame);\n this.props.undoBackSide(this.undo);\n this.props.redoBackSide(this.redo);\n this.props.selectCurrent(['BACK_CANVAS', this.backcanvas.current]);\n }\n\n updateTextOptions = () => {\n if (this.backcanvas.current.getActiveObject()) {\n var obj = this.backcanvas.current.getActiveObject();\n const style = {\n fontFamily: obj.fontFamily,\n fontSize: obj.fontSize,\n lineHeight: obj.lineHeight,\n textAlign: obj.textAlign,\n textDecoration: obj.underline,\n charSpacing: obj.charSpacing\n };\n this.props.setStyle(style);\n }\n }\n\n updateHistory = () => {\n const { canvasHistory } = this.state;\n if (this.state.canvasHistory.undoStatus === true || this.state.canvasHistory.redoStatus === true) {\n console.log('Do not do anything, this got triggered automatically while the undo and redo actions were performed');\n } else {\n const jsonData = this.backcanvas.current.toJSON();\n const canvasAsJson = JSON.stringify(jsonData);\n\n // NOTE: This is to replace the canvasHistory when it gets rewritten 20180912:Alevale\n if (canvasHistory.currentStateIndex < canvasHistory.state.length - 1) {\n\n const indexToBeInserted = canvasHistory.currentStateIndex + 1;\n canvasHistory.state[indexToBeInserted] = canvasAsJson;\n const elementsToKeep = indexToBeInserted + 1;\n console.log(`History rewritten, preserved ${elementsToKeep} items`);\n canvasHistory.state = canvasHistory.state.splice(0, elementsToKeep);\n\n // NOTE: This happens when there is a new item pushed to the canvasHistory (normal case) 20180912:Alevale\n } else {\n // console.log('push to canvasHistory');\n canvasHistory.state.push(canvasAsJson);\n }\n\n canvasHistory.currentStateIndex = canvasHistory.state.length - 1;\n }\n };\n\nundo = () => {\n const { canvasHistory } = this.state;\n if (canvasHistory.currentStateIndex - 1 === -1) {\n console.log('do not do anything anymore, you are going far to the past, before creation, there was nothing');\n return;\n }\n\n if (canvasHistory.undoFinishedStatus) {\n canvasHistory.undoFinishedStatus = false;\n canvasHistory.undoStatus = true;\n this.backcanvas.current.loadFromJSON(canvasHistory.state[canvasHistory.currentStateIndex - 1], () => {\n this.backcanvas.current.renderAll();\n canvasHistory.undoStatus = false;\n canvasHistory.currentStateIndex--;\n canvasHistory.undoFinishedStatus = true;\n });\n }\n};\n\nredo = () => {\n const { canvasHistory } = this.state;\n\n if (canvasHistory.currentStateIndex + 1 === canvasHistory.state.length) {\n console.log('do not do anything anymore, you do not know what is after the present, do not mess with the future');\n return;\n }\n if (canvasHistory.redoFinishedStatus) {\n canvasHistory.redoFinishedStatus = false;\n canvasHistory.redoStatus = true;\n this.backcanvas.current.loadFromJSON(canvasHistory.state[canvasHistory.currentStateIndex + 1], () => {\n this.backcanvas.current.renderAll();\n canvasHistory.redoStatus = false;\n canvasHistory.currentStateIndex++;\n canvasHistory.redoFinishedStatus = true;\n });\n }\n};\n\naddEng = () => {\n let left , top, width, height;\n if (this.props.product.workArea) {\n left = this.props.product.workArea.back.left;\n top = this.props.product.workArea.back.top;\n width = this.props.product.workArea.back.width;\n height = this.props.product.workArea.back.height;\n } else {\n // eslint-disable-next-line no-sequences\n left , top = 0;\n width = 670; // defaulut image size from welovelaser\n height = 652; // /////////////////////////////////\n }\n var out_frame = new fabric.Rect({\n width: width,\n height: height,\n top: top,\n left: left,\n absolutePositioned: true\n });\n const { engColor } = this.props.product;\n const { backEngraving } = this.props;\n const last = backEngraving[backEngraving.length -1];\n if (typeof(last) === 'string') {\n var text = new fabric.IText(last, {\n top: top,\n left: left,\n objecttype: 'text',\n fontFamily: 'Abel',\n lineHeight: 1.0,\n charSpacing: 50,\n fill: `rgb(${engColor.r},${ engColor.g}, ${engColor.b})`,\n borderColor: '#ff1212',\n cornerColor: '#ff5454',\n clipPath: out_frame\n });\n this.backcanvas.current.add(text);\n text.setCoords();\n this.backcanvas.current.setActiveObject(text);\n this.backcanvas.current.renderAll(text);\n this.props.setStyle({\n fontSize: 40,\n lineHeight: 1,\n charSpacing: 50,\n textDecoration: false,\n textAlign: '',\n fontFamily: 'Abel',\n });\n } else if(last.url.includes('\n \n
);\n}\n}\n\nconst mapStateToProps = state => {\n const { product } = state.productReducer;\n const { backEngraving } = state.backsideReducer;\n const { sideIs } = state.optionsReducer;\n const { canvasBorder } = state.optionsReducer;\n return {\n backEngraving, sideIs, canvasBorder, product\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n undoBackSide: undoFun => dispatch(undoBackSide(undoFun)),\n redoBackSide: undoFun => dispatch(redoBackSide(undoFun)),\n setStyle: fs => dispatch(setStyle(fs)),\n selectCurrent: current => dispatch(selectCurrent(current)),\n imageOrtext: data => dispatch(imageOrtext(data)),\n countObjectBS: data => dispatch(countObjectBS(data)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(BackSide);\n","\n\nimport React, { Component } from 'react';\nimport Popup from 'reactjs-popup';\nimport FrontSide from './FrontSide';\nimport BackSide from './BackSide';\nimport { connect } from 'react-redux';\nimport { setSide, hideCanvasBoeder } from '../actions';\nimport logo from '../Logos/wwl-logo.svg';\nimport { ReactSVG } from 'react-svg';\nimport { AddToChart } from './AddToChart';\n\n\n\nconst Spinner = () => {\n return( \n this.props.setSide('back') : null} >VARIANTE 2
\n \n \n this.props.setSide('front')} >VARIANTE 1
\n \n Gravurbereich: {this.props.sideIs === 'front'? `${this.props.product.workArea.front.workAreaWidth} x ${this.props.product.workArea.front.workAreaHeight} cm` : `${this.props.product.workArea.back.workAreaWidth} x ${this.props.product.workArea.back.workAreaHeight} cm` }\n
\n \n\n \n
\n \n
\n \n Ihre Bestellung wird bearbeitet
\n \n
\n \n );\n }\n}\nconst mapDispatchToProps = dispatch => ({\n setSide: side => dispatch(setSide(side)),\n hideCanvasBoeder: border => dispatch(hideCanvasBoeder(border)),\n});\n\nconst mapStateToProps = state => {\n // orginal pics without manipulate pixels\n const { sideIs, orginalPics } = state.optionsReducer;\n const { frontCurrent, backCurrent } = state.currentFigureReducer;\n const { back_image, authtoken } = state.productReducer.product;\n const { product } = state.productReducer;\n const { countFS } = state.frontsideReducer;\n const { countBS } = state.backsideReducer;\n return {\n sideIs, back_image, frontCurrent, backCurrent, orginalPics, authtoken, product, countFS, countBS\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Engraving);\n","import React from 'react';\nimport WeLoveLaser_Logo from './Logos/WeLoveLaser_Logo';\nimport { ReactSVG } from 'react-svg';\n\nvar ua = window.navigator.userAgent;\nvar isIE = /MSIE|Trident/.test(ua);\nif ( isIE ) {\n alert('Dieser Browser wird nicht unterstützt, bitte benutzen Sie Chrome, Firefox, Edge, Opera oder Safari');\n window.location.href = 'https://www.welovelaser.de/';\n}\n\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n render() {\n if (this.state.hasError) {\n return \n
\n \n \n \n \n
\n
\n | Produktpreis: | {euro.format(this.props.product.price)} | \n
| Gravur Variante 1: | { this.props.product.front_side_price > 0 ? euro.format(this.props.product.front_side_price) : '' } | \n
| Gravur Variante 2: | { this.props.product.back_side_price > 0 ? euro.format(this.props.product.back_side_price) : '' } | \n
| inkl. 19% MwSt. zzgl. Versandkosten | \n|
\n
;\n }\n\n return this.props.children;\n }\n}\nexport default ErrorBoundary;","import React, { Component } from 'react';\n\nclass PopUp extends Component {\n render() {\n return (\n \n Leider ist ein Fehler aufgetreten. Bitte versuchen Sie die Seite in einem anderen Browser zu laden\n
\n\n
\n );\n };\n}\nexport default PopUp;\n","import React, { Component } from 'react';\nimport Tools from './ChildComponents/Tools';\nimport Content from './ChildComponents/Content';\nimport Engraving from './ChildComponents/Engraving';\nimport ErrorBoundary from './ErrorBoundary';\nimport PopUp from './ChildComponents/PopUp';\nimport './style/fonts.css';\n\nclass App extends Component {\n constructor(props) {\n super(props);\n const { innerWidth: width, innerHeight: height } = window;\n this.state = {\n showPopup: innerWidth < 500 ? true : false,\n innerWidth: innerWidth,\n innerHeight: innerHeight\n };\n }\n\n toggleOffPopup() {\n this.setState({\n showPopup: false\n });\n }\n\n render() {\n return (\n \n Die Funktion und Darstellung des Konfigurators kann auf Deinem Gerät eingeschränkt sein.
\n Bitte nutze für die Gravurgestaltung ein Tablet oder Computer.\n
\n \n \n Bitte nutze für die Gravurgestaltung ein Tablet oder Computer.\n
\n
\n );\n }\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '../Components/App';\nimport { Provider } from 'react-redux';\nimport { store } from '../Components/store';\n\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const node = document.getElementById('rootFromRuby');\n const json_data = node.getAttribute('data');\n const front_image = node.getAttribute('front_image');\n const back_image = node.getAttribute('back_image');\n const authtoken = node.getAttribute('authtoken');\n node.remove();\n const data = JSON.parse(json_data);\n function hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n }\n\n const engColor = hexToRgb(data.engraving_color);\n const { title, id, woo_id } = data;\n let { front_side_price, back_side_price, price } = data;\n const workArea = data.work_area;\n back_side_price = parseFloat(back_side_price).toFixed(2);\n front_side_price = parseFloat(front_side_price).toFixed(2);\n price = parseFloat(price).toFixed(2);\n const product = { title,woo_id,id,workArea, engColor, front_image, back_image, authtoken , front_side_price, back_side_price, price };\n store.dispatch({\n type: 'ADD_PRODUCT',\n payload: product\n });\n ReactDOM.render(\n \n \n \n
\n \n
\n \n
\n \n
\n