feat: improve translation coverage (#1427)

Improves translation coverage across the app.

packages/ui/primitives/document-flow/add-fields.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Caveat } from 'next/font/google';
 
 import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Prisma } from '@prisma/client';
 import {
   CalendarDays,
@@ -34,6 +35,7 @@ import {
 } from '@documenso/lib/types/field-meta';
 import { nanoid } from '@documenso/lib/universal/id';
 import { validateFieldsUninserted } from '@documenso/lib/utils/fields';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
 import {
   canRecipientBeModified,
   canRecipientFieldsBeModified,
@@ -114,6 +116,7 @@ export const AddFieldsFormPartial = ({
   teamId,
 }: AddFieldsFormProps) => {
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const [isMissingSignatureDialogVisible, setIsMissingSignatureDialogVisible] = useState(false);
 
@@ -568,7 +571,10 @@ export const AddFieldsFormPartial = ({
       {showAdvancedSettings && currentField ? (
         <FieldAdvancedSettings
           title={msg`Advanced settings`}
-          description={msg`Configure the ${FRIENDLY_FIELD_TYPE[currentField.type]} field`}
+          description={msg`Configure the ${parseMessageDescriptor(
+            _,
+            FRIENDLY_FIELD_TYPE[currentField.type],
+          )} field`}
           field={currentField}
           fields={localFields}
           onAdvancedSettings={handleAdvancedSettings}
@@ -603,7 +609,7 @@ export const AddFieldsFormPartial = ({
                     width: fieldBounds.current.width,
                   }}
                 >
-                  {FRIENDLY_FIELD_TYPE[selectedField]}
+                  {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[selectedField])}
                 </div>
               )}
 
@@ -684,8 +690,7 @@ export const AddFieldsFormPartial = ({
                       {recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
                         <CommandGroup key={roleIndex}>
                           <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
-                            {/* Todo: Translations - Add plural translations. */}
-                            {`${RECIPIENT_ROLES_DESCRIPTION_ENG[role].roleName}s`}
+                            {_(RECIPIENT_ROLES_DESCRIPTION_ENG[role].roleNamePlural)}
                           </div>
 
                           {roleRecipients.length === 0 && (
@@ -997,7 +1002,7 @@ export const AddFieldsFormPartial = ({
                             )}
                           >
                             <Disc className="h-4 w-4" />
-                            <Trans>Radio</Trans>
+                            Radio
                           </p>
                         </CardContent>
                       </Card>
@@ -1023,7 +1028,8 @@ export const AddFieldsFormPartial = ({
                             )}
                           >
                             <CheckSquare className="h-4 w-4" />
-                            <Trans>Checkbox</Trans>
+                            {/* Not translated on purpose. */}
+                            Checkbox
                           </p>
                         </CardContent>
                       </Card>

packages/ui/primitives/document-flow/add-signature.types.ts

@@ -1,10 +1,11 @@
+import { msg } from '@lingui/macro';
 import { z } from 'zod';
 
 export const ZAddSignatureFormSchema = z.object({
   email: z
     .string()
-    .min(1, { message: 'Email is required' })
-    .email({ message: 'Invalid email address' }),
+    .min(1, { message: msg`Email is required`.id })
+    .email({ message: msg`Invalid email address`.id }),
   name: z.string(),
   customText: z.string(),
   number: z.number().optional(),

packages/ui/primitives/document-flow/add-signers.tsx

@@ -504,7 +504,7 @@ export const AddSignersFormPartial = ({
                                     <FormControl>
                                       <Input
                                         type="email"
-                                        placeholder="Email"
+                                        placeholder={_(msg`Email`)}
                                         {...field}
                                         disabled={
                                           snapshot.isDragging ||

packages/ui/primitives/document-flow/add-signers.types.ts

@@ -1,3 +1,4 @@
+import { msg } from '@lingui/macro';
 import { z } from 'zod';
 
 import { ZRecipientActionAuthTypesSchema } from '@documenso/lib/types/document-auth';
@@ -11,7 +12,10 @@ export const ZAddSignersFormSchema = z
       z.object({
         formId: z.string().min(1),
         nativeId: z.number().optional(),
-        email: z.string().email().min(1),
+        email: z
+          .string()
+          .email({ message: msg`Invalid email`.id })
+          .min(1),
         name: z.string(),
         role: z.nativeEnum(RecipientRole),
         signingOrder: z.number().optional(),
@@ -29,7 +33,7 @@ export const ZAddSignersFormSchema = z
       return new Set(emails).size === emails.length;
     },
     // Dirty hack to handle errors when .root is populated for an array type
-    { message: 'Signers must have unique emails', path: ['signers__root'] },
+    { message: msg`Signers must have unique emails`.id, path: ['signers__root'] },
   );
 
 export type TAddSignersFormSchema = z.infer<typeof ZAddSignersFormSchema>;

packages/ui/primitives/document-flow/show-field-item.tsx

@@ -2,10 +2,12 @@
 
 import { Caveat } from 'next/font/google';
 
+import { useLingui } from '@lingui/react';
 import type { Prisma } from '@prisma/client';
 import { createPortal } from 'react-dom';
 
 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
 import { FieldType } from '@documenso/prisma/client';
 
 import { cn } from '../../lib/utils';
@@ -25,6 +27,8 @@ export type ShowFieldItemProps = {
 };
 
 export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
+  const { _ } = useLingui();
+
   const coords = useFieldPageCoords(field);
 
   const signerEmail =
@@ -47,7 +51,7 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
             field.type === FieldType.SIGNATURE && fontCaveat.className,
           )}
         >
-          {FRIENDLY_FIELD_TYPE[field.type]}
+          {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
 
           <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
             {signerEmail}

packages/ui/primitives/document-flow/types.ts

@@ -1,4 +1,5 @@
 import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/macro';
 import { z } from 'zod';
 
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
@@ -44,18 +45,18 @@ export const ZDocumentFlowFormSchema = z.object({
 
 export type TDocumentFlowFormSchema = z.infer<typeof ZDocumentFlowFormSchema>;
 
-export const FRIENDLY_FIELD_TYPE: Record<FieldType, string> = {
-  [FieldType.SIGNATURE]: 'Signature',
-  [FieldType.FREE_SIGNATURE]: 'Free Signature',
-  [FieldType.INITIALS]: 'Initials',
-  [FieldType.TEXT]: 'Text',
-  [FieldType.DATE]: 'Date',
-  [FieldType.EMAIL]: 'Email',
-  [FieldType.NAME]: 'Name',
-  [FieldType.NUMBER]: 'Number',
-  [FieldType.RADIO]: 'Radio',
-  [FieldType.CHECKBOX]: 'Checkbox',
-  [FieldType.DROPDOWN]: 'Select',
+export const FRIENDLY_FIELD_TYPE: Record<FieldType, MessageDescriptor | string> = {
+  [FieldType.SIGNATURE]: msg`Signature`,
+  [FieldType.FREE_SIGNATURE]: msg`Free Signature`,
+  [FieldType.INITIALS]: msg`Initials`,
+  [FieldType.TEXT]: msg`Text`,
+  [FieldType.DATE]: msg`Date`,
+  [FieldType.EMAIL]: msg`Email`,
+  [FieldType.NAME]: msg`Name`,
+  [FieldType.NUMBER]: msg`Number`,
+  [FieldType.RADIO]: `Radio`,
+  [FieldType.CHECKBOX]: `Checkbox`,
+  [FieldType.DROPDOWN]: `Select`,
 };
 
 export interface DocumentFlowStep {