fix: improve checkbox field rendering and interaction

2026-07-22 07:53:40 +10:00 · 2025-02-25 13:48:27 +00:00
45 changed files with 15022 additions and 14807 deletions
@@ -31,11 +31,6 @@ Our new API V2 supports the following typed SDKs:
 - [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)
@@ -13,7 +13,7 @@ import {
  DialogHeader,
  DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 import { useOptionalCurrentTeam } from '~/providers/team';
@@ -97,7 +97,7 @@ export const DocumentDuplicateDialog = ({
          </div>
        ) : (
          <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <PDFViewer key={document?.id} documentData={documentData} />
+            <LazyPDFViewer key={document?.id} documentData={documentData} />
          </div>
        )}

@@ -16,9 +16,9 @@ export type EmbedAuthenticationRequiredProps = {
 export const EmbedAuthenticationRequired = ({
  email,
  returnTo,
-  // isGoogleSSOEnabled,
-  // isOIDCSSOEnabled,
-  // oidcProviderLabel,
+  isGoogleSSOEnabled,
+  isOIDCSSOEnabled,
+  oidcProviderLabel,
 }: EmbedAuthenticationRequiredProps) => {
  return (
    <div className="flex min-h-[100dvh] w-full items-center justify-center">
@@ -35,10 +35,9 @@ export const EmbedAuthenticationRequired = ({
        </Alert>

        <SignInForm
-          // Embed currently not supported.
-          // isGoogleSSOEnabled={isGoogleSSOEnabled}
-          // isOIDCSSOEnabled={isOIDCSSOEnabled}
-          // oidcProviderLabel={oidcProviderLabel}
+          isGoogleSSOEnabled={isGoogleSSOEnabled}
+          isOIDCSSOEnabled={isOIDCSSOEnabled}
+          oidcProviderLabel={oidcProviderLabel}
          className="mt-4"
          initialEmail={email}
          returnTo={returnTo}
@@ -25,7 +25,7 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';

@@ -338,7 +338,7 @@ export const EmbedDirectTemplateClientPage = ({
      <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
        {/* Viewer */}
        <div className="flex-1">
-          <PDFViewer
+          <LazyPDFViewer
            documentData={documentData}
            onDocumentLoad={() => setHasDocumentLoaded(true)}
          />
@@ -24,7 +24,7 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -278,7 +278,7 @@ export const EmbedSignDocumentClientPage = ({
        <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
          {/* Viewer */}
          <div className="embed--DocumentViewer flex-1">
-            <PDFViewer
+            <LazyPDFViewer
              documentData={documentData}
              onDocumentLoad={() => setHasDocumentLoaded(true)}
            />
@@ -12,7 +12,7 @@ import { trpc } from '@documenso/trpc/react';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';

@@ -136,7 +136,7 @@ export const DirectTemplatePageView = ({
        gradient
      >
        <CardContent className="p-2">
-          <PDFViewer
+          <LazyPDFViewer
            key={template.id}
            documentData={template.templateDocumentData}
            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
@@ -45,24 +45,26 @@ export const DocumentSigningCheckboxField = ({

  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();

-  const parsedFieldMeta = ZCheckboxFieldMeta.parse(
-    field.fieldMeta ?? {
-      type: 'checkbox',
-      values: [{ id: 1, checked: false, value: '' }],
-    },
-  );
+  const parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);

  const values = parsedFieldMeta.values?.map((item) => ({
    ...item,
    value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
  }));

+  const parsedCheckedValues = useMemo(
+    () => fromCheckboxValue(field.customText),
+    [field.customText],
+  );
+
  const [checkedValues, setCheckedValues] = useState(
-    values
-      ?.map((item) =>
-        item.checked ? (item.value.length > 0 ? item.value : `empty-value-${item.id}`) : '',
-      )
-      .filter(Boolean) || [],
+    field.inserted && parsedCheckedValues.length > 0
+      ? parsedCheckedValues
+      : values
+          ?.map((item) =>
+            item.checked ? (item.value.length > 0 ? item.value : `empty-value-${item.id}`) : '',
+          )
+          .filter(Boolean) || [],
  );

  const isReadOnly = parsedFieldMeta.readOnly;
@@ -177,19 +179,13 @@ export const DocumentSigningCheckboxField = ({
    let updatedValues: string[] = [];

    try {
-      const isChecked = checkedValues.includes(
-        item.value.length > 0 ? item.value : `empty-value-${item.id}`,
-      );
+      const itemValue = item.value.length > 0 ? item.value : `empty-value-${item.id}`;
+      const isChecked = checkedValues.includes(itemValue);

      if (!isChecked) {
-        updatedValues = [
-          ...checkedValues,
-          item.value.length > 0 ? item.value : `empty-value-${item.id}`,
-        ];
+        updatedValues = [...checkedValues, itemValue];
      } else {
-        updatedValues = checkedValues.filter(
-          (v) => v !== item.value && v !== `empty-value-${item.id}`,
-        );
+        updatedValues = checkedValues.filter((v) => v !== itemValue);
      }

      setCheckedValues(updatedValues);
@@ -220,6 +216,12 @@ export const DocumentSigningCheckboxField = ({
    }
  };

+  useEffect(() => {
+    if (field.inserted && parsedCheckedValues.length > 0) {
+      setCheckedValues(parsedCheckedValues);
+    }
+  }, [field.inserted, parsedCheckedValues]);
+
  useEffect(() => {
    if (shouldAutoSignField) {
      void executeActionAuthProcedure({
@@ -229,11 +231,6 @@ export const DocumentSigningCheckboxField = ({
    }
  }, [checkedValues, isLengthConditionMet, field.inserted]);

-  const parsedCheckedValues = useMemo(
-    () => fromCheckboxValue(field.customText),
-    [field.customText],
-  );
-
  return (
    <DocumentSigningFieldContainer
      field={field}
@@ -257,16 +254,17 @@ export const DocumentSigningCheckboxField = ({
          <div className="z-50 flex flex-col gap-y-2">
            {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
              const itemValue = item.value || `empty-value-${item.id}`;
+              const checkboxId = `checkbox-field-${field.id}-${index}`;

              return (
                <div key={index} className="flex items-center gap-x-1.5">
                  <Checkbox
                    className="h-4 w-4"
-                    id={`checkbox-${index}`}
+                    id={checkboxId}
                    checked={checkedValues.includes(itemValue)}
                    onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                  />
-                  <Label htmlFor={`checkbox-${index}`}>
+                  <Label htmlFor={checkboxId}>
                    {item.value.includes('empty-value-') ? '' : item.value}
                  </Label>
                </div>
@@ -277,20 +275,21 @@ export const DocumentSigningCheckboxField = ({
      )}

      {field.inserted && (
-        <div className="flex flex-col gap-y-1">
+        <div className="flex flex-col gap-y-2">
          {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
            const itemValue = item.value || `empty-value-${item.id}`;
+            const checkboxId = `checkbox-field-${field.id}-${index}-inserted`;

            return (
              <div key={index} className="flex items-center gap-x-1.5">
                <Checkbox
-                  className="h-3 w-3"
-                  id={`checkbox-${index}`}
-                  checked={parsedCheckedValues.includes(itemValue)}
+                  className="h-4 w-4"
+                  id={checkboxId}
+                  checked={checkedValues.includes(itemValue)}
                  disabled={isLoading}
                  onCheckedChange={() => void handleCheckboxOptionClick(item)}
                />
-                <Label htmlFor={`checkbox-${index}`} className="text-xs">
+                <Label htmlFor={checkboxId}>
                  {item.value.includes('empty-value-') ? '' : item.value}
                </Label>
              </div>
@@ -21,7 +21,7 @@ import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/fie
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';

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

@@ -24,7 +24,7 @@ import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/ad
 import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';

@@ -132,6 +132,9 @@ export const DocumentEditForm = ({
    },
  });

+  const { mutateAsync: setPasswordForDocument } =
+    trpc.document.setPasswordForDocument.useMutation();
+
  const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
    settings: {
      title: msg`General`,
@@ -312,6 +315,13 @@ export const DocumentEditForm = ({
    }
  };

+  const onPasswordSubmit = async (password: string) => {
+    await setPasswordForDocument({
+      documentId: document.id,
+      password,
+    });
+  };
+
  const currentDocumentFlow = documentFlow[step];

  /**
@@ -330,10 +340,12 @@ export const DocumentEditForm = ({
        gradient
      >
        <CardContent className="p-2">
-          <PDFViewer
+          <LazyPDFViewer
            key={document.documentData.id}
            documentData={document.documentData}
            document={document}
+            password={document.documentMeta?.password}
+            onPasswordSubmit={onPasswordSubmit}
            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
          />
        </CardContent>
@@ -15,7 +15,7 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-fields';
 import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
@@ -236,7 +236,7 @@ export const TemplateEditForm = ({
        gradient
      >
        <CardContent className="p-2">
-          <PDFViewer
+          <LazyPDFViewer
            key={templateDocumentData.id}
            documentData={templateDocumentData}
            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
@@ -17,7 +17,6 @@ function PosthogInit() {
    if (postHogConfig) {
      posthog.init(postHogConfig.key, {
        api_host: postHogConfig.host,
-        capture_exceptions: true,
      });
    }
  }, []);
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';

 import Plausible from 'plausible-tracker';
-import posthog from 'posthog-js';
 import {
  Links,
  Meta,
@@ -181,7 +180,6 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {

  if (errorCode !== 404) {
    console.error('[RootErrorBoundary]', error);
-    posthog.captureException(error);
  }

  return <GenericErrorLayout errorCode={errorCode} />;
@@ -20,7 +20,7 @@ import type { Route } from './+types/_layout';
 */
 export const shouldRevalidate = () => false;

-export async function loader({ request }: Route.LoaderArgs) {
+export const loader = async ({ request }: Route.LoaderArgs) => {
  const requestHeaders = Object.fromEntries(request.headers.entries());

  const session = await getOptionalSession(request);
@@ -40,7 +40,7 @@ export async function loader({ request }: Route.LoaderArgs) {
    banner,
    limits,
  };
-}
+};

 export default function Layout({ loaderData }: Route.ComponentProps) {
  const { user, teams } = useSession();
@@ -16,7 +16,7 @@ import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';

 import { DocumentHistorySheet } from '~/components/general/document/document-history-sheet';
 import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
@@ -196,7 +196,7 @@ export default function DocumentPage() {
          gradient
        >
          <CardContent className="p-2">
-            <PDFViewer document={document} key={documentData.id} documentData={documentData} />
+            <LazyPDFViewer document={document} key={documentData.id} documentData={documentData} />
          </CardContent>
        </Card>

@@ -16,7 +16,6 @@ import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscriptio
 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';

@@ -63,17 +62,17 @@ export async function loader({ request }: Route.LoaderArgs) {
  const isMissingOrInactiveOrFreePlan =
    !subscription || subscription.status === SubscriptionStatus.INACTIVE;

-  return superLoaderJson({
+  return {
    prices,
    subscription,
    subscriptionProductName: subscriptionProduct?.name,
    isMissingOrInactiveOrFreePlan,
-  });
+  };
 }

-export default function TeamsSettingBillingPage() {
+export default function TeamsSettingBillingPage({ loaderData }: Route.ComponentProps) {
  const { prices, subscription, subscriptionProductName, isMissingOrInactiveOrFreePlan } =
-    useSuperLoaderData<typeof loader>();
+    loaderData;

  const { i18n } = useLingui();

@@ -14,7 +14,6 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { TeamBillingPortalButton } from '~/components/general/teams/team-billing-portal-button';
 import { TeamSettingsBillingInvoicesTable } from '~/components/tables/team-settings-billing-invoices-table';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';

 import type { Route } from './+types/settings.billing';

@@ -32,16 +31,16 @@ export async function loader({ request, params }: Route.LoaderArgs) {
    teamSubscription = await stripe.subscriptions.retrieve(team.subscription.planId);
  }

-  return superLoaderJson({
+  return {
    team,
    teamSubscription,
-  });
+  };
 }

-export default function TeamsSettingBillingPage() {
+export default function TeamsSettingBillingPage({ loaderData }: Route.ComponentProps) {
  const { _ } = useLingui();

-  const { team, teamSubscription } = useSuperLoaderData<typeof loader>();
+  const { team, teamSubscription } = loaderData;

  const canManageBilling = canExecuteTeamAction('MANAGE_BILLING', team.currentTeamMember.role);

@@ -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 { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';

 import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
 import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
@@ -144,7 +144,11 @@ export default function TemplatePage() {
          gradient
        >
          <CardContent className="p-2">
-            <PDFViewer document={template} key={template.id} documentData={templateDocumentData} />
+            <LazyPDFViewer
+              document={template}
+              key={template.id}
+              documentData={templateDocumentData}
+            />
          </CardContent>
        </Card>

@@ -1,47 +1,14 @@
 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 session = await getOptionalSession(request);
+  const { isAuthenticated } = await getOptionalSession(request);

-  if (session.isAuthenticated) {
-    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));
+  if (isAuthenticated) {
+    throw redirect('/documents');
  }

  throw redirect('/signin');
@@ -1 +0,0 @@
-export default {};
@@ -49,8 +49,8 @@
    "luxon": "^3.4.0",
    "papaparse": "^5.4.1",
    "plausible-tracker": "^0.3.9",
-    "posthog-js": "^1.224.0",
-    "posthog-node": "^4.8.1",
+    "posthog-js": "^1.223.3",
+    "posthog-node": "^4.7.0",
    "react": "^18",
    "react-call": "^1.3.0",
    "react-dom": "^18",
@@ -76,7 +76,7 @@
    "@babel/preset-typescript": "^7.26.0",
    "@lingui/babel-plugin-lingui-macro": "^5.2.0",
    "@lingui/vite-plugin": "^5.2.0",
-    "@react-router/dev": "^7.1.5",
+    "@react-router/dev": "^7.1.1",
    "@react-router/remix-routes-option-adapter": "^7.1.5",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^28.0.2",
@@ -1,75 +0,0 @@
-import type { Context, Next } from 'hono';
-import { deleteCookie, setCookie } from 'hono/cookie';
-
-import { AppDebugger } from '@documenso/lib/utils/debugger';
-
-const debug = new AppDebugger('Middleware');
-
-/**
- * Middleware for initial page loads.
- *
- * You won't be able to easily handle sequential page loads because they will be
- * called under `path.data`
- *
- * Example an initial page load would be `/documents` then if the user click templates
- * the path here would be `/templates.data`.
- */
-export const appMiddleware = async (c: Context, next: Next) => {
-  const { req } = c;
-  const { path } = req;
-
-  // Paths to ignore.
-  if (nonPagePathRegex.test(path)) {
-    return next();
-  }
-
-  // PRE-HANDLER CODE: Place code here to execute BEFORE the route handler runs.
-
-  await next();
-
-  // POST-HANDLER CODE: Place code here to execute AFTER the route handler completes.
-  // This is useful for:
-  // - Setting cookies
-  // - Any operations that should happen after all route handlers but before sending the response
-
-  debug.log('Path', path);
-
-  const pathname = path.replace('.data', '');
-  const referrer = c.req.header('referer');
-  const referrerUrl = referrer ? new URL(referrer) : null;
-  const referrerPathname = referrerUrl ? referrerUrl.pathname : null;
-
-  // Whether to reset the preferred team url cookie if the user accesses a non team page from a team page.
-  const resetPreferredTeamUrl =
-    referrerPathname &&
-    referrerPathname.startsWith('/t/') &&
-    (!pathname.startsWith('/t/') || pathname === '/');
-
-  // Set the preferred team url cookie if user accesses a team page.
-  if (pathname.startsWith('/t/')) {
-    debug.log('Setting preferred team url cookie');
-
-    setCookie(c, 'preferred-team-url', pathname.split('/')[2], {
-      sameSite: 'lax',
-    });
-
-    return;
-  }
-
-  // Clear preferred team url cookie if user accesses a non team page from a team page.
-  if (resetPreferredTeamUrl || pathname === '/documents') {
-    debug.log('Deleting preferred team url cookie');
-
-    deleteCookie(c, 'preferred-team-url');
-
-    return;
-  }
-};
-
-// This regex matches any path that:
-// 1. Starts with /api/, /ingest/, /__manifest/, or /assets/
-// 2. Starts with /apple- (like /apple-touch-icon.png)
-// 3. Starts with /favicon (like /favicon.ico)
-// The ^ ensures matching from the beginning of the string
-// The | acts as OR operator between different patterns
-const nonPagePathRegex = /^(\/api\/|\/ingest\/|\/__manifest|\/assets\/|\/apple-.*|\/favicon.*)/;
@@ -9,7 +9,6 @@ import { openApiDocument } from '@documenso/trpc/server/open-api';

 import { filesRoute } from './api/files';
 import { type AppContext, appContext } from './context';
-import { appMiddleware } from './middleware';
 import { openApiTrpcServerHandler } from './trpc/hono-trpc-open-api';
 import { reactRouterTrpcServer } from './trpc/hono-trpc-remix';

@@ -27,11 +26,6 @@ const app = new Hono<HonoEnv>();
 app.use(contextStorage());
 app.use(appContext);

-/**
- * RR7 app middleware.
- */
-app.use('*', appMiddleware);
-
 // Auth server.
 app.route('/api/auth', auth);

@@ -46,7 +46,6 @@ export default defineConfig({
      https: 'node:https',
      '.prisma/client/default': '../../node_modules/.prisma/client/default.js',
      '.prisma/client/index-browser': '../../node_modules/.prisma/client/index-browser.js',
-      canvas: './app/types/empty-module.ts',
    },
  },
  /**
@@ -1,6 +1,4 @@
-import { defineConfig } from '@lingui/cli';
 import type { LinguiConfig } from '@lingui/conf';
-import { formatter } from '@lingui/format-po';

 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';

@@ -16,7 +14,6 @@ const config: LinguiConfig = {
    },
  ],
  compileNamespace: 'es',
-  format: formatter({ lineNumbers: false }),
 };

 export default config;
@@ -131,8 +131,8 @@
        "luxon": "^3.4.0",
        "papaparse": "^5.4.1",
        "plausible-tracker": "^0.3.9",
-        "posthog-js": "^1.224.0",
-        "posthog-node": "^4.8.1",
+        "posthog-js": "^1.223.3",
+        "posthog-node": "^4.7.0",
        "react": "^18",
        "react-call": "^1.3.0",
        "react-dom": "^18",
@@ -158,7 +158,7 @@
        "@babel/preset-typescript": "^7.26.0",
        "@lingui/babel-plugin-lingui-macro": "^5.2.0",
        "@lingui/vite-plugin": "^5.2.0",
-        "@react-router/dev": "^7.1.5",
+        "@react-router/dev": "^7.1.1",
        "@react-router/remix-routes-option-adapter": "^7.1.5",
        "@rollup/plugin-babel": "^6.0.4",
        "@rollup/plugin-commonjs": "^28.0.2",
@@ -902,9 +902,9 @@
      }
    },
    "apps/remix/node_modules/posthog-node": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-4.8.1.tgz",
-      "integrity": "sha512-ApMEC1+DbctP/88+VhaCl8SRKpIoReibMf7Mb3rxw3yMthr1rKaM4opbHdZJ0buLhwS5zX8B2ckqLjpwpSjRPg==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-4.7.0.tgz",
+      "integrity": "sha512-RgdUKSW8MfMOkjUa8cYVqWndNjPePNuuxlGbrZC6z1WRBsVc6TdGl8caidmC10RW8mu/BOfmrGbP4cRTo2jARg==",
      "license": "MIT",
      "dependencies": {
        "axios": "^1.7.4"
@@ -31060,9 +31060,9 @@
      "license": "MIT"
    },
    "node_modules/posthog-js": {
-      "version": "1.224.0",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.224.0.tgz",
-      "integrity": "sha512-JT1XQQeYs0CKb4lU2vujmeLTDLWc61I5lT7d6oG/H/cnCpXAqBi5rMuCFFeotHeMy3hqJ/Tpu3eAPFE2p5ErHA==",
+      "version": "1.223.3",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.223.3.tgz",
+      "integrity": "sha512-ZQTc17M21IzkQmECJa2Xjont4tZrvIn252uGT3sTfmahTqZoW4j+kBj4eOJt9SNR6hOheFNkg7MSiI/rA6FaDA==",
      "license": "MIT",
      "dependencies": {
        "core-js": "^3.38.1",
@@ -41567,7 +41567,6 @@
        "pdf-lib": "^1.17.1",
        "pg": "^8.11.3",
        "playwright": "1.43.0",
-        "posthog-js": "^1.224.0",
        "react": "^18",
        "remeda": "^2.17.3",
        "sharp": "0.32.6",
@@ -10,7 +10,6 @@ import { appLog } from '@documenso/lib/utils/debugger';
 import { env } from '@documenso/lib/utils/env';

 import { AUTH_SESSION_LIFETIME } from '../../config';
-import { extractCookieFromHeaders } from '../utils/cookies';
 import { generateSessionToken } from './session';

 export const sessionCookieName = formatSecureCookieName('sessionId');
@@ -39,7 +38,15 @@ export const sessionCookieOptions = {
 } as const;

 export const extractSessionCookieFromHeaders = (headers: Headers): string | null => {
-  return extractCookieFromHeaders(sessionCookieName, headers);
+  const cookieHeader = headers.get('cookie') || '';
+  const cookiePairs = cookieHeader.split(';');
+  const sessionCookie = cookiePairs.find((pair) => pair.trim().startsWith(sessionCookieName));
+
+  if (!sessionCookie) {
+    return null;
+  }
+
+  return sessionCookie.split('=')[1].trim();
 };

 /**
@@ -1,14 +0,0 @@
-/**
- * Todo: Use library for cookies instead.
- */
-export const extractCookieFromHeaders = (cookieName: string, headers: Headers): string | null => {
-  const cookieHeader = headers.get('cookie') || '';
-  const cookiePairs = cookieHeader.split(';');
-  const cookie = cookiePairs.find((pair) => pair.trim().startsWith(cookieName));
-
-  if (!cookie) {
-    return null;
-  }
-
-  return cookie.split('=')[1].trim();
-};
@@ -45,7 +45,6 @@
    "pdf-lib": "^1.17.1",
    "pg": "^8.11.3",
    "playwright": "1.43.0",
-    "posthog-js": "^1.224.0",
    "react": "^18",
    "remeda": "^2.17.3",
    "sharp": "0.32.6",
@@ -65,9 +65,7 @@ export const createTeamMemberInvites = async ({
  });

  const teamMemberEmails = team.members.map((member) => member.user.email);
-  const teamMemberInviteEmails = team.invites
-    .filter((invite) => invite.status === TeamMemberInviteStatus.PENDING)
-    .map((invite) => invite.email);
+  const teamMemberInviteEmails = team.invites.map((invite) => invite.email);
  const currentTeamMember = team.members.find((member) => member.user.id === userId);

  if (!currentTeamMember) {
@@ -1,5 +1,5 @@
 import type { TeamMemberInvite } from '@prisma/client';
-import { Prisma, TeamMemberInviteStatus } from '@prisma/client';
+import { Prisma } from '@prisma/client';
 import { P, match } from 'ts-pattern';
 import type { z } from 'zod';

@@ -71,7 +71,6 @@ export const findTeamMemberInvites = async ({
  const whereClause: Prisma.TeamMemberInviteWhereInput = {
    ...termFilters,
    teamId: userTeam.id,
-    status: TeamMemberInviteStatus.PENDING,
  };

  const [data, count] = await Promise.all([
@@ -1,4 +1,3 @@
-import { TeamMemberInviteStatus } from '@prisma/client';
 import type { z } from 'zod';

 import { prisma } from '@documenso/prisma';
@@ -26,7 +25,6 @@ export const getTeamInvitations = async ({
  return await prisma.teamMemberInvite.findMany({
    where: {
      email,
-      status: TeamMemberInviteStatus.PENDING,
    },
    include: {
      team: {
@@ -647,6 +647,8 @@ model TeamMemberInvite {
  role      TeamMemberRole
  token     String                 @unique
  team      Team                   @relation(fields: [teamId], references: [id], onDelete: Cascade)
+
+  @@unique([teamId, email])
 }

 enum TemplateType {
@@ -4,6 +4,7 @@ import { DateTime } from 'luxon';

 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { encryptSecondaryData } from '@documenso/lib/server-only/crypto/encrypt';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
@@ -25,6 +26,7 @@ import { searchDocumentsWithKeyword } from '@documenso/lib/server-only/document/
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
 import { updateDocument } from '@documenso/lib/server-only/document/update-document';
 import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { symmetricEncrypt } from '@documenso/lib/universal/crypto';
 import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';

 import { authenticatedProcedure, procedure, router } from '../trpc';
@@ -53,6 +55,7 @@ import {
  ZMoveDocumentToTeamSchema,
  ZResendDocumentMutationSchema,
  ZSearchDocumentsMutationSchema,
+  ZSetPasswordForDocumentMutationSchema,
  ZSetSigningOrderForDocumentMutationSchema,
  ZSuccessResponseSchema,
  ZUpdateDocumentRequestSchema,
@@ -441,6 +444,35 @@ export const documentRouter = router({
      });
    }),

+  /**
+   * @private
+   */
+  setPasswordForDocument: authenticatedProcedure
+    .input(ZSetPasswordForDocumentMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      const { teamId } = ctx;
+      const { documentId, password } = input;
+
+      const key = DOCUMENSO_ENCRYPTION_KEY;
+
+      if (!key) {
+        throw new Error('Missing encryption key');
+      }
+
+      const securePassword = symmetricEncrypt({
+        data: password,
+        key,
+      });
+
+      await upsertDocumentMeta({
+        userId: ctx.user.id,
+        teamId,
+        documentId,
+        password: securePassword,
+        requestMetadata: ctx.metadata,
+      });
+    }),
+
  /**
   * @private
   *
@@ -6,7 +6,7 @@ import { X } from 'lucide-react';

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

 export type DocumentDialogProps = {
  trigger?: React.ReactNode;
@@ -43,7 +43,7 @@ export default function DocumentDialog({ trigger, documentData, ...props }: Docu
          )}
          onClick={() => props.onOpenChange?.(false)}
        >
-          <PDFViewer
+          <LazyPDFViewerNoLoader
            className="mx-auto w-full max-w-3xl xl:max-w-5xl"
            documentData={documentData}
            onClick={(e) => e.stopPropagation()}
@@ -1,5 +1,5 @@
-import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
 import type { TCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
+import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import { Label } from '@documenso/ui/primitives/label';

@@ -28,18 +28,22 @@ export const CheckboxField = ({ field }: CheckboxFieldProps) => {
      {!parsedFieldMeta?.values ? (
        <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />
      ) : (
-        parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => (
-          <div key={index} className="flex items-center gap-x-1.5">
-            <Checkbox
-              className="dark:border-field-border h-3 w-3 bg-white"
-              id={`checkbox-${index}`}
-              checked={item.checked}
-            />
-            <Label htmlFor={`checkbox-${index}`} className="text-xs font-normal text-black">
-              {item.value}
-            </Label>
-          </div>
-        ))
+        parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => {
+          const checkboxId = `checkbox-field-${field.formId}-${index}`;
+
+          return (
+            <div key={index} className="flex items-center gap-x-1.5">
+              <Checkbox
+                className="dark:border-field-border h-3 w-3 bg-white"
+                id={checkboxId}
+                checked={item.checked}
+              />
+              <Label htmlFor={checkboxId} className="text-xs font-normal text-black">
+                {item.value}
+              </Label>
+            </div>
+          );
+        })
      )}
    </div>
  );
@@ -205,6 +205,7 @@ export const CheckboxFieldAdvancedSettings = ({
            <div key={index} className="mt-2 flex items-center gap-4">
              <Checkbox
                className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
+                id={`checkbox-${value.id}-${index}`}
                checked={value.checked}
                onCheckedChange={(checked) => handleCheckboxValue(index, 'checked', checked)}
              />
@@ -0,0 +1,107 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from './button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';
+import { Form, FormControl, FormField, FormItem, FormMessage } from './form/form';
+import { Input } from './input';
+
+const ZPasswordDialogFormSchema = z.object({
+  password: z.string(),
+});
+
+type TPasswordDialogFormSchema = z.infer<typeof ZPasswordDialogFormSchema>;
+
+type PasswordDialogProps = {
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+  defaultPassword?: string;
+  onPasswordSubmit?: (password: string) => void;
+  isError?: boolean;
+};
+
+export const PasswordDialog = ({
+  open,
+  onOpenChange,
+  defaultPassword,
+  onPasswordSubmit,
+  isError,
+}: PasswordDialogProps) => {
+  const { _ } = useLingui();
+
+  const form = useForm<TPasswordDialogFormSchema>({
+    defaultValues: {
+      password: defaultPassword ?? '',
+    },
+    resolver: zodResolver(ZPasswordDialogFormSchema),
+  });
+
+  const onFormSubmit = ({ password }: TPasswordDialogFormSchema) => {
+    onPasswordSubmit?.(password);
+  };
+
+  useEffect(() => {
+    if (isError) {
+      form.setError('password', {
+        type: 'manual',
+        message: _(msg`The password you have entered is incorrect. Please try again.`),
+      });
+    }
+  }, [form, isError]);
+
+  return (
+    <Dialog open={open}>
+      <DialogContent className="w-full max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Password Required</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="text-muted-foreground">
+            <Trans>
+              This document is password protected. Please enter the password to view the document.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex flex-wrap items-start justify-between gap-4">
+              <FormField
+                name="password"
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem className="relative flex-1">
+                    <FormControl>
+                      <Input
+                        type="password"
+                        className="bg-background"
+                        placeholder={_(msg`Enter password`)}
+                        autoComplete="off"
+                        {...field}
+                      />
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div>
+                <Button>
+                  <Trans>Submit</Trans>
+                </Button>
+              </div>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
@@ -0,0 +1,31 @@
+// Todo: (RR7) Not sure if this actually makes it client-only.
+import { Suspense, lazy } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { Await } from 'react-router';
+
+const LoadingComponent = () => (
+  <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+    <Loader className="text-documenso h-12 w-12 animate-spin" />
+    <p className="text-muted-foreground mt-4">
+      <Trans>Loading document...</Trans>
+    </p>
+  </div>
+);
+
+export const LazyPDFViewerImport = lazy(async () => import('./pdf-viewer'));
+
+export const LazyPDFViewer = (props: React.ComponentProps<typeof LazyPDFViewerImport>) => (
+  <Suspense fallback={<LoadingComponent />}>
+    <Await resolve={LazyPDFViewerImport}>
+      <LazyPDFViewerImport {...props} />
+    </Await>
+  </Suspense>
+);
+
+export const LazyPDFViewerNoLoader = (props: React.ComponentProps<typeof LazyPDFViewer>) => (
+  <Suspense fallback={null}>
+    <LazyPDFViewerImport {...props} />
+  </Suspense>
+);
@@ -5,15 +5,18 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { DocumentData } from '@prisma/client';
 import { Loader } from 'lucide-react';
-import { type PDFDocumentProxy } from 'pdfjs-dist';
+import { type PDFDocumentProxy, PasswordResponses } from 'pdfjs-dist';
+import pdfWorker from 'pdfjs-dist/build/pdf.worker.min?url';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
+import { match } from 'ts-pattern';

 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { getFile } from '@documenso/lib/universal/upload/get-file';

 import { cn } from '../lib/utils';
+import { PasswordDialog } from './document-password-dialog';
 import { useToast } from './use-toast';

 export type LoadedPDFDocument = PDFDocumentProxy;
@@ -21,10 +24,7 @@ export type LoadedPDFDocument = PDFDocumentProxy;
 /**
 * This imports the worker from the `pdfjs-dist` package.
 */
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.js',
-  import.meta.url,
-).toString();
+pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker;

 export type OnPDFViewerPageClick = (_event: {
  pageNumber: number;
@@ -49,6 +49,8 @@ const PDFLoader = () => (
 export type PDFViewerProps = {
  className?: string;
  documentData: DocumentData;
+  password?: string | null;
+  onPasswordSubmit?: (password: string) => void | Promise<void>;
  onDocumentLoad?: (_doc: LoadedPDFDocument) => void;
  onPageClick?: OnPDFViewerPageClick;
  [key: string]: unknown;
@@ -57,6 +59,8 @@ export type PDFViewerProps = {
 export const PDFViewer = ({
  className,
  documentData,
+  password: defaultPassword,
+  onPasswordSubmit,
  onDocumentLoad,
  onPageClick,
  ...props
@@ -66,7 +70,11 @@ export const PDFViewer = ({

  const $el = useRef<HTMLDivElement>(null);

+  const passwordCallbackRef = useRef<((password: string | null) => void) | null>(null);
+
  const [isDocumentBytesLoading, setIsDocumentBytesLoading] = useState(false);
+  const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
+  const [isPasswordError, setIsPasswordError] = useState(false);
  const [documentBytes, setDocumentBytes] = useState<Uint8Array | null>(null);

  const [width, setWidth] = useState(0);
@@ -182,6 +190,21 @@ export const PDFViewer = ({
            className={cn('w-full overflow-hidden rounded', {
              'h-[80vh] max-h-[60rem]': numPages === 0,
            })}
+            onPassword={(callback, reason) => {
+              // If the document already has a password, we don't need to ask for it again.
+              if (defaultPassword && reason !== PasswordResponses.INCORRECT_PASSWORD) {
+                callback(defaultPassword);
+                return;
+              }
+
+              setIsPasswordModalOpen(true);
+
+              passwordCallbackRef.current = callback;
+
+              match(reason)
+                .with(PasswordResponses.NEED_PASSWORD, () => setIsPasswordError(false))
+                .with(PasswordResponses.INCORRECT_PASSWORD, () => setIsPasswordError(true));
+            }}
            onLoadSuccess={(d) => onDocumentLoaded(d)}
            // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
            // Therefore we add some additional custom error handling.
@@ -240,6 +263,19 @@ export const PDFViewer = ({
                </div>
              ))}
          </PDFDocument>
+
+          <PasswordDialog
+            open={isPasswordModalOpen}
+            onOpenChange={setIsPasswordModalOpen}
+            onPasswordSubmit={(password) => {
+              passwordCallbackRef.current?.(password);
+
+              setIsPasswordModalOpen(false);
+
+              void onPasswordSubmit?.(password);
+            }}
+            isError={isPasswordError}
+          />
        </>
      )}
    </div>