Merge pull request #3642 from Vizzuality/feature/map-tour

Feature/map tour

Author: edbrett

.env.prod.sample

@@ -0,0 +1,61 @@
+# Application
+[email protected]
+LAYER_SPEC=layerspec
+
+# GFW Links
+GFW_API=https://production-api.globalforestwatch.org
+GFW_API_OLD=https://api.globalforestwatch.org
+GFW_ASSETS_URL=https://gfw-assets.s3.amazonaws.com/static/gfw-assets.nightly.js
+GFW_BLOG_HOST=http://blog.globalforestwatch.org
+GFW_HOWTO_URL=http://vizzuality.github.io/gfw-howto
+GFW_DEVELOPERS_URL=http://vizzuality.github.io/gfw-atlas
+
+# External APIs
+CARTO_API=https://wri-01.carto.com/api/v2
+RESOURCE_WATCH_API=https://api.resourcewatch.org/v1
+CLIMATE_WATCH_API=https://climate-watch.vizzuality.com/api/v1
+
+# AWS
+AWS_HOST=/uploads
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_REGION=my-excellent-region
+S3_BUCKET_NAME=
+S3_DATA_BUCKET_NAME=
+
+# Google
+ANALYTICS_PROPERTY_ID=
+LANDSTAD_KEY=
+SENTINEL_KEY=
+GOOGLE_MAPS_API_KEY=
+GOOGLE_CUSTOM_SEARCH_CX=
+GOOGLE_SEARCH_API_KEY=
+
+# Bitly
+BITLY_API_URL=https://api-ssl.bitly.com/v3
+BITLY_USER=
+BITLY_API_KEY=
+
+# Datasets
+COUNTRIES_PAGE_DATASET=a20e9c0e-8d7d-422f-90f5-3b9bca355aaf
+GLAD_ISO_DATASET=391ca96d-303f-4aef-be4b-9cdb4856832c
+GLAD_ADM1_DATASET=c7a1d922-e320-4e92-8e4c-11ea33dd6e35
+GLAD_ADM2_DATASET=428db321-5ebb-4e86-a3df-32c63b6d3c83
+FIRES_ISO_DATASET=ff289906-aa83-4a89-bba0-562edd8c16c6
+FIRES_ADM1_DATASET=9b9e56fc-270e-486d-8db5-e0a839c9a1a9
+FIRES_ADM2_DATASET=0f24299d-2aaa-4afc-945c-b614028c12d1
+
+# Transifex
+TRANSIFEX_URL=https://www.transifex.com/api/2/project
+TRANSIFEX_PROJECT=
+TRANSIFEX_SLUG=
+TRANSIFEX_API_TOKEN=
+TRANSIFEX_RESOURCE_API_TOKEN=
+LOCALES_PATH=app/javascript/locales
+
+# SMTP
+SMTP_USERNAME=
+SMTP_PASSWORD=
+
+# CYPRESS
+CYPRESS_RECORD_KEY=

app/javascript/app/layouts/root/component.jsx

@@ -41,6 +41,7 @@ class App extends PureComponent {
             {!embed &&
               route.headerOptions && (
                 <Header
+                  className={cx('map-tour-main-menu')}
                   isMobile={!isDesktop}
                   loggedIn={loggedIn}
                   {...route.headerOptions}
@@ -63,6 +64,7 @@ class App extends PureComponent {
                 embed={embed}
                 path={route.component}
                 sections={route.sections}
+                isDesktop={isDesktop}
               />
             </div>
             {!embed && <MyGFWProvider />}

app/javascript/app/reducers.js

@@ -16,6 +16,7 @@ import { reduxModule as Popup } from 'components/map-v2/components/popup';
 import { reduxModule as Draw } from 'components/map-v2/components/draw';
 import { reduxModule as Header } from 'pages/dashboards/header';
 import { reduxModule as MapNew } from 'components/map-v2';
+import { reduxModule as MapTour } from 'components/map-v2/components/map-tour';
 import { reduxModule as MapOld } from 'components/map';
 import { reduxModule as MapMenu } from 'pages/map/components/menu';
 
@@ -59,6 +60,7 @@ const componentsReducers = {
   map: handleModule(MapNew),
   mapOld: handleModule(MapOld),
   mapMenu: handleModule(MapMenu),
+  mapTour: handleModule(MapTour),
   // modals
   modalVideo: handleModule(ModalVideo),
   modalMeta: handleModule(ModalMeta),

app/javascript/components/map-v2/components/basemaps/basemaps-component.jsx

@@ -104,7 +104,10 @@ class Basemaps extends React.PureComponent {
       ? { label: activeBoundaries.name }
       : boundaries && boundaries[0];
     return (
-      <div className="c-basemaps" {...getTooltipContentProps()}>
+      <div
+        className={cx('c-basemaps', 'map-tour-basemaps')}
+        {...getTooltipContentProps()}
+      >
         <div className="basemaps-top-section">
           {isDesktop && (
             <div className="basemaps-header">

app/javascript/components/map-v2/components/data-analysis-menu/component.jsx

@@ -25,11 +25,13 @@ class DataAnalysisMenu extends PureComponent {
       <div
         className={cx(
           'c-data-analysis-menu',
+          'map-tour-legend',
           { '-relocate': !!menuSection },
           { '-big': menuSection && menuSection.large },
           { '-embed': embed },
           className
         )}
+        data-map-tour="step-two"
       >
         <SubNavMenu
           className="nav"

app/javascript/components/map-v2/components/map-controls/map-controls-component.jsx

@@ -18,16 +18,27 @@ import minusIcon from 'assets/icons/minus.svg';
 import shareIcon from 'assets/icons/share.svg';
 import fullscreenIcon from 'assets/icons/fit-zoom.svg';
 import printIcon from 'assets/icons/print.svg';
+import helpIocn from 'assets/icons/help.svg';
 import globeIcon from 'assets/icons/globe.svg';
 import satelliteIcon from 'assets/icons/satellite.svg';
 
 import './map-controls-styles.scss';
 
 class MapControlsButtons extends PureComponent {
   state = {
-    showBasemaps: false
+    pulseTourBtn: false
   };
 
+  componentDidUpdate(prevProps) {
+    const { mapTourOpen } = this.props;
+    if (!mapTourOpen && mapTourOpen !== prevProps.mapTourOpen) {
+      this.setPulseTourBtn(true);
+      setTimeout(() => this.setPulseTourBtn(false), 3000);
+    }
+  }
+
+  setPulseTourBtn = pulseTourBtn => this.setState({ pulseTourBtn });
+
   handleHidePanels = () => {
     const {
       setMapSettings,
@@ -49,7 +60,7 @@ class MapControlsButtons extends PureComponent {
   onBasemapsRequestClose = () => {
     const isTargetOnTooltip = isParent(this.basemapsRef, this.basemapsRef.evt);
     this.basemapsRef.clearEvt();
-    if (!isTargetOnTooltip && this.state.showBasemaps) {
+    if (!isTargetOnTooltip && this.props.settings.showBasemaps) {
       this.toggleBasemaps();
     }
   };
@@ -67,8 +78,8 @@ class MapControlsButtons extends PureComponent {
   };
 
   toggleBasemaps = () => {
-    const { setRecentImagerySettings } = this.props;
-    this.setState(state => ({ showBasemaps: !state.showBasemaps }));
+    const { setRecentImagerySettings, setMapSettings, settings } = this.props;
+    setMapSettings({ showBasemaps: !settings.showBasemaps });
     setRecentImagerySettings({ visible: false });
   };
 
@@ -120,7 +131,7 @@ class MapControlsButtons extends PureComponent {
 
     return (
       <Button
-        className="recent-imagery-btn"
+        className={cx('recent-imagery-btn', 'map-tour-recent-imagery')}
         theme="theme-button-map-control"
         onClick={this.handleToggleRecentImagery}
         disabled={datasetsLoading}
@@ -148,11 +159,11 @@ class MapControlsButtons extends PureComponent {
   };
 
   renderBasemapsBtn = () => {
-    const { showBasemaps } = this.state;
+    const { showBasemaps } = this.props.settings;
 
     return (
       <Button
-        className="basemaps-btn"
+        className={cx('basemaps-btn')}
         theme="theme-button-map-control"
         onClick={this.toggleBasemaps}
         tooltip={
@@ -189,7 +200,7 @@ class MapControlsButtons extends PureComponent {
   };
 
   renderBasemapsTooltip = () => {
-    const { showBasemaps } = this.state;
+    const { showBasemaps } = this.props.settings;
 
     return (
       <Tooltip
@@ -302,6 +313,21 @@ class MapControlsButtons extends PureComponent {
     </Button>
   );
 
+  renderMapTourBtn = () => (
+    <Button
+      theme="theme-button-map-control"
+      tooltip={{ text: 'Take a tour of the map' }}
+      onClick={() => this.props.setMapTourOpen(true)}
+    >
+      <Icon
+        icon={helpIocn}
+        className={cx('map-tour-icon', {
+          'pulse-tour-btn': this.state.pulseTourBtn
+        })}
+      />
+    </Button>
+  );
+
   renderMapPosition = () => {
     const { settings } = this.props;
     const { zoom, center } = settings || {};
@@ -331,11 +357,12 @@ class MapControlsButtons extends PureComponent {
                 {this.renderBasemapsTooltip()}
               </div>
             )}
-            <div className="controls-wrapper">
+            <div className={cx('controls-wrapper', 'map-tour-map-controls')}>
               {this.renderZoomButtons()}
               {this.renderShowPanelsButton()}
               {this.renderShareButton()}
               {this.renderPrintButton()}
+              {this.renderMapTourBtn()}
             </div>
             {this.renderMapPosition()}
           </Fragment>
@@ -357,6 +384,8 @@ MapControlsButtons.propTypes = {
   settings: PropTypes.object,
   active: PropTypes.bool,
   setMenuSettings: PropTypes.func,
+  setMapTourOpen: PropTypes.func,
+  mapTourOpen: PropTypes.bool,
   recentSettings: PropTypes.object,
   recentLoading: PropTypes.bool,
   setRecentImagerySettings: PropTypes.func,

app/javascript/components/map-v2/components/map-controls/map-controls-selectors.js

@@ -9,12 +9,14 @@ import {
 } from 'components/map-v2/components/recent-imagery/recent-imagery-selectors';
 
 const getDatasetsLoading = state => state.datasets.loading;
+const getMapTourOpen = state => state.mapTour.open;
 
 export const getMapControlsProps = createStructuredSelector({
   recentLoading: getRecentImageryLoading,
   datasetsLoading: getDatasetsLoading,
   settings: getMapSettings,
   recentSettings: getRecentImagerySettings,
   recentActive: getActive,
-  recentImageryDataset: getRecentImageryDataset
+  recentImageryDataset: getRecentImageryDataset,
+  mapTourOpen: getMapTourOpen
 });

app/javascript/components/map-v2/components/map-controls/map-controls-styles.scss

@@ -1,4 +1,5 @@
 @import '~styles/settings.scss';
+@import '~styles/utils.scss';
 
 .c-map-controls {
   .c-icon {
@@ -73,6 +74,17 @@
     .minus-icon {
       width: rem(13px);
     }
+
+    .map-tour-icon {
+      fill: $white;
+      background: $slate;
+      border-radius: 15px;
+      padding: 2px;
+    }
+
+    .pulse-tour-btn {
+      animation: pulse 1.5s infinite;
+    }
   }
 
   .mobile-controls-wrapper {

app/javascript/components/map-v2/components/map-controls/map-controls.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 
+import { setMapTourOpen } from 'components/map-v2/components/map-tour/actions';
 import * as shareActions from 'components/modals/share/share-actions';
 import * as mapActions from 'components/map-v2/actions';
 import * as recentImageryActions from 'components/map-v2/components/recent-imagery/recent-imagery-actions';
@@ -12,6 +13,7 @@ const actions = {
   ...mapActions,
   ...shareActions,
   setMenuSettings,
+  setMapTourOpen,
   ...recentImageryActions
 };
 

app/javascript/components/map-v2/components/map-tour/actions.js

@@ -0,0 +1,37 @@
+import { createAction, createThunkAction } from 'redux-tools';
+
+export const setMapTourOpen = createAction('setMapTourOpen');
+
+export const setExploreView = createThunkAction(
+  'setExploreView',
+  () => (dispatch, getState) => {
+    const { query, type, payload } = getState().location;
+    dispatch({
+      type,
+      payload,
+      query: {
+        ...query,
+        menu: {
+          menuSection: 'explore'
+        }
+      }
+    });
+  }
+);
+
+export const setAnalysisView = createThunkAction(
+  'setAnalysisView',
+  () => (dispatch, getState) => {
+    const { query, type, payload } = getState().location;
+    dispatch({
+      type,
+      payload,
+      query: {
+        ...query,
+        analysis: {
+          showAnalysis: true
+        }
+      }
+    });
+  }
+);