refactor(i18n): extract hard-coded translations

frontend/src/features/public-form/components/FormFields/FormSectionsContext.tsx

@@ -7,14 +7,14 @@ import {
   useMemo,
   useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import useScrollSpy from 'react-use-scrollspy'
 
 import { BasicField, FormFieldDto } from '~shared/types'
 
 import { FieldIdSet } from '~features/logic/types'
 import { usePublicFormContext } from '~features/public-form/PublicFormContext'
 
-import { titleTranslations } from '../FormInstructions'
 import { PUBLICFORM_INSTRUCTIONS_SECTIONID } from '../FormInstructions/FormInstructionsContainer'
 
 export type SidebarSectionMeta = Pick<
@@ -43,6 +43,7 @@ interface FormSectionsProviderProps {
 export const FormSectionsProvider = ({
   children,
 }: FormSectionsProviderProps): JSX.Element => {
+  const { t } = useTranslation()
   const { form, isAuthRequired } = usePublicFormContext()
 
   const [visibleFieldIds, setVisibleFieldIds] = useState<FieldIdSet>()
@@ -52,8 +53,8 @@ export const FormSectionsProvider = ({
     const sections: SidebarSectionMeta[] = []
     if (form.startPage.paragraph)
       sections.push({
-        title: 'Instructions',
-        titleTranslations,
+        title: t('features.publicForm.components.instructions.title'),
+        titleTranslations: [],
         _id: PUBLICFORM_INSTRUCTIONS_SECTIONID,
       })
     form.form_fields.forEach((f) => {
@@ -66,7 +67,7 @@ export const FormSectionsProvider = ({
       })
     })
     return sections
-  }, [form, isAuthRequired, visibleFieldIds])
+  }, [form, isAuthRequired, visibleFieldIds, t])
 
   const [sectionRefs, setSectionRefs] = useState<
     Record<string, RefObject<HTMLDivElement>>

frontend/src/features/public-form/components/FormInstructions/FormInstructions.tsx

@@ -1,15 +1,12 @@
 import { useTranslation } from 'react-i18next'
 import { Box } from '@chakra-ui/react'
 
-import { FormColorTheme, Language } from '~shared/types'
+import { FormColorTheme } from '~shared/types'
 
 import { useMdComponents } from '~hooks/useMdComponents'
-import { getValueInSelectedLanguage } from '~utils/multiLanguage'
 import { MarkdownText } from '~components/MarkdownText'
 import { useSectionColor } from '~templates/Field/Section/useSectionColor'
 
-import { titleTranslations } from '.'
-
 interface FormInstructionsProps {
   content: string
   colorTheme?: FormColorTheme
@@ -19,7 +16,7 @@ export const FormInstructions = ({
   content,
   colorTheme,
 }: FormInstructionsProps): JSX.Element => {
-  const { i18n } = useTranslation()
+  const { t } = useTranslation()
   const sectionColor = useSectionColor(colorTheme)
   const mdComponents = useMdComponents({
     styles: {
@@ -30,17 +27,10 @@ export const FormInstructions = ({
     },
   })
 
-  const selectedLanguage = i18n.language as Language
-  const title = getValueInSelectedLanguage({
-    defaultValue: 'Instructions',
-    translations: titleTranslations,
-    selectedLanguage,
-  })
-
   return (
     <>
       <Box as="h2" textStyle="h2" color={sectionColor}>
-        {title}
+        {t('features.publicForm.components.instructions.title')}
       </Box>
       <Box mt="1rem">
         <MarkdownText multilineBreaks components={mdComponents}>

frontend/src/features/public-form/components/FormInstructions/index.ts

@@ -1,10 +1 @@
-import { Language, TranslationMapping } from '~shared/types'
-
 export { FormInstructionsContainer as default } from './FormInstructionsContainer'
-
-export const titleTranslations: TranslationMapping[] = [
-  { language: Language.ENGLISH, translation: 'Instructions' },
-  { language: Language.CHINESE, translation: '说明' },
-  { language: Language.MALAY, translation: 'Arahan' },
-  { language: Language.TAMIL, translation: 'வழிமுறைகள்' },
-]

frontend/src/features/public-form/components/FormStartPage/useFormHeader.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { FormColorTheme, FormStartPage, Language } from '~shared/types'
+import { FormColorTheme, FormStartPage } from '~shared/types'
 
 import { ThemeColorScheme } from '~theme/foundations/colours'
 
@@ -10,30 +10,11 @@ interface UseFormHeaderProps {
   hover?: boolean
 }
 
-const getEstTimeTranslation = ({
-  estTime,
-  selectedLanguage,
-}: {
-  estTime: number
-  selectedLanguage: Language
-}) => {
-  switch (selectedLanguage) {
-    case Language.CHINESE:
-      return `预计需要 ${estTime} 分钟完成`
-    case Language.MALAY:
-      return `Anggaran masa ${estTime} min untuk selesai`
-    case Language.TAMIL:
-      return `இந்த படிவத்தை முடிக்க கணக்கிடப்பட்ட நேரம் ${estTime} நிமிடங்கள் ஆகும்`
-    default:
-      return `${estTime} mins estimated time to complete`
-  }
-}
-
 export const getTitleBg = (colorTheme?: FormColorTheme, hover?: boolean) =>
   colorTheme ? `theme-${colorTheme}.${hover ? 6 : 5}00` : `neutral.200`
 
 export const useFormHeader = ({ startPage, hover }: UseFormHeaderProps) => {
-  const { i18n } = useTranslation()
+  const { t } = useTranslation()
   const titleColor = useMemo(() => {
     if (startPage?.colorTheme === FormColorTheme.Orange) {
       return 'secondary.700'
@@ -46,15 +27,13 @@ export const useFormHeader = ({ startPage, hover }: UseFormHeaderProps) => {
     [hover, startPage?.colorTheme],
   )
 
-  const selectedLanguage = i18n.language as Language
   const estTimeString = useMemo(() => {
-    if (!startPage?.estTimeTaken) return ''
-    const title = getEstTimeTranslation({
-      estTime: startPage.estTimeTaken,
-      selectedLanguage,
-    })
-    return title
-  }, [selectedLanguage, startPage?.estTimeTaken])
+    return startPage?.estTimeTaken
+      ? t('features.publicForm.components.header.estTime', {
+          estTime: startPage.estTimeTaken,
+        })
+      : ''
+  }, [t, startPage?.estTimeTaken])
 
   const colorScheme: ThemeColorScheme | undefined = useMemo(() => {
     if (!startPage?.colorTheme) return

frontend/src/i18n/locales/features/public-form/en-sg.ts

@@ -25,6 +25,10 @@ export const enSG: PublicForm = {
       'Your verified fields have expired. Please verify those fields again.',
   },
   components: {
+    header: {
+      estTime:
+        '{estTime, plural, =1 {# min} other {# mins}} estimated time to complete',
+    },
     submitButton: {
       loadingText: 'Submitting',
       visuallyHidden: 'End of form.',
@@ -46,5 +50,8 @@ export const enSG: PublicForm = {
       commentPlaceholder: 'Tell us more about your experience',
       submitButton: 'Submit feedback',
     },
+    instructions: {
+      title: 'Instructions',
+    },
   },
 }

frontend/src/i18n/locales/features/public-form/index.ts

@@ -20,6 +20,9 @@ export interface PublicForm {
     verifiedFieldExpired: string
   }
   components: {
+    header: {
+      estTime: string
+    }
     submitButton: {
       loadingText: string
       visuallyHidden: string
@@ -41,6 +44,9 @@ export interface PublicForm {
       commentPlaceholder: string
       submitButton: string
     }
+    instructions: {
+      title: string
+    }
   }
 }
 

frontend/src/i18n/locales/features/public-form/ms-sg.ts

@@ -3,7 +3,13 @@ import { msSG as table } from './table'
 
 export const msSG = {
   components: {
+    header: {
+      estTime: 'Anggaran masa {estTime} min untuk selesai',
+    },
     fields,
     table,
+    instructions: {
+      title: 'Arahan',
+    },
   },
 }

frontend/src/i18n/locales/features/public-form/ta-sg.ts

@@ -3,7 +3,14 @@ import { taSG as table } from './table'
 
 export const taSG = {
   components: {
+    header: {
+      estTime:
+        'இந்த படிவத்தை முடிக்க கணக்கிடப்பட்ட நேரம் {estTime} நிமிடங்கள் ஆகும்',
+    },
     fields,
     table,
+    instructions: {
+      title: 'வழிமுறைகள்',
+    },
   },
 }

frontend/src/i18n/locales/features/public-form/zh-sg.ts

@@ -3,7 +3,13 @@ import { zhSG as table } from './table'
 
 export const zhSG = {
   components: {
+    header: {
+      estTime: '预计需要{estTime}分钟完成',
+    },
     fields,
     table,
+    instructions: {
+      title: '说明',
+    },
   },
 }