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/routes/_authenticated+/admin+/documents.$id.tsx

@@ -1,11 +1,11 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { SigningStatus } from '@prisma/client';
+import { EnvelopeType, SigningStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
 import { Link, redirect } from 'react-router';
 
-import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
+import { unsafeGetEntireEnvelope } from '@documenso/lib/server-only/admin/get-entire-document';
 import { trpc } from '@documenso/trpc/react';
 import {
   Accordion,
@@ -25,24 +25,31 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { AdminDocumentDeleteDialog } from '~/components/dialogs/admin-document-delete-dialog';
 import { DocumentStatus } from '~/components/general/document/document-status';
+import { AdminDocumentJobsTable } from '~/components/tables/admin-document-jobs-table';
 import { AdminDocumentRecipientItemTable } from '~/components/tables/admin-document-recipient-item-table';
 
 import type { Route } from './+types/documents.$id';
 
 export async function loader({ params }: Route.LoaderArgs) {
-  const id = Number(params.id);
+  const id = params.id;
 
-  if (isNaN(id)) {
+  if (!id || !id.startsWith('envelope_')) {
     throw redirect('/admin/documents');
   }
 
-  const document = await getEntireDocument({ id });
+  const envelope = await unsafeGetEntireEnvelope({
+    id: {
+      type: 'envelopeId',
+      id,
+    },
+    type: EnvelopeType.DOCUMENT,
+  });
 
-  return { document };
+  return { envelope };
 }
 
 export default function AdminDocumentDetailsPage({ loaderData }: Route.ComponentProps) {
-  const { document } = loaderData;
+  const { envelope } = loaderData;
 
   const { _, i18n } = useLingui();
   const { toast } = useToast();
@@ -51,8 +58,8 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
     trpc.admin.document.reseal.useMutation({
       onSuccess: () => {
         toast({
-          title: _(msg`Success`),
-          description: _(msg`Document resealed`),
+          title: _(msg`Sealing job started`),
+          description: _(msg`See the background jobs tab for the status`),
         });
       },
       onError: () => {
@@ -68,11 +75,11 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
     <div>
       <div className="flex items-start justify-between">
         <div className="flex items-center gap-x-4">
-          <h1 className="text-2xl font-semibold">{document.title}</h1>
-          <DocumentStatus status={document.status} />
+          <h1 className="text-2xl font-semibold">{envelope.title}</h1>
+          <DocumentStatus status={envelope.status} />
         </div>
 
-        {document.deletedAt && (
+        {envelope.deletedAt && (
           <Badge size="large" variant="destructive">
             <Trans>Deleted</Trans>
           </Badge>
@@ -81,11 +88,11 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
 
       <div className="text-muted-foreground mt-4 text-sm">
         <div>
-          <Trans>Created on</Trans>: {i18n.date(document.createdAt, DateTime.DATETIME_MED)}
+          <Trans>Created on</Trans>: {i18n.date(envelope.createdAt, DateTime.DATETIME_MED)}
         </div>
 
         <div>
-          <Trans>Last updated at</Trans>: {i18n.date(document.updatedAt, DateTime.DATETIME_MED)}
+          <Trans>Last updated at</Trans>: {i18n.date(envelope.updatedAt, DateTime.DATETIME_MED)}
         </div>
       </div>
 
@@ -102,12 +109,12 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
               <Button
                 variant="outline"
                 loading={isResealDocumentLoading}
-                disabled={document.recipients.some(
+                disabled={envelope.recipients.some(
                   (recipient) =>
                     recipient.signingStatus !== SigningStatus.SIGNED &&
                     recipient.signingStatus !== SigningStatus.REJECTED,
                 )}
-                onClick={() => resealDocument({ id: document.id })}
+                onClick={() => resealDocument({ id: envelope.id })}
               >
                 <Trans>Reseal document</Trans>
               </Button>
@@ -123,7 +130,7 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
         </TooltipProvider>
 
         <Button variant="outline" asChild>
-          <Link to={`/admin/users/${document.userId}`}>
+          <Link to={`/admin/users/${envelope.userId}`}>
             <Trans>Go to owner</Trans>
           </Link>
         </Button>
@@ -136,7 +143,7 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
 
       <div className="mt-4">
         <Accordion type="multiple" className="space-y-4">
-          {document.recipients.map((recipient) => (
+          {envelope.recipients.map((recipient) => (
             <AccordionItem
               key={recipient.id}
               value={recipient.id.toString()}
@@ -161,7 +168,13 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
 
       <hr className="my-4" />
 
-      {document && <AdminDocumentDeleteDialog document={document} />}
+      <div className="mt-4">
+        <AdminDocumentJobsTable envelopeId={envelope.id} />
+      </div>
+
+      <hr className="my-4" />
+
+      {envelope && <AdminDocumentDeleteDialog envelopeId={envelope.id} />}
     </div>
   );
 }

apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx

@@ -64,7 +64,7 @@ export default function AdminDocumentsPage() {
         cell: ({ row }) => {
           return (
             <Link
-              to={`/admin/documents/${row.original.id}`}
+              to={`/admin/documents/${row.original.envelopeId}`}
               className="block max-w-[5rem] truncate font-medium hover:underline md:max-w-[10rem]"
             >
               {row.original.title}