Survey (#328)

Elements promoting the survey inside Maputnik after feedback

package-lock.json

@@ -6983,11 +6983,6 @@
       "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
       "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
     },
-    "hoist-non-react-statics": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
-    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -11550,16 +11545,6 @@
         "tinycolor2": "^1.4.1"
       }
     },
-    "react-cookie": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-2.2.0.tgz",
-      "integrity": "sha512-W6e+ZyeEkgUhJV4D/p41QaApfFKsChW/OLvhDXLcBRcV2pmKOh88YhHkBz2QwZt20J5xaiqcN0NqGGK+58gn/g==",
-      "requires": {
-        "hoist-non-react-statics": "^2.3.1",
-        "prop-types": "^15.0.0",
-        "universal-cookie": "^2.2.0"
-      }
-    },
     "react-copy-to-clipboard": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
@@ -14877,15 +14862,6 @@
         "unist-util-is": "^2.1.1"
       }
     },
-    "universal-cookie": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-2.2.0.tgz",
-      "integrity": "sha512-weEuvQvnMs74WGwqKSbeapCRv/7ATHDCqrfZtj579r3fQCxcwtoXYMoaZ8YOCQga/ctQTYy20xMOH1u7cAAU6w==",
-      "requires": {
-        "cookie": "^0.3.1",
-        "object-assign": "^4.1.0"
-      }
-    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

package.json

@@ -49,7 +49,6 @@
     "react-codemirror2": "^4.2.1",
     "react-collapse": "^4.0.3",
     "react-color": "^2.14.1",
-    "react-cookie": "^2.1.6",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.3.2",
     "react-file-reader-input": "^1.1.4",

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 {arrayMove} from 'react-sortable-hoc'
-import {withCookies, Cookies} from 'react-cookie'
 import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
@@ -53,11 +51,7 @@ function updateRootSpec(spec, fieldName, newValues) {
   }
 }
 
-class App extends React.Component {
+export default class App extends React.Component {
-  static propTypes = {
-    cookies: instanceOf(Cookies).isRequired
-  }
-
   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"}}>
+      <div className="maputnik-modal-survey">
-        <img src="./../../img/maputnik.png" alt="" width="128" style={{display:"block",margin:"0 auto"}} />
+        <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 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>
-</p>
+        <Button onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-green-hover-button maputnik-wide-button">Take the Maputnik Survey</Button>
-        <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="maputnik-modal-survey__footnote">It takes 7 minutes, tops! Every question is optional.</p>
-        <p className="green" style={{margin:"16px 0 0"}}>It takes 7 minutes, tops! Every question is optional.</p>
       </div>
     </Modal>
   }

src/index.jsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { CookiesProvider } from 'react-cookie'
-
 import './favicon.ico'
 import './styles/index.scss'
 import App from './components/App';
 
-ReactDOM.render(<CookiesProvider><App/></CookiesProvider>, document.querySelector("#app"));
+ReactDOM.render(<App/>, document.querySelector("#app"));

src/styles/_modal.scss

@@ -240,3 +240,20 @@
     margin-bottom: 4px;
   }
 }
+
+.maputnik-modal-survey {
+  width: 372px;
+}
+
+.maputnik-modal-survey__logo {
+  display: block;
+  margin: 0 auto;
+}
+
+.maputnik-modal-survey__description {
+  line-height: 1.5;
+}
+
+.maputnik-modal-survey__footnote {
+  margin-top: 16px;
+}