feat: add profile tooltips

apps/web/src/app/(profile)/p/[url]/page.tsx

@@ -3,9 +3,10 @@ import Link from 'next/link';
 import { notFound, redirect } from 'next/navigation';
 
 import { FileIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
+import { DateTime } from 'luxon';
 
 import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -17,6 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from '@documenso/ui/primitives/table';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 export type PublicProfilePageProps = {
   params: {
@@ -24,6 +26,17 @@ export type PublicProfilePageProps = {
   };
 };
 
+const BADGE_DATA = {
+  Premium: {
+    imageSrc: '/static/premium-user-badge.svg',
+    name: 'Premium',
+  },
+  EarlySupporter: {
+    imageSrc: '/static/early-supporter-badge.svg',
+    name: 'Early supporter',
+  },
+};
+
 export default async function PublicProfilePage({ params }: PublicProfilePageProps) {
   const { url: profileUrl } = params;
 
@@ -44,9 +57,9 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
   return (
     <div className="flex flex-col items-center justify-center py-4 sm:py-32">
       <div className="flex flex-col items-center">
-        <Avatar className="dark:border-border h-24 w-24 border-2 border-solid border-white">
+        <Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
           <AvatarFallback className="text-xs text-gray-400">
-            {publicProfile.name.slice(0, 1).toUpperCase()}
+            {extractInitials(publicProfile.name)}
           </AvatarFallback>
         </Avatar>
 
@@ -54,20 +67,40 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
           <h2 className="font-bold">{publicProfile.name}</h2>
 
           {publicProfile.badge && (
+            <Tooltip>
+              <TooltipTrigger>
                 <Image
                   className="ml-2 flex items-center justify-center"
                   alt="Profile badge"
-              src={`/static/${match(publicProfile.badge)
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
-                .with('Premium', () => 'premium-user-badge.svg')
-                .with('EarlySupporter', () => 'early-supporter-badge.svg')
-                .exhaustive()}`}
                   height={24}
                   width={24}
                 />
+              </TooltipTrigger>
+
+              <TooltipContent className="flex flex-row items-start py-2 !pl-3 !pr-3.5">
+                <Image
+                  className="mt-0.5"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  height={24}
+                  width={24}
+                />
+
+                <div className="ml-2">
+                  <p className="text-foreground text-base font-bold">
+                    {BADGE_DATA[publicProfile.badge.type].name}
+                  </p>
+                  <p className="text-muted-foreground mt-0.5 text-sm">
+                    Since {DateTime.fromJSDate(publicProfile.badge.since).toFormat('LLL ‘yy')}
+                  </p>
+                </div>
+              </TooltipContent>
+            </Tooltip>
           )}
         </div>
 
-        <div className="text-muted-foreground mt-4 max-w-lg whitespace-pre-wrap break-all text-center">
+        <div className="text-muted-foreground mt-4 max-w-lg whitespace-pre-wrap break-words text-center">
           {profile.bio}
         </div>
       </div>
@@ -94,17 +127,14 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
 
                       <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-center md:justify-between">
                         <div>
-                          <p className="text-sm">{template.publicTitle}</p>
+                          <p className="text-sm font-bold">{template.publicTitle}</p>
                           <p className="line-clamp-3 max-w-[70ch] whitespace-normal text-xs text-neutral-400">
                             {template.publicDescription}
                           </p>
                         </div>
 
                         <Button asChild className="w-20">
-                          <Link
+                          <Link href={formatDirectTemplatePath(template.directLink.token)}>
-                            href={formatDirectTemplatePath(template.directLink.token)}
-                            target="_blank"
-                          >
                             Sign
                           </Link>
                         </Button>

apps/web/src/app/(profile)/profile-header.tsx

@@ -2,10 +2,12 @@
 
 import { useEffect, useState } from 'react';
 
+import Image from 'next/image';
 import Link from 'next/link';
 
 import { PlusIcon } from 'lucide-react';
 
+import LogoIcon from '@documenso/assets/logo_icon.png';
 import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
 import type { User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
@@ -46,20 +48,35 @@ export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:px-8">
         <Link
           href="/"
-          className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
+          className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
         >
-          <Logo className="h-6 w-auto" />
+          <Logo className="hidden h-6 w-auto sm:block" />
+
+          <Image
+            src={LogoIcon}
+            alt="Documenso Logo"
+            width={48}
+            height={48}
+            className="h-10 w-auto dark:invert sm:hidden"
+          />
         </Link>
 
         <div className="flex flex-row items-center justify-center">
-          <p className="text-muted-foreground mr-4">
+          <p className="mr-4 text-neutral-400">
+            <span className="text-sm sm:hidden">Want your own public profile?</span>
+            <span className="hidden sm:block">
               Like to have your own public profile with agreements?
+            </span>
           </p>
 
           <Button asChild variant="secondary">
             <Link href="/signup">
+              <div className="hidden flex-row items-center sm:flex">
                 <PlusIcon className="mr-1 h-5 w-5" />
                 Create now
+              </div>
+
+              <span className="sm:hidden">Create</span>
             </Link>
           </Button>
         </div>

apps/web/src/components/templates/manage-public-template-dialog.tsx

@@ -66,12 +66,16 @@ export type ManagePublicTemplateDialogProps = {
 const ZUpdatePublicTemplateFormSchema = z.object({
   publicTitle: z
     .string()
-    .min(1, { message: 'Title must be at least 1 character long' })
+    .min(1, { message: 'Title is required' })
-    .max(MAX_TEMPLATE_PUBLIC_TITLE_LENGTH),
+    .max(MAX_TEMPLATE_PUBLIC_TITLE_LENGTH, {
+      message: `Title cannot be longer than ${MAX_TEMPLATE_PUBLIC_TITLE_LENGTH} characters`,
+    }),
   publicDescription: z
     .string()
-    .min(1, { message: 'Description must be at least 1 character long' })
+    .min(1, { message: 'Description is required' })
-    .max(MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH),
+    .max(MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH, {
+      message: `Description cannot be longer than ${MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH} characters`,
+    }),
 });
 
 type TUpdatePublicTemplateFormSchema = z.infer<typeof ZUpdatePublicTemplateFormSchema>;

packages/lib/server-only/profile/get-public-profile-by-url.ts

@@ -10,7 +10,6 @@ import {
 import { IS_BILLING_ENABLED } from '../../constants/app';
 import { STRIPE_COMMUNITY_PLAN_PRODUCT_ID } from '../../constants/billing';
 import { AppError, AppErrorCode } from '../../errors/app-error';
-import { subscriptionsContainsActiveProductId } from '../../utils/billing';
 
 export type GetPublicProfileByUrlOptions = {
   profileUrl: string;
@@ -26,7 +25,10 @@ type PublicDirectLinkTemplate = Template & {
 type BaseResponse = {
   url: string;
   name: string;
-  badge?: 'Premium' | 'EarlySupporter';
+  badge?: {
+    type: 'Premium' | 'EarlySupporter';
+    since: Date;
+  };
   templates: PublicDirectLinkTemplate[];
 };
 
@@ -69,15 +71,18 @@ export const getPublicProfileByUrl = async ({
             directLink: true,
           },
         },
-        // Subscriptions and _count are used to calculate the badges.
+        // Subscriptions and teamMembers are used to calculate the badges.
         Subscription: {
           where: {
             status: SubscriptionStatus.ACTIVE,
           },
         },
-        _count: {
+        teamMembers: {
           select: {
-            teamMembers: true,
+            createdAt: true,
+          },
+          orderBy: {
+            createdAt: 'asc',
           },
         },
       },
@@ -115,19 +120,27 @@ export const getPublicProfileByUrl = async ({
   if (user?.profile?.enabled) {
     let badge: BaseResponse['badge'] = undefined;
 
-    if (user._count.teamMembers > 0) {
+    if (user.teamMembers[0]) {
-      badge = 'Premium';
+      badge = {
+        type: 'Premium',
+        since: user.teamMembers[0]['createdAt'],
+      };
     }
 
     const earlyAdopterProductId = STRIPE_COMMUNITY_PLAN_PRODUCT_ID();
 
     if (IS_BILLING_ENABLED() && earlyAdopterProductId) {
-      const isEarlyAdopter = subscriptionsContainsActiveProductId(user.Subscription, [
+      const activeEarlyAdopterSub = user.Subscription.find(
-        earlyAdopterProductId,
+        (subscription) =>
-      ]);
+          subscription.status === SubscriptionStatus.ACTIVE &&
+          earlyAdopterProductId === subscription.planId,
+      );
 
-      if (isEarlyAdopter) {
+      if (activeEarlyAdopterSub) {
-        badge = 'EarlySupporter';
+        badge = {
+          type: 'EarlySupporter',
+          since: activeEarlyAdopterSub.createdAt,
+        };
       }
     }
 
@@ -147,7 +160,10 @@ export const getPublicProfileByUrl = async ({
   if (team?.profile?.enabled) {
     return {
       type: 'Team',
-      badge: 'Premium',
+      badge: {
+        type: 'Premium',
+        since: team.createdAt,
+      },
       profile: team.profile,
       url: profileUrl,
       name: team.name || '',

packages/trpc/server/profile-router/schema.ts

@@ -19,7 +19,12 @@ export const ZUpdateProfileMutationSchema = z.object({
 });
 
 export const ZUpdatePublicProfileMutationSchema = z.object({
-  bio: z.string().max(MAX_PROFILE_BIO_LENGTH).optional(),
+  bio: z
+    .string()
+    .max(MAX_PROFILE_BIO_LENGTH, {
+      message: `Bio must be shorter than ${MAX_PROFILE_BIO_LENGTH + 1} characters`,
+    })
+    .optional(),
   enabled: z.boolean().optional(),
   url: z
     .string()