\r\n
\r\n - \r\n
\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n {!isTrial\r\n &&\r\n \r\n \r\n \r\n
\r\n \r\n }\r\n \r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Sidecar);\r\n","import React from 'react'; // eslint-disable-line\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport ManagedInput from './ManagedInput';\r\n\r\nexport default class EditableLabel extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.myInp = React.createRef();\r\n this.focusTextInput = this.focusTextInput.bind(this);\r\n }\r\n\r\n focusTextInput() {\r\n // Explicitly focus the text input using the raw DOM API\r\n // Note: we're accessing \"current\" to get the DOM node\r\n this.myInp.current.focus();\r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.value}
\r\n { /* using a hidden h3 to measure the width for where the\r\n pencil svg should go is somewhat ridiculous. */}\r\n\r\n {' '}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ProjectTitle;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst PublishArrow = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default PublishArrow;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Eye = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Eye;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Spinner = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Spinner;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Ban = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Ban;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst SuccessCheck = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default SuccessCheck;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { Link } from 'react-router-dom';\r\nimport constants from '../../constants';\r\nimport i18n from '../../i18n';\r\n\r\nclass ErrorItem extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.getLink = this.getLink.bind(this);\r\n }\r\n\r\n getLink(link) {\r\n return `/projects/${this.props.projectId}/${link}`;\r\n }\r\n\r\n formatUrl(url) {\r\n // eslint-disable-next-line no-param-reassign\r\n url = url.replace('-', ' ');\r\n // eslint-disable-next-line no-param-reassign\r\n url = url.replace('/', ' > ');\r\n // eslint-disable-next-line no-param-reassign\r\n url = this.toTitleCase(url);\r\n\r\n return url;\r\n }\r\n\r\n // eslint-disable-next-line class-methods-use-this\r\n toTitleCase(str) {\r\n return str.replace(/\\w\\S*/g, (txt) => { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });\r\n }\r\n\r\n render() {\r\n const { error } = this.props;\r\n const { id } = this.props;\r\n if (error.errorTypeString === 'MODS_ERR_NOMODULESENABLED' && this.props.pagesFlag) {\r\n error.errorMessage = 'One module or menu item must be enabled';\r\n }\r\n return (\r\n \r\n {constants.ConfigErrorCode.find((m) => { return m.ErrorCode === error.errorTypeString; }).Link !== '' &&
\r\n );\r\n }\r\n}\r\n\r\nexport default ErrorItem;\r\n","import React from 'react'; // eslint-disable-line\r\nimport ErrorItem from './ErrorItem';\r\n\r\nconst ErrorList = (props) => {\r\n return (\r\n {this.formatUrl(constants.ConfigErrorCode.find((m) => { return m.ErrorCode === error.errorTypeString; }).Link)}
}\r\n {error.errorMessage}
\r\n {constants.ConfigErrorCode.find((m) => { return m.ErrorCode === error.errorTypeString; }).Link !== '' && }\r\n \r\n {props.errors && props.errors.length > 0\r\n && (\r\n
\r\n );\r\n};\r\n\r\nexport default ErrorList;\r\n","import React from 'react'; // eslint-disable-line\r\nimport i18n from '../../i18n';\r\nimport ErrorList from '../status/ErrorList';\r\n\r\nclass PublishPopover extends React.Component {\r\n closeDialog = () => {\r\n if (this.props.CloseDialog) {\r\n this.props.CloseDialog();\r\n }\r\n }\r\n\r\n onKeyDownFn = (e) => {\r\n if (e.keyCode === 27) {\r\n this.closeDialog();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n Visible,\r\n Errors,\r\n } = this.props;\r\n\r\n return (\r\n // eslint-disable-next-line\r\n \r\n {props.errors?.map((error, i) => {\r\n /* eslint-disable */\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 default PublishPopover;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport Modal from 'react-modal';\r\nimport _actions from '../../actions';\r\nimport ProjectTitle from '../projects/ProjectTitle';\r\nimport PublishArrow from '../svg/Publish';\r\nimport Eye from '../svg/preview/Eye';\r\nimport Spinner from '../svg/Spinner';\r\nimport Ban from '../svg/Ban';\r\nimport SuccessCheck from '../svg/SuccessCheck';\r\nimport PublishPopover from './PublishPopover';\r\n\r\nclass VersionHeader extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.togglePreview = this.togglePreview.bind(this);\r\n this.updateTitle = this.updateTitle.bind(this);\r\n this.publishProject = this.publishProject.bind(this);\r\n this.showPublishPopover = this.showPublishPopover.bind(this);\r\n this.state = { publishPopoverVisible: false };\r\n }\r\n\r\n togglePreview() {\r\n if (this.props.togglePreview) {\r\n this.props.togglePreview();\r\n }\r\n }\r\n\r\n updateTitle(versionName) {\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'name',\r\n versionName,\r\n );\r\n }\r\n\r\n showPublishPopover() {\r\n this.setState((prevState) => {\r\n return { publishPopoverVisible: !prevState.publishPopoverVisible };\r\n });\r\n }\r\n\r\n publishProject() {\r\n if (this.props.loadingBar === 0) {\r\n this.props.actions.publishProject(\r\n this.props.projects.selected.id, this.props.profiles.data.givingChurchId,\r\n );\r\n }\r\n }\r\n\r\n render() {\r\n let {\r\n name,\r\n versionNumber,\r\n saving,\r\n justSaved,\r\n } = this.props;\r\n if (typeof (name) === 'undefined') {\r\n name = '';\r\n }\r\n if (typeof (versionNumber) === 'undefined') {\r\n versionNumber = '';\r\n }\r\n\r\n let savingMessage = '';\r\n if (saving) {\r\n savingMessage = (Saving...);\r\n } else if (justSaved) {\r\n savingMessage = (Saved Successfully!);\r\n }\r\n let publishable = true;\r\n if (this.props.proj_conf?.data?.length > 0) {\r\n publishable = false;\r\n }\r\n const isTrial = localStorage.getItem('IsTrial');\r\n return (\r\n {i18n.t('publish.pop-header')}
\r\n{i18n.t('publish.pop-subtitle')}
\r\n\r\n
\r\n\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(VersionHeader);\r\n","export default __webpack_public_path__ + \"static/media/right-arrow.2c493363.svg\";","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport rightArrow from '../../assets/images/svg/right-arrow.svg';\r\n\r\nconst PreviewContainer = (props) => {\r\n return (\r\n \r\n
\r\n {this.props.projects.selected\r\n && this.props.projects.selected.liveVersion\r\n && this.props.proj_conf?.data?.length > 0\r\n && (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n {`v${versionNumber}`}
\r\n\r\n {savingMessage}\r\n
\r\n \r\n
\r\n - \r\n {this.props.versions.publishProgress\r\n && (\r\n
- \r\n
\r\n \r\n )}\r\n {this.props.projects.justPublished\r\n && (\r\n - \r\n
\r\n \r\n )}\r\n {this.props.projects.selected\r\n && this.props.projects.selected.liveVersion\r\n && !this.props.publish.updatedNew\r\n && !this.props.projects.justPublished\r\n && !this.props.versions.publishProgress\r\n && (\r\n isTrial ?\r\n - \r\n Publish\r\n
\r\n \r\n :\r\n - \r\n Publish\r\n
\r\n \r\n )}\r\n {this.props.projects.selected\r\n && this.props.projects.selected.liveVersion\r\n && this.props.publish.updatedNew && publishable\r\n && !this.props.projects.justPublished\r\n && !this.props.versions.publishProgress\r\n && (\r\n // eslint-disable-next-line\r\n isTrial ?\r\n - \r\n Publish\r\n
\r\n \r\n :\r\n - \r\n Publish\r\n
\r\n \r\n )}\r\n {this.props.projects.selected\r\n && this.props.projects.selected.liveVersion\r\n && this.props.publish.updatedNew && !publishable\r\n && !this.props.projects.justPublished\r\n && !this.props.versions.publishProgress\r\n && (\r\n // eslint-disable-next-line\r\n isTrial ?\r\n - \r\n Publish\r\n
\r\n \r\n :\r\n - \r\n Publish\r\n
\r\n \r\n )}\r\n - \r\n {this.props.versions.showPreview\r\n && (\r\n // eslint-disable-next-line\r\n
\r\n \r\n )}\r\n \r\n
\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(PreviewContainer);\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router';\r\nimport { bindActionCreators } from 'redux';\r\nimport Menu from '../../containers/menu/Sidecar';\r\nimport VersionHeader from './VersionHeader';\r\nimport PreviewContainer from '../../containers/preview/PreviewContainer';\r\nimport AlertLoader from '../../containers/alerts/AlertLoader';\r\nimport _actions from '../../actions';\r\nimport ErrorBoundary from '../ErrorBoundary';\r\nimport BannerLoader from '../../containers/alerts/BannerLoader';\r\n\r\nclass VersionBox extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.togglePreviewState = this.togglePreviewState.bind(this);\r\n this.setAutoClose = this.setAutoClose.bind(this);\r\n this.state = { previewOn: this.props.versions.showPreview };\r\n }\r\n\r\n componentDidMount() {\r\n this.setAutoClose();\r\n window.addEventListener('resize', this.setAutoClose.bind(this));\r\n this.props.actions.getProject(this.props.match.params.projectId);\r\n this.props.actions.checkProjectConfig(this.props.match.params.projectId);\r\n }\r\n\r\n setAutoClose() {\r\n this.setState({ autoClose: window.innerWidth });\r\n }\r\n\r\n togglePreviewState() {\r\n this.setState({ previewOn: !this.props.versions.showPreview });\r\n this.props.actions.togglePreviewShown(this.props.versions.showPreview);\r\n }\r\n\r\n render() {\r\n const {\r\n name,\r\n versionNumber,\r\n saving,\r\n justSaved,\r\n previewCssClass,\r\n } = this.props;\r\n\r\n let previewClass = 'hidden';\r\n if (!this.state.previewOn) {\r\n previewClass = 'active s-hidden xs-hidden';\r\n }\r\n previewClass = `${previewCssClass} ${previewClass}`;\r\n return (\r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n 
\r\n \r\n
\r\n {props.message.length > 0 && (\r\n \r\n {props.message}\r\n
\r\n )}\r\n {props.x && (\r\n \r\n \r\n \r\n {props.children}\r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(VersionBox));\r\n","export default __webpack_public_path__ + \"static/media/search.300baba2.png\";","import React from 'react'; // eslint-disable-line\r\nimport Search from '../../assets/images/preview/search.png';\r\nimport i18n from '../../i18n';\r\n\r\nclass PreviewLogo extends React.Component {\r\n getChurchInitials = (church) => { // eslint-disable-next-line\r\n if(typeof church != 'undefined' && church !=null) {\r\n return church.split(' ')\r\n .map((x) => { return x[0]; })\r\n .join('')\r\n .substring(0, 4);\r\n }\r\n\r\n return '';\r\n };\r\n\r\n render() {\r\n const { church } = this.props ? this.props : false;\r\n const { description } = this.props ? this.props : false;\r\n const { address } = this.props ? this.props : false;\r\n return (\r\n \r\n\r\n 0 || this.props.location.pathname.indexOf('results') > 0 || this.props.location.pathname.indexOf('logos') > 0) && 'This screen does not show in your branded app'}\r\n >\r\n \r\n {this.props.previewChild}\r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n {this.props.previewChild\r\n && (\r\n { return alert.type === 'banner'; }).length > 0 ? 'banner' : ''}`}>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.children}\r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default PreviewLogo;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport ValidatedInput from '../../components/forms/ValidatedInput';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport PreviewGeneralInfo from '../../components/preview/PreviewLogo';\r\nimport i18n from '../../i18n';\r\n\r\nclass GeneralInfo extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { data: false, showPreview: true, isChMSSyncWithDB : false };\r\n this.updateVersionFromEvent = this.updateVersionFromEvent.bind(this);\r\n this.setStateFromEvent = this.setStateFromEvent.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n const isUnity = localStorage.getItem('IsUnity');\r\n const hasPeople = this.checkForPeopleModule();\r\n if(isUnity === 'true' && hasPeople === true){\r\n this.props.versions.select.chMSIntegrations = true;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.match.params.projectId,\r\n \"chMSIntegrations\",\r\n true,\r\n );\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (!prevState.data && !this.props.versions.inProgress) {\r\n const stateObj = {};\r\n stateObj.churchName = this.props.versions.select.churchName;\r\n stateObj.churchStreetAddress = this.props.versions.select.churchStreetAddress;\r\n stateObj.churchAddress = this.props.versions.select.churchAddress;\r\n stateObj.churchState = this.props.versions.select.churchState;\r\n stateObj.churchZip = this.props.versions.select.churchZip;\r\n stateObj.churchCity = this.props.versions.select.churchCity;\r\n stateObj.description = this.props.versions.select.description;\r\n stateObj.data = true;\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState(stateObj);\r\n }\r\n \r\n if(!this.state.isChMSSyncWithDB && this.props?.versions?.select?.id) {\r\n const chMSValue = this.props?.versions?.select?.chMSIntegrations\r\n if(chMSValue === false) { // Need to check specific with False only\r\n // This condition will be disable the all module related to chms integration in case it was enabled by default\r\n // People, Integration, Group, Check-In and StudioC\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.match.params.projectId,\r\n \"chMSIntegrations\",\r\n chMSValue,\r\n );\r\n }\r\n\r\n this.setState({\r\n isChMSSyncWithDB : true\r\n })\r\n }\r\n }\r\n\r\n checkForPeopleModule(){\r\n const modules = localStorage.getItem('ModulesData');\r\n const parsedModules = JSON.parse(modules);\r\n if (parsedModules !== null && parsedModules !== undefined){\r\n const hasPeople = parsedModules.find(e => e.name === 'People');\r\n if(hasPeople !== undefined){\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n setStateFromEvent(e, stateKey) {\r\n const stateObj = {};\r\n stateObj[stateKey] = e.target.value;\r\n this.setState(stateObj);\r\n }\r\n\r\n // eslint-disable-next-line class-methods-use-this\r\n getChurchInitials(church) { // eslint-disable-next-line\r\n if(typeof church != 'undefined') {\r\n return church.split(' ')\r\n .map((x) => { return x[0]; })\r\n .join('')\r\n .substring(0, 4);\r\n }\r\n\r\n return '';\r\n }\r\n\r\n updateVersionFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value;\r\n if (changedValue !== this.props.versions.select[fieldName]) {\r\n this.updateVersionForFieldWithValue(fieldName, changedValue);\r\n }\r\n }\r\n\r\n updateVersionForFieldWithValue(field, val) {\r\n const version = this.props.versions.select;\r\n version[field] = val;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n field,\r\n val,\r\n );\r\n }\r\n\r\n render() {\r\n const version = this.props.versions.select;\r\n const logoPath = version.logoImage?.imagePath;\r\n const address = `${this.state.churchStreetAddress || ''} ${this.state.churchCity || ''}, ${this.state.churchState || ''} ${this.state.churchZip || ''}`;\r\n const previewGenInfo = (\r\n \r\n
\r\n \r\n 
\r\n {church && (church.length > 8) ? church.substring(0, 8) : church}\r\n
\r\n \r\n 20\r\n {i18n.t('previews.logo.match')}\r\n \r\n\r\n "\r\n {church && (church.length > 8) ? church.substring(0, 8) : church}\r\n\r\n "\r\n \r\n {' '}\r\n
\r\n \r\n
\r\n \r\n \r\n {this.props.logo === '' || typeof this.props.logo === 'undefined'\r\n ? 
}\r\n
\r\n {this.getChurchInitials(church)}
:{church}
\r\n {address}
\r\n \r\n {description && (description.length > 45)\r\n ? description.substring(0, 44) : description}\r\n ...\r\n {' '}\r\n {i18n.t('previews.logo.more')}\r\n
\r\n \r\n { this.updateVersionFromEvent(fn, false, 'churchName'); }}\r\n onReturnDown={(fn) => { this.updateVersionFromEvent(fn, false, 'churchName'); }}\r\n onChange={(e) => { return this.setStateFromEvent(e, 'churchName'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n { this.updateVersionFromEvent(fn, false, 'description'); }}\r\n onReturnDown={(fn) => { this.updateVersionFromEvent(fn, false, 'description'); }}\r\n onChange={(e) => { return this.setStateFromEvent(e, 'description'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n multiline\r\n />\r\n\r\n { this.updateVersionFromEvent(fn, false, 'churchStreetAddress'); }}\r\n onReturnDown={(fn) => { this.updateVersionFromEvent(fn, false, 'churchStreetAddress'); }}\r\n onChange={(e) => { return this.setStateFromEvent(e, 'churchStreetAddress'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n\r\n { this.updateVersionFromEvent(fn, false, 'churchCity'); }}\r\n onReturnDown={(fn) => { this.updateVersionFromEvent(fn, false, 'churchCity'); }}\r\n onChange={(e) => { return this.setStateFromEvent(e, 'churchCity'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n\r\n { this.updateVersionFromEvent(fn, false, 'churchState'); }}\r\n onReturnDown={(fn) => { this.updateVersionFromEvent(fn, false, 'churchState'); }}\r\n onChange={(e) => { return this.setStateFromEvent(e, 'churchState'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n\r\n { this.updateVersionFromEvent(fn, false, 'churchZip'); }}\r\n onReturnDown={(fn) => { this.updateVersionFromEvent(fn, false, 'churchZip'); }}\r\n onChange={(e) => { return this.setStateFromEvent(e, 'churchZip'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\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 mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GeneralInfo);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Recrop = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Recrop;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst DeleteX = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default DeleteX;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport '../../assets/styles/master.css';\r\nimport YesNoDialog from '../common/YesNoDialog';\r\nimport i18n from '../../i18n';\r\nimport Recrop from '../svg/Recrop';\r\nimport DeleteX from '../svg/DeleteX';\r\n\r\nclass LogoSecondStep extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.props = props;\r\n\r\n this.state = {\r\n deleteConfirmationDialogOpened: false,\r\n };\r\n this.closeDeleteConfirmationDialog = this.closeDeleteConfirmationDialog.bind(this);\r\n this.deleteImages = this.deleteImages.bind(this);\r\n }\r\n\r\n onDeleteButtonClick() {\r\n const stateObj = {};\r\n stateObj.deleteConfirmationDialogOpened = true;\r\n this.setState(stateObj);\r\n }\r\n\r\n onRecropButtonClick() {\r\n this.recropImage();\r\n }\r\n\r\n deleteImages() {\r\n this.props.actions.deleteImagesForCropForCrop(\r\n this.props.versions.select.projectId, this.props.imageType, '00000000-0000-0000-0000-000000000000',\r\n );\r\n }\r\n\r\n recropImage() {\r\n this.props.actions.getOriginalImageForCrop(\r\n this.props.versions.select.projectId, this.props.imageType, '00000000-0000-0000-0000-000000000000',\r\n );\r\n }\r\n\r\n closeDeleteConfirmationDialog() {\r\n const stateObj = {};\r\n stateObj.deleteConfirmationDialogOpened = false;\r\n this.setState(stateObj);\r\n }\r\n\r\n render() {\r\n return (\r\n {i18n.t('general.header')}
\r\n{i18n.t('general.subtitle')}
\r\n {!this.props.versions.inProgress && form}\r\n\r\n \r\n {typeof this.props.imagePath !== 'undefined' && this.props.imagePath !== null\r\n && (\r\n
\r\n \r\n \r\n {i18n.t('logo2.title')}\r\n \r\n
\r\n - \r\n
- \r\n {/* eslint-disable-next-line */}\r\n
\r\n {i18n.t('crop')}\r\n \r\n \r\n - \r\n {/* eslint-disable-next-line */}\r\n
\r\n {i18n.t('delete')}\r\n \r\n \r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n versions: state.versions,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ImageCropper);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Image = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Image;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport UploadPicture from '../svg/Image';\r\nimport i18n from '../../i18n';\r\nimport LargeLoading from '../svg/LargeLoading';\r\n\r\nclass DragAndDrop extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.props = props;\r\n this.state = {\r\n uploadInputValue: '',\r\n uploading: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n window.addEventListener('mouseup', this.onDragLeave);\r\n window.addEventListener('dragenter', this.onDragEnter);\r\n window.addEventListener('dragover', this.onDragOver);\r\n document.getElementById('dropZone')\r\n .addEventListener('dragleave', this.onDragLeave);\r\n window.addEventListener('drop', this.onDrop);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.clearUploading === false && this.props.clearUploading === true) {\r\n // eslint-disable-next-line\r\n this.setState({ uploading: false });\r\n this.props.clearUploadAction();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('mouseup', this.onDragLeave);\r\n window.removeEventListener('dragenter', this.onDragEnter);\r\n window.addEventListener('dragover', this.onDragOver);\r\n document.getElementById('dropZone')\r\n .removeEventListener('dragleave', this.onDragLeave);\r\n window.removeEventListener('drop', this.onDrop);\r\n }\r\n\r\n handleChosenImage = (fileUploader) => {\r\n if (this.props.handleChosenImage) {\r\n this.props.handleChosenImage(fileUploader.files[0]);\r\n }\r\n this.setState({\r\n uploadInputValue: '',\r\n uploading: true,\r\n });\r\n }\r\n\r\n onDragEnter = (e) => {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return false;\r\n }\r\n\r\n onDragOver = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return false;\r\n }\r\n\r\n onDragLeave = (e) => {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return false;\r\n }\r\n\r\n onDrop = (e) => {\r\n e.preventDefault();\r\n const file = e.dataTransfer.files[0];\r\n this.props.dropImage(file);\r\n this.setState({ uploading: true });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n
\r\n \r\n \r\n {i18n.t('cropper.title')}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {!this.state.isLoaded\r\n ? (\r\n <>\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n 
\r\n
\r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n {i18n.t('cancel')}\r\n \r\n {/* eslint-disable-next-line */}\r\n { return this.cropImage(); }}\r\n className=\"btn-design-system primary btn-sm\"\r\n >\r\n {this.state.isCropping ? i18n.t('cropping') : i18n.t('crop')}\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n { !this.state.uploading\r\n && (\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default DragAndDrop;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { withRouter } from 'react-router';\r\nimport _actions from '../../actions';\r\nimport DragAndDrop from './dragAndDrop';\r\nimport constants from '../../constants';\r\nimport i18n from '../../i18n';\r\n\r\nclass ImageDropZone extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.dropImage = this.dropImage.bind(this);\r\n this.handleChosenImage = this.handleChosenImage.bind(this);\r\n this.clearUpload = this.clearUpload.bind(this);\r\n this.state = {\r\n hasError: false,\r\n };\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (!prevProps.hasError && this.props.hasError) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ hasError: true });\r\n }\r\n }\r\n\r\n handleChosenFile = (file) => {\r\n if (!file) return;\r\n this.clearUploadWarnings();\r\n\r\n if ((file.type !== 'image/png') && (file.type !== 'image/jpg') && (file.type !== 'image/jpeg')) {\r\n this.fireTypeWarning();\r\n return;\r\n }\r\n if (file.size > 5120000) {\r\n this.fireFileSizeWarning();\r\n return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = () => {\r\n this.props.setFile({ file });\r\n };\r\n\r\n this.props.actions.uploadAssetImageForCrop(\r\n this.props.match.params.projectId,\r\n constants.ImageType.find((n) => { return n.Name === this.props.imageType; }).Id,\r\n file,\r\n );\r\n\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n handleChosenImage(incomingData) {\r\n this.handleChosenFile(incomingData);\r\n }\r\n\r\n fireTypeWarning = () => {\r\n this.props.actions.addAlert({\r\n message: i18n.t('logo.error2'),\r\n dismissable: true,\r\n type: 'error',\r\n view: this.props.alertView ? this.props.alertView : 'logo',\r\n id: this.props.alertView ? `${this.props.alertView}-upload-wrong-type` : 'logo-upload-wrong-type',\r\n });\r\n this.setState({ hasError: true });\r\n }\r\n\r\n fireFileSizeWarning = () => {\r\n this.props.actions.addAlert({\r\n message: i18n.t('logo.error3'),\r\n dismissable: true,\r\n type: 'error',\r\n view: this.props.alertView ? this.props.alertView : 'logo',\r\n id: this.props.alertView ? `${this.props.alertView}-upload-wrong-file-size` : 'logo-upload-file-size',\r\n });\r\n this.setState({ hasError: true });\r\n }\r\n\r\n clearUploadWarnings = () => {\r\n this.props.actions.clearAlert(this.props.alertView ? `${this.props.alertView}-upload-wrong-file-size` : 'logo-upload-file-size');\r\n this.props.actions.clearAlert(this.props.alertView ? `${this.props.alertView}-upload-wrong-type` : 'logo-upload-wrong-type');\r\n }\r\n\r\n clearUpload = () => {\r\n this.setState({ hasError: false });\r\n }\r\n\r\n chooseFile = (chooseImageBtn) => {\r\n chooseImageBtn.click();\r\n }\r\n\r\n dropImage(incomingData) {\r\n this.handleChosenFile(incomingData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.uploading === true\r\n ? (\r\n
\r\n { !this.state.uploading\r\n && (\r\n \r\n
\r\n )\r\n : \r\n
\r\n \r\n
\r\n )}\r\n { !this.state.uploading\r\n && (\r\n \r\n Minimum Image Size:\r\n {this.props.width}\r\n {' '}\r\n x\r\n {this.props.height}\r\n
\r\n )}\r\n { !this.state.uploading\r\n && (\r\n\r\n { /* eslint-disable */}\r\n
\r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport LogoSecondStep from '../../components/appSettings/logoTwo';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport ImageCropper from '../../components/common/imageCropper';\r\nimport YesNoDialog from '../../components/common/YesNoDialog';\r\nimport constants from '../../constants';\r\nimport PreviewLogo from '../../components/preview/PreviewLogo';\r\nimport ImageDropZone from '../../components/common/ImageDropZone';\r\nimport i18n from '../../i18n';\r\nimport FullScreenModal from '../modals/FullScreenModal';\r\n\r\nclass Logo extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.openModal = this.openModal.bind(this);\r\n this.setFile = this.setFile.bind(this);\r\n this.closeModal = this.closeModal.bind(this);\r\n this.switchToSizes = this.switchToSizes.bind(this);\r\n this.switchToUpload = this.switchToUpload.bind(this);\r\n this.displayWarning = this.displayWarning.bind(this);\r\n this.clearWarning = this.clearWarning.bind(this);\r\n this.switchToCrop = this.switchToCrop.bind(this);\r\n this.closeYesNoDialog = this.closeYesNoDialog.bind(this);\r\n this.proceedLogoUpload = this.proceedLogoUpload.bind(this);\r\n\r\n this.props = props;\r\n\r\n this.state = {\r\n imageLocation: '',\r\n modalIsOpen: false,\r\n file: '',\r\n originalHeight: 0,\r\n originalWidth: 0,\r\n aspectRatio: null,\r\n cropperView: 0,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (typeof this.props.versions?.select?.logoImage?.imagePath !== 'undefined') this.switchToSizes();\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.resetWarning();\r\n this.props.actions.resetCroppedImage();\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.crop.modal !== prevProps.crop.modal && this.props.crop.modal === true) {\r\n this.switchToCrop();\r\n } else if (this.props.crop.hasCroppedImage !== prevProps.crop.hasCroppedImage\r\n || this.props.crop.wrongResolution !== prevProps.crop.wrongResolution) {\r\n if (this.props.crop.hasCroppedImage === false\r\n && this.props.crop.wrongResolution === true) {\r\n this.displayWarning();\r\n } else if (this.props.crop.hasCroppedImage === false\r\n && this.props.crop.wrongResolution === false) {\r\n this.switchToUpload();\r\n } else if (this.props.crop.hasCroppedImage === true) {\r\n this.switchToSizes();\r\n }\r\n }\r\n if (prevState.showUpload && this.props.crop.hasCroppedImage) {\r\n this.switchToSizes();\r\n }\r\n if (prevState.modalIsOpen\r\n && !this.state.modalIsOpen\r\n && this.props.crop.hasCroppedImage === false\r\n && !this.props.versions?.select?.logoImage?.imagePath) {\r\n this.switchToUpload();\r\n }\r\n if (!this.props.versions.inProgress && prevProps.versions.inProgress) {\r\n if (typeof this.props.versions?.select?.logoImage?.imagePath === 'undefined') this.switchToUpload();\r\n else this.switchToSizes();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.actions.resetImageData();\r\n }\r\n\r\n setFile(file) {\r\n this.setState({ file });\r\n }\r\n\r\n clearWarning() {\r\n this.props.actions.clearAlert('wrongSize');\r\n }\r\n\r\n displayWarning() {\r\n const id = 'wrongSize';\r\n if (this.props.alerts.data.filter((n) => { return n.id === id; }).length === 0) {\r\n this.props.actions.addAlert({\r\n message: `${i18n.t('logo.error1')} ${constants.ImageType.find((n) => { return n.Name === 'Logo'; }).MinWidth} px x ${constants.ImageType.find((n) => { return n.Name === 'Logo'; }).MinHeight} px`,\r\n clearable: true,\r\n clearAction: this.clearWarning,\r\n type: 'error',\r\n view: 'logo',\r\n id,\r\n });\r\n }\r\n }\r\n\r\n switchToUpload() {\r\n this.setState({\r\n modalIsOpen: false,\r\n cropperView: 0,\r\n });\r\n }\r\n\r\n switchToSizes() {\r\n this.setState({\r\n modalIsOpen: false,\r\n cropperView: 2,\r\n });\r\n }\r\n\r\n switchToCrop() {\r\n this.setState({\r\n modalIsOpen: true,\r\n cropperView: 1,\r\n originalHeight: 0,\r\n originalWidth: 0,\r\n });\r\n }\r\n\r\n openModal(image) {\r\n this.setState({\r\n imageLocation: image.imageLocation,\r\n modalIsOpen: true,\r\n cropperView: 1,\r\n originalHeight: image.height,\r\n originalWidth: image.width,\r\n });\r\n this.clearWarning();\r\n }\r\n\r\n closeModal() {\r\n if (this.props.versions?.select?.logoImage?.imagePath === 'undefined') {\r\n this.setState({\r\n modalIsOpen: false,\r\n cropperView: 0,\r\n imageLocation: '',\r\n });\r\n }\r\n this.setState({\r\n modalIsOpen: false,\r\n cropperView: 2,\r\n imageLocation: this.props.versions?.select?.logoImage?.imagePath,\r\n });\r\n }\r\n\r\n proceedLogoUpload() {\r\n // this.state.tmpButton.click();\r\n this.setState({\r\n dialogOpened: false,\r\n increaseMajorVersion: true,\r\n });\r\n }\r\n\r\n closeYesNoDialog() {\r\n const stateObj = {};\r\n stateObj.dialogOpened = false;\r\n this.setState(stateObj);\r\n }\r\n\r\n render() {\r\n const logoPath = typeof this.props.versions?.select?.logoImage?.imagePath === 'undefined' ? this.state.imageLocation : this.props.versions?.select?.logoImage?.imagePath;\r\n let address = '';\r\n if (this.props.versions.select) {\r\n address = `${this.props.versions.select.churchStreetAddress || ''} ${this.props.versions.select.churchCity || ''}, ${this.props.versions.select.churchState || ''} ${this.props.versions.select.churchZip || ''}`;\r\n }\r\n const previewLogo = (\r\n
\r\n \r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n \r\n
\r\n \r\n {this.props.children}\r\n
\r\n \r\n
\r\n );\r\n return (\r\n {i18n.t('logo.header')}
\r\n {this.state.cropperView === 0 && (\r\n\r\n
\r\n )}\r\n\r\n {this.state.cropperView === 2 && (\r\n {i18n.t('logo.subtitle')}
\r\n\r\n {i18n.t('logo.help1')}\r\n {' '}\r\n {constants.ImageType.find((n) => { return n.Name === 'Logo'; }).MinWidth}\r\n {' '}\r\n x\r\n {' '}\r\n {constants.ImageType.find((n) => { return n.Name === 'Logo'; }).MinHeight}\r\n px\r\n {' '}\r\n {i18n.t('logo.help2')}\r\n
\r\n {i18n.t('logo.help3')}\r\n
\r\n { return n.Name === 'Logo'; }).Id}\r\n imagePath={logoPath}\r\n switchBackToStart={this.switchBackToStart}\r\n switchBackToCrop={this.switchBackToCrop}\r\n />\r\n
\r\n )}\r\n\r\n {this.state.modalIsOpen && this.state.cropperView === 1 && (\r\n \r\n \r\n { return n.Name === 'Logo'; }).Id}\r\n isOriginal\r\n originalHeight={this.state.originalHeight}\r\n originalWidth={this.state.originalWidth}\r\n switchToSizes={this.switchToSizes}\r\n increaseMajorVersion={this.state.increaseMajorVersion}\r\n projVersion={this.props.versions.select}\r\n minHeight={constants.ImageType.find((n) => { return n.Name === 'Logo'; }).MinHeight}\r\n minWidth={constants.ImageType.find((n) => { return n.Name === 'Logo'; }).MinWidth}\r\n />\r\n \r\n
\r\n )}\r\n Crop Your Logo
\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n versions: state.versions,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Logo);\r\n","import React from 'react'; // eslint-disable-line\r\nimport Tooltip from 'rc-tooltip';\r\n\r\nconst HelpTooltip = (props) => {\r\n return (\r\n \r\n {form}\r\n
\r\n \r\n \r\n {props.title}\r\n {' '}\r\n {props.tooltipText == null ? ''\r\n : (\r\n
\r\n\r\n {props.children}\r\n
\r\n );\r\n};\r\n\r\nexport default HorizontalFormContainer;\r\n","import React, { Fragment } from 'react'; // eslint-disable-line\r\nimport Tooltip from 'rc-tooltip';\r\n\r\nclass OnOffSwitch extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { isToggleOn: props.isToggleOn };\r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleExtChange = this.handleExtChange.bind(this);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.isToggleOn !== this.props.isToggleOn) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isToggleOn: !!this.props.isToggleOn });\r\n }\r\n }\r\n\r\n handleChange(e) {\r\n this.props.onChange(e);\r\n this.setState((prevState) => { return { isToggleOn: !prevState.isToggleOn }; });\r\n }\r\n\r\n handleExtChange() {\r\n this.moduleToggle.click();\r\n }\r\n\r\n render() {\r\n const {\r\n buttonClass,\r\n name,\r\n id,\r\n disabled,\r\n tooltipText,\r\n } = this.props;\r\n\r\n const chk = (\r\n <>\r\n \r\n {props.title}\r\n {' '}\r\n {props.tooltipText == null ? ''\r\n : (\r\n
\r\n\r\n {props.children}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default OnOffSwitch;\r\n","export default __webpack_public_path__ + \"static/media/shelby-next@3x.b409ee61.png\";","export default __webpack_public_path__ + \"static/media/f-one-go@3x.bf68eb33.png\";","export default __webpack_public_path__ + \"static/media/sc-crm@3x.ef0eddf0.png\";","export default __webpack_public_path__ + \"static/media/et-plus@3x.711955b2.png\";","export default __webpack_public_path__ + \"static/media/co-online@3x.4fd4e6e0.png\";","export default __webpack_public_path__ + \"static/media/elexio-community@3x.9bb0500c.png\";","import React from 'react'; // eslint-disable-line\r\n\r\nconst Exclamation = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Exclamation;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport _actions from '../../actions';\r\nimport i18n from '../../i18n';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport ShelbyIcon from '../../assets/images/shelby-next@3x.png';\r\nimport F1GoIcon from '../../assets/images/f-one-go@3x.png';\r\nimport SCCRMIcon from '../../assets/images/sc-crm@3x.png';\r\nimport ETIcon from '../../assets/images/et-plus@3x.png';\r\nimport COOnlineIcon from '../../assets/images/co-online@3x.png';\r\nimport ElexioIcon from '../../assets/images/elexio-community@3x.png';\r\nimport Exclamation from '../../components/svg/Exclamation';\r\nimport SuccessCheck from '../../components/svg/SuccessCheck';\r\nimport PageBreak from '../../components/structure/PageBreak';\r\n\r\nclass ChmsIntegration extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.updateVersionFromEvent = this.updateVersionFromEvent.bind(this);\r\n this.learnMore = this.learnMore.bind(this);\r\n }\r\n\r\n updateVersionFromEvent(evt) {\r\n const version = this.props.versions.select;\r\n const fieldName = evt.target.name;\r\n let changedValue = evt.target.value;\r\n\r\n if (evt.target.type === 'checkbox') {\r\n changedValue = evt.target.checked;\r\n }\r\n version[fieldName] = changedValue;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n\r\n learnMore(e) {\r\n if (window.com?.mb?.waffle?.eatWaffle) {\r\n window.com.mb.waffle.eatWaffle(1);\r\n e.preventDefault();\r\n e.stopPropagation();\r\n e.nativeEvent.stopImmediatePropagation();\r\n this.setState({ waffled: true });\r\n }\r\n }\r\n\r\n checkForPeopleModule(){\r\n const modules = localStorage.getItem('ModulesData');\r\n const parsedModules = JSON.parse(modules);\r\n if (parsedModules !== null && parsedModules !== undefined){\r\n const hasPeople = parsedModules.find(e => e.name === 'People');\r\n if(hasPeople !== undefined){\r\n return true; \r\n }\r\n } \r\n return false; \r\n }\r\n\r\n render() {\r\n let chMSStatus; \r\n const inactiveChMS = (\r\n \r\n {tooltipText && disabled // eslint-disable-next-line\r\n ?\r\n (\r\n
\r\n \r\n {tooltipText}}\r\n >\r\n \r\n {chk}\r\n \r\n \r\n
\r\n )\r\n : (chk)}\r\n \r\n 
\r\n 
\r\n 
\r\n 
\r\n 
\r\n 
\r\n
\r\n );\r\n const activeChMS = (\r\n {i18n.t('integrations.chms.inactive-header')}
\r\n{i18n.t('integrations.chms.inactive-subtitle')}
\r\n\r\n {/* eslint-disable-next-line react/button-has-type */}\r\n {this.state?.waffled ? : { return this.learnMore(e); }} href=\"mailto:support@ministryone.com?subject=I'd%20like%20more%20info%20on%20ChMSes%20for%20MinistryOne&body=\">}\r\n
\r\n \r\n {i18n.t('integrations.chms.tagline')}\r\n {i18n.t('integrations.chms.tagline-support')}\r\n
\r\n\r\n \r\n
\r\n );\r\n \r\n // created acitve and inactiveChMSAmplify obejcts that utilize existing components to make sure toggle is in correct state but could most likely remove or simplify \r\n const activeChMSAmplify = (\r\n // {i18n.t('integrations.chms.active-header')}
\r\n{i18n.t('integrations.chms.active-subtitle')}
\r\n\r\n
\r\n )}\r\n \r\n \r\n {severity === \"success\" ? (\r\n \r\n {message}\r\n \r\n ) : (\r\n \r\n {message}\r\n \r\n )}\r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from \"react\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Visibility from \"@material-ui/icons/Visibility\";\r\nimport VisibilityOff from \"@material-ui/icons/VisibilityOff\";\r\n\r\n// Password Input Component\r\nexport const MiUiPasswordInput = ({\r\n label,\r\n value,\r\n onChange,\r\n name,\r\n error,\r\n helperText,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [showPassword, setShowPassword] = useState(false);\r\n const [inputValue, setInputValue] = useState(value || \"\");\r\n\r\n useEffect(() => {\r\n setInputValue(value || '');\r\n }, [value]);\r\n\r\n const handleTogglePasswordVisibility = () => {\r\n setShowPassword((prev) => !prev);\r\n };\r\n\r\n const handleMouseDown = (event) => {\r\n event.preventDefault(); // Prevent default focus behavior\r\n };\r\n\r\n const handleChange = (event) => {\r\n setInputValue(event.target.value);\r\n if (onChange) {\r\n onChange(event);\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {showPassword ? \r\n \r\n ),\r\n }\r\n }\r\n />\r\n );\r\n};\r\n\r\n// Normal Input Component\r\nexport const MiUiNormalInput = ({\r\n label,\r\n value,\r\n onChange,\r\n name,\r\n error,\r\n helperText,\r\n ...props\r\n}) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {props.name}\r\n \r\n {props.children}\r\n
\r\n );\r\n};\r\n\r\nexport default GeneralSection;\r\n","import React from 'react'; // eslint-disable-line\r\nimport i18n from '../../i18n';\r\nimport constants from '../../constants';\r\nimport PreviewModuleBottomMenuItem from './PreviewModuleBottomMenuItem';\r\nimport appStateProvider from '../../utilities/appStateProvider';\r\nimport Checkin from '../svg/preview/Checkin';\r\n\r\n// THIS CONTACT IS TAKEN FROM MOBILE APP TO LOAD THE GIVING FORM \r\n// THIS WILL BE ONLY USED IN THIS FILE \r\nconst MOBILE_APP_SOURCE_GIVING = {\r\n MINISTRY_ONE: 20,\r\n LEGACY: 5\r\n}\r\n\r\n\r\nclass PreviewGiving extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n const appState = appStateProvider();\r\n\r\n this.state = {\r\n loaded: false,\r\n isUnity: appState.getAnalyticsToken()?.isUnity\r\n };\r\n\r\n this.previewLoaded = this.previewLoaded.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (document.getElementById('form-preview')) {\r\n document.getElementById('form-preview')\r\n .addEventListener('load',\r\n this.previewLoaded);\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.module.formId !== prevProps.module.formId) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ loaded: false });\r\n if (prevProps.module.formId == null) {\r\n document.getElementById('form-preview')\r\n .addEventListener('load',\r\n this.previewLoaded);\r\n }\r\n }\r\n }\r\n\r\n previewLoaded = () => {\r\n this.setState({ loaded: true });\r\n }\r\n\r\n render() {\r\n const appSource = this.state.isUnity ? MOBILE_APP_SOURCE_GIVING.MINISTRY_ONE : MOBILE_APP_SOURCE_GIVING.LEGACY;\r\n const embeddedSource = 3; // BY PASSING 3, REFERENCE FROM MOBILE APP\r\n\r\n let modules = this.props.menuItems && this.props.menuItems.length > 0\r\n ? this.props.menuItems.filter((item) => { return item.displayOrder > -1; }) : [];\r\n modules = modules.sort((a, b) => { return a.displayOrder - b.displayOrder; });\r\n if (modules.length > 5 && this.props.menuStyle === 1) {\r\n modules = modules.slice(0, 4);\r\n modules.push({ displayOrder: 5, title: 'More', subType: 'more' });\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n\r\n const inactiveChMSAmplify = (\r\n // {i18n.t('integrations.chms.active-header')}
\r\n{i18n.t('integrations.chms.active-subtitle')}
\r\n\r\n
\r\n )}\r\n \r\n
\r\n );\r\n\r\n return !this.props.modules.allInProgress ? (\r\n\r\n \r\n \r\n
\r\n );\r\n \r\n const PeopleModule = this.checkForPeopleModule();\r\n const isUnity = localStorage.getItem('IsUnity');\r\n if(isUnity === 'true' && PeopleModule === true){\r\n chMSStatus = activeChMSAmplify; \r\n }\r\n else if(isUnity === 'false' && this.props.profiles.data.sccrmDomain == null) {\r\n chMSStatus = inactiveChMS;\r\n }\r\n else if(isUnity === 'false' && this.props.profiles.data.sccrmDomain !== null){\r\n chMSStatus = activeChMS; \r\n }\r\n else if(isUnity === 'true' && PeopleModule === false){\r\n chMSStatus = inactiveChMSAmplify; \r\n }\r\n else{\r\n chMSStatus = inactiveChMSAmplify; \r\n }\r\n\r\n return (\r\n {i18n.t('integrations.chms.active-header')}
\r\n{i18n.t('integrations.chms.active-subtitle')}
\r\n\r\n
\r\n )}\r\n \r\n {chMSStatus}\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ChmsIntegration);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst GreenCheck = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default GreenCheck;\r\n","export default __webpack_public_path__ + \"static/media/sharefaith.f4bbee7e.png\";","import React from 'react'; // eslint-disable-line\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport _actions from '../../actions';\r\nimport i18n from '../../i18n';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport GreenCheck from '../../components/svg/GreenCheck';\r\nimport constants from '../../constants';\r\nimport ShareFaith from '../../assets/images/sharefaith.png';\r\nimport ManagedInput from '../../components/forms/ManagedInput';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\n\r\nclass ShareFaithIntegration extends React.Component {\r\n timer = null;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.disconnect = this.disconnect.bind(this);\r\n\r\n this.state = {\r\n memberEmail: '',\r\n isConnected: false,\r\n errorEmail: '',\r\n };\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.integrations.sfLookupInProgress\r\n && !this.props.integrations.sfLookupInProgress) {\r\n if (this.props.integrations.sfMemberId && this.props.integrations.sfMemberId > 0) {\r\n this.selectedMember(this.props.integrations.sfMemberId);\r\n } else if (this.props.integrations.sferror\r\n && this.props.integrations.sferror.length > 0) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ errorEmail: 'An error occurred. Please try again or contact support.' });\r\n } else {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ errorEmail: 'This is not a valid Sharefaith account.' });\r\n }\r\n }\r\n\r\n if (prevProps.modules.allInProgress && !this.props.modules.allInProgress) {\r\n const devotionalModule = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Devotionals'; }).Id; });\r\n if (devotionalModule[0].shareFaithMemberId\r\n && devotionalModule[0].shareFaithMemberId > 0) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n memberEmail: devotionalModule[0].shareFaithMemberEmail,\r\n isConnected: true,\r\n errorEmail: '',\r\n });\r\n }\r\n }\r\n\r\n if (prevProps.modules.inProgress && !this.props.modules.inProgress) {\r\n const devotionalModule = this.props.modules.select;\r\n // use select because this only triggers on update of single module\r\n if (this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Devotionals'; }).Id) {\r\n if (devotionalModule.shareFaithMemberId\r\n && devotionalModule.shareFaithMemberId > 0) {\r\n const { memberEmail } = this.state;\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n memberEmail,\r\n isConnected: true,\r\n errorEmail: '',\r\n });\r\n } else {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n memberEmail: '',\r\n isConnected: false,\r\n });\r\n }\r\n }\r\n }\r\n }\r\n\r\n updateSearch = (input) => {\r\n if (input !== '') {\r\n clearTimeout(this.timer);\r\n this.setState({\r\n errorEmail: '', memberEmail: input.target.value, isConnected: false,\r\n });\r\n this.timer = setTimeout(this.triggerChange, 1000);\r\n }\r\n }\r\n\r\n triggerChange = () => {\r\n const { memberEmail } = this.state;\r\n this.searchEmail(memberEmail);\r\n }\r\n\r\n toggleModule = (evt) => {\r\n this.props.modules.data = this.props.modules.data.map((module) => {\r\n if (module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Devotionals'; }).Id) {\r\n // eslint-disable-next-line no-param-reassign\r\n module.enabled = evt.target.checked;\r\n return module;\r\n } return module;\r\n });\r\n this.updateModuleForFieldWithValue('enabled', evt.target.checked);\r\n }\r\n\r\n updateModuleForFieldWithValue = (field, val) => {\r\n this.props.actions.updateModuleParameter(\r\n this.props.versions.select.projectId,\r\n constants.ModuleType.find((c) => { return c.Name === 'Devotionals'; }).Id,\r\n field,\r\n val,\r\n );\r\n }\r\n\r\n selectedMember = (sfid) => {\r\n const moduleParamArray = [\r\n { parameterName: 'shareFaithMemberEmail', parameterValue: this.state.memberEmail },\r\n { parameterName: 'shareFaithMemberId', parameterValue: sfid },\r\n { parameterName: 'enabled', parameterValue: true },\r\n ];\r\n this.props.actions.updateModule(this.props.versions.select.projectId, constants.ModuleType.find((c) => { return c.Name === 'Devotionals'; }).Id, moduleParamArray);\r\n this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Devotionals'; }).Id; })[0].enabled = true;\r\n this.setState({ isConnected: true });\r\n }\r\n\r\n searchEmail(email) {\r\n this.props.actions.checkShareFaithEmail(email);\r\n }\r\n\r\n disconnect() {\r\n const moduleParamArray = [\r\n { parameterName: 'shareFaithMemberEmail', parameterValue: null },\r\n { parameterName: 'shareFaithMemberId', parameterValue: 0 },\r\n { parameterName: 'enabled', parameterValue: false },\r\n ];\r\n this.props.actions.updateModule(this.props.versions.select.projectId, constants.ModuleType.find((c) => { return c.Name === 'Devotionals'; }).Id, moduleParamArray);\r\n this.setState({ memberEmail: null, isConnected: false });\r\n }\r\n\r\n render() {\r\n const devotionalModule = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Devotionals'; }).Id; });\r\n const { isConnected } = this.state;\r\n const sfConnected = devotionalModule.length > 0 ? (\r\n \r\n
\r\n ) : '';\r\n const sfDisconnected = (\r\n \r\n
\r\n \r\n Account:\r\n {this.state.memberEmail}\r\n
\r\n\r\n {/* eslint-disable-next-line */}\r\n { this.disconnect(); }}>{i18n.t('disconnect')}\r\n\r\n \r\n\r\n \r\n
\r\n {i18n.t('integrations.devotionals.connected-header')}
\r\n{i18n.t('integrations.devotionals.connected-subtitle')}
\r\n\r\n
\r\n );\r\n\r\n // eslint-disable-next-line no-nested-ternary\r\n return !this.props.modules.allInProgress ? (devotionalModule.length > 0\r\n ? (\r\n \r\n
\r\n {i18n.t('integrations.devotionals.disconnected-header')}
\r\n{i18n.t('integrations.devotionals.disconnected-subtitle')}
\r\n\r\n\r\n { this.updateSearch(e); }}\r\n placeholder={i18n.t('integrations.devotionals.placeholder')}\r\n />\r\n
\r\n {this.state.errorEmail}
\r\n \r\n 
\r\n {isConnected ? sfConnected : sfDisconnected}\r\n
\r\n ) : '') : '';\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ShareFaithIntegration);\r\n","export default __webpack_public_path__ + \"static/media/churchstreaming.f11c0bf3.png\";","export default __webpack_public_path__ + \"static/media/AmplifyStreaming.410c853d.png\";","export default __webpack_public_path__ + \"static/media/myParishSoft-logo.f9b6b3b0.png\";","import Select from 'react-select'; // eslint-disable-line\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport React from 'react';\r\nimport i18n from '../../i18n';\r\nimport ChurchStreaming from '../../assets/images/churchstreaming.png';\r\nimport AmplifyStreaming from '../../assets/images/AmplifyStreaming.png';\r\nimport MyParishSoftStreaming from '../../assets/images/myParishSoft-logo.png';\r\nimport GreenCheck from '../../components/svg/GreenCheck';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport ManagedInput from '../../components/forms/ManagedInput';\r\nimport _actions from '../../actions';\r\nimport constants from '../../constants';\r\nimport appStateProvider from \"../../utilities/appStateProvider\";\r\nimport { ENVIRONMENT } from '../../utilities/constants';\r\n\r\nclass LiveStreamingIntegration extends React.Component {\r\n timer = null;\r\n\r\n constructor(props) {\r\n super(props);\r\n this.updateModuleFromEvent = this.updateModuleFromEvent.bind(this);\r\n this.setStateFromEvent = this.setStateFromEvent.bind(this);\r\n this.updateModuleForFieldWithValue = this.updateModuleForFieldWithValue.bind(this);\r\n this.updateDelayFromSelect = this.updateDelayFromSelect.bind(this);\r\n this.updateNullSubjectAndMessage = this.updateNullSubjectAndMessage.bind(this);\r\n this.state = {\r\n value: '',\r\n selectedChurchName: '',\r\n error: '',\r\n imageSrc: AmplifyStreaming,\r\n imgHeight: '64px'\r\n };\r\n }\r\n componentDidMount() {\r\n let imageSrc = '';\r\n let imgHeight = '';\r\n const appState = appStateProvider();\r\n const activeEnvironment = appState.getActiveEnvironment();\r\n\r\n if(activeEnvironment === ENVIRONMENT.AMPLIFY) {\r\n imageSrc = AmplifyStreaming;\r\n imgHeight = '64px';\r\n } else if(activeEnvironment === ENVIRONMENT.MY_PARISH_SOFT) {\r\n imageSrc = MyParishSoftStreaming;\r\n imgHeight = '64px'\r\n } else {\r\n imageSrc = ChurchStreaming\r\n imgHeight = '32px'\r\n }\r\n this.setState({imageSrc, imgHeight});\r\n \r\n }\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.modules.allInProgress && !this.props.modules.allInProgress) {\r\n if (this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].streamingName) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n selectedChurchName: this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].streamingName,\r\n });\r\n } else {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n selectedChurchName: '',\r\n });\r\n }\r\n }\r\n if (prevProps.integrations.inProgress && !this.props.integrations.inProgress) {\r\n if (this.props.integrations.cserror && this.props.integrations.cserror.length > 0) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ error: 'An error occurred. Please try again or contact support.' });\r\n } else {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n options: this.props.integrations.results?.map((x) => {\r\n return {\r\n value: x.id,\r\n label: x.name,\r\n };\r\n }),\r\n });\r\n }\r\n }\r\n }\r\n\r\n setStateFromEvent(e, stateKey) {\r\n const stateObj = {};\r\n stateObj[stateKey] = e.target.value;\r\n this.setState(stateObj);\r\n }\r\n\r\n updateSearch = (input) => {\r\n clearTimeout(this.timer);\r\n this.setState({ value: input });\r\n this.timer = setTimeout(this.triggerChange, 1000);\r\n }\r\n\r\n triggerChange = () => {\r\n const { value } = this.state;\r\n this.searchUser(value);\r\n }\r\n\r\n selectedChurch = (input) => {\r\n this.setState({ selectedChurchName: input.label });\r\n this.updateModuleForFieldWithValue('streamingId', input.value);\r\n this.updateModuleForFieldWithValue('streamingName', input.label);\r\n this.updateModuleForFieldWithValue('enabled', true);\r\n }\r\n\r\n disconnectStream = () => {\r\n this.setState({ selectedChurchName: '' });\r\n this.updateModuleForFieldWithValue('streamingId', null);\r\n }\r\n\r\n updateNullSubjectAndMessage() {\r\n const fields = [{ parameterName: 'pushNotifyOnStream', parameterValue: true }];\r\n\r\n if (!this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushSubject || this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushSubject.trim() === '') {\r\n fields.push({\r\n parameterName: 'pushSubject',\r\n parameterValue: this.props.versions.select.churchName + i18n.t('integrations.live-streaming.notification-subject-default'),\r\n });\r\n this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushSubject = this.props.versions.select.churchName + i18n.t('integrations.live-streaming.notification-subject-default');\r\n }\r\n\r\n if (!this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushMessage || this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushMessage.trim() === '') {\r\n fields.push({\r\n parameterName: 'pushMessage',\r\n parameterValue: i18n.t('integrations.live-streaming.notification-body-default'),\r\n });\r\n this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushMessage = i18n.t('integrations.live-streaming.notification-body-default');\r\n }\r\n this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushNotifyOnStream = true;\r\n this.updateModuleFieldsWithValues(fields);\r\n }\r\n\r\n updateModuleFieldsWithValues(fields) {\r\n this.props.actions.updateModule(\r\n this.props.versions.select.projectId,\r\n constants.ModuleType.find((c) => { return c.Name === 'LiveStreaming'; }).Id,\r\n fields,\r\n );\r\n }\r\n\r\n updateModuleFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n let changedValue = evt.target.value;\r\n if (evt.target.type === 'checkbox') {\r\n changedValue = evt.target.checked;\r\n }\r\n\r\n if (fieldName === 'pushNotifyOnStream' && changedValue === true) this.updateNullSubjectAndMessage();\r\n else if (changedValue !== this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0][fieldName]) this.updateModuleForFieldWithValue(fieldName, changedValue);\r\n }\r\n\r\n updateModuleForFieldWithValue(field, val) {\r\n const moduleRet = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0];\r\n moduleRet[field] = val;\r\n this.props.actions.updateModuleParameter(\r\n this.props.versions.select.projectId,\r\n constants.ModuleType.find((c) => { return c.Name === 'LiveStreaming'; }).Id,\r\n field,\r\n val,\r\n );\r\n }\r\n\r\n updateDelayFromSelect(val) {\r\n this.updateModuleForFieldWithValue('pushDelay', parseInt(val.value, 10));\r\n }\r\n\r\n searchUser(term) {\r\n this.props.actions.searchStreams(term);\r\n }\r\n\r\n render() {\r\n if (this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0]) {\r\n const addChurchForm = (\r\n \r\n
\r\n );\r\n const delayOpts = [\r\n { value: '0', label: i18n.t('integrations.live-streaming.time-opts.0') },\r\n {\r\n value: '5',\r\n label: i18n.t('integrations.live-streaming.time-opts.5') + i18n.t('integrations.live-streaming.time-opts.suffix'),\r\n },\r\n {\r\n value: '10',\r\n label: i18n.t('integrations.live-streaming.time-opts.10') + i18n.t('integrations.live-streaming.time-opts.suffix'),\r\n },\r\n {\r\n value: '15',\r\n label: i18n.t('integrations.live-streaming.time-opts.15') + i18n.t('integrations.live-streaming.time-opts.suffix'),\r\n },\r\n ];\r\n\r\n const pushOptions = (\r\n {i18n.t('integrations.live-streaming.inactive-header')}
\r\n{i18n.t('integrations.live-streaming.inactive-subtitle')}
\r\n\r\n\r\n \r\n {\r\n this.updateSearch(e);\r\n }}\r\n className=\"form-selector\"\r\n classNamePrefix=\"form-selector\"\r\n options={this.state.options}\r\n filterOption={() => {\r\n return true;\r\n }}\r\n onChange={(e) => {\r\n this.selectedChurch(e);\r\n }}\r\n autosize={false}\r\n placeholder={i18n.t('integrations.live-streaming.placeholder')}\r\n />\r\n
\r\n {this.state.error}
\r\n \r\n\r\n \r\n\r\n
\r\n );\r\n const churchSelected = (\r\n \r\n \r\n
\r\n \r\n { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushDelay?.toString() ? delayOpts.find((f) => { return f.value === this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushDelay.toString(); }) : delayOpts.find((f) => { return f.value === '5'; })}\r\n onChange={this.updateDelayFromSelect}\r\n clearable={false}\r\n searchable={false}\r\n disabled={!this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].enabled}\r\n />\r\n
\r\n \r\n\r\n \r\n
\r\n \r\n { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushSubject}\r\n maxLength={100}\r\n onBlur={this.updateModuleFromEvent}\r\n onReturnDown={this.updateModuleFromEvent}\r\n autoFocus={false}\r\n disabled={!this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].enabled}\r\n />\r\n
\r\n \r\n
\r\n \r\n { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushMessage}\r\n maxLength={240}\r\n onBlur={this.updateModuleFromEvent}\r\n onReturnDown={this.updateModuleFromEvent}\r\n autoFocus={false}\r\n disabled={!this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].enabled}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {i18n.t('disconnect')}\r\n \r\n
\r\n\r\n {this.state.selectedChurchName}
\r\n\r\n {/* eslint-disable-next-line */}\r\n\r\n\r\n \r\n\r\n { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].enabled}\r\n name=\"enabled\"\r\n onChange={this.updateModuleFromEvent}\r\n dataQA=\"liveStreaming-enabled\"\r\n />\r\n\r\n \r\n { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].enabled ? '' : 'disabled-section'}`}\r\n >\r\n \r\n\r\n { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushNotifyOnStream}\r\n name=\"pushNotifyOnStream\"\r\n onChange={this.updateModuleFromEvent}\r\n disabled={!this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].enabled}\r\n dataQA=\"liveStreaming-pushnotifications\"\r\n />\r\n\r\n \r\n {this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'LiveStreaming'; }).Id; })[0].pushNotifyOnStream ? pushOptions : ''}\r\n \r\n {i18n.t('integrations.live-streaming.helper-text')}\r\n \r\n
\r\n {i18n.t('integrations.live-streaming.active-header')}
\r\n{i18n.t('integrations.live-streaming.active-subtitle')}
\r\n\r\n 
\r\n {this.state.selectedChurchName.length < 1 ? addChurchForm : churchSelected}\r\n
\r\n ) : '';\r\n }\r\n\r\n return '';\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LiveStreamingIntegration);\r\n","export default __webpack_public_path__ + \"static/media/StudioC-logo.6d3a9721.png\";","import { Alert, Slide, Snackbar } from \"@material-ui/core\";\r\n\r\nexport default function MiUiSnackbar({\r\n toggleSnackbar,\r\n open,\r\n message,\r\n severity,\r\n}) {\r\n const SlideTransition = (props) => {\r\n return \r\n {isEdit && (\r\n \r\n Cancel\r\n \r\n )}\r\n \r\n {isLoading ? \"Saving...\" : \"Save\"}\r\n \r\n
\r\n );\r\n\r\n const AfterEditBtn = !btnEditClick && (\r\n \r\n {isEdit && (\r\n \r\n Edit\r\n \r\n )}\r\n
\r\n );\r\n\r\n const renderInputField = (\r\n labelText,\r\n value,\r\n name,\r\n type = \"text\",\r\n disabled = false,\r\n hasError,\r\n errorMessage = \"\",\r\n withIcon = false\r\n ) => (\r\n \r\n {type === \"password\" ? (\r\n
\r\n );\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport i18n from '../../i18n';\r\nimport PageBreak from '../../components/structure/PageBreak';\r\nimport ChmsIntegration from './ChmsIntegration';\r\nimport ShareFaithIntegration from './ShareFaithIntegration';\r\nimport LiveStreamingIntegration from './LiveStreamingIntegration';\r\nimport StudioCIntegration from './StudioCIntegration';\r\nimport appStateProvider from \"../../utilities/appStateProvider\";\r\nimport { ENVIRONMENT } from '../../utilities/constants';\r\n\r\nclass Integrations extends React.Component {\r\n componentDidMount() {\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (!prevProps.versions.publishProgress && this.props.versions.publishProgress) {\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n }\r\n }\r\n\r\n hideChmsToggleForUnityCustomers(){\r\n const isUnity = localStorage.getItem('IsUnity');\r\n if (isUnity === 'true'){\r\n return 'chms-integrations-hidden';\r\n }\r\n return 'chms-integrations-legacy';\r\n }\r\n\r\n render() {\r\n const chmsIntegrationsDiv = this.hideChmsToggleForUnityCustomers(); \r\n const version = this.props.versions.select;\r\n const appState = appStateProvider();\r\n const environment = appState.getActiveEnvironment();\r\n \r\n return (\r\n \r\n 
\r\n
\r\n \r\n
\r\n {i18n.t(\"integrations.studioC.title\")}
\r\n \r\n
\r\n\r\n {i18n.t(\"integrations.studioC.subtitle\")}
\r\n\r\n {renderInputField(\r\n i18n.t(\"integrations.studioC.fromElement.subDomain\"),\r\n formValues.domain,\r\n \"domain\",\r\n \"text\",\r\n !btnEditClick,\r\n isFormValidated && !formValues.domain\r\n )}\r\n\r\n {renderInputField(\r\n i18n.t(\"integrations.studioC.fromElement.username\"),\r\n formValues.userName,\r\n \"newUserName\",\r\n \"text\",\r\n !btnEditClick,\r\n isFormValidated && !formValues.userName\r\n )}\r\n\r\n {renderInputField(\r\n i18n.t(\"integrations.studioC.fromElement.password\"),\r\n formValues.password,\r\n \"newPassword\",\r\n \"password\",\r\n !btnEditClick,\r\n isFormValidated && !formValues.password,\r\n \"\",\r\n true\r\n )}\r\n
\r\n \r\n {OnEditBtn}\r\n {AfterEditBtn}\r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Integrations);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst More = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default More;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport More from '../svg/More';\r\n\r\nconst PreviewModuleBottomMenuItem = (props) => {\r\n return (\r\n {i18n.t('integrations.header')}
\r\n{i18n.t('integrations.subtitle')}
\r\n {!this.props.versions.inProgress\r\n && this.props.flags.results?.shareFaithDevotionals\r\n &&\r\n {!this.props.versions.inProgress\r\n && this.props.flags.results?.shareFaithDevotionals\r\n && (this.props.flags.results?.chMSIntegration\r\n || this.props.flags.results?.liveStreaming)\r\n &&
\r\n {!this.props.versions.inProgress\r\n && this.props.flags.results?.liveStreaming\r\n && \r\n
\r\n );\r\n};\r\n\r\nexport default PreviewModuleBottomMenuItem;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nconst PreviewModuleSideMenuItem = (props) => {\r\n return (\r\n\r\n \r\n {props.menuItem.subType === 'more'\r\n ?
\r\n {props.menuItem.title}
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default PreviewModuleSideMenuItem;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nconst PreviewModuleTileMenuItem = (props) => {\r\n return (\r\n\r\n \r\n
\r\n {props.menuItem.title}
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default PreviewModuleTileMenuItem;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Profile = (props) => {\r\n return (\r\n \r\n\r\n );\r\n};\r\n\r\nexport default Profile;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Messages = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Messages;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Checkin = (props) => {\r\n return (\r\n \r\n\r\n );\r\n};\r\n\r\nexport default Checkin;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport Profile from './Profile';\r\nimport Messages from './Messages';\r\nimport More from '../More';\r\nimport Checkin from './Checkin';\r\n\r\nclass PreviewModuleSideMenuIcon extends Component {\r\n render() {\r\n let body;\r\n switch (this.props.moduleType) {\r\n case 'messages': {\r\n body = (\r\n \r\n
\r\n {props.menuItem.title}
\r\n\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default PreviewEnableModules;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport constants from '../../constants';\r\nimport PreviewEnableModules from '../../components/preview/PreviewEnableModules';\r\nimport i18n from '../../i18n';\r\nimport HelpTooltip from '../../components/common/HelpTooltip';\r\nimport { findCheckInFromMenus } from '../../utilities/utils';\r\nimport { checkPeopleModulesAccessible } from '../../utilities/utils';\r\nimport appStateProvider from \"../../utilities/appStateProvider\";\r\nimport { ENVIRONMENT } from '../../utilities/constants';\r\n\r\nclass EnableModules extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n mainModules: [],\r\n sccrmModules: [],\r\n showPreview: true,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId);\r\n this.props.actions.getStudioCConfiguration();\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.modules.allInProgress !== prevProps.modules.allInProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ mainModules: this.props.modules.data.filter((module) => { return this.isInModuleGroup('Core', module.moduleType); }) });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ sccrmModules: this.props.modules.data.filter((module) => { return this.isInModuleGroup('Chms', module.moduleType); }) });\r\n }\r\n }\r\n\r\n updateModuleFromEvent = (e, module) => {\r\n this.handleModuleChange('enabled', e.target.checked, module);\r\n this.props.modules.data = this.props.modules.data.map((mod) => {\r\n return {\r\n ...mod,\r\n enabled: (module.moduleType === mod.moduleType ? !mod.enabled : mod.enabled),\r\n };\r\n });\r\n };\r\n\r\n handleModuleChange = (field, val, module) => {\r\n this.props.actions.updateModuleParameter(\r\n this.props.match.params.projectId, module.moduleType, field, val,\r\n );\r\n };\r\n\r\n isInModuleGroup = (group, moduleType) => {\r\n return constants.ModuleType.some((module) => {\r\n return module.Group === group && module.Id === moduleType;\r\n });\r\n }\r\n\r\n checkForPeopleModule() {\r\n const modules = localStorage.getItem('ModulesData');\r\n const parsedModules = JSON.parse(modules);\r\n if (parsedModules !== null && parsedModules !== undefined) {\r\n const hasPeople = parsedModules.find(e => e.name === 'People');\r\n if (hasPeople !== undefined) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n }\r\n\r\n isUnity() {\r\n const isUnity = localStorage.getItem('IsUnity');\r\n if (isUnity === 'true') {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n\r\n }\r\n\r\n legacyOrUnityCheckForDisabledChms(unity, people) {\r\n if (unity === true && people === true) {\r\n return false;\r\n }\r\n else if (unity === true && people === false) {\r\n this.appBuilderStandaloneToggleOff();\r\n return true;\r\n }\r\n else {\r\n return !this.props.versions.select.chMSIntegrations;\r\n }\r\n }\r\n\r\n disableToggleForModule(arr) {\r\n if (arr?.length > 0) {\r\n arr[0].enabled = false;\r\n }\r\n }\r\n\r\n appBuilderStandaloneToggleOff() {\r\n const { data: modulesData } = this.props.modules;\r\n\r\n if (!modulesData || modulesData?.length === 0) return;\r\n\r\n const moduleTypes = [9, 11, 7];//9, 11, 7 => people, groups, checkin(chmsIntegration)\r\n moduleTypes.forEach(moduleType => {\r\n const modulesOfType = modulesData.filter(module => module.moduleType === moduleType);\r\n this.disableToggleForModule(modulesOfType);\r\n });\r\n }\r\n\r\n studioCToggleOff(checkChms) {\r\n const appState = appStateProvider();\r\n const environment = appState.getActiveEnvironment();\r\n switch (environment) {\r\n case ENVIRONMENT.MY_PARISH_SOFT:\r\n this.disableToggleForModule(14);\r\n return true; // true == studioC should not working\r\n case ENVIRONMENT.AMPLIFY:\r\n case ENVIRONMENT.LEGACY:\r\n if (checkChms === false) { //false == checkChms is ONN then go in\r\n const response = this.props.StudioC;\r\n if (response.data) {\r\n if (response.data?.userName && response.data?.domain) {\r\n return false;//false == studioC should be working \r\n }\r\n else {\r\n return true; // true == studioC should not working\r\n }\r\n }\r\n }\r\n else\r\n return true; // true == studioC should not working\r\n default:\r\n return true; // true == studioC should not working\r\n }\r\n }\r\n\r\n render() {\r\n const version = this.props.versions.select;\r\n let activeCheckin = findCheckInFromMenus(this.props.menuItems.data);\r\n const legOrUnity = this.isUnity();\r\n const hasPeople = this.checkForPeopleModule();\r\n const areDisabled = this.legacyOrUnityCheckForDisabledChms(legOrUnity, hasPeople);\r\n const isStudioCOff = this.studioCToggleOff(areDisabled);\r\n const isPeopleModulesAccessible = checkPeopleModulesAccessible();\r\n const appState = appStateProvider();\r\n const environment = appState.getActiveEnvironment();\r\n\r\n const previewModules = (\r\n \r\n\r\n {this.props.menuStyle === constants.MenuStyle\r\n .find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n
\r\n \r\n\r\n
\r\n )}\r\n\r\n {this.props.menuStyle === constants.MenuStyle\r\n .find((c) => { return c.Name === 'SlideOut'; }).Id\r\n && (\r\n \r\n\r\n {modules\r\n .sort((a, b) => {\r\n return a.displayOrder > b.displayOrder;\r\n })\r\n .map((md, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n \r\n\r\n
\r\n )}\r\n\r\n {this.props.menuStyle === constants.MenuStyle\r\n .find((c) => { return c.Name === 'Tiled'; }).Id && (\r\n \r\n\r\n
\r\n\r\n \r\n
\r\n {this.props.checkin && (\r\n \r\n \r\n {i18n.t('modules.enable.preview.welcome-slide')}\r\n \r\n
\r\n \r\n {i18n.t('modules.enable.preview.action')}\r\n
\r\n\r\n
\r\n )}\r\n \r\n
\r\n {i18n.t('modules.enable.preview.checkin')}
\r\n\r\n
\r\n \r\n {modules\r\n .sort((a, b) => {\r\n return a.displayOrder > b.displayOrder;\r\n })\r\n .map((md, i) => {\r\n /* eslint-disable */\r\n return (\r\n \r\n
\r\n {i18n.t('modules.enable.preview.messages')}
\r\n\r\n
\r\n )}\r\n\r\n \r\n {i18n.t('modules.enable.preview.welcome-tiled')}\r\n
\r\n\r\n {this.props.churchName}\r\n
\r\n\r\n\r\n\r\n {modules\r\n .sort((a, b) => {\r\n return a.displayOrder > b.displayOrder;\r\n })\r\n .map((md, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n {i18n.t('modules.enable.preview.checkin')}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n {i18n.t('modules.enable.preview.messages')}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n {i18n.t('modules.enable.preview.profile')}\r\n
\r\n\r\n \r\n {i18n.t('modules.enable.header')}\r\n \r\n \r\n {i18n.t('modules.enable.subtitle')}\r\n \r\n\r\n
\r\n );\r\n return (\r\n \r\n {\r\n return mt.Id === module.moduleType;\r\n }).Name}\r\n >\r\n\r\n {\r\n this.updateModuleFromEvent(e, module);\r\n // eslint-disable-next-line no-param-reassign\r\n module.enabled = !module.enabled;\r\n }}\r\n dataQA={constants.ModuleType.find((mt) => {\r\n return mt.Id === module.moduleType;\r\n }).Name}\r\n disabled={constants.ModuleType.some(mt => {\r\n if (mt.Id === module.moduleType) {\r\n let HasGive = localStorage.getItem('HasGiving');\r\n if (mt.Name === \"Devotionals\" && module.shareFaithMemberId === 0)\r\n return true;\r\n else if (mt.Name === \"Giving\" && HasGive === \"false\")\r\n return true;\r\n }\r\n return false;\r\n })}\r\n //tooltipText={i18n.t('modules.enable.devotional-module-help')}\r\n />\r\n \r\n \r\n );\r\n })}\r\n
\r\n {isPeopleModulesAccessible && this.props.flags.results\r\n && this.props.flags.results?.chMSIntegration\r\n && (this.props.flags.results?.chMSCheckIn\r\n || this.props.flags.results?.scPeople)\r\n && (\r\n {i18n.t('modules.enable.section2')}
\r\n {this.state.mainModules.length > 0 && this.state.mainModules.map((module) => {\r\n return (\r\n \r\n\r\n \r\n {i18n.t('modules.enable.section3')}\r\n {' '}\r\n
\r\n {this.state.sccrmModules.length > 0 && this.state.sccrmModules.map((module) => {\r\n // Find the module type once and reuse it\r\n const moduleType = constants.ModuleType.find(mt => mt.Id === module.moduleType);\r\n const isStudioCModule = environment !== ENVIRONMENT.MY_PARISH_SOFT && moduleType.Name === \"StudioC\";\r\n const tooltipName = moduleType.Name;\r\n\r\n const handleChange = (e) => {\r\n this.updateModuleFromEvent(e, module);\r\n };\r\n\r\n const isDisabled = isStudioCModule ? isStudioCOff : areDisabled;\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n })}\r\n
\r\n )}\r\n \r\n {i18n.t('modules.enable.section3')}\r\n {' '}\r\n
\r\n {this.state.sccrmModules.length > 0 && this.state.sccrmModules.map((module) => {\r\n // Find the module type once and reuse it\r\n const moduleType = constants.ModuleType.find(mt => mt.Id === module.moduleType);\r\n const isStudioCModule = environment !== ENVIRONMENT.MY_PARISH_SOFT && moduleType.Name === \"StudioC\";\r\n const tooltipName = moduleType.Name;\r\n\r\n const handleChange = (e) => {\r\n this.updateModuleFromEvent(e, module);\r\n };\r\n\r\n const isDisabled = isStudioCModule ? isStudioCOff : areDisabled;\r\n\r\n return (\r\n \r\n \r\n {form}\r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnableModules);\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport ManagedInput from './ManagedInput';\r\nimport i18n from '../../i18n';\r\n\r\nclass ValidatedInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isFocused: false,\r\n value: this.props.value,\r\n };\r\n\r\n this.onBlurFn = this.onBlurFn.bind(this);\r\n this.onFocusFn = this.onFocusFn.bind(this);\r\n this.onChangeFn = this.onChangeFn.bind(this);\r\n this.myInp = React.createRef();\r\n this.focusTextInput = this.focusTextInput.bind(this);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.value !== prevProps.value && prevState.value !== this.props.value) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n value: !this.props.value ? '' : this.props.value,\r\n });\r\n }\r\n }\r\n\r\n onBlurFn(e) {\r\n this.setState({\r\n isFocused: false,\r\n });\r\n if (this.state.value === '' && this.props.menuTitle) {\r\n this.setState({ value: this.props.value });\r\n }\r\n\r\n if (this.props.onBlur) {\r\n this.props.onBlur(e);\r\n }\r\n }\r\n\r\n onFocusFn(e) {\r\n this.setState({\r\n isFocused: true,\r\n });\r\n\r\n if (this.props.onFocus) {\r\n this.props.onFocus(e);\r\n }\r\n }\r\n\r\n onChangeFn(e) {\r\n this.setState({\r\n value: e.target.value,\r\n });\r\n\r\n if (this.props.onChange) {\r\n this.props.onChange(e);\r\n }\r\n }\r\n\r\n focusTextInput() {\r\n // Explicitly focus the text input using the raw DOM API\r\n // Note: we're accessing \"current\" to get the DOM node\r\n this.myInp.current.focus();\r\n }\r\n\r\n render() {\r\n let {\r\n containerClass,\r\n containerId,\r\n actionClass,\r\n labelText,\r\n name,\r\n hasError,\r\n hasSuccess,\r\n type,\r\n onReturnDown,\r\n } = this.props;\r\n\r\n type = !type ? 'text' : type;\r\n\r\n containerClass = this.state.isFocused ? (`${containerClass} edit-in-focus`) : containerClass;\r\n if (hasError) {\r\n containerClass += ' has-error';\r\n } else if (hasSuccess) {\r\n containerClass += ' has-success';\r\n }\r\n\r\n return (\r\n \r\n {labelText?.length > 0 && }\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ValidatedInput;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst GeneralSection = (props) => {\r\n return (\r\n \r\n {i18n.t('edit')}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\nexport default PreviewGiving;\r\n","import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport React, { Component } from 'react'; // eslint-disable-line\r\nimport constants from '../../constants';\r\n\r\n// eslint-disable-next-line react/prefer-stateless-function\r\nclass ValidatedControl extends Component {\r\n render() {\r\n let {\r\n containerClass,\r\n hasError,\r\n errorMessage,\r\n hasWarning,\r\n warningMessage,\r\n hasSuccess,\r\n successMessage,\r\n hasInfo,\r\n infoMessage,\r\n } = this.props;\r\n\r\n const id = this.props.id ? this.props.id : containerClass;\r\n containerClass = this.props.isFocused ? (`${containerClass} is-focused`) : containerClass;\r\n if (hasError) {\r\n containerClass += ' has-error';\r\n } else if (hasSuccess) {\r\n containerClass += ' has-success';\r\n } else if (hasWarning) {\r\n containerClass += ' has-warning';\r\n } else if (hasInfo) {\r\n containerClass += ' has-info';\r\n }\r\n let underText = null;\r\n if (hasError) {\r\n if (errorMessage) {\r\n underText = (\r\n \r\n {this.props.menuStyle === constants.MenuStyle\r\n .find((c) => { return c.Name === 'Tiled'; }).Id && (\r\n
\r\n \r\n \r\n
\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'SlideOut'; }).Id && (\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.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n
\r\n \r\n {this.props.checkin &&
\r\n )}\r\n \r\n
\r\n {this.props.menuItem?.title}
\r\n\r\n
\r\n {!(navigator.userAgent.indexOf('MSIE') !== -1\r\n || navigator.appVersion.indexOf('Trident/') > -1) && !this.state.loaded && this.props.module.formId && {this.props.module.tab1Name ? this.props.module.tab1Name : i18n.t('modules.giving.give')}
\r\n {this.props.module.showSpecialDonationsTab && ({this.props.module.tab3Name ? this.props.module.tab3Name : i18n.t('modules.giving.special')}
)}\r\n {this.props.module.tab2Name ? this.props.module.tab2Name : i18n.t('modules.giving.history')}
\r\n {this.props.module.showScheduledGiftsTab && ({this.props.module.tab4Name ? this.props.module.tab4Name : i18n.t('modules.giving.scheduled')}
)}\r\n Form is Loading...
}\r\n\r\n {!this.props.module.formId && Please Choose a Form
}\r\n\r\n {(navigator.userAgent.indexOf('MSIE') !== -1\r\n || navigator.appVersion.indexOf('Trident/') > -1)\r\n && (\r\n \r\n\r\n Live preview is not available for Internet Explorer. Please use another browser.\r\n
\r\n )}\r\n {!(navigator.userAgent.indexOf('MSIE') !== -1\r\n || navigator.appVersion.indexOf('Trident/') > -1) && this.props.module.formId\r\n && (\r\n \r\n { return c.Name === 'Bottom'; }).Id ? '450px' : '500px'}\r\n style={{ marginTop: '-28px', marginLeft: '-10px' }}\r\n scrolling='no'\r\n class=\"iframe-no-scroll\"\r\n src={`${window.GENESIS_FMS_URL}viewForm.aspx?formId=${this.props.module.formId}&source=${appSource}&embedsource=${embeddedSource}&themecolors=${this.props?.accentColor},${this.props?.secondaryText},${this.props?.primaryText},${this.props?.actionColor},${this.props?.baseColorTheme}`}\r\n />\r\n
\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n\r\n \r\n\r\n {/* eslint-disable-next-line react/no-array-index-key */}\r\n {modules.sort((a, b) => { return a.displayOrder > b.displayOrder; }).map((md, i) => { return
\r\n\r\n )}\r\n \r\n
\r\n );\r\n }\r\n } else if (hasWarning) {\r\n if (warningMessage) {\r\n underText = (\r\n \r\n
\r\n {errorMessage}
\r\n\r\n
\r\n );\r\n }\r\n } else if (hasInfo) {\r\n if (infoMessage) {\r\n underText = (\r\n \r\n
\r\n {warningMessage}
\r\n\r\n
\r\n );\r\n }\r\n } else if (hasSuccess) {\r\n if (successMessage) {\r\n underText = (\r\n \r\n
\r\n {infoMessage}
\r\n\r\n
\r\n );\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n {successMessage}
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ValidatedControl;\r\n","import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport Select, { components } from 'react-select';\r\nimport { withRouter } from 'react-router';\r\nimport React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport constants from '../../constants';\r\nimport i18n from '../../i18n';\r\nimport _actions from '../../actions';\r\n\r\n// eslint-disable-next-line no-unused-vars\r\nconst Option = ({ value, label }) => {\r\n return (\r\n \r\n {this.props.children}\r\n
\r\n {underText}\r\n \r\n \r\n
\r\n );\r\n }\r\n let scheduledOption = '';\r\n if (this.state.module.showScheduledGiftsTab) {\r\n scheduledOption = (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n let bodyForm = '';\r\n if (this.state.module.enabled) {\r\n previewGiving = (\r\n \r\n
\r\n \r\n \r\n \r\n {i18n.t('modules.giving.title')}\r\n \r\n \r\n {i18n.t('modules.giving.subtitle')}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n \r\n {partnersOption}\r\n {scheduledOption}\r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {bodyForm}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GivingModule);\r\n","export default __webpack_public_path__ + \"static/media/img-placeholder-full-width.779e3e51.png\";","import React from 'react';\r\nimport moment from 'moment';\r\nimport placeholder from '../../assets/styles/img/img-placeholder-full-width.png';\r\n\r\nconst PreviewSermonsItem = (props) => {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default PreviewSermonsItem;\r\n","import React from 'react'; // eslint-disable-line\r\nimport moment from 'moment';\r\nimport i18n from '../../i18n';\r\nimport placeholder from '../../assets/styles/img/img-placeholder-full-width.png';\r\n\r\nconst PreviewFeaturedSermonsItem = (props) => {\r\n return (\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n {props.item.title}\r\n
\r\n\r\n {moment(props.item.date).format('MMM D')}\r\n
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default PreviewFeaturedSermonsItem;\r\n","import React from 'react'; // eslint-disable-line\r\nimport constants from '../../constants';\r\nimport PreviewModuleBottomMenuItem from './PreviewModuleBottomMenuItem';\r\nimport PreviewSermonsItem from './PreviewSermonsItem';\r\nimport PreviewFeaturedSermonsItem from './PreviewFeaturedSermonsItem';\r\nimport Checkin from '../svg/preview/Checkin';\r\n\r\nclass PreviewSermons extends React.Component {\r\n render() {\r\n let modules = this.props.menuItems && this.props.menuItems.length > 0\r\n ? this.props.menuItems.filter((item) => { return item.displayOrder > -1; }) : [];\r\n modules = modules.sort((a, b) => { return a.displayOrder - b.displayOrder; });\r\n if (modules.length > 5 && this.props.menuStyle === 1) {\r\n modules = modules.slice(0, 4);\r\n modules.push({ displayOrder: 5, title: 'More', subType: 'more' });\r\n }\r\n return (\r\n \r\n {props.item\r\n && (\r\n 
\r\n )}\r\n
\r\n \r\n
\r\n \r\n {' '}\r\n {i18n.t('modules.sermons.section2.label1')}\r\n
\r\n\r\n {props.item ? props.item.title : ''}\r\n
\r\n\r\n {props.item ? moment(props.item.date).format('MMM D') : ''}\r\n
\r\n\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Tiled'; }).Id && (\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default PreviewSermons;\r\n","import React from 'react'; // eslint-disable-line\r\nimport CloseX from '../svg/CloseX';\r\nimport i18n from '../../i18n';\r\n\r\nconst Dialog = (props) => {\r\n return (\r\n \r\n \r\n
\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'SlideOut'; }).Id && (\r\n \r\n \r\n
\r\n )}\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n
\r\n \r\n {this.props.checkin\r\n &&
\r\n )}\r\n \r\n
\r\n {this.props.menuItem?.title}
\r\n\r\n {this.props.media?.select\r\n && this.props.module.showFeatured\r\n && this.props.media?.select.items\r\n && (\r\n {\r\n return m.guid === this.props.module.featuredId;\r\n })\r\n : this.props.media?.select.items[0]}\r\n primaryText={this.props.primaryText}\r\n accentColor={this.props.accentColor}\r\n />\r\n )}\r\n {this.props.media?.select && this.props.media?.select.items\r\n ? this.props.media?.select.items.filter((i, k) => {\r\n if (this.props.module.showFeatured) {\r\n if (this.props.module.featuredId) {\r\n return i.guid !== this.props.module.featuredId;\r\n }\r\n return k !== 0;\r\n }\r\n return i;\r\n }).map((med, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n\r\n Connect a media source to preview sermon feed.
}\r\n {!this.props.media?.select && this.props.error\r\n && (\r\nPlease check the media source for errors.\r\n
\r\n )}\r\n\r\n\r\n {modules\r\n .sort((a, b) => {\r\n return a.displayOrder > b.displayOrder;\r\n })\r\n .map((md, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Dialog;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport Select from 'react-select';\r\nimport Dialog from '../common/Dialog';\r\n// sermons class added\r\nclass DialogSelectList extends Component {\r\n mapPagesToSelect(items) {\r\n if (items) {\r\n return items.map((item) => {\r\n return {\r\n value: item[this.props.valueKey],\r\n label: item[this.props.labelKey],\r\n };\r\n });\r\n }\r\n return [];\r\n }\r\n\r\n render() {\r\n const {\r\n visible,\r\n items,\r\n close,\r\n onSelect,\r\n description,\r\n icon,\r\n buttonContent,\r\n hideSelect,\r\n } = this.props;\r\n\r\n const itemList = this.mapPagesToSelect(items);\r\n\r\n return (\r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n {i18n.t('cancel')}\r\n \r\n
\r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n {props.ActionName}\r\n \r\n
\r\n \r\n \r\n {!hideSelect\r\n && (\r\n \r\n {buttonContent}\r\n \r\n )}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default DialogSelectList;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst ShowPassword = (props) => {\r\n return (\r\n props.showpassword\r\n ? (\r\n \r\n\r\n \r\n {i18n.t('connect')}\r\n \r\n\r\n
\r\n );\r\n if (this.props.versions.select && this.props.versions.select.cloverAccountEmail) {\r\n cloverForm = (\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n {/* eslint-disable-next-line */}\r\n \r\n
\r\n \r\n \r\n {i18n.t('disconnect')}\r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n Account:\r\n {this.props.versions.select.cloverAccountEmail}\r\n
\r\n\r\n {/* eslint-disable-next-line */}\r\n\r\n\r\n {this.state.showCloverPages\r\n && (\r\n \r\n {i18n.t('modules.sermons.clover.header')}\r\n \r\n {cloverForm}\r\n {this.state.confirmDisconnect\r\n && (\r\n { return mt.Name === 'Vimeo'; }).Id ? i18n.t('modules.sermons.vimeo.warning') : i18n.t('modules.sermons.confirm')}\r\n ExecuteAction={this.handleDisconnect}\r\n CloseDialog={this.closeYesNoDialog}\r\n Visible={this.state.confirmDisconnect}\r\n title=\"Disconnect Existing Source?\"\r\n />\r\n )}\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CloverSermons);\r\n","import React from 'react'; // eslint-disable-line\r\nimport i18n from '../../i18n';\r\nimport GreenCheck from '../svg/GreenCheck';\r\n\r\nclass ThirdPartyConnect extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleClick = this.handleClick.bind(this);\r\n this.handleDisconnect = this.handleDisconnect.bind(this);\r\n }\r\n\r\n handleClick(e) {\r\n this.props.onClick(e);\r\n }\r\n\r\n handleDisconnect(e) {\r\n if (this.props.onDisconnect) {\r\n this.props.onDisconnect(e);\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n ThirdPartyId,\r\n ThirdPartyTitle,\r\n ThirdPartyIcon,\r\n ThirdPartyIconViewBox,\r\n ThirdPartyIconFillRule,\r\n ThirdPartyIconFill,\r\n Connected,\r\n DataQA,\r\n } = this.props;\r\n return (\r\n \r\n {Connected &&
\r\n );\r\n }\r\n}\r\n\r\nexport default ThirdPartyConnect;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst MediaLogo = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default MediaLogo;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { Trans } from 'react-i18next';\r\nimport Dialog from './Dialog';\r\nimport MediaLogo from '../svg/MediaLogo';\r\nimport i18n from '../../i18n';\r\n\r\nclass InputDialog extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Value: '',\r\n };\r\n }\r\n\r\n closeDialog = () => {\r\n if (this.props.CloseDialog) {\r\n this.props.CloseDialog();\r\n }\r\n }\r\n\r\n generateClass = (className) => {\r\n return className;\r\n }\r\n\r\n executeAction = () => {\r\n this.executeActionWithValue(this.state.Value);\r\n }\r\n\r\n executeActionWithValue = (val) => {\r\n if (this.props.Action) {\r\n this.props.Action(val);\r\n }\r\n }\r\n\r\n updateValue = (e) => {\r\n this.setState({\r\n Value: e.target.value,\r\n });\r\n }\r\n\r\n onKeyDownFn = (e) => {\r\n if (e.keyCode === 13) {\r\n this.executeActionWithValue(e.target.value);\r\n } else if (e.keyCode === 27) {\r\n this.closeDialog();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n Visible,\r\n SVGIconPath,\r\n SVGIconFill,\r\n SVGIconFillRule,\r\n Placeholder,\r\n ActionName,\r\n } = this.props;\r\n const { value } = this.props;\r\n\r\n let hint = '';\r\n if (Placeholder) {\r\n hint = (\r\n \r\n \r\n
\r\n {ThirdPartyTitle}
\r\n {Connected && (\r\n // eslint-disable-next-line react/button-has-type\r\n \r\n )}\r\n {!Connected && (\r\n // eslint-disable-next-line react/button-has-type\r\n \r\n )}\r\n\r\n {i18n.t('example')}\r\n {' '}\r\n
\r\n );\r\n }\r\n\r\n return (\r\n {this.props.Title}
\r\n\r\n \r\n {\r\n this.textInput = input;\r\n }}\r\n type=\"text\"\r\n value={value}\r\n onBlur={this.updateValue}\r\n placeholder={Placeholder}\r\n onKeyDown={this.onKeyDownFn}\r\n autoFocus // eslint-disable-line\r\n />\r\n {hint}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default InputDialog;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport i18n from '../../i18n';\r\nimport _actions from '../../actions';\r\nimport ThirdPartyConnect from './ThirdPartyConnect';\r\nimport constants from '../../constants';\r\nimport InputDialog from '../common/InputDialog';\r\nimport YesNoDialog from '../common/YesNoDialog';\r\n\r\nclass RSSSermons extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n dialogOpened: false,\r\n };\r\n }\r\n\r\n openMediaDialog = () => {\r\n this.clearMediaAlerts();\r\n this.setState({\r\n dialogOpened: true,\r\n dialogDescription: i18n.t('modules.sermons.rss.description'),\r\n dialogPlaceholder: i18n.t('modules.sermons.rss.placeholder'),\r\n dialogTitle: i18n.t('modules.sermons.rss.title'),\r\n dialogActionName: i18n.t('modules.sermons.rss.action'),\r\n dialogIconPath: 'M39.0694513,37.2453339 C39.0694513,39.3083472 38.8506469,41.3713605 38.5380691,43.4031159 C38.0692025,46.6539247 37.6003358,49.9985069 36.8188914,53.1868001 C36.2562514,55.4686178 34.1307226,56 32.0677093,56 C30.004696,56 27.8791672,55.4686178 27.3165272,53.1868001 C26.5350828,49.9985069 26.0662162,46.6539247 25.5973495,43.4031159 C25.2847717,41.3713605 25.0659673,39.3083472 25.0659673,37.2453339 C25.0659673,33.025534 28.473065,31.9940274 32.0677093,31.9940274 C35.6623536,31.9940274 39.0694513,33.025534 39.0694513,37.2453339 Z M56.0111663,23.9920365 C56.0111663,34.1195562 49.759611,42.7779604 40.8824024,46.3100892 C40.5385668,46.4351203 40.1634735,46.1225425 40.2259891,45.7474492 C40.3197624,45.0910359 40.4135357,44.4033648 40.5385668,43.6844359 C40.6010824,43.1843115 40.6635979,42.6841871 40.7261135,42.2153204 C40.7573713,42.0277738 40.8511446,41.9027427 41.0074335,41.8402271 C47.5090511,38.5269028 52.0101709,31.775223 52.0101709,23.9920365 C52.0101709,12.582948 42.4452912,3.39316162 30.9111716,4.01831716 C20.346043,4.58095714 11.937701,13.5831969 12.0002166,24.1483254 C12.0627321,31.9315119 16.5951098,38.6519339 23.1279851,41.9027427 C23.284274,41.9652582 23.3780474,42.1215471 23.4093051,42.277836 C23.4718207,42.7154449 23.5343362,43.1843115 23.5968518,43.6844359 C23.7218829,44.4346226 23.8156562,45.1222937 23.9406873,45.8099648 C24.0032029,46.1850581 23.5968518,46.4976358 23.2530162,46.341347 C13.9694565,42.7154449 7.49909673,33.4631429 8.03047894,22.804241 C8.6243767,10.7074814 18.3768031,0.798766147 30.4735627,0.0485795036 C44.4145311,-0.826638247 56.0111663,10.2386147 56.0111663,23.9920365 Z M39.0694513,22.9917877 C39.0694513,26.867752 35.9436736,29.9935297 32.0677093,29.9935297 C28.191745,29.9935297 25.0659673,26.867752 25.0659673,22.9917877 C25.0659673,19.1158234 28.191745,15.9900457 32.0677093,15.9900457 C35.9436736,15.9900457 39.0694513,19.1158234 39.0694513,22.9917877 Z M48.071691,23.9920365 C48.071691,29.1495697 45.6023267,33.7757207 41.8201357,36.6826939 C41.5075579,36.9327561 41.069949,36.7139517 41.0074335,36.3076006 C40.9136601,35.4323829 40.6635979,34.4008762 40.1009579,33.4318851 C39.9759268,33.2443385 40.0071846,32.9942763 40.1947313,32.8067296 C42.5703223,30.6186852 44.0706956,27.4929075 44.0706956,23.9920365 C44.0706956,16.927779 37.9129136,11.2701214 30.6923671,12.0515658 C25.1597406,12.6767213 20.6586208,17.2403568 20.1272386,22.804241 C19.7208875,26.7427209 21.2837763,30.368623 23.9406873,32.8067296 C24.128234,32.9942763 24.1594918,33.2443385 24.0344607,33.4318851 C23.4718207,34.4008762 23.2217585,35.4323829 23.1279851,36.3388584 C23.0654696,36.7139517 22.6278607,36.9327561 22.3152829,36.6826939 C18.4393186,33.6819474 15.9699542,28.9620231 16.0637276,23.648201 C16.2512742,15.3336324 23.002954,8.39440591 31.2862649,8.01931259 C40.4760513,7.58170372 48.071691,14.8960235 48.071691,23.9920365 Z',\r\n dialogIconFill: 'url(#podcast-a)',\r\n dialogIconFillRule: 'evenodd',\r\n });\r\n };\r\n\r\n importFeedURL = (value) => {\r\n this.clearMediaAlerts();\r\n if (!value) {\r\n this.openAlert();\r\n } else {\r\n this.props.updateFields(\r\n [{ Name: 'mediaType', Value: 3 }, { Name: 'mediaUrl', Value: value.trim() }],\r\n );\r\n this.closeDialog();\r\n }\r\n };\r\n\r\n openAlert = () => {\r\n this.props.actions.addAlert({\r\n id: 'sermons-rss',\r\n message: i18n.t('modules.sermons.rss.error'),\r\n dismissable: true,\r\n type: 'error',\r\n view: 'modules/sermons',\r\n });\r\n };\r\n\r\n clearMediaAlerts = () => {\r\n this.props.actions.clearAlert('youtube');\r\n this.props.actions.clearAlert('sermons-rss');\r\n this.props.actions.clearAlert('sermon-media-invalid');\r\n this.props.actions.clearAlert('empty');\r\n this.props.actions.clearAlert('vimeo-denied');\r\n }\r\n\r\n connectClick = () => {\r\n if (this.props.versions.select.mediaType) {\r\n this.showDisconnectConfirm();\r\n }\r\n this.openMediaDialog();\r\n };\r\n\r\n showDisconnectConfirm = () => {\r\n this.setState({\r\n confirmDisconnect: true,\r\n });\r\n };\r\n\r\n closeDialog = () => {\r\n this.setState({\r\n dialogOpened: false,\r\n });\r\n };\r\n\r\n closeYesNoDialog = () => {\r\n this.setState({\r\n confirmDisconnect: false,\r\n dialogOpened: false,\r\n });\r\n };\r\n\r\n handleDisconnect = () => {\r\n this.props.handleDisconnect();\r\n this.setState({\r\n confirmDisconnect: false,\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.dialogOpened && !this.state.confirmDisconnect\r\n && (\r\n { return mt.Name === 'Vimeo'; }).Id ? i18n.t('modules.sermons.vimeo.warning') : i18n.t('modules.sermons.confirm')}\r\n ExecuteAction={this.handleDisconnect}\r\n CloseDialog={this.closeYesNoDialog}\r\n Visible={this.state.confirmDisconnect}\r\n title=\"Disconnect Existing Source?\"\r\n />\r\n )}\r\n { return mt.Name === 'RSSPodcast'; }).Id}\r\n onClick={() => { this.connectClick(); }}\r\n onDisconnect={this.showDisconnectConfirm}\r\n Value=\"\"\r\n DataQA=\"rss\"\r\n />\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(RSSSermons);\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport i18n from '../../i18n';\r\nimport _actions from '../../actions';\r\nimport ThirdPartyConnect from './ThirdPartyConnect';\r\nimport constants from '../../constants';\r\nimport InputDialog from '../common/InputDialog';\r\nimport YesNoDialog from '../common/YesNoDialog';\r\n\r\nclass YouTubeSermons extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n dialogOpened: false,\r\n };\r\n }\r\n\r\n openMediaDialog = () => {\r\n this.clearMediaAlerts();\r\n this.setState({\r\n dialogOpened: true,\r\n dialogDescription: i18n.t('modules.sermons.youtube.description'),\r\n dialogPlaceholder: i18n.t('modules.sermons.youtube.placeholder'),\r\n dialogTitle: i18n.t('modules.sermons.youtube.title'),\r\n dialogActionName: i18n.t('modules.sermons.youtube.action'),\r\n dialogIconPath: 'M63.3252635,9.7 C63.3252635,9.7 62.7005075,5.3 60.7762593,3.35 C58.3522063,0.8 55.6282702,0.8 54.353768,0.65 C45.432253,0 32.012495,0 32.012495,0 L31.987505,0 C31.987505,0 18.567747,0 9.59625148,0.65 C8.34673955,0.8 5.6228036,0.8 3.17376025,3.35 C1.27450215,5.3 0.649746192,9.7 0.649746192,9.7 C0.649746192,9.7 0,14.9 0,20.075 L0,24.925 C0,30.1 0.649746192,35.275 0.649746192,35.275 C0.649746192,35.275 1.27450215,39.675 3.1987505,41.625 C5.6228036,44.175 8.82155407,44.1 10.2459976,44.35 C15.3689965,44.85 31.987505,45 31.987505,45 C31.987505,45 45.432253,44.975 54.3787582,44.325 C55.6282702,44.175 58.3522063,44.175 60.8012495,41.625 C62.7254978,39.675 63.3502538,35.275 63.3502538,35.275 C63.3502538,35.275 64,30.1 64,24.925 L64,20.075 C63.9750097,14.9 63.3252635,9.7 63.3252635,9.7 L63.3252635,9.7 Z M25.390082,30.8 L25.390082,12.825 L42.6833267,21.85 L25.390082,30.8 L25.390082,30.8 Z',\r\n dialogIconFill: 'url(#youtube-a)',\r\n dialogIconFillRule: 'nonzero',\r\n });\r\n };\r\n\r\n importFeedURL = (value) => {\r\n this.clearMediaAlerts();\r\n this.props.actions.clearAlert('empty');\r\n if (value.indexOf('channel') !== -1 || value.indexOf('playlist?list=') !== -1 || value.indexOf('user') !== -1) {\r\n this.props.updateFields([{ Name: 'mediaType', Value: 1 }, { Name: 'mediaUrl', Value: value.trim() }]);\r\n this.closeDialog();\r\n } else {\r\n this.openYouTubeAlert();\r\n this.closeDialog();\r\n }\r\n };\r\n\r\n openYouTubeAlert = () => {\r\n const id = 'youtube';\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.sermons.youtube.error'),\r\n dismissable: true,\r\n type: 'error',\r\n view: 'modules/sermons',\r\n id,\r\n });\r\n };\r\n\r\n clearMediaAlerts = () => {\r\n this.props.actions.clearAlert('youtube');\r\n this.props.actions.clearAlert('sermons-rss');\r\n this.props.actions.clearAlert('sermon-media-invalid');\r\n this.props.actions.clearAlert('empty');\r\n this.props.actions.clearAlert('vimeo-denied');\r\n }\r\n\r\n connectClick = () => {\r\n if (this.props.versions.select.mediaType) {\r\n this.showDisconnectConfirm();\r\n }\r\n this.openMediaDialog();\r\n };\r\n\r\n showDisconnectConfirm = () => {\r\n this.setState({\r\n confirmDisconnect: true,\r\n });\r\n };\r\n\r\n closeDialog = () => {\r\n this.setState({\r\n dialogOpened: false,\r\n });\r\n };\r\n\r\n closeYesNoDialog = () => {\r\n this.setState({\r\n confirmDisconnect: false,\r\n dialogOpened: false,\r\n });\r\n };\r\n\r\n handleDisconnect = () => {\r\n this.props.handleDisconnect();\r\n this.setState({\r\n confirmDisconnect: false,\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.dialogOpened\r\n && (\r\n { return mt.Name === 'Vimeo'; }).Id ? i18n.t('modules.sermons.vimeo.warning') : i18n.t('modules.sermons.confirm')}\r\n ExecuteAction={this.handleDisconnect}\r\n CloseDialog={this.closeYesNoDialog}\r\n Visible={this.state.confirmDisconnect}\r\n title=\"Disconnect Existing Source?\"\r\n />\r\n )}\r\n\r\n { return mt.Name === 'YouTube'; }).Id}\r\n onClick={() => { this.connectClick(); }}\r\n onDisconnect={this.showDisconnectConfirm}\r\n Value=\"\"\r\n DataQA=\"youtube\"\r\n />\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(YouTubeSermons);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Vimeo = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Vimeo;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport i18n from '../../i18n';\r\nimport _actions from '../../actions';\r\nimport ThirdPartyConnect from './ThirdPartyConnect';\r\nimport constants from '../../constants';\r\nimport YesNoDialog from '../common/YesNoDialog';\r\nimport Vimeo from '../svg/Vimeo';\r\nimport DialogSelectList from './DialogSelectList';\r\n\r\nclass VimeoSermons extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n vimeoPrebounce: false,\r\n vimeoPostbounce: false,\r\n vimeoErrorAdded: false,\r\n };\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (window.location.search.includes('vimeo=true') && !prevState.vimeoPostbounce && this.props.versions.select.vimeoToken) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ vimeoPostbounce: true });\r\n this.props.actions.getVimeoFeeds(this.props.versions.select.vimeoToken);\r\n }\r\n if (window.location.search.includes('vimeoDenied=true') && !this.state.vimeoErrorAdded) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ vimeoErrorAdded: true });\r\n this.props.actions.addAlert({\r\n message: i18n.t('vimeo.idk'),\r\n clearable: true,\r\n clearAction: this.clearDenied,\r\n type: 'error',\r\n view: 'sermons',\r\n id: 'vimeo-denied',\r\n });\r\n }\r\n }\r\n\r\n clearDenied = () => {\r\n this.props.actions.clearAlert('vimeo-denied');\r\n window.history.replaceState({}, document.title, document.location.pathname);\r\n };\r\n\r\n openMediaDialog = () => {\r\n this.setState({\r\n vimeoPrebounce: true,\r\n });\r\n };\r\n\r\n closePostbounce = () => {\r\n this.props.actions.updateProjectVersionbyParameter(this.props.versions.select.projectId, 'vimeoToken', '');\r\n this.setState({\r\n vimeoPostbounce: false,\r\n });\r\n window.history.replaceState({}, document.title, document.location.pathname);\r\n };\r\n\r\n closePrebounce = () => {\r\n this.setState({\r\n vimeoPrebounce: false,\r\n });\r\n };\r\n\r\n connectClick = () => {\r\n if (this.props.versions.select.mediaType) {\r\n this.showDisconnectConfirm();\r\n }\r\n this.openMediaDialog();\r\n };\r\n\r\n showDisconnectConfirm = () => {\r\n this.setState({\r\n confirmDisconnect: true,\r\n });\r\n };\r\n\r\n closeYesNoDialog = () => {\r\n this.setState({\r\n confirmDisconnect: false,\r\n });\r\n };\r\n\r\n handleDisconnect = () => {\r\n this.props.handleDisconnect();\r\n this.setState({\r\n confirmDisconnect: false,\r\n });\r\n };\r\n\r\n authToVimeo = () => {\r\n window.location.replace(`/vimeo-authenticator?whiteURL=${\r\n encodeURIComponent(JSON.stringify({ origin: document.location.origin, path: document.location.pathname }))}`);\r\n };\r\n\r\n saveVimeoProduct = (value) => {\r\n this.props.updateFields(\r\n [{ Name: 'mediaType', Value: 5 }, { Name: 'mediaUrl', Value: `https://api.vimeo.com${value.value}` }],\r\n );\r\n this.setState({\r\n vimeoPostbounce: false,\r\n });\r\n window.history.replaceState({}, document.title, document.location.pathname);\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n { return mt.Name === 'Vimeo'; }).Id ? i18n.t('modules.sermons.vimeo.warning') : i18n.t('modules.sermons.confirm')}\r\n ExecuteAction={this.handleDisconnect}\r\n CloseDialog={this.closeYesNoDialog}\r\n Visible={this.state.confirmDisconnect}\r\n title=\"Disconnect Existing Source?\"\r\n />\r\n )}\r\n\r\n { return mt.Name === 'Vimeo'; }).Id || this.props.versions.select.mediaType === constants.MediaType.find((mt) => { return mt.Name === 'VimeoAPI'; }).Id}\r\n onClick={() => { this.connectClick(); }}\r\n onDisconnect={this.showDisconnectConfirm}\r\n Value=\"\"\r\n DataQA=\"vimeo\"\r\n />\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(VimeoSermons));\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport Select from 'react-select';\r\nimport { bindActionCreators } from 'redux';\r\nimport Spinner from '../../components/svg/Spinner';\r\nimport EditInput from '../../components/forms/EditInput';\r\nimport constants from '../../constants';\r\nimport GeneralSection from '../../components/common/GeneralSection';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport _actions from '../../actions';\r\nimport PreviewSermonsModule from '../../components/preview/PreviewSermons';\r\nimport i18n from '../../i18n';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport CloverSermons from '../../components/sermonModule/CloverSermons';\r\nimport RSSSermons from '../../components/sermonModule/RSSSermons';\r\nimport YouTubeSermons from '../../components/sermonModule/YouTubeSermons';\r\nimport VimeoSermons from '../../components/sermonModule/VimeoSermons';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\n\r\nexport class SermonsModule extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLoaded: false,\r\n menuItem: {},\r\n module: {},\r\n clearClover: false,\r\n showPreview: true,\r\n };\r\n\r\n this.updateModuleFieldsWithValues = this.updateModuleFieldsWithValues.bind(this);\r\n this.updateModuleFromEvent = this.updateModuleFromEvent.bind(this);\r\n this.updateModuleFeaturedId = this.updateModuleFeaturedId.bind(this);\r\n this.handleDisconnect = this.handleDisconnect.bind(this);\r\n this.updateMenuItemFromEvent = this.updateMenuItemFromEvent.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n this.props.actions.getModuleByType(\r\n this.props.match.params.projectId,\r\n constants.ModuleType.find((mt) => {\r\n return mt.Name === 'Sermons';\r\n }).Id,\r\n );\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.modules.select && this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Sermons'; }).Id\r\n && this.props.modules.select.enabled) {\r\n if (this.props.alerts.data.length > 0 && this.props.alerts.data.find((m) => { return m.id === 'module-disabled'; })) {\r\n this.props.actions.clearAlert('module-disabled');\r\n }\r\n }\r\n if (!prevState.isLoaded\r\n || (!this.props.modules.select.enabled)) {\r\n if (this.props.modules.select && this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType\r\n .find((m) => { return m.Name === 'Sermons'; }).Id\r\n && !this.props.modules.select.enabled) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.sermons.error1'),\r\n linkText: i18n.t('enableHere'),\r\n link: `/projects/${this.props.match.params.projectId}/modules/enable-modules`,\r\n view: '/modules/sermons',\r\n type: 'warning',\r\n id: 'module-disabled',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isLoaded: true });\r\n }\r\n }\r\n if (prevProps.modules.inProgress\r\n && !this.props.modules.inProgress\r\n && this.props.modules.select\r\n && this.props.modules.select.enabled) {\r\n this.loadProjectMedia();\r\n }\r\n if ((!this.props.menuItems.inProgress\r\n && prevProps.menuItems.inProgress)\r\n || (!this.props.modules.inProgress\r\n && prevProps.modules.inProgress)) {\r\n let menuItem = this.props.menuItems.data !== []\r\n && typeof (this.props.modules.select.moduleType) === 'number'\r\n ? this.props.menuItems.data\r\n .find((mi) => {\r\n return mi.type === 1\r\n && parseInt(mi.subType, 10) === this.props.modules.select.moduleType;\r\n })\r\n : '';\r\n menuItem = menuItem || {};\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ menuItem });\r\n }\r\n if (!this.props.modules.inProgress && prevProps.modules.inProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ module: this.props.modules.select });\r\n }\r\n if (prevProps.media?.inProgress && !this.props.media?.inProgress) {\r\n if (this.props.media.error) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.sermons.error-get-media-failure'),\r\n view: '/modules/sermons',\r\n type: 'error',\r\n id: 'get-media-failure',\r\n });\r\n }\r\n }\r\n if (this.props.media?.select?.items !== prevProps.media?.select?.items) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ media: JSON.parse(JSON.stringify(this.props.media)) });\r\n }\r\n }\r\n\r\n handleDisconnect() {\r\n if (this.props.versions.select.cloverAccountEmail) {\r\n this.runClearCloverMedia();\r\n } else {\r\n this.updateVersionForFieldsWithValues([\r\n {\r\n Name: 'mediaUrl',\r\n Value: '',\r\n },\r\n {\r\n Name: 'mediaType',\r\n Value: undefined,\r\n },\r\n {\r\n Name: 'vimeoToken',\r\n Value: '',\r\n },\r\n ], true);\r\n }\r\n }\r\n\r\n formatItemsForSelect = (items) => {\r\n const formattedItems = [];\r\n formattedItems.push({\r\n label: i18n.t('modules.sermons.select'),\r\n value: 'auto',\r\n });\r\n // eslint-disable-next-line no-restricted-syntax\r\n for (const item of items) {\r\n formattedItems.push({\r\n label: item.title,\r\n value: item.guid,\r\n });\r\n }\r\n return formattedItems;\r\n }\r\n\r\n runClearCloverMedia = () => {\r\n this.props.actions.disconnectCloverAccount(this.props.versions.select);\r\n this.setState({\r\n clearClover: true,\r\n });\r\n };\r\n\r\n updateFeedUrl = (fields) => {\r\n this.updateVersionForFieldsWithValues(fields, false);\r\n };\r\n\r\n loadProjectMedia() {\r\n this.props.actions.getProjectMedia(this.props.match.params.projectId);\r\n }\r\n\r\n updateMenuItemFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim().length > 0 ? evt.target.value.trim() : i18n.t('modules.sermons.sermons');\r\n if (changedValue !== '') {\r\n this.setState((prevState) => {\r\n return {\r\n menuItem: {\r\n ...prevState.menuItem,\r\n title: changedValue,\r\n },\r\n };\r\n });\r\n this.props.actions.updateMenuItemParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n 1,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n }\r\n\r\n updateModuleFromEvent(evt) {\r\n const changedValue = evt.target.checked;\r\n if (changedValue) {\r\n this.updateModuleFieldsWithValues([{\r\n parameterName: 'showFeatured',\r\n parameterValue: true,\r\n }]);\r\n } else {\r\n this.updateModuleFieldsWithValues([{\r\n parameterName: 'showFeatured',\r\n parameterValue: false,\r\n }]);\r\n }\r\n }\r\n\r\n updateModuleFieldsWithValues(fields) {\r\n this.props.actions.updateModule(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n fields,\r\n );\r\n }\r\n\r\n updateModuleFeaturedId(value) {\r\n const fieldsToBeUpdated = [\r\n {\r\n parameterName: 'featuredId',\r\n parameterValue: value.value === 'auto' ? null : value.value,\r\n },\r\n {\r\n parameterName: 'featuredType',\r\n parameterValue: value.value === 'auto' ? constants.FeaturedType.find((n) => { return n.Name === 'Latest'; }).Id : constants.FeaturedType.find((n) => { return n.Name === 'Featured'; }).Id,\r\n }];\r\n this.updateModuleFieldsWithValues(fieldsToBeUpdated);\r\n }\r\n\r\n updateVersionForFieldsWithValues(fields, disconnect) {\r\n let version = JSON.parse(JSON.stringify(this.props.versions.select));\r\n\r\n if (typeof version === 'string') {\r\n version = {};\r\n }\r\n // eslint-disable-next-line no-restricted-syntax\r\n for (const field of fields) {\r\n version[field.Name] = field.Value;\r\n }\r\n if (disconnect) {\r\n this.props.actions.updateProjectVersionForSermonDisconnect(\r\n this.props.match.params.projectId,\r\n version,\r\n );\r\n } else {\r\n this.props.actions.updateProjectVersionWithMedia(\r\n this.props.match.params.projectId,\r\n version,\r\n );\r\n }\r\n }\r\n\r\n render() {\r\n const mediaItems = this.props.media.select.url\r\n ? this.formatItemsForSelect(this.props.media.select.items)\r\n : [];\r\n let previewSermons = null;\r\n\r\n let selectedFeaturedId = '';\r\n if (mediaItems.length > 0) {\r\n selectedFeaturedId = this.state.module.featuredId ? this.state.module.featuredId : '';\r\n if (selectedFeaturedId === '') {\r\n selectedFeaturedId = 'auto';\r\n }\r\n }\r\n\r\n let bodyForm = '';\r\n\r\n if (this.state.module.enabled && this.props.versions?.select) {\r\n let activeCheckin = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Check-In'; }).Id; });\r\n activeCheckin = activeCheckin.filter((module) => { return module.enabled === true; });\r\n\r\n previewSermons = (\r\n \r\n\r\n
\r\n\r\n {i18n.t('modules.sermons.section2.label2')}
\r\n {this.props.media.inProgress || this.props.versions.inProgress\r\n ?\r\n {bodyForm}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SermonsModule);\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\n\r\nconst DisplayOptionsBox = (props) => {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DisplayOptionsBox;\r\n","import React from 'react'; // eslint-disable-line\r\nimport moment from 'moment';\r\nimport placeholder from '../../assets/styles/img/img-placeholder-full-width.png';\r\n\r\nconst PreviewEventsItem = (props) => {\r\n return (\r\n {props.title}
\r\n {props.children}\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default PreviewEventsItem;\r\n","import React from 'react'; // eslint-disable-line\r\nimport moment from 'moment';\r\nimport i18n from '../../i18n';\r\nimport placeholder from '../../assets/styles/img/img-placeholder-full-width.png';\r\n\r\nconst PreviewFeaturedEventsItem = (props) => {\r\n return (\r\n \r\n 
\r\n
\r\n \r\n {props.discover &&
\r\n EVENT
}\r\n\r\n {props.item && props.item.name}\r\n
\r\n\r\n {props.item && (props.item.eventDate ? moment(props.item.eventDate).format('MMM D') : '')}\r\n
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default PreviewFeaturedEventsItem;\r\n","import React from 'react'; // eslint-disable-line\r\nimport constants from '../../constants';\r\nimport PreviewModuleBottomMenuItem from './PreviewModuleBottomMenuItem';\r\nimport PreviewEventsItem from './PreviewEventsItem';\r\nimport PreviewFeaturedEventsItem from './PreviewFeaturedEventsItem';\r\nimport Checkin from '../svg/preview/Checkin';\r\n\r\nclass PreviewEvents extends React.Component {\r\n render() {\r\n let currentClass;\r\n if (this.props.module.showFeatured) {\r\n currentClass = this.props.module.layoutType === constants.ViewLayoutType\r\n .find((t) => { return t.Name === 'Grid'; }).Id ? 'feat-event-on-grid-on' : 'feat-event-on-grid-off';\r\n } else {\r\n currentClass = this.props.module.layoutType === constants.ViewLayoutType\r\n .find((t) => { return t.Name === 'Grid'; }).Id ? 'feat-event-off-grid-on' : 'feat-event-off-grid-off';\r\n }\r\n\r\n let modules = this.props.menuItems && this.props.menuItems.length > 0\r\n ? this.props.menuItems.filter((item) => { return item.displayOrder > -1; }) : [];\r\n modules = modules.sort((a, b) => { return a.displayOrder - b.displayOrder; });\r\n if (modules.length > 5 && this.props.menuStyle === 1) {\r\n modules = modules.slice(0, 4);\r\n modules.push({ displayOrder: 5, title: 'More', subType: 'more' });\r\n }\r\n let simpleEvents;\r\n if (this.props.module.showFeatured && this.props.forms.filtered) {\r\n simpleEvents = this.props.forms.filtered.filter((i, k) => {\r\n if (this.props.module.featuredId) return i.id !== this.props.module.featuredId;\r\n return k !== 0;\r\n });\r\n } else {\r\n simpleEvents = this.props.forms.filtered;\r\n }\r\n return (\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {' '}\r\n {i18n.t('modules.events.preview.featured')}\r\n
\r\n\r\n {props.item ? props.item.name : ''}\r\n
\r\n\r\n {props.item && (props.item.eventDate\r\n ? moment(props.item.eventDate).format('MMM d')\r\n : moment(props.item.deactivateAt).format('MMM d'))}\r\n
\r\n\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Tiled'; }).Id && (\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default PreviewEvents;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport Select from 'react-select';\r\n\r\nimport moment from 'moment-timezone';\r\nimport _actions from '../../actions';\r\nimport constants from '../../constants';\r\n\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport EditInput from '../../components/forms/EditInput';\r\nimport GeneralSection from '../../components/common/GeneralSection';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport DisplayOptionsBox from '../../components/forms/DisplayOptionsBox';\r\nimport PreviewEvents from '../../components/preview/PreviewEvents';\r\nimport i18n from '../../i18n';\r\nimport ValidatedControl from '../../components/forms/ValidatedControl';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\n\r\nconst FMSCategoryName = 'Event Registration';\r\n\r\nexport class EventsModule extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isLoaded: false,\r\n menuItem: {},\r\n module: {},\r\n formsLoaded: false,\r\n showPreview: true,\r\n };\r\n\r\n this.updateMenuItemFromEvent = this.updateMenuItemFromEvent.bind(this);\r\n this.updateModuleFieldWithValue = this.updateModuleFieldWithValue.bind(this);\r\n this.updateModuleFromEvent = this.updateModuleFromEvent.bind(this);\r\n this.updateFormsSourceFromSelect = this.updateFormsSourceFromSelect.bind(this);\r\n this.buildFormOptions = this.buildFormOptions.bind(this);\r\n this.updateLayoutTypeFromEvent = this.updateLayoutTypeFromEvent.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n this.props.actions.getModuleByTypeAndForms(this.props.match.params.projectId, constants.ModuleType.find((mt) => { return mt.Name === 'Events'; }).Id);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Events'; }).Id\r\n && this.props.modules.select.enabled) {\r\n if (this.props.alerts.data.length > 0 && this.props.alerts.data.find((m) => { return m.id === 'module-disabled'; })) {\r\n this.props.actions.clearAlert('module-disabled');\r\n }\r\n }\r\n if (!prevState.isLoaded) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Events'; }).Id\r\n && !this.props.modules.select.enabled) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.events.error1'),\r\n linkText: i18n.t('enableHere'),\r\n link: `/projects/${this.props.match.params.projectId}/modules/enable-modules`,\r\n view: '/modules/events',\r\n type: 'warning',\r\n id: 'module-disabled',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isLoaded: true });\r\n }\r\n }\r\n if (!this.props.forms.inProgress\r\n && !this.props.modules.inProgress\r\n && !this.state.formsLoaded\r\n && (this.props.forms.filtered.length === 0)) {\r\n this.props.actions.addAlert({\r\n message: `${i18n.t('forms.error')} \"${FMSCategoryName}\".`,\r\n view: '/modules/events',\r\n type: 'error',\r\n id: 'forms-missing-events',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ formsLoaded: true });\r\n }\r\n\r\n if ((!this.props.menuItems.inProgress\r\n && prevProps.menuItems.inProgress)\r\n || (!this.props.modules.inProgress\r\n && prevProps.modules.inProgress)) {\r\n const menuItem = this.props.menuItems.data !== []\r\n && typeof (this.props.modules.select.moduleType) === 'number'\r\n ? this.props.menuItems.data\r\n .find((mi) => {\r\n return mi.type === 1\r\n && parseInt(mi.subType, 10) === this.props.modules.select.moduleType;\r\n })\r\n : '';\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ menuItem });\r\n }\r\n if (!this.props.modules.inProgress && prevProps.modules.inProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ module: this.props.modules.select });\r\n }\r\n }\r\n\r\n mapFormsToOptions = (forms) => {\r\n if (forms && forms.length > 0) {\r\n const future = forms.filter((form) => {\r\n return moment(form.eventDate)\r\n .isSameOrAfter(moment(), 'day') || form.eventDate == null;\r\n });\r\n if (future) {\r\n return future.map((form) => {\r\n return {\r\n value: form.id,\r\n label: form.name,\r\n };\r\n });\r\n }\r\n }\r\n return [];\r\n }\r\n\r\n updateFormsSourceFromSelect(val) {\r\n const module = {};\r\n if (val.value === 'latest') {\r\n module.featuredType = constants.FeaturedType.find((t) => { return t.Name === 'Latest'; }).Id;\r\n module.featuredId = null;\r\n } else {\r\n module.featuredType = constants.FeaturedType.find((t) => { return t.Name === 'Featured'; }).Id;\r\n module.featuredId = val.value;\r\n }\r\n const fields = [\r\n {\r\n parameterName: 'featuredId',\r\n parameterValue: module.featuredId,\r\n },\r\n {\r\n parameterName: 'featuredType',\r\n parameterValue: module.featuredType,\r\n }];\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n featuredType: module.featuredType,\r\n featuredId: module.featuredId,\r\n },\r\n };\r\n });\r\n this.updateMultipleModuleFields(fields);\r\n }\r\n\r\n updateLayoutTypeFromEvent(evt) {\r\n const showGrid = evt.target.checked;\r\n let layoutValue;\r\n if (showGrid) {\r\n layoutValue = constants.ViewLayoutType.find((t) => { return t.Name === 'Grid'; }).Id;\r\n } else {\r\n layoutValue = constants.ViewLayoutType.find((t) => { return t.Name === 'List'; }).Id;\r\n }\r\n this.updateModuleFieldWithValue('layoutType', layoutValue);\r\n }\r\n\r\n updateMenuItemFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim().length > 0 ? evt.target.value.trim() : i18n.t('modules.events.title');\r\n if (changedValue !== '') {\r\n this.setState((prevState) => {\r\n return {\r\n menuItem: {\r\n ...prevState.menuItem,\r\n title: changedValue,\r\n },\r\n };\r\n });\r\n this.props.actions.updateMenuItemParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n 1,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n }\r\n\r\n updateModuleFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.checked;\r\n if (changedValue) {\r\n const latest = constants.FeaturedType.find((t) => { return t.Name === 'Latest'; }).Id;\r\n const fields = [\r\n {\r\n parameterName: 'showFeatured',\r\n parameterValue: changedValue,\r\n },\r\n {\r\n parameterName: 'featuredId',\r\n parameterValue: 'latest',\r\n },\r\n {\r\n parameterName: 'featuredType',\r\n parameterValue: latest,\r\n }];\r\n this.updateMultipleModuleFields(fields);\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n showFeatured: true,\r\n featuredId: 'latest',\r\n featuredType: latest,\r\n },\r\n };\r\n });\r\n } else {\r\n this.updateModuleFieldWithValue(fieldName, false);\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n showFeatured: false,\r\n },\r\n };\r\n });\r\n }\r\n }\r\n\r\n updateModuleFieldWithValue(field, val) {\r\n if (this.state.module[field] !== val) {\r\n const newState = this.state.module;\r\n newState[field] = val;\r\n this.setState({ module: { ...newState } });\r\n this.props.actions.updateModuleParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n field,\r\n val,\r\n );\r\n }\r\n }\r\n\r\n updateMultipleModuleFields(moduleParamsArray) {\r\n this.props.actions.updateModule(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n moduleParamsArray,\r\n );\r\n }\r\n\r\n buildFormOptions(forms) {\r\n const formOptions = this.mapFormsToOptions(forms);\r\n return [\r\n {\r\n value: 'latest',\r\n label: i18n.t('modules.events.default-latest'),\r\n },\r\n ...formOptions,\r\n ];\r\n }\r\n\r\n render() {\r\n let previewEvents = null;\r\n const formOptions = this.buildFormOptions(this.props.forms.filtered);\r\n const formSelected = this.state.module.featuredType === constants.FeaturedType.find((t) => { return t.Name === 'Latest'; }).Id ? 'latest' : this.state.module.featuredId;\r\n let bodyForm = '';\r\n let activeCheckin = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Check-In'; }).Id; });\r\n activeCheckin = activeCheckin.filter((module) => { return module.enabled === true; });\r\n const selectedForm = this.props.forms.filtered.filter((form) => { return form.id === this.state.module.form1Id; })[0];\r\n const selectedFormNotSubmittable = selectedForm ? selectedForm.isSubmittable !== true : false;\r\n if (this.state.module.enabled) {\r\n previewEvents = (\r\n \r\n \r\n
\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'SlideOut'; }).Id && (\r\n \r\n \r\n
\r\n )}\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n
\r\n \r\n {this.props.checkin\r\n &&
\r\n )}\r\n \r\n
\r\n {this.props.menuItem?.title}
\r\n\r\n
\r\n Upcoming
\r\n My Events
\r\n \r\n {this.props.forms.filtered\r\n && this.props.module.showFeatured\r\n && (\r\n {\r\n return m.id === this.props.module.featuredId;\r\n })\r\n : this.props.forms.filtered[0]}\r\n primaryText={this.props.primaryText}\r\n accentColor={this.props.accentColor}\r\n />\r\n )}\r\n {simpleEvents.map((med, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n\r\n \r\n\r\n {modules\r\n .sort((a, b) => {\r\n return a.displayOrder > b.displayOrder;\r\n })\r\n .map((md, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n )}\r\n \r\n \r\n {i18n.t('modules.events.title')}\r\n \r\n \r\n {i18n.t('modules.events.subtitle')}\r\n \r\n \r\n \r\n\r\n \r\n
\r\n\r\n \r\n \r\n {bodyForm}\r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EventsModule);\r\n","import React from 'react'; // eslint-disable-line\r\nimport constants from '../../constants';\r\nimport PreviewModuleBottomMenuItem from './PreviewModuleBottomMenuItem';\r\nimport PreviewEventsItem from './PreviewEventsItem';\r\nimport PreviewFeaturedSermonsItem from './PreviewFeaturedSermonsItem';\r\nimport Checkin from '../svg/preview/Checkin';\r\n\r\nclass PreviewDiscover extends React.Component {\r\n render() {\r\n let currentClass;\r\n if (this.props.module.showFeatured) {\r\n currentClass = 'feat-event-on-grid-off';\r\n } else {\r\n currentClass = 'feat-event-off-grid-off';\r\n }\r\n\r\n let modules = this.props.menuItems && this.props.menuItems.length > 0\r\n ? this.props.menuItems.filter((item) => { return item.displayOrder > -1; })\r\n : [];\r\n modules = modules.sort((a, b) => { return a.displayOrder - b.displayOrder; });\r\n if (modules.length > 5 && this.props.menuStyle === 1) {\r\n modules = modules.slice(0, 4);\r\n modules.push({ displayOrder: 5, title: 'More', subType: 'more' });\r\n }\r\n const simpleEvents = typeof (this.props.forms) === 'undefined' ? [] : this.props.forms;\r\n\r\n return (\r\n \r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Tiled'; }).Id && (\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default PreviewDiscover;\r\n","import React from 'react';\r\nimport EditableLabel from '../forms/EditableLabel';\r\nimport constants from '../../constants';\r\nimport Trash from '../svg/Trash';\r\nimport CaptionTooltip from '../common/CaptionTooltip';\r\n\r\nexport default class SortablePageSectionItemHeader extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n inputEditState: false,\r\n item: props.item,\r\n index: props.index,\r\n changing: props.changing,\r\n };\r\n this.updateSectionFromEvent = this.updateSectionFromEvent.bind(this);\r\n this.sectionTitleChanged = this.sectionTitleChanged.bind(this);\r\n this.switchState = this.switchState.bind(this);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.item !== prevProps.item && this.state.changing) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ item: this.props.item, changing: false });\r\n }\r\n }\r\n\r\n updateSectionFromEvent(e) {\r\n this.setState((prevState) => { return { ...prevState, item: { ...prevState.item, ignoreTitle: !e.target.checked } }; });\r\n this.props.onSingleItemChange({ ...this.state.item, ignoreTitle: !e.target.checked });\r\n }\r\n\r\n sectionTitleChanged(e) {\r\n this.setState((prevState) => { return { ...prevState, item: { ...prevState.item, name: e.target.value } }; });\r\n this.props.onSingleItemChange({ ...this.state.item, name: e.target.value });\r\n }\r\n\r\n switchState() {\r\n this.setState((prevState) => { return { ...prevState, inputEditState: !prevState.inputEditState }; });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'SlideOut'; }).Id && (\r\n \r\n \r\n
\r\n )}\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n
\r\n \r\n {this.props.checkin\r\n &&
\r\n )}\r\n \r\n
\r\n {this.props.menuItem?.title}
\r\n\r\n {this.props.media.select && this.props.module.showFeatured\r\n && this.props.media.select.items\r\n && (\r\n {\r\n return m.guid === this.props.module.featuredId;\r\n })\r\n : this.props.media.select.items[0]}\r\n primaryText={this.props.primaryText}\r\n accentColor={this.props.accentColor}\r\n />\r\n )}\r\n\r\n {this.props.module.showUpcomingEvents\r\n && simpleEvents.map((med, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n\r\n \r\n\r\n {modules\r\n .sort((a, b) => {\r\n return a.displayOrder > b.displayOrder;\r\n })\r\n .map((md, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n )}\r\n \r\n {/* eslint-disable-next-line no-nested-ternary */}\r\n \r\n { return this.props.deleteContentSection(this.state.item.id); }}\r\n >\r\n \r\n )}\r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Grabber2 = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Grabber2;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Sermons = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Sermons;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Calendar = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Calendar;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Text = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Text;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst ImageText = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default ImageText;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Video = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Video;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst LinkIcon = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default LinkIcon;\r\n","import React from 'react';\r\nimport { Droppable, Draggable } from 'react-beautiful-dnd';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport Grabber from '../svg/Grabber2';\r\nimport constants from '../../constants';\r\nimport Trash from '../svg/Trash';\r\nimport Sermons from '../svg/Sermons';\r\nimport Calendar from '../svg/Calendar2';\r\nimport Text from '../svg/Text';\r\nimport ImageText from '../svg/ImageText';\r\nimport Video from '../svg/Video';\r\nimport LinkIcon from '../svg/Link';\r\nimport Image from '../svg/Image';\r\nimport CaptionTooltip from '../common/CaptionTooltip';\r\n\r\nexport default class SortablePageSectionBlockHolder extends React.Component {\r\n // Normally you would want to split things out into separate components.\r\n // But in this example everything is just done in one place for simplicity\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n {this.props.sectionCount > 1 && typeof (this.state.item?.contents?.find((c) => { return constants.ContentType.find((ci) => { return c.contentType === ci.Id; }).Type === 'module'; })) === 'undefined'\r\n && (\r\n \r\n
\r\n );\r\n }}\r\n \r\n { /* eslint-disable */}\r\n {item.contentType !== 102 &&\r\n
\r\n {nextitem?.contentType !== 102 && item.contentType !== 102 &&\r\n \r\n \r\n {icon}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n
\r\n }\r\n {item.contentType === 102 &&\r\n \r\n {ctype.Name}\r\n {item.tapDestination &&
\r\n \r\n \r\n
\r\n }\r\n {provided.placeholder}\r\n \r\n\r\n
\r\n { this.props.deleteContentBlock(item.id); }}> {\r\n this.props.addDivider(item.id, this.props.type);\r\n }}>
\r\n }\r\n {/* eslint-enable */ }\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }}\r\n \r\n );\r\n })}\r\n {provided.placeholder}\r\n \r\n );\r\n }}\r\n \r\n {this.props.flags.results?.customContentBanner\r\n && (\r\n { return c.Id === this.props.active; })?.Name === 'Banner' ? 'active' : ''}\r\n onClick={() => { if (constants.ContentType.find((c) => { return c.Id === this.props.active; })?.Name !== 'Banner') { this.props.addContentType(constants.ContentType.find((c) => { return c.Name === 'Banner'; })?.Id); } }}\r\n >\r\n \r\n { return c.Id === this.props.active; })?.Name === 'Banner'} />\r\n \r\n \r\n Banner Image\r\n \r\n
\r\n )}\r\n {this.props.flags.results?.customContentTextWithImage\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\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ColorChoice);\r\n","import React, { Fragment } from 'react'; // eslint-disable-line\r\n\r\nconst RadioWithLabel = (props) => {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default RadioWithLabel;\r\n","import React, { Component } from 'react';\r\nimport Select from 'react-select';\r\nimport ValidatedInput from '../forms/ValidatedInput';\r\nimport RadioWithLabel from '../forms/RadioWithLabel';\r\nimport i18n from '../../i18n';\r\nimport ValidatedControl from '../forms/ValidatedControl';\r\nimport constants from '../../constants';\r\n\r\nclass TapTypeSelector extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.scrollModalToBottom = this.scrollModalToBottom.bind(this);\r\n }\r\n\r\n scrollModalToBottom() {\r\n const contentModal = document.querySelector('.large-modal-scroll-wrapper');\r\n if (!contentModal) return;\r\n\r\n const isScrollable = contentModal?.scrollHeight > contentModal?.clientHeight;\r\n\r\n if (isScrollable) {\r\n requestAnimationFrame(() => {\r\n contentModal.scrollTop = contentModal.scrollHeight;\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n const selectedForm = this.props.formsObjects.filter((form) => { return form.id === this.props.contentModalContent.tapDestination; })[0];\r\n const selectedFormNotSubmittable = selectedForm ? selectedForm.isSubmittable !== true : false;\r\n \r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default TapTypeSelector;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport ValidatedInput from '../forms/ValidatedInput';\r\nimport ColorChoice from '../common/colorChoice';\r\nimport TapTypeSelector from './TapTypeSelector';\r\n\r\nclass TextContentEditor extends Component {\r\n render() {\r\n return (\r\n {i18n.t('pages.tapTypeHeader')}
\r\n\r\n\r\n {constants.ContentType.find((c) => {\r\n return c.Id === this.props.contentModalContent.contentType;\r\n })?.Name !== 'LinkButton'\r\n && (\r\n {\r\n return this.props.updateTapTypeFromEvent(1);\r\n }}\r\n defaultChecked={this.props.contentModalContent.tapType === 1}\r\n text={i18n.t('pages.tapType1')}\r\n value={1}\r\n />\r\n )}\r\n {\r\n return this.props.updateTapTypeFromEvent(2);\r\n }}\r\n defaultChecked={this.props.contentModalContent.tapType === 2}\r\n text={i18n.t('pages.tapType2')}\r\n value={2}\r\n />\r\n {this.props.contentModalContent.tapType === 2\r\n && (\r\n {\r\n return this.props.updateTapTypeFromEvent(3);\r\n }}\r\n defaultChecked={this.props.contentModalContent.tapType === 3}\r\n text={i18n.t('pages.tapType3')}\r\n value={3}\r\n />\r\n {this.props.contentModalContent.tapType === 3\r\n && (\r\n \r\n 0 ? this.props.formsItems.find((f) => { return f.value === this.props.contentModalContent.tapDestination; }) : ''}\r\n onChange={(e) => {\r\n return this.props.setStateFromEvent(e, 'tapDestination');\r\n }}\r\n clearable={false}\r\n searchable\r\n placeholder={i18n.t('selectPlaceholder')}\r\n onMenuOpen={this.scrollModalToBottom}\r\n />\r\n \r\n )}\r\n {\r\n return this.props.updateTapTypeFromEvent(4);\r\n }}\r\n defaultChecked={this.props.contentModalContent.tapType === 4}\r\n text={i18n.t('pages.tapType4')}\r\n value={4}\r\n />\r\n {this.props.contentModalContent.tapType === 4\r\n && (\r\n {\r\n return this.props.setStateFromEvent(e, 'tapDestination');\r\n }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n )}\r\n
\r\n \r\n \r\n 0 ? this.props.pagesItems.find((f) => { return f.value === this.props.contentModalContent.tapDestination; }) : ''}\r\n onChange={(e) => {\r\n return this.props.setStateFromEvent(e, 'tapDestination');\r\n }}\r\n clearable={false}\r\n searchable\r\n placeholder={i18n.t('selectPlaceholder')}\r\n onMenuOpen={this.scrollModalToBottom}\r\n />\r\n \r\n
\r\n )}\r\n \r\n Preview\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TextContentEditor);\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport _actions from '../../actions';\r\nimport ValidatedInput from '../forms/ValidatedInput';\r\nimport ColorChoice from '../common/colorChoice';\r\nimport RadioWithLabel from '../forms/RadioWithLabel';\r\nimport TapTypeSelector from './TapTypeSelector';\r\nimport ImageCropper from '../common/imageCropper';\r\nimport constants from '../../constants';\r\nimport ImageDropZone from '../common/ImageDropZone';\r\nimport i18n from '../../i18n';\r\nimport LargeLoading from '../svg/LargeLoading';\r\n\r\nclass TextWithImageContentEditor extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.setFile = this.setFile.bind(this);\r\n this.switchToSizes = this.switchToSizes.bind(this);\r\n this.switchToCrop = this.switchToCrop.bind(this);\r\n this.switchToUpload = this.switchToUpload.bind(this);\r\n this.recropImage = this.recropImage.bind(this);\r\n this.deleteImage = this.deleteImage.bind(this);\r\n this.state = {\r\n file: '',\r\n cropperView: 0,\r\n hasError: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.contentModalContent.imageUrl.length > 1) {\r\n this.switchToSizes();\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.crop.modal !== prevProps.crop.modal && this.props.crop.modal === true) {\r\n this.switchToCrop();\r\n } else if (this.props.crop.hasCroppedImage !== prevProps.crop.hasCroppedImage\r\n || this.props.crop.wrongResolution !== prevProps.crop.wrongResolution) {\r\n if (this.props.crop.hasCroppedImage === false\r\n && this.props.crop.wrongResolution === true) {\r\n this.displayWarning();\r\n } else if (this.props.crop.hasCroppedImage === false\r\n && this.props.crop.wrongResolution === false) {\r\n this.switchToUpload();\r\n } else if (this.props.crop.hasCroppedImage === true) {\r\n this.switchToSizes();\r\n }\r\n }\r\n if (prevState.cropperView === 0 && this.props.crop.hasCroppedImage) {\r\n this.switchToSizes();\r\n }\r\n if (prevState.cropperView === 1\r\n && this.state.cropperView !== 1\r\n && this.props.crop.hasCroppedImage === false) {\r\n if (this.props.contentModalContent.imageUrl.length < 1) {\r\n this.switchToUpload();\r\n } else {\r\n this.switchToSizes();\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.actions.resetImageData();\r\n this.props.actions.clearAlert('content-image-with-text-wrong-size');\r\n this.props.actions.clearAlert('pages-modal-upload-wrong-type');\r\n this.props.actions.clearAlert('pages-modal-upload-wrong-file-size');\r\n }\r\n\r\n setFile(file) {\r\n this.setState({ file, hasError: false });\r\n }\r\n\r\n displayWarning() {\r\n this.setState({ hasError: true });\r\n this.props.actions.addAlert({\r\n message: `${i18n.t('logo.error1')} ${constants.ImageType.find((n) => { return n.Name === 'ContentImageWithText'; }).MinWidth} px x ${constants.ImageType.find((n) => { return n.Name === 'ContentImageWithText'; }).MinHeight} px`,\r\n dismissable: true,\r\n type: 'error',\r\n view: 'pages-modal',\r\n id: 'content-image-with-text-wrong-size',\r\n });\r\n }\r\n\r\n switchToSizes() {\r\n this.setState({\r\n cropperView: 2,\r\n });\r\n }\r\n\r\n switchToCrop() {\r\n this.setState({\r\n cropperView: 1,\r\n originalHeight: 0,\r\n originalWidth: 0,\r\n });\r\n }\r\n\r\n switchToUpload() {\r\n if (this.props.contentModalContent.imageId.length > 1) {\r\n this.switchToSizes();\r\n } else {\r\n this.props.actions.resetImageData();\r\n this.setState({\r\n cropperView: 0,\r\n });\r\n }\r\n }\r\n\r\n recropImage() {\r\n if (!this.props.crop.originalImage || !this.props.crop.originalImage.imagePath) {\r\n this.props.actions.getOriginalImageForCrop(this.props.match.params.projectId, constants.ImageType.find((n) => {\r\n return n.Name === 'ContentImageWithText';\r\n }).Id, this.props.contentModalContent.parentId);\r\n }\r\n\r\n this.props.actions.resetCroppedImage();\r\n this.switchToCrop();\r\n }\r\n\r\n deleteImage() {\r\n this.props.setStateFromEvent('', 'imageId');\r\n this.props.setStateFromEvent('', 'imageUrl');\r\n this.props.actions.resetImageData();\r\n this.setState({ cropperView: 0 });\r\n }\r\n\r\n render() {\r\n const cropperOrLoader = this.props.crop.modal === true\r\n ? (\r\n \r\n {/* eslint-disable */}\r\n \r\n {this.props.contentModalContent.headerText}\r\n \r\n
\r\n \r\n {this.props.contentModalContent.subheaderText}\r\n
\r\n\r\n {this.props.contentModalContent.text}\r\n
\r\n {/* eslint-enable */}\r\n\r\n { return this.props.setStateFromEvent(e, 'headerText'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n
\r\n \r\n { return this.props.setStateFromEvent(e, 'subheaderText'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n
\r\n \r\n { return this.props.setStateFromEvent(e, 'text'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n multiline\r\n />\r\n
\r\n \r\n
\r\n\r\n Header Size
\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 {this.props.crop.modal === true ? 'Crop Your Photo' : 'Preview'}\r\n\r\n {this.state.cropperView === 1 && cropperOrLoader}\r\n {this.state.cropperView === 2 && (\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(TextWithImageContentEditor));\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport YouTube from 'react-youtube';\r\nimport Vimeo from '@u-wave/react-vimeo';\r\nimport _actions from '../../actions';\r\nimport ValidatedInput from '../forms/ValidatedInput';\r\nimport i18n from '../../i18n';\r\nimport Video from '../svg/Video';\r\n\r\nclass VideoContentEditor extends Component {\r\n static isYouTube(url) {\r\n const regExp = /^.*((youtu.be\\/)|(v\\/)|(\\/u\\/\\w\\/)|(embed\\/)|(watch\\?))\\??v?=?([^#&?]*).*/;\r\n const match = url.match(regExp);\r\n return (match && match[7].length === 11) ? { isYouTube: true, embedId: match[7] } : { isYouTube: false, embedId: '' };\r\n }\r\n\r\n static isVimeo(url) {\r\n // eslint-disable-next-line no-useless-escape\r\n const regExp = /(https?:\\/\\/)?(www\\.)?(player\\.)?vimeo\\.com\\/?(showcase\\/)*([0-9))([a-z]*\\/)*([0-9]{6,11})[?]?.*/;\r\n const match = url.match(regExp);\r\n return match && match.length === 7 ? { isVimeo: true, videoId: match[6] } : { isVimeo: false, videoId: '' };\r\n }\r\n\r\n constructor(props) {\r\n super();\r\n let videoType;\r\n let embedId;\r\n const ytResult = VideoContentEditor.isYouTube(props.contentModalContent.videoUrl);\r\n const vimeoResult = VideoContentEditor.isVimeo(props.contentModalContent.videoUrl);\r\n if (ytResult.isYouTube) {\r\n videoType = 1;\r\n embedId = ytResult.embedId;\r\n } else if (vimeoResult.isVimeo) {\r\n videoType = 2;\r\n embedId = vimeoResult.videoId;\r\n } else {\r\n videoType = 3;\r\n }\r\n this.state = {\r\n videoCanPlay: false,\r\n videoUrl: props.contentModalContent.videoUrl,\r\n loading: props.contentModalContent.videoUrl.length > 0,\r\n videoFailed: false,\r\n videoType,\r\n embedId,\r\n isMP4: true,\r\n };\r\n\r\n this.videoCanPlay = this.videoCanPlay.bind(this);\r\n this.videoCantPlay = this.videoCantPlay.bind(this);\r\n this.urlChanged = this.urlChanged.bind(this);\r\n }\r\n\r\n videoCanPlay() {\r\n this.setState({ videoCanPlay: true, loading: false });\r\n this.props.setStateFromEvent({ target: { value: true } }, 'isUrlValid');\r\n this.props.setStateFromEvent({ target: { value: this.state.videoUrl } }, 'videoUrl');\r\n }\r\n\r\n videoCantPlay() {\r\n this.setState({\r\n videoCanPlay: false, loading: false, videoFailed: true, videoType: null,\r\n });\r\n this.props.setStateFromEvent({ target: { value: false } }, 'isUrlValid');\r\n }\r\n\r\n urlChanged(evt) {\r\n this.setState({ videoFailed: false, videoType: null });\r\n const isYT = VideoContentEditor.isYouTube(evt.target.value);\r\n if (isYT.isYouTube) {\r\n // eslint-disable-next-line object-curly-newline\r\n this.setState({ videoCanPlay: false, loading: true, videoUrl: `https://www.youtube.com/embed/${isYT.embedId}`, embedId: isYT.embedId, videoType: 1 });\r\n this.props.setStateFromEvent(1, 'videoType');\r\n return this.props.setStateFromEvent(evt, 'videoUrl');\r\n }\r\n const isVimeo = VideoContentEditor.isVimeo(evt.target.value);\r\n if (isVimeo.isVimeo) {\r\n // eslint-disable-next-line object-curly-newline\r\n this.setState({ videoCanPlay: false, loading: true, videoUrl: `https://player.vimeo.com/video/${isVimeo.videoId}?title=0&byline=0&portrait=0`, embedId: isVimeo.videoId, videoType: 2 });\r\n this.props.setStateFromEvent(2, 'videoType');\r\n return this.props.setStateFromEvent(evt, 'videoUrl');\r\n }\r\n\r\n const filename = evt.target.value;\r\n const extension = filename.substring(filename.lastIndexOf('.') + 1, filename.length) || filename;\r\n\r\n if (extension.toUpperCase() === 'MP4') {\r\n // eslint-disable-next-line object-curly-newline\r\n this.setState({ videoCanPlay: false, loading: true, videoUrl: evt.target.value, videoType: 3, isMP4: true });\r\n const mp4Element = document.getElementById('edit-content-modal-video');\r\n if (mp4Element != null) {\r\n mp4Element.src = String(evt.target.value);\r\n mp4Element.load();\r\n }\r\n this.props.setStateFromEvent(3, 'videoType');\r\n return this.props.setStateFromEvent(evt, 'videoUrl');\r\n }\r\n // if it wasn't an mp4, unload the video element\r\n // eslint-disable-next-line object-curly-newline\r\n this.setState({ videoCanPlay: false, loading: false, videoUrl: evt.target.value, videoType: null, isMP4: false });\r\n const mp4Element = document.getElementById('edit-content-modal-video');\r\n if (mp4Element != null) {\r\n mp4Element.pause();\r\n mp4Element.removeAttribute('src');\r\n if (mp4Element.firstChild) mp4Element.removeChild(mp4Element.firstChild);\r\n mp4Element.load();\r\n }\r\n\r\n return this.props.setStateFromEvent({ target: { value: false } }, 'isUrlValid');\r\n }\r\n\r\n render() {\r\n const ytOpts = {\r\n height: '202',\r\n width: '360',\r\n }; // this.state.videoType === 3 && !this.state.isMP4 && this.state.videoUrl.length !== 0\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n )}\r\n\r\n { this.state.cropperView !== 1\r\n && (\r\n \r\n 
\r\n
\r\n {this.props.contentModalContent.bannerText}
\r\n \r\n {!this.props.crop.modal && this.state.cropperView === 0 && this.props.contentModalContent.imageId.length < 1 &&
\r\n )}\r\n \r\n {/* eslint-disable */}\r\n \r\n {this.props.contentModalContent.headerText}\r\n \r\n
\r\n \r\n {this.props.contentModalContent.subheaderText}\r\n
\r\n\r\n {this.props.contentModalContent.text}\r\n
\r\n {/* eslint-enable */}\r\n\r\n { return this.props.setStateFromEvent(e, 'cropStyle'); }}\r\n defaultChecked={this.props.contentModalContent.cropStyle === 2}\r\n text=\"Square Image\"\r\n value={2}\r\n />\r\n { return this.props.setStateFromEvent(e, 'cropStyle'); }}\r\n defaultChecked={this.props.contentModalContent.cropStyle === 1}\r\n text=\"Circle Image\"\r\n value={1}\r\n />\r\n
\r\n \r\n { return this.props.setStateFromEvent(e, 'headerText'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n
\r\n \r\n { return this.props.setStateFromEvent(e, 'subheaderText'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n
\r\n \r\n { return this.props.setStateFromEvent(e, 'text'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n
\r\n \r\n Preview\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(VideoContentEditor);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst AlignLeft = () => {\r\n return (\r\n \r\n );\r\n};\r\nexport default AlignLeft;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst AlignCenter = () => {\r\n return (\r\n \r\n );\r\n};\r\nexport default AlignCenter;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst AlignRight = () => {\r\n return (\r\n \r\n );\r\n};\r\nexport default AlignRight;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport ValidatedInput from '../forms/ValidatedInput';\r\nimport AlignLeft from '../svg/AlignLeft';\r\nimport AlignCenter from '../svg/AlignCenter';\r\nimport AlignRight from '../svg/AlignRight';\r\nimport OnOffSwitch from '../forms/OnOffSwitch';\r\nimport TapTypeSelector from './TapTypeSelector';\r\n\r\nclass LinkButtonContentEditor extends Component {\r\n render() {\r\n return (\r\n \r\n {this.state.videoType !== 1 && this.state.videoType !== 2 && this.state.videoType !== 3\r\n && (\r\n
\r\n \r\n )}\r\n {this.state.videoType === 3\r\n && (\r\n \r\n )}\r\n {this.state.videoType === 1\r\n && (\r\n
\r\n { this.urlChanged(e); }}\r\n errorMessage={i18n.t('content.validation.video-url-invalid')}\r\n hasError={(!this.state.videoCanPlay && this.props.contentModalContent.videoUrl.length > 0 && !this.state.loading) || (this.state.videoType === 3 && !this.state.isMP4 && this.state.videoUrl.length > 0)}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n
\r\n \r\n \r\n { return this.props.setStateFromEvent(e, 'isFullWidth'); }}\r\n type=\"checkbox\"\r\n />\r\n \r\n \r\n Extend video frame the full width of the screen\r\n \r\n \r\n
\r\n \r\n Preview\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LinkButtonContentEditor);\r\n","import React, { Fragment } from 'react'; // eslint-disable-line\r\n\r\nconst ColorRadio = (props) => {\r\n return (\r\n \r\n {/* eslint-disable */}\r\n {this.props.contentModalContent.appearanceType === 1 &&\r\n
\r\n {this.props.contentModalContent.appearanceType === 1\r\n && (\r\n \r\n {this.props.contentModalContent.text !== '' ? this.props.contentModalContent.text : 'Link Text'}\r\n
\r\n }\r\n {this.props.contentModalContent.appearanceType === 2 &&\r\n \r\n }\r\n {/* eslint-enable */}\r\n\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n {\r\n const check = e.target.checked ? 2 : 1;\r\n this.props.setStateFromEvent(check, 'appearanceType');\r\n }}\r\n dataQA=\"link-button-switch\"\r\n />\r\n {' '}\r\n Use a button style\r\n
\r\n \r\n { return this.props.setStateFromEvent(e, 'text'); }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ColorRadio;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport _actions from '../../actions';\r\nimport ImageDropZone from '../common/ImageDropZone';\r\nimport constants from '../../constants';\r\nimport ImageCropper from '../common/imageCropper';\r\nimport ValidatedInput from '../forms/ValidatedInput';\r\nimport ColorRadio from '../forms/ColorRadio';\r\nimport i18n from '../../i18n';\r\nimport TapTypeSelector from './TapTypeSelector';\r\nimport LargeLoading from '../svg/LargeLoading';\r\n\r\nclass BannerContentEditor extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.setFile = this.setFile.bind(this);\r\n this.switchToSizes = this.switchToSizes.bind(this);\r\n this.switchToCrop = this.switchToCrop.bind(this);\r\n this.switchToUpload = this.switchToUpload.bind(this);\r\n this.recropImage = this.recropImage.bind(this);\r\n this.deleteImage = this.deleteImage.bind(this);\r\n this.state = {\r\n file: '',\r\n cropperView: 0,\r\n hasError: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.contentModalContent.imageUrl.length > 1) {\r\n this.switchToSizes();\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.crop.modal !== prevProps.crop.modal && this.props.crop.modal === true) {\r\n this.switchToCrop();\r\n } else if (this.props.crop.hasCroppedImage !== prevProps.crop.hasCroppedImage\r\n || this.props.crop.wrongResolution !== prevProps.crop.wrongResolution) {\r\n if (this.props.crop.hasCroppedImage === false\r\n && this.props.crop.wrongResolution === true) {\r\n this.displayWarning();\r\n } else if (this.props.crop.hasCroppedImage === false\r\n && this.props.crop.wrongResolution === false) {\r\n this.switchToUpload();\r\n } else if (this.props.crop.hasCroppedImage === true) {\r\n this.switchToSizes();\r\n }\r\n }\r\n if (prevState.cropperView === 0 && this.props.crop.hasCroppedImage) {\r\n this.switchToSizes();\r\n }\r\n if (prevState.cropperView === 1\r\n && this.state.cropperView !== 1\r\n && this.props.crop.hasCroppedImage === false) {\r\n if (this.props.contentModalContent.imageUrl.length < 1) {\r\n this.switchToUpload();\r\n } else {\r\n this.switchToSizes();\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.actions.resetImageData();\r\n this.props.actions.clearAlert('content-banner-wrong-size');\r\n this.props.actions.clearAlert('pages-modal-upload-wrong-type');\r\n this.props.actions.clearAlert('pages-modal-upload-wrong-file-size');\r\n }\r\n\r\n setFile(file) {\r\n this.setState({ file, hasError: false });\r\n }\r\n\r\n displayWarning() {\r\n const alertMessage = `${i18n.t('logo.error1')} ${constants.ImageType.find((n) => { return n.Name === 'ContentBanner'; }).MinWidth} px x ${constants.ImageType.find((n) => { return n.Name === 'ContentBanner'; }).MinHeight} px`;\r\n this.setState({ hasError: true });\r\n this.props.actions.addAlert({\r\n message: alertMessage,\r\n dismissable: true,\r\n type: 'error',\r\n view: 'pages-modal',\r\n id: 'content-banner-wrong-size',\r\n });\r\n }\r\n\r\n switchToSizes() {\r\n this.setState({\r\n cropperView: 2,\r\n });\r\n }\r\n\r\n switchToCrop() {\r\n this.setState({\r\n cropperView: 1,\r\n originalHeight: 0,\r\n originalWidth: 0,\r\n });\r\n }\r\n\r\n switchToUpload() {\r\n if (this.props.contentModalContent.imageId.length > 1) {\r\n this.switchToSizes();\r\n } else {\r\n this.props.actions.resetImageData();\r\n this.setState({\r\n cropperView: 0,\r\n });\r\n }\r\n }\r\n\r\n recropImage() {\r\n if (!this.props.crop.originalImage || !this.props.crop.originalImage.imagePath) {\r\n this.props.actions.getOriginalImageForCrop(this.props.match.params.projectId, constants.ImageType.find((n) => {\r\n return n.Name === 'ContentBanner';\r\n }).Id, this.props.contentModalContent.parentId);\r\n }\r\n\r\n this.props.actions.resetCroppedImage();\r\n this.switchToCrop();\r\n }\r\n\r\n deleteImage() {\r\n this.props.setStateFromEvent('', 'imageId');\r\n this.props.setStateFromEvent('', 'imageUrl');\r\n this.props.actions.resetImageData();\r\n this.setState({ cropperView: 0 });\r\n }\r\n\r\n render() {\r\n const cropperOrLoader = this.props.crop.modal === true\r\n ? (\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n
\r\n \r\n {this.props.crop.modal === true ? 'Crop Your Photo' : 'Preview'}\r\n {!this.props.crop.modal && this.state.cropperView === 0 && this.props.contentModalContent.imageId.length < 1\r\n &&
\r\n )}\r\n {this.state.cropperView !== 1\r\n && (\r\n \r\n
\r\n \r\n {\r\n this.recropImage();\r\n }}\r\n >\r\n {\r\n this.deleteImage();\r\n }}\r\n >\r\n \r\n {this.props.contentModalContent.bannerText}\r\n
\r\n \r\n {/* eslint-disable-next-line eqeqeq */}\r\n \r\n
\r\n \r\n {\r\n return this.props.setStateFromEvent(e, 'bannerText');\r\n }}\r\n errorMessage=\"\"\r\n hasError={false}\r\n successMessage=\"\"\r\n hasSuccess={false}\r\n />\r\n
\r\n )}\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(BannerContentEditor));\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport Tooltip from 'rc-tooltip';\r\nimport i18n from '../../i18n';\r\nimport SortablePageSections from './SortablePageSections';\r\nimport AddPlus from '../svg/AddPlus';\r\nimport LargeModal from '../../containers/modals/LargeModal';\r\nimport constants from '../../constants';\r\nimport _actions from '../../actions';\r\nimport CustomContentTypeSelector from './CustomContentTypeSelector';\r\nimport TextContentEditor from './TextContentEditor';\r\nimport TextWithImageContentEditor from './TextWithImageContentEditor';\r\nimport VideoContentEditor from './VideoContentEditor';\r\nimport LinkButtonContentEditor from './LinkButtonContentEditor';\r\nimport BannerContentEditor from './BannerContentEditor';\r\n\r\nclass SortablePageSectionsList extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.deleteContentSection = this.deleteContentSection.bind(this);\r\n this.editContentBlock = this.editContentBlock.bind(this);\r\n this.addContentBlock = this.addContentBlock.bind(this);\r\n this.addDivider = this.addDivider.bind(this);\r\n this.changeFontSize = this.changeFontSize.bind(this);\r\n this.updateTapTypeFromEvent = this.updateTapTypeFromEvent.bind(this);\r\n this.handleColorChange = this.handleColorChange.bind(this);\r\n this.addContentType = this.addContentType.bind(this);\r\n this.saveNewContent = this.saveNewContent.bind(this);\r\n this.deleteContentBlock = this.deleteContentBlock.bind(this);\r\n this.setStateFromEvent = this.setStateFromEvent.bind(this);\r\n this.handleChangeAlignment = this.handleChangeAlignment.bind(this);\r\n this.state = {\r\n loaded: false,\r\n sections: this.props.sections,\r\n showContentModal: false,\r\n contentModalTitle: '',\r\n contentModalContent: {},\r\n contentModalAdd: true,\r\n };\r\n }\r\n\r\n componentDidUpdate(prevState, prevProps) {\r\n if (!this.props.changing && this.props.changing !== prevProps.changing) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n if (!this.state.loaded) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n loaded: true,\r\n sections: this.props.sections,\r\n });\r\n }\r\n }\r\n }\r\n\r\n // eslint-disable-next-line react/sort-comp\r\n addContentBlock(sectionId) {\r\n this.setState({\r\n showContentModal: true, contentModalTitle: i18n.t('content.add-content'), contentModalContent: { contentSectionId: sectionId }, contentModalAdd: true,\r\n });\r\n this.props.handleShowPreview(false);\r\n }\r\n\r\n editContentBlock(content) {\r\n this.setState({\r\n showContentModal: true, contentModalTitle: i18n.t('content.edit-content'), contentModalContent: content, contentModalAdd: false,\r\n });\r\n this.props.handleShowPreview(false);\r\n }\r\n\r\n deleteContentBlock(id) {\r\n this.setState({ loaded: false });\r\n this.props.deleteContentBlock(id);\r\n }\r\n\r\n deleteContentSection(id) {\r\n this.setState({ loaded: false });\r\n this.props.deleteContentSection(id);\r\n }\r\n\r\n addContentSection() {\r\n this.setState({ loaded: false });\r\n this.props.addContentSection();\r\n }\r\n\r\n addDivider(precedingId, sectionId) {\r\n this.setState({ loaded: false });\r\n this.props.addDivider(precedingId, sectionId);\r\n }\r\n\r\n saveNewContent() {\r\n if (this.props.crop.croppedImage?.imagePath && (this.state.contentModalContent.contentType === 107 || this.state.contentModalContent.contentType === 105)) {\r\n const imageContent = this.state.contentModalContent;\r\n imageContent.imageId = this.props.crop.croppedImage.id;\r\n if (this.state.contentModalContent.tapType === 2 && this.state.contentModalContent.tapDestination === '5') {\r\n imageContent.tapType = 5;\r\n imageContent.tapDestination = null;\r\n }\r\n if (this.state.contentModalAdd) {\r\n this.props.addContent(imageContent);\r\n } else {\r\n this.props.updateContent(imageContent);\r\n }\r\n } else if (this.state.contentModalContent.tapType === 2 && this.state.contentModalContent.tapDestination === '5') {\r\n const send = this.state.contentModalContent;\r\n send.tapType = 5;\r\n send.tapDestination = null;\r\n if (this.state.contentModalAdd) {\r\n this.props.addContent(send);\r\n } else {\r\n this.props.updateContent(send);\r\n }\r\n } else if (this.state.contentModalAdd) {\r\n this.props.addContent(this.state.contentModalContent);\r\n } else {\r\n this.props.updateContent(this.state.contentModalContent);\r\n }\r\n this.setState({\r\n loaded: false, showContentModal: false, contentModalTitle: '', contentModalContent: {},\r\n });\r\n this.props.handleShowPreview(true);\r\n }\r\n\r\n changeFontSize(size) {\r\n this.setState((prevState) => { return { contentModalContent: { ...prevState.contentModalContent, headerSize: size } }; });\r\n }\r\n\r\n handleColorChange(color, field) {\r\n // eslint-disable-next-line no-param-reassign\r\n this.setState((prevState) => { prevState.contentModalContent[field] = color; return { contentModalContent: { ...prevState.contentModalContent } }; });\r\n }\r\n\r\n handleChangeAlignment(alignment) {\r\n this.setState((prevState) => { return { contentModalContent: { ...prevState.contentModalContent, contentAlign: alignment } }; });\r\n }\r\n\r\n updateTapTypeFromEvent(e) {\r\n if (this.state.contentModalContent.tapType !== e) {\r\n this.setState((prevState) => {\r\n return {\r\n contentModalContent: {\r\n ...prevState.contentModalContent,\r\n tapType: e,\r\n tapDestination: '',\r\n },\r\n };\r\n });\r\n }\r\n }\r\n\r\n setStateFromEvent(e, stateKey) {\r\n if (typeof e === 'undefined' || e === null) {\r\n return;\r\n }\r\n // forms/pages dropdowns returns the data object, not the control\r\n if (stateKey === 'tapDestination' && !e.target) {\r\n // eslint-disable-next-line no-param-reassign\r\n this.setState((prevState) => { prevState.contentModalContent[stateKey] = e.value; return { contentModalContent: { ...prevState.contentModalContent } }; });\r\n } else if (stateKey === 'cropStyle') {\r\n // eslint-disable-next-line no-param-reassign\r\n this.setState((prevState) => { prevState.contentModalContent[stateKey] = parseInt(e.target.value, 10); return { contentModalContent: { ...prevState.contentModalContent } }; });\r\n } else if (stateKey === 'isFullWidth') {\r\n // eslint-disable-next-line no-param-reassign\r\n this.setState((prevState) => { prevState.contentModalContent[stateKey] = e.target.checked; return { contentModalContent: { ...prevState.contentModalContent } }; });\r\n } else if (stateKey === 'appearanceType' || stateKey === 'videoType' || stateKey === 'imageId' || stateKey === 'imageUrl') {\r\n // eslint-disable-next-line no-param-reassign\r\n this.setState((prevState) => { prevState.contentModalContent[stateKey] = e; return { contentModalContent: { ...prevState.contentModalContent } }; });\r\n } else {\r\n // eslint-disable-next-line no-param-reassign\r\n this.setState((prevState) => { prevState.contentModalContent[stateKey] = e.target.value; return { contentModalContent: { ...prevState.contentModalContent } }; });\r\n }\r\n }\r\n\r\n addContentType(type) {\r\n if (this.state.contentModalAdd) {\r\n this.setState((prevState) => {\r\n switch (type) {\r\n case 103:\r\n return {\r\n contentModalContent: {\r\n contentType: 103,\r\n videoUrl: '',\r\n isFullWidth: false,\r\n contentSectionId: prevState.contentModalContent.contentSectionId,\r\n isUrlValid: false,\r\n videoType: 3,\r\n },\r\n };\r\n case 104:\r\n return {\r\n contentModalContent: {\r\n contentType: 104,\r\n headerSize: 1,\r\n headerText: '',\r\n headerTextColor: 3,\r\n subheaderText: '',\r\n subheaderTextColor: 4,\r\n text: '',\r\n textColor: 3,\r\n tapType: 1,\r\n contentSectionId: prevState.contentModalContent.contentSectionId,\r\n },\r\n };\r\n case 105:\r\n return {\r\n contentModalContent: {\r\n contentType: 105,\r\n imageId: '',\r\n imageUrl: '',\r\n cropStyle: 1,\r\n headerText: '',\r\n headerTextColor: 3,\r\n subheaderText: '',\r\n subheaderTextColor: 4,\r\n text: '',\r\n textColor: 3,\r\n tapType: 1,\r\n contentSectionId: prevState.contentModalContent.contentSectionId,\r\n },\r\n };\r\n case 106:\r\n return {\r\n contentModalContent: {\r\n contentType: 106,\r\n contentSectionId: prevState.contentModalContent.contentSectionId,\r\n tapType: 2,\r\n text: '',\r\n appearanceType: 1,\r\n contentAlign: 2,\r\n },\r\n };\r\n case 107:\r\n return {\r\n contentModalContent: {\r\n contentType: 107,\r\n contentSectionId: prevState.contentModalContent.contentSectionId,\r\n bannerText: '',\r\n tapType: 1,\r\n imageId: '',\r\n bannerOverlayColor: 1,\r\n imageUrl: '',\r\n bannerTextColor: '#ffffff',\r\n },\r\n };\r\n default:\r\n // eslint-disable-next-line prefer-template\r\n return {\r\n contentModalContent: {\r\n contentSectionId: prevState.contentModalContent.contentSectionId,\r\n },\r\n };\r\n }\r\n });\r\n }\r\n }\r\n\r\n isValid() {\r\n if (this.state.contentModalContent?.contentType) {\r\n if (this.state.contentModalContent.contentType !== 103) {\r\n if (this.state.contentModalContent.tapType !== 1 && !(this.state.contentModalContent.tapDestination?.length > 0)) {\r\n return {\r\n valid: false,\r\n message: 'content.validation.tap-destination-required',\r\n };\r\n }\r\n if (this.state.contentModalContent.tapType === 4 && !(this.state.contentModalContent.tapDestination?.indexOf('.') > 0 && this.state.contentModalContent.tapDestination?.indexOf('.') < this.state.contentModalContent.tapDestination?.length - 2)) {\r\n return {\r\n valid: false,\r\n message: 'content.validation.tap-destination-required',\r\n };\r\n }\r\n }\r\n switch (this.state.contentModalContent.contentType) {\r\n case 103:\r\n if (this.state.contentModalContent.videoUrl.length === 0) {\r\n return {\r\n valid: false,\r\n message: 'content.validation.video-url-required',\r\n };\r\n }\r\n return {\r\n valid: this.state.contentModalContent.isUrlValid,\r\n message: 'content.validation.video-url-invalid',\r\n };\r\n case 104:\r\n return {\r\n valid: this.state.contentModalContent.text.length > 0\r\n || this.state.contentModalContent.subheaderText.length > 0\r\n || this.state.contentModalContent.headerText.length > 0,\r\n message: 'content.validation.text-title-required',\r\n };\r\n case 105:\r\n if (this.props.crop.inProgress !== false) {\r\n return {\r\n valid: false,\r\n message: 'content.validation.crop-in-progress',\r\n };\r\n }\r\n if (this.state.contentModalContent.imageId.length === 0 && typeof this.props.crop.croppedImage?.imagePath === 'undefined') {\r\n return {\r\n valid: false,\r\n message: 'content.validation.image-id-required',\r\n };\r\n }\r\n return {\r\n valid: this.state.contentModalContent.text.length > 0\r\n || this.state.contentModalContent.subheaderText.length > 0\r\n || this.state.contentModalContent.headerText.length > 0,\r\n message: 'content.validation.text-title-required',\r\n };\r\n\r\n case 106:\r\n return {\r\n valid: this.state.contentModalContent.text.length > 0,\r\n message: 'content.validation.text-required',\r\n };\r\n\r\n case 107:\r\n if (this.props.crop.inProgress !== false) {\r\n return {\r\n valid: false,\r\n message: 'content.validation.crop-in-progress',\r\n };\r\n }\r\n return {\r\n valid: this.state.contentModalContent.imageId.length !== 0 || this.props.crop.croppedImage?.imagePath,\r\n message: 'content.validation.image-id-required',\r\n };\r\n default:\r\n return {\r\n valid: false,\r\n message: 'content.validation.type-not-set',\r\n };\r\n }\r\n }\r\n\r\n return {\r\n valid: false,\r\n message: 'content.validation.type-not-set',\r\n };\r\n }\r\n\r\n render() {\r\n const { sections } = this.props || [];\r\n if (sections && sections.length > 0) {\r\n sections.sort((a, b) => {\r\n return a.displayOrder - b.displayOrder;\r\n });\r\n }\r\n const formDataValid = this.isValid();\r\n // eslint-disable-next-line no-nested-ternary\r\n const saveButton = formDataValid.valid\r\n ? (this.props.flags.results.customContentPageCount + 1 <= this.props.pages.data.length && this.state.contentModalContent?.tapDestination === '5'\r\n ? (\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 this.props.setStateFromEvent(e, 'bannerTextColor');\r\n }}\r\n defaultChecked={this.props.contentModalContent.bannerTextColor === '#ffffff'}\r\n value=\"#ffffff\"\r\n displayColor=\"#ffffff\"\r\n />\r\n\r\n {\r\n return this.props.setStateFromEvent(e, 'bannerTextColor');\r\n }}\r\n defaultChecked={this.props.contentModalContent.bannerTextColor === '#343434'}\r\n value=\"#343434\"\r\n displayColor=\"#343434\"\r\n />\r\n
\r\n Banner Text Color
\r\n\r\n {\r\n return this.props.setStateFromEvent(e, 'bannerOverlayColor');\r\n }}\r\n defaultChecked={this.props.contentModalContent.bannerOverlayColor === 1}\r\n displayColor=\"#ffffff\"\r\n value={1}\r\n rectangle\r\n />\r\n\r\n {\r\n return this.props.setStateFromEvent(e, 'bannerOverlayColor');\r\n }}\r\n defaultChecked={this.props.contentModalContent.bannerOverlayColor === 2}\r\n displayColor=\"#b0b0b2\"\r\n value={2}\r\n rectangle\r\n />\r\n\r\n {\r\n return this.props.setStateFromEvent(e, 'bannerOverlayColor');\r\n }}\r\n defaultChecked={this.props.contentModalContent.bannerOverlayColor === 3}\r\n displayColor=\"#8e8f91\"\r\n value={3}\r\n rectangle\r\n />\r\n\r\n {\r\n return this.props.setStateFromEvent(e, 'bannerOverlayColor');\r\n }}\r\n defaultChecked={this.props.contentModalContent.bannerTextColor === 4}\r\n displayColor=\"#55575a\"\r\n value={4}\r\n rectangle\r\n />\r\n
\r\n\r\n Darken Image
\r\n\r\n \r\n {\r\n return this.props.setStateFromEvent(e, 'isFullWidth');\r\n }}\r\n type=\"checkbox\"\r\n />\r\n
\r\n\r\n \r\n { this.setState({ showContentModal: false, contentModalTitle: '', contentModalContent: {} }); this.props.handleShowPreview(true); }}>\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SortablePageSectionsList);\r\n","import React from 'react'; // eslint-disable-line\r\nimport CaptionTooltip from '../../components/common/CaptionTooltip';\r\nimport CloseModal from '../../components/svg/CloseX2';\r\n\r\nexport default class SmallModal extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.closeDialog = this.closeDialog.bind(this);\r\n }\r\n\r\n closeDialog() {\r\n if (this.props.close) {\r\n this.props.close();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {saveButton}\r\n \r\n
\r\n \r\n {constants.ContentType.find((c) => {\r\n return c.Id === this.state.contentModalContent.contentType;\r\n })?.Name === 'Text'\r\n && (\r\n
\r\n \r\n
\r\n )}\r\n\r\n {constants.ContentType.find((c) => {\r\n return c.Id === this.state.contentModalContent.contentType;\r\n })?.Name === 'Video'\r\n && (\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react'; // eslint-disable-line\r\nimport Select from 'react-select';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport { withRouter } from 'react-router-dom';\r\nimport EditInput from '../../components/forms/EditInput';\r\nimport constants from '../../constants';\r\nimport GeneralSection from '../../components/common/GeneralSection';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport _actions from '../../actions';\r\nimport PreviewDiscover from '../../components/preview/PreviewDiscover';\r\nimport i18n from '../../i18n';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport SortablePageSectionsList from '../../components/pages/SortablePageSectionsList';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\nimport LargeModal from '../modals/LargeModal';\r\nimport SmallModal from '../modals/SmallModal';\r\n\r\nconst FMSCategoryName = 'Event Registration';\r\n\r\nexport class DiscoverModule extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n menuItem: {},\r\n module: {},\r\n index: props.match.params.section === 'layout' ? 1 : 0,\r\n sectionsLoading: true,\r\n showUpsellModal: false,\r\n showPreview: true,\r\n };\r\n this.updateMenuItemFromEvent = this.updateMenuItemFromEvent.bind(this);\r\n this.updateModuleFieldWithValue = this.updateModuleFieldsWithValues.bind(this);\r\n this.updateModuleFromEvent = this.updateModuleFromEvent.bind(this);\r\n this.updateModuleFeaturedId = this.updateModuleFeaturedId.bind(this);\r\n this.saveUpdatedModule = this.saveUpdatedModule.bind(this);\r\n this.handleDeleteContentSection = this.handleDeleteContentSection.bind(this);\r\n this.handleDisplayOrderChange = this.handleDisplayOrderChange.bind(this);\r\n this.handleAddContentSection = this.handleAddContentSection.bind(this);\r\n this.handleSectionChange = this.handleSectionChange.bind(this);\r\n this.handleAddContent = this.handleAddContent.bind(this);\r\n this.handleAddDivider = this.handleAddDivider.bind(this);\r\n this.handleDeleteContent = this.handleDeleteContent.bind(this);\r\n this.handleUpdateContent = this.handleUpdateContent.bind(this);\r\n this.canReorderSubItems = this.canReorderSubItems.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId, true);\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n this.props.actions.getModuleByTypeAndForms(this.props.match.params.projectId, constants.ModuleType.find((mt) => { return mt.Name === 'Discover'; }).Id);\r\n this.props.actions.getPagesforProject(this.props.match.params.projectId);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Discover'; }).Id\r\n && this.props.modules.select.enabled) {\r\n if (this.props.alerts.data.length > 0 && this.props.alerts.data.find((m) => { return m.id === 'module-disabled'; })) {\r\n this.props.actions.clearAlert('module-disabled');\r\n }\r\n }\r\n if (!prevState.isLoaded) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Discover'; }).Id\r\n && !this.props.modules.select.enabled) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.discover.error1'),\r\n linkText: i18n.t('enableHere'),\r\n link: `/projects/${this.props.match.params.projectId}/modules/enable-modules`,\r\n view: '/modules/discover',\r\n type: 'warning',\r\n id: 'module-disabled',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isLoaded: true });\r\n }\r\n }\r\n if (!this.props.forms.inProgress\r\n && !this.props.modules.inProgress\r\n && !this.state.formsLoaded\r\n && this.props.forms.filtered.length === 0\r\n && this.props.versions.select.mediaUrl === '') {\r\n this.props.actions.addAlert({\r\n message: `${i18n.t('forms.error')} \"${FMSCategoryName}\".`,\r\n view: '/modules/discover',\r\n type: 'error',\r\n id: 'forms-missing-discover',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ formsLoaded: true });\r\n }\r\n if (prevProps.forms.inProgress && !this.props.forms.inProgress) {\r\n const eventForms = this.props.forms.filtered.filter((form) => { return form.categories.some((cat) => { return cat === '00000003-b1e5-4001-8f82-e56bda04af82'; }) && form.isCurrentEvent === true; });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n formsLoaded: true,\r\n allForms: this.props.forms.filtered,\r\n eventForms,\r\n });\r\n }\r\n if (prevProps.pages.dropInProgress && !this.props.pages.dropInProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n pagesLoaded: true,\r\n allPages: this.props.pages.dropdown,\r\n });\r\n }\r\n if (prevProps.modules.inProgress && !this.props.modules.inProgress) {\r\n this.loadProjectMedia();\r\n }\r\n if (prevProps.media.inProgress && !this.props.media.inProgress) {\r\n if (this.props.media.error) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.sermons.error-get-media-failure'),\r\n linkText: 'Fix here',\r\n link: `/projects/${this.props.match.params.projectId}/modules/sermons`,\r\n view: '/modules/discover',\r\n type: 'error',\r\n id: 'get-media-failure',\r\n });\r\n }\r\n }\r\n if ((!this.props.menuItems.inProgress\r\n && prevProps.menuItems.inProgress)\r\n || (!this.props.modules.inProgress\r\n && prevProps.modules.inProgress)) {\r\n let menuItem = this.props.menuItems.data !== []\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((c) => { return c.Name === 'Discover'; }).Id\r\n ? this.props.menuItems.data\r\n .find((mi) => {\r\n return mi.type === 2\r\n && mi.subType.toUpperCase() === this.props.modules.select.pageId.toUpperCase();\r\n })\r\n : '';\r\n menuItem = menuItem || {};\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ menuItem });\r\n }\r\n if (!this.props.modules.inProgress && prevProps.modules.inProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ module: this.props.modules.select });\r\n }\r\n if ((!this.props.pages.inProgress && prevProps.pages.inProgress && this.props.modules.select?.pageId)\r\n || (!this.props.modules.inProgress && prevProps.modules.inProgress && this.props.pages.data?.length > 0)) {\r\n const temp = this.props.pages.data.find((m) => { return m.id === this.props.modules.select.pageId; });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n if (typeof (temp) !== 'undefined') this.setState({ sections: temp.contentSections, sectionsLoading: false });\r\n }\r\n if (!this.props.publish.updatedNew && prevProps.publish.updatedNew) {\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n this.props.actions.getModuleByTypeAndForms(this.props.match.params.projectId, constants.ModuleType.find((mt) => { return mt.Name === 'Discover'; }).Id, true);\r\n }\r\n }\r\n\r\n formatMediaItemsForSelect = (items) => {\r\n const formattedItems = [];\r\n formattedItems.push({\r\n label: i18n.t('modules.discover.sermon-select'),\r\n value: 'auto',\r\n });\r\n // eslint-disable-next-line no-restricted-syntax\r\n for (const item of items) {\r\n formattedItems.push({\r\n label: item.title,\r\n value: item.guid,\r\n });\r\n }\r\n return formattedItems;\r\n }\r\n\r\n formatFormsForSelect = (items) => {\r\n const formattedItems = [];\r\n // eslint-disable-next-line no-restricted-syntax\r\n for (const item of items) {\r\n formattedItems.push({\r\n label: item.name,\r\n value: item.id,\r\n });\r\n }\r\n return formattedItems;\r\n }\r\n\r\n showUpsellModal = () => {\r\n this.setState({ showUpsellModal: true });\r\n }\r\n\r\n formatPagesForSelect = (items) => {\r\n const formattedItems = [];\r\n formattedItems.push({\r\n label: i18n.t('pages.tapType5'),\r\n value: '5',\r\n });\r\n // eslint-disable-next-line no-restricted-syntax\r\n for (const item of items) {\r\n if (item.id !== this.state.module.pageId) {\r\n formattedItems.push({\r\n label: item.name,\r\n value: item.id,\r\n });\r\n }\r\n }\r\n return formattedItems;\r\n }\r\n\r\n handleTabChange = (event, index) => {\r\n switch (index) {\r\n case 0:\r\n this.props.history.push(`/projects/${this.props.match.params.projectId}/modules/discover/configure`);\r\n this.setState({ index: 0 });\r\n break;\r\n case 1:\r\n this.props.history.push(`/projects/${this.props.match.params.projectId}/modules/discover/layout`);\r\n this.setState({ index: 1 });\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n updateModuleFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.checked;\r\n let activeSermons = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Sermons'; }).Id; });\r\n activeSermons = activeSermons.filter((module) => { return module.enabled === true; });\r\n if (changedValue && fieldName === 'showFeatured' && activeSermons.length === 0) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.sermons.error1'),\r\n linkText: i18n.t('enableHereCaps'),\r\n link: `/projects/${this.props.match.params.projectId}/modules/enable-modules`,\r\n view: '/modules/discover',\r\n type: 'warning',\r\n dismissable: true,\r\n });\r\n } else if (changedValue && fieldName === 'showUpcomingEvents' && this.state.eventForms?.length === 0) {\r\n this.props.actions.addAlert({\r\n message: `${i18n.t('forms.error')} \"${FMSCategoryName}\".`,\r\n view: '/modules/discover',\r\n type: 'error',\r\n id: 'forms-missing',\r\n dismissable: 'true',\r\n });\r\n } else {\r\n const newState = this.state.module;\r\n newState[fieldName] = changedValue;\r\n this.setState({ module: { ...newState } });\r\n this.saveUpdatedModule(this.state.module, fieldName, changedValue);\r\n }\r\n }\r\n\r\n updateModuleFeaturedId(value) {\r\n const fieldsToBeUpdated = [\r\n {\r\n Name: 'featuredId',\r\n Value: value.value === 'auto' ? null : value.value,\r\n },\r\n {\r\n Name: 'featuredType',\r\n Value: value.value === 'auto' ? constants.FeaturedType.find((n) => { return n.Name === 'Latest'; }).Id : constants.FeaturedType.find((n) => { return n.Name === 'Featured'; }).Id,\r\n }];\r\n this.updateModuleFieldsWithValues(fieldsToBeUpdated);\r\n }\r\n\r\n updateModuleFieldsWithValues(fields) {\r\n // eslint-disable-next-line no-restricted-syntax\r\n for (const field of fields) {\r\n const newState = this.state.module;\r\n newState[field.Name] = field.Value;\r\n this.setState({ module: { ...newState } });\r\n this.saveUpdatedModule(this.state.module, field.Name, field.Value);\r\n }\r\n }\r\n\r\n loadProjectMedia() {\r\n this.props.actions.getProjectMedia(this.props.match.params.projectId);\r\n }\r\n\r\n updateMenuItemFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim().length > 0 ? evt.target.value.trim() : i18n.t('modules.discover.discover');\r\n if (changedValue !== '') {\r\n this.setState((prevState) => {\r\n return {\r\n menuItem: {\r\n ...prevState.menuItem,\r\n title: changedValue,\r\n },\r\n };\r\n });\r\n this.props.actions.updateMenuItemParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.pageId,\r\n 2,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n }\r\n\r\n saveUpdatedModule(module, field, val) {\r\n this.props.actions.updateModuleParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n field,\r\n val,\r\n );\r\n }\r\n\r\n // eslint-disable-next-line react/sort-comp\r\n handleDeleteContentSection(e) {\r\n this.setState({ sectionsLoading: true });\r\n this.props.actions.deleteContentSection(e, this.props.match.params.projectId);\r\n }\r\n\r\n handleAddContentSection() {\r\n this.setState({ sectionsLoading: true });\r\n this.props.actions.addContentSectionToPage(this.props.modules.select.pageId, this.props.match.params.projectId);\r\n }\r\n\r\n handleDisplayOrderChange(e) {\r\n this.props.actions.reorderPageSections(this.props.modules.select.pageId, this.props.match.params.projectId, e);\r\n }\r\n\r\n handleSectionChange(section) {\r\n // this isn't strictly necessary here, but keeping in sync with PagesModule\r\n this.setState({ sectionsLoading: true });\r\n this.props.actions.updateContentSection(section, this.props.match.params.projectId);\r\n }\r\n\r\n handleAddContent(content) {\r\n this.setState({ sectionsLoading: true });\r\n this.props.actions.addContentToSection(content, this.props.match.params.projectId);\r\n }\r\n\r\n handleAddDivider(precedingId, sectionId) {\r\n this.setState({ sectionsLoading: true });\r\n const divider = { contentSectionId: sectionId, contentType: 102, precedingContentId: precedingId };\r\n this.props.actions.addContentToSection(divider, this.props.match.params.projectId);\r\n }\r\n\r\n handleDeleteContent(id) {\r\n this.setState({ sectionsLoading: true });\r\n this.props.actions.deleteContent(id, this.props.match.params.projectId);\r\n }\r\n\r\n handleUpdateContent(content) {\r\n this.setState({ sectionsLoading: true });\r\n this.props.actions.updateContent(content, this.props.match.params.projectId);\r\n }\r\n\r\n canReorderSubItems(subItems) {\r\n const contentLists = subItems.map(s => s.contents.filter(c => c !== undefined)).filter(s => s.length > 0);\r\n\r\n for (let i = 0; i < contentLists.length; i++) {\r\n const contents = contentLists[i];\r\n const sermonIndex = contents.findIndex(c => c.contentType === 101);\r\n if (sermonIndex > 0) {\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n }\r\n\r\n render() {\r\n const mediaItems = this.props.media.select.url\r\n ? this.formatMediaItemsForSelect(this.props.media.select.items)\r\n : [];\r\n let previewDiscover = null;\r\n const formItems = this.state.formsLoaded ? this.formatFormsForSelect(this.state.allForms) : [];\r\n const pagesItems = this.state.pagesLoaded ? this.formatPagesForSelect(this.state.allPages) : [];\r\n let selectedFeaturedId = '';\r\n if (mediaItems.length > 0) {\r\n selectedFeaturedId = this.state.module.featuredId ? this.state.module.featuredId : '';\r\n if (selectedFeaturedId === '') {\r\n selectedFeaturedId = 'auto';\r\n }\r\n }\r\n\r\n let activeCheckin = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Check-In'; }).Id; });\r\n activeCheckin = activeCheckin.filter((module) => { return module.enabled === true; });\r\n let activeSermons = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Sermons'; }).Id; });\r\n activeSermons = activeSermons.filter((module) => { return module.enabled === true; });\r\n let bodyForm = '';\r\n const upsell = (\r\n
\r\n \r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n \r\n \r\n {this.props.title}\r\n \r\n
\r\n \r\n {this.props.children}\r\n
\r\n Page limit exceeded
\r\n \r\n {}} // It's mandatory for component, so added the void\r\n />\r\n
\r\n )\r\n }\r\n {this.state.index === 0\r\n && (\r\n \r\n \r\n \r\n \r\n
\r\n\r\n {i18n.t('modules.discover.section2.label2')}
\r\n\r\n {bodyForm}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(DiscoverModule));\r\n","import React from 'react'; // eslint-disable-line\r\nimport i18n from '../../i18n';\r\nimport constants from '../../constants';\r\nimport PreviewModuleBottomMenuItem from './PreviewModuleBottomMenuItem';\r\nimport Checkin from '../svg/preview/Checkin';\r\nclass PreviewContact extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loaded: false,\r\n };\r\n\r\n this.previewLoaded = this.previewLoaded.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (document.getElementById('form-preview')) {\r\n document.getElementById('form-preview')\r\n .addEventListener('load',\r\n this.previewLoaded);\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.module.form1Id !== prevProps.module.form1Id) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ loaded: false });\r\n if (prevProps.module.form1Id == null) {\r\n document.getElementById('form-preview')\r\n .addEventListener('load',\r\n this.previewLoaded);\r\n }\r\n }\r\n }\r\n\r\n previewLoaded = () => {\r\n this.setState({ loaded: true });\r\n }\r\n\r\n render() {\r\n let modules = this.props.menuItems\r\n && this.props.menuItems.length > 0\r\n ? this.props.menuItems.filter((item) => { return item.displayOrder > -1; })\r\n : [];\r\n modules = modules.sort((a, b) => { return a.displayOrder - b.displayOrder; });\r\n if (modules.length > 5 && this.props.menuStyle === 1) {\r\n modules = modules.slice(0, 4);\r\n modules.push({ displayOrder: 5, title: 'More', subType: 'more' });\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\nexport default PreviewContact;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport Select from 'react-select';\r\nimport _actions from '../../actions';\r\nimport constants from '../../constants';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport EditInput from '../../components/forms/EditInput';\r\nimport GeneralSection from '../../components/common/GeneralSection';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport DisplayOptionsBox from '../../components/forms/DisplayOptionsBox';\r\nimport ManagedInput from '../../components/forms/ManagedInput';\r\nimport ValidatedControl from '../../components/forms/ValidatedControl';\r\nimport PreviewContact from '../../components/preview/PreviewContact';\r\nimport i18n from '../../i18n';\r\nimport PageBreak from '../../components/structure/PageBreak';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\n\r\nconst FMSCategoryName = 'Contact Form';\r\nlet defaultTabs = [];\r\n\r\nexport class ContactModule extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isLoaded: false,\r\n formsLoaded: false,\r\n menuItem: {},\r\n module: {},\r\n showPreview: true,\r\n };\r\n this.updateModuleFieldsWithValues = this.updateModuleFieldsWithValues.bind(this);\r\n this.updateMenuItemFromEvent = this.updateMenuItemFromEvent.bind(this);\r\n this.updateModuleTabsFromEvent = this.updateModuleTabsFromEvent.bind(this);\r\n this.updateModuleFieldWithValue = this.updateModuleFieldWithValue.bind(this);\r\n this.updateModuleFromEvent = this.updateModuleFromEvent.bind(this);\r\n this.updateContactFormOption = this.updateContactFormOption.bind(this);\r\n this.updatePrayerFormOption = this.updatePrayerFormOption.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n this.props.actions.getModuleByTypeAndForms(this.props.match.params.projectId, constants.ModuleType.find((mt) => { return mt.Name === 'Contact'; }).Id);\r\n defaultTabs = [\r\n {\r\n name: 'tab1Name',\r\n value: i18n.t('modules.contact.contact'),\r\n },\r\n {\r\n name: 'tab2Name',\r\n value: i18n.t('modules.contact.prayer'),\r\n },\r\n {\r\n name: 'title',\r\n value: i18n.t('modules.contact.contact'),\r\n }];\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Contact'; }).Id\r\n && this.props.modules.select.enabled) {\r\n if (this.props.alerts.data.length > 0 && this.props.alerts.data.find((m) => { return m.id === 'module-disabled'; })) {\r\n this.props.actions.clearAlert('module-disabled');\r\n }\r\n }\r\n if (!prevState.isLoaded) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Contact'; }).Id\r\n && !this.props.modules.select.enabled) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.contact.error1'),\r\n linkText: i18n.t('enableHere'),\r\n link: `/projects/${this.props.match.params.projectId}/modules/enable-modules`,\r\n view: '/modules/contact',\r\n type: 'warning',\r\n id: 'module-disabled',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isLoaded: true });\r\n }\r\n }\r\n if (!this.props.forms.inProgress\r\n && !this.props.modules.inProgress\r\n && !this.state.formsLoaded\r\n && (this.props.forms.filtered.length === 0)) {\r\n this.props.actions.addAlert({\r\n message: `${i18n.t('forms.error')} \"${FMSCategoryName}\".`,\r\n view: '/modules/contact',\r\n type: 'error',\r\n id: 'forms-missing-contact',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ formsLoaded: true });\r\n }\r\n if ((!this.props.menuItems.inProgress\r\n && prevProps.menuItems.inProgress)\r\n || (!this.props.modules.inProgress\r\n && prevProps.modules.inProgress)) {\r\n let menuItem = this.props.menuItems.data !== []\r\n && typeof (this.props.modules.select.moduleType) === 'number'\r\n ? this.props.menuItems.data.find((mi) => { return mi.type === 1 && parseInt(mi.subType, 10) === this.props.modules.select.moduleType; })\r\n : '';\r\n menuItem = menuItem || {};\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ menuItem });\r\n }\r\n if (!this.props.modules.inProgress && prevProps.modules.inProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ module: this.props.modules.select });\r\n }\r\n }\r\n\r\n mapFormsToOptions = (forms) => {\r\n if (forms) {\r\n return forms.map((form) => {\r\n return {\r\n value: form.id,\r\n label: form.name,\r\n };\r\n });\r\n }\r\n return [];\r\n }\r\n\r\n updateContactFormOption(id) {\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n form1Id: id.value,\r\n },\r\n };\r\n });\r\n this.updateModuleFieldWithValue('form1Id', id.value);\r\n }\r\n\r\n updatePrayerFormOption(id) {\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n form2Id: id.value,\r\n },\r\n };\r\n });\r\n this.updateModuleFieldWithValue('form2Id', id.value);\r\n }\r\n\r\n updateMenuItemFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim().length > 0 ? evt.target.value.trim() : i18n.t('modules.contact.contact');\r\n if (changedValue !== '') {\r\n this.setState((prevState) => {\r\n return {\r\n menuItem: {\r\n ...prevState.menuItem,\r\n title: changedValue,\r\n },\r\n };\r\n });\r\n this.props.actions.updateMenuItemParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n 1,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n }\r\n\r\n updateModuleFromEvent(evt) {\r\n const changedValue = evt.target.checked;\r\n if (!changedValue) {\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n form2Id: null,\r\n showExtraTab: false,\r\n },\r\n };\r\n });\r\n this.updateModuleFieldsWithValues([{\r\n parameterName: 'form2Id',\r\n parameterValue: null,\r\n }, {\r\n parameterName: 'showExtraTab',\r\n parameterValue: false,\r\n }]);\r\n } else {\r\n this.updateModuleFieldWithValue('showExtraTab', true);\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n showExtraTab: true,\r\n },\r\n };\r\n });\r\n }\r\n }\r\n\r\n updateModuleFieldsWithValues(fields) {\r\n this.props.actions.updateModule(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n fields,\r\n );\r\n }\r\n\r\n updateModuleTabsFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim();\r\n if (changedValue !== '') {\r\n const newState = this.state.module;\r\n newState[fieldName] = changedValue;\r\n this.setState({ module: { ...newState } });\r\n this.updateModuleFieldWithValue(fieldName, changedValue);\r\n } else {\r\n const fieldData = defaultTabs.find((tab) => { return tab.name === fieldName; });\r\n const newState = this.state.module;\r\n newState[fieldName] = fieldData.value;\r\n this.setState({ module: { ...newState } });\r\n this.updateModuleFieldWithValue(fieldName, fieldData.value);\r\n }\r\n }\r\n\r\n updateModuleFieldWithValue(field, val) {\r\n this.props.actions.updateModuleParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n field,\r\n val,\r\n );\r\n }\r\n\r\n render() {\r\n let previewContact = null;\r\n const contactFormOptions = this.mapFormsToOptions(this.props.forms.filtered);\r\n const prayerFormOptions = this.mapFormsToOptions(this.props.forms.filtered);\r\n let activeCheckin = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Check-In'; }).Id; });\r\n activeCheckin = activeCheckin.filter((module) => { return module.enabled === true; });\r\n let bodyForm = '';\r\n const selectedForm = this.props.forms.filtered.filter((form) => { return form.id === this.state.module.form1Id; })[0];\r\n const selectedFormNotSubmittable = selectedForm ? selectedForm.isSubmittable !== true : false;\r\n const selectedPrayerForm = this.props.forms.filtered.filter((form) => { return form.id === this.state.module.form2Id; })[0];\r\n const selectedPrayerFormNotSubmittable = selectedPrayerForm ? selectedPrayerForm.isSubmittable !== true : false;\r\n if (this.state.module.enabled) {\r\n previewContact = (\r\n \r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Tiled'; }).Id && (\r\n
\r\n \r\n \r\n
\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'SlideOut'; }).Id && (\r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n\r\n
\r\n \r\n { return c.Name === 'Bottom'; }).Id ? '450px' : '500px'}\r\n style={{ marginTop: '-28px', marginLeft: '-10px' }}\r\n src={`${window.GENESIS_FMS_URL}embed.aspx?formId=${this.props.module.form1Id}&use-form-styles=false&embed=true&style-url=${window.location.protocol}//${window.location.host}${window.GENESIS_CMS_API_URL}/v2/Preview/${this.props.accentColor}/${this.props.secondaryText}/${this.props.primaryText}/${this.props.actionColor}/${this.props.baseColorTheme}/styles.css`}\r\n />\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n\r\n
\r\n \r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n
\r\n \r\n {this.props.checkin &&
\r\n )}\r\n \r\n
\r\n {this.props.module.showExtraTab && (\r\n {this.props.menuItem?.title}
\r\n\r\n
\r\n )}\r\n {!this.props.module.showExtraTab && (\r\n {this.props.module.tab1Name ? this.props.module.tab1Name : i18n.t('modules.contact.contact')}
\r\n {this.props.module.tab2Name ? this.props.module.tab2Name : i18n.t('modules.contact.prayer')}
\r\n \r\n
\r\n )}\r\n {!(navigator.userAgent.indexOf('MSIE') !== -1\r\n || navigator.appVersion.indexOf('Trident/') > -1) && !this.state.loaded && this.props.module.form1Id && {this.props.module.tab1Name ? this.props.module.tab1Name : i18n.t('modules.contact.contact')}
\r\n Form is Loading...
}\r\n\r\n {!this.props.module.form1Id && Please Choose a Form
}\r\n\r\n {(navigator.userAgent.indexOf('MSIE') !== -1\r\n || navigator.appVersion.indexOf('Trident/') > -1)\r\n && (\r\n \r\n Live preview is not available for Internet Explorer. Please use another browser.\r\n
\r\n )}\r\n {!(navigator.userAgent.indexOf('MSIE') !== -1\r\n || navigator.appVersion.indexOf('Trident/') > -1) && this.props.module.form1Id\r\n && (\r\n \r\n\r\n {/* eslint-disable-next-line react/no-array-index-key */}\r\n {modules.sort((a, b) => { return a.displayOrder > b.displayOrder; }).map((md, i) => { return
\r\n\r\n )}\r\n \r\n \r\n {i18n.t('modules.contact.title')}\r\n \r\n\r\n \r\n {i18n.t('modules.contact.subtitle')}\r\n \r\n\r\n \r\n \r\n\r\n \r\n
\r\n\r\n \r\n \r\n
\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 \r\n {bodyForm}\r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ContactModule);\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport MultiSelect from 'react-multi-select-component';\r\nimport _actions from '../../actions';\r\nimport constants from '../../constants';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport EditInput from '../../components/forms/EditInput';\r\nimport GeneralSection from '../../components/common/GeneralSection';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport DisplayOptionsBox from '../../components/forms/DisplayOptionsBox';\r\nimport ManagedInput from '../../components/forms/ManagedInput';\r\nimport i18n from '../../i18n';\r\nimport HelpTooltip from '../../components/common/HelpTooltip';\r\nimport GreenCheck from '../../components/svg/GreenCheck';\r\nimport Exclamation from '../../components/svg/Exclamation';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\n\r\nexport class CalendarModule extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isLoaded: false,\r\n menuItem: {},\r\n module: {},\r\n showPreview: true,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getChmsCalendarFeeds();\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n this.props.actions.getModuleByType(this.props.match.params.projectId, constants.ModuleType.find((mt) => { return mt.Name === 'Calendar'; }).Id);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Calendar'; }).Id\r\n && this.props.modules.select.enabled) {\r\n if (this.props.alerts.data.length > 0 && this.props.alerts.data.find((m) => { return m.id === 'module-disabled'; })) {\r\n this.props.actions.clearAlert('module-disabled');\r\n }\r\n }\r\n if (!prevState.isLoaded) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Calendar'; }).Id\r\n && !this.props.modules.select.enabled) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.calendar.error1'),\r\n linkText: i18n.t('enableHere'),\r\n link: `/projects/${this.props.match.params.projectId}/modules/enable-modules`,\r\n view: '/modules/calendar',\r\n type: 'warning',\r\n id: 'module-disabled',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isLoaded: true });\r\n }\r\n }\r\n if ((!this.props.menuItems.inProgress\r\n && prevProps.menuItems.inProgress)\r\n || (!this.props.modules.inProgress\r\n && prevProps.modules.inProgress)) {\r\n let menuItem = this.props.menuItems.data !== []\r\n && typeof (this.props.modules.select.moduleType) === 'number'\r\n ? this.props.menuItems.data\r\n .find((mi) => {\r\n return mi.type === 1\r\n && parseInt(mi.subType, 10) === this.props.modules.select.moduleType;\r\n })\r\n : '';\r\n menuItem = menuItem || {};\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ menuItem });\r\n }\r\n if (!this.props.modules.inProgress && prevProps.modules.inProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ module: this.props.modules.select });\r\n }\r\n }\r\n\r\n updateCalendarFormOption = (selected) => {\r\n const newones = selected.filter((m) => { return m !== ''; }).map((m) => { return m.value; });\r\n this.setState((prevState) => {\r\n return { module: { ...prevState.module, calendarFeeds: newones } };\r\n });\r\n this.updateModuleFieldWithValue('calendarFeeds', newones);\r\n }\r\n\r\n updateMenuItemFromEvent = (evt) => {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim().length > 0 ? evt.target.value.trim() : i18n.t('modules.calendar.title');\r\n if (changedValue !== '') {\r\n this.setState((prevState) => {\r\n return {\r\n menuItem: {\r\n ...prevState.menuItem,\r\n title: changedValue,\r\n },\r\n };\r\n });\r\n this.props.actions.updateMenuItemParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n 1,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n }\r\n\r\n updateModuleFieldWithValue = (field, val) => {\r\n this.props.actions.updateModuleParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n field,\r\n val,\r\n );\r\n }\r\n\r\n updateImagesEnabled = (evt) => {\r\n const changedValue = evt.target.checked;\r\n if (changedValue) {\r\n this.updateModuleFieldWithValue('imagesEnabled', true);\r\n this.setState((prevState) => {\r\n return { module: { ...prevState.module, imagesEnabled: true } };\r\n });\r\n } else {\r\n this.updateModuleFieldWithValue('imagesEnabled', false);\r\n this.setState((prevState) => {\r\n return { module: { ...prevState.module, imagesEnabled: false } };\r\n });\r\n }\r\n }\r\n\r\n updateModuleFromEvent = (evt) => {\r\n const changedValue = evt.target.checked;\r\n if (changedValue) {\r\n this.updateModuleFieldWithValue('chmsFeedsEnabled', true);\r\n if (this.props.calendar.feeds.length === 1) {\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n calendarFeeds: [this.props.calendar.feeds[0].url],\r\n },\r\n };\r\n });\r\n this.updateModuleFieldWithValue('calendarFeeds', [this.props.calendar.feeds[0].url]);\r\n }\r\n this.setState((prevState) => {\r\n return { module: { ...prevState.module, chmsFeedsEnabled: true } };\r\n });\r\n } else {\r\n this.updateModuleFieldWithValue('chmsFeedsEnabled', false);\r\n this.setState((prevState) => {\r\n return {\r\n module:\r\n { ...prevState.module, chmsFeedsEnabled: false, calendarFeeds: [] },\r\n };\r\n });\r\n }\r\n }\r\n\r\n connectIcalFeed = () => {\r\n if (this.state.module.icalFeedUrl !== null || this.state.module.icalFeedUrl !== '') this.updateModuleFieldWithValue('icalFeedUrl', this.state.module.icalFeedUrl);\r\n };\r\n\r\n disconnectIcalFeed = () => {\r\n this.updateModuleFieldWithValue('icalFeedUrl', '');\r\n this.setState((prevState) => { return { module: { ...prevState.module, icalFeedUrl: '' } }; });\r\n }\r\n\r\n isUnity(){\r\n const isUnity = localStorage.getItem('IsUnity');\r\n if (isUnity === 'true'){\r\n return true; \r\n }\r\n else{\r\n return false; \r\n }\r\n }\r\n checkForPeopleModule(){\r\n const modules = localStorage.getItem('ModulesData');\r\n const parsedModules = JSON.parse(modules); \r\n if (parsedModules !== null && parsedModules !== undefined){\r\n const hasPeople = parsedModules.find(e => e.name === 'People');\r\n if(hasPeople !== undefined){\r\n return true; \r\n }\r\n return false; \r\n } \r\n }\r\n disableCalendarFeedToggle(unity, people){\r\n if(unity === true && people === true){\r\n return false; \r\n }\r\n else if(unity === true && people === false){\r\n return true; \r\n }\r\n else{\r\n return !this.props.versions.select.chMSIntegrations; \r\n } \r\n }\r\n isToggleOn(unity,people){\r\n if(unity === true && people === true){\r\n return true; \r\n }\r\n else if(unity === true && people === false){\r\n return false; \r\n }\r\n else{\r\n return this.state.module.chmsFeedsEnabled; \r\n } \r\n }\r\n render() {\r\n const isUnity = this.isUnity(); \r\n const hasPeople = this.checkForPeopleModule(); \r\n const isDisabled = this.disableCalendarFeedToggle(isUnity, hasPeople);\r\n const isToggled = this.isToggleOn(isUnity, hasPeople); \r\n const previewCalendar = null;\r\n const chmsCalendarOptions = this.props.calendar.feeds\r\n .map((m) => { return { value: m.url, label: m.name }; });\r\n const selectedOptions = chmsCalendarOptions\r\n .filter((m) => { return this.state.module.calendarFeeds?.includes(m.value); });\r\n // Add these back when we add back live preview for Calendar\r\n // let activeCheckin = this.props.modules.data\r\n // .filter(module => module.moduleType === constants.ModuleType\r\n // .find(m => m.Name === 'Check-In').Id);\r\n // activeCheckin = activeCheckin.filter(module => module.enabled === true);\r\n const bodyForm = (\r\n \r\n \r\n \r\n\r\n \r\n
\r\n\r\n \r\n {i18n.t('modules.calendar.title')}
\r\n\r\n{i18n.t('modules.calendar.subtitle')}
\r\n\r\n\r\n\r\n {this.props.flags.results?.chMSIntegration\r\n && (\r\n \r\n \r\n {chmsCalendarOptions.length === 0\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 {i18n.t('modules.calendar.section2')}\r\n {' '}\r\n
\r\n
\r\n )}\r\n\r\n {this.props.flags.results?.chMSIntegration\r\n && (\r\n \r\n {i18n.t('modules.calendar.section2')}\r\n {' '}\r\n
\r\n \r\n
\r\n )}\r\n {chmsCalendarOptions.length === 1\r\n && (\r\n \r\n {chmsCalendarOptions[0].label}\r\n
\r\n )}\r\n {chmsCalendarOptions.length > 1\r\n && (\r\n \r\n
\r\n { (!this.props.modules.select.icalFeedUrl\r\n || this.props.modules.select.icalFeedUrl === '')\r\n ? (\r\n\r\n {i18n.t('modules.calendar.section3')}
\r\n\r\n {\r\n const target = e.target.value;\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n icalFeedUrl: target,\r\n },\r\n };\r\n });\r\n }}\r\n value={this.state.module.icalFeedUrl}\r\n autoFocus={false}\r\n dataqa=\"calendar-icalFeed\"\r\n />\r\n\r\n {/* eslint-disable-next-line react/button-has-type */}\r\n \r\n {i18n.t('connect')}\r\n \r\n
\r\n \r\n )\r\n : (\r\n\r\n \r\n \r\n
\r\n {/* eslint-disable-next-line react/button-has-type */}\r\n \r\n {i18n.t('disconnect')}\r\n \r\n
\r\n \r\n ) }\r\n \r\n
\r\n {/* eslint-disable-next-line react/button-has-type */}\r\n {this.state.module.icalFeedUrl}
\r\n\r\n\r\n {bodyForm}\r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CalendarModule);\r\n","export default __webpack_public_path__ + \"static/media/empty-pages.424e60c7.png\";","import React from 'react'; // eslint-disable-line\r\nimport Tooltip from 'rc-tooltip';\r\nimport SmallModal from './SmallModal';\r\nimport ValidatedInput from '../../components/forms/ValidatedInput';\r\nimport i18n from '../../i18n';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\nimport constants from '../../constants';\r\n\r\nexport default class AddEditContentModal extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { name: props.addEditItem.name, hasMenuItem: props.addEditItem.hasMenuItem, icon: this.props.icon };\r\n\r\n this.setName = this.setName.bind(this);\r\n this.setChecked = this.setChecked.bind(this);\r\n this.changeIcon = this.changeIcon.bind(this);\r\n }\r\n\r\n setName(e) {\r\n this.setState({ name: e.target.value });\r\n }\r\n\r\n setChecked(e) {\r\n this.setState({ hasMenuItem: e.target.checked });\r\n }\r\n\r\n changeIcon(icon) {\r\n this.setState({ icon });\r\n }\r\n\r\n render() {\r\n const title = this.props.isAdd ? i18n.t('pages.add-page') : i18n.t('pages.edit-page');\r\n const isValid = this.state.name && this.state.name.length > 0;\r\n const saveButton = (\r\n \r\n );\r\n const wrappedSaveButton = isValid\r\n ? saveButton\r\n : (\r\n \r\n \r\n { return this.setChecked(e); }}\r\n type=\"checkbox\"\r\n />\r\n \r\n \r\n {i18n.t('pages.add.has-menu-item')}\r\n \r\n \r\n
\r\n {this.props.userSelectedIcons && this.state.hasMenuItem\r\n && (\r\n \r\n 1 ? this.state.icon : constants.IconList.find((f) => { return f.value === 'file'; })} changeIcon={this.changeIcon} />\r\n
\r\n )}\r\n Navigation Icon
\r\n {' '}\r\n\r\n {wrappedSaveButton}\r\n \r\n
\r\n \r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Tiled'; }).Id && (\r\n
\r\n );\r\n }\r\n}","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport _actions from '../../actions';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport i18n from '../../i18n';\r\nimport Trash from '../../components/svg/Trash';\r\nimport CaptionTooltip from '../../components/common/CaptionTooltip';\r\nimport YesNoDialog from '../../components/common/YesNoDialog';\r\nimport DeleteDialog from '../../components/common/DeleteDialog';\r\nimport EmptyPages from '../../assets/images/empty-pages.png';\r\nimport constants from '../../constants';\r\nimport AddEditContentModal from '../modals/AddEditContentModal';\r\nimport LargeLoading from '../../components/svg/LargeLoading';\r\nimport SortablePageSectionsList from '../../components/pages/SortablePageSectionsList';\r\nimport PreviewPages from '../../components/preview/PreviewPages';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\nimport LargeModal from '../modals/LargeModal';\r\nimport SmallModal from '../modals/SmallModal';\r\n\r\nexport class PagesModule extends React.Component {\r\n static buildLinks(page) {\r\n switch (page.linksFrom.length) {\r\n case 0:\r\n return \r\n \r\n
\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'SlideOut'; }).Id && (\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n
\r\n \r\n {this.props.checkin\r\n &&
\r\n )}\r\n \r\n
\r\n {this.props.pageToEdit.name}
\r\n\r\n {this.props.sections && this.props.sections\r\n .map((s) => (\r\n
\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n \r\n {!s.ignoreTitle &&\r\n
\r\n ))}\r\n {s.name}
\r\n }\r\n \r\n {s.contents\r\n .map((c, i) => (\r\n \r\n \r\n ))\r\n }\r\n
\r\n \r\n {c.contentType === constants.ContentType\r\n .find((t) => (t.Name == \"Banner\")).Id && (\r\n
\r\n {\r\n c.contentType === constants.ContentType\r\n .find((t) => (t.Name == \"Divider\")).Id && (\r\n \r\n )\r\n }\r\n \r\n
\r\n )}\r\n {c.contentType === constants.ContentType\r\n .find((t) => (t.Name == \"Image & Text\")).Id && (\r\n \r\n
\r\n \r\n {c.bannerText}\r\n
\r\n \r\n
\r\n )}\r\n {c.contentType === constants.ContentType\r\n .find((t) => (t.Name == \"Text\")).Id && (\r\n \r\n
\r\n \r\n {c.bannerText}\r\n
\r\n \r\n \r\n {c.headerText}\r\n \r\n \r\n {c.subheaderText}\r\n \r\n \r\n {c.text}\r\n \r\n
\r\n \r\n
\r\n )}\r\n {c.contentType === constants.ContentType\r\n .find((t) => (t.Name == \"LinkButton\")).Id && (\r\n \r\n \r\n {c.headerText}\r\n \r\n
\r\n \r\n {c.subheaderText}\r\n
\r\n\r\n {c.text}\r\n
\r\n\r\n
\r\n )}\r\n {c.contentType === constants.ContentType\r\n .find((t) => (t.Name == \"Video\")).Id && (\r\n \r\n {c.appearanceType === 1 &&\r\n \r\n {c.text !== '' ? c.text : 'Link Text'}\r\n \r\n }\r\n {c.appearanceType === 2 &&\r\n
\r\n \r\n \r\n {c.text !== '' ? c.text : 'Button Text'}\r\n \r\n
\r\n }\r\n \r\n
\r\n )}\r\n \r\n {c.videoType !== 1 && c.videoType !== 2 && c.videoType !== 3\r\n && (\r\n
\r\n \r\n )}\r\n {c.videoType === 3\r\n && (\r\n \r\n )}\r\n {c.videoType === 1\r\n && (\r\n
\r\n {modules\r\n .sort((a, b) => (a.displayOrder > b.displayOrder))\r\n .map((md, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n )}\r\n Unassigned
;\r\n case 1:\r\n return {page.linksFrom[0]}
;\r\n case 2:\r\n return {`${page.linksFrom[0]}, ${page.linksFrom[1]}`}
;\r\n default: {\r\n const fullList = page.linksFrom.map((link) => { return `${link}\\u00A0`; }).slice(0, -1);\r\n return (\r\n {`${page.linksFrom[0]}, ${page.linksFrom.length - 1} More`}
\r\n Shows On: Unassigned
;\r\n case 1:\r\n return {`Shows On: ${page.linksFrom[0]}`}
;\r\n case 2:\r\n return {`Shows On: ${page.linksFrom[0]}, ${page.linksFrom[1]}`}
;\r\n default: {\r\n const fullList = `Shows On: ${page.linksFrom.map((link) => { return `${link}\\u00A0`; }).slice(0, -1)}`;\r\n return (\r\n {`${page.linksFrom[0]}, ${page.linksFrom.length - 1} More`}
\r\n \r\n
\r\n );\r\n const upsell = ({i18n.t('menu.pages')}
\r\n\r\n
\r\n Page limit exceeded
\r\n \r\n
\r\n );\r\n const table = (\r\n {i18n.t('menu.pages')}
\r\n{i18n.t('pages.empty-subtitle')}
\r\n\r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n const editPage = (\r\n <>\r\n {i18n.t('menu.pages')}
\r\n{i18n.t('pages.subtitle')}
\r\n\r\n
\r\n \r\n
\r\n {i18n.t('pages.name')}
\r\n {i18n.t('pages.links')}
\r\n \r\n \r\n
\r\n \r\n {this.state.filteredPageList.length > 0 && this.state.filteredPageList.map((item, index) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n {this.props.flags?.results?.userSelectedIcons && item.hasMenuItem && { return m.subType === item.id; })?.icon]}\r\n color=\"#616B7D\"\r\n />\r\n \r\n )}\r\n
\r\n {PagesModule.buildLinks(item)}\r\n { this.drillToPage(item); }} onKeyPress={() => { this.drillToPage(item); }} aria-label=\"Edit\" role=\"link\" tabIndex={0}>{item.name}
\r\n \r\n \r\n { this.drillToPage(item); }}\r\n >\r\n \r\n \r\n {/* eslint-disable-next-line */}\r\n {\r\n this.handleDeleteIcon(item);\r\n }}\r\n >\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.t('menu.pages')}
\r\n \r\n \r\n {\r\n this.handleDeleteIcon(this.state.pageToEdit);\r\n }}\r\n >\r\n \r\n \r\n {\r\n this.showEditPageModal(this.state.pageToEdit);\r\n }}\r\n >\r\n \r\n
\r\n \r\n {this.state.pageToEdit?.linksFrom && PagesModule.buildShowsOn(this.state.pageToEdit)}\r\n \r\n {' '}\r\n {this.state.pageToEdit?.linksFrom?.length > 0\r\n ?
\r\n
\r\n \r\n );\r\n const previewPages = (\r\n <>\r\n \r\n {' '}\r\n {this.state.pageToEdit?.linksFrom?.length > 0\r\n ? { return m.subType === this.state.pageToEdit.id; })?.icon]} color=\"#616B7D\" />\r\n : ''}\r\n {this.state.pageToEdit.name}\r\n
\r\n {i18n.t('pages.editor-subtitle')}
\r\n\r\n {this.state.showDeleteModal && deleteModal}\r\n {this.state.showAddEditModal && addEditPageModal}\r\n {this.state.loadOnce === false && loadingPage}\r\n {!(this.props.match.params.pageId?.length > 1) && this.state.loadOnce !== false && this.state.listOrEditor === 0 && (this.props.pages.data && this.props.pages.data.length === 1 ? emptyPage : table)}\r\n {this.state.loadOnce !== false && this.state.listOrEditor === 1 && editPage}\r\n {this.state.showUpsellModal && upsell}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PagesModule);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst SearchGlass = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default SearchGlass;\r\n","import React from 'react'; // eslint-disable-line\r\nimport i18n from '../../i18n';\r\nimport constants from '../../constants';\r\nimport PreviewModuleBottomMenuItem from './PreviewModuleBottomMenuItem';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport MenuArrow from '../svg/MenuArrow';\r\nimport SearchGlass from '../svg/SearchGlass';\r\nimport AddressBook from '../svg/AddressBook';\r\nimport Checkin from '../svg/preview/Checkin';\r\n\r\nclass PreviewPeople extends React.Component {\r\n render() {\r\n let modules = this.props.menuItems && this.props.menuItems.length > 0\r\n ? this.props.menuItems.filter((item) => { return item.displayOrder > -1; }) : [];\r\n modules = modules.sort((a, b) => { return a.displayOrder - b.displayOrder; });\r\n if (modules.length > 5 && this.props.menuStyle === 1) {\r\n modules = modules.slice(0, 4);\r\n modules.push({ displayOrder: 5, title: 'More', subType: 'more' });\r\n }\r\n return (\r\n\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default PreviewPeople;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport constants from '../../constants';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport EditInput from '../../components/forms/EditInput';\r\nimport GeneralSection from '../../components/common/GeneralSection';\r\nimport PreviewPeople from '../../components/preview/PreviewPeople';\r\nimport i18n from '../../i18n';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport DisplayOptionsBox from '../../components/forms/DisplayOptionsBox';\r\nimport ManagedInput from '../../components/forms/ManagedInput';\r\nimport PageBreak from '../../components/structure/PageBreak';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\n\r\nlet defaultTabs = [];\r\n\r\nexport class PeopleModule extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n\t\tthis.state = {\r\n\t\t\tmenuItem: {},\r\n\t\t\tmodule: {},\r\n showPreview: true,\r\n\t\t};\r\n\t\tthis.updateModuleFieldsWithValues = this.updateModuleFieldsWithValues.bind(this);\r\n\t\tthis.updateMenuItemFromEvent = this.updateMenuItemFromEvent.bind(this);\r\n\t\tthis.updateModuleFieldWithValue = this.updateModuleFieldWithValue.bind(this);\r\n\t\tthis.updateModuleEnableDirectory = this.updateModuleEnableDirectory.bind(this);\r\n\t\tthis.updateModuleTabsFromEvent = this.updateModuleTabsFromEvent.bind(this);\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n\t\tthis.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n\t\tthis.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId);\r\n\t\tthis.props.actions.getModuleByType(this.props.match.params.projectId, 9);\r\n\t\tdefaultTabs = [\r\n\t\t\t{\r\n\t\t\t\tname: 'directoryTabName',\r\n\t\t\t\tvalue: i18n.t('modules.people.section3.tabDefault'),\r\n\t\t\t},\r\n\t\t];\r\n\t}\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'People'; }).Id\r\n && this.props.modules.select.enabled) {\r\n if (this.props.alerts.data.length > 0 && this.props.alerts.data.find((m) => { return m.id === 'module-disabled'; })) {\r\n this.props.actions.clearAlert('module-disabled');\r\n }\r\n }\r\n if (!prevState.isLoaded) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'People'; }).Id\r\n && !this.props.modules.select.enabled) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.people.error1'),\r\n linkText: i18n.t('enableHere'),\r\n link: `/projects/${this.props.match.params.projectId}/modules/enable-modules`,\r\n view: '/modules/people',\r\n type: 'warning',\r\n id: 'module-disabled',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isLoaded: true });\r\n }\r\n }\r\n\r\n if ((!this.props.menuItems.inProgress\r\n && prevProps.menuItems.inProgress)\r\n || (!this.props.modules.inProgress\r\n && prevProps.modules.inProgress)) {\r\n let menuItem = this.props.menuItems.data !== []\r\n && typeof (this.props.modules.select.moduleType) === 'number'\r\n ? this.props.menuItems.data\r\n .find((mi) => {\r\n return mi.type === 1\r\n && parseInt(mi.subType, 10) === this.props.modules.select.moduleType;\r\n })\r\n : '';\r\n menuItem = menuItem || {};\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ menuItem });\r\n }\r\n if (!this.props.modules.inProgress && prevProps.modules.inProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ module: this.props.modules.select });\r\n }\r\n }\r\n\r\n updateMenuItemFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim().length > 0 ? evt.target.value.trim() : i18n.t('modules.people.people');\r\n if (changedValue !== '') {\r\n this.setState((prevState) => {\r\n return {\r\n menuItem: {\r\n ...prevState.menuItem,\r\n title: changedValue,\r\n },\r\n };\r\n });\r\n this.props.actions.updateMenuItemParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n 1,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n }\r\n\r\n updateModuleEnableDirectory(evt) {\r\n const changedValue = evt.target.checked;\r\n this.updateModuleFieldWithValue('directoryEnabled', changedValue);\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n directoryEnabled: changedValue,\r\n },\r\n };\r\n });\r\n }\r\n\r\n updateModuleFieldsWithValues(fields) {\r\n this.props.actions.updateModule(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n fields,\r\n );\r\n }\r\n\r\n\tupdateModuleFieldWithValue(field, val) {\r\n\t\tthis.props.actions.updateModuleParameter(\r\n\t\t\tthis.props.match.params.projectId,\r\n\t\t\tthis.state.module.moduleType,\r\n\t\t\tfield,\r\n\t\t\tval,\r\n\t\t);\r\n\t}\r\n\r\n\tupdateModuleTabsFromEvent(evt) {\r\n\t\tconst fieldName = evt.target.name;\r\n\t\tconst changedValue = evt.target.value.trim();\r\n\t\tif (changedValue !== '') {\r\n\t\t\tconst newState = this.state.module;\r\n\t\t\tnewState[fieldName] = changedValue;\r\n\t\t\tthis.setState({ module: { ...newState } });\r\n\t\t\tthis.updateModuleFieldWithValue(fieldName, changedValue);\r\n\t\t} else {\r\n\t\t\tconst fieldData = defaultTabs.find((tab) => { return tab.name === fieldName; });\r\n\t\t\tconst newState = this.state.module;\r\n\t\t\tnewState[fieldName] = fieldData.value;\r\n\t\t\tthis.setState({ module: { ...newState } });\r\n\t\t\tthis.updateModuleFieldWithValue(fieldName, fieldData.value);\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tlet previewPeople = null;\r\n\t\tlet bodyForm = '';\r\n\t\tif (this.state.module.enabled) {\r\n\t\t\tlet activeCheckin = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Check-In'; }).Id; });\r\n\t\t\tactiveCheckin = activeCheckin.filter((module) => { return module.enabled === true; });\r\n\t\t\tpreviewPeople = (\r\n\t\t\t\t\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Tiled'; }).Id && (\r\n
\r\n \r\n \r\n
\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'SlideOut'; }).Id && (\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\t\t\t\t\t\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n
\r\n\t\t\t\t\t\t\t\r\n {this.props.checkin\r\n &&
\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{this.props.menuItem?.title}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n\r\n \r\n\t\t\t\t\t\t\t\t
\r\n\r\n \r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t64 Individuals
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{/*
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tMR
\r\n\t\t\t\t\t\t\t\t\tMike Rodriguez
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tJL
\r\n\t\t\t\t\t\t\t\t\tJason Lipton
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tMT
\r\n\t\t\t\t\t\t\t\t\tMatthew Thompson
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tJR
\r\n\t\t\t\t\t\t\t\t\tJonathan Rhee
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tRD
\r\n\t\t\t\t\t\t\t\t\tRay Dusterhoff
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\tJA
\r\n\t\t\t\t\t\t\t\t\tJohn Anderson
\r\n\t\t\t\t\t\t\t\t\t\r\n\r\n {modules\r\n .sort((a, b) => {\r\n return a.displayOrder > b.displayOrder;\r\n })\r\n .map((md, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n )}\r\n \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{i18n.t('modules.people.title')}\r\n\t\t\t\t\t\r\n\t\t\t\t\t{this.props.flags.results?.scPeople\r\n\t\t\t\t\t\t&& (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{i18n.t('modules.people.subtitle')}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{this.props.flags.results?.userSelectedIcons\r\n\t\t\t\t\t\t\t\t&& (\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t);\r\n\t\t}\r\n\r\n return (\r\n \r\n {bodyForm}\r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PeopleModule);\r\n","import React from 'react'; // eslint-disable-line\r\nimport i18n from '../../i18n';\r\nimport constants from '../../constants';\r\nimport PreviewModuleBottomMenuItem from './PreviewModuleBottomMenuItem';\r\nimport MenuArrow from '../svg/MenuArrow';\r\nimport SearchGlass from '../svg/SearchGlass';\r\nimport Checkin from '../svg/preview/Checkin';\r\n\r\nclass PreviewGroups extends React.Component {\r\n render() {\r\n let modules = this.props.menuItems && this.props.menuItems.length > 0\r\n ? this.props.menuItems.filter((item) => { return item.displayOrder > -1; }) : [];\r\n modules = modules.sort((a, b) => { return a.displayOrder - b.displayOrder; });\r\n if (modules.length > 5 && this.props.menuStyle === 1) {\r\n modules = modules.slice(0, 4);\r\n modules.push({ displayOrder: 5, title: 'More', subType: 'more' });\r\n }\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default PreviewGroups;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport constants from '../../constants';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport EditInput from '../../components/forms/EditInput';\r\nimport GeneralSection from '../../components/common/GeneralSection';\r\nimport PreviewGroups from '../../components/preview/PreviewGroups';\r\nimport i18n from '../../i18n';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport DisplayOptionsBox from '../../components/forms/DisplayOptionsBox';\r\nimport ManagedInput from '../../components/forms/ManagedInput';\r\nimport PageBreak from '../../components/structure/PageBreak';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\n\r\nlet defaultTabs = [];\r\n\r\nexport class GroupsModule extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n menuItem: {},\r\n module: {},\r\n showPreview: true,\r\n };\r\n this.updateModuleFieldsWithValues = this.updateModuleFieldsWithValues.bind(this);\r\n this.updateMenuItemFromEvent = this.updateMenuItemFromEvent.bind(this);\r\n this.updateModuleFieldWithValue = this.updateModuleFieldWithValue.bind(this);\r\n this.updateModuleEnableGroups = this.updateModuleEnableGroups.bind(this);\r\n this.updateModuleEnableGroupFinder = this.updateModuleEnableGroupFinder.bind(this);\r\n this.updateModuleTabsFromEvent = this.updateModuleTabsFromEvent.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId);\r\n this.props.actions.getModuleByType(this.props.match.params.projectId, 11);\r\n defaultTabs = [\r\n {\r\n name: 'groupsTabName',\r\n value: i18n.t('modules.groups.section2.tabDefault'),\r\n },\r\n {\r\n name: 'allGroupsTabName',\r\n value: i18n.t('modules.groups.section3.tabDefault'),\r\n },\r\n ];\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Groups'; }).Id\r\n && this.props.modules.select.enabled) {\r\n if (this.props.alerts.data.length > 0 && this.props.alerts.data.find((m) => { return m.id === 'module-disabled'; })) {\r\n this.props.actions.clearAlert('module-disabled');\r\n }\r\n }\r\n if (!prevState.isLoaded) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Groups'; }).Id\r\n && !this.props.modules.select.enabled) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.groups.error1'),\r\n linkText: i18n.t('enableHere'),\r\n link: `/projects/${this.props.match.params.projectId}/modules/enable-modules`,\r\n view: '/modules/groups',\r\n type: 'warning',\r\n id: 'module-disabled',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isLoaded: true });\r\n }\r\n }\r\n\r\n if ((!this.props.menuItems.inProgress\r\n && prevProps.menuItems.inProgress)\r\n || (!this.props.modules.inProgress\r\n && prevProps.modules.inProgress)) {\r\n let menuItem = this.props.menuItems.data.length > 0\r\n && typeof (this.props.modules.select.moduleType) === 'number'\r\n ? this.props.menuItems.data\r\n .find((mi) => {\r\n return mi.type === 1\r\n && parseInt(mi.subType, 10) === this.props.modules.select.moduleType;\r\n })\r\n : '';\r\n menuItem = menuItem || {};\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ menuItem });\r\n }\r\n if (!this.props.modules.inProgress && prevProps.modules.inProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ module: this.props.modules.select });\r\n }\r\n }\r\n\r\n updateMenuItemFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim().length > 0 ? evt.target.value.trim() : i18n.t('modules.groups.groups');\r\n if (changedValue !== '') {\r\n this.setState((prevState) => {\r\n return {\r\n menuItem: {\r\n ...prevState.menuItem,\r\n title: changedValue,\r\n },\r\n };\r\n });\r\n this.props.actions.updateMenuItemParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n 1,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n }\r\n\r\n updateModuleEnableGroups(evt) {\r\n const changedValue = evt.target.checked;\r\n this.updateModuleFieldWithValue('groupsEnabled', changedValue);\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n groupsEnabled: changedValue,\r\n },\r\n };\r\n });\r\n }\r\n\r\n updateModuleEnableGroupFinder(evt) {\r\n const changedValue = evt.target.checked;\r\n this.updateModuleFieldWithValue('groupfinderEnabled', changedValue);\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n groupFinderEnabled: changedValue,\r\n },\r\n };\r\n });\r\n }\r\n\r\n updateModuleFieldsWithValues(fields) {\r\n this.props.actions.updateModule(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n fields,\r\n );\r\n }\r\n\r\n updateModuleFieldWithValue(field, val) {\r\n this.props.actions.updateModuleParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n field,\r\n val,\r\n );\r\n }\r\n\r\n updateModuleTabsFromEvent(evt) {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim();\r\n if (changedValue !== '') {\r\n const newState = this.state.module;\r\n newState[fieldName] = changedValue;\r\n this.setState({ module: { ...newState } });\r\n this.updateModuleFieldWithValue(fieldName, changedValue);\r\n } else {\r\n const fieldData = defaultTabs.find((tab) => { return tab.name === fieldName; });\r\n const newState = this.state.module;\r\n newState[fieldName] = fieldData.value;\r\n this.setState({ module: { ...newState } });\r\n this.updateModuleFieldWithValue(fieldName, fieldData.value);\r\n }\r\n }\r\n\r\n render() {\r\n let previewGroups = null;\r\n let bodyForm = '';\r\n if (this.state.module.enabled) {\r\n let activeCheckin = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Check-In'; }).Id; });\r\n activeCheckin = activeCheckin.filter((module) => { return module.enabled === true; });\r\n previewGroups = (\r\n \r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Tiled'; }).Id && (\r\n
\r\n \r\n \r\n
\r\n )}\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'SlideOut'; }).Id && (\r\n \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.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n
\r\n \r\n {this.props.checkin\r\n &&
\r\n )}\r\n \r\n
\r\n {this.props.menuItem?.title}
\r\n {this.props.flags.results?.scGroups\r\n && (\r\n\r\n
\r\n )}\r\n {i18n.t('modules.groups.section2.tabDefault')}
\r\n {i18n.t('modules.groups.section3.tabDefault')}
\r\n \r\n {this.props.flags.results?.scGroups\r\n && (\r\n
\r\n {this.props.menuStyle === constants.MenuStyle.find((c) => { return c.Name === 'Bottom'; }).Id && (\r\n\r\n \r\n
\r\n )}\r\n\r\n 3 Groups
\r\n {this.props.module.groupFinderEnabled\r\n && (\r\n <>\r\n Join a Group
\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n Santa Ana Small Group\r\n
\r\n \r\n Leaders: Mike Lee\r\n
\r\n \r\n
\r\n \r\n 13\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Soccer League\r\n
\r\n \r\n Leaders: Tom Grayson\r\n
\r\n \r\n
\r\n \r\n 23\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Wednesday Morning Men's Study\r\n
\r\n \r\n Leaders: Mark Rodriguez, Jason Lipton\r\n
\r\n \r\n
\r\n \r\n 93\r\n
\r\n \r\n
\r\n \r\n\r\n {modules\r\n .sort((a, b) => {\r\n return a.displayOrder > b.displayOrder;\r\n })\r\n .map((md, i) => {\r\n /* eslint-disable */\r\n return (\r\n
\r\n\r\n )}\r\n \r\n \r\n {i18n.t('modules.groups.title')}\r\n \r\n\r\n {this.props.flags.results?.scGroups\r\n && (\r\n \r\n {i18n.t('modules.groups.subtitle')}\r\n \r\n )}\r\n\r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n {i18n.t('modules.groups.section2.groupfinderHelp1')}\r\n
\r\n {bodyForm}\r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GroupsModule);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Reset = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Reset;\r\n","import React from 'react'; // eslint-disable-line\r\nimport reactCSS from 'reactcss';\r\nimport { ChromePicker } from 'react-color';\r\nimport hexRgb from 'hex-rgb';\r\nimport i18n from '../../i18n';\r\nimport Reset from '../svg/Reset';\r\n\r\nclass ColorPicker extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.props = props;\r\n this.state = {\r\n displayName: this.props.name,\r\n pickerIndex: this.props.csIndex,\r\n displayColorPicker: false,\r\n color: {\r\n hex: this.props.hex,\r\n r: 0,\r\n g: 0,\r\n b: 0,\r\n a: 1,\r\n },\r\n };\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (prevProps.hex === prevState.color.hex && this.props.hex !== prevProps.hex) {\r\n this.setColorForPicker(this.props);\r\n }\r\n }\r\n\r\n handleReset = () => {\r\n this.props.saveCustomColors(this.state.pickerIndex, this.props.reset);\r\n }\r\n\r\n setColorForPicker = (nextProps) => {\r\n this.setState({\r\n color: {\r\n hex: nextProps.hex,\r\n r: 0,\r\n g: 0,\r\n b: 0,\r\n a: 1,\r\n },\r\n });\r\n }\r\n\r\n handleClick = () => {\r\n this.setState((prevState) => {\r\n return { displayColorPicker: !prevState.displayColorPicker };\r\n });\r\n };\r\n\r\n handleClose = () => {\r\n this.props.saveCustomColors(this.state.pickerIndex, this.state.color.hex);\r\n this.setState({ displayColorPicker: false });\r\n };\r\n\r\n handleChange = (color) => {\r\n this.setState({ color: color.rgb });\r\n this.setState({ color: { hex: color.hex } });\r\n };\r\n\r\n getRGBValues = (hex, i) => {\r\n const stringHex = `${hex}`;\r\n const rgb = hexRgb(stringHex);\r\n return rgb[i];\r\n }\r\n\r\n render() {\r\n const styles = reactCSS({\r\n default: {\r\n color: {\r\n borderColor: `rgba(${this.getRGBValues(this.state.color.hex, 0)}, ${this.getRGBValues(this.state.color.hex, 1)}, ${this.getRGBValues(this.state.color.hex, 2)}, 1)`,\r\n background: `rgba(${this.getRGBValues(this.state.color.hex, 0)}, ${this.getRGBValues(this.state.color.hex, 1)}, ${this.getRGBValues(this.state.color.hex, 2)}, 1)`,\r\n },\r\n swatch: {\r\n padding: '5px',\r\n background: '#fff',\r\n borderRadius: '1px',\r\n boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\r\n display: 'inline-block',\r\n cursor: 'pointer',\r\n },\r\n popover: {\r\n position: 'absolute',\r\n zIndex: '2',\r\n top: '35px',\r\n right: '1px',\r\n },\r\n cover: {\r\n position: 'fixed',\r\n top: '0px',\r\n right: '0px',\r\n bottom: '0px',\r\n left: '0px',\r\n },\r\n },\r\n });\r\n\r\n return (\r\n {this.state.displayName}
\r\n\r\n {this.state.color.hex}\r\n
\r\n\r\n {/* eslint-disable-next-line */}\r\n { return n.Name === 'Dark'; }).Id\r\n ? 'dark-preview' : 'light-preview'\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 PreviewColors;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport ColorPicker from '../../components/common/colorPicker';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport PreviewColors from '../../components/preview/PreviewColors';\r\nimport constants from '../../constants';\r\nimport _actions from '../../actions';\r\nimport i18n from '../../i18n';\r\nimport LargeLoading from '../../components/svg/LargeLoading';\r\n\r\nclass Colors extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.props = props;\r\n this.saveCustomColors = this.saveCustomColors.bind(this);\r\n this.setDefaultLightTheme = this.setDefaultLightTheme.bind(this);\r\n this.setLightTheme = this.setLightTheme.bind(this);\r\n this.setDarkTheme = this.setDarkTheme.bind(this);\r\n this.resetDefaultTemplate = this.resetDefaultTemplate.bind(this);\r\n\r\n this.state = {\r\n isLoading: true,\r\n showPreview: true,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getTemplates();\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (typeof prevProps.versions.select.id === 'undefined' || typeof prevProps.templates.data[0] === 'undefined') {\r\n if (this.props.versions.select.id && this.props.templates.data[0]) {\r\n this.props.actions.getTemplate(\r\n this.props.templates,\r\n this.props.versions.select.themeId,\r\n );\r\n }\r\n }\r\n\r\n if ((typeof prevProps.templates.select === 'undefined' || prevProps.templates.select === {}) || typeof prevProps.versions.select.id === 'undefined') {\r\n if (typeof this.props.templates.select !== 'undefined' && typeof this.props.versions.select.id !== 'undefined') {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isLoading: false });\r\n }\r\n }\r\n }\r\n\r\n setDefaultLightTheme() {\r\n const template = this.props.templates.select;\r\n const version = this.props.versions.select;\r\n version.actionColor = template.lightColors.defaultActionColor;\r\n version.accentColor = template.lightColors.defaultAccentColor;\r\n version.primaryText = template.lightColors.defaultPrimaryTextColor;\r\n version.secondaryText = template.lightColors.defaultSecondaryTextColor;\r\n version.baseColorTheme = constants.ColorBaseTheme.find((n) => { return n.Name === 'Light'; }).Id;\r\n\r\n this.props.actions.updateProjectVersion(\r\n this.props.versions.select.projectId,\r\n version,\r\n );\r\n }\r\n\r\n setLightTheme() {\r\n const template = this.props.templates.select;\r\n const version = this.props.versions.select;\r\n version.baseColorTheme = constants.ColorBaseTheme.find((n) => { return n.Name === 'Light'; }).Id;\r\n if (version.actionColor.toUpperCase() === template.darkColors.defaultActionColor) {\r\n version.actionColor = template.lightColors.defaultActionColor;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'actionColor',\r\n version.actionColor,\r\n );\r\n }\r\n if (version.accentColor.toUpperCase() === template.darkColors.defaultAccentColor) {\r\n version.accentColor = template.lightColors.defaultAccentColor;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'accentColor',\r\n version.accentColor,\r\n );\r\n }\r\n if (version.primaryText.toUpperCase() === template.darkColors.defaultPrimaryTextColor) {\r\n version.primaryText = template.lightColors.defaultPrimaryTextColor;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'primaryText',\r\n version.primaryText,\r\n );\r\n }\r\n if (version.secondaryText.toUpperCase() === template.darkColors.defaultSecondaryTextColor) {\r\n version.secondaryText = template.lightColors.defaultSecondaryTextColor;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'secondaryText',\r\n version.secondaryText,\r\n );\r\n }\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'baseColorTheme',\r\n version.baseColorTheme,\r\n );\r\n }\r\n\r\n setDarkTheme() {\r\n const version = this.props.versions.select;\r\n const template = this.props.templates.select;\r\n version.baseColorTheme = constants.ColorBaseTheme.find((n) => { return n.Name === 'Dark'; }).Id;\r\n if (version.actionColor.toUpperCase() === template.lightColors.defaultActionColor) {\r\n version.actionColor = template.darkColors.defaultActionColor;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'actionColor',\r\n version.actionColor,\r\n );\r\n }\r\n if (version.accentColor.toUpperCase() === template.lightColors.defaultAccentColor) {\r\n version.accentColor = template.darkColors.defaultAccentColor;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'accentColor',\r\n version.accentColor,\r\n );\r\n }\r\n if (version.primaryText.toUpperCase() === template.lightColors.defaultPrimaryTextColor) {\r\n version.primaryText = template.darkColors.defaultPrimaryTextColor;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'primaryText',\r\n version.primaryText,\r\n );\r\n }\r\n if (version.secondaryText.toUpperCase()\r\n === template.lightColors.defaultSecondaryTextColor) {\r\n version.secondaryText = template.darkColors.defaultSecondaryTextColor;\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'secondaryText',\r\n version.secondaryText,\r\n );\r\n }\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'baseColorTheme',\r\n version.baseColorTheme,\r\n );\r\n }\r\n\r\n resetDefaultTemplate(colorType) {\r\n const version = this.props.versions.select;\r\n const template = this.props.templates.select;\r\n\r\n if (typeof template === 'undefined' || !template.lightColors) {\r\n return '';\r\n }\r\n const colorSet = constants.ColorBaseTheme\r\n .find((n) => { return n.Id === version.baseColorTheme; }).Name;\r\n switch (colorSet) {\r\n case 'Dark':\r\n switch (colorType) {\r\n case 'ACTION COLOR':\r\n return template.darkColors.defaultActionColor;\r\n\r\n case 'ACCENT COLOR':\r\n return template.darkColors.defaultAccentColor;\r\n\r\n case 'PRIMARY TEXT':\r\n return template.darkColors.defaultPrimaryTextColor;\r\n\r\n case 'SECONDARY TEXT':\r\n return template.darkColors.defaultSecondaryTextColor;\r\n\r\n default:\r\n return '';\r\n }\r\n case 'Light':\r\n switch (colorType) {\r\n case 'ACTION COLOR':\r\n return template.lightColors.defaultActionColor;\r\n\r\n case 'ACCENT COLOR':\r\n return template.lightColors.defaultAccentColor;\r\n\r\n case 'PRIMARY TEXT':\r\n return template.lightColors.defaultPrimaryTextColor;\r\n\r\n case 'SECONDARY TEXT':\r\n return template.lightColors.defaultSecondaryTextColor;\r\n\r\n default:\r\n return '';\r\n }\r\n\r\n default:\r\n return '';\r\n }\r\n }\r\n\r\n saveCustomColors(picker, pickerValue) {\r\n const version = this.props.versions.select;\r\n let truncd = '';\r\n switch (picker) {\r\n case 1:\r\n version.actionColor = `${pickerValue}`;\r\n truncd = version.actionColor.substr(1, 6);\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'actionColor',\r\n truncd,\r\n );\r\n\r\n break;\r\n case 2:\r\n version.accentColor = `${pickerValue}`;\r\n truncd = version.accentColor.substr(1, 6);\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'accentColor',\r\n truncd,\r\n );\r\n\r\n break;\r\n case 3:\r\n version.primaryText = `${pickerValue}`;\r\n truncd = version.primaryText.substr(1, 6);\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'primaryText',\r\n truncd,\r\n );\r\n\r\n break;\r\n case 4:\r\n version.secondaryText = `${pickerValue}`;\r\n truncd = version.secondaryText.substr(1, 6);\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.versions.select.projectId,\r\n 'secondaryText',\r\n truncd,\r\n );\r\n\r\n break;\r\n default: return 0;\r\n }\r\n return 0;\r\n }\r\n\r\n render() {\r\n const version = this.props.versions.select;\r\n const previewColors = (\r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n\r\n \r\n
\r\n \r\n \r\n {i18n.t('previews.colors.featured')}\r\n \r\n \r\n {i18n.t('previews.colors.featured-title')}\r\n \r\n\r\n
\r\n \r\n \r\n {i18n.t('previews.colors.date')}\r\n \r\n
\r\n\r\n \r\n \r\n {i18n.t('previews.colors.body1')}\r\n \r\n \r\n {i18n.t('previews.colors.body2')}\r\n \r\n
\r\n \r\n \r\n {i18n.t('previews.colors.button')}\r\n
\r\n \r\n
\r\n );\r\n color2 = (\r\n \r\n
\r\n );\r\n theme = (\r\n \r\n
\r\n );\r\n } else {\r\n theme = ({i18n.t('colors.theme')}
\r\n\r\n
\r\n \r\n { return this.setLightTheme(); }} defaultChecked={version.baseColorTheme === constants.ColorBaseTheme.find((n) => { return n.Name === 'Light'; }).Id} tabIndex=\"0\" className=\"hidden\" />\r\n \r\n
\r\n \r\n { return this.setDarkTheme(); }} defaultChecked={version.baseColorTheme === constants.ColorBaseTheme.find((n) => { return n.Name === 'Dark'; }).Id} tabIndex=\"0\" className=\"hidden\" />\r\n \r\n
\r\n \r\n
\r\n );\r\n\r\n return (\r\n {i18n.t('colors.header')}
\r\n{i18n.t('colors.subtitle')}
\r\n\r\n\r\n
\r\n\r\n {i18n.t('colors.section1')}
\r\n\r\n {theme}\r\n
\r\n \r\n
\r\n\r\n {i18n.t('colors.section2')}
\r\n {color}\r\n\r\n
\r\n {i18n.t('colors.section3')}
\r\n {color2}\r\n\r\n {form}\r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n versions: state.versions,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Colors);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Promote = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Promote;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport moment from 'moment';\r\nimport { bindActionCreators } from 'redux';\r\nimport { Link } from 'react-router-dom';\r\nimport _actions from '../../actions';\r\nimport YesNoDialog from '../../components/common/YesNoDialog';\r\nimport DeleteDialog from '../../components/common/DeleteDialog';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport ErrorList from '../../components/status/ErrorList';\r\nimport PreviewAppLinks from '../../components/common/PreviewAppLinks';\r\nimport PreviewLogo from '../../components/preview/PreviewLogo';\r\nimport i18n from '../../i18n';\r\nimport Promote from '../../components/svg/Promote';\r\n\r\nclass Results extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.errors = [];\r\n this.state = {\r\n projectScanned: false,\r\n scanFailed: false,\r\n publishFailed: false,\r\n confirmPublish: false,\r\n showPreview: true,\r\n };\r\n this.publishApp = this.publishApp.bind(this);\r\n this.openConfirmDialog = this.openConfirmDialog.bind(this);\r\n this.closeConfirmDialog = this.closeConfirmDialog.bind(this);\r\n this.publishButton = this.publishButton.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getProject(this.props.match.params.projectId);\r\n this.props.actions.checkProjectConfig(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n let stateObj = {};\r\n if (!prevState.loaded && this.props.versions.select.id) {\r\n stateObj.loaded = true;\r\n stateObj.changes = this.props.versions.select.changes;\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState(stateObj);\r\n }\r\n if (this.props.proj_conf.projectScanned && !prevProps.proj_conf.projectScanned) {\r\n stateObj = {\r\n ...stateObj,\r\n projectScanned: true,\r\n scanFailed: this.props.proj_conf.scanFailed,\r\n };\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState(stateObj);\r\n } else if (this.props.proj_conf.publishFailed && !prevProps.proj_conf.publishFailed) {\r\n stateObj = {\r\n ...stateObj,\r\n publishFailed: true,\r\n };\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState(stateObj);\r\n }\r\n }\r\n\r\n openConfirmDialog() {\r\n this.setState({ confirmPublish: true });\r\n }\r\n\r\n closeConfirmDialog() {\r\n this.setState({ confirmPublish: false });\r\n }\r\n\r\n publishApp() {\r\n // eslint-disable-next-line react/destructuring-assignment\r\n this.props.actions.publishProject(\r\n this.props.match.params.projectId,\r\n this.props.profiles.data.givingChurchId,\r\n );\r\n this.closeConfirmDialog();\r\n }\r\n\r\n publishButton() {\r\n const live = this.props.projects.data.filter((project) => { return project.liveVersion; });\r\n const liveBool = live.length > 0;\r\n if (!liveBool || this.props.projects.selected.liveVersion) {\r\n this.publishApp();\r\n } else {\r\n this.openConfirmDialog();\r\n }\r\n }\r\n\r\n render() {\r\n const version = this.props.versions.select;\r\n this.errors = this.props.proj_conf.data ? this.props.proj_conf.data : [];\r\n const address = `${this.props.versions.select.churchStreetAddress || ''} ${this.props.versions.select.churchCity || ''}, ${this.props.versions.select.churchState || ''} ${this.props.versions.select.churchZip || ''}`;\r\n const logoPath = version.logoImage?.imagePath;\r\n const isTrial = localStorage.getItem('IsTrial');\r\n let publishConfirmModal = '';\r\n if (this.state.confirmPublish) {\r\n publishConfirmModal = (\r\n \r\n {(!this.props.versions.select.sameAsLive && newStatus) && (\r\n \r\n {' '}\r\n {i18n.t('status.results.empty.help')}\r\n \r\n {/*
\r\n )}\r\n {(!this.props.versions.select.sameAsLive\r\n && this.errors.length > 0)\r\n && this.state.projectScanned\r\n && !this.state.scanFailed\r\n && !newStatus\r\n && (\r\n \r\n \r\n {i18n.t('status.results.empty.header')}\r\n \r\n\r\n \r\n {i18n.t('status.results.empty.subtitle')}\r\n \r\n\r\n \r\n {i18n.t('status.results.empty.subtitle2')}\r\n \r\n \r\n \r\n {/* eslint-disable-next-line react/button-has-type */}\r\n \r\n {' '}\r\n {i18n.t('status.results.empty.button')}\r\n \r\n \r\n
\r\n \r\n \r\n {i18n.t('status.results.problems.header')}\r\n \r\n\r\n \r\n {i18n.t('status.results.problems.subtitle1a')}\r\n \r\n {i18n.t('status.results.problems.subtitle1blue')}\r\n \r\n {' '}\r\n {i18n.t('status.results.problems.subtitle1c')}\r\n \r\n\r\n \r\n {i18n.t('status.results.problems.subtitle2')}\r\n \r\n\r\n
\r\n )}\r\n {(!this.props.versions.select.sameAsLive\r\n && this.errors.length === 0)\r\n && this.state.projectScanned\r\n && !this.state.scanFailed\r\n && !this.state.publishFailed\r\n && (\r\n\r\n \r\n\r\n \r\n {i18n.t('status.results.success.subtitle1a')}\r\n
\r\n {i18n.t('status.results.success.subtitle1b')}\r\n\r\n {i18n.t('status.results.success.subtitle1blue')}\r\n \r\n \r\n\r\n \r\n {i18n.t('status.results.success.subtitle2')}\r\n \r\n
\r\n )}\r\n\r\n {((!this.props.versions.select.sameAsLive\r\n && this.state.projectScanned\r\n && this.state.scanFailed)\r\n || (this.state.publishFailed))\r\n && (\r\n Great Job!
\r\n\r\n\r\n {i18n.t('status.results.success.subtitle1b')}\r\n
\r\n {/* eslint-disable-next-line react/button-has-type */}\r\n \r\n {i18n.t('status.results.success.button')}\r\n \r\n
\r\n\r\n {/* \r\n\r\n \r\n {i18n.t('status.results.error.header')}\r\n \r\n\r\n \r\n {i18n.t('status.results.error.subtitle1')}\r\n \r\n\r\n \r\n {i18n.t('status.results.error.subtitle2')}\r\n \r\n\r\n
\r\n )}\r\n {this.props.versions.select.sameAsLive && (\r\n\r\n \r\n\r\n \r\n {i18n.t('status.results.live.header')}\r\n \r\n\r\n \r\n {i18n.t('status.results.live.subtitle1')}\r\n \r\n\r\n \r\n {i18n.t('status.results.live.subtitle2')}\r\n \r\n\r\n \r\n {i18n.t('status.results.live.subtitle3')}\r\n \r\n \r\n\r\n
\r\n - \r\n
- {i18n.t('status.results.live.list1')} \r\n
- {i18n.t('status.results.live.list2')} \r\n
- {i18n.t('status.results.live.list3')} \r\n
- {i18n.t('status.results.live.list4')} \r\n
\r\n \r\n {/* eslint-disable-next-line react/button-has-type */}\r\n \r\n \r\n \r\n {' '}\r\n {i18n.t('status.results.live.promote-button')}\r\n \r\n \r\n \r\n
\r\n\r\n \r\n )}\r\n\r\n \r\n {publishConfirmModal}\r\n
\r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Results);\r\n","export default __webpack_public_path__ + \"static/media/menu1.fb3369c2.png\";","export default __webpack_public_path__ + \"static/media/menu2.f83e19fa.png\";","export default __webpack_public_path__ + \"static/media/menu3.52cd751f.png\";","import React from 'react'; // eslint-disable-line\r\nimport i18n from '../../i18n';\r\nimport Menu1 from '../../assets/images/menu1.png';\r\nimport Menu2 from '../../assets/images/menu2.png';\r\nimport Menu3 from '../../assets/images/menu3.png';\r\n\r\nclass MenuStyleList extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selectedMenuStyle: this.props.selectedMenuStyle,\r\n };\r\n this.handleClick = this.handleClick.bind(this);\r\n }\r\n\r\n handleClick(menuStyle) {\r\n this.setState({\r\n selectedMenuStyle: menuStyle,\r\n });\r\n\r\n if (this.props.onChange) {\r\n this.props.onChange(menuStyle);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default MenuStyleList;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Grabber = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Grabber;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport { Draggable } from 'react-beautiful-dnd';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport EditableLabel from '../forms/EditableLabel';\r\nimport Grabber from '../svg/Grabber';\r\nimport UserSelectedIconSelect from '../pages/UserSelectedIconSelect';\r\n\r\nexport class EditSortableMenuItem extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.menuItemTitleChanged = this.menuItemTitleChanged.bind(this);\r\n this.menuItemChanged = this.menuItemChanged.bind(this);\r\n this.switchState = this.switchState.bind(this);\r\n this.getPlaceholder = this.getPlaceholder.bind(this);\r\n this.state = {\r\n inputEditState: false,\r\n };\r\n }\r\n\r\n getPlaceholder() {\r\n let placeholder = this.props.menuItemsMetadata\r\n .find((mt) => {\r\n return mt.Id.toString() === this.props.menuItem.subType;\r\n })?.Name;\r\n if (!placeholder) {\r\n const discoverId = this.props.modules?.data.find((mt) => {\r\n return mt.moduleType === 1;\r\n })?.pageId;\r\n placeholder = discoverId === this.props.menuItem.subType ? 'Discover' : 'Custom Page';\r\n }\r\n return placeholder;\r\n }\r\n\r\n menuItemTitleChanged(e) {\r\n if (e.target.value !== '') {\r\n this.props.menuItem.title = e.target.value;\r\n this.menuItemChanged('title', e.target.value);\r\n } else {\r\n this.props.menuItem.title = this.getPlaceholder().substring(0, 11);\r\n this.menuItemChanged('title', this.getPlaceholder().substring(0, 11));\r\n }\r\n }\r\n\r\n menuItemChanged(field, val) {\r\n if (this.props.onChange) {\r\n this.props.onChange(field, val, this.props.menuItem);\r\n }\r\n }\r\n\r\n switchState(state) {\r\n this.setState({ inputEditState: state });\r\n }\r\n\r\n render() {\r\n const {\r\n className,\r\n isOver,\r\n } = this.props;\r\n let cssClass = className;\r\n if (isOver) {\r\n cssClass = `${cssClass} sortable-ghost`;\r\n }\r\n const placeholder = this.getPlaceholder();\r\n return (\r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n \r\n {i18n.t('menu-styles.bottom')}\r\n \r\n
\r\n\r\n \r\n 
\r\n \r\n
\r\n \r\n \r\n {i18n.t('menu-styles.slide')}\r\n \r\n
\r\n\r\n \r\n 
\r\n \r\n
\r\n\r\n \r\n \r\n {i18n.t('menu-styles.tiled')}\r\n \r\n
\r\n\r\n \r\n \r\n \r\n {this.props.userSelectedIcons &&
\r\n \r\n \r\n \r\n );\r\n }}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default EditSortableMenuItem;\r\n","import React, { Component } from 'react';\r\nimport { DragDropContext, Droppable } from 'react-beautiful-dnd';\r\nimport EditSortableMenuItem from './editSortableMenuItem';\r\nimport constants from '../../constants';\r\nimport { filterCheckInFromMenus } from '../../utilities/utils';\r\n\r\n// a little function to help us with reordering the result\r\nconst reorder = (list, startIndex, endIndex) => {\r\n const result = Array.from(list);\r\n const [removed] = result.splice(startIndex, 1);\r\n result.splice(endIndex, 0, removed);\r\n\r\n return result;\r\n};\r\n\r\nclass SortableMenuItemList extends Component {\r\n constructor(props) {\r\n super(props);\r\n let menuItems = this.props.menuItems?.length > 0 ? this.props.menuItems.sort((a, b) => { return a.displayOrder - b.displayOrder; }) : [];\r\n this.state = {\r\n items: filterCheckInFromMenus(menuItems)\r\n };\r\n this.onDragEnd = this.onDragEnd.bind(this);\r\n this.handleMenuItemChange = this.handleMenuItemChange.bind(this);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (!this.state.items.includes(this.props.menuItems[0])) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n items: this.props.menuItems?.length > 0 ? this.props.menuItems.sort((a, b) => {\r\n return a.displayOrder - b.displayOrder;\r\n }) : [],\r\n });\r\n } else if (this.props.menuItems?.length !== prevProps.menuItems?.length) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n items: this.props.menuItems?.length > 0 ? this.props.menuItems.sort((a, b) => {\r\n return a.displayOrder - b.displayOrder;\r\n }) : [],\r\n });\r\n }\r\n }\r\n\r\n handleMenuItemChange(field, val, menuItem) {\r\n if (this.props.onSingleMenuItemChange) {\r\n this.props.onSingleMenuItemChange(field, val, menuItem);\r\n }\r\n }\r\n\r\n onDragEnd(result) {\r\n // dropped outside the list\r\n if (!result.destination) {\r\n return;\r\n }\r\n const sourceIndex = result.source.index;\r\n const destIndex = result.destination.index;\r\n if (result.type === 'droppableItem') {\r\n // eslint-disable-next-line react/no-access-state-in-setstate\r\n const items = reorder(this.state.items, sourceIndex, destIndex);\r\n\r\n this.setState({\r\n items,\r\n });\r\n this.props.onMenuItemsDisplayOrderChange(items);\r\n }\r\n }\r\n\r\n render() {\r\n let dragClass = '';\r\n if (this.props.isDragging) {\r\n dragClass = 'sortable-drag';\r\n }\r\n\r\n return (\r\n \r\n {placeholder}\r\n
\r\n\r\n
\r\n \r\n {' '}\r\n \r\n \r\n {(provided) => {\r\n return (\r\n \r\n {this.state.items.map((menuItem, 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\n\r\nexport default SortableMenuItemList;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport MenuStyleList from '../../components/menuItems/MenuStyleList';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport constants from '../../constants';\r\nimport SortableMenuItemList from '../../components/menuItems/SortableMenuItemList';\r\nimport PreviewEnableModules from '../../components/preview/PreviewEnableModules';\r\nimport Exclamation from '../../components/svg/Exclamation';\r\nimport i18n from '../../i18n';\r\nimport { findCheckInFromMenus } from '../../utilities/utils';\r\n\r\nclass ConfigureMenu extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n activeMenuItems: [],\r\n showPreview: true,\r\n };\r\n this.handleMenuItemChange = this.handleMenuItemChange.bind(this);\r\n this.handleMenuStyleChange = this.handleMenuStyleChange.bind(this);\r\n this.updateVersionForFieldWithValue = this.updateVersionForFieldWithValue.bind(this);\r\n this.handleMenuItemsDisplayOrderChange = this.handleMenuItemsDisplayOrderChange.bind(this);\r\n this.runMenuItemUpdate = this.runMenuItemUpdate.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n this.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (!this.props.menuItems.inProgress && prevProps.menuItems.inProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n const menuItems = this.props.menuItems.select?.length > 0 ? this.props.menuItems.select : this.props.menuItems.data\r\n this.setState({ activeMenuItems: menuItems });\r\n }\r\n }\r\n\r\n handleMenuItemChange(field, val, menuItem) {\r\n this.props.actions.updateMenuItemParameter(\r\n this.props.match.params.projectId, menuItem.subType, menuItem.type, field, val,\r\n );\r\n }\r\n\r\n handleMenuStyleChange(menuStyle) {\r\n this.updateVersionForFieldWithValue('menuStyle', menuStyle);\r\n }\r\n\r\n handleMenuItemsDisplayOrderChange(menuItems) {\r\n this.props.actions.bulkUpdateMenuItems(this.props.match.params.projectId, menuItems);\r\n }\r\n\r\n updateVersionForFieldWithValue(field, val) {\r\n const version = this.props.versions.select;\r\n version[field] = val;\r\n\r\n this.props.actions.updateProjectVersionbyParameter(\r\n this.props.match.params.projectId,\r\n field,\r\n val,\r\n );\r\n }\r\n\r\n updateMenuItem(menuItem) {\r\n if (menuItem.title === '') {\r\n // eslint-disable-next-line no-param-reassign\r\n menuItem.title = constants.MenuItemSubType\r\n .find((mt) => { return mt.Id === menuItem.subType; }).Name;\r\n }\r\n this.runMenuItemUpdate(menuItem);\r\n }\r\n\r\n runMenuItemUpdate(menuItem) {\r\n this.props.actions.updateMenuItem(\r\n this.props.match.params.projectId, menuItem.id, menuItem, true,\r\n );\r\n // eslint-disable-next-line react/no-access-state-in-setstate\r\n const menuItems = this.state.activeMenuItems\r\n .map((item) => {\r\n // eslint-disable-next-line no-return-assign,no-param-reassign\r\n return item.id = menuItem.id ? { ...item, title: menuItem.title } : item;\r\n });\r\n this.setState({ activeMenuItems: menuItems });\r\n }\r\n\r\n render() {\r\n const version = this.props.versions.select;\r\n let activeCheckin = findCheckInFromMenus(this.props.menuItems.data);\r\n const previewMenuItems = (\r\n \r\n
\r\n \r\n
\r\n {tentativeDetails.map((data) => (\r\n \r\n Tentative\r\n
\r\n \r\n {tentativeDetails.length}\r\n
\r\n \r\n \r\n {data.worshipDate}{\" \"}\r\n \r\n @{\" \"}{data.formattedTime}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {data.location}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {data.roleName}\r\n \r\n \r\n {data.teamName}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Decline\r\n
\r\n Accept
\r\n \r\n \r\n \r\n ))}\r\n \r\n );\r\n\r\n const pendingBlock = pendingDetails.length > 0 && (\r\n \r\n
\r\n \r\n
\r\n {pendingDetails.map((data) => (\r\n \r\n Pending\r\n
\r\n \r\n {pendingDetails.length}\r\n
\r\n \r\n \r\n {data.worshipDate}{\" \"}\r\n \r\n @{\" \"}{data.formattedTime}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {data.location}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {data.roleName}\r\n \r\n \r\n {data.teamName}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Decline\r\n
\r\n \r\n \r\n Tentative\r\n
\r\n \r\n Accept
\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\r\nexport default ServicePlaningPreview;\r\n","import React from \"react\";\r\nimport i18n from \"../../i18n\";\r\nimport constants from \"../../constants\";\r\nimport PreviewModuleBottomMenuItem from \"./PreviewModuleBottomMenuItem\";\r\nimport Checkin from \"../svg/preview/Checkin\";\r\nimport ServicePlaningPreview from \"./components/ServicePlaningPreview\";\r\nlet defaultData = [];\r\n\r\nclass PreviewServicePlanning extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n loaded: false,\r\n };\r\n this.previewLoaded = this.previewLoaded.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (document.getElementById(\"form-preview\")) {\r\n document\r\n .getElementById(\"form-preview\")\r\n .addEventListener(\"load\", this.previewLoaded);\r\n }\r\n defaultData = [\r\n {\r\n \"posXin\": null,\r\n \"sub_request_id\": null,\r\n \"assigneeID\": 244670,\r\n \"sub_request_sent_mywpids\": null,\r\n \"team\": {\r\n \"teamName\": \"Worship Band\",\r\n \"id\": 26625,\r\n \"worshipProduction\": true\r\n },\r\n \"respNote\": null,\r\n \"roleID\": 229259,\r\n \"autoReminderEmailSent\": null,\r\n \"event\": {\r\n \"location\": \"Main Campus 2\",\r\n \"id\": 754065,\r\n \"worshipDate\": \"new Date(2024,8,15,9,0,0)\",\r\n \"worshipDateFormatted\": \"2024-09-15T09:00:00\",\r\n \"locationID\": 6501\r\n },\r\n \"assigneeName\": \"Chirag Shah\",\r\n \"status\": 10,\r\n \"role\": {\r\n \"id\": 229259,\r\n \"roleName\": \"Drums\",\r\n \"image\": \"drums\"\r\n },\r\n \"posYin\": null,\r\n \"churchID\": 16745,\r\n \"id\": 7848227,\r\n \"teamID\": 26625,\r\n \"eventID\": 754065,\r\n \"masterService\": null,\r\n \"user\": {\r\n \"photo\": null,\r\n \"id\": 244670,\r\n \"name\": \"Chirag Shah\"\r\n }\r\n },\r\n {\r\n \"posXin\": null,\r\n \"sub_request_id\": null,\r\n \"assigneeID\": 244670,\r\n \"sub_request_sent_mywpids\": null,\r\n \"team\": {\r\n \"teamName\": \"Worship Band\",\r\n \"id\": 26625,\r\n \"worshipProduction\": true\r\n },\r\n \"respNote\": null,\r\n \"roleID\": 229252,\r\n \"autoReminderEmailSent\": null,\r\n \"event\": {\r\n \"location\": \"Main Campus 2\",\r\n \"id\": 753829,\r\n \"worshipDate\": \"new Date(2024,4,4,9,30,0)\",\r\n \"worshipDateFormatted\": \"2024-05-04T09:30:00\",\r\n \"locationID\": 6501\r\n },\r\n \"assigneeName\": \"Chirag Shah\",\r\n \"status\": 40,\r\n \"role\": {\r\n \"id\": 229252,\r\n \"roleName\": \"Bass Singer\",\r\n \"image\": \"parking\"\r\n },\r\n \"posYin\": null,\r\n \"churchID\": 16745,\r\n \"id\": 7847885,\r\n \"teamID\": 26625,\r\n \"eventID\": 753829,\r\n \"masterService\": 753828,\r\n \"user\": {\r\n \"photo\": null,\r\n \"id\": 244670,\r\n \"name\": \"Chirag Shah\"\r\n }\r\n }]\r\n }\r\n\r\n previewLoaded = () => {\r\n this.setState({ loaded: true });\r\n };\r\n\r\n render() {\r\n let modules =\r\n this.props.menuItems && this.props.menuItems.length > 0\r\n ? this.props.menuItems.filter((item) => {\r\n return item.displayOrder > -1;\r\n })\r\n : [];\r\n modules = modules.sort((a, b) => {\r\n return a.displayOrder - b.displayOrder;\r\n });\r\n if (modules.length > 5 && this.props.menuStyle === 1) {\r\n modules = modules.slice(0, 4);\r\n modules.push({ displayOrder: 5, title: \"More\", subType: \"more\" });\r\n }\r\n let primaryText = `#${this.props.primaryText}`;\r\n let secondaryText = `#${this.props.secondaryText}`;\r\n let actionColor = `#${this.props.actionColor}`;\r\n return (\r\n \r\n
\r\n {tentativeBlock}\r\n {pendingBlock}\r\n \r\n 
\r\n
\r\n\r\n {/* Upcoming
\r\n \r\n 
\r\n
*/}\r\n My Availability
\r\n \r\n \r\n \r\n {this.props.menuStyle ===\r\n constants.MenuStyle.find((c) => {\r\n return c.Name === \"Tiled\";\r\n }).Id && (\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\nexport default PreviewServicePlanning;\r\n","import { useEffect, useMemo, useState } from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useParams } from \"react-router\";\r\n\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport EditInput from '../../components/forms/EditInput';\r\nimport GeneralSection from '../../components/common/GeneralSection';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\nimport PreviewServicePlanning from '../../components/preview/PreviewServicePlanning';\r\n\r\nimport reduxActions from '../../actions'\r\nimport i18n from \"../../i18n\";\r\nimport ManagedInput from \"../../components/forms/ManagedInput\";\r\n\r\nconst ServicePlanningModule = (parentProps) => {\r\n const [state, setState] = useState({ menuItem: {}, module: {}, showPreview: true, ready: false });\r\n const { projectId } = useParams();\r\n\r\n const reduxState = useSelector(state => {\r\n return {\r\n modules: state.modules,\r\n versions: state.versions,\r\n menuItems: state.menuItems,\r\n flags: state.flags,\r\n alerts: state.alerts,\r\n }\r\n });\r\n const dispatch = useDispatch();\r\n\r\n const actions = useMemo(() => bindActionCreators({\r\n getProjectVersion: reduxActions.getProjectVersion,\r\n getProjectVersionModules: reduxActions.getProjectVersionModules,\r\n getProjectVersionMenuItems: reduxActions.getProjectVersionMenuItems,\r\n getModuleByType: reduxActions.getModuleByType,\r\n clearAlert: reduxActions.clearAlert,\r\n addAlert: reduxActions.addAlert,\r\n updateMenuItemParameter: reduxActions.updateMenuItemParameter,\r\n updateModule: reduxActions.updateModule,\r\n updateModuleParameter: reduxActions.updateModuleParameter\r\n },\r\n dispatch),\r\n []\r\n );\r\n\r\n const props = { ...reduxState, ...parentProps };\r\n const modulesInProgress = props.modules.inProgress;\r\n const menuItemsInProgress = props.menuItems.inProgress;\r\n const selectModule = { isMe: props.modules?.select?.moduleType === 13, enabled: props.modules?.select?.enabled };\r\n const isFeatureEnabled = props.flags.results?.servicePlanning;\r\n\r\n // do on mount\r\n useEffect(() => {\r\n actions.getProjectVersion(projectId);\r\n actions.getProjectVersionModules(projectId);\r\n actions.getProjectVersionMenuItems(projectId);\r\n actions.getModuleByType(projectId, 13);\r\n actions.clearAlert('module-service-planning-disabled');\r\n }, []);\r\n\r\n // update module state for module selection\r\n useEffect(() => {\r\n if (!modulesInProgress && isFeatureEnabled) {\r\n setState((prevState) => {\r\n return {\r\n ...prevState,\r\n module: props.modules.select\r\n };\r\n });\r\n }\r\n\r\n if (!menuItemsInProgress && !modulesInProgress && isFeatureEnabled) {\r\n const menuItems = props.menuItems.data;\r\n const moduleType = props.modules.select.moduleType;\r\n const menuItem = menuItems.find(item => item.type == 1 && item.subType == moduleType);\r\n if (menuItem !== undefined) {\r\n setState((prevState) => {\r\n return {\r\n ...prevState,\r\n menuItem,\r\n ready: true,\r\n };\r\n });\r\n }\r\n else {\r\n setState((prevState) => {\r\n return {\r\n ...prevState,\r\n ready: true,\r\n };\r\n });\r\n }\r\n }\r\n\r\n if (!menuItemsInProgress && !modulesInProgress) {\r\n setState((prevState) => {\r\n return {\r\n ...prevState,\r\n ready: true,\r\n };\r\n });\r\n }\r\n }, [modulesInProgress, menuItemsInProgress, props.modules.select, props.menuItems.data, props.modules.select?.moduleType, isFeatureEnabled]);\r\n\r\n // manage alerts\r\n useEffect(() => {\r\n if (state.ready && selectModule.isMe) {\r\n if (!selectModule.enabled) {\r\n actions.addAlert({\r\n message: i18n.t('modules.servicePlanning.error1'),\r\n linkText: i18n.t('enableHere'),\r\n link: `/projects/${projectId}/modules/enable-modules`,\r\n view: '/modules/service-planning',\r\n type: 'warning',\r\n id: 'module-service-planning-disabled',\r\n });\r\n }\r\n else {\r\n actions.clearAlert('module-service-planning-disabled');\r\n }\r\n }\r\n }, [state.ready, props.modules?.select]);\r\n\r\n // event handlers\r\n const updateMenuItemFromEvent = (evt) => {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim().length > 0 ? evt.target.value.trim() : i18n.t('modules.servicePlanning.servicePlanning');\r\n if (changedValue !== '') {\r\n setState((prevState) => {\r\n return {\r\n ...prevState,\r\n menuItem: {\r\n ...prevState.menuItem,\r\n title: changedValue,\r\n },\r\n };\r\n });\r\n\r\n actions.updateMenuItemParameter(\r\n projectId,\r\n state.module.moduleType,\r\n 1,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n }\r\n\r\n const updateModuleParameterFromEvent = (evt) => {\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim();\r\n setState((prevState) => {\r\n const newState = {\r\n ...prevState,\r\n module: {\r\n ...prevState.module,\r\n [fieldName]: changedValue,\r\n },\r\n };\r\n return newState;\r\n });\r\n\r\n actions.updateModuleParameter(projectId, state.module.moduleType, fieldName, changedValue);\r\n };\r\n\r\n //Preview ServicePlanning\r\n const activeCheckin = () => {\r\n let checkInModule = props.modules?.data?.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Check-In'; }).Id; });\r\n return checkInModule.filter((module) => { return module.enabled === true; });\r\n }\r\n const { select } = props.versions;\r\n const previewServicePlanning = state.module?.enabled && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \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.menuStyle ===\r\n constants.MenuStyle.find((c) => {\r\n return c.Name === \"SlideOut\";\r\n }).Id && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \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.menuStyle ===\r\n constants.MenuStyle.find((c) => {\r\n return c.Name === \"Bottom\";\r\n }).Id && (\r\n
\r\n \r\n {this.props.checkin && (\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n {this.props.menuItem?.title}
\r\n\r\n \r\n {i18n.t(\"modules.servicePlanning.myassignments\")}\r\n
\r\n \r\n \r\n
\r\n {this.props.menuStyle ===\r\n constants.MenuStyle.find((c) => {\r\n return c.Name === \"Bottom\";\r\n }).Id && (\r\n \r\n {modules\r\n .sort((a, b) => {\r\n return a.displayOrder > b.displayOrder;\r\n })\r\n .map((md, i) => {\r\n return (\r\n
\r\n )}\r\n \r\n \r\n {i18n.t('modules.servicePlanning.title')}\r\n \r\n {props.flags.results?.scPeople\r\n && (\r\n \r\n {i18n.t('modules.servicePlanning.subtitle')}\r\n \r\n )}\r\n \r\n \r\n \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 \r\n {bodyForm}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ServicePlanningModule;","import React from 'react'; // eslint-disable-line\r\nimport i18n from '../../i18n';\r\nimport constants from '../../constants';\r\nimport PreviewModuleBottomMenuItem from './PreviewModuleBottomMenuItem';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport OnOffSwitch from '../../components/forms/OnOffSwitch';\r\nimport MenuArrow from '../svg/MenuArrow';\r\nimport SearchGlass from '../svg/SearchGlass';\r\nimport Checkin from '../svg/preview/Checkin';\r\n\r\nclass PreviewStudioC extends React.Component {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default PreviewStudioC;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport _actions from '../../actions';\r\nimport constants from '../../constants';\r\nimport VersionBox from '../../components/common/VersionBox';\r\nimport EditInput from '../../components/forms/EditInput';\r\nimport GeneralSection from '../../components/common/GeneralSection';\r\nimport PreviewStudioC from '../../components/preview/PreviewStudioC';\r\nimport i18n from '../../i18n';\r\nimport HorizontalFormContainer from '../../components/forms/HorizontalFormContainer';\r\nimport UserSelectedIconSelect from '../../components/pages/UserSelectedIconSelect';\r\n\r\nlet defaultTabs = [];\r\n\r\nexport class StudioCModule extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n\t\tthis.state = {\r\n\t\t\tmenuItem: {},\r\n\t\t\tmodule: {},\r\n showPreview: true,\r\n\t\t};\r\n\t\tthis.updateModuleFieldsWithValues = this.updateModuleFieldsWithValues.bind(this);\r\n\t\tthis.updateMenuItemFromEvent = this.updateMenuItemFromEvent.bind(this);\r\n\t\tthis.updateModuleFieldWithValue = this.updateModuleFieldWithValue.bind(this);\r\n\t\tthis.updateModuleEnableDirectory = this.updateModuleEnableDirectory.bind(this);\r\n\t\tthis.updateModuleTabsFromEvent = this.updateModuleTabsFromEvent.bind(this);\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.props.actions.getProjectVersion(this.props.match.params.projectId);\r\n\t\tthis.props.actions.getProjectVersionModules(this.props.match.params.projectId);\r\n\t\tthis.props.actions.getProjectVersionMenuItems(this.props.match.params.projectId);\r\n\t\tthis.props.actions.getModuleByType(this.props.match.params.projectId, 14);\r\n\t\tdefaultTabs = [\r\n\t\t\t{\r\n\t\t\t\tname: 'directoryTabName',\r\n\t\t\t\tvalue: i18n.t('modules.studioc.section3.tabDefault'),\r\n\t\t\t},\r\n\t\t];\r\n\t}\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'StudioC'; }).Id\r\n && this.props.modules.select.enabled) {\r\n if (this.props.alerts.data.length > 0 && this.props.alerts.data.find((m) => { return m.id === 'module-disabled'; })) {\r\n this.props.actions.clearAlert('module-disabled');\r\n }\r\n }\r\n if (!prevState.isLoaded) {\r\n if (this.props.modules.select.id\r\n && this.props.modules.select.moduleType === constants.ModuleType.find((m) => { return m.Name === 'StudioC'; }).Id\r\n && !this.props.modules.select.enabled) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('modules.studioc.error1'),\r\n linkText: i18n.t('enableHere'),\r\n link: `/projects/${this.props.match.params.projectId}/modules/enable-modules`,\r\n view: '/modules/studioc',\r\n type: 'warning',\r\n id: 'module-disabled',\r\n });\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ isLoaded: true });\r\n }\r\n }\r\n\r\n if ((!this.props.menuItems.inProgress\r\n && prevProps.menuItems.inProgress)\r\n || (!this.props.modules.inProgress\r\n && prevProps.modules.inProgress)) {\r\n let menuItem = this.props.menuItems.data !== []\r\n && typeof (this.props.modules.select.moduleType) === 'number'\r\n ? this.props.menuItems.data\r\n .find((mi) => {\r\n return mi.type === 1\r\n && parseInt(mi.subType, 10) === this.props.modules.select.moduleType;\r\n })\r\n : '';\r\n menuItem = menuItem || {};\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ menuItem });\r\n }\r\n if (!this.props.modules.inProgress && prevProps.modules.inProgress) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ module: this.props.modules.select });\r\n }\r\n }\r\n\r\n updateMenuItemFromEvent(evt) {\r\n\t\tdebugger;\r\n const fieldName = evt.target.name;\r\n const changedValue = evt.target.value.trim().length > 0 ? evt.target.value.trim() : i18n.t('modules.studioc.studioc');\r\n if (changedValue !== '') {\r\n this.setState((prevState) => {\r\n return {\r\n menuItem: {\r\n ...prevState.menuItem,\r\n title: changedValue,\r\n },\r\n };\r\n });\r\n this.props.actions.updateMenuItemParameter(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n 1,\r\n fieldName,\r\n changedValue,\r\n );\r\n }\r\n }\r\n\r\n updateModuleEnableDirectory(evt) {\r\n const changedValue = evt.target.checked;\r\n this.updateModuleFieldWithValue('directoryEnabled', changedValue);\r\n this.setState((prevState) => {\r\n return {\r\n module: {\r\n ...prevState.module,\r\n directoryEnabled: changedValue,\r\n },\r\n };\r\n });\r\n }\r\n\r\n updateModuleFieldsWithValues(fields) {\r\n this.props.actions.updateModule(\r\n this.props.match.params.projectId,\r\n this.state.module.moduleType,\r\n fields,\r\n );\r\n }\r\n\r\n\tupdateModuleFieldWithValue(field, val) {\r\n\t\tthis.props.actions.updateModuleParameter(\r\n\t\t\tthis.props.match.params.projectId,\r\n\t\t\tthis.state.module.moduleType,\r\n\t\t\tfield,\r\n\t\t\tval,\r\n\t\t);\r\n\t}\r\n\r\n\tupdateModuleTabsFromEvent(evt) {\r\n\t\tconst fieldName = evt.target.name;\r\n\t\tconst changedValue = evt.target.value.trim();\r\n\t\tif (changedValue !== '') {\r\n\t\t\tconst newState = this.state.module;\r\n\t\t\tnewState[fieldName] = changedValue;\r\n\t\t\tthis.setState({ module: { ...newState } });\r\n\t\t\tthis.updateModuleFieldWithValue(fieldName, changedValue);\r\n\t\t} else {\r\n\t\t\tconst fieldData = defaultTabs.find((tab) => { return tab.name === fieldName; });\r\n\t\t\tconst newState = this.state.module;\r\n\t\t\tnewState[fieldName] = fieldData.value;\r\n\t\t\tthis.setState({ module: { ...newState } });\r\n\t\t\tthis.updateModuleFieldWithValue(fieldName, fieldData.value);\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tlet previewStudioC = null;\r\n\t\tlet bodyForm = '';\r\n\t\tif (this.state.module.enabled) {\r\n\t\t\tlet activeCheckin = this.props.modules.data.filter((module) => { return module.moduleType === constants.ModuleType.find((m) => { return m.Name === 'Check-In'; }).Id; });\r\n\t\t\tactiveCheckin = activeCheckin.filter((module) => { return module.enabled === true; });\r\n\t\t\tpreviewStudioC = (\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{i18n.t('modules.studioc.title')}\r\n\t\t\t\t\t\r\n\t\t\t\t\t{this.props.flags.results?.studioC\r\n\t\t\t\t\t\t&& (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{i18n.t('modules.studioc.subtitle')}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{this.props.flags.results?.userSelectedIcons\r\n\t\t\t\t\t\t\t\t&& (\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t);\r\n\t\t}\r\n\r\n return (\r\n \r\n {bodyForm}\r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(StudioCModule);\r\n","import React from \"react\"; // eslint-disable-line\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { Route, Switch } from \"react-router-dom\";\r\nimport moment from \"moment-timezone\";\r\n\r\nimport _actions from \"../../actions\";\r\nimport GeneralInfo from \"../appSettings/GeneralInfo\";\r\nimport Logo from \"../appSettings/logo\";\r\nimport Integrations from \"../appSettings/integrations\";\r\nimport EnableModules from \"../modules/EnableModules\";\r\nimport Giving from \"../modules/GivingModule\";\r\nimport Sermons from \"../modules/SermonsModule\";\r\nimport Events from \"../modules/EventsModule\";\r\nimport Discover from \"../modules/DiscoverModule\";\r\nimport Contact from \"../modules/ContactModule\";\r\nimport Calendar from \"../modules/CalendarModule\";\r\nimport Pages from \"../pages/PagesModule\";\r\nimport People from \"../modules/PeopleModule\";\r\nimport Groups from \"../modules/GroupsModule\";\r\nimport Colors from \"../design/colors\";\r\nimport Results from \"../status/Results\";\r\nimport \"../../assets/styles/master.css\";\r\nimport ConfigureMenu from \"../design/menu\";\r\nimport constants from \"../../constants\";\r\nimport Catch404 from \"../pages/Catch404\";\r\nimport FormsModule from \"../modules/FormsModule\";\r\nimport appStateProvider from \"../../utilities/appStateProvider\";\r\nimport ServicePlanning from \"../modules/ServicePlanningModule\";\r\nimport StudioC from \"../modules/StudioCModule\";\r\n\r\nclass VersionViews extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { fmsStandaloneAccess: false };\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.projects.data.length === 0) {\r\n this.props.actions.getProjects();\r\n }\r\n\r\n if (appStateProvider().isStandalone()) {\r\n this.setState({ fmsStandaloneAccess: true });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(VersionViews);\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Clock = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Clock;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport moment from 'moment-timezone';\r\nimport Clock from '../svg/Clock';\r\n\r\nclass TimeInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n dialogOpen: false,\r\n hourValue: this.props.hour,\r\n minuteValue: this.props.minute,\r\n am: this.props.am,\r\n focus: 'not-focused',\r\n };\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.state.hourValue !== prevState.hourValue\r\n || this.state.minuteValue !== prevState.minuteValue\r\n || this.state.am !== prevState.am) {\r\n this.props.timeinputchange(this.state, this.props.format24);\r\n }\r\n if (this.props.hour !== prevProps.hour) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ hourValue: this.props.hour });\r\n }\r\n if (this.props.minute !== prevProps.minute) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ minuteValue: this.props.minute });\r\n }\r\n if (this.props.am !== prevProps.am) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ am: this.props.am });\r\n }\r\n if (this.props.format24 !== prevProps.format24) {\r\n if (this.props.format24 === 'true') {\r\n if (this.state.am === 'am' && this.state.hourValue === '12') {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ hourValue: '00' });\r\n } else if (this.state.am === 'pm' && this.state.hourValue !== '12') {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n hourValue: (parseInt(prevState.hourValue, 10) + 12).toString(),\r\n });\r\n }\r\n } else {\r\n if (this.state.hourValue === '00') {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ hourValue: '12' });\r\n }\r\n if (parseInt(this.state.hourValue, 10) > 11) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ am: 'pm' });\r\n }\r\n if (parseInt(this.state.hourValue, 10) > 12) {\r\n // eslint-disable-next-line react/no-access-state-in-setstate\r\n let hour = (parseInt(this.state.hourValue, 10) - 12).toString();\r\n if (hour.length < 2) {\r\n hour = `0${hour}`;\r\n }\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ hourValue: hour });\r\n }\r\n }\r\n }\r\n }\r\n\r\n onFocusFn = (e) => {\r\n this.setState({ focus: 'focused' });\r\n this.props.onFocus(e);\r\n }\r\n\r\n onKeyDownHourFn = (e) => {\r\n // Because HTML5 time inputs don't work in Safari, reinvent the wheel for the input box.\r\n // Replace this later with a simpler solution once Safari catches up with the world.\r\n let validFirstValues = ['0', '1'];\r\n if (this.props.format24 === 'true') {\r\n validFirstValues = ['0', '1', '2'];\r\n }\r\n const validSecondValues = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];\r\n let validSecondValueSet1 = ['0', '1', '2'];\r\n let validSecondValueSet2 = [];\r\n if (this.props.format24 === 'true') {\r\n validSecondValueSet1 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\r\n validSecondValueSet2 = ['0', '1', '2', '3'];\r\n }\r\n if (e.key === ':' || (e.key === 'ArrowRight' && this.state.hourValue.length === 2)) {\r\n e.preventDefault();\r\n const form = e.currentTarget.nextSibling.nextSibling; // colon is a sibling\r\n form.focus();\r\n }\r\n if (this.state.hourValue.length === 2\r\n && (this.state.hourValue.length - window.getSelection().toString().length === 2)) {\r\n if (validSecondValueSet1.indexOf(e.key) !== -1\r\n && ((parseInt(this.state.hourValue, 10) < 3 && this.props.format24 === 'true')\r\n || (parseInt(this.state.hourValue, 10) < 2 && this.props.format24 === 'false'))) {\r\n const newHour = (parseInt(this.state.hourValue, 10) * 10\r\n + parseInt(e.key, 10))\r\n .toString();\r\n if ((parseInt(newHour, 10) < 24 && this.props.format24 === 'true')\r\n || (parseInt(newHour, 10) < 13 && this.props.format24 === 'false')) {\r\n this.setState({ hourValue: newHour });\r\n }\r\n } else if (e.key !== 'Backspace' && e.key !== ':'\r\n && e.key !== 'Tab' && e.key !== 'Shift' && e.key !== 'ArrowLeft'\r\n && e.key !== 'ArrowRight') {\r\n const form = e.currentTarget.nextSibling.nextSibling; // colon is a sibling\r\n form.focus();\r\n }\r\n }\r\n if (this.state.hourValue.length === 0\r\n && (this.state.hourValue.length - window.getSelection().toString().length === 0)) {\r\n if (validFirstValues.indexOf(e.key) === -1) {\r\n e.preventDefault();\r\n if (validSecondValues.indexOf(e.key) !== -1) {\r\n this.setState({ hourValue: `0${e.key}` });\r\n }\r\n }\r\n }\r\n if (this.state.hourValue.length === 1\r\n && (this.state.hourValue.length - window.getSelection().toString().length === 1)) {\r\n if (e.key !== 'Backspace') {\r\n if (this.state.hourValue === '1' && validSecondValueSet1.indexOf(e.key) === -1) {\r\n e.preventDefault();\r\n }\r\n if (this.state.hourValue === '2' && validSecondValueSet2.indexOf(e.key) === -1) {\r\n e.preventDefault();\r\n }\r\n }\r\n }\r\n }\r\n\r\n onKeyDownMinuteFn = (e) => {\r\n // Because HTML5 time inputs don't work in Safari, reinvent the wheel for the input box.\r\n // Replace this later with a simpler solution once Safari catches up with the world.\r\n // Actually, IE 11 also doesn't support, so even once Safari catches up\r\n // we have to drop IE 11 support to drop this.\r\n const validFirstValues = ['0', '1', '2', '3', '4', '5'];\r\n const validSecondValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\r\n if (e.target.selectionStart === 0 && e.key === 'ArrowLeft') {\r\n const form = e.currentTarget.previousSibling.previousSibling; // colon is a sibling\r\n form.focus();\r\n setTimeout(() => { return form.setSelectionRange(3, 3); }, 0);\r\n // Chrome still has a bug about setting focus.\r\n // A timeout of zero assures that this will fire after focus.\r\n }\r\n if (this.state.minuteValue.length === 0\r\n ) {\r\n if (e.key !== 'Tab' && e.key !== 'Shift' && validFirstValues.indexOf(e.key) === -1) {\r\n e.preventDefault();\r\n if (validSecondValues.indexOf(e.key) !== -1) {\r\n this.setState({ minuteValue: `0${e.key}` });\r\n }\r\n }\r\n }\r\n if (this.state.minuteValue.length === 1) {\r\n if (e.key !== 'Backspace' && e.key !== 'Tab' && e.key !== 'Shift'\r\n && validSecondValues.indexOf(e.key) === -1\r\n && e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') {\r\n e.preventDefault();\r\n }\r\n }\r\n if (validSecondValues.indexOf(e.key) !== -1\r\n && parseInt(this.state.minuteValue, 10) < 6) {\r\n this.setState({\r\n // eslint-disable-next-line react/no-access-state-in-setstate\r\n minuteValue: (parseInt(this.state.minuteValue, 10) * 10\r\n + parseInt(e.key, 10)).toString(),\r\n });\r\n }\r\n }\r\n\r\nonKeyDownAmFn = (e) => {\r\n if (this.state.am) {\r\n if (e.key === 'p' || e.key === 'P') {\r\n this.setState({ am: false });\r\n }\r\n } else if (e.key === 'a' || e.key === 'A') {\r\n this.setState({ am: true });\r\n }\r\n}\r\n\r\n onBlurFn = () => {\r\n this.setState({ focus: 'not-focused' });\r\n if (this.state.hourValue.length === 1) {\r\n // eslint-disable-next-line react/no-access-state-in-setstate\r\n this.setState({ hourValue: `0${this.state.hourValue}` });\r\n }\r\n if (this.state.minuteValue.length === 1) {\r\n // eslint-disable-next-line react/no-access-state-in-setstate\r\n this.setState({ minuteValue: `0${this.state.minuteValue}` });\r\n }\r\n }\r\n\r\n onChangeFn = (e) => {\r\n if (e.target.name === 'hour') {\r\n if ((this.props.format24 === 'true' && parseInt(e.target.value, 10) < 24)\r\n || (this.props.format24 === 'false' && parseInt(e.target.value, 10) < 13)) {\r\n this.setState({ hourValue: e.target.value });\r\n }\r\n }\r\n if (e.target.name === 'minute') {\r\n this.setState({ minuteValue: e.target.value });\r\n }\r\n if (e.target.name === 'am') {\r\n this.setState({ am: e.target.value });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default TimeInput;\r\n","import moment from 'moment-timezone'; // eslint-disable-line\r\nimport React, { Component } from 'react';\r\nimport Select from 'react-select';\r\nimport TimeInput from './TimeInput';\r\nimport MenuArrow from '../svg/MenuArrow';\r\n\r\nclass TimePicker extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n format24: this.props.format24,\r\n modal: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n hour: moment(`${this.props.messages}Z`)\r\n .utc()\r\n .tz(moment.tz.guess())\r\n .format('hh'),\r\n minute: moment(`${this.props.messages}Z`)\r\n .utc()\r\n .tz(moment.tz.guess())\r\n .format('mm'),\r\n am: moment(`${this.props.messages}Z`)\r\n .utc()\r\n .tz(moment.tz.guess())\r\n .format('a'),\r\n });\r\n\r\n document.addEventListener('mousedown', this.handleClickOutside);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.props.messages !== prevProps.messages) {\r\n let hour;\r\n if (this.state.format24 === 'true') {\r\n hour = moment(`${this.props.messages}Z`)\r\n .utc()\r\n .tz(moment.tz.guess())\r\n .format('HH');\r\n } else {\r\n hour = moment(`${this.props.messages}Z`)\r\n .utc()\r\n .tz(moment.tz.guess())\r\n .format('hh');\r\n }\r\n if (hour !== prevState.hour || moment(`${this.props.messages}Z`)\r\n .utc()\r\n .tz(moment.tz.guess())\r\n .format('mm') !== prevState.minute) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n hour,\r\n minute: moment(`${this.props.messages}Z`)\r\n .utc()\r\n .tz(moment.tz.guess())\r\n .format('mm'),\r\n });\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener('mousedown', this.handleClickOutside);\r\n }\r\n\r\n handleFocus = () => {\r\n this.setState({ modal: true });\r\n }\r\n\r\n handleClickOutside = (event) => {\r\n if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {\r\n this.setState({ modal: false });\r\n }\r\n }\r\n\r\n handle24Change = (e) => {\r\n if (e !== null) {\r\n this.setState({ format24: e.value });\r\n setTimeout(() => {\r\n this.setState({ modal: true });\r\n }, 0); // Just enough to push it to the end of queue\r\n }\r\n }\r\n\r\n timeChange = (passedState, format24) => {\r\n this.setState({\r\n hour: passedState.hourValue,\r\n minute: passedState.minuteValue,\r\n am: passedState.am,\r\n });\r\n this.props.timeinputchange(passedState, format24);\r\n }\r\n\r\n changeHour = (value) => {\r\n this.setState({ hour: value });\r\n }\r\n\r\n changeMinute = (value) => {\r\n this.setState({ minute: value });\r\n }\r\n\r\n changeAM = (value) => {\r\n this.setState({ am: value });\r\n }\r\n\r\n arrowRenderer = () => {\r\n return ({ moment.tz(moment.tz.guess()).format('z') }
\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default TimePicker;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nconst Calendar = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Calendar;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport DatePicker from 'react-datepicker';\r\nimport moment from 'moment-timezone';\r\nimport Select from 'react-select';\r\nimport _actions from '../../actions';\r\nimport i18n from '../../i18n';\r\nimport ValidatedInput from '../../components/forms/ValidatedInput';\r\nimport TimePicker from '../../components/forms/TimePicker';\r\nimport Calendar from '../../components/svg/Calendar';\r\nimport Clock from '../../components/svg/Clock';\r\nimport LargeModal from '../modals/LargeModal';\r\n\r\nclass MessagesModal extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n now: true,\r\n title: props.messages.subject,\r\n message: props.messages.body,\r\n pickerDown: false,\r\n format24: 'false',\r\n recipients: props.messages.formMessage,\r\n formId: props.messages.formId,\r\n formLabel: props.messages.formTitle,\r\n };\r\n\r\n this.closeDialog = this.closeDialog.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (window.innerHeight > 1000) {\r\n this.setState({ pickerDown: true });\r\n } else {\r\n this.setState({ pickerDown: false });\r\n }\r\n if (this.props.messages.formMessage) {\r\n this.setState({\r\n recipients: true,\r\n });\r\n }\r\n if (this.props.messages.scheduledTime) {\r\n this.setState({\r\n now: false,\r\n scheduleDateTimeObject: moment(`${this.props.messages.scheduledTime}Z`),\r\n });\r\n } else {\r\n this.setState({\r\n scheduleDateTimeObject: moment(),\r\n });\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.state.now !== prevState.now\r\n // eslint-disable-next-line no-mixed-operators\r\n || this.state.scheduleDateTimeObject !== prevState.scheduleDateTimeObject\r\n // eslint-disable-next-line no-mixed-operators\r\n && this.state.scheduleDateTimeObject !== null) {\r\n if (!this.state.now && !this.state.scheduleDateTimeObject.isAfter(moment()\r\n .subtract(1, 'minutes'))\r\n && ((!this.props.messages.id && this.props.history) || (!this.props.history)\r\n )) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ timePastAlert: true });\r\n } else if ((!this.state.now\r\n && this.state.scheduleDateTimeObject.isAfter(moment()))\r\n || this.state.now) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ timePastAlert: false });\r\n }\r\n }\r\n if (this.state.value && !this.state.value.isValid()) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ value: null });\r\n }\r\n if (this.props.messages.scheduledTime !== prevProps.messages.scheduledTime) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n scheduleDateTimeObject: moment(`${this.props.messages.scheduledTime}Z`),\r\n });\r\n }\r\n }\r\n\r\n executeSave = () => {\r\n let subject;\r\n let body;\r\n let formId;\r\n let formTitle;\r\n if (this.state.title) {\r\n subject = this.state.title;\r\n } else {\r\n subject = this.props.messages.subject;\r\n }\r\n if (this.state.message) {\r\n body = this.state.message;\r\n } else {\r\n body = this.props.messages.body;\r\n }\r\n let scheduleTime = moment(this.state.scheduleDateTimeObject)\r\n .utc()\r\n .format('YYYY-MM-DDTHH:mm:ss');\r\n if (this.state.now) {\r\n scheduleTime = moment()\r\n .utc()\r\n .format('YYYY-MM-DDTHH:mm:ss');\r\n }\r\n if (this.state.recipients) {\r\n formId = this.state.formId;\r\n formTitle = this.state.formLabel;\r\n }\r\n this.props.saveAction({\r\n subject,\r\n body,\r\n scheduleTime,\r\n id: this.props.messages.id,\r\n formMessage: this.state.recipients,\r\n formId,\r\n formTitle,\r\n });\r\n this.closeDialog();\r\n };\r\n\r\n handleTimeChange = (timeState, format24) => {\r\n let timeHour = timeState.hourValue;\r\n const timeMinute = timeState.minuteValue;\r\n if (format24 === 'true') {\r\n this.setState({ format24: 'true' });\r\n } else {\r\n if (timeState.am === 'am' && timeState.hourValue === '12') {\r\n timeHour = '00';\r\n } else if (timeState.am !== 'am' && timeState.hourValue !== '12') {\r\n timeHour = parseInt(timeState.hourValue, 10) + 12;\r\n }\r\n this.setState({ format24: 'false' });\r\n }\r\n this.setState((prevState) => {\r\n return {\r\n scheduleDateTimeObject: moment(prevState.scheduleDateTimeObject)\r\n .hour(timeHour)\r\n .minute(timeMinute),\r\n };\r\n });\r\n };\r\n\r\n handleDateChange = (e) => {\r\n if (e) {\r\n const year = moment(e)\r\n .format('YYYY');\r\n const month = parseInt(moment(e)\r\n .format('MM'), 10) - 1;\r\n const day = moment(e)\r\n .format('DD');\r\n this.setState((prevState) => {\r\n return {\r\n scheduleDateTimeObject: moment(prevState.scheduleDateTimeObject)\r\n .year(year)\r\n .month(month)\r\n .date(day),\r\n };\r\n });\r\n }\r\n };\r\n\r\n setNow = (scheduleBool) => {\r\n this.setState({ now: scheduleBool });\r\n };\r\n\r\n setStateFromEvent = (e, stateKey) => {\r\n const stateObj = {};\r\n stateObj[stateKey] = e.target.value;\r\n this.setState(stateObj);\r\n };\r\n\r\n handleCheckboxChange = (event) => {\r\n this.setState({ recipients: event.target.checked });\r\n };\r\n\r\n updateFormsSourceFromSelect = (val) => {\r\n if (val != null && val.value != null) {\r\n this.setState({\r\n formId: val.value,\r\n formLabel: val.label,\r\n });\r\n }\r\n };\r\n\r\n closeDialog() {\r\n if (this.props.close) {\r\n this.props.close();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n Visible,\r\n } = this.props;\r\n\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(null, mapDispatchToProps)(MessagesModal);\r\n","import React from 'react'; // eslint-disable-line\r\nimport moment from 'moment-timezone';\r\nimport CloseModal from '../../components/svg/CloseModal';\r\nimport Clock from '../../components/svg/Clock';\r\nimport Calendar from '../../components/svg/Calendar';\r\n\r\nconst MessagesView = (props) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Time
\r\n \r\n \r\n
\r\n HH
\r\n - \r\n {hourOptions.map((item) => {\r\n return (\r\n // eslint-disable-next-line\r\n
\r\n
\r\n {this.state.format24 === 'false'\r\n && (\r\n MM
\r\n - \r\n {minuteOptions.map((item) => {\r\n return (\r\n // eslint-disable-next-line\r\n
\r\n \r\n
\r\n )}\r\n - \r\n {/* eslint-disable */}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default MessagesView;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport Select from 'react-select';\r\nimport { Pagination } from '@material-ui/core';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport { bindActionCreators } from 'redux';\r\nimport moment from 'moment-timezone';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport _actions from '../../actions';\r\nimport VersionFree from '../../components/structure/VersionFree';\r\nimport i18n from '../../i18n';\r\nimport AddPlus from '../../components/svg/AddPlus';\r\nimport MessagesModal from './MessagesModal';\r\nimport constants from '../../constants';\r\nimport Trash from '../../components/svg/Trash';\r\nimport YesNoDialog from '../../components/common/YesNoDialog';\r\nimport DeleteDialog from '../../components/common/DeleteDialog';\r\nimport MessagesView from './MessagesView';\r\nimport CaptionTooltip from '../../components/common/CaptionTooltip';\r\nimport LargeLoading from '../../components/svg/LargeLoading';\r\n\r\nclass Messages extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n modalOpen: false,\r\n messageOpen: false,\r\n messageModalContent: {},\r\n total: 0,\r\n current: 0,\r\n limit: 10,\r\n title: 10,\r\n showPager: false,\r\n showNoData: false,\r\n index: 0,\r\n history: false,\r\n };\r\n\r\n this.handlePageChanged = this.handlePageChanged.bind(this);\r\n this.handleLimitChange = this.handleLimitChange.bind(this);\r\n this.handleTabChange = this.handleTabChange.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (!(this.props.messages.total > 0)) {\r\n this.props.actions.getMessagesTotal(this.props.profiles.data.organizationId);\r\n }\r\n if (this.props.projects.data.length === 0) {\r\n this.props.actions.getProjects();\r\n }\r\n document.body.classList.add('messages-page', 'version-free');\r\n this.props.actions.getEmbedCode();\r\n this.props.actions.getForms(100);\r\n this.props.actions.getMessages(10, 0, this.props.profiles.data.organizationId, moment().utc().format('YYYY-MM-DDTHH:mm:ss'), 0, true);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n /* eslint-enable */\r\n if (this.props.messages.data\r\n && prevProps.messages.inProgress\r\n && !this.props.messages.inProgress) {\r\n if (this.props.messages.data.noOfPages !== null\r\n && this.props.messages.data.noOfPages !== undefined) {\r\n if (this.props.messages.data.noOfPages > 1) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n total: this.props.messages.data.noOfMessages,\r\n showPager: true,\r\n showNoData: false,\r\n });\r\n } else if (typeof this.props.messages.data === 'string') {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n total: 0,\r\n showPager: true,\r\n showNoData: true,\r\n });\r\n } else if (this.props.messages.data.noOfMessages == null\r\n || this.props.messages.data.noOfMessages === 0) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n total: this.props.messages.data.noOfMessages,\r\n showPager: false,\r\n showNoData: true,\r\n });\r\n } else {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n total: this.props.messages.data.noOfMessages,\r\n showPager: false,\r\n showNoData: false,\r\n });\r\n }\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n document.body.classList.remove('messages-page', 'version-free');\r\n }\r\n\r\n handlePageChanged(event, newPage) {\r\n if (newPage > 0) {\r\n this.setState({ current: newPage - 1 });\r\n let sinceTime = '';\r\n let beforeTime = '';\r\n let asc = true;\r\n if (this.state.index === 0) {\r\n sinceTime = moment().utc().format('YYYY-MM-DDTHH:mm:ss');\r\n }\r\n if (this.state.index !== 0) {\r\n sinceTime = 0;\r\n beforeTime = moment().utc().format('YYYY-MM-DDTHH:mm:ss', asc = false);\r\n }\r\n this.props.actions.getMessages(\r\n this.state.limit,\r\n newPage - 1,\r\n this.props.profiles.data.organizationId,\r\n sinceTime,\r\n beforeTime,\r\n asc,\r\n );\r\n }\r\n }\r\n\r\n handleLimitChange(evt) {\r\n // eslint-disable-next-line react/no-access-state-in-setstate,no-mixed-operators\r\n const newPage = Math.floor(this.state.current * this.state.title / evt.value);\r\n this.setState({ title: evt.value, current: newPage });\r\n let sinceTime = '';\r\n let beforeTime = '';\r\n let asc = true;\r\n if (this.state.index === 0) { sinceTime = moment().utc().format('YYYY-MM-DDTHH:mm:ss'); }\r\n if (this.state.index !== 0) { sinceTime = 0; beforeTime = moment().utc().format('YYYY-MM-DDTHH:mm:ss'); asc = false; }\r\n this.props.actions.getMessages(\r\n evt.value,\r\n newPage,\r\n this.props.profiles.data.organizationId,\r\n sinceTime,\r\n beforeTime,\r\n asc,\r\n );\r\n }\r\n\r\n closeModal = () => {\r\n this.setState({ messageModalContent: {}, modalOpen: false });\r\n this.props.actions.clearAlert('message-time');\r\n }\r\n\r\n saveAction = (message) => {\r\n const pageInfo = {\r\n limit: this.state.limit,\r\n offset: this.state.current,\r\n orgId: this.props.profiles.data.organizationId,\r\n };\r\n if (this.state.history) {\r\n pageInfo.sinceTime = 0;\r\n pageInfo.beforeTime = moment().utc().add(1, 'minutes').format('YYYY-MM-DDTHH:mm:ss');\r\n pageInfo.timeAscending = false;\r\n } else {\r\n pageInfo.sinceTime = moment().utc().add(1, 'minutes').format('YYYY-MM-DDTHH:mm:ss');\r\n pageInfo.timeAscending = true;\r\n }\r\n if (message.id) {\r\n this.props.actions.updateMessage(\r\n message.id,\r\n message.subject,\r\n message.body,\r\n message.scheduleTime,\r\n pageInfo,\r\n message.formMessage,\r\n message.formId,\r\n message.formTitle,\r\n );\r\n } else {\r\n this.props.actions.createMessage(\r\n message.subject,\r\n message.body,\r\n message.scheduleTime,\r\n pageInfo,\r\n message.formMessage,\r\n message.formId,\r\n message.formTitle,\r\n );\r\n }\r\n }\r\n\r\n deleteMessage = () => {\r\n const pageInfo = {\r\n limit: this.state.limit,\r\n offset: this.state.current,\r\n orgId: this.props.profiles.data.organizationId,\r\n };\r\n if (Math.ceil((this.state.total - 1) / this.state.title) - 1 < this.state.current) {\r\n // eslint-disable-next-line no-plusplus\r\n pageInfo.offset--;\r\n if (pageInfo.offset < 0) {\r\n pageInfo.offset = 0;\r\n }\r\n // eslint-disable-next-line react/no-access-state-in-setstate\r\n this.setState({ current: (pageInfo.offset) });\r\n }\r\n if (this.state.history) {\r\n pageInfo.sinceTime = 0;\r\n pageInfo.beforeTime = moment().utc().format('YYYY-MM-DDTHH:mm:ss');\r\n pageInfo.timeAscending = false;\r\n } else {\r\n pageInfo.sinceTime = moment().utc().format('YYYY-MM-DDTHH:mm:ss');\r\n pageInfo.timeAscending = true;\r\n }\r\n this.props.actions.deleteMessage(this.state.messageModalContent.id, pageInfo);\r\n this.closeConfirmDialog();\r\n }\r\n\r\n openConfirmDialog = (message) => {\r\n this.setState({ confirmDelete: true, messageModalContent: message });\r\n }\r\n\r\n closeConfirmDialog = () => {\r\n this.setState({ confirmDelete: false, messageModalContent: null });\r\n }\r\n\r\n openMessage = (message) => {\r\n this.setState({ messageOpen: true, messageModalContent: message });\r\n }\r\n\r\n closeMessage = () => {\r\n this.setState({ messageOpen: false, messageModalContent: null });\r\n }\r\n\r\n handleTabChange = (event, index) => {\r\n this.setState({ index });\r\n if (index === 0) {\r\n this.handleScheduled();\r\n }\r\n if (index === 1) {\r\n this.handleHistory();\r\n }\r\n }\r\n\r\n handleHistory = () => {\r\n this.setState({ history: true, current: 0 });\r\n const beforeTime = moment().utc().format('YYYY-MM-DDTHH:mm:ss');\r\n this.props.actions.getMessages(\r\n this.state.limit,\r\n 0,\r\n this.props.profiles.data.organizationId,\r\n 0, beforeTime,\r\n false,\r\n );\r\n }\r\n\r\n handleScheduled = () => {\r\n if (this.state.history) { this.setState({ history: false, current: 0 }); }\r\n const sinceTime = moment().utc().format('YYYY-MM-DDTHH:mm:ss');\r\n this.props.actions.getMessages(\r\n this.state.limit,\r\n 0,\r\n this.props.profiles.data.organizationId,\r\n sinceTime,\r\n 0,\r\n true,\r\n );\r\n }\r\n\r\n editMessage = (message) => {\r\n this.setState({ messageModalContent: message, modalOpen: true });\r\n }\r\n\r\n copyMessage = (message) => {\r\n this.setState({\r\n messageModalContent: {\r\n body: message.body,\r\n subject: message.subject,\r\n formTitle: message.formTitle,\r\n formId: message.formId,\r\n formMessage: message.formMessage,\r\n },\r\n modalOpen: true,\r\n });\r\n }\r\n\r\n addNew = () => {\r\n this.setState({ messageModalContent: {}, modalOpen: true });\r\n }\r\n\r\n render() {\r\n const formOptions = this.props.forms.filtered.map((form) => {\r\n return {\r\n value: form.id,\r\n label: form.name,\r\n };\r\n });\r\n const pagingOptions = [{ value: 10, label: '10' }, { value: 25, label: '25' }, { value: 50, label: '50' }];\r\n let deleteConfirmModal = '';\r\n if (this.state.confirmDelete) {\r\n deleteConfirmModal = (\r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n
\r\n \r\n
\r\n Message
\r\n{props.messages.subject}
\r\n {props.messages.body}
\r\n {props.messages.formTitle && (\r\n \r\n Sent to Registrants of:\r\n {props.messages.formTitle}\r\n
\r\n )}\r\n \r\n {props.history ? 'Sent On' : 'Send On'}\r\n {' '}\r\n
\r\n\r\n \r\n
\r\n )}\r\n {(this.props.projects.data.filter(\r\n (project) => { return project.liveVersion; },\r\n ).length > 0)\r\n && (\r\n \r\n
\r\n \r\n
\r\n )}\r\n {!this.props.projects.inProgress && this.props.projects.data.filter(\r\n (project) => { return project.liveVersion; },\r\n ).length === 0 && (\r\n {i18n.t('messages.messages')}
\r\n\r\n
\r\n { this.props.messages.data\r\n && (\r\n \r\n \r\n \r\n
\r\n \r\n {/* eslint-disable-next-line react/button-has-type */}\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n {this.state.showPager\r\n ? (\r\n \r\n
\r\n {i18n.t('messages.title')}
\r\n {i18n.t('messages.date')}
\r\n {i18n.t('messages.time')}
\r\n {this.props.flags.results && this.props.flags.results?.eventMessaging && {i18n.t('messages.recipients')}
}\r\n {i18n.t('messages.action')}
\r\n \r\n {(this.props.messages.data.messages\r\n && this.props.messages.data.messages.length > 0)\r\n && this.props.messages.data.messages.map((item) => {\r\n return (\r\n
\r\n \r\n {/* eslint-disable-next-line */}\r\n
\r\n );\r\n })}\r\n {this.state.showNoData\r\n && { this.openMessage(item); }}>{item.subject}
\r\n {/* eslint-disable-next-line */}\r\n { this.openMessage(item); }}>\r\n {moment(`${item.scheduledTime}Z`).utc().tz(moment.tz.guess())\r\n .format('MMM DD YYYY')}\r\n
\r\n {/* eslint-disable-next-line */}\r\n { this.openMessage(item); }}>\r\n {moment(`${item.scheduledTime}Z`).utc().tz(moment.tz.guess())\r\n .format('hh:mm a z')}\r\n
\r\n {this.props.flags.results && this.props.flags.results?.eventMessaging && {item.formTitle ? item.formTitle : i18n.t('messages.everyone')}
}\r\n \r\n \r\n {/* eslint-disable-next-line */}\r\n {\r\n this.copyMessage(item);\r\n }}\r\n >\r\n \r\n \r\n {/* eslint-disable-next-line */}\r\n {\r\n this.editMessage(item);\r\n }}\r\n >\r\n \r\n \r\n {/* eslint-disable-next-line */}\r\n {\r\n this.openConfirmDialog(item);\r\n }}\r\n >\r\n \r\n
\r\n There are no messages to display.
}\r\n \r\n 0 ? pagingOptions.find((f) => { return f.value === this.state.title; }) : ''}\r\n onChange={this.handleLimitChange}\r\n clearable={false}\r\n disabled={this.props.messages.data.noOfMessages < 10}\r\n isSearchable={false}\r\n menuPlacement=\"top\"\r\n />\r\n
\r\n )\r\n : (\r\n \r\n )}\r\n Show
\r\n \r\n Showing \r\n {this.state.current + 1 === 1\r\n ? 1\r\n : ((this.state.current) * this.state.title) + 1 }\r\n -\r\n {(this.state.total\r\n < (this.state.current + 1) * this.state.title)\r\n ? this.state.total\r\n : (this.state.current + 1) * this.state.title }\r\n of \r\n {this.state.total}\r\n
\r\n \r\n
\r\n )}\r\n {i18n.t('messages.messages')}
\r\n{i18n.t('messages.subheader-unpublished')}
\r\n\r\n {deleteConfirmModal}\r\n
\r\n {church}
;\r\n }\r\n \r\n return\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ProjectItem;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport ManagedInput from '../forms/ManagedInput';\r\nimport AddPlus from '../svg/AddPlus';\r\nimport CloseX from '../svg/CloseX';\r\nimport i18n from '../../i18n';\r\n\r\nclass NewProjectItem extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.handleNew = this.handleNew.bind(this);\r\n this.handleInput = this.handleInput.bind(this);\r\n this.newProjectOnClick = this.newProjectOnClick.bind(this);\r\n this.state = {\r\n step1: true,\r\n step2: false,\r\n projectName: '',\r\n };\r\n }\r\n\r\n handleNew(event) {\r\n event.preventDefault();\r\n if (this.state.projectName !== '') {\r\n this.props.createNew(this.state.projectName);\r\n }\r\n }\r\n\r\n handleInput(evt) {\r\n const name = evt.target.value.trim();\r\n this.setState({\r\n projectName: name,\r\n });\r\n }\r\n\r\n newProjectOnClick() {\r\n this.setState((prevState) => {\r\n return {\r\n step1: !prevState.step1,\r\n step2: !prevState.step2,\r\n };\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {/* eslint-disable-next-line */}\r\n
\r\n \r\n
\r\n )}\r\n {project.liveVersion && project.latestVersion.sameAsLive\r\n && (\r\n {i18n.t('unpublished-changes')}
\r\n\r\n
\r\n )}\r\n \r\n \r\n {project.latestVersion.logoImage !== null ? 
: defaultLogo}\r\n
\r\n {project.liveVersion && !project.latestVersion.sameAsLive ? dateModifiedtext : dateModified}
\r\n {version.name ? version.name : 'Untitled Project'}
\r\n \r\n\r\n {deleteConfirmModal}\r\n
\r\n \r\n {this.state.step1\r\n && (\r\n // eslint-disable-next-line\r\n
\r\n );\r\n }\r\n}\r\nexport default NewProjectItem;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\nimport ProjectItem from './ProjectItem';\r\nimport NewProjectItem from './NewProjectItem';\r\n\r\nclass ProjectsList extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.deleteProject = this.deleteProject.bind(this);\r\n }\r\n\r\n getChurchInitials = (church) => { // eslint-disable-next-line\r\n if(typeof church != 'undefined' && church !== null) {\r\n return church.split(' ')\r\n .map((x) => { return x[0]; })\r\n .join('')\r\n .substring(0, 4);\r\n }\r\n\r\n return '';\r\n }\r\n\r\n deleteProject(project) {\r\n this.props.deleteProject(project);\r\n }\r\n\r\n render() {\r\n const {\r\n projects,\r\n newProjectOnClick,\r\n } = this.props;\r\n return (\r\n \r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n
\r\n
\r\n )}\r\n {this.state.step2\r\n && (\r\n \r\n {/* eslint-disable-next-line */}\r\n \r\n
\r\n {i18n.t('projects.new')}\r\n \r\n
\r\n \r\n {/* eslint-disable-next-line */}\r\n
\r\n )}\r\n \r\n
\r\n\r\n );\r\n }\r\n}\r\n\r\nexport default ProjectsList;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport _actions from '../../actions';\r\nimport AppWrapper from '../../components/structure/AppWrapper';\r\nimport AppHeader from '../../components/structure/AppHeader';\r\nimport ProjectsList from '../../components/projects/ProjectsList';\r\nimport i18n from '../../i18n';\r\nimport constants from '../../constants';\r\nimport VersionFree from '../../components/structure/VersionFree';\r\n\r\nclass ProjectsPage extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.createNewProject = this.createNewProject.bind(this);\r\n this.handleDeleteProject = this.handleDeleteProject.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n const tk = localStorage.getItem('AuthToken'); // eslint-disable-next-line\r\n if (tk == undefined || tk == null) {\r\n this.props.history.push('/no-access');\r\n }\r\n this.props.actions.changeProjects();\r\n\r\n this.props.actions.getTemplates();\r\n this.props.actions.getProjects();\r\n\r\n document.body.classList.add('projects-page');\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n // eslint-disable-next-line max-len\r\n if (this.props.profiles?.data?.id !== '') {\r\n\r\n if (this.props.projects && this.props.projects.newIds) {\r\n this.props.history.push(`/projects/${this.props.projects.newIds.newProjectId}/general-info/`);\r\n }\r\n\r\n if (this.props.versions && this.props.versions.isNew) {\r\n this.props.history.push(`/projects/${this.props.versions.projectId}/general-info`);\r\n }\r\n }\r\n if (prevProps.projects.data?.length !== this.props.projects.data?.length) {\r\n /***Pendo Installation ***/\r\n /* eslint-disable */\r\n let isUnity = localStorage.getItem('IsUnity');\r\n if (isUnity === 'true') {\r\n let accountId = localStorage.getItem('UnityOrgId');\r\n let visitorId = localStorage.getItem('UnityUserId');\r\n let pendoEmail = localStorage.getItem('UnityEmail');\r\n let pendoFirstName = localStorage.getItem('FirstName');\r\n let pendoLastName = localStorage.getItem('LastName');\r\n let pendoOrgName = localStorage.getItem('ChurchName');\r\n let pendoFullName = pendoFirstName + ' ' + pendoLastName;\r\n let pendoWhiteLabel = 'Unity';\r\n let pendoCreationDate = 'unknown';\r\n let pendoCity = 'unknown';\r\n let pendoState = 'unknown';\r\n let pendoZip = 'unknown';\r\n if (this.props.projects.data.length > 0) {\r\n pendoCreationDate = this.props.projects.data[0].dateCreated;\r\n pendoCity = this.props.projects.data[0].latestVersion.churchCity;\r\n pendoState = this.props.projects.data[0].latestVersion.churchState;\r\n pendoZip = this.props.projects.data[0].latestVersion.churchZip;\r\n if (accountId && visitorId) {\r\n (function (apiKey) {\r\n (function (p, e, n, d, o) {\r\n var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = [];\r\n v = ['initialize', 'identify', 'updateOptions', 'pageLoad']; for (w = 0, x = v.length; w < x; ++w) (function (m) {\r\n o[m] = o[m] || function () { o._q[m === v[0] ? 'unshift' : 'push']([m].concat([].slice.call(arguments, 0))); };\r\n })(v[w]);\r\n y = e.createElement(n); y.async = !0; y.src = 'https://cdn.pendo.io/agent/static/' + apiKey + '/pendo.js';\r\n z = e.getElementsByTagName(n)[0]; z.parentNode.insertBefore(y, z);\r\n })(window, document, 'script', 'pendo');\r\n pendo.initialize({\r\n visitor: {\r\n id: visitorId,\r\n email: pendoEmail,\r\n AB_FirstName: pendoFirstName,\r\n },\r\n account: {\r\n id: accountId,\r\n AB_WhiteLabel: pendoWhiteLabel,\r\n AB_CreationDate: pendoCreationDate,\r\n AB_City: pendoCity,\r\n AB_State: pendoState,\r\n AB_Zip: pendoZip,\r\n full_name: pendoFullName.toLowerCase(),\r\n name: pendoOrgName\r\n /* AB_LegacyID: pendolegacyId */\r\n }\r\n });\r\n })('dec509d5-1495-45a2-65a5-0c7a69ff7ecb');\r\n }\r\n }\r\n }\r\n else if (isUnity === 'false') {\r\n let accountId = this.props.profiles.data.organizationId;\r\n let visitorId = this.props.profiles.data.id;\r\n let pendoEmail = this.props.profiles.data.email;\r\n let pendoFirstName = this.props.profiles.data.name;\r\n let pendoFullName = this.props.profiles.data.name;\r\n let pendoWhiteLabel = this.props.profiles.data.resellerName;\r\n let pendolegacyId = this.props.profiles.data.givingChurchId;\r\n let pendoCreationDate = 'unknown';\r\n let pendoCity = 'unknown';\r\n let pendoState = 'unknown';\r\n let pendoZip = 'unknown';\r\n let pendoOrgName = 'unknown';\r\n\r\n if (this.props.projects.data.length > 0) {\r\n pendoCreationDate = this.props.projects.data[0].dateCreated;\r\n pendoCity = this.props.projects.data[0].latestVersion.churchCity;\r\n pendoState = this.props.projects.data[0].latestVersion.churchState;\r\n pendoZip = this.props.projects.data[0].latestVersion.churchZip;\r\n pendoOrgName = this.props.projects.data[0].latestVersion.churchName;\r\n\r\n if (accountId && visitorId) {\r\n (function (apiKey) {\r\n (function (p, e, n, d, o) {\r\n var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = [];\r\n v = ['initialize', 'identify', 'updateOptions', 'pageLoad']; for (w = 0, x = v.length; w < x; ++w) (function (m) {\r\n o[m] = o[m] || function () { o._q[m === v[0] ? 'unshift' : 'push']([m].concat([].slice.call(arguments, 0))); };\r\n })(v[w]);\r\n y = e.createElement(n); y.async = !0; y.src = 'https://cdn.pendo.io/agent/static/' + apiKey + '/pendo.js';\r\n z = e.getElementsByTagName(n)[0]; z.parentNode.insertBefore(y, z);\r\n })(window, document, 'script', 'pendo');\r\n pendo.initialize({\r\n visitor: {\r\n id: visitorId,\r\n email: pendoEmail,\r\n AB_FirstName: pendoFirstName\r\n },\r\n account: {\r\n id: accountId,\r\n AB_WhiteLabel: pendoWhiteLabel,\r\n AB_CreationDate: pendoCreationDate,\r\n AB_City: pendoCity,\r\n AB_State: pendoState,\r\n AB_Zip: pendoZip,\r\n AB_LegacyID: pendolegacyId,\r\n full_name: pendoFullName.toLowerCase(),\r\n name: pendoOrgName\r\n }\r\n });\r\n })('dec509d5-1495-45a2-65a5-0c7a69ff7ecb');\r\n }\r\n }\r\n }\r\n else {\r\n console.log('IsUnity flag is not set');\r\n }\r\n ; /* eslint-enable */\r\n /***Pendo Installation ***/\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n document.body.classList.remove('projects-page');\r\n }\r\n\r\n handleDeleteProject(project) {\r\n this.props.actions.deleteProjectVersion(project);\r\n }\r\n\r\n createNewProject(name) {\r\n let isUnity = true;\r\n if(localStorage.getItem('IsUnity') === 'true'){\r\n isUnity = true;\r\n }\r\n else{\r\n isUnity = false;\r\n }\r\n\r\n this.props.actions.createProject(name, isUnity);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )}\r\n {this.props.projects.data.filter(\r\n (project) => { return project.liveVersion; },\r\n ).length > 0\r\n && (\r\n \r\n
\r\n \r\n \r\n {i18n.t('promote.promote')}\r\n \r\n \r\n {i18n.t('promote.subheader')}\r\n \r\n\r\n \r\n {i18n.t('promote.intro')}\r\n \r\n \r\n {i18n.t('promote.link-it')}\r\n \r\n \r\n {i18n.t('promote.link-copy')}\r\n \r\n {\r\n // eslint-disable-next-line no-return-assign\r\n return this.textArea = textarea;\r\n }}\r\n readOnly\r\n value={this.props.organization.data}\r\n />\r\n {/* eslint-disable-next-line */}\r\n \r\n {i18n.t('promote.copy')}\r\n \r\n \r\n {i18n.t('promote.share-button')}\r\n \r\n
\r\n )}\r\n {!this.props.projects.inProgress && this.props.projects.data.filter(\r\n (project) => { return project.liveVersion; },\r\n ).length === 0\r\n && (\r\n {i18n.t('promote.share-public')}
\r\n{i18n.t('promote.share-copy')}
\r\n\r\n
\r\n
\r\n )}\r\n {i18n.t('promote.share-it')}
\r\n{i18n.t('promote.social-copy')}
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {i18n.t('promote.promote')}\r\n \r\n \r\n {i18n.t('promote.subheader-unpublished')}\r\n \r\n\r\n \r\n {i18n.t('promote.intro-unpublished')}\r\n \r\n
\r\n )}\r\n {message}
\r\n );\r\n }\r\n\r\n return <>{ children };\r\n}\r\n","/* eslint-disable */\r\nimport React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport _actions from '../../actions';\r\nimport VersionFree from '../../components/structure/VersionFree.js';\r\nimport i18n from './../../i18n';\r\nimport moment from 'moment-timezone';\r\nimport constants from '../../constants';\r\nimport DatePicker from 'react-datepicker';\r\nimport Select from 'react-select';\r\nimport getMonth from \"date-fns/getMonth\";\r\nimport getYear from \"date-fns/getYear\";\r\nimport NewCalendar from '../../components/svg/NewCalendar';\r\nimport appStateProvider from '../../utilities/appStateProvider.js';\r\n\r\nimport { ActiveUsers, AppInstalls, Checkins, ContactFormSubmissions, EventRegistrations, LiveStreamViews, PageViews, SermonPlays, Sessions } from './AnalyticsElements.js';\r\nimport { AnalyticsFeatureGuard } from './AnalyticsFeatureGuard.js';\r\nimport { TextareaAutosize } from '@material-ui/core';\r\n\r\nclass AnalyticsPage extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n const appState = appStateProvider();\r\n const anaylticsToken = appState.getAnalyticsToken();\r\n this.state = {\r\n token: anaylticsToken.token, //this.props.profiles.token,\r\n isUnity: anaylticsToken.isUnity, //this.props.profiles.isUnity,\r\n tokenInput: localStorage.getItem(\"SessionId\"), //this.props.profiles.token,\r\n analytics: null,\r\n landing: {},\r\n error: {},\r\n loading: true,\r\n showCustom: false,\r\n startDateTimeObject: moment().hour(0).minute(0).seconds(0).add(-30, 'days'),\r\n endDateTimeObject: moment().hour(23).minute(59).seconds(59).milliseconds(999),\r\n analyticsDateChoice: \"30\",\r\n analyticsDateOptions: [{label: 'Last 7 Days', value: '7'}, {\r\n label: 'Last 30 Days',\r\n value: '30'\r\n }, {label: 'Last 90 Days', value: '90'}, {label: 'Custom', value: 'Custom'}]\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n\r\n if (typeof window.ANALYTICS_URL !== 'undefined') {\r\n this.initiateAnalytics();\r\n }\r\n document.body.classList.add('analytics-page', 'version-free');\r\n /* eslint-disable */\r\n let accountId = this.props.profiles.data.organizationId;\r\n let visitorId = this.props.profiles.data.id; \r\n\t\tif(accountId && visitorId){\r\n (function (apiKey) {\r\n (function (p, e, n, d, o) {\r\n var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = [];\r\n v = ['initialize', 'identify', 'updateOptions', 'pageLoad']; for (w = 0, x = v.length; w < x; ++w) (function (m) {\r\n o[m] = o[m] || function () { o._q[m === v[0] ? 'unshift' : 'push']([m].concat([].slice.call(arguments, 0))); };\r\n })(v[w]);\r\n y = e.createElement(n); y.async = !0; y.src = 'https://cdn.pendo.io/agent/static/' + apiKey + '/pendo.js';\r\n z = e.getElementsByTagName(n)[0]; z.parentNode.insertBefore(y, z);\r\n })(window, document, 'script', 'pendo');\r\n pendo.initialize({\r\n visitor: {\r\n id: visitorId,\r\n },\r\n account: {\r\n id: accountId,\r\n }\r\n });\r\n })('dec509d5-1495-45a2-65a5-0c7a69ff7ecb'); \r\n\t\t}\r\n }\r\n\r\n\r\n componentWillUnmount() {\r\n document.body.classList.remove('analytics-page', 'version-free');\r\n }\r\n\r\n clearWarning = () => {\r\n this.props.actions.clearAlert('data-warning');\r\n }\r\n handleStartDateChange = (e) => {\r\n const year = moment(e).format('YYYY');\r\n const month = parseInt(moment(e).format('MM')) - 1;\r\n const day = moment(e).format('DD');\r\n this.setState({startDateTimeObject: moment(this.state.StartDateTimeObject).year(year).month(month).date(day).hour(0).minute(0).seconds(0)});\r\n }\r\n\r\n\r\n handleEndDateChange = (e) => {\r\n const year = moment(e).format('YYYY');\r\n const month = parseInt(moment(e).format('MM')) - 1;\r\n const day = moment(e).format('DD');\r\n this.setState({endDateTimeObject: moment(this.state.EndDateTimeObject).year(year).month(month).date(day).hour(23).minute(59).seconds(59).milliseconds(999)});\r\n }\r\n\r\n openDatepicker1 = () => this._calendar1.setOpen(true);\r\n openDatepicker2 = () => this._calendar2.setOpen(true);\r\n updateDateChoice = (e) => {\r\n this.setState({analyticsDateChoice: e.value});\r\n if (e.value != 'Custom') {\r\n this.setState({\r\n showCustom: false,\r\n endDateTimeObject: moment().hour(23).minute(59).seconds(59).milliseconds(999),\r\n startDateTimeObject: moment().hour(0).minute(0).seconds(0).add(-e.value, 'Days')\r\n });\r\n } else {\r\n this.setState({showCustom: true});\r\n }\r\n\r\n }\r\n\r\n initiateAnalytics() {\r\n if (window.com?.mb?.analytics && !this.state.analytics) {\r\n window.com.mb.analytics.init();\r\n this.setState({ analytics: window.com?.mb?.analytics})\r\n } else {\r\n setTimeout(() => {\r\n this.initiateAnalytics();\r\n }, 500);\r\n }\r\n }\r\n\r\n onOpenCalendar = (e) => {\r\n let t = document.getElementsByClassName('month-selector');\r\n if (typeof window.SimpleBar != 'undefined') {\r\n const bars = function () {\r\n setTimeout(function () {\r\n new window.SimpleBar(document.getElementsByClassName('Select-menu')[0]);\r\n }, 1);\r\n };\r\n for (var i = 0; i < t.length; i++) {\r\n t[i].addEventListener('click', bars, false);\r\n }\r\n }\r\n }\r\n\r\n setStateFromEvent = (e, stateKey) => {\r\n const stateObj = {};\r\n stateObj[stateKey] = e.target.value;\r\n this.setState(stateObj);\r\n }\r\n\r\n render() {\r\n const currentYear = (new Date()).getFullYear();\r\n const range = (start, stop, step) => Array.from({length: (stop - start) / step + 1}, (_, i) => start + (i * step));\r\n const years = (range(currentYear, 2019, -1));\r\n const months = [\r\n \"January\",\r\n \"February\",\r\n \"March\",\r\n \"April\",\r\n \"May\",\r\n \"June\",\r\n \"July\",\r\n \"August\",\r\n \"September\",\r\n \"October\",\r\n \"November\",\r\n \"December\"\r\n ];\r\n\r\n return (\r\n \r\n Analytics is not available for Internet Explorer. Please use another browser.\r\n
}\r\n {!(navigator.userAgent.indexOf('MSIE') !== -1\r\n || navigator.appVersion.indexOf('Trident/') > -1) &&\r\n \r\n \r\n <>\r\n
\r\n {i18n.t('analytics.analytics')}
\r\n\r\n {\r\n return f.value === this.state.analyticsDateChoice;\r\n })}\r\n onChange={this.updateDateChoice}\r\n clearable={false}\r\n searchable={false}\r\n\r\n />\r\n {this.state.showCustom &&\r\n
\r\n }\r\n\r\n \r\n this._calendar1 = c}\r\n renderCustomHeader={({\r\n date,\r\n changeYear,\r\n changeMonth,\r\n decreaseMonth,\r\n increaseMonth,\r\n prevMonthButtonDisabled,\r\n nextMonthButtonDisabled\r\n }) => (\r\n\r\n
}\r\n {this.state.showCustom && }\r\n {this.state.showCustom &&\r\n \r\n \r\n
\r\n )}\r\n />\r\n \r\n this._calendar2 = c}\r\n selected={moment(this.state.endDateTimeObject)\r\n .toDate()}\r\n onChange={this.handleEndDateChange}\r\n selectsEnd\r\n startDate={moment(this.state.startDateTimeObject)\r\n .toDate()}\r\n endDate={moment(this.state.endDateTimeObject)\r\n .toDate()}\r\n minDate={moment(this.state.startDateTimeObject)\r\n .toDate()}\r\n maxDate={moment().toDate()}\r\n popperPlacement=\"top-end\"\r\n useWeekdaysShort={true}\r\n renderCustomHeader={({\r\n date,\r\n changeYear,\r\n changeMonth,\r\n decreaseMonth,\r\n increaseMonth,\r\n prevMonthButtonDisabled,\r\n nextMonthButtonDisabled\r\n }) => (\r\n\r\n \r\n \r\n
\r\n )}\r\n\r\n />\r\n Timezone: {moment.tz(moment.tz.guess()).zoneAbbr()}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {window.genesisQA && \r\n this.setStateFromEvent(e, 'tokenInput')}\r\n id=\"txtToken\"\r\n />\r\n \r\n
}\r\n \r\n \r\n }\r\n \r\n
\r\n );\r\n const view = (\r\n Choose a Template
\r\n\r\n {false ? head : ''}\r\n
\r\n );\r\n if (this.props.versions.updatedNew) {\r\n this.props.history.push(`/projects/${this.props.versions.select.projectId}/general-info`);\r\n }\r\n return view;\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Templates);\r\n","import queryString from 'query-string'; // eslint-disable-line\r\n\r\nexport const getQueryVar = (key) => {\r\n const parsedQuery = queryString.parse(window.location.search);\r\n if (parsedQuery[key]) {\r\n return parsedQuery[key];\r\n }\r\n return null;\r\n};\r\n\r\nexport default getQueryVar;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { getQueryVar } from '../../query/getQueryVar';\r\nimport { setsessionId, setToken } from '../../token/setToken';\r\n\r\nclass Login extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.props = props;\r\n this.getAndSetToken();\r\n }\r\n\r\n getAndSetToken = () => {\r\n const queryToken = getQueryVar('jwt');\r\n const sessionId = getQueryVar('sessionId');\r\n if (queryToken != null) {\r\n if (typeof (Storage) !== 'undefined') {\r\n localStorage.clear();\r\n localStorage.setItem('AuthToken', queryToken);\r\n setToken();\r\n if (sessionId != null) {\r\n localStorage.setItem('SessionId', sessionId);\r\n setsessionId();\r\n }\r\n this.redirect();\r\n }\r\n }\r\n }\r\n\r\n setTokenToLocalStorage = (tokenValue) => {\r\n localStorage.setItem('AuthToken', tokenValue);\r\n }\r\n\r\n redirect = () => {\r\n const projectId = getQueryVar('projectId');\r\n if (projectId?.length !== 36) {\r\n this.props.history.push('/');\r\n } else {\r\n this.props.history.push(`/projects/${projectId}/general-info`);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Login;\r\n","import React from 'react'; // eslint-disable-line\r\n\r\nclass DropMenu extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.logout = this.logout.bind(this);\r\n }\r\n\r\n logout() {\r\n if (this.props.logout) {\r\n this.props.logout();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n Visible,\r\n } = this.props;\r\n\r\n return (\r\n \r\n {this.props.templates.data.map((template) => {\r\n return (\r\n
\r\n \r\n {/* eslint-disable-next-line */}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default DropMenu;\r\n","import React, { Component } from 'react'; // eslint-disable-line\r\n\r\nconst NineDot = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default NineDot;\r\n","import React from 'react'; // eslint-disable-line\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport { translate } from 'react-i18next';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport _actions from '../../actions';\r\nimport constants from '../../constants';\r\nimport StaticBrand from '../../assets/styles/img/navbar-brand.svg';\r\nimport DropMenu from '../../components/common/DropMenu';\r\nimport NineDot from '../../components/svg/NineDot';\r\nimport CaptionTooltip from '../../components/common/CaptionTooltip';\r\nimport i18n from '../../i18n';\r\nimport { refreshToken } from '../../token/refreshToken';\r\n// import { setsessionId } from '../../token/setToken';\r\n\r\nclass Header extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n loggingout: false,\r\n dropOpen: false,\r\n waffle: false,\r\n };\r\n this.logout = this.logout.bind(this);\r\n this.toggleDrop = this.toggleDrop.bind(this);\r\n this.handleClickOutside = this.handleClickOutside.bind(this);\r\n this.setWrapperRef = this.setWrapperRef.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n document.addEventListener('mousedown', this.handleClickOutside);\r\n this.props.actions.getCurrentProfile(this.props.profiles);\r\n this.props.actions.getWaffleToken();\r\n this.toggleMobileMenuState = this.toggleMobileMenuState.bind(this);\r\n setTimeout(() => {\r\n if (!window.GENESIS_APIUP) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('banners.apiDown'),\r\n clearable: false,\r\n type: 'banner',\r\n id: 'API',\r\n global: true,\r\n });\r\n }\r\n }, 10000);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (prevState.loggingout && this.props.router.location.pathname === '/logged-out') {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ loggingout: false });\r\n }\r\n if (this.props.profiles?.data?.organizationId\r\n && !prevProps.profiles?.data?.organizationId) {\r\n if (window.RESTRICTED_ORGS.includes(this.props.profiles.data.organizationId)) {\r\n this.props.actions.addAlert({\r\n message: i18n.t('banners.appleStoreOrg'),\r\n type: 'banner',\r\n id: 'apple',\r\n global: true,\r\n dismissable: true,\r\n });\r\n }\r\n }\r\n if (this.props.waffle.data?.length > 0 && !prevProps.waffle.data?.length > 0) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({ waffle: true });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener('mousedown', this.handleClickOutside);\r\n }\r\n\r\n handleClickOutside(event) {\r\n if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {\r\n this.setState({ dropOpen: false });\r\n }\r\n }\r\n\r\n setWrapperRef(node) {\r\n this.wrapperRef = node;\r\n }\r\n\r\n getInitials = (name) => {\r\n if (name) {\r\n // eslint-disable-next-line no-param-reassign\r\n name = name.trim();\r\n const spaceLoc = name.lastIndexOf(' ');\r\n if (spaceLoc > 0) {\r\n const firstName = name.substring(0, spaceLoc);\r\n const lastName = name.substring(spaceLoc + 1, name.length);\r\n return `${firstName[0]}${lastName[0]}`;\r\n }\r\n return name[0];\r\n }\r\n return '';\r\n }\r\n\r\n toggleDrop() {\r\n this.setState((prevState) => { return { dropOpen: !prevState.dropOpen }; });\r\n }\r\n\r\n logout() {\r\n this.toggleDrop();\r\n console.log('finished toggledrop');\r\n localStorage.clear();\r\n console.log('finished local clear');\r\n this.props.actions.logout();\r\n this.setState({ loggingout: true });\r\n }\r\n\r\n toggleMobileMenuState() {\r\n this.props.actions.toggleMobileMenuShown(this.props.sidecar.showMobile);\r\n }\r\n\r\n render() {\r\n if (this.state.loggingout) {\r\n return \r\n {/* eslint-disable-next-line react/button-has-type */}\r\n \r\n
\r\n \r\n {this.props.router?.location?.pathname?.indexOf('/projects/') === 0 && this.props.router?.location?.pathname?.length > 20 && (\r\n // eslint-disable-next-line\r\n \r\n {t('header-tooltips.toggle-navigation')}\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...state,\r\n ...ownProps,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n actions: bindActionCreators(_actions, dispatch),\r\n };\r\n};\r\n\r\nexport default translate('translations')(connect(mapStateToProps, mapDispatchToProps)(Header));\r\n"],"sourceRoot":""}\r\n 
\r\n
\r\n {this.props.profiles?.data?.name && (\r\n \r\n ) }\r\n