feat(i18n): replace hardcoded text in FeedbackBlock for i18n (#7941)

* fix(i18n): correct casing for public form submit btn * feat: replace hardcoded text in FeedbackBlock for i18n --------- Co-authored-by: Zhu Liang <[email protected]>
opengovsg · Dec 11, 2024 · 71be05a · 71be05a
1 parent 6d929a8
commit 71be05a
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 22 deletions.
diff --git a/frontend/src/features/public-form/components/FormEndPage/components/FeedbackBlock.tsx b/frontend/src/features/public-form/components/FormEndPage/components/FeedbackBlock.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { Controller, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { chakra, Flex, FormControl } from '@chakra-ui/react'
 
 import { FormColorTheme } from '~shared/types/form'
@@ -27,6 +28,8 @@ export const FeedbackBlock = ({
   onSubmit,
   colorTheme = FormColorTheme.Blue,
 }: FeedbackBlockProps): JSX.Element => {
+  const { t } = useTranslation()
+
   const {
     control,
     register,
@@ -39,8 +42,8 @@ export const FeedbackBlock = ({
   const { isPaymentEnabled } = usePublicFormContext()
 
   const feedbackTitle = isPaymentEnabled
-    ? 'How was your experience making payment on this form?'
-    : 'How was your form filling experience today?'
+    ? t('features.publicForm.components.feedbackBlock.title.payment')
+    : t('features.publicForm.components.feedbackBlock.title.general')
 
   const colorScheme = useMemo(() => {
     return `theme-${colorTheme}` as const
@@ -54,13 +57,19 @@ export const FeedbackBlock = ({
             {feedbackTitle}
           </FormLabel>
           <Controller
-            rules={{ required: 'Please select a rating' }}
+            rules={{
+              required: t(
+                'features.publicForm.components.feedbackBlock.rating.error',
+              ),
+            }}
             control={control}
             name="rating"
             render={({ field }) => (
               <Rating
                 isRequired
-                fieldTitle="Form feedback rating"
+                fieldTitle={t(
+                  'features.publicForm.components.feedbackBlock.rating.label',
+                )}
                 colorScheme={colorScheme}
                 numberOfRatings={5}
                 variant="star"
@@ -74,8 +83,12 @@ export const FeedbackBlock = ({
           isReadOnly={isSubmitting}
           mt="1rem"
           {...register('comment')}
-          aria-label="Tell us more about your experience"
-          placeholder="Tell us more about your experience"
+          aria-label={t(
+            'features.publicForm.components.feedbackBlock.commentPlaceholder',
+          )}
+          placeholder={t(
+            'features.publicForm.components.feedbackBlock.commentPlaceholder',
+          )}
         />
         <Button
           mt="1.5rem"
@@ -84,7 +97,7 @@ export const FeedbackBlock = ({
           colorScheme={colorScheme}
           isLoading={isSubmitting}
         >
-          Submit feedback
+          {t('features.publicForm.components.feedbackBlock.submitButton')}
         </Button>
       </chakra.form>
     </Flex>

diff --git a/frontend/src/features/public-form/components/FormFields/PublicFormSubmitButton.tsx b/frontend/src/features/public-form/components/FormFields/PublicFormSubmitButton.tsx
@@ -129,26 +129,18 @@ export const PublicFormSubmitButton = ({
         isLoading={isSubmitting}
         isDisabled={!!preventSubmissionLogic || !onSubmit}
         loadingText={t(
-          'features.publicForm.components.PublicFormSubmitButton.loadingText',
+          'features.publicForm.components.submitButton.loadingText',
         )}
         onClick={isPaymentEnabled && !isPreview ? checkBeforeOpen : onSubmit}
       >
         <VisuallyHidden>
-          {t(
-            'features.publicForm.components.PublicFormSubmitButton.visuallyHidden',
-          )}
+          {t('features.publicForm.components.submitButton.visuallyHidden')}
         </VisuallyHidden>
         {preventSubmissionLogic
-          ? t(
-              'features.publicForm.components.PublicFormSubmitButton.preventSubmission',
-            )
+          ? t('features.publicForm.components.submitButton.preventSubmission')
           : isPaymentEnabled
-            ? t(
-                'features.publicForm.components.PublicFormSubmitButton.proceedToPay',
-              )
-            : t(
-                'features.publicForm.components.PublicFormSubmitButton.submitNow',
-              )}
+            ? t('features.publicForm.components.submitButton.proceedToPay')
+            : t('features.publicForm.components.submitButton.submitNow')}
       </Button>
       {preventSubmissionLogic ? (
         <InlineMessage variant="warning">

diff --git a/frontend/src/i18n/locales/features/public-form/en-sg.ts b/frontend/src/i18n/locales/features/public-form/en-sg.ts
@@ -24,13 +24,25 @@ export const enSG: PublicForm = {
       'Your verified fields have expired. Please verify those fields again.',
   },
   components: {
-    PublicFormSubmitButton: {
+    submitButton: {
       loadingText: 'Submitting',
       visuallyHidden: 'End of form.',
       preventSubmission: 'Submission disabled',
       proceedToPay: 'Proceed to pay',
       submitNow: 'Submit now',
     },
     table,
+    feedbackBlock: {
+      title: {
+        payment: 'How was your experience making payment on this form?',
+        general: 'How was your form filling experience today?',
+      },
+      rating: {
+        label: 'Form feedback rating',
+        error: 'Please select a rating',
+      },
+      commentPlaceholder: 'Tell us more about your experience',
+      submitButton: 'Submit feedback',
+    },
   },
 }
diff --git a/frontend/src/i18n/locales/features/public-form/index.ts b/frontend/src/i18n/locales/features/public-form/index.ts
@@ -19,13 +19,25 @@ export interface PublicForm {
     verifiedFieldExpired: string
   }
   components: {
-    PublicFormSubmitButton: {
+    submitButton: {
       loadingText: string
       visuallyHidden: string
       preventSubmission: string
       proceedToPay: string
       submitNow: string
     }
     table: Table
+    feedbackBlock: {
+      title: {
+        payment: string
+        general: string
+      }
+      rating: {
+        label: string
+        error: string
+      }
+      commentPlaceholder: string
+      submitButton: string
+    }
   }
 }