Survey (#328)

Elements promoting the survey inside Maputnik after feedback

src/components/App.jsx

@@ -1,10 +1,8 @@
 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 {arrayMove} from 'react-sortable-hoc'
 import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
@@ -53,11 +51,7 @@ function updateRootSpec(spec, fieldName, newValues) {
   }
 }
 
-class App extends React.Component {
-  static propTypes = {
-    cookies: instanceOf(Cookies).isRequired
-  }
-
+export default class App extends React.Component {
   constructor(props) {
     super(props)
     this.revisionStore = new RevisionStore()
@@ -179,7 +173,7 @@ class App extends React.Component {
         open: false,
         shortcuts: false,
         export: false,
-        survey: this.props.cookies.get('survey') ? false : true
+        survey: localStorage.hasOwnProperty('survey') ? false : true
       },
       mapOptions: {
         showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries")
@@ -459,7 +453,7 @@ class App extends React.Component {
     })
 
     if(modalName === 'survey') {
-      this.props.cookies.set('survey');
+      localStorage.setItem('survey', '');
     }
   }
 
@@ -556,5 +550,3 @@ class App extends React.Component {
     />
   }
 }
-
-export default withCookies(App)

src/components/modals/SurveyModal.jsx

@@ -14,20 +14,25 @@ class SurveyModal extends React.Component {
 
   constructor(props) { super(props); }
 
+  onClick = () => {
+    window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');
+
+    this.props.onOpenToggle();
+  }
+
   render() {
     return <Modal
       data-wd-key="modal-survey"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={'Maputnik Survey'}
+      title="Maputnik Survey"
     >
-      <div style={{width: 372, paddingBottom: "0"}}>
-        <img src="./../../img/maputnik.png" alt="" width="128" style={{display:"block",margin:"0 auto"}} />
+      <div className="maputnik-modal-survey">
+        <img className="maputnik-modal-survey__logo" src="./../../img/maputnik.png" alt="" width="128" />
         <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>
+        <p className="maputnik-modal-survey__description">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>
+        <Button onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-green-hover-button maputnik-wide-button">Take the Maputnik Survey</Button>
+        <p className="maputnik-modal-survey__footnote">It takes 7 minutes, tops! Every question is optional.</p>
       </div>
     </Modal>
   }