Merge pull request #4942 from wri/develop

PROD Deploy 2025-02-27 12:12pm EST

Author: wri7tno

components/forms/newsletter/component.jsx

@@ -11,6 +11,7 @@ import Select from 'components/forms/components/select';
 import Submit from 'components/forms/components/submit';
 import SuccessMessage from 'components/success-message';
 import Error from 'components/forms/components/error';
+import { preferredLanguages } from 'components/forms/profile/config';
 
 import { email as validateEmail } from 'components/forms/validations';
 import Checkbox from '../components/checkbox/component';
@@ -29,14 +30,6 @@ const sectors = [
   'Other',
 ];
 
-const preferredLanguages = [
-  { label: 'English', value: 'en' },
-  { label: 'Français', value: 'fr' },
-  { label: 'Español', value: 'es' },
-  { label: 'Português', value: 'pt' },
-  { label: 'Bahasa Indonesia', value: 'id' },
-];
-
 const interests = [
   'Innovations in Monitoring',
   'Fires',

components/forms/profile/actions.js

@@ -1,9 +1,19 @@
 import { createThunkAction } from 'redux/actions';
+import axios from 'axios';
 import { FORM_ERROR } from 'final-form';
 
 import { updateProfile, createProfile } from 'services/user';
 import { setMyGFW } from 'providers/mygfw-provider/actions';
 
+const saveOrttoProfile = async (payload) => {
+  try {
+    await axios.post('/api/ortto', payload);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+};
+
 export const saveProfile = createThunkAction(
   'saveProfile',
   (fields) => (dispatch) => {
@@ -17,6 +27,7 @@ export const saveProfile = createThunkAction(
       firstName,
       lastName,
       email,
+      old_email,
       country,
       city,
       state,
@@ -29,6 +40,8 @@ export const saveProfile = createThunkAction(
       jobTitle,
       signUpForTesting,
       isUserProfileFilled,
+      receive_updates = false,
+      preferred_language = 'en',
     } = fields;
 
     const postData = {
@@ -47,6 +60,8 @@ export const saveProfile = createThunkAction(
           aoiCountry,
           jobTitle,
           areaOrRegionOfInterest,
+          receive_updates,
+          preferred_language,
           subsector:
             subsector && subsector.includes('Other')
               ? `Other: ${subsector_otherInput || ''}`
@@ -72,8 +87,27 @@ export const saveProfile = createThunkAction(
     const updateOrCreate = isUserProfileFilled ? updateProfile : createProfile;
 
     return updateOrCreate(id, postData)
-      .then((response) => {
+      .then(async (response) => {
         if (response.data && response.data.data) {
+          saveOrttoProfile({
+            email,
+            first_name: firstName,
+            last_name: lastName,
+            organization: company,
+            job_title: jobTitle,
+            job_function:
+              subsector && subsector.includes('Other')
+                ? `Other: ${subsector_otherInput || ''}`
+                : subsector,
+            sector,
+            city,
+            country,
+            preferred_language,
+            interests: interests.toString(),
+            receive_updates,
+            old_email,
+          });
+
           const { attributes } = response.data.data;
           dispatch(
             setMyGFW({

components/forms/profile/component.jsx

@@ -14,6 +14,7 @@ import Submit from 'components/forms/components/submit';
 import ConfirmationMessage from 'components/confirmation-message';
 import Button from 'components/ui/button';
 import Error from 'components/forms/components/error';
+import { preferredLanguages } from 'components/forms/profile/config';
 
 import {
   email as validateEmail,
@@ -95,6 +96,11 @@ class ProfileForm extends PureComponent {
                         validate={[validateEmail]}
                         required
                       />
+                      <Input
+                        name="old_email"
+                        type="hidden"
+                        value={initialValues.old_email}
+                      />
                       <Select
                         name="sector"
                         label="sector"
@@ -155,15 +161,17 @@ class ProfileForm extends PureComponent {
                         label="What topics are you interested in?"
                         multiple
                         required
-                        options={[
-                          ...sortBy(
-                            interests.map((r) => ({
-                              label: r,
-                              value: r.replace(/( )+|(\/)+/g, '_'),
-                            })),
-                            'label'
-                          ),
-                        ]}
+                        options={interests.map((r) => ({
+                          label: r,
+                          value: r.replace(/( )+|(\/)+/g, '_').toLowerCase(),
+                        }))}
+                      />
+                      <Select
+                        name="preferred_language"
+                        label="Preferred Language"
+                        description="Please note that most communications will be sent in English."
+                        placeholder="Select a preferred language"
+                        options={preferredLanguages}
                       />
                       <Checkbox
                         name="howDoYouUse"
@@ -209,6 +217,11 @@ class ProfileForm extends PureComponent {
                         label="Would you like to help us test new application features?"
                         options={[{ label: 'Yes', value: 'true' }]}
                       />
+                      <Checkbox
+                        name="receive_updates"
+                        label="WOULD YOU LIKE TO RECEIVE UPDATES ON NEWS AND EVENTS FROM GLOBAL FOREST?"
+                        options={[{ label: 'Yes', value: 'true' }]}
+                      />
                       <Error
                         valid={valid}
                         submitFailed={submitFailed}

components/forms/profile/config.js

@@ -5,15 +5,15 @@ export const sectors = {
     'Legislature/Parliament',
     'Ministry/National Agency',
     'Subnational Agency',
-    'Other:'
+    'Other:',
   ],
   'Donor Institution / Agency': [
     'Director/Executive',
     'Project/Program Manager',
     'Researcher',
     'Monitoring/Evaluation',
     'Field/Country Staff',
-    'Other:'
+    'Other:',
   ],
   'Local NGO (national or subnational)': [
     'Director/Executive',
@@ -24,7 +24,7 @@ export const sectors = {
     'Field Staff',
     'Communications Specialist',
     'Park/Forest Ranger',
-    'Other:'
+    'Other:',
   ],
   'International NGO': [
     'Director/Executive',
@@ -34,7 +34,7 @@ export const sectors = {
     'Field/Country Staff',
     'Communications Specialist',
     'Researcher',
-    'Other:'
+    'Other:',
   ],
   'UN or International Organization': [
     'Director/Executive',
@@ -44,48 +44,48 @@ export const sectors = {
     'Monitoring/Evaluation Specialist',
     'GIS/Technical Specialist',
     'Communications Specialist',
-    'Other:'
+    'Other:',
   ],
   'Academic / Research Organization': [
     'Faculty (Primary/Secondary)',
     'Faculty (University)',
     'Student (Primary/Secondary)',
     'Student (University/Graduate)',
     'Researcher (Post-Doc, Fellow, etc.)',
-    'Other:'
+    'Other:',
   ],
   'Journalist / Media Organization': ['Reporter', 'Editor', 'Other:'],
   'Indigenous or Community-Based Organization': [
     'Community Leader',
     'Forest Manager/Monitor',
     'GIS/Technical Specialist',
     'Communications Specialist',
-    'Other:'
+    'Other:',
   ],
   'Private sector': [
     'Supply Chain Manager',
     'Supply Chain Analyst',
     'Procurement Staff',
     'Retailer/Trader',
     'Land or Concession Owner',
-    'Other:'
+    'Other:',
   ],
   'Individual / No Affiliation': ['Other:'],
-  Other: ['Other:']
+  Other: ['Other:'],
 };
 
 export const interests = [
-  'Climate/Carbon',
-  'Biodiversity',
-  'Deforestation/Forest Degradation',
-  'Innovations in forest monitoring',
-  'Watersheds ',
-  'General information/Data about forests',
-  'Reforestation/Landscape restoration',
-  'Agricultural supply chains',
+  'Innovations in Monitoring',
   'Fires',
+  'Forest Watcher Mobile App',
+  'Climate and Carbon',
+  'Biodiversity',
+  'Agricultural Supply Chains',
   'Small Grants Fund and Tech Fellowship',
-  'My region or country'
+  'Landscape Restoration',
+  'GFW Users in Action',
+  'Places to Watch alerts',
+  'Deforestation',
 ];
 
 export const howDoYouUse = [
@@ -102,7 +102,7 @@ export const howDoYouUse = [
   'Learn about forests/my country',
   'Inform purchasing/procurement/investment decisions',
   'Educational support materials',
-  'Not sure; new to GFW'
+  'Not sure; new to GFW',
 ];
 
 export const topics = [
@@ -111,5 +111,13 @@ export const topics = [
   'Fires',
   'Forest Watcher Mobile App',
   'Innovations in Monitoring',
-  'Small Grants Fund and Tech Fellowship'
+  'Small Grants Fund and Tech Fellowship',
+];
+
+export const preferredLanguages = [
+  { label: 'English', value: 'en' },
+  { label: 'Français', value: 'fr' },
+  { label: 'Español', value: 'es' },
+  { label: 'Português', value: 'pt' },
+  { label: 'Bahasa Indonesia', value: 'id' },
 ];

components/forms/profile/index.js

@@ -18,7 +18,7 @@ const splitLastName = (fullName) => {
 };
 
 const mapStateToProps = ({ myGfw, countryData }) => {
-  const { howDoYouUse, subsector, firstName, fullName, lastName } =
+  const { howDoYouUse, subsector, firstName, fullName, lastName, email } =
     myGfw.data || {};
 
   const subsectorHasOther = subsector && subsector.includes('Other');
@@ -43,6 +43,7 @@ const mapStateToProps = ({ myGfw, countryData }) => {
       myGfw.data && {
         initialValues: {
           ...myGfw.data,
+          old_email: email,
           firstName: firstName || (fullName && splitFirstName(fullName)),
           lastName: lastName || (fullName && splitLastName(fullName)),
           subsector: subsectorOther ? 'Other:' : subsector,

components/map/basemaps.js

@@ -51,6 +51,7 @@ export default {
     baseStyle: false,
     hasSettings: false,
     infoModal: 'satellite_basemap',
+    caveat: '(global)',
     image: satelliteImage,
     basemapGroup: 'basemap-satellite',
     labelsGroup: 'labels-dark',

components/satellite-basemaps/component.jsx

@@ -63,6 +63,15 @@ const SatelliteBasemaps = ({
     }
   }, [isTropics, defaultSatSet]);
 
+  let sortedBasemaps = basemaps;
+  if (basemaps.length >= 4) {
+    sortedBasemaps = [
+      basemaps[1],
+      ...basemaps.slice(0, 1),
+      ...basemaps.slice(2),
+    ];
+  }
+
   const handleToggleActive = () => {
     setOpen(!activeBasemap.active);
     setMapBasemap({
@@ -142,7 +151,7 @@ const SatelliteBasemaps = ({
         <section className="satellite-basemaps">
           <h4>SATELLITE IMAGERY</h4>
           <ul>
-            {basemaps.map((basemap) => {
+            {sortedBasemaps.map((basemap) => {
               return (
                 <li
                   key={`satellite-basemap-${basemap.value}`}

components/satellite-basemaps/selectors.js

@@ -49,7 +49,7 @@ export const getActiveDynoBasemap = createSelector(
     if (!basemaps || !activeBasemap) {
       return null;
     }
-    const defaultBasemap = find(basemaps, { value: 'planet' });
+    const defaultBasemap = find(basemaps, { value: 'satellite' });
     const dynoBasemap = find(basemaps, { value: activeBasemap.value });
 
     if (dynoBasemap) {