Simple 'get help' resources

Author: cdaniel

src-ui/map-editor/MapEditorPage.js

@@ -21,6 +21,7 @@ import EditGenericCommentDialog from './dialogs/edit-comment-dialog';
 import CreateNewSubmapDialog from './dialogs/create-new-submap-dialog';
 import SubmapReferencesDialog from './dialogs/submap-references-dialog';
 import ReferencesDialog from './dialogs/references-dialog';
+var GetHelpDialog = require('./dialogs/get-help-dialog');
 import {LinkContainer} from 'react-router-bootstrap';
 import SingleMapActions from './single-map-actions';
 import {calculateMapName} from '../map-list/map-name-calculator';
@@ -45,6 +46,8 @@ export default class MapEditorPage extends React.Component {
     this.download = this.download.bind(this);
     this.state = this.props.singleMapStore.getMap();
     this.canvasStore = new CanvasStore();
+    this.closeHelpDialog = this.closeHelpDialog.bind(this);
+    this.openHelpDialog = this.openHelpDialog.bind(this);
   }
 
   componentDidMount() {
@@ -113,6 +116,14 @@ export default class MapEditorPage extends React.Component {
     ];
   }
 
+  closeHelpDialog() {
+    this.setState({openHelpDialog: false});
+  }
+
+  openHelpDialog() {
+    this.setState({openHelpDialog: true});
+  }
+
   render() {
     const auth = this.props.auth;
     const history = this.props.history;
@@ -130,6 +141,10 @@ export default class MapEditorPage extends React.Component {
     const comments = singleMapStore.getMap().map.comments;
 
     const canvasStore = this.canvasStore;
+    const helpDialog = <GetHelpDialog open={this.state.openHelpDialog} close={this.closeHelpDialog}/>;
+    const helpMenu = <NavItem eventKey={7} href="#" onClick={this.openHelpDialog} key="help">
+      <Glyphicon glyph="education"></Glyphicon>Get help!
+    </NavItem>;
 
     return (
       <DocumentTitle title={mapName}>
@@ -139,7 +154,8 @@ export default class MapEditorPage extends React.Component {
               <AtlasNavbarWithLogout
                 auth={auth}
                 history={history}
-                mainMenu={mapMenu}/>
+                mainMenu={mapMenu}
+                rightMenu={[helpMenu]}/>
             </Col>
           </Row>
           <Row className="show-grid">
@@ -175,6 +191,7 @@ export default class MapEditorPage extends React.Component {
           <EditActionDialog singleMapStore={singleMapStore}/>
           <SubmapReferencesDialog singleMapStore={singleMapStore}/>
           <ReferencesDialog singleMapStore={singleMapStore}/>
+          {helpDialog}
         </Grid>
       </DocumentTitle>
     );

src-ui/map-editor/dialogs/get-help-dialog.js

@@ -0,0 +1,61 @@
+/*jshint esversion: 6 */
+
+var React = require('react');
+import {
+  Form,
+  FormGroup,
+  FormControl,
+  ControlLabel,
+  HelpBlock,
+  Col,
+  Radio,
+  Input,
+  Modal,
+  Button,
+  Glyphicon,
+  ListGroup,
+  ListGroupItem
+} from 'react-bootstrap';
+import ReactDOM from 'react-dom';
+
+var GetHelpDialog = React.createClass({
+
+  render: function() {
+    var show = this.props.open;
+    return (
+      <div>
+        <Modal show={show} onHide={this.props.close}>
+          <Modal.Header closeButton>
+            <Modal.Title>
+              Get help on mapping
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <ListGroup>
+              <ListGroupItem href="http://learn.leadingedgeforum.com/p/wardley-mapping/?product_id=277424&coupon_code=CDANLAUNCH">
+                <h4 class="list-group-item-heading">Enroll in a self-paced, online course</h4>
+                <p class="list-group-item-text">An excellent starter to give you all the knowledge you need to start mapping. Click here to learn more!</p>
+              </ListGroupItem>
+              {/*<ListGroupItem href="http://learn.leadingedgeforum.com/p/wardley-mapping/?product_id=277424&coupon_code=CDANLAUNCH">
+                <h4 class="list-group-item-heading">Have your map(s) reviewed</h4>
+                <p class="list-group-item-text">If you want to receive feedback on this map, click here to book a session with Chris,
+                the creator of this tool.</p>
+              </ListGroupItem>
+              <ListGroupItem href="http://learn.leadingedgeforum.com/p/wardley-mapping/?product_id=277424&coupon_code=CDANLAUNCH">
+                <h4 class="list-group-item-heading">Book a kickstart session</h4>
+                <p class="list-group-item-text">Get assistance in mapping your company. You will be able to focus on your business problem instead of wondering, whether your maps are correct.
+                Helpful advice will be also at hand, when you need it! Click to request contact!</p>
+              </ListGroupItem>*/}
+              <ListGroupItem href="http://wardleymaps.com/advanced">
+                <h4 class="list-group-item-heading">Premium, on-site workshop</h4>
+                <p class="list-group-item-text">A two-day mapping class delivered by mr. Simon Wardley himself, personally, at your premise. Click to learn more!</p>
+              </ListGroupItem>
+            </ListGroup>
+          </Modal.Body>
+        </Modal>
+      </div>
+    );
+  }
+});
+
+module.exports = GetHelpDialog;