FLAG-1204: update profile form

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,33 @@
 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 (data) => {
+  const payload = {
+    email: data.email,
+    first_name: data.firstName,
+    last_name: data.lastName,
+    organization: data.applicationData.gfw.company,
+    job_title: data.applicationData.gfw.jobTitle,
+    job_function: data.applicationData.gfw.subsector,
+    sector: data.applicationData.gfw.sector,
+    city: data.applicationData.gfw.city,
+    country: data.applicationData.gfw.country,
+    preferred_language: data.applicationData.gfw.preferred_language,
+    interests: data.applicationData.gfw.interests.toString(),
+  };
+
+  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) => {
@@ -29,6 +53,8 @@ export const saveProfile = createThunkAction(
       jobTitle,
       signUpForTesting,
       isUserProfileFilled,
+      receive_updates = false,
+      preferred_language = 'en',
     } = fields;
 
     const postData = {
@@ -47,6 +73,8 @@ export const saveProfile = createThunkAction(
           aoiCountry,
           jobTitle,
           areaOrRegionOfInterest,
+          receive_updates,
+          preferred_language,
           subsector:
             subsector && subsector.includes('Other')
               ? `Other: ${subsector_otherInput || ''}`
@@ -72,8 +100,13 @@ export const saveProfile = createThunkAction(
     const updateOrCreate = isUserProfileFilled ? updateProfile : createProfile;
 
     return updateOrCreate(id, postData)
-      .then((response) => {
+      .then(async (response) => {
         if (response.data && response.data.data) {
+          // if isUserProfileFilled and receive_updates is true, send POST
+          if (postData.applicationData.gfw.receive_updates) {
+            saveOrttoProfile(postData);
+          }
+
           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,
@@ -155,15 +156,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 +212,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' },
 ];

pages/api/ortto/index.js

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+export default async (req, res) => {
+  if (req.method !== 'POST') {
+    return res.status(405);
+  }
+  const payload = req.body;
+
+  console.log('payload to ortto: ', payload);
+
+  try {
+    await axios.post('https://ortto.wri.org/custom-forms/gfw/', payload);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return res.status(400);
+  }
+
+  return res.status(201);
+};