fix: use custom status widget

Before:-
![Screenshot 2024-03-19
000255](https://github.com/documenso/documenso/assets/81948346/169bf207-3e0f-419c-bf72-ff25347c6814)

Now:-

![Screenshot 2024-03-18
235807](https://github.com/documenso/documenso/assets/81948346/17cd30d3-d6ef-4e31-b174-142c06491c4a)

.devcontainer/on-create.sh

@@ -1,13 +1,10 @@
 #!/usr/bin/env bash
 
-# Start the database and mailserver
-docker compose -f ./docker/compose-without-app.yml up -d
-
 # Install dependencies
 npm install
 
 # Copy the env file
 cp .env.example .env
 
-# Run the migrations
-npm run prisma:migrate-dev
+# Run the dev setup
+npm run dx

.env.example

@@ -22,10 +22,23 @@ NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documen
 # Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
 NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 
-# [[E2E Tests]]
-E2E_TEST_AUTHENTICATE_USERNAME="Test User"
-E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
-E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
+# [[SIGNING]]
+# The transport to use for document signing. Available options: local (default) | gcloud-hsm
+NEXT_PRIVATE_SIGNING_TRANSPORT="local"
+# OPTIONAL: The passphrase to use for the local file-based signing transport.
+NEXT_PRIVATE_SIGNING_PASSPHRASE=
+# OPTIONAL: The local file path to the .p12 file to use for the local signing transport.
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=
+# OPTIONAL: The base64-encoded contents of the .p12 file to use for the local signing transport.
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS=
+# OPTIONAL: The path to the Google Cloud HSM key to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH=
+# OPTIONAL: The path to the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH=
+# OPTIONAL: The base64-encoded contents of the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS=
+# OPTIONAL: The path to the Google Cloud Credentials file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS=
 
 # [[SIGNING]]
 # OPTIONAL: Defines the signing transport to use. Available options: local (default)
@@ -100,6 +113,11 @@ NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
 # OPTIONAL: Leave blank to allow users to signup through /signup page.
 NEXT_PUBLIC_DISABLE_SIGNUP=
 
+# [[E2E Tests]]
+E2E_TEST_AUTHENTICATE_USERNAME="Test User"
+E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
+E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
+
 # This is only required for the marketing site
 # [[REDIS]]
 NEXT_PRIVATE_REDIS_URL=

.vscode/settings.json

@@ -1,7 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",

apps/marketing/next.config.js

@@ -21,7 +21,7 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
 const config = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
     serverActions: {
       bodySizeLimit: '50mb',
     },

apps/marketing/package.json

@@ -19,6 +19,7 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
+    "@openstatus/react": "^0.0.3",
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",

apps/marketing/src/app/(marketing)/layout.tsx

@@ -1,78 +1,14 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-
-import Image from 'next/image';
-import { usePathname } from 'next/navigation';
-
-import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png';
-import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { cn } from '@documenso/ui/lib/utils';
-
 import { Footer } from '~/components/(marketing)/footer';
-import { Header } from '~/components/(marketing)/header';
+import { LayoutHeader } from '~/components/(marketing)/layout-header';
 
 export type MarketingLayoutProps = {
   children: React.ReactNode;
 };
 
 export default function MarketingLayout({ children }: MarketingLayoutProps) {
-  const [scrollY, setScrollY] = useState(0);
-  const pathname = usePathname();
-
-  const { getFlag } = useFeatureFlags();
-
-  const showProfilesAnnouncementBar = getFlag('marketing_profiles_announcement_bar');
-
-  useEffect(() => {
-    const onScroll = () => {
-      setScrollY(window.scrollY);
-    };
-
-    window.addEventListener('scroll', onScroll);
-
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
-
   return (
-    <div
-      className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
-        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
-      })}
-    >
-      <div
-        className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
-          'bg-background/50 backdrop-blur-md': scrollY > 5,
-        })}
-      >
-        {showProfilesAnnouncementBar && (
-          <div className="relative inline-flex w-full items-center justify-center overflow-hidden px-4 py-2.5">
-            <div className="absolute inset-0 -z-[1]">
-              <Image
-                src={launchWeekTwoImage}
-                className="h-full w-full object-cover"
-                alt="Launch Week 2"
-              />
-            </div>
-
-            <div className="text-background text-center text-sm text-white">
-              Claim your documenso public profile username now!{' '}
-              <span className="hidden font-semibold md:inline">documenso.com/u/yourname</span>
-              <div className="mt-1.5 block md:ml-4 md:mt-0 md:inline-block">
-                <a
-                  href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=marketing-announcement-bar`}
-                  className="bg-background text-foreground rounded-md px-2.5 py-1 text-xs font-medium duration-300"
-                >
-                  Claim Now
-                </a>
-              </div>
-            </div>
-          </div>
-        )}
-
-        <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
-      </div>
+    <div className="relative flex min-h-[100vh] max-w-[100vw] flex-col overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
+      <LayoutHeader />
 
       <div className="relative max-w-screen-xl flex-1 px-4 sm:mx-auto lg:px-8">{children}</div>
 

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

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
   data: T;
@@ -34,13 +33,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
     .reverse();
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">{title}</h3>
-        <span>{extraInfo}</span>
-      </div>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+          <span>{extraInfo}</span>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={chartHeight}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/cap-table.tsx

@@ -5,8 +5,6 @@ import { useEffect, useState } from 'react';
 
 import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
 
-import { cn } from '@documenso/ui/lib/utils';
-
 import { CAP_TABLE } from './data';
 
 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
@@ -49,10 +47,12 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
     setIsSSR(false);
   }, []);
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Cap Table</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         {!isSSR && (
           <PieChart width={400} height={400}>
             <Pie

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

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
   data: Record<string, string | number>[];
@@ -18,10 +17,12 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
   }));
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Funding Raised</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
             <XAxis dataKey="date" />

apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type MonthlyCompletedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const MonthlyCompletedDocumentsChart = ({
+  className,
+  data,
+}: MonthlyCompletedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Completed Documents per Month</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Completed Documents']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyNewUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartPr
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">New Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">New Users</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyTotalUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersCha
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Total Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Users</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

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

@@ -2,20 +2,23 @@ import type { Metadata } from 'next';
 
 import { z } from 'zod';
 
+import { getCompletedDocumentsMonthly } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
-import { MetricCard } from '~/app/(marketing)/open/metric-card';
-import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 import { CallToAction } from '~/components/(marketing)/call-to-action';
 
 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { MetricCard } from './metric-card';
+import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-chart';
 import { MonthlyNewUsersChart } from './monthly-new-users-chart';
 import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
+import { SalaryBands } from './salary-bands';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
+import { TotalSignedDocumentsChart } from './total-signed-documents-chart';
 import { Typefully } from './typefully';
 
 export const metadata: Metadata = {
@@ -131,16 +134,18 @@ export default async function OpenPage() {
     { total_count: mergedPullRequests },
     STARGAZERS_DATA,
     EARLY_ADOPTERS_DATA,
+    MONTHLY_USERS,
+    MONTHLY_COMPLETED_DOCUMENTS,
   ] = await Promise.all([
     fetchGithubStats(),
     fetchOpenIssues(),
     fetchMergedPullRequests(),
     fetchStargazers(),
     fetchEarlyAdopters(),
+    getUserMonthlyGrowth(),
+    getCompletedDocumentsMonthly(),
   ]);
 
-  const MONTHLY_USERS = await getUserMonthlyGrowth();
-
   return (
     <div>
       <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
@@ -161,7 +166,7 @@ export default async function OpenPage() {
           </p>
         </div>
 
-        <div className="mt-12 grid grid-cols-12 gap-8">
+        <div className="my-12 grid grid-cols-12 gap-8">
           <div className="col-span-12 grid grid-cols-4 gap-4">
             <MetricCard
               className="col-span-2 lg:col-span-1"
@@ -188,11 +193,57 @@ export default async function OpenPage() {
           <TeamMembers className="col-span-12" />
 
           <SalaryBands className="col-span-12" />
+        </div>
 
+        <h2 className="px-4 text-2xl font-semibold">Finances</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
           <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
 
           <CapTable className="col-span-12 lg:col-span-6" />
+        </div>
 
+        <h2 className="px-4 text-2xl font-semibold">Community</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="stars"
+            title="GitHub: Total Stars"
+            label="Stars"
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="mergedPRs"
+            title="GitHub: Total Merged PRs"
+            label="Merged PRs"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="forks"
+            title="GitHub: Total Forks"
+            label="Forks"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="openIssues"
+            title="GitHub: Total Open Issues"
+            label="Open Issues"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <Typefully className="col-span-12 lg:col-span-6" />
+        </div>
+
+        <h2 className="px-4 text-2xl font-semibold">Growth</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
           <BarMetric<EarlyAdoptersType>
             data={EARLY_ADOPTERS_DATA}
             metricKey="earlyAdopters"
@@ -202,57 +253,29 @@ export default async function OpenPage() {
             extraInfo={<OpenPageTooltip />}
           />
 
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="stars"
-            title="Github: Total Stars"
-            label="Stars"
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="mergedPRs"
-            title="Github: Total Merged PRs"
-            label="Merged PRs"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="forks"
-            title="Github: Total Forks"
-            label="Forks"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="openIssues"
-            title="Github: Total Open Issues"
-            label="Open Issues"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
           <MonthlyTotalUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
           <MonthlyNewUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
 
-          <Typefully className="col-span-12 lg:col-span-6" />
-
-          <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
-            <h2 className="text-2xl font-bold">Where's the rest?</h2>
-
-            <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
-              We're still working on getting all our metrics together. We'll update this page as
-              soon as we have more to share.
-            </p>
-          </div>
+          <MonthlyCompletedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
+          <TotalSignedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
         </div>
       </div>
 
+      <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
+        <h2 className="text-2xl font-bold">Is there more?</h2>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+          This page is evolving as we learn what makes a great signing company. We'll update it when
+          we have more to share.
+        </p>
+      </div>
+
       <CallToAction className="mt-12" utmSource="open-page" />
     </div>
   );

apps/marketing/src/app/(marketing)/open/team-members.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import {

apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type TotalSignedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Completed Documents</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [
+                Number(value).toLocaleString('en-US'),
+                'Total Completed Documents',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Total Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

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

@@ -6,18 +6,19 @@ import Link from 'next/link';
 
 import { FaXTwitter } from 'react-icons/fa6';
 
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
 export type TypefullyProps = HTMLAttributes<HTMLDivElement>;
 
 export const Typefully = ({ className, ...props }: TypefullyProps) => {
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Twitter Stats</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Twitter Stats</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border py-8 shadow-sm hover:shadow">
-        <div className="flex flex-col items-center gap-y-4 text-center">
+        <div className="my-12 flex flex-col items-center gap-y-4 text-center">
           <FaXTwitter className="h-12 w-12" />
           <Link href="https://typefully.com/documenso/stats" target="_blank">
             <h1>Documenso on X</h1>

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -184,83 +184,85 @@ export const SinglePlayerClient = () => {
   };
 
   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>
+    <div className="overflow-x-auto overflow-y-hidden">
+      <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={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=singleplayer`}
-            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"
-          >
-            early adopter 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} />
-          )}
+          <p className="text-foreground mx-auto mt-4 max-w-[50ch] text-lg leading-normal">
+            Create a{' '}
+            <Link
+              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=singleplayer`}
+              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"
+            >
+              early adopter plan
+            </Link>{' '}
+            for exclusive features, including the ability to collaborate with multiple signers.
+          </p>
         </div>
 
-        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-          <DocumentFlowFormContainer
-            className="top-24 lg:h-[calc(100vh-7rem)]"
-            onSubmit={(e) => e.preventDefault()}
-          >
-            <Stepper
-              currentStep={currentDocumentFlow.stepIndex}
-              setCurrentStep={(step) => setStep(SinglePlayerModeSteps[step - 1])}
+        <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 lg:h-[calc(100vh-7rem)]"
+              onSubmit={(e) => e.preventDefault()}
             >
-              {/* Add fields to PDF page. */}
-              <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
-                <AddFieldsFormPartial
-                  documentFlow={documentFlow.fields}
-                  hideRecipients={true}
-                  recipients={uploadedFile ? [placeholderRecipient] : []}
+              <Stepper
+                currentStep={currentDocumentFlow.stepIndex}
+                setCurrentStep={(step) => setStep(SinglePlayerModeSteps[step - 1])}
+              >
+                {/* Add fields to PDF page. */}
+                <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
+                  <AddFieldsFormPartial
+                    documentFlow={documentFlow.fields}
+                    hideRecipients={true}
+                    recipients={uploadedFile ? [placeholderRecipient] : []}
+                    fields={fields}
+                    onSubmit={onFieldsSubmit}
+                  />
+                </fieldset>
+
+                {/* Enter user details and signature. */}
+
+                <AddSignatureFormPartial
+                  documentFlow={documentFlow.sign}
                   fields={fields}
-                  onSubmit={onFieldsSubmit}
+                  onSubmit={onSignSubmit}
+                  requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
+                  requireCustomText={Boolean(fields.find((field) => field.type === 'TEXT'))}
+                  requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
                 />
-              </fieldset>
-
-              {/* Enter user details and signature. */}
-
-              <AddSignatureFormPartial
-                documentFlow={documentFlow.sign}
-                fields={fields}
-                onSubmit={onSignSubmit}
-                requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
-                requireCustomText={Boolean(fields.find((field) => field.type === 'TEXT'))}
-                requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
-              />
-            </Stepper>
-          </DocumentFlowFormContainer>
+              </Stepper>
+            </DocumentFlowFormContainer>
+          </div>
         </div>
       </div>
     </div>

apps/marketing/src/components/(marketing)/callout.tsx

@@ -53,7 +53,7 @@ export const Callout = ({ starCount }: CalloutProps) => {
       >
         <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <LuGithub className="mr-2 h-5 w-5" />
-          Star on Github
+          Star on GitHub
           {starCount && starCount > 0 && (
             <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               {starCount.toLocaleString('en-US')}

apps/marketing/src/components/(marketing)/footer.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
@@ -13,6 +11,8 @@ import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
+import { StatusWidget } from './status-widget';
+
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
 const SOCIAL_LINKS = [
@@ -62,6 +62,10 @@ export const Footer = ({ className, ...props }: FooterProps) => {
               </Link>
             ))}
           </div>
+
+          <div className="mt-6">
+            <StatusWidget />
+          </div>
         </div>
 
         <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">

apps/marketing/src/components/(marketing)/hero.tsx

@@ -123,7 +123,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
             <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
               <LuGithub className="mr-2 h-5 w-5" />
-              Star on Github
+              Star on GitHub
             </Button>
           </Link>
         </motion.div>

apps/marketing/src/components/(marketing)/layout-header.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import Image from 'next/image';
+
+import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png';
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { Header } from '~/components/(marketing)/header';
+
+export function LayoutHeader() {
+  const [scrollY, setScrollY] = useState(0);
+
+  const { getFlag } = useFeatureFlags();
+
+  const showProfilesAnnouncementBar = getFlag('marketing_profiles_announcement_bar');
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  return (
+    <div
+      className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
+        'bg-background/50 backdrop-blur-md': scrollY > 5,
+      })}
+    >
+      {showProfilesAnnouncementBar && (
+        <div className="relative inline-flex w-full items-center justify-center overflow-hidden px-4 py-2.5">
+          <div className="absolute inset-0 -z-[1]">
+            <Image
+              src={launchWeekTwoImage}
+              className="h-full w-full object-cover"
+              alt="Launch Week 2"
+            />
+          </div>
+
+          <div className="text-background text-center text-sm text-white">
+            Claim your documenso public profile username now!{' '}
+            <span className="hidden font-semibold md:inline">documenso.com/u/yourname</span>
+            <div className="mt-1.5 block md:ml-4 md:mt-0 md:inline-block">
+              <a
+                href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=marketing-announcement-bar`}
+                className="bg-background text-foreground rounded-md px-2.5 py-1 text-xs font-medium duration-300"
+              >
+                Claim Now
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+    </div>
+  );
+}

apps/marketing/src/components/(marketing)/status-widget.tsx

@@ -0,0 +1,73 @@
+import type { Status } from '@openstatus/react';
+import { getStatus } from '@openstatus/react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+const getStatusLevel = (level: Status) => {
+  return {
+    operational: {
+      label: 'Operational',
+      color: 'bg-green-500',
+      color2: 'bg-green-400',
+    },
+    degraded_performance: {
+      label: 'Degraded Performance',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    partial_outage: {
+      label: 'Partial Outage',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    major_outage: {
+      label: 'Major Outage',
+      color: 'bg-red-500',
+      color2: 'bg-red-400',
+    },
+    unknown: {
+      label: 'Unknown',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+    incident: {
+      label: 'Incident',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    under_maintenance: {
+      label: 'Under Maintenance',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+  }[level];
+};
+
+export async function StatusWidget() {
+  const { status } = await getStatus('documenso');
+
+  const level = getStatusLevel(status);
+
+  return (
+    <a
+      className="border-border inline-flex max-w-fit  items-center justify-between gap-2 space-x-2 rounded-md border border-gray-200 px-3 py-1 text-sm"
+      href="https://status.documenso.com"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <div>
+        <p className="text-sm">{level.label}</p>
+      </div>
+
+      <span className="relative ml-auto flex h-1.5 w-1.5">
+        <span
+          className={cn(
+            'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
+            level.color2,
+          )}
+        />
+        <span className={cn('relative inline-flex h-1.5 w-1.5 rounded-full', level.color)} />
+      </span>
+    </a>
+  );
+}

apps/web/next.config.js

@@ -22,7 +22,7 @@ const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
     serverActions: {
       bodySizeLimit: '50mb',
     },

apps/web/src/components/forms/public-profile-claim-dialog.tsx

@@ -154,7 +154,7 @@ export const ClaimPublicProfileDialogForm = ({
 
                         <FormMessage />
 
-                        <div className="bg-muted/50 text-muted-foreground mt-2 inline-block truncate rounded-md px-2 py-1 text-sm">
+                        <div className="bg-muted/50 text-muted-foreground mt-2 inline-block max-w-[29rem] truncate rounded-md px-2 py-1 text-sm lowercase">
                           {baseUrl.host}/u/{field.value || '<username>'}
                         </div>
                       </FormItem>

lint-staged.config.cjs

@@ -1,7 +1,15 @@
+const path = require('path');
+
+const eslint = (filenames) =>
+  `eslint --fix ${filenames.map((f) => `"${path.relative(process.cwd(), f)}"`).join(' ')}`;
+
+const prettier = (filenames) =>
+  `prettier --write ${filenames.map((f) => `"${path.relative(process.cwd(), f)}"`).join(' ')}`;
+
 /** @type {import('lint-staged').Config} */
 module.exports = {
-  '**/*.{ts,tsx,cts,mts}': (files) => files.map((file) => `eslint --fix ${file}`),
-  '**/*.{js,jsx,cjs,mjs}': (files) => files.map((file) => `prettier --write ${file}`),
-  '**/*.{yml,mdx}': (files) => files.map((file) => `prettier --write ${file}`),
+  '**/*.{ts,tsx,cts,mts}': [eslint, prettier],
+  '**/*.{js,jsx,cjs,mjs}': [prettier],
+  '**/*.{yml,mdx}': [prettier],
   '**/*/package.json': 'npm run precommit',
 };

package.json

@@ -36,8 +36,8 @@
     "dotenv-cli": "^7.3.0",
     "eslint": "^8.40.0",
     "eslint-config-custom": "*",
-    "husky": "^8.0.0",
-    "lint-staged": "^14.0.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
     "prettier": "^2.5.1",
     "rimraf": "^5.0.1",
     "turbo": "^1.9.3"
@@ -48,6 +48,7 @@
     "packages/*"
   ],
   "dependencies": {
+    "@documenso/pdf-sign": "^0.1.0",
     "next-runtime-env": "^3.2.0"
   },
   "overrides": {

packages/eslint-config/index.cjs

@@ -4,16 +4,15 @@ module.exports = {
     'turbo',
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
     'plugin:package-json/recommended',
   ],
 
-  plugins: ['prettier', 'package-json', 'unused-imports'],
+  plugins: ['package-json', 'unused-imports'],
 
   env: {
+    es2022: true,
     node: true,
     browser: true,
-    es6: true,
   },
 
   parser: '@typescript-eslint/parser',

packages/eslint-config/package.json

@@ -7,16 +7,14 @@
     "clean": "rimraf node_modules"
   },
   "dependencies": {
-    "@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",
-    "eslint-config-turbo": "^1.9.3",
-    "eslint-plugin-package-json": "^0.2.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-unused-imports": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.3",
+    "eslint-config-turbo": "^1.12.5",
+    "eslint-plugin-package-json": "^0.10.4",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-unused-imports": "^3.1.0",
     "typescript": "5.2.2"
   }
 }

packages/lib/server-only/user/get-monthly-completed-document.ts

@@ -0,0 +1,35 @@
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+
+export type GetCompletedDocumentsMonthlyResult = Array<{
+  month: string;
+  count: number;
+  cume_count: number;
+}>;
+
+type GetCompletedDocumentsMonthlyQueryResult = Array<{
+  month: Date;
+  count: bigint;
+  cume_count: bigint;
+}>;
+
+export const getCompletedDocumentsMonthly = async () => {
+  const result = await prisma.$queryRaw<GetCompletedDocumentsMonthlyQueryResult>`
+    SELECT
+      DATE_TRUNC('month', "updatedAt") AS "month",
+      COUNT("id") as "count",
+      SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "updatedAt")) as "cume_count"
+    FROM "Document"
+    WHERE "status" = 'COMPLETED'
+    GROUP BY "month"
+    ORDER BY "month" DESC
+    LIMIT 12
+  `;
+
+  return result.map((row) => ({
+    month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
+    count: Number(row.count),
+    cume_count: Number(row.cume_count),
+  }));
+};

packages/prisma/seed/pr-711-deletion-of-documents.ts

@@ -182,6 +182,7 @@ const createCompletedDocument = async (sender: User, recipients: User[]) => {
       title: `[${PULL_REQUEST_NUMBER}] Document 1 - Completed`,
       status: DocumentStatus.COMPLETED,
       documentDataId: documentData.id,
+      completedAt: new Date(),
       userId: sender.id,
     },
   });

packages/signing/constants/byte-range.ts

@@ -0,0 +1,3 @@
+// We use stars as a placeholder since it's easy to find and replace,
+// the length of the placeholder is to support larger pdf files
+export const BYTE_RANGE_PLACEHOLDER = '**********';

packages/signing/helpers/add-signing-placeholder.ts

@@ -1,4 +1,3 @@
-import signer from 'node-signpdf';
 import {
   PDFArray,
   PDFDocument,
@@ -9,6 +8,8 @@ import {
   rectangle,
 } from 'pdf-lib';
 
+import { BYTE_RANGE_PLACEHOLDER } from '../constants/byte-range';
+
 export type AddSigningPlaceholderOptions = {
   pdf: Buffer;
 };
@@ -20,9 +21,9 @@ export const addSigningPlaceholder = async ({ pdf }: AddSigningPlaceholderOption
   const byteRange = PDFArray.withContext(doc.context);
 
   byteRange.push(PDFNumber.of(0));
-  byteRange.push(PDFName.of(signer.byteRangePlaceholder));
-  byteRange.push(PDFName.of(signer.byteRangePlaceholder));
-  byteRange.push(PDFName.of(signer.byteRangePlaceholder));
+  byteRange.push(PDFName.of(BYTE_RANGE_PLACEHOLDER));
+  byteRange.push(PDFName.of(BYTE_RANGE_PLACEHOLDER));
+  byteRange.push(PDFName.of(BYTE_RANGE_PLACEHOLDER));
 
   const signature = doc.context.obj({
     Type: 'Sig',

packages/signing/helpers/update-signing-placeholder.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+
+import { updateSigningPlaceholder } from './update-signing-placeholder';
+
+describe('updateSigningPlaceholder', () => {
+  const pdf = Buffer.from(`
+      20 0 obj
+      <<
+      /Type /Sig
+      /Filter /Adobe.PPKLite
+      /SubFilter /adbe.pkcs7.detached
+      /ByteRange [ 0 /********** /********** /********** ]
+      /Contents <0000000000000000000000000000000000000000000000000000000>
+      /Reason (Signed by Documenso)
+      /M (D:20210101000000Z)
+      >>
+      endobj
+    `);
+
+  it('should not throw an error', () => {
+      expect(() => updateSigningPlaceholder({ pdf })).not.toThrowError();
+  });
+
+  it('should not modify the original PDF', () => {
+    const result = updateSigningPlaceholder({ pdf });
+
+    expect(result.pdf).not.toEqual(pdf);
+  });
+
+  it('should return a PDF with the same length as the original', () => {
+    const result = updateSigningPlaceholder({ pdf });
+
+    expect(result.pdf).toHaveLength(pdf.length);
+  });
+
+  it('should update the byte range and return it', () => {
+    const result = updateSigningPlaceholder({ pdf });
+
+    expect(result.byteRange).toEqual([0, 184, 241, 92]);
+  });
+
+  it('should only update the last signature in the PDF', () => {
+    const pdf = Buffer.from(`
+      20 0 obj
+      <<
+      /Type /Sig
+      /Filter /Adobe.PPKLite
+      /SubFilter /adbe.pkcs7.detached
+      /ByteRange [ 0 /********** /********** /********** ]
+      /Contents <0000000000000000000000000000000000000000000000000000000>
+      /Reason (Signed by Documenso)
+      /M (D:20210101000000Z)
+      >>
+      endobj
+      21 0 obj
+      <<
+      /Type /Sig
+      /Filter /Adobe.PPKLite
+      /SubFilter /adbe.pkcs7.detached
+      /ByteRange [ 0 /********** /********** /********** ]
+      /Contents <0000000000000000000000000000000000000000000000000000000>
+      /Reason (Signed by Documenso)
+      /M (D:20210101000000Z)
+      >>
+      endobj
+    `);
+
+    const result = updateSigningPlaceholder({ pdf });
+
+    expect(result.byteRange).toEqual([0, 512, 569, 92]);
+  });
+});

packages/signing/helpers/update-signing-placeholder.ts

@@ -0,0 +1,39 @@
+export type UpdateSigningPlaceholderOptions = {
+  pdf: Buffer;
+};
+
+export const updateSigningPlaceholder = ({ pdf }: UpdateSigningPlaceholderOptions) => {
+  const length = pdf.length;
+
+  const byteRangePos = pdf.lastIndexOf('/ByteRange');
+  const byteRangeStart = pdf.indexOf('[', byteRangePos);
+  const byteRangeEnd = pdf.indexOf(']', byteRangePos);
+
+  const byteRangeSlice = pdf.subarray(byteRangeStart, byteRangeEnd + 1);
+
+  const signaturePos = pdf.indexOf('/Contents', byteRangeEnd);
+  const signatureStart = pdf.indexOf('<', signaturePos);
+  const signatureEnd = pdf.indexOf('>', signaturePos);
+
+  const signatureSlice = pdf.subarray(signatureStart, signatureEnd + 1);
+
+  const byteRange = [0, 0, 0, 0];
+
+  byteRange[1] = signatureStart;
+  byteRange[2] = byteRange[1] + signatureSlice.length;
+  byteRange[3] = length - byteRange[2];
+
+  const newByteRange = `[${byteRange.join(' ')}]`.padEnd(byteRangeSlice.length, ' ');
+
+  const updatedPdf = Buffer.concat([
+    pdf.subarray(0, byteRangeStart),
+    Buffer.from(newByteRange),
+    pdf.subarray(byteRangeEnd + 1),
+  ]);
+
+  if (updatedPdf.length !== length) {
+    throw new Error('Updated PDF length does not match original length');
+  }
+
+  return { pdf: updatedPdf, byteRange };
+};

packages/signing/index.ts

@@ -1,5 +1,6 @@
 import { match } from 'ts-pattern';
 
+import { signWithGoogleCloudHSM } from './transports/google-cloud-hsm';
 import { signWithLocalCert } from './transports/local-cert';
 
 export type SignOptions = {
@@ -11,6 +12,7 @@ export const signPdf = async ({ pdf }: SignOptions) => {
 
   return await match(transport)
     .with('local', async () => signWithLocalCert({ pdf }))
+    .with('gcloud-hsm', async () => signWithGoogleCloudHSM({ pdf }))
     .otherwise(() => {
       throw new Error(`Unsupported signing transport: ${transport}`);
     });

packages/signing/package.json

@@ -9,15 +9,15 @@
     "index.ts"
   ],
   "scripts": {
+    "test": "vitest"
   },
   "dependencies": {
     "@documenso/tsconfig": "*",
-    "node-forge": "^1.3.1",
-    "node-signpdf": "^2.0.0",
+    "@documenso/pdf-sign": "^0.1.0",
     "pdf-lib": "^1.17.1",
     "ts-pattern": "^5.0.5"
   },
   "devDependencies": {
-    "@types/node-forge": "^1.3.4"
+    "vitest": "^1.3.1"
   }
 }

packages/signing/transports/google-cloud-hsm.ts

@@ -0,0 +1,79 @@
+import fs from 'node:fs';
+
+import { signWithGCloud } from '@documenso/pdf-sign';
+
+import { addSigningPlaceholder } from '../helpers/add-signing-placeholder';
+import { updateSigningPlaceholder } from '../helpers/update-signing-placeholder';
+
+export type SignWithGoogleCloudHSMOptions = {
+  pdf: Buffer;
+};
+
+export const signWithGoogleCloudHSM = async ({ pdf }: SignWithGoogleCloudHSMOptions) => {
+  const keyPath = process.env.NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH;
+
+  if (!keyPath) {
+    throw new Error('No certificate path provided for Google Cloud HSM signing');
+  }
+
+  // To handle hosting in serverless environments like Vercel we can supply the base64 encoded
+  // application credentials as an environment variable and write it to a file if it doesn't exist
+  if (
+    process.env.GOOGLE_APPLICATION_CREDENTIALS &&
+    process.env.NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS
+  ) {
+    if (!fs.existsSync(process.env.GOOGLE_APPLICATION_CREDENTIALS)) {
+      fs.writeFileSync(
+        process.env.GOOGLE_APPLICATION_CREDENTIALS,
+        Buffer.from(
+          process.env.NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS,
+          'base64',
+        ),
+      );
+    }
+  }
+
+  const { pdf: pdfWithPlaceholder, byteRange } = updateSigningPlaceholder({
+    pdf: await addSigningPlaceholder({ pdf }),
+  });
+
+  const pdfWithoutSignature = Buffer.concat([
+    pdfWithPlaceholder.subarray(0, byteRange[1]),
+    pdfWithPlaceholder.subarray(byteRange[2]),
+  ]);
+
+  const signatureLength = byteRange[2] - byteRange[1];
+
+  let cert: Buffer | null = null;
+
+  if (process.env.NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS) {
+    cert = Buffer.from(
+      process.env.NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS,
+      'base64',
+    );
+  }
+
+  if (!cert) {
+    cert = Buffer.from(
+      fs.readFileSync(
+        process.env.NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH || './example/cert.crt',
+      ),
+    );
+  }
+
+  const signature = signWithGCloud({
+    keyPath,
+    cert,
+    content: pdfWithoutSignature,
+  });
+
+  const signatureAsHex = signature.toString('hex');
+
+  const signedPdf = Buffer.concat([
+    pdfWithPlaceholder.subarray(0, byteRange[1]),
+    Buffer.from(`<${signatureAsHex.padEnd(signatureLength - 2, '0')}>`),
+    pdfWithPlaceholder.subarray(byteRange[2]),
+  ]);
+
+  return signedPdf;
+};

packages/signing/transports/local-cert.ts

@@ -1,32 +1,51 @@
-import signer from 'node-signpdf';
 import fs from 'node:fs';
 
-import { addSigningPlaceholder } from '../helpers/addSigningPlaceholder';
+import { signWithP12 } from '@documenso/pdf-sign';
+
+import { addSigningPlaceholder } from '../helpers/add-signing-placeholder';
+import { updateSigningPlaceholder } from '../helpers/update-signing-placeholder';
 
 export type SignWithLocalCertOptions = {
   pdf: Buffer;
 };
 
 export const signWithLocalCert = async ({ pdf }: SignWithLocalCertOptions) => {
-  const pdfWithPlaceholder = await addSigningPlaceholder({ pdf });
+  const { pdf: pdfWithPlaceholder, byteRange } = updateSigningPlaceholder({
+    pdf: await addSigningPlaceholder({ pdf }),
+  });
 
-  let p12Cert: Buffer | null = null;
+  const pdfWithoutSignature = Buffer.concat([
+    pdfWithPlaceholder.subarray(0, byteRange[1]),
+    pdfWithPlaceholder.subarray(byteRange[2]),
+  ]);
+
+  const signatureLength = byteRange[2] - byteRange[1];
+
+  let cert: Buffer | null = null;
 
   if (process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS) {
-    p12Cert = Buffer.from(process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS, 'base64');
+    cert = Buffer.from(process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS, 'base64');
   }
 
-  if (!p12Cert) {
-    p12Cert = Buffer.from(
+  if (!cert) {
+    cert = Buffer.from(
       fs.readFileSync(process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || './example/cert.p12'),
     );
   }
 
-  if (process.env.NEXT_PRIVATE_SIGNING_PASSPHRASE) {
-    return signer.sign(pdfWithPlaceholder, p12Cert, {
-      passphrase: process.env.NEXT_PRIVATE_SIGNING_PASSPHRASE,
-    });
-  }
+  const signature = signWithP12({
+    cert,
+    content: pdfWithoutSignature,
+    password: process.env.NEXT_PRIVATE_SIGNING_PASSPHRASE || undefined,
+  });
 
-  return signer.sign(pdfWithPlaceholder, p12Cert);
+  const signatureAsHex = signature.toString('hex');
+
+  const signedPdf = Buffer.concat([
+    pdfWithPlaceholder.subarray(0, byteRange[1]),
+    Buffer.from(`<${signatureAsHex.padEnd(signatureLength - 2, '0')}>`),
+    pdfWithPlaceholder.subarray(byteRange[2]),
+  ]);
+
+  return signedPdf;
 };

packages/tsconfig/process-env.d.ts

@@ -30,6 +30,10 @@ declare namespace NodeJS {
     NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH?: string;
     NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS?: string;
     NEXT_PRIVATE_SIGNING_LOCAL_FILE_ENCODING?: string;
+    NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH?: string;
+    NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH?: string;
+    NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS?: string;
+    NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS?: string;
 
     NEXT_PRIVATE_SMTP_TRANSPORT?: 'mailchannels' | 'resend' | 'smtp-auth' | 'smtp-api';
 

packages/ui/primitives/document-flow/add-signers.tsx

@@ -151,9 +151,10 @@ export const AddSignersFormPartial = ({
 
           <AnimatePresence>
             {signers.map((signer, index) => (
-              <motion.div
+              <motion.fieldset
                 key={signer.id}
                 data-native-id={signer.nativeId}
+                disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
                 className="flex flex-wrap items-end gap-x-4"
               >
                 <div className="flex-1">
@@ -202,7 +203,11 @@ export const AddSignersFormPartial = ({
                     control={control}
                     name={`signers.${index}.role`}
                     render={({ field: { value, onChange } }) => (
-                      <Select value={value} onValueChange={(x) => onChange(x)}>
+                      <Select
+                        value={value}
+                        onValueChange={(x) => onChange(x)}
+                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
+                      >
                         <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
 
                         <SelectContent className="" align="end">
@@ -258,7 +263,7 @@ export const AddSignersFormPartial = ({
                   <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.email} />
                   <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.name} />
                 </div>
-              </motion.div>
+              </motion.fieldset>
             ))}
           </AnimatePresence>
         </div>

packages/ui/primitives/theme-switcher.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { motion } from 'framer-motion';
 import { Monitor, MoonStar, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';

turbo.json

@@ -48,6 +48,14 @@
     "NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT",
     "NEXT_PRIVATE_DATABASE_URL",
     "NEXT_PRIVATE_DIRECT_DATABASE_URL",
+    "NEXT_PRIVATE_SIGNING_TRANSPORT",
+    "NEXT_PRIVATE_SIGNING_PASSPHRASE",
+    "NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH",
+    "NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS",
+    "NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH",
+    "NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH",
+    "NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS",
+    "NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS",
     "NEXT_PRIVATE_GOOGLE_CLIENT_ID",
     "NEXT_PRIVATE_GOOGLE_CLIENT_SECRET",
     "NEXT_PUBLIC_UPLOAD_TRANSPORT",
@@ -93,6 +101,7 @@
     "DATABASE_URL_UNPOOLED",
     "POSTGRES_PRISMA_URL",
     "POSTGRES_URL_NON_POOLING",
+    "GOOGLE_APPLICATION_CREDENTIALS",
     "E2E_TEST_AUTHENTICATE_USERNAME",
     "E2E_TEST_AUTHENTICATE_USER_EMAIL",
     "E2E_TEST_AUTHENTICATE_USER_PASSWORD"