feat(i18n): extract text public form comps

apps/frontend/src/app/AdminNavBar/AdminNavBar.tsx

@@ -342,7 +342,7 @@ export const AdminNavBar = ({ isMenuOpen }: AdminNavBarProps): JSX.Element => {
             </Menu.Item>
             <AvatarMenuDivider />
             <Menu.Item onClick={handleLogout}>
-              {t('features.app.adminNavBar.avatarMenuItem.logout')}
+              {t('features.common.logout')}
             </Menu.Item>
           </AvatarMenu>
         </HStack>

apps/frontend/src/features/public-form/components/DuplicatePaymentModal/DuplicatePaymentModal.tsx

@@ -1,4 +1,5 @@
 import { MouseEvent, MouseEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   Link,
   Modal,
@@ -33,6 +34,7 @@ export const DuplicatePaymentModal = ({
   formId,
   paymentId,
 }: DuplicatePaymentModalProps): JSX.Element => {
+  const { t } = useTranslation()
   const paymentUrl = getPaymentPageUrl(formId, paymentId)
 
   // We need to dismiss the Modal to release the scroll lock that affects the captcha
@@ -51,30 +53,44 @@ export const DuplicatePaymentModal = ({
         <ModalContent>
           <ModalCloseButton />
           <ModalHeader pb={'2rem'} w="90%">
-            Proceed to pay again?
+            {t('features.publicForm.components.duplicatePaymentModal.title')}
           </ModalHeader>
           <ModalBody flexGrow={0}>
             <Stack>
               <Text>
-                We noticed a successful payment made on this form by your email
-                address.&nbsp;
-                <Link href={paymentUrl}>View your previous payment ↪</Link>
+                {t(
+                  'features.publicForm.components.duplicatePaymentModal.description.existingPayment',
+                )}
+                &nbsp;
+                <Link href={paymentUrl}>
+                  {t(
+                    'features.publicForm.components.duplicatePaymentModal.description.viewPreviousPayment',
+                  )}
+                </Link>
               </Text>
               <br />
-              <Text>Do you wish to proceed to make another payment?</Text>
+              <Text>
+                {t(
+                  'features.publicForm.components.duplicatePaymentModal.description.confirm',
+                )}
+              </Text>
             </Stack>
           </ModalBody>
           <ModalFooter>
             <ButtonGroup isFullWidth={isMobile}>
               <Button variant="clear" onClick={onClose}>
-                Cancel
+                {t('features.common.cancel')}
               </Button>
               <Button
                 isLoading={isSubmitting}
-                loadingText="Submitting"
+                loadingText={t(
+                  'features.publicForm.components.duplicatePaymentModal.actions.submitting',
+                )}
                 onClick={closeAndSubmit}
               >
-                Proceed to pay
+                {t(
+                  'features.publicForm.components.duplicatePaymentModal.actions.submit',
+                )}
               </Button>
             </ButtonGroup>
           </ModalFooter>

apps/frontend/src/features/public-form/components/FloatingToolBar/FormIssueFeedbackModal.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
 import { useForm } from 'react-hook-form'
+import { Trans, useTranslation } from 'react-i18next'
 import {
   chakra,
   FormControl,
@@ -42,6 +43,8 @@ export const FormIssueFeedbackModal = ({
   isPreview,
   formId,
 }: FormIssueFeedbackProps): JSX.Element | null => {
+  const { t } = useTranslation()
+
   const modalSize = useBreakpointValue({
     base: 'mobile',
     xs: 'mobile',
@@ -64,15 +67,18 @@ export const FormIssueFeedbackModal = ({
     if (isPreview) {
       reset()
       toast({
-        description:
-          'Thank you for submitting your feedback! Since you are in preview mode, the feedback is not stored.',
+        description: t(
+          'features.publicForm.components.formIssueFeedbackModal.toast.preview',
+        ),
       })
     } else {
       submitFormIssueMutation.mutate(inputs, {
         onSuccess: () => {
           reset()
           toast({
-            description: 'Thank you for submitting your feedback!',
+            description: t(
+              'features.publicForm.components.formIssueFeedbackModal.toast.success',
+            ),
             status: 'success',
             isClosable: true,
           })
@@ -98,23 +104,24 @@ export const FormIssueFeedbackModal = ({
             pr="4rem"
           >
             <Text textStyle={{ base: '1.25rem', md: '1.5rem' }}>
-              Report an issue
+              {t('features.publicForm.components.formIssueFeedbackModal.title')}
             </Text>
           </ModalHeader>
           <ModalBody>
             <Text pb="1.5rem" textStyle="body-2" mt="0">
-              Fill this in only{' '}
-              <span style={{ fontWeight: 'bold' }}>
-                if you are experiencing issues and are unable to submit this
-                form
-              </span>
-              . If you would like to provide feedback, you can do so after
-              submitting the form.
+              <Trans
+                i18nKey="features.publicForm.components.formIssueFeedbackModal.description"
+                components={{
+                  bold: <span style={{ fontWeight: 'bold' }} />,
+                }}
+              />
             </Text>
             <Stack>
               <FormControl isInvalid={!!errors.issue}>
                 <FormLabel isRequired={true}>
-                  Please describe the issue you encountered
+                  {t(
+                    'features.publicForm.components.formIssueFeedbackModal.fields.issueLabel',
+                  )}
                 </FormLabel>
                 <Textarea
                   {...register('issue', {
@@ -127,10 +134,12 @@ export const FormIssueFeedbackModal = ({
               </FormControl>
 
               <FormControl isInvalid={!!errors.email}>
-                <FormLabel pt="1rem">Contact</FormLabel>
+                <FormLabel pt="1rem">{t('features.common.cancel')}</FormLabel>
                 <Input
                   type={BasicField.Email}
-                  placeholder="me@example.com"
+                  placeholder={t(
+                    'features.publicForm.components.formIssueFeedbackModal.fields.emailPlaceholder',
+                  )}
                   {...register('email', {
                     validate: {
                       validEmail: (value) =>
@@ -152,10 +161,12 @@ export const FormIssueFeedbackModal = ({
               direction={{ base: 'column-reverse', md: 'row' }}
             >
               <Button isFullWidth={isMobile} variant="clear" onClick={onClose}>
-                Cancel
+                {t('features.common.cancel')}
               </Button>
               <Button isFullWidth={isMobile} type="submit">
-                Send report
+                {t(
+                  'features.publicForm.components.formIssueFeedbackModal.actions.submit',
+                )}
               </Button>
             </Stack>
           </ModalFooter>

apps/frontend/src/features/public-form/components/FormAuth/FormAuth.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BiLogInCircle } from 'react-icons/bi'
 import { Box, Stack } from '@chakra-ui/react'
 
@@ -21,16 +22,19 @@ import { FormAuthMessage } from './FormAuthMessage'
 
 const getDispayedAuthTypeText = (
   authType: Exclude<FormAuthType, FormAuthType.NIL>,
+  t: (key: string) => string,
 ) => {
   switch (authType) {
     case FormAuthType.SP:
     case FormAuthType.MyInfo:
-      return 'Singpass'
+      return t('features.publicForm.components.formAuth.authType.singpass')
     case FormAuthType.CP:
-      return 'Singpass (Corporate)'
+      return t(
+        'features.publicForm.components.formAuth.authType.singpassCorporate',
+      )
     case FormAuthType.SGID:
     case FormAuthType.SGID_MyInfo:
-      return 'Singpass app'
+      return t('features.publicForm.components.formAuth.authType.singpassApp')
   }
 }
 
@@ -47,6 +51,7 @@ export const FormAuth = ({
   hasSingleSubmissionValidationError,
   hasRespondentNotWhitelistedError,
 }: FormAuthProps): JSX.Element => {
+  const { t } = useTranslation()
   const { formId, form } = usePublicFormContext()
 
   const buttonColorScheme = useMemo(() => {
@@ -56,7 +61,7 @@ export const FormAuth = ({
 
   const isMobile = useIsMobile()
   const { handleLoginMutation } = usePublicAuthMutations(formId)
-  const displayedAuthTypeText = getDispayedAuthTypeText(authType)
+  const displayedAuthTypeText = getDispayedAuthTypeText(authType, t)
 
   return (
     <Box
@@ -75,7 +80,9 @@ export const FormAuth = ({
           onClick={() => handleLoginMutation.mutate()}
           isLoading={handleLoginMutation.isLoading}
         >
-          Log in with {displayedAuthTypeText}
+          {t('features.publicForm.components.formAuth.loginButton', {
+            authType: displayedAuthTypeText,
+          })}
         </Button>
         <FormAuthMessage
           isSubmitterIdCollectionEnabled={isSubmitterIdCollectionEnabled}

apps/frontend/src/features/public-form/components/FormAuth/FormAuthMessage.tsx

@@ -1,3 +1,4 @@
+import { Trans, useTranslation } from 'react-i18next'
 import { Text } from '@chakra-ui/react'
 
 import { FormAuthType } from 'formsg-shared/types/form'
@@ -11,71 +12,39 @@ const SubmitterIdCollectionInfoText = ({
   authType,
   isSubmitterIdCollectionEnabled,
 }: FormAuthMessageProps): JSX.Element => {
-  if (isSubmitterIdCollectionEnabled) {
-    switch (authType) {
-      case FormAuthType.SP:
-      case FormAuthType.MyInfo:
-      case FormAuthType.SGID:
-      case FormAuthType.SGID_MyInfo:
-        return (
-          <Text>
-            Your Singpass login ID <Text as="b">will be included</Text> with
-            your form submission.
-          </Text>
-        )
-      case FormAuthType.CP:
-        return (
-          <Text>
-            Your Singpass and Corppass login ID{' '}
-            <Text as="b">will be included</Text> with your form submission.
-          </Text>
-        )
-      default: {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const _: never = authType
-        throw new Error('Invalid auth type')
-      }
-    }
-  } else {
-    switch (authType) {
-      case FormAuthType.SP:
-      case FormAuthType.MyInfo:
-      case FormAuthType.SGID:
-      case FormAuthType.SGID_MyInfo:
-        return (
-          <Text>
-            Your Singpass login ID will <Text as="b">not be included</Text> with
-            your form submission.
-          </Text>
-        )
-      case FormAuthType.CP:
-        return (
-          <Text>
-            Your Singpass and Corppass login ID will{' '}
-            <Text as="b">not be included</Text> with your form submission.
-          </Text>
-        )
-      default: {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const _: never = authType
-        throw new Error('Invalid auth type')
-      }
-    }
-  }
+  const isCorporate = authType === FormAuthType.CP
+
+  const keyBase = isSubmitterIdCollectionEnabled ? 'included' : 'notIncluded'
+  const key = isCorporate ? 'corporate' : 'singpass'
+
+  return (
+    <Text>
+      <Trans
+        i18nKey={`features.publicForm.components.formAuthMessage.submitterId.${keyBase}.${key}`}
+        components={{ bold: <Text as="b" /> }}
+      />
+    </Text>
+  )
 }
 
-const getSignInText = (authType: Exclude<FormAuthType, FormAuthType.NIL>) => {
+const getSignInText = (
+  authType: Exclude<FormAuthType, FormAuthType.NIL>,
+  t: (key: string) => string,
+) => {
   switch (authType) {
     case FormAuthType.SP:
     case FormAuthType.MyInfo:
-      return 'Sign in with Singpass to access this form.\n'
+      return t('features.publicForm.components.formAuthMessage.signIn.singpass')
     case FormAuthType.CP:
-      return 'Corporate entity login is required for this form.\n'
+      return t(
+        'features.publicForm.components.formAuthMessage.signIn.corporate',
+      )
     case FormAuthType.SGID:
     case FormAuthType.SGID_MyInfo:
-      return 'Sign in with the Singpass app to access this form.\n'
+      return t(
+        'features.publicForm.components.formAuthMessage.signIn.singpassApp',
+      )
     default: {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const _: never = authType
       throw new Error('Invalid auth type')
     }
@@ -86,7 +55,8 @@ export const FormAuthMessage = ({
   authType,
   isSubmitterIdCollectionEnabled,
 }: FormAuthMessageProps) => {
-  const signInText = getSignInText(authType)
+  const { t } = useTranslation()
+  const signInText = getSignInText(authType, t)
 
   return (
     <Text

apps/frontend/src/features/public-form/components/FormFields/FormFields.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { SubmitHandler, useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { Box, Stack } from '@chakra-ui/react'
 import { isEmpty } from 'lodash'
 
@@ -48,6 +49,8 @@ export const FormFields = ({
   colorTheme,
   onSubmit,
 }: FormFieldsProps): JSX.Element => {
+  const { t } = useTranslation()
+
   useFetchPrefillQuery()
 
   const { defaultFormValues, fieldPrefillMap, form, augmentedFormFields } =
@@ -85,7 +88,7 @@ export const FormFields = ({
             {isEmpty(fieldPrefillMap) ? null : hasLockedNormalPrefills ? (
               // If there are both locked and non-locked prefills, show this message.
               <InlineMessage variant="warning">
-                Some fields below have been pre-filled.
+                {t('features.publicForm.components.formFields.prefillWarning')}
               </InlineMessage>
             ) : null}
             <VisibleFormFields