fix(i18n): mark supported languages for translation (#2377)

apps/remix/app/components/embed/authoring/configure-document-advanced-settings.tsx

@@ -1,4 +1,6 @@
-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 { DocumentDistributionMethod } from '@prisma/client';
 import { InfoIcon } from 'lucide-react';
 import type { Control } from 'react-hook-form';
@@ -44,7 +46,7 @@ export const ConfigureDocumentAdvancedSettings = ({
   control,
   isSubmitting,
 }: ConfigureDocumentAdvancedSettingsProps) => {
-  const { t } = useLingui();
+  const { _ } = useLingui();
 
   const form = useFormContext<TConfigureEmbedFormSchema>();
   const { features } = useConfigureDocument();
@@ -93,7 +95,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                     <FormControl>
                       <MultiSelectCombobox
                         options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
-                          label: t(option.label),
+                          label: _(option.label),
                           value: option.value,
                         }))}
                         selectedValues={field.value}
@@ -125,7 +127,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                         <SelectContent>
                           {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
                             <SelectItem key={code} value={code}>
-                              {language.full}
+                              {_(language.full)}
                             </SelectItem>
                           ))}
                         </SelectContent>

apps/remix/app/components/forms/document-preferences-form.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react/macro';
+import { msg, t } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { TeamGlobalSettings } from '@prisma/client';
 import { DocumentVisibility, OrganisationType, type RecipientRole } from '@prisma/client';
@@ -109,7 +109,7 @@ export const DocumentPreferencesForm = ({
   canInherit,
   isAiFeaturesConfigured = false,
 }: DocumentPreferencesFormProps) => {
-  const { t } = useLingui();
+  const { _ } = useLingui();
   const { user, organisations } = useSession();
   const currentOrganisation = useCurrentOrganisation();
   const optionalTeam = useOptionalCurrentTeam();
@@ -242,7 +242,7 @@ export const DocumentPreferencesForm = ({
                     <SelectContent>
                       {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
                         <SelectItem key={code} value={code}>
-                          {language.full}
+                          {_(language.full)}
                         </SelectItem>
                       ))}
 
@@ -342,7 +342,7 @@ export const DocumentPreferencesForm = ({
                 <FormControl>
                   <MultiSelectCombobox
                     options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
-                      label: t(option.label),
+                      label: _(option.label),
                       value: option.value,
                     }))}
                     selectedValues={field.value}

apps/remix/app/components/general/app-command-menu.tsx

@@ -256,10 +256,10 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
 
             <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Preferences`)}>
               <CommandItem className="-mx-2 -my-1 rounded-lg" onSelect={() => addPage('language')}>
-                Change language
+                {_(msg`Change language`)}
               </CommandItem>
               <CommandItem className="-mx-2 -my-1 rounded-lg" onSelect={() => addPage('theme')}>
-                Change theme
+                {_(msg`Change theme`)}
               </CommandItem>
             </CommandGroup>
 
@@ -367,15 +367,14 @@ const LanguageCommands = () => {
   return Object.values(SUPPORTED_LANGUAGES).map((language) => (
     <CommandItem
       disabled={isLoading}
-      key={language.full}
+      key={language.short}
       onSelect={async () => setLanguage(language.short)}
       className="-my-1 mx-2 rounded-lg first:mt-2 last:mb-2"
     >
       <CheckIcon
         className={cn('mr-2 h-4 w-4', i18n.locale === language.short ? 'opacity-100' : 'opacity-0')}
       />
-
-      {language.full}
+      {_(language.full)}
     </CommandItem>
   ));
 };

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

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { msg, t } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import {
   DocumentDistributionMethod,
   DocumentVisibility,
@@ -154,13 +155,13 @@ const tabs = [
     id: 'email',
     title: msg`Email`,
     icon: MailIcon,
-    description: msg`Configure email settings for the document`,
+    description: msg`Configure email settings for the document.`,
   },
   {
     id: 'security',
     title: msg`Security`,
     icon: ShieldIcon,
-    description: msg`Configure security settings for the document`,
+    description: msg`Configure security settings for the document.`,
   },
 ] as const;
 
@@ -174,7 +175,7 @@ export const EnvelopeEditorSettingsDialog = ({
   trigger,
   ...props
 }: EnvelopeEditorSettingsDialogProps) => {
-  const { t, i18n } = useLingui();
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { envelope, updateEnvelopeAsync } = useCurrentEnvelopeEditor();
@@ -363,7 +364,7 @@ export const EnvelopeEditorSettingsDialog = ({
                 })}
               >
                 <tab.icon className="mr-2 h-5 w-5" />
-                {t(tab.title)}
+                {_(tab.title)}
               </Button>
             ))}
           </nav>
@@ -372,8 +373,8 @@ export const EnvelopeEditorSettingsDialog = ({
         {/* Content. */}
         <div className="flex w-full flex-col">
           <CardHeader className="border-b pb-4">
-            <CardTitle>{t(selectedTab?.title ?? '')}</CardTitle>
-            <CardDescription>{t(selectedTab?.description ?? '')}</CardDescription>
+            <CardTitle>{selectedTab ? _(selectedTab.title) : ''}</CardTitle>
+            <CardDescription>{selectedTab ? _(selectedTab.description) : ''}</CardDescription>
           </CardHeader>
 
           <Form {...form}>
@@ -421,7 +422,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                 <SelectContent>
                                   {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
                                     <SelectItem key={code} value={code}>
-                                      {language.full}
+                                      {_(language.full)}
                                     </SelectItem>
                                   ))}
                                 </SelectContent>
@@ -444,7 +445,7 @@ export const EnvelopeEditorSettingsDialog = ({
                             <FormControl>
                               <MultiSelectCombobox
                                 options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
-                                  label: t(option.label),
+                                  label: _(option.label),
                                   value: option.value,
                                 }))}
                                 selectedValues={field.value}
@@ -632,7 +633,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                   {Object.values(DOCUMENT_DISTRIBUTION_METHODS).map(
                                     ({ value, description }) => (
                                       <SelectItem key={value} value={value}>
-                                        {i18n._(description)}
+                                        {_(description)}
                                       </SelectItem>
                                     ),
                                   )}