Improvised WRT contact form input fields (#9690)

thewca · Jul 21, 2024 · 671f86d · 671f86d
1 parent 8bce6a6
commit 671f86d
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 9 deletions.
diff --git a/app/controllers/contacts_controller.rb b/app/controllers/contacts_controller.rb
@@ -36,14 +36,23 @@ class ContactsController < ApplicationController
     )
   end
 
+  private def new_profile_data_key_to_value(new_profile_data, profile_data_to_change)
+    if profile_data_to_change == 'country'
+      Country.find_by(iso2: new_profile_data).name
+    else
+      new_profile_data
+    end
+  end
+
   private def contact_wrt(requestor_details, contact_params)
+    profile_data_to_change = contact_params[:profileDataToChange]
     maybe_send_contact_email(
       ContactWrt.new(
         name: requestor_details[:name],
         your_email: requestor_details[:email],
-        query_type: contact_params[:queryType],
-        profile_data_to_change: contact_params[:profileDataToChange],
-        new_profile_data: contact_params[:newProfileData],
+        query_type: contact_params[:queryType].titleize,
+        profile_data_to_change: profile_data_to_change.titleize,
+        new_profile_data: new_profile_data_key_to_value(contact_params[:newProfileData], profile_data_to_change),
         edit_profile_reason: contact_params[:editProfileReason],
         message: contact_params[:message],
         request: request,

diff --git a/app/webpacker/components/ContactsPage/SubForms/Wrt/EditProfileQuery.jsx b/app/webpacker/components/ContactsPage/SubForms/Wrt/EditProfileQuery.jsx
@@ -5,10 +5,24 @@ import {
 import { useDispatch, useStore } from '../../../../lib/providers/StoreProvider';
 import { updateSectionData } from '../../store/actions';
 import I18n from '../../../../lib/i18n';
+import UtcDatePicker from '../../../wca/UtcDatePicker';
+import { genders, countries } from '../../../../lib/wca-data.js.erb';
 
 const SECTION = 'wrt';
 const PROFILE_DATA_FIELDS = ['name', 'country', 'gender', 'dob'];
 
+const genderOptions = _.map(genders.byId, (gender) => ({
+  key: gender.id,
+  text: gender.name,
+  value: gender.id,
+}));
+
+const countryOptions = _.map(countries.byIso2, (country) => ({
+  key: country.iso2,
+  text: country.name,
+  value: country.iso2,
+}));
+
 export default function EditProfileQuery() {
   const {
     formValues: {
@@ -38,12 +52,48 @@ export default function EditProfileQuery() {
       </FormGroup>
       {profileDataToChange && (
         <>
-          <Form.Input
-            label={I18n.t(`page.contacts.form.wrt.new_profile_data_${profileDataToChange}.label`)}
-            name="newProfileData"
-            value={newProfileData}
-            onChange={handleFormChange}
-          />
+          {profileDataToChange === 'name' && (
+            <Form.Input
+              label={I18n.t('page.contacts.form.wrt.new_profile_data_name.label')}
+              name="newProfileData"
+              value={newProfileData}
+              onChange={handleFormChange}
+            />
+          )}
+          {profileDataToChange === 'country' && (
+            <Form.Select
+              label={I18n.t('page.contacts.form.wrt.new_profile_data_country.label')}
+              options={countryOptions}
+              name="newProfileData"
+              search
+              value={newProfileData}
+              onChange={handleFormChange}
+            />
+          )}
+          {profileDataToChange === 'gender' && (
+            <Form.Select
+              label={I18n.t('page.contacts.form.wrt.new_profile_data_gender.label')}
+              options={genderOptions}
+              name="newProfileData"
+              value={newProfileData}
+              onChange={handleFormChange}
+            />
+          )}
+          {profileDataToChange === 'dob' && (
+            <Form.Field
+              label={I18n.t('page.contacts.form.wrt.new_profile_data_dob.label')}
+              name="newProfileData"
+              control={UtcDatePicker}
+              showYearDropdown
+              dateFormatOverride="YYYY-MM-dd"
+              dropdownMode="select"
+              isoDate={newProfileData}
+              onChange={(date) => handleFormChange(null, {
+                name: 'newProfileData',
+                value: date,
+              })}
+            />
+          )}
           <Form.TextArea
             label={I18n.t('page.contacts.form.wrt.edit_profile_reason.label')}
             name="editProfileReason"