Merge branch 'feat/refresh' into feat/open-early-adopters

fix: resolve issues with signing document stickiness

apps/marketing/src/app/(marketing)/open/bar-metrics.tsx

@@ -7,26 +7,25 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
-import { StargazersType } from './page';
+export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
-
+  data: T;
-export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
+  metricKey: keyof T[string];
-export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
-  data: StargazersType;
-  metricKey: MetricsDataKey;
   title: string;
   label: string;
   chartHeight?: number;
+  extraInfo?: JSX.Element;
 };
 
-export const GithubMetric = ({
+export const BarMetric = <T extends Record<string, Record<keyof T[string], unknown>>>({
   className,
   data,
   metricKey,
   title,
   label,
   chartHeight = 400,
+  extraInfo,
   ...props
-}: GithubMetricProps) => {
+}: BarMetricProps<T>) => {
   const formattedData = Object.keys(data)
     .map((key) => ({
       month: formatMonth(key),
@@ -36,7 +35,10 @@ export const GithubMetric = ({
 
   return (
     <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">{title}</h3>
+      <div className="flex items-center px-4">
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <span>{extraInfo}</span>
+      </div>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border pr-2 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={chartHeight}>
@@ -50,7 +52,7 @@ export const GithubMetric = ({
               formatter={(value) => [Number(value), label]}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
+            <Bar dataKey={metricKey as string} fill="hsl(var(--primary))" label={label} />{' '}
           </BarChart>
         </ResponsiveContainer>
       </div>

apps/marketing/src/app/(marketing)/open/funding-raised.tsx

@@ -7,14 +7,14 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
-import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
+export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
+  data: Record<string, string | number>[];
+};
 
-export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
+export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
-
+  const formattedData = data.map((item) => ({
-export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
-  const formattedData = FUNDING_RAISED.map((item) => ({
     amount: Number(item.amount),
-    date: formatMonth(item.date),
+    date: formatMonth(item.date as string),
   }));
 
   return (

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -1,12 +1,14 @@
 import { z } from 'zod';
 
+import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
 import { MetricCard } from '~/app/(marketing)/open/metric-card';
 import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
+import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
-import { GithubMetric } from './gh-metrics';
 import { TeamMembers } from './team-members';
+import { OpenPageTooltip } from './tooltip';
 
 export const revalidate = 3600;
 
@@ -29,9 +31,16 @@ const ZStargazersLiveResponse = z.record(
   }),
 );
 
-export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
+const ZEarlyAdoptersResponse = z.record(
+  z.object({
+    id: z.number(),
+    time: z.string().datetime(),
+    earlyAdopters: z.number(),
+  }),
+);
 
-// const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
+export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
+export type EarlyAdoptersType = z.infer<typeof ZEarlyAdoptersResponse>;
 
 export default async function OpenPage() {
   const {
@@ -65,6 +74,14 @@ export default async function OpenPage() {
     .then(async (res) => res.json())
     .then((res) => ZStargazersLiveResponse.parse(res));
 
+  const EARLY_ADOPTERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats/stripe', {
+    headers: {
+      accept: 'application/json',
+    },
+  })
+    .then(async (res) => res.json())
+    .then((res) => ZEarlyAdoptersResponse.parse(res));
+
   return (
     <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
       <div className="flex flex-col items-center justify-center">
@@ -107,10 +124,20 @@ export default async function OpenPage() {
 
         <SalaryBands className="col-span-12 lg:col-span-6" />
 
-        <FundingRaised className="col-span-12 lg:col-span-6" />
+        <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
 
         <CapTable className="col-span-12 lg:col-span-6" />
-        <GithubMetric
+
+        <BarMetric<EarlyAdoptersType>
+          data={EARLY_ADOPTERS_DATA}
+          metricKey="earlyAdopters"
+          title="Early Adopters"
+          label="Early Adopters"
+          className="col-span-12 lg:col-span-6"
+          extraInfo={<OpenPageTooltip />}
+        />
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="stars"
           title="Github: Total Stars"
@@ -118,29 +145,31 @@ export default async function OpenPage() {
           className="col-span-12 lg:col-span-6"
         />
 
-        <GithubMetric
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="mergedPRs"
           title="Github: Total Merged PRs"
           label="Merged PRs"
           chartHeight={300}
-          className="col-span-12 lg:col-span-4"
+          className="col-span-12 lg:col-span-6"
         />
-        <GithubMetric
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="forks"
           title="Github: Total Forks"
           label="Forks"
           chartHeight={300}
-          className="col-span-12 lg:col-span-4"
+          className="col-span-12 lg:col-span-6"
         />
-        <GithubMetric
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="openIssues"
           title="Github: Total Open Issues"
           label="Open Issues"
           chartHeight={300}
-          className="col-span-12 lg:col-span-4"
+          className="col-span-12 lg:col-span-6"
         />
 
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">

apps/marketing/src/app/(marketing)/open/tooltip.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+
+export function OpenPageTooltip() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            className="ml-2 mt-2.5"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
+              fill="currentColor"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>
+            August and earlier: Active subscribers. September and beyond: Numbers of active
+            subscriptions.
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

apps/web/src/app/(dashboard)/admin/layout.tsx

@@ -12,7 +12,7 @@ export type AdminSectionLayoutProps = {
 };
 
 export default async function AdminSectionLayout({ children }: AdminSectionLayoutProps) {
-  const user = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   if (!isAdmin(user)) {
     redirect('/documents');

apps/web/src/app/(dashboard)/documents/[id]/page.tsx

@@ -30,11 +30,11 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
     redirect('/documents');
   }
 
-  const session = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   const document = await getDocumentById({
     id: documentId,
-    userId: session.id,
+    userId: user.id,
   }).catch(() => null);
 
   if (!document || !document.documentData) {
@@ -50,11 +50,11 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
   const [recipients, fields] = await Promise.all([
     await getRecipientsForDocument({
       documentId,
-      userId: session.id,
+      userId: user.id,
     }),
     await getFieldsForDocument({
       documentId,
-      userId: session.id,
+      userId: user.id,
     }),
   ]);
 
@@ -87,7 +87,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
         <EditDocumentForm
           className="mt-8"
           document={document}
-          user={session}
+          user={user}
           recipients={recipients}
           fields={fields}
           dataUrl={documentDataUrl}

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -25,7 +25,7 @@ export type DocumentsPageProps = {
 };
 
 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  const user = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   const stats = await getStats({
     user,

apps/web/src/app/(dashboard)/layout.tsx

@@ -24,7 +24,7 @@ export default async function AuthenticatedDashboardLayout({
     redirect('/signin');
   }
 
-  const user = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   return (
     <NextAuthProvider session={session}>

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -12,7 +12,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import { LocaleDate } from '~/components/formatter/locale-date';
 
 export default async function BillingSettingsPage() {
-  const user = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   const isBillingEnabled = await getServerComponentFlag('app_billing');
 

apps/web/src/app/(dashboard)/settings/password/page.tsx

@@ -3,7 +3,7 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { PasswordForm } from '~/components/forms/password';
 
 export default async function PasswordSettingsPage() {
-  const user = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   return (
     <div>

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -3,7 +3,7 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { ProfileForm } from '~/components/forms/profile';
 
 export default async function ProfileSettingsPage() {
-  const user = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   return (
     <div>

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -53,7 +53,7 @@ export default async function CompletedSigningPage({
     recipient.email;
 
   return (
-    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
+    <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44">
       {/* Card with recipient */}
       <SigningCard3D name={recipientName} signingCelebrationImage={signingCelebration} />
 

apps/web/src/app/(signing)/sign/[token]/complete/share-button.tsx

@@ -106,7 +106,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
         </Button>
       </DialogTrigger>
 
-      <DialogContent>
+      <DialogContent position="end">
         <DialogHeader>
           <DialogTitle>Share</DialogTitle>
 
@@ -119,7 +119,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
             <span className="font-medium text-blue-400">@documenso</span>
             . Check it out!
             <span className="mt-2 block" />
-            <span className="font-medium text-blue-400">
+            <span className="break-all font-medium text-blue-400">
               {window.location.origin}/share/{shareLink?.slug || '...'}
             </span>
           </div>

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 
 import { completeDocumentWithToken } from '@documenso/lib/server-only/document/complete-document-with-token';
@@ -27,6 +28,7 @@ export type SigningFormProps = {
 
 export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
   const router = useRouter();
+  const { data: session } = useSession();
 
   const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
 
@@ -60,7 +62,11 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
   return (
     <form
       className={cn(
-        'dark:bg-background border-border bg-widget sticky top-20 flex h-full max-h-[80rem] flex-col rounded-xl border px-4 py-6',
+        'dark:bg-background border-border bg-widget sticky flex h-full flex-col rounded-xl border px-4 py-6',
+        {
+          'top-20 max-h-[min(68rem,calc(100vh-6rem))]': session,
+          'top-4 max-h-[min(68rem,calc(100vh-2rem))]': !session,
+        },
       )}
       onSubmit={handleSubmit(onFormSubmit)}
     >

apps/web/src/app/(signing)/sign/[token]/layout.tsx

@@ -10,11 +10,11 @@ export type SigningLayoutProps = {
 };
 
 export default async function SigningLayout({ children }: SigningLayoutProps) {
-  const user = await getServerComponentSession();
+  const { user, session } = await getServerComponentSession();
 
   return (
-    <NextAuthProvider>
+    <NextAuthProvider session={session}>
-      <div className="min-h-screen overflow-hidden">
+      <div className="min-h-screen">
         {user && <AuthenticatedHeader user={user} />}
 
         <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -51,7 +51,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     .then((buffer) => Buffer.from(buffer).toString('base64'))
     .then((data) => `data:application/pdf;base64,${data}`);
 
-  const user = await getServerComponentSession();
+  const { user } = await getServerComponentSession();
 
   if (
     document.status === DocumentStatus.COMPLETED ||
@@ -62,7 +62,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   return (
     <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
-      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <div className="mx-auto w-full max-w-screen-xl">
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
           {document.title}
         </h1>

apps/web/src/app/not-found.tsx

@@ -6,7 +6,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import NotFoundPartial from '~/components/partials/not-found';
 
 export default async function NotFound() {
-  const session = await getServerComponentSession();
+  const { session } = await getServerComponentSession();
 
   return (
     <NotFoundPartial>

apps/web/src/components/forms/edit-document/add-fields.action.ts

@@ -11,10 +11,10 @@ export type AddFieldsActionInput = TAddFieldsFormSchema & {
 export const addFields = async ({ documentId, fields }: AddFieldsActionInput) => {
   'use server';
 
-  const { id: userId } = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   await setFieldsForDocument({
-    userId,
+    userId: user.id,
     documentId,
     fields: fields.map((field) => ({
       id: field.nativeId,

apps/web/src/components/forms/edit-document/add-signers.action.ts

@@ -11,10 +11,10 @@ export type AddSignersActionInput = TAddSignersFormSchema & {
 export const addSigners = async ({ documentId, signers }: AddSignersActionInput) => {
   'use server';
 
-  const { id: userId } = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   await setRecipientsForDocument({
-    userId,
+    userId: user.id,
     documentId,
     recipients: signers.map((signer) => ({
       id: signer.nativeId,

apps/web/src/components/forms/edit-document/add-subject.action.ts

@@ -12,7 +12,7 @@ export type CompleteDocumentActionInput = TAddSubjectFormSchema & {
 export const completeDocument = async ({ documentId, email }: CompleteDocumentActionInput) => {
   'use server';
 
-  const { id: userId } = await getRequiredServerComponentSession();
+  const { user } = await getRequiredServerComponentSession();
 
   if (email.message || email.subject) {
     await upsertDocumentMeta({
@@ -23,7 +23,7 @@ export const completeDocument = async ({ documentId, email }: CompleteDocumentAc
   }
 
   return await sendDocument({
-    userId,
+    userId: user.id,
     documentId,
   });
 };

packages/lib/next-auth/get-server-session.ts

@@ -15,7 +15,7 @@ export const getServerSession = async ({ req, res }: GetServerSessionOptions) =>
   const session = await getNextAuthServerSession(req, res, NEXT_AUTH_OPTIONS);
 
   if (!session || !session.user?.email) {
-    return null;
+    return { user: null, session: null };
   }
 
   const user = await prisma.user.findFirstOrThrow({
@@ -24,14 +24,14 @@ export const getServerSession = async ({ req, res }: GetServerSessionOptions) =>
     },
   });
 
-  return user;
+  return { user, session };
 };
 
 export const getServerComponentSession = async () => {
   const session = await getNextAuthServerSession(NEXT_AUTH_OPTIONS);
 
   if (!session || !session.user?.email) {
-    return null;
+    return { user: null, session: null };
   }
 
   const user = await prisma.user.findFirstOrThrow({
@@ -40,15 +40,15 @@ export const getServerComponentSession = async () => {
     },
   });
 
-  return user;
+  return { user, session };
 };
 
 export const getRequiredServerComponentSession = async () => {
-  const session = await getServerComponentSession();
+  const { user, session } = await getServerComponentSession();
 
-  if (!session) {
+  if (!user || !session) {
     throw new Error('No session found');
   }
 
-  return session;
+  return { user, session };
 };

packages/lib/universal/upload/server-actions.ts

@@ -17,7 +17,7 @@ import { alphaid } from '../id';
 export const getPresignPostUrl = async (fileName: string, contentType: string) => {
   const client = getS3Client();
 
-  const user = await getServerComponentSession();
+  const { user } = await getServerComponentSession();
 
   // Get the basename and extension for the file
   const { name, ext } = path.parse(fileName);

packages/trpc/server/context.ts

@@ -3,7 +3,7 @@ import { CreateNextContextOptions } from '@trpc/server/adapters/next';
 import { getServerSession } from '@documenso/lib/next-auth/get-server-session';
 
 export const createTrpcContext = async ({ req, res }: CreateNextContextOptions) => {
-  const session = await getServerSession({ req, res });
+  const { session, user } = await getServerSession({ req, res });
 
   if (!session) {
     return {
@@ -12,9 +12,16 @@ export const createTrpcContext = async ({ req, res }: CreateNextContextOptions)
     };
   }
 
+  if (!user) {
+    return {
+      session: null,
+      user: null,
+    };
+  }
+
   return {
     session,
-    user: session,
+    user,
   };
 };
 

packages/ui/primitives/dialog.tsx

@@ -11,9 +11,19 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({ className, children, ...props }: DialogPrimitive.DialogPortalProps) => (
+const DialogPortal = ({
+  className,
+  children,
+  position = 'start',
+  ...props
+}: DialogPrimitive.DialogPortalProps & { position?: 'start' | 'end' }) => (
   <DialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+    <div
+      className={cn('fixed inset-0 z-50 flex justify-center sm:items-center', {
+        'items-start': position === 'start',
+        'items-end': position === 'end',
+      })}
+    >
       {children}
     </div>
   </DialogPrimitive.Portal>
@@ -39,14 +49,14 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { position?: 'start' | 'end' }
->(({ className, children, ...props }, ref) => (
+>(({ className, children, position = 'start', ...props }, ref) => (
-  <DialogPortal>
+  <DialogPortal position={position}>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full gap-4 rounded-b-lg border p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
+        'bg-background animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 data-[state=open]:slide-in-from-bottom-10 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full gap-4 rounded-b-lg border p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
         className,
       )}
       {...props}