fix: stub i18next for YesNo,Email,Verify fields

opengovsg · Dec 16, 2024 · 5d83854 · 5d83854
1 parent 9be50f2
commit 5d83854
Show file tree

Hide file tree

Showing 26 changed files with 292 additions and 108 deletions.
diff --git a/frontend/src/components/Field/YesNo/YesNo.tsx b/frontend/src/components/Field/YesNo/YesNo.tsx
@@ -9,27 +9,12 @@ import {
 } from '@chakra-ui/react'
 import pick from 'lodash/pick'
 
-import { Language } from '~shared/types'
-
 import { FieldColorScheme } from '~theme/foundations/colours'
 
 import { YesNoOption } from './YesNoOption'
 
 export type YesNoOptionValue = 'Yes' | 'No'
 
-// TODO: port to i18next
-type YesNoTranslations = {
-  Yes: string
-  No: string
-}
-
-const YES_NO_TRANSLATIONS: Record<Language, YesNoTranslations> = {
-  [Language.ENGLISH]: { Yes: 'Yes', No: 'No' },
-  [Language.CHINESE]: { Yes: '是', No: '否' },
-  [Language.MALAY]: { Yes: 'Ya', No: 'Tidak' },
-  [Language.TAMIL]: { Yes: 'ஆம்', No: 'இல்லை' },
-}
-
 export interface YesNoProps {
   /**
    * Whether YesNo component is disabled.
@@ -68,7 +53,7 @@ export const YesNo = forwardRef<YesNoProps, 'input'>(
   ({ colorScheme, ...props }, ref) => {
     const formControlProps = useFormControlProps(props)
     const { getRootProps, getRadioProps, onChange } = useRadioGroup(props)
-    const { t, i18n } = useTranslation()
+    const { t } = useTranslation()
 
     const groupProps = getRootProps()
     const [noProps, yesProps] = useMemo(() => {
@@ -95,10 +80,6 @@ export const YesNo = forwardRef<YesNoProps, 'input'>(
       return [noRadioProps, yesRadioProps]
     }, [formControlProps, getRadioProps, props.name])
 
-    const selectedLanguage = i18n.language as Language
-    const yesLabel = YES_NO_TRANSLATIONS[selectedLanguage].Yes
-    const noLabel = YES_NO_TRANSLATIONS[selectedLanguage].No
-
     return (
       <HStack spacing={0} {...groupProps}>
         <YesNoOption
@@ -107,7 +88,7 @@ export const YesNo = forwardRef<YesNoProps, 'input'>(
           {...noProps}
           onChange={(value) => onChange(value as YesNoOptionValue)}
           leftIcon={BiX}
-          label={noLabel ?? t('features.adminForm.sidebar.fields.yesNo.no')}
+          label={t('features.publicForm.components.fields.yesNo.no')}
           // Ref is set here for tracking current value, and also so any errors
           // can focus this input.
           ref={ref}
@@ -119,7 +100,7 @@ export const YesNo = forwardRef<YesNoProps, 'input'>(
           {...yesProps}
           onChange={(value) => onChange(value as YesNoOptionValue)}
           leftIcon={BiCheck}
-          label={yesLabel ?? t('features.adminForm.sidebar.fields.yesNo.yes')}
+          label={t('features.publicForm.components.fields.yesNo.yes')}
           title={props.title}
         />
       </HStack>

diff --git a/frontend/src/constants/validation.ts b/frontend/src/constants/validation.ts
@@ -1,17 +1,6 @@
-import { Language } from '~shared/types'
-
 export const REQUIRED_ERROR = 'This field is required'
 
 export const INVALID_EMAIL_ERROR = 'Please enter a valid email'
-export const INVALID_EMAIL_DOMAIN_ERROR: Record<Language, string> = {
-  [Language.ENGLISH]:
-    'The entered email does not belong to an allowed email domain',
-  [Language.CHINESE]: '输入的电子邮箱不在允许域名之列',
-  [Language.MALAY]:
-    'E-mel yang dimasukkan bukan milik domain e-mel yang dibenarkan',
-  [Language.TAMIL]:
-    'உள்ளிடப்பட்ட மின்னஞ்சல் அனுமதிக்கப்பட்ட மின்னஞ்சலுக்குச் சொந்தமானதல்ல',
-}
 
 export const INVALID_DROPDOWN_OPTION_ERROR =
   'Entered value is not a valid dropdown option'

diff --git a/frontend/src/features/verifiable-fields/Email/VerifiableEmailField.tsx b/frontend/src/features/verifiable-fields/Email/VerifiableEmailField.tsx
@@ -2,8 +2,6 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, VisuallyHidden } from '@chakra-ui/react'
 
-import { Language } from '~shared/types'
-
 import { baseEmailValidationFn } from '~utils/fieldValidation'
 import { EmailFieldInput, EmailFieldProps } from '~templates/Field/Email'
 import { EmailFieldSchema } from '~templates/Field/types'
@@ -71,10 +69,13 @@ export const VerifiableEmailField = ({
   schema,
   ...props
 }: VerifiableEmailFieldProps) => {
-  const { i18n } = useTranslation()
+  const { t } = useTranslation()
   const validateInputForVfn = baseEmailValidationFn({
     schema,
-    selectedLanguage: i18n.language as Language,
+    validationErrorMessages: t(
+      'features.publicForm.components.fields.email.validation',
+      { allowObjects: true },
+    ),
   })
   return (
     <VerifiableFieldProvider

diff --git a/...atures/verifiable-fields/components/VerifiableFieldContainer/VerifiableFieldContainer.tsx b/...atures/verifiable-fields/components/VerifiableFieldContainer/VerifiableFieldContainer.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { BiCheck } from 'react-icons/bi'
 import { Box, Stack } from '@chakra-ui/react'
 
-import { FormColorTheme, Language } from '~shared/types'
+import { FormColorTheme } from '~shared/types'
 import { BasicField, FormFieldWithId } from '~shared/types/field'
 
 import Button from '~components/Button'
@@ -13,8 +13,6 @@ import { VerifiableFieldBase, VerifiableFieldSchema } from '../../types'
 import { useVerifiableField } from '../../VerifiableFieldContext'
 import { VerificationBox } from '../VerificationBox'
 
-import { VERIFY_LABEL_TRANSLATIONS } from './constants'
-
 export interface BaseVerifiableFieldProps extends BaseFieldProps {
   schema: VerifiableFieldSchema<FormFieldWithId<VerifiableFieldBase>>
 }
@@ -32,7 +30,7 @@ export const VerifiableFieldContainer = ({
   colorTheme = FormColorTheme.Blue,
   children,
 }: VerifiableFieldContainerProps): JSX.Element => {
-  const { i18n } = useTranslation()
+  const { t } = useTranslation()
   const {
     isVfnBoxOpen,
     otpPrefix,
@@ -56,10 +54,6 @@ export const VerifiableFieldContainer = ({
     }
   }, [hasSignature, schema.fieldType])
 
-  const selectedLanguage = i18n.language as Language
-  const verifyLabel = VERIFY_LABEL_TRANSLATIONS[selectedLanguage].Verify
-  const verifiedLabel = VERIFY_LABEL_TRANSLATIONS[selectedLanguage].Verified
-
   return (
     <Box>
       <FieldContainer schema={schema}>
@@ -83,7 +77,9 @@ export const VerifiableFieldContainer = ({
               // with new lines within the button.
               whiteSpace="nowrap"
             >
-              {hasSignature ? verifiedLabel : verifyLabel}
+              {t(
+                `features.publicForm.components.fields.verification.button.label.${hasSignature ? 'verified' : 'verify'}`,
+              )}
             </Button>
           </Box>
         </Stack>
@@ -94,7 +90,6 @@ export const VerifiableFieldContainer = ({
           handleResendOtp={handleResendOtp}
           fieldType={schema.fieldType}
           otpPrefix={otpPrefix}
-          selectedLanguage={selectedLanguage}
         />
       )}
     </Box>

diff --git a/frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/constants.ts b/frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/constants.ts
diff --git a/frontend/src/features/verifiable-fields/components/VerificationBox/VerificationBox.tsx b/frontend/src/features/verifiable-fields/components/VerificationBox/VerificationBox.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import {
@@ -9,7 +9,7 @@ import {
   InputLeftAddon,
 } from '@chakra-ui/react'
 
-import { Language } from '~shared/types'
+import { BasicField } from '~shared/types'
 
 import ResendOtpButton from '~/templates/ResendOtpButton'
 
@@ -21,7 +21,8 @@ import Input from '~components/Input'
 
 import { VerifiableFieldType } from '../../types'
 
-import { VFN_RENDER_DATA } from './constants'
+import { EmailOtpSvgr } from './EmailOtpSvgr'
+import { MobileOtpSvgr } from './MobileOtpSvgr'
 
 type VfnFieldValues = {
   otp: string
@@ -32,7 +33,6 @@ export interface VerificationBoxProps {
   otpPrefix: string
   handleVerifyOtp: (otp: string) => Promise<string>
   handleResendOtp: () => Promise<void>
-  selectedLanguage?: Language
 }
 
 type UseVerificationBoxProps = Pick<VerificationBoxProps, 'handleVerifyOtp'>
@@ -72,7 +72,7 @@ export const VerificationBox = ({
   handleResendOtp,
   handleVerifyOtp,
 }: VerificationBoxProps): JSX.Element => {
-  const { i18n } = useTranslation()
+  const { t } = useTranslation()
   const {
     formMethods: {
       register,
@@ -84,13 +84,16 @@ export const VerificationBox = ({
     handleVerifyOtp,
   })
 
-  const {
-    logo: Logo,
-    header,
-    subheader,
-  } = useMemo(() => VFN_RENDER_DATA[fieldType], [fieldType])
+  const Logo = {
+    [BasicField.Mobile]: MobileOtpSvgr,
+    [BasicField.Email]: EmailOtpSvgr,
+  }[fieldType]
+
+  const { title, description } = t(
+    `features.publicForm.components.fields.verification.modal.${fieldType}`,
+    { allowObjects: true },
+  )
 
-  const selectedLanguage = i18n.language as Language
   return (
     <Flex
       p={{ base: '1.25rem', md: '2.25rem' }}
@@ -109,9 +112,7 @@ export const VerificationBox = ({
             isInvalid={!!errors.otp}
             maxW="24.75rem"
           >
-            <FormLabel description={subheader[selectedLanguage]}>
-              {header[selectedLanguage]}
-            </FormLabel>
+            <FormLabel description={description}>{title}</FormLabel>
             <Flex>
               <InputGroup>
                 {otpPrefix ? (

diff --git a/frontend/src/i18n/locales/features/admin-form/sidebar/fields/en-sg.ts b/frontend/src/i18n/locales/features/admin-form/sidebar/fields/en-sg.ts
@@ -52,10 +52,6 @@ export const enSG: Fields = {
       maximum: 'Maximum',
     },
   },
-  yesNo: {
-    yes: 'Yes',
-    no: 'No',
-  },
   paragraph: 'Paragraph',
   section: {
     heading: 'Section heading',

diff --git a/frontend/src/i18n/locales/features/admin-form/sidebar/fields/index.ts b/frontend/src/i18n/locales/features/admin-form/sidebar/fields/index.ts
@@ -51,10 +51,6 @@ export interface Fields {
       maximum: string
     }
   }
-  yesNo: {
-    yes: string
-    no: string
-  }
   paragraph: string
   section: {
     heading: string

diff --git a/frontend/src/i18n/locales/features/public-form/en-sg.ts b/frontend/src/i18n/locales/features/public-form/en-sg.ts
@@ -1,3 +1,4 @@
+import { enSG as fields } from './fields'
 import { enSG as table } from './table'
 import { PublicForm } from '.'
 
@@ -32,6 +33,7 @@ export const enSG: PublicForm = {
       submitNow: 'Submit now',
     },
     table,
+    fields,
     feedbackBlock: {
       title: {
         payment: 'How was your experience making payment on this form?',

diff --git a/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts b/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts
@@ -0,0 +1,34 @@
+import { Fields } from '.'
+
+export const enSG: Fields = {
+  yesNo: {
+    yes: 'Yes',
+    no: 'No',
+  },
+  email: {
+    validation: {
+      domainDisallowed:
+        'The entered email does not belong to an allowed email domain',
+    },
+  },
+  verification: {
+    button: {
+      label: {
+        verify: 'Verify',
+        verified: 'Verified',
+      },
+    },
+    modal: {
+      email: {
+        title: 'Verify your email',
+        description:
+          'An email with a 6-digit verification code was sent to you. It will be valid for 30 minutes.',
+      },
+      mobile: {
+        title: 'Verify your mobile number',
+        description:
+          'An SMS with a 6-digit verification code was sent to you. It will be valid for 30 minutes.',
+      },
+    },
+  },
+}
diff --git a/frontend/src/i18n/locales/features/public-form/fields/index.ts b/frontend/src/i18n/locales/features/public-form/fields/index.ts
@@ -0,0 +1,34 @@
+export interface Fields {
+  yesNo: {
+    yes: string
+    no: string
+  }
+  email: {
+    validation: {
+      domainDisallowed: string
+    }
+  }
+  verification: {
+    button: {
+      label: {
+        verify: string
+        verified: string
+      }
+    }
+    modal: {
+      email: {
+        title: string
+        description: string
+      }
+      mobile: {
+        title: string
+        description: string
+      }
+    }
+  }
+}
+
+export * from './en-sg'
+export * from './ms-sg'
+export * from './ta-sg'
+export * from './zh-sg'