Skip to content

Commit

Permalink
chore(mailer): templates beta to react
Browse files Browse the repository at this point in the history
  • Loading branch information
polonel committed Mar 3, 2019
1 parent 362c4f3 commit c14d24d
Show file tree
Hide file tree
Showing 4 changed files with 209 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/client/components/Settings/MenuItem/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions src/client/containers/Settings/Mailer/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className={active ? 'active' : 'hide'}>
<MailerSettings_Templates />
<MailerSettings_Mailer />
<Mailer_MailerCheck />
</div>
Expand Down
205 changes: 205 additions & 0 deletions src/client/containers/Settings/Mailer/mailerSettingsTemplates.jsx
Original file line number Diff line number Diff line change
@@ -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 }) => (
<div>
<h3 className={'font-light mb-5'}>Template Description</h3>
<p className='mb-10' style={{ fontSize: '13px' }}>
{template.description}
</p>
<hr className='uk-margin-medium-bottom' />
<form onSubmit={handleSaveSubject}>
<input name={'id'} type='hidden' value={template._id} />
<div className='uk-input-group'>
<div className='md-input-wrapper'>
<label>Mail Subject</label>
<input name={'subject'} type='text' className={'md-input'} defaultValue={template.subject} />
</div>
<span className='uk-input-group-addon'>
<Button type={'submit'} text={'Save'} small={true} />
</span>
</div>
</form>

<Zone extraClass={'uk-margin-medium-top'}>
<ZoneBox>
<div className={'uk-float-left'}>
<h6 style={{ margin: 0, fontSize: '16px', lineHeight: '14px' }}>Edit Template</h6>
<h5 className={'uk-text-muted'} style={{ margin: '2px 0 0 0', fontSize: '12px' }}>
Customize template
</h5>
</div>
<div className='uk-float-right uk-width-1-3 uk-clearfix'>
<div className='uk-width-1-1 uk-float-right' style={{ textAlign: 'right' }}>
<button
className={'md-btn md-btn-small right'}
style={{ textTransform: 'none' }}
onClick={handleOpenEditor}
>
Open Editor
</button>
</div>
</div>
</ZoneBox>
</Zone>
</div>
)

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 (
<div>
<SettingItem
title={'Enable New Email Templates'}
subtitle={
<div>
The new email notification system is currently in beta. Please See{' '}
<a href='https://forum.trudesk.io/t/beta-email-notification-templates'>Email Notification Templates</a>{' '}
for more information.
</div>
}
component={
<EnableSwitch
stateName={'emailBeta'}
label={'Enable'}
checked={this.betaEnabled}
onChange={e => this.onEmailBetaChange(e)}
/>
}
/>
<SplitSettingsPanel
title={'Notification Templates'}
subtitle={
<div>
Customize email notification templates.
<strong> Note: Not all templates have been converted for the beta</strong>
</div>
}
rightComponent={<h4 className={'uk-display-block uk-text-danger mt-20 mr-20'}>BETA FEATURE</h4>}
menuItems={mappedValues}
/>
</div>
)
}
}

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)

0 comments on commit c14d24d

Please sign in to comment.