feat(i18n): extract text from admin-form prompts

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/features/admin-form/create/builder-and-design/mutations/useCreateFormField.ts

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useMutation, useQueryClient } from 'react-query'
 import { useParams } from 'react-router-dom'
 
@@ -22,6 +23,7 @@ import {
 } from '../utils/getMutationMessage'
 
 export const useCreateFormField = () => {
+  const { t } = useTranslation()
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
@@ -45,15 +47,14 @@ export const useCreateFormField = () => {
       if (stateData.state !== FieldBuilderState.CreatingField) {
         toast({
           status: 'warning',
-          description:
-            'Something went wrong when creating your field. Please refresh and try again.',
+          description: t('features.adminForm.toasts.field.create.error'),
         })
         return
       }
       toast({
-        description: `The ${getMutationToastDescriptionFieldName(
-          newField,
-        )} was created.`,
+        description: t('features.adminForm.toasts.field.create.success', {
+          field: getMutationToastDescriptionFieldName(newField),
+        }),
       })
       queryClient.setQueryData<AdminFormDto>(adminFormKey, (oldForm) => {
         // Should not happen, should not be able to update field if there is no
@@ -65,7 +66,7 @@ export const useCreateFormField = () => {
       // Switch from creation to editing
       updateEditState(newField)
     },
-    [adminFormKey, stateData, queryClient, updateEditState, toast],
+    [adminFormKey, stateData, queryClient, updateEditState, toast, t],
   )
 
   const handleError = useCallback(

frontend/src/features/admin-form/create/builder-and-design/mutations/useDeleteFormField.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useMutation, useQueryClient } from 'react-query'
 import { useParams } from 'react-router-dom'
 
@@ -34,6 +35,7 @@ import {
 } from '../utils/getMutationMessage'
 
 export const useDeleteFormField = () => {
+  const { t } = useTranslation()
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
@@ -66,15 +68,14 @@ export const useDeleteFormField = () => {
     if (stateData.state !== FieldBuilderState.EditingField) {
       toast({
         status: 'warning',
-        description:
-          'Something went wrong when deleting your field. Please refresh and try again.',
+        description: t('features.adminForm.toasts.field.delete.error'),
       })
       return
     }
     toast({
-      description: `The ${getMutationToastDescriptionFieldName(
-        stateData.field,
-      )} was deleted.`,
+      description: t('features.adminForm.toasts.field.delete.success', {
+        field: getMutationToastDescriptionFieldName(stateData.field),
+      }),
     })
     queryClient.setQueryData<AdminFormDto>(adminFormKey, (oldForm) => {
       // Should not happen, should not be able to update field if there is no
@@ -86,16 +87,15 @@ export const useDeleteFormField = () => {
       if (deletedFieldIndex < 0) {
         toast({
           status: 'warning',
-          description:
-            'Something went wrong when deleting your field. Please refresh and try again.',
+          description: t('features.adminForm.toasts.field.delete.error'),
         })
       } else {
         oldForm.form_fields.splice(deletedFieldIndex, 1)
       }
       return oldForm
     })
     setToInactive()
-  }, [adminFormKey, stateData, queryClient, setToInactive, toast])
+  }, [adminFormKey, stateData, queryClient, setToInactive, toast, t])
 
   const handleError = useCallback(
     (error: Error) => {
@@ -116,8 +116,7 @@ export const useDeleteFormField = () => {
         if (paymentState !== PaymentState.EditingPayment) {
           toast({
             status: 'warning',
-            description:
-              'Something went wrong when deleting your field. Please refresh and try again.',
+            description: t('features.adminForm.toasts.field.delete.error'),
           })
           return
         }
@@ -128,7 +127,9 @@ export const useDeleteFormField = () => {
           },
         )
         toast({
-          description: 'The payment was deleted.',
+          description: t('features.adminForm.toasts.field.delete.success', {
+            field: 'payment',
+          }),
         })
         setPaymentToInactive()
       },

frontend/src/features/admin-form/create/builder-and-design/mutations/useDuplicateFormField.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useMutation, useQueryClient } from 'react-query'
 import { useParams } from 'react-router-dom'
 
@@ -23,6 +24,7 @@ import {
 } from '../utils/getMutationMessage'
 
 export const useDuplicateFormField = () => {
+  const { t } = useTranslation()
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
   const fieldBuilderState = useFieldBuilderStore(fieldBuilderStateSelector)
@@ -40,20 +42,20 @@ export const useDuplicateFormField = () => {
       if (fieldBuilderState !== FieldBuilderState.EditingField) {
         toast({
           status: 'warning',
-          description:
-            'Something went wrong when creating your field. Please refresh and try again.',
+          description: t('features.adminForm.toasts.field.duplicate.error'),
         })
         return
       }
 
       toast({
-        description: `The ${getMutationToastDescriptionFieldName(
-          newField,
-        )} was duplicated.${
+        description: t(
           logicedFieldIdsSet?.has(fieldId)
-            ? ' Associated logic was not duplicated.'
-            : ''
-        }`,
+            ? 'features.adminForm.toasts.field.duplicate.successButNoLogic'
+            : 'features.adminForm.toasts.field.duplicate.success',
+          {
+            field: getMutationToastDescriptionFieldName(newField),
+          },
+        ),
       })
 
       queryClient.setQueryData<AdminFormDto>(adminFormKey, (oldForm) => {
@@ -80,6 +82,7 @@ export const useDuplicateFormField = () => {
       queryClient,
       adminFormKey,
       updateEditState,
+      t,
     ],
   )
 

frontend/src/features/admin-form/create/builder-and-design/mutations/useEditFormField.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useMutation, useQueryClient } from 'react-query'
 import { useParams } from 'react-router-dom'
 
@@ -21,6 +22,7 @@ import {
 } from '../utils/getMutationMessage'
 
 export const useEditFormField = () => {
+  const { t } = useTranslation()
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
@@ -36,15 +38,14 @@ export const useEditFormField = () => {
       if (fieldBuilderState !== FieldBuilderState.EditingField) {
         toast({
           status: 'warning',
-          description:
-            'Something went wrong when editing your field. Please refresh and try again.',
+          description: t('features.adminForm.toasts.field.update.error'),
         })
         return
       }
       toast({
-        description: `The ${getMutationToastDescriptionFieldName(
-          newField,
-        )} was updated.`,
+        description: t('features.adminForm.toasts.field.update.success', {
+          field: getMutationToastDescriptionFieldName(newField),
+        }),
       })
       queryClient.setQueryData<AdminFormDto>(adminFormKey, (oldForm) => {
         // Should not happen, should not be able to update field if there is no
@@ -57,7 +58,7 @@ export const useEditFormField = () => {
         return oldForm
       })
     },
-    [adminFormKey, fieldBuilderState, queryClient, toast],
+    [adminFormKey, fieldBuilderState, queryClient, toast, t],
   )
 
   const handleError = useCallback(