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

fix: resolve issues with signing document stickiness

.env.example

@@ -50,7 +50,9 @@ NEXT_PRIVATE_SMTP_SECURE=
 NEXT_PRIVATE_SMTP_FROM_NAME="No Reply @ Documenso"
 # REQUIRED: Defines the email address to use as the from address.
 NEXT_PRIVATE_SMTP_FROM_ADDRESS="noreply@documenso.com"
-# OPTIONAL: The API key to use for the MailChannels proxy endpoint.
+# OPTIONAL: The API key to use for Resend.com
+NEXT_PRIVATE_RESEND_API_KEY=
+# OPTIONAL: The API key to use for MailChannels.
 NEXT_PRIVATE_MAILCHANNELS_API_KEY=
 # OPTIONAL: The endpoint to use for the MailChannels API if using a proxy.
 NEXT_PRIVATE_MAILCHANNELS_ENDPOINT=

apps/marketing/content/blog/malfunction-mania.mdx

@@ -51,4 +51,7 @@ As Documenso 1.0 just hit the staging environment, we're calling a MALFUNCTION M
 
 We don't have a specific end date for Malfunction Mania. We plan to move the staging version into the production environment by the end of the month once we're happy with the results. Bug reports and fixes are, of course, always welcome going forward.
 
+Best from Hamburg
+Timur
+
 **[Follow Documenso on Twitter / X](https://documen.so/tw) and [join the Discord server](https://documen.so/discord) to get the latest about Malfunction Mania.**

apps/marketing/content/blog/shop.mdx

@@ -1,12 +1,12 @@
 ---
-title: Shop and Limited Edition "Mania" Shirt
+title: Merch Mania
 description: Happy Launch Week Day 3. The limited edition "Malfunction Mania" shirt is here. Grab it, while you can.
 authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2023-09-27
 tags:
-  - Testing
+  - Merch
   - Rewrite
   - Bounties
 ---
@@ -24,13 +24,13 @@ tags:
   </figcaption>
 </figure>
 
-> TLDR; We have a fancy limited edition shirt. Contribute to Malfunction Mania to get one.
+> TLDR; We have a fancy limited edition shirt. Contribute to [Malfunction Mania](https://documenso.com/blog/malfunction-mania) to get one.
 
-We kicked off [Malfunction Mania](https://documenso.com/blog/malfunction-mania) yesterday, and the first [Issues](https://github.com/documenso/documenso/issues) are coming in. As mentioned, there will be dollar bounties, but we also wanted to celebrate entering the final stage of version 1.0 with something special. This is why we created the limited edition shirt for Malfunction Mania. It will only be available during the runtime of Malfunction Mania. We have yet to set an exact end date, the next event in October, however, is looming, ready to end MM.
+We kicked off [Malfunction Mania](https://documenso.com/blog/malfunction-mania) yesterday, and the first [issues](https://github.com/documenso/documenso/issues) are coming in. As mentioned, there will be dollar bounties, but we also wanted to celebrate entering the final stage of version 1.0 with something special. This is why we created this limited edition shirt. It will only be available during the runtime of Malfunction Mania. We have yet to set an exact end date, the next event in October, however, is looming, ready to end MM.
 
 ## Documenso Merch Shop
 
-The shirt will be available in our [merch shop](https://documen.so/shop) via a unique discount code. While the shirt will be gone after Malfunction Mania, the shop is here to stay and provide a well-deserved reward for great community members and contributors.
+The shirt will be available in our [merch shop](https://documen.so/shop) via a unique discount code. While the shirt will be gone after Malfunction Mania, the shop is here to stay and provide a well-deserved reward for great community members and contributors. All items can be earned by contrinuting to Documenso.
 
 <figure>
   <MdxNextImage
@@ -45,7 +45,7 @@ The shirt will be available in our [merch shop](https://documen.so/shop) via a u
   </figcaption>
 </figure>
 
-## How to get the shirt
+## How earn the shirt
 
 If you have been following us, you know we are not big on formalities but highly value rewarding merit. That being said, any worthwhile contribution has a chance to get one. To inspire, here are a few ideas on how to contribute to securing one:
 
@@ -56,7 +56,9 @@ If you have been following us, you know we are not big on formalities but highly
 - Engage in discussion about the current version and its choices
 - Raise awareness for Malfunction Mania and try out the [version currently in staging](https://documen.so/staging)
 - Review the version with a video, stream, or screenshots and post about it
-- Review existing or create missing documenso
-- ...
+- Review existing or create missing documentation
 
-**[Follow Documenso on Twitter / X](https://documen.so/tw) and [join the Discord server](https://documen.so/discord) to get the latest about Malfunction Mania.**
+Best from Hamburg
+Timur
+
+**[Follow Documenso on Twitter / X](https://documen.so/tw) and [join the Discord server](https://documen.so/discord) to get the latest updates about Malfunction Mania.**

apps/marketing/next.config.js

@@ -56,6 +56,14 @@ const config = {
       },
     ];
   },
+  async rewrites() {
+    return [
+      {
+        source: '/ingest/:path*',
+        destination: 'https://eu.posthog.com/:path*',
+      },
+    ];
+  },
 };
 
 module.exports = withContentlayer(config);

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 MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
-export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
-  data: StargazersType;
-  metricKey: MetricsDataKey;
+export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
+  data: T;
+  metricKey: keyof T[string];
   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, ...props }: FundingRaisedProps) => {
-  const formattedData = FUNDING_RAISED.map((item) => ({
+export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
+  const formattedData = data.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/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts

@@ -177,7 +177,9 @@ export const createSinglePlayerDocument = async (
     },
   );
 
+  // Todo: Handle `downloadLink`
   const template = createElement(DocumentSelfSignedEmailTemplate, {
+    downloadLink: `${process.env.NEXT_PUBLIC_MARKETING_URL}/single-player-mode/${documentToken}`,
     documentName: documentName,
     assetBaseUrl: process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000',
   });
@@ -195,7 +197,6 @@ export const createSinglePlayerDocument = async (
     subject: 'Document signed',
     html: render(template),
     text: render(template, { plainText: true }),
-    attachments: [{ content: Buffer.from(pdfBytes), filename: documentName }],
   });
 
   return documentToken;

apps/web/next.config.js

@@ -29,6 +29,14 @@ const config = {
       transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
     },
   },
+  async rewrites() {
+    return [
+      {
+        source: '/ingest/:path*',
+        destination: 'https://eu.posthog.com/:path*',
+      },
+    ];
+  },
 };
 
 module.exports = config;

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]/loading.tsx

@@ -10,7 +10,7 @@ export default function Loading() {
         Documents
       </Link>
 
-      <h1 className="mt-4 max-w-xs grow-0 truncate text-2xl font-semibold md:text-3xl">
+      <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
         Loading Document...
       </h1>
       <div className="mt-8 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">

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,
     }),
   ]);
 
@@ -65,10 +65,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
         Documents
       </Link>
 
-      <h1
-        className="mt-4 max-w-xs truncate text-2xl font-semibold md:text-3xl"
-        title={document.title}
-      >
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
         {document.title}
       </h1>
 
@@ -90,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/[id]/sent/page.tsx

@@ -10,7 +10,7 @@ export default function DocumentSentPage() {
         Documents
       </Link>
 
-      <h1 className="mt-4 max-w-xs grow-0 truncate text-2xl font-semibold md:text-3xl">
+      <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
         Loading Document...
       </h1>
     </div>

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)}
     >
@@ -120,6 +126,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                 className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 size="lg"
+                disabled={typeof window !== 'undefined' && window.history.length <= 1}
                 onClick={() => router.back()}
               >
                 Cancel

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>
-      <div className="min-h-screen overflow-hidden">
+    <NextAuthProvider session={session}>
+      <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,
   });
 };

package-lock.json

@@ -16958,6 +16958,29 @@
         "node": ">=0.10.5"
       }
     },
+    "node_modules/resend": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-1.1.0.tgz",
+      "integrity": "sha512-it8TIDVT+/gAiJsUlv2tdHuvzwCCv4Zwu+udDqIm/dIuByQwe68TtFDcPccxqpSVVrNCBxxXLzsdT1tsV+P3GA==",
+      "dependencies": {
+        "@react-email/render": "0.0.7",
+        "type-fest": "3.13.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/resend/node_modules/type-fest": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.0.tgz",
+      "integrity": "sha512-Gur3yQGM9qiLNs0KPP7LPgeRbio2QTt4xXouobMCarR0/wyW3F+F/+OWwshg3NG0Adon7uQfSZBpB46NfhoF1A==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -19773,7 +19796,8 @@
       "dependencies": {
         "@react-email/components": "^0.0.7",
         "nodemailer": "^6.9.3",
-        "react-email": "^1.9.4"
+        "react-email": "^1.9.4",
+        "resend": "^1.1.0"
       },
       "devDependencies": {
         "@documenso/tailwind-config": "*",

packages/email/mailer.ts

@@ -1,6 +1,7 @@
 import { createTransport } from 'nodemailer';
 
 import { MailChannelsTransport } from './transports/mailchannels';
+import { ResendTransport } from './transports/resend';
 
 const getTransport = () => {
   const transport = process.env.NEXT_PRIVATE_SMTP_TRANSPORT ?? 'smtp-auth';
@@ -14,6 +15,14 @@ const getTransport = () => {
     );
   }
 
+  if (transport === 'resend') {
+    return createTransport(
+      ResendTransport.makeTransport({
+        apiKey: process.env.NEXT_PRIVATE_RESEND_API_KEY || '',
+      }),
+    );
+  }
+
   if (transport === 'smtp-api') {
     if (!process.env.NEXT_PRIVATE_SMTP_HOST || !process.env.NEXT_PRIVATE_SMTP_APIKEY) {
       throw new Error(

packages/email/package.json

@@ -19,7 +19,8 @@
   "dependencies": {
     "@react-email/components": "^0.0.7",
     "nodemailer": "^6.9.3",
-    "react-email": "^1.9.4"
+    "react-email": "^1.9.4",
+    "resend": "^1.1.0"
   },
   "devDependencies": {
     "@documenso/tailwind-config": "*",

packages/email/template-components/template-document-completed.tsx

@@ -1,9 +1,7 @@
-import { Button, Column, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
-import { TemplateDocumentImage } from './template-document-image';
-
 export interface TemplateDocumentCompletedProps {
   downloadLink: string;
   documentName: string;
@@ -29,20 +27,27 @@ export const TemplateDocumentCompleted = ({
         },
       }}
     >
-      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+      <Section>
+        <Row className="table-fixed">
+          <Column />
+
+          <Column>
+            <Img
+              className="h-42 mx-auto"
+              src={getAssetUrl('/static/document.png')}
+              alt="Documenso"
+            />
+          </Column>
+
+          <Column />
+        </Row>
+      </Section>
 
       <Section>
-        <Section className="mb-4">
-          <Column align="center">
-            <Text className="text-base font-semibold text-[#7AC455]">
-              <Img
-                src={getAssetUrl('/static/completed.png')}
-                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
-              />
-              Completed
-            </Text>
-          </Column>
-        </Section>
+        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
+          <Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
+          Completed
+        </Text>
 
         <Text className="text-primary mb-0 text-center text-lg font-semibold">
           “{documentName}” was signed by all signers
@@ -61,13 +66,10 @@ export const TemplateDocumentCompleted = ({
             Review
           </Button> */}
           <Button
-            className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
             href={downloadLink}
           >
-            <Img
-              src={getAssetUrl('/static/download.png')}
-              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
-            />
+            <Img src={getAssetUrl('/static/download.png')} className="-mb-1 mr-2 inline h-5 w-5" />
             Download
           </Button>
         </Section>

packages/email/template-components/template-document-image.tsx

@@ -1,28 +0,0 @@
-import { Column, Img, Row, Section } from '@react-email/components';
-
-export interface TemplateDocumentImageProps {
-  assetBaseUrl: string;
-  className?: string;
-}
-
-export const TemplateDocumentImage = ({ assetBaseUrl, className }: TemplateDocumentImageProps) => {
-  const getAssetUrl = (path: string) => {
-    return new URL(path, assetBaseUrl).toString();
-  };
-
-  return (
-    <Section className={className}>
-      <Row className="table-fixed">
-        <Column />
-
-        <Column>
-          <Img className="h-42 mx-auto" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </Column>
-
-        <Column />
-      </Row>
-    </Section>
-  );
-};
-
-export default TemplateDocumentImage;

packages/email/template-components/template-document-invite.tsx

@@ -1,9 +1,7 @@
-import { Button, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
-import { TemplateDocumentImage } from './template-document-image';
-
 export interface TemplateDocumentInviteProps {
   inviterName: string;
   inviterEmail: string;
@@ -18,6 +16,10 @@ export const TemplateDocumentInvite = ({
   signDocumentLink,
   assetBaseUrl,
 }: TemplateDocumentInviteProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
   return (
     <Tailwind
       config={{
@@ -28,7 +30,21 @@ export const TemplateDocumentInvite = ({
         },
       }}
     >
-      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+      <Section className="mt-4">
+        <Row className="table-fixed">
+          <Column />
+
+          <Column>
+            <Img
+              className="h-42 mx-auto"
+              src={getAssetUrl('/static/document.png')}
+              alt="Documenso"
+            />
+          </Column>
+
+          <Column />
+        </Row>
+      </Section>
 
       <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">

packages/email/template-components/template-document-pending.tsx

@@ -1,9 +1,7 @@
-import { Column, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
-import { TemplateDocumentImage } from './template-document-image';
-
 export interface TemplateDocumentPendingProps {
   documentName: string;
   assetBaseUrl: string;
@@ -27,20 +25,27 @@ export const TemplateDocumentPending = ({
         },
       }}
     >
-      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+      <Section>
+        <Row className="table-fixed">
+          <Column />
+
+          <Column>
+            <Img
+              className="h-42 mx-auto"
+              src={getAssetUrl('/static/document.png')}
+              alt="Documenso"
+            />
+          </Column>
+
+          <Column />
+        </Row>
+      </Section>
 
       <Section>
-        <Section className="mb-4">
-          <Column align="center">
-            <Text className="text-base font-semibold text-blue-500">
-              <Img
-                src={getAssetUrl('/static/clock.png')}
-                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
-              />
-              Waiting for others
-            </Text>
-          </Column>
-        </Section>
+        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
+          <Img src={getAssetUrl('/static/clock.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
+          Waiting for others
+        </Text>
 
         <Text className="text-primary mb-0 text-center text-lg font-semibold">
           “{documentName}” has been signed

packages/email/template-components/template-document-self-signed.tsx

@@ -1,20 +1,18 @@
-import { Button, Column, Img, Link, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
-import { TemplateDocumentImage } from './template-document-image';
-
 export interface TemplateDocumentSelfSignedProps {
+  downloadLink: string;
   documentName: string;
   assetBaseUrl: string;
 }
 
 export const TemplateDocumentSelfSigned = ({
+  downloadLink,
   documentName,
   assetBaseUrl,
 }: TemplateDocumentSelfSignedProps) => {
-  const signUpUrl = `${process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signup`;
-
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
   };
@@ -29,59 +27,39 @@ export const TemplateDocumentSelfSigned = ({
         },
       }}
     >
-      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
-
       <Section className="flex-row items-center justify-center">
-        <Section>
-          <Column align="center">
-            <Text className="text-base font-semibold text-[#7AC455]">
-              <Img
-                src={getAssetUrl('/static/completed.png')}
-                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
-              />
-              Completed
-            </Text>
-          </Column>
-        </Section>
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
 
-        <Text className="text-primary mb-0 mt-6 text-center text-lg font-semibold">
+        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
+          <Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
+          Completed
+        </Text>
+
+        <Text className="text-primary mb-0 text-center text-lg font-semibold">
           You have signed “{documentName}”
         </Text>
 
-        <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
-          Create a{' '}
-          <Link
-            href={signUpUrl}
-            target="_blank"
-            className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
-          >
-            free account
-          </Link>{' '}
-          to access your signed documents at any time.
+        <Text className="my-1 text-center text-base text-slate-400">
+          Check out our plans to access the full suite of features.
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
           <Button
-            href={signUpUrl}
-            className="mr-4 rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
-          >
-            <Img
-              src={getAssetUrl('/static/user-plus.png')}
-              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
-            />
-            Create account
-          </Button>
-
-          <Button
-            className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
             href="https://documenso.com/pricing"
           >
-            <Img
-              src={getAssetUrl('/static/review.png')}
-              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
-            />
+            <Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
             View plans
           </Button>
+          <Button
+            className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            href={downloadLink}
+          >
+            <Img src={getAssetUrl('/static/download.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            Download
+          </Button>
         </Section>
       </Section>
     </Tailwind>

packages/email/template-components/template-forgot-password.tsx

@@ -1,9 +1,7 @@
-import { Button, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
-import { TemplateDocumentImage } from './template-document-image';
-
 export type TemplateForgotPasswordProps = {
   resetPasswordLink: string;
   assetBaseUrl: string;
@@ -13,6 +11,10 @@ export const TemplateForgotPassword = ({
   resetPasswordLink,
   assetBaseUrl,
 }: TemplateForgotPasswordProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
   return (
     <Tailwind
       config={{
@@ -23,9 +25,11 @@ export const TemplateForgotPassword = ({
         },
       }}
     >
-      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+      <Section className="mt-4 flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
 
-      <Section className="flex-row items-center justify-center">
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
           Forgot your password?
         </Text>

packages/email/template-components/template-reset-password.tsx

@@ -1,9 +1,7 @@
-import { Button, Section, Tailwind, Text } from '@react-email/components';
+import { Img, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
-import { TemplateDocumentImage } from './template-document-image';
-
 export interface TemplateResetPasswordProps {
   userName: string;
   userEmail: string;
@@ -11,6 +9,10 @@ export interface TemplateResetPasswordProps {
 }
 
 export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
   return (
     <Tailwind
       config={{
@@ -21,9 +23,11 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
         },
       }}
     >
-      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+      <Section className="mt-4 flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
 
-      <Section className="flex-row items-center justify-center">
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
           Password updated!
         </Text>
@@ -31,15 +35,6 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
         <Text className="my-1 text-center text-base text-slate-400">
           Your password has been updated.
         </Text>
-
-        <Section className="mb-6 mt-8 text-center">
-          <Button
-            className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
-            href={`${process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signin`}
-          >
-            Sign In
-          </Button>
-        </Section>
       </Section>
     </Tailwind>
   );

packages/email/templates/document-completed.tsx

@@ -15,7 +15,7 @@ import {
   TemplateDocumentCompleted,
   TemplateDocumentCompletedProps,
 } from '../template-components/template-document-completed';
-import { TemplateFooter } from '../template-components/template-footer';
+import TemplateFooter from '../template-components/template-footer';
 
 export type DocumentCompletedEmailTemplateProps = Partial<TemplateDocumentCompletedProps>;
 

packages/email/templates/document-invite.tsx

@@ -18,7 +18,7 @@ import {
   TemplateDocumentInvite,
   TemplateDocumentInviteProps,
 } from '../template-components/template-document-invite';
-import { TemplateFooter } from '../template-components/template-footer';
+import TemplateFooter from '../template-components/template-footer';
 
 export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps> & {
   customBody?: string;

packages/email/templates/document-self-signed.tsx

@@ -15,11 +15,12 @@ import {
   TemplateDocumentSelfSigned,
   TemplateDocumentSelfSignedProps,
 } from '../template-components/template-document-self-signed';
-import { TemplateFooter } from '../template-components/template-footer';
+import TemplateFooter from '../template-components/template-footer';
 
 export type DocumentSelfSignedTemplateProps = TemplateDocumentSelfSignedProps;
 
 export const DocumentSelfSignedEmailTemplate = ({
+  downloadLink = 'https://documenso.com',
   documentName = 'Open Source Pledge.pdf',
   assetBaseUrl = 'http://localhost:3002',
 }: DocumentSelfSignedTemplateProps) => {
@@ -53,6 +54,7 @@ export const DocumentSelfSignedEmailTemplate = ({
                 />
 
                 <TemplateDocumentSelfSigned
+                  downloadLink={downloadLink}
                   documentName={documentName}
                   assetBaseUrl={assetBaseUrl}
                 />

packages/email/templates/forgot-password.tsx

@@ -11,7 +11,7 @@ import {
 
 import config from '@documenso/tailwind-config';
 
-import { TemplateFooter } from '../template-components/template-footer';
+import TemplateFooter from '../template-components/template-footer';
 import {
   TemplateForgotPassword,
   TemplateForgotPasswordProps,

packages/email/templates/reset-password.tsx

@@ -14,7 +14,7 @@ import {
 
 import config from '@documenso/tailwind-config';
 
-import { TemplateFooter } from '../template-components/template-footer';
+import TemplateFooter from '../template-components/template-footer';
 import {
   TemplateResetPassword,
   TemplateResetPasswordProps,

packages/email/transports/resend.ts

@@ -0,0 +1,145 @@
+import { type SentMessageInfo, type Transport } from 'nodemailer';
+import type Mail from 'nodemailer/lib/mailer';
+import type MailMessage from 'nodemailer/lib/mailer/mail-message';
+import { Resend } from 'resend';
+
+const VERSION = '1.0.0';
+
+type ResendTransportOptions = {
+  apiKey: string;
+};
+
+type ResendResponseError = {
+  statusCode: number;
+  name: string;
+  message: string;
+};
+
+const isResendResponseError = (error: unknown): error is ResendResponseError => {
+  // We could use Zod here, but it's not worth the extra bundle size
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'statusCode' in error &&
+    typeof error.statusCode === 'number' &&
+    'name' in error &&
+    typeof error.name === 'string' &&
+    'message' in error &&
+    typeof error.message === 'string'
+  );
+};
+
+/**
+ * Transport for sending email via the Resend SDK.
+ */
+export class ResendTransport implements Transport<SentMessageInfo> {
+  public name = 'ResendMailTransport';
+  public version = VERSION;
+
+  private _client: Resend;
+  private _options: ResendTransportOptions;
+
+  public static makeTransport(options: Partial<ResendTransportOptions>) {
+    return new ResendTransport(options);
+  }
+
+  constructor(options: Partial<ResendTransportOptions>) {
+    const { apiKey = '' } = options;
+
+    this._options = {
+      apiKey,
+    };
+
+    this._client = new Resend(apiKey);
+  }
+
+  public send(mail: MailMessage, callback: (_err: Error | null, _info: SentMessageInfo) => void) {
+    if (!mail.data.to || !mail.data.from) {
+      return callback(new Error('Missing required fields "to" or "from"'), null);
+    }
+
+    this._client
+      .sendEmail({
+        subject: mail.data.subject ?? '',
+        from: this.toResendFromAddress(mail.data.from),
+        to: this.toResendAddresses(mail.data.to),
+        cc: this.toResendAddresses(mail.data.cc),
+        bcc: this.toResendAddresses(mail.data.bcc),
+        html: mail.data.html?.toString() || '',
+        text: mail.data.text?.toString() || '',
+        attachments: this.toResendAttachments(mail.data.attachments),
+      })
+      .then((response) => {
+        if (isResendResponseError(response)) {
+          throw new Error(`[${response.statusCode}]: ${response.name} ${response.message}`);
+        }
+
+        callback(null, response);
+      })
+      .catch((error) => {
+        callback(error, null);
+      });
+  }
+
+  private toResendAddresses(addresses: Mail.Options['to']) {
+    if (!addresses) {
+      return [];
+    }
+
+    if (typeof addresses === 'string') {
+      return [addresses];
+    }
+
+    if (Array.isArray(addresses)) {
+      return addresses.map((address) => {
+        if (typeof address === 'string') {
+          return address;
+        }
+
+        return address.address;
+      });
+    }
+
+    return [addresses.address];
+  }
+
+  private toResendFromAddress(address: Mail.Options['from']) {
+    if (!address) {
+      return '';
+    }
+
+    if (typeof address === 'string') {
+      return address;
+    }
+
+    return `${address.name} <${address.address}>`;
+  }
+
+  private toResendAttachments(attachments: Mail.Options['attachments']) {
+    if (!attachments) {
+      return [];
+    }
+
+    return attachments.map((attachment) => {
+      if (!attachment.filename || !attachment.content) {
+        throw new Error('Attachment is missing filename or content');
+      }
+
+      if (typeof attachment.content === 'string') {
+        return {
+          filename: attachment.filename,
+          content: Buffer.from(attachment.content),
+        };
+      }
+
+      if (attachment.content instanceof Buffer) {
+        return {
+          filename: attachment.filename,
+          content: attachment.content,
+        };
+      }
+
+      throw new Error('Attachment content must be a string or a buffer');
+    });
+  }
+}

packages/email/tsconfig.json

@@ -1,5 +1,10 @@
 {
   "extends": "@documenso/tsconfig/react-library.json",
+  "compilerOptions": {
+    "types": [
+      "@documenso/tsconfig/process-env.d.ts",
+    ]
+  },
   "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts", "**/*.json"],
   "exclude": ["dist", "build", "node_modules"]
 }

packages/lib/constants/feature-flags.ts

@@ -1,3 +1,5 @@
+import { APP_BASE_URL } from './app';
+
 /**
  * The flag name for global session recording feature flag.
  */
@@ -23,7 +25,7 @@ export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
  */
 export function extractPostHogConfig(): { key: string; host: string } | null {
   const postHogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
-  const postHogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST;
+  const postHogHost = `${APP_BASE_URL}/ingest`;
 
   if (!postHogKey || !postHogHost) {
     return null;

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/server-only/document/viewed-document.ts

@@ -14,7 +14,6 @@ export const viewedDocument = async ({ token }: ViewedDocumentOptions) => {
   });
 
   if (!recipient) {
-    console.warn(`No recipient found for token ${token}`);
     return;
   }
 

packages/lib/server-only/recipient/set-recipients-for-document.ts

@@ -57,12 +57,13 @@ export const setRecipientsForDocument = async ({
 
       return {
         ...recipient,
-        ...existing,
+        _persisted: existing,
       };
     })
     .filter((recipient) => {
       return (
-        recipient.sendStatus !== SendStatus.SENT && recipient.signingStatus !== SigningStatus.SIGNED
+        recipient._persisted?.sendStatus !== SendStatus.SENT &&
+        recipient._persisted?.signingStatus !== SigningStatus.SIGNED
       );
     });
 
@@ -72,7 +73,7 @@ export const setRecipientsForDocument = async ({
     linkedRecipients.map((recipient) =>
       prisma.recipient.upsert({
         where: {
-          id: recipient.id ?? -1,
+          id: recipient._persisted?.id ?? -1,
           documentId,
         },
         update: {

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/prisma/migrations/20230605122017_password_reset/migration.sql

@@ -0,0 +1,15 @@
+-- CreateTable
+CREATE TABLE "PasswordResetToken" (
+    "id" SERIAL NOT NULL,
+    "token" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "userId" INTEGER NOT NULL,
+
+    CONSTRAINT "PasswordResetToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PasswordResetToken_token_key" ON "PasswordResetToken"("token");
+
+-- AddForeignKey
+ALTER TABLE "PasswordResetToken" ADD CONSTRAINT "PasswordResetToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

packages/prisma/migrations/20230605164015_expire_password_reset_token/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `expiry` to the `PasswordResetToken` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "PasswordResetToken" ADD COLUMN     "expiry" TIMESTAMP(3) NOT NULL;

packages/prisma/migrations/20230917190854_password_reset_token/migration.sql

@@ -1,3 +1,5 @@
+DROP TABLE IF EXISTS "PasswordResetToken" CASCADE;
+
 -- CreateTable
 CREATE TABLE "PasswordResetToken" (
     "id" SERIAL NOT NULL,

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/tsconfig/process-env.d.ts

@@ -27,7 +27,9 @@ declare namespace NodeJS {
     NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS?: string;
     NEXT_PRIVATE_SIGNING_LOCAL_FILE_ENCODING?: string;
 
-    NEXT_PRIVATE_SMTP_TRANSPORT?: 'mailchannels' | 'smtp-auth' | 'smtp-api';
+    NEXT_PRIVATE_SMTP_TRANSPORT?: 'mailchannels' | 'resend' | 'smtp-auth' | 'smtp-api';
+
+    NEXT_PRIVATE_RESEND_API_KEY?: string;
 
     NEXT_PRIVATE_MAILCHANNELS_API_KEY?: string;
     NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN?: string;

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>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { position?: 'start' | 'end' }
+>(({ className, children, position = 'start', ...props }, ref) => (
+  <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}

turbo.json

@@ -50,6 +50,7 @@
     "NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS",
     "NEXT_PRIVATE_SIGNING_LOCAL_FILE_ENCODING",
     "NEXT_PRIVATE_SMTP_TRANSPORT",
+    "NEXT_PRIVATE_RESEND_API_KEY",
     "NEXT_PRIVATE_MAILCHANNELS_API_KEY",
     "NEXT_PRIVATE_MAILCHANNELS_ENDPOINT",
     "NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN",