fix: update myInfo translations and address comments

opengovsg · Dec 19, 2024 · 5209b21 · 5209b21
1 parent fcd95a8
commit 5209b21
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 109 deletions.
diff --git a/frontend/src/components/FormEndPage/EndPageBlock.tsx b/frontend/src/components/FormEndPage/EndPageBlock.tsx
@@ -54,22 +54,11 @@ export const EndPageBlock = ({
     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 paragraph = getValueInSelectedLanguage({
+    defaultValue: endPage.paragraph ?? '',
+    translations: endPage.paragraphTranslations,
+    selectedLanguage,
+  })
 
   const submissionTimestamp = useMemo(
     () => format(new Date(submissionData.timestamp), 'dd MMM yyyy, HH:mm:ss z'),

diff --git a/frontend/src/features/admin-form/settings/SettingsPage.tsx b/frontend/src/features/admin-form/settings/SettingsPage.tsx
@@ -57,16 +57,16 @@ export const SettingsPage = (): JSX.Element => {
   }, [formId, hasEditAccess, isCollabLoading, navigate])
 
   const multiLangTab =
-    isUserLoading ||
-    isFormSettingLoading ||
-    !user?.betaFlags?.multiLangTranslation
-      ? null
-      : {
+    !isUserLoading &&
+    !isFormSettingLoading &&
+    user?.betaFlags?.multiLangTranslation
+      ? {
           label: 'Multi-language',
           icon: LanguageTranslation,
           component: SettingsMultiLangPage,
           path: 'language',
         }
+      : null
 
   const tabConfig: TabEntry[] = [
     {

diff --git a/...tures/admin-form/settings/components/MultiLanguageSection/EndPageTranslationContainer.tsx b/...tures/admin-form/settings/components/MultiLanguageSection/EndPageTranslationContainer.tsx
@@ -1,4 +1,5 @@
 import { Divider, Flex, Text } from '@chakra-ui/react'
+import _ from 'lodash'
 
 import { FormEndPage, Language } from '~shared/types'
 
@@ -17,7 +18,7 @@ export const EndPageTranslationsContainer = ({
 }: EndPageTranslationsContainerProps) => {
   if (!endPage) return null
 
-  const hasParagraph = endPage.paragraph?.trim() !== ''
+  const hasParagraph = !_.isEmpty(endPage.paragraph?.trim())
 
   const currentTitleTranslations = endPage.titleTranslations ?? []
   const currentParagraphTranslations = endPage.paragraphTranslations ?? []

diff --git a/...c/features/admin-form/settings/components/MultiLanguageSection/TranslationListSection.tsx b/...c/features/admin-form/settings/components/MultiLanguageSection/TranslationListSection.tsx
@@ -376,7 +376,7 @@ export const TranslationListSection = ({
           })}
 
           {/* Form Logic Prevent Submission Message Translation */}
-          {formLogicPreventSubmissions && (
+          {formLogicPreventSubmissions?.length !== 0 && (
             <>
               <QuestionRow
                 key="Form Logic"

diff --git a/frontend/src/features/public-form/components/FormFields/PublicFormSubmitButton.tsx b/frontend/src/features/public-form/components/FormFields/PublicFormSubmitButton.tsx
@@ -8,6 +8,7 @@ import { FormField, Language, LogicDto, MyInfoFormField } from '~shared/types'
 
 import { ThemeColorScheme } from '~theme/foundations/colours'
 import { useIsMobile } from '~hooks/useIsMobile'
+import { getValueInSelectedLanguage } from '~utils/multiLanguage'
 import Button from '~components/Button'
 import InlineMessage from '~components/InlineMessage'
 import { FormFieldValues, VerifiableFieldValues } from '~templates/Field'
@@ -65,18 +66,11 @@ export const PublicFormSubmitButton = ({
     })
   }, [formInputs, formFields, formLogics])
 
-  const selectedLanguage = i18n.language as Language
-  const preventSubmissionMessage = useMemo(() => {
-    return (
-      preventSubmissionLogic?.preventSubmitMessageTranslations?.find(
-        (translation) => translation.language === selectedLanguage,
-      )?.translation ?? preventSubmissionLogic?.preventSubmitMessage
-    )
-  }, [
-    preventSubmissionLogic?.preventSubmitMessage,
-    preventSubmissionLogic?.preventSubmitMessageTranslations,
-    selectedLanguage,
-  ])
+  const preventSubmissionMessage = getValueInSelectedLanguage({
+    defaultValue: preventSubmissionLogic?.preventSubmitMessage ?? '',
+    translations: preventSubmissionLogic?.preventSubmitMessageTranslations,
+    selectedLanguage: i18n.language as Language,
+  })
 
   // For payments submit and pay modal
   const {

diff --git a/frontend/src/features/public-form/components/LanguageControl/LanguageControl.tsx b/frontend/src/features/public-form/components/LanguageControl/LanguageControl.tsx
@@ -79,7 +79,7 @@ export const LanguageControl = (): JSX.Element | null => {
       px={{ base: '1.5rem', md: 0 }}
       justifyContent={{ base: 'start', md: 'center' }}
     >
-      <HStack mt="-32px" bg="white" borderRadius="4px" shadow="md">
+      <HStack mt="-2rem" bg="white" borderRadius="0.25rem" shadow="md">
         <Menu variant="clear">
           <MenuButton
             as={Button}

diff --git a/frontend/src/templates/Field/Checkbox/CheckboxField.tsx b/frontend/src/templates/Field/Checkbox/CheckboxField.tsx
@@ -62,7 +62,7 @@ export const CheckboxField = ({
     [disableRequiredValidation, schema],
   )
 
-  const defaultEnglishCheckboxOptions = schema.fieldOptions
+  const englishCheckboxOptions = schema.fieldOptions
   const selectedLanguage = i18n.language as Language
 
   const { register, getValues, control } = useFormContext<CheckboxFieldInputs>()
@@ -71,7 +71,7 @@ export const CheckboxField = ({
   })
 
   const fieldOptions = getFieldOptionsInSelectedLanguage({
-    defaultValue: defaultEnglishCheckboxOptions,
+    defaultValue: englishCheckboxOptions,
     translations: schema.fieldOptionsTranslations,
     selectedLanguage,
   })
@@ -110,7 +110,7 @@ export const CheckboxField = ({
                   // so that upon form submission, the selected value submitted
                   // and collected will always be the english field option regardless
                   // of the language of the form.
-                  value={defaultEnglishCheckboxOptions[idx]}
+                  value={englishCheckboxOptions[idx]}
                   aria-label={o}
                   {...(idx === 0 ? { ref } : {})}
                 >

diff --git a/frontend/src/templates/Field/Dropdown/DropdownField.tsx b/frontend/src/templates/Field/Dropdown/DropdownField.tsx
@@ -35,7 +35,7 @@ export const DropdownField = ({
   const selectedLanguage = i18n.language as Language
 
   const fieldOptions: ComboboxItem[] = useMemo(() => {
-    const defaultEnglishFieldOptions = schema.fieldOptions
+    const englishFieldOptions = schema.fieldOptions
     const fieldOptionsTranslations = schema?.fieldOptionsTranslations ?? []
 
     const translationIdx = fieldOptionsTranslations.findIndex((translation) => {
@@ -48,7 +48,7 @@ export const DropdownField = ({
     if (
       translationIdx !== -1 &&
       fieldOptionsTranslations[translationIdx].translation.length ===
-        defaultEnglishFieldOptions.length
+        englishFieldOptions.length
     ) {
       const translatedFieldOptions =
         fieldOptionsTranslations[translationIdx].translation
@@ -59,7 +59,7 @@ export const DropdownField = ({
       // and the default English options are corresponding with each other.
       return translatedFieldOptions.map((translatedFieldOption, index) => {
         return {
-          value: defaultEnglishFieldOptions[index],
+          value: englishFieldOptions[index],
           label: translatedFieldOption,
         }
       })

diff --git a/frontend/src/templates/Field/Radio/RadioField.tsx b/frontend/src/templates/Field/Radio/RadioField.tsx
@@ -53,7 +53,7 @@ export const RadioField = ({
     [disableRequiredValidation, schema],
   )
 
-  const defaultEnglishRadioOptions = schema.fieldOptions
+  const englishRadioOptions = schema.fieldOptions
 
   const { register, getValues, trigger } = useFormContext<RadioFieldInputs>()
   const { isValid, isSubmitting, errors } = useFormState<RadioFieldInputs>({
@@ -75,7 +75,7 @@ export const RadioField = ({
   )
 
   const fieldOptions = getFieldOptionsInSelectedLanguage({
-    defaultValue: defaultEnglishRadioOptions,
+    defaultValue: englishRadioOptions,
     translations: schema.fieldOptionsTranslations,
     selectedLanguage: i18n.language as Language,
   })
@@ -111,7 +111,7 @@ export const RadioField = ({
                 // so that upon form submission, the selected value submitted
                 // and collected will always be the english field option regardless
                 // of the language of the form.
-                value={defaultEnglishRadioOptions[idx]}
+                value={englishRadioOptions[idx]}
                 {...(idx === 0 ? { ref } : {})}
                 // Required should apply to radio group rather than individual radio.
                 isRequired={false}

diff --git a/frontend/src/templates/Field/Section/SectionField.tsx b/frontend/src/templates/Field/Section/SectionField.tsx
@@ -4,6 +4,7 @@ import { Box, forwardRef } from '@chakra-ui/react'
 import { FormColorTheme, Language } from '~shared/types'
 
 import { useMdComponents } from '~hooks/useMdComponents'
+import { getValueInSelectedLanguage } from '~utils/multiLanguage'
 import { MarkdownText } from '~components/MarkdownText'
 
 import { SectionFieldContainerProps } from './SectionFieldContainer'
@@ -43,31 +44,17 @@ export const BaseSectionField = forwardRef<
 
   const selectedLanguage = i18n.language as Language
 
-  let title = schema.title
-  const titleTranslations = schema?.titleTranslations ?? []
-  const titleTranslationIdx = titleTranslations.findIndex((translation) => {
-    return translation.language === selectedLanguage
+  const title = getValueInSelectedLanguage({
+    defaultValue: schema.title,
+    translations: schema.titleTranslations,
+    selectedLanguage,
   })
 
-  // If there exists a translation for title based on the selected language,
-  // use that. If not default to english
-  if (titleTranslationIdx !== -1) {
-    title = titleTranslations[titleTranslationIdx].translation
-  }
-
-  let description = schema.description
-  const descriptionTranslations = schema?.descriptionTranslations ?? []
-  const descriptionTranslationIdx = descriptionTranslations.findIndex(
-    (translation) => {
-      return translation.language === selectedLanguage
-    },
-  )
-
-  // If there exists a translation for description based on the selected language,
-  // use that. If not default to english
-  if (descriptionTranslationIdx !== -1) {
-    description = descriptionTranslations[descriptionTranslationIdx].translation
-  }
+  const description = getValueInSelectedLanguage({
+    defaultValue: schema.description,
+    translations: schema.descriptionTranslations,
+    selectedLanguage,
+  })
 
   return (
     // id given so app can scrolled to this section.

diff --git a/frontend/src/templates/Field/Table/TableFieldContainer.tsx b/frontend/src/templates/Field/Table/TableFieldContainer.tsx
@@ -4,6 +4,7 @@ import { FormControl } from '@chakra-ui/react'
 
 import { Language } from '~shared/types'
 
+import { getValueInSelectedLanguage } from '~utils/multiLanguage'
 import FormLabel from '~components/FormControl/FormLabel'
 
 import { TableFieldSchema } from '../types'
@@ -29,36 +30,17 @@ export const TableFieldContainer = ({
 
   const selectedLanguage = i18n.language as Language
 
-  let title = schema.title
+  const title = getValueInSelectedLanguage({
+    defaultValue: schema.title,
+    translations: schema.titleTranslations,
+    selectedLanguage: selectedLanguage,
+  })
 
-  const titleTranslations = schema.titleTranslations ?? []
-  // check if there are any title translations for the selected language
-  const titleTranslationIdx = titleTranslations.findIndex(
-    (titleTranslation) => {
-      return titleTranslation.language === selectedLanguage
-    },
-  )
-
-  // If there are title translations for the selected language, use the translation.
-  // If not default it to English.
-  if (titleTranslationIdx !== -1) {
-    title = titleTranslations[titleTranslationIdx].translation
-  }
-
-  let description = schema.description
-
-  const descriptionTranslations = schema.descriptionTranslations ?? []
-  // check if there are any description translations for the selected language
-  const descriptionTranslationIdx = descriptionTranslations.findIndex(
-    (descriptionTranslation) =>
-      descriptionTranslation.language === selectedLanguage,
-  )
-
-  // If there are description translations for the language, use the translation.
-  // If not default it to English.
-  if (descriptionTranslationIdx !== -1) {
-    description = descriptionTranslations[descriptionTranslationIdx].translation
-  }
+  const description = getValueInSelectedLanguage({
+    defaultValue: schema.description,
+    translations: schema.descriptionTranslations,
+    selectedLanguage: selectedLanguage,
+  })
 
   return (
     <FormControl

diff --git a/frontend/src/utils/multiLanguage.ts b/frontend/src/utils/multiLanguage.ts
@@ -38,7 +38,7 @@ export const getValueInSelectedLanguage = ({
   translations,
   selectedLanguage,
 }: SelectedLanguageProps) => {
-  let title = defaultValue
+  let value = defaultValue
 
   const titleTranslations = translations ?? []
   // check if there are any title translations for the selected language
@@ -51,10 +51,10 @@ export const getValueInSelectedLanguage = ({
   // If there are title translations for the selected language, use the translation.
   // If not default it to English.
   if (titleTranslationIdx !== -1) {
-    title = titleTranslations[titleTranslationIdx].translation
+    value = titleTranslations[titleTranslationIdx].translation
   }
 
-  return title
+  return value
 }
 
 export const getFieldOptionsInSelectedLanguage = ({
@@ -77,7 +77,7 @@ export const getFieldOptionsInSelectedLanguage = ({
       defaultValue.length
   ) {
     return fieldOptionsTranslations[translationIdx].translation
-  } else {
-    return defaultValue
   }
+
+  return defaultValue
 }
diff --git a/shared/constants/field/myinfo/index.ts b/shared/constants/field/myinfo/index.ts
@@ -87,8 +87,8 @@ export const types: MyInfoFieldBlock[] = [
     fieldType: BasicField.Date,
     previewValue: '1965-02-23',
     titleTranslations: [
-      { language: Language.CHINESE, translation: '生日日期' },
-      { language: Language.MALAY, translation: 'Tarikh Kelahiran' },
+      { language: Language.CHINESE, translation: '出生日期' },
+      { language: Language.MALAY, translation: 'Tarikh lahir' },
       { language: Language.TAMIL, translation: 'பிறந்த தேதி' },
     ],
   },
@@ -105,7 +105,7 @@ export const types: MyInfoFieldBlock[] = [
     previewValue: 'CHINESE',
     titleTranslations: [
       { language: Language.CHINESE, translation: '种族' },
-      { language: Language.MALAY, translation: 'Bangsa' },
+      { language: Language.MALAY, translation: 'Kaum' },
       { language: Language.TAMIL, translation: 'இனம்' },
     ],
   },
@@ -282,8 +282,8 @@ export const types: MyInfoFieldBlock[] = [
     fieldType: BasicField.ShortText,
     previewValue: '411 CHUA CHU KANG AVE 3, #12-3, SINGAPORE 238823',
     titleTranslations: [
-      { language: Language.CHINESE, translation: '注册地址' },
-      { language: Language.MALAY, translation: 'Alamat yang didaftar' },
+      { language: Language.CHINESE, translation: '登记地址' },
+      { language: Language.MALAY, translation: 'Alamat berdaftar' },
       { language: Language.TAMIL, translation: 'பதிவு செய்யப்பட்ட முகவரி' },
     ],
   },
@@ -416,8 +416,8 @@ export const types: MyInfoFieldBlock[] = [
     fieldType: BasicField.Mobile,
     previewValue: '98765432',
     titleTranslations: [
-      { language: Language.CHINESE, translation: '手机电话' },
-      { language: Language.MALAY, translation: 'Nombor Telefon' },
+      { language: Language.CHINESE, translation: '手机号码' },
+      { language: Language.MALAY, translation: 'Nombor telefon bimbit' },
       { language: Language.TAMIL, translation: 'கைப்பேசி எண்' },
     ],
   },