feat: add visible completed fields

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -1,12 +1,10 @@
 'use client';
 
-import { useRef, useState } from 'react';
-
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
 
 import { AvatarWithRecipient } from './avatar-with-recipient';
 import { StackAvatar } from './stack-avatar';
@@ -23,11 +21,6 @@ export const StackAvatarsWithTooltip = ({
   position,
   children,
 }: StackAvatarsWithTooltipProps) => {
-  const [open, setOpen] = useState(false);
-
-  const isControlled = useRef(false);
-  const isMouseOverTimeout = useRef<NodeJS.Timeout | null>(null);
-
   const waitingRecipients = recipients.filter(
     (recipient) => getRecipientType(recipient) === 'waiting',
   );
@@ -44,105 +37,62 @@ export const StackAvatarsWithTooltip = ({
     (recipient) => getRecipientType(recipient) === 'unsigned',
   );
 
-  const onMouseEnter = () => {
-    if (isMouseOverTimeout.current) {
-      clearTimeout(isMouseOverTimeout.current);
-    }
-
-    if (isControlled.current) {
-      return;
-    }
-
-    isMouseOverTimeout.current = setTimeout(() => {
-      setOpen((o) => (!o ? true : o));
-    }, 200);
-  };
-
-  const onMouseLeave = () => {
-    if (isMouseOverTimeout.current) {
-      clearTimeout(isMouseOverTimeout.current);
-    }
-
-    if (isControlled.current) {
-      return;
-    }
-
-    setTimeout(() => {
-      setOpen((o) => (o ? false : o));
-    }, 200);
-  };
-
-  const onOpenChange = (newOpen: boolean) => {
-    isControlled.current = newOpen;
-
-    setOpen(newOpen);
-  };
-
   return (
-    <Popover open={open} onOpenChange={onOpenChange}>
-      <PopoverTrigger
-        className="flex cursor-pointer"
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        {children || <StackAvatars recipients={recipients} />}
-      </PopoverTrigger>
-
-      <PopoverContent
-        side={position}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        className="flex flex-col gap-y-5 py-2"
-      >
-        {completedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Completed</h1>
-            {completedRecipients.map((recipient: Recipient) => (
-              <div key={recipient.id} className="my-1 flex items-center gap-2">
-                <StackAvatar
-                  first={true}
-                  key={recipient.id}
-                  type={getRecipientType(recipient)}
-                  fallbackText={recipientAbbreviation(recipient)}
-                />
-                <div className="">
-                  <p className="text-muted-foreground text-sm">{recipient.email}</p>
-                  <p className="text-muted-foreground/70 text-xs">
-                    {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
-                  </p>
-                </div>
+    <PopoverHover
+      trigger={children || <StackAvatars recipients={recipients} />}
+      contentProps={{
+        className: 'flex flex-col gap-y-5 py-2',
+        side: position,
+      }}
+    >
+      {completedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Completed</h1>
+          {completedRecipients.map((recipient: Recipient) => (
+            <div key={recipient.id} className="my-1 flex items-center gap-2">
+              <StackAvatar
+                first={true}
+                key={recipient.id}
+                type={getRecipientType(recipient)}
+                fallbackText={recipientAbbreviation(recipient)}
+              />
+              <div className="">
+                <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                <p className="text-muted-foreground/70 text-xs">
+                  {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                </p>
               </div>
-            ))}
-          </div>
-        )}
+            </div>
+          ))}
+        </div>
+      )}
 
-        {waitingRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Waiting</h1>
-            {waitingRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-            ))}
-          </div>
-        )}
+      {waitingRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Waiting</h1>
+          {waitingRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+          ))}
+        </div>
+      )}
 
-        {openedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Opened</h1>
-            {openedRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-            ))}
-          </div>
-        )}
+      {openedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Opened</h1>
+          {openedRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+          ))}
+        </div>
+      )}
 
-        {uncompletedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Uncompleted</h1>
-            {uncompletedRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-            ))}
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
+      {uncompletedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Uncompleted</h1>
+          {uncompletedRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+          ))}
+        </div>
+      )}
+    </PopoverHover>
   );
 };

apps/web/src/components/document/document-read-only-fields.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useState } from 'react';
+
+import { P, match } from 'ts-pattern';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { CompletedField } from '@documenso/lib/types/fields';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { DocumentMeta } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+
+export type DocumentReadOnlyFieldsProps = {
+  fields: CompletedField[];
+  documentMeta?: DocumentMeta;
+};
+
+export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnlyFieldsProps) => {
+  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
+
+  const handleHideField = (fieldId: string) => {
+    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
+  };
+
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map(
+        (field) =>
+          !hiddenFieldIds[field.secondaryId] && (
+            <FieldRootContainer
+              field={field}
+              key={field.id}
+              cardClassName="border-gray-100/50 !shadow-none backdrop-blur-[1px] bg-background/90"
+            >
+              <div className="absolute -right-3 -top-3">
+                <PopoverHover
+                  trigger={
+                    <Avatar className="dark:border-border h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
+                      <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
+                        {extractInitials(field.Recipient.name || field.Recipient.email)}
+                      </AvatarFallback>
+                    </Avatar>
+                  }
+                  contentProps={{
+                    className: 'flex w-fit flex-col py-2.5 text-sm',
+                  }}
+                >
+                  <p>
+                    <span className="font-semibold">
+                      {field.Recipient.name
+                        ? `${field.Recipient.name} (${field.Recipient.email})`
+                        : field.Recipient.email}{' '}
+                    </span>
+                    inserted a {FRIENDLY_FIELD_TYPE[field.type].toLowerCase()}
+                  </p>
+
+                  <Button
+                    variant="outline"
+                    className="mt-2.5 h-6 text-xs focus:outline-none focus-visible:ring-0"
+                    onClick={() => handleHideField(field.secondaryId)}
+                  >
+                    Hide field
+                  </Button>
+                </PopoverHover>
+              </div>
+
+              <div className="text-muted-foreground">
+                {match(field)
+                  .with({ type: FieldType.SIGNATURE }, (field) =>
+                    field.Signature?.signatureImageAsBase64 ? (
+                      <img
+                        src={field.Signature.signatureImageAsBase64}
+                        alt="Signature"
+                        className="h-full w-full object-contain dark:invert"
+                      />
+                    ) : (
+                      <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
+                        {field.Signature?.typedSignature}
+                      </p>
+                    ),
+                  )
+                  .with({ type: P.union(FieldType.NAME, FieldType.TEXT, FieldType.EMAIL) }, () => (
+                    <p className="text-muted-foreground text-lg">{field.customText}</p>
+                  ))
+                  .with({ type: FieldType.DATE }, () => (
+                    <p>
+                      {convertToLocalSystemFormat(
+                        field.customText,
+                        documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+                        documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+                      )}
+                    </p>
+                  ))
+                  .with({ type: FieldType.FREE_SIGNATURE }, () => null)
+                  .exhaustive()}
+              </div>
+            </FieldRootContainer>
+          ),
+      )}
+    </ElementVisible>
+  );
+};