Merge remote-tracking branch 'origin/main' into pr-2468

# Conflicts: # packages/lib/types/document-audit-logs.ts # packages/lib/utils/document-audit-logs.ts # packages/prisma/schema.prisma
2026-07-27 02:15:05 +10:00 · 2026-07-02 06:48:23 +00:00
parent 8ca8ad907e 337f85f021
commit a2e0c5d9ab
584 changed files with 38071 additions and 6339 deletions
@@ -0,0 +1,171 @@
+import {
+  SITE_SETTINGS_EMAIL_BLOCKLIST_ID,
+  type TSiteSettingsEmailBlocklistSchema,
+} from '@documenso/lib/server-only/site-settings/schemas/email-blocklist';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+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 { useRevalidator } from 'react-router';
+import { z } from 'zod';
+
+const ZEmailBlocklistFormSchema = z.object({
+  enabled: z.boolean(),
+  domains: z.string(),
+});
+
+type TEmailBlocklistFormSchema = z.infer<typeof ZEmailBlocklistFormSchema>;
+
+/**
+ * Splits a comma-separated string into a normalised list of domains.
+ * Normalisation (trim, lowercase, strip leading "@", dedupe) is applied
+ * server-side by the schema as well — this is for display consistency.
+ */
+const parseDomainsInput = (value: string): string[] => {
+  return Array.from(
+    new Set(
+      value
+        .split(',')
+        .map((entry) => entry.trim().toLowerCase().replace(/^@/, ''))
+        .filter((entry) => entry.length > 0),
+    ),
+  );
+};
+
+type AdminEmailBlocklistSectionProps = {
+  emailBlocklist: TSiteSettingsEmailBlocklistSchema | undefined;
+};
+
+export const AdminEmailBlocklistSection = ({ emailBlocklist }: AdminEmailBlocklistSectionProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+  const { revalidate } = useRevalidator();
+
+  const form = useForm<TEmailBlocklistFormSchema>({
+    resolver: zodResolver(ZEmailBlocklistFormSchema),
+    defaultValues: {
+      enabled: emailBlocklist?.enabled ?? false,
+      domains: (emailBlocklist?.data?.domains ?? []).join(', '),
+    },
+  });
+
+  const enabled = form.watch('enabled');
+
+  const { mutateAsync: updateSiteSetting, isPending: isUpdateSiteSettingLoading } =
+    trpcReact.admin.updateSiteSetting.useMutation();
+
+  const onBlocklistUpdate = async ({ enabled, domains }: TEmailBlocklistFormSchema) => {
+    try {
+      const parsedDomains = parseDomainsInput(domains);
+
+      await updateSiteSetting({
+        id: SITE_SETTINGS_EMAIL_BLOCKLIST_ID,
+        enabled,
+        data: {
+          domains: parsedDomains,
+        },
+      });
+
+      // Reflect the normalised value back in the form.
+      form.reset({
+        enabled,
+        domains: parsedDomains.join(', '),
+      });
+
+      toast({
+        title: _(msg`Email Blocklist Updated`),
+        description: _(msg`The email blocklist has been updated successfully.`),
+        duration: 5000,
+      });
+
+      await revalidate();
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        variant: 'destructive',
+        description: _(
+          msg`We encountered an unknown error while attempting to update the email blocklist. Please try again later.`,
+        ),
+      });
+    }
+  };
+
+  return (
+    <div>
+      <h2 className="font-semibold">
+        <Trans>Email Blocklist</Trans>
+      </h2>
+      <p className="mt-2 text-muted-foreground text-sm">
+        <Trans>
+          Block signups from additional email domains on top of the bundled disposable email list. Subdomains are
+          matched automatically (e.g. blocking "bad.com" also blocks "foo.bad.com").
+        </Trans>
+      </p>
+
+      <Form {...form}>
+        <form className="mt-4 flex flex-col rounded-md" onSubmit={form.handleSubmit(onBlocklistUpdate)}>
+          <FormField
+            control={form.control}
+            name="enabled"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Enabled</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <div>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </div>
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <fieldset className="mt-4" disabled={!enabled} aria-disabled={!enabled}>
+            <FormField
+              control={form.control}
+              name="domains"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Blocked Domains</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <Textarea className="h-32 resize-none" placeholder="bad.com, spam.net, throwaway.io" {...field} />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>Comma-separated list of email domains to block from signing up.</Trans>
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+
+          <Button type="submit" loading={isUpdateSiteSettingLoading} className="mt-4 justify-end self-end">
+            <Trans>Update Blocklist</Trans>
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+};
@@ -0,0 +1,197 @@
+import {
+  SITE_SETTINGS_BANNER_ID,
+  type TSiteSettingsBannerSchema,
+  ZSiteSettingsBannerSchema,
+} from '@documenso/lib/server-only/site-settings/schemas/banner';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { ColorPicker } from '@documenso/ui/primitives/color-picker';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+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 { useRevalidator } from 'react-router';
+import type { z } from 'zod';
+
+import { useCspNonce } from '~/utils/nonce';
+
+const ZBannerFormSchema = ZSiteSettingsBannerSchema;
+
+type TBannerFormSchema = z.infer<typeof ZBannerFormSchema>;
+
+type AdminSiteBannerSectionProps = {
+  banner: TSiteSettingsBannerSchema | undefined;
+};
+
+export const AdminSiteBannerSection = ({ banner }: AdminSiteBannerSectionProps) => {
+  const nonce = useCspNonce();
+
+  const { toast } = useToast();
+  const { _ } = useLingui();
+  const { revalidate } = useRevalidator();
+
+  const form = useForm<TBannerFormSchema>({
+    resolver: zodResolver(ZBannerFormSchema),
+    defaultValues: {
+      id: SITE_SETTINGS_BANNER_ID,
+      enabled: banner?.enabled ?? false,
+      data: {
+        content: banner?.data?.content ?? '',
+        bgColor: banner?.data?.bgColor ?? '#000000',
+        textColor: banner?.data?.textColor ?? '#FFFFFF',
+      },
+    },
+  });
+
+  const enabled = form.watch('enabled');
+
+  const { mutateAsync: updateSiteSetting, isPending: isUpdateSiteSettingLoading } =
+    trpcReact.admin.updateSiteSetting.useMutation();
+
+  const onBannerUpdate = async ({ id, enabled, data }: TBannerFormSchema) => {
+    try {
+      await updateSiteSetting({
+        id,
+        enabled,
+        data,
+      });
+
+      toast({
+        title: _(msg`Banner Updated`),
+        description: _(msg`Your banner has been updated successfully.`),
+        duration: 5000,
+      });
+
+      await revalidate();
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        variant: 'destructive',
+        description: _(
+          msg`We encountered an unknown error while attempting to update the banner. Please try again later.`,
+        ),
+      });
+    }
+  };
+
+  return (
+    <div>
+      <h2 className="font-semibold">
+        <Trans>Site Banner</Trans>
+      </h2>
+      <p className="mt-2 text-muted-foreground text-sm">
+        <Trans>
+          The site banner is a message that is shown at the top of the site. It can be used to display important
+          information to your users.
+        </Trans>
+      </p>
+
+      <Form {...form}>
+        <form className="mt-4 flex flex-col rounded-md" onSubmit={form.handleSubmit(onBannerUpdate)}>
+          <div className="mt-4 flex flex-col gap-4 md:flex-row">
+            <FormField
+              control={form.control}
+              name="enabled"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>
+                    <Trans>Enabled</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <div>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </div>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <fieldset className="flex flex-col gap-4 md:flex-row" disabled={!enabled} aria-disabled={!enabled}>
+              <FormField
+                control={form.control}
+                name="data.bgColor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Background Color</Trans>
+                    </FormLabel>
+
+                    <FormControl>
+                      <div>
+                        <ColorPicker {...field} nonce={nonce} />
+                      </div>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="data.textColor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Text Color</Trans>
+                    </FormLabel>
+
+                    <FormControl>
+                      <div>
+                        <ColorPicker {...field} nonce={nonce} />
+                      </div>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </fieldset>
+          </div>
+
+          <fieldset disabled={!enabled} aria-disabled={!enabled}>
+            <FormField
+              control={form.control}
+              name="data.content"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Content</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <Textarea className="h-32 resize-none" {...field} />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>The content to show in the banner, HTML is allowed</Trans>
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+
+          <Button type="submit" loading={isUpdateSiteSettingLoading} className="mt-4 justify-end self-end">
+            <Trans>Update Banner</Trans>
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+};
@@ -54,7 +54,6 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
      if (plan[interval] && plan[interval].isVisibleInApp) {
        prices.push({
          ...plan[interval],
-          memberCount: plan.memberCount,
          claim: plan.id,
        });
      }
@@ -120,12 +119,7 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
                    <Trans>Subscribe</Trans>
                  </IndividualPersonalLayoutCheckoutButton>
                ) : (
-                  <BillingDialog
-                    priceId={price.id}
-                    planName={price.product.name}
-                    memberCount={price.memberCount}
-                    claim={price.claim}
-                  />
+                  <BillingDialog priceId={price.id} planName={price.product.name} claim={price.claim} />
                )}
              </CardContent>
            </MotionCard>
@@ -136,16 +130,7 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
  );
 };

-const BillingDialog = ({
-  priceId,
-  planName,
-  claim,
-}: {
-  priceId: string;
-  planName: string;
-  memberCount: number;
-  claim: string;
-}) => {
+const BillingDialog = ({ priceId, planName, claim }: { priceId: string; planName: string; claim: string }) => {
  const [isOpen, setIsOpen] = useState(false);

  const { t } = useLingui();
@@ -0,0 +1,97 @@
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Trans, useLingui } from '@lingui/react/macro';
+import type { ReactNode } from 'react';
+import type { Control, FieldValues, Path } from 'react-hook-form';
+
+import { RateLimitArrayInput } from './rate-limit-array-input';
+
+type ClaimLimitFieldsProps<T extends FieldValues> = {
+  control: Control<T>;
+  /** e.g. '' for the claim form, 'claims.' for the org admin form. */
+  prefix?: string;
+  disabled?: boolean;
+};
+
+export const ClaimLimitFields = <T extends FieldValues>({
+  control,
+  prefix = '',
+  disabled,
+}: ClaimLimitFieldsProps<T>) => {
+  const { t } = useLingui();
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const name = (key: string) => `${prefix}${key}` as Path<T>;
+
+  const renderQuotaField = (key: string, label: ReactNode, description: ReactNode) => (
+    <FormField
+      control={control}
+      name={name(key)}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Input
+              type="number"
+              min={0}
+              disabled={disabled}
+              value={field.value === null || field.value === undefined ? '' : field.value}
+              placeholder={t`Unlimited`}
+              onChange={(e) => field.onChange(e.target.value === '' ? null : parseInt(e.target.value, 10))}
+            />
+          </FormControl>
+          <FormDescription>{description}</FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+
+  const renderRateLimitField = (key: string, label: ReactNode) => (
+    <FormField
+      control={control}
+      name={name(key)}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <RateLimitArrayInput value={field.value ?? []} onChange={field.onChange} disabled={disabled} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+
+  return (
+    <div className="space-y-4 rounded-md border p-4">
+      <FormLabel>
+        <Trans>Limits</Trans>
+      </FormLabel>
+
+      {renderQuotaField(
+        'documentQuota',
+        <Trans>Monthly document quota</Trans>,
+        <Trans>Empty = Unlimited, 0 = Blocked</Trans>,
+      )}
+      {renderRateLimitField('documentRateLimits', <Trans>Document rate limits</Trans>)}
+
+      {renderQuotaField(
+        'emailQuota',
+        <Trans>Monthly email quota</Trans>,
+        <Trans>Empty = Unlimited, 0 = Blocked</Trans>,
+      )}
+      {renderRateLimitField('emailRateLimits', <Trans>Email rate limits</Trans>)}
+
+      {renderQuotaField('apiQuota', <Trans>Monthly API quota</Trans>, <Trans>Empty = Unlimited, 0 = Blocked</Trans>)}
+      {renderRateLimitField('apiRateLimits', <Trans>API rate limits</Trans>)}
+    </div>
+  );
+};
@@ -1,4 +1,5 @@
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { AppError } from '@documenso/lib/errors/app-error';
 import type { TTemplate } from '@documenso/lib/types/template';
 import { isRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
@@ -12,11 +13,12 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import type { Field, Recipient } from '@prisma/client';
 import { useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router';
+import { useSearchParams } from 'react-router';

 import { useRequiredDocumentSigningAuthContext } from '~/components/general/document-signing/document-signing-auth-provider';
 import { useRequiredDocumentSigningContext } from '~/components/general/document-signing/document-signing-provider';
 import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
+import { getDirectTemplateErrorMessage } from '~/utils/toast-error-messages';

 import { DirectTemplateConfigureForm, type TDirectTemplateConfigureFormSchema } from './direct-template-configure-form';
 import { type DirectTemplateLocalField, DirectTemplateSigningForm } from './direct-template-signing-form';
@@ -35,7 +37,6 @@ export const DirectTemplatePageView = ({
  directTemplateRecipient,
  directTemplateToken,
 }: DirectTemplatePageViewProps) => {
-  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  const { _ } = useLingui();
@@ -117,12 +118,15 @@ export const DirectTemplatePageView = ({
      if (redirectUrl) {
        window.location.href = redirectUrl;
      } else {
-        await navigate(`/sign/${token}/complete`);
+        window.location.href = `/sign/${token}/complete`;
      }
    } catch (err) {
+      const error = AppError.parseError(err);
+      const errorMessage = getDirectTemplateErrorMessage(error.code);
+
      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`We were unable to submit this document at this time. Please try again later.`),
+        title: _(errorMessage.title),
+        description: _(errorMessage.description),
        variant: 'destructive',
      });

@@ -0,0 +1,68 @@
+import { AppErrorCode } from '@documenso/lib/errors/app-error';
+import { Button } from '@documenso/ui/primitives/button';
+import { Trans } from '@lingui/react/macro';
+import { AlertTriangleIcon } from 'lucide-react';
+
+export type CscRecipientBlockedPageProps = {
+  code: string;
+  recipientToken: string;
+};
+
+/**
+ * Terminal page rendered when the service-scope CSC OAuth callback surfaces a
+ * hard error the recipient can't resolve themselves (empty credential list,
+ * invalid cert, refused algorithm). The blocking-error cookie is read +
+ * cleared by the loader; this page only renders the message + retry CTA.
+ *
+ * The retry link kicks a fresh service-scope OAuth round-trip — useful when
+ * the TSP-side issue is transient (e.g. the recipient's admin has since
+ * provisioned a credential).
+ */
+export const CscRecipientBlockedPage = ({ code, recipientToken }: CscRecipientBlockedPageProps) => {
+  const retryUrl = `/api/csc/oauth/authorize?scope=service&token=${encodeURIComponent(recipientToken)}`;
+
+  return (
+    <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-16 xl:pt-24">
+      <AlertTriangleIcon className="h-12 w-12 text-destructive" />
+
+      <h2 className="mt-6 max-w-[35ch] text-center font-semibold text-2xl leading-normal md:text-3xl lg:text-4xl">
+        {code === AppErrorCode.CSC_CREDENTIAL_LIST_EMPTY ? (
+          <Trans>No signing credentials available</Trans>
+        ) : code === AppErrorCode.CSC_CERT_INVALID ? (
+          <Trans>Signing certificate is invalid</Trans>
+        ) : code === AppErrorCode.CSC_ALGORITHM_REFUSED ? (
+          <Trans>Signing algorithm is not supported</Trans>
+        ) : (
+          <Trans>Unable to start the signing flow</Trans>
+        )}
+      </h2>
+
+      <p className="mt-2.5 max-w-[60ch] text-center font-medium text-muted-foreground/60 text-sm md:text-base">
+        {code === AppErrorCode.CSC_CREDENTIAL_LIST_EMPTY ? (
+          <Trans>
+            Your signing provider returned no usable credentials for this account. Contact your administrator or signing
+            provider for assistance.
+          </Trans>
+        ) : code === AppErrorCode.CSC_CERT_INVALID ? (
+          <Trans>
+            Your signing certificate is invalid, expired, or missing a required key. Contact your administrator or
+            signing provider for assistance.
+          </Trans>
+        ) : code === AppErrorCode.CSC_ALGORITHM_REFUSED ? (
+          <Trans>
+            Your signing provider does not advertise a signing algorithm this document accepts. Contact your
+            administrator or signing provider for assistance.
+          </Trans>
+        ) : (
+          <Trans>Something went wrong while preparing the remote signature. Please try again.</Trans>
+        )}
+      </p>
+
+      <Button asChild className="mt-8">
+        <a href={retryUrl}>
+          <Trans>Try again</Trans>
+        </a>
+      </Button>
+    </div>
+  );
+};
@@ -0,0 +1,105 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Trans } from '@lingui/react/macro';
+import { AlertTriangleIcon, Loader2Icon } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+export type CscRecipientSigningInProgressPageProps = {
+  sessionId: string;
+  recipientToken: string;
+};
+
+/**
+ * Rendered when the credential-scope OAuth callback has attached a SAD to the
+ * server-side `CscSession` and set the `csc_sad_session` cookie. The page
+ * auto-fires `enterprise.csc.signEnvelope` on mount and navigates to the
+ * completion page on success. On failure, it surfaces an error message and
+ * a retry CTA pointing at a fresh credential-scope OAuth round-trip.
+ */
+export const CscRecipientSigningInProgressPage = ({
+  sessionId,
+  recipientToken,
+}: CscRecipientSigningInProgressPageProps) => {
+  const { mutateAsync: signEnvelope } = trpc.enterprise.csc.signEnvelope.useMutation();
+
+  const [error, setError] = useState<string | null>(null);
+
+  // Ref rather than state for the fire-once guard. Refs mutate synchronously,
+  // so React StrictMode's double-invoke of the effect sees the updated value
+  // on the second pass and short-circuits. A useState guard would still let
+  // the second effect fire because the queued setState from the first run
+  // hasn't been committed yet when the second one reads it — that double-fire
+  // races two signEnvelope calls; whichever loses sees the SAD already
+  // consumed and flashes "Signing failed" before the winning call's
+  // navigation kicks in.
+  const hasFiredRef = useRef(false);
+
+  useEffect(() => {
+    if (hasFiredRef.current) {
+      return;
+    }
+
+    hasFiredRef.current = true;
+
+    const run = async () => {
+      try {
+        await signEnvelope({ sessionId, recipientToken });
+
+        window.location.href = `/sign/${recipientToken}/complete`;
+      } catch (err) {
+        const parsed = AppError.parseError(err);
+        setError(parsed.code || AppErrorCode.UNKNOWN_ERROR);
+      }
+    };
+
+    void run();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const retryUrl = `/api/csc/oauth/authorize?scope=credential&session=${encodeURIComponent(sessionId)}`;
+
+  return (
+    <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-16 xl:pt-24">
+      {error ? (
+        <>
+          <AlertTriangleIcon className="h-12 w-12 text-destructive" />
+
+          <h2 className="mt-6 max-w-[35ch] text-center font-semibold text-2xl leading-normal md:text-3xl lg:text-4xl">
+            <Trans>Signing failed</Trans>
+          </h2>
+
+          <p className="mt-2.5 max-w-[60ch] text-center font-medium text-muted-foreground/60 text-sm md:text-base">
+            {error === AppErrorCode.CSC_TSP_TIMEOUT ? (
+              <Trans>The signing provider did not respond in time. Please retry.</Trans>
+            ) : error === AppErrorCode.CSC_SAD_EXPIRED_PRE_SIGN ? (
+              <Trans>
+                Your signing authorisation expired before the signature could be applied. Please reauthorise to retry.
+              </Trans>
+            ) : (
+              <Trans>Something went wrong while applying your signature. Please retry.</Trans>
+            )}
+          </p>
+
+          <Button asChild className="mt-8">
+            <a href={retryUrl}>
+              <Trans>Reauthorise and retry</Trans>
+            </a>
+          </Button>
+        </>
+      ) : (
+        <>
+          <Loader2Icon className="h-12 w-12 animate-spin text-primary" />
+
+          <h2 className="mt-6 max-w-[35ch] text-center font-semibold text-2xl leading-normal md:text-3xl lg:text-4xl">
+            <Trans>Applying your signature</Trans>
+          </h2>
+
+          <p className="mt-2.5 max-w-[60ch] text-center font-medium text-muted-foreground/60 text-sm md:text-base">
+            <Trans>Please don't close this tab. The signing provider is finalising your signature.</Trans>
+          </p>
+        </>
+      )}
+    </div>
+  );
+};
@@ -1,3 +1,4 @@
+import { toSafeHref } from '@documenso/lib/utils/is-http-url';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
@@ -53,7 +54,7 @@ export const DocumentSigningAttachmentsPopover = ({
            {attachments?.data.map((attachment) => (
              <a
                key={attachment.id}
-                href={attachment.data}
+                href={toSafeHref(attachment.data)}
                title={attachment.data}
                target="_blank"
                rel="noopener noreferrer"
@@ -27,7 +27,6 @@ import type { Field } from '@prisma/client';
 import { FieldType, RecipientRole } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { useNavigate } from 'react-router';
 import { match, P } from 'ts-pattern';

 import { DocumentSigningAttachmentsPopover } from '~/components/general/document-signing/document-signing-attachments-popover';
@@ -50,6 +49,11 @@ import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-p
 import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';

+type DocumentSigningBranding = {
+  brandingEnabled: boolean;
+  brandingLogo: string;
+};
+
 export type DocumentSigningPageViewV1Props = {
  recipient: RecipientWithFields;
  document: DocumentAndSender;
@@ -57,6 +61,7 @@ export type DocumentSigningPageViewV1Props = {
  completedFields: CompletedField[];
  isRecipientsTurn: boolean;
  allRecipients?: RecipientWithFields[];
+  branding: DocumentSigningBranding;
  includeSenderDetails: boolean;
 };

@@ -68,6 +73,7 @@ export const DocumentSigningPageViewV1 = ({
  isRecipientsTurn,
  allRecipients = [],
  includeSenderDetails,
+  branding,
 }: DocumentSigningPageViewV1Props) => {
  const { documentData, documentMeta } = document;

@@ -77,7 +83,6 @@ export const DocumentSigningPageViewV1 = ({
    ? authUser.twoFactorEnabled && authUser.email === recipient.email
    : false;

-  const navigate = useNavigate();
  const analytics = useAnalytics();

  const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
@@ -122,7 +127,7 @@ export const DocumentSigningPageViewV1 = ({
    if (documentMeta?.redirectUrl) {
      window.location.href = documentMeta.redirectUrl;
    } else {
-      await navigate(`/sign/${recipient.token}/complete`);
+      window.location.href = `/sign/${recipient.token}/complete`;
    }
  };

@@ -168,10 +173,12 @@ export const DocumentSigningPageViewV1 = ({
  const pendingFields = fieldsRequiringValidation.filter((field) => !field.inserted);
  const hasPendingFields = pendingFields.length > 0;

+  const hasCustomBrandingLogo = branding.brandingEnabled && Boolean(branding.brandingLogo);
+
  return (
    <DocumentSigningRecipientProvider recipient={recipient} targetSigner={targetSigner}>
      <div className="mx-auto w-full max-w-screen-xl sm:px-6">
-        {document.team.teamGlobalSettings.brandingEnabled && document.team.teamGlobalSettings.brandingLogo && (
+        {hasCustomBrandingLogo && (
          <img
            src={`/api/branding/logo/team/${document.teamId}`}
            alt={`${document.team.name}'s Logo`}
@@ -17,7 +17,7 @@ import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useNavigate, useSearchParams } from 'react-router';
+import { useSearchParams } from 'react-router';
 import { z } from 'zod';

 const ZRejectDocumentFormSchema = z.object({
@@ -41,7 +41,6 @@ export function DocumentSigningRejectDialog({
 }: DocumentSigningRejectDialogProps) {
  const { t } = useLingui();
  const { toast } = useToast();
-  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  const [isOpen, setIsOpen] = useState(false);
@@ -74,7 +73,7 @@ export function DocumentSigningRejectDialog({
      if (onRejected) {
        await onRejected(reason);
      } else {
-        await navigate(`/sign/${token}/rejected`);
+        window.location.href = `/sign/${token}/rejected`;
      }
    } catch (err) {
      toast({
@@ -1,5 +1,6 @@
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
+import { isHttpUrl, toSafeHref } from '@documenso/lib/utils/is-http-url';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -24,7 +25,7 @@ export type DocumentAttachmentsPopoverProps = {

 const ZAttachmentFormSchema = z.object({
  label: z.string().min(1, 'Label is required'),
-  url: z.string().url('Must be a valid URL'),
+  url: z.string().url('Must be a valid URL').refine(isHttpUrl, 'URL must use the http or https protocol'),
 });

 type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
@@ -156,7 +157,7 @@ export const DocumentAttachmentsPopover = ({
                  <div className="min-w-0 flex-1">
                    <p className="truncate font-medium text-sm">{attachment.label}</p>
                    <a
-                      href={attachment.data}
+                      href={toSafeHref(attachment.data)}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="truncate text-muted-foreground text-xs underline hover:text-foreground"
@@ -11,10 +11,10 @@ import { DownloadIcon } from 'lucide-react';

 export type DocumentAuditLogDownloadButtonProps = {
  className?: string;
-  documentId: number;
+  envelopeId: string;
 };

-export const DocumentAuditLogDownloadButton = ({ className, documentId }: DocumentAuditLogDownloadButtonProps) => {
+export const DocumentAuditLogDownloadButton = ({ className, envelopeId }: DocumentAuditLogDownloadButtonProps) => {
  const { toast } = useToast();
  const { _ } = useLingui();

@@ -22,7 +22,7 @@ export const DocumentAuditLogDownloadButton = ({ className, documentId }: Docume

  const onDownloadAuditLogsClick = async () => {
    try {
-      const { data, envelopeTitle } = await downloadAuditLogs({ documentId });
+      const { data, envelopeTitle } = await downloadAuditLogs({ envelopeId });

      const buffer = new Uint8Array(base64.decode(data));
      const blob = new Blob([buffer], { type: 'application/pdf' });
@@ -13,13 +13,13 @@ import { DownloadIcon } from 'lucide-react';

 export type DocumentCertificateDownloadButtonProps = {
  className?: string;
-  documentId: number;
+  envelopeId: string;
  documentStatus: DocumentStatus;
 };

 export const DocumentCertificateDownloadButton = ({
  className,
-  documentId,
+  envelopeId,
  documentStatus,
 }: DocumentCertificateDownloadButtonProps) => {
  const { toast } = useToast();
@@ -29,7 +29,7 @@ export const DocumentCertificateDownloadButton = ({

  const onDownloadCertificatesClick = async () => {
    try {
-      const { data, envelopeTitle } = await downloadCertificate({ documentId });
+      const { data, envelopeTitle } = await downloadCertificate({ envelopeId });

      const buffer = new Uint8Array(base64.decode(data));
      const blob = new Blob([buffer], { type: 'application/pdf' });
@@ -1,6 +1,7 @@
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION, SKIP_QUERY_BATCH_META } from '@documenso/lib/constants/trpc';
+import { AppError } from '@documenso/lib/errors/app-error';
 import type { TDocument } from '@documenso/lib/types/document';
 import { ZDocumentAccessAuthTypesSchema } from '@documenso/lib/types/document-auth';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
@@ -25,9 +26,9 @@ import { DocumentDistributionMethod, DocumentStatus } from '@prisma/client';
 import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router';
 import { z } from 'zod';
-
 import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 import { useCurrentTeam } from '~/providers/team';
+import { getDistributeErrorMessage } from '~/utils/toast-error-messages';

 export type DocumentEditFormProps = {
  className?: string;
@@ -387,9 +388,12 @@ export const DocumentEditForm = ({ className, initialDocument, documentRootPath
    } catch (err) {
      console.error(err);

+      const error = AppError.parseError(err);
+      const errorMessage = getDistributeErrorMessage(error.code);
+
      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while sending the document.`),
+        title: _(errorMessage.title),
+        description: _(errorMessage.description),
        variant: 'destructive',
      });
    }
@@ -38,7 +38,7 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
  })
    .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
      <Button className="w-full" asChild>
-        <Link to={`/sign/${recipient?.token}`}>
+        <a href={`/sign/${recipient?.token}`}>
          {match(role)
            .with(RecipientRole.SIGNER, () => (
              <>
@@ -58,7 +58,7 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
                <Trans>View</Trans>
              </>
            ))}
-        </Link>
+        </a>
      </Button>
    ))
    .with({ isComplete: false }, () => (
@@ -19,6 +19,7 @@ import {
  Download,
  Edit,
  FileOutputIcon,
+  History,
  Loader,
  MoreHorizontal,
  Pencil,
@@ -29,10 +30,10 @@ import {
 import { useState } from 'react';
 import { Link, useNavigate } from 'react-router';

-import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
 import { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
+import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
 import { EnvelopeRenameDialog } from '~/components/dialogs/envelope-rename-dialog';
 import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
@@ -67,8 +68,6 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP

  const documentsPath = formatDocumentsPath(team.url);

-  const nonSignedRecipients = envelope.recipients.filter((item) => item.signingStatus !== 'SIGNED');
-
  return (
    <DropdownMenu>
      <DropdownMenuTrigger data-testid="document-page-view-action-btn">
@@ -172,13 +171,20 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
          />
        )}

-        <DocumentResendDialog
-          document={{
-            ...envelope,
-            id: mapSecondaryIdToDocumentId(envelope.secondaryId),
-          }}
-          recipients={nonSignedRecipients}
-        />
+        {canManageDocument && (
+          <EnvelopeRedistributeDialog
+            envelope={envelope}
+            envelopeType={EnvelopeType.DOCUMENT}
+            trigger={
+              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                <div>
+                  <History className="mr-2 h-4 w-4" />
+                  <Trans>Resend</Trans>
+                </div>
+              </DropdownMenuItem>
+            }
+          />
+        )}

        <DocumentShareButton
          documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
@@ -40,6 +40,12 @@ export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus>
    icon: XCircle,
    color: 'text-red-500 dark:text-red-300',
  },
+  CANCELLED: {
+    label: msg`Cancelled`,
+    labelExtended: msg`Document cancelled`,
+    icon: XCircle,
+    color: 'text-red-500 dark:text-red-300',
+  },
  INBOX: {
    label: msg`Inbox`,
    labelExtended: msg`Document inbox`,
@@ -3,7 +3,7 @@ import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
@@ -20,9 +20,9 @@ import { EnvelopeType } from '@prisma/client';
 import { useMemo, useState } from 'react';
 import type { FileRejection } from 'react-dropzone';
 import { useNavigate, useParams } from 'react-router';
-import { match } from 'ts-pattern';

 import { useCurrentTeam } from '~/providers/team';
+import { getUploadErrorMessage } from '~/utils/toast-error-messages';

 export type DocumentUploadButtonLegacyProps = {
  className?: string;
@@ -130,30 +130,11 @@ export const DocumentUploadButtonLegacy = ({ className, type }: DocumentUploadBu

      console.error(err);

-      const errorMessage = match(error.code)
-        .with('INVALID_DOCUMENT_FILE', () => msg`You cannot upload encrypted PDFs.`)
-        .with(
-          AppErrorCode.LIMIT_EXCEEDED,
-          () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
-        )
-        .with(
-          'ENVELOPE_ITEM_LIMIT_EXCEEDED',
-          () => msg`You have reached the limit of the number of files per envelope.`,
-        )
-        .with('UNSUPPORTED_FILE_TYPE', () => msg`This file type isn't supported. Please upload a PDF or Word document.`)
-        .with(
-          'CONVERSION_SERVICE_UNAVAILABLE',
-          () => msg`Document conversion is temporarily unavailable. Please try again shortly or upload a PDF.`,
-        )
-        .with(
-          'CONVERSION_FAILED',
-          () => msg`We couldn't convert this file. Please check it's a valid Word document or upload a PDF instead.`,
-        )
-        .otherwise(() => msg`An error occurred while uploading your document.`);
+      const errorMessage = getUploadErrorMessage(error.code);

      toast({
-        title: _(msg`Error`),
-        description: _(errorMessage),
+        title: _(errorMessage.title),
+        description: _(errorMessage.description),
        variant: 'destructive',
        duration: 7500,
      });
@@ -1,5 +1,6 @@
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { nanoid } from '@documenso/lib/universal/id';
+import { isHttpUrl, toSafeHref } from '@documenso/lib/utils/is-http-url';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@documenso/ui/primitives/form/form';
@@ -22,7 +23,7 @@ export type EmbeddedEditorAttachmentPopoverProps = {

 const ZAttachmentFormSchema = z.object({
  label: z.string().min(1, 'Label is required'),
-  url: z.string().url('Must be a valid URL'),
+  url: z.string().url('Must be a valid URL').refine(isHttpUrl, 'URL must use the http or https protocol'),
 });

 type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
@@ -117,7 +118,7 @@ export const EmbeddedEditorAttachmentPopover = ({
                  <div className="min-w-0 flex-1">
                    <p className="truncate font-medium text-sm">{attachment.label}</p>
                    <a
-                      href={attachment.data}
+                      href={toSafeHref(attachment.data)}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="truncate text-muted-foreground text-xs underline hover:text-foreground"
@@ -1,3 +1,4 @@
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
@@ -13,14 +14,24 @@ import {
 } from '@documenso/lib/universal/field-renderer/field-renderer';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
+import { getOverlappingFieldPairs } from '@documenso/lib/utils/fields-overlap';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
-import { CommandDialog } from '@documenso/ui/primitives/command';
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@documenso/ui/primitives/command';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
 import { useLingui } from '@lingui/react/macro';
 import type { FieldType } from '@prisma/client';
 import Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { Transformer } from 'konva/lib/shapes/Transformer';
-import { CopyPlusIcon, SquareStackIcon, TrashIcon, UserCircleIcon } from 'lucide-react';
+import { CopyPlusIcon, ShapesIcon, SquareStackIcon, TrashIcon, UserCircleIcon } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';

 import { fieldButtonList } from './envelope-editor-fields-drag-drop';
@@ -38,6 +49,13 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
  const [isFieldChanging, setIsFieldChanging] = useState(false);
  const [pendingFieldCreation, setPendingFieldCreation] = useState<Konva.Rect | null>(null);

+  /**
+   * Whether the field was automatically selected on creation (drag-drop or marquee).
+   *
+   * We purposefully supress the floating toolbar for newly created fields.
+   */
+  const [isAutoSelectedField, setIsAutoSelectedField] = useState(false);
+
  const { stage, pageLayer, konvaContainer, scaledViewport, unscaledViewport } = usePageRenderer(
    ({ stage, pageLayer }) => createPageCanvas(stage, pageLayer),
    pageData,
@@ -53,6 +71,36 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
    [editorFields.localFields, pageNumber, currentEnvelopeItem?.id],
  );

+  /**
+   * Debounce the fields used for overlap highlighting so we don't recompute on every
+   * small drag/resize tick. Overlaps only occur within the same page and envelope
+   * item, so computing from this page's fields alone is sufficient.
+   */
+  const debouncedPageFields = useDebouncedValue(localPageFields, 300);
+
+  const overlappingFieldFormIds = useMemo(() => {
+    const formIds = new Set<string>();
+
+    const pairs = getOverlappingFieldPairs(
+      debouncedPageFields.map((field) => ({
+        id: field.formId,
+        envelopeItemId: field.envelopeItemId,
+        page: field.page,
+        positionX: field.positionX,
+        positionY: field.positionY,
+        width: field.width,
+        height: field.height,
+      })),
+    );
+
+    for (const pair of pairs) {
+      formIds.add(pair.fieldA.id);
+      formIds.add(pair.fieldB.id);
+    }
+
+    return formIds;
+  }, [debouncedPageFields]);
+
  const handleResizeOrMove = (event: KonvaEventObject<Event>) => {
    const isDragEvent = event.type === 'dragend';

@@ -104,6 +152,62 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
    pageLayer.current?.batchDraw();
  };

+  /**
+   * Draws (or removes) a dashed warning outline over a field that significantly
+   * overlaps another field. The highlight is a child of the field group so it moves
+   * and resizes with the field, and sits on top of the field's own rect (which is
+   * re-styled on every render and would otherwise clobber a direct stroke change).
+   */
+  const syncOverlapHighlight = (fieldGroup: Konva.Group, isOverlapping: boolean) => {
+    const existingHighlight = fieldGroup.findOne('.field-overlap-highlight');
+
+    // Skip while a field is actively being dragged/resized. The highlight is driven
+    // by debounced field data, so it would lag behind and distort during the gesture.
+    // It is repainted once the gesture settles (the effect re-runs on isFieldChanging).
+    if (isFieldChanging) {
+      existingHighlight?.destroy();
+      return;
+    }
+
+    if (!isOverlapping) {
+      existingHighlight?.destroy();
+      return;
+    }
+
+    const fieldRect = fieldGroup.findOne('.field-rect');
+
+    if (!fieldRect) {
+      return;
+    }
+
+    const highlightAttrs = {
+      x: 0,
+      y: 0,
+      width: fieldRect.width(),
+      height: fieldRect.height(),
+      stroke: '#f59e0b',
+      strokeWidth: 2,
+      dash: [6, 4],
+      cornerRadius: 2,
+      strokeScaleEnabled: false,
+      listening: false,
+    } satisfies Partial<Konva.RectConfig>;
+
+    if (existingHighlight instanceof Konva.Rect) {
+      existingHighlight.setAttrs(highlightAttrs);
+      existingHighlight.moveToTop();
+      return;
+    }
+
+    const highlight = new Konva.Rect({
+      name: 'field-overlap-highlight',
+      ...highlightAttrs,
+    });
+
+    fieldGroup.add(highlight);
+    highlight.moveToTop();
+  };
+
  const unsafeRenderFieldOnLayer = (field: TLocalField) => {
    if (!pageLayer.current) {
      return;
@@ -130,6 +234,8 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
      mode: 'edit',
    });

+    syncOverlapHighlight(fieldGroup, overlappingFieldFormIds.has(field.formId));
+
    if (!isFieldEditable) {
      return;
    }
@@ -138,10 +244,26 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
    fieldGroup.off('transformend');
    fieldGroup.off('dragend');

-    // Set up field selection.
-    fieldGroup.on('click', () => {
+    // Set up field selection. Shift + click toggles this field in/out of the current
+    // multi-selection, so fields can be added to a group by clicking them --
+    // complementing marquee drag-selection. A plain click (no modifier) selects just
+    // this field.
+    fieldGroup.on('click', (event) => {
      removePendingField();
-      setSelectedFields([fieldGroup]);
+
+      const isMultiSelectModifier = event.evt.shiftKey;
+
+      if (isMultiSelectModifier) {
+        const currentNodes = interactiveTransformer.current?.nodes() ?? [];
+        const isAlreadySelected = currentNodes.includes(fieldGroup);
+
+        setSelectedFields(
+          isAlreadySelected ? currentNodes.filter((node) => node !== fieldGroup) : [...currentNodes, fieldGroup],
+        );
+      } else {
+        setSelectedFields([fieldGroup]);
+      }
+
      pageLayer.current?.batchDraw();
    });

@@ -346,43 +468,18 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
      }
    });

-    // Clicks should select/deselect shapes
+    // Clicking empty stage area clears the selection. Field clicks -- including
+    // Shift+click multi-select -- are handled by each field group's own click
+    // handler in `unsafeRenderFieldOnLayer`.
    currentStage.on('click tap', (e) => {
-      // if we are selecting with rect, do nothing
+      // If we are selecting with the marquee rectangle, do nothing.
      if (selectionRectangle.visible() && selectionRectangle.width() > 0 && selectionRectangle.height() > 0) {
        return;
      }

-      // If empty area clicked, remove all selections
+      // If empty area clicked, remove all selections.
      if (e.target === stage.current) {
        setSelectedFields([]);
-        return;
-      }
-
-      // Do nothing if field not clicked, or if field is not editable
-      if (!e.target.hasName('field-group') || e.target.draggable() === false) {
-        return;
-      }
-
-      // do we pressed shift or ctrl?
-      const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
-      const isSelected = transformer.nodes().indexOf(e.target) >= 0;
-
-      if (!metaPressed && !isSelected) {
-        // if no key pressed and the node is not selected
-        // select just one
-        setSelectedFields([e.target]);
-      } else if (metaPressed && isSelected) {
-        // if we pressed keys and node was selected
-        // we need to remove it from selection:
-        const nodes = transformer.nodes().slice(); // use slice to have new copy of array
-        // remove node from array
-        nodes.splice(nodes.indexOf(e.target), 1);
-        setSelectedFields(nodes);
-      } else if (metaPressed && !isSelected) {
-        // add the node into selection
-        const nodes = transformer.nodes().concat([e.target]);
-        setSelectedFields(nodes);
      }
    });

@@ -422,13 +519,48 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
      setSelectedFields(liveSelectedFieldGroups);
    }

+    // Mirror the editor's single selected field onto the canvas (Konva) selection.
+    //
+    // `addField` already marks a newly created field as the selected field, so this
+    // makes a field placed via the palette (drag-drop) or marquee creation show its
+    // resize handles immediately -- no second click needed. It also clears the canvas
+    // selection when the selected field is cleared (e.g. when the author starts
+    // placing another field), so the floating action toolbar can't intercept the next
+    // placement click. Runs after the render loop above so the field's group exists.
+    const selectedFormId = editorFields.selectedField?.formId ?? null;
+    const isSingleCanvasSelection = selectedKonvaFieldGroups.length === 1;
+
+    if (selectedFormId && localPageFields.some((field) => field.formId === selectedFormId)) {
+      const isAlreadySelected = isSingleCanvasSelection && selectedKonvaFieldGroups[0].id() === selectedFormId;
+
+      if (!isAlreadySelected) {
+        const fieldGroupToSelect = pageLayer.current.findOne(`#${selectedFormId}`);
+
+        if (fieldGroupToSelect instanceof Konva.Group) {
+          setSelectedFields([fieldGroupToSelect], { isAutoSelect: true });
+        }
+      }
+    } else if (selectedFormId === null && isSingleCanvasSelection) {
+      setSelectedFields([]);
+    }
+
    // Rerender the transformer
    interactiveTransformer.current?.forceUpdate();

    pageLayer.current.batchDraw();
-  }, [localPageFields, selectedKonvaFieldGroups]);
+  }, [
+    localPageFields,
+    selectedKonvaFieldGroups,
+    overlappingFieldFormIds,
+    isFieldChanging,
+    editorFields.selectedField?.formId,
+  ]);
+
+  const setSelectedFields = (nodes: Konva.Node[], options?: { isAutoSelect?: boolean }) => {
+    // Any explicit (user-driven) selection shows the action toolbar; only auto-selection
+    // on field creation suppresses it.
+    setIsAutoSelectedField(Boolean(options?.isAutoSelect));

-  const setSelectedFields = (nodes: Konva.Node[]) => {
    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
    const fieldGroups = nodes.filter(
      (node) => node.hasName('field-group') && Boolean(node.getStage()) && Boolean(node.getParent()),
@@ -470,6 +602,22 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
    }
  };

+  const changeSelectedFieldsType = (type: FieldType) => {
+    const fields = selectedKonvaFieldGroups
+      .map((field) => editorFields.getFieldByFormId(field.id()))
+      .filter((field) => field !== undefined);
+
+    for (const field of fields) {
+      if (field.type !== type) {
+        editorFields.updateFieldByFormId(field.formId, {
+          type,
+          fieldMeta: structuredClone(FIELD_META_DEFAULT_VALUES[type]),
+          id: undefined,
+        });
+      }
+    }
+  };
+
  const duplicatedSelectedFields = () => {
    const fields = selectedKonvaFieldGroups
      .map((field) => editorFields.getFieldByFormId(field.id()))
@@ -548,24 +696,30 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR

  return (
    <>
-      {selectedKonvaFieldGroups.length > 0 && interactiveTransformer.current && !isFieldChanging && (
-        <FieldActionButtons
-          handleDuplicateSelectedFields={duplicatedSelectedFields}
-          handleDuplicateSelectedFieldsOnAllPages={duplicatedSelectedFieldsOnAllPages}
-          handleDeleteSelectedFields={deletedSelectedFields}
-          handleChangeRecipient={changeSelectedFieldsRecipients}
-          selectedFieldFormId={selectedKonvaFieldGroups.map((field) => field.id())}
-          style={{
-            position: 'absolute',
-            top: interactiveTransformer.current.y() + interactiveTransformer.current.getClientRect().height + 5 + 'px',
-            left: interactiveTransformer.current.x() + interactiveTransformer.current.getClientRect().width / 2 + 'px',
-            transform: 'translateX(-50%)',
-            gap: '8px',
-            pointerEvents: 'auto',
-            zIndex: 50,
-          }}
-        />
-      )}
+      {selectedKonvaFieldGroups.length > 0 &&
+        interactiveTransformer.current &&
+        !isFieldChanging &&
+        !isAutoSelectedField && (
+          <FieldActionButtons
+            handleDuplicateSelectedFields={duplicatedSelectedFields}
+            handleDuplicateSelectedFieldsOnAllPages={duplicatedSelectedFieldsOnAllPages}
+            handleDeleteSelectedFields={deletedSelectedFields}
+            handleChangeRecipient={changeSelectedFieldsRecipients}
+            handleChangeFieldType={changeSelectedFieldsType}
+            selectedFieldFormId={selectedKonvaFieldGroups.map((field) => field.id())}
+            style={{
+              position: 'absolute',
+              top:
+                interactiveTransformer.current.y() + interactiveTransformer.current.getClientRect().height + 5 + 'px',
+              left:
+                interactiveTransformer.current.x() + interactiveTransformer.current.getClientRect().width / 2 + 'px',
+              transform: 'translateX(-50%)',
+              gap: '8px',
+              pointerEvents: 'auto',
+              zIndex: 50,
+            }}
+          />
+        )}

      {pendingFieldCreation && (
        <div
@@ -602,6 +756,7 @@ type FieldActionButtonsProps = React.HTMLAttributes<HTMLDivElement> & {
  handleDuplicateSelectedFieldsOnAllPages: () => void;
  handleDeleteSelectedFields: () => void;
  handleChangeRecipient: (recipientId: number) => void;
+  handleChangeFieldType: (type: FieldType) => void;
  selectedFieldFormId: string[];
 };

@@ -610,15 +765,40 @@ const FieldActionButtons = ({
  handleDuplicateSelectedFieldsOnAllPages,
  handleDeleteSelectedFields,
  handleChangeRecipient,
+  handleChangeFieldType,
  selectedFieldFormId,
  ...props
 }: FieldActionButtonsProps) => {
  const { t } = useLingui();

  const [showRecipientSelector, setShowRecipientSelector] = useState(false);
+  const [showFieldTypeSelector, setShowFieldTypeSelector] = useState(false);

  const { editorFields, envelope } = useCurrentEnvelopeEditor();

+  /**
+   * Decide the preselected field type in the command input.
+   *
+   * If all fields share the same type, use that as the default selection.
+   * Otherwise show no preselection.
+   */
+  const preselectedFieldType = useMemo(() => {
+    if (selectedFieldFormId.length === 0) {
+      return null;
+    }
+
+    const fields = editorFields.localFields.filter((field) => selectedFieldFormId.includes(field.formId));
+
+    if (fields.length === 0) {
+      return null;
+    }
+
+    const firstType = fields[0].type;
+    const isTypesSame = fields.every((field) => field.type === firstType);
+
+    return isTypesSame ? firstType : null;
+  }, [editorFields.localFields, selectedFieldFormId]);
+
  /**
   * Decide the preselected recipient in the command input.
   *
@@ -656,6 +836,7 @@ const FieldActionButtons = ({
    <div className="flex flex-col items-center" {...props}>
      <div className="group flex w-fit items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5">
        <button
+          type="button"
          title={t`Change Recipient`}
          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
          onClick={() => setShowRecipientSelector(true)}
@@ -665,6 +846,17 @@ const FieldActionButtons = ({
        </button>

        <button
+          type="button"
+          title={t`Change Field Type`}
+          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+          onClick={() => setShowFieldTypeSelector(true)}
+          onTouchEnd={() => setShowFieldTypeSelector(true)}
+        >
+          <ShapesIcon className="h-3 w-3" />
+        </button>
+
+        <button
+          type="button"
          title={t`Duplicate`}
          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
          onClick={handleDuplicateSelectedFields}
@@ -674,6 +866,7 @@ const FieldActionButtons = ({
        </button>

        <button
+          type="button"
          title={t`Duplicate on all pages`}
          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
          onClick={handleDuplicateSelectedFieldsOnAllPages}
@@ -683,6 +876,7 @@ const FieldActionButtons = ({
        </button>

        <button
+          type="button"
          title={t`Remove`}
          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
          onClick={handleDeleteSelectedFields}
@@ -705,6 +899,41 @@ const FieldActionButtons = ({
          fields={envelope.fields}
        />
      </CommandDialog>
+
+      <CommandDialog position="start" open={showFieldTypeSelector} onOpenChange={setShowFieldTypeSelector}>
+        <Command defaultValue={preselectedFieldType ? t(FRIENDLY_FIELD_TYPE[preselectedFieldType]) : undefined}>
+          <CommandInput placeholder={t`Select a field type`} />
+
+          <CommandList>
+            <CommandEmpty>
+              <span className="inline-block px-4 text-muted-foreground">
+                {t`No field type matching this description was found.`}
+              </span>
+            </CommandEmpty>
+
+            <CommandGroup>
+              {fieldButtonList.map((field) => {
+                const FieldIcon = field.icon;
+                const label = t(FRIENDLY_FIELD_TYPE[field.type]);
+
+                return (
+                  <CommandItem
+                    key={field.type}
+                    className="px-2"
+                    onSelect={() => {
+                      handleChangeFieldType(field.type);
+                      setShowFieldTypeSelector(false);
+                    }}
+                  >
+                    <FieldIcon className="mr-2 h-4 w-4" />
+                    <span className="truncate">{label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
    </div>
  );
 };
@@ -1,3 +1,4 @@
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
@@ -17,6 +18,7 @@ import {
  type TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
+import { getOverlappingFieldPairs } from '@documenso/lib/utils/fields-overlap';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { cn } from '@documenso/ui/lib/utils';
@@ -28,7 +30,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
-import { FileTextIcon, PencilIcon, SparklesIcon } from 'lucide-react';
+import { AlertTriangleIcon, FileTextIcon, PencilIcon, SparklesIcon } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRevalidator, useSearchParams } from 'react-router';
 import { isDeepEqual } from 'remeda';
@@ -78,7 +80,7 @@ export const EnvelopeEditorFieldsPage = () => {

  const { envelope, editorFields, navigateToStep, editorConfig } = useCurrentEnvelopeEditor();

-  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();

  const { _ } = useLingui();

@@ -93,6 +95,53 @@ export const EnvelopeEditorFieldsPage = () => {

  const selectedField = useMemo(() => structuredClone(editorFields.selectedField), [editorFields.selectedField]);

+  /**
+   * Debounce the fields used for overlap detection so we don't recompute on every
+   * small drag/resize movement, which is expensive on large field counts and can
+   * bog down lower-end devices.
+   */
+  const debouncedLocalFields = useDebouncedValue(editorFields.localFields, 300);
+
+  /**
+   * Fields that significantly overlap each other. Overlapping fields render poorly in
+   * the editor and can behave unexpectedly during signing, so we warn the author here.
+   */
+  const overlappingFieldPairs = useMemo(
+    () =>
+      getOverlappingFieldPairs(
+        debouncedLocalFields.map((field) => ({
+          id: field.formId,
+          envelopeItemId: field.envelopeItemId,
+          page: field.page,
+          positionX: field.positionX,
+          positionY: field.positionY,
+          width: field.width,
+          height: field.height,
+        })),
+      ),
+    [debouncedLocalFields],
+  );
+
+  const handleReviewOverlappingField = () => {
+    const firstPair = overlappingFieldPairs[0];
+
+    if (!firstPair) {
+      return;
+    }
+
+    const targetField = editorFields.localFields.find((field) => field.formId === firstPair.fieldA.id);
+
+    if (!targetField) {
+      return;
+    }
+
+    if (targetField.envelopeItemId !== currentEnvelopeItem?.id) {
+      setCurrentEnvelopeItem(targetField.envelopeItemId);
+    }
+
+    editorFields.setSelectedField(targetField.formId);
+  };
+
  const updateSelectedFieldMeta = (fieldMeta: TFieldMetaSchema) => {
    if (!selectedField) {
      return;
@@ -211,6 +260,29 @@ export const EnvelopeEditorFieldsPage = () => {
            </Alert>
          )}

+          {overlappingFieldPairs.length > 0 && (
+            <Alert
+              variant="warning"
+              className="mt-20 mb-4 flex w-full max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm"
+            >
+              <div className="flex flex-row items-start gap-3">
+                <AlertTriangleIcon className="mt-0.5 h-5 w-5 flex-shrink-0" />
+
+                <div className="flex flex-col gap-1">
+                  <AlertTitle>
+                    <Trans>Overlapping fields detected</Trans>
+                  </AlertTitle>
+                  <AlertDescription>
+                    <Trans>
+                      Some fields are placed on top of each other. This may complicate the signing process or cause
+                      fields to not work as expected.
+                    </Trans>
+                  </AlertDescription>
+                </div>
+              </div>
+            </Alert>
+          )}
+
          {currentEnvelopeItem !== null ? (
            <EnvelopePdfViewer
              customPageRenderer={EnvelopeEditorFieldsPageRenderer}
@@ -148,6 +148,11 @@ export default function EnvelopeEditorHeader() {
                    <Trans>Rejected</Trans>
                  </Badge>
                ))
+                .with(DocumentStatus.CANCELLED, () => (
+                  <Badge variant="destructive" className="shrink-0">
+                    <Trans>Cancelled</Trans>
+                  </Badge>
+                ))
                .exhaustive()}

            {autosaveError && (
@@ -16,6 +16,7 @@ import {
 } from '@documenso/ui/components/recipient/recipient-autocomplete-input';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@documenso/ui/primitives/card';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
@@ -563,6 +564,9 @@ export const EnvelopeEditorRecipientForm = () => {
    }
  }, [formValues]);

+  const recipientCountLimit = organisation.organisationClaim.recipientCount;
+  const isOverRecipientLimit = recipientCountLimit > 0 && signers.length > recipientCountLimit;
+
  return (
    <Card backdropBlur={false} className="border">
      <CardHeader className="flex flex-row justify-between">
@@ -627,6 +631,17 @@ export const EnvelopeEditorRecipientForm = () => {
      </CardHeader>

      <CardContent>
+        {isOverRecipientLimit && (
+          <Alert variant="destructive" className="mb-4">
+            <AlertDescription>
+              <Trans>
+                This envelope cannot have more than {recipientCountLimit} recipients. Please contact support if you need
+                more.
+              </Trans>
+            </AlertDescription>
+          </Alert>
+        )}
+
        <Form {...form}>
          <div
            className={cn('-mt-2 mb-2 space-y-4 rounded-md bg-accent/50 p-4', {
@@ -9,7 +9,7 @@ import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { ZDocumentAccessAuthTypesSchema, ZDocumentActionAuthTypesSchema } from '@documenso/lib/types/document-auth';
-import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { DocumentEmailEvents, ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
 import {
  type TDocumentMetaDateFormat,
  ZDocumentMetaDateFormatSchema,
@@ -39,6 +39,7 @@ import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expira
 import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
 import { TemplateTypeSelect, TemplateTypeTooltip } from '@documenso/ui/components/template/template-type-select';
 import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { CardDescription, CardHeader, CardTitle } from '@documenso/ui/primitives/card';
 import { Combobox } from '@documenso/ui/primitives/combobox';
@@ -114,7 +115,7 @@ export const ZAddSettingsFormSchema = z.object({
  }),
 });

-type EnvelopeEditorSettingsTabType = 'general' | 'reminders' | 'email' | 'security';
+type EnvelopeEditorSettingsTabType = 'general' | 'reminders' | 'notifications' | 'security';

 const tabs = [
  {
@@ -130,10 +131,10 @@ const tabs = [
    description: msg`Configure signing reminder settings for the document.`,
  },
  {
-    id: 'email',
-    title: msg`Email`,
+    id: 'notifications',
+    title: msg`Notifications`,
    icon: MailIcon,
-    description: msg`Configure email settings for the document.`,
+    description: msg`Configure notification settings for the document.`,
  },
  {
    id: 'security',
@@ -143,6 +144,18 @@ const tabs = [
  },
 ] as const;

+// Recipient-facing notification events. These are suppressed at send time
+// when distributionMethod is not EMAIL (see extractDerivedDocumentEmailSettings),
+// so the UI mirrors that by disabling the matching checkboxes.
+const RECIPIENT_EMAIL_EVENTS = [
+  DocumentEmailEvents.RecipientSigningRequest,
+  DocumentEmailEvents.RecipientRemoved,
+  DocumentEmailEvents.RecipientSigned,
+  DocumentEmailEvents.DocumentPending,
+  DocumentEmailEvents.DocumentCompleted,
+  DocumentEmailEvents.DocumentDeleted,
+] as const;
+
 type TAddSettingsFormSchema = z.infer<typeof ZAddSettingsFormSchema>;

 type EnvelopeEditorSettingsDialogProps = {
@@ -205,6 +218,8 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
    );

  const emailSettings = form.watch('meta.emailSettings');
+  const distributionMethod = form.watch('meta.distributionMethod');
+  const isEmailDistribution = distributionMethod === DocumentDistributionMethod.EMAIL;

  const { data: emailData, isLoading: isLoadingEmails } = trpc.enterprise.organisation.email.find.useQuery(
    {
@@ -334,7 +349,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit

          <nav className="col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 px-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2">
            {tabs.map((tab) => {
-              if (tab.id === 'email' && !settings.allowConfigureDistribution) {
+              if (tab.id === 'notifications' && !settings.allowConfigureDistribution) {
                return null;
              }

@@ -730,7 +745,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                      )}
                    />
                  ))
-                  .with({ activeTab: 'email', settings: { allowConfigureDistribution: true } }, () => (
+                  .with({ activeTab: 'notifications', settings: { allowConfigureDistribution: true } }, () => (
                    <>
                      {settings.allowConfigureEmailSender && organisation.organisationClaim.flags.emailDomains && (
                        <FormField
@@ -747,6 +762,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                                  {...field}
                                  value={field.value === null ? '-1' : field.value}
                                  onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                                  disabled={!isEmailDistribution}
                                >
                                  <SelectTrigger loading={isLoadingEmails} className="bg-background">
                                    <SelectValue />
@@ -783,7 +799,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                              </FormLabel>

                              <FormControl>
-                                <Input {...field} />
+                                <Input {...field} disabled={!isEmailDistribution} />
                              </FormControl>

                              <FormMessage />
@@ -804,7 +820,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                            </FormLabel>

                            <FormControl>
-                              <Input {...field} />
+                              <Input {...field} disabled={!isEmailDistribution} />
                            </FormControl>

                            <FormMessage />
@@ -832,7 +848,11 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                            </FormLabel>

                            <FormControl>
-                              <Textarea className="h-16 resize-none bg-background" {...field} />
+                              <Textarea
+                                className="h-16 resize-none bg-background"
+                                {...field}
+                                disabled={!isEmailDistribution}
+                              />
                            </FormControl>

                            <FormMessage />
@@ -843,7 +863,19 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                      <DocumentEmailCheckboxes
                        value={emailSettings}
                        onChange={(value) => form.setValue('meta.emailSettings', value)}
+                        hiddenEvents={isEmailDistribution ? undefined : RECIPIENT_EMAIL_EVENTS}
                      />
+
+                      {!isEmailDistribution && (
+                        <Alert variant="warning">
+                          <AlertDescription>
+                            <Trans>
+                              Email distribution needs to be enabled in the general settings tab to configure recipient
+                              email related settings.
+                            </Trans>
+                          </AlertDescription>
+                        </Alert>
+                      )}
                    </>
                  ))
                  .with({ activeTab: 'security' }, () => (
@@ -27,27 +27,25 @@ export const EnvelopeSignerHeader = () => {
  const { envelopeData, envelope, recipientFieldsRemaining, recipient } = useRequiredEnvelopeSigningContext();

  const isEmbedSigning = useEmbedSigningContext() !== null;
+  const hasCustomBrandingLogo = envelopeData.settings.brandingEnabled && Boolean(envelopeData.settings.brandingLogo);

  return (
    <nav className="embed--DocumentWidgetHeader flex max-w-screen flex-row justify-between border-border border-b bg-background px-4 py-3 md:px-6">
      {/* Left side - Logo and title */}
      <div className="flex min-w-0 flex-1 items-center space-x-2 md:w-auto md:flex-none">
-        {!isEmbedSigning && (
-          <Link to="/" className="flex-shrink-0">
-            {envelopeData.settings.brandingEnabled && envelopeData.settings.brandingLogo ? (
-              <img
-                src={`/api/branding/logo/team/${envelope.teamId}`}
-                alt={`${envelope.team.name}'s Logo`}
-                className="h-6 w-auto"
-              />
-            ) : (
-              <>
-                <BrandingLogo className="hidden h-6 w-auto md:block" />
-                <BrandingLogoIcon className="h-6 w-auto md:hidden" />
-              </>
-            )}
-          </Link>
-        )}
+        {!isEmbedSigning &&
+          (hasCustomBrandingLogo ? (
+            <img
+              src={`/api/branding/logo/team/${envelope.teamId}`}
+              alt={`${envelope.team.name}'s Logo`}
+              className="h-6 w-auto flex-shrink-0"
+            />
+          ) : (
+            <Link to="/" className="flex-shrink-0">
+              <BrandingLogo className="hidden h-6 w-auto md:block" />
+              <BrandingLogoIcon className="h-6 w-auto md:hidden" />
+            </Link>
+          ))}

        <h1 title={envelope.title} className="min-w-0 truncate font-semibold text-base text-foreground md:hidden">
          {envelope.title}
@@ -9,6 +9,10 @@ import { isBase64Image } from '@documenso/lib/constants/signatures';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { ZFullFieldSchema } from '@documenso/lib/types/field';
+import {
+  createFieldCanvasStyleCache,
+  type FieldCanvasStyleCache,
+} from '@documenso/lib/universal/field-renderer/field-canvas-style';
 import { createSpinner } from '@documenso/lib/universal/field-renderer/field-generic-items';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
@@ -22,7 +26,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { type Field, FieldType, type Recipient, RecipientRole, type Signature, SigningStatus } from '@prisma/client';
 import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { match } from 'ts-pattern';

 import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
@@ -57,17 +61,31 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
    recipientFieldsRemaining,
    showPendingFieldTooltip,
    signField: signFieldInternal,
-    email,
+    email: emailState,
    setEmail,
-    fullName,
+    fullName: fullNameState,
    setFullName,
-    signature,
+    signature: signatureState,
    setSignature,
    selectedAssistantRecipientFields,
    selectedAssistantRecipient,
    isDirectTemplate,
  } = useRequiredEnvelopeSigningContext();

+  // Note: We're using refs here due to the closure within the signField function.
+  const fullName = useRef(fullNameState);
+  const email = useRef(emailState);
+  const signature = useRef(signatureState);
+
+  useEffect(() => {
+    fullName.current = fullNameState;
+    email.current = emailState;
+    signature.current = signatureState;
+  }, [fullNameState, emailState, signatureState]);
+
+  const cachedRenderFields = useRef<Map<number, Field & { signature?: Signature | null }>>(new Map());
+  const prevShowPendingFieldTooltip = useRef(showPendingFieldTooltip);
+
  const { onFieldSigned, onFieldUnsigned } = useEmbedSigningContext() || {};

  const { stage, pageLayer, konvaContainer, unscaledViewport } = usePageRenderer(
@@ -121,7 +139,10 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
    });
  }, [envelope.recipients, pageNumber, currentEnvelopeItem?.id]);

-  const unsafeRenderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+  const unsafeRenderFieldOnLayer = (
+    unparsedField: Field & { signature?: Signature | null },
+    fieldCanvasStyleCache: FieldCanvasStyleCache,
+  ) => {
    if (!pageLayer.current) {
      console.error('Layer not loaded yet');
      return;
@@ -129,11 +150,9 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD

    const fieldToRender = ZFullFieldSchema.parse(unparsedField);

-    const color = fieldToRender.fieldMeta?.readOnly
-      ? 'readOnly'
-      : showPendingFieldTooltip && isFieldUnsignedAndRequired(fieldToRender)
-        ? 'orange'
-        : 'green';
+    const isValidating = showPendingFieldTooltip && isFieldUnsignedAndRequired(fieldToRender);
+
+    const color = fieldToRender.fieldMeta?.readOnly ? 'readOnly' : isValidating ? 'orange' : 'green';

    const { fieldGroup } = renderField({
      scale,
@@ -145,6 +164,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
        height: Number(fieldToRender.height),
        positionX: Number(fieldToRender.positionX),
        positionY: Number(fieldToRender.positionY),
+        isValidating,
        signature: unparsedField.signature,
      },
      translations: getClientSideFieldTranslations(i18n),
@@ -152,6 +172,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
      pageHeight: unscaledViewport.height,
      color,
      mode: 'sign',
+      fieldCanvasStyleCache,
    });

    const handleFieldGroupClick = (e: KonvaEventObject<Event>) => {
@@ -169,8 +190,8 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
        return;
      }

-      let localEmail: string | null = email;
-      let localFullName: string | null = fullName;
+      let localEmail: string | null = email.current;
+      let localFullName: string | null = fullName.current;
      let placeholderEmail: string | null = null;

      if (recipient.role === RecipientRole.ASSISTANT) {
@@ -180,7 +201,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD

      // Allows us let the user set a different email than their current logged in email.
      if (isDirectTemplate) {
-        placeholderEmail = sessionData?.user?.email || email || recipient.email;
+        placeholderEmail = sessionData?.user?.email || email.current || recipient.email;

        if (!placeholderEmail || placeholderEmail === DIRECT_TEMPLATE_RECIPIENT_EMAIL) {
          placeholderEmail = null;
@@ -205,7 +226,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
            return;
          }

-          handleCheckboxFieldClick({ field, clickedCheckboxIndex })
+          void handleCheckboxFieldClick({ field, clickedCheckboxIndex })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
@@ -243,7 +264,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
         * NUMBER FIELD.
         */
        .with({ type: FieldType.NUMBER }, (field) => {
-          handleNumberFieldClick({ field, number: null })
+          void handleNumberFieldClick({ field, number: null })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
@@ -258,7 +279,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
         * TEXT FIELD.
         */
        .with({ type: FieldType.TEXT }, (field) => {
-          handleTextFieldClick({ field, text: null })
+          void handleTextFieldClick({ field, text: null })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
@@ -273,7 +294,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
         * EMAIL FIELD.
         */
        .with({ type: FieldType.EMAIL }, (field) => {
-          handleEmailFieldClick({ field, email: localEmail, placeholderEmail })
+          void handleEmailFieldClick({ field, email: localEmail, placeholderEmail })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
@@ -294,7 +315,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
        .with({ type: FieldType.INITIALS }, (field) => {
          const initials = localFullName ? extractInitials(localFullName) : null;

-          handleInitialsFieldClick({ field, initials })
+          void handleInitialsFieldClick({ field, initials })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
@@ -309,7 +330,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
         * NAME FIELD.
         */
        .with({ type: FieldType.NAME }, (field) => {
-          handleNameFieldClick({ field, name: localFullName })
+          void handleNameFieldClick({ field, name: localFullName })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
@@ -328,7 +349,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
         * DROPDOWN FIELD.
         */
        .with({ type: FieldType.DROPDOWN }, (field) => {
-          handleDropdownFieldClick({ field, text: null })
+          void handleDropdownFieldClick({ field, text: null })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
@@ -356,32 +377,34 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
         * SIGNATURE FIELD.
         */
        .with({ type: FieldType.SIGNATURE }, (field) => {
-          handleSignatureFieldClick({
+          void handleSignatureFieldClick({
            field,
-            fullName,
-            signature,
+            fullName: fullName.current,
+            signature: signature.current,
            typedSignatureEnabled: envelope.documentMeta.typedSignatureEnabled,
            uploadSignatureEnabled: envelope.documentMeta.uploadSignatureEnabled,
            drawSignatureEnabled: envelope.documentMeta.drawSignatureEnabled,
          })
            .then(async (payload) => {
-              if (payload) {
-                fieldGroup.add(loadingSpinnerGroup);
+              if (!payload) {
+                return;
+              }

-                if (payload.value) {
-                  void executeActionAuthProcedure({
-                    onReauthFormSubmit: async (authOptions) => {
-                      await signField(field.id, payload, authOptions);
+              fieldGroup.add(loadingSpinnerGroup);

-                      loadingSpinnerGroup.destroy();
-                    },
-                    actionTarget: field.type,
-                  });
+              if (payload.value) {
+                await executeActionAuthProcedure({
+                  onReauthFormSubmit: async (authOptions) => {
+                    await signField(field.id, payload, authOptions);

-                  setSignature(payload.value);
-                } else {
-                  await signField(field.id, payload);
-                }
+                    loadingSpinnerGroup.destroy();
+                  },
+                  actionTarget: field.type,
+                });
+
+                setSignature(payload.value);
+              } else {
+                await signField(field.id, payload);
              }
            })
            .finally(() => {
@@ -395,9 +418,12 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
    fieldGroup.on('pointerdown', handleFieldGroupClick);
  };

-  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+  const renderFieldOnLayer = (
+    unparsedField: Field & { signature?: Signature | null },
+    fieldCanvasStyleCache: FieldCanvasStyleCache,
+  ) => {
    try {
-      unsafeRenderFieldOnLayer(unparsedField);
+      unsafeRenderFieldOnLayer(unparsedField, fieldCanvasStyleCache);
    } catch (err) {
      console.error(err);
      setRenderError(true);
@@ -410,15 +436,28 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
      return;
    }

-    // Render current recipient fields.
+    const fieldCanvasStyleCache = createFieldCanvasStyleCache();
+
+    // Render current recipient fields which have changed or are not currently rendered.
    for (const field of localPageFields) {
-      renderFieldOnLayer(field);
+      const existingCachedField = cachedRenderFields.current.get(field.id);
+      const isFieldCurrentlyRendered = pageLayer.current.findOne(`#${field.id}`);
+
+      if (
+        !isFieldCurrentlyRendered ||
+        !existingCachedField ||
+        existingCachedField.inserted !== field.inserted ||
+        existingCachedField.customText !== field.customText
+      ) {
+        renderFieldOnLayer(field, fieldCanvasStyleCache);
+        cachedRenderFields.current.set(field.id, field);
+      }
    }

    // Render other recipient signed and inserted fields.
    for (const field of localPageOtherRecipientFields) {
      try {
-        renderField({
+        const { fieldGroup } = renderField({
          scale,
          pageLayer: pageLayer.current,
          field: {
@@ -436,7 +475,13 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
          color: 'readOnly',
          editable: false,
          mode: 'sign',
+          fieldCanvasStyleCache,
        });
+
+        // Other-recipient fields are display-only — they have no click handlers
+        // and shouldn't intercept events meant for the current recipient's
+        // fields. Disable hit detection on the entire group.
+        fieldGroup.listening(false);
      } catch (err) {
        console.error('Unable to render one or more fields belonging to other recipients.');
        console.error(err);
@@ -488,10 +533,19 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
      return;
    }

+    // When the pending-field tooltip toggles, all unsigned required fields need to
+    // be re-rendered so their stroke color updates (green <-> orange). Field-level
+    // properties like `inserted` and `customText` haven't changed, so the cache
+    // would otherwise skip them — clear it to force a fresh render.
+    if (prevShowPendingFieldTooltip.current !== showPendingFieldTooltip) {
+      cachedRenderFields.current.clear();
+      prevShowPendingFieldTooltip.current = showPendingFieldTooltip;
+    }
+
    renderFields();

    pageLayer.current.batchDraw();
-  }, [localPageFields, showPendingFieldTooltip, fullName, signature, email]);
+  }, [localPageFields, showPendingFieldTooltip]);

  /**
   * Rerender the whole page if the selected assistant recipient changes.
@@ -503,6 +557,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD

    // Rerender the whole page.
    pageLayer.current.destroyChildren();
+    cachedRenderFields.current.clear();

    renderFields();

@@ -89,7 +89,7 @@ export const EnvelopeSignerCompleteDialog = () => {
    recipientDetails?: { name: string; email: string },
  ) => {
    try {
-      await completeDocument({
+      const result = await completeDocument({
        token: recipient.token,
        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
        accessAuthOptions,
@@ -97,6 +97,15 @@ export const EnvelopeSignerCompleteDialog = () => {
        ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
      });

+      // TSP envelopes can't be completed via the SES path; the mutation returns
+      // a credential-scope OAuth URL the recipient must follow to acquire a SAD
+      // before the sync sign mutation can run. Short-circuit here so the
+      // analytics / completion handlers don't run with a still-unsigned doc.
+      if (result.status === 'REDIRECT') {
+        window.location.href = result.redirectUrl;
+        return;
+      }
+
      analytics.capture('App: Recipient has completed signing', {
        signerId: recipient.id,
        documentId: envelope.id,
@@ -119,7 +128,7 @@ export const EnvelopeSignerCompleteDialog = () => {
      if (envelope.documentMeta.redirectUrl) {
        window.location.href = envelope.documentMeta.redirectUrl;
      } else {
-        await navigate(`/sign/${recipient.token}/complete`);
+        window.location.href = `/sign/${recipient.token}/complete`;
      }
    } catch (err) {
      const error = AppError.parseError(err);
@@ -197,7 +206,7 @@ export const EnvelopeSignerCompleteDialog = () => {
      if (redirectUrl) {
        window.location.href = redirectUrl;
      } else {
-        await navigate(`/sign/${token}/complete`);
+        window.location.href = `/sign/${token}/complete`;
      }
    } catch (err) {
      console.log('err', err);
@@ -5,7 +5,7 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { getAllowedUploadMimeTypes } from '@documenso/lib/constants/document-conversion';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
@@ -20,9 +20,9 @@ import { Loader } from 'lucide-react';
 import { type ReactNode, useState } from 'react';
 import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
 import { Link, useNavigate, useParams } from 'react-router';
-import { match } from 'ts-pattern';

 import { useCurrentTeam } from '~/providers/team';
+import { getUploadErrorMessage } from '~/utils/toast-error-messages';

 export interface EnvelopeDropZoneWrapperProps {
  children: ReactNode;
@@ -109,27 +109,11 @@ export const EnvelopeDropZoneWrapper = ({ children, type, className }: EnvelopeD
    } catch (err) {
      const error = AppError.parseError(err);

-      const errorMessage = match(error.code)
-        .with('INVALID_DOCUMENT_FILE', () => t`You cannot upload encrypted PDFs.`)
-        .with(
-          AppErrorCode.LIMIT_EXCEEDED,
-          () => t`You have reached your document limit for this month. Please upgrade your plan.`,
-        )
-        .with('ENVELOPE_ITEM_LIMIT_EXCEEDED', () => t`You have reached the limit of the number of files per envelope.`)
-        .with('UNSUPPORTED_FILE_TYPE', () => t`This file type isn't supported. Please upload a PDF or Word document.`)
-        .with(
-          'CONVERSION_SERVICE_UNAVAILABLE',
-          () => t`Document conversion is temporarily unavailable. Please try again shortly or upload a PDF.`,
-        )
-        .with(
-          'CONVERSION_FAILED',
-          () => t`We couldn't convert this file. Please check it's a valid Word document or upload a PDF instead.`,
-        )
-        .otherwise(() => t`An error occurred during upload.`);
+      const errorMessage = getUploadErrorMessage(error.code);

      toast({
-        title: t`Error`,
-        description: errorMessage,
+        title: i18n._(errorMessage.title),
+        description: i18n._(errorMessage.description),
        variant: 'destructive',
        duration: 7500,
      });
@@ -2,7 +2,7 @@ import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-router/create-envelope.types';
@@ -17,9 +17,9 @@ import { EnvelopeType } from '@prisma/client';
 import { useMemo, useState } from 'react';
 import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
 import { useNavigate } from 'react-router';
-import { match } from 'ts-pattern';

 import { useCurrentTeam } from '~/providers/team';
+import { getUploadErrorMessage } from '~/utils/toast-error-messages';

 export type EnvelopeUploadButtonProps = {
  className?: string;
@@ -112,27 +112,11 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo

      console.error(err);

-      const errorMessage = match(error.code)
-        .with('INVALID_DOCUMENT_FILE', () => t`You cannot upload encrypted PDFs.`)
-        .with(
-          AppErrorCode.LIMIT_EXCEEDED,
-          () => t`You have reached your document limit for this month. Please upgrade your plan.`,
-        )
-        .with('ENVELOPE_ITEM_LIMIT_EXCEEDED', () => t`You have reached the limit of the number of files per envelope.`)
-        .with('UNSUPPORTED_FILE_TYPE', () => t`This file type isn't supported. Please upload a PDF or Word document.`)
-        .with(
-          'CONVERSION_SERVICE_UNAVAILABLE',
-          () => t`Document conversion is temporarily unavailable. Please try again shortly or upload a PDF.`,
-        )
-        .with(
-          'CONVERSION_FAILED',
-          () => t`We couldn't convert this file. Please check it's a valid Word document or upload a PDF instead.`,
-        )
-        .otherwise(() => t`An error occurred while uploading your document.`);
+      const errorMessage = getUploadErrorMessage(error.code);

      toast({
-        title: t`Error`,
-        description: errorMessage,
+        title: i18n._(errorMessage.title),
+        description: i18n._(errorMessage.description),
        variant: 'destructive',
        duration: 7500,
      });
@@ -0,0 +1,117 @@
+import { currentMonthlyPeriod } from '@documenso/lib/universal/monthly-period';
+import { Progress } from '@documenso/ui/primitives/progress';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+
+import { Trans } from '@lingui/react/macro';
+import type { OrganisationClaim, OrganisationMonthlyStat } from '@prisma/client';
+import { useState } from 'react';
+import { match } from 'ts-pattern';
+import { OrganisationUsageResetButton } from './organisation-usage-reset-button';
+
+type OrganisationUsagePanelProps = {
+  organisationId: string;
+  monthlyStats: Pick<
+    OrganisationMonthlyStat,
+    'period' | 'documentCount' | 'emailCount' | 'apiCount' | 'emailReports'
+  >[];
+  organisationClaim: OrganisationClaim;
+};
+
+export const OrganisationUsagePanel = ({
+  organisationId,
+  monthlyStats,
+  organisationClaim,
+}: OrganisationUsagePanelProps) => {
+  const [selectedPeriod, setSelectedPeriod] = useState<string | undefined>(() => monthlyStats[0]?.period);
+
+  const selectedStat = monthlyStats.find((stat) => stat.period === selectedPeriod) ?? monthlyStats[0];
+
+  // Resetting a counter only affects the current month (the server hardcodes the
+  // current period), so only offer the reset action when viewing the current month.
+  const isCurrentPeriod = selectedStat?.period === currentMonthlyPeriod();
+
+  const rows = [
+    {
+      counter: 'document' as const,
+      label: <Trans>Documents</Trans>,
+      used: selectedStat?.documentCount ?? 0,
+      effectiveLimit: organisationClaim.documentQuota,
+    },
+    {
+      counter: 'email' as const,
+      label: <Trans>Emails</Trans>,
+      used: selectedStat?.emailCount ?? 0,
+      effectiveLimit: organisationClaim.emailQuota,
+    },
+    {
+      counter: 'api' as const,
+      label: <Trans>API requests</Trans>,
+      used: selectedStat?.apiCount ?? 0,
+      effectiveLimit: organisationClaim.apiQuota,
+    },
+  ];
+
+  return (
+    <div className="space-y-4 rounded-md border p-4">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="font-medium text-sm">
+          <Trans>Usage for period: {selectedStat?.period || 'N/A'}</Trans>
+        </h3>
+
+        {monthlyStats.length > 0 && (
+          <Select value={selectedStat?.period} onValueChange={setSelectedPeriod}>
+            <SelectTrigger className="w-40">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {monthlyStats.map((stat) => (
+                <SelectItem key={stat.period} value={stat.period}>
+                  {stat.period}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+
+      {rows.map((row) => {
+        const percent =
+          row.effectiveLimit && row.effectiveLimit > 0
+            ? Math.min(100, Math.round((row.used / row.effectiveLimit) * 100))
+            : 0;
+
+        return (
+          <div key={row.counter} className="space-y-1">
+            <div className="flex items-center justify-between text-sm">
+              <span>{row.label}</span>
+              <span className="text-muted-foreground">
+                {row.used} /{' '}
+                {match(row.effectiveLimit)
+                  .with(null, () => <Trans>Unlimited</Trans>)
+                  .with(0, () => <Trans>Blocked</Trans>)
+                  .otherwise(String)}
+              </span>
+            </div>
+
+            {row.effectiveLimit && row.effectiveLimit > 0 ? <Progress className="h-2 w-full" value={percent} /> : null}
+
+            {selectedStat && isCurrentPeriod && (
+              <div className="flex w-full justify-end pt-1">
+                <OrganisationUsageResetButton organisationId={organisationId} counter={row.counter} />
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      <div className="space-y-1">
+        <div className="flex items-center justify-between text-sm">
+          <span>
+            <Trans>Reports</Trans>
+          </span>
+          <span className="text-muted-foreground">{selectedStat?.emailReports ?? 0}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,38 @@
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useRevalidator } from 'react-router';
+
+type OrganisationUsageResetButtonProps = {
+  organisationId: string;
+  counter: 'document' | 'email' | 'api';
+};
+
+export const OrganisationUsageResetButton = ({ organisationId, counter }: OrganisationUsageResetButtonProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { mutateAsync: reset, isPending } = trpc.admin.organisation.stats.reset.useMutation({
+    onSuccess: async () => {
+      toast({ title: t`Counter reset.` });
+      await revalidate();
+    },
+    onError: () => {
+      toast({ title: t`Failed to reset counter.`, variant: 'destructive' });
+    },
+  });
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      loading={isPending}
+      onClick={() => reset({ organisationId, counter })}
+    >
+      <Trans>Reset</Trans>
+    </Button>
+  );
+};
@@ -1,5 +1,6 @@
 import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { SUPPORT_EMAIL } from '@documenso/lib/constants/app';
+import { isOrganisationPendingPayment } from '@documenso/lib/utils/billing';
 import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -53,9 +54,9 @@ export const OrganisationBillingBanner = () => {
    }
  };

-  const subscriptionStatus = organisation?.subscription?.status;
+  const bannerVariant = getBannerVariant(organisation);

-  if (!organisation || subscriptionStatus === undefined || subscriptionStatus === SubscriptionStatus.ACTIVE) {
+  if (!organisation || bannerVariant === null) {
    return null;
  }

@@ -63,27 +64,28 @@ export const OrganisationBillingBanner = () => {
    <>
      <div
        className={cn({
-          'bg-yellow-200 text-yellow-900 dark:bg-yellow-400': subscriptionStatus === SubscriptionStatus.PAST_DUE,
-          'bg-destructive text-destructive-foreground': subscriptionStatus === SubscriptionStatus.INACTIVE,
+          'bg-yellow-200 text-yellow-900 dark:bg-yellow-400': bannerVariant === 'PAST_DUE',
+          'bg-destructive text-destructive-foreground':
+            bannerVariant === 'INACTIVE' || bannerVariant === 'PENDING_PAYMENT',
        })}
      >
        <div className="mx-auto flex max-w-screen-xl items-center justify-center gap-x-4 px-4 py-2 font-medium text-sm">
          <div className="flex items-center">
            <AlertTriangle className="mr-2.5 h-5 w-5" />

-            {match(subscriptionStatus)
-              .with(SubscriptionStatus.PAST_DUE, () => <Trans>Payment overdue</Trans>)
-              .with(SubscriptionStatus.INACTIVE, () => <Trans>Restricted Access</Trans>)
+            {match(bannerVariant)
+              .with('PAST_DUE', () => <Trans>Payment overdue</Trans>)
+              .with('INACTIVE', () => <Trans>Restricted Access</Trans>)
+              .with('PENDING_PAYMENT', () => <Trans>Payment required</Trans>)
              .exhaustive()}
          </div>

          <Button
            variant="outline"
            className={cn({
-              'text-yellow-900 hover:bg-yellow-100 dark:hover:bg-yellow-500':
-                subscriptionStatus === SubscriptionStatus.PAST_DUE,
+              'text-yellow-900 hover:bg-yellow-100 dark:hover:bg-yellow-500': bannerVariant === 'PAST_DUE',
              'text-destructive-foreground hover:bg-destructive hover:text-white':
-                subscriptionStatus === SubscriptionStatus.INACTIVE,
+                bannerVariant === 'INACTIVE' || bannerVariant === 'PENDING_PAYMENT',
            })}
            disabled={isPending}
            onClick={() => setIsOpen(true)}
@@ -95,8 +97,8 @@ export const OrganisationBillingBanner = () => {
      </div>

      <Dialog open={isOpen} onOpenChange={(value) => !isPending && setIsOpen(value)}>
-        {match(subscriptionStatus)
-          .with(SubscriptionStatus.PAST_DUE, () => (
+        {match(bannerVariant)
+          .with('PAST_DUE', () => (
            <DialogContent>
              <DialogHeader>
                <DialogTitle>
@@ -117,7 +119,7 @@ export const OrganisationBillingBanner = () => {
              )}
            </DialogContent>
          ))
-          .with(SubscriptionStatus.INACTIVE, () => (
+          .with('INACTIVE', () => (
            <DialogContent>
              <DialogHeader>
                <DialogTitle>
@@ -153,8 +155,66 @@ export const OrganisationBillingBanner = () => {
              )}
            </DialogContent>
          ))
-          .otherwise(() => null)}
+          .with('PENDING_PAYMENT', () => (
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>
+                  <Trans>Payment required</Trans>
+                </DialogTitle>
+
+                <DialogDescription>
+                  <Trans>This organisation is awaiting payment. Complete checkout to unlock it.</Trans>
+                </DialogDescription>
+              </DialogHeader>
+
+              <Alert variant="neutral">
+                <AlertDescription>
+                  <Trans>
+                    If there is any issue with your subscription, please contact us at{' '}
+                    <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a>.
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+
+              {canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button asChild>
+                      <Link to={`/o/${organisation.url}/settings/billing`}>
+                        <Trans>Manage Billing</Trans>
+                      </Link>
+                    </Button>
+                  </DialogClose>
+                </DialogFooter>
+              )}
+            </DialogContent>
+          ))
+          .exhaustive()}
      </Dialog>
    </>
  );
 };
+
+type BannerVariant = 'PAST_DUE' | 'INACTIVE' | 'PENDING_PAYMENT';
+
+const getBannerVariant = (organisation: ReturnType<typeof useOptionalCurrentOrganisation>): BannerVariant | null => {
+  if (!organisation) {
+    return null;
+  }
+
+  if (isOrganisationPendingPayment(organisation)) {
+    return 'PENDING_PAYMENT';
+  }
+
+  const subscriptionStatus = organisation.subscription?.status;
+
+  if (subscriptionStatus === SubscriptionStatus.PAST_DUE) {
+    return 'PAST_DUE';
+  }
+
+  if (subscriptionStatus === SubscriptionStatus.INACTIVE) {
+    return 'INACTIVE';
+  }
+
+  return null;
+};
@@ -0,0 +1,168 @@
+import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { SUPPORT_EMAIL } from '@documenso/lib/constants/app';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION, SKIP_QUERY_BATCH_META } from '@documenso/lib/constants/trpc';
+import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+import { AlertTriangle } from 'lucide-react';
+import { useState } from 'react';
+
+export const OrganisationQuotaBanner = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const organisation = useOptionalCurrentOrganisation();
+
+  const { data: quotaFlags } = trpc.organisation.getQuotaFlags.useQuery(
+    { organisationId: organisation?.id ?? '' },
+    {
+      enabled: Boolean(organisation),
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      ...SKIP_QUERY_BATCH_META,
+      refetchInterval: 1000 * 60,
+      refetchIntervalInBackground: false,
+    },
+  );
+
+  const isAnyQuotaExceeded = Boolean(
+    quotaFlags?.isDocumentQuotaExceeded || quotaFlags?.isEmailQuotaExceeded || quotaFlags?.isApiQuotaExceeded,
+  );
+
+  const isAnyQuotaNearing = Boolean(
+    quotaFlags?.isDocumentQuotaNearing || quotaFlags?.isEmailQuotaNearing || quotaFlags?.isApiQuotaNearing,
+  );
+
+  // Every member of the organisation sees the banner when a quota is exhausted or
+  // nearing its limit. When both states apply, "exceeded" wins for the banner copy
+  // and the dialog lists both exceeded and nearing items.
+  // Note: Skipping free plan banner for now because their quota can incorrectly show as exceeded.
+  if (
+    !organisation ||
+    !quotaFlags ||
+    (!isAnyQuotaExceeded && !isAnyQuotaNearing) ||
+    organisation.organisationClaim.originalSubscriptionClaimId === INTERNAL_CLAIM_ID.FREE
+  ) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className={cn({
+          'bg-yellow-200 text-yellow-900 dark:bg-yellow-400': !isAnyQuotaExceeded,
+          'bg-destructive text-destructive-foreground': isAnyQuotaExceeded,
+        })}
+      >
+        <div className="mx-auto flex max-w-screen-xl items-center justify-center gap-x-4 px-4 py-2 font-medium text-sm">
+          <div className="flex items-center">
+            <AlertTriangle className="mr-2.5 h-5 w-5" />
+
+            {isAnyQuotaExceeded ? (
+              <Trans>Your organisation has exceeded a fair use limit</Trans>
+            ) : (
+              <Trans>Your organisation is approaching a fair use limit</Trans>
+            )}
+          </div>
+
+          <Button
+            variant="outline"
+            className={cn({
+              'text-yellow-900 hover:bg-yellow-100 dark:hover:bg-yellow-500': !isAnyQuotaExceeded,
+              'text-destructive-foreground hover:bg-destructive hover:text-white': isAnyQuotaExceeded,
+            })}
+            onClick={() => setIsOpen(true)}
+            size="sm"
+          >
+            <Trans>Learn more</Trans>
+          </Button>
+        </div>
+      </div>
+
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {isAnyQuotaExceeded ? <Trans>Fair use limit exceeded</Trans> : <Trans>Approaching fair use limit</Trans>}
+            </DialogTitle>
+
+            <DialogDescription>
+              {isAnyQuotaExceeded ? (
+                <Trans>
+                  Your organisation has exceeded a fair use limit. Please contact{' '}
+                  <a className="text-primary" href={`mailto:${SUPPORT_EMAIL}`}>
+                    support
+                  </a>{' '}
+                  to review your plan's limits.
+                </Trans>
+              ) : (
+                <Trans>
+                  Your organisation is approaching a fair use limit. If you expect to need higher limits, please contact{' '}
+                  <a className="text-primary" href={`mailto:${SUPPORT_EMAIL}`}>
+                    support
+                  </a>{' '}
+                  to review your plan's limits.
+                </Trans>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Alert variant="neutral">
+            <AlertDescription>
+              <ul className="list-inside list-disc text-sm">
+                {quotaFlags.isDocumentQuotaExceeded && (
+                  <li className="list-disc">
+                    <Trans>Document creation has been temporarily paused</Trans>
+                  </li>
+                )}
+                {quotaFlags.isEmailQuotaExceeded && (
+                  <li className="list-disc">
+                    <Trans>Email sending has been temporarily paused</Trans>
+                  </li>
+                )}
+                {quotaFlags.isApiQuotaExceeded && (
+                  <li className="list-disc">
+                    <Trans>API requests have been temporarily paused</Trans>
+                  </li>
+                )}
+                {quotaFlags.isDocumentQuotaNearing && (
+                  <li className="list-disc">
+                    <Trans>Document usage is approaching fair use limits</Trans>
+                  </li>
+                )}
+                {quotaFlags.isEmailQuotaNearing && (
+                  <li className="list-disc">
+                    <Trans>Email usage is approaching fair use limits</Trans>
+                  </li>
+                )}
+                {quotaFlags.isApiQuotaNearing && (
+                  <li className="list-disc">
+                    <Trans>API usage is approaching fair use limits</Trans>
+                  </li>
+                )}
+              </ul>
+            </AlertDescription>
+          </Alert>
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="secondary">
+                <Trans>Close</Trans>
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
@@ -0,0 +1,61 @@
+import { Button } from '@documenso/ui/primitives/button';
+import { Input } from '@documenso/ui/primitives/input';
+import { Trans } from '@lingui/react/macro';
+import { PlusIcon, Trash2Icon } from 'lucide-react';
+
+type RateLimitEntryValue = { window: string; max: number };
+
+type RateLimitArrayInputProps = {
+  value: RateLimitEntryValue[];
+  onChange: (value: RateLimitEntryValue[]) => void;
+  disabled?: boolean;
+};
+
+export const RateLimitArrayInput = ({ value, onChange, disabled }: RateLimitArrayInputProps) => {
+  const entries = value ?? [];
+
+  const updateEntry = (index: number, patch: Partial<RateLimitEntryValue>) => {
+    const next = entries.map((entry, i) => (i === index ? { ...entry, ...patch } : entry));
+    onChange(next);
+  };
+
+  const removeEntry = (index: number) => {
+    onChange(entries.filter((_, i) => i !== index));
+  };
+
+  const addEntry = () => {
+    onChange([...entries, { window: '5m', max: 100 }]);
+  };
+
+  return (
+    <div className="space-y-2">
+      {entries.map((entry, index) => (
+        <div key={index} className="flex items-center gap-2">
+          <Input
+            className="w-24"
+            placeholder="5m"
+            value={entry.window}
+            disabled={disabled}
+            onChange={(e) => updateEntry(index, { window: e.target.value })}
+          />
+          <Input
+            className="w-32"
+            type="number"
+            min={1}
+            value={entry.max}
+            disabled={disabled}
+            onChange={(e) => updateEntry(index, { max: parseInt(e.target.value, 10) || 0 })}
+          />
+          <Button type="button" variant="ghost" size="sm" disabled={disabled} onClick={() => removeEntry(index)}>
+            <Trash2Icon className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+
+      <Button type="button" variant="secondary" size="sm" disabled={disabled} onClick={addEntry}>
+        <PlusIcon className="mr-2 h-4 w-4" />
+        <Trans>Add rate limit</Trans>
+      </Button>
+    </div>
+  );
+};