diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
index 78814cd45..a2a81bb2a 100644
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
@@ -15,7 +15,7 @@ export type StackAvatarProps = {
type: 'unsigned' | 'waiting' | 'opened' | 'completed';
};
-export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
+export const StackAvatar = ({ first, zIndex, fallbackText = '', type }: StackAvatarProps) => {
let classes = '';
let zIndexClass = '';
const firstClass = first ? '' : '-ml-3';
@@ -48,7 +48,7 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
${firstClass}
dark:border-border h-10 w-10 border-2 border-solid border-white`}
>
- {fallbackText ?? 'UK'}
+ {fallbackText}
);
};
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 2a053a35a..3f6407029 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,4 +1,4 @@
-import { initials } from '@documenso/lib/client-only/recipient-initials';
+import { recipientAvatarFallback } from '@documenso/lib/client-only/recipient-avatar-fallback';
import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
import { Recipient } from '@documenso/prisma/client';
import {
@@ -56,7 +56,7 @@ export const StackAvatarsWithTooltip = ({
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
- fallbackText={initials(recipient.name)}
+ fallbackText={recipientAvatarFallback(recipient)}
/>
{recipient.email}
@@ -73,7 +73,7 @@ export const StackAvatarsWithTooltip = ({
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
- fallbackText={initials(recipient.name)}
+ fallbackText={recipientAvatarFallback(recipient)}
/>
{recipient.email}
@@ -90,7 +90,7 @@ export const StackAvatarsWithTooltip = ({
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
- fallbackText={initials(recipient.name)}
+ fallbackText={recipientAvatarFallback(recipient)}
/>
{recipient.email}
@@ -107,7 +107,7 @@ export const StackAvatarsWithTooltip = ({
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
- fallbackText={initials(recipient.name)}
+ fallbackText={recipientAvatarFallback(recipient)}
/>
{recipient.email}
diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx
index 97af9dc9e..678836ffd 100644
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { initials } from '@documenso/lib/client-only/recipient-initials';
+import { recipientAvatarFallback } from '@documenso/lib/client-only/recipient-avatar-fallback';
import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
import { Recipient } from '@documenso/prisma/client';
@@ -26,7 +26,7 @@ export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
first={first}
zIndex={String(zIndex - index * 10)}
type={lastItemText && index === 4 ? 'unsigned' : getRecipientType(recipient)}
- fallbackText={lastItemText ? lastItemText : initials(recipient.name)}
+ fallbackText={lastItemText ? lastItemText : recipientAvatarFallback(recipient)}
/>
);
});
diff --git a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
index 3f7a02e60..57fe789dc 100644
--- a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
+++ b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
@@ -16,7 +16,7 @@ import {
import { signOut } from 'next-auth/react';
import { useTheme } from 'next-themes';
-import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+import { initials } from '@documenso/lib/client-only/recipient-initials';
import { User } from '@documenso/prisma/client';
import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
import { Button } from '@documenso/ui/primitives/button';
@@ -42,19 +42,14 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
const isBillingEnabled = getFlag('app_billing');
- const initials =
- user.name
- ?.split(' ')
- .map((name: string) => name.slice(0, 1).toUpperCase())
- .slice(0, 2)
- .join('') ?? 'UK';
+ const avatarFallback = user.name ? initials(user.name) : user.email.slice(0, 1).toUpperCase();
return (
diff --git a/packages/lib/client-only/recipient-avatar-fallback.ts b/packages/lib/client-only/recipient-avatar-fallback.ts
new file mode 100644
index 000000000..7a296a5fa
--- /dev/null
+++ b/packages/lib/client-only/recipient-avatar-fallback.ts
@@ -0,0 +1,7 @@
+import { Recipient } from '@documenso/prisma/client';
+
+import { initials } from './recipient-initials';
+
+export const recipientAvatarFallback = (recipient: Recipient) => {
+ return initials(recipient.name) || recipient.email.slice(0, 1).toUpperCase();
+};
diff --git a/packages/lib/client-only/recipient-initials.ts b/packages/lib/client-only/recipient-initials.ts
index 0712ccd7d..403ed26e4 100644
--- a/packages/lib/client-only/recipient-initials.ts
+++ b/packages/lib/client-only/recipient-initials.ts
@@ -3,4 +3,4 @@ export const initials = (text: string) =>
?.split(' ')
.map((name: string) => name.slice(0, 1).toUpperCase())
.slice(0, 2)
- .join('') ?? 'UK';
+ .join('');