fix(i18n): add pluralization to ai features (#2301)

apps/remix/app/components/dialogs/ai-field-detection-dialog.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
+import { Plural, Trans } from '@lingui/react/macro';
 import { CheckIcon, FormInputIcon, ShieldCheckIcon } from 'lucide-react';
 
 import type { NormalizedFieldWithContext } from '@documenso/lib/server-only/ai/envelope/detect-fields/types';
@@ -232,10 +232,19 @@ export const AiFieldDetectionDialog = ({
 
               {progress && (
                 <p className="mt-2 text-xs text-muted-foreground/60">
-                  <Trans>
-                    Page {progress.pagesProcessed} of {progress.totalPages} -{' '}
-                    {progress.fieldsDetected} field(s) found
-                  </Trans>
+                  <Plural
+                    value={progress.fieldsDetected}
+                    one={
+                      <Trans>
+                        Page {progress.pagesProcessed} of {progress.totalPages} - # field found
+                      </Trans>
+                    }
+                    other={
+                      <Trans>
+                        Page {progress.pagesProcessed} of {progress.totalPages} - # fields found
+                      </Trans>
+                    }
+                  />
                 </p>
               )}
 
@@ -279,7 +288,11 @@ export const AiFieldDetectionDialog = ({
               ) : (
                 <>
                   <p className="text-sm text-muted-foreground">
-                    <Trans>We found {detectedFields.length} field(s) in your document.</Trans>
+                    <Plural
+                      value={detectedFields.length}
+                      one="We found # field in your document."
+                      other="We found # fields in your document."
+                    />
                   </p>
 
                   <ul className="mt-4 divide-y rounded-lg border">

apps/remix/app/components/dialogs/ai-recipient-detection-dialog.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
+import { Plural, Trans } from '@lingui/react/macro';
 import { CheckIcon, ShieldCheckIcon, UserIcon, XIcon } from 'lucide-react';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
@@ -190,10 +190,19 @@ export const AiRecipientDetectionDialog = ({
 
               {progress && (
                 <p className="mt-2 text-xs text-muted-foreground/60">
-                  <Trans>
-                    Page {progress.pagesProcessed} of {progress.totalPages} -{' '}
-                    {progress.recipientsDetected} recipient(s) found
-                  </Trans>
+                  <Plural
+                    value={progress.recipientsDetected}
+                    one={
+                      <Trans>
+                        Page {progress.pagesProcessed} of {progress.totalPages} - # recipient found
+                      </Trans>
+                    }
+                    other={
+                      <Trans>
+                        Page {progress.pagesProcessed} of {progress.totalPages} - # recipients found
+                      </Trans>
+                    }
+                  />
                 </p>
               )}
 
@@ -237,9 +246,11 @@ export const AiRecipientDetectionDialog = ({
               ) : (
                 <>
                   <p className="text-sm text-muted-foreground">
-                    <Trans>
-                      We found {detectedRecipients.length} recipient(s) in your document.
-                    </Trans>
+                    <Plural
+                      value={detectedRecipients.length}
+                      one="We found # recipient in your document."
+                      other="We found # recipients in your document."
+                    />
                   </p>
 
                   <ul className="mt-4 divide-y rounded-lg border">

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -8,6 +8,7 @@ import {
   type SensorAPI,
 } from '@hello-pangea/dnd';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { plural } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentSigningOrder, EnvelopeType, RecipientRole, SendStatus } from '@prisma/client';
 import { motion } from 'framer-motion';
@@ -329,8 +330,14 @@ export const EnvelopeEditorRecipientForm = () => {
     });
 
     toast({
-      title: t`Recipients added`,
-      description: t`${detectedRecipients.length} recipient(s) have been added from AI detection.`,
+      title: plural(detectedRecipients.length, {
+        one: `Recipient added`,
+        other: `Recipients added`,
+      }),
+      description: plural(detectedRecipients.length, {
+        one: `# recipient have been added from AI detection.`,
+        other: `# recipients have been added from AI detection.`,
+      }),
     });
   };