feat: web i18n (#1286)

packages/ui/components/document/document-send-email-message-helper.tsx

@@ -2,11 +2,13 @@
 
 import React from 'react';
 
+import { Trans } from '@lingui/macro';
+
 export const DocumentSendEmailMessageHelper = () => {
   return (
     <div>
       <p className="text-muted-foreground text-sm">
-        You can use the following variables in your message:
+        <Trans>You can use the following variables in your message:</Trans>
       </p>
 
       <ul className="mt-2 flex list-inside list-disc flex-col gap-y-2 text-sm">
@@ -14,19 +16,19 @@ export const DocumentSendEmailMessageHelper = () => {
           <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
             {'{signer.name}'}
           </code>{' '}
-          - The signer's name
+          - <Trans>The signer's name</Trans>
         </li>
         <li className="text-muted-foreground">
           <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
             {'{signer.email}'}
           </code>{' '}
-          - The signer's email
+          - <Trans>The signer's email</Trans>
         </li>
         <li className="text-muted-foreground">
           <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
             {'{document.name}'}
           </code>{' '}
-          - The document's name
+          - <Trans>The document's name</Trans>
         </li>
       </ul>
     </div>