From c14d24d73f4d1213a7ff698b898869c9b509f52d Mon Sep 17 00:00:00 2001 From: Chris Brame Date: Sun, 3 Mar 2019 02:28:33 -0500 Subject: [PATCH] chore(mailer): templates beta to react --- .../components/Settings/MenuItem/index.jsx | 2 +- .../Settings/SplitSettingsPanel/index.jsx | 2 +- .../containers/Settings/Mailer/index.jsx | 2 + .../Mailer/mailerSettingsTemplates.jsx | 205 ++++++++++++++++++ 4 files changed, 209 insertions(+), 2 deletions(-) create mode 100644 src/client/containers/Settings/Mailer/mailerSettingsTemplates.jsx diff --git a/src/client/components/Settings/MenuItem/index.jsx b/src/client/components/Settings/MenuItem/index.jsx index c03e4f530..8fe6fd9f5 100644 --- a/src/client/components/Settings/MenuItem/index.jsx +++ b/src/client/components/Settings/MenuItem/index.jsx @@ -38,7 +38,7 @@ MenuItem.propTypes = { active: PropTypes.bool, onClick: PropTypes.func.isRequired, draggable: PropTypes.bool, - dragKey: PropTypes.string + dragKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) } export default MenuItem diff --git a/src/client/components/Settings/SplitSettingsPanel/index.jsx b/src/client/components/Settings/SplitSettingsPanel/index.jsx index 69e854140..da08ed7e5 100644 --- a/src/client/components/Settings/SplitSettingsPanel/index.jsx +++ b/src/client/components/Settings/SplitSettingsPanel/index.jsx @@ -115,7 +115,7 @@ class SplitSettingsPanel extends React.Component { SplitSettingsPanel.propTypes = { title: PropTypes.string.isRequired, - subtitle: PropTypes.string, + subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), rightComponent: PropTypes.element, scrollable: PropTypes.bool, maxHeight: PropTypes.string, diff --git a/src/client/containers/Settings/Mailer/index.jsx b/src/client/containers/Settings/Mailer/index.jsx index e80a0f753..8f5938e32 100644 --- a/src/client/containers/Settings/Mailer/index.jsx +++ b/src/client/containers/Settings/Mailer/index.jsx @@ -16,12 +16,14 @@ import React from 'react' import PropTypes from 'prop-types' import MailerSettings_Mailer from './mailer' import Mailer_MailerCheck from './mailerCheck' +import MailerSettings_Templates from 'containers/Settings/Mailer/mailerSettingsTemplates' class MailerSettingsContainer extends React.Component { render () { const { active } = this.props return (
+
diff --git a/src/client/containers/Settings/Mailer/mailerSettingsTemplates.jsx b/src/client/containers/Settings/Mailer/mailerSettingsTemplates.jsx new file mode 100644 index 000000000..4a4b317d9 --- /dev/null +++ b/src/client/containers/Settings/Mailer/mailerSettingsTemplates.jsx @@ -0,0 +1,205 @@ +/* + * . .o8 oooo + * .o8 "888 `888 + * .o888oo oooo d8b oooo oooo .oooo888 .ooooo. .oooo.o 888 oooo + * 888 `888""8P `888 `888 d88' `888 d88' `88b d88( "8 888 .8P' + * 888 888 888 888 888 888 888ooo888 `"Y88b. 888888. + * 888 . 888 888 888 888 888 888 .o o. )88b 888 `88b. + * "888" d888b `V88V"V8P' `Y8bod88P" `Y8bod8P' 8""888P' o888o o888o + * ======================================================================== + * Author: Chris Brame + * Updated: 3/3/19 1:03 AM + * Copyright (c) 2014-2019. All rights reserved. + */ + +import React from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import { updateSetting } from 'actions/settings' +import { observer } from 'mobx-react' +import { observable } from 'mobx' +import Log from '../../../logger' +import axios from 'axios' + +import Button from 'components/Button' +import SettingItem from 'components/Settings/SettingItem' +import EnableSwitch from 'components/Settings/EnableSwitch' +import SplitSettingsPanel from 'components/Settings/SplitSettingsPanel' + +import helpers from 'lib/helpers' +import Zone from 'components/ZoneBox/zone' +import ZoneBox from 'components/ZoneBox' + +const templateBody = ({ template, handleSaveSubject, handleOpenEditor }) => ( +
+

Template Description

+

+ {template.description} +

+
+
+ +
+
+ + +
+ +
+
+ + + +
+
Edit Template
+
+ Customize template +
+
+
+
+ +
+
+ + +
+) + +templateBody.propTypes = { + template: PropTypes.object.isRequired, + handleSaveSubject: PropTypes.func.isRequired, + handleOpenEditor: PropTypes.func.isRequired +} + +@observer +class MailerSettings_Templates extends React.Component { + @observable betaEnabled = false + @observable templates = [] + + componentDidMount () { + helpers.UI.inputs() + } + + componentDidUpdate (prevProps) { + helpers.UI.reRenderInputs() + if (prevProps.settings !== this.props.settings) { + if (this.betaEnabled !== this.getSetting('emailBeta')) this.betaEnabled = this.getSetting('emailBeta') + if (this.props.settings.get('mailTemplates').toArray() !== this.templates) { + this.templates = this.props.settings.get('mailTemplates').toArray() + } + } + } + + getSetting (name) { + return this.props.settings.getIn(['settings', name, 'value']) !== undefined + ? this.props.settings.getIn(['settings', name, 'value']) + : '' + } + + onEmailBetaChange (e) { + const self = this + const val = e.target.checked + this.props.updateSetting({ name: 'beta:email', value: val, stateName: 'betaEmail', noSnackbar: true }).then(() => { + self.betaEnabled = val + }) + } + + onSaveSubject (e) { + e.preventDefault() + const subject = e.target.subject + if (!subject) return + axios + .put(`/api/v1/settings/mailer/template/${e.target.id.value}`, { + subject: subject.value + }) + .then(res => { + if (res.data && res.data.success) helpers.UI.showSnackbar('Template subject saved successfully') + }) + .catch(error => { + const errorText = error.response ? error.response.error : error + helpers.UI.showSnackbar(`Error: ${errorText}`, true) + Log.error(errorText, error) + }) + } + + static onOpenEditor (e, name) { + e.preventDefault() + const url = `/settings/editor/${name}/` + History.pushState(null, null, url) + } + + mapTemplateMenu () { + return this.templates.map((template, idx) => { + const templateJS = template.toJS() + return { + key: idx, + title: template.get('displayName'), + bodyComponent: templateBody({ + template: templateJS, + handleSaveSubject: e => this.onSaveSubject(e), + handleOpenEditor: e => MailerSettings_Templates.onOpenEditor(e, templateJS.name) + }) + } + }) + } + + render () { + const mappedValues = this.mapTemplateMenu() + return ( +
+ + The new email notification system is currently in beta. Please See{' '} + Email Notification Templates{' '} + for more information. +
+ } + component={ + this.onEmailBetaChange(e)} + /> + } + /> + + Customize email notification templates. + Note: Not all templates have been converted for the beta + + } + rightComponent={

BETA FEATURE

} + menuItems={mappedValues} + /> + + ) + } +} + +MailerSettings_Templates.propTypes = { + updateSetting: PropTypes.func.isRequired, + settings: PropTypes.object.isRequired +} + +const mapStateToProps = state => ({ + settings: state.settings.settings +}) + +export default connect( + mapStateToProps, + { updateSetting } +)(MailerSettings_Templates)