Merge branch 'main' into feat/typedsql

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+packages/prisma/generated/types.ts
+
 # dependencies
 node_modules
 .pnp

apps/marketing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/marketing",
-  "version": "1.6.1-rc.1",
+  "version": "1.7.0-rc.1",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -20,7 +20,6 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
-    "@lingui/macro": "^4.11.1",
     "@lingui/react": "^4.11.1",
     "@openstatus/react": "^0.0.3",
     "cmdk": "^0.2.1",

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -5,6 +5,8 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { base64 } from '@documenso/lib/universal/base64';
@@ -46,8 +48,8 @@ export const SinglePlayerClient = () => {
 
   const documentFlow: Record<SinglePlayerModeStep, DocumentFlowStep> = {
     fields: {
-      title: 'Add document',
-      description: 'Upload a document and add fields.',
+      title: msg`Add document`,
+      description: msg`Upload a document and add fields.`,
       stepIndex: 1,
       onBackStep: uploadedFile
         ? () => {
@@ -58,8 +60,8 @@ export const SinglePlayerClient = () => {
       onNextStep: () => setStep('sign'),
     },
     sign: {
-      title: 'Sign',
-      description: 'Enter your details.',
+      title: msg`Sign`,
+      description: msg`Enter your details.`,
       stepIndex: 2,
       onBackStep: () => setStep('fields'),
     },

apps/web/lingui.config.ts

@@ -8,7 +8,7 @@ const config: LinguiConfig = {
   locales: APP_I18N_OPTIONS.supportedLangs as unknown as string[],
   catalogs: [
     {
-      path: '<rootDir>/../../packages/lib/translations/web/{locale}',
+      path: '<rootDir>/../../packages/lib/translations/{locale}/web',
       include: ['<rootDir>/apps/web/src'],
     },
     {

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.6.1-rc.1",
+  "version": "1.7.0-rc.1",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -23,7 +23,6 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
-    "@lingui/macro": "^4.11.1",
     "@lingui/react": "^4.11.1",
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
@@ -60,9 +59,9 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@documenso/tailwind-config": "*",
     "@lingui/loader": "^4.11.1",
     "@lingui/swc-plugin": "4.0.6",
-    "@documenso/tailwind-config": "*",
     "@simplewebauthn/types": "^9.0.1",
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",

apps/web/src/app/(dashboard)/admin/documents/[id]/admin-actions.tsx

@@ -2,6 +2,9 @@
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { Recipient } from '@documenso/prisma/client';
 import { type Document, SigningStatus } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@@ -22,20 +25,21 @@ export type AdminActionsProps = {
 };
 
 export const AdminActions = ({ className, document, recipients }: AdminActionsProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutate: resealDocument, isLoading: isResealDocumentLoading } =
     trpc.admin.resealDocument.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
-          description: 'Document resealed',
+          title: _(msg`Success`),
+          description: _(msg`Document resealed`),
         });
       },
       onError: () => {
         toast({
-          title: 'Error',
-          description: 'Failed to reseal document',
+          title: _(msg`Error`),
+          description: _(msg`Failed to reseal document`),
           variant: 'destructive',
         });
       },
@@ -54,19 +58,23 @@ export const AdminActions = ({ className, document, recipients }: AdminActionsPr
               )}
               onClick={() => resealDocument({ id: document.id })}
             >
-              Reseal document
+              <Trans>Reseal document</Trans>
             </Button>
           </TooltipTrigger>
 
           <TooltipContent className="max-w-[40ch]">
-            Attempts sealing the document again, useful for after a code change has occurred to
-            resolve an erroneous document.
+            <Trans>
+              Attempts sealing the document again, useful for after a code change has occurred to
+              resolve an erroneous document.
+            </Trans>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
 
       <Button variant="outline" asChild>
-        <Link href={`/admin/users/${document.userId}`}>Go to owner</Link>
+        <Link href={`/admin/users/${document.userId}`}>
+          <Trans>Go to owner</Trans>
+        </Link>
       </Button>
     </div>
   );

apps/web/src/app/(dashboard)/admin/documents/[id]/page.tsx

@@ -1,5 +1,7 @@
+import { Trans } from '@lingui/macro';
 import { DateTime } from 'luxon';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import {
   Accordion,
@@ -23,6 +25,8 @@ type AdminDocumentDetailsPageProps = {
 };
 
 export default async function AdminDocumentDetailsPage({ params }: AdminDocumentDetailsPageProps) {
+  setupI18nSSR();
+
   const document = await getEntireDocument({ id: Number(params.id) });
 
   return (
@@ -35,28 +39,34 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
 
         {document.deletedAt && (
           <Badge size="large" variant="destructive">
-            Deleted
+            <Trans>Deleted</Trans>
           </Badge>
         )}
       </div>
 
       <div className="text-muted-foreground mt-4 text-sm">
         <div>
-          Created on: <LocaleDate date={document.createdAt} format={DateTime.DATETIME_MED} />
+          <Trans>Created on</Trans>:{' '}
+          <LocaleDate date={document.createdAt} format={DateTime.DATETIME_MED} />
         </div>
         <div>
-          Last updated at: <LocaleDate date={document.updatedAt} format={DateTime.DATETIME_MED} />
+          <Trans>Last updated at</Trans>:{' '}
+          <LocaleDate date={document.updatedAt} format={DateTime.DATETIME_MED} />
         </div>
       </div>
 
       <hr className="my-4" />
 
-      <h2 className="text-lg font-semibold">Admin Actions</h2>
+      <h2 className="text-lg font-semibold">
+        <Trans>Admin Actions</Trans>
+      </h2>
 
       <AdminActions className="mt-2" document={document} recipients={document.Recipient} />
 
       <hr className="my-4" />
-      <h2 className="text-lg font-semibold">Recipients</h2>
+      <h2 className="text-lg font-semibold">
+        <Trans>Recipients</Trans>
+      </h2>
 
       <div className="mt-4">
         <Accordion type="multiple" className="space-y-4">

apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx

@@ -1,7 +1,11 @@
 'use client';
 
+import { useMemo } from 'react';
+
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -13,6 +17,7 @@ import {
 } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import {
   Form,
@@ -43,7 +48,9 @@ export type RecipientItemProps = {
 };
 
 export const RecipientItem = ({ recipient }: RecipientItemProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
+
   const router = useRouter();
 
   const form = useForm<TAdminUpdateRecipientFormSchema>({
@@ -55,6 +62,50 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
 
   const { mutateAsync: updateRecipient } = trpc.admin.updateRecipient.useMutation();
 
+  const columns = useMemo(() => {
+    return [
+      {
+        header: 'ID',
+        accessorKey: 'id',
+        cell: ({ row }) => <div>{row.original.id}</div>,
+      },
+      {
+        header: _(msg`Type`),
+        accessorKey: 'type',
+        cell: ({ row }) => <div>{row.original.type}</div>,
+      },
+      {
+        header: _(msg`Inserted`),
+        accessorKey: 'inserted',
+        cell: ({ row }) => <div>{row.original.inserted ? 'True' : 'False'}</div>,
+      },
+      {
+        header: _(msg`Value`),
+        accessorKey: 'customText',
+        cell: ({ row }) => <div>{row.original.customText}</div>,
+      },
+      {
+        header: _(msg`Signature`),
+        accessorKey: 'signature',
+        cell: ({ row }) => (
+          <div>
+            {row.original.Signature?.typedSignature && (
+              <span>{row.original.Signature.typedSignature}</span>
+            )}
+
+            {row.original.Signature?.signatureImageAsBase64 && (
+              <img
+                src={row.original.Signature.signatureImageAsBase64}
+                alt="Signature"
+                className="h-12 w-full dark:invert"
+              />
+            )}
+          </div>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof recipient)['Field'][number]>[];
+  }, []);
+
   const onUpdateRecipientFormSubmit = async ({ name, email }: TAdminUpdateRecipientFormSchema) => {
     try {
       await updateRecipient({
@@ -64,14 +115,14 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
       });
 
       toast({
-        title: 'Recipient updated',
-        description: 'The recipient has been updated successfully',
+        title: _(msg`Recipient updated`),
+        description: _(msg`The recipient has been updated successfully`),
       });
 
       router.refresh();
     } catch (error) {
       toast({
-        title: 'Failed to update recipient',
+        title: _(msg`Failed to update recipient`),
         description: error.message,
         variant: 'destructive',
       });
@@ -93,7 +144,9 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
               name="name"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel required>Name</FormLabel>
+                  <FormLabel required>
+                    <Trans>Name</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Input {...field} />
@@ -109,7 +162,9 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
               name="email"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel required>Email</FormLabel>
+                  <FormLabel required>
+                    <Trans>Email</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Input type="email" {...field} />
@@ -122,7 +177,7 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
 
             <div>
               <Button type="submit" loading={form.formState.isSubmitting}>
-                Update Recipient
+                <Trans>Update Recipient</Trans>
               </Button>
             </div>
           </fieldset>
@@ -131,52 +186,11 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
 
       <hr className="my-4" />
 
-      <h2 className="mb-4 text-lg font-semibold">Fields</h2>
-
-      <DataTable
-        data={recipient.Field}
-        columns={[
-          {
-            header: 'ID',
-            accessorKey: 'id',
-            cell: ({ row }) => <div>{row.original.id}</div>,
-          },
-          {
-            header: 'Type',
-            accessorKey: 'type',
-            cell: ({ row }) => <div>{row.original.type}</div>,
-          },
-          {
-            header: 'Inserted',
-            accessorKey: 'inserted',
-            cell: ({ row }) => <div>{row.original.inserted ? 'True' : 'False'}</div>,
-          },
-          {
-            header: 'Value',
-            accessorKey: 'customText',
-            cell: ({ row }) => <div>{row.original.customText}</div>,
-          },
-          {
-            header: 'Signature',
-            accessorKey: 'signature',
-            cell: ({ row }) => (
-              <div>
-                {row.original.Signature?.typedSignature && (
-                  <span>{row.original.Signature.typedSignature}</span>
-                )}
-
-                {row.original.Signature?.signatureImageAsBase64 && (
-                  <img
-                    src={row.original.Signature.signatureImageAsBase64}
-                    alt="Signature"
-                    className="h-12 w-full dark:invert"
-                  />
-                )}
-              </div>
-            ),
-          },
-        ]}
-      />
+      <h2 className="mb-4 text-lg font-semibold">
+        <Trans>Fields</Trans>
+      </h2>
+
+      <DataTable columns={columns} data={recipient.Field} />
     </div>
   );
 };