feat: add translations for others label

frontend/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, ReactNode, useRef } from 'react'
+import { ChangeEventHandler, ReactNode, useMemo, useRef } from 'react'
 import {
   Box,
   Checkbox as ChakraCheckbox,
@@ -10,10 +10,14 @@ import {
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 
+import { Language } from '~shared/types'
+
 import { BxCheckAnimated } from '~/assets/icons'
 import { CHECKBOX_THEME_KEY } from '~/theme/components/Checkbox'
 import { FieldColorScheme } from '~/theme/foundations/colours'
 
+import { OTHERS_TRANSLATED_LABEL } from '~constants/fixedTranslations'
+
 import Input, { InputProps } from '../Input'
 
 import { CheckboxOthersContext, useCheckboxOthers } from './useCheckboxOthers'
@@ -23,6 +27,11 @@ export interface CheckboxProps extends ChakraCheckboxProps {
    * Background and shadow colors of checkbox.
    */
   colorScheme?: FieldColorScheme
+
+  /**
+   * Selected language to display label.
+   */
+  selectedLanguage?: Language
 }
 
 type CheckboxWithOthers = ComponentWithAs<'input', CheckboxProps> & {
@@ -103,6 +112,10 @@ const OthersCheckbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
     props.onChange?.(e)
   }
 
+  const othersLabel = useMemo(() => {
+    return OTHERS_TRANSLATED_LABEL[props.selectedLanguage ?? Language.ENGLISH]
+  }, [props.selectedLanguage])
+
   return (
     <Checkbox
       ref={mergedCheckboxRef}
@@ -111,7 +124,7 @@ const OthersCheckbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
       {...props}
       onChange={handleCheckboxChange}
     >
-      Others
+      {othersLabel}
     </Checkbox>
   )
 })

frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx

@@ -10,6 +10,10 @@ import { useCombobox, UseComboboxProps } from 'downshift'
 import { Language } from '~shared/types'
 
 import { ThemeColorScheme } from '~theme/foundations/colours'
+import {
+  DEFAULT_PLACEHOLDER_TRANSLATIONS,
+  NOTHING_FOUND_LABEL_TRANSLATIONS,
+} from '~constants/fixedTranslations'
 
 import { VIRTUAL_LIST_MAX_HEIGHT } from '../constants'
 import { useItems } from '../hooks/useItems'
@@ -18,11 +22,6 @@ import { ComboboxItem } from '../types'
 import { defaultFilter } from '../utils/defaultFilter'
 import { isItemDisabled, itemToValue } from '../utils/itemUtils'
 
-import {
-  DEFAULT_PLACEHOLDER_TRANSLATIONS,
-  NOTHING_FOUND_LABEL_TRANSLATIONS,
-} from './constants'
-
 export interface SingleSelectProviderProps<
   Item extends ComboboxItem = ComboboxItem,
 > extends SharedSelectContextReturnProps<Item>,

frontend/src/components/Radio/Radio.tsx

@@ -45,9 +45,13 @@ import {
 } from '@chakra-ui/react'
 import { callAll, split } from '@chakra-ui/utils'
 
+import { Language } from '~shared/types'
+
 import { RADIO_THEME_KEY } from '~/theme/components/Radio'
 import { FieldColorScheme } from '~/theme/foundations/colours'
 
+import { OTHERS_TRANSLATED_LABEL } from '~constants/fixedTranslations'
+
 import Input, { InputProps } from '../Input'
 
 import { RadioGroup } from './RadioGroup'
@@ -100,6 +104,11 @@ export interface RadioProps
    * @default true
    */
   allowDeselect?: boolean
+
+  /**
+   * Selected language to get translated label.
+   */
+  selectedLanguage?: Language
 }
 
 type RadioWithSubcomponentProps = ComponentWithAs<'input', RadioProps> & {
@@ -267,6 +276,10 @@ const OthersRadio = forwardRef<RadioProps, 'input'>((props, ref) => {
     isChecked = group.value === valueProp
   }
 
+  const othersLabel = useMemo(() => {
+    return OTHERS_TRANSLATED_LABEL[props?.selectedLanguage ?? Language.ENGLISH]
+  }, [props?.selectedLanguage])
+
   useEffect(() => {
     if (isChecked) {
       othersInputRef.current?.focus()
@@ -281,7 +294,7 @@ const OthersRadio = forwardRef<RadioProps, 'input'>((props, ref) => {
       // Required should apply to radio group rather than individual radio.
       isRequired={false}
     >
-      Others
+      {othersLabel}
     </Radio>
   )
 })

frontend/src/components/Dropdown/SingleSelect/constants.ts → frontend/src/constants/fixedTranslations.ts

@@ -1,5 +1,12 @@
 import { Language } from '~shared/types'
 
+export const OTHERS_TRANSLATED_LABEL: Record<Language, string> = {
+  [Language.ENGLISH]: 'Others',
+  [Language.CHINESE]: '其他',
+  [Language.MALAY]: 'Lain-lain',
+  [Language.TAMIL]: 'மற்றவை',
+}
+
 export const DEFAULT_PLACEHOLDER_TRANSLATIONS: Record<Language, string> = {
   [Language.ENGLISH]: 'Select an option',
   [Language.CHINESE]: '请选择一个选项',

frontend/src/templates/Field/Checkbox/CheckboxField.tsx

@@ -138,6 +138,7 @@ export const CheckboxField = ({
                       colorScheme={fieldColorScheme}
                       value={CHECKBOX_OTHERS_INPUT_VALUE}
                       isInvalid={!!get(errors, checkboxInputName)}
+                      selectedLanguage={selectedLanguage}
                     />
                     <Checkbox.OthersInput
                       colorScheme={fieldColorScheme}

frontend/src/templates/Field/Radio/RadioField.tsx

@@ -127,6 +127,7 @@ export const RadioField = ({
               <Radio.OthersWrapper
                 colorScheme={fieldColorScheme}
                 value={RADIO_OTHERS_INPUT_VALUE}
+                selectedLanguage={selectedLanguage}
               >
                 <FormControl
                   isRequired={schema.required}