fix: trim text input before sending to backend (#7937)

* fix: trim text input before sending to backend

* fix: make comment more terse and fix typo

* chore: use flow to prevent nested function calls

frontend/src/features/public-form/PublicFormProvider.tsx

@@ -14,6 +14,7 @@ import { useDisclosure } from '@chakra-ui/react'
 import { datadogLogs } from '@datadog/browser-logs'
 import { useGrowthBook } from '@growthbook/growthbook-react'
 import { differenceInMilliseconds, isPast } from 'date-fns'
+import { flow } from 'lodash'
 import get from 'lodash/get'
 
 import {
@@ -123,6 +124,63 @@ export function useCommonFormProvider(formId: string) {
   }
 }
 
+// Country/region data must be upper-case in backend for myinfo-countries compatibility,
+// while displaying in title-case to users in the frontend.
+// Hence, we need to map the frontend title-case to upper-case when submitting to backend.
+const transformFormInputCountryRegionToUpperCase =
+  (form_fields: Array<{ fieldType: BasicField; _id: string }>) =>
+  (formInputs: Record<string, unknown>) => {
+    const countryRegionFieldIds = new Set(
+      form_fields
+        .filter((field) => field.fieldType === BasicField.CountryRegion)
+        .map((field) => field._id),
+    )
+
+    return Object.keys(formInputs).reduce(
+      (newFormInputs: typeof formInputs, fieldId) => {
+        const currentInput = formInputs[fieldId]
+        if (
+          countryRegionFieldIds.has(fieldId) &&
+          typeof currentInput === 'string'
+        ) {
+          newFormInputs[fieldId] = currentInput.toUpperCase()
+        } else {
+          newFormInputs[fieldId] = currentInput
+        }
+        return newFormInputs
+      },
+      {},
+    )
+  }
+
+// Trim text inputs before sending to backend to match frontend validation
+const transformFormInputTrimTextInputs =
+  (form_fields: Array<{ fieldType: BasicField; _id: string }>) =>
+  (formInputs: Record<string, unknown>) => {
+    const textFieldIds = new Set(
+      form_fields
+        .filter(
+          (field) =>
+            field.fieldType === BasicField.ShortText ||
+            field.fieldType === BasicField.LongText,
+        )
+        .map((field) => field._id),
+    )
+
+    return Object.keys(formInputs).reduce(
+      (newFormInputs: typeof formInputs, fieldId) => {
+        const currentInput = formInputs[fieldId]
+        if (textFieldIds.has(fieldId) && typeof currentInput === 'string') {
+          newFormInputs[fieldId] = currentInput.trim()
+        } else {
+          newFormInputs[fieldId] = currentInput
+        }
+        return newFormInputs
+      },
+      {},
+    )
+  }
+
 export const PublicFormProvider = ({
   formId,
   submissionId: previousSubmissionId,
@@ -515,32 +573,15 @@ export const PublicFormProvider = ({
         }
       }
 
-      const countryRegionFieldIds = new Set(
-        form.form_fields
-          .filter((field) => field.fieldType === BasicField.CountryRegion)
-          .map((field) => field._id),
-      )
-      // We want users to see the country/region options in title-case but we also need the data in the backend to remain in upper-case.
-      // Country/region data in the backend needs to remain in upper-case so that they remain consistent with myinfo-countries.
-      const formInputsWithCountryRegionInUpperCase = Object.keys(
-        formInputs,
-      ).reduce((newFormInputs: typeof formInputs, fieldId) => {
-        const currentInput = formInputs[fieldId]
-        if (
-          countryRegionFieldIds.has(fieldId) &&
-          typeof currentInput === 'string'
-        ) {
-          newFormInputs[fieldId] = currentInput.toUpperCase()
-        } else {
-          newFormInputs[fieldId] = currentInput
-        }
-        return newFormInputs
-      }, {})
+      const transformedFormInputs = flow([
+        transformFormInputCountryRegionToUpperCase(form.form_fields),
+        transformFormInputTrimTextInputs(form.form_fields),
+      ])(formInputs) as typeof formInputs
 
       const formData = {
         formFields: form.form_fields,
         formLogics: form.form_logics,
-        formInputs: formInputsWithCountryRegionInUpperCase,
+        formInputs: transformedFormInputs,
         captchaResponse,
         captchaType,
         responseMetadata: {
@@ -602,7 +643,7 @@ export const PublicFormProvider = ({
               .mutateAsync(
                 {
                   ...formData,
-                  formInputs: formInputsWithCountryRegionInUpperCase,
+                  formInputs: transformedFormInputs,
                 },
                 { onSuccess },
               )
@@ -640,7 +681,7 @@ export const PublicFormProvider = ({
                 .mutateAsync(
                   {
                     ...formData,
-                    formInputs: formInputsWithCountryRegionInUpperCase,
+                    formInputs: transformedFormInputs,
                   },
                   { onSuccess },
                 )