From 5209b216130a843b95468849925eec2563f729bc Mon Sep 17 00:00:00 2001 From: Siddarth Date: Fri, 20 Dec 2024 00:33:16 +0800 Subject: [PATCH] fix: update myInfo translations and address comments --- .../components/FormEndPage/EndPageBlock.tsx | 21 +++------- .../admin-form/settings/SettingsPage.tsx | 10 ++--- .../EndPageTranslationContainer.tsx | 3 +- .../TranslationListSection.tsx | 2 +- .../FormFields/PublicFormSubmitButton.tsx | 18 +++------ .../LanguageControl/LanguageControl.tsx | 2 +- .../Field/Checkbox/CheckboxField.tsx | 6 +-- .../Field/Dropdown/DropdownField.tsx | 6 +-- .../src/templates/Field/Radio/RadioField.tsx | 6 +-- .../templates/Field/Section/SectionField.tsx | 33 +++++---------- .../Field/Table/TableFieldContainer.tsx | 40 +++++-------------- frontend/src/utils/multiLanguage.ts | 10 ++--- shared/constants/field/myinfo/index.ts | 14 +++---- 13 files changed, 62 insertions(+), 109 deletions(-) diff --git a/frontend/src/components/FormEndPage/EndPageBlock.tsx b/frontend/src/components/FormEndPage/EndPageBlock.tsx index da3d731247..012615362f 100644 --- 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 index 5ce45dd842..59aba732b3 100644 --- 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/frontend/src/features/admin-form/settings/components/MultiLanguageSection/EndPageTranslationContainer.tsx b/frontend/src/features/admin-form/settings/components/MultiLanguageSection/EndPageTranslationContainer.tsx index 2b0dfd3386..04fb1d83c1 100644 --- a/frontend/src/features/admin-form/settings/components/MultiLanguageSection/EndPageTranslationContainer.tsx +++ b/frontend/src/features/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/frontend/src/features/admin-form/settings/components/MultiLanguageSection/TranslationListSection.tsx b/frontend/src/features/admin-form/settings/components/MultiLanguageSection/TranslationListSection.tsx index 01f5f32595..f2173549fd 100644 --- a/frontend/src/features/admin-form/settings/components/MultiLanguageSection/TranslationListSection.tsx +++ b/frontend/src/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 && ( <> { - 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 index cd02adc3f4..8333969e42 100644 --- 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' }} > - + () @@ -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 index ebfbdf5928..1b5a9f1824 100644 --- 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 index 8d1fa7ab92..bd2ee6ab2a 100644 --- 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() const { isValid, isSubmitting, errors } = useFormState({ @@ -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 index da4298e03a..51099238ca 100644 --- 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 index 7c65cf35ad..a3a5aeee46 100644 --- 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 ( { - 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 index 12351f537d..01327019b3 100644 --- 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: 'கைப்பேசி எண்' }, ], },