wip

2025-11-23 05:01:54 +10:00 · 2025-01-02 15:33:37 +11:00
parent 9183f668d3
commit f7a98180d7
413 changed files with 29538 additions and 1606 deletions
--- a/apps/remix/app/components/(dashboard)/avatar/avatar-with-recipient.tsx
+++ b/apps/remix/app/components/(dashboard)/avatar/avatar-with-recipient.tsx
@ -0,0 +1,71 @@
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { DocumentStatus } from '@prisma/client';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import { cn } from '@documenso/ui/lib/utils';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { StackAvatar } from './stack-avatar';
+
+export type AvatarWithRecipientProps = {
+  recipient: Recipient;
+  documentStatus: DocumentStatus;
+};
+
+export function AvatarWithRecipient({ recipient, documentStatus }: AvatarWithRecipientProps) {
+  const [, copy] = useCopyToClipboard();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const signingToken = documentStatus === DocumentStatus.PENDING ? recipient.token : null;
+
+  const onRecipientClick = () => {
+    if (!signingToken) {
+      return;
+    }
+
+    void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${signingToken}`).then(() => {
+      toast({
+        title: _(msg`Copied to clipboard`),
+        description: _(msg`The signing link has been copied to your clipboard.`),
+      });
+    });
+  };
+
+  return (
+    <div
+      className={cn('my-1 flex items-center gap-2', {
+        'cursor-pointer hover:underline': signingToken,
+      })}
+      role={signingToken ? 'button' : undefined}
+      title={signingToken ? _(msg`Click to copy signing link for sending to recipient`) : undefined}
+      onClick={onRecipientClick}
+    >
+      <StackAvatar
+        first={true}
+        key={recipient.id}
+        type={getRecipientType(recipient)}
+        fallbackText={recipientAbbreviation(recipient)}
+      />
+
+      <div
+        className="text-muted-foreground text-sm"
+        title={
+          signingToken ? _(msg`Click to copy signing link for sending to recipient`) : undefined
+        }
+      >
+        <p>{recipient.email}</p>
+        <p className="text-muted-foreground/70 text-xs">
+          {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/apps/remix/app/components/(dashboard)/avatar/stack-avatar.tsx
+++ b/apps/remix/app/components/(dashboard)/avatar/stack-avatar.tsx
@ -0,0 +1,55 @@
+import { RecipientStatusType } from '@documenso/lib/client-only/recipient-type';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+
+const ZIndexes: { [key: string]: string } = {
+  '10': 'z-10',
+  '20': 'z-20',
+  '30': 'z-30',
+  '40': 'z-40',
+  '50': 'z-50',
+};
+
+export type StackAvatarProps = {
+  first?: boolean;
+  zIndex?: string;
+  fallbackText?: string;
+  type: RecipientStatusType;
+};
+
+export const StackAvatar = ({ first, zIndex, fallbackText = '', type }: StackAvatarProps) => {
+  let classes = '';
+  let zIndexClass = '';
+  const firstClass = first ? '' : '-ml-3';
+
+  if (zIndex) {
+    zIndexClass = ZIndexes[zIndex] ?? '';
+  }
+
+  switch (type) {
+    case RecipientStatusType.UNSIGNED:
+      classes = 'bg-dawn-200 text-dawn-900';
+      break;
+    case RecipientStatusType.OPENED:
+      classes = 'bg-yellow-200 text-yellow-700';
+      break;
+    case RecipientStatusType.WAITING:
+      classes = 'bg-water text-water-700';
+      break;
+    case RecipientStatusType.COMPLETED:
+      classes = 'bg-documenso-200 text-documenso-800';
+      break;
+    case RecipientStatusType.REJECTED:
+      classes = 'bg-red-200 text-red-800';
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Avatar
+      className={` ${zIndexClass} ${firstClass} dark:border-border h-10 w-10 border-2 border-solid border-white`}
+    >
+      <AvatarFallback className={classes}>{fallbackText}</AvatarFallback>
+    </Avatar>
+  );
+};
--- a/apps/remix/app/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
+++ b/apps/remix/app/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
@ -0,0 +1,166 @@
+import { useMemo } from 'react';
+
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { type DocumentStatus, type Recipient } from '@prisma/client';
+
+import { RecipientStatusType, 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 { PopoverHover } from '@documenso/ui/primitives/popover';
+
+import { AvatarWithRecipient } from './avatar-with-recipient';
+import { StackAvatar } from './stack-avatar';
+import { StackAvatars } from './stack-avatars';
+
+export type StackAvatarsWithTooltipProps = {
+  documentStatus: DocumentStatus;
+  recipients: Recipient[];
+  position?: 'top' | 'bottom';
+  children?: React.ReactNode;
+};
+
+export const StackAvatarsWithTooltip = ({
+  documentStatus,
+  recipients,
+  position,
+  children,
+}: StackAvatarsWithTooltipProps) => {
+  const { _ } = useLingui();
+
+  const waitingRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === RecipientStatusType.WAITING,
+  );
+
+  const openedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === RecipientStatusType.OPENED,
+  );
+
+  const completedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === RecipientStatusType.COMPLETED,
+  );
+
+  const uncompletedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === RecipientStatusType.UNSIGNED,
+  );
+
+  const rejectedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === RecipientStatusType.REJECTED,
+  );
+
+  const sortedRecipients = useMemo(() => {
+    const otherRecipients = recipients.filter(
+      (recipient) => getRecipientType(recipient) !== RecipientStatusType.REJECTED,
+    );
+
+    return [
+      ...rejectedRecipients.sort((a, b) => a.id - b.id),
+      ...otherRecipients.sort((a, b) => {
+        return a.id - b.id;
+      }),
+    ];
+  }, [recipients]);
+
+  return (
+    <PopoverHover
+      trigger={children || <StackAvatars recipients={sortedRecipients} />}
+      contentProps={{
+        className: 'flex flex-col gap-y-5 py-2',
+        side: position,
+      }}
+    >
+      {completedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">
+            <Trans>Completed</Trans>
+          </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>
+                <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>
+      )}
+
+      {rejectedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">
+            <Trans>Rejected</Trans>
+          </h1>
+          {rejectedRecipients.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>
+                <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>
+      )}
+
+      {waitingRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">
+            <Trans>Waiting</Trans>
+          </h1>
+          {waitingRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
+
+      {openedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">
+            <Trans>Opened</Trans>
+          </h1>
+          {openedRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
+
+      {uncompletedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">
+            <Trans>Uncompleted</Trans>
+          </h1>
+          {uncompletedRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
+    </PopoverHover>
+  );
+};
--- a/apps/remix/app/components/(dashboard)/avatar/stack-avatars.tsx
+++ b/apps/remix/app/components/(dashboard)/avatar/stack-avatars.tsx
@ -0,0 +1,47 @@
+import React from 'react';
+
+import type { Recipient } from '@prisma/client';
+
+import {
+  getExtraRecipientsType,
+  getRecipientType,
+} from '@documenso/lib/client-only/recipient-type';
+import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+
+import { StackAvatar } from './stack-avatar';
+
+export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
+  const renderStackAvatars = (recipients: Recipient[]) => {
+    const zIndex = 50;
+    const itemsToRender = recipients.slice(0, 5);
+    const remainingItems = recipients.length - itemsToRender.length;
+
+    return itemsToRender.map((recipient: Recipient, index: number) => {
+      const first = index === 0;
+
+      if (index === 4 && remainingItems > 0) {
+        return (
+          <StackAvatar
+            key="extra-recipient"
+            first={first}
+            zIndex={String(zIndex - index * 10)}
+            type={getExtraRecipientsType(recipients.slice(4))}
+            fallbackText={`+${remainingItems + 1}`}
+          />
+        );
+      }
+
+      return (
+        <StackAvatar
+          key={recipient.id}
+          first={first}
+          zIndex={String(zIndex - index * 10)}
+          type={getRecipientType(recipient)}
+          fallbackText={recipientAbbreviation(recipient)}
+        />
+      );
+    });
+  };
+
+  return <>{renderStackAvatars(recipients)}</>;
+}