block ink imports for locked chapters

app/components/BookBuilder/Chapter/SecondRow.jsx

@@ -20,6 +20,7 @@ class ChapterSecondRow extends React.Component {
             accept='.docx'
             chapter={chapter}
             convertFile={convertFile}
+            modalContainer={outerContainer}
             title=' '
             toggleUpload={toggleUpload}
             type='file'

app/components/BookBuilder/Chapter/UploadButton.jsx

 import React from 'react'
+
+import UploadWarningModal from './UploadWarningModal'
 import styles from '../styles/bookBuilder.local.scss'
 
 export class UploadButton extends React.Component {
   constructor (props) {
     super(props)
+
     this.handleFileUpload = this.handleFileUpload.bind(this)
+    this.onClick = this.onClick.bind(this)
+    this.toggleModal = this.toggleModal.bind(this)
+
+    this.state = {
+      showModal: false
+    }
   }
 
   handleFileUpload (event) {
@@ -29,10 +38,30 @@ export class UploadButton extends React.Component {
     })
   }
 
-  render () {
+  toggleModal () {
+    this.setState({
+      showModal: !this.state.showModal
+    })
+  }
+
+  onClick () {
+    if (!this.isLocked()) return
+    this.toggleModal()
+  }
+
+  isLocked () {
+    const { chapter } = this.props
+
+    if (chapter.lock === null) return false
+    return true
+  }
+
+  renderInput () {
+    if (this.isLocked()) return null
+
     const { accept, title, type } = this.props
 
-    const input = (
+    return (
       <input
         accept={accept}
         onChange={this.handleFileUpload}
@@ -40,14 +69,45 @@ export class UploadButton extends React.Component {
         type={type}
       />
     )
+  }
+
+  renderModal () {
+    if (!this.isLocked()) return null
+
+    const { showModal } = this.state
+    const { modalContainer } = this.props
+
+    return (
+      <UploadWarningModal
+        container={modalContainer}
+        show={showModal}
+        toggle={this.toggleModal}
+      />
+    )
+  }
+
+  render () {
+    const input = this.renderInput()
+    const modal = this.renderModal()
+
+    // TODO -- refactor with chapter buttons lock
+    let buttonStyle = {}
+    if (this.isLocked()) {
+      buttonStyle = {
+        'opacity': '0.3'
+      }
+    }
 
     return (
       <div
         className={styles.btnFile}
         id='bb-upload'
+        onClick={this.onClick}
+        style={buttonStyle}
       >
         Upload Word
         { input }
+        { modal }
       </div>
     )
   }
@@ -57,6 +117,7 @@ UploadButton.propTypes = {
   accept: React.PropTypes.string.isRequired,
   chapter: React.PropTypes.object.isRequired,
   convertFile: React.PropTypes.func.isRequired,
+  modalContainer: React.PropTypes.object.isRequired,
   title: React.PropTypes.string.isRequired,
   toggleUpload: React.PropTypes.func.isRequired,
   type: React.PropTypes.string.isRequired,

app/components/BookBuilder/Chapter/UploadWarningModal.jsx

+import React from 'react'
+
+import AbstractModal from '../../common/AbstractModal'
+
+class UploadWarningModal extends React.Component {
+  renderBody () {
+    return (
+      <div>
+        You are not allowed to import contents while a chapter is being edited.
+      </div>
+    )
+  }
+
+  render () {
+    const { container, show, toggle } = this.props
+    const body = this.renderBody()
+    const title = 'Import not allowed'
+
+    return (
+      <AbstractModal
+        body={body}
+        container={container}
+        show={show}
+        title={title}
+        toggle={toggle}
+      />
+    )
+  }
+}
+
+UploadWarningModal.propTypes = {
+  container: React.PropTypes.object.isRequired,
+  show: React.PropTypes.bool.isRequired,
+  toggle: React.PropTypes.func.isRequired
+}
+
+export default UploadWarningModal