Change contact API response type to formData (#9349)

* Change contact API response type to formData

* Review changes

* Review changes

app/controllers/contacts_controller.rb

@@ -62,9 +62,12 @@ class ContactsController < ApplicationController
   end
 
   def contact
-    contact_recipient = params.require(:contactRecipient)
-    contact_params = params.require(contact_recipient)
-    requestor_details = current_user || params.require(:userData)
+    formValues = JSON.parse(params.require(:formValues), symbolize_names: true)
+    contact_recipient = formValues[:contactRecipient]
+    contact_params = formValues[contact_recipient.to_sym]
+    requestor_details = current_user || formValues[:userData]
+
+    render status: :bad_request, json: { error: "Invalid arguments" } if contact_recipient.nil? || contact_params.nil? || requestor_details.nil?
 
     case contact_recipient
     when UserGroup.teams_committees_group_wct.metadata.friendly_id

app/webpacker/components/ContactsPage/ContactForm.jsx

@@ -33,7 +33,7 @@ export default function ContactForm({ loggedInUserData }) {
   const [contactSuccess, setContactSuccess] = useState(false);
   const contactFormState = useStore();
   const dispatch = useDispatch();
-  const { contactRecipient: selectedContactRecipient, userData } = contactFormState;
+  const { formValues: { contactRecipient: selectedContactRecipient, userData } } = contactFormState;
 
   const isFormValid = (
     selectedContactRecipient && userData.name && userData.email && captchaValue
@@ -78,11 +78,13 @@ export default function ContactForm({ loggedInUserData }) {
       <Form
         onSubmit={() => {
           if (isFormValid) {
+            const formData = new FormData();
+            formData.append('formValues', JSON.stringify(contactFormState.formValues));
             save(
               contactUrl,
-              contactFormState,
+              formData,
               contactSuccessHandler,
-              { method: 'POST' },
+              { method: 'POST', headers: {}, body: formData },
             );
           }
         }}

app/webpacker/components/ContactsPage/SubForms/Competition/index.jsx

@@ -9,7 +9,7 @@ import { updateSectionData } from '../../store/actions';
 const SECTION = 'competition';
 
 export default function Competition() {
-  const { competition } = useStore();
+  const { formValues: { competition } } = useStore();
   const dispatch = useDispatch();
   const handleFormChange = (_, { name, value }) => dispatch(
     updateSectionData(SECTION, name, value),

app/webpacker/components/ContactsPage/SubForms/Wct/index.jsx

@@ -7,7 +7,7 @@ import { updateSectionData } from '../../store/actions';
 const SECTION = 'wct';
 
 export default function Wct() {
-  const { wct } = useStore();
+  const { formValues: { wct } } = useStore();
   const dispatch = useDispatch();
   const handleFormChange = (_, { name, value }) => dispatch(
     updateSectionData(SECTION, name, value),

app/webpacker/components/ContactsPage/SubForms/Wrt/index.jsx

@@ -7,7 +7,7 @@ import { updateSectionData } from '../../store/actions';
 const SECTION = 'wrt';
 
 export default function Wrt() {
-  const { wrt } = useStore();
+  const { formValues: { wrt } } = useStore();
   const dispatch = useDispatch();
   const handleFormChange = (_, { name, value }) => dispatch(
     updateSectionData(SECTION, name, value),

app/webpacker/components/ContactsPage/SubForms/Wst/index.jsx

@@ -7,7 +7,7 @@ import { updateSectionData } from '../../store/actions';
 const SECTION = 'wst';
 
 export default function Wst() {
-  const { wst } = useStore();
+  const { formValues: { wst } } = useStore();
   const dispatch = useDispatch();
   const handleFormChange = (_, { name, value }) => dispatch(
     updateSectionData(SECTION, name, value),

app/webpacker/components/ContactsPage/UserData.jsx

@@ -7,7 +7,7 @@ import { updateSectionData } from './store/actions';
 const SECTION = 'userData';
 
 export default function UserData({ loggedInUserData }) {
-  const { userData } = useStore();
+  const { formValues: { userData } } = useStore();
   const dispatch = useDispatch();
   const handleFormChange = (_, { name, value }) => dispatch(
     updateSectionData(SECTION, name, value),

app/webpacker/components/ContactsPage/store/reducer.js

@@ -5,31 +5,40 @@ import {
 } from './actions';
 
 export const getContactFormInitialState = (loggedInUserData, queryParams) => ({
-  userData: {
-    name: loggedInUserData?.user?.name,
-    email: loggedInUserData?.user?.email,
-  },
-  contactRecipient: queryParams?.contactRecipient,
-  competition: {
-    competitionId: queryParams?.competitionId,
-  },
-  wst: {
-    requestId: queryParams?.requestId,
+  formValues: {
+    userData: {
+      name: loggedInUserData?.user?.name,
+      email: loggedInUserData?.user?.email,
+    },
+    contactRecipient: queryParams?.contactRecipient,
+    competition: {
+      competitionId: queryParams?.competitionId,
+    },
+    wst: {
+      requestId: queryParams?.requestId,
+    },
   },
+  attachments: [],
 });
 
 const reducers = {
   [UpdateSectionData]: (state, { payload }) => ({
     ...state,
-    [payload.section]: {
-      ...(state[payload.section] || {}),
-      [payload.name]: payload.value,
+    formValues: {
+      ...state.formValues,
+      [payload.section]: {
+        ...(state.formValues[payload.section] || {}),
+        [payload.name]: payload.value,
+      },
     },
   }),
 
   [UpdateContactRecipient]: (state, { payload }) => ({
     ...state,
-    contactRecipient: payload.contactRecipient,
+    formValues: {
+      ...state.formValues,
+      contactRecipient: payload.contactRecipient,
+    },
   }),
 
   [ClearForm]: (__, { payload }) => (