feat: add view for translation input (#7895)

* feat: add view for translation input

* fix: refactor code and remove console log statements

* chore: clean up code

* chore: fix alignment of translation input and header

* chore: address comments

frontend/src/constants/routes.ts

@@ -54,3 +54,7 @@ export const ACTIVE_ADMINFORM_RESULTS_ROUTE_REGEX = new RegExp(
 
 export const PAYMENT_PAGE_SUBROUTE = 'payment/:paymentId'
 export const EDIT_SUBMISSION_PAGE_SUBROUTE = 'edit/:submissionId'
+
+// Search param keys for multi-language
+export const UNICODE_LOCALE = 'unicodeLocale'
+export const TRANSLATION_INPUT = 'translationInput'

frontend/src/features/admin-form/settings/SettingsMultiLangPage.tsx

@@ -1,15 +1,38 @@
 import { useSearchParams } from 'react-router-dom'
+import _ from 'lodash'
+
+import { TRANSLATION_INPUT, UNICODE_LOCALE } from '~constants/routes'
 
 import { MultiLanguageSection } from './components/MultiLanguageSection/MultiLanguageSection'
 import { TranslationListSection } from './components/MultiLanguageSection/TranslationListSection'
+import { TranslationSection } from './components/MultiLanguageSection/TranslationSection'
 
 export const SettingsMultiLangPage = (): JSX.Element => {
   const [searchParams] = useSearchParams()
-  const unicodeLocale = searchParams.get('unicodeLocale')
+  const unicodeLocale = searchParams.get(UNICODE_LOCALE)
+  const translationInput = searchParams.get(TRANSLATION_INPUT)
+  const isTranslationInput = !_.isNull(translationInput)
+  const isEndPageTranslationInput = translationInput === 'endPage'
+  const isStartPageTransltionInput = translationInput === 'startPage'
 
+  // Request user to select a language
+  if (!unicodeLocale) {
+    return <MultiLanguageSection />
+  }
+  // Request user to select fields to translate
+  if (!isTranslationInput) {
+    return <TranslationListSection language={unicodeLocale} />
+  }
   return (
-    <>
-      {unicodeLocale ? <TranslationListSection language={unicodeLocale} /> : <MultiLanguageSection />}
-    </>
+    <TranslationSection
+      language={unicodeLocale}
+      formFieldNumToBeTranslated={
+        isEndPageTranslationInput || isStartPageTransltionInput
+          ? -1
+          : _.toNumber(translationInput)
+      }
+      isEndPageTranslations={isEndPageTranslationInput}
+      isStartPageTranslations={isStartPageTransltionInput}
+    />
   )
 }

frontend/src/features/admin-form/settings/components/MultiLanguageSection/EndPageTranslationContainer.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Divider, Flex, Text } from '@chakra-ui/react'
+
+import { FormEndPage, Language } from '~shared/types'
+
+import { TranslationContainer } from './TranslationContainer'
+
+interface EndPageTranslationsContainerProps {
+  endPage?: FormEndPage
+  capitalisedLanguage: string
+  unicodeLocale: Language
+}
+
+export const EndPageTranslationsContainer = ({
+  endPage,
+  capitalisedLanguage,
+  unicodeLocale,
+}: EndPageTranslationsContainerProps) => {
+  if (!endPage) return null
+
+  const hasParagraph = endPage.paragraph?.trim() !== ''
+
+  const currentTitleTranslations = endPage.titleTranslations ?? []
+  const currentParagraphTranslations = endPage.paragraphTranslations ?? []
+
+  const previousTitleTranslation =
+    currentTitleTranslations.find(
+      (translation) => translation.language === unicodeLocale,
+    )?.translation ?? ''
+
+  const previousParagraphTranslation =
+    currentParagraphTranslations.find(
+      (translation) => translation.language === unicodeLocale,
+    )?.translation ?? ''
+
+  return (
+    <>
+      <Flex justifyContent="flex-start" mb="2.5rem" direction="column">
+        <Text
+          color="secondary.500"
+          fontSize="1.25rem"
+          fontWeight="600"
+          mb="1rem"
+        >
+          Question
+        </Text>
+        <TranslationContainer
+          language={capitalisedLanguage}
+          defaultString={endPage.title}
+          editingTranslation="titleTranslation"
+          previousTranslation={previousTitleTranslation}
+        />
+      </Flex>
+      <Divider mb="2.5rem" />
+      {hasParagraph && (
+        <Flex justifyContent="flex-start" mb="2.5rem" direction="column">
+          <Text
+            color="secondary.500"
+            fontSize="1.25rem"
+            fontWeight="600"
+            mb="1rem"
+          >
+            Follow-up instructions
+          </Text>
+          <TranslationContainer
+            language={capitalisedLanguage}
+            defaultString={endPage.paragraph}
+            editingTranslation="paragraphTranslations"
+            previousTranslation={previousParagraphTranslation}
+          />
+        </Flex>
+      )}
+    </>
+  )
+}

frontend/src/features/admin-form/settings/components/MultiLanguageSection/FormFieldTranslationContainer.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { Divider, Flex, Text } from '@chakra-ui/react'
+
+import { FormField, Language } from '~shared/types'
+import { BasicField } from '~shared/types/field'
+
+import { OptionsTranslationContainer } from './OptionsTranslationContainer'
+import { TableTranslationContainer } from './TableTranslationContainer'
+import { TranslationContainer } from './TranslationContainer'
+
+interface FormFieldTranslationContainerProps {
+  formFieldData: FormField | undefined
+  capitalisedLanguage: string
+  unicodeLocale: Language
+}
+
+export const FormFieldTranslationContainer = ({
+  formFieldData,
+  capitalisedLanguage,
+  unicodeLocale,
+}: FormFieldTranslationContainerProps) => {
+  if (!formFieldData) return null
+
+  const hasDescription =
+    formFieldData.description && formFieldData.description !== ''
+  const titleTranslations = formFieldData.titleTranslations ?? []
+  const descriptionTranslations = formFieldData.descriptionTranslations ?? []
+
+  const prevTitleTranslation =
+    titleTranslations.find(
+      (translation) => translation.language === unicodeLocale,
+    )?.translation ?? ''
+
+  const prevDescriptionTranslation =
+    descriptionTranslations.find(
+      (translation) => translation.language === unicodeLocale,
+    )?.translation ?? ''
+
+  const isTableField = formFieldData.fieldType === BasicField.Table
+
+  return (
+    <>
+      <Flex justifyContent="flex-start" mb="2.5rem" direction="column">
+        <Text
+          color="secondary.500"
+          fontSize="1.25rem"
+          fontWeight="600"
+          mb="1rem"
+        >
+          Question
+        </Text>
+        <TranslationContainer
+          language={capitalisedLanguage}
+          defaultString={formFieldData.title}
+          editingTranslation="titleTranslation"
+          previousTranslation={prevTitleTranslation}
+        />
+      </Flex>
+      {hasDescription && (
+        <>
+          <Divider mb="2.5rem" />
+          <Flex justifyContent="flex-start" mb="2.5rem" direction="column">
+            <Text
+              color="secondary.500"
+              fontSize="1.25rem"
+              fontWeight="600"
+              mb="1rem"
+            >
+              Description
+            </Text>
+            <TranslationContainer
+              language={capitalisedLanguage}
+              defaultString={formFieldData.description}
+              editingTranslation="descriptionTranslation"
+              previousTranslation={prevDescriptionTranslation}
+            />
+          </Flex>
+        </>
+      )}
+      {(formFieldData.fieldType === BasicField.Radio ||
+        formFieldData.fieldType === BasicField.Checkbox ||
+        formFieldData.fieldType === BasicField.Dropdown) && (
+        <>
+          <Divider mb="2.5rem" />
+          <OptionsTranslationContainer
+            unicodeLocale={unicodeLocale}
+            language={capitalisedLanguage}
+            formFieldData={formFieldData}
+          />
+        </>
+      )}
+      {isTableField && (
+        <>
+          <Divider mb="2.5rem" />
+          <TableTranslationContainer
+            unicodeLocale={unicodeLocale}
+            language={capitalisedLanguage}
+            columns={formFieldData.columns}
+          />
+        </>
+      )}
+    </>
+  )
+}

frontend/src/features/admin-form/settings/components/MultiLanguageSection/FormMultiLanguageToggle.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react'
 import { BiEditAlt } from 'react-icons/bi'
 import { GoEye, GoEyeClosed } from 'react-icons/go'
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { useParams, useSearchParams } from 'react-router-dom'
 import {
   Box,
   Divider,
@@ -43,8 +43,7 @@ const LanguageTranslationRow = ({
 }: LanguageTranslationRowProps): JSX.Element => {
   const { formId } = useParams()
   const { data: settings } = useAdminFormSettings()
-  const navigate = useNavigate()
-  const [_, setSearchParams] = useSearchParams()
+  const [, setSearchParams] = useSearchParams()
 
   if (!formId) throw new Error('No formId provided')
 
@@ -84,7 +83,7 @@ const LanguageTranslationRow = ({
     (language: Language) => {
       setSearchParams({ unicodeLocale: language.toString() })
     },
-    [formId, navigate],
+    [setSearchParams],
   )
 
   return (

frontend/src/features/admin-form/settings/components/MultiLanguageSection/OptionsTranslationContainer.tsx

@@ -0,0 +1,72 @@
+import { useFormContext } from 'react-hook-form'
+import { Flex, FormControl, Text } from '@chakra-ui/react'
+
+import {
+  CheckboxFieldBase,
+  DropdownFieldBase,
+  Language,
+  RadioFieldBase,
+} from '~shared/types'
+
+import Textarea from '~components/Textarea'
+
+import { TranslationInput } from './TranslationSection'
+
+interface OptionsTranslationContainerProps {
+  language: string
+  unicodeLocale: Language
+  formFieldData: CheckboxFieldBase | DropdownFieldBase | RadioFieldBase
+}
+
+export const OptionsTranslationContainer = ({
+  language,
+  unicodeLocale,
+  formFieldData,
+}: OptionsTranslationContainerProps) => {
+  const { register } = useFormContext<TranslationInput>()
+
+  const fieldOptions = formFieldData.fieldOptions || []
+  const defaultFieldOptions = fieldOptions.join('\n')
+  const fieldOptionsTranslations = formFieldData.fieldOptionsTranslations || []
+
+  const previousTranslations =
+    fieldOptionsTranslations
+      .find((translation) => translation.language === unicodeLocale)
+      ?.translation.join('\n') || []
+
+  return (
+    <Flex direction="column" width="100%" mb="2.5rem">
+      <Flex alignItems="flex-start" mb="2rem">
+        <Text
+          color="secondary.700"
+          fontWeight="400"
+          mr="7.5rem"
+          width="6.25rem"
+        >
+          Default
+        </Text>
+        <Textarea
+          placeholder={defaultFieldOptions}
+          width="100%"
+          isDisabled={true}
+          padding="0.75rem"
+          resize="none"
+          height="max-content"
+          overflow="hidden"
+        />
+      </Flex>
+      <Flex alignItems="flex-start">
+        <Text color="secondary.700" mr="7.5rem" width="6.25rem">
+          {language}
+        </Text>
+        <FormControl>
+          <Textarea
+            width="100%"
+            {...register('fieldOptionsTranslations')}
+            defaultValue={previousTranslations}
+          />
+        </FormControl>
+      </Flex>
+    </Flex>
+  )
+}

frontend/src/features/admin-form/settings/components/MultiLanguageSection/StartPageTranslationContainer.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Flex, Text } from '@chakra-ui/react'
+
+import { FormStartPage, Language } from '~shared/types'
+
+import { TranslationContainer } from './TranslationContainer'
+
+interface StartPageTranslationContainerProps {
+  startPage?: FormStartPage
+  capitalisedLanguage: string
+  unicodeLocale: Language
+}
+
+export const StartPageTranslationContainer = ({
+  startPage,
+  capitalisedLanguage,
+  unicodeLocale,
+}: StartPageTranslationContainerProps) => {
+  if (!startPage) return null
+
+  const currentTranslations = startPage.paragraphTranslations ?? []
+  const previousTranslation =
+    currentTranslations.find(
+      (translation) => translation.language === unicodeLocale,
+    )?.translation ?? ''
+
+  return (
+    <Flex justifyContent="flex-start" mb="2.5rem" direction="column">
+      <Text color="secondary.500" fontSize="1.25rem" fontWeight="600" mb="1rem">
+        Question
+      </Text>
+      <TranslationContainer
+        language={capitalisedLanguage}
+        defaultString={startPage.paragraph}
+        editingTranslation="paragraphTranslations"
+        previousTranslation={previousTranslation}
+      />
+    </Flex>
+  )
+}