Survey (#328)

Elements promoting the survey inside Maputnik

src/components/App.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
+import {instanceOf} from 'prop-types';
 import Mousetrap from 'mousetrap'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
 import {arrayMove} from 'react-sortable-hoc';
+import {withCookies, Cookies} from 'react-cookie'
 import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
@@ -18,6 +20,7 @@ import ExportModal from './modals/ExportModal'
 import SourcesModal from './modals/SourcesModal'
 import OpenModal from './modals/OpenModal'
 import ShortcutsModal from './modals/ShortcutsModal'
+import SurveyModal from './modals/SurveyModal'
 
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
 import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
@@ -50,7 +53,11 @@ function updateRootSpec(spec, fieldName, newValues) {
   }
 }
 
-export default class App extends React.Component {
+class App extends React.Component {
+  static propTypes = {
+    cookies: instanceOf(Cookies).isRequired
+  }
+
   constructor(props) {
     super(props)
     this.revisionStore = new RevisionStore()
@@ -172,6 +179,7 @@ export default class App extends React.Component {
         open: false,
         shortcuts: false,
         export: false,
+        survey: this.props.cookies.get('survey') ? false : true
       },
       mapOptions: {
         showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries")
@@ -449,6 +457,10 @@ export default class App extends React.Component {
         [modalName]: !this.state.isOpen[modalName]
       }
     })
+
+    if(modalName === 'survey') {
+      this.props.cookies.set('survey');
+    }
   }
 
   render() {
@@ -528,6 +540,10 @@ export default class App extends React.Component {
         isOpen={this.state.isOpen.sources}
         onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />
+      <SurveyModal
+        isOpen={this.state.isOpen.survey}
+        onOpenToggle={this.toggleModal.bind(this, 'survey')}
+      />
     </div>
 
     return <AppLayout
@@ -540,3 +556,5 @@ export default class App extends React.Component {
     />
   }
 }
+
+export default withCookies(App)

src/components/Toolbar.jsx

@@ -16,6 +16,7 @@ import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
 import MdFontDownload from 'react-icons/lib/md/font-download'
 import HelpIcon from 'react-icons/lib/md/help-outline'
 import InspectionIcon from 'react-icons/lib/md/find-in-page'
+import SurveyIcon from 'react-icons/lib/md/assignment-turned-in'
 
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'
@@ -52,6 +53,28 @@ class ToolbarLink extends React.Component {
   }
 }
 
+class ToolbarLinkHighlighted extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    href: PropTypes.string,
+    onToggleModal: PropTypes.func
+  }
+
+  render() {
+    return <a
+      className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted2", this.props.className)}
+      href={this.props.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <span className="maputnik-toolbar-link-wrapper">
+        {this.props.children}
+      </span>
+    </a>
+  }
+}
+
 class ToolbarAction extends React.Component {
   static propTypes = {
     children: PropTypes.node,
@@ -146,6 +169,10 @@ export default class Toolbar extends React.Component {
             <HelpIcon />
             <IconText>Help</IconText>
           </ToolbarLink>
+          <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
+            <SurveyIcon />
+            <IconText>Take the Maputnik Survey</IconText>
+          </ToolbarLinkHighlighted>
         </div>
       </div>
     </div>

src/components/modals/SurveyModal.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '../Button'
+import Modal from './Modal'
+
+import Logo from './../../img/maputnik.png'
+
+class SurveyModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) { super(props); }
+
+  render() {
+    return <Modal
+      data-wd-key="modal-survey"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Maputnik Survey'}
+    >
+      <div style={{width: 372, paddingBottom: "0"}}>
+        <img src="./../../img/maputnik.png" alt="" width="128" style={{display:"block",margin:"0 auto"}} />
+        <h1>You + Maputnik = Maputnik better for you</h1>
+        <p style={{lineHeight:1.5}}>We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.
+</p>
+        <a href="https://gregorywolanski.typeform.com/to/cPgaSY" target="_blank" rel="noopener noreferrer" className="maputnik-button maputnik-big-button maputnik-white-button maputnik-green-hover-button maputnik-wide-button">Take the Maputnik Survey</a>
+        <p className="green" style={{margin:"16px 0 0"}}>It takes 7 minutes, tops! Every question is optional.</p>
+      </div>
+    </Modal>
+  }
+}
+
+export default SurveyModal