diff --git a/frontend/src/features/public-form/components/FormFields/FormSectionsContext.tsx b/frontend/src/features/public-form/components/FormFields/FormSectionsContext.tsx index 52ca3d6e93..0eb17c7875 100644 --- a/frontend/src/features/public-form/components/FormFields/FormSectionsContext.tsx +++ b/frontend/src/features/public-form/components/FormFields/FormSectionsContext.tsx @@ -7,6 +7,7 @@ import { useMemo, useState, } from 'react' +import { useTranslation } from 'react-i18next' import useScrollSpy from 'react-use-scrollspy' import { BasicField, FormFieldDto } from '~shared/types' @@ -14,7 +15,6 @@ 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() @@ -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> diff --git a/frontend/src/features/public-form/components/FormInstructions/FormInstructions.tsx b/frontend/src/features/public-form/components/FormInstructions/FormInstructions.tsx index 9a52cb6f53..53adb2fef4 100644 --- a/frontend/src/features/public-form/components/FormInstructions/FormInstructions.tsx +++ b/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 ( <> - {title} + {t('features.publicForm.components.instructions.title')} diff --git a/frontend/src/features/public-form/components/FormInstructions/index.ts b/frontend/src/features/public-form/components/FormInstructions/index.ts index b560d7fa03..da056b3217 100644 --- a/frontend/src/features/public-form/components/FormInstructions/index.ts +++ b/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: 'வழிமுறைகள்' }, -] diff --git a/frontend/src/features/public-form/components/FormStartPage/useFormHeader.tsx b/frontend/src/features/public-form/components/FormStartPage/useFormHeader.tsx index 8d91effb8f..23cb7fcb13 100644 --- a/frontend/src/features/public-form/components/FormStartPage/useFormHeader.tsx +++ b/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 diff --git a/frontend/src/i18n/locales/features/public-form/en-sg.ts b/frontend/src/i18n/locales/features/public-form/en-sg.ts index 5de122e6c1..0b28030764 100644 --- a/frontend/src/i18n/locales/features/public-form/en-sg.ts +++ b/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', + }, }, } diff --git a/frontend/src/i18n/locales/features/public-form/index.ts b/frontend/src/i18n/locales/features/public-form/index.ts index ed3a08144a..234f9d6772 100644 --- a/frontend/src/i18n/locales/features/public-form/index.ts +++ b/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 + } } } diff --git a/frontend/src/i18n/locales/features/public-form/ms-sg.ts b/frontend/src/i18n/locales/features/public-form/ms-sg.ts index 425c97b116..c2cd9fc341 100644 --- a/frontend/src/i18n/locales/features/public-form/ms-sg.ts +++ b/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', + }, }, } diff --git a/frontend/src/i18n/locales/features/public-form/ta-sg.ts b/frontend/src/i18n/locales/features/public-form/ta-sg.ts index 80127d1882..17b7cf54e3 100644 --- a/frontend/src/i18n/locales/features/public-form/ta-sg.ts +++ b/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: 'வழிமுறைகள்', + }, }, } diff --git a/frontend/src/i18n/locales/features/public-form/zh-sg.ts b/frontend/src/i18n/locales/features/public-form/zh-sg.ts index e640398344..e539dd0907 100644 --- a/frontend/src/i18n/locales/features/public-form/zh-sg.ts +++ b/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: '说明', + }, }, }