91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import { initials } from '@documenso/lib/client-only/recipient-initials';
|
|
import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
|
|
import { Recipient } from '@documenso/prisma/client';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@documenso/ui/primitives/tooltip';
|
|
|
|
import { StackAvatar } from './stack-avatar';
|
|
import { StackAvatars } from './stack-avatars';
|
|
|
|
export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[] }) => {
|
|
const waitingRecipients = recipients.filter(
|
|
(recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED',
|
|
);
|
|
|
|
const completedRecipients = recipients.filter(
|
|
(recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED',
|
|
);
|
|
|
|
const uncompletedRecipients = recipients.filter(
|
|
(recipient) => recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED',
|
|
);
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger className="flex cursor-pointer">
|
|
<StackAvatars recipients={recipients} />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<div className="flex flex-col gap-y-5 p-1">
|
|
{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={initials(recipient.name)}
|
|
/>
|
|
<span className="text-sm text-gray-500">{recipient.email}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{waitingRecipients.length > 0 && (
|
|
<div>
|
|
<h1 className="text-base font-medium">Waiting</h1>
|
|
{waitingRecipients.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={initials(recipient.name)}
|
|
/>
|
|
<span className="text-sm text-gray-500">{recipient.email}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{uncompletedRecipients.length > 0 && (
|
|
<div>
|
|
<h1 className="text-base font-medium">Uncompleted</h1>
|
|
{uncompletedRecipients.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={initials(recipient.name)}
|
|
/>
|
|
<span className="text-sm text-gray-500">{recipient.email}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
};
|