fix: polish

.devcontainer/on-create.sh

@@ -1,10 +1,13 @@
 #!/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 dev setup
-npm run dx
+# Run the migrations
+npm run prisma:migrate-dev

.env.example

@@ -22,32 +22,26 @@ 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
+# OPTIONAL: Defines the signing transport to use. Available options: local (default)
 NEXT_PRIVATE_SIGNING_TRANSPORT="local"
-# OPTIONAL: The passphrase to use for the local file-based signing transport.
+# OPTIONAL: Defines the passphrase for the signing certificate.
 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.
+# OPTIONAL: Defines the file contents for the signing certificate as a base64 encoded string.
 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=
+# OPTIONAL: Defines the file path for the signing certificate. defaults to ./example/cert.p12
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=
 
 # [[STORAGE]]
 # OPTIONAL: Defines the storage transport to use. Available options: database (default) | s3
 NEXT_PUBLIC_UPLOAD_TRANSPORT="database"
 # OPTIONAL: Defines the endpoint to use for the S3 storage transport. Relevant when using third-party S3-compatible providers.
 NEXT_PRIVATE_UPLOAD_ENDPOINT="http://127.0.0.1:9002"
-# OPTIONAL: Defines the force path style to use for the S3 storage transport. Relevant when using third-party S3-compatible providers.
-# This will change it from using virtual hosts <bucket>.domain.com/<path> to fully qualified paths domain.com/<bucket>/<path>
-NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE="false"
 # OPTIONAL: Defines the region to use for the S3 storage transport. Defaults to us-east-1.
 NEXT_PRIVATE_UPLOAD_REGION="unknown"
 # REQUIRED: Defines the bucket to use for the S3 storage transport.
@@ -97,7 +91,6 @@ NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT=5
 NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
-NEXT_PUBLIC_STRIPE_ENTERPRISE_PLAN_MONTHLY_PRICE_ID=
 
 # [[FEATURES]]
 # OPTIONAL: Leave blank to disable PostHog and feature flags.
@@ -107,11 +100,6 @@ 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,9 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",

apps/marketing/next.config.js

@@ -2,7 +2,6 @@
 const fs = require('fs');
 const path = require('path');
 const { withContentlayer } = require('next-contentlayer');
-const { withAxiom } = require('next-axiom');
 
 const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
 
@@ -22,7 +21,7 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
 const config = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt'],
     serverActions: {
       bodySizeLimit: '50mb',
     },
@@ -96,4 +95,4 @@ const config = {
   },
 };
 
-module.exports = withAxiom(withContentlayer(config));
+module.exports = withContentlayer(config);

apps/marketing/package.json

@@ -19,7 +19,6 @@
     "@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",
@@ -27,7 +26,6 @@
     "micro": "^10.0.1",
     "next": "14.0.3",
     "next-auth": "4.24.5",
-    "next-axiom": "^1.1.1",
     "next-contentlayer": "^0.3.4",
     "next-plausible": "^3.10.1",
     "perfect-freehand": "^1.2.0",

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

@@ -38,8 +38,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   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', '/pricing'].includes(pathname),
+        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
       })}
     >
       <div

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

@@ -1,10 +1,11 @@
 'use client';
 
-import type { HTMLAttributes } from 'react';
+import { 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;
@@ -33,13 +34,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
     .reverse();
 
   return (
-    <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={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="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,6 +5,8 @@ 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'];
@@ -47,12 +49,10 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
     setIsSSR(false);
   }, []);
   return (
-    <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={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
 
+      <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,10 +1,11 @@
 'use client';
 
-import type { HTMLAttributes } from 'react';
+import { 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>[];
@@ -17,12 +18,10 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
   }));
 
   return (
-    <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={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
 
+      <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

@@ -1,56 +0,0 @@
-'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, 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,6 +4,7 @@ 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;
@@ -19,12 +20,12 @@ export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartPr
   });
 
   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">New Users</h3>
-        </div>
+    <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="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,6 +4,7 @@ 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;
@@ -19,12 +20,12 @@ export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersCha
   });
 
   return (
-    <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={cn('flex flex-col', className)}>
+      <div className="flex items-center 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,23 +2,20 @@ 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 = {
@@ -134,18 +131,16 @@ 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">
@@ -166,7 +161,7 @@ export default async function OpenPage() {
           </p>
         </div>
 
-        <div className="my-12 grid grid-cols-12 gap-8">
+        <div className="mt-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"
@@ -193,57 +188,11 @@ 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"
@@ -253,29 +202,57 @@ 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" />
 
-          <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"
-          />
+          <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>
         </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 type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import {

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

@@ -1,56 +0,0 @@
-'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,19 +6,18 @@ 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={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={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Twitter Stats</h3>
 
-        <div className="my-12 flex flex-col items-center gap-y-4 text-center">
+      <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">
           <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

@@ -247,7 +247,6 @@ export const SinglePlayerClient = () => {
                   recipients={uploadedFile ? [placeholderRecipient] : []}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
-                  isDocumentPdfLoaded={true}
                 />
               </fieldset>
 

apps/marketing/src/app/layout.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
-import { AxiomWebVitals } from 'next-axiom';
 import { PublicEnvScript } from 'next-runtime-env';
 
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
@@ -68,8 +67,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <PublicEnvScript />
       </head>
 
-      <AxiomWebVitals />
-
       <Suspense>
         <PostHogPageview />
       </Suspense>

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

@@ -13,8 +13,6 @@ import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
-import { StatusWidgetContainer } from './status-widget-container';
-
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
 const SOCIAL_LINKS = [
@@ -64,10 +62,6 @@ export const Footer = ({ className, ...props }: FooterProps) => {
               </Link>
             ))}
           </div>
-
-          <div className="mt-6">
-            <StatusWidgetContainer />
-          </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)/pricing-table.tsx

@@ -23,7 +23,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
   return (
     <div className={cn('', className)} {...props}>
-      <div className="bg-background sticky top-32 flex items-center justify-end gap-x-6 shadow-[-1px_-5px_2px_6px_hsl(var(--background))] md:top-[7.5rem] lg:static lg:justify-center">
+      <div className="flex items-center justify-center gap-x-6">
         <AnimatePresence>
           <motion.button
             key="MONTHLY"
@@ -40,7 +40,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'MONTHLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>
@@ -63,7 +63,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'YEARLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
@@ -51,7 +51,7 @@ export const ShareConnectPaidWidgetBento = ({
         <Card className="col-span-2 lg:col-span-1" spotlight>
           <CardContent className="grid grid-cols-1 gap-8 p-6">
             <p className="text-foreground/80 leading-relaxed">
-              <strong className="block">Connections</strong>
+              <strong className="block">Connections (Soon).</strong>
               Create connections and automations with Zapier and more to integrate with your
               favorite tools.
             </p>

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

@@ -1,21 +0,0 @@
-// https://github.com/documenso/documenso/pull/1044/files#r1538258462
-import { Suspense } from 'react';
-
-import { StatusWidget } from './status-widget';
-
-export function StatusWidgetContainer() {
-  return (
-    <Suspense fallback={<StatusWidgetFallback />}>
-      <StatusWidget />
-    </Suspense>
-  );
-}
-
-function StatusWidgetFallback() {
-  return (
-    <div className="border-border inline-flex max-w-fit  items-center justify-between space-x-2 rounded-md border border-gray-200 px-2 py-2 pr-3 text-sm">
-      <span className="bg-muted h-2 w-36 animate-pulse rounded-md" />
-      <span className="bg-muted relative inline-flex h-2 w-2 rounded-full" />
-    </div>
-  );
-}

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

@@ -1,75 +0,0 @@
-import { use, useMemo } from 'react';
-
-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 function StatusWidget() {
-  const getStatusMemoized = useMemo(async () => getStatus('documenso-status'), []);
-  const { status } = use(getStatusMemoized);
-  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

@@ -2,7 +2,6 @@
 const fs = require('fs');
 const path = require('path');
 const { version } = require('./package.json');
-const { withAxiom } = require('next-axiom');
 
 const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
 
@@ -23,7 +22,7 @@ const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt'],
     serverActions: {
       bodySizeLimit: '50mb',
     },
@@ -92,4 +91,4 @@ const config = {
   },
 };
 
-module.exports = withAxiom(config);
+module.exports = config;

apps/web/package.json

@@ -25,7 +25,6 @@
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
     "@tanstack/react-query": "^4.29.5",
-    "cookie-es": "^1.0.0",
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
@@ -33,10 +32,8 @@
     "micro": "^10.0.1",
     "next": "14.0.3",
     "next-auth": "4.24.5",
-    "next-axiom": "^1.1.1",
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
-    "papaparse": "^5.4.1",
     "perfect-freehand": "^1.2.0",
     "posthog-js": "^1.75.3",
     "posthog-node": "^3.1.1",
@@ -60,7 +57,6 @@
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",
-    "@types/papaparse": "^5.3.14",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@types/ua-parser-js": "^0.7.39",
@@ -74,4 +70,4 @@
       "next": "$next"
     }
   }
-}
+}

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

@@ -14,7 +14,6 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 
 import { AdminActions } from './admin-actions';
 import { RecipientItem } from './recipient-item';
-import { SuperDeleteDocumentDialog } from './super-delete-document-dialog';
 
 type AdminDocumentDetailsPageProps = {
   params: {
@@ -82,10 +81,6 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
           ))}
         </Accordion>
       </div>
-
-      <hr className="my-4" />
-
-      {document && <SuperDeleteDocumentDialog document={document} />}
     </div>
   );
 }

apps/web/src/app/(dashboard)/admin/documents/[id]/super-delete-document-dialog.tsx

@@ -1,130 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import type { Document } from '@documenso/prisma/client';
-import { TRPCClientError } from '@documenso/trpc/client';
-import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type SuperDeleteDocumentDialogProps = {
-  document: Document;
-};
-
-export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialogProps) => {
-  const { toast } = useToast();
-  const router = useRouter();
-
-  const [reason, setReason] = useState('');
-
-  const { mutateAsync: deleteDocument, isLoading: isDeletingDocument } =
-    trpc.admin.deleteDocument.useMutation();
-
-  const handleDeleteDocument = async () => {
-    try {
-      if (!reason) {
-        return;
-      }
-
-      await deleteDocument({ id: document.id, reason });
-
-      toast({
-        title: 'Document deleted',
-        description: 'The Document has been deleted successfully.',
-        duration: 5000,
-      });
-
-      router.push('/admin/documents');
-    } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: 'An error occurred',
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: 'An unknown error occurred',
-          variant: 'destructive',
-          description:
-            err.message ??
-            'We encountered an unknown error while attempting to delete your document. Please try again later.',
-        });
-      }
-    }
-  };
-
-  return (
-    <div>
-      <div>
-        <Alert
-          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row "
-          variant="neutral"
-        >
-          <div>
-            <AlertTitle>Delete Document</AlertTitle>
-            <AlertDescription className="mr-2">
-              Delete the document. This action is irreversible so proceed with caution.
-            </AlertDescription>
-          </div>
-
-          <div className="flex-shrink-0">
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="destructive">Delete Document</Button>
-              </DialogTrigger>
-
-              <DialogContent>
-                <DialogHeader className="space-y-4">
-                  <DialogTitle>Delete Document</DialogTitle>
-
-                  <Alert variant="destructive">
-                    <AlertDescription className="selection:bg-red-100">
-                      This action is not reversible. Please be certain.
-                    </AlertDescription>
-                  </Alert>
-                </DialogHeader>
-
-                <div>
-                  <DialogDescription>To confirm, please enter the reason</DialogDescription>
-
-                  <Input
-                    className="mt-2"
-                    type="text"
-                    value={reason}
-                    onChange={(e) => setReason(e.target.value)}
-                  />
-                </div>
-
-                <DialogFooter>
-                  <Button
-                    onClick={handleDeleteDocument}
-                    loading={isDeletingDocument}
-                    variant="destructive"
-                    disabled={!reason}
-                  >
-                    {isDeletingDocument ? 'Deleting document...' : 'Delete Document'}
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          </div>
-        </Alert>
-      </div>
-    </div>
-  );
-};

apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx

@@ -58,7 +58,6 @@ export const UsersDataTable = ({
         perPage,
       });
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedSearchString]);
 
   const onPaginationChange = (page: number, perPage: number) => {

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -1,14 +1,17 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import {
-  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-  SKIP_QUERY_BATCH_META,
-} from '@documenso/lib/constants/trpc';
-import type { DocumentWithDetails } from '@documenso/prisma/types/document';
+  type DocumentData,
+  type DocumentMeta,
+  type Field,
+  type Recipient,
+  type User,
+} from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -30,9 +33,13 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type EditDocumentFormProps = {
   className?: string;
-  initialDocument: DocumentWithDetails;
+  user: User;
+  document: DocumentWithData;
+  recipients: Recipient[];
+  documentMeta: DocumentMeta | null;
+  fields: Field[];
+  documentData: DocumentData;
   documentRootPath: string;
-  isDocumentEnterprise: boolean;
 };
 
 type EditDocumentStep = 'settings' | 'signers' | 'fields' | 'subject';
@@ -40,9 +47,13 @@ const EditDocumentSteps: EditDocumentStep[] = ['settings', 'signers', 'fields',
 
 export const EditDocumentForm = ({
   className,
-  initialDocument,
+  document,
+  recipients,
+  fields,
+  documentMeta,
+  user: _user,
+  documentData,
   documentRootPath,
-  isDocumentEnterprise,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
 
@@ -50,76 +61,11 @@ export const EditDocumentForm = ({
   const searchParams = useSearchParams();
   const team = useOptionalCurrentTeam();
 
-  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
-
-  const utils = trpc.useUtils();
-
-  const { data: document, refetch: refetchDocument } =
-    trpc.document.getDocumentWithDetailsById.useQuery(
-      {
-        id: initialDocument.id,
-        teamId: team?.id,
-      },
-      {
-        initialData: initialDocument,
-        ...SKIP_QUERY_BATCH_META,
-      },
-    );
-
-  const { Recipient: recipients, Field: fields } = document;
-
-  const { mutateAsync: setSettingsForDocument } = trpc.document.setSettingsForDocument.useMutation({
-    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newData) => {
-      utils.document.getDocumentWithDetailsById.setData(
-        {
-          id: initialDocument.id,
-          teamId: team?.id,
-        },
-        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
-      );
-    },
-  });
-
-  const { mutateAsync: addFields } = trpc.field.addFields.useMutation({
-    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newFields) => {
-      utils.document.getDocumentWithDetailsById.setData(
-        {
-          id: initialDocument.id,
-          teamId: team?.id,
-        },
-        (oldData) => ({ ...(oldData || initialDocument), Field: newFields }),
-      );
-    },
-  });
-
-  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation({
-    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newRecipients) => {
-      utils.document.getDocumentWithDetailsById.setData(
-        {
-          id: initialDocument.id,
-          teamId: team?.id,
-        },
-        (oldData) => ({ ...(oldData || initialDocument), Recipient: newRecipients }),
-      );
-    },
-  });
-
-  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation({
-    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newData) => {
-      utils.document.getDocumentWithDetailsById.setData(
-        {
-          id: initialDocument.id,
-          teamId: team?.id,
-        },
-        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
-      );
-    },
-  });
-
+  const { mutateAsync: setSettingsForDocument } =
+    trpc.document.setSettingsForDocument.useMutation();
+  const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
+  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
+  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
   const { mutateAsync: setPasswordForDocument } =
     trpc.document.setPasswordForDocument.useMutation();
 
@@ -182,7 +128,6 @@ export const EditDocumentForm = ({
         },
       });
 
-      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
 
       setStep('signers');
@@ -191,7 +136,7 @@ export const EditDocumentForm = ({
 
       toast({
         title: 'Error',
-        description: 'An error occurred while updating the document settings.',
+        description: 'An error occurred while updating the general settings.',
         variant: 'destructive',
       });
     }
@@ -199,6 +144,7 @@ export const EditDocumentForm = ({
 
   const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
     try {
+      // Custom invocation server action
       await addSigners({
         documentId: document.id,
         teamId: team?.id,
@@ -209,9 +155,7 @@ export const EditDocumentForm = ({
         })),
       });
 
-      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
-
       setStep('fields');
     } catch (err) {
       console.error(err);
@@ -226,14 +170,13 @@ export const EditDocumentForm = ({
 
   const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
     try {
+      // Custom invocation server action
       await addFields({
         documentId: document.id,
         fields: data.fields,
       });
 
-      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
-
       setStep('subject');
     } catch (err) {
       console.error(err);
@@ -286,15 +229,6 @@ export const EditDocumentForm = ({
 
   const currentDocumentFlow = documentFlow[step];
 
-  /**
-   * Refresh the data in the background when steps change.
-   */
-  useEffect(() => {
-    void refetchDocument();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [step]);
-
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
@@ -303,12 +237,11 @@ export const EditDocumentForm = ({
       >
         <CardContent className="p-2">
           <LazyPDFViewer
-            key={document.documentData.id}
-            documentData={document.documentData}
+            key={documentData.id}
+            documentData={documentData}
             document={document}
-            password={document.documentMeta?.password}
+            password={documentMeta?.password}
             onPasswordSubmit={onPasswordSubmit}
-            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>
       </Card>
@@ -328,18 +261,15 @@ export const EditDocumentForm = ({
               document={document}
               recipients={recipients}
               fields={fields}
-              isDocumentEnterprise={isDocumentEnterprise}
-              isDocumentPdfLoaded={isDocumentPdfLoaded}
               onSubmit={onAddSettingsFormSubmit}
             />
+
             <AddSignersFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
-              isDocumentEnterprise={isDocumentEnterprise}
               onSubmit={onAddSignersFormSubmit}
-              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddFieldsFormPartial
@@ -348,7 +278,6 @@ export const EditDocumentForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
-              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddSubjectFormPartial
@@ -358,7 +287,6 @@ export const EditDocumentForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSubjectFormSubmit}
-              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
           </Stepper>
         </DocumentFlowFormContainer>

apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx

@@ -3,10 +3,11 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft, Users2 } from 'lucide-react';
 
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
+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 { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';
@@ -36,18 +37,13 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
 
   const { user } = await getRequiredServerComponentSession();
 
-  const isDocumentEnterprise = await isUserEnterprise({
-    userId: user.id,
-    teamId: team?.id,
-  });
-
-  const document = await getDocumentWithDetailsById({
+  const document = await getDocumentById({
     id: documentId,
     userId: user.id,
     teamId: team?.id,
   }).catch(() => null);
 
-  if (!document) {
+  if (!document || !document.documentData) {
     redirect(documentRootPath);
   }
 
@@ -55,7 +51,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     redirect(`${documentRootPath}/${documentId}`);
   }
 
-  const { documentMeta, Recipient: recipients } = document;
+  const { documentData, documentMeta } = document;
 
   if (documentMeta?.password) {
     const key = DOCUMENSO_ENCRYPTION_KEY;
@@ -74,6 +70,18 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     documentMeta.password = securePassword;
   }
 
+  const [recipients, fields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      userId: user.id,
+      teamId: team?.id,
+    }),
+    getFieldsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+  ]);
+
   return (
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
@@ -101,9 +109,13 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
 
       <EditDocumentForm
         className="mt-8"
-        initialDocument={document}
+        document={document}
+        user={user}
+        documentMeta={documentMeta}
+        recipients={recipients}
+        fields={fields}
+        documentData={documentData}
         documentRootPath={documentRootPath}
-        isDocumentEnterprise={isDocumentEnterprise}
       />
     </div>
   );

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

@@ -1,15 +1,15 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 
+import { IDENTITY_PROVIDER_NAME } from '@documenso/lib/constants/auth';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { DisableAuthenticatorAppDialog } from '~/components/forms/2fa/disable-authenticator-app-dialog';
-import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
-import { ViewRecoveryCodesDialog } from '~/components/forms/2fa/view-recovery-codes-dialog';
+import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
+import { RecoveryCodes } from '~/components/forms/2fa/recovery-codes';
 import { PasswordForm } from '~/components/forms/password';
 
 export const metadata: Metadata = {
@@ -28,70 +28,76 @@ export default async function SecuritySettingsPage() {
         subtitle="Here you can manage your password and security settings."
       />
 
-      {user.identityProvider === 'DOCUMENSO' && (
-        <>
+      {user.identityProvider === 'DOCUMENSO' ? (
+        <div>
           <PasswordForm user={user} />
 
           <hr className="border-border/50 mt-6" />
-        </>
-      )}
 
-      <Alert
-        className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-        variant="neutral"
-      >
-        <div className="mb-4 sm:mb-0">
-          <AlertTitle>Two factor authentication</AlertTitle>
+          <Alert
+            className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+            variant="neutral"
+          >
+            <div className="mb-4 sm:mb-0">
+              <AlertTitle>Two factor authentication</AlertTitle>
 
-          <AlertDescription className="mr-4">
-            Add an authenticator to serve as a secondary authentication method{' '}
-            {user.identityProvider === 'DOCUMENSO'
-              ? 'when signing in, or when signing documents.'
-              : 'for signing documents.'}
-          </AlertDescription>
+              <AlertDescription className="mr-4">
+                Create one-time passwords that serve as a secondary authentication method for
+                confirming your identity when requested during the sign-in process.
+              </AlertDescription>
+            </div>
+
+            <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
+          </Alert>
+
+          {isPasskeyEnabled && (
+            <Alert
+              className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+              variant="neutral"
+            >
+              <div className="mb-4 sm:mb-0">
+                <AlertTitle>Passkeys</AlertTitle>
+
+                <AlertDescription className="mr-4">
+                  Allows authenticating using biometrics, password managers, hardware keys, etc.
+                </AlertDescription>
+              </div>
+
+              <Button asChild variant="outline" className="bg-background">
+                <Link href="/settings/security/passkeys">Manage passkeys</Link>
+              </Button>
+            </Alert>
+          )}
+
+          {user.twoFactorEnabled && (
+            <Alert
+              className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+              variant="neutral"
+            >
+              <div className="mb-4 sm:mb-0">
+                <AlertTitle>Recovery codes</AlertTitle>
+
+                <AlertDescription className="mr-4">
+                  Two factor authentication recovery codes are used to access your account in the
+                  event that you lose access to your authenticator app.
+                </AlertDescription>
+              </div>
+
+              <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
+            </Alert>
+          )}
         </div>
+      ) : (
+        <Alert className="p-6" variant="neutral">
+          <AlertTitle>
+            Your account is managed by {IDENTITY_PROVIDER_NAME[user.identityProvider]}
+          </AlertTitle>
 
-        {user.twoFactorEnabled ? (
-          <DisableAuthenticatorAppDialog />
-        ) : (
-          <EnableAuthenticatorAppDialog />
-        )}
-      </Alert>
-
-      {user.twoFactorEnabled && (
-        <Alert
-          className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-          variant="neutral"
-        >
-          <div className="mb-4 sm:mb-0">
-            <AlertTitle>Recovery codes</AlertTitle>
-
-            <AlertDescription className="mr-4">
-              Two factor authentication recovery codes are used to access your account in the event
-              that you lose access to your authenticator app.
-            </AlertDescription>
-          </div>
-
-          <ViewRecoveryCodesDialog />
-        </Alert>
-      )}
-
-      {isPasskeyEnabled && (
-        <Alert
-          className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-          variant="neutral"
-        >
-          <div className="mb-4 sm:mb-0">
-            <AlertTitle>Passkeys</AlertTitle>
-
-            <AlertDescription className="mr-4">
-              Allows authenticating using biometrics, password managers, hardware keys, etc.
-            </AlertDescription>
-          </div>
-
-          <Button asChild variant="outline" className="bg-background">
-            <Link href="/settings/security/passkeys">Manage passkeys</Link>
-          </Button>
+          <AlertDescription>
+            To update your password, enable two-factor authentication, and manage other security
+            settings, please go to your {IDENTITY_PROVIDER_NAME[user.identityProvider]} account
+            settings.
+          </AlertDescription>
         </Alert>
       )}
 

apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx

@@ -172,27 +172,29 @@ export const UserPasskeysDataTableActions = ({
             </DialogDescription>
           </DialogHeader>
 
-          <fieldset disabled={isDeletingPasskey}>
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button type="button" variant="secondary">
-                  Cancel
-                </Button>
-              </DialogClose>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
 
-              <Button
-                onClick={async () =>
-                  deletePasskey({
-                    passkeyId,
-                  })
-                }
-                variant="destructive"
-                loading={isDeletingPasskey}
-              >
-                Delete
-              </Button>
-            </DialogFooter>
-          </fieldset>
+              void deletePasskey({
+                passkeyId,
+              });
+            }}
+          >
+            <fieldset className="flex h-full flex-col space-y-4" disabled={isDeletingPasskey}>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Cancel
+                  </Button>
+                </DialogClose>
+
+                <Button type="submit" variant="destructive" loading={isDeletingPasskey}>
+                  Delete
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
         </DialogContent>
       </Dialog>
     </div>

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -11,7 +11,6 @@ import {
   convertToLocalSystemFormat,
 } from '@documenso/lib/constants/date-formats';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
@@ -41,12 +40,12 @@ export const DateField = ({
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+    trpc.field.signFieldWithToken.useMutation();
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 

apps/web/src/app/(signing)/sign/[token]/document-action-auth-2fa.tsx

@@ -1,172 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { AppError } from '@documenso/lib/errors/app-error';
-import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { RecipientRole } from '@documenso/prisma/client';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-import { DialogFooter } from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-
-import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
-
-import { useRequiredDocumentAuthContext } from './document-auth-provider';
-
-export type DocumentActionAuth2FAProps = {
-  actionTarget?: 'FIELD' | 'DOCUMENT';
-  actionVerb?: string;
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
-  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
-};
-
-const Z2FAAuthFormSchema = z.object({
-  token: z
-    .string()
-    .min(4, { message: 'Token must at least 4 characters long' })
-    .max(10, { message: 'Token must be at most 10 characters long' }),
-});
-
-type T2FAAuthFormSchema = z.infer<typeof Z2FAAuthFormSchema>;
-
-export const DocumentActionAuth2FA = ({
-  actionTarget = 'FIELD',
-  actionVerb = 'sign',
-  onReauthFormSubmit,
-  open,
-  onOpenChange,
-}: DocumentActionAuth2FAProps) => {
-  const { recipient, user, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
-    useRequiredDocumentAuthContext();
-
-  const form = useForm<T2FAAuthFormSchema>({
-    resolver: zodResolver(Z2FAAuthFormSchema),
-    defaultValues: {
-      token: '',
-    },
-  });
-
-  const [is2FASetupSuccessful, setIs2FASetupSuccessful] = useState(false);
-  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
-
-  const onFormSubmit = async ({ token }: T2FAAuthFormSchema) => {
-    try {
-      setIsCurrentlyAuthenticating(true);
-
-      await onReauthFormSubmit({
-        type: DocumentAuth.TWO_FACTOR_AUTH,
-        token,
-      });
-
-      setIsCurrentlyAuthenticating(false);
-
-      onOpenChange(false);
-    } catch (err) {
-      setIsCurrentlyAuthenticating(false);
-
-      const error = AppError.parseError(err);
-      setFormErrorCode(error.code);
-
-      // Todo: Alert.
-    }
-  };
-
-  useEffect(() => {
-    form.reset({
-      token: '',
-    });
-
-    setIs2FASetupSuccessful(false);
-    setFormErrorCode(null);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-
-  if (!user?.twoFactorEnabled && !is2FASetupSuccessful) {
-    return (
-      <div className="space-y-4">
-        <Alert variant="warning">
-          <AlertDescription>
-            <p>
-              {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT'
-                ? 'You need to setup 2FA to mark this document as viewed.'
-                : `You need to setup 2FA to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`}
-            </p>
-
-            {user?.identityProvider === 'DOCUMENSO' && (
-              <p className="mt-2">
-                By enabling 2FA, you will be required to enter a code from your authenticator app
-                every time you sign in.
-              </p>
-            )}
-          </AlertDescription>
-        </Alert>
-
-        <DialogFooter>
-          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            Close
-          </Button>
-
-          <EnableAuthenticatorAppDialog onSuccess={() => setIs2FASetupSuccessful(true)} />
-        </DialogFooter>
-      </div>
-    );
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
-        <fieldset disabled={isCurrentlyAuthenticating}>
-          <div className="space-y-4">
-            <FormField
-              control={form.control}
-              name="token"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>2FA token</FormLabel>
-
-                  <FormControl>
-                    <Input {...field} placeholder="Token" />
-                  </FormControl>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {formErrorCode && (
-              <Alert variant="destructive">
-                <AlertTitle>Unauthorized</AlertTitle>
-                <AlertDescription>
-                  We were unable to verify your details. Please try again or contact support
-                </AlertDescription>
-              </Alert>
-            )}
-
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                Cancel
-              </Button>
-
-              <Button type="submit" loading={isCurrentlyAuthenticating}>
-                Sign
-              </Button>
-            </DialogFooter>
-          </div>
-        </fieldset>
-      </form>
-    </Form>
-  );
-};

apps/web/src/app/(signing)/sign/[token]/document-action-auth-account.tsx

@@ -49,7 +49,7 @@ export const DocumentActionAuthAccount = ({
 
   return (
     <fieldset disabled={isSigningOut} className="space-y-4">
-      <Alert variant="warning">
+      <Alert>
         <AlertDescription>
           {actionTarget === 'DOCUMENT' && recipient.role === RecipientRole.VIEWER ? (
             <span>
@@ -70,7 +70,11 @@ export const DocumentActionAuthAccount = ({
           Cancel
         </Button>
 
-        <Button onClick={async () => handleChangeAccount(recipient.email)} loading={isSigningOut}>
+        <Button
+          type="submit"
+          onClick={async () => handleChangeAccount(recipient.email)}
+          loading={isSigningOut}
+        >
           Login
         </Button>
       </DialogFooter>

apps/web/src/app/(signing)/sign/[token]/document-action-auth-dialog.tsx

@@ -1,11 +1,13 @@
+import { useMemo } from 'react';
+
 import { P, match } from 'ts-pattern';
 
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import {
   DocumentAuth,
   type TRecipientActionAuth,
   type TRecipientActionAuthTypes,
 } from '@documenso/lib/types/document-auth';
-import type { FieldType } from '@documenso/prisma/client';
 import {
   Dialog,
   DialogContent,
@@ -14,7 +16,6 @@ import {
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
 
-import { DocumentActionAuth2FA } from './document-action-auth-2fa';
 import { DocumentActionAuthAccount } from './document-action-auth-account';
 import { DocumentActionAuthPasskey } from './document-action-auth-passkey';
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
@@ -23,7 +24,7 @@ export type DocumentActionAuthDialogProps = {
   title?: string;
   documentAuthType: TRecipientActionAuthTypes;
   description?: string;
-  actionTarget: FieldType | 'DOCUMENT';
+  actionTarget?: 'FIELD' | 'DOCUMENT';
   open: boolean;
   onOpenChange: (value: boolean) => void;
 
@@ -37,6 +38,7 @@ export const DocumentActionAuthDialog = ({
   title,
   description,
   documentAuthType,
+  actionTarget = 'FIELD',
   open,
   onOpenChange,
   onReauthFormSubmit,
@@ -51,32 +53,50 @@ export const DocumentActionAuthDialog = ({
     onOpenChange(value);
   };
 
+  const actionVerb =
+    actionTarget === 'DOCUMENT' ? RECIPIENT_ROLES_DESCRIPTION[recipient.role].actionVerb : 'Sign';
+
+  const defaultTitleDescription = useMemo(() => {
+    if (recipient.role === 'VIEWER' && actionTarget === 'DOCUMENT') {
+      return {
+        title: 'Mark document as viewed',
+        description: 'Reauthentication is required to mark this document as viewed.',
+      };
+    }
+
+    return {
+      title: `${actionVerb} ${actionTarget.toLowerCase()}`,
+      description: `Reauthentication is required to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}`,
+    };
+  }, [recipient.role, actionVerb, actionTarget]);
+
   return (
     <Dialog open={open} onOpenChange={handleOnOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{title || 'Sign field'}</DialogTitle>
+          <DialogTitle>{title || defaultTitleDescription.title}</DialogTitle>
 
           <DialogDescription>
-            {description || 'Reauthentication is required to sign this field'}
+            {description || defaultTitleDescription.description}
           </DialogDescription>
         </DialogHeader>
 
         {match({ documentAuthType, user })
           .with(
             { documentAuthType: DocumentAuth.ACCOUNT },
-            { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
-            () => <DocumentActionAuthAccount onOpenChange={onOpenChange} />,
+            { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auths requires them to be logged in.
+            () => (
+              <DocumentActionAuthAccount
+                actionVerb={actionVerb}
+                actionTarget={actionTarget}
+                onOpenChange={onOpenChange}
+              />
+            ),
           )
           .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (
             <DocumentActionAuthPasskey
-              open={open}
-              onOpenChange={onOpenChange}
-              onReauthFormSubmit={onReauthFormSubmit}
-            />
-          ))
-          .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
-            <DocumentActionAuth2FA
+              actionTarget={actionTarget}
+              actionVerb={actionVerb}
               open={open}
               onOpenChange={onOpenChange}
               onReauthFormSubmit={onReauthFormSubmit}

apps/web/src/app/(signing)/sign/[token]/document-action-auth-passkey.tsx

@@ -137,7 +137,10 @@ export const DocumentActionAuthPasskey = ({
     );
   }
 
-  if (passkeyData.isInitialLoading || (passkeyData.isError && passkeyData.passkeys.length === 0)) {
+  if (
+    passkeyData.isInitialLoading ||
+    (passkeyData.isRefetching && passkeyData.passkeys.length === 0)
+  ) {
     return (
       <div className="flex h-28 items-center justify-center">
         <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
@@ -168,7 +171,7 @@ export const DocumentActionAuthPasskey = ({
   if (passkeyData.passkeys.length === 0) {
     return (
       <div className="space-y-4">
-        <Alert variant="warning">
+        <Alert>
           <AlertDescription>
             {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT'
               ? 'You need to setup a passkey to mark this document as viewed.'

apps/web/src/app/(signing)/sign/[token]/document-auth-provider.tsx

@@ -5,6 +5,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { match } from 'ts-pattern';
 
 import { MAXIMUM_PASSKEYS } from '@documenso/lib/constants/auth';
+import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
 import type {
   TDocumentAuthOptions,
   TRecipientAccessAuthTypes,
@@ -13,13 +14,7 @@ import type {
 } from '@documenso/lib/types/document-auth';
 import { DocumentAuth } from '@documenso/lib/types/document-auth';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-import {
-  type Document,
-  FieldType,
-  type Passkey,
-  type Recipient,
-  type User,
-} from '@documenso/prisma/client';
+import type { Document, Passkey, Recipient, User } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 
 import type { DocumentActionAuthDialogProps } from './document-action-auth-dialog';
@@ -141,12 +136,12 @@ export const DocumentAuthProvider = ({
     .with(DocumentAuth.EXPLICIT_NONE, () => ({
       type: DocumentAuth.EXPLICIT_NONE,
     }))
-    .with(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH, null, () => null)
+    .with(DocumentAuth.PASSKEY, null, () => null)
     .exhaustive();
 
   const executeActionAuthProcedure = async (options: ExecuteActionAuthProcedureOptions) => {
     // Directly run callback if no auth required.
-    if (!derivedRecipientActionAuth || options.actionTarget !== FieldType.SIGNATURE) {
+    if (!derivedRecipientActionAuth) {
       await options.onReauthFormSubmit();
       return;
     }
@@ -174,11 +169,9 @@ export const DocumentAuthProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [passkeyData.passkeys]);
 
-  // Assume that a user must be logged in for any auth requirements.
   const isAuthRedirectRequired = Boolean(
-    derivedRecipientActionAuth &&
-      derivedRecipientActionAuth !== DocumentAuth.EXPLICIT_NONE &&
-      user?.email !== recipient.email,
+    DOCUMENT_AUTH_TYPES[derivedRecipientActionAuth || '']?.isAuthRedirectRequired &&
+      !preCalculatedActionAuthOptions,
   );
 
   const refetchPasskeys = async () => {

apps/web/src/app/(signing)/sign/[token]/email-field.tsx

@@ -6,7 +6,6 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
@@ -32,12 +31,12 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+    trpc.field.signFieldWithToken.useMutation();
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 

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

@@ -20,6 +20,7 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
 import { useRequiredSigningContext } from './provider';
 import { SignDialog } from './sign-dialog';
 
@@ -36,16 +37,17 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
   const { data: session } = useSession();
 
   const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
+  const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
   const { mutateAsync: completeDocumentWithToken } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
-  const { handleSubmit, formState } = useForm();
-
-  // Keep the loading state going if successful since the redirect may take some time.
-  const isSubmitting = formState.isSubmitting || formState.isSubmitSuccessful;
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm();
 
   const uninsertedFields = useMemo(() => {
     return sortFieldsByPosition(fields.filter((field) => !field.inserted));
@@ -65,13 +67,10 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
       return;
     }
 
-    await completeDocument();
-
-    // Reauth is currently not required for completing the document.
-    // await executeActionAuthProcedure({
-    //   onReauthFormSubmit: completeDocument,
-    //   actionTarget: 'DOCUMENT',
-    // });
+    await executeActionAuthProcedure({
+      onReauthFormSubmit: completeDocument,
+      actionTarget: 'DOCUMENT',
+    });
   };
 
   const completeDocument = async (authOptions?: TRecipientActionAuth) => {

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -6,10 +6,9 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { type Recipient } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -40,12 +39,12 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+    trpc.field.signFieldWithToken.useMutation();
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
@@ -70,7 +69,6 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
 
     void executeActionAuthProcedure({
       onReauthFormSubmit: async (authOptions) => await onSign(authOptions, localFullName),
-      actionTarget: field.type,
     });
   };
 

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

@@ -7,13 +7,13 @@ import {
   Dialog,
   DialogContent,
   DialogFooter,
-  DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 
-import { SigningDisclosure } from '~/components/general/signing-disclosure';
 import { truncateTitle } from '~/helpers/truncate-title';
 
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
+
 export type SignDialogProps = {
   isSubmitting: boolean;
   document: Document;
@@ -31,26 +31,28 @@ export const SignDialog = ({
   onSignatureComplete,
   role,
 }: SignDialogProps) => {
+  const { executeActionAuthProcedure, isAuthRedirectRequired, isCurrentlyAuthenticating } =
+    useRequiredDocumentAuthContext();
+
   const [showDialog, setShowDialog] = useState(false);
   const truncatedTitle = truncateTitle(document.title);
   const isComplete = fields.every((field) => field.inserted);
 
-  const handleOpenChange = (open: boolean) => {
+  const handleOpenChange = async (open: boolean) => {
     if (isSubmitting || !isComplete) {
       return;
     }
 
-    // Reauth is currently not required for signing the document.
-    // if (isAuthRedirectRequired) {
-    //   await executeActionAuthProcedure({
-    //     actionTarget: 'DOCUMENT',
-    //     onReauthFormSubmit: () => {
-    //       // Do nothing since the user should be redirected.
-    //     },
-    //   });
+    if (isAuthRedirectRequired) {
+      await executeActionAuthProcedure({
+        actionTarget: 'DOCUMENT',
+        onReauthFormSubmit: () => {
+          // Do nothing since the user should be redirected.
+        },
+      });
 
-    //   return;
-    // }
+      return;
+    }
 
     setShowDialog(open);
   };
@@ -68,39 +70,23 @@ export const SignDialog = ({
           {isComplete ? 'Complete' : 'Next field'}
         </Button>
       </DialogTrigger>
-
       <DialogContent>
-        <DialogTitle>
+        <div className="text-center">
           <div className="text-foreground text-xl font-semibold">
-            {role === RecipientRole.VIEWER && 'Complete Viewing'}
-            {role === RecipientRole.SIGNER && 'Complete Signing'}
-            {role === RecipientRole.APPROVER && 'Complete Approval'}
+            {role === RecipientRole.VIEWER && 'Mark Document as Viewed'}
+            {role === RecipientRole.SIGNER && 'Sign Document'}
+            {role === RecipientRole.APPROVER && 'Approve Document'}
+          </div>
+          <div className="text-muted-foreground mx-auto w-4/5 py-2 text-center">
+            {role === RecipientRole.VIEWER &&
+              `You are about to finish viewing "${truncatedTitle}". Are you sure?`}
+            {role === RecipientRole.SIGNER &&
+              `You are about to finish signing "${truncatedTitle}". Are you sure?`}
+            {role === RecipientRole.APPROVER &&
+              `You are about to finish approving "${truncatedTitle}". Are you sure?`}
           </div>
-        </DialogTitle>
-
-        <div className="text-muted-foreground max-w-[50ch]">
-          {role === RecipientRole.VIEWER && (
-            <span>
-              You are about to complete viewing "{truncatedTitle}".
-              <br /> Are you sure?
-            </span>
-          )}
-          {role === RecipientRole.SIGNER && (
-            <span>
-              You are about to complete signing "{truncatedTitle}".
-              <br /> Are you sure?
-            </span>
-          )}
-          {role === RecipientRole.APPROVER && (
-            <span>
-              You are about to complete approving "{truncatedTitle}".
-              <br /> Are you sure?
-            </span>
-          )}
         </div>
 
-        <SigningDisclosure className="mt-4" />
-
         <DialogFooter>
           <div className="flex w-full flex-1 flex-nowrap gap-4">
             <Button
@@ -118,7 +104,7 @@ export const SignDialog = ({
               type="button"
               className="flex-1"
               disabled={!isComplete}
-              loading={isSubmitting}
+              loading={isSubmitting || isCurrentlyAuthenticating}
               onClick={onSignatureComplete}
             >
               {role === RecipientRole.VIEWER && 'Mark as Viewed'}

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -6,10 +6,9 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { type Recipient } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -18,8 +17,6 @@ import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { SigningDisclosure } from '~/components/general/signing-disclosure';
-
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
 import { useRequiredSigningContext } from './provider';
 import { SigningFieldContainer } from './signing-field-container';
@@ -44,12 +41,12 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+    trpc.field.signFieldWithToken.useMutation();
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
 
   const { Signature: signature } = field;
 
@@ -92,7 +89,6 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
 
     void executeActionAuthProcedure({
       onReauthFormSubmit: async (authOptions) => await onSign(authOptions, localSignature),
-      actionTarget: field.type,
     });
   };
 
@@ -202,8 +198,6 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
             />
           </div>
 
-          <SigningDisclosure />
-
           <DialogFooter>
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 
 import { type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { FieldType } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
@@ -56,24 +55,11 @@ export const SigningFieldContainer = ({
       return;
     }
 
-    // Bypass reauth for non signature fields.
-    if (field.type !== FieldType.SIGNATURE) {
-      const presignResult = await onPreSign?.();
-
-      if (presignResult === false) {
-        return;
-      }
-
-      await onSign();
-      return;
-    }
-
     if (isAuthRedirectRequired) {
       await executeActionAuthProcedure({
         onReauthFormSubmit: () => {
           // Do nothing since the user should be redirected.
         },
-        actionTarget: field.type,
       });
 
       return;
@@ -90,7 +76,6 @@ export const SigningFieldContainer = ({
 
     await executeActionAuthProcedure({
       onReauthFormSubmit: onSign,
-      actionTarget: field.type,
     });
   };
 

apps/web/src/app/(signing)/sign/[token]/text-field.tsx

@@ -6,7 +6,6 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
@@ -36,12 +35,12 @@ export const TextField = ({ field, recipient }: TextFieldProps) => {
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+    trpc.field.signFieldWithToken.useMutation();
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
@@ -62,7 +61,6 @@ export const TextField = ({ field, recipient }: TextFieldProps) => {
 
     void executeActionAuthProcedure({
       onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
-      actionTarget: field.type,
     });
   };
 

apps/web/src/app/(unauthenticated)/articles/signature-disclosure/page.tsx

@@ -1,108 +0,0 @@
-import Link from 'next/link';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-export default function SignatureDisclosure() {
-  return (
-    <div>
-      <article className="prose">
-        <h1>Electronic Signature Disclosure</h1>
-
-        <h2>Welcome</h2>
-        <p>
-          Thank you for using Documenso to perform your electronic document signing. The purpose of
-          this disclosure is to inform you about the process, legality, and your rights regarding
-          the use of electronic signatures on our platform. By opting to use an electronic
-          signature, you are agreeing to the terms and conditions outlined below.
-        </p>
-
-        <h2>Acceptance and Consent</h2>
-        <p>
-          When you use our platform to affix your electronic signature to documents, you are
-          consenting to do so under the Electronic Signatures in Global and National Commerce Act
-          (E-Sign Act) and other applicable laws. This action indicates your agreement to use
-          electronic means to sign documents and receive notifications.
-        </p>
-
-        <h2>Legality of Electronic Signatures</h2>
-        <p>
-          An electronic signature provided by you on our platform, achieved through clicking through
-          to a document and entering your name, or any other electronic signing method we provide,
-          is legally binding. It carries the same weight and enforceability as a manual signature
-          written with ink on paper.
-        </p>
-
-        <h2>System Requirements</h2>
-        <p>To use our electronic signature service, you must have access to:</p>
-        <ul>
-          <li>A stable internet connection</li>
-          <li>An email account</li>
-          <li>A device capable of accessing, opening, and reading documents</li>
-          <li>A means to print or download documents for your records</li>
-        </ul>
-
-        <h2>Electronic Delivery of Documents</h2>
-        <p>
-          All documents related to the electronic signing process will be provided to you
-          electronically through our platform or via email. It is your responsibility to ensure that
-          your email address is current and that you can receive and open our emails.
-        </p>
-
-        <h2>Consent to Electronic Transactions</h2>
-        <p>
-          By using the electronic signature feature, you are consenting to conduct transactions and
-          receive disclosures electronically. You acknowledge that your electronic signature on
-          documents is binding and that you accept the terms outlined in the documents you are
-          signing.
-        </p>
-
-        <h2>Withdrawing Consent</h2>
-        <p>
-          You have the right to withdraw your consent to use electronic signatures at any time
-          before completing the signing process. To withdraw your consent, please contact the sender
-          of the document. In failing to contact the sender you may reach out to{' '}
-          <a href="mailto:support@documenso.com">support@documenso.com</a> for assistance. Be aware
-          that withdrawing consent may delay or halt the completion of the related transaction or
-          service.
-        </p>
-
-        <h2>Updating Your Information</h2>
-        <p>
-          It is crucial to keep your contact information, especially your email address, up to date
-          with us. Please notify us immediately of any changes to ensure that you continue to
-          receive all necessary communications.
-        </p>
-
-        <h2>Retention of Documents</h2>
-        <p>
-          After signing a document electronically, you will be provided the opportunity to view,
-          download, and print the document for your records. It is highly recommended that you
-          retain a copy of all electronically signed documents for your personal records. We will
-          also retain a copy of the signed document for our records however we may not be able to
-          provide you with a copy of the signed document after a certain period of time.
-        </p>
-
-        <h2>Acknowledgment</h2>
-        <p>
-          By proceeding to use the electronic signature service provided by Documenso, you affirm
-          that you have read and understood this disclosure. You agree to all terms and conditions
-          related to the use of electronic signatures and electronic transactions as outlined
-          herein.
-        </p>
-
-        <h2>Contact Information</h2>
-        <p>
-          For any questions regarding this disclosure, electronic signatures, or any related
-          process, please contact us at:{' '}
-          <a href="mailto:support@documenso.com">support@documenso.com</a>
-        </p>
-      </article>
-
-      <div className="mt-8">
-        <Button asChild>
-          <Link href="/documents">Back to Documents</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

apps/web/src/app/layout.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
-import { AxiomWebVitals } from 'next-axiom';
 import { PublicEnvScript } from 'next-runtime-env';
 
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
@@ -72,8 +71,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <PublicEnvScript />
       </head>
 
-      <AxiomWebVitals />
-
       <Suspense>
         <PostHogPageview />
       </Suspense>

apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import type { Recipient } from '@documenso/prisma/client';
+import { Recipient } from '@documenso/prisma/client';
 
 import { StackAvatar } from './stack-avatar';
 

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -14,10 +14,6 @@ import {
   SETTINGS_PAGE_SHORTCUT,
   TEMPLATES_PAGE_SHORTCUT,
 } from '@documenso/lib/constants/keyboard-shortcuts';
-import {
-  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-  SKIP_QUERY_BATCH_META,
-} from '@documenso/lib/constants/trpc';
 import type { Document, Recipient } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
@@ -86,10 +82,6 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
       },
       {
         keepPreviousData: true,
-        // Do not batch this due to relatively long request time compared to
-        // other queries which are generally batched with this.
-        ...SKIP_QUERY_BATCH_META,
-        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
       },
     );
 

apps/web/src/components/(teams)/dialogs/invite-team-member-dialog.tsx

@@ -1,22 +1,19 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Download, Mail, MailIcon, PlusCircle, Trash, Upload, UsersIcon } from 'lucide-react';
-import Papa, { type ParseResult } from 'papaparse';
+import { Mail, PlusCircle, Trash } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { TeamMemberRole } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateTeamMemberInvitesMutationSchema } from '@documenso/trpc/server/team-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   Dialog,
   DialogContent,
@@ -42,7 +39,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@documenso/ui/primitives/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type InviteTeamMembersDialogProps = {
@@ -55,45 +51,18 @@ const ZInviteTeamMembersFormSchema = z
   .object({
     invitations: ZCreateTeamMemberInvitesMutationSchema.shape.invitations,
   })
-  // Display exactly which rows are duplicates.
-  .superRefine((items, ctx) => {
-    const uniqueEmails = new Map<string, number>();
+  .refine(
+    (schema) => {
+      const emails = schema.invitations.map((invitation) => invitation.email.toLowerCase());
 
-    for (const [index, invitation] of items.invitations.entries()) {
-      const email = invitation.email.toLowerCase();
-
-      const firstFoundIndex = uniqueEmails.get(email);
-
-      if (firstFoundIndex === undefined) {
-        uniqueEmails.set(email, index);
-        continue;
-      }
-
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: 'Emails must be unique',
-        path: ['invitations', index, 'email'],
-      });
-
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: 'Emails must be unique',
-        path: ['invitations', firstFoundIndex, 'email'],
-      });
-    }
-  });
+      return new Set(emails).size === emails.length;
+    },
+    // Dirty hack to handle errors when .root is populated for an array type
+    { message: 'Members must have unique emails', path: ['members__root'] },
+  );
 
 type TInviteTeamMembersFormSchema = z.infer<typeof ZInviteTeamMembersFormSchema>;
 
-type TabTypes = 'INDIVIDUAL' | 'BULK';
-
-const ZImportTeamMemberSchema = z.array(
-  z.object({
-    email: z.string().email(),
-    role: z.nativeEnum(TeamMemberRole),
-  }),
-);
-
 export const InviteTeamMembersDialog = ({
   currentUserTeamRole,
   teamId,
@@ -101,8 +70,6 @@ export const InviteTeamMembersDialog = ({
   ...props
 }: InviteTeamMembersDialogProps) => {
   const [open, setOpen] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [invitationType, setInvitationType] = useState<TabTypes>('INDIVIDUAL');
 
   const { toast } = useToast();
 
@@ -163,75 +130,9 @@ export const InviteTeamMembersDialog = ({
   useEffect(() => {
     if (!open) {
       form.reset();
-      setInvitationType('INDIVIDUAL');
     }
   }, [open, form]);
 
-  const onFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!e.target.files?.length) {
-      return;
-    }
-
-    const csvFile = e.target.files[0];
-
-    Papa.parse(csvFile, {
-      skipEmptyLines: true,
-      comments: 'Work email,Job title',
-      complete: (results: ParseResult<string[]>) => {
-        const members = results.data.map((row) => {
-          const [email, role] = row;
-
-          return {
-            email: email.trim(),
-            role: role.trim().toUpperCase(),
-          };
-        });
-
-        // Remove the first row if it contains the headers.
-        if (members.length > 1 && members[0].role.toUpperCase() === 'ROLE') {
-          members.shift();
-        }
-
-        try {
-          const importedInvitations = ZImportTeamMemberSchema.parse(members);
-
-          form.setValue('invitations', importedInvitations);
-          form.clearErrors('invitations');
-
-          setInvitationType('INDIVIDUAL');
-        } catch (err) {
-          console.error(err.message);
-
-          toast({
-            variant: 'destructive',
-            title: 'Something went wrong',
-            description: 'Please check the CSV file and make sure it is according to our format',
-          });
-        }
-      },
-    });
-  };
-
-  const downloadTemplate = () => {
-    const data = [
-      { email: 'admin@documenso.com', role: 'Admin' },
-      { email: 'manager@documenso.com', role: 'Manager' },
-      { email: 'member@documenso.com', role: 'Member' },
-    ];
-
-    const csvContent =
-      'Email address,Role\n' + data.map((row) => `${row.email},${row.role}`).join('\n');
-
-    const blob = new Blob([csvContent], {
-      type: 'text/csv',
-    });
-
-    downloadFile({
-      filename: 'documenso-team-member-invites-template.csv',
-      data: blob,
-    });
-  };
-
   return (
     <Dialog
       {...props}
@@ -251,144 +152,92 @@ export const InviteTeamMembersDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        <Tabs
-          defaultValue="INDIVIDUAL"
-          value={invitationType}
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          onValueChange={(value) => setInvitationType(value as TabTypes)}
-        >
-          <TabsList className="w-full">
-            <TabsTrigger value="INDIVIDUAL" className="hover:text-foreground w-full">
-              <MailIcon size={20} className="mr-2" />
-              Invite Members
-            </TabsTrigger>
-
-            <TabsTrigger value="BULK" className="hover:text-foreground w-full">
-              <UsersIcon size={20} className="mr-2" /> Bulk Import
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="INDIVIDUAL">
-            <Form {...form}>
-              <form onSubmit={form.handleSubmit(onFormSubmit)}>
-                <fieldset
-                  className="flex h-full flex-col space-y-4"
-                  disabled={form.formState.isSubmitting}
-                >
-                  <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
-                    {teamMemberInvites.map((teamMemberInvite, index) => (
-                      <div className="flex w-full flex-row space-x-4" key={teamMemberInvite.id}>
-                        <FormField
-                          control={form.control}
-                          name={`invitations.${index}.email`}
-                          render={({ field }) => (
-                            <FormItem className="w-full">
-                              {index === 0 && <FormLabel required>Email address</FormLabel>}
-                              <FormControl>
-                                <Input className="bg-background" {...field} />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        <FormField
-                          control={form.control}
-                          name={`invitations.${index}.role`}
-                          render={({ field }) => (
-                            <FormItem className="w-full">
-                              {index === 0 && <FormLabel required>Role</FormLabel>}
-                              <FormControl>
-                                <Select {...field} onValueChange={field.onChange}>
-                                  <SelectTrigger className="text-muted-foreground max-w-[200px]">
-                                    <SelectValue />
-                                  </SelectTrigger>
-
-                                  <SelectContent position="popper">
-                                    {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
-                                      <SelectItem key={role} value={role}>
-                                        {TEAM_MEMBER_ROLE_MAP[role] ?? role}
-                                      </SelectItem>
-                                    ))}
-                                  </SelectContent>
-                                </Select>
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        <button
-                          type="button"
-                          className={cn(
-                            'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
-                            index === 0 ? 'mt-8' : 'mt-0',
-                          )}
-                          disabled={teamMemberInvites.length === 1}
-                          onClick={() => removeTeamMemberInvite(index)}
-                        >
-                          <Trash className="h-5 w-5" />
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant="outline"
-                    className="w-fit"
-                    onClick={() => onAddTeamMemberInvite()}
-                  >
-                    <PlusCircle className="mr-2 h-4 w-4" />
-                    Add more
-                  </Button>
-
-                  <DialogFooter>
-                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                      Cancel
-                    </Button>
-
-                    <Button type="submit" loading={form.formState.isSubmitting}>
-                      {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
-                      Invite
-                    </Button>
-                  </DialogFooter>
-                </fieldset>
-              </form>
-            </Form>
-          </TabsContent>
-
-          <TabsContent value="BULK">
-            <div className="mt-4 space-y-4">
-              <Card gradient className="h-32">
-                <CardContent
-                  className="text-muted-foreground/80 hover:text-muted-foreground/90 flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 transition-colors"
-                  onClick={() => fileInputRef.current?.click()}
-                >
-                  <Upload className="h-5 w-5" />
-
-                  <p className="mt-1 text-sm">Click here to upload</p>
-
-                  <input
-                    onChange={onFileInputChange}
-                    type="file"
-                    ref={fileInputRef}
-                    accept=".csv"
-                    hidden
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              {teamMemberInvites.map((teamMemberInvite, index) => (
+                <div className="flex w-full flex-row space-x-4" key={teamMemberInvite.id}>
+                  <FormField
+                    control={form.control}
+                    name={`invitations.${index}.email`}
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        {index === 0 && <FormLabel required>Email address</FormLabel>}
+                        <FormControl>
+                          <Input className="bg-background" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
                   />
-                </CardContent>
-              </Card>
+
+                  <FormField
+                    control={form.control}
+                    name={`invitations.${index}.role`}
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        {index === 0 && <FormLabel required>Role</FormLabel>}
+                        <FormControl>
+                          <Select {...field} onValueChange={field.onChange}>
+                            <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                              <SelectValue />
+                            </SelectTrigger>
+
+                            <SelectContent position="popper">
+                              {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
+                                <SelectItem key={role} value={role}>
+                                  {TEAM_MEMBER_ROLE_MAP[role] ?? role}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <button
+                    type="button"
+                    className={cn(
+                      'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                      index === 0 ? 'mt-8' : 'mt-0',
+                    )}
+                    disabled={teamMemberInvites.length === 1}
+                    onClick={() => removeTeamMemberInvite(index)}
+                  >
+                    <Trash className="h-5 w-5" />
+                  </button>
+                </div>
+              ))}
+
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                className="w-fit"
+                onClick={() => onAddTeamMemberInvite()}
+              >
+                <PlusCircle className="mr-2 h-4 w-4" />
+                Add more
+              </Button>
 
               <DialogFooter>
-                <Button type="button" variant="secondary" onClick={downloadTemplate}>
-                  <Download className="mr-2 h-4 w-4" />
-                  Template
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
+                  Invite
                 </Button>
               </DialogFooter>
-            </div>
-          </TabsContent>
-        </Tabs>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

apps/web/src/components/branding/logo.tsx

@@ -1,4 +1,4 @@
-import type { SVGAttributes } from 'react';
+import { SVGAttributes } from 'react';
 
 export type LogoProps = SVGAttributes<SVGSVGElement>;
 

apps/web/src/components/formatter/template-type.tsx

@@ -1,9 +1,9 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 
 import { Globe, Lock } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
-import type { TemplateType as TemplateTypePrisma } from '@documenso/prisma/client';
+import { TemplateType as TemplateTypePrisma } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 
 type TemplateTypeIcon = {

apps/web/src/components/forms/2fa/authenticator-app.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useState } from 'react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+import { DisableAuthenticatorAppDialog } from './disable-authenticator-app-dialog';
+import { EnableAuthenticatorAppDialog } from './enable-authenticator-app-dialog';
+
+type AuthenticatorAppProps = {
+  isTwoFactorEnabled: boolean;
+};
+
+export const AuthenticatorApp = ({ isTwoFactorEnabled }: AuthenticatorAppProps) => {
+  const [modalState, setModalState] = useState<'enable' | 'disable' | null>(null);
+
+  const isEnableDialogOpen = modalState === 'enable';
+  const isDisableDialogOpen = modalState === 'disable';
+
+  return (
+    <>
+      <div className="flex-shrink-0">
+        {isTwoFactorEnabled ? (
+          <Button variant="destructive" onClick={() => setModalState('disable')}>
+            Disable 2FA
+          </Button>
+        ) : (
+          <Button onClick={() => setModalState('enable')}>Enable 2FA</Button>
+        )}
+      </div>
+
+      <EnableAuthenticatorAppDialog
+        open={isEnableDialogOpen}
+        onOpenChange={(open) => !open && setModalState(null)}
+      />
+
+      <DisableAuthenticatorAppDialog
+        open={isDisableDialogOpen}
+        onOpenChange={(open) => !open && setModalState(null)}
+      />
+    </>
+  );
+};

apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -1,7 +1,3 @@
-'use client';
-
-import { useState } from 'react';
-
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -13,51 +9,65 @@ import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
+  FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export const ZDisable2FAForm = z.object({
-  token: z.string(),
+export const ZDisableTwoFactorAuthenticationForm = z.object({
+  password: z.string().min(6).max(72),
+  backupCode: z.string(),
 });
 
-export type TDisable2FAForm = z.infer<typeof ZDisable2FAForm>;
+export type TDisableTwoFactorAuthenticationForm = z.infer<
+  typeof ZDisableTwoFactorAuthenticationForm
+>;
 
-export const DisableAuthenticatorAppDialog = () => {
+export type DisableAuthenticatorAppDialogProps = {
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const DisableAuthenticatorAppDialog = ({
+  open,
+  onOpenChange,
+}: DisableAuthenticatorAppDialogProps) => {
   const router = useRouter();
-
   const { toast } = useToast();
 
-  const [isOpen, setIsOpen] = useState(false);
+  const { mutateAsync: disableTwoFactorAuthentication } =
+    trpc.twoFactorAuthentication.disable.useMutation();
 
-  const { mutateAsync: disable2FA } = trpc.twoFactorAuthentication.disable.useMutation();
-
-  const disable2FAForm = useForm<TDisable2FAForm>({
+  const disableTwoFactorAuthenticationForm = useForm<TDisableTwoFactorAuthenticationForm>({
     defaultValues: {
-      token: '',
+      password: '',
+      backupCode: '',
     },
-    resolver: zodResolver(ZDisable2FAForm),
+    resolver: zodResolver(ZDisableTwoFactorAuthenticationForm),
   });
 
-  const { isSubmitting: isDisable2FASubmitting } = disable2FAForm.formState;
+  const { isSubmitting: isDisableTwoFactorAuthenticationSubmitting } =
+    disableTwoFactorAuthenticationForm.formState;
 
-  const onDisable2FAFormSubmit = async ({ token }: TDisable2FAForm) => {
+  const onDisableTwoFactorAuthenticationFormSubmit = async ({
+    password,
+    backupCode,
+  }: TDisableTwoFactorAuthenticationForm) => {
     try {
-      await disable2FA({ token });
+      await disableTwoFactorAuthentication({ password, backupCode });
 
       toast({
         title: 'Two-factor authentication disabled',
@@ -66,7 +76,7 @@ export const DisableAuthenticatorAppDialog = () => {
       });
 
       flushSync(() => {
-        setIsOpen(false);
+        onOpenChange(false);
       });
 
       router.refresh();
@@ -81,51 +91,74 @@ export const DisableAuthenticatorAppDialog = () => {
   };
 
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild={true}>
-        <Button className="flex-shrink-0" variant="destructive">
-          Disable 2FA
-        </Button>
-      </DialogTrigger>
-
-      <DialogContent position="center">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
         <DialogHeader>
-          <DialogTitle>Disable 2FA</DialogTitle>
+          <DialogTitle>Disable Authenticator App</DialogTitle>
 
           <DialogDescription>
-            Please provide a token from the authenticator, or a backup code. If you do not have a
-            backup code available, please contact support.
+            To disable the Authenticator App for your account, please enter your password and a
+            backup code. If you do not have a backup code available, please contact support.
           </DialogDescription>
         </DialogHeader>
 
-        <Form {...disable2FAForm}>
-          <form onSubmit={disable2FAForm.handleSubmit(onDisable2FAFormSubmit)}>
-            <fieldset className="flex flex-col gap-y-4" disabled={isDisable2FASubmitting}>
+        <Form {...disableTwoFactorAuthenticationForm}>
+          <form
+            onSubmit={disableTwoFactorAuthenticationForm.handleSubmit(
+              onDisableTwoFactorAuthenticationFormSubmit,
+            )}
+            className="flex flex-col gap-y-4"
+          >
+            <fieldset
+              className="flex flex-col gap-y-4"
+              disabled={isDisableTwoFactorAuthenticationSubmitting}
+            >
               <FormField
-                name="token"
-                control={disable2FAForm.control}
+                name="password"
+                control={disableTwoFactorAuthenticationForm.control}
                 render={({ field }) => (
                   <FormItem>
+                    <FormLabel className="text-muted-foreground">Password</FormLabel>
                     <FormControl>
-                      <Input {...field} placeholder="Token" />
+                      <PasswordInput
+                        {...field}
+                        autoComplete="current-password"
+                        value={field.value ?? ''}
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
 
-              <DialogFooter>
-                <DialogClose asChild>
-                  <Button type="button" variant="secondary">
-                    Cancel
-                  </Button>
-                </DialogClose>
-
-                <Button type="submit" variant="destructive" loading={isDisable2FASubmitting}>
-                  Disable 2FA
-                </Button>
-              </DialogFooter>
+              <FormField
+                name="backupCode"
+                control={disableTwoFactorAuthenticationForm.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-muted-foreground">Backup Code</FormLabel>
+                    <FormControl>
+                      <Input {...field} type="text" value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             </fieldset>
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+
+              <Button
+                type="submit"
+                variant="destructive"
+                loading={isDisableTwoFactorAuthenticationSubmitting}
+              >
+                Disable 2FA
+              </Button>
+            </DialogFooter>
           </form>
         </Form>
       </DialogContent>

apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -1,11 +1,8 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-import { useRouter } from 'next/navigation';
+import { useEffect, useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
@@ -14,13 +11,11 @@ import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import {
   Form,
@@ -31,79 +26,98 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { RecoveryCodeList } from './recovery-code-list';
 
-export const ZEnable2FAForm = z.object({
+export const ZSetupTwoFactorAuthenticationForm = z.object({
+  password: z.string().min(6).max(72),
+});
+
+export type TSetupTwoFactorAuthenticationForm = z.infer<typeof ZSetupTwoFactorAuthenticationForm>;
+
+export const ZEnableTwoFactorAuthenticationForm = z.object({
   token: z.string(),
 });
 
-export type TEnable2FAForm = z.infer<typeof ZEnable2FAForm>;
+export type TEnableTwoFactorAuthenticationForm = z.infer<typeof ZEnableTwoFactorAuthenticationForm>;
 
 export type EnableAuthenticatorAppDialogProps = {
-  onSuccess?: () => void;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
 };
 
-export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorAppDialogProps) => {
+export const EnableAuthenticatorAppDialog = ({
+  open,
+  onOpenChange,
+}: EnableAuthenticatorAppDialogProps) => {
   const { toast } = useToast();
 
-  const router = useRouter();
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
-
-  const { mutateAsync: enable2FA } = trpc.twoFactorAuthentication.enable.useMutation();
+  const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } =
+    trpc.twoFactorAuthentication.setup.useMutation();
 
   const {
-    mutateAsync: setup2FA,
-    data: setup2FAData,
-    isLoading: isSettingUp2FA,
-  } = trpc.twoFactorAuthentication.setup.useMutation({
-    onError: () => {
-      toast({
-        title: 'Unable to setup two-factor authentication',
-        description:
-          'We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again.',
-        variant: 'destructive',
-      });
+    mutateAsync: enableTwoFactorAuthentication,
+    data: enableTwoFactorAuthenticationData,
+    isLoading: isEnableTwoFactorAuthenticationDataLoading,
+  } = trpc.twoFactorAuthentication.enable.useMutation();
+
+  const setupTwoFactorAuthenticationForm = useForm<TSetupTwoFactorAuthenticationForm>({
+    defaultValues: {
+      password: '',
     },
+    resolver: zodResolver(ZSetupTwoFactorAuthenticationForm),
   });
 
-  const enable2FAForm = useForm<TEnable2FAForm>({
+  const { isSubmitting: isSetupTwoFactorAuthenticationSubmitting } =
+    setupTwoFactorAuthenticationForm.formState;
+
+  const enableTwoFactorAuthenticationForm = useForm<TEnableTwoFactorAuthenticationForm>({
     defaultValues: {
       token: '',
     },
-    resolver: zodResolver(ZEnable2FAForm),
+    resolver: zodResolver(ZEnableTwoFactorAuthenticationForm),
   });
 
-  const { isSubmitting: isEnabling2FA } = enable2FAForm.formState;
+  const { isSubmitting: isEnableTwoFactorAuthenticationSubmitting } =
+    enableTwoFactorAuthenticationForm.formState;
 
-  const onEnable2FAFormSubmit = async ({ token }: TEnable2FAForm) => {
+  const step = useMemo(() => {
+    if (!setupTwoFactorAuthenticationData || isSetupTwoFactorAuthenticationSubmitting) {
+      return 'setup';
+    }
+
+    if (!enableTwoFactorAuthenticationData || isEnableTwoFactorAuthenticationSubmitting) {
+      return 'enable';
+    }
+
+    return 'view';
+  }, [
+    setupTwoFactorAuthenticationData,
+    isSetupTwoFactorAuthenticationSubmitting,
+    enableTwoFactorAuthenticationData,
+    isEnableTwoFactorAuthenticationSubmitting,
+  ]);
+
+  const onSetupTwoFactorAuthenticationFormSubmit = async ({
+    password,
+  }: TSetupTwoFactorAuthenticationForm) => {
     try {
-      const data = await enable2FA({ code: token });
-
-      setRecoveryCodes(data.recoveryCodes);
-      onSuccess?.();
-
-      toast({
-        title: 'Two-factor authentication enabled',
-        description:
-          'You will now be required to enter a code from your authenticator app when signing in.',
-      });
+      await setupTwoFactorAuthentication({ password });
     } catch (_err) {
       toast({
         title: 'Unable to setup two-factor authentication',
         description:
-          'We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again.',
+          'We were unable to setup two-factor authentication for your account. Please ensure that you have entered your password correctly and try again.',
         variant: 'destructive',
       });
     }
   };
 
   const downloadRecoveryCodes = () => {
-    if (recoveryCodes) {
-      const blob = new Blob([recoveryCodes.join('\n')], {
+    if (enableTwoFactorAuthenticationData && enableTwoFactorAuthenticationData.recoveryCodes) {
+      const blob = new Blob([enableTwoFactorAuthenticationData.recoveryCodes.join('\n')], {
         type: 'text/plain',
       });
 
@@ -114,126 +128,175 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
     }
   };
 
-  const handleEnable2FA = async () => {
-    if (!setup2FAData) {
-      await setup2FA();
-    }
+  const onEnableTwoFactorAuthenticationFormSubmit = async ({
+    token,
+  }: TEnableTwoFactorAuthenticationForm) => {
+    try {
+      await enableTwoFactorAuthentication({ code: token });
 
-    setIsOpen(true);
+      toast({
+        title: 'Two-factor authentication enabled',
+        description:
+          'Two-factor authentication has been enabled for your account. You will now be required to enter a code from your authenticator app when signing in.',
+      });
+    } catch (_err) {
+      toast({
+        title: 'Unable to setup two-factor authentication',
+        description:
+          'We were unable to setup two-factor authentication for your account. Please ensure that you have entered your password correctly and try again.',
+        variant: 'destructive',
+      });
+    }
   };
 
   useEffect(() => {
-    enable2FAForm.reset();
-
-    if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
-      setRecoveryCodes(null);
-      router.refresh();
+    // Reset the form when the Dialog closes
+    if (!open) {
+      setupTwoFactorAuthenticationForm.reset();
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
+  }, [open, setupTwoFactorAuthenticationForm]);
 
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild={true}>
-        <Button
-          className="flex-shrink-0"
-          loading={isSettingUp2FA}
-          onClick={(e) => {
-            e.preventDefault();
-            void handleEnable2FA();
-          }}
-        >
-          Enable 2FA
-        </Button>
-      </DialogTrigger>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Enable Authenticator App</DialogTitle>
 
-      <DialogContent position="center">
-        {setup2FAData && (
-          <>
-            {recoveryCodes ? (
-              <div>
-                <DialogHeader>
-                  <DialogTitle>Backup codes</DialogTitle>
-                  <DialogDescription>
-                    Your recovery codes are listed below. Please store them in a safe place.
-                  </DialogDescription>
-                </DialogHeader>
+          {step === 'setup' && (
+            <DialogDescription>
+              To enable two-factor authentication, please enter your password below.
+            </DialogDescription>
+          )}
 
-                <div className="mt-4">
-                  <RecoveryCodeList recoveryCodes={recoveryCodes} />
-                </div>
+          {step === 'view' && (
+            <DialogDescription>
+              Your recovery codes are listed below. Please store them in a safe place.
+            </DialogDescription>
+          )}
+        </DialogHeader>
 
-                <DialogFooter className="mt-4">
-                  <DialogClose asChild>
-                    <Button variant="secondary">Close</Button>
-                  </DialogClose>
+        {match(step)
+          .with('setup', () => {
+            return (
+              <Form {...setupTwoFactorAuthenticationForm}>
+                <form
+                  onSubmit={setupTwoFactorAuthenticationForm.handleSubmit(
+                    onSetupTwoFactorAuthenticationFormSubmit,
+                  )}
+                  className="flex flex-col gap-y-4"
+                >
+                  <FormField
+                    name="password"
+                    control={setupTwoFactorAuthenticationForm.control}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-muted-foreground">Password</FormLabel>
+                        <FormControl>
+                          <PasswordInput
+                            {...field}
+                            autoComplete="current-password"
+                            value={field.value ?? ''}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
 
-                  <Button onClick={downloadRecoveryCodes}>Download</Button>
-                </DialogFooter>
-              </div>
-            ) : (
-              <Form {...enable2FAForm}>
-                <form onSubmit={enable2FAForm.handleSubmit(onEnable2FAFormSubmit)}>
-                  <DialogHeader>
-                    <DialogTitle>Enable Authenticator App</DialogTitle>
-                    <DialogDescription>
-                      To enable two-factor authentication, scan the following QR code using your
-                      authenticator app.
-                    </DialogDescription>
-                  </DialogHeader>
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                      Cancel
+                    </Button>
 
-                  <fieldset disabled={isEnabling2FA} className="mt-4 flex flex-col gap-y-4">
-                    <div
-                      className="flex h-36 justify-center"
-                      dangerouslySetInnerHTML={{
-                        __html: renderSVG(setup2FAData?.uri ?? ''),
-                      }}
-                    />
-
-                    <p className="text-muted-foreground text-sm">
-                      If your authenticator app does not support QR codes, you can use the following
-                      code instead:
-                    </p>
-
-                    <p className="bg-muted/60 text-muted-foreground rounded-lg p-2 text-center font-mono tracking-widest">
-                      {setup2FAData?.secret}
-                    </p>
-
-                    <p className="text-muted-foreground text-sm">
-                      Once you have scanned the QR code or entered the code manually, enter the code
-                      provided by your authenticator app below.
-                    </p>
-
-                    <FormField
-                      name="token"
-                      control={enable2FAForm.control}
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel className="text-muted-foreground">Token</FormLabel>
-                          <FormControl>
-                            <Input {...field} type="text" value={field.value ?? ''} />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-
-                    <DialogFooter>
-                      <DialogClose asChild>
-                        <Button variant="secondary">Cancel</Button>
-                      </DialogClose>
-
-                      <Button type="submit" loading={isEnabling2FA}>
-                        Enable 2FA
-                      </Button>
-                    </DialogFooter>
-                  </fieldset>
+                    <Button type="submit" loading={isSetupTwoFactorAuthenticationSubmitting}>
+                      Continue
+                    </Button>
+                  </DialogFooter>
                 </form>
               </Form>
-            )}
-          </>
-        )}
+            );
+          })
+          .with('enable', () => (
+            <Form {...enableTwoFactorAuthenticationForm}>
+              <form
+                onSubmit={enableTwoFactorAuthenticationForm.handleSubmit(
+                  onEnableTwoFactorAuthenticationFormSubmit,
+                )}
+                className="flex flex-col gap-y-4"
+              >
+                <p className="text-muted-foreground text-sm">
+                  To enable two-factor authentication, scan the following QR code using your
+                  authenticator app.
+                </p>
+
+                <div
+                  className="flex h-36 justify-center"
+                  dangerouslySetInnerHTML={{
+                    __html: renderSVG(setupTwoFactorAuthenticationData?.uri ?? ''),
+                  }}
+                />
+
+                <p className="text-muted-foreground text-sm">
+                  If your authenticator app does not support QR codes, you can use the following
+                  code instead:
+                </p>
+
+                <p className="bg-muted/60 text-muted-foreground rounded-lg p-2 text-center font-mono tracking-widest">
+                  {setupTwoFactorAuthenticationData?.secret}
+                </p>
+
+                <p className="text-muted-foreground text-sm">
+                  Once you have scanned the QR code or entered the code manually, enter the code
+                  provided by your authenticator app below.
+                </p>
+
+                <FormField
+                  name="token"
+                  control={enableTwoFactorAuthenticationForm.control}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-muted-foreground">Token</FormLabel>
+                      <FormControl>
+                        <Input {...field} type="text" value={field.value ?? ''} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                    Cancel
+                  </Button>
+
+                  <Button type="submit" loading={isEnableTwoFactorAuthenticationSubmitting}>
+                    Enable 2FA
+                  </Button>
+                </DialogFooter>
+              </form>
+            </Form>
+          ))
+          .with('view', () => (
+            <div>
+              {enableTwoFactorAuthenticationData?.recoveryCodes && (
+                <RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} />
+              )}
+
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
+                <Button onClick={() => onOpenChange(false)}>Complete</Button>
+
+                <Button
+                  variant="secondary"
+                  onClick={downloadRecoveryCodes}
+                  disabled={!enableTwoFactorAuthenticationData?.recoveryCodes}
+                  loading={isEnableTwoFactorAuthenticationDataLoading}
+                >
+                  Download
+                </Button>
+              </div>
+            </div>
+          ))
+          .exhaustive()}
       </DialogContent>
     </Dialog>
   );

apps/web/src/components/forms/2fa/recovery-codes.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useState } from 'react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+import { ViewRecoveryCodesDialog } from './view-recovery-codes-dialog';
+
+type RecoveryCodesProps = {
+  isTwoFactorEnabled: boolean;
+};
+
+export const RecoveryCodes = ({ isTwoFactorEnabled }: RecoveryCodesProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className="bg-background flex-shrink-0"
+        onClick={() => setIsOpen(true)}
+        disabled={!isTwoFactorEnabled}
+      >
+        View Codes
+      </Button>
+
+      <ViewRecoveryCodesDialog
+        key={isOpen ? 'open' : 'closed'}
+        open={isOpen}
+        onOpenChange={setIsOpen}
+      />
+    </>
+  );
+};

apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import { useState } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -8,58 +6,69 @@ import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { downloadFile } from '@documenso/lib/client-only/download-file';
-import { AppError } from '@documenso/lib/errors/app-error';
-import { ErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
+  FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { RecoveryCodeList } from './recovery-code-list';
 
 export const ZViewRecoveryCodesForm = z.object({
-  token: z.string().min(1, { message: 'Token is required' }),
+  password: z.string().min(6).max(72),
 });
 
 export type TViewRecoveryCodesForm = z.infer<typeof ZViewRecoveryCodesForm>;
 
-export const ViewRecoveryCodesDialog = () => {
-  const [isOpen, setIsOpen] = useState(false);
+export type ViewRecoveryCodesDialogProps = {
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => {
+  const { toast } = useToast();
 
   const {
-    data: recoveryCodes,
-    mutate,
-    isLoading,
-    error,
+    mutateAsync: viewRecoveryCodes,
+    data: viewRecoveryCodesData,
+    isLoading: isViewRecoveryCodesDataLoading,
   } = trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
 
   const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({
     defaultValues: {
-      token: '',
+      password: '',
     },
     resolver: zodResolver(ZViewRecoveryCodesForm),
   });
 
+  const { isSubmitting: isViewRecoveryCodesSubmitting } = viewRecoveryCodesForm.formState;
+
+  const step = useMemo(() => {
+    if (!viewRecoveryCodesData || isViewRecoveryCodesSubmitting) {
+      return 'authenticate';
+    }
+
+    return 'view';
+  }, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);
+
   const downloadRecoveryCodes = () => {
-    if (recoveryCodes) {
-      const blob = new Blob([recoveryCodes.join('\n')], {
+    if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
+      const blob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
         type: 'text/plain',
       });
 
@@ -70,88 +79,105 @@ export const ViewRecoveryCodesDialog = () => {
     }
   };
 
+  const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
+    try {
+      await viewRecoveryCodes({ password });
+    } catch (_err) {
+      toast({
+        title: 'Unable to view recovery codes',
+        description:
+          'We were unable to view your recovery codes. Please ensure that you have entered your password correctly and try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    // Reset the form when the Dialog closes
+    if (!open) {
+      viewRecoveryCodesForm.reset();
+    }
+  }, [open, viewRecoveryCodesForm]);
+
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <Button className="flex-shrink-0">View Codes</Button>
-      </DialogTrigger>
-
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
-        {recoveryCodes ? (
-          <div>
-            <DialogHeader className="mb-4">
-              <DialogTitle>View Recovery Codes</DialogTitle>
+        <DialogHeader>
+          <DialogTitle>View Recovery Codes</DialogTitle>
 
-              <DialogDescription>
-                Your recovery codes are listed below. Please store them in a safe place.
-              </DialogDescription>
-            </DialogHeader>
+          {step === 'authenticate' && (
+            <DialogDescription>
+              To view your recovery codes, please enter your password below.
+            </DialogDescription>
+          )}
 
-            <RecoveryCodeList recoveryCodes={recoveryCodes} />
+          {step === 'view' && (
+            <DialogDescription>
+              Your recovery codes are listed below. Please store them in a safe place.
+            </DialogDescription>
+          )}
+        </DialogHeader>
 
-            <DialogFooter className="mt-4">
-              <DialogClose asChild>
-                <Button variant="secondary">Close</Button>
-              </DialogClose>
+        {match(step)
+          .with('authenticate', () => {
+            return (
+              <Form {...viewRecoveryCodesForm}>
+                <form
+                  onSubmit={viewRecoveryCodesForm.handleSubmit(onViewRecoveryCodesFormSubmit)}
+                  className="flex flex-col gap-y-4"
+                >
+                  <FormField
+                    name="password"
+                    control={viewRecoveryCodesForm.control}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-muted-foreground">Password</FormLabel>
+                        <FormControl>
+                          <PasswordInput
+                            {...field}
+                            autoComplete="current-password"
+                            value={field.value ?? ''}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
 
-              <Button onClick={downloadRecoveryCodes}>Download</Button>
-            </DialogFooter>
-          </div>
-        ) : (
-          <Form {...viewRecoveryCodesForm}>
-            <form onSubmit={viewRecoveryCodesForm.handleSubmit((value) => mutate(value))}>
-              <DialogHeader className="mb-4">
-                <DialogTitle>View Recovery Codes</DialogTitle>
-
-                <DialogDescription>
-                  Please provide a token from your authenticator, or a backup code.
-                </DialogDescription>
-              </DialogHeader>
-
-              <fieldset className="flex flex-col space-y-4" disabled={isLoading}>
-                <FormField
-                  name="token"
-                  control={viewRecoveryCodesForm.control}
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormControl>
-                        <Input {...field} placeholder="Token" />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                {error && (
-                  <Alert variant="destructive">
-                    <AlertDescription>
-                      {match(AppError.parseError(error).message)
-                        .with(
-                          ErrorCode.INCORRECT_TWO_FACTOR_CODE,
-                          () => 'Invalid code. Please try again.',
-                        )
-                        .otherwise(
-                          () => 'Something went wrong. Please try again or contact support.',
-                        )}
-                    </AlertDescription>
-                  </Alert>
-                )}
-
-                <DialogFooter>
-                  <DialogClose asChild>
-                    <Button type="button" variant="secondary">
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                       Cancel
                     </Button>
-                  </DialogClose>
 
-                  <Button type="submit" loading={isLoading}>
-                    View
-                  </Button>
-                </DialogFooter>
-              </fieldset>
-            </form>
-          </Form>
-        )}
+                    <Button type="submit" loading={isViewRecoveryCodesSubmitting}>
+                      Continue
+                    </Button>
+                  </DialogFooter>
+                </form>
+              </Form>
+            );
+          })
+          .with('view', () => (
+            <div>
+              {viewRecoveryCodesData?.recoveryCodes && (
+                <RecoveryCodeList recoveryCodes={viewRecoveryCodesData.recoveryCodes} />
+              )}
+
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
+                <Button onClick={() => onOpenChange(false)}>Complete</Button>
+
+                <Button
+                  variant="secondary"
+                  disabled={!viewRecoveryCodesData?.recoveryCodes}
+                  loading={isViewRecoveryCodesDataLoading}
+                  onClick={downloadRecoveryCodes}
+                >
+                  Download
+                </Button>
+              </div>
+            </div>
+          ))
+          .exhaustive()}
       </DialogContent>
     </Dialog>
   );

apps/web/src/components/forms/profile.tsx

@@ -55,8 +55,11 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
   });
 
   const isSubmitting = form.formState.isSubmitting;
+  const hasTwoFactorAuthentication = user.twoFactorEnabled;
 
   const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation();
+  const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
+    trpc.profile.deleteAccount.useMutation();
 
   const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
     try {

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

apps/web/src/components/general/signing-disclosure.tsx

@@ -1,29 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-import Link from 'next/link';
-
-import { cn } from '@documenso/ui/lib/utils';
-
-export type SigningDisclosureProps = HTMLAttributes<HTMLParagraphElement>;
-
-export const SigningDisclosure = ({ className, ...props }: SigningDisclosureProps) => {
-  return (
-    <p className={cn('text-muted-foreground text-xs', className)} {...props}>
-      By proceeding with your electronic signature, you acknowledge and consent that it will be used
-      to sign the given document and holds the same legal validity as a handwritten signature. By
-      completing the electronic signing process, you affirm your understanding and acceptance of
-      these conditions.
-      <span className="mt-2 block">
-        Read the full{' '}
-        <Link
-          className="text-documenso-700 underline"
-          href="/articles/signature-disclosure"
-          target="_blank"
-        >
-          signature disclosure
-        </Link>
-        .
-      </span>
-    </p>
-  );
-};

apps/web/src/components/ui/background.tsx

@@ -1,4 +1,4 @@
-import type { SVGAttributes } from 'react';
+import { SVGAttributes } from 'react';
 
 export type BackgroundProps = Omit<SVGAttributes<SVGElement>, 'viewBox'>;
 

apps/web/src/components/ui/user-profile-skeleton.tsx

@@ -24,7 +24,7 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
         className,
       )}
     >
-      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm lowercase">
+      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm">
         {baseUrl.host}/u/{user.url}
       </div>
 

apps/web/src/providers/next-theme.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import type { ThemeProviderProps } from 'next-themes/dist/types';
+import { ThemeProviderProps } from 'next-themes/dist/types';
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;

docker/README.md

@@ -115,7 +115,6 @@ Here's a markdown table documenting all the provided environment variables:
 | `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`       | The path to the key file, default `/opt/documenso/cert.p12`.                                        |
 | `NEXT_PUBLIC_UPLOAD_TRANSPORT`               | The transport to use for file uploads (database or s3).                                             |
 | `NEXT_PRIVATE_UPLOAD_ENDPOINT`               | The endpoint for the S3 storage transport (for third-party S3-compatible providers).                |
-| `NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE`       | Whether to force path-style URLs for the S3 storage transport.                                      |
 | `NEXT_PRIVATE_UPLOAD_REGION`                 | The region for the S3 storage transport (defaults to us-east-1).                                    |
 | `NEXT_PRIVATE_UPLOAD_BUCKET`                 | The bucket to use for the S3 storage transport.                                                     |
 | `NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID`          | The access key ID for the S3 storage transport.                                                     |

docker/development/compose.yml

@@ -11,17 +11,6 @@ services:
     ports:
       - 54320:5432
 
-  queue:
-    image: postgres:15
-    container_name: queue
-    user: postgres
-    command: -c jit=off
-    environment:
-      POSTGRES_PASSWORD: password
-      POSTGRES_DB: queue
-    ports:
-      - 54321:5432
-
   inbucket:
     image: inbucket/inbucket
     container_name: mailserver

docker/production/compose.yml

@@ -34,7 +34,6 @@ services:
       - NEXT_PRIVATE_DIRECT_DATABASE_URL=${NEXT_PRIVATE_DIRECT_DATABASE_URL:-${NEXT_PRIVATE_DATABASE_URL}}
       - NEXT_PUBLIC_UPLOAD_TRANSPORT=${NEXT_PUBLIC_UPLOAD_TRANSPORT:-database}
       - NEXT_PRIVATE_UPLOAD_ENDPOINT=${NEXT_PRIVATE_UPLOAD_ENDPOINT}
-      - NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE=${NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE}
       - NEXT_PRIVATE_UPLOAD_REGION=${NEXT_PRIVATE_UPLOAD_REGION}
       - NEXT_PRIVATE_UPLOAD_BUCKET=${NEXT_PRIVATE_UPLOAD_BUCKET}
       - NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID=${NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID}

lint-staged.config.cjs

@@ -1,15 +1,7 @@
-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}': [eslint, prettier],
-  '**/*.{js,jsx,cjs,mjs}': [prettier],
-  '**/*.{yml,mdx}': [prettier],
+  '**/*.{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}`),
   '**/*/package.json': 'npm run precommit',
 };

package.json

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

packages/app-tests/e2e/command-menu/document-search.spec.ts

@@ -1,54 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { seedPendingDocument } from '@documenso/prisma/seed/documents';
-import { seedUser } from '@documenso/prisma/seed/users';
-
-import { apiSignin } from '../fixtures/authentication';
-
-test('[COMMAND_MENU]: should see sent documents', async ({ page }) => {
-  const user = await seedUser();
-  const recipient = await seedUser();
-  const document = await seedPendingDocument(user, [recipient]);
-
-  await apiSignin({
-    page,
-    email: user.email,
-  });
-
-  await page.keyboard.press('Meta+K');
-
-  await page.getByPlaceholder('Type a command or search...').first().fill(document.title);
-  await expect(page.getByRole('option', { name: document.title })).toBeVisible();
-});
-
-test('[COMMAND_MENU]: should see received documents', async ({ page }) => {
-  const user = await seedUser();
-  const recipient = await seedUser();
-  const document = await seedPendingDocument(user, [recipient]);
-
-  await apiSignin({
-    page,
-    email: recipient.email,
-  });
-
-  await page.keyboard.press('Meta+K');
-
-  await page.getByPlaceholder('Type a command or search...').first().fill(document.title);
-  await expect(page.getByRole('option', { name: document.title })).toBeVisible();
-});
-
-test('[COMMAND_MENU]: should be able to search by recipient', async ({ page }) => {
-  const user = await seedUser();
-  const recipient = await seedUser();
-  const document = await seedPendingDocument(user, [recipient]);
-
-  await apiSignin({
-    page,
-    email: recipient.email,
-  });
-
-  await page.keyboard.press('Meta+K');
-
-  await page.getByPlaceholder('Type a command or search...').first().fill(recipient.email);
-  await expect(page.getByRole('option', { name: document.title })).toBeVisible();
-});

packages/app-tests/e2e/document-auth/access-auth.spec.ts

@@ -71,6 +71,7 @@ test('[DOCUMENT_AUTH]: should allow or deny access when required', async ({ page
   await apiSignin({
     page,
     email: recipientWithAccount.email,
+    redirectPath: '/',
   });
 
   // Check that the one logged in is granted access.

packages/app-tests/e2e/document-auth/action-auth.spec.ts

@@ -14,7 +14,7 @@ import { seedTestEmail, seedUser, unseedUser } from '@documenso/prisma/seed/user
 
 import { apiSignin, apiSignout } from '../fixtures/authentication';
 
-test.describe.configure({ mode: 'parallel', timeout: 60000 });
+test.describe.configure({ mode: 'parallel' });
 
 test('[DOCUMENT_AUTH]: should allow signing when no auth setup', async ({ page }) => {
   const user = await seedUser();
@@ -124,8 +124,7 @@ test('[DOCUMENT_AUTH]: should allow signing with valid global auth', async ({ pa
   await unseedUser(recipientWithAccount.id);
 });
 
-// Currently document auth for signing/approving/viewing is not required.
-test.skip('[DOCUMENT_AUTH]: should deny signing document when required for global auth', async ({
+test('[DOCUMENT_AUTH]: should deny signing document when required for global auth', async ({
   page,
 }) => {
   const user = await seedUser();
@@ -152,7 +151,7 @@ test.skip('[DOCUMENT_AUTH]: should deny signing document when required for globa
 
   await page.getByRole('button', { name: 'Complete' }).click();
   await expect(page.getByRole('paragraph')).toContainText(
-    'Reauthentication is required to sign the document',
+    'Reauthentication is required to sign this document',
   );
 
   await unseedUser(user.id);
@@ -185,10 +184,6 @@ test('[DOCUMENT_AUTH]: should deny signing fields when required for global auth'
     await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
 
     for (const field of Field) {
-      if (field.type !== FieldType.SIGNATURE) {
-        continue;
-      }
-
       await page.locator(`#field-${field.id}`).getByRole('button').click();
       await expect(page.getByRole('paragraph')).toContainText(
         'Reauthentication is required to sign this field',
@@ -254,10 +249,6 @@ test('[DOCUMENT_AUTH]: should allow field signing when required for recipient au
 
     if (isAuthRequired) {
       for (const field of Field) {
-        if (field.type !== FieldType.SIGNATURE) {
-          continue;
-        }
-
         await page.locator(`#field-${field.id}`).getByRole('button').click();
         await expect(page.getByRole('paragraph')).toContainText(
           'Reauthentication is required to sign this field',
@@ -365,10 +356,6 @@ test('[DOCUMENT_AUTH]: should allow field signing when required for recipient an
 
     if (isAuthRequired) {
       for (const field of Field) {
-        if (field.type !== FieldType.SIGNATURE) {
-          continue;
-        }
-
         await page.locator(`#field-${field.id}`).getByRole('button').click();
         await expect(page.getByRole('paragraph')).toContainText(
           'Reauthentication is required to sign this field',

packages/app-tests/e2e/document-flow/settings-step.spec.ts

@@ -5,140 +5,12 @@ import {
   seedDraftDocument,
   seedPendingDocument,
 } from '@documenso/prisma/seed/documents';
-import { seedUserSubscription } from '@documenso/prisma/seed/subscriptions';
-import { seedTeam, unseedTeam } from '@documenso/prisma/seed/teams';
 import { seedUser, unseedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin } from '../fixtures/authentication';
 
 test.describe.configure({ mode: 'parallel' });
 
-test.describe('[EE_ONLY]', () => {
-  const enterprisePriceId = process.env.NEXT_PUBLIC_STRIPE_ENTERPRISE_PLAN_MONTHLY_PRICE_ID || '';
-
-  test.beforeEach(() => {
-    test.skip(
-      process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED !== 'true' || !enterprisePriceId,
-      'Billing required for this test',
-    );
-  });
-
-  test('[DOCUMENT_FLOW] add action auth settings', async ({ page }) => {
-    const user = await seedUser();
-
-    await seedUserSubscription({
-      userId: user.id,
-      priceId: enterprisePriceId,
-    });
-
-    const document = await seedBlankDocument(user);
-
-    await apiSignin({
-      page,
-      email: user.email,
-      redirectPath: `/documents/${document.id}/edit`,
-    });
-
-    // Set EE action auth.
-    await page.getByTestId('documentActionSelectValue').click();
-    await page.getByLabel('Require account').getByText('Require account').click();
-    await expect(page.getByTestId('documentActionSelectValue')).toContainText('Require account');
-
-    // Save the settings by going to the next step.
-    await page.getByRole('button', { name: 'Continue' }).click();
-    await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-
-    // Return to the settings step to check that the results are saved correctly.
-    await page.getByRole('button', { name: 'Go Back' }).click();
-    await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
-
-    // Todo: Verify that the values are correct once we fix the issue where going back
-    // does not show the updated values.
-    // await expect(page.getByLabel('Title')).toContainText('New Title');
-    // await expect(page.getByTestId('documentAccessSelectValue')).toContainText('Require account');
-    // await expect(page.getByTestId('documentActionSelectValue')).toContainText('Require account');
-
-    await unseedUser(user.id);
-  });
-
-  test('[DOCUMENT_FLOW] enterprise team member can add action auth settings', async ({ page }) => {
-    const team = await seedTeam({
-      createTeamMembers: 1,
-    });
-
-    const owner = team.owner;
-    const teamMemberUser = team.members[1].user;
-
-    // Make the team enterprise by giving the owner the enterprise subscription.
-    await seedUserSubscription({
-      userId: team.ownerUserId,
-      priceId: enterprisePriceId,
-    });
-
-    const document = await seedBlankDocument(owner, {
-      createDocumentOptions: {
-        teamId: team.id,
-      },
-    });
-
-    await apiSignin({
-      page,
-      email: teamMemberUser.email,
-      redirectPath: `/t/${team.url}/documents/${document.id}/edit`,
-    });
-
-    // Set EE action auth.
-    await page.getByTestId('documentActionSelectValue').click();
-    await page.getByLabel('Require account').getByText('Require account').click();
-    await expect(page.getByTestId('documentActionSelectValue')).toContainText('Require account');
-
-    // Save the settings by going to the next step.
-    await page.getByRole('button', { name: 'Continue' }).click();
-    await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-
-    // Advanced settings should be visible.
-    await expect(page.getByLabel('Show advanced settings')).toBeVisible();
-
-    await unseedTeam(team.url);
-  });
-
-  test('[DOCUMENT_FLOW] enterprise team member should not have access to enterprise on personal account', async ({
-    page,
-  }) => {
-    const team = await seedTeam({
-      createTeamMembers: 1,
-    });
-
-    const teamMemberUser = team.members[1].user;
-
-    // Make the team enterprise by giving the owner the enterprise subscription.
-    await seedUserSubscription({
-      userId: team.ownerUserId,
-      priceId: enterprisePriceId,
-    });
-
-    const document = await seedBlankDocument(teamMemberUser);
-
-    await apiSignin({
-      page,
-      email: teamMemberUser.email,
-      redirectPath: `/documents/${document.id}/edit`,
-    });
-
-    // Global action auth should not be visible.
-    await expect(page.getByTestId('documentActionSelectValue')).not.toBeVisible();
-
-    // Next step.
-    await page.getByRole('button', { name: 'Continue' }).click();
-    await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-
-    // Advanced settings should not be visible.
-    await expect(page.getByLabel('Show advanced settings')).not.toBeVisible();
-
-    await unseedTeam(team.url);
-  });
-});
-
 test('[DOCUMENT_FLOW]: add settings', async ({ page }) => {
   const user = await seedUser();
   const document = await seedBlankDocument(user);
@@ -157,8 +29,10 @@ test('[DOCUMENT_FLOW]: add settings', async ({ page }) => {
   await page.getByLabel('Require account').getByText('Require account').click();
   await expect(page.getByTestId('documentAccessSelectValue')).toContainText('Require account');
 
-  // Action auth should NOT be visible.
-  await expect(page.getByTestId('documentActionSelectValue')).not.toBeVisible();
+  // Set action auth.
+  await page.getByTestId('documentActionSelectValue').click();
+  await page.getByLabel('Require account').getByText('Require account').click();
+  await expect(page.getByTestId('documentActionSelectValue')).toContainText('Require account');
 
   // Save the settings by going to the next step.
   await page.getByRole('button', { name: 'Continue' }).click();

packages/app-tests/e2e/document-flow/signers-step.spec.ts

@@ -1,67 +1,12 @@
 import { expect, test } from '@playwright/test';
 
 import { seedBlankDocument } from '@documenso/prisma/seed/documents';
-import { seedUserSubscription } from '@documenso/prisma/seed/subscriptions';
 import { seedUser, unseedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin } from '../fixtures/authentication';
 
 test.describe.configure({ mode: 'parallel' });
 
-test.describe('[EE_ONLY]', () => {
-  const enterprisePriceId = process.env.NEXT_PUBLIC_STRIPE_ENTERPRISE_PLAN_MONTHLY_PRICE_ID || '';
-
-  test.beforeEach(() => {
-    test.skip(
-      process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED !== 'true' || !enterprisePriceId,
-      'Billing required for this test',
-    );
-  });
-
-  test('[DOCUMENT_FLOW] add EE settings', async ({ page }) => {
-    const user = await seedUser();
-
-    await seedUserSubscription({
-      userId: user.id,
-      priceId: enterprisePriceId,
-    });
-
-    const document = await seedBlankDocument(user);
-
-    await apiSignin({
-      page,
-      email: user.email,
-      redirectPath: `/documents/${document.id}/edit`,
-    });
-
-    // Save the settings by going to the next step.
-    await page.getByRole('button', { name: 'Continue' }).click();
-    await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-
-    // Add 2 signers.
-    await page.getByPlaceholder('Email').fill('recipient1@documenso.com');
-    await page.getByPlaceholder('Name').fill('Recipient 1');
-    await page.getByRole('button', { name: 'Add Signer' }).click();
-    await page
-      .getByRole('textbox', { name: 'Email', exact: true })
-      .fill('recipient2@documenso.com');
-    await page.getByRole('textbox', { name: 'Name', exact: true }).fill('Recipient 2');
-
-    // Display advanced settings.
-    await page.getByLabel('Show advanced settings').click();
-
-    // Navigate to the next step and back.
-    await page.getByRole('button', { name: 'Continue' }).click();
-    await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
-    await page.getByRole('button', { name: 'Go Back' }).click();
-    await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-
-    // Todo: Fix stepper component back issue before finishing test.
-
-    await unseedUser(user.id);
-  });
-});
-
 // Note: Not complete yet due to issue with back button.
 test('[DOCUMENT_FLOW]: add signers', async ({ page }) => {
   const user = await seedUser();
@@ -84,8 +29,8 @@ test('[DOCUMENT_FLOW]: add signers', async ({ page }) => {
   await page.getByRole('textbox', { name: 'Email', exact: true }).fill('recipient2@documenso.com');
   await page.getByRole('textbox', { name: 'Name', exact: true }).fill('Recipient 2');
 
-  // Advanced settings should not be visible for non EE users.
-  await expect(page.getByLabel('Show advanced settings')).toBeHidden();
+  // Display advanced settings.
+  await page.getByLabel('Show advanced settings').click();
 
   // Navigate to the next step and back.
   await page.getByRole('button', { name: 'Continue' }).click();

packages/app-tests/e2e/document-flow/stepper-component.spec.ts

@@ -1,335 +0,0 @@
-import { expect, test } from '@playwright/test';
-import path from 'node:path';
-
-import { getRecipientByEmail } from '@documenso/lib/server-only/recipient/get-recipient-by-email';
-import { prisma } from '@documenso/prisma';
-import { DocumentStatus } from '@documenso/prisma/client';
-import { seedBlankDocument } from '@documenso/prisma/seed/documents';
-import { seedUser, unseedUser } from '@documenso/prisma/seed/users';
-
-import { apiSignin } from '../fixtures/authentication';
-
-// Can't use the function in server-only/document due to it indirectly using
-// require imports.
-const getDocumentByToken = async (token: string) => {
-  return await prisma.document.findFirstOrThrow({
-    where: {
-      Recipient: {
-        some: {
-          token,
-        },
-      },
-    },
-  });
-};
-
-test('[DOCUMENT_FLOW]: should be able to upload a PDF document', async ({ page }) => {
-  const user = await seedUser();
-
-  await apiSignin({
-    page,
-    email: user.email,
-  });
-
-  // Upload document.
-  const [fileChooser] = await Promise.all([
-    page.waitForEvent('filechooser'),
-    page.locator('input[type=file]').evaluate((e) => {
-      if (e instanceof HTMLInputElement) {
-        e.click();
-      }
-    }),
-  ]);
-
-  await fileChooser.setFiles(path.join(__dirname, '../../../../assets/example.pdf'));
-
-  // Wait to be redirected to the edit page.
-  await page.waitForURL(/\/documents\/\d+/);
-});
-
-test('[DOCUMENT_FLOW]: should be able to create a document', async ({ page }) => {
-  const user = await seedUser();
-  const document = await seedBlankDocument(user);
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: `/documents/${document.id}/edit`,
-  });
-
-  const documentTitle = `example-${Date.now()}.pdf`;
-
-  // Set general settings
-  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
-
-  await page.getByLabel('Title').fill(documentTitle);
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add signers
-  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-
-  await page.getByLabel('Email*').fill('user1@example.com');
-  await page.getByLabel('Name').fill('User 1');
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add fields
-  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
-
-  await page.getByRole('button', { name: 'User 1 Signature' }).click();
-  await page.locator('canvas').click({
-    position: {
-      x: 100,
-      y: 100,
-    },
-  });
-
-  await page.getByRole('button', { name: 'Email Email' }).click();
-  await page.locator('canvas').click({
-    position: {
-      x: 100,
-      y: 200,
-    },
-  });
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add subject and send
-  await expect(page.getByRole('heading', { name: 'Add Subject' })).toBeVisible();
-  await page.getByRole('button', { name: 'Send' }).click();
-
-  await page.waitForURL('/documents');
-
-  // Assert document was created
-  await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
-
-  await unseedUser(user.id);
-});
-
-test('[DOCUMENT_FLOW]: should be able to create a document with multiple recipients', async ({
-  page,
-}) => {
-  const user = await seedUser();
-  const document = await seedBlankDocument(user);
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: `/documents/${document.id}/edit`,
-  });
-
-  const documentTitle = `example-${Date.now()}.pdf`;
-
-  // Set title
-  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
-
-  await page.getByLabel('Title').fill(documentTitle);
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add signers
-  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-
-  // Add 2 signers.
-  await page.getByPlaceholder('Email').fill('user1@example.com');
-  await page.getByPlaceholder('Name').fill('User 1');
-  await page.getByRole('button', { name: 'Add Signer' }).click();
-  await page.getByRole('textbox', { name: 'Email', exact: true }).fill('user2@example.com');
-  await page.getByRole('textbox', { name: 'Name', exact: true }).fill('User 2');
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add fields
-  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
-
-  await page.getByRole('button', { name: 'User 1 Signature' }).click();
-  await page.locator('canvas').click({
-    position: {
-      x: 100,
-      y: 100,
-    },
-  });
-
-  await page.getByRole('button', { name: 'Email Email' }).click();
-  await page.locator('canvas').click({
-    position: {
-      x: 100,
-      y: 200,
-    },
-  });
-
-  await page.getByText('User 1 (user1@example.com)').click();
-  await page.getByText('User 2 (user2@example.com)').click();
-
-  await page.getByRole('button', { name: 'User 2 Signature' }).click();
-  await page.locator('canvas').click({
-    position: {
-      x: 500,
-      y: 100,
-    },
-  });
-
-  await page.getByRole('button', { name: 'Email Email' }).click();
-  await page.locator('canvas').click({
-    position: {
-      x: 500,
-      y: 200,
-    },
-  });
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add subject and send
-  await expect(page.getByRole('heading', { name: 'Add Subject' })).toBeVisible();
-  await page.getByRole('button', { name: 'Send' }).click();
-
-  await page.waitForURL('/documents');
-
-  // Assert document was created
-  await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
-
-  await unseedUser(user.id);
-});
-
-test('[DOCUMENT_FLOW]: should be able to create, send and sign a document', async ({ page }) => {
-  const user = await seedUser();
-  const document = await seedBlankDocument(user);
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: `/documents/${document.id}/edit`,
-  });
-
-  const documentTitle = `example-${Date.now()}.pdf`;
-
-  // Set title
-  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
-
-  await page.getByLabel('Title').fill(documentTitle);
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add signers
-  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-
-  await page.getByPlaceholder('Email').fill('user1@example.com');
-  await page.getByPlaceholder('Name').fill('User 1');
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add fields
-  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add subject and send
-  await expect(page.getByRole('heading', { name: 'Add Subject' })).toBeVisible();
-  await page.getByRole('button', { name: 'Send' }).click();
-
-  await page.waitForURL('/documents');
-
-  // Assert document was created
-  await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
-  await page.getByRole('link', { name: documentTitle }).click();
-  await page.waitForURL(/\/documents\/\d+/);
-
-  const url = page.url().split('/');
-  const documentId = url[url.length - 1];
-
-  const { token } = await getRecipientByEmail({
-    email: 'user1@example.com',
-    documentId: Number(documentId),
-  });
-
-  await page.goto(`/sign/${token}`);
-  await page.waitForURL(`/sign/${token}`);
-
-  // Check if document has been viewed
-  const { status } = await getDocumentByToken(token);
-  expect(status).toBe(DocumentStatus.PENDING);
-
-  await page.getByRole('button', { name: 'Complete' }).click();
-  await expect(page.getByRole('dialog').getByText('Complete Signing').first()).toBeVisible();
-  await page.getByRole('button', { name: 'Sign' }).click();
-
-  await page.waitForURL(`/sign/${token}/complete`);
-  await expect(page.getByText('You have signed')).toBeVisible();
-
-  // Check if document has been signed
-  const { status: completedStatus } = await getDocumentByToken(token);
-  expect(completedStatus).toBe(DocumentStatus.COMPLETED);
-
-  await unseedUser(user.id);
-});
-
-test('[DOCUMENT_FLOW]: should be able to create, send with redirect url, sign a document and redirect to redirect url', async ({
-  page,
-}) => {
-  const user = await seedUser();
-  const document = await seedBlankDocument(user);
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: `/documents/${document.id}/edit`,
-  });
-
-  const documentTitle = `example-${Date.now()}.pdf`;
-
-  // Set title & advanced redirect
-  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
-  await page.getByLabel('Title').fill(documentTitle);
-  await page.getByRole('button', { name: 'Advanced Options' }).click();
-  await page.getByLabel('Redirect URL').fill('https://documenso.com');
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add signers
-  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-
-  await page.getByPlaceholder('Email').fill('user1@example.com');
-  await page.getByPlaceholder('Name').fill('User 1');
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  // Add fields
-  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
-  await page.getByRole('button', { name: 'Continue' }).click();
-
-  await page.getByRole('button', { name: 'Send' }).click();
-
-  await page.waitForURL('/documents');
-
-  // Assert document was created
-  await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
-  await page.getByRole('link', { name: documentTitle }).click();
-  await page.waitForURL(/\/documents\/\d+/);
-
-  const url = page.url().split('/');
-  const documentId = url[url.length - 1];
-
-  const { token } = await getRecipientByEmail({
-    email: 'user1@example.com',
-    documentId: Number(documentId),
-  });
-
-  await page.goto(`/sign/${token}`);
-  await page.waitForURL(`/sign/${token}`);
-
-  // Check if document has been viewed
-  const { status } = await getDocumentByToken(token);
-  expect(status).toBe(DocumentStatus.PENDING);
-
-  await page.getByRole('button', { name: 'Complete' }).click();
-  await expect(page.getByRole('dialog').getByText('Complete Signing').first()).toBeVisible();
-  await page.getByRole('button', { name: 'Sign' }).click();
-
-  await page.waitForURL('https://documenso.com');
-
-  // Check if document has been signed
-  const { status: completedStatus } = await getDocumentByToken(token);
-  expect(completedStatus).toBe(DocumentStatus.COMPLETED);
-
-  await unseedUser(user.id);
-});

packages/app-tests/e2e/documents/delete-documents.spec.ts

@@ -1,172 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import {
-  seedCompletedDocument,
-  seedDraftDocument,
-  seedPendingDocument,
-} from '@documenso/prisma/seed/documents';
-import { seedUser } from '@documenso/prisma/seed/users';
-
-import { apiSignin, apiSignout } from '../fixtures/authentication';
-
-test.describe.configure({ mode: 'serial' });
-
-const seedDeleteDocumentsTestRequirements = async () => {
-  const [sender, recipientA, recipientB] = await Promise.all([seedUser(), seedUser(), seedUser()]);
-
-  const [draftDocument, pendingDocument, completedDocument] = await Promise.all([
-    seedDraftDocument(sender, [recipientA, recipientB], {
-      createDocumentOptions: { title: 'Document 1 - Draft' },
-    }),
-    seedPendingDocument(sender, [recipientA, recipientB], {
-      createDocumentOptions: { title: 'Document 1 - Pending' },
-    }),
-    seedCompletedDocument(sender, [recipientA, recipientB], {
-      createDocumentOptions: { title: 'Document 1 - Completed' },
-    }),
-  ]);
-
-  return {
-    sender,
-    recipients: [recipientA, recipientB],
-    draftDocument,
-    pendingDocument,
-    completedDocument,
-  };
-};
-
-test('[DOCUMENTS]: seeded documents should be visible', async ({ page }) => {
-  const { sender, recipients } = await seedDeleteDocumentsTestRequirements();
-
-  await apiSignin({
-    page,
-    email: sender.email,
-  });
-
-  await expect(page.getByRole('link', { name: 'Document 1 - Completed' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Document 1 - Draft' })).toBeVisible();
-
-  await apiSignout({ page });
-
-  for (const recipient of recipients) {
-    await apiSignin({
-      page,
-      email: recipient.email,
-    });
-
-    await expect(page.getByRole('link', { name: 'Document 1 - Completed' })).toBeVisible();
-    await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).toBeVisible();
-
-    await expect(page.getByRole('link', { name: 'Document 1 - Draft' })).not.toBeVisible();
-
-    await apiSignout({ page });
-  }
-});
-
-test('[DOCUMENTS]: deleting a completed document should not remove it from recipients', async ({
-  page,
-}) => {
-  const { sender, recipients } = await seedDeleteDocumentsTestRequirements();
-
-  await apiSignin({
-    page,
-    email: sender.email,
-  });
-
-  // open actions menu
-  await page
-    .locator('tr', { hasText: 'Document 1 - Completed' })
-    .getByRole('cell', { name: 'Download' })
-    .getByRole('button')
-    .nth(1)
-    .click();
-
-  // delete document
-  await page.getByRole('menuitem', { name: 'Delete' }).click();
-  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
-  await page.getByRole('button', { name: 'Delete' }).click();
-
-  await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).not.toBeVisible();
-
-  await apiSignout({ page });
-
-  for (const recipient of recipients) {
-    await apiSignin({
-      page,
-      email: recipient.email,
-    });
-
-    await expect(page.getByRole('link', { name: 'Document 1 - Completed' })).toBeVisible();
-    await page.getByRole('link', { name: 'Document 1 - Completed' }).click();
-    await expect(page.getByText('Everyone has signed').nth(0)).toBeVisible();
-
-    await apiSignout({ page });
-  }
-});
-
-test('[DOCUMENTS]: deleting a pending document should remove it from recipients', async ({
-  page,
-}) => {
-  const { sender, pendingDocument } = await seedDeleteDocumentsTestRequirements();
-
-  await apiSignin({
-    page,
-    email: sender.email,
-  });
-
-  // open actions menu
-  await page.locator('tr', { hasText: 'Document 1 - Pending' }).getByRole('button').nth(1).click();
-
-  // delete document
-  await page.getByRole('menuitem', { name: 'Delete' }).click();
-  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
-  await page.getByRole('button', { name: 'Delete' }).click();
-
-  await expect(page.getByRole('row', { name: /Document 1 - Pending/ })).not.toBeVisible();
-
-  // signout
-  await apiSignout({ page });
-
-  for (const recipient of pendingDocument.Recipient) {
-    await apiSignin({
-      page,
-      email: recipient.email,
-    });
-
-    await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).not.toBeVisible();
-
-    await page.goto(`/sign/${recipient.token}`);
-    await expect(page.getByText(/document.*cancelled/i).nth(0)).toBeVisible();
-
-    await page.goto('/documents');
-    await page.waitForURL('/documents');
-
-    await apiSignout({ page });
-  }
-});
-
-test('[DOCUMENTS]: deleting a draft document should remove it without additional prompting', async ({
-  page,
-}) => {
-  const { sender } = await seedDeleteDocumentsTestRequirements();
-
-  await apiSignin({
-    page,
-    email: sender.email,
-  });
-
-  // open actions menu
-  await page
-    .locator('tr', { hasText: 'Document 1 - Draft' })
-    .getByRole('cell', { name: 'Edit' })
-    .getByRole('button')
-    .click();
-
-  // delete document
-  await page.getByRole('menuitem', { name: 'Delete' }).click();
-  await expect(page.getByPlaceholder("Type 'delete' to confirm")).not.toBeVisible();
-  await page.getByRole('button', { name: 'Delete' }).click();
-
-  await expect(page.getByRole('row', { name: /Document 1 - Draft/ })).not.toBeVisible();
-});

packages/app-tests/e2e/fixtures/authentication.ts

@@ -13,11 +13,38 @@ type LoginOptions = {
   redirectPath?: string;
 };
 
+export const manualLogin = async ({
+  page,
+  email = 'example@documenso.com',
+  password = 'password',
+  redirectPath,
+}: LoginOptions) => {
+  await page.goto(`${WEBAPP_BASE_URL}/signin`);
+
+  await page.getByLabel('Email').click();
+  await page.getByLabel('Email').fill(email);
+
+  await page.getByLabel('Password', { exact: true }).fill(password);
+  await page.getByLabel('Password', { exact: true }).press('Enter');
+
+  if (redirectPath) {
+    await page.waitForURL(`${WEBAPP_BASE_URL}/documents`);
+    await page.goto(`${WEBAPP_BASE_URL}${redirectPath}`);
+  }
+};
+
+export const manualSignout = async ({ page }: LoginOptions) => {
+  await page.waitForTimeout(1000);
+  await page.getByTestId('menu-switcher').click();
+  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+  await page.waitForURL(`${WEBAPP_BASE_URL}/signin`);
+};
+
 export const apiSignin = async ({
   page,
   email = 'example@documenso.com',
   password = 'password',
-  redirectPath = '/documents',
+  redirectPath = '/',
 }: LoginOptions) => {
   const { request } = page.context();
 
@@ -32,7 +59,9 @@ export const apiSignin = async ({
     },
   });
 
-  await page.goto(`${WEBAPP_BASE_URL}${redirectPath}`);
+  if (redirectPath) {
+    await page.goto(`${WEBAPP_BASE_URL}${redirectPath}`);
+  }
 };
 
 export const apiSignout = async ({ page }: { page: Page }) => {

packages/app-tests/e2e/pr-711-deletion-of-documents.spec.ts

@@ -0,0 +1,159 @@
+import { expect, test } from '@playwright/test';
+
+import { TEST_USERS } from '@documenso/prisma/seed/pr-711-deletion-of-documents';
+
+import { manualLogin, manualSignout } from './fixtures/authentication';
+
+test.describe.configure({ mode: 'serial' });
+
+test('[PR-711]: seeded documents should be visible', async ({ page }) => {
+  const [sender, ...recipients] = TEST_USERS;
+
+  await page.goto('/signin');
+
+  await page.getByLabel('Email').fill(sender.email);
+  await page.getByLabel('Password', { exact: true }).fill(sender.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  await page.waitForURL('/documents');
+
+  await expect(page.getByRole('link', { name: 'Document 1 - Completed' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Document 1 - Draft' })).toBeVisible();
+
+  await manualSignout({ page });
+
+  for (const recipient of recipients) {
+    await page.waitForURL('/signin');
+    await manualLogin({ page, email: recipient.email, password: recipient.password });
+
+    await page.waitForURL('/documents');
+
+    await expect(page.getByRole('link', { name: 'Document 1 - Completed' })).toBeVisible();
+    await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).toBeVisible();
+
+    await expect(page.getByRole('link', { name: 'Document 1 - Draft' })).not.toBeVisible();
+
+    await manualSignout({ page });
+  }
+});
+
+test('[PR-711]: deleting a completed document should not remove it from recipients', async ({
+  page,
+}) => {
+  const [sender, ...recipients] = TEST_USERS;
+
+  await page.goto('/signin');
+
+  // sign in
+  await page.getByLabel('Email').fill(sender.email);
+  await page.getByLabel('Password', { exact: true }).fill(sender.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  await page.waitForURL('/documents');
+
+  // open actions menu
+  await page
+    .locator('tr', { hasText: 'Document 1 - Completed' })
+    .getByRole('cell', { name: 'Download' })
+    .getByRole('button')
+    .nth(1)
+    .click();
+
+  // delete document
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).not.toBeVisible();
+
+  await manualSignout({ page });
+
+  for (const recipient of recipients) {
+    await page.waitForURL('/signin');
+    await page.goto('/signin');
+
+    // sign in
+    await page.getByLabel('Email').fill(recipient.email);
+    await page.getByLabel('Password', { exact: true }).fill(recipient.password);
+    await page.getByRole('button', { name: 'Sign In' }).click();
+
+    await page.waitForURL('/documents');
+
+    await expect(page.getByRole('link', { name: 'Document 1 - Completed' })).toBeVisible();
+
+    await page.goto(`/sign/completed-token-${recipients.indexOf(recipient)}`);
+    await expect(page.getByText('Everyone has signed').nth(0)).toBeVisible();
+
+    await page.goto('/documents');
+    await manualSignout({ page });
+  }
+});
+
+test('[PR-711]: deleting a pending document should remove it from recipients', async ({ page }) => {
+  const [sender, ...recipients] = TEST_USERS;
+
+  for (const recipient of recipients) {
+    await page.goto(`/sign/pending-token-${recipients.indexOf(recipient)}`);
+
+    await expect(page.getByText('Waiting for others to sign').nth(0)).toBeVisible();
+  }
+
+  await page.goto('/signin');
+
+  await manualLogin({ page, email: sender.email, password: sender.password });
+  await page.waitForURL('/documents');
+
+  // open actions menu
+  await page.locator('tr', { hasText: 'Document 1 - Pending' }).getByRole('button').nth(1).click();
+
+  // delete document
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(page.getByRole('row', { name: /Document 1 - Pending/ })).not.toBeVisible();
+
+  // signout
+  await manualSignout({ page });
+
+  for (const recipient of recipients) {
+    await page.waitForURL('/signin');
+
+    await manualLogin({ page, email: recipient.email, password: recipient.password });
+    await page.waitForURL('/documents');
+
+    await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).not.toBeVisible();
+
+    await page.goto(`/sign/pending-token-${recipients.indexOf(recipient)}`);
+    await expect(page.getByText(/document.*cancelled/i).nth(0)).toBeVisible();
+
+    await page.goto('/documents');
+    await page.waitForURL('/documents');
+
+    await manualSignout({ page });
+  }
+});
+
+test('[PR-711]: deleting a draft document should remove it without additional prompting', async ({
+  page,
+}) => {
+  const [sender] = TEST_USERS;
+
+  await manualLogin({ page, email: sender.email, password: sender.password });
+  await page.waitForURL('/documents');
+
+  // open actions menu
+  await page
+    .locator('tr', { hasText: 'Document 1 - Draft' })
+    .getByRole('cell', { name: 'Edit' })
+    .getByRole('button')
+    .click();
+
+  // delete document
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await expect(page.getByPlaceholder("Type 'delete' to confirm")).not.toBeVisible();
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(page.getByRole('row', { name: /Document 1 - Draft/ })).not.toBeVisible();
+});

packages/app-tests/e2e/pr-713-add-document-search-to-command-menu.spec.ts

@@ -0,0 +1,54 @@
+import { expect, test } from '@playwright/test';
+
+import { TEST_USERS } from '@documenso/prisma/seed/pr-713-add-document-search-to-command-menu';
+
+test('[PR-713]: should see sent documents', async ({ page }) => {
+  const [user] = TEST_USERS;
+
+  await page.goto('/signin');
+
+  await page.getByLabel('Email').fill(user.email);
+  await page.getByLabel('Password', { exact: true }).fill(user.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  await page.waitForURL('/documents');
+
+  await page.keyboard.press('Meta+K');
+
+  await page.getByPlaceholder('Type a command or search...').first().fill('sent');
+  await expect(page.getByRole('option', { name: '[713] Document - Sent' })).toBeVisible();
+});
+
+test('[PR-713]: should see received documents', async ({ page }) => {
+  const [user] = TEST_USERS;
+
+  await page.goto('/signin');
+
+  await page.getByLabel('Email').fill(user.email);
+  await page.getByLabel('Password', { exact: true }).fill(user.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  await page.waitForURL('/documents');
+
+  await page.keyboard.press('Meta+K');
+
+  await page.getByPlaceholder('Type a command or search...').first().fill('received');
+  await expect(page.getByRole('option', { name: '[713] Document - Received' })).toBeVisible();
+});
+
+test('[PR-713]: should be able to search by recipient', async ({ page }) => {
+  const [user, recipient] = TEST_USERS;
+
+  await page.goto('/signin');
+
+  await page.getByLabel('Email').fill(user.email);
+  await page.getByLabel('Password', { exact: true }).fill(user.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  await page.waitForURL('/documents');
+
+  await page.keyboard.press('Meta+K');
+
+  await page.getByPlaceholder('Type a command or search...').first().fill(recipient.email);
+  await expect(page.getByRole('option', { name: '[713] Document - Sent' })).toBeVisible();
+});

packages/app-tests/e2e/pr-718-add-stepper-component.spec.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import path from 'node:path';
+
+import { TEST_USER } from '@documenso/prisma/seed/pr-718-add-stepper-component';
+
+test(`[PR-718]: should be able to create a document`, async ({ page }) => {
+  await page.goto('/signin');
+
+  const documentTitle = `example-${Date.now()}.pdf`;
+
+  // Sign in
+  await page.getByLabel('Email').fill(TEST_USER.email);
+  await page.getByLabel('Password', { exact: true }).fill(TEST_USER.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Upload document
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent('filechooser'),
+    page.locator('input[type=file]').evaluate((e) => {
+      if (e instanceof HTMLInputElement) {
+        e.click();
+      }
+    }),
+  ]);
+
+  await fileChooser.setFiles(path.join(__dirname, '../../../assets/example.pdf'));
+
+  // Wait to be redirected to the edit page
+  await page.waitForURL(/\/documents\/\d+/);
+
+  // Set general settings
+  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+  await page.getByLabel('Title').fill(documentTitle);
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add signers
+  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
+
+  await page.getByLabel('Email*').fill('user1@example.com');
+  await page.getByLabel('Name').fill('User 1');
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add fields
+  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'User 1 Signature' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 100,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Email Email' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 200,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add subject and send
+  await expect(page.getByRole('heading', { name: 'Add Subject' })).toBeVisible();
+  await page.getByRole('button', { name: 'Send' }).click();
+
+  await page.waitForURL('/documents');
+
+  // Assert document was created
+  await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
+});

packages/app-tests/e2e/teams/manage-team.spec.ts

@@ -11,11 +11,6 @@ test.describe.configure({ mode: 'parallel' });
 test('[TEAMS]: create team', async ({ page }) => {
   const user = await seedUser();
 
-  test.skip(
-    process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED === 'true',
-    'Test skipped because billing is enabled.',
-  );
-
   await apiSignin({
     page,
     email: user.email,
@@ -31,6 +26,9 @@ test('[TEAMS]: create team', async ({ page }) => {
 
   await page.getByTestId('dialog-create-team-button').waitFor({ state: 'hidden' });
 
+  const isCheckoutRequired = page.url().includes('pending');
+  test.skip(isCheckoutRequired, 'Test skipped because billing is enabled.');
+
   // Goto new team settings page.
   await page.getByRole('row').filter({ hasText: teamId }).getByRole('link').nth(1).click();
 

packages/app-tests/e2e/templates/manage-templates.spec.ts

@@ -108,7 +108,7 @@ test('[TEMPLATES]: delete template', async ({ page }) => {
     await page.getByRole('button', { name: 'Delete' }).click();
     await expect(page.getByText('Template deleted').first()).toBeVisible();
 
-    await page.reload();
+    await page.waitForTimeout(1000);
   }
 
   await unseedTeam(team.url);

packages/app-tests/e2e/test-auth-flow.spec.ts

@@ -2,7 +2,6 @@ import { type Page, expect, test } from '@playwright/test';
 
 import {
   extractUserVerificationToken,
-  seedTestEmail,
   seedUser,
   unseedUser,
   unseedUserByEmail,
@@ -10,9 +9,9 @@ import {
 
 test.use({ storageState: { cookies: [], origins: [] } });
 
-test('[USER] can sign up with email and password', async ({ page }: { page: Page }) => {
+test('user can sign up with email and password', async ({ page }: { page: Page }) => {
   const username = 'Test User';
-  const email = seedTestEmail();
+  const email = `test-user-${Date.now()}@auth-flow.documenso.com`;
   const password = 'Password123#';
 
   await page.goto('/signup');
@@ -31,7 +30,7 @@ test('[USER] can sign up with email and password', async ({ page }: { page: Page
   }
 
   await page.getByRole('button', { name: 'Next', exact: true }).click();
-  await page.getByLabel('Public profile username').fill(Date.now().toString());
+  await page.getByLabel('Public profile username').fill('username-123');
 
   await page.getByRole('button', { name: 'Complete', exact: true }).click();
 
@@ -51,7 +50,7 @@ test('[USER] can sign up with email and password', async ({ page }: { page: Page
   await unseedUserByEmail(email);
 });
 
-test('[USER] can sign in using email and password', async ({ page }: { page: Page }) => {
+test('user can login with user and password', async ({ page }: { page: Page }) => {
   const user = await seedUser();
 
   await page.goto('/signin');

packages/app-tests/e2e/test-delete-user.spec.ts

@@ -4,16 +4,19 @@ import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
 import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
 import { seedUser } from '@documenso/prisma/seed/users';
 
-import { apiSignin } from '../fixtures/authentication';
+import { manualLogin } from './fixtures/authentication';
 
-test('[USER] delete account', async ({ page }) => {
+test('delete user', async ({ page }) => {
   const user = await seedUser();
 
-  await apiSignin({ page, email: user.email, redirectPath: '/settings' });
+  await manualLogin({
+    page,
+    email: user.email,
+    redirectPath: '/settings',
+  });
 
   await page.getByRole('button', { name: 'Delete Account' }).click();
   await page.getByLabel('Confirm Email').fill(user.email);
-
   await expect(page.getByRole('button', { name: 'Confirm Deletion' })).not.toBeDisabled();
   await page.getByRole('button', { name: 'Confirm Deletion' }).click();
 

packages/app-tests/e2e/user/update-name.spec.ts

@@ -1,33 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
-import { seedUser } from '@documenso/prisma/seed/users';
-
-import { apiSignin } from '../fixtures/authentication';
-
-test('[USER] update full name', async ({ page }) => {
-  const user = await seedUser();
-
-  await apiSignin({ page, email: user.email, redirectPath: '/settings/profile' });
-
-  await page.getByLabel('Full Name').fill('John Doe');
-
-  const canvas = page.locator('canvas');
-  const box = await canvas.boundingBox();
-
-  if (box) {
-    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-    await page.mouse.down();
-    await page.mouse.move(box.x + box.width / 4, box.y + box.height / 4);
-    await page.mouse.up();
-  }
-
-  await page.getByRole('button', { name: 'Update profile' }).click();
-
-  // wait for it to finish
-  await expect(page.getByText('Profile updated', { exact: true })).toBeVisible();
-
-  await page.waitForURL('/settings/profile');
-
-  expect((await getUserByEmail({ email: user.email })).name).toEqual('John Doe');
-});

packages/app-tests/package.json

@@ -6,7 +6,6 @@
   "main": "index.js",
   "scripts": {
     "test:dev": "playwright test",
-    "test-ui:dev": "playwright test --ui",
     "test:e2e": "start-server-and-test \"npm run start -w @documenso/web\" http://localhost:3000 \"playwright test\""
   },
   "keywords": [],

packages/app-tests/playwright.config.ts

@@ -1,14 +1,10 @@
 import { defineConfig, devices } from '@playwright/test';
-import dotenv from 'dotenv';
-import path from 'path';
 
-const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
-
-ENV_FILES.forEach((file) => {
-  dotenv.config({
-    path: path.join(__dirname, `../../${file}`),
-  });
-});
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -17,11 +13,12 @@ export default defineConfig({
   testDir: './e2e',
   /* Run tests in files in parallel */
   fullyParallel: true,
-  workers: '50%',
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 1,
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

packages/ee/server-only/util/is-document-enterprise.ts

@@ -1,56 +0,0 @@
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { subscriptionsContainActiveEnterprisePlan } from '@documenso/lib/utils/billing';
-import { prisma } from '@documenso/prisma';
-import type { Subscription } from '@documenso/prisma/client';
-
-export type IsUserEnterpriseOptions = {
-  userId: number;
-  teamId?: number;
-};
-
-/**
- * Whether the user is enterprise, or has permission to use enterprise features on
- * behalf of their team.
- *
- * It is assumed that the provided user is part of the provided team.
- */
-export const isUserEnterprise = async ({
-  userId,
-  teamId,
-}: IsUserEnterpriseOptions): Promise<boolean> => {
-  let subscriptions: Subscription[] = [];
-
-  if (!IS_BILLING_ENABLED()) {
-    return false;
-  }
-
-  if (teamId) {
-    subscriptions = await prisma.team
-      .findFirstOrThrow({
-        where: {
-          id: teamId,
-        },
-        select: {
-          owner: {
-            include: {
-              Subscription: true,
-            },
-          },
-        },
-      })
-      .then((team) => team.owner.Subscription);
-  } else {
-    subscriptions = await prisma.user
-      .findFirstOrThrow({
-        where: {
-          id: userId,
-        },
-        select: {
-          Subscription: true,
-        },
-      })
-      .then((user) => user.Subscription);
-  }
-
-  return subscriptionsContainActiveEnterprisePlan(subscriptions);
-};

packages/email/mailer.ts

@@ -1,4 +1,3 @@
-import type { SendMailOptions } from 'nodemailer';
 import { createTransport } from 'nodemailer';
 
 import { ResendTransport } from '@documenso/nodemailer-resend';
@@ -55,4 +54,3 @@ const getTransport = () => {
 };
 
 export const mailer = getTransport();
-export type MailOptions = SendMailOptions;

packages/email/template-components/template-document-super-delete.tsx

@@ -1,45 +0,0 @@
-import { Section, Text } from '../components';
-import { TemplateDocumentImage } from './template-document-image';
-
-export interface TemplateDocumentDeleteProps {
-  reason: string;
-  documentName: string;
-  assetBaseUrl: string;
-}
-
-export const TemplateDocumentDelete = ({
-  reason,
-  documentName,
-  assetBaseUrl,
-}: TemplateDocumentDeleteProps) => {
-  return (
-    <>
-      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
-
-      <Section>
-        <Text className="text-primary mb-0 mt-6 text-left text-lg font-semibold">
-          Your document has been deleted by an admin!
-        </Text>
-
-        <Text className="mx-auto mb-6 mt-1 text-left text-base text-slate-400">
-          "{documentName}" has been deleted by an admin.
-        </Text>
-
-        <Text className="mx-auto mb-6 mt-1 text-left text-base text-slate-400">
-          This document can not be recovered, if you would like to dispute the reason for future
-          documents please contact support.
-        </Text>
-
-        <Text className="mx-auto mt-1 text-left text-base text-slate-400">
-          The reason provided for deletion is the following:
-        </Text>
-
-        <Text className="mx-auto mb-6 mt-1 text-left text-base italic text-slate-400">
-          {reason}
-        </Text>
-      </Section>
-    </>
-  );
-};
-
-export default TemplateDocumentDelete;

packages/email/templates/document-super-delete.tsx

@@ -1,66 +0,0 @@
-import config from '@documenso/tailwind-config';
-
-import { Body, Container, Head, Hr, Html, Img, Preview, Section, Tailwind } from '../components';
-import {
-  TemplateDocumentDelete,
-  type TemplateDocumentDeleteProps,
-} from '../template-components/template-document-super-delete';
-import { TemplateFooter } from '../template-components/template-footer';
-
-export type DocumentDeleteEmailTemplateProps = Partial<TemplateDocumentDeleteProps>;
-
-export const DocumentSuperDeleteEmailTemplate = ({
-  documentName = 'Open Source Pledge.pdf',
-  assetBaseUrl = 'http://localhost:3002',
-  reason = 'Unknown',
-}: DocumentDeleteEmailTemplateProps) => {
-  const previewText = `An admin has deleted your document "${documentName}".`;
-
-  const getAssetUrl = (path: string) => {
-    return new URL(path, assetBaseUrl).toString();
-  };
-
-  return (
-    <Html>
-      <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto bg-white font-sans">
-          <Section>
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
-              <Section>
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
-
-                <TemplateDocumentDelete
-                  reason={reason}
-                  documentName={documentName}
-                  assetBaseUrl={assetBaseUrl}
-                />
-              </Section>
-            </Container>
-
-            <Hr className="mx-auto mt-12 max-w-xl" />
-
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
-    </Html>
-  );
-};
-
-export default DocumentSuperDeleteEmailTemplate;

packages/eslint-config/index.cjs

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

packages/eslint-config/package.json

@@ -7,14 +7,16 @@
     "clean": "rimraf node_modules"
   },
   "dependencies": {
-    "@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-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": "5.2.2"
   }
 }

packages/lib/constants/date-formats.ts

@@ -13,7 +13,7 @@ export const DATE_FORMATS = [
   {
     key: 'YYYYMMDD',
     label: 'YYYY-MM-DD',
-    value: 'yyyy-MM-dd',
+    value: 'YYYY-MM-DD',
   },
   {
     key: 'DDMMYYYY',

packages/lib/constants/document-auth.ts

@@ -4,21 +4,26 @@ import { DocumentAuth } from '../types/document-auth';
 type DocumentAuthTypeData = {
   key: TDocumentAuth;
   value: string;
+
+  /**
+   * Whether this authentication event will require the user to halt and
+   * redirect.
+   *
+   * Defaults to false.
+   */
+  isAuthRedirectRequired?: boolean;
 };
 
 export const DOCUMENT_AUTH_TYPES: Record<string, DocumentAuthTypeData> = {
   [DocumentAuth.ACCOUNT]: {
     key: DocumentAuth.ACCOUNT,
     value: 'Require account',
+    isAuthRedirectRequired: true,
   },
   [DocumentAuth.PASSKEY]: {
     key: DocumentAuth.PASSKEY,
     value: 'Require passkey',
   },
-  [DocumentAuth.TWO_FACTOR_AUTH]: {
-    key: DocumentAuth.TWO_FACTOR_AUTH,
-    value: 'Require 2FA',
-  },
   [DocumentAuth.EXPLICIT_NONE]: {
     key: DocumentAuth.EXPLICIT_NONE,
     value: 'None (Overrides global settings)',

packages/lib/constants/trpc.ts

@@ -1,25 +0,0 @@
-/**
- * For TRPC useQueries that should not be batched with other queries.
- */
-export const SKIP_QUERY_BATCH_META = {
-  trpc: {
-    context: {
-      skipBatch: true,
-    },
-  },
-};
-
-/**
- * For TRPC useQueries and useMutations to adjust the logic on when query invalidation
- * should occur.
- *
- * When used in:
- * - useQuery: Will not invalidate the given query when a mutation occurs.
- * - useMutation: Will not trigger invalidation on all queries when mutation succeeds.
- *
- */
-export const DO_NOT_INVALIDATE_QUERY_ON_MUTATION = {
-  meta: {
-    doNotInvalidateQueryOnMutation: true,
-  },
-};

packages/lib/next-auth/auth-options.ts

@@ -212,35 +212,36 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
 
         const requestMetadata = extractNextAuthRequestMetadata(req);
 
-        if (!verification?.verified) {
-          await prisma.userSecurityAuditLog.create({
+        // Explicit success state to reduce chances of bugs.
+        if (verification?.verified === true) {
+          await prisma.passkey.update({
+            where: {
+              id: passkey.id,
+            },
             data: {
-              userId: user.id,
-              ipAddress: requestMetadata.ipAddress,
-              userAgent: requestMetadata.userAgent,
-              type: UserSecurityAuditLogType.SIGN_IN_PASSKEY_FAIL,
+              lastUsedAt: new Date(),
+              counter: verification.authenticationInfo.newCounter,
             },
           });
 
-          return null;
+          return {
+            id: Number(user.id),
+            email: user.email,
+            name: user.name,
+            emailVerified: user.emailVerified?.toISOString() ?? null,
+          } satisfies User;
         }
 
-        await prisma.passkey.update({
-          where: {
-            id: passkey.id,
-          },
+        await prisma.userSecurityAuditLog.create({
           data: {
-            lastUsedAt: new Date(),
-            counter: verification.authenticationInfo.newCounter,
+            userId: user.id,
+            ipAddress: requestMetadata.ipAddress,
+            userAgent: requestMetadata.userAgent,
+            type: UserSecurityAuditLogType.SIGN_IN_PASSKEY_FAIL,
           },
         });
 
-        return {
-          id: Number(user.id),
-          email: user.email,
-          name: user.name,
-          emailVerified: user.emailVerified?.toISOString() ?? null,
-        } satisfies User;
+        return null;
       },
     }),
   ],