refactor(i18n): move translations

frontend/src/components/Checkbox/Checkbox.tsx

@@ -11,14 +11,10 @@ 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'
@@ -94,7 +90,7 @@ const OthersWrapper = ({
  * Wrapper for the checkbox part of the Others option.
  */
 const OthersCheckbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
-  const { t, i18n } = useTranslation()
+  const { t } = useTranslation()
   const { checkboxRef, inputRef } = useCheckboxOthers()
   // Passing all props for cleanliness but size and colorScheme are the most relevant
   const styles = useMultiStyleConfig(CHECKBOX_THEME_KEY, props)
@@ -109,9 +105,6 @@ const OthersCheckbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
     props.onChange?.(e)
   }
 
-  const othersLabel =
-    OTHERS_TRANSLATED_LABEL[(i18n.language as Language) ?? Language.ENGLISH]
-
   return (
     <Checkbox
       ref={mergedCheckboxRef}
@@ -120,7 +113,7 @@ const OthersCheckbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
       {...props}
       onChange={handleCheckboxChange}
     >
-      {othersLabel ?? t('features.adminForm.sidebar.fields.radio.others')}
+      {t('features.publicForm.components.fields.option.others')}
     </Checkbox>
   )
 })

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

@@ -8,13 +8,7 @@ import {
 } from '@chakra-ui/react'
 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'
@@ -57,7 +51,6 @@ export const SingleSelectProvider = ({
   onChange,
   name,
   filter = defaultFilter,
-  nothingFoundLabel: nothingFoundLabelProp = 'No matching results',
   placeholder: placeholderProp,
   clearButtonLabel = 'Clear selection',
   isClearable = true,
@@ -76,9 +69,7 @@ export const SingleSelectProvider = ({
 }: SingleSelectProviderProps): JSX.Element => {
   const { items, getItemByValue } = useItems({ rawItems })
   const [isFocused, setIsFocused] = useState(false)
-  const { t, i18n } = useTranslation()
-
-  const selectedLanguage = i18n.language as Language
+  const { t } = useTranslation()
 
   const { isInvalid, isDisabled, isReadOnly, isRequired } = useFormControlProps(
     {
@@ -93,21 +84,13 @@ export const SingleSelectProvider = ({
     if (placeholderProp === null) return ''
     return (
       placeholderProp ??
-      DEFAULT_PLACEHOLDER_TRANSLATIONS[selectedLanguage] ??
-      t('features.common.dropdown.placeholder')
+      t('features.publicForm.components.fields.dropdown.placeholder')
     )
-  }, [placeholderProp, selectedLanguage, t])
+  }, [placeholderProp, t])
 
-  const nothingFoundLabel = useMemo(() => {
-    // Check if the nothingFoundLabel equals to the default label. If yes, return
-    // the label in the correct translation.
-    if (
-      nothingFoundLabelProp ===
-      NOTHING_FOUND_LABEL_TRANSLATIONS[Language.ENGLISH]
-    )
-      return NOTHING_FOUND_LABEL_TRANSLATIONS[selectedLanguage]
-    return nothingFoundLabelProp
-  }, [nothingFoundLabelProp, selectedLanguage])
+  const nothingFoundLabel = t(
+    'features.publicForm.components.fields.dropdown.nothingFound',
+  )
 
   const getFilteredItems = useCallback(
     (filterValue?: string) =>

frontend/src/components/Field/Attachment/Attachment.tsx

@@ -14,11 +14,9 @@ import imageCompression from 'browser-image-compression'
 import omit from 'lodash/omit'
 
 import { MB } from '~shared/constants/file'
-import { Language } from '~shared/types'
 
 import { ATTACHMENT_THEME_KEY } from '~theme/components/Field/Attachment'
 import { ThemeColorScheme } from '~theme/foundations/colours'
-import { MAXIMUM_FILE_LABEL_TRANSLATIONS } from '~constants/fixedTranslations'
 
 import { downloadFile } from './utils/downloadFile'
 import { AttachmentStylesProvider } from './AttachmentContext'
@@ -125,7 +123,7 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
     },
     ref,
   ) => {
-    const { t, i18n } = useTranslation()
+    const { t } = useTranslation()
     // Merge given props with any form control props, if they exist.
     const inputProps = useFormControl(props)
     // id to set on the rendered max size FormFieldMessage component.
@@ -150,14 +148,14 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
             case 'file-invalid-type': {
               const fileExt = getFileExtension(rejectedFiles[0].file.name)
               errorMessage = t(
-                `features.adminForm.sidebar.fields.imageAttachment.error.fileInvalidType`,
+                `features.publicForm.components.fields.attachment.error.fileInvalidType`,
                 { fileExt },
               )
               break
             }
             case 'too-many-files': {
               errorMessage = t(
-                `features.adminForm.sidebar.fields.imageAttachment.error.tooManyFiles`,
+                `features.publicForm.components.fields.attachment.error.tooManyFiles`,
               )
               break
             }
@@ -180,15 +178,15 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
               const stringOfInvalidExtensions = invalidFilesInZip.join(', ')
               return onError?.(
                 t(
-                  'features.adminForm.sidebar.fields.imageAttachment.error.zipFileInvalidType',
+                  'features.publicForm.components.fields.attachment.error.zipFileInvalidType',
                   { stringOfInvalidExtensions },
                 ),
               )
             }
           } catch {
             return onError?.(
               t(
-                'features.adminForm.sidebar.fields.imageAttachment.error.zipParsing',
+                'features.publicForm.components.fields.attachment.error.zipParsing',
               ),
             )
           }
@@ -226,7 +224,7 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
             return {
               code: 'file-too-large',
               message: t(
-                'features.adminForm.sidebar.fields.imageAttachment.error.fileTooLarge',
+                'features.publicForm.components.fields.attachment.error.fileTooLarge',
                 { readableMaxSize },
               ),
             }
@@ -235,7 +233,7 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
             return {
               code: 'file-empty',
               message: t(
-                'features.adminForm.sidebar.fields.imageAttachment.error.zipParsing',
+                'features.publicForm.components.fields.attachment.error.zipParsing',
               ),
             }
           }
@@ -301,8 +299,6 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
       })
     }, [getInputProps, inputProps, name])
 
-    const selectedLanguage = i18n.language as Language
-
     return (
       <AttachmentStylesProvider value={styles}>
         <Box __css={styles.container}>
@@ -339,14 +335,12 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
               textStyle="body-2"
               aria-hidden
             >
-              {MAXIMUM_FILE_LABEL_TRANSLATIONS[selectedLanguage]
-                ? `${MAXIMUM_FILE_LABEL_TRANSLATIONS[selectedLanguage]} ${readableMaxSize}`
-                : t(
-                    'features.adminForm.sidebar.fields.imageAttachment.maxFileSize',
-                    {
-                      readableMaxSize,
-                    },
-                  )}
+              {t(
+                'features.publicForm.components.fields.attachment.maxFileSize',
+                {
+                  readableMaxSize,
+                },
+              )}
             </Text>
           ) : null}
         </Box>

frontend/src/components/Field/Attachment/AttachmentDropzone.tsx

@@ -37,10 +37,10 @@ export const AttachmentDropzone = ({
         <Text aria-hidden>
           <Link isDisabled={inputProps.disabled}>
             {t(
-              'features.adminForm.sidebar.fields.imageAttachment.fileUploaderLink',
+              'features.publicForm.components.fields.attachment.fileUploaderLink',
             )}
           </Link>
-          {t('features.adminForm.sidebar.fields.imageAttachment.dragAndDrop')}
+          {t('features.publicForm.components.fields.attachment.dragAndDrop')}
         </Text>
       )}
     </>

frontend/src/components/Field/Attachment/AttachmentFileInfo.tsx

@@ -57,7 +57,7 @@ export const AttachmentFileInfo = ({
             variant="clear"
             colorScheme="danger"
             aria-label={t(
-              'features.adminForm.sidebar.fields.imageAttachment.ariaLabelRemove',
+              'features.publicForm.components.fields.attachment.ariaLabelRemove',
             )}
             icon={<BiTrash />}
             onClick={handleRemoveFile}

frontend/src/components/Radio/Radio.tsx

@@ -46,13 +46,9 @@ 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'
@@ -256,7 +252,7 @@ export const Radio = forwardRef<RadioProps, 'input'>(
  * Wrapper for the radio part of the Others option.
  */
 const OthersRadio = forwardRef<RadioProps, 'input'>((props, ref) => {
-  const { t, i18n } = useTranslation()
+  const { t } = useTranslation()
   const { othersRadioRef, othersInputRef } = useRadioGroupWithOthers()
   const { value: valueProp } = props
   const styles = useMultiStyleConfig(RADIO_THEME_KEY, {
@@ -273,11 +269,6 @@ const OthersRadio = forwardRef<RadioProps, 'input'>((props, ref) => {
     isChecked = group.value === valueProp
   }
 
-  const selectedLanguage = i18n.language as Language
-  const othersLabel = useMemo(() => {
-    return OTHERS_TRANSLATED_LABEL[selectedLanguage ?? Language.ENGLISH]
-  }, [selectedLanguage])
-
   useEffect(() => {
     if (isChecked) {
       othersInputRef.current?.focus()
@@ -292,7 +283,7 @@ const OthersRadio = forwardRef<RadioProps, 'input'>((props, ref) => {
       // Required should apply to radio group rather than individual radio.
       isRequired={false}
     >
-      {othersLabel ?? t('features.adminForm.sidebar.fields.radio.others')}
+      {t('features.publicForm.components.fields.option.others')}
     </Radio>
   )
 })

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCheckbox/EditCheckbox.tsx

@@ -234,7 +234,7 @@ export const EditCheckbox = ({ field }: EditCheckboxProps): JSX.Element => {
       <FormControl isReadOnly={isLoading}>
         <Toggle
           {...register('othersRadioButton')}
-          label={t('features.adminForm.sidebar.fields.radio.others')}
+          label={t('features.publicForm.components.fields.option.others')}
         />
       </FormControl>
       <FormControl

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditRadio/EditRadio.tsx

@@ -119,7 +119,7 @@ export const EditRadio = ({ field }: EditRadioProps): JSX.Element => {
       <FormControl isReadOnly={isLoading}>
         <Toggle
           {...register('othersRadioButton')}
-          label={t('features.adminForm.sidebar.fields.radio.others')}
+          label={t('features.publicForm.components.fields.option.others')}
         />
       </FormControl>
       <FormControl

frontend/src/features/admin-form/create/logic/components/LogicContent/EditLogicBlock/EditCondition/EditConditionBlock.tsx

@@ -163,7 +163,7 @@ export const EditConditionBlock = ({
         if (mappedField.othersRadioButton) {
           // 'Others' does not show up in fieldOptions
           return mappedField.fieldOptions.concat(
-            t('features.adminForm.sidebar.fields.radio.others'),
+            t('features.publicForm.components.fields.option.others'),
           )
         }
         return mappedField.fieldOptions

frontend/src/i18n/locales/features/admin-form/sidebar/fields/en-sg.ts

@@ -35,7 +35,6 @@ export const enSG: Fields = {
     charactersAllowedPlaceholder: 'Number of characters',
   },
   radio: {
-    others: 'Others',
     options: {
       title: 'Options',
       placeholder: 'Enter one option per line',
@@ -122,23 +121,6 @@ export const enSG: Fields = {
   imageAttachment: {
     title: 'Uploaded image',
     requiredError: 'Please upload an image',
-    fileUploaderLink: 'Choose file',
-    dragAndDrop: ' or drag and drop here',
-    dragActive: 'Drop the file here',
-    maxFileSize: 'Maximum file size: {readableMaxSize}',
-    ariaLabelRemove: 'Click to remove file',
-    error: {
-      fileEmpty:
-        'You have uploaded an empty file, please upload a valid attachment',
-      fileTooLarge:
-        'You have exceeded the limit, please upload a file below {readableMaxSize}',
-      fileInvalidType:
-        "Your file's extension ending in *{fileExt} is not allowed",
-      tooManyFiles: 'You can only upload a single file in this input',
-      zipFileInvalidType:
-        'The following file extensions in your zip file are not valid: {stringOfInvalidExtensions}',
-      zipParsing: 'An error has occurred whilst parsing your zip file',
-    },
   },
   table: {
     minimumRows: 'Minimum rows',