feat(i18n): extract text from modals

frontend/src/features/admin-form/common/components/DirtyModal/DirtyModal.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next'
+
 import { UnsavedChangesModal } from '~templates/NavigationPrompt'
 
 import { usePaymentStore } from '~features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/usePaymentStore'
@@ -93,12 +95,13 @@ export const useDirtyModal = () => {
 export const DirtyModal = (): JSX.Element => {
   const { isOpen, handleCancelNavigate, handleConfirmNavigate } =
     useDirtyModal()
+  const { t } = useTranslation()
 
   return (
     <UnsavedChangesModal
       isOpen={isOpen}
       onClose={handleCancelNavigate}
-      cancelButtonText="No, return to editing"
+      cancelButtonText={t('features.adminForm.modals.dirty.cancelButtonText')}
       onConfirm={handleConfirmNavigate}
       onCancel={handleCancelNavigate}
     />

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx

@@ -408,7 +408,7 @@ const FieldButtonGroup = ({
           <IconButton
             variant="clear"
             colorScheme="secondary"
-            aria-label="Edit field"
+            aria-label={t('features.common.tooltip.editField')}
             icon={<BiCog fontSize="1.25rem" />}
             onClick={handleEditFieldClick}
           />

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { BiCog, BiTrash } from 'react-icons/bi'
 import { Box, ButtonGroup, Collapse, Flex } from '@chakra-ui/react'
 
@@ -147,11 +148,16 @@ const PaymentButtonGroup = ({
       handleBuilderClick(false)
     }
   }, [handleBuilderClick, isMobile])
+  const { t } = useTranslation()
 
   const {
     deletePaymentModalDisclosure: { onOpen: onDeleteModalOpen },
   } = useBuilderAndDesignContext()
 
+  const { deleteField, editField } = t('features.common.tooltip', {
+    returnObjects: true,
+  })
+
   return (
     <Flex
       px={{ base: '0.75rem', md: '1.5rem' }}
@@ -164,15 +170,15 @@ const PaymentButtonGroup = ({
           <IconButton
             variant="clear"
             colorScheme="secondary"
-            aria-label="Edit field"
+            aria-label={editField}
             icon={<BiCog fontSize="1.25rem" />}
             onClick={handleEditFieldClick}
           />
         )}
-        <Tooltip label="Delete field">
+        <Tooltip label={deleteField}>
           <IconButton
             colorScheme="danger"
-            aria-label="Delete field"
+            aria-label={deleteField}
             icon={<BiTrash fontSize="1.25rem" />}
             onClick={onDeleteModalOpen}
           />

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/StartPageView.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BiCog } from 'react-icons/bi'
 import { Box, ButtonGroup, Collapse, Flex, IconButton } from '@chakra-ui/react'
 
@@ -37,6 +38,7 @@ import {
 } from '../useFieldBuilderStore'
 
 export const StartPageView = () => {
+  const { t } = useTranslation()
   const isMobile = useIsMobile()
   const { data: form, isLoading } = useCreateTabForm()
   const setFieldBuilderToInactive = useFieldBuilderStore(
@@ -259,7 +261,7 @@ export const StartPageView = () => {
                         <IconButton
                           variant="clear"
                           colorScheme="secondary"
-                          aria-label="Edit field"
+                          aria-label={t('features.common.tooltip.editField')}
                           icon={<BiCog fontSize="1.25rem" />}
                           onClick={handleEditInstructionsClick}
                         />

frontend/src/features/admin-form/create/builder-and-design/DeleteFieldModal/DeleteFieldModal.tsx

@@ -58,21 +58,20 @@ export const DeleteFieldModal = (): JSX.Element => {
     }
   }, [deleteFieldMutation, onClose, stateData])
 
+  const {
+    title,
+    description: { field, logic },
+    confirmButtonText,
+  } = t('features.adminForm.modals.deleteField', { returnObjects: true })
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
         <ModalCloseButton />
-        <ModalHeader>Delete field</ModalHeader>
+        <ModalHeader>{title}</ModalHeader>
         <ModalBody>
-          <Text color="secondary.500">
-            {fieldIsInLogic
-              ? `This field is used in your form logic, so deleting it may cause
-                your logic to stop working correctly. Are you sure you want to 
-                delete this field?`
-              : `Are you sure you want to delete this field? This action
-                cannot be undone.`}
-          </Text>
+          <Text color="secondary.500">{fieldIsInLogic ? logic : field}</Text>
           <UnorderedList
             spacing="0.5rem"
             listStyleType="none"
@@ -105,7 +104,7 @@ export const DeleteFieldModal = (): JSX.Element => {
               onClick={handleDeleteConfirmation}
               isLoading={deleteFieldMutation.isLoading}
             >
-              Yes, delete field
+              {confirmButtonText}
             </Button>
           </ButtonGroup>
         </ModalFooter>

frontend/src/features/admin-form/create/builder-and-design/DeletePaymentModal/DeletePaymentModal.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   ButtonGroup,
   Modal,
@@ -28,6 +29,7 @@ export const DeletePaymentModal = (): JSX.Element => {
   const {
     deletePaymentModalDisclosure: { onClose },
   } = useBuilderAndDesignContext()
+  const { t } = useTranslation()
 
   const { deletePaymentFieldMutation } = useDeleteFormField()
 
@@ -44,29 +46,32 @@ export const DeletePaymentModal = (): JSX.Element => {
     }
   }, [deletePaymentFieldMutation, onClose, stateData, setFieldListTabIndex])
 
+  const {
+    title,
+    description: { payment: description },
+    confirmButtonText,
+  } = t('features.adminForm.modals.deleteField', { returnObjects: true })
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
         <ModalCloseButton />
-        <ModalHeader>Delete field</ModalHeader>
+        <ModalHeader>{title}</ModalHeader>
         <ModalBody>
-          <Text color="secondary.500">
-            Are you sure you want to delete payment field? This action can't be
-            undone.
-          </Text>
+          <Text color="secondary.500">{description}</Text>
         </ModalBody>
         <ModalFooter>
           <ButtonGroup>
             <Button variant="clear" colorScheme="secondary" onClick={onClose}>
-              Cancel
+              {t('features.common.cancel')}
             </Button>
             <Button
               colorScheme="danger"
               onClick={handleDeleteConfirmation}
               isLoading={deletePaymentFieldMutation.isLoading}
             >
-              Yes, delete field
+              {confirmButtonText}
             </Button>
           </ButtonGroup>
         </ModalFooter>

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

@@ -1,9 +1,11 @@
 import { enSG as meta } from './meta'
+import { enSG as modals } from './modals'
 import { enSG as navbar } from './navbar'
 import { enSG as sidebar } from './sidebar'
 
 export const enSG = {
   navbar,
   sidebar,
   meta,
+  modals,
 }

frontend/src/i18n/locales/features/admin-form/index.ts

@@ -1,5 +1,6 @@
 export * from './en-sg'
 export { type Meta } from './meta'
+export { type Modals } from './modals'
 export { type Navbar } from './navbar'
 export { type Fields } from './sidebar'
 export { type HeaderAndInstructions } from './sidebar'

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

@@ -0,0 +1,23 @@
+export const enSG = {
+  deleteField: {
+    title: 'Delete field',
+    description: {
+      field:
+        'Are you sure you want to delete this field? This action cannot be undone.',
+      logic:
+        'This field is used in your form logic, so deleting it may cause your logic to stop working correctly. Are you sure you want to delete this field?',
+      payment:
+        "Are you sure you want to delete payment field? This action can't be undone.",
+    },
+    confirmButtonText: 'Yes, delete field',
+  },
+  unsavedChanges: {
+    title: 'You have unsaved changes',
+    description: 'Are you sure you want to leave? Your changes will be lost.',
+    confirmButtonText: 'Yes, discard changes',
+    cancelButtonText: 'No, stay on page',
+  },
+  dirty: {
+    cancelButtonText: 'No, return to editing',
+  },
+}

frontend/src/i18n/locales/features/admin-form/modals/index.ts

@@ -0,0 +1,22 @@
+export * from './en-sg'
+
+export interface Modals {
+  deleteField: {
+    title: string
+    description: {
+      field: string
+      logic: string
+      payment: string
+    }
+    confirmButtonText: string
+  }
+  unsavedChanges: {
+    title: string
+    description: string
+    confirmButtonText: string
+    cancelButtonText: string
+  }
+  dirty: {
+    cancelButtonText: string
+  }
+}

frontend/src/i18n/locales/features/common/en-sg.ts

@@ -55,6 +55,7 @@ export const enSG: Common = {
   tooltip: {
     deleteField: 'Delete field',
     duplicateField: 'Duplicate field',
+    editField: 'Edit field',
   },
   dropdown: {
     placeholder: 'Select an option',

frontend/src/i18n/locales/features/common/index.ts

@@ -55,6 +55,7 @@ export interface Common {
   tooltip: {
     deleteField: string
     duplicateField: string
+    editField: string
   }
   dropdown: {
     placeholder: string

frontend/src/i18n/locales/features/index.ts

@@ -3,6 +3,7 @@ export {
   type HeaderAndInstructions,
   type Logic,
   type Meta,
+  type Modals,
   type Navbar,
   type ThankYou,
 } from './admin-form'

frontend/src/i18n/locales/types.ts

@@ -7,6 +7,7 @@ import {
   Logic,
   Login,
   Meta,
+  Modals,
   Navbar,
   PublicForm,
   ThankYou,
@@ -24,6 +25,7 @@ interface Translation {
         }
         navbar?: Navbar
         meta?: Meta
+        modals?: Modals
       }
       common?: Common
       publicForm?: PublicForm

frontend/src/templates/NavigationPrompt/NavigationPrompt.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { UnsavedChangesModal } from './UnsavedChangesModal'
 import { useNavigationPrompt } from './useNavigationPrompt'
@@ -26,8 +27,13 @@ export const NavigationPrompt = memo(
     confirmButtonText = 'Yes, discard changes',
     cancelButtonText = 'No, stay on page',
   }: NavigationPromptProps) => {
+    const { t } = useTranslation()
     const { isPromptShown, onCancel, onConfirm } = useNavigationPrompt(when)
 
+    const defaultText = t('features.adminForm.modals.unsavedChanges', {
+      returnObjects: true,
+    })
+
     return (
       <UnsavedChangesModal
         onCancel={onCancel}