From 5c7a8a71607f1f2b56f300a21ff6e8c67b885a77 Mon Sep 17 00:00:00 2001
From: Luis Zenteno <luis.zenteno.5@wriconsultant.org>
Date: Tue, 14 Jan 2025 12:01:25 -0600
Subject: [PATCH] feat(profile-form): update profile form

---
 components/forms/newsletter/component.jsx |  9 +----
 components/forms/profile/actions.js       |  4 ++
 components/forms/profile/component.jsx    | 26 +++++++-----
 components/forms/profile/config.js        | 48 +++++++++++++----------
 4 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/components/forms/newsletter/component.jsx b/components/forms/newsletter/component.jsx
index 6820bb5000..ee25b906e2 100644
--- a/components/forms/newsletter/component.jsx
+++ b/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',
diff --git a/components/forms/profile/actions.js b/components/forms/profile/actions.js
index 34893a5fb1..e1f6fd9590 100644
--- a/components/forms/profile/actions.js
+++ b/components/forms/profile/actions.js
@@ -29,6 +29,8 @@ export const saveProfile = createThunkAction(
       jobTitle,
       signUpForTesting,
       isUserProfileFilled,
+      receive_updates = false,
+      preferred_language = 'en',
     } = fields;
 
     const postData = {
@@ -47,6 +49,8 @@ export const saveProfile = createThunkAction(
           aoiCountry,
           jobTitle,
           areaOrRegionOfInterest,
+          receive_updates,
+          preferred_language,
           subsector:
             subsector && subsector.includes('Other')
               ? `Other: ${subsector_otherInput || ''}`
diff --git a/components/forms/profile/component.jsx b/components/forms/profile/component.jsx
index df45b72073..79dac1020c 100644
--- a/components/forms/profile/component.jsx
+++ b/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}
diff --git a/components/forms/profile/config.js b/components/forms/profile/config.js
index 76754f92c1..26a8bea509 100644
--- a/components/forms/profile/config.js
+++ b/components/forms/profile/config.js
@@ -5,7 +5,7 @@ export const sectors = {
     'Legislature/Parliament',
     'Ministry/National Agency',
     'Subnational Agency',
-    'Other:'
+    'Other:',
   ],
   'Donor Institution / Agency': [
     'Director/Executive',
@@ -13,7 +13,7 @@ export const sectors = {
     '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,7 +44,7 @@ export const sectors = {
     'Monitoring/Evaluation Specialist',
     'GIS/Technical Specialist',
     'Communications Specialist',
-    'Other:'
+    'Other:',
   ],
   'Academic / Research Organization': [
     'Faculty (Primary/Secondary)',
@@ -52,7 +52,7 @@ export const sectors = {
     'Student (Primary/Secondary)',
     'Student (University/Graduate)',
     'Researcher (Post-Doc, Fellow, etc.)',
-    'Other:'
+    'Other:',
   ],
   'Journalist / Media Organization': ['Reporter', 'Editor', 'Other:'],
   'Indigenous or Community-Based Organization': [
@@ -60,7 +60,7 @@ export const sectors = {
     'Forest Manager/Monitor',
     'GIS/Technical Specialist',
     'Communications Specialist',
-    'Other:'
+    'Other:',
   ],
   'Private sector': [
     'Supply Chain Manager',
@@ -68,24 +68,24 @@ export const sectors = {
     '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' },
 ];