feat(i18n): extract text from admin results page

frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponseNavbar.tsx

@@ -113,7 +113,9 @@
     return `..?${searchParams}`
   }, [lastNavPage, lastNavSubmissionId])
 
-  const { t } = useTranslation()
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.responses.individualResponse',
+  })
 
   const { user } = useUser()
   const gb = useGrowthBook()
@@ -159,20 +161,20 @@
           to={backLink}
         >
           <Icon as={BiLeftArrowAlt} fontSize="1.5rem" mr="0.5rem" />
-          {t('features.adminForm.responses.individualResponse.backToList')}
+          {t('backToList')}
         </Link>
       </Flex>
       <Flex gridArea="respondent" justify="center" align="center">
         <Skeleton isLoaded={!isLoading}>
           <Stack direction="row" justify="center" align="center">
             <Text textStyle="h2" as="h2">
-              {t('features.common.response')}
+              {t('features.common.response', { ns: 'translation', keyPrefix: '' })}
               {currentResponseNumber ? ` #${currentResponseNumber}` : ''}
             </Text>
             {isAdminPrintPdfEnabled && (
               <Box>
                 <IconButton
-                  aria-label="Print"
+                  aria-label={t('individualResponseNavbar.printAriaLabel')}
                   icon={<FaRegFilePdf />}
                   isLoading={isLoading || isFormLoading}
                   onClick={() => {
@@ -201,17 +203,13 @@
           isDisabled={!prevSubmissionId || isAnyFetching}
           onClick={handleNavigatePrev}
           icon={<BiChevronLeft />}
-          aria-label={t(
-            'features.adminForm.responses.individualResponse.previousSubmission',
-          )}
+          aria-label={t('previousSubmission')}
         />
         <IconButton
           isDisabled={!nextSubmissionId || isAnyFetching}
           onClick={handleNavigateNext}
           icon={<BiChevronRight />}
-          aria-label={t(
-            'features.adminForm.responses.individualResponse.nextSubmission',
-          )}
+          aria-label={t('nextSubmission')}
         />
       </ButtonGroup>
     </Grid>

frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponsePage.tsx

@@ -113,7 +113,9 @@
 }
 
 export const IndividualResponsePage = (): JSX.Element => {
-  const { t } = useTranslation()
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.responses.individualResponse',
+  })
   const { submissionId, formId } = useParams()
   if (!submissionId) throw new Error('Missing submissionId')
   if (!formId) throw new Error('Missing formId')
@@ -168,12 +170,8 @@
     return (
       <SecretKeyVerification
         heroSvg={<FormActivationSvg />}
-        ctaText={t(
-          'features.adminForm.responses.individualResponse.secretKeyVerification.ctaText',
-        )}
-        label={t(
-          'features.adminForm.responses.individualResponse.secretKeyVerification.label',
-        )}
+        ctaText={t('secretKeyVerification.ctaText')}
+        label={t('secretKeyVerification.label')}
       />
     )
 
@@ -210,15 +208,15 @@
       >
         <Stack bg="primary.100" p="1.5rem" textStyle="monospace">
           <StackRow
-            label="Response ID"
+            label={t('labels.responseId')}
             value={submissionId}
             isLoading={isLoading}
             isError={isError}
           />
           <StackRow
-            label={isMrf ? MRF_RESPONSE_TIMESTAMP_LABEL : 'Timestamp'}
+            label={isMrf ? MRF_RESPONSE_TIMESTAMP_LABEL : t('labels.timestamp')}
             value={
-              data?.submissionTime ?? t('features.common.loadingWithEllipsis')
+              data?.submissionTime ?? t('features.common.loadingWithEllipsis', { ns: 'translation', keyPrefix: '' })
             }
             isLoading={isLoading}
             isError={isError}
@@ -238,11 +236,14 @@
                   workflowCurrentStepNumber === undefined ||
                   workflowNumTotalSteps === undefined
                     ? '-'
-                    : getPendingResponseAtString({
-                        workflowStatus,
-                        workflowCurrentStepNumber,
-                        workflowNumTotalSteps,
-                      })
+                    : getPendingResponseAtString(
+                        {
+                          workflowStatus,
+                          workflowCurrentStepNumber,
+                          workflowNumTotalSteps,
+                        },
+                        t,
+                      )
                 }
                 isLoading={isLoading}
                 isError={isError}
@@ -266,7 +267,7 @@
                 textStyle="subhead-1"
                 py={{ base: '0', md: '0.25rem' }}
               >
-                {t('features.common.attachments')}:
+                {t('features.common.attachments', { ns: 'translation', keyPrefix: '' })}:
               </Text>
               <Skeleton isLoaded={!isLoading && !isError}>
                 <Button
@@ -281,20 +282,17 @@
                     )
                   }
                 >
-                  {t(
-                    'features.adminForm.responses.individualResponse.downloadAttachmentsAsZip',
-                    { attachmentSize: attachmentDownloadUrls.size },
-                  )}
+                  {t('downloadAttachmentsAsZip', {
+                    attachmentSize: attachmentDownloadUrls.size,
+                  })}
                 </Button>
               </Skeleton>
             </Stack>
           )}
           {form?.responseMode === FormResponseMode.Multirespondent &&
             user?.betaFlags?.mrfAdminSubmissionKey && (
               <StackRow
-                label={t(
-                  'features.adminForm.responses.individualResponse.responseLinkLabel',
-                )}
+                label={t('responseLinkLabel')}
                 value={responseLinkWithKey}
                 isLoading={isLoading}
                 isError={isError}

frontend/src/features/admin-form/responses/IndividualResponsePage/PaymentSection.tsx

@@ -20,54 +20,50 @@
   payment,
   formId,
 }: PaymentSectionProps): JSX.Element | null => {
-  const { t } = useTranslation()
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.responses.individualResponse',
+  })
 
   if (!payment) return null
 
   const paymentDataMap = keyBy(
-    getPaymentDataView(window.location.origin, payment, formId),
+    getPaymentDataView(window.location.origin, payment, formId, t),
     'key',
   )
 
   const paymentTagProps =
     payment.status === PaymentStatus.Succeeded
       ? {
-          label: t('features.common.success'),
+          label: t('features.common.success', { ns: 'translation', keyPrefix: '' }),
           colorScheme: 'success',
           rightIcon: BiCheck,
         }
       : payment.status === PaymentStatus.PartiallyRefunded
         ? {
-            label: t(
-              'features.adminForm.responses.individualResponse.paymentSection.paymentStatusLabel.partiallyRefunded',
-            ),
+            label: t('paymentSection.paymentStatusLabel.partiallyRefunded'),
             colorScheme: 'secondary',
           }
         : payment.status === PaymentStatus.FullyRefunded
           ? {
-              label: t(
-                'features.adminForm.responses.individualResponse.paymentSection.paymentStatusLabel.fullyRefunded',
-              ),
+              label: t('paymentSection.paymentStatusLabel.fullyRefunded'),
               colorScheme: 'secondary',
             }
           : payment.status === PaymentStatus.Disputed
             ? {
-                label: t(
-                  'features.adminForm.responses.individualResponse.paymentSection.paymentStatusLabel.disputed',
-                ),
+                label: t('paymentSection.paymentStatusLabel.disputed'),
                 colorScheme: 'warning',
               }
             : undefined // The remaining options should never appear.
 
   const payoutTagProps =
     payment.payoutId || payment.payoutDate
       ? {
-          label: t('features.common.success'),
+          label: t('features.common.success', { ns: 'translation', keyPrefix: '' }),
           colorScheme: 'success',
           rightIcon: BiCheck,
         }
       : {
-          label: t('features.common.pending'),
+          label: t('features.common.pending', { ns: 'translation', keyPrefix: '' }),
           colorScheme: 'secondary',
         }
 
@@ -77,7 +73,10 @@
   return (
     <Flex flexDir="column" gap="4rem">
       <Flex flexDir="column" gap="1.25rem">
-        <PaymentDataHeader name="Payment" {...paymentTagProps} />
+        <PaymentDataHeader
+          name={t('paymentSection.headers.payment')}
+          {...paymentTagProps}
+        />
         <Flex flexDir="column" gap="0.75rem">
           <PaymentDataItem {...paymentDataMap['email']} />
           <PaymentDataItem {...paymentDataMap['receiptUrl']} isUrl />
@@ -95,7 +94,10 @@
         </Flex>
       </Flex>
       <Flex flexDir="column" gap="1.25rem">
-        <PayoutDataHeader name="Payout to bank account" {...payoutTagProps} />
+        <PayoutDataHeader
+          name={t('paymentSection.headers.payout')}
+          {...payoutTagProps}
+        />
         <Flex flexDir="column" gap="0.75rem">
           <PaymentDataItem {...paymentDataMap['payoutId']} isMonospace />
           <PaymentDataItem {...paymentDataMap['payoutDate']} />
@@ -118,7 +120,9 @@
   colorScheme,
   rightIcon,
 }: PaymentDataHeaderProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.responses.individualResponse',
+  })
 
   return (
     <Flex gap="1rem" align="center">
@@ -127,12 +131,7 @@
           {name}
         </Text>
 
-        <Tooltip
-          placement="top"
-          label={t(
-            'features.adminForm.responses.individualResponse.paymentSection.tooltipLabel',
-          )}
-        >
+        <Tooltip placement="top" label={t('paymentSection.tooltipLabel')}>
           <Flex justify="center" align="center">
             <Icon as={BiInfoCircle} fontSize="1.25rem" ml="0.5rem" />
           </Flex>
@@ -186,16 +185,16 @@
   isMonospace,
   isUrl,
 }: PaymentDataItemProps): JSX.Element {
-  const { t } = useTranslation()
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.responses.individualResponse',
+  })
   return (
     <Flex flexDir={{ base: 'column', md: 'row' }} gap="0.25rem">
       <Text textStyle="subhead-1">{name}:</Text>
       <Text textStyle={isMonospace ? 'monospace' : undefined}>
         {isUrl ? (
           <Link href={value} target="_blank">
-            {t(
-              'features.adminForm.responses.individualResponse.paymentSection.paymentDataItemPdfDownloadLabel',
-            )}
+            {t('paymentSection.paymentDataItemPdfDownloadLabel')}
           </Link>
         ) : (
           value

frontend/src/features/admin-form/responses/ResponsesPage/ResponsesPage.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { FormResponseMode } from '~shared/types/form'
 
 import { useToast } from '~hooks/useToast'
@@ -9,6 +10,9 @@
 import { StorageResponsesTab } from './storage'
 
 export const ResponsesPage = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.responses.responsesPage',
+  })
   const { data: form, isLoading } = useAdminForm()
 
   const toast = useToast({ status: 'danger' })
@@ -17,8 +21,7 @@
 
   if (!form) {
     toast({
-      description:
-        'There was an error retrieving your form. Please try again later.',
+      description: t('errors.formRetrievalError'),
     })
     return <ResponsesPageSkeleton />
   }

frontend/src/features/admin-form/responses/ResponsesPage/storage/UnlockedResponses/DownloadButton.tsx

@@ -2,7 +2,6 @@
 import { useTranslation } from 'react-i18next'
 import { useThrottle } from 'react-use'
 import { Box, MenuButton, Text, useDisclosure } from '@chakra-ui/react'
-import simplur from 'simplur'
 
 import { BxsChevronDown } from '~assets/icons/BxsChevronDown'
 import { BxsChevronUp } from '~assets/icons/BxsChevronUp'
@@ -71,29 +70,34 @@
       onSuccess: ({ successCount, expectedCount, errorCount }) => {
         if (downloadParams?.responsesCount === 0) {
           toast({
-            description: 'No responses to download',
+            description: t('storage.unlockedResponses.downloadButton.toasts.noResponses'),
           })
           return
         }
         if (errorCount > 0) {
           toast({
             status: 'warning',
-            description: simplur`Partial success. ${successCount}/${expectedCount} ${[
+            description: t('storage.unlockedResponses.downloadButton.toasts.partialSuccess', {
               successCount,
-            ]}response[|s] [was|were] decrypted. ${errorCount} failed.`,
+              expectedCount,
+              count: successCount,
+              errorCount,
+            }),
           })
           return
         }
         toast({
-          description: simplur`Success. ${successCount}/${expectedCount} ${[
+          description: t('storage.unlockedResponses.downloadButton.toasts.success', {
             successCount,
-          ]}response[|s] [was|were] decrypted.`,
+            expectedCount,
+            count: successCount,
+          }),
         })
       },
       onError: () => {
         toast({
           status: 'danger',
-          description: 'Failed to start download. Please try again later.',
+          description: t('storage.unlockedResponses.downloadButton.toasts.failedToStart'),
         })
       },
       onSettled: (decryptResult) => {
@@ -138,17 +142,19 @@
     handleModalClose()
     toast({
       status: 'warning',
-      description: 'Responses download has been canceled.',
+      description: t('storage.unlockedResponses.downloadButton.toasts.downloadCanceled'),
     })
     setDownloadMetadata({ isCanceled: true })
-  }, [handleModalClose, toast])
+  }, [handleModalClose, t, toast])
 
   const handleAttachmentsDownloadCancel = useCallback(() => {
     resetDownload()
     setDownloadMetadata({ isCanceled: true })
   }, [resetDownload])
 
-  const { t } = useTranslation()
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.responses.responsesPage',
+  })
 
   return (
     <>