fix: stacked avatar colors (#1361)

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

@@ -1,9 +1,11 @@
 'use client';
 
+import { useMemo } from 'react';
+
 import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
-import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+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 type { DocumentStatus, Recipient } from '@documenso/prisma/client';
@@ -29,24 +31,26 @@ export const StackAvatarsWithTooltip = ({
   const { _ } = useLingui();
 
   const waitingRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'waiting',
+    (recipient) => getRecipientType(recipient) === RecipientStatusType.WAITING,
   );
 
   const openedRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'opened',
+    (recipient) => getRecipientType(recipient) === RecipientStatusType.OPENED,
   );
 
   const completedRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'completed',
+    (recipient) => getRecipientType(recipient) === RecipientStatusType.COMPLETED,
   );
 
   const uncompletedRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'unsigned',
+    (recipient) => getRecipientType(recipient) === RecipientStatusType.UNSIGNED,
   );
 
+  const sortedRecipients = useMemo(() => recipients.sort((a, b) => a.id - b.id), [recipients]);
+
   return (
     <PopoverHover
-      trigger={children || <StackAvatars recipients={recipients} />}
+      trigger={children || <StackAvatars recipients={sortedRecipients} />}
       contentProps={{
         className: 'flex flex-col gap-y-5 py-2',
         side: position,
@@ -65,7 +69,7 @@ export const StackAvatarsWithTooltip = ({
                 type={getRecipientType(recipient)}
                 fallbackText={recipientAbbreviation(recipient)}
               />
-              <div className="">
+              <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)}

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

@@ -1,6 +1,9 @@
 import React from 'react';
 
-import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import {
+  getExtraRecipientsType,
+  getRecipientType,
+} from '@documenso/lib/client-only/recipient-type';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
 
@@ -13,20 +16,27 @@ export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
     const remainingItems = recipients.length - itemsToRender.length;
 
     return itemsToRender.map((recipient: Recipient, index: number) => {
-      const first = index === 0 ? true : false;
+      const first = index === 0;
 
-      const lastItemText =
+      if (index === 4 && remainingItems > 0) {
-        index === itemsToRender.length - 1 && remainingItems > 0
+        return (
-          ? `+${remainingItems + 1}`
+          <StackAvatar
-          : undefined;
+            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={lastItemText && index === 4 ? 'unsigned' : getRecipientType(recipient)}
+          type={getRecipientType(recipient)}
-          fallbackText={lastItemText ? lastItemText : recipientAbbreviation(recipient)}
+          fallbackText={recipientAbbreviation(recipient)}
         />
       );
     });

packages/lib/client-only/recipient-type.ts

@@ -1,12 +1,19 @@
 import type { Recipient } from '@documenso/prisma/client';
 import { ReadStatus, RecipientRole, SendStatus, SigningStatus } from '@documenso/prisma/client';
 
+export enum RecipientStatusType {
+  COMPLETED = 'completed',
+  OPENED = 'opened',
+  WAITING = 'waiting',
+  UNSIGNED = 'unsigned',
+}
+
 export const getRecipientType = (recipient: Recipient) => {
   if (
     recipient.role === RecipientRole.CC ||
     (recipient.sendStatus === SendStatus.SENT && recipient.signingStatus === SigningStatus.SIGNED)
   ) {
-    return 'completed';
+    return RecipientStatusType.COMPLETED;
   }
 
   if (
@@ -14,12 +21,33 @@ export const getRecipientType = (recipient: Recipient) => {
     recipient.readStatus === ReadStatus.OPENED &&
     recipient.signingStatus === SigningStatus.NOT_SIGNED
   ) {
-    return 'opened';
+    return RecipientStatusType.OPENED;
   }
 
-  if (recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED') {
+  if (
-    return 'waiting';
+    recipient.sendStatus === SendStatus.SENT &&
+    recipient.signingStatus === SigningStatus.NOT_SIGNED
+  ) {
+    return RecipientStatusType.WAITING;
   }
 
-  return 'unsigned';
+  return RecipientStatusType.UNSIGNED;
+};
+
+export const getExtraRecipientsType = (extraRecipients: Recipient[]) => {
+  const types = extraRecipients.map((r) => getRecipientType(r));
+
+  if (types.includes(RecipientStatusType.UNSIGNED)) {
+    return RecipientStatusType.UNSIGNED;
+  }
+
+  if (types.includes(RecipientStatusType.OPENED)) {
+    return RecipientStatusType.OPENED;
+  }
+
+  if (types.includes(RecipientStatusType.WAITING)) {
+    return RecipientStatusType.WAITING;
+  }
+
+  return RecipientStatusType.COMPLETED;
 };

packages/lib/translations/de/web.po

@@ -789,7 +789,7 @@ msgstr "Unterzeichnung abschließen"
 msgid "Complete Viewing"
 msgstr "Betrachten abschließen"
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:58
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:62
 #: apps/web/src/components/formatter/document-status.tsx:28
 msgid "Completed"
 msgstr "Abgeschlossen"
@@ -2143,7 +2143,7 @@ msgstr "Sobald Sie den QR-Code gescannt oder den Code manuell eingegeben haben,
 msgid "Oops! Something went wrong."
 msgstr "Hoppla! Etwas ist schief gelaufen."
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:97
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:101
 msgid "Opened"
 msgstr "Geöffnet"
 
@@ -3636,7 +3636,7 @@ msgstr "Unable to sign in"
 msgid "Unauthorized"
 msgstr "Unauthorized"
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:112
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:116
 msgid "Uncompleted"
 msgstr "Uncompleted"
 
@@ -3848,7 +3848,7 @@ msgstr "Teams ansehen"
 msgid "Viewed"
 msgstr "Angesehen"
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:82
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:86
 msgid "Waiting"
 msgstr "Warten"
 

packages/lib/translations/en/web.po

@@ -784,7 +784,7 @@ msgstr "Complete Signing"
 msgid "Complete Viewing"
 msgstr "Complete Viewing"
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:58
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:62
 #: apps/web/src/components/formatter/document-status.tsx:28
 msgid "Completed"
 msgstr "Completed"
@@ -2138,7 +2138,7 @@ msgstr "Once you have scanned the QR code or entered the code manually, enter th
 msgid "Oops! Something went wrong."
 msgstr "Oops! Something went wrong."
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:97
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:101
 msgid "Opened"
 msgstr "Opened"
 
@@ -3631,7 +3631,7 @@ msgstr "Unable to sign in"
 msgid "Unauthorized"
 msgstr "Unauthorized"
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:112
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:116
 msgid "Uncompleted"
 msgstr "Uncompleted"
 
@@ -3843,7 +3843,7 @@ msgstr "View teams"
 msgid "Viewed"
 msgstr "Viewed"
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:82
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:86
 msgid "Waiting"
 msgstr "Waiting"
 

packages/lib/translations/fr/web.po

@@ -789,7 +789,7 @@ msgstr "Compléter la signature"
 msgid "Complete Viewing"
 msgstr "Compléter la visualisation"
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:58
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:62
 #: apps/web/src/components/formatter/document-status.tsx:28
 msgid "Completed"
 msgstr "Complété"
@@ -2143,7 +2143,7 @@ msgstr "Une fois que vous avez scanné le code QR ou saisi le code manuellement,
 msgid "Oops! Something went wrong."
 msgstr "Oups ! Quelque chose a mal tourné."
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:97
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:101
 msgid "Opened"
 msgstr "Ouvert"
 
@@ -3636,7 +3636,7 @@ msgstr "Impossible de se connecter"
 msgid "Unauthorized"
 msgstr "Non autorisé"
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:112
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:116
 msgid "Uncompleted"
 msgstr "Non complet"
 
@@ -3848,7 +3848,7 @@ msgstr "Voir les équipes"
 msgid "Viewed"
 msgstr "Vu"
 
-#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:82
+#: apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx:86
 msgid "Waiting"
 msgstr "En attente"