feat: extract text from Logic Components (#9666)

apps/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BiPlus } from 'react-icons/bi'
 import { Box, Container, Flex, Spacer } from '@chakra-ui/react'
 
@@ -11,6 +12,7 @@ import { useAdminFormLogic } from './hooks/useAdminFormLogic'
 import { useAdminLogicStore } from './adminLogicStore'
 
 export const CreatePageLogicTab = (): JSX.Element => {
+  const { t } = useTranslation()
   const { createOrEditData, setToCreating, reset } = useAdminLogicStore(
     useCallback((state) => {
       return {
@@ -51,7 +53,7 @@ export const CreatePageLogicTab = (): JSX.Element => {
               bottom={{ base: '5rem', md: undefined }}
               right={{ base: '1rem', md: undefined }}
               icon={<BiPlus fontSize="1.5rem" />}
-              aria-label="Add logic"
+              aria-label={t('features.adminForm.sidebar.logic.addLogicBtn')}
               isDisabled={!!createOrEditData}
               onClick={setToCreating}
             />

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

@@ -88,10 +88,10 @@ export const EditConditionBlock = ({
       resetField(`${name}.field`)
       setError(`${name}.field`, {
         type: 'manual',
-        message: 'This field was deleted, please select another field',
+        message: t('features.adminForm.sidebar.logic.errors.fieldDeleted'),
       })
     }
-  }, [ifFieldIdValue, idToFieldMap, name, resetField, setError])
+  }, [ifFieldIdValue, idToFieldMap, name, resetField, setError, t])
 
   /**
    * Effect to reset the field if the field to apply a condition on is changed.

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

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { BiTrash } from 'react-icons/bi'
 import { Box, Flex, Stack } from '@chakra-ui/react'
 
@@ -15,13 +16,14 @@ export interface SaveActionGroupProps {
 }
 
 export const SaveActionGroup = ({
-  submitButtonLabel = 'Save changes',
+  submitButtonLabel,
   handleCancel,
   handleDelete,
   handleSubmit,
   isLoading,
   ariaLabelName,
 }: SaveActionGroupProps): JSX.Element => {
+  const { t } = useTranslation()
   const isMobile = useIsMobile()
 
   return (
@@ -34,7 +36,9 @@ export const SaveActionGroup = ({
         <IconButton
           variant="clear"
           colorScheme="danger"
-          aria-label={`Delete ${ariaLabelName}`}
+          aria-label={t('features.adminForm.sidebar.logic.aria.delete', {
+            name: ariaLabelName,
+          })}
           icon={<BiTrash />}
           onClick={handleDelete}
           isDisabled={isLoading}
@@ -52,7 +56,8 @@ export const SaveActionGroup = ({
           onClick={handleSubmit}
           isFullWidth={isMobile}
         >
-          {submitButtonLabel}
+          {submitButtonLabel ??
+            t('features.adminForm.sidebar.logic.saveChangesBtn')}
         </Button>
         <Button
           variant="clear"
@@ -61,7 +66,7 @@ export const SaveActionGroup = ({
           onClick={handleCancel}
           isFullWidth={isMobile}
         >
-          Cancel
+          {t('features.adminForm.sidebar.logic.cancelBtn')}
         </Button>
       </Stack>
     </Flex>

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

@@ -1,5 +1,6 @@
 import { useCallback, useLayoutEffect, useMemo, useRef } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { Stack } from '@chakra-ui/react'
 import { merge } from 'lodash'
 
@@ -108,6 +109,7 @@ export const EditLogicBlock = ({
   submitButtonLabel,
   handleOpenDeleteModal,
 }: EditLogicBlockProps) => {
+  const { t } = useTranslation()
   const {
     formMethods,
     logicConditionBlocks,
@@ -159,7 +161,7 @@ export const EditLogicBlock = ({
         handleDelete={handleOpenDeleteModal}
         handleCancel={setToInactive}
         submitButtonLabel={submitButtonLabel}
-        ariaLabelName="logic"
+        ariaLabelName={t('features.adminForm.sidebar.logic.aria.logicName')}
       />
     </EditConditionWrapper>
   )

apps/frontend/src/features/admin-form/create/logic/components/LogicContent/InactiveLogicBlock/FieldLogicBadge.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Box, Icon, Stack, Text } from '@chakra-ui/react'
 
 import { BxsErrorCircle, BxsInfoCircle } from '~assets/icons'
@@ -15,7 +16,7 @@ interface FieldLogicBadgeProps {
   field?: FormFieldWithQuestionNo
   defaults?: {
     variant: 'error' | 'info'
-    message: string
+    message?: string
   }
 }
 
@@ -26,9 +27,17 @@ export const FieldLogicBadge = ({
   field,
   defaults = {
     variant: 'error',
-    message: 'This field was deleted, please select another field',
   },
 }: FieldLogicBadgeProps) => {
+  const { t } = useTranslation()
+
+  const message = useMemo(
+    () =>
+      defaults.message ??
+      t('features.adminForm.sidebar.logic.errors.fieldDeleted'),
+    [defaults.message, t],
+  )
+
   const fieldMeta = useMemo(
     () => (field ? BASICFIELD_TO_DRAWER_META[field.fieldType] : null),
     [field],
@@ -53,8 +62,13 @@ export const FieldLogicBadge = ({
   }, [defaults.variant, fieldMeta])
 
   const tooltipLabel = useMemo(
-    () => (!fieldMeta ? defaults.message : `${fieldMeta.label} field`),
-    [fieldMeta, defaults.message],
+    () =>
+      !fieldMeta
+        ? message
+        : t('features.adminForm.sidebar.logic.fieldBadge.fieldLabel', {
+            label: fieldMeta.label,
+          }),
+    [fieldMeta, message, t],
   )
 
   const tooltipIcon = useMemo(() => {
@@ -79,7 +93,7 @@ export const FieldLogicBadge = ({
           <Text noOfLines={1}>{getLogicFieldLabel(field)}</Text>
         ) : (
           <Text textColor={textColor} noOfLines={1}>
-            {defaults.message}
+            {message}
           </Text>
         )}
       </Stack>

apps/frontend/src/features/admin-form/create/logic/components/LogicContent/InactiveLogicBlock/InactiveLogicBlock.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BiPencil } from 'react-icons/bi'
 import { Box, Divider, Stack, StackDivider, Text } from '@chakra-ui/react'
 
@@ -24,6 +25,7 @@ interface InactiveLogicBlockProps {
 export const InactiveLogicBlock = ({
   logic,
 }: InactiveLogicBlockProps): JSX.Element | null => {
+  const { t } = useTranslation()
   const { idToFieldMap } = useAdminFormLogic()
   const setToEditing = useAdminLogicStore(setToEditingSelector)
   const stateData = useAdminLogicStore(createOrEditDataSelector)
@@ -41,14 +43,17 @@ export const InactiveLogicBlock = ({
         )
         return (
           <>
-            <Text>then show</Text>
+            <Text>
+              {t('features.adminForm.sidebar.logic.inactiveBlock.thenShow')}
+            </Text>
             <Stack direction="column" spacing="0.25rem">
               {allInvalid ? (
                 <FieldLogicBadge
                   defaults={{
                     variant: 'error',
-                    message:
-                      'All fields were deleted, please select at least one field',
+                    message: t(
+                      'features.adminForm.sidebar.logic.thenBlock.errors.atLeastOneFieldRequired',
+                    ),
                   }}
                 />
               ) : (
@@ -58,8 +63,9 @@ export const InactiveLogicBlock = ({
                     field={idToFieldMap[fieldId]}
                     defaults={{
                       variant: 'info',
-                      message:
-                        'This field was deleted and has been removed from your logic',
+                      message: t(
+                        'features.adminForm.sidebar.logic.inactiveBlock.fieldRemoved',
+                      ),
                     }}
                   />
                 ))
@@ -71,12 +77,16 @@ export const InactiveLogicBlock = ({
       case LogicType.PreventSubmit:
         return (
           <>
-            <Text>then disable submission</Text>
+            <Text>
+              {t(
+                'features.adminForm.sidebar.logic.inactiveBlock.thenDisableSubmission',
+              )}
+            </Text>
             <LogicBadge>{logic.preventSubmitMessage}</LogicBadge>
           </>
         )
     }
-  }, [logic, idToFieldMap])
+  }, [logic, idToFieldMap, t])
 
   const handleClick = useCallback(() => {
     if (isPreventEdit) {
@@ -112,13 +122,18 @@ export const InactiveLogicBlock = ({
               color="secondary.500"
             >
               <Stack>
-                <Text>{index === 0 ? 'If' : 'and'}</Text>
+                <Text>
+                  {index === 0
+                    ? t('features.adminForm.sidebar.logic.inactiveBlock.if')
+                    : t('features.adminForm.sidebar.logic.and')}
+                </Text>
                 <FieldLogicBadge
                   field={idToFieldMap[condition.field]}
                   defaults={{
                     variant: 'error',
-                    message:
-                      'This field was deleted, please select another field',
+                    message: t(
+                      'features.adminForm.sidebar.logic.errors.fieldDeleted',
+                    ),
                   }}
                 />
               </Stack>
@@ -143,7 +158,7 @@ export const InactiveLogicBlock = ({
         top={{ base: '0.5rem', md: '2rem' }}
         right={{ base: '0.5rem', md: '2rem' }}
         pos="absolute"
-        aria-label="Delete logic"
+        aria-label={t('features.adminForm.sidebar.logic.modals.delete.title')}
         variant="clear"
         onClick={handleClick}
         icon={<BiPencil fontSize="1.5rem" />}

apps/frontend/src/features/admin-form/create/logic/components/LogicContent/LogicContent.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { Stack } from '@chakra-ui/react'
 
 import InlineMessage from '~components/InlineMessage'
@@ -13,6 +14,7 @@ import { LogicBlockFactory } from './LogicBlockFactory'
 import { NewLogicBlock } from './NewLogicBlock'
 
 export const LogicContent = (): JSX.Element | null => {
+  const { t } = useTranslation()
   const isCreatingState = useAdminLogicStore(isCreatingStateSelector)
   const { formLogics, isLoading, hasError } = useAdminFormLogic()
 
@@ -22,8 +24,7 @@ export const LogicContent = (): JSX.Element | null => {
     <Stack color="secondary.500" spacing="1rem">
       {hasError ? (
         <InlineMessage variant="error">
-          There are errors in your form's logic, please fix them before sharing
-          your form
+          {t('features.adminForm.sidebar.logic.errors.formError')}
         </InlineMessage>
       ) : null}
       <HeaderBlock />

apps/frontend/src/features/admin-form/create/logic/components/LogicContent/NewLogicBlock/NewLogicBlock.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import {
   setToInactiveSelector,
@@ -16,6 +17,7 @@ export interface NewLogicBlockProps {
 export const NewLogicBlock = ({
   _defaultValues,
 }: NewLogicBlockProps): JSX.Element => {
+  const { t } = useTranslation()
   const { createLogicMutation } = useLogicMutations()
   const setToInactive = useAdminLogicStore(setToInactiveSelector)
   const handleSubmit = useCallback(
@@ -31,7 +33,7 @@ export const NewLogicBlock = ({
       isLoading={createLogicMutation.isLoading}
       defaultValues={_defaultValues}
       onSubmit={handleSubmit}
-      submitButtonLabel="Add logic"
+      submitButtonLabel={t('features.adminForm.sidebar.logic.addLogicBtn')}
     />
   )
 }

apps/frontend/src/features/admin-form/create/logic/mutations.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'
 
@@ -15,6 +16,7 @@ import {
 } from './FormLogicService'
 
 export const useLogicMutations = () => {
+  const { t } = useTranslation()
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
@@ -46,7 +48,9 @@ export const useLogicMutations = () => {
           return prev
         })
         toast({
-          description: 'The logic was successfully created.',
+          description: t(
+            'features.adminForm.sidebar.logic.mutations.createSuccess',
+          ),
         })
       },
       onError: handleError,
@@ -67,7 +71,9 @@ export const useLogicMutations = () => {
           return prev
         })
         toast({
-          description: 'The logic was successfully deleted.',
+          description: t(
+            'features.adminForm.sidebar.logic.mutations.deleteSuccess',
+          ),
         })
       },
       onError: handleError,
@@ -91,7 +97,9 @@ export const useLogicMutations = () => {
           return prev
         })
         toast({
-          description: 'The logic was successfully updated.',
+          description: t(
+            'features.adminForm.sidebar.logic.mutations.updateSuccess',
+          ),
         })
       },
       onError: handleError,