Layout of modal component

packages/components/packages/Universal-modal/package.json

 {
-  "name": "component-universal-modal",
+  "name": "pubsweet-component-universal-modal",
   "version": "0.0.1",
   "description": "A Univeral Modal for usage across all the pubsweet universe",
   "main": "index.js",
@@ -8,8 +8,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://gitlab.coko.foundation/pubsweet/pubsweet",
-    "path": "Universal-modal"
+    "url": "https://gitlab.coko.foundation/pubsweet/pubsweet-components"
   },
   "author": "Collaborative Knowledge Foundation",
   "license": "MIT",

packages/components/packages/Universal-modal/src/Modal.js

-import React from 'react'
-import Modal from 'react-modal'
-
-Modal.setAppElement('#root')
-const UniversalModal = props => {
-  const {
-    isOpen,
-    modalType,
-    component,
-    successFn,
-    cancelFn,
-    onAfterOpen,
-    onRequestClose,
-    closeTimeoutMS,
-    style,
-    contentLabel
-  } = props.modal
-
-  return (
-    <div>
-      <Modal contentLabel={contentLabel} isOpen={isOpen}>
-        {component}
-      </Modal>
-    </div>
-  )
-}
-
-export default UniversalModal

packages/components/packages/Universal-modal/src/ModalContainer.js

 import { connect } from 'react-redux'
-import Modal from './Modal'
+import Modal from './components/Modal'
 
 export default connect(state => ({
   modal: state.modal,

packages/components/packages/Universal-modal/src/ModalWrapper.js

+import { Component } from 'react'
+import { connect } from 'react-redux'
+import * as actions from './actions'
+import UniversalModal from './components/Modal'
+import FooterModal from './components/FooterModal'
+
+class Wrapper extends Component {
+  componentDidMount() {
+    const layout = {
+      body: this.props.Component,
+      header: this.props.Header,
+      footer: this.props.Footer,
+    }
+    UniversalModal.addComponent(this.props.name, layout)
+  }
+
+  render() {
+    return this.props.children
+  }
+}
+
+export default connect(
+  state => ({
+    modal: state.modal,
+  }),
+  {
+    toggleModal: dispatch => ({
+      toggleModal: modalProps => dispatch(actions.toggleModal(modalProps)),
+    }),
+  },
+)(Wrapper)

packages/components/packages/Universal-modal/src/components/FooterModal.js

+import React from 'react'
+import { Button, PlainButton } from '@pubsweet/ui'
+
+const FooterModal = props => (
+  <div>
+    <Button primary type="submit">
+      Submit your manuscript
+    </Button>
+    <span className={' '}> or </span>
+    <PlainButton onClick={() => props.toggleModal({ component: 'modalOne' })}>
+      get back to your submission
+    </PlainButton>
+  </div>
+)
+
+export default FooterModal

packages/components/packages/Universal-modal/src/components/HeaderModal.js

+import React from 'react'
+import { PlainButton } from '@pubsweet/ui'
+
+const HeaderModal = props => (
+  <div>
+    <h4 className="modal-title">{props.title}</h4>
+    <PlainButton onClick={() => props.toggleModal({ component: 'modalOne' })}>
+      x
+    </PlainButton>
+  </div>
+)
+
+export default HeaderModal

packages/components/packages/Universal-modal/src/components/Modal.js

+import React, { Component } from 'react'
+import Modal from 'react-modal'
+import config from 'config'
+import * as actions from '../actions'
+import HeaderModal from './HeaderModal'
+import FooterModal from './FooterModal'
+
+let mountedInstance = {}
+
+class UniversalModal extends Component {
+  constructor() {
+    super()
+    const rootElem = config['pubsweet-component-universal-modal']['rootElem']
+    Modal.setAppElement(rootElem)
+  }
+
+  componentDidMount() {
+    this.components = []
+    mountedInstance = this
+  }
+
+  modalActions() {
+    return args => this.props.dispatch(actions.toggleModal(args))
+  }
+
+  render() {
+    const modalInstances = this.props.modal
+    let BodyTemplate = null
+    let HeaderTemplate = HeaderModal
+    let FooterTemplate = FooterModal
+    return (
+      <div>
+        {modalInstances.map((instance, index) => {
+          const RenderModalTemplate = mountedInstance.components.find(
+            elem => elem.name === instance.component,
+          )
+
+          if (RenderModalTemplate) {
+            BodyTemplate = RenderModalTemplate.layout.body || null
+            HeaderTemplate = RenderModalTemplate.layout.header || HeaderModal
+            FooterTemplate = RenderModalTemplate.layout.footer || FooterModal
+          }
+
+          return BodyTemplate ? (
+            <Modal
+              contentLabel={instance.contentLabel}
+              isOpen={instance.isOpen}
+              key={`'modal-'index`}
+            >
+              <HeaderTemplate
+                title={instance.title}
+                toggleModal={this.modalActions(this.props)}
+              />
+              <BodyTemplate toggleModal={this.modalActions(this.props)} />
+              <FooterTemplate toggleModal={this.modalActions(this.props)} />
+            </Modal>
+          ) : null
+        })}
+      </div>
+    )
+  }
+}
+
+UniversalModal.addComponent = (name, ModalComponent) => {
+  const obj = {
+    name,
+    layout: ModalComponent,
+  }
+  mountedInstance.components.push(obj)
+}
+
+export default UniversalModal

packages/components/packages/Universal-modal/src/reducers.js

 import { TOGGLE_MODAL_TRIGGER } from './types'
 
-export default function modal(
-  state = {
-    isOpen: false,
-    modalType: 'confirm',
-    component: null,
-    successFn: null,
-    cancelFn: null,
-    onAfterOpen: () => {},
-    onRequestClose: () => {},
-    closeTimeoutMS: 150,
-    style: {},
-    contentLabel: 'Modal',
-  },
-  action,
-) {
+export default function modal(state = [], action) {
   if (action.type === TOGGLE_MODAL_TRIGGER) {
-    const modal = {
-      isOpen: action.isOpen,
-      modalType: action.modalType,
-      component: action.component,
-      successFn: action.successFn,
-      cancelFn: action.cancelFn,
-      onAfterOpen: action.onAfterOpen,
-      onRequestClose: action.onRequestClose,
-      closeTimeoutMS: action.closeTimeoutMS,
-      style: action.style,
-      contentLabel: action.contentLabel,
+    let find = false
+
+    const modalState = state.map(item => {
+      if (item.component === action.component) {
+        find = true
+        item.isOpen = !item.isOpen
+        return { ...item, ...action.payload }
+      }
+      return item
+    })
+
+    if (!find) {
+      const modalProps = {
+        isOpen: true,
+        title: action.title,
+        component: action.component,
+        onAfterOpen: action.onAfterOpen,
+        onRequestClose: action.onRequestClose,
+        closeTimeoutMS: action.closeTimeoutMS,
+        style: action.style,
+        contentLabel: action.contentLabel,
+      }
+
+      modalState.push(modalProps)
     }
-    return Object.assign({}, state, modal)
+
+    return modalState
   }
   return state
 }