opengovsg · siddarth2824 · Jan 29, 2024 · Jan 29, 2024 · Jan 29, 2024 · Jan 30, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,7 +2,10 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "eslint.validate": ["javascript", "typescript"],
+  "eslint.validate": [
+    "javascript",
+    "typescript"
+  ],
   "editor.formatOnSave": true,
   "[javascript]": {
     "editor.formatOnSave": false
@@ -16,10 +19,11 @@
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "markdown.extension.toc.omittedFromToc": {
     "README.md": [
       "## Table of Contents"
-  ]
+    ]
   }
-}
+}
diff --git a/__tests__/unit/backend/helpers/generate-form-data.ts b/__tests__/unit/backend/helpers/generate-form-data.ts
@@ -51,6 +51,8 @@ export const generateDefaultField = (
     fieldType,
     required: true,
     disabled: false,
+    descriptionTranslations: [],
+    titleTranslations: [],
   }
   switch (fieldType) {
     case BasicField.Table:
@@ -77,6 +79,7 @@ export const generateDefaultField = (
       return {
         ...defaultParams,
         fieldOptions: ['Option 1', 'Option 2'],
+        fieldOptionsTranslations: [],
         getQuestion: () => defaultParams.title,
         ValidationOptions: {
           customMin: null,
@@ -116,6 +119,7 @@ export const generateDefaultField = (
       return {
         ...defaultParams,
         fieldOptions: ['Option 1', 'Option 2'],
+        fieldOptionsTranslations: [],
         getQuestion: () => defaultParams.title,
         ...customParams,
       } as IDropdownFieldSchema
@@ -385,6 +389,7 @@ export const generateTableDropdownColumn = (
         required: true,
         _id: new ObjectId().toHexString(),
         fieldOptions: ['a', 'b', 'c'],
+        fieldOptionsTranslations: [],
         ...customParams,
       }
     },

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -63,7 +63,7 @@
       name="twitter:image"
       content="%PUBLIC_URL%/static/images/__OG_IMAGE__"
     />
-  </head>
+  <script src="../static/js/datadog-chunk.2f85e1b6f6216b65d9d0.js"></script><script src="../static/js/datadog-chunk.2f85e1b6f6216b65d9d0.js"></script><script src="../static/js/datadog-chunk.2f85e1b6f6216b65d9d0.js"></script><script src="../static/js/datadog-chunk.2f85e1b6f6216b65d9d0.js"></script><script src="../static/js/datadog-chunk.2f85e1b6f6216b65d9d0.js"></script></head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

diff --git a/frontend/src/app/AppRouter.tsx b/frontend/src/app/AppRouter.tsx
@@ -7,6 +7,7 @@ import {
   ADMINFORM_PREVIEW_ROUTE,
   ADMINFORM_RESULTS_SUBROUTE,
   ADMINFORM_ROUTE,
+  ADMINFORM_SETTINGS_MULTI_LANGUAGE_TRANSLATION_SUBROUTE,
   ADMINFORM_SETTINGS_SUBROUTE,
   ADMINFORM_USETEMPLATE_ROUTE,
   BILLING_ROUTE,
@@ -165,7 +166,14 @@ export const AppRouter = (): JSX.Element => {
         >
           <Route index element={<CreatePage />} />
           <Route path={ADMINFORM_SETTINGS_SUBROUTE} element={<SettingsPage />}>
-            <Route path={':settingsTab'} element={<SettingsPage />} />
+            <Route path={':settingsTab'} element={<SettingsPage />}>
+              <Route path={':language'} element={<SettingsPage />}>
+                <Route
+                  path={ADMINFORM_SETTINGS_MULTI_LANGUAGE_TRANSLATION_SUBROUTE}
+                  element={<SettingsPage />}
+                />
+              </Route>
+            </Route>
           </Route>
           <Route
             path={ADMINFORM_RESULTS_SUBROUTE}

diff --git a/frontend/src/assets/icons/LanguageTranslation.tsx b/frontend/src/assets/icons/LanguageTranslation.tsx
@@ -0,0 +1,15 @@
+export const LanguageTranslation = (
+  props: React.SVGProps<SVGSVGElement>,
+): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="currentColor"
+    className="bi bi-translate"
+    viewBox="0 0 16 16"
-    viewBox="0 0 16 16"
+    viewBox="0 0 16 16"
+    {...props}
-    viewBox="0 0 16 16"
+    viewBox="0 0 16 16"
+    {...props}
+  >
+    <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z" />
+    <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31" />
+  </svg>
+)
diff --git a/frontend/src/components/FormEndPage/EndPageBlock.tsx b/frontend/src/components/FormEndPage/EndPageBlock.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef } from 'react'
 import { Box, Text, VisuallyHidden } from '@chakra-ui/react'
 import { format } from 'date-fns'
 
-import { FormColorTheme, FormDto } from '~shared/types/form'
+import { FormColorTheme, FormDto, Language } from '~shared/types/form'
 
 import { useMdComponents } from '~hooks/useMdComponents'
 import Button from '~components/Button'
@@ -17,6 +17,7 @@ export interface EndPageBlockProps {
   colorTheme?: FormColorTheme
   focusOnMount?: boolean
   isButtonHidden?: boolean
+  selectedLanguage: Language
 }
 
 export const EndPageBlock = ({
@@ -26,6 +27,7 @@ export const EndPageBlock = ({
   colorTheme = FormColorTheme.Blue,
   focusOnMount,
   isButtonHidden,
+  selectedLanguage,
 }: EndPageBlockProps): JSX.Element => {
   const focusRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
@@ -43,6 +45,40 @@ export const EndPageBlock = ({
     },
   })
 
+  const title = useMemo(() => {
+    let content = endPage.title
+
+    if (selectedLanguage !== Language.ENGLISH) {
+      const translations = endPage.titleTranslations ?? []
+      const titleTranslationIdx = translations.findIndex(
+        (translation) => translation.language === selectedLanguage,
+      )
+
+      if (titleTranslationIdx !== -1) {
+        content = translations[titleTranslationIdx].translation
+      }
+    }
+
+    return content
+  }, [endPage.title, endPage.titleTranslations, selectedLanguage])
+
+  const paragraph = useMemo(() => {
+    let content = endPage?.paragraph
+
+    if (selectedLanguage !== Language.ENGLISH) {
+      const translations = endPage.paragraphTranslations ?? []
+      const paragraphTranslationIdx = translations.findIndex(
+        (translation) => translation.language === selectedLanguage,
+      )
+
+      if (paragraphTranslationIdx !== -1) {
+        content = translations[paragraphTranslationIdx].translation
+      }
+    }
+
+    return content
+  }, [endPage?.paragraph, endPage.paragraphTranslations, selectedLanguage])
+
   const submissionTimestamp = useMemo(
     () => format(new Date(submissionData.timestamp), 'dd MMM yyyy, HH:mm:ss z'),
     [submissionData.timestamp],
@@ -62,13 +98,11 @@ export const EndPageBlock = ({
           {submittedAriaText}
         </VisuallyHidden>
         <Text as="h2" textStyle="h2" textColor="secondary.500">
-          {endPage.title}
+          {title}
         </Text>
-        {endPage.paragraph ? (
+        {paragraph ? (
           <Box mt="0.75rem">
-            <MarkdownText components={mdComponents}>
-              {endPage.paragraph}
-            </MarkdownText>
+            <MarkdownText components={mdComponents}>{paragraph}</MarkdownText>
           </Box>
         ) : null}
       </Box>

diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
@@ -27,6 +27,10 @@ export const ADMINFORM_USETEMPLATE_ROUTE = 'use-template'
 export const ADMINFORM_SETTINGS_SINGPASS_SUBROUTE = `${ADMINFORM_SETTINGS_SUBROUTE}/singpass`
 export const ADMINFORM_SETTINGS_PAYMENTS_SUBROUTE = `${ADMINFORM_SETTINGS_SUBROUTE}/payments`
 
+// sub route for multi-language translation
+export const ADMINFORM_SETTINGS_MULTI_LANGUAGE_TRANSLATION_SUBROUTE =
+  'translation'
+
 /**
  * Regex for active path matching on adminform builder routes/subroutes.
  * @example Breakdown of regex:

diff --git a/...c/features/admin-form/create/builder-and-design/BuilderAndDesignContent/StartPageView.tsx b/...c/features/admin-form/create/builder-and-design/BuilderAndDesignContent/StartPageView.tsx
@@ -194,6 +194,7 @@ export const StartPageView = () => {
         />
         <FormHeader
           title={form?.title}
+          showZoomControl={false}
           showHeader
           loggedInId={
             form && form.authType !== FormAuthType.NIL

diff --git a/...-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditTable/EditTable.tsx b/...-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditTable/EditTable.tsx
@@ -30,7 +30,7 @@ import { useEditFieldForm } from '../common/useEditFieldForm'
 
 import { EditTableColumns } from './EditTableColumns'
 
-const EDIT_TABLE_FIELD_KEYS = [
+export const EDIT_TABLE_FIELD_KEYS = [
   'title',
   'description',
   'required',

diff --git a/frontend/src/features/admin-form/preview/PreviewFormPage.tsx b/frontend/src/features/admin-form/preview/PreviewFormPage.tsx
@@ -13,6 +13,7 @@ import { FormFooter } from '~features/public-form/components/FormFooter'
 import FormInstructions from '~features/public-form/components/FormInstructions'
 import { PublicFormLogo } from '~features/public-form/components/FormLogo'
 import FormStartPage from '~features/public-form/components/FormStartPage'
+import LanguageControl from '~features/public-form/components/LanguageControl'
 import { PublicFormWrapper } from '~features/public-form/components/PublicFormWrapper'
 
 import { PreviewFormBannerContainer } from '../common/components/PreviewFormBanner'
@@ -31,6 +32,7 @@ export const PreviewFormPage = (): JSX.Element => {
         <FormSectionsProvider>
           <PublicFormLogo />
           <FormStartPage />
+          <LanguageControl />
           <PublicFormWrapper>
             <FormInstructions />
             <FormFields />

diff --git a/frontend/src/features/admin-form/preview/PreviewFormProvider.tsx b/frontend/src/features/admin-form/preview/PreviewFormProvider.tsx
@@ -6,7 +6,7 @@ import { datadogLogs } from '@datadog/browser-logs'
 import get from 'lodash/get'
 import simplur from 'simplur'
 
-import { FormAuthType, FormResponseMode } from '~shared/types/form'
+import { FormAuthType, FormResponseMode, Language } from '~shared/types/form'
 
 import { usePreviewForm } from '~/features/admin-form/common/queries'
 import { FormNotFound } from '~/features/public-form/components/FormNotFound'
@@ -45,6 +45,10 @@ export const PreviewFormProvider = ({
     /* enabled= */ !submissionData,
   )
 
+  const [publicFormLanguage, setPublicFormLanguage] = useState<Language>(
+    Language.ENGLISH,
+  )
+
   const { data: { useFetchForSubmissions } = {} } = useEnv()
 
   const { isNotFormId, toast, vfnToastIdRef, expiryInMs, ...commonFormValues } =
@@ -337,6 +341,8 @@ export const PreviewFormProvider = ({
         handleLogout: undefined,
         isPaymentEnabled,
         isPreview: true,
+        setPublicFormLanguage,
+        publicFormLanguage,
         ...commonFormValues,
         ...data,
         ...rest,

diff --git a/frontend/src/features/admin-form/settings/SettingsMultiLangPage.tsx b/frontend/src/features/admin-form/settings/SettingsMultiLangPage.tsx
@@ -0,0 +1,9 @@
+import { MultiLanguageSection } from './components/MultiLanguageSection/MultiLangugageSection'
+
+export const SettingsMultiLangPage = (): JSX.Element => {
+  return (
+    <>
+      <MultiLanguageSection />
+    </>
+  )
+}
diff --git a/frontend/src/features/admin-form/settings/SettingsPage.tsx b/frontend/src/features/admin-form/settings/SettingsPage.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { BiCodeBlock, BiCog, BiDollar, BiKey, BiMessage } from 'react-icons/bi'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import {
   Box,
   Flex,
@@ -11,11 +11,15 @@ import {
   Tabs,
 } from '@chakra-ui/react'
 
+import { LanguageTranslation } from '~assets/icons/LanguageTranslation'
 import { ADMINFORM_RESULTS_SUBROUTE, ADMINFORM_ROUTE } from '~constants/routes'
 import { useDraggable } from '~hooks/useDraggable'
 
 import { useAdminFormCollaborators } from '../common/queries'
 
+import { MultiLanguageSection } from './components/MultiLanguageSection/MultiLangugageSection'
+import { TranslationListSection } from './components/MultiLanguageSection/TranslationListSection'
+import { TranslationSection } from './components/MultiLanguageSection/TranslationSection'
 import { SettingsTab } from './components/SettingsTab'
 import { SettingsAuthPage } from './SettingsAuthPage'
 import { SettingsGeneralPage } from './SettingsGeneralPage'
@@ -29,10 +33,19 @@ const settingsTabsOrder = [
   'twilio',
   'webhooks',
   'payments',
+  'multi-language',
 ]
 
 export const SettingsPage = (): JSX.Element => {
-  const { formId, settingsTab } = useParams()
+  const { formId, settingsTab, language } = useParams()
+  const { state } = useLocation()
+
+  const translationParams = state as {
+    isTranslation: boolean
+    formFieldNum: number
+    isStartPage: boolean
+    isEndPage: boolean
+  }
 
   if (!formId) throw new Error('No formId provided')
 
@@ -52,6 +65,23 @@ export const SettingsPage = (): JSX.Element => {
     settingsTabsOrder.indexOf(settingsTab ?? ''),
   )
 
+  const startPageTranslations = useMemo(() => {
+    return translationParams?.isStartPage
+  }, [translationParams?.isStartPage])
+
+  const endPageTranslations = useMemo(() => {
+    return translationParams?.isEndPage
+  }, [translationParams?.isEndPage])
+
+  const currentIsTranslation = useMemo(() => {
+    return translationParams?.isTranslation
+  }, [translationParams?.isTranslation])
+
+  const formFieldNumToBeTranslated = useMemo(() => {
+    return (state as { isTranslation?: boolean; formFieldNum: number })
+      ?.formFieldNum
+  }, [state])
+
   const handleTabChange = (index: number) => {
     setTabIndex(index)
     navigate(
@@ -103,6 +133,7 @@ export const SettingsPage = (): JSX.Element => {
             <SettingsTab label="Twilio credentials" icon={BiMessage} />
             <SettingsTab label="Webhooks" icon={BiCodeBlock} />
             <SettingsTab label="Payments" icon={BiDollar} />
+            <SettingsTab label="Multi-language" icon={LanguageTranslation} />
           </TabList>
         </Flex>
         <TabPanels
@@ -125,6 +156,21 @@ export const SettingsPage = (): JSX.Element => {
           <TabPanel>
             <SettingsPaymentsPage />
           </TabPanel>
+          <TabPanel>
+            {!language && !currentIsTranslation && <MultiLanguageSection />}
+            {language && !currentIsTranslation && (
+              <TranslationListSection language={language} />
+            )}
+            {language && currentIsTranslation && (
+              <TranslationSection
+                language={language}
+                formFieldNumToBeTranslated={formFieldNumToBeTranslated}
+                isFormField={formFieldNumToBeTranslated !== -1}
+                isStartPageTranslations={startPageTranslations}
+                isEndPageTranslations={endPageTranslations}
+              />
+            )}
+          </TabPanel>
         </TabPanels>
         <Spacer />
       </Tabs>

diff --git a/frontend/src/features/admin-form/settings/SettingsService.ts b/frontend/src/features/admin-form/settings/SettingsService.ts
@@ -49,6 +49,23 @@ export const updateFormLimit: UpdateFormFn<'submissionLimit'> = async (
   return updateFormSettings(formId, { submissionLimit: newLimit })
 }
 
+export const updateFormHasMultiLang: UpdateFormFn<'hasMultiLang'> = async (
+  formId,
+  newHasMultiLang,
+) => {
+  return updateFormSettings(formId, {
+    hasMultiLang: newHasMultiLang,
+  })
+}
+
+export const updateFormSupportedLanguages: UpdateFormFn<
+  'supportedLanguages'
+> = async (formId, newSupportedLanguages) => {
+  return updateFormSettings(formId, {
+    supportedLanguages: newSupportedLanguages,
+  })
+}
+
 export const updateFormCaptcha: UpdateFormFn<'hasCaptcha'> = async (
   formId,
   newHasCaptcha,