diff --git a/apps/web/src/app/(profile)/p/[url]/page.tsx b/apps/web/src/app/(profile)/p/[url]/page.tsx index 53cdee1aa..b19fd05c7 100644 --- 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 (
- + - {publicProfile.name.slice(0, 1).toUpperCase()} + {extractInitials(publicProfile.name)} @@ -54,20 +67,40 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro

{publicProfile.name}

{publicProfile.badge && ( - Profile badge 'premium-user-badge.svg') - .with('EarlySupporter', () => 'early-supporter-badge.svg') - .exhaustive()}`} - height={24} - width={24} - /> + + + Profile badge + + + + Profile badge + +
+

+ {BADGE_DATA[publicProfile.badge.type].name} +

+

+ Since {DateTime.fromJSDate(publicProfile.badge.since).toFormat('LLL ‘yy')} +

+
+ + )}
-
+
{profile.bio}
@@ -94,17 +127,14 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
-

{template.publicTitle}

+

{template.publicTitle}

{template.publicDescription}

diff --git a/apps/web/src/app/(profile)/profile-header.tsx b/apps/web/src/app/(profile)/profile-header.tsx index 5848e46c9..2a968de24 100644 --- 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) => {
- + + + Documenso Logo
-

- Like to have your own public profile with agreements? +

+ Want your own public profile? + + Like to have your own public profile with agreements? +

diff --git a/apps/web/src/components/templates/manage-public-template-dialog.tsx b/apps/web/src/components/templates/manage-public-template-dialog.tsx index 322290488..dfe9351e6 100644 --- 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; diff --git a/packages/lib/server-only/profile/get-public-profile-by-url.ts b/packages/lib/server-only/profile/get-public-profile-by-url.ts index afac40de8..87417903e 100644 --- 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 || '', diff --git a/packages/trpc/server/profile-router/schema.ts b/packages/trpc/server/profile-router/schema.ts index 6e06ab867..9417b8279 100644 --- 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()