feat: improve translation coverage (#1427)

Improves translation coverage across the app.

apps/web/src/components/(dashboard)/document-search/document-search.tsx

@@ -4,12 +4,18 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 
 export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string }) => {
+  const { _ } = useLingui();
+
   const router = useRouter();
   const searchParams = useSearchParams();
+
   const [searchTerm, setSearchTerm] = useState(initialValue);
   const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
 
@@ -33,7 +39,7 @@ export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string })
   return (
     <Input
       type="search"
-      placeholder="Search documents..."
+      placeholder={_(msg`Search documents...`)}
       value={searchTerm}
       onChange={(e) => setSearchTerm(e.target.value)}
     />

apps/web/src/components/(dashboard)/settings/token/contants.ts

@@ -1,7 +1,9 @@
+import { msg } from '@lingui/macro';
+
 export const EXPIRATION_DATES = {
-  ONE_WEEK: '7 days',
-  ONE_MONTH: '1 month',
-  THREE_MONTHS: '3 months',
-  SIX_MONTHS: '6 months',
-  ONE_YEAR: '12 months',
+  ONE_WEEK: msg`7 days`,
+  ONE_MONTH: msg`1 month`,
+  THREE_MONTHS: msg`3 months`,
+  SIX_MONTHS: msg`6 months`,
+  ONE_YEAR: msg`12 months`,
 } as const;

apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx

@@ -53,7 +53,7 @@ export default function DeleteTokenDialog({
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const deleteMessage = `delete ${token.name}`;
+  const deleteMessage = _(msg`delete ${token.name}`);
 
   const ZDeleteTokenDialogSchema = z.object({
     tokenName: z.literal(deleteMessage, {

apps/web/src/components/(dashboard)/settings/webhooks/delete-webhook-dialog.tsx

@@ -51,7 +51,7 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
 
   const [open, setOpen] = useState(false);
 
-  const deleteMessage = `delete ${webhook.webhookUrl}`;
+  const deleteMessage = _(msg`delete ${webhook.webhookUrl}`);
 
   const ZDeleteWebhookFormSchema = z.object({
     webhookUrl: z.literal(deleteMessage, {

apps/web/src/components/(teams)/dialogs/delete-team-dialog.tsx

@@ -47,7 +47,7 @@ export const DeleteTeamDialog = ({ trigger, teamId, teamName }: DeleteTeamDialog
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const deleteMessage = `delete ${teamName}`;
+  const deleteMessage = _(msg`delete ${teamName}`);
 
   const ZDeleteTeamFormSchema = z.object({
     teamName: z.literal(deleteMessage, {

apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx

@@ -73,7 +73,7 @@ export const TransferTeamDialog = ({
     teamId,
   });
 
-  const confirmTransferMessage = `transfer ${teamName}`;
+  const confirmTransferMessage = _(msg`transfer ${teamName}`);
 
   const ZTransferTeamFormSchema = z.object({
     teamName: z.literal(confirmTransferMessage, {

apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx

@@ -83,7 +83,7 @@ export const CurrentUserTeamsDataTable = () => {
         accessorKey: 'role',
         cell: ({ row }) =>
           row.original.ownerUserId === row.original.currentTeamMember.userId
-            ? 'Owner'
+            ? _(msg`Owner`)
             : _(TEAM_MEMBER_ROLE_MAP[row.original.currentTeamMember.role]),
       },
       {

apps/web/src/components/(teams)/tables/team-members-data-table.tsx

@@ -106,7 +106,7 @@ export const TeamMembersDataTable = ({
         accessorKey: 'role',
         cell: ({ row }) =>
           teamOwnerUserId === row.original.userId
-            ? 'Owner'
+            ? _(msg`Owner`)
             : _(TEAM_MEMBER_ROLE_MAP[row.original.role]),
       },
       {

apps/web/src/components/document/document-read-only-fields.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 
+import { useLingui } from '@lingui/react';
 import { EyeOffIcon } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
@@ -12,6 +13,7 @@ import {
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { DocumentMeta } from '@documenso/prisma/client';
 import { FieldType, SigningStatus } from '@documenso/prisma/client';
@@ -28,6 +30,8 @@ export type DocumentReadOnlyFieldsProps = {
 };
 
 export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnlyFieldsProps) => {
+  const { _ } = useLingui();
+
   const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
 
   const handleHideField = (fieldId: string) => {
@@ -59,7 +63,7 @@ export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnl
                 >
                   <p className="font-semibold">
                     {field.Recipient.signingStatus === SigningStatus.SIGNED ? 'Signed' : 'Pending'}{' '}
-                    {FRIENDLY_FIELD_TYPE[field.type].toLowerCase()} field
+                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type]).toLowerCase()} field
                   </p>
 
                   <p className="text-muted-foreground text-xs">
@@ -127,7 +131,7 @@ export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnl
                         field.type === FieldType.FREE_SIGNATURE,
                     })}
                   >
-                    {FRIENDLY_FIELD_TYPE[field.type]}
+                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
                   </p>
                 )}
               </div>

apps/web/src/components/forms/token.tsx

@@ -202,7 +202,7 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
                           <SelectContent>
                             {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
                               <SelectItem key={key} value={key}>
-                                {date}
+                                {_(date)}
                               </SelectItem>
                             ))}
                           </SelectContent>

apps/web/src/components/general/signing-disclosure.tsx

@@ -2,6 +2,8 @@ import type { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
+
 import { cn } from '@documenso/ui/lib/utils';
 
 export type SigningDisclosureProps = HTMLAttributes<HTMLParagraphElement>;
@@ -9,20 +11,24 @@ export type SigningDisclosureProps = HTMLAttributes<HTMLParagraphElement>;
 export const SigningDisclosure = ({ className, ...props }: SigningDisclosureProps) => {
   return (
     <p className={cn('text-muted-foreground text-xs', className)} {...props}>
-      By proceeding with your electronic signature, you acknowledge and consent that it will be used
-      to sign the given document and holds the same legal validity as a handwritten signature. By
-      completing the electronic signing process, you affirm your understanding and acceptance of
-      these conditions.
+      <Trans>
+        By proceeding with your electronic signature, you acknowledge and consent that it will be
+        used to sign the given document and holds the same legal validity as a handwritten
+        signature. By completing the electronic signing process, you affirm your understanding and
+        acceptance of these conditions.
+      </Trans>
       <span className="mt-2 block">
-        Read the full{' '}
-        <Link
-          className="text-documenso-700 underline"
-          href="/articles/signature-disclosure"
-          target="_blank"
-        >
-          signature disclosure
-        </Link>
-        .
+        <Trans>
+          Read the full{' '}
+          <Link
+            className="text-documenso-700 underline"
+            href="/articles/signature-disclosure"
+            target="_blank"
+          >
+            signature disclosure
+          </Link>
+          .
+        </Trans>
       </span>
     </p>
   );