From 2c1a18bafc2758d77d927782683f23f6f7b67350 Mon Sep 17 00:00:00 2001 From: Ephraim Duncan <55143799+ephraimduncan@users.noreply.github.com> Date: Wed, 9 Oct 2024 01:25:56 +0000 Subject: [PATCH] fix: stacked avatar colors (#1361) --- .../avatar/stack-avatars-with-tooltip.tsx | 18 +++++---- .../(dashboard)/avatar/stack-avatars.tsx | 26 +++++++++---- packages/lib/client-only/recipient-type.ts | 38 ++++++++++++++++--- packages/lib/translations/de/web.po | 8 ++-- packages/lib/translations/en/web.po | 8 ++-- packages/lib/translations/fr/web.po | 8 ++-- 6 files changed, 74 insertions(+), 32 deletions(-) diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx index 76a80805f..c859c332a 100644 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx +++ b/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 ( } + trigger={children || } 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)} /> -
+

{recipient.email}

{_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)} diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx index 69e7d1142..95621c760 100644 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx +++ b/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 = - index === itemsToRender.length - 1 && remainingItems > 0 - ? `+${remainingItems + 1}` - : undefined; + if (index === 4 && remainingItems > 0) { + return ( + + ); + } return ( ); }); diff --git a/packages/lib/client-only/recipient-type.ts b/packages/lib/client-only/recipient-type.ts index 44993796a..4e2069087 100644 --- a/packages/lib/client-only/recipient-type.ts +++ b/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') { - return 'waiting'; + if ( + 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; }; diff --git a/packages/lib/translations/de/web.po b/packages/lib/translations/de/web.po index 8d90868a6..8509e3913 100644 --- a/packages/lib/translations/de/web.po +++ b/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" diff --git a/packages/lib/translations/en/web.po b/packages/lib/translations/en/web.po index be7276ed4..9cd71d854 100644 --- a/packages/lib/translations/en/web.po +++ b/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" diff --git a/packages/lib/translations/fr/web.po b/packages/lib/translations/fr/web.po index 494270848..cd80e98ad 100644 --- a/packages/lib/translations/fr/web.po +++ b/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"