feat: use multiselect for webhook triggers

.env.example

@@ -22,6 +22,7 @@ NEXT_PRIVATE_OIDC_SKIP_VERIFY=""
 
 # [[URLS]]
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
+NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
 # URL used by the web app to request itself (e.g. local background jobs)
 NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
 

.github/workflows/e2e-tests.yml

@@ -1,7 +1,7 @@
 name: Playwright Tests
 on:
   push:
-    branches: ['main', 'feat/rr7']
+    branches: ['main']
   pull_request:
     branches: ['main']
 jobs:

.gitpod.yml

@@ -5,6 +5,7 @@ tasks:
       cp .env.example .env &&
       set -a; source .env &&
       export NEXT_PUBLIC_WEBAPP_URL="$(gp url 3000)" &&
+      export NEXT_PUBLIC_MARKETING_URL="$(gp url 3001)"
     command: npm run d
 
 ports:

.husky/pre-commit

@@ -4,6 +4,9 @@
 SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
 
+echo "Copying pdf.js"
+npm run copy:pdfjs --workspace apps/**
+
 echo "Copying .well-known/ contents"
 node "$MONOREPO_ROOT/scripts/copy-wellknown.cjs"
 

README.md

@@ -166,6 +166,7 @@ git clone https://github.com/<your-username>/documenso
 
    - NEXTAUTH_SECRET
    - NEXT_PUBLIC_WEBAPP_URL
+   - NEXT_PUBLIC_MARKETING_URL
    - NEXT_PRIVATE_DATABASE_URL
    - NEXT_PRIVATE_DIRECT_DATABASE_URL
    - NEXT_PRIVATE_SMTP_FROM_NAME
@@ -236,6 +237,7 @@ The following environment variables must be set:
 
 - `NEXTAUTH_SECRET`
 - `NEXT_PUBLIC_WEBAPP_URL`
+- `NEXT_PUBLIC_MARKETING_URL`
 - `NEXT_PRIVATE_DATABASE_URL`
 - `NEXT_PRIVATE_DIRECT_DATABASE_URL`
 - `NEXT_PRIVATE_SMTP_FROM_NAME`

apps/documentation/package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start -p 3002",
     "lint:fix": "next lint --fix",
-    "clean": "rimraf .next && rimraf node_modules"
+    "clean": "rimraf .next && rimraf node_modules",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
     "@documenso/assets": "*",

apps/documentation/pages/developers/embedding/index.mdx

@@ -52,9 +52,9 @@ Platform customers have access to advanced styling options to customize the embe
 <EmbedDirectTemplate
   token={token}
   cssVars={{
-    primary: '#0000FF',
-    background: '#F5F5F5',
-    radius: '8px',
+    colorPrimary: '#0000FF',
+    colorBackground: '#F5F5F5',
+    borderRadius: '8px',
   }}
 />
 ```

apps/documentation/pages/developers/embedding/preact.mdx

@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    primary: '#0000FF',
-    background: '#F5F5F5',
-    radius: '8px',
+    colorPrimary: '#0000FF',
+    colorBackground: '#F5F5F5',
+    borderRadius: '8px',
   };
 
   return (

apps/documentation/pages/developers/embedding/react.mdx

@@ -99,9 +99,9 @@ const MyEmbeddingComponent = () => {
       `}
       // CSS Variables
       cssVars={{
-        primary: '#0000FF',
-        background: '#F5F5F5',
-        radius: '8px',
+        colorPrimary: '#0000FF',
+        colorBackground: '#F5F5F5',
+        borderRadius: '8px',
       }}
       // Dark Mode Control
       darkModeDisabled={true}

apps/documentation/pages/developers/embedding/solid.mdx

@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    primary: '#0000FF',
-    background: '#F5F5F5',
-    radius: '8px',
+    colorPrimary: '#0000FF',
+    colorBackground: '#F5F5F5',
+    borderRadius: '8px',
   };
 
   return (

apps/documentation/pages/developers/embedding/svelte.mdx

@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
     }
   `;
   const cssVars = {
-    primary: '#0000FF',
-    background: '#F5F5F5',
-    radius: '8px',
+    colorPrimary: '#0000FF',
+    colorBackground: '#F5F5F5',
+    borderRadius: '8px',
   };
 </script>
 

apps/documentation/pages/developers/embedding/vue.mdx

@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
   }
 `;
   const cssVars = {
-    primary: '#0000FF',
-    background: '#F5F5F5',
-    radius: '8px',
+    colorPrimary: '#0000FF',
+    colorBackground: '#F5F5F5',
+    borderRadius: '8px',
   };
 </script>
 

apps/documentation/pages/developers/local-development/manual.mdx

@@ -34,6 +34,7 @@ Set up the following environment variables in the `.env` file:
 ```bash
 NEXTAUTH_SECRET
 NEXT_PUBLIC_WEBAPP_URL
+NEXT_PUBLIC_MARKETING_URL
 NEXT_PRIVATE_DATABASE_URL
 NEXT_PRIVATE_DIRECT_DATABASE_URL
 NEXT_PRIVATE_SMTP_FROM_NAME

apps/documentation/pages/developers/local-development/translations.mdx

@@ -13,13 +13,35 @@ Documenso uses the following stack to handle translations:
 
 Additional reading can be found in the [Lingui documentation](https://lingui.dev/introduction).
 
+## Requirements
+
+You **must** insert **`setupI18nSSR()`** when creating any of the following files:
+
+- Server layout.tsx
+- Server page.tsx
+- Server loading.tsx
+
+Server meaning it does not have `'use client'` in it.
+
+```tsx
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
+export default function SomePage() {
+  setupI18nSSR(); // Required if there are translations within the page, or nested in components.
+
+  // Rest of code...
+}
+```
+
+Additional information can be found [here.](https://lingui.dev/tutorials/react-rsc#pages-layouts-and-lingui)
+
 ## Quick guide
 
 If you require more in-depth information, please see the [Lingui documentation](https://lingui.dev/introduction).
 
 ### HTML
 
-Wrap all text to translate in **`<Trans></Trans>`** tags exported from **@lingui/react/macro**.
+Wrap all text to translate in **`<Trans></Trans>`** tags exported from **@lingui/macro** (not @lingui/react).
 
 ```html
 <h1>
@@ -42,9 +64,8 @@ For text that is broken into elements, but represent a whole sentence, you must
 ### Constants outside of react components
 
 ```tsx
-import { msg } from '@lingui/core/macro';
+import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
 
 // Wrap text in msg`text to translate` when it's in a constant here, or another file/package.
 export const CONSTANT_WITH_MSG = {
@@ -77,13 +98,31 @@ Lingui provides a Plural component to make it easy. See full documentation [here
 
 Lingui provides a [DateTime instance](https://lingui.dev/ref/core#i18n.date) with the configured locale.
 
+#### Server components
+
+Note that the i18n instance is coming from **setupI18nSSR**.
+
 ```tsx
 import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
 export const SomeComponent = () => {
-  const { i18n } = useLingui();
+  const { i18n } = setupI18nSSR();
 
   return <Trans>The current date is {i18n.date(new Date(), { dateStyle: 'short' })}</Trans>;
 };
 ```
+
+#### Client components
+
+Note that the i18n instance is coming from the **import**.
+
+```tsx
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+export const SomeComponent = () => {
+  return <Trans>The current date is {i18n.date(new Date(), { dateStyle: 'short' })}</Trans>;
+};
+```

apps/documentation/pages/developers/public-api/index.mdx

@@ -21,25 +21,14 @@ Check out the [API V1 documentation](https://app.documenso.com/api/v1/openapi) f
 
 ## API V2 - Beta
 
-<Callout type="warning">API V2 is currently beta, and will be subject to breaking changes</Callout>
+Our new API V2 is currently in Beta. The new API features typed SDKs for TypeScript, Python and Go and example code for many more.
 
-Check out the [API V2 documentation](https://documen.so/api-v2-docs) for details about the API endpoints, request parameters, response formats, and authentication methods.
-
-Our new API V2 supports the following typed SDKs:
-
-- [TypeScript](https://github.com/documenso/sdk-typescript)
-- [Python](https://github.com/documenso/sdk-python)
-- [Go](https://github.com/documenso/sdk-go)
-
-<Callout type="info">
-  For the staging API, please use the following base URL:
-  `https://stg-app.documenso.dev/api/v2-beta/`
+<Callout type="warning">
+  NOW IN BETA: [API V2 Documentation](https://documen.so/api-v2-docs)
 </Callout>
 
 🚀 [V2 Announcement](https://documen.so/sdk-blog)
 
-📖 [Documentation](https://documen.so/api-v2-docs)
-
 💬 [Leave Feedback](https://documen.so/sdk-feedback)
 
 🔔 [Breaking Changes](https://documen.so/sdk-breaking)

apps/documentation/pages/developers/self-hosting/how-to.mdx

@@ -37,6 +37,7 @@ Open the `.env` file and fill in the following variables:
 ```bash
 - NEXTAUTH_SECRET
 - NEXT_PUBLIC_WEBAPP_URL
+- NEXT_PUBLIC_MARKETING_URL
 - NEXT_PRIVATE_DATABASE_URL
 - NEXT_PRIVATE_DIRECT_DATABASE_URL
 - NEXT_PRIVATE_SMTP_FROM_NAME

apps/openpage-api/lib/growth/get-monthly-completed-document.ts

@@ -1,7 +1,7 @@
-import { DocumentStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
+import { DocumentStatus } from '@documenso/prisma/client';
 
 export const getCompletedDocumentsMonthly = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely

apps/openpage-api/package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint:fix": "next lint --fix",
-    "clean": "rimraf .next && rimraf node_modules"
+    "clean": "rimraf .next && rimraf node_modules",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
     "@documenso/prisma": "*",

apps/remix/.bin/build.sh

@@ -1,4 +1,4 @@
-#!/usr/bin/env sh
+#!/usr/bin/env bash
 
 # Exit on error.
 set -eo pipefail

apps/remix/.bin/stripe-dev.sh

@@ -1,77 +0,0 @@
-#!/usr/bin/env bash
-
-# Set Error handling
-set -eu
-
-SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
-WEB_APP_DIR="$SCRIPT_DIR/.."
-
-# Store the original directory
-ORIGINAL_DIR=$(pwd)
-
-# Set up trap to ensure we return to original directory
-trap 'cd "$ORIGINAL_DIR"' EXIT
-
-cd "$WEB_APP_DIR"
-
-# Define env file paths
-ENV_LOCAL_FILE="../../.env.local"
-
-# Function to load environment variable from env files
-load_env_var() {
-  local var_name=$1
-  local var_value=""
-
-  if [ -f "$ENV_LOCAL_FILE" ]; then
-    var_value=$(grep "^$var_name=" "$ENV_LOCAL_FILE" | cut -d '=' -f2)
-  fi
-
-  # Remove quotes if present
-  var_value=$(echo "$var_value" | sed 's/^"\(.*\)"$/\1/' | sed "s/^'\(.*\)'$/\1/")
-
-  echo "$var_value"
-}
-
-NEXT_PUBLIC_FEATURE_BILLING_ENABLED=$(load_env_var "NEXT_PUBLIC_FEATURE_BILLING_ENABLED")
-
-# Check if NEXT_PUBLIC_FEATURE_BILLING_ENABLED is equal to true
-if [ "$NEXT_PUBLIC_FEATURE_BILLING_ENABLED" != "true" ]; then
-  echo "[ERROR]: NEXT_PUBLIC_FEATURE_BILLING_ENABLED must be enabled."
-  exit 1
-fi
-
-# 1. Load NEXT_PRIVATE_STRIPE_API_KEY from env files
-NEXT_PRIVATE_STRIPE_API_KEY=$(load_env_var "NEXT_PRIVATE_STRIPE_API_KEY")
-
-# Check if NEXT_PRIVATE_STRIPE_API_KEY exists
-if [ -z "$NEXT_PRIVATE_STRIPE_API_KEY" ]; then
-  echo "[ERROR]: NEXT_PRIVATE_STRIPE_API_KEY not found in environment files."
-  echo "[ERROR]: Please make sure it's set in $ENV_LOCAL_FILE"
-  exit 1
-fi
-
-# 2. Check if stripe CLI is installed
-if ! command -v stripe &> /dev/null; then
-  echo "[ERROR]: Stripe CLI is not installed or not in PATH."
-  echo "[ERROR]: Please install the Stripe CLI: https://stripe.com/docs/stripe-cli"
-  exit 1
-fi
-
-# 3. Check if NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET env key exists
-NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=$(load_env_var "NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET")
-
-if [ -z "$NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET" ]; then
-  echo "╔═════════════════════════════════════════════════════════════════════╗"
-  echo "║                                                                     ║"
-  echo "║  ! WARNING: NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET MISSING !            ║"
-  echo "║                                                                     ║"
-  echo "║  Copy the webhook signing secret which will appear in the terminal  ║"
-  echo "║  soon into the env file.                                            ║"
-  echo "║                                                                     ║"
-  echo "║  The webhook secret will start with whsec_...                       ║"
-  echo "║                                                                     ║"
-  echo "╚═════════════════════════════════════════════════════════════════════╝"
-fi
-
-echo "[INFO]: Starting Stripe webhook listener..."
-stripe listen --api-key "$NEXT_PRIVATE_STRIPE_API_KEY" --forward-to http://localhost:3000/api/stripe/webhook

apps/remix/app/components/dialogs/assistant-confirmation-dialog.tsx

@@ -1,9 +1,4 @@
-import { useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
 
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -14,208 +9,64 @@ import {
   DialogHeader,
   DialogTitle,
 } 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 { DocumentSigningDisclosure } from '../general/document-signing/document-signing-disclosure';
 
-export type NextSigner = {
-  name: string;
-  email: string;
-};
-
 type ConfirmationDialogProps = {
   isOpen: boolean;
   onClose: () => void;
-  onConfirm: (nextSigner?: NextSigner) => void;
+  onConfirm: () => void;
   hasUninsertedFields: boolean;
   isSubmitting: boolean;
-  allowDictateNextSigner?: boolean;
-  defaultNextSigner?: NextSigner;
 };
 
-const ZNextSignerFormSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
-});
-
-type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
-
 export function AssistantConfirmationDialog({
   isOpen,
   onClose,
   onConfirm,
   hasUninsertedFields,
   isSubmitting,
-  allowDictateNextSigner = false,
-  defaultNextSigner,
 }: ConfirmationDialogProps) {
-  const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
-
-  const form = useForm<TNextSignerFormSchema>({
-    resolver: zodResolver(ZNextSignerFormSchema),
-    defaultValues: {
-      name: defaultNextSigner?.name ?? '',
-      email: defaultNextSigner?.email ?? '',
-    },
-  });
-
   const onOpenChange = () => {
-    if (form.formState.isSubmitting) {
+    if (isSubmitting) {
       return;
     }
 
-    form.reset({
-      name: defaultNextSigner?.name ?? '',
-      email: defaultNextSigner?.email ?? '',
-    });
-
-    setIsEditingNextSigner(false);
     onClose();
   };
 
-  const onFormSubmit = async (data: TNextSignerFormSchema) => {
-    if (allowDictateNextSigner && data.name && data.email) {
-      await onConfirm({
-        name: data.name,
-        email: data.email,
-      });
-    } else {
-      await onConfirm();
-    }
-  };
-
-  const isNextSignerValid = !allowDictateNextSigner || (form.watch('name') && form.watch('email'));
-
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset
-              disabled={form.formState.isSubmitting || isSubmitting}
-              className="border-none p-0"
-            >
         <DialogHeader>
           <DialogTitle>
             <Trans>Complete Document</Trans>
           </DialogTitle>
           <DialogDescription>
             <Trans>
-                    Are you sure you want to complete the document? This action cannot be undone.
-                    Please ensure that you have completed prefilling all relevant fields before
-                    proceeding.
+              Are you sure you want to complete the document? This action cannot be undone. Please
+              ensure that you have completed prefilling all relevant fields before proceeding.
             </Trans>
           </DialogDescription>
         </DialogHeader>
 
-              <div className="mt-4 flex flex-col gap-4">
-                {allowDictateNextSigner && (
-                  <div className="space-y-4">
-                    {!isEditingNextSigner && (
-                      <div>
-                        <p className="text-muted-foreground text-sm">
-                          The next recipient to sign this document will be{' '}
-                          <span className="font-semibold">{form.watch('name')}</span> (
-                          <span className="font-semibold">{form.watch('email')}</span>).
-                        </p>
-
-                        <Button
-                          type="button"
-                          className="mt-2"
-                          variant="outline"
-                          size="sm"
-                          onClick={() => setIsEditingNextSigner((prev) => !prev)}
-                        >
-                          <Trans>Update Recipient</Trans>
-                        </Button>
-                      </div>
-                    )}
-
-                    {isEditingNextSigner && (
-                      <div className="flex flex-col gap-4 md:flex-row">
-                        <FormField
-                          control={form.control}
-                          name="name"
-                          render={({ field }) => (
-                            <FormItem className="flex-1">
-                              <FormLabel>
-                                <Trans>Name</Trans>
-                              </FormLabel>
-                              <FormControl>
-                                <Input
-                                  {...field}
-                                  className="mt-2"
-                                  placeholder="Enter the next signer's name"
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        <FormField
-                          control={form.control}
-                          name="email"
-                          render={({ field }) => (
-                            <FormItem className="flex-1">
-                              <FormLabel>
-                                <Trans>Email</Trans>
-                              </FormLabel>
-                              <FormControl>
-                                <Input
-                                  {...field}
-                                  type="email"
-                                  className="mt-2"
-                                  placeholder="Enter the next signer's email"
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      </div>
-                    )}
-                  </div>
-                )}
-
-                <DocumentSigningDisclosure className="mt-4" />
+        <div className="flex flex-col gap-4">
+          <DocumentSigningDisclosure />
         </div>
 
         <DialogFooter className="mt-4">
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={onClose}
-                  disabled={form.formState.isSubmitting}
-                >
-                  <Trans>Cancel</Trans>
+          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
+            Cancel
           </Button>
           <Button
-                  type="submit"
             variant={hasUninsertedFields ? 'destructive' : 'default'}
-                  disabled={form.formState.isSubmitting || !isNextSignerValid}
-                  loading={form.formState.isSubmitting}
+            onClick={onConfirm}
+            disabled={isSubmitting}
+            loading={isSubmitting}
           >
-                  {form.formState.isSubmitting ? (
-                    <Trans>Submitting...</Trans>
-                  ) : hasUninsertedFields ? (
-                    <Trans>Proceed</Trans>
-                  ) : (
-                    <Trans>Continue</Trans>
-                  )}
+            {isSubmitting ? 'Submitting...' : hasUninsertedFields ? 'Proceed' : 'Continue'}
           </Button>
         </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
       </DialogContent>
     </Dialog>
   );

apps/remix/app/components/dialogs/document-delete-dialog.tsx

@@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
-import { P, match } from 'ts-pattern';
+import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
@@ -146,7 +146,7 @@ export const DocumentDeleteDialog = ({
                   </ul>
                 </AlertDescription>
               ))
-              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED), () => (
+              .with(DocumentStatus.COMPLETED, () => (
                 <AlertDescription>
                   <p>
                     <Trans>By deleting this document, the following will occur:</Trans>

apps/remix/app/components/dialogs/document-duplicate-dialog.tsx

@@ -13,7 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useOptionalCurrentTeam } from '~/providers/team';
@@ -97,7 +97,7 @@ export const DocumentDuplicateDialog = ({
           </div>
         ) : (
           <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <PDFViewer key={document?.id} documentData={documentData} />
+            <LazyPDFViewer key={document?.id} documentData={documentData} />
           </div>
         )}
 

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -30,20 +30,22 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
-
 export type TokenDeleteDialogProps = {
+  teamId?: number;
   token: Pick<ApiToken, 'id' | 'name'>;
   onDelete?: () => void;
   children?: React.ReactNode;
 };
 
-export default function TokenDeleteDialog({ token, onDelete, children }: TokenDeleteDialogProps) {
+export default function TokenDeleteDialog({
+  teamId,
+  token,
+  onDelete,
+  children,
+}: TokenDeleteDialogProps) {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useOptionalCurrentTeam();
-
   const [isOpen, setIsOpen] = useState(false);
 
   const deleteMessage = _(msg`delete ${token.name}`);
@@ -73,7 +75,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
     try {
       await deleteTokenMutation({
         id: token.id,
-        teamId: team?.id,
+        teamId,
       });
 
       toast({

apps/remix/app/components/dialogs/webhook-create-dialog.tsx

@@ -230,13 +230,14 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
               />
 
               <DialogFooter>
+                <div className="flex w-full flex-nowrap gap-4">
                   <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
                     <Trans>Cancel</Trans>
                   </Button>
-
                   <Button type="submit" loading={form.formState.isSubmitting}>
                     <Trans>Create</Trans>
                   </Button>
+                </div>
               </DialogFooter>
             </fieldset>
           </form>

apps/remix/app/components/embed/embed-authentication-required.tsx

@@ -8,17 +8,11 @@ import { BrandingLogo } from '~/components/general/branding-logo';
 export type EmbedAuthenticationRequiredProps = {
   email?: string;
   returnTo: string;
-  isGoogleSSOEnabled?: boolean;
-  isOIDCSSOEnabled?: boolean;
-  oidcProviderLabel?: string;
 };
 
 export const EmbedAuthenticationRequired = ({
   email,
   returnTo,
-  // isGoogleSSOEnabled,
-  // isOIDCSSOEnabled,
-  // oidcProviderLabel,
 }: EmbedAuthenticationRequiredProps) => {
   return (
     <div className="flex min-h-[100dvh] w-full items-center justify-center">
@@ -34,15 +28,7 @@ export const EmbedAuthenticationRequired = ({
           </AlertDescription>
         </Alert>
 
-        <SignInForm
-          // Embed currently not supported.
-          // isGoogleSSOEnabled={isGoogleSSOEnabled}
-          // isOIDCSSOEnabled={isOIDCSSOEnabled}
-          // oidcProviderLabel={oidcProviderLabel}
-          className="mt-4"
-          initialEmail={email}
-          returnTo={returnTo}
-        />
+        <SignInForm className="mt-4" initialEmail={email} returnTo={returnTo} />
       </div>
     </div>
   );

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -13,10 +13,6 @@ import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn'
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import {
-  isFieldUnsignedAndRequired,
-  isRequiredField,
-} from '@documenso/lib/utils/advanced-fields-helpers';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import { trpc } from '@documenso/trpc/react';
 import type {
@@ -29,7 +25,7 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -51,7 +47,7 @@ export type EmbedDirectTemplateClientPageProps = {
   fields: Field[];
   metadata?: DocumentMeta | TemplateMeta | null;
   hidePoweredBy?: boolean;
-  allowWhiteLabelling?: boolean;
+  isPlatformOrEnterprise?: boolean;
 };
 
 export const EmbedDirectTemplateClientPage = ({
@@ -62,7 +58,7 @@ export const EmbedDirectTemplateClientPage = ({
   fields,
   metadata,
   hidePoweredBy = false,
-  allowWhiteLabelling = false,
+  isPlatformOrEnterprise = false,
 }: EmbedDirectTemplateClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -96,7 +92,7 @@ export const EmbedDirectTemplateClientPage = ({
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
 
   const [pendingFields, _completedFields] = [
-    localFields.filter((field) => isFieldUnsignedAndRequired(field)),
+    localFields.filter((field) => !field.inserted),
     localFields.filter((field) => field.inserted),
   ];
 
@@ -114,7 +110,7 @@ export const EmbedDirectTemplateClientPage = ({
 
         const newField: DirectTemplateLocalField = structuredClone({
           ...field,
-          customText: payload.value ?? '',
+          customText: payload.value,
           inserted: true,
           signedValue: payload,
         });
@@ -125,10 +121,8 @@ export const EmbedDirectTemplateClientPage = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64:
-              payload.value && payload.value.startsWith('data:') ? payload.value : null,
-            typedSignature:
-              payload.value && !payload.value.startsWith('data:') ? payload.value : null,
+            signatureImageAsBase64: payload.value.startsWith('data:') ? payload.value : null,
+            typedSignature: payload.value.startsWith('data:') ? null : payload.value,
           } satisfies Signature;
         }
 
@@ -186,7 +180,7 @@ export const EmbedDirectTemplateClientPage = ({
   };
 
   const onNextFieldClick = () => {
-    validateFieldsInserted(pendingFields);
+    validateFieldsInserted(localFields);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -198,7 +192,7 @@ export const EmbedDirectTemplateClientPage = ({
         return;
       }
 
-      const valid = validateFieldsInserted(pendingFields);
+      const valid = validateFieldsInserted(localFields);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -211,6 +205,12 @@ export const EmbedDirectTemplateClientPage = ({
         directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
       }
 
+      localFields.forEach((field) => {
+        if (!field.signedValue) {
+          throw new Error('Invalid configuration');
+        }
+      });
+
       const {
         documentId,
         token: documentToken,
@@ -221,11 +221,13 @@ export const EmbedDirectTemplateClientPage = ({
         directRecipientName: fullName,
         directRecipientEmail: email,
         templateUpdatedAt: updatedAt,
-        signedFieldValues: localFields
-          .filter((field) => {
-            return field.signedValue && (isRequiredField(field) || field.inserted);
-          })
-          .map((field) => field.signedValue!),
+        signedFieldValues: localFields.map((field) => {
+          if (!field.signedValue) {
+            throw new Error('Invalid configuration');
+          }
+
+          return field.signedValue;
+        }),
       });
 
       if (window.parent) {
@@ -284,7 +286,7 @@ export const EmbedDirectTemplateClientPage = ({
         document.documentElement.classList.add('dark-mode-disabled');
       }
 
-      if (allowWhiteLabelling) {
+      if (isPlatformOrEnterprise) {
         injectCss({
           css: data.css,
           cssVars: data.cssVars,
@@ -336,7 +338,7 @@ export const EmbedDirectTemplateClientPage = ({
       <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
         {/* Viewer */}
         <div className="flex-1">
-          <PDFViewer
+          <LazyPDFViewer
             documentData={documentData}
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
@@ -345,7 +347,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Widget */}
         <div
           key={isExpanded ? 'expanded' : 'collapsed'}
-          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
           <div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">
@@ -413,7 +415,6 @@ export const EmbedDirectTemplateClientPage = ({
                   />
                 </div>
 
-                {hasSignatureField && (
                 <div>
                   <Label htmlFor="Signature">
                     <Trans>Signature</Trans>
@@ -448,7 +449,6 @@ export const EmbedDirectTemplateClientPage = ({
                     </div>
                   )}
                 </div>
-                )}
               </div>
             </div>
 

apps/remix/app/components/embed/embed-document-rejected.tsx

@@ -1,33 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { XCircle } from 'lucide-react';
-
-export const EmbedDocumentRejected = () => {
-  return (
-    <div className="embed--DocumentRejected relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
-      <div className="flex flex-col items-center">
-        <div className="flex items-center gap-x-4">
-          <XCircle className="text-destructive h-10 w-10" />
-
-          <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-            <Trans>Document Rejected</Trans>
-          </h2>
-        </div>
-
-        <div className="text-destructive mt-4 flex items-center text-center text-sm">
-          <Trans>You have rejected this document</Trans>
-        </div>
-
-        <p className="text-muted-foreground mt-6 max-w-[60ch] text-center text-sm">
-          <Trans>
-            The document owner has been notified of your decision. They may contact you with further
-            instructions if necessary.
-          </Trans>
-        </p>
-
-        <p className="text-muted-foreground mt-2 max-w-[60ch] text-center text-sm">
-          <Trans>No further action is required from you at this time.</Trans>
-        </p>
-      </div>
-    </div>
-  );
-};

apps/remix/app/components/embed/embed-document-signing-page.tsx

@@ -1,21 +1,14 @@
-import { useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { DocumentMeta, TemplateMeta } from '@prisma/client';
-import {
-  type DocumentData,
-  type Field,
-  FieldType,
-  RecipientRole,
-  SigningStatus,
-} from '@prisma/client';
+import { type DocumentData, type Field, FieldType, RecipientRole } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
@@ -25,7 +18,7 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -36,11 +29,9 @@ import { injectCss } from '~/utils/css-vars';
 import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-schema';
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { DocumentSigningRecipientProvider } from '../general/document-signing/document-signing-recipient-provider';
-import { DocumentSigningRejectDialog } from '../general/document-signing/document-signing-reject-dialog';
 import { EmbedClientLoading } from './embed-client-loading';
 import { EmbedDocumentCompleted } from './embed-document-completed';
 import { EmbedDocumentFields } from './embed-document-fields';
-import { EmbedDocumentRejected } from './embed-document-rejected';
 
 export type EmbedSignDocumentClientPageProps = {
   token: string;
@@ -51,7 +42,7 @@ export type EmbedSignDocumentClientPageProps = {
   metadata?: DocumentMeta | TemplateMeta | null;
   isCompleted?: boolean;
   hidePoweredBy?: boolean;
-  allowWhitelabelling?: boolean;
+  isPlatformOrEnterprise?: boolean;
   allRecipients?: RecipientWithFields[];
 };
 
@@ -64,7 +55,7 @@ export const EmbedSignDocumentClientPage = ({
   metadata,
   isCompleted,
   hidePoweredBy = false,
-  allowWhitelabelling = false,
+  isPlatformOrEnterprise = false,
   allRecipients = [],
 }: EmbedSignDocumentClientPageProps) => {
   const { _ } = useLingui();
@@ -83,9 +74,6 @@ export const EmbedSignDocumentClientPage = ({
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
   const [hasCompletedDocument, setHasCompletedDocument] = useState(isCompleted);
-  const [hasRejectedDocument, setHasRejectedDocument] = useState(
-    recipient.signingStatus === SigningStatus.REJECTED,
-  );
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(
     allRecipients.length > 0 ? allRecipients[0].id : null,
   );
@@ -94,34 +82,25 @@ export const EmbedSignDocumentClientPage = ({
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
 
-  const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
-
   const selectedSigner = allRecipients.find((r) => r.id === selectedSignerId);
   const isAssistantMode = recipient.role === RecipientRole.ASSISTANT;
 
   const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
 
   const [pendingFields, _completedFields] = [
-    fields.filter(
-      (field) => field.recipientId === recipient.id && isFieldUnsignedAndRequired(field),
-    ),
+    fields.filter((field) => field.recipientId === recipient.id && !field.inserted),
     fields.filter((field) => field.inserted),
   ];
 
   const { mutateAsync: completeDocumentWithToken, isPending: isSubmitting } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
-  const fieldsRequiringValidation = useMemo(
-    () => fields.filter(isFieldUnsignedAndRequired),
-    [fields],
-  );
-
   const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
 
   const assistantSignersId = useId();
 
   const onNextFieldClick = () => {
-    validateFieldsInserted(fieldsRequiringValidation);
+    validateFieldsInserted(fields);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -133,7 +112,7 @@ export const EmbedSignDocumentClientPage = ({
         return;
       }
 
-      const valid = validateFieldsInserted(fieldsRequiringValidation);
+      const valid = validateFieldsInserted(fields);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -181,25 +160,6 @@ export const EmbedSignDocumentClientPage = ({
     }
   };
 
-  const onDocumentRejected = (reason: string) => {
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'document-rejected',
-          data: {
-            token,
-            documentId,
-            recipientId: recipient.id,
-            reason,
-          },
-        },
-        '*',
-      );
-    }
-
-    setHasRejectedDocument(true);
-  };
-
   useLayoutEffect(() => {
     const hash = window.location.hash.slice(1);
 
@@ -213,13 +173,12 @@ export const EmbedSignDocumentClientPage = ({
       // Since a recipient can be provided a name we can lock it without requiring
       // a to be provided by the parent application, unlike direct templates.
       setIsNameLocked(!!data.lockName);
-      setAllowDocumentRejection(!!data.allowDocumentRejection);
 
       if (data.darkModeDisabled) {
         document.documentElement.classList.add('dark-mode-disabled');
       }
 
-      if (allowWhitelabelling) {
+      if (isPlatformOrEnterprise) {
         injectCss({
           css: data.css,
           cssVars: data.cssVars,
@@ -248,10 +207,6 @@ export const EmbedSignDocumentClientPage = ({
     }
   }, [hasFinishedInit, hasDocumentLoaded]);
 
-  if (hasRejectedDocument) {
-    return <EmbedDocumentRejected />;
-  }
-
   if (hasCompletedDocument) {
     return (
       <EmbedDocumentCompleted
@@ -273,20 +228,10 @@ export const EmbedSignDocumentClientPage = ({
       <div className="embed--Root relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
         {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
 
-        {allowDocumentRejection && (
-          <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
-            <DocumentSigningRejectDialog
-              document={{ id: documentId }}
-              token={token}
-              onRejected={onDocumentRejected}
-            />
-          </div>
-        )}
-
         <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
           {/* Viewer */}
           <div className="embed--DocumentViewer flex-1">
-            <PDFViewer
+            <LazyPDFViewer
               documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
@@ -295,7 +240,7 @@ export const EmbedSignDocumentClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
             <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
@@ -426,7 +371,6 @@ export const EmbedSignDocumentClientPage = ({
                         />
                       </div>
 
-                      {hasSignatureField && (
                       <div>
                         <Label htmlFor="Signature">
                           <Trans>Signature</Trans>
@@ -461,7 +405,6 @@ export const EmbedSignDocumentClientPage = ({
                           </div>
                         )}
                       </div>
-                      )}
                     </>
                   )}
                 </div>
@@ -476,7 +419,7 @@ export const EmbedSignDocumentClientPage = ({
                   </Button>
                 ) : (
                   <Button
-                    className={allowDocumentRejection ? 'col-start-2' : 'col-span-2'}
+                    className="col-start-2"
                     disabled={
                       isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
                     }

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

@@ -6,10 +6,10 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { flushSync } from 'react-dom';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -42,7 +42,7 @@ export type TDisable2FAForm = z.infer<typeof ZDisable2FAForm>;
 export const DisableAuthenticatorAppDialog = () => {
   const { _ } = useLingui();
   const { toast } = useToast();
-  const { refreshSession } = useSession();
+  const { revalidate } = useRevalidator();
 
   const [isOpen, setIsOpen] = useState(false);
   const [twoFactorDisableMethod, setTwoFactorDisableMethod] = useState<'totp' | 'backup'>('totp');
@@ -92,7 +92,7 @@ export const DisableAuthenticatorAppDialog = () => {
         onCloseTwoFactorDisableDialog();
       });
 
-      await refreshSession();
+      await revalidate();
     } catch (_err) {
       toast({
         title: _(msg`Unable to disable two-factor authentication`),

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

@@ -5,12 +5,12 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
 import { downloadFile } from '@documenso/lib/client-only/download-file';
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -48,7 +48,7 @@ export type EnableAuthenticatorAppDialogProps = {
 export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorAppDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-  const { refreshSession } = useSession();
+  const { revalidate } = useRevalidator();
 
   const [isOpen, setIsOpen] = useState(false);
   const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
@@ -74,7 +74,6 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     try {
       const data = await authClient.twoFactor.setup();
-      await refreshSession();
 
       setSetup2FAData(data);
     } catch (err) {
@@ -93,7 +92,6 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
   const onEnable2FAFormSubmit = async ({ token }: TEnable2FAForm) => {
     try {
       const data = await authClient.twoFactor.enable({ code: token });
-      await refreshSession();
 
       setRecoveryCodes(data.recoveryCodes);
       onSuccess?.();
@@ -141,6 +139,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
       setRecoveryCodes(null);
+      void revalidate();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/remix/app/components/forms/avatar-image.tsx

@@ -42,7 +42,7 @@ export type AvatarImageFormProps = {
 };
 
 export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
-  const { user, refreshSession } = useSession();
+  const { user } = useSession();
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
@@ -103,13 +103,13 @@ export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
         teamId: team?.id,
       });
 
-      await refreshSession();
-
       toast({
         title: _(msg`Avatar Updated`),
         description: _(msg`Your avatar has been updated successfully.`),
         duration: 5000,
       });
+
+      void revalidate();
     } catch (err) {
       const error = AppError.parseError(err);
 

apps/remix/app/components/forms/password.tsx

@@ -122,7 +122,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>
-                  <Trans>New Password</Trans>
+                  <Trans>Password</Trans>
                 </FormLabel>
                 <FormControl>
                   <PasswordInput autoComplete="new-password" {...field} />

apps/remix/app/components/forms/profile.tsx

@@ -3,6 +3,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -41,7 +42,8 @@ export type ProfileFormProps = {
 export const ProfileForm = ({ className }: ProfileFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-  const { user, refreshSession } = useSession();
+  const { user } = useSession();
+  const { revalidate } = useRevalidator();
 
   const form = useForm<TProfileFormSchema>({
     values: {
@@ -62,13 +64,13 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
         signature,
       });
 
-      await refreshSession();
-
       toast({
         title: _(msg`Profile updated`),
         description: _(msg`Your profile has been updated successfully.`),
         duration: 5000,
       });
+
+      await revalidate();
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),

apps/remix/app/components/forms/public-profile-claim-dialog.tsx

@@ -0,0 +1,197 @@
+import React, { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type { User } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import profileClaimTeaserImage from '@documenso/assets/images/profile-claim-teaser.png';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} 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 { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { UserProfileSkeleton } from '../general/user-profile-skeleton';
+
+export const ZClaimPublicProfileFormSchema = z.object({
+  url: z
+    .string()
+    .trim()
+    .toLowerCase()
+    .min(1, { message: 'Please enter a valid username.' })
+    .regex(/^[a-z0-9-]+$/, {
+      message: 'Username can only container alphanumeric characters and dashes.',
+    }),
+});
+
+export type TClaimPublicProfileFormSchema = z.infer<typeof ZClaimPublicProfileFormSchema>;
+
+export type ClaimPublicProfileDialogFormProps = {
+  open: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onClaimed?: () => void;
+  user: User;
+};
+
+export const ClaimPublicProfileDialogForm = ({
+  open,
+  onOpenChange,
+  onClaimed,
+  user,
+}: ClaimPublicProfileDialogFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [claimed, setClaimed] = useState(false);
+
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  const form = useForm<TClaimPublicProfileFormSchema>({
+    values: {
+      url: user.url || '',
+    },
+    resolver: zodResolver(ZClaimPublicProfileFormSchema),
+  });
+
+  const { mutateAsync: updatePublicProfile } = trpc.profile.updatePublicProfile.useMutation();
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = async ({ url }: TClaimPublicProfileFormSchema) => {
+    try {
+      await updatePublicProfile({
+        url,
+      });
+
+      setClaimed(true);
+      onClaimed?.();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === 'PROFILE_URL_TAKEN') {
+        form.setError('url', {
+          type: 'manual',
+          message: _(msg`This username is already taken`),
+        });
+      } else if (error.code === 'PREMIUM_PROFILE_URL') {
+        form.setError('url', {
+          type: 'manual',
+          message: error.message,
+        });
+      } else if (error.code !== AppErrorCode.UNKNOWN_ERROR) {
+        toast({
+          title: 'An error occurred',
+          description: error.userMessage ?? error.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: _(msg`An unknown error occurred`),
+          description: _(
+            msg`We encountered an unknown error while attempting to save your details. Please try again later.`,
+          ),
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent position="center" className="max-w-lg overflow-hidden">
+        {!claimed && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="font-semi-bold text-center text-xl">
+                Introducing public profiles!
+              </DialogTitle>
+
+              <DialogDescription className="text-center">
+                Reserve your Documenso public profile username
+              </DialogDescription>
+            </DialogHeader>
+
+            <img src={profileClaimTeaserImage} alt="profile claim teaser" />
+
+            <Form {...form}>
+              <form
+                className={cn(
+                  'to-background -mt-32 flex w-full flex-col bg-gradient-to-b from-transparent to-15% pt-16 md:-mt-44',
+                )}
+                onSubmit={form.handleSubmit(onFormSubmit)}
+              >
+                <fieldset className="-mt-6 flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+                  <FormField
+                    control={form.control}
+                    name="url"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Public profile username</FormLabel>
+
+                        <FormControl>
+                          <Input type="text" className="mb-2 mt-2" {...field} />
+                        </FormControl>
+
+                        <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">
+                          {baseUrl.host}/u/{field.value || '<username>'}
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </fieldset>
+
+                <div className="mt-4 text-center">
+                  <Button type="submit" loading={isSubmitting}>
+                    Claim your username
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </>
+        )}
+
+        {claimed && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="font-semi-bold text-center text-xl">All set!</DialogTitle>
+
+              <DialogDescription className="text-center">
+                We will let you know as soon as this features is launched
+              </DialogDescription>
+            </DialogHeader>
+
+            <UserProfileSkeleton className="mt-4" user={user} rows={1} />
+
+            <div className="to-background -mt-12 flex w-full flex-col items-center bg-gradient-to-b from-transparent to-15% px-4 pt-8 md:-mt-12">
+              <Button className="w-full" onClick={() => onOpenChange?.(false)}>
+                Can't wait!
+              </Button>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/forms/signup.tsx

@@ -531,27 +531,6 @@ export const SignUpForm = ({
             </div>
           </form>
         </Form>
-        <p className="text-muted-foreground mt-6 text-xs">
-          <Trans>
-            By proceeding, you agree to our{' '}
-            <Link
-              to="https://documen.so/terms"
-              target="_blank"
-              className="text-documenso-700 duration-200 hover:opacity-70"
-            >
-              Terms of Service
-            </Link>{' '}
-            and{' '}
-            <Link
-              to="https://documen.so/privacy"
-              target="_blank"
-              className="text-documenso-700 duration-200 hover:opacity-70"
-            >
-              Privacy Policy
-            </Link>
-            .
-          </Trans>
-        </p>
       </div>
     </div>
   );

apps/remix/app/components/forms/token.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useTransition } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -38,8 +38,6 @@ import {
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
-
 export const EXPIRATION_DATES = {
   ONE_WEEK: msg`7 days`,
   ONE_MONTH: msg`1 month`,
@@ -61,13 +59,14 @@ type NewlyCreatedToken = {
 
 export type ApiTokenFormProps = {
   className?: string;
+  teamId?: number;
   tokens?: Pick<ApiToken, 'id'>[];
 };
 
-export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
-  const [, copy] = useCopyToClipboard();
+export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) => {
+  const [isTransitionPending, startTransition] = useTransition();
 
-  const team = useOptionalCurrentTeam();
+  const [, copy] = useCopyToClipboard();
 
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -114,7 +113,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
   const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenMutationSchema) => {
     try {
       await createTokenMutation({
-        teamId: team?.id,
+        teamId,
         tokenName,
         expirationDate: noExpirationDate ? null : expirationDate,
       });
@@ -239,7 +238,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
               type="submit"
               className="hidden md:inline-flex"
               disabled={!form.formState.isDirty}
-              loading={form.formState.isSubmitting}
+              loading={form.formState.isSubmitting || isTransitionPending}
             >
               <Trans>Create token</Trans>
             </Button>
@@ -248,7 +247,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
               <Button
                 type="submit"
                 disabled={!form.formState.isDirty}
-                loading={form.formState.isSubmitting}
+                loading={form.formState.isSubmitting || isTransitionPending}
               >
                 <Trans>Create token</Trans>
               </Button>

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -76,7 +76,7 @@ export const AppNavDesktop = ({
 
       <Button
         variant="outline"
-        className="text-muted-foreground flex w-full max-w-96 items-center justify-between rounded-lg"
+        className="text-muted-foreground flex w-96 items-center justify-between rounded-lg"
         onClick={() => setIsCommandMenuOpen(true)}
       >
         <div className="flex items-center">

apps/remix/app/components/general/billing-plans.tsx

@@ -1,138 +0,0 @@
-import { useState } from 'react';
-
-import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { AnimatePresence, motion } from 'framer-motion';
-
-import type { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
-import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
-import { toHumanPrice } from '@documenso/lib/universal/stripe/to-human-price';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
-import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-type Interval = keyof PriceIntervals;
-
-const INTERVALS: Interval[] = ['day', 'week', 'month', 'year'];
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-const isInterval = (value: unknown): value is Interval => INTERVALS.includes(value as Interval);
-
-const FRIENDLY_INTERVALS: Record<Interval, MessageDescriptor> = {
-  day: msg`Daily`,
-  week: msg`Weekly`,
-  month: msg`Monthly`,
-  year: msg`Yearly`,
-};
-
-const MotionCard = motion(Card);
-
-export type BillingPlansProps = {
-  prices: PriceIntervals;
-};
-
-export const BillingPlans = ({ prices }: BillingPlansProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const isMounted = useIsMounted();
-
-  const [interval, setInterval] = useState<Interval>('month');
-  const [checkoutSessionPriceId, setCheckoutSessionPriceId] = useState<string | null>(null);
-
-  const { mutateAsync: createCheckoutSession } = trpc.profile.createCheckoutSession.useMutation();
-
-  const onSubscribeClick = async (priceId: string) => {
-    try {
-      setCheckoutSessionPriceId(priceId);
-
-      const url = await createCheckoutSession({ priceId });
-
-      if (!url) {
-        throw new Error('Unable to create session');
-      }
-
-      window.open(url);
-    } catch (_err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while trying to create a checkout session.`),
-        variant: 'destructive',
-      });
-    } finally {
-      setCheckoutSessionPriceId(null);
-    }
-  };
-
-  return (
-    <div>
-      <Tabs value={interval} onValueChange={(value) => isInterval(value) && setInterval(value)}>
-        <TabsList>
-          {INTERVALS.map(
-            (interval) =>
-              prices[interval].length > 0 && (
-                <TabsTrigger key={interval} className="min-w-[150px]" value={interval}>
-                  {_(FRIENDLY_INTERVALS[interval])}
-                </TabsTrigger>
-              ),
-          )}
-        </TabsList>
-      </Tabs>
-
-      <div className="mt-8 grid gap-8 lg:grid-cols-2 2xl:grid-cols-3">
-        <AnimatePresence mode="wait">
-          {prices[interval].map((price) => (
-            <MotionCard
-              key={price.id}
-              initial={{ opacity: isMounted ? 0 : 1, y: isMounted ? 20 : 0 }}
-              animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
-              exit={{ opacity: 0, transition: { duration: 0.3 } }}
-            >
-              <CardContent className="flex h-full flex-col p-6">
-                <CardTitle>{price.product.name}</CardTitle>
-
-                <div className="text-muted-foreground mt-2 text-lg font-medium">
-                  ${toHumanPrice(price.unit_amount ?? 0)} {price.currency.toUpperCase()}{' '}
-                  <span className="text-xs">per {interval}</span>
-                </div>
-
-                <div className="text-muted-foreground mt-1.5 text-sm">
-                  {price.product.description}
-                </div>
-
-                {price.product.features && price.product.features.length > 0 && (
-                  <div className="text-muted-foreground mt-4">
-                    <div className="text-sm font-medium">Includes:</div>
-
-                    <ul className="mt-1 divide-y text-sm">
-                      {price.product.features.map((feature, index) => (
-                        <li key={index} className="py-2">
-                          {feature.name}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )}
-
-                <div className="flex-1" />
-
-                <Button
-                  className="mt-4"
-                  disabled={checkoutSessionPriceId !== null}
-                  loading={checkoutSessionPriceId === price.id}
-                  onClick={() => void onSubscribeClick(price.id)}
-                >
-                  <Trans>Subscribe</Trans>
-                </Button>
-              </CardContent>
-            </MotionCard>
-          ))}
-        </AnimatePresence>
-      </div>
-    </div>
-  );
-};

apps/remix/app/components/general/billing-portal-button.tsx

@@ -1,48 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type BillingPortalButtonProps = {
-  buttonProps?: React.ComponentProps<typeof Button>;
-  children?: React.ReactNode;
-};
-
-export const BillingPortalButton = ({ buttonProps, children }: BillingPortalButtonProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: createBillingPortal, isPending } =
-    trpc.profile.createBillingPortal.useMutation({
-      onSuccess: (sessionUrl) => {
-        window.open(sessionUrl, '_blank');
-      },
-      onError: (err) => {
-        let description = _(
-          msg`We are unable to proceed to the billing portal at this time. Please try again, or contact support.`,
-        );
-
-        if (err.message === 'CUSTOMER_NOT_FOUND') {
-          description = _(
-            msg`You do not currently have a customer record, this should not happen. Please contact support for assistance.`,
-          );
-        }
-
-        toast({
-          title: _(msg`Something went wrong`),
-          description,
-          variant: 'destructive',
-          duration: 10000,
-        });
-      },
-    });
-
-  return (
-    <Button {...buttonProps} onClick={async () => createBillingPortal()} loading={isPending}>
-      {children || <Trans>Manage Subscription</Trans>}
-    </Button>
-  );
-};

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -12,7 +12,7 @@ import { trpc } from '@documenso/trpc/react';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -136,7 +136,7 @@ export const DirectTemplatePageView = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <LazyPDFViewer
             key={template.id}
             documentData={template.templateDocumentData}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Field, Recipient, Signature } from '@prisma/client';
@@ -91,7 +91,7 @@ export const DirectTemplateSigningForm = ({
 
         const tempField: DirectTemplateLocalField = {
           ...field,
-          customText: value.value ?? '',
+          customText: value.value,
           inserted: true,
           signedValue: value,
         };
@@ -102,8 +102,8 @@ export const DirectTemplateSigningForm = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64: value.value?.startsWith('data:') ? value.value : null,
-            typedSignature: value.value && !value.value.startsWith('data:') ? value.value : null,
+            signatureImageAsBase64: value.value.startsWith('data:') ? value.value : null,
+            typedSignature: value.value.startsWith('data:') ? null : value.value,
           } satisfies Signature;
         }
 
@@ -170,55 +170,6 @@ export const DirectTemplateSigningForm = ({
     // Do not reset to false since we do a redirect.
   };
 
-  useEffect(() => {
-    const updatedFields = [...localFields];
-
-    localFields.forEach((field) => {
-      const index = updatedFields.findIndex((f) => f.id === field.id);
-      let value = '';
-
-      match(field.type)
-        .with(FieldType.TEXT, () => {
-          const meta = field.fieldMeta ? ZTextFieldMeta.safeParse(field.fieldMeta) : null;
-
-          if (meta?.success) {
-            value = meta.data.text ?? '';
-          }
-        })
-        .with(FieldType.NUMBER, () => {
-          const meta = field.fieldMeta ? ZNumberFieldMeta.safeParse(field.fieldMeta) : null;
-
-          if (meta?.success) {
-            value = meta.data.value ?? '';
-          }
-        })
-        .with(FieldType.DROPDOWN, () => {
-          const meta = field.fieldMeta ? ZDropdownFieldMeta.safeParse(field.fieldMeta) : null;
-
-          if (meta?.success) {
-            value = meta.data.defaultValue ?? '';
-          }
-        });
-
-      if (value) {
-        const signedValue = {
-          token: directRecipient.token,
-          fieldId: field.id,
-          value,
-        };
-
-        updatedFields[index] = {
-          ...field,
-          customText: value,
-          inserted: true,
-          signedValue,
-        };
-      }
-    });
-
-    setLocalFields(updatedFields);
-  }, []);
-
   return (
     <DocumentSigningRecipientProvider recipient={directRecipient}>
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -45,12 +45,7 @@ export const DocumentSigningCheckboxField = ({
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
-  const parsedFieldMeta = ZCheckboxFieldMeta.parse(
-    field.fieldMeta ?? {
-      type: 'checkbox',
-      values: [{ id: 1, checked: false, value: '' }],
-    },
-  );
+  const parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
 
   const values = parsedFieldMeta.values?.map((item) => ({
     ...item,
@@ -97,10 +92,6 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      if (!isLengthConditionMet) {
-        return;
-      }
-
       const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
@@ -198,30 +189,18 @@ export const DocumentSigningCheckboxField = ({
 
       setCheckedValues(updatedValues);
 
-      const removePayload: TRemovedSignedFieldWithTokenMutationSchema = {
+      await removeSignedFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-      };
+      });
 
-      if (onUnsignField) {
-        await onUnsignField(removePayload);
-      } else {
-        await removeSignedFieldWithToken(removePayload);
-      }
-
-      if (updatedValues.length > 0 && shouldAutoSignField) {
-        const signPayload: TSignFieldWithTokenMutationSchema = {
+      if (updatedValues.length > 0) {
+        await signFieldWithToken({
           token: recipient.token,
           fieldId: field.id,
           value: toCheckboxValue(updatedValues),
           isBase64: true,
-        };
-
-        if (onSignField) {
-          await onSignField(signPayload);
-        } else {
-          await signFieldWithToken(signPayload);
-        }
+        });
       }
     } catch (err) {
       console.error(err);

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -1,12 +1,8 @@
 import { useMemo, useState } from 'react';
 
-import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
 import type { Field } from '@prisma/client';
 import { RecipientRole } from '@prisma/client';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import { z } from 'zod';
 
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { Button } from '@documenso/ui/primitives/button';
@@ -17,15 +13,6 @@ import {
   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 { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
 
@@ -34,22 +21,10 @@ export type DocumentSigningCompleteDialogProps = {
   documentTitle: string;
   fields: Field[];
   fieldsValidated: () => void | Promise<void>;
-  onSignatureComplete: (nextSigner?: { name: string; email: string }) => void | Promise<void>;
+  onSignatureComplete: () => void | Promise<void>;
   role: RecipientRole;
   disabled?: boolean;
-  allowDictateNextSigner?: boolean;
-  defaultNextSigner?: {
-    name: string;
-    email: string;
 };
-};
-
-const ZNextSignerFormSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
-});
-
-type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
 
 export const DocumentSigningCompleteDialog = ({
   isSubmitting,
@@ -59,54 +34,19 @@ export const DocumentSigningCompleteDialog = ({
   onSignatureComplete,
   role,
   disabled = false,
-  allowDictateNextSigner = false,
-  defaultNextSigner,
 }: DocumentSigningCompleteDialogProps) => {
   const [showDialog, setShowDialog] = useState(false);
-  const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
-
-  const form = useForm<TNextSignerFormSchema>({
-    resolver: allowDictateNextSigner ? zodResolver(ZNextSignerFormSchema) : undefined,
-    defaultValues: {
-      name: defaultNextSigner?.name ?? '',
-      email: defaultNextSigner?.email ?? '',
-    },
-  });
 
   const isComplete = useMemo(() => !fieldsContainUnsignedRequiredField(fields), [fields]);
 
   const handleOpenChange = (open: boolean) => {
-    if (form.formState.isSubmitting || !isComplete) {
+    if (isSubmitting || !isComplete) {
       return;
     }
 
-    if (open) {
-      form.reset({
-        name: defaultNextSigner?.name ?? '',
-        email: defaultNextSigner?.email ?? '',
-      });
-    }
-
-    setIsEditingNextSigner(false);
     setShowDialog(open);
   };
 
-  const onFormSubmit = async (data: TNextSignerFormSchema) => {
-    console.log('data', data);
-    console.log('form.formState.errors', form.formState.errors);
-    try {
-      if (allowDictateNextSigner && data.name && data.email) {
-        await onSignatureComplete({ name: data.name, email: data.email });
-      } else {
-        await onSignatureComplete();
-      }
-    } catch (error) {
-      console.error('Error completing signature:', error);
-    }
-  };
-
-  const isNextSignerValid = !allowDictateNextSigner || (form.watch('name') && form.watch('email'));
-
   return (
     <Dialog open={showDialog} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -118,36 +58,21 @@ export const DocumentSigningCompleteDialog = ({
           loading={isSubmitting}
           disabled={disabled}
         >
-          {match({ isComplete, role })
-            .with({ isComplete: false }, () => <Trans>Next field</Trans>)
-            .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
-            .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
-              <Trans>Mark as viewed</Trans>
-            ))
-            .with({ isComplete: true }, () => <Trans>Complete</Trans>)
-            .exhaustive()}
+          {isComplete ? <Trans>Complete</Trans> : <Trans>Next field</Trans>}
         </Button>
       </DialogTrigger>
 
       <DialogContent>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
         <DialogTitle>
           <div className="text-foreground text-xl font-semibold">
-                  {match(role)
-                    .with(RecipientRole.VIEWER, () => <Trans>Complete Viewing</Trans>)
-                    .with(RecipientRole.SIGNER, () => <Trans>Complete Signing</Trans>)
-                    .with(RecipientRole.APPROVER, () => <Trans>Complete Approval</Trans>)
-                    .with(RecipientRole.CC, () => <Trans>Complete Viewing</Trans>)
-                    .with(RecipientRole.ASSISTANT, () => <Trans>Complete Assisting</Trans>)
-                    .exhaustive()}
+            {role === RecipientRole.VIEWER && <Trans>Complete Viewing</Trans>}
+            {role === RecipientRole.SIGNER && <Trans>Complete Signing</Trans>}
+            {role === RecipientRole.APPROVER && <Trans>Complete Approval</Trans>}
           </div>
         </DialogTitle>
 
         <div className="text-muted-foreground max-w-[50ch]">
-                {match(role)
-                  .with(RecipientRole.VIEWER, () => (
+          {role === RecipientRole.VIEWER && (
             <span>
               <Trans>
                 <span className="inline-flex flex-wrap">
@@ -160,8 +85,8 @@ export const DocumentSigningCompleteDialog = ({
                 <br /> Are you sure?
               </Trans>
             </span>
-                  ))
-                  .with(RecipientRole.SIGNER, () => (
+          )}
+          {role === RecipientRole.SIGNER && (
             <span>
               <Trans>
                 <span className="inline-flex flex-wrap">
@@ -174,8 +99,8 @@ export const DocumentSigningCompleteDialog = ({
                 <br /> Are you sure?
               </Trans>
             </span>
-                  ))
-                  .with(RecipientRole.APPROVER, () => (
+          )}
+          {role === RecipientRole.APPROVER && (
             <span>
               <Trans>
                 <span className="inline-flex flex-wrap">
@@ -188,126 +113,37 @@ export const DocumentSigningCompleteDialog = ({
                 <br /> Are you sure?
               </Trans>
             </span>
-                  ))
-                  .otherwise(() => (
-                    <span>
-                      <Trans>
-                        <span className="inline-flex flex-wrap">
-                          You are about to complete viewing "
-                          <span className="inline-block max-w-[11rem] truncate align-baseline">
-                            {documentTitle}
-                          </span>
-                          ".
-                        </span>
-                        <br /> Are you sure?
-                      </Trans>
-                    </span>
-                  ))}
-              </div>
-
-              {allowDictateNextSigner && (
-                <div className="mt-4 flex flex-col gap-4">
-                  {!isEditingNextSigner && (
-                    <div>
-                      <p className="text-muted-foreground text-sm">
-                        The next recipient to sign this document will be{' '}
-                        <span className="font-semibold">{form.watch('name')}</span> (
-                        <span className="font-semibold">{form.watch('email')}</span>).
-                      </p>
-
-                      <Button
-                        type="button"
-                        className="mt-2"
-                        variant="outline"
-                        size="sm"
-                        onClick={() => setIsEditingNextSigner((prev) => !prev)}
-                      >
-                        <Trans>Update Recipient</Trans>
-                      </Button>
-                    </div>
-                  )}
-
-                  {isEditingNextSigner && (
-                    <div className="flex flex-col gap-4 md:flex-row">
-                      <FormField
-                        control={form.control}
-                        name="name"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Name</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                className="mt-2"
-                                placeholder="Enter the next signer's name"
-                              />
-                            </FormControl>
-
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="email"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Email</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                type="email"
-                                className="mt-2"
-                                placeholder="Enter the next signer's email"
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
           )}
         </div>
-              )}
 
         <DocumentSigningDisclosure className="mt-4" />
 
-              <DialogFooter className="mt-4">
+        <DialogFooter>
           <div className="flex w-full flex-1 flex-nowrap gap-4">
             <Button
               type="button"
               className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
               variant="secondary"
-                    onClick={() => setShowDialog(false)}
-                    disabled={form.formState.isSubmitting}
+              onClick={() => {
+                setShowDialog(false);
+              }}
             >
               <Trans>Cancel</Trans>
             </Button>
 
             <Button
-                    type="submit"
+              type="button"
               className="flex-1"
-                    disabled={!isComplete || !isNextSignerValid}
-                    loading={form.formState.isSubmitting}
+              disabled={!isComplete}
+              loading={isSubmitting}
+              onClick={onSignatureComplete}
             >
-                    {match(role)
-                      .with(RecipientRole.VIEWER, () => <Trans>Mark as Viewed</Trans>)
-                      .with(RecipientRole.SIGNER, () => <Trans>Sign</Trans>)
-                      .with(RecipientRole.APPROVER, () => <Trans>Approve</Trans>)
-                      .with(RecipientRole.CC, () => <Trans>Mark as Viewed</Trans>)
-                      .with(RecipientRole.ASSISTANT, () => <Trans>Complete</Trans>)
-                      .exhaustive()}
+              {role === RecipientRole.VIEWER && <Trans>Mark as Viewed</Trans>}
+              {role === RecipientRole.SIGNER && <Trans>Sign</Trans>}
+              {role === RecipientRole.APPROVER && <Trans>Approve</Trans>}
             </Button>
           </div>
         </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
       </DialogContent>
     </Dialog>
   );

apps/remix/app/components/general/document-signing/document-signing-field-container.tsx

@@ -181,23 +181,6 @@ export const DocumentSigningFieldContainer = ({
           </button>
         )}
 
-        {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&
-          field.fieldMeta?.label && (
-            <div
-              className={cn(
-                'absolute -top-16 left-0 right-0 rounded-md p-2 text-center text-xs text-gray-700',
-                {
-                  'bg-foreground/5 border-border border': !field.inserted,
-                },
-                {
-                  'bg-documenso-200 border-primary border': field.inserted,
-                },
-              )}
-            >
-              {field.fieldMeta.label}
-            </div>
-          )}
-
         {children}
       </FieldRootContainer>
     </div>

apps/remix/app/components/general/document-signing/document-signing-form.tsx

@@ -1,13 +1,11 @@
 import { useId, useMemo, useState } from 'react';
 
-import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/client';
 import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
-import { z } from 'zod';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
@@ -27,20 +25,10 @@ import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import {
-  AssistantConfirmationDialog,
-  type NextSigner,
-} from '../../dialogs/assistant-confirmation-dialog';
+import { AssistantConfirmationDialog } from '../../dialogs/assistant-confirmation-dialog';
 import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 
-export const ZSigningFormSchema = z.object({
-  name: z.string().min(1, 'Name is required').optional(),
-  email: z.string().email('Invalid email address').optional(),
-});
-
-export type TSigningFormSchema = z.infer<typeof ZSigningFormSchema>;
-
 export type DocumentSigningFormProps = {
   document: DocumentAndSender;
   recipient: Recipient;
@@ -87,9 +75,7 @@ export const DocumentSigningForm = ({
     },
   });
 
-  const { handleSubmit, formState } = useForm<TSigningFormSchema>({
-    resolver: zodResolver(ZSigningFormSchema),
-  });
+  const { handleSubmit, formState } = useForm();
 
   // Keep the loading state going if successful since the redirect may take some time.
   const isSubmitting = formState.isSubmitting || formState.isSubmitSuccessful;
@@ -114,8 +100,7 @@ export const DocumentSigningForm = ({
     validateFieldsInserted(fieldsRequiringValidation);
   };
 
-  const onFormSubmit = async (data: TSigningFormSchema) => {
-    try {
+  const onFormSubmit = async () => {
     setValidateUninsertedFields(true);
 
     const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
@@ -128,22 +113,7 @@ export const DocumentSigningForm = ({
       return;
     }
 
-      const nextSigner =
-        data.email && data.name
-          ? {
-              email: data.email,
-              name: data.name,
-            }
-          : undefined;
-
-      await completeDocument(undefined, nextSigner);
-    } catch (error) {
-      toast({
-        title: 'Error',
-        description: error instanceof Error ? error.message : 'An error occurred while signing',
-        variant: 'destructive',
-      });
-    }
+    await completeDocument();
   };
 
   const onAssistantFormSubmit = () => {
@@ -154,11 +124,11 @@ export const DocumentSigningForm = ({
     setIsConfirmationDialogOpen(true);
   };
 
-  const handleAssistantConfirmDialogSubmit = async (nextSigner?: NextSigner) => {
+  const handleAssistantConfirmDialogSubmit = async () => {
     setIsAssistantSubmitting(true);
 
     try {
-      await completeDocument(undefined, nextSigner);
+      await completeDocument();
     } catch (err) {
       toast({
         title: 'Error',
@@ -171,18 +141,12 @@ export const DocumentSigningForm = ({
     }
   };
 
-  const completeDocument = async (
-    authOptions?: TRecipientActionAuth,
-    nextSigner?: { email: string; name: string },
-  ) => {
-    const payload = {
+  const completeDocument = async (authOptions?: TRecipientActionAuth) => {
+    await completeDocumentWithToken({
       token: recipient.token,
       documentId: document.id,
       authOptions,
-      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
-    };
-
-    await completeDocumentWithToken(payload);
+    });
 
     analytics.capture('App: Recipient has completed signing', {
       signerId: recipient.id,
@@ -197,31 +161,6 @@ export const DocumentSigningForm = ({
     }
   };
 
-  const nextRecipient = useMemo(() => {
-    if (
-      !document.documentMeta?.signingOrder ||
-      document.documentMeta.signingOrder !== 'SEQUENTIAL'
-    ) {
-      return undefined;
-    }
-
-    const sortedRecipients = allRecipients.sort((a, b) => {
-      // Sort by signingOrder first (nulls last), then by id
-      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
-      if (a.signingOrder === null) return 1;
-      if (b.signingOrder === null) return -1;
-      if (a.signingOrder === b.signingOrder) return a.id - b.id;
-      return a.signingOrder - b.signingOrder;
-    });
-
-    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
-    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
-      ? sortedRecipients[currentIndex + 1]
-      : undefined;
-  }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
-
-  console.log('nextRecipient', nextRecipient);
-
   return (
     <div
       className={cn(
@@ -271,19 +210,12 @@ export const DocumentSigningForm = ({
 
                   <DocumentSigningCompleteDialog
                     isSubmitting={isSubmitting}
+                    onSignatureComplete={handleSubmit(onFormSubmit)}
                     documentTitle={document.title}
                     fields={fields}
                     fieldsValidated={fieldsValidated}
-                    onSignatureComplete={async (nextSigner) => {
-                      await completeDocument(undefined, nextSigner);
-                    }}
                     role={recipient.role}
-                    allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
-                    defaultNextSigner={
-                      nextRecipient
-                        ? { name: nextRecipient.name, email: nextRecipient.email }
-                        : undefined
-                    }
+                    disabled={!isRecipientsTurn}
                   />
                 </div>
               </div>
@@ -374,14 +306,6 @@ export const DocumentSigningForm = ({
                   onClose={() => !isAssistantSubmitting && setIsConfirmationDialogOpen(false)}
                   onConfirm={handleAssistantConfirmDialogSubmit}
                   isSubmitting={isAssistantSubmitting}
-                  allowDictateNextSigner={
-                    nextRecipient && document.documentMeta?.allowDictateNextSigner
-                  }
-                  defaultNextSigner={
-                    nextRecipient
-                      ? { name: nextRecipient.name, email: nextRecipient.email }
-                      : undefined
-                  }
                 />
               </form>
             </>
@@ -389,11 +313,7 @@ export const DocumentSigningForm = ({
             <>
               <form onSubmit={handleSubmit(onFormSubmit)}>
                 <p className="text-muted-foreground mt-2 text-sm">
-                  {recipient.role === RecipientRole.APPROVER && !hasSignatureField ? (
-                    <Trans>Please review the document before approving.</Trans>
-                  ) : (
                   <Trans>Please review the document before signing.</Trans>
-                  )}
                 </p>
 
                 <hr className="border-border mb-8 mt-4" />
@@ -417,7 +337,6 @@ export const DocumentSigningForm = ({
                       />
                     </div>
 
-                    {hasSignatureField && (
                     <div>
                       <Label htmlFor="Signature">
                         <Trans>Signature</Trans>
@@ -442,7 +361,7 @@ export const DocumentSigningForm = ({
                         </CardContent>
                       </Card>
 
-                        {!signatureValid && (
+                      {hasSignatureField && !signatureValid && (
                         <div className="text-destructive mt-2 text-sm">
                           <Trans>
                             Signature is too small. Please provide a more complete signature.
@@ -450,11 +369,9 @@ export const DocumentSigningForm = ({
                         </div>
                       )}
                     </div>
-                    )}
                   </div>
-                </fieldset>
 
-                <div className="mt-6 flex flex-col gap-4 md:flex-row">
+                  <div className="flex flex-col gap-4 md:flex-row">
                     <Button
                       type="button"
                       className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
@@ -467,25 +384,16 @@ export const DocumentSigningForm = ({
                     </Button>
 
                     <DocumentSigningCompleteDialog
-                    isSubmitting={isSubmitting || isAssistantSubmitting}
+                      isSubmitting={isSubmitting}
+                      onSignatureComplete={handleSubmit(onFormSubmit)}
                       documentTitle={document.title}
                       fields={fields}
                       fieldsValidated={fieldsValidated}
-                    disabled={!isRecipientsTurn}
-                    onSignatureComplete={async (nextSigner) => {
-                      await completeDocument(undefined, nextSigner);
-                    }}
                       role={recipient.role}
-                    allowDictateNextSigner={
-                      nextRecipient && document.documentMeta?.allowDictateNextSigner
-                    }
-                    defaultNextSigner={
-                      nextRecipient
-                        ? { name: nextRecipient.name, email: nextRecipient.email }
-                        : undefined
-                    }
+                      disabled={!isRecipientsTurn}
                     />
                   </div>
+                </fieldset>
               </form>
             </>
           )}

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -21,7 +21,7 @@ import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/fie
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
@@ -40,9 +40,9 @@ import { DocumentReadOnlyFields } from '~/components/general/document/document-r
 
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
-export type DocumentSigningPageViewProps = {
-  recipient: RecipientWithFields;
+export type SigningPageViewProps = {
   document: DocumentAndSender;
+  recipient: RecipientWithFields;
   fields: Field[];
   completedFields: CompletedField[];
   isRecipientsTurn: boolean;
@@ -50,13 +50,13 @@ export type DocumentSigningPageViewProps = {
 };
 
 export const DocumentSigningPageView = ({
-  recipient,
   document,
+  recipient,
   fields,
   completedFields,
   isRecipientsTurn,
   allRecipients = [],
-}: DocumentSigningPageViewProps) => {
+}: SigningPageViewProps) => {
   const { documentData, documentMeta } = document;
 
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
@@ -140,7 +140,12 @@ export const DocumentSigningPageView = ({
             gradient
           >
             <CardContent className="p-2">
-              <PDFViewer key={documentData.id} documentData={documentData} document={document} />
+              <LazyPDFViewer
+                key={documentData.id}
+                documentData={documentData}
+                document={document}
+                password={documentMeta?.password}
+              />
             </CardContent>
           </Card>
 

apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx

@@ -31,7 +31,10 @@ import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZRejectDocumentFormSchema = z.object({
-  reason: z.string().max(500, msg`Reason must be less than 500 characters`),
+  reason: z
+    .string()
+    .min(5, msg`Please provide a reason`)
+    .max(500, msg`Reason must be less than 500 characters`),
 });
 
 type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;
@@ -39,14 +42,9 @@ type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;
 export interface DocumentSigningRejectDialogProps {
   document: Pick<Document, 'id'>;
   token: string;
-  onRejected?: (reason: string) => void | Promise<void>;
 }
 
-export function DocumentSigningRejectDialog({
-  document,
-  token,
-  onRejected,
-}: DocumentSigningRejectDialogProps) {
+export function DocumentSigningRejectDialog({ document, token }: DocumentSigningRejectDialogProps) {
   const { toast } = useToast();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -77,13 +75,9 @@ export function DocumentSigningRejectDialog({
         duration: 5000,
       });
 
-      setIsOpen(false);
-
-      if (onRejected) {
-        await onRejected(reason);
-      } else {
       await navigate(`/sign/${token}/rejected`);
-      }
+
+      setIsOpen(false);
     } catch (err) {
       toast({
         title: 'Error',

apps/remix/app/components/general/document/document-certificate-download-button.tsx

@@ -1,10 +1,9 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentStatus } from '@prisma/client';
+import { DocumentStatus } from '@prisma/client';
 import { DownloadIcon } from 'lucide-react';
 
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -77,7 +76,7 @@ export const DocumentCertificateDownloadButton = ({
       className={cn('w-full sm:w-auto', className)}
       loading={isPending}
       variant="outline"
-      disabled={!isDocumentCompleted(documentStatus)}
+      disabled={documentStatus !== DocumentStatus.COMPLETED}
       onClick={() => void onDownloadCertificatesClick()}
     >
       {!isPending && <DownloadIcon className="mr-1.5 h-4 w-4" />}

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -24,7 +24,7 @@ import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/ad
 import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -71,7 +71,7 @@ export const DocumentEditForm = ({
 
   const { recipients, fields } = document;
 
-  const { mutateAsync: updateDocumentSettings } = trpc.document.setSettingsForDocument.useMutation({
+  const { mutateAsync: updateDocument } = trpc.document.setSettingsForDocument.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
       utils.document.getDocumentWithDetailsById.setData(
@@ -132,6 +132,9 @@ export const DocumentEditForm = ({
     },
   });
 
+  const { mutateAsync: setPasswordForDocument } =
+    trpc.document.setPasswordForDocument.useMutation();
+
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
     settings: {
       title: msg`General`,
@@ -176,7 +179,7 @@ export const DocumentEditForm = ({
     try {
       const { timezone, dateFormat, redirectUrl, language } = data.meta;
 
-      await updateDocumentSettings({
+      await updateDocument({
         documentId: document.id,
         data: {
           title: data.title,
@@ -213,13 +216,6 @@ export const DocumentEditForm = ({
           signingOrder: data.signingOrder,
         }),
 
-        updateDocumentSettings({
-          documentId: document.id,
-          meta: {
-            allowDictateNextSigner: data.allowDictateNextSigner,
-          },
-        }),
-
         setRecipients({
           documentId: document.id,
           recipients: data.signers.map((signer) => ({
@@ -249,7 +245,7 @@ export const DocumentEditForm = ({
         fields: data.fields,
       });
 
-      await updateDocumentSettings({
+      await updateDocument({
         documentId: document.id,
 
         meta: {
@@ -319,6 +315,13 @@ export const DocumentEditForm = ({
     }
   };
 
+  const onPasswordSubmit = async (password: string) => {
+    await setPasswordForDocument({
+      documentId: document.id,
+      password,
+    });
+  };
+
   const currentDocumentFlow = documentFlow[step];
 
   /**
@@ -337,10 +340,12 @@ export const DocumentEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <LazyPDFViewer
             key={document.documentData.id}
             documentData={document.documentData}
             document={document}
+            password={document.documentMeta?.password}
+            onPasswordSubmit={onPasswordSubmit}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>
@@ -372,7 +377,6 @@ export const DocumentEditForm = ({
               documentFlow={documentFlow.signers}
               recipients={recipients}
               signingOrder={document.documentMeta?.signingOrder}
-              allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
               fields={fields}
               isDocumentEnterprise={isDocumentEnterprise}
               onSubmit={onAddSignersFormSubmit}

apps/remix/app/components/general/document/document-page-view-button.tsx

@@ -9,7 +9,6 @@ import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
@@ -33,7 +32,7 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
 
   const isRecipient = !!recipient;
   const isPending = document.status === DocumentStatus.PENDING;
-  const isComplete = isDocumentCompleted(document);
+  const isComplete = document.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
 

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -20,7 +20,6 @@ import { useNavigate } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -64,7 +63,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const isDraft = document.status === DocumentStatus.DRAFT;
   const isPending = document.status === DocumentStatus.PENDING;
   const isDeleted = document.deletedAt !== null;
-  const isComplete = isDocumentCompleted(document);
+  const isComplete = document.status === DocumentStatus.COMPLETED;
   const isCurrentTeamDocument = team && document.team?.url === team.url;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 

apps/remix/app/components/general/document/document-page-view-recipients.tsx

@@ -17,7 +17,6 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatSigningLink } from '@documenso/lib/utils/recipients';
 import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
@@ -49,7 +48,7 @@ export const DocumentPageViewRecipients = ({
           <Trans>Recipients</Trans>
         </h1>
 
-        {!isDocumentCompleted(document.status) && (
+        {document.status !== DocumentStatus.COMPLETED && (
           <Link
             to={`${documentRootPath}/${document.id}/edit?step=signers`}
             title={_(msg`Modify recipients`)}

apps/remix/app/components/general/document/document-status.tsx

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'react';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { CheckCircle2, Clock, File, XCircle } from 'lucide-react';
+import { CheckCircle2, Clock, File } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@@ -36,12 +36,6 @@ export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus>
     icon: File,
     color: 'text-yellow-500 dark:text-yellow-200',
   },
-  REJECTED: {
-    label: msg`Rejected`,
-    labelExtended: msg`Document rejected`,
-    icon: XCircle,
-    color: 'text-red-500 dark:text-red-300',
-  },
   INBOX: {
     label: msg`Inbox`,
     labelExtended: msg`Document inbox`,

apps/remix/app/components/general/document/document-upload.tsx

@@ -85,7 +85,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         timestamp: new Date().toISOString(),
       });
 
-      await navigate(`${formatDocumentsPath(team?.url)}/${id}/edit`);
+      void navigate(`${formatDocumentsPath(team?.url)}/${id}/edit`);
     } catch (err) {
       const error = AppError.parseError(err);
 

apps/remix/app/components/general/generic-error-layout.tsx

@@ -38,7 +38,7 @@ export type GenericErrorLayoutProps = {
 
 export const defaultErrorCodeMap: ErrorCodeMap = {
   404: {
-    subHeading: msg`404 not found`,
+    subHeading: msg`404 Page not found`,
     heading: msg`Oops! Something went wrong.`,
     message: msg`The page you are looking for was moved, removed, renamed or might never have existed.`,
   },
@@ -62,7 +62,7 @@ export const GenericErrorLayout = ({
   const team = useOptionalCurrentTeam();
 
   const { subHeading, heading, message } =
-    errorCodeMap[errorCode || 500] ?? defaultErrorCodeMap[500];
+    errorCodeMap[errorCode || 404] ?? defaultErrorCodeMap[500];
 
   return (
     <div className="fixed inset-0 z-0 flex h-screen w-screen items-center justify-center">

apps/remix/app/components/general/refresh-on-focus.tsx

@@ -2,16 +2,11 @@ import { useCallback, useEffect } from 'react';
 
 import { useRevalidator } from 'react-router';
 
-/**
- * Not really used anymore, this causes random 500s when the user refreshes while this occurs.
- */
 export const RefreshOnFocus = () => {
-  const { revalidate, state } = useRevalidator();
+  const { revalidate } = useRevalidator();
 
   const onFocus = useCallback(() => {
-    if (state === 'idle') {
     void revalidate();
-    }
   }, [revalidate]);
 
   useEffect(() => {

apps/remix/app/components/general/settings-header.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { cn } from '@documenso/ui/lib/utils';
 
 export type SettingsHeaderProps = {
-  title: string | React.ReactNode;
-  subtitle: string | React.ReactNode;
+  title: string;
+  subtitle: string;
   hideDivider?: boolean;
   children?: React.ReactNode;
   className?: string;

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -15,7 +15,7 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-fields';
 import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
@@ -161,7 +161,6 @@ export const TemplateEditForm = ({
           templateId: template.id,
           meta: {
             signingOrder: data.signingOrder,
-            allowDictateNextSigner: data.allowDictateNextSigner,
           },
         }),
 
@@ -237,7 +236,7 @@ export const TemplateEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <LazyPDFViewer
             key={templateDocumentData.id}
             documentData={templateDocumentData}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
@@ -272,7 +271,6 @@ export const TemplateEditForm = ({
               recipients={recipients}
               fields={fields}
               signingOrder={template.templateMeta?.signingOrder}
-              allowDictateNextSigner={template.templateMeta?.allowDictateNextSigner}
               templateDirectLink={template.directLink}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
               isEnterprise={isEnterprise}

apps/remix/app/components/general/webhook-multiselect-combobox.tsx

@@ -1,96 +1,43 @@
-import { useEffect, useState } from 'react';
-
-import { Plural, Trans } from '@lingui/react/macro';
 import { WebhookTriggerEvents } from '@prisma/client';
-import { Check, ChevronsUpDown } from 'lucide-react';
 
 import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
-
-import { truncateTitle } from '~/utils/truncate-title';
+import { MultipleSelector } from '@documenso/ui/primitives/multiselect';
 
 type WebhookMultiSelectComboboxProps = {
   listValues: string[];
   onChange: (_values: string[]) => void;
 };
 
+const triggerEvents = Object.values(WebhookTriggerEvents).map((value) => ({
+  value,
+  label: toFriendlyWebhookEventName(value),
+}));
+
 export const WebhookMultiSelectCombobox = ({
   listValues,
   onChange,
 }: WebhookMultiSelectComboboxProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedValues, setSelectedValues] = useState<string[]>([]);
-
-  const triggerEvents = Object.values(WebhookTriggerEvents);
-
-  useEffect(() => {
-    setSelectedValues(listValues);
-  }, [listValues]);
-
-  const allEvents = [...new Set([...triggerEvents, ...selectedValues])];
-
-  const handleSelect = (currentValue: string) => {
-    let newSelectedValues;
-
-    if (selectedValues.includes(currentValue)) {
-      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
-    } else {
-      newSelectedValues = [...selectedValues, currentValue];
-    }
-
-    setSelectedValues(newSelectedValues);
-    onChange(newSelectedValues);
-    setIsOpen(false);
+  const handleOnChange = (options: { value: string; label: string }[]) => {
+    onChange(options.map((option) => option.value));
   };
 
+  const mappedValues = listValues.map((value) => ({
+    value,
+    label: toFriendlyWebhookEventName(value),
+  }));
+
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={isOpen}
-          className="w-[200px] justify-between"
-        >
-          <Plural value={selectedValues.length} zero="Select values" other="# selected..." />
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="z-9999 w-full max-w-[280px] p-0">
-        <Command>
-          <CommandInput
-            placeholder={truncateTitle(
-              selectedValues.map((v) => toFriendlyWebhookEventName(v)).join(', '),
-              15,
-            )}
+    <MultipleSelector
+      commandProps={{
+        label: 'Select triggers',
+      }}
+      defaultOptions={triggerEvents}
+      value={mappedValues}
+      onChange={handleOnChange}
+      placeholder="Select triggers"
+      hideClearAllButton
+      hidePlaceholderWhenSelected
+      emptyIndicator={<p className="text-center text-sm">No triggers available</p>}
     />
-          <CommandEmpty>
-            <Trans>No value found.</Trans>
-          </CommandEmpty>
-          <CommandGroup>
-            {allEvents.map((value: string, i: number) => (
-              <CommandItem key={i} onSelect={() => handleSelect(value)}>
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
-                  )}
-                />
-                {toFriendlyWebhookEventName(value)}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </Command>
-      </PopoverContent>
-    </Popover>
   );
 };

apps/remix/app/components/tables/documents-table-action-button.tsx

@@ -9,7 +9,6 @@ import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
@@ -38,7 +37,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const isRecipient = !!recipient;
   const isDraft = row.status === DocumentStatus.DRAFT;
   const isPending = row.status === DocumentStatus.PENDING;
-  const isComplete = isDocumentCompleted(row.status);
+  const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
   const isCurrentTeamDocument = team && row.team?.url === team.url;

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -22,7 +22,6 @@ import { Link } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -67,7 +66,7 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
   // const isRecipient = !!recipient;
   const isDraft = row.status === DocumentStatus.DRAFT;
   const isPending = row.status === DocumentStatus.PENDING;
-  const isComplete = isDocumentCompleted(row.status);
+  const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const isCurrentTeamDocument = team && row.team?.url === team.url;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);

apps/remix/app/components/tables/documents-table.tsx

@@ -9,8 +9,8 @@ import { match } from 'ts-pattern';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
@@ -77,7 +77,7 @@ export const DocumentsTable = ({ data, isLoading, isLoadingError }: DocumentsTab
       {
         header: _(msg`Actions`),
         cell: ({ row }) =>
-          (!row.original.deletedAt || isDocumentCompleted(row.original.status)) && (
+          (!row.original.deletedAt || row.original.status === ExtendedDocumentStatus.COMPLETED) && (
             <div className="flex items-center gap-x-4">
               <DocumentsTableActionButton row={row.original} />
               <DocumentsTableActionDropdown row={row.original} />

apps/remix/app/entry.client.tsx

@@ -1,31 +1,21 @@
-import { StrictMode, startTransition, useEffect } from 'react';
+import { StrictMode, startTransition } from 'react';
 
 import { i18n } from '@lingui/core';
 import { detect, fromHtmlTag } from '@lingui/detect-locale';
 import { I18nProvider } from '@lingui/react';
-import posthog from 'posthog-js';
 import { hydrateRoot } from 'react-dom/client';
 import { HydratedRouter } from 'react-router/dom';
+import { Theme, ThemeProvider } from 'remix-themes';
+import { match } from 'ts-pattern';
 
-import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
 import { dynamicActivate } from '@documenso/lib/utils/i18n';
 
-function PosthogInit() {
-  const postHogConfig = extractPostHogConfig();
-
-  useEffect(() => {
-    if (postHogConfig) {
-      posthog.init(postHogConfig.key, {
-        api_host: postHogConfig.host,
-        capture_exceptions: true,
-      });
-    }
-  }, []);
-
-  return null;
-}
-
 async function main() {
+  const theme = match(document.documentElement.getAttribute('data-theme'))
+    .with('dark', () => Theme.DARK)
+    .with('light', () => Theme.LIGHT)
+    .otherwise(() => null);
+
   const locale = detect(fromHtmlTag('lang')) || 'en';
 
   await dynamicActivate(locale);
@@ -35,10 +25,10 @@ async function main() {
       document,
       <StrictMode>
         <I18nProvider i18n={i18n}>
+          <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
             <HydratedRouter />
+          </ThemeProvider>
         </I18nProvider>
-
-        <PosthogInit />
       </StrictMode>,
     );
   });

apps/remix/app/entry.server.tsx

@@ -7,11 +7,13 @@ import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 import { renderToPipeableStream } from 'react-dom/server';
 import type { AppLoadContext, EntryContext } from 'react-router';
 import { ServerRouter } from 'react-router';
+import { ThemeProvider } from 'remix-themes';
 
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { dynamicActivate, extractLocaleData } from '@documenso/lib/utils/i18n';
 
 import { langCookie } from './storage/lang-cookie.server';
+import { themeSessionResolver } from './storage/theme-session.server';
 
 export const streamTimeout = 5_000;
 
@@ -30,6 +32,10 @@ export default async function handleRequest(
 
   await dynamicActivate(language);
 
+  const { getTheme } = await themeSessionResolver(request);
+
+  const theme = getTheme();
+
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const userAgent = request.headers.get('user-agent');
@@ -41,7 +47,9 @@ export default async function handleRequest(
 
     const { pipe, abort } = renderToPipeableStream(
       <I18nProvider i18n={i18n}>
+        <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
           <ServerRouter context={routerContext} url={request.url} />
+        </ThemeProvider>
       </I18nProvider>,
       {
         [readyOption]() {

apps/remix/app/providers/posthog.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+
+import posthog from 'posthog-js';
+import { useLocation, useSearchParams } from 'react-router';
+
+import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
+
+export function PostHogPageview() {
+  const postHogConfig = extractPostHogConfig();
+
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
+
+  // const { sessionData } = useOptionalSession();
+  // const user = sessionData?.user;
+
+  if (typeof window !== 'undefined' && postHogConfig) {
+    posthog.init(postHogConfig.key, {
+      api_host: postHogConfig.host,
+      disable_session_recording: true,
+      // loaded: () => {
+      //   if (user) {
+      //     posthog.identify(user.email ?? user.id.toString());
+      //   } else {
+      //     posthog.reset();
+      //   }
+      // },
+      custom_campaign_params: ['src'],
+    });
+  }
+
+  useEffect(() => {
+    if (!postHogConfig || !pathname) {
+      return;
+    }
+
+    let url = window.origin + pathname;
+    if (searchParams && searchParams.toString()) {
+      url = url + `?${searchParams.toString()}`;
+    }
+    posthog.capture('$pageview', {
+      $current_url: url,
+    });
+  }, [pathname, searchParams, postHogConfig]);
+
+  return null;
+}

apps/remix/app/root.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 
 import Plausible from 'plausible-tracker';
 import {
@@ -12,7 +12,7 @@ import {
   useLoaderData,
   useLocation,
 } from 'react-router';
-import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from 'remix-themes';
+import { PreventFlashOnWrongTheme, useTheme } from 'remix-themes';
 
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { SessionProvider } from '@documenso/lib/client-only/providers/session';
@@ -27,6 +27,8 @@ import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 import type { Route } from './+types/root';
 import stylesheet from './app.css?url';
 import { GenericErrorLayout } from './components/general/generic-error-layout';
+import { RefreshOnFocus } from './components/general/refresh-on-focus';
+import { PostHogPageview } from './providers/posthog';
 import { langCookie } from './storage/lang-cookie.server';
 import { themeSessionResolver } from './storage/theme-session.server';
 import { appMetaTags } from './utils/meta';
@@ -104,7 +106,9 @@ export async function loader({ request }: Route.LoaderArgs) {
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {
-  const { theme } = useLoaderData<typeof loader>() || {};
+  const { publicEnv, lang, session, ...data } = useLoaderData<typeof loader>() || {};
+
+  const [theme] = useTheme();
 
   const location = useLocation();
 
@@ -114,18 +118,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
     }
   }, [location.pathname]);
 
-  return (
-    <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
-      <LayoutContent>{children}</LayoutContent>
-    </ThemeProvider>
-  );
-}
-
-export function LayoutContent({ children }: { children: React.ReactNode }) {
-  const { publicEnv, session, lang, ...data } = useLoaderData<typeof loader>() || {};
-
-  const [theme] = useTheme();
-
   return (
     <html translate="no" lang={lang} data-theme={theme} className={theme ?? ''}>
       <head>
@@ -141,6 +133,10 @@ export function LayoutContent({ children }: { children: React.ReactNode }) {
         <meta name="google" content="notranslate" />
         <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
 
+        <Suspense>
+          <PostHogPageview />
+        </Suspense>
+
         {/* Fix: https://stackoverflow.com/questions/21147149/flash-of-unstyled-content-fouc-in-firefox-only-is-ff-slow-renderer */}
         <script>0</script>
       </head>
@@ -158,6 +154,8 @@ export function LayoutContent({ children }: { children: React.ReactNode }) {
         <ScrollRestoration />
         <Scripts />
 
+        <RefreshOnFocus />
+
         <script
           dangerouslySetInnerHTML={{
             __html: `window.__ENV__ = ${JSON.stringify(publicEnv)}`,
@@ -173,11 +171,9 @@ export default function App() {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  const errorCode = isRouteErrorResponse(error) ? error.status : 500;
-
-  if (errorCode !== 404) {
   console.error('[RootErrorBoundary]', error);
-  }
+
+  const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
   return <GenericErrorLayout errorCode={errorCode} />;
 }

apps/remix/app/routes/_authenticated+/_layout.tsx

@@ -20,13 +20,13 @@ import type { Route } from './+types/_layout';
  */
 export const shouldRevalidate = () => false;
 
-export async function loader({ request }: Route.LoaderArgs) {
+export const loader = async ({ request }: Route.LoaderArgs) => {
   const requestHeaders = Object.fromEntries(request.headers.entries());
 
   const session = await getOptionalSession(request);
 
   if (!session.isAuthenticated) {
-    throw redirect('/signin');
+    return redirect('/signin');
   }
 
   const [limits, banner] = await Promise.all([
@@ -40,7 +40,7 @@ export async function loader({ request }: Route.LoaderArgs) {
     banner,
     limits,
   };
-}
+};
 
 export default function Layout({ loaderData }: Route.ComponentProps) {
   const { user, teams } = useSession();

apps/remix/app/routes/_authenticated+/admin+/documents.$id.tsx

@@ -103,9 +103,7 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
                 variant="outline"
                 loading={isResealDocumentLoading}
                 disabled={document.recipients.some(
-                  (recipient) =>
-                    recipient.signingStatus !== SigningStatus.SIGNED &&
-                    recipient.signingStatus !== SigningStatus.REJECTED,
+                  (recipient) => recipient.signingStatus !== SigningStatus.SIGNED,
                 )}
                 onClick={() => resealDocument({ id: document.id })}
               >

apps/remix/app/routes/_authenticated+/documents+/$id._index.tsx

@@ -16,7 +16,7 @@ import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { DocumentHistorySheet } from '~/components/general/document/document-history-sheet';
 import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
@@ -33,7 +33,7 @@ import {
 import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
-import type { Route } from './+types/documents.$id._index';
+import type { Route } from './+types/$id._index';
 
 export async function loader({ params, request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
@@ -196,7 +196,7 @@ export default function DocumentPage() {
           gradient
         >
           <CardContent className="p-2">
-            <PDFViewer document={document} key={documentData.id} documentData={documentData} />
+            <LazyPDFViewer document={document} key={documentData.id} documentData={documentData} />
           </CardContent>
         </Card>
 
@@ -220,9 +220,6 @@ export default function DocumentPage() {
                   .with(DocumentStatus.COMPLETED, () => (
                     <Trans>This document has been signed by all recipients</Trans>
                   ))
-                  .with(DocumentStatus.REJECTED, () => (
-                    <Trans>This document has been rejected by a recipient</Trans>
-                  ))
                   .with(DocumentStatus.DRAFT, () => (
                     <Trans>This document is currently a draft and has not been sent</Trans>
                   ))

apps/remix/app/routes/_authenticated+/documents+/$id.edit.tsx

@@ -1,5 +1,5 @@
 import { Plural, Trans } from '@lingui/react/macro';
-import { TeamMemberRole } from '@prisma/client';
+import { DocumentStatus as InternalDocumentStatus, TeamMemberRole } from '@prisma/client';
 import { ChevronLeft, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
 import { match } from 'ts-pattern';
@@ -9,7 +9,6 @@ import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-ent
 import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
@@ -17,7 +16,7 @@ import { DocumentStatus } from '~/components/general/document/document-status';
 import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
-import type { Route } from './+types/documents.$id.edit';
+import type { Route } from './+types/$id.edit';
 
 export async function loader({ params, request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
@@ -72,7 +71,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
-  if (isDocumentCompleted(document.status)) {
+  if (document.status === InternalDocumentStatus.COMPLETED) {
     throw redirect(`${documentRootPath}/${documentId}`);
   }
 

apps/remix/app/routes/_authenticated+/documents+/$id.logs.tsx

@@ -22,7 +22,7 @@ import {
 } from '~/components/general/document/document-status';
 import { DocumentLogsTable } from '~/components/tables/document-logs-table';
 
-import type { Route } from './+types/documents.$id.logs';
+import type { Route } from './+types/$id.logs';
 
 export async function loader({ params, request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
@@ -129,7 +129,7 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
         <Trans>Document</Trans>
       </Link>
 
-      <div className="flex flex-col">
+      <div className="flex flex-col justify-between truncate sm:flex-row">
         <div>
           <h1
             className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
@@ -137,8 +137,7 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
           >
             {document.title}
           </h1>
-        </div>
-        <div className="mt-1 flex flex-col justify-between sm:flex-row">
+
           <div className="mt-2.5 flex items-center gap-x-6">
             <DocumentStatusComponent
               inheritColor
@@ -146,6 +145,8 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
               className="text-muted-foreground"
             />
           </div>
+        </div>
+
         <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
           <DocumentCertificateDownloadButton
             className="mr-2"
@@ -156,14 +157,13 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
           <DocumentAuditLogDownloadButton documentId={document.id} />
         </div>
       </div>
-      </div>
 
       <section className="mt-6">
         <Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient>
           {documentInformation.map((info, i) => (
             <div className="text-foreground text-sm" key={i}>
               <h3 className="font-semibold">{_(info.description)}</h3>
-              <p className="text-muted-foreground truncate">{info.value}</p>
+              <p className="text-muted-foreground">{info.value}</p>
             </div>
           ))}
 

apps/remix/app/routes/_authenticated+/documents+/_index.tsx

@@ -50,7 +50,6 @@ export default function DocumentsPage() {
     [ExtendedDocumentStatus.DRAFT]: 0,
     [ExtendedDocumentStatus.PENDING]: 0,
     [ExtendedDocumentStatus.COMPLETED]: 0,
-    [ExtendedDocumentStatus.REJECTED]: 0,
     [ExtendedDocumentStatus.INBOX]: 0,
     [ExtendedDocumentStatus.ALL]: 0,
   });

apps/remix/app/routes/_authenticated+/settings+/billing.tsx

@@ -1,157 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro';
-import { SubscriptionStatus } from '@prisma/client';
-import { redirect } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
-import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
-import { getPrimaryAccountPlanPrices } from '@documenso/ee/server-only/stripe/get-primary-account-plan-prices';
-import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
-import { type Stripe } from '@documenso/lib/server-only/stripe';
-import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscription/get-subscriptions-by-user-id';
-
-import { BillingPlans } from '~/components/general/billing-plans';
-import { BillingPortalButton } from '~/components/general/billing-portal-button';
-import { appMetaTags } from '~/utils/meta';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import type { Route } from './+types/billing';
-
-export function meta() {
-  return appMetaTags('Billing');
-}
-
-export async function loader({ request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  // Redirect if subscriptions are not enabled.
-  if (!IS_BILLING_ENABLED()) {
-    throw redirect('/settings/profile');
-  }
-
-  if (!user.customerId) {
-    await getStripeCustomerByUser(user).then((result) => result.user);
-  }
-
-  const [subscriptions, prices, primaryAccountPlanPrices] = await Promise.all([
-    getSubscriptionsByUserId({ userId: user.id }),
-    getPricesByInterval({ plans: [STRIPE_PLAN_TYPE.REGULAR, STRIPE_PLAN_TYPE.PLATFORM] }),
-    getPrimaryAccountPlanPrices(),
-  ]);
-
-  const primaryAccountPlanPriceIds = primaryAccountPlanPrices.map(({ id }) => id);
-
-  let subscriptionProduct: Stripe.Product | null = null;
-
-  const primaryAccountPlanSubscriptions = subscriptions.filter(({ priceId }) =>
-    primaryAccountPlanPriceIds.includes(priceId),
-  );
-
-  const subscription =
-    primaryAccountPlanSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
-    primaryAccountPlanSubscriptions[0];
-
-  if (subscription?.priceId) {
-    subscriptionProduct = await getProductByPriceId({ priceId: subscription.priceId }).catch(
-      () => null,
-    );
-  }
-
-  const isMissingOrInactiveOrFreePlan =
-    !subscription || subscription.status === SubscriptionStatus.INACTIVE;
-
-  return superLoaderJson({
-    prices,
-    subscription,
-    subscriptionProductName: subscriptionProduct?.name,
-    isMissingOrInactiveOrFreePlan,
-  });
-}
-
-export default function TeamsSettingBillingPage() {
-  const { prices, subscription, subscriptionProductName, isMissingOrInactiveOrFreePlan } =
-    useSuperLoaderData<typeof loader>();
-
-  const { i18n } = useLingui();
-
-  return (
-    <div>
-      <div className="flex flex-row items-end justify-between">
-        <div>
-          <h3 className="text-2xl font-semibold">
-            <Trans>Billing</Trans>
-          </h3>
-
-          <div className="text-muted-foreground mt-2 text-sm">
-            {isMissingOrInactiveOrFreePlan && (
-              <p>
-                <Trans>
-                  You are currently on the <span className="font-semibold">Free Plan</span>.
-                </Trans>
-              </p>
-            )}
-
-            {/* Todo: Translation */}
-            {!isMissingOrInactiveOrFreePlan &&
-              match(subscription.status)
-                .with('ACTIVE', () => (
-                  <p>
-                    {subscriptionProductName ? (
-                      <span>
-                        You are currently subscribed to{' '}
-                        <span className="font-semibold">{subscriptionProductName}</span>
-                      </span>
-                    ) : (
-                      <span>You currently have an active plan</span>
-                    )}
-
-                    {subscription.periodEnd && (
-                      <span>
-                        {' '}
-                        which is set to{' '}
-                        {subscription.cancelAtPeriodEnd ? (
-                          <span>
-                            end on{' '}
-                            <span className="font-semibold">
-                              {i18n.date(subscription.periodEnd)}.
-                            </span>
-                          </span>
-                        ) : (
-                          <span>
-                            automatically renew on{' '}
-                            <span className="font-semibold">
-                              {i18n.date(subscription.periodEnd)}.
-                            </span>
-                          </span>
-                        )}
-                      </span>
-                    )}
-                  </p>
-                ))
-                .with('PAST_DUE', () => (
-                  <p>
-                    <Trans>
-                      Your current plan is past due. Please update your payment information.
-                    </Trans>
-                  </p>
-                ))
-                .otherwise(() => null)}
-          </div>
-        </div>
-
-        {isMissingOrInactiveOrFreePlan && (
-          <BillingPortalButton>
-            <Trans>Manage billing</Trans>
-          </BillingPortalButton>
-        )}
-      </div>
-
-      <hr className="my-4" />
-
-      {isMissingOrInactiveOrFreePlan ? <BillingPlans prices={prices} /> : <BillingPortalButton />}
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/settings+/public-profile+/index.tsx

@@ -21,10 +21,10 @@ import { ManagePublicTemplateDialog } from '~/components/dialogs/public-profile-
 import type { TPublicProfileFormSchema } from '~/components/forms/public-profile-form';
 import { PublicProfileForm } from '~/components/forms/public-profile-form';
 import { SettingsHeader } from '~/components/general/settings-header';
-import { SettingsPublicProfileTemplatesTable } from '~/components/tables/settings-public-profile-templates-table';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
-import type { Route } from './+types/public-profile';
+import { SettingsPublicProfileTemplatesTable } from '../../../../components/tables/settings-public-profile-templates-table';
+import type { Route } from './+types/index';
 
 type DirectTemplate = FindTemplateRow & {
   directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
@@ -60,7 +60,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { user, refreshSession } = useSession();
+  const { user } = useSession();
   const team = useOptionalCurrentTeam();
 
   const [isPublicProfileVisible, setIsPublicProfileVisible] = useState(profile.enabled);
@@ -96,9 +96,6 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
       });
     } else {
       await updateUserProfile(data);
-
-      // Need to refresh session because we're editing the user's profile.
-      await refreshSession();
     }
 
     if (data.enabled === undefined && !isPublicProfileVisible) {

apps/remix/app/routes/_authenticated+/settings+/security+/index.tsx

@@ -16,7 +16,7 @@ import { PasswordForm } from '~/components/forms/password';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { appMetaTags } from '~/utils/meta';
 
-import type { Route } from './+types/security._index';
+import type { Route } from './+types';
 
 export function meta() {
   return appMetaTags('Security');

apps/remix/app/routes/_authenticated+/settings+/teams+/index.tsx

@@ -7,10 +7,11 @@ import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animat
 
 import { TeamCreateDialog } from '~/components/dialogs/team-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
-import { TeamEmailUsage } from '~/components/general/teams/team-email-usage';
-import { TeamInvitations } from '~/components/general/teams/team-invitations';
 import { UserSettingsTeamsPageDataTable } from '~/components/tables/user-settings-teams-page-table';
 
+import { TeamEmailUsage } from './team-email-usage';
+import { TeamInvitations } from './team-invitations';
+
 export default function TeamsSettingsPage() {
   const { _ } = useLingui();
 

apps/remix/app/routes/_authenticated+/settings+/tokens+/index.tsx

@@ -0,0 +1,91 @@
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DateTime } from 'luxon';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+
+import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
+import { ApiTokenForm } from '~/components/forms/token';
+
+export default function ApiTokensPage() {
+  const { i18n } = useLingui();
+
+  const { data: tokens } = trpc.apiToken.getTokens.useQuery();
+
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">
+        <Trans>API Tokens</Trans>
+      </h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        <Trans>
+          On this page, you can create new API tokens and manage the existing ones. <br />
+          Also see our{' '}
+          <a
+            className="text-primary underline"
+            href={'https://docs.documenso.com/developers/public-api'}
+            target="_blank"
+          >
+            Documentation
+          </a>
+          .
+        </Trans>
+      </p>
+
+      <hr className="my-4" />
+
+      <ApiTokenForm className="max-w-xl" tokens={tokens} />
+
+      <hr className="mb-4 mt-8" />
+
+      <h4 className="text-xl font-medium">
+        <Trans>Your existing tokens</Trans>
+      </h4>
+
+      {tokens && tokens.length === 0 && (
+        <div className="mb-4">
+          <p className="text-muted-foreground mt-2 text-sm italic">
+            <Trans>Your tokens will be shown here once you create them.</Trans>
+          </p>
+        </div>
+      )}
+
+      {tokens && tokens.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {tokens.map((token) => (
+            <div key={token.id} className="border-border rounded-lg border p-4">
+              <div className="flex items-center justify-between gap-x-4">
+                <div>
+                  <h5 className="text-base">{token.name}</h5>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}</Trans>
+                  </p>
+                  {token.expires ? (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      <Trans>Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}</Trans>
+                    </p>
+                  ) : (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      <Trans>Token doesn't have an expiration date</Trans>
+                    </p>
+                  )}
+                </div>
+
+                <div>
+                  <TokenDeleteDialog token={token}>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
+                  </TokenDeleteDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/settings+/tokens.tsx

@@ -1,116 +0,0 @@
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { TeamMemberRole } from '@prisma/client';
-import { DateTime } from 'luxon';
-
-import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-import { AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-
-import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
-import { ApiTokenForm } from '~/components/forms/token';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-export default function ApiTokensPage() {
-  const { i18n } = useLingui();
-
-  const { data: tokens } = trpc.apiToken.getTokens.useQuery();
-
-  const team = useOptionalCurrentTeam();
-
-  return (
-    <div>
-      <SettingsHeader
-        title={<Trans>API Tokens</Trans>}
-        subtitle={
-          <Trans>
-            On this page, you can create and manage API tokens. See our{' '}
-            <a
-              className="text-primary underline"
-              href={'https://docs.documenso.com/developers/public-api'}
-              target="_blank"
-            >
-              Documentation
-            </a>{' '}
-            for more information.
-          </Trans>
-        }
-      />
-
-      {team && team?.currentTeamMember.role !== TeamMemberRole.ADMIN ? (
-        <Alert
-          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
-          variant="warning"
-        >
-          <div>
-            <AlertTitle>
-              <Trans>Unauthorized</Trans>
-            </AlertTitle>
-            <AlertDescription className="mr-2">
-              <Trans>You need to be an admin to manage API tokens.</Trans>
-            </AlertDescription>
-          </div>
-        </Alert>
-      ) : (
-        <>
-          <ApiTokenForm className="max-w-xl" tokens={tokens} />
-
-          <hr className="mb-4 mt-8" />
-
-          <h4 className="text-xl font-medium">
-            <Trans>Your existing tokens</Trans>
-          </h4>
-
-          {tokens && tokens.length === 0 && (
-            <div className="mb-4">
-              <p className="text-muted-foreground mt-2 text-sm italic">
-                <Trans>Your tokens will be shown here once you create them.</Trans>
-              </p>
-            </div>
-          )}
-
-          {tokens && tokens.length > 0 && (
-            <div className="mt-4 flex max-w-xl flex-col gap-y-4">
-              {tokens.map((token) => (
-                <div key={token.id} className="border-border rounded-lg border p-4">
-                  <div className="flex items-center justify-between gap-x-4">
-                    <div>
-                      <h5 className="text-base">{token.name}</h5>
-
-                      <p className="text-muted-foreground mt-2 text-xs">
-                        <Trans>
-                          Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}
-                        </Trans>
-                      </p>
-                      {token.expires ? (
-                        <p className="text-muted-foreground mt-1 text-xs">
-                          <Trans>
-                            Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}
-                          </Trans>
-                        </p>
-                      ) : (
-                        <p className="text-muted-foreground mt-1 text-xs">
-                          <Trans>Token doesn't have an expiration date</Trans>
-                        </p>
-                      )}
-                    </div>
-
-                    <div>
-                      <TokenDeleteDialog token={token}>
-                        <Button variant="destructive">
-                          <Trans>Delete</Trans>
-                        </Button>
-                      </TokenDeleteDialog>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx

@@ -1,4 +1,4 @@
-import DocumentPage, { loader } from '~/routes/_authenticated+/documents.$id._index';
+import DocumentPage, { loader } from '~/routes/_authenticated+/documents+/$id._index';
 
 export { loader };
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx

@@ -1,4 +1,4 @@
-import DocumentEditPage, { loader } from '~/routes/_authenticated+/documents.$id.edit';
+import DocumentEditPage, { loader } from '~/routes/_authenticated+/documents+/$id.edit';
 
 export { loader };
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.logs.tsx

@@ -1,4 +1,4 @@
-import DocumentLogsPage, { loader } from '~/routes/_authenticated+/documents.$id.logs';
+import DocumentLogsPage, { loader } from '~/routes/_authenticated+/documents+/$id.logs';
 
 export { loader };
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx

@@ -1,4 +1,4 @@
-import DocumentsPage, { meta } from '~/routes/_authenticated+/documents._index';
+import DocumentsPage, { meta } from '~/routes/_authenticated+/documents+/_index';
 
 export { meta };
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/_index.tsx

@@ -20,7 +20,7 @@ import { SettingsHeader } from '~/components/general/settings-header';
 import { TeamEmailDropdown } from '~/components/general/teams/team-email-dropdown';
 import { TeamTransferStatus } from '~/components/general/teams/team-transfer-status';
 
-import type { Route } from './+types/settings._index';
+import type { Route } from './+types/_index';
 
 export async function loader({ request, params }: Route.LoaderArgs) {
   const { user } = await getSession(request);

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/_layout.tsx

@@ -9,7 +9,7 @@ import { TeamSettingsNavDesktop } from '~/components/general/teams/team-settings
 import { TeamSettingsNavMobile } from '~/components/general/teams/team-settings-nav-mobile';
 import { appMetaTags } from '~/utils/meta';
 
-import type { Route } from './+types/settings._layout';
+import type { Route } from './+types/_layout';
 
 export function meta() {
   return appMetaTags('Team Settings');

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/billing.tsx

@@ -14,9 +14,8 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { TeamBillingPortalButton } from '~/components/general/teams/team-billing-portal-button';
 import { TeamSettingsBillingInvoicesTable } from '~/components/tables/team-settings-billing-invoices-table';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
-import type { Route } from './+types/settings.billing';
+import type { Route } from './+types/billing';
 
 export async function loader({ request, params }: Route.LoaderArgs) {
   const session = await getSession(request);
@@ -32,16 +31,16 @@ export async function loader({ request, params }: Route.LoaderArgs) {
     teamSubscription = await stripe.subscriptions.retrieve(team.subscription.planId);
   }
 
-  return superLoaderJson({
+  return {
     team,
     teamSubscription,
-  });
+  };
 }
 
-export default function TeamsSettingBillingPage() {
+export default function TeamsSettingBillingPage({ loaderData }: Route.ComponentProps) {
   const { _ } = useLingui();
 
-  const { team, teamSubscription } = useSuperLoaderData<typeof loader>();
+  const { team, teamSubscription } = loaderData;
 
   const canManageBilling = canExecuteTeamAction('MANAGE_BILLING', team.currentTeamMember.role);
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/preferences.tsx

@@ -8,7 +8,7 @@ import { TeamBrandingPreferencesForm } from '~/components/forms/team-branding-pr
 import { TeamDocumentPreferencesForm } from '~/components/forms/team-document-preferences-form';
 import { SettingsHeader } from '~/components/general/settings-header';
 
-import type { Route } from './+types/settings.preferences';
+import type { Route } from './+types/preferences';
 
 export async function loader({ request, params }: Route.LoaderArgs) {
   const { user } = await getSession(request);

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/public-profile.tsx

@@ -2,9 +2,9 @@ import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { getTeamPublicProfile } from '@documenso/lib/server-only/team/get-team-public-profile';
 
-import PublicProfilePage from '~/routes/_authenticated+/settings+/public-profile';
+import PublicProfilePage from '~/routes/_authenticated+/settings+/public-profile+/index';
 
-import type { Route } from './+types/settings.public-profile';
+import type { Route } from './+types/public-profile';
 
 // Todo: This can be optimized.
 export async function loader({ request, params }: Route.LoaderArgs) {

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/tokens.tsx

@@ -0,0 +1,126 @@
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DateTime } from 'luxon';
+
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { getTeamTokens } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { Button } from '@documenso/ui/primitives/button';
+
+import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
+import { ApiTokenForm } from '~/components/forms/token';
+
+import type { Route } from './+types/tokens';
+
+// Todo: This can be optimized.
+export async function loader({ request, params }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  const team = await getTeamByUrl({
+    userId: user.id,
+    teamUrl: params.teamUrl,
+  });
+
+  const tokens = await getTeamTokens({ userId: user.id, teamId: team.id }).catch(() => null);
+
+  return {
+    user,
+    team,
+    tokens,
+  };
+}
+
+export default function ApiTokensPage({ loaderData }: Route.ComponentProps) {
+  const { i18n } = useLingui();
+
+  const { team, tokens } = loaderData;
+
+  if (!tokens) {
+    return (
+      <div>
+        <h3 className="text-2xl font-semibold">
+          <Trans>API Tokens</Trans>
+        </h3>
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>Something went wrong.</Trans>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">
+        <Trans>API Tokens</Trans>
+      </h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        <Trans>
+          On this page, you can create new API tokens and manage the existing ones. <br />
+          You can view our swagger docs{' '}
+          <a
+            className="text-primary underline"
+            href={`${NEXT_PUBLIC_WEBAPP_URL()}/api/v1/openapi`}
+            target="_blank"
+          >
+            here
+          </a>
+        </Trans>
+      </p>
+
+      <hr className="my-4" />
+
+      <ApiTokenForm className="max-w-xl" teamId={team.id} tokens={tokens} />
+
+      <hr className="mb-4 mt-8" />
+
+      <h4 className="text-xl font-medium">
+        <Trans>Your existing tokens</Trans>
+      </h4>
+
+      {tokens.length === 0 && (
+        <div className="mb-4">
+          <p className="text-muted-foreground mt-2 text-sm italic">
+            <Trans>Your tokens will be shown here once you create them.</Trans>
+          </p>
+        </div>
+      )}
+
+      {tokens.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {tokens.map((token) => (
+            <div key={token.id} className="border-border rounded-lg border p-4">
+              <div className="flex items-center justify-between gap-x-4">
+                <div>
+                  <h5 className="text-base">{token.name}</h5>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}</Trans>
+                  </p>
+                  {token.expires ? (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      <Trans>Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}</Trans>
+                    </p>
+                  ) : (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      <Trans>Token doesn't have an expiration date</Trans>
+                    </p>
+                  )}
+                </div>
+
+                <div>
+                  <TokenDeleteDialog token={token} teamId={team.id}>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
+                  </TokenDeleteDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/webhooks.$id.tsx

@@ -28,7 +28,7 @@ import { SettingsHeader } from '~/components/general/settings-header';
 import { WebhookMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
 import { useCurrentTeam } from '~/providers/team';
 
-import type { Route } from './+types/settings.webhooks.$id';
+import type { Route } from './+types/webhooks.$id';
 
 const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.tokens.tsx

@@ -1,3 +0,0 @@
-import ApiTokensPage from '~/routes/_authenticated+/settings+/tokens';
-
-export default ApiTokensPage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._index.tsx

@@ -1,4 +1,4 @@
-import TemplatePage, { loader } from '~/routes/_authenticated+/templates.$id._index';
+import TemplatePage, { loader } from '~/routes/_authenticated+/templates+/$id._index';
 
 export { loader };