feat: add envelopes (#2025)

This PR is handles the changes required to support envelopes. The new
envelope editor/signing page will be hidden during release.

The core changes here is to migrate the documents and templates model to
a centralized envelopes model.

Even though Documents and Templates are removed, from the user
perspective they will still exist as we remap envelopes to documents and
templates.

apps/remix/app/components/tables/admin-dashboard-users-table.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState, useTransition } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import type { Document, Role, Subscription } from '@prisma/client';
+import type { Role, Subscription } from '@prisma/client';
 import { Edit, Loader } from 'lucide-react';
 import { Link } from 'react-router';
 
@@ -20,7 +20,7 @@ type UserData = {
   email: string;
   roles: Role[];
   subscriptions?: SubscriptionLite[] | null;
-  documents: DocumentLite[];
+  documentCount: number;
 };
 
 type SubscriptionLite = Pick<
@@ -28,8 +28,6 @@ type SubscriptionLite = Pick<
   'id' | 'status' | 'planId' | 'priceId' | 'createdAt' | 'periodEnd'
 >;
 
-type DocumentLite = Pick<Document, 'id'>;
-
 type AdminDashboardUsersTableProps = {
   users: UserData[];
   totalPages: number;
@@ -74,10 +72,7 @@ export const AdminDashboardUsersTable = ({
       },
       {
         header: _(msg`Documents`),
-        accessorKey: 'documents',
-        cell: ({ row }) => {
-          return <div>{row.original.documents?.length}</div>;
-        },
+        accessorKey: 'documentCount',
       },
       {
         header: '',

apps/remix/app/components/tables/admin-document-jobs-table.tsx

@@ -0,0 +1,136 @@
+import { useMemo } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { useSearchParams } from 'react-router';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+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 { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+export const AdminDocumentJobsTable = ({ envelopeId }: { envelopeId: string }) => {
+  const { t, i18n } = useLingui();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
+
+  const { data, isLoading, isLoadingError, refetch, isFetching } =
+    trpc.admin.document.findJobs.useQuery({
+      envelopeId: envelopeId,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    });
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: t`Name`,
+        accessorKey: 'name',
+      },
+      {
+        header: t`Status`,
+        accessorKey: 'status',
+      },
+      {
+        header: t`Submitted`,
+        accessorKey: 'submittedAt',
+        cell: ({ row }) => i18n.date(row.original.submittedAt),
+      },
+      {
+        header: t`Retried`,
+        accessorKey: 'retried',
+      },
+      {
+        header: t`Last Retried`,
+        accessorKey: 'lastRetriedAt',
+        cell: ({ row }) =>
+          row.original.lastRetriedAt ? i18n.date(row.original.lastRetriedAt) : 'N/A',
+      },
+      {
+        header: t`Completed`,
+        accessorKey: 'completedAt',
+        cell: ({ row }) => (row.original.completedAt ? i18n.date(row.original.completedAt) : 'N/A'),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">
+          <Trans>Background Jobs</Trans>
+        </h2>
+
+        <Button variant="outline" size="sm" loading={isFetching} onClick={async () => refetch()}>
+          <Trans>Reload</Trans>
+        </Button>
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.totalPages}
+        onPaginationChange={onPaginationChange}
+        error={{
+          enable: isLoadingError,
+        }}
+        skeleton={{
+          enable: isLoading,
+          rows: 3,
+          component: (
+            <>
+              <TableCell className="py-4 pr-4">
+                <Skeleton className="h-4 w-20 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+            </>
+          ),
+        }}
+      >
+        {(table) =>
+          results.totalPages > 1 && (
+            <DataTablePagination additionalInformation="VisibleCount" table={table} />
+          )
+        }
+      </DataTable>
+    </div>
+  );
+};

apps/remix/app/components/tables/documents-table-action-button.tsx

@@ -40,7 +40,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const isCurrentTeamDocument = team && row.team?.url === team.url;
 
   const documentsPath = formatDocumentsPath(team.url);
-  const formatPath = `${documentsPath}/${row.id}/edit`;
+  const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
 
   const onDownloadClick = async () => {
     try {

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -72,7 +72,7 @@ export const DocumentsTableActionDropdown = ({
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team.url);
-  const formatPath = `${documentsPath}/${row.id}/edit`;
+  const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
 
   const onDownloadClick = async () => {
     try {
@@ -139,32 +139,35 @@ export const DocumentsTableActionDropdown = ({
           <Trans>Action</Trans>
         </DropdownMenuLabel>
 
-        {!isDraft && recipient && recipient?.role !== RecipientRole.CC && (
-          <DropdownMenuItem disabled={!recipient || isComplete} asChild>
-            <Link to={`/sign/${recipient?.token}`}>
-              {recipient?.role === RecipientRole.VIEWER && (
-                <>
-                  <EyeIcon className="mr-2 h-4 w-4" />
-                  <Trans>View</Trans>
-                </>
-              )}
+        {!isDraft &&
+          recipient &&
+          recipient?.role !== RecipientRole.CC &&
+          recipient?.role !== RecipientRole.ASSISTANT && (
+            <DropdownMenuItem disabled={!recipient || isComplete} asChild>
+              <Link to={`/sign/${recipient?.token}`}>
+                {recipient?.role === RecipientRole.VIEWER && (
+                  <>
+                    <EyeIcon className="mr-2 h-4 w-4" />
+                    <Trans>View</Trans>
+                  </>
+                )}
 
-              {recipient?.role === RecipientRole.SIGNER && (
-                <>
-                  <Pencil className="mr-2 h-4 w-4" />
-                  <Trans>Sign</Trans>
-                </>
-              )}
+                {recipient?.role === RecipientRole.SIGNER && (
+                  <>
+                    <Pencil className="mr-2 h-4 w-4" />
+                    <Trans>Sign</Trans>
+                  </>
+                )}
 
-              {recipient?.role === RecipientRole.APPROVER && (
-                <>
-                  <CheckCircle className="mr-2 h-4 w-4" />
-                  <Trans>Approve</Trans>
-                </>
-              )}
-            </Link>
-          </DropdownMenuItem>
-        )}
+                {recipient?.role === RecipientRole.APPROVER && (
+                  <>
+                    <CheckCircle className="mr-2 h-4 w-4" />
+                    <Trans>Approve</Trans>
+                  </>
+                )}
+              </Link>
+            </DropdownMenuItem>
+          )}
 
         <DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
           <Link to={formatPath}>

apps/remix/app/components/tables/documents-table-title.tsx

@@ -28,7 +28,7 @@ export const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
   })
     .with({ isOwner: true }, { isCurrentTeamDocument: true }, () => (
       <Link
-        to={`${documentsPath}/${row.id}`}
+        to={`${documentsPath}/${row.envelopeId}`}
         title={row.title}
         className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
       >

apps/remix/app/components/tables/documents-table.tsx

@@ -180,7 +180,7 @@ const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
   const isCurrentTeamDocument = teamUrl && row.team?.url === teamUrl;
 
   const documentsPath = formatDocumentsPath(teamUrl);
-  const formatPath = `${documentsPath}/${row.id}`;
+  const formatPath = `${documentsPath}/${row.envelopeId}`;
 
   return match({
     isOwner,

apps/remix/app/components/tables/settings-public-profile-templates-table.tsx

@@ -3,8 +3,7 @@ import { useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { TemplateDirectLink } from '@prisma/client';
-import { TemplateType } from '@prisma/client';
+import { type TemplateDirectLink, TemplateType } from '@prisma/client';
 import { EditIcon, FileIcon, LinkIcon, MoreHorizontalIcon, Trash2Icon } from 'lucide-react';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';

apps/remix/app/components/tables/templates-table-action-dropdown.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import type { Recipient, Template, TemplateDirectLink } from '@prisma/client';
+import type { Recipient, TemplateDirectLink } from '@prisma/client';
 import { Copy, Edit, FolderIcon, MoreHorizontal, Share2Icon, Trash2, Upload } from 'lucide-react';
 import { Link } from 'react-router';
 
@@ -21,7 +21,13 @@ import { TemplateDuplicateDialog } from '../dialogs/template-duplicate-dialog';
 import { TemplateMoveToFolderDialog } from '../dialogs/template-move-to-folder-dialog';
 
 export type TemplatesTableActionDropdownProps = {
-  row: Template & {
+  row: {
+    id: number;
+    userId: number;
+    teamId: number;
+    title: string;
+    folderId?: string | null;
+    envelopeId: string;
     directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
     recipients: Recipient[];
   };
@@ -39,14 +45,13 @@ export const TemplatesTableActionDropdown = ({
   const { user } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
   const [isMoveToFolderDialogOpen, setMoveToFolderDialogOpen] = useState(false);
 
   const isOwner = row.userId === user.id;
   const isTeamTemplate = row.teamId === teamId;
 
-  const formatPath = `${templateRootPath}/${row.id}/edit`;
+  const formatPath = `${templateRootPath}/${row.envelopeId}/edit`;
 
   return (
     <DropdownMenu>
@@ -72,10 +77,20 @@ export const TemplatesTableActionDropdown = ({
           <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
-        <DropdownMenuItem onClick={() => setTemplateDirectLinkDialogOpen(true)}>
-          <Share2Icon className="mr-2 h-4 w-4" />
-          <Trans>Direct link</Trans>
-        </DropdownMenuItem>
+        <TemplateDirectLinkDialog
+          templateId={row.id}
+          recipients={row.recipients}
+          directLink={row.directLink}
+          trigger={
+            <div
+              data-testid="template-direct-link"
+              className="hover:bg-accent hover:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors"
+            >
+              <Share2Icon className="mr-2 h-4 w-4" />
+              <Trans>Direct link</Trans>
+            </div>
+          }
+        />
 
         <DropdownMenuItem onClick={() => setMoveToFolderDialogOpen(true)}>
           <FolderIcon className="mr-2 h-4 w-4" />
@@ -108,12 +123,6 @@ export const TemplatesTableActionDropdown = ({
         onOpenChange={setDuplicateDialogOpen}
       />
 
-      <TemplateDirectLinkDialog
-        template={row}
-        open={isTemplateDirectLinkDialogOpen}
-        onOpenChange={setTemplateDirectLinkDialogOpen}
-      />
-
       <TemplateDeleteDialog
         id={row.id}
         open={isDeleteDialogOpen}

apps/remix/app/components/tables/templates-table.tsx

@@ -56,7 +56,7 @@ export const TemplatesTable = ({
   const formatTemplateLink = (row: TemplatesTableRow) => {
     const path = formatTemplatesPath(team.url);
 
-    return `${path}/${row.id}`;
+    return `${path}/${row.envelopeId}`;
   };
 
   const columns = useMemo(() => {