fix: mark document visibility options for translation (#2330)

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -341,7 +341,9 @@ export const EnvelopeEditorSettingsDialog = ({
         {/* Sidebar. */}
         <div className="flex w-80 flex-col border-r bg-accent/20">
           <DialogHeader className="p-6 pb-4">
-            <DialogTitle>Document Settings</DialogTitle>
+            <DialogTitle>
+              <Trans>Document Settings</Trans>
+            </DialogTitle>
           </DialogHeader>
 
           <nav className="col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 px-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2">

packages/lib/constants/document-visibility.ts

@@ -1,23 +1,26 @@
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 
 import type { TDocumentVisibility } from '../types/document-visibility';
 
 type DocumentVisibilityTypeData = {
   key: TDocumentVisibility;
-  value: string;
+  value: MessageDescriptor;
 };
 
 export const DOCUMENT_VISIBILITY: Record<string, DocumentVisibilityTypeData> = {
   [DocumentVisibility.ADMIN]: {
     key: DocumentVisibility.ADMIN,
-    value: 'Admins only',
+    value: msg`Admins only`,
   },
   [DocumentVisibility.EVERYONE]: {
     key: DocumentVisibility.EVERYONE,
-    value: 'Everyone',
+    value: msg`Everyone`,
   },
   [DocumentVisibility.MANAGER_AND_ABOVE]: {
     key: DocumentVisibility.MANAGER_AND_ABOVE,
-    value: 'Managers and above',
+    value: msg`Managers and above`,
   },
 } satisfies Record<TDocumentVisibility, DocumentVisibilityTypeData>;

packages/ui/components/document/document-visibility-select.tsx

@@ -1,6 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Trans, useLingui } from '@lingui/react/macro';
+import { t } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { TeamMemberRole } from '@prisma/client';
 import type { SelectProps } from '@radix-ui/react-select';
 import { InfoIcon } from 'lucide-react';
@@ -28,7 +30,7 @@ export const DocumentVisibilitySelect = forwardRef<HTMLButtonElement, DocumentVi
     { currentTeamMemberRole, isTeamSettings = false, disabled, canUpdateVisibility, ...props },
     ref,
   ) => {
-    const { t } = useLingui();
+    const { _ } = useLingui();
 
     const isAdmin = currentTeamMemberRole === TeamMemberRole.ADMIN;
     const isManager = currentTeamMemberRole === TeamMemberRole.MANAGER;
@@ -42,16 +44,16 @@ export const DocumentVisibilitySelect = forwardRef<HTMLButtonElement, DocumentVi
 
         <SelectContent position="popper">
           <SelectItem value={DocumentVisibility.EVERYONE}>
-            {DOCUMENT_VISIBILITY.EVERYONE.value}
+            {_(DOCUMENT_VISIBILITY.EVERYONE.value)}
           </SelectItem>
           <SelectItem
             value={DocumentVisibility.MANAGER_AND_ABOVE}
             disabled={!isAdmin && !isManager}
           >
-            {DOCUMENT_VISIBILITY.MANAGER_AND_ABOVE.value}
+            {_(DOCUMENT_VISIBILITY.MANAGER_AND_ABOVE.value)}
           </SelectItem>
           <SelectItem value={DocumentVisibility.ADMIN} disabled={!isAdmin}>
-            {DOCUMENT_VISIBILITY.ADMIN.value}
+            {_(DOCUMENT_VISIBILITY.ADMIN.value)}
           </SelectItem>
         </SelectContent>
       </Select>