\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {internalPaths.map((a, i) => {\r\n return (\r\n selectPath(a.id)} key={i}>\r\n
\r\n );\r\n })}\r\n
\r\n \r\n );\r\n};\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Row, Col, Label } from \"reactstrap\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport ColorPickerFacade from \"../../../../../components/UI/Buttons/ColorPickerFacade\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport JirangoFontPicker from \"../../../../../fonts/FontPicker\";\r\nimport {\r\n deepClone,\r\n setValueToNestedObject,\r\n} from \"../../../../../helpers/objectHelper\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { templateHelper } from \"../../helpers/templateHelper\";\r\nimport JirangoSwitch from \"../../../../../components/UI/Switch/JirangoSwitch\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport { FontWeightPicker } from \"../../../../../fonts/FontWeightPicker/FontWeightPicker\";\r\nimport MenuEditDialog from \"../../../menu/components/MenuEditDialog\";\r\nimport Button from \"reactstrap/lib/Button\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nclass MenuSettings extends React.Component {\r\n state = {\r\n activePointer: \"normal\",\r\n };\r\n handleUpdate = (template) => {\r\n const { dispatch } = this.props;\r\n dispatch(templateActions.softUpdate(template));\r\n };\r\n handleChange = (color, e, path, fallbackUnit = null) => {\r\n const { template } = this.props;\r\n const names = path.split(\".\");\r\n let templateCopy = deepClone(template);\r\n let value = templateHelper.getValueFromInput(e, color);\r\n let unit = templateHelper.getUnit(templateCopy, names);\r\n\r\n if (!path.includes(\"active\")) {\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n templateCopy.content = deepClone(\r\n setValueToNestedObject(names, value, templateCopy.content)\r\n );\r\n } else {\r\n templateCopy.content.menu[\"&:active\"][names[2]] = value;\r\n }\r\n this.handleUpdate(templateCopy);\r\n };\r\n handleUnitChange = (unit, path) => {\r\n const { template } = this.props;\r\n const names = path.split(\".\");\r\n let templateCopy = deepClone(template);\r\n const value = templateHelper.getValueWithoutUnit(templateCopy, names);\r\n templateCopy.content = setValueToNestedObject(\r\n names,\r\n value + unit,\r\n templateCopy.content\r\n );\r\n\r\n if (unit === \"auto\") {\r\n templateCopy.content[names[0]][names[1]] = unit;\r\n }\r\n this.handleUpdate(templateCopy);\r\n };\r\n togglePointer = (pointer) => {\r\n this.setState({ activePointer: pointer });\r\n };\r\n render() {\r\n const { template, device, isMenuModalOpen } = this.props;\r\n if (template === undefined) return null;\r\n return (\r\n \r\n {isMenuModalOpen ?
: null}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(\r\n null,\r\n template.content.menu.display === \"none\" ||\r\n template.content.menu.display === \"unset\"\r\n ? \"initial\"\r\n : \"none\",\r\n \"menu.display\"\r\n )\r\n }\r\n isChecked={template.content.menu.display === \"initial\"}\r\n />\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(\r\n null,\r\n \"menu.position\",\r\n template.content.menu.position === \"unset\"\r\n ? \"fixed\"\r\n : \"unset\"\r\n )\r\n }\r\n isChecked={template.content.menu.position === \"fixed\"}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.props.dispatch(templateActions.toggleMenuModal())\r\n }>\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"menu.&:active.color\")\r\n }\r\n path=\"menuActive.color\"\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"menu.&:active.backgroundColor\")\r\n }\r\n path=\"menuActive.backgroundColor\"\r\n />\r\n
\r\n \r\n \r\n \r\n this.setAttribute('left', \"menu.justifyContent\")\r\n }\r\n >\r\n \r\n this.setAttribute('center', \"menu.justifyContent\")\r\n }\r\n >\r\n \r\n this.setAttribute('right', \"menu.justifyContent\")\r\n }\r\n >\r\n \r\n \r\n
*/}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.client.frame.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.client.frame.fontSize\"}\r\n label=\"FontSize\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.client.frame.borderRadius\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.client.frame.borderRadius\"}\r\n label=\"BorderRadius\"\r\n />\r\n \r\n \r\n \r\n
\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.client.question.minWidth\")}\r\n steps={1}\r\n max={800}\r\n min={1}\r\n path={\"interaction.client.question.minWidth\"}\r\n label=\"QuestionMinWidth\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.client.question.maxWidth\")}\r\n steps={1}\r\n max={800}\r\n min={1}\r\n path={\"interaction.client.question.maxWidth\"}\r\n label=\"QuestionMaxWidth\"\r\n />\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.client.sendButton.color\")\r\n }\r\n path=\"interaction.client.sendButton.color\"\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.client.sendButton.backgroundColor\")\r\n }\r\n path=\"interaction.client.sendButton.backgroundColor\"\r\n />\r\n \r\n
\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.client.sendButton.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.client.sendButton.fontSize\"}\r\n label=\"FontSize\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.client.sendButton.borderRadius\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.client.sendButton.borderRadius\"}\r\n label=\"BorderRadius\"\r\n />\r\n \r\n\r\n\r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, `chart.colors.${key}`)\r\n }\r\n path={`chart.colors-${key}`}\r\n />\r\n \r\n
\r\n )\r\n }\r\n\r\n }\r\n return ret;\r\n }\r\n render() {\r\n const { template } = this.props;\r\n if (template === undefined) return null;\r\n const palette = template.content.chart.colors;\r\n const alpha = ['A', 'B', 'C', 'D', 'E']\r\n return (\r\n \r\n {this.renderColors(palette, template)}\r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, `chart.textflowColor`)\r\n }\r\n path={`chart.textflowColor`}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, `chart.textflowBgColor`)\r\n }\r\n path={`chart.textflowBgColor`}\r\n />\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert,\r\n template: state.template.template\r\n };\r\n}\r\nexport default connect(mapStateToProps)(ChartSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Row, Col, Label } from \"reactstrap\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport ColorPickerFacade from \"../../../../../components/UI/Buttons/ColorPickerFacade\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport {\r\n deepClone,\r\n setValueToNestedObject\r\n} from \"../../../../../helpers/objectHelper\";\r\nimport { templateHelper } from \"../../helpers/templateHelper\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\n\r\nclass ScrollbarSettings extends React.Component {\r\n handleUpdate = template => {\r\n const { dispatch } = this.props;\r\n dispatch(templateActions.softUpdate(template));\r\n };\r\n handleChange = (color, e, path, fallbackUnit = null) => {\r\n const { template } = this.props;\r\n const names = path.split(\".\");\r\n let templateCopy = deepClone(template);\r\n let value = templateHelper.getValueFromInput(e, color);\r\n let unit = templateHelper.getUnit(templateCopy, names);\r\n if (!path.includes('hover')) {\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n templateCopy.content = deepClone(\r\n setValueToNestedObject(names, value, templateCopy.content)\r\n );\r\n }\r\n else {\r\n templateCopy.content.a[\"&:hover\"][names[2]] = value;\r\n }\r\n this.handleUpdate(templateCopy);\r\n };\r\n handleUnitChange = (unit, path) => {\r\n const { template } = this.props;\r\n const names = path.split(\".\");\r\n let templateCopy = deepClone(template);\r\n const value = templateHelper.getValueWithoutUnit(templateCopy, names);\r\n\r\n templateCopy.content = setValueToNestedObject(\r\n names,\r\n value + unit,\r\n templateCopy.content\r\n );\r\n\r\n if (unit === \"auto\") {\r\n templateCopy.content[names[0]][names[1]] = unit;\r\n }\r\n this.handleUpdate(templateCopy);\r\n };\r\n render() {\r\n const { template } = this.props;\r\n if (template === undefined) return null;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"scrollbar.thumbBackgroundColor\")}\r\n path=\"scrollbar.thumbBackgroundColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"scrollbar.thumbColorHover\")}\r\n path=\"scrollbar.thumbColorHover\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"scrollbar.trackBackgroundColor\")}\r\n path=\"scrollbar.trackBackgroundColor\"\r\n />\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.connections.backgroundColor\")\r\n }\r\n path=\"interaction.connections.backgroundColor\"\r\n />\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.connections.color\")\r\n }\r\n path=\"interaction.connections.color\"\r\n />\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n this.setBackgroundImage(template.content.interaction.connections.backgroundUrl\r\n )\r\n }\r\n alt=\"\"\r\n src={template.content.interaction.connections.backgroundUrl}\r\n />\r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.connections.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.connections.fontSize\"}\r\n label=\"FontSize\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.connections.borderRadius\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.connections.borderRadius\"}\r\n label=\"BorderRadius\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.connections.borderWidth\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.connections.borderWidth\"}\r\n label=\"BorderWidth\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.connections.borderColor\")\r\n }\r\n path=\"interaction.connections.borderColor\"\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.content.backgroundColor\")\r\n }\r\n path=\"interaction.agenda.content.backgroundColor\"\r\n />\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n this.setBackgroundImage(template.content.interaction.agenda.content.backgroundUrl\r\n )\r\n }\r\n alt=\"\"\r\n src={template.content.interaction.agenda.content.backgroundUrl}\r\n />\r\n )}\r\n \r\n
\r\n
\r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.content.padding\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.content.padding\"}\r\n label=\"OuterFramePadding\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.content.margin\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.content.margin\"}\r\n label=\"OuterFrameMargin\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.content.borderRadius\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.content.borderRadius\"}\r\n label=\"OuterFrameBorderRadius\"\r\n />\r\n\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.title.color\")\r\n }\r\n path=\"interaction.agenda.title.color\"\r\n />\r\n \r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.title.marginLeft\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.title.marginLeft\"}\r\n label=\"MarginLeft\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.title.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.title.fontSize\"}\r\n label=\"TitleFontSize\"\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.default.frame.backgroundColor\")\r\n }\r\n path=\"interaction.agenda.row.default.frame.backgroundColor\"\r\n />\r\n \r\n
\r\n
\r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.default.frame.borderColor\")\r\n }\r\n path=\"interaction.agenda.row.default.frame.borderColor\"\r\n />\r\n \r\n
\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.default.frame.borderWidth\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.frame.borderWidth\"}\r\n label=\"FrameBorderWidth\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.default.frame.borderRadius\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.frame.borderRadius\"}\r\n label=\"FrameBorderRadius\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.default.frame.padding\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.frame.padding\"}\r\n label=\"FramePadding\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.default.frame.marginTop\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.frame.marginTop\"}\r\n label=\"FrameMarginTop\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.default.title.color\")\r\n }\r\n path=\"interaction.agenda.row.default.title.color\"\r\n />\r\n \r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.default.title.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.row.default.title.fontSize\"}\r\n label=\"TitleFontSize\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.default.text.color\")\r\n }\r\n path=\"interaction.agenda.row.default.text.color\"\r\n />\r\n \r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.default.text.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.row.default.text.fontSize\"}\r\n label=\"TextFontSize\"\r\n />\r\n \r\n \r\n\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.active.frame.backgroundColor\")\r\n }\r\n path=\"interaction.agenda.row.active.frame.backgroundColor\"\r\n />\r\n \r\n
\r\n
\r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.active.frame.borderColor\")\r\n }\r\n path=\"interaction.agenda.row.active.frame.borderColor\"\r\n />\r\n \r\n
\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.active.frame.borderWidth\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.active.frame.borderWidth\"}\r\n label=\"FrameBorderWidth\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.active.frame.borderRadius\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.active.frame.borderRadius\"}\r\n label=\"FrameBorderRadius\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.active.frame.padding\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.active.frame.padding\"}\r\n label=\"FramePadding\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.active.frame.marginTop\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.active.frame.marginTop\"}\r\n label=\"FrameMarginTop\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.active.title.color\")\r\n }\r\n path=\"interaction.agenda.row.active.title.color\"\r\n />\r\n \r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.active.title.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.row.active.title.fontSize\"}\r\n label=\"TitleFontSize\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.active.text.color\")\r\n }\r\n path=\"interaction.agenda.row.active.text.color\"\r\n />\r\n \r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.active.text.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.row.active.text.fontSize\"}\r\n label=\"TextFontSize\"\r\n />\r\n \r\n \r\n\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.passed.frame.backgroundColor\")\r\n }\r\n path=\"interaction.agenda.row.passed.frame.backgroundColor\"\r\n />\r\n \r\n
\r\n
\r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.passed.frame.borderColor\")\r\n }\r\n path=\"interaction.agenda.row.passed.frame.borderColor\"\r\n />\r\n \r\n
\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.passed.frame.borderWidth\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.passed.frame.borderWidth\"}\r\n label=\"FrameBorderWidth\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.passed.frame.borderRadius\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.passed.frame.borderRadius\"}\r\n label=\"FrameBorderRadius\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.passed.frame.padding\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.passed.frame.padding\"}\r\n label=\"FramePadding\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.passed.frame.marginTop\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.passed.frame.marginTop\"}\r\n label=\"FrameMarginTop\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.passed.title.color\")\r\n }\r\n path=\"interaction.agenda.row.passed.title.color\"\r\n />\r\n \r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.passed.title.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.row.passed.title.fontSize\"}\r\n label=\"TitleFontSize\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.agenda.row.passed.text.color\")\r\n }\r\n path=\"interaction.agenda.row.passed.text.color\"\r\n />\r\n \r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.agenda.row.passed.text.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.agenda.row.default.row.passed.text.fontSize\"}\r\n label=\"TextFontSize\"\r\n />\r\n \r\n \r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.primaryColor\")\r\n }\r\n path=\"interaction.chat.primaryColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.secondaryColor\")\r\n }\r\n path=\"interaction.chat.secondaryColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.badgePillColor\")\r\n }\r\n path=\"interaction.chat.badgePillColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.sendButtonColor\")\r\n }\r\n path=\"interaction.chat.sendButtonColor\"\r\n />\r\n \r\n
\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.container.borderColor\")\r\n }\r\n path=\"interaction.chat.container.borderColor\"\r\n />\r\n \r\n
\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.chat.container.borderRadius\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.chat.container.borderRadius\"}\r\n label=\"BorderRadius\"\r\n />\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.chat.container.borderWidth\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.chat.container.borderWidth\"}\r\n label=\"BorderWidth\"\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.header.background\")\r\n }\r\n path=\"interaction.chat.header.background\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.header.borderColor\")\r\n }\r\n path=\"interaction.chat.header.borderColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.header.color\")\r\n }\r\n path=\"interaction.chat.header.color\"\r\n />\r\n \r\n
\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.chat.header.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.chat.header.fontSize\"}\r\n label=\"FontSize\"\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.content.background\")\r\n }\r\n path=\"interaction.chat.content.background\"\r\n />\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.messages.color\")\r\n }\r\n path=\"interaction.chat.messages.color\"\r\n />\r\n \r\n
\r\n {/*
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.chat.messages.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.chat.messages.fontSize\"}\r\n label=\"FontSize\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.messages.sender.color\")\r\n }\r\n path=\"interaction.chat.messages.sender.color\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.messages.sender.thumbColor\")\r\n }\r\n path=\"interaction.chat.messages.sender.thumbColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.messages.sender.backgroundColor\")\r\n }\r\n path=\"interaction.chat.messages.sender.backgroundColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.messages.receiver.color\")\r\n }\r\n path=\"interaction.chat.messages.receiver.color\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.messages.receiver.thumbColor\")\r\n }\r\n path=\"interaction.chat.messages.receiver.thumbColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.messages.receiver.backgroundColor\")\r\n }\r\n path=\"interaction.chat.messages.receiver.backgroundColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.footer.background\")\r\n }\r\n path=\"interaction.chat.footer.background\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.footer.borderColor\")\r\n }\r\n path=\"interaction.chat.footer.borderColor\"\r\n />\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.footer.inputColor\")\r\n }\r\n path=\"interaction.chat.footer.inputColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.chat.footer.inputBackground\")\r\n }\r\n path=\"interaction.chat.footer.inputBackground\"\r\n />\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.exhibitor.frame.background\")\r\n }\r\n path=\"interaction.exhibitor.frame.background\"\r\n />\r\n \r\n
\r\n this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.exhibitor.frame.borderRadius\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.exhibitor.frame.borderRadius\"}\r\n label=\"BorderRadius\"\r\n />\r\n this.handleChange(color, e, path, extraParam)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.exhibitor.frame.padding\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.exhibitor.frame.padding\"}\r\n label=\"Padding\"\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.exhibitor.logo.background\")\r\n }\r\n path=\"interaction.exhibitor.logo.background\"\r\n />\r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.exhibitor.title.color\")\r\n }\r\n path=\"interaction.exhibitor.title.color\"\r\n />\r\n \r\n
\r\n\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.exhibitor.title.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.exhibitor.title.fontSize\"}\r\n label=\"FontSize\"\r\n />\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"interaction.exhibitor.subtitle.color\")\r\n }\r\n path=\"interaction.exhibitor.subtitle.color\"\r\n />\r\n \r\n
\r\n\r\n
this.handleChange(color, e, path)}\r\n units={[\"px\", \"rem\", \"%\"]}\r\n activeUnit={templateHelper.getUnit(template, \"interaction.exhibitor.subtitle.fontSize\")}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"interaction.exhibitor.subtitle.fontSize\"}\r\n label=\"FontSize\"\r\n />\r\n\r\n \r\n \r\n
\r\n\r\n\r\n
\r\n \r\n
}\r\n\r\n description=\"Background\"\r\n >\r\n
\r\n \r\n
}\r\n\r\n description=\"Header\"\r\n >\r\n
\r\n \r\n
}description=\"Menu\">\r\n
\r\n \r\n
}\r\n description=\"Content\"\r\n >\r\n
\r\n \r\n
}\r\n description=\"Footer\"\r\n >\r\n
\r\n \r\n
\r\n\r\n
}description=\"Title\">\r\n
\r\n \r\n
}\r\n description=\"Subtitle\"\r\n >\r\n
\r\n \r\n
}\r\n description=\"InputLabel\"\r\n >\r\n
\r\n \r\n
}\r\n description=\"Paragraphs\"\r\n >\r\n
\r\n \r\n
}description=\"Field\">\r\n
\r\n \r\n
\r\n
}\r\n description=\"Button\"\r\n >\r\n
\r\n \r\n
}description=\"Links\">\r\n
\r\n \r\n
\r\n
\r\n
}\r\n\r\n description=\"Scrollbar\"\r\n >\r\n
\r\n \r\n
}\r\n description=\"Chart\"\r\n >\r\n
\r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert,\r\n template: state.template\r\n };\r\n}\r\nexport default connect(mapStateToProps)(TemplateLayout);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport 'rc-slider/assets/index.css';\r\nimport {\r\n Input,\r\n Row,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n Col,\r\n Label,\r\n} from \"reactstrap\";\r\nimport SystemLabel from \"../../../../../../system/SystemLabel/SystemLabel\";\r\nimport { tempLangConverter } from \"../../../../../../helpers/lanugageHelper\";\r\nimport { deepClone } from \"../../../../../../helpers/objectHelper\";\r\nimport { formActions } from \"../../../../../../store/actions/cms/form/form.action\";\r\nimport JirangoSwitch from \"../../../../../../components/UI/Switch/JirangoSwitch\";\r\n\r\n\r\nclass OptionSettings extends React.Component {\r\n\r\n handleSoftUpdate = (option) => {\r\n const { dispatch } = this.props;\r\n const element = deepClone(this.props.selectedElement);\r\n let opt = element.props.options.find(o => o.optionId === option.optionId && o.sortOrder === option.sortOrder);\r\n let indexOf = element.props.options.indexOf(opt)\r\n element.props.options[indexOf] = option;\r\n element.props.options[indexOf].isChanged = true;\r\n\r\n dispatch(formActions.updateFormElement(element));\r\n };\r\n handleChange = (e, val, path) => {\r\n const names = path.split(\".\");\r\n const selectedOption = deepClone(this.props.selectedOption);\r\n let value = val ? val : e.target.value;\r\n if (names.length === 1) {\r\n selectedOption[names[0]] = value;\r\n selectedOption.isChanged = true;\r\n }\r\n if (names.length === 2) {\r\n selectedOption[names[0]][names[1]] = value;\r\n selectedOption.isChanged = true;\r\n }\r\n if (names.length === 3) {\r\n selectedOption[names[0]][names[1]][names[2]] = value;\r\n selectedOption.isChanged = true;\r\n }\r\n if (names.length === 4) {\r\n selectedOption[names[0]][names[1]][names[2]][names[3]] = value;\r\n selectedOption.isChanged = true;\r\n }\r\n this.handleSoftUpdate(selectedOption)\r\n }\r\n render() {\r\n const { selectedOption } = this.props;\r\n if (!selectedOption) return null;\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {selectedOption.labels.map((l, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `labels.${index}.text`)\r\n }\r\n />\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(null, !selectedOption.preChecked, `preChecked`)}\r\n isChecked={\r\n selectedOption.preChecked !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(null, !selectedOption.readonly, `readonly`)}\r\n isChecked={\r\n selectedOption.readonly !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form,\r\n selectedElement: state.form.selectedElement,\r\n selectedOption: state.form.selectedOption,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(OptionSettings);\r\n","import SystemLabel from \"../system/SystemLabel/SystemLabel\";\r\nimport React from 'react';\r\n\r\nexport const validationTypes = [\r\n { label: \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n this.handleClick(\"ShowAlways\")}\r\n >\r\n {\r\n this.handleClick(\"ShowWhen\");\r\n this.props.toggleConditionModal(Show);\r\n }}\r\n >\r\n this.handleClick(\"ShowNever\")} className={this.isBtnActive(\"ShowNever\")}>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.props.toggleConditionModal(\"RequireElement\")}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.props.toggleConditionModal(\"ReadOnlyElement\")}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect()(ConditionTypeList);\r\n","export const displayTypesField = [\r\n { value: \"TEXT\", label: 'Text' },\r\n { value: \"SELECT\", label: 'Dropdown' }\r\n]\r\nexport const displayTypesQuestion = [\r\n { value: \"CHECKBOX\", label: 'Checkbox' },\r\n { value: \"SELECT\", label: 'Dropdown' }\r\n]\r\n\r\n\r\nexport const sortTypes = [\r\n { value: \"DEFAULT\", label: 'Default' },\r\n { value: \"ALPHA\", label: 'Alphabetically' }\r\n]","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport \"rc-slider/assets/index.css\";\r\nimport { Input, Row, InputGroup, InputGroupAddon, InputGroupText, Col, Label, TabContent } from \"reactstrap\";\r\nimport Select from \"react-select\";\r\nimport OptionSettings from \"../Options/Settings/OptionSettings\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport { validationTypes } from \"../../../../../common/validationType\";\r\nimport CondtionTypeList from \"../../../../areas/form/conditions/components/CondtionTypeList\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { displayTypesQuestion, sortTypes } from \"../../../../models/displayTypes\";\r\nimport { tempLangConverter } from \"../../../../../helpers/lanugageHelper\";\r\nimport JirangoSwitch from \"../../../../../components/UI/Switch/JirangoSwitch\";\r\nimport { ElementTabGroup } from \"../../../../components/editor/tools/EditorTabGroup\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { renderElementSettings } from \"../../../../helpers/renderElementSettings\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { FormGroup } from \"@material-ui/core\";\r\n\r\nconst checkboxLabelAlignmentStyles = [\r\n { value: \"end\", text: \r\n \r\n
\r\n
\r\n {this.state.activeTab[0] === \"1\" && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedElement.props.labels &&\r\n selectedElement.props.labels.map((l, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `props.labels.${index}.text`)}\r\n />\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.showSubInput`)} isChecked={selectedElement.data.showSubInput !== true ? false : true} />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.showSubLabel`)} isChecked={selectedElement.data.showSubLabel !== true ? false : true} />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n ) : (\r\n \r\n {selectedElement.data.displayType !== undefined && (\r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n id=\"name\"\r\n value={displayTypesQuestion.find((t) => {\r\n return t.value === selectedElement.data.displayType;\r\n })}\r\n onChange={(selectedOption) => this.handleSelectOnChange(selectedOption, \"data.displayType\")}\r\n />\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n id=\"name\"\r\n value={sortTypes.find((t) => {\r\n return t.value === selectedElement.data.sortType;\r\n })}\r\n onChange={(selectedOption) => this.handleSelectOnChange(selectedOption, \"data.sortType\")}\r\n />\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n\r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n id=\"name\"\r\n value={validationTypes.find((t) => {\r\n return t.value === selectedElement.data.validation.type;\r\n })}\r\n onChange={(selectedOption) => this.handleChange(null, selectedOption.value, \"data.validation.type\")}\r\n />\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n this.handleChange(e, null, `data.validation.message`)}\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n {renderElementSettings(selectedContainer.type, selectedContainer, this.props.toggleConditionModal)}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n )}\r\n\r\n {this.state.activeTab[0] === \"2\" && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.text };\r\n })}\r\n id=\"name\"\r\n value={checkboxLabelAlignmentStyles.find((t) => {\r\n return t.value === selectedElement.data.checkboxLabelPlacement;\r\n })}\r\n onChange={(selectedOption) => this.handleSelectOnChange(selectedOption, \"data.checkboxLabelPlacement\")}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(null, e.target.checked, `data.inline`)} isChecked={selectedElement.data.inline !== true ? false : true} />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(null, e.target.checked, `data.hideCheckboxLabels`)}\r\n isChecked={selectedElement.data.hideCheckboxLabels !== true ? false : true}\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {/* \r\n \r\n \r\n \r\n \r\n this.handleChange(null, e.target.checked, `data.displayCheckboxRowAsHeader`)}\r\n isChecked={selectedElement.data.displayCheckboxRowAsHeader !== true ? false : true}\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={\"px\"}\r\n steps={1}\r\n max={30}\r\n min={-30}\r\n path={\"data.optionSpacing\"}\r\n label=\"OptionsSpacing\"\r\n />\r\n )}\r\n \r\n ) : null}\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={\"px\"}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"data.padding\"}\r\n label=\"Padding\"\r\n />\r\n )}\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={\"%\"}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"data.titleWidth\"}\r\n label=\"TitleColumnWidth\"\r\n />\r\n )}\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={\"%\"}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"data.inputWidth\"}\r\n label=\"FieldColumnWidth\"\r\n />\r\n ) : null}\r\n {/* {selectedElement.props.type}
\r\n {selectedElement.data.displayType}
*/}\r\n {selectedElement.props.type === \"Text\" || (selectedElement.props.type == \"Option\" && selectedElement.data.displayType == \"SELECT\") ? (\r\n \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={\"%\"}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"data.style.width\"}\r\n label=\"InnerWidth\"\r\n />\r\n \r\n ) : null}\r\n {selectedElement.data.textRows !== undefined && selectedElement.props.type === \"Text\" && (\r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.changeLock`)} isChecked={selectedElement.data.changeLock !== true ? false : true} />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n )\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form,\r\n selectedElement: state.form.selectedElement,\r\n event: state.event,\r\n\r\n rElement: state.element,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(QuestionSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport \"rc-slider/assets/index.css\";\r\nimport {\r\n Input,\r\n Row,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n Col,\r\n Label,\r\n TabContent,\r\n} from \"reactstrap\";\r\nimport Select from \"react-select\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { validationTypes } from \"../../../../../common/validationType\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport { tempLangConverter } from \"../../../../../helpers/lanugageHelper\";\r\nimport CondtionTypeList from \"../../../../areas/form/conditions/components/CondtionTypeList\";\r\nimport { displayTypesField, sortTypes } from \"../../../../models/displayTypes\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { ElementTabGroup } from \"../../../../components/editor/tools/EditorTabGroup\";\r\nimport JirangoSwitch from \"../../../../../components/UI/Switch/JirangoSwitch\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { renderElementSettings } from \"../../../../helpers/renderElementSettings\";\r\n\r\n\r\n\r\nconst optionStyle = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: '12px',\r\n padding: \"0 10px\"\r\n };\r\n },\r\n container: styles => ({\r\n ...styles,\r\n minWidth: \"100%\"\r\n }),\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: '12px',\r\n };\r\n }\r\n};\r\n\r\nclass FieldSettings extends React.Component {\r\n state = { activeTab: new Array(2).fill(\"1\"), isChange: false };\r\n componentDidMount() {\r\n this.setState({\r\n activeTab: new Array(2).fill(\"1\")\r\n });\r\n }\r\n handleSoftUpdate = element => {\r\n const { dispatch } = this.props;\r\n dispatch(formActions.updateFormElement(element));\r\n };\r\n handleSelectOnChange = (options, path) => {\r\n const names = path.split(\".\");\r\n const selectedElement = deepClone(this.props.selectedElement);\r\n if (names.length === 2) {\r\n selectedElement[names[0]][names[1]] = options.value;\r\n } else if (names.length === 3) {\r\n selectedElement[names[0]][names[1]][names[2]] = options.value;\r\n }\r\n\r\n this.handleSoftUpdate(selectedElement);\r\n };\r\n toggle = (tabPane, tab) => {\r\n const newArray = this.state.activeTab.slice();\r\n newArray[tabPane] = tab;\r\n this.setState({\r\n activeTab: newArray\r\n });\r\n };\r\n handleChange = (e, val, path) => {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n let value = val !== null && val !== undefined ? val : e.target.value;\r\n\r\n if (e && e.target.value === \"\" && path === \"props.length\") {\r\n value = 0;\r\n }\r\n if (e && e.target.type === \"checkbox\") {\r\n value = e.target.checked;\r\n }\r\n if (path === 'data.titleWidth') {\r\n element.data.inputWidth = 100 - value;\r\n }\r\n if (path === 'data.inputWidth') {\r\n element.data.titleWidth = 100 - value;\r\n }\r\n\r\n if (names.length === 2) {\r\n element[names[0]][names[1]] = value;\r\n } else if (names.length === 3) {\r\n element[names[0]][names[1]][names[2]] = value;\r\n } else if (names.length === 4) {\r\n element[names[0]][names[1]][names[2]][names[3]] = value;\r\n }\r\n this.handleSoftUpdate(element);\r\n }\r\n render() {\r\n const { selectedElement, selectedContainer } = this.props.form;\r\n return (\r\n selectedElement && (\r\n \r\n \r\n
\r\n
\r\n {this.state.activeTab[0] === \"1\" && (\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {selectedElement.props.labels.map((l, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(\r\n e,\r\n null,\r\n `props.labels.${index}.text`\r\n )\r\n }\r\n />\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n this.handleChange(e, null, `data.showSubInput`)}\r\n isChecked={\r\n selectedElement.data.showSubInput !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n this.handleChange(e, null, `data.showSubLabel`)}\r\n isChecked={\r\n selectedElement.data.showSubLabel !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n value={displayTypesField.find(t => {\r\n return t.value === selectedElement.data.displayType;\r\n })}\r\n onChange={selectedOption =>\r\n this.handleSelectOnChange(\r\n selectedOption,\r\n \"data.displayType\"\r\n )\r\n }\r\n />\r\n \r\n
\r\n )}\r\n\r\n {selectedElement.data.sortType !== undefined &&\r\n selectedElement.data.displayType === \"SELECT\" && (\r\n \r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n value={sortTypes.find(t => {\r\n return t.value === selectedElement.data.sortType;\r\n })}\r\n style={optionStyle}\r\n onChange={selectedOption =>\r\n this.handleSelectOnChange(\r\n selectedOption,\r\n \"data.sortType\"\r\n )\r\n }\r\n />\r\n \r\n
\r\n \r\n\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `props.length`)\r\n }\r\n value={selectedElement.props.length}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.maxCharacters`)\r\n }\r\n value={selectedElement.data.maxCharacters}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n value={validationTypes.find(t => {\r\n return t.value === selectedElement.data.validation.type;\r\n })}\r\n style={optionStyle}\r\n onChange={selectedOption =>\r\n this.handleChange(null,\r\n selectedOption.value,\r\n \"data.validation.type\"\r\n )\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n this.handleChange(e, null, `data.validation.message`)\r\n }\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n {renderElementSettings(\r\n selectedContainer.type,\r\n selectedContainer,\r\n this.props.toggleConditionModal\r\n )}\r\n \r\n \r\n
\r\n \r\n\r\n : null}\r\n \r\n )}\r\n\r\n {this.state.activeTab[0] === \"2\" && (\r\n \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={'data.padding'}\r\n label=\"Padding\"\r\n />\r\n )}\r\n {selectedElement.data.alignment !== 'center' ? \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={'%'}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={'data.titleWidth'}\r\n label=\"TitleColumnWidth\"\r\n />\r\n )}\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={'%'}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={'data.inputWidth'}\r\n label=\"FieldColumnWidth\"\r\n />\r\n )}\r\n : null}\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={'%'}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={'data.style.width'}\r\n label=\"InnerWidth\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n this.handleChange(e, null, `data.changeLock`)}\r\n isChecked={\r\n selectedElement.data.changeLock !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n )\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form,\r\n selectedElement: state.form.selectedElement,\r\n selectedContainer: state.form.selectedContainer,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(FieldSettings);\r\n","import React from 'react';\r\nimport SystemLabel from '../../../system/SystemLabel/SystemLabel';\r\nimport { Badge } from 'reactstrap'\r\nimport TextareaAutosize from 'react-textarea-autosize'\r\nimport './BootstrapCheckbox.css'\r\nimport ContentEditable from \"react-contenteditable\";\r\nimport { securityHelper } from '../../../helpers/securityHelper';\r\n\r\nString.prototype.replaceHtmlEntites = function () {\r\n var s = this;\r\n var translate_re = /&(nbsp|amp|quot|lt|gt);/g;\r\n var translate = { \"nbsp\": \" \", \"amp\": \"&\", \"quot\": \"\\\"\", \"lt\": \"<\", \"gt\": \">\" };\r\n return (s.replace(translate_re, function (match, entity) {\r\n return translate[entity];\r\n }));\r\n};\r\n\r\n\r\nclass JirangoCheckbox extends React.Component {\r\n constructor() {\r\n super()\r\n this.state = {\r\n disableCheckbox: false, value: '', rows: 2,\r\n minRows: 2,\r\n maxRows: 100,\r\n }\r\n };\r\n componentDidMount() {\r\n this.setState({\r\n value: this.props.labelName !== '' ? this.props.labelName : ''\r\n })\r\n }\r\n componentDidUpdate(prevProps) {\r\n if (this.props.labelName !== undefined && prevProps.labelName !== this.props.labelName) {\r\n this.setState({\r\n value: this.props.labelName/* ? this.props.labelName.replaceHtmlEntites() : '' */\r\n })\r\n }\r\n }\r\n componentWillUnmount() {\r\n this.input = null;\r\n }\r\n disableCheckboxOnEdit = () => {\r\n this.setState({ disableCheckbox: true })\r\n }\r\n unDisableCheckboxOnEdit = () => {\r\n this.setState({ disableCheckbox: false })\r\n }\r\n\r\n onChange = (e) => {\r\n const { questionDto } = this.props;\r\n if (questionDto !== undefined) this.props.labelOnChange(e.target.value,\r\n questionDto.optionId,\r\n questionDto.langCode ? questionDto.langCode : 'swe')\r\n else {\r\n this.props.labelOnChange(e,\r\n this.props.path\r\n );\r\n }\r\n this.setState({ value: e.target.value })\r\n }\r\n render() {\r\n const { type, onChange, inline, labelName, value, editableLabel, labelDisabled, isEventBox, questionDto,\r\n labelOnChange, appendedText, checkboxIsDisabled, style, noHtmlFor, onBlur, path, editArea, boxType,\r\n hideCheckbox, hiddenText } = this.props;\r\n\r\n const boxTypeC = boxType !== undefined ? boxType : 'checkbox';\r\n const typeClass = type ? `${boxTypeC}-${type}` : '';\r\n const isInline = inline && \"checkbox-inline\";\r\n const newId = securityHelper.createGuid()/* . Math.floor(Math.random() * Math.floor(100)) */;\r\n const isDisabled = checkboxIsDisabled && true;\r\n return (\r\n \r\n {hideCheckbox ?\r\n (hiddenText ?\r\n\r\n
\r\n {hiddenText}\r\n \r\n\r\n : \"\")\r\n :\r\n
onChange(e)} id={`${newId}-${labelName}`} checked={value} type={`${boxTypeC}`} />\r\n }\r\n\r\n
\r\n {editableLabel ?\r\n (\r\n \r\n {labelDisabled ?\r\n \r\n {this.state.value}\r\n \r\n\r\n :\r\n this.onChange(e)}\r\n style={{ ...style/* , maxWidth: '200px' */ }}\r\n onClick={this.disableCheckboxOnEdit}\r\n html={\r\n this.state.value\r\n }\r\n disabled={labelDisabled}\r\n /* onChange={(e) => this.onChange(e)} */\r\n tagName=\"p\"\r\n\r\n />\r\n }\r\n )\r\n : ( \r\n
\r\n \r\n this.handleChange(e, null, `data.display.${key}`)\r\n }\r\n inline={true}\r\n value={setting}\r\n type=\"info\"\r\n labelName={`${key.charAt(0).toUpperCase() + key.substring(1)}`} />\r\n \r\n
\r\n )\r\n }\r\n }\r\n return ret;\r\n }\r\n renderPropsSettings = () => {\r\n const { selectedElement } = this.props;\r\n let ret = [];\r\n\r\n const typeDic = {\r\n name: \"text\",\r\n startDateTime: \"datetime-local\",\r\n endDateTime: \"datetime-local\",\r\n description: \"textarea\",\r\n max: \"number\",\r\n amount: \"number\",\r\n city: \"text\",\r\n venue: \"text\",\r\n vatPercent: \"number\"\r\n }\r\n const widthDic = {\r\n name: \"100%\",\r\n startDateTime: \"50%\",\r\n endDateTime: \"50%\",\r\n description: \"100%\",\r\n max: \"33.333%\",\r\n amount: \"33.333%\",\r\n city: \"100%\",\r\n venue: \"100%\",\r\n vatPercent: \"33.333%\"\r\n }\r\n\r\n for (const key in selectedElement.props) {\r\n if (selectedElement.props.hasOwnProperty(key)) {\r\n const setting = selectedElement.props[key];\r\n if (key === 'isSelected') continue;\r\n ret.push(\r\n\r\n \r\n \r\n \r\n
this.handleChange(e, null, `props.description`)}\r\n tagName=\"div\"\r\n />\r\n \r\n this.handleChange(e, null, `props.${key}`)}\r\n />}\r\n \r\n \r\n )\r\n }\r\n }\r\n ret.push(\r\n \r\n this.handleChange(e, null, `data.locationLabel`)}\r\n />\r\n \r\n \r\n )\r\n ret.push(\r\n \r\n \r\n this.handleChange(e, null, `data.maxLabel`)}\r\n />\r\n \r\n \r\n \r\n\r\n )\r\n return {ret.map(r => { return r })}
;\r\n }\r\n handleSpaceOnChange = (e, path, dir) => {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n const spaceValue = element[names[0]][names[1]];\r\n let value = e.target.value;\r\n let splitted = spaceValue.toString().split(' ')\r\n if (splitted.length > 1) {\r\n splitted[dir] = value + 'px';\r\n splitted = splitted.join(' ')\r\n element[names[0]][names[1]] = splitted;\r\n }\r\n else {\r\n let newString = `${splitted[0]}px ${splitted[0]}px ${splitted[0]}px ${splitted[0]}px`;\r\n newString = newString.split(' ');\r\n newString[dir] = value + 'px';\r\n\r\n element[names[0]][names[1]] = newString.join(' ');\r\n }\r\n this.handleSoftUpdate(element);\r\n }\r\n convertSpaceValue = (value, index) => {\r\n let splitted = value.toString().split(' ')\r\n if (splitted.length > 1) {\r\n return parseInt(splitted[index]);\r\n }\r\n else {\r\n return parseInt(splitted[0]);\r\n }\r\n }\r\n render() {\r\n const { selectedElement, selectedContainer, template, cms } = this.props;\r\n if (selectedElement === null) return null;\r\n return (\r\n \r\n \r\n
\r\n
\r\n {this.state.activeTab[0] === \"1\" && (\r\n \r\n \r\n {this.renderPropsSettings()}\r\n \r\n {selectedContainer ?\r\n \r\n \r\n \r\n
\r\n \r\n\r\n : null}\r\n \r\n )}\r\n {this.state.activeTab[0] === \"2\" && (\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 0)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 0)} />\r\n
\r\n
this.handleSpaceOnChange(e, `data.padding`, 1)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 1)} />\r\n
\r\n
this.handleSpaceOnChange(e, `data.padding`, 2)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 2)} />\r\n
\r\n
this.handleSpaceOnChange(e, `data.padding`, 3)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 3)} />\r\n
\r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.descriptionMargin`, 0)}\r\n value={this.convertSpaceValue(selectedElement.data.descriptionMargin, 0)} />\r\n
\r\n
this.handleSpaceOnChange(e, `data.descriptionMargin`, 1)}\r\n value={this.convertSpaceValue(selectedElement.data.descriptionMargin, 1)} />\r\n
\r\n
this.handleSpaceOnChange(e, `data.descriptionMargin`, 2)}\r\n value={this.convertSpaceValue(selectedElement.data.descriptionMargin, 2)} />\r\n
\r\n
this.handleSpaceOnChange(e, `data.descriptionMargin`, 3)}\r\n value={this.convertSpaceValue(selectedElement.data.descriptionMargin, 3)} />\r\n
\r\n \r\n )}\r\n {this.state.activeTab[0] === \"3\" && (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.hidePrice`)}\r\n isChecked={\r\n selectedElement.data.hidePrice !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.readOnly`)}\r\n isChecked={\r\n selectedElement.data.readOnly !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.doNotExistIfHidden`)}\r\n isChecked={\r\n selectedElement.data.doNotExistIfHidden !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.preChecked`)}\r\n isChecked={\r\n selectedElement.data.preChecked !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.allowOverbooking`)}\r\n isChecked={\r\n selectedElement.data.allowOverbooking !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n this.handleChange(e, null, `data.changeLock`)}\r\n isChecked={\r\n selectedElement.data.changeLock !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form,\r\n selectedElement: state.form.selectedElement,\r\n selectedContainer: state.form.selectedContainer,\r\n template: state.template.template,\r\n cms: state.cms\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(EventSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport \"rc-slider/assets/index.css\";\r\nimport {\r\n Row,\r\n Col,\r\n Label,\r\n} from \"reactstrap\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport ColorPickerFacade from \"../../../../../components/UI/Buttons/ColorPickerFacade\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport Select from 'react-select'\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { templateHelper } from \"../../../../areas/template/helpers/templateHelper\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport { pageActions } from \"../../../../../store/actions/cms/page/page.action\";\r\n\r\nconst borderStyles = [\r\n { value: 'none', label: 'Ingen' },\r\n { value: 'dotted', label: 'Dotted' },\r\n { value: 'dashed', label: 'Dashed' },\r\n { value: 'solid', label: 'Solid' },\r\n { value: 'inset', label: 'Inset' },\r\n { value: 'outset', label: 'Outset' },\r\n { value: 'double', label: 'Double' },\r\n { value: 'groove', label: 'Groove' },\r\n { value: 'ridge', label: 'Ridge' },\r\n]\r\n\r\nconst optionStyle = {\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: '12px',\r\n width: 120\r\n };\r\n }\r\n};\r\nclass DividerSettings extends React.Component {\r\n handleSoftUpdate = (element) => {\r\n const { dispatch, enviroment, page } = this.props;\r\n console.log(\"settings\", this.props)\r\n if (enviroment === sourceTypes.FORM)\r\n dispatch(formActions.updateFormElement(element));\r\n if (enviroment === sourceTypes.PAGE)\r\n dispatch(pageActions.updatePageElement(element, null, page));\r\n if (enviroment === sourceTypes.TEMPLATE) {\r\n const template = deepClone(this.props.template);\r\n const newTemplate = templateHelper.handleElementUpdates(\r\n element,\r\n template\r\n );\r\n dispatch(templateActions.softUpdate(newTemplate));\r\n }\r\n };\r\n parseColorToRgba(color) {\r\n const { r, g, b, a } = color.rgb;\r\n return `rgba(${r},${g},${b},${a})`;\r\n }\r\n handleChange = (color, val, path) => {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n let value = color ? this.parseColorToRgba(color) : val;\r\n if (names.length === 2) {\r\n element[names[0]][names[1]] = value;\r\n }\r\n if (names.length === 3) {\r\n element[names[0]][names[1]][names[2]] = value;\r\n }\r\n this.handleSoftUpdate(element);\r\n }\r\n\r\n render() {\r\n const { selectedElement } = this.props;\r\n if (selectedElement === undefined) return null;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(color, e, \"data.borderColor\")\r\n }\r\n path=\"data.borderColor\"\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n value={borderStyles.find(t => {\r\n return t.value === selectedElement.data.borderStyle;\r\n })}\r\n style={{ optionStyle }}\r\n onChange={selectedOption =>\r\n this.handleChange(\r\n null,\r\n selectedOption.value,\r\n \"data.borderStyle\"\r\n )\r\n }\r\n />\r\n \r\n
\r\n\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={1}\r\n min={1}\r\n max={500}\r\n path={'data.height'}\r\n label=\"Height\"\r\n />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={'%'}\r\n steps={1}\r\n min={1}\r\n max={100}\r\n path={'data.width'}\r\n label=\"Width\"\r\n />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={0.5}\r\n min={0.5}\r\n max={50}\r\n path={'data.borderWidth'}\r\n label=\"BorderWidth\"\r\n />\r\n\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { enviroment } = state.cms;\r\n let selectedElement = null;\r\n if (enviroment === sourceTypes.FORM)\r\n selectedElement = state.form.selectedElement;\r\n if (enviroment === sourceTypes.PAGE)\r\n selectedElement = state.page.selectedElement;\r\n if (enviroment === sourceTypes.TEMPLATE)\r\n selectedElement = state.template.selectedElement;\r\n return {\r\n form: state.form,\r\n page:state.page,\r\n selectedElement,\r\n template: state.template.template,\r\n enviroment\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(DividerSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {\r\n Row,\r\n Col,\r\n Label\r\n} from \"reactstrap\";\r\nimport { pageActions } from \"../../../../../store/actions/cms/page/page.action\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport ArchiveContainer from \"../../../../../file/containers/ArchiveContainer\";\r\nimport { content } from \"../../../../models/content\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { templateHelper } from \"../../../../areas/template/helpers/templateHelper\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport { UrlMultiInput } from \"../../../../components/editor/tools/UrlMultiInput/UrlMultiInput\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport Select from 'react-select';\r\n\r\n\r\nconst imageShapes = [\r\n { value: 'ORIGINAL', label: \r\n
\r\n {selectedElement.data.type !== \"FULL\" && selectedElement.data.type !== \"ORIGINAL\" ? (\r\n \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={1}\r\n attachUnit={true}\r\n max={320}\r\n min={1}\r\n path={'data.style.width'}\r\n label=\"ImgSize\"\r\n />\r\n \r\n ) : null}\r\n {selectedElement.data.type === \"ORIGINAL\" ? \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={1}\r\n max={1800}\r\n min={1}\r\n path={'data.style.height'}\r\n label=\"ImgHeight\"\r\n />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={1}\r\n max={1000}\r\n min={1}\r\n path={'data.style.width'}\r\n label=\"ImgWidth\"\r\n />\r\n : null}\r\n\r\n {selectedElement.data.type === \"FULL\" ? \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={1}\r\n max={1000}\r\n min={1}\r\n path={'data.style.maxHeight'}\r\n label=\"MaxHeight\"\r\n />\r\n : null}\r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n value={imageShapes.find(t => {\r\n return t.value === selectedElement.data.type;\r\n })}\r\n onChange={selectedOption =>\r\n this.handleChange(\r\n null,\r\n selectedOption.value,\r\n \"data.type\"\r\n )\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n dispatch(cmsActions.blockDeselect(true))}\r\n onClose={() => cmsActions.blockDeselect(false)}\r\n onChange={(e) => handleChange(e)}\r\n value={value ? new Date(value) : null}\r\n onError={(err) => console.error(err)}\r\n format=\"yyyy-MM-DD HH:mm:ss\"\r\n cancelLabel={ \r\n );\r\n};\r\nfunction mapStateToProps(state) {\r\n return {};\r\n}\r\nexport default connect(mapStateToProps)(JirangoDatePicker);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Row, Col, Label, Input, FormGroup } from \"reactstrap\";\r\nimport { pageActions } from \"../../../../../store/actions/cms/page/page.action\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport { content } from \"../../../../models/content\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { templateHelper } from \"../../../../areas/template/helpers/templateHelper\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport { UrlMultiInput } from \"../../../../components/editor/tools/UrlMultiInput/UrlMultiInput\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport Select from \"react-select\";\r\nimport JirangoSwitch from \"../../../../../components/UI/Switch/JirangoSwitch\";\r\nimport { IconButton } from \"@material-ui/core\";\r\n\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { cmsActions } from \"../../../../../store/actions/cms/cms.action\";\r\nimport JirangoDatePicker from \"../../../../../global/JirangoDatepicker\";\r\n\r\n\r\nconst targetTypes = [\r\n { value: \"self\", label: \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n this.handleSpaceOnChange(e, `data.padding`, 0)\r\n }\r\n value={this.convertSpaceValue(\r\n selectedElement.data.padding,\r\n 0\r\n )}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n this.handleSpaceOnChange(e, `data.padding`, 1)\r\n }\r\n value={this.convertSpaceValue(\r\n selectedElement.data.padding,\r\n 1\r\n )}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n this.handleSpaceOnChange(e, `data.padding`, 2)\r\n }\r\n value={this.convertSpaceValue(\r\n selectedElement.data.padding,\r\n 2\r\n )}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n this.handleSpaceOnChange(e, `data.padding`, 3)\r\n }\r\n value={this.convertSpaceValue(\r\n selectedElement.data.padding,\r\n 3\r\n )}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n {/* null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n attachUnit={true}\r\n steps={1}\r\n max={500}\r\n min={1}\r\n path={'data.style.width'}\r\n label=\"ButtonWidth\"\r\n />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n attachUnit={true}\r\n steps={1}\r\n max={500}\r\n min={1}\r\n path={'data.style.height'}\r\n label=\"ButtonHeight\"\r\n /> */}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n value={targetTypes.find((t) => {\r\n return t.value === selectedElement.data.target;\r\n })}\r\n onChange={(selectedOption) =>\r\n this.handleChange(null, selectedOption.value, \"data.target\")\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(\r\n null,\r\n !selectedElement.data.timer,\r\n \"data.timer\"\r\n )\r\n }\r\n isChecked={selectedElement.data.timer}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n this.handleChange(null, value, \"data.startDate\")\r\n }\r\n value={selectedElement.data.startDate}\r\n />\r\n\r\n {/* {\r\n console.log(e.target.value);\r\n console.log(\r\n new Date(e.target.value).toLocaleTimeString()\r\n );\r\n\r\n this.handleChange(\r\n null,\r\n e.target.value,\r\n \"data.startDate\"\r\n );\r\n }}\r\n /> */}\r\n \r\n \r\n \r\n this.handleChange(null, null, \"data.startDate\")\r\n }\r\n >\r\n
\r\n \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n this.handleChange(null, value, \"data.endDate\")\r\n }\r\n value={selectedElement.data.endDate}\r\n />\r\n \r\n \r\n \r\n this.handleChange(null, null, \"data.endDate\")\r\n }\r\n >\r\n
\r\n \r\n ) : null}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n this.handleChange(null, url, 'data.thumbnail')} margin={false} externalSourceOnly={false} onChange={this.handleChange} path={'data.thumbnail'} url={selectedElement.data.thumbnail || ''} />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={'%'}\r\n steps={1}\r\n attachUnit={true}\r\n max={100}\r\n min={1}\r\n path={'data.style.width'}\r\n label=\"VideoWidth\"\r\n />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={1}\r\n max={1000}\r\n attachUnit={true}\r\n min={1}\r\n path={'data.style.height'}\r\n label=\"VideoHeight\"\r\n />\r\n \r\n
\r\n {cms.enviroment === sourceTypes.FORM ? (\r\n \r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n value={containerTypes.find((t) => {\r\n return t.value === selectedContainer.data.type;\r\n })}\r\n onChange={(selectedOption) => this.handleChange(null, selectedOption.value, \"data.type\")}\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n\r\n {selectedContainer.data.type === \"EVENT_GROUP\" ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n this.handleChange(null, e.target.value, `data.validation.message`)}\r\n />\r\n \r\n
\r\n \r\n ) : null}\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 0)}\r\n value={this.convertSpaceValue(selectedContainer.data.padding, 0)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 1)}\r\n value={this.convertSpaceValue(selectedContainer.data.padding, 1)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 2)}\r\n value={this.convertSpaceValue(selectedContainer.data.padding, 2)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 3)}\r\n value={this.convertSpaceValue(selectedContainer.data.padding, 3)}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n {/* \r\n \r\n \r\n
\r\n \r\n \r\n
*/}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.margin`, 0)}\r\n value={this.convertSpaceValue(selectedContainer.data.margin, 0)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.margin`, 1)}\r\n value={this.convertSpaceValue(selectedContainer.data.margin, 1)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.margin`, 2)}\r\n value={this.convertSpaceValue(selectedContainer.data.margin, 2)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.margin`, 3)}\r\n value={this.convertSpaceValue(selectedContainer.data.margin, 3)}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n {/* \r\n \r\n \r\n
\r\n \r\n \r\n
*/}\r\n \r\n ) : null}\r\n \r\n ) : null}\r\n {/* \r\n \r\n \r\n \r\n this.handleChange(color, e, \"data.background\")} path=\"data.background\" />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(\r\n null,\r\n selectedContainer.data.backgroundAttachment === \"initial\" || selectedContainer.data.backgroundAttachment === \"unset\" || selectedContainer.data.backgroundAttachment === \"none\"\r\n ? \"fixed\"\r\n : \"initial\",\r\n \"data.backgroundAttachment\"\r\n )\r\n }\r\n isChecked={selectedContainer.data.backgroundAttachment === \"fixed\"}\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={\"px\"}\r\n steps={1}\r\n max={1000}\r\n min={80}\r\n path={\"data.style.height\"}\r\n label=\"ContainerHeight\"\r\n />\r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n this.handleChange(null, selectedContainer.data.style.height === \"auto\" ? 200 : \"auto\", \"data.style.height\")}\r\n isChecked={selectedContainer.data.style.height === \"auto\"}\r\n />\r\n \r\n
\r\n \r\n
\r\n {cms.enviroment === sourceTypes.FORM ? (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n i.value == selectedElement.data.invitationId)?.label,\r\n }\r\n : null\r\n }\r\n onChange={(selectedOption) => this.handleChange(null, selectedOption.value, \"data.invitationId\")}\r\n styles={selectStyles}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `props.value`)}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/* \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 0)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 0)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 1)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 1)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 2)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 2)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 3)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 3)}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n {selectedElement.data.margin !== undefined ? (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.margin`, 0)}\r\n value={this.convertSpaceValue(selectedElement.data.margin, 0)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.margin`, 1)}\r\n value={this.convertSpaceValue(selectedElement.data.margin, 1)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.margin`, 2)}\r\n value={this.convertSpaceValue(selectedElement.data.margin, 2)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.margin`, 3)}\r\n value={this.convertSpaceValue(selectedElement.data.margin, 3)}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n this.handleChange(null, \"data.backgroundColor\", color)} path=\"data.backgroundColor\" />\r\n \r\n
\r\n \r\n
\r\n {selectedElement.props.type === \"IMG\" ?
: null}\r\n {selectedElement.props.type === \"MAP\" ?
: null}\r\n {selectedElement.props.type === \"BUTTON\" ? (\r\n
\r\n {\" \"}\r\n \r\n {\" \"}\r\n \r\n ) : null}\r\n {selectedElement.props.type === \"DIVIDER\" ?
: null}\r\n {selectedElement.props.type === \"CALENDAR_INVITATION\" ?
: null}\r\n {selectedElement.props.type === \"VIDEO\" ?
: null}\r\n
\r\n {this.props.form.selectedContainer ?
: null}\r\n
\r\n )\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { enviroment } = state.cms;\r\n let selectedElement = null;\r\n if (enviroment === sourceTypes.FORM) selectedElement = state.form.selectedElement;\r\n if (enviroment === sourceTypes.PAGE) selectedElement = state.page.selectedElement;\r\n if (enviroment === sourceTypes.TEMPLATE) selectedElement = state.template.selectedElement;\r\n return {\r\n form: state.form,\r\n page: state.page,\r\n template: state.template.template,\r\n cms: state.cms,\r\n selectedElement,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(ContentSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport \"rc-slider/assets/index.css\";\r\nimport { Input, Row, Col, Label } from \"reactstrap\";\r\nimport { formActions } from \"../../../../../../store/actions/cms/form/form.action\";\r\nimport SystemLabel from \"../../../../../../system/SystemLabel/SystemLabel\";\r\nimport { deepClone } from \"../../../../../../helpers/objectHelper\";\r\nimport { AlignmentButtonGroup } from \"../../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport ListExpansion from \"../../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport EditorSlider from \"../../../../../components/editor/tools/EditorSlider\";\r\n\r\nclass InvoiceFieldSettings extends React.Component {\r\n handleChange = (color, val, path) => {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n let value = color ? this.parseColorToRgba(color) : val;\r\n\r\n if (names.length === 2) {\r\n element[names[0]][names[1]] = value;\r\n } else if (names.length === 3) {\r\n element[names[0]][names[1]][names[2]] = value;\r\n } else if (names.length === 4) {\r\n element[names[0]][names[1]][names[2]][names[3]] = value;\r\n }\r\n this.props.dispatch(formActions.updateFormElement(element));\r\n };\r\n handleSelectOnChange = (opt, path) => {\r\n const names = path.split(\".\");\r\n let selectedElement = deepClone(this.props.selectedElement);\r\n if (path === 'data.invoiceCountries') {\r\n const countryList = Array.from(selectedElement[names[0]][names[1]]);\r\n countryList.push(opt);\r\n selectedElement[names[0]][names[1]] = countryList;\r\n } else if (path === 'data.defaultCountry') {\r\n selectedElement[names[0]][names[1]] = opt.value;\r\n }\r\n this.props.dispatch(formActions.updateFormElement(selectedElement));\r\n }\r\n expandArea = area => {\r\n this.setState({ [area]: !this.state[area] });\r\n };\r\n handleSpaceOnChange = (e, path, dir) => {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n const spaceValue = element[names[0]][names[1]];\r\n let value = e.target.value;\r\n let splitted = spaceValue.toString().split(\" \");\r\n if (splitted.length > 1) {\r\n splitted[dir] = value + \"px\";\r\n splitted = splitted.join(\" \");\r\n element[names[0]][names[1]] = splitted;\r\n } else {\r\n let newString = `${splitted[0]}px ${splitted[0]}px ${splitted[0]}px ${splitted[0]}px`;\r\n newString = newString.split(\" \");\r\n newString[dir] = value + \"px\";\r\n\r\n element[names[0]][names[1]] = newString.join(\" \");\r\n }\r\n this.props.dispatch(formActions.updateFormElement(element));\r\n };\r\n convertSpaceValue = (value, index) => {\r\n let splitted = value.toString().split(\" \");\r\n if (splitted.length > 1) {\r\n return parseInt(splitted[index]);\r\n } else {\r\n return parseInt(splitted[0]);\r\n }\r\n };\r\n render() {\r\n const { selectedElement } = this.props;\r\n return (\r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `data.padding`, 0)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 0)} />\r\n
\r\n
this.handleSpaceOnChange(e, `data.padding`, 1)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 1)} />\r\n
\r\n
this.handleSpaceOnChange(e, `data.padding`, 2)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 2)} />\r\n
\r\n
this.handleSpaceOnChange(e, `data.padding`, 3)}\r\n value={this.convertSpaceValue(selectedElement.data.padding, 3)} />\r\n
\r\n \r\n ) : null}\r\n\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={\"%\"}\r\n steps={1}\r\n min={1}\r\n max={100}\r\n path={\"data.titleWidth\"}\r\n label=\"TitleColumnWidth\"\r\n />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={\"%\"}\r\n steps={1}\r\n min={1}\r\n max={100}\r\n path={\"data.inputWidth\"}\r\n label=\"FieldColumnWidth\"\r\n />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={\"%\"}\r\n steps={1}\r\n min={1}\r\n max={100}\r\n path={\"data.innerWidth\"}\r\n label=\"InnerWidth\"\r\n />\r\n \r\n \r\n {form.availableModules.find(am => am.name === \"DIBS\") ?\r\n \r\n \r\n \r\n \r\n \r\n this.handlePaymentMethodChange(e, `dibs`)}\r\n isChecked={\r\n element.data.paymentMethods.includes(\"dibs\") || false\r\n }\r\n />\r\n \r\n
\r\n : null\r\n }\r\n {form.availableModules.find(am => am.name === \"Invoice\") ?\r\n \r\n \r\n \r\n \r\n \r\n this.handlePaymentMethodChange(e, `invoice`)}\r\n isChecked={\r\n element.data.paymentMethods.includes(\"invoice\") || false\r\n }\r\n />\r\n \r\n
\r\n : null\r\n }\r\n )\r\n };\r\n render() {\r\n const { activeTab } = this.state;\r\n return (\r\n \r\n \r\n \r\n {this.state.activeTab[0] === \"1\" ?\r\n \r\n {this.renderPaymentAlternatives()}\r\n \r\n : null}\r\n {this.state.activeTab[0] === \"2\" ?\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form,\r\n template: state.template,\r\n cms: state.cms\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(PaymentOptionSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SketchPicker } from \"react-color\";\r\nimport {\r\n Input,\r\n Row,\r\n InputGroup,\r\n Col,\r\n Label\r\n} from \"reactstrap\";\r\nimport { pageActions } from \"../../../../../store/actions/cms/page/page.action\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport { content } from \"../../../../models/content\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { templateHelper } from \"../../../../areas/template/helpers/templateHelper\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport { confirmationActions } from \"../../../../../store/actions/confirmation/confirmation.action\";\r\nimport Select from 'react-select'\r\nclass UserPageSettings extends React.Component {\r\n state = {\r\n isMediaVaultOpen: false,\r\n value: \"\"\r\n };\r\n componentDidMount() {\r\n this.props.dispatch(confirmationActions.getByEvent(this.props.page.eventId));\r\n }\r\n handleSoftUpdate = element => {\r\n const { dispatch, enviroment, page } = this.props;\r\n if (enviroment === sourceTypes.FORM)\r\n dispatch(formActions.updateFormElement(element));\r\n if (enviroment === sourceTypes.PAGE)\r\n dispatch(pageActions.updatePageElement(element, null, page));\r\n if (enviroment === sourceTypes.TEMPLATE) {\r\n const template = deepClone(this.props.template);\r\n const newTemplate = templateHelper.handleElementUpdates(\r\n element,\r\n template\r\n );\r\n dispatch(templateActions.softUpdate(newTemplate));\r\n }\r\n };\r\n setAttribute = (attr, path) => {\r\n const { selectedElement } = this.props;\r\n const names = path.split(\".\");\r\n let element = deepClone(selectedElement);\r\n\r\n if (path === \"data.style\") {\r\n const defSettings = content.find(el => {\r\n return el.settings.type === element.data.type;\r\n });\r\n element.data.style = deepClone(defSettings.settings.style);\r\n } else if (names.length === 3) {\r\n element[names[0]][names[1]][names[2]] = attr;\r\n } else {\r\n element[names[0]][names[1]] = attr;\r\n }\r\n this.handleSoftUpdate(element);\r\n };\r\n handleSlider(e, path) {\r\n const names = path.split(\".\");\r\n const selectedElement = deepClone(this.props.selectedElement);\r\n\r\n if (path === \"data.style.width\") {\r\n selectedElement[names[0]][names[1]][names[2]] = e + \"%\";\r\n } else if (path === \"data.titleWidth\") {\r\n selectedElement.data.inputWidth = 100 - e;\r\n selectedElement[names[0]][names[1]] = e /* + '%' */;\r\n } else if (path === \"data.inputWidth\") {\r\n selectedElement.data.titleWidth = 100 - e;\r\n selectedElement[names[0]][names[1]] = e /* + '%' */;\r\n }\r\n this.handleSoftUpdate(selectedElement);\r\n }\r\n addressOnChange = e => {\r\n this.setState({ value: e.target.value });\r\n };\r\n toggle = (tabPane, tab) => {\r\n const newArray = this.state.activeTab.slice();\r\n newArray[tabPane] = tab;\r\n this.setState({\r\n activeTab: newArray\r\n });\r\n };\r\n handleChange(e, path, val) {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n let value = null;\r\n\r\n if (val && val.hex !== undefined) {\r\n const { r, g, b, a } = val.rgb;\r\n value = `rgba(${r},${g},${b},${a})`;\r\n } else if (e.target === undefined) value = e;\r\n else if (val) value = val;\r\n else value = e.target.value;\r\n\r\n if (names.length === 2) {\r\n element[names[0]][names[1]] = value;\r\n } else if (names.length === 3) {\r\n element[names[0]][names[1]][names[2]] = value;\r\n } else if (names.length === 4) {\r\n element[names[0]][names[1]][names[2]][names[3]] = value;\r\n }\r\n this.handleSoftUpdate(element);\r\n }\r\n handleSelectOnChange = (selectedOption, path) => {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n if (names.length === 2) {\r\n element[names[0]][names[1]] = selectedOption.value;\r\n } else if (names.length === 3) {\r\n element[names[0]][names[1]][names[2]] = selectedOption.value;\r\n } else if (names.length === 4) {\r\n element[names[0]][names[1]][names[2]][names[3]] = selectedOption.value;\r\n }\r\n this.handleSoftUpdate(element);\r\n }\r\n toggleMediaVault = () => {\r\n this.setState({ isMediaVaultOpen: !this.state.isMediaVaultOpen });\r\n };\r\n render() {\r\n const { selectedElement, confirmation } = this.props;\r\n let confirmationOptions = confirmation && confirmation.confirmationList ? confirmation.confirmationList.map(cl=> {\r\n return {label:cl.name, value:cl.confirmationId};\r\n }) : [];\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, \"data.style.height\")}\r\n type=\"number\"\r\n value={parseInt(selectedElement.data.style.height)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\r\n return t.value === selectedElement.data.confirmationId;\r\n })}\r\n onChange={selectedOption =>\r\n this.handleSelectOnChange(\r\n selectedOption,\r\n \"data.confirmationId\"\r\n )\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n const { enviroment } = state.cms;\r\n let selectedElement = null;\r\n if (enviroment === sourceTypes.FORM)\r\n selectedElement = state.form.selectedElement;\r\n if (enviroment === sourceTypes.PAGE)\r\n selectedElement = state.page.selectedElement;\r\n if (enviroment === sourceTypes.TEMPLATE)\r\n selectedElement = state.template.selectedElement;\r\n return {\r\n enviroment: enviroment,\r\n template: state.template.template,\r\n form: state.form,\r\n page: state.page,\r\n confirmation:state.confirmation,\r\n selectedElement: selectedElement\r\n };\r\n}\r\nexport default connect(mapStateToProps)(UserPageSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SketchPicker } from \"react-color\";\r\nimport {\r\n Row,\r\n Col,\r\n Label,\r\n Input\r\n} from \"reactstrap\";\r\nimport Select from 'react-select';\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport { templateHelper } from \"../../../template/helpers/templateHelper\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { setValueToNestedObject, deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport ColorPickerFacade from \"../../../../../components/UI/Buttons/ColorPickerFacade\";\r\nimport { UseTemplateButton, SetStyleToAllOfItsType, SetToAuto } from \"../../components/UseTemplateButton\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { UrlMultiInput } from \"../../../../components/editor/tools/UrlMultiInput/UrlMultiInput\";\r\nimport { emptySpaceHandler } from \"./EmptySpace.handler\";\r\n\r\n\r\n\r\nclass EmptySpaceSettings extends React.Component {\r\n state = {\r\n spreadActiveSet: []\r\n }\r\n handleSoftUpdate = element => {\r\n const { dispatch } = this.props;\r\n element.content = emptySpaceHandler.elementEditor(element.style);\r\n dispatch(emailActions.updateEmailElement(element, null, true, this.props.inherit));\r\n }\r\n useTemplateStyle = (stylePath, templatePath) => {\r\n const { selectedElement, template } = this.props;\r\n let elementCopy = deepClone(selectedElement);\r\n let templateCopy = deepClone(template)\r\n\r\n const styleParts = stylePath.split(\".\");\r\n const templateParts = templatePath.split(\".\");\r\n\r\n let unit = templateHelper.getUnit(templateCopy, templateParts);\r\n let value = templateHelper.getValueWithoutUnit(templateCopy, templateParts);\r\n\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n\r\n elementCopy.style = setValueToNestedObject(\r\n styleParts,\r\n value,\r\n elementCopy.style\r\n );\r\n\r\n this.handleSoftUpdate(elementCopy);\r\n\r\n if (this.state.spreadActiveSet.includes(styleParts[styleParts.length - 1]) || this.state.spreadActiveSet.includes(styleParts[styleParts.length - 2] + styleParts[styleParts.length - 1])) {\r\n this.spreadStyle(elementCopy.type, styleParts, value)\r\n }\r\n\r\n }\r\n spreadStyle = (type, parts, value) => {\r\n const elementsCopy = Array.from(this.props.elements);\r\n if (elementsCopy.length === 0) return;\r\n const typeFamily = elementsCopy.filter(el => el.type === type);\r\n if (typeFamily.length === 0) return;\r\n typeFamily.map(tf => {\r\n let newEl = deepClone(tf);\r\n newEl.content = emptySpaceHandler.elementEditor(newEl.style);\r\n newEl.style = setValueToNestedObject(\r\n parts,\r\n value,\r\n newEl.style\r\n );\r\n this.handleSoftUpdate(newEl);\r\n });\r\n }\r\n handleChange = (e, val, path) => {\r\n const { selectedElement } = this.props;\r\n const names = path.split(\".\");\r\n let elementCopy = deepClone(selectedElement);\r\n let value = val;\r\n if (val && val.hex !== undefined) {\r\n value = templateHelper.parseRgbaToHex(val)\r\n }\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n value,\r\n elementCopy.style\r\n );\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, value)\r\n }\r\n }\r\n spreadToggler = (name) => {\r\n let spreadActiveSet = Array.from(this.state.spreadActiveSet);\r\n if (spreadActiveSet.includes(name)) {\r\n spreadActiveSet = spreadActiveSet.filter(n => { return n !== name });\r\n }\r\n else {\r\n spreadActiveSet.push(name)\r\n }\r\n this.setState({ spreadActiveSet });\r\n }\r\n handleSpaceOnChange = (e, path, dir) => {\r\n const names = path.split(\".\");\r\n const elementCopy = deepClone(this.props.selectedElement);\r\n const spaceValue = elementCopy.style[names[0]][names[1]];\r\n let value = e.target.value;\r\n let splitted = spaceValue.toString().split(' ')\r\n let baseValue = '';\r\n if (splitted.length > 1) {\r\n splitted[dir] = value + 'px';\r\n splitted = splitted.join(' ')\r\n baseValue = splitted;\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n splitted,\r\n elementCopy.style\r\n );\r\n }\r\n else {\r\n let newString = `${splitted[0]}px ${splitted[0]}px ${splitted[0]}px ${splitted[0]}px`;\r\n newString = newString.split(' ');\r\n newString[dir] = value + 'px';\r\n baseValue = newString;\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n newString,\r\n elementCopy.style\r\n );\r\n }\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, baseValue)\r\n }\r\n }\r\n convertSpaceValue = (value, index) => {\r\n let splitted = value.toString().split(' ')\r\n if (splitted.length > 1) {\r\n return parseInt(splitted[index]);\r\n }\r\n else {\r\n return parseInt(splitted[0]);\r\n }\r\n }\r\n render() {\r\n const { selectedElement, template } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, color, \"styleProps.backgroundColor\")\r\n }\r\n />\r\n \r\n
\r\n \r\n this.useTemplateStyle(\r\n \"styleProps.backgroundColor\",\r\n \"main.backgroundColor\"\r\n )}\r\n active={(selectedElement.style.styleProps.backgroundColor === template.content.main.backgroundColor)}\r\n />\r\n this.spreadToggler('backgroundColor')}\r\n active={this.state.spreadActiveSet.includes('backgroundColor')}\r\n />\r\n
\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n attachUnit={true}\r\n steps={1}\r\n max={1000}\r\n min={1}\r\n path={'styleProps.height'}\r\n label=\"Height\"\r\n />\r\n \r\n this.spreadToggler('height')}\r\n active={this.state.spreadActiveSet.includes('height')}\r\n />\r\n
\r\n\r\n \r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n elements: state.email.elements,\r\n template: state.template.template,\r\n inherit: state.email.inherit,\r\n selectedElement: state.email.selectedElement\r\n };\r\n}\r\nexport default connect(mapStateToProps)(EmptySpaceSettings);\r\n","import React from 'react';\r\nimport { Row, Col, Form, FormGroup, Label, Input, FormText } from 'reactstrap';\r\nimport './TagSection.css'\r\nimport { createTagDictionary } from '../models/tagDictionary';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport clsx from 'clsx';\r\nimport { connect } from 'react-redux';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport CardMedia from '@material-ui/core/CardMedia';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport Avatar from '@material-ui/core/Avatar';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { red } from '@material-ui/core/colors';\r\nimport FavoriteIcon from '@material-ui/icons/Favorite';\r\nimport ShareIcon from '@material-ui/icons/Share';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport HelpOutlineOutlinedIcon from '@material-ui/icons/HelpOutlineOutlined';\r\nimport Popover from \"@material-ui/core/Popover\";\r\nimport Chip from '@material-ui/core/Chip';\r\nimport FaceIcon from '@material-ui/icons/Face';\r\nimport DoneIcon from '@material-ui/icons/Done';\r\nimport AddCircleOutlinedIcon from '@material-ui/icons/AddCircleOutlined';\r\nimport { cmsActions } from '../../../../store/actions/cms/cms.action';\r\nimport SystemLabel from '../../../../system/SystemLabel/SystemLabel';\r\n\r\n\r\n\r\nfunction RecipeReviewCard(props) {\r\n const [expanded, setExpanded] = React.useState(false);\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const handleExpandClick = () => {\r\n setExpanded(!expanded);\r\n };\r\n const handleClick = event => {\r\n setAnchorEl(event.currentTarget);\r\n props.dispatch(cmsActions.blockDeselect(true))\r\n //load all colors from template\r\n };\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n setTimeout(() => props.dispatch(cmsActions.blockDeselect(false)), 2000)\r\n };\r\n const open = Boolean(anchorEl);\r\n const id = open ? \"simple-popover\" : undefined;\r\n return (\r\n \r\n \r\n {/* {expanded ? \r\n \r\n \r\n \r\n }\r\n style={{ textAlign: 'left', padding: '10px 16px' }}\r\n title={\r\n {props.tooltipComponent}\r\n \r\n \r\n \r\n {props.children}\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return state\r\n}\r\nexport default connect(mapStateToProps)(RecipeReviewCard);","import React from 'react';\r\nimport './TagSection.css'\r\nimport { createTagDictionary } from '../models/tagDictionary';\r\nimport Chip from '@material-ui/core/Chip';\r\nimport RecipeReviewCard from './RecipeReviewCard';\r\n\r\nexport const TagSection = ({ tags, onAdd }) => {\r\n const editorTags = createTagDictionary();\r\n return (\r\n \r\n {editorTags.map((t, i) => {\r\n return (\r\n
\r\n \r\n {t.tags.map((ti, i2) => {\r\n return (\r\n onAdd(ti.editFacade)}\r\n />\r\n )\r\n })}\r\n
\r\n \r\n )\r\n })}\r\n
\r\n \r\n
\r\n
\r\n {this.state.activeTab[0] === \"1\" && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, color, \"wrapper.backgroundColor\")\r\n }\r\n />\r\n \r\n
\r\n \r\n this.useTemplateStyle(\r\n \"wrapper.backgroundColor\",\r\n \"content.backgroundColor\"\r\n )}\r\n active={(selectedElement.style.wrapper.backgroundColor === template.content.content.backgroundColor)}\r\n />\r\n this.spreadToggler('backgroundColor')}\r\n active={this.state.spreadActiveSet.includes('backgroundColor')}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, color, \"styleProps.color\")\r\n }\r\n />\r\n \r\n
\r\n \r\n this.useTemplateStyle(\r\n \"styleProps.color\",\r\n \"text.color\"\r\n )}\r\n active={(selectedElement.style.styleProps.color === template.content.text.color)}\r\n />\r\n this.spreadToggler('color')}\r\n active={this.state.spreadActiveSet.includes('color')}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `styleProps.padding`, 0)}\r\n value={this.convertSpaceValue(selectedElement.style.styleProps.padding, 0)} />\r\n
\r\n
this.handleSpaceOnChange(e, `styleProps.padding`, 1)}\r\n value={this.convertSpaceValue(selectedElement.style.styleProps.padding, 1)} />\r\n
\r\n
this.handleSpaceOnChange(e, `styleProps.padding`, 2)}\r\n value={this.convertSpaceValue(selectedElement.style.styleProps.padding, 2)} />\r\n
\r\n
this.handleSpaceOnChange(e, `styleProps.padding`, 3)}\r\n value={this.convertSpaceValue(selectedElement.style.styleProps.padding, 3)} />\r\n
\r\n \r\n this.spreadToggler('padding')}\r\n active={this.state.spreadActiveSet.includes('padding')}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n this.handleChange(null, selectedOption.value, 'styleProps.fontFamily')\r\n }\r\n styles={selectStyles}\r\n />\r\n \r\n \r\n
\r\n \r\n this.spreadToggler('fontFamily')}\r\n active={this.state.spreadActiveSet.includes('fontFamily')}\r\n />\r\n
\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n attachUnit={true}\r\n steps={1}\r\n max={500}\r\n min={1}\r\n extraParam={'text.fontSize'}\r\n path={'styleProps.fontSize'}\r\n label=\"FontSize\"\r\n />\r\n \r\n this.useTemplateStyle(\r\n \"styleProps.fontSize\",\r\n \"text.fontSize\"\r\n )}\r\n active={(selectedElement.style.styleProps.fontSize === template.content.text.fontSize)}\r\n />\r\n this.spreadToggler('fontSize')}\r\n active={this.state.spreadActiveSet.includes('fontSize')}\r\n />\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n elements: state.email.elements,\r\n inherit: state.email.inherit,\r\n template: state.template.template,\r\n selectedElement: state.email.selectedElement\r\n };\r\n}\r\nexport default connect(mapStateToProps)(TextAreaSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SketchPicker } from \"react-color\";\r\nimport {\r\n Row,\r\n Col,\r\n Label,\r\n Input,\r\n InputGroup,\r\n TabContent\r\n} from \"reactstrap\";\r\nimport Select from 'react-select';\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport { templateHelper } from \"../../../template/helpers/templateHelper\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { setValueToNestedObject, deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport ColorPickerFacade from \"../../../../../components/UI/Buttons/ColorPickerFacade\";\r\nimport { UseTemplateButton, SetStyleToAllOfItsType, SetToAuto } from \"../../components/UseTemplateButton\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { UrlMultiInput } from \"../../../../components/editor/tools/UrlMultiInput/UrlMultiInput\";\r\nimport { backgroundWithImageHandler } from \"./BackgroundImageWithText.handler\";\r\nimport { emailFonts } from \"../../models/emailFonts/emailFonts\";\r\nimport { TextCustomedTabGroup } from \"../../../../components/editor/tools/EditorTabGroup\";\r\nimport { TagToolbar } from \"../../../tags/containers/TagToolbar\";\r\nimport { cmsActions } from \"../../../../../store/actions/cms/cms.action\";\r\n/* import Resizer from 'react-image-file-resizer';\r\nimport Axios from \"axios\"; */\r\n\r\n\r\nclass LargeImageWithTextSettings extends React.Component {\r\n state = {\r\n spreadActiveSet: [],\r\n activeTab: new Array(2).fill(\"1\")\r\n }\r\n toggle = (tabPane, tab) => {\r\n const newArray = this.state.activeTab.slice();\r\n newArray[tabPane] = tab;\r\n this.setState({\r\n activeTab: newArray\r\n });\r\n };\r\n handleSoftUpdate = element => {\r\n const { dispatch } = this.props;\r\n /* element.content = textAreaHandler.elementEditor(element.style); */\r\n dispatch(emailActions.updateEmailElement(element, null, true, this.props.inherit));\r\n }\r\n useTemplateStyle = (stylePath, templatePath) => {\r\n const { selectedElement, template } = this.props;\r\n let elementCopy = deepClone(selectedElement);\r\n let templateCopy = deepClone(template)\r\n const styleParts = stylePath.split(\".\");\r\n const templateParts = templatePath.split(\".\");\r\n\r\n let unit = templateHelper.getUnit(templateCopy, templateParts);\r\n let value = templateHelper.getValueWithoutUnit(templateCopy, templateParts);\r\n\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n\r\n elementCopy.style = setValueToNestedObject(\r\n styleParts,\r\n value,\r\n elementCopy.style\r\n );\r\n elementCopy.style.inheritedStyles.push({ templatePath, stylePath });\r\n\r\n this.handleSoftUpdate(elementCopy);\r\n\r\n if (this.state.spreadActiveSet.includes(styleParts[styleParts.length - 1]) || this.state.spreadActiveSet.includes(styleParts[styleParts.length - 2] + styleParts[styleParts.length - 1])) {\r\n this.spreadStyle(elementCopy.type, styleParts, value, templatePath)\r\n }\r\n\r\n }\r\n /* resizeFile = (file) => new Promise(resolve => {\r\n\r\n Resizer.imageFileResizer(file, 300, 300, 'JPEG', 100, 0,\r\n uri => {\r\n resolve(uri);\r\n },\r\n 'base64'\r\n );\r\n }); */\r\n inheritedStylesControl = (selectedElement, val, templatePath, stylePath) => {\r\n const { template } = this.props;\r\n if (!selectedElement.style.inheritedStyles ||\r\n selectedElement.style.inheritedStyles.length === 0) {\r\n return;\r\n }\r\n let templateCopy = deepClone(template)\r\n const newElement = deepClone(selectedElement);\r\n const templateParts = templatePath.split(\".\");\r\n let unit = templateHelper.getUnit(templateCopy, templateParts);\r\n let value = templateHelper.getValueWithoutUnit(templateCopy, templateParts);\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n if (value !== val) {\r\n newElement.style.inheritedStyles = newElement.style.inheritedStyles.filter(s => s.templatePath !== templatePath);\r\n }\r\n else {\r\n\r\n newElement.style.inheritedStyles.push({ templatePath: templatePath, stylePath: stylePath })\r\n }\r\n return newElement;\r\n }\r\n handleChange = (e, val, path, templatePath = null) => {\r\n const { selectedElement } = this.props;\r\n const names = path.split(\".\");\r\n let elementCopy = deepClone(selectedElement);\r\n let value = val;\r\n if (val && val.hex !== undefined) {\r\n value = templateHelper.parseColorToRgba(val)\r\n }\r\n if (templatePath !== null) {\r\n elementCopy = this.inheritedStylesControl(elementCopy, value, templatePath, path)\r\n }\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n value,\r\n elementCopy.style\r\n );\r\n elementCopy.content = backgroundWithImageHandler.elementEditor(elementCopy.style);\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, value, templatePath)\r\n }\r\n }\r\n spreadStyle = (type, parts, value, templatePath = null) => {\r\n const elementsCopy = Array.from(this.props.elements);\r\n const { selectedElement } = this.props;\r\n if (elementsCopy.length === 0) return;\r\n const typeFamily = elementsCopy.filter(el => el.type === type && el.id !== selectedElement.id);\r\n if (typeFamily.length > 0) {\r\n typeFamily.map(tf => {\r\n let newEl = deepClone(tf);\r\n newEl.style = setValueToNestedObject(\r\n parts,\r\n value,\r\n newEl.style\r\n );\r\n if (templatePath && Array.isArray(newEl.style.inheritedStyles)) {\r\n newEl = this.inheritedStylesControl(\r\n newEl,\r\n value,\r\n templatePath,\r\n parts.join('.'))\r\n }\r\n this.handleSoftUpdate(newEl);\r\n });\r\n }\r\n if (selectedElement.families.length > 0) {\r\n const typeFamilyTree = elementsCopy.filter(el => el.families && el.families.length > 0 && el.id !== selectedElement.id);\r\n if (typeFamilyTree.length === 0) return;\r\n selectedElement.families.map(f => {\r\n typeFamilyTree.map(tf => {\r\n if (tf.families.includes(f)) {\r\n let newEl = deepClone(tf);\r\n if (tf.families.length > 1) {\r\n if (newEl.style[f + 'Style'] !== undefined) {\r\n newEl.style = setValueToNestedObject(\r\n [f + 'Style', parts[parts.length - 1]],\r\n value,\r\n newEl.style\r\n );\r\n }\r\n }\r\n else {\r\n if (newEl.style.styleProps !== undefined) {\r\n newEl.style = setValueToNestedObject(\r\n ['styleProps', parts[parts.length - 1]],\r\n value,\r\n newEl.style\r\n );\r\n }\r\n }\r\n if (templatePath && Array.isArray(newEl.style.inheritedStyles)) {\r\n newEl = this.inheritedStylesControl(\r\n newEl,\r\n value,\r\n templatePath,\r\n tf.families.length > 1 ?\r\n [f + 'Style', parts[parts.length - 1]].join('.') :\r\n ['styleProps', parts[parts.length - 1]].join('.'))\r\n }\r\n this.handleSoftUpdate(newEl);\r\n }\r\n })\r\n })\r\n\r\n }\r\n }\r\n onAddTag = (tag) => {\r\n const { selectedElement } = this.props;\r\n if (selectedElement.style.elementProps.editor)\r\n selectedElement.style.elementProps.editor.selection.setContent(tag, { format: 'raw' })\r\n }\r\n spreadToggler = (name) => {\r\n let spreadActiveSet = Array.from(this.state.spreadActiveSet);\r\n if (spreadActiveSet.includes(name)) {\r\n spreadActiveSet = spreadActiveSet.filter(n => { return n !== name });\r\n }\r\n else {\r\n spreadActiveSet.push(name)\r\n }\r\n this.setState({ spreadActiveSet });\r\n }\r\n handleSpaceOnChange = (e, path, dir) => {\r\n const names = path.split(\".\");\r\n const elementCopy = deepClone(this.props.selectedElement);\r\n const spaceValue = elementCopy.style[names[0]][names[1]];\r\n let value = e.target.value;\r\n let splitted = spaceValue.toString().split(' ')\r\n let baseValue = '';\r\n if (splitted.length > 1) {\r\n splitted[dir] = value + 'px';\r\n splitted = splitted.join(' ')\r\n baseValue = splitted;\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n splitted,\r\n elementCopy.style\r\n );\r\n }\r\n else {\r\n let newString = `${splitted[0]}px ${splitted[0]}px ${splitted[0]}px ${splitted[0]}px`;\r\n newString = newString.split(' ');\r\n newString[dir] = value + 'px';\r\n baseValue = newString;\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n newString.join(' '),\r\n elementCopy.style\r\n );\r\n }\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, baseValue)\r\n }\r\n }\r\n convertSpaceValue = (value, index) => {\r\n let splitted = value.toString().split(' ')\r\n if (splitted.length > 1) {\r\n return parseInt(splitted[index]);\r\n }\r\n else {\r\n return parseInt(splitted[0]);\r\n }\r\n }\r\n setImage = async (value) => {\r\n this.handleChange(null, value, 'elementProps.source')\r\n const { dispatch, cms } = this.props;\r\n setTimeout(() => dispatch(cmsActions.blockDeselect(false)), 2000)\r\n }\r\n blockDeselect = (status) => {\r\n const { dispatch, cms } = this.props;\r\n dispatch(cmsActions.blockDeselect(status));\r\n }\r\n render() {\r\n const { selectedElement, template } = this.props;\r\n const selectStyles = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: '12px',\r\n fontFamily: data.value,\r\n padding: \"0 10px\",\r\n };\r\n },\r\n container: styles => ({\r\n ...styles,\r\n minWidth: \"100%\",\r\n borderRight: '1px solid gainsboro'\r\n }),\r\n /* control: styles => ({\r\n borderWidth: '1px'\r\n }), */\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: '12px',\r\n fontFamily: data.value,\r\n };\r\n }\r\n };\r\n return (\r\n \r\n\r\n \r\n {this.state.activeTab[0] === \"1\" && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n this.handleChange(null, `url('${template.content.main.backgroundUrl}')`, 'elementProps.source')}\r\n alt=\"\"\r\n src={selectedElement.style.elementProps.source}\r\n />\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, color, \"textStyle.color\")\r\n }\r\n />\r\n \r\n
\r\n \r\n this.spreadToggler('color')}\r\n active={this.state.spreadActiveSet.includes('color')}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n
this.handleSpaceOnChange(e, `textStyle.padding`, 0)}\r\n value={this.convertSpaceValue(selectedElement.style.textStyle.padding, 0)} />\r\n
\r\n
this.handleSpaceOnChange(e, `textStyle.padding`, 1)}\r\n value={this.convertSpaceValue(selectedElement.style.textStyle.padding, 1)} />\r\n
\r\n
this.handleSpaceOnChange(e, `textStyle.padding`, 2)}\r\n value={this.convertSpaceValue(selectedElement.style.textStyle.padding, 2)} />\r\n
\r\n
this.handleSpaceOnChange(e, `textStyle.padding`, 3)}\r\n value={this.convertSpaceValue(selectedElement.style.textStyle.padding, 3)} />\r\n
\r\n \r\n this.spreadToggler('padding')}\r\n active={this.state.spreadActiveSet.includes('padding')}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n this.handleChange(null, selectedOption.value, 'textStyle.fontFamily')\r\n }\r\n styles={selectStyles}\r\n />\r\n \r\n \r\n
\r\n \r\n this.spreadToggler('fontFamily')}\r\n active={this.state.spreadActiveSet.includes('fontFamily')}\r\n />\r\n
\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n attachUnit={true}\r\n steps={1}\r\n max={500}\r\n min={1}\r\n extraParam={'text.fontSize'}\r\n path={'textStyle.fontSize'}\r\n label=\"FontSize\"\r\n />\r\n \r\n this.useTemplateStyle(\r\n \"textStyle.fontSize\",\r\n \"text.fontSize\"\r\n )}\r\n active={(selectedElement.style.textStyle.fontSize === template.content.text.fontSize)}\r\n />\r\n this.spreadToggler('fontSize')}\r\n active={this.state.spreadActiveSet.includes('fontSize')}\r\n />\r\n
\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n attachUnit={true}\r\n steps={1}\r\n max={500}\r\n min={1}\r\n path={'textStyle.lineHeight'}\r\n label=\"LineHeight\"\r\n />\r\n \r\n this.spreadToggler('lineHeight')}\r\n active={this.state.spreadActiveSet.includes('lineHeight')}\r\n />\r\n
\r\n \r\n )}\r\n\r\n {this.state.activeTab[0] === \"2\" && (\r\n \r\n
\r\n )}\r\n \r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n elements: state.email.elements,\r\n template: state.template.template,\r\n inherit: state.email.inherit,\r\n selectedElement: state.email.selectedElement\r\n };\r\n}\r\nexport default connect(mapStateToProps)(LargeImageWithTextSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SketchPicker } from \"react-color\";\r\nimport { Row, Col, Label, Input, InputGroup, TabContent } from \"reactstrap\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { templateHelper } from \"../../../template/helpers/templateHelper\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { setValueToNestedObject, deepClone } from \"../../../../../helpers/objectHelper\";\r\n\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { largeHeaderImageHandler } from \"./LargeHeaderImage.handler\";\r\n\r\nimport PhotoSizeSelectLargeIcon from \"@material-ui/icons/PhotoSizeSelectLarge\";\r\n\r\nclass LargeHeaderImageSettings extends React.Component {\r\n state = {\r\n spreadActiveSet: [],\r\n activeTab: new Array(2).fill(\"1\"),\r\n };\r\n handleSoftUpdate = (element) => {\r\n const { dispatch } = this.props;\r\n dispatch(emailActions.updateEmailElement(element, null, true, this.props.inherit));\r\n };\r\n useTemplateStyle = (stylePath, templatePath) => {\r\n const { selectedElement, template } = this.props;\r\n let elementCopy = deepClone(selectedElement);\r\n let templateCopy = deepClone(template);\r\n const styleParts = stylePath.split(\".\");\r\n const templateParts = templatePath.split(\".\");\r\n\r\n let unit = templateHelper.getUnit(templateCopy, templateParts);\r\n let value = templateHelper.getValueWithoutUnit(templateCopy, templateParts);\r\n\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n\r\n elementCopy.style = setValueToNestedObject(styleParts, value, elementCopy.style);\r\n elementCopy.style.inheritedStyles.push({ templatePath, stylePath });\r\n\r\n this.handleSoftUpdate(elementCopy);\r\n\r\n if (this.state.spreadActiveSet.includes(styleParts[styleParts.length - 1]) || this.state.spreadActiveSet.includes(styleParts[styleParts.length - 2] + styleParts[styleParts.length - 1])) {\r\n this.spreadStyle(elementCopy.type, styleParts, value, templatePath);\r\n }\r\n };\r\n inheritedStylesControl = (selectedElement, val, templatePath, stylePath) => {\r\n const { template } = this.props;\r\n if (!selectedElement.style.inheritedStyles || selectedElement.style.inheritedStyles.length === 0) {\r\n return;\r\n }\r\n let templateCopy = deepClone(template);\r\n const newElement = deepClone(selectedElement);\r\n const templateParts = templatePath.split(\".\");\r\n let unit = templateHelper.getUnit(templateCopy, templateParts);\r\n let value = templateHelper.getValueWithoutUnit(templateCopy, templateParts);\r\n\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n if (value !== val) {\r\n newElement.style.inheritedStyles = newElement.style.inheritedStyles.filter((s) => s.templatePath !== templatePath);\r\n } else {\r\n newElement.style.inheritedStyles.push({ templatePath: templatePath, stylePath: stylePath });\r\n }\r\n return newElement;\r\n };\r\n handleChange = (e, val, path, templatePath = null) => {\r\n const { selectedElement } = this.props;\r\n const names = path.split(\".\");\r\n let elementCopy = deepClone(selectedElement);\r\n let value = val;\r\n if (val && val.hex !== undefined) {\r\n /* value = templateHelper.parseColorToRgba(val) */\r\n value = templateHelper.parseRgbaToHex(val);\r\n }\r\n /* if (templatePath !== null) {\r\n elementCopy = this.inheritedStylesControl(elementCopy, value, templatePath, path)\r\n } */\r\n elementCopy.style = setValueToNestedObject(names, value, elementCopy.style);\r\n elementCopy.content = largeHeaderImageHandler.elementEditor(elementCopy.style);\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, value, templatePath);\r\n }\r\n };\r\n spreadStyle = (type, parts, value, templatePath = null) => {\r\n const elementsCopy = Array.from(this.props.elements);\r\n const { selectedElement } = this.props;\r\n if (elementsCopy.length === 0) return;\r\n const typeFamily = elementsCopy.filter((el) => el.type === type && el.id !== selectedElement.id);\r\n if (typeFamily.length > 0) {\r\n typeFamily.map((tf) => {\r\n let newEl = deepClone(tf);\r\n newEl.style = setValueToNestedObject(parts, value, newEl.style);\r\n if (templatePath && Array.isArray(newEl.style.inheritedStyles)) {\r\n newEl = this.inheritedStylesControl(newEl, value, templatePath, parts.join(\".\"));\r\n }\r\n this.handleSoftUpdate(newEl);\r\n });\r\n }\r\n if (selectedElement.families.length > 0) {\r\n const typeFamilyTree = elementsCopy.filter((el) => el.families && el.families.length > 0 && el.id !== selectedElement.id);\r\n if (typeFamilyTree.length === 0) return;\r\n selectedElement.families.map((f) => {\r\n typeFamilyTree.map((tf) => {\r\n if (tf.families.includes(f)) {\r\n let newEl = deepClone(tf);\r\n if (tf.families.length > 1) {\r\n if (newEl.style[f + \"Style\"] !== undefined) {\r\n newEl.style = setValueToNestedObject([f + \"Style\", parts[parts.length - 1]], value, newEl.style);\r\n }\r\n } else {\r\n if (newEl.style.styleProps !== undefined) {\r\n newEl.style = setValueToNestedObject([\"styleProps\", parts[parts.length - 1]], value, newEl.style);\r\n }\r\n }\r\n if (templatePath && Array.isArray(newEl.style.inheritedStyles)) {\r\n newEl = this.inheritedStylesControl(\r\n newEl,\r\n value,\r\n templatePath,\r\n tf.families.length > 1 ? [f + \"Style\", parts[parts.length - 1]].join(\".\") : [\"styleProps\", parts[parts.length - 1]].join(\".\")\r\n );\r\n }\r\n this.handleSoftUpdate(newEl);\r\n }\r\n });\r\n });\r\n }\r\n };\r\n spreadToggler = (name) => {\r\n let spreadActiveSet = Array.from(this.state.spreadActiveSet);\r\n if (spreadActiveSet.includes(name)) {\r\n spreadActiveSet = spreadActiveSet.filter((n) => {\r\n return n !== name;\r\n });\r\n } else {\r\n spreadActiveSet.push(name);\r\n }\r\n this.setState({ spreadActiveSet });\r\n };\r\n handleSpaceOnChange = (e, path, dir) => {\r\n const names = path.split(\".\");\r\n const elementCopy = deepClone(this.props.selectedElement);\r\n const spaceValue = elementCopy.style[names[0]][names[1]];\r\n let value = e.target.value;\r\n let splitted = spaceValue.toString().split(\" \");\r\n let baseValue = \"\";\r\n if (splitted.length > 1) {\r\n splitted[dir] = value + \"px\";\r\n splitted = splitted.join(\" \");\r\n baseValue = splitted;\r\n elementCopy.style = setValueToNestedObject(names, splitted, elementCopy.style);\r\n } else {\r\n let newString = `${splitted[0]} ${splitted[0]} ${splitted[0]} ${splitted[0]}`;\r\n newString = newString.split(\" \");\r\n newString[dir] = value + \"px\";\r\n baseValue = newString;\r\n elementCopy.style = setValueToNestedObject(names, newString.join(\" \"), elementCopy.style);\r\n }\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, baseValue);\r\n }\r\n };\r\n convertSpaceValue = (value, index) => {\r\n let splitted = value.toString().split(\" \");\r\n if (splitted.length > 1) {\r\n return parseInt(splitted[index]);\r\n } else {\r\n return parseInt(splitted[0]);\r\n }\r\n };\r\n toggle = (tabPane, tab) => {\r\n const newArray = this.state.activeTab.slice();\r\n newArray[tabPane] = tab;\r\n this.setState({\r\n activeTab: newArray,\r\n });\r\n };\r\n onAddTag = (tag) => {\r\n const { selectedElement } = this.props;\r\n if (selectedElement.style.elementProps.editor) selectedElement.style.elementProps.editor.selection.setContent(tag, { format: \"raw\" });\r\n };\r\n render() {\r\n const { selectedElement, template } = this.props;\r\n const selectStyles = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n fontFamily: data.value,\r\n padding: \"0 10px\",\r\n };\r\n },\r\n container: (styles) => ({\r\n ...styles,\r\n minWidth: \"100%\",\r\n borderRight: \"1px solid gainsboro\",\r\n }),\r\n /* control: styles => ({\r\n borderWidth: '1px'\r\n }), */\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n fontFamily: data.value,\r\n };\r\n },\r\n };\r\n return (\r\n \r\n \r\n \r\n {this.state.activeTab[0] === \"1\" && (\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={\"px\"}\r\n attachUnit={true}\r\n steps={1}\r\n max={800}\r\n min={1}\r\n extraParam={\"text.height\"}\r\n path={\"elementProps.height\"}\r\n label=\"MaxHeight\"\r\n />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={\"px\"}\r\n attachUnit={true}\r\n steps={1}\r\n max={680}\r\n min={1}\r\n extraParam={\"text.height\"}\r\n path={\"elementProps.width\"}\r\n label=\"Width\"\r\n />\r\n \r\n )}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n elements: state.email.elements,\r\n inherit: state.email.inherit,\r\n template: state.template.template,\r\n selectedElement: state.email.selectedElement,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(LargeHeaderImageSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SketchPicker } from \"react-color\";\r\nimport {\r\n Row,\r\n Col,\r\n Label,\r\n Input,\r\n InputGroup,\r\n TabContent\r\n} from \"reactstrap\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { templateHelper } from \"../../../template/helpers/templateHelper\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { setValueToNestedObject, deepClone } from \"../../../../../helpers/objectHelper\";\r\n\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { smallHeaderImageHandler } from \"./SmallHeaderImage.handler\";\r\n\r\nimport PhotoSizeSelectLargeIcon from '@material-ui/icons/PhotoSizeSelectLarge';\r\n\r\n\r\nclass SmallHeaderImageSettings extends React.Component {\r\n state = {\r\n spreadActiveSet: [],\r\n activeTab: new Array(2).fill(\"1\")\r\n }\r\n handleSoftUpdate = element => {\r\n const { dispatch } = this.props;\r\n dispatch(emailActions.updateEmailElement(element, null, true, this.props.inherit));\r\n }\r\n useTemplateStyle = (stylePath, templatePath) => {\r\n const { selectedElement, template } = this.props;\r\n let elementCopy = deepClone(selectedElement);\r\n let templateCopy = deepClone(template)\r\n const styleParts = stylePath.split(\".\");\r\n const templateParts = templatePath.split(\".\");\r\n\r\n let unit = templateHelper.getUnit(templateCopy, templateParts);\r\n let value = templateHelper.getValueWithoutUnit(templateCopy, templateParts);\r\n\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n\r\n elementCopy.style = setValueToNestedObject(\r\n styleParts,\r\n value,\r\n elementCopy.style\r\n );\r\n elementCopy.style.inheritedStyles.push({ templatePath, stylePath });\r\n\r\n this.handleSoftUpdate(elementCopy);\r\n\r\n if (this.state.spreadActiveSet.includes(styleParts[styleParts.length - 1]) || this.state.spreadActiveSet.includes(styleParts[styleParts.length - 2] + styleParts[styleParts.length - 1])) {\r\n this.spreadStyle(elementCopy.type, styleParts, value, templatePath)\r\n }\r\n\r\n }\r\n inheritedStylesControl = (selectedElement, val, templatePath, stylePath) => {\r\n const { template } = this.props;\r\n if (!selectedElement.style.inheritedStyles ||\r\n selectedElement.style.inheritedStyles.length === 0) {\r\n return;\r\n }\r\n let templateCopy = deepClone(template)\r\n const newElement = deepClone(selectedElement);\r\n const templateParts = templatePath.split(\".\");\r\n let unit = templateHelper.getUnit(templateCopy, templateParts);\r\n let value = templateHelper.getValueWithoutUnit(templateCopy, templateParts);\r\n\r\n\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n if (value !== val) {\r\n newElement.style.inheritedStyles = newElement.style.inheritedStyles.filter(s => s.templatePath !== templatePath);\r\n }\r\n else {\r\n\r\n newElement.style.inheritedStyles.push({ templatePath: templatePath, stylePath: stylePath })\r\n }\r\n return newElement;\r\n }\r\n handleChange = (e, val, path, templatePath = null) => {\r\n const { selectedElement } = this.props;\r\n const names = path.split(\".\");\r\n let elementCopy = deepClone(selectedElement);\r\n let value = val;\r\n if (val && val.hex !== undefined) {\r\n /* value = templateHelper.parseColorToRgba(val) */\r\n value = templateHelper.parseRgbaToHex(val)\r\n }\r\n /* if (templatePath !== null) {\r\n elementCopy = this.inheritedStylesControl(elementCopy, value, templatePath, path)\r\n } */\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n value,\r\n elementCopy.style\r\n );\r\n elementCopy.content = smallHeaderImageHandler.elementEditor(elementCopy.style);\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, value, templatePath)\r\n }\r\n }\r\n spreadStyle = (type, parts, value, templatePath = null) => {\r\n const elementsCopy = Array.from(this.props.elements);\r\n const { selectedElement } = this.props;\r\n if (elementsCopy.length === 0) return;\r\n const typeFamily = elementsCopy.filter(el => el.type === type && el.id !== selectedElement.id);\r\n if (typeFamily.length > 0) {\r\n typeFamily.map(tf => {\r\n let newEl = deepClone(tf);\r\n newEl.style = setValueToNestedObject(\r\n parts,\r\n value,\r\n newEl.style\r\n );\r\n if (templatePath && Array.isArray(newEl.style.inheritedStyles)) {\r\n newEl = this.inheritedStylesControl(\r\n newEl,\r\n value,\r\n templatePath,\r\n parts.join('.'))\r\n }\r\n this.handleSoftUpdate(newEl);\r\n });\r\n }\r\n if (selectedElement.families.length > 0) {\r\n const typeFamilyTree = elementsCopy.filter(el => el.families && el.families.length > 0 && el.id !== selectedElement.id);\r\n if (typeFamilyTree.length === 0) return;\r\n selectedElement.families.map(f => {\r\n typeFamilyTree.map(tf => {\r\n if (tf.families.includes(f)) {\r\n let newEl = deepClone(tf);\r\n if (tf.families.length > 1) {\r\n if (newEl.style[f + 'Style'] !== undefined) {\r\n newEl.style = setValueToNestedObject(\r\n [f + 'Style', parts[parts.length - 1]],\r\n value,\r\n newEl.style\r\n );\r\n }\r\n }\r\n else {\r\n if (newEl.style.styleProps !== undefined) {\r\n newEl.style = setValueToNestedObject(\r\n ['styleProps', parts[parts.length - 1]],\r\n value,\r\n newEl.style\r\n );\r\n }\r\n }\r\n if (templatePath && Array.isArray(newEl.style.inheritedStyles)) {\r\n newEl = this.inheritedStylesControl(\r\n newEl,\r\n value,\r\n templatePath,\r\n tf.families.length > 1 ?\r\n [f + 'Style', parts[parts.length - 1]].join('.') :\r\n ['styleProps', parts[parts.length - 1]].join('.'))\r\n }\r\n this.handleSoftUpdate(newEl);\r\n }\r\n })\r\n })\r\n\r\n }\r\n }\r\n spreadToggler = (name) => {\r\n let spreadActiveSet = Array.from(this.state.spreadActiveSet);\r\n if (spreadActiveSet.includes(name)) {\r\n spreadActiveSet = spreadActiveSet.filter(n => { return n !== name });\r\n }\r\n else {\r\n spreadActiveSet.push(name)\r\n }\r\n this.setState({ spreadActiveSet });\r\n }\r\n handleSpaceOnChange = (e, path, dir) => {\r\n\r\n const names = path.split(\".\");\r\n const elementCopy = deepClone(this.props.selectedElement);\r\n const spaceValue = elementCopy.style[names[0]][names[1]];\r\n let value = e.target.value;\r\n let splitted = spaceValue.toString().split(' ')\r\n let baseValue = '';\r\n if (splitted.length > 1) {\r\n splitted[dir] = value + 'px';\r\n splitted = splitted.join(' ')\r\n baseValue = splitted;\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n splitted,\r\n elementCopy.style\r\n );\r\n }\r\n else {\r\n let newString = `${splitted[0]} ${splitted[0]} ${splitted[0]} ${splitted[0]}`;\r\n newString = newString.split(' ');\r\n newString[dir] = value + 'px';\r\n baseValue = newString;\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n newString.join(' '),\r\n elementCopy.style\r\n );\r\n }\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, baseValue)\r\n }\r\n }\r\n convertSpaceValue = (value, index) => {\r\n let splitted = value.toString().split(' ')\r\n if (splitted.length > 1) {\r\n return parseInt(splitted[index]);\r\n }\r\n else {\r\n return parseInt(splitted[0]);\r\n }\r\n }\r\n toggle = (tabPane, tab) => {\r\n const newArray = this.state.activeTab.slice();\r\n newArray[tabPane] = tab;\r\n this.setState({\r\n activeTab: newArray\r\n });\r\n };\r\n onAddTag = (tag) => {\r\n const { selectedElement } = this.props;\r\n if (selectedElement.style.elementProps.editor)\r\n selectedElement.style.elementProps.editor.selection.setContent(tag, { format: 'raw' })\r\n }\r\n render() {\r\n const { selectedElement, template } = this.props;\r\n const selectStyles = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: '12px',\r\n fontFamily: data.value,\r\n padding: \"0 10px\",\r\n };\r\n },\r\n container: styles => ({\r\n ...styles,\r\n minWidth: \"100%\",\r\n borderRight: '1px solid gainsboro'\r\n }),\r\n /* control: styles => ({\r\n borderWidth: '1px'\r\n }), */\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: '12px',\r\n fontFamily: data.value,\r\n };\r\n }\r\n };\r\n return (\r\n \r\n \r\n \r\n {this.state.activeTab[0] === \"1\" && (\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n attachUnit={true}\r\n steps={1}\r\n max={800}\r\n min={1}\r\n extraParam={'text.height'}\r\n path={'styleProps.height'}\r\n label=\"Height\"\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n elements: state.email.elements,\r\n inherit: state.email.inherit,\r\n template: state.template.template,\r\n selectedElement: state.email.selectedElement\r\n };\r\n}\r\nexport default connect(mapStateToProps)(SmallHeaderImageSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {\r\n Row,\r\n Col,\r\n Label, FormGroup, Input\r\n} from \"reactstrap\";\r\nimport { pageActions } from \"../../../../../store/actions/cms/page/page.action\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport ArchiveContainer from \"../../../../../file/containers/ArchiveContainer\";\r\nimport { content } from \"../../../../models/content\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { templateHelper } from \"../../../../areas/template/helpers/templateHelper\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport { UrlMultiInput } from \"../../../../components/editor/tools/UrlMultiInput/UrlMultiInput\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport Select from 'react-select';\r\nimport ImageAspectRatioIcon from '@material-ui/icons/ImageAspectRatio';\r\nimport { cms } from \"../../../../../store/reducers/cms/cms.reducer\";\r\nimport { cmsActions } from \"../../../../../store/actions/cms/cms.action\";\r\n\r\nconst shapes = [\r\n { value: 'CIRCLE', label: \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n
null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={5}\r\n max={500}\r\n min={1}\r\n path={'data.viewport.width'}\r\n label=\"ViewPortWidth\"\r\n />\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n steps={5}\r\n max={500}\r\n min={1}\r\n path={'data.viewport.height'}\r\n label=\"ViewPortHeight\"\r\n />\r\n \r\n \r\n \r\n \r\n {\r\n return { value: t.value, label: t.label };\r\n })}\r\n value={shapes.find(t => {\r\n return t.value === selectedElement.data.shape;\r\n })}\r\n onChange={selectedOption =>\r\n this.handleChange(\r\n null,\r\n selectedOption.value,\r\n \"data.shape\"\r\n )\r\n }\r\n />\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n const { enviroment } = state.cms;\r\n let selectedElement = null;\r\n if (enviroment === sourceTypes.FORM)\r\n selectedElement = state.form.selectedElement;\r\n if (enviroment === sourceTypes.PAGE)\r\n selectedElement = state.page.selectedElement;\r\n if (enviroment === sourceTypes.TEMPLATE)\r\n selectedElement = state.template.selectedElement;\r\n return {\r\n enviroment: enviroment,\r\n template: state.template.template,\r\n form: state.form,\r\n page: state.page,\r\n selectedElement: selectedElement\r\n };\r\n}\r\nexport default connect(mapStateToProps)(ProfileImageUploaderSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport \"rc-slider/assets/index.css\";\r\nimport { Input, Row, InputGroup, InputGroupAddon, InputGroupText, Col, Label, TabContent } from \"reactstrap\";\r\nimport Select from \"react-select\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { validationTypes } from \"../../../../../common/validationType\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport { tempLangConverter } from \"../../../../../helpers/lanugageHelper\";\r\nimport CondtionTypeList from \"../../../../areas/form/conditions/components/CondtionTypeList\";\r\nimport { displayTypesField, sortTypes } from \"../../../../models/displayTypes\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { ElementTabGroup } from \"../../../../components/editor/tools/EditorTabGroup\";\r\nimport JirangoSwitch from \"../../../../../components/UI/Switch/JirangoSwitch\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { renderElementSettings } from \"../../../../helpers/renderElementSettings\";\r\n\r\nconst optionStyle = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n padding: \"0 10px\",\r\n };\r\n },\r\n container: (styles) => ({\r\n ...styles,\r\n minWidth: \"100%\",\r\n }),\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n };\r\n },\r\n};\r\n\r\nclass RebateSettings extends React.Component {\r\n state = { activeTab: new Array(2).fill(\"1\"), isChange: false };\r\n componentDidMount() {\r\n this.setState({\r\n activeTab: new Array(2).fill(\"1\"),\r\n });\r\n }\r\n handleSoftUpdate = (element) => {\r\n const { dispatch } = this.props;\r\n dispatch(formActions.updateFormElement(element));\r\n };\r\n handleSelectOnChange = (options, path) => {\r\n const names = path.split(\".\");\r\n const selectedElement = deepClone(this.props.selectedElement);\r\n if (names.length === 2) {\r\n selectedElement[names[0]][names[1]] = options.value;\r\n } else if (names.length === 3) {\r\n selectedElement[names[0]][names[1]][names[2]] = options.value;\r\n }\r\n\r\n this.handleSoftUpdate(selectedElement);\r\n };\r\n toggle = (tabPane, tab) => {\r\n const newArray = this.state.activeTab.slice();\r\n newArray[tabPane] = tab;\r\n this.setState({\r\n activeTab: newArray,\r\n });\r\n };\r\n handleChange = (e, val, path) => {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n let value = val !== null && val !== undefined ? val : e.target.value;\r\n\r\n if (e && e.target.value === \"\" && path === \"props.length\") {\r\n value = 0;\r\n }\r\n if (e && e.target.type === \"checkbox\") {\r\n value = e.target.checked;\r\n }\r\n if (path === \"data.titleWidth\") {\r\n element.data.inputWidth = 100 - value;\r\n }\r\n if (path === \"data.inputWidth\") {\r\n element.data.titleWidth = 100 - value;\r\n }\r\n\r\n if (names.length === 2) {\r\n element[names[0]][names[1]] = value;\r\n } else if (names.length === 3) {\r\n element[names[0]][names[1]][names[2]] = value;\r\n } else if (names.length === 4) {\r\n element[names[0]][names[1]][names[2]][names[3]] = value;\r\n }\r\n this.handleSoftUpdate(element);\r\n };\r\n render() {\r\n const { selectedElement, selectedContainer } = this.props.form;\r\n return (\r\n selectedElement && (\r\n \r\n \r\n
\r\n
\r\n {this.state.activeTab[0] === \"1\" ?
: null}\r\n\r\n {this.state.activeTab[0] === \"2\" && (\r\n \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={\"px\"}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"data.padding\"}\r\n label=\"Padding\"\r\n />\r\n )}\r\n {selectedElement.data.alignment !== \"center\" ? (\r\n \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={\"%\"}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"data.titleWidth\"}\r\n label=\"TitleColumnWidth\"\r\n />\r\n )}\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={\"%\"}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"data.inputWidth\"}\r\n label=\"FieldColumnWidth\"\r\n />\r\n )}\r\n \r\n ) : null}\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"%\"]}\r\n activeUnit={\"%\"}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n path={\"data.style.width\"}\r\n label=\"InnerWidth\"\r\n />\r\n \r\n )}\r\n {this.state.activeTab[0] === \"3\" && (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.changeLock`)} isChecked={selectedElement.data.changeLock !== true ? false : true} />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n )\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form,\r\n selectedElement: state.form.selectedElement,\r\n selectedContainer: state.form.selectedContainer,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(RebateSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SketchPicker } from \"react-color\";\r\nimport { Row, Col, Label, Input, InputGroup, TabContent } from \"reactstrap\";\r\nimport Select from \"react-select\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport { templateHelper } from \"../../../template/helpers/templateHelper\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { setValueToNestedObject, deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport ColorPickerFacade from \"../../../../../components/UI/Buttons/ColorPickerFacade\";\r\nimport { UseTemplateButton, SetStyleToAllOfItsType, SetToAuto } from \"../../components/UseTemplateButton\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { UrlMultiInput } from \"../../../../components/editor/tools/UrlMultiInput/UrlMultiInput\";\r\nimport { calendarInvitationHandler } from \"./CalendarInvitation.handler\";\r\nimport { emailFonts } from \"../../models/emailFonts/emailFonts\";\r\nimport { ElementTabGroup, TextCustomedTabGroup } from \"../../../../components/editor/tools/EditorTabGroup\";\r\nimport { TagToolbar } from \"../../../tags/containers/TagToolbar\";\r\nimport Axios from \"axios\";\r\nimport { FormGroup } from \"@material-ui/core\";\r\n\r\nclass CalendarInvitationSettings extends React.Component {\r\n state = {\r\n spreadActiveSet: [],\r\n invitations: [],\r\n activeTab: new Array(2).fill(\"1\"),\r\n };\r\n\r\n componentDidMount() {\r\n this.fetchCalendarInvitations();\r\n }\r\n\r\n handleSoftUpdate = (element) => {\r\n const { dispatch } = this.props;\r\n dispatch(emailActions.updateEmailElement(element, null, true, this.props.inherit));\r\n };\r\n\r\n handleInput = (text) => {\r\n const { selectedElement } = this.props;\r\n let elementCopy = deepClone(selectedElement);\r\n elementCopy.style.elementProps.text = text;\r\n this.handleSoftUpdate(elementCopy);\r\n };\r\n\r\n handleChange = (val, name) => {\r\n const { selectedElement } = this.props;\r\n let elementCopy = deepClone(selectedElement);\r\n\r\n elementCopy.style.elementProps.link = `https://jirango.com/cms/api/calendar/geticalfile/${val}?badgeNo=[badgeNo]`;\r\n\r\n elementCopy.style.elementProps.text = `${name}.ical`;\r\n /* elementCopy.style.elementProps.link = ` IcalFile `; */\r\n elementCopy.style.elementProps.invitationId = val;\r\n this.handleSoftUpdate(elementCopy);\r\n };\r\n\r\n fetchCalendarInvitations = () => {\r\n Axios.get(`./api/calendar/getCalendarInvites/${this.props.cms.eventId}`).then(({ data }) => {\r\n this.setState({\r\n invitations: data.map((d) => {\r\n return {\r\n value: d.calendarInviteId,\r\n label: d.name,\r\n };\r\n }),\r\n });\r\n });\r\n };\r\n\r\n render() {\r\n const { selectedElement, template } = this.props;\r\n const selectStyles = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n fontFamily: data.value,\r\n padding: \"0 10px\",\r\n };\r\n },\r\n container: (styles) => ({\r\n ...styles,\r\n minWidth: \"100%\",\r\n borderRight: \"1px solid gainsboro\",\r\n }),\r\n /* control: styles => ({\r\n borderWidth: '1px'\r\n }), */\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n fontFamily: data.value,\r\n };\r\n },\r\n };\r\n console.log(this.state.invitations);\r\n return (\r\n \r\n \r\n \r\n {this.state.activeTab[0] === \"1\" && (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n null}\r\n value={\r\n selectedElement\r\n ? {\r\n value: selectedElement.style.elementProps.invitationId,\r\n label: this.state.invitations.find((i) => i.value == selectedElement.style.elementProps.invitationId)?.label,\r\n }\r\n : null\r\n }\r\n onChange={(selectedOption) => this.handleChange(selectedOption.value, selectedOption.label)}\r\n styles={selectStyles}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n elements: state.email.elements,\r\n inherit: state.email.inherit,\r\n template: state.template.template,\r\n selectedElement: state.email.selectedElement,\r\n cms: state.cms,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(CalendarInvitationSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Row, Col, Label, InputGroup, FormGroup, Input } from \"reactstrap\";\r\nimport { pageActions } from \"../../../../../store/actions/cms/page/page.action\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { templateHelper } from \"../../../../areas/template/helpers/templateHelper\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\n\r\nclass GroupRegistrationSettings extends React.Component {\r\n state = {\r\n isMediaVaultOpen: false,\r\n invitations: [],\r\n };\r\n handleSoftUpdate = (element) => {\r\n const { dispatch, enviroment, page } = this.props;\r\n if (enviroment === sourceTypes.FORM) dispatch(formActions.updateFormElement(element));\r\n if (enviroment === sourceTypes.PAGE) dispatch(pageActions.updatePageElement(element, null, page));\r\n if (enviroment === sourceTypes.TEMPLATE) {\r\n const template = deepClone(this.props.template);\r\n const newTemplate = templateHelper.handleElementUpdates(element, template);\r\n dispatch(templateActions.softUpdate(newTemplate));\r\n }\r\n };\r\n\r\n toggle = (tabPane, tab) => {\r\n const newArray = this.state.activeTab.slice();\r\n newArray[tabPane] = tab;\r\n this.setState({\r\n activeTab: newArray,\r\n });\r\n };\r\n handleChange = (e, val, path) => {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n let value = null;\r\n if (val && val.hex !== undefined) {\r\n const { r, g, b, a } = val.rgb;\r\n value = `rgba(${r},${g},${b},${a})`;\r\n } else if (val) value = val;\r\n else if (e !== null) value = e.target.value;\r\n else return;\r\n if (names.length === 2) {\r\n element[names[0]][names[1]] = value;\r\n } else if (names.length === 3) {\r\n element[names[0]][names[1]][names[2]] = value;\r\n } else if (names.length === 4) {\r\n element[names[0]][names[1]][names[2]][names[3]] = value;\r\n }\r\n this.handleSoftUpdate(element);\r\n };\r\n\r\n toggleMediaVault = () => {\r\n this.setState({ isMediaVaultOpen: !this.state.isMediaVaultOpen });\r\n };\r\n render() {\r\n const selectStyles = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n fontFamily: data.value,\r\n padding: \"0 10px\",\r\n };\r\n },\r\n container: (styles) => ({\r\n ...styles,\r\n minWidth: \"100%\",\r\n borderRight: \"1px solid gainsboro\",\r\n }),\r\n /* control: styles => ({\r\n borderWidth: '1px'\r\n }), */\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n fontFamily: data.value,\r\n };\r\n },\r\n };\r\n const { selectedElement } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.returnPage`)}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n const { enviroment } = state.cms;\r\n let selectedElement = null;\r\n if (enviroment === sourceTypes.FORM) selectedElement = state.form.selectedElement;\r\n if (enviroment === sourceTypes.PAGE) selectedElement = state.page.selectedElement;\r\n if (enviroment === sourceTypes.TEMPLATE) selectedElement = state.template.selectedElement;\r\n return {\r\n enviroment: enviroment,\r\n template: state.template.template,\r\n form: state.form,\r\n page: state.page,\r\n selectedElement: selectedElement,\r\n cms: state.cms,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(GroupRegistrationSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Row, Col, Label, InputGroup, FormGroup, Input as RSInput } from \"reactstrap\";\r\nimport { pageActions } from \"../../../../../store/actions/cms/page/page.action\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { templateHelper } from \"../../../../areas/template/helpers/templateHelper\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport clsx from \"clsx\";\r\nimport Input from \"@material-ui/core/Input\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport ListItemText from \"@material-ui/core/ListItemText\";\r\nimport Select from \"@material-ui/core/Select\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport Chip from \"@material-ui/core/Chip\";\r\nimport { cmsActions } from \"../../../../../store/actions/cms/cms.action\";\r\nimport InputBase from \"@material-ui/core/InputBase\";\r\nimport { makeStyles, withStyles } from \"@material-ui/core/styles\";\r\n\r\nconst BootstrapInput = withStyles((theme) => ({\r\n root: {\r\n \"label + &\": {\r\n marginTop: theme.spacing(3),\r\n },\r\n },\r\n input: {\r\n borderRadius: 4,\r\n position: \"relative\",\r\n backgroundColor: theme.palette.background.paper,\r\n border: \"1px solid #ced4da\",\r\n fontSize: 16,\r\n padding: \"10px 26px 10px 12px\",\r\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\r\n // Use the system font instead of the default Roboto font.\r\n fontFamily: [\"-apple-system\", \"BlinkMacSystemFont\", '\"Segoe UI\"', \"Roboto\", '\"Helvetica Neue\"', \"Arial\", \"sans-serif\", '\"Apple Color Emoji\"', '\"Segoe UI Emoji\"', '\"Segoe UI Symbol\"'].join(\",\"),\r\n \"&:focus\": {\r\n borderRadius: 4,\r\n borderColor: \"#80bdff\",\r\n boxShadow: \"0 0 0 0.2rem rgba(0,123,255,.25)\",\r\n },\r\n },\r\n}))(InputBase);\r\nclass FileUploaderSettings extends React.Component {\r\n state = {\r\n isMediaVaultOpen: false,\r\n invitations: [],\r\n };\r\n handleSoftUpdate = (element) => {\r\n const { dispatch, enviroment, page } = this.props;\r\n if (enviroment === sourceTypes.FORM) dispatch(formActions.updateFormElement(element));\r\n if (enviroment === sourceTypes.PAGE) dispatch(pageActions.updatePageElement(element, null, page));\r\n if (enviroment === sourceTypes.TEMPLATE) {\r\n const template = deepClone(this.props.template);\r\n const newTemplate = templateHelper.handleElementUpdates(element, template);\r\n dispatch(templateActions.softUpdate(newTemplate));\r\n }\r\n };\r\n\r\n toggle = (tabPane, tab) => {\r\n const newArray = this.state.activeTab.slice();\r\n newArray[tabPane] = tab;\r\n this.setState({\r\n activeTab: newArray,\r\n });\r\n };\r\n handleChange = (e, val, path) => {\r\n const names = path.split(\".\");\r\n const element = deepClone(this.props.selectedElement);\r\n let value = null;\r\n\r\n if (path == \"data.allowedFiletypes\") {\r\n value = e;\r\n } else if (val && val.hex !== undefined) {\r\n const { r, g, b, a } = val.rgb;\r\n value = `rgba(${r},${g},${b},${a})`;\r\n } else if (val) value = val;\r\n else if (e !== null) value = e.target.value;\r\n else return;\r\n\r\n if (path == \"data.allowedFiletypes\") {\r\n if (!element.data.allowedFiletypes) {\r\n element.data.allowedFiletypes = [];\r\n }\r\n if (element.data.allowedFiletypes.includes(value)) {\r\n element.data.allowedFiletypes.splice(element.data.allowedFiletypes.indexOf(value), 1);\r\n } else {\r\n element.data.allowedFiletypes.push(value);\r\n }\r\n } else if (names.length === 2) {\r\n element[names[0]][names[1]] = value;\r\n } else if (names.length === 3) {\r\n element[names[0]][names[1]][names[2]] = value;\r\n } else if (names.length === 4) {\r\n element[names[0]][names[1]][names[2]][names[3]] = value;\r\n }\r\n this.handleSoftUpdate(element);\r\n console.log(element.data.allowedFiletypes);\r\n };\r\n\r\n toggleMediaVault = () => {\r\n this.setState({ isMediaVaultOpen: !this.state.isMediaVaultOpen });\r\n };\r\n render() {\r\n const selectStyles = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n fontFamily: data.value,\r\n padding: \"0 10px\",\r\n };\r\n },\r\n container: (styles) => ({\r\n ...styles,\r\n minWidth: \"100%\",\r\n borderRight: \"1px solid gainsboro\",\r\n }),\r\n /* control: styles => ({\r\n borderWidth: '1px'\r\n }), */\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"12px\",\r\n fontFamily: data.value,\r\n };\r\n },\r\n };\r\n const { selectedElement } = this.props;\r\n return (\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.minFiles`)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `data.maxFiles`)}\r\n />\r\n \r\n \r\n
*/}\r\n \r\n \r\n \r\n \r\n this.props.dispatch(cmsActions.blockDeselect(true))}\r\n unBlock={() => this.props.dispatch(cmsActions.blockDeselect(false))}\r\n options={selectedElement.data.allowedFiletypes}\r\n onChange={(type) => this.handleChange(type, null, `data.allowedFiletypes`)}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n const { enviroment } = state.cms;\r\n let selectedElement = null;\r\n if (enviroment === sourceTypes.FORM) selectedElement = state.form.selectedElement;\r\n if (enviroment === sourceTypes.PAGE) selectedElement = state.page.selectedElement;\r\n if (enviroment === sourceTypes.TEMPLATE) selectedElement = state.template.selectedElement;\r\n return {\r\n enviroment: enviroment,\r\n template: state.template.template,\r\n form: state.form,\r\n page: state.page,\r\n selectedElement: selectedElement,\r\n cms: state.cms,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(FileUploaderSettings);\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n formControl: {\r\n margin: theme.spacing(1),\r\n minWidth: 120,\r\n maxWidth: 300,\r\n },\r\n chips: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n },\r\n chip: {\r\n margin: 2,\r\n },\r\n noLabel: {\r\n marginTop: theme.spacing(3),\r\n },\r\n}));\r\n\r\nconst ITEM_HEIGHT = 48;\r\nconst ITEM_PADDING_TOP = 8;\r\n\r\nconst OPTIONS = [\r\n { label: \"Pdf\", value: \".pdf,\" },\r\n { label: \"Powerpoints\", value: \".ppt,\" },\r\n { label: \"Documents\", value: \".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .txt,\" },\r\n { label: \"Images\", value: \"image/*,\" },\r\n { label: \"Excel\", value: \".xls, .xlsx,\" },\r\n { label: \"Audio\", value: \".mp4, .mp3,\" },\r\n];\r\nconst MenuProps = {\r\n PaperProps: {\r\n style: {\r\n maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,\r\n width: 250,\r\n },\r\n },\r\n};\r\n\r\nfunction MultipleSelect({ options = [], onChange, block, unBlock }) {\r\n return (\r\n \r\n
\r\n block()}\r\n labelId=\"demo-mutiple-chip-label\"\r\n id=\"demo-mutiple-chip\"\r\n multiple\r\n value={options}\r\n input={\r\n {options.map((value) => (\r\n o.value == value)?.label} style={{ margin: 2 }} />\r\n ))}\r\n
\r\n )}\r\n MenuProps={MenuProps}\r\n >\r\n {OPTIONS.map((name) => (\r\n {\r\n onChange(name.value);\r\n setTimeout(() => unBlock(), 1500);\r\n }}\r\n key={name.label}\r\n value={name.value}\r\n >\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {text}\r\n \r\n \r\n \r\n \r\n \r\n }) : null}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}","import React from \"react\";\r\nimport { Pagination, PaginationItem, PaginationLink, Row, Col, NavLink } from \"reactstrap\";\r\nimport MoreHorizIcon from \"@material-ui/icons/MoreHoriz\";\r\nimport MoreVertIcon from \"@material-ui/icons/MoreVert\";\r\nimport Popover from \"@material-ui/core/Popover\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport AccountTreeIcon from \"@material-ui/icons/AccountTree\";\r\nimport NoteAddIcon from \"@material-ui/icons/NoteAdd\";\r\nimport DeleteIcon from \"@material-ui/icons/Delete\";\r\nimport SettingsIcon from \"@material-ui/icons/Settings\";\r\nimport ConfirmModal from \"../../../../components/ConfirmModal/ConfirmModal\";\r\nimport LastPageIcon from \"@material-ui/icons/LastPage\";\r\nimport FirstPageIcon from \"@material-ui/icons/FirstPage\";\r\nimport \"./Pagination.css\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\n\r\nexport const FormPagination = ({ pages, currentPage, navigate, addPage, removePage, showMore, showSettings }) => {\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [showModal, setModal] = React.useState(false);\r\n const drawPageTabs = (totalPages, currentPage, navigate) => {\r\n let startPage = currentPage - 1;\r\n let endPage = currentPage + 1;\r\n\r\n if (startPage <= 0) {\r\n endPage -= startPage - 1;\r\n startPage = 1;\r\n }\r\n\r\n if (endPage > totalPages) {\r\n endPage = totalPages;\r\n }\r\n\r\n let pageTabs = [];\r\n\r\n for (let index = startPage; index <= endPage; index++) {\r\n pageTabs.push(\r\n \r\n navigate(index)}>\r\n {index}\r\n \r\n \r\n );\r\n }\r\n return pageTabs;\r\n };\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n const handleClick = (event) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n const onRemovePage = () => {\r\n removePage();\r\n setModal(false);\r\n };\r\n const toggleModal = () => {\r\n setModal(!showModal);\r\n };\r\n const open = Boolean(anchorEl);\r\n const id = open ? \"simple-popover\" : undefined;\r\n return (\r\n \r\n \r\n {pages > 3 ? (\r\n \r\n navigate(1)}>\r\n \r\n \r\n ) : null}\r\n \r\n (currentPage > 1 ? navigate(currentPage - 1) : null)}>\r\n \r\n \r\n {drawPageTabs(pages, currentPage, navigate).map((p) => {\r\n return p;\r\n })}\r\n \r\n (currentPage < pages ? navigate(currentPage + 1) : null)}>\r\n \r\n \r\n {pages > 3 ? (\r\n \r\n navigate(pages)}>\r\n \r\n \r\n ) : null}\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {\" \"}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {\r\n Row,\r\n Col,\r\n NavItem,\r\n NavLink\r\n} from \"reactstrap\";\r\nimport Popover from \"@material-ui/core/Popover\";\r\nimport SmartphoneIcon from \"@material-ui/icons/Smartphone\";\r\nimport TabletMacIcon from \"@material-ui/icons/TabletMac\";\r\nimport DesktopWindowsIcon from \"@material-ui/icons/DesktopWindows\";\r\nimport { templateConstants } from \"../../../../../constants/cms/template/template.constants\";\r\nimport \"./PreviewOption.css\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport { labelHelper } from \"../../../../../helpers/labelHelper\";\r\nimport Zoom from '@material-ui/core/Zoom';\r\nimport { Tooltip } from '@material-ui/core';\r\nconst cDevices = [\r\n {\r\n name: \"Desktop\",\r\n id: templateConstants.DESKTOP,\r\n icon: (\r\n \r\n toggleDevice(d.id)}\r\n >\r\n {deviceIcon(\"pop-list-icon slim\", d.id)}\r\n {/*
\r\n );\r\n });\r\n return devices;\r\n };\r\n const open = Boolean(anchorEl);\r\n const id = open ? \"simple-popover\" : undefined;\r\n return (\r\n \r\n \r\n \r\n \r\n {deviceIcon(\"editor-toolbar-icon\", device, { fontSize: '18px !important', color: open ? '#fff' : 'inital', marginBottom: '2px' })}\r\n \r\n \r\n \r\n {getDeviceOptions().map(d => {\r\n return d;\r\n })}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n device: state.template.previewDevice\r\n };\r\n}\r\nexport default connect(mapStateToProps)(PreviewOption);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { elementActions } from \"../../../../../store/actions/cms/element/element.action\";\r\nimport {\r\n Button,\r\n Col,\r\n FormGroup,\r\n Input,\r\n Label,\r\n Row,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n ButtonGroup\r\n} from \"reactstrap\";\r\nimport { defaultQuestionElement } from \"../../../../models/defaultElements\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport { tempLangConverter } from \"../../../../../helpers/lanugageHelper\";\r\n\r\nclass CreateQuestion extends React.Component {\r\n state = {\r\n labelSet: false,\r\n data: {\r\n editable: false,\r\n hidden: false,\r\n style: {},\r\n validation: {},\r\n relations: [],\r\n textRows: 0\r\n },\r\n typeIsValid: false,\r\n labelsIsValid: false,\r\n formIsValid: false,\r\n eventId: 0,\r\n formId: 0,\r\n\r\n props: {\r\n type: \"\",\r\n requiredMin: 0,\r\n requiredMax: 0,\r\n labels: [],\r\n subLabels: [],\r\n subInputs: [],\r\n\r\n options: []\r\n }\r\n };\r\n componentDidMount() {\r\n const { formId, eventId } = this.props.form;\r\n this.setState({ eventId, formId });\r\n }\r\n handleChange(e, path) {\r\n const names = path.split(\".\");\r\n const state = { ...this.state };\r\n\r\n let value = null;\r\n\r\n if (path === 'props.requiredMin') {\r\n value = e;\r\n }\r\n else {\r\n value = e.target.value;\r\n }\r\n if (names[1] === \"labels\") {\r\n state[names[0]][names[1]][names[2]][names[3]] = value;\r\n if (state.props.labels.length > 0 && !state.props.labels.find(l => l.text === '')) {\r\n state.labelsIsValid = true;\r\n }\r\n\r\n this.setState(state);\r\n } else {\r\n state[names[0]][names[1]] = value;\r\n this.setState(state);\r\n }\r\n }\r\n create = () => {\r\n const { formId, eventId, languageCode } = this.props.form;\r\n const { dispatch, event, action2 } = this.props;\r\n let el = {\r\n ...defaultQuestionElement,\r\n formId: formId,\r\n eventId: eventId,\r\n languageCode: languageCode,\r\n props: { ...this.state.props },\r\n data: defaultQuestionElement.data\r\n };\r\n dispatch(elementActions.create(el, event.eventLanguage));\r\n action2();\r\n };\r\n componentDidUpdate() {\r\n if (this.state.props.labels.length < 1 && this.state.labelSet === false && this.props.language && this.props.language.eventCodes) {\r\n\r\n const { eventCodes } = this.props.language;\r\n const { isOpen } = this.props;\r\n const state = { ...this.state };\r\n\r\n state.modal = isOpen;\r\n if (eventCodes) {\r\n for (let i = 0; i < eventCodes.length; i++) {\r\n state.props.labels.push({\r\n text: \"\",\r\n languageCode: eventCodes[i].code,\r\n isValid: false\r\n });\r\n state.props.subLabels.push({\r\n text: \"\",\r\n languageCode: eventCodes[i].code,\r\n isValid: false\r\n });\r\n state.props.subInputs.push({\r\n text: \"\",\r\n languageCode: eventCodes[i].code,\r\n isValid: false\r\n });\r\n }\r\n state.labelSet = true;\r\n }\r\n this.setState(state);\r\n }\r\n }\r\n setQuestionType = (type) => {\r\n const state = { ...this.state };\r\n state.props.type = type;\r\n state.typeIsValid = true;\r\n state.props.name = \"\";\r\n this.setState(state, () => {\r\n this.validateForm();\r\n });\r\n\r\n }\r\n validateForm = () => {\r\n const {\r\n typeIsValid,\r\n labelsIsValid\r\n } = this.state;\r\n this.setState({\r\n formIsValid: typeIsValid\r\n });\r\n };\r\n\r\n render() {\r\n const { title, actionLabel, action2 } = this.props;\r\n const { props, data } = this.state;\r\n const { eventCodes } = this.props.language;\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(\r\n e,\r\n `props.labels.${index}.text`\r\n )\r\n }\r\n />\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n this.setQuestionType(\"Text\")}\r\n color={props.type === \"Text\" ? \"success\" : \"secondary\"}>\r\n \r\n this.setQuestionType(\"Option\")}\r\n color={props.type === \"Option\" ? \"success\" : \"secondary\"}>\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}","import React from \"react\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport { connect } from 'react-redux';\r\nimport \"./ElementDropItem.css\";\r\nimport { cmsHelper } from \"../../../helpers/cmsHelper\";\r\nimport { sourceTypes } from \"../../../../constants/cms/sourceType\";\r\nimport { InheritedSymbol } from \"../tools/Inheritage/InheritedSymbol\";\r\n\r\nconst ElementDropItem = ({\r\n name,\r\n icon,\r\n userLabel = false,\r\n infoText,\r\n row,\r\n draggableId,\r\n enviroment,\r\n source,\r\n children,\r\n inherit = null,\r\n dispatch, listElements,\r\n customStyle = {},\r\n isContainer = false\r\n}) => {\r\n const addOnClick = () => {\r\n cmsHelper.addElementByClick(enviroment, listElements, source, draggableId, dispatch)\r\n }\r\n\r\n const className = row === true ? 'element-row-drop-item' : 'element-drop-item'\r\n if (isContainer === true) {\r\n return (\r\n \r\n )\r\n }\r\n return (\r\n \r\n\r\n {inherit ?
: null}\r\n {icon}\r\n
\r\n {enviroment !== sourceTypes.TEMPLATE && enviroment !== sourceTypes.EMAIL ?
: null}\r\n {userLabel === true ? (\r\n {name.substring(0, 26) + (name.length > 27 ? \"...\" : '')} \r\n ) : (\r\n \r\n {name ? \r\n )}\r\n {infoText ? (\r\n \r\n \r\n {infoText ? \r\n
\r\n {elements && elements.length > 0 ? (\r\n
\r\n {elements.filter(p => p.props.type === 'Text').length > 0 ? \r\n \r\n {provided => (\r\n \r\n \r\n {filteredElements\r\n .filter(el => {\r\n return el.props.type === \"Text\"\r\n })\r\n .map((e, index) => {\r\n return (\r\n \r\n {\r\n return l.languageCode === displayLang;\r\n }).text\r\n }\r\n row={true}\r\n userLabel={true}\r\n inherit={e.eventId != cms.eventId}\r\n draggableId={`${e.type}:${e.id}`}\r\n icon={\r\n
\r\n \r\n )}\r\n \r\n {elements.filter(p => p.props.type === 'Option').length > 0 ? \r\n : null}\r\n \r\n {provided => (\r\n \r\n \r\n {filteredElements\r\n .filter(el => {\r\n return el.props.type === \"Option\"\r\n })\r\n .map((e, index) => {\r\n return (\r\n \r\n {\r\n return l.languageCode === displayLang;\r\n }).text\r\n }\r\n row={true}\r\n inherit={e.eventId != cms.eventId}\r\n draggableId={`${e.type}:${e.id}`}\r\n userLabel={true}\r\n icon={\r\n
\r\n \r\n )}\r\n \r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(\r\n e,\r\n `props.labels.${index}.text`\r\n )\r\n }\r\n />\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n \r\n {\"\"} \r\n \r\n this.setFieldType(\"Person\")}\r\n color={props.type === \"Person\" ? \"success\" : \"secondary\"}>\r\n \r\n this.setFieldType(\"Company\")}\r\n color={props.type === \"Company\" ? \"success\" : \"secondary\"}>\r\n \r\n \r\n \r\n \r\n\r\n {props.type === \"Person\" && (\r\n \r\n \r\n \r\n )}\r\n {props.type === \"Company\" && (\r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form,\r\n language: state.language,\r\n event: state.event,\r\n elements: state.element.elements\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(CreateField);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { formActions } from \"../../../../store/actions/cms/form/form.action\";\r\nimport CreateField from \"../../element/Field/CreateField/CreateField\";\r\nimport ElementWrapper from \"../../../components/element/ElementWrapper/ElementWrapper\";\r\nimport { Droppable } from \"react-beautiful-dnd\";\r\nimport { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\nimport { AddElement } from \"../../../components/UI/List/AddElement/AddElement\";\r\nimport { Label, Row, Col } from \"reactstrap\";\r\nimport \"../../../components/UI/List/ElementItem/ElementItem.css\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport ElementDropItem from \"../../../components/editor/ElementDropItem/ElementDropItem\";\r\nimport PermIdentityOutlinedIcon from \"@material-ui/icons/PermIdentityOutlined\";\r\nimport WorkOutlineOutlinedIcon from \"@material-ui/icons/WorkOutlineOutlined\";\r\n\r\nclass FieldElements extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.toggle = this.toggle.bind(this);\r\n this.state = {\r\n collapse: false,\r\n simpleModal: false,\r\n contentModal: false,\r\n copyElement: null,\r\n useBase: null,\r\n list: null,\r\n companyIsPOpen: false,\r\n fieldIsOpen: false,\r\n };\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.form !== this.props.form && this.props.form !== undefined && this.props.elements !== undefined) {\r\n let result = [];\r\n this.props.elements.map((e, index) => {\r\n if (\r\n e.type === elementConstants.FIELD &&\r\n !this.props.form.formElements.find((el) => {\r\n return el.id === e.id && el.type === e.type;\r\n })\r\n ) {\r\n result.push(e);\r\n }\r\n });\r\n this.setState({ list: result });\r\n }\r\n }\r\n toggleCollapse = (area) => {\r\n this.setState({ [area]: !this.state[area] });\r\n };\r\n attach = (element) => {\r\n const { dispatch, form } = this.props;\r\n const adjusted = { ...element, formId: form.formId };\r\n dispatch(formActions.attach(adjusted));\r\n this.reset();\r\n };\r\n reset = () => {\r\n this.setState({\r\n copyElement: null,\r\n useBase: null,\r\n simpleModal: false,\r\n contentModal: false,\r\n });\r\n };\r\n preCreate = () => {\r\n this.setState({ contentModal: true });\r\n };\r\n preAttach = (element) => {\r\n this.setState({\r\n copyElement: () => this.copy(element),\r\n useBase: () => this.attach(element),\r\n simpleModal: true,\r\n });\r\n };\r\n filterActiveFields = () => {\r\n const filtered = [];\r\n const { form, elements } = this.props;\r\n if (elements !== undefined && form !== undefined && form.formElements !== undefined) {\r\n elements.map((el) => {\r\n if (\r\n !form.formElements.find((fel) => {\r\n return fel.id === el.id && fel.props !== null && fel.props.name === el.props.name && fel.props.type === el.props.type;\r\n }) &&\r\n el.type === elementConstants.FIELD\r\n ) {\r\n filtered.push(el);\r\n }\r\n });\r\n }\r\n return filtered;\r\n };\r\n\r\n toggle() {\r\n this.setState((state) => ({ collapse: !state.collapse }));\r\n }\r\n render() {\r\n const { elements, event, form, cms } = this.props;\r\n const { simpleModal, contentModal } = this.state;\r\n const filteredElements = this.filterActiveFields();\r\n const displayLang = cms.languageCode;\r\n if (elements === undefined) return null;\r\n return (\r\n \r\n
\r\n {elements && filteredElements.length > 0 ? (\r\n
\r\n {filteredElements.filter((p) => p.props.type === \"Person\").length > 0 ? (\r\n \r\n \r\n {(provided) => (\r\n \r\n \r\n {filteredElements\r\n .filter((el) => {\r\n return el.props.type === \"Person\" || (el.props.type === \"Person\" && el.eventId != cms.eventId && el.props.inherit != false);\r\n })\r\n .map((e, index) => {\r\n console.log(e.props.name, e.props.inherit);\r\n return (\r\n \r\n {\r\n return l.languageCode === displayLang;\r\n }).text\r\n }\r\n draggableId={`${e.type}:${e.id}`}\r\n row={true}\r\n infoText={e.props.name}\r\n userLabel={true}\r\n inherit={e.props.inherit && e.eventId != cms.eventId}\r\n icon={ \r\n \r\n );\r\n })}\r\n
\r\n \r\n )}\r\n \r\n {filteredElements.filter((p) => p.props.type === \"Company\").length > 0 ? (\r\n \r\n \r\n ) : null}\r\n \r\n {(provided) => (\r\n \r\n \r\n {filteredElements\r\n .filter((el) => {\r\n return el.props.type === \"Company\" || (el.props.type === \"Company\" && el.eventId != cms.eventId && el.props.inherit != false);\r\n })\r\n .map((e, index) => {\r\n return (\r\n \r\n {\r\n return l.languageCode === displayLang;\r\n }).text\r\n }\r\n draggableId={`${e.type}:${e.id}`}\r\n userLabel={true}\r\n row={true}\r\n infoText={e.props.name}\r\n inherit={e.eventId != cms.eventId}\r\n icon={ \r\n \r\n );\r\n })}\r\n
\r\n \r\n )}\r\n \r\n \r\n ) : null}\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(e, \"props.name\")}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n this.handleChange(e, \"props.description\")}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n \r\n this.handleChange(e, \"props.startDateTime\")\r\n }\r\n />\r\n \r\n \r\n \r\n this.handleChange(e, \"props.endDateTime\")}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n this.handleChange(e, \"props.city\")}\r\n />\r\n \r\n \r\n \r\n this.handleChange(e, \"props.venue\")}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n this.handleChange(e, \"props.max\")}\r\n />\r\n \r\n \r\n \r\n this.handleChange(e, \"props.amount\")}\r\n />\r\n \r\n \r\n \r\n this.handleChange(e, \"amountIncVatField\")}\r\n />\r\n \r\n \r\n \r\n this.handleChange(e, \"props.vatPercent\")}\r\n />\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {elements && elements.length > 0 ? (\r\n
\r\n \r\n \r\n {provided => (\r\n \r\n \r\n {elements.map((e, index) => {\r\n if (e.type === 3) {\r\n return (\r\n \r\n \r\n 27 ? \"...\" : '')}\r\n userLabel={true}\r\n row={true}\r\n inherit={e.props.inherit && e.eventId != cms.eventId}\r\n draggableId={`${e.type}:${e.id}`}\r\n icon={\r\n
\r\n
\r\n )}\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n {provided => (\r\n \r\n {elements &&\r\n elements.map((c, index) => {\r\n return (\r\n
\r\n \r\n {c.type.map((t, index) => {\r\n return (\r\n \r\n {this.props.enviroment !== sourceTypes.TEMPLATE ? this.addOnClick(`${elementConstants.CONTAINER}:${c.id}:${c.guid}`)} />
: null}\r\n
\r\n {provided => (\r\n \r\n \r\n {elements.map((e, index) => {\r\n return (\r\n \r\n
\r\n
\r\n )}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert,\r\n template: state.template,\r\n form: state.form\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(ContentElements);\r\n","import { elementConstants } from \"../../constants/cms/form/element/element.constants\";\r\n\r\nexport const paymentOptions = [\r\n {\r\n id: \"DIBS\",\r\n type: elementConstants.PAYMENT_OPTIONS,\r\n url:\r\n \"https://cdn.dibspayment.com/logo/checkout/combo/vert/DIBS_checkout_kombo_vertical_01.png\"\r\n },\r\n {\r\n id: \"INVOICE\",\r\n type: elementConstants.PAYMENT_OPTIONS\r\n }\r\n];\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Row, Col } from \"reactstrap\";\r\nimport ElementWrapper from \"../../../components/element/ElementWrapper/ElementWrapper\";\r\nimport { Droppable } from \"react-beautiful-dnd\";\r\nimport { paymentOptions } from \"../../../models/payments\";\r\nimport { securityHelper } from \"../../../../helpers/securityHelper\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport PaymentOutlinedIcon from \"@material-ui/icons/PaymentOutlined\";\r\nimport ElementDropItem from \"../../../components/editor/ElementDropItem/ElementDropItem\";\r\nclass PaymentElements extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.toggle = this.toggle.bind(this);\r\n this.state = {\r\n collapse: false,\r\n elements: null\r\n };\r\n }\r\n toggle() {\r\n this.setState(state => ({ collapse: !state.collapse }));\r\n }\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.form !== this.props.form && this.props.form !== undefined) {\r\n if (\r\n prevProps.form.formElements.length < this.props.form.formElements.length\r\n ) {\r\n this.reArrangeList();\r\n }\r\n }\r\n }\r\n\r\n reArrangeList = () => {\r\n const elements = Array.from(paymentOptions);\r\n elements.map(el => {\r\n el.guid = securityHelper.createGuid();\r\n });\r\n this.setState({ elements });\r\n };\r\n componentDidMount() {\r\n this.reArrangeList();\r\n }\r\n render() {\r\n const { elements } = this.state;\r\n return (\r\n \r\n \r\n {provided => (\r\n \r\n
\r\n {elements &&\r\n elements.map((e, index) => {\r\n switch (e.id) {\r\n case \"DIBS\":\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n\r\n default:\r\n return null;\r\n }\r\n })}\r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert,\r\n cElements: state.element,\r\n template: state.template,\r\n form: state.form\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(PaymentElements);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Row, Col } from \"reactstrap\";\r\nimport ElementWrapper from \"../../../components/element/ElementWrapper/ElementWrapper\";\r\nimport { Droppable } from \"react-beautiful-dnd\";\r\nimport { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport \"../../../style/ContentStyles.css\";\r\nimport FindInPageOutlinedIcon from \"@material-ui/icons/FindInPageOutlined\";\r\nimport ElementDropItem from \"../../../components/editor/ElementDropItem/ElementDropItem\";\r\nimport AccountCircleIcon from \"@material-ui/icons/AccountCircle\";\r\nimport MoneyOffIcon from \"@material-ui/icons/MoneyOff\";\r\nimport GroupAddIcon from \"@material-ui/icons/GroupAdd\";\r\nimport CloudUploadIcon from '@material-ui/icons/CloudUpload';\r\n\r\nclass UserPageElements extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.toggle = this.toggle.bind(this);\r\n this.state = {\r\n collapse: false,\r\n elements: null,\r\n };\r\n }\r\n toggle() {\r\n this.setState((state) => ({ collapse: !state.collapse }));\r\n }\r\n render() {\r\n return (\r\n \r\n \r\n {(provided) => (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert,\r\n cElements: state.element,\r\n template: state.template,\r\n page: state.page,\r\n form: state.form,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(UserPageElements);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Row, Label } from \"reactstrap\";\r\nimport ElementWrapper from \"../../../components/element/ElementWrapper/ElementWrapper\";\r\nimport { Droppable } from \"react-beautiful-dnd\";\r\nimport { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport '../../../style/ContentStyles.css'\r\nimport AccountBoxOutlinedIcon from '@material-ui/icons/AccountBoxOutlined';\r\nimport ElementDropItem from \"../../../components/editor/ElementDropItem/ElementDropItem\";\r\n\r\nclass UserPageElements extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.toggle = this.toggle.bind(this);\r\n this.state = {\r\n collapse: false,\r\n elements: null\r\n };\r\n }\r\n toggle() {\r\n this.setState(state => ({ collapse: !state.collapse }));\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n {provided => (\r\n \r\n
|
\r\n
\r\n \r\n
\r\n
\r\n
\r\n {thumbnail}\r\n
\r\n {enviroment !== sourceTypes.TEMPLATE && enviroment !== sourceTypes.EMAIL ?
: null}\r\n \r\n {provided => (\r\n \r\n \r\n {elements.filter(el => el.group === emailElementType.SIMPLE).map((e, index) => {\r\n return (\r\n \r\n
\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n {provided => (\r\n \r\n \r\n {elements.filter(el => el.group === emailElementType.MULTI).map((e, index) => {\r\n return (\r\n \r\n
\r\n
\r\n )}\r\n \r\n \r\n );\r\n}\r\n\r\n","import React from \"react\";\r\nimport { Row, Col, NavItem, Nav, NavLink } from \"reactstrap\";\r\nimport { connect } from \"react-redux\";\r\nimport QuestionElements from \"../../../elements/list/QuestionElements/QuestionElements\";\r\nimport FieldElements from \"../../../elements/list/FieldElements/FieldElements\";\r\nimport EventElements from \"../../../elements/list/EventElements/EventElements\";\r\nimport ContainerElements from \"../../../elements/list/ContainerElements/ContainerElements\";\r\nimport ContentElements from \"../../../elements/list/ContentElements/ContentElements\";\r\nimport PaymentElements from \"../../../../cms/elements/list/PaymentElements/PaymentElements\";\r\nimport PreConfirmationsElements from \"../../../elements/list/PreConfirmationElements/PreConfirmationsElements\";\r\nimport RateReviewIcon from \"@material-ui/icons/RateReview\";\r\nimport WidgetsIcon from \"@material-ui/icons/Widgets\";\r\nimport \"./ElementsTab.css\";\r\nimport { sourceTypes } from \"../../../../constants/cms/sourceType\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport UserPageElements from \"../../../elements/list/UserPageElements/UserPageElements\";\r\nimport AccountBoxIcon from '@material-ui/icons/AccountBox';\r\nimport EmailIcon from '@material-ui/icons/Email';\r\nimport { EmailElements } from \"../../../areas/email/elementGroups/EmailElements\";\r\n\r\n\r\nclass ElementsTab extends React.Component {\r\n state = {\r\n activeTab: \"Content\",\r\n hideContent: false\r\n };\r\n componentDidMount() {\r\n if (this.props.env !== undefined &&\r\n this.props.env === sourceTypes.EMAIL) {\r\n this.setState({ activeTab: 'Email' })\r\n }\r\n }\r\n componentDidUpdate(prevProps) {\r\n if (this.props.env !== undefined &&\r\n prevProps.env !== this.props.env &&\r\n this.props.env === sourceTypes.EMAIL) {\r\n this.setState({ activeTab: 'Email' })\r\n }\r\n }\r\n toggleTab = area => {\r\n if (area === this.state.activeTab) {\r\n if (!this.state.hideContent) {\r\n this.setState({ activeTab: \"\", hideContent: true });\r\n }\r\n } else {\r\n this.setState({ activeTab: area, hideContent: false });\r\n }\r\n };\r\n render() {\r\n const { activeTab } = this.state;\r\n const { env } = this.props;\r\n return (\r\n \r\n
\r\n \r\n \r\n {env === sourceTypes.FORM ? (\r\n \r\n {!this.props.form.survey ? \r\n this.toggleTab(\"Events\")}>\r\n \r\n
\r\n this.toggleTab(\"Fields\")}>\r\n \r\n \r\n \r\n : null}\r\n\r\n \r\n this.toggleTab(\"Question\")}>\r\n \r\n \r\n \r\n {!this.props.form.survey ? \r\n this.toggleTab(\"Payment\")}\r\n >\r\n \r\n \r\n this.toggleTab(\"PreConfirmation\")}\r\n >\r\n \r\n : null}\r\n \r\n ) : null}\r\n {env !== sourceTypes.EMAIL ? \r\n \r\n this.toggleTab(\"Containers\")}>\r\n \r\n \r\n \r\n \r\n this.toggleTab(\"Content\")}\r\n >\r\n \r\n : null}\r\n {env === sourceTypes.PAGE ?\r\n\r\n \r\n this.toggleTab(\"UserPage\")}\r\n >\r\n \r\n \r\n \r\n this.toggleTab(\"Email\")}\r\n >\r\n \r\n : null}\r\n \r\n \r\n \r\n \r\n \r\n {activeTab && (\r\n \r\n {activeTab === \"Events\" && !this.state.isSurvey && (\r\n
\r\n )}\r\n {activeTab === \"Fields\" && !this.state.isSurvey && (\r\n
\r\n )}\r\n {activeTab === \"Question\" &&
}\r\n {activeTab === \"Containers\" &&
}\r\n {activeTab === \"Content\" &&
}\r\n {activeTab === \"Payment\" &&
}\r\n {activeTab === \"PreConfirmation\" && (\r\n
\r\n )}\r\n {activeTab === \"Email\" && (\r\n
\r\n )}\r\n {activeTab === \"UserPage\" && (\r\n
\r\n )}\r\n
\r\n {templates && template &&
\r\n\r\n )\r\n )\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n template: state.template,\r\n form: state.form,\r\n page: state.page,\r\n cms: state.cms\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(TemplateSelect);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport Select from \"react-select\";\r\nimport { formActions } from \"../../../store/actions/cms/form/form.action\";\r\n\r\nclass ConfirmationSelect extends React.Component {\r\n handleChange = (selectedConf) => {\r\n const { dispatch, emails, form, type, pages } = this.props;\r\n\r\n if (type === \"EMAIL\") {\r\n if (selectedConf.value) {\r\n let selected = emails.find((t) => {\r\n return t.comContentId === selectedConf.value;\r\n });\r\n if (selected) {\r\n dispatch(formActions.softUpdate({ ...form, emailConfirmationId: selected.comContentId }));\r\n return;\r\n }\r\n }\r\n dispatch(formActions.softUpdate({ ...form, emailConfirmationId: null }));\r\n } else if (type === \"WEB\") {\r\n if (selectedConf.value) {\r\n let selected = pages.find((t) => {\r\n return t.id === selectedConf.value;\r\n });\r\n if (selected) {\r\n dispatch(formActions.softUpdate({ ...form, pageConfirmationId: selected.id }));\r\n return;\r\n }\r\n }\r\n dispatch(formActions.softUpdate({ ...form, pageConfirmationId: null}));\r\n }\r\n };\r\n render() {\r\n const { form, emails, type, pages } = this.props;\r\n const selectedWebConf =\r\n pages !== undefined &&\r\n pages.find((t) => {\r\n return t.id === form.pageConfirmationId;\r\n });\r\n const selectedEmailConf =\r\n emails !== undefined &&\r\n emails.find((t) => {\r\n return t.comContentId === form.emailConfirmationId;\r\n });\r\n const emailOptions =\r\n emails?.map((t) => {\r\n return { value: t.comContentId, label: t.name };\r\n }) || [];\r\n emailOptions.unshift({ value: null, label: \"-\" });\r\n\r\n return (\r\n \r\n {pages && emails ? (\r\n \r\n {type === \"WEB\" && (\r\n
\r\n {pages && (\r\n {\r\n return { value: t.id, label: t.name };\r\n })}\r\n classNamePrefix=\"jirango-select\"\r\n className=\"jirango-select\"\r\n value={selectedWebConf ? { value: selectedWebConf.id, label: selectedWebConf.name } : null}\r\n onChange={this.handleChange}\r\n />\r\n )}\r\n
\r\n )}\r\n {type === \"EMAIL\" && (\r\n
\r\n {emails && (\r\n
\r\n )}\r\n
\r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form,\r\n emails: state.email.emails,\r\n pages: state.page.paths,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(ConfirmationSelect);\r\n","import React from 'react';\r\nimport AccountTreeIcon from '@material-ui/icons/AccountTree';\r\nimport { connect } from 'react-redux';\r\nimport './Inheritage.css';\r\nimport { sourceTypes } from '../../../../../constants/cms/sourceType';\r\nimport PolicyIcon from '@material-ui/icons/Policy';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Row, Col } from 'reactstrap';\r\nimport Avatar from '@material-ui/core/Avatar';\r\nimport { IconButton } from '@material-ui/core';\r\n\r\nconst InheritageButtonGroup = (props) => {\r\n const { cms, status, onClick, form } = props;\r\n let disabled = cms.enviroment == sourceTypes.FORM && form.inherit !== null && form.inheritParentId !== null? true : false;\r\n return (\r\n \r\n
\r\n onClick(null)} className={`inherit-toggle-icon${status === null ? '-active' : ''}`}>\r\n \r\n \r\n \r\n Har ej någon koppling till ett annat formulär i din organisation\r\n
\r\n \r\n
\r\n
\r\n onClick(false)} className={`inherit-toggle-icon${status === false ? '-active' : ''}`}>\r\n \r\n \r\n \r\n Andra formulär i som ärver av detta formulär har endast läsrättigheter men kan ej editera formuläret\r\n
\r\n \r\n
\r\n
\r\n onClick(true)} className={`inherit-toggle-icon${status === true ? '-active' : ''}`}>\r\n \r\n \r\n \r\n Andra formulär som ärver detta formulär har läsrättigheter och kan editera formuläret men då kommer en ny kopia skapas.\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {languages.map((u, i) => {\r\n return (\r\n setLang(u)}\r\n key={i}\r\n >\r\n
\r\n \r\n c.value === form.emailConfirmationId) : null}\r\n />\r\n \r\n
\r\n
\r\n );\r\n};\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form,\r\n languages: state.language.eventCodes,\r\n confirmations: state.confirmation.confirmationList,\r\n template: state.template\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(LangInputGroup);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Input, Row, InputGroup, InputGroupAddon, InputGroupText, Col, Label, Collapse, ListGroupItem, Button, ButtonGroup, FormGroup } from \"reactstrap\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport { ButtonGroupAlignment } from \"../../../../../components/UI/Buttons/ButtonGroupAlignment\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport TemplateSelect from \"../../../../components/selects/TemplateSelect\";\r\nimport ConfirmationSelect from \"../../../../components/selects/ConfirmationSelect\";\r\nimport { tempLangConverter } from \"../../../../../helpers/lanugageHelper\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { formSettings } from \"../../models/formSettings\";\r\nimport JirangoSwitch from \"../../../../../components/UI/Switch/JirangoSwitch\";\r\nimport { cmsActions } from \"../../../../../store/actions/cms/cms.action\";\r\nimport InheritageButtonGroup from \"../../../../components/editor/tools/Inheritage/InheritageButtonGroup\";\r\nimport LangInputGroup from \"../../../../components/editor/LangInputGroup/LangInputGroup\";\r\n\r\nconst WAIT_INTERVAL = 2000;\r\nconst ENTER_KEY = 13;\r\n\r\nclass FormSettings extends React.Component {\r\n state = {\r\n confirmationAreaIsExpanded: false,\r\n navigationAreaIsExpanded: false,\r\n submitAreaIsExpanded: false,\r\n templateAreaIsExpanded: false,\r\n };\r\n\r\n handleChange = (e, val, path) => {\r\n const { dispatch } = this.props;\r\n const names = path.split(\".\");\r\n const form = deepClone(this.props.form);\r\n let value = val !== null && val !== undefined ? val : e.target.value;\r\n\r\n if (names.length === 1) {\r\n form[names[0]] = value;\r\n }\r\n if (names.length === 2) {\r\n form[names[0]][names[1]] = value;\r\n } else if (names.length === 3) {\r\n form[names[0]][names[1]][names[2]] = value;\r\n } else if (names.length === 4) {\r\n form[names[0]][names[1]][names[2]][names[3]] = value;\r\n } else if (names.length === 5) {\r\n form[names[0]][names[1]][names[2]][names[3]][names[4]] = value;\r\n } else if (names.length === 6) {\r\n form[names[0]][names[1]][names[2]][names[3]][names[4]][names[5]] = value;\r\n }\r\n form.isChanged = true;\r\n\r\n dispatch(formActions.softUpdate(form));\r\n };\r\n expandArea = (area) => {\r\n this.setState(\r\n {\r\n [area]: !this.state[area],\r\n },\r\n () => {\r\n if (this.state.lastCollapse !== area) {\r\n if (this.state.lastCollapse !== \"\") {\r\n this.setState({ [this.state.lastCollapse]: false }, () => {\r\n this.setState({ lastCollapse: area });\r\n });\r\n } else {\r\n this.setState({ lastCollapse: area });\r\n }\r\n }\r\n }\r\n );\r\n };\r\n toggleInheritageInfo = (on) => {\r\n const { dispatch } = this.props;\r\n dispatch(cmsActions.toggleInheritageInfo(on));\r\n };\r\n toggleInheritageStatus = (status) => {\r\n const { dispatch } = this.props;\r\n const form = deepClone(this.props.form);\r\n form.inherit = status;\r\n form.isChanged = true;\r\n dispatch(formActions.softUpdate(form));\r\n };\r\n render() {\r\n const { form, cms } = this.props;\r\n let btnText = form && form.settings !== undefined && form.settings.submit.defaultLabel;\r\n if (\r\n cms.languageCode &&\r\n form &&\r\n form.settings !== undefined &&\r\n form.settings.submit.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === cms.languageCode;\r\n }).text !== \"\"\r\n ) {\r\n btnText = form.settings.submit.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === cms.languageCode;\r\n }).text;\r\n }\r\n if (form.settings === undefined) return null;\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(null, !form.settings.authorizedFormMode, \"settings.authorizedFormMode\")}\r\n isChecked={form.settings.authorizedFormMode !== true ? false : true}\r\n />\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n this.handleChange(null, !form.settings.changeToGroupLeaderOnSpecificPage, \"settings.changeToGroupLeaderOnSpecificPage\")}\r\n isChecked={form.settings.changeToGroupLeaderOnSpecificPage !== true ? false : true}\r\n />\r\n \r\n
\r\n {form.settings.changeToGroupLeaderOnSpecificPage == true ? (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(null, !form.settings.forceChangeOrderOnSpecificPage, \"settings.onlyGroupLeaderAllowedChangelink\")}\r\n isChecked={form.settings.forceChangeOrderOnSpecificPage !== true ? false : true}\r\n />\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n this.handleChange(null, !form.settings.submit.hidden, \"settings.submit.hidden\")}\r\n isChecked={form.settings.submit.hidden && form.settings.submit.hidden == true ? true : false}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `settings.googleAnalyticsId`)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {form.settings.navigation.next.labels.map((l, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `settings.navigation.next.labels.${index}.text`)}\r\n />\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n {form.settings.navigation.previous.labels.map((l, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `settings.navigation.previous.labels.${index}.text`)}\r\n />\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n {form.settings.submit.labels.map((l, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `settings.submit.labels.${index}.text`)}\r\n />\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n {form.pages === 1 ? \r\n\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n this.toggleInheritageInfo(!cms.inheritInfo)} isChecked={cms.inheritInfo !== true ? false : true} />\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n runForm(e)} />\r\n \r\n \r\n \r\n \r\n {warningMessage &&\r\n warningMessage.map((m, i) => {\r\n return (\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n form: state.form\r\n };\r\n}\r\nexport default connect(mapStateToProps)(RunFormOption);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SketchPicker } from \"react-color\";\r\nimport { Row, Col, Label, Input, InputGroup } from \"reactstrap\";\r\nimport Select from \"react-select\";\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport { templateHelper } from \"../../../template/helpers/templateHelper\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { setValueToNestedObject, deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport ColorPickerFacade from \"../../../../../components/UI/Buttons/ColorPickerFacade\";\r\nimport { UseTemplateButton, SetStyleToAllOfItsType, SetToAuto } from \"../../components/UseTemplateButton\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { UrlMultiInput } from \"../../../../components/editor/tools/UrlMultiInput/UrlMultiInput\";\r\nimport { emailFonts } from \"../../models/emailFonts/emailFonts\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport { emailHelper } from \"../../helper/email.helper\";\r\nimport InheritageButtonGroup from \"../../../../components/editor/tools/Inheritage/InheritageButtonGroup\";\r\nimport JirangoSwitch from \"../../../../../components/UI/Switch/JirangoSwitch\";\r\nimport OpenInNewIcon from \"@material-ui/icons/OpenInNew\";\r\n\r\nclass EmailSettings extends React.Component {\r\n state = {\r\n spreadActiveSet: [],\r\n };\r\n componentDidMount() {\r\n const { dispatch, cms } = this.props;\r\n dispatch(templateActions.getAll(cms.eventId, true));\r\n }\r\n componentDidUpdate(prevProps) {\r\n const { email, dispatch } = this.props;\r\n if (this.props.template !== undefined && prevProps.template.templateId !== this.props.template.templateId) {\r\n const newElements = emailHelper.handleTemplateStyleInheritage(this.props.email.elements, this.props.template);\r\n dispatch(emailActions.updateEmailElement(newElements, null, true, this.props.inherit));\r\n }\r\n }\r\n handleSoftUpdate = (email) => {\r\n const { dispatch } = this.props;\r\n dispatch(emailActions.softUpdate(email));\r\n };\r\n toggleInheritageStatus = (status) => {\r\n const { dispatch } = this.props;\r\n const email = deepClone(this.props.email);\r\n email.inherit = status;\r\n email.isSavable = true;\r\n dispatch(emailActions.softUpdate(email));\r\n };\r\n toggleLinktracking = (on) => {\r\n const { dispatch } = this.props;\r\n const email = deepClone(this.props.email);\r\n email.useLinktrack = on;\r\n console.log(\"onChange\", on, email);\r\n dispatch(emailActions.softUpdate(email));\r\n };\r\n handleChange = (e, val, path) => {\r\n const { email } = this.props;\r\n let emailCopy = deepClone(email);\r\n emailCopy[path] = val;\r\n this.handleSoftUpdate(emailCopy);\r\n if (path === \"templateId\") {\r\n this.props.dispatch(templateActions.get(val));\r\n }\r\n };\r\n render() {\r\n const { email, templates, template } = this.props;\r\n const selectStyles = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: \"15px\",\r\n fontFamily: data.value,\r\n padding: \"10px 10px\",\r\n };\r\n },\r\n control: (provided, state) => ({\r\n ...provided,\r\n maxWidth: \"100%\",\r\n width: \"auto\",\r\n }),\r\n container: (styles) => ({\r\n ...styles,\r\n width: \"100%\",\r\n borderRight: \"1px solid gainsboro\",\r\n }),\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\r\n return {\r\n value: t.templateId,\r\n label: t.name,\r\n };\r\n })}\r\n value={template.templateId ? { label: template.name, value: template.templateId } : null}\r\n onChange={(selectedOption) => this.handleChange(null, selectedOption.value, \"templateId\")}\r\n styles={selectStyles}\r\n />\r\n {\r\n window.open(\r\n window.location.host?.includes(\"localhost\") ? `https://localhost:44331/Template/List?eventId=${this.props?.cms?.eventId}` : `https://jirango.com/Template/List?eventId=${this.props?.cms?.eventId}`,\r\n \"_blank\"\r\n );\r\n }}\r\n style={{ backgroundColor: \"transparent\", border: 0, color: '#222' }}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.toggleLinktracking(!email.useLinktrack)} isChecked={email.useLinktrack !== true ? false : true} />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n email: state.email,\r\n template: state.template.template,\r\n inherit: state.email.inherit,\r\n templates: state.template.templates,\r\n cms: state.cms,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(EmailSettings);\r\n","export default __webpack_public_path__ + \"static/media/sent_icon.e4c3e94a.svg\";","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {\r\n Pagination,\r\n PaginationItem,\r\n PaginationLink,\r\n Row,\r\n Col,\r\n NavItem,\r\n NavLink,\r\n Label,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n} from \"reactstrap\";\r\nimport Popover from \"@material-ui/core/Popover\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Zoom from \"@material-ui/core/Zoom\";\r\nimport { Tooltip, Typography } from \"@material-ui/core\";\r\nimport AddIcon from \"@material-ui/icons/Add\";\r\nimport ErrorIcon from \"@material-ui/icons/Error\";\r\nimport CheckCircleIcon from \"@material-ui/icons/CheckCircle\";\r\nimport SendIcon from \"@material-ui/icons/Send\";\r\nimport AlternateEmailIcon from \"@material-ui/icons/AlternateEmail\";\r\nimport { labelHelper } from \"../../../../helpers/labelHelper\";\r\nimport { inputValidator } from \"../../../../helpers/inputVaildator\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport ConfirmModal from \"../../../components/ConfirmModal/ConfirmModal\";\r\nimport { emailActions } from \"../../../../store/actions/cms/email/email.action\";\r\nimport {\r\n Container,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n} from \"reactstrap\";\r\nimport SentIcon from \"../../../../assets/icons/sent_icon.svg\";\r\nimport Dialog from \"@material-ui/core/Dialog\";\r\nimport DialogActions from \"@material-ui/core/DialogActions\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport DialogContentText from \"@material-ui/core/DialogContentText\";\r\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport Slide from \"@material-ui/core/Slide\";\r\n\r\nconst SendTestEmail = (props) => {\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [addresses, appendAddress] = React.useState([]);\r\n const [input, setInput] = React.useState(\"\");\r\n const [modalOpen, toggleModal] = React.useState(false);\r\n const [sent, setSent] = React.useState(false);\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n const handleClick = (event) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n const addAddress = () => {\r\n if (input.length > 0 && validateEmail(input)) {\r\n addresses.push(input);\r\n appendAddress(addresses);\r\n setInput(\"\");\r\n }\r\n };\r\n const validateEmail = (input) => {\r\n return inputValidator(input, \"email\");\r\n };\r\n const sendTest = () => {\r\n const { dispatch, email } = props;\r\n if (addresses.length === 0) return;\r\n \r\n addresses.map((a) => {\r\n dispatch(\r\n emailActions.sendTest({\r\n toAddress: a,\r\n subject: email.subject ? email.subject : \"Email Preview\",\r\n fromAddr: email.fromAddr\r\n ? email.fromName\r\n ? `${email.fromName}<${email.fromAddr}>`\r\n : email.fromAddr\r\n : \"support@inadra.se\",\r\n body: email.body,\r\n })\r\n );\r\n });\r\n setSent(true);\r\n handleClose()\r\n setTimeout(() => setSent(false), 2500);\r\n //send\r\n };\r\n const removeAddress = (index) => {\r\n let updatedAddresses = Array.from(addresses);\r\n /* updatedAddresses = */ updatedAddresses.splice(index, 1);\r\n appendAddress(updatedAddresses);\r\n };\r\n const renderStatusIcon = () => {\r\n if (input.length === 0)\r\n return \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n
*/}\r\n \r\n {/* \r\n \r\n \r\n {renderStatusIcon()}\r\n \r\n \r\n setInput(e.target.value)}\r\n style={{\r\n height: \"38px\",\r\n [\"&:focus\"]: {\r\n boxShadow: \"none\",\r\n outline: 0,\r\n },\r\n }}\r\n value={input}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {addresses.length > 0\r\n ? addresses.map((a, i) => {\r\n return (\r\n \r\n {a}\r\n removeAddress(i)}\r\n style={{\r\n position: \"absolute\",\r\n left: \"91%\",\r\n top: \"32%\",\r\n fontSize: \"15px\",\r\n cursor: \"pointer\",\r\n }}\r\n />\r\n \r\n );\r\n })\r\n : null}\r\n {addresses.length > 0 ? (\r\n \r\n \r\n {/*
\r\n ) : null}\r\n \r\n {/* {sent ? toggleModal(false)}\r\n onAction={sendTest}\r\n text={\"AreYouSureYouWannaSend\"}\r\n /> */}\r\n \r\n \r\n );\r\n};\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n email: state.email,\r\n isSavable: state.email.isSavable,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(SendTestEmail);\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return \r\n null}\r\n aria-labelledby=\"alert-dialog-slide-title\"\r\n aria-describedby=\"alert-dialog-slide-description\"\r\n >\r\n \r\n {\" \"}\r\n \r\n {\" \"}\r\n \r\n \r\n \r\n );\r\n};\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Input, Row, Col, Label, FormGroup } from \"reactstrap\";\r\nimport { pageActions } from \"../../../../store/actions/cms/page/page.action\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport TemplateSelect from \"../../../components/selects/TemplateSelect\";\r\nimport InheritageButtonGroup from \"../../../components/editor/tools/Inheritage/InheritageButtonGroup\";\r\nimport JirangoSwitch from \"../../../../components/UI/Switch/JirangoSwitch\";\r\nimport ListExpansion from \"../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { cmsActions } from \"../../../../store/actions/cms/cms.action\";\r\nimport { deepClone } from \"../../../../helpers/objectHelper\";\r\n\r\nclass PageSettings extends React.Component {\r\n state = {\r\n confirmationAreaIsExpanded: false,\r\n navigationAreaIsExpanded: false,\r\n submitAreaIsExpanded: false,\r\n templateAreaIsExpanded: false,\r\n };\r\n\r\n handleChange = (e, val, path) => {\r\n const { dispatch } = this.props;\r\n const names = path.split(\".\");\r\n const page = deepClone(this.props.page);\r\n let value = val !== null && val !== undefined ? val : e.target.value;\r\n\r\n if (names.length === 1) {\r\n page[names[0]] = value;\r\n }\r\n if (names.length === 2) {\r\n page[names[0]][names[1]] = value;\r\n } else if (names.length === 3) {\r\n page[names[0]][names[1]][names[2]] = value;\r\n } else if (names.length === 4) {\r\n page[names[0]][names[1]][names[2]][names[3]] = value;\r\n } else if (names.length === 5) {\r\n page[names[0]][names[1]][names[2]][names[3]][names[4]] = value;\r\n } else if (names.length === 6) {\r\n page[names[0]][names[1]][names[2]][names[3]][names[4]][names[5]] = value;\r\n }\r\n page.isChanged = true;\r\n\r\n dispatch(pageActions.softUpdate(page));\r\n };\r\n expandArea = (area) => {\r\n this.setState(\r\n {\r\n [area]: !this.state[area],\r\n },\r\n () => {\r\n if (this.state.lastCollapse !== area) {\r\n if (this.state.lastCollapse !== \"\") {\r\n this.setState({ [this.state.lastCollapse]: false }, () => {\r\n this.setState({ lastCollapse: area });\r\n });\r\n } else {\r\n this.setState({ lastCollapse: area });\r\n }\r\n }\r\n }\r\n );\r\n };\r\n toggleInheritageInfo = (on) => {\r\n const { dispatch } = this.props;\r\n dispatch(cmsActions.toggleInheritageInfo(on));\r\n };\r\n toggleInheritageStatus = (status) => {\r\n const { dispatch } = this.props;\r\n const page = deepClone(this.props.page);\r\n page.inherit = status;\r\n page.isChanged = true;\r\n dispatch(pageActions.softUpdate(page));\r\n };\r\n render() {\r\n const { page, cms } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleChange(e, page.onlyAuthorizedUsers !== true ? true : false, `onlyAuthorizedUsers`)}\r\n isChecked={page.onlyAuthorizedUsers !== true ? false : true}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.toggleInheritageInfo(!cms.inheritInfo)} isChecked={cms.inheritInfo !== true ? false : true} />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n page: state.page,\r\n template: state.template,\r\n cms: state.cms,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(PageSettings);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {\r\n Input,\r\n Row,\r\n Col,\r\n Label,\r\n FormGroup,\r\n} from \"reactstrap\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport InheritageButtonGroup from \"../../../components/editor/tools/Inheritage/InheritageButtonGroup\";\r\nimport JirangoSwitch from \"../../../../components/UI/Switch/JirangoSwitch\";\r\nimport ListExpansion from \"../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { cmsActions } from \"../../../../store/actions/cms/cms.action\";\r\nimport { deepClone } from \"../../../../helpers/objectHelper\";\r\nimport { templateActions } from \"../../../../store/actions/cms/template/template.action\";\r\n\r\nclass TemplateInternalSettings extends React.Component {\r\n state = {\r\n\r\n confirmationAreaIsExpanded: false,\r\n navigationAreaIsExpanded: false,\r\n submitAreaIsExpanded: false,\r\n templateAreaIsExpanded: false,\r\n }\r\n handleChange = (e, val, path) => {\r\n const { dispatch } = this.props;\r\n const names = path.split(\".\");\r\n const template = deepClone(this.props.template.template);\r\n let value = val !== null && val !== undefined ? val : e.target.value;\r\n\r\n if (names.length === 1) {\r\n template[names[0]] = value;\r\n }\r\n if (names.length === 2) {\r\n template[names[0]][names[1]] = value;\r\n }\r\n else if (names.length === 3) {\r\n template[names[0]][names[1]][names[2]] = value;\r\n }\r\n else if (names.length === 4) {\r\n template[names[0]][names[1]][names[2]][names[3]] = value;\r\n }\r\n else if (names.length === 5) {\r\n template[names[0]][names[1]][names[2]][names[3]][names[4]] = value;\r\n }\r\n else if (names.length === 6) {\r\n template[names[0]][names[1]][names[2]][names[3]][names[4]][names[5]] = value;\r\n }\r\n template.isChanged = true;\r\n\r\n dispatch(templateActions.softUpdate(template));\r\n\r\n }\r\n expandArea = area => {\r\n this.setState({\r\n [area]: !this.state[area],\r\n }, () => {\r\n if (this.state.lastCollapse !== area) {\r\n if (this.state.lastCollapse !== '') {\r\n this.setState({ [this.state.lastCollapse]: false }, () => {\r\n this.setState({ lastCollapse: area })\r\n })\r\n }\r\n else {\r\n this.setState({ lastCollapse: area })\r\n }\r\n }\r\n });\r\n };\r\n toggleInheritageInfo = (on) => {\r\n const { dispatch } = this.props;\r\n dispatch(cmsActions.toggleInheritageInfo(on));\r\n }\r\n toggleInheritageStatus = (status) => {\r\n const { dispatch } = this.props;\r\n const template = deepClone(this.props.template.template);\r\n template.inherit = status;\r\n template.isChanged = true;\r\n dispatch(templateActions.softUpdate(template));\r\n }\r\n render() {\r\n const { cms } = this.props;\r\n const {template} = this.props.template\r\n return (\r\n \r\n \r\n \r\n \r\n this.handleChange(e, null, `name`)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.toggleInheritageInfo(!cms.inheritInfo)}\r\n isChecked={\r\n cms.inheritInfo !== true\r\n ? false\r\n : true\r\n }\r\n />\r\n\r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n template: state.template,\r\n cms: state.cms\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(TemplateInternalSettings);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Nav, NavItem, NavLink, TabContent, TabPane, Tooltip as RSTooltip } from \"reactstrap\";\r\nimport { IconButton, Tooltip as MLToolTip } from \"@material-ui/core\";\r\nimport { EditorTabGroup } from \"../tools/EditorTabGroup\";\r\nimport { sourceTypes } from \"../../../../constants/cms/sourceType\";\r\nimport TemplateSettings from \"../../../areas/template/containers/TemplateSettings/TemplateSettings\";\r\nimport { renderElementSettings } from \"../../../helpers/renderElementSettings\";\r\nimport { FormPagination } from \"../../../areas/form/components/Pagination/Pagination\";\r\nimport { formActions } from \"../../../../store/actions/cms/form/form.action\";\r\nimport { cmsActions } from \"../../../../store/actions/cms/cms.action\";\r\nimport { templateActions } from \"../../../../store/actions/cms/template/template.action\";\r\nimport { deepClone } from \"../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../system/SystemLabel/SystemLabel\";\r\nimport PreviewOption from \"../Nav/NavItems/PreviewOption\";\r\nimport ElementsTab from \"../ElementsTab/ElementsTab\";\r\nimport \"../../../style/EditorLayout.css\";\r\nimport FormSettings from \"../../../areas/form/components/FormSettings/FormSettings\";\r\nimport { pageActions } from \"../../../../store/actions/cms/page/page.action\";\r\nimport { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\nimport RunFormOption from \"../Nav/NavItems/RunFormOption/RunFormOption\";\r\nimport { emailActions } from \"../../../../store/actions/cms/email/email.action\";\r\nimport { EmailElements } from \"../../../areas/email/elementGroups/EmailElements\";\r\nimport EmailSettings from \"../../../areas/email/containers/EmailEditor/EmailSettings\";\r\nimport SaveIcon from \"@material-ui/icons/Save\";\r\nimport RestorePageIcon from \"@material-ui/icons/RestorePage\";\r\nimport SettingsIcon from \"@material-ui/icons/Settings\";\r\nimport { labelHelper } from \"../../../../helpers/labelHelper\";\r\nimport Zoom from \"@material-ui/core/Zoom\";\r\nimport { Tooltip } from \"@material-ui/core\";\r\nimport SendTestEmail from \"../../../areas/email/components/SendTestEmail\";\r\nimport LaunchIcon from \"@material-ui/icons/Launch\";\r\nimport ConfirmModal from \"../../ConfirmModal/ConfirmModal\";\r\nimport InheritageWrapper from \"../tools/Inheritage/InheritageWrapper\";\r\nimport PageSettings from \"../../../areas/page/components/PageSettings\";\r\nimport TemplateInternalSettings from \"../../../areas/template/components/TemplateInternalSettings\";\r\nimport { alertActions } from \"../../../../store/actions/alert.action\";\r\nimport AlertDialog from \"../../../../global/AlertDialog\";\r\n\r\nclass EditorSidebar extends Component {\r\n state = {\r\n activeTab: \"Elements\",\r\n displayPopOver: false,\r\n confirmModal: false,\r\n inheritedElements: [],\r\n tooltips: {\r\n saveOpen: false,\r\n postOpen: false,\r\n templateOpen: false,\r\n clearOpen: false,\r\n prevPageOpen: false,\r\n nextPageOpen: false,\r\n addPageOpen: false,\r\n pageSettingsOpen: false,\r\n removePageOpen: false,\r\n formSettingsOpen: false,\r\n openPageOpen: false,\r\n },\r\n copyArea: \"\",\r\n copyName: \"\",\r\n affected: [],\r\n };\r\n componentDidMount() {\r\n if (this.props.getRefs) {\r\n this.props.getRefs({ asideEditorRef: this.asideEditorRef });\r\n }\r\n }\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.tempIsSavable === true && this.props.tempIsSavable === false) {\r\n this.save(true);\r\n }\r\n const {form,tempIsSavable,page,email} = this.props;\r\n if(form.isSavable || page.isSavable || tempIsSavable || email.isSavable){\r\n window.addEventListener(\"beforeunload\", this.handleWindowBeforeUnload);\r\n\r\n }\r\n else{\r\n window.removeEventListener(\"beforeunload\", this.handleWindowBeforeUnload);\r\n\r\n }\r\n }\r\n componentWillUnmount() {\r\n window.removeEventListener(\"beforeunload\", this.handleWindowBeforeUnload);\r\n }\r\n handleWindowBeforeUnload(e){\r\n var confirmationMessage = 'It looks like you have been editing something. '\r\n + 'If you leave before saving, your changes will be lost.';\r\n\r\n (e || window.event).returnValue = confirmationMessage; //Gecko + IE\r\n return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.\r\n }\r\n toggleTooltip = (path) => {\r\n this.setState({\r\n tooltips: {\r\n ...this.state.tooltips,\r\n [path]: !this.state.tooltips[path],\r\n },\r\n });\r\n };\r\n toggle = (tab) => {\r\n if (tab === \"FormSettings\") {\r\n this.props.dispatch(formActions.deselect());\r\n }\r\n if (tab === \"PageSettings\") {\r\n this.props.dispatch(pageActions.deselect());\r\n }\r\n if (tab === \"TemplateInternalSettings\") {\r\n this.props.dispatch(templateActions.deselect());\r\n }\r\n this.setState({\r\n activeTab: tab,\r\n });\r\n };\r\n addPage = () => {\r\n const { dispatch } = this.props;\r\n dispatch(formActions.addPage());\r\n };\r\n removePage = () => {\r\n const { dispatch } = this.props;\r\n dispatch(formActions.removePage());\r\n };\r\n scrollPage = (page) => {\r\n const { dispatch } = this.props;\r\n const { form } = this.props;\r\n if (page <= form.pages || page >= 1) {\r\n dispatch(formActions.scrollPage(page));\r\n }\r\n };\r\n\r\n openPage = () => {\r\n const { page } = this.props;\r\n if (window.location.href.includes(\"localhost\")) {\r\n window.open(`/p/${page.pageId.toString(36)}`);\r\n } else {\r\n window.open(`/cms/p/${page.pageId.toString(36)}`);\r\n }\r\n };\r\n parseElementNames = (el, lang) => {\r\n if (el.type === elementConstants.EVENT) return el.props.name;\r\n if (el.type === elementConstants.FIELD) return el.props.labels.find((l) => l.languageCode === lang).text;\r\n if (el.type === elementConstants.QUESTION) return el.props.labels.find((l) => l.languageCode === lang).text;\r\n if (el.type === elementConstants.CONTENT) return el.data.type;\r\n else return el.type;\r\n };\r\n save = (confirmed = false) => {\r\n const { dispatch, form, page, template, tempIsSavable, enviroment, cms, email, isOwner } = this.props;\r\n //If inherited items are affected\r\n if (!confirmed && cms.inheritageAffected) {\r\n const affected = [];\r\n //if the current area [FORM, PAGE, EMAIL, TEMPLATE] run this\r\n \r\n //The ugliest mf piece of code ever written (brainfart)\r\n if (\r\n !isOwner ||\r\n (cms.enviroment == sourceTypes.FORM && !confirmed && cms.inheritageAffected && template.eventId != cms.eventId && form.templateId == template.templateId) ||\r\n (cms.enviroment == sourceTypes.PAGE && !confirmed && cms.inheritageAffected && template.eventId != cms.eventId && page.templateId == template.templateId)\r\n ) {\r\n if (!isOwner) {\r\n let copyArea = \"IsInheritedACopyWillBeCreated\";\r\n let area = \"\";\r\n if (cms.enviroment == sourceTypes.FORM) {\r\n copyArea += \"Form\";\r\n area = \"Form\";\r\n }\r\n if (cms.enviroment == sourceTypes.PAGE) {\r\n copyArea += \"Page\";\r\n area = \"Page\";\r\n }\r\n if (cms.enviroment == sourceTypes.EMAIL) {\r\n copyArea += \"EMAIL\";\r\n area = \"Email\";\r\n }\r\n if (cms.enviroment == sourceTypes.TEMPLATE) {\r\n copyArea += \"TEMPLATE\";\r\n area = \"Template\";\r\n }\r\n affected.push({ area, name: \"\" });\r\n this.setState({ confirmModal: true, copyArea });\r\n }\r\n //If the template in the area is affected run these two!\r\n if (cms.enviroment == sourceTypes.FORM) {\r\n if (!confirmed && cms.inheritageAffected && template.eventId != cms.eventId && form.templateId == template.templateId && tempIsSavable) {\r\n affected.push({ area: \"Template\", name: \"\" });\r\n this.setState({\r\n confirmModal: true,\r\n copyArea: this.state.copyArea ? (this.state.copyArea += \"AndTemplate\") : \"IsInheritedACopyWillBeCreatedTemplate\",\r\n });\r\n }\r\n }\r\n if (cms.enviroment == sourceTypes.PAGE) {\r\n if (!confirmed && cms.inheritageAffected && template.eventId != cms.eventId && page.templateId == template.templateId && tempIsSavable) {\r\n affected.push({ area: \"Template\", name: \"\" });\r\n this.setState({\r\n confirmModal: true,\r\n copyArea: this.state.copyArea ? (this.state.copyArea += \"AndTemplate\") : \"IsInheritedACopyWillBeCreatedTemplate\",\r\n });\r\n }\r\n }\r\n this.setState({ affected });\r\n if (affected && affected.length > 0) return;\r\n }\r\n }\r\n if (!confirmed && cms.enviroment === sourceTypes.FORM && !isOwner) {\r\n if (!form.inheritParentId && form.inherit !== null) {\r\n let elText = null;\r\n let inheritedElements = [];\r\n if (form.formElements.find((fe) => fe.props.inherit == null)) {\r\n form.formElements.map((f) => {\r\n if (f.props.inherit == null) {\r\n inheritedElements.push(f);\r\n }\r\n });\r\n }\r\n if (inheritedElements.length > 0) {\r\n elText = (\r\n \r\n
\r\n
\r\n
\r\n {inheritedElements.map((ie) => {\r\n return
{this.parseElementNames(ie, form.languageCode)}
;\r\n })}\r\n
\r\n {selectedElement ? renderElementSettings(selectedElement.type, selectedElement, this.props.toggleConditionModal) : null}\r\n {selectedContainer && !selectedElement ? {renderElementSettings(selectedContainer.type, selectedContainer, this.props.toggleConditionModal)} : null}\r\n \r\n );\r\n } else if (activeTab === \"Elements\") {\r\n return (\r\n \r\n {enviroment === sourceTypes.EMAIL ? \r\n );\r\n } else if ((activeTab === \"TemplateSettings\" && template.inherit !== false) || (activeTab === \"TemplateSettings\" && template.eventId === this.props.cms.eventId)) {\r\n return (\r\n \r\n \r\n );\r\n } else if (activeTab === \"EmailSettings\") {\r\n return (\r\n \r\n \r\n );\r\n } else if (activeTab === \"FormSettings\") {\r\n return (\r\n \r\n \r\n );\r\n } else if (activeTab === \"PageSettings\") {\r\n return (\r\n \r\n \r\n );\r\n } else if (activeTab === \"TemplateInternalSettings\") {\r\n return (\r\n \r\n \r\n );\r\n }\r\n };\r\n setOverflow = (activeTab) => {\r\n switch (activeTab) {\r\n case \"FormSettings\":\r\n return \"auto\";\r\n case \"ElementSettings\":\r\n if (this.props.enviroment === sourceTypes.EMAIL && this.props.selectedElement) {\r\n return \"auto\";\r\n }\r\n if (this.props.selectedElement && this.props.selectedElement.type === elementConstants.CONTENT) {\r\n return \"auto\";\r\n }\r\n if (!this.props.selectedElement && this.props.selectedContainer) {\r\n return \"auto\";\r\n }\r\n return \"hidden\";\r\n case \"Element\":\r\n return \"hidden\";\r\n case \"TemplateSettings\":\r\n return \"auto\";\r\n default:\r\n return \"auto\";\r\n }\r\n };\r\n onNameEdit = (name) => {\r\n this.setState({ copyName: name });\r\n };\r\n render() {\r\n const { selectedElement, selectedContainer, form, page, enviroment, template, tempIsSavable, email } = this.props;\r\n\r\n let activeTab = this.state.activeTab;\r\n if (selectedElement || selectedContainer) {\r\n activeTab = \"ElementSettings\";\r\n }\r\n if (template === undefined) return null;\r\n return (\r\n \r\n (this.asideEditorRef = r)}>\r\n
\r\n (form.isSavable || page.isSavable || tempIsSavable || email.isSavable ? this.save() : null)}>\r\n this.save()} */\r\n id=\"saveOpen\"\r\n >\r\n */}\r\n {/* Save*/}\r\n {/*
*/}\r\n \r\n \r\n \r\n {enviroment === sourceTypes.FORM ? \r\n \r\n */}\r\n {/* Preview*/}\r\n {/*
*/}\r\n \r\n \r\n ) : null}\r\n {enviroment === sourceTypes.EMAIL ? \r\n \r\n {\r\n this.toggle(\"FormSettings\");\r\n }}\r\n >\r\n */}\r\n {/* Settings*/}\r\n {/*
*/}\r\n \r\n \r\n \r\n ) : null}\r\n {enviroment === sourceTypes.PAGE ? (\r\n \r\n {\r\n this.toggle(\"PageSettings\");\r\n }}\r\n >\r\n */}\r\n {/* Devices*/}\r\n {/*
*/}\r\n \r\n \r\n \r\n ) : null}\r\n {enviroment === sourceTypes.TEMPLATE ? (\r\n \r\n {\r\n this.toggle(\"TemplateInternalSettings\");\r\n }}\r\n >\r\n \r\n ) : null}\r\n {enviroment !== sourceTypes.TEMPLATE && enviroment !== sourceTypes.EMAIL ? \r\n \r\n {\r\n this.restoreForm();\r\n }}\r\n >\r\n */}\r\n {/* Restore*/}\r\n {/*
*/}\r\n \r\n \r\n \r\n ) : null}\r\n \r\n {enviroment === sourceTypes.FORM ? (\r\n \r\n this.removePage(form.currentPage)} addPage={this.addPage} navigate={this.scrollPage} />\r\n \r\n ) : null}\r\n \r\n {!this.props.isOwner ?
: null}\r\n {activeTab !== \"ElementSettings\" ? (\r\n
\r\n ) : null}\r\n
\r\n \r\n {this.renderTabContent(activeTab)}\r\n \r\n
\r\n
{\r\n const affectedAreas = Array.from(this.state.affected);\r\n affectedAreas.map((a) => {\r\n if (a.area == path) {\r\n a.name = value;\r\n }\r\n });\r\n this.setState({ affected: affectedAreas });\r\n }}\r\n extraProps={null}\r\n affected={this.state.affected}\r\n text={this.state.inheritedElements ? \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { enviroment } = state.cms;\r\n let selectedContainer = null;\r\n let selectedElement = null;\r\n let inherit = null;\r\n let isOwner = false;\r\n\r\n if (enviroment === sourceTypes.FORM) {\r\n inherit = state.form ? state.form.inherit : null;\r\n selectedElement = state.form.selectedElement;\r\n selectedContainer = state.form.selectedContainer;\r\n isOwner = state.form ? state.cms.eventId == state.form.eventId && state.form.inheritParentId == null : false;\r\n }\r\n if (enviroment === sourceTypes.PAGE) {\r\n inherit = state.page ? state.page.inherit : null;\r\n selectedElement = state.page.selectedElement;\r\n selectedContainer = state.page.selectedContainer;\r\n isOwner = state.page ? state.cms.eventId == state.page.eventId : false;\r\n }\r\n if (enviroment === sourceTypes.TEMPLATE) {\r\n inherit = state.template.template ? state.template.template.inherit : null;\r\n selectedElement = state.template.selectedElement;\r\n selectedContainer = state.template.selectedContainer;\r\n isOwner = state.template.template ? state.cms.eventId == state.template.template.eventId : false;\r\n }\r\n\r\n if (enviroment === sourceTypes.EMAIL) {\r\n selectedElement = state.email.selectedElement;\r\n selectedContainer = null;\r\n }\r\n return {\r\n selectedElement,\r\n selectedContainer,\r\n page: state.page,\r\n form: state.form,\r\n email: state.email,\r\n enviroment: state.cms.enviroment,\r\n template: state.template.template,\r\n tempIsSavable: state.template.isSavable,\r\n cms: state.cms,\r\n inherit,\r\n isOwner,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(EditorSidebar);\r\n","import { elementConstants } from \"../../constants/cms/form/element/element.constants\";\r\nimport { defaultContainerElement, defaultContentElement, defaultQuestionElement, defaultFieldElement, defaultEventElement } from \"../models/defaultElements\";\r\nimport { deepClone } from \"../../helpers/objectHelper\";\r\n\r\n\r\nexport const elementOrgin = (type) => {\r\n switch (type) {\r\n case elementConstants.FIELD:\r\n return deepClone(defaultFieldElement.data)\r\n case elementConstants.EVENT:\r\n return deepClone(defaultEventElement.data)\r\n case elementConstants.QUESTION:\r\n return deepClone(defaultQuestionElement.data)\r\n case elementConstants.CONTENT:\r\n return deepClone(defaultContentElement.data)\r\n case elementConstants.CONTAINER:\r\n return deepClone(defaultContainerElement.data)\r\n default:\r\n return null\r\n }\r\n}","const emailPattern = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n// const phonePattern = /^(\\+{1}\\d{2,3}\\s?[(]{1}\\d{1,3}[)]{1}\\s?\\d+|\\+\\d{2,3}\\s{1}\\d+|\\d+){1}[\\s|-]?\\d+([\\s|-]?\\d+){1,2}$/;\r\nconst phonePattern = /^(\\+\\d{1,2}\\s)?\\(?\\d{3}\\)?[\\s.-]?\\d{3}[\\s.-]?\\d{4}$/;\r\n\r\nexport function inputValidator(input, type) {\r\n switch (type) {\r\n case \"numeric\":\r\n return !isNaN(input);\r\n case \"email\":\r\n return emailPattern.test(String(input).toLowerCase());\r\n case \"phone\":\r\n return phonePattern.test(String(input).toLowerCase());\r\n default:\r\n return true;\r\n }\r\n}\r\n\r\nexport function validateGln(input) {\r\n // Test string for correct length\r\n if (!input) {\r\n return false;\r\n }\r\n input = input.replace(/[\\s\\-]/g, \"\", );\r\n if(isNaN(input)){\r\n return false;\r\n }\r\n // let data = input.split(\"\");\r\n if (input.length != 13) {\r\n return false;\r\n }\r\n // Test string for being numeric\r\n for (let i = 0; i < input.length; i++) {\r\n if (input.charCodeAt(i) < 0x30 || input.charCodeAt(i) > 0x39) return false;\r\n }\r\n let weight = 1;\r\n let sum = 0;\r\n for (let i = 0; i < input.length - 1; i++) {\r\n sum += parseInt(input.charAt(i), 10) * weight;\r\n weight = (weight + 2) % 4;\r\n }\r\n let remainder = (10 - (sum % 10)) % 10;\r\n return input.charAt(input.length - 1) == 0 + remainder;\r\n}\r\n\r\nexport function validateOrgno(input, countryCode) {\r\n\r\n if (!input) {\r\n return false;\r\n }\r\n input = input.replace(/[\\s\\-]/g, \"\", );\r\n if(isNaN(input)){\r\n return false;\r\n }\r\n switch (countryCode) {\r\n // case \"DNK\":\r\n // let bValid = input.length == 8;\r\n // if (bValid) {\r\n // bValid = true;\r\n // let iRes = 0;\r\n // let sMul = \"27654321\";\r\n // for (let i = 0; i < input.length; i++) {\r\n // iRes += new Number(input.substr(i, 1)) * parseInt(sMul.substr(i, 1));\r\n // }\r\n // bValid = iRes % 11 == 0;\r\n // }\r\n // return bValid;\r\n case \"NOR\":\r\n let gyldig = false;\r\n let kontrollsiffer = 0;\r\n let o = input.split(\"\").map(i => {\r\n return parseInt(i, 10);\r\n });\r\n if (input.length == 9) {\r\n let sum =\r\n o[0] * 3 +\r\n o[1] * 2 +\r\n o[2] * 7 +\r\n o[3] * 6 +\r\n o[4] * 5 +\r\n o[5] * 4 +\r\n o[6] * 3 +\r\n o[7] * 2;\r\n let rest = sum % 11;\r\n let kontrollsiffer = rest === 0\r\n ? 0\r\n : 11 - rest;\r\n\r\n return rest != 1 && kontrollsiffer == o[8];\r\n } else {\r\n return false;\r\n }\r\n case \"SWE\":\r\n default:\r\n // Check valid length & form\r\n let numdigits = input.length\r\n if (input.indexOf(\"-\") === -1) {\r\n if (input.length === 10) {\r\n input = input.slice(0, 6) + \"-\" + input.slice(6);\r\n } else {\r\n input = input.slice(0, 8) + \"-\" + input.slice(8);\r\n }\r\n }\r\n if (\r\n !input.match(\r\n /^(\\d{2})(\\d{2})(\\d{2})\\-(\\d{4})|(\\d{4})(\\d{2})(\\d{2})\\-(\\d{4})$/\r\n )\r\n ) {\r\n return false;\r\n }\r\n // Clean input\r\n input = input.replace(\"-\", \"\");\r\n if (input.length === 12) {\r\n input = input.substring(2);\r\n }\r\n let sum = 0;\r\n // Check luhn algorithm\r\n for (let i = 0; i < input.length; i = i + 1) {\r\n let digit = parseInt(input.charAt(i), 10);\r\n if (i % 2 === input.length % 2) {\r\n digit *= 2;\r\n }\r\n if (digit > 9) {\r\n digit -= 9;\r\n }\r\n sum += digit;\r\n }\r\n return sum % 10 === 0;\r\n }\r\n}\r\n","import React from \"react\";\r\nimport { ExpansionPanelDetails as AccordionDetails, ExpansionPanelSummary as AccordionSummary, ExpansionPanel as Accordion } from \"@material-ui/core\";\r\nimport ExpansionPanelActions from \"@material-ui/core/ExpansionPanelActions\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport ExpandMoreIcon from \"@material-ui/icons/ExpandMore\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Divider from \"@material-ui/core/Divider\";\r\nimport SystemLabel from \"../../../system/SystemLabel/SystemLabel\";\r\n\r\nexport default function ListExpansion(props) {\r\n const { footer, children, header, icon, description, defaultExpanded } = props;\r\n\r\n return (\r\n \r\n
\r\n \r\n {icon && !icon.toString().includes(\"fa\") ? icon : null}\r\n
\r\n
\r\n
\r\n \r\n \r\n Cancel \r\n \r\n Save\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n {summaryContent}
\r\n \r\n \r\n \r\n \r\n Cancel \r\n \r\n Save\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n
\r\n );\r\n }\r\n }\r\n}\r\nexport default Notifier;\r\n","/* import config from 'c'; */\r\nimport { authHeader } from \"../../../helpers/authHeader\";\r\nimport { handleResponse } from \"../../../helpers/handleresponse\";\r\n\r\nexport const languageService = {\r\n getAllCodes,\r\n getAllCodesByEvent\r\n};\r\n\r\nasync function getAllCodesByEvent(eventId) {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n };\r\n\r\n return fetch(`./api/language/${eventId}`, requestOptions)\r\n .then(handleResponse)\r\n .then(languagesCodes => {\r\n return languagesCodes;\r\n });\r\n}\r\n\r\nasync function getAllCodes() {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: { \"Content-Type\": \"application/json\" },\r\n };\r\n\r\n return fetch(`./api/language/`, requestOptions)\r\n .then(handleResponse)\r\n .then(languagesCodes => {\r\n return languagesCodes;\r\n });\r\n}\r\n\r\n\r\n\r\n\r\n","\r\nimport { alertActions } from \"../../alert.action\";\r\nimport { languageService } from \"../../../../services/system/language/language.service\";\r\nimport { languageConstants } from \"../../../../constants/system/language/language.constants\";\r\n\r\nexport const languageActions = {\r\n getAllCodes,\r\n getAllCodesByEvent\r\n};\r\n\r\nfunction getAllCodes() {\r\n return dispatch => {\r\n dispatch(request());\r\n dispatch(alertActions.clear());\r\n languageService.getAllCodes().then(\r\n languageCodes => {\r\n dispatch(success(languageCodes));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: languageConstants.GETALL_CODES_REQUEST };\r\n }\r\n function success(languageCodes) {\r\n return { type: languageConstants.GETALL_CODES_SUCCESS, languageCodes };\r\n }\r\n function failure(error) {\r\n return { type: languageConstants.GETALL_CODES_FAILURE, error };\r\n }\r\n}\r\n\r\nfunction getAllCodesByEvent(eventId) {\r\n return dispatch => {\r\n dispatch(request());\r\n dispatch(alertActions.clear());\r\n languageService.getAllCodesByEvent(eventId).then(\r\n languageCodes => {\r\n dispatch(success(languageCodes));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n \r\n function request() {\r\n return { type: languageConstants.GETALL_CODES_BY_EVENT_REQUEST };\r\n }\r\n function success(languageCodes) {\r\n return { type: languageConstants.GETALL_CODES_BY_EVENT_SUCCESS, languageCodes };\r\n }\r\n function failure(error) {\r\n return { type: languageConstants.GETALL_CODES_BY_EVENT_FAILURE, error };\r\n }\r\n }\r\n","export const defaultTemplate = {\r\n main: {\r\n background: \"#eee\",\r\n backgroundSize: \"cover\",\r\n backgroundUrl: \"\",\r\n backgroundAttachment: 'fixed',\r\n backgroundPosition: '50% 50%',\r\n backgroundRepeat: 'no-repeat',\r\n videoBackgroundEnabled: false,\r\n youtubeUrl: '',\r\n backgroundColor: '#fff'\r\n\r\n },\r\n content: {\r\n backgroundColor: \"#ffffff\",\r\n maxWidth: \"100%\",\r\n marginTop: \"0px\",\r\n marginBottom: \"0px\",\r\n borderRadius: \"0px\",\r\n boxShadow: 'none',\r\n marginLeft: 'auto',\r\n marginRight: 'auto',\r\n padding: '13px',\r\n minHeight: '100%'\r\n },\r\n table: {\r\n borderCollapse: 'collapse',\r\n border: '0px'\r\n },\r\n tcell: {\r\n padding: '8px',\r\n borderStyle: 'solid',\r\n borderWidth: '1px',\r\n borderColor: '#dddddd',\r\n fontFamily: 'Open Sans',\r\n fontSize: '15px',\r\n backgroundColor: '#fff',\r\n color: '#222',\r\n fontWeight: 'normal'\r\n },\r\n spinner: {\r\n color: '#17a2b8'\r\n },\r\n thead: {\r\n padding: '8px',\r\n borderStyle: 'solid',\r\n borderWidth: '1px',\r\n borderColor: '#dddddd',\r\n fontFamily: 'Open Sans',\r\n fontSize: '15px',\r\n backgroundColor: '#fff',\r\n color: '#222',\r\n fontWeight: 'normal'\r\n },\r\n text: {\r\n color: \"#170c53\",\r\n fontFamily: \"Open Sans\",\r\n fontWeight: \"normal\",\r\n letterSpacing: \"0px\",\r\n fontSize: \"16px\"\r\n },\r\n title: {\r\n color: \"#535e58\",\r\n fontFamily: \"Open Sans\",\r\n fontSize: \"20px\",\r\n fontWeight: \"bold\",\r\n letterSpacing: \"1px\"\r\n },\r\n a: {\r\n color: \"blue\",\r\n textDecoration: \"none\",\r\n fontFamily: \"Open Sans\",\r\n letterSpacing: 'unset',\r\n fontWeight: 'unset',\r\n fontSize: 'unset',\r\n \"&:hover\": {\r\n color: 'lightblue',\r\n textDecoration: 'none'\r\n }\r\n },\r\n button: {\r\n height: \"auto\",\r\n minHeight: '30px',\r\n width: \"100%\",\r\n borderRadius: \"0px\",\r\n color: \"white\",\r\n fontSize: \"20px\",\r\n padding: '5px 20px',\r\n fontWeight: 'unset',\r\n backgroundColor: \"#FF8282\",\r\n borderColor: 'transparent',\r\n \"&:hover\": {\r\n color: \"white\",\r\n backgroundColor: \"pink\"\r\n },\r\n boxShadow: 'none',\r\n fontFamily: 'Open Sans',\r\n textTransform: 'unset'\r\n },\r\n header: {\r\n backgroundColor: \"#222\",\r\n marginTop: \"0px\",\r\n marginBottom: \"0px\",\r\n content: [],\r\n height: 'auto',\r\n background: '#222',\r\n width: '100%',\r\n innerWidth: '50%',\r\n overflow: 'hidden',\r\n boxShadow: 'none',\r\n backgroundUrl: \"\",\r\n padding: 'unset',\r\n marginLeft: 'auto',\r\n marginRight: 'auto'\r\n },\r\n footer: {\r\n backgroundColor: \"#222\",\r\n marginTop: \"0px\",\r\n marginBottom: \"0px\",\r\n content: [],\r\n height: 'auto',\r\n background: '#222',\r\n width: '100%',\r\n overflow: 'visible',\r\n backgroundUrl: \"\",\r\n innerWidth: '50%',\r\n boxShadow: 'none',\r\n padding: 'unset',\r\n marginLeft: 'auto',\r\n marginRight: 'auto'\r\n },\r\n label: {\r\n color: \"#535e58\",\r\n fontFamily: \"Open Sans\",\r\n fontSize: \"16px\",\r\n fontWeight: \"unset\",\r\n letterSpacing: \"1px\"\r\n },\r\n menu: {\r\n backgroundColor: \"unset\",\r\n fontFamily: \"Open Sans\",\r\n fontSize: \"20px\",\r\n fontWeight: \"normal\",\r\n color: \"unset\",\r\n textDecoration: \"none\",\r\n justifyContent: \"left\",\r\n display: 'none',\r\n position: 'unset',\r\n padding: 'unset',\r\n innerWidth: '50%',\r\n marginLeft: 'auto',\r\n marginRight: 'auto',\r\n minHeight: '50px',\r\n width: '100%',\r\n height: 'auto',\r\n \"&:active\": {\r\n color: 'unset',\r\n backgroundColor: 'unset'\r\n }\r\n },\r\n input: {\r\n readOnlyOpacity: 0.8,\r\n fontSize: \"17px\",\r\n fontWeight: \"normal\",\r\n color: \"#686673\",\r\n backgroundColor: \"#ffffff\",\r\n borderColor: \"#c0bcc2\",\r\n margin: \"0px\",\r\n borderRadius: \"10px\",\r\n width: \"150px\",\r\n boxShadow: 'none',\r\n textAreaMinHeight: '200px',\r\n fontFamily: 'Open Sans'\r\n },\r\n subtitle: {\r\n color: \"#7ed321\",\r\n fontSize: \"15px\",\r\n fontFamily: \"Open Sans\",\r\n letterSpacing: \"0px\",\r\n fontWeight: \"unset\",\r\n },\r\n interaction: {\r\n exhibitor:{\r\n frame: {\r\n background: 'unset',\r\n borderRadius: 'unset',\r\n padding: 'unset',\r\n \r\n },\r\n logo: {\r\n background: 'unset'\r\n },\r\n title: {\r\n color: 'unset',\r\n fontSize: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset'\r\n },\r\n subtitle: {\r\n color: 'unset',\r\n fontSize: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset'\r\n }\r\n },\r\n chat: {\r\n primaryColor: 'unset',\r\n badgePillColor: 'unset',\r\n secondaryColor: 'unset',\r\n sendButtonColor: 'unset',\r\n container: {\r\n borderColor: 'unset',\r\n borderRadius: 'unset',\r\n borderWidth: 'unset',\r\n },\r\n header: {\r\n background: 'unset',\r\n borderColor: 'unset',\r\n color: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset',\r\n fontSize: 'unset',\r\n },\r\n footer: {\r\n background: 'unset',\r\n borderColor: 'unset',\r\n inputColor: 'unset',\r\n inputBackground: 'unset',\r\n fontFamily: 'unset'\r\n },\r\n content: {\r\n background: 'unset'\r\n },\r\n messages: {\r\n fontSize: 'unset',\r\n fontWeight: 'unset',\r\n lineHeight: 'unset',\r\n fontFamily: 'unset',\r\n color: 'unset',\r\n \r\n receiver: {\r\n backgroundColor: 'unset',\r\n color: 'unset',\r\n thumbColor: 'unset',\r\n },\r\n sender: {\r\n backgroundColor: 'unset',\r\n color: 'unset',\r\n thumbColor: 'unset',\r\n }\r\n }\r\n \r\n\r\n },\r\n client: {\r\n sendButton: {\r\n height: \"auto\",\r\n width: \"auto\",\r\n borderRadius: \"0px\",\r\n color: \"white\",\r\n fontSize: \"20px\",\r\n backgroundColor: \"#FF8282\",\r\n /* background: 'linear-gradient(to right, #dddddd2b, #b1b1b170)', */\r\n boxShadow: 'none',\r\n fontFamily: 'Open Sans',\r\n\r\n },\r\n optionButton: {\r\n height: 'unset'\r\n },\r\n question: {\r\n minWidth: 'unset',\r\n maxWidth: 'unset'\r\n },\r\n frame: {\r\n backgroundColor: 'unset',\r\n borderRadius: 'unset',\r\n borderColor: 'unset',\r\n fontFamily: 'unset',\r\n fontWeight: 'unset',\r\n color: 'unset',\r\n fontSize: 'unset',\r\n\r\n }\r\n },\r\n agenda: {\r\n content: {\r\n padding: 'unset',\r\n background: 'unset',\r\n backgroundColor: 'unset',\r\n backgroundUrl: 'unset',\r\n margin: 'unset',\r\n borderRadius: 'unset'\r\n },\r\n title: {\r\n fontSize: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset',\r\n color: 'unset',\r\n marginLeft: 'unset',\r\n },\r\n row: {\r\n default: {\r\n frame: {\r\n borderColor: 'unset',\r\n borderWidth: 'unset',\r\n backgroundColor: 'unset',\r\n padding: 'unset',\r\n borderRadius: 'unset',\r\n /* margin: 'unset', */\r\n marginTop: 'unset',\r\n },\r\n title: {\r\n fontSize: 'unset',\r\n color: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset'\r\n },\r\n text: {\r\n fontSize: 'unset',\r\n color: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset'\r\n }\r\n },\r\n active: {\r\n frame: {\r\n borderColor: 'unset',\r\n borderWidth: 'unset',\r\n backgroundColor: 'unset',\r\n padding: 'unset',\r\n borderRadius: 'unset',\r\n /* margin: 'unset', */\r\n marginTop: 'unset',\r\n },\r\n title: {\r\n fontSize: 'unset',\r\n color: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset'\r\n },\r\n text: {\r\n fontSize: 'unset',\r\n color: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset'\r\n }\r\n },\r\n passed: {\r\n frame: {\r\n borderColor: 'unset',\r\n borderWidth: 'unset',\r\n backgroundColor: 'unset',\r\n padding: 'unset',\r\n borderRadius: 'unset',\r\n /* margin: 'unset', */\r\n marginTop: 'unset',\r\n },\r\n title: {\r\n fontSize: 'unset',\r\n color: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset'\r\n },\r\n text: {\r\n fontSize: 'unset',\r\n color: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset'\r\n }\r\n }\r\n }\r\n\r\n },\r\n connections: {\r\n background: 'unset',\r\n backgroundColor: 'unset',\r\n backgroundUrl: 'unset',\r\n borderRadius: 'unset',\r\n fontSize: 'unset',\r\n fontWeight: 'unset',\r\n fontFamily: 'unset',\r\n borderWidth: 'unset',\r\n borderColor: 'unset',\r\n color: 'unset'\r\n }\r\n },\r\n chart: {\r\n colors: {\r\n color1: 'blue',\r\n color2: 'red',\r\n color3: 'orange',\r\n color4: 'green',\r\n color5: 'yellow'\r\n },\r\n textflowColor: 'black',\r\n textflowBgColor: 'lightgray'\r\n\r\n },\r\n scrollbar: {\r\n thumbBackgroundColor: 'unset',\r\n thumbBorderRadius: 'unset',\r\n trackBackgroundColor: 'unset',\r\n thumbColorHover: 'unset',\r\n width: 'unset'\r\n },\r\n\r\n responsive: {\r\n tablet: {\r\n content: {\r\n maxWidth: '100%',\r\n minHeight: '100%',\r\n marginTop: \"unset\",\r\n marginBottom: \"unset\",\r\n borderRadius: \"unset\",\r\n boxShadow: 'unset',\r\n marginLeft: 'unset',\r\n marginRight: 'unset',\r\n padding: 'unset'\r\n },\r\n menu: {\r\n display: 'unset',\r\n padding: 'unset',\r\n innerWidth: 'unset',\r\n minHeight: 'unset',\r\n width: '100%',\r\n position: 'fixed'\r\n },\r\n footer: {\r\n height: 'unset',\r\n width: '100%',\r\n padding: 'unset'\r\n },\r\n header: {\r\n height: 'unset',\r\n width: '100%',\r\n padding: 'unset',\r\n innerWidth: 'unset',\r\n }\r\n },\r\n smartphone: {\r\n content: {\r\n maxWidth: '100%',\r\n marginTop: \"unset\",\r\n minHeight: '100%',\r\n marginBottom: \"unset\",\r\n borderRadius: \"unset\",\r\n boxShadow: 'unset',\r\n marginLeft: 'unset',\r\n marginRight: 'unset',\r\n padding: '15px'\r\n },\r\n menu: {\r\n display: 'unset',\r\n position: 'unset',\r\n padding: 'unset',\r\n innerWidth: 'unset',\r\n minHeight: 'unset',\r\n width: '100%',\r\n },\r\n footer: {\r\n height: 'unset',\r\n width: '100%',\r\n padding: 'unset',\r\n innerWidth: '50%',\r\n },\r\n header: {\r\n height: 'unset',\r\n width: '100%',\r\n padding: 'unset',\r\n innerWidth: 'unset',\r\n }\r\n }\r\n }\r\n};\r\n\r\n\r\n\r\n\r\n/*\r\nexport const defaultTemplate = {\r\n main: {\r\n background: \"orange\",\r\n backgroundUrl: \"\",\r\n backgroundColor: \"#fff\",\r\n backgroundSize: \"cover\"\r\n },\r\n backgroundConfig: {\r\n backgroundColor: \"\",\r\n maxWidth: \"\",\r\n marginTop: \"\",\r\n marginBottom: \"\"\r\n },\r\n text: {\r\n color: \"#fff\",\r\n fontFamily: \"\",\r\n fontWeight: \"\",\r\n fontSpacing: \"\"\r\n },\r\n title: {\r\n color: \"\",\r\n fontFamily: \"\",\r\n fontSize: \"\",\r\n fontWeight: \"\",\r\n fontSpacing: \"\"\r\n },\r\n subTitle: {\r\n color: \"\",\r\n fontFamily: \"\",\r\n fontSize: \"\",\r\n fontWeight: \"\",\r\n fontSpacing: \"\"\r\n },\r\n a: {\r\n colorDarkBg: \"\",\r\n colorLightBg: \"\",\r\n underScore: false,\r\n \"&:hover\": {\r\n color: \"\"\r\n }\r\n },\r\n button: {\r\n size: \"\",\r\n borderRadius: \"\",\r\n color: \"\",\r\n backgroundColor: \"\",\r\n \"&:hover\": {\r\n color: \"\",\r\n backgroundColor: \"red\"\r\n }\r\n },\r\n header: {\r\n backgroundColor: \"\",\r\n marginTop: \"\",\r\n marginBottom: \"\",\r\n content: \"\",\r\n height: 'auto',\r\n background: '',\r\n width: '100%',\r\n overflow: 'visible'\r\n },\r\n footer: {\r\n backgroundColor: \"\",\r\n marginTop: \"20%\",\r\n marginBottom: \"0px\",\r\n content: \"\",\r\n height: 'auto',\r\n background: '',\r\n width: '100%',\r\n overflow: 'visible'\r\n },\r\n menu: {\r\n icon: \"\",\r\n backgroundColor: \"\",\r\n fontFamily: \"\",\r\n fontSize: \"\",\r\n fontWeight: \"\",\r\n color: \"\",\r\n underScore: false,\r\n activePageColor: \"\",\r\n activePageBackgroundColor: \"\",\r\n justify: \"\"\r\n },\r\n input: {\r\n fontFamily: \"\",\r\n fontSize: \"\",\r\n fontWeight: \"\",\r\n color: \"\",\r\n backgroundColor: \"\",\r\n borderColor: \"\",\r\n margin: \"\",\r\n borderRadius: \"\"\r\n }\r\n};\r\n\r\n\r\n */\r\n\r\n\r\n\r\n\r\n","import React, { useEffect } from \"react\";\r\nimport { connect } from 'react-redux'\r\nimport { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';\r\nimport { SketchPicker, Color } from \"react-color\";\r\nimport { colorHelper } from \"../../../helpers/colorHelper\";\r\nimport Popover from \"@material-ui/core/Popover\";\r\nimport { cmsActions } from \"../../../store/actions/cms/cms.action\";\r\nimport SystemLabel from \"../../../system/SystemLabel/SystemLabel\";\r\nimport './ColorPickerStyles.css'\r\n\r\n\r\nconst TemplateColors = ({ usedColors, onClick, path }) => {\r\n const handleClick = (color) => {\r\n let newColor = color;\r\n if (!color.includes('#') && !color.includes('rgb') && !color.includes('rgba')) {\r\n newColor = colorHelper.colourNameToHex(color);\r\n if (!newColor) return;\r\n }\r\n let convertedColor = isHex(newColor) ? colorHelper.hexToRgb(newColor) : colorHelper.rgbToObject(newColor);\r\n\r\n onClick({ hex: '', rgb: convertedColor }, newColor, path)\r\n }\r\n const isHex = (color) => {\r\n if (color.toString().includes('#')) return true;\r\n return false;\r\n }\r\n const filterColors = (colors) => {\r\n return Array.from(new Set([...colors]));\r\n }\r\n const colors = filterColors(usedColors)\r\n return (\r\n \r\n \r\n \r\n {colors.map((c, i) => {\r\n return
\r\n
\r\n handleClick(c)} style={{ backgroundColor: c }} className=\"color-box\">
\r\n \r\n
\r\n })}\r\n
\r\n \r\n );\r\n};\r\nfunction mapStateToProps(state) {\r\n return {\r\n usedColors: state.template.usedColors\r\n };\r\n}\r\nexport default connect(mapStateToProps)(TemplateColors);","import React, { useEffect } from \"react\";\r\nimport { connect } from 'react-redux'\r\nimport { SketchPicker, Color } from \"react-color\";\r\nimport { Button, Row, Col } from \"reactstrap\";\r\nimport { colorHelper } from \"../../../helpers/colorHelper\";\r\nimport Popover from \"@material-ui/core/Popover\";\r\nimport { cmsActions } from \"../../../store/actions/cms/cms.action\";\r\nimport TemplateColors from \"./TemplateColors\";\r\n\r\n\r\nconst ColorPickerFacade = (props) => {\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const handleClick = event => {\r\n setAnchorEl(event.currentTarget);\r\n props.dispatch(cmsActions.blockDeselect(true))\r\n //load all colors from template\r\n };\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n setTimeout(() => props.dispatch(cmsActions.blockDeselect(false)), 2000)\r\n };\r\n\r\n const { color, onChange, path } = props;\r\n const open = Boolean(anchorEl);\r\n const id = open ? `${path.replace(\".\", \"-\")}` : undefined;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n onChange(color, e, path)\r\n }\r\n />\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\nfunction mapStateToProps(state) {\r\n return {\r\n usedColors: state.template.usedColors\r\n };\r\n}\r\nexport default connect(mapStateToProps)(ColorPickerFacade);","import styled from 'styled-components';\r\n\r\nexport const DropArea = styled.div`\r\nbackground-color: ${props => (props.isDraggingOver ? '#00000005' : 'inherit')}`;\r\n\r\nexport const DropAreaContainer = styled.div`\r\nbackground-color: ${props => (props.isDraggingOver ? '#28a74563' : 'inherit')}\r\nborder: ${props => (props.isDraggingOver ? '1px dashed #28a745' : 'inherit')}\r\n`;","\r\nimport styled from 'styled-components';\r\nexport const DragContainer = styled.div`\r\nbackground-color: ${props => (props.isDragging ? '#e7f9ff' : props.backgroundColor)}\r\n\r\n`;","import { history } from \"./history\";\r\nimport { logException } from \"../sentry.config\";\r\n\r\nexport function handleResponse(response) {\r\n return response.text().then(text => {\r\n if (!response.ok) {\r\n switch (response.status) {\r\n case 400:\r\n /* history.push(\"/404\"); */\r\n break;\r\n case 500:\r\n const error = response.statusText;\r\n console.log('SERVER_ERR', error, 'RESPONSE:' + response, \"VALUE\" + text);\r\n logException(error, { response: response, text: text });\r\n history.push(\"/500\");\r\n break;\r\n case 404:\r\n history.push(\"/404\");\r\n break;\r\n case 401:\r\n history.push(\"/login\");\r\n break;\r\n default:\r\n break;\r\n }\r\n try {\r\n\r\n let data = text && JSON.parse(text);\r\n const error = (data && data.message) || response.statusText;\r\n return Promise.reject(error);\r\n }\r\n catch{\r\n const error = response.statusText;\r\n console.log('JX_PARSE_ERROR', error, 'RESPONSE:' + response, \"VALUE\" + text);\r\n logException(error, { response: response, text: text });\r\n return Promise.reject(error);\r\n }\r\n }\r\n\r\n try {\r\n let escapedText = text.replace(/\\\\n/g, \"\\\\n\")\r\n .replace(/\\\\'/g, \"\\\\'\")\r\n .replace(/\\\\\"/g, '\\\\\"')\r\n .replace(/\\\\&/g, \"\\\\&\")\r\n .replace(/\\\\r/g, \"\\\\r\")\r\n .replace(/\\\\t/g, \"\\\\t\")\r\n .replace(/\\\\b/g, \"\\\\b\")\r\n .replace(/\\\\f/g, \"\\\\f\");\r\n /* .replace('%20', ''); */\r\n let data = escapedText && JSON.parse(escapedText);\r\n return data;\r\n }\r\n catch{\r\n const error = response.statusText;\r\n console.log('JX_PARSE_ERROR', error, 'RESPONSE:' + response, \"VALUE\" + text)\r\n logException(error, { response: response, text: text });\r\n return Promise.reject(error);\r\n }\r\n });\r\n}\r\n","import { alertConstants } from '../../constants/alert.constants';\r\n\r\nexport const alertActions = {\r\n success,\r\n error,\r\n info,\r\n clear,\r\n warning\r\n};\r\n\r\nfunction success(title, message) {\r\n return { type: alertConstants.SUCCESS, message, title };\r\n}\r\n\r\nfunction info(title, message) {\r\n return { type: alertConstants.INFO, message, title };\r\n}\r\n\r\nfunction error(title, message) {\r\n return { type: alertConstants.ERROR, message, title };\r\n}\r\n\r\n\r\nfunction warning(title, message) {\r\n return { type: alertConstants.WARNING, message, title };\r\n}\r\n\r\nfunction clear() {\r\n return { type: alertConstants.CLEAR };\r\n}","import React from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { inlineSettings, tabSettings } from '../../../../components/TinyMCE/tinyconfig';\r\nimport { Editor } from \"@tinymce/tinymce-react\";\r\nimport ArchiveContainer from '../../../../file/containers/ArchiveContainer';\r\nimport { sourceTypes } from '../../../../constants/cms/sourceType';\r\nimport { emailActions } from '../../../../store/actions/cms/email/email.action';\r\nimport LinkManager from '../../../../navigation/LinkManager/LinkManager';\r\nimport { templateHelper } from '../../../areas/template/helpers/templateHelper';\r\nimport { TinyMCE } from \"tinymce\";\r\nconst getGlobal = function () { return (typeof window !== 'undefined' ? window : global); };\r\nconst setTinymce = function () {\r\n var global = getGlobal();\r\n if (global && !global.tinymce)\r\n global.tinymce = TinyMCE;\r\n};\r\n\r\nclass TinyEditor extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.toggleArchive = this.toggleArchive.bind(this);\r\n this.onInit = this.onInit.bind(this);\r\n this.handleKeyUp = this.handleKeyUp.bind(this);\r\n this.onArchiveUseSelect = this.onArchiveUseSelect.bind(this);\r\n this.state = {\r\n editor: {},\r\n cycleEditor: false,\r\n archiveOpen: false,\r\n active: false,\r\n linkHelperOpen: false,\r\n selectedLink: null\r\n }\r\n setTinymce();\r\n }\r\n componentDidUpdate(prevProps) {\r\n if (this.props.env === sourceTypes.FORM && prevProps.form.currentPage !== this.props.form.currentPage) {\r\n this.setState({ cycleEditor: true })\r\n }\r\n if (this.state.cycleEditor === true) {\r\n this.setState({ cycleEditor: false })\r\n }\r\n }\r\n\r\n onInit(editor, languageCode) {\r\n this.setState({ editor }, () => {\r\n });\r\n const { env, dispatch, element, email } = this.props;\r\n if (element && env === sourceTypes.EMAIL) {\r\n const newElement = Object.assign({}, element);\r\n newElement.style.elementProps.editor = this.state.editor;\r\n dispatch(emailActions.updateEmailElement(newElement, newElement.id, false, email.inherit))\r\n }\r\n };\r\n toggleArchive() {\r\n this.setState({ archiveOpen: !this.state.archiveOpen })\r\n }\r\n handleKeyUp = (event, languageCode) => {\r\n var content = this.state.editor.getContent();\r\n if (content !== this.props.value) {\r\n if (this.props.globalFormat === true) {\r\n this.props.onChange(null, content, this.props.path);\r\n }\r\n else if (this.props.slimFormat === true) {\r\n this.props.onChange(content, this.props.path);\r\n } else {\r\n this.props.onChange(content);\r\n }\r\n }\r\n\r\n };\r\n formatImage(id) {\r\n var content = this.state.editor.getContent();\r\n this.props.onChange(content);\r\n }\r\n onArchiveUseSelect(url) {\r\n var image = new Image;\r\n image.crossOrigin = \"anonymous\"; /* THIS WILL MAKE THE IMAGE CROSS-ORIGIN */\r\n image.src = url;\r\n let content = this.state.editor.insertContent(`\r\n \r\n ${obj.displayText} \r\n \r\n `);\r\n }\r\n else {\r\n content = this.state.editor.insertContent(`\r\n ${obj.displayText}\r\n `);\r\n }\r\n\r\n content = this.state.editor.getContent();\r\n }\r\n toggleLinkHelper = () => {\r\n\r\n this.setState({ linkHelperOpen: !this.state.linkHelperOpen })\r\n }\r\n render() {\r\n const { style, value, onInit, onChange, cms, inline = true, height, env, selectedElement, contentId = null, element = null } = this.props;\r\n\r\n return (\r\n \r\n {!this.state.cycleEditor ? \r\n this.onInit(editor, cms && cms.languageCode)\r\n }\r\n onFocus={() => this.setState({ active: true })}\r\n disabled={!this.props.editMode}\r\n init={inline ? {\r\n ...inlineSettings, content_style: style, width: '100%', height: '100%', setup: (editor) => {\r\n editor.ui.registry.addButton('archive', {\r\n icon: 'image',\r\n image: 'image',\r\n onAction: () =>\r\n this.toggleArchive()\r\n });\r\n editor.ui.registry.addButton('anchor', {\r\n icon: 'link',\r\n image: 'link',\r\n onAction: () => {\r\n const selectedLink = editor.selection.getNode();\r\n if (selectedLink && selectedLink.localName === \"a\") {\r\n this.setState({\r\n selectedLink: {\r\n target: selectedLink.target,\r\n link: selectedLink.href,\r\n name: selectedLink.innerHTML\r\n }\r\n })\r\n }\r\n else {\r\n const range = editor.selection.getRng();\r\n if (range) {\r\n this.setState({\r\n selectedLink: {\r\n target: \"_blank\",\r\n link: \"\",\r\n name: range.startContainer.data ? range.startContainer.data.substring(range.startOffset, range.endOffset) : \" \",\r\n }\r\n })\r\n }\r\n }\r\n this.toggleLinkHelper()\r\n }\r\n });\r\n },\r\n } : {\r\n ...tabSettings, content_style: style, width: '100%', height: height, setup: (editor) => {\r\n editor.ui.registry.addButton('archive', {\r\n icon: 'image',\r\n image: 'image',\r\n onAction: () =>\r\n this.toggleArchive()\r\n })\r\n }\r\n }\r\n }\r\n onEditorChange={e => this.handleKeyUp(e, cms && cms.languageCode)}\r\n /> : null}\r\n \r\n )\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n let selectedElement = null;\r\n let env = null;\r\n if (state.cms.enviroment === sourceTypes.TEMPLATE) {\r\n selectedElement = state.template.selectedElement;\r\n env = sourceTypes.TEMPLATE\r\n }\r\n if (state.cms.enviroment === sourceTypes.PAGE) {\r\n selectedElement = state.page.selectedElement;\r\n env = sourceTypes.PAGE\r\n }\r\n if (state.cms.enviroment === sourceTypes.FORM) {\r\n selectedElement = state.form.selectedElement;\r\n env = sourceTypes.FORM\r\n }\r\n if (state.cms.enviroment === sourceTypes.EMAIL) {\r\n selectedElement = state.email.selectedElement;\r\n env = sourceTypes.EMAIL\r\n }\r\n return {\r\n alert: state.alert,\r\n form: state.form,\r\n cms: state.cms,\r\n selectedElement,\r\n template: state.template,\r\n language: state.language,\r\n page: state.page,\r\n email: state.email,\r\n env\r\n };\r\n}\r\nexport default connect(mapStateToProps)(TinyEditor);\r\n","import React from 'react';\r\nimport AccountTreeIcon from '@material-ui/icons/AccountTree';\r\nimport { connect } from 'react-redux';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { labelHelper } from '../../../../../helpers/labelHelper';\r\nimport LockIcon from '@material-ui/icons/Lock';\r\nimport './Inheritage.css';\r\nimport SystemLabel from '../../../../../system/SystemLabel/SystemLabel';\r\nimport { sourceTypes } from '../../../../../constants/cms/sourceType';\r\n\r\nconst InheritageWrapper = (props) => {\r\n const { cms, status, onClick, small } = props;\r\n if(cms.enviroment === sourceTypes.TEMPLATE && small) return null;\r\n if (status === true && cms.inheritInfo) return ;\r\n if (status === false) return (\r\n \r\n
\r\n {!small ?
\r\n
: null}\r\n
\r\n \r\n \r\n {this.state.isLoading ?
: null}\r\n
\r\n
\r\n
\r\n {/*
\r\n \r\n
*/}\r\n
\r\n {/* \r\n */}\r\n \r\n \r\n {/* {!this.props.mailCrop ? */}\r\n this.props.cancel()}>\r\n {\" \"}\r\n {/* : null} */}\r\n
\r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\nexport default InlineCropper;\r\n","import React, { useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { toKebabCase } from \"../../../../helpers/cssHelper\";\r\nimport TinyEditor from \"../../../components/plugins/tiny_plugin/TinyEditor\";\r\n/* import './TextArea.css' */\r\n\r\nconst TextWrapper = (props) => {\r\n const { text, textOnChange, selectedElement, template, contentId, element, elementStyle = null } = props;\r\n let selectedStyles = {};\r\n if (template && template.content) {\r\n const { title, a, subtitle, label, table, thead, tcell } = template.content;\r\n selectedStyles = { title, a, subtitle, label, table, thead, tcell };\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {template ? (\r\n \r\n ) : null}\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\nfunction mapStateToProps(state) {\r\n return {\r\n selectedElement: state.email.selectedElement,\r\n template: state.template.template,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(TextWrapper);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport Axios from \"axios\";\r\nimport { sourceTypes } from \"../../constants/cms/sourceType\";\r\nimport Dialog from \"@material-ui/core/Dialog\";\r\nimport DialogActions from \"@material-ui/core/DialogActions\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport DialogContentText from \"@material-ui/core/DialogContentText\";\r\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport { Row, Label, Col, Input } from \"reactstrap\";\r\nimport { InputBase, Paper, Button } from \"@material-ui/core\";\r\nimport SearchIcon from \"@material-ui/icons/Search\";\r\nimport JirangoSwitch from \"../../components/UI/Switch/JirangoSwitch\";\r\nimport SystemLabel from \"../../system/SystemLabel/SystemLabel\";\r\nimport LinkIcon from \"@material-ui/icons/Link\";\r\nimport ViewListIcon from \"@material-ui/icons/ViewList\";\r\nimport { FloatingGenericList } from \"../../cms/components/editor/tools/FloatingChecklist/FloatingChecklist\";\r\nimport { cmsActions } from \"../../store/actions/cms/cms.action\";\r\nclass LinkManager extends React.Component {\r\n state = {\r\n showSettings: false,\r\n internalPaths: [],\r\n searchKey: \"\",\r\n currentLink: \"\",\r\n domain: \"\",\r\n target: \"_blank\",\r\n appendBadgeNo: false,\r\n showList: false,\r\n };\r\n\r\n\r\n\r\n\r\n componentDidMount() {\r\n const { selectedLink } = this.props;\r\n if (selectedLink && typeof selectedLink == {}) {\r\n const { target, link, name } = selectedLink;\r\n this.setState({ target, currentLink: link, displayText: name });\r\n }\r\n this.getInternalPaths();\r\n }\r\n componentDidUpdate(prevProps) {\r\n const { selectedLink } = this.props;\r\n if ((selectedLink && !prevProps.selectedLink) || (selectedLink && prevProps.selectedLink != selectedLink)) {\r\n const { target, link, name } = selectedLink;\r\n this.setState({ target, currentLink: link, displayText: name });\r\n }\r\n\r\n if (this.props.isOpen && !prevProps.isOpen) {\r\n this.props.dispatch(cmsActions.blockDeselect(true));\r\n }\r\n }\r\n\r\n editLink = (e) => this.setState({ currentLink: e });\r\n search = (str) => this.setState({ searchKey: str, showList: false });\r\n toggleAlt = () =>\r\n this.setState({\r\n target: this.state.target == \"_blank\" ? \"_self\" : \"_blank\",\r\n });\r\n handleClose = () => {\r\n this.props.toggle();\r\n setTimeout(() => this.props.dispatch(cmsActions.blockDeselect(false)), 2000);\r\n };\r\n setLink = () => {\r\n const { displayText, target, domain, currentLink } = this.state;\r\n let link = currentLink;\r\n if (!link.includes(\"https://\") && !link.includes(\"mailto\")) link = \"https://\" + link;\r\n\r\n this.props.setLink({\r\n currentLink: link,\r\n displayText,\r\n target,\r\n });\r\n this.setState({ currentLink: \"\", displayText: \"\" });\r\n this.props.toggle();\r\n };\r\n getInternalPaths = () => {\r\n const { cms } = this.props;\r\n if (!cms.eventId) return;\r\n Axios.get(`./api/link/${cms.eventId}`).then((res) => {\r\n const { data } = res;\r\n if (data) {\r\n const { pathsObj } = data;\r\n let paths = pathsObj.paths;\r\n\r\n if (this.props.cms.enviroment == sourceTypes.EMAIL && paths) {\r\n paths.push({\r\n id: -100,\r\n type: \"Survey\",\r\n name: \"Survey\",\r\n });\r\n }\r\n this.setState({\r\n internalPaths: paths,\r\n domain: pathsObj.domain,\r\n });\r\n }\r\n });\r\n };\r\n convertInternalLink = (type, id) => {\r\n const { domain } = this.state;\r\n if (typeof id == \"string\" && !isNaN(id)) {\r\n id = parseInt(id);\r\n }\r\n\r\n switch (type) {\r\n case \"Form\":\r\n return domain + (!window.location.href.includes(\"localhost\") ? \"/cms\" : \"\") + \"/register/\" + id.toString(36) + \"?badgeNo=[BadgeNo]\";\r\n case \"AnonymousSurvey\":\r\n return domain + (!window.location.href.includes(\"localhost\") ? \"/cms\" : \"\") + \"/survey/\" + id; /* .toString(36) */\r\n case \"Breakout\":\r\n return domain + (!window.location.href.includes(\"localhost\") ? \"/interaction\" : \"\") + \"/digitalarena/\" + id + \"?clientkey=[BadgeNo]\";\r\n case \"Page\":\r\n return domain + (!window.location.href.includes(\"localhost\") ? \"/cms\" : \"\") + \"/p/\" + id.toString(36) + \"?badgeNo=[BadgeNo]\";\r\n case \"DigitalArena\":\r\n return domain + (!window.location.href.includes(\"localhost\") ? \"/interaction\" : \"\") + \"/digitalarena/\" + id + \"?clientkey=[BadgeNo]\";\r\n case \"DigitalArenaOld\":\r\n return domain + (!window.location.href.includes(\"localhost\") ? \"/interaction\" : \"\") + \"/digitalmeeting/\" + id + \"?clientkey=[BadgeNo]\";\r\n case \"Exhibitor\":\r\n return domain + (!window.location.href.includes(\"localhost\") ? \"/interaction\" : \"\") + \"/exhibitor/\" + id.toString(36) + \"?clientkey=[BadgeNo]\";\r\n case \"Survey\":\r\n return \"[SurveyLink]\";\r\n case \"ChannelList\":\r\n return domain + (!window.location.href.includes(\"localhost\") ? \"/interaction\" : \"\") + \"/channels/\" + id + \"?clientKey=[BadgeNo]\";\r\n case \"Cms2FORM\":\r\n case \"Cms2PAGE\":\r\n case \"Cms2SURVEY\":\r\n return domain + (!window.location.href.includes(\"localhost\") ? \"/cms\" : \"\") + \"/web/\" + id + \"?badgeNo=[BadgeNo]\";\r\n default:\r\n return \"\";\r\n }\r\n };\r\n selectFromList = (id, type) => {\r\n const { internalPaths } = this.state;\r\n console.log(internalPaths)\r\n const internalPath = internalPaths.find((p) => p.id == id && p.type == type);\r\n if (internalPath) {\r\n var x = {\r\n currentLink: this.convertInternalLink(internalPath.type, id),\r\n displayText: internalPath.name,\r\n searchKey: false,\r\n showList: false,\r\n };\r\n this.setState(x);\r\n }\r\n };\r\n getList = () => {\r\n const { searchKey, internalPaths, showList, displayText, currentLink } = this.state;\r\n let paths = Array.from(internalPaths);\r\n\r\n return showList ? paths : paths.filter((p) => p.name.toLowerCase().includes(searchKey.toLowerCase()));\r\n };\r\n toggleMailTo = () => {\r\n if (this.state.currentLink.includes(\"mailto:\")) {\r\n this.setState({ currentLink: this.state.currentLink ? this.state.currentLink.replace(\"mailto:\", \"\") : this.state.currentLink });\r\n } else {\r\n this.setState({ currentLink: \"mailto:\" + this.state.currentLink });\r\n }\r\n };\r\n render() {\r\n const { isOpen } = this.props;\r\n const { searchKey, internalPaths, showList, displayText, currentLink } = this.state;\r\n console.log(internalPaths)\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\r\n this.search(e.target.value);\r\n this.editLink(e.target.value);\r\n }}\r\n />\r\n this.setState({ showList: !this.state.showList })}\r\n style={{\r\n padding: \"0px 10px\",\r\n cursor: \"pointer\",\r\n zIndex: 1,\r\n }}\r\n /* className={classes.iconButton} */ aria-label=\"search\"\r\n >\r\n \r\n {(searchKey.length > 3 && internalPaths.length > 0) || (showList && internalPaths.length > 0) ? (\r\n this.selectFromList(id, type)} list={this.getList()} />\r\n ) : null}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {this.state.currentLink != \"[SurveyLink]\" ? (\r\n \r\n \r\n \r\n \r\n this.toggleMailTo()} isChecked={this.state.currentLink ? this.state.currentLink.includes(\"mailto:\") : \"\"} />\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { enviroment } = state.cms;\r\n return {\r\n template: state.template.template,\r\n cms: state.cms,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(LinkManager);\r\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, InputGroupAddon, Input, InputGroupText, InputGroup, Col, Row } from 'reactstrap';\r\nimport { languageActions } from '../../store/actions/system/language/language.action';\r\nimport { formActions } from '../../store/actions/cms/form/form.action';\r\nimport './LanguageToggler.css'\r\nimport { tempLangConverter } from '../../helpers/lanugageHelper';\r\n\r\nclass LanguageToggler extends React.Component {\r\n state = {\r\n isOpen: false,\r\n codes: null,\r\n display: false\r\n }\r\n componentDidMount() {\r\n const { form, dispatch } = this.props;\r\n dispatch(languageActions.getAllCodesByEvent(form.eventId));\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (prevProps.language !== this.props.language && this.props.language !== undefined) {\r\n const { eventCodes } = this.props.language;\r\n if (eventCodes !== undefined && eventCodes.length > 1) {\r\n this.setState({ codes: eventCodes, display: true });\r\n }\r\n\r\n }\r\n }\r\n toggleLanguage = (code) => {\r\n const { dispatch, event, form } = this.props;\r\n const formLangChanged = { ...form, languageCode: code };\r\n dispatch(formActions.softUpdate(Object.assign({}, formLangChanged)));\r\n }\r\n toggle = () => {\r\n this.setState({\r\n dropdownOpen: !this.state.dropdownOpen\r\n });\r\n }\r\n render() {\r\n const { codes, display } = this.state;\r\n const { form } = this.props\r\n return (\r\n \r\n {display && \r\n \r\n \r\n \r\n {codes ? codes.map(c => {\r\n return this.toggleLanguage(c)} key={c}>\r\n \r\n {c}
\r\n */}\r\n
\r\n \r\n }) : \r\n }\r\n \r\n\r\n )\r\n }\r\n}\r\n\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n language: state.language,\r\n form: state.form,\r\n event: state.event,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(LanguageToggler);\r\n","import React from \"react\";\r\nimport { Container, Row, Col, Card, Button, Popover, PopoverHeader, Spinner } from \"reactstrap\";\r\nimport { connect } from \"react-redux\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { elementActions } from \"../../../../../store/actions/cms/element/element.action\";\r\n\r\nimport { renderElement } from \"../../../../helpers/renderElement\";\r\nimport { formHelper } from \"../../helpers/formHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport JirangoButton from \"../../../../components/UI/Buttons/JirangoButton\";\r\nimport { labelAlignmentButtonDisplay } from \"../../../../helpers/labelAlignment\";\r\nimport StyleWrapper from \"../../../template/components/StyleWrapper\";\r\nimport LanguageToggler from \"../../../../../system/LanguageToggler/LanguageToggler\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { elementConstants } from \"../../../../../constants/cms/form/element/element.constants\";\r\nimport { handleResponse } from \"../../../../../helpers/handleresponse\";\r\nimport { getKey } from \"../../../../../helpers/UrlHelper\";\r\nimport LockOutlinedIcon from \"@material-ui/icons/LockOutlined\";\r\nimport { FloatingCartButton } from \"../../../../elements/element/GroupRegistration/GroupRegistration\";\r\nimport \"../FormLayout/FormLayout.css\";\r\nimport { attendeeActions } from \"../../../../../store/actions/attendee/attendee.action\";\r\n\r\nclass PostFormContent extends React.PureComponent {\r\n state = {\r\n formIsValid: false,\r\n submitted: false,\r\n };\r\n validators = [];\r\n validatorList = [];\r\n componentDidMount() {\r\n this.validatorList.map((v) => {\r\n v();\r\n });\r\n }\r\n componentDidUpdate(prevProps) {\r\n if (this.props.form.currentPage !== prevProps.form.currentPage) {\r\n this.validators = [];\r\n this.validatorList.map((v) => {\r\n v();\r\n });\r\n window.scrollTo(0, 0);\r\n }\r\n }\r\n isChangeLink = () => {\r\n const params = new URLSearchParams(this.props.location.search);\r\n let badgeNo = params.get(getKey(\"badgeno\", params));\r\n if (badgeNo) return true;\r\n return false;\r\n };\r\n postForm = async () => {\r\n const { dispatch, attendee } = this.props;\r\n const form = deepClone(this.props.form);\r\n\r\n /* if(form.isCropping){\r\n alert('CROP!')\r\n } */\r\n if (this.formIsValid() && !form.isCropping) {\r\n if (form.survey === true) {\r\n let orders = Array.from(attendee.orders);\r\n orders.map((o) => {\r\n o.formId = form.formId;\r\n o.surveyCode = /* parseInt( */ this.props.surveyCode; /* , 36) */\r\n });\r\n dispatch(formActions.postSurvey(orders));\r\n this.setState({ submitted: true });\r\n } else {\r\n let orders = Array.from(attendee.orders);\r\n if (attendee.payMethod) {\r\n orders.map((o) => {\r\n o.payMethod = attendee.payMethod;\r\n o.formId = form.formId;\r\n });\r\n } else {\r\n orders.map((o) => {\r\n o.formId = form.formId;\r\n });\r\n }\r\n /* let isChangeLink = this.isChangeLink(); */\r\n let dto = [];\r\n orders.map((o) => {\r\n let order = {\r\n orderId: o.orderId ? o.orderId : null,\r\n eventIds: [],\r\n };\r\n\r\n if (!o.discounts) o.discounts = [];\r\n\r\n if (o.orderRow) {\r\n o.orderRow.map((or) => {\r\n if (o.discount && or.amount > 0) {\r\n if (o.discount.includes(\"%\") && or.eventId != o.eventId) {\r\n or.discount = parseFloat(o.discount);\r\n } else {\r\n or.discount = parseFloat(o.discount);\r\n }\r\n }\r\n order.eventIds.push(or.eventId);\r\n });\r\n }\r\n if (order.eventIds.length > 0) {\r\n dto.push(order);\r\n }\r\n });\r\n if (dto.length > 0) {\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application/json\" },\r\n body: JSON.stringify(dto),\r\n };\r\n fetch(`./api/attendee/statusrange/${form.sqlStateNo}`, requestOptions)\r\n .then(handleResponse)\r\n .then((response) => {\r\n if (response.available) {\r\n dispatch(formActions.post(orders, form.formId));\r\n this.setState({ submitted: true });\r\n } else {\r\n alert(\"OrderRowFull\");\r\n }\r\n })\r\n .catch((err) => console.error(err));\r\n } else {\r\n dispatch(formActions.post(orders));\r\n this.setState({ submitted: true });\r\n }\r\n }\r\n }\r\n };\r\n\r\n formIsValid = () => {\r\n let invalidElements = false;\r\n console.log(\"validate\");\r\n this.validators.map((validator) => {\r\n if (typeof validator === \"function\" && !validator()) {\r\n invalidElements = true;\r\n }\r\n });\r\n if (invalidElements) return false;\r\n return true;\r\n };\r\n getValidator = (validator) => {\r\n if (validator !== undefined && typeof validator === \"function\") {\r\n this.validators.push(validator);\r\n }\r\n };\r\n updateValidators = (validator, clear) => {\r\n console.log(\"clear\", clear);\r\n if (typeof validator === \"function\" && !clear) {\r\n this.validatorList.push(validator);\r\n } else if (typeof validator === \"function\" && clear) {\r\n let index = -1;\r\n this.validatorList.map((v, i) => {\r\n if (v === validator) {\r\n index = i;\r\n }\r\n });\r\n console.log(this.validatorList);\r\n if (index > -1) {\r\n this.validatorList.splice(index, 1);\r\n }\r\n } else {\r\n this.validatorList.map((validator) => {\r\n validator();\r\n });\r\n }\r\n };\r\n\r\n allowAdd = () => {\r\n return this.formIsValid();\r\n };\r\n\r\n togglePage = (page) => {\r\n const { dispatch } = this.props;\r\n const { form, attendee } = this.props;\r\n const isAllowed = this.formIsValid();\r\n if (!isAllowed && page > this.props.form.currentPage) return;\r\n if (page <= form.pages || page >= 1) {\r\n if (\r\n form.settings.changeToGroupLeaderOnSpecificPage == true &&\r\n form.settings.specificPage &&\r\n parseInt(form.settings.specificPage) > 0 &&\r\n !this.props.cms.editMode &&\r\n attendee.orders.length > 1 &&\r\n page == form.settings.specificPage\r\n ) {\r\n var leader = attendee.orders.find((o) => o.leader == true);\r\n if (leader) {\r\n dispatch(attendeeActions.setActivePersonNo(attendee.orders.indexOf(leader)));\r\n } else {\r\n leader = attendee.orders.find((o) => o.orderId == o.orderGroupId);\r\n dispatch(attendeeActions.setActivePersonNo(attendee.orders.indexOf(leader)));\r\n }\r\n }\r\n dispatch(formActions.scrollPage(page, () => {}));\r\n }\r\n };\r\n getElements = () => {\r\n const { formElements, selectedElement } = this.props.form;\r\n const { form, template } = this.props;\r\n if (!formElements) return [];\r\n return Array.from(\r\n formElements.filter(\r\n (el) => el.parentId == null && el.page == form.currentPage /* &&\r\n (el.data.hidden === false || el.data.hidden === undefined) */\r\n )\r\n );\r\n };\r\n isAuthorized = () => {\r\n const { form, attendee } = this.props;\r\n if (form.settings.authorizedFormMode === true) {\r\n if (attendee && attendee.orders && attendee.orders.length > 0 && this.props.attendee.orders[0].orderId !== undefined) {\r\n return true;\r\n }\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n };\r\n render() {\r\n const { formElements, selectedElement } = this.props.form;\r\n const { form, template, cms } = this.props;\r\n if (!cms.editMode && !this.isAuthorized()) {\r\n return (\r\n \r\n \r\n {/*
*/}\r\n {formElements.find((f) => f.type == elementConstants.GROUP_REGISTRATION) &&\r\n !this.props.cms.editMode &&\r\n ((this.props.form.settings.changeToGroupLeaderOnSpecificPage == true && this.props.form.settings.specificPage != this.props.form.currentPage) ||\r\n this.props.form.settings.changeToGroupLeaderOnSpecificPage == false) ? (\r\n \r\n \r\n \r\n \r\n {renderElement(el.type, el, null, null, this.getValidator, this.updateValidators,this.allowAdd)}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n {formElements.length > 0 && form.currentPage === form.pages && form.pages === 1 && form.settings !== undefined && form.settings.submit !== undefined && !form.settings.submit.hidden ? (\r\n \r\n \r\n \r\n \r\n {form.settings.submit.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text || form.settings.submit.defaultLabel}{\" \"}\r\n {this.state.submitted && !form.submitError ? \r\n
\r\n \r\n \r\n ) : null}\r\n {form && form.pages > 1 ? (\r\n \r\n this.togglePage(parseInt(form.currentPage) - 1)} style={template && template.content.button}>\r\n {form.settings.navigation.previous.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text ? (\r\n form.settings.navigation.previous.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text\r\n ) : (\r\n \r\n ) : null}\r\n \r\n\r\n this.togglePage(parseInt(form.currentPage) + 1)} style={template && template.content.button}>\r\n {form.settings.navigation.next.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text ? (\r\n form.settings.navigation.next.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text\r\n ) : (\r\n \r\n ) : null}\r\n {form.currentPage === form.pages &&\r\n form.settings !== undefined &&\r\n form.settings.submit !== undefined &&\r\n form.settings.submit.labels !== undefined &&\r\n !form.settings.submit.hidden /* .find(l => {\r\n return l.languageCode === form.languageCode;\r\n }).text !== \"\" */ ? (\r\n \r\n {form.settings.submit.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text !== \"\"\r\n ? form.settings.submit.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text\r\n : form.settings.submit.defaultLabel}{\" \"}\r\n {this.state.submitted && !form.submitError ? \r\n ) : null}\r\n \r\n \r\n ) : null}\r\n {/* Loading...
;\r\n componentDidMount() {\r\n const { dispatch, match, history } = this.props;\r\n let id = match.params.id;\r\n if (this.props.location.pathname.includes(\"/survey/\")) {\r\n this.setState({ surveyCode: id }, () => {\r\n dispatch(formActions.getSurvey(/* parseInt( */ id /* , 36) */));\r\n });\r\n } else {\r\n dispatch(formActions.get(parseInt(id, 36), false, true));\r\n }\r\n let badgeNo = \"\";\r\n let loadOrder = \"true\";\r\n let lang = null;\r\n if (this.props.location.search) {\r\n const params = new URLSearchParams(this.props.location.search);\r\n badgeNo = params.get(getKey(\"badgeno\", params));\r\n loadOrder = params.get(getKey(\"loadorder\", params));\r\n lang = params.get(getKey(\"lang\", params));\r\n }\r\n if (badgeNo) {\r\n this.setState({ badgeNo });\r\n }\r\n\r\n let searchParam = new URLSearchParams({}).toString();\r\n if (lang) {\r\n searchParam = new URLSearchParams({\r\n lang: lang,\r\n }).toString();\r\n }\r\n if (badgeNo) {\r\n let obj = {};\r\n\r\n if (lang) {\r\n obj.lang = lang;\r\n }\r\n\r\n obj.badgeNo = badgeNo;\r\n searchParam = new URLSearchParams(obj).toString();\r\n }\r\n\r\n this.setState({ lang: lang });\r\n history.push({\r\n pathname: match.url,\r\n search: \"?\" + searchParam,\r\n });\r\n\r\n dispatch(attendeeActions.getOrdersByBadgeNo(badgeNo));\r\n dispatch(cmsActions.setEnviroment(sourceTypes.FORM, false));\r\n }\r\n handleSearchParams = () => {\r\n if (this.props.location && this.props.location.search) {\r\n const { form, dispatch } = this.props;\r\n const params = new URLSearchParams(this.props.location.search);\r\n const page = params.get(getKey(\"page\", params));\r\n const routeMaster = params.get(getKey(\"routemaster\", params));\r\n const lang = params.get(getKey(\"lang\", params));\r\n //Handle page navigation\r\n if (page && routeMaster == \"true\" && form.pages >= parseInt(page)) {\r\n dispatch(formActions.scrollPage(parseInt(page)));\r\n }\r\n if (lang) {\r\n const updatedForm = deepClone(form);\r\n updatedForm.languageCode = lang;\r\n\r\n dispatch(formActions.softUpdate(updatedForm));\r\n dispatch(cmsActions.setEnviromentLang(lang || updatedForm.languageCode));\r\n }\r\n }\r\n this.setState({ paramsHandled: true });\r\n };\r\n componentDidUpdate(prevProps) {\r\n if (this.props.form !== undefined && prevProps.form !== this.props.form && this.props.template === undefined) {\r\n const { form, history, match, dispatch } = this.props;\r\n if (form && form.templateId && !form.editMode) {\r\n //check if form is a survey\r\n document.title = form.eventName;\r\n\r\n if (form.survey === true && this.state.surveyCode === \"\") {\r\n //something has gone wrong\r\n this.setState({ disabled: true });\r\n }\r\n if (!this.state.paramsHandled) this.handleSearchParams();\r\n this.props.dispatch(templateActions.get(this.props.form.templateId));\r\n }\r\n }\r\n if (\r\n this.state.badgeNo &&\r\n this.props.attendee &&\r\n this.props.attendee.loading == false &&\r\n this.props.attendee.orders &&\r\n this.props.attendee.orders[0] &&\r\n !this.props.attendee.orders[0].badgeNo &&\r\n this.state.notAuthourized == false\r\n ) {\r\n this.setState({ notAuthourized: true });\r\n }\r\n\r\n if (this.props.form.currentPage !== prevProps.currentPage && this.state.paramsHandled) {\r\n const params = new URLSearchParams(this.props.location.search);\r\n const routeMaster = params.get(getKey(\"routemaster\", params));\r\n if (routeMaster === \"true\" && !this.state.freezeCaptured) {\r\n document.dispatchEvent(new MessageEvent(\"FreezeFire\"));\r\n this.setState({ freezeCaptured: true });\r\n }\r\n }\r\n if (this.props.form.formId > 0 && this.props.template !== undefined && this.props.template.content !== undefined && this.state.loaded === false) {\r\n\r\n if(this.props.form.settings && this.props.form.settings.googleAnalyticsId){\r\n var script1 = document.createElement(\"script\");\r\n script1.src = `https://www.googletagmanager.com/gtag/js?id=${this.props.form.settings.googleAnalyticsId.replace(\" \", \"\")}`;\r\n script1.async = true;\r\n document.head.appendChild(script1);\r\n\r\n var script2 = document.createElement(\"script\");\r\n script2.text = `window.dataLayer = window.dataLayer || [];\r\n function gtag(){dataLayer.push(arguments);}\r\n gtag('js', new Date());\r\n gtag('config', '${this.props.form.settings.googleAnalyticsId.replace(\" \", \"\")}');`;\r\n\r\n document.head.appendChild(script2);\r\n }\r\n\r\n if (this.props.form.settings && this.props.form.settings.facebookId) {\r\n var script2 = document.createElement(\"script\");\r\n script2.text = `\r\n !function(f,b,e,v,n,t,s)\r\n {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\r\n n.callMethod.apply(n,arguments):n.queue.push(arguments)};\r\n if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\r\n n.queue=[];t=b.createElement(e);t.async=!0;\r\n t.src=v;s=b.getElementsByTagName(e)[0];\r\n s.parentNode.insertBefore(t,s)}(window, document,'script',\r\n 'https://connect.facebook.net/en_US/fbevents.js');\r\n fbq('init', '${this.props.form.settings.facebookId.replace(\" \", \"\")}');\r\n fbq('track', 'PageView');\r\n `;\r\n\r\n document.head.appendChild(script2);\r\n }\r\n\r\n document.body.style.height = \"100vh\";\r\n this.setState({ loaded: true });\r\n this.props.dispatch(conditionActions.checkAll());\r\n\r\n const params = new URLSearchParams(this.props.location.search);\r\n const lang = params.get(getKey(\"lang\", params));\r\n if (lang != this.props.form.languageCode && !lang) {\r\n this.props.dispatch(cmsActions.setEnviromentLang(this.props.form.languageCode));\r\n\r\n let searchParam = new URLSearchParams({}).toString();\r\n\r\n searchParam = new URLSearchParams({\r\n lang: this.props.form.languageCode,\r\n }).toString();\r\n\r\n if (this.state.badgeNo) {\r\n let obj = {};\r\n\r\n obj.badgeNo = this.state.badgeNo;\r\n obj.lang = this.props.form.languageCode;\r\n searchParam = new URLSearchParams(obj).toString();\r\n }\r\n\r\n this.props.history.push({\r\n pathname: this.props.match.url,\r\n search: \"?\" + searchParam,\r\n });\r\n window.location.reload();\r\n }\r\n }\r\n /* if(this.props.form && this.props.form.currentPage) */\r\n }\r\n render() {\r\n const { form, template } = this.props;\r\n const { loaded, notAuthourized } = this.state;\r\n if (notAuthourized)\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n \r\n if (\r\n this.state.badgeNo &&\r\n this.props.attendee &&\r\n this.props.attendee.loading == false &&\r\n this.props.attendee.orders &&\r\n this.props.attendee.orders[0] &&\r\n this.props.attendee.orders[0].badgeNo &&\r\n this.props.form.settings?.onlyGroupLeaderAllowedChangelink == true &&\r\n this.props.attendee.orders.length == 1 &&\r\n this.props.attendee.orders[0].orderGroupId &&\r\n this.props.attendee.orders[0].orderGroupId != this.props.attendee.orders[0].orderId\r\n ) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n return (\r\n \r\n {!loaded ? \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert,\r\n event: state.event,\r\n template: state.template.template,\r\n form: state.form,\r\n attendee: state.attendee,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(PostFormLayout);\r\n","export function setValueToNestedObject(path, value, source, level = 0) {\r\n if (Array.isArray(source)) {\r\n return;\r\n }\r\n\r\n for (let index = 0; index < path.length; index++) {\r\n if (source.hasOwnProperty(path[index])) {\r\n if (path[index] === path[path.length - 1] && level === path.length - 1) {\r\n source[path[index]] = value;\r\n } else {\r\n level++;\r\n source[path[index]] = setValueToNestedObject(\r\n path,\r\n value,\r\n source[path[index]],\r\n level\r\n );\r\n }\r\n }\r\n }\r\n return source;\r\n}\r\nexport function getValueFromNestedObject(path, source, value, level = 0) {\r\n if (Array.isArray(source)) {\r\n return;\r\n }\r\n for (let index = 0; index < path.length; index++) {\r\n if (source && source.hasOwnProperty(path[index])) {\r\n if (path[index] === path[path.length - 1] && level === path.length - 1) {\r\n value = source[path[index]];\r\n } else {\r\n level++;\r\n value = getValueFromNestedObject(path, source[path[index]], value, level);\r\n }\r\n }\r\n }\r\n return value;\r\n}\r\n/* export function deepClone(source) {\r\n if (Array.isArray(source)) {\r\n return Array.from(source);\r\n }\r\n\r\n let target = Object.assign({}, source);\r\n for (const key in source) {\r\n if (\r\n source.hasOwnProperty(key) &&\r\n source[key] &&\r\n typeof source[key] === \"object\" &&\r\n source[key] !== RegExp &&\r\n !(source[key] instanceof Date) &&\r\n !(source[key] instanceof Error) &&\r\n key !== 'editor'\r\n ) {\r\n target[key] = deepClone(source[key]);\r\n }\r\n }\r\n return target;\r\n} */\r\nexport function getValueFromNestedObjectByParam(params, source, array, level = 0) {\r\n if (Array.isArray(source)) {\r\n return;\r\n }\r\n for (const key in source) {\r\n if (isObject(source, key) && !Array.isArray(source[key])) {\r\n if (params.includes(key)) {\r\n array.push(source[key])\r\n } else {\r\n getValueFromNestedObjectByParam(params, source[key], array, level);\r\n }\r\n } else {\r\n if (params.includes(key)) {\r\n array.push(source[key])\r\n }\r\n }\r\n }\r\n return array;\r\n}\r\n\r\n\r\nexport function checkForUpdatesOneLevel(target, source) {\r\n const sourceObj = Object.assign({}, source);\r\n let targetObj = Object.assign({}, target);\r\n\r\n //* Loops two levels of an object*/\r\n\r\n for (const prop in sourceObj) {\r\n if (!targetObj.hasOwnProperty(`${prop}`)) {\r\n if (sourceObj[prop] !== typeof \"object\") {\r\n targetObj[prop] = sourceObj[prop];\r\n }\r\n\r\n if (targetObj.hasOwnProperty(`${prop}`)) {\r\n }\r\n }\r\n }\r\n return targetObj;\r\n}\r\n\r\n/* \r\nexport function checkForUpdates(target, source) {\r\n const sourceObj = Object.assign({}, source);\r\n let targetObj = Object.assign({}, target)\r\n\r\n\r\n for (const prop in sourceObj) {\r\n if (!targetObj.hasOwnProperty(`${prop}`)) {\r\n targetObj[prop] = { ...sourceObj[prop] };\r\n if (targetObj.hasOwnProperty(`${prop}`)) {\r\n }\r\n }\r\n else {\r\n for (const v in sourceObj[prop]) {\r\n\r\n if (!targetObj[prop].hasOwnProperty(v)) {\r\n targetObj[prop][v] = sourceObj[prop][v];\r\n for (const k in sourceObj[prop][v]) {\r\n targetObj[prop][v][k] = sourceObj[prop][v][k];\r\n }\r\n \r\n }\r\n }\r\n }\r\n }\r\n for (const prop in targetObj) {\r\n if (!sourceObj.hasOwnProperty(`${prop}`)) {\r\n targetObj[prop] = undefined;\r\n\r\n }\r\n else {\r\n for (const v in sourceObj[prop]) {\r\n\r\n if (!sourceObj[prop].hasOwnProperty(v)) {\r\n targetObj[prop][v] = undefined;\r\n }\r\n }\r\n }\r\n }\r\n return targetObj;\r\n} */\r\n\r\nfunction isObject(source, key) {\r\n return (\r\n source.hasOwnProperty(key) &&\r\n typeof source[key] === \"object\" &&\r\n source[key] !== RegExp &&\r\n !(source[key] instanceof Date) &&\r\n !(source[key] instanceof Error)\r\n );\r\n}\r\n\r\nexport function checkForFormUpdates(target, source) {\r\n if (Array.isArray(source)) {\r\n return Array.from(target);\r\n }\r\n const targetObj = Object.assign({}, target);\r\n for (const key in source) {\r\n if (isObject(source, key)) {\r\n if (!targetObj.hasOwnProperty(key)) {\r\n targetObj[key] = deepClone(source[key]);\r\n } else {\r\n targetObj[key] = checkForFormUpdates(targetObj[key], source[key]);\r\n }\r\n } else {\r\n if (!targetObj.hasOwnProperty(key)) {\r\n targetObj[key] = source[key];\r\n }\r\n }\r\n }\r\n return targetObj;\r\n}\r\n\r\nexport function checkForTemplateUpdates(target, source) {\r\n if (Array.isArray(source)) {\r\n /* if(target.length < 1) return Array.from(source);\r\n else return Array.from(target); */\r\n return;\r\n }\r\n const targetObj = Object.assign({}, target);\r\n for (const key in source) {\r\n if (isObject(source, key) && !Array.isArray(source[key])) {\r\n if (!targetObj.hasOwnProperty(key)) {\r\n targetObj[key] = deepClone(source[key]);\r\n } else {\r\n targetObj[key] = checkForTemplateUpdates(targetObj[key], source[key]);\r\n }\r\n } else {\r\n if (!targetObj.hasOwnProperty(key)) {\r\n targetObj[key] = \"unset\";\r\n }\r\n }\r\n }\r\n return targetObj;\r\n}\r\nexport function deepClone(source) {\r\n if (Array.isArray(source)) {\r\n return Array.from(source);\r\n }\r\n\r\n let target = Object.assign({}, source);\r\n for (const key in source) {\r\n if (\r\n source.hasOwnProperty(key) &&\r\n source[key] &&\r\n typeof source[key] === \"object\" &&\r\n source[key] !== RegExp &&\r\n !(source[key] instanceof Date) &&\r\n !(source[key] instanceof Error) &&\r\n key !== 'editor'\r\n ) {\r\n target[key] = deepClone(source[key]);\r\n }\r\n }\r\n return target;\r\n}\r\n\r\nexport function toCamelCase(input) {\r\n return input[0].toLowerCase() + input.substr(1, input.length);\r\n}\r\n","export default __webpack_public_path__ + \"static/media/section_tags_helper.7e0f0018.png\";","import React from 'react';\r\nimport SystemLabel from '../../../../system/SystemLabel/SystemLabel';\r\nimport SectionTagHelperImage from '../assets/images/section_tags_helper.png'\r\nimport Card from '@material-ui/core/Card';\r\nimport CardActionArea from '@material-ui/core/CardActionArea';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardMedia from '@material-ui/core/CardMedia';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n\r\n\r\nexport default function MediaCard() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\nexport const SectionTagsHelpInfo = () => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}","import React from \"react\";\r\nimport { labelHelper } from \"../../../../helpers/labelHelper\";\r\nimport { deepClone } from \"../../../../helpers/objectHelper\";\r\nimport PersonIcon from \"@material-ui/icons/Person\";\r\nimport BusinessIcon from \"@material-ui/icons/Business\";\r\nimport ListIcon from \"@material-ui/icons/List\";\r\nimport { SectionTagsHelpInfo } from \"../TagGroups/SectionTagHelpInfo\";\r\nimport PublicIcon from \"@material-ui/icons/Public\";\r\nimport EventIcon from \"@material-ui/icons/Event\";\r\nimport ShoppingCartIcon from \"@material-ui/icons/ShoppingCart\";\r\nimport ReceiptIcon from \"@material-ui/icons/Receipt\";\r\n\r\nconst personTags = {\r\n groupName: \"PersonTags\",\r\n description: \"ExtractTagsWithPersonData\",\r\n icon: Sentry.showReportDialog({ eventId: this.state.eventId })}>Report feedback \r\n );\r\n }\r\n\r\n //when there's not an error, render children untouched\r\n return this.props.children;\r\n }\r\n}\r\n","\r\n\r\nexport const separators = {\r\n AND: \"AND\",\r\n OR: \"OR\",\r\n}\r\n\r\nexport const conditionType = {\r\n GROUP: 2,\r\n CONDITION: 1,\r\n QUERY: 3,\r\n SEPARATOR: 4\r\n \r\n}\r\n\r\nexport const selectors = {\r\n NUMERIC: \"NUMERIC\",\r\n DROPDOWN: \"DROPDOWN\",\r\n TEXT: \"TEXT\",\r\n OPTIONS: \"OPTIONS\",\r\n CHECKBOX: \"CHECKBOX\"\r\n}\r\n\r\nexport const operators = {\r\n AND: \"AND\",\r\n OR: \"OR\",\r\n\r\n EQUAL: \"EQUAL\",\r\n NOT_EQUAL: \"NOT_EQUAL\",\r\n GREATER_THAN: \"GREATER_THAN\",\r\n LESS_THAN: \"LESS_THAN\",\r\n LESS_THAN_OR_EQUAL_TO: \"LESS_THAN_OR_EQUAL_TO\",\r\n GREATER_THAN_OR_EQUAL_TO: \"GREATER_THAN_OR_EQUAL_TO\",\r\n BETWEEN: \"BETWEEN\",\r\n LIKE: \"LIKE\",\r\n ANY: \"ANY\",\r\n NOT: \"NOT\",\r\n}\r\n\r\nexport const actions = {\r\n Show: \"ShowElement\",\r\n Require:\"RequireElement\",\r\n ReadOnly:\"ReadOnlyElement\",\r\n CustomError:\"ShowCustomError\",\r\n\r\n}\r\n\r\nexport const eventOperators = {\r\n EQUAL:\"=\",\r\n NOT_EQUAL:\"!=\",\r\n}\r\n\r\nconst fieldOperators = {\r\n EQUAL:\"=\",\r\n NOT_EQUAL:\"!=\",\r\n GREATER_THAN : \">\",\r\n LESS_THAN: \"<\",\r\n LESS_THAN_OR_EQUAL_TO: \"<=\",\r\n GREATER_THAN_OR_EQUAL_TO: \">=\",\r\n LIKE:\"LIKE\",\r\n/* BETWEEN:\"BETWEEN\", */\r\n}\r\n\r\nconst questionOptionOperators = {\r\n EQUAL:\"=\",\r\n NOT_EQUAL:\"!=\",\r\n ANY:\"ANY\",\r\n/* NOT:\"NOT\", */\r\n}\r\n\r\nconst questionTextOperators = {\r\n EQUAL:\"=\",\r\n NOT_EQUAL:\"!=\",\r\n GREATER_THAN : \">\",\r\n LESS_THAN : \"<\",\r\n LESS_THAN_OR_EQUAL_TO: \"<=\",\r\n GREATER_THAN_OR_EQUAL_TO: \">=\",\r\n LIKE:\"LIKE\",\r\n /* BETWEEN:\"BETWEEN\", */\r\n \r\n}\r\nconst conditionActionTypes = {\r\n CHECK_CONDITION_REQUEST: \"CHECK_CONDITION_REQUEST\",\r\n CHECK_CONDITION_SUCCESS: \"CHECK_CONDITION_SUCCESS\"\r\n}\r\nexport const conditionConstants = {\r\n operators,\r\n actions,\r\n eventOperators,\r\n fieldOperators,\r\n questionOptionOperators,\r\n questionTextOperators,\r\n selectors,\r\n separators,\r\n actionTypes: conditionActionTypes\r\n};","import React, { useState } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { HtmlWrapper } from '../../components/HtmlWrapper';\r\nimport './EmptySpace.css'\r\n\r\nconst EmptySpace = (props) => {\r\n const { content } = props.element;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\nfunction mapStateToProps(state) {\r\n /* return state; */\r\n}\r\n\r\nexport default /* connect(mapStateToProps)( */EmptySpace/* ); */","import React from 'react';\r\nimport EmptySpace from './EmptySpace';\r\nimport { templateHelper } from '../../../template/helpers/templateHelper';\r\n\r\nexport const emptySpaceHandler = {\r\n tags,\r\n elementEditor,\r\n defaultStyle,\r\n component,\r\n families\r\n}\r\n\r\nfunction component(element) {\r\n return \r\n \r\n \r\n \r\n `\r\n )\r\n};\r\n\r\n/* \r\n\r\n \r\n \r\n */\r\n\r\n","export const templateConstants = {\r\n GET_DEFAULT_TEMPLATE_BY_EVENT_REQUEST:\r\n \"GET_DEFAULT_TEMPLATE_BY_EVENT_REQUEST\",\r\n GET_DEFAULT_TEMPLATE_BY_EVENT_SUCCESS:\r\n \"GET_DEFAULT_TEMPLATE_BY_EVENT_SUCCESS\",\r\n GET_DEFAULT_TEMPLATE_BY_EVENT_FAILURE:\r\n \"GET_DEFAULT_TEMPLATE_BY_EVENT_FAILURE\",\r\n\r\n GET_TEMPLATE_BY_EVENT_REQUEST: \"GET_TEMPLATE_BY_EVENT_REQUEST\",\r\n GET_TEMPLATE_BY_EVENT_SUCCESS: \"GET_TEMPLATE_BY_EVENT_SUCCESS\",\r\n GET_TEMPLATE_BY_EVENT_FAILURE: \"GET_TEMPLATE_BY_EVENT_FAILURE\",\r\n\r\n GET_TEMPLATE_REQUEST: \"GET_TEMPLATE_REQUEST\",\r\n GET_TEMPLATE_SUCCESS: \"GET_TEMPLATE_SUCCESS\",\r\n GET_TEMPLATE_FAILURE: \"GET_TEMPLATET_FAILURE\",\r\n\r\n CREATE_TEMPLATE_SUCCESS: \"CREATE_TEMPLATE_SUCCESS\",\r\n CREATE_TEMPLATE_REQUEST: \"CREATE_TEMPLATE_REQUEST\",\r\n CREATE_TEMPLATE_FAILURE: \"CREATE_TEMPLATE_FAILURE\",\r\n\r\n SET_MENU: \"SET_MENU\",\r\n\r\n TOGGLE_MENU_MODAL: \"TOGGLE_MENU_MODAL\",\r\n\r\n DESKTOP: \"desktop\",\r\n SMARTPHONE: \"smartphone\",\r\n TABLET: \"tablet\",\r\n\r\n GETALL_TEMPLATE_REQUEST: \"GETALL_TEMPLATE_REQUEST\",\r\n GETALL_TEMPLATE_SUCCESS: \"GETALL_TEMPLATE_SUCCESS\",\r\n GETALL_TEMPLATE_FAILURE: \"GETALL_TEMPLATE_FAILURE\",\r\n\r\n UPDATE_TEMPLATE_REQUEST: \"UPDATE_TEMPLATE_REQUEST\",\r\n UPDATE_TEMPLATE_SUCCESS: \"UPDATE_TEMPLATE_SUCCESS\",\r\n UPDATE_TEMPLATE_FAILURE: \"UPDATE_TEMPLATE_FAILURE\",\r\n\r\n TOGGLE_PREVIEW_MODE: \"TOGGLE_PREVIEW_MODE\",\r\n DESELECT_SUCCESS: \"DESELECT_SUCCESS\",\r\n SOFT_UPDATE_TEMPLATE: \"SOFT_UPDATE_TEMPLATE\",\r\n UNDO_TEMPLATE_CHANGE: \"UNDO_TEMPLATE_CHANGE\",\r\n REDO_TEMPLATE_CHANGE: \"REDO_TEMPLATE_CHANGE\",\r\n SELECT_TEMPLATE_ELEMENT: \"SELECT_TEMPLATE_ELEMENT\",\r\n DELETE_TEMPLATE_ELEMENT_SUCCESS: \" DELETE_TEMPLATE_ELEMENT_SUCCESS\",\r\n\r\n SET_TEMPLATE_FROM_FORM: \"SET_TEMPLATE_FROM_FORM\",\r\n SET_TEMPLATE_FROM_FORM_REQUEST: \"SET_TEMPLATE_FROM_FORM_REQUEST\",\r\n /* COPY_SUCCESS: 'COPY_SUCCESS' */\r\n //and so on\r\n};\r\n","export function setValueToNestedObject(path, value, source, level = 0) {\r\n if (Array.isArray(source)) {\r\n return;\r\n }\r\n\r\n for (let index = 0; index < path.length; index++) {\r\n if (source.hasOwnProperty(path[index])) {\r\n if (path[index] === path[path.length - 1] && level === path.length - 1) {\r\n source[path[index]] = value;\r\n } else {\r\n level++;\r\n source[path[index]] = setValueToNestedObject(\r\n path,\r\n value,\r\n source[path[index]],\r\n level\r\n );\r\n }\r\n }\r\n }\r\n return source;\r\n}\r\nexport function getValueFromNestedObject(path, source, value, level = 0) {\r\n if (Array.isArray(source)) {\r\n return;\r\n }\r\n for (let index = 0; index < path.length; index++) {\r\n if (source && source.hasOwnProperty(path[index])) {\r\n if (path[index] === path[path.length - 1] && level === path.length - 1) {\r\n value = source[path[index]];\r\n } else {\r\n level++;\r\n value = getValueFromNestedObject(path, source[path[index]], value, level);\r\n }\r\n }\r\n }\r\n return value;\r\n}\r\n/* export function deepClone(source) {\r\n if (Array.isArray(source)) {\r\n return Array.from(source);\r\n }\r\n\r\n let target = Object.assign({}, source);\r\n for (const key in source) {\r\n if (\r\n source.hasOwnProperty(key) &&\r\n source[key] &&\r\n typeof source[key] === \"object\" &&\r\n source[key] !== RegExp &&\r\n !(source[key] instanceof Date) &&\r\n !(source[key] instanceof Error) &&\r\n key !== 'editor'\r\n ) {\r\n target[key] = deepClone(source[key]);\r\n }\r\n }\r\n return target;\r\n} */\r\nexport function getValueFromNestedObjectByParam(params, source, array, level = 0) {\r\n if (Array.isArray(source)) {\r\n return;\r\n }\r\n for (const key in source) {\r\n if (isObject(source, key) && !Array.isArray(source[key])) {\r\n if (params.includes(key)) {\r\n array.push(source[key])\r\n } else {\r\n getValueFromNestedObjectByParam(params, source[key], array, level);\r\n }\r\n } else {\r\n if (params.includes(key)) {\r\n array.push(source[key])\r\n }\r\n }\r\n }\r\n return array;\r\n}\r\n\r\n\r\nexport function checkForUpdatesOneLevel(target, source) {\r\n const sourceObj = Object.assign({}, source);\r\n let targetObj = Object.assign({}, target);\r\n\r\n //* Loops two levels of an object*/\r\n\r\n for (const prop in sourceObj) {\r\n if (!targetObj.hasOwnProperty(`${prop}`)) {\r\n if (sourceObj[prop] !== typeof \"object\") {\r\n targetObj[prop] = sourceObj[prop];\r\n }\r\n\r\n if (targetObj.hasOwnProperty(`${prop}`)) {\r\n }\r\n }\r\n }\r\n return targetObj;\r\n}\r\n\r\n/* \r\nexport function checkForUpdates(target, source) {\r\n const sourceObj = Object.assign({}, source);\r\n let targetObj = Object.assign({}, target)\r\n\r\n\r\n for (const prop in sourceObj) {\r\n if (!targetObj.hasOwnProperty(`${prop}`)) {\r\n targetObj[prop] = { ...sourceObj[prop] };\r\n if (targetObj.hasOwnProperty(`${prop}`)) {\r\n }\r\n }\r\n else {\r\n for (const v in sourceObj[prop]) {\r\n\r\n if (!targetObj[prop].hasOwnProperty(v)) {\r\n targetObj[prop][v] = sourceObj[prop][v];\r\n for (const k in sourceObj[prop][v]) {\r\n targetObj[prop][v][k] = sourceObj[prop][v][k];\r\n }\r\n \r\n }\r\n }\r\n }\r\n }\r\n for (const prop in targetObj) {\r\n if (!sourceObj.hasOwnProperty(`${prop}`)) {\r\n targetObj[prop] = undefined;\r\n\r\n }\r\n else {\r\n for (const v in sourceObj[prop]) {\r\n\r\n if (!sourceObj[prop].hasOwnProperty(v)) {\r\n targetObj[prop][v] = undefined;\r\n }\r\n }\r\n }\r\n }\r\n return targetObj;\r\n} */\r\n\r\nfunction isObject(source, key) {\r\n return (\r\n source.hasOwnProperty(key) &&\r\n typeof source[key] === \"object\" &&\r\n source[key] !== RegExp &&\r\n !(source[key] instanceof Date) &&\r\n !(source[key] instanceof Error)\r\n );\r\n}\r\n\r\nexport function checkForFormUpdates(target, source) {\r\n if (Array.isArray(source)) {\r\n return Array.from(target);\r\n }\r\n const targetObj = Object.assign({}, target);\r\n for (const key in source) {\r\n if (isObject(source, key)) {\r\n if (!targetObj.hasOwnProperty(key)) {\r\n targetObj[key] = deepClone(source[key]);\r\n } else {\r\n targetObj[key] = checkForFormUpdates(targetObj[key], source[key]);\r\n }\r\n } else {\r\n if (!targetObj.hasOwnProperty(key)) {\r\n targetObj[key] = source[key];\r\n }\r\n }\r\n }\r\n return targetObj;\r\n}\r\n\r\nexport function checkForTemplateUpdates(target, source) {\r\n if (Array.isArray(source)) {\r\n /* if(target.length < 1) return Array.from(source);\r\n else return Array.from(target); */\r\n return;\r\n }\r\n const targetObj = Object.assign({}, target);\r\n for (const key in source) {\r\n if (isObject(source, key) && !Array.isArray(source[key])) {\r\n if (!targetObj.hasOwnProperty(key)) {\r\n targetObj[key] = deepClone(source[key]);\r\n } else {\r\n targetObj[key] = checkForTemplateUpdates(targetObj[key], source[key]);\r\n }\r\n } else {\r\n if (!targetObj.hasOwnProperty(key)) {\r\n targetObj[key] = \"unset\";\r\n }\r\n }\r\n }\r\n return targetObj;\r\n}\r\nexport function deepClone(source) {\r\n if (Array.isArray(source)) {\r\n return Array.from(source);\r\n }\r\n\r\n let target = Object.assign({}, source);\r\n for (const key in source) {\r\n if (\r\n source.hasOwnProperty(key) &&\r\n source[key] &&\r\n typeof source[key] === \"object\" &&\r\n source[key] !== RegExp &&\r\n !(source[key] instanceof Date) &&\r\n !(source[key] instanceof Error) &&\r\n key !== 'editor'\r\n ) {\r\n target[key] = deepClone(source[key]);\r\n }\r\n }\r\n return target;\r\n}\r\n\r\nexport function toCamelCase(input) {\r\n return input[0].toLowerCase() + input.substr(1, input.length);\r\n}\r\n","export const securityHelper = {\r\n createGuid\r\n}\r\n\r\nfunction createGuid(){\r\n return Math.random().toString(36).substring(2) + (new Date()).getTime().toString(36);\r\n}","import React from \"react\";\r\nimport { Container, Row, Col, Spinner } from \"reactstrap\";\r\nimport { connect } from \"react-redux\";\r\nimport '../../style/PageView.css';\r\nimport { renderElement } from \"../../../../../helpers/renderElement\";\r\n\r\nclass PageViewContent extends React.Component {\r\n render() {\r\n const { pageElements } = this.props.page;\r\n const { template } = this.props;\r\n \r\n return (\r\n \r\n {pageElements &&\r\n pageElements.filter(el => el.parentId === null).map((el, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {renderElement(el.type, el)}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n elements: state.element.elements,\r\n alert: state.alert,\r\n page: state.page,\r\n template: state.template.template\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(PageViewContent);\r\n","import React, { Component, Suspense } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { templateActions } from \"../../../../../../store/actions/cms/template/template.action\";\r\nimport { DragDropContext } from \"react-beautiful-dnd\";\r\nimport { Container } from \"reactstrap\";\r\nimport TemplateWrapper from \"../../../../template/containers/TemplateLayout/TemplateWrapper\";\r\nimport { sourceTypes } from \"../../../../../../constants/cms/sourceType\";\r\nimport { cmsActions } from \"../../../../../../store/actions/cms/cms.action\";\r\nimport { pageActions } from \"../../../../../../store/actions/cms/page/page.action\";\r\nimport { SplashScreen } from \"../../../../../components/UI/SplashScreen/SplashScreen\";\r\nimport PageViewContent from \"../Content/PageViewContent\";\r\nimport { getKey } from \"../../../../../../helpers/UrlHelper\";\r\nimport { attendeeActions } from \"../../../../../../store/actions/attendee/attendee.action\";\r\nimport { NotAuthourized } from \"../../../../../components/NotAuthorized\";\r\nimport SystemLabel from \"../../../../../../system/SystemLabel/SystemLabel\";\r\n\r\nclass PageViewLayout extends React.Component {\r\n state = {\r\n loaded: false,\r\n disabled: false,\r\n badgeNo: \"\",\r\n notAuthourized: false,\r\n };\r\n componentDidMount() {\r\n const { dispatch, match, history } = this.props;\r\n let id = match.params.id;\r\n const { location } = match;\r\n if (id) {\r\n dispatch(pageActions.get(parseInt(id, 36), true));\r\n }\r\n let badgeNo = null;\r\n let lang = null;\r\n if (this.props.location.search) {\r\n const params = new URLSearchParams(this.props.location.search);\r\n if (params.get(getKey(\"badgeno\", params))) badgeNo = params.get(getKey(\"badgeno\", params));\r\n else if (params.get(getKey(\"clientkey\", params))) badgeNo = params.get(getKey(\"clientkey\", params));\r\n lang = params.get(getKey(\"languagecode\", params));\r\n if (!lang) lang = params.get(getKey(\"lang\", params));\r\n let searchParam = new URLSearchParams({}).toString();\r\n let searchParamObj = {};\r\n if (lang) {\r\n searchParamObj.lang = lang;\r\n this.setState({ lang: lang });\r\n }\r\n if (badgeNo) {\r\n searchParamObj.badgeNo = badgeNo;\r\n this.setState({ badgeNo });\r\n }\r\n if (lang || badgeNo) {\r\n searchParam = new URLSearchParams(searchParamObj).toString();\r\n history.push({\r\n pathname: match.url,\r\n search: \"?\" + searchParam,\r\n });\r\n }\r\n dispatch(attendeeActions.getOrdersByBadgeNo(badgeNo));\r\n }\r\n dispatch(cmsActions.setEnviroment(sourceTypes.PAGE, false, null, lang || \"swe\"));\r\n /* dispatch(cmsActions.setEnviromentLang(lang)); */\r\n }\r\n componentDidUpdate(prevProps) {\r\n const { page, template, dispatch,match, history } = this.props;\r\n const { loaded } = this.state;\r\n if (page !== undefined && prevProps.page !== page) {\r\n if (page.googleAnalyticsId) {\r\n var script1 = document.createElement(\"script\");\r\n script1.src = `https://www.googletagmanager.com/gtag/js?id=${page.googleAnalyticsId.replace(\" \", \"\")}`;\r\n script1.async = true;\r\n document.head.appendChild(script1);\r\n\r\n var script2 = document.createElement(\"script\");\r\n script2.text = `window.dataLayer = window.dataLayer || [];\r\n function gtag(){dataLayer.push(arguments);}\r\n gtag('js', new Date());\r\n gtag('config', '${page.googleAnalyticsId.replace(\" \", \"\")}');`;\r\n\r\n document.head.appendChild(script2);\r\n }\r\n if (page.facebookId) {\r\n var script2 = document.createElement(\"script\");\r\n script2.text = `\r\n !function(f,b,e,v,n,t,s)\r\n {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\r\n n.callMethod.apply(n,arguments):n.queue.push(arguments)};\r\n if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\r\n n.queue=[];t=b.createElement(e);t.async=!0;\r\n t.src=v;s=b.getElementsByTagName(e)[0];\r\n s.parentNode.insertBefore(t,s)}(window, document,'script',\r\n 'https://connect.facebook.net/en_US/fbevents.js');\r\n fbq('init', '${page.facebookId.replace(\" \", \"\")}');\r\n fbq('track', 'PageView');\r\n `;\r\n\r\n document.head.appendChild(script2);\r\n }\r\n const templateId = page.templateId;\r\n if (templateId) {\r\n dispatch(templateActions.get(templateId));\r\n }\r\n dispatch(cmsActions.setEnviroment(sourceTypes.PAGE, false, page.eventId));\r\n const params = new URLSearchParams(this.props.location.search);\r\n var lang = params.get(getKey(\"lang\", params));\r\n if (lang) {\r\n page.languageCode = lang;\r\n }\r\n if (page.eventId > 0 && !lang && page.languageCode) {\r\n let badgeNo = null;\r\n if (params.get(getKey(\"badgeno\", params))) badgeNo = params.get(getKey(\"badgeno\", params));\r\n else if (params.get(getKey(\"clientkey\", params))) badgeNo = params.get(getKey(\"clientkey\", params));\r\n let searchParamObj = { lang: page.languageCode };\r\n if (badgeNo) {\r\n searchParamObj.badgeNo = badgeNo;\r\n }\r\n let searchParam = new URLSearchParams(searchParamObj).toString();\r\n history.push({\r\n pathname: match.url,\r\n search: \"?\" + searchParam,\r\n });\r\n }\r\n console.log(lang, page.languageCode, params);\r\n dispatch(cmsActions.setEnviromentLang(lang || page.languageCode));\r\n\r\n document.title = page.title || page.eventName;\r\n }\r\n if (\r\n this.state.badgeNo &&\r\n this.props.attendee &&\r\n this.props.attendee.loading == false &&\r\n this.props.attendee.orders &&\r\n this.props.attendee.orders[0] &&\r\n !this.props.attendee.orders[0].badgeNo &&\r\n this.state.notAuthourized == false\r\n ) {\r\n this.setState({ notAuthourized: true });\r\n }\r\n if (\r\n page.pageId > 0 &&\r\n /* language.loading === false && */\r\n template !== undefined &&\r\n loaded === false\r\n ) {\r\n console.log(page);\r\n dispatch(cmsActions.setEnviromentLang(page.languageCode));\r\n this.setState({ loaded: true });\r\n }\r\n }\r\n render() {\r\n const { page, template } = this.props;\r\n const { loaded, notAuthourized } = this.state;\r\n if (notAuthourized) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n if (!this.state.badgeNo && page.onlyAuthorizedUsers) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n return (\r\n \r\n {!loaded && \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert /* \r\n language: state.language, */,\r\n template: state.template.template,\r\n page: state.page,\r\n attendee: state.attendee,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(PageViewLayout);\r\n","\r\n\r\nconst containerA = ['100%'];\r\nconst containerB = ['50%', '50%'];\r\nconst containerC = ['25%', '25%', '25%', '25%'];\r\nconst containerD = ['25%', '75%'];\r\nconst containerE= ['75%', '25%'];\r\nconst containerF = ['33.3%', '33.3%', '33.3%'];\r\nconst containerG = ['33.5%', '66.5%'];\r\nconst containerH = ['66.5%', '33.5%'];\r\nconst containerJ = ['25%', '50%', '25%'];\r\n\r\nexport const containers = [\r\n { id: 'A', type: containerA },\r\n { id: 'B', type: containerB },\r\n { id: 'C', type: containerC },\r\n { id: 'D', type: containerD },\r\n { id: 'E', type: containerE },\r\n { id: 'F', type: containerF },\r\n { id: 'G', type: containerG },\r\n { id: 'H', type: containerH },\r\n { id: 'J', type: containerJ },\r\n\r\n]","export const formSettings = {\r\n submit: {\r\n labels: [],\r\n alignment: 'center',\r\n defaultLabel: 'Register'\r\n },\r\n navigation:{\r\n next:{\r\n labels: [],\r\n defaultLabel: 'Next'\r\n },\r\n previous:{\r\n labels: [],\r\n defaultLabel: 'Back'\r\n }\r\n },\r\n authorizedFormMode: false\r\n \r\n}","import React from \"react\";\r\n\r\nconst Form = React.lazy(() => import(\"./cms/areas/form/containers/FormLayout/FormLayout\"));\r\nconst FormPost = React.lazy(() => import(\"./cms/areas/form/containers/PostFormLayout/PostFormLayout\"));\r\nconst PageEdit = React.lazy(() => import(\"./cms/areas/page/container/Editor/Layout/PageEditorLayout\"));\r\nconst PageView = React.lazy(() => import(\"./cms/areas/page/container/View/Layout/PageViewLayout\"));\r\n/* const OrganizationSettings = React.lazy(() => import(\"./organization/OrganizationSettings/OrganizationSettings\")); */\r\n/* const SystemLabelHandler = React.lazy(() => import(\"./system/SystemLabelHandler/SystemLabelHandler\")); */\r\nconst Template = React.lazy(() => import(\"./cms/areas/template/containers/TemplateLayout/TemplateLayout\"));\r\nconst ArticlesEditor = React.lazy(() => import(\"./cms/areas/page/plugins/article/containers/ArticleEditor/ArticleEditor\"));\r\nconst DibsPayment = React.lazy(() => import(\"./payments/CardPayment/Dibs/Dibs\"));\r\nconst EmailEditor = React.lazy(() => import(\"./cms/areas/email/containers/EmailEditor/EmailEditor\"));\r\nconst MeetingEditor = React.lazy(() => import(\"./cms/areas/meeting/container/EditorLayout/MeetingEditorLayout\"));\r\nconst Layout = React.lazy(() => import(\"./cms_2.0/Layout\"));\r\n// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config\r\n\r\n\r\nconst routes = [\r\n { path: \"/cms/email/:id\", name: \"Email Editor\", component: EmailEditor, labelGroup: \"Email.Edit\" },\r\n { path: \"/cms/form/:id\", name: \"Form\", component: Form, labelGroup: \"Form.Edit\" },\r\n/* { path: \"/organization/settings\", name: \"Organization Settings\", component: OrganizationSettings, labelGroup: \"Account.Organization\" }, */\r\n/* { path: \"/system/labelhandler\", name: \"Label Handler\", component: SystemLabelHandler, labelGroup: \"System.LabelHandler\" }, */\r\n { path: \"/cms/template\", name: \"Template Editor\", component: Template, labelGroup: \"Template.Edit\" },\r\n { path: \"/p/:id\", name: \"Event Page\", component: FormPost, labelGroup: \"Page.Edit\" },\r\n { path: \"/register/:id\", name: \"Register Form\", component: FormPost, labelGroup: \"Form.Post\" },\r\n { path: \"/register/dibs/:id\", name: \"Dibs Payment\", component: DibsPayment, labelGroup: \"Dibs.Paywindow\" },\r\n { path: \"/survey/:id\", name: \"Register Survey\", component: FormPost, labelGroup: \"Form.Post\" },\r\n { path: \"/articles/edit\", name: \"Article Editor\", component: ArticlesEditor, labelGroup: \"Article.Edit\" },\r\n { path: \"/cms/page/:id\", name: \"Page Editor\", component: PageEdit, labelGroup: \"Page.Edit\" },\r\n { path: \"/page/:id\", name: \"Page View\", component: PageView, labelGroup: \"Page.Edit\" },\r\n { path: \"/web/:id\", name: \"Page View\", component: Layout, labelGroup: \"Page.Edit\" },\r\n { path: \"/register2/:id\", name: \"Page View\", component: Layout, labelGroup: \"Page.Edit\" },\r\n /* { path: '/cms/meeting/:id', name: 'Meeting Editor', component: MeetingEditor, labelGroup: \"Meeting.Edit\" }, */\r\n];\r\n\r\nexport default routes;\r\n","\r\nexport const getKey = (searchString, searchParams) => {\r\n for (var key of searchParams.keys()) {\r\n if(searchString.toLowerCase() === key.toLowerCase()){\r\n return key;\r\n }\r\n }\r\n return searchString;\r\n}","import React from 'react';\r\nimport { Input, Row, Col } from 'reactstrap';\r\nimport SystemLabel from '../../system/SystemLabel/SystemLabel';\r\nimport { labelHelper } from '../../helpers/labelHelper';\r\n\r\n\r\nexport class ArchiveFilterBar extends React.Component {\r\n handleInput = (e) => {\r\n const { filterFiles } = this.props;\r\n filterFiles(e.target.value);\r\n }\r\n render() {\r\n const { result } = this.props;\r\n return (\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n}","export const cssReset = `\r\n\r\n \r\n\r\n \r\n\r\n \r\n`\r\n\r\nexport const cssResetInnerContent = `\r\n\r\n /* What it does: Remove spaces around the email design added by some email clients. */\r\n /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */\r\n html,\r\n body {\r\n margin: 0 auto !important;\r\n padding: 0 !important;\r\n height: 100% !important;\r\n width: 100% !important;\r\n }\r\n\r\n /* What it does: Stops email clients resizing small text. */\r\n * {\r\n -ms-text-size-adjust: 100%;\r\n -webkit-text-size-adjust: 100%;\r\n }\r\n\r\n /* What it does: Centers email on Android 4.4 */\r\n div[style*=\"margin: 16px 0\"] {\r\n margin: 0 !important;\r\n }\r\n\r\n /* What it does: forces Samsung Android mail clients to use the entire viewport */\r\n #MessageViewBody, #MessageWebViewDiv{\r\n width: 100% !important;\r\n }\r\n\r\n /* What it does: Stops Outlook from adding extra spacing to tables. */\r\n table,\r\n td {\r\n mso-table-lspace: 0pt !important;\r\n mso-table-rspace: 0pt !important;\r\n border-collapse: collapse;\r\n padding: 0px;\r\n }\r\n\r\n /* What it does: Replaces default bold style. */\r\n th {\r\n \tfont-weight: normal;\r\n }\r\n\r\n /* What it does: Fixes webkit padding issue. */\r\n table {\r\n border-spacing: 0 !important;\r\n border-collapse: collapse !important;\r\n table-layout: fixed !important;\r\n margin: 0 auto !important;\r\n }\r\n\r\n /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */\r\n a {\r\n text-decoration: none;\r\n }\r\n\r\n /* What it does: Uses a better rendering method when resizing images in IE. */\r\n img {\r\n -ms-interpolation-mode:bicubic;\r\n }\r\n\r\n /* What it does: A work-around for email clients meddling in triggered links. */\r\n a[x-apple-data-detectors], /* iOS */\r\n .unstyle-auto-detected-links a,\r\n .aBn {\r\n border-bottom: 0 !important;\r\n cursor: default !important;\r\n text-decoration: none !important;\r\n font-size: inherit !important;\r\n font-family: inherit !important;\r\n font-weight: inherit !important;\r\n line-height: inherit !important;\r\n }\r\n\r\n /* What it does: Prevents Gmail from changing the text color in conversation threads. */\r\n .im {\r\n color: inherit !important;\r\n }\r\n\r\n /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */\r\n .a6S {\r\n display: none !important;\r\n opacity: 0.01 !important;\r\n\t\t}\r\n\t\t/* If the above doesn't work, add a .g-img class to any image in question. */\r\n\t\timg.g-img + div {\r\n\t\t display: none !important;\r\n\t\t}\r\n\r\n /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */\r\n /* Create one of these media queries for each additional viewport size you'd like to fix */\r\n\r\n /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */\r\n @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {\r\n u ~ div .email-container {\r\n min-width: 320px !important;\r\n }\r\n }\r\n /* iPhone 6, 6S, 7, 8, and X */\r\n @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {\r\n u ~ div .email-container {\r\n min-width: 375px !important;\r\n }\r\n }\r\n /* iPhone 6+, 7+, and 8+ */\r\n @media only screen and (min-device-width: 414px) {\r\n u ~ div .email-container {\r\n min-width: 414px !important;\r\n }\r\n }\r\n\r\n`","export const progressiveEnhancement = `\r\n\r\n \r\n \r\n\r\n`\r\n\r\nexport const progressiveEnhancementInnerContent = `\r\n/* What it does: Hover styles for buttons */\r\n.button-td,\r\n.button-a {\r\n transition: all 100ms ease-in;\r\n}\r\n.button-td-primary:hover,\r\n.button-a-primary:hover {\r\n background: #555555 !important;\r\n border-color: #555555 !important;\r\n}\r\n\r\n/* Media Queries */\r\n@media screen and (max-width: 480px) {\r\n\r\n /* What it does: Forces table cells into full-width rows. */\r\n .stack-column,\r\n .stack-column-center {\r\n display: block !important;\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n direction: ltr !important;\r\n }\r\n /* And center justify these ones. */\r\n .stack-column-center {\r\n text-align: center !important;\r\n }\r\n\r\n /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */\r\n .center-on-narrow {\r\n text-align: center !important;\r\n \r\n float: none !important;\r\n }\r\n table.center-on-narrow {\r\n\r\n }\r\n\r\n /* What it does: Adjust typography on small screens to improve readability */\r\n .email-container p {\r\n font-size: 17px !important;\r\n }\r\n}\r\n\r\n`","import { defaultTemplate } from \"../models/defaultTemplate\";\r\nimport { getValueFromNestedObject, getValueFromNestedObjectByParam, deepClone } from \"../../../../helpers/objectHelper\";\r\nimport { templateActions } from \"../../../../store/actions/cms/template/template.action\";\r\nimport { store } from \"../../../../store/configureStore\";\r\nimport { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\nimport { containerHelper } from \"../../../helpers/containerHelper\";\r\nimport { content } from \"../../../models/content\";\r\nimport { sourceTypes } from \"../../../../constants/cms/sourceType\";\r\nimport { contentHelper } from \"../../../helpers/contentHelper\";\r\nimport { securityHelper } from \"../../../../helpers/securityHelper\";\r\n\r\nexport const templateHelper = {\r\n checkForUpdates,\r\n handleElementUpdates,\r\n formatToResponsivePath,\r\n getUnit,\r\n getValueFromInput,\r\n getValueWithoutUnit,\r\n assignResponsiveStyle,\r\n parseColorToRgba,\r\n getTemplatesColors,\r\n parseRgbaToHex,\r\n convertRgbStringToHex,\r\n onDragEnd,\r\n moveElement,\r\n nestledFind,\r\n};\r\n\r\nfunction nestledFind(path, base) {\r\n let pathArr = path.split(\".\");\r\n let val = \"\";\r\n let obj = base;\r\n for (let index = 0; index < pathArr.length; index++) {\r\n val = obj[pathArr[index]];\r\n if (typeof obj[pathArr[index]] == \"object\") {\r\n obj = obj[pathArr[index]];\r\n }\r\n }\r\n return val;\r\n}\r\nfunction sortElements(result) {\r\n const { destination, source, draggableId } = result;\r\n const { template } = store.getState();\r\n const dispatch = store.dispatch;\r\n const newTemplate = deepClone(template.template);\r\n let target = destination.droppableId;\r\n\r\n if (!Array.isArray(newTemplate.content[target].content)) return;\r\n const sourceEl = newTemplate.content[target].content.find((el) => {\r\n return el.contentId === draggableId;\r\n });\r\n\r\n if (destination.index > source.index) {\r\n //if moved down\r\n newTemplate.content[target].content.map((el) => {\r\n if (el.page === sourceEl.page && el.parentId === sourceEl.parentId && el.sortOrder > source.index && el.sortOrder <= destination.index) {\r\n el.sortOrder -= 1;\r\n }\r\n\r\n if (el.contentId === sourceEl.contentId) {\r\n el.sortOrder = destination.index;\r\n }\r\n });\r\n } else if (destination.index < source.index) {\r\n newTemplate.content[target].content.map((el) => {\r\n if (el.page === sourceEl.page && el.parentId === sourceEl.parentId && el.sortOrder <= source.index && el.sortOrder >= destination.index) {\r\n el.sortOrder += 1;\r\n }\r\n if (el.contentId === sourceEl.contentId) {\r\n el.sortOrder = destination.index;\r\n }\r\n });\r\n }\r\n\r\n dispatch(templateActions.softUpdate(newTemplate));\r\n}\r\n\r\nfunction moveElement(result, destinationContainer, parentName) {\r\n const { destination, source, draggableId } = result;\r\n const elementInfo = draggableId.split(\":\");\r\n\r\n let newDestinationContainer = Array.from(\r\n destinationContainer.sort((a, b) => {\r\n let x = a.sortOrder;\r\n let y = b.sortOrder;\r\n return y < x ? 1 : y > x ? -1 : 0;\r\n })\r\n );\r\n if (parseInt(elementInfo[0]) === elementConstants.CONTAINER) {\r\n newDestinationContainer.map((el) => {\r\n if (el.sortOrder > destination.index && el.parentId === null) el.sortOrder += 1;\r\n });\r\n let newContainerElements = containerHelper.create(newDestinationContainer, sourceTypes.TEMPLATE, elementInfo[1], destination.index + 1, securityHelper.createGuid() + \"_TEMPLATE\");\r\n newDestinationContainer = newDestinationContainer.concat(newContainerElements);\r\n newDestinationContainer.map((el) => {\r\n el.parentName = parentName;\r\n });\r\n }\r\n if (parseInt(elementInfo[0]) === elementConstants.CONTENT) {\r\n const selectedEl = content.find((el) => {\r\n return el.id === elementInfo[1];\r\n });\r\n newDestinationContainer.map((el) => {\r\n if (el.sortOrder > destination.index && el.parentId === null) el.sortOrder += 1;\r\n });\r\n let newEl = contentHelper.create(newDestinationContainer, sourceTypes.TEMPLATE, selectedEl, destination, securityHelper.createGuid() + \"_TEMPLATE\");\r\n newDestinationContainer.push(newEl);\r\n newDestinationContainer.map((el) => {\r\n el.parentName = parentName;\r\n });\r\n }\r\n return newDestinationContainer;\r\n}\r\n\r\nfunction onDragEnd(result) {\r\n const { destination, source, draggableId } = result;\r\n const { template } = store.getState();\r\n const dispatch = store.dispatch;\r\n if (!destination) {\r\n return;\r\n }\r\n if (destination.droppableId === source.droppableId && destination.index === source.index) {\r\n return;\r\n }\r\n if (destination.droppableId === \"header\" && source.droppableId.includes(\"sidebar\")) {\r\n const newTemplate = deepClone(template.template);\r\n let destinationContainer = Array.from(newTemplate.content.header.content);\r\n destinationContainer = moveElement(result, destinationContainer, \"HEADER\");\r\n newTemplate.content.header.content = destinationContainer;\r\n dispatch(templateActions.softUpdate(newTemplate));\r\n }\r\n if (destination.droppableId === \"footer\" && source.droppableId.includes(\"sidebar\")) {\r\n const newTemplate = deepClone(template.template);\r\n let destinationContainer = Array.from(newTemplate.content.footer.content);\r\n destinationContainer = moveElement(result, destinationContainer, \"FOOTER\");\r\n newTemplate.content.footer.content = destinationContainer;\r\n dispatch(templateActions.softUpdate(newTemplate));\r\n }\r\n if (destination.droppableId.includes(\"HEADER\") && source.droppableId.includes(\"sidebar\")) {\r\n const newTemplate = deepClone(template.template);\r\n let destinationContainer = Array.from(newTemplate.content.header.content);\r\n destinationContainer = containerHelper.addTo(destinationContainer, \"TEMPLATE\", undefined, result);\r\n destinationContainer.map((h) => {\r\n h.parentName = \"HEADER\";\r\n });\r\n newTemplate.content.header.content = destinationContainer;\r\n dispatch(templateActions.softUpdate(newTemplate));\r\n }\r\n if (destination.droppableId.includes(\"FOOTER\") && source.droppableId.includes(\"sidebar\")) {\r\n const newTemplate = deepClone(template.template);\r\n let destinationContainer = Array.from(newTemplate.content.footer.content);\r\n destinationContainer = containerHelper.addTo(destinationContainer, \"TEMPLATE\", undefined, result);\r\n destinationContainer.map((h) => {\r\n h.parentName = \"FOOTER\";\r\n });\r\n newTemplate.content.footer.content = destinationContainer;\r\n dispatch(templateActions.softUpdate(newTemplate));\r\n /* dispatch(cmsActions.containerToUpdate(newTemplate)); */\r\n }\r\n if (destination.droppableId.toUpperCase().includes(\"FOOTER\") && source.droppableId.includes(\"footer\")) {\r\n sortElements(result);\r\n }\r\n if (destination.droppableId.toUpperCase().includes(\"HEADER\") && source.droppableId.includes(\"header\")) {\r\n sortElements(result);\r\n }\r\n}\r\n\r\nfunction parseColorToRgba(color) {\r\n const { r, g, b, a } = color.rgb;\r\n return `rgba(${r},${g},${b},${a})`;\r\n}\r\n\r\nfunction parseRgbaToHex(color) {\r\n const { r, g, b, a } = color.rgb;\r\n var red = hexCode(r);\r\n var green = hexCode(g);\r\n var blue = hexCode(b);\r\n\r\n return \"#\" + red + green + blue;\r\n}\r\n\r\nfunction convertRgbStringToHex(rgb, param = null) {\r\n if (rgb == \"white\") return \"#ffffff\";\r\n if (rgb == \"black\") return \"#000000\";\r\n\r\n if (!rgb.toString().includes(\"rgb\")) return rgb;\r\n var a = rgb.split(\"(\")[1].split(\")\")[0];\r\n a = a.split(\",\");\r\n let hex = \"#\";\r\n for (let index = 0; index < a.length; index++) {\r\n let x = parseInt(a[index]).toString(16); //Convert to a base16 string\r\n hex += x.length == 1 ? \"0\" + x : x;\r\n }\r\n if (hex.length > 7) hex = hex.substring(0, 7);\r\n return hex;\r\n}\r\n\r\nfunction hexCode(rgb) {\r\n var hex = Number(rgb).toString(16);\r\n if (hex.length < 2) {\r\n hex = \"0\" + hex;\r\n }\r\n return hex;\r\n}\r\nfunction getValueFromInput(e, color) {\r\n if (e === null) return \"unset\";\r\n\r\n if (parseInt(e) || (typeof e === \"string\" && e.length > 0)) return e;\r\n else if (color) return parseColorToRgba(color);\r\n else if (e.target && e.target.value) return e.target.value;\r\n}\r\n\r\nfunction assignResponsiveStyle(source) {\r\n const responsiveNames = [\"content\", \"header\", \"footer\", \"menu\"];\r\n const devices = [\"tablet\", \"smartphone\"];\r\n const newStyle = Object.assign({}, source);\r\n for (let x = 0; x < responsiveNames.length; x++) {\r\n for (let y = 0; y < devices.length; y++) {\r\n const defaultStyle = defaultTemplate.responsive[devices[y]][responsiveNames[x]];\r\n const mainStyle = defaultTemplate[responsiveNames[x]];\r\n for (const key in newStyle.responsive[devices[y]][responsiveNames[x]]) {\r\n if (defaultStyle[key] !== \"unset\" && newStyle.responsive[devices[y]][responsiveNames[x]][key] === \"unset\") {\r\n newStyle.responsive[devices[y]][responsiveNames[x]][key] = defaultStyle[key];\r\n } else if (defaultStyle[key] === \"unset\" && newStyle.responsive[devices[y]][responsiveNames[x]][key] === \"unset\") {\r\n newStyle.responsive[devices[y]][responsiveNames[x]][key] = mainStyle[key];\r\n }\r\n }\r\n }\r\n }\r\n return newStyle;\r\n}\r\n\r\nfunction getTemplatesColors(template) {\r\n const colors = [];\r\n getValueFromNestedObjectByParam([\"color\", \"backgroundColor\"], template.content, colors);\r\n return colors;\r\n}\r\n\r\nfunction getUnit(template, names) {\r\n let value = undefined;\r\n let unit = \"\";\r\n if (!Array.isArray(names)) names = names.split(\".\");\r\n if (names.includes(\"boxShadow\")) return unit;\r\n value = getValueFromNestedObject(names, template.content ? template.content : template, value);\r\n if (value !== undefined && value) {\r\n if (value === \"unset\") unit = \"px\";\r\n else if (parseFloat(value)) unit = value.replace(/[0-9/^d.-]/g, \"\");\r\n else unit = \"px\";\r\n }\r\n return unit;\r\n}\r\n\r\nfunction getValueWithoutUnit(template, names) {\r\n let value = 0;\r\n if (!Array.isArray(names)) names = names.split(\".\");\r\n value = getValueFromNestedObject(names, template.content, value);\r\n try {\r\n if (value.includes(\"rgb\") || value.includes(\"#\") || value.includes(\"white\")) return value;\r\n else if (value === \"unset\") value = 0;\r\n if (value === \"unset\") value = 0;\r\n else value = value.replace(/[^0-9\\d.-]/g, \"\");\r\n value = parseFloat(value);\r\n } catch (error) {}\r\n\r\n return value;\r\n}\r\n\r\nfunction formatToResponsivePath(parent, prop, device) {\r\n if (device === \"desktop\") return `${parent}.${prop}`;\r\n return `responsive.${device}.${parent}.${prop}`;\r\n}\r\n\r\n/*DEPRECATED*/\r\nfunction checkForUpdates(target, source) {\r\n const sourceObj = Object.assign({}, source);\r\n let targetObj = Object.assign({}, target);\r\n\r\n //* Loops two levels of an object*/\r\n for (const prop in sourceObj) {\r\n if (!targetObj.hasOwnProperty(`${prop}`)) {\r\n targetObj[prop] = { ...sourceObj[prop] };\r\n if (targetObj.hasOwnProperty(`${prop}`)) {\r\n }\r\n } else {\r\n for (const v in sourceObj[prop]) {\r\n if (!targetObj[prop].hasOwnProperty(v)) {\r\n targetObj[prop][v] = sourceObj[prop][v];\r\n if (targetObj[prop].hasOwnProperty(`${v}`)) {\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\nfunction handleElementUpdates(element, template) {\r\n //Move this code to reducer\r\n if (element.parentName === \"HEADER\") {\r\n let el = template.content.header.content.find((f) => {\r\n return f.contentId === element.contentId;\r\n });\r\n var indexOfRemovedEl = template.content.header.content.indexOf(el);\r\n if (indexOfRemovedEl > -1) {\r\n template.content.header.content.splice(indexOfRemovedEl, 1);\r\n template.content.header.content.push(element);\r\n }\r\n }\r\n if (element.parentName === \"FOOTER\") {\r\n let el = template.content.footer.content.find((f) => {\r\n return f.contentId === element.contentId;\r\n });\r\n var indexOfRemovedEl = template.content.footer.content.indexOf(el);\r\n if (indexOfRemovedEl > -1) {\r\n template.content.footer.content.splice(indexOfRemovedEl, 1);\r\n template.content.footer.content.push(element);\r\n }\r\n }\r\n return template;\r\n}\r\n","export const formConstants = {\r\n ATTACH_SUCCESS: \"ATTACH_SUCCESS\",\r\n SELECT_SUCCESS: \"SELECT_SUCCESS\",\r\n DESELECT_SUCCESS: \"DESELECT_SUCCESS\",\r\n DELETE_SUCCESS: \"DELETE_SUCCESS\",\r\n TRANSFER_SUCCESS: \"TRANSFER_PAGE_SUCCESS\",\r\n SOFT_UPDATE_SUCCESS: \"SOFT_UPDATE_SUCCESS\",\r\n SELECT_OPTION: \"SELECT_OPTION\",\r\n UPDATE_FORM_SUCCESS: \"UPDATE_FORM_SUCCESS\",\r\n UPDATE_FORM_REQUEST: \"UPDATE_FORM_REQUEST\",\r\n UPDATE_FORM_FAILURE: \"UPDATE_FORM_FAILURE\",\r\n\r\n GET_FORM_REQUEST: \"GET_FORM_REQUEST\",\r\n GET_FORM_SUCCESS: \"GET_FORM_SUCCESS\",\r\n GET_FORM_FAILURE: \"GET_FORM_FAILURE\",\r\n\r\n GETALL_FORM_REQUEST: \"GETALL_FORM_REQUEST\",\r\n GETALL_FORM_SUCCESS: \"GETALL_FORM_SUCCESS\",\r\n GETALL_FORM_FAILURE: \"GETALL_FORM_FAILURE\",\r\n\r\n GET_ALL_FORM_PATHS: 'GET_ALL_FORM_PATHS',\r\n\r\n CLEAR_DND_CONFLICTS: \"CLEAR_DND_CONFLICTS\",\r\n CREATE_FORM_REQUEST: \"CREATE_FORM_REQUEST\",\r\n CREATE_FORM_SUCCESS: \"CREATE_FORM_SUCCESS\",\r\n CREATE_FORM_FAILURE: \"CREATE_FORM_FAILURE\",\r\n\r\n DELETE_FORM_SUCCESS: \"DELETE_FORM_SUCCESS\",\r\n DELETE_FORM_REQUEST: \"DELETE_FORM_REQUEST\",\r\n DELETE_FORM_FAILURE: \"DELETE_FORM_FAILURE\",\r\n IS_CROPPING: \"IS_CROPPING\",\r\n POST_FORM_REQUEST: \"POST_FORM_REQUEST\",\r\n POST_FORM_SUCCESS: \"POST_FORM_SUCCESS\",\r\n POST_FORM_FAILURE: \"POST_FORM_FAILURE\",\r\n\r\n UPDATE_FORM_ELEMENT: \"UPDATE_FORM_ELEMENT\",\r\n\r\n FORM_IS_VALID: \"FORM_IS_VALID\",\r\n RESTORE_FORM: \"RESTORE_FORM\",\r\n\r\n ADD_PAGE: \"ADD_PAGE\",\r\n REMOVE_PAGE: \"REMOVE_PAGE\",\r\n SCROLL_PAGE: \"SCROLL_PAGE\",\r\n SET_STATE_ERROR: \"SET_STATE_ERROR\",\r\n FORM_VERSION_CONFLICT: \"FORM_VERSION_CONFLICT\",\r\n\r\n\r\n //ERROR MESSAGE\r\n\r\n\r\n JX_FORM_VERSION_CONFLICT: \"JX_FORM_VERSION_CONFLICT\"\r\n\r\n\r\n};\r\n","import React from 'react';\r\nimport './ImageOverlay.css'\r\n\r\nexport const ImageOverlay = ({ toggleMediaVault, isCroppable, toggleCroppie, isEditing = false, toggleTextEdit = null }) => {\r\n return (\r\n \r\n \r\n {isCroppable ? : null}\r\n {isEditing ? : null}\r\n \r\n
)\r\n}","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SketchPicker } from \"react-color\";\r\nimport {\r\n Row,\r\n Col,\r\n Label,\r\n Input,\r\n InputGroup\r\n} from \"reactstrap\";\r\nimport Select from 'react-select';\r\nimport EditorSlider from \"../../../../components/editor/tools/EditorSlider\";\r\nimport { AlignmentButtonGroup } from \"../../../../components/editor/tools/AlignmentButtonGroup/AlignmentButtonGroup\";\r\nimport { templateHelper } from \"../../../template/helpers/templateHelper\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { setValueToNestedObject, deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport ColorPickerFacade from \"../../../../../components/UI/Buttons/ColorPickerFacade\";\r\nimport { UseTemplateButton, SetStyleToAllOfItsType, SetToAuto } from \"../../components/UseTemplateButton\";\r\nimport ListExpansion from \"../../../../../components/UI/ListExpansion/ListExpansion\";\r\nimport { UrlMultiInput } from \"../../../../components/editor/tools/UrlMultiInput/UrlMultiInput\";\r\nimport { emailFonts } from \"../../models/emailFonts/emailFonts\";\r\nimport { simpleButtonHandler } from \"./SimpleButton.handler\";\r\n\r\n\r\nclass SimpleButtonSettings extends React.Component {\r\n state = {\r\n spreadActiveSet: []\r\n }\r\n handleSoftUpdate = element => {\r\n const { dispatch } = this.props;\r\n dispatch(emailActions.updateEmailElement(element, null, true, this.props.inherit));\r\n }\r\n useTemplateStyle = (stylePath, templatePath) => {\r\n const { selectedElement, template } = this.props;\r\n let elementCopy = deepClone(selectedElement);\r\n let templateCopy = deepClone(template)\r\n const styleParts = stylePath.split(\".\");\r\n const templateParts = templatePath.split(\".\");\r\n\r\n let unit = templateHelper.getUnit(templateCopy, templateParts);\r\n let value = templateHelper.getValueWithoutUnit(templateCopy, templateParts);\r\n\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n\r\n elementCopy.style = setValueToNestedObject(\r\n styleParts,\r\n value,\r\n elementCopy.style\r\n );\r\n elementCopy.style.inheritedStyles.push({ templatePath, stylePath });\r\n\r\n this.handleSoftUpdate(elementCopy);\r\n\r\n if (this.state.spreadActiveSet.includes(styleParts[styleParts.length - 1]) || this.state.spreadActiveSet.includes(styleParts[styleParts.length - 2] + styleParts[styleParts.length - 1])) {\r\n this.spreadStyle(elementCopy.type, styleParts, value, templatePath)\r\n }\r\n\r\n }\r\n inheritedStylesControl = (selectedElement, val, templatePath, stylePath) => {\r\n const { template } = this.props;\r\n if (!selectedElement.style.inheritedStyles ||\r\n selectedElement.style.inheritedStyles.length === 0) {\r\n return;\r\n }\r\n let templateCopy = deepClone(template)\r\n const newElement = deepClone(selectedElement);\r\n const templateParts = templatePath.split(\".\");\r\n let unit = templateHelper.getUnit(templateCopy, templateParts);\r\n let value = templateHelper.getValueWithoutUnit(templateCopy, templateParts);\r\n if (parseInt(value) && unit.length < 4) {\r\n value += unit;\r\n }\r\n\r\n if (value !== val) {\r\n newElement.style.inheritedStyles = newElement.style.inheritedStyles.filter(s => s !== templatePath);\r\n }\r\n else {\r\n\r\n newElement.style.inheritedStyles.push({ templatePath: templatePath, stylePath: stylePath })\r\n }\r\n return newElement;\r\n }\r\n spreadStyle = (type, parts, value, templatePath = null) => {\r\n const { selectedElement } = this.props;\r\n const elementsCopy = Array.from(this.props.elements);\r\n if (elementsCopy.length === 0) return;\r\n const typeFamily = elementsCopy.filter(el => el.type === type);\r\n if (typeFamily.length > 0) {\r\n typeFamily.map(tf => {\r\n let newEl = deepClone(tf);\r\n newEl.style = setValueToNestedObject(\r\n parts,\r\n value,\r\n newEl.style\r\n );\r\n if (templatePath && Array.isArray(newEl.style.inheritedStyles)) {\r\n newEl = this.inheritedStylesControl(\r\n newEl,\r\n value,\r\n templatePath,\r\n parts.join('.'))\r\n }\r\n this.handleSoftUpdate(newEl);\r\n });\r\n }\r\n if (selectedElement.families.length > 0) {\r\n const typeFamilyTree = elementsCopy.filter(el => el.families && el.families.length > 0 && el.id !== selectedElement.id);\r\n if (typeFamilyTree.length === 0) return;\r\n selectedElement.families.map(f => {\r\n typeFamilyTree.map(tf => {\r\n if (tf.families.includes(f)) {\r\n let newEl = deepClone(tf);\r\n if (tf.families.length > 1) {\r\n if (newEl.style[f + 'Style'] !== undefined) {\r\n newEl.style = setValueToNestedObject(\r\n [f + 'Style', parts[parts.length - 1]],\r\n value,\r\n newEl.style\r\n );\r\n }\r\n }\r\n else {\r\n if (newEl.style.styleProps !== undefined) {\r\n newEl.style = setValueToNestedObject(\r\n ['styleProps', parts[parts.length - 1]],\r\n value,\r\n newEl.style\r\n );\r\n }\r\n }\r\n if (templatePath && Array.isArray(newEl.style.inheritedStyles)) {\r\n newEl = this.inheritedStylesControl(\r\n newEl,\r\n value,\r\n templatePath,\r\n tf.families.length > 1 ?\r\n [f + 'Style', parts[parts.length - 1]].join('.') :\r\n ['styleProps', parts[parts.length - 1]].join('.'))\r\n }\r\n this.handleSoftUpdate(newEl);\r\n }\r\n })\r\n })\r\n\r\n }\r\n }\r\n handleChange = (e, val, path, templatePath = null) => {\r\n const { selectedElement } = this.props;\r\n const names = path.split(\".\");\r\n let elementCopy = deepClone(selectedElement);\r\n let value = val;\r\n if (val && val.hex !== undefined) {\r\n value = templateHelper.parseRgbaToHex(val)\r\n }\r\n if (templatePath !== null) {\r\n elementCopy = this.inheritedStylesControl(elementCopy, value, templatePath, path)\r\n }\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n value,\r\n elementCopy.style\r\n );\r\n elementCopy.content = simpleButtonHandler.elementEditor(elementCopy.style);\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, value, templatePath)\r\n }\r\n }\r\n spreadToggler = (name) => {\r\n let spreadActiveSet = Array.from(this.state.spreadActiveSet);\r\n if (spreadActiveSet.includes(name)) {\r\n spreadActiveSet = spreadActiveSet.filter(n => { return n !== name });\r\n }\r\n else {\r\n spreadActiveSet.push(name)\r\n }\r\n this.setState({ spreadActiveSet });\r\n }\r\n handleSpaceOnChange = (e, path, dir) => {\r\n const names = path.split(\".\");\r\n const elementCopy = deepClone(this.props.selectedElement);\r\n const spaceValue = elementCopy.style[names[0]][names[1]];\r\n let value = e.target.value;\r\n let splitted = spaceValue.toString().split(' ')\r\n let baseValue = '';\r\n if (splitted.length > 1) {\r\n splitted[dir] = value + 'px';\r\n splitted = splitted.join(' ')\r\n baseValue = splitted;\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n splitted,\r\n elementCopy.style\r\n );\r\n }\r\n else {\r\n let newString = `${splitted[0]}px ${splitted[0]}px ${splitted[0]}px ${splitted[0]}px`;\r\n newString = newString.split(' ');\r\n newString[dir] = value + 'px';\r\n baseValue = newString;\r\n elementCopy.style = setValueToNestedObject(\r\n names,\r\n newString,\r\n elementCopy.style\r\n );\r\n }\r\n this.handleSoftUpdate(elementCopy);\r\n if (this.state.spreadActiveSet.includes(names[names.length - 1]) || this.state.spreadActiveSet.includes(names[names.length - 2] + names[names.length - 1])) {\r\n this.spreadStyle(elementCopy.type, names, baseValue)\r\n }\r\n }\r\n convertSpaceValue = (value, index) => {\r\n let splitted = value.toString().split(' ')\r\n if (splitted.length > 1) {\r\n return parseInt(splitted[index]);\r\n }\r\n else {\r\n return parseInt(splitted[0]);\r\n }\r\n }\r\n render() {\r\n const { selectedElement, template } = this.props;\r\n const selectStyles = {\r\n option: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: '12px',\r\n fontFamily: data.value,\r\n padding: \"0 10px\",\r\n };\r\n },\r\n container: styles => ({\r\n ...styles,\r\n minWidth: \"100%\",\r\n borderRight: '1px solid gainsboro'\r\n }),\r\n /* control: styles => ({\r\n borderWidth: '1px'\r\n }), */\r\n singleValue: (styles, { data }) => {\r\n return {\r\n ...styles,\r\n fontSize: '12px',\r\n fontFamily: data.value,\r\n };\r\n }\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n this.handleChange(e, color, \"wrapper.backgroundColor\", 'content.backgroundColor')\r\n }\r\n />\r\n \r\n
\r\n \r\n this.useTemplateStyle(\r\n \"wrapper.backgroundColor\",\r\n \"content.backgroundColor\"\r\n )}\r\n active={(selectedElement.style.wrapper.backgroundColor === template.content.content.backgroundColor)}\r\n /> : null}\r\n this.spreadToggler('wrapperbackgroundColor')}\r\n active={this.state.spreadActiveSet.includes('wrapperbackgroundColor')}\r\n />\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n this.handleChange(e, color, \"styleProps.background\", 'button.backgroundColor')\r\n }\r\n />\r\n \r\n
\r\n \r\n this.useTemplateStyle(\r\n \"styleProps.background\",\r\n \"button.backgroundColor\"\r\n )}\r\n active={(selectedElement.style.styleProps.background === template.content.button.backgroundColor)}\r\n /> : null}\r\n this.spreadToggler('background')}\r\n active={this.state.spreadActiveSet.includes('background')}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, color, \"styleProps.color\", 'button.color')\r\n }\r\n />\r\n \r\n
\r\n \r\n this.useTemplateStyle(\r\n \"styleProps.color\",\r\n \"button.color\"\r\n )}\r\n active={(selectedElement.style.styleProps.color === template.content.button.color)}\r\n /> : null}\r\n this.spreadToggler('color')}\r\n active={this.state.spreadActiveSet.includes('color')}\r\n />\r\n \r\n
\r\n \r\n \r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n attachUnit={true}\r\n steps={1}\r\n max={680}\r\n min={1}\r\n path={'styleProps.minWidth'}\r\n label=\"ButtonWidth\"\r\n />\r\n \r\n this.spreadToggler('minWidth')}\r\n active={this.state.spreadActiveSet.includes('minWidth')}\r\n />\r\n
\r\n null}\r\n onChange={this.handleChange}\r\n units={[\"px\"]}\r\n activeUnit={'px'}\r\n attachUnit={true}\r\n steps={1}\r\n max={100}\r\n min={1}\r\n extraParam=\"button.borderRadius\"\r\n path={'styleProps.borderRadius'}\r\n label=\"BorderRadius\"\r\n />\r\n \r\n this.useTemplateStyle(\r\n \"styleProps.borderRadius\",\r\n \"button.borderRadius\"\r\n )}\r\n active={(selectedElement.style.styleProps.borderRadius === template.content.button.borderRadius)}\r\n />\r\n this.spreadToggler('borderRadius')}\r\n active={this.state.spreadActiveSet.includes('borderRadius')}\r\n />\r\n
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {/* \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n this.handleChange(null, selectedOption.value, 'styleProps.fontFamily')\r\n }\r\n styles={selectStyles}\r\n />\r\n \r\n \r\n
\r\n \r\n this.spreadToggler('fontFamily')}\r\n active={this.state.spreadActiveSet.includes('fontFamily')}\r\n />\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n elements: state.email.elements,\r\n template: state.template.template,\r\n inherit: state.email.inherit,\r\n selectedElement: state.email.selectedElement\r\n };\r\n}\r\nexport default connect(mapStateToProps)(SimpleButtonSettings);\r\n","import { handleResponse } from \"../../../helpers/handleresponse\";\r\nimport { authHeader } from \"../../../helpers/authHeader\";\r\n\r\nexport const pageService = {\r\n update,\r\n get,\r\n checkForUpdates,\r\n getAllPaths,\r\n screenshot\r\n};\r\n\r\nasync function get(pageId, viewMode) {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" })\r\n };\r\n return fetch(`./api/page/${pageId}/?viewMode=${viewMode}`, requestOptions)\r\n .then(handleResponse)\r\n .then(page => {\r\n return page;\r\n });\r\n}\r\nasync function getAllPaths(eventId) {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" })\r\n };\r\n return fetch(`./api/page/getAllPaths/${eventId}`, requestOptions)\r\n .then(handleResponse)\r\n .then(pages => {\r\n return pages;\r\n });\r\n}\r\nasync function screenshot(pageId){\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n };\r\n\r\n return fetch(`/files/pagescreenshot/${pageId}`, requestOptions)\r\n .then(handleResponse);\r\n}\r\nasync function checkForUpdates(pageId, lastModified) {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" })\r\n };\r\n return fetch(`./api/page/checkforupdates/${pageId}/?lastModified=${lastModified}`, requestOptions)\r\n .then(handleResponse)\r\n .then(lastModified => {\r\n return lastModified;\r\n });\r\n}\r\n\r\nasync function update(page) {\r\n\r\n const requestOptions = {\r\n method: \"PUT\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n body: JSON.stringify(page)\r\n };\r\n\r\n return fetch(`./api/page`, requestOptions)\r\n .then(handleResponse)\r\n .then(page => {\r\n return page;\r\n });\r\n}\r\n","import { alertActions } from \"../../alert.action\";\r\n\r\nimport { pageConstants } from \"../../../../constants/cms/page/page.constants\";\r\nimport { pageService } from \"../../../../services/cms/page/page.service\";\r\nimport { history } from \"../../../../helpers/history\";\r\nimport { cmsActions } from \"../cms.action\";\r\nexport const pageActions = {\r\n attach,\r\n update,\r\n get,\r\n select,\r\n removePage,\r\n softUpdate,\r\n remove,\r\n addPage,\r\n deselect,\r\n updatePageElement,\r\n restore,\r\n checkForUpdates,\r\n getAllPaths,\r\n};\r\n\r\nfunction attach(element) {\r\n return (dispatch) => {\r\n dispatch(success(element));\r\n };\r\n function success(element) {\r\n return { type: pageConstants.PAGE_ATTACH, element };\r\n }\r\n}\r\nfunction restore() {\r\n return (dispatch) => {\r\n dispatch(success());\r\n };\r\n function success() {\r\n return { type: pageConstants.RESTORE_PAGE };\r\n }\r\n}\r\nfunction addPage() {\r\n return (dispatch) => {\r\n dispatch(success());\r\n };\r\n function success() {\r\n return { type: pageConstants.ADD_VIEW_PAGE };\r\n }\r\n}\r\nfunction removePage() {\r\n return (dispatch) => {\r\n dispatch(success());\r\n };\r\n function success() {\r\n return { type: pageConstants.REMOVE_VIEW_PAGE };\r\n }\r\n}\r\nfunction checkForUpdates(page, allowOverWrite = false) {\r\n return (dispatch) => {\r\n dispatch(alertActions.clear());\r\n\r\n /* if (allowOverWrite) {\r\n return dispatch(update(page));\r\n }\r\n \r\n \r\n \r\n pageService.checkForUpdates(page.pageId, page.updated).then(\r\n data => {\r\n if (data.isModified === true) {\r\n return dispatch(cmsActions.alertNewModifications(data.isModified, 'PAGE'));\r\n }\r\n else { */\r\n return dispatch(update(page));\r\n /* }\r\n },\r\n error => {\r\n \r\n dispatch(alertActions.error(error));\r\n }\r\n ); */\r\n };\r\n}\r\nfunction updatePageElement(element, id, page) {\r\n return (dispatch) => {\r\n if ((element.props && element.props.inherit !== null) || page.inherit == true) {\r\n dispatch(cmsActions.inheritageAffected(true));\r\n }\r\n dispatch(success({ ...element, hasChanged: true }), id);\r\n };\r\n function success(element) {\r\n return { type: pageConstants.UPDATE_PAGE_ELEMENT, element, id };\r\n }\r\n}\r\nfunction deselect() {\r\n return (dispatch) => {\r\n dispatch(success());\r\n };\r\n function success() {\r\n return { type: pageConstants.DESELECT_PAGE_ELEMENT };\r\n }\r\n}\r\nfunction remove(element) {\r\n return (dispatch) => {\r\n dispatch(success(element));\r\n };\r\n function success(element) {\r\n return { type: pageConstants.DELETE_PAGE_ELEMENT, element };\r\n }\r\n}\r\nfunction select(element) {\r\n return (dispatch) => {\r\n dispatch(success(element));\r\n };\r\n function success(element) {\r\n return { type: pageConstants.PAGE_SELECT, element };\r\n }\r\n}\r\nfunction softUpdate(page) {\r\n return (dispatch) => {\r\n if (page && page.inherit === true) {\r\n dispatch(cmsActions.inheritageAffected(true));\r\n }\r\n dispatch(success(page));\r\n };\r\n function success(page) {\r\n return { type: pageConstants.SOFT_UPDATE_PAGE, page };\r\n }\r\n}\r\nfunction update(page) {\r\n return (dispatch) => {\r\n dispatch(request());\r\n dispatch(alertActions.clear());\r\n const newPage = Object.assign({}, page);\r\n const pageElements = Array.from(newPage.pageElements);\r\n\r\n newPage.pageElements = pageElements.map((el) => {\r\n const pageElement = Object.assign({}, el);\r\n pageElement.data = JSON.stringify(pageElement.data);\r\n return pageElement;\r\n });\r\n newPage.settings = JSON.stringify(newPage.settings);\r\n newPage.content = JSON.stringify(newPage.pageElements);\r\n const { pageId, eventId, templateId, name, content, settings, inherit, title, facebookId, googleAnalyticsId, onlyAuthorizedUsers } = newPage;\r\n\r\n pageService\r\n .update({\r\n pageId,\r\n eventId,\r\n templateId,\r\n name,\r\n facebookId,\r\n content,\r\n title,\r\n settings,\r\n googleAnalyticsId,\r\n inherit,\r\n onlyAuthorizedUsers\r\n })\r\n .then(\r\n (p) => {\r\n dispatch(success(p));\r\n if (page.pageId != p.pageId) {\r\n history.push(\"/cms/page/\" + p.pageId);\r\n }\r\n },\r\n (error) => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: pageConstants.UPDATE_PAGE_REQUEST };\r\n }\r\n function success(page) {\r\n return { type: pageConstants.UPDATE_PAGE_SUCCESS, page };\r\n }\r\n function failure(error) {\r\n return { type: pageConstants.UPDATE_PAGE_FAILURE, error };\r\n }\r\n}\r\nfunction get(pageId, viewMode = false) {\r\n return (dispatch) => {\r\n dispatch(request());\r\n dispatch(alertActions.clear());\r\n pageService.get(pageId, viewMode).then(\r\n (page) => {\r\n dispatch(success(page));\r\n },\r\n (error) => {\r\n dispatch(failure(error));\r\n if (error === \"JX_PAGE_NOTALLOWED\") {\r\n history.push(\"/\");\r\n }\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: pageConstants.GET_PAGE_REQUEST };\r\n }\r\n function success(page) {\r\n return { type: pageConstants.GET_PAGE_SUCCESS, page };\r\n }\r\n function failure(error) {\r\n return { type: pageConstants.GET_PAGE_FAILURE, error };\r\n }\r\n}\r\n\r\nfunction getAllPaths(eventId) {\r\n return (dispatch) => {\r\n dispatch(alertActions.clear());\r\n pageService.getAllPaths(eventId).then(\r\n (pages) => {\r\n dispatch(set(pages));\r\n },\r\n (error) => {\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n function set(pages) {\r\n return { type: pageConstants.GET_ALL_PAGE_PATHS, pages };\r\n }\r\n}\r\n","import React from 'react';\r\nimport './FloatingChecklist.css'\r\nimport { Col, Row } from 'reactstrap';\r\nimport SystemLabel from '../../../../../system/SystemLabel/SystemLabel';\r\n\r\nexport const FloatingChecklist = ({ list, onCheck }) => {\r\n return \r\n {list.map((a, i) => {\r\n return
onCheck(a.address)} key={i}>{a.address}
\r\n })}\r\n
\r\n {list.map((a, i) => {\r\n return onCheck(a.id, a.type)} key={i}>\r\n
\r\n })}\r\n
\r\n}","import React from 'react';\r\nimport FormGroup from '@material-ui/core/FormGroup';\r\n\r\nimport { AppSwitch } from '@coreui/react';\r\nimport './JirangoSwitch.css'\r\n\r\nexport default function JirangoSwitch({onChange,isChecked}) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst GroupRegistration = (props) => {\r\n const { dispatch, cms, element, allowAdd } = props;\r\n const { button } = props.template;\r\n return (\r\n <>\r\n {\r\n if (allowAdd()) {\r\n dispatch(attendeeActions.createOrder({}));\r\n dispatch(formActions.scrollPage(element.data.returnPage || 1));\r\n }\r\n }}\r\n >\r\n \r\n {media.length > 0 && media.filter(m => { return m.url !== headerImage }).map((v, i) => {\r\n if (v.url !== undefined) {\r\n return v.type.includes('image/') ?\r\n
\r\n {!editMode ?
:\r\n
}\r\n {editMode &&
onDelete(v.name)} />}\r\n :\r\n
\r\n \r\n \r\n {editMode && onDelete(v.name)} />}\r\n
\r\n }\r\n return
\r\n
\r\n })}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n );\r\n};\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {\r\n Row,\r\n Col,\r\n Container,\r\n FormGroup,\r\n Spinner,\r\n Label,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n Button\r\n} from \"reactstrap\";\r\n\r\nimport axios from \"axios\";\r\nimport SystemLabel from \"../../../../../../../system/SystemLabel/SystemLabel\";\r\nimport { systemLabelActions } from \"../../../../../../../store/actions/system/systemLabel/systemLabel.action\";\r\nimport \"./ArticleEditor.css\";\r\nimport ArticleMedia from \"../../components/ArticleMediaUploader/ArticleMedia\";\r\nimport { history } from \"../../../../../../../helpers/history\";\r\nimport Notifier from \"../../../../../../../components/UI/Notifier/Notifier\";\r\nimport { MobileLoader } from \"../../../../../../../components/UI/Spinner/MobileLoader\";\r\nimport { arrayHelper } from \"../../../../../../../helpers/arrayHelper\";\r\nimport {\r\n resetOrientation,\r\n dataURLtoFile\r\n} from \"../../../../../../../helpers/imageHelper\";\r\nclass ArticleEditor extends React.Component {\r\n state = {\r\n headerImage: \"\",\r\n title: \"\",\r\n subtitle: \"\",\r\n content: \"\",\r\n likes: 0,\r\n publishDate: null,\r\n media: [],\r\n mediaVm: [],\r\n headerImageFd: null,\r\n errorMessage: \"\",\r\n article: null,\r\n previewHeaderImage: \"\",\r\n alert: null,\r\n loading: false,\r\n prevHeaderImage: null,\r\n prevMediaLength: 0,\r\n published: false,\r\n mediaUploaded: false,\r\n count: 0,\r\n headerRotation: 0,\r\n headerFile: null\r\n };\r\n componentDidMount() {\r\n const { user, dispatch } = this.props;\r\n window.scrollTo(0, 0);\r\n const userLang = user && user.userLang === undefined ? user.token.userLang : user.userLang;\r\n if (user && userLang) {\r\n dispatch(systemLabelActions.getGroup(user.userLang, \"Article.Edit\"));\r\n }\r\n if (this.checkIfEdit()) {\r\n this.getArticle();\r\n }\r\n }\r\n\r\n validate = () => {\r\n const { article } = this.state;\r\n if (article) {\r\n if (article.title.length < 1) {\r\n this.setState(\r\n { alert: { message: /* 'adawd' */ \"Titel saknas!\", type: \"error\" } },\r\n () => {\r\n setTimeout(() => {\r\n this.setState({ alert: null });\r\n }, 2000);\r\n }\r\n );\r\n return false;\r\n }\r\n } else {\r\n const { publishDate, content, title } = this.state;\r\n\r\n if (title.length < 1) {\r\n this.setState(\r\n { alert: { message: /* 'adawd' */ \"Titel saknas!\", type: \"error\" } },\r\n () => {\r\n setTimeout(() => {\r\n this.setState({ alert: null });\r\n }, 2000);\r\n }\r\n );\r\n return false;\r\n }\r\n }\r\n return true;\r\n };\r\n checkIfEdit = () => {\r\n const { match } = this.props;\r\n if (match.params.id) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n getArticle = () => {\r\n this.setState({ loading: true });\r\n const { match } = this.props;\r\n const articleId = match.params.id;\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: { \"Content-Type\": \"application/json\" }\r\n };\r\n fetch(`./api/article/getbyarticleid/${articleId}`, requestOptions)\r\n .then(res => res.json())\r\n .then(article => {\r\n this.setState({\r\n article,\r\n loading: false,\r\n alert: null\r\n });\r\n\r\n this.getMedia();\r\n })\r\n .catch(err => {\r\n this.setState({ errorMessage: err, media: [] });\r\n });\r\n };\r\n previewImage = res => {\r\n this.setState({ previewHeaderImage: res });\r\n };\r\n onUpload = (event, headerImage = false) => {\r\n event.preventDefault();\r\n const files = Array.from(event.target.files);\r\n let f = new FormData();\r\n if (headerImage) {\r\n if (this.state.article && this.state.article.headerImage) {\r\n const prevHeaderImage = this.state.mediaVm.find(m => {\r\n return m.url === this.state.article.headerImage;\r\n });\r\n if (prevHeaderImage) {\r\n this.onMediaDelete(prevHeaderImage.name);\r\n }\r\n }\r\n f.append(\"File\", files[0]);\r\n const reader = new FileReader();\r\n let url = reader.readAsDataURL(files[0]);\r\n reader.onloadend = () => {\r\n this.setState({\r\n previewHeaderImage: reader.result\r\n });\r\n };\r\n this.setState({ headerImageFd: f, headerFile: files[0] });\r\n return;\r\n }\r\n let mediaVm = Array.from(this.state.mediaVm);\r\n let mediaF = Array.from(event.target.files);\r\n for (let index = 0; index < files.length; index++) {\r\n mediaF.push(files[index]);\r\n mediaVm.push({\r\n name: files[index].name,\r\n type: files[index].type\r\n });\r\n }\r\n\r\n let media = Array.from(this.state.media);\r\n media = arrayHelper.concat(media, mediaF);\r\n this.setState({ media, mediaVm });\r\n };\r\n onUpload2 = (event, headerImage = false) => {\r\n event.preventDefault();\r\n const files = Array.from(event.target.files);\r\n let f = new FormData();\r\n\r\n if (headerImage) {\r\n if (this.state.article && this.state.article.headerImage) {\r\n const prevHeaderImage = this.state.mediaVm.find(m => {\r\n return m.url === this.state.article.headerImage;\r\n });\r\n if (prevHeaderImage) {\r\n this.onMediaDelete(prevHeaderImage.name);\r\n }\r\n }\r\n const reader = new FileReader();\r\n reader.readAsDataURL(files[0]);\r\n reader.onloadend = () =>\r\n this.parseImageUpload(\r\n {\r\n name: files[0].name,\r\n size: files[0].size,\r\n type: files[0].type,\r\n file: reader.result\r\n },\r\n true\r\n );\r\n f.append(\"File\", files[0]);\r\n\r\n this.setState({ headerImageFd: f });\r\n return;\r\n }\r\n let mediaVm = Array.from(this.state.mediaVm);\r\n let mediaF = Array.from(event.target.files);\r\n for (let index = 0; index < files.length; index++) {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(files[index]);\r\n if (files[0].name.includes(\"image.jpg\")) {\r\n reader.onloadend = () =>\r\n this.parseImageUpload({\r\n name: files[index].name,\r\n size: files[index].size,\r\n type: files[index].type,\r\n file: reader.result\r\n });\r\n } else {\r\n mediaF.push(files[index]);\r\n mediaVm.push({\r\n name: files[index].name,\r\n type: files[index].type\r\n });\r\n }\r\n }\r\n let media = Array.from(this.state.media);\r\n media = arrayHelper.concat(media, mediaF);\r\n this.setState({ media, mediaVm });\r\n return;\r\n };\r\n\r\n parseImageUpload = (res, headerImage = false) => {\r\n if (headerImage) {\r\n if (res.name.includes(\"image.jpg\")) {\r\n let srcOrientation = 6;\r\n resetOrientation(res.file, srcOrientation, resetBase64Image => {\r\n const file = dataURLtoFile(resetBase64Image, res.name);\r\n this.setState({\r\n headerImageFd: file,\r\n previewHeaderImage: resetBase64Image\r\n });\r\n });\r\n }\r\n\r\n if (res.type.includes(\"video\")) {\r\n this.setState({\r\n previewHeaderImage: \"https://i.stack.imgur.com/PtbGQ.png\"\r\n });\r\n } else {\r\n this.setState({ previewHeaderImage: res.file });\r\n }\r\n } else {\r\n let mediaVm = Array.from(this.state.mediaVm);\r\n let media = Array.from(this.state.media);\r\n const result = Object.assign({}, res);\r\n\r\n let srcOrientation = 6;\r\n resetOrientation(res.file, srcOrientation, resetBase64Image => {\r\n const file = dataURLtoFile(resetBase64Image, res.name);\r\n /* result.file = file; */\r\n media.push(file);\r\n this.setState({ media });\r\n });\r\n\r\n media.push(result);\r\n mediaVm.push({\r\n name: res.name,\r\n type: res.type\r\n });\r\n this.setState({ media, mediaVm });\r\n }\r\n };\r\n\r\n deleteArticle = () => {\r\n const articleId = this.state.article.articleId;\r\n const requestOptions = {\r\n method: \"DELETE\",\r\n headers: /* authHeader( */ { \"Content-Type\": \"application/json\" } /* ) */\r\n };\r\n fetch(`./api/article/${articleId}`, requestOptions)\r\n .then(res => {\r\n this.setState(\r\n {\r\n article: null,\r\n media: [],\r\n mediaVm: [],\r\n alert: {\r\n message: /* 'adawd' */ \"Artikeln togs bort!\",\r\n type: \"warning\"\r\n }\r\n },\r\n () => {\r\n setTimeout(() => {\r\n this.setState({ alert: null }, () => {\r\n history.push(\"/articles/edit\");\r\n });\r\n }, 2000);\r\n }\r\n );\r\n })\r\n .catch(err => {\r\n this.setState({ errorMessage: err, media: [] });\r\n });\r\n };\r\n update = (callback = false) => {\r\n if (callback === false && !this.validate()) {\r\n return;\r\n }\r\n this.setState({ loading: true });\r\n if (this.state.headerImageFd && callback === false) {\r\n this.uploadHeaderImage(this.state.article.articleId);\r\n }\r\n if (this.state.media.length > 0 && callback === false) {\r\n this.uploadToStorage(this.state.article.articleId);\r\n }\r\n let articleToUpdate = Object.assign({}, this.state.article);\r\n const requestOptions = {\r\n method: \"PUT\",\r\n headers: /* authHeader( */ { \"Content-Type\": \"application/json\" } /* ) */,\r\n body: JSON.stringify(articleToUpdate)\r\n };\r\n fetch(`./api/article/`, requestOptions)\r\n .then(res => res.json())\r\n .then(newArticle => {\r\n this.setState(\r\n {\r\n article: newArticle,\r\n loading: false,\r\n media: []\r\n },\r\n () => { }\r\n );\r\n })\r\n .catch(err => {\r\n this.setState({ errorMessage: err });\r\n });\r\n };\r\n getMedia = () => {\r\n const article = this.state.article;\r\n if (!article) {\r\n return;\r\n }\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: { \"Content-Type\": \"application/json\" }\r\n };\r\n fetch(\r\n `./api/files/article/${article.eventId}/?articleId=${article.articleId}`,\r\n requestOptions\r\n )\r\n .then(res => res.json())\r\n .then(files => {\r\n const newMedia = Array.from(files);\r\n const headerFile = newMedia.find(m => {\r\n return m.url === this.state.article.headerImage;\r\n });\r\n this.setState({\r\n mediaVm: newMedia,\r\n media: [],\r\n headerFile: headerFile\r\n });\r\n })\r\n .catch(err => {\r\n this.setState({ errorMessage: err });\r\n });\r\n };\r\n onMediaDelete = fileName => {\r\n const article = this.state.article;\r\n if (!article) {\r\n return;\r\n }\r\n if (!fileName) {\r\n return;\r\n }\r\n\r\n const requestOptions = {\r\n method: \"DELETE\",\r\n headers: /* authHeader( */ { \"Content-Type\": \"application/json\" } /* ) */\r\n };\r\n fetch(\r\n `./api/files/article/${article.articleId}/?fileName=${fileName.substring(\r\n fileName.lastIndexOf(\"/\") + 1\r\n )}`,\r\n requestOptions\r\n )\r\n .then(res => {\r\n let newMedia = Array.from(this.state.mediaVm);\r\n\r\n const indexOf = newMedia.indexOf(\r\n newMedia.find(m => {\r\n return m.name === fileName;\r\n })\r\n );\r\n newMedia.splice(indexOf, 1);\r\n this.setState({ mediaVm: newMedia });\r\n })\r\n .catch(err => {\r\n this.setState({ errorMessage: err });\r\n });\r\n };\r\n /* hadHeaderImage */\r\n publish2 = () => {\r\n if (!this.validate()) {\r\n return;\r\n }\r\n this.setState({ loading: true });\r\n const article = Object.assign({}, this.state);\r\n axios\r\n .post(`./api/article/`, article, {\r\n headers: { \"Content-Type\": \"application/json\" }\r\n })\r\n .then(res => {\r\n const newArticle = res.data;\r\n this.setState({ article: newArticle, loading: false });\r\n\r\n if (this.state.headerImageFd) {\r\n var apiBaseUrl = `./api/files/?articleId=${newArticle.articleId}`;\r\n\r\n axios\r\n .post(apiBaseUrl, this.state.headerImageFd, {\r\n headers: { \"Content-Type\": \"application/json\" }\r\n })\r\n .then(res => {\r\n const data = Object.assign({}, res.data);\r\n const articleToUpdate = this.state.article;\r\n articleToUpdate.headerImage = data.url;\r\n this.setState({\r\n article: articleToUpdate,\r\n previewHeaderImage: \"\",\r\n headerImageFd: null,\r\n headerImage: data.url\r\n });\r\n\r\n axios\r\n .put(\"./api/article/\", articleToUpdate, {\r\n headers: { \"Content-Type\": \"application/json\" }\r\n })\r\n .then(res => {\r\n const newArticle = res.data;\r\n const media = [...new Set(this.state.media)];\r\n let apiBaseUrl = `./api/files/?articleId=${newArticle.articleId}`;\r\n\r\n for (let index = 0; index < media.length; index++) {\r\n /* let f = new FormData();\r\n f.append(\"File\", media[index]); */\r\n axios\r\n .post(apiBaseUrl, media[index], {\r\n headers: { \"Content-Type\": \"application/json\" }\r\n })\r\n .then(res => {\r\n const data = Object.assign({}, res.data);\r\n\r\n const media = Array.from(this.state.mediaVm);\r\n const indexOf = media.indexOf(\r\n media.find(m => {\r\n return (\r\n m.name === data.name ||\r\n m.name.includes(\"image.jpg\")\r\n );\r\n })\r\n );\r\n media.splice(indexOf, 1);\r\n media.push(data);\r\n\r\n this.setState({\r\n mediaVm: media\r\n });\r\n if (index === media.length - 1) {\r\n this.setState({\r\n mediaUploaded: true\r\n });\r\n this.setState(\r\n {\r\n /* alert: { message: 'Artikeln är publicerad!', type: 'success' }, */\r\n published: true,\r\n loading: false\r\n },\r\n () => {\r\n history.push(\r\n \"/articles/edit/\" + this.state.article.articleId\r\n );\r\n /* this.publishAlert(); */\r\n }\r\n );\r\n }\r\n })\r\n .catch(err => this.setState({ loading: false }));\r\n }\r\n })\r\n .catch(err => this.setState({ loading: false }));\r\n })\r\n .catch(err => this.setState({ loading: false }));\r\n } else {\r\n const media = [...new Set(this.state.media)];\r\n var apiBaseUrl2 = `./api/files/?articleId=${newArticle.articleId}`;\r\n for (let index = 0; index < media.length; index++) {\r\n axios\r\n .post(apiBaseUrl2, media[index], {\r\n headers: { \"Content-Type\": \"application/json\" }\r\n })\r\n .then(res => {\r\n const data = Object.assign({}, res.data);\r\n\r\n const media = Array.from(this.state.mediaVm);\r\n const indexOf = media.indexOf(\r\n media.find(m => {\r\n return m.name === data.name || m.name.includes(\"image.jpg\");\r\n })\r\n );\r\n media.splice(indexOf, 1);\r\n media.push(data);\r\n\r\n this.setState({\r\n mediaVm: media\r\n });\r\n if (index === media.length - 1) {\r\n this.setState({\r\n mediaUploaded: true\r\n });\r\n this.setState(\r\n {\r\n /* alert: { message: 'Artikeln är publicerad!', type: 'success' }, */\r\n published: true,\r\n loading: false\r\n },\r\n () => {\r\n history.push(\r\n \"/articles/edit/\" + this.state.article.articleId\r\n );\r\n /* this.publishAlert(); */\r\n }\r\n );\r\n }\r\n });\r\n }\r\n }\r\n })\r\n .catch(err => this.setState({ loading: false }));\r\n };\r\n publish = () => {\r\n if (!this.validate()) {\r\n return;\r\n }\r\n this.setState({ loading: true });\r\n const article = Object.assign({}, this.state);\r\n\r\n axios\r\n .post(`./api/article/`, article, {\r\n headers: { \"Content-Type\": \"application/json\" }\r\n })\r\n .then(res => {\r\n const newArticle = res.data;\r\n this.setState({ article: newArticle });\r\n\r\n if (this.state.headerImageFd) {\r\n var apiBaseUrl = `./api/files/basic/?articleId=${newArticle.articleId}`;\r\n\r\n axios\r\n .post(apiBaseUrl, this.state.headerImageFd, {\r\n headers: { \"Content-Type\": \"multipart/form-data\" }\r\n })\r\n .then(res => {\r\n const data = Object.assign({}, res.data);\r\n const articleToUpdate = this.state.article;\r\n articleToUpdate.headerImage = data.url;\r\n this.setState({\r\n article: articleToUpdate,\r\n previewHeaderImage: \"\",\r\n headerImageFd: null,\r\n headerImage: data.url\r\n });\r\n\r\n axios\r\n .put(\"./api/article/\", articleToUpdate, {\r\n headers: { \"Content-Type\": \"application/json\" }\r\n })\r\n .then(res => {\r\n this.setState({ loading: false });\r\n const newArticle = res.data;\r\n const media = [...new Set(this.state.media)];\r\n var apiBaseUrl = `./api/files/basic/?articleId=${newArticle.articleId}`;\r\n for (let index = 0; index < media.length; index++) {\r\n let f = new FormData();\r\n f.append(\"File\", media[index]);\r\n axios\r\n .post(apiBaseUrl, f, {\r\n headers: { \"Content-Type\": \"multipart/form-data\" }\r\n })\r\n .then(res => {\r\n const data = Object.assign({}, res.data);\r\n\r\n const media = Array.from(\r\n this.state.mediaVm.filter(m => {\r\n return m.url !== undefined;\r\n })\r\n );\r\n /* const indexOf = media.indexOf(\r\n media.find(m => {\r\n return m.name.includes(data.name) || m.name.includes('image.jpg');\r\n })\r\n ); */\r\n /* media.splice(indexOf, 1); */\r\n media.push(data);\r\n\r\n this.setState({\r\n mediaVm: media\r\n });\r\n if (index === media.length - 1) {\r\n this.setState(\r\n {\r\n published: true,\r\n\r\n mediaUploaded: true\r\n },\r\n () => {\r\n history.push(\r\n \"/articles/edit/\" + this.state.article.articleId\r\n );\r\n }\r\n );\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n this.setState({ loading: false });\r\n });\r\n }\r\n });\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n this.setState({ loading: false });\r\n const media = [...new Set(this.state.media)];\r\n /* const */\r\n var apiBaseUrl2 = `./api/files/basic/?articleId=${newArticle.articleId}`;\r\n for (let index = 0; index < media.length; index++) {\r\n let f = new FormData();\r\n f.append(\"File\", media[index]);\r\n axios\r\n .post(apiBaseUrl2, f, {\r\n headers: { \"Content-Type\": \"multipart/form-data\" }\r\n })\r\n .then(res => {\r\n const data = Object.assign({}, res.data);\r\n\r\n const media = Array.from(\r\n this.state.mediaVm.filter(m => {\r\n return m.url !== undefined;\r\n })\r\n );\r\n\r\n media.push(data);\r\n\r\n this.setState({\r\n mediaVm: media\r\n });\r\n if (index === media.length - 1) {\r\n this.setState(\r\n {\r\n mediaUploaded: true,\r\n published: true\r\n },\r\n () => {\r\n history.push(\r\n \"/articles/edit/\" + this.state.article.articleId\r\n );\r\n /* this.publishAlert(); */\r\n }\r\n );\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n this.setState({ loading: false });\r\n });\r\n }\r\n }\r\n });\r\n };\r\n\r\n publishAlert = () => {\r\n setTimeout(() => {\r\n this.setState({ alert: null }, () => { });\r\n }, 2000);\r\n };\r\n uploadHeaderImage = articleId => {\r\n var apiBaseUrl = `./api/files/basic/?articleId=${articleId}`;\r\n if (this.state.headerImageFd) {\r\n axios\r\n .post(apiBaseUrl, this.state.headerImageFd, {\r\n headers: { \"Content-Type\": \"multipart/form-data\" }\r\n })\r\n .then(res => {\r\n const data = Object.assign({}, res.data);\r\n const articleToUpdate = this.state.article;\r\n articleToUpdate.headerImage = data.url;\r\n\r\n /* if (this.state.headerImageFd.type.includes('video')) {\r\n let videoHeader = 'thumbnail-' + this.state.headerImageFd;\r\n axios\r\n .post(apiBaseUrl, this.state.headerImageFd, {\r\n headers: { \"Content-Type\": \"multipart/form-data\" }\r\n });\r\n }\r\n */\r\n this.setState({\r\n article: articleToUpdate,\r\n previewHeaderImage: \"\",\r\n headerImageFd: null,\r\n headerImage: data.url,\r\n headerFile: data\r\n });\r\n this.update(true);\r\n /* return data.url; */\r\n })\r\n .catch(err => console.error(err));\r\n }\r\n };\r\n uploadToStorage = (articleId, publish = false) => {\r\n var apiBaseUrl = `./api/files/basic/?articleId=${articleId}`;\r\n const media = [...new Set(this.state.media)];\r\n for (let index = 0; index < media.length; index++) {\r\n let f = new FormData();\r\n f.append(\"File\", media[index]);\r\n axios\r\n .post(apiBaseUrl, f, {\r\n headers: { \"Content-Type\": \"multipart/form-data\" }\r\n })\r\n .then(res => {\r\n const data = Object.assign({}, res.data);\r\n const media = Array.from(\r\n this.state.mediaVm.filter(m => {\r\n return m.url !== undefined;\r\n })\r\n );\r\n /* const indexOf = media.indexOf(\r\n media.find(m => {\r\n return m.name.includes(data.name) || m.name.includes('image.jpg');\r\n })\r\n );\r\n\r\n media.splice(indexOf, 1); */\r\n media.push(data);\r\n\r\n this.setState({\r\n mediaVm: media\r\n });\r\n if (index === media.length - 1) {\r\n this.setState({\r\n mediaUploaded: true\r\n });\r\n }\r\n })\r\n .catch(err => console.error(err));\r\n }\r\n };\r\n onChange = e => {\r\n const { name, value } = e.target;\r\n\r\n if (this.state.article) {\r\n const article = Object.assign({}, this.state.article);\r\n article[name] = value;\r\n this.setState({ article });\r\n return;\r\n }\r\n this.setState({\r\n [name]: value\r\n });\r\n };\r\n backToFeedView = () => {\r\n if (this.state.article) {\r\n history.push(\"/news/articles/\" + this.state.article.eventId);\r\n } else {\r\n history.push(\"/news/articles/\" + this.props.user.eid);\r\n }\r\n };\r\n createView = () => {\r\n this.setState({\r\n headerImage: \"\",\r\n title: \"\",\r\n subtitle: \"\",\r\n content: \"\",\r\n likes: 0,\r\n publishDate: null,\r\n media: [],\r\n mediaVm: [],\r\n headerImageFd: null,\r\n errorMessage: \"\",\r\n article: null,\r\n previewHeaderImage: \"\",\r\n alert: null,\r\n loading: false,\r\n prevMediaLength: 0,\r\n published: false,\r\n mediaUploaded: false\r\n });\r\n history.push(\"/articles/edit\");\r\n };\r\n render() {\r\n const {\r\n media,\r\n article,\r\n title,\r\n subtitle,\r\n publishDate,\r\n content,\r\n headerImage,\r\n mediaVm,\r\n loading,\r\n headerFile\r\n } = this.state;\r\n return (\r\n \r\n {loading === true && \r\n {article &&\r\n article.headerImage &&\r\n !this.state.previewHeaderImage &&\r\n headerFile &&\r\n (headerFile.type.includes(\"image\") ? (\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n ))}\r\n {this.state.previewHeaderImage && (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n this.onUpload(e)}\r\n />\r\n
\r\n {/* \r\n \r\n
\r\n \r\n
*/}\r\n \r\n
\r\n \r\n {!this.state.loaded && article ? (\r\n \r\n \r\n this.update(false)}\r\n >\r\n \r\n \r\n ) : (\r\n \r\n \r\n
\r\n {this.state.alert && (\r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n const { user } = state.authentication;\r\n return {\r\n user,\r\n alert: state.alert,\r\n systemLabel: state.systemLabel\r\n };\r\n}\r\nexport default connect(mapStateToProps)(ArticleEditor);\r\n","import React from \"react\";\r\n\r\nexport const Space = (props) => {\r\n const { settings } = props;\r\n const { divider } = settings;\r\n return (\r\n \r\n {divider ?
\r\n
\r\n );\r\n } else if (ml.startsWith(\"L\") && showLogo && logoSource) {\r\n const imageStyle = {\r\n height: logoRef.current?.naturalHeight > logoRef.current?.naturalWidth ? \"100%\" : undefined,\r\n width: logoRef.current?.naturalHeight < logoRef.current?.naturalWidth ? \"100%\" : undefined,\r\n aspectRatio: `${logoRef.current?.naturalWidth} / ${logoRef.current?.naturalHeight}`,\r\n };\r\n const wrapStyle = {\r\n aspectRatio: `${logoRef.current?.naturalWidth} / ${logoRef.current?.naturalHeight}`,\r\n width: `calc((100vw) * (${cols} / 12))`,\r\n };\r\n return (\r\n \r\n {logoLink ? (\r\n
\r\n \r\n ) : (\r\n
\r\n )}\r\n
None
;\r\n\r\n return (\r\n \r\n {menuItems\r\n ?.filter((m) => !m.parentMenuId)\r\n .sort((a, b) => a.sortOrder - b.sortOrder)\r\n .map((m) => {\r\n const { url, label, target, menuId } = m;\r\n return (\r\n
\r\n \r\n {menuItems.find((mi) => mi.parentMenuId == menuId) ? (\r\n <>\r\n handleClick(e, menuId)}\r\n >\r\n {label}\r\n handleClose(menuId)}\r\n >\r\n {menuItems\r\n .filter((mi) => mi.parentMenuId == menuId)\r\n .sort((a, b) => a.sortOrder - b.sortOrder)\r\n .map((mi) => (\r\n \r\n navigate(mi.url, mi.target)}>\r\n {mi.label}\r\n \r\n \r\n ))}\r\n \r\n \r\n ) : (\r\n navigate(url, target)} className={`cms-menu-item ${contentLayout.layoutCode == m.layoutCode ? \"active\" : \"\"}`}>\r\n {label}\r\n
\r\n )}\r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n};\r\n\r\nconst MobileMenu = ({ menuItems = [], match, navigate, cssId, contentLayout, scopedLayout, logoLink, mobileMenuPos, showLogo, logoSrc }) => {\r\n const [drawerOpen, setDrawerOpen] = useState(false);\r\n const [openMenuOptionId, setOpenMenuOptionId] = useState(null);\r\n\r\n const toggleMenuOption = (id) => setOpenMenuOptionId(openMenuOptionId != id ? id : null);\r\n\r\n const toggleDrawer = (event) => {\r\n setDrawerOpen(!drawerOpen);\r\n };\r\n\r\n const logoRef = useRef();\r\n const imageStyle = {\r\n height: logoRef.current?.naturalHeight > logoRef.current?.naturalWidth ? \"100%\" : undefined,\r\n width: logoRef.current?.naturalHeight < logoRef.current?.naturalWidth ? \"100%\" : undefined,\r\n aspectRatio: `${logoRef.current?.naturalWidth} / ${logoRef.current?.naturalHeight}`,\r\n };\r\n const wrapStyle = {\r\n aspectRatio: `${logoRef.current?.naturalWidth} / ${logoRef.current?.naturalHeight}`,\r\n };\r\n\r\n return (\r\n \r\n {mobileMenuPos === \"RIGHT\" ? (\r\n \r\n {showLogo && logoSrc ? (\r\n
\r\n {logoLink ? (\r\n
\r\n \r\n ) : (\r\n
\r\n )}\r\n
\r\n ) : null}\r\n
toggleDrawer()} aria-haspopup=\"true\">\r\n \r\n {mobileMenuPos === \"LEFT\" ? (\r\n \r\n {showLogo && logoSrc ?
: null}\r\n
toggleDrawer()}>\r\n toggleDrawer()} onKeyDown={() => toggleDrawer()}>\r\n
\r\n {menuItems\r\n ?.filter((m) => !m.parentMenuId)\r\n ?.map((item, index) => {\r\n const { url, target } = item;\r\n return menuItems.find((mi) => mi.parentMenuId == item.menuId) ? (\r\n \r\n {\r\n e.stopPropagation();\r\n toggleMenuOption(item.menuId);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n {openMenuOptionId == item.menuId ? (\r\n \r\n {menuItems\r\n .filter((mi) => mi.parentMenuId == item.menuId)\r\n .map((mi) => {\r\n return (\r\n navigate(mi.url, mi.target)}\r\n className={`cms-menu-item ${scopedLayout ? scopedLayout.layoutCode == mi.layoutCode : contentLayout.layoutCode == mi.layoutCode ? \"active\" : \"\"}`}\r\n button\r\n key={`mobile_${mi.url}}_${mi.menuId}`}\r\n >\r\n
\r\n ) : null}\r\n \r\n ) : (\r\n navigate(url, target)} className={`cms-menu-item ${contentLayout.contentLayoutId == item.layoutId ? \"active\" : \"\"}`} button key={`mobile_${item.url}}_${item.menuId}`}>\r\n \r\n );\r\n })}\r\n
\r\n
\r\n \r\n );\r\n}; //#BTHAEEO.content-wrapper .cms-menu .cms-menu-item\r\n","import React from \"react\";\r\n\r\nexport const Asterisk = (props) => * ;\r\n","import { useEffect } from \"react\";\r\n\r\nexport default function useOnClickOutside(refs, handler, bool) {\r\n useEffect(() => {\r\n if (bool !== undefined && !bool) return () => null;\r\n const listener = (event) => {\r\n if (refs.some((r) => !r.current) || refs.some((r) => r.current.contains(event.target))) {\r\n return;\r\n }\r\n handler(event);\r\n };\r\n document.addEventListener(\"mousedown\", listener);\r\n document.addEventListener(\"touchstart\", listener);\r\n return () => {\r\n document.removeEventListener(\"mousedown\", listener);\r\n document.removeEventListener(\"touchstart\", listener);\r\n };\r\n }, [refs, handler, bool]);\r\n}\r\n","import React, { useState, useEffect, useRef, useMemo, Fragment, useCallback } from \"react\";\r\nimport axios from \"axios\";\r\nimport ArrowDownIcon from \"@material-ui/icons/KeyboardArrowDown\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport { Combobox, Transition } from \"@headlessui/react\";\r\nimport SystemLabel from \"../../components/SystemLabel\";\r\nimport useOnClickOutside from \"../../hooks/onClickOutside\";\r\n\r\nconst includes = (source, target) => source?.toLowerCase()?.includes(target.toLowerCase());\r\n\r\nexport const CountrySelect = observer((props) => {\r\n const containerRef = useRef(null);\r\n const [countries, setCountries] = useState([]);\r\n const [query, setQuery] = useState(\"\");\r\n const [open, setOpen] = useState(false);\r\n const { lang, eventId, selectGrid, value, onChange, useCode = false, countryCode, loaded, valid = undefined, preselected } = props;\r\n\r\n useOnClickOutside([{ current: containerRef.current }], () => setOpen(false), open);\r\n\r\n useEffect(() => {\r\n if (lang && eventId) getCountries();\r\n }, [lang, eventId]);\r\n\r\n useEffect(() => {\r\n if (typeof loaded === \"function\") {\r\n if (countries.length > 0 && loaded) loaded(true);\r\n if (countries.length > 0 && (value || countryCode) && value) {\r\n const country = countries.find((t) => t.countryCode === countryCode || t.value == value);\r\n onChange(country?.value, country);\r\n }\r\n }\r\n }, [value, countries, countryCode, loaded]);\r\n\r\n const getCountries = useCallback(async () => {\r\n try {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: { \"Content-Type\": \"application/json\" },\r\n };\r\n const { data } = await axios.get(`./api/country/getselection/${eventId}/${lang}`, requestOptions);\r\n const countryList = [{ value: 0, label: \"\", europeCountry: null, nordicCountry: null, countryId: 0 }, ...data].map((c, index) =>\r\n index > 0\r\n ? {\r\n value: c.countryId,\r\n label: lang == \"swe\" || lang === undefined ? c.nameSwe : c.nameInt,\r\n europeCountry: c.europeCountry === null ? false : c.europeCountry,\r\n nordicCountry: c.nordicCountry === null ? false : c.nordicCountry,\r\n swedishCountry: c.nameInt == \"Sweden\" ? true : false,\r\n countryCode: c.code,\r\n name: c.nameInt,\r\n }\r\n : c\r\n );\r\n setCountries(countryList);\r\n } catch (error) {\r\n console.error(error);\r\n }\r\n }, [useCode]);\r\n\r\n const filteredCountries = useMemo(() => {\r\n if (selectGrid && selectGrid?.only?.length) {\r\n return countries.filter(({ name }) => includes(name, query) && includes(selectGrid.exceptions, name));\r\n }\r\n if (query === \"\") return [...countries]?.splice(0, 10);\r\n return countries.filter(({ label }) => includes(label, query));\r\n }, [selectGrid, countries, query]);\r\n\r\n const selectedCountry = useMemo(() => {\r\n let found = countries?.find(({ value: _value }) => _value === value);\r\n if (!found && preselected) {\r\n let precountry = countries.find((x) => x.value == preselected);\r\n if (!precountry) return found;\r\n found = precountry.value;\r\n //console.log(\"pciutn\", precountry, found, value);\r\n //onChange(precountry.value, precountry, false);\r\n }\r\n return found;\r\n }, [countries, value, preselected]);\r\n\r\n useEffect(() => {\r\n if (preselected && selectedCountry && (preselected==selectedCountry || preselected==selectedCountry?.value)) {\r\n let precountry = countries.find((x) => x.value == preselected);\r\n if (precountry && precountry.value) {\r\n //console.log(precountry.value, selectedCountry);\r\n onChange(precountry.value, precountry, false);\r\n }\r\n } else {\r\n }\r\n }, [selectedCountry, preselected]);\r\n\r\n const handleChange = useCallback(\r\n (country) => {\r\n onChange(country.value, country, false);\r\n setOpen(false);\r\n },\r\n [onChange]\r\n );\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n
setOpen((prev) => !prev)}\r\n onChange={(event) => setQuery(event.target.value)}\r\n displayValue={(props) => props?.label ?? \"\"}\r\n className=\"cms-field person form-control\"\r\n style={{ marginLeft: 0, border: valid === false ? \"1px solid #d53443\" : undefined }}\r\n />\r\n setOpen((prev) => !prev)}>\r\n \r\n \r\n
setQuery(\"\")}>\r\n \r\n {filteredCountries?.length === 0 ? (\r\n \r\n
\r\n ) : (\r\n filteredCountries?.map((country) => (\r\n \r\n {({ selected }) => {country.label} }\r\n \r\n ))\r\n )}\r\n \r\n \r\n
\r\n
{`#${name}#`} ;\r\n return {label.value} ;\r\n});\r\nexport default EventLabel;\r\n\r\nexport const GetEventLabelValueFn = ({ name = \"\", groupName = \"\" }, eventLabels, environment, updateEventLabels) => {\r\n groupName = groupName.toUpperCase();\r\n const label = eventLabels[groupName] ? eventLabels[groupName][name] : null;\r\n const { eventId, lang } = environment;\r\n if (typeof eventLabels[groupName] !== \"object\" && eventLabels[groupName] !== \"Loading\") {\r\n getGroup();\r\n } else if (typeof eventLabels[groupName] === \"object\") {\r\n if (!label && label !== \"Loading\") createLabel();\r\n }\r\n function getGroup() {\r\n runInAction(() => {\r\n eventLabels[groupName] = \"Loading\";\r\n });\r\n Axios.get(`./api/eventLabel/getGroup/${eventId}?groupName=${groupName}&languageCode=${lang}`).then(({ data }) => {\r\n const groupData = {};\r\n data.map((d) => {\r\n groupData[d.name] = d;\r\n });\r\n if (typeof updateEventLabels === \"function\") {\r\n updateEventLabels(groupName, groupData);\r\n }\r\n });\r\n }\r\n function createLabel() {\r\n runInAction(() => {\r\n eventLabels[groupName][name] = \"Loading\";\r\n });\r\n if (!name) return;\r\n Axios.get(`./api/eventLabel/getLabel/${eventId}?groupName=${groupName}&labelName=${name}&languageCode=${lang}`).then(({ data }) => {\r\n const groupData = eventLabels[groupName];\r\n groupData[name] = data;\r\n if (typeof updateEventLabels === \"function\") {\r\n updateEventLabels(groupName, groupData);\r\n }\r\n });\r\n }\r\n return label && label !== \"Loading\" ? label.value : `#${name}#`;\r\n};\r\n","import { Combobox, Transition } from \"@headlessui/react\";\r\nimport { SearchOutlined } from \"@material-ui/icons\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport React, { useState, useContext, useMemo, Fragment, useRef, useEffect } from \"react\";\r\nimport { useCallback } from \"react\";\r\nimport { Input, InputGroup, InputGroupAddon, InputGroupText } from \"reactstrap\";\r\nimport { labelHelper } from \"../../helpers/labelHelper\";\r\nimport Store from \"../store/Store\";\r\nimport SystemLabel from \"./SystemLabel\";\r\n\r\nfunction PhoneNumberField(props) {\r\n const inputRef = useRef(null);\r\n const [countryCode, setCountryCode] = useState(\"se\");\r\n const [prefix, setPrefix] = useState(\"46\");\r\n const [countryCodeSelectOpen, setCountryCodeSelectOpen] = useState(false);\r\n const { settings, valid, invoice, ...inputProps } = props;\r\n\r\n const handleChange = useCallback(\r\n (e) => {\r\n if (settings?.showCountryCodeSelector) {\r\n if (!e.target.value?.startsWith(`+${prefix}`) && inputProps?.value) {\r\n const newValue = e.target.value?.split(\" \");\r\n return inputProps.onChange(`+${prefix} ${newValue?.[1] ?? \"\"}`);\r\n }\r\n const newValue = e.target.value?.replace(`+${prefix}`, \"\").replace(/[^0-9_ +-]/g, \"\");\r\n inputProps.onChange(`+${prefix} ${newValue.trimStart()}`);\r\n } else if (invoice) {\r\n inputProps.onChange(e.target.value);\r\n } else {\r\n const newValue = e.target.value?.replace(/[^0-9_ +-]/g, \"\");\r\n inputProps.onChange(newValue);\r\n }\r\n },\r\n [prefix, inputProps, settings?.showCountryCodeSelector]\r\n );\r\n\r\n useEffect(() => {\r\n if (!inputProps?.value && settings?.showCountryCodeSelector) {\r\n inputProps.onChange(`+${prefix}`);\r\n }\r\n }, [inputProps?.value, inputProps?.onChange, prefix, settings?.showCountryCodeSelector]);\r\n\r\n const handleCodeChange = useCallback(\r\n ({ value, code }) => {\r\n inputProps.onChange(inputProps.value.replace(/\\+[^\\s]+/g, `+${value}`));\r\n setPrefix(value);\r\n setCountryCode(code);\r\n setCountryCodeSelectOpen(false);\r\n },\r\n [inputProps]\r\n );\r\n\r\n const inputStyle = inputRef.current ? window.getComputedStyle(inputRef.current) : {};\r\n\r\n if (settings?.showCountryCodeSelector) {\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n setCountryCodeSelectOpen((prev) => !prev)}>\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
onChange(country)}>\r\n \r\n
\r\n setQuery(event.target.value)} style={{ border: 0, background: \"#fff\", width: \"100%\" }} />\r\n
\r\n
setQuery(\"\")}>\r\n \r\n {filteredCountries?.length === 0 ? (\r\n \r\n
\r\n ) : (\r\n filteredCountries?.map(({ code, value, label }) => (\r\n \r\n {({ selected }) => (\r\n \r\n \r\n )}\r\n \r\n ))\r\n )}\r\n \r\n \r\n
\r\n
\r\n {!noLabel && !settings?.hideLabel ? (\r\n \r\n {staticLabel ? (\r\n
\r\n {label && \r\n ) : (\r\n
\r\n {label}\r\n {required ? \r\n )}\r\n {subLabel ? (\r\n
\r\n {subLabel}\r\n \r\n ) : null}\r\n
\r\n {showConfirmInput ? \r\n \r\n \r\n );\r\n};\r\nexport default CustomInput;\r\n","export const calculateModules11 = (id) => {\r\n var to = 10;\r\n var multiply = [4, 3, 2, 7, 6, 5, 4, 3, 2, 1];\r\n var sum = 0;\r\n var pos = 0;\r\n var i;\r\n for (i = 0; i < to; i++) {\r\n var x = id.substring(pos, pos + 1);\r\n var intValue = parseInt(x, 10);\r\n sum += intValue * multiply[i];\r\n if (i === 5) {\r\n pos++; //Ignore dash\r\n }\r\n pos++;\r\n }\r\n return sum;\r\n }\r\n export const getFullYear = (id) => {\r\n var year = parseInt(id.substring(4, 6), 10);\r\n var digit8 = parseInt(id.substring(7, 8), 10);\r\n var fullYear = 0;\r\n switch (digit8) {\r\n case 0:\r\n case 1:\r\n case 2:\r\n case 3:\r\n fullYear = 1900 + year; \r\n break;\r\n case 4:\r\n if (year < 37) {\r\n fullYear = 2000 + year;\r\n }\r\n else {\r\n fullYear = 1900 + year;\r\n }\r\n break;\r\n case 5:\r\n case 6:\r\n case 7:\r\n case 8:\r\n if (year > 57) {\r\n fullYear = 1800 + year;\r\n }\r\n else {\r\n fullYear = 2000 + year;\r\n }\r\n break;\r\n case 9:\r\n if (year > 36) {\r\n fullYear = 1900 + year;\r\n }\r\n else {\r\n fullYear = 2000 + year;\r\n }\r\n break;\r\n }\r\n return fullYear+\"-\"+ id.substring(2, 4) +\"-\"+ id.substring(0,2);\r\n };","import { calculateModules11, getFullYear } from \"./inputValidator.dnk.helper\";\r\n\r\nexport const invoiceFieldValidator = (input, type, countryCode = null, data = null) => {\r\n let isValid = true;\r\n if (!input) input = \"\";\r\n switch (type) {\r\n case \"Name\":\r\n case \"Address1\":\r\n if (input.length === 0) isValid = false;\r\n break;\r\n case \"Telephone1\":\r\n case \"Ref\":\r\n // if(!data || input.length===0) isValid = false;\r\n // else if (input.length>0){\r\n // isValid = data.test(String(input));\r\n // }\r\n break;\r\n case \"Zip\":\r\n if (input.length === 0) isValid = false;\r\n else if (input.length > 0) {\r\n isValid = inputValidator(input, \"zip\");\r\n }\r\n break;\r\n case \"City\":\r\n if (input.length === 0) isValid = false;\r\n break;\r\n case \"OrgNo\":\r\n if (input.length === 0) isValid = false;\r\n else if (input.length > 0) {\r\n isValid = validateOrgno(input, countryCode);\r\n }\r\n break;\r\n case \"GLN\":\r\n if (input.length === 0) isValid = false;\r\n else if (input.length > 0) {\r\n isValid = validateGln(input);\r\n }\r\n break;\r\n case \"Email\":\r\n if (input.length === 0) isValid = false;\r\n else if (input.length > 0) {\r\n isValid = inputValidator(input, \"email\");\r\n }\r\n break;\r\n case \"CountryCode\":\r\n if (input.length === 0) isValid = false;\r\n break;\r\n default:\r\n isValid = true;\r\n }\r\n return isValid;\r\n};\r\n\r\nconst emailPattern = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{1,4}$/;\r\nconst phonePattern = /[^0-9+ \\-()]/;\r\nconst zipPatten = /^[\\d\\s]*$/;\r\n\r\nexport function inputValidator(input, type) {\r\n switch (type) {\r\n case \"zip\":\r\n return true;\r\n case \"numeric\":\r\n return !isNaN(input);\r\n case \"email\":\r\n return emailPattern.test(String(input).toLowerCase());\r\n case \"telephone\":\r\n case \"phone\":\r\n return !phonePattern.test(String(input).toLowerCase());\r\n default:\r\n return true;\r\n }\r\n}\r\n\r\nexport function validateGln(input) {\r\n // Test string for correct length\r\n if (!input) {\r\n return false;\r\n }\r\n input = input.replace(/[\\s\\-]/g, \"\");\r\n if (isNaN(input)) {\r\n return false;\r\n }\r\n // let data = input.split(\"\");\r\n if (input.length != 13) {\r\n return false;\r\n }\r\n // Test string for being numeric\r\n for (let i = 0; i < input.length; i++) {\r\n if (input.charCodeAt(i) < 0x30 || input.charCodeAt(i) > 0x39) return false;\r\n }\r\n let weight = 1;\r\n let sum = 0;\r\n for (let i = 0; i < input.length - 1; i++) {\r\n sum += parseInt(input.charAt(i), 10) * weight;\r\n weight = (weight + 2) % 4;\r\n }\r\n let remainder = (10 - (sum % 10)) % 10;\r\n return input.charAt(input.length - 1) == 0 + remainder;\r\n}\r\n\r\nexport function validateOrgno(input, countryCode, company = true) {\r\n if (!input) {\r\n return false;\r\n }\r\n input = input.replace(/[\\s\\-]/g, \"\");\r\n if (isNaN(input)) {\r\n return false;\r\n }\r\n switch (countryCode) {\r\n case \"NOR\":\r\n //norweigan company\r\n if (input.length == 9) {\r\n let gyldig = false;\r\n let kontrollsiffer = 0;\r\n let o = input.split(\"\").map((i) => {\r\n return parseInt(i, 10);\r\n });\r\n if (input.length == 9) {\r\n let sum = o[0] * 3 + o[1] * 2 + o[2] * 7 + o[3] * 6 + o[4] * 5 + o[5] * 4 + o[6] * 3 + o[7] * 2;\r\n let rest = sum % 11;\r\n let kontrollsiffer = rest === 0 ? 0 : 11 - rest;\r\n\r\n return rest != 1 && kontrollsiffer == o[8];\r\n } else {\r\n return false;\r\n }\r\n }\r\n //norweigan person\r\n else if (input.length == 11) {\r\n if (input.length != 11) return false;\r\n const staticSequenceFirstCheckDigit = [3, 7, 6, 1, 8, 9, 4, 5, 2, 1];\r\n const staticSequenceSecondCheckDigit = [5, 4, 3, 2, 7, 6, 5, 4, 3, 2, 1];\r\n const elevenDigitsArray = input.split(\"\").map((x) => parseInt(x));\r\n\r\n const isValidCheckDigit = (staticSequence, digits) => {\r\n var productSum = staticSequence.reduce((acc, value, index) => acc + value * digits[index], 0);\r\n\r\n return productSum % 11 === 0;\r\n };\r\n\r\n return isValidCheckDigit(staticSequenceFirstCheckDigit, elevenDigitsArray) && isValidCheckDigit(staticSequenceSecondCheckDigit, elevenDigitsArray);\r\n } else {\r\n return false;\r\n }\r\n case \"SWE\":\r\n //swedish person and company\r\n // Check valid length & form\r\n let numdigits = input.length;\r\n if (input.indexOf(\"-\") === -1) {\r\n if (input.length === 10) {\r\n input = input.slice(0, 6) + \"-\" + input.slice(6);\r\n } else {\r\n input = input.slice(0, 8) + \"-\" + input.slice(8);\r\n }\r\n }\r\n if (!input.match(/^(\\d{2})(\\d{2})(\\d{2})\\-(\\d{4})|(\\d{4})(\\d{2})(\\d{2})\\-(\\d{4})$/)) {\r\n return false;\r\n }\r\n // Clean input\r\n input = input.replace(\"-\", \"\");\r\n if (input.length === 12) {\r\n input = input.substring(2);\r\n }\r\n let sum = 0;\r\n // Check luhn algorithm\r\n for (let i = 0; i < input.length; i = i + 1) {\r\n let digit = parseInt(input.charAt(i), 10);\r\n if (i % 2 === input.length % 2) {\r\n digit *= 2;\r\n }\r\n if (digit > 9) {\r\n digit -= 9;\r\n }\r\n sum += digit;\r\n }\r\n return sum % 10 === 0;\r\n default:\r\n return true;\r\n }\r\n}\r\n\r\nexport function hasOrgNoValidation(countryCode) {\r\n switch (countryCode) {\r\n // case \"DNK\":\r\n case \"NOR\":\r\n case \"SWE\":\r\n return true;\r\n default:\r\n return false;\r\n }\r\n}\r\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport CustomInput from \"../../components/CustomInput\";\r\nimport { deepClone, toCamelCase } from \"../../../helpers/objectHelper\";\r\nimport { inputValidator } from \"../../helpers/inputValidator.helper\";\r\nimport { runInAction, toJS } from \"mobx\";\r\nimport Axios from \"axios\";\r\nimport { usePrevious } from \"../../helpers/usePrevious\";\r\n\r\nconst Field = observer((props) => {\r\n const inputTimerRef = useRef(null);\r\n const { settings, environment, fields, activePersonNo, updateOrder, contentModuleId, pages, validations, checkConditions, contentLayoutModuleId, conditions, current, validate } = props;\r\n const { fieldId, prefixClassName, type, readonly, required, hidden, validationType, fieldType, minLength, confirmInput, requireUniqueEmail = false, disableChangeLock = false } = settings;\r\n\r\n const orders = toJS(props.orders);\r\n\r\n const field = fields.find((f) => f.fieldId === settings.fieldId);\r\n\r\n const validity = useMemo(() => validations.find((v) => v.id == contentModuleId), [validations]);\r\n\r\n const [isConfirmValid, setIsConfirmValid] = useState(!confirmInput);\r\n const [isEmailUnique, setIsEmailUnique] = useState(true);\r\n\r\n const fValue = useMemo(() => {\r\n if (field?.type) {\r\n const val = toJS(orders)[activePersonNo]?.[toCamelCase(field?.type)]?.[toCamelCase(field.name == \"CountryCode\" ? \"CountryId\" : field.name)];\r\n return val ?? \"\";\r\n }\r\n return \"\";\r\n }, [orders, activePersonNo]);\r\n\r\n const [confirmInputValue, setConfirmInputValue] = useState(fValue);\r\n const previousValue = usePrevious(fValue);\r\n\r\n useEffect(() => {\r\n if (previousValue !== fValue) {\r\n if (inputTimerRef.current) {\r\n clearTimeout(inputTimerRef.current);\r\n inputTimerRef.current = null;\r\n }\r\n inputTimerRef.current = setTimeout(checkRegisteredEmail, 500);\r\n }\r\n if (confirmInput) compareConfirmInput();\r\n validateField();\r\n }, [confirmInputValue, fValue, activePersonNo, isConfirmValid, isEmailUnique]);\r\n\r\n useEffect(() => {\r\n setConfirmInputValue(fValue ?? \"\");\r\n }, [activePersonNo]);\r\n\r\n const handleValueChange = (value) => {\r\n let newValue = value;\r\n\r\n if (!field?.type) return;\r\n\r\n let order = orders[activePersonNo];\r\n let newOrder = deepClone(order);\r\n let type = newOrder[toCamelCase(field.type)];\r\n let newType = undefined;\r\n if (!type) {\r\n newType = {};\r\n } else {\r\n newType = deepClone(type);\r\n }\r\n if (field.name == \"CountryCode\") newType[toCamelCase(\"CountryId\")] = newValue;\r\n else newType[toCamelCase(field.name)] = newValue;\r\n newOrder[toCamelCase(field.type)] = newType;\r\n updateOrder(newOrder);\r\n checkConditions(contentLayoutModuleId);\r\n };\r\n\r\n const compareConfirmInput = () => {\r\n if (fValue.toLowerCase().trim() === confirmInputValue.toLowerCase().trim()) {\r\n if (!isConfirmValid) setIsConfirmValid(true);\r\n } else {\r\n if (isConfirmValid) setIsConfirmValid(false);\r\n }\r\n };\r\n\r\n const checkRegisteredEmail = async () => {\r\n if (requireUniqueEmail && fieldType.toLowerCase() == \"email\" && fValue.length > 0) {\r\n try {\r\n const { data } = await Axios.get(`./api/attendee/emailcheck/${environment.eventId}?email=${encodeURIComponent(fValue.toLowerCase().trim())}`);\r\n if (data.success) setIsEmailUnique(!data.regExists);\r\n } catch (error) {\r\n console.error(error);\r\n }\r\n } else {\r\n setIsEmailUnique(true);\r\n }\r\n };\r\n\r\n const validateField = () => {\r\n let input = fValue;\r\n let isValid = true;\r\n let reason = \"\";\r\n if ([\"FIRSTNAME\", \"LASTNAME\", \"EMAIL\"].includes(fieldType.toUpperCase()) && fValue.length === 0) {\r\n isValid = false;\r\n reason = \"required\";\r\n } else if (readonly || hidden) {\r\n isValid = true;\r\n reason = \"\";\r\n } else if (required === true && input.length === 0) {\r\n isValid = false;\r\n reason = \"required\";\r\n } else if (minLength > 0 && input.length < minLength) {\r\n isValid = false;\r\n reason = \"minLength\";\r\n } else if (!isConfirmValid) {\r\n isValid = false;\r\n reason = \"confirmNotMatching\";\r\n } else if (!isEmailUnique) {\r\n isValid = false;\r\n reason = \"emailNotUnique\";\r\n } else if (validationType !== \"none\") {\r\n isValid = inputValidator(input, validationType);\r\n reason = validationType;\r\n }\r\n\r\n runInAction(() => {\r\n if (validity) {\r\n validity.valid = isValid;\r\n validity.reason = reason;\r\n }\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (orders[activePersonNo]?.badgeNo) {\r\n validateField();\r\n }\r\n }, [orders, validateField]);\r\n\r\n const isValid = useMemo(() => {\r\n if ([\"email\", \"firstname\", \"lastname\"].includes(fieldType.toLowerCase()) && !disableChangeLock) return true;\r\n if (fValue.length > 0 && validity?.valid === false) return false;\r\n else if (fValue.length > 0 && validity?.valid === true) return true;\r\n else if (validate && validations.find((v) => v.id === contentModuleId)?.valid === false) return false;\r\n return undefined;\r\n }, [validity, validate, validations, disableChangeLock, fValue, validateField, contentModuleId, fieldType]);\r\n\r\n const isChangeLocked = useMemo(() => {\r\n if ([\"email\", \"firstname\", \"lastname\"].includes(fieldType.toLowerCase()) && !disableChangeLock && orders?.[0]?.badgeNo) return true;\r\n return false;\r\n }, [disableChangeLock, orders, fieldType]);\r\n\r\n if (hidden) return null;\r\n return (\r\n 0 || required || [\"email\", \"firstname\", \"lastname\"].includes(fieldType.toLowerCase())}\r\n lang={environment.lang}\r\n eventId={environment.eventId}\r\n showConfirmInput={confirmInput}\r\n settings={settings}\r\n confirmInputValue={confirmInputValue}\r\n confirmInputOnChange={(e) => setConfirmInputValue(e.target.value)}\r\n valid={isValid}\r\n onChange={(e) => handleValueChange(e.target ? e.target.value : e)}\r\n label={fields.find((f) => f.fieldId == fieldId)?.fieldLanguage?.find((fl) => fl.languageCode == environment.lang)?.label || settings.defaultLabel}\r\n subLabel={fields.find((f) => f.fieldId == fieldId)?.fieldLanguage?.find((fl) => fl.languageCode == environment.lang)?.subLabel}\r\n />\r\n );\r\n});\r\n\r\nexport default Field;\r\n","export function getTimeDiff(date1, timeSpan) {\r\n var startDate = new Date(date1);\r\n var seconds = (startDate.getTime() + timeSpan - startDate.getTime()) / 1000;\r\n return seconds;\r\n}\r\n\r\nexport function compareDates(time) {\r\n var endTime = new Date(time);\r\n if (+endTime <= +new Date()) return true;\r\n return false;\r\n}\r\n","import { observer } from \"mobx-react-lite\";\r\nimport React, { useEffect, useState, useRef } from \"react\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\nexport const Countdown = observer((props) => {\r\n const [time, setTime] = useState(\"\");\r\n const [clear, setClear] = useState(false);\r\n\r\n const timerRef = useRef();\r\n const { settings, environment, small, active } = props;\r\n const { datetime, timerShadow = false, showZeroes = false, showTitle = false } = settings;\r\n const { eventId, lang } = environment;\r\n useEffect(() => {\r\n const t = new Date();\r\n timerRef.current = setInterval(() => countdown(t.setSeconds(t.getSeconds() + 1)), 1000);\r\n return () => clearInterval(timerRef.current);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n const t = new Date();\r\n timerRef.current = setInterval(() => countdown(t.setSeconds(t.getSeconds() + 1)), 1000);\r\n return () => clearInterval(timerRef.current);\r\n }, [settings.datetime]);\r\n\r\n useEffect(() => {\r\n if (clear) {\r\n props.checkHeights();\r\n }\r\n }, [clear]);\r\n\r\n const countdown = (currentTime) => {\r\n if (clear) return;\r\n let secondsLeft = (new Date(datetime) - new Date(currentTime)) / 1000;\r\n var delta = Math.abs(datetime - currentTime) / 1000;\r\n var days = Math.floor(delta / 86400);\r\n delta -= days * 86400;\r\n var hours = Math.floor(delta / 3600) % 24;\r\n delta -= hours * 3600;\r\n var minutes = Math.floor(delta / 60) % 60;\r\n delta -= minutes * 60;\r\n var seconds = Math.floor(delta % 60);\r\n\r\n if (secondsLeft <= 0) {\r\n setTime(null);\r\n setClear(true);\r\n return;\r\n }\r\n setTime({\r\n days: days < 10 && days > 0 ? \"0\" + days : days,\r\n hours: hours < 10 && hours > 0 ? \"0\" + hours : hours,\r\n minutes: minutes < 10 && minutes > 0 ? \"0\" + minutes : minutes,\r\n seconds: seconds < 10 && seconds > 0 ? \"0\" + seconds : seconds,\r\n });\r\n };\r\n\r\n if (clear) return null;\r\n\r\n if (!time) return null;\r\n const { days, hours, minutes, seconds } = time;\r\n\r\n if (small)\r\n return (\r\n \r\n {days} {hours}:{minutes}:{seconds}\r\n \r\n );\r\n return (\r\n \r\n {showTitle ? (\r\n \r\n ) : null}\r\n \r\n {showZeroes || days ? (\r\n
\r\n
{days}
\r\n
\r\n
\r\n
\r\n ) : null}\r\n {showZeroes || days || hours ? (\r\n
\r\n
{hours}
\r\n
\r\n
\r\n
\r\n ) : null}\r\n {showZeroes || days || hours || minutes ? (\r\n
\r\n
{minutes}
\r\n
\r\n
\r\n
\r\n ) : null}\r\n {showZeroes || days || hours || minutes || seconds ? (\r\n
\r\n
{seconds}
\r\n
\r\n
\r\n
\r\n ) : null}\r\n
\r\n );\r\n});\r\n","import { Tooltip } from \"@material-ui/core\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport React, { useEffect, useRef, useState } from \"react\";\r\nimport { compareDates } from \"../../helpers/date.helper\";\r\nimport { convertUrl } from \"../../helpers/url.helper\";\r\nimport { Countdown } from \"../Countdown/Countdown\";\r\n\r\nexport const Button = observer((props) => {\r\n const [disabled, setDisabled] = useState(true);\r\n const { settings, environment, orders } = props;\r\n const { link, texts, target, useTimer, startDateTime, endDateTime, timerShadow, showZeroes, showTitle, hidden, showTooltip = false } = settings;\r\n const timerRef = useRef();\r\n useEffect(() => {\r\n buttonTimeHandler();\r\n return () => {\r\n if (timerRef.current) {\r\n clearInterval(timerRef.current);\r\n }\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n buttonTimeHandler();\r\n }, [startDateTime, endDateTime]);\r\n\r\n const navigate = () => (link ? window.open(convertUrl(link, orders !== undefined && orders.length > 0 ? orders[0] : null), target || \"_blank\") : null);\r\n const buttonTimeHandler = () => {\r\n if (!useTimer) {\r\n return setDisabled(false);\r\n }\r\n\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n\r\n if (startDateTime || endDateTime) {\r\n if (startDateTime && disabled && compareDates(startDateTime)) {\r\n if (!endDateTime || (endDateTime && +new Date() < +new Date(endDateTime))) {\r\n setDisabled(false);\r\n }\r\n } else if (endDateTime && +new Date() > +new Date(endDateTime)) {\r\n setDisabled(true);\r\n } else {\r\n timerRef.current = setInterval(() => {\r\n if (startDateTime && disabled && compareDates(startDateTime)) {\r\n if (!endDateTime || (endDateTime && +new Date() < +new Date(endDateTime))) {\r\n setDisabled(false);\r\n if (!endDateTime) clearInterval(timerRef.current);\r\n }\r\n }\r\n if (endDateTime && +new Date() > +new Date(endDateTime)) {\r\n setDisabled(true);\r\n clearInterval(timerRef.current);\r\n }\r\n }, 10000);\r\n }\r\n } else {\r\n setDisabled(false);\r\n }\r\n };\r\n if (hidden) return null;\r\n return (\r\n <>\r\n \r\n {useTimer && startDateTime ? (\r\n
\r\n
\r\n ) : null}\r\n
\r\n {showTooltip ?\r\n 0 ? orders[0] : null)}>\r\n \r\n {texts[environment.lang]}\r\n \r\n \r\n :\r\n \r\n {texts[environment.lang]}\r\n }\r\n
\r\n
\r\n
{\r\n handleChange(true, option.questionOptionId);\r\n setOpen(false);\r\n }}\r\n >\r\n \r\n
\r\n
setOpen((prev) => !prev)}\r\n onChange={(event) => setQuery(event.target.value)}\r\n displayValue={(prop) => prop?.label}\r\n className=\"selector-menu form-control\"\r\n style={{ border: valid === false ? \"1px solid #d53443\" : undefined }}\r\n placeholder={showPlaceholder ? placeholderText : \"\"}\r\n />\r\n setOpen((prev) => !prev)}>\r\n \r\n \r\n
setQuery(\"\")}>\r\n \r\n {filteredOptions?.length === 0 ? (\r\n \r\n
\r\n ) : (\r\n filteredOptions?.map((option) => (\r\n \r\n {({ selected }) => {option?.label} }\r\n \r\n ))\r\n )}\r\n \r\n \r\n
{\r\n handleChange(true, parseInt(e.target.value));\r\n }}\r\n >\r\n {options\r\n .sort((a, b) => a.sortOrder - b.sortOrder)\r\n .map((qo) => (\r\n ar.questionOptionId == qo.questionOptionId))}\r\n key={qo.questionOptionId}\r\n control={\r\n \r\n {options\r\n .sort((a, b) => a.sortOrder - b.sortOrder)\r\n .map((qo) => (\r\n handleChange(e.target.checked, qo.questionOptionId)}\r\n checked={Boolean(answer?.answerRow?.find((ar) => ar.questionOptionId == qo.questionOptionId))}\r\n control={\r\n {qo?.questionOptionLanguage?.find((fl) => fl.languageCode == environment.lang)?.label || \"-\"}
}\r\n />\r\n ))}\r\n \r\n );\r\n }\r\n});\r\n","import { runInAction, toJS } from \"mobx\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport React, { useEffect, useCallback, useMemo } from \"react\";\r\nimport { deepClone } from \"../../../helpers/objectHelper\";\r\nimport CustomInput from \"../../components/CustomInput\";\r\nimport { inputValidator } from \"../../helpers/inputValidator.helper\";\r\n\r\nexport const Text = observer((props) => {\r\n const { settings, environment, subLabel, label, orders, updateOrder, activePersonNo, validity, question, validate } = props;\r\n const { required, prefixClassName, type, displayType, validationType, hidden, readonly } = settings;\r\n\r\n const orderList = useMemo(() => toJS(orders), [orders]);\r\n\r\n const getTextValue = () => {\r\n const activeOrder = orderList[activePersonNo];\r\n const activeAnswer = activeOrder?.answer?.find((a) => a.questionId === question.questionId);\r\n const activeRow = activeAnswer?.answerRow?.find((ar) => !ar.questionOptionId && !ar.deleted);\r\n return activeRow?.text || \"\";\r\n };\r\n\r\n const answerText = getTextValue();\r\n\r\n const validateText = useCallback(() => {\r\n const { requiredMin, requiredMax } = question;\r\n\r\n let isValid = true;\r\n let reason = \"\";\r\n\r\n if (readonly || hidden) {\r\n isValid = true;\r\n } else if (required && answerText.length == 0) {\r\n isValid = false;\r\n reason = \"required\";\r\n } else if (requiredMin > 0 && answerText.length > 0 && answerText.length < requiredMin) {\r\n isValid = false;\r\n reason = \"minLengthText\";\r\n } else if (requiredMax > 0 && answerText.length > requiredMax) {\r\n isValid = false;\r\n reason = \"maxLengthText\";\r\n } else if (validationType) {\r\n isValid = inputValidator(answerText, validationType);\r\n reason = validationType;\r\n }\r\n\r\n runInAction(() => {\r\n validity.valid = isValid;\r\n validity.reason = reason;\r\n });\r\n }, [answerText, question, validity, validate]);\r\n\r\n useEffect(() => {\r\n validateText();\r\n }, [orderList, activePersonNo, validateText]);\r\n\r\n const handleChange = (value, optionId) => {\r\n let order = deepClone(orderList[activePersonNo]);\r\n if (!order.answer) {\r\n order.answer = [];\r\n }\r\n let answer = order.answer.find((a) => a.questionId == question.questionId);\r\n if (!answer) {\r\n answer = {\r\n answerId: 0,\r\n interactionKey: null,\r\n orderId: 0,\r\n questionId: question.questionId,\r\n answerRow: [],\r\n };\r\n order.answer.push(answer);\r\n }\r\n if (!answer.answerRow) {\r\n answer.answerRow = [];\r\n }\r\n if (value === true && question.requiredMax === 1) {\r\n answer.answerRow.map((ar) => {\r\n ar.deleted = true;\r\n });\r\n }\r\n let row = answer.answerRow.find(() => true);\r\n if (row) {\r\n row.text = value;\r\n } else {\r\n answer.answerRow.push({\r\n answerId: answer.answerId,\r\n answerRowId: 0,\r\n questionOptionId: optionId,\r\n text: value,\r\n deleted: false,\r\n });\r\n }\r\n answer.answerRow = answer.answerRow.filter((ar) => {\r\n return !ar.deleted;\r\n });\r\n order.answer[order.answer.indexOf(order.answer.find((a) => a.questionId == question.questionId))] = answer;\r\n updateOrder(order);\r\n validateText();\r\n };\r\n\r\n const isValid = useMemo(() => {\r\n if (answerText.length > 0 && validity?.valid === false) return false;\r\n else if (answerText.length > 0 && validity?.valid === true) return true;\r\n else if (validate && validity?.valid === false) return false;\r\n return undefined;\r\n }, [validity?.valid, validate, answerText]);\r\n\r\n return (\r\n handleChange(e.target.value)}\r\n displayType={displayType}\r\n settings={settings}\r\n label={label}\r\n value={getTextValue()}\r\n subLabel={subLabel}\r\n />\r\n );\r\n});\r\n","import { observer } from \"mobx-react-lite\";\r\nimport React, { useMemo } from \"react\";\r\nimport { Label, FormGroup } from \"reactstrap\";\r\nimport { Asterisk } from \"../../components/Asterisk\";\r\nimport { Option } from \"./Option\";\r\nimport { Text } from \"./Text\";\r\n\r\nexport const Question = observer((props) => {\r\n const { settings, environment, questions, validations, contentModuleId, contentLayoutModuleId } = props;\r\n const { questionId, prefixClassName, type, validation, groupTransfer, hidden } = settings;\r\n\r\n const question = questions.find((q) => q.questionId == questionId);\r\n if (!question) return null;\r\n\r\n const label = question?.questionLanguage?.find((fl) => fl.languageCode == environment.lang)?.label;\r\n const subLabel = question?.questionLanguage?.find((fl) => fl.languageCode == environment.lang)?.subLabel;\r\n\r\n const validity = useMemo(() => validations.find((v) => v.id == contentModuleId), [validations, contentModuleId]);\r\n\r\n if (hidden) return null;\r\n return (\r\n <>\r\n {type == \"option\" ? (\r\n \r\n {!settings?.hideLabel && (\r\n \r\n
\r\n {label}\r\n {question.requiredMin > 0 ? \r\n {subLabel ?
{subLabel} : null}\r\n
\r\n ) : (\r\n \r\n {displayEventSettings[\"ShowEventStartDateTime\"] ? new Date(event.startDateTime).toLocaleDateString(lang === \"swe\"? \"sv-SE\" : \"en-GB\") : null}\r\n {displayEventSettings[\"ShowEventStartTime\"] ? (displayEventSettings[\"ShowEventStartDateTime\"] ? \" \" : \"\") + new Date(event.startDateTime).toLocaleTimeString(lang === \"swe\"? \"sv-SE\" : \"en-GB\", { timeStyle: 'short' }) : null}\r\n {(displayEventSettings[\"ShowEventStartDateTime\"] || displayEventSettings[\"ShowEventStartTime\"]) &&\r\n (displayEventSettings[\"ShowEventEndDateTime\"] || displayEventSettings[\"ShowEventEndTime\"]) ?\r\n ' - ' : null}\r\n {displayEventSettings[\"ShowEventEndDateTime\"] ? new Date(event.endDateTime).toLocaleDateString(lang === \"swe\"? \"sv-SE\" : \"en-GB\") : null}\r\n {displayEventSettings[\"ShowEventEndTime\"] ? (displayEventSettings[\"ShowEventEndDateTime\"] ? \" \" : \"\") + new Date(event.endDateTime).toLocaleTimeString(lang === \"swe\"? \"sv-SE\" : \"en-GB\", { timeStyle: 'short' }) : null}\r\n
\r\n}\r\n\r\n","import React from 'react'\r\n\r\nexport const EventLocation = ({ displayEventSettings, event }) => {\r\n return \r\n {displayEventSettings[\"ShowEventVenue\"] && event.venue ? event.venue:null}\r\n {(displayEventSettings[\"ShowEventVenue\"] && event.venue) && \r\n (displayEventSettings[\"ShowEventCity\"] && event.city) ? \", \" : null}\r\n {displayEventSettings[\"ShowEventCity\"] && event.city ? event.city:null}\r\n
\r\n}","import { observer } from \"mobx-react-lite\";\r\nimport React, { useEffect, useState, useMemo, useCallback } from \"react\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport { displayMoney } from \"../../helpers/money.helper\";\r\nimport Axios from \"axios\";\r\nimport { usePrevious } from \"../../helpers/usePrevious\";\r\nimport { Spinner } from \"reactstrap\";\r\nimport { Asterisk } from \"../../components/Asterisk\";\r\nimport { runInAction, toJS } from \"mobx\";\r\nimport RadioButtonUncheckedIcon from \"@material-ui/icons/RadioButtonUnchecked\";\r\nimport RadioButtonCheckedIcon from \"@material-ui/icons/RadioButtonChecked\";\r\nimport CheckBoxOutlineBlankIcon from \"@material-ui/icons/CheckBoxOutlineBlank\";\r\nimport CheckBoxIcon from \"@material-ui/icons/CheckBox\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\nimport { EventDates } from \"./components/EventDates\";\r\nimport { EventLocation } from \"./components/EventLocation\";\r\nimport { toCamelCase } from \"../../helpers/objectHelper\";\r\nimport { getUrlParam } from \"../../helpers/url.helper\";\r\nimport { is } from \"core-js/core/object\";\r\n\r\nexport const Event = observer((props) => {\r\n const [isFetching, setIsFetching] = useState(false);\r\n const [isFullBooked, setIsFullbooked] = useState(false);\r\n const [isNoVouchersAvailable, setIsNoVouchersAvailable] = useState(false);\r\n const [isReadonly, setIsReadonly] = useState(false);\r\n const [isFetchingVouchers, setIsFetchingVouchers] = useState(false);\r\n\r\n const {\r\n settings,\r\n environment,\r\n breakouts,\r\n contentLayoutModuleId,\r\n displayEventSettings,\r\n checkConditions,\r\n current,\r\n updateOrder,\r\n activePersonNo,\r\n contentLayout,\r\n validations,\r\n contentModuleId,\r\n hasParent,\r\n updateOrderRow,\r\n setBreakoutFullbooked,\r\n checkEventAvailability,\r\n validate: vdate,\r\n parentValid,\r\n } = props;\r\n\r\n const orders = toJS(props.orders);\r\n const { eventId, readonly, hidden, prechecked, allowOverbooking, escape, required, overrideDisplay, displayType = \"checkbox\", displayYesNo = false, voucherCheck, showAlternativeName = false } = settings;\r\n const validity = validations.find((v) => v.id == contentModuleId);\r\n const prevProps = usePrevious(props);\r\n\r\n //const order = orders[activePersonNo];\r\n const order = useMemo(() => {\r\n return orders[activePersonNo];\r\n }, [props.orders, orders, activePersonNo]);\r\n const breakout = breakouts.find((q) => q.eventId == eventId);\r\n const eventRejected = useMemo(() => {\r\n return Boolean(order?.orderExtra?.find((oe) => oe.name === \"EventRejected\" && oe.value == eventId));\r\n }, [order, order?.orderExtra]);\r\n const activeDisplaySettings = useMemo(() => {\r\n if (overrideDisplay) {\r\n const o = {};\r\n for (const key in displayEventSettings) {\r\n if (Object.hasOwnProperty.call(displayEventSettings, key)) {\r\n o[key] = settings[toCamelCase(key)] === true;\r\n }\r\n }\r\n return o;\r\n } else {\r\n return displayEventSettings;\r\n }\r\n }, [\r\n overrideDisplay,\r\n displayEventSettings,\r\n settings?.showEventStartDateTime,\r\n settings?.showEventStartTime,\r\n settings?.showEventEndDateTime,\r\n settings?.showEventEndTime,\r\n settings?.showEventCity,\r\n settings?.showEventVenue,\r\n settings?.showEventDescription,\r\n settings?.showEventPrice,\r\n settings?.showEventName,\r\n settings?.showEventIncVat,\r\n settings?.showEventVatPrecentage,\r\n settings?.showEventVatSum,\r\n ]);\r\n\r\n if (!breakout) return null;\r\n\r\n const { name, startDateTime, endDateTime, description, amount, vatPercent, eventDisplayLanguage, deadline } = breakout;\r\n\r\n const displayLang = eventDisplayLanguage.find((x) => x.languageCode === environment.lang && x.alternative === showAlternativeName);\r\n\r\n const isDue = useMemo(() => (deadline ? +new Date(deadline) < +new Date() : false), [deadline]);\r\n\r\n useEffect(() => {\r\n if (prechecked) {\r\n checkAvailableStatus(true, true);\r\n } else {\r\n checkAvailableStatus();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n validate();\r\n checkForOverbooking();\r\n }, [order, order?.orderRow, isFullBooked]);\r\n\r\n useEffect(() => {\r\n if (!orders?.[activePersonNo]?.badgeNo) {\r\n validate();\r\n }\r\n }, [orders, validate, activePersonNo]);\r\n\r\n useEffect(() => {\r\n if (prevProps && activePersonNo !== prevProps.activePersonNo && prechecked && orders?.length > 0) {\r\n checkAvailableStatus(true, true);\r\n }\r\n }, [activePersonNo]);\r\n\r\n const validate = useCallback(() => {\r\n let row = order?.orderRow?.find((or) => or.eventId == breakout.eventId);\r\n let isValid = true;\r\n let reason = \"\";\r\n\r\n if (isDue) {\r\n isValid = true;\r\n reason = \"due\";\r\n } else if (!isFullBooked && (readonly || hidden)) {\r\n isValid = true;\r\n return isValid;\r\n } else if (required && !row && !eventRejected) {\r\n isValid = false;\r\n reason = \"required\";\r\n }\r\n\r\n if (hasParent && typeof props.validateGroup === \"function\") {\r\n props.validateGroup({ isValid, reason });\r\n } else if (validity) {\r\n runInAction(() => {\r\n validity.valid = isValid;\r\n validity.reason = reason;\r\n });\r\n }\r\n }, [isFullBooked, readonly, hidden, required, isDue, eventRejected, hasParent, validity, order, breakout.eventId]);\r\n\r\n const checkForOverbooking = () => {\r\n const events = contentLayout.contentLayoutModules.filter((fe) => {\r\n return fe.contentModule && fe.contentModule.type === \"EVENT\" && fe.contentModule.settings.eventId !== breakout.eventId;\r\n });\r\n\r\n events.map((e) => {\r\n if (!allowOverbooking && e.pages === current.page) {\r\n let matchedEvent = breakouts.find((q) => q.eventId == e.contentModule.settings.eventId);\r\n if (matchedEvent) {\r\n if (\r\n (+new Date(matchedEvent.startDateTime) > +new Date(startDateTime) && +new Date(matchedEvent.startDateTime) < +new Date(endDateTime)) ||\r\n (+new Date(matchedEvent.endDateTime) > +new Date(startDateTime) && +new Date(matchedEvent.endDateTime) <= +new Date(endDateTime))\r\n ) {\r\n setIsReadonly(true);\r\n }\r\n }\r\n }\r\n });\r\n };\r\n\r\n const handleCheckboxChange = (value, preChecked) => {\r\n if (value === undefined) return;\r\n if (props.hasParent && settings.onlySelectOne) {\r\n props.uncheckGroupActivities(breakout.eventId);\r\n }\r\n\r\n var update = true;\r\n if (preChecked && order && order.orderRow && order.orderRow.filter((x) => x.eventId == breakout.eventId).length > 0) {\r\n update = false;\r\n }\r\n if (update) {\r\n updateOrderRow({\r\n amount: breakout.amount ?? 0,\r\n comment: \"\",\r\n discount: 0,\r\n eventId: breakout.eventId,\r\n orderId: -1,\r\n orderRowId: ((order?.orderRow?.length ?? 0) + 1) * -1,\r\n quantity: 1,\r\n status: null,\r\n vatPercent: breakout.vatPercent || 0,\r\n deleted: !value,\r\n groupId: props.hasParent ? props.parentId : null,\r\n });\r\n }\r\n checkConditions(contentLayoutModuleId);\r\n };\r\n\r\n const checkAvailableStatus = async (value, preChecked = false) => {\r\n if (value === false) {\r\n handleCheckboxChange(false);\r\n setIsFullbooked(false);\r\n } else {\r\n if (isFetching === false) {\r\n setIsFetching(true);\r\n const available = await checkEventAvailability(breakout.eventId, orders.length > 0 && orders[activePersonNo].orderId ? orders[activePersonNo].orderId : null, props.sqlStateNo, true);\r\n\r\n if (available) {\r\n checkVoucherAvailable(value, preChecked);\r\n setIsFullbooked(false);\r\n } else {\r\n setBreakoutFullbooked(breakout.eventId, true);\r\n setIsFullbooked(true);\r\n }\r\n setIsFetching(false);\r\n }\r\n }\r\n };\r\n\r\n const checkVoucherAvailable = (value, preChecked = false) => {\r\n const exhibitorId = order?.orderExtra?.find((x) => x.name == \"ExhibitorInvite\")?.value || getUrlParam(\"exi\");\r\n if (!exhibitorId && getUrlParam(\"exi\")) {\r\n exhibitorId = parseInt(getUrlParam(\"exi\"));\r\n }\r\n\r\n const personTypes = order?.personTypes?.map((x) => x.personTypeId) ?? [];\r\n if (getUrlParam(\"pti\") && (personTypes.length === 0 || !personTypes.some((x) => x == getUrlParam(\"pti\")))) {\r\n personTypes.push(parseInt(getUrlParam(\"pti\")));\r\n }\r\n if (!exhibitorId || !voucherCheck) {\r\n handleCheckboxChange(value);\r\n } else {\r\n if (isFetchingVouchers === false) {\r\n setIsFetchingVouchers(true);\r\n\r\n Axios.get(\r\n `./api/exhibitor/availableVouchers/${breakout.eventId}${orders.length > 0 && orders[activePersonNo].orderId ? \"/\" + orders[activePersonNo].orderId : \"\"}?sqlStateNo=${\r\n props.sqlStateNo\r\n }&exi=${exhibitorId}&ptis=${personTypes.join(\",\")}`\r\n )\r\n .then(({ data }) => {\r\n if (data.available) {\r\n handleCheckboxChange(value, preChecked);\r\n setIsNoVouchersAvailable(false);\r\n } else {\r\n setIsNoVouchersAvailable(true);\r\n }\r\n setIsFetchingVouchers(false);\r\n })\r\n .catch((err) => {\r\n setIsFetchingVouchers(false);\r\n\r\n console.error(err);\r\n });\r\n }\r\n }\r\n };\r\n\r\n const price = (asNumber = false) => {\r\n let discountAmount = 0;\r\n\r\n let discounts = order?.discounts || [];\r\n if (order && order.orderId > 0 && order?.orderRow?.find((o) => o.eventId == breakout.eventId)) {\r\n discountAmount = order?.orderRow?.find((o) => o.eventId == breakout.eventId)?.discount;\r\n }\r\n\r\n discounts\r\n .filter((d) => (d.targetEventId == breakout.eventId && d.value != 0) || (d.targetEventId == null && d.valueType == \"Percent\" && d.value != 0))\r\n .sort((a, b) => {\r\n return a.value - b.value;\r\n })\r\n .map((d) => {\r\n discountAmount += d.valueType == \"Percent\" ? (amount - discountAmount) * (d.value / 100) : d.value;\r\n });\r\n\r\n const oldPrice = parseFloat(displayEventSettings[\"ShowEventIncVat\"] == true ? displayMoney(parseFloat(amount), vatPercent) : amount);\r\n\r\n const price = parseFloat(displayEventSettings[\"ShowEventIncVat\"] ? displayMoney(parseFloat(amount - discountAmount), vatPercent) : amount - discountAmount);\r\n\r\n if (asNumber) {\r\n return discountAmount;\r\n }\r\n\r\n if (!discountAmount) return {`${price} ${environment.currency}`}
;\r\n\r\n return (\r\n <>\r\n {`${oldPrice} ${environment.currency}`}
\r\n {`${price > 0 ? price : 0} ${environment.currency}`}
\r\n \r\n );\r\n };\r\n\r\n const isChecked = useMemo(\r\n () => Boolean(orders.length >= activePersonNo + 1 && orders[activePersonNo]?.orderRow?.find((or) => or.eventId == breakout.eventId && !or.deleted)),\r\n [orders, activePersonNo, breakout.eventId]\r\n );\r\n\r\n const isValid = useMemo(() => {\r\n if (vdate && (validations.find((v) => v.id === contentModuleId)?.valid === false || parentValid === false)) return false;\r\n return undefined;\r\n }, [vdate, validations, contentModuleId]);\r\n\r\n const statusLabel = useMemo(() => {\r\n if (isFullBooked) {\r\n return \r\n {displayYesNo ? (\r\n <>\r\n
(!isChecked && !isFetching && !isFetchingVouchers ? checkAvailableStatus(true) : null)} disabled={isFullBooked || readonly} className={`cms-button ${isChecked ? \"active\" : \"\"}`}>\r\n \r\n
\r\n \r\n \r\n
checkAvailableStatus(false)} disabled={readonly} className={`cms-button ${!isChecked && eventRejected ? \"active\" : \"\"}`}>\r\n \r\n \r\n ) : !isFetching && !isFetchingVouchers ? (\r\n
checkAvailableStatus(e.target.checked)}\r\n icon={\r\n props.hasParent && settings.displayType === \"radio\" ? (\r\n \r\n {statusLabel &&
{statusLabel}
}\r\n
\r\n {activeDisplaySettings[\"ShowEventName\"] && (\r\n
\r\n {displayLang?.name ? displayLang.name : name}\r\n {required ?
\r\n )}\r\n\r\n
\r\n
\r\n\r\n {activeDisplaySettings[\"ShowEventDescription\"] ?
{displayLang?.description ? displayLang.description : description}
: null}\r\n
\r\n
\r\n {activeDisplaySettings[\"ShowEventPrice\"] ? price() : null}\r\n {activeDisplaySettings[\"ShowEventVatSum\"] ? (\r\n
\r\n
\r\n ) : null}\r\n {activeDisplaySettings[\"ShowEventVatPrecentage\"] ? (\r\n
\r\n
\r\n ) : null}\r\n
{\r\n //this code is repeated in 3 modules, change it\r\n if (isValid) {\r\n if (!grpRegDisabled) {\r\n register(() => registerCallbackRef.current());\r\n setDisableButton(true);\r\n }\r\n } else {\r\n triggerValidation();\r\n }\r\n }}\r\n >\r\n {texts ? texts[environment.lang] : settings.register[environment.lang]}\r\n \r\n \r\n\r\n );\r\n});\r\n","import { Button } from \"@material-ui/core\";\r\nimport { runInAction } from \"mobx\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport React from \"react\";\r\nimport SystemLabel from \"../../../system/SystemLabel/SystemLabel\";\r\n\r\nexport const PreviousPage = observer(({ current, text, setActivePage }) => {\r\n return (\r\n \r\n \r\n // runInAction(() => {\r\n // current.activePage -= 1;\r\n // })\r\n setActivePage(current.activePage-1)\r\n }\r\n >\r\n {text ||
\r\n );\r\n});\r\n","import { Button, Tooltip } from \"@material-ui/core\";\r\nimport { runInAction } from \"mobx\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport React from \"react\";\r\nimport SystemLabel from \"../../../system/SystemLabel/SystemLabel\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\n\r\nexport const ForwardPage = observer(({ current, contentLayout, text, triggerValidation, validations, checkInvoiceValidation, grpRegDisabled = false, setActivePage, getFilteredValidations }) => {\r\n let isValid = getFilteredValidations().length == 0;\r\n return (\r\n \r\n \r\n runInAction(() => {\r\n isValid = checkInvoiceValidation(isValid);\r\n if (isValid) {\r\n triggerValidation(false);\r\n if (!grpRegDisabled) {\r\n setActivePage(current.activePage+1)\r\n }\r\n } else {\r\n triggerValidation();\r\n }\r\n })\r\n }\r\n >\r\n {text ||
\r\n \r\n );\r\n});\r\n","import React, { useCallback, useEffect, useMemo, useState } from \"react\";\r\nimport { defaultInvoiceFields } from \"../../constants/invoiceFields.constants\";\r\nimport CustomInput from \"../../components/CustomInput\";\r\nimport { deepClone, toCamelCase } from \"../../helpers/objectHelper\";\r\nimport { runInAction } from \"mobx\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport { invoiceFieldValidator } from \"../../helpers/inputValidator.helper\";\r\n\r\nexport const InvoiceFields = observer((props) => {\r\n const { activePersonNo, orders, updateOrder, validations, environment, validate } = props;\r\n const [initValidation, setInitValidation] = useState(true);\r\n\r\n useEffect(() => {\r\n if (orders && orders[activePersonNo]?.badgeNo && initValidation) {\r\n setInitValidation(false);\r\n defaultInvoiceFields.map((di) => {\r\n let value = getFieldValue(di);\r\n handleValueChange(value, di);\r\n });\r\n }\r\n }, [orders]);\r\n\r\n const handleValueChange = (value, t) => {\r\n const validity = validations.find((v) => v.id == `INVOICE_${t}`);\r\n\r\n let order = orders[activePersonNo];\r\n let newOrder = deepClone(order);\r\n let type = newOrder[\"invoice\"];\r\n let newType = undefined;\r\n\r\n if (!type) {\r\n newType = {};\r\n } else {\r\n newType = deepClone(type);\r\n }\r\n newType[toCamelCase(t)] = value;\r\n newOrder[\"invoice\"] = newType;\r\n\r\n updateOrder(newOrder);\r\n\r\n //validate\r\n let isValid = invoiceFieldValidator(value, t, newType.countryCode ?? null);\r\n if (t == \"CountryCode\") {\r\n const orgNoValidity = validations.find((v) => v.id == `INVOICE_OrgNo`);\r\n runInAction(() => {\r\n orgNoValidity.valid = invoiceFieldValidator(newType[toCamelCase(\"OrgNo\")], \"OrgNo\", newType.countryCode);\r\n });\r\n }\r\n\r\n runInAction(() => {\r\n validity.valid = isValid;\r\n });\r\n\r\n //validate\r\n };\r\n\r\n const getFieldValue = (name) => {\r\n if (orders.length > 0) {\r\n let order = orders[activePersonNo];\r\n let type = order[\"invoice\"];\r\n if (type) {\r\n let val = type[toCamelCase(name)];\r\n if (val) {\r\n return val;\r\n }\r\n }\r\n }\r\n return \"\";\r\n };\r\n\r\n const isRequired = (type) => {\r\n switch (type) {\r\n case \"Email\":\r\n case \"Telephone1\":\r\n case \"Address2\":\r\n return false;\r\n default:\r\n return true;\r\n }\r\n };\r\n\r\n const invoiceFields = useMemo(() => {\r\n return defaultInvoiceFields.map((di) => {\r\n const validity = validations.find((v) => v.id == `INVOICE_${di}`);\r\n if (validate && validity?.valid === false) {\r\n return { type: di, valid: false };\r\n }\r\n if (validity?.valid === false && getFieldValue(di)?.length > 0) {\r\n return { type: di, valid: false };\r\n }\r\n return { type: di, valid: undefined };\r\n });\r\n }, [validations, validate, getFieldValue]);\r\n\r\n console.log(invoiceFields);\r\n\r\n return invoiceFields.map(({ type, valid }) => (\r\n \r\n (type == \"CountryCode\" ? handleValueChange(val, type) : handleValueChange(val.target.value, type))}\r\n label={type}\r\n valid={valid}\r\n staticLabel={true}\r\n type={type}\r\n lang={environment.lang}\r\n eventId={environment.eventId}\r\n />\r\n \r\n ));\r\n});\r\n","import React, { useState, useEffect } from \"react\";\r\nimport ReceiptIcon from \"@material-ui/icons/Receipt\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport FormGroup from \"@material-ui/core/FormGroup\";\r\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\r\nimport CheckCircleIcon from \"@material-ui/icons/CheckCircle\";\r\nimport { runInAction } from \"mobx\";\r\nimport { InvoiceFields } from \"../InvoiceFields/InvoiceFields\";\r\nimport CreditCardIcon from \"@material-ui/icons/CreditCard\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\n\r\nconst PaymentOptions = (props) => {\r\n const [showInvoiceFields, setShowInvoiceFields] = useState(false);\r\n const [showPaymentOptions, setShowPaymentOptions] = useState(false);\r\n const [selectedOption, setSelectedOption] = useState(null);\r\n\r\n const { settings, addOrUpdate, activePersonNo, orders, updateOrder, current, contentModuleId, validations, checkHeights } = props;\r\n\r\n useEffect(() => {\r\n configureOptions();\r\n }, []);\r\n\r\n useEffect(() => {\r\n configureOptions();\r\n }, [settings.paymentMethods]);\r\n\r\n const configureOptions = () => {\r\n if (settings.paymentMethods.length > 1 && selectedOption != \"invoice\") {\r\n setShowPaymentOptions(true);\r\n } else if (settings && settings.paymentMethods && settings.paymentMethods.length === 1 && settings.paymentMethods.includes(\"invoice\")) {\r\n setShowInvoiceFields(true);\r\n runInAction(() => {\r\n current.payMethod = \"invoice\";\r\n });\r\n } else if (settings && settings.paymentMethods && settings.paymentMethods.length === 1 && settings.paymentMethods.includes(\"dibs\")) {\r\n setShowInvoiceFields(false);\r\n runInAction(() => {\r\n current.payMethod = \"dibs\";\r\n });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n checkHeights();\r\n }, [current.payMethod]);\r\n\r\n const expand = (option) => {\r\n const module = props.contentLayout.contentLayoutModules.find((clm) => clm.contentLayoutModuleId == props.contentLayoutModuleId);\r\n const validity = validations.find((v) => v.id == contentModuleId);\r\n\r\n if (!module) return;\r\n\r\n runInAction(() => {\r\n current.payMethod = option;\r\n validity.valid = true;\r\n });\r\n };\r\n\r\n if (settings.hidden) return null;\r\n if (settings.paymentMethods.length == 1 && showInvoiceFields == true) {\r\n return (\r\n \r\n
\r\n );\r\n } else if (settings.paymentMethods.length > 1) {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {settings.paymentMethods.map((p) => {\r\n return (\r\n \r\n {\r\n expand(p);\r\n setSelectedOption(p);\r\n },\r\n }}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n {selectedOption == \"invoice\" || current.payMethod == \"invoice\" ?
: null}\r\n
\r\n {selectedOption == option ? (\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n \r\n
\r\n {selectedOption == option || isInvoice ? (\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n\r\n {glnList.length > 0 ?\r\n glnList.map((qo) => {\r\n return (\r\n dropdownOnChange(e, qo)} value={qo} style={{width: \"100%\"}}>\r\n \r\n \r\n \r\n );\r\n }) : null}\r\n\r\n \r\n \r\n {/* \r\n */}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import { toCamelCase } from \"../../helpers/objectHelper\"; // deepClone,\r\nimport { invoiceFieldValidator } from \"../../helpers/inputValidator.helper\";\r\n\r\nexport function getFieldValue(name, orders, activePersonNo) {\r\n if (orders?.length > 0) {\r\n const order = orders[activePersonNo];\r\n const type = order[\"invoice\"];\r\n if (type) {\r\n const val = type[toCamelCase(name)];\r\n if (val) {\r\n return val;\r\n }\r\n }\r\n }\r\n return \"\";\r\n}\r\n\r\nexport function isValid(type, value, countryCode = null, data = null, company = true) {\r\n let generalValidity = !invoiceFieldValidator(value, type, countryCode, type == \"Telephone1\" ? data : \"\", company);\r\n return generalValidity;\r\n}\r\n\r\nexport function unpush(list, target) {\r\n return list.splice(list.indexOf(target), 1);\r\n}\r\n\r\nexport function glnSuccess() {}\r\n\r\nexport function isGovernment(orgno, countryCode = null) {\r\n let compareTo = orgno.substring(0, 1);\r\n if (!countryCode || countryCode == \"SE\" || countryCode == \"SWE\") {\r\n return compareTo == \"2\";\r\n } else {\r\n return compareTo == \"2\";\r\n }\r\n}\r\n\r\nexport function convertAutocomplete(value) {\r\n try {\r\n switch (value.toLowerCase()) {\r\n case \"name\":\r\n return \"CompanyName\";\r\n case \"telephone1\":\r\n return \"RefNo\";\r\n case \"address1\":\r\n case \"address2\":\r\n return \"Address\";\r\n case \"zip\":\r\n return \"Zip code\";\r\n default:\r\n break;\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n return value;\r\n }\r\n}\r\n","import React, { useEffect, useState, useRef, useMemo, useCallback } from \"react\";\r\nimport CustomInput from \"../../components/CustomInput\";\r\nimport { deepClone, toCamelCase } from \"../../helpers/objectHelper\";\r\nimport { runInAction, toJS } from \"mobx\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport { invoiceFieldValidator, hasOrgNoValidation } from \"../../helpers/inputValidator.helper\";\r\nimport Axios from \"axios\";\r\nimport { Button } from \"reactstrap\";\r\nimport { GLNPopup } from \"../../components/GLNPopup\";\r\nimport { isValid, getFieldValue, isGovernment, convertAutocomplete } from \"./InvoiceFieldHelpers\"; //unpush, glnSuccess,\r\nimport EventLabel, { GetEventLabelValueFn } from \"../../components/EventLabel\";\r\nimport CheckCircleIcon from \"@material-ui/icons/CheckCircle\";\r\n\r\nexport const InvoiceFieldsNew = observer((props) => {\r\n const {\r\n activePersonNo,\r\n orders,\r\n updateOrder,\r\n environment,\r\n settings,\r\n currentType,\r\n selectedCountry,\r\n selectedOption,\r\n checkHeights,\r\n invoiceAnchor,\r\n mainEvent,\r\n validatePaymentFields,\r\n eventLabels,\r\n validations,\r\n validate,\r\n updateEventLabels,\r\n } = props;\r\n\r\n const [showGLNWindow, setShowGLNWindow] = useState(false);\r\n const [glnOrgFields, setGlnOrgFields] = useState([]);\r\n const [invoiceFields, setInvoiceFields] = useState([]);\r\n const initialRegex = /^[a-zA-Z0-9\\-\\s]{1,25}$/;\r\n const [currentRegex, setCurrentRegex] = useState(initialRegex);\r\n const [currentInfo, setCurrentInfo] = useState(null);\r\n const [GLNList, setGLNList] = useState([]);\r\n const [validFields, setValidFields] = useState(false);\r\n const paymentType = currentType;\r\n const [lastValidVatNo, setLastValidVatNo] = useState(\"\");\r\n const [showEmail, setShowEmail] = useState(false);\r\n const [refNoWarning, setRefNoWarning] = useState(false);\r\n const [currentLeaderNo, setCurrentLeaderNo] = useState(activePersonNo);\r\n const [lockGLN, setLockGLN] = useState(true);\r\n const [applySweVat, setApplySweVat] = useState(false);\r\n const [applyEuVat, setApplyEuVat] = useState(false);\r\n const [vatNoStatus, setVatNoStatus] = useState(false);\r\n const [timerExpired, setTimerExpires] = useState(false);\r\n const [orgNoValid, setOrgNoValid] = useState(null);\r\n const [showVatField,setShowVatField] = useState(false);\r\n\r\n const orgNoRef = useRef(\"\");\r\n const glnFieldPlaceholder = useMemo(() => GetEventLabelValueFn({ name: \"GLNPlaceholder\", groupName: \"CMS.Payment\" }, eventLabels, environment, updateEventLabels), [eventLabels]);\r\n\r\n useEffect(() => {\r\n checkHeights();\r\n finalValid();\r\n }, [validations, validations?.length, selectedOption, currentType, selectedCountry, validatePaymentFields]);\r\n\r\n useEffect(() => {\r\n var fono = 0;\r\n let o = orders[currentLeaderNo]?.invoice?.orgNo;\r\n if (o && o.length > 1) {\r\n fono = o.substring(0, 2);\r\n }\r\n if (currentType != \"person\" && settings.swevat && selectedCountry.swedishCountry && (fono == 20 || fono == 21 || fono == 23) && validations.find((v) => v.id == \"INVOICE_OrgNo\")?.valid) {\r\n //we know we're a swedish country, and that the settings is active, and that we're an applicable type.\r\n setApplySweVat(true);\r\n if (orders[currentLeaderNo]?.orderExtra && orders[currentLeaderNo]?.orderExtra?.length == 0) {\r\n applyVat();\r\n }\r\n } else {\r\n setApplySweVat(false);\r\n }\r\n if (!validations.find((v) => v.id == \"INVOICE_OrgNo\")?.valid && orders[currentLeaderNo]?.invoice?.orgNo && orgNoRef.current != orders[currentLeaderNo]?.invoice?.orgNo) {\r\n orgNoRef.current = orders[currentLeaderNo].invoice.orgNo;\r\n handleValueChange(orders[currentLeaderNo].invoice.orgNo, \"orgNo\");\r\n }\r\n }, [orders, validations, currentLeaderNo]);\r\n\r\n useEffect(() => {\r\n if (glnOrgFields.length > 1) {\r\n checkHeights();\r\n setTimeout(scrollToAnchor, 500);\r\n }\r\n }, [invoiceFields.length, glnOrgFields.length]);\r\n\r\n const scrollToAnchor = () => {\r\n invoiceAnchor.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\", inline: \"nearest\" });\r\n };\r\n\r\n useEffect(() => {\r\n let current = orders.filter((a) => a.leader)[0];\r\n let index = -1;\r\n if (current) {\r\n index = orders.indexOf(current);\r\n }\r\n if (index != -1) {\r\n setCurrentLeaderNo(index);\r\n } else {\r\n setCurrentLeaderNo(activePersonNo);\r\n if (!validations.find((v) => v.label == \"PaymentOption\").valid) {\r\n finalValid();\r\n }\r\n }\r\n });\r\n\r\n useEffect(() => {\r\n if (timerExpired) {\r\n handleValueChange(orders[currentLeaderNo].invoice.name, \"Name\");\r\n setTimerExpires(false);\r\n }\r\n }, [timerExpired]);\r\n\r\n const applyVat = () => {\r\n if (orders.length == 0) {\r\n return;\r\n }\r\n var newOrder = deepClone(orders[currentLeaderNo]);\r\n var type = newOrder[\"orderExtra\"];\r\n var newType = undefined;\r\n if (!type) {\r\n newType = [];\r\n } else {\r\n newType = deepClone(type);\r\n }\r\n\r\n if (applySweVat || applyEuVat) {\r\n let vatno = newOrder[\"invoice\"]?.vatNo;\r\n newType = vatno\r\n ? [\r\n { name: \"vatExempt\", value: true, value2: \"\" },\r\n { name: \"vatNo\", value: vatno, value2: \"\" },\r\n ]\r\n : [\r\n { name: \"vatExempt\", value: true, value2: \"\" },\r\n { name: \"sweVat\", value: true, value2: \"\"},\r\n ];\r\n newOrder[\"orderExtra\"] = newType;\r\n runInAction(() => {\r\n updateOrder(newOrder, currentLeaderNo);\r\n });\r\n } else {\r\n newType = [];\r\n newOrder[\"orderExtra\"] = newType;\r\n runInAction(() => {\r\n updateOrder(newOrder, currentLeaderNo);\r\n });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n applyVat();\r\n }, [applySweVat, applyEuVat]);\r\n\r\n useEffect(() => {\r\n if(props.breakouts && props.contentLayout){\r\n const layoutIds = props.contentLayout.contentLayoutModules.filter(x => x.contentModule.type==\"EVENT\").map(x => x.contentModule.settings.eventId)\r\n const breakouts = props.breakouts.filter(x => layoutIds.includes(x.eventId));\r\n console.log(breakouts.some(x => x.allowReverseCharge))\r\n setShowVatField(breakouts.some(x => x.allowReverseCharge));\r\n }\r\n },[props.breakouts,props.contentLayout]);\r\n\r\n //when it's loaded\r\n useEffect(() => {\r\n if (selectedOption != \"\" && currentType != \"\") {\r\n //find if we're comgov/pers here, and then display the correct fields\r\n if (selectedOption != \"dibs\" && selectedOption != \"stripe\") {\r\n setLastValidVatNo(\"\");\r\n setVatNoStatus(\"\");\r\n let f = [];\r\n if (currentType == \"person\") {\r\n f = [\"Name\", \"Address1\", \"Address2\", \"Zip\", \"City\", \"Email\"];\r\n setInvoiceFields(f);\r\n setGlnOrgFields([]);\r\n runInAction(() => {\r\n validations.find((v) => v.id == \"INVOICE_Telephone1\").valid = true;\r\n validations.find((v) => v.id == \"INVOICE_OrgNo\").valid = true;\r\n });\r\n checkHeights();\r\n } else {\r\n orgNoRef.current = \"\";\r\n var shouldValidateOrgNo = hasOrgNoValidation(selectedCountry?.countryCode);\r\n if (!glnOrgFields.includes(\"GLN\")) {\r\n setGlnOrgFields([\"OrgNo\"]);\r\n }\r\n if (invoiceFields.length > 0 && shouldValidateOrgNo) {\r\n setInvoiceFields([]);\r\n }\r\n if (!shouldValidateOrgNo) {\r\n var newFields = [\"Name\", \"Telephone1\", \"Address1\", \"Address2\", \"Zip\", \"City\", \"Email\"];\r\n if (showVatField && europeVAT()) {\r\n newFields.push(\"vatNo\");\r\n }\r\n setInvoiceFields(newFields);\r\n }\r\n if (orders[currentLeaderNo]?.invoice?.orgNo && orders[currentLeaderNo].invoice.orgNo.length > 0) {\r\n handleValueChange(orders[currentLeaderNo].invoice.orgNo, \"OrgNo\");\r\n }\r\n }\r\n } else {\r\n setGlnOrgFields([]);\r\n setInvoiceFields([]);\r\n setLastValidVatNo(\"\");\r\n setVatNoStatus(\"\");\r\n }\r\n\r\n checkHeights();\r\n\r\n const tempOrders = deepClone(orders[currentLeaderNo]);\r\n\r\n runInAction(() => {\r\n updateOrder(tempOrders, currentLeaderNo);\r\n });\r\n }\r\n }, [selectedOption, currentType, selectedCountry, showVatField]);\r\n\r\n useEffect(() => {\r\n var currentVatNo = getFieldValue(\"vatNo\", orders, currentLeaderNo);\r\n if (currentVatNo == lastValidVatNo && lastValidVatNo != \"\") {\r\n if (mainEvent.allowReverseCharge || true) {\r\n setApplyEuVat(true);\r\n setVatNoStatus(\"ok\");\r\n }\r\n } else if (currentVatNo != lastValidVatNo && lastValidVatNo != \"\" && currentVatNo.length > 0) {\r\n setApplyEuVat(false);\r\n setVatNoStatus(\"error\");\r\n } else {\r\n setApplyEuVat(false);\r\n setVatNoStatus(\"\");\r\n }\r\n }, [lastValidVatNo, orders]);\r\n\r\n const loadVatNo = (no) => {\r\n let key = \"26e46901d1bb903a5b69fc1eba05046f\";\r\n var lastValid = \"!\";\r\n\r\n Axios.get(`https://euvatapi.com/api/v1/validate?access_key=${key}&vat_number=${no}`)\r\n .then((res) => {\r\n if ((res.status = 200)) {\r\n if (res.data.valid) {\r\n setLastValidVatNo(no);\r\n return;\r\n } else {\r\n console.error(\"VAT failed validation\");\r\n }\r\n } else {\r\n console.error(\"VAT failed validation\");\r\n }\r\n })\r\n .catch((err) => {\r\n console.error(err);\r\n });\r\n setLastValidVatNo(lastValid);\r\n };\r\n\r\n const finalValid = () => {\r\n runInAction(() => {\r\n let filteredValidations = validations.filter((v) => !String(v.id).includes(\"Telephone1\"));\r\n if (currentType != \"person\") {\r\n filteredValidations = validations;\r\n }\r\n let fails = filteredValidations.filter((v) => v.valid == false && String(v.id).includes(\"INVOICE_\"));\r\n filteredValidations.find((v) => v.label == \"PaymentOption\").valid = fails.length == 0 || selectedOption == \"dibs\" || selectedOption === \"stripe\" ? true : false;\r\n });\r\n if (selectedOption != \"\") {\r\n var order = orders[currentLeaderNo];\r\n var newOrder = deepClone(order);\r\n var type = newOrder[\"invoice\"];\r\n var newType = undefined;\r\n if (!type) {\r\n newType = {};\r\n } else {\r\n newType = deepClone(type);\r\n }\r\n var p = true;\r\n if (selectedOption == \"dibs\") {\r\n newType = {};\r\n p = true;\r\n } else if (selectedOption === \"stripe\") {\r\n newType = {};\r\n p = true;\r\n } else if (selectedOption == \"invoice\" && validFields) {\r\n let em = newType[\"email\"] == undefined ? \"\" : newType[\"email\"];\r\n if (invoiceFieldValidator(em, \"Email\")) {\r\n newType[\"inExchangeRecipentId\"] = \"\";\r\n }\r\n p = true;\r\n }\r\n if (p) {\r\n runInAction(() => {\r\n let filteredValidations = validations.filter((v) => !String(v.id).includes(\"Telephone1\"));\r\n if (currentType != \"person\") {\r\n filteredValidations = validations;\r\n }\r\n let fails = filteredValidations.filter((v) => v.valid == false && String(v.id).includes(\"INVOICE_\"));\r\n let willBeValid = fails == 0;\r\n\r\n if (currentType != \"person\") {\r\n if ((!orders[currentLeaderNo]?.invoice?.orgNo || orders[currentLeaderNo]?.invoice?.orgNo.length < 1) && ognRequired(\"OrgNo\")) {\r\n filteredValidations.find((v) => v.id == \"INVOICE_OrgNo\").valid = false;\r\n willBeValid = false;\r\n } else {\r\n filteredValidations.find((v) => v.id == \"INVOICE_OrgNo\").valid = true;\r\n }\r\n }\r\n\r\n if (willBeValid && !order.isActive) orders[currentLeaderNo].isActive = \"temp\";\r\n filteredValidations.find((v) => v.label == \"PaymentOption\").valid = willBeValid || selectedOption == \"dibs\" || selectedOption === \"stripe\" ? true : false;\r\n });\r\n }\r\n }\r\n };\r\n\r\n //final validation\r\n useEffect(() => {\r\n finalValid();\r\n }, [selectedOption, paymentType, orders, validFields, showGLNWindow]);\r\n\r\n // This component has grown to complex, because of the many different states and effects that are needed to make it work.\r\n // I can not understand why this component is so complex, and I think it should be refactored to be more simple.\r\n // This effect checks if the orgnNo is valid based on if there is fields generated based on the input, if valid there will be invoice fields.\r\n // This is a work around and it is not a good solution.\r\n useEffect(() => {\r\n if (hasOrgNoValidation(selectedCountry.countryCode) && orgNoRef?.current?.length >= 4 && invoiceFields.length === 0) {\r\n setOrgNoValid(false);\r\n } else setOrgNoValid(true);\r\n }, [ognRequired, orgNoRef, selectedCountry, invoiceFields]);\r\n\r\n const handleValueChange = (v, t) => {\r\n let order = orders[currentLeaderNo];\r\n let newOrder = deepClone(order);\r\n let type = newOrder[\"invoice\"];\r\n let newType = undefined;\r\n let value = v;\r\n\r\n if (!type) {\r\n newType = {};\r\n } else {\r\n newType = deepClone(type);\r\n }\r\n\r\n if (t === \"OrgNo\") {\r\n value = value.replace(/[^0-9.]/g, \"\");\r\n }\r\n\r\n let isValid = invoiceFieldValidator(value, t, selectedCountry.countryCode, t == \"Telephone1\" ? currentRegex : \"\", currentType);\r\n\r\n if (!newType[\"countryId\"]) {\r\n newType[\"countryId\"] = selectedCountry.value;\r\n }\r\n\r\n if (t == \"OrgNo\" && isValid && currentType != \"person\") {\r\n if (orgNoRef.current != value) {\r\n if (orgNoRef.current != \"\" && hasOrgNoValidation(selectedCountry.countryCode)) {\r\n newType = {};\r\n }\r\n }\r\n orgNoRef.current = value;\r\n }\r\n\r\n if (t == \"OrgNo\" && isValid && currentType != \"person\") {\r\n let d = \"\";\r\n if (settings.paymentGrid[selectedCountry?.name?.toLowerCase()] != undefined) {\r\n d = settings.paymentGrid[selectedCountry.name.toLowerCase()];\r\n } else {\r\n d = settings.paymentGrid[\"global\"];\r\n }\r\n if (!glnOrgFields.includes(\"GLN\")) {\r\n let fieldsToAdd = [\"OrgNo\"];\r\n if (selectedCountry.swedishCountry) {\r\n fieldsToAdd.push(\"GLN\");\r\n }\r\n\r\n setGlnOrgFields(fieldsToAdd);\r\n }\r\n if (hasOrgNoValidation(selectedCountry.countryCode)) {\r\n Axios.get(`./api/invoice/testexchange/${value}?eventId=${environment.eventId}`)\r\n .then((res) => {\r\n if ((res.status = 200)) {\r\n if (res.data.parties.length > 0) {\r\n if (res.data.parties.length > 1) {\r\n setLockGLN(true);\r\n var cGLN = orders[currentLeaderNo]?.invoice?.gLN;\r\n if (!cGLN) {\r\n cGLN = orders[currentLeaderNo]?.invoice?.gln;\r\n }\r\n if (cGLN) {\r\n let r = res.data.parties.find((a) => a.gln == cGLN);\r\n setGLNList([r]);\r\n onSuccess(r);\r\n } else {\r\n setGLNList(res.data.parties.sort((a, b) => a.name > b.name && (1 || -1)));\r\n }\r\n } else {\r\n setGLNList([res.data.parties[0]]);\r\n setLockGLN(true);\r\n onSuccess(res.data.parties[0]);\r\n }\r\n } else {\r\n setGLNList([]);\r\n onSuccess(null);\r\n setLockGLN(false);\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n setLockGLN(false);\r\n console.error(err);\r\n });\r\n\r\n let on = value.replace(\"-\", \"\").replace(\" \", \"\");\r\n Axios.get(`./api/invoice/GetOrgRegex/${on.slice(0, 6) + \"-\" + on.slice(6)}`)\r\n .then((res) => {\r\n if ((res.status = 200)) {\r\n if (res.data) {\r\n setCurrentRegex(RegExp(res.data));\r\n } else {\r\n setCurrentRegex(initialRegex);\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n console.error(err);\r\n setCurrentRegex(initialRegex);\r\n });\r\n\r\n Axios.get(`./api/invoice/GetOrgInfo/${on.slice(0, 6) + \"-\" + on.slice(6)}`)\r\n .then((res) => {\r\n if ((res.status = 200)) {\r\n if (res.data) {\r\n setCurrentInfo(res.data);\r\n } else {\r\n setCurrentInfo(null);\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n console.error(err);\r\n setCurrentInfo(null);\r\n });\r\n } else {\r\n if (invoiceFields.length < 3) {\r\n setGLNList([]);\r\n setLockGLN(false);\r\n onSuccess(null);\r\n }\r\n }\r\n } else if (t == \"OrgNo\" && !isValid && currentType != \"person\") {\r\n if (glnOrgFields.includes(\"GLN\")) {\r\n setGlnOrgFields([\"OrgNo\"]);\r\n }\r\n var shouldValidateOrgNo = hasOrgNoValidation(selectedCountry?.countryCode);\r\n if (shouldValidateOrgNo) {\r\n setInvoiceFields([]);\r\n }\r\n newType = {};\r\n }\r\n\r\n newType[toCamelCase(t)] = value;\r\n newOrder[\"invoice\"] = newType;\r\n updateOrder(newOrder, currentLeaderNo);\r\n\r\n runInAction(() => {\r\n var tempV = validations.find((v) => v.id == \"INVOICE_\" + t);\r\n if (tempV) {\r\n tempV.valid = isValid;\r\n }\r\n\r\n let filteredValidations = validations.filter((v) => !String(v.id).includes(\"Telephone1\"));\r\n if (currentType != \"person\") {\r\n filteredValidations = validations;\r\n }\r\n let fails = filteredValidations.filter((v) => v.valid == false && String(v.id).includes(\"INVOICE_\") && !String(v.id).includes(t));\r\n fails = fails + (isValid ? 0 : 1);\r\n filteredValidations.find((v) => v.label == \"PaymentOption\").valid = fails == 0 || selectedOption == \"dibs\" || selectedOption === \"stripe\" ? true : false;\r\n });\r\n\r\n if (isValid) {\r\n //full validation\r\n var allAreValid = true;\r\n let toValidate = validations.filter((v) => v.id.toString().includes(\"INVOICE_\"));\r\n for (let i = 0; i < toValidate.length; i++) {\r\n let tar = toValidate[i].id.split(\"_\")[1];\r\n let val = newType[toCamelCase(tar)];\r\n let v = invoiceFieldValidator(val == undefined ? \"\" : val, tar, selectedCountry.countryCode, tar == \"Telephone1\" ? currentRegex : \"\", currentType);\r\n if (!v) {\r\n if (currentType == \"person\" && (tar == \"Telephone1\" || tar == \"OrgNo\")) {\r\n //currently this validates ALL REF NOs but we still warn if incorrect\r\n v = true;\r\n } else if ((tar == \"Email\" && newType[\"electronicInvoice\"]) || newType[\"inExchangeRecipentId\"]?.length > 0) {\r\n v = true;\r\n } else if (tar == \"GLN\") {\r\n if (selectedCountry.countryCode != \"SWE\" || GLNList.length == 0) {\r\n v = true;\r\n }\r\n } else if (tar == \"GLN\" && paymentType == \"person\") {\r\n v = true;\r\n } else if (tar == \"Address2\" || tar == \"Address1\") {\r\n v = true;\r\n } else if (tar == \"CountryCode\" && paymentType == \"person\") {\r\n v = true;\r\n }\r\n if (!v) {\r\n allAreValid = false;\r\n }\r\n }\r\n runInAction(() => {\r\n toValidate[i].valid = v;\r\n });\r\n }\r\n setValidFields(allAreValid);\r\n if (allAreValid) {\r\n finalValid();\r\n }\r\n }\r\n };\r\n\r\n //selected a GLN number\r\n const onSuccess = (obj) => {\r\n setShowGLNWindow(false);\r\n if (obj == -1) {\r\n return;\r\n }\r\n\r\n let f = [\"Name\", \"Telephone1\", \"Address1\", \"Address2\", \"Zip\", \"City\"]; //,\"InExchangeRecipentId\",\"ElectronicInvoice\"\r\n\r\n let cc = obj ? (obj.countryCode == \"SE\" ? \"SWE\" : obj.countryCode) : selectedCountry.countryCode;\r\n if (obj != null && cc == selectedCountry.countryCode) {\r\n let order = orders[currentLeaderNo];\r\n let newOrder = deepClone(order);\r\n let type = newOrder[\"invoice\"];\r\n let newType = undefined;\r\n\r\n if (!type) {\r\n newType = {};\r\n } else {\r\n newType = deepClone(type);\r\n }\r\n newType[toCamelCase(\"InExchangeRecipentId\")] = obj.companyId;\r\n newType[toCamelCase(\"vatNo\")] = obj.vatNo;\r\n newType[toCamelCase(\"ElectronicInvoice\")] = obj.receiveElectronicInvoiceCapability == \"ReceivingElectronicInvoices\" ? true : false;\r\n newType[toCamelCase(\"Address1\")] = obj.streetName;\r\n newType[toCamelCase(\"Zip\")] = obj.postalZone;\r\n newType[toCamelCase(\"City\")] = obj.city;\r\n newType[toCamelCase(\"Name\")] = obj.name;\r\n newType[toCamelCase(\"GLN\")] = obj.gln;\r\n newType[toCamelCase(\"Telephone1\")] = newType[\"telephone1\"] ? newType[\"telephone1\"] : \"\";\r\n newType[toCamelCase(\"CountryId\")] = selectedCountry.value; // obj.countryCode == \"SE\" ? \"SWE\" : obj.countryCode;\r\n newType[toCamelCase(\"Email\")] = newType[toCamelCase(\"ElectronicInvoice\")] ? \"\" : obj.email;\r\n\r\n if (obj.receiveElectronicInvoiceCapability != \"ReceivingElectronicInvoices\") {\r\n f.push(\"Email\");\r\n }\r\n\r\n newOrder[\"invoice\"] = newType;\r\n runInAction(() => {\r\n updateOrder(newOrder, currentLeaderNo);\r\n });\r\n } else {\r\n checkHeights();\r\n setGlnOrgFields([\"OrgNo\"]);\r\n f.push(\"Email\");\r\n runInAction(() => {\r\n updateOrder(orders[currentLeaderNo], currentLeaderNo);\r\n });\r\n }\r\n if (showVatField && europeVAT()) {\r\n f.push(\"vatNo\");\r\n }\r\n setInvoiceFields(f);\r\n scrollToAnchor();\r\n\r\n setTimeout(() => {\r\n finalValid();\r\n setTimerExpires(true);\r\n }, 500);\r\n };\r\n\r\n const toggleWindow = () => {\r\n setShowGLNWindow(!showGLNWindow);\r\n };\r\n\r\n const ivfRequired = (di) => {\r\n if (di == \"vatNo\") {\r\n return !applyEuVat;\r\n }\r\n if (di == \"Address1\") {\r\n return false;\r\n } else if (di == \"OrgNo\" && paymentType == \"person\") {\r\n //SSN check here\r\n return isValid(di, getFieldValue(di, orders, currentLeaderNo), selectedCountry.countryCode, di == \"Telephone1\" ? currentRegex : \"\", currentType);\r\n } else if (di == \"Telephone1\") {\r\n if (getFieldValue(di, orders, currentLeaderNo).length > 0 && currentRegex) {\r\n return !currentRegex.test(String(getFieldValue(di, orders, currentLeaderNo)));\r\n } else {\r\n return false;\r\n }\r\n } else {\r\n return isValid(di, getFieldValue(di, orders, currentLeaderNo), selectedCountry.countryCode, di == \"Telephone1\" ? currentRegex : \"\", currentType);\r\n }\r\n };\r\n\r\n const ognRequired = (di) => {\r\n if (selectedCountry?.countryCode?.toUpperCase() !== \"SWE\" || selectedCountry?.countryCode?.toUpperCase() !== \"NOR\") {\r\n return false;\r\n }\r\n\r\n if (di == \"GLN\" && GLNList.length == 0) {\r\n return false;\r\n } else if (di == \"OrgNo\" && paymentType == \"comgov\") {\r\n let c = isGovernment(getFieldValue(di, orders, currentLeaderNo), selectedCountry.countryCode) ? \"government\" : \"company\";\r\n c = \"comgov\";\r\n let d = \"\";\r\n if (settings.paymentGrid[selectedCountry?.name?.toLowerCase()] != undefined) {\r\n d = settings.paymentGrid[selectedCountry?.name?.toLowerCase()];\r\n } else {\r\n d = settings.paymentGrid[\"global\"];\r\n }\r\n if (!d.includes(c)) {\r\n return true;\r\n } else {\r\n return isValid(di, getFieldValue(di, orders, currentLeaderNo), selectedCountry.countryCode, null, currentType);\r\n }\r\n } else {\r\n return isValid(di, getFieldValue(di, orders, currentLeaderNo), selectedCountry.countryCode, null, currentType);\r\n }\r\n };\r\n\r\n const onEmail = () => {\r\n let b = !showEmail;\r\n setShowEmail(b);\r\n\r\n let f = [...invoiceFields];\r\n\r\n if (b) {\r\n if (!invoiceFields.includes(\"Email\")) {\r\n f.push(\"Email\");\r\n }\r\n } else {\r\n if (invoiceFields.includes(\"Email\")) {\r\n f.splice(f.indexOf(\"Email\"), 1);\r\n handleValueChange(\"\", \"Email\");\r\n }\r\n }\r\n if (f.includes(\"vatNo\")) {\r\n f.splice(f.indexOf(\"vatNo\"), 1);\r\n f.push(\"vatNo\");\r\n }\r\n\r\n setInvoiceFields(f);\r\n };\r\n\r\n const emailBool = () => {\r\n let b = true;\r\n if (\r\n invoiceFields.length < 1 ||\r\n selectedOption == \"\" ||\r\n (paymentType == \"person\" && selectedOption == \"dibs\") ||\r\n (paymentType == \"person\" && selectedOption == \"stripe\") ||\r\n (paymentType == \"person\" && selectedOption == \"invoice\") ||\r\n isGovernment(getFieldValue(\"orgNo\", orders, currentLeaderNo), selectedCountry.countryCode) ||\r\n ((paymentType == \"comgov\" || paymentType == \"company\") && GLNList.length == 0) ||\r\n (getFieldValue(\"electronicInvoice\", orders, currentLeaderNo), selectedCountry.countryCode)\r\n ) {\r\n b = false;\r\n }\r\n return b;\r\n };\r\n\r\n const vatNoBlur = (e) => {};\r\n\r\n const refNoBlur = (e) => {\r\n if (ivfRequired(\"Telephone1\") && String(currentRegex) != String(initialRegex)) {\r\n setRefNoWarning(true);\r\n } else {\r\n setRefNoWarning(false);\r\n }\r\n };\r\n\r\n const refNoFocus = (e) => {\r\n checkHeights();\r\n setRefNoWarning(false);\r\n };\r\n\r\n const infoPaneIsLink = (info) => {\r\n const l = info.toLowerCase();\r\n if (info && (l.startsWith(\"http\") || l.startsWith(\"www\") || l.endsWith(\".com\") || l.endsWith(\".net\") || l.endsWith(\".se\"))) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const europeVAT = () => {\r\n const eventCountry = environment.eventCountry;\r\n return selectedCountry && selectedCountry?.europeCountry && eventCountry?.europeCountry && (selectedCountry.value !=eventCountry?.countryId)\r\n }\r\n\r\n const validateVatNo = () => loadVatNo(getFieldValue(\"vatNo\", orders, currentLeaderNo));\r\n\r\n const runtimeValidation = useCallback(\r\n (type) => {\r\n const valitypety = validations.find((v) => v.id == `INVOICE_${type}`);\r\n if (validate && valitypety?.valid === false) {\r\n return false;\r\n }\r\n if (valitypety?.valid === false && getFieldValue(type, orders, currentLeaderNo)?.length > 0) {\r\n return false;\r\n }\r\n return undefined;\r\n },\r\n [currentLeaderNo, orders, validate, getFieldValue, validations]\r\n );\r\n\r\n const validatedInvoiceFields = useMemo(() => (invoiceFields ?? [])?.map((type) => ({ type, valid: runtimeValidation(type) })), [invoiceFields, runtimeValidation]);\r\n const validatedglnOrgFields = useMemo(() => (glnOrgFields ?? [])?.map((type) => ({ type, valid: runtimeValidation(type) })), [glnOrgFields, runtimeValidation]);\r\n\r\n if (settings.hidden) {\r\n return null;\r\n } else {\r\n return (\r\n <>\r\n {validatedglnOrgFields.length > 0\r\n ? validatedglnOrgFields.map(({ type, valid }) => {\r\n return (\r\n \r\n {showGLNWindow && type == \"GLN\" ? 1 ? \" pointer\" : \"\")}\r\n value={getFieldValue(type, orders, currentLeaderNo)}\r\n readonly={type == \"GLN\" ? lockGLN : false}\r\n onChange={(val) => (type == \"CountryCode\" ? handleValueChange(val, type) : handleValueChange(val?.target?.value ?? val, type))}\r\n label={type}\r\n valid={valid}\r\n staticLabel={true}\r\n type={type}\r\n invoice={true}\r\n lang={environment.lang}\r\n eventId={environment.eventId}\r\n onClick={type == \"GLN\" && GLNList.length > 1 ? toggleWindow : undefined}\r\n placeholder={type == \"GLN\" && GLNList.length > 1 ? glnFieldPlaceholder : undefined}\r\n autocomplete={convertAutocomplete(type)}\r\n />\r\n {type == \"OrgNo\" && !ognRequired(\"OrgNo\") && currentInfo ? (\r\n \r\n {infoPaneIsLink(currentInfo) ? (\r\n \r\n {currentInfo}\r\n \r\n ) : (\r\n {currentInfo} \r\n )}\r\n \r\n ) : null}\r\n {type == \"OrgNo\" && orgNoValid === false ? (\r\n \r\n \r\n ) : null}\r\n \r\n );\r\n })\r\n : null}\r\n {(validatedInvoiceFields.length > 0 && selectedOption == \"invoice\") || (selectedOption == \"typebs\" && showVatField)\r\n ? validatedInvoiceFields.map(({ type, valid }) => {\r\n return (\r\n \r\n (type == \"CountryCode\" ? handleValueChange(val, type) : handleValueChange(val?.target?.value ?? val, type))}\r\n label={type == \"OrgNo\" && paymentType == \"person\" ? \"SSN\" : type == \"Name\" && paymentType == \"person\" ? \"PersonName\" : type}\r\n staticLabel={true}\r\n type={type}\r\n valid={valid}\r\n invoice={true}\r\n lang={environment.lang}\r\n eventId={environment.eventId}\r\n noLabel={type == \"InExchangeRecipentId\" || type == \"ElectronicInvoice\" || (type == \"vatNo\" && !showVatField) ? true : false}\r\n noInputField={type == \"InExchangeRecipentId\" || type == \"ElectronicInvoice\" || (type == \"vatNo\" && !showVatField) ? true : false}\r\n onBlur={type == \"vatNo\" ? vatNoBlur : type == \"Telephone1\" ? refNoBlur : null}\r\n onFocus={type == \"Telephone1\" ? refNoFocus : null}\r\n autocomplete={convertAutocomplete(type)}\r\n appendButton={\r\n type == \"vatNo\" && showVatField ? (\r\n vatNoStatus == \"ok\" ? (\r\n \r\n \r\n )\r\n ) : null\r\n }\r\n />\r\n {type == \"Telephone1\" && refNoWarning && getFieldValue(type, orders, currentLeaderNo).length > 0 ? (\r\n \r\n
\r\n ) : null}\r\n \r\n );\r\n })\r\n : null}\r\n {selectedOption == \"dibs\" ? (handleValueChange(val?.target?.value ?? val, \"vatNo\"))}\r\n label={\"vatNo\"}\r\n staticLabel={true}\r\n type={\"vatNo\"}\r\n //valid={valid}\r\n invoice={true}\r\n lang={environment.lang}\r\n eventId={environment.eventId}\r\n noLabel={!showVatField}\r\n noInputField={!showVatField}\r\n onBlur={vatNoBlur}\r\n appendButton={showVatField ? (\r\n vatNoStatus == \"ok\" ? (\r\n \r\n \r\n )\r\n ) : null\r\n }\r\n />\r\n \r\n : null}\r\n {emailBool() ? onEmail()}>Email-invoice : null}\r\n \r\n );\r\n }\r\n});\r\n","import React, { useMemo } from \"react\";\r\nimport { Tooltip } from \"@material-ui/core\";\r\nimport EventLabel from \"../../../components/EventLabel\";\r\n\r\nexport const getCalculatedOrderRow = (orderRow, breakouts, orders, orderId, mainEvent, modules) => {\r\n const targetBreakout = orderRow.eventId == mainEvent.eventId ? mainEvent : breakouts.find((b) => b.eventId == orderRow.eventId);\r\n\r\n const getVatExempt = () => {\r\n const order = orders?.find((a) => a.leader) || orders?.[0];\r\n if (!order?.[\"orderExtra\"] || !targetBreakout?.allowReverseCharge) return false;\r\n return order[\"orderExtra\"].find((a) => a.name == \"vatExempt\")?.value;\r\n };\r\n\r\n const calculateRowDiscount = () => {\r\n let discounts = orders.find((o) => o.orderId === orderId)?.discounts || [];\r\n let discountAmount = 0;\r\n\r\n const amount = orderRow.amount;\r\n const fullDiscount = discounts.find((x) => x.targetEventId === null && x.valueType === \"Percent\" && x.value === 100);\r\n\r\n if (fullDiscount != null) {\r\n return amount;\r\n }\r\n\r\n if (orderId > 0 && orders.find((o) => o.orderId === orderId)?.orderRow?.find((o) => o.eventId === orderRow.eventId)) {\r\n discountAmount = orders.find((o) => o.orderId === orderId)?.orderRow?.find((o) => o.eventId === orderRow.eventId)?.discount;\r\n }\r\n\r\n if (orderId > 0) {\r\n discounts = orders.find((o) => o.orderId === orderId)?.discounts || [];\r\n }\r\n\r\n discounts\r\n .filter((d) => (d.targetEventId === orderRow.eventId && d.value != 0) || (d.targetEventId === null && d.value != 0))\r\n .sort((a, b) => a.sortOrder - b.sortOrder)\r\n .forEach((d) => {\r\n const decrementValue = d.valueType === \"Percent\" ? (amount - discountAmount) * (d.value / 100) : d.value;\r\n\r\n if (!d?.allowNegative && (discountAmount + decrementValue < 0 || discountAmount + decrementValue > amount)) {\r\n discountAmount = amount;\r\n } else {\r\n discountAmount += decrementValue;\r\n }\r\n });\r\n return discountAmount;\r\n };\r\n\r\n const calculateVatAmount = () => {\r\n const discountAmount = calculateRowDiscount();\r\n const amount = orderRow.amount;\r\n\r\n if (getVatExempt() || !orderRow.vatPercent) {\r\n return 0;\r\n }\r\n\r\n return (amount - discountAmount) * (orderRow.vatPercent / 100);\r\n };\r\n\r\n const calculateRowSum = () => {\r\n const discountAmount = calculateRowDiscount();\r\n const vatAmount = calculateVatAmount();\r\n const amount = orderRow.amount;\r\n return amount - discountAmount + vatAmount;\r\n };\r\n\r\n if (targetBreakout)\r\n return {\r\n orderId: orderId,\r\n eventId: orderRow.eventId,\r\n orderRowId: orderRow.orderRowId,\r\n amount: orderRow.amount,\r\n vatAmount: calculateVatAmount(),\r\n discountAmount: calculateRowDiscount(),\r\n rowTotal: calculateRowSum(),\r\n vatPercent: getVatExempt() ? 0 : orderRow.vatPercent,\r\n status: orderRow.status?.trim() ?? \"Booked\",\r\n };\r\n};\r\n\r\nexport const ConfirmationOrderRow = ({ orderRow, breakouts, displayConfirmationSettings, environment, mainEvent }) => {\r\n const { amount, vatAmount, discountAmount, rowTotal, vatPercent, status } = orderRow;\r\n\r\n const targetBreakout = useMemo(() => {\r\n if (orderRow.hotelAllotmentPricingId) return orderRow;\r\n if (orderRow.eventId == mainEvent.eventId) return mainEvent;\r\n return breakouts.find((b) => b.eventId == orderRow.eventId);\r\n }, [orderRow?.eventId, mainEvent?.eventId, breakouts]);\r\n\r\n const name = useMemo(() => {\r\n const eds = targetBreakout?.eventDisplayLanguage?.find((eds) => eds.languageCode == environment.lang && eds.alternative == false);\r\n return eds?.name ?? targetBreakout?.name;\r\n }, [targetBreakout, environment]);\r\n\r\n const description = useMemo(() => {\r\n const eds = targetBreakout?.eventDisplayLanguage?.find((eds) => eds.languageCode == environment.lang && eds.alternative == false);\r\n return eds?.description ?? targetBreakout?.description;\r\n }, [targetBreakout, environment]);\r\n\r\n if (!targetBreakout && !orderRow?.hotelAllotmentPricingId) return null;\r\n if (!orderRow?.hotelAllotmentPricingId && environment.eventId == orderRow.eventId && !displayConfirmationSettings[\"ShowConfMainEvent\"]) return null;\r\n if (!orderRow?.hotelAllotmentPricingId && environment.eventId !== targetBreakout.eventId && !displayConfirmationSettings[\"ShowConfFreeRows\"] && !rowTotal) return null;\r\n if (!displayConfirmationSettings[\"ShowConfCancelledRows\"] && (status == \"Cancelled\" || status == \"Rejected\")) return null;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {name} \r\n \r\n \r\n {displayConfirmationSettings[\"ShowConfRowStatus\"] ? (\r\n \r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfStartDate\"] || displayConfirmationSettings[\"ShowConfStartTime\"] ? (\r\n \r\n {displayConfirmationSettings[\"ShowConfStartDate\"] ? new Date(targetBreakout.startDateTime).toLocaleDateString() : null}\r\n {displayConfirmationSettings[\"ShowConfStartTime\"] && !orderRow?.hotelAllotmentPricingId\r\n ? (displayConfirmationSettings[\"ShowConfStartDate\"] ? \" \" : \"\") + new Date(targetBreakout.startDateTime).toLocaleTimeString([], { timeStyle: \"short\" })\r\n : null}\r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfEndDate\"] || displayConfirmationSettings[\"ShowConfEndTime\"] ? (\r\n \r\n {displayConfirmationSettings[\"ShowConfEndDate\"] ? new Date(targetBreakout.endDateTime).toLocaleDateString() : null}\r\n {displayConfirmationSettings[\"ShowConfEndTime\"] && !orderRow?.hotelAllotmentPricingId\r\n ? (displayConfirmationSettings[\"ShowConfEndDate\"] ? \" \" : \"\") + new Date(targetBreakout.endDateTime).toLocaleTimeString([], { timeStyle: \"short\" })\r\n : null}\r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfAmount\"] ? (\r\n \r\n {Math.round(amount, 2)} {` ${environment.currency}`}\r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfDiscount\"] ? (\r\n \r\n {Math.round(discountAmount, 2)} {` ${environment.currency}`}\r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfVatAmount\"] ? (\r\n \r\n {Math.round(vatAmount, 2)} {` ${environment.currency}`}\r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfVatPercent\"] ? (\r\n \r\n {vatPercent}\r\n {`%`}\r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfQuantity\"] ? {1} : null}\r\n {displayConfirmationSettings[\"ShowConfRowTotal\"] ? (\r\n \r\n {Math.round(rowTotal, 2)} {` ${environment.currency}`}\r\n \r\n ) : null}\r\n \r\n {displayConfirmationSettings[\"ShowConfDescription\"] && description ? (\r\n \r\n {description} \r\n \r\n ) : null}\r\n \r\n );\r\n};\r\n","import React, { useState, useEffect, useMemo } from \"react\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport FormGroup from \"@material-ui/core/FormGroup\";\r\nimport CheckCircleIcon from \"@material-ui/icons/CheckCircle\";\r\nimport { runInAction } from \"mobx\";\r\nimport { InvoiceFieldsNew } from \"../InvoiceFieldsNew/InvoiceFieldsNew\";\r\nimport { toJS } from \"mobx\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\nimport { CountrySelect } from \"../CountrySelect/CountrySelect\";\r\nimport PersonOutline from \"@material-ui/icons/PersonOutline\";\r\nimport Ballot from \"@material-ui/icons/Ballot\";\r\nimport ReceiptIcon from \"@material-ui/icons/Receipt\";\r\nimport CreditCardIcon from \"@material-ui/icons/CreditCard\";\r\nimport { deepClone } from \"../../helpers/objectHelper\";\r\nimport { getCalculatedOrderRow } from \"../OrderSummary/components/ConfirmationOrderRow\";\r\nimport { useRef } from \"react\";\r\n\r\nconst PaymentOptionsNew = (props) => {\r\n const invoiceAnchor = useRef();\r\n const [selectedCountry, setSelectedCountry] = useState(\"\");\r\n const [regionGroup, setRegionGroup] = useState(\"\");\r\n const [currentOptions, setCurrentOptions] = useState([\"\"]);\r\n const [currentType, setCurrentType] = useState(\"\");\r\n const [ix, setIx] = useState(\"\");\r\n const [selectedCountryCode, setSelectedCountryCode] = useState(\"\");\r\n const [fixedCountry, setFixedCountry] = useState(false);\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n\r\n const { settings, addOrUpdate, activePersonNo, orders, updateOrder, current, contentModuleId, validations, checkHeights, environment, eventId, mainEvent, setValidatePaymentFields, validatePaymentFields } = props;\r\n\r\n const [paymentMethods, setPaymentMethods] = useState([]);\r\n const [selectedOption, setSelectedOption] = useState(\"\");\r\n\r\n const orderList = useMemo(() => toJS(orders), [orders]);\r\n\r\n const setLoad = (b) => setIsLoaded(b);\r\n const findLeader = () => {\r\n var v = orderList.find((o) => o.leader);\r\n if (!v) {\r\n v = orderList.find((o) => o.orderId == o.orderGroupId);\r\n }\r\n if (v) {\r\n return orderList.indexOf(v);\r\n } else {\r\n return 0;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (validatePaymentFields) {\r\n var val = validations.find((v) => v.label == \"PaymentOption\");\r\n if (val) {\r\n runInAction(() => {\r\n val.valid = false;\r\n });\r\n }\r\n }\r\n }, [validatePaymentFields]);\r\n\r\n //Test loading with different Leader and different ActivePersonNo, both were they're == and !=\r\n //also useMemo on countryselect\r\n useEffect(() => {\r\n var no = findLeader();\r\n var no2 = findLeader();\r\n let isTemp = orderList.find((o) => o.isActive == \"temp\") ? true : false;\r\n if ((orderList[no]?.orderId || isTemp) && orderList[no]?.invoice) {\r\n if (!orderList[no].invoice) {\r\n no = no2;\r\n }\r\n var orderInvoiceArray = Object.keys(orderList[no].invoice).map((key) => ({\r\n name: key,\r\n value: orderList[no].invoice[key],\r\n }));\r\n var empty = orderInvoiceArray.filter((a) => a.value == null);\r\n var pt = orderList[no].invoice == {} || empty.length > 10 ? \"dibs\" : \"invoice\";\r\n var pm = orderList[no].invoice.telephone1 ? \"comgov\" : \"person\";\r\n\r\n if (no != no2) {\r\n runInAction(() => {\r\n props.activePersonNo = no2;\r\n });\r\n }\r\n if (pt != \"dibs\" || pt != \"stripe\") {\r\n setCurrentType(pm);\r\n setSelectedOption(pt);\r\n }\r\n\r\n if (orderList[no]?.invoice?.countryCode) {\r\n setSelectedCountryCode(orderList[no].invoice.countryCode);\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (selectedOption != \"\") {\r\n runInAction(() => {\r\n current.payMethod = selectedOption;\r\n });\r\n }\r\n }, [selectedOption]);\r\n\r\n useEffect(() => {\r\n if (orderList[activePersonNo]?.orderId || orderList[activePersonNo]?.isActive) {\r\n return;\r\n }\r\n\r\n setCurrentType(\"\");\r\n setSelectedOption(\"\");\r\n setPaymentMethods([]);\r\n if (settings.paymentGrid[\"only\"] && settings.paymentGrid[\"only\"].length == 1) {\r\n let t = settings.paymentGrid[\"only\"][0].countries[0];\r\n onCountry(t.value, t);\r\n setLoad(true);\r\n setFixedCountry(true);\r\n } else {\r\n setFixedCountry(false);\r\n }\r\n }, [selectedCountry]);\r\n\r\n useEffect(() => {\r\n if (orderList[activePersonNo]?.orderId || orderList[activePersonNo]?.isActive) {\r\n return;\r\n } //test\r\n if (currentOptions.length == 1) {\r\n if (selectedCountry != \"\") {\r\n setRegionGroup(regionGroup);\r\n setSelectedCountry(selectedCountry);\r\n setCurrentType(currentOptions[0]);\r\n setCurrentOptions([]); //test\r\n }\r\n }\r\n }, [selectedCountry, currentOptions]);\r\n\r\n const onCountry = (target, a, r = false) => {\r\n if (a == selectedCountry) {\r\n return;\r\n }\r\n\r\n let prefix = a?.name?.toLowerCase();\r\n\r\n setRegionGroup(prefix);\r\n setSelectedCountry(a);\r\n setIx(target);\r\n\r\n var val = validations.find((v) => v.label == \"PaymentOption\");\r\n if (val && val?.valid) {\r\n runInAction(() => {\r\n val.valid = false;\r\n });\r\n }\r\n\r\n let data = toJS(settings.paymentGrid);\r\n let opts = data[prefix];\r\n if (opts == undefined) {\r\n opts = data[\"global\"];\r\n prefix = \"global\";\r\n }\r\n if (opts !== undefined) {\r\n let options = [];\r\n if (opts.includes(\"comgov\")) {\r\n if (data[prefix + \" dibs comgov\"] || data[prefix + \" invoice comgov\"] || data[prefix + \" stripe comgov\"]) {\r\n options.push(\"comgov\");\r\n }\r\n }\r\n if (opts.includes(\"person\")) {\r\n if (data[prefix + \" dibs person\"] || data[prefix + \" invoice person\"] || data[prefix + \" stripe person\"]) {\r\n options.push(\"person\");\r\n }\r\n }\r\n\r\n setCurrentOptions(options);\r\n } else {\r\n setCurrentOptions([]);\r\n }\r\n\r\n if ((!orderList[activePersonNo]?.orderId && !orderList[activePersonNo]?.isActive) || r) {\r\n setSelectedOption(\"\");\r\n setCurrentType(\"\");\r\n }\r\n if (r) {\r\n runInAction(() => {\r\n orderList[activePersonNo].invoice = {};\r\n // delete orders[activePersonNo].orderId;\r\n updateOrder(orderList[activePersonNo]);\r\n });\r\n }\r\n };\r\n //what happens when we select dibs/invoice\r\n const onPaymentMethod = (m, d = null) => {\r\n setSelectedOption(m);\r\n var no = activePersonNo;\r\n var no2 = findLeader();\r\n if (!orderList[no]?.orderId) {\r\n no = no2;\r\n }\r\n if (!orderList[no]?.orderId) {\r\n runInAction(() => {\r\n let tempOrder = deepClone(orderList[no]);\r\n tempOrder.invoice = {};\r\n updateOrder(tempOrder, no);\r\n });\r\n }\r\n\r\n var currentPT = currentType;\r\n var data = settings.paymentGrid;\r\n var prefix = \"\";\r\n if (data[\"exceptions\"].includes(selectedCountry?.name)) {\r\n prefix = selectedCountry.name.toLowerCase();\r\n } else {\r\n prefix = \"global\";\r\n }\r\n\r\n if (currentType == \"comgov\") {\r\n let pms = [];\r\n if (data[prefix + \" \" + m + \" comgov\"]) {\r\n pms.push(\"comgov\");\r\n }\r\n if (pms.length == 1) {\r\n currentPT = pms[0];\r\n setCurrentType(currentPT);\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (currentType == \"\" || selectedCountry == \"\") {\r\n return;\r\n }\r\n\r\n if (!orderList[activePersonNo]?.orderId && !orderList[activePersonNo]?.isActive) {\r\n setSelectedOption(\"\");\r\n }\r\n\r\n var data = settings.paymentGrid;\r\n var prefix = \"\";\r\n\r\n if (data[\"exceptions\"].includes(selectedCountry?.name?.toLowerCase())) {\r\n prefix = selectedCountry.name.toLowerCase();\r\n } else {\r\n prefix = \"global\";\r\n }\r\n\r\n if (currentType == \"person\") {\r\n let l = [];\r\n if (data[prefix + \" dibs person\"]) {\r\n l.push(\"dibs\");\r\n }\r\n if (data[prefix + \" invoice person\"]) {\r\n l.push(\"invoice\");\r\n }\r\n if (data[prefix + \" stripe person\"]) {\r\n l.push(\"stripe\");\r\n }\r\n\r\n setPaymentMethods(l);\r\n if (l.length == 1) {\r\n onPaymentMethod(l[0]);\r\n }\r\n } else if (currentType == \"comgov\") {\r\n let l = [];\r\n if (data[prefix + \" dibs comgov\"]) {\r\n l.push(\"dibs\");\r\n }\r\n if (data[prefix + \" invoice comgov\"]) {\r\n l.push(\"invoice\");\r\n }\r\n if (data[prefix + \" stripe comgov\"]) {\r\n l.push(\"stripe\");\r\n }\r\n setPaymentMethods(l);\r\n if (l.length == 1) {\r\n onPaymentMethod(l[0]);\r\n }\r\n }\r\n\r\n const module = props.contentLayout.contentLayoutModules.find((clm) => clm.contentLayoutModuleId == props.contentLayoutModuleId);\r\n var newOrders = deepClone(toJS(orderList));\r\n if (newOrders.length > 0) {\r\n var targetOrder = newOrders.find((a) => a.leader);\r\n if (!targetOrder) {\r\n targetOrder = newOrders[0];\r\n }\r\n var index = newOrders.indexOf(targetOrder);\r\n if (targetOrder.invoice) {\r\n if (targetOrder.invoice.countryId) {\r\n setIx(targetOrder.invoice.countryId);\r\n delete targetOrder.invoice.countryId;\r\n }\r\n if (targetOrder.invoice.countryCode) {\r\n setSelectedCountryCode(targetOrder.invoice.countryCode);\r\n }\r\n }\r\n runInAction(() => {\r\n module.height = 150;\r\n updateOrder(targetOrder, index);\r\n });\r\n }\r\n }, [currentType, currentOptions]);\r\n\r\n const expand = (option) => {\r\n const module = props.contentLayout.contentLayoutModules.find((clm) => clm.contentLayoutModuleId == props.contentLayoutModuleId);\r\n const validity = validations.find((v) => v.id == contentModuleId);\r\n if (!module) return;\r\n let optionChanged = Boolean(current.payMethod !== option);\r\n runInAction(() => {\r\n current.payMethod = option;\r\n validity.valid = true;\r\n });\r\n if (optionChanged) {\r\n checkHeights();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n //make stuff work if selecting only 'free' events\r\n var flatOrderRowsList = orderList\r\n .map((o) => {\r\n if (o.orderRow) return [...o.orderRow.map((or) => getCalculatedOrderRow(or, props.breakouts, orderList, o.orderId, props.mainEvent, props.modules))];\r\n })\r\n .flat();\r\n\r\n const total =\r\n flatOrderRowsList\r\n ?.filter((item) => item?.orderRowId < 0 && item?.amount > 0)\r\n ?.map((item) => item?.amount - item?.discountAmount)\r\n ?.reduce((prev, next) => prev + next, 0) || 0;\r\n\r\n const shouldValidate = !(total === 0);\r\n if (validatePaymentFields !== shouldValidate) {\r\n setValidatePaymentFields(shouldValidate);\r\n }\r\n checkHeights();\r\n });\r\n\r\n if (settings.hidden) return null;\r\n if (!validatePaymentFields) return
;\r\n\r\n return (\r\n <>\r\n \r\n {!fixedCountry ? (\r\n <>\r\n
\r\n \r\n \r\n
\r\n
setLoad(b)}\r\n value={ix}\r\n eventId={environment.eventId}\r\n lang={environment.lang}\r\n onChange={(e, a, t) => onCountry(e, a, true)}\r\n selectGrid={settings.paymentGrid}\r\n useCode\r\n countryCode={selectedCountry?.countryCode}\r\n preselected={props?.defaultSelectedCountry || 206}\r\n />\r\n \r\n ) : null}\r\n \r\n {selectedCountry != \"\" && currentOptions.length > 0 ? (\r\n \r\n {currentOptions.length > 0 &&\r\n currentOptions\r\n .slice()\r\n .sort()\r\n .map((p) => {\r\n return (\r\n \r\n {\r\n setRegionGroup(regionGroup);\r\n setSelectedCountry(selectedCountry);\r\n setCurrentType(p);\r\n },\r\n }}\r\n />\r\n \r\n );\r\n })}\r\n {/* {currentType === \"\" && \r\n ) : null}\r\n\r\n {selectedCountry != \"\" && currentOptions.length == 0 && paymentMethods.length == 0 ? (\r\n \r\n \r\n ) : null}\r\n\r\n {paymentMethods.length > 1 ? (\r\n \r\n {paymentMethods\r\n .slice()\r\n .sort()\r\n .map((pm) => {\r\n return (\r\n \r\n {\r\n expand(pm);\r\n onPaymentMethod(pm);\r\n },\r\n }}\r\n />\r\n \r\n );\r\n })}\r\n \r\n ) : null}\r\n \r\n {currentType != \"\" && selectedOption != \"\" && isLoaded ? (\r\n \r\n
\r\n ) : null}\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default observer(PaymentOptionsNew);\r\n\r\nconst PaymentOptionButton = ({ option, selectOption, selectedOption }) => {\r\n switch (option) {\r\n case \"person\":\r\n return (\r\n \r\n
\r\n {selectedOption == option ? \r\n
\r\n
\r\n
\r\n
\r\n {selectedOption == option ? \r\n
\r\n
\r\n
\r\n
\r\n {selectedOption == option ? \r\n
\r\n
\r\n
\r\n
\r\n {selectedOption == option ? \r\n
\r\n
\r\n
\r\n
\r\n {selectedOption == option ? \r\n
\r\n
\r\n
\r\n
inputOnChange(e.target.value)}\r\n onKeyDown={onKeyDown}\r\n noMargin={true}\r\n noLabel={true}\r\n appendButton={\r\n \r\n \r\n }\r\n />\r\n \r\n {isValid == false || showMaxDiscountValidationMessage ? (\r\n
{showMaxDiscountValidationMessage ? \r\n ) : null}\r\n
\r\n {validCodes.map((v, i) => {\r\n const { code, value, name, valueType } = v;\r\n if (!showEarlyBird && !code) return null;\r\n if (!showAutoCodes && autoCodes.some((ac) => ac.value == code)) return null;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {code || name} \r\n \r\n }\r\n secondary={\r\n \r\n \r\n }\r\n />\r\n \r\n {code ? (\r\n deleteDiscount(code)}>\r\n \r\n ) : null}\r\n \r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n \r\n \r\n <>\r\n {Object.entries(order.invoice).map((oi) => {\r\n if (!oi[1]) return null;\r\n if (oi[0] == \"companyId\" || oi[0] == \"countryId\" || oi[0] == \"gln\" || oi[0] == \"vatNo\") return null;\r\n const label = `${oi[0]}`;\r\n if (label == \"inExchangeRecipentId\" || label == \"electronicInvoice\") return null;\r\n const value = oi[0] == \"countryCode\" ?
: oi[1];\r\n return (\r\n
\r\n \r\n {label && (\r\n \r\n
\r\n )}\r\n \r\n \r\n {value}
\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n {Object.entries(order.person).map((oi) => {\r\n const field = fieldList.find((f) => f.name.toLowerCase() === oi[0].toLowerCase());\r\n if (!oi[1] || !field) return null;\r\n const label = field?.fieldLanguage.find((fl) => fl.languageCode === environment.lang)?.label || `${oi[0]}`;\r\n const value = oi[0] === \"countryCode\" || oi[0] === \"countryId\" ?
: oi[1];\r\n return (\r\n
\r\n \r\n {label}
\r\n \r\n \r\n {value}
\r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n \r\n {Object.entries(order.company).map((oi) => {\r\n const field = fieldList.find((f) => f.name.toLowerCase() === oi[0].toLowerCase());\r\n if (!oi[1] || !field) return null;\r\n const label = field?.fieldLanguage.find((fl) => fl.languageCode === environment.lang)?.label || `${oi[0]}`;\r\n const value = oi[0] == \"countryCode\" ?
: oi[1];\r\n return (\r\n
\r\n \r\n {label}
\r\n \r\n \r\n {value}
\r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n \r\n {questionList.map((question) => {\r\n const answer = order.answer.find((a) => a.questionId == question.questionId);\r\n let show = showQuestionModule(question.questionId);\r\n if (!answer || !show) return null;\r\n const questionName = question?.questionLanguage?.find((fl) => fl.languageCode == environment.lang)?.label;\r\n if (answer.answerRow.length > 0) {\r\n if (question.type == \"Option\") {\r\n return (\r\n
\r\n \r\n {questionName}
\r\n \r\n \r\n {answer.answerRow.map((o) => {\r\n return (\r\n \r\n {question.questionOption?.find((qo) => qo.questionOptionId == o.questionOptionId)?.questionOptionLanguage?.find((fl) => fl.languageCode == environment.lang)?.label}\r\n
\r\n );\r\n })}\r\n \r\n \r\n );\r\n } else {\r\n return (\r\n
\r\n \r\n {questionName}
\r\n \r\n \r\n {answer.answerRow[0].text}
\r\n \r\n \r\n );\r\n }\r\n }\r\n })}\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {Math.round(calcTotalVat(), 2) > 0 ? (\r\n <>\r\n \r\n \r\n \r\n \r\n {Math.round(calcTotalExVat(), 2)}\r\n {` ${environment.currency}`}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {Math.round(calcTotalVat(), 2)}\r\n {` ${environment.currency}`}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {Math.round(calcTotalSum(), 2)}\r\n {` ${environment.currency}`}\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n {Math.round(calcTotalSum(), 2)}\r\n {` ${environment.currency}`}\r\n \r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n {displayConfirmationSettings[\"ShowConfRowStatus\"] ? (\r\n \r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfStartDate\"] || displayConfirmationSettings[\"ShowConfStartTime\"] ? (\r\n \r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfEndDate\"] || displayConfirmationSettings[\"ShowConfEndTime\"] ? (\r\n \r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfAmount\"] ? (\r\n \r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfDiscount\"] ? (\r\n \r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfVatAmount\"] ? (\r\n \r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfVatPercent\"] ? (\r\n \r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfQuantity\"] ? (\r\n \r\n \r\n ) : null}\r\n {displayConfirmationSettings[\"ShowConfRowTotal\"] ? (\r\n \r\n \r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport const OrderSummary = observer((props) => {\r\n const { displayConfirmationSettings, breakouts, orders, settings, mainEvent, loadHotels, hotelAllotments, hotels } = props;\r\n const { overrideDisplay = false, showOrderDetails = true, showOnlyHotelOrderRows = false, showPersonDetails = false } = settings;\r\n\r\n useEffect(() => {\r\n if (orders.some((o) => o.orderRow.some((or) => or.hotelGroupId)) && hotelAllotments?.length === 0) {\r\n loadHotels();\r\n }\r\n }, [orders, hotelAllotments]);\r\n\r\n const overridenDisplaySettings = useMemo(() => {\r\n const o = {};\r\n for (const key in displayConfirmationSettings) {\r\n if (Object.hasOwnProperty.call(displayConfirmationSettings, key)) {\r\n o[key] = settings[toCamelCase(key)] === true;\r\n }\r\n }\r\n return o;\r\n }, [\r\n settings?.showConfStartDate,\r\n settings?.showConfStartTime,\r\n settings?.showConfEndDate,\r\n settings?.showConfEndTime,\r\n settings?.showConfAmount,\r\n settings?.showConfDiscount,\r\n settings?.showConfVatAmount,\r\n settings?.showConfVatPercent,\r\n settings?.showConfQuantity,\r\n settings?.showConfRowTotal,\r\n settings?.showConfFreeRows,\r\n settings?.showConfOrderTotalSum,\r\n settings?.showConfMainEvent,\r\n settings?.showConfDescription,\r\n settings?.showConfRowStatus,\r\n settings?.showConfCancelledRows,\r\n settings?.showOnlyHotelOrderRows,\r\n ]);\r\n\r\n const showCancelledRows = (overrideDisplay && overridenDisplaySettings[\"ShowConfCancelledRows\"]) || (!overrideDisplay && displayConfirmationSettings[\"ShowConfCancelledRows\"]);\r\n const flatOrderRowsList = orders\r\n .filter((o) => o.orderRow)\r\n .map((o) => [\r\n ...o.orderRow\r\n .filter((or) => (showCancelledRows ? true : or.status != \"Cancelled\"))\r\n .map((or) => getCalculatedOrderRow(or, breakouts, orders, o.orderId, mainEvent))\r\n .filter((or) => Boolean(or)),\r\n ])\r\n .flat();\r\n\r\n const hotelAllotmentRows = useMemo(() => {\r\n const orderRows = orders.flatMap((o) => o.orderRow);\r\n if (hotels?.length === 0 || hotelAllotments?.length === 0) return [];\r\n\r\n const result = orderRows\r\n .filter((o) => o.hotelGroupId)\r\n .reduce((acc, orderRow) => {\r\n const hotelAllotment = hotelAllotments.find((ha) => ha.hotelAllotmentPricing?.some((hap) => hap.allotmentPricingId === orderRow?.hotelAllotmentPricingId));\r\n\r\n\r\n if (!hotelAllotment) return acc;\r\n\r\n const hotel = hotels.find((h) => h.hotelRoomType.some((y) => y.hotelRoomTypeId == hotelAllotment.hotelRoomTypeId));\r\n const roomType = hotel.hotelRoomType.find((hr) => hr.hotelRoomTypeId == hotelAllotment.hotelRoomTypeId);\r\n\r\n const pricingIds = orderRows.filter((or) => or.hotelGroupId === orderRow.hotelGroupId).map((or) => or.hotelAllotmentPricingId);\r\n\r\n const dateValues = hotelAllotments.filter((ha) => ha.hotelAllotmentPricing?.some((hap) => pricingIds.includes(hap.allotmentPricingId))).map((ha) => +new Date(ha.date));\r\n const allotmentStartDate = Math.min(...dateValues);\r\n const allotmentEndDate = Math.max(...dateValues);\r\n\r\n if (!hotelAllotment) return acc;\r\n\r\n const index = acc.findIndex((a) => a.hotelGroupId === orderRow.hotelGroupId);\r\n\r\n if (index !== -1) {\r\n acc[index].amount += orderRow.amount;\r\n acc[index].rowTotal += orderRow.amount;\r\n return acc;\r\n }\r\n return [\r\n ...acc,\r\n {\r\n ...orderRow,\r\n rowTotal: orderRow.amount,\r\n name: ` ${hotel.name} - ${roomType.name}`,\r\n startDateTime: new Date(allotmentStartDate).toLocaleDateString(),\r\n endDateTime: new Date(allotmentEndDate).toLocaleDateString(),\r\n },\r\n ];\r\n }, []);\r\n\r\n console.log(result);\r\n\r\n return result;\r\n }, [hotelAllotments, orders, hotels]);\r\n\r\n if (showOnlyHotelOrderRows) {\r\n\r\n console.log(hotelAllotmentRows)\r\n return (\r\n \r\n {orders.map((o, i) => (\r\n
\r\n
\r\n \r\n \r\n \r\n {hotelAllotmentRows\r\n ?.filter((or) => or.orderId === o.orderId)\r\n .map((row) => (\r\n \r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n {orders.map((o, i) => {\r\n return (\r\n
\r\n {((Object.entries(o?.person ?? {})?.length > 0 && Object.entries(o?.person ?? {})?.some(([_, value]) => value)) ||\r\n Object.entries(o?.invoice ?? {})?.length > 0 ||\r\n (Object.entries(o?.company ?? {})?.length > 0 && Object.entries(o?.company ?? {})?.some(([_, value]) => value)) ||\r\n (o?.answer?.length > 0 && o?.answer?.some(({ answerRow }) => answerRow?.length > 0))) &&\r\n showPersonDetails ? (\r\n
\r\n ) : null}\r\n <>\r\n {o?.orderRow ? (\r\n
\r\n
\r\n \r\n \r\n \r\n {flatOrderRowsList\r\n ?.filter((x) => x.orderId === o.orderId)\r\n ?.sort((a, b) => a.sortOrder - b.sortOrder)\r\n ?.map((row) => (\r\n \r\n
\r\n
\r\n ) : null}\r\n \r\n
\r\n );\r\n })}\r\n {showOrderDetails &&\r\n flatOrderRowsList &&\r\n flatOrderRowsList.length > 0 &&\r\n ((overrideDisplay && overridenDisplaySettings[\"ShowConfOrderTotalSum\"]) || (!overrideDisplay && displayConfirmationSettings[\"ShowConfOrderTotalSum\"])) ? (\r\n
\r\n ) : null}\r\n
0 && orders.length >= maxCount) || showEventFull}\r\n onClick={async () => {\r\n if (isValid) {\r\n let isAvailable = await checkEventAvailability(environment.eventId)\r\n if (isAvailable) {\r\n runInAction(() => {\r\n triggerValidation(false);\r\n let shouldFocus = false;\r\n if (current.activePage == settings.returnPage) shouldFocus = true;\r\n current.activePage = settings.returnPage;\r\n createOrder();\r\n checkConditions();\r\n if (shouldFocus)\r\n document.querySelector(\".react-grid-layout input:not(readonly):not(disabled), .react-grid-layout textarea:not(readonly):not(disabled), .react-grid-layout select:not(readonly):not(disabled)\")?.focus();\r\n });\r\n }\r\n else {\r\n setShowEventFull(!isAvailable);\r\n }\r\n } else {\r\n triggerValidation();\r\n }\r\n }}\r\n >\r\n \r\n
\r\n
\r\n \r\n \r\n
{source ? sourceFilename.replace(`${key}_`, \"\") : \r\n \r\n
onFileSelected(e)} />\r\n {/*
\r\n */}\r\n
\r\n {showConflictPopper ? (\r\n <>\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n ) : null}\r\n\r\n {uploading ?
:
}\r\n {showDeleteDialog && deleteTarget ?
: null}\r\n
\r\n {order && order[toCamelCase(\"UploadedFiles\")]\r\n ? order[toCamelCase(\"UploadedFiles\")].map((f, i) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {f.name.includes(`${order.sqlStateNo}_${activePersonNo}_`) ? f.name.replace(`${order.sqlStateNo}_${activePersonNo}_`, \"\") : f.name.replace(`${key}_`, \"\")}\r\n \r\n }\r\n />\r\n \r\n {\r\n setShowDeleteDialog(true);\r\n setDeleteTarget(f);\r\n }}\r\n >\r\n \r\n \r\n );\r\n })\r\n : null}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n action(true)} variant=\"contained\" style={{ background: \"rgb(223, 65, 54)\", color: \"#fff\", boxShadow: \"none\" }}>\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport 'cropperjs/dist/cropper.css'\r\nimport { CircularProgress, Grid, IconButton, Popper, Slider } from \"@material-ui/core\";\r\nimport RotateLeftIcon from '@material-ui/icons/RotateLeft';\r\nimport RotateRightIcon from '@material-ui/icons/RotateRight';\r\nimport CircleIcon from \"@material-ui/icons/RadioButtonUnchecked\";\r\nimport CropLandscapeIcon from \"@material-ui/icons/CropLandscape\";\r\nimport CheckIcon from \"@material-ui/icons/Check\";\r\nimport ClearIcon from \"@material-ui/icons/Clear\";\r\nimport ZoomOutIcon from \"@material-ui/icons/ZoomOut\";\r\nimport ZoomInIcon from \"@material-ui/icons/ZoomIn\";\r\nimport Cropper from \"cropperjs\";\r\n\r\nexport const ProfileUploadCrop = ({ src, aspectRatio, shape, eventId, onCropped, onCancel }) => {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [cropperInstance, setCropperInstance] = useState(null);\r\n const [zoomLevel, setZoomLevel] = useState(0);\r\n const [minZoomLevel, setMinZoomLevel] = useState(0);\r\n const imageRef = useRef();\r\n const wrapperRef = useRef();\r\n const convertedAspectRatio = useMemo(() => {\r\n var aspectRatioRegex = /(\\d+) ?\\/ ?(\\d+)/i;\r\n if (aspectRatioRegex.test(aspectRatio)) {\r\n let matches = aspectRatioRegex.exec(aspectRatio);\r\n return matches[1] / matches[2];\r\n }\r\n else {\r\n return undefined;\r\n }\r\n }, [aspectRatio]);\r\n useEffect(() => {\r\n if (imageRef?.current) {\r\n imageRef.current.addEventListener(\"zoom\", onZoomChanged)\r\n }\r\n return () => {\r\n if (imageRef?.current) {\r\n imageRef.current.removeEventListener(\"zoom\", onZoomChanged)\r\n }\r\n }\r\n })\r\n useEffect(() => {\r\n initCropper();\r\n }, [])\r\n const onZoomChanged = ({ detail }) => {\r\n setZoomLevel(detail.ratio);\r\n }\r\n const initCropper = (movable, canvasData, rotation) => {\r\n setIsLoading(true);\r\n if (cropperInstance) cropperInstance.destroy();\r\n const cropInst = new Cropper(imageRef?.current, {\r\n viewMode: 0,\r\n dragMode: 'move',\r\n guides: true,\r\n autoCrop: true,\r\n autoCropArea: 1,\r\n cropBoxMovable: shape === \"circle\" ? true : false,\r\n initialAspectRatio: shape === \"circle\" ? 1 : (convertedAspectRatio ?? NaN),\r\n cropBoxResizable: false,\r\n toggleDragModeOnDblclick: false,\r\n minContainerHeight:10,\r\n minContainerWidth:10,\r\n responsive: false,\r\n ready: () => {\r\n if (canvasData) {\r\n cropInst.setCanvasData(canvasData);\r\n }\r\n if (rotation) {\r\n cropInst.rotateTo(rotation)\r\n }\r\n setMinZoomLevel(cropInst.getContainerData().height / cropInst.getCanvasData().naturalHeight)\r\n setIsLoading(false);\r\n }\r\n });\r\n setCropperInstance(cropInst);\r\n }\r\n \r\n const getCroppedImage = () => {\r\n if (shape === \"circle\") {\r\n const sourceCanvas = cropperInstance.getCroppedCanvas();\r\n var canvas = document.createElement('canvas');\r\n var context = canvas.getContext('2d');\r\n var width = sourceCanvas.width;\r\n var height = sourceCanvas.height;\r\n\r\n canvas.width = width;\r\n canvas.height = height;\r\n context.imageSmoothingEnabled = true;\r\n context.drawImage(sourceCanvas, 0, 0, width, height);\r\n context.globalCompositeOperation = 'destination-in';\r\n context.beginPath();\r\n context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);\r\n context.fill();\r\n return canvas.toDataURL();\r\n }\r\n else {\r\n return cropperInstance.getCroppedCanvas().toDataURL();\r\n }\r\n }\r\n \r\n const handleZoomSlider = (event, newValue) => {\r\n if (newValue - zoomLevel != 0) {\r\n cropperInstance.zoom(newValue - zoomLevel);\r\n }\r\n }\r\n const zoomIn = () => {\r\n cropperInstance.zoom(0.1);\r\n }\r\n const zoomOut = () => {\r\n cropperInstance.zoom(-0.1);\r\n }\r\n const handleSave = () => {\r\n setIsLoading(true);\r\n const imageData = getCroppedImage();\r\n onCropped(imageData);\r\n }\r\n return <>\r\n \r\n {isLoading ?
: null}\r\n
\r\n
\r\n \r\n \r\n \r\n cropperInstance.rotate(-45)}>\r\n \r\n cropperInstance.rotate(45)}>\r\n \r\n {/* setShape(shape === \"circle\" ? \"normal\" : \"circle\")}>\r\n {shape != \"circle\" ? */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n : null}\r\n \r\n}","import React, { useEffect, useRef, useState } from \"react\";\r\n// import \"croppie/croppie.css\";\r\nimport { deepClone, toCamelCase } from \"../../../helpers/objectHelper\";\r\nimport SystemLabel from \"../../../system/SystemLabel/SystemLabel\";\r\nimport CropTwoToneIcon from \"@material-ui/icons/CropTwoTone\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport { usePrevious } from \"../../helpers/usePrevious\";\r\nimport Axios from \"axios\";\r\n// import { ImageCropper } from \"../../components/ImageCropper\";\r\nimport FolderIcon from \"@material-ui/icons/Folder\";\r\nimport { ProfileUploadCrop } from \"./components/ProfileUploadCrop\";\r\nexport const ProfileImageUploader = observer((props) => {\r\n const [source, setSource] = useState(\"\");\r\n const [isCropping, setIsCropping] = useState(false);\r\n const [imageLoaded, setImageLoaded] = useState(false);\r\n\r\n const prevProps = usePrevious(props);\r\n const imgRef = useRef();\r\n\r\n const { activePersonNo, orders, settings, environment, updateOrder, contentLayoutModuleId } = props;\r\n const { size, shape, viewport, defaultImage, hidden } = settings;\r\n\r\n useEffect(() => {\r\n loadImage();\r\n }, []);\r\n useEffect(() => {\r\n if (defaultImage && prevProps && prevProps.settings.defaultImage != settings.defaultImage) {\r\n setSource(defaultImage);\r\n }\r\n if (prevProps && activePersonNo != prevProps.activePersonNo) {\r\n loadImage();\r\n }\r\n });\r\n const toBase64 = (file) =>\r\n new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => resolve(reader.result);\r\n reader.onerror = (error) => reject(error);\r\n });\r\n const loadImage = () => {\r\n const { defaultImage } = settings;\r\n if (orders) {\r\n let order = orders[activePersonNo];\r\n\r\n let newOrder = deepClone(order);\r\n let type = newOrder[toCamelCase(\"ProfileImage\")];\r\n\r\n let newType = undefined;\r\n if (!type) {\r\n newType = { source: \"\" };\r\n } else {\r\n newType = deepClone(type);\r\n }\r\n\r\n if (newType.file) {\r\n return setSource(newType.file);\r\n }\r\n\r\n if (newType[toCamelCase(\"Source\")]) {\r\n setSource(newType[toCamelCase(\"Source\")]);\r\n } else {\r\n newType[toCamelCase(\"File\")] = defaultImage || null;\r\n setSource(defaultImage || \"https://www.xovi.com/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png\");\r\n }\r\n newOrder[toCamelCase(\"ProfileImage\")] = newType;\r\n updateOrder(newOrder);\r\n } else {\r\n setSource(defaultImage || \"https://www.xovi.com/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png\");\r\n }\r\n };\r\n const onImageUpload = async (e) => {\r\n const file = e.target.files[0];\r\n\r\n const result = await toBase64(file).catch((e) => Error(e));\r\n if (result instanceof Error) {\r\n console.error(\"Error: \", result.message);\r\n return;\r\n }\r\n \r\n setSource(result);\r\n setIsCropping(true);\r\n\r\n //You can not post when prop\r\n };\r\n const setImageOnOrder = (source) => {\r\n if (orders) {\r\n let order = orders[activePersonNo];\r\n\r\n let newOrder = deepClone(order);\r\n let type = newOrder[toCamelCase(\"ProfileImage\")];\r\n let newType = undefined;\r\n\r\n if (!type) {\r\n newType = { source: \"\" };\r\n } else {\r\n newType = deepClone(type);\r\n }\r\n\r\n Axios.post(`./api/files/profileimagetemp/${environment.eventId}`, {\r\n file: source,\r\n name: `${order.sqlStateNo + \"_\" + activePersonNo}_ProfileImage.png`,\r\n type: \"image/png\",\r\n }).then(({ data }) => {\r\n newType.file = data;\r\n newOrder[toCamelCase(\"ProfileImage\")] = newType;\r\n updateOrder(newOrder);\r\n });\r\n }\r\n };\r\n const onCropped = (source) => {\r\n setImageOnOrder(source);\r\n setSource(source);\r\n setIsCropping(false);\r\n };\r\n const setImageClassName = (type) => {\r\n switch (type) {\r\n case \"SQUARE\":\r\n return \"square--landscape\";\r\n case \"CIRCULAR\":\r\n return \"circular--landscape\";\r\n default:\r\n return \"\";\r\n }\r\n };\r\n const fuRef = useRef();\r\n const handleImageLoaded = () => setImageLoaded(true);\r\n if (hidden) return null;\r\n return (\r\n \r\n
\r\n
\r\n {isCropping ? (\r\n setIsCropping(false)} aspectRatio={`${viewport.width}/${viewport.height}`} />\r\n ) : (\r\n \r\n
\r\n {/* {isCropping ? fuRef.current.click()}>\r\n \r\n ) : null}\r\n {!isCropping ? (\r\n setIsCropping(true)}>\r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n \r\n }\r\n return (\r\n \r\n \r\n );\r\n}\r\nexport default React.forwardRef(PictureDisplay) ","import { observer } from \"mobx-react-lite\";\r\nimport React, { useEffect, useRef, useState } from \"react\";\r\nimport PictureDisplay from \"../../../global/PictureDisplay\";\r\nimport { convertUrl } from \"../../helpers/url.helper\";\r\n\r\nexport const Image = observer((props) => {\r\n const imgRef = useRef();\r\n const { settings, width, setAspectRatio, orders } = props;\r\n\r\n const { shape, source, alt, link = \"\", target = \"\", rotation, filled, autoHeight = false, hidden, srcset } = settings;\r\n\r\n const [ignoreHeight, setIgnoreHeight] = useState(false);\r\n\r\n useEffect(() => {\r\n if (imgRef.current) {\r\n imgRef.current.addEventListener(\"load\", imgOnLoad);\r\n }\r\n return () => {\r\n if (imgRef.current) {\r\n imgRef.current.removeEventListener(\"load\", imgOnLoad);\r\n }\r\n };\r\n });\r\n\r\n function imgOnLoad() {\r\n const ratio = this.naturalWidth / this.naturalHeight;\r\n\r\n if (ratio < 1) {\r\n setAspectRatio(this.naturalWidth / this.naturalHeight);\r\n setIgnoreHeight(true);\r\n }\r\n setTimeout(() => props.checkHeights(), 100);\r\n }\r\n\r\n if (hidden) return null;\r\n\r\n return (\r\n \r\n
0 ? orders[0] : null)} target={target} style={{ width: \"100%\", height: \"auto\" }} />\r\n \r\n \r\n
;\r\n if (contentLoaded) {\r\n return
;\r\n }\r\n else {\r\n return \r\n\r\n \r\n \r\n
\r\n )\r\n};\r\n","import { observer } from \"mobx-react-lite\";\r\nimport React, { useEffect } from \"react\";\r\nimport Layout from '../../Layout'\r\n\r\nexport const ContentView = observer((props) => {\r\n \r\n return (\r\n \r\n
\r\n );\r\n});\r\n","import { observer } from \"mobx-react-lite\";\r\nimport React, { useMemo } from \"react\";\r\nimport { ForwardPage } from \"../ForwardPage/ForwardPage\";\r\nimport { PreviousPage } from \"../PreviousPage/PreviousPage\";\r\nimport { SubmitButton } from \"../SubmitButton/SubmitButton\";\r\nimport ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';\r\nimport ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';\r\n\r\nexport const Paginator = observer((props) => {\r\n const { current, contentLayout, settings, environment, orders, setActivePage } = props;\r\n const { next, back, showIcons } = settings;\r\n \r\n const checkMinGroupReg = () => {\r\n const grpModule = contentLayout?.contentLayoutModules?.filter(clm => clm.pages == current.activePage).find(clm => clm.contentModule.type === \"GROUP_REGISTRATION\");\r\n const minCount = grpModule?.contentModule?.settings?.minCount;\r\n return minCount && minCount > 0 && minCount > orders.length\r\n }\r\n\r\n const grpRegDisabled = useMemo(() => {\r\n let disabled = false;\r\n if (checkMinGroupReg()) disabled = true;\r\n return disabled;\r\n }, [orders, current?.activePage])\r\n\r\n if (contentLayout.pages == 1) {\r\n return (\r\n 1 ? \"space-between\" : \"flex-end\", width: \"100%\" }}>\r\n {current.activePage > 1 ?
: back[environment.lang]} /> : null}\r\n {current.activePage == contentLayout.pages ?
:
: next[environment.lang]} />}\r\n
\r\n {\r\n if (forceThumbnail !== thumbnail)\r\n setForceThumbnail(thumbnail)\r\n }}\r\n width={0}\r\n height={0}\r\n style={{ display: \"none\" }}\r\n />}\r\n
\r\n});\r\n\r\n\r\n\r\nexport const GenericPlayer = observer((settings) => {\r\n const url = settings.source;\r\n const thumbnail = settings.thumbnail;\r\n\r\n if (!url) return \r\n
\r\n );\r\n else if (url.includes(\"dailymotion\") || url.includes(\"https://dai.ly/\"))\r\n return (\r\n \r\n
\r\n );\r\n else if (url.includes(\"jirango\")) {\r\n return (\r\n \r\n \r\n \r\n To view this video please enable JavaScript, and consider upgrading to\r\n a web browser that\r\n \r\n supports HTML5 video\r\n \r\n
\r\n \r\n \r\n );\r\n}","import { makeStyles, withStyles } from \"@material-ui/core/styles\";\r\nimport InputBase from \"@material-ui/core/InputBase\";\r\n\r\nexport const BootstrapInput = withStyles((theme) => ({\r\n root: {\r\n \"label + &\": {\r\n marginTop: \"0.5rem\",\r\n },\r\n width: \"100%\",\r\n height: \"100%\",\r\n },\r\n input: {\r\n height: \"-webkit-fill-available\",\r\n borderRadius: 4,\r\n position: \"relative\",\r\n paddingLeft: 10,\r\n backgroundColor: theme.palette.background.paper,\r\n border: \"1px solid #ced4da\",\r\n lineHeight: 1.5,\r\n // fontSize: 16,\r\n // padding: \"10px 26px 10px 5px\",\r\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\r\n // Use the system font instead of the default Roboto font.\r\n // fontFamily: [\"-apple-system\", \"BlinkMacSystemFont\", '\"Segoe UI\"', \"Roboto\", '\"Helvetica Neue\"', \"Arial\", \"sans-serif\", '\"Apple Color Emoji\"', '\"Segoe UI Emoji\"', '\"Segoe UI Symbol\"'].join(\",\"),\r\n \"&:focus\": {\r\n borderRadius: 4,\r\n borderColor: \"#80bdff\",\r\n boxShadow: \"0 0 0 0.2rem rgba(0,123,255,.25)\",\r\n },\r\n },\r\n}))(InputBase);\r\n","import { MenuItem, Select } from \"@material-ui/core\";\r\nimport { runInAction, toJS } from \"mobx\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport React, { useEffect, useMemo, useState } from \"react\";\r\nimport { Asterisk } from \"../../components/Asterisk\";\r\nimport { BootstrapInput } from \"../../components/BootstrapInput\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\nimport { toCamelCase } from \"../../helpers/objectHelper\";\r\nimport { Event } from \"../Event/Event\";\r\n\r\nexport const EventGroup = observer((props) => {\r\n const { settings, breakouts, displayEventSettings, contentModuleId, contentLayoutModuleId, validations, activePersonNo, environment, updateOrderRow, checkConditions, checkEventAvailability, validate } = props;\r\n const validity = validations.find((v) => v.id == contentModuleId);\r\n const orders = toJS(props.orders);\r\n const order = orders[activePersonNo];\r\n const { overrideDisplay, required, min, max, showTitle, titleText = {}, showSubtitle, subtitleText = {} } = settings;\r\n\r\n const eventList = useMemo(\r\n () =>\r\n Array.from(settings.eventIds)\r\n .sort((a, b) => a.sortOrder - b.sortOrder)\r\n .map((e) => breakouts.find((m) => e.eventId == m.eventId)),\r\n [settings.eventIds, breakouts]\r\n );\r\n\r\n const checkedRows = useMemo(() => order?.orderRow?.filter((or) => settings.eventIds.map((e) => e.eventId).includes(or.eventId)) || [], [order?.orderRow]);\r\n\r\n const activeDisplaySettings = useMemo(() => {\r\n if (overrideDisplay) {\r\n const o = {};\r\n for (const key in displayEventSettings) {\r\n if (Object.hasOwnProperty.call(displayEventSettings, key)) {\r\n o[key] = settings[toCamelCase(key)] === true;\r\n }\r\n }\r\n return o;\r\n } else {\r\n return displayEventSettings;\r\n }\r\n }, [\r\n overrideDisplay,\r\n settings?.showEventStartDateTime,\r\n settings?.showEventStartTime,\r\n settings?.showEventEndDateTime,\r\n settings?.showEventEndTime,\r\n settings?.showEventCity,\r\n settings?.showEventVenue,\r\n settings?.showEventDescription,\r\n settings?.showEventPrice,\r\n settings?.showEventName,\r\n settings?.showEventIncVat,\r\n settings?.showEventVatPrecentage,\r\n settings?.showEventVatSum,\r\n ]);\r\n\r\n useEffect(() => {\r\n validateGroup();\r\n }, [checkedRows]);\r\n\r\n const validateGroup = () => {\r\n const dues = eventList.filter((b) => (b.deadline ? +new Date(b.deadline) < +new Date() : false))?.length;\r\n\r\n let isValid = true;\r\n let reason = \"\";\r\n\r\n if (dues - eventList?.length < min) {\r\n isValid = true;\r\n reason = \"due\";\r\n } else if (required && !checkedRows.length) {\r\n isValid = false;\r\n reason = \"required\";\r\n } else if (min > 0 && checkedRows.length < min && required) {\r\n isValid = false;\r\n reason = \"min\";\r\n } else if (max > 0 && checkedRows.length > max && required) {\r\n isValid = false;\r\n reason = \"max\";\r\n }\r\n\r\n if (validity) {\r\n runInAction(() => {\r\n validity.valid = isValid;\r\n validity.reason = reason;\r\n });\r\n }\r\n };\r\n\r\n const uncheckGroupActivities = (id) => {\r\n if (checkedRows.length > 0 && !checkedRows.find((c) => c.eventId == id)) {\r\n checkedRows.map((row) => {\r\n updateOrderRow(row, true);\r\n });\r\n }\r\n };\r\n\r\n const isValid = useMemo(() => {\r\n if (validate && validations.find((v) => v.id === contentModuleId)?.valid === false) return false;\r\n return undefined;\r\n }, [validate, validations, contentModuleId]);\r\n\r\n if (settings.eventIds.length == 0) return null;\r\n if (settings.hidden) return null;\r\n\r\n return (\r\n <>\r\n {settings.displayType === \"select\" ? (\r\n checkConditions(contentLayoutModuleId)}\r\n parentId={contentModuleId}\r\n checkedRows={checkedRows}\r\n checkEventAvailability={(eventId) => checkEventAvailability(eventId, orders.length > 0 && orders[activePersonNo].orderId ? orders[activePersonNo].orderId : null, props.sqlStateNo, true)}\r\n />\r\n ) : (\r\n <>\r\n {showTitle ? {titleText[environment.lang] || \"\"} : null}\r\n {showSubtitle ? {subtitleText[environment.lang] || \"\"} : null}\r\n {eventList.map((event, index) => {\r\n if (!event || !event.eventId) return null;\r\n const localSettings = {\r\n eventId: event.eventId,\r\n prechecked: false,\r\n prefixClassName: \"cms-event\",\r\n show: {},\r\n validation: {},\r\n contentLayoutModuleId,\r\n readonly:\r\n settings.readonly ||\r\n (max > 1 &&\r\n checkedRows.length >= max &&\r\n !checkedRows\r\n .map((e) => {\r\n return e.eventId;\r\n })\r\n .includes(event.eventId)),\r\n displayType: settings.displayType,\r\n onlySelectOne: max === 1,\r\n radio: (max <= 1 && required) || settings.radio,\r\n };\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n \r\n )}\r\n \r\n );\r\n});\r\n\r\nconst EventGroupSelector = ({ options, showPlaceholder, placeholderText, title, subtitle, required, uncheckGroupActivities, updateOrderRow, checkConditions, order, parentId, checkedRows, checkEventAvailability }) => {\r\n const [disabledEvents, setDisabledEvents] = useState([]);\r\n\r\n useEffect(() => {\r\n (async () => {\r\n const list = [];\r\n for (const ev of options) {\r\n if (!(await checkEventAvailability(ev))) {\r\n list.push(ev.eventId);\r\n }\r\n }\r\n setDisabledEvents(list);\r\n })();\r\n }, [options, order]);\r\n\r\n const selectedEvents = useMemo(() => checkedRows.map((l) => l.eventId), [checkedRows]);\r\n\r\n const handleChange = (value) => {\r\n uncheckGroupActivities(value);\r\n let breakout = options.find((b) => b.eventId == value);\r\n if (breakout) {\r\n updateOrderRow({\r\n amount: breakout.amount ?? 0,\r\n comment: \"\",\r\n discount: 0,\r\n eventId: breakout.eventId,\r\n orderId: -1,\r\n orderRowId: ((order?.orderRow?.length ?? 0) + 1) * -1,\r\n quantity: 1,\r\n status: null,\r\n vatPercent: breakout.vatPercent || 0,\r\n deleted: false,\r\n groupId: parentId,\r\n });\r\n }\r\n checkConditions();\r\n };\r\n\r\n return (\r\n \r\n
\r\n {title ? (\r\n
\r\n {title}\r\n {required ? \r\n ) : null}\r\n {subtitle ?
{subtitle} : null}\r\n
\r\n
\r\n handleChange(e.target.value)}\r\n input={\r\n {placeholderText ? placeholderText : \r\n \r\n {options.map((event, index) => {\r\n if (!event || !event.eventId) return null;\r\n const disabled = disabledEvents.includes(event.eventId);\r\n return (\r\n \r\n {event.name}{\" \"}\r\n {disabled ? (\r\n \r\n \r\n ) : null}\r\n \r\n );\r\n })}\r\n \r\n
\r\n
\r\n wrapRef.current = r}\r\n className=\"maps-inner-wrap\"\r\n >\r\n {\r\n if (mapStyle) {\r\n map.setOptions({\r\n styles: mapStyles[mapStyle]\r\n })\r\n }\r\n }}\r\n >\r\n \r\n \r\n {pinTitle ?\r\n
{pinTitle} \r\n : null}\r\n
{formatedAddress} \r\n {pinDescription ?\r\n
{pinDescription}
\r\n : null}\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default GoogleApiWrapper({\r\n apiKey: API_KEY,\r\n})(observer(GoogleMaps));\r\n\r\n","import React from \"react\";\r\nimport { observer } from \"mobx-react-lite\";\r\n\r\n\r\nconst CalendarInvitation = observer((props) => {\r\n const { settings, environment } = props;\r\n\r\n const { texts } = settings;\r\n\r\n return (\r\n \r\n // \r\n );\r\n});\r\n\r\nexport default CalendarInvitation\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport QRCode from \"react-qr-code\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\nimport { getUrlParam } from \"../../helpers/url.helper\";\r\n\r\nconst QR = ({ settings, setAspectRatio }) => {\r\n const { useBadgeNo, content } = settings;\r\n const [badgeNumber, setbadgeNumber] = useState(\"No badge number\");\r\n const wrapRef = useRef();\r\n let padding = 0;\r\n useEffect(() => {\r\n let badgeNum = getUrlParam(\"badgeno\");\r\n if (!badgeNum) {\r\n badgeNum = getUrlParam(\"clientkey\");\r\n }\r\n setbadgeNumber(badgeNum);\r\n setAspectRatio(1);\r\n setTimeout(() => setAspectRatio(1), 1000);\r\n setTimeout(() => setAspectRatio(1), 2000);\r\n setTimeout(() => setAspectRatio(1), 3000);\r\n setTimeout(() => setAspectRatio(1), 5000);\r\n setTimeout(() => setAspectRatio(1), 7000);\r\n }, []);\r\n if (wrapRef.current) {\r\n var elStyle = window.getComputedStyle(wrapRef.current);\r\n padding = parseFloat(elStyle.paddingTop.replace(\"px\", \"\")) + parseFloat(elStyle.paddingBottom.replace(\"px\", \"\"));\r\n }\r\n if (useBadgeNo && !badgeNumber) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n else if(!useBadgeNo && !content){\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default QR;\r\n","import React, { useRef, useMemo } from \"react\";\r\nimport PictureDisplay from \"../../../global/PictureDisplay\";\r\nimport { convertUrl } from \"../../helpers/url.helper\";\r\n\r\nexport const ImageGroup = ({ settings, contentLayoutModuleId, environment, isSmartphone, orders }) => {\r\n const { images = [], overrideAspectRatio, overriddenAspectRatio, showText, showImage } = settings;\r\n\r\n const imageList = useMemo(() => Array.from(images), [images, environment.lang]);\r\n const imageRefs = useRef({});\r\n\r\n if (isSmartphone) {\r\n return (\r\n <>\r\n {showImage ? (\r\n \r\n {imageList.map(({ src, srcset, text, link, target }, i) => {\r\n const imageStyle = {\r\n maxWidth: \"100%\",\r\n maxHeight: \"100%\",\r\n width: \"100%\",\r\n aspectRatio:\r\n overrideAspectRatio && overriddenAspectRatio && (/\\d+ ?\\/ ?\\d+/.test(overriddenAspectRatio) || overriddenAspectRatio === \"1\")\r\n ? overriddenAspectRatio\r\n : `${imageRefs.current[i]?.naturalWidth} / ${imageRefs.current[i]?.naturalHeight}`,\r\n };\r\n return (\r\n
\r\n \r\n
0 ? orders[0] : null)}\r\n target={target}\r\n id={`${contentLayoutModuleId}_image`}\r\n ref={(ref) => (imageRefs.current[i] = ref)}\r\n style={imageStyle}\r\n />\r\n
}\r\n \r\n );\r\n })}\r\n
\r\n {imageList.map(({ text }, i) => {\r\n return
;\r\n })}\r\n
\r\n {imageList.map(({ src, srcset, link, target }, i) => {\r\n const imageStyle = {\r\n maxWidth: \"100%\",\r\n maxHeight: \"100%\",\r\n height: imageRefs.current[i]?.naturalHeight > imageRefs.current[i]?.naturalWidth ? \"100%\" : undefined,\r\n width: imageRefs.current[i]?.naturalHeight > imageRefs.current[i]?.naturalWidth ? undefined : \"100%\",\r\n aspectRatio:\r\n overrideAspectRatio && overriddenAspectRatio && (/\\d+ ?\\/ ?\\d+/.test(overriddenAspectRatio) || overriddenAspectRatio === \"1\")\r\n ? overriddenAspectRatio\r\n : `${imageRefs.current[i]?.naturalWidth} / ${imageRefs.current[i]?.naturalHeight}`,\r\n };\r\n return (\r\n
\r\n
0 ? orders[0] : null)}\r\n target={target}\r\n id={`${contentLayoutModuleId}_image`}\r\n ref={(ref) => (imageRefs.current[i] = ref)}\r\n style={imageStyle}\r\n />\r\n \r\n );\r\n })}\r\n
\r\n {imageList.map(({ text }, i) => {\r\n return
;\r\n })}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useMemo } from \"react\";\r\nimport EventLabel from \"../../../components/EventLabel\";\r\n\r\nexport const VoucherRow = ({ breakout, voucher, langCode, usedVouchers, navigateToForm, showAltName }) => {\r\n const { exhibitorVoucherId, count, eventId } = voucher;\r\n const name = useMemo(() => {\r\n const lang = breakout.eventDisplayLanguage?.find(edl=> edl.languageCode == langCode && edl.alternative == showAltName)\r\n return lang?.name || breakout.name;\r\n }, [breakout]);\r\n return (\r\n \r\n {name} \r\n {usedVouchers[exhibitorVoucherId] ?? 0} \r\n {count < 1 ? \"X\" : count} \r\n {eventId === 3628 || eventId === 3265 || eventId === 3721 ? \"X\" : (usedVouchers[exhibitorVoucherId] ?? 0) > count ? (usedVouchers[exhibitorVoucherId] ?? 0) - count : 0} \r\n \r\n {voucher.contentLayoutCode ? (\r\n navigateToForm(voucher)} className=\"cms-button\">\r\n \r\n ) : null}\r\n \r\n \r\n );\r\n};\r\n","import Axios from \"axios\";\r\nimport { toJS } from \"mobx\";\r\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\nimport { VoucherLinkDialog } from \"./components/VoucherLinkDialog\";\r\nimport { VoucherRow } from \"./components/VoucherRow\";\r\n\r\nexport const VoucherModule = ({ orders, environment, badgeNo, settings, breakouts, voucherList = [], setVoucherList }) => {\r\n const { voucherType = [], showPriceSum, showAltName = false } = settings;\r\n const [usedVouchers, setUsedVouchers] = useState({});\r\n const [dialogVoucher, setDialogVoucher] = useState(null);\r\n const vouchers = useMemo(() => {\r\n if (voucherType.length > 0) {\r\n const vTypeIds = voucherType.map((vt) => vt.value);\r\n return voucherList.filter((v) => vTypeIds.includes(v.personTypeId));\r\n } else return voucherList;\r\n }, [voucherList, voucherType]);\r\n useEffect(() => {\r\n if (toJS(orders)[0]?.badgeNo) {\r\n updateVouchers(orders[0].badgeNo);\r\n getVoucherCount(orders[0].badgeNo);\r\n }\r\n }, [orders]);\r\n const updateVouchers = async (badgeNo) => {\r\n const { data } = await Axios.get(`./api/exhibitor/vouchers/${badgeNo}`);\r\n if (data.success && data.vouchers) {\r\n setVoucherList(data.vouchers);\r\n }\r\n };\r\n const getVoucherCount = async (badgeNo) => {\r\n const { data } = await Axios.get(`./api/exhibitor/vouchers/uses/${badgeNo}`);\r\n if (data.success) {\r\n setUsedVouchers(data.useCounts);\r\n }\r\n };\r\n const voucherTotalSum = useMemo(() => {\r\n let totalSum = 0;\r\n if (usedVouchers && vouchers) {\r\n for (const key in usedVouchers) {\r\n if (Object.hasOwnProperty.call(usedVouchers, key)) {\r\n const usedCount = usedVouchers[key];\r\n const voucher = vouchers.find((v) => v.exhibitorVoucherId == key);\r\n if (voucher) {\r\n const available = voucher.count;\r\n const bought = usedCount - available;\r\n const breakout = breakouts.find((b) => b.eventId == voucher.eventId);\r\n if (bought > 0) {\r\n const origAmount = breakout.eventId === 3656 && voucher.personTypeId === 2248 ? (breakout.amount ?? 0) - 4000 : breakout.amount ?? 0;\r\n const vatAmount = origAmount * 0.5 * (breakout.vatAmount && breakout.vatAmount > 0 ? breakout.vatAmount / 100 : 0);\r\n const singlePrice = breakout.eventId === 3629 || breakout.eventId == 3630 ? origAmount + vatAmount : (origAmount * 0.5) + vatAmount;\r\n totalSum += singlePrice * bought;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n totalSum = totalSum.toFixed(2);\r\n return totalSum;\r\n }, [usedVouchers, vouchers]);\r\n const navigateToForm = (voucher) => {\r\n window.open(`./web/${voucher.contentLayoutCode}?exi=${voucher.exhibitorId}&pti=${voucher.personTypeId}`);\r\n };\r\n if (!vouchers || vouchers.length < 1)\r\n return (\r\n \r\n
\r\n );\r\n return (\r\n \r\n {voucherType.length > 0 ?
{voucherType.map((vt) => vt.name).join(\", \")} : null}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n {vouchers.map((voucher, i) => {\r\n let breakout = breakouts.find((b) => b.eventId === voucher.eventId);\r\n return \r\n {showPriceSum ? (\r\n \r\n \r\n \r\n \r\n \r\n {voucherTotalSum} {environment.currency}\r\n \r\n {/* \r\n */}\r\n \r\n \r\n ) : null}\r\n
\r\n {dialogVoucher ?
setDialogVoucher(null)} {...dialogVoucher} /> : null}\r\n \r\n {sortedUniqueValues.slice(0, 5000).map((value) => (\r\n */}\r\n column.setFilterValue(value)}\r\n placeholder={searchFieldPlaceholder}\r\n className=\"search-input\"\r\n // list={column.id + 'list'}\r\n />\r\n \r\n}\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { useReactTable, flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, getFacetedRowModel } from \"@tanstack/react-table\";\r\nimport { fuzzyFilter, fuzzySort, TableFilter } from \"./components/Filter\";\r\n\r\nexport const AdvancedTable = ({ rows, cols, eventLabels, environment, updateEventLabels }) => {\r\n const [options, setOptions] = useState({\r\n columns: cols,\r\n data: rows,\r\n filterFns: {\r\n fuzzy: fuzzyFilter,\r\n },\r\n sortingFns: {\r\n fuzzy: fuzzySort,\r\n },\r\n getCoreRowModel: getCoreRowModel(),\r\n getFilteredRowModel: getFilteredRowModel(),\r\n getSortedRowModel: getSortedRowModel(),\r\n // getPaginationRowModel: getPaginationRowModel(),\r\n getFacetedRowModel: getFacetedRowModel(),\r\n });\r\n useEffect(() => {\r\n setOptions({ ...options, data: rows, columns: cols })\r\n }, [rows, cols])\r\n \r\n const table = useReactTable(options)\r\n return \r\n \r\n {table.getHeaderGroups().map(headerGroup => (\r\n \r\n {headerGroup.headers.map(header => (\r\n \r\n {header.isPlaceholder ? null : (\r\n <>\r\n \r\n {flexRender(\r\n header.column.columnDef.header,\r\n header.getContext()\r\n )}\r\n {{\r\n asc: ' 🔼',\r\n desc: ' 🔽',\r\n }[header.column.getIsSorted()] ?? null}\r\n \r\n {header.column.getCanFilter() ? (\r\n \r\n ) : null}\r\n \r\n )}\r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {table.getRowModel().rows.map(row => {\r\n return (\r\n \r\n {row.getVisibleCells().map(cell => (\r\n\r\n \r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n \r\n ))}\r\n \r\n )\r\n })}\r\n \r\n
;\r\n};\r\n","import Axios from \"axios\";\r\nimport { toJS } from \"mobx\";\r\nimport React, { useEffect, useMemo, useState } from \"react\";\r\nimport { AdvancedTable } from \"../../components/AdvancedTable/AdvancedTable\";\r\nimport { CustomIcon } from \"../../components/CustomIcon\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\nexport const ExhibitorInviteList = ({ orders, settings, breakouts, mainEvent, eventLabels, environment, updateEventLabels }) => {\r\n const { personTypes = [], editLinkUrl, showAltName = false, showExportBtn = false } = settings;\r\n const [personList, setPersonList] = useState(null);\r\n useEffect(() => {\r\n if (toJS(orders)[0]?.badgeNo) {\r\n updatePersonList(orders[0].badgeNo);\r\n }\r\n }, []);\r\n\r\n const columnDefs = useMemo(() => {\r\n const cols = [\r\n {\r\n accessorKey: \"firstName\",\r\n header: onEditClick(cell.row)}>\r\n \r\n );\r\n },\r\n });\r\n }\r\n return cols;\r\n }, [personList, breakouts]);\r\n const onEditClick = (row) => {\r\n if (editLinkUrl) {\r\n window.open(editLinkUrl.replace(/\\[BadgeNo\\]/gi, row.original.badgeNo), \"_blank\");\r\n }\r\n };\r\n const updatePersonList = async (badgeNo) => {\r\n const { data } = await Axios.post(\r\n `./api/exhibitor/invites/list/${badgeNo}`,\r\n personTypes.map((pt) => {\r\n return pt.value;\r\n })\r\n );\r\n if (data.success) {\r\n setPersonList(data.personList);\r\n }\r\n };\r\n const exportPersonList = () => {\r\n window.open(`./api/exhibitor/invites/export/${orders[0].badgeNo}?ptypes=${personTypes.map((pt) => pt.value).join(\",\")}&lang=${environment.lang}&useAltBreakoutName=${showAltName}`, \"_blank\");\r\n };\r\n if (personList === null) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n {showExportBtn ? (\r\n
\r\n \r\n ) : null}\r\n {personTypes.length > 0 ?
{personTypes.map((vt) => vt.name).join(\", \")} : null}\r\n {columnDefs?.length > 0 && personList?.length > 0 ? (\r\n
\r\n ) : null}\r\n
\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n return null;\r\n}\r\n","import React, { useRef, useMemo, useEffect, forwardRef } from \"react\";\r\nimport CropIcon from \"@material-ui/icons/Crop\";\r\nimport FolderOpenIcon from \"@material-ui/icons/FolderOpen\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport PictureDisplay from \"../../../global/PictureDisplay\";\r\n\r\nexport default function (props) {\r\n const imageRefs = useRef({});\r\n const imageColumnRefs = useRef({});\r\n\r\n const { settings, eventId, contentLayoutModuleId, contentModuleId, environment, selectedModule, w: moduleWidth, isSmartphone } = props;\r\n const { columns, horizontalGroup, horizontalColumns: _horizontalColumns, lockedImageSize, imageMaxWidth } = settings;\r\n\r\n const viewWidth = useMemo(() => `calc((100vw - 320px) * (${moduleWidth} / (12*${columns?.length})))`, [moduleWidth]);\r\n\r\n const isHidden = useMemo(() => columns?.filter(({ showImage }) => !showImage)?.length === columns?.length && columns.filter(({ showText }) => !showText)?.length === columns?.length, []);\r\n\r\n if (isHidden) return null;\r\n\r\n const getMinHeight = (imageRefs, columnRef) => {\r\n return Math.max(\r\n ...Object.values(imageRefs)?.map((element) => {\r\n const { offsetHeight, id } = element;\r\n\r\n const columnIndex = id?.split(\"_\")[2];\r\n const computedStyle = window.getComputedStyle(element);\r\n const paddingTop = parseFloat(computedStyle.paddingTop);\r\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\r\n let baseHeight = offsetHeight + paddingTop + paddingBottom;\r\n\r\n if (!columns[columnIndex]?.horizontalImages) {\r\n const imageLength = columns[columnIndex]?.images?.length;\r\n baseHeight = imageLength * baseHeight ?? 0;\r\n }\r\n\r\n if (columnRef[columnIndex]) {\r\n const computedColumnStyle = window.getComputedStyle(columnRef[columnIndex]);\r\n baseHeight += parseFloat(computedColumnStyle.paddingTop) + parseFloat(computedColumnStyle.paddingBottom);\r\n }\r\n\r\n return baseHeight ?? 0;\r\n })\r\n );\r\n };\r\n\r\n return (\r\n \r\n {columns?.map(\r\n (\r\n {\r\n images,\r\n text,\r\n showImage = true,\r\n justifyContent = \"center\",\r\n alignItems = \"center\",\r\n showText,\r\n textColWidth,\r\n overriddenAspectRatio,\r\n overrideAspectRatio,\r\n horizontalColumns,\r\n columnWidth,\r\n reversed,\r\n horizontalImages,\r\n imageColWidth,\r\n },\r\n index\r\n ) => (\r\n
\r\n {showImage && (\r\n (imageColumnRefs.current[index] = ref)}\r\n className=\"image-column\"\r\n style={{\r\n height: imageRefs.current?.length > 1 ? getMinHeight(imageRefs.current, imageColumnRefs.current) : undefined,\r\n width: !showText || isSmartphone ? \"100%\" : imageColWidth ?? \"100%\",\r\n display: \"flex\",\r\n alignItems,\r\n justifyContent,\r\n flexDirection: horizontalImages ? \"row\" : \"column\",\r\n }}\r\n >\r\n {images?.map((image, imageIndex) => (\r\n \r\n Module Type {type} not found. ;\r\n }\r\n};\r\n","import { observer } from \"mobx-react-lite\";\r\nimport React, { useMemo } from \"react\";\r\nimport Snackbar from \"@material-ui/core/Snackbar\";\r\nimport MuiAlert from \"@material-ui/lab/Alert\";\r\nimport SystemLabel from \"./SystemLabel\";\r\nimport { toJS } from \"mobx\";\r\n\r\nfunction Alert(props) {\r\n return null}>\r\n \r\n {globalAlert}\r\n \r\n ;\r\n }\r\n return !isValid && validate ? (\r\n triggerValidation(false)}>\r\n \r\n {filteredValidations\r\n .filter((v) => (v.page === current.activePage || v.page === 0) && v.valid == false)\r\n .map((v) => {\r\n const module = modules.find((m) => m.contentModuleId == v.id && (m.settings.validation || v.label));\r\n if ((v.id.toString().includes(\"INVOICE_\") && current.payMethod == \"invoice\") || v.label == \"PaymentOption\") {\r\n return (\r\n scrollToNonValidModule(modules.find((m) => m.type == \"PAYMENT_OPTIONS\" || m.type == \"PAYMENT_OPTIONS_TWO\")?.contentModuleId)} className=\"validation-line\">\r\n *
\r\n );\r\n }\r\n if (module && v.valid == false) {\r\n let vMessage = null;\r\n if (v.reason && module.settings.validation[v.reason] && module.settings.validation[v.reason][environment.lang]) vMessage = module.settings.validation[v.reason][environment.lang];\r\n return (\r\n scrollToNonValidModule(module.contentModuleId)} className=\"validation-line\">\r\n * {v.label || getLabel(module)}: {v.message || (vMessage ? vMessage :
\r\n );\r\n }\r\n if (v?.decorator) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n return null;\r\n })}\r\n \r\n \r\n ) : null;\r\n});\r\n","import React from \"react\";\r\nimport { IconButton, List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Button as MuiButton, Tooltip } from \"@material-ui/core\";\r\nimport Badge from \"@material-ui/core/Badge\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport DialogContentText from \"@material-ui/core/DialogContentText\";\r\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\";\r\nimport { useTheme } from \"@material-ui/core/styles\";\r\nimport CreateIcon from \"@material-ui/icons/Create\";\r\nimport DeleteIcon from \"@material-ui/icons/Delete\";\r\nimport AccountCircleIcon from \"@material-ui/icons/AccountCircle\";\r\nimport VerifiedUserIcon from \"@material-ui/icons/VerifiedUser\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport PeopleIcon from \"@material-ui/icons/People\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport EventLabel from \"../../components/EventLabel\";\r\nconst StyledBadge = withStyles((theme) => ({\r\n badge: {\r\n right: -3,\r\n top: 13,\r\n border: `2px solid ${theme.palette.background.paper}`,\r\n padding: \"0 4px\",\r\n },\r\n}))(Badge);\r\n\r\nexport const FloatingGroupOrderCart = observer(({ orders, setActiveOrder, removeOrder, activePersonNo, setLeader }) => {\r\n const [open, setOpen] = React.useState(false);\r\n const theme = useTheme();\r\n const fullScreen = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const handleClickOpen = () => {\r\n setOpen(true);\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {open ? (\r\n \r\n
\r\n
\r\n \r\n {\" \"}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useEffect, useRef } from \"react\";\r\nexport const PageClosed = ({ children, imgSrc = null, openDateTime, closeDateTime, onOpenPage }) => {\r\n const intervalRef = useRef();\r\n useEffect(() => {\r\n intervalRef.current = setInterval(checkTimes, 5000);\r\n return () => {\r\n clearInterval(intervalRef.current);\r\n };\r\n });\r\n\r\n const checkTimes = () => {\r\n if ((!openDateTime || openDateTime < Date.now()) && (!closeDateTime || closeDateTime > Date.now())) {\r\n clearInterval(intervalRef.current);\r\n onOpenPage();\r\n }\r\n };\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n }\r\n\r\n return null;\r\n}\r\n","import React, { useEffect, useMemo } from \"react\";\r\nimport _ from \"lodash\";\r\nimport { ContentLayoutModule } from \"../modules/ContentLayoutModule\";\r\n\r\nconst heightRuleset = {\r\n IMAGE: \"auto\",\r\n};\r\n\r\nexport default function LayoutRenderer({ layout, xrayMode = false, ...rest }) {\r\n const { conditions } = rest;\r\n\r\n const findCompatibleSibling = (element, layout, rows, index) => {\r\n if (index >= rows.length) {\r\n return []; // Terminate recursion when there are no more rows to search\r\n }\r\n\r\n const nextRow = rows[index];\r\n const compatibleSibling = layout.find((item) => item.posY === nextRow && item.posX === element.posX && item.width === element.width);\r\n // || (item.contentModule.type === \"SPACE\" && Math.abs(item.posY - nextRow) <= 100));\r\n if (compatibleSibling) {\r\n return [compatibleSibling, ...findCompatibleSibling(compatibleSibling, layout, rows, index + 1)];\r\n }\r\n\r\n return [];\r\n };\r\n\r\n const elements = useMemo(() => {\r\n // Prevent multiple renders of the same element if some are have a column compatibility\r\n const added = [];\r\n const rows = [...new Set(_.sortBy(layout, [\"posY\"]).map((item) => item.posY))];\r\n const renderedElements = [];\r\n\r\n rows.forEach((r, index) => {\r\n const rowElements = [];\r\n const nextRow = rows[index + 1];\r\n const maxHeightInRow = Math.max(...layout.filter((item) => item.posY === r).map((item) => item.height));\r\n\r\n let elementsInRow = layout.filter((item) => !added.includes(item.contentModuleId) && item.posY === r);\r\n\r\n const allElementsHidden = elementsInRow.every((item) => item.renderHeight === 1 || (conditions[item.contentLayoutModuleId] && conditions[item.contentLayoutModuleId].hidden == true));\r\n\r\n // Add all the columns in the row\r\n if (elementsInRow.length > 0 && !allElementsHidden) {\r\n const cols = [...new Set(elementsInRow.map((item) => item.posX))];\r\n\r\n added.push(...elementsInRow.map((item) => item.contentModuleId));\r\n\r\n cols?.forEach((c) => {\r\n const colElements = [];\r\n const elementsInColumn = elementsInRow.filter((item) => item.posX === c);\r\n const colWidth = Math.max(...elementsInRow.filter((item) => item.posX === c)?.map((item) => item.width));\r\n\r\n _.sortBy(elementsInColumn, [\"posY\"])?.forEach((element) => {\r\n added.push(element.contentModuleId);\r\n const compatibleSiblings = findCompatibleSibling(element, layout, rows, index + 1);\r\n\r\n colElements.push(\r\n 0 ? \"auto\" : \"100%\", border: xrayMode ? \"1px solid red\" : undefined }}>\r\n
\r\n );\r\n\r\n if (compatibleSiblings.length > 0) {\r\n compatibleSiblings.forEach((compatibleSibling) => {\r\n added.push(compatibleSibling.contentModuleId);\r\n colElements.push(\r\n \r\n
\r\n );\r\n });\r\n }\r\n });\r\n\r\n rowElements.push(\r\n \r\n {colElements}\r\n \r\n );\r\n });\r\n\r\n renderedElements.push(\r\n \r\n {rowElements}\r\n
\r\n );\r\n }\r\n });\r\n\r\n return renderedElements;\r\n }, [layout]);\r\n\r\n return {elements}
;\r\n}\r\n","import React, { useContext, useEffect, useMemo, useRef, useState } from \"react\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport axios from \"axios\";\r\nimport Store from \"./store/Store\";\r\nimport { runInAction, toJS } from \"mobx\";\r\nimport { getUrlParam } from \"./helpers/url.helper\";\r\nimport { ContentLayoutModule } from \"./modules/ContentLayoutModule\";\r\nimport \"./layout.css\";\r\nimport { ValidationSnackbar } from \"./components/ValidationSnackbar\";\r\nimport { FloatingGroupOrderCart } from \"./modules/GroupRegistration/FloatingGroupOrderCart\";\r\nimport { usePrevious } from \"./helpers/usePrevious\";\r\nimport { NotAuthorized } from \"./components/NotAuthorized\";\r\nimport SystemLabel from \"../system/SystemLabel/SystemLabel\";\r\nimport { PasswordDialog } from \"./components/PasswordDialog\";\r\nimport { PageClosed } from \"./components/PageClosed\";\r\nimport EventLabel from \"./components/EventLabel\";\r\nimport { useMediaQuery } from \"@material-ui/core\";\r\nimport json2mq from \"json2mq\";\r\nimport { LoadSpinner } from \"./components/LoadSpinner\";\r\nimport { addOrUpdateFont } from \"./helpers/font.helper\";\r\nimport { toJSON } from \"cssjson\";\r\nimport GridLayout from \"react-grid-layout\";\r\nimport AnimatedBackground from \"./components/AnimatedBackground\";\r\nimport { adobeTypekitParser } from \"./helpers/adobeTypekit.helper\";\r\nimport useLayoutRender from \"./hooks/useLayoutRender\";\r\n\r\nconst API_KEY_WEBFONTS = \"AIzaSyB6aQW4uFg8OuFMHaxBmqDPCvzBGe5vuTg\";\r\n\r\nconst Layout = observer((props) => {\r\n const store = scoped ? props : useContext(Store);\r\n const modulesRefs = useRef([]);\r\n const prevProps = usePrevious(props);\r\n const [showLoader, setShowLoader] = useState(true);\r\n const [clienFontsLoaded, setClientFontsLoaded] = useState(false);\r\n const [googleFontsLoaded, setGoogleFontsLoaded] = useState(false);\r\n const [fontAppended, setFontAppended] = useState(false);\r\n const [ordersLoaded, setOrdersLoaded] = useState(false);\r\n const [layoutLoaded, setLayoutLoaded] = useState(false);\r\n const [notAuthorized, setNotAuthorized] = useState(false);\r\n const [showPwdDialog, setShowPwdDialog] = useState(false);\r\n const [showPageClosed, setShowPageClosed] = useState(false);\r\n const [resized, setResized] = useState(+new Date());\r\n const bodyRef = useRef();\r\n const [contentStyles, setContentStyles] = useState(\"\");\r\n const [fontStyles, setFontStyles] = useState(\"\");\r\n const contentStyleRef = useRef();\r\n const fontStyleRef = useRef();\r\n\r\n const { scoped = false } = props;\r\n\r\n useEffect(() => {\r\n if (!scoped && prevProps && props.match && prevProps.match.params.id != props.match.params.id) init();\r\n });\r\n\r\n useEffect(() => {\r\n if (!scoped) init();\r\n let body = document.getElementsByTagName(\"body\");\r\n for (const b of body) {\r\n b.classList.toggle(\"new-cms\", true);\r\n }\r\n window.addEventListener(\"resize\", windowOnResize);\r\n return () => {\r\n window.removeEventListener(\"resize\", windowOnResize);\r\n let body = document.getElementsByTagName(\"body\");\r\n for (const b of body) {\r\n b.classList.toggle(\"new-cms\", false);\r\n }\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (bodyRef.current) {\r\n bodyRef.current.scrollTo(0, 0);\r\n }\r\n }, [store.current.activePage]);\r\n\r\n const windowOnResize = () => {\r\n setResized(+new Date());\r\n };\r\n\r\n useEffect(() => {\r\n if (clienFontsLoaded && googleFontsLoaded && layoutLoaded) {\r\n let fontstring = addOrUpdateFont(null, toJSON(store.current.template?.formattedCss ?? \"\"), store, \"\");\r\n fontstring += addOrUpdateFont(null, toJSON(store.contentLayout.css), store, \"\");\r\n if (fontstring != fontStyles) {\r\n setFontStyles(fontstring);\r\n }\r\n setFontAppended(true);\r\n }\r\n }, [clienFontsLoaded, googleFontsLoaded, layoutLoaded]);\r\n\r\n useEffect(() => {\r\n if (!fontStyleRef.current) {\r\n fontStyleRef.current = document.createElement(\"style\");\r\n fontStyleRef.current.id = \"THISONE\";\r\n document.head.appendChild(fontStyleRef.current);\r\n }\r\n fontStyleRef.current.innerHTML = fontStyles;\r\n }, [fontStyles]);\r\n\r\n useEffect(() => {\r\n if (!contentStyleRef.current) {\r\n contentStyleRef.current = document.createElement(\"style\");\r\n contentStyleRef.current.id = \"THISTOO\";\r\n document.head.appendChild(contentStyleRef.current);\r\n }\r\n contentStyleRef.current.innerHTML = contentStyles;\r\n }, [contentStyles]);\r\n\r\n useEffect(() => {\r\n if (ordersLoaded && layoutLoaded && !scoped) {\r\n let badgeNo = getUrlParam(\"badgeno\");\r\n if (!badgeNo) badgeNo = getUrlParam(\"clientkey\");\r\n if (store.contentLayout?.onlyAuthorizedUsers) {\r\n if (!badgeNo) {\r\n setNotAuthorized(true);\r\n }\r\n }\r\n if (store.contentLayout?.groupLeaderChangeLock) {\r\n var o = store.orders.find((x) => x.badgeNo == badgeNo);\r\n if (o && o.orderGroupId && o.orderGroupId !== o.orderId) {\r\n setNotAuthorized(true);\r\n }\r\n }\r\n if (store?.contentLayout?.type == \"FORM\") store.checkMainEventBookingStatus();\r\n setShowLoader(false);\r\n }\r\n }, [ordersLoaded, layoutLoaded]);\r\n\r\n useEffect(() => {\r\n if (store.contentLayout?.templateId && store.templates.length > 0) {\r\n runInAction(() => {\r\n store.current.template = store.templates.find((d) => d.templateId == store.contentLayout.templateId);\r\n });\r\n }\r\n }, [store.contentLayout, store.templates]);\r\n\r\n useEffect(() => {\r\n if (store.contentLayout?.activateGroupLeaderOnPage && store.contentLayout?.activateGroupLeaderOnPage == store.current?.activePage) {\r\n runInAction(() => {\r\n let leader = store.orders.find((x) => x.leader);\r\n if (leader) {\r\n store.setActiveOrder(store.orders.indexOf(leader));\r\n }\r\n });\r\n }\r\n }, [store.current?.activePage]);\r\n\r\n const fetchClientFonts = async () => {\r\n try {\r\n const { data } = await axios.get(`./api/files/fonts/${store.environment.eventId}`);\r\n\r\n if (data.files) {\r\n const parsedFiles = await Promise.all(\r\n data.files.map(async ({ type, name, url }) => {\r\n if (type.includes(\"css\")) {\r\n const { importUrl, fonts } = await adobeTypekitParser(url);\r\n return fonts.map((font) => {\r\n const { name: _name, fontface } = font;\r\n return {\r\n name: _name,\r\n url,\r\n fontface,\r\n importUrl,\r\n adobe: true,\r\n };\r\n });\r\n }\r\n\r\n return {\r\n name: name\r\n .substring(name.lastIndexOf(\"/\") + 1, name.lastIndexOf(\".\") + 1)\r\n .toString()\r\n .replace(/[)(.1]/g, \"\"),\r\n url,\r\n };\r\n })\r\n );\r\n setClientFontsLoaded(true);\r\n runInAction(() => {\r\n store.uploadedFonts = parsedFiles.flat();\r\n });\r\n } else {\r\n setClientFontsLoaded(true);\r\n }\r\n } catch (err) {\r\n console.error(err);\r\n setClientFontsLoaded(true);\r\n }\r\n };\r\n\r\n // const fetchClientFonts = () => {\r\n // axios\r\n // .get(`./api/files/fonts/${store.environment.eventId}`)\r\n // .then(({ data }) => {\r\n // if (data.files) {\r\n // runInAction(() => {\r\n // store.uploadedFonts = data.files.map((f) => {\r\n // const { name } = f;\r\n // return {\r\n // name: name\r\n // .substring(name.lastIndexOf(\"/\") + 1, name.lastIndexOf(\".\") + 1)\r\n // .toString()\r\n // .replace(\")\", \"\")\r\n // .replace(\"(\", \"\")\r\n // .replace(\".\", \"\")\r\n // .replace(\"1\", \"\")\r\n // .replace(\"\", \"\"),\r\n // url: f.url,\r\n // };\r\n // });\r\n // setClientFontsLoaded(true);\r\n // });\r\n // } else {\r\n // setClientFontsLoaded(true);\r\n // }\r\n // })\r\n // .catch((err) => {\r\n // console.error(err);\r\n // setClientFontsLoaded(true);\r\n // });\r\n // };\r\n\r\n const fetchGoogleFonts = () => {\r\n axios\r\n .get(`https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=${API_KEY_WEBFONTS}`)\r\n .then(({ data }) => {\r\n runInAction(() => {\r\n store.googleFonts = data.items\r\n .splice(0, 200)\r\n .map((f) => {\r\n return f.family;\r\n })\r\n .sort(function (a, b) {\r\n if (a < b) {\r\n return -1;\r\n }\r\n if (a > b) {\r\n return 1;\r\n }\r\n return 0;\r\n });\r\n setGoogleFontsLoaded(true);\r\n });\r\n })\r\n .catch((err) => {\r\n setGoogleFontsLoaded(true);\r\n console.error(err);\r\n });\r\n };\r\n\r\n const setPageIcon = (url) => {\r\n let link = document.querySelector(\"link[rel=icon]\");\r\n if (!link) {\r\n link = document.createElement(\"link\");\r\n link.id = \"favicon\";\r\n link.rel = \"icon\";\r\n document.head.append(link);\r\n }\r\n link.href = url + \"?=\" + Math.random();\r\n };\r\n\r\n const init = () => {\r\n const { match } = props;\r\n let layoutCode = scoped ? props.layoutCode : match.params.id;\r\n let badgeNo = getUrlParam(\"badgeno\");\r\n const xrayMode = getUrlParam(\"xray\");\r\n\r\n if (xrayMode) {\r\n store.xrayMode = true;\r\n }\r\n\r\n if (!badgeNo) badgeNo = getUrlParam(\"clientkey\");\r\n if (badgeNo) {\r\n getAttendee(badgeNo, layoutCode);\r\n } else {\r\n setOrdersLoaded(true);\r\n }\r\n //handle this different\r\n let item = localStorage.getItem(\"formstates\");\r\n let prevStateNo = undefined;\r\n if (item) {\r\n let states = JSON.parse(item);\r\n let prevState = states.find((s) => s.formId === layoutCode && s.expires > Date.now());\r\n if (prevState) {\r\n prevStateNo = prevState.sqlStateNo;\r\n }\r\n }\r\n\r\n if (scoped) return;\r\n\r\n axios.get(`./api/cms/${layoutCode}/?newSqlStateNo=${prevStateNo === undefined}`).then(({ data }) => {\r\n runInAction(() => {\r\n store.environment.eventId = data.contentLayout.eventId;\r\n\r\n store.contentLayout = data.contentLayout;\r\n\r\n store.modules = data.contentModules;\r\n store.questions = data.questions;\r\n store.breakouts = data.breakouts;\r\n store.sqlStateNo = data.sqlStateNo;\r\n store.environment.currency = data.currency || \"SEK\";\r\n store.environment.eventCountry = data.eventCountry;\r\n store.contentHeaderLayout = data.contentHeaderLayout;\r\n store.contentFooterLayout = data.contentFooterLayout;\r\n store.mainEvent = data.mainEvent;\r\n\r\n if (store.contentLayout.conditions) {\r\n store.contentLayout.conditions = JSON.parse(store.contentLayout.conditions);\r\n }\r\n store.contentLayout.contentLayoutModules = store.contentLayout.contentLayoutModules.map((clm) => {\r\n clm.conditions = JSON.parse(clm.conditions);\r\n return clm;\r\n });\r\n\r\n store.current.hasContentView = store.contentLayout.contentLayoutModules.find((clm) => clm.contentModule.type == \"CONTENT_VIEW\");\r\n //Get the whole event or baseevent\r\n\r\n fetchGoogleFonts();\r\n fetchClientFonts();\r\n\r\n const displayEventSettings = {};\r\n data.displayEventSettings.map((de) => {\r\n displayEventSettings[de.name] = de.value;\r\n });\r\n store.displayEventSettings = displayEventSettings;\r\n const displayConfirmationSettings = {};\r\n data.displayConfirmationSettings.map((de) => {\r\n displayConfirmationSettings[de.name] = de.value;\r\n });\r\n store.displayConfirmationSettings = displayConfirmationSettings;\r\n store.fields = data.fields;\r\n store.current.template = data.templates.find((t) => t.templateId == data.contentLayout.templateId);\r\n store.defaultSelectedCountry = parseInt(data.defaultSelectedCountry);\r\n\r\n store.configureEnviroment(data.contentLayout, data);\r\n\r\n if (store.contentLayout.googleAnalytics) {\r\n appendGoogleAnalytics(store.contentLayout.googleAnalytics);\r\n }\r\n if (store.contentLayout.facebookPixel) {\r\n appendFacebookPixel(store.contentLayout.facebookPixel);\r\n }\r\n if (store.contentLayout.documentTitle) {\r\n document.title = store.contentLayout.documentTitle;\r\n } else if (store.mainEvent && store.mainEvent.name) {\r\n document.title = store.mainEvent.name;\r\n }\r\n if (store.contentLayout.faviconUrl) {\r\n setPageIcon(store.contentLayout.faviconUrl);\r\n }\r\n if ((data.contentLayout.openDateTime && +new Date(data.contentLayout.openDateTime) > Date.now()) || (data.contentLayout.closeDateTime && +new Date(data.contentLayout.closeDateTime) < Date.now())) {\r\n if (data.contentLayout?.redirectUrl) {\r\n window.location.href = data.contentLayout?.redirectUrl;\r\n } else setShowPageClosed(true);\r\n }\r\n\r\n if (data.contentLayout.password) {\r\n let pwdItem = localStorage.getItem(`pwd_${store.contentLayout.contentLayoutId}`);\r\n if (!pwdItem || atob(pwdItem) != data.contentLayout.password) {\r\n setShowPwdDialog(true);\r\n }\r\n }\r\n\r\n setContentStyles(`\r\n /*TEMPLATE*/\r\n ${store.current.template?.formattedCss ?? \"\"}\r\n /*LAYOUT*/\r\n ${store.contentLayout.css ?? \"\"}\r\n /*HEADER*/\r\n ${store?.contentHeaderLayout?.css ?? \"\"}\r\n /*FOOTER*/\r\n ${store?.contentFooterLayout?.css ?? \"\"}\r\n `);\r\n\r\n getCountries();\r\n getEventLanguages();\r\n if (bodyRef.current) {\r\n bodyRef.current.scroll({\r\n top: 0,\r\n left: 0,\r\n behavior: \"smooth\",\r\n });\r\n }\r\n if (data.contentLayout.type == \"FORM\") store.checkMainEventBookingStatus();\r\n else if (data.contentLayout.type == \"SURVEY\") checkIsSurveyAnswered(layoutCode, badgeNo);\r\n setLayoutLoaded(true);\r\n });\r\n });\r\n };\r\n\r\n const checkIsSurveyAnswered = async (layoutCode, badgeNo) => {\r\n if (layoutCode && badgeNo) {\r\n const { data } = await axios.get(`./api/attendee/survey/${layoutCode}/${badgeNo}`);\r\n const { isAnswered, redirectCode } = data;\r\n if (isAnswered && redirectCode) {\r\n window.location.href = `${window.location.origin}${!window.location.href.includes(\"localhost\") ? \"/cms\" : \"\"}/web/${redirectCode}${window.location.search}`;\r\n }\r\n }\r\n };\r\n const appendGoogleAnalytics = (googleAnalyticsId) => {\r\n var script1 = document.createElement(\"script\");\r\n script1.src = `https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId.replace(\" \", \"\")}`;\r\n script1.async = true;\r\n document.head.appendChild(script1);\r\n\r\n var script2 = document.createElement(\"script\");\r\n script2.text = `window.dataLayer = window.dataLayer || [];\r\n function gtag(){dataLayer.push(arguments);}\r\n gtag('js', new Date());\r\n gtag('config', '${googleAnalyticsId.replace(\" \", \"\")}');`;\r\n\r\n document.head.appendChild(script2);\r\n };\r\n\r\n const appendFacebookPixel = (facebookPixelId) => {\r\n var script2 = document.createElement(\"script\");\r\n script2.text = `\r\n !function(f,b,e,v,n,t,s)\r\n {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\r\n n.callMethod.apply(n,arguments):n.queue.push(arguments)};\r\n if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\r\n n.queue=[];t=b.createElement(e);t.async=!0;\r\n t.src=v;s=b.getElementsByTagName(e)[0];\r\n s.parentNode.insertBefore(t,s)}(window, document,'script',\r\n 'https://connect.facebook.net/en_US/fbevents.js');\r\n fbq('init', '${facebookPixelId.replace(\" \", \"\")}');\r\n fbq('track', 'PageView');\r\n `;\r\n document.head.appendChild(script2);\r\n };\r\n\r\n const getAttendee = (badgeNo, code) => {\r\n axios.get(`./api/attendee/${badgeNo}?layoutCode=${code}`).then(({ data }) => {\r\n if (Array.isArray(data)) {\r\n runInAction(() => {\r\n store.orders = data;\r\n setOrdersLoaded(true);\r\n });\r\n } else {\r\n setNotAuthorized(true);\r\n }\r\n });\r\n };\r\n\r\n const getCountries = () => {\r\n axios.get(`./api/country/`).then(({ data }) => {\r\n runInAction(() => {\r\n store.countries = data;\r\n });\r\n });\r\n };\r\n\r\n const getEventLanguages = () => {\r\n axios.get(`./api/language/${store.environment.eventId}`).then((res) => {\r\n const eventLanguages = res.data;\r\n runInAction(() => {\r\n store.event.languages = eventLanguages;\r\n });\r\n });\r\n };\r\n\r\n const isSmartphone = useMediaQuery(\r\n json2mq({\r\n maxWidth: 768,\r\n })\r\n );\r\n\r\n // const layout = useMemo(() => {\r\n // if (scoped) return store.current.scopedLayout?.contentLayoutModules.filter((clm) => clm.pages === store.current.activePage) || [];\r\n // return store.contentLayout?.contentLayoutModules.filter((clm) => clm.pages === store.current.activePage) || [];\r\n // }, [store.contentLayout?.contentLayoutModules, store.current.scopedLayout?.contentLayoutModules, store.current.activePage]);\r\n\r\n const layout = store.contentLayout?.contentLayoutModules.filter((clm) => clm.pages === store.current.activePage) ?? [];\r\n const headerLayout = store.contentHeaderLayout?.contentLayoutModules ?? [];\r\n const footerLayout = store.contentFooterLayout?.contentLayoutModules ?? [];\r\n\r\n const headerModules = useLayoutRender({\r\n layout: headerLayout,\r\n xrayMode: store.xrayMode,\r\n ...props,\r\n ...store,\r\n modulesRefs,\r\n isSmartphone,\r\n bodyWidth: bodyRef.current?.clientWidth || window.innerWidth,\r\n });\r\n\r\n const layoutModules = useLayoutRender({\r\n layout,\r\n xrayMode: store.xrayMode,\r\n ...props,\r\n ...store,\r\n modulesRefs,\r\n isSmartphone,\r\n bodyWidth: bodyRef.current?.clientWidth || window.innerWidth,\r\n });\r\n\r\n const footerModules = useLayoutRender({\r\n layout: footerLayout,\r\n xrayMode: store.xrayMode,\r\n ...props,\r\n ...store,\r\n modulesRefs,\r\n isSmartphone,\r\n bodyWidth: bodyRef.current?.clientWidth || window.innerWidth,\r\n });\r\n\r\n if (notAuthorized) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n if (showLoader || !fontAppended || (showPageClosed && store?.contentLayout?.redirectUrl)) return setShowPwdDialog(false)} pwd={store.contentLayout.password} contentId={store.contentLayout.contentLayoutId} /> : null}\r\n {!showPageClosed && !showPwdDialog && store.contentLayout?.contentLayoutModules.find((cl) => cl.contentModule.type == \"GROUP_REGISTRATION\") ? \r\n
\r\n
\r\n
\r\n {showPageClosed || store.mainEventFullbooked ? (\r\n
setShowPageClosed(false)}>\r\n \r\n \r\n \r\n \r\n \r\n ) : !showPwdDialog ? (\r\n <>\r\n
\r\n
\r\n
{headerModules}
\r\n
\r\n
\r\n
\r\n
{layoutModules}
\r\n
\r\n
\r\n
\r\n
{footerModules}
\r\n
\r\n\r\n {/*
\r\n
\r\n
a.posY - b.posY)\r\n .map((clm) => {\r\n return {\r\n i: clm.contentLayoutModuleId.toString(),\r\n x: isSmartphone ? 0 : clm.posX,\r\n y: clm.posY - numberOfHiddenElements,\r\n h: clm.renderHeight ?? clm.height,\r\n w: isSmartphone ? 12 : clm.width,\r\n minH: 0,\r\n };\r\n })}\r\n width={bodyRef.current?.clientWidth || window.innerWidth}\r\n isDraggable={false}\r\n isResizable={false}\r\n verticalCompact={true}\r\n measureBeforeMount={true}\r\n useCSSTransforms={false}\r\n margin={[0, 0]}\r\n >\r\n {headerLayout\r\n ?.slice()\r\n .sort((a, b) => a.posY - b.posY)\r\n ?.map((clm, ii) => {\r\n if (clm.renderHeight == 1) {\r\n numberOfHiddenElements += 1;\r\n }\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n\r\n
\r\n
\r\n
clm.pages == store.current.activePage)\r\n .sort((a, b) => a.posY - b.posY)\r\n .map((clm) => {\r\n return {\r\n i: clm.contentLayoutModuleId.toString(),\r\n x: isSmartphone ? 0 : clm.posX,\r\n y: clm.posY - numberOfHiddenElements,\r\n h: clm.renderHeight ?? clm.height,\r\n w: isSmartphone ? 12 : clm.width,\r\n minH: 0,\r\n };\r\n })}\r\n width={bodyRef.current?.clientWidth || window.innerWidth}\r\n isDraggable={false}\r\n isResizable={false}\r\n verticalCompact={true}\r\n measureBeforeMount={true}\r\n useCSSTransforms={false}\r\n margin={[0, 0]}\r\n >\r\n {layout\r\n ?.filter((clm) => clm.pages == store.current.activePage)\r\n .sort((a, b) => a.posY - b.posY)\r\n ?.map((clm, ii) => {\r\n if (clm.renderHeight == 1) {\r\n numberOfHiddenElements += 1;\r\n }\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n
\r\n
\r\n
a.posY - b.posY)\r\n .map((clm) => {\r\n return {\r\n i: clm.contentLayoutModuleId.toString(),\r\n x: isSmartphone ? 0 : clm.posX,\r\n y: clm.posY - numberOfHiddenElements,\r\n h: clm.renderHeight ?? clm.height,\r\n w: isSmartphone ? 12 : clm.width,\r\n minH: 0,\r\n };\r\n })}\r\n width={bodyRef.current?.clientWidth || window.innerWidth}\r\n isDraggable={false}\r\n isResizable={false}\r\n verticalCompact={true}\r\n measureBeforeMount={true}\r\n useCSSTransforms={false}\r\n margin={[0, 0]}\r\n >\r\n {footerLayout\r\n ?.slice()\r\n .sort((a, b) => a.posY - b.posY)\r\n ?.map((clm, ii) => {\r\n if (clm.renderHeight == 1) {\r\n numberOfHiddenElements += 1;\r\n }\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n \r\n */}\r\n \r\n ) : null}\r\n
\r\n
\r\n {source && source.startsWith(\"http\") ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleZoomOut(newValue, true)} aria-labelledby=\"zoom-slider\" />\r\n \r\n \r\n \r\n \r\n \r\n \r\n setFilled(!filled)}>\r\n {!filled ? \r\n {filled ? (\r\n setShape(shape == \"circle\" ? \"normal\" : \"circle\")}>\r\n {shape != \"circle\" ? \r\n ) : null}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useState, useRef } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { ImageOverlay } from \"../../../../elements/element/Image/ImageOverlay\";\r\nimport ArchiveContainer from \"../../../../../file/containers/ArchiveContainer\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { largeHeaderImageHandler } from \"./LargeHeaderImage.handler\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { HtmlWrapper } from \"../../components/HtmlWrapper\";\r\nimport \"./LargeHeaderImage.css\";\r\nimport InlineCropper from \"../../../../../file/plugins/InlineCropper\";\r\nimport { Cropper } from \"../../../../../file/plugins/Cropper\";\r\nconst LargeHeaderImage = (props) => {\r\n const [mediaVaultOpen, openMediaVault] = useState(false);\r\n const [isCropping, toggleCropper] = useState(false);\r\n const { content, style } = props.element;\r\n const { template } = props;\r\n const imgRef = useRef();\r\n const wrapperRef = useRef();\r\n const setImage = (source, openCropper = true) => {\r\n const { element, dispatch } = props;\r\n const updatedElement = deepClone(element);\r\n try {\r\n updatedElement.style.elementProps.source = source;\r\n } catch (error) {\r\n console.log(\"ERR: COULD NOT SET IMAGE\");\r\n }\r\n updatedElement.content = largeHeaderImageHandler.elementEditor(updatedElement.style, null);\r\n props.dispatch(emailActions.updateEmailElement(updatedElement, null, true, props.inherit));\r\n /* if (openCropper) toggleCropper(true); */\r\n };\r\n const onCrop = (value) => {\r\n setImage(value, false);\r\n toggleCropper(false);\r\n };\r\n const toggleMediaVault = (show) => {\r\n openMediaVault(show);\r\n };\r\n return (\r\n \r\n \r\n {isCropping ? (\r\n \r\n \r\n toggleCropper(!isCropping)}\r\n parent={\"contentId\"}\r\n isCropping={isCropping}\r\n onSave={onCrop}\r\n />\r\n \r\n \r\n ) : null}\r\n {!isCropping ? (\r\n \r\n \r\n ) : null}\r\n \r\n {/* \r\n \r\n \r\n */}\r\n \r\n {mediaVaultOpen ? \r\n \r\n \r\n );\r\n};\r\nfunction mapStateToProps(state) {\r\n return {\r\n template: state.template.template,\r\n inherit: state.email.inherit,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(LargeHeaderImage);\r\n","import React from \"react\";\r\nimport LargeHeaderImage from \"./LargeHeaderImage\";\r\n\r\nexport const largeHeaderImageHandler = {\r\n tags,\r\n elementEditor,\r\n defaultStyle,\r\n component,\r\n families,\r\n};\r\n\r\nfunction component(element) {\r\n return \r\n \r\n \r\n `\r\n )\r\n}; */\r\n\r\nfunction elementEditor(elementStyle, templateStyle = null, defaultStyle = true) {\r\n //Take what is relevant from the template\r\n return `\r\n \r\n \r\n `;\r\n}\r\n","import React, { useState } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { ImageOverlay } from '../../../../elements/element/Image/ImageOverlay';\r\nimport ArchiveContainer from '../../../../../file/containers/ArchiveContainer';\r\nimport { deepClone } from '../../../../../helpers/objectHelper';\r\nimport { smallHeaderImageHandler } from './SmallHeaderImage.handler';\r\nimport { emailActions } from '../../../../../store/actions/cms/email/email.action';\r\nimport { HtmlWrapper } from '../../components/HtmlWrapper';\r\nimport InlineCropper from '../../../../../file/plugins/InlineCropper';\r\nimport './SmallHeaderImage.css'\r\n\r\nconst SmallHeaderImage = (props) => {\r\n const [mediaVaultOpen, openMediaVault] = useState(false)\r\n const { content, style } = props.element;\r\n const [isCropping, toggleCropper] = useState(false)\r\n const { template } = props;\r\n\r\n const setImage = (source) => {\r\n const { element, dispatch } = props;\r\n const updatedElement = deepClone(element);\r\n try {\r\n updatedElement.style.elementProps.source = source;\r\n } catch (error) {\r\n console.log('ERR: COULD NOT SET IMAGE')\r\n }\r\n updatedElement.content = smallHeaderImageHandler.elementEditor(updatedElement.style, null);\r\n props.dispatch(emailActions.updateEmailElement(updatedElement, null, true, props.inherit));\r\n }\r\n const onCrop = (value) => {\r\n setImage(value, false);\r\n toggleCropper(false)\r\n }\r\n const toggleMediaVault = (show) => {\r\n openMediaVault(show)\r\n }\r\n return (\r\n \r\n \r\n {isCropping ? \r\n \r\n toggleCropper(!isCropping)}\r\n parent={'contentId'}\r\n isCropping={isCropping}\r\n onSave={onCrop}\r\n />\r\n \r\n : null}\r\n {!isCropping ? \r\n : null}\r\n \r\n \r\n \r\n {mediaVaultOpen ?\r\n \r\n \r\n\r\n \r\n )\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n state,\r\n inherit: state.email.inherit\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(SmallHeaderImage);","import React from 'react';\r\nimport SmallHeaderImage from './SmallHeaderImage';\r\n\r\nexport const smallHeaderImageHandler = {\r\n tags,\r\n elementEditor,\r\n defaultStyle,\r\n component,\r\n families\r\n}\r\n\r\nfunction component(element) {\r\n return \r\n \r\n \r\n `\r\n )\r\n}; */\r\n\r\nfunction elementEditor(elementStyle, templateStyle = null, defaultStyle = true) {\r\n //Take what is relevant from the template\r\n return (\r\n `\r\n \r\n \r\n `\r\n )\r\n};\r\n","import React, { useState } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { deepClone } from '../../../../../helpers/objectHelper';\r\nimport { textAreaHandler } from './TextArea.handler';\r\nimport { emailActions } from '../../../../../store/actions/cms/email/email.action';\r\nimport { HtmlWrapper } from '../../components/HtmlWrapper';\r\nimport './TextArea.css'\r\nimport { toKebabCase } from '../../../../../helpers/cssHelper';\r\nimport TextWrapper from '../../components/TextWrapper';\r\n\r\nconst TextArea = (props) => {\r\n const { content } = props.element;\r\n const { selectedElement, element } = props;\r\n\r\n const textOnChange = (text) => {\r\n const { element, dispatch, template } = props;\r\n const updatedElement = deepClone(element);\r\n try {\r\n updatedElement.style.elementProps.text = text;\r\n } catch (error) {\r\n console.log('ERR: COULD NOT SET TEXT')\r\n }\r\n updatedElement.content = textAreaHandler.elementEditor(updatedElement.style, template.template ? template.template.content : null, null);\r\n props.dispatch(emailActions.updateEmailElement(updatedElement, null, true, props.inherit));\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n )\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n selectedElement: state.email.selectedElement,\r\n inherit: state.email.inherit,\r\n template: state.template\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(TextArea);","import React from 'react';\r\nimport TextArea from './TextArea';\r\nimport { templateHelper } from '../../../template/helpers/templateHelper';\r\nimport { toKebabCase } from '../../../../../helpers/cssHelper';\r\n\r\nexport const textAreaHandler = {\r\n tags,\r\n elementEditor,\r\n defaultStyle,\r\n component,\r\n families\r\n}\r\n\r\nfunction component(element) {\r\n return \r\n}\r\n\r\nfunction tags() {\r\n return {\r\n startTag: '',\r\n endTag: ''\r\n }\r\n}\r\n\r\nfunction families() {\r\n return [\r\n 'text'\r\n ]\r\n}\r\n\r\nfunction defaultStyle(templateStyle = null, defaultStyle = true) {\r\n const templateContentStyle = templateStyle ? templateStyle.content : null;\r\n const templateTextStyle = templateStyle ? templateStyle.text : null;\r\n const inheritedStyles = templateStyle && !defaultStyle ? [\r\n { templatePath: \"content.backgroundColor\", stylePath: 'wrapper.backgroundColor' },\r\n { templatePath: \"text.color\", stylePath: 'styleProps.color' },\r\n { templatePath: \"text.fontSize\", stylePath: 'styleProps.fontSize' },\r\n ] : [];\r\n return {\r\n wrapper: {\r\n backgroundColor: templateContentStyle && !defaultStyle ? templateContentStyle.backgroundColor : '#fffff'\r\n },\r\n elementProps: {\r\n editor: null,\r\n text: 'Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.
',\r\n },\r\n styleProps: {\r\n padding: '20px 20px 20px 20px',\r\n fontFamily: 'sans-serif',\r\n fontSize: templateTextStyle && !defaultStyle ? templateTextStyle.fontSize : '15px',\r\n lineHeight: 'normal',\r\n color: templateTextStyle && !defaultStyle ? templateTextStyle.color : '#555555',\r\n },\r\n inheritedStyles: inheritedStyles\r\n }\r\n}\r\nfunction elementEditor(elementStyle, templateStyle = null, defaultStyle = true) {\r\n //Take what is relevant from the template\r\n const templateContentStyle = templateStyle ? templateStyle.content : null;\r\n const templateTextStyle = templateStyle ? templateStyle.text : null;\r\n return (\r\n `\r\n \r\n \r\n \r\n \r\n \r\n [TemplateStyle]\r\n ${elementStyle.elementProps.text}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n `\r\n )\r\n};\r\n\r\n\r\n","import React, { useState } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { deepClone } from '../../../../../helpers/objectHelper';\r\nimport { simpleButtonHandler } from './SimpleButton.handler';\r\nimport { emailActions } from '../../../../../store/actions/cms/email/email.action';\r\nimport { HtmlWrapper } from '../../components/HtmlWrapper';\r\nimport './SimpleButton.css'\r\nimport { toKebabCase } from '../../../../../helpers/cssHelper';\r\nimport TextWrapper from '../../components/TextWrapper';\r\nimport ContentEditable from \"react-contenteditable\";\r\n\r\nclass SimpleButton extends React.Component {\r\n textOnChange = (text) => {\r\n const { element, dispatch } = this.props;\r\n const updatedElement = deepClone(element);\r\n try {\r\n updatedElement.style.elementProps.text = text;\r\n } catch (error) {\r\n console.log('ERR: COULD NOT SET TEXT')\r\n }\r\n updatedElement.content = simpleButtonHandler.elementEditor(updatedElement.style, null);\r\n dispatch(emailActions.updateEmailElement(updatedElement, null, true, this.props.inherit));\r\n }\r\n render() {\r\n const { element } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.textOnChange(e.target.value)}\r\n tagName=\"a\"\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n )\r\n }\r\n\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n selectedElement: state.email.selectedElement,\r\n inherit: state.email.inherit\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(SimpleButton);","\r\n\r\nimport React from 'react';\r\nimport SimpleButton from './SimpleButton';\r\nimport SimpleButtonSettings from './SimpleButton.settings';\r\nimport { templateHelper } from '../../../template/helpers/templateHelper';\r\n\r\nexport const simpleButtonHandler = {\r\n tags,\r\n elementEditor,\r\n defaultStyle,\r\n component,\r\n settingsComponent,\r\n families\r\n}\r\n\r\nfunction component(element) {\r\n return \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n \r\n `\r\n )\r\n};\r\n\r\n","import React, { useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { deepClone } from '../../../../../helpers/objectHelper';\r\nimport { backgroundWithImageHandler } from './BackgroundImageWithText.handler';\r\nimport { emailActions } from '../../../../../store/actions/cms/email/email.action';\r\nimport TextWrapper from '../../components/TextWrapper';\r\n\r\nconst LargeHeaderImage = (props) => {\r\n const [mediaVaultOpen, openMediaVault] = useState(false)\r\n const [isCropping, toggleCropper] = useState(false)\r\n const [editing, toggleText] = useState(false)\r\n const { content, style } = props.element;\r\n const { template, element, selectedElement } = props;\r\n\r\n\r\n const setImage = (source, openCropper = true) => {\r\n const { element, dispatch } = props;\r\n const updatedElement = deepClone(element);\r\n try {\r\n updatedElement.style.elementProps.source = source;\r\n } catch (error) {\r\n console.log('ERR: COULD NOT SET IMAGE')\r\n }\r\n updatedElement.content = backgroundWithImageHandler.elementEditor(updatedElement.style, null);\r\n dispatch(emailActions.updateEmailElement(updatedElement, null, true, props.inherit));\r\n if (openCropper) toggleCropper(true)\r\n }\r\n const textOnChange = (text) => {\r\n const { element, dispatch } = props;\r\n const updatedElement = deepClone(element);\r\n try {\r\n updatedElement.style.elementProps.text = text;\r\n } catch (error) {\r\n console.log('ERR: COULD NOT SET TEXT')\r\n }\r\n updatedElement.content = backgroundWithImageHandler.elementEditor(updatedElement.style, null);\r\n dispatch(emailActions.updateEmailElement(updatedElement, null, true, props.inherit));\r\n }\r\n const onCrop = (value) => {\r\n setImage(value, false);\r\n toggleCropper(false)\r\n }\r\n const toggleMediaVault = (show) => {\r\n openMediaVault(show)\r\n }\r\n const toggleTextEdit = (show) => {\r\n toggleText(show)\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {element.style.elementProps.text}
*/}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n )\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n template: state.template.template,\r\n inherit: state.email.inherit,\r\n selectedElement: state.email.selectedElement\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(LargeHeaderImage);","import React from 'react';\r\nimport BackgroundImageWithText from './BackgroundImageWithText';\r\nimport { templateHelper } from '../../../template/helpers/templateHelper';\r\n\r\nexport const backgroundWithImageHandler = {\r\n tags,\r\n elementEditor,\r\n defaultStyle,\r\n component,\r\n families\r\n}\r\n\r\nfunction component(element) {\r\n return Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.
'\r\n },\r\n styleProps: {\r\n width: '100%',\r\n maxWidth: '680px',\r\n },\r\n textStyle: {\r\n padding: '20px',\r\n fontFamily: 'sans-serif',\r\n fontSize: templateTextStyle && !defaultStyle ? templateTextStyle.fontSize : '15px',\r\n lineHeight: 'normal',\r\n color: templateTextStyle && !defaultStyle ? templateTextStyle.color : '#555555',\r\n },\r\n className: 'g-img',\r\n inheritedStyles: inheritedStyles\r\n }\r\n}\r\nfunction elementEditor(elementStyle, templateStyle = null, defaultStyle = true) {\r\n //Take what is relevant from the template\r\n const templateTextStyle = templateStyle ? templateStyle.text : null;\r\n return (\r\n `\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n ${elementStyle.elementProps.text}
\r\n \r\n \r\n
\r\n \r\n
\r\n `\r\n )\r\n};\r\n\r\n\r\n","import { authHeader } from \"../../../helpers/authHeader\";\r\nimport { handleResponse } from \"../../../helpers/handleresponse\";\r\n\r\nexport const emailService = {\r\n update,\r\n get,\r\n sendTest,\r\n getAll\r\n}\r\n\r\nasync function getAll(eventId) {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" })\r\n\r\n };\r\n return fetch(`./api/com/getall/` + eventId, requestOptions)\r\n .then(handleResponse)\r\n .then(communications => {\r\n return communications;\r\n });\r\n}\r\n\r\nasync function get(communicationId) {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" })\r\n\r\n };\r\n return fetch(`./api/com/` + communicationId, requestOptions)\r\n .then(handleResponse)\r\n .then(communication => {\r\n return communication;\r\n });\r\n}\r\nasync function update(communication) {\r\n const { comContentId, eventId, type, name, subject, body, bodyJson, templateId, previewText, fromName, fromAddr, previewImage, rawBody, inherit, updatedUserId, updated, inserted, bcc, useLinktrack } = communication;\r\n const newMail = {\r\n comContentId, eventId, type, name,\r\n subject, body, bodyJson, templateId, previewText, fromName, fromAddr, rawBody,\r\n previewImage, inherit, updatedUserId, updated, inserted, bcc, useLinktrack\r\n }\r\n const requestOptions = {\r\n method: \"PUT\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n body: JSON.stringify(newMail)\r\n };\r\n\r\n return fetch(`./api/com`+window.location.search, requestOptions)\r\n .then(handleResponse)\r\n .then(communication => {\r\n return communication;\r\n });\r\n}\r\n\r\nasync function sendTest(email) {\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n body: JSON.stringify(email)\r\n };\r\n\r\n return fetch(`./api/com/sendTest`, requestOptions)\r\n .then(handleResponse);\r\n}\r\n\r\n\r\n","\r\nimport { alertActions } from \"../../alert.action\";\r\nimport { emailConstants } from \"../../../../constants/email/email.constants\";\r\nimport { communicationService } from \"../../../../services/communication/communication.service\";\r\nimport { deepClone } from \"../../../../helpers/objectHelper\";\r\nimport { emailWrapperHtml } from \"../../../../cms/areas/email/containers/EmailEditor/Wrappers/EmailWrapperHtml\";\r\nimport { store } from \"../../../configureStore\";\r\nimport { emailHelper } from \"../../../../cms/areas/email/helper/email.helper\";\r\nimport { emailService } from \"../../../../services/cms/email/email.service\";\r\nimport { cmsActions } from \"../cms.action\";\r\nimport { history } from \"../../../../helpers/history\";\r\nimport { toKebabCase } from \"../../../../helpers/cssHelper\";\r\nimport { emailElementType } from \"../../../../cms/areas/email/constants/emailElementType.constants\";\r\n\r\n\r\nexport const emailActions = {\r\n updateEmailElement,\r\n update,\r\n get,\r\n deselect,\r\n select,\r\n softUpdate,\r\n remove,\r\n sendTest,\r\n getByEvent\r\n};\r\n\r\n\r\n/* function restore() {\r\n return dispatch => {\r\n dispatch(success());\r\n };\r\n function success() {\r\n return { type: pageConstants.RESTORE_PAGE };\r\n }\r\n} */\r\nfunction remove(element) {\r\n return dispatch => {\r\n dispatch(success(element));\r\n };\r\n function success() {\r\n return { type: emailConstants.REMOVE_EMAIL_ELEMENT, element };\r\n }\r\n}\r\nfunction deselect() {\r\n return dispatch => {\r\n dispatch(success());\r\n };\r\n function success() {\r\n return { type: emailConstants.DESELECT_EMAIL_ELEMENT };\r\n }\r\n}\r\nfunction select(element) {\r\n return dispatch => {\r\n dispatch(success(element));\r\n };\r\n function success(element) {\r\n return { type: emailConstants.SELECT_EMAIL_ELEMENT, element };\r\n }\r\n}\r\nfunction softUpdate(email) {\r\n const cms = store.getState().cms;\r\n return dispatch => {\r\n if (email.inherit === true && email.eventId != cms.eventId) {\r\n dispatch(cmsActions.inheritageAffected(true));\r\n }\r\n dispatch(success(email));\r\n };\r\n function success(email) {\r\n return { type: emailConstants.SOFT_UPDATE_EMAIL, email };\r\n }\r\n}\r\n\r\nfunction updateEmailElement(element, id, isSavable = true, inherit = null) {\r\n const cms = store.getState().cms;\r\n const email = store.getState().email;\r\n return dispatch => {\r\n if (inherit === true && email.eventId != cms.eventId) {\r\n dispatch(cmsActions.inheritageAffected(true));\r\n }\r\n dispatch(success(element, id, isSavable));\r\n };\r\n function success(element) {\r\n return { type: emailConstants.UPDATE_EMAIL_ELEMENT, element, id, isSavable };\r\n }\r\n}\r\nfunction update(oldEmail) {\r\n return dispatch => {\r\n dispatch(request());\r\n const newEmail = deepClone(oldEmail);\r\n const template = store.getState().template;\r\n let rawBody = '';\r\n const adjustedElements = newEmail.elements.map(e => {\r\n if (e.style.elementProps && e.style.elementProps.editor) {\r\n e.style.elementProps.editor = null;\r\n\r\n }\r\n if (e.type == 'TEXT') {\r\n const { text, subtitle, title, tcell, table, thead, a } = template.template.content;\r\n const textStyle = { text, subtitle, title, tcell, table, thead, a };\r\n\r\n e.content = e.content.replace('[TemplateStyle]', `\r\n \r\n `);\r\n rawBody += '\\n';\r\n rawBody += e.style.elementProps.text;\r\n }\r\n if (e.type == emailElementType.BUTTON) {\r\n rawBody += '\\n';\r\n rawBody += e.style.elementProps.link;\r\n }\r\n\r\n return e;\r\n })\r\n newEmail.elements = adjustedElements;\r\n newEmail.rawBody = rawBody;\r\n newEmail.body = emailWrapperHtml(emailHelper.sortElements(newEmail.elements), newEmail.previewText, template.template ? template.template.content : null)\r\n newEmail.bodyJson = JSON.stringify(newEmail.elements);\r\n\r\n emailService.update(newEmail).then(\r\n email => {\r\n email.elements = email.bodyJson ? emailHelper.sortElements(JSON.parse(email.bodyJson), true) : [];\r\n if (newEmail.comContentId != email.comContentId) {\r\n history.push('/cms/email/' + email.comContentId+window.location.search);\r\n }\r\n dispatch(success(email));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: emailConstants.UPDATE_EMAIL_REQUEST };\r\n }\r\n function success(email) {\r\n return { type: emailConstants.UPDATE_EMAIL_SUCCESS, email };\r\n }\r\n function failure(error) {\r\n return { type: emailConstants.UPDATE_EMAIL_FAILURE, error };\r\n }\r\n}\r\nfunction getByEvent(eventId) {\r\n return dispatch => {\r\n dispatch(request());\r\n dispatch(alertActions.clear());\r\n emailService.getAll(eventId).then(\r\n emails => {\r\n dispatch(success(emails));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: emailConstants.GETALL_EMAIL_REQUEST };\r\n }\r\n function success(emails) {\r\n return { type: emailConstants.GETALL_EMAIL_SUCCESS, emails };\r\n }\r\n function failure(error) {\r\n return { type: emailConstants.GETALL_EMAIL_FAILURE, error };\r\n }\r\n}\r\nfunction get(communicationId) {\r\n return dispatch => {\r\n dispatch(request());\r\n dispatch(alertActions.clear());\r\n emailService.get(communicationId).then(\r\n email => {\r\n dispatch(success(email));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: emailConstants.GET_EMAIL_REQUEST };\r\n }\r\n function success(email) {\r\n return { type: emailConstants.GET_EMAIL_SUCCESS, email };\r\n }\r\n function failure(error) {\r\n return { type: emailConstants.GET_EMAIL_FAILURE, error };\r\n }\r\n}\r\nfunction sendTest(mail) {\r\n return dispatch => {\r\n dispatch(request());\r\n dispatch(alertActions.clear());\r\n emailService.sendTest(mail).then(\r\n email => {\r\n dispatch(success());\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: emailConstants.SEND_TEST_REQUEST };\r\n }\r\n function success(email) {\r\n return { type: emailConstants.SEND_TEST_SUCCESS };\r\n }\r\n function failure(error) {\r\n return { type: emailConstants.SEND_TEST_FAILURE, error };\r\n }\r\n}\r\n\r\n","import { cerberusHead } from \"../../../models/cerberus/cerberusHead\";\r\nimport { element } from \"prop-types\";\r\nimport { templateHelper } from \"../../../../template/helpers/templateHelper\";\r\nimport validateColor from \"validate-color\";\r\n\r\n{\r\n /* 96 */\r\n}\r\n\r\nexport const emailWrapperHtml = (elements, previewText, template = null) => {\r\n return `\r\n \r\n \r\n \r\n \r\n \r\n ${\r\n previewText\r\n ? `\r\n \r\n \r\n ${previewText}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n `\r\n : \"\"\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n\t ${elements\r\n .map((e) => {\r\n return `${e.startTag} ${e.content} ${e.endTag}`;\r\n })\r\n .join(\"\")}\r\n\t
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n */\r\n","import { createBrowserHistory } from \"history\";\r\n\r\nexport const history = createBrowserHistory({\r\n basename: process?.env?.PUBLIC_URL ?? \"\",\r\n});\r\n","import { alertConstants } from \"../../constants/alert.constants\";\r\n\r\nconst defaultState = {\r\n show: false,\r\n title: '',\r\n type: '',\r\n message: ''\r\n}\r\n\r\nexport function alert(state = defaultState, action) {\r\n switch (action.type) {\r\n case alertConstants.SUCCESS:\r\n return {\r\n type: alertConstants.SUCCESS,\r\n title: action.title,\r\n message: action.message,\r\n show: true\r\n };\r\n case alertConstants.INFO:\r\n return {\r\n type: alertConstants.INFO,\r\n title: action.title,\r\n message: action.message,\r\n show: true\r\n };\r\n case alertConstants.ERROR:\r\n return {\r\n type: alertConstants.ERROR,\r\n title: action.title,\r\n message: action.message,\r\n show: true\r\n };\r\n case alertConstants.WARNING:\r\n return {\r\n type: alertConstants.WARNING,\r\n title: action.title,\r\n message: action.message,\r\n show: true\r\n };\r\n case alertConstants.CLEAR:\r\n return defaultState\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { userConstants } from \"../../constants/user.constants\";\r\nimport { lssetItem, lsgetItem } from \"../../helpers/localStorageHelper\";\r\n\r\nlet user = lsgetItem('user');/* JSON.parse(localStorage.getItem(\"user\")); */\r\nconst initialState = user ? { loggedIn: true, user } : {};\r\n\r\nexport function authentication(state = initialState, action) {\r\n switch (action.type) {\r\n case userConstants.LOGIN_REQUEST:\r\n return {\r\n loggingIn: true,\r\n user: action.user\r\n };\r\n case userConstants.LOGIN_SUCCESS:\r\n return {\r\n loggedIn: true,\r\n user: action.user\r\n };\r\n case userConstants.LOGIN_FAILURE:\r\n return {\r\n error: action.error\r\n };\r\n case userConstants.LOGOUT:\r\n return {};\r\n case userConstants.RESETPASSWORD_REQUEST:\r\n return { ...state };\r\n case userConstants.RESETPASSWORD_SUCCESS:\r\n return { ...state };\r\n case userConstants.RESETPASSWORD_FAILURE:\r\n return { ...state, user: action.user };\r\n case userConstants.SENDRESETPASSWORDTOKEN_REQUEST:\r\n return { ...state };\r\n case userConstants.SENDRESETPASSWORDTOKEN_SUCCESS:\r\n return { ...state };\r\n case userConstants.SENDRESETPASSWORDTOKEN_FAILURE:\r\n return { ...state, error: action.error };\r\n case userConstants.TOGGLE_ADMIN_SUCCESS:\r\n return { ...state, loggedIn: true, user: action.user };\r\n case userConstants.UPDATE_SUCCESS:\r\n let user = lsgetItem(\"user\");\r\n\r\n let newUser = Object.assign({}, user, action.userToken);\r\n newUser.oid = user.oid;\r\n lssetItem(newUser, 'user');\r\n /* localStorage.setItem(\"user\", JSON.stringify(newUser)); */\r\n return { ...state, user: newUser };\r\n\r\n case userConstants.SET_DEFAULT_EVENT_SUCCESS:\r\n return { ...state, user: lsgetItem('user') };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { templateConstants } from \"../../../../constants/cms/template/template.constants\";\r\nimport { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\nimport { arrayHelper } from \"../../../../helpers/arrayHelper\";\r\nimport { deepClone } from \"../../../../helpers/objectHelper\";\r\nimport { templateHelper } from \"../../../../cms/areas/template/helpers/templateHelper\";\r\n\r\nconst initialState = {\r\n selectedElement: null,\r\n selectedContainer: null,\r\n isSavable: false,\r\n history: [],\r\n currentVersion: {},\r\n isMenuModalOpen: false,\r\n /* template: undefined, */\r\n templates: [],\r\n usedColors: [],\r\n previewDevice: templateConstants.DESKTOP,\r\n};\r\n\r\nexport function template(state = initialState, action) {\r\n switch (action.type) {\r\n case templateConstants.UNDO_CHANGE:\r\n /* const indexOfCurV = state.history.find((v, i) => {\r\n return v.timeStamp === state.currentVersion.timeStamp\r\n })\r\n const indexOfPrevV = state.history.indexOf(indexOfCurV, - 1) */\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n case templateConstants.REDO_CHANGE:\r\n return {\r\n ...state,\r\n templates: [...state.templates, action.template],\r\n loading: false,\r\n };\r\n case templateConstants.TOGGLE_PREVIEW_MODE:\r\n return {\r\n ...state,\r\n previewDevice: action.device,\r\n };\r\n case templateConstants.CREATE_TEMPLATE_REQUEST:\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n case templateConstants.CREATE_TEMPLATE_SUCCESS:\r\n return {\r\n ...state,\r\n templates: [...state.templates, action.template],\r\n loading: false,\r\n };\r\n case templateConstants.CREATE_TEMPLATE_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error,\r\n };\r\n\r\n case templateConstants.GET_DEFAULT_TEMPLATE_BY_EVENT_REQUEST:\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n case templateConstants.GET_DEFAULT_TEMPLATE_BY_EVENT_SUCCESS:\r\n return {\r\n ...state,\r\n template: action.template,\r\n currentVersion: { ...action.template, timeStamp: Date.now() },\r\n loading: false,\r\n };\r\n case templateConstants.GET_DEFAULT_TEMPLATE_BY_EVENT_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error,\r\n };\r\n case templateConstants.GET_TEMPLATE_REQUEST:\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n case templateConstants.SET_MENU:\r\n return {\r\n ...state,\r\n menu: action.menu,\r\n };\r\n case templateConstants.GET_TEMPLATE_SUCCESS:\r\n const template = deepClone(action.template);\r\n template.content.header.content.map((h) => {\r\n h.parentName = \"HEADER\";\r\n });\r\n template.content.footer.content.map((h) => {\r\n h.parentName = \"FOOTER\";\r\n });\r\n const usedColors = templateHelper.getTemplatesColors(template);\r\n return {\r\n ...state,\r\n menu: action.menu,\r\n template: template,\r\n newStyle: action.template.css,\r\n usedColors,\r\n /* currentVersion: action.template, */\r\n loading: false,\r\n };\r\n case templateConstants.TOGGLE_MENU_MODAL:\r\n return {\r\n ...state,\r\n isMenuModalOpen: !state.isMenuModalOpen,\r\n };\r\n case templateConstants.GET_TEMPLATE_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error,\r\n };\r\n case templateConstants.GET_TEMPLATE_BY_EVENT_REQUEST:\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n case templateConstants.GET_TEMPLATE_BY_EVENT_SUCCESS:\r\n return {\r\n ...state,\r\n templates: action.templates,\r\n currentVersion: { ...action.template, timeStamp: Date.now() },\r\n loading: false,\r\n };\r\n case templateConstants.GET_TEMPLATE_BY_EVENT_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error,\r\n };\r\n case templateConstants.DELETE_TEMPLATE_ELEMENT_SUCCESS:\r\n const updatedTemplate = deepClone(state.template);\r\n let source = null;\r\n let container = null;\r\n let elementToRemove = null;\r\n\r\n if (action.source === undefined || !action.source) {\r\n if (\r\n state.template.content.header.content.find((el) => {\r\n return el.contentId === action.element.contentId;\r\n })\r\n ) {\r\n container = \"HEADER\";\r\n elementToRemove = state.template.content.header.content.find((el) => {\r\n return el.contentId === action.element.contentId;\r\n });\r\n source = [\r\n ...state.template.content.header.content.sort((a, b) => {\r\n let x = a.sortOrder;\r\n let y = b.sortOrder;\r\n return y < x ? 1 : y > x ? -1 : 0;\r\n }),\r\n ];\r\n }\r\n if (\r\n state.template.content.footer.content.find((el) => {\r\n return el.contentId === action.element.contentId;\r\n })\r\n ) {\r\n container = \"FOOTER\";\r\n elementToRemove = state.template.content.footer.content.find((el) => {\r\n return el.contentId === action.element.contentId;\r\n });\r\n source = [\r\n ...state.template.content.footer.content.sort((a, b) => {\r\n let x = a.sortOrder;\r\n let y = b.sortOrder;\r\n return y < x ? 1 : y > x ? -1 : 0;\r\n }),\r\n ];\r\n }\r\n }\r\n if (action.source === \"HEADER\") {\r\n container = \"HEADER\";\r\n elementToRemove = action.element;\r\n source = [\r\n ...state.template.content.header.content.sort((a, b) => {\r\n let x = a.sortOrder;\r\n let y = b.sortOrder;\r\n return y < x ? 1 : y > x ? -1 : 0;\r\n }),\r\n ];\r\n }\r\n if (action.source === \"FOOTER\") {\r\n container = \"FOOTER\";\r\n elementToRemove = action.element;\r\n source = [\r\n ...state.template.content.footer.content.sort((a, b) => {\r\n let x = a.sortOrder;\r\n let y = b.sortOrder;\r\n return y < x ? 1 : y > x ? -1 : 0;\r\n }),\r\n ];\r\n }\r\n\r\n var indexOfRemovedEl = source.indexOf(elementToRemove);\r\n if (indexOfRemovedEl > -1) {\r\n source.splice(indexOfRemovedEl, 1);\r\n for (let index = indexOfRemovedEl; index < source.length; index++) {\r\n source[index].sortOrder = index + 1;\r\n }\r\n }\r\n\r\n if (action.element.type === elementConstants.CONTAINER) {\r\n const containerChildren = [\r\n ...source.filter((el, index) => {\r\n return el.parentId === action.element.id;\r\n }),\r\n ];\r\n const containerChildrenChildren = [\r\n ...source.filter((el, index) => {\r\n if (containerChildren.find((cel) => cel.id === el.parentId))\r\n return el;\r\n }),\r\n ];\r\n containerChildren.map((el, index) => {\r\n let elToRemove = source.find((sc, i) => {\r\n return sc.contentId === el.contentId;\r\n });\r\n source.splice(source.indexOf(elToRemove), 1);\r\n });\r\n containerChildrenChildren.map((el, index) => {\r\n let elToRemove = source.find((sc, i) => {\r\n return sc.contentId === el.contentId;\r\n });\r\n source.splice(source.indexOf(elToRemove), 1);\r\n });\r\n }\r\n if (container === \"HEADER\") {\r\n updatedTemplate.content.header.content = source;\r\n return {\r\n ...state,\r\n template: updatedTemplate,\r\n selectedElement: null,\r\n isSavable: true,\r\n };\r\n }\r\n if (container === \"FOOTER\") {\r\n updatedTemplate.content.footer.content = source;\r\n return {\r\n ...state,\r\n template: updatedTemplate,\r\n selectedElement: null,\r\n isSavable: true,\r\n };\r\n }\r\n case templateConstants.DESELECT_SUCCESS:\r\n return {\r\n ...state,\r\n selectedElement: null,\r\n selectedContainer: null,\r\n };\r\n case templateConstants.SELECT_TEMPLATE_ELEMENT:\r\n source = action.element.parentName === \"HEADER\" ? \"header\" : \"footer\";\r\n if (\r\n action.element.type === elementConstants.CONTAINER &&\r\n action.element.parentId === null\r\n ) {\r\n const containerId = action.element.id;\r\n const containerChildId = state.template.content[source].content\r\n .filter((el) => {\r\n return el.parentId === containerId;\r\n })\r\n .map((el) => {\r\n return el.id;\r\n });\r\n const hasChildren = state.template.content[source].content.filter(\r\n (el) => {\r\n return containerChildId.includes(el.parentId);\r\n }\r\n );\r\n if (hasChildren.length > 0) {\r\n return {\r\n ...state,\r\n selectedContainer: action.element,\r\n };\r\n }\r\n }\r\n\r\n if (\r\n state.template.content[source].content.find((el) => {\r\n return el.contentId === action.element.contentId;\r\n }) &&\r\n action.element.type === elementConstants.CONTAINER &&\r\n action.element.parentId === null\r\n ) {\r\n return {\r\n ...state,\r\n selectedContainer: action.element,\r\n selectedElement: null,\r\n };\r\n }\r\n const parentChild = state.template.content[source].content.find((el) => {\r\n return el.id === action.element.parentId;\r\n });\r\n\r\n if (parentChild && state.selectedContainer) {\r\n if (parentChild.parentId === state.selectedContainer.id) {\r\n return {\r\n ...state,\r\n selectedElement: action.element,\r\n };\r\n }\r\n } else {\r\n return {\r\n ...state,\r\n selectedElement: action.element,\r\n selectedContainer:\r\n state.selectedContainer &&\r\n action.element.parentId !== state.selectedContainer.Id\r\n ? null\r\n : state.selectedContainer,\r\n };\r\n }\r\n\r\n if (\r\n action.element.type === elementConstants.CONTAINER &&\r\n action.element.parentId === null\r\n ) {\r\n return {\r\n ...state,\r\n selectedContainer: action.element,\r\n /* selectedElement: state.selectedElement && action.element.parentId !== state.selectedContainer.Id ? null : state.selectedContainer */\r\n };\r\n }\r\n return {\r\n ...state,\r\n selectedElement: action.element,\r\n selectedContainer:\r\n state.selectedContainer &&\r\n action.element.parentId !== state.selectedContainer.Id\r\n ? null\r\n : state.selectedContainer,\r\n };\r\n case templateConstants.SOFT_UPDATE_TEMPLATE:\r\n let newSelectedContainer = null;\r\n if (state.selectedContainer) {\r\n let source =\r\n state.selectedContainer.parentName === \"HEADER\" ? \"header\" : \"footer\";\r\n newSelectedContainer = deepClone(\r\n action.template.content[source].content.find((c) => {\r\n return c.contentId === state.selectedContainer.contentId;\r\n })\r\n );\r\n }\r\n let newSelectedElement = null;\r\n if (state.selectedElement) {\r\n let source =\r\n state.selectedElement.parentName === \"HEADER\" ? \"header\" : \"footer\";\r\n newSelectedElement = deepClone(\r\n action.template.content[source].content.find((c) => {\r\n return c.contentId === state.selectedElement.contentId;\r\n })\r\n );\r\n }\r\n return {\r\n ...state,\r\n template: action.template,\r\n history: [\r\n ...state.history,\r\n { ...action.template, timeStamp: Date.now() },\r\n ],\r\n isSavable: true,\r\n selectedElement: newSelectedElement,\r\n selectedContainer: newSelectedContainer,\r\n loading: true,\r\n };\r\n case templateConstants.SET_TEMPLATE_FROM_FORM_REQUEST:\r\n return {\r\n ...state,\r\n setting: true,\r\n template: action.template,\r\n };\r\n case templateConstants.SET_TEMPLATE_FROM_FORM:\r\n return {\r\n ...state,\r\n setting: false,\r\n template: action.template,\r\n };\r\n case templateConstants.UPDATE_TEMPLATE_REQUEST:\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n case templateConstants.UPDATE_TEMPLATE_SUCCESS:\r\n return {\r\n ...state,\r\n template: action.template,\r\n newStyle: action.template.css,\r\n updated: action.template.updated,\r\n isSavable: false,\r\n };\r\n case templateConstants.UPDATE_TEMPLATE_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error,\r\n };\r\n default:\r\n return state;\r\n }\r\n}\r\n","export const organizationConstants = {\r\n UPDATE_ORGANIZATION_REQUEST: 'UPDATE_ORGANIZATION_REQUEST',\r\n UPDATE_ORGANIZATION_SUCCESS: 'UPDATE_ORGANIZATION_SUCCESS',\r\n UPDATE_ORGANIZATION_FAILURE: 'UPDATE_ORGANIZATION_FAILURE',\r\n\r\n GET_ORGANIZATION_BY_USER_FAILURE: 'GET_ORGANIZATION_BY_USER_FAILURE',\r\n GET_ORGANIZATION_BY_USER_REQUEST: 'GET_ORGANIZATION_BY_USER_REQUEST',\r\n GET_ORGANIZATION_BY_USER_SUCCESS: 'GET_ORGANIZATION_BY_USER_SUCCESS',\r\n\r\n GET_ORGANIZATION_DETAILS_REQUEST:'GET_ORGANIZATION_DETAILS_REQUEST',\r\n\r\n GET_ORGANIZATION_DETAILS_SUCCESS:'GET_ORGANIZATION_DETAILS_SUCCESS',\r\n GET_ORGANIZATION_USERS_SUCCESS:'GET_ORGANIZATION_USERS_SUCCESS',\r\n GET_ORGANIZATION_SUBS_SUCCESS:'GET_ORGANIZATION_SUBS_SUCCESS',\r\n GET_ORGANIZATION_SETTINGS_SUCCESS:'GET_ORGANIZATION_SETTINGS_SUCCESS',\r\n\r\n UPDATE_ORGANIZATION_DETAILS_SUCCESS:'UPDATE_ORGANIZATION_DETAILS_SUCCESS',\r\n UPDATE_ORGANIZATION_USERS_SUCCESS:'UPDATE_ORGANIZATION_USERS_SUCCESS',\r\n UPDATE_ORGANIZATION_SUBS_SUCCESS:'UPDATE_ORGANIZATION_SUBS_SUCCESS',\r\n UPDATE_ORGANIZATION_SETTINGS_SUCCESS:'UPDATE_ORGANIZATION_SETTINGS_SUCCESS',\r\n\r\n GET_ORGANIZATION_DETAILS_FAILURE:'GET_ORGANIZATION_DETAILS_FAILURE',\r\n\r\n}\r\n","export const roleConstants = {\r\n GET_ALL_BY_ORGANIZATION_REQUEST: 'GET_ALL_BY_ORGANIZATION_REQUEST',\r\n GET_ALL_BY_ORGANIZATION_SUCCESS: 'GET_ALL_BY_ORGANIZATION_SUCCESS',\r\n GET_ALL_BY_ORGANIZATION_FAILURE: 'GET_ALL_BY_ORGANIZATION_FAILURE',\r\n\r\n UPDATE_ROLE_REQUEST: 'UPDATE_ROLE_REQUEST',\r\n UPDATE_ROLE_SUCCESS: 'UPDATE_ROLE_SUCCESS',\r\n UPDATE_ROLE_FAILURE: 'UPDATE_ROLE_FAILURE',\r\n\r\n UPDATE_ROLES_REQUEST: 'UPDATE_ROLES_REQUEST',\r\n UPDATE_ROLES_SUCCESS: 'UPDATE_ROLES_SUCCESS',\r\n UPDATE_ROLES_FAILURE: 'UPDATE_ROLES_FAILURE',\r\n\r\n CREATE_ROLE_REQUEST: 'CREATE_ROLE_REQUEST',\r\n CREATE_ROLE_SUCCESS: 'CREATE_ROLE_SUCCESS',\r\n CREATE_ROLE_FAILURE: 'CREATE_ROLE_FAILURE',\r\n\r\n DELETE_ROLE_REQUEST: 'DELETE_ROLE_REQUEST',\r\n DELETE_ROLE_SUCCESS: 'DELETE_ROLE_SUCCESS',\r\n DELETE_ROLE_FAILURE: 'DELETE_ROLE_FAILURE',\r\n};\r\n","import { securityHelper } from \"../../../../helpers/securityHelper\";\r\nimport { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\nimport { checkForUpdatesOneLevel, deepClone, checkForFormUpdates } from \"../../../../helpers/objectHelper\";\r\nimport { elementOrgin } from \"../../../../cms/helpers/elementHelper\";\r\nimport { pageConstants } from \"../../../../constants/cms/page/page.constants\";\r\nimport { arrayHelper } from \"../../../../helpers/arrayHelper\";\r\nimport { Array } from \"core-js\";\r\n\r\nconst defaultPage = {\r\n pageId: 0,\r\n eventId: 0,\r\n isSavable: false,\r\n name: \"Default page\",\r\n pages: 1,\r\n pageElements: [],\r\n selectedElement: null,\r\n currentPage: 1,\r\n selectedContainer: null,\r\n eventName: \"Jirango\",\r\n paths: [],\r\n};\r\n\r\nexport function page(state = defaultPage, action) {\r\n switch (action.type) {\r\n case pageConstants.PAGE_ATTACH:\r\n var pageElements = Array.from(state.pageElements);\r\n var pageElement = Object.assign({}, state.element);\r\n const sortNo = arrayHelper.getMaxValue(pageElements, \"sortOrder\");\r\n\r\n pageElement.sortOrder = sortNo;\r\n pageElement.page = state.currentPage;\r\n pageElement.data = JSON.parse(pageElement.data);\r\n pageElement.contentId = securityHelper.createGuid();\r\n\r\n pageElements.push(pageElement);\r\n\r\n return {\r\n ...state,\r\n pageElements,\r\n isSavable: true,\r\n };\r\n\r\n case pageConstants.RESTORE_PAGE:\r\n return {\r\n ...state,\r\n pageElements: [],\r\n selectedContainer: null,\r\n selectedElement: null,\r\n isSavable: true,\r\n };\r\n\r\n case pageConstants.DELETE_PAGE_ELEMENT:\r\n var pageElements = arrayHelper.sortByParam(state.pageElements, \"sortOrder\");\r\n var indexOfRemovedEl = pageElements.indexOf(action.element);\r\n\r\n if (indexOfRemovedEl > -1) {\r\n pageElements.splice(indexOfRemovedEl, 1);\r\n for (let index = indexOfRemovedEl; index < pageElements.length; index++) {\r\n pageElements[index].sortOrder = pageElements[index].sortOrder - 1;\r\n }\r\n }\r\n\r\n if (action.element.type === elementConstants.CONTAINER) {\r\n const containerChildren = [\r\n ...pageElements.filter((el, index) => {\r\n return el.parentId === action.element.id;\r\n }),\r\n ];\r\n const containerChildrenChildren = [\r\n ...pageElements.filter((el, index) => {\r\n if (containerChildren.find((cel) => cel.id === el.parentId)) return el;\r\n }),\r\n ];\r\n containerChildren.map((el, index) => {\r\n let elToRemove = pageElements.find((sc, i) => {\r\n if (sc.contentId === el.contentId) {\r\n return Object.assign({}, el);\r\n }\r\n });\r\n pageElements.splice(pageElements.indexOf(elToRemove), 1);\r\n });\r\n containerChildrenChildren.map((el, index) => {\r\n let elToRemove = pageElements.find((sc, i) => {\r\n if (sc.contentId === el.contentId) {\r\n return Object.assign({}, el);\r\n }\r\n });\r\n pageElements.splice(pageElements.indexOf(elToRemove), 1);\r\n });\r\n }\r\n\r\n return {\r\n ...state,\r\n pageElements,\r\n isSavable: true,\r\n selectedElement: null,\r\n };\r\n\r\n case pageConstants.DESELECT_PAGE_ELEMENT:\r\n return {\r\n ...state,\r\n selectedElement: null,\r\n selectedContainer: null,\r\n };\r\n\r\n case pageConstants.PAGE_SELECT:\r\n /* if (\r\n action.element.type === elementConstants.CONTAINER &&\r\n action.element.parentId === null\r\n ) {\r\n const containerId = action.element.id;\r\n const containerChildId = state.pageElements\r\n .filter(el => {\r\n return el.parentId === containerId;\r\n })\r\n .map(el => {\r\n return el.id;\r\n });\r\n const hasChildren = state.pageElements.filter(el => {\r\n return containerChildId.includes(el.parentId);\r\n });\r\n if (hasChildren.length > 0) {\r\n return {\r\n ...state,\r\n selectedContainer: action.element,\r\n \r\n };\r\n }\r\n }\r\n \r\n if (\r\n state.pageElements.find(el => {\r\n return el.contentId === action.element.contentId;\r\n }) &&\r\n action.element.type === elementConstants.CONTAINER &&\r\n action.element.parentId === null\r\n ) {\r\n return {\r\n ...state,\r\n selectedContainer: action.element,\r\n selectedElement: null\r\n };\r\n }\r\n const parentChild = state.pageElements.find(el => {\r\n return el.id === action.element.parentId;\r\n });\r\n \r\n if (parentChild && state.selectedContainer) {\r\n if (parentChild.parentId === state.selectedContainer.id) {\r\n return {\r\n ...state,\r\n selectedElement: action.element\r\n };\r\n }\r\n } else {\r\n return {\r\n ...state,\r\n selectedElement: action.element,\r\n selectedContainer:\r\n state.selectedContainer &&\r\n action.element.parentId !== state.selectedContainer.Id\r\n ? null\r\n : state.selectedContainer\r\n };\r\n } */\r\n var pageElements = Array.from(state.pageElements);\r\n\r\n if (action.element.type === elementConstants.CONTAINER && action.element.parentId === null) {\r\n const containerId = action.element.id;\r\n\r\n const containerChildId = pageElements\r\n .filter((el) => {\r\n return el.parentId === containerId;\r\n })\r\n .map((el) => {\r\n return el.id;\r\n });\r\n const hasChildren = pageElements.filter((el) => {\r\n return containerChildId.includes(el.parentId);\r\n });\r\n\r\n if (hasChildren.length > 0) {\r\n return {\r\n ...state,\r\n selectedContainer: action.element,\r\n };\r\n }\r\n }\r\n\r\n if (action.element.parentId === null && arrayHelper.findByParam(pageElements, \"contentId\", action.element.contentId) && action.element.type === elementConstants.CONTAINER) {\r\n const selectedContainer = Object.assign({}, action.element);\r\n return {\r\n ...state,\r\n selectedContainer,\r\n };\r\n }\r\n\r\n const parentChild = arrayHelper.findByParam(pageElements, \"id\", action.element.parentId);\r\n\r\n if (parentChild && state.selectedContainer) {\r\n if (parentChild.parentId === state.selectedContainer.id) {\r\n const selectedElement = Object.assign({}, action.element);\r\n return {\r\n ...state,\r\n selectedElement,\r\n };\r\n }\r\n } else {\r\n return {\r\n ...state,\r\n selectedElement: action.element,\r\n selectedContainer: state.selectedContainer && action.element.parentId !== state.selectedContainer.Id ? null : state.selectedContainer,\r\n };\r\n }\r\n\r\n case pageConstants.UPDATE_PAGE_REQUEST:\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n\r\n case pageConstants.UPDATE_PAGE_ELEMENT:\r\n let newPageElements = Array.from(state.pageElements);\r\n let newSelectedElement = state.selectedElement;\r\n let newSelectedContainer = state.selectedContainer;\r\n if (newSelectedElement !== null) {\r\n if (Array.isArray(action.element)) {\r\n action.element.map((ae) => {\r\n newPageElements = newPageElements.map((el) => {\r\n if (el.contentId == ae.contentId) {\r\n let newEl = deepClone(ae);\r\n if (state && state.selectedElement && state.selectedElement.contentId === el.contentId) {\r\n newSelectedElement = newEl;\r\n }\r\n return newEl;\r\n } else return el;\r\n });\r\n });\r\n } else {\r\n newPageElements = newPageElements.map((el) => {\r\n if (el.contentId == action.element.contentId) {\r\n let newEl = deepClone(action.element);\r\n if (state && state.selectedElement && state.selectedElement.contentId === el.contentId) {\r\n newSelectedElement = newEl;\r\n }\r\n return newEl;\r\n } else return el;\r\n });\r\n }\r\n }\r\n if (newSelectedContainer !== null) {\r\n if (Array.isArray(action.element)) {\r\n action.element.map((ae) => {\r\n newPageElements = newPageElements.map((el) => {\r\n if (el.contentId == ae.contentId) {\r\n let newEl = deepClone(ae);\r\n if (state && state.selectedContainer && state.selectedContainer.contentId === el.contentId) {\r\n newSelectedContainer = newEl;\r\n }\r\n return newEl;\r\n } else return el;\r\n });\r\n });\r\n } else {\r\n newPageElements = newPageElements.map((el) => {\r\n if (el.contentId == action.element.contentId) {\r\n let newEl = deepClone(action.element);\r\n if (state && state.selectedContainer && state.selectedContainer.contentId === el.contentId) {\r\n newSelectedContainer = newEl;\r\n }\r\n return newEl;\r\n } else return el;\r\n });\r\n }\r\n }\r\n\r\n if (action.element != null && !newSelectedElement) {\r\n newPageElements = newPageElements.map((el) => {\r\n if (el.contentId == action.element.contentId) {\r\n let newEl = deepClone(action.element);\r\n if (state && state.selectedElement && state.selectedElement.contentId === el.contentId) {\r\n newSelectedElement = newEl;\r\n }\r\n return newEl;\r\n } else return el;\r\n });\r\n }\r\n\r\n return {\r\n ...state,\r\n pageElements: newPageElements,\r\n selectedElement: newSelectedElement,\r\n selectedContainer: newSelectedContainer,\r\n isSavable: true,\r\n };\r\n case pageConstants.UPDATE_PAGE_SUCCESS:\r\n var pageElements = Array.from(arrayHelper.sortByParam(action.page.content, \"sortOrder\"));\r\n if (pageElements !== null) {\r\n pageElements.map((e) => {\r\n e.data = JSON.parse(e.data);\r\n e.data = checkForFormUpdates(e.data, elementOrgin(e.type));\r\n e.contentId = securityHelper.createGuid();\r\n return Object.assign({}, e);\r\n });\r\n }\r\n return {\r\n ...state,\r\n ...action.page,\r\n pageElement,\r\n loading: false,\r\n updated: action.page.updated,\r\n isSavable: false,\r\n };\r\n case pageConstants.UPDATE_PAGE_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error,\r\n };\r\n case pageConstants.SOFT_UPDATE_PAGE:\r\n var page = Object.assign({}, action.page);\r\n return {\r\n ...state,\r\n ...page,\r\n isSavable: true,\r\n };\r\n case pageConstants.GET_PAGE_REQUEST:\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n case pageConstants.GET_PAGE_SUCCESS:\r\n var pageElements = Array.from(arrayHelper.sortByParam(action.page.content, \"sortOrder\"));\r\n if (pageElement !== null) {\r\n pageElements.map((e) => {\r\n e.data = JSON.parse(e.data);\r\n e.data = checkForUpdatesOneLevel(e.data, elementOrgin(e.type));\r\n e.contentId = securityHelper.createGuid();\r\n e.isValid = true;\r\n e.forceValidationMessage = false;\r\n return Object.assign({}, e);\r\n });\r\n }\r\n return {\r\n ...state,\r\n ...action.page,\r\n pageId: action.page.pageId,\r\n languageCode: action.page.languageCode,\r\n eventId: action.page.eventId,\r\n name: action.page.name,\r\n title: action.page.title,\r\n eventName: action.page.eventName,\r\n inherit: action.page.inherit,\r\n currentPage: 1,\r\n selectedContainer: null,\r\n pageElements,\r\n selectedElement: null,\r\n currentPage: 1,\r\n updated: action.page.lastModified,\r\n templateId: action.page.templateId,\r\n loading: false,\r\n };\r\n case pageConstants.GET_PAGE_FAILURE:\r\n return {\r\n ...state,\r\n error: action.error,\r\n loading: false,\r\n };\r\n case pageConstants.GET_ALL_PAGE_PATHS:\r\n state.paths = action.pages;\r\n return state;\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\n/*\r\nfunction handleSelected(element, source){\r\n\r\n if(element.parentId !== null){\r\n\r\n }\r\n else if(element.type === elementConstants.CONTAINER){\r\n const containerId = element.id;\r\n const containerChildId = source.filter(el => { return el.parentId === containerId }).map(el => { return el.id });\r\n const hasChildren = source.filter(el => { return containerChildId.includes(el.parentId) })\r\n\r\n if (hasChildren.length > 0) {\r\n return {\r\n ...state,\r\n selectedContainer: null\r\n };\r\n }\r\n }\r\n else{\r\n\r\n }\r\n\r\n\r\n if (action.element.type === elementConstants.CONTAINER && action.element.parentId === null) {\r\n const containerId = action.element.id;\r\n\r\n const containerChildId = pageElements.filter(el => { return el.parentId === containerId }).map(el => { return el.id });\r\n const hasChildren = pageElements.filter(el => { return containerChildId.includes(el.parentId) })\r\n\r\n if (hasChildren.length > 0) {\r\n return {\r\n ...state,\r\n selectedContainer: null\r\n };\r\n }\r\n }\r\n\r\n if (\r\n action.element.parentId === null &&\r\n arrayHelper.findByParam(pageElements, 'contentId', action.element.contentId) &&\r\n action.element.type === elementConstants.CONTAINER\r\n ) {\r\n const selectedContainer = Object.assign({}, action.element);\r\n return {\r\n ...state,\r\n selectedContainer\r\n\r\n };\r\n }\r\n\r\n const parentChild = arrayHelper.findByParam(pageElements, 'id', action.element.parentId);\r\n\r\n if (parentChild && state.selectedContainer) {\r\n if (parentChild.parentId === state.selectedContainer.id) {\r\n const selectedElement = Object.assign({}, action.element);\r\n return {\r\n ...state,\r\n selectedElement\r\n };\r\n }\r\n } else {\r\n return {\r\n ...state,\r\n selectedElement: action.element,\r\n selectedContainer:\r\n state.selectedContainer &&\r\n action.element.parentId !== state.selectedContainer.Id\r\n ? null\r\n : state.selectedContainer\r\n };\r\n }\r\n} */\r\n","export const questionConstants = {\r\n\r\n GET_QUESTION_BY_EVENT_REQUEST: 'GET_QUESTION_BY_EVENT_REQUEST',\r\n GET_QUESTION_BY_EVENT_SUCCESS: 'GET_QUESTION_BY_EVENT_SUCCESS',\r\n GET_QUESTION_BY_EVENT_FAILURE: 'GET_QUESTION_BY_EVENT_FAILURE',\r\n\r\n UPDATE_QUESTION_REQUEST:\"UPDATE_QUESTION_REQUEST\",\r\n UPDATE_QUESTION_SUCCESS:\"UPDATE_QUESTION_SUCCESS\",\r\n UPDATE_QUESTION_FAILURE:\"UPDATE_QUESTION_FAILURE\",\r\n\r\n UPDATE_QUESTIONS_REQUEST:\"UPDATE_QUESTIONS_REQUEST\",\r\n UPDATE_QUESTIONS_SUCCESS:\"UPDATE_QUESTIONS_SUCCESS\",\r\n UPDATE_QUESTIONS_FAILURE:\"UPDATE_QUESTIONS_FAILURE\",\r\n\r\n CREATE_QUESTION_REQUEST:\"CREATE_QUESTION_REQUEST\",\r\n CREATE_QUESTION_SUCCESS:\"CREATE_QUESTION_SUCCESS\",\r\n CREATE_QUESTION_FAILURE:\"CREATE_QUESTION_FAILURE\",\r\n \r\n DELETE_QUESTIONS_REQUEST:\"DELETE_QUESTIONS_REQUEST\",\r\n DELETE_QUESTIONS_FAILURE:\"DELETE_QUESTIONS_FAILURE\",\r\n DELETE_QUESTIONS_SUCCESS: 'DELETE_QUESTIONS_SUCCESS'\r\n};","import { emailConstants } from \"../../../../constants/email/email.constants\";\r\nimport { deepClone } from \"../../../../helpers/objectHelper\";\r\n/* import { emailHelper } from \"../../../../cms/areas/email/helper/email.helper\"; */\r\n\r\nconst defaultEmail = {\r\n communicationId: 0,\r\n eventId: 0,\r\n type: 'EMAIL',\r\n name: \"default email\",\r\n subject: 'default subject',\r\n previewText: 'default previewText',\r\n fromName: 'Jirango',\r\n fromAddr: 'support@inadra.se',\r\n isSavable: false,\r\n elements: [],\r\n selectedElement: null,\r\n elements: [],\r\n body: '',\r\n submitError: false,\r\n fetched: null,\r\n sent: false\r\n};\r\n\r\nexport function email(state = defaultEmail, action) {\r\n switch (action.type) {\r\n case emailConstants.GET_EMAIL_REQUEST:\r\n return {\r\n ...state,\r\n loading: true\r\n };\r\n case emailConstants.REMOVE_EMAIL_ELEMENT:\r\n const cleanedElements = state.elements.filter(e => e.id !== action.element.id)\r\n return {\r\n ...state,\r\n elements: cleanedElements,\r\n selectedElement: null,\r\n isSavable: true\r\n };\r\n case emailConstants.GET_EMAIL_SUCCESS:\r\n const { bodyJson } = action.email;\r\n return {\r\n ...state,\r\n ...action.email,\r\n elements: bodyJson ? JSON.parse(bodyJson) : [],\r\n fetched: action.email.updated\r\n };\r\n \r\n case emailConstants.GET_EMAIL_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n case emailConstants.GETALL_EMAIL_REQUEST:\r\n return {\r\n ...state,\r\n loading: true\r\n };\r\n \r\n case emailConstants.GETALL_EMAIL_SUCCESS:\r\n return {\r\n ...state,\r\n emails: action.emails,\r\n };\r\n case emailConstants.GETALL_EMAIL_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n\r\n\r\n case emailConstants.UPDATE_EMAIL_REQUEST:\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n case emailConstants.EMAIL_SENT:\r\n return {\r\n ...state,\r\n sent: false,\r\n };\r\n\r\n case emailConstants.UPDATE_EMAIL_SUCCESS:\r\n return {\r\n ...state,\r\n ...action.email,\r\n body: action.email.body,\r\n loading: false,\r\n isSavable: false,\r\n selectedElement: null,\r\n /* elements: action.email.bodyJson ? emailHelper.sortElements(JSON.parse(action.email.bodyJson ), true) : [], */\r\n fetched: action.email.updated\r\n\r\n };\r\n case emailConstants.UPDATE_EMAIL_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n case emailConstants.SEND_TEST_REQUEST:\r\n return {\r\n ...state,\r\n sending: true,\r\n };\r\n\r\n case emailConstants.SEND_TEST_SUCCESS:\r\n return {\r\n ...state,\r\n sending: false,\r\n sent: true\r\n };\r\n case emailConstants.SEND_TEST_FAILURE:\r\n return {\r\n ...state,\r\n sending: false,\r\n error: action.error\r\n };\r\n case emailConstants.SOFT_UPDATE_EMAIL:\r\n return {\r\n ...state,\r\n ...action.email,\r\n isSavable: true\r\n };\r\n case emailConstants.DESELECT_EMAIL_ELEMENT:\r\n return {\r\n ...state,\r\n selectedElement: null\r\n }\r\n case emailConstants.SELECT_EMAIL_ELEMENT:\r\n return {\r\n ...state,\r\n selectedElement: action.element\r\n }\r\n case emailConstants.UPDATE_EMAIL_ELEMENT:\r\n let newElements = Array.from(state.elements);\r\n let newSelectedElement = state.selectedElement;\r\n if (Array.isArray(action.element)) {\r\n /* action.element.map(ae => {\r\n if (newElements.length < 1) { */\r\n newElements = Array.from(action.element);\r\n /* } else {\r\n newElements = newElements.map(el => {\r\n if (el.contentId == ae.contentId) {\r\n let newEl = deepClone(ae);\r\n if (\r\n state &&\r\n state.selectedElement &&\r\n state.selectedElement.contentId === el.contentId\r\n ) {\r\n newSelectedElement = newEl;\r\n }\r\n return newEl;\r\n } else return el;\r\n });\r\n }\r\n }); */\r\n } else {\r\n newElements = newElements.map(el => {\r\n if (el.id == action.element.id) {\r\n let newEl = deepClone(action.element);\r\n if (\r\n state &&\r\n state.selectedElement &&\r\n state.selectedElement.id === el.id\r\n ) {\r\n newSelectedElement = newEl;\r\n }\r\n return newEl;\r\n } else return el;\r\n });\r\n }\r\n return {\r\n ...state,\r\n elements: newElements,\r\n selectedElement: newSelectedElement,\r\n isSavable: action.isSavable\r\n };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { eventLabelsConstants } from \"../../../constants/event/eventLabel.constants\";\r\n\r\nconst defaultState = {\r\n groups: {},\r\n error: false,\r\n loading: false\r\n};\r\n\r\n\r\nexport function eventLabel(state = defaultState, action) {\r\n switch (action.type) {\r\n case eventLabelsConstants.GET_GROUP_EVENTLABEL_REQUEST:\r\n var groups = Object.assign({}, state.groups);\r\n groups[action.groupName] = {};\r\n groups[action.groupName].loading = true;\r\n return {\r\n ...state,\r\n groups,\r\n loading: true\r\n };\r\n case eventLabelsConstants.GET_GROUP_EVENTLABEL_SUCCESS:\r\n var groups = Object.assign({}, state.groups);\r\n groups[action.groupName] = action.group;\r\n return {\r\n ...state,\r\n groups,\r\n loading: false\r\n };\r\n case eventLabelsConstants.GET_GROUP_EVENTLABEL_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: true\r\n };\r\n case eventLabelsConstants.CREATE_EVENTLABEL_REQUEST:\r\n return {\r\n ...state,\r\n loading: true\r\n };\r\n case eventLabelsConstants.CREATE_EVENTLABEL_SUCCESS:\r\n const groupName = action.label.groupName;\r\n var groups = Object.assign({}, state.groups);\r\n groups[action.groupName].push(action.label)\r\n return {\r\n ...state,\r\n groups,\r\n loading: false\r\n };\r\n case eventLabelsConstants.CREATE_EVENTLABEL_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: true\r\n };\r\n\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { combineReducers } from 'redux';\r\n\r\nimport { alert } from './alert.reducer';\r\nimport { user } from './user.reducer';\r\nimport { account } from './account/account.reducer';\r\nimport { authentication } from './authentication.reducer';\r\nimport { element } from './cms/form/element/element.reducer';\r\nimport { form } from './cms/form/form.reducer';\r\nimport { cms } from './cms/cms.reducer';\r\nimport { template } from './cms/template/template.reducer';\r\nimport { language } from './system/language/language.reducer';\r\nimport { event } from './event/event.reducer';\r\nimport { organization } from './organization/organization.reducer';\r\nimport { role } from './organization/role.reducer';\r\nimport { systemLabels } from './system/systemLabel/systemLabels.reducer';\r\nimport { globals } from './global.reducer';\r\nimport { confirmation } from \"./confirmation/confirmation.reducer\"\r\nimport { attendee } from \"./attendee/attendee.reducer\";\r\nimport { page } from './cms/page/page.reducer';\r\nimport { question } from '../reducers/question/question.reducer';\r\nimport { email } from './cms/email/email.reducer';\r\nimport { eventLabel } from './event/eventLabel.reducer';\r\nexport default combineReducers({\r\n alert,\r\n user,\r\n element,\r\n authentication,\r\n form,\r\n template,\r\n language,\r\n event,\r\n organization,\r\n role,\r\n systemLabels,\r\n globals,\r\n account,\r\n cms,\r\n confirmation,\r\n attendee,\r\n page,\r\n question,\r\n email,\r\n eventLabel\r\n})\r\n","import { userConstants } from \"../../constants/user.constants\";\r\n\r\nexport function user(state = {}, action) {\r\n switch (action.type) {\r\n case userConstants.GETALL_REQUEST:\r\n return {\r\n loading: true\r\n };\r\n case userConstants.GETALL_SUCCESS:\r\n return {\r\n loading: false,\r\n items: action.users\r\n };\r\n case userConstants.GETALL_FAILURE:\r\n return {\r\n loading: false,\r\n error: action.error\r\n };\r\n case userConstants.UPDATE_REQUEST:\r\n return {...state,\r\n loading: true,\r\n saved:false,\r\n user: action.user\r\n };\r\n case userConstants.UPDATE_SUCCESS:\r\n return {...state,\r\n loading: false,\r\n message: action.message\r\n };\r\n case userConstants.UPDATE_FAILURE:\r\n return {...state,\r\n loading: false,\r\n saved:false,\r\n error: action.error\r\n };\r\n \r\n default:\r\n return state;\r\n }\r\n}\r\n","import { languageConstants } from \"../../../../constants/system/language/language.constants\";\r\n\r\nexport function language(state = {}, action) {\r\n switch (action.type) {\r\n case languageConstants.GETALL_CODES_REQUEST:\r\n return {\r\n loading: true\r\n };\r\n case languageConstants.GETALL_CODES_SUCCESS:\r\n return {\r\n loading: false,\r\n codes: action.languageCodes\r\n };\r\n case languageConstants.GETALL_CODES_FAILURE:\r\n return {\r\n error: action.error\r\n };\r\n case languageConstants.GETALL_CODES_BY_EVENT_REQUEST:\r\n return {\r\n loading: true\r\n };\r\n case languageConstants.GETALL_CODES_BY_EVENT_SUCCESS:\r\n return {\r\n loading: false,\r\n eventCodes: action.languageCodes\r\n };\r\n case languageConstants.GETALL_CODES_BY_EVENT_FAILURE:\r\n return {\r\n error: action.error\r\n };\r\n\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { eventConstants } from \"../../../constants/event/event.constants\";\r\n\r\n/* const defaultState = {\r\n selectedEvent: 3,\r\n eventLanguage: \"swe\"\r\n};\r\n */\r\nexport function event(state = {}, action) {\r\n switch (action.type) {\r\n case eventConstants.TOGGLE_EVENT_LANGUAGE:\r\n return {\r\n ...state,\r\n eventLanguage: action.code\r\n };\r\n case eventConstants.GET_EVENT_LIST_REQUEST:\r\n return {\r\n ...state,\r\n loading: true\r\n };\r\n case eventConstants.GET_EVENT_LIST_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n eventList: action.eventList,\r\n eventListTime: Date.now()\r\n };\r\n case eventConstants.GET_EVENT_LIST_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n\r\n case eventConstants.GET_EVENT_REQUEST:\r\n return {\r\n ...state,\r\n loading: true\r\n };\r\n case eventConstants.GET_EVENT_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n event: action.event\r\n };\r\n case eventConstants.GET_EVENT_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n case eventConstants.GET_EVENT_SETTINGS_REQUEST:\r\n return {\r\n ...state,\r\n loading: true\r\n };\r\n case eventConstants.GET_EVENT_SETTINGS_SUCCESS:\r\n case eventConstants.UPDATE_EVENT_SETTINGS_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n eventSettings: action.eventSettings\r\n };\r\n case eventConstants.GET_EVENT_SETTINGS_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n\r\n case eventConstants.UPDATE_EVENT_REQUEST:\r\n return {\r\n ...state,\r\n loading: true\r\n };\r\n case eventConstants.UPDATE_EVENT_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n showSaveAlert: true,\r\n event: action.event\r\n };\r\n case eventConstants.UPDATE_EVENT_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n\r\n case eventConstants.CREATE_EVENT_REQUEST:\r\n return {\r\n ...state,\r\n loading: true\r\n };\r\n case eventConstants.CREATE_EVENT_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n showSaveAlert: true,\r\n event: action.event\r\n };\r\n case eventConstants.CREATE_EVENT_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { organizationConstants } from \"../../../constants/organization.constants\";\r\n\r\nexport function organization(state = {}, action) {\r\n switch (action.type) {\r\n case organizationConstants.UPDATE_ORGANIZATION_REQUEST:\r\n return { ...state, loading: true };\r\n case organizationConstants.UPDATE_ORGANIZATION_SUCCESS:\r\n return { ...state, loading: true };\r\n case organizationConstants.UPDATE_ORGANIZATION_FAILURE:\r\n return { ...state, loading: true };\r\n\r\n case organizationConstants.GET_ORGANIZATION_BY_USER_REQUEST:\r\n return { ...state, loading: true };\r\n case organizationConstants.GET_ORGANIZATION_BY_USER_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n organizationList: action.organizationList\r\n };\r\n case organizationConstants.GET_ORGANIZATION_BY_USER_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n\r\n case organizationConstants.GET_ORGANIZATION_DETAILS_SUCCESS:\r\n case organizationConstants.UPDATE_ORGANIZATION_DETAILS_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n orgDetails: action.details,\r\n roles: action.roles,\r\n modules: action.modules\r\n };\r\n case organizationConstants.GET_ORGANIZATION_USERS_SUCCESS:\r\n case organizationConstants.UPDATE_ORGANIZATION_USERS_SUCCESS:\r\n return { ...state, loading: false, orgUsers: action.users };\r\n case organizationConstants.GET_ORGANIZATION_SUBS_SUCCESS:\r\n case organizationConstants.UPDATE_ORGANIZATION_SUBS_SUCCESS:\r\n return { ...state, loading: false, subOrganizations: action.subOrgs };\r\n case organizationConstants.GET_ORGANIZATION_SETTINGS_SUCCESS:\r\n case organizationConstants.UPDATE_ORGANIZATION_SETTINGS_SUCCESS:\r\n return { ...state, loading: false, orgSettings: action.settings };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { roleConstants } from \"../../../constants/role.constants\";\r\n\r\nexport function role(state = {}, action) {\r\n\r\n switch (action.type) {\r\n\r\n case roleConstants.GET_ALL_BY_ORGANIZATION_REQUEST:\r\n case roleConstants.UPDATE_ROLES_REQUEST:\r\n return {...state,\r\n loading: true,\r\n };\r\n case roleConstants.GET_ALL_BY_ORGANIZATION_SUCCESS:\r\n case roleConstants.UPDATE_ROLES_SUCCESS:\r\n return {...state,\r\n loading: false,\r\n roles:action.roles, \r\n modules:action.modules,\r\n };\r\n case roleConstants.GET_ALL_BY_ORGANIZATION_FAILURE:\r\n case roleConstants.UPDATE_ROLES_FAILURE:\r\n return {...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n\r\n\r\n\r\n case roleConstants.CREATE_ROLE_REQUEST:\r\n return {...state,\r\n loading: true,\r\n };\r\n case roleConstants.CREATE_ROLE_SUCCESS:\r\n return {...state,\r\n loading: false,\r\n updatedRole: action.role\r\n };\r\n case roleConstants.CREATE_ROLE_FAILURE:\r\n return {...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n\r\n case roleConstants.DELETE_ROLE_REQUEST:\r\n return {...state,\r\n loading: true,\r\n };\r\n case roleConstants.DELETE_ROLE_SUCCESS:\r\n return {...state,\r\n loading: false,\r\n deletedRoleId: action.roleId\r\n };\r\n case roleConstants.DELETE_ROLE_FAILURE:\r\n return {...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { systemLabelConstants } from \"../../../../constants/system/systemLabels/systemLabels.constants\";\r\n\r\nexport function systemLabels(state = {}, action) {\r\n switch (action.type) {\r\n case systemLabelConstants.CREATE_SYSTEM_LABEL_REQUEST:\r\n case systemLabelConstants.GET_SYSTEM_LABEL_GROUP_REQUEST:\r\n return { ...state, loading: true };\r\n case systemLabelConstants.CREATE_SYSTEM_LABEL_SUCCESS:\r\n case systemLabelConstants.GET_SYSTEM_LABEL_GROUP_SUCCESS:\r\n let newGroups = state.groups ? { ...state.groups } : {};\r\n newGroups[action.groupName] = action.group;\r\n return {\r\n ...state,\r\n loading: false,\r\n groups: newGroups\r\n };\r\n case systemLabelConstants.CREATE_SYSTEM_LABEL_FAILURE:\r\n case systemLabelConstants.GET_SYSTEM_LABEL_GROUP_FAILURE:\r\n return { ...state, error: action.error };\r\n\r\n case systemLabelConstants.GET_ALL_SYSTEM_LABEL_GROUP_REQUEST:\r\n return { ...state, loading: true };\r\n case systemLabelConstants.GET_ALL_SYSTEM_LABEL_GROUP_SUCCESS:\r\n let groups = {};\r\n for (const key in action.groups) {\r\n if (action.groups.hasOwnProperty(key) && key[0]) {\r\n var newKey = key[0].toUpperCase() + key.substr(1, key.length - 1);\r\n groups[newKey] = action.groups[key];\r\n }\r\n }\r\n return { ...state, loading: false, groups: groups };\r\n case systemLabelConstants.GET_ALL_SYSTEM_LABEL_GROUP_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n\r\n case systemLabelConstants.UPDATE_RANGE_SYSTEM_LABEL_REQUEST:\r\n return { ...state, loading: true };\r\n case systemLabelConstants.UPDATE_RANGE_SYSTEM_LABEL_SUCCESS:\r\n return { ...state, loading: false, saved: true };\r\n case systemLabelConstants.UPDATE_RANGE_SYSTEM_LABEL_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n\r\n default:\r\n return state;\r\n }\r\n}","import { globalConstants } from \"../../constants/system/global.constans\";\r\n\r\nexport function globals(\r\n state = {saveAreas:{}, isSaved: true, loadingAreas: {}, isLoading:false, headerHeight: 0, breadcrumbHeight: 0, showMenu:true },\r\n action\r\n) {\r\n switch (action.type) {\r\n case globalConstants.SET_HEADER_HEIGHT:\r\n return { ...state, headerHeight: action.headerHeight };\r\n case globalConstants.SET_BREADCRUMB_HEIGHT:\r\n return { ...state, breadcrumbHeight: action.breadcrumbHeight };\r\n case globalConstants.SET_SAVE_STATUS:\r\n const{saveAreas} = state;\r\n let globalIsSaved = true;\r\n if(action.area)\r\n {\r\n saveAreas[action.area] = action.isSaved;\r\n for (const area in saveAreas) {\r\n if (saveAreas.hasOwnProperty(area)) {\r\n if(!saveAreas[area]){\r\n globalIsSaved= false;\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n \r\n else if(action.isSaved === true){\r\n for (const area in saveAreas) {\r\n if (saveAreas.hasOwnProperty(area)) {\r\n saveAreas[area] = true;\r\n }\r\n }\r\n globalIsSaved = action.isSaved;\r\n }\r\n else{\r\n saveAreas[\"unspecified\"] = action.isSaved;\r\n for (const area in saveAreas) {\r\n if (saveAreas.hasOwnProperty(area)) {\r\n if(!saveAreas[area]){\r\n globalIsSaved= false;\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n return { ...state, isSaved: globalIsSaved, saveAreas };\r\n\r\n case globalConstants.SET_IS_LOADING:\r\n const{loadingAreas} = state;\r\n let globalIsLoading = false;\r\n if(action.area)\r\n {\r\n loadingAreas[action.area] = action.isLoading;\r\n for (const area in loadingAreas) {\r\n if (loadingAreas.hasOwnProperty(area)) {\r\n if(loadingAreas[area] == true){\r\n globalIsLoading= true;\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n else if(action.isLoading === false){\r\n for (const area in loadingAreas) {\r\n if (loadingAreas.hasOwnProperty(area)) {\r\n loadingAreas[area] = false;\r\n }\r\n }\r\n globalIsLoading = action.isLoading;\r\n }\r\n else{\r\n loadingAreas[\"unspecified\"] = action.isLoading;\r\n for (const area in loadingAreas) {\r\n if (loadingAreas.hasOwnProperty(area)) {\r\n if(loadingAreas[area] == true){\r\n globalIsLoading= true;\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n return { ...state, isLoading: globalIsLoading, loadingAreas };\r\n\r\n case globalConstants.SHOW_MENU:\r\n return {...state, showMenu:action.show};\r\n \r\n default:\r\n return state;\r\n }\r\n}\r\n","import { userConstants } from \"../../../constants/user.constants\";\r\n\r\nexport function account(state = {}, action) {\r\n switch (action.type) {\r\n case userConstants.GET_ACCOUNT_DETAILS_REQUEST:\r\n return {\r\n loading: true\r\n };\r\n case userConstants.GET_ACCOUNT_DETAILS_SUCCESS:\r\n return {...state,\r\n loading:false, \r\n user: action.user\r\n };\r\n case userConstants.GET_ACCOUNT_DETAILS_FAILURE:\r\n return {\r\n ...state,\r\n loading:false, \r\n error: action.error\r\n };\r\n case userConstants.UPDATE_REQUEST:\r\n return {...state,\r\n loading: true,\r\n saved:false,\r\n user: action.user\r\n };\r\n case userConstants.UPDATE_SUCCESS:\r\n return {...state,\r\n loading: false,\r\n saved:true,\r\n };\r\n case userConstants.UPDATE_FAILURE:\r\n return {...state,\r\n loading: false,\r\n saved:false,\r\n error: action.error\r\n };\r\n \r\n default:\r\n return state;\r\n }\r\n}\r\n","import { confirmationConstants } from \"../../../constants/confirmation/confirmation.constants\";\r\n\r\nexport function confirmation(state = {}, action) {\r\n switch (action.type) {\r\n case confirmationConstants.UPDATE_CONFIRMATION_REQUEST:\r\n return { ...state, loading: true, };\r\n case confirmationConstants.UPDATE_CONFIRMATION_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n saved: true,\r\n confirmation: action.confirmation\r\n };\r\n case confirmationConstants.UPDATE_CONFIRMATION_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n\r\n case confirmationConstants.GET_CONFIRMATION_LIST_REQUEST:\r\n return { ...state, loading: true, };\r\n case confirmationConstants.GET_CONFIRMATION_LIST_SUCCESS:\r\n return { ...state, loading: false, confirmationList: action.confirmationList, confirmationListTime:Date.now() };\r\n case confirmationConstants.GET_CONFIRMATION_LIST_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n\r\n case confirmationConstants.CREATE_CONFIRMATION_RANGE_REQUEST:\r\n return { ...state, loading: true, };\r\n case confirmationConstants.CREATE_CONFIRMATION_RANGE_SUCCESS:\r\n return { ...state, loading: false, confirmationList: action.confirmations, confirmationListTime:Date.now() };\r\n case confirmationConstants.CREATE_CONFIRMATION_RANGE_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n\r\n case confirmationConstants.GET_CONFIRMATION_REQUEST:\r\n return { ...state, loading: true, };\r\n case confirmationConstants.GET_CONFIRMATION_SUCCESS:\r\n return { ...state, loading: false, confirmation: action.confirmation };\r\n case confirmationConstants.GET_CONFIRMATION_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n case confirmationConstants.CREATE_CONFIRMATION_REQUEST:\r\n return { ...state, loading: true, };\r\n case confirmationConstants.CREATE_CONFIRMATION_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n saved: true,\r\n confirmation: action.confirmation\r\n };\r\n case confirmationConstants.CREATE_CONFIRMATION_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n\r\n case confirmationConstants.DELETE_CONFIRMATION_REQUEST:\r\n return { ...state, loading: true, };\r\n case confirmationConstants.DELETE_CONFIRMATION_SUCCESS:\r\n return { ...state, loading: false, saved: true };\r\n case confirmationConstants.DELETE_CONFIRMATION_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n \r\n default:\r\n return state;\r\n }\r\n}\r\n","import { questionConstants } from \"../../../constants/question/question.constants\";\r\nimport { deepClone } from \"../../../helpers/objectHelper\";\r\n\r\nexport function question(state = {}, action) {\r\n switch (action.type) {\r\n case questionConstants.GET_QUESTION_BY_EVENT_REQUEST:\r\n return { ...state, loading: true };\r\n case questionConstants.GET_QUESTION_BY_EVENT_SUCCESS:\r\n return { ...state, loading: false, questions: action.questions };\r\n case questionConstants.GET_QUESTION_BY_EVENT_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n case questionConstants.DELETE_QUESTIONS_REQUEST:\r\n return { ...state, loading: true };\r\n case questionConstants.DELETE_QUESTIONS_SUCCESS:\r\n return { ...state, loading: false, questions: state.questions.filter(q => q.questionId !== action.questionId) };\r\n case questionConstants.DELETE_QUESTIONS_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n case questionConstants.UPDATE_QUESTIONS_REQUEST:\r\n return { ...state, loading: true };\r\n case questionConstants.UPDATE_QUESTIONS_SUCCESS:\r\n return { ...state, loading: false, questions: action.questions };\r\n case questionConstants.GET_QUESTIONS_BY_EVENT_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n case questionConstants.UPDATE_QUESTION_REQUEST:\r\n return { ...state, loading: true };\r\n case questionConstants.UPDATE_QUESTION_SUCCESS:\r\n let questions = state.questions.map(q => {\r\n if (q.questionId === action.question.questionId) {\r\n return deepClone(action.question);\r\n }\r\n else {\r\n return deepClone(q);\r\n }\r\n });\r\n\r\n return { ...state, loading: false, questions };\r\n case questionConstants.GET_QUESTION_BY_EVENT_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n case questionConstants.CREATE_QUESTION_REQUEST:\r\n return { ...state, loading: true };\r\n case questionConstants.CREATE_QUESTION_SUCCESS:\r\n return { ...state, loading: false, questions: [...state.questions, action.question] };\r\n case questionConstants.CREATE_QUESTION_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { createStore, applyMiddleware } from 'redux';\r\nimport thunkMiddleware from 'redux-thunk';\r\n/* import { createLogger } from 'redux.l'; */\r\nimport rootReducer from './reducers/root.reducer';\r\n\r\n/* const loggerMiddleware = createLogger(); */\r\n\r\nexport const store = createStore(\r\n /* window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), */\r\n rootReducer,\r\n applyMiddleware(\r\n thunkMiddleware,\r\n /* loggerMiddleware */\r\n )\r\n);","import { elementConstants } from \"../../../../../constants/cms/form/element/element.constants\";\r\nimport { deepClone, checkForUpdatesOneLevel } from \"../../../../../helpers/objectHelper\";\r\nimport { elementOrgin } from \"../../../../../cms/helpers/elementHelper\";\r\n\r\nconst initialState = {};\r\n\r\nexport function element(state = initialState, action) {\r\n switch (action.type) {\r\n case elementConstants.GETALL_ELEMENTS_REQUEST:\r\n return {\r\n loading: true\r\n };\r\n case elementConstants.GETALL_ELEMENTS_SUCCESS:\r\n const elements = Array.from(action.elements);\r\n const newElements = elements.map(el => {\r\n let newEl = deepClone(el);\r\n newEl.formId = -1;\r\n newEl.data = elementOrgin(newEl.type);\r\n newEl.formElementId = -1;\r\n return newEl;\r\n })\r\n return {\r\n loading: false,\r\n elements: newElements\r\n };\r\n case elementConstants.GETALL_ELEMENTS_FAILURE:\r\n return {\r\n loading: false,\r\n error: action.error\r\n };\r\n case elementConstants.UPDATE_ELEMENT_REQUEST:\r\n return {\r\n ...state,\r\n id: action.id,\r\n loading: true\r\n };\r\n case elementConstants.UPDATE_ELEMENT_SUCCESS:\r\n return {\r\n ...state,\r\n updatedElement: action.element,\r\n loading: false\r\n };\r\n case elementConstants.UPDATE_ELEMENT_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n case elementConstants.CREATE_ELEMENT_REQUEST:\r\n return {\r\n ...state,\r\n loading: true\r\n };\r\n case elementConstants.CREATE_ELEMENT_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false\r\n };\r\n case elementConstants.CREATE_ELEMENT_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error\r\n };\r\n case elementConstants.ADD_TO_LIST_SUCCESS:\r\n return {\r\n ...state,\r\n elements: [\r\n ...state.elements,\r\n action.element\r\n ]\r\n };\r\n case elementConstants.UPDATE_LIST_SUCCESS:\r\n return {\r\n ...state,\r\n elements: action.elements\r\n };\r\n case elementConstants.ADD_TO_LIST_SUCCESS:\r\n const reInsertedElement = deepClone(action.element);\r\n reInsertedElement.formId = -1;\r\n reInsertedElement.page = 0;\r\n reInsertedElement.sortOrder = 0;\r\n reInsertedElement.data = elementOrgin(reInsertedElement.type);\r\n\r\n return {\r\n ...state,\r\n elements: [...state.elements, reInsertedElement]\r\n };\r\n\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { formConstants } from \"../../../../constants/cms/form/form.constants\";\r\nimport { securityHelper } from \"../../../../helpers/securityHelper\";\r\nimport { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\nimport { array } from \"prop-types\";\r\nimport { checkForUpdates, checkForUpdatesOneLevel, deepClone, checkForFormUpdates } from \"../../../../helpers/objectHelper\";\r\nimport { elementOrgin } from \"../../../../cms/helpers/elementHelper\";\r\n\r\nconst defaultForm = {\r\n formId: 0,\r\n eventId: 0,\r\n isSavable: false,\r\n editMode: false,\r\n name: \"default form\",\r\n pages: 1,\r\n formElements: [],\r\n selectedElement: null,\r\n currentPage: 1,\r\n selectedContainer: null,\r\n eventName: \"Jirango\",\r\n submitError: false,\r\n paths: [],\r\n survey: false,\r\n};\r\n\r\nexport function form(state = defaultForm, action) {\r\n switch (action.type) {\r\n case formConstants.ATTACH_SUCCESS:\r\n const sortNo =\r\n state.formElements.length > 0\r\n ? Math.max.apply(\r\n Math,\r\n state.formElements.map((o) => {\r\n return o.sortOrder;\r\n })\r\n ) + 1\r\n : 1;\r\n return {\r\n ...state,\r\n formElements: [\r\n ...state.formElements,\r\n {\r\n ...action.element,\r\n sortOrder: sortNo,\r\n page: state.currentPage,\r\n data: JSON.parse(action.element.data),\r\n contentId: securityHelper.createGuid(),\r\n },\r\n ],\r\n isSavable: true,\r\n };\r\n case formConstants.IS_CROPPING:\r\n return {\r\n ...state,\r\n isCropping: action.isCropping,\r\n };\r\n case formConstants.UPDATE_FORM_ELEMENT:\r\n let newFormElements = Array.from(state.formElements);\r\n let newSelectedElement = state.selectedElement;\r\n let newSelectedContainer = state.selectedContainer;\r\n if (Array.isArray(action.element)) {\r\n action.element.map((ae) => {\r\n newFormElements = newFormElements.map((el) => {\r\n if (el.contentId == ae.contentId) {\r\n let newEl = deepClone(ae);\r\n if (state && state.selectedElement && state.selectedElement.contentId === el.contentId) {\r\n newSelectedElement = newEl;\r\n }\r\n if (state && state.selectedContainer && state.selectedContainer.contentId === el.contentId) {\r\n newSelectedContainer = newEl;\r\n }\r\n return newEl;\r\n } else return el;\r\n });\r\n });\r\n } else {\r\n newFormElements = newFormElements.map((el) => {\r\n if (el.contentId == action.element.contentId) {\r\n let newEl = deepClone(action.element);\r\n if (state && state.selectedElement && state.selectedElement.contentId === el.contentId) {\r\n newSelectedElement = newEl;\r\n }\r\n if (state && state.selectedContainer && state.selectedContainer.contentId === el.contentId) {\r\n newSelectedContainer = newEl;\r\n }\r\n return newEl;\r\n } else return el;\r\n });\r\n }\r\n\r\n return {\r\n ...state,\r\n formElements: newFormElements,\r\n selectedElement: newSelectedElement,\r\n selectedContainer: newSelectedContainer,\r\n isSavable: action.conditionCheck ? false : true,\r\n };\r\n\r\n case formConstants.REMOVE_PAGE:\r\n let updatedFormElements = [\r\n ...state.formElements.filter((el) => {\r\n return el.page !== state.currentPage;\r\n }),\r\n ];\r\n if (state.pages > state.currentPage) {\r\n updatedFormElements.map((el) => {\r\n if (el.page === state.currentPage + 1) {\r\n el.page = el.page - 1;\r\n return Object.assign({}, el);\r\n }\r\n });\r\n }\r\n\r\n return {\r\n ...state,\r\n formElements: updatedFormElements,\r\n currentPage: state.currentPage - 1,\r\n pages: state.pages - 1,\r\n isSavable: true,\r\n };\r\n case formConstants.ADD_PAGE:\r\n return {\r\n ...state,\r\n pages: state.pages + 1,\r\n isSavable: true,\r\n };\r\n case formConstants.RESTORE_FORM:\r\n return {\r\n ...state,\r\n formElements: [],\r\n selectedContainer: null,\r\n selectedElement: null,\r\n isSavable: true,\r\n };\r\n case formConstants.SCROLL_PAGE:\r\n let newState = deepClone(state);\r\n newState.currentPage = action.page;\r\n return newState;\r\n case formConstants.DELETE_SUCCESS:\r\n let updatedForm = Array.from(state.formElements);\r\n\r\n var indexOfRemovedEl = updatedForm.indexOf(action.element);\r\n if (indexOfRemovedEl > -1) {\r\n updatedForm.splice(indexOfRemovedEl, 1);\r\n updatedForm.map((el) => {\r\n if (el.parentId === action.element.parentId && el.page == action.element.page && el.sortOrder > action.element.sortOrder) {\r\n el.sortOrder -= 1;\r\n }\r\n });\r\n }\r\n\r\n if (action.element.type === elementConstants.CONTAINER) {\r\n const containerChildren = updatedForm.filter((el) => el.parentId === action.element.id);\r\n containerChildren.map((cc) => {\r\n const childElements = updatedForm.filter((el) => el.parentId == cc.id);\r\n childElements.map((childEl) => {\r\n updatedForm.splice(updatedForm.indexOf(childEl), 1);\r\n });\r\n updatedForm.splice(updatedForm.indexOf(cc), 1);\r\n });\r\n } else if (action.element.type === elementConstants.PAYMENT_OPTIONS) {\r\n updatedForm = updatedForm.filter((el) => el.type !== elementConstants.INVOICE_FIELD);\r\n }\r\n return {\r\n ...state,\r\n formElements: updatedForm,\r\n isSavable: true,\r\n selectedElement: null,\r\n };\r\n case formConstants.DESELECT_SUCCESS:\r\n return {\r\n ...state,\r\n selectedElement: null,\r\n selectedContainer: null,\r\n selectedOption: null,\r\n };\r\n case formConstants.TRANSFER_SUCCESS:\r\n return {\r\n ...state,\r\n formElements: [\r\n ...state.formElements.map((el) => {\r\n if (el.id === action.element.id && el.sortOrder && action.element.sortOrder) {\r\n el.page = action.element.page;\r\n }\r\n }),\r\n ],\r\n selectedElement: null,\r\n };\r\n case formConstants.SELECT_SUCCESS:\r\n if (action.element.type === elementConstants.CONTAINER && action.element.parentId === null) {\r\n const containerId = action.element.id;\r\n const containerChildId = state.formElements\r\n .filter((el) => {\r\n return el.parentId === containerId;\r\n })\r\n .map((el) => {\r\n return el.id;\r\n });\r\n const hasChildren = state.formElements.filter((el) => {\r\n return containerChildId.includes(el.parentId);\r\n });\r\n if (hasChildren.length > 0) {\r\n return {\r\n ...state,\r\n selectedContainer: action.element,\r\n };\r\n }\r\n }\r\n\r\n if (\r\n state.formElements.find((el) => {\r\n return el.contentId === action.element.contentId;\r\n }) &&\r\n action.element.type === elementConstants.CONTAINER &&\r\n action.element.parentId === null\r\n ) {\r\n return {\r\n ...state,\r\n selectedContainer: action.element,\r\n selectedElement: null,\r\n };\r\n }\r\n const parentChild = state.formElements.find((el) => {\r\n return el.id === action.element.parentId;\r\n });\r\n\r\n if (parentChild && state.selectedContainer) {\r\n if (parentChild.parentId === state.selectedContainer.id) {\r\n return {\r\n ...state,\r\n selectedElement: action.element,\r\n };\r\n }\r\n } else {\r\n return {\r\n ...state,\r\n selectedElement: action.element,\r\n selectedContainer: state.selectedContainer && action.element.parentId !== state.selectedContainer.Id ? null : state.selectedContainer,\r\n };\r\n }\r\n\r\n case formConstants.SELECT_OPTION:\r\n return {\r\n ...state,\r\n selectedOption: action.option,\r\n };\r\n case formConstants.UPDATE_FORM_SUCCESS:\r\n var parsedFormElements = Array.from(\r\n action.form.formElements.map((e) => {\r\n e.data = JSON.parse(e.data);\r\n e.data = checkForFormUpdates(e.data, elementOrgin(e.type));\r\n e.contentId = securityHelper.createGuid();\r\n\r\n //attach a validation mark on all elements for posting purpose\r\n e.isValid = false;\r\n if (e.data.hidden === true) {\r\n e.isValid = true;\r\n }\r\n if (e.type === elementConstants.CONTAINER) {\r\n e.isValid = true;\r\n }\r\n if (e.type === elementConstants.CONTENT) {\r\n e.isValid = true;\r\n }\r\n if (e.type === elementConstants.EVENT) {\r\n e.isValid = true;\r\n }\r\n if (e.type === elementConstants.PAYMENT_OPTIONS) {\r\n e.isValid = true;\r\n }\r\n if (e.type === elementConstants.QUESTION && e.props.type === \"Text\") {\r\n e.isValid = true;\r\n }\r\n if (e.type === elementConstants.QUESTION && e.props.type === \"Option\" && e.props.requiredMin === 0) {\r\n e.isValid = true;\r\n }\r\n\r\n e.forceValidationMessage = false;\r\n return Object.assign({}, e);\r\n })\r\n );\r\n\r\n parsedFormElements = parsedFormElements.sort((a, b) => {\r\n let x = a.sortOrder;\r\n let y = b.sortOrder;\r\n return y < x ? 1 : y > x ? -1 : 0;\r\n });\r\n return {\r\n ...state,\r\n ...action.form,\r\n formElements: parsedFormElements,\r\n lastModified: action.form.lastModified,\r\n selectedElement: null,\r\n settings: JSON.parse(action.form.settings),\r\n isSavable: false,\r\n };\r\n case formConstants.SOFT_UPDATE_SUCCESS:\r\n return {\r\n ...state,\r\n ...action.form,\r\n selectedElement: false,\r\n isSavable: action.reCreation ? false : true,\r\n };\r\n\r\n case formConstants.GET_FORM_SUCCESS:\r\n var parsedFormElements = Array.from(\r\n action.form.formElements.map((e) => {\r\n e.data = JSON.parse(e.data);\r\n e.data = checkForFormUpdates(e.data, elementOrgin(e.type));\r\n /* e.data = checkForUpdatesOneLevel(e.data, elementOrgin(e.type)); */\r\n e.contentId = securityHelper.createGuid();\r\n\r\n //attach a validation mark on all elements for posting purpose\r\n e.isValid = undefined;\r\n /* \r\n if (e.type === elementConstants.CONTAINER) {\r\n e.isValid = true;\r\n }\r\n if (e.type === elementConstants.CONTENT) {\r\n e.isValid = true;\r\n }\r\n if (e.type === elementConstants.EVENT) {\r\n e.isValid = true;\r\n }\r\n if (e.type === elementConstants.PAYMENT_OPTIONS) {\r\n e.isValid = true;\r\n } */\r\n /* if (e.type === elementConstants.QUESTION && e.props.type === \"Text\") {\r\n if (e.type === elementConstants.QUESTION && e.props.type === \"Text\"\r\n &&\r\n (parseInt(e.data.minCharacters) === 0\r\n || e.data.required === false)\r\n ) {\r\n e.isValid = true;\r\n }\r\n }\r\n if (\r\n e.type === elementConstants.QUESTION &&\r\n e.props.type === \"Option\" &&\r\n (e.props.requiredMin === 0 ||\r\n e.data.required === false)\r\n ) {\r\n e.isValid = true;\r\n }\r\n if (e.data.hidden === true) {\r\n e.isValid = true;\r\n }\r\n e.forceValidationMessage = false; */\r\n return Object.assign({}, e);\r\n })\r\n );\r\n parsedFormElements = parsedFormElements.sort((a, b) => {\r\n let x = a.sortOrder;\r\n let y = b.sortOrder;\r\n return y < x ? 1 : y > x ? -1 : 0;\r\n });\r\n return {\r\n ...state,\r\n ...action.form,\r\n formElements: parsedFormElements,\r\n selectedElement: null,\r\n currency: action.form.currency,\r\n currentPage: 1 /* \r\n \r\n eventName: action.form.eventName, */,\r\n pages: action.form.pages,\r\n editMode: action.editMode,\r\n survey: action.form.survey,\r\n };\r\n\r\n case formConstants.GETALL_FORM_REQUEST:\r\n return { ...state, loading: true };\r\n case formConstants.GETALL_FORM_SUCCESS:\r\n return { ...state, loading: false, forms: action.forms };\r\n case formConstants.GETALL_FORM_FAILURE:\r\n return { ...state, loading: false, error: action.error };\r\n\r\n case formConstants.CREATE_FORM_SUCCESS:\r\n return {\r\n ...state,\r\n forms: [...state.forms, { ...action.form }],\r\n };\r\n /* case formConstants.UPDATE_FORM_SETTINGS:\r\n return {\r\n ...state,\r\n forms: [...state.forms, { ...action.form }]\r\n }; */\r\n case formConstants.POST_FORM_SUCCESS:\r\n return {\r\n ...state,\r\n submitError: false,\r\n };\r\n case formConstants.POST_FORM_FAILURE:\r\n return {\r\n ...state,\r\n submitError: true,\r\n };\r\n case formConstants.GET_ALL_FORM_PATHS:\r\n return {\r\n ...state,\r\n paths: action.forms,\r\n };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { attendeeConstants } from \"../../../constants/attendee/attendee.constants\";\r\n\r\nexport function attendee(state = { activePersonNo: 0 }, action) {\r\n switch (action.type) {\r\n case attendeeConstants.GET_ATTENDEE_LIST_REQUEST:\r\n return { ...state, loading: true };\r\n\r\n case attendeeConstants.GET_ATTENDEE_LIST_SUCCESS:\r\n if (action && !action.orderList) {\r\n action.orderList = [{}];\r\n }\r\n if (action && action.orderList && action.orderList.length === 0) {\r\n action.orderList.push({});\r\n }\r\n return { ...state, loading: false, orders: action.orderList };\r\n\r\n case attendeeConstants.GET_ATTENDEE_LIST_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: action.error,\r\n };\r\n case attendeeConstants.REMOVE_ORDER:\r\n var newOrderList = Array.from(state.orders);\r\n var newActivePersonNo = 0;\r\n\r\n if (state.orders.length > 1) {\r\n const orderToRemove = newOrderList[action.activePersonNo];\r\n\r\n const index = newOrderList.indexOf(orderToRemove);\r\n if (index > -1) {\r\n newOrderList.splice(index, 1);\r\n }\r\n /* newOrderList = newOrderList.slice() (action.activePersonNo, 1); */\r\n\r\n if (newOrderList.length == 1) {\r\n newActivePersonNo = 0;\r\n state.orders[0].leader = true;\r\n } else if (newActivePersonNo > 0 && newOrderList.length > 1) {\r\n newActivePersonNo = state.activePersonNo - 1;\r\n if (state.orders[action.activePersonNo].leader == true) {\r\n state.orders[action.activePersonNo - 1].leader = true;\r\n }\r\n }\r\n }\r\n\r\n return {\r\n ...state,\r\n orders: newOrderList,\r\n activePersonNo: newActivePersonNo,\r\n };\r\n case attendeeConstants.SET_LEADER:\r\n var newOrderList = Array.from(state.orders);\r\n newOrderList = newOrderList.map((n, i) => {\r\n n.leader = false;\r\n if (i == action.activePersonNo) {\r\n n.leader = true;\r\n }\r\n return n;\r\n });\r\n return {\r\n ...state,\r\n orders: newOrderList,\r\n };\r\n\r\n case attendeeConstants.SET_ACTIVE_PERSON_NO:\r\n console.log(\"setting\");\r\n return {\r\n ...state,\r\n activePersonNo: action.activePersonNo,\r\n };\r\n\r\n case attendeeConstants.CREATE_ORDER:\r\n var newOrderList = Array.from(state.orders);\r\n newOrderList.push(action.newOrder);\r\n if (state.orders.length == 1) {\r\n state.orders[0].leader = true;\r\n }\r\n return { ...state, orders: newOrderList, activePersonNo: newOrderList.length - 1 };\r\n\r\n case attendeeConstants.UPDATE_ORDER:\r\n var updatedOrderList = Array.from(state.orders);\r\n updatedOrderList[action.activePersonNo] = action.updatedOrder;\r\n console.log(updatedOrderList);\r\n return { ...state, orders: updatedOrderList };\r\n case attendeeConstants.UPDATE_DISCOUNT:\r\n var updatedOrderList = Array.from(state.orders);\r\n updatedOrderList[action.activePersonNo].discounts = action.discounts;\r\n console.log(updatedOrderList);\r\n return { ...state, orders: updatedOrderList };\r\n\r\n case attendeeConstants.REMOVE_ORDER_BY_CONDITION:\r\n let condtionizedOrderList = Array.from(state.orders);\r\n let currOrder = condtionizedOrderList[state.activePersonNo];\r\n if (currOrder.orderRow === undefined) return state;\r\n currOrder.orderRow = currOrder.orderRow.filter((or) => or.eventId !== action.eventId);\r\n return { ...state, orders: condtionizedOrderList };\r\n\r\n case attendeeConstants.SET_PAYMETHOD:\r\n return { ...state, payMethod: action.payMethod };\r\n\r\n default:\r\n return state;\r\n }\r\n}\r\n","import React from 'react';\r\nimport { handleResponse } from '../../../../helpers/handleresponse';\r\n\r\nclass StyleWrapper extends React.Component {\r\n state = {\r\n text: ''\r\n }\r\n componentDidMount() {\r\n setTimeout(() => this.replaceTags(), 500);\r\n }\r\n componentDidUpdate(prevProps){\r\n if(this.props.content != prevProps.content){\r\n setTimeout(() => this.replaceTags(), 500);\r\n }\r\n }\r\n replaceTags = () => {\r\n const { content, isPage, order, lang } = this.props;\r\n if (order && content && isPage) {\r\n const requestOptions = {\r\n method: \"PUT\",\r\n headers: { \"Content-Type\": \"application/json\" },\r\n body: JSON.stringify({ text: content, orderId: order.orderId, eventId: order.eventId, lang: (lang || order.languageCode || 'swe') })\r\n };\r\n fetch(`./api/page/tagreplace`, requestOptions)\r\n .then(handleResponse)\r\n .then(res => {\r\n this.setState({ text: res.text });\r\n });\r\n }\r\n else {\r\n this.setState({ text: content })\r\n if(window.location.search && window.location.search.toLowerCase().includes(\"badgeno\")){\r\n setTimeout(() => this.replaceTags(), 500)\r\n }\r\n }\r\n }\r\n render() {\r\n const { template, content, isHeaderText, select, isPage, order } = this.props;\r\n return (\r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n}\r\nexport default StyleWrapper;\r\n\r\n","export const formHelper = {\r\n isPublishable,\r\n \r\n}\r\n\r\n\r\nfunction isPublishable(formElements) {\r\n\r\n var result = true;\r\n var message = [];\r\n if (!formElements.find(el => { return el.type === 2 && el.props.name === 'FirstName' })) {\r\n result = false;\r\n message.push(\"TheFieldFirstNameIsRequiredForRunningTheForm\");\r\n }\r\n if (!formElements.find(el => { return el.type === 2 && el.props.name === 'Email' })) {\r\n result = false;\r\n message.push(\"TheFieldEmailIsRequiredForRunningTheForm\");\r\n }\r\n if (!formElements.find(el => { return el.type === 2 && el.props.name === 'LastName' })) {\r\n result = false;\r\n message.push(\"TheFieldLastNameIsRequiredForRunningTheForm\");\r\n }\r\n\r\n return { result, message };\r\n}\r\n","import { elementConstants } from \"../../constants/cms/form/element/element.constants\";\r\n\r\nexport const defaultArticleElement = {\r\n data: {\r\n hidden: false,\r\n conditions: [],\r\n style: { width: \"100%\" },\r\n padding: 10,\r\n margin: 0,\r\n displayType: \"TEXT\",\r\n },\r\n eventId: 0,\r\n formId: null,\r\n pageId: null,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n props: {},\r\n sortOrder: 0,\r\n type: elementConstants.ARTICLE,\r\n};\r\n\r\nexport const defaultContainerElement = {\r\n data: {\r\n hidden: false,\r\n conditions: [],\r\n style: { width: 100, height: 200 },\r\n padding: 10,\r\n margin: 0,\r\n backgroundColor: \"unset\",\r\n background: \"unset\",\r\n backgroundUrl: \"\",\r\n backgroundAttachment: \"initial\",\r\n type: \"DEFAULT\",\r\n validation: {\r\n message: \"\",\r\n },\r\n extra: null,\r\n },\r\n eventId: 0,\r\n formId: null,\r\n pageId: null,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n props: {\r\n elements: [],\r\n },\r\n sortOrder: 0,\r\n type: elementConstants.CONTAINER,\r\n};\r\n\r\nexport const defaultFieldElement = {\r\n data: {\r\n hidden: false,\r\n labelAlign: \"left\",\r\n style: { width: 70, padding: 0 },\r\n padding: 10,\r\n showSubLabel: false,\r\n showSubInput: false,\r\n validation: { type: \"none\", message: \"\" },\r\n conditions: [],\r\n titleWidth: 20,\r\n inputWidth: 80,\r\n maxCharacters: 100,\r\n displayType: \"TEXT\",\r\n sortType: \"DEFAULT\",\r\n selectOptions: [],\r\n },\r\n eventId: 0,\r\n formId: 0,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n props: {\r\n name: \"FirstName\",\r\n type: \"Person\",\r\n length: 0,\r\n labels: [],\r\n subLabels: [],\r\n subInputs: [],\r\n text: \"\",\r\n },\r\n sortOrder: 0,\r\n type: elementConstants.FIELD,\r\n};\r\nexport const defaultInvoiceElement = {\r\n data: {\r\n hidden: false,\r\n labelAlign: \"left\",\r\n style: { width: \"100%\", padding: 0 },\r\n padding: 10,\r\n validation: { type: \"none\", message: \"\" },\r\n conditions: [],\r\n titleWidth: 20,\r\n inputWidth: 80,\r\n maxCharacters: 100,\r\n displayType: \"TEXT\",\r\n selectOptions: [],\r\n name: \"FirstName\",\r\n type: \"Invoice\",\r\n defaultCountry: \"swe\",\r\n invoiceCountries: [],\r\n length: 0,\r\n labels: [],\r\n },\r\n eventId: 0,\r\n formId: 0,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: -1,\r\n props: {\r\n name: \"FirstName\",\r\n type: \"Invoice\",\r\n length: 0,\r\n labels: [],\r\n text: \"\",\r\n },\r\n sortOrder: 0,\r\n type: elementConstants.INVOICE_FIELD,\r\n};\r\n\r\nexport const defaultProfileImageUploaderElement = {\r\n data: {\r\n hidden: false,\r\n shape: \"CIRCLE\",\r\n size: { width: 1024, height: 1024 },\r\n viewport: { width: 200, height: 200 },\r\n defaultImage: \"\",\r\n },\r\n eventId: 0,\r\n formId: 0,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: -1,\r\n props: {},\r\n sortOrder: 0,\r\n type: elementConstants.PROFILEIMAGE_UPLOAD,\r\n};\r\n\r\nexport const defaultContentElement = {\r\n data: {\r\n hidden: false,\r\n\r\n conditions: [],\r\n padding: 10,\r\n margin: 0,\r\n backgroundColor: \"unset\",\r\n },\r\n eventId: 0,\r\n formId: null,\r\n pageId: null,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n props: {\r\n value: \"\",\r\n type: null,\r\n },\r\n sortOrder: 0,\r\n type: elementConstants.CONTENT,\r\n};\r\n\r\nexport const defaultUserPageElement = {\r\n data: {\r\n hidden: false,\r\n conditions: [],\r\n padding: 10,\r\n margin: 0,\r\n backgroundColor: \"unset\",\r\n style: {\r\n height: \"400px\",\r\n },\r\n },\r\n eventId: 0,\r\n formId: null,\r\n pageId: null,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n props: {\r\n confId: -1,\r\n },\r\n sortOrder: 0,\r\n type: elementConstants.USER_PAGE,\r\n};\r\n\r\nexport const defaultQuestionElement = {\r\n data: {\r\n hidden: false,\r\n labelAlign: \"left\",\r\n style: { width: \"100%\", padding: 0 },\r\n padding: 10,\r\n validation: { type: \"none\", message: \"Enter errormessage..\" },\r\n conditions: [],\r\n titleWidth: 20,\r\n inputWidth: 80,\r\n textRows: 1,\r\n minCharacters: 0,\r\n maxCharacters: 100,\r\n showSubLabel: false,\r\n showSubInput: false,\r\n displayType: \"CHECKBOX\",\r\n sortType: \"DEFAULT\",\r\n selectOptions: [],\r\n inline: false,\r\n optionSpacing: \"0px\",\r\n checkboxLabelPlacement: \"end\",\r\n hideCheckboxLabels: false,\r\n displayCheckboxRowAsHeader: false,\r\n /* displayType: 'LIST' */\r\n },\r\n eventId: 0,\r\n formId: 0,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n props: {\r\n type: \"Text\",\r\n requiredMin: 0,\r\n requiredMax: 1,\r\n labels: [],\r\n subLabels: [],\r\n subInputs: [],\r\n options: null,\r\n },\r\n sortOrder: 0,\r\n type: elementConstants.QUESTION,\r\n};\r\nexport const defaultEventElement = {\r\n data: {\r\n hidden: false,\r\n labelAlign: \"center\",\r\n style: { width: \"100%\", padding: 0 },\r\n padding: 10,\r\n parentId: null,\r\n validation: { type: \"none\", message: \"Enter errormessage..\" },\r\n allowOverbooking: false,\r\n maxLabel: \"\",\r\n locationLabel: \"\",\r\n groupId: -1,\r\n hidePrice: false,\r\n descriptionMargin: 0,\r\n display: {\r\n name: true,\r\n startDate: true,\r\n endDate: true,\r\n startTime: true,\r\n endTime: true,\r\n description: true,\r\n max: true,\r\n price: true,\r\n city: true,\r\n venue: true,\r\n priceExVat: true,\r\n priceIncVat: true,\r\n vatSum: true,\r\n vatPercent: true,\r\n },\r\n preChecked: false,\r\n readOnly: false,\r\n doNotExistIfHidden: false,\r\n conditions: [],\r\n maxCharacters: 100,\r\n },\r\n eventId: 0,\r\n formId: 0,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n props: {\r\n name: \"\",\r\n startDateTime: Date.now(),\r\n endDateTime: Date.now() + 1,\r\n description: \"\",\r\n max: 0,\r\n amount: 0,\r\n city: \"\",\r\n venue: \"\",\r\n vatPercent: 0,\r\n },\r\n sortOrder: 0,\r\n type: elementConstants.EVENT,\r\n};\r\n\r\nexport const defaultPaymentElement = {\r\n eventId: 0,\r\n formId: 0,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n sortOrder: 0,\r\n data: {\r\n selectedPaymentMethod: \"\",\r\n paymentMethods: [],\r\n hidden: false,\r\n required: false,\r\n labelAlign: \"left\",\r\n style: { width: \"100%\", padding: 0 },\r\n padding: 10,\r\n validation: { type: \"none\", message: \"\" },\r\n conditions: [],\r\n titleWidth: 20,\r\n inputWidth: 80,\r\n maxCharacters: 100,\r\n labels: [],\r\n },\r\n props: {},\r\n type: elementConstants.PAYMENT_OPTIONS,\r\n};\r\n\r\nexport const defaultPreConfirmationElement = {\r\n eventId: 0,\r\n formId: 0,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n sortOrder: 0,\r\n data: {\r\n hidden: false,\r\n style: { width: \"100%\", padding: 0 },\r\n padding: 10,\r\n validation: { type: \"none\", message: \"\" },\r\n conditions: [],\r\n },\r\n props: {},\r\n type: elementConstants.PRE_CONFIRMATION,\r\n};\r\n\r\nexport const defaultDiscountElement = {\r\n eventId: 0,\r\n formId: 0,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n sortOrder: 0,\r\n data: {\r\n hidden: false,\r\n style: { width: \"100%\", padding: 0 },\r\n padding: 10,\r\n validation: { type: \"none\", message: \"\" },\r\n conditions: [],\r\n },\r\n props: {},\r\n type: elementConstants.DISCOUNT,\r\n};\r\n\r\nexport const defaultGroupRegistrationElement = {\r\n eventId: 0,\r\n formId: 0,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n sortOrder: 0,\r\n data: {\r\n hidden: false,\r\n style: { width: \"100%\", padding: 0 },\r\n padding: 10,\r\n validation: { type: \"none\", message: \"\" },\r\n conditions: [],\r\n returnPage: 1,\r\n },\r\n props: {},\r\n type: elementConstants.GROUP_REGISTRATION,\r\n};\r\n\r\n\r\nexport const defaultFileUploaderElement = {\r\n eventId: 0,\r\n formId: 0,\r\n parentId: null,\r\n formElementId: -1,\r\n languageCode: \"\",\r\n id: -1,\r\n page: 1,\r\n sortOrder: 0,\r\n data: {\r\n hidden: false,\r\n style: { width: \"100%\", padding: 0 },\r\n padding: 10,\r\n validation: { type: \"none\", message: \"\" },\r\n conditions: [],\r\n allowedFiletypes: []\r\n },\r\n props: {},\r\n type: elementConstants.FILE_UPLOADER,\r\n};\r\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Button from '@material-ui/core/Button';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport Slide from '@material-ui/core/Slide';\r\nimport { alertActions } from '../store/actions/alert.action';\r\nimport { alertConstants } from '../constants/alert.constants';\r\nimport ErrorIcon from '@material-ui/icons/Error';\r\nimport WarningIcon from '@material-ui/icons/Warning';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport SystemLabel from '../system/SystemLabel/SystemLabel';\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return \r\n \r\n {this.getIcon()}{\" \"} \r\n \r\n \r\n \r\n \r\n \r\n \r\n OK\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert\r\n };\r\n}\r\nexport default connect(mapStateToProps)(AlertDialog);","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Spinner, Row } from \"reactstrap\";\r\nimport { handleResponse } from \"../../../helpers/handleresponse\";\r\nimport { history } from \"../../../helpers/history\";\r\nimport { getKey } from \"../../../helpers/UrlHelper\";\r\n\r\nclass DibsCardpayment extends React.Component {\r\n state = {\r\n test: false,\r\n showLoader: true,\r\n template: undefined,\r\n loaderMsg: \"PrePaymentLoadMsg\"\r\n };\r\n\r\n componentDidMount = (prevProps, prevState) => {\r\n const { match, location } = this.props;\r\n if (match && match.params && match.params.id) {\r\n let encodedCheckout = localStorage.getItem(\"__dco\")\r\n if (location.search && encodedCheckout ) {\r\n const params = new URLSearchParams(location.search);\r\n const paymentId = params.get(getKey('paymentId', params));\r\n let encodedTemplate = localStorage.getItem(\"__tmpl\");\r\n if (encodedTemplate) {\r\n let template = JSON.parse(atob(encodedTemplate));\r\n this.setState({ template });\r\n localStorage.removeItem(\"__tmpl\");\r\n }\r\n\r\n let checkoutOptions = JSON.parse(atob(encodedCheckout));\r\n checkoutOptions.paymentId = paymentId;\r\n this.addScript(checkoutOptions);\r\n localStorage.removeItem(\"__dco\");\r\n } else {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: { \"Content-Type\": \"application/json\" }\r\n };\r\n return fetch(`./api/dibs/${match.params.id}`, requestOptions)\r\n .then(handleResponse)\r\n .then(response => {\r\n if(response.redirectUrl)\r\n {\r\n history.push(response.redirectUrl);\r\n }\r\n else{\r\n this.setState({ template: response.template }, () =>\r\n this.addScript(response.options)\r\n );\r\n }\r\n });\r\n }\r\n }\r\n };\r\n addScript = response => {\r\n if (!window.Dibs) {\r\n var s = document.createElement(\"script\");\r\n s.src = response.testMode\r\n ? \"https://test.checkout.dibspayment.eu/v1/checkout.js?v=1\"\r\n : \"https://checkout.dibspayment.eu/v1/checkout.js?v=1\";\r\n document.head.appendChild(s);\r\n s.onload = e => this.initCheckout(response);\r\n } else {\r\n this.initCheckout(response);\r\n }\r\n };\r\n initCheckout = checkoutOptions => {\r\n checkoutOptions.containerId = \"dibs-complete-checkout\";\r\n checkoutOptions.theme = undefined;\r\n checkoutOptions.merchantHandlesConsumerData = true;\r\n let checkoutString = JSON.stringify(checkoutOptions);\r\n if (this.state.template) {\r\n let templateString = JSON.stringify(this.state.template);\r\n let encodedTemplate = btoa(templateString);\r\n localStorage.setItem(\"__tmpl\", encodedTemplate);\r\n }\r\n let encodedCheckout = btoa(checkoutString);\r\n localStorage.setItem(\"__dco\", encodedCheckout);\r\n var checkout = new window.Dibs.Checkout(checkoutOptions);\r\n\r\n //this is the event that the merchant should listen to redirect to the “payment-is-ok” page\r\n\r\n checkout.on(\"payment-completed\", response => {\r\n this.setState({ showLoader: true, loaderMsg:'PostPaymentLoadMsg' }, () => {\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application/json\" }\r\n };\r\n return fetch(\r\n `./api/dibs/${this.props.match.params.id}?paymentId=${response.paymentId}`,\r\n requestOptions\r\n )\r\n .then(handleResponse)\r\n .then(response => {\r\n localStorage.removeItem(\"__tmpl\");\r\n localStorage.removeItem(\"__dco\");\r\n history.push(response.redirectUrl);\r\n });\r\n });\r\n });\r\n setTimeout(()=>this.setState({showLoader:false}), 1500 );\r\n };\r\n render = () => {\r\n const { template } = this.state;\r\n\r\n return (\r\n \r\n \r\n \r\n {this.state.showLoader === true ? (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n ) : null}\r\n \r\n {template && template.headerHtml ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n
\r\n {template && template.footerHtml ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n );\r\n };\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n globals: state.globals,\r\n alert: state.alert\r\n };\r\n}\r\nexport default connect(mapStateToProps)(DibsCardpayment);\r\n\r\n\r\n","import React from \"react\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport Fab from \"@material-ui/core/Fab\";\r\n\r\nconst styles = theme => ({\r\n fab: {\r\n },\r\n extendedIcon: {\r\n marginRight: theme.spacing.unit\r\n },\r\n container: {\r\n display: \"inline-flex\",\r\n height: \"20%\",\r\n marginLeft: '-20px',\r\n marginTop: '25px'\r\n }\r\n});\r\n\r\nconst iconStyle = {\r\n fontSize: '1.5em'\r\n};\r\n\r\nconst FloatingActionButtons = props => {\r\n const { classes, onDelete, onEdit, onTransfer, onDeSelect, dragHandleProps } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default withStyles(styles)(FloatingActionButtons);\r\n","import { conditionConstants, eventOperators } from \"./condition.constants\"\r\n\r\n\r\nexport const optionQuestionDictionary = (operator) => {\r\n switch (operator) {\r\n case conditionConstants.operators.EQUAL:\r\n return 'IsEqualToOption'\r\n case conditionConstants.operators.NOT_EQUAL:\r\n return 'IsNotEqualToOption'\r\n case conditionConstants.operators.ANY:\r\n return \"AnyOptionIsSelected\"\r\n case conditionConstants.operators.LESS_THAN:\r\n return \"NoOptionsIsSelected\"\r\n \r\n break;\r\n }\r\n}\r\n\r\nexport const fieldDictionary = (operator) => {\r\n switch (operator) {\r\n case conditionConstants.operators.EQUAL:\r\n return 'IsEqual'\r\n case conditionConstants.operators.NOT_EQUAL:\r\n return 'IsNotEqual'\r\n case conditionConstants.operators.GREATER_THAN:\r\n return \"TextLengthIsGreaterThan\"\r\n case conditionConstants.operators.LESS_THAN:\r\n return \"TextLengthIsLessThan\"\r\n case conditionConstants.operators.LESS_THAN_OR_EQUAL_TO:\r\n return \"TextLengthIsLessThanOrEqualTo\"\r\n case conditionConstants.operators.GREATER_THAN_OR_EQUAL_TO:\r\n return \"TextLengthIsGreaterThanOrEqualTo\"\r\n case conditionConstants.operators.LIKE:\r\n return \"TextIncludes\"\r\n default:\r\n break;\r\n }\r\n}\r\n\r\nexport const eventDictionary = (operator) => {\r\n switch (operator) {\r\n case \"EQUAL\":\r\n return 'IsChecked'\r\n break;\r\n case \"NOT_EQUAL\":\r\n return 'IsNotChecked'\r\n default:\r\n break;\r\n }\r\n}\r\n\r\n","import React from \"react\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport Select from \"react-select\";\r\n\r\nimport {\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ButtonGroup,\r\n Button,\r\n Col,\r\n Row,\r\n Label,\r\n Input\r\n} from \"reactstrap\";\r\nimport {\r\n conditionConstants,\r\n selectors,\r\n actions,\r\n operators\r\n} from \"../condition.constants\";\r\nimport {\r\n OperatorSelector,\r\n operatorSelector\r\n} from \"../conditions.operator.selector\";\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { elementConstants } from \"../../../../../constants/cms/form/element/element.constants\";\r\nimport { eventDictionary, fieldDictionary, optionQuestionDictionary } from \"../condition.dictionary\";\r\n\r\nclass ConditionRow extends React.Component {\r\n componentDidMount() { }\r\n\r\n setPrefix = conditionPrefix => {\r\n let currentCondition = deepClone(this.props.currentCondition);\r\n\r\n if (currentCondition.prefix.includes(\"(\")) {\r\n currentCondition.prefix = conditionPrefix + \"(\";\r\n } else {\r\n currentCondition.prefix = conditionPrefix;\r\n }\r\n this.props.update(currentCondition, this.props.index);\r\n };\r\n convertSourceList = () => {\r\n const { sourceList } = this.props;\r\n if (sourceList === undefined) {\r\n return [];\r\n }\r\n\r\n let fields = sourceList\r\n .filter(sl => sl.type == elementConstants.FIELD)\r\n .map((si, i) => {\r\n let textLabel = si.props.labels.find(\r\n l => l.languageCode == this.props.languageCode\r\n );\r\n return {\r\n label: textLabel.text,\r\n value: si.formElementId\r\n };\r\n });\r\n let questions = sourceList\r\n .filter(sl => sl.type == elementConstants.QUESTION)\r\n .map((si, i) => {\r\n let textLabel = si.props.labels.find(\r\n l => l.languageCode == this.props.languageCode\r\n );\r\n return {\r\n label: textLabel.text,\r\n value: si.formElementId\r\n };\r\n });\r\n let events = sourceList\r\n .filter(sl => sl.type == elementConstants.EVENT)\r\n .map((si, i) => {\r\n return {\r\n label: si.props.name,\r\n value: si.formElementId\r\n };\r\n });\r\n const groupedOptions = [];\r\n if (fields.length > 0)\r\n groupedOptions.push({\r\n label: \"Fields\",\r\n options: fields\r\n });\r\n if (questions.length > 0)\r\n groupedOptions.push({\r\n label: \"Questions\",\r\n options: questions\r\n });\r\n if (events.length > 0)\r\n groupedOptions.push({\r\n label: \"Events\",\r\n options: events\r\n });\r\n return groupedOptions;\r\n };\r\n\r\n convertOperators = () => {\r\n let operatorOptions = [];\r\n let source = this.props.sourceList.find(\r\n sl => sl.formElementId == this.props.currentCondition.sourceId\r\n );\r\n if (source) {\r\n switch (source.type) {\r\n case elementConstants.FIELD:\r\n for (const key in conditionConstants.fieldOperators) {\r\n if (conditionConstants.fieldOperators.hasOwnProperty(key)) {\r\n const element = conditionConstants.fieldOperators[key];\r\n const label = fieldDictionary(key)\r\n operatorOptions.push({ label: \r\n {content}\r\n \r\n );\r\n else if (indent == 2) {\r\n return (\r\n \r\n \r\n {content}\r\n \r\n \r\n );\r\n }\r\n };\r\n render() {\r\n const { currentCondition } = this.props;\r\n let sourceList = this.convertSourceList();\r\n let operators = this.convertOperators();\r\n let sourceValue = \"\";\r\n sourceList.find(g => {\r\n let option = g.options.find(o => o.value == currentCondition.sourceId);\r\n if (option) {\r\n sourceValue = option;\r\n return true;\r\n } else return false;\r\n });\r\n return (\r\n \r\n {this.indentWrapper(\r\n currentCondition.indent,\r\n \r\n {this.props.index > 0 ? (\r\n \r\n \r\n this.setPrefix(\"AND\")}\r\n >\r\n this.setPrefix(\"OR\")}\r\n >\r\n \r\n \r\n \r\n this.onChange(\"sourceId\", e.value)}\r\n options={sourceList}\r\n />\r\n \r\n {\r\n return s.value === currentCondition.operator;\r\n })\r\n }\r\n options={operators}\r\n onChange={e => this.onChange(\"operator\", e.value)}\r\n className=\"condition-select\"\r\n />\r\n \r\n this.props.removeCondition(this.props.index)}\r\n >\r\n this.props.removeCondition(this.props.index)}\r\n />\r\n \r\n this.props.addCondition(this.props.index)}\r\n >\r\n \r\n this.props.addConditionGroup(this.props.index)\r\n }\r\n >\r\n \r\n )}\r\n \r\n );\r\n }\r\n}\r\nexport default ConditionRow;\r\n\r\nconst Selector = props => {\r\n const { onChange, selector } = props;\r\n switch (selector.type) {\r\n case \"checkbox\":\r\n return (\r\n /* onChange(\"value\", e.checked)}\r\n /> */\r\n onChange(\"value\", e.target.checked)}\r\n value=\"primary\"\r\n color=\"red\"\r\n /* inputProps={{ 'aria-label': 'primary checkbox' }} */\r\n />\r\n\r\n );\r\n case \"select\":\r\n return (\r\n onChange(\"value\", e.value)}\r\n />\r\n );\r\n case \"text_input\":\r\n return (\r\n onChange(\"value\", e.target.value)}\r\n />\r\n );\r\n case \"number_input\":\r\n return (\r\n onChange(\"value\", e.target.value)}\r\n />\r\n );\r\n case \"dual_text_input\":\r\n return (\r\n \r\n \r\n \r\n );\r\n default:\r\n return null;\r\n }\r\n};\r\n","import { conditionType } from \"./condition.constants\"\r\n\r\nexport const conditionModel = {\r\n sourceId: 0,\r\n operator: '',\r\n value: '',\r\n sortNo: 0,\r\n action:\"\",\r\n prefix:\"\", \r\n suffix:\"\",\r\n}\r\n\r\n/* export const conditionGroupModel = {\r\n groupId: 0,\r\n sortNo: 0,\r\n \r\n}\r\n\r\nexport const conditionQueryModel ={\r\n\r\n} */","import React from \"react\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\n\r\nimport {\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n Button,\r\n Container,\r\n Row,\r\n Label,\r\n Col\r\n} from \"reactstrap\";\r\nimport ConditionRow from \"./ConditionRow\";\r\nimport { conditionModel } from \"../condition.model\";\r\nimport { conditionConstants } from \"../condition.constants\";\r\nimport { securityHelper } from \"../../../../../helpers/securityHelper\";\r\n\r\nclass ConditionModal extends React.Component {\r\n state = {\r\n currentConditions: [],\r\n otherConditions: []\r\n };\r\n componentDidMount() {\r\n if (\r\n this.props.selectedElement &&\r\n this.props.selectedElement.data.conditions\r\n ) {\r\n let conditions = this.props.selectedElement.data.conditions;\r\n\r\n let filtered = conditions.filter(c => {\r\n return c.action === this.props.conditionAction;\r\n });\r\n if (!filtered) filtered = [];\r\n let other = conditions.filter(c => {\r\n return c.action !== this.props.conditionAction;\r\n });\r\n if (!other) other = [];\r\n this.setState({ currentConditions: filtered, otherConditions: other });\r\n }\r\n }\r\n componentDidUpdate(prevProps, prevState) { }\r\n\r\n addCondition = index => {\r\n let newCondition = Object.assign({}, conditionModel);\r\n let currentConditions = this.state.currentConditions;\r\n newCondition.operator = conditionConstants.operators.EQUAL;\r\n newCondition.sortNo = currentConditions.length + 1;\r\n newCondition.action = this.props.conditionAction;\r\n newCondition.id = securityHelper.createGuid();\r\n newCondition.prefix = currentConditions.length > 0 ? \"AND\" : \"\";\r\n newCondition.suffix = \"\";\r\n newCondition.indent = 0;\r\n if (index != undefined) {\r\n let cond = currentConditions[index];\r\n if (cond.suffix.includes(\")\")) {\r\n newCondition.suffix = cond.suffix;\r\n cond.suffix = cond.suffix = \"\";\r\n newCondition.indent = cond.indent;\r\n currentConditions = currentConditions\r\n .slice(0, index + 1)\r\n .concat(newCondition, currentConditions.slice(index + 1));\r\n } else {\r\n newCondition.indent = cond.indent;\r\n currentConditions = currentConditions\r\n .slice(0, index + 1)\r\n .concat(newCondition, currentConditions.slice(index + 1));\r\n }\r\n } else {\r\n currentConditions.push(newCondition);\r\n }\r\n this.setState({ currentConditions }, this.logConditions);\r\n };\r\n addConditionGroup = index => {\r\n let newCondition = Object.assign({}, conditionModel);\r\n let currentConditions = this.state.currentConditions;\r\n newCondition.operator = conditionConstants.operators.EQUAL;\r\n newCondition.sortNo = currentConditions.length + 1;\r\n newCondition.action = this.props.conditionAction;\r\n newCondition.id = securityHelper.createGuid();\r\n newCondition.prefix = currentConditions.length > 0 ? \"AND(\" : \"(\";\r\n newCondition.suffix = \")\";\r\n newCondition.indent = 1;\r\n\r\n if (index != undefined) {\r\n let cond = currentConditions[index];\r\n if (cond.suffix.includes(\")\")) {\r\n newCondition.suffix = cond.suffix + \")\";\r\n cond.suffix = cond.suffix = \"\";\r\n newCondition.indent = cond.indent + 1;\r\n currentConditions = currentConditions\r\n .slice(0, index + 1)\r\n .concat(newCondition, currentConditions.slice(index + 1));\r\n } else {\r\n newCondition.indent = cond.indent + 1;\r\n currentConditions = currentConditions\r\n .slice(0, index + 1)\r\n .concat(newCondition, currentConditions.slice(index + 1));\r\n }\r\n } else {\r\n currentConditions.push(newCondition);\r\n }\r\n this.setState({ currentConditions }, this.logConditions);\r\n };\r\n\r\n logConditions = () => {\r\n let str = \"\";\r\n this.state.currentConditions.map(c => {\r\n str += `${c.prefix} SRC ${c.operator} VAL ${c.suffix} \\n`;\r\n });\r\n };\r\n updateCondition = (updatedCondition, index) => {\r\n let currentConditions = this.state.currentConditions;\r\n currentConditions[index] = updatedCondition;\r\n this.setState({ currentConditions });\r\n };\r\n removeCondition = index => {\r\n let currentConditions = Array.from(this.state.currentConditions);\r\n\r\n let removedCondition = currentConditions.splice(index, 1)[0];\r\n if (index > 0) {\r\n if (\r\n !removedCondition.prefix.includes(\"(\") &&\r\n removedCondition.suffix.includes(\")\")\r\n ) {\r\n currentConditions[index - 1].suffix += removedCondition.suffix;\r\n }\r\n if (\r\n removedCondition.prefix.includes(\"(\") &&\r\n !removedCondition.suffix.includes(\")\") &&\r\n currentConditions.length >= index + 1\r\n ) {\r\n currentConditions[index].prefix += \"(\";\r\n }\r\n if (\r\n removedCondition.prefix.includes(\"(\") &&\r\n removedCondition.suffix.includes(\")\")\r\n ) {\r\n currentConditions[index - 1].suffix += removedCondition.suffix.substr(\r\n 0,\r\n removedCondition.suffix.length - 1\r\n );\r\n }\r\n }\r\n this.setState({ currentConditions }, this.logConditions);\r\n };\r\n save = () => {\r\n let newConditions = Array.from(this.state.currentConditions).concat(this.state.otherConditions);\r\n this.props.update(newConditions/* , this.props.selectedElement.formElementId */);\r\n };\r\n // toggle = () => {\r\n // this.props.toggle();\r\n // }\r\n render() {\r\n const { sourceList } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.state.currentConditions.length > 0\r\n ? this.state.currentConditions.map((c, i) => {\r\n return (\r\n \r\n this.addCondition()}\r\n >\r\n\r\n this.addConditionGroup()}\r\n >\r\n\r\n this.addCondition()}>Add */}\r\n {/* this.addConditionGroup()}>Group */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\nexport default ConditionModal;\r\n","import React from \"react\";\r\nimport { Container, Row, Col, Card, Button, ButtonGroup } from \"reactstrap\";\r\nimport { connect } from \"react-redux\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { elementActions } from \"../../../../../store/actions/cms/element/element.action\";\r\nimport ReactDragList from \"react-drag-list\";\r\nimport \"react-drag-list/assets/index.css\";\r\nimport { Droppable, Draggable } from \"react-beautiful-dnd\";\r\nimport { renderElement } from \"../../../../helpers/renderElement\";\r\nimport FloatingActionButtons from \"../../../../components/UI/Buttons/FloatingActionButtons\";\r\nimport ElementWrapper from \"../../../../components/element/ElementWrapper/ElementWrapper\";\r\nimport styled from \"styled-components\";\r\nimport { elementConstants } from \"../../../../../constants/cms/form/element/element.constants\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport { insertGoogleFonts } from \"../../../../../helpers/fontHelper\";\r\nimport { labelAlignmentButtonDisplay } from \"../../../../helpers/labelAlignment\";\r\nimport JirangoButton from \"../../../../components/UI/Buttons/JirangoButton\";\r\nimport ConditionModal from \"../../conditions/components/ConditionModal\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { securityHelper } from \"../../../../../helpers/securityHelper\";\r\nimport { ElementOverlay } from \"../../../../components/element/Overlay/ElementOverlay\";\r\n\r\nimport Media from \"react-media\";\r\nimport { arrayHelper } from \"../../../../../helpers/arrayHelper\";\r\nimport InheritageWrapper from \"../../../../components/editor/tools/Inheritage/InheritageWrapper\";\r\n\r\nconst DropArea = styled.div`\r\n background-color: ${(props) => props.isDraggingOver && \"#20a8d85c\"};\r\n padding-top: ${(props) => props.isDraggingOver && props.hasChildren && !props.isDropZoneDisabled && \"200px\"};\r\n padding-bottom: ${(props) => props.isDraggingOver && props.hasChildren && !props.isDropZoneDisabled && \"200px\"};\r\n\r\n padding: ${(props) => \"20px 0px\"};\r\n border: ${(props) => props.isDraggingOver && \"1px dashed #20a8d8\"};\r\n`;\r\n\r\nconst DragContainer = styled.div`\r\n background-color: ${(props) => props.isDragging && \"#e7f9ff\"};\r\n background-color: ${(props) => props.backgroundColor};\r\n box-shadow: ${(props) => props.isDragging && \"box-shadow:0 8px 6px -6px black\"};\r\n`;\r\nclass FormContent extends React.Component {\r\n state = {\r\n template: null,\r\n formElements: null,\r\n isDropZoneDisabled: false,\r\n isMediaVaultOpen: false,\r\n isConditionModalOpen: false,\r\n };\r\n componentDidMount() {\r\n document.addEventListener(\"click\", this.handleClick, false);\r\n }\r\n componentWillUnmount() {\r\n document.removeEventListener(\"click\", this.handleClick, false);\r\n }\r\n handleClick = (e) => {\r\n if (\r\n this.elementContainerRef.contains(e.target) ||\r\n (this.props.asideEditorRef && this.props.asideEditorRef.contains(e.target)) ||\r\n (this.props.sidebarRef && this.props.sidebarRef.contains(e.target))\r\n ) {\r\n return;\r\n } else if (this.props.isConditionModalOpen) {\r\n return;\r\n } else if (this.props.cms.deselectionBlocked) {\r\n return;\r\n } else {\r\n this.onDeselect();\r\n }\r\n };\r\n\r\n togglePage = (page) => {\r\n const { dispatch } = this.props;\r\n const { form } = this.props;\r\n if (page <= form.pages || page >= 1) {\r\n dispatch(formActions.deselect(page));\r\n dispatch(formActions.scrollPage(page));\r\n }\r\n };\r\n\r\n handleOrderChange(event, dataSource) {\r\n const { dispatch } = this.props;\r\n const reArranged = [...dataSource];\r\n dataSource.map((o, index) => {\r\n reArranged[index].sortOrder = index + 1;\r\n });\r\n dispatch(formActions.softUpdate(reArranged));\r\n }\r\n onSelect = (element) => {\r\n const { dispatch } = this.props;\r\n /* this.containerAdjustedSelection(); */\r\n dispatch(formActions.select(element));\r\n };\r\n onDelete = (element) => {\r\n const { dispatch } = this.props;\r\n dispatch(formActions.remove(element));\r\n };\r\n onTransfer = (element, page) => {\r\n const { dispatch } = this.props;\r\n element.page = page;\r\n dispatch(elementActions.update(element));\r\n dispatch(formActions.deselect());\r\n };\r\n addPage = () => {\r\n const { dispatch } = this.props;\r\n dispatch(formActions.addPage());\r\n };\r\n scrollPage = (page) => {\r\n const { dispatch } = this.props;\r\n const { form } = this.props;\r\n if (page <= form.pages || page >= 1) {\r\n dispatch(formActions.deselect(page));\r\n dispatch(formActions.scrollPage(page));\r\n }\r\n };\r\n onDeselect = () => {\r\n const { dispatch } = this.props;\r\n dispatch(formActions.deselect());\r\n };\r\n disableDropZone = (isDisabled) => {\r\n this.setState({ isDropZoneDisabled: isDisabled });\r\n };\r\n onImageChange = (el) => {\r\n this.setState({ isMediaVaultOpen: true });\r\n };\r\n isDragging = (props) => {};\r\n updateConditions = (conditions) => {\r\n const { selectedContainer, selectedElement } = this.props.form;\r\n let obj = selectedContainer || selectedElement;\r\n let selected = Object.assign({}, obj);\r\n selected.data.conditions = Array.from(conditions);\r\n\r\n this.props.dispatch(elementActions.update(selected));\r\n this.props.toggleConditionModal();\r\n };\r\n containerAdjustedSelection = () => {\r\n if (this.props.form.selectedContainer) {\r\n const containerId = this.props.form.selectedContainer.id;\r\n const containerChildId = this.props.form.formElements\r\n .filter((el) => {\r\n return el.parentId === containerId;\r\n })\r\n .map((el) => {\r\n return el.id;\r\n });\r\n /* if (containerChildId.includes(this.props.form.selectedElement.parentId)) {\r\n } */\r\n }\r\n };\r\n sortElements = () => {\r\n const { form } = this.props;\r\n const { formElements } = this.props.form;\r\n if (formElements === undefined || formElements.length < 1) return [];\r\n\r\n const dataSource = Array.from(\r\n formElements\r\n .filter((el) => {\r\n return el.page === form.currentPage && el.parentId === null;\r\n })\r\n .sort((a, b) => {\r\n return a.sortOrder - b.sortOrder;\r\n })\r\n );\r\n let finishedList = this.sortController(dataSource);\r\n return finishedList;\r\n };\r\n sortController = (list) => {\r\n const controlledList = Array.from(list);\r\n for (let index = 0; index < controlledList.length; index++) {\r\n if (controlledList[index].sortOrder !== index) {\r\n controlledList[index].sortOrder = index;\r\n }\r\n }\r\n return controlledList;\r\n };\r\n shouldRenderEmptyDivider = () => {};\r\n selectedBorderStyle = (el) => {\r\n if (el.type === elementConstants.CONTAINER) return \"1px solid #28a74563\";\r\n else return \"1px solid #5593dc94\";\r\n };\r\n handleKeyDown = (e) => {\r\n const keyCode = e.keyCode || e.which;\r\n if (keyCode === 13) {\r\n // You code when \"Enter\" is pressed\r\n if (this.state.optValue) {\r\n this.handleChange(e.target.value);\r\n this.addOptions();\r\n }\r\n }\r\n };\r\n render() {\r\n //Add to method\r\n const { form /* template */, cms } = this.props;\r\n const { template, previewDevice } = this.props.template;\r\n const { formElements, selectedElement, selectedContainer } = this.props.form;\r\n const dataSource = this.sortElements();\r\n const dataSourceX = Array.from(\r\n formElements\r\n .filter((el) => {\r\n return el.page === form.currentPage;\r\n })\r\n .sort((a, b) => {\r\n return a.sortOrder - b.sortOrder;\r\n })\r\n );\r\n /* console.table(dataSourceX.map(m => { return { sortOrder: m.sortOrder, type: m.type, parentId: m.parentId } })) */\r\n\r\n return (\r\n \r\n
\r\n
(this.elementContainerRef = r)}>\r\n
\r\n {(provided, snapshot) => {\r\n return (\r\n { this.elementContainerRef = r; */ provided.innerRef /* (r) */}\r\n >\r\n {dataSource.map((el, index) => {\r\n return (\r\n \r\n
\r\n {(provided, snapshot) => (\r\n 0}\r\n >\r\n \r\n { el.eventId != cms.eventId && el.props && el.props.inherit !== undefined ? this.onSelect(el)} status={el.props.inherit} /> : null}\r\n \r\n \r\n this.onSelect(el)}\r\n >\r\n {renderElement(\r\n !el.props &&\r\n el.type != elementConstants.INVOICE_FIELD &&\r\n el.type != elementConstants.PAYMENT_OPTIONS &&\r\n el.type != elementConstants.CONTAINER &&\r\n el.type != elementConstants.PROFILEIMAGE_UPLOAD &&\r\n el.type != elementConstants.PRE_CONFIRMATION &&\r\n el.type != elementConstants.DISCOUNT &&\r\n el.type != elementConstants.GROUP_REGISTRATION && \r\n el.type != elementConstants.FILE_UPLOADER\r\n ? elementConstants.DELETED\r\n : el.type,\r\n el,\r\n this.disableDropZone\r\n )}\r\n \r\n
\r\n \r\n
: null}\r\n \r\n );\r\n })}\r\n\r\n {dataSource && dataSource !== undefined && dataSource.length < 1 ? (\r\n !this.state.isDropZoneDisabled && (\r\n
\r\n {provided.placeholder}\r\n \r\n )\r\n ) : (\r\n
{provided.placeholder}
\r\n )}\r\n \r\n );\r\n }}\r\n \r\n\r\n {form.currentPage === form.pages &&\r\n form.pages === 1 &&\r\n form.settings !== undefined &&\r\n form.settings.submit !== undefined &&\r\n form.settings.submit.labels !== undefined &&\r\n !form.settings.submit.hidden /* .find(l => {\r\n return l.languageCode === form.languageCode;\r\n }).text !== \"\" */ ? (\r\n
\r\n \r\n \r\n \r\n {\r\n /* form.settings !== undefined &&\r\n form.settings.submit !== undefined &&\r\n form.settings.submit.labels !== undefined && */\r\n form.settings.submit.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text !== \"\"\r\n ? form.settings.submit.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text\r\n : form.settings.submit.defaultLabel\r\n }\r\n \r\n
\r\n \r\n \r\n ) : null}\r\n\r\n {form && form.pages > 1 ? (\r\n \r\n this.togglePage(form.currentPage - 1)} style={template && template.content.button}>\r\n {form.settings.navigation.previous.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text.length > 0 ? (\r\n form.settings.navigation.previous.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text\r\n ) : (\r\n \r\n ) : null}\r\n \r\n\r\n this.togglePage(form.currentPage + 1)} style={template && template.content.button}>\r\n {form.settings.navigation.next.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text !== \"\" ? (\r\n form.settings.navigation.next.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text\r\n ) : (\r\n \r\n ) : null}\r\n {form.currentPage === form.pages && form.settings !== undefined && form.settings.submit !== undefined && form.settings.submit.labels !== undefined && !form.settings.submit.hidden ? (\r\n \r\n {form.settings.submit.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text !== \"\"\r\n ? form.settings.submit.labels.find((l) => {\r\n return (l.languageCode.code || l.languageCode) === form.languageCode;\r\n }).text\r\n : form.settings.submit.defaultLabel}\r\n \r\n ) : null}\r\n \r\n \r\n ) : null}\r\n {\r\n return fe.contentId !== selectedElement.contentId /* &&\r\n fe.page === selectedElement.page */;\r\n })\r\n }\r\n />\r\n ) : null}\r\n {this.props.isConditionModalOpen && this.props.cms.editMode && selectedContainer ? (\r\n {\r\n return fe.contentId !== selectedContainer.contentId /* &&\r\n fe.page === selectedElement.page */;\r\n })\r\n }\r\n />\r\n ) : null}\r\n \r\n \r\n );\r\n }\r\n}\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert,\r\n form: state.form,\r\n template: state.template,\r\n cms: state.cms,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(FormContent);\r\n","import React from 'react';\r\nimport { Col, Row, Button } from 'reactstrap';\r\nimport './EditorToggler.css';\r\n\r\nexport const EditorToggler = (props) => {\r\n const { icon, onToggle, color, dir, text } = props;\r\n const className = `editor-${dir}-toggler`;\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\nexport const ContentToggler = (props) => {\r\n const { icon, onToggle, color, dir, text } = props;\r\n const className = `editor-${dir}-toggler`;\r\n return (\r\n \r\n \r\n\r\n\r\n )\r\n}","import { elementConstants } from \"../../constants/cms/form/element/element.constants\";\r\nimport { defaultPreConfirmationElement, defaultProfileImageUploaderElement } from \"../models/defaultElements\";\r\nimport { securityHelper } from \"../../helpers/securityHelper\";\r\n\r\nexport const profileImageUploaderHelper = {\r\n create\r\n};\r\n\r\nfunction getNewId(elements) {\r\n const preConfirmations =\r\n elements.filter(el => el.type === elementConstants.PROFILEIMAGE_UPLOAD)\r\n ;\r\n\r\n if (!preConfirmations.length || preConfirmations.length < 0) {\r\n return 0;\r\n }\r\n\r\n return preConfirmations.length * -1;\r\n}\r\n\r\nfunction create(\r\n source,\r\n sourceType,\r\n selectedEl,\r\n sortOrder\r\n) {\r\n\r\n let eventId = source.eventId;\r\n let langCode = source.languageCode;\r\n let elements = source.formElements;;\r\n let currentPage = source.currentPage;\r\n let formId = source.formId;\r\n let pageId = null;\r\n\r\n let newEl = Object.assign({}, defaultProfileImageUploaderElement);\r\n newEl.sortOrder = sortOrder;\r\n newEl.formId = formId;\r\n newEl.eventId = eventId;\r\n newEl.parentId = null;\r\n newEl.pageId = pageId;\r\n newEl.id = getNewId(elements);\r\n newEl.languageCode = langCode;\r\n newEl.contentId = securityHelper.createGuid();\r\n newEl.page = currentPage;\r\n newEl.isValid = true;\r\n\r\n return newEl;\r\n}","import { elementConstants } from \"../../constants/cms/form/element/element.constants\";\r\nimport { defaultDiscountElement } from \"../models/defaultElements\";\r\nimport { securityHelper } from \"../../helpers/securityHelper\";\r\n\r\nexport const discountHelper = {\r\n create,\r\n};\r\n\r\nfunction getNewId(elements) {\r\n const preConfirmations = elements.filter((el) => el.type === elementConstants.REBATE);\r\n if (!preConfirmations.length || preConfirmations.length < 0) {\r\n return 0;\r\n }\r\n\r\n return preConfirmations.length * -1;\r\n}\r\n\r\nfunction create(source, sourceType, selectedEl, sortOrder) {\r\n let eventId = source.eventId;\r\n let langCode = source.languageCode;\r\n let elements = source.formElements;\r\n let currentPage = source.currentPage;\r\n let formId = source.formId;\r\n let pageId = null;\r\n\r\n let newEl = Object.assign({}, defaultDiscountElement);\r\n newEl.sortOrder = sortOrder;\r\n newEl.formId = formId;\r\n newEl.eventId = eventId;\r\n newEl.parentId = null;\r\n newEl.pageId = pageId;\r\n newEl.id = getNewId(elements);\r\n newEl.languageCode = langCode;\r\n newEl.contentId = securityHelper.createGuid();\r\n newEl.page = currentPage;\r\n newEl.isValid = true;\r\n\r\n return newEl;\r\n}\r\n","import { elementConstants } from \"../../constants/cms/form/element/element.constants\";\r\nimport { defaultDiscountElement, defaultGroupRegistrationElement } from \"../models/defaultElements\";\r\nimport { securityHelper } from \"../../helpers/securityHelper\";\r\n\r\nexport const groupRegistrationHelper = {\r\n create,\r\n};\r\n\r\nfunction getNewId(elements) {\r\n const preConfirmations = elements.filter((el) => el.type === elementConstants.GROUP_REGISTRATION);\r\n if (!preConfirmations.length || preConfirmations.length < 0) {\r\n return 0;\r\n }\r\n\r\n return preConfirmations.length * -1;\r\n}\r\n\r\nfunction create(source, sourceType, selectedEl, sortOrder) {\r\n let eventId = source.eventId;\r\n let langCode = source.languageCode;\r\n let elements = source.formElements;\r\n let currentPage = source.currentPage;\r\n let formId = source.formId;\r\n let pageId = null;\r\n\r\n let newEl = Object.assign({}, defaultGroupRegistrationElement);\r\n newEl.sortOrder = sortOrder;\r\n newEl.formId = formId;\r\n newEl.eventId = eventId;\r\n newEl.parentId = null;\r\n newEl.pageId = pageId;\r\n newEl.id = getNewId(elements);\r\n newEl.languageCode = langCode;\r\n newEl.contentId = securityHelper.createGuid();\r\n newEl.page = currentPage;\r\n newEl.isValid = true;\r\n\r\n return newEl;\r\n}\r\n","import { elementConstants } from \"../../constants/cms/form/element/element.constants\";\r\nimport { defaultDiscountElement, defaultFileUploaderElement, defaultGroupRegistrationElement } from \"../models/defaultElements\";\r\nimport { securityHelper } from \"../../helpers/securityHelper\";\r\n\r\nexport const fileUploadHelper = {\r\n create,\r\n};\r\n\r\nfunction getNewId(elements) {\r\n const preConfirmations = elements.filter((el) => el.type === elementConstants.FILE_UPLOADER);\r\n if (!preConfirmations.length || preConfirmations.length < 0) {\r\n return 0;\r\n }\r\n\r\n return preConfirmations.length * -1;\r\n}\r\n\r\nfunction create(source, sourceType, selectedEl, sortOrder) {\r\n let eventId = source.eventId;\r\n let langCode = source.languageCode;\r\n let elements = source.formElements;\r\n let currentPage = source.currentPage;\r\n let formId = source.formId;\r\n let pageId = null;\r\n\r\n let newEl = Object.assign({}, defaultFileUploaderElement);\r\n newEl.sortOrder = sortOrder;\r\n newEl.formId = formId;\r\n newEl.eventId = eventId;\r\n newEl.parentId = null;\r\n newEl.pageId = pageId;\r\n newEl.id = getNewId(elements);\r\n newEl.languageCode = langCode;\r\n newEl.contentId = securityHelper.createGuid();\r\n newEl.page = currentPage;\r\n newEl.isValid = true;\r\n\r\n return newEl;\r\n}\r\n","import React, { Component, Suspense } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Redirect, Route, Switch } from \"react-router-dom\";\r\nimport { elementActions } from \"../../../../../store/actions/cms/element/element.action\";\r\nimport { formActions } from \"../../../../../store/actions/cms/form/form.action\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\n\r\nimport { DragDropContext } from \"react-beautiful-dnd\";\r\n\r\nimport { Container } from \"reactstrap\";\r\n\r\nimport { AppAside, AppBreadcrumb, AppFooter, AppHeader, AppSidebar, AppSidebarFooter, AppSidebarForm, AppSidebarHeader, AppSidebarMinimizer, AppSidebarNav } from \"@coreui/react\";\r\n\r\n//Lazy load this\r\nimport FormContent from \"./FormContent\";\r\nimport { languageActions } from \"../../../../../store/actions/system/language/language.action\";\r\nimport { arrayHelper } from \"../../../../../helpers/arrayHelper\";\r\nimport { securityHelper } from \"../../../../../helpers/securityHelper\";\r\nimport Notifier from \"../../../../../components/UI/Notifier/Notifier\";\r\nimport { elementConstants } from \"../../../../../constants/cms/form/element/element.constants\";\r\nimport { systemLabelActions } from \"../../../../../store/actions/system/systemLabel/systemLabel.action\";\r\nimport { containerHelper } from \"../../../../helpers/containerHelper\";\r\nimport { content } from \"../../../../models/content\";\r\nimport { contentHelper } from \"../../../../helpers/contentHelper\";\r\nimport { paymentHelper } from \"../../../../helpers/paymentHelper\";\r\nimport TemplateWrapper from \"../../../template/containers/TemplateLayout/TemplateWrapper\";\r\nimport { cmsActions } from \"../../../../../store/actions/cms/cms.action\";\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { SplashScreen } from \"../../../../components/UI/SplashScreen/SplashScreen\";\r\nimport { confirmationActions } from \"../../../../../store/actions/confirmation/confirmation.action\";\r\nimport { EditorToggler } from \"../../../../components/UI/EditorToggler/EditorToggler\";\r\nimport \"../../../../style/EditorLayout.css\";\r\nimport { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { elementOrgin } from \"../../../../helpers/elementHelper\";\r\nimport ErrorBoundary from \"../../../../../hoc/ErrorBoundry\";\r\nimport { pageActions } from \"../../../../../store/actions/cms/page/page.action\";\r\nimport { preConfirmationHelper } from \"../../../../helpers/preConfirmationHelper\";\r\nimport EditorSidebar from \"../../../../components/editor/EditorSidebar/EditorSidebar\";\r\nimport { getKey } from \"../../../../../helpers/UrlHelper\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { profileImageUploaderHelper } from \"../../../../helpers/profileImageUploader.helper\";\r\nimport { discountHelper } from \"../../../../helpers/rebateHelper\";\r\nimport { groupRegistrationHelper } from \"../../../../helpers/groupRegistrationHelper\";\r\nimport { fileUploadHelper } from \"../../../../helpers/fileUploadHelper\";\r\n\r\nclass FormLayout extends React.Component {\r\n state = {\r\n loaded: false,\r\n sidebarOpen: true,\r\n asideOpen: true,\r\n isSurvey: false,\r\n isConditionModalOpen: false,\r\n conditionAction: null,\r\n dragging: false,\r\n };\r\n loading = () => Loading...
;\r\n componentDidMount() {\r\n const { dispatch, user, match } = this.props;\r\n document.body.style.overflow = \"hidden\";\r\n if (user) {\r\n let eventId = null;\r\n let languageCode = null;\r\n if (window.location.search) {\r\n const params = new URLSearchParams(window.location.search);\r\n let unparsedEventId = params.get(getKey(\"eventId\", params));\r\n if (unparsedEventId) eventId = parseInt(unparsedEventId);\r\n languageCode = params.get(getKey(\"languageCode\", params));\r\n }\r\n if (user && !eventId) {\r\n eventId = user.eid === undefined ? user.token.eid : user.eid;\r\n }\r\n if (user && !languageCode) {\r\n languageCode = user.userLang === undefined ? user.token.userLang : user.userLang;\r\n }\r\n if (!languageCode) languageCode = \"swe\";\r\n\r\n dispatch(languageActions.getAllCodesByEvent(eventId));\r\n dispatch(templateActions.getAll(eventId, true));\r\n dispatch(cmsActions.setEnviroment(sourceTypes.FORM, true, eventId, languageCode));\r\n dispatch(emailActions.getByEvent(eventId));\r\n dispatch(formActions.getAllPaths(eventId));\r\n dispatch(pageActions.getAllPaths(eventId));\r\n dispatch(systemLabelActions.getGroup(languageCode, \"Form.Edit\"));\r\n dispatch(formActions.get(match.params.id, true));\r\n }\r\n }\r\n toggleConditionModal = (conditionAction) => {\r\n this.setState({\r\n isConditionModalOpen: !this.state.isConditionModalOpen,\r\n conditionAction,\r\n });\r\n };\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.form !== this.props.form && this.props.form !== undefined && this.props.template.template === undefined) {\r\n if (this.props.form.survey == true && this.props.form.survey != this.state.isSurvey) {\r\n this.setState({ isSurvey: true });\r\n }\r\n const { dispatch } = this.props;\r\n\r\n //get temp from all templates that was loaded before!\r\n if (this.props.form.templateId) {\r\n dispatch(templateActions.get(this.props.form.templateId));\r\n }\r\n if (this.props.form.eventId > 0) {\r\n dispatch(elementActions.getAll(this.props.form.eventId));\r\n }\r\n }\r\n if (\r\n this.props.elements !== undefined &&\r\n this.props.form.formId > 0 &&\r\n /* this.props.language.loading === false && */\r\n this.props.template.template !== undefined &&\r\n this.state.loaded === false\r\n ) {\r\n this.setState({ loaded: true });\r\n }\r\n }\r\n\r\n sortElements = (result) => {\r\n const { destination, source, draggableId } = result;\r\n const { dispatch, form } = this.props;\r\n const newForm = deepClone(form);\r\n\r\n const sourceEl = newForm.formElements.find((el) => {\r\n return el.contentId === draggableId;\r\n });\r\n\r\n if (destination.index > source.index) {\r\n //if moved down\r\n newForm.formElements.map((el) => {\r\n if (el.page === sourceEl.page && el.parentId === sourceEl.parentId && el.sortOrder > source.index && el.sortOrder <= destination.index) {\r\n el.sortOrder -= 1;\r\n }\r\n\r\n if (el.contentId === sourceEl.contentId) {\r\n el.sortOrder = destination.index;\r\n }\r\n });\r\n } else if (destination.index < source.index) {\r\n newForm.formElements.map((el) => {\r\n if (el.page === sourceEl.page && el.parentId === sourceEl.parentId && el.sortOrder <= source.index && el.sortOrder >= destination.index) {\r\n el.sortOrder += 1;\r\n }\r\n if (el.contentId === sourceEl.contentId) {\r\n el.sortOrder = destination.index;\r\n }\r\n });\r\n }\r\n\r\n dispatch(formActions.softUpdate(newForm));\r\n };\r\n moveElement = (result) => {\r\n const { destination, source, draggableId } = result;\r\n const { dispatch, form, elements, event } = this.props;\r\n\r\n const elementInfo = draggableId.split(\":\");\r\n\r\n const newForm = Object.assign({}, form);\r\n const newFormElements = Array.from(newForm.formElements);\r\n\r\n newFormElements.sort((a, b) => {\r\n let x = a.sortOrder;\r\n let y = b.sortOrder;\r\n return y < x ? 1 : y > x ? -1 : 0;\r\n });\r\n\r\n if (elements === undefined) {\r\n return;\r\n }\r\n let elementList = [];\r\n try {\r\n elementList = Array.from(elements);\r\n } catch (error) {\r\n return;\r\n }\r\n\r\n let element = elementList.find((el) => {\r\n return el.id === parseInt(elementInfo[1]) && el.type === parseInt(elementInfo[0]);\r\n });\r\n\r\n newFormElements.map((el) => {\r\n if (el.sortOrder >= destination.index && el.page == form.currentPage && el.parentId === null) el.sortOrder += 1;\r\n });\r\n // let destinationTrack = null;\r\n\r\n //If element is type of container it won't be loaded from the server and need to be\r\n //managed through the containerHelper service\r\n //We are adding possible multiple container that need to relate to one and other at the same time\r\n //adjusting the base container to the current form state.\r\n if (element === undefined && parseInt(elementInfo[0]) === elementConstants.CONTAINER) {\r\n let newContainerElements = containerHelper.create(newForm, \"FORM\", elementInfo[1], destination.index);\r\n newForm.formElements = newFormElements.concat(newContainerElements);\r\n \r\n } else if (element === undefined && parseInt(elementInfo[0]) === elementConstants.PAYMENT_OPTIONS) {\r\n let newPaymentElement = paymentHelper.create(newForm, \"FORM\", elementInfo[1], destination.index);\r\n newForm.formElements = newFormElements.concat(newPaymentElement);\r\n } else if (element === undefined && parseInt(elementInfo[0]) === elementConstants.PRE_CONFIRMATION) {\r\n let newPreConfiramtionElement = preConfirmationHelper.create(newForm, \"FORM\", elementInfo[1], destination.index);\r\n\r\n newFormElements.push(newPreConfiramtionElement);\r\n newForm.formElements = newFormElements;\r\n } else if (element === undefined && parseInt(elementInfo[0]) === elementConstants.PROFILEIMAGE_UPLOAD) {\r\n let newProfileImageUploader = profileImageUploaderHelper.create(newForm, \"FORM\", elementInfo[1], destination.index);\r\n\r\n newFormElements.push(newProfileImageUploader);\r\n newForm.formElements = newFormElements;\r\n } else if (element === undefined && parseInt(elementInfo[0]) === elementConstants.DISCOUNT) {\r\n let newRebate = discountHelper.create(newForm, \"FORM\", elementInfo[1], destination.index);\r\n\r\n newFormElements.push(newRebate);\r\n newForm.formElements = newFormElements;\r\n } \r\n else if (element === undefined && parseInt(elementInfo[0]) === elementConstants.GROUP_REGISTRATION) {\r\n let newRebate = groupRegistrationHelper.create(newForm, \"FORM\", elementInfo[1], destination.index);\r\n\r\n newFormElements.push(newRebate);\r\n newForm.formElements = newFormElements;\r\n }\r\n else if (element === undefined && parseInt(elementInfo[0]) === elementConstants.FILE_UPLOADER) {\r\n let newFileUploader = fileUploadHelper.create(newForm, \"FORM\", elementInfo[1], destination.index);\r\n\r\n newFormElements.push(newFileUploader);\r\n newForm.formElements = newFormElements;\r\n }\r\n else if (element === undefined && parseInt(elementInfo[0]) === elementConstants.CONTENT) {\r\n const selectedEl = content.find((el) => {\r\n return el.id === elementInfo[1];\r\n });\r\n\r\n let contentElement = contentHelper.create(newForm, sourceTypes.FORM, selectedEl, destination);\r\n\r\n newFormElements.push(contentElement);\r\n newForm.formElements = newFormElements;\r\n } else if (element) {\r\n element.sortOrder = destination.index;\r\n element.formId = form.formId;\r\n element.languageCode = form.languageCode;\r\n element.contentId = securityHelper.createGuid();\r\n element.page = form.currentPage;\r\n element.data = typeof element.data === \"object\" ? element.data : JSON.parse(element.data);\r\n\r\n newFormElements.push(element);\r\n newForm.formElements = newFormElements;\r\n }\r\n dispatch(formActions.softUpdate(newForm));\r\n };\r\n onDragEnd = (result) => {\r\n const { destination, source, draggableId } = result;\r\n const { form, elements, dispatch } = this.props;\r\n if (!destination) {\r\n return;\r\n } else if (elements === undefined) {\r\n return;\r\n } else if (destination.droppableId === source.droppableId && destination.index === source.index) {\r\n return;\r\n } else if (destination.droppableId === \"content\" && source.droppableId === \"content\") {\r\n this.sortElements(result);\r\n } else if (destination.droppableId.includes(\"content\") && source.droppableId.includes(\"sidebar\")) {\r\n this.moveElement(result);\r\n } else if (destination.droppableId.includes(\"column\") && source.droppableId.includes(\"sidebar\")) {\r\n const newForm = containerHelper.addTo(form, sourceTypes.FORM, elements, result);\r\n dispatch(formActions.softUpdate(newForm));\r\n const containerId = destination.droppableId.slice(destination.droppableId.lastIndexOf(\"-\") + 1, destination.droppableId.length + 1);\r\n\r\n dispatch(cmsActions.containerToUpdate(containerId));\r\n } else if (destination.droppableId.includes(\"column\") && source.droppableId.includes(\"column\") && destination.droppableId === source.droppableId) {\r\n let newForm = containerHelper.sort(form, result);\r\n dispatch(formActions.softUpdate(newForm));\r\n } else if (\r\n (!source.droppableId.includes(\"sidebar\") && destination.droppableId.includes(\"content\") && source.droppableId.includes(\"column\")) ||\r\n (destination.droppableId.includes(\"column\") && source.droppableId.includes(\"content\")) ||\r\n (destination.droppableId.includes(\"column\") && source.droppableId.includes(\"column\"))\r\n ) {\r\n let newForm = containerHelper.move(form, sourceTypes.FORM, result);\r\n dispatch(formActions.softUpdate(newForm));\r\n }\r\n };\r\n onDragStart = (result) => {\r\n //anroppa func\r\n };\r\n\r\n toggleEditor = (editor) => {\r\n this.setState({ [editor]: !this.state[editor] });\r\n };\r\n render() {\r\n const { alert, form } = this.props;\r\n\r\n const { loaded } = this.state;\r\n return (\r\n \r\n {!loaded && \r\n \r\n
\r\n {!this.state.asideOpen &&
this.toggleEditor(\"asideOpen\")} />}\r\n\r\n \r\n \r\n (this.asideEditorRef = r)}>\r\n
\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n ) : null}\r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { user } = state.authentication;\r\n return {\r\n user,\r\n alert: state.alert,\r\n form: state.form,\r\n template: state.template,\r\n elements: state.element.elements,\r\n language: state.language,\r\n systemLabel: state.systemLabel,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(FormLayout);\r\n","import React from \"react\";\r\n\r\nclass JirangoLink extends React.Component {\r\n state = {\r\n mouseOver: false\r\n }\r\n mouseEnter = () => {\r\n this.setState({ mouseOver: true });\r\n }\r\n mouseLeave = () => {\r\n this.setState({ mouseOver: false });\r\n }\r\n render() {\r\n const { style, children, onClick, disabled } = this.props;\r\n let linkStyle = this.state.mouseOver ?\r\n {\r\n ...style,\r\n color: style[\"&:hover\"].color,\r\n textDecoration: style[\"&:hover\"].textDecoration,\r\n cursor: 'pointer'\r\n\r\n } : style;\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n\r\n};\r\nexport default JirangoLink;\r\n","import React from 'react';\r\nimport { Row, Col } from 'reactstrap';\r\nimport { Typography, IconButton, ListItem, ListItemAvatar, ListItemText, AppBar, Tooltip } from '@material-ui/core';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport ThumbUpIcon from '@material-ui/icons/ThumbUp';\r\n\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport Avatar from '@material-ui/core/Avatar';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport './ChatStyle.css'\r\n\r\nimport AddRoundedIcon from '@material-ui/icons/AddRounded';\r\n\r\nimport ForumTwoToneIcon from '@material-ui/icons/ForumTwoTone';\r\nimport { toKebabCase } from '../../../../helpers/cssHelper';\r\nimport { formatTime } from './timehelper';\r\nimport SystemLabel from '../../../../system/SystemLabel/SystemLabel';\r\n\r\n\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n grow: {\r\n flexGrow: 1,\r\n },\r\n menuButton: {\r\n marginRight: theme.spacing(2),\r\n },\r\n title: {\r\n display: 'none',\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'block',\r\n },\r\n },\r\n root: {\r\n padding: '2px 4px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '100%',\r\n borderBottom: '1px solid gainsboro'\r\n },\r\n input: {\r\n marginLeft: theme.spacing(1),\r\n flex: 1,\r\n },\r\n iconButton: {\r\n padding: 10,\r\n },\r\n divider: {\r\n height: 28,\r\n margin: 4,\r\n },\r\n sectionDesktop: {\r\n display: 'none',\r\n [theme.breakpoints.up('md')]: {\r\n display: 'flex',\r\n },\r\n },\r\n sectionMobile: {\r\n display: 'flex',\r\n [theme.breakpoints.up('md')]: {\r\n display: 'none',\r\n },\r\n },\r\n online: {\r\n background: '#44b700'\r\n },\r\n offline: {\r\n background: 'orangered'\r\n },\r\n}));\r\n\r\nexport default class ChatPlaceHolder extends React.Component {\r\n\r\n render() {\r\n const obj = this.props.template.content.interaction.chat;\r\n const primaryColor = obj.primaryColor;\r\n const secondaryColor = obj.secondaryColor;\r\n const badgePillColor = obj.badgePillColor;\r\n const sendButtonColor = obj.sendButtonColor;\r\n const container = obj.container;\r\n const content = obj.content;\r\n const messagesStyle = obj.messages;\r\n const header = obj.header;\r\n const footer = obj.footer;\r\n /* const content = { background: obj.background, borderRadius: obj.borderRadius, borderWidth: obj.borderWidth, borderColor: obj.borderColor };\r\n const text = { fontFamily: obj.fontFamily, fontWeight: obj.fontWeight, fontSize: obj.fontSize, color: obj.color }; */\r\n\r\n\r\n const { template } = this.props;\r\n const exampleMessages = [\r\n { fromYou: false, name: 'John Doe' },\r\n { fromYou: true, name: 'Jimmy Hendrix' }\r\n ]\r\n return (\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n John Doe\r\n
\r\n\r\n Big Company\r\n
}\r\n />\r\n \r\n \r\n \r\n 10} >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {exampleMessages.map((m, i) => {\r\n return (\r\n
\r\n null}\r\n fromYou={m.fromYou}\r\n lang={'swe'}\r\n style={messagesStyle}\r\n />\r\n
\r\n )\r\n })}\r\n
\r\n
\r\n
\r\n null} />\r\n
\r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n\r\nexport function ChatBox({ message = '', id, timeStamp, name, size, onLike, likes = 0, clientKey = null, fromYou = false, last = false, first = false, lang = 'swe', style = null }) {\r\n return (\r\n \r\n {first ?
\r\n {fromYou ? (first ? \r\n : name)} \r\n
\r\n \r\n\r\n {/* {!fromYou && last ? :
} */}\r\n\r\n {message.toString() == 'THUMB_UP' ?\r\n
\r\n : \r\n {message.toString().replace('*!', '')}\r\n {likes > 0 ?
: null}\r\n
onLike(id)}>\r\n
: null}\r\n\r\n {/* {fromYou && last ? :
} */}\r\n \r\n
\r\n {timeStamp ? \r\n
: null}\r\n \r\n )\r\n}\r\n\r\n","import React from \"react\";\r\nimport { Row, Col, Input, Table, Label, FormGroup, Card } from \"reactstrap\";\r\nimport { connect } from \"react-redux\";\r\nimport JirangoButton from \"../../../../components/UI/Buttons/JirangoButton\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport JirangoLink from \"../../../../components/UI/Buttons/JirangoLink\";\r\nimport Highcharts from \"highcharts\";\r\nimport HighchartsReact from \"highcharts-react-official\";\r\nimport { ListItem, ListItemAvatar, Typography, List } from \"@material-ui/core\";\r\nimport PeopleIcon from \"@material-ui/icons/People\";\r\nimport ChatPlaceHolder from \"../../placeholders/ChatPlaceholder\";\r\nimport { ExhibitorPlaceholder } from \"../../placeholders/ExhibitorPlaceholder\";\r\n\r\nfunction DemoChart(c) {\r\n const { colors } = c;\r\n const options = {\r\n chart: {\r\n backgroundColor: \"transparent\",\r\n plotBorderWidth: null,\r\n plotShadow: false,\r\n plotBackgroundColor: \"transparent\",\r\n type: \"column\",\r\n },\r\n title: {\r\n text: \"Monthly Average Rainfall\",\r\n },\r\n xAxis: {\r\n categories: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\r\n crosshair: true,\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: \"Rainfall (mm)\",\r\n },\r\n },\r\n tooltip: {\r\n headerFormat: '{point.key} ',\r\n pointFormat: '{series.name}: ' + '{point.y:.1f} mm
\",\r\n shared: true,\r\n useHTML: true,\r\n },\r\n plotOptions: {\r\n column: {\r\n pointPadding: 0.2,\r\n borderWidth: 0,\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"Tokyo\",\r\n color: colors.color1,\r\n data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\r\n },\r\n {\r\n name: \"New York\",\r\n color: colors.color2,\r\n data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],\r\n },\r\n {\r\n name: \"London\",\r\n color: colors.color3,\r\n data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],\r\n },\r\n {\r\n name: \"Berlin\",\r\n color: colors.color4,\r\n data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1],\r\n },\r\n {\r\n name: \"Stockholm\",\r\n color: colors.color5,\r\n data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1],\r\n },\r\n ],\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nconst navigationGroupPlaceholder = (template) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n {\"\"} \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {\" \"}\r\n {\"\"} \r\n \r\n Default button {\" \"}\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst inputGroupPlaceholder = (template) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n {\"\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n {\"\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n {'\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst textGroupPlaceholder = (template) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {\"\"} \r\n \r\n Default Title \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {\"\"} \r\n \r\n \r\n Default Label \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {\"\"} \r\n \r\n Default subtitle \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {\"\"}
\r\n \r\n \r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non nulla nec nibh porttitor aliquam non nec ex. Aliquam erat volutpat. Aenean nec faucibus nisi. Quisque at arcu ac\r\n neque lobortis commodo. Morbi sodales tincidunt ultricies. Sed finibus felis sit amet tortor tristique sodales. Nulla sed ornare massa. Mauris nibh neque, laoreet at mauris sollicitudin,\r\n bibendum dictum tellus.\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\nconst connectionPlaceholder = (template) => {\r\n const obj = template.content.interaction.connections;\r\n const content = { background: obj.background, borderRadius: obj.borderRadius, borderWidth: obj.borderWidth, borderColor: obj.borderColor };\r\n const text = { fontFamily: obj.fontFamily, fontWeight: obj.fontWeight, fontSize: obj.fontSize, color: obj.color };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 77\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst agendaPlaceholder = (template) => {\r\n const obj = template.content.interaction.agenda;\r\n const content = obj.content;\r\n const title = obj.title;\r\n const row = obj.row;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Agenda 1
\r\n \r\n
\r\n \r\n I normalt läge
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Agenda 2
\r\n \r\n
\r\n \r\n I aktivt läge
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Agenda 3
\r\n \r\n
\r\n \r\n I passerat läge
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n};\r\nclass PlaceholderContent extends React.Component {\r\n render() {\r\n const { template } = this.props;\r\n if (template === undefined) return null;\r\n return (\r\n \r\n {textGroupPlaceholder(template)}\r\n \r\n \r\n \r\n {\", , \"}\r\n \r\n \r\n \r\n \r\n Company \r\n Contact \r\n Country \r\n \r\n \r\n \r\n \r\n Alfreds Futterkiste \r\n Maria Anders \r\n Germany \r\n \r\n \r\n Centro comercial Moctezuma \r\n Francisco Chang \r\n Mexico \r\n \r\n \r\n Ernst Handel \r\n Roland Mendel \r\n Austria \r\n \r\n \r\n Island Trading \r\n Helen Bennett \r\n UK \r\n \r\n \r\n Laughing Bacchus Winecellars \r\n Yoshi Tannamuri \r\n Canada \r\n \r\n \r\n Magazzini Alimentari Riuniti \r\n Giovanni Rovelli \r\n Italy \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n alert: state.alert,\r\n template: state.template.template,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(PlaceholderContent);\r\n","import React, { Component, Suspense } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport { DragDropContext } from \"react-beautiful-dnd\";\r\nimport { Container } from \"reactstrap\";\r\n\r\nimport {\r\n AppAside,\r\n} from \"@coreui/react\";\r\n\r\n//Lazy load this\r\nimport { languageActions } from \"../../../../../store/actions/system/language/language.action\";\r\nimport Notifier from \"../../../../../components/UI/Notifier/Notifier\";\r\nimport { systemLabelActions } from \"../../../../../store/actions/system/systemLabel/systemLabel.action\";\r\nimport PlaceholderContent from \"../../components/PlaceholderContent/PlaceholderContent\";\r\nimport TemplateWrapper from \"./TemplateWrapper\";\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { cmsActions } from \"../../../../../store/actions/cms/cms.action\";\r\nimport EditorSidebar from \"../../../../components/editor/EditorSidebar/EditorSidebar\";\r\nimport { templateHelper } from \"../../helpers/templateHelper\";\r\nimport { getKey } from \"../../../../../helpers/UrlHelper\";\r\n\r\nclass TemplateLayout extends React.Component {\r\n state = {\r\n sidebarOpen: true,\r\n asideOpen: true\r\n }\r\n loading = () => (\r\n Loading...
\r\n );\r\n componentDidMount() {\r\n const { dispatch, user, match } = this.props;\r\n if (user) {\r\n let eventId = null;\r\n let languageCode = null;\r\n if (window.location.search) {\r\n const params = new URLSearchParams(window.location.search);\r\n let unparsedEventId = params.get(getKey(\"eventId\", params));\r\n if (unparsedEventId) eventId = parseInt(unparsedEventId)\r\n languageCode = params.get(getKey(\"languageCode\", params));\r\n }\r\n if (user && !eventId) {\r\n eventId = user.eid === undefined ? user.token.eid : user.eid;\r\n }\r\n if (user && !languageCode) {\r\n languageCode = user.userLang === undefined ? user.token.userLang : user.userLang;\r\n }\r\n if (!languageCode) languageCode = \"swe\";\r\n dispatch(languageActions.getAllCodesByEvent(eventId));\r\n dispatch(templateActions.get(match.params.id));\r\n dispatch(cmsActions.setEnviroment(sourceTypes.TEMPLATE, true, eventId, languageCode));\r\n dispatch(systemLabelActions.getGroup(languageCode, \"Template.Edit\"));\r\n }\r\n }\r\n onDragEnd = result => {\r\n templateHelper.onDragEnd(result)\r\n }\r\n toggleEditor = (editor) => {\r\n this.setState({ [editor]: !this.state[editor] })\r\n }\r\n render() {\r\n const { alert, form, template } = this.props;\r\n return (\r\n \r\n {template && (\r\n \r\n \r\n
\r\n
\r\n \r\n this.asideEditorRef = r}>\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { user } = state.authentication;\r\n return {\r\n user,\r\n alert: state.alert,\r\n form: state.form,\r\n event: state.event,\r\n template: state.template\r\n };\r\n}\r\nexport default connect(mapStateToProps)(TemplateLayout);\r\n","import React from 'react';\r\nimport { Col } from 'reactstrap';\r\n\r\nexport const InnerElementWrapper = (props) => {\r\n const { selectedElement, targetElement, selectedContainer, children } = props;\r\n return (\r\n \r\n {children}\r\n \r\n )\r\n}","import React from 'react';\r\n\r\nexport const DragHandleDistractor = (props) => {\r\n const { dragHandleProps } = props;\r\n return (\r\n \r\n {placeholder}\r\n \r\n );\r\n } else {\r\n return {placeholder}
;\r\n }\r\n };\r\n render() {\r\n const { page } = this.props;\r\n const { template } = this.props.template;\r\n const sortedElements = this.sortElements();\r\n return (\r\n \r\n {/*
*/}\r\n
this.onDeselect()} c */ className=\"animated fadeIn\">\r\n
(this.elementContainerRef = r)}>\r\n
\r\n {(provided, snapshot) => {\r\n return (\r\n \r\n {sortedElements.map((el, index) => {\r\n return (\r\n \r\n
\r\n {(provided, snapshot) => (\r\n \r\n \r\n \r\n \r\n this.onSelect(el)}\r\n >\r\n {renderElement(el.type, el, this.disableDropZone)}\r\n \r\n\r\n \r\n
\r\n \r\n )}\r\n \r\n {/* {(sortedElements[index + 1] !== undefined && sortedElements[index + 1].type) ||\r\n el.type === elementConstants.CONTAINER ?
: null} */}\r\n
\r\n );\r\n }}\r\n \r\n
\r\n
\r\n
\r\n {!loaded && \r\n \r\n
\r\n\r\n
\r\n \r\n this.asideEditorRef = r}>\r\n
\r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { user } = state.authentication;\r\n return {\r\n user,\r\n alert: state.alert,\r\n page: state.page,\r\n template: state.template,\r\n language: state.language,\r\n systemLabel: state.systemLabel\r\n };\r\n}\r\nexport default connect(mapStateToProps)(PageEditorLayout);\r\n","import React from \"react\";\r\nimport { Droppable, Draggable } from \"react-beautiful-dnd\";\r\nimport { connect } from \"react-redux\";\r\nimport { emailHelper } from \"../../helper/email.helper\";\r\nimport { elementConstants } from \"../../../../../constants/cms/form/element/element.constants\";\r\nimport { DragContainer } from \"../../../../components/UI/DragContainer/DragContainer\";\r\nimport { DropArea } from \"../../../../components/UI/DropArea/DropArea\";\r\nimport { ElementOverlay, ElementOverlayEmail } from \"../../../../components/element/Overlay/ElementOverlay\";\r\nimport { progressiveEnhancementInnerContent } from \"../../models/cerberus/progressiveEnhancement\";\r\nimport { cssResetInnerContent } from \"../../models/cerberus/cssReset\";\r\n\r\nimport styled from \"styled-components\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport validateColor from \"validate-color\";\r\n\r\nexport const EmailDropArea = styled.table`\r\n background-color: ${(props) => (props.isDraggingOver ? \"#00000005\" : \"inherit\")}\r\n margin: auto;\r\n`;\r\nexport const EmailDragContainer = styled.tr`\r\n background-color: ${(props) => (props.isDragging ? \"#e7f9ff\" : props.backgroundColor)};\r\n`;\r\n\r\nexport const EmailDropAreaContainer = styled.tr`\r\nbackground-color: ${(props) => (props.isDraggingOver ? \"#28a74563\" : \"inherit\")}\r\nborder: ${(props) => (props.isDraggingOver ? \"1px dashed #28a745\" : \"inherit\")}\r\n`;\r\n\r\nclass EmailContent extends React.Component {\r\n componentDidMount() {\r\n document.addEventListener(\"click\", this.handleClick, false);\r\n }\r\n componentWillUnmount() {\r\n document.removeEventListener(\"click\", this.handleClick, false);\r\n }\r\n handleClick = (e) => {\r\n if (this.elementContainerRef.contains(e.target) || (this.props.asideEditorRef && this.props.asideEditorRef.contains(e.target))) {\r\n return;\r\n } else if (this.props.cms.deselectionBlocked) {\r\n return;\r\n } else {\r\n this.onDeselect();\r\n }\r\n };\r\n onDeselect = () => {\r\n const { dispatch } = this.props;\r\n dispatch(emailActions.deselect());\r\n };\r\n onSelect = (element) => {\r\n const { dispatch } = this.props;\r\n dispatch(emailActions.select(element));\r\n };\r\n onDelete = (element) => {\r\n const { dispatch } = this.props;\r\n dispatch(emailActions.remove(element));\r\n };\r\n selectedBorderStyle = (el) => {\r\n if (el.type === elementConstants.CONTAINER) return \"1px solid #28a74563\";\r\n else return \"1px solid #5593dc94\";\r\n };\r\n render() {\r\n const { elements, selectedElement } = this.props.email;\r\n const { template } = this.props;\r\n const sortedElements = emailHelper.sortElements(elements, null, true);\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n
*/}\r\n (this.elementContainerRef = r)} */ align=\"center\"\r\n role=\"presentation\"\r\n style={{ margin: \"0px auto\", maxWidth: \"680px\" /* backgroundColor: template ? template.content.content.backgroundColor : '#fff' */ }}\r\n className=\"email-container\"\r\n >\r\n (this.elementContainerRef = r)} align=\"center\" role=\"presentation\" cellSpacing=\"0\" cellPadding=\"0\" border=\"0\" width=\"680\" style={{ position: \"relative\" }}>\r\n \r\n \r\n \r\n \r\n {(provided, snapshot) => {\r\n return (\r\n \r\n \r\n {sortedElements.map((el, index) => {\r\n return (\r\n \r\n {(provided, snapshot) => (\r\n 0}\r\n >\r\n \r\n \r\n \r\n this.onSelect(el)}>\r\n \r\n \r\n {emailHelper.renderElement(el)} \r\n
\r\n \r\n \r\n \r\n {selectedElement && el.id === selectedElement.id ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n ) : null}\r\n
\r\n \r\n\r\n \r\n {provided.placeholder} \r\n \r\n ) : (\r\n \r\n {provided.placeholder} \r\n \r\n )}\r\n \r\n \r\n );\r\n }}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {!loaded && \r\n \r\n
\r\n
\r\n (this.asideEditorRef = r)}>\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { user } = state.authentication;\r\n return {\r\n user,\r\n email: state.email,\r\n inherit: state.email.inherit,\r\n template: state.template.template,\r\n language: state.language,\r\n lastFetched: state.email.lastFetched,\r\n systemLabel: state.systemLabel,\r\n };\r\n}\r\nexport default connect(mapStateToProps)(EmailEditor);\r\n","import * as React from 'react';\r\nimport Draggable, { DraggableEventHandler } from 'react-draggable';\r\nimport { ResizeCallback, ResizableDirection, NumberSize, Resizable } from 're-resizable'\r\nimport { Rnd } from 'react-rnd'\r\nimport './MeetingModule.css';\r\n\r\nconst style = {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n border: \"solid 1px #ddd\",\r\n background: \"#f0f0f0\"\r\n};\r\n\r\nclass MeetingModule extends React.Component {\r\n state = {\r\n onLoadPosition: undefined\r\n }\r\n componentDidMount() {\r\n const onLoadPosition = {\r\n x: this.props.position.x,\r\n y: this.props.position.y\r\n }\r\n this.setState({ onLoadPosition: onLoadPosition });\r\n }\r\n onDragStop = (e, data) => {\r\n this.setState({ onLoadPosition: undefined });\r\n const { module } = this.props;\r\n this.props.onChange(\"position\", module.digitalMeetingItemId, { x: data.x, y: data.y, zIndex: this.props.position.zIndex });\r\n }\r\n onResizeStop = (e, direction, ref, delta) => {\r\n const { module } = this.props;\r\n let w = Math.round(window.innerWidth * (this.props.size.width / 100));\r\n let h = Math.round(window.innerHeight * (this.props.size.height / 100));\r\n\r\n this.props.onChange(\"size\", module.digitalMeetingItemId, {\r\n width: Math.round(((delta.width + w) / window.innerWidth) * 100),\r\n height: Math.round(((delta.height + h) / window.innerHeight) * 100)\r\n });\r\n }\r\n render() {\r\n const { name, onSelect, position, index, size, settings, onChange, isDisabled = false, module } = this.props;\r\n\r\n const disableDrag = isDisabled ? {\r\n top: false,\r\n right: false,\r\n bottom: false,\r\n left: false,\r\n topRight: false,\r\n bottomRight: false,\r\n bottomLeft: false,\r\n topLeft: false\r\n } : {\r\n top: true,\r\n right: true,\r\n bottom: true,\r\n left: true,\r\n topRight: true,\r\n bottomRight: true,\r\n bottomLeft: true,\r\n topLeft: true\r\n };\r\n\r\n return (\r\n onSelect(id)} */\r\n >\r\n \r\n {name}\r\n \r\n\r\n \r\n )\r\n }\r\n}\r\nexport default MeetingModule;","import React, { Component, Suspense } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport Axios from 'axios';\r\nimport MeetingModule from \"../../components/MeetingModule\";\r\nimport { Container } from \"reactstrap\";\r\nimport { systemLabelActions } from \"../../../../../store/actions/system/systemLabel/systemLabel.action\";\r\nimport EditorSidebar from \"../../../../components/editor/EditorSidebar/EditorSidebar\";\r\nimport { AppAside } from \"@coreui/react\";\r\nimport { cmsActions } from \"../../../../../store/actions/cms/cms.action\";\r\nimport { sourceTypes } from \"../../../../../constants/cms/sourceType\";\r\nimport { templateActions } from \"../../../../../store/actions/cms/template/template.action\";\r\nimport TemplateWrapper from \"../../../template/containers/TemplateLayout/TemplateWrapper\";\r\nimport { DragDropContext } from \"react-dnd\";\r\n\r\n\r\nclass MeetingEditorLayout extends React.Component {\r\n state = {\r\n modules: []\r\n };\r\n componentDidMount() {\r\n const { dispatch, user, match } = this.props;\r\n if (user) {\r\n const eventId = match.params.id;\r\n const userLang = user.userLang === undefined ? user.token.userLang : user.userLang;\r\n dispatch(cmsActions.setEnviroment(sourceTypes.MEETING, true, eventId));\r\n /* dispatch(templateActions.getDefaultTemplateByEvent(eventId)); */\r\n this.getModules(eventId)\r\n if (user && userLang) {\r\n dispatch(systemLabelActions.getGroup(user.userLang, \"Meeting.Edit\"));\r\n }\r\n }\r\n }\r\n getModules = (eventId) => {\r\n Axios.get(`/api/meeting/${eventId}`)\r\n .then(res => {\r\n console.log(res.data)\r\n if (res.data.length > 0) {\r\n this.setState({\r\n modules: res.data,\r\n })\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err)\r\n })\r\n }\r\n deleteModule = (id) => {\r\n if (!id) return;\r\n const requestOptions = {\r\n method: \"DELETE\",\r\n headers: { \"Content-Type\": \"application/json\" },\r\n };\r\n\r\n return fetch(`/api/meeting/deletemodule/${id}`, requestOptions)\r\n .then(res => res.json())\r\n .then(data => {\r\n const modules = Array.from(\r\n this.state.modules.filter(m => m.digitalMeetingItemId !== data.deletedId)\r\n )\r\n this.setState({ modules });\r\n this.hubConnection\r\n .invoke(\"updateMeetingLayout\", modules, this.state.eventId)\r\n .catch((err) => {\r\n this.onError(err);\r\n });\r\n });\r\n }\r\n updateMeetingLayout = (modules) => {\r\n const requestOptions = {\r\n method: \"PUT\",\r\n headers: { \"Content-Type\": \"application/json\" },\r\n body: JSON.stringify(modules),\r\n };\r\n\r\n return fetch(`/api/meeting/`, requestOptions)\r\n .then(res => res.json())\r\n .then(data => {\r\n this.setState({\r\n modules: data,\r\n })\r\n /* this.hubConnection\r\n .invoke(\"updateMeetingLayout\", modules, this.state.eventId)\r\n .catch((err) => {\r\n this.onError(err);\r\n }); */\r\n /* setModules(data);\r\n setLoading(false);\r\n setHasChanged(false);\r\n props.updateMeetingLayout(data) */\r\n /* console.log(data) */\r\n });\r\n\r\n };\r\n\r\n onChange = (prop, id, settings) => {\r\n const modules = Array.from(this.state.modules)\r\n const index = modules.indexOf(modules.find(m => m.digitalMeetingItemId == id));\r\n if (index > -1) {\r\n if (prop === 'size') {\r\n modules[index].width = settings.width;\r\n modules[index].height = settings.height;\r\n }\r\n else if (prop === 'position') {\r\n modules[index].x = settings.x;\r\n modules[index].y = settings.y;\r\n }\r\n this.setState({ modules })\r\n }\r\n }\r\n\r\n\r\n\r\n render() {\r\n const { alert, page, template } = this.props;\r\n const { modules } = this.state;\r\n /* const { content } = template.template; */\r\n return (\r\n \r\n \r\n
\r\n
\r\n this.asideEditorRef = r}>\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {modules.length > 0 ? modules.filter(m => m.visible == true).map((m, i) => {\r\n return (\r\n \r\n \r\n )\r\n }) : null}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { user } = state.authentication;\r\n return {\r\n user,\r\n alert: state.alert,\r\n page: state.page,\r\n template: state.template,\r\n language: state.language,\r\n systemLabel: state.systemLabel\r\n };\r\n}\r\nexport default connect(mapStateToProps)(MeetingEditorLayout);\r\n","import { handleResponse } from \"../../helpers/handleresponse\";\r\nimport { authHeader } from \"../../helpers/authHeader\";\r\n\r\nexport const confirmationService = {\r\n create,\r\n createRange,\r\n update,\r\n deleteConfirmation, \r\n get, \r\n getByEvent,\r\n \r\n}\r\n\r\nasync function get(confirmationId) {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" })\r\n \r\n };\r\n return fetch(`./api/confirmation/${confirmationId}`, requestOptions)\r\n .then(handleResponse)\r\n .then(confirmation => {\r\n return confirmation;\r\n });\r\n }\r\n\r\n async function getByEvent(eventId, includeInherited) {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" })\r\n \r\n };\r\n return fetch(`./api/confirmation/event/${eventId}?includeInherited=${includeInherited}`, requestOptions)\r\n .then(handleResponse)\r\n .then(confirmationList => {\r\n return confirmationList\r\n });\r\n }\r\n async function update(confirmation) {\r\n const requestOptions = {\r\n method: \"PUT\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n body: JSON.stringify(confirmation)\r\n };\r\n \r\n return fetch(`./api/confirmation`, requestOptions)\r\n .then(handleResponse)\r\n .then(confirmation => {\r\n return confirmation;\r\n });\r\n }\r\n async function create(confirmation) {\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n body: JSON.stringify(confirmation)\r\n };\r\n \r\n return fetch(`./api/confirmation`, requestOptions)\r\n .then(handleResponse)\r\n .then(confirmation => {\r\n return confirmation;\r\n });\r\n }\r\n async function createRange(eventId, confirmations) {\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n body: JSON.stringify(confirmations)\r\n };\r\n \r\n return fetch(`./api/confirmation/range/${eventId}`, requestOptions)\r\n .then(handleResponse)\r\n .then(confirmations => {\r\n return confirmations;\r\n });\r\n }\r\n async function deleteConfirmation(confirmationId) {\r\n const requestOptions = {\r\n method: \"DELETE\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n };\r\n \r\n return fetch(`./api/communication/${confirmationId}`, requestOptions)\r\n .then(handleResponse)\r\n .then(_ => {\r\n return _;\r\n });\r\n }","import { confirmationConstants } from \"../../../constants/confirmation/confirmation.constants\";\r\nimport { alertActions } from \"../alert.action\";\r\nimport { history } from \"../../../helpers/history\";\r\nimport { confirmationService } from \"../../../services/confirmation/confirmation.service\";\r\n\r\n\r\nexport const confirmationActions = {\r\n update,\r\n get,\r\n getByEvent,\r\n create,\r\n createRange,\r\n deleteConfirmation,\r\n};\r\n\r\nfunction get(confirmationId) {\r\n return dispatch => {\r\n dispatch(request({}));\r\n dispatch(alertActions.clear());\r\n confirmationService.get(confirmationId).then(\r\n confirmation => {\r\n dispatch(success(confirmation));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: confirmationConstants.GET_CONFIRMATION_REQUEST };\r\n }\r\n function success(confirmation) {\r\n return {\r\n type: confirmationConstants.GET_CONFIRMATION_SUCCESS,\r\n confirmation\r\n };\r\n }\r\n function failure(error) {\r\n return {\r\n type: confirmationConstants.GET_CONFIRMATION_FAILURE,\r\n error\r\n };\r\n }\r\n}\r\n\r\nfunction getByEvent(eventId, includeInherited = false) {\r\n return dispatch => {\r\n dispatch(request({}));\r\n dispatch(alertActions.clear());\r\n confirmationService.getByEvent(eventId, includeInherited).then(\r\n confirmationList => {\r\n dispatch(success(confirmationList));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: confirmationConstants.GET_CONFIRMATION_LIST_REQUEST };\r\n }\r\n function success(confirmationList) {\r\n return {\r\n type: confirmationConstants.GET_CONFIRMATION_LIST_SUCCESS,\r\n confirmationList\r\n };\r\n }\r\n function failure(error) {\r\n return {\r\n type: confirmationConstants.GET_CONFIRMATION_LIST_FAILURE,\r\n error\r\n };\r\n }\r\n}\r\n\r\nfunction create(confirmation) {\r\n return dispatch => {\r\n dispatch(request({}));\r\n dispatch(alertActions.clear());\r\n confirmationService.create(confirmation).then(\r\n confirmation => {\r\n dispatch(success(confirmation));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: confirmationConstants.CREATE_CONFIRMATION_REQUEST };\r\n }\r\n function success(confirmation) {\r\n return {\r\n type: confirmationConstants.CREATE_CONFIRMATION_SUCCESS,\r\n confirmation\r\n };\r\n }\r\n function failure(error) {\r\n return {\r\n type: confirmationConstants.CREATE_CONFIRMATION_FAILURE,\r\n error\r\n };\r\n }\r\n}\r\nfunction createRange(eventId, confirmations) {\r\n return dispatch => {\r\n dispatch(request({}));\r\n dispatch(alertActions.clear());\r\n\r\n confirmationService.createRange(eventId, confirmations).then(\r\n confirmations => {\r\n dispatch(success(confirmations));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: confirmationConstants.CREATE_CONFIRMATION_RANGE_REQUEST };\r\n }\r\n function success(confirmations) {\r\n return {\r\n type: confirmationConstants.CREATE_CONFIRMATION_RANGE_SUCCESS,\r\n confirmations\r\n };\r\n }\r\n function failure(error) {\r\n return {\r\n type: confirmationConstants.CREATE_CONFIRMATION_RANGE_FAILURE,\r\n error\r\n };\r\n }\r\n}\r\nfunction update(confirmation) {\r\n return dispatch => {\r\n dispatch(request({}));\r\n dispatch(alertActions.clear());\r\n confirmationService.update(confirmation).then(\r\n confirmation => {\r\n dispatch(success(confirmation));\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: confirmationConstants.UPDATE_CONFIRMATION_REQUEST };\r\n }\r\n function success(confirmation) {\r\n return {\r\n type: confirmationConstants.UPDATE_CONFIRMATION_SUCCESS,\r\n confirmation\r\n };\r\n }\r\n function failure(error) {\r\n return {\r\n type: confirmationConstants.UPDATE_CONFIRMATION_FAILURE,\r\n error\r\n };\r\n }\r\n}\r\n\r\nfunction deleteConfirmation(confirmationId) {\r\n return dispatch => {\r\n dispatch(request({}));\r\n dispatch(alertActions.clear());\r\n confirmationService.deleteConfirmation(confirmationId).then(\r\n _ => {\r\n dispatch(success());\r\n },\r\n error => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n };\r\n\r\n function request() {\r\n return { type: confirmationConstants.DELETE_CONFIRMATION_REQUEST };\r\n }\r\n function success() {\r\n return {\r\n type: confirmationConstants.DELETE_CONFIRMATION_SUCCESS,\r\n\r\n };\r\n }\r\n function failure(error) {\r\n return {\r\n type: confirmationConstants.DELETE_CONFIRMATION_FAILURE,\r\n error\r\n };\r\n }\r\n}","import { handleResponse } from \"../../helpers/handleresponse\";\r\nimport { authHeader } from \"../../helpers/authHeader\";\r\n\r\nexport const attendeeService = {\r\n getOrdersByBadgeNo, \r\n}\r\n\r\nasync function getOrdersByBadgeNo(badgeNo) {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" })\r\n \r\n };\r\n return fetch(`./api/attendee/${badgeNo}`, requestOptions)\r\n .then(handleResponse)\r\n .then(orderList => {\r\n return orderList;\r\n });\r\n }","import { attendeeConstants } from \"../../../constants/attendee/attendee.constants\";\r\nimport { alertActions } from \"../alert.action\";\r\nimport { history } from \"../../../helpers/history\";\r\nimport { store } from \"../../../store/configureStore\";\r\nimport { attendeeService } from \"../../../services/attendee/attendee.service\";\r\nimport { authHeader } from \"../../../helpers/authHeader\";\r\nimport { handleResponse } from \"../../../helpers/handleresponse\";\r\n\r\nexport const attendeeActions = {\r\n getOrdersByBadgeNo,\r\n updateOrder,\r\n createOrder,\r\n setPayMethod,\r\n updateSqlState,\r\n setActivePersonNo,\r\n removeOrder,\r\n updateDiscounts,\r\n setLeader\r\n};\r\n\r\nfunction setLeader(no) {\r\n return (dispatch) => {\r\n dispatch(success(no));\r\n };\r\n function success(no) {\r\n return {\r\n type: attendeeConstants.SET_LEADER,\r\n activePersonNo: no,\r\n };\r\n }\r\n}\r\n\r\nfunction removeOrder(no) {\r\n return (dispatch) => {\r\n dispatch(success(no));\r\n };\r\n function success(no) {\r\n return {\r\n type: attendeeConstants.REMOVE_ORDER,\r\n activePersonNo: no,\r\n };\r\n }\r\n}\r\n\r\nfunction setActivePersonNo(no) {\r\n return (dispatch) => {\r\n dispatch(success(no));\r\n };\r\n function success(no) {\r\n return {\r\n type: attendeeConstants.SET_ACTIVE_PERSON_NO,\r\n activePersonNo: no,\r\n };\r\n }\r\n}\r\n\r\nfunction getOrdersByBadgeNo(badgeNo) {\r\n return (dispatch) => {\r\n dispatch(request({}));\r\n dispatch(alertActions.clear());\r\n if (badgeNo) {\r\n attendeeService.getOrdersByBadgeNo(badgeNo).then(\r\n (orderList) => {\r\n dispatch(success(orderList));\r\n },\r\n (error) => {\r\n dispatch(failure(error));\r\n dispatch(alertActions.error(error));\r\n }\r\n );\r\n } else {\r\n dispatch(success([]));\r\n }\r\n };\r\n\r\n function request() {\r\n return { type: attendeeConstants.GET_ATTENDEE_LIST_REQUEST };\r\n }\r\n function success(orderList) {\r\n return {\r\n type: attendeeConstants.GET_ATTENDEE_LIST_SUCCESS,\r\n orderList,\r\n };\r\n }\r\n function failure(error) {\r\n return {\r\n type: attendeeConstants.GET_ATTENDEE_LIST_FAILURE,\r\n error,\r\n };\r\n }\r\n}\r\n\r\nfunction createOrder(newOrder) {\r\n return (dispatch) => {\r\n dispatch({\r\n type: attendeeConstants.CREATE_ORDER,\r\n newOrder,\r\n });\r\n };\r\n}\r\nvar updateSqlStateTimeout;\r\n\r\nfunction updateDiscounts(discounts, activePersonNo) {\r\n updateSqlStateTimeout = setTimeout(updateSqlState, 500);\r\n return (dispatch) => {\r\n dispatch({\r\n type: attendeeConstants.UPDATE_DISCOUNT,\r\n discounts,\r\n activePersonNo,\r\n });\r\n };\r\n}\r\n\r\nfunction updateOrder(updatedOrder, activePersonNo) {\r\n const form = store.getState().form;\r\n updatedOrder.sqlStateNo = form.sqlStateNo;\r\n updatedOrder.formId = form.formId;\r\n updatedOrder.eventId = form.eventId;\r\n updatedOrder.languageCode = form.languageCode;\r\n if (!updatedOrder.orderRow) {\r\n updatedOrder.orderRow = [];\r\n }\r\n\r\n console.log(updatedOrder.orderRow)\r\n //gör clientuträkning\r\n if (!updatedOrder.orderRow.find((row) => row.eventId === form.eventId)) {\r\n updatedOrder.orderRow.push({\r\n amount: form.eventPrice ? form.eventPrice : 0,\r\n comment: \"\",\r\n discount: 0,\r\n eventId: form.eventId,\r\n orderId: -1,\r\n orderRowId: updatedOrder.orderRow.length * -1,\r\n quantity: 1,\r\n status: null,\r\n vatPercent: form.eventVatPercent ? form.eventVatPercent : 0,\r\n deleted: false,\r\n });\r\n }\r\n if (updateSqlStateTimeout) {\r\n clearTimeout(updateSqlStateTimeout);\r\n }\r\n updateSqlStateTimeout = setTimeout(updateSqlState, 500);\r\n\r\n return (dispatch) => {\r\n dispatch({\r\n type: attendeeConstants.UPDATE_ORDER,\r\n updatedOrder,\r\n activePersonNo,\r\n });\r\n };\r\n}\r\nfunction updateSqlState() {\r\n const { attendee, form } = store.getState();\r\n\r\n let storageStates = localStorage.getItem(\"formstates\");\r\n let formStates = undefined;\r\n if (storageStates) {\r\n formStates = JSON.parse(storageStates);\r\n } else {\r\n formStates = [];\r\n }\r\n var state = formStates.find((fs) => fs.formId === form.formId && fs.expires > Date.now());\r\n if (state) {\r\n state.expires = Date.now() + 1800000;\r\n } else {\r\n formStates.push({\r\n formId: form.formId,\r\n sqlStateNo: form.sqlStateNo,\r\n expires: Date.now() + 1800000,\r\n });\r\n }\r\n\r\n formStates = formStates.filter((fs) => fs.expires > Date.now());\r\n localStorage.setItem(\"formstates\", JSON.stringify(formStates));\r\n let body = {\r\n eventId: form.eventId,\r\n sqlStateNo: form.sqlStateNo,\r\n stateString: JSON.stringify(attendee),\r\n };\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n body: JSON.stringify(body),\r\n };\r\n fetch(`./api/attendee/`, requestOptions)\r\n .then(handleResponse)\r\n .then((isModified) => {\r\n return isModified;\r\n });\r\n}\r\nfunction setPayMethod(payMethod) {\r\n return (dispatch) => {\r\n dispatch({\r\n type: attendeeConstants.SET_PAYMETHOD,\r\n payMethod,\r\n });\r\n };\r\n}\r\n","import React, { useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n/* import { deepClone } from \"../../../../../helpers/objectHelper\";\r\nimport { textAreaHandler } from \"./TextArea.handler\";\r\nimport { emailActions } from \"../../../../../store/actions/cms/email/email.action\";\r\nimport { HtmlWrapper } from \"../../components/HtmlWrapper\";\r\nimport { toKebabCase } from \"../../../../../helpers/cssHelper\";\r\nimport TextWrapper from \"../../components/TextWrapper\"; */\r\n\r\nconst CalendarInvitation = (props) => {\r\n /* const { content } = props.element; */\r\n const { selectedElement, element } = props;\r\n\r\n /* const textOnChange = (text) => {\r\n const { element, dispatch, template } = props;\r\n const updatedElement = deepClone(element);\r\n try {\r\n updatedElement.style.elementProps.text = text;\r\n } catch (error) {\r\n console.log('ERR: COULD NOT SET TEXT')\r\n }\r\n updatedElement.content = textAreaHandler.elementEditor(updatedElement.style, template.template ? template.template.content : null, null);\r\n props.dispatch(emailActions.updateEmailElement(updatedElement, null, true, props.inherit));\r\n } */\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n ${element.style.elementProps.text}\r\n \r\n `}}>\r\n {/* \r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\nfunction mapStateToProps(state) {\r\n return {\r\n selectedElement: state.email.selectedElement,\r\n inherit: state.email.inherit,\r\n template: state.template,\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(CalendarInvitation);\r\n","import React from \"react\";\r\nimport CalendarInvitation from \"./CalendarInvitation\";\r\nimport { templateHelper } from \"../../../template/helpers/templateHelper\";\r\n\r\nexport const calendarInvitationHandler = {\r\n tags,\r\n elementEditor,\r\n defaultStyle,\r\n component,\r\n families,\r\n};\r\n\r\nfunction component(element) {\r\n return \r\n \r\n \r\n \r\n `;\r\n}\r\n","import { conditionNavigator } from \"./condition.navigator\";\r\nimport { formActions } from \"../../../../store/actions/cms/form/form.action\";\r\nimport { conditionConstants } from \"./condition.constants\";\r\nimport { conditionTranslator } from \"./condition.translator\";\r\nimport { store } from \"../../../../store/configureStore\";\r\nimport { array } from \"prop-types\";\r\nimport { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\n\r\n\r\nexport const conditionHelper = {\r\n resolveCondition,\r\n extractElement,\r\n\r\n checkConditions,\r\n checkAll\r\n};\r\n\r\nfunction checkAll() {\r\n const form = store.getState().form;\r\n let targets = [];\r\n if (form && form.formElements) {\r\n let pageElements = form.formElements/* .filter(el => el.page == form.currentPage) */;\r\n pageElements.map(el => {\r\n if (\r\n el.data &&\r\n el.data.conditions &&\r\n el.data.conditions.length > 0\r\n ) {\r\n targets.push(el);\r\n }\r\n });\r\n }\r\n if (targets.length > 0) {\r\n targets.map(t => {\r\n let updatedElement = resolveQuery(t, form);\r\n store.dispatch(formActions.updateFormElement(updatedElement, true))\r\n });\r\n }\r\n\r\n}\r\nfunction checkConditions(sourceElementId) {\r\n const form = store.getState().form;\r\n let targets = [];\r\n if (form && form.formElements) {\r\n let pageElements = form.formElements/* .filter(el => el.page == form.currentPage) */;\r\n pageElements.map(el => {\r\n if (\r\n el.data &&\r\n el.data.conditions &&\r\n el.data.conditions.some(c => c.sourceId == sourceElementId)\r\n ) {\r\n targets.push(el);\r\n }\r\n });\r\n }\r\n if (targets.length > 0) {\r\n targets.map(t => {\r\n let updatedElement = resolveQuery(t, form);\r\n store.dispatch(formActions.updateFormElement(updatedElement, true))\r\n });\r\n //resolve\r\n }\r\n};\r\n\r\nfunction resolveQuery(targetElement, form) {\r\n let conditions = targetElement.data.conditions;\r\n //ALla conditions för det här target elementet\r\n //filtrerar alla conditons som inte är i grupp 0\r\n\r\n let queryStr = \"\";\r\n let conditionLists = {};\r\n for (const action in conditionConstants.actions) {\r\n if (conditionConstants.actions.hasOwnProperty(action)) {\r\n conditionLists[conditionConstants.actions[action]] = conditions.filter(el => el.action == conditionConstants.actions[action]);\r\n }\r\n }\r\n let updatedElement = Object.assign({}, targetElement);\r\n updatedElement.data = Object.assign({}, targetElement.data);\r\n updatedElement.props = Object.assign({}, targetElement.props);\r\n for (const action in conditionLists) {\r\n if (conditionLists.hasOwnProperty(action)) {\r\n if (conditionLists[action] && conditionLists[action].length > 0) {\r\n conditionLists[action].sort((a, b) => { return a.sortOrder - b.sortOrder; }).map(c => {\r\n if (c.prefix) queryStr += \" \" + c.prefix.replace(\"AND\", \"&&\").replace(\"OR\", \"||\") + \" \";\r\n queryStr += resolveCondition(c, form);\r\n if (c.suffix) queryStr += \" \" + c.suffix.replace(\"AND\", \"&&\").replace(\"OR\", \"||\") + \" \";\r\n });\r\n let result = eval(queryStr);\r\n updatedElement = executeAction(action, updatedElement, result);\r\n }\r\n }\r\n }\r\n return updatedElement;\r\n};\r\n\r\n//Foreach condition\r\nfunction resolveCondition(condition, form) {\r\n const sourceElement = extractElement(form, condition.sourceId);\r\n let isMet = false;\r\n let conditionStr = \"\";\r\n if (sourceElement) {\r\n const sourceValue = conditionNavigator.navigate(sourceElement);\r\n if (Array.isArray(sourceValue) || condition.operator === conditionConstants.operators.LIKE) {\r\n conditionStr = resolveCheckboxCondition(sourceValue, condition);\r\n } else {\r\n conditionStr = `('${sourceValue}' ${conditionTranslator.translateOperator(\r\n condition.operator\r\n )} '${condition.value}')`;\r\n }\r\n }\r\n return conditionStr;\r\n};\r\n\r\nfunction resolveCheckboxCondition(sourceValue, condition) {\r\n let cStr = \"\";\r\n if (condition.operator == conditionConstants.operators.ANY && sourceValue.length > 0) {\r\n cStr = \"(true)\";\r\n }\r\n else if (condition.operator == conditionConstants.operators.LIKE && sourceValue && sourceValue.toString().includes(condition.value)) {\r\n cStr = \"(true)\";\r\n }\r\n else if (condition.operator == conditionConstants.operators.EQUAL) {\r\n cStr = `(${sourceValue.some(sv => sv.optionId == condition.value)})`;\r\n } else if (condition.operator == conditionConstants.operators.NOT_EQUAL) {\r\n cStr = `(${!sourceValue.some(sv => sv.optionId == condition.value)})`;\r\n } else if (condition.operator == conditionConstants.operators.LESS_THAN_OR_EQUAL_TO) {\r\n cStr = `(${sourceValue.length <= condition.value})`;\r\n } else if (condition.operator == conditionConstants.operators.GREATER_THAN_OR_EQUAL_TO) {\r\n cStr = `(${sourceValue.length >= condition.value})`;\r\n }\r\n else {\r\n cStr = \"(false)\"\r\n }\r\n return cStr;\r\n\r\n\r\n}\r\n\r\nfunction extractElement(form, elementId) {\r\n const sourceElement = form.formElements.find(fe => {\r\n return fe.formElementId === elementId;\r\n });\r\n return sourceElement;\r\n};\r\n/* function validateElement(targetElement) {\r\n if (targetElement.data.hidden !== !value) {\r\n if (!value === true) {\r\n targetElement.isValid = true;\r\n if (targetElement.type === elementConstants.QUESTION\r\n && targetElement) {\r\n targetElement.props.options.map(o => {\r\n o.isSelected = false;\r\n })\r\n targetElement.props.text = \"\";\r\n }\r\n if (targetElement.type === elementConstants.FIELD\r\n && targetElement) {\r\n targetElement.props.text = \"\";\r\n }\r\n if (targetElement.type === elementConstants.EVENT\r\n && targetElement) {\r\n targetElement.props.isSelected = false;\r\n }\r\n }\r\n else {\r\n targetElement.isValid = false;\r\n }\r\n }\r\n return targetElement\r\n} */\r\nfunction executeAction(action, targetElement, value) {\r\n switch (action) {\r\n case conditionConstants.actions.Show:\r\n\r\n if (targetElement.data.hidden !== !value) {\r\n if (!value === true) {\r\n targetElement.isValid = true;\r\n if (targetElement.type === elementConstants.QUESTION\r\n ) {\r\n if (targetElement.props.type === 'Option') {\r\n targetElement.props.options.map(o => {\r\n o.isSelected = false;\r\n })\r\n }\r\n targetElement.props.text = \"\";\r\n }\r\n if (targetElement.type === elementConstants.FIELD\r\n ) {\r\n targetElement.props.text = \"\";\r\n }\r\n if (targetElement.type === elementConstants.EVENT\r\n ) {\r\n targetElement.props.isSelected = false;\r\n store.dispatch(formActions.removeOrderByCondition(targetElement.id));\r\n \r\n }\r\n }\r\n else {\r\n targetElement.isValid = false;\r\n }\r\n }\r\n\r\n targetElement.data.hidden = !value;\r\n\r\n break;\r\n case conditionConstants.actions.Require:\r\n targetElement.data.required = value;\r\n break;\r\n case conditionConstants.actions.ReadOnly:\r\n targetElement.data.readOnly = value;\r\n case conditionConstants.actions.CustomError:\r\n break;\r\n default:\r\n break;\r\n }\r\n return targetElement;\r\n};\r\n","import { conditionConstants } from \"../constants/condition.constants\";\r\n\r\nexport const conditionTranslator = {\r\n translateOperator\r\n};\r\n\r\nfunction translateOperator (operator){\r\n switch (operator) {\r\n case conditionConstants.operators.EQUAL:\r\n return \"==\";\r\n case conditionConstants.operators.NOT_EQUAL:\r\n return \"!=\";\r\n case conditionConstants.operators.GREATER_THAN:\r\n return \">\";\r\n case conditionConstants.operators.LESS_THAN:\r\n return \"<\";\r\n case conditionConstants.operators.LESS_THAN_OR_EQUAL_TO:\r\n return \"<=\";\r\n case conditionConstants.operators.GREATER_THAN_OR_EQUAL_TO:\r\n return \">=\";\r\n case conditionConstants.operators.AND:\r\n return \"&&\";\r\n case conditionConstants.operators.OR:\r\n return \"||\";\r\n default:\r\n return \"\"\r\n }\r\n};\r\n","export const elementConstants = {\r\n GETALL_ELEMENTS_REQUEST: 'GETALL_ELEMENTS_REQUEST',\r\n GETALL_ELEMENTS_SUCCESS: 'GETALL_SUCCESS',\r\n GETALL_ELEMENTS_FAILURE: 'GETALL_ELEMENTS_FAILURE',\r\n\r\n UPDATE_ELEMENT_REQUEST: 'UPDATE_ELEMENT_REQUEST',\r\n UPDATE_ELEMENT_SUCCESS: 'UPDATE_ELEMENT_SUCCESS',\r\n UPDATE_ELEMENT_FAILURE: 'UPDATE_ELEMENT_FAILURE',\r\n\r\n \r\n CREATE_ELEMENT_REQUEST: 'CREATE_ELEMENT_REQUEST',\r\n CREATE_ELEMENT_SUCCESS: 'CREATE_ELEMENT_SUCCESS',\r\n CREATE_ELEMENT_FAILURE: 'CREATE_ELEMENT_FAILURE',\r\n\r\n ADD_TO_LIST_SUCCESS: 'ADD_TO_LIST_SUCCESS',\r\n UPDATE_LIST_SUCCESS: 'UPDATE_LIST_SUCCESS',\r\n ADD_TO_LIST_SUCCESS: 'ADD_TO_LIST',\r\n/* ATTACH_REQUEST: 'ATTACH_REQUEST' ,\r\n ATTACH_SUCCESS: 'ATTACH_SUCCESS',\r\n ATTACH_FAILURE: 'ATTACH_FAILURE' */\r\n QUESTION: 1,\r\n FIELD: 2,\r\n EVENT: 3,\r\n CONTAINER: 4,\r\n CONTENT: 5,\r\n PAYMENT_OPTIONS:6,\r\n \r\n ARTICLE:8,\r\n INVOICE_FIELD:9,\r\n USER_PAGE: 10,\r\n PRE_CONFIRMATION: 11,\r\n DELETED: 12,\r\n PROFILEIMAGE_UPLOAD: 13,\r\n DISCOUNT: 14,\r\n GROUP_REGISTRATION: 15,\r\n FILE_UPLOADER: 16\r\n //and so on\r\n};","export const systemLabelConstants = {\r\n GET_SYSTEM_LABEL_REQUEST: 'GET_SYSTEM_LABEL_REQUEST',\r\n GET_SYSTEM_LABEL_SUCCESS: 'GET_SYSTEM_LABEL_SUCCESS',\r\n GET_SYSTEM_LABEL_FAILURE: 'GET_SYSTEM_LABEL_FAILURE',\r\n\r\n GET_SYSTEM_LABEL_GROUP_REQUEST: 'GET_SYSTEM_LABEL_GROUP_REQUEST',\r\n GET_SYSTEM_LABEL_GROUP_SUCCESS: 'GET_SYSTEM_LABEL_GROUP_SUCCESS',\r\n GET_SYSTEM_LABEL_GROUP_FAILURE: 'GET_SYSTEM_LABEL_GROUP_FAILURE',\r\n\r\n GET_ALL_SYSTEM_LABEL_GROUP_REQUEST: 'GET_ALL_SYSTEM_LABEL_GROUP_REQUEST',\r\n GET_ALL_SYSTEM_LABEL_GROUP_SUCCESS: 'GET_ALL_SYSTEM_LABEL_GROUP_SUCCESS',\r\n GET_ALL_SYSTEM_LABEL_GROUP_FAILURE: 'GET_ALL_SYSTEM_LABEL_GROUP_FAILURE',\r\n\r\n GET_SYSTEM_LABEL_DATA_REQUEST: 'GET_SYSTEM_LABEL_DATA_REQUEST',\r\n GET_SYSTEM_LABEL_DATA_SUCCESS: 'GET_SYSTEM_LABEL_DATA_SUCCESS',\r\n GET_SYSTEM_LABEL_DATA_FAILURE: 'GET_SYSTEM_LABEL_DATA_FAILURE',\r\n\r\n GET_ALL_LABEL_GROUPS_REQUEST: 'GET_ALL_LABEL_GROUPS_REQUEST',\r\n GET_ALL_LABEL_GROUPS_SUCCESS: 'GET_ALL_LABEL_GROUPS_SUCCESS',\r\n GET_ALL_LABEL_GROUPS_FAILURE: 'GET_ALL_LABEL_GROUPS_FAILURE',\r\n \r\n UPDATE_SYSTEM_LABEL_REQUEST: 'UPDATE_SYSTEM_LABEL_REQUEST',\r\n UPDATE_SYSTEM_LABEL_SUCCESS: 'UPDATE_SYSTEM_LABEL_SUCCESS',\r\n UPDATE_SYSTEM_LABEL_FAILURE: 'UPDATE_SYSTEM_LABEL_FAILURE',\r\n\r\n UPDATE_RANGE_SYSTEM_LABEL_REQUEST: 'UPDATE_RANGE_SYSTEM_LABEL_REQUEST',\r\n UPDATE_RANGE_SYSTEM_LABEL_SUCCESS: 'UPDATE_RANGE_SYSTEM_LABEL_SUCCESS',\r\n UPDATE_RANGE_SYSTEM_LABEL_FAILURE: 'UPDATE_RANGE_SYSTEM_LABEL_FAILURE',\r\n\r\n CREATE_SYSTEM_LABEL_REQUEST: 'CREATE_SYSTEM_LABEL_REQUEST',\r\n CREATE_SYSTEM_LABEL_SUCCESS: 'CREATE_SYSTEM_LABEL_SUCCESS',\r\n CREATE_SYSTEM_LABEL_FAILURE: 'CREATE_SYSTEM_LABEL_FAILURE',\r\n\r\n CREATE_LAYOUT_LABEL_REQUEST: 'CREATE_LAYOUT_LABEL_REQUEST',\r\n CREATE_LAYOUT_LABEL_SUCCESS: 'CREATE_LAYOUT_LABEL_SUCCESS',\r\n CREATE_LAYOUT_LABEL_FAILURE: 'CREATE_LAYOUT_LABEL_FAILURE',\r\n\r\n GET_LAYOUT_LABEL_GROUP_REQUEST: 'GET_LAYOUT_LABEL_GROUP_REQUEST',\r\n GET_LAYOUT_LABEL_GROUP_SUCCESS: 'GET_LAYOUT_LABEL_GROUP_SUCCESS',\r\n GET_LAYOUT_LABEL_GROUP_FAILURE: 'GET_LAYOUT_LABEL_GROUP_FAILURE',\r\n //and so on\r\n};","export const confirmationConstants = {\r\n\r\n GET_CONFIRMATION_LIST_REQUEST: 'GET_CONFIRMATION_LIST_REQUEST',\r\n GET_CONFIRMATION_LIST_SUCCESS: 'GET_CONFIRMATION_LIST_SUCCESS',\r\n GET_CONFIRMATION_LIST_FAILURE: 'GET_CONFIRMATION_LIST_FAILURE',\r\n\r\n CREATE_CONFIRMATION_RANGE_REQUEST: 'CREATE_CONFIRMATION_RANGE_REQUEST',\r\n CREATE_CONFIRMATION_RANGE_SUCCESS: 'CREATE_CONFIRMATION_RANGE_SUCCESS',\r\n CREATE_CONFIRMATION_RANGE_FAILURE: 'CREATE_CONFIRMATION_RANGE_FAILURE',\r\n\r\n GET_CONFIRMATION_REQUEST: 'GET_CONFIRMATION_REQUEST',\r\n GET_CONFIRMATION_SUCCESS: 'GET_CONFIRMATION_SUCCESS',\r\n GET_CONFIRMATION_FAILURE: 'GET_CONFIRMATION_FAILURE',\r\n\r\n UPDATE_CONFIRMATION_REQUEST: 'UPDATE_CONFIRMATION_REQUEST',\r\n UPDATE_CONFIRMATION_SUCCESS: 'UPDATE_CONFIRMATION_SUCCESS',\r\n UPDATE_CONFIRMATION_FAILURE: 'UPDATE_CONFIRMATION_FAILURE',\r\n\r\n CREATE_CONFIRMATION_REQUEST: 'CREATE_CONFIRMATION_REQUEST',\r\n CREATE_CONFIRMATION_SUCCESS: 'CREATE_CONFIRMATION_SUCCESS',\r\n CREATE_CONFIRMATION_FAILURE: 'CREATE_CONFIRMATION_FAILURE',\r\n \r\n DELETE_CONFIRMATION_REQUEST: 'DELETE_CONFIRMATION_REQUEST',\r\n DELETE_CONFIRMATION_SUCCESS: 'DELETE_CONFIRMATION_SUCCESS',\r\n DELETE_CONFIRMATION_FAILURE: 'DELETE_CONFIRMATION_FAILURE',\r\n\r\n}","import tinymce from 'tinymce/tinymce';\r\ntinymce.addI18n('sv_SE',{\r\n\"Redo\": \"G\\u00f6r om\",\r\n\"Undo\": \"\\u00c5ngra\",\r\n\"Cut\": \"Klipp ut\",\r\n\"Copy\": \"Kopiera\",\r\n\"Paste\": \"Klistra in\",\r\n\"Select all\": \"Markera allt\",\r\n\"New document\": \"Nytt dokument\",\r\n\"Ok\": \"Ok\",\r\n\"Cancel\": \"Avbryt\",\r\n\"Visual aids\": \"Visuella hj\\u00e4lpmedel\",\r\n\"Bold\": \"Fet\",\r\n\"Italic\": \"Kursiv\",\r\n\"Underline\": \"Understruken\",\r\n\"Strikethrough\": \"Genomstruken\",\r\n\"Superscript\": \"Upph\\u00f6jd\",\r\n\"Subscript\": \"Neds\\u00e4nkt\",\r\n\"Clear formatting\": \"Rensa formatering\",\r\n\"Align left\": \"V\\u00e4nsterjustera\",\r\n\"Align center\": \"Centrera\",\r\n\"Align right\": \"H\\u00f6gerjustera\",\r\n\"Justify\": \"Verifiera\",\r\n\"Bullet list\": \"Punktlista\",\r\n\"Numbered list\": \"Nummerlista\",\r\n\"Decrease indent\": \"Minska indrag\",\r\n\"Increase indent\": \"\\u00d6ka indrag\",\r\n\"Close\": \"St\\u00e4ng\",\r\n\"Formats\": \"Format\",\r\n\"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\\/C\\/V keyboard shortcuts instead.\": \"Din webbl\\u00e4sare st\\u00f6djer inte direkt \\u00e5tkomst till klippboken. Anv\\u00e4nd kortkommandona Ctrl\\u00a0+\\u00a0X\\/C\\/V i st\\u00e4llet.\",\r\n\"Headers\": \"Rubriker\",\r\n\"Header 1\": \"Rubrik 1\",\r\n\"Header 2\": \"Rubrik 2\",\r\n\"Header 3\": \"Rubrik 3\",\r\n\"Header 4\": \"Rubrik 4\",\r\n\"Header 5\": \"Rubrik 5\",\r\n\"Header 6\": \"Rubrik 6\",\r\n\"Headings\": \"Rubriker\",\r\n\"Heading 1\": \"Rubrik 1\",\r\n\"Heading 2\": \"Rubrik 2\",\r\n\"Heading 3\": \"Rubrik 3\",\r\n\"Heading 4\": \"Rubrik 4\",\r\n\"Heading 5\": \"Rubrik 5\",\r\n\"Heading 6\": \"Rubrik 6\",\r\n\"Preformatted\": \"F\\u00f6rformaterad\",\r\n\"Div\": \"Div\",\r\n\"Pre\": \"Pre\",\r\n\"Code\": \"Kod\",\r\n\"Paragraph\": \"Avsnitt\",\r\n\"Blockquote\": \"Blockquote\",\r\n\"Inline\": \"Inline\",\r\n\"Blocks\": \"Block\",\r\n\"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.\": \"Klistra in \\u00e4r nu i textl\\u00e4ge. Inneh\\u00e5ll kommer att konverteras till text tills du sl\\u00e5r av detta l\\u00e4ge.\",\r\n\"Fonts\": \"Typsnitt\",\r\n\"Font Sizes\": \"Teckenstorlek\",\r\n\"Class\": \"Klass\",\r\n\"Browse for an image\": \"Bl\\u00e4ddra efter en bild\",\r\n\"OR\": \"ELLER\",\r\n\"Drop an image here\": \"Sl\\u00e4pp en bild h\\u00e4r\",\r\n\"Upload\": \"Ladda upp\",\r\n\"Block\": \"Block\",\r\n\"Align\": \"Justera\",\r\n\"Default\": \"Original\",\r\n\"Circle\": \"Cirkel\",\r\n\"Disc\": \"Disk\",\r\n\"Square\": \"Fyrkant\",\r\n\"Lower Alpha\": \"Gemener\",\r\n\"Lower Greek\": \"Grekiska gemener\",\r\n\"Lower Roman\": \"Romerska gemener\",\r\n\"Upper Alpha\": \"Versaler\",\r\n\"Upper Roman\": \"Romerska versaler\",\r\n\"Anchor...\": \"Ankare...\",\r\n\"Name\": \"Namn\",\r\n\"Id\": \"Id\",\r\n\"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.\": \"Id skall b\\u00f6rja med en bokstav och f\\u00f6ljande tecken ska vara bokst\\u00e4ver, nummer, punkter, understr\\u00e4ck eller kolon.\",\r\n\"You have unsaved changes are you sure you want to navigate away?\": \"Du har f\\u00f6r\\u00e4ndringar som du inte har sparat. \\u00c4r du s\\u00e4ker p\\u00e5 att du vill navigera vidare?\",\r\n\"Restore last draft\": \"\\u00c5terst\\u00e4ll senaste utkast\",\r\n\"Special characters...\": \"Specialtecken...\",\r\n\"Source code\": \"K\\u00e4llkod\",\r\n\"Insert\\/Edit code sample\": \"Infoga\\/Redigera k\\u00e5d exempel\",\r\n\"Language\": \"Spr\\u00e5k\",\r\n\"Code sample...\": \"Kodexempel...\",\r\n\"Color Picker\": \"F\\u00e4rgv\\u00e4ljare\",\r\n\"R\": \"R\",\r\n\"G\": \"G\",\r\n\"B\": \"B\",\r\n\"Left to right\": \"V\\u00e4nster till h\\u00f6ger\",\r\n\"Right to left\": \"H\\u00f6ger till v\\u00e4nster\",\r\n\"Emoticons...\": \"Emoticons...\",\r\n\"Metadata and Document Properties\": \"Metadata och dokumentegenskaper\",\r\n\"Title\": \"Titel\",\r\n\"Keywords\": \"Nyckelord\",\r\n\"Description\": \"Beskrivning\",\r\n\"Robots\": \"Robotar\",\r\n\"Author\": \"F\\u00f6rfattare\",\r\n\"Encoding\": \"Encoding\",\r\n\"Fullscreen\": \"Fullsk\\u00e4rm\",\r\n\"Action\": \"H\\u00e4ndelse\",\r\n\"Shortcut\": \"Kortkommando\",\r\n\"Help\": \"Hj\\u00e4lp\",\r\n\"Address\": \"Adress\",\r\n\"Focus to menubar\": \"Fokusera p\\u00e5 menyrad\",\r\n\"Focus to toolbar\": \"Fokusera p\\u00e5 verktygsrad\",\r\n\"Focus to element path\": \"Fokusera p\\u00e5 elements\\u00f6kv\\u00e4gsrad\",\r\n\"Focus to contextual toolbar\": \"Fokusera p\\u00e5 den kontextuella verktygsraden\",\r\n\"Insert link (if link plugin activated)\": \"Infoga l\\u00e4nk (om link-pluginet \\u00e4r aktiverat)\",\r\n\"Save (if save plugin activated)\": \"Spara (om save-pluginet \\u00e4r aktiverat)\",\r\n\"Find (if searchreplace plugin activated)\": \"S\\u00f6k (om searchreplace-pluginet \\u00e4r aktiverat)\",\r\n\"Plugins installed ({0}):\": \"Installerade plugins ({0}):\",\r\n\"Premium plugins:\": \"Premiumplugins:\",\r\n\"Learn more...\": \"L\\u00e4s mer...\",\r\n\"You are using {0}\": \"Du anv\\u00e4nder {0}\",\r\n\"Plugins\": \"Plugins\",\r\n\"Handy Shortcuts\": \"Kortkommandon\",\r\n\"Horizontal line\": \"Horisontell linje\",\r\n\"Insert\\/edit image\": \"Infoga\\/redigera bild\",\r\n\"Image description\": \"Bildbeskrivning\",\r\n\"Source\": \"K\\u00e4lla\",\r\n\"Dimensions\": \"Dimensioner\",\r\n\"Constrain proportions\": \"Begr\\u00e4nsa proportioner\",\r\n\"General\": \"Generella\",\r\n\"Advanced\": \"Avancerat\",\r\n\"Style\": \"Stil\",\r\n\"Vertical space\": \"Vertikaltutrymme\",\r\n\"Horizontal space\": \"Horisontellt utrymme\",\r\n\"Border\": \"Ram\",\r\n\"Insert image\": \"Infoga bild\",\r\n\"Image...\": \"Bild...\",\r\n\"Image list\": \"Bildlista\",\r\n\"Rotate counterclockwise\": \"Rotera moturs\",\r\n\"Rotate clockwise\": \"Rotera medurs\",\r\n\"Flip vertically\": \"Spegelv\\u00e4nd vertikalt\",\r\n\"Flip horizontally\": \"Spegelv\\u00e4nd horisontellt\",\r\n\"Edit image\": \"Redigera bild\",\r\n\"Image options\": \"Bild inst\\u00e4llningar\",\r\n\"Zoom in\": \"Zooma in\",\r\n\"Zoom out\": \"Zooma ut\",\r\n\"Crop\": \"Besk\\u00e4r\",\r\n\"Resize\": \"Skala om\",\r\n\"Orientation\": \"Orientera\",\r\n\"Brightness\": \"Ljusstyrka\",\r\n\"Sharpen\": \"Sk\\u00e4rpa\",\r\n\"Contrast\": \"Kontrast\",\r\n\"Color levels\": \"F\\u00e4rgniv\\u00e5er\",\r\n\"Gamma\": \"Gamma\",\r\n\"Invert\": \"Invertera\",\r\n\"Apply\": \"Applicera\",\r\n\"Back\": \"Tillbaka\",\r\n\"Insert date\\/time\": \"Infoga datum\\/tid\",\r\n\"Date\\/time\": \"Datum\\/tid\",\r\n\"Insert\\/Edit Link\": \"Infoga\\/redigera l\\u00e4nk\",\r\n\"Insert\\/edit link\": \"Infoga\\/redigera l\\u00e4nk\",\r\n\"Text to display\": \"Text att visa\",\r\n\"Url\": \"Url\",\r\n\"Open link in...\": \"\\u00d6ppna l\\u00e4nk i...\",\r\n\"Current window\": \"Nuvarande f\\u00f6nster\",\r\n\"None\": \"Ingen\",\r\n\"New window\": \"Nytt f\\u00f6nster\",\r\n\"Remove link\": \"Ta bort l\\u00e4nk\",\r\n\"Anchors\": \"Bokm\\u00e4rken\",\r\n\"Link...\": \"L\\u00e4nk...\",\r\n\"Paste or type a link\": \"Klistra in eller skriv en l\\u00e4nk\",\r\n\"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?\": \"Urlen du angav verkar vara en epost adress. Vill du l\\u00e4gga till ett mailto: prefix?\",\r\n\"The URL you entered seems to be an external link. Do you want to add the required http:\\/\\/ prefix?\": \"Urlen du angav verkar vara en extern l\\u00e4nk. Vill du l\\u00e4gga till http:\\/\\/ prefixet?\",\r\n\"Link list\": \"L\\u00e4nklista\",\r\n\"Insert video\": \"Infoga video\",\r\n\"Insert\\/edit video\": \"Infoga\\/redigera video\",\r\n\"Insert\\/edit media\": \"Infoga\\/redigera media\",\r\n\"Alternative source\": \"Alternativ k\\u00e4lla\",\r\n\"Alternative source URL\": \"Alternativ k\\u00e4llwebbadress\",\r\n\"Media poster (Image URL)\": \"Mediaposter (bildwebbadress)\",\r\n\"Paste your embed code below:\": \"Klistra in din inb\\u00e4ddningskod nedan:\",\r\n\"Embed\": \"Inb\\u00e4ddning\",\r\n\"Media...\": \"Media...\",\r\n\"Nonbreaking space\": \"Avbrottsfritt mellanrum\",\r\n\"Page break\": \"Sidbrytning\",\r\n\"Paste as text\": \"Klistra in som text\",\r\n\"Preview\": \"F\\u00f6rhandsgranska\",\r\n\"Print...\": \"Skriv ut...\",\r\n\"Save\": \"Spara\",\r\n\"Find\": \"S\\u00f6k\",\r\n\"Replace with\": \"Ers\\u00e4tt med\",\r\n\"Replace\": \"Ers\\u00e4tt\",\r\n\"Replace all\": \"Ers\\u00e4tt alla\",\r\n\"Previous\": \"F\\u00f6reg\\u00e5ende\",\r\n\"Next\": \"N\\u00e4sta\",\r\n\"Find and replace...\": \"S\\u00f6k och ers\\u00e4tt...\",\r\n\"Could not find the specified string.\": \"Kunde inte hitta den specifierade st\\u00e4ngen.\",\r\n\"Match case\": \"Matcha gemener\\/versaler\",\r\n\"Find whole words only\": \"Hitta endast hela ord\",\r\n\"Spell check\": \"Stavningskontroll\",\r\n\"Ignore\": \"Ignorera\",\r\n\"Ignore all\": \"Ignorera alla\",\r\n\"Finish\": \"Avsluta\",\r\n\"Add to Dictionary\": \"L\\u00e4gg till i ordlista\",\r\n\"Insert table\": \"Infoga tabell\",\r\n\"Table properties\": \"Tabellegenskaper\",\r\n\"Delete table\": \"Radera tabell\",\r\n\"Cell\": \"Cell\",\r\n\"Row\": \"Rad\",\r\n\"Column\": \"Kolumn\",\r\n\"Cell properties\": \"Cellegenskaper\",\r\n\"Merge cells\": \"Sammanfoga celler\",\r\n\"Split cell\": \"Bryt is\\u00e4r celler\",\r\n\"Insert row before\": \"Infoga rad f\\u00f6re\",\r\n\"Insert row after\": \"Infoga rad efter\",\r\n\"Delete row\": \"Radera rad\",\r\n\"Row properties\": \"Radegenskaper\",\r\n\"Cut row\": \"Klipp ut rad\",\r\n\"Copy row\": \"Kopiera rad\",\r\n\"Paste row before\": \"Klista in rad f\\u00f6re\",\r\n\"Paste row after\": \"Klistra in rad efter\",\r\n\"Insert column before\": \"Infoga kolumn f\\u00f6re\",\r\n\"Insert column after\": \"Infoga kolumn efter\",\r\n\"Delete column\": \"Radera kolumn\",\r\n\"Cols\": \"Kolumner\",\r\n\"Rows\": \"Rader\",\r\n\"Width\": \"Bredd\",\r\n\"Height\": \"H\\u00f6jd\",\r\n\"Cell spacing\": \"Cellmellanrum\",\r\n\"Cell padding\": \"Cellpaddning\",\r\n\"Show caption\": \"Visa bildtext\",\r\n\"Left\": \"V\\u00e4nster\",\r\n\"Center\": \"Centrum\",\r\n\"Right\": \"H\\u00f6ger\",\r\n\"Cell type\": \"Celltyp\",\r\n\"Scope\": \"Omf\\u00e5ng\",\r\n\"Alignment\": \"Justering\",\r\n\"H Align\": \"H-justering\",\r\n\"V Align\": \"V-justering\",\r\n\"Top\": \"Toppen\",\r\n\"Middle\": \"Mitten\",\r\n\"Bottom\": \"Botten\",\r\n\"Header cell\": \"Huvudcell\",\r\n\"Row group\": \"Radgrupp\",\r\n\"Column group\": \"Kolumngrupp\",\r\n\"Row type\": \"Radtyp\",\r\n\"Header\": \"Huvud\",\r\n\"Body\": \"Kropp\",\r\n\"Footer\": \"Fot\",\r\n\"Border color\": \"Ramf\\u00e4rg\",\r\n\"Insert template...\": \"Infoga mall...\",\r\n\"Templates\": \"Mallar\",\r\n\"Template\": \"Mall\",\r\n\"Text color\": \"Textf\\u00e4rg\",\r\n\"Background color\": \"Bakgrundsf\\u00e4rg\",\r\n\"Custom...\": \"Anpassad...\",\r\n\"Custom color\": \"Anpassad f\\u00e4rg\",\r\n\"No color\": \"Ingen f\\u00e4rg\",\r\n\"Remove color\": \"Ta bort f\\u00e4rg\",\r\n\"Table of Contents\": \"Inneh\\u00e5llsf\\u00f6rteckning\",\r\n\"Show blocks\": \"Visa block\",\r\n\"Show invisible characters\": \"Visa onsynliga tecken\",\r\n\"Word count\": \"Ordantal\",\r\n\"Words: {0}\": \"Ord: {0}\",\r\n\"{0} words\": \"{0} ord\",\r\n\"File\": \"Fil\",\r\n\"Edit\": \"Redigera\",\r\n\"Insert\": \"Infoga\",\r\n\"View\": \"Visa\",\r\n\"Format\": \"Format\",\r\n\"Table\": \"Tabell\",\r\n\"Tools\": \"Verktyg\",\r\n\"Powered by {0}\": \"Powered by {0}\",\r\n\"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help\": \"Textredigerare. Tryck ALT-F9 f\\u00f6r menyn. Tryck ALT-F10 f\\u00f6r verktygsrader. Tryck ALT-0 f\\u00f6r hj\\u00e4lp.\",\r\n\"Image title\": \"Bildtitel\",\r\n\"Border width\": \"Kantlinjebredd\",\r\n\"Border style\": \"Kantlinjestil\",\r\n\"Error\": \"Fel\",\r\n\"Warn\": \"Varning\",\r\n\"Valid\": \"Giltig\",\r\n\"To open the popup, press Shift+Enter\": \"Tryck p\\u00e5 Shift\\u00a0+\\u00a0Enter f\\u00f6r att \\u00f6ppna popup-f\\u00f6nstret\",\r\n\"Rich Text Area. Press ALT-0 for help.\": \"Omr\\u00e5de med formaterad text. Tryck p\\u00e5 ALT-0 f\\u00f6r hj\\u00e4lp.\",\r\n\"System Font\": \"Systemtypsnitt\",\r\n\"Failed to upload image: {0}\": \"Kunde inte ladda upp bild: {0}\",\r\n\"Failed to load plugin: {0} from url {1}\": \"Kunde inte l\\u00e4sa in insticksprogram: {0} fr\\u00e5n webbadress {1}\",\r\n\"Failed to load plugin url: {0}\": \"Kunde inte l\\u00e4sa in webbadress f\\u00f6r insticksprogram: {0}\",\r\n\"Failed to initialize plugin: {0}\": \"Kunde inte initiera insticksprogram: {0}\",\r\n\"example\": \"exempel\",\r\n\"Search\": \"S\\u00f6k\",\r\n\"All\": \"Alla\",\r\n\"Currency\": \"Valuta\",\r\n\"Text\": \"Text\",\r\n\"Quotations\": \"Citattecken\",\r\n\"Mathematical\": \"Matematiskt\",\r\n\"Extended Latin\": \"Ut\\u00f6kad latin\",\r\n\"Symbols\": \"Symboler\",\r\n\"Arrows\": \"Pilar\",\r\n\"User Defined\": \"Anv\\u00e4ndardefinierade\",\r\n\"dollar sign\": \"dollartecken\",\r\n\"currency sign\": \"valutatecken\",\r\n\"euro-currency sign\": \"eurotecken\",\r\n\"colon sign\": \"kolon\",\r\n\"cruzeiro sign\": \"cruzeirotecken\",\r\n\"french franc sign\": \"franctecken\",\r\n\"lira sign\": \"liratecken\",\r\n\"mill sign\": \"milltecken\",\r\n\"naira sign\": \"nairatecken\",\r\n\"peseta sign\": \"pesetastecken\",\r\n\"rupee sign\": \"rupeetecken\",\r\n\"won sign\": \"wontecken\",\r\n\"new sheqel sign\": \"schekeltecken\",\r\n\"dong sign\": \"dongtecken\",\r\n\"kip sign\": \"kiptecken\",\r\n\"tugrik sign\": \"tugriktecken\",\r\n\"drachma sign\": \"drachmertecken\",\r\n\"german penny symbol\": \"tecken f\\u00f6r tysk penny\",\r\n\"peso sign\": \"pesotecken\",\r\n\"guarani sign\": \"guaranitecken\",\r\n\"austral sign\": \"australtecken\",\r\n\"hryvnia sign\": \"hryvniatecken\",\r\n\"cedi sign\": \"ceditecken\",\r\n\"livre tournois sign\": \"tecken f\\u00f6r livre tournois\",\r\n\"spesmilo sign\": \"spesmilotecken\",\r\n\"tenge sign\": \"tengetecken\",\r\n\"indian rupee sign\": \"tecken f\\u00f6r indisk rupee\",\r\n\"turkish lira sign\": \"tecken f\\u00f6r turkisk lira\",\r\n\"nordic mark sign\": \"tecken f\\u00f6r nordisk mark\",\r\n\"manat sign\": \"manattecken\",\r\n\"ruble sign\": \"rubeltecken\",\r\n\"yen character\": \"yentecken\",\r\n\"yuan character\": \"yuantecken\",\r\n\"yuan character, in hong kong and taiwan\": \"yuantecken i Hongkong och Taiwan\",\r\n\"yen\\/yuan character variant one\": \"yen-\\/yuantecken variant ett\",\r\n\"Loading emoticons...\": \"L\\u00e4ser in emoticons...\",\r\n\"Could not load emoticons\": \"Kunde inte l\\u00e4sa in emoticons\",\r\n\"People\": \"M\\u00e4nniskor\",\r\n\"Animals and Nature\": \"Djur och natur\",\r\n\"Food and Drink\": \"Mat och dryck\",\r\n\"Activity\": \"Aktivitet\",\r\n\"Travel and Places\": \"Resa och platser\",\r\n\"Objects\": \"F\\u00f6rem\\u00e5l\",\r\n\"Flags\": \"Flaggor\",\r\n\"Characters\": \"Tecken\",\r\n\"Characters (no spaces)\": \"Tecken (inga mellanrum)\",\r\n\"Error: Form submit field collision.\": \"Fel: Kollision f\\u00e4lt f\\u00f6r s\\u00e4ndning av formul\\u00e4r.\",\r\n\"Error: No form element found.\": \"Fel: Inget formul\\u00e4relement hittades.\",\r\n\"Update\": \"Uppdatera\",\r\n\"Color swatch\": \"F\\u00e4rgpalett\",\r\n\"Turquoise\": \"Turkos\",\r\n\"Green\": \"Gr\\u00f6n\",\r\n\"Blue\": \"Bl\\u00e5\",\r\n\"Purple\": \"Lila\",\r\n\"Navy Blue\": \"M\\u00f6rkbl\\u00e5\",\r\n\"Dark Turquoise\": \"M\\u00f6rkturkos\",\r\n\"Dark Green\": \"M\\u00f6rkgr\\u00f6n\",\r\n\"Medium Blue\": \"Mellanbl\\u00e5\",\r\n\"Medium Purple\": \"Mellanlila\",\r\n\"Midnight Blue\": \"Midnattsbl\\u00e5\",\r\n\"Yellow\": \"Gul\",\r\n\"Orange\": \"Orange\",\r\n\"Red\": \"R\\u00f6d\",\r\n\"Light Gray\": \"Ljusgr\\u00e5\",\r\n\"Gray\": \"Gr\\u00e5\",\r\n\"Dark Yellow\": \"M\\u00f6rkgul\",\r\n\"Dark Orange\": \"M\\u00f6rkorange\",\r\n\"Dark Red\": \"M\\u00f6rkr\\u00f6d\",\r\n\"Medium Gray\": \"Mellangr\\u00e5\",\r\n\"Dark Gray\": \"M\\u00f6rkgr\\u00e5\",\r\n\"Black\": \"Svart\",\r\n\"White\": \"Vit\",\r\n\"Switch to or from fullscreen mode\": \"V\\u00e4xla till eller fr\\u00e5n fullsk\\u00e4rmsl\\u00e4ge\",\r\n\"Open help dialog\": \"\\u00d6ppna hj\\u00e4lpdialogrutan\",\r\n\"history\": \"historik\",\r\n\"styles\": \"stilar\",\r\n\"formatting\": \"formatering\",\r\n\"alignment\": \"justering\",\r\n\"indentation\": \"indragning\",\r\n\"permanent pen\": \"permanent penna\",\r\n\"comments\": \"kommentarer\",\r\n\"Anchor\": \"Ankare\",\r\n\"Special character\": \"Specialtecken\",\r\n\"Code sample\": \"K\\u00e5dexempel\",\r\n\"Color\": \"F\\u00e4rg\",\r\n\"Emoticons\": \"Emoticons\",\r\n\"Document properties\": \"Dokumentegenskaper\",\r\n\"Image\": \"Bild\",\r\n\"Insert link\": \"Infoga l\\u00e4nk\",\r\n\"Target\": \"M\\u00e5l\",\r\n\"Link\": \"L\\u00e4nk\",\r\n\"Poster\": \"Affish\",\r\n\"Media\": \"Media\",\r\n\"Print\": \"Skriv ut\",\r\n\"Prev\": \"F\\u00f6reg\\u00e5ende\",\r\n\"Find and replace\": \"S\\u00f6k och ers\\u00e4tt\",\r\n\"Whole words\": \"Hela ord\",\r\n\"Spellcheck\": \"R\\u00e4ttstava\",\r\n\"Caption\": \"Rubrik\",\r\n\"Insert template\": \"Infoga mall\"\r\n});","import tinymce from \"tinymce/tinymce.js\";\r\nimport \"tinymce/themes/silver/theme.js\";\r\nimport \"tinymce/skins/ui/oxide/content.css\";\r\nimport \"tinymce/skins/ui/oxide/skin.css\";\r\nimport \"tinymce/plugins/code/plugin.js\";\r\nimport \"tinymce/plugins/image/plugin.js\";\r\nimport \"tinymce/plugins/link/plugin.js\";\r\nimport \"tinymce/plugins/table/plugin.js\";\r\nimport \"tinymce/plugins/anchor/plugin.js\";\r\nimport \"tinymce/plugins/autolink/plugin.js\";\r\nimport \"tinymce/plugins/fullpage/plugin.js\";\r\nimport \"tinymce/plugins/fullscreen/plugin.js\";\r\nimport \"tinymce/plugins/help/plugin.js\";\r\nimport \"tinymce/plugins/hr/plugin.js\";\r\nimport \"tinymce/plugins/insertdatetime/plugin.js\";\r\nimport \"tinymce/plugins/lists/plugin.js\";\r\nimport \"tinymce/plugins/nonbreaking/plugin.js\";\r\nimport \"tinymce/plugins/paste/plugin.js\";\r\nimport \"tinymce/plugins/preview/plugin.js\";\r\nimport \"tinymce/plugins/searchreplace/plugin.js\";\r\nimport \"tinymce/plugins/wordcount/plugin.js\";\r\nimport \"tinymce/plugins/imagetools/plugin.js\";\r\nimport \"tinymce/icons/default/icons.js\"\r\n\r\n\r\nimport \"./sv_SE.js\";\r\nimport { store } from \"../../store/configureStore\";\r\nexport default tinymce;\r\nfunction getLanguageCodeForTiny() {\r\n let state = store.getState();\r\n let cms = state.cms;\r\n if (cms && cms.languageCode) {\r\n if (cms.languageCode == \"swe\") {\r\n return \"sv_SE\";\r\n } else if (cms.languageCode == \"eng\") {\r\n return \"en_GB\";\r\n }\r\n }\r\n return undefined;\r\n}\r\n\r\nexport const classicSettings = {\r\n plugins: \"link image code table autoresize anchor autolink fullpage fullscreen help hr insertdatetime lists nonbreaking paste preview searchreplace wordcount image imagetools\",\r\n toolbar:\r\n \"code | undo redo | bold italic | forecolor backcolor | alignleft aligncenter alignright | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol\" +\r\n \" | anchor | fullpage | fullscreen | help | hr | image | insertdatetime | fontsizeselect | numlist bullist | nonbreaking | paste | preview | searchreplace | archive\",\r\n language: getLanguageCodeForTiny(),\r\n language_url: \"../../components/TinyMCE/sv_SE.js\",\r\n height: \"70vh\",\r\n fontsize_formats: \"8px 10px 12px 14px 18px 24px 36px\",\r\n content_style: undefined,\r\n imagetools_toolbar: \"editimage imageoptions | alignleft aligncenter alignright\",\r\n imagetools_cors_hosts: [\"jirango.blob.core.windows.net\"],\r\n imagetools_credentials_hosts: [\"jirango.blob.core.windows.net\"],\r\n fullpage_default_doctype: \"\",\r\n fullpage_default_encoding: \"UTF-8\",\r\n link_assume_external_targets: \"https\",\r\n relative_urls: false,\r\n remove_script_host: false,\r\n convert_urls: false,\r\n};\r\nexport const classicSettings2 = {\r\n plugins: \"link image code table anchor autolink help hr insertdatetime lists nonbreaking paste preview searchreplace wordcount image imagetools\",\r\n toolbar:\r\n \"code | undo redo | bold italic | forecolor backcolor | alignleft aligncenter alignright | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol\" +\r\n \" | anchor | fullpage | fullscreen | help | hr | image | insertdatetime | fontsizeselect | numlist bullist | nonbreaking | paste | preview | searchreplace | archive\",\r\n language: getLanguageCodeForTiny(),\r\n language_url: \"../../components/TinyMCE/sv_SE.js\",\r\n height: \"70vh\",\r\n fontsize_formats: \"8px 10px 12px 14px 18px 24px 36px\",\r\n content_style: undefined,\r\n imagetools_toolbar: \"editimage imageoptions | alignleft aligncenter alignright\",\r\n imagetools_cors_hosts: [\"jirango.blob.core.windows.net\"],\r\n imagetools_credentials_hosts: [\"jirango.blob.core.windows.net\"],\r\n fullpage_default_doctype: \"\",\r\n fullpage_default_encoding: \"UTF-8\",\r\n link_assume_external_targets: \"https\",\r\n relative_urls: false,\r\n remove_script_host: false,\r\n convert_urls: false,\r\n};\r\nexport const inlineSettings2 = {\r\n menubar: false,\r\n plugins: \"link code table paste lists nonbreaking preview \",\r\n paste_as_text: true,\r\n toolbar: \"code | undo redo | styleselect bold italic underline | link | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright | table tabledelete pastetext | hr | numlist bullist | preview \",\r\n language: getLanguageCodeForTiny(),\r\n language_url: \"../../components/TinyMCE/sv_SE.js\",\r\n height: \"300px\",\r\n fontsize_formats: \"8px 10px 12px 14px 18px 24px 36px\",\r\n content_style: undefined,\r\n inline: true,\r\n imagetools_toolbar: \"editimage imageoptions | alignleft aligncenter alignright\",\r\n imagetools_cors_hosts: [\"jirango.blob.core.windows.net\"],\r\n imagetools_credentials_hosts: [\"jirango.blob.core.windows.net\"],\r\n fullpage_default_doctype: \"\",\r\n fullpage_default_encoding: \"UTF-8\",\r\n link_assume_external_targets: \"https\",\r\n relative_urls: false,\r\n remove_script_host: true,\r\n convert_urls: false,\r\n};\r\n\r\nexport const inlineSettings = {\r\n menubar: false,\r\n plugins: \"link code table paste\",\r\n paste_as_text: true,\r\n toolbar: \"code | undo redo | styleselect bold italic underline | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright | table tabledelete pastetext\" + \" | archive | anchor\",\r\n language: getLanguageCodeForTiny(),\r\n fontsize_formats: \"8px 10px 12px 14px 18px 24px 36px\",\r\n language_url: \"../../components/TinyMCE/sv_SE.js\",\r\n content_style: undefined,\r\n imagetools_toolbar: \"editimage imageoptions | alignleft aligncenter alignright\",\r\n imagetools_cors_hosts: [\"jirango.blob.core.windows.net\"],\r\n imagetools_credentials_hosts: [\"jirango.blob.core.windows.net\"],\r\n theme_advanced_toolbar_location: \"bottom\",\r\n theme_advanced_toolbar_align: \"bottom\",\r\n theme_advanced_statusbar_location: \"bottom\",\r\n block_formats: \"Headline=h1;Paragraph=p;\",\r\n theme_advanced_resizing: true,\r\n theme_advanced_toolbar_location: \"bottom\",\r\n inline: true,\r\n fullpage_default_doctype: \"\",\r\n fullpage_default_encoding: \"UTF-8\",\r\n /* width: 'auto', */\r\n link_assume_external_targets: \"https\",\r\n relative_urls: false,\r\n remove_script_host: true,\r\n convert_urls: false,\r\n};\r\n\r\nexport const tabSettings = {\r\n menubar: false,\r\n plugins: \"link code table anchor autolink fullscreen format hr insertdatetime lists nonbreaking paste preview visualblocks searchreplace wordcount media image imagetools\",\r\n toolbar: \"styleselect bold italic underline |link | fontsizeselect | numlist bullist | forecolor backcolor \" + \" | archive\",\r\n language: getLanguageCodeForTiny(),\r\n language_url: \"../../components/TinyMCE/sv_SE.js\",\r\n content_style: undefined,\r\n fontsize_formats: \"8px 10px 12px 14px 18px 24px 36px\",\r\n imagetools_toolbar: \"editimage imageoptions | alignleft aligncenter alignright\",\r\n imagetools_cors_hosts: [\"jirango.blob.core.windows.net\"],\r\n imagetools_credentials_hosts: [\"jirango.blob.core.windows.net\"],\r\n theme_advanced_toolbar_location: \"bottom\",\r\n theme_advanced_toolbar_align: \"bottom\",\r\n theme_advanced_statusbar_location: \"bottom\",\r\n block_formats: \"Headline=h1;Paragraph=p;\",\r\n theme_advanced_resizing: true,\r\n theme_advanced_toolbar_location: \"bottom\",\r\n inline: false,\r\n fullpage_default_doctype: \"\",\r\n fullpage_default_encoding: \"UTF-8\",\r\n /* width: 'auto', */\r\n link_assume_external_targets: \"https\",\r\n relative_urls: false,\r\n remove_script_host: true,\r\n convert_urls: false,\r\n};\r\n","\r\nexport function getUrlParam(key) {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n return urlParams.get(getKey(key));\r\n}\r\n\r\nexport function getKey(searchString) {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n for (var key of urlParams.keys()) {\r\n if (searchString.toLowerCase() === key.toLowerCase()) {\r\n return key;\r\n }\r\n }\r\n return searchString;\r\n}\r\n\r\n\r\nexport function convertUrl(url, order) {\r\n if (!url || url === \"https://\"|| url === \"123\") return \"\";\r\n try {\r\n var newUrl = new URL(url);\r\n let params = newUrl.search;\r\n if (/\\[badgeno\\]|\\[clientkey\\]/gi.test(params)) {\r\n if (order) {\r\n params = params.replace(/\\[badgeno\\]|\\[clientkey\\]/gi, order.badgeNo);\r\n }\r\n else {\r\n params = params.replace(/\\[badgeno\\]|\\[clientkey\\]/gi, \"\").replace(/&?badgeno=|&?clientkey=/gi, \"\");\r\n }\r\n let basicUrl = newUrl.origin + newUrl.pathname + params;\r\n return basicUrl;\r\n }\r\n }\r\n catch (err) {\r\n return url;\r\n }\r\n return url;\r\n}","export const emailConstants = {\r\n GET_EMAIL_REQUEST: 'GET_EMAIL_REQUEST',\r\n GET_EMAIL_SUCCESS: 'GET_EMAIL_SUCCESS',\r\n GET_EMAIL_FAILURE: 'GET_EMAIL_FAILURE',\r\n\r\n GETALL_EMAIL_REQUEST: 'GETALL_EMAIL_REQUEST',\r\n GETALL_EMAIL_SUCCESS: 'GETALL_EMAIL_SUCCESS',\r\n GETALL_EMAIL_FAILURE: 'GETALL_EMAIL_FAILURE',\r\n\r\n UPDATE_EMAIL_REQUEST: 'UPDATE_EMAIL_REQUEST',\r\n UPDATE_EMAIL_SUCCESS: 'UPDATE_EMAIL_SUCCESS',\r\n UPDATE_EMAIL_FAILURE: 'UPDATE_EMAIL_FAILURE',\r\n\r\n SEND_TEST_REQUEST: 'SEND_TEST_REQUEST',\r\n SEND_TEST_SUCCESS: 'SEND_TEST_SUCCESS',\r\n SEND_TEST_FAILURE: 'SEND_TEST_FAILURE',\r\n\r\n\r\n EMAIL_SENT: 'EMAIL_SENT',\r\n UPDATE_EMAIL_ELEMENT: 'UPDATE_EMAIL_ELEMENT',\r\n SELECT_EMAIL_ELEMENT: 'SELECT_EMAIL_ELEMENT',\r\n DESELECT_EMAIL_ELEMENT: 'DESELECT_EMAIL_ELEMENT',\r\n SOFT_UPDATE_EMAIL: 'SOFT_UPDATE_EMAIL',\r\n REMOVE_EMAIL_ELEMENT: 'REMOVE_EMAIL_ELEMENT'\r\n};","export const emailElementType = {\r\n //SINGLEPARTS\r\n /* SMALL_HEADER_IMAGE: \"TOP_HEADER_IMAGE\", */\r\n LARGE_HEADER_IMAGE: \"LARGE_HEADER_IMAGE\",\r\n SPACE: \"SPACE\",\r\n BUTTON: \"BUTTON\",\r\n TEXT: \"TEXT\",\r\n\r\n //MULTIPARTS\r\n HEADLINE_TEXT_LIST_BUTTON: \"HEADLINE_TEXT_LIST_BUTTON\",\r\n BACKDROPIMAGE_ELEVATED_TEXT: \"BACKDROPIMAGE_ELEVATED_TEXT\",\r\n TWO_COL_IMAGE_TEXT: \"TWO_COL_IMAGE_TEXT\",\r\n THREE_COL_IMAGE_TEXT: \"THREE_COL_IMAGE_TEXT\",\r\n LEFT_THUMBNAIL_IMAGE_HEADLINE_TEXT_BUTTON: \"LEFT_THUMBNAIL_IMAGE_HEADLINE_TEXT_BUTTON\",\r\n RIGHT_THUMBNAIL_IMAGE_HEADLINE_TEXT_BUTTON: \"RIGHT_THUMBNAIL_IMAGE_HEADLINE_TEXT_BUTTON\",\r\n FOOTER: \"FOOTER\",\r\n FULL_BLEED_SECTION: \"FULL_BLEED_SECTION\",\r\n CALENDAR_INVITATION: \"CALENDAR_INVITATION\",\r\n SIMPLE: \"SIMPLE\",\r\n MULTI: \"MULTI\",\r\n};\r\nexport const emailElementFamilyTypes = {\r\n text: \"text\",\r\n button: \"button\",\r\n};\r\n","import React, { useState } from \"react\";\r\nimport {\r\n Row,\r\n Col,\r\n InputGroup,\r\n Input,\r\n InputGroupAddon,\r\n InputGroupText\r\n} from \"reactstrap\";\r\nimport ArchiveContainer from \"../../../../../file/containers/ArchiveContainer\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport LinkIcon from '@material-ui/icons/Link';\r\nimport \"./UrlMultiInput.css\";\r\nimport LinkManager from \"../../../../../navigation/LinkManager/LinkManager\";\r\n\r\nexport const UrlMultiInput = ({ url, onChange, setImage, path, target = '_blank', onOpen = null, externalSourceOnly = false, margin = true, cropSizes = null, linkHelper = false, rowStyle = {}, colStyle = {} }) => {\r\n const [vaultOpen, setOpen] = useState(false);\r\n const [linkHelperOpen, setLinkeHelperOpen] = useState(false);\r\n const toggle = () => {\r\n setOpen(!vaultOpen);\r\n if (onOpen && typeof onOpen == 'function') onOpen(!vaultOpen);\r\n }\r\n const toggleLinkHelper = () => setLinkeHelperOpen(!linkHelperOpen);\r\n\r\n const handlePaste = () => {\r\n navigator.clipboard.readText().then(text => {\r\n if (text.includes(\"https://\") || text.includes(\"data:image/\")) {\r\n if (path) {\r\n onChange(null, text, path)\r\n } else {\r\n onChange(text);\r\n }\r\n }\r\n });\r\n };\r\n const setLink = (obj) => {\r\n if (path) {\r\n onChange(null, obj.currentLink, path)\r\n } else {\r\n onChange(obj.currentLink);\r\n }\r\n }\r\n const handleInput = (e) => {\r\n let text = e.target.value\r\n if (path) {\r\n onChange(null, text, path)\r\n } else {\r\n onChange(text);\r\n }\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n : null}\r\n {linkHelper === true ? \r\n \r\n : null}\r\n \r\n \r\n
\r\n );\r\n};\r\n","export const sourceTypes = {\r\n PAGE: 'PAGE',\r\n TEMPLATE: 'TEMPLATE',\r\n FORM: 'FORM',\r\n EMAIL: 'EMAIL',\r\n INTERACTION: 'INTERACTION',\r\n MEETING: 'MEETING'\r\n\r\n};\r\n","import React, { useState } from 'react';\r\nimport PaletteIcon from '@material-ui/icons/Palette';\r\nimport { Tooltip } from '@material-ui/core';\r\nimport { labelHelper } from '../../../../helpers/labelHelper';\r\nimport Zoom from '@material-ui/core/Zoom';\r\nimport CallSplitIcon from '@material-ui/icons/CallSplit';\r\nimport AutorenewIcon from '@material-ui/icons/Autorenew';\r\nimport './UseTemplateButton.css'\r\n\r\nexport const UseTemplateButton = (props) => {\r\n const { id, onClick, active } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\nexport const SetStyleToAllOfItsType = (props) => {\r\n const { id, onClick, active } = props;\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n )\r\n}\r\nexport const SetToAuto = (props) => {\r\n const { id, onClick, active } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}","export const arrayHelper = {\r\n concat,\r\n getMaxVal,\r\n getMinVal,\r\n arraysEqual,\r\n getMaxValue,\r\n findByParam,\r\n sortByParam\r\n};\r\n\r\nfunction concat(...args) {\r\n return args.reduce((acc, val) => [...acc, ...val]);\r\n}\r\n\r\nfunction getMaxVal(propName, array) {\r\n return Math.max.apply(\r\n Math,\r\n array.map(o => {\r\n return o[propName];\r\n })\r\n );\r\n}\r\n\r\nfunction getMaxValue(array, param) {\r\n return array.length > 0\r\n ? Math.max.apply(\r\n Math,\r\n array.map(o => {\r\n return o[param];\r\n })\r\n ) + 1\r\n : 1;\r\n\r\n}\r\n\r\nfunction sortByParam(array, param) {\r\n if (array === null) { return []; }\r\n if (array.length < 1) { return []; }\r\n const updatedArray = Array.from(array);\r\n updatedArray.sort((a, b) => {\r\n let x = a[param];\r\n let y = b[param];\r\n return y < x ? 1 : y > x ? -1 : 0;\r\n });\r\n return updatedArray;\r\n}\r\n\r\n\r\n\r\n\r\nfunction findByParam(array, param, value) {\r\n var element = array.find((el) => {\r\n return el[param] === value;\r\n });\r\n if (!element) { return null; }\r\n return Object.assign({}, element);\r\n}\r\n\r\nfunction getMinVal(propName, array) {\r\n Math.min.apply(\r\n Math,\r\n array.map(o => {\r\n return o[propName];\r\n })\r\n );\r\n}\r\n\r\n\r\nfunction arraysEqual(arr1, arr2) {\r\n if (arr1.length !== arr2.length)\r\n return false;\r\n for (var i = arr1.length; i--;) {\r\n if (arr1[i] !== arr2[i])\r\n return false;\r\n }\r\n\r\n return true;\r\n}","export const cmsConstants = {\r\n EDIT_MODE_ON: \"EDIT_MODE_ON\",\r\n EDIT_MODE_OFF: \"EDIT_MODE_OFF\",\r\n SET_ENVIROMENT: \"SET_ENVIROMENT\",\r\n SET_ENVIROMENT_LANG: \"SET_ENVIROMENT_LANG\",\r\n CONTAINER_UPDATED: \"CONTAINER_UPDATED\",\r\n CONTAINER_TO_UPDATE: \"CONTAINER_TO_UPDATE\",\r\n CONTAINER_ADDED: \"CONTAINER_ADDED\",\r\n SET_SOURCE_LOCATION: \"SET_SOURCE_LOCATION\",\r\n LOAD_CLIENT_FONTS: \"LOAD_CLIENT_FONTS\",\r\n REMOVE_CLIENT_FONT: \"REMOVE_CLIENT_FONT\",\r\n ADD_CLIENT_FONT: \"ADD_CLIENT_FONT\",\r\n\r\n ALERT_NEW_MODIFICATIONS: \"ALERT_NEW_MODIFICATIONS\",\r\n GLOBAL_SAVING_LOADER: \"IS_LOADING\",\r\n TOGGLE_INHERITAGE_INFO: 'TOGGLE_INHERITAGE_INFO',\r\n INHERITAGE_AFFECTED: 'INHERITAGE_AFFECTED',\r\n GLOBAL_SAVING_LOADER: \"IS_LOADING\",\r\n BLOCK_DESELECT: 'BLOCK_DESELECT'\r\n};\r\n","export const pageConstants = {\r\n PAGE_ATTACH: \"PAGE_ATTACH\",\r\n PAGE_SELECT: \"PAGE_SELECT\",\r\n DESELECT_PAGE_ELEMENT: \"DESELECT_PAGE_ELEMENT\",\r\n DELETE_PAGE_ELEMENT: \"DELETE_PAGE_ELEMENT\",\r\n\r\n SOFT_UPDATE_PAGE: \"SOFT_UPDATE_PAGE\",\r\n \r\n\r\n UPDATE_PAGE_SUCCESS: \"UPDATE_PAGE_SUCCESS\",\r\n UPDATE_PAGE_REQUEST: \"UPDATE_PAGE_REQUEST\",\r\n UPDATE_PAGE_FAILURE: \"UPDATE_PAGE_FAILURE\",\r\n \r\n GET_PAGE_REQUEST: \"GET_PAGE_REQUEST\",\r\n GET_PAGE_SUCCESS: \"GET_PAGE_SUCCESS\",\r\n GET_PAGE_FAILURE: \"GET_PAGE_FAILURE\",\r\n\r\n \r\n GET_ALL_PAGE_PATHS: 'GET_ALL_PAGE_PATHS',\r\n\r\n GET_PAGES_BY_REQUEST: \"GET_PAGES_BY_REQUEST\",\r\n GET_PAGES_BY_SUCCESS: \"GET_PAGES_BY_SUCCESS\",\r\n GET_PAGES_BY_FAILURE: \"GET_PAGES_BY_FAILURE\",\r\n \r\n \r\n UPDATE_PAGE_ELEMENT: \"UPDATE_PAGE_ELEMENT\",\r\n \r\n RESTORE_PAGE: \"RESTORE_PAGE\",\r\n \r\n ADD_VIEW_PAGE: \"ADD_VIEW_PAGE\",\r\n REMOVE_VIEW_PAGE: \"REMOVE_VIEW_PAGE\",\r\n NAVIGATE_PAGE: \"NAVIGATE_PAGE\"\r\n/* SCROLL_PAGE: \"SCROLL_PAGE\" */\r\n };\r\n ","export const userConstants = {\r\n LOGIN_REQUEST: 'USERS_LOGIN_REQUEST',\r\n LOGIN_SUCCESS: 'USERS_LOGIN_SUCCESS',\r\n LOGIN_FAILURE: 'USERS_LOGIN_FAILURE',\r\n\r\n REGISTER_REQUEST: 'USERS_REGISTER_REQUEST',\r\n REGISTER_SUCCESS: 'USERS_REGISTER_SUCCESS',\r\n REGISTER_FAILURE: 'USERS_REGISTER_FAILURE',\r\n\r\n LOGOUT: 'USERS_LOGOUT',\r\n\r\n SET_DEFAULT_EVENT_REQUEST:'SET_DEFAULT_EVENT_REQUEST',\r\n SET_DEFAULT_EVENT_SUCCESS:'SET_DEFAULT_EVENT_SUCCESS',\r\n SET_DEFAULT_EVENT_FAILURE:'SET_DEFAULT_EVENT_FAILURE',\r\n\r\n GETALL_REQUEST: 'USERS_GETALL_REQUEST',\r\n GETALL_SUCCESS: 'USERS_GETALL_SUCCESS',\r\n GETALL_FAILURE: 'USERS_GETALL_FAILURE',\r\n\r\n GET_ACCOUNT_DETAILS_REQUEST: 'GET_ACCOUNT_DETAILS_REQUEST',\r\n GET_ACCOUNT_DETAILS_SUCCESS: 'GET_ACCOUNT_DETAILS_SUCCESS',\r\n GET_ACCOUNT_DETAILS_FAILURE: 'GET_ACCOUNT_DETAILS_FAILURE',\r\n\r\n UPDATE_REQUEST: 'USERS_UPDATE_REQUEST',\r\n UPDATE_SUCCESS: 'USERS_UPDATE_SUCCESS',\r\n UPDATE_FAILURE: 'USERS_UPDATE_FAILURE',\r\n TOGGLE_ADMIN_REQUEST:'TOGGLE_ADMIN_REQUEST',\r\n TOGGLE_ADMIN_SUCCESS:'TOGGLE_ADMIN_SUCCESS',\r\n TOGGLE_ADMIN_FAILURE:'TOGGLE_ADMIN_FAILURE',\r\n\r\n \r\n SENDRESETPASSWORDTOKEN_REQUEST: 'SENDRESETPASSWORDTOKEN_REQUEST',\r\n SENDRESETPASSWORDTOKEN_SUCCESS: 'SENDRESETPASSWORDTOKEN_SUCCESS',\r\n SENDRESETPASSWORDTOKEN_FAILURE: 'SENDRESETPASSWORDTOKEN_FAILURE',\r\n\r\n \r\n RESETPASSWORD_REQUEST: 'RESETPASSWORD_UPDATE_REQUEST',\r\n RESETPASSWORD_SUCCESS: 'RESETPASSWORD_UPDATE_SUCCESS',\r\n RESETPASSWORD_FAILURE: 'RESETPASSWORD_UPDATE_FAILURE'\r\n};","export const archiveConstants = {\r\n CLIENT_STORAGE: 'CLIENT_STORAGE',\r\n UNSPLASH: 'UNSPLASH',\r\n FONT: 'FONT',\r\n IMAGE: 'IMAGE',\r\n\r\n GRID: 'GRID',\r\n LIST: 'LIST',\r\n\r\n OTHERS: [\r\n 'pdf'\r\n ],\r\n IMAGE: [\r\n 'jpeg',\r\n 'png',\r\n 'gif'\r\n ],\r\n FONT: [\r\n \"abf\",\r\n \"acfm\",\r\n \"afm\",\r\n \"amfm\",\r\n \"bdf\",\r\n \"cha\",\r\n \"chr\",\r\n \"compositefont\",\r\n \"dfont\",\r\n \"eot\",\r\n \"etx\",\r\n \"euf\",\r\n \"f3f\",\r\n \"fea\",\r\n \"ffil\",\r\n \"fnt\",\r\n \"fon\",\r\n \"fot\",\r\n \"gdr\",\r\n \"gf\",\r\n \"glif\",\r\n \"gxf\",\r\n \"lwfn\",\r\n \"mcf\",\r\n \"mf\",\r\n \"mxf\",\r\n \"nftr\",\r\n \"odttf\",\r\n \"otf\",\r\n \"pcf\",\r\n \"pfa\",\r\n \"pfb\",\r\n \"pfm\",\r\n \"pfr\",\r\n \"pk\",\r\n \"pmt\",\r\n \"sfd\",\r\n \"sfp\",\r\n \"suit\",\r\n \"t65\",\r\n \"tfm\",\r\n \"ttc\",\r\n \"tte\",\r\n \"ttf\",\r\n \"txf\",\r\n \"ufo\",\r\n \"vfb\",\r\n \"vlw\",\r\n \"vnf\",\r\n \"woff\",\r\n \"woff2\",\r\n \"xfn\",\r\n \"xft\",\r\n \"ytf\",\r\n ]\r\n\r\n}","import { elementConstants } from \"../../../../constants/cms/form/element/element.constants\";\r\nimport { store } from \"../../../../store/configureStore\";\r\nimport { toCamelCase } from \"../../../../helpers/objectHelper\";\r\n\r\n//Available sourceelements that can with interaction resolve conditions\r\nconst navigate = element => {\r\n const attendee = store.getState().attendee;\r\n if (attendee && attendee.orders) {\r\n let order = attendee.orders[attendee.activePersonNo];\r\n if (element !== undefined && order !== undefined) {\r\n\r\n switch (element.type) {\r\n case elementConstants.FIELD:\r\n return fieldHandler(element, order);\r\n case elementConstants.QUESTION:\r\n return questionHandler(element, order);\r\n case elementConstants.EVENT:\r\n return eventHandler(element, order);\r\n default:\r\n return null;\r\n }\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nconst fieldHandler = (element, order) => {\r\n let type = order[toCamelCase(element.props.type)];\r\n if (type) {\r\n let val = type[toCamelCase(element.props.name)];\r\n if (val) {\r\n return val;\r\n }\r\n }\r\n return null;\r\n};\r\nconst questionHandler = (element, order) => {\r\n if (element.props.type === \"Text\") {\r\n if (order.answer) {\r\n let answer = order.answer.find(a => a.questionId == element.id);\r\n if (answer && answer.answerRow && answer.answerRow.length > 0) {\r\n let row = answer.answerRow.find(ar => ar.questionOptionId == 0);\r\n if (row && !row.deleted) {\r\n return row.text;\r\n }\r\n }\r\n }\r\n }\r\n if (element.props.type === \"Option\") {\r\n if (element.props.options.length > 0) {\r\n const options = element.props.options;\r\n let checkedOptions = options.filter(o => {\r\n if (order.answer) {\r\n let answer = order.answer.find(a => a.questionId == element.id);\r\n if (answer && answer.answerRow && answer.answerRow.length > 0) {\r\n let row = answer.answerRow.find(\r\n ar => ar.questionOptionId == o.optionId\r\n );\r\n if (row && !row.deleted) {\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n });\r\n return checkedOptions;\r\n }\r\n }\r\n return null;\r\n};\r\nconst eventHandler = (element, order) => {\r\n if (order.orderRow) {\r\n let row = order.orderRow.find(or => or.eventId == element.id);\r\n if (row && !row.deleted) {\r\n return true;\r\n }\r\n }\r\n return null;\r\n};\r\nexport const conditionNavigator = {\r\n navigate\r\n};\r\n","import { conditionConstants } from \"./condition.constants\";\r\n\r\nexport const conditionTranslator = {\r\n translateOperator\r\n};\r\n\r\n// const translateOperator = (condition, value, expected) => {\r\n// switch (condition) {\r\n// case conditionConstants.EQUAL:\r\n// return value === expected;\r\n// case conditionConstants.NOT_EQUAL:\r\n// return value !== expected;\r\n// case conditionConstants.GREATER_THAN:\r\n// return value > expected;\r\n// case conditionConstants.LESS_THAN:\r\n// return value < expected;\r\n// case conditionConstants.LESS_THAN_OR_EQUAL_TO:\r\n// return value <= expected;\r\n// case conditionConstants.GREATER_THAN_OR_EQUAL_TO:\r\n// return value >= expected;\r\n// case conditionConstants.ALL:\r\n// return value <= expected;\r\n// case conditionConstants.ANY:\r\n// return value.includes(expected);\r\n// case conditionConstants.NOT:\r\n// return !value.includes(expected);\r\n\r\n// default:\r\n// break;\r\n// }\r\n// };\r\n\r\nfunction translateOperator (operator){\r\n switch (operator) {\r\n case conditionConstants.operators.EQUAL:\r\n return \"==\";\r\n case conditionConstants.operators.NOT_EQUAL:\r\n return \"!=\";\r\n case conditionConstants.operators.GREATER_THAN:\r\n return \">\";\r\n case conditionConstants.operators.LESS_THAN:\r\n return \"<\";\r\n case conditionConstants.operators.LESS_THAN_OR_EQUAL_TO:\r\n return \"<=\";\r\n case conditionConstants.operators.GREATER_THAN_OR_EQUAL_TO:\r\n return \">=\";\r\n case conditionConstants.operators.AND:\r\n return \"&&\";\r\n case conditionConstants.operators.OR:\r\n return \"||\";\r\n // case conditionConstants.ALL:\r\n // return value <= expected;\r\n // case conditionConstants.ANY:\r\n // return value.includes(expected);\r\n // case conditionConstants.NOT:\r\n // return !value.includes(expected);\r\n\r\n default:\r\n return \"\"\r\n }\r\n};\r\n","import React from 'react';\r\nimport {\r\n Navbar,\r\n Nav,\r\n NavItem,\r\n Button,\r\n} from 'reactstrap';\r\nimport SystemLabel from '../../system/SystemLabel/SystemLabel';\r\n\r\nexport default class ArchiveHeader extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.toggle = this.toggle.bind(this);\r\n this.state = {\r\n isOpen: false,\r\n isCopied: false\r\n };\r\n }\r\n copyLink = () => {\r\n \r\n navigator.clipboard.writeText(this.props.selectedFile.url?.replace(/ /g, '%20'))\r\n this.setState({ isCopied: true }, () => {\r\n setTimeout(() => {\r\n this.setState({ isCopied: false })\r\n }, 3000)\r\n })\r\n }\r\n toggle() {\r\n this.setState({\r\n isOpen: !this.state.isOpen\r\n });\r\n }\r\n\r\n render() {\r\n const { onUpload, selectedFile, onUseSelected, crop, onDelete, fontEnabled } = this.props;\r\n\r\n return (\r\n \r\n \r\n < Nav navbar>\r\n \r\n \r\n \r\n \r\n {selectedFile && selectedFile.type.includes('image/') && fontEnabled === false}\r\n {/* {fontEnabled} */}\r\n {(selectedFile !== null && selectedFile.type.includes('image/') && fontEnabled === false) && \r\n onUseSelected()}>\r\n \r\n }\r\n {(selectedFile !== null && selectedFile.type.includes('font/') && fontEnabled === true) && \r\n onUseSelected()}>\r\n \r\n }\r\n \r\n {selectedFile && \r\n onDelete()}>\r\n \r\n }\r\n {/* ADD A TYPE CHECK LATER */}\r\n {/* {selectedFile && selectedFile.type.includes('image/') && \r\n crop()}>\r\n \r\n } */}\r\n {selectedFile !== null ? \r\n this.copyLink()}>\r\n {this.state.isCopied ? \r\n : null}\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport {\r\n Container,\r\n Row,\r\n Col,\r\n} from 'reactstrap';\r\nimport '../style/SelectedFileOverlay.css';\r\nimport { ArchiveFilterBar } from '../components/ArchiveFilterBar';\r\nimport { archiveConstants } from '../contstants/archive.contstants';\r\nimport { Style } from 'react-style-tag';\r\n\r\nexport default class ArchiveContent extends React.Component {\r\n state = {\r\n files: [],\r\n isOpen: false,\r\n display: archiveConstants.GRID,\r\n filterString: ''\r\n\r\n }\r\n toggle = () => {\r\n this.setState(prevState => ({\r\n modal: !prevState.modal\r\n }));\r\n }\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.files !== this.props.files && this.props.files !== undefined) {\r\n const { files } = this.props;\r\n this.setState({ files });\r\n }\r\n }\r\n componentDidMount() {\r\n const { files } = this.props;\r\n this.setState({\r\n files\r\n })\r\n }\r\n filterFiles = (str) => {\r\n this.setState({ filterString: str })\r\n }\r\n toggleDisplayType = (dt) => {\r\n this.setState({ display: dt });\r\n }\r\n convertFont = (f) => {\r\n return f.substring(f.lastIndexOf('/') + 1, f.lastIndexOf('.') + 1).toString()\r\n .replace(')', '')\r\n .replace('(', '').replace('.', '').replace('1', '').replace('', '');\r\n }\r\n render() {\r\n const { files, filterString, display } = this.state;\r\n const { selectedFile, onSelect, type } = this.props;\r\n return (\r\n \r\n
\r\n {\r\n return (this.props.filterType.includes(f.type.substring(f.type.lastIndexOf('/') + 1).toUpperCase()) ||\r\n this.props.filterType.includes(f.type.substring(f.type.lastIndexOf('/') + 1).toLowerCase())) && f.name.toLowerCase().includes(filterString.toLowerCase())\r\n }).length} />\r\n \r\n\r\n
\r\n\r\n \r\n {files && files.filter((f, i) => {\r\n return (this.props.filterType.includes(f.type.substring(f.type.lastIndexOf('/') + 1).toUpperCase()) ||\r\n this.props.filterType.includes(f.type.substring(f.type.lastIndexOf('/') + 1).toLowerCase())) &&\r\n f.name.toLowerCase().includes(filterString.toLowerCase()) && f\r\n }).map((f, i) => {\r\n return (\r\n \r\n\r\n {f.type.includes('image') &&\r\n \r\n }\r\n {f.type.includes('font') &&\r\n \r\n
{this.convertFont(f.name)}
\r\n
{this.convertFont(f.name)}
\r\n
{this.convertFont(f.name)}
\r\n \r\n
\r\n
\r\n }\r\n
\r\n \r\n \r\n {f.name.substring(f.name.lastIndexOf('/') + 1, 18)}.. \r\n\r\n {!f.type.includes('pdf') ? \r\n {Math.round((f.size * 0.001) * 10) / 10}\r\n {\" kB \"}\r\n :\r\n f.type\r\n }\r\n \r\n
\r\n {selectedFile &&\r\n selectedFile.name === f.name && \r\n \r\n\r\n \r\n
}\r\n \r\n )\r\n })}\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\nconst ColorLinearProgress = withStyles({\r\n colorPrimary: {\r\n backgroundColor: '#17a2b854',\r\n },\r\n barColorPrimary: {\r\n backgroundColor: '#17a2b8',\r\n },\r\n})(LinearProgress);","import React from 'react';\r\nimport '../style/Unsplash.css'\r\nimport {\r\n Container,\r\n Row,\r\n Col,\r\n} from 'reactstrap';\r\nimport { ArchiveFilterBar } from './ArchiveFilterBar';\r\nimport '../style/DownloadFileOverlay.css';\r\n\r\nconst MY_ACCESS_KEY = \"2481e8fefcab0eb5996904a74156419cac77f5eb9d5647c2e943a6b71f9e74e5\"\r\n\r\nclass UnsplashPlugin extends React.Component {\r\n state = {\r\n files: [],\r\n matches: 0\r\n }\r\n componentDidMount() {\r\n this.download();\r\n }\r\n download() {\r\n fetch('https://api.unsplash.com/photos/?query=event&page=10&per_page=100&client_id=' + MY_ACCESS_KEY)\r\n .then(res => res.json())\r\n .then(data => {\r\n this.setState({ files: data, matches: data.length })\r\n })\r\n .catch(err => {\r\n console.log('Error happened during fetching!', err);\r\n });\r\n }\r\n\r\n filter = (str) => {\r\n if (str !== \"\" && str.length >= 3) {\r\n fetch(`https://api.unsplash.com/search/photos/?query=${str}&page=2&per_page=100&client_id=${MY_ACCESS_KEY}`)\r\n .then(res => res.json())\r\n .then(data => {\r\n this.setState({ files: data.results, matches: /* data.total */data.results.length })\r\n })\r\n .catch(err => {\r\n console.log('Error happened during fetching!', err);\r\n });\r\n }\r\n else {\r\n this.download();\r\n }\r\n }\r\n onMouseEnter = (file) => {\r\n this.props.onSelect(file, true)\r\n }\r\n onMouseLeave = () => {\r\n this.props.onSelect(null, true)\r\n }\r\n render() {\r\n const { files } = this.state;\r\n const { unsplashFile, onSelect, download } = this.props;\r\n return (\r\n \r\n
\r\n \r\n\r\n
\r\n\r\n \r\n {files && files.length > 0 && files.map((f, i) => {\r\n return (\r\n \r\n \r\n
\r\n
this.onMouseEnter(f)}\r\n onMouseLeave={() => this.onMouseLeave} className=\"archive-download-overlay\">\r\n \r\n download(f)} className=\"fa fa-download\"> \r\n \r\n
{/* } */}\r\n
\r\n \r\n \r\n \r\n {f.height + 'x' + f.width}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n )\r\n })}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this._aspectRatio(1 / 1)} >1:1 \r\n this._aspectRatio(4 / 3)}>4:3 \r\n this._aspectRatio(16 / 9)}>16:9 \r\n \r\n {' '}\r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default ImageCropper;\r\n","import { toJS } from \"mobx\";\r\nimport { toCamelCase } from \"./objectHelper\";\r\n\r\n//Available sourceelements that can with interaction resolve conditions\r\nconst navigate = (module, orders, activePersonNo) => {\r\n if (orders) {\r\n let order = toJS(orders)[activePersonNo];\r\n if (module !== undefined && order !== undefined) {\r\n switch (module.contentModule.type) {\r\n case \"FIELD\":\r\n return fieldHandler(module, order);\r\n case \"QUESTION\":\r\n return questionHandler(module, order);\r\n case \"EVENT\":\r\n return eventHandler(module, order);\r\n case \"EVENT_GROUP\":\r\n return eventGroupHandler(module, order);\r\n default:\r\n return null;\r\n }\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nconst fieldHandler = (module, order) => {\r\n let type = order[toCamelCase(module.contentModule.settings.type)];\r\n if (type) {\r\n let val = type[toCamelCase(module.contentModule.settings.fieldType)];\r\n if (val) {\r\n return val;\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nconst questionHandler = (module, order) => {\r\n if (module.contentModule.settings.type === \"text\") {\r\n if (order.answer) {\r\n let answer = order.answer.find((a) => a.questionId == module.contentModule.settings.questionId);\r\n if (answer && answer.answerRow && answer.answerRow.length > 0) {\r\n let row = answer.answerRow.find((ar) => ar.questionOptionId == 0);\r\n if (row && !row.deleted) {\r\n return row.text;\r\n }\r\n }\r\n }\r\n }\r\n if (module.contentModule.settings.type === \"option\") {\r\n let checkedOptions = order?.answer?.find((a) => a.questionId == module.contentModule.settings.questionId)?.answerRow;\r\n if (!checkedOptions) return null;\r\n\r\n return checkedOptions.map((co) => {\r\n return co.questionOptionId;\r\n });\r\n }\r\n return null;\r\n};\r\n\r\nconst eventHandler = (module, order) => {\r\n if (order.orderRow) {\r\n console.log(module, order);\r\n let row = order.orderRow.find((or) => or.eventId == module.contentModule.settings.eventId);\r\n if (row && !row.deleted) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n};\r\n\r\nconst eventGroupHandler = (module, order) => {\r\n const moduleEventIds = module?.contentModule?.settings?.eventIds?.map((e) => e.eventId) ?? [];\r\n if (order.orderRow) {\r\n return order.orderRow\r\n .filter((or) => !or.deleted && or.eventId !== order.eventId && moduleEventIds.includes(or.eventId))\r\n .map((or) => {\r\n return or.eventId;\r\n });\r\n }\r\n return [];\r\n};\r\n\r\nexport const conditionNavigator = {\r\n navigate,\r\n};\r\n","import React from \"react\";\r\nimport { Row, Label, Button, ButtonGroup, Col } from \"reactstrap\";\r\nimport SystemLabel from \"../../../../../system/SystemLabel/SystemLabel\";\r\nimport './AlignmentButtonGroup.css'\r\n\r\nexport const AlignmentButtonGroup = ({ onChange, alignment, path }) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n onChange(null, \"left\", path)}\r\n >\r\n onChange(null,\"center\", path)}\r\n >\r\n onChange(null, \"right\", path)}\r\n >\r\n \r\n \r\n
\r\n );\r\n};\r\n"],"sourceRoot":""} 
![](\"https://i.pinimg.com/originals/4f/73/04/4f730422d664b00ea08f63be8132232e.gif\"\r\n)
\r\n ![](\"https://blog.reepay.com/wp-content/uploads/2017/04/DIBS.png\"\r\n)
\r\n ![]({\"https://images.iphonephotographyschool.com/22686/1120b/How-To-Blur-Background-On-iPhone.jpg\"})
\r\n {/* ![]({\"https://www.marcobehler.com/images/guides/undraw_security_o890-526cc2fb.svg\"})
\r\n {children}\r\n \r\n );\r\n};\r\n","import { formActions } from './form/form.action';\r\nimport { elementActions } from './element/element.action';\r\nimport { cmsConstants } from '../../../constants/cms/cms.constants';\r\nimport { fileService } from '../../../services/file/file.service';\r\nimport { authHeader } from '../../../helpers/authHeader';\r\nimport { handleResponse } from '../../../helpers/handleresponse';\r\n\r\nexport const cmsActions = {\r\n setSourceLocation,\r\n setEnviroment,\r\n setEnviromentLang, \r\n containerToUpdate,\r\n containerUpdated,\r\n containerAdded,\r\n loadClientFonts,\r\n getClientFonts,\r\n getFonts,\r\n removeFont,\r\n addFont,\r\n alertNewModifications,\r\n globalSavingLoader,\r\n toggleInheritageInfo,\r\n inheritageAffected,\r\n blockDeselect\r\n}\r\n\r\nfunction globalSavingLoader(isLoading) {\r\n return dispatch => {\r\n dispatch(success(isLoading));\r\n };\r\n function success(model) {\r\n return { type: cmsConstants.GLOBAL_SAVING_LOADER, isLoading};\r\n }\r\n}\r\nfunction blockDeselect(isBlocked) {\r\n return dispatch => {\r\n dispatch(success(isBlocked));\r\n };\r\n function success(model) {\r\n return { type: cmsConstants.BLOCK_DESELECT, isBlocked};\r\n }\r\n}\r\n\r\nfunction alertNewModifications(isModified, source, callback) {\r\n\r\n return dispatch => {\r\n dispatch(success(isModified, source, callback));\r\n };\r\n function success(model) {\r\n return { type: cmsConstants.ALERT_NEW_MODIFICATIONS, isModified, source, callback };\r\n }\r\n}\r\n\r\nfunction loadClientFonts(fonts) {\r\n return dispatch => {\r\n dispatch(success(fonts));\r\n };\r\n function success(fonts) {\r\n return { type: cmsConstants.LOAD_CLIENT_FONTS, fonts };\r\n }\r\n}\r\nfunction removeFont(font) {\r\n return dispatch => {\r\n dispatch(success(font));\r\n };\r\n function success(font) {\r\n return { type: cmsConstants.REMOVE_CLIENT_FONT, font };\r\n }\r\n}\r\nfunction addFont(font) {\r\n return dispatch => {\r\n dispatch(success(font));\r\n };\r\n function success(font) {\r\n return { type: cmsConstants.ADD_CLIENT_FONT, font };\r\n }\r\n}\r\n\r\n\r\nfunction inheritageAffected(isAffected){\r\n return dispatch => {\r\n dispatch(success(isAffected));\r\n };\r\n function success(isAffected) {\r\n return { type: cmsConstants.INHERITAGE_AFFECTED, isAffected };\r\n }\r\n}\r\nfunction toggleInheritageInfo(on){\r\n return dispatch => {\r\n dispatch(success(on));\r\n };\r\n function success(on) {\r\n return { type: cmsConstants.TOGGLE_INHERITAGE_INFO, on };\r\n }\r\n}\r\nfunction getClientFonts(eventId) {\r\n return dispatch => {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n };\r\n fetch(`./api/files/fonts/${eventId}`, requestOptions)\r\n .then(handleResponse)\r\n .then(data => {\r\n if (data.files !== undefined) {\r\n let clientFonts = [];\r\n data.files.map(f => {\r\n\r\n clientFonts.push({\r\n name: f.name.substring(f.name.lastIndexOf('/') + 1, f.name.lastIndexOf('.') + 1).toString()\r\n .replace(')', '')\r\n .replace('(', '').replace('.', '').replace('1', '').replace('', ''), url: f.url\r\n });\r\n });\r\n dispatch(success(clientFonts));\r\n }\r\n\r\n })\r\n };\r\n function success(fonts) {\r\n return { type: cmsConstants.LOAD_CLIENT_FONTS, fonts };\r\n }\r\n}\r\nfunction getFonts(eventId) {\r\n\r\n return dispatch => {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n };\r\n fetch(`./api/files/?format=font`, requestOptions)\r\n .then(handleResponse)\r\n .then(data => {\r\n let clientFonts = [];\r\n if (data.files === undefined) { return; }\r\n data.files.map(f => {\r\n\r\n clientFonts.push({\r\n name: f.name.substring(f.name.lastIndexOf('/') + 1, f.name.lastIndexOf('.') + 1).toString()\r\n .replace(')', '')\r\n .replace('(', '').replace('.', '').replace('1', '').replace('', ''), url: f.url\r\n });\r\n });\r\n dispatch(success(clientFonts));\r\n })\r\n };\r\n function success(fonts) {\r\n return { type: cmsConstants.LOAD_CLIENT_FONTS, fonts };\r\n }\r\n}\r\n\r\n\r\n//Remove these?\r\nfunction containerToUpdate(container) {\r\n return dispatch => {\r\n dispatch(success(container));\r\n };\r\n function success(container) {\r\n return { type: cmsConstants.CONTAINER_TO_UPDATE, container };\r\n }\r\n}\r\nfunction containerUpdated() {\r\n return dispatch => {\r\n dispatch(success());\r\n };\r\n function success() {\r\n return { type: cmsConstants.CONTAINER_UPDATED };\r\n }\r\n}\r\nfunction containerAdded(container) {\r\n return dispatch => {\r\n dispatch(success(container));\r\n };\r\n function success(container) {\r\n return { type: cmsConstants.CONTAINER_ADDED, container };\r\n }\r\n}\r\n\r\n\r\nfunction setEnviroment(env, editMode = false, eventId, languageCode) {\r\n return dispatch => {\r\n dispatch(success(env, editMode));\r\n };\r\n function success(env) {\r\n return { type: cmsConstants.SET_ENVIROMENT, env, editMode, eventId, languageCode };\r\n }\r\n}\r\nfunction setEnviromentLang(languageCode) {\r\n return dispatch => {\r\n dispatch({ type: cmsConstants.SET_ENVIROMENT_LANG, languageCode });\r\n };\r\n \r\n}\r\n\r\nfunction setSourceLocation(sourceLoc, env) {\r\n return dispatch => {\r\n dispatch(success(sourceLoc, env));\r\n };\r\n function success(sourceLoc, env) {\r\n return { type: cmsConstants.SET_SOURCE_LOCATION, sourceLoc, env };\r\n }\r\n}\r\n","import { lsgetItem } from \"./localStorageHelper\";\r\nimport { getKey } from \"./UrlHelper\";\r\n\r\nexport function authHeader(headers) {\r\n // return authorization header with jwt token\r\n let user = lsgetItem('user');\r\n let eventId = null;\r\n let languageCode = null;\r\n if (window.location.search) {\r\n const params = new URLSearchParams(window.location.search);\r\n let unparsedEventId = params.get(getKey(\"eventId\", params));\r\n if (unparsedEventId) eventId = parseInt(unparsedEventId)\r\n languageCode = params.get(getKey(\"languageCode\", params));\r\n }\r\n if (user && !eventId) {\r\n eventId = user.eid === undefined ? user.token.eid : user.eid;\r\n }\r\n if (user && !languageCode) {\r\n languageCode = user.userLang === undefined ? user.token.userLang : user.userLang;\r\n }\r\n if (!languageCode) languageCode = \"swe\";\r\n if (user && user.token) {\r\n return { ...headers, Authorization: \"Bearer \" + user.token.toString(), eid: eventId, userLang: languageCode };\r\n } else {\r\n return { ...headers, eid: eventId, userLang: languageCode };\r\n }\r\n}\r\n\r\n\r\n","import { cmsConstants } from \"../../../constants/cms/cms.constants\";\r\n\r\nconst initialState = {\r\n editMode: true,\r\n containerToUpdate: null,\r\n containerAdded: null,\r\n fonts: [],\r\n showMergeAlert: false,\r\n mergeDescription: [],\r\n mergeSource: '',\r\n isSaving: false,\r\n inheritInfo: false,\r\n inheritageAffected: false,\r\n deselectionBlocked: false\r\n};\r\n\r\nexport function cms(state = initialState, action) {\r\n switch (action.type) {\r\n case cmsConstants.LOAD_CLIENT_FONTS:\r\n return {\r\n ...state,\r\n fonts: action.fonts\r\n };\r\n case cmsConstants.REMOVE_CLIENT_FONT:\r\n const newFonts = Array.from(state.fonts);\r\n const index = state.fonts.indexOf(newFonts.find(f => { return f.name === action.font.name }));\r\n newFonts.splice(index, 1);\r\n return {\r\n ...state,\r\n fonts: newFonts\r\n };\r\n case cmsConstants.ALERT_NEW_MODIFICATIONS:\r\n\r\n return {\r\n ...state,\r\n mergeSource: !action.isModified ? [] : [...state.mergeSource, action.source],\r\n showMergeAlert: action.isModified,\r\n mergeCallback: action.isModified ? action.callback : null\r\n }\r\n case cmsConstants.BLOCK_DESELECT:\r\n return {\r\n ...state,\r\n deselectionBlocked: action.isBlocked\r\n };\r\n case cmsConstants.GLOBAL_SAVING_LOADER:\r\n return {\r\n ...state,\r\n isSaving: action.isLoading\r\n };\r\n case cmsConstants.INHERITAGE_AFFECTED:\r\n return {\r\n ...state,\r\n inheritageAffected: action.isAffected\r\n };\r\n case cmsConstants.TOGGLE_INHERITAGE_INFO:\r\n return {\r\n ...state,\r\n inheritInfo: action.on\r\n };\r\n case cmsConstants.ADD_CLIENT_FONT:\r\n return {\r\n ...state,\r\n fonts: [...state.fonts, action.font]\r\n };\r\n case cmsConstants.SET_SOURCE_LOCATION:\r\n return {\r\n ...state,\r\n sourceLocation: action.sourceLoc,\r\n sourceEnviroment: action.env\r\n };\r\n case cmsConstants.SET_ENVIROMENT:\r\n return {\r\n ...state,\r\n enviroment: action.env,\r\n editMode: action.editMode,\r\n eventId: action.eventId,\r\n languageCode: action.languageCode || state.languageCode\r\n };\r\n case cmsConstants.SET_ENVIROMENT_LANG:\r\n return {\r\n ...state,\r\n languageCode: action.languageCode\r\n };\r\n case cmsConstants.CONTAINER_TO_UPDATE:\r\n return {\r\n ...state,\r\n containerToUpdate: action.container\r\n };\r\n case cmsConstants.CONTAINER_UPDATED:\r\n return {\r\n ...state,\r\n containerToUpdate: null\r\n };\r\n case cmsConstants.CONTAINER_ADDED:\r\n return {\r\n ...state,\r\n containerAdded: action.container\r\n };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { store } from \"../store/configureStore\";\r\nimport { arrayHelper } from \"./arrayHelper\";\r\n\r\nconst API_KEY = \"AIzaSyB6aQW4uFg8OuFMHaxBmqDPCvzBGe5vuTg\";\r\n\r\nconst createGoogleImports = (fonts) => {\r\n let str = \"\";\r\n fonts.map(f => {\r\n if (f.includes(\" \")) { f = f.replace(\" \", \"+\"); }\r\n str += `@import url('https://fonts.googleapis.com/css?family=${f}&display=swap');`;\r\n });\r\n return str;\r\n}\r\n\r\n\r\nexport const extractFontsFromJson = (obj) => {\r\n let cssFonts = \"\";\r\n let googleFonts = [];\r\n let clientFonts = [];\r\n for (const prop in obj) {\r\n for (const v in obj[prop]) {\r\n for (const c in obj[prop][v]) {\r\n if (c === 'fontFamily') {\r\n if (store.getState().cms.fonts.length > 0 && store.getState().cms.fonts.find(f => { return f.name === obj[prop][v][c] })) {\r\n const font = store.getState().cms.fonts.find(f => { return f.name === obj[prop][v][c] });\r\n if (font) {\r\n clientFonts.push(font);\r\n }\r\n\r\n }\r\n else {\r\n googleFonts.push(obj[prop][v][c]);\r\n }\r\n\r\n }\r\n }\r\n }\r\n }\r\n /* fonts = [...new Set(fonts)]; */\r\n cssFonts = googleFonts.length > 0 ? cssFonts + createGoogleImports(googleFonts) : cssFonts;\r\n cssFonts = clientFonts.length > 0 ? cssFonts + createFontFaces(clientFonts) : cssFonts;\r\n return cssFonts\r\n}\r\n\r\nconst createFontFaces = (fonts) => {\r\n let str = \"\";\r\n fonts.map(cf => {\r\n str += `@font-face{ font-family: ${cf.name}; src: url('${cf.url}'); }`;\r\n });\r\n return str;\r\n}\r\n\r\nexport const insertFonts = (clientFonts) => {\r\n let cssFonts = \"\";\r\n if (clientFonts !== undefined) {\r\n cssFonts += createFontFaces(clientFonts);\r\n }\r\n return cssFonts;\r\n}\r\n\r\nexport const insertGoogleFonts = (props) => {\r\n const { template } = props;\r\n const fonts = template.match(/font-family:(.*?)}/g);\r\n const clientFonts = store.getState().cms.fonts;\r\n\r\n let str = \"\";\r\n const googleFonts = [];\r\n fonts.map((f, i) => {\r\n\r\n let s = f.substring(0, f.indexOf(';') + 1);\r\n let q = f.substring(0, f.indexOf('}') + 1);\r\n\r\n let s1 = s.substring(0, s.indexOf(';'));\r\n let q1 = q.substring(0, q.indexOf('}'));\r\n\r\n if (!q1.includes(';') && q1 !== \"\" && !q1.includes('inherit')) {\r\n let font = q1.substring('font-family:'.length, q1.length + 1);\r\n if (clientFonts !== undefined && !clientFonts.find(f => { return f.name === font })) {\r\n if (font.includes(\" \")) { font = font.replace(\" \", \"+\"); }\r\n let importStr = `@import url('https://fonts.googleapis.com/css?family=${font}:300,400,700,800&display=swap');`;\r\n googleFonts.push(importStr);\r\n }\r\n else {\r\n if (font.includes(\" \")) { font = font.replace(\" \", \"+\"); }\r\n let importStr = `@import url('https://fonts.googleapis.com/css?family=${font}:300,400,700,800&display=swap');`;\r\n googleFonts.push(importStr);\r\n }\r\n\r\n }\r\n if (!s1.includes(';') && s1 !== \"\" && !s1.includes('inherit')) {\r\n let font = s1.substring('font-family:'.length, s1.length + 1);\r\n if (clientFonts !== undefined && !clientFonts.find(f => { return f.name === font })) {\r\n if (font.includes(\" \")) { font = font.replace(\" \", \"+\"); }\r\n let importStr = `@import url('https://fonts.googleapis.com/css?family=${font}:300,400,700,800&display=swap');`;\r\n googleFonts.push(importStr);\r\n } else {\r\n if (font.includes(\" \")) { font = font.replace(\" \", \"+\"); }\r\n let importStr = `@import url('https://fonts.googleapis.com/css?family=${font}:300,400,700,800&display=swap');`;\r\n googleFonts.push(importStr);\r\n }\r\n }\r\n });\r\n\r\n let unique = [...new Set(googleFonts)];\r\n unique.map(gf => {\r\n str += gf + '\\n';\r\n })\r\n clientFonts !== undefined && clientFonts.map(cf => {\r\n str += `@font-face{ font-family: ${cf.name}; src: url('${cf.url}')}`;\r\n })\r\n\r\n return str\r\n\r\n}\r\n","import React from \"react\";\r\nimport \"croppie/croppie.css\";\r\nimport { Spinner } from \"reactstrap\";\r\nimport { authHeader } from \"../../helpers/authHeader\";\r\nimport { handleResponse } from \"../../helpers/handleresponse\";\r\nimport { securityHelper } from \"../../helpers/securityHelper\";\r\nimport { calculateImageSize } from \"../../helpers/imageHelper\";\r\nimport Slider, { createSliderWithTooltip } from \"rc-slider\";\r\nimport Rotate90DegreesCcwTwoToneIcon from \"@material-ui/icons/Rotate90DegreesCcwTwoTone\";\r\nimport { IconButton, LinearProgress } from \"@material-ui/core\";\r\nimport SaveTwoToneIcon from \"@material-ui/icons/SaveTwoTone\";\r\nimport CropTwoToneIcon from \"@material-ui/icons/CropTwoTone\";\r\nimport \"./Cropper.css\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nconst Croppie = require(\"croppie\");\r\nconst SliderWithTooltip = createSliderWithTooltip(Slider);\r\n\r\nclass InlineCropper extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleZoomOut = this.handleZoomOut.bind(this);\r\n this.state = {\r\n zoom: 0,\r\n isLoading: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.init();\r\n }\r\n init = (reRender = false) => {\r\n if (this.cropper) {\r\n this.cropper.destroy();\r\n }\r\n if (this.props.containerStyle !== null || reRender) {\r\n this.cropper = new Croppie(document.getElementById(\"croppie-img\" + this.props.parent), {\r\n viewport:\r\n this.props.settings.type !== \"CIRCLE\" && this.props.settings.type !== \"SQUARE\"\r\n ? { width: this.props.containerStyle.width, height: this.props.settings.style.maxHeight }\r\n : {\r\n width: this.props.settings.style.width,\r\n height: this.props.settings.style.height,\r\n type: this.props.settings.type === \"CIRCLE\" && \"circle\",\r\n },\r\n boundary:\r\n this.props.settings.type !== \"CIRCLE\" && this.props.settings.type !== \"SQUARE\"\r\n ? { width: this.props.containerStyle.width, height: this.props.settings.style.maxHeight }\r\n : { width: this.props.settings.style.width, height: this.props.settings.style.height },\r\n showZoomer: true,\r\n type: \"base64\",\r\n minZoom: -10,\r\n zoom: -1,\r\n });\r\n /*debugger*/\r\n this.handleZoomOut(0);\r\n let listNodes = document.getElementsByClassName(\"cr-vp-square\");\r\n if (listNodes[0]) {\r\n listNodes[0].style.boxShadow = `0px 0px 2000px 2000px ${this.props.bgColor}`;\r\n }\r\n listNodes = document.getElementsByClassName(\"cr-vp-circle\");\r\n if (listNodes[0]) {\r\n listNodes[0].style.boxShadow = `0px 0px 2000px 2000px ${this.props.bgColor}`;\r\n }\r\n }\r\n };\r\n componentDidUpdate(prevProps) {\r\n if (this.props.hideOverlay !== undefined && prevProps.hideOverlay !== this.props.hideOverlay) {\r\n if (this.props.hideOverlay === false) {\r\n this.init(true);\r\n }\r\n }\r\n if (\r\n (prevProps.containerStyle !== this.props.containerStyle && this.props.containerStyle !== undefined && this.props.containerStyle !== null && !this.cropper) ||\r\n prevProps.url !== this.props.url\r\n ) {\r\n this.init();\r\n }\r\n if (this.props.url !== undefined && prevProps.url !== this.props.url) {\r\n this.init();\r\n }\r\n if (this.props.isCropping !== prevProps.isCropping) {\r\n this.init();\r\n }\r\n }\r\n rotate = () => {\r\n this.cropper.rotate(90);\r\n };\r\n handleZoomOut(scale, controlled = false) {\r\n if (this.cropper !== undefined) {\r\n const cZoom = this.cropper.get().zoom;\r\n if (!controlled && scale === 0) {\r\n this.setState({ zoom: scale }, () => {\r\n this.cropper.setZoom(scale);\r\n });\r\n return;\r\n }\r\n if (controlled === true && scale !== undefined) {\r\n this.setState({ zoom: scale }, () => {\r\n this.cropper.setZoom(scale);\r\n });\r\n return;\r\n }\r\n if (cZoom !== this.state.zoom) {\r\n if (cZoom === 50) {\r\n this.cropper.setZoom(0);\r\n this.setState({ zoom: 0 });\r\n return;\r\n }\r\n this.setState({ zoom: cZoom });\r\n }\r\n }\r\n }\r\n handlRes = () => {\r\n this.setState({ isLoading: true });\r\n const size = { height: parseInt(this.cropper.options.boundary.height) * 4, width: parseInt(this.cropper.options.boundary.width) * 4 };\r\n this.cropper.result({ type: \"base64\", size }).then((res) => this.handleSave(res));\r\n };\r\n handleSave = (res) => {\r\n const fileInfo = {\r\n name: \"cropped-\" + securityHelper.createGuid(),\r\n size: calculateImageSize(res).inBytes,\r\n type: \"image/png\",\r\n file: res,\r\n isCropped: true,\r\n };\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: authHeader({ \"Content-Type\": \"application/json\" }),\r\n body: JSON.stringify(fileInfo),\r\n };\r\n fetch(`./api/files/`, requestOptions)\r\n .then(handleResponse)\r\n .then((file) => {\r\n this.props.onSave(file.url);\r\n this.setState({ isLoading: false });\r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n });\r\n };\r\n alignment = () => {\r\n switch (this.props.settings.alignment) {\r\n case \"center\":\r\n return \"-90px\";\r\n case \"left\":\r\n return \"unset\";\r\n case \"right\":\r\n return \"-200px\";\r\n default:\r\n break;\r\n }\r\n };\r\n render() {\r\n return (\r\n ![](\"https://images.iphonephotographyschool.com/22686/1120b/How-To-Blur-Background-On-iPhone.jpg\")
:\r\n }.svg`})
\r\n (+{value}) {label}\r\n 
\r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useRef, useState } from \"react\";\r\nimport { observer } from \"mobx-react-lite\";\r\nimport { LoadSpinner } from \"../../components/LoadSpinner\";\r\n\r\nexport const TextContent = observer((props) => {\r\n const [text, setText] = useState(\"\");\r\n const [contentLoaded, setContentLoaded] = useState(false);\r\n const { settings, environment, replaceTags, checkHeights, orders } = props;\r\n const { content, hidden } = settings;\r\n const checkHeightsRef = useRef(null);\r\n const checkHeightsIntervalRef = useRef(null);\r\n const intervalCountRef = useRef(0);\r\n useEffect(() => {\r\n // setText(content[environment.lang]);\r\n // replaceTags(content[environment.lang]).then((replacedText) => setText(replacedText));\r\n if (checkHeightsIntervalRef.current == null) {\r\n checkHeightsIntervalRef.current = setInterval(() => {\r\n if (checkHeightsRef.current) {\r\n checkHeightsRef.current();\r\n intervalCountRef.current += 1;\r\n }\r\n if (intervalCountRef.current > 20) {\r\n if (checkHeightsIntervalRef.current) {\r\n clearInterval(checkHeightsIntervalRef.current);\r\n checkHeightsIntervalRef.current = null;\r\n }\r\n }\r\n }, 1000);\r\n }\r\n return () => {\r\n if (checkHeightsIntervalRef.current) {\r\n clearInterval(checkHeightsIntervalRef.current);\r\n checkHeightsIntervalRef.current = null;\r\n }\r\n }\r\n }, []);\r\n useEffect(() => {\r\n checkHeightsRef.current = checkHeights;\r\n })\r\n useEffect(() => {\r\n replaceTags(content[environment.lang]).then((replacedText) => {\r\n setText(replacedText)\r\n setContentLoaded(true);\r\n setTimeout(checkHeights, 50);\r\n });\r\n }, [content, environment.lang, orders]);\r\n\r\n if (hidden) return ;\r\n if (contentLoaded) {\r\n return ;\r\n }\r\n else {\r\n return