Merge branch 'main' into feat/visible-fields

2025-11-13 00:03:33 +10:00 · 2024-04-19 17:54:32 +07:00
parent 6526377f1b fceb0eaac9
commit a97ffa97a4
32 changed files with 779 additions and 262 deletions
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-dropdown.tsx
@ -19,7 +19,7 @@ import { useSession } from 'next-auth/react';
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentStatus } from '@documenso/prisma/client';
-import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+import type { Document, Recipient, Team, TeamEmail, User } from '@documenso/prisma/client';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
@ -41,7 +41,7 @@ export type DocumentPageViewDropdownProps = {
    Recipient: Recipient[];
    team: Pick<Team, 'id' | 'url'> | null;
  };
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail: TeamEmail | null };
 };

 export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDropdownProps) => {
@ -59,9 +59,10 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro

  const isOwner = document.User.id === session.user.id;
  const isDraft = document.status === DocumentStatus.DRAFT;
+  const isDeleted = document.deletedAt !== null;
  const isComplete = document.status === DocumentStatus.COMPLETED;
-  const isDocumentDeletable = isOwner;
  const isCurrentTeamDocument = team && document.team?.url === team.url;
+  const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);

  const documentsPath = formatDocumentsPath(team?.url);

@ -127,7 +128,10 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
          Duplicate
        </DropdownMenuItem>

-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+        <DropdownMenuItem
+          onClick={() => setDeleteDialogOpen(true)}
+          disabled={Boolean(!canManageDocument && team?.teamEmail) || isDeleted}
+        >
          <Trash2 className="mr-2 h-4 w-4" />
          Delete
        </DropdownMenuItem>
@ -154,15 +158,15 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
        />
      </DropdownMenuContent>

-      {isDocumentDeletable && (
-        <DeleteDocumentDialog
-          id={document.id}
-          status={document.status}
-          documentTitle={document.title}
-          open={isDeleteDialogOpen}
-          onOpenChange={setDeleteDialogOpen}
-        />
-      )}
+      <DeleteDocumentDialog
+        id={document.id}
+        status={document.status}
+        documentTitle={document.title}
+        open={isDeleteDialogOpen}
+        canManageDocument={canManageDocument}
+        onOpenChange={setDeleteDialogOpen}
+      />
+
      {isDuplicateDialogOpen && (
        <DuplicateDocumentDialog
          id={document.id}
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
@ -13,7 +13,8 @@ import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/g
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentStatus } from '@documenso/prisma/client';
-import type { Team } from '@documenso/prisma/client';
+import type { Team, TeamEmail } from '@documenso/prisma/client';
+import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
@ -36,7 +37,7 @@ export type DocumentPageViewProps = {
  params: {
    id: string;
  };
-  team?: Team;
+  team?: Team & { teamEmail: TeamEmail | null };
 };

 export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
@ -125,11 +126,17 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
              <div className="text-muted-foreground flex items-center">
                <Users2 className="mr-2 h-5 w-5" />

-                <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+                <StackAvatarsWithTooltip
+                  recipients={recipients}
+                  documentStatus={document.status}
+                  position="bottom"
+                >
                  <span>{recipients.length} Recipient(s)</span>
                </StackAvatarsWithTooltip>
              </div>
            )}
+
+            {document.deletedAt && <Badge variant="destructive">Document deleted</Badge>}
          </div>
        </div>

--- a/apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx
@ -92,7 +92,11 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
          <div className="text-muted-foreground flex items-center">
            <Users2 className="mr-2 h-5 w-5" />

-            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+            <StackAvatarsWithTooltip
+              recipients={recipients}
+              documentStatus={document.status}
+              position="bottom"
+            >
              <span>{recipients.length} Recipient(s)</span>
            </StackAvatarsWithTooltip>
          </div>
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
@ -15,7 +15,6 @@ import {
  Pencil,
  Share,
  Trash2,
-  XCircle,
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';

@ -45,7 +44,7 @@ export type DataTableActionDropdownProps = {
    Recipient: Recipient[];
    team: Pick<Team, 'id' | 'url'> | null;
  };
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
 };

 export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownProps) => {
@ -67,8 +66,8 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
  // const isPending = row.status === DocumentStatus.PENDING;
  const isComplete = row.status === DocumentStatus.COMPLETED;
  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-  const isDocumentDeletable = isOwner;
  const isCurrentTeamDocument = team && row.team?.url === team.url;
+  const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);

  const documentsPath = formatDocumentsPath(team?.url);

@ -107,14 +106,14 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr

  return (
    <DropdownMenu>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger data-testid="document-table-action-btn">
        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
      </DropdownMenuTrigger>

      <DropdownMenuContent className="w-52" align="start" forceMount>
        <DropdownMenuLabel>Action</DropdownMenuLabel>

-        {recipient && recipient?.role !== RecipientRole.CC && (
+        {!isDraft && recipient && recipient?.role !== RecipientRole.CC && (
          <DropdownMenuItem disabled={!recipient || isComplete} asChild>
            <Link href={`/sign/${recipient?.token}`}>
              {recipient?.role === RecipientRole.VIEWER && (
@ -141,7 +140,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
          </DropdownMenuItem>
        )}

-        <DropdownMenuItem disabled={(!isOwner && !isCurrentTeamDocument) || isComplete} asChild>
+        <DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
          <Link href={`${documentsPath}/${row.id}/edit`}>
            <Edit className="mr-2 h-4 w-4" />
            Edit
@ -158,14 +157,18 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
          Duplicate
        </DropdownMenuItem>

-        <DropdownMenuItem disabled>
+        {/* No point displaying this if there's no functionality. */}
+        {/* <DropdownMenuItem disabled>
          <XCircle className="mr-2 h-4 w-4" />
          Void
-        </DropdownMenuItem>
+        </DropdownMenuItem> */}

-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+        <DropdownMenuItem
+          onClick={() => setDeleteDialogOpen(true)}
+          disabled={Boolean(!canManageDocument && team?.teamEmail)}
+        >
          <Trash2 className="mr-2 h-4 w-4" />
-          Delete
+          {canManageDocument ? 'Delete' : 'Hide'}
        </DropdownMenuItem>

        <DropdownMenuLabel>Share</DropdownMenuLabel>
@ -186,16 +189,16 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
        />
      </DropdownMenuContent>

-      {isDocumentDeletable && (
-        <DeleteDocumentDialog
-          id={row.id}
-          status={row.status}
-          documentTitle={row.title}
-          open={isDeleteDialogOpen}
-          onOpenChange={setDeleteDialogOpen}
-          teamId={team?.id}
-        />
-      )}
+      <DeleteDocumentDialog
+        id={row.id}
+        status={row.status}
+        documentTitle={row.title}
+        open={isDeleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        teamId={team?.id}
+        canManageDocument={canManageDocument}
+      />
+
      {isDuplicateDialogOpen && (
        <DuplicateDocumentDialog
          id={row.id}
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@ -29,7 +29,7 @@ export type DocumentsDataTableProps = {
    }
  >;
  showSenderColumn?: boolean;
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
 };

 export const DocumentsDataTable = ({
@ -76,7 +76,12 @@ export const DocumentsDataTable = ({
          {
            header: 'Recipient',
            accessorKey: 'recipient',
-            cell: ({ row }) => <StackAvatarsWithTooltip recipients={row.original.Recipient} />,
+            cell: ({ row }) => (
+              <StackAvatarsWithTooltip
+                recipients={row.original.Recipient}
+                documentStatus={row.original.status}
+              />
+            ),
          },
          {
            header: 'Status',
--- a/apps/web/src/app/(dashboard)/documents/delete-document-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/documents/delete-document-dialog.tsx
@ -2,8 +2,11 @@ import { useEffect, useState } from 'react';

 import { useRouter } from 'next/navigation';

+import { match } from 'ts-pattern';
+
 import { DocumentStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  Dialog,
@ -23,6 +26,7 @@ type DeleteDocumentDialogProps = {
  status: DocumentStatus;
  documentTitle: string;
  teamId?: number;
+  canManageDocument: boolean;
 };

 export const DeleteDocumentDialog = ({
@ -32,6 +36,7 @@ export const DeleteDocumentDialog = ({
  status,
  documentTitle,
  teamId,
+  canManageDocument,
 }: DeleteDocumentDialogProps) => {
  const router = useRouter();

@ -83,47 +88,82 @@ export const DeleteDocumentDialog = ({
    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
      <DialogContent>
        <DialogHeader>
-          <DialogTitle>Are you sure you want to delete "{documentTitle}"?</DialogTitle>
+          <DialogTitle>Are you sure?</DialogTitle>

          <DialogDescription>
-            Please note that this action is irreversible. Once confirmed, your document will be
-            permanently deleted.
+            You are about to {canManageDocument ? 'delete' : 'hide'}{' '}
+            <strong>"{documentTitle}"</strong>
          </DialogDescription>
        </DialogHeader>

-        {status !== DocumentStatus.DRAFT && (
-          <div className="mt-4">
-            <Input
-              type="text"
-              value={inputValue}
-              onChange={onInputChange}
-              placeholder="Type 'delete' to confirm"
-            />
-          </div>
+        {canManageDocument ? (
+          <Alert variant="warning" className="-mt-1">
+            {match(status)
+              .with(DocumentStatus.DRAFT, () => (
+                <AlertDescription>
+                  Please note that this action is <strong>irreversible</strong>. Once confirmed,
+                  this document will be permanently deleted.
+                </AlertDescription>
+              ))
+              .with(DocumentStatus.PENDING, () => (
+                <AlertDescription>
+                  <p>
+                    Please note that this action is <strong>irreversible</strong>.
+                  </p>
+
+                  <p className="mt-1">Once confirmed, the following will occur:</p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>Document will be permanently deleted</li>
+                    <li>Document signing process will be cancelled</li>
+                    <li>All inserted signatures will be voided</li>
+                    <li>All recipients will be notified</li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .with(DocumentStatus.COMPLETED, () => (
+                <AlertDescription>
+                  <p>By deleting this document, the following will occur:</p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>The document will be hidden from your account</li>
+                    <li>Recipients will still retain their copy of the document</li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .exhaustive()}
+          </Alert>
+        ) : (
+          <Alert variant="warning" className="-mt-1">
+            <AlertDescription>
+              Please contact support if you would like to revert this action.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {status !== DocumentStatus.DRAFT && canManageDocument && (
+          <Input
+            type="text"
+            value={inputValue}
+            onChange={onInputChange}
+            placeholder="Type 'delete' to confirm"
+          />
        )}

        <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-              className="flex-1"
-            >
-              Cancel
-            </Button>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>

-            <Button
-              type="button"
-              loading={isLoading}
-              onClick={onDelete}
-              disabled={!isDeleteEnabled}
-              variant="destructive"
-              className="flex-1"
-            >
-              Delete
-            </Button>
-          </div>
+          <Button
+            type="button"
+            loading={isLoading}
+            onClick={onDelete}
+            disabled={!isDeleteEnabled && canManageDocument}
+            variant="destructive"
+          >
+            {canManageDocument ? 'Delete' : 'Hide'}
+          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
--- a/apps/web/src/app/(dashboard)/documents/documents-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/documents-page-view.tsx
@ -41,7 +41,9 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
  const page = Number(searchParams.page) || 1;
  const perPage = Number(searchParams.perPage) || 20;
  const senderIds = parseToIntegerArray(searchParams.senderIds ?? '');
-  const currentTeam = team ? { id: team.id, url: team.url } : undefined;
+  const currentTeam = team
+    ? { id: team.id, url: team.url, teamEmail: team.teamEmail?.email }
+    : undefined;

  const getStatOptions: GetStatsInput = {
    user,
--- a/apps/web/src/app/(dashboard)/documents/empty-state.tsx
+++ b/apps/web/src/app/(dashboard)/documents/empty-state.tsx
@ -37,7 +37,10 @@ export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
    }));

  return (
-    <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+    <div
+      className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4"
+      data-testid="empty-document-state"
+    >
      <Icon className="h-12 w-12" strokeWidth={1.5} />

      <div className="text-center">