feat: migrate webhook to background job

Update documentation to match reality. colorPrimary, colorBackground,
and borderRadius do not exist according to the schema:
280251cfdd/packages/react/src/css-vars.ts

.env.example

@@ -22,7 +22,6 @@ 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']
+    branches: ['main', 'feat/rr7']
   pull_request:
     branches: ['main']
 jobs:

.gitpod.yml

@@ -5,7 +5,6 @@ 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,9 +4,6 @@
 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,7 +166,6 @@ 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
@@ -237,7 +236,6 @@ 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,8 +7,7 @@
     "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={{
-    colorPrimary: '#0000FF',
+    primary: '#0000FF',
-    colorBackground: '#F5F5F5',
+    background: '#F5F5F5',
-    borderRadius: '8px',
+    radius: '8px',
   }}
 />
 ```

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

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

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

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

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

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

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

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

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

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

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

@@ -16,7 +16,7 @@ Pick the one that fits your needs the best.
 ## Tech Stack
 
 - [Typescript](https://www.typescriptlang.org/) - Language
-- [ReactRouter](https://reactrouter.com/) - Framework
+- [React Router](https://reactrouter.com/) - Framework
 - [Prisma](https://www.prisma.io/) - ORM
 - [Tailwind](https://tailwindcss.com/) - CSS
 - [shadcn/ui](https://ui.shadcn.com/) - Component Library

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

@@ -34,7 +34,6 @@ 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,35 +13,13 @@ 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/macro** (not @lingui/react).
+Wrap all text to translate in **`<Trans></Trans>`** tags exported from **@lingui/react/macro**.
 
 ```html
 <h1>
@@ -64,8 +42,9 @@ For text that is broken into elements, but represent a whole sentence, you must
 ### Constants outside of react components
 
 ```tsx
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/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 = {
@@ -98,31 +77,13 @@ 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 } = setupI18nSSR();
+  const { i18n } = useLingui();
 
   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,14 +21,25 @@ Check out the [API V1 documentation](https://app.documenso.com/api/v1/openapi) f
 
 ## API V2 - Beta
 
-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.
+<Callout type="warning">API V2 is currently beta, and will be subject to breaking changes</Callout>
 
-<Callout type="warning">
+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.
-  NOW IN BETA: [API V2 Documentation](https://documen.so/api-v2-docs)
+
+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>
 
 🚀 [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,7 +37,6 @@ 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,8 +7,7 @@
     "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 bash
+#!/usr/bin/env sh
 
 # Exit on error.
 set -eo pipefail

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

@@ -0,0 +1,77 @@
+#!/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/document-duplicate-dialog.tsx

@@ -13,7 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/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">
-            <LazyPDFViewer key={document?.id} documentData={documentData} />
+            <PDFViewer key={document?.id} documentData={documentData} />
           </div>
         )}
 

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

@@ -30,22 +30,20 @@ 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({
+export default function TokenDeleteDialog({ token, onDelete, children }: TokenDeleteDialogProps) {
-  teamId,
-  token,
-  onDelete,
-  children,
-}: TokenDeleteDialogProps) {
   const { _ } = useLingui();
   const { toast } = useToast();
 
+  const team = useOptionalCurrentTeam();
+
   const [isOpen, setIsOpen] = useState(false);
 
   const deleteMessage = _(msg`delete ${token.name}`);
@@ -75,7 +73,7 @@ export default function TokenDeleteDialog({
     try {
       await deleteTokenMutation({
         id: token.id,
-        teamId,
+        teamId: team?.id,
       });
 
       toast({

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

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

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

@@ -8,11 +8,17 @@ 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">
@@ -28,7 +34,15 @@ export const EmbedAuthenticationRequired = ({
           </AlertDescription>
         </Alert>
 
-        <SignInForm className="mt-4" initialEmail={email} returnTo={returnTo} />
+        <SignInForm
+          // Embed currently not supported.
+          // isGoogleSSOEnabled={isGoogleSSOEnabled}
+          // isOIDCSSOEnabled={isOIDCSSOEnabled}
+          // oidcProviderLabel={oidcProviderLabel}
+          className="mt-4"
+          initialEmail={email}
+          returnTo={returnTo}
+        />
       </div>
     </div>
   );

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

@@ -13,6 +13,10 @@ 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 {
@@ -25,7 +29,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 { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -47,7 +51,7 @@ export type EmbedDirectTemplateClientPageProps = {
   fields: Field[];
   metadata?: DocumentMeta | TemplateMeta | null;
   hidePoweredBy?: boolean;
-  isPlatformOrEnterprise?: boolean;
+  allowWhiteLabelling?: boolean;
 };
 
 export const EmbedDirectTemplateClientPage = ({
@@ -58,7 +62,7 @@ export const EmbedDirectTemplateClientPage = ({
   fields,
   metadata,
   hidePoweredBy = false,
-  isPlatformOrEnterprise = false,
+  allowWhiteLabelling = false,
 }: EmbedDirectTemplateClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -92,7 +96,7 @@ export const EmbedDirectTemplateClientPage = ({
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
 
   const [pendingFields, _completedFields] = [
-    localFields.filter((field) => !field.inserted),
+    localFields.filter((field) => isFieldUnsignedAndRequired(field)),
     localFields.filter((field) => field.inserted),
   ];
 
@@ -110,7 +114,7 @@ export const EmbedDirectTemplateClientPage = ({
 
         const newField: DirectTemplateLocalField = structuredClone({
           ...field,
-          customText: payload.value,
+          customText: payload.value ?? '',
           inserted: true,
           signedValue: payload,
         });
@@ -121,8 +125,10 @@ export const EmbedDirectTemplateClientPage = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64: payload.value.startsWith('data:') ? payload.value : null,
+            signatureImageAsBase64:
-            typedSignature: payload.value.startsWith('data:') ? null : payload.value,
+              payload.value && payload.value.startsWith('data:') ? payload.value : null,
+            typedSignature:
+              payload.value && !payload.value.startsWith('data:') ? payload.value : null,
           } satisfies Signature;
         }
 
@@ -180,7 +186,7 @@ export const EmbedDirectTemplateClientPage = ({
   };
 
   const onNextFieldClick = () => {
-    validateFieldsInserted(localFields);
+    validateFieldsInserted(pendingFields);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -192,7 +198,7 @@ export const EmbedDirectTemplateClientPage = ({
         return;
       }
 
-      const valid = validateFieldsInserted(localFields);
+      const valid = validateFieldsInserted(pendingFields);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -205,12 +211,6 @@ export const EmbedDirectTemplateClientPage = ({
         directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
       }
 
-      localFields.forEach((field) => {
-        if (!field.signedValue) {
-          throw new Error('Invalid configuration');
-        }
-      });
-
       const {
         documentId,
         token: documentToken,
@@ -221,13 +221,11 @@ export const EmbedDirectTemplateClientPage = ({
         directRecipientName: fullName,
         directRecipientEmail: email,
         templateUpdatedAt: updatedAt,
-        signedFieldValues: localFields.map((field) => {
+        signedFieldValues: localFields
-          if (!field.signedValue) {
+          .filter((field) => {
-            throw new Error('Invalid configuration');
+            return field.signedValue && (isRequiredField(field) || field.inserted);
-          }
+          })
-
+          .map((field) => field.signedValue!),
-          return field.signedValue;
-        }),
       });
 
       if (window.parent) {
@@ -286,7 +284,7 @@ export const EmbedDirectTemplateClientPage = ({
         document.documentElement.classList.add('dark-mode-disabled');
       }
 
-      if (isPlatformOrEnterprise) {
+      if (allowWhiteLabelling) {
         injectCss({
           css: data.css,
           cssVars: data.cssVars,
@@ -338,7 +336,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">
-          <LazyPDFViewer
+          <PDFViewer
             documentData={documentData}
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
@@ -347,7 +345,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Widget */}
         <div
           key={isExpanded ? 'expanded' : 'collapsed'}
-          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"
+          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"
           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">
@@ -415,40 +413,42 @@ export const EmbedDirectTemplateClientPage = ({
                   />
                 </div>
 
-                <div>
+                {hasSignatureField && (
-                  <Label htmlFor="Signature">
+                  <div>
-                    <Trans>Signature</Trans>
+                    <Label htmlFor="Signature">
-                  </Label>
+                      <Trans>Signature</Trans>
+                    </Label>
 
-                  <Card className="mt-2" gradient degrees={-120}>
+                    <Card className="mt-2" gradient degrees={-120}>
-                    <CardContent className="p-0">
+                      <CardContent className="p-0">
-                      <SignaturePad
+                        <SignaturePad
-                        className="h-44 w-full"
+                          className="h-44 w-full"
-                        disabled={isThrottled || isSubmitting}
+                          disabled={isThrottled || isSubmitting}
-                        defaultValue={signature ?? undefined}
+                          defaultValue={signature ?? undefined}
-                        onChange={(value) => {
+                          onChange={(value) => {
-                          setSignature(value);
+                            setSignature(value);
-                        }}
+                          }}
-                        onValidityChange={(isValid) => {
+                          onValidityChange={(isValid) => {
-                          setSignatureValid(isValid);
+                            setSignatureValid(isValid);
-                        }}
+                          }}
-                        allowTypedSignature={Boolean(
+                          allowTypedSignature={Boolean(
-                          metadata &&
+                            metadata &&
-                            'typedSignatureEnabled' in metadata &&
+                              'typedSignatureEnabled' in metadata &&
-                            metadata.typedSignatureEnabled,
+                              metadata.typedSignatureEnabled,
-                        )}
+                          )}
-                      />
+                        />
-                    </CardContent>
+                      </CardContent>
-                  </Card>
+                    </Card>
 
-                  {hasSignatureField && !signatureValid && (
+                    {hasSignatureField && !signatureValid && (
-                    <div className="text-destructive mt-2 text-sm">
+                      <div className="text-destructive mt-2 text-sm">
-                      <Trans>
+                        <Trans>
-                        Signature is too small. Please provide a more complete signature.
+                          Signature is too small. Please provide a more complete signature.
-                      </Trans>
+                        </Trans>
-                    </div>
+                      </div>
-                  )}
+                    )}
-                </div>
+                  </div>
+                )}
               </div>
             </div>
 

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

@@ -0,0 +1,33 @@
+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,14 +1,21 @@
-import { useEffect, useId, useLayoutEffect, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useMemo, 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 } from '@prisma/client';
+import {
+  type DocumentData,
+  type Field,
+  FieldType,
+  RecipientRole,
+  SigningStatus,
+} 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';
@@ -18,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 { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/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';
@@ -29,9 +36,11 @@ 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;
@@ -42,7 +51,7 @@ export type EmbedSignDocumentClientPageProps = {
   metadata?: DocumentMeta | TemplateMeta | null;
   isCompleted?: boolean;
   hidePoweredBy?: boolean;
-  isPlatformOrEnterprise?: boolean;
+  allowWhitelabelling?: boolean;
   allRecipients?: RecipientWithFields[];
 };
 
@@ -55,7 +64,7 @@ export const EmbedSignDocumentClientPage = ({
   metadata,
   isCompleted,
   hidePoweredBy = false,
-  isPlatformOrEnterprise = false,
+  allowWhitelabelling = false,
   allRecipients = [],
 }: EmbedSignDocumentClientPageProps) => {
   const { _ } = useLingui();
@@ -74,6 +83,9 @@ 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,
   );
@@ -82,25 +94,34 @@ 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 && !field.inserted),
+    fields.filter(
+      (field) => field.recipientId === recipient.id && isFieldUnsignedAndRequired(field),
+    ),
     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(fields);
+    validateFieldsInserted(fieldsRequiringValidation);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -112,7 +133,7 @@ export const EmbedSignDocumentClientPage = ({
         return;
       }
 
-      const valid = validateFieldsInserted(fields);
+      const valid = validateFieldsInserted(fieldsRequiringValidation);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -160,6 +181,25 @@ 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);
 
@@ -173,12 +213,13 @@ 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 (isPlatformOrEnterprise) {
+      if (allowWhitelabelling) {
         injectCss({
           css: data.css,
           cssVars: data.cssVars,
@@ -207,6 +248,10 @@ export const EmbedSignDocumentClientPage = ({
     }
   }, [hasFinishedInit, hasDocumentLoaded]);
 
+  if (hasRejectedDocument) {
+    return <EmbedDocumentRejected />;
+  }
+
   if (hasCompletedDocument) {
     return (
       <EmbedDocumentCompleted
@@ -228,10 +273,20 @@ 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">
-            <LazyPDFViewer
+            <PDFViewer
               documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
@@ -240,7 +295,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 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 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"
             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">
@@ -371,40 +426,42 @@ export const EmbedSignDocumentClientPage = ({
                         />
                       </div>
 
-                      <div>
+                      {hasSignatureField && (
-                        <Label htmlFor="Signature">
+                        <div>
-                          <Trans>Signature</Trans>
+                          <Label htmlFor="Signature">
-                        </Label>
+                            <Trans>Signature</Trans>
+                          </Label>
 
-                        <Card className="mt-2" gradient degrees={-120}>
+                          <Card className="mt-2" gradient degrees={-120}>
-                          <CardContent className="p-0">
+                            <CardContent className="p-0">
-                            <SignaturePad
+                              <SignaturePad
-                              className="h-44 w-full"
+                                className="h-44 w-full"
-                              disabled={isThrottled || isSubmitting}
+                                disabled={isThrottled || isSubmitting}
-                              defaultValue={signature ?? undefined}
+                                defaultValue={signature ?? undefined}
-                              onChange={(value) => {
+                                onChange={(value) => {
-                                setSignature(value);
+                                  setSignature(value);
-                              }}
+                                }}
-                              onValidityChange={(isValid) => {
+                                onValidityChange={(isValid) => {
-                                setSignatureValid(isValid);
+                                  setSignatureValid(isValid);
-                              }}
+                                }}
-                              allowTypedSignature={Boolean(
+                                allowTypedSignature={Boolean(
-                                metadata &&
+                                  metadata &&
-                                  'typedSignatureEnabled' in metadata &&
+                                    'typedSignatureEnabled' in metadata &&
-                                  metadata.typedSignatureEnabled,
+                                    metadata.typedSignatureEnabled,
-                              )}
+                                )}
-                            />
+                              />
-                          </CardContent>
+                            </CardContent>
-                        </Card>
+                          </Card>
 
-                        {hasSignatureField && !signatureValid && (
+                          {hasSignatureField && !signatureValid && (
-                          <div className="text-destructive mt-2 text-sm">
+                            <div className="text-destructive mt-2 text-sm">
-                            <Trans>
+                              <Trans>
-                              Signature is too small. Please provide a more complete signature.
+                                Signature is too small. Please provide a more complete signature.
-                            </Trans>
+                              </Trans>
-                          </div>
+                            </div>
-                        )}
+                          )}
-                      </div>
+                        </div>
+                      )}
                     </>
                   )}
                 </div>
@@ -419,7 +476,7 @@ export const EmbedSignDocumentClientPage = ({
                   </Button>
                 ) : (
                   <Button
-                    className="col-start-2"
+                    className={allowDocumentRejection ? 'col-start-2' : 'col-span-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 { revalidate } = useRevalidator();
+  const { refreshSession } = useSession();
 
   const [isOpen, setIsOpen] = useState(false);
   const [twoFactorDisableMethod, setTwoFactorDisableMethod] = useState<'totp' | 'backup'>('totp');
@@ -92,7 +92,7 @@ export const DisableAuthenticatorAppDialog = () => {
         onCloseTwoFactorDisableDialog();
       });
 
-      await revalidate();
+      await refreshSession();
     } 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 { revalidate } = useRevalidator();
+  const { refreshSession } = useSession();
 
   const [isOpen, setIsOpen] = useState(false);
   const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
@@ -74,6 +74,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     try {
       const data = await authClient.twoFactor.setup();
+      await refreshSession();
 
       setSetup2FAData(data);
     } catch (err) {
@@ -92,6 +93,7 @@ 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?.();
@@ -139,7 +141,6 @@ 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 } = useSession();
+  const { user, refreshSession } = 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>Password</Trans>
+                  <Trans>New Password</Trans>
                 </FormLabel>
                 <FormControl>
                   <PasswordInput autoComplete="new-password" {...field} />

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

@@ -3,7 +3,6 @@ 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';
@@ -42,8 +41,7 @@ export type ProfileFormProps = {
 export const ProfileForm = ({ className }: ProfileFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-  const { user } = useSession();
+  const { user, refreshSession } = useSession();
-  const { revalidate } = useRevalidator();
 
   const form = useForm<TProfileFormSchema>({
     values: {
@@ -64,13 +62,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

@@ -1,197 +0,0 @@
-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/token.tsx

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

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

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,48 @@
+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 { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/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">
-          <LazyPDFViewer
+          <PDFViewer
             key={template.id}
             documentData={template.templateDocumentData}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}

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

@@ -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,
+            signatureImageAsBase64: value.value?.startsWith('data:') ? value.value : null,
-            typedSignature: value.value.startsWith('data:') ? null : value.value,
+            typedSignature: value.value && !value.value.startsWith('data:') ? value.value : null,
           } satisfies Signature;
         }
 

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

@@ -45,7 +45,12 @@ export const DocumentSigningCheckboxField = ({
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
-  const parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
+  const parsedFieldMeta = ZCheckboxFieldMeta.parse(
+    field.fieldMeta ?? {
+      type: 'checkbox',
+      values: [{ id: 1, checked: false, value: '' }],
+    },
+  );
 
   const values = parsedFieldMeta.values?.map((item) => ({
     ...item,

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

@@ -3,6 +3,7 @@ import { useMemo, useState } from 'react';
 import { Trans } from '@lingui/react/macro';
 import type { Field } from '@prisma/client';
 import { RecipientRole } from '@prisma/client';
+import { match } from 'ts-pattern';
 
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { Button } from '@documenso/ui/primitives/button';
@@ -58,62 +59,88 @@ export const DocumentSigningCompleteDialog = ({
           loading={isSubmitting}
           disabled={disabled}
         >
-          {isComplete ? <Trans>Complete</Trans> : <Trans>Next field</Trans>}
+          {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()}
         </Button>
       </DialogTrigger>
 
       <DialogContent>
         <DialogTitle>
           <div className="text-foreground text-xl font-semibold">
-            {role === RecipientRole.VIEWER && <Trans>Complete Viewing</Trans>}
+            {match(role)
-            {role === RecipientRole.SIGNER && <Trans>Complete Signing</Trans>}
+              .with(RecipientRole.VIEWER, () => <Trans>Complete Viewing</Trans>)
-            {role === RecipientRole.APPROVER && <Trans>Complete Approval</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()}
           </div>
         </DialogTitle>
 
         <div className="text-muted-foreground max-w-[50ch]">
-          {role === RecipientRole.VIEWER && (
+          {match(role)
-            <span>
+            .with(RecipientRole.VIEWER, () => (
-              <Trans>
+              <span>
-                <span className="inline-flex flex-wrap">
+                <Trans>
-                  You are about to complete viewing "
+                  <span className="inline-flex flex-wrap">
-                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                    You are about to complete viewing "
-                    {documentTitle}
+                    <span className="inline-block max-w-[11rem] truncate align-baseline">
+                      {documentTitle}
+                    </span>
+                    ".
                   </span>
-                  ".
+                  <br /> Are you sure?
-                </span>
+                </Trans>
-                <br /> Are you sure?
+              </span>
-              </Trans>
+            ))
-            </span>
+            .with(RecipientRole.SIGNER, () => (
-          )}
+              <span>
-          {role === RecipientRole.SIGNER && (
+                <Trans>
-            <span>
+                  <span className="inline-flex flex-wrap">
-              <Trans>
+                    You are about to complete signing "
-                <span className="inline-flex flex-wrap">
+                    <span className="inline-block max-w-[11rem] truncate align-baseline">
-                  You are about to complete signing "
+                      {documentTitle}
-                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                    </span>
-                    {documentTitle}
+                    ".
                   </span>
-                  ".
+                  <br /> Are you sure?
-                </span>
+                </Trans>
-                <br /> Are you sure?
+              </span>
-              </Trans>
+            ))
-            </span>
+            .with(RecipientRole.APPROVER, () => (
-          )}
+              <span>
-          {role === RecipientRole.APPROVER && (
+                <Trans>
-            <span>
+                  <span className="inline-flex flex-wrap">
-              <Trans>
+                    You are about to complete approving{' '}
-                <span className="inline-flex flex-wrap">
+                    <span className="inline-block max-w-[11rem] truncate align-baseline">
-                  You are about to complete approving{' '}
+                      "{documentTitle}"
-                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                    </span>
-                    "{documentTitle}"
+                    .
                   </span>
-                  .
+                  <br /> Are you sure?
-                </span>
+                </Trans>
-                <br /> Are you sure?
+              </span>
-              </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>
 
         <DocumentSigningDisclosure className="mt-4" />
@@ -138,9 +165,13 @@ export const DocumentSigningCompleteDialog = ({
               loading={isSubmitting}
               onClick={onSignatureComplete}
             >
-              {role === RecipientRole.VIEWER && <Trans>Mark as Viewed</Trans>}
+              {match(role)
-              {role === RecipientRole.SIGNER && <Trans>Sign</Trans>}
+                .with(RecipientRole.VIEWER, () => <Trans>Mark as Viewed</Trans>)
-              {role === RecipientRole.APPROVER && <Trans>Approve</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()}
             </Button>
           </div>
         </DialogFooter>

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

@@ -181,6 +181,23 @@ 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

@@ -313,7 +313,11 @@ export const DocumentSigningForm = ({
             <>
               <form onSubmit={handleSubmit(onFormSubmit)}>
                 <p className="text-muted-foreground mt-2 text-sm">
-                  <Trans>Please review the document before signing.</Trans>
+                  {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" />
@@ -337,38 +341,40 @@ export const DocumentSigningForm = ({
                       />
                     </div>
 
-                    <div>
+                    {hasSignatureField && (
-                      <Label htmlFor="Signature">
+                      <div>
-                        <Trans>Signature</Trans>
+                        <Label htmlFor="Signature">
-                      </Label>
+                          <Trans>Signature</Trans>
+                        </Label>
 
-                      <Card className="mt-2" gradient degrees={-120}>
+                        <Card className="mt-2" gradient degrees={-120}>
-                        <CardContent className="p-0">
+                          <CardContent className="p-0">
-                          <SignaturePad
+                            <SignaturePad
-                            className="h-44 w-full"
+                              className="h-44 w-full"
-                            disabled={isSubmitting}
+                              disabled={isSubmitting}
-                            defaultValue={signature ?? undefined}
+                              defaultValue={signature ?? undefined}
-                            onValidityChange={(isValid) => {
+                              onValidityChange={(isValid) => {
-                              setSignatureValid(isValid);
+                                setSignatureValid(isValid);
-                            }}
+                              }}
-                            onChange={(value) => {
+                              onChange={(value) => {
-                              if (signatureValid) {
+                                if (signatureValid) {
-                                setSignature(value);
+                                  setSignature(value);
-                              }
+                                }
-                            }}
+                              }}
-                            allowTypedSignature={document.documentMeta?.typedSignatureEnabled}
+                              allowTypedSignature={document.documentMeta?.typedSignatureEnabled}
-                          />
+                            />
-                        </CardContent>
+                          </CardContent>
-                      </Card>
+                        </Card>
 
-                      {hasSignatureField && !signatureValid && (
+                        {!signatureValid && (
-                        <div className="text-destructive mt-2 text-sm">
+                          <div className="text-destructive mt-2 text-sm">
-                          <Trans>
+                            <Trans>
-                            Signature is too small. Please provide a more complete signature.
+                              Signature is too small. Please provide a more complete signature.
-                          </Trans>
+                            </Trans>
-                        </div>
+                          </div>
-                      )}
+                        )}
-                    </div>
+                      </div>
+                    )}
                   </div>
 
                   <div className="flex flex-col gap-4 md:flex-row">

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 { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
 import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
@@ -140,12 +140,7 @@ export const DocumentSigningPageView = ({
             gradient
           >
             <CardContent className="p-2">
-              <LazyPDFViewer
+              <PDFViewer key={documentData.id} documentData={documentData} document={document} />
-                key={documentData.id}
-                documentData={documentData}
-                document={document}
-                password={documentMeta?.password}
-              />
             </CardContent>
           </Card>
 

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

@@ -42,9 +42,14 @@ 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 }: DocumentSigningRejectDialogProps) {
+export function DocumentSigningRejectDialog({
+  document,
+  token,
+  onRejected,
+}: DocumentSigningRejectDialogProps) {
   const { toast } = useToast();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -75,9 +80,13 @@ export function DocumentSigningRejectDialog({ document, token }: DocumentSigning
         duration: 5000,
       });
 
-      await navigate(`/sign/${token}/rejected`);
-
       setIsOpen(false);
+
+      if (onRejected) {
+        await onRejected(reason);
+      } else {
+        await navigate(`/sign/${token}/rejected`);
+      }
     } catch (err) {
       toast({
         title: 'Error',

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 { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -132,9 +132,6 @@ export const DocumentEditForm = ({
     },
   });
 
-  const { mutateAsync: setPasswordForDocument } =
-    trpc.document.setPasswordForDocument.useMutation();
-
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
     settings: {
       title: msg`General`,
@@ -315,13 +312,6 @@ export const DocumentEditForm = ({
     }
   };
 
-  const onPasswordSubmit = async (password: string) => {
-    await setPasswordForDocument({
-      documentId: document.id,
-      password,
-    });
-  };
-
   const currentDocumentFlow = documentFlow[step];
 
   /**
@@ -340,12 +330,10 @@ export const DocumentEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer
+          <PDFViewer
             key={document.documentData.id}
             documentData={document.documentData}
             document={document}
-            password={document.documentMeta?.password}
-            onPasswordSubmit={onPasswordSubmit}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

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

@@ -85,7 +85,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         timestamp: new Date().toISOString(),
       });
 
-      void navigate(`${formatDocumentsPath(team?.url)}/${id}/edit`);
+      await 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 Page not found`,
+    subHeading: msg`404 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 || 404] ?? defaultErrorCodeMap[500];
+    errorCodeMap[errorCode || 500] ?? 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,11 +2,16 @@ 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 } = useRevalidator();
+  const { revalidate, state } = useRevalidator();
 
   const onFocus = useCallback(() => {
-    void revalidate();
+    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;
+  title: string | React.ReactNode;
-  subtitle: string;
+  subtitle: string | React.ReactNode;
   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 { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/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';
@@ -236,7 +236,7 @@ export const TemplateEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer
+          <PDFViewer
             key={templateDocumentData.id}
             documentData={templateDocumentData}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}

apps/remix/app/entry.client.tsx

@@ -1,21 +1,31 @@
-import { StrictMode, startTransition } from 'react';
+import { StrictMode, startTransition, useEffect } 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';
 
-async function main() {
+function PosthogInit() {
-  const theme = match(document.documentElement.getAttribute('data-theme'))
+  const postHogConfig = extractPostHogConfig();
-    .with('dark', () => Theme.DARK)
-    .with('light', () => Theme.LIGHT)
-    .otherwise(() => null);
 
+  useEffect(() => {
+    if (postHogConfig) {
+      posthog.init(postHogConfig.key, {
+        api_host: postHogConfig.host,
+        capture_exceptions: true,
+      });
+    }
+  }, []);
+
+  return null;
+}
+
+async function main() {
   const locale = detect(fromHtmlTag('lang')) || 'en';
 
   await dynamicActivate(locale);
@@ -25,10 +35,10 @@ async function main() {
       document,
       <StrictMode>
         <I18nProvider i18n={i18n}>
-          <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
+          <HydratedRouter />
-            <HydratedRouter />
-          </ThemeProvider>
         </I18nProvider>
+
+        <PosthogInit />
       </StrictMode>,
     );
   });

apps/remix/app/entry.server.tsx

@@ -7,13 +7,11 @@ 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;
 
@@ -32,10 +30,6 @@ 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');
@@ -47,9 +41,7 @@ export default async function handleRequest(
 
     const { pipe, abort } = renderToPipeableStream(
       <I18nProvider i18n={i18n}>
-        <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
+        <ServerRouter context={routerContext} url={request.url} />
-          <ServerRouter context={routerContext} url={request.url} />
-        </ThemeProvider>
       </I18nProvider>,
       {
         [readyOption]() {

apps/remix/app/providers/posthog.tsx

@@ -1,47 +0,0 @@
-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 { Suspense, useEffect } from 'react';
+import { useEffect } from 'react';
 
 import Plausible from 'plausible-tracker';
 import {
@@ -12,7 +12,7 @@ import {
   useLoaderData,
   useLocation,
 } from 'react-router';
-import { PreventFlashOnWrongTheme, useTheme } from 'remix-themes';
+import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from 'remix-themes';
 
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { SessionProvider } from '@documenso/lib/client-only/providers/session';
@@ -27,8 +27,6 @@ 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';
@@ -106,9 +104,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {
-  const { publicEnv, lang, session, ...data } = useLoaderData<typeof loader>() || {};
+  const { theme } = useLoaderData<typeof loader>() || {};
-
-  const [theme] = useTheme();
 
   const location = useLocation();
 
@@ -118,6 +114,18 @@ 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>
@@ -133,10 +141,6 @@ export function Layout({ 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>
@@ -154,8 +158,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <ScrollRestoration />
         <Scripts />
 
-        <RefreshOnFocus />
-
         <script
           dangerouslySetInnerHTML={{
             __html: `window.__ENV__ = ${JSON.stringify(publicEnv)}`,
@@ -171,9 +173,11 @@ export default function App() {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  console.error('[RootErrorBoundary]', error);
-
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
+  if (errorCode !== 404) {
+    console.error('[RootErrorBoundary]', error);
+  }
+
   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 const loader = async ({ request }: Route.LoaderArgs) => {
+export async function loader({ request }: Route.LoaderArgs) {
   const requestHeaders = Object.fromEntries(request.headers.entries());
 
   const session = await getOptionalSession(request);
 
   if (!session.isAuthenticated) {
-    return redirect('/signin');
+    throw redirect('/signin');
   }
 
   const [limits, banner] = await Promise.all([
@@ -40,7 +40,7 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
     banner,
     limits,
   };
-};
+}
 
 export default function Layout({ loaderData }: Route.ComponentProps) {
   const { user, teams } = useSession();

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 { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/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/$id._index';
+import type { Route } from './+types/documents.$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">
-            <LazyPDFViewer document={document} key={documentData.id} documentData={documentData} />
+            <PDFViewer document={document} key={documentData.id} documentData={documentData} />
           </CardContent>
         </Card>
 

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

@@ -16,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/$id.edit';
+import type { Route } from './+types/documents.$id.edit';
 
 export async function loader({ params, request }: Route.LoaderArgs) {
   const { user } = await getSession(request);

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/$id.logs';
+import type { Route } from './+types/documents.$id.logs';
 
 export async function loader({ params, request }: Route.LoaderArgs) {
   const { user } = await getSession(request);

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

@@ -0,0 +1,157 @@
+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.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 { SettingsPublicProfileTemplatesTable } from '../../../../components/tables/settings-public-profile-templates-table';
+import type { Route } from './+types/public-profile';
-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 } = useSession();
+  const { user, refreshSession } = useSession();
   const team = useOptionalCurrentTeam();
 
   const [isPublicProfileVisible, setIsPublicProfileVisible] = useState(profile.enabled);
@@ -96,6 +96,9 @@ 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';
+import type { Route } from './+types/security._index';
 
 export function meta() {
   return appMetaTags('Security');

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

@@ -7,11 +7,10 @@ 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

@@ -1,91 +0,0 @@
-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

@@ -0,0 +1,116 @@
+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+/tokens.tsx

@@ -1,126 +0,0 @@
-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._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/_index';
+import type { Route } from './+types/settings._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/_layout';
+import type { Route } from './+types/settings._layout';
 
 export function meta() {
   return appMetaTags('Team Settings');

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

@@ -14,8 +14,9 @@ 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/billing';
+import type { Route } from './+types/settings.billing';
 
 export async function loader({ request, params }: Route.LoaderArgs) {
   const session = await getSession(request);
@@ -31,16 +32,16 @@ export async function loader({ request, params }: Route.LoaderArgs) {
     teamSubscription = await stripe.subscriptions.retrieve(team.subscription.planId);
   }
 
-  return {
+  return superLoaderJson({
     team,
     teamSubscription,
-  };
+  });
 }
 
-export default function TeamsSettingBillingPage({ loaderData }: Route.ComponentProps) {
+export default function TeamsSettingBillingPage() {
   const { _ } = useLingui();
 
-  const { team, teamSubscription } = loaderData;
+  const { team, teamSubscription } = useSuperLoaderData<typeof loader>();
 
   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/preferences';
+import type { Route } from './+types/settings.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+/index';
+import PublicProfilePage from '~/routes/_authenticated+/settings+/public-profile';
 
-import type { Route } from './+types/public-profile';
+import type { Route } from './+types/settings.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,3 @@
+import ApiTokensPage from '~/routes/_authenticated+/settings+/tokens';
+
+export default ApiTokensPage;

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/webhooks.$id';
+import type { Route } from './+types/settings.webhooks.$id';
 
 const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
 

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 };
 

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

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

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

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

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

@@ -9,7 +9,7 @@ import { getTemplateById } from '@documenso/lib/server-only/template/get-templat
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
 import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
 import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
@@ -24,7 +24,7 @@ import { TemplateType } from '~/components/general/template/template-type';
 import { TemplatesTableActionDropdown } from '~/components/tables/templates-table-action-dropdown';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
-import type { Route } from './+types/$id._index';
+import type { Route } from './+types/templates.$id._index';
 
 export async function loader({ params, request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
@@ -144,11 +144,7 @@ export default function TemplatePage() {
           gradient
         >
           <CardContent className="p-2">
-            <LazyPDFViewer
+            <PDFViewer document={template} key={template.id} documentData={templateDocumentData} />
-              document={template}
-              key={template.id}
-              documentData={templateDocumentData}
-            />
           </CardContent>
         </Card>
 

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

@@ -13,8 +13,8 @@ import { TemplateEditForm } from '~/components/general/template/template-edit-fo
 import { TemplateType } from '~/components/general/template/template-type';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
-import { TemplateDirectLinkDialogWrapper } from '../../../components/dialogs/template-direct-link-dialog-wrapper';
+import { TemplateDirectLinkDialogWrapper } from '../../components/dialogs/template-direct-link-dialog-wrapper';
-import type { Route } from './+types/$id.edit';
+import type { Route } from './+types/templates.$id.edit';
 
 export async function loader({ params, request }: Route.LoaderArgs) {
   const { user } = await getSession(request);

apps/remix/app/routes/_index.tsx

@@ -1,14 +1,47 @@
 import { redirect } from 'react-router';
 
+import { extractCookieFromHeaders } from '@documenso/auth/server/lib/utils/cookies';
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { ZTeamUrlSchema } from '@documenso/trpc/server/team-router/schema';
 
 import type { Route } from './+types/_index';
 
 export async function loader({ request }: Route.LoaderArgs) {
-  const { isAuthenticated } = await getOptionalSession(request);
+  const session = await getOptionalSession(request);
 
-  if (isAuthenticated) {
+  if (session.isAuthenticated) {
-    throw redirect('/documents');
+    const teamUrlCookie = extractCookieFromHeaders('preferred-team-url', request.headers);
+
+    const referrer = request.headers.get('referer');
+    let isReferrerFromTeamUrl = false;
+
+    if (referrer) {
+      const referrerUrl = new URL(referrer);
+
+      if (referrerUrl.pathname.startsWith('/t/')) {
+        isReferrerFromTeamUrl = true;
+      }
+    }
+
+    const preferredTeamUrl =
+      teamUrlCookie && ZTeamUrlSchema.safeParse(teamUrlCookie).success ? teamUrlCookie : undefined;
+
+    // Early return for no preferred team.
+    if (!preferredTeamUrl || isReferrerFromTeamUrl) {
+      throw redirect('/documents');
+    }
+
+    const teams = await getTeams({ userId: session.user.id });
+
+    const currentTeam = teams.find((team) => team.url === preferredTeamUrl);
+
+    if (!currentTeam) {
+      throw redirect('/documents');
+    }
+
+    throw redirect(formatDocumentsPath(currentTeam.url));
   }
 
   throw redirect('/signin');

apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx

@@ -9,7 +9,7 @@ import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 import { findDocumentAuditLogs } from '@documenso/lib/server-only/document/find-document-audit-logs';
-import { dynamicActivate } from '@documenso/lib/utils/i18n';
+import { getTranslations } from '@documenso/lib/utils/i18n';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
@@ -49,10 +49,13 @@ export async function loader({ request }: Route.LoaderArgs) {
     perPage: 100_000,
   });
 
+  const messages = await getTranslations(documentLanguage);
+
   return {
     auditLogs,
     document,
     documentLanguage,
+    messages,
   };
 }
 
@@ -61,16 +64,15 @@ export async function loader({ request }: Route.LoaderArgs) {
  *
  * Cannot use dynamicActivate by itself to translate this specific page and all
  * children components because `not-found.tsx` page runs and overrides the i18n.
+ *
+ * Update: Maybe <Trans> tags work now after RR7 migration.
  */
 export default function AuditLog({ loaderData }: Route.ComponentProps) {
-  const { auditLogs, document, documentLanguage } = loaderData;
+  const { auditLogs, document, documentLanguage, messages } = loaderData;
 
-  const { i18n } = useLingui();
+  const { i18n, _ } = useLingui();
 
-  // Todo
+  i18n.loadAndActivate({ locale: documentLanguage, messages });
-  void dynamicActivate(documentLanguage);
-
-  const { _ } = useLingui();
 
   return (
     <div className="print-provider pointer-events-none mx-auto max-w-screen-md">

apps/remix/app/routes/_internal+/[__htmltopdf]+/certificate.tsx

@@ -16,6 +16,7 @@ import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt'
 import { getDocumentCertificateAuditLogs } from '@documenso/lib/server-only/document/get-document-certificate-audit-logs';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { getTranslations } from '@documenso/lib/utils/i18n';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   Table,
@@ -64,10 +65,13 @@ export async function loader({ request }: Route.LoaderArgs) {
     id: documentId,
   });
 
+  const messages = await getTranslations(documentLanguage);
+
   return {
     document,
     documentLanguage,
     auditLogs,
+    messages,
   };
 }
 
@@ -77,16 +81,15 @@ export async function loader({ request }: Route.LoaderArgs) {
  *
  * Cannot use dynamicActivate by itself to translate this specific page and all
  * children components because `not-found.tsx` page runs and overrides the i18n.
+ *
+ * Update: Maybe <Trans> tags work now after RR7 migration.
  */
 export default function SigningCertificate({ loaderData }: Route.ComponentProps) {
-  const { document, documentLanguage, auditLogs } = loaderData;
+  const { document, documentLanguage, auditLogs, messages } = loaderData;
 
-  const { i18n } = useLingui();
+  const { i18n, _ } = useLingui();
 
-  const { _ } = useLingui();
+  i18n.loadAndActivate({ locale: documentLanguage, messages });
-
-  // Todo
-  // dynamicActivate(i18n, documentLanguage);
 
   const isOwner = (email: string) => {
     return email.toLowerCase() === document.user.email.toLowerCase();

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

@@ -4,10 +4,10 @@ import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { PlusIcon } from 'lucide-react';
 import { ChevronLeft } from 'lucide-react';
-import { Link, Outlet } from 'react-router';
+import { Link, Outlet, isRouteErrorResponse } from 'react-router';
 
 import LogoIcon from '@documenso/assets/logo_icon.png';
-import { useSession } from '@documenso/lib/client-only/providers/session';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -16,12 +16,14 @@ import { BrandingLogo } from '~/components/general/branding-logo';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { appMetaTags } from '~/utils/meta';
 
+import type { Route } from './+types/_layout';
+
 export function meta() {
   return appMetaTags('Profile');
 }
 
 export default function PublicProfileLayout() {
-  const session = useSession();
+  const { sessionData } = useOptionalSession();
 
   const [scrollY, setScrollY] = useState(0);
 
@@ -37,8 +39,8 @@ export default function PublicProfileLayout() {
 
   return (
     <div className="min-h-screen">
-      {session ? (
+      {sessionData ? (
-        <AuthenticatedHeader user={session.user} teams={session.teams} />
+        <AuthenticatedHeader user={sessionData.user} teams={sessionData.teams} />
       ) : (
         <header
           className={cn(
@@ -96,7 +98,9 @@ export default function PublicProfileLayout() {
   );
 }
 
-export function ErrorBoundary() {
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const errorCode = isRouteErrorResponse(error) ? error.status : 500;
+
   const errorCodeMap = {
     404: {
       subHeading: msg`404 Profile not found`,
@@ -107,6 +111,7 @@ export function ErrorBoundary() {
 
   return (
     <GenericErrorLayout
+      errorCode={errorCode}
       errorCodeMap={errorCodeMap}
       secondaryButton={null}
       primaryButton={

apps/remix/app/routes/_profile+/p.$url.tsx

@@ -44,7 +44,6 @@ export async function loader({ params }: Route.LoaderArgs) {
     profileUrl,
   }).catch(() => null);
 
-  // Todo: Test
   if (!publicProfile || !publicProfile.profile.enabled) {
     throw new Response('Not Found', { status: 404 });
   }

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

@@ -1,11 +1,14 @@
 import { Trans } from '@lingui/react/macro';
 import { ChevronLeft } from 'lucide-react';
-import { Link, Outlet } from 'react-router';
+import { Link, Outlet, isRouteErrorResponse } from 'react-router';
 
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
 
 import { Header as AuthenticatedHeader } from '~/components/general/app-header';
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+
+import type { Route } from './+types/_layout';
 
 /**
  * A layout to handle scenarios where the user is a recipient of a given resource
@@ -29,35 +32,21 @@ export default function RecipientLayout() {
   );
 }
 
-// Todo: Use generic error boundary.
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-export function ErrorBoundary() {
+  const errorCode = isRouteErrorResponse(error) ? error.status : 500;
+
   return (
-    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+    <GenericErrorLayout
-      <div>
+      errorCode={errorCode}
-        <p className="text-muted-foreground font-semibold">
+      secondaryButton={null}
-          <Trans>404 Not found</Trans>
+      primaryButton={
-        </p>
+        <Button asChild className="w-32">
-
+          <Link to="/">
-        <h1 className="mt-3 text-2xl font-bold md:text-3xl">
+            <ChevronLeft className="mr-2 h-4 w-4" />
-          <Trans>Oops! Something went wrong.</Trans>
+            <Trans>Go Back</Trans>
-        </h1>
+          </Link>
-
+        </Button>
-        <p className="text-muted-foreground mt-4 text-sm">
+      }
-          <Trans>
+    />
-            The resource you are looking for may have been disabled, deleted or may have never
-            existed.
-          </Trans>
-        </p>
-
-        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
-          <Button asChild className="w-32">
-            <Link to="/">
-              <ChevronLeft className="mr-2 h-4 w-4" />
-              <Trans>Go Back</Trans>
-            </Link>
-          </Button>
-        </div>
-      </div>
-    </div>
   );
 }

apps/remix/app/routes/_redirects+/ingest.$.tsx

@@ -19,16 +19,30 @@ const posthogProxy = async (request: Request) => {
   const headers = new Headers(request.headers);
   headers.set('host', hostname);
 
-  const response = await fetch(newUrl, {
+  const fetchOptions: RequestInit = {
     method: request.method,
     headers,
-    body: request.body,
+    redirect: 'follow',
-  });
+  };
+
+  if (!['GET', 'HEAD'].includes(request.method)) {
+    fetchOptions.body = request.body;
+    // @ts-expect-error - It should exist
+    fetchOptions.duplex = 'half';
+  }
+
+  const response = await fetch(newUrl, fetchOptions);
+
+  const responseHeaders = new Headers(response.headers);
+  responseHeaders.delete('content-encoding');
+  responseHeaders.delete('content-length');
+  responseHeaders.delete('transfer-encoding');
+  responseHeaders.delete('cookie');
 
   return new Response(response.body, {
     status: response.status,
     statusText: response.statusText,
-    headers: response.headers,
+    headers: responseHeaders,
   });
 };
 

apps/remix/app/routes/_unauthenticated+/share.$slug.opengraph.tsx

@@ -1,11 +1,10 @@
-// Todo: Test, used AI to migrate this component from NextJS to Remix.
 import satori from 'satori';
 import sharp from 'sharp';
 import { P, match } from 'ts-pattern';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/document/get-recipient-or-sender-by-share-link-slug';
 
-import type { ShareHandlerAPIResponse } from '../api+/share';
 import type { Route } from './+types/share.$slug.opengraph';
 
 export const runtime = 'edge';
@@ -37,9 +36,9 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
     ),
   ]);
 
-  const recipientOrSender: ShareHandlerAPIResponse = await fetch(
+  const recipientOrSender = await getRecipientOrSenderByShareLinkSlug({
-    new URL(`/api/share?slug=${slug}`, baseUrl),
+    slug,
-  ).then(async (res) => res.json());
+  });
 
   if ('error' in recipientOrSender) {
     return Response.json({ error: 'Not found' }, { status: 404 });