chore: upgrade to next 14.0.0

fix: missing content updates
fix: change sign in links
2026-07-02 09:10:42 +10:00 · 2023-10-27 15:14:04 +11:00 · 2023-10-26 16:58:42 +11:00 · 2023-10-26 16:40:25 +11:00 · 2023-10-26 14:26:10 +11:00 · 2023-10-26 13:21:31 +11:00
93 changed files with 4721 additions and 4721 deletions
@@ -31,6 +31,7 @@ yarn-error.log*

 # turbo
 .turbo
+.turbo-cookie

 # vercel
 .vercel
@@ -1,6 +1,6 @@
 ---
 title: 'Building Documenso — Part 1: Certificates'
-description: This is the first part of the new Building Documenso series, where I describe the challenges and design choices that we make while building the world’s most open signing platform.
+description: In today's fast-paced world, productivity and efficiency are crucial for success, both in personal and professional endeavors. We all strive to make the most of our time and energy to achieve our goals effectively. However, it's not always easy to stay on track and maintain peak performance. In this blog post, we'll explore 10 valuable tips to help you boost productivity and efficiency in your daily life.
 authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
@@ -79,7 +79,7 @@ There weren’t any deeper reasons we choose WiseKey, other than they offered wh
 Do you have questions or thoughts about this? As always, let me know in the comments, on <a href="http://twitter.com/eltimuro" target="_blank">twitter.com/eltimuro</a>
 or directly: <a href="https://documen.so/timur" target="_blank">documen.so/timur</a>

-Join the self-hoster community here: <a href="https://documen.so/discord" target="_blank">https://documen.so/discord</a>
+Join the self-hoster community here: <a href="https://documenso.slack.com/" target="_blank">https://documenso.slack.com/</a>

 Best from Hamburg

@@ -0,0 +1,49 @@
+---
+title: Open Sourcing Documenso's Design
+description: It's day 1 of our first launch week. We are kicking it off by open sourcing Documenso's design system! Let's go..
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-09-25
+tags:
+  - Design
+  - Open Source
+  - Community
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/designsystem.png"
+    width="1260"
+    height="630"
+    alt="Documenso's Design System"
+  />
+
+  <figcaption className="text-center">
+   Documenso's Design System ✨
+  </figcaption>
+</figure>
+
+> TLDR; Our design system is OSS under MIT at [design.documenso.com](https://design.documenso.com)
+
+Today, we are open sourcing our design system, lovingly crafted by [Thilo](https://twitter.com/thilokonzok). The system is public on Figma and will be available at [design.documenso.com](https://design.documenso.com) from here on out.
+We are publishing it under the MIT License so everyone can share, remix, and use it as it helps them most.
+
+We chose to start our first launch week with a design topic to emphasize the role design will play in Documenso's company and community culture. As it is historically difficult to bring together open-source software with great design, this is our first step towards encouraging a more design-driven COSS (Commercial Open Source) movement.
+
+## Designers Welcome
+
+We added a designer role in our Discord to create a space for designers to explore and discuss design-related topics of Documenso and signing in general. In the future, we want to foster more coding contributions and start a design culture around the product. As it is much more difficult to incorporate design contributions, we have yet to find a clear plan of what that will look like. I would like to see contributions around stuff we are NOT working on. Designs in that area can inspire and start discussions without the complexities of implementing them immediately — a free-thinking space around everything Documenso. Having a free mandate to design without restriction can create many exciting ideas. Some Ideas worth exploring:
+
+## Areas for design contributions
+
+- Explorations of exciting aspects of signing and document handling:
+- What does signing look like when we no longer have skeuomorphic signatures?
+- What is signing if we move beyond paper-inspired documents?
+- What would the government process look like using Documenso?
+- Solutions Concepts for features further down the roadmap, e.g., Widgets in websites
+
+These are fascinating ideas for explorative design. They won't be built 1:1 but shape how we think about signing and where it can go, which is even more critical. If you are interested in product design, you are invited to join our [Discord](https://documen.so/discord) and discuss the future of signing design or the future of Documenso's design system. Also let me know what you think on [X (formerly Twitter)](https://x.com/eltimuro).
+
+Best from Hamburg\
+Timur
@@ -24,8 +24,6 @@ tags:
  </figcaption>
 </figure>

-> TLDR; we have 100 early adopter accounts available at a great price. [Secure yours now](https://documenso.com/pricing).
-
 ## Community-Driven Development

 As we ramp up hiring and development speed for Documenso, I want to discuss how we plan to build its core version.
@@ -50,7 +48,7 @@ Documenso currently runs the community reviewed 0.9.1 version. Getting from here

 ## Extending our open metrics

-As part of our ongoing effort to be open and transparent in our doing, we are adding "Early Adopters" to our [/open page](https://documenso.com/open) page. After we exceed the early adopter slots, this metric will transition to "Customers". When no more early adopter seats can be claimed, the early adopter plan will transition to a standard paid plan. It will still be priced at $30/mo., but will no longer include upcoming features or unlimited seats. You can [claim your early adopter account here](https://documenso.com/pricing).
+As part of our ongoing effort to be open and transparent in our doing, we are adding "Early Adopters" to our [/open page](https://documenso.com/open) page. After we exceed the early adopter slots, this metric will transition to "Customers". When no more early adopter seats can be claimed, the early adopter plan will transition to a standard paid plan. It will still be priced at $30/mo., but will no longer include upcoming features or unlimited seats.

 If you have any questions or comments, please reach out on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord).

@@ -16,7 +16,7 @@ tags:
    src="/blog/mm.png"
    width="1260"
    height="630"
-    alt="Malfunctioning Documenso Logo inbroken colors"
+    alt="Malfunctioning Documenso Logo in broken colors"
  />

  <figcaption className="text-center">
@@ -49,9 +49,9 @@ As Documenso 1.0 just hit the staging environment, we're calling a MALFUNCTION M
 - Fix bugs by creating a Pull Request (PR);
 - Look over and add missing documentation/ Quickstarts and other useful resources.

-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

+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.
+
 **[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.**
@@ -12,7 +12,7 @@ tags:

 Since we launched [Documenso 0.9 on Product Hunt](https://producthunt.com/products/documenso#documenso) last May, the team's been hard at work behind the scenes to ramp up development and design to deliver an excellent next version.

-Last week, Lucas shared the reasoning on [why we're doing a rewrite](https://documenso.com/blog/why-were-doing-a-rewrite).
+Last week, Lucas shared the reasoning how [why we're doing a rewrite](https://documenso.com/blog/why-were-doing-a-rewrite).

 Today, I'm pleased to share with you a preview of the next Documenso.

@@ -0,0 +1,42 @@
+---
+title: Design System
+---
+
+# We're building a beautiful, open-source alternative to DocuSign
+
+> Read more about our design culture here:
+>
+> [https://documenso.com/blog/design-system](https://documenso.com/blog/design-system)
+
+At Documenso, we aim to be a design-driven company.
+
+We believe that design isn't just about how things look, but also how they work. We want to make sure that the product is easy to use and intuitive. We also want to ensure that the website, desktop and mobile apps are consistent and look and feel like they belong together.
+
+To achieve this, we've created Documenso's design system containing tokens, primitives, and components, screens, and brand assets.
+
+We're open-sourcing this design system so you can see how we build the product and think about design as a whole.
+
+## Check out the design system
+
+<iframe
+  src="https://documen.so/design-system-embed"
+  className="aspect-square w-full border-none"
+  frameBorder="0"
+/>
+
+## Remix and Share the community version on Figma
+
+<a href="https://documen.so/design" target="_blank">
+<figure>
+  <MdxNextImage
+    src="/blog/designsystem.png"
+    width="1260"
+    height="630"
+    alt="Documenso's Design System"
+  />
+
+  <figcaption className="text-center">
+   Documenso's Design System ✨
+  </figcaption>
+</figure>
+</a>
@@ -2,14 +2,17 @@
 const path = require('path');
 const { withContentlayer } = require('next-contentlayer');

-require('dotenv').config({
-  path: path.join(__dirname, '../../.env.local'),
+const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
+
+ENV_FILES.forEach((file) => {
+  require('dotenv').config({
+    path: path.join(__dirname, `../../${file}`),
+  });
 });

 /** @type {import('next').NextConfig} */
 const config = {
  experimental: {
-    serverActions: true,
    serverActionsBodySizeLimit: '10mb',
  },
  reactStrictMode: true,
@@ -22,6 +25,14 @@ const config = {
      transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
    },
  },
+  webpack: (config, { isServer }) => {
+    // fixes: Module not found: Can’t resolve ‘../build/Release/canvas.node’
+    if (isServer) {
+      config.resolve.alias.canvas = false;
+    }
+
+    return config;
+  },
  async headers() {
    return [
      {
@@ -6,7 +6,7 @@
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
-    "start": "next start",
+    "start": "next start -p 3001",
    "lint": "next lint",
    "clean": "rimraf .next && rimraf node_modules",
    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
@@ -21,8 +21,8 @@
    "framer-motion": "^10.12.8",
    "lucide-react": "^0.279.0",
    "micro": "^10.0.1",
-    "next": "13.4.19",
-    "next-auth": "4.22.3",
+    "next": "14.0.0",
+    "next-auth": "4.24.3",
    "next-contentlayer": "^0.3.4",
    "next-plausible": "^3.10.1",
    "perfect-freehand": "^1.2.0",
@@ -34,8 +34,8 @@
    "react-icons": "^4.11.0",
    "recharts": "^2.7.2",
    "sharp": "0.32.5",
-    "typescript": "5.1.6",
-    "zod": "^3.21.4"
+    "typescript": "5.2.2",
+    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "20.1.0",
@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server';
+import { ImageResponse } from 'next/og';

 import { allBlogPosts } from 'contentlayer/generated';

@@ -32,10 +32,21 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
  }

  const session = await stripe.checkout.sessions.retrieve(sessionId);
+  const customerId = typeof session.customer === 'string' ? session.customer : session.customer?.id;
+
+  if (!customerId) {
+    redirect('/');
+  }
+
+  const customer = await stripe.customers.retrieve(customerId);
+
+  if (!customer || customer.deleted) {
+    redirect('/');
+  }

  const user = await prisma.user.findFirst({
    where: {
-      id: Number(session.client_reference_id),
+      id: Number(customer.metadata.userId),
    },
  });

@@ -165,7 +176,7 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
        </p>

        <Link
-          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`}
+          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signin`}
          target="_blank"
          className="mt-4 block"
        >
@@ -46,6 +46,9 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
            <XAxis dataKey="month" />
            <YAxis />
            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
              itemStyle={{
                color: 'hsl(var(--primary-foreground))',
              }}
@@ -71,7 +71,7 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
            </Pie>
            <Legend
              formatter={(value) => {
-                return <span className="text-sm text-black">{value}</span>;
+                return <span className="text-foreground text-sm">{value}</span>;
              }}
            />
            <Tooltip
@@ -35,6 +35,9 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
              }
            />
            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
              itemStyle={{
                color: 'hsl(var(--primary-foreground))',
              }}
@@ -6,6 +6,7 @@ import {
  AccordionItem,
  AccordionTrigger,
 } from '@documenso/ui/primitives/accordion';
+import { Button } from '@documenso/ui/primitives/button';

 import { PricingTable } from '~/components/(marketing)/pricing-table';

@@ -34,6 +35,26 @@ export default function PricingPage() {
        <PricingTable />
      </div>

+      <div className="mx-auto mt-36 max-w-2xl">
+        <h2 className="text-center text-2xl font-semibold">
+          None of these work for you? Try self-hosting!
+        </h2>
+
+        <p className="text-muted-foreground mt-4 text-center leading-relaxed">
+          Our self-hosted option is great for small teams and individuals who need a simple
+          solution. You can use our docker based setup to get started in minutes. Take control with
+          full customizability and data ownership.
+        </p>
+
+        <div className="mt-4 flex justify-center">
+          <Button variant="outline" size="lg" className="rounded-full hover:cursor-pointer" asChild>
+            <Link href="https://github.com/documenso/documenso" target="_blank">
+              Get Started
+            </Link>
+          </Button>
+        </div>
+      </div>
+
      <div className="mx-auto mt-36 max-w-2xl">
        {/* FAQ Section */}

@@ -1,6 +1,7 @@
 import { notFound } from 'next/navigation';

 import { getDocumentAndRecipientByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { DocumentStatus } from '@documenso/prisma/client';

 import { SinglePlayerModeSuccess } from '~/components/(marketing)/single-player-mode/single-player-mode-success';
@@ -26,5 +27,7 @@ export default async function SinglePlayerModeSuccessPage({
    return notFound();
  }

-  return <SinglePlayerModeSuccess document={document} />;
+  const signatures = await getRecipientSignatures({ recipientId: document.Recipient.id });
+
+  return <SinglePlayerModeSuccess document={document} signatures={signatures} />;
 }
@@ -0,0 +1,262 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { base64 } from '@documenso/lib/universal/base64';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { DocumentDataType, Field, Prisma, Recipient } from '@documenso/prisma/client';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
+import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
+import { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
+import { AddSignatureFormPartial } from '@documenso/ui/primitives/document-flow/add-signature';
+import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import {
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerHeader,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { createSinglePlayerDocument } from '~/components/(marketing)/single-player-mode/create-single-player-document.action';
+
+type SinglePlayerModeStep = 'fields' | 'sign';
+
+// !: This entire file is a hack to get around failed prerendering of
+// !: the Single Player Mode page. This regression was introduced during
+// !: the upgrade of Next.js to v13.5.x.
+export const SinglePlayerClient = () => {
+  const analytics = useAnalytics();
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const [uploadedFile, setUploadedFile] = useState<{ file: File; fileBase64: string } | null>();
+
+  const [step, setStep] = useState<SinglePlayerModeStep>('fields');
+  const [fields, setFields] = useState<Field[]>([]);
+
+  const documentFlow: Record<SinglePlayerModeStep, DocumentFlowStep> = {
+    fields: {
+      title: 'Add document',
+      description: 'Upload a document and add fields.',
+      stepIndex: 1,
+      onBackStep: uploadedFile
+        ? () => {
+            setUploadedFile(null);
+            setFields([]);
+          }
+        : undefined,
+      onNextStep: () => setStep('sign'),
+    },
+    sign: {
+      title: 'Sign',
+      description: 'Enter your details.',
+      stepIndex: 2,
+      onBackStep: () => setStep('fields'),
+    },
+  };
+
+  const currentDocumentFlow = documentFlow[step];
+
+  useEffect(() => {
+    analytics.startSessionRecording('marketing_session_recording_spm');
+
+    return () => {
+      analytics.stopSessionRecording();
+    };
+  }, [analytics]);
+
+  /**
+   * Insert the selected fields into the local state.
+   */
+  const onFieldsSubmit = (data: TAddFieldsFormSchema) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    setFields(
+      data.fields.map((field, i) => ({
+        id: i,
+        documentId: -1,
+        recipientId: -1,
+        type: field.type,
+        page: field.pageNumber,
+        positionX: new Prisma.Decimal(field.pageX),
+        positionY: new Prisma.Decimal(field.pageY),
+        width: new Prisma.Decimal(field.pageWidth),
+        height: new Prisma.Decimal(field.pageHeight),
+        customText: '',
+        inserted: false,
+      })),
+    );
+
+    analytics.capture('Marketing: SPM - Fields added');
+
+    documentFlow.fields.onNextStep?.();
+  };
+
+  /**
+   * Upload, create, sign and send the document.
+   */
+  const onSignSubmit = async (data: TAddSignatureFormSchema) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    try {
+      const putFileData = await putFile(uploadedFile.file);
+
+      const documentToken = await createSinglePlayerDocument({
+        documentData: {
+          type: putFileData.type,
+          data: putFileData.data,
+        },
+        documentName: uploadedFile.file.name,
+        signer: data,
+        fields: fields.map((field) => ({
+          page: field.page,
+          type: field.type,
+          positionX: field.positionX.toNumber(),
+          positionY: field.positionY.toNumber(),
+          width: field.width.toNumber(),
+          height: field.height.toNumber(),
+        })),
+      });
+
+      analytics.capture('Marketing: SPM - Document signed', {
+        signer: data.email,
+      });
+
+      router.push(`/singleplayer/${documentToken}/success`);
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const placeholderRecipient: Recipient = {
+    id: -1,
+    documentId: -1,
+    email: '',
+    name: '',
+    token: '',
+    expired: null,
+    signedAt: null,
+    readStatus: 'OPENED',
+    signingStatus: 'NOT_SIGNED',
+    sendStatus: 'NOT_SENT',
+  };
+
+  const onFileDrop = async (file: File) => {
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const fileBase64 = base64.encode(new Uint8Array(arrayBuffer));
+
+      setUploadedFile({
+        file,
+        fileBase64,
+      });
+
+      analytics.capture('Marketing: SPM - Document uploaded');
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="mt-6 sm:mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">Single Player Mode</h1>
+
+        <p className="text-foreground mx-auto mt-4 max-w-[50ch] text-lg leading-normal">
+          Create a{' '}
+          <Link
+            href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+            target="_blank"
+            className="hover:text-foreground/80 font-semibold transition-colors"
+          >
+            free account
+          </Link>{' '}
+          or view our{' '}
+          <Link
+            href={'/pricing'}
+            target="_blank"
+            className="hover:text-foreground/80 font-semibold transition-colors"
+          >
+            community plan
+          </Link>{' '}
+          for exclusive features, including the ability to collaborate with multiple signers.
+        </p>
+      </div>
+
+      <div className="mt-12 grid w-full grid-cols-12 gap-8">
+        <div className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7">
+          {uploadedFile ? (
+            <Card gradient>
+              <CardContent className="p-2">
+                <LazyPDFViewer
+                  documentData={{
+                    id: '',
+                    data: uploadedFile.fileBase64,
+                    initialData: uploadedFile.fileBase64,
+                    type: DocumentDataType.BYTES_64,
+                  }}
+                />
+              </CardContent>
+            </Card>
+          ) : (
+            <DocumentDropzone className="h-[80vh] max-h-[60rem]" onDrop={onFileDrop} />
+          )}
+        </div>
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <DocumentFlowFormContainer className="top-24" onSubmit={(e) => e.preventDefault()}>
+            <DocumentFlowFormContainerHeader
+              title={currentDocumentFlow.title}
+              description={currentDocumentFlow.description}
+            />
+
+            {/* Add fields to PDF page. */}
+            {step === 'fields' && (
+              <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
+                <AddFieldsFormPartial
+                  documentFlow={documentFlow.fields}
+                  hideRecipients={true}
+                  recipients={uploadedFile ? [placeholderRecipient] : []}
+                  numberOfSteps={Object.keys(documentFlow).length}
+                  fields={fields}
+                  onSubmit={onFieldsSubmit}
+                />
+              </fieldset>
+            )}
+
+            {/* Enter user details and signature. */}
+            {step === 'sign' && (
+              <AddSignatureFormPartial
+                documentFlow={documentFlow.sign}
+                numberOfSteps={Object.keys(documentFlow).length}
+                fields={fields}
+                onSubmit={onSignSubmit}
+                requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
+                requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
+              />
+            )}
+          </DocumentFlowFormContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -1,244 +1,10 @@
-'use client';
+import { SinglePlayerClient } from './client';

-import { useEffect, useState } from 'react';
+export const revalidate = 0;

-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { base64 } from '@documenso/lib/universal/base64';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
-import { Field, Prisma, Recipient } from '@documenso/prisma/client';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
-import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
-import { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
-import { AddSignatureFormPartial } from '@documenso/ui/primitives/document-flow/add-signature';
-import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
-import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerHeader,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { createSinglePlayerDocument } from '~/components/(marketing)/single-player-mode/create-single-player-document.action';
-
-type SinglePlayerModeStep = 'fields' | 'sign';
-
-export default function SinglePlayerModePage() {
-  const analytics = useAnalytics();
-  const router = useRouter();
-
-  const { toast } = useToast();
-
-  const [uploadedFile, setUploadedFile] = useState<{ file: File; fileBase64: string } | null>();
-
-  const [step, setStep] = useState<SinglePlayerModeStep>('fields');
-  const [fields, setFields] = useState<Field[]>([]);
-
-  const documentFlow: Record<SinglePlayerModeStep, DocumentFlowStep> = {
-    fields: {
-      title: 'Add document',
-      description: 'Upload a document and add fields.',
-      stepIndex: 1,
-      onBackStep: uploadedFile
-        ? () => {
-            setUploadedFile(null);
-            setFields([]);
-          }
-        : undefined,
-      onNextStep: () => setStep('sign'),
-    },
-    sign: {
-      title: 'Sign',
-      description: 'Enter your details.',
-      stepIndex: 2,
-      onBackStep: () => setStep('fields'),
-    },
-  };
-
-  const currentDocumentFlow = documentFlow[step];
-
-  useEffect(() => {
-    analytics.startSessionRecording('marketing_session_recording_spm');
-
-    return () => {
-      analytics.stopSessionRecording();
-    };
-  }, [analytics]);
-
-  /**
-   * Insert the selected fields into the local state.
-   */
-  const onFieldsSubmit = (data: TAddFieldsFormSchema) => {
-    if (!uploadedFile) {
-      return;
-    }
-
-    setFields(
-      data.fields.map((field, i) => ({
-        id: i,
-        documentId: -1,
-        recipientId: -1,
-        type: field.type,
-        page: field.pageNumber,
-        positionX: new Prisma.Decimal(field.pageX),
-        positionY: new Prisma.Decimal(field.pageY),
-        width: new Prisma.Decimal(field.pageWidth),
-        height: new Prisma.Decimal(field.pageHeight),
-        customText: '',
-        inserted: false,
-      })),
-    );
-
-    analytics.capture('Marketing: SPM - Fields added');
-
-    documentFlow.fields.onNextStep?.();
-  };
-
-  /**
-   * Upload, create, sign and send the document.
-   */
-  const onSignSubmit = async (data: TAddSignatureFormSchema) => {
-    if (!uploadedFile) {
-      return;
-    }
-
-    try {
-      const putFileData = await putFile(uploadedFile.file);
-
-      const documentToken = await createSinglePlayerDocument({
-        documentData: {
-          type: putFileData.type,
-          data: putFileData.data,
-        },
-        documentName: uploadedFile.file.name,
-        signer: data,
-        fields: fields.map((field) => ({
-          page: field.page,
-          type: field.type,
-          positionX: field.positionX.toNumber(),
-          positionY: field.positionY.toNumber(),
-          width: field.width.toNumber(),
-          height: field.height.toNumber(),
-        })),
-      });
-
-      analytics.capture('Marketing: SPM - Document signed', {
-        signer: data.email,
-      });
-
-      router.push(`/singleplayer/${documentToken}/success`);
-    } catch {
-      toast({
-        title: 'Something went wrong',
-        description: 'Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const placeholderRecipient: Recipient = {
-    id: -1,
-    documentId: -1,
-    email: '',
-    name: '',
-    token: '',
-    expired: null,
-    signedAt: null,
-    readStatus: 'OPENED',
-    signingStatus: 'NOT_SIGNED',
-    sendStatus: 'NOT_SENT',
-  };
-
-  const onFileDrop = async (file: File) => {
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      const base64String = base64.encode(new Uint8Array(arrayBuffer));
-
-      setUploadedFile({
-        file,
-        fileBase64: `data:application/pdf;base64,${base64String}`,
-      });
-
-      analytics.capture('Marketing: SPM - Document uploaded');
-    } catch {
-      toast({
-        title: 'Something went wrong',
-        description: 'Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <div className="mt-6 sm:mt-12">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold lg:text-5xl">Single Player Mode</h1>
-
-        <p className="text-foreground mx-auto mt-4 max-w-[50ch] text-lg leading-normal">
-          View our{' '}
-          <Link
-            href={'/pricing'}
-            target="_blank"
-            className="hover:text-foreground/80 font-semibold transition-colors"
-          >
-            community plan
-          </Link>{' '}
-          for exclusive features, including the ability to collaborate with multiple signers.
-        </p>
-      </div>
-
-      <div className="mt-12 grid w-full grid-cols-12 gap-8">
-        <div className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7">
-          {uploadedFile ? (
-            <Card gradient>
-              <CardContent className="p-2">
-                <LazyPDFViewer document={uploadedFile.fileBase64} />
-              </CardContent>
-            </Card>
-          ) : (
-            <DocumentDropzone className="h-[80vh] max-h-[60rem]" onDrop={onFileDrop} />
-          )}
-        </div>
-
-        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-          <DocumentFlowFormContainer className="top-24" onSubmit={(e) => e.preventDefault()}>
-            <DocumentFlowFormContainerHeader
-              title={currentDocumentFlow.title}
-              description={currentDocumentFlow.description}
-            />
-
-            {/* Add fields to PDF page. */}
-            {step === 'fields' && (
-              <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
-                <AddFieldsFormPartial
-                  documentFlow={documentFlow.fields}
-                  hideRecipients={true}
-                  recipients={uploadedFile ? [placeholderRecipient] : []}
-                  numberOfSteps={Object.keys(documentFlow).length}
-                  fields={fields}
-                  onSubmit={onFieldsSubmit}
-                />
-              </fieldset>
-            )}
-
-            {/* Enter user details and signature. */}
-            {step === 'sign' && (
-              <AddSignatureFormPartial
-                documentFlow={documentFlow.sign}
-                numberOfSteps={Object.keys(documentFlow).length}
-                fields={fields}
-                onSubmit={onSignSubmit}
-                requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
-                requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
-              />
-            )}
-          </DocumentFlowFormContainer>
-        </div>
-      </div>
-    </div>
-  );
+// !: This entire file is a hack to get around failed prerendering of
+// !: the Single Player Mode page. This regression was introduced during
+// !: the upgrade of Next.js to v13.5.x.
+export default function SingleplayerPage() {
+  return <SinglePlayerClient />;
 }
@@ -30,7 +30,7 @@ import { claimPlan } from '~/api/claim-plan/fetcher';
 import { FormErrorMessage } from '../form/form-error-message';

 export const ZClaimPlanDialogFormSchema = z.object({
-  name: z.string().min(3),
+  name: z.string().trim().min(3, { message: 'Please enter a valid name.' }),
  email: z.string().email(),
 });

@@ -8,10 +8,10 @@ import { createPortal } from 'react-dom';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { useWindowSize } from '@documenso/lib/client-only/hooks/use-window-size';

-export default function ConfettiScreen({
+export const ConfettiScreen = ({
  numberOfPieces: numberOfPiecesProp = 200,
  ...props
-}: React.ComponentPropsWithoutRef<typeof Confetti> & { duration?: number }) {
+}: React.ComponentPropsWithoutRef<typeof Confetti> & { duration?: number }) => {
  const isMounted = useIsMounted();
  const { width, height } = useWindowSize();

@@ -43,4 +43,4 @@ export default function ConfettiScreen({
    />,
    document.body,
  );
-}
+};
@@ -25,10 +25,11 @@ const FOOTER_LINKS = [
  { href: '/pricing', text: 'Pricing' },
  { href: '/singleplayer', text: 'Singleplayer' },
  { href: '/blog', text: 'Blog' },
+  { href: '/design-system', text: 'Design' },
  { href: '/open', text: 'Open' },
  { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },
  { href: 'https://status.documenso.com', text: 'Status', target: '_blank' },
-  { href: 'mailto:support@documenso.com', text: 'Support' },
+  { href: 'mailto:support@documenso.com', text: 'Support', target: '_blank' },
  { href: '/privacy', text: 'Privacy' },
 ];

@@ -63,7 +64,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
          </div>
        </div>

-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
+        <div className="grid max-w-xs flex-1 grid-cols-2 gap-x-4 gap-y-2">
          {FOOTER_LINKS.map((link, index) => (
            <Link
              key={index}
@@ -66,7 +66,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
        </Link>

        <Link
-          href="https://app.documenso.com/login"
+          href="https://app.documenso.com/signin"
          target="_blank"
          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
        >
@@ -39,13 +39,14 @@ export const MENU_NAVIGATION_LINKS = [
  {
    href: 'mailto:support@documenso.com',
    text: 'Support',
+    target: '_blank',
  },
  {
    href: '/privacy',
    text: 'Privacy',
  },
  {
-    href: 'https://app.documenso.com/login',
+    href: 'https://app.documenso.com/signin',
    text: 'Sign in',
  },
 ];
@@ -78,7 +79,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
            staggerChildren: 0.03,
          }}
        >
-          {MENU_NAVIGATION_LINKS.map(({ href, text }) => (
+          {MENU_NAVIGATION_LINKS.map(({ href, text, target }) => (
            <motion.div
              key={href}
              variants={{
@@ -100,6 +101,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
                className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
                href={href}
                onClick={() => handleMenuItemClick()}
+                target={target}
              >
                {text}
              </Link>
@@ -1,6 +1,6 @@
 'use client';

-import { HTMLAttributes, useMemo, useState } from 'react';
+import { HTMLAttributes, useState } from 'react';

 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
@@ -11,8 +11,6 @@ import { usePlausible } from 'next-plausible';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';

-import { ClaimPlanDialog } from './claim-plan-dialog';
-
 export type PricingTableProps = HTMLAttributes<HTMLDivElement>;

 const SELECTED_PLAN_BAR_LAYOUT_ID = 'selected-plan-bar';
@@ -27,14 +25,6 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
      : 'MONTHLY',
  );

-  const planId = useMemo(() => {
-    if (period === 'MONTHLY') {
-      return process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;
-    }
-
-    return process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID;
-  }, [period]);
-
  return (
    <div className={cn('', className)} {...props}>
      <div className="flex items-center justify-center gap-x-6">
@@ -86,33 +76,33 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {

      <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 md:grid-cols-2 lg:grid-cols-3">
        <div
-          data-plan="self-hosted"
+          data-plan="free"
          className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
        >
-          <p className="text-foreground text-4xl font-medium">Self Hosted</p>
-          <p className="text-primary mt-2.5 text-xl font-medium">Free</p>
+          <p className="text-foreground text-4xl font-medium">Free Plan</p>
+          <p className="text-primary mt-2.5 text-xl font-medium">$0</p>

          <p className="text-foreground mt-4 max-w-[30ch] text-center">
-            For small teams and individuals who need a simple solution
+            For small teams and individuals with basic needs.
          </p>

-          <Link
-            href="https://github.com/documenso/documenso"
-            target="_blank"
-            className="mt-6"
-            onClick={() => event('view-github')}
-          >
-            <Button className="rounded-full text-base">View on Github</Button>
-          </Link>
+          <Button className="rounded-full text-base" asChild>
+            <Link
+              href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+              target="_blank"
+              className="mt-6"
+            >
+              Signup Now
+            </Link>
+          </Button>

          <div className="mt-8 flex w-full flex-col divide-y">
-            <p className="text-foreground py-4 font-medium">Host your own instance</p>
-            <p className="text-foreground py-4">Full Control</p>
-            <p className="text-foreground py-4">Customizability</p>
-            <p className="text-foreground py-4">Docker Ready</p>
-            <p className="text-foreground py-4">Community Support</p>
-            <p className="text-foreground py-4">Free, Forever</p>
+            <p className="text-foreground py-4">5 standard documents per month</p>
+            <p className="text-foreground py-4">Up to 10 recipients per document</p>
+            <p className="text-foreground py-4">No credit card required</p>
          </div>
+
+          <div className="flex-1" />
        </div>

        <div
@@ -131,9 +121,9 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
            For fast-growing companies that aim to scale across multiple teams.
          </p>

-          <ClaimPlanDialog planId={planId}>
-            <Button className="mt-6 rounded-full text-base">Signup Now</Button>
-          </ClaimPlanDialog>
+          <Button className="mt-6 rounded-full text-base" asChild>
+            <Link href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}>Signup Now</Link>
+          </Button>

          <div className="mt-8 flex w-full flex-col divide-y">
            <p className="text-foreground py-4 font-medium">
@@ -5,8 +5,7 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';

 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
-import { base64 } from '@documenso/lib/universal/base64';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { DocumentStatus, Signature } from '@documenso/prisma/client';
 import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
 import DocumentDialog from '@documenso/ui/components/document/document-dialog';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
@@ -14,53 +13,28 @@ import { DocumentShareButton } from '@documenso/ui/components/document/document-
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';

 import signingCelebration from '~/assets/signing-celebration.png';
-import ConfettiScreen from '~/components/(marketing)/confetti-screen';
-
-import { DocumentStatus } from '.prisma/client';
+import { ConfettiScreen } from '~/components/(marketing)/confetti-screen';

 interface SinglePlayerModeSuccessProps {
  className?: string;
  document: DocumentWithRecipient;
+  signatures: Signature[];
 }

-export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerModeSuccessProps) => {
+export const SinglePlayerModeSuccess = ({
+  className,
+  document,
+  signatures,
+}: SinglePlayerModeSuccessProps) => {
  const { getFlag } = useFeatureFlags();

  const isConfettiEnabled = getFlag('marketing_spm_confetti');

  const [showDocumentDialog, setShowDocumentDialog] = useState(false);
-  const [isFetchingDocumentFile, setIsFetchingDocumentFile] = useState(false);
-  const [documentFile, setDocumentFile] = useState<string | null>(null);

-  const { toast } = useToast();
-
-  const onShowDocumentClick = async () => {
-    if (isFetchingDocumentFile) {
-      return;
-    }
-
-    setIsFetchingDocumentFile(true);
-
-    try {
-      const data = await getFile(document.documentData);
-
-      setDocumentFile(base64.encode(data));
-
-      setShowDocumentDialog(true);
-    } catch {
-      toast({
-        title: 'Something went wrong.',
-        description: 'We were unable to retrieve the document at this time. Please try again.',
-        variant: 'destructive',
-        duration: 7500,
-      });
-    }
-
-    setIsFetchingDocumentFile(false);
-  };
+  const { documentData } = document;

  useEffect(() => {
    window.scrollTo({ top: 0 });
@@ -80,6 +54,7 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
      <SigningCard3D
        className="mt-8"
        name={document.Recipient.name || document.Recipient.email}
+        signature={signatures.at(0)}
        signingCelebrationImage={signingCelebration}
      />

@@ -99,11 +74,7 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
              disabled={document.status !== DocumentStatus.COMPLETED}
            />

-            <Button
-              onClick={async () => onShowDocumentClick()}
-              loading={isFetchingDocumentFile}
-              className="z-10 col-span-2"
-            >
+            <Button onClick={() => setShowDocumentDialog(true)} className="z-10 col-span-2">
              Show document
            </Button>
          </div>
@@ -123,7 +94,7 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
      </p>

      <DocumentDialog
-        document={documentFile ?? ''}
+        documentData={documentData}
        open={showDocumentDialog}
        onOpenChange={setShowDocumentDialog}
      />
@@ -31,7 +31,7 @@ import { FormErrorMessage } from '../form/form-error-message';
 const ZWidgetFormSchema = z
  .object({
    email: z.string().email({ message: 'Please enter a valid email address.' }),
-    name: z.string().min(3, { message: 'Please enter a valid name.' }),
+    name: z.string().trim().min(3, { message: 'Please enter a valid name.' }),
  })
  .and(
    z.union([
@@ -41,7 +41,7 @@ const ZWidgetFormSchema = z
      }),
      z.object({
        signatureDataUrl: z.null().or(z.string().max(0)),
-        signatureText: z.string().min(1),
+        signatureText: z.string().trim().min(1),
      }),
    ]),
  );
@@ -2,7 +2,7 @@ import { NextApiRequest, NextApiResponse } from 'next';

 import { randomUUID } from 'crypto';

-import { hashSync } from '@documenso/lib/server-only/auth/hash';
+import { TEarlyAdopterCheckoutMetadataSchema } from '@documenso/ee/server-only/stripe/webhook/early-adopter-checkout-metadata';
 import { redis } from '@documenso/lib/server-only/redis';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
@@ -36,64 +36,38 @@ export default async function handler(
      where: {
        email: email.toLowerCase(),
      },
-      include: {
-        Subscription: true,
-      },
    });

-    if (user && user.Subscription) {
+    if (user) {
      return res.status(200).json({
-        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`,
+        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/signin`,
      });
    }

-    const password = Math.random().toString(36).slice(2, 9);
-    const passwordHash = hashSync(password);
-
-    const { id: userId } = await prisma.user.upsert({
-      where: {
-        email: email.toLowerCase(),
-      },
-      create: {
-        email: email.toLowerCase(),
-        name,
-        password: passwordHash,
-      },
-      update: {
-        name,
-        password: passwordHash,
-      },
-    });
-
-    await redis.set(`user:${userId}:temp-password`, password, {
-      // expire in 24 hours
-      ex: 60 * 60 * 24,
-    });
-
-    const signatureDataUrlKey = randomUUID();
+    const clientReferenceId = randomUUID();

    if (signatureDataUrl) {
-      await redis.set(`signature:${signatureDataUrlKey}`, signatureDataUrl, {
+      await redis.set(`signature:${clientReferenceId}`, signatureDataUrl, {
        // expire in 7 days
        ex: 60 * 60 * 24 * 7,
      });
    }

-    const metadata: Record<string, string> = {
+    const metadata: TEarlyAdopterCheckoutMetadataSchema = {
      name,
      email,
      signatureText: signatureText || name,
-      source: 'landing',
+      source: 'marketing',
    };

    if (signatureDataUrl) {
-      metadata.signatureDataUrl = signatureDataUrlKey;
+      metadata.signatureDataUrl = clientReferenceId;
    }

    const checkout = await stripe.checkout.sessions.create({
      customer_email: email,
-      client_reference_id: userId.toString(),
-      payment_method_types: ['card'],
+      // Using the UUID here means our webhook will not try to use it as a user ID.
+      client_reference_id: clientReferenceId,
      line_items: [
        {
          price: planId,
@@ -104,9 +78,7 @@ export default async function handler(
      metadata,
      allow_promotion_codes: true,
      success_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/pricing?email=${encodeURIComponent(
-        email,
-      )}&name=${encodeURIComponent(name)}&planId=${planId}&cancelled=true`,
+      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}`,
    });

    if (!checkout.url) {
@@ -2,14 +2,17 @@
 const path = require('path');
 const { version } = require('./package.json');

-require('dotenv').config({
-  path: path.join(__dirname, '../../.env.local'),
+const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
+
+ENV_FILES.forEach((file) => {
+  require('dotenv').config({
+    path: path.join(__dirname, `../../${file}`),
+  });
 });

 /** @type {import('next').NextConfig} */
 const config = {
  experimental: {
-    serverActions: true,
    serverActionsBodySizeLimit: '50mb',
  },
  reactStrictMode: true,
@@ -29,6 +32,14 @@ const config = {
      transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
    },
  },
+  webpack: (config, { isServer }) => {
+    // fixes: Module not found: Can’t resolve ‘../build/Release/canvas.node’
+    if (isServer) {
+      config.resolve.alias.canvas = false;
+    }
+
+    return config;
+  },
  async rewrites() {
    return [
      {
@@ -37,6 +48,32 @@ const config = {
      },
    ];
  },
+  async redirects() {
+    return [
+      {
+        permanent: true,
+        source: '/documents/:id/sign',
+        destination: '/sign/:token',
+        has: [
+          {
+            type: 'query',
+            key: 'token',
+          },
+        ],
+      },
+      {
+        permanent: true,
+        source: '/documents/:id/signed',
+        destination: '/sign/:token',
+        has: [
+          {
+            type: 'query',
+            key: 'token',
+          },
+        ],
+      },
+    ];
+  },
 };

 module.exports = config;
@@ -25,8 +25,8 @@
    "lucide-react": "^0.279.0",
    "luxon": "^3.4.0",
    "micro": "^10.0.1",
-    "next": "13.4.19",
-    "next-auth": "4.22.3",
+    "next": "14.0.0",
+    "next-auth": "4.24.3",
    "next-plausible": "^3.10.1",
    "next-themes": "^0.2.1",
    "perfect-freehand": "^1.2.0",
@@ -40,8 +40,8 @@
    "react-rnd": "^10.4.1",
    "sharp": "0.32.5",
    "ts-pattern": "^5.0.5",
-    "typescript": "5.1.6",
-    "zod": "^3.21.4"
+    "typescript": "5.2.2",
+    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/formidable": "^2.0.6",
@@ -1,41 +0,0 @@
-import { TClaimPlanRequestSchema, ZClaimPlanResponseSchema } from './types';
-
-export const claimPlan = async ({
-  name,
-  email,
-  planId,
-  signatureDataUrl,
-  signatureText,
-}: TClaimPlanRequestSchema) => {
-  const response = await fetch('/api/claim-plan', {
-    method: 'POST',
-    body: JSON.stringify({
-      name,
-      email,
-      planId,
-      signatureDataUrl,
-      signatureText,
-    }),
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-
-  const body = await response.json();
-
-  if (response.status !== 200) {
-    throw new Error('Failed to claim plan');
-  }
-
-  const safeBody = ZClaimPlanResponseSchema.safeParse(body);
-
-  if (!safeBody.success) {
-    throw new Error('Failed to claim plan');
-  }
-
-  if ('error' in safeBody.data) {
-    throw new Error(safeBody.data.error);
-  }
-
-  return safeBody.data.redirectUrl;
-};
@@ -1,37 +0,0 @@
-import { z } from 'zod';
-
-export const ZClaimPlanRequestSchema = z
-  .object({
-    email: z
-      .string()
-      .email()
-      .transform((value) => value.toLowerCase()),
-    name: z.string(),
-    planId: z.string(),
-  })
-  .and(
-    z.union([
-      z.object({
-        signatureDataUrl: z.string().min(1),
-        signatureText: z.null(),
-      }),
-      z.object({
-        signatureDataUrl: z.null(),
-        signatureText: z.string().min(1),
-      }),
-    ]),
-  );
-
-export type TClaimPlanRequestSchema = z.infer<typeof ZClaimPlanRequestSchema>;
-
-export const ZClaimPlanResponseSchema = z
-  .object({
-    redirectUrl: z.string(),
-  })
-  .or(
-    z.object({
-      error: z.string(),
-    }),
-  );
-
-export type TClaimPlanResponseSchema = z.infer<typeof ZClaimPlanResponseSchema>;
@@ -8,10 +8,12 @@ import { Loader } from 'lucide-react';

 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
 import { Document, User } from '@documenso/prisma/client';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';

 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
@@ -51,21 +53,45 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
            header: 'Title',
            accessorKey: 'title',
            cell: ({ row }) => {
-              return <div>{row.original.title}</div>;
+              return (
+                <div className="block max-w-[5rem] truncate font-medium md:max-w-[10rem]">
+                  {row.original.title}
+                </div>
+              );
            },
          },
          {
            header: 'Owner',
            accessorKey: 'owner',
            cell: ({ row }) => {
+              const avatarFallbackText = row.original.User.name
+                ? recipientInitials(row.original.User.name)
+                : row.original.User.email.slice(0, 1).toUpperCase();
+
              return (
-                <Link href={`/admin/users/${row.original.User.id}`}>
-                  <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
-                    <AvatarFallback className="text-gray-400">
-                      <span className="text-xs">{row.original.User.name}</span>
-                    </AvatarFallback>
-                  </Avatar>
-                </Link>
+                <Tooltip delayDuration={200}>
+                  <TooltipTrigger>
+                    <Link href={`/admin/users/${row.original.User.id}`}>
+                      <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+                        <AvatarFallback className="text-xs text-gray-400">
+                          {avatarFallbackText}
+                        </AvatarFallback>
+                      </Avatar>
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent className="flex max-w-xs items-center gap-2">
+                    <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+                      <AvatarFallback className="text-xs text-gray-400">
+                        {avatarFallbackText}
+                      </AvatarFallback>
+                    </Avatar>
+
+                    <div className="text-muted-foreground flex flex-col text-sm">
+                      <span>{row.original.User.name}</span>
+                      <span>{row.original.User.email}</span>
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
              );
            },
          },
@@ -20,7 +20,7 @@ export default async function AdminSectionLayout({ children }: AdminSectionLayou

  return (
    <div className="mx-auto mt-16 w-full max-w-screen-xl px-4 md:px-8">
-      <div className="grid grid-cols-12 gap-x-8 md:mt-8">
+      <div className="grid grid-cols-12 md:mt-8 md:gap-8">
        <AdminNav className="col-span-12 md:col-span-3 md:flex" />

        <div className="col-span-12 mt-12 md:col-span-9 md:mt-0">{children}</div>
@@ -16,7 +16,13 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
  const pathname = usePathname();

  return (
-    <div className={cn('flex gap-x-2.5 gap-y-2 md:flex-col', className)} {...props}>
+    <div
+      className={cn(
+        'flex gap-x-2.5 gap-y-2 overflow-hidden overflow-x-auto md:flex-col',
+        className,
+      )}
+      {...props}
+    >
      <Button
        variant="ghost"
        className={cn(
@@ -32,7 +32,7 @@ export default async function AdminStatsPage() {
    <div>
      <h2 className="text-4xl font-semibold">Instance Stats</h2>

-      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-4">
+      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
        <CardMetric icon={UserIcon} title="Total Users" value={usersCount} />
        <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
        <CardMetric
@@ -43,7 +43,7 @@ export default async function AdminStatsPage() {
        <CardMetric icon={UserPlus2} title="App Version" value={`v${process.env.APP_VERSION}`} />
      </div>

-      <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2">
+      <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-1 lg:grid-cols-2">
        <div>
          <h3 className="text-3xl font-semibold">Document metrics</h3>

@@ -14,14 +14,14 @@ import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 import { Input } from '@documenso/ui/primitives/input';

-interface User {
+type UserData = {
  id: number;
  name: string | null;
  email: string;
  roles: Role[];
  Subscription?: SubscriptionLite | null;
  Document: DocumentLite[];
-}
+};

 type SubscriptionLite = Pick<
  Subscription,
@@ -31,7 +31,7 @@ type SubscriptionLite = Pick<
 type DocumentLite = Pick<Document, 'id'>;

 type UsersDataTableProps = {
-  users: User[];
+  users: UserData[];
  totalPages: number;
  perPage: number;
  page: number;
@@ -4,7 +4,7 @@ import { useState } from 'react';

 import { useRouter } from 'next/navigation';

-import { Field, Recipient, User } from '@documenso/prisma/client';
+import { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
 import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -32,7 +32,7 @@ export type EditDocumentFormProps = {
  document: DocumentWithData;
  recipients: Recipient[];
  fields: Field[];
-  dataUrl: string;
+  documentData: DocumentData;
 };

 type EditDocumentStep = 'signers' | 'fields' | 'subject';
@@ -43,7 +43,7 @@ export const EditDocumentForm = ({
  recipients,
  fields,
  user: _user,
-  dataUrl,
+  documentData,
 }: EditDocumentFormProps) => {
  const { toast } = useToast();
  const router = useRouter();
@@ -153,7 +153,7 @@ export const EditDocumentForm = ({
        gradient
      >
        <CardContent className="p-2">
-          <LazyPDFViewer document={dataUrl} />
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
        </CardContent>
      </Card>

@@ -7,7 +7,6 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';

@@ -43,10 +42,6 @@ export default async function DocumentPage({ params }: DocumentPageProps) {

  const { documentData } = document;

-  const documentDataUrl = await getFile(documentData)
-    .then((buffer) => Buffer.from(buffer).toString('base64'))
-    .then((data) => `data:application/pdf;base64,${data}`);
-
  const [recipients, fields] = await Promise.all([
    await getRecipientsForDocument({
      documentId,
@@ -90,13 +85,13 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
          user={user}
          recipients={recipients}
          fields={fields}
-          dataUrl={documentDataUrl}
+          documentData={documentData}
        />
      )}

      {document.status === InternalDocumentStatus.COMPLETED && (
        <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer document={documentDataUrl} />
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
        </div>
      )}
    </div>
@@ -6,9 +6,12 @@ import { Edit, Pencil, Share } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';

-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
+import {
+  TOAST_DOCUMENT_SHARE_ERROR,
+  TOAST_DOCUMENT_SHARE_SUCCESS,
+} from '@documenso/lib/constants/toast';
 import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
-import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';

@@ -21,16 +24,18 @@ export type DataTableActionButtonProps = {

 export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
  const { data: session } = useSession();
+
  const { toast } = useToast();
-  const [, copyToClipboard] = useCopyToClipboard();
+
+  const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
+    onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS),
+    onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR),
+  });

  if (!session) {
    return null;
  }

-  const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } =
-    trpc.shareLink.createOrGetShareLink.useMutation();
-
  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);

  const isOwner = row.User.id === session.user.id;
@@ -40,20 +45,6 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
  const isComplete = row.status === DocumentStatus.COMPLETED;
  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;

-  const onShareClick = async () => {
-    const { slug } = await createOrGetShareLink({
-      token: recipient?.token,
-      documentId: row.id,
-    });
-
-    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
-
-    toast({
-      title: 'Copied to clipboard',
-      description: 'The sharing link has been copied to your clipboard.',
-    });
-  };
-
  return match({
    isOwner,
    isRecipient,
@@ -79,8 +70,17 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
      </Button>
    ))
    .otherwise(() => (
-      <Button className="w-24" loading={isCreatingShareLink} onClick={onShareClick}>
-        {!isCreatingShareLink && <Share className="-ml-1 mr-2 h-4 w-4" />}
+      <Button
+        className="w-24"
+        loading={isCopyingShareLink}
+        onClick={async () =>
+          createAndCopyShareLink({
+            token: recipient?.token,
+            documentId: row.id,
+          })
+        }
+      >
+        {!isCopyingShareLink && <Share className="-ml-1 mr-2 h-4 w-4" />}
        Share
      </Button>
    ));
@@ -18,12 +18,15 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';

-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
+import {
+  TOAST_DOCUMENT_SHARE_ERROR,
+  TOAST_DOCUMENT_SHARE_SUCCESS,
+} from '@documenso/lib/constants/toast';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
 import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
-import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -44,8 +47,13 @@ export type DataTableActionDropdownProps = {

 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
  const { data: session } = useSession();
+
  const { toast } = useToast();
-  const [, copyToClipboard] = useCopyToClipboard();
+
+  const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
+    onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS),
+    onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR),
+  });

  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);

@@ -53,9 +61,6 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
    return null;
  }

-  const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } =
-    trpcReact.shareLink.createOrGetShareLink.useMutation();
-
  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);

  const isOwner = row.User.id === session.user.id;
@@ -66,20 +71,6 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
  const isDocumentDeletable = isOwner && row.status === DocumentStatus.DRAFT;

-  const onShareClick = async () => {
-    const { slug } = await createOrGetShareLink({
-      token: recipient?.token,
-      documentId: row.id,
-    });
-
-    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
-
-    toast({
-      title: 'Copied to clipboard',
-      description: 'The sharing link has been copied to your clipboard.',
-    });
-  };
-
  const onDownloadClick = async () => {
    let document: DocumentWithData | null = null;

@@ -165,8 +156,16 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
          Resend
        </DropdownMenuItem>

-        <DropdownMenuItem disabled={isDraft} onClick={onShareClick}>
-          {isCreatingShareLink ? (
+        <DropdownMenuItem
+          disabled={isDraft}
+          onClick={async () =>
+            createAndCopyShareLink({
+              token: recipient?.token,
+              documentId: row.id,
+            })
+          }
+        >
+          {isCopyingShareLink ? (
            <Loader className="mr-2 h-4 w-4" />
          ) : (
            <Share className="mr-2 h-4 w-4" />
@@ -1,5 +1,6 @@
 'use server';

+import { createCustomer } from '@documenso/ee/server-only/stripe/create-customer';
 import { getCheckoutSession } from '@documenso/ee/server-only/stripe/get-checkout-session';
 import {
  getStripeCustomerByEmail,
@@ -7,7 +8,7 @@ import {
 } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
+import { Stripe } from '@documenso/lib/server-only/stripe';
 import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';

 export type CreateCheckoutOptions = {
@@ -42,13 +43,11 @@ export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {

  // Create a Stripe customer if it does not exist for the current user.
  if (!stripeCustomer) {
-    stripeCustomer = await stripe.customers.create({
-      name: user.name ?? undefined,
-      email: user.email,
-      metadata: {
-        userId: user.id,
-      },
+    await createCustomer({
+      user,
    });
+
+    stripeCustomer = await getStripeCustomerByEmail(user.email);
  }

  return getCheckoutSession({
@@ -1,4 +1,5 @@
-import { ImageResponse, NextResponse } from 'next/server';
+import { ImageResponse } from 'next/og';
+import { NextResponse } from 'next/server';

 import { P, match } from 'ts-pattern';

@@ -7,6 +7,7 @@ import { match } from 'ts-pattern';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { DocumentStatus, FieldType } from '@documenso/prisma/client';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -46,6 +47,8 @@ export default async function CompletedSigningPage({
    return notFound();
  }

+  const signatures = await getRecipientSignatures({ recipientId: recipient.id });
+
  const recipientName =
    recipient.name ||
    fields.find((field) => field.type === FieldType.NAME)?.customText ||
@@ -54,7 +57,11 @@ export default async function CompletedSigningPage({
  return (
    <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} />
+      <SigningCard3D
+        name={recipientName}
+        signature={signatures.at(0)}
+        signingCelebrationImage={signingCelebration}
+      />

      <div className="relative mt-6 flex w-full flex-col items-center">
        {match(document.status)
@@ -72,7 +79,8 @@ export default async function CompletedSigningPage({
          ))}

        <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-          You have signed "{document.title}"
+          You have signed
+          <span className="mt-1.5 block">"{document.title}"</span>
        </h2>

        {match(document.status)
@@ -99,7 +99,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                  id="full-name"
                  className="bg-background mt-2"
                  value={fullName}
-                  onChange={(e) => setFullName(e.target.value)}
+                  onChange={(e) => setFullName(e.target.value.trimStart())}
                />
              </div>

@@ -125,7 +125,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
              type="text"
              className="mt-2"
              value={localFullName}
-              onChange={(e) => setLocalFullName(e.target.value)}
+              onChange={(e) => setLocalFullName(e.target.value.trimStart())}
            />
          </div>

@@ -8,7 +8,6 @@ import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -47,10 +46,6 @@ export default async function SigningPage({ params: { token } }: SigningPageProp

  const { documentData } = document;

-  const documentDataUrl = await getFile(documentData)
-    .then((buffer) => Buffer.from(buffer).toString('base64'))
-    .then((data) => `data:application/pdf;base64,${data}`);
-
  const { user } = await getServerComponentSession();

  if (
@@ -79,7 +74,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
            gradient
          >
            <CardContent className="p-2">
-              <LazyPDFViewer document={documentDataUrl} />
+              <LazyPDFViewer key={documentData.id} documentData={documentData} />
            </CardContent>
          </Card>

@@ -13,18 +13,24 @@ export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricPr
  return (
    <div
      className={cn(
-        'border-border bg-background hover:shadow-border/80 overflow-hidden rounded-lg border shadow shadow-transparent duration-200',
+        'border-border bg-background hover:shadow-border/80 h-32 max-h-32 max-w-full overflow-hidden rounded-lg border shadow shadow-transparent duration-200',
        className,
      )}
    >
-      <div className="px-4 pb-6 pt-4 sm:px-4 sm:pb-8 sm:pt-4">
-        <div className="flex items-center">
-          {Icon && <Icon className="text-muted-foreground mr-2 h-4 w-4" />}
+      <div className="flex h-full max-h-full flex-col px-4 pb-6 pt-4 sm:px-4 sm:pb-8 sm:pt-4">
+        <div className="flex items-start">
+          {Icon && (
+            <div className="mr-2 h-4 w-4">
+              <Icon className="text-muted-foreground h-4 w-4" />
+            </div>
+          )}

-          <h3 className="text-primary-forground flex items-end text-sm font-medium">{title}</h3>
+          <h3 className="text-primary-forground flex items-end text-sm font-medium leading-tight">
+            {title}
+          </h3>
        </div>

-        <p className="text-foreground mt-6 text-4xl font-semibold leading-8 md:mt-8">
+        <p className="text-foreground mt-auto text-4xl font-semibold leading-8">
          {typeof value === 'number' ? value.toLocaleString('en-US') : value}
        </p>
      </div>
@@ -20,7 +20,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { FormErrorMessage } from '../form/form-error-message';

 export const ZProfileFormSchema = z.object({
-  name: z.string().min(1),
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
  signature: z.string().min(1, 'Signature Pad cannot be empty'),
 });

@@ -19,7 +19,7 @@ import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 export const ZSignUpFormSchema = z.object({
-  name: z.string().min(1),
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
  email: z.string().email().min(1),
  password: z.string().min(6).max(72),
  signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
@@ -1,126 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next';
-
-import { randomUUID } from 'crypto';
-
-import { hashSync } from '@documenso/lib/server-only/auth/hash';
-import { redis } from '@documenso/lib/server-only/redis';
-import { stripe } from '@documenso/lib/server-only/stripe';
-import { prisma } from '@documenso/prisma';
-
-import { TClaimPlanResponseSchema, ZClaimPlanRequestSchema } from '~/api/claim-plan/types';
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<TClaimPlanResponseSchema>,
-) {
-  try {
-    const { method } = req;
-
-    if (method?.toUpperCase() !== 'POST') {
-      return res.status(405).json({
-        error: 'Method not allowed',
-      });
-    }
-
-    const safeBody = ZClaimPlanRequestSchema.safeParse(req.body);
-
-    if (!safeBody.success) {
-      return res.status(400).json({
-        error: 'Bad request',
-      });
-    }
-
-    const { email, name, planId, signatureDataUrl, signatureText } = safeBody.data;
-
-    const user = await prisma.user.findFirst({
-      where: {
-        email: email.toLowerCase(),
-      },
-      include: {
-        Subscription: true,
-      },
-    });
-
-    if (user && user.Subscription) {
-      return res.status(200).json({
-        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`,
-      });
-    }
-
-    const password = Math.random().toString(36).slice(2, 9);
-    const passwordHash = hashSync(password);
-
-    const { id: userId } = await prisma.user.upsert({
-      where: {
-        email: email.toLowerCase(),
-      },
-      create: {
-        email: email.toLowerCase(),
-        name,
-        password: passwordHash,
-      },
-      update: {
-        name,
-        password: passwordHash,
-      },
-    });
-
-    await redis.set(`user:${userId}:temp-password`, password, {
-      // expire in 24 hours
-      ex: 60 * 60 * 24,
-    });
-
-    const signatureDataUrlKey = randomUUID();
-
-    if (signatureDataUrl) {
-      await redis.set(`signature:${signatureDataUrlKey}`, signatureDataUrl, {
-        // expire in 7 days
-        ex: 60 * 60 * 24 * 7,
-      });
-    }
-
-    const metadata: Record<string, string> = {
-      name,
-      email,
-      signatureText: signatureText || name,
-      source: 'landing',
-    };
-
-    if (signatureDataUrl) {
-      metadata.signatureDataUrl = signatureDataUrlKey;
-    }
-
-    const checkout = await stripe.checkout.sessions.create({
-      customer_email: email,
-      client_reference_id: userId.toString(),
-      payment_method_types: ['card'],
-      line_items: [
-        {
-          price: planId,
-          quantity: 1,
-        },
-      ],
-      mode: 'subscription',
-      metadata,
-      allow_promotion_codes: true,
-      success_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/pricing?email=${encodeURIComponent(
-        email,
-      )}&name=${encodeURIComponent(name)}&planId=${planId}&cancelled=true`,
-    });
-
-    if (!checkout.url) {
-      throw new Error('Checkout URL not found');
-    }
-
-    return res.json({
-      redirectUrl: checkout.url,
-    });
-  } catch (error) {
-    console.error(error);
-
-    return res.status(500).json({
-      error: 'Internal server error',
-    });
-  }
-}
@@ -15,9 +15,12 @@
    "dx:up": "docker compose -f docker/compose-services.yml up -d",
    "dx:down": "docker compose -f docker/compose-services.yml down",
    "ci": "turbo run build test:e2e",
+    "prisma:generate": "npm run with:env -- npm run prisma:generate -w @documenso/prisma",
    "prisma:migrate-dev": "npm run with:env -- npm run prisma:migrate-dev -w @documenso/prisma",
    "prisma:migrate-deploy": "npm run with:env -- npm run prisma:migrate-deploy -w @documenso/prisma",
-    "with:env": "dotenv -e .env -e .env.local --"
+    "prisma:studio": "npm run with:env -- npx prisma studio --schema packages/prisma/schema.prisma",
+    "with:env": "dotenv -e .env -e .env.local --",
+    "reset:hard": "npm run clean && npm i && npm run prisma:generate"
  },
  "engines": {
    "npm": ">=8.6.0",
@@ -17,10 +17,10 @@
    "@documenso/prisma": "*",
    "luxon": "^3.4.0",
    "micro": "^10.0.1",
-    "next": "13.4.19",
-    "next-auth": "4.22.3",
+    "next": "14.0.0",
+    "next-auth": "4.24.3",
    "react": "18.2.0",
    "ts-pattern": "^5.0.5",
-    "zod": "^3.21.4"
+    "zod": "^3.22.4"
  }
 }
@@ -16,13 +16,10 @@ export const getLimits = async ({ headers }: GetLimitsOptions = {}) => {
    headers: {
      ...requestHeaders,
    },
-    next: {
-      revalidate: 60,
-    },
  })
    .then(async (res) => res.json())
    .then((res) => ZLimitsResponseSchema.parse(res))
-    .catch(() => {
+    .catch((_err) => {
      return {
        quota: FREE_PLAN_LIMITS,
        remaining: FREE_PLAN_LIMITS,
@@ -3,10 +3,6 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { getToken } from 'next-auth/jwt';
 import { match } from 'ts-pattern';

-import { withStaleWhileRevalidate } from '@documenso/lib/server-only/http/with-swr';
-import { getFlag } from '@documenso/lib/universal/get-feature-flag';
-
-import { SELFHOSTED_PLAN_LIMITS } from './constants';
 import { ERROR_CODES } from './errors';
 import { TLimitsErrorResponseSchema, TLimitsResponseSchema } from './schema';
 import { getServerLimits } from './server';
@@ -18,22 +14,9 @@ export const limitsHandler = async (
  try {
    const token = await getToken({ req });

-    const isBillingEnabled = await getFlag('app_billing');
+    const limits = await getServerLimits({ email: token?.email });

-    if (!isBillingEnabled) {
-      return withStaleWhileRevalidate<typeof res>(res).status(200).json({
-        quota: SELFHOSTED_PLAN_LIMITS,
-        remaining: SELFHOSTED_PLAN_LIMITS,
-      });
-    }
-
-    if (!token?.email) {
-      throw new Error(ERROR_CODES.UNAUTHORIZED);
-    }
-
-    const limits = await getServerLimits({ email: token.email });
-
-    return withStaleWhileRevalidate<typeof res>(res).status(200).json(limits);
+    return res.status(200).json(limits);
  } catch (err) {
    console.error('error', err);

@@ -2,6 +2,8 @@

 import { createContext, useContext, useEffect, useState } from 'react';

+import { equals } from 'remeda';
+
 import { getLimits } from '../client';
 import { FREE_PLAN_LIMITS } from '../constants';
 import { TLimitsResponseSchema } from '../schema';
@@ -33,13 +35,25 @@ export const LimitsProvider = ({ initialValue, children }: LimitsProviderProps)

  const [limits, setLimits] = useState(() => initialValue ?? defaultValue);

+  const refreshLimits = async () => {
+    const newLimits = await getLimits();
+
+    setLimits((oldLimits) => {
+      if (equals(oldLimits, newLimits)) {
+        return oldLimits;
+      }
+
+      return newLimits;
+    });
+  };
+
  useEffect(() => {
-    void getLimits().then((limits) => setLimits(limits));
+    void refreshLimits();
  }, []);

  useEffect(() => {
    const onFocus = () => {
-      void getLimits().then((limits) => setLimits(limits));
+      void refreshLimits();
    };

    window.addEventListener('focus', onFocus);
@@ -3,13 +3,14 @@ import { DateTime } from 'luxon';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { getFlag } from '@documenso/lib/universal/get-feature-flag';
 import { prisma } from '@documenso/prisma';
+import { SubscriptionStatus } from '@documenso/prisma/client';

 import { FREE_PLAN_LIMITS, SELFHOSTED_PLAN_LIMITS } from './constants';
 import { ERROR_CODES } from './errors';
 import { ZLimitsSchema } from './schema';

 export type GetServerLimitsOptions = {
-  email?: string;
+  email?: string | null;
 };

 export const getServerLimits = async ({ email }: GetServerLimitsOptions) => {
@@ -42,7 +43,8 @@ export const getServerLimits = async ({ email }: GetServerLimitsOptions) => {
  let quota = structuredClone(FREE_PLAN_LIMITS);
  let remaining = structuredClone(FREE_PLAN_LIMITS);

-  if (user.Subscription?.priceId) {
+  // Since we store details and allow for past due plans we need to check if the subscription is active.
+  if (user.Subscription?.status !== SubscriptionStatus.INACTIVE && user.Subscription?.priceId) {
    const { product } = await stripe.prices
      .retrieve(user.Subscription.priceId, {
        expand: ['product'],
@@ -17,6 +17,7 @@ export const getCheckoutSession = async ({

  const session = await stripe.checkout.sessions.create({
    customer: customerId,
+    mode: 'subscription',
    line_items: [
      {
        price: priceId,
@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+export const ZEarlyAdopterCheckoutMetadataSchema = z.object({
+  name: z.string(),
+  email: z.string(),
+  signatureText: z.string(),
+  signatureDataUrl: z.string().optional(),
+  source: z.literal('marketing'),
+});
+
+export type TEarlyAdopterCheckoutMetadataSchema = z.infer<
+  typeof ZEarlyAdopterCheckoutMetadataSchema
+>;
@@ -7,6 +7,7 @@ import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
 import { getFlag } from '@documenso/lib/universal/get-feature-flag';
 import { prisma } from '@documenso/prisma';

+import { onEarlyAdoptersCheckout } from './on-early-adopters-checkout';
 import { onSubscriptionDeleted } from './on-subscription-deleted';
 import { onSubscriptionUpdated } from './on-subscription-updated';

@@ -52,7 +53,46 @@ export const stripeWebhookHandler = async (
        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
        const session = event.data.object as Stripe.Checkout.Session;

-        const userId = Number(session.client_reference_id);
+        if (session.metadata?.source === 'marketing') {
+          await onEarlyAdoptersCheckout({ session });
+        }
+
+        const customerId =
+          typeof session.customer === 'string' ? session.customer : session.customer?.id;
+
+        // Attempt to get the user ID from the client reference id.
+        let userId = Number(session.client_reference_id);
+
+        // If the user ID is not found, attempt to get it from the Stripe customer metadata.
+        if (!userId && customerId) {
+          const customer = await stripe.customers.retrieve(customerId);
+
+          if (!customer.deleted) {
+            userId = Number(customer.metadata.userId);
+          }
+        }
+
+        // Finally, attempt to get the user ID from the subscription within the database.
+        if (!userId && customerId) {
+          const result = await prisma.subscription.findFirst({
+            select: {
+              userId: true,
+            },
+            where: {
+              customerId,
+            },
+          });
+
+          if (!result?.userId) {
+            return res.status(500).json({
+              success: false,
+              message: 'User not found',
+            });
+          }
+
+          userId = result.userId;
+        }
+
        const subscriptionId =
          typeof session.subscription === 'string'
            ? session.subscription
@@ -195,6 +235,11 @@ export const stripeWebhookHandler = async (
        }

        await onSubscriptionUpdated({ userId: result.userId, subscription });
+
+        return res.status(200).json({
+          success: true,
+          message: 'Webhook received',
+        });
      })
      .with('customer.subscription.deleted', async () => {
        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -0,0 +1,138 @@
+import Stripe from 'stripe';
+
+import { hashSync } from '@documenso/lib/server-only/auth/hash';
+import { sealDocument } from '@documenso/lib/server-only/document/seal-document';
+import { redis } from '@documenso/lib/server-only/redis';
+import { stripe } from '@documenso/lib/server-only/stripe';
+import { alphaid, nanoid } from '@documenso/lib/universal/id';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { prisma } from '@documenso/prisma';
+import {
+  DocumentStatus,
+  FieldType,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
+
+import { ZEarlyAdopterCheckoutMetadataSchema } from './early-adopter-checkout-metadata';
+
+export type OnEarlyAdoptersCheckoutOptions = {
+  session: Stripe.Checkout.Session;
+};
+
+export const onEarlyAdoptersCheckout = async ({ session }: OnEarlyAdoptersCheckoutOptions) => {
+  try {
+    const safeMetadata = ZEarlyAdopterCheckoutMetadataSchema.safeParse(session.metadata);
+
+    if (!safeMetadata.success) {
+      return;
+    }
+
+    const { email, name, signatureText, signatureDataUrl: signatureDataUrlRef } = safeMetadata.data;
+
+    const user = await prisma.user.findFirst({
+      where: {
+        email: email.toLowerCase(),
+      },
+    });
+
+    if (user) {
+      return;
+    }
+
+    const tempPassword = nanoid(12);
+
+    const newUser = await prisma.user.create({
+      data: {
+        name,
+        email: email.toLowerCase(),
+        password: hashSync(tempPassword),
+        signature: signatureDataUrlRef,
+      },
+    });
+
+    const customerId =
+      typeof session.customer === 'string' ? session.customer : session.customer?.id;
+
+    if (customerId) {
+      await stripe.customers.update(customerId, {
+        metadata: {
+          userId: newUser.id,
+        },
+      });
+    }
+
+    await redis.set(`user:${newUser.id}:temp-password`, tempPassword, {
+      // expire in 1 week
+      ex: 60 * 60 * 24 * 7,
+    });
+
+    const signatureDataUrl = await redis.get<string>(`signature:${session.client_reference_id}`);
+
+    const documentBuffer = await fetch(
+      `${process.env.NEXT_PUBLIC_WEBAPP_URL}/documenso-supporter-pledge.pdf`,
+    ).then(async (res) => res.arrayBuffer());
+
+    const { id: documentDataId } = await putFile({
+      name: 'Documenso Supporter Pledge.pdf',
+      type: 'application/pdf',
+      arrayBuffer: async () => Promise.resolve(documentBuffer),
+    });
+
+    const document = await prisma.document.create({
+      data: {
+        title: 'Documenso Supporter Pledge.pdf',
+        status: DocumentStatus.COMPLETED,
+        userId: newUser.id,
+        documentDataId,
+      },
+    });
+
+    const recipient = await prisma.recipient.create({
+      data: {
+        name,
+        email: email.toLowerCase(),
+        token: alphaid(),
+        readStatus: ReadStatus.OPENED,
+        sendStatus: SendStatus.SENT,
+        signingStatus: SigningStatus.SIGNED,
+        signedAt: new Date(),
+        documentId: document.id,
+      },
+    });
+
+    await prisma.field.create({
+      data: {
+        type: FieldType.SIGNATURE,
+        recipientId: recipient.id,
+        documentId: document.id,
+        page: 1,
+        positionX: 12.2781,
+        positionY: 81.5789,
+        height: 6.8649,
+        width: 29.5857,
+        inserted: true,
+        customText: '',
+
+        Signature: {
+          create: {
+            typedSignature: signatureDataUrl ? null : signatureText || name,
+            signatureImageAsBase64: signatureDataUrl,
+            recipientId: recipient.id,
+          },
+        },
+      },
+    });
+
+    await sealDocument({
+      documentId: document.id,
+      sendEmail: false,
+    });
+  } catch (error) {
+    // We don't want to break the checkout process if something goes wrong here.
+    // This is an additive experience for early adopters, breaking their ability
+    // join would be far worse than not having a signed pledge.
+    console.error('early-supporter-error', error);
+  }
+};
@@ -1 +1 @@
-export { render, renderAsync } from '@react-email/components';
+export { render } from '@react-email/components';
@@ -32,7 +32,7 @@ export const DocumentInviteEmailTemplate = ({
  assetBaseUrl = 'http://localhost:3002',
  customBody,
 }: DocumentInviteEmailTemplateProps) => {
-  const previewText = `Completed Document`;
+  const previewText = `${inviterName} has invited you to sign ${documentName}`;

  const getAssetUrl = (path: string) => {
    return new URL(path, assetBaseUrl).toString();
@@ -7,8 +7,8 @@
    "clean": "rimraf node_modules"
  },
  "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "6.8.0",
+    "@typescript-eslint/parser": "6.8.0",
    "eslint": "^8.40.0",
    "eslint-config-next": "13.4.19",
    "eslint-config-prettier": "^8.8.0",
@@ -16,6 +16,6 @@
    "eslint-plugin-package-json": "^0.1.4",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
-    "typescript": "^5.1.6"
+    "typescript": "5.2.2"
  }
-}
+}
@@ -0,0 +1,53 @@
+import { trpc } from '@documenso/trpc/react';
+import { TCreateOrGetShareLinkMutationSchema } from '@documenso/trpc/server/share-link-router/schema';
+
+import { useCopyToClipboard } from './use-copy-to-clipboard';
+
+export type UseCopyShareLinkOptions = {
+  onSuccess?: () => void;
+  onError?: () => void;
+};
+
+export function useCopyShareLink({ onSuccess, onError }: UseCopyShareLinkOptions) {
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } =
+    trpc.shareLink.createOrGetShareLink.useMutation();
+
+  /**
+   * Copy a newly created, or pre-existing share link to the user's clipboard.
+   *
+   * @param payload The payload to create or get a share link.
+   */
+  const createAndCopyShareLink = async (payload: TCreateOrGetShareLinkMutationSchema) => {
+    const valueToCopy = createOrGetShareLink(payload).then(
+      (result) => `${window.location.origin}/share/${result.slug}`,
+    );
+
+    await copyShareLink(valueToCopy);
+  };
+
+  /**
+   * Copy a share link to the user's clipboard.
+   *
+   * @param shareLink Either the share link itself or a promise that returns a shared link.
+   */
+  const copyShareLink = async (shareLink: Promise<string> | string) => {
+    try {
+      const isCopySuccess = await copyToClipboard(shareLink);
+      if (!isCopySuccess) {
+        throw new Error('Copy to clipboard failed');
+      }
+
+      onSuccess?.();
+    } catch (e) {
+      onError?.();
+    }
+  };
+
+  return {
+    createAndCopyShareLink,
+    copyShareLink,
+    isCopyingShareLink: isCreatingShareLink,
+  };
+}
@@ -1,21 +1,28 @@
 import { useState } from 'react';

 export type CopiedValue = string | null;
-export type CopyFn = (_text: string) => Promise<boolean>;
+export type CopyFn = (_text: CopyValue, _blobType?: string) => Promise<boolean>;
+
+type CopyValue = Promise<string> | string;

 export function useCopyToClipboard(): [CopiedValue, CopyFn] {
  const [copiedText, setCopiedText] = useState<CopiedValue>(null);

-  const copy: CopyFn = async (text) => {
+  const copy: CopyFn = async (text, blobType = 'text/plain') => {
    if (!navigator?.clipboard) {
      console.warn('Clipboard not supported');
      return false;
    }

+    const isClipboardApiSupported = Boolean(typeof ClipboardItem && navigator.clipboard.write);
+
    // Try to save to clipboard then save it in the state if worked
    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedText(text);
+      isClipboardApiSupported
+        ? await handleClipboardApiCopy(text, blobType)
+        : await handleWriteTextCopy(text);
+
+      setCopiedText(await text);
      return true;
    } catch (error) {
      console.warn('Copy failed', error);
@@ -24,5 +31,30 @@ export function useCopyToClipboard(): [CopiedValue, CopyFn] {
    }
  };

+  /**
+   * Handle copying values to the clipboard using the ClipboardItem API.
+   *
+   * Works in all browsers except FireFox.
+   *
+   * https://caniuse.com/mdn-api_clipboarditem
+   */
+  const handleClipboardApiCopy = async (value: CopyValue, blobType = 'text/plain') => {
+    try {
+      await navigator.clipboard.write([new ClipboardItem({ [blobType]: value })]);
+    } catch (e) {
+      // Fallback attempt.
+      await handleWriteTextCopy(value);
+    }
+  };
+
+  /**
+   * Handle copying values to the clipboard using `writeText`.
+   *
+   * Works in all browsers except Safari for async values.
+   */
+  const handleWriteTextCopy = async (value: CopyValue) => {
+    await navigator.clipboard.writeText(await value);
+  };
+
  return [copiedText, copy];
 }
@@ -0,0 +1,13 @@
+import { Toast } from '@documenso/ui/primitives/use-toast';
+
+export const TOAST_DOCUMENT_SHARE_SUCCESS: Toast = {
+  title: 'Copied to clipboard',
+  description: 'The sharing link has been copied to your clipboard.',
+} as const;
+
+export const TOAST_DOCUMENT_SHARE_ERROR: Toast = {
+  variant: 'destructive',
+  title: 'Something went wrong',
+  description: 'The sharing link could not be created at this time. Please try again.',
+  duration: 5000,
+};
@@ -28,13 +28,14 @@
    "bcrypt": "^5.1.0",
    "luxon": "^3.4.0",
    "nanoid": "^4.0.2",
-    "next": "13.4.19",
-    "next-auth": "4.22.3",
+    "next": "14.0.0",
+    "next-auth": "4.24.3",
    "pdf-lib": "^1.17.1",
    "react": "18.2.0",
+    "remeda": "^1.27.1",
    "stripe": "^12.7.0",
    "ts-pattern": "^5.0.5",
-    "zod": "^3.21.4"
+    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/bcrypt": "^5.0.0",
@@ -14,9 +14,10 @@ import { sendCompletedEmail } from './send-completed-email';

 export type SealDocumentOptions = {
  documentId: number;
+  sendEmail?: boolean;
 };

-export const sealDocument = async ({ documentId }: SealDocumentOptions) => {
+export const sealDocument = async ({ documentId, sendEmail = true }: SealDocumentOptions) => {
  'use server';

  const document = await prisma.document.findFirstOrThrow({
@@ -91,5 +92,7 @@ export const sealDocument = async ({ documentId }: SealDocumentOptions) => {
    },
  });

-  await sendCompletedEmail({ documentId });
+  if (sendEmail) {
+    await sendCompletedEmail({ documentId });
+  }
 };
@@ -5,6 +5,8 @@ import { render } from '@documenso/email/render';
 import { DocumentCompletedEmailTemplate } from '@documenso/email/templates/document-completed';
 import { prisma } from '@documenso/prisma';

+import { getFile } from '../../universal/upload/get-file';
+
 export interface SendDocumentOptions {
  documentId: number;
 }
@@ -15,6 +17,7 @@ export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) =>
      id: documentId,
    },
    include: {
+      documentData: true,
      Recipient: true,
    },
  });
@@ -27,6 +30,8 @@ export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) =>
    throw new Error('Document has no recipients');
  }

+  const buffer = await getFile(document.documentData);
+
  await Promise.all([
    document.Recipient.map(async (recipient) => {
      const { email, name, token } = recipient;
@@ -51,6 +56,12 @@ export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) =>
        subject: 'Signing Complete!',
        html: render(template),
        text: render(template, { plainText: true }),
+        attachments: [
+          {
+            filename: document.title,
+            content: Buffer.from(buffer),
+          },
+        ],
      });
    }),
  ]);
@@ -0,0 +1,15 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetRecipientSignaturesOptions = {
+  recipientId: number;
+};
+
+export const getRecipientSignatures = async ({ recipientId }: GetRecipientSignaturesOptions) => {
+  return await prisma.signature.findMany({
+    where: {
+      Field: {
+        recipientId,
+      },
+    },
+  });
+};
@@ -2,7 +2,7 @@ import { prisma } from '@documenso/prisma';

 export type DeleteUserOptions = {
  email: string;
-}
+};

 export const deleteUser = async ({ email }: DeleteUserOptions) => {
  const user = await prisma.user.findFirst({
@@ -3,8 +3,6 @@ import { match } from 'ts-pattern';

 import { DocumentDataType } from '@documenso/prisma/client';

-import { getPresignGetUrl } from './server-actions';
-
 export type GetFileOptions = {
  type: DocumentDataType;
  data: string;
@@ -33,6 +31,8 @@ const getFileFromBytes64 = (data: string) => {
 };

 const getFileFromS3 = async (key: string) => {
+  const { getPresignGetUrl } = await import('./server-actions');
+
  const { url } = await getPresignGetUrl(key);

  const response = await fetch(url, {
@@ -4,7 +4,6 @@ import { match } from 'ts-pattern';
 import { DocumentDataType } from '@documenso/prisma/client';

 import { createDocumentData } from '../../server-only/document-data/create-document-data';
-import { getPresignPostUrl } from './server-actions';

 type File = {
  name: string;
@@ -34,6 +33,8 @@ const putFileInDatabase = async (file: File) => {
 };

 const putFileInS3 = async (file: File) => {
+  const { getPresignPostUrl } = await import('./server-actions');
+
  const { url, key } = await getPresignPostUrl(file.name, file.type);

  const body = await file.arrayBuffer();
@@ -6,7 +6,6 @@ import {
  PutObjectCommand,
  S3Client,
 } from '@aws-sdk/client-s3';
-import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import slugify from '@sindresorhus/slugify';
 import path from 'node:path';

@@ -17,6 +16,8 @@ import { alphaid } from '../id';
 export const getPresignPostUrl = async (fileName: string, contentType: string) => {
  const client = getS3Client();

+  const { getSignedUrl } = await import('@aws-sdk/s3-request-presigner');
+
  const { user } = await getServerComponentSession();

  // Get the basename and extension for the file
@@ -44,6 +45,8 @@ export const getPresignPostUrl = async (fileName: string, contentType: string) =
 export const getAbsolutePresignPostUrl = async (key: string) => {
  const client = getS3Client();

+  const { getSignedUrl } = await import('@aws-sdk/s3-request-presigner');
+
  const putObjectCommand = new PutObjectCommand({
    Bucket: process.env.NEXT_PRIVATE_UPLOAD_BUCKET,
    Key: key,
@@ -59,6 +62,8 @@ export const getAbsolutePresignPostUrl = async (key: string) => {
 export const getPresignGetUrl = async (key: string) => {
  const client = getS3Client();

+  const { getSignedUrl } = await import('@aws-sdk/s3-request-presigner');
+
  const getObjectCommand = new GetObjectCommand({
    Bucket: process.env.NEXT_PRIVATE_UPLOAD_BUCKET,
    Key: key,
@@ -3,8 +3,6 @@ import { match } from 'ts-pattern';

 import { DocumentDataType } from '@documenso/prisma/client';

-import { getAbsolutePresignPostUrl } from './server-actions';
-
 export type UpdateFileOptions = {
  type: DocumentDataType;
  oldData: string;
@@ -40,6 +38,8 @@ const updateFileWithBytes64 = (data: string) => {
 };

 const updateFileWithS3 = async (key: string, data: string) => {
+  const { getAbsolutePresignPostUrl } = await import('./server-actions');
+
  const { url } = await getAbsolutePresignPostUrl(key);

  const response = await fetch(url, {
@@ -14,16 +14,16 @@
    "prisma:seed": "prisma db seed"
  },
  "prisma": {
-    "seed": "ts-node --transpileOnly --skipProject ./seed-database.ts"
+    "seed": "ts-node --transpileOnly --project ./tsconfig.seed.json ./seed-database.ts"
  },
  "dependencies": {
-    "@prisma/client": "5.3.1",
+    "@prisma/client": "5.4.2",
    "dotenv": "^16.3.1",
    "dotenv-cli": "^7.3.0",
-    "prisma": "5.3.1"
+    "prisma": "5.4.2"
  },
  "devDependencies": {
    "ts-node": "^10.9.1",
-    "typescript": "^5.1.6"
+    "typescript": "5.2.2"
  }
 }
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "module": "NodeNext"
+  }
+}
@@ -16,6 +16,6 @@
    "@trpc/react-query": "^10.36.0",
    "@trpc/server": "^10.36.0",
    "superjson": "^1.13.1",
-    "zod": "^3.21.4"
+    "zod": "^3.22.4"
  }
 }
@@ -3,7 +3,7 @@ import { z } from 'zod';
 export const ZSignFieldWithTokenMutationSchema = z.object({
  token: z.string(),
  fieldId: z.number(),
-  value: z.string(),
+  value: z.string().trim(),
  isBase64: z.boolean().optional(),
 });

@@ -5,19 +5,20 @@ import { useState } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';

-import { cn } from '@documenso/ui/lib/utils';
+import { DocumentData } from '@documenso/prisma/client';

+import { cn } from '../../lib/utils';
 import { Dialog, DialogOverlay, DialogPortal } from '../../primitives/dialog';
 import { LazyPDFViewerNoLoader } from '../../primitives/lazy-pdf-viewer';

 export type DocumentDialogProps = {
-  document: string;
+  documentData: DocumentData;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;

 /**
 * A dialog which renders the provided document.
 */
-export default function DocumentDialog({ document, ...props }: DocumentDialogProps) {
+export default function DocumentDialog({ documentData, ...props }: DocumentDialogProps) {
  const [documentLoaded, setDocumentLoaded] = useState(false);

  const onDocumentLoad = () => {
@@ -40,7 +41,7 @@ export default function DocumentDialog({ document, ...props }: DocumentDialogPro
        >
          <LazyPDFViewerNoLoader
            className="mx-auto w-full max-w-3xl xl:max-w-5xl"
-            document={`data:application/pdf;base64,${document}`}
+            documentData={documentData}
            onClick={(e) => e.stopPropagation()}
            onDocumentLoad={onDocumentLoad}
          />
@@ -5,7 +5,11 @@ import { HTMLAttributes, useState } from 'react';
 import { Copy, Share } from 'lucide-react';
 import { FaXTwitter } from 'react-icons/fa6';

-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
+import {
+  TOAST_DOCUMENT_SHARE_ERROR,
+  TOAST_DOCUMENT_SHARE_SUCCESS,
+} from '@documenso/lib/constants/toast';
 import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -27,7 +31,11 @@ export type DocumentShareButtonProps = HTMLAttributes<HTMLButtonElement> & {

 export const DocumentShareButton = ({ token, documentId, className }: DocumentShareButtonProps) => {
  const { toast } = useToast();
-  const [, copyToClipboard] = useCopyToClipboard();
+
+  const { copyShareLink, createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
+    onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS),
+    onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR),
+  });

  const [isOpen, setIsOpen] = useState(false);

@@ -49,24 +57,15 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
  };

  const onCopyClick = async () => {
-    let { slug = '' } = shareLink || {};
-
-    if (!slug) {
-      const result = await createOrGetShareLink({
+    if (shareLink) {
+      await copyShareLink(`${window.location.origin}/share/${shareLink.slug}`);
+    } else {
+      await createAndCopyShareLink({
        token,
        documentId,
      });
-
-      slug = result.slug;
    }

-    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
-
-    toast({
-      title: 'Copied to clipboard',
-      description: 'The sharing link has been copied to your clipboard.',
-    });
-
    setIsOpen(false);
  };

@@ -100,9 +99,9 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
          variant="outline"
          disabled={!token || !documentId}
          className={cn('flex-1', className)}
-          loading={isLoading}
+          loading={isLoading || isCopyingShareLink}
        >
-          {!isLoading && <Share className="mr-2 h-5 w-5" />}
+          {!isLoading && !isCopyingShareLink && <Share className="mr-2 h-5 w-5" />}
          Share
        </Button>
      </DialogTrigger>
@@ -5,23 +5,31 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import Image, { StaticImageData } from 'next/image';

 import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion';
+import { P, match } from 'ts-pattern';

+import { Signature } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';

 export type SigningCardProps = {
  className?: string;
  name: string;
+  signature?: Signature;
  signingCelebrationImage?: StaticImageData;
 };

 /**
 * 2D signing card.
 */
-export const SigningCard = ({ className, name, signingCelebrationImage }: SigningCardProps) => {
+export const SigningCard = ({
+  className,
+  name,
+  signature,
+  signingCelebrationImage,
+}: SigningCardProps) => {
  return (
    <div className={cn('relative w-full max-w-xs md:max-w-sm', className)}>
-      <SigningCardContent name={name} />
+      <SigningCardContent name={name} signature={signature} />

      {signingCelebrationImage && (
        <SigningCardImage signingCelebrationImage={signingCelebrationImage} />
@@ -33,7 +41,12 @@ export const SigningCard = ({ className, name, signingCelebrationImage }: Signin
 /**
 * 3D signing card that follows the mouse movement within a certain range.
 */
-export const SigningCard3D = ({ className, name, signingCelebrationImage }: SigningCardProps) => {
+export const SigningCard3D = ({
+  className,
+  name,
+  signature,
+  signingCelebrationImage,
+}: SigningCardProps) => {
  // Should use % based dimensions by calculating the window height/width.
  const boundary = 400;

@@ -130,7 +143,7 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
          rotateY,
        }}
      >
-        <SigningCardContent className="bg-transparent" name={name} />
+        <SigningCardContent className="bg-transparent" name={name} signature={signature} />
      </motion.div>

      {signingCelebrationImage && (
@@ -142,10 +155,11 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign

 type SigningCardContentProps = {
  name: string;
+  signature?: Signature;
  className?: string;
 };

-const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
+const SigningCardContent = ({ className, name, signature }: SigningCardContentProps) => {
  return (
    <Card
      className={cn(
@@ -161,14 +175,36 @@ const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
          container: 'main',
        }}
      >
-        <span
-          className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
-          style={{
-            fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
-          }}
-        >
-          {name}
-        </span>
+        {match(signature)
+          .with({ signatureImageAsBase64: P.string }, (signature) => (
+            <img
+              src={signature.signatureImageAsBase64}
+              alt="signature"
+              className="h-full max-w-[100%] dark:invert"
+            />
+          ))
+          .with({ typedSignature: P.string }, (signature) => (
+            <span
+              className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
+              style={{
+                fontSize: `max(min(4rem, ${(100 / signature.typedSignature.length / 2).toFixed(
+                  4,
+                )}cqw), 1.875rem)`,
+              }}
+            >
+              {signature.typedSignature}
+            </span>
+          ))
+          .otherwise(() => (
+            <span
+              className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
+              style={{
+                fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
+              }}
+            >
+              {name}
+            </span>
+          ))}
      </CardContent>
    </Card>
  );
@@ -22,7 +22,7 @@
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7",
    "react": "18.2.0",
-    "typescript": "^5.1.6"
+    "typescript": "5.2.2"
  },
  "dependencies": {
    "@documenso/lib": "*",
@@ -60,13 +60,14 @@
    "framer-motion": "^10.12.8",
    "lucide-react": "^0.279.0",
    "luxon": "^3.4.2",
-    "next": "13.4.19",
+    "next": "14.0.0",
    "pdfjs-dist": "3.6.172",
    "react-day-picker": "^8.7.1",
    "react-hook-form": "^7.45.4",
-    "react-pdf": "^7.3.3",
+    "react-pdf": "7.3.3",
    "react-rnd": "^10.4.1",
    "tailwind-merge": "^1.12.0",
-    "tailwindcss-animate": "^1.0.5"
+    "tailwindcss-animate": "^1.0.5",
+    "ts-pattern": "^5.0.5"
  }
 }
@@ -11,12 +11,8 @@ const AlertDialog = AlertDialogPrimitive.Root;

 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;

-const AlertDialogPortal = ({
-  className,
-  children,
-  ...props
-}: AlertDialogPrimitive.AlertDialogPortalProps) => (
-  <AlertDialogPrimitive.Portal className={cn(className)} {...props}>
+const AlertDialogPortal = ({ children, ...props }: AlertDialogPrimitive.AlertDialogPortalProps) => (
+  <AlertDialogPrimitive.Portal {...props}>
    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
      {children}
    </div>
@@ -12,12 +12,11 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;

 const DialogPortal = ({
-  className,
  children,
  position = 'start',
  ...props
 }: DialogPrimitive.DialogPortalProps & { position?: 'start' | 'end' | 'center' }) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
+  <DialogPrimitive.Portal {...props}>
    <div
      className={cn('fixed inset-0 z-50 flex justify-center sm:items-center', {
        'items-start': position === 'start',
@@ -246,12 +246,12 @@ export const AddFieldsFormPartial = ({
  useEffect(() => {
    if (selectedField) {
      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('click', onMouseClick);
+      window.addEventListener('mouseup', onMouseClick);
    }

    return () => {
      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('click', onMouseClick);
+      window.removeEventListener('mouseup', onMouseClick);
    };
  }, [onMouseClick, onMouseMove, selectedField]);

@@ -417,7 +417,7 @@ export const AddFieldsFormPartial = ({
                type="button"
                className="group h-full w-full"
                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                onClick={(e) => e.stopPropagation()}
+                onClick={() => setSelectedField(FieldType.SIGNATURE)}
                onMouseDown={() => setSelectedField(FieldType.SIGNATURE)}
                data-selected={selectedField === FieldType.SIGNATURE ? true : undefined}
              >
@@ -441,7 +441,7 @@ export const AddFieldsFormPartial = ({
                type="button"
                className="group h-full w-full"
                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                onClick={(e) => e.stopPropagation()}
+                onClick={() => setSelectedField(FieldType.EMAIL)}
                onMouseDown={() => setSelectedField(FieldType.EMAIL)}
                data-selected={selectedField === FieldType.EMAIL ? true : undefined}
              >
@@ -464,7 +464,7 @@ export const AddFieldsFormPartial = ({
                type="button"
                className="group h-full w-full"
                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                onClick={(e) => e.stopPropagation()}
+                onClick={() => setSelectedField(FieldType.NAME)}
                onMouseDown={() => setSelectedField(FieldType.NAME)}
                data-selected={selectedField === FieldType.NAME ? true : undefined}
              >
@@ -487,7 +487,7 @@ export const AddFieldsFormPartial = ({
                type="button"
                className="group h-full w-full"
                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                onClick={(e) => e.stopPropagation()}
+                onClick={() => setSelectedField(FieldType.DATE)}
                onMouseDown={() => setSelectedField(FieldType.DATE)}
                data-selected={selectedField === FieldType.DATE ? true : undefined}
              >
@@ -7,6 +7,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { Plus, Trash } from 'lucide-react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';

+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { nanoid } from '@documenso/lib/universal/id';
 import { Field, Recipient, SendStatus } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
@@ -40,6 +41,7 @@ export const AddSignersFormPartial = ({
  onSubmit,
 }: AddSignersFormProps) => {
  const { toast } = useToast();
+  const { remaining } = useLimits();

  const initialId = useId();

@@ -202,7 +204,11 @@ export const AddSignersFormPartial = ({
        />

        <div className="mt-4">
-          <Button type="button" disabled={isSubmitting} onClick={() => onAddSigner()}>
+          <Button
+            type="button"
+            disabled={isSubmitting || signers.length >= remaining.recipients}
+            onClick={() => onAddSigner()}
+          >
            <Plus className="-ml-1 mr-2 h-5 w-5" />
            Add Signer
          </Button>
@@ -85,7 +85,7 @@ const DropdownMenuItem = React.forwardRef<
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      inset && 'pl-8',
      className,
    )}
@@ -1,6 +1,6 @@
 'use client';

-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';

 import { Loader } from 'lucide-react';
 import { PDFDocumentProxy } from 'pdfjs-dist';
@@ -9,8 +9,12 @@ import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';

 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { DocumentData } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';

+import { useToast } from './use-toast';
+
 export type LoadedPDFDocument = PDFDocumentProxy;

 /**
@@ -28,9 +32,17 @@ export type OnPDFViewerPageClick = (_event: {
  pageY: number;
 }) => void | Promise<void>;

+const PDFLoader = () => (
+  <>
+    <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+    <p className="text-muted-foreground mt-4">Loading document...</p>
+  </>
+);
+
 export type PDFViewerProps = {
  className?: string;
-  document: string;
+  documentData: DocumentData;
  onDocumentLoad?: (_doc: LoadedPDFDocument) => void;
  onPageClick?: OnPDFViewerPageClick;
  [key: string]: unknown;
@@ -38,17 +50,29 @@ export type PDFViewerProps = {

 export const PDFViewer = ({
  className,
-  document,
+  documentData,
  onDocumentLoad,
  onPageClick,
  ...props
 }: PDFViewerProps) => {
+  const { toast } = useToast();
+
  const $el = useRef<HTMLDivElement>(null);

+  const [isDocumentBytesLoading, setIsDocumentBytesLoading] = useState(false);
+  const [documentBytes, setDocumentBytes] = useState<Uint8Array | null>(null);
+
  const [width, setWidth] = useState(0);
  const [numPages, setNumPages] = useState(0);
  const [pdfError, setPdfError] = useState(false);

+  const memoizedData = useMemo(
+    () => ({ type: documentData.type, data: documentData.data }),
+    [documentData.data, documentData.type],
+  );
+
+  const isLoading = isDocumentBytesLoading || !documentBytes;
+
  const onDocumentLoaded = (doc: LoadedPDFDocument) => {
    setNumPages(doc.numPages);
    onDocumentLoad?.(doc);
@@ -110,63 +134,93 @@ export const PDFViewer = ({
    }
  }, []);

+  useEffect(() => {
+    const fetchDocumentBytes = async () => {
+      try {
+        setIsDocumentBytesLoading(true);
+
+        const bytes = await getFile(memoizedData);
+
+        setDocumentBytes(bytes);
+
+        setIsDocumentBytesLoading(false);
+      } catch (err) {
+        console.error(err);
+
+        toast({
+          title: 'Error',
+          description: 'An error occurred while loading the document.',
+          variant: 'destructive',
+        });
+      }
+    };
+
+    void fetchDocumentBytes();
+  }, [memoizedData, toast]);
+
  return (
    <div ref={$el} className={cn('overflow-hidden', className)} {...props}>
-      <PDFDocument
-        file={document}
-        className={cn('w-full overflow-hidden rounded', {
-          'h-[80vh] max-h-[60rem]': numPages === 0,
-        })}
-        onLoadSuccess={(d) => onDocumentLoaded(d)}
-        // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
-        // Therefore we add some additional custom error handling.
-        onSourceError={() => {
-          setPdfError(true);
-        }}
-        externalLinkTarget="_blank"
-        loading={
-          <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-            {pdfError ? (
+      {isLoading ? (
+        <div
+          className={cn(
+            'flex h-[80vh] max-h-[60rem] w-full flex-col items-center justify-center overflow-hidden rounded',
+          )}
+        >
+          <PDFLoader />
+        </div>
+      ) : (
+        <PDFDocument
+          file={documentBytes.buffer}
+          className={cn('w-full overflow-hidden rounded', {
+            'h-[80vh] max-h-[60rem]': numPages === 0,
+          })}
+          onLoadSuccess={(d) => onDocumentLoaded(d)}
+          // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
+          // Therefore we add some additional custom error handling.
+          onSourceError={() => {
+            setPdfError(true);
+          }}
+          externalLinkTarget="_blank"
+          loading={
+            <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+              {pdfError ? (
+                <div className="text-muted-foreground text-center">
+                  <p>Something went wrong while loading the document.</p>
+                  <p className="mt-1 text-sm">Please try again or contact our support.</p>
+                </div>
+              ) : (
+                <PDFLoader />
+              )}
+            </div>
+          }
+          error={
+            <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
              <div className="text-muted-foreground text-center">
                <p>Something went wrong while loading the document.</p>
                <p className="mt-1 text-sm">Please try again or contact our support.</p>
              </div>
-            ) : (
-              <>
-                <Loader className="text-documenso h-12 w-12 animate-spin" />
-
-                <p className="text-muted-foreground mt-4">Loading document...</p>
-              </>
-            )}
-          </div>
-        }
-        error={
-          <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-            <div className="text-muted-foreground text-center">
-              <p>Something went wrong while loading the document.</p>
-              <p className="mt-1 text-sm">Please try again or contact our support.</p>
            </div>
-          </div>
-        }
-      >
-        {Array(numPages)
-          .fill(null)
-          .map((_, i) => (
-            <div
-              key={i}
-              className="border-border my-8 overflow-hidden rounded border first:mt-0 last:mb-0"
-            >
-              <PDFPage
-                pageNumber={i + 1}
-                width={width}
-                renderAnnotationLayer={false}
-                renderTextLayer={false}
-                loading={() => ''}
-                onClick={(e) => onDocumentPageClick(e, i + 1)}
-              />
-            </div>
-          ))}
-      </PDFDocument>
+          }
+        >
+          {Array(numPages)
+            .fill(null)
+            .map((_, i) => (
+              <div
+                key={i}
+                className="border-border my-8 overflow-hidden rounded border first:mt-0 last:mb-0"
+              >
+                <PDFPage
+                  pageNumber={i + 1}
+                  width={width}
+                  renderAnnotationLayer={false}
+                  renderTextLayer={false}
+                  loading={() => ''}
+                  onClick={(e) => onDocumentPageClick(e, i + 1)}
+                />
+              </div>
+            ))}
+        </PDFDocument>
+      )}
    </div>
  );
 };
@@ -28,8 +28,8 @@ interface SheetPortalProps
  extends SheetPrimitive.DialogPortalProps,
    VariantProps<typeof portalVariants> {}

-const SheetPortal = ({ position, className, children, ...props }: SheetPortalProps) => (
-  <SheetPrimitive.Portal className={cn(className)} {...props}>
+const SheetPortal = ({ position, children, ...props }: SheetPortalProps) => (
+  <SheetPrimitive.Portal {...props}>
    <div className={portalVariants({ position })}>{children}</div>
  </SheetPrimitive.Portal>
 );
@@ -133,7 +133,7 @@ function dispatch(action: Action) {
  });
 }

-type Toast = Omit<ToasterToast, 'id'>;
+export type Toast = Omit<ToasterToast, 'id'>;

 function toast({ ...props }: Toast) {
  const id = genId();
@@ -13,6 +13,11 @@
      "cache": false,
      "persistent": true
    },
+    "start": {
+      "dependsOn": ["^build"],
+      "cache": false,
+      "persistent": true
+    },
    "dev:test": {
      "cache": false
    },
Author	SHA1	Message	Date
Mythie	dc5a1819f1	chore: upgrade to next 14.0.0	2023-10-27 15:14:04 +11:00
Mythie	ef8fcd4ea9	fix: missing content updates	2023-10-26 16:58:42 +11:00
Mythie	bf3747cd7b	fix: change sign in links	2023-10-26 16:40:25 +11:00
Mythie	3ff8a99250	fix: update early adopter error log	2023-10-26 14:26:10 +11:00
Mythie	fb64496c7d	fix: update stripe metadata for early adopters	2023-10-26 13:21:31 +11:00
Mythie	407fa0047c	fix: update limits handler	2023-10-26 12:26:29 +11:00
Mythie	a2902ee7c0	fix: attach document to completed email	2023-10-25 22:34:51 +11:00
Mythie	7599b84833	fix: limit recipients	2023-10-25 22:31:31 +11:00
Mythie	769f543be1	fix: improve claim plan flow	2023-10-25 22:29:51 +11:00
Mythie	d6447ffa82	fix: return response for failed invoices	2023-10-25 13:29:00 +11:00
Mythie	f29ac73085	fix: update customer handling for checkouts	2023-10-25 13:13:57 +11:00
Mythie	fd8f6da2c6	fix: update singleplayer add signature to card	2023-10-22 12:40:09 +11:00
Mythie	0b50176178	fix: limits no longer cache during session changes	2023-10-22 11:18:00 +11:00
Mythie	c02640e104	fix: optimise pdf viewer rerendering	2023-10-21 13:08:29 +11:00
Mythie	091960f269	fix: unbreak pdf viewer	2023-10-20 20:14:10 +11:00
Mythie	594f3ec16a	fix: move getFile to client side	2023-10-20 13:42:10 +11:00
Mythie	a89da06842	fix: update webhook handler	2023-10-20 12:14:39 +11:00
Mythie	db1d11309f	fix: update webhook handler	2023-10-20 12:05:18 +11:00
Adithya Krishna	616cf1c287	chore: update zod to 3.22.4 (#563 ) * chore: updated zod Signed-off-by: Adithya Krishna <aadithya794@gmail.com> --------- Signed-off-by: Adithya Krishna <aadithya794@gmail.com>	2023-10-19 21:24:05 +11:00
Udit Takkar	ba665edb1e	fix: UI fixes and improvements (#559 ) * chore: add cursor pointer * fix: tooltip color * chore: add tooltip * fix: admin pages in mobile	2023-10-19 21:00:36 +11:00
Catalin Pit	1c34eddd10	chore: add prisma studio command (#576 ) Co-authored-by: pit <pit@pits-MacBook-Pro.local>	2023-10-19 09:19:46 +03:00
Mythie	1fbf6ed4ba	fix: add mode to checkout session	2023-10-19 12:27:01 +11:00
Aditya Deshlahre	1d6f7f9e37	fix(bug): name field can be updated with spaces #555 (#558 )	2023-10-19 12:12:56 +11:00
Mythie	e3c3ec7825	fix: downgrade react-pdf	2023-10-18 23:51:16 +11:00
Lucas Smith	08d176c803	Merge pull request #575 from 18feb06/fix-error-invalid-url-on-main-page-on-self-host-#573 fix: error invalid url on main page on self host #573	2023-10-18 23:20:22 +11:00
Mythie	b952ed9035	fix: support multi env	2023-10-18 23:19:29 +11:00
Nafees Nazik	43062dda12	chore: upgrade to latest next.js version (#553 ) * chore: upgrade next.js * fix: canvas not found error * chore: upgrade package for marketing * feat: add isServer conditional * fix: inverse isServer condition * fix: normalize packages * fix: upgrade ee package * fix: depdency nightmares * fix: failing seed script	2023-10-18 22:33:02 +11:00
18feb06	1b53ff9c2d	Merge branch 'documenso:feat/refresh' into fix-error-invalid-url-on-main-page-on-self-host-#573	2023-10-18 16:30:57 +05:00
Tameem Asim	acd3e6d613	fix: invalid url on main page in self host	2023-10-18 16:28:57 +05:00
Catalin Pit	e33b02df56	fix: truncate long file name in admin dashboard (#572 ) Co-authored-by: pit <pit@192-168-0-136.rdsnet.ro>	2023-10-18 08:58:35 +03:00
18feb06	2c6849ca76	fix: email requesting signature shows "completed document" in preview… (#514 )	2023-10-18 15:32:39 +11:00
Abhinav-Developer-23	9434f9e2e4	fix: support mailto link fix (#571 )	2023-10-17 17:27:02 +11:00
Lucas Smith	f6daef7333	Merge pull request #566 from documenso/feat/plan-limits feat: plan limits	2023-10-17 14:30:18 +11:00
Mythie	c3df8d4c2a	fix: add redirects for v0.9 requests	2023-10-17 13:50:54 +11:00
David Nguyen	4b09693862	feat: add safari clipboard copy support (#486 )	2023-10-17 12:40:36 +11:00
Catalin Pit	8d2e50d1fe	fix: user avatar on admin documents table (#570 ) Co-authored-by: pit <pit@pits-MacBook-Pro.local>	2023-10-16 17:36:12 +03:00
Abhinav-Developer-23	bfc749f30b	fix: fix for Accepting signatures or text fields with white space only #551 (#557 )	2023-10-16 20:08:45 +11:00
Udit Takkar	e0d4255700	fix: enable dragging fields (#565 )	2023-10-16 19:50:28 +11:00