[FLAG-997] GADM country list

components/aoi-card/component.jsx

@@ -52,6 +52,7 @@ const getLatestAlerts = ({ location, params }) =>
 
 class AoICard extends PureComponent {
   static propTypes = {
+    admin: PropTypes.object,
     name: PropTypes.string,
     tags: PropTypes.array,
     application: PropTypes.string,
@@ -64,6 +65,7 @@ class AoICard extends PureComponent {
     onFetchAlerts: PropTypes.func,
     status: PropTypes.string,
     setConfirmSubscriptionModalSettings: PropTypes.func,
+    openOutdatedAreaModal: PropTypes.func,
     confirmed: PropTypes.bool,
     id: PropTypes.string,
   };
@@ -131,6 +133,7 @@ class AoICard extends PureComponent {
 
   render() {
     const {
+      admin,
       tags,
       name,
       application,
@@ -142,9 +145,13 @@ class AoICard extends PureComponent {
       location,
       status,
       setConfirmSubscriptionModalSettings,
+      openOutdatedAreaModal,
       id,
       confirmed,
     } = this.props;
+
+    const isOutdatedGadmArea =
+      admin?.source?.provider === 'gadm' && admin?.source?.version === '3.6';
     const {
       loading,
       alerts: { glads, fires, error: dataError },
@@ -237,6 +244,20 @@ class AoICard extends PureComponent {
               )}
             </div>
           )}
+          {isOutdatedGadmArea && (
+            <div className="subscribed">
+              <Icon icon={warningIcon} className="warning-icon" />
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  openOutdatedAreaModal();
+                }}
+              >
+                Outdated area, notifications paused
+              </button>
+            </div>
+          )}
           {!simple && !isPending && (
             <div className="activity">
               <span className="activity-intro">

components/forms/area-of-interest/actions.js

@@ -67,7 +67,7 @@ export const saveAreaOfInterest = createThunkAction(
           admin: {
             source: {
               provider: 'gadm',
-              version: '3.6',
+              version: '4.1',
             },
             adm0,
             adm1,

components/map-menu/actions.js

@@ -1,7 +1,7 @@
 import { createAction, createThunkAction } from 'redux/actions';
 import { fetchGeocodeLocations } from 'services/geocoding';
 
-import { setMapSettings, setMapInteractions } from 'components/map/actions';
+import { setMapSettings } from 'components/map/actions';
 import { setAnalysisSettings } from 'components/analysis/actions';
 
 export const setLocationsData = createAction('setLocationsData');
@@ -10,58 +10,64 @@ export const setMenuSettings = createAction('setMenuSettings');
 
 export const getLocationFromSearch = createThunkAction(
   'getLocationFromSearch',
-  ({ search, token, lang }) => (dispatch) => {
-    dispatch(setMenuLoading(true));
-    if (search) {
-      fetchGeocodeLocations(search, lang, token)
-        .then((locations) => {
-          if (locations?.length) {
-            dispatch(setLocationsData(locations));
-          } else {
-            dispatch(setLocationsData([]));
-          }
-          dispatch(setMenuLoading(false));
-        })
-        .catch(() => {
-          dispatch(setMenuLoading(false));
-        });
+  ({ search, token, lang }) =>
+    (dispatch) => {
+      dispatch(setMenuLoading(true));
+      if (search) {
+        fetchGeocodeLocations(search, lang, token)
+          .then((locations) => {
+            if (locations?.length) {
+              dispatch(setLocationsData(locations));
+            } else {
+              dispatch(setLocationsData([]));
+            }
+            dispatch(setMenuLoading(false));
+          })
+          .catch(() => {
+            dispatch(setMenuLoading(false));
+          });
+      }
     }
-  }
 );
 
 export const handleClickLocation = createThunkAction(
   'handleClickLocation',
-  ({ center, bbox: featureBbox, ...feature }) => (dispatch) => {
-    if (featureBbox) {
-      dispatch(setMapSettings({ canBound: true, bbox: featureBbox }));
-    } else {
-      dispatch(
-        setMapSettings({ center: { lat: center[1], lng: center[0] }, zoom: 12 })
-      );
+  ({ center, bbox: featureBbox }) =>
+    (dispatch) => {
+      if (featureBbox) {
+        dispatch(setMapSettings({ canBound: true, bbox: featureBbox }));
+      } else {
+        dispatch(
+          setMapSettings({
+            center: { lat: center[1], lng: center[0] },
+            zoom: 12,
+          })
+        );
+      }
+
+      dispatch(setMenuSettings({ menuSection: '' }));
     }
-    dispatch(setMapInteractions({ features: [feature], lngLat: center }));
-    dispatch(setMenuSettings({ menuSection: '' }));
-  }
 );
 
 export const handleViewOnMap = createThunkAction(
   'handleViewOnMap',
-  ({ analysis, mapMenu, map }) => (dispatch) => {
-    if (map) {
-      dispatch(setMapSettings({ ...map, canBound: true }));
-    }
+  ({ analysis, mapMenu, map }) =>
+    (dispatch) => {
+      if (map) {
+        dispatch(setMapSettings({ ...map, canBound: true }));
+      }
 
-    dispatch(
-      setMenuSettings({
-        ...mapMenu,
-        menuSection: '',
-      })
-    );
+      dispatch(
+        setMenuSettings({
+          ...mapMenu,
+          menuSection: '',
+        })
+      );
 
-    if (analysis) {
-      dispatch(setAnalysisSettings(analysis));
+      if (analysis) {
+        dispatch(setAnalysisSettings(analysis));
+      }
     }
-  }
 );
 
 export const showAnalysis = createThunkAction(

components/map-menu/components/sections/my-gfw/component.jsx

@@ -17,6 +17,7 @@ import Pill from 'components/ui/pill';
 import Loader from 'components/ui/loader';
 import Paginate from 'components/paginate';
 import ConfirmSubscriptionModal from 'components/modals/confirm-subscription';
+import OutdatedAreaModal from 'components/modals/outdated-area/OutdatedAreaModal';
 
 import editIcon from 'assets/icons/edit.svg?sprite';
 import shareIcon from 'assets/icons/share.svg?sprite';
@@ -51,6 +52,7 @@ class MapMenuMyGFW extends PureComponent {
     unselectedTags: [],
     pageSize: 6,
     pageNum: 0,
+    outdatedAreaModalOpen: false,
   };
 
   static getDerivedStateFromProps(prevProps, prevState) {
@@ -294,7 +296,15 @@ class MapMenuMyGFW extends PureComponent {
                     tabIndex={0}
                     key={area.id}
                   >
-                    <AoICard index={i} {...area} simple />
+                    <AoICard
+                      index={i}
+                      {...area}
+                      simple
+                      openOutdatedAreaModal={() =>
+                        this.setState({
+                          outdatedAreaModalOpen: true,
+                        })}
+                    />
                     {active && this.renderAoiActions()}
                   </div>
                 );
@@ -370,6 +380,13 @@ class MapMenuMyGFW extends PureComponent {
           />
         )}
         <ConfirmSubscriptionModal />
+        <OutdatedAreaModal
+          isOpen={this.state.outdatedAreaModalOpen}
+          handleCloseModal={() =>
+            this.setState({
+              outdatedAreaModalOpen: false,
+            })}
+        />
       </div>
     );
   }

components/map-menu/components/sections/search/selectors.js

@@ -1,6 +1,6 @@
 import { createSelector, createStructuredSelector } from 'reselect';
 import { deburrUpper } from 'utils/strings';
-import { getGadm36Id } from 'utils/gadm';
+import { getGadmId } from 'utils/gadm';
 import sortBy from 'lodash/sortBy';
 import { translateText, selectActiveLang } from 'utils/lang';
 
@@ -49,7 +49,7 @@ const getLocations = createSelector(
   (locations, location) => {
     if (!locations) return null;
     const { adm0, adm1, adm2 } = location;
-    const gadmId = getGadm36Id(adm0, adm1, adm2);
+    const gadmId = getGadmId(adm0, adm1, adm2);
 
     return locations
       .map((l) => ({

components/map/components/popup/components/boundary-sentence/selectors.js

@@ -6,16 +6,16 @@ const getInteractionData = (state, { data }) => data;
 
 /**
  * Returns an object with the selected location name, its area and a sentence do be displayed.
- * @param {method} createSelector - return a memoized outut selector.
+ * @param {method} createSelector - return a memoized output selector.
  * @see https://reselect.js.org/introduction/getting-started/#output-selector for implementation details
  * @param {selector} getInteractionData - data from the area clicked by user
  * @return {object} sentence, location name and area.
  */
 export const getSentence = createSelector(
   [getInteractionData],
   ({ data } = {}) => {
-    const { adm_level, gid_0, name_1, country } = data;
-    let name = adm_level > 0 ? data[`name_${adm_level}`] : country;
+    const { adm_level, gid_0, name_1, name_0, country } = data;
+    let name = adm_level > 0 ? data[`name_${adm_level}`] : country || name_0;
 
     if (!gid_0) {
       name = data[Object.keys(data).find((k) => k.includes('name'))];
@@ -30,12 +30,15 @@ export const getSentence = createSelector(
       locationNames = [
         locationNameTranslated,
         translateText(name_1),
-        translateText(country),
+        translateText(country || name_0),
       ];
     }
 
-    if (Number(adm_level) === '1') {
-      locationNames = [locationNameTranslated, translateText(country)];
+    if (Number(adm_level) === 1) {
+      locationNames = [
+        locationNameTranslated,
+        translateText(country || name_0),
+      ];
     }
 
     const locationName = locationNames.join(', ');

components/map/selectors.js

@@ -48,7 +48,9 @@ export const getMapViewport = createSelector([getMapSettings], (settings) => {
     pitch,
     latitude: center?.lat,
     longitude: center?.lng,
-    transitionDuration: 500,
+    // The map transition needs to always be 0 otherwise the map becomes sluggish when panned or zoomed. Only set a
+    // different value when flying between locations and only temporarily.
+    transitionDuration: 0,
   };
 });
 

components/modals/outdated-area/OutdatedAreaModal.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from 'components/modal';
+
+const OutdatedAreaModal = ({ isOpen, handleCloseModal }) => {
+  return (
+    <Modal
+      open={isOpen}
+      contentLabel="Outdated area"
+      onRequestClose={handleCloseModal}
+      className="c-confirm-subscription-modal"
+      title=" "
+    >
+      <p>
+        This area uses an outdated version of political boundaries. As a result,
+        alert notification emails can no longer be sent for this area. To
+        continue receiving alerts, please navigate to this area on the map and
+        re-save the area. Instructions on how to save an area and subscribe to
+        alerts are available via in{' '}
+        <a
+          href="https://www.globalforestwatch.org/help/map/guides/save-area-subscribe-forest-change-notifications/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          this Help Center article
+        </a>
+        . Please read through our{' '}
+        <a
+          href="https://www.globalforestwatch.org/blog/data-and-tools/updated-political-boundaries-gadm?utm_medium=email&utm_source=email1&utm_campaign=gadmupdate"
+          target="_blank"
+          rel="noreferrer"
+        >
+          blog outlining these changes
+        </a>{' '}
+        and let us know if you have any questions at{' '}
+        <a href="mailto:[email protected]">[email protected]</a>.
+      </p>
+    </Modal>
+  );
+};
+
+OutdatedAreaModal.propTypes = {
+  isOpen: PropTypes.bool,
+  handleCloseModal: PropTypes.func,
+};
+
+export default OutdatedAreaModal;

components/ui/map/component.jsx

@@ -271,6 +271,9 @@ class Map extends Component {
           onResize={this.onResize}
           onLoad={this.onLoad}
           getCursor={getCursor}
+          // If the `transitionDuration` is not 0, then the map becomes sluggish when panned or zoomed. Nevertheless,
+          // we still want a transition when flying between locations.
+          transitionDuration={flying ? viewport.transitionDuration || 0 : 0}
           transitionInterpolator={new FlyToInterpolator()}
           transitionEasing={easeCubic}
           preventStyleDiffing