feat: add profile tooltips

2025-11-13 00:03:33 +10:00 · 2024-06-08 13:22:51 +10:00
parent 95a600001a
commit d8d9a3be77
5 changed files with 115 additions and 43 deletions
--- a/apps/web/src/app/(profile)/p/[url]/page.tsx
+++ b/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 && (
-            <Image
-              className="ml-2 flex items-center justify-center"
-              alt="Profile badge"
-              src={`/static/${match(publicProfile.badge)
-                .with('Premium', () => 'premium-user-badge.svg')
-                .with('EarlySupporter', () => 'early-supporter-badge.svg')
-                .exhaustive()}`}
-              height={24}
-              width={24}
-            />
+            <Tooltip>
+              <TooltipTrigger>
+                <Image
+                  className="ml-2 flex items-center justify-center"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  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
-                            href={formatDirectTemplatePath(template.directLink.token)}
-                            target="_blank"
-                          >
+                          <Link href={formatDirectTemplatePath(template.directLink.token)}>
                            Sign
                          </Link>
                        </Button>
--- a/apps/web/src/app/(profile)/profile-header.tsx
+++ b/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">
-            Like to have your own public profile with agreements?
+          <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">
-              <PlusIcon className="mr-1 h-5 w-5" />
-              Create now
+              <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>
--- a/apps/web/src/components/templates/manage-public-template-dialog.tsx
+++ b/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' })
-    .max(MAX_TEMPLATE_PUBLIC_TITLE_LENGTH),
+    .min(1, { message: 'Title is required' })
+    .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' })
-    .max(MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH),
+    .min(1, { message: 'Description is required' })
+    .max(MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH, {
+      message: `Description cannot be longer than ${MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH} characters`,
+    }),
 });

 type TUpdatePublicTemplateFormSchema = z.infer<typeof ZUpdatePublicTemplateFormSchema>;
--- a/packages/lib/server-only/profile/get-public-profile-by-url.ts
+++ b/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) {
-      badge = 'Premium';
+    if (user.teamMembers[0]) {
+      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, [
-        earlyAdopterProductId,
-      ]);
+      const activeEarlyAdopterSub = user.Subscription.find(
+        (subscription) =>
+          subscription.status === SubscriptionStatus.ACTIVE &&
+          earlyAdopterProductId === subscription.planId,
+      );

-      if (isEarlyAdopter) {
-        badge = 'EarlySupporter';
+      if (activeEarlyAdopterSub) {
+        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 || '',
--- a/packages/trpc/server/profile-router/schema.ts
+++ b/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()