v1.13.2

.env.example

@@ -29,10 +29,6 @@ NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 # URL used by the web app to request itself (e.g. local background jobs)
 NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
 
-# [[SERVER]]
-# OPTIONAL: The port the server will listen on. Defaults to 3000.
-PORT=3000
-
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 # Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.

CODE_STYLE.md

@@ -1,692 +0,0 @@
-# Documenso Code Style Guide
-
-This document captures the code style, patterns, and conventions used in the Documenso codebase. It covers both enforceable rules and subjective "taste" elements that make our code consistent and maintainable.
-
-## Table of Contents
-
-1. [General Principles](#general-principles)
-2. [TypeScript Conventions](#typescript-conventions)
-3. [Imports & Dependencies](#imports--dependencies)
-4. [Functions & Methods](#functions--methods)
-5. [React & Components](#react--components)
-6. [Error Handling](#error-handling)
-7. [Async/Await Patterns](#asyncawait-patterns)
-8. [Whitespace & Formatting](#whitespace--formatting)
-9. [Naming Conventions](#naming-conventions)
-10. [Pattern Matching](#pattern-matching)
-11. [Database & Prisma](#database--prisma)
-12. [TRPC Patterns](#trpc-patterns)
-
----
-
-## General Principles
-
-- **Functional over Object-Oriented**: Prefer functional programming patterns over classes
-- **Explicit over Implicit**: Be explicit about types, return values, and error cases
-- **Early Returns**: Use guard clauses and early returns to reduce nesting
-- **Immutability**: Favor `const` over `let`; avoid mutation where possible
-
----
-
-## TypeScript Conventions
-
-### Type Definitions
-
-```typescript
-// ✅ Prefer `type` over `interface`
-type CreateDocumentOptions = {
-  templateId: number;
-  userId: number;
-  recipients: Recipient[];
-};
-
-// ❌ Avoid interfaces unless absolutely necessary
-interface CreateDocumentOptions {
-  templateId: number;
-}
-```
-
-### Type Imports
-
-```typescript
-// ✅ Use `type` keyword for type-only imports
-import type { Document, Recipient } from '@prisma/client';
-import { DocumentStatus } from '@prisma/client';
-
-// Types in function signatures
-export const findDocuments = async ({ userId, teamId }: FindDocumentsOptions) => {
-  // ...
-};
-```
-
-### Inline Types for Function Parameters
-
-```typescript
-// ✅ Extract inline types to named types
-type FinalRecipient = Pick<Recipient, 'name' | 'email' | 'role' | 'authOptions'> & {
-  templateRecipientId: number;
-  fields: Field[];
-};
-
-const finalRecipients: FinalRecipient[] = [];
-```
-
----
-
-## Imports & Dependencies
-
-### Import Organization
-
-Imports should be organized in the following order with blank lines between groups:
-
-```typescript
-// 1. React imports
-import { useCallback, useEffect, useMemo } from 'react';
-
-// 2. Third-party library imports (alphabetically)
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/react/macro';
-import type { Document, Recipient } from '@prisma/client';
-import { DocumentStatus, RecipientRole } from '@prisma/client';
-import { match } from 'ts-pattern';
-
-// 3. Internal package imports (from @documenso/*)
-import { AppError } from '@documenso/lib/errors/app-error';
-import { prisma } from '@documenso/prisma';
-import { Button } from '@documenso/ui/primitives/button';
-
-// 4. Relative imports
-import { getTeamById } from '../team/get-team';
-import type { FindResultResponse } from './types';
-```
-
-### Destructuring Imports
-
-```typescript
-// ✅ Destructure specific exports
-// ✅ Use type imports for types
-import type { Document } from '@prisma/client';
-
-import { Button } from '@documenso/ui/primitives/button';
-import { Input } from '@documenso/ui/primitives/input';
-```
-
----
-
-## Functions & Methods
-
-### Arrow Functions
-
-```typescript
-// ✅ Always use arrow functions for functions
-export const createDocument = async ({
-  userId,
-  title,
-}: CreateDocumentOptions) => {
-  // ...
-};
-
-// ✅ Callbacks and handlers
-const onSubmit = useCallback(async () => {
-  // ...
-}, [dependencies]);
-
-// ❌ Avoid regular function declarations
-function createDocument() {
-  // ...
-}
-```
-
-### Function Parameters
-
-```typescript
-// ✅ Use destructured object parameters for multiple params
-export const findDocuments = async ({
-  userId,
-  teamId,
-  status = ExtendedDocumentStatus.ALL,
-  page = 1,
-  perPage = 10,
-}: FindDocumentsOptions) => {
-  // ...
-};
-
-// ✅ Destructure on separate line when needed
-const onFormSubmit = form.handleSubmit(onSubmit);
-
-// ✅ Deconstruct nested properties explicitly
-const { user } = ctx;
-const { templateId } = input;
-```
-
----
-
-## React & Components
-
-### Component Definition
-
-```typescript
-// ✅ Use const with arrow function
-export const AddSignersFormPartial = ({
-  documentFlow,
-  recipients,
-  fields,
-  onSubmit,
-}: AddSignersFormProps) => {
-  // ...
-};
-
-// ❌ Never use classes
-class MyComponent extends React.Component {
-  // ...
-}
-```
-
-### Hooks
-
-```typescript
-// ✅ Group related hooks together with blank line separation
-const { _ } = useLingui();
-const { toast } = useToast();
-
-const { currentStep, totalSteps, previousStep } = useStep();
-
-const form = useForm<TFormSchema>({
-  resolver: zodResolver(ZFormSchema),
-  defaultValues: {
-    // ...
-  },
-});
-```
-
-### Event Handlers
-
-```typescript
-// ✅ Use arrow functions with descriptive names
-const onFormSubmit = async () => {
-  await form.trigger();
-  // ...
-};
-
-const onFieldCopy = useCallback(
-  (event?: KeyboardEvent | null) => {
-    event?.preventDefault();
-    // ...
-  },
-  [dependencies],
-);
-
-// ✅ Inline handlers for simple operations
-<Button onClick={() => setOpen(false)}>Close</Button>
-```
-
-### State Management
-
-```typescript
-// ✅ Descriptive state names with auxiliary verbs
-const [isLoading, setIsLoading] = useState(false);
-const [hasError, setHasError] = useState(false);
-const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-
-// ✅ Complex state in single useState when related
-const [coords, setCoords] = useState({
-  x: 0,
-  y: 0,
-});
-```
-
----
-
-## Error Handling
-
-### Try-Catch Blocks
-
-```typescript
-// ✅ Use try-catch for operations that might fail
-try {
-  const document = await getDocumentById({
-    documentId: Number(documentId),
-    userId: user.id,
-  });
-
-  return {
-    status: 200,
-    body: document,
-  };
-} catch (err) {
-  return {
-    status: 404,
-    body: {
-      message: 'Document not found',
-    },
-  };
-}
-```
-
-### Throwing Errors
-
-```typescript
-// ✅ Use AppError for application errors
-throw new AppError(AppErrorCode.NOT_FOUND, {
-  message: 'Template not found',
-});
-
-// ✅ Use descriptive error messages
-if (!template) {
-  throw new AppError(AppErrorCode.NOT_FOUND, {
-    message: `Template with ID ${templateId} not found`,
-  });
-}
-```
-
-### Error Parsing on Frontend
-
-```typescript
-// ✅ Parse errors on the frontend
-try {
-  await updateOrganisation({ organisationId, data });
-} catch (err) {
-  const error = AppError.parseError(err);
-  console.error(error);
-
-  toast({
-    title: t`An error occurred`,
-    description: error.message,
-    variant: 'destructive',
-  });
-}
-```
-
----
-
-## Async/Await Patterns
-
-### Async Function Definitions
-
-```typescript
-// ✅ Mark async functions clearly
-export const createDocument = async ({
-  userId,
-  title,
-}: Options): Promise<Document> => {
-  // ...
-};
-
-// ✅ Use await for promises
-const document = await prisma.document.create({ data });
-
-// ✅ Use Promise.all for parallel operations
-const [document, recipients] = await Promise.all([
-  getDocumentById({ documentId }),
-  getRecipientsForDocument({ documentId }),
-]);
-```
-
-### Void for Fire-and-Forget
-
-```typescript
-// ✅ Use void for intentionally unwaited promises
-void handleAutoSave();
-
-// ✅ Or in event handlers
-onClick={() => void onFormSubmit()}
-```
-
----
-
-## Whitespace & Formatting
-
-### Blank Lines Between Concepts
-
-```typescript
-// ✅ Blank line after imports
-import { prisma } from '@documenso/prisma';
-
-export const findDocuments = async () => {
-  // ...
-};
-
-// ✅ Blank line between logical sections
-const user = await prisma.user.findFirst({ where: { id: userId } });
-
-let team = null;
-
-if (teamId !== undefined) {
-  team = await getTeamById({ userId, teamId });
-}
-
-// ✅ Blank line before return statements
-const result = await someOperation();
-
-return result;
-```
-
-### Function/Method Spacing
-
-```typescript
-// ✅ No blank lines between chained methods in same operation
-const documents = await prisma.document
-  .findMany({ where: { userId } })
-  .then((docs) => docs.map(maskTokens));
-
-// ✅ Blank line between different operations
-const document = await createDocument({ userId });
-
-await sendDocument({ documentId: document.id });
-
-return document;
-```
-
-### Object and Array Formatting
-
-```typescript
-// ✅ Multi-line when complex
-const options = {
-  userId,
-  teamId,
-  status: ExtendedDocumentStatus.ALL,
-  page: 1,
-};
-
-// ✅ Single line when simple
-const coords = { x: 0, y: 0 };
-
-// ✅ Array items on separate lines when objects
-const recipients = [
-  {
-    name: 'John',
-    email: 'john@example.com',
-  },
-  {
-    name: 'Jane',
-    email: 'jane@example.com',
-  },
-];
-```
-
----
-
-## Naming Conventions
-
-### Variables
-
-```typescript
-// ✅ camelCase for variables and functions
-const documentId = 123;
-const onSubmit = () => {};
-
-// ✅ Descriptive names with auxiliary verbs for booleans
-const isLoading = false;
-const hasError = false;
-const canEdit = true;
-const shouldRender = true;
-
-// ✅ Prefix with $ for DOM elements
-const $page = document.querySelector('.page');
-const $inputRef = useRef<HTMLInputElement>(null);
-```
-
-### Types and Schemas
-
-```typescript
-// ✅ PascalCase for types
-type CreateDocumentOptions = {
-  userId: number;
-};
-
-// ✅ Prefix Zod schemas with Z
-const ZCreateDocumentSchema = z.object({
-  title: z.string(),
-});
-
-// ✅ Prefix type from Zod schema with T
-type TCreateDocumentSchema = z.infer<typeof ZCreateDocumentSchema>;
-```
-
-### Constants
-
-```typescript
-// ✅ UPPER_SNAKE_CASE for true constants
-const DEFAULT_DOCUMENT_DATE_FORMAT = 'dd/MM/yyyy';
-const MAX_FILE_SIZE = 1024 * 1024 * 5;
-
-// ✅ camelCase for const variables that aren't "constants"
-const userId = await getUserId();
-```
-
-### Functions
-
-```typescript
-// ✅ Verb-based names for functions
-const createDocument = async () => {};
-const findDocuments = async () => {};
-const updateDocument = async () => {};
-const deleteDocument = async () => {};
-
-// ✅ On prefix for event handlers
-const onSubmit = () => {};
-const onClick = () => {};
-const onFieldCopy = () => {}; // 'on' is also acceptable
-```
-
-### Clarity Over Brevity
-
-```typescript
-// ✅ Prefer descriptive names over abbreviations
-const superLongMethodThatIsCorrect = () => {};
-const recipientAuthenticationOptions = {};
-const documentMetadata = {};
-
-// ❌ Avoid abbreviations that sacrifice clarity
-const supLongMethThatIsCorrect = () => {};
-const recipAuthOpts = {};
-const docMeta = {};
-
-// ✅ Common abbreviations that are widely understood are acceptable
-const userId = 123;
-const htmlElement = document.querySelector('div');
-const apiResponse = await fetch('/api');
-```
-
----
-
-## Pattern Matching
-
-### Using ts-pattern
-
-```typescript
-import { match } from 'ts-pattern';
-
-// ✅ Use match for complex conditionals
-const result = match(status)
-  .with(ExtendedDocumentStatus.DRAFT, () => ({
-    status: 'draft',
-  }))
-  .with(ExtendedDocumentStatus.PENDING, () => ({
-    status: 'pending',
-  }))
-  .with(ExtendedDocumentStatus.COMPLETED, () => ({
-    status: 'completed',
-  }))
-  .exhaustive();
-
-// ✅ Use .otherwise() for default case when not exhaustive
-const value = match(type)
-  .with('text', () => 'Text field')
-  .with('number', () => 'Number field')
-  .otherwise(() => 'Unknown field');
-```
-
----
-
-## Database & Prisma
-
-### Query Structure
-
-```typescript
-// ✅ Destructure commonly used fields
-const { id, email, name } = user;
-
-// ✅ Use select to limit returned fields
-const user = await prisma.user.findFirst({
-  where: { id: userId },
-  select: {
-    id: true,
-    email: true,
-    name: true,
-  },
-});
-
-// ✅ Use include for relations
-const document = await prisma.document.findFirst({
-  where: { id: documentId },
-  include: {
-    recipients: true,
-    fields: true,
-  },
-});
-```
-
-### Transactions
-
-```typescript
-// ✅ Use transactions for related operations
-return await prisma.$transaction(async (tx) => {
-  const document = await tx.document.create({ data });
-
-  await tx.field.createMany({ data: fieldsData });
-
-  await tx.documentAuditLog.create({ data: auditData });
-
-  return document;
-});
-```
-
-### Where Clauses
-
-```typescript
-// ✅ Build complex where clauses separately
-const whereClause: Prisma.DocumentWhereInput = {
-  AND: [
-    { userId: user.id },
-    { deletedAt: null },
-    { status: { in: [DocumentStatus.DRAFT, DocumentStatus.PENDING] } },
-  ],
-};
-
-const documents = await prisma.document.findMany({
-  where: whereClause,
-});
-```
-
----
-
-## TRPC Patterns
-
-### Router Structure
-
-```typescript
-// ✅ Destructure context and input at start
-.query(async ({ input, ctx }) => {
-  const { teamId } = ctx;
-  const { templateId } = input;
-
-  ctx.logger.info({
-    input: { templateId },
-  });
-
-  return await getTemplateById({
-    id: templateId,
-    userId: ctx.user.id,
-    teamId,
-  });
-});
-```
-
-### Request/Response Schemas
-
-```typescript
-// ✅ Name schemas clearly
-const ZCreateDocumentRequestSchema = z.object({
-  title: z.string(),
-  recipients: z.array(ZRecipientSchema),
-});
-
-const ZCreateDocumentResponseSchema = z.object({
-  documentId: z.number(),
-  status: z.string(),
-});
-```
-
-### Error Handling in TRPC
-
-```typescript
-// ✅ Catch and transform errors appropriately
-try {
-  const result = await createDocument({ userId, data });
-
-  return result;
-} catch (err) {
-  return AppError.toRestAPIError(err);
-}
-
-// ✅ Or throw AppError directly
-if (!template) {
-  throw new AppError(AppErrorCode.NOT_FOUND, {
-    message: 'Template not found',
-  });
-}
-```
-
----
-
-## Additional Patterns
-
-### Optional Chaining
-
-```typescript
-// ✅ Use optional chaining for potentially undefined values
-const email = user?.email;
-const recipientToken = recipient?.token ?? '';
-
-// ✅ Use nullish coalescing for defaults
-const pageSize = perPage ?? 10;
-const status = documentStatus ?? DocumentStatus.DRAFT;
-```
-
-### Array Operations
-
-```typescript
-// ✅ Use functional array methods
-const activeRecipients = recipients.filter((r) => r.signingStatus === 'SIGNED');
-const recipientEmails = recipients.map((r) => r.email);
-const hasSignedRecipients = recipients.some((r) => r.signingStatus === 'SIGNED');
-
-// ✅ Use find instead of filter + [0]
-const recipient = recipients.find((r) => r.id === recipientId);
-```
-
-### Conditional Rendering
-
-```typescript
-// ✅ Use && for conditional rendering
-{isLoading && <Loader />}
-
-// ✅ Use ternary for either/or
-{isLoading ? <Loader /> : <Content />}
-
-// ✅ Extract complex conditions to variables
-const shouldShowAdvanced = isAdmin && hasPermission && !isDisabled;
-{shouldShowAdvanced && <AdvancedSettings />}
-```
-
----
-
-## When in Doubt
-
-- **Consistency**: Follow the patterns you see in similar files
-- **Readability**: Favor code that's easy to read over clever one-liners
-- **Explicitness**: Be explicit rather than implicit
-- **Whitespace**: Use blank lines to separate logical sections
-- **Early Returns**: Use guard clauses to reduce nesting
-- **Functional**: Prefer functional patterns over imperative ones

apps/openpage-api/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev -p 3003",
     "build": "next build",
-    "start": "next start -p 3003",
+    "start": "next start",
     "lint:fix": "next lint --fix",
     "clean": "rimraf .next && rimraf node_modules"
   },

apps/remix/app/app.css

@@ -27,45 +27,9 @@
   font-display: swap;
 }
 
-@font-face {
-  font-family: 'Noto Sans';
-  src: url('/fonts/noto-sans.ttf') format('truetype-variations');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Korean noto sans */
-@font-face {
-  font-family: 'Noto Sans Korean';
-  src: url('/fonts/noto-sans-korean.ttf') format('truetype-variations');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Japanese noto sans */
-@font-face {
-  font-family: 'Noto Sans Japanese';
-  src: url('/fonts/noto-sans-japanese.ttf') format('truetype-variations');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Chinese noto sans */
-@font-face {
-  font-family: 'Noto Sans Chinese';
-  src: url('/fonts/noto-sans-chinese.ttf') format('truetype-variations');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-
 @layer base {
   :root {
     --font-sans: 'Inter';
     --font-signature: 'Caveat';
-    --font-noto: 'Noto Sans', 'Noto Sans Korean', 'Noto Sans Japanese', 'Noto Sans Chinese';
   }
 }

apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx

@@ -1,218 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
-import { OrganisationMemberRole } from '@prisma/client';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
-import { match } from 'ts-pattern';
-import { z } from 'zod';
-
-import { getHighestOrganisationRoleInGroup } from '@documenso/lib/utils/organisations';
-import { trpc } from '@documenso/trpc/react';
-import type { TGetAdminOrganisationResponse } from '@documenso/trpc/server/admin-router/get-admin-organisation.types';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type AdminOrganisationMemberUpdateDialogProps = {
-  trigger?: React.ReactNode;
-  organisationId: string;
-  organisationMember: TGetAdminOrganisationResponse['members'][number];
-  isOwner: boolean;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const ZUpdateOrganisationMemberFormSchema = z.object({
-  role: z.enum(['OWNER', 'ADMIN', 'MANAGER', 'MEMBER']),
-});
-
-type ZUpdateOrganisationMemberSchema = z.infer<typeof ZUpdateOrganisationMemberFormSchema>;
-
-export const AdminOrganisationMemberUpdateDialog = ({
-  trigger,
-  organisationId,
-  organisationMember,
-  isOwner,
-  ...props
-}: AdminOrganisationMemberUpdateDialogProps) => {
-  const [open, setOpen] = useState(false);
-
-  const { t } = useLingui();
-  const { toast } = useToast();
-  const navigate = useNavigate();
-
-  // Determine the current role value for the form
-  const currentRoleValue = isOwner
-    ? 'OWNER'
-    : getHighestOrganisationRoleInGroup(
-        organisationMember.organisationGroupMembers.map((ogm) => ogm.group),
-      );
-  const organisationMemberName = organisationMember.user.name ?? organisationMember.user.email;
-
-  const form = useForm<ZUpdateOrganisationMemberSchema>({
-    resolver: zodResolver(ZUpdateOrganisationMemberFormSchema),
-    defaultValues: {
-      role: currentRoleValue,
-    },
-  });
-
-  const { mutateAsync: updateOrganisationMemberRole } =
-    trpc.admin.organisationMember.updateRole.useMutation();
-
-  const onFormSubmit = async ({ role }: ZUpdateOrganisationMemberSchema) => {
-    try {
-      await updateOrganisationMemberRole({
-        organisationId,
-        userId: organisationMember.userId,
-        role,
-      });
-
-      const roleLabel = match(role)
-        .with('OWNER', () => t`Owner`)
-        .with(OrganisationMemberRole.ADMIN, () => t`Admin`)
-        .with(OrganisationMemberRole.MANAGER, () => t`Manager`)
-        .with(OrganisationMemberRole.MEMBER, () => t`Member`)
-        .exhaustive();
-
-      toast({
-        title: t`Success`,
-        description:
-          role === 'OWNER'
-            ? t`Ownership transferred to ${organisationMemberName}.`
-            : t`Updated ${organisationMemberName} to ${roleLabel}.`,
-        duration: 5000,
-      });
-
-      setOpen(false);
-
-      // Refresh the page to show updated data
-      await navigate(0);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: t`An unknown error occurred`,
-        description: t`We encountered an unknown error while attempting to update this organisation member. Please try again later.`,
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    form.reset({
-      role: currentRoleValue,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentRoleValue, form]);
-
-  return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
-      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
-        {trigger ?? (
-          <Button variant="secondary">
-            <Trans>Update role</Trans>
-          </Button>
-        )}
-      </DialogTrigger>
-
-      <DialogContent position="center">
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Update organisation member</Trans>
-          </DialogTitle>
-
-          <DialogDescription className="mt-4">
-            <Trans>
-              You are currently updating{' '}
-              <span className="font-bold">{organisationMemberName}.</span>
-            </Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
-              <FormField
-                control={form.control}
-                name="role"
-                render={({ field }) => (
-                  <FormItem className="w-full">
-                    <FormLabel required>
-                      <Trans>Role</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Select {...field} onValueChange={field.onChange}>
-                        <SelectTrigger className="text-muted-foreground">
-                          <SelectValue />
-                        </SelectTrigger>
-
-                        <SelectContent className="w-full" position="popper">
-                          <SelectItem value="OWNER">
-                            <Trans>Owner</Trans>
-                          </SelectItem>
-                          <SelectItem value={OrganisationMemberRole.ADMIN}>
-                            <Trans>Admin</Trans>
-                          </SelectItem>
-                          <SelectItem value={OrganisationMemberRole.MANAGER}>
-                            <Trans>Manager</Trans>
-                          </SelectItem>
-                          <SelectItem value={OrganisationMemberRole.MEMBER}>
-                            <Trans>Member</Trans>
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <DialogFooter className="mt-4">
-                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                  <Trans>Cancel</Trans>
-                </Button>
-
-                <Button type="submit" loading={form.formState.isSubmitting}>
-                  <Trans>Update</Trans>
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -19,15 +19,13 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useCurrentTeam } from '~/providers/team';
 
 type DocumentDuplicateDialogProps = {
-  id: string;
-  token?: string;
+  id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
 export const DocumentDuplicateDialog = ({
   id,
-  token,
   open,
   onOpenChange,
 }: DocumentDuplicateDialogProps) => {
@@ -38,23 +36,27 @@ export const DocumentDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
-  const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
-    trpcReact.envelope.item.getManyByToken.useQuery(
-      {
-        envelopeId: id,
-        access: token ? { type: 'recipient', token } : { type: 'user' },
-      },
-      {
-        enabled: open,
-      },
-    );
+  const { data: document, isLoading } = trpcReact.document.get.useQuery(
+    {
+      documentId: id,
+    },
+    {
+      queryHash: `document-duplicate-dialog-${id}`,
+      enabled: open === true,
+    },
+  );
 
-  const envelopeItems = envelopeItemsPayload?.data || [];
+  const documentData = document?.documentData
+    ? {
+        ...document.documentData,
+        data: document.documentData.initialData,
+      }
+    : undefined;
 
   const documentsPath = formatDocumentsPath(team.url);
 
-  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
-    trpcReact.envelope.duplicate.useMutation({
+  const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
+    trpcReact.document.duplicate.useMutation({
       onSuccess: async ({ id }) => {
         toast({
           title: _(msg`Document Duplicated`),
@@ -69,7 +71,7 @@ export const DocumentDuplicateDialog = ({
 
   const onDuplicate = async () => {
     try {
-      await duplicateEnvelope({ envelopeId: id });
+      await duplicateDocument({ documentId: id });
     } catch {
       toast({
         title: _(msg`Something went wrong`),
@@ -81,14 +83,14 @@ export const DocumentDuplicateDialog = ({
   };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isDuplicating && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
             <Trans>Duplicate</Trans>
           </DialogTitle>
         </DialogHeader>
-        {isLoadingEnvelopeItems || !envelopeItems || envelopeItems.length === 0 ? (
+        {!documentData || isLoading ? (
           <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
             <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
               <Trans>Loading Document...</Trans>
@@ -96,12 +98,7 @@ export const DocumentDuplicateDialog = ({
           </div>
         ) : (
           <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <PDFViewer
-              key={envelopeItems[0].id}
-              envelopeItem={envelopeItems[0]}
-              token={undefined}
-              version="original"
-            />
+            <PDFViewer key={document?.id} documentData={documentData} />
           </div>
         )}
 
@@ -118,8 +115,8 @@ export const DocumentDuplicateDialog = ({
 
             <Button
               type="button"
-              disabled={isDuplicating}
-              loading={isDuplicating}
+              disabled={isDuplicateLoading || isLoading}
+              loading={isDuplicateLoading}
               onClick={onDuplicate}
               className="flex-1"
             >

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -15,16 +15,17 @@ import {
 import { AnimatePresence, motion } from 'framer-motion';
 import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
-import { match } from 'ts-pattern';
 import * as z from 'zod';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
+import { formatSigningLink } from '@documenso/lib/utils/recipients';
 import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
-import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -60,10 +61,8 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type EnvelopeDistributeDialogProps = {
   envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
     recipients: Recipient[];
-    fields: Pick<Field, 'type' | 'recipientId'>[];
+    fields: Field[];
   };
-  onDistribute?: () => Promise<void>;
-  documentRootPath: string;
   trigger?: React.ReactNode;
 };
 
@@ -85,19 +84,13 @@ export const ZEnvelopeDistributeFormSchema = z.object({
 
 export type TEnvelopeDistributeFormSchema = z.infer<typeof ZEnvelopeDistributeFormSchema>;
 
-export const EnvelopeDistributeDialog = ({
-  envelope,
-  trigger,
-  documentRootPath,
-  onDistribute,
-}: EnvelopeDistributeDialogProps) => {
+export const EnvelopeDistributeDialog = ({ envelope, trigger }: EnvelopeDistributeDialogProps) => {
   const organisation = useCurrentOrganisation();
 
   const recipients = envelope.recipients;
 
   const { toast } = useToast();
   const { t } = useLingui();
-  const navigate = useNavigate();
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -134,44 +127,22 @@ export const EnvelopeDistributeDialog = ({
 
   const distributionMethod = watch('meta.distributionMethod');
 
-  const recipientsMissingSignatureFields = useMemo(
+  const everySignerHasSignature = useMemo(
     () =>
-      envelope.recipients.filter(
-        (recipient) =>
-          recipient.role === RecipientRole.SIGNER &&
-          !envelope.fields.some(
+      envelope.recipients
+        .filter((recipient) => recipient.role === RecipientRole.SIGNER)
+        .every((recipient) =>
+          envelope.fields.some(
             (field) => field.type === FieldType.SIGNATURE && field.recipientId === recipient.id,
           ),
-      ),
+        ),
     [envelope.recipients, envelope.fields],
   );
 
-  const invalidEnvelopeCode = useMemo(() => {
-    if (recipientsMissingSignatureFields.length > 0) {
-      return 'MISSING_SIGNATURES';
-    }
-
-    if (envelope.recipients.length === 0) {
-      return 'MISSING_RECIPIENTS';
-    }
-
-    return null;
-  }, [envelope.recipients, envelope.fields, recipientsMissingSignatureFields]);
-
   const onFormSubmit = async ({ meta }: TEnvelopeDistributeFormSchema) => {
     try {
       await distributeEnvelope({ envelopeId: envelope.id, meta });
 
-      await onDistribute?.();
-
-      let redirectPath = `${documentRootPath}/${envelope.id}`;
-
-      if (meta.distributionMethod === DocumentDistributionMethod.NONE) {
-        redirectPath += '?action=copy-links';
-      }
-
-      await navigate(redirectPath);
-
       toast({
         title: t`Envelope distributed`,
         description: t`Your envelope has been distributed successfully.`,
@@ -207,8 +178,7 @@ export const EnvelopeDistributeDialog = ({
             <Trans>Recipients will be able to sign the document once sent</Trans>
           </DialogDescription>
         </DialogHeader>
-
-        {!invalidEnvelopeCode ? (
+        {everySignerHasSignature ? (
           <Form {...form}>
             <form onSubmit={handleSubmit(onFormSubmit)}>
               <fieldset disabled={isSubmitting}>
@@ -230,11 +200,7 @@ export const EnvelopeDistributeDialog = ({
                   </TabsList>
                 </Tabs>
 
-                <div
-                  className={cn('min-h-72', {
-                    'min-h-[23rem]': organisation.organisationClaim.flags.emailDomains,
-                  })}
-                >
+                <div className="min-h-72">
                   <AnimatePresence initial={false} mode="wait">
                     {distributionMethod === DocumentDistributionMethod.EMAIL && (
                       <motion.div
@@ -336,7 +302,7 @@ export const EnvelopeDistributeDialog = ({
                                     <Trans>Message</Trans>{' '}
                                     <span className="text-muted-foreground">(Optional)</span>
                                     <Tooltip>
-                                      <TooltipTrigger type="button">
+                                      <TooltipTrigger>
                                         <InfoIcon className="mx-2 h-4 w-4" />
                                       </TooltipTrigger>
                                       <TooltipContent className="text-muted-foreground p-4">
@@ -369,18 +335,71 @@ export const EnvelopeDistributeDialog = ({
                         exit={{ opacity: 0, transition: { duration: 0.15 } }}
                         className="min-h-60 rounded-lg border"
                       >
-                        <div className="text-muted-foreground py-24 text-center text-sm">
-                          <p>
-                            <Trans>We won't send anything to notify recipients.</Trans>
-                          </p>
+                        {envelope.status === DocumentStatus.DRAFT ? (
+                          <div className="text-muted-foreground py-24 text-center text-sm">
+                            <p>
+                              <Trans>We won't send anything to notify recipients.</Trans>
+                            </p>
 
-                          <p className="mt-2">
-                            <Trans>
-                              We will generate signing links for you, which you can send to the
-                              recipients through your method of choice.
-                            </Trans>
-                          </p>
-                        </div>
+                            <p className="mt-2">
+                              <Trans>
+                                We will generate signing links for you, which you can send to the
+                                recipients through your method of choice.
+                              </Trans>
+                            </p>
+                          </div>
+                        ) : (
+                          <ul className="text-muted-foreground divide-y">
+                            {recipients.length === 0 && (
+                              <li className="flex flex-col items-center justify-center py-6 text-sm">
+                                <Trans>No recipients</Trans>
+                              </li>
+                            )}
+
+                            {recipients.map((recipient) => (
+                              <li
+                                key={recipient.id}
+                                className="flex items-center justify-between px-4 py-3 text-sm"
+                              >
+                                <AvatarWithText
+                                  avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
+                                  primaryText={
+                                    <p className="text-muted-foreground text-sm">
+                                      {recipient.email}
+                                    </p>
+                                  }
+                                  secondaryText={
+                                    <p className="text-muted-foreground/70 text-xs">
+                                      {t(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
+                                    </p>
+                                  }
+                                />
+
+                                {recipient.role !== RecipientRole.CC && (
+                                  <CopyTextButton
+                                    value={formatSigningLink(recipient.token)}
+                                    onCopySuccess={() => {
+                                      toast({
+                                        title: t`Copied to clipboard`,
+                                        description: t`The signing link has been copied to your clipboard.`,
+                                      });
+                                    }}
+                                    badgeContentUncopied={
+                                      <p className="ml-1 text-xs">
+                                        <Trans>Copy</Trans>
+                                      </p>
+                                    }
+                                    badgeContentCopied={
+                                      <p className="ml-1 text-xs">
+                                        <Trans>Copied</Trans>
+                                      </p>
+                                    }
+                                  />
+                                )}
+                              </li>
+                            ))}
+                          </ul>
+                        )}
                       </motion.div>
                     )}
                   </AnimatePresence>
@@ -407,24 +426,12 @@ export const EnvelopeDistributeDialog = ({
         ) : (
           <>
             <Alert variant="warning">
-              {match(invalidEnvelopeCode)
-                .with('MISSING_RECIPIENTS', () => (
-                  <AlertDescription>
-                    <Trans>You need at least one recipient to send a document</Trans>
-                  </AlertDescription>
-                ))
-                .with('MISSING_SIGNATURES', () => (
-                  <AlertDescription>
-                    <Trans>The following signers are missing signature fields:</Trans>
-
-                    <ul className="ml-2 mt-1 list-inside list-disc">
-                      {recipientsMissingSignatureFields.map((recipient) => (
-                        <li key={recipient.id}>{recipient.email}</li>
-                      ))}
-                    </ul>
-                  </AlertDescription>
-                ))
-                .exhaustive()}
+              <AlertDescription>
+                <Trans>
+                  Some signers have not been assigned a signature field. Please assign at least 1
+                  signature field to each signer before proceeding.
+                </Trans>
+              </AlertDescription>
             </Alert>
 
             <DialogFooter>

apps/remix/app/components/dialogs/envelope-download-dialog.tsx

@@ -1,204 +0,0 @@
-import { useState } from 'react';
-
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, type EnvelopeItem } from '@prisma/client';
-import { DownloadIcon, FileTextIcon } from 'lucide-react';
-
-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-type EnvelopeItemToDownload = Pick<EnvelopeItem, 'id' | 'envelopeId' | 'title' | 'order'>;
-
-type EnvelopeDownloadDialogProps = {
-  envelopeId: string;
-  envelopeStatus: DocumentStatus;
-  envelopeItems?: EnvelopeItemToDownload[];
-
-  /**
-   * The recipient token to download the document.
-   *
-   * If not provided, it will be assumed that the current user can access the document.
-   */
-  token?: string;
-  trigger: React.ReactNode;
-};
-
-export const EnvelopeDownloadDialog = ({
-  envelopeId,
-  envelopeStatus,
-  envelopeItems: initialEnvelopeItems,
-  token,
-  trigger,
-}: EnvelopeDownloadDialogProps) => {
-  const { toast } = useToast();
-  const { t } = useLingui();
-
-  const [open, setOpen] = useState(false);
-
-  const [isDownloadingState, setIsDownloadingState] = useState<{
-    [envelopeItemIdAndVersion: string]: boolean;
-  }>({});
-
-  const generateDownloadKey = (envelopeItemId: string, version: 'original' | 'signed') =>
-    `${envelopeItemId}-${version}`;
-
-  const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
-    trpc.envelope.item.getManyByToken.useQuery(
-      {
-        envelopeId,
-        access: token ? { type: 'recipient', token } : { type: 'user' },
-      },
-      {
-        initialData: initialEnvelopeItems ? { data: initialEnvelopeItems } : undefined,
-        enabled: open,
-      },
-    );
-
-  const envelopeItems = envelopeItemsPayload?.data || [];
-
-  const onDownload = async (
-    envelopeItem: EnvelopeItemToDownload,
-    version: 'original' | 'signed',
-  ) => {
-    const { id: envelopeItemId } = envelopeItem;
-
-    if (isDownloadingState[generateDownloadKey(envelopeItemId, version)]) {
-      return;
-    }
-
-    setIsDownloadingState((prev) => ({
-      ...prev,
-      [generateDownloadKey(envelopeItemId, version)]: true,
-    }));
-
-    try {
-      await downloadPDF({
-        envelopeItem,
-        token,
-        fileName: envelopeItem.title,
-        version,
-      });
-
-      setIsDownloadingState((prev) => ({
-        ...prev,
-        [generateDownloadKey(envelopeItemId, version)]: false,
-      }));
-    } catch (error) {
-      setIsDownloadingState((prev) => ({
-        ...prev,
-        [generateDownloadKey(envelopeItemId, version)]: false,
-      }));
-
-      console.error(error);
-
-      toast({
-        title: t`Something went wrong`,
-        description: t`This document could not be downloaded at this time. Please try again.`,
-        variant: 'destructive',
-        duration: 7500,
-      });
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => setOpen(value)}>
-      <DialogTrigger asChild>{trigger}</DialogTrigger>
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Download Files</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <Trans>Select the files you would like to download.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-4">
-          {isLoadingEnvelopeItems ? (
-            <>
-              {Array.from({ length: 1 }).map((_, index) => (
-                <div
-                  key={index}
-                  className="border-border bg-card flex items-center gap-2 rounded-lg border p-4"
-                >
-                  <Skeleton className="h-10 w-10 flex-shrink-0 rounded-lg" />
-
-                  <div className="flex w-full flex-col gap-2">
-                    <Skeleton className="h-4 w-28 rounded-lg" />
-                    <Skeleton className="h-4 w-20 rounded-lg" />
-                  </div>
-
-                  <Skeleton className="h-10 w-20 flex-shrink-0 rounded-lg" />
-                </div>
-              ))}
-            </>
-          ) : (
-            envelopeItems.map((item) => (
-              <div
-                key={item.id}
-                className="border-border bg-card hover:bg-accent/50 flex items-center gap-4 rounded-lg border p-4 transition-colors"
-              >
-                <div className="flex-shrink-0">
-                  <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg">
-                    <FileTextIcon className="text-primary h-5 w-5" />
-                  </div>
-                </div>
-
-                <div className="min-w-0 flex-1">
-                  {/* Todo: Envelopes - Fix overflow */}
-                  <h4 className="text-foreground truncate text-sm font-medium">{item.title}</h4>
-                  <p className="text-muted-foreground mt-0.5 text-xs">
-                    <Trans>PDF Document</Trans>
-                  </p>
-                </div>
-
-                <div className="flex flex-shrink-0 items-center gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="text-xs"
-                    onClick={async () => onDownload(item, 'original')}
-                    loading={isDownloadingState[generateDownloadKey(item.id, 'original')]}
-                  >
-                    {!isDownloadingState[generateDownloadKey(item.id, 'original')] && (
-                      <DownloadIcon className="mr-2 h-4 w-4" />
-                    )}
-                    <Trans context="Original document (adjective)">Original</Trans>
-                  </Button>
-
-                  {envelopeStatus === DocumentStatus.COMPLETED && (
-                    <Button
-                      variant="default"
-                      size="sm"
-                      className="text-xs"
-                      onClick={async () => onDownload(item, 'signed')}
-                      loading={isDownloadingState[generateDownloadKey(item.id, 'signed')]}
-                    >
-                      {!isDownloadingState[generateDownloadKey(item.id, 'signed')] && (
-                        <DownloadIcon className="mr-2 h-4 w-4" />
-                      )}
-                      <Trans context="Signed document (adjective)">Signed</Trans>
-                    </Button>
-                  )}
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -43,7 +43,7 @@ export const EnvelopeDuplicateDialog = ({
 
   const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
     trpc.envelope.duplicate.useMutation({
-      onSuccess: async ({ id }) => {
+      onSuccess: async ({ duplicatedEnvelopeId }) => {
         toast({
           title: t`Envelope Duplicated`,
           description: t`Your envelope has been successfully duplicated.`,
@@ -55,7 +55,7 @@ export const EnvelopeDuplicateDialog = ({
             ? formatDocumentsPath(team.url)
             : formatTemplatesPath(team.url);
 
-        await navigate(`${path}/${id}/edit`);
+        await navigate(`${path}/${duplicatedEnvelopeId}/edit`);
         setOpen(false);
       },
     });

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

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Plural, Trans } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { startRegistration } from '@simplewebauthn/browser';
 import { KeyRoundIcon } from 'lucide-react';
@@ -209,11 +209,7 @@ export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCre
                     ))
                     .with('TOO_MANY_PASSKEYS', () => (
                       <AlertDescription>
-                        <Plural
-                          value={MAXIMUM_PASSKEYS}
-                          one="You cannot have more than # passkey."
-                          other="You cannot have more than # passkeys."
-                        />
+                        <Trans>You cannot have more than {MAXIMUM_PASSKEYS} passkeys.</Trans>
                       </AlertDescription>
                     ))
                     .with('InvalidStateError', () => (

apps/remix/app/components/dialogs/sign-field-checkbox-dialog.tsx

@@ -1,186 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { Plural, Trans } from '@lingui/react/macro';
-import { createCallable } from 'react-call';
-import { useForm, useWatch } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import { z } from 'zod';
-
-import { validateCheckboxLength } from '@documenso/lib/advanced-fields-validation/validate-checkbox';
-import { type TCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Checkbox } from '@documenso/ui/primitives/checkbox';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { Form, FormControl, FormField, FormItem } from '@documenso/ui/primitives/form/form';
-
-export type SignFieldCheckboxDialogProps = {
-  fieldMeta: TCheckboxFieldMeta;
-  validationRule: '>=' | '=' | '<=';
-  validationLength: number;
-  preselectedIndices: number[];
-};
-
-export const SignFieldCheckboxDialog = createCallable<
-  SignFieldCheckboxDialogProps,
-  number[] | null
->(({ call, fieldMeta, validationRule, validationLength, preselectedIndices }) => {
-  const ZSignFieldCheckboxFormSchema = z
-    .object({
-      values: z.array(
-        z.object({
-          checked: z.boolean(),
-          value: z.string(),
-        }),
-      ),
-    })
-    .superRefine((data, ctx) => {
-      // Allow unselecting all options if the field is not required even if
-      // validation is not met.
-      if (!fieldMeta.required && data.values.every((value) => !value.checked)) {
-        return;
-      }
-
-      const numberOfSelectedValues = data.values.filter((value) => value.checked).length;
-
-      const isValid = validateCheckboxLength(
-        numberOfSelectedValues,
-        validationRule,
-        validationLength,
-      );
-
-      if (!isValid) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: msg`Validation failed`.id,
-        });
-      }
-    });
-
-  const form = useForm<z.infer<typeof ZSignFieldCheckboxFormSchema>>({
-    resolver: zodResolver(ZSignFieldCheckboxFormSchema),
-    defaultValues: {
-      values: (fieldMeta.values || []).map((value, index) => ({
-        checked: preselectedIndices.includes(index) || false,
-        value: value.value,
-      })),
-    },
-  });
-
-  const formValues = useWatch({
-    control: form.control,
-  });
-
-  return (
-    <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-      <DialogContent position="center">
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Sign Checkbox Field</Trans>
-          </DialogTitle>
-
-          <DialogDescription
-            className={cn('mt-4', {
-              'text-destructive': Object.keys(form.formState.errors).length > 0,
-            })}
-          >
-            {match(validationRule)
-              .with('>=', () => (
-                <Plural
-                  value={validationLength}
-                  one="Select at least # option"
-                  other="Select at least # options"
-                />
-              ))
-              .with('=', () => (
-                <Plural
-                  value={validationLength}
-                  one="Select exactly # option"
-                  other="Select exactly # options"
-                />
-              ))
-              .with('<=', () => (
-                <Plural
-                  value={validationLength}
-                  one="Select at most # option"
-                  other="Select at most # options"
-                />
-              ))
-              .exhaustive()}
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit((data) =>
-              call.end(
-                data.values
-                  .map((value, i) => (value.checked ? i : null))
-                  .filter((value) => value !== null),
-              ),
-            )}
-          >
-            <fieldset
-              className="flex h-full flex-col space-y-4"
-              disabled={form.formState.isSubmitting}
-            >
-              <ul className="space-y-3">
-                {(formValues.values || []).map((value, index) => (
-                  <li key={`checkbox-${index}`}>
-                    <FormField
-                      control={form.control}
-                      name={`values.${index}`}
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <div className="flex items-center">
-                              <Checkbox
-                                id={`checkbox-value-${index}`}
-                                className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
-                                checked={field.value.checked}
-                                onCheckedChange={(checked) => {
-                                  field.onChange({
-                                    ...field.value,
-                                    checked,
-                                  });
-                                }}
-                              />
-
-                              <label
-                                className="text-muted-foreground ml-2 w-full text-sm"
-                                htmlFor={`checkbox-value-${index}`}
-                              >
-                                {value.value}
-                              </label>
-                            </div>
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </li>
-                ))}
-              </ul>
-
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => call.end(null)}>
-                  <Trans>Cancel</Trans>
-                </Button>
-
-                <Button type="submit">
-                  <Trans>Sign</Trans>
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-});

apps/remix/app/components/dialogs/sign-field-dropdown-dialog.tsx

@@ -1,15 +1,40 @@
-import { useLingui } from '@lingui/react/macro';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import type { TDropdownFieldMeta } from '@documenso/lib/types/field-meta';
+import { Button } from '@documenso/ui/primitives/button';
 import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@documenso/ui/primitives/command';
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+const ZSignFieldDropdownFormSchema = z.object({
+  dropdown: z.string().min(1, { message: msg`Option is required`.id }),
+});
+
+type TSignFieldDropdownFormSchema = z.infer<typeof ZSignFieldDropdownFormSchema>;
 
 export type SignFieldDropdownDialogProps = {
   fieldMeta: TDropdownFieldMeta;
@@ -21,25 +46,72 @@ export const SignFieldDropdownDialog = createCallable<SignFieldDropdownDialogPro
 
     const values = fieldMeta.values?.map((value) => value.value) ?? [];
 
+    const form = useForm<TSignFieldDropdownFormSchema>({
+      resolver: zodResolver(ZSignFieldDropdownFormSchema),
+      defaultValues: {
+        dropdown: fieldMeta.defaultValue,
+      },
+    });
+
     return (
-      <CommandDialog
-        position="start"
-        dialogContentClassName="mt-4"
-        open={true}
-        onOpenChange={(value) => (!value ? call.end(null) : null)}
-      >
-        <CommandInput placeholder={t`Select an option`} />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading={t`Options`}>
-            {values.map((value, i) => (
-              <CommandItem onSelect={() => call.end(value)} key={i} value={value}>
-                {value}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Dropdown Field</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Select a value to sign into the field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.dropdown))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="dropdown"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger className="bg-background">
+                            <SelectValue placeholder={t`Select an option`} />
+                          </SelectTrigger>
+
+                          <SelectContent>
+                            {values.map((value, i) => (
+                              <SelectItem key={i} value={value}>
+                                {value}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
     );
   },
 );

apps/remix/app/components/dialogs/sign-field-email-dialog.tsx

@@ -29,22 +29,20 @@ const ZSignFieldEmailFormSchema = z.object({
 
 type TSignFieldEmailFormSchema = z.infer<typeof ZSignFieldEmailFormSchema>;
 
-export type SignFieldEmailDialogProps = {
-  placeholderEmail: string | null;
-};
+export type SignFieldEmailDialogProps = Record<string, never>;
 
 export const SignFieldEmailDialog = createCallable<SignFieldEmailDialogProps, string | null>(
-  ({ call, placeholderEmail }) => {
+  ({ call }) => {
     const form = useForm<TSignFieldEmailFormSchema>({
       resolver: zodResolver(ZSignFieldEmailFormSchema),
       defaultValues: {
-        email: placeholderEmail || '',
+        email: '',
       },
     });
 
     return (
       <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
           <DialogHeader>
             <DialogTitle>
               <Trans>Sign Email</Trans>

apps/remix/app/components/dialogs/sign-field-initials-dialog.tsx

@@ -45,7 +45,7 @@ export const SignFieldInitialsDialog = createCallable<SignFieldInitialsDialogPro
 
     return (
       <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
           <DialogHeader>
             <DialogTitle>
               <Trans>Sign Initials</Trans>

apps/remix/app/components/dialogs/sign-field-name-dialog.tsx

@@ -44,7 +44,7 @@ export const SignFieldNameDialog = createCallable<SignFieldNameDialogProps, stri
 
     return (
       <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
           <DialogHeader>
             <DialogTitle>
               <Trans>Sign Name</Trans>

apps/remix/app/components/dialogs/sign-field-number-dialog.tsx

@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { createCallable } from 'react-call';
@@ -27,71 +28,51 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 
+const createNumberFieldSchema = (fieldMeta: TNumberFieldMeta) => {
+  let schema = z.coerce.number({
+    invalid_type_error: msg`Please enter a valid number`.id, // Todo: Envelopes - Check that this works
+  });
+
+  const { numberFormat, minValue, maxValue } = fieldMeta;
+
+  if (typeof minValue === 'number') {
+    schema = schema.min(minValue);
+  }
+
+  if (typeof maxValue === 'number') {
+    schema = schema.max(maxValue);
+  }
+
+  if (numberFormat) {
+    const foundRegex = numberFormatValues.find((item) => item.value === numberFormat)?.regex;
+
+    if (!foundRegex) {
+      return schema;
+    }
+
+    return schema.refine(
+      (value) => {
+        return foundRegex.test(value.toString());
+      },
+      {
+        message: `Number needs to be formatted as ${numberFormat}`,
+        // Todo: Envelopes
+        // message: msg`Number needs to be formatted as ${numberFormat}`.id,
+      },
+    );
+  }
+
+  return schema;
+};
+
 export type SignFieldNumberDialogProps = {
   fieldMeta: TNumberFieldMeta;
 };
 
-export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps, string | null>(
+export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps, number | null>(
   ({ call, fieldMeta }) => {
     const { t } = useLingui();
 
-    // Needs to be inside dialog for translation purposes.
-    const createNumberFieldSchema = (fieldMeta: TNumberFieldMeta) => {
-      const { numberFormat, minValue, maxValue } = fieldMeta;
-
-      if (numberFormat) {
-        const foundRegex = numberFormatValues.find((item) => item.value === numberFormat)?.regex;
-
-        if (foundRegex) {
-          return z.string().refine(
-            (value) => {
-              return foundRegex.test(value.toString());
-            },
-            {
-              message: t`Number needs to be formatted as ${numberFormat}`,
-            },
-          );
-        }
-      }
-
-      // Not gong to work with min/max numbers + number format
-      // Since currently doesn't work in V1 going to ignore for now.
-      return z.string().superRefine((value, ctx) => {
-        const isValidNumber = /^[0-9,.]+$/.test(value.toString());
-
-        if (!isValidNumber) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: t`Please enter a valid number`,
-          });
-
-          return;
-        }
-
-        if (typeof minValue === 'number' && parseFloat(value) < minValue) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.too_small,
-            minimum: minValue,
-            inclusive: true,
-            type: 'number',
-          });
-
-          return;
-        }
-
-        if (typeof maxValue === 'number' && parseFloat(value) > maxValue) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.too_big,
-            maximum: maxValue,
-            inclusive: true,
-            type: 'number',
-          });
-
-          return;
-        }
-      });
-    };
-
     const ZSignFieldNumberFormSchema = z.object({
       number: createNumberFieldSchema(fieldMeta),
     });
@@ -105,7 +86,7 @@ export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps,
 
     return (
       <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
           <DialogHeader>
             <DialogTitle>
               <Trans>Sign Number Field</Trans>

apps/remix/app/components/dialogs/sign-field-text-dialog.tsx

@@ -50,7 +50,7 @@ export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, stri
 
     return (
       <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
           <DialogHeader>
             <DialogTitle>
               <Trans>Sign Text Field</Trans>

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

@@ -7,9 +7,9 @@ import { FilePlus, Loader } from 'lucide-react';
 import { useNavigate } from 'react-router';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateTemplatePayloadSchema } from '@documenso/trpc/server/template-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -54,17 +54,13 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
     setIsUploadingFile(true);
 
     try {
-      const payload = {
+      const response = await putPdfFile(file);
+
+      const { legacyTemplateId: id } = await createTemplate({
         title: file.name,
+        templateDocumentDataId: response.id,
         folderId: folderId,
-      } satisfies TCreateTemplatePayloadSchema;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-      formData.append('file', file);
-
-      const { envelopeId: id } = await createTemplate(formData);
+      });
 
       toast({
         title: _(msg`Template document uploaded`),
@@ -96,7 +92,7 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
       <DialogTrigger asChild>
         <Button className="cursor-pointer" disabled={!user.emailVerified}>
           <FilePlus className="-ml-1 mr-2 h-4 w-4" />
-          <Trans>Template (Legacy)</Trans>
+          <Trans>New Template</Trans>
         </Button>
       </DialogTrigger>
 

apps/remix/app/components/dialogs/template-direct-link-dialog.tsx

@@ -265,7 +265,7 @@ export const TemplateDirectLinkDialog = ({
                   {remaining.directTemplates !== 0 && (
                     <DialogFooter className="mx-auto mt-4">
                       <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
-                        <Trans>Enable direct link signing</Trans>
+                        <Trans> Enable direct link signing</Trans>
                       </Button>
                     </DialogFooter>
                   )}

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -6,7 +6,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { Recipient } from '@prisma/client';
 import { DocumentDistributionMethod, DocumentSigningOrder } from '@prisma/client';
-import { FileTextIcon, InfoIcon, Plus, UploadCloudIcon, X } from 'lucide-react';
+import { InfoIcon, Plus, Upload, X } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import * as z from 'zod';
@@ -16,10 +16,6 @@ import {
   TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
   TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
 } from '@documenso/lib/constants/template';
-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 { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
@@ -45,7 +41,6 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -54,13 +49,8 @@ const ZAddRecipientsForNewDocumentSchema = z.object({
   distributeDocument: z.boolean(),
   useCustomDocument: z.boolean().default(false),
   customDocumentData: z
-    .array(
-      z.object({
-        title: z.string(),
-        data: z.instanceof(File).optional(),
-        envelopeItemId: z.string(),
-      }),
-    )
+    .any()
+    .refine((data) => data instanceof File || data === undefined)
     .optional(),
   recipients: z.array(
     z.object({
@@ -75,7 +65,6 @@ const ZAddRecipientsForNewDocumentSchema = z.object({
 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
 
 export type TemplateUseDialogProps = {
-  envelopeId: string;
   templateId: number;
   templateSigningOrder?: DocumentSigningOrder | null;
   recipients: Recipient[];
@@ -88,7 +77,6 @@ export function TemplateUseDialog({
   recipients,
   documentDistributionMethod = DocumentDistributionMethod.EMAIL,
   documentRootPath,
-  envelopeId,
   templateId,
   templateSigningOrder,
   trigger,
@@ -105,7 +93,7 @@ export function TemplateUseDialog({
     defaultValues: {
       distributeDocument: false,
       useCustomDocument: false,
-      customDocumentData: [],
+      customDocumentData: undefined,
       recipients: recipients
         .sort((a, b) => (a.signingOrder || 0) - (b.signingOrder || 0))
         .map((recipient) => {
@@ -127,50 +115,23 @@ export function TemplateUseDialog({
     },
   });
 
-  const { replace, fields: localCustomDocumentData } = useFieldArray({
-    control: form.control,
-    name: 'customDocumentData',
-  });
-
-  const { data: response, isLoading: isLoadingEnvelopeItems } = trpc.envelope.item.getMany.useQuery(
-    {
-      envelopeId,
-    },
-    {
-      placeholderData: (previousData) => previousData,
-      ...SKIP_QUERY_BATCH_META,
-      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    },
-  );
-
-  const envelopeItems = response?.data ?? [];
-
   const { mutateAsync: createDocumentFromTemplate } =
     trpc.template.createDocumentFromTemplate.useMutation();
 
   const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
     try {
-      const customFilesToUpload = (data.customDocumentData || []).filter(
-        (item): item is { data: File; envelopeItemId: string; title: string } =>
-          item.data !== undefined && item.envelopeItemId !== undefined && item.title !== undefined,
-      );
+      let customDocumentDataId: string | undefined = undefined;
 
-      const customDocumentData = await Promise.all(
-        customFilesToUpload.map(async (item) => {
-          const customDocumentData = await putPdfFile(item.data);
+      if (data.useCustomDocument && data.customDocumentData) {
+        const customDocumentData = await putPdfFile(data.customDocumentData);
+        customDocumentDataId = customDocumentData.id;
+      }
 
-          return {
-            documentDataId: customDocumentData.id,
-            envelopeItemId: item.envelopeItemId,
-          };
-        }),
-      );
-
-      const { envelopeId } = await createDocumentFromTemplate({
+      const { id } = await createDocumentFromTemplate({
         templateId,
         recipients: data.recipients,
         distributeDocument: data.distributeDocument,
-        customDocumentData,
+        customDocumentDataId,
       });
 
       toast({
@@ -179,7 +140,7 @@ export function TemplateUseDialog({
         duration: 5000,
       });
 
-      let documentPath = `${documentRootPath}/${envelopeId}`;
+      let documentPath = `${documentRootPath}/${id}`;
 
       if (
         data.distributeDocument &&
@@ -219,18 +180,6 @@ export function TemplateUseDialog({
     }
   }, [open, form]);
 
-  useEffect(() => {
-    if (envelopeItems.length > 0 && localCustomDocumentData.length === 0) {
-      replace(
-        envelopeItems.map((item) => ({
-          title: item.title,
-          data: undefined,
-          envelopeItemId: item.id,
-        })),
-      );
-    }
-  }, [envelopeItems, form, open]);
-
   return (
     <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger asChild>
@@ -435,6 +384,7 @@ export function TemplateUseDialog({
                           className="text-muted-foreground ml-2 flex items-center text-sm"
                           htmlFor="useCustomDocument"
                         >
+                          {/* Todo: Envelopes - How will this work? */}
                           <Trans>Upload custom document</Trans>
                           <Tooltip>
                             <TooltipTrigger type="button">
@@ -456,133 +406,116 @@ export function TemplateUseDialog({
                 />
 
                 {form.watch('useCustomDocument') && (
-                  <div className="my-4 space-y-2">
-                    {isLoadingEnvelopeItems ? (
-                      <SpinnerBox className="py-16" />
-                    ) : (
-                      localCustomDocumentData.map((item, i) => (
-                        <FormField
-                          key={item.id}
-                          control={form.control}
-                          name={`customDocumentData.${i}.data`}
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormControl>
-                                <div
-                                  key={item.id}
-                                  className="border-border bg-card hover:bg-accent/10 flex items-center gap-4 rounded-lg border p-4 transition-colors"
-                                >
-                                  <div className="flex-shrink-0">
-                                    <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg">
-                                      <FileTextIcon className="text-primary h-5 w-5" />
-                                    </div>
-                                  </div>
-
-                                  <div className="min-w-0 flex-1">
-                                    <h4 className="text-foreground truncate text-sm font-medium">
-                                      {item.title}
-                                    </h4>
-                                    <p className="text-muted-foreground mt-0.5 text-xs">
-                                      {field.value ? (
-                                        <div>
+                  <div className="my-4">
+                    <FormField
+                      control={form.control}
+                      name="customDocumentData"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <div className="w-full space-y-4">
+                              <label
+                                className={cn(
+                                  'text-muted-foreground hover:border-muted-foreground/50 group relative flex min-h-[150px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 px-6 py-10 transition-colors',
+                                  {
+                                    'border-destructive hover:border-destructive':
+                                      form.formState.errors.customDocumentData,
+                                  },
+                                )}
+                              >
+                                <div className="text-center">
+                                  {!field.value && (
+                                    <>
+                                      <Upload className="text-muted-foreground/50 mx-auto h-10 w-10" />
+                                      <div className="mt-4 flex text-sm leading-6">
+                                        <span className="text-muted-foreground relative">
                                           <Trans>
-                                            Custom {(field.value.size / (1024 * 1024)).toFixed(2)}{' '}
-                                            MB file
+                                            <span className="text-primary font-semibold">
+                                              Click to upload
+                                            </span>{' '}
+                                            or drag and drop
                                           </Trans>
-                                        </div>
-                                      ) : (
-                                        <Trans>Default file</Trans>
-                                      )}
-                                    </p>
-                                  </div>
-
-                                  <div className="flex flex-shrink-0 items-center gap-2">
-                                    {field.value ? (
-                                      <div className="">
-                                        <Button
-                                          type="button"
-                                          variant="destructive"
-                                          size="sm"
-                                          className="text-xs"
-                                          onClick={(e) => {
-                                            e.preventDefault();
-                                            field.onChange(undefined);
-                                          }}
-                                        >
-                                          <X className="mr-2 h-4 w-4" />
-                                          <Trans>Remove</Trans>
-                                        </Button>
+                                        </span>
                                       </div>
-                                    ) : (
-                                      <Button
-                                        type="button"
-                                        variant="outline"
-                                        size="sm"
-                                        className="text-xs"
-                                        onClick={() => {
-                                          const fileInput = document.getElementById(
-                                            `template-use-dialog-file-input-${item.envelopeItemId}`,
-                                          );
+                                      <p className="text-muted-foreground/80 text-xs">
+                                        PDF files only
+                                      </p>
+                                    </>
+                                  )}
 
-                                          if (fileInput instanceof HTMLInputElement) {
-                                            fileInput.click();
-                                          }
-                                        }}
-                                      >
-                                        <UploadCloudIcon className="mr-2 h-4 w-4" />
-                                        <Trans>Upload</Trans>
-                                      </Button>
-                                    )}
-
-                                    <input
-                                      type="file"
-                                      id={`template-use-dialog-file-input-${item.envelopeItemId}`}
-                                      className="hidden"
-                                      accept=".pdf,application/pdf"
-                                      onChange={(e) => {
-                                        const file = e.target.files?.[0];
-
-                                        if (!file) {
-                                          field.onChange(undefined);
-
-                                          return;
-                                        }
-
-                                        if (file.type !== 'application/pdf') {
-                                          form.setError('customDocumentData', {
-                                            type: 'manual',
-                                            message: _(msg`Please select a PDF file`),
-                                          });
-
-                                          return;
-                                        }
-
-                                        if (
-                                          file.size >
-                                          APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024
-                                        ) {
-                                          form.setError('customDocumentData', {
-                                            type: 'manual',
-                                            message: _(
-                                              msg`File size exceeds the limit of ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT} MB`,
-                                            ),
-                                          });
-
-                                          return;
-                                        }
-
-                                        field.onChange(file);
-                                      }}
-                                    />
-                                  </div>
+                                  {field.value && (
+                                    <div className="text-muted-foreground space-y-1">
+                                      <p className="text-sm font-medium">{field.value.name}</p>
+                                      <p className="text-muted-foreground/60 text-xs">
+                                        {(field.value.size / (1024 * 1024)).toFixed(2)} MB
+                                      </p>
+                                    </div>
+                                  )}
                                 </div>
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      ))
-                    )}
+
+                                <input
+                                  type="file"
+                                  data-testid="template-use-dialog-file-input"
+                                  className="absolute h-full w-full opacity-0"
+                                  accept=".pdf,application/pdf"
+                                  onChange={(e) => {
+                                    const file = e.target.files?.[0];
+
+                                    if (!file) {
+                                      field.onChange(undefined);
+
+                                      return;
+                                    }
+
+                                    if (file.type !== 'application/pdf') {
+                                      form.setError('customDocumentData', {
+                                        type: 'manual',
+                                        message: _(msg`Please select a PDF file`),
+                                      });
+
+                                      return;
+                                    }
+
+                                    if (file.size > APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024) {
+                                      form.setError('customDocumentData', {
+                                        type: 'manual',
+                                        message: _(
+                                          msg`File size exceeds the limit of ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT} MB`,
+                                        ),
+                                      });
+
+                                      return;
+                                    }
+
+                                    field.onChange(file);
+                                  }}
+                                />
+
+                                {field.value && (
+                                  <div className="absolute right-2 top-2">
+                                    <Button
+                                      type="button"
+                                      variant="destructive"
+                                      className="h-6 w-6 p-0"
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        field.onChange(undefined);
+                                      }}
+                                    >
+                                      <X className="h-4 w-4" />
+                                      <div className="sr-only">
+                                        <Trans>Clear file</Trans>
+                                      </div>
+                                    </Button>
+                                  </div>
+                                )}
+                              </label>
+                            </div>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
                   </div>
                 )}
               </div>

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -4,7 +4,6 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { DocumentData, FieldType } from '@prisma/client';
 import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
-import { base64 } from '@scure/base';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -13,6 +12,7 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { base64 } from '@documenso/lib/universal/base64';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
 import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
@@ -83,14 +83,21 @@ export const ConfigureFieldsView = ({
 
   const normalizedDocumentData = useMemo(() => {
     if (documentData) {
-      return documentData.data;
+      return documentData;
     }
 
     if (!configData.documentData) {
       return null;
     }
 
-    return base64.encode(configData.documentData.data);
+    const data = base64.encode(configData.documentData?.data);
+
+    return {
+      id: 'preview',
+      type: 'BYTES_64',
+      data,
+      initialData: data,
+    } satisfies DocumentData;
   }, [configData.documentData]);
 
   const recipients = useMemo(() => {
@@ -534,15 +541,7 @@ export const ConfigureFieldsView = ({
             <Form {...form}>
               {normalizedDocumentData && (
                 <div>
-                  <PDFViewer
-                    overrideData={normalizedDocumentData}
-                    envelopeItem={{
-                      id: '',
-                      envelopeId: '',
-                    }}
-                    token={undefined}
-                    version="signed"
-                  />
+                  <PDFViewer documentData={normalizedDocumentData} />
 
                   <ElementVisible
                     target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}

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

@@ -3,8 +3,8 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta, EnvelopeItem, Recipient, Signature } from '@prisma/client';
-import { type Field, FieldType } from '@prisma/client';
+import type { DocumentMeta, Recipient, Signature } from '@prisma/client';
+import { type DocumentData, type Field, FieldType } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSearchParams } from 'react-router';
@@ -47,7 +47,7 @@ export type EmbedDirectTemplateClientPageProps = {
   token: string;
   envelopeId: string;
   updatedAt: Date;
-  envelopeItems: Pick<EnvelopeItem, 'id' | 'envelopeId'>[];
+  documentData: DocumentData;
   recipient: Recipient;
   fields: Field[];
   metadata?: DocumentMeta | null;
@@ -59,7 +59,7 @@ export const EmbedDirectTemplateClientPage = ({
   token,
   envelopeId,
   updatedAt,
-  envelopeItems,
+  documentData,
   recipient,
   fields,
   metadata,
@@ -335,9 +335,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Viewer */}
         <div className="flex-1">
           <PDFViewer
-            envelopeItem={envelopeItems[0]}
-            token={recipient.token}
-            version="signed"
+            documentData={documentData}
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
         </div>

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

@@ -1,232 +0,0 @@
-import { useEffect, useLayoutEffect, useState } from 'react';
-
-import { useLingui } from '@lingui/react';
-
-import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
-
-import { ZSignDocumentEmbedDataSchema } from '~/types/embed-document-sign-schema';
-import { injectCss } from '~/utils/css-vars';
-
-import { DocumentSigningPageViewV2 } from '../general/document-signing/document-signing-page-view-v2';
-import { useRequiredEnvelopeSigningContext } from '../general/document-signing/envelope-signing-provider';
-import { EmbedClientLoading } from './embed-client-loading';
-import { EmbedDocumentCompleted } from './embed-document-completed';
-import { EmbedDocumentRejected } from './embed-document-rejected';
-import { EmbedSigningProvider } from './embed-signing-context';
-
-export type EmbedSignDocumentV2ClientPageProps = {
-  hidePoweredBy?: boolean;
-  allowWhitelabelling?: boolean;
-};
-
-export const EmbedSignDocumentV2ClientPage = ({
-  hidePoweredBy = false,
-  allowWhitelabelling = false,
-}: EmbedSignDocumentV2ClientPageProps) => {
-  const { _ } = useLingui();
-
-  const { envelope, recipient, envelopeData, setFullName, fullName } =
-    useRequiredEnvelopeSigningContext();
-
-  const { isCompleted, isRejected, recipientSignature } = envelopeData;
-
-  // !: Not used at the moment, may be removed in the future.
-  // const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
-  const [hasFinishedInit, setHasFinishedInit] = useState(false);
-  const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
-  const [isNameLocked, setIsNameLocked] = useState(false);
-
-  const onDocumentCompleted = (data: {
-    token: string;
-    documentId: number;
-    envelopeId: string;
-    recipientId: number;
-  }) => {
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'document-completed',
-          data,
-        },
-        '*',
-      );
-    }
-  };
-
-  const onDocumentError = () => {
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'document-error',
-          data: null,
-        },
-        '*',
-      );
-    }
-  };
-
-  const onDocumentReady = () => {
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'document-ready',
-          data: null,
-        },
-        '*',
-      );
-    }
-  };
-
-  const onFieldSigned = (data: { fieldId?: number; value?: string; isBase64?: boolean }) => {
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'field-signed',
-          data,
-        },
-        '*',
-      );
-    }
-  };
-
-  const onFieldUnsigned = (data: { fieldId?: number }) => {
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'field-unsigned',
-          data,
-        },
-        '*',
-      );
-    }
-  };
-
-  const onDocumentRejected = (data: {
-    token: string;
-    documentId: number;
-    envelopeId: string;
-    recipientId: number;
-    reason?: string;
-  }) => {
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'document-rejected',
-          data,
-        },
-        '*',
-      );
-    }
-  };
-
-  useLayoutEffect(() => {
-    const hash = window.location.hash.slice(1);
-
-    try {
-      const data = ZSignDocumentEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
-
-      if (!isCompleted && data.name) {
-        setFullName(data.name);
-      }
-
-      // Since a recipient can be provided a name we can lock it without requiring
-      // a to be provided by the parent application, unlike direct templates.
-      setIsNameLocked(!!data.lockName);
-      setAllowDocumentRejection(!!data.allowDocumentRejection);
-
-      if (data.darkModeDisabled) {
-        document.documentElement.classList.add('dark-mode-disabled');
-      }
-
-      if (allowWhitelabelling) {
-        injectCss({
-          css: data.css,
-          cssVars: data.cssVars,
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-
-    setHasFinishedInit(true);
-
-    // !: While the setters are stable we still want to ensure we're avoiding
-    // !: re-renders.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allowWhitelabelling]);
-
-  useEffect(() => {
-    if (hasFinishedInit) {
-      onDocumentReady();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasFinishedInit]);
-
-  // Listen for document completion events from the envelope signing context
-  useEffect(() => {
-    if (isCompleted) {
-      onDocumentCompleted({
-        token: recipient.token,
-        envelopeId: envelope.id,
-        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-        recipientId: recipient.id,
-      });
-    }
-  }, [isCompleted, envelope.id, recipient.id, recipient.token]);
-
-  // Listen for document rejection events
-  useEffect(() => {
-    if (isRejected) {
-      onDocumentRejected({
-        token: recipient.token,
-        envelopeId: envelope.id,
-        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-        recipientId: recipient.id,
-      });
-    }
-  }, [isRejected, envelope.id, recipient.id, recipient.token]);
-
-  if (isRejected) {
-    return <EmbedDocumentRejected />;
-  }
-
-  if (isCompleted) {
-    return (
-      <EmbedDocumentCompleted
-        name={fullName}
-        signature={
-          recipientSignature
-            ? {
-                id: 1,
-                fieldId: 1,
-                recipientId: recipient.id,
-                created: new Date(),
-                signatureImageAsBase64: recipientSignature.signatureImageAsBase64,
-                typedSignature: recipientSignature.typedSignature,
-              }
-            : undefined
-        }
-      />
-    );
-  }
-
-  return (
-    <EmbedSigningProvider
-      isNameLocked={isNameLocked}
-      hidePoweredBy={hidePoweredBy}
-      allowDocumentRejection={allowDocumentRejection}
-      onDocumentCompleted={onDocumentCompleted}
-      onDocumentError={onDocumentError}
-      onDocumentRejected={onDocumentRejected}
-      onDocumentReady={onDocumentReady}
-      onFieldSigned={onFieldSigned}
-      onFieldUnsigned={onFieldUnsigned}
-    >
-      <div className="embed--Root relative">
-        {!hasFinishedInit && <EmbedClientLoading />}
-
-        <DocumentSigningPageViewV2 />
-      </div>
-    </EmbedSigningProvider>
-  );
-};

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

@@ -3,8 +3,14 @@ import { useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta, EnvelopeItem } from '@prisma/client';
-import { type Field, FieldType, RecipientRole, SigningStatus } from '@prisma/client';
+import type { DocumentMeta } from '@prisma/client';
+import {
+  type DocumentData,
+  type Field,
+  FieldType,
+  RecipientRole,
+  SigningStatus,
+} from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
@@ -40,11 +46,11 @@ import { EmbedDocumentCompleted } from './embed-document-completed';
 import { EmbedDocumentFields } from './embed-document-fields';
 import { EmbedDocumentRejected } from './embed-document-rejected';
 
-export type EmbedSignDocumentV1ClientPageProps = {
+export type EmbedSignDocumentClientPageProps = {
   token: string;
   documentId: number;
   envelopeId: string;
-  envelopeItems: Pick<EnvelopeItem, 'id' | 'envelopeId'>[];
+  documentData: DocumentData;
   recipient: RecipientWithFields;
   fields: Field[];
   completedFields: DocumentField[];
@@ -55,11 +61,11 @@ export type EmbedSignDocumentV1ClientPageProps = {
   allRecipients?: RecipientWithFields[];
 };
 
-export const EmbedSignDocumentV1ClientPage = ({
+export const EmbedSignDocumentClientPage = ({
   token,
   documentId,
   envelopeId,
-  envelopeItems,
+  documentData,
   recipient,
   fields,
   completedFields,
@@ -68,7 +74,7 @@ export const EmbedSignDocumentV1ClientPage = ({
   hidePoweredBy = false,
   allowWhitelabelling = false,
   allRecipients = [],
-}: EmbedSignDocumentV1ClientPageProps) => {
+}: EmbedSignDocumentClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -287,9 +293,7 @@ export const EmbedSignDocumentV1ClientPage = ({
           {/* Viewer */}
           <div className="embed--DocumentViewer flex-1">
             <PDFViewer
-              envelopeItem={envelopeItems[0]}
-              token={token}
-              version="signed"
+              documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
           </div>

apps/remix/app/components/embed/embed-signing-context.tsx

@@ -1,101 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export type EmbedSigningContextValue = {
-  isEmbed: true;
-  allowDocumentRejection: boolean;
-  isNameLocked: boolean;
-  isEmailLocked: boolean;
-  hidePoweredBy: boolean;
-  onDocumentCompleted: (data: {
-    token: string;
-    documentId: number;
-    envelopeId: string;
-    recipientId: number;
-  }) => void;
-  onDocumentError: () => void;
-  onDocumentRejected: (data: {
-    token: string;
-    documentId: number;
-    envelopeId: string;
-    recipientId: number;
-    reason?: string;
-  }) => void;
-  onDocumentReady: () => void;
-  onFieldSigned: (data: { fieldId?: number; value?: string; isBase64?: boolean }) => void;
-  onFieldUnsigned: (data: { fieldId?: number }) => void;
-};
-
-const EmbedSigningContext = createContext<EmbedSigningContextValue | null>(null);
-
-export const useEmbedSigningContext = () => {
-  return useContext(EmbedSigningContext);
-};
-
-export const useRequiredEmbedSigningContext = () => {
-  const context = useEmbedSigningContext();
-
-  if (!context) {
-    throw new Error('useRequiredEmbedSigningContext must be used within EmbedSigningProvider');
-  }
-
-  return context;
-};
-
-export type EmbedSigningProviderProps = {
-  allowDocumentRejection?: boolean;
-  isNameLocked?: boolean;
-  isEmailLocked?: boolean;
-  hidePoweredBy?: boolean;
-  onDocumentCompleted: (data: {
-    token: string;
-    documentId: number;
-    envelopeId: string;
-    recipientId: number;
-  }) => void;
-  onDocumentError: () => void;
-  onDocumentRejected: (data: {
-    token: string;
-    documentId: number;
-    envelopeId: string;
-    recipientId: number;
-    reason?: string;
-  }) => void;
-  onDocumentReady: () => void;
-  onFieldSigned: (data: { fieldId?: number; value?: string; isBase64?: boolean }) => void;
-  onFieldUnsigned: (data: { fieldId?: number }) => void;
-  children: React.ReactNode;
-};
-
-export const EmbedSigningProvider = ({
-  allowDocumentRejection = false,
-  isNameLocked = false,
-  isEmailLocked = true,
-  hidePoweredBy = false,
-  onDocumentCompleted,
-  onDocumentError,
-  onDocumentRejected,
-  onDocumentReady,
-  onFieldSigned,
-  onFieldUnsigned,
-  children,
-}: EmbedSigningProviderProps) => {
-  return (
-    <EmbedSigningContext.Provider
-      value={{
-        isEmbed: true,
-        allowDocumentRejection,
-        isNameLocked,
-        isEmailLocked,
-        hidePoweredBy,
-        onDocumentCompleted,
-        onDocumentError,
-        onDocumentRejected,
-        onDocumentReady,
-        onFieldSigned,
-        onFieldUnsigned,
-      }}
-    >
-      {children}
-    </EmbedSigningContext.Provider>
-  );
-};

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -226,9 +226,7 @@ export const MultiSignDocumentSigningView = ({
                   })}
                 >
                   <PDFViewer
-                    envelopeItem={document.envelopeItems[0]}
-                    token={token}
-                    version="signed"
+                    documentData={document.documentData}
                     onDocumentLoad={() => {
                       setHasDocumentLoaded(true);
                       onDocumentReady?.();

apps/remix/app/components/filters/date-range-filter.tsx

@@ -1,49 +0,0 @@
-import { useTransition } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-
-import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { DateRange } from '@documenso/lib/types/search-params';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-
-type DateRangeFilterProps = {
-  currentRange: DateRange;
-};
-
-export const DateRangeFilter = ({ currentRange }: DateRangeFilterProps) => {
-  const { _ } = useLingui();
-  const [isPending, startTransition] = useTransition();
-  const updateSearchParams = useUpdateSearchParams();
-
-  const handleRangeChange = (value: string) => {
-    startTransition(() => {
-      updateSearchParams({
-        dateRange: value as DateRange,
-        page: 1,
-      });
-    });
-  };
-
-  return (
-    <div className="flex items-center gap-2">
-      <Select value={currentRange} onValueChange={handleRangeChange} disabled={isPending}>
-        <SelectTrigger className="w-48">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="last30days">{_(msg`Last 30 Days`)}</SelectItem>
-          <SelectItem value="last90days">{_(msg`Last 90 Days`)}</SelectItem>
-          <SelectItem value="lastYear">{_(msg`Last Year`)}</SelectItem>
-          <SelectItem value="allTime">{_(msg`All Time`)}</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  );
-};

apps/remix/app/components/forms/branding-preferences-form.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import type { TeamGlobalSettings } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -29,8 +29,6 @@ import {
 } from '@documenso/ui/primitives/select';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
-
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
 
@@ -70,9 +68,6 @@ export function BrandingPreferencesForm({
 }: BrandingPreferencesFormProps) {
   const { t } = useLingui();
 
-  const team = useOptionalCurrentTeam();
-  const organisation = useCurrentOrganisation();
-
   const [previewUrl, setPreviewUrl] = useState<string>('');
   const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
 
@@ -93,13 +88,14 @@ export function BrandingPreferencesForm({
       const file = JSON.parse(settings.brandingLogo);
 
       if ('type' in file && 'data' in file) {
-        const logoUrl =
-          context === 'Team'
-            ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
-            : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
+        void getFile(file).then((binaryData) => {
+          const objectUrl = URL.createObjectURL(new Blob([binaryData]));
 
-        setPreviewUrl(logoUrl);
-        setHasLoadedPreview(true);
+          setPreviewUrl(objectUrl);
+          setHasLoadedPreview(true);
+        });
+
+        return;
       }
     }
 

apps/remix/app/components/forms/editor/constants.ts

@@ -0,0 +1,31 @@
+// export const numberFormatValues = [
+//   {
+//     label: '123,456,789.00',
+//     value: '123,456,789.00',
+//   },
+//   {
+//     label: '123.456.789,00',
+//     value: '123.456.789,00',
+//   },
+//   {
+//     label: '123456,789.00',
+//     value: '123456,789.00',
+//   },
+// ];
+
+export const checkboxValidationRules = ['Select at least', 'Select exactly', 'Select at most'];
+export const checkboxValidationLength = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export const checkboxValidationSigns = [
+  {
+    label: 'Select at least',
+    value: '>=',
+  },
+  {
+    label: 'Select exactly',
+    value: '=',
+  },
+  {
+    label: 'Select at most',
+    value: '<=',
+  },
+];

apps/remix/app/components/forms/editor/editor-field-checkbox-form.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from '@lingui/core/macro';
@@ -7,19 +7,11 @@ import { PlusIcon, Trash } from 'lucide-react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
-import { validateCheckboxLength } from '@documenso/lib/advanced-fields-validation/validate-checkbox';
 import {
   type TCheckboxFieldMeta as CheckboxFieldMeta,
-  DEFAULT_FIELD_FONT_SIZE,
   ZCheckboxFieldMeta,
 } from '@documenso/lib/types/field-meta';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
-import {
-  checkboxValidationLength,
-  checkboxValidationRules,
-  checkboxValidationSigns,
-} from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
 import {
   Form,
   FormControl,
@@ -38,8 +30,8 @@ import {
 } from '@documenso/ui/primitives/select';
 import { Separator } from '@documenso/ui/primitives/separator';
 
+import { checkboxValidationLength, checkboxValidationRules } from './constants';
 import {
-  EditorGenericFontSizeField,
   EditorGenericReadOnlyField,
   EditorGenericRequiredField,
 } from './editor-field-generic-field-forms';
@@ -52,7 +44,6 @@ const ZCheckboxFieldFormSchema = ZCheckboxFieldMeta.pick({
   required: true,
   values: true,
   readOnly: true,
-  fontSize: true,
 })
   .extend({
     validationLength: z.coerce.number().optional(),
@@ -99,7 +90,6 @@ export const EditorFieldCheckboxForm = ({
       values: value.values || [{ id: 1, checked: false, value: '' }],
       required: value.required || false,
       readOnly: value.readOnly || false,
-      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
     },
   });
 
@@ -109,17 +99,13 @@ export const EditorFieldCheckboxForm = ({
     control,
   });
 
-  const addValue = (numberOfValues: number = 1) => {
+  const addValue = () => {
     const currentValues = form.getValues('values') || [];
-    const currentMaxId = Math.max(...currentValues.map((val) => val.id));
+    const newId =
+      currentValues.length > 0 ? Math.max(...currentValues.map((val) => val.id)) + 1 : 1;
 
-    const newValues = Array.from({ length: numberOfValues }, (_, index) => ({
-      id: currentMaxId + index + 1,
-      checked: false,
-      value: '',
-    }));
-
-    form.setValue('values', [...currentValues, ...newValues]);
+    const newValues = [...currentValues, { id: newId, checked: false, value: '' }];
+    form.setValue('values', newValues);
   };
 
   const removeValue = (index: number) => {
@@ -146,34 +132,10 @@ export const EditorFieldCheckboxForm = ({
     }
   }, [formValues]);
 
-  const isValidationRuleMetForPreselectedValues = useMemo(() => {
-    const preselectedValues = (formValues.values || [])?.filter((value) => value.checked);
-
-    if (formValues.validationLength && formValues.validationRule && preselectedValues.length > 0) {
-      const validationRule = checkboxValidationSigns.find(
-        (sign) => sign.label === formValues.validationRule,
-      );
-
-      if (!validationRule) {
-        return false;
-      }
-
-      return validateCheckboxLength(
-        preselectedValues.length,
-        validationRule.value,
-        formValues.validationLength,
-      );
-    }
-
-    return true;
-  }, [formValues]);
-
   return (
     <Form {...form}>
       <form>
         <fieldset className="flex flex-col gap-2">
-          <EditorGenericFontSizeField formControl={form.control} />
-
           <FormField
             control={form.control}
             name="direction"
@@ -240,25 +202,7 @@ export const EditorFieldCheckboxForm = ({
                     <FormControl>
                       <Select
                         value={field.value ? String(field.value) : ''}
-                        onValueChange={(value) => {
-                          const validationNumber = Number(value);
-
-                          const currentValues = formValues.values || [];
-
-                          const minimumNumberOfValuesRequired =
-                            validationNumber - currentValues.length;
-
-                          if (!formValues.validationRule) {
-                            form.setValue('validationRule', checkboxValidationRules[0]);
-                          }
-
-                          if (minimumNumberOfValuesRequired > 0) {
-                            addValue(minimumNumberOfValuesRequired);
-                          }
-
-                          field.onChange(validationNumber);
-                          void form.trigger();
-                        }}
+                        onValueChange={field.onChange}
                       >
                         <SelectTrigger className="text-muted-foreground bg-background mt-5 w-full">
                           <SelectValue placeholder={t`Pick a number`} />
@@ -295,7 +239,7 @@ export const EditorFieldCheckboxForm = ({
                 <Trans>Checkbox values</Trans>
               </p>
 
-              <button type="button" onClick={() => addValue()}>
+              <button type="button" onClick={addValue}>
                 <PlusIcon className="h-4 w-4" />
               </button>
             </div>
@@ -341,16 +285,6 @@ export const EditorFieldCheckboxForm = ({
                 </li>
               ))}
             </ul>
-
-            {!isValidationRuleMetForPreselectedValues && (
-              <Alert variant="warning">
-                <AlertDescription>
-                  <Trans>
-                    The preselected values will be ignored unless they meet the validation criteria.
-                  </Trans>
-                </AlertDescription>
-              </Alert>
-            )}
           </section>
         </fieldset>
       </form>

apps/remix/app/components/forms/editor/editor-field-date-form.tsx

@@ -7,7 +7,6 @@ import type { z } from 'zod';
 import {
   DEFAULT_FIELD_FONT_SIZE,
   type TDateFieldMeta as DateFieldMeta,
-  FIELD_DEFAULT_GENERIC_ALIGN,
   ZDateFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
@@ -40,7 +39,7 @@ export const EditorFieldDateForm = ({
     mode: 'onChange',
     defaultValues: {
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      textAlign: value.textAlign || 'left',
     },
   });
 

apps/remix/app/components/forms/editor/editor-field-dropdown-form.tsx

@@ -8,10 +8,7 @@ import { PlusIcon, Trash } from 'lucide-react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
-import {
-  DEFAULT_FIELD_FONT_SIZE,
-  type TDropdownFieldMeta as DropdownFieldMeta,
-} from '@documenso/lib/types/field-meta';
+import { type TDropdownFieldMeta as DropdownFieldMeta } from '@documenso/lib/types/field-meta';
 import {
   Form,
   FormControl,
@@ -31,50 +28,56 @@ import {
 import { Separator } from '@documenso/ui/primitives/separator';
 
 import {
-  EditorGenericFontSizeField,
   EditorGenericReadOnlyField,
   EditorGenericRequiredField,
 } from './editor-field-generic-field-forms';
 
-const ZDropdownFieldFormSchema = z.object({
-  defaultValue: z.string().optional(),
-  values: z
-    .object({
-      value: z.string().min(1, {
-        message: msg`Option value cannot be empty`.id,
-      }),
-    })
-    .array()
-    .min(1, {
-      message: msg`Dropdown must have at least one option`.id,
-    })
-    .superRefine((values, ctx) => {
-      const seen = new Map<string, number[]>(); // value → indices
+const ZDropdownFieldFormSchema = z
+  .object({
+    defaultValue: z.string().optional(),
+    values: z
+      .object({
+        value: z.string().min(1, {
+          message: msg`Option value cannot be empty`.id,
+        }),
+      })
+      .array()
+      .min(1, {
+        message: msg`Dropdown must have at least one option`.id,
+      })
+      .refine(
+        (data) => {
+          // Todo: Envelopes - This doesn't work.
+          console.log({
+            data,
+          });
 
-      values.forEach((item, index) => {
-        const key = item.value;
-        if (!seen.has(key)) {
-          seen.set(key, []);
-        }
-        seen.get(key)!.push(index);
-      });
-
-      for (const [key, indices] of seen) {
-        if (indices.length > 1 && key.trim() !== '') {
-          for (const i of indices) {
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              message: msg`Duplicate values are not allowed`.id,
-              path: [i, 'value'],
-            });
+          if (data) {
+            const values = data.map((item) => item.value);
+            return new Set(values).size === values.length;
           }
-        }
+          return true;
+        },
+        {
+          message: 'Duplicate values are not allowed',
+        },
+      ),
+    required: z.boolean().optional(),
+    readOnly: z.boolean().optional(),
+  })
+  .refine(
+    (data) => {
+      // Default value must be one of the available options
+      if (data.defaultValue && data.values) {
+        return data.values.some((item) => item.value === data.defaultValue);
       }
-    }),
-  required: z.boolean().optional(),
-  readOnly: z.boolean().optional(),
-  fontSize: z.number().optional(),
-});
+      return true;
+    },
+    {
+      message: 'Default value must be one of the available options',
+      path: ['defaultValue'],
+    },
+  );
 
 type TDropdownFieldFormSchema = z.infer<typeof ZDropdownFieldFormSchema>;
 
@@ -99,7 +102,6 @@ export const EditorFieldDropdownForm = ({
       values: value.values || [{ value: 'Option 1' }],
       required: value.required || false,
       readOnly: value.readOnly || false,
-      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
     },
   });
 
@@ -109,20 +111,7 @@ export const EditorFieldDropdownForm = ({
 
   const addValue = () => {
     const currentValues = form.getValues('values') || [];
-
-    let newValue = 'New option';
-
-    // Iterate to create a unique value
-    for (let i = 0; i < currentValues.length; i++) {
-      newValue = `New option ${i + 1}`;
-      if (currentValues.some((item) => item.value === `New option ${i + 1}`)) {
-        newValue = `New option ${i + 1}`;
-      } else {
-        break;
-      }
-    }
-
-    const newValues = [...currentValues, { value: newValue }];
+    const newValues = [...currentValues, { value: 'New option' }];
 
     form.setValue('values', newValues);
   };
@@ -138,10 +127,6 @@ export const EditorFieldDropdownForm = ({
     newValues.splice(index, 1);
 
     form.setValue('values', newValues);
-
-    if (form.getValues('defaultValue') === newValues[index].value) {
-      form.setValue('defaultValue', undefined);
-    }
   };
 
   useEffect(() => {
@@ -155,13 +140,19 @@ export const EditorFieldDropdownForm = ({
     }
   }, [formValues]);
 
+  const { formState } = form;
+
+  useEffect(() => {
+    console.log({
+      errors: formState.errors,
+      formValues,
+    });
+  }, [formState, formState.errors, formValues]);
+
   return (
     <Form {...form}>
       <form>
         <fieldset className="flex flex-col gap-2">
-          <EditorGenericFontSizeField formControl={form.control} />
-
-          {/* Todo: Envelopes This is buggy. */}
           <FormField
             control={form.control}
             name="defaultValue"
@@ -172,25 +163,20 @@ export const EditorFieldDropdownForm = ({
                 </FormLabel>
                 <FormControl>
                   <Select
+                    // Todo: Envelopes - This is buggy, removing/adding should update the default value.
                     {...field}
-                    value={field.value ?? '-1'}
-                    onValueChange={(value) => field.onChange(value === '-1' ? undefined : value)}
+                    value={field.value}
+                    onValueChange={(val) => field.onChange(val)}
                   >
                     <SelectTrigger className="text-muted-foreground bg-background w-full">
                       <SelectValue placeholder={t`Default Value`} />
                     </SelectTrigger>
                     <SelectContent position="popper">
-                      {(formValues.values || [])
-                        .filter((item) => item.value)
-                        .map((item, index) => (
-                          <SelectItem key={index} value={item.value || ''}>
-                            {item.value}
-                          </SelectItem>
-                        ))}
-
-                      <SelectItem value={'-1'}>
-                        <Trans>Default Value</Trans>
-                      </SelectItem>
+                      {(formValues.values || []).map((item, index) => (
+                        <SelectItem key={index} value={item.value || ''}>
+                          {item.value}
+                        </SelectItem>
+                      ))}
                     </SelectContent>
                   </Select>
                 </FormControl>

apps/remix/app/components/forms/editor/editor-field-email-form.tsx

@@ -7,7 +7,6 @@ import type { z } from 'zod';
 import {
   DEFAULT_FIELD_FONT_SIZE,
   type TEmailFieldMeta as EmailFieldMeta,
-  FIELD_DEFAULT_GENERIC_ALIGN,
   ZEmailFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
@@ -40,7 +39,7 @@ export const EditorFieldEmailForm = ({
     mode: 'onChange',
     defaultValues: {
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      textAlign: value.textAlign || 'left',
     },
   });
 

apps/remix/app/components/forms/editor/editor-field-generic-field-forms.tsx

@@ -3,10 +3,6 @@ import { useEffect } from 'react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { type Control, useFormContext } from 'react-hook-form';
 
-import { FIELD_MIN_LINE_HEIGHT } from '@documenso/lib/types/field-meta';
-import { FIELD_MAX_LINE_HEIGHT } from '@documenso/lib/types/field-meta';
-import { FIELD_MIN_LETTER_SPACING } from '@documenso/lib/types/field-meta';
-import { FIELD_MAX_LETTER_SPACING } from '@documenso/lib/types/field-meta';
 import { cn } from '@documenso/ui/lib/utils';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
@@ -111,119 +107,6 @@ export const EditorGenericTextAlignField = ({
   );
 };
 
-export const EditorGenericVerticalAlignField = ({
-  formControl,
-  className,
-}: {
-  formControl: FormControlType;
-  className?: string;
-}) => {
-  const { t } = useLingui();
-
-  return (
-    <FormField
-      control={formControl}
-      name="verticalAlign"
-      render={({ field }) => (
-        <FormItem className={className}>
-          <FormLabel>
-            <Trans>Vertical Align</Trans>
-          </FormLabel>
-          <FormControl>
-            <Select {...field} onValueChange={field.onChange}>
-              <SelectTrigger>
-                <SelectValue placeholder={t`Select vertical align`} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="top">
-                  <Trans>Top</Trans>
-                </SelectItem>
-                <SelectItem value="middle">
-                  <Trans>Middle</Trans>
-                </SelectItem>
-                <SelectItem value="bottom">
-                  <Trans>Bottom</Trans>
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  );
-};
-
-export const EditorGenericLineHeightField = ({
-  formControl,
-  className,
-}: {
-  formControl: FormControlType;
-  className?: string;
-}) => {
-  const { t } = useLingui();
-
-  return (
-    <FormField
-      control={formControl}
-      name="lineHeight"
-      render={({ field }) => (
-        <FormItem className={className}>
-          <FormLabel>
-            <Trans>Line Height</Trans>
-          </FormLabel>
-          <FormControl>
-            <Input
-              type="number"
-              min={FIELD_MIN_LINE_HEIGHT}
-              max={FIELD_MAX_LINE_HEIGHT}
-              className="bg-background"
-              placeholder={t`Line height`}
-              {...field}
-            />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  );
-};
-
-export const EditorGenericLetterSpacingField = ({
-  formControl,
-  className,
-}: {
-  formControl: FormControlType;
-  className?: string;
-}) => {
-  const { t } = useLingui();
-
-  return (
-    <FormField
-      control={formControl}
-      name="letterSpacing"
-      render={({ field }) => (
-        <FormItem className={className}>
-          <FormLabel>
-            <Trans>Letter Spacing</Trans>
-          </FormLabel>
-          <FormControl>
-            <Input
-              type="number"
-              min={FIELD_MIN_LETTER_SPACING}
-              max={FIELD_MAX_LETTER_SPACING}
-              className="bg-background"
-              placeholder={t`Letter spacing`}
-              {...field}
-            />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  );
-};
-
 export const EditorGenericRequiredField = ({
   formControl,
   className,

apps/remix/app/components/forms/editor/editor-field-initials-form.tsx

@@ -6,7 +6,6 @@ import type { z } from 'zod';
 
 import {
   DEFAULT_FIELD_FONT_SIZE,
-  FIELD_DEFAULT_GENERIC_ALIGN,
   type TInitialsFieldMeta as InitialsFieldMeta,
   ZInitialsFieldMeta,
 } from '@documenso/lib/types/field-meta';
@@ -40,7 +39,7 @@ export const EditorFieldInitialsForm = ({
     mode: 'onChange',
     defaultValues: {
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      textAlign: value.textAlign || 'left',
     },
   });
 

apps/remix/app/components/forms/editor/editor-field-name-form.tsx

@@ -6,7 +6,6 @@ import type { z } from 'zod';
 
 import {
   DEFAULT_FIELD_FONT_SIZE,
-  FIELD_DEFAULT_GENERIC_ALIGN,
   type TNameFieldMeta as NameFieldMeta,
   ZNameFieldMeta,
 } from '@documenso/lib/types/field-meta';
@@ -40,7 +39,7 @@ export const EditorFieldNameForm = ({
     mode: 'onChange',
     defaultValues: {
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      textAlign: value.textAlign || 'left',
     },
   });
 

apps/remix/app/components/forms/editor/editor-field-number-form.tsx

@@ -6,11 +6,6 @@ import { useForm, useWatch } from 'react-hook-form';
 import type { z } from 'zod';
 
 import {
-  DEFAULT_FIELD_FONT_SIZE,
-  FIELD_DEFAULT_GENERIC_ALIGN,
-  FIELD_DEFAULT_GENERIC_VERTICAL_ALIGN,
-  FIELD_DEFAULT_LETTER_SPACING,
-  FIELD_DEFAULT_LINE_HEIGHT,
   type TNumberFieldMeta as NumberFieldMeta,
   ZNumberFieldMeta,
 } from '@documenso/lib/types/field-meta';
@@ -36,12 +31,9 @@ import { Separator } from '@documenso/ui/primitives/separator';
 import {
   EditorGenericFontSizeField,
   EditorGenericLabelField,
-  EditorGenericLetterSpacingField,
-  EditorGenericLineHeightField,
   EditorGenericReadOnlyField,
   EditorGenericRequiredField,
   EditorGenericTextAlignField,
-  EditorGenericVerticalAlignField,
 } from './editor-field-generic-field-forms';
 
 const ZNumberFieldFormSchema = ZNumberFieldMeta.pick({
@@ -51,9 +43,6 @@ const ZNumberFieldFormSchema = ZNumberFieldMeta.pick({
   numberFormat: true,
   fontSize: true,
   textAlign: true,
-  lineHeight: true,
-  letterSpacing: true,
-  verticalAlign: true,
   required: true,
   readOnly: true,
   minValue: true,
@@ -110,11 +99,8 @@ export const EditorFieldNumberForm = ({
       placeholder: value.placeholder || '',
       value: value.value || '',
       numberFormat: value.numberFormat || null,
-      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
-      lineHeight: value.lineHeight ?? FIELD_DEFAULT_LINE_HEIGHT,
-      letterSpacing: value.letterSpacing ?? FIELD_DEFAULT_LETTER_SPACING,
-      verticalAlign: value.verticalAlign ?? FIELD_DEFAULT_GENERIC_VERTICAL_ALIGN,
+      fontSize: value.fontSize || 14,
+      textAlign: value.textAlign || 'left',
       required: value.required || false,
       readOnly: value.readOnly || false,
       minValue: value.minValue,
@@ -132,10 +118,6 @@ export const EditorFieldNumberForm = ({
   useEffect(() => {
     const validatedFormValues = ZNumberFieldFormSchema.safeParse(formValues);
 
-    if (formValues.readOnly && !formValues.value) {
-      void form.trigger('value');
-    }
-
     if (validatedFormValues.success) {
       onValueChange({
         type: 'number',
@@ -148,14 +130,6 @@ export const EditorFieldNumberForm = ({
     <Form {...form}>
       <form>
         <fieldset className="flex flex-col gap-2">
-          <EditorGenericFontSizeField className="w-full" formControl={form.control} />
-
-          <div className="flex w-full flex-row gap-x-4">
-            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
-
-            <EditorGenericVerticalAlignField className="w-full" formControl={form.control} />
-          </div>
-
           <EditorGenericLabelField formControl={form.control} />
 
           <FormField
@@ -225,9 +199,9 @@ export const EditorFieldNumberForm = ({
           />
 
           <div className="flex w-full flex-row gap-x-4">
-            <EditorGenericLineHeightField className="w-full" formControl={form.control} />
+            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
 
-            <EditorGenericLetterSpacingField className="w-full" formControl={form.control} />
+            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
           </div>
 
           <div className="mt-1">

apps/remix/app/components/forms/editor/editor-field-radio-form.tsx

@@ -1,62 +1,47 @@
 import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import { PlusIcon, Trash } from 'lucide-react';
 import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
+import { z } from 'zod';
 
-import {
-  DEFAULT_FIELD_FONT_SIZE,
-  type TRadioFieldMeta as RadioFieldMeta,
-  ZRadioFieldMeta,
-} from '@documenso/lib/types/field-meta';
+import { type TRadioFieldMeta as RadioFieldMeta } from '@documenso/lib/types/field-meta';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
 import { Separator } from '@documenso/ui/primitives/separator';
 
 import {
-  EditorGenericFontSizeField,
   EditorGenericReadOnlyField,
   EditorGenericRequiredField,
 } from './editor-field-generic-field-forms';
 
-const ZRadioFieldFormSchema = ZRadioFieldMeta.pick({
-  label: true,
-  direction: true,
-  values: true,
-  required: true,
-  readOnly: true,
-  fontSize: true,
-}).refine(
-  (data) => {
-    // There cannot be more than one checked option
-    if (data.values) {
-      const checkedValues = data.values.filter((option) => option.checked);
-      return checkedValues.length <= 1;
-    }
-    return true;
-  },
-  {
-    message: 'There cannot be more than one checked option',
-    path: ['values'],
-  },
-);
+const ZRadioFieldFormSchema = z
+  .object({
+    label: z.string().optional(),
+    values: z
+      .object({ id: z.number(), checked: z.boolean(), value: z.string() })
+      .array()
+      .min(1)
+      .optional(),
+    required: z.boolean().optional(),
+    readOnly: z.boolean().optional(),
+  })
+  .refine(
+    (data) => {
+      // There cannot be more than one checked option
+      if (data.values) {
+        const checkedValues = data.values.filter((option) => option.checked);
+        return checkedValues.length <= 1;
+      }
+      return true;
+    },
+    {
+      message: 'There cannot be more than one checked option',
+      path: ['values'],
+    },
+  );
 
 type TRadioFieldFormSchema = z.infer<typeof ZRadioFieldFormSchema>;
 
@@ -68,12 +53,9 @@ export type EditorFieldRadioFormProps = {
 export const EditorFieldRadioForm = ({
   value = {
     type: 'radio',
-    direction: 'vertical',
   },
   onValueChange,
 }: EditorFieldRadioFormProps) => {
-  const { t } = useLingui();
-
   const form = useForm<TRadioFieldFormSchema>({
     resolver: zodResolver(ZRadioFieldFormSchema),
     mode: 'onChange',
@@ -82,8 +64,6 @@ export const EditorFieldRadioForm = ({
       values: value.values || [{ id: 1, checked: false, value: 'Default value' }],
       required: value.required || false,
       readOnly: value.readOnly || false,
-      direction: value.direction || 'vertical',
-      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
     },
   });
 
@@ -127,37 +107,7 @@ export const EditorFieldRadioForm = ({
   return (
     <Form {...form}>
       <form>
-        <fieldset className="flex flex-col gap-2">
-          <EditorGenericFontSizeField formControl={form.control} />
-
-          <FormField
-            control={form.control}
-            name="direction"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Direction</Trans>
-                </FormLabel>
-                <FormControl>
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger className="text-muted-foreground bg-background w-full">
-                      <SelectValue placeholder={t`Select direction`} />
-                    </SelectTrigger>
-                    <SelectContent position="popper">
-                      <SelectItem value="vertical">
-                        <Trans>Vertical</Trans>
-                      </SelectItem>
-                      <SelectItem value="horizontal">
-                        <Trans>Horizontal</Trans>
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
+        <fieldset className="flex flex-col gap-2 pb-2">
           <EditorGenericRequiredField formControl={form.control} />
 
           <EditorGenericReadOnlyField formControl={form.control} />

apps/remix/app/components/forms/editor/editor-field-signature-form.tsx

@@ -1,71 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/react/macro';
-import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
-
-import { DEFAULT_SIGNATURE_TEXT_FONT_SIZE } from '@documenso/lib/constants/pdf';
-import { type TSignatureFieldMeta, ZSignatureFieldMeta } from '@documenso/lib/types/field-meta';
-import { Form } from '@documenso/ui/primitives/form/form';
-
-import { EditorGenericFontSizeField } from './editor-field-generic-field-forms';
-
-const ZSignatureFieldFormSchema = ZSignatureFieldMeta.pick({
-  fontSize: true,
-});
-
-type TSignatureFieldFormSchema = z.infer<typeof ZSignatureFieldFormSchema>;
-
-type EditorFieldSignatureFormProps = {
-  value: TSignatureFieldMeta | undefined;
-  onValueChange: (value: TSignatureFieldMeta) => void;
-};
-
-export const EditorFieldSignatureForm = ({
-  value = {
-    type: 'signature',
-  },
-  onValueChange,
-}: EditorFieldSignatureFormProps) => {
-  const form = useForm<TSignatureFieldFormSchema>({
-    resolver: zodResolver(ZSignatureFieldFormSchema),
-    mode: 'onChange',
-    defaultValues: {
-      fontSize: value.fontSize || DEFAULT_SIGNATURE_TEXT_FONT_SIZE,
-    },
-  });
-
-  const { control } = form;
-
-  const formValues = useWatch({
-    control,
-  });
-
-  // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
-  useEffect(() => {
-    const validatedFormValues = ZSignatureFieldFormSchema.safeParse(formValues);
-
-    if (validatedFormValues.success) {
-      onValueChange({
-        type: 'signature',
-        ...validatedFormValues.data,
-      });
-    }
-  }, [formValues]);
-
-  return (
-    <Form {...form}>
-      <form>
-        <fieldset className="flex flex-col gap-2">
-          <div>
-            <EditorGenericFontSizeField formControl={form.control} />
-            <p className="text-muted-foreground mt-0.5 text-xs">
-              <Trans>The typed signature font size</Trans>
-            </p>
-          </div>
-        </fieldset>
-      </form>
-    </Form>
-  );
-};

apps/remix/app/components/forms/editor/editor-field-text-form.tsx

@@ -3,17 +3,9 @@ import { useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
+import { z } from 'zod';
 
-import {
-  DEFAULT_FIELD_FONT_SIZE,
-  FIELD_DEFAULT_GENERIC_ALIGN,
-  FIELD_DEFAULT_GENERIC_VERTICAL_ALIGN,
-  FIELD_DEFAULT_LETTER_SPACING,
-  FIELD_DEFAULT_LINE_HEIGHT,
-  type TTextFieldMeta as TextFieldMeta,
-  ZTextFieldMeta,
-} from '@documenso/lib/types/field-meta';
+import { type TTextFieldMeta as TextFieldMeta } from '@documenso/lib/types/field-meta';
 import {
   Form,
   FormControl,
@@ -27,36 +19,32 @@ import { Textarea } from '@documenso/ui/primitives/textarea';
 
 import {
   EditorGenericFontSizeField,
-  EditorGenericLetterSpacingField,
-  EditorGenericLineHeightField,
   EditorGenericReadOnlyField,
   EditorGenericRequiredField,
   EditorGenericTextAlignField,
-  EditorGenericVerticalAlignField,
 } from './editor-field-generic-field-forms';
 
-const ZTextFieldFormSchema = ZTextFieldMeta.pick({
-  label: true,
-  placeholder: true,
-  text: true,
-  characterLimit: true,
-  fontSize: true,
-  textAlign: true,
-  lineHeight: true,
-  letterSpacing: true,
-  verticalAlign: true,
-  required: true,
-  readOnly: true,
-}).refine(
-  (data) => {
-    // A read-only field must have text
-    return !data.readOnly || (data.text && data.text.length > 0);
-  },
-  {
-    message: 'A read-only field must have text',
-    path: ['text'],
-  },
-);
+const ZTextFieldFormSchema = z
+  .object({
+    label: z.string().optional(),
+    placeholder: z.string().optional(),
+    text: z.string().optional(),
+    characterLimit: z.coerce.number().min(0).optional(),
+    fontSize: z.coerce.number().min(8).max(96).optional(),
+    textAlign: z.enum(['left', 'center', 'right']).optional(),
+    required: z.boolean().optional(),
+    readOnly: z.boolean().optional(),
+  })
+  .refine(
+    (data) => {
+      // A read-only field must have text
+      return !data.readOnly || (data.text && data.text.length > 0);
+    },
+    {
+      message: 'A read-only field must have text',
+      path: ['text'],
+    },
+  );
 
 type TTextFieldFormSchema = z.infer<typeof ZTextFieldFormSchema>;
 
@@ -81,11 +69,8 @@ export const EditorFieldTextForm = ({
       placeholder: value.placeholder || '',
       text: value.text || '',
       characterLimit: value.characterLimit || 0,
-      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
-      lineHeight: value.lineHeight ?? FIELD_DEFAULT_LINE_HEIGHT,
-      letterSpacing: value.letterSpacing ?? FIELD_DEFAULT_LETTER_SPACING,
-      verticalAlign: value.verticalAlign ?? FIELD_DEFAULT_GENERIC_VERTICAL_ALIGN,
+      fontSize: value.fontSize || 14,
+      textAlign: value.textAlign || 'left',
       required: value.required || false,
       readOnly: value.readOnly || false,
     },
@@ -101,10 +86,6 @@ export const EditorFieldTextForm = ({
   useEffect(() => {
     const validatedFormValues = ZTextFieldFormSchema.safeParse(formValues);
 
-    if (formValues.readOnly && !formValues.text) {
-      void form.trigger('text');
-    }
-
     if (validatedFormValues.success) {
       onValueChange({
         type: 'text',
@@ -117,14 +98,6 @@ export const EditorFieldTextForm = ({
     <Form {...form}>
       <form>
         <fieldset className="flex flex-col gap-2">
-          <EditorGenericFontSizeField className="w-full" formControl={form.control} />
-
-          <div className="flex w-full flex-row gap-x-4">
-            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
-
-            <EditorGenericVerticalAlignField className="w-full" formControl={form.control} />
-          </div>
-
           <FormField
             control={form.control}
             name="label"
@@ -170,18 +143,6 @@ export const EditorFieldTextForm = ({
                     className="h-auto"
                     placeholder={t`Add text to the field`}
                     {...field}
-                    onChange={(e) => {
-                      const values = form.getValues();
-                      const characterLimit = values.characterLimit || 0;
-                      let textValue = e.target.value;
-
-                      if (characterLimit > 0 && textValue.length > characterLimit) {
-                        textValue = textValue.slice(0, characterLimit);
-                      }
-
-                      e.target.value = textValue;
-                      field.onChange(e);
-                    }}
                     rows={1}
                   />
                 </FormControl>
@@ -200,22 +161,11 @@ export const EditorFieldTextForm = ({
                 </FormLabel>
                 <FormControl>
                   <Input
+                    type="number"
+                    min={0}
                     className="bg-background"
-                    placeholder={t`Character limit`}
+                    placeholder={t`Field character limit`}
                     {...field}
-                    value={field.value || ''}
-                    onChange={(e) => {
-                      const values = form.getValues();
-                      const characterLimit = parseInt(e.target.value, 10) || 0;
-
-                      field.onChange(characterLimit || '');
-
-                      const textValue = values.text || '';
-
-                      if (characterLimit > 0 && textValue.length > characterLimit) {
-                        form.setValue('text', textValue.slice(0, characterLimit));
-                      }
-                    }}
                   />
                 </FormControl>
                 <FormMessage />
@@ -224,9 +174,9 @@ export const EditorFieldTextForm = ({
           />
 
           <div className="flex w-full flex-row gap-x-4">
-            <EditorGenericLineHeightField className="w-full" formControl={form.control} />
+            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
 
-            <EditorGenericLetterSpacingField className="w-full" formControl={form.control} />
+            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
           </div>
 
           <div className="mt-1">

apps/remix/app/components/forms/subscription-claim-form.tsx

@@ -39,7 +39,6 @@ export const SubscriptionClaimForm = ({
       name: subscriptionClaim.name,
       teamCount: subscriptionClaim.teamCount,
       memberCount: subscriptionClaim.memberCount,
-      envelopeItemCount: subscriptionClaim.envelopeItemCount,
       flags: subscriptionClaim.flags,
     },
   });
@@ -112,30 +111,6 @@ export const SubscriptionClaimForm = ({
             )}
           />
 
-          <FormField
-            control={form.control}
-            name="envelopeItemCount"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Envelope Item Count</Trans>
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    type="number"
-                    min={1}
-                    {...field}
-                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
-                  />
-                </FormControl>
-                <FormDescription>
-                  <Trans>Maximum number of uploaded files per envelope allowed</Trans>
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
           <div>
             <FormLabel>
               <Trans>Feature Flags</Trans>

apps/remix/app/components/general/app-command-menu.tsx

@@ -9,7 +9,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router';
 import { Theme, useTheme } from 'remix-themes';
 
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import {
@@ -64,12 +63,10 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   const [search, setSearch] = useState('');
   const [pages, setPages] = useState<string[]>([]);
 
-  const debouncedSearch = useDebouncedValue(search, 200);
-
   const { data: searchDocumentsData, isPending: isSearchingDocuments } =
     trpcReact.document.search.useQuery(
       {
-        query: debouncedSearch,
+        query: search,
       },
       {
         placeholderData: (previousData) => previousData,
@@ -235,7 +232,6 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
             <Trans>No results found.</Trans>
           </CommandEmpty>
         )}
-
         {!currentPage && (
           <>
             {documentPageLinks.length > 0 && (
@@ -243,17 +239,14 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
                 <Commands push={push} pages={documentPageLinks} />
               </CommandGroup>
             )}
-
             {templatePageLinks.length > 0 && (
               <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Templates`)}>
                 <Commands push={push} pages={templatePageLinks} />
               </CommandGroup>
             )}
-
             <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Settings`)}>
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>
-
             <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Preferences`)}>
               <CommandItem className="-mx-2 -my-1 rounded-lg" onSelect={() => addPage('language')}>
                 Change language
@@ -262,7 +255,6 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
                 Change theme
               </CommandItem>
             </CommandGroup>
-
             {searchResults.length > 0 && (
               <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Your documents`)}>
                 <Commands push={push} pages={searchResults} />

apps/remix/app/components/general/branding-logo-icon.tsx

@@ -1,17 +0,0 @@
-import type { SVGAttributes } from 'react';
-
-export type LogoProps = SVGAttributes<SVGSVGElement>;
-
-export const BrandingLogoIcon = ({ ...props }: LogoProps) => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" {...props}>
-      <g fill="currentColor">
-        <path d="M35.53 12.152c-.968.879-2.038 1.91-3.261 3.118a4.55 4.55 0 0 1-2.722.97l-4.098.079 1.194-1.194C33.883 7.885 37.502 4.265 42 4.265s8.118 3.62 15.357 10.86l1.192 1.192-3.957-.075a4.55 4.55 0 0 1-3.004-1.209l-2.373-2.194a69 69 0 0 0-.66-.61l-.128-.119h-.002a35 35 0 0 0-2.244-1.892C44.17 8.684 43 8.338 42 8.338s-2.17.346-4.18 1.88a35 35 0 0 0-2.275 1.92zM71.77 35.444a69 69 0 0 0-.608-.658l-2.196-2.374a4.55 4.55 0 0 1-1.208-3.002l-.077-3.961 1.194 1.194c7.24 7.24 10.86 10.859 10.86 15.357s-3.62 8.118-10.86 15.357l-1.194 1.194.077-3.961a4.55 4.55 0 0 1 1.209-3.002l2.195-2.373q.315-.338.609-.66l.119-.128v-.002a35 35 0 0 0 1.892-2.244c1.534-2.01 1.88-3.18 1.88-4.181s-.346-2.17-1.88-4.18a35 35 0 0 0-1.892-2.245v-.002zM48.51 71.813q.362-.33.747-.69l2.331-2.157a4.55 4.55 0 0 1 3.003-1.208l3.959-.076-1.193 1.193c-7.24 7.24-10.859 10.86-15.357 10.86s-8.118-3.62-15.357-10.86l-1.194-1.194 3.97.076a4.55 4.55 0 0 1 2.991 1.2l1.601 1.47c1.461 1.4 2.69 2.502 3.808 3.355 2.01 1.534 3.18 1.88 4.181 1.88s2.17-.346 4.18-1.88a35 35 0 0 0 2.275-1.92zM12.156 48.476q.364.4.763.825l2.115 2.287a4.55 4.55 0 0 1 1.209 3.002l.076 3.961-1.194-1.194C7.885 50.117 4.265 46.498 4.265 42s3.62-8.118 10.86-15.357l1.193-1.193-.075 3.959a4.55 4.55 0 0 1-1.21 3.004l-2.18 2.357q-.325.346-.626.676l-.117.127v.002a35 35 0 0 0-1.892 2.244C8.684 39.83 8.338 41 8.338 42s.346 2.17 1.88 4.18a35 35 0 0 0 1.92 2.275z" />
-        <path d="m12.138 35.543 2.896-3.13a4.55 4.55 0 0 0 1.186-2.626c.012-1.61.038-3.013.096-4.254l.003-.17.006-.005c.053-1.072.131-2.021.246-2.875.337-2.506.92-3.578 1.627-4.286s1.78-1.29 4.285-1.626c.87-.117 1.838-.196 2.935-.25l.002-.002h.06c1.285-.062 2.746-.089 4.43-.1a4.55 4.55 0 0 0 2.711-1.257l2.923-2.825h-1.688c-10.238 0-15.357 0-18.538 3.18-3.18 3.181-3.18 8.3-3.18 18.539zM12.138 48.456v1.688c0 10.239 0 15.358 3.18 18.538s8.3 3.18 18.538 3.18h16.289c10.238 0 15.357 0 18.538-3.18 3.18-3.18 3.18-8.3 3.18-18.537v-1.69l-2.897 3.133a4.55 4.55 0 0 0-1.185 2.618c-.012 1.645-.039 3.075-.1 4.335v.04h-.001a35 35 0 0 1-.25 2.936c-.337 2.506-.92 3.578-1.627 4.286s-1.78 1.29-4.285 1.626c-.855.115-1.804.194-2.876.247l-.005.005-.149.003c-1.246.058-2.658.085-4.277.097-.976.1-1.897.515-2.623 1.185l-3.132 2.897H35.573l-3.163-2.906a4.55 4.55 0 0 0-2.61-1.176 110 110 0 0 1-4.324-.1h-.056l-.002-.002a35 35 0 0 1-2.935-.25c-2.505-.336-3.578-.919-4.285-1.626-.708-.708-1.29-1.78-1.627-4.286a35 35 0 0 1-.25-2.935l-.002-.002-.001-.075c-.06-1.251-.086-2.668-.098-4.296a4.55 4.55 0 0 0-1.186-2.621zM67.781 29.794a4.55 4.55 0 0 0 1.185 2.618l2.897 3.132v-1.688c0-10.239 0-15.358-3.18-18.538s-8.3-3.18-18.538-3.18h-1.689l3.132 2.895a4.55 4.55 0 0 0 2.627 1.186c1.6.012 2.997.038 4.232.096l.247.004.008.008a34 34 0 0 1 2.816.244c2.505.337 3.578.919 4.285 1.626.708.708 1.29 1.78 1.627 4.286.117.87.196 1.839.25 2.936l.001.04c.061 1.26.088 2.69.1 4.335M38.91 23.96l-2.747 2.33a2.9 2.9 0 0 1-1.747.689l-4.597.214 2.397-2.397c4.627-4.627 6.94-6.94 9.815-6.94s5.188 2.313 9.815 6.94l2.383 2.382-4.662-.202a2.9 2.9 0 0 1-1.773-.703l-2.074-1.789c-.728-.685-1.345-1.226-1.908-1.656-1.154-.88-1.592-.9-1.78-.9-.19 0-.627.02-1.781.9l-.055.042h-.003l-.027.023c-.387.3-.8.652-1.257 1.067" />
-        <path d="M61.023 39.995c-.785-.992-1.911-2.163-3.542-3.803a2.9 2.9 0 0 1-.44-1.426l-.202-4.977 2.369 2.368c4.627 4.627 6.94 6.94 6.94 9.815s-2.313 5.188-6.94 9.815l-2.382 2.381.23-4.757a2.9 2.9 0 0 1 .727-1.787l1.742-1.968a28 28 0 0 0 1.387-1.569l.215-.242v-.03l.049-.062c.88-1.154.9-1.592.9-1.781 0-.19-.02-.627-.9-1.78l-.049-.064v-.024zM22.946 40.124l3.175-3.454c.45-.489.719-1.117.762-1.78l.175-2.71c.027-.86.071-1.584.144-2.216l.012-.192.013-.013.009-.065c.193-1.438.488-1.762.622-1.896s.457-.429 1.896-.622c.461-.062.974-.106 1.555-.138l3.9-.385a2.9 2.9 0 0 0 1.678-.75l3.296-3.017h-3.357c-6.543 0-9.815 0-11.847 2.033-1.732 1.732-1.988 4.363-2.026 9.15q-.009 1.246-.007 2.698v3.356" />
-        <path d="M22.946 43.82v3.357c0 .97 0 1.866.006 2.698.038 4.787.295 7.418 2.027 9.15 1.731 1.732 4.362 1.988 9.15 2.026q1.246.009 2.697.007h10.411q1.45.002 2.697-.007c4.788-.038 7.419-.294 9.15-2.026 2.033-2.033 2.033-5.304 2.033-11.848V43.81l-3.384 3.67a2.9 2.9 0 0 0-.69 1.29c-.006 2.38-.038 4.033-.193 5.306l-.002.068-.008.008-.012.098c-.194 1.438-.489 1.762-.623 1.896-.133.133-.457.429-1.895.622l-.099.013-.008.008-.114.007c-.724.086-1.57.133-2.602.159l-2.32.141c-.661.04-1.288.305-1.778.75l-3.538 3.212h-3.697l-3.536-3.306a2.9 2.9 0 0 0-1.69-.769q-.41 0-.79-.004c-1.906-.016-3.288-.063-4.384-.21-1.439-.194-1.762-.49-1.896-.623-.134-.134-.429-.458-.622-1.896l-.009-.065-.012-.013-.002-.027-.004-.108c-.13-1.084-.171-2.442-.185-4.283l-.02-.472a2.9 2.9 0 0 0-.755-1.833zM57.01 32.35l.19 2.586c.049.652.315 1.27.757 1.751l3.16 3.447v-3.367c0-6.544 0-9.815-2.032-11.848s-5.305-2.033-11.848-2.033H43.85l3.391 3.09c.475.432 1.08.696 1.721.748l3.933.322q.562.033 1.045.085l.29.024.013.012.066.01c1.438.192 1.762.488 1.895.621.134.134.43.458.623 1.896.098.733.152 1.595.182 2.655" />
-        <path d="m27.226 54.158-.013-.013.002.027.012.013zM29.849 56.78l4.289.199c-1.852-.015-3.208-.06-4.29-.198M27.044 49.476a3 3 0 0 0-.08-.57 3 3 0 0 1 .04.376l.02.472c.014 1.84.056 3.2.185 4.283l.004.108.013.013zM17.915 41.972c0 2.45 1.679 4.491 5.038 7.903q-.009-1.246-.007-2.698v-3.344l-.007-.008v-.005l-.052-.068c-.88-1.153-.9-1.59-.9-1.78s.02-.627.9-1.78l.059-.077v-3.348q-.001-1.452.006-2.698c-3.358 3.412-5.037 5.454-5.037 7.903M40.25 61.116l-.048-.037h-.01l-.022-.021h-3.344q-1.45.002-2.697-.007c3.412 3.358 5.453 5.038 7.902 5.038 2.45 0 4.491-1.68 7.903-5.038q-1.246.009-2.697.007h-3.35l-.075.058c-1.154.88-1.592.9-1.78.9-.19 0-.627-.02-1.781-.9" />
-      </g>
-    </svg>
-  );
-};

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

@@ -89,10 +89,7 @@ export const DirectTemplatePageView = ({
     setStep('sign');
   };
 
-  const onSignDirectTemplateSubmit = async (
-    fields: DirectTemplateLocalField[],
-    nextSigner?: { name: string; email: string },
-  ) => {
+  const onSignDirectTemplateSubmit = async (fields: DirectTemplateLocalField[]) => {
     try {
       let directTemplateExternalId = searchParams?.get('externalId') || undefined;
 
@@ -101,7 +98,6 @@ export const DirectTemplatePageView = ({
       }
 
       const { token } = await createDocumentFromDirectTemplate({
-        nextSigner,
         directTemplateToken,
         directTemplateExternalId,
         directRecipientName: fullName,
@@ -153,9 +149,7 @@ export const DirectTemplatePageView = ({
         <CardContent className="p-2">
           <PDFViewer
             key={template.id}
-            envelopeItem={template.envelopeItems[0]}
-            token={directTemplateRecipient.token}
-            version="signed"
+            documentData={template.templateDocumentData}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

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

@@ -55,13 +55,10 @@ import { DocumentSigningRecipientProvider } from '../document-signing/document-s
 
 export type DirectTemplateSigningFormProps = {
   flowStep: DocumentFlowStep;
-  directRecipient: Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token' | 'id'>;
+  directRecipient: Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token'>;
   directRecipientFields: Field[];
   template: Omit<TTemplate, 'user'>;
-  onSubmit: (
-    _data: DirectTemplateLocalField[],
-    _nextSigner?: { name: string; email: string },
-  ) => Promise<void>;
+  onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
 };
 
 export type DirectTemplateLocalField = Field & {
@@ -152,7 +149,7 @@ export const DirectTemplateSigningForm = ({
     validateFieldsInserted(fieldsRequiringValidation);
   };
 
-  const handleSubmit = async (nextSigner?: { name: string; email: string }) => {
+  const handleSubmit = async () => {
     setValidateUninsertedFields(true);
 
     const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
@@ -164,7 +161,7 @@ export const DirectTemplateSigningForm = ({
     setIsSubmitting(true);
 
     try {
-      await onSubmit(localFields, nextSigner);
+      await onSubmit(localFields);
     } catch {
       setIsSubmitting(false);
     }
@@ -221,30 +218,6 @@ export const DirectTemplateSigningForm = ({
     setLocalFields(updatedFields);
   }, []);
 
-  const nextRecipient = useMemo(() => {
-    if (
-      !template.templateMeta?.signingOrder ||
-      template.templateMeta.signingOrder !== 'SEQUENTIAL' ||
-      !template.templateMeta.allowDictateNextSigner
-    ) {
-      return undefined;
-    }
-
-    const sortedRecipients = template.recipients.sort((a, b) => {
-      // Sort by signingOrder first (nulls last), then by id
-      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
-      if (a.signingOrder === null) return 1;
-      if (b.signingOrder === null) return -1;
-      if (a.signingOrder === b.signingOrder) return a.id - b.id;
-      return a.signingOrder - b.signingOrder;
-    });
-
-    const currentIndex = sortedRecipients.findIndex((r) => r.id === directRecipient.id);
-    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
-      ? sortedRecipients[currentIndex + 1]
-      : undefined;
-  }, [template.templateMeta?.signingOrder, template.recipients, directRecipient.id]);
-
   return (
     <DocumentSigningRecipientProvider recipient={directRecipient}>
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
@@ -444,15 +417,11 @@ export const DirectTemplateSigningForm = ({
 
           <DocumentSigningCompleteDialog
             isSubmitting={isSubmitting}
-            onSignatureComplete={async (nextSigner) => handleSubmit(nextSigner)}
+            onSignatureComplete={async () => handleSubmit()}
             documentTitle={template.title}
             fields={localFields}
             fieldsValidated={fieldsValidated}
             recipient={directRecipient}
-            allowDictateNextSigner={nextRecipient && template.templateMeta?.allowDictateNextSigner}
-            defaultNextSigner={
-              nextRecipient ? { name: nextRecipient.name, email: nextRecipient.email } : undefined
-            }
           />
         </div>
       </DocumentFlowFormContainerFooter>

apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx

@@ -8,13 +8,11 @@ import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitive
 export type DocumentSigningAttachmentsPopoverProps = {
   envelopeId: string;
   token: string;
-  trigger?: React.ReactNode;
 };
 
 export const DocumentSigningAttachmentsPopover = ({
   envelopeId,
   token,
-  trigger,
 }: DocumentSigningAttachmentsPopoverProps) => {
   const { data: attachments } = trpc.envelope.attachment.find.useQuery({
     envelopeId,
@@ -28,17 +26,15 @@ export const DocumentSigningAttachmentsPopover = ({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        {trigger ?? (
-          <Button variant="outline" className="gap-2">
-            <PaperclipIcon className="h-4 w-4" />
-            <span>
-              <Trans>Attachments</Trans>{' '}
-              {attachments && attachments.data.length > 0 && (
-                <span className="ml-1">({attachments.data.length})</span>
-              )}
-            </span>
-          </Button>
-        )}
+        <Button variant="outline" className="gap-2">
+          <PaperclipIcon className="h-4 w-4" />
+          <span>
+            <Trans>Attachments</Trans>{' '}
+            {attachments && attachments.data.length > 0 && (
+              <span className="ml-1">({attachments.data.length})</span>
+            )}
+          </span>
+        </Button>
       </PopoverTrigger>
 
       <PopoverContent className="w-96" align="start">

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

@@ -9,7 +9,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentSigningAuthPageViewProps = {
-  email?: string;
+  email: string;
   emailHasAccount?: boolean;
 };
 
@@ -22,18 +22,12 @@ export const DocumentSigningAuthPageView = ({
 
   const [isSigningOut, setIsSigningOut] = useState(false);
 
-  const handleChangeAccount = async (email?: string) => {
+  const handleChangeAccount = async (email: string) => {
     try {
       setIsSigningOut(true);
 
-      let redirectPath = '/signin';
-
-      if (email) {
-        redirectPath = emailHasAccount ? `/signin#email=${email}` : `/signup#email=${email}`;
-      }
-
       await authClient.signOut({
-        redirectPath,
+        redirectPath: emailHasAccount ? `/signin#email=${email}` : `/signup#email=${email}`,
       });
     } catch {
       toast({
@@ -55,13 +49,9 @@ export const DocumentSigningAuthPageView = ({
         </h1>
 
         <p className="text-muted-foreground mt-2 text-sm">
-          {email ? (
-            <Trans>
-              You need to be logged in as <strong>{email}</strong> to view this page.
-            </Trans>
-          ) : (
-            <Trans>You need to be logged in to view this page.</Trans>
-          )}
+          <Trans>
+            You need to be logged in as <strong>{email}</strong> to view this page.
+          </Trans>
         </p>
 
         <Button

apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx

@@ -24,10 +24,7 @@ type PasskeyData = {
   isError: boolean;
 };
 
-type SigningAuthRecipient = Pick<
-  Recipient,
-  'authOptions' | 'email' | 'role' | 'name' | 'token' | 'id'
->;
+type SigningAuthRecipient = Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token'>;
 
 export type DocumentSigningAuthContextValue = {
   executeActionAuthProcedure: (_value: ExecuteActionAuthProcedureOptions) => Promise<void>;

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

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import type { Field, Recipient } from '@prisma/client';
 import { RecipientRole } from '@prisma/client';
 import { useForm } from 'react-hook-form';
@@ -18,9 +18,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
-  DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
@@ -34,7 +32,6 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 
-import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 import { AccessAuth2FAForm } from '~/components/general/document-signing/access-auth-2fa-form';
 import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
 
@@ -48,7 +45,6 @@ export type DocumentSigningCompleteDialogProps = {
   onSignatureComplete: (
     nextSigner?: { name: string; email: string },
     accessAuthOptions?: TRecipientAccessAuth,
-    directRecipient?: { name: string; email: string },
   ) => void | Promise<void>;
   recipient: Pick<Recipient, 'name' | 'email' | 'role' | 'token'>;
   disabled?: boolean;
@@ -57,12 +53,6 @@ export type DocumentSigningCompleteDialogProps = {
     name: string;
     email: string;
   };
-  directTemplatePayload?: {
-    name: string;
-    email: string;
-  };
-  buttonSize?: 'sm' | 'lg';
-  position?: 'start' | 'end' | 'center';
 };
 
 const ZNextSignerFormSchema = z.object({
@@ -73,13 +63,6 @@ const ZNextSignerFormSchema = z.object({
 
 type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
 
-const ZDirectRecipientFormSchema = z.object({
-  name: z.string(),
-  email: z.string().email('Invalid email address'),
-});
-
-type TDirectRecipientFormSchema = z.infer<typeof ZDirectRecipientFormSchema>;
-
 export const DocumentSigningCompleteDialog = ({
   isSubmitting,
   documentTitle,
@@ -89,21 +72,15 @@ export const DocumentSigningCompleteDialog = ({
   recipient,
   disabled = false,
   allowDictateNextSigner = false,
-  directTemplatePayload,
   defaultNextSigner,
-  buttonSize = 'lg',
-  position,
 }: DocumentSigningCompleteDialogProps) => {
-  const { t } = useLingui();
-
   const [showDialog, setShowDialog] = useState(false);
+  const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
 
   const [showTwoFactorForm, setShowTwoFactorForm] = useState(false);
   const [twoFactorValidationError, setTwoFactorValidationError] = useState<string | null>(null);
 
-  const { derivedRecipientAccessAuth } = useRequiredDocumentSigningAuthContext();
-
-  const { isNameLocked, isEmailLocked } = useEmbedSigningContext() || {};
+  const { derivedRecipientAccessAuth, user } = useRequiredDocumentSigningAuthContext();
 
   const form = useForm<TNextSignerFormSchema>({
     resolver: allowDictateNextSigner ? zodResolver(ZNextSignerFormSchema) : undefined,
@@ -113,14 +90,6 @@ export const DocumentSigningCompleteDialog = ({
     },
   });
 
-  const directRecipientForm = useForm<TDirectRecipientFormSchema>({
-    resolver: zodResolver(ZDirectRecipientFormSchema),
-    defaultValues: {
-      name: directTemplatePayload?.name ?? '',
-      email: directTemplatePayload?.email ?? '',
-    },
-  });
-
   const isComplete = useMemo(() => !fieldsContainUnsignedRequiredField(fields), [fields]);
 
   const completionRequires2FA = useMemo(
@@ -140,23 +109,12 @@ export const DocumentSigningCompleteDialog = ({
       });
     }
 
+    setIsEditingNextSigner(false);
     setShowDialog(open);
   };
 
   const onFormSubmit = async (data: TNextSignerFormSchema) => {
     try {
-      let directRecipient: { name: string; email: string } | undefined;
-
-      if (directTemplatePayload && !directTemplatePayload.email) {
-        const isFormValid = await directRecipientForm.trigger();
-
-        if (!isFormValid) {
-          return;
-        }
-
-        directRecipient = directRecipientForm.getValues();
-      }
-
       // Check if 2FA is required
       if (completionRequires2FA && !data.accessAuthOptions) {
         setShowTwoFactorForm(true);
@@ -168,7 +126,7 @@ export const DocumentSigningCompleteDialog = ({
           ? { name: data.name, email: data.email }
           : undefined;
 
-      await onSignatureComplete(nextSigner, data.accessAuthOptions, directRecipient);
+      await onSignatureComplete(nextSigner, data.accessAuthOptions);
     } catch (error) {
       const err = AppError.parseError(error);
 
@@ -194,19 +152,21 @@ export const DocumentSigningCompleteDialog = ({
     void form.handleSubmit(onFormSubmit)();
   };
 
+  const isNextSignerValid = !allowDictateNextSigner || (form.watch('name') && form.watch('email'));
+
   return (
     <Dialog open={showDialog} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         <Button
           className="w-full"
           type="button"
-          size={buttonSize}
+          size="lg"
           onClick={fieldsValidated}
           loading={isSubmitting}
           disabled={disabled}
         >
           {match({ isComplete, role: recipient.role })
-            .with({ isComplete: false }, () => <Trans>Next Field</Trans>)
+            .with({ isComplete: false }, () => <Trans>Next field</Trans>)
             .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
             .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
               <Trans>Mark as viewed</Trans>
@@ -216,103 +176,106 @@ export const DocumentSigningCompleteDialog = ({
         </Button>
       </DialogTrigger>
 
-      <DialogContent position={position}>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Are you sure?</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <div className="text-muted-foreground max-w-[50ch]">
-              {match(recipient.role)
-                .with(RecipientRole.VIEWER, () => (
-                  <span className="inline-flex flex-wrap">
-                    <Trans>You are about to complete viewing the following document</Trans>
-                  </span>
-                ))
-                .with(RecipientRole.SIGNER, () => (
-                  <span className="inline-flex flex-wrap">
-                    <Trans>You are about to complete signing the following document</Trans>
-                  </span>
-                ))
-                .with(RecipientRole.APPROVER, () => (
-                  <span className="inline-flex flex-wrap">
-                    <Trans>You are about to complete approving the following document</Trans>
-                  </span>
-                ))
-                .with(RecipientRole.ASSISTANT, () => (
-                  <span className="inline-flex flex-wrap">
-                    <Trans>You are about to complete assisting the following document</Trans>
-                  </span>
-                ))
-                .with(RecipientRole.CC, () => null)
-                .exhaustive()}
-            </div>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="border-border bg-muted/50 rounded-lg border p-4 text-center">
-          <p className="text-muted-foreground text-sm font-medium">{documentTitle}</p>
-        </div>
-
+      <DialogContent>
         {!showTwoFactorForm && (
-          <>
-            <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
-              {directTemplatePayload && !directTemplatePayload.email && (
-                <Form {...directRecipientForm}>
-                  <div className="mb-4 flex flex-col gap-4">
-                    <div className="flex flex-col gap-4 md:flex-row">
-                      <FormField
-                        control={directRecipientForm.control}
-                        name="name"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Your Name</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                className="mt-2"
-                                placeholder={t`Enter your name`}
-                                disabled={isNameLocked}
-                              />
-                            </FormControl>
-
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={directRecipientForm.control}
-                        name="email"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Your Email</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                type="email"
-                                className="mt-2"
-                                placeholder={t`Enter your email`}
-                                disabled={!!field.value && isEmailLocked}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
+                <DialogTitle>
+                  <div className="text-foreground text-xl font-semibold">
+                    {match(recipient.role)
+                      .with(RecipientRole.VIEWER, () => <Trans>Complete Viewing</Trans>)
+                      .with(RecipientRole.SIGNER, () => <Trans>Complete Signing</Trans>)
+                      .with(RecipientRole.APPROVER, () => <Trans>Complete Approval</Trans>)
+                      .with(RecipientRole.CC, () => <Trans>Complete Viewing</Trans>)
+                      .with(RecipientRole.ASSISTANT, () => <Trans>Complete Assisting</Trans>)
+                      .exhaustive()}
                   </div>
-                </Form>
-              )}
+                </DialogTitle>
 
-              <Form {...form}>
-                <form onSubmit={form.handleSubmit(onFormSubmit)}>
-                  {allowDictateNextSigner && defaultNextSigner && (
-                    <div className="mb-4 flex flex-col gap-4">
+                <div className="text-muted-foreground max-w-[50ch]">
+                  {match(recipient.role)
+                    .with(RecipientRole.VIEWER, () => (
+                      <span>
+                        <Trans>
+                          <span className="inline-flex flex-wrap">
+                            You are about to complete viewing "
+                            <span className="inline-block max-w-[11rem] truncate align-baseline">
+                              {documentTitle}
+                            </span>
+                            ".
+                          </span>
+                          <br /> Are you sure?
+                        </Trans>
+                      </span>
+                    ))
+                    .with(RecipientRole.SIGNER, () => (
+                      <span>
+                        <Trans>
+                          <span className="inline-flex flex-wrap">
+                            You are about to complete signing "
+                            <span className="inline-block max-w-[11rem] truncate align-baseline">
+                              {documentTitle}
+                            </span>
+                            ".
+                          </span>
+                          <br /> Are you sure?
+                        </Trans>
+                      </span>
+                    ))
+                    .with(RecipientRole.APPROVER, () => (
+                      <span>
+                        <Trans>
+                          <span className="inline-flex flex-wrap">
+                            You are about to complete approving{' '}
+                            <span className="inline-block max-w-[11rem] truncate align-baseline">
+                              "{documentTitle}"
+                            </span>
+                            .
+                          </span>
+                          <br /> Are you sure?
+                        </Trans>
+                      </span>
+                    ))
+                    .otherwise(() => (
+                      <span>
+                        <Trans>
+                          <span className="inline-flex flex-wrap">
+                            You are about to complete viewing "
+                            <span className="inline-block max-w-[11rem] truncate align-baseline">
+                              {documentTitle}
+                            </span>
+                            ".
+                          </span>
+                          <br /> Are you sure?
+                        </Trans>
+                      </span>
+                    ))}
+                </div>
+
+                {allowDictateNextSigner && (
+                  <div className="mt-4 flex flex-col gap-4">
+                    {!isEditingNextSigner && (
+                      <div>
+                        <p className="text-muted-foreground text-sm">
+                          The next recipient to sign this document will be{' '}
+                          <span className="font-semibold">{form.watch('name')}</span> (
+                          <span className="font-semibold">{form.watch('email')}</span>).
+                        </p>
+
+                        <Button
+                          type="button"
+                          className="mt-2"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setIsEditingNextSigner((prev) => !prev)}
+                        >
+                          <Trans>Update Recipient</Trans>
+                        </Button>
+                      </div>
+                    )}
+
+                    {isEditingNextSigner && (
                       <div className="flex flex-col gap-4 md:flex-row">
                         <FormField
                           control={form.control}
@@ -320,13 +283,13 @@ export const DocumentSigningCompleteDialog = ({
                           render={({ field }) => (
                             <FormItem className="flex-1">
                               <FormLabel>
-                                <Trans>Next Recipient Name</Trans>
+                                <Trans>Name</Trans>
                               </FormLabel>
                               <FormControl>
                                 <Input
                                   {...field}
                                   className="mt-2"
-                                  placeholder={t`Enter the next signer's name`}
+                                  placeholder="Enter the next signer's name"
                                 />
                               </FormControl>
 
@@ -341,14 +304,14 @@ export const DocumentSigningCompleteDialog = ({
                           render={({ field }) => (
                             <FormItem className="flex-1">
                               <FormLabel>
-                                <Trans>Next Recipient Email</Trans>
+                                <Trans>Email</Trans>
                               </FormLabel>
                               <FormControl>
                                 <Input
                                   {...field}
                                   type="email"
                                   className="mt-2"
-                                  placeholder={t`Enter the next signer's email`}
+                                  placeholder="Enter the next signer's email"
                                 />
                               </FormControl>
                               <FormMessage />
@@ -356,14 +319,17 @@ export const DocumentSigningCompleteDialog = ({
                           )}
                         />
                       </div>
-                    </div>
-                  )}
+                    )}
+                  </div>
+                )}
 
-                  <DocumentSigningDisclosure />
+                <DocumentSigningDisclosure className="mt-4" />
 
-                  <DialogFooter className="mt-4">
+                <DialogFooter className="mt-4">
+                  <div className="flex w-full flex-1 flex-nowrap gap-4">
                     <Button
                       type="button"
+                      className="flex-1"
                       variant="secondary"
                       onClick={() => setShowDialog(false)}
                       disabled={form.formState.isSubmitting}
@@ -373,7 +339,8 @@ export const DocumentSigningCompleteDialog = ({
 
                     <Button
                       type="submit"
-                      disabled={!isComplete}
+                      className="flex-1"
+                      disabled={!isComplete || !isNextSignerValid}
                       loading={form.formState.isSubmitting}
                     >
                       {match(recipient.role)
@@ -384,11 +351,11 @@ export const DocumentSigningCompleteDialog = ({
                         .with(RecipientRole.ASSISTANT, () => <Trans>Complete</Trans>)
                         .exhaustive()}
                     </Button>
-                  </DialogFooter>
-                </form>
-              </Form>
-            </fieldset>
-          </>
+                  </div>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
         )}
 
         {showTwoFactorForm && (

apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx

@@ -1,135 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Plural, Trans } from '@lingui/react/macro';
-import { RecipientRole } from '@prisma/client';
-import { motion } from 'framer-motion';
-import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
-import { match } from 'ts-pattern';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
-
-import { BrandingLogo } from '../branding-logo';
-import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
-import { EnvelopeSignerCompleteDialog } from '../envelope-signing/envelope-signing-complete-dialog';
-import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
-
-export const DocumentSigningMobileWidget = () => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const { hidePoweredBy = true } = useEmbedSigningContext() || {};
-
-  const { recipientFieldsRemaining, recipient, requiredRecipientFields } =
-    useRequiredEnvelopeSigningContext();
-
-  /**
-   * Pre open the widget for assistants to let them know it's there.
-   */
-  useEffect(() => {
-    if (recipient.role === RecipientRole.ASSISTANT) {
-      setIsExpanded(true);
-    }
-  }, []);
-
-  return (
-    <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-50 flex justify-center px-2 pb-2 sm:px-4 sm:pb-6">
-      <div className="pointer-events-auto w-full max-w-[760px]">
-        <div className="bg-card border-border overflow-hidden rounded-xl border shadow-2xl">
-          {/* Main Header Bar */}
-          <div className="flex items-center justify-between gap-4 p-4">
-            <div className="flex-1">
-              <div className="flex items-center gap-3">
-                {recipient.role !== RecipientRole.VIEWER && (
-                  <Button
-                    variant="outline"
-                    onClick={() => setIsExpanded(!isExpanded)}
-                    className="flex h-8 w-8 items-center justify-center"
-                    aria-label={isExpanded ? 'Collapse' : 'Expand'}
-                  >
-                    {isExpanded ? (
-                      <LucideChevronDown className="text-muted-foreground h-5 w-5 flex-shrink-0" />
-                    ) : (
-                      <LucideChevronUp className="text-muted-foreground h-5 w-5 flex-shrink-0" />
-                    )}
-                  </Button>
-                )}
-
-                <div>
-                  <h2 className="text-foreground text-lg font-semibold">
-                    {match(recipient.role)
-                      .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
-                      .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
-                      .with(RecipientRole.APPROVER, () => <Trans>Approve Document</Trans>)
-                      .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
-                      .otherwise(() => null)}
-                  </h2>
-
-                  <p className="text-muted-foreground -mt-0.5 text-sm">
-                    {recipientFieldsRemaining.length === 0 ? (
-                      match(recipient.role)
-                        .with(RecipientRole.VIEWER, () => (
-                          <Trans>Please mark as viewed to complete</Trans>
-                        ))
-                        .with(RecipientRole.SIGNER, () => (
-                          <Trans>Please complete the document once reviewed</Trans>
-                        ))
-                        .with(RecipientRole.APPROVER, () => (
-                          <Trans>Please complete the document once reviewed</Trans>
-                        ))
-                        .with(RecipientRole.ASSISTANT, () => (
-                          <Trans>Please complete the document once reviewed</Trans>
-                        ))
-                        .otherwise(() => null)
-                    ) : (
-                      <Plural
-                        value={recipientFieldsRemaining.length}
-                        one="1 Field Remaining"
-                        other="# Fields Remaining"
-                      />
-                    )}
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <div>
-              <EnvelopeSignerCompleteDialog />
-            </div>
-          </div>
-
-          {/* Progress Bar */}
-          {recipient.role !== RecipientRole.VIEWER &&
-            recipient.role !== RecipientRole.ASSISTANT && (
-              <div className="px-4 pb-3">
-                <div className="bg-muted relative h-[4px] rounded-md">
-                  <motion.div
-                    layout="size"
-                    layoutId="document-signing-mobile-widget-progress-bar"
-                    className="bg-documenso absolute inset-y-0 left-0"
-                    style={{
-                      width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
-                    }}
-                  />
-                </div>
-              </div>
-            )}
-
-          {/* Expandable Content */}
-          {isExpanded && (
-            <div className="border-border animate-in slide-in-from-bottom-2 border-t p-4 duration-200">
-              <EnvelopeSignerForm />
-
-              {!hidePoweredBy && (
-                <div className="bg-primary text-primary-foreground mt-2 inline-block rounded px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:hidden">
-                  <span>Powered by</span>
-                  <BrandingLogo className="ml-2 inline-block h-[14px]" />
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -245,12 +245,7 @@ export const DocumentSigningPageViewV1 = ({
           <div className="flex-1">
             <Card className="rounded-xl before:rounded-xl" gradient>
               <CardContent className="p-2">
-                <PDFViewer
-                  key={document.envelopeItems[0].id}
-                  envelopeItem={document.envelopeItems[0]}
-                  token={recipient.token}
-                  version="signed"
-                />
+                <PDFViewer key={documentData.id} documentData={documentData} document={document} />
               </CardContent>
             </Card>
           </div>

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

@@ -1,20 +1,16 @@
-import { lazy, useMemo } from 'react';
+import { lazy } from 'react';
 
 import { Plural, Trans } from '@lingui/react/macro';
-import { EnvelopeType, RecipientRole } from '@prisma/client';
 import { motion } from 'framer-motion';
-import { ArrowLeftIcon, BanIcon, DownloadCloudIcon, PaperclipIcon } from 'lucide-react';
+import { ArrowLeftIcon, BanIcon, DownloadCloudIcon } from 'lucide-react';
 import { Link } from 'react-router';
-import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
-import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 
-import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
-import { SignFieldCheckboxDialog } from '~/components/dialogs/sign-field-checkbox-dialog';
 import { SignFieldDropdownDialog } from '~/components/dialogs/sign-field-dropdown-dialog';
 import { SignFieldEmailDialog } from '~/components/dialogs/sign-field-email-dialog';
 import { SignFieldInitialsDialog } from '~/components/dialogs/sign-field-initials-dialog';
@@ -22,15 +18,11 @@ import { SignFieldNameDialog } from '~/components/dialogs/sign-field-name-dialog
 import { SignFieldNumberDialog } from '~/components/dialogs/sign-field-number-dialog';
 import { SignFieldSignatureDialog } from '~/components/dialogs/sign-field-signature-dialog';
 import { SignFieldTextDialog } from '~/components/dialogs/sign-field-text-dialog';
-import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 
-import { BrandingLogo } from '../branding-logo';
 import { DocumentSigningAttachmentsPopover } from '../document-signing/document-signing-attachments-popover';
 import { EnvelopeItemSelector } from '../envelope-editor/envelope-file-selector';
 import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
 import { EnvelopeSignerHeader } from '../envelope-signing/envelope-signer-header';
-import { DocumentSigningMobileWidget } from './document-signing-mobile-widget';
-import { DocumentSigningRejectDialog } from './document-signing-reject-dialog';
 import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
 
 const EnvelopeSignerPageRenderer = lazy(
@@ -41,37 +33,15 @@ export const DocumentSigningPageViewV2 = () => {
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
   const {
-    isDirectTemplate,
     envelope,
     recipient,
     recipientFields,
     recipientFieldsRemaining,
-    requiredRecipientFields,
-    selectedAssistantRecipientFields,
+    showPendingFieldTooltip,
   } = useRequiredEnvelopeSigningContext();
 
-  const {
-    isEmbed = false,
-    allowDocumentRejection = true,
-    hidePoweredBy = true,
-    onDocumentRejected,
-  } = useEmbedSigningContext() || {};
-
-  /**
-   * The total remaining fields remaining for the current recipient or selected assistant recipient.
-   *
-   * Includes both optional and required fields.
-   */
-  const remainingFields = useMemo(() => {
-    if (recipient.role === RecipientRole.ASSISTANT) {
-      return selectedAssistantRecipientFields.filter((field) => !field.inserted);
-    }
-
-    return recipientFields.filter((field) => !field.inserted);
-  }, [recipientFieldsRemaining, selectedAssistantRecipientFields, currentEnvelopeItem]);
-
   return (
-    <div className="dark:bg-background min-h-screen w-screen bg-gray-50">
+    <div className="h-screen w-screen bg-gray-50">
       <SignFieldEmailDialog.Root />
       <SignFieldTextDialog.Root />
       <SignFieldNumberDialog.Root />
@@ -79,29 +49,19 @@ export const DocumentSigningPageViewV2 = () => {
       <SignFieldInitialsDialog.Root />
       <SignFieldDropdownDialog.Root />
       <SignFieldSignatureDialog.Root />
-      <SignFieldCheckboxDialog.Root />
 
       <EnvelopeSignerHeader />
 
       {/* Main Content Area */}
-      <div className="flex h-[calc(100vh-4rem)] w-screen">
+      <div className="flex h-[calc(100vh-73px)] w-screen">
         {/* Left Section - Step Navigation */}
-        <div className="embed--DocumentWidgetContainer bg-background border-border hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4 lg:flex">
+        <div className="hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-gray-200 bg-white py-4 lg:flex">
           <div className="px-4">
-            <h3 className="text-foreground flex items-end justify-between text-sm font-semibold">
-              {match(recipient.role)
-                .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
-                .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
-                .with(RecipientRole.APPROVER, () => <Trans>Approve Document</Trans>)
-                .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
-                .otherwise(() => null)}
+            <h3 className="flex items-end justify-between text-sm font-semibold text-gray-900">
+              <Trans>Sign Document</Trans>
 
-              <span className="text-muted-foreground bg-muted/50 ml-2 rounded border px-2 py-0.5 text-xs">
-                <Plural
-                  value={recipientFieldsRemaining.length}
-                  one="1 Field Remaining"
-                  other="# Fields Remaining"
-                />
+              <span className="text-muted-foreground ml-2 rounded border bg-gray-50 px-2 py-0.5 text-xs">
+                <Trans>{recipientFieldsRemaining.length} fields remaining</Trans>
               </span>
             </h3>
 
@@ -111,12 +71,12 @@ export const DocumentSigningPageViewV2 = () => {
                 layoutId="document-flow-container-step"
                 className="bg-documenso absolute inset-y-0 left-0"
                 style={{
-                  width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
+                  width: `${(100 / recipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                 }}
               />
             </div>
 
-            <div className="embed--DocumentWidgetContent mt-6 space-y-3">
+            <div className="mt-6 space-y-3">
               <EnvelopeSignerForm />
             </div>
           </div>
@@ -124,113 +84,88 @@ export const DocumentSigningPageViewV2 = () => {
           <Separator className="my-6" />
 
           {/* Quick Actions. */}
-          {!isDirectTemplate && (
-            <div className="embed--Actions space-y-3 px-4">
-              <h4 className="text-foreground text-sm font-semibold">
-                <Trans>Actions</Trans>
-              </h4>
+          <div className="space-y-3 px-4">
+            <h4 className="text-sm font-semibold text-gray-900">
+              <Trans>Actions</Trans>
+            </h4>
 
-              <DocumentSigningAttachmentsPopover
-                envelopeId={envelope.id}
-                token={recipient.token}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <PaperclipIcon className="mr-2 h-4 w-4" />
-                    <Trans>Attachments</Trans>
-                  </Button>
-                }
-              />
-
-              <EnvelopeDownloadDialog
-                envelopeId={envelope.id}
-                envelopeStatus={envelope.status}
-                envelopeItems={envelope.envelopeItems}
-                token={recipient.token}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <DownloadCloudIcon className="mr-2 h-4 w-4" />
-                    <Trans>Download PDF</Trans>
-                  </Button>
-                }
-              />
-
-              {envelope.type === EnvelopeType.DOCUMENT && allowDocumentRejection && (
-                <DocumentSigningRejectDialog
-                  documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
-                  token={recipient.token}
-                  onRejected={
-                    onDocumentRejected &&
-                    ((reason) =>
-                      onDocumentRejected({
-                        token: recipient.token,
-                        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-                        envelopeId: envelope.id,
-                        recipientId: recipient.id,
-                        reason,
-                      }))
-                  }
-                  trigger={
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="hover:text-destructive w-full justify-start"
-                    >
-                      <BanIcon className="mr-2 h-4 w-4" />
-                      <Trans>Reject Document</Trans>
-                    </Button>
-                  }
-                />
-              )}
+            <div className="w-full">
+              <DocumentSigningAttachmentsPopover envelopeId={envelope.id} token={recipient.token} />
             </div>
-          )}
 
-          <div className="embed--DocumentWidgetFooter mt-auto">
-            {/* Footer of left sidebar. */}
-            {!isEmbed && (
-              <div className="px-4">
-                <Button asChild variant="ghost" className="w-full justify-start">
-                  <Link to="/">
-                    <ArrowLeftIcon className="mr-2 h-4 w-4" />
-                    <Trans>Return</Trans>
-                  </Link>
-                </Button>
-              </div>
-            )}
+            {/* Todo: Allow selecting which document to download and/or the original */}
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <DownloadCloudIcon className="mr-2 h-4 w-4" />
+              <Trans>Download Original</Trans>
+            </Button>
+
+            {/* Todo: Envelopes */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="hover:text-destructive w-full justify-start"
+            >
+              <BanIcon className="mr-2 h-4 w-4" />
+              <Trans>Reject Document</Trans>
+            </Button>
+          </div>
+
+          {/* Footer of left sidebar. */}
+          <div className="mt-auto px-4">
+            <Button asChild variant="ghost" className="w-full justify-start">
+              <Link to="/">
+                <ArrowLeftIcon className="mr-2 h-4 w-4" />
+                <Trans>Return</Trans>
+              </Link>
+            </Button>
           </div>
         </div>
 
-        <div className="embed--DocumentContainer flex-1 overflow-y-auto">
+        {/* Main Content - Changes based on current step */}
+        <div className="flex-1 overflow-y-auto">
           <div className="flex flex-col">
             {/* Horizontal envelope item selector */}
-            {envelopeItems.length > 1 && (
-              <div className="flex h-fit space-x-2 overflow-x-auto p-2 pt-4 sm:p-4">
-                {envelopeItems.map((doc, i) => (
-                  <EnvelopeItemSelector
-                    key={doc.id}
-                    number={i + 1}
-                    primaryText={doc.title}
-                    secondaryText={
-                      <Plural
-                        one="1 Field"
-                        other="# Fields"
-                        value={
-                          remainingFields.filter((field) => field.envelopeItemId === doc.id).length
-                        }
-                      />
-                    }
-                    isSelected={currentEnvelopeItem?.id === doc.id}
-                    buttonProps={{ onClick: () => setCurrentEnvelopeItem(doc.id) }}
-                  />
-                ))}
-              </div>
-            )}
+            <div className="flex h-fit space-x-2 overflow-x-auto p-4">
+              {envelopeItems.map((doc, i) => (
+                <EnvelopeItemSelector
+                  key={doc.id}
+                  number={i + 1}
+                  primaryText={doc.title}
+                  secondaryText={
+                    <Plural
+                      one="1 Field"
+                      other="# Fields"
+                      value={
+                        recipientFieldsRemaining.filter((field) => field.envelopeItemId === doc.id)
+                          .length
+                      }
+                    />
+                  }
+                  isSelected={currentEnvelopeItem?.id === doc.id}
+                  buttonProps={{ onClick: () => setCurrentEnvelopeItem(doc.id) }}
+                />
+              ))}
+            </div>
 
             {/* Document View */}
-            <div className="embed--DocumentViewer flex flex-col items-center justify-center p-2 sm:mt-4 sm:p-4">
+            <div className="mt-4 flex justify-center p-4">
+              {currentEnvelopeItem &&
+                showPendingFieldTooltip &&
+                recipientFieldsRemaining.length > 0 &&
+                recipientFieldsRemaining[0]?.envelopeItemId === currentEnvelopeItem?.id && (
+                  <FieldToolTip
+                    key={recipientFieldsRemaining[0].id}
+                    field={recipientFieldsRemaining[0]}
+                    color="warning"
+                  >
+                    <Trans>Click to insert field</Trans>
+                  </FieldToolTip>
+                )}
+
               {currentEnvelopeItem ? (
                 <PDFViewerKonvaLazy
-                  renderer="signing"
                   key={currentEnvelopeItem.id}
+                  documentDataId={currentEnvelopeItem.documentDataId}
                   customPageRenderer={EnvelopeSignerPageRenderer}
                 />
               ) : (
@@ -240,22 +175,6 @@ export const DocumentSigningPageViewV2 = () => {
                   </p>
                 </div>
               )}
-
-              {/* Mobile widget - Additional padding to allow users to scroll */}
-              <div className="block pb-28 lg:hidden">
-                <DocumentSigningMobileWidget />
-              </div>
-
-              {!hidePoweredBy && (
-                <a
-                  href="https://documenso.com"
-                  target="_blank"
-                  className="bg-primary text-primary-foreground fixed bottom-0 right-0 z-40 hidden cursor-pointer rounded-tl px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:block"
-                >
-                  <span>Powered by</span>
-                  <BrandingLogo className="ml-2 inline-block h-[14px]" />
-                </a>
-              )}
             </div>
           </div>
         </div>

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

@@ -39,14 +39,12 @@ export interface DocumentSigningRejectDialogProps {
   documentId: number;
   token: string;
   onRejected?: (reason: string) => void | Promise<void>;
-  trigger?: React.ReactNode;
 }
 
 export function DocumentSigningRejectDialog({
   documentId,
   token,
   onRejected,
-  trigger,
 }: DocumentSigningRejectDialogProps) {
   const { toast } = useToast();
   const navigate = useNavigate();
@@ -110,11 +108,9 @@ export function DocumentSigningRejectDialog({
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        {trigger ?? (
-          <Button variant="outline">
-            <Trans>Reject Document</Trans>
-          </Button>
-        )}
+        <Button variant="outline">
+          <Trans>Reject Document</Trans>
+        </Button>
       </DialogTrigger>
 
       <DialogContent>

apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx

@@ -1,30 +1,21 @@
 import { createContext, useContext, useMemo, useState } from 'react';
 
 import {
-  EnvelopeType,
   type Field,
   FieldType,
   type Recipient,
   RecipientRole,
   SigningStatus,
 } from '@prisma/client';
-import { prop, sortBy } from 'remeda';
 
 import { isBase64Image } from '@documenso/lib/constants/signatures';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
-import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import {
-  isFieldUnsignedAndRequired,
-  isRequiredField,
-} from '@documenso/lib/utils/advanced-fields-helpers';
-import { extractFieldInsertionValues } from '@documenso/lib/utils/envelope-signing';
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { trpc } from '@documenso/trpc/react';
 import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 
 export type EnvelopeSigningContextValue = {
-  isDirectTemplate: boolean;
-
   fullName: string;
   setFullName: (_value: string) => void;
   email: string;
@@ -41,8 +32,7 @@ export type EnvelopeSigningContextValue = {
   recipient: EnvelopeForSigningResponse['recipient'];
   recipientFieldsRemaining: Field[];
   recipientFields: Field[];
-  requiredRecipientFields: Field[];
-  selectedAssistantRecipientFields: Field[];
+  selectedRecipientFields: Field[];
   nextRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
   otherRecipientCompletedFields: (Field & {
     recipient: Pick<Recipient, 'name' | 'email' | 'signingStatus' | 'role'>;
@@ -52,11 +42,7 @@ export type EnvelopeSigningContextValue = {
   setSelectedAssistantRecipientId: (_value: number | null) => void;
   selectedAssistantRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
 
-  signField: (
-    _fieldId: number,
-    _value: TSignEnvelopeFieldValue,
-    authOptions?: TRecipientActionAuth,
-  ) => Promise<Pick<Field, 'id' | 'inserted'>>;
+  signField: (_fieldId: number, _value: TSignEnvelopeFieldValue) => Promise<void>;
 };
 
 const EnvelopeSigningContext = createContext<EnvelopeSigningContextValue | null>(null);
@@ -99,31 +85,26 @@ export const EnvelopeSigningProvider = ({
 
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
 
-  const isDirectTemplate = envelope.type === EnvelopeType.TEMPLATE;
+  const {
+    mutateAsync: completeDocument,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
 
   const { mutateAsync: signEnvelopeField } = trpc.envelope.field.sign.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (data) => {
+      console.log('signEnvelopeField', data);
+
+      const newRecipientFields = envelopeData.recipient.fields.map((field) =>
+        field.id === data.signedField.id ? data.signedField : field,
+      );
+
       setEnvelopeData((prev) => ({
         ...prev,
-        envelope: {
-          ...prev.envelope,
-          recipients: prev.envelope.recipients.map((recipient) =>
-            recipient.id === data.signedField.recipientId
-              ? {
-                  ...recipient,
-                  fields: recipient.fields.map((field) =>
-                    field.id === data.signedField.id ? data.signedField : field,
-                  ),
-                }
-              : recipient,
-          ),
-        },
         recipient: {
           ...prev.recipient,
-          fields: prev.recipient.fields.map((field) =>
-            field.id === data.signedField.id ? data.signedField : field,
-          ),
+          fields: newRecipientFields,
         },
       }));
     },
@@ -167,49 +148,6 @@ export const EnvelopeSigningProvider = ({
     })(),
   );
 
-  /**
-   * The fields that are still required to be signed by the actual recipient.
-   */
-  const recipientFieldsRemaining = useMemo(() => {
-    const requiredFields = envelopeData.recipient.fields
-      .filter((field) => isFieldUnsignedAndRequired(field))
-      .map((field) => {
-        const envelopeItem = envelope.envelopeItems.find(
-          (item) => item.id === field.envelopeItemId,
-        );
-
-        if (!envelopeItem) {
-          throw new Error('Missing envelope item');
-        }
-
-        return {
-          ...field,
-          envelopeItemOrder: envelopeItem.order,
-        };
-      });
-
-    return sortBy(
-      requiredFields,
-      [prop('envelopeItemOrder'), 'asc'],
-      [prop('page'), 'asc'],
-      [prop('positionY'), 'asc'],
-    );
-  }, [envelopeData.recipient.fields]);
-
-  /**
-   * All the required fields for the actual recipient.
-   */
-  const requiredRecipientFields = useMemo(() => {
-    return envelopeData.recipient.fields.filter((field) => isRequiredField(field));
-  }, [envelopeData.recipient.fields]);
-
-  /**
-   * All the fields for the actual recipient.
-   */
-  const recipientFields = useMemo(() => {
-    return envelopeData.recipient.fields;
-  }, [envelopeData.recipient.fields]);
-
   /**
    * Assistant recipients are those that have a signing order after the assistant.
    */
@@ -243,8 +181,22 @@ export const EnvelopeSigningProvider = ({
     return envelope.recipients.find((r) => r.id === selectedAssistantRecipientId) || null;
   }, [envelope.recipients, selectedAssistantRecipientId]);
 
-  const selectedAssistantRecipientFields = useMemo(() => {
-    return assistantFields.filter((field) => field.recipientId === selectedAssistantRecipient?.id);
+  /**
+   * The fields that are still required to be signed by the current recipient.
+   */
+  const recipientFieldsRemaining = useMemo(() => {
+    return envelopeData.recipient.fields.filter((field) => isFieldUnsignedAndRequired(field));
+  }, [envelopeData.recipient.fields]);
+
+  /**
+   * All the fields for the current recipient.
+   */
+  const recipientFields = useMemo(() => {
+    return envelopeData.recipient.fields;
+  }, [envelopeData.recipient.fields]);
+
+  const selectedRecipientFields = useMemo(() => {
+    return recipientFields.filter((field) => field.recipientId === selectedAssistantRecipient?.id);
   }, [recipientFields, selectedAssistantRecipient]);
 
   /**
@@ -289,91 +241,20 @@ export const EnvelopeSigningProvider = ({
       : null;
   }, [envelope.documentMeta?.signingOrder, envelope.recipients, recipient.id]);
 
-  const signField = async (
-    fieldId: number,
-    fieldValue: TSignEnvelopeFieldValue,
-    authOptions?: TRecipientActionAuth,
-  ) => {
-    // Set the field locally for direct templates.
-    if (isDirectTemplate) {
-      const signedField = handleDirectTemplateFieldInsertion(fieldId, fieldValue);
+  const signField = async (fieldId: number, fieldValue: TSignEnvelopeFieldValue) => {
+    console.log('insertField', fieldId, fieldValue);
 
-      return signedField;
-    }
-
-    const { signedField } = await signEnvelopeField({
+    await signEnvelopeField({
       token: envelopeData.recipient.token,
       fieldId,
       fieldValue,
-      authOptions,
+      authOptions: undefined,
     });
-
-    return signedField;
-  };
-
-  const handleDirectTemplateFieldInsertion = (
-    fieldId: number,
-    fieldValue: TSignEnvelopeFieldValue,
-  ) => {
-    const foundField = recipient.fields.find((field) => field.id === fieldId);
-
-    if (!foundField) {
-      throw new Error('Not possible');
-    }
-
-    const insertionValues = extractFieldInsertionValues({
-      fieldValue,
-      field: foundField,
-      documentMeta: envelope.documentMeta,
-    });
-
-    const updatedField = {
-      ...foundField,
-      ...insertionValues,
-    };
-
-    if (fieldValue.type === FieldType.SIGNATURE) {
-      const isBase64 = isBase64Image(fieldValue.value || '');
-
-      updatedField.signature = fieldValue.value
-        ? {
-            signatureImageAsBase64: isBase64 ? fieldValue.value : null,
-            typedSignature: isBase64 ? null : fieldValue.value,
-            recipientId: recipient.id,
-            created: new Date(),
-            // Dummy IDs.
-            id: 0,
-            fieldId: 0,
-          }
-        : null;
-    }
-
-    setEnvelopeData((prev) => ({
-      ...prev,
-      envelope: {
-        ...prev.envelope,
-        recipients: prev.envelope.recipients.map((r) =>
-          r.id === recipient.id
-            ? {
-                ...r,
-                fields: r.fields.map((field) => (field.id === fieldId ? updatedField : field)),
-              }
-            : r,
-        ),
-      },
-      recipient: {
-        ...prev.recipient,
-        fields: prev.recipient.fields.map((field) => (field.id === fieldId ? updatedField : field)),
-      },
-    }));
-
-    return updatedField;
   };
 
   return (
     <EnvelopeSigningContext.Provider
       value={{
-        isDirectTemplate,
         fullName,
         setFullName,
         email,
@@ -389,7 +270,6 @@ export const EnvelopeSigningProvider = ({
         recipient,
         recipientFieldsRemaining,
         recipientFields,
-        requiredRecipientFields,
         nextRecipient,
 
         otherRecipientCompletedFields,
@@ -397,7 +277,7 @@ export const EnvelopeSigningProvider = ({
         assistantFields,
         setSelectedAssistantRecipientId,
         selectedAssistantRecipient,
-        selectedAssistantRecipientFields,
+        selectedRecipientFields,
 
         signField,
       }}

apps/remix/app/components/general/document/document-attachments-popover.tsx

@@ -10,7 +10,6 @@ import { z } from 'zod';
 
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
@@ -25,8 +24,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentAttachmentsPopoverProps = {
   envelopeId: string;
-  buttonClassName?: string;
-  buttonSize?: 'sm' | 'default';
 };
 
 const ZAttachmentFormSchema = z.object({
@@ -36,11 +33,7 @@ const ZAttachmentFormSchema = z.object({
 
 type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
 
-export const DocumentAttachmentsPopover = ({
-  envelopeId,
-  buttonClassName,
-  buttonSize,
-}: DocumentAttachmentsPopoverProps) => {
+export const DocumentAttachmentsPopover = ({ envelopeId }: DocumentAttachmentsPopoverProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
 
@@ -125,7 +118,7 @@ export const DocumentAttachmentsPopover = ({
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild>
-        <Button variant="outline" className={cn('gap-2', buttonClassName)} size={buttonSize}>
+        <Button variant="outline" className="gap-2">
           <Paperclip className="h-4 w-4" />
 
           <span>
@@ -222,6 +215,9 @@ export const DocumentAttachmentsPopover = ({
                 />
 
                 <div className="flex gap-2">
+                  <Button type="submit" size="sm" className="flex-1" loading={isCreating}>
+                    <Trans>Add</Trans>
+                  </Button>
                   <Button
                     type="button"
                     variant="outline"
@@ -234,9 +230,6 @@ export const DocumentAttachmentsPopover = ({
                   >
                     <Trans>Cancel</Trans>
                   </Button>
-                  <Button type="submit" size="sm" className="flex-1" loading={isCreating}>
-                    <Trans>Add</Trans>
-                  </Button>
                 </div>
               </form>
             </Form>

apps/remix/app/components/general/document/document-certificate-qr-view.tsx

@@ -1,14 +1,10 @@
 import { useEffect, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { type DocumentData, DocumentStatus, type EnvelopeItem, EnvelopeType } from '@prisma/client';
-import { DownloadIcon } from 'lucide-react';
+import type { DocumentData, EnvelopeItem } from '@prisma/client';
 import { DateTime } from 'luxon';
 
-import {
-  EnvelopeRenderProvider,
-  useCurrentEnvelopeRender,
-} from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
@@ -23,10 +19,9 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
-import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
-
 import { EnvelopeRendererFileSelector } from '../envelope-editor/envelope-file-selector';
 import EnvelopeGenericPageRenderer from '../envelope-editor/envelope-generic-page-renderer';
+import { ShareDocumentDownloadButton } from '../share-document-download-button';
 
 export type DocumentCertificateQRViewProps = {
   documentId: number;
@@ -36,7 +31,6 @@ export type DocumentCertificateQRViewProps = {
   documentTeamUrl: string;
   recipientCount?: number;
   completedDate?: Date;
-  token: string;
 };
 
 export const DocumentCertificateQRView = ({
@@ -47,7 +41,6 @@ export const DocumentCertificateQRView = ({
   documentTeamUrl,
   recipientCount = 0,
   completedDate,
-  token,
 }: DocumentCertificateQRViewProps) => {
   const { data: documentViaUser } = trpc.document.get.useQuery({
     documentId,
@@ -99,83 +92,6 @@ export const DocumentCertificateQRView = ({
         </Dialog>
       )}
 
-      {internalVersion === 2 ? (
-        <EnvelopeRenderProvider
-          envelope={{
-            envelopeItems,
-            status: DocumentStatus.COMPLETED,
-            type: EnvelopeType.DOCUMENT,
-          }}
-          token={token}
-        >
-          <DocumentCertificateQrV2
-            title={title}
-            recipientCount={recipientCount}
-            formattedDate={formattedDate}
-            token={token}
-          />
-        </EnvelopeRenderProvider>
-      ) : (
-        <>
-          <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
-            <div className="space-y-1">
-              <h1 className="text-xl font-medium">{title}</h1>
-              <div className="text-muted-foreground flex flex-col gap-0.5 text-sm">
-                <p>
-                  <Trans>{recipientCount} recipients</Trans>
-                </p>
-
-                <p>
-                  <Trans>Completed on {formattedDate}</Trans>
-                </p>
-              </div>
-            </div>
-
-            <EnvelopeDownloadDialog
-              envelopeId={envelopeItems[0].envelopeId}
-              envelopeStatus={DocumentStatus.COMPLETED}
-              envelopeItems={envelopeItems}
-              token={token}
-              trigger={
-                <Button type="button" variant="outline" className="w-fit">
-                  <DownloadIcon className="mr-2 h-5 w-5" />
-                  <Trans>Download</Trans>
-                </Button>
-              }
-            />
-          </div>
-
-          <div className="mt-12 w-full">
-            <PDFViewer
-              key={envelopeItems[0].id}
-              envelopeItem={envelopeItems[0]}
-              token={token}
-              version="signed"
-            />
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-type DocumentCertificateQrV2Props = {
-  title: string;
-  recipientCount: number;
-  formattedDate: string;
-  token: string;
-};
-
-const DocumentCertificateQrV2 = ({
-  title,
-  recipientCount,
-  formattedDate,
-  token,
-}: DocumentCertificateQrV2Props) => {
-  const { currentEnvelopeItem, envelopeItems } = useCurrentEnvelopeRender();
-
-  return (
-    <div className="flex min-h-screen flex-col items-start">
       <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
         <div className="space-y-1">
           <h1 className="text-xl font-medium">{title}</h1>
@@ -190,24 +106,21 @@ const DocumentCertificateQrV2 = ({
           </div>
         </div>
 
-        <EnvelopeDownloadDialog
-          envelopeId={envelopeItems[0].envelopeId}
-          envelopeStatus={DocumentStatus.COMPLETED}
-          envelopeItems={envelopeItems}
-          token={token}
-          trigger={
-            <Button type="button" variant="outline" className="w-fit">
-              <DownloadIcon className="mr-2 h-5 w-5" />
-              <Trans>Download</Trans>
-            </Button>
-          }
-        />
+        <ShareDocumentDownloadButton title={title} documentData={envelopeItems[0].documentData} />
       </div>
 
       <div className="mt-12 w-full">
-        <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
+        {internalVersion === 2 ? (
+          <EnvelopeRenderProvider envelope={{ envelopeItems }}>
+            <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
 
-        <PDFViewerKonvaLazy renderer="preview" customPageRenderer={EnvelopeGenericPageRenderer} />
+            <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+          </EnvelopeRenderProvider>
+        ) : (
+          <>
+            <PDFViewer key={envelopeItems[0].id} documentData={envelopeItems[0].documentData} />
+          </>
+        )}
       </div>
     </div>
   );

apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx

@@ -1,15 +1,10 @@
 import { type ReactNode, useState } from 'react';
 
-import { useLingui } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { EnvelopeType } from '@prisma/client';
 import { Loader } from 'lucide-react';
-import {
-  ErrorCode as DropzoneErrorCode,
-  ErrorCode,
-  type FileRejection,
-  useDropzone,
-} from 'react-dropzone';
+import { ErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
 import { Link, useNavigate, useParams } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -21,26 +16,21 @@ import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/l
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-router/create-envelope.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
 
-export interface EnvelopeDropZoneWrapperProps {
+export interface DocumentDropZoneWrapperProps {
   children: ReactNode;
-  type: EnvelopeType;
   className?: string;
 }
 
-export const EnvelopeDropZoneWrapper = ({
-  children,
-  type,
-  className,
-}: EnvelopeDropZoneWrapperProps) => {
-  const { t } = useLingui();
+export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZoneWrapperProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
   const { folderId } = useParams();
@@ -57,13 +47,13 @@ export const EnvelopeDropZoneWrapper = ({
     TIME_ZONES.find((timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone) ??
     DEFAULT_DOCUMENT_TIME_ZONE;
 
-  const { quota, remaining, refreshLimits, maximumEnvelopeItemCount } = useLimits();
+  const { quota, remaining, refreshLimits } = useLimits();
 
-  const { mutateAsync: createEnvelope } = trpc.envelope.create.useMutation();
+  const { mutateAsync: createDocument } = trpc.document.create.useMutation();
 
   const isUploadDisabled = remaining.documents === 0 || !user.emailVerified;
 
-  const onFileDrop = async (files: File[]) => {
+  const onFileDrop = async (file: File) => {
     if (isUploadDisabled && IS_BILLING_ENABLED()) {
       await navigate(`/o/${organisation.url}/settings/billing`);
       return;
@@ -72,68 +62,44 @@ export const EnvelopeDropZoneWrapper = ({
     try {
       setIsLoading(true);
 
-      const payload = {
-        folderId,
-        type,
-        title: files[0].name,
-        meta: {
-          timezone: userTimezone,
-        },
-      } satisfies TCreateEnvelopePayload;
+      const response = await putPdfFile(file);
 
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-
-      for (const file of files) {
-        formData.append('files', file);
-      }
-
-      const { id } = await createEnvelope(formData);
+      const { legacyDocumentId: id } = await createDocument({
+        title: file.name,
+        documentDataId: response.id,
+        timezone: userTimezone, // Note: When migrating to v2 document upload remember to pass this through as a 'userTimezone' field.
+        folderId: folderId ?? undefined,
+      });
 
       void refreshLimits();
 
       toast({
-        title: type === EnvelopeType.DOCUMENT ? t`Document uploaded` : t`Template uploaded`,
-        description:
-          type === EnvelopeType.DOCUMENT
-            ? t`Your document has been uploaded successfully.`
-            : t`Your template has been uploaded successfully.`,
+        title: _(msg`Document uploaded`),
+        description: _(msg`Your document has been uploaded successfully.`),
         duration: 5000,
       });
 
-      if (type === EnvelopeType.DOCUMENT) {
-        analytics.capture('App: Document Uploaded', {
-          userId: user.id,
-          documentId: id,
-          timestamp: new Date().toISOString(),
-        });
-      }
+      analytics.capture('App: Document Uploaded', {
+        userId: user.id,
+        documentId: id,
+        timestamp: new Date().toISOString(),
+      });
 
-      const pathPrefix =
-        type === EnvelopeType.DOCUMENT
-          ? formatDocumentsPath(team.url)
-          : formatTemplatesPath(team.url);
-
-      await navigate(`${pathPrefix}/${id}/edit`);
+      await navigate(`${formatDocumentsPath(team.url)}/${id}/edit`);
     } catch (err) {
       const error = AppError.parseError(err);
 
       const errorMessage = match(error.code)
-        .with('INVALID_DOCUMENT_FILE', () => t`You cannot upload encrypted PDFs`)
+        .with('INVALID_DOCUMENT_FILE', () => msg`You cannot upload encrypted PDFs`)
         .with(
           AppErrorCode.LIMIT_EXCEEDED,
-          () => t`You have reached your document limit for this month. Please upgrade your plan.`,
+          () => msg`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`,
-        )
-        .otherwise(() => t`An error occurred during upload.`);
+        .otherwise(() => msg`An error occurred while uploading your document.`);
 
       toast({
-        title: t`Error`,
-        description: errorMessage,
+        title: _(msg`Error`),
+        description: _(errorMessage),
         variant: 'destructive',
         duration: 7500,
       });
@@ -147,20 +113,6 @@ export const EnvelopeDropZoneWrapper = ({
       return;
     }
 
-    const maxItemsReached = fileRejections.some((fileRejection) =>
-      fileRejection.errors.some((error) => error.code === DropzoneErrorCode.TooManyFiles),
-    );
-
-    if (maxItemsReached) {
-      toast({
-        title: t`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`,
-        duration: 5000,
-        variant: 'destructive',
-      });
-
-      return;
-    }
-
     // Since users can only upload only one file (no multi-upload), we only handle the first file rejection
     const { file, errors } = fileRejections[0];
 
@@ -188,14 +140,14 @@ export const EnvelopeDropZoneWrapper = ({
     const description = (
       <>
         <span className="font-medium">
-          <Trans>{file.name} couldn't be uploaded:</Trans>
+          {file.name} <Trans>couldn't be uploaded:</Trans>
         </span>
         {errorNodes}
       </>
     );
 
     toast({
-      title: t`Upload failed`,
+      title: _(msg`Upload failed`),
       description,
       duration: 5000,
       variant: 'destructive',
@@ -205,11 +157,17 @@ export const EnvelopeDropZoneWrapper = ({
     accept: {
       'application/pdf': ['.pdf'],
     },
-    multiple: true,
+    //disabled: isUploadDisabled,
+    multiple: false,
     maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
-    maxFiles: maximumEnvelopeItemCount,
-    onDrop: (files) => void onFileDrop(files),
-    onDropRejected: onFileDropRejected,
+    onDrop: ([acceptedFile]) => {
+      if (acceptedFile) {
+        void onFileDrop(acceptedFile);
+      }
+    },
+    onDropRejected: (fileRejections) => {
+      onFileDropRejected(fileRejections);
+    },
     noClick: true,
     noDragEventsBubbling: true,
   });
@@ -223,11 +181,7 @@ export const EnvelopeDropZoneWrapper = ({
         <div className="bg-muted/60 fixed left-0 top-0 z-[9999] h-full w-full backdrop-blur-[4px]">
           <div className="pointer-events-none flex h-full w-full flex-col items-center justify-center">
             <h2 className="text-foreground text-2xl font-semibold">
-              {type === EnvelopeType.DOCUMENT ? (
-                <Trans>Upload Document</Trans>
-              ) : (
-                <Trans>Upload Template</Trans>
-              )}
+              <Trans>Upload Document</Trans>
             </h2>
 
             <p className="text-muted-foreground text-md mt-4">
@@ -262,7 +216,7 @@ export const EnvelopeDropZoneWrapper = ({
           <div className="pointer-events-none flex h-1/2 w-full flex-col items-center justify-center">
             <Loader className="text-primary h-12 w-12 animate-spin" />
             <p className="text-foreground mt-8 font-medium">
-              <Trans>Uploading</Trans>
+              <Trans>Uploading document...</Trans>
             </p>
           </div>
         </div>

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

@@ -441,10 +441,9 @@ export const DocumentEditForm = ({
       >
         <CardContent className="p-2">
           <PDFViewer
-            key={document.envelopeItems[0].id}
-            envelopeItem={document.envelopeItems[0]}
-            token={undefined}
-            version="signed"
+            key={document.documentData.id}
+            documentData={document.documentData}
+            document={document}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

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

@@ -1,16 +1,18 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Button } from '@documenso/ui/primitives/button';
-
-import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentPageViewButtonProps = {
   envelope: TEnvelope;
@@ -19,6 +21,9 @@ export type DocumentPageViewButtonProps = {
 export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps) => {
   const { user } = useSession();
 
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
   const recipient = envelope.recipients.find((recipient) => recipient.email === user.email);
 
   const isRecipient = !!recipient;
@@ -30,12 +35,30 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
   const documentsPath = formatDocumentsPath(envelope.team.url);
   const formatPath = `${documentsPath}/${envelope.id}/edit`;
 
+  const onDownloadClick = async () => {
+    try {
+      // Todo; Envelopes - Support multiple items
+      const envelopeItem = envelope.envelopeItems[0];
+
+      if (!envelopeItem.documentData) {
+        throw new Error('No document available');
+      }
+
+      await downloadPDF({ documentData: envelopeItem.documentData, fileName: envelopeItem.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   return match({
     isRecipient,
     isPending,
     isComplete,
     isSigned,
-    internalVersion: envelope.internalVersion,
   })
     .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
       <Button className="w-full" asChild>
@@ -70,18 +93,10 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
       </Button>
     ))
     .with({ isComplete: true }, () => (
-      <EnvelopeDownloadDialog
-        envelopeId={envelope.id}
-        envelopeStatus={envelope.status}
-        envelopeItems={envelope.envelopeItems}
-        token={recipient?.token}
-        trigger={
-          <Button className="w-full">
-            <Download className="-ml-1 mr-2 inline h-4 w-4" />
-            <Trans>Download</Trans>
-          </Button>
-        }
-      />
+      <Button className="w-full" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        <Trans>Download</Trans>
+      </Button>
     ))
     .otherwise(() => null);
 };

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

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
@@ -15,11 +16,13 @@ import {
 } from 'lucide-react';
 import { Link, useNavigate } from 'react-router';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
   DropdownMenu,
@@ -33,7 +36,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
-import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
@@ -64,6 +66,64 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
 
   const documentsPath = formatDocumentsPath(team.url);
 
+  const onDownloadClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.get.query(
+        {
+          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+        },
+        {
+          context: {
+            teamId: team?.id?.toString(),
+          },
+        },
+      );
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: envelope.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onDownloadOriginalClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.get.query(
+        {
+          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+        },
+        {
+          context: {
+            teamId: team?.id?.toString(),
+          },
+        },
+      );
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: envelope.title, version: 'original' });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   const nonSignedRecipients = envelope.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
@@ -86,20 +146,17 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
           </DropdownMenuItem>
         )}
 
-        <EnvelopeDownloadDialog
-          envelopeId={envelope.id}
-          envelopeStatus={envelope.status}
-          token={recipient?.token}
-          envelopeItems={envelope.envelopeItems}
-          trigger={
-            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
-              <div>
-                <Download className="mr-2 h-4 w-4" />
-                <Trans>Download</Trans>
-              </div>
-            </DropdownMenuItem>
-          }
-        />
+        {isComplete && (
+          <DropdownMenuItem onClick={onDownloadClick}>
+            <Download className="mr-2 h-4 w-4" />
+            <Trans>Download</Trans>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuItem onClick={onDownloadOriginalClick}>
+          <Download className="mr-2 h-4 w-4" />
+          <Trans>Download Original</Trans>
+        </DropdownMenuItem>
 
         <DropdownMenuItem asChild>
           <Link to={`${documentsPath}/${envelope.id}/logs`}>
@@ -173,8 +230,7 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
 
       {isDuplicateDialogOpen && (
         <DocumentDuplicateDialog
-          id={envelope.id}
-          token={recipient?.token}
+          id={mapSecondaryIdToDocumentId(envelope.secondaryId)}
           open={isDuplicateDialogOpen}
           onOpenChange={setDuplicateDialogOpen}
         />

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

@@ -7,7 +7,6 @@ import { DateTime } from 'luxon';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
-import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 
 export type DocumentPageViewInformationProps = {
   userId: number;
@@ -41,10 +40,6 @@ export const DocumentPageViewInformation = ({
           .setLocale(i18n.locales?.[0] || i18n.locale)
           .toRelative(),
       },
-      {
-        description: msg`Document ID (Legacy)`,
-        value: mapSecondaryIdToDocumentId(envelope.secondaryId),
-      },
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, envelope, userId]);

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

@@ -1,10 +1,7 @@
-import { useEffect, useState } from 'react';
-
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
-import { TooltipArrow } from '@radix-ui/react-tooltip';
 import {
   AlertTriangle,
   CheckIcon,
@@ -15,7 +12,7 @@ import {
   PlusIcon,
   UserIcon,
 } from 'lucide-react';
-import { Link, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
@@ -27,12 +24,6 @@ import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { PopoverHover } from '@documenso/ui/primitives/popover';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentPageViewRecipientsProps = {
@@ -46,24 +37,8 @@ export const DocumentPageViewRecipients = ({
 }: DocumentPageViewRecipientsProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-  const [searchParams, setSearchParams] = useSearchParams();
 
   const recipients = envelope.recipients;
-  const [shouldHighlightCopyButtons, setShouldHighlightCopyButtons] = useState(false);
-
-  // Check for action=view-tokens query parameter and set highlighting state
-  useEffect(() => {
-    const hasViewTokensAction = searchParams.get('action') === 'copy-links';
-
-    if (hasViewTokensAction) {
-      setShouldHighlightCopyButtons(true);
-
-      // Remove the query parameter immediately
-      const params = new URLSearchParams(searchParams);
-      params.delete('action');
-      setSearchParams(params);
-    }
-  }, [searchParams, setSearchParams]);
 
   return (
     <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
@@ -94,7 +69,7 @@ export const DocumentPageViewRecipients = ({
           </li>
         )}
 
-        {recipients.map((recipient, i) => (
+        {recipients.map((recipient) => (
           <li key={recipient.id} className="flex items-center justify-between px-4 py-2.5 text-sm">
             <AvatarWithText
               avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
@@ -184,33 +159,15 @@ export const DocumentPageViewRecipients = ({
               {envelope.status === DocumentStatus.PENDING &&
                 recipient.signingStatus === SigningStatus.NOT_SIGNED &&
                 recipient.role !== RecipientRole.CC && (
-                  <TooltipProvider>
-                    <Tooltip open={shouldHighlightCopyButtons && i === 0}>
-                      <TooltipTrigger asChild>
-                        <div
-                          className={shouldHighlightCopyButtons ? 'animate-pulse' : ''}
-                          onClick={() => setShouldHighlightCopyButtons(false)}
-                        >
-                          <CopyTextButton
-                            value={formatSigningLink(recipient.token)}
-                            onCopySuccess={() => {
-                              toast({
-                                title: _(msg`Copied to clipboard`),
-                                description: _(
-                                  msg`The signing link has been copied to your clipboard.`,
-                                ),
-                              });
-                              setShouldHighlightCopyButtons(false);
-                            }}
-                          />
-                        </div>
-                      </TooltipTrigger>
-                      <TooltipContent sideOffset={2}>
-                        <Trans>Copy Signing Links</Trans>
-                        <TooltipArrow className="fill-background" />
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                  <CopyTextButton
+                    value={formatSigningLink(recipient.token)}
+                    onCopySuccess={() => {
+                      toast({
+                        title: _(msg`Copied to clipboard`),
+                        description: _(msg`The signing link has been copied to your clipboard.`),
+                      });
+                    }}
+                  />
                 )}
             </div>
           </li>

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

@@ -3,7 +3,6 @@ import { useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { EnvelopeType } from '@prisma/client';
 import { useNavigate, useParams } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -14,11 +13,11 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
 import { cn } from '@documenso/ui/lib/utils';
-import { DocumentUploadButton as DocumentUploadButtonPrimitive } from '@documenso/ui/primitives/document-upload-button';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
 import {
   Tooltip,
   TooltipContent,
@@ -29,11 +28,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
 
-export type DocumentUploadButtonLegacyProps = {
+export type DocumentUploadButtonProps = {
   className?: string;
 };
 
-export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLegacyProps) => {
+export const DocumentUploadButton = ({ className }: DocumentUploadButtonProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
@@ -74,18 +73,14 @@ export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLe
     try {
       setIsLoading(true);
 
-      const payload = {
+      const response = await putPdfFile(file);
+
+      const { legacyDocumentId: id } = await createDocument({
         title: file.name,
+        documentDataId: response.id,
         timezone: userTimezone,
         folderId: folderId ?? undefined,
-      } satisfies TCreateDocumentPayloadSchema;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-      formData.append('file', file);
-
-      const { envelopeId: id } = await createDocument(formData);
+      });
 
       void refreshLimits();
 
@@ -113,10 +108,6 @@ export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLe
           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`,
-        )
         .otherwise(() => msg`An error occurred while uploading your document.`);
 
       toast({
@@ -145,14 +136,12 @@ export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLe
         <Tooltip>
           <TooltipTrigger asChild>
             <div>
-              <DocumentUploadButtonPrimitive
+              <DocumentDropzone
                 loading={isLoading}
                 disabled={remaining.documents === 0 || !user.emailVerified}
                 disabledMessage={disabledMessage}
                 onDrop={async (files) => onFileDrop(files[0])}
                 onDropRejected={onFileDropRejected}
-                type={EnvelopeType.DOCUMENT}
-                internalVersion="1"
               />
             </div>
           </TooltipTrigger>

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

@@ -4,7 +4,6 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
-import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
 import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -14,11 +13,11 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 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';
 import { cn } from '@documenso/ui/lib/utils';
-import { DocumentUploadButton } from '@documenso/ui/primitives/document-upload-button';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
 import {
   Tooltip,
   TooltipContent,
@@ -52,7 +51,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
     (timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone,
   );
 
-  const { quota, remaining, refreshLimits, maximumEnvelopeItemCount } = useLimits();
+  const { quota, remaining, refreshLimits } = useLimits();
 
   const [isLoading, setIsLoading] = useState(false);
 
@@ -70,7 +69,6 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
     if (!user.emailVerified) {
       return msg`Verify your email to upload documents.`;
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [remaining.documents, user.emailVerified, team]);
 
@@ -78,24 +76,35 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
     try {
       setIsLoading(true);
 
-      const payload = {
+      const result = await Promise.all(
+        files.map(async (file) => {
+          try {
+            const response = await putPdfFile(file);
+
+            return {
+              title: file.name,
+              documentDataId: response.id,
+            };
+          } catch (err) {
+            console.error(err);
+            throw new Error('Failed to upload document');
+          }
+        }),
+      );
+
+      const envelopeItemsToCreate = result.filter(
+        (item): item is { title: string; documentDataId: string } => item !== undefined,
+      );
+
+      const { id } = await createEnvelope({
         folderId,
         type,
         title: files[0].name,
+        items: envelopeItemsToCreate,
         meta: {
           timezone: userTimezone,
         },
-      } satisfies TCreateEnvelopePayload;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-
-      for (const file of files) {
-        formData.append('files', file);
-      }
-
-      const { id } = await createEnvelope(formData).catch((error) => {
+      }).catch((error) => {
         console.error(error);
 
         throw error;
@@ -129,10 +138,6 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
           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`,
-        )
         .otherwise(() => t`An error occurred while uploading your document.`);
 
       toast({
@@ -146,23 +151,12 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
     }
   };
 
-  const onFileDropRejected = (fileRejections: FileRejection[]) => {
-    const maxItemsReached = fileRejections.some((fileRejection) =>
-      fileRejection.errors.some((error) => error.code === DropzoneErrorCode.TooManyFiles),
-    );
-
-    if (maxItemsReached) {
-      toast({
-        title: t`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`,
-        duration: 5000,
-        variant: 'destructive',
-      });
-
-      return;
-    }
-
+  const onFileDropRejected = () => {
     toast({
-      title: t`Upload failed`,
+      title:
+        type === EnvelopeType.DOCUMENT
+          ? t`Your document failed to upload.`
+          : t`Your template failed to upload.`,
       description: t`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
       duration: 5000,
       variant: 'destructive',
@@ -175,15 +169,13 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
         <Tooltip>
           <TooltipTrigger asChild>
             <div>
-              <DocumentUploadButton
+              <DocumentDropzone
                 loading={isLoading}
                 disabled={remaining.documents === 0 || !user.emailVerified}
                 disabledMessage={disabledMessage}
                 onDrop={onFileDrop}
                 onDropRejected={onFileDropRejected}
-                type={type}
-                internalVersion="2"
-                maxFiles={maximumEnvelopeItemCount}
+                type="envelope"
               />
             </div>
           </TooltipTrigger>

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx

@@ -96,7 +96,7 @@ export const EnvelopeEditorFieldDragDrop = ({
   selectedRecipientId,
   selectedEnvelopeItemId,
 }: EnvelopeEditorFieldDragDropProps) => {
-  const { envelope, editorFields, isTemplate, getRecipientColorKey } = useCurrentEnvelopeEditor();
+  const { envelope, editorFields, isTemplate } = useCurrentEnvelopeEditor();
 
   const { t } = useLingui();
 
@@ -262,10 +262,6 @@ export const EnvelopeEditorFieldDragDrop = ({
     };
   }, [onMouseClick, onMouseMove, selectedField]);
 
-  const selectedRecipientColor = useMemo(() => {
-    return selectedRecipientId ? getRecipientColorKey(selectedRecipientId) : 'green';
-  }, [selectedRecipientId, getRecipientColorKey]);
-
   return (
     <>
       <div className="grid grid-cols-2 gap-x-2 gap-y-2.5">
@@ -277,23 +273,12 @@ export const EnvelopeEditorFieldDragDrop = ({
             onClick={() => setSelectedField(field.type)}
             onMouseDown={() => setSelectedField(field.type)}
             data-selected={selectedField === field.type ? true : undefined}
-            className={cn(
-              'border-border group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors',
-              RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton,
-            )}
+            className="group flex h-12 cursor-pointer items-center justify-center rounded-lg border border-gray-200 px-4 transition-colors hover:border-blue-300 hover:bg-blue-50"
           >
             <p
               className={cn(
-                'text-muted-foreground font-noto group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
                 field.className,
-                {
-                  'group-hover:text-recipient-green': selectedRecipientColor === 'green',
-                  'group-hover:text-recipient-blue': selectedRecipientColor === 'blue',
-                  'group-hover:text-recipient-purple': selectedRecipientColor === 'purple',
-                  'group-hover:text-recipient-orange': selectedRecipientColor === 'orange',
-                  'group-hover:text-recipient-yellow': selectedRecipientColor === 'yellow',
-                  'group-hover:text-recipient-pink': selectedRecipientColor === 'pink',
-                },
               )}
             >
               {field.type !== FieldType.SIGNATURE && <field.icon className="h-4 w-4" />}
@@ -306,9 +291,9 @@ export const EnvelopeEditorFieldDragDrop = ({
       {selectedField && (
         <div
           className={cn(
-            'text-muted-foreground dark:text-muted-background font-noto pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
-            RECIPIENT_COLOR_STYLES[selectedRecipientColor].base,
-            selectedField === FieldType.SIGNATURE && 'font-signature',
+            'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
+            // selectedSignerStyles?.base,
+            RECIPIENT_COLOR_STYLES.yellow.base, // Todo: Envelopes
             {
               '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
               'dark:text-black/60': isFieldWithinBounds,

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -3,12 +3,15 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import type { FieldType } from '@prisma/client';
 import Konva from 'konva';
+import type { Layer } from 'konva/lib/Layer';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { Transformer } from 'konva/lib/shapes/Transformer';
 import { CopyPlusIcon, SquareStackIcon, TrashIcon } from 'lucide-react';
+import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
+import { usePageContext } from 'react-pdf';
 
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 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';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
@@ -18,16 +21,32 @@ import {
   convertPixelToPercentage,
 } 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 { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 
 import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 
 export default function EnvelopeEditorFieldsPageRenderer() {
-  const { t, i18n } = useLingui();
-  const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
-  const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
+  const pageContext = usePageContext();
 
+  if (!pageContext) {
+    throw new Error('Unable to find Page context.');
+  }
+
+  const { _className, page, rotate, scale } = pageContext;
+
+  if (!page) {
+    throw new Error('Attempted to render page canvas, but no page was specified.');
+  }
+
+  const { t } = useLingui();
+  const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+  const konvaContainer = useRef<HTMLDivElement>(null);
+
+  const stage = useRef<Konva.Stage | null>(null);
+  const pageLayer = useRef<Layer | null>(null);
   const interactiveTransformer = useRef<Transformer | null>(null);
 
   const [selectedKonvaFieldGroups, setSelectedKonvaFieldGroups] = useState<Konva.Group[]>([]);
@@ -35,17 +54,10 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   const [isFieldChanging, setIsFieldChanging] = useState(false);
   const [pendingFieldCreation, setPendingFieldCreation] = useState<Konva.Rect | null>(null);
 
-  const {
-    stage,
-    pageLayer,
-    canvasElement,
-    konvaContainer,
-    pageContext,
-    scaledViewport,
-    unscaledViewport,
-  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer));
-
-  const { _className, scale } = pageContext;
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotate }),
+    [page, rotate, scale],
+  );
 
   const localPageFields = useMemo(
     () =>
@@ -56,7 +68,47 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     [editorFields.localFields, pageContext.pageNumber],
   );
 
+  // Custom renderer from Konva examples.
+  useEffect(
+    function drawPageOnCanvas() {
+      if (!page) {
+        return;
+      }
+
+      const { current: canvas } = canvasElement;
+      const { current: container } = konvaContainer;
+
+      if (!canvas || !container) {
+        return;
+      }
+
+      const renderContext: RenderParameters = {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
+        viewport,
+      };
+
+      const cancellable = page.render(renderContext);
+      const runningTask = cancellable;
+
+      cancellable.promise.catch(() => {
+        // Intentionally empty
+      });
+
+      void cancellable.promise.then(() => {
+        createPageCanvas(container);
+      });
+
+      return () => {
+        runningTask.cancel();
+      };
+    },
+    [page, viewport],
+  );
+
   const handleResizeOrMove = (event: KonvaEventObject<Event>) => {
+    console.log('Field resized or moved');
+
     const { current: container } = canvasElement;
 
     if (!container) {
@@ -68,7 +120,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     const fieldGroup = event.target as Konva.Group;
     const fieldFormId = fieldGroup.id();
 
-    // Note: This values are scaled.
     const {
       width: fieldPixelWidth,
       height: fieldPixelHeight,
@@ -79,8 +130,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       skipShadow: true,
     });
 
-    const pageHeight = scaledViewport.height;
-    const pageWidth = scaledViewport.width;
+    const { height: pageHeight, width: pageWidth } = getBoundingClientRect(container);
 
     // Calculate x and y as a percentage of the page width and height
     const positionPercentX = (fieldX / pageWidth) * 100;
@@ -103,6 +153,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       fieldUpdates.height = fieldPageHeight;
     }
 
+    // Todo: envelopes Use id
     editorFields.updateFieldByFormId(fieldFormId, fieldUpdates);
 
     // Select the field if it is not already selected.
@@ -113,8 +164,9 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     pageLayer.current?.batchDraw();
   };
 
-  const unsafeRenderFieldOnLayer = (field: TLocalField) => {
-    if (!pageLayer.current) {
+  const renderFieldOnLayer = (field: TLocalField) => {
+    if (!pageLayer.current || !interactiveTransformer.current) {
+      console.error('Layer not loaded yet');
       return;
     }
 
@@ -122,8 +174,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     const isFieldEditable =
       recipient !== undefined && canRecipientFieldsBeModified(recipient, envelope.fields);
 
-    const { fieldGroup } = renderField({
-      scale,
+    const { fieldGroup, isFirstRender } = renderField({
       pageLayer: pageLayer.current,
       field: {
         renderId: field.formId,
@@ -132,9 +183,8 @@ export default function EnvelopeEditorFieldsPageRenderer() {
         inserted: false,
         fieldMeta: field.fieldMeta,
       },
-      translations: getClientSideFieldTranslations(i18n),
-      pageWidth: unscaledViewport.width,
-      pageHeight: unscaledViewport.height,
+      pageWidth: viewport.width,
+      pageHeight: viewport.height,
       color: getRecipientColorKey(field.recipientId),
       editable: isFieldEditable,
       mode: 'edit',
@@ -159,24 +209,25 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     fieldGroup.on('dragend', handleResizeOrMove);
   };
 
-  const renderFieldOnLayer = (field: TLocalField) => {
-    try {
-      unsafeRenderFieldOnLayer(field);
-    } catch (err) {
-      console.error(err);
-      setRenderError(true);
-    }
-  };
-
   /**
-   * Initialize the Konva page canvas and all fields and interactions.
+   * Create the initial Konva page canvas and initialize all fields and interactions.
    */
-  const createPageCanvas = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
+  const createPageCanvas = (container: HTMLDivElement) => {
+    stage.current = new Konva.Stage({
+      container,
+      width: viewport.width,
+      height: viewport.height,
+    });
+
+    // Create the main layer for interactive elements.
+    pageLayer.current = new Konva.Layer();
+    stage.current?.add(pageLayer.current);
+
     // Initialize snap guides layer
     // snapGuideLayer.current = initializeSnapGuides(stage.current);
 
     // Add transformer for resizing and rotating.
-    interactiveTransformer.current = createInteractiveTransformer(currentStage, currentPageLayer);
+    interactiveTransformer.current = createInteractiveTransformer(stage.current, pageLayer.current);
 
     // Render the fields.
     for (const field of localPageFields) {
@@ -184,12 +235,12 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     }
 
     // Handle stage click to deselect.
-    currentStage.on('mousedown', (e) => {
+    stage.current?.on('click', (e) => {
       removePendingField();
 
       if (e.target === stage.current) {
         setSelectedFields([]);
-        currentPageLayer.batchDraw();
+        pageLayer.current?.batchDraw();
       }
     });
 
@@ -216,12 +267,12 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       setSelectedFields([e.target]);
     };
 
-    currentStage.on('dragstart', onDragStartOrEnd);
-    currentStage.on('dragend', onDragStartOrEnd);
-    currentStage.on('transformstart', () => setIsFieldChanging(true));
-    currentStage.on('transformend', () => setIsFieldChanging(false));
+    stage.current?.on('dragstart', onDragStartOrEnd);
+    stage.current?.on('dragend', onDragStartOrEnd);
+    stage.current?.on('transformstart', () => setIsFieldChanging(true));
+    stage.current?.on('transformend', () => setIsFieldChanging(false));
 
-    currentPageLayer.batchDraw();
+    pageLayer.current.batchDraw();
   };
 
   /**
@@ -233,10 +284,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    * - Selecting multiple fields
    * - Selecting empty area to create fields
    */
-  const createInteractiveTransformer = (
-    currentStage: Konva.Stage,
-    currentPageLayer: Konva.Layer,
-  ) => {
+  const createInteractiveTransformer = (stage: Konva.Stage, layer: Konva.Layer) => {
     const transformer = new Konva.Transformer({
       rotateEnabled: false,
       keepRatio: false,
@@ -253,36 +301,36 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       },
     });
 
-    currentPageLayer.add(transformer);
+    layer.add(transformer);
 
     // Add selection rectangle.
     const selectionRectangle = new Konva.Rect({
       fill: 'rgba(24, 160, 251, 0.3)',
       visible: false,
     });
-    currentPageLayer.add(selectionRectangle);
+    layer.add(selectionRectangle);
 
     let x1: number;
     let y1: number;
     let x2: number;
     let y2: number;
 
-    currentStage.on('mousedown touchstart', (e) => {
+    stage.on('mousedown touchstart', (e) => {
       // do nothing if we mousedown on any shape
-      if (e.target !== currentStage) {
+      if (e.target !== stage) {
         return;
       }
 
-      const pointerPosition = currentStage.getPointerPosition();
+      const pointerPosition = stage.getPointerPosition();
 
       if (!pointerPosition) {
         return;
       }
 
-      x1 = pointerPosition.x / scale;
-      y1 = pointerPosition.y / scale;
-      x2 = pointerPosition.x / scale;
-      y2 = pointerPosition.y / scale;
+      x1 = pointerPosition.x;
+      y1 = pointerPosition.y;
+      x2 = pointerPosition.x;
+      y2 = pointerPosition.y;
 
       selectionRectangle.setAttrs({
         x: x1,
@@ -293,7 +341,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       });
     });
 
-    currentStage.on('mousemove touchmove', () => {
+    stage.on('mousemove touchmove', () => {
       // do nothing if we didn't start selection
       if (!selectionRectangle.visible()) {
         return;
@@ -301,14 +349,14 @@ export default function EnvelopeEditorFieldsPageRenderer() {
 
       selectionRectangle.moveToTop();
 
-      const pointerPosition = currentStage.getPointerPosition();
+      const pointerPosition = stage.getPointerPosition();
 
       if (!pointerPosition) {
         return;
       }
 
-      x2 = pointerPosition.x / scale;
-      y2 = pointerPosition.y / scale;
+      x2 = pointerPosition.x;
+      y2 = pointerPosition.y;
 
       selectionRectangle.setAttrs({
         x: Math.min(x1, x2),
@@ -318,7 +366,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       });
     });
 
-    currentStage.on('mouseup touchend', () => {
+    stage.on('mouseup touchend', () => {
       // do nothing if we didn't start selection
       if (!selectionRectangle.visible()) {
         return;
@@ -329,41 +377,38 @@ export default function EnvelopeEditorFieldsPageRenderer() {
         selectionRectangle.visible(false);
       });
 
-      const stageFieldGroups = currentStage.find('.field-group') || [];
+      const stageFieldGroups = stage.find('.field-group') || [];
       const box = selectionRectangle.getClientRect();
       const selectedFieldGroups = stageFieldGroups.filter(
         (shape) => Konva.Util.haveIntersection(box, shape.getClientRect()) && shape.draggable(),
       );
       setSelectedFields(selectedFieldGroups);
 
-      const unscaledBoxWidth = box.width / scale;
-      const unscaledBoxHeight = box.height / scale;
-
       // Create a field if no items are selected or the size is too small.
       if (
         selectedFieldGroups.length === 0 &&
         canvasElement.current &&
-        unscaledBoxWidth > MIN_FIELD_WIDTH_PX &&
-        unscaledBoxHeight > MIN_FIELD_HEIGHT_PX &&
+        box.width > MIN_FIELD_WIDTH_PX &&
+        box.height > MIN_FIELD_HEIGHT_PX &&
         editorFields.selectedRecipient &&
         canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields)
       ) {
         const pendingFieldCreation = new Konva.Rect({
           name: 'pending-field-creation',
-          x: box.x / scale,
-          y: box.y / scale,
-          width: unscaledBoxWidth,
-          height: unscaledBoxHeight,
+          x: box.x,
+          y: box.y,
+          width: box.width,
+          height: box.height,
           fill: 'rgba(24, 160, 251, 0.3)',
         });
 
-        currentPageLayer.add(pendingFieldCreation);
+        layer.add(pendingFieldCreation);
         setPendingFieldCreation(pendingFieldCreation);
       }
     });
 
     // Clicks should select/deselect shapes
-    currentStage.on('click tap', function (e) {
+    stage.on('click tap', function (e) {
       // if we are selecting with rect, do nothing
       if (
         selectionRectangle.visible() &&
@@ -374,7 +419,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       }
 
       // If empty area clicked, remove all selections
-      if (e.target === stage.current) {
+      if (e.target === stage) {
         setSelectedFields([]);
         return;
       }
@@ -423,15 +468,20 @@ export default function EnvelopeEditorFieldsPageRenderer() {
         group.name() === 'field-group' &&
         !localPageFields.some((field) => field.formId === group.id())
       ) {
+        console.log('Field removed, removing from canvas');
         group.destroy();
       }
     });
 
     // If it exists, rerender.
     localPageFields.forEach((field) => {
+      console.log('Field created/updated, rendering on canvas');
       renderFieldOnLayer(field);
     });
 
+    // If it doesn't exist, render it.
+    //
+
     // Rerender the transformer
     interactiveTransformer.current?.forceUpdate();
 
@@ -505,13 +555,15 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       return;
     }
 
+    const { height: pageHeight, width: pageWidth } = getBoundingClientRect(canvasElement.current);
+
     const { fieldX, fieldY, fieldWidth, fieldHeight } = convertPixelToPercentage({
       width: pixelWidth,
       height: pixelHeight,
       positionX: pixelX,
       positionY: pixelY,
-      pageWidth: unscaledViewport.width,
-      pageHeight: unscaledViewport.height,
+      pageWidth,
+      pageHeight,
     });
 
     editorFields.addField({
@@ -545,10 +597,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   }
 
   return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
+    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
       {selectedKonvaFieldGroups.length > 0 &&
         interactiveTransformer.current &&
         !isFieldChanging && (
@@ -600,30 +649,23 @@ export default function EnvelopeEditorFieldsPageRenderer() {
           </div>
         )}
 
+      {/* Todo: Envelopes - This will not overflow the page when close to edges */}
       {pendingFieldCreation && (
         <div
           style={{
             position: 'absolute',
-            top:
-              pendingFieldCreation.y() * scale +
-              pendingFieldCreation.getClientRect().height +
-              5 +
-              'px',
-            left:
-              pendingFieldCreation.x() * scale +
-              pendingFieldCreation.getClientRect().width / 2 +
-              'px',
+            top: pendingFieldCreation.y() + pendingFieldCreation.getClientRect().height + 5 + 'px',
+            left: pendingFieldCreation.x() + pendingFieldCreation.getClientRect().width / 2 + 'px',
             transform: 'translateX(-50%)',
             zIndex: 50,
           }}
-          // Don't use darkmode for this component, it should look the same for both light/dark modes.
-          className="grid w-max grid-cols-5 gap-x-1 gap-y-0.5 rounded-md border border-gray-300 bg-white p-1 text-gray-500 shadow-sm"
+          className="text-muted-foreground grid w-fit grid-cols-5 gap-x-1 gap-y-0.5 rounded-md border bg-white p-1 shadow-sm"
         >
           {fieldButtonList.map((field) => (
             <button
               key={field.type}
               onClick={() => createFieldFromPendingTemplate(pendingFieldCreation, field.type)}
-              className="col-span-1 w-full flex-shrink-0 rounded-sm px-2 py-1 text-xs hover:bg-gray-100 hover:text-gray-600"
+              className="hover:text-foreground col-span-1 w-full flex-shrink-0 rounded-sm px-2 py-1 text-xs hover:bg-gray-100"
             >
               {t(field.name)}
             </button>
@@ -631,15 +673,13 @@ export default function EnvelopeEditorFieldsPageRenderer() {
         </div>
       )}
 
-      {/* The element Konva will inject it's canvas into. */}
-      <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
+      <div className="konva-container absolute inset-0 z-10" ref={konvaContainer}></div>
 
-      {/* Canvas the PDF will be rendered on. */}
       <canvas
         className={`${_className}__canvas z-0`}
+        height={viewport.height}
         ref={canvasElement}
-        height={scaledViewport.height}
-        width={scaledViewport.width}
+        width={viewport.width}
       />
     </div>
   );

apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx

@@ -13,6 +13,7 @@ import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -23,6 +24,7 @@ import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
 import { BrandingLogo } from '~/components/general/branding-logo';
 import { DocumentAttachmentsPopover } from '~/components/general/document/document-attachments-popover';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
+import { useCurrentTeam } from '~/providers/team';
 
 import { TemplateDirectLinkBadge } from '../template/template-direct-link-badge';
 import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
@@ -30,34 +32,30 @@ import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
 export default function EnvelopeEditorHeader() {
   const { t } = useLingui();
 
-  const {
-    envelope,
-    isDocument,
-    isTemplate,
-    updateEnvelope,
-    autosaveError,
-    relativePath,
-    editorFields,
-  } = useCurrentEnvelopeEditor();
+  const team = useCurrentTeam();
+
+  const { envelope, isDocument, isTemplate, updateEnvelope, autosaveError } =
+    useCurrentEnvelopeEditor();
+
+  // Todo: Envelopes this probably won't work with embed? Maybe hide the back items when no team?
+
+  const rootPath = isDocument ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
 
   return (
-    <nav className="bg-background border-border w-full border-b px-4 py-3 md:px-6">
+    <nav className="w-full border-b border-gray-200 bg-white px-6 py-3">
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-4">
           <Link to="/">
             <BrandingLogo className="h-6 w-auto" />
           </Link>
           <Separator orientation="vertical" className="h-6" />
-
           <div className="flex items-center space-x-2">
             <EnvelopeItemTitleInput
               disabled={envelope.status !== DocumentStatus.DRAFT}
               value={envelope.title}
               onChange={(title) => {
                 updateEnvelope({
-                  data: {
-                    title,
-                  },
+                  title,
                 });
               }}
               placeholder={t`Envelope Title`}
@@ -134,7 +132,7 @@ export default function EnvelopeEditorHeader() {
         </div>
 
         <div className="flex items-center space-x-2">
-          <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" />
+          <DocumentAttachmentsPopover envelopeId={envelope.id} />
 
           <EnvelopeEditorSettingsDialog
             trigger={
@@ -147,11 +145,7 @@ export default function EnvelopeEditorHeader() {
           {isDocument && (
             <>
               <EnvelopeDistributeDialog
-                envelope={{
-                  ...envelope,
-                  fields: editorFields.localFields,
-                }}
-                documentRootPath={relativePath.documentRootPath}
+                envelope={envelope}
                 trigger={
                   <Button size="sm">
                     <SendIcon className="mr-2 h-4 w-4" />
@@ -174,11 +168,10 @@ export default function EnvelopeEditorHeader() {
 
           {isTemplate && (
             <TemplateUseDialog
-              envelopeId={envelope.id}
               templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
               templateSigningOrder={envelope.documentMeta?.signingOrder}
               recipients={envelope.recipients}
-              documentRootPath={relativePath.documentRootPath}
+              documentRootPath={rootPath}
               trigger={
                 <Button size="sm">
                   <Trans>Use Template</Trans>

apps/remix/app/components/general/envelope-editor/envelope-editor-page-fields.tsx

@@ -5,7 +5,6 @@ import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { FieldType, RecipientRole } from '@prisma/client';
 import { FileTextIcon } from 'lucide-react';
-import { Link } from 'react-router';
 import { isDeepEqual } from 'remeda';
 import { match } from 'ts-pattern';
 
@@ -21,14 +20,12 @@ import type {
   TNameFieldMeta,
   TNumberFieldMeta,
   TRadioFieldMeta,
-  TSignatureFieldMeta,
   TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -40,7 +37,6 @@ import { EditorFieldInitialsForm } from '~/components/forms/editor/editor-field-
 import { EditorFieldNameForm } from '~/components/forms/editor/editor-field-name-form';
 import { EditorFieldNumberForm } from '~/components/forms/editor/editor-field-number-form';
 import { EditorFieldRadioForm } from '~/components/forms/editor/editor-field-radio-form';
-import { EditorFieldSignatureForm } from '~/components/forms/editor/editor-field-signature-form';
 import { EditorFieldTextForm } from '~/components/forms/editor/editor-field-text-form';
 
 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
@@ -64,8 +60,8 @@ const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
   [FieldType.DROPDOWN]: msg`Dropdown Settings`,
 };
 
-export const EnvelopeEditorFieldsPage = () => {
-  const { envelope, editorFields, relativePath } = useCurrentEnvelopeEditor();
+export const EnvelopeEditorPageFields = () => {
+  const { envelope, editorFields } = useCurrentEnvelopeEditor();
 
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
@@ -108,39 +104,14 @@ export const EnvelopeEditorFieldsPage = () => {
 
   return (
     <div className="relative flex h-full">
-      <div className="flex w-full flex-col overflow-y-auto">
+      <div className="flex w-full flex-col">
         {/* Horizontal envelope item selector */}
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex flex-col items-center justify-center">
-          {envelope.recipients.length === 0 && (
-            <Alert
-              variant="neutral"
-              className="border-border bg-background mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border"
-            >
-              <div className="flex flex-col gap-1">
-                <AlertTitle>
-                  <Trans>Missing Recipients</Trans>
-                </AlertTitle>
-                <AlertDescription>
-                  <Trans>You need at least one recipient to add fields</Trans>
-                </AlertDescription>
-              </div>
-
-              <Button asChild variant="outline">
-                <Link to={`${relativePath.editorPath}`}>
-                  <Trans>Add Recipients</Trans>
-                </Link>
-              </Button>
-            </Alert>
-          )}
-
+        <div className="mt-4 flex justify-center">
           {currentEnvelopeItem !== null ? (
-            <PDFViewerKonvaLazy
-              renderer="editor"
-              customPageRenderer={EnvelopeEditorFieldsPageRenderer}
-            />
+            <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
           ) : (
             <div className="flex flex-col items-center justify-center py-32">
               <FileTextIcon className="text-muted-foreground h-10 w-10" />
@@ -156,23 +127,31 @@ export const EnvelopeEditorFieldsPage = () => {
       </div>
 
       {/* Right Section - Form Fields Panel */}
-      {currentEnvelopeItem && envelope.recipients.length > 0 && (
-        <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
+      {currentEnvelopeItem && (
+        <div className="sticky top-0 h-[calc(100vh-73px)] w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
           {/* Recipient selector section. */}
           <section className="px-4">
-            <h3 className="text-foreground mb-2 text-sm font-semibold">
+            <h3 className="mb-2 text-sm font-semibold text-gray-900">
               <Trans>Selected Recipient</Trans>
             </h3>
 
-            <RecipientSelector
-              selectedRecipient={editorFields.selectedRecipient}
-              onSelectedRecipientChange={(recipient) =>
-                editorFields.setSelectedRecipient(recipient.id)
-              }
-              recipients={envelope.recipients}
-              className="w-full"
-              align="end"
-            />
+            {envelope.recipients.length === 0 ? (
+              <Alert variant="warning">
+                <AlertDescription>
+                  <Trans>You need at least one recipient to add fields</Trans>
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <RecipientSelector
+                selectedRecipient={editorFields.selectedRecipient}
+                onSelectedRecipientChange={(recipient) =>
+                  editorFields.setSelectedRecipient(recipient.id)
+                }
+                recipients={envelope.recipients}
+                className="w-full"
+                align="end"
+              />
+            )}
 
             {editorFields.selectedRecipient &&
               !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (
@@ -191,7 +170,7 @@ export const EnvelopeEditorFieldsPage = () => {
 
           {/* Add fields section. */}
           <section className="px-4">
-            <h3 className="text-foreground mb-2 text-sm font-semibold">
+            <h3 className="mb-2 text-sm font-semibold text-gray-900">
               <Trans>Add Fields</Trans>
             </h3>
 
@@ -203,7 +182,7 @@ export const EnvelopeEditorFieldsPage = () => {
 
           {/* Field details section. */}
           <AnimateGenericFadeInOut key={editorFields.selectedField?.formId}>
-            {selectedField && (
+            {selectedField && selectedField.type !== FieldType.SIGNATURE && (
               <section>
                 <Separator className="my-4" />
 
@@ -213,12 +192,6 @@ export const EnvelopeEditorFieldsPage = () => {
                   </h3>
 
                   {match(selectedField.type)
-                    .with(FieldType.SIGNATURE, () => (
-                      <EditorFieldSignatureForm
-                        value={selectedField?.fieldMeta as TSignatureFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
                     .with(FieldType.CHECKBOX, () => (
                       <EditorFieldCheckboxForm
                         value={selectedField?.fieldMeta as TCheckboxFieldMeta | undefined}

apps/remix/app/components/general/envelope-editor/envelope-editor-page-preview-renderer.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import Konva from 'konva';
+import type { Layer } from 'konva/lib/Layer';
+import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
+import { usePageContext } from 'react-pdf';
+
+import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
+
+export default function EnvelopeEditorPagePreviewRenderer() {
+  const pageContext = usePageContext();
+
+  if (!pageContext) {
+    throw new Error('Unable to find Page context.');
+  }
+
+  const { _className, page, rotate, scale } = pageContext;
+
+  if (!page) {
+    throw new Error('Attempted to render page canvas, but no page was specified.');
+  }
+
+  const { editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+  const konvaContainer = useRef<HTMLDivElement>(null);
+
+  const stage = useRef<Konva.Stage | null>(null);
+  const pageLayer = useRef<Layer | null>(null);
+
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotate }),
+    [page, rotate, scale],
+  );
+
+  const localPageFields = useMemo(
+    () =>
+      editorFields.localFields.filter(
+        (field) =>
+          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+      ),
+    [editorFields.localFields, pageContext.pageNumber],
+  );
+
+  // Custom renderer from Konva examples.
+  useEffect(
+    function drawPageOnCanvas() {
+      if (!page) {
+        return;
+      }
+
+      const { current: canvas } = canvasElement;
+      const { current: container } = konvaContainer;
+
+      if (!canvas || !container) {
+        return;
+      }
+
+      const renderContext: RenderParameters = {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
+        viewport,
+      };
+
+      const cancellable = page.render(renderContext);
+      const runningTask = cancellable;
+
+      cancellable.promise.catch(() => {
+        // Intentionally empty
+      });
+
+      void cancellable.promise.then(() => {
+        createPageCanvas(container);
+      });
+
+      return () => {
+        runningTask.cancel();
+      };
+    },
+    [page, viewport],
+  );
+
+  const renderFieldOnLayer = (field: TLocalField) => {
+    if (!pageLayer.current) {
+      console.error('Layer not loaded yet');
+      return;
+    }
+
+    renderField({
+      pageLayer: pageLayer.current,
+      field: {
+        renderId: field.formId,
+        ...field,
+        customText: '',
+        inserted: false,
+        fieldMeta: field.fieldMeta,
+      },
+      pageWidth: viewport.width,
+      pageHeight: viewport.height,
+      color: getRecipientColorKey(field.recipientId),
+      editable: false,
+      mode: 'export',
+    });
+  };
+
+  /**
+   * Create the initial Konva page canvas and initialize all fields and interactions.
+   */
+  const createPageCanvas = (container: HTMLDivElement) => {
+    stage.current = new Konva.Stage({
+      container,
+      width: viewport.width,
+      height: viewport.height,
+    });
+
+    // Create the main layer for interactive elements.
+    pageLayer.current = new Konva.Layer();
+    stage.current?.add(pageLayer.current);
+
+    // Render the fields.
+    for (const field of localPageFields) {
+      renderFieldOnLayer(field);
+    }
+
+    pageLayer.current.batchDraw();
+  };
+
+  /**
+   * Render fields when they are added or removed from the localFields.
+   */
+  useEffect(() => {
+    if (!pageLayer.current || !stage.current) {
+      return;
+    }
+
+    // If doesn't exist in localFields, destroy it since it's been deleted.
+    pageLayer.current.find('Group').forEach((group) => {
+      if (
+        group.name() === 'field-group' &&
+        !localPageFields.some((field) => field.formId === group.id())
+      ) {
+        console.log('Field removed, removing from canvas');
+        group.destroy();
+      }
+    });
+
+    // If it exists, rerender.
+    localPageFields.forEach((field) => {
+      console.log('Field created/updated, rendering on canvas');
+      renderFieldOnLayer(field);
+    });
+
+    pageLayer.current.batchDraw();
+  }, [localPageFields]);
+
+  if (!currentEnvelopeItem) {
+    return null;
+  }
+
+  return (
+    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
+      <div className="konva-container absolute inset-0 z-10" ref={konvaContainer}></div>
+
+      <canvas
+        className={`${_className}__canvas z-0`}
+        height={viewport.height}
+        ref={canvasElement}
+        width={viewport.width}
+      />
+    </div>
+  );
+}

apps/remix/app/components/general/envelope-editor/envelope-editor-page-preview.tsx

@@ -0,0 +1,158 @@
+import { lazy, useEffect, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { FileTextIcon } from 'lucide-react';
+
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
+import { Separator } from '@documenso/ui/primitives/separator';
+
+import { EnvelopeRendererFileSelector } from './envelope-file-selector';
+
+const EnvelopeEditorPagePreviewRenderer = lazy(
+  async () => import('./envelope-editor-page-preview-renderer'),
+);
+
+export const EnvelopeEditorPagePreview = () => {
+  const { envelope, editorFields } = useCurrentEnvelopeEditor();
+
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>(
+    'recipient',
+  );
+
+  /**
+   * Set the selected recipient to the first recipient in the envelope.
+   */
+  useEffect(() => {
+    editorFields.setSelectedRecipient(envelope.recipients[0]?.id ?? null);
+  }, []);
+
+  return (
+    <div className="relative flex h-full">
+      <div className="flex w-full flex-col">
+        {/* Horizontal envelope item selector */}
+        <EnvelopeRendererFileSelector fields={editorFields.localFields} />
+
+        {/* Document View */}
+        <div className="mt-4 flex flex-col items-center justify-center">
+          <Alert variant="warning" className="mb-4 max-w-[800px]">
+            <AlertTitle>
+              <Trans>Preview Mode</Trans>
+            </AlertTitle>
+            <AlertDescription>
+              <Trans>Preview what the signed document will look like with placeholder data</Trans>
+            </AlertDescription>
+          </Alert>
+
+          {currentEnvelopeItem !== null ? (
+            <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorPagePreviewRenderer} />
+          ) : (
+            <div className="flex flex-col items-center justify-center py-32">
+              <FileTextIcon className="text-muted-foreground h-10 w-10" />
+              <p className="text-foreground mt-1 text-sm">
+                <Trans>No documents found</Trans>
+              </p>
+              <p className="text-muted-foreground mt-1 text-sm">
+                <Trans>Please upload a document to continue</Trans>
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right Section - Form Fields Panel */}
+      {currentEnvelopeItem && false && (
+        <div className="sticky top-0 h-[calc(100vh-73px)] w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
+          {/* Add fields section. */}
+          <section className="px-4">
+            {/* <h3 className="mb-2 text-sm font-semibold text-gray-900">
+              <Trans>Preivew Mode</Trans>
+            </h3> */}
+
+            <Alert variant="neutral">
+              <AlertTitle>
+                <Trans>Preview Mode</Trans>
+              </AlertTitle>
+              <AlertDescription>
+                <Trans>Preview what the signed document will look like with placeholder data</Trans>
+              </AlertDescription>
+            </Alert>
+
+            {/* <Alert variant="neutral">
+              <RadioGroup
+                className="gap-y-1"
+                value={selectedPreviewMode}
+                onValueChange={(value) => setSelectedPreviewMode(value as 'recipient' | 'signed')}
+              >
+                <div className="flex items-center">
+                  <RadioGroupItem
+                    id="document-signed-preview"
+                    className="pointer-events-none h-3 w-3"
+                    value="signed"
+                  />
+                  <Label
+                    htmlFor="document-signed-preview"
+                    className="text-foreground ml-1.5 text-xs font-normal"
+                  >
+                    <Trans>Document Signed Preview</Trans>
+                  </Label>
+                </div>
+
+                <div className="flex items-center">
+                  <RadioGroupItem
+                    id="recipient-preview"
+                    className="pointer-events-none h-3 w-3"
+                    value="recipient"
+                  />
+                  <Label
+                    htmlFor="recipient-preview"
+                    className="text-foreground ml-1.5 text-xs font-normal"
+                  >
+                    <Trans>Recipient Preview</Trans>
+                  </Label>
+                </div>
+              </RadioGroup>
+            </Alert>
+
+            <div>Preview what a recipient will see</div>
+
+            <div>Preview the signed document</div> */}
+          </section>
+
+          {false && (
+            <AnimateGenericFadeInOut key={selectedPreviewMode}>
+              {selectedPreviewMode === 'recipient' && (
+                <>
+                  <Separator className="my-4" />
+
+                  {/* Recipient selector section. */}
+                  <section className="px-4">
+                    <h3 className="mb-2 text-sm font-semibold text-gray-900">
+                      <Trans>Selected Recipient</Trans>
+                    </h3>
+
+                    <RecipientSelector
+                      selectedRecipient={editorFields.selectedRecipient}
+                      onSelectedRecipientChange={(recipient) =>
+                        editorFields.setSelectedRecipient(recipient.id)
+                      }
+                      recipients={envelope.recipients}
+                      className="w-full"
+                      align="end"
+                    />
+                  </section>
+                </>
+              )}
+            </AnimateGenericFadeInOut>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

apps/remix/app/components/general/envelope-editor/envelope-editor-page-upload.tsx

@@ -7,20 +7,16 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
 import { FileWarningIcon, GripVerticalIcon, Loader2 } from 'lucide-react';
 import { X } from 'lucide-react';
-import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
 import { Link } from 'react-router';
 
-import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import {
   useCurrentEnvelopeEditor,
   useDebounceFunction,
 } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { nanoid } from '@documenso/lib/universal/id';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Card,
@@ -30,9 +26,9 @@ import {
   CardTitle,
 } from '@documenso/ui/primitives/card';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog';
+import { useCurrentTeam } from '~/providers/team';
 
 import { EnvelopeEditorRecipientForm } from './envelope-editor-recipient-form';
 import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
@@ -45,13 +41,11 @@ type LocalFile = {
   isError: boolean;
 };
 
-export const EnvelopeEditorUploadPage = () => {
-  const organisation = useCurrentOrganisation();
-
+export const EnvelopeEditorPageUpload = () => {
+  const team = useCurrentTeam();
   const { t } = useLingui();
-  const { envelope, setLocalEnvelope, relativePath, editorFields } = useCurrentEnvelopeEditor();
-  const { maximumEnvelopeItemCount, remaining } = useLimits();
-  const { toast } = useToast();
+
+  const { envelope, setLocalEnvelope } = useCurrentEnvelopeEditor();
 
   const [localFiles, setLocalFiles] = useState<LocalFile[]>(
     envelope.envelopeItems
@@ -67,8 +61,8 @@ export const EnvelopeEditorUploadPage = () => {
 
   const { mutateAsync: createEnvelopeItems, isPending: isCreatingEnvelopeItems } =
     trpc.envelope.item.createMany.useMutation({
-      onSuccess: ({ data }) => {
-        const createdEnvelopes = data.filter(
+      onSuccess: (data) => {
+        const createdEnvelopes = data.createdEnvelopeItems.filter(
           (item) => !envelope.envelopeItems.find((envelopeItem) => envelopeItem.id === item.id),
         );
 
@@ -79,10 +73,10 @@ export const EnvelopeEditorUploadPage = () => {
     });
 
   const { mutateAsync: updateEnvelopeItems } = trpc.envelope.item.updateMany.useMutation({
-    onSuccess: ({ data }) => {
+    onSuccess: (data) => {
       setLocalEnvelope({
         envelopeItems: envelope.envelopeItems.map((originalItem) => {
-          const updatedItem = data.find((item) => item.id === originalItem.id);
+          const updatedItem = data.updatedEnvelopeItems.find((item) => item.id === originalItem.id);
 
           if (updatedItem) {
             return {
@@ -114,19 +108,36 @@ export const EnvelopeEditorUploadPage = () => {
 
     setLocalFiles((prev) => [...prev, ...newUploadingFiles]);
 
-    const payload = {
+    const result = await Promise.all(
+      files.map(async (file, index) => {
+        try {
+          const response = await putPdfFile(file);
+
+          // Mark as uploaded (remove from uploading state)
+          return {
+            title: file.name,
+            documentDataId: response.id,
+          };
+        } catch (_error) {
+          setLocalFiles((prev) =>
+            prev.map((uploadingFile) =>
+              uploadingFile.id === newUploadingFiles[index].id
+                ? { ...uploadingFile, isError: true, isUploading: false }
+                : uploadingFile,
+            ),
+          );
+        }
+      }),
+    );
+
+    const envelopeItemsToCreate = result.filter(
+      (item): item is { title: string; documentDataId: string } => item !== undefined,
+    );
+
+    const { createdEnvelopeItems } = await createEnvelopeItems({
       envelopeId: envelope.id,
-    } satisfies TCreateEnvelopeItemsPayload;
-
-    const formData = new FormData();
-
-    formData.append('payload', JSON.stringify(payload));
-
-    for (const file of files) {
-      formData.append('files', file);
-    }
-
-    const { data } = await createEnvelopeItems(formData).catch((error) => {
+      items: envelopeItemsToCreate,
+    }).catch((error) => {
       console.error(error);
 
       // Set error state on files in batch upload.
@@ -148,7 +159,7 @@ export const EnvelopeEditorUploadPage = () => {
       );
 
       return filteredFiles.concat(
-        data.map((item) => ({
+        createdEnvelopeItems.map((item) => ({
           id: item.id,
           envelopeItemId: item.id,
           title: item.title,
@@ -165,17 +176,9 @@ export const EnvelopeEditorUploadPage = () => {
   const onFileDelete = (envelopeItemId: string) => {
     setLocalFiles((prev) => prev.filter((uploadingFile) => uploadingFile.id !== envelopeItemId));
 
-    const fieldsWithoutDeletedItem = envelope.fields.filter(
-      (field) => field.envelopeItemId !== envelopeItemId,
-    );
-
     setLocalEnvelope({
       envelopeItems: envelope.envelopeItems.filter((item) => item.id !== envelopeItemId),
-      fields: envelope.fields.filter((field) => field.envelopeItemId !== envelopeItemId),
     });
-
-    // Reset editor fields.
-    editorFields.resetForm(fieldsWithoutDeletedItem);
   };
 
   /**
@@ -194,6 +197,7 @@ export const EnvelopeEditorUploadPage = () => {
     debouncedUpdateEnvelopeItems(items);
   };
 
+  // Todo: Envelopes - Sync into envelopes data
   const debouncedUpdateEnvelopeItems = useDebounceFunction((files: LocalFile[]) => {
     void updateEnvelopeItems({
       envelopeId: envelope.id,
@@ -216,56 +220,12 @@ export const EnvelopeEditorUploadPage = () => {
     debouncedUpdateEnvelopeItems(newLocalFilesValue);
   };
 
-  const dropzoneDisabledMessage = useMemo(() => {
-    if (!canItemsBeModified) {
-      return msg`Cannot upload items after the document has been sent`;
-    }
-
-    if (organisation.subscription && remaining.documents === 0) {
-      return msg`Document upload disabled due to unpaid invoices`;
-    }
-
-    if (maximumEnvelopeItemCount <= localFiles.length) {
-      return msg`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`;
-    }
-
-    return null;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [localFiles.length, maximumEnvelopeItemCount, remaining.documents]);
-
-  const onFileDropRejected = (fileRejections: FileRejection[]) => {
-    const maxItemsReached = fileRejections.some((fileRejection) =>
-      fileRejection.errors.some((error) => error.code === DropzoneErrorCode.TooManyFiles),
-    );
-
-    if (maxItemsReached) {
-      toast({
-        title: t`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`,
-        duration: 5000,
-        variant: 'destructive',
-      });
-
-      return;
-    }
-
-    toast({
-      title: t`Upload failed`,
-      description: t`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
-      duration: 5000,
-      variant: 'destructive',
-    });
-  };
-
   return (
     <div className="mx-auto max-w-4xl space-y-6 p-8">
       <Card backdropBlur={false} className="border">
         <CardHeader className="pb-3">
-          <CardTitle>
-            <Trans>Documents</Trans>
-          </CardTitle>
-          <CardDescription>
-            <Trans>Add and configure multiple documents</Trans>
-          </CardDescription>
+          <CardTitle>Documents</CardTitle>
+          <CardDescription>Add and configure multiple documents</CardDescription>
         </CardHeader>
 
         <CardContent>
@@ -273,11 +233,9 @@ export const EnvelopeEditorUploadPage = () => {
             onDrop={onFileDrop}
             allowMultiple
             className="pb-4 pt-6"
-            disabled={dropzoneDisabledMessage !== null}
-            disabledMessage={dropzoneDisabledMessage || undefined}
+            disabled={!canItemsBeModified}
+            disabledMessage={msg`Cannot upload items after the document has been sent`}
             disabledHeading={msg`Upload disabled`}
-            maxFiles={maximumEnvelopeItemCount - localFiles.length}
-            onDropRejected={onFileDropRejected}
           />
 
           {/* Uploaded Files List */}
@@ -298,7 +256,7 @@ export const EnvelopeEditorUploadPage = () => {
                             ref={provided.innerRef}
                             {...provided.draggableProps}
                             style={provided.draggableProps.style}
-                            className={`bg-accent/50 flex items-center justify-between rounded-lg p-3 transition-shadow ${
+                            className={`flex items-center justify-between rounded-lg bg-gray-50 p-3 transition-shadow ${
                               snapshot.isDragging ? 'shadow-md' : ''
                             }`}
                           >
@@ -324,7 +282,7 @@ export const EnvelopeEditorUploadPage = () => {
                                   <p className="text-sm font-medium">{localFile.title}</p>
                                 )}
 
-                                <div className="text-muted-foreground text-xs">
+                                <div className="text-xs text-gray-500">
                                   {localFile.isUploading ? (
                                     <Trans>Uploading</Trans>
                                   ) : localFile.isError ? (
@@ -337,7 +295,7 @@ export const EnvelopeEditorUploadPage = () => {
                             <div className="flex items-center space-x-2">
                               {localFile.isUploading && (
                                 <div className="flex h-6 w-10 items-center justify-center">
-                                  <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+                                  <Loader2 className="h-4 w-4 animate-spin text-gray-500" />
                                 </div>
                               )}
 
@@ -380,7 +338,7 @@ export const EnvelopeEditorUploadPage = () => {
 
       <div className="flex justify-end">
         <Button asChild>
-          <Link to={`${relativePath.editorPath}?step=addFields`}>
+          <Link to={`/t/${team.url}/documents/${envelope.id}/edit?step=addFields`}>
             <Trans>Add Fields</Trans>
           </Link>
         </Button>

apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx

@@ -1,339 +0,0 @@
-import { lazy, useEffect, useMemo, useState } from 'react';
-
-import { faker } from '@faker-js/faker/locale/en';
-import { Trans } from '@lingui/react/macro';
-import { FieldType, SigningStatus } from '@prisma/client';
-import { FileTextIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
-
-import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import {
-  EnvelopeRenderProvider,
-  useCurrentEnvelopeRender,
-} from '@documenso/lib/client-only/providers/envelope-render-provider';
-import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
-import { extractFieldInsertionValues } from '@documenso/lib/utils/envelope-signing';
-import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
-import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
-import { Separator } from '@documenso/ui/primitives/separator';
-
-import { EnvelopeRendererFileSelector } from './envelope-file-selector';
-
-const EnvelopeGenericPageRenderer = lazy(async () => import('./envelope-generic-page-renderer'));
-
-// Todo: Envelopes - Dynamically import faker
-export const EnvelopeEditorPreviewPage = () => {
-  const { envelope, editorFields } = useCurrentEnvelopeEditor();
-
-  const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();
-
-  const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>(
-    'recipient',
-  );
-
-  const fieldsWithPlaceholders = useMemo(() => {
-    return fields.map((field) => {
-      const fieldMeta = ZFieldAndMetaSchema.parse(field);
-
-      const recipient = envelope.recipients.find((recipient) => recipient.id === field.recipientId);
-
-      if (!recipient) {
-        throw new Error('Recipient not found');
-      }
-
-      faker.seed(recipient.id);
-
-      const recipientName = recipient.name || faker.person.fullName();
-      const recipientEmail = recipient.email || faker.internet.email();
-
-      faker.seed(recipient.id + field.id);
-
-      return {
-        ...field,
-        inserted: true,
-        ...match(fieldMeta)
-          .with({ type: FieldType.TEXT }, ({ fieldMeta }) => {
-            let text = fieldMeta?.text || faker.lorem.words(5);
-
-            if (fieldMeta?.characterLimit) {
-              text = text.slice(0, fieldMeta?.characterLimit);
-            }
-
-            return {
-              customText: text,
-            };
-          })
-          .with({ type: FieldType.NUMBER }, ({ fieldMeta }) => {
-            let number = fieldMeta?.value ?? '';
-
-            if (number === '') {
-              number = faker.number
-                .int({
-                  min: fieldMeta?.minValue ?? 0,
-                  max: fieldMeta?.maxValue ?? 1000,
-                })
-                .toString();
-            }
-
-            return {
-              customText: number,
-            };
-          })
-          .with({ type: FieldType.DATE }, () => {
-            const date = extractFieldInsertionValues({
-              fieldValue: {
-                type: FieldType.DATE,
-                value: true,
-              },
-              field,
-              documentMeta: envelope.documentMeta,
-            });
-
-            return {
-              customText: date.customText,
-            };
-          })
-          .with({ type: FieldType.EMAIL }, () => {
-            return {
-              customText: recipientEmail,
-            };
-          })
-          .with({ type: FieldType.NAME }, () => {
-            return {
-              customText: recipientName,
-            };
-          })
-          .with({ type: FieldType.INITIALS }, () => {
-            return {
-              customText: extractInitials(recipientName),
-            };
-          })
-          .with({ type: FieldType.RADIO }, ({ fieldMeta }) => {
-            const values = fieldMeta?.values ?? [];
-
-            if (values.length === 0) {
-              return '';
-            }
-
-            let customText = '';
-
-            const preselectedValue = values.findIndex((value) => value.checked);
-
-            if (preselectedValue !== -1) {
-              customText = preselectedValue.toString();
-            } else {
-              const randomIndex = faker.number.int({ min: 0, max: values.length - 1 });
-              customText = randomIndex.toString();
-            }
-
-            return {
-              customText,
-            };
-          })
-          .with({ type: FieldType.CHECKBOX }, ({ fieldMeta }) => {
-            let checkedValues: number[] = [];
-
-            const values = fieldMeta?.values ?? [];
-
-            values.forEach((value, index) => {
-              if (value.checked) {
-                checkedValues.push(index);
-              }
-            });
-
-            if (checkedValues.length === 0 && values.length > 0) {
-              const numberOfValues = fieldMeta?.validationLength || 1;
-
-              checkedValues = Array.from({ length: numberOfValues }, (_, index) => index);
-            }
-
-            return {
-              customText: toCheckboxCustomText(checkedValues),
-            };
-          })
-          .with({ type: FieldType.DROPDOWN }, ({ fieldMeta }) => {
-            const values = fieldMeta?.values ?? [];
-
-            let customText = fieldMeta?.defaultValue || '';
-
-            if (!customText && values.length > 0) {
-              const randomIndex = faker.number.int({ min: 0, max: values.length - 1 });
-              customText = values[randomIndex].value;
-            }
-
-            return {
-              customText,
-            };
-          })
-          .with({ type: FieldType.SIGNATURE }, () => {
-            return {
-              customText: '',
-              signature: {
-                signatureImageAsBase64: '',
-                typedSignature: recipientName,
-              },
-            };
-          })
-          .with({ type: FieldType.FREE_SIGNATURE }, () => {
-            return {
-              customText: '',
-            };
-          })
-          .exhaustive(),
-      };
-    });
-  }, [fields, envelope, envelope.recipients, envelope.documentMeta]);
-
-  /**
-   * Set the selected recipient to the first recipient in the envelope.
-   */
-  useEffect(() => {
-    editorFields.setSelectedRecipient(envelope.recipients[0]?.id ?? null);
-  }, []);
-
-  // Override the parent renderer provider so we can inject custom fields.
-  return (
-    <EnvelopeRenderProvider
-      envelope={envelope}
-      token={undefined}
-      fields={fieldsWithPlaceholders}
-      recipients={envelope.recipients.map((recipient) => ({
-        ...recipient,
-        signingStatus: SigningStatus.SIGNED,
-      }))}
-      overrideSettings={{
-        mode: 'export',
-      }}
-    >
-      <div className="relative flex h-full">
-        <div className="flex w-full flex-col overflow-y-auto">
-          {/* Horizontal envelope item selector */}
-          <EnvelopeRendererFileSelector fields={editorFields.localFields} />
-
-          {/* Document View */}
-          <div className="mt-4 flex flex-col items-center justify-center">
-            <Alert variant="warning" className="mb-4 max-w-[800px]">
-              <AlertTitle>
-                <Trans>Preview Mode</Trans>
-              </AlertTitle>
-              <AlertDescription>
-                <Trans>Preview what the signed document will look like with placeholder data</Trans>
-              </AlertDescription>
-            </Alert>
-
-            {currentEnvelopeItem !== null ? (
-              <PDFViewerKonvaLazy
-                renderer="editor"
-                customPageRenderer={EnvelopeGenericPageRenderer}
-              />
-            ) : (
-              <div className="flex flex-col items-center justify-center py-32">
-                <FileTextIcon className="text-muted-foreground h-10 w-10" />
-                <p className="text-foreground mt-1 text-sm">
-                  <Trans>No documents found</Trans>
-                </p>
-                <p className="text-muted-foreground mt-1 text-sm">
-                  <Trans>Please upload a document to continue</Trans>
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Right Section - Form Fields Panel */}
-        {currentEnvelopeItem && false && (
-          <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
-            {/* Add fields section. */}
-            <section className="px-4">
-              {/* <h3 className="mb-2 text-sm font-semibold text-gray-900">
-              <Trans>Preivew Mode</Trans>
-            </h3> */}
-
-              <Alert variant="neutral">
-                <AlertTitle>
-                  <Trans>Preview Mode</Trans>
-                </AlertTitle>
-                <AlertDescription>
-                  <Trans>
-                    Preview what the signed document will look like with placeholder data
-                  </Trans>
-                </AlertDescription>
-              </Alert>
-
-              {/* <Alert variant="neutral">
-              <RadioGroup
-                className="gap-y-1"
-                value={selectedPreviewMode}
-                onValueChange={(value) => setSelectedPreviewMode(value as 'recipient' | 'signed')}
-              >
-                <div className="flex items-center">
-                  <RadioGroupItem
-                    id="document-signed-preview"
-                    className="pointer-events-none h-3 w-3"
-                    value="signed"
-                  />
-                  <Label
-                    htmlFor="document-signed-preview"
-                    className="text-foreground ml-1.5 text-xs font-normal"
-                  >
-                    <Trans>Document Signed Preview</Trans>
-                  </Label>
-                </div>
-
-                <div className="flex items-center">
-                  <RadioGroupItem
-                    id="recipient-preview"
-                    className="pointer-events-none h-3 w-3"
-                    value="recipient"
-                  />
-                  <Label
-                    htmlFor="recipient-preview"
-                    className="text-foreground ml-1.5 text-xs font-normal"
-                  >
-                    <Trans>Recipient Preview</Trans>
-                  </Label>
-                </div>
-              </RadioGroup>
-            </Alert>
-
-            <div>Preview what a recipient will see</div>
-
-            <div>Preview the signed document</div> */}
-            </section>
-
-            {false && (
-              <AnimateGenericFadeInOut key={selectedPreviewMode}>
-                {selectedPreviewMode === 'recipient' && (
-                  <>
-                    <Separator className="my-4" />
-
-                    {/* Recipient selector section. */}
-                    <section className="px-4">
-                      <h3 className="mb-2 text-sm font-semibold text-gray-900">
-                        <Trans>Selected Recipient</Trans>
-                      </h3>
-
-                      <RecipientSelector
-                        selectedRecipient={editorFields.selectedRecipient}
-                        onSelectedRecipientChange={(recipient) =>
-                          editorFields.setSelectedRecipient(recipient.id)
-                        }
-                        recipients={envelope.recipients}
-                        className="w-full"
-                        align="end"
-                      />
-                    </section>
-                  </>
-                )}
-              </AnimateGenericFadeInOut>
-            )}
-          </div>
-        )}
-      </div>
-    </EnvelopeRenderProvider>
-  );
-};

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -14,7 +14,7 @@ import { DocumentSigningOrder, EnvelopeType, RecipientRole, SendStatus } from '@
 import { motion } from 'framer-motion';
 import { GripVerticalIcon, HelpCircleIcon, PlusIcon, TrashIcon } from 'lucide-react';
 import { useFieldArray, useForm, useWatch } from 'react-hook-form';
-import { isDeepEqual, prop, sortBy } from 'remeda';
+import { prop, sortBy } from 'remeda';
 import { z } from 'zod';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -75,6 +75,7 @@ const ZEnvelopeRecipientsForm = z.object({
       actionAuth: z.array(ZRecipientActionAuthTypesSchema).optional().default([]),
     }),
   ),
+  // Todo: Envelopes - These aren't synced to the server
   signingOrder: z.nativeEnum(DocumentSigningOrder),
   allowDictateNextSigner: z.boolean().default(false),
 });
@@ -82,7 +83,7 @@ const ZEnvelopeRecipientsForm = z.object({
 type TEnvelopeRecipientsForm = z.infer<typeof ZEnvelopeRecipientsForm>;
 
 export const EnvelopeEditorRecipientForm = () => {
-  const { envelope, setRecipientsDebounced, updateEnvelope } = useCurrentEnvelopeEditor();
+  const { envelope, setRecipientsDebounced } = useCurrentEnvelopeEditor();
 
   const organisation = useCurrentOrganisation();
 
@@ -148,7 +149,8 @@ export const EnvelopeEditorRecipientForm = () => {
     },
   });
 
-  const recipientHasAuthSettings = useMemo(() => {
+  // Always show advanced settings if any recipient has auth options.
+  const alwaysShowAdvancedSettings = useMemo(() => {
     const recipientHasAuthOptions = recipients.find((recipient) => {
       const recipientAuthOptions = ZRecipientAuthOptionsSchema.parse(recipient.authOptions);
 
@@ -164,7 +166,7 @@ export const EnvelopeEditorRecipientForm = () => {
     return recipientHasAuthOptions !== undefined || formHasActionAuth !== undefined;
   }, [recipients, form]);
 
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(recipientHasAuthSettings);
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(alwaysShowAdvancedSettings);
   const [showSigningOrderConfirmation, setShowSigningOrderConfirmation] = useState(false);
 
   const {
@@ -212,7 +214,7 @@ export const EnvelopeEditorRecipientForm = () => {
   );
 
   const hasDocumentBeenSent = recipients.some(
-    (recipient) => recipient.role !== RecipientRole.CC && recipient.sendStatus === SendStatus.SENT,
+    (recipient) => recipient.sendStatus === SendStatus.SENT,
   );
 
   const canRecipientBeModified = (recipientId?: number) => {
@@ -449,8 +451,6 @@ export const EnvelopeEditorRecipientForm = () => {
       shouldValidate: true,
       shouldDirty: true,
     });
-
-    void form.trigger();
   }, [form]);
 
   // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
@@ -460,77 +460,15 @@ export const EnvelopeEditorRecipientForm = () => {
       return;
     }
 
-    const formValueSigners = formValues.signers || [];
+    const validatedFormValues = ZEnvelopeRecipientsForm.safeParse(formValues);
 
-    // Remove the last signer if it's empty.
-    const nonEmptyRecipients = formValueSigners.filter((signer, i) => {
-      if (i === formValueSigners.length - 1 && signer.email === '') {
-        return false;
-      }
+    if (validatedFormValues.success) {
+      console.log('validatedFormValues', validatedFormValues);
 
-      return true;
-    });
+      setRecipientsDebounced(validatedFormValues.data.signers);
 
-    const validatedFormValues = ZEnvelopeRecipientsForm.safeParse({
-      ...formValues,
-      signers: nonEmptyRecipients,
-    });
-
-    if (!validatedFormValues.success) {
-      return;
-    }
-
-    const { data } = validatedFormValues;
-
-    // Weird edge case where the whole envelope is created via API
-    // with no signing order. If they come to this page it will show an error
-    // since they aren't equal and the recipient is no longer editable.
-    const envelopeRecipients = data.signers.map((recipient) => {
-      if (!canRecipientBeModified(recipient.id)) {
-        return {
-          ...recipient,
-          signingOrder: recipient.signingOrder,
-        };
-      }
-      return recipient;
-    });
-
-    const hasSigningOrderChanged = envelope.documentMeta.signingOrder !== data.signingOrder;
-    const hasAllowDictateNextSignerChanged =
-      envelope.documentMeta.allowDictateNextSigner !== data.allowDictateNextSigner;
-
-    const hasSignersChanged =
-      envelopeRecipients.length !== recipients.length ||
-      envelopeRecipients.some((signer) => {
-        const recipient = recipients.find((recipient) => recipient.id === signer.id);
-
-        if (!recipient) {
-          return true;
-        }
-
-        const signerActionAuth = signer.actionAuth;
-        const recipientActionAuth = recipient.authOptions?.actionAuth || [];
-
-        return (
-          signer.email !== recipient.email ||
-          signer.name !== recipient.name ||
-          signer.role !== recipient.role ||
-          signer.signingOrder !== recipient.signingOrder ||
-          !isDeepEqual(signerActionAuth, recipientActionAuth)
-        );
-      });
-
-    if (hasSignersChanged) {
-      setRecipientsDebounced(envelopeRecipients);
-    }
-
-    if (hasSigningOrderChanged || hasAllowDictateNextSignerChanged) {
-      updateEnvelope({
-        meta: {
-          signingOrder: validatedFormValues.data.signingOrder,
-          allowDictateNextSigner: validatedFormValues.data.allowDictateNextSigner,
-        },
-      });
+      // Todo: Envelopes - Need to save the other data as well
+      // setEnvelope
     }
   }, [formValues]);
 
@@ -570,17 +508,18 @@ export const EnvelopeEditorRecipientForm = () => {
       <CardContent>
         <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
           <Form {...form}>
-            <div className="bg-accent/50 -mt-2 mb-2 space-y-4 rounded-md p-4">
-              {organisation.organisationClaim.flags.cfr21 && (
+            <div className="-mt-2 mb-2 space-y-4 rounded-md bg-gray-50/80 p-4">
+              {!alwaysShowAdvancedSettings && organisation.organisationClaim.flags.cfr21 && (
                 <div className="flex flex-row items-center">
                   <Checkbox
                     id="showAdvancedRecipientSettings"
+                    className="h-5 w-5"
                     checked={showAdvancedSettings}
                     onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
                   />
 
                   <label
-                    className="ml-2 text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    className="text-muted-foreground ml-2 text-sm"
                     htmlFor="showAdvancedRecipientSettings"
                   >
                     <Trans>Show advanced settings</Trans>
@@ -739,202 +678,152 @@ export const EnvelopeEditorRecipientForm = () => {
                             <motion.fieldset
                               data-native-id={signer.id}
                               disabled={isSubmitting || !canRecipientBeModified(signer.id)}
-                              className={cn('pb-2', {
-                                'border-b pb-4':
-                                  showAdvancedSettings && index !== signers.length - 1,
-                                'pt-2': showAdvancedSettings && index === 0,
-                                'pr-3': isSigningOrderSequential,
+                              className={cn('grid grid-cols-10 items-end gap-2 pb-2', {
+                                'border-b pt-2': showAdvancedSettings,
+                                'grid-cols-12 pr-3': isSigningOrderSequential,
                               })}
                             >
-                              <div className="flex flex-row items-center gap-x-2">
-                                {isSigningOrderSequential && (
-                                  <FormField
-                                    control={form.control}
-                                    name={`signers.${index}.signingOrder`}
-                                    render={({ field }) => (
-                                      <FormItem
-                                        className={cn(
-                                          'mt-auto flex items-center gap-x-1 space-y-0',
-                                          {
-                                            'mb-6':
-                                              form.formState.errors.signers?.[index] &&
-                                              !form.formState.errors.signers[index]?.signingOrder,
-                                          },
-                                        )}
-                                      >
-                                        <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
-                                        <FormControl>
-                                          <Input
-                                            type="number"
-                                            max={signers.length}
-                                            data-testid="signing-order-input"
-                                            className={cn(
-                                              'w-10 text-center',
-                                              '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
-                                            )}
-                                            {...field}
-                                            onChange={(e) => {
-                                              field.onChange(e);
-                                              handleSigningOrderChange(index, e.target.value);
-                                            }}
-                                            onBlur={(e) => {
-                                              field.onBlur();
-                                              handleSigningOrderChange(index, e.target.value);
-                                            }}
-                                            disabled={
-                                              snapshot.isDragging ||
-                                              isSubmitting ||
-                                              !canRecipientBeModified(signer.id)
-                                            }
-                                          />
-                                        </FormControl>
-                                        <FormMessage />
-                                      </FormItem>
+                              {isSigningOrderSequential && (
+                                <FormField
+                                  control={form.control}
+                                  name={`signers.${index}.signingOrder`}
+                                  render={({ field }) => (
+                                    <FormItem
+                                      className={cn(
+                                        'col-span-1 mt-auto flex items-center gap-x-1 space-y-0',
+                                        {
+                                          'mb-6':
+                                            form.formState.errors.signers?.[index] &&
+                                            !form.formState.errors.signers[index]?.signingOrder,
+                                        },
+                                      )}
+                                    >
+                                      <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
+                                      <FormControl>
+                                        <Input
+                                          type="number"
+                                          max={signers.length}
+                                          data-testid="signing-order-input"
+                                          className={cn(
+                                            'w-full text-center',
+                                            '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+                                          )}
+                                          {...field}
+                                          onChange={(e) => {
+                                            field.onChange(e);
+                                            handleSigningOrderChange(index, e.target.value);
+                                          }}
+                                          onBlur={(e) => {
+                                            field.onBlur();
+                                            handleSigningOrderChange(index, e.target.value);
+                                          }}
+                                          disabled={
+                                            snapshot.isDragging ||
+                                            isSubmitting ||
+                                            !canRecipientBeModified(signer.id)
+                                          }
+                                        />
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+                              )}
+
+                              <FormField
+                                control={form.control}
+                                name={`signers.${index}.email`}
+                                render={({ field }) => (
+                                  <FormItem
+                                    className={cn('relative', {
+                                      'mb-6':
+                                        form.formState.errors.signers?.[index] &&
+                                        !form.formState.errors.signers[index]?.email,
+                                      'col-span-4': !showAdvancedSettings,
+                                      'col-span-5': showAdvancedSettings,
+                                    })}
+                                  >
+                                    {!showAdvancedSettings && index === 0 && (
+                                      <FormLabel required>
+                                        <Trans>Email</Trans>
+                                      </FormLabel>
                                     )}
-                                  />
+
+                                    <FormControl>
+                                      <RecipientAutoCompleteInput
+                                        type="email"
+                                        placeholder={t`Email`}
+                                        value={field.value}
+                                        disabled={
+                                          snapshot.isDragging ||
+                                          isSubmitting ||
+                                          !canRecipientBeModified(signer.id)
+                                        }
+                                        options={recipientSuggestions}
+                                        onSelect={(suggestion) =>
+                                          handleRecipientAutoCompleteSelect(index, suggestion)
+                                        }
+                                        onSearchQueryChange={(query) => {
+                                          field.onChange(query);
+                                          setRecipientSearchQuery(query);
+                                        }}
+                                        loading={isLoading}
+                                        data-testid="signer-email-input"
+                                        maxLength={254}
+                                      />
+                                    </FormControl>
+
+                                    <FormMessage />
+                                  </FormItem>
                                 )}
+                              />
 
-                                <FormField
-                                  control={form.control}
-                                  name={`signers.${index}.email`}
-                                  render={({ field }) => (
-                                    <FormItem
-                                      className={cn('relative w-full', {
-                                        'mb-6':
-                                          form.formState.errors.signers?.[index] &&
-                                          !form.formState.errors.signers[index]?.email,
-                                      })}
-                                    >
-                                      {!showAdvancedSettings && index === 0 && (
-                                        <FormLabel required>
-                                          <Trans>Email</Trans>
-                                        </FormLabel>
-                                      )}
+                              <FormField
+                                control={form.control}
+                                name={`signers.${index}.name`}
+                                render={({ field }) => (
+                                  <FormItem
+                                    className={cn({
+                                      'mb-6':
+                                        form.formState.errors.signers?.[index] &&
+                                        !form.formState.errors.signers[index]?.name,
+                                      'col-span-4': !showAdvancedSettings,
+                                      'col-span-5': showAdvancedSettings,
+                                    })}
+                                  >
+                                    {!showAdvancedSettings && index === 0 && (
+                                      <FormLabel>
+                                        <Trans>Name</Trans>
+                                      </FormLabel>
+                                    )}
 
-                                      <FormControl>
-                                        <RecipientAutoCompleteInput
-                                          type="email"
-                                          placeholder={t`Email`}
-                                          value={field.value}
-                                          disabled={
-                                            snapshot.isDragging ||
-                                            isSubmitting ||
-                                            !canRecipientBeModified(signer.id)
-                                          }
-                                          options={recipientSuggestions}
-                                          onSelect={(suggestion) =>
-                                            handleRecipientAutoCompleteSelect(index, suggestion)
-                                          }
-                                          onSearchQueryChange={(query) => {
-                                            field.onChange(query);
-                                            setRecipientSearchQuery(query);
-                                          }}
-                                          loading={isLoading}
-                                          data-testid="signer-email-input"
-                                          maxLength={254}
-                                        />
-                                      </FormControl>
+                                    <FormControl>
+                                      <RecipientAutoCompleteInput
+                                        type="text"
+                                        placeholder={t`Name`}
+                                        {...field}
+                                        disabled={
+                                          snapshot.isDragging ||
+                                          isSubmitting ||
+                                          !canRecipientBeModified(signer.id)
+                                        }
+                                        options={recipientSuggestions}
+                                        onSelect={(suggestion) =>
+                                          handleRecipientAutoCompleteSelect(index, suggestion)
+                                        }
+                                        onSearchQueryChange={(query) => {
+                                          field.onChange(query);
+                                          setRecipientSearchQuery(query);
+                                        }}
+                                        loading={isLoading}
+                                        maxLength={255}
+                                      />
+                                    </FormControl>
 
-                                      <FormMessage />
-                                    </FormItem>
-                                  )}
-                                />
-
-                                <FormField
-                                  control={form.control}
-                                  name={`signers.${index}.name`}
-                                  render={({ field }) => (
-                                    <FormItem
-                                      className={cn('w-full', {
-                                        'mb-6':
-                                          form.formState.errors.signers?.[index] &&
-                                          !form.formState.errors.signers[index]?.name,
-                                      })}
-                                    >
-                                      {!showAdvancedSettings && index === 0 && (
-                                        <FormLabel>
-                                          <Trans>Name</Trans>
-                                        </FormLabel>
-                                      )}
-
-                                      <FormControl>
-                                        <RecipientAutoCompleteInput
-                                          type="text"
-                                          placeholder={t`Name`}
-                                          {...field}
-                                          disabled={
-                                            snapshot.isDragging ||
-                                            isSubmitting ||
-                                            !canRecipientBeModified(signer.id)
-                                          }
-                                          options={recipientSuggestions}
-                                          onSelect={(suggestion) =>
-                                            handleRecipientAutoCompleteSelect(index, suggestion)
-                                          }
-                                          onSearchQueryChange={(query) => {
-                                            field.onChange(query);
-                                            setRecipientSearchQuery(query);
-                                          }}
-                                          loading={isLoading}
-                                          maxLength={255}
-                                        />
-                                      </FormControl>
-
-                                      <FormMessage />
-                                    </FormItem>
-                                  )}
-                                />
-
-                                <FormField
-                                  control={form.control}
-                                  name={`signers.${index}.role`}
-                                  render={({ field }) => (
-                                    <FormItem
-                                      className={cn('mt-auto w-fit', {
-                                        'mb-6':
-                                          form.formState.errors.signers?.[index] &&
-                                          !form.formState.errors.signers[index]?.role,
-                                      })}
-                                    >
-                                      <FormControl>
-                                        <RecipientRoleSelect
-                                          {...field}
-                                          isAssistantEnabled={isSigningOrderSequential}
-                                          onValueChange={(value) => {
-                                            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                                            handleRoleChange(index, value as RecipientRole);
-                                            field.onChange(value);
-                                          }}
-                                          disabled={
-                                            snapshot.isDragging ||
-                                            isSubmitting ||
-                                            !canRecipientBeModified(signer.id)
-                                          }
-                                        />
-                                      </FormControl>
-
-                                      <FormMessage />
-                                    </FormItem>
-                                  )}
-                                />
-
-                                <Button
-                                  variant="ghost"
-                                  className={cn('mt-auto px-2', {
-                                    'mb-6': form.formState.errors.signers?.[index],
-                                  })}
-                                  data-testid="remove-signer-button"
-                                  disabled={
-                                    snapshot.isDragging ||
-                                    isSubmitting ||
-                                    !canRecipientBeModified(signer.id) ||
-                                    signers.length === 1
-                                  }
-                                  onClick={() => onRemoveSigner(index)}
-                                >
-                                  <TrashIcon className="h-4 w-4" />
-                                </Button>
-                              </div>
+                                    <FormMessage />
+                                  </FormItem>
+                                )}
+                              />
 
                               {showAdvancedSettings &&
                                 organisation.organisationClaim.flags.cfr21 && (
@@ -943,11 +832,11 @@ export const EnvelopeEditorRecipientForm = () => {
                                     name={`signers.${index}.actionAuth`}
                                     render={({ field }) => (
                                       <FormItem
-                                        className={cn('mt-2 w-full', {
+                                        className={cn('col-span-8', {
                                           'mb-6':
                                             form.formState.errors.signers?.[index] &&
                                             !form.formState.errors.signers[index]?.actionAuth,
-                                          'pl-6': isSigningOrderSequential,
+                                          'col-span-10': isSigningOrderSequential,
                                         })}
                                       >
                                         <FormControl>
@@ -967,6 +856,60 @@ export const EnvelopeEditorRecipientForm = () => {
                                     )}
                                   />
                                 )}
+
+                              <div className="col-span-2 flex gap-x-2">
+                                <FormField
+                                  control={form.control}
+                                  name={`signers.${index}.role`}
+                                  render={({ field }) => (
+                                    <FormItem
+                                      className={cn('mt-auto', {
+                                        'mb-6':
+                                          form.formState.errors.signers?.[index] &&
+                                          !form.formState.errors.signers[index]?.role,
+                                      })}
+                                    >
+                                      <FormControl>
+                                        <RecipientRoleSelect
+                                          {...field}
+                                          isAssistantEnabled={isSigningOrderSequential}
+                                          onValueChange={(value) => {
+                                            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                                            handleRoleChange(index, value as RecipientRole);
+                                          }}
+                                          disabled={
+                                            snapshot.isDragging ||
+                                            isSubmitting ||
+                                            !canRecipientBeModified(signer.id)
+                                          }
+                                        />
+                                      </FormControl>
+
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <button
+                                  type="button"
+                                  className={cn(
+                                    'mt-auto inline-flex h-10 w-10 items-center justify-center hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                                    {
+                                      'mb-6': form.formState.errors.signers?.[index],
+                                    },
+                                  )}
+                                  data-testid="remove-signer-button"
+                                  disabled={
+                                    snapshot.isDragging ||
+                                    isSubmitting ||
+                                    !canRecipientBeModified(signer.id) ||
+                                    signers.length === 1
+                                  }
+                                  onClick={() => onRemoveSigner(index)}
+                                >
+                                  <TrashIcon className="h-4 w-4" />
+                                </button>
+                              </div>
                             </motion.fieldset>
                           </div>
                         )}

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -174,7 +174,7 @@ export const EnvelopeEditorSettingsDialog = ({
   const { t, i18n } = useLingui();
   const { toast } = useToast();
 
-  const { envelope, updateEnvelopeAsync } = useCurrentEnvelopeEditor();
+  const { envelope } = useCurrentEnvelopeEditor();
 
   const team = useCurrentTeam();
   const organisation = useCurrentOrganisation();
@@ -186,12 +186,14 @@ export const EnvelopeEditorSettingsDialog = ({
     documentAuth: envelope.authOptions,
   });
 
-  const createDefaultValues = () => {
-    return {
-      externalId: envelope.externalId || '',
+  const form = useForm<TAddSettingsFormSchema>({
+    resolver: zodResolver(ZAddSettingsFormSchema),
+    defaultValues: {
+      externalId: envelope.externalId || '', // Todo: String or undefined?
       visibility: envelope.visibility || '',
       globalAccessAuth: documentAuthOption?.globalAccessAuth || [],
       globalActionAuth: documentAuthOption?.globalActionAuth || [],
+
       meta: {
         subject: envelope.documentMeta.subject ?? '',
         message: envelope.documentMeta.message ?? '',
@@ -208,14 +210,12 @@ export const EnvelopeEditorSettingsDialog = ({
         emailSettings: ZDocumentEmailSettingsSchema.parse(envelope.documentMeta.emailSettings),
         signatureTypes: extractTeamSignatureSettings(envelope.documentMeta),
       },
-    };
-  };
-
-  const form = useForm<TAddSettingsFormSchema>({
-    resolver: zodResolver(ZAddSettingsFormSchema),
-    defaultValues: createDefaultValues(),
+    },
   });
 
+  const { mutateAsync: updateEnvelope } = trpc.envelope.update.useMutation();
+
+  // Todo: Envelopes - Extract into provider.
   const envelopeHasBeenSent =
     envelope.type === EnvelopeType.DOCUMENT &&
     envelope.recipients.some((recipient) => recipient.sendStatus === SendStatus.SENT);
@@ -230,6 +230,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
   const emails = emailData?.data || [];
 
+  // Todo: Envelopes this doesn't make sense (look at previous)
   const canUpdateVisibility = canAccessTeamDocument(team.currentTeamRole, envelope.visibility);
 
   const onFormSubmit = async (data: TAddSettingsFormSchema) => {
@@ -240,7 +241,9 @@ export const EnvelopeEditorSettingsDialog = ({
       .safeParse(data.globalAccessAuth);
 
     try {
-      await updateEnvelopeAsync({
+      await updateEnvelope({
+        envelopeId: envelope.id,
+        envelopeType: envelope.type,
         data: {
           externalId: data.externalId || null,
           visibility: data.visibility,
@@ -295,10 +298,12 @@ export const EnvelopeEditorSettingsDialog = ({
   ]);
 
   useEffect(() => {
-    form.reset(createDefaultValues());
+    form.reset();
     setActiveTab('general');
   }, [open, form]);
 
+  // Todo: Envelopes - Show error indicator if error is in different tab.
+
   const selectedTab = tabs.find((tab) => tab.id === activeTab);
 
   if (!selectedTab) {
@@ -321,7 +326,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
-        <div className="bg-accent/20 flex w-80 flex-col border-r">
+        <div className="flex w-80 flex-col border-r bg-gray-50">
           <DialogHeader className="p-6 pb-4">
             <DialogTitle>Document Settings</DialogTitle>
           </DialogHeader>
@@ -353,7 +358,7 @@ export const EnvelopeEditorSettingsDialog = ({
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onFormSubmit)}>
               <fieldset
-                className="flex h-[45rem] max-h-[calc(100vh-14rem)] w-full flex-col space-y-6 overflow-y-auto px-6 pt-6"
+                className="flex min-h-[45rem] w-full flex-col space-y-6 px-6 pt-6"
                 disabled={form.formState.isSubmitting}
                 key={activeTab}
               >

apps/remix/app/components/general/envelope-editor/envelope-editor.tsx

@@ -24,6 +24,7 @@ import {
   mapSecondaryIdToDocumentId,
   mapSecondaryIdToTemplateId,
 } from '@documenso/lib/utils/envelope';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -31,17 +32,17 @@ import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribute-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 { TemplateDeleteDialog } from '~/components/dialogs/template-delete-dialog';
 import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
+import { useCurrentTeam } from '~/providers/team';
 
-import { EnvelopeEditorFieldsPage } from './envelope-editor-fields-page';
 import EnvelopeEditorHeader from './envelope-editor-header';
-import { EnvelopeEditorPreviewPage } from './envelope-editor-preview-page';
-import { EnvelopeEditorUploadPage } from './envelope-editor-upload-page';
+import { EnvelopeEditorPageFields } from './envelope-editor-page-fields';
+import { EnvelopeEditorPagePreview } from './envelope-editor-page-preview';
+import { EnvelopeEditorPageUpload } from './envelope-editor-page-upload';
 
 type EnvelopeEditorStep = 'upload' | 'addFields' | 'preview';
 
@@ -73,16 +74,10 @@ export default function EnvelopeEditor() {
   const { t } = useLingui();
 
   const navigate = useNavigate();
+  const team = useCurrentTeam();
 
-  const {
-    envelope,
-    isDocument,
-    isTemplate,
-    isAutosaving,
-    flushAutosave,
-    relativePath,
-    editorFields,
-  } = useCurrentEnvelopeEditor();
+  const { envelope, isDocument, isTemplate, isAutosaving, flushAutosave } =
+    useCurrentEnvelopeEditor();
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -105,10 +100,13 @@ export default function EnvelopeEditor() {
     return 'upload';
   });
 
+  const documentsPath = formatDocumentsPath(team.url);
+  const templatesPath = formatTemplatesPath(team.url);
+
   const navigateToStep = (step: EnvelopeEditorStep) => {
     setCurrentStep(step);
 
-    void flushAutosave();
+    flushAutosave();
 
     if (!isStepLoading && isAutosaving) {
       setIsStepLoading(true);
@@ -130,18 +128,6 @@ export default function EnvelopeEditor() {
     }
   };
 
-  // Watch the URL params and setStep if the step changes.
-  useEffect(() => {
-    const stepParam = searchParams.get('step') || envelopeEditorSteps[0].id;
-
-    const foundStep = envelopeEditorSteps.find((step) => step.id === stepParam);
-
-    if (foundStep && foundStep.id !== currentStep) {
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      navigateToStep(foundStep.id as EnvelopeEditorStep);
-    }
-  }, [searchParams]);
-
   useEffect(() => {
     if (!isAutosaving) {
       setIsStepLoading(false);
@@ -152,22 +138,20 @@ export default function EnvelopeEditor() {
     envelopeEditorSteps.find((step) => step.id === currentStep) || envelopeEditorSteps[0];
 
   return (
-    <div className="dark:bg-background h-screen w-screen bg-gray-50">
+    <div className="h-screen w-screen bg-gray-50">
       <EnvelopeEditorHeader />
 
       {/* Main Content Area */}
-      <div className="flex h-[calc(100vh-4rem)] w-screen">
+      <div className="flex h-[calc(100vh-73px)] w-screen">
         {/* Left Section - Step Navigation */}
-        <div className="bg-background border-border flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4">
+        <div className="flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-gray-200 bg-white py-4">
           {/* Left section step selector. */}
           <div className="px-4">
-            <h3 className="text-foreground flex items-end justify-between text-sm font-semibold">
+            <h3 className="flex items-end justify-between text-sm font-semibold text-gray-900">
               {isDocument ? <Trans>Document Editor</Trans> : <Trans>Template Editor</Trans>}
 
-              <span className="text-muted-foreground bg-muted/50 ml-2 rounded border px-2 py-0.5 text-xs">
-                <Trans context="The step counter">
-                  Step {currentStepData.order}/{envelopeEditorSteps.length}
-                </Trans>
+              <span className="text-muted-foreground ml-2 rounded border bg-gray-50 px-2 py-0.5 text-xs">
+                Step {currentStepData.order}/{envelopeEditorSteps.length}
               </span>
             </h3>
 
@@ -192,17 +176,15 @@ export default function EnvelopeEditor() {
                     key={step.id}
                     className={`cursor-pointer rounded-lg p-3 transition-colors ${
                       isActive
-                        ? 'border border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
-                        : 'border border-gray-200 hover:bg-gray-50 dark:border-gray-400/20 dark:hover:bg-gray-400/10'
+                        ? 'border border-green-200 bg-green-50'
+                        : 'border border-gray-200 hover:bg-gray-50'
                     }`}
                     onClick={() => navigateToStep(step.id as EnvelopeEditorStep)}
                   >
                     <div className="flex items-center space-x-3">
                       <div
                         className={`rounded border p-2 ${
-                          isActive
-                            ? 'border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
-                            : 'border-gray-100 bg-gray-100 dark:border-gray-400/20 dark:bg-gray-400/10'
+                          isActive ? 'border-green-200 bg-green-50' : 'border-gray-100 bg-gray-100'
                         }`}
                       >
                         <Icon
@@ -212,14 +194,12 @@ export default function EnvelopeEditor() {
                       <div>
                         <div
                           className={`text-sm font-medium ${
-                            isActive
-                              ? 'text-green-900 dark:text-green-400'
-                              : 'text-foreground dark:text-muted-foreground'
+                            isActive ? 'text-green-900' : 'text-gray-700'
                           }`}
                         >
                           {t(step.title)}
                         </div>
-                        <div className="text-muted-foreground text-xs">{t(step.description)}</div>
+                        <div className="text-xs text-gray-500">{t(step.description)}</div>
                       </div>
                     </div>
                   </div>
@@ -232,25 +212,12 @@ export default function EnvelopeEditor() {
 
           {/* Quick Actions. */}
           <div className="space-y-3 px-4">
-            <h4 className="text-foreground text-sm font-semibold">
+            <h4 className="text-sm font-semibold text-gray-900">
               <Trans>Quick Actions</Trans>
             </h4>
-            <EnvelopeEditorSettingsDialog
-              trigger={
-                <Button variant="ghost" size="sm" className="w-full justify-start">
-                  <SettingsIcon className="mr-2 h-4 w-4" />
-                  {isDocument ? <Trans>Document Settings</Trans> : <Trans>Template Settings</Trans>}
-                </Button>
-              }
-            />
-
             {isDocument && (
               <EnvelopeDistributeDialog
-                envelope={{
-                  ...envelope,
-                  fields: editorFields.localFields,
-                }}
-                documentRootPath={relativePath.documentRootPath}
+                envelope={envelope}
                 trigger={
                   <Button variant="ghost" size="sm" className="w-full justify-start">
                     <SendIcon className="mr-2 h-4 w-4" />
@@ -272,6 +239,16 @@ export default function EnvelopeEditor() {
               />
             )}
 
+            <EnvelopeEditorSettingsDialog
+              trigger={
+                <Button variant="ghost" size="sm" className="w-full justify-start">
+                  <SettingsIcon className="mr-2 h-4 w-4" />
+                  {isDocument ? <Trans>Document Settings</Trans> : <Trans>Template Settings</Trans>}
+                </Button>
+              }
+            />
+
+            {/* Todo: Envelopes */}
             {/* <Button variant="ghost" size="sm" className="w-full justify-start">
               <FileText className="mr-2 h-4 w-4" />
               Save as Template
@@ -306,17 +283,11 @@ export default function EnvelopeEditor() {
               }
             />
 
-            <EnvelopeDownloadDialog
-              envelopeId={envelope.id}
-              envelopeStatus={envelope.status}
-              envelopeItems={envelope.envelopeItems}
-              trigger={
-                <Button variant="ghost" size="sm" className="w-full justify-start">
-                  <DownloadCloudIcon className="mr-2 h-4 w-4" />
-                  <Trans>Download PDF</Trans>
-                </Button>
-              }
-            />
+            {/* Todo: Allow selecting which document to download and/or the original */}
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <DownloadCloudIcon className="mr-2 h-4 w-4" />
+              <Trans>Download PDF</Trans>
+            </Button>
 
             <Button
               variant="ghost"
@@ -338,7 +309,7 @@ export default function EnvelopeEditor() {
               open={isDeleteDialogOpen}
               onOpenChange={setDeleteDialogOpen}
               onDelete={async () => {
-                await navigate(relativePath.documentRootPath);
+                await navigate(documentsPath);
               }}
             />
           ) : (
@@ -347,7 +318,7 @@ export default function EnvelopeEditor() {
               open={isDeleteDialogOpen}
               onOpenChange={setDeleteDialogOpen}
               onDelete={async () => {
-                await navigate(relativePath.templateRootPath);
+                await navigate(templatesPath);
               }}
             />
           )}
@@ -355,7 +326,7 @@ export default function EnvelopeEditor() {
           {/* Footer of left sidebar. */}
           <div className="mt-auto px-4">
             <Button variant="ghost" className="w-full justify-start" asChild>
-              <Link to={relativePath.basePath}>
+              <Link to={isDocument ? documentsPath : templatesPath}>
                 <ArrowLeftIcon className="mr-2 h-4 w-4" />
                 {isDocument ? (
                   <Trans>Return to documents</Trans>
@@ -368,14 +339,17 @@ export default function EnvelopeEditor() {
         </div>
 
         {/* Main Content - Changes based on current step */}
-        <AnimateGenericFadeInOut className="flex-1 overflow-y-auto" key={currentStep}>
-          {match({ currentStep, isStepLoading })
-            .with({ isStepLoading: true }, () => <SpinnerBox className="py-32" />)
-            .with({ currentStep: 'upload' }, () => <EnvelopeEditorUploadPage />)
-            .with({ currentStep: 'addFields' }, () => <EnvelopeEditorFieldsPage />)
-            .with({ currentStep: 'preview' }, () => <EnvelopeEditorPreviewPage />)
-            .exhaustive()}
-        </AnimateGenericFadeInOut>
+        <div className="flex-1 overflow-y-auto">
+          <p>{isAutosaving ? 'Autosaving...' : 'Not autosaving'}</p>
+          <AnimateGenericFadeInOut key={currentStep}>
+            {match({ currentStep, isStepLoading })
+              .with({ isStepLoading: true }, () => <SpinnerBox className="py-32" />)
+              .with({ currentStep: 'upload' }, () => <EnvelopeEditorPageUpload />)
+              .with({ currentStep: 'addFields' }, () => <EnvelopeEditorPageFields />)
+              .with({ currentStep: 'preview' }, () => <EnvelopeEditorPagePreview />)
+              .exhaustive()}
+          </AnimateGenericFadeInOut>
+        </div>
       </div>
     </div>
   );

apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx

@@ -20,17 +20,16 @@ export const EnvelopeItemSelector = ({
 }: EnvelopeItemSelectorProps) => {
   return (
     <button
-      title={typeof primaryText === 'string' ? primaryText : undefined}
-      className={`flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
+      className={`flex min-w-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
         isSelected
-          ? 'border-green-200 bg-green-50 text-green-900 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-400'
-          : 'border-border bg-muted/50 hover:bg-muted/70'
+          ? 'border-blue-200 bg-blue-50 text-blue-900'
+          : 'border-gray-200 bg-gray-50 hover:bg-gray-100'
       }`}
       {...buttonProps}
     >
       <div
-        className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium ${
-          isSelected ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-600'
+        className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium ${
+          isSelected ? 'bg-blue-100 text-blue-600' : 'bg-gray-200 text-gray-600'
         }`}
       >
         {number}
@@ -40,8 +39,8 @@ export const EnvelopeItemSelector = ({
         <div className="text-xs text-gray-500">{secondaryText}</div>
       </div>
       <div
-        className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
-          'bg-green-500': isSelected,
+        className={cn('h-2 w-2 rounded-full', {
+          'bg-blue-500': isSelected,
         })}
       ></div>
     </button>
@@ -62,7 +61,7 @@ export const EnvelopeRendererFileSelector = ({
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
   return (
-    <div className={cn('flex h-fit flex-shrink-0 space-x-2 overflow-x-auto p-4', className)}>
+    <div className={cn('flex h-fit space-x-2 overflow-x-auto p-4', className)}>
       {envelopeItems.map((doc, i) => (
         <EnvelopeItemSelector
           key={doc.id}

apps/remix/app/components/general/envelope-editor/envelope-generic-page-renderer.tsx

@@ -1,136 +1,141 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
-import { DocumentStatus, type Recipient, SigningStatus } from '@prisma/client';
-import type Konva from 'konva';
+import Konva from 'konva';
+import type { Layer } from 'konva/lib/Layer';
+import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
+import { usePageContext } from 'react-pdf';
 
-import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
-import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
-import { EnvelopeRecipientFieldTooltip } from '@documenso/ui/components/document/envelope-recipient-field-tooltip';
-
-type GenericLocalField = TEnvelope['fields'][number] & {
-  recipient: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>;
-};
 
 export default function EnvelopeGenericPageRenderer() {
-  const { i18n } = useLingui();
+  const pageContext = usePageContext();
 
-  const {
-    envelopeStatus,
-    currentEnvelopeItem,
-    fields,
-    recipients,
-    getRecipientColorKey,
-    setRenderError,
-    overrideSettings,
-  } = useCurrentEnvelopeRender();
+  if (!pageContext) {
+    throw new Error('Unable to find Page context.');
+  }
 
-  const {
-    stage,
-    pageLayer,
-    canvasElement,
-    konvaContainer,
-    pageContext,
-    scaledViewport,
-    unscaledViewport,
-  } = usePageRenderer(({ stage, pageLayer }) => {
-    createPageCanvas(stage, pageLayer);
-  });
+  const { _className, page, rotate, scale } = pageContext;
 
-  const { _className, scale } = pageContext;
+  if (!page) {
+    throw new Error('Attempted to render page canvas, but no page was specified.');
+  }
 
-  const localPageFields = useMemo((): GenericLocalField[] => {
-    if (envelopeStatus === DocumentStatus.COMPLETED) {
-      return [];
-    }
+  const { t } = useLingui();
+  const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();
 
-    return fields
-      .filter(
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+  const konvaContainer = useRef<HTMLDivElement>(null);
+
+  const stage = useRef<Konva.Stage | null>(null);
+  const pageLayer = useRef<Layer | null>(null);
+
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotate }),
+    [page, rotate, scale],
+  );
+
+  const localPageFields = useMemo(
+    () =>
+      fields.filter(
         (field) =>
           field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
-      )
-      .map((field) => {
-        const recipient = recipients.find((recipient) => recipient.id === field.recipientId);
+      ),
+    [fields, pageContext.pageNumber],
+  );
 
-        if (!recipient) {
-          throw new Error(`Recipient not found for field ${field.id}`);
-        }
+  // Custom renderer from Konva examples.
+  useEffect(
+    function drawPageOnCanvas() {
+      if (!page) {
+        return;
+      }
 
-        const isInserted = recipient.signingStatus === SigningStatus.SIGNED && field.inserted;
+      const { current: canvas } = canvasElement;
+      const { current: container } = konvaContainer;
 
-        return {
-          ...field,
-          inserted: isInserted,
-          customText: isInserted ? field.customText : '',
-          recipient,
-        };
-      })
-      .filter(
-        ({ inserted, fieldMeta, recipient }) =>
-          (recipient.signingStatus === SigningStatus.SIGNED ? inserted : true) ||
-          fieldMeta?.readOnly,
-      );
-  }, [fields, pageContext.pageNumber, currentEnvelopeItem?.id, recipients]);
+      if (!canvas || !container) {
+        return;
+      }
 
-  const unsafeRenderFieldOnLayer = (field: GenericLocalField) => {
+      const renderContext: RenderParameters = {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
+        viewport,
+      };
+
+      const cancellable = page.render(renderContext);
+      const runningTask = cancellable;
+
+      cancellable.promise.catch(() => {
+        // Intentionally empty
+      });
+
+      void cancellable.promise.then(() => {
+        createPageCanvas(container);
+      });
+
+      return () => {
+        runningTask.cancel();
+      };
+    },
+    [page, viewport],
+  );
+
+  const renderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
       return;
     }
 
-    const fieldTranslations = getClientSideFieldTranslations(i18n);
-
     renderField({
-      scale,
       pageLayer: pageLayer.current,
       field: {
         renderId: field.id.toString(),
         ...field,
+        customText: '',
         width: Number(field.width),
         height: Number(field.height),
         positionX: Number(field.positionX),
         positionY: Number(field.positionY),
+        inserted: false,
         fieldMeta: field.fieldMeta,
-        signature: {
-          signatureImageAsBase64: '',
-          typedSignature: fieldTranslations.SIGNATURE,
-        },
       },
-      translations: fieldTranslations,
-      pageWidth: unscaledViewport.width,
-      pageHeight: unscaledViewport.height,
-      color: getRecipientColorKey(field.recipientId),
+      pageWidth: viewport.width,
+      pageHeight: viewport.height,
+      // color: getRecipientColorKey(field.recipientId),
+      color: 'purple', // Todo
       editable: false,
-      mode: overrideSettings?.mode ?? 'edit',
+      mode: 'sign',
     });
   };
 
-  const renderFieldOnLayer = (field: GenericLocalField) => {
-    try {
-      unsafeRenderFieldOnLayer(field);
-    } catch (err) {
-      console.error(err);
-      setRenderError(true);
-    }
-  };
-
   /**
-   * Initialize the Konva page canvas and all fields and interactions.
+   * Create the initial Konva page canvas and initialize all fields and interactions.
    */
-  const createPageCanvas = (_currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
+  const createPageCanvas = (container: HTMLDivElement) => {
+    stage.current = new Konva.Stage({
+      container,
+      width: viewport.width,
+      height: viewport.height,
+    });
+
+    // Create the main layer for interactive elements.
+    pageLayer.current = new Konva.Layer();
+    stage.current?.add(pageLayer.current);
+
     // Render the fields.
     for (const field of localPageFields) {
       renderFieldOnLayer(field);
     }
 
-    currentPageLayer.batchDraw();
+    pageLayer.current.batchDraw();
   };
 
   /**
-   * Render fields when they are added or removed
+   * Render fields when they are added or removed from the localFields.
    */
   useEffect(() => {
     if (!pageLayer.current || !stage.current) {
@@ -143,12 +148,14 @@ export default function EnvelopeGenericPageRenderer() {
         group.name() === 'field-group' &&
         !localPageFields.some((field) => field.id.toString() === group.id())
       ) {
+        console.log('Field removed, removing from canvas');
         group.destroy();
       }
     });
 
     // If it exists, rerender.
     localPageFields.forEach((field) => {
+      console.log('Field created/updated, rendering on canvas');
       renderFieldOnLayer(field);
     });
 
@@ -160,29 +167,14 @@ export default function EnvelopeGenericPageRenderer() {
   }
 
   return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
-      {overrideSettings?.showRecipientTooltip &&
-        localPageFields.map((field) => (
-          <EnvelopeRecipientFieldTooltip
-            key={field.id}
-            field={field}
-            showFieldStatus={overrideSettings?.showRecipientSigningStatus}
-            showRecipientTooltip={overrideSettings?.showRecipientTooltip}
-          />
-        ))}
+    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
+      <div className="konva-container absolute inset-0 z-10" ref={konvaContainer}></div>
 
-      {/* The element Konva will inject it's canvas into. */}
-      <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
-
-      {/* Canvas the PDF will be rendered on. */}
       <canvas
         className={`${_className}__canvas z-0`}
+        height={viewport.height}
         ref={canvasElement}
-        height={scaledViewport.height}
-        width={scaledViewport.width}
+        width={viewport.width}
       />
     </div>
   );

apps/remix/app/components/general/envelope-signing/envelope-signer-form.tsx

@@ -1,33 +1,17 @@
 import { useMemo } from 'react';
 
-import { Plural, Trans } from '@lingui/react/macro';
-import { FieldType, RecipientRole } from '@prisma/client';
+import { Trans } from '@lingui/react/macro';
+import { FieldType } from '@prisma/client';
 
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 
-import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
-
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
 export default function EnvelopeSignerForm() {
-  const {
-    fullName,
-    signature,
-    setFullName,
-    setSignature,
-    envelope,
-    recipientFields,
-    recipient,
-    assistantFields,
-    assistantRecipients,
-    selectedAssistantRecipient,
-    setSelectedAssistantRecipientId,
-  } = useRequiredEnvelopeSigningContext();
-
-  const { isNameLocked, isEmailLocked } = useEmbedSigningContext() || {};
+  const { fullName, signature, setFullName, setSignature, envelope, recipientFields } =
+    useRequiredEnvelopeSigningContext();
 
   const hasSignatureField = useMemo(() => {
     return recipientFields.some((field) => field.type === FieldType.SIGNATURE);
@@ -35,63 +19,6 @@ export default function EnvelopeSignerForm() {
 
   const isSubmitting = false;
 
-  if (recipient.role === RecipientRole.VIEWER) {
-    return null;
-  }
-
-  if (recipient.role === RecipientRole.ASSISTANT) {
-    return (
-      <fieldset className="embed--DocumentWidgetForm dark:bg-background border-border rounded-2xl sm:border sm:p-3">
-        <RadioGroup
-          className="gap-0 space-y-2 shadow-none sm:space-y-3"
-          value={selectedAssistantRecipient?.id?.toString()}
-          onValueChange={(value) => {
-            setSelectedAssistantRecipientId(Number(value));
-          }}
-        >
-          {assistantRecipients
-            .filter((r) => r.fields.length > 0)
-            .map((r) => (
-              <div
-                key={r.id}
-                className="bg-widget border-border relative flex flex-col gap-4 rounded-lg border p-4"
-              >
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <RadioGroupItem
-                      id={r.id.toString()}
-                      value={r.id.toString()}
-                      className="after:absolute after:inset-0"
-                    />
-
-                    <div className="grid grow gap-1">
-                      <Label className="inline-flex items-start" htmlFor={r.id.toString()}>
-                        {r.name}
-
-                        {r.id === recipient.id && (
-                          <span className="text-muted-foreground ml-2">
-                            <Trans>(You)</Trans>
-                          </span>
-                        )}
-                      </Label>
-                      <p className="text-muted-foreground text-xs">{r.email}</p>
-                    </div>
-                  </div>
-                  <div className="text-muted-foreground text-xs leading-[inherit]">
-                    <Plural
-                      value={assistantFields.filter((field) => field.recipientId === r.id).length}
-                      one="# field"
-                      other="# fields"
-                    />
-                  </div>
-                </div>
-              </div>
-            ))}
-        </RadioGroup>
-      </fieldset>
-    );
-  }
-
   return (
     <fieldset disabled={isSubmitting} className="flex flex-1 flex-col gap-4">
       <div className="flex flex-1 flex-col gap-y-4">
@@ -105,8 +32,7 @@ export default function EnvelopeSignerForm() {
             id="full-name"
             className="bg-background mt-2"
             value={fullName}
-            disabled={isNameLocked}
-            onChange={(e) => !isNameLocked && setFullName(e.target.value.trimStart())}
+            onChange={(e) => setFullName(e.target.value.trimStart())}
           />
         </div>
 

apps/remix/app/components/general/envelope-signing/envelope-signer-header.tsx

@@ -1,142 +1,131 @@
-import { Plural, Trans } from '@lingui/react/macro';
-import { EnvelopeType, RecipientRole } from '@prisma/client';
-import { BanIcon, DownloadCloudIcon } from 'lucide-react';
-import { Link } from 'react-router';
-import { match } from 'ts-pattern';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+import { Link, useNavigate } from 'react-router';
 
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+import { trpc } from '@documenso/trpc/react';
 import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
 import { Separator } from '@documenso/ui/primitives/separator';
 
-import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
-import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 import { BrandingLogo } from '~/components/general/branding-logo';
 
-import { BrandingLogoIcon } from '../branding-logo-icon';
-import { DocumentSigningRejectDialog } from '../document-signing/document-signing-reject-dialog';
+import { DocumentSigningCompleteDialog } from '../document-signing/document-signing-complete-dialog';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
-import { EnvelopeSignerCompleteDialog } from './envelope-signing-complete-dialog';
 
 export const EnvelopeSignerHeader = () => {
-  const { envelopeData, envelope, recipientFieldsRemaining, recipient } =
+  const { t } = useLingui();
+
+  const navigate = useNavigate();
+  const analytics = useAnalytics();
+
+  const { envelope, setShowPendingFieldTooltip, recipientFieldsRemaining, recipient } =
     useRequiredEnvelopeSigningContext();
 
+  const { currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  const {
+    mutateAsync: completeDocument,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
+
+  const handleOnNextFieldClick = () => {
+    const nextField = recipientFieldsRemaining[0];
+
+    if (!nextField) {
+      setShowPendingFieldTooltip(false);
+      return;
+    }
+
+    if (nextField.envelopeItemId !== currentEnvelopeItem?.id) {
+      setCurrentEnvelopeItem(nextField.envelopeItemId);
+    }
+
+    const fieldTooltip = document.querySelector(`#field-tooltip`);
+
+    if (fieldTooltip) {
+      fieldTooltip.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+    setShowPendingFieldTooltip(true);
+  };
+
+  const handleOnCompleteClick = async (
+    nextSigner?: { name: string; email: string },
+    accessAuthOptions?: TRecipientAccessAuth,
+  ) => {
+    const payload = {
+      token: recipient.token,
+      documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+      authOptions: accessAuthOptions,
+      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
+    };
+
+    await completeDocument(payload);
+
+    analytics.capture('App: Recipient has completed signing', {
+      signerId: recipient.id,
+      documentId: envelope.id,
+      timestamp: new Date().toISOString(),
+    });
+
+    if (envelope.documentMeta.redirectUrl) {
+      window.location.href = envelope.documentMeta.redirectUrl;
+    } else {
+      await navigate(`/sign/${recipient.token}/complete`);
+    }
+  };
+
   return (
-    <nav className="embed--DocumentWidgetHeader bg-background border-border max-w-screen flex flex-row justify-between border-b 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">
-        <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>
+    <nav className="w-full border-b border-gray-200 bg-white px-6 py-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <Link to="/">
+            <BrandingLogo className="h-6 w-auto" />
+          </Link>
+          <Separator orientation="vertical" className="h-6" />
 
-        <h1
-          title={envelope.title}
-          className="text-foreground min-w-0 truncate text-base font-semibold md:hidden"
-        >
-          {envelope.title}
-        </h1>
+          <div className="flex items-center space-x-2">
+            <h1 className="whitespace-nowrap text-sm font-medium text-gray-600">
+              {envelope.title}
+            </h1>
 
-        <Separator orientation="vertical" className="hidden h-6 md:block" />
-
-        <div className="hidden items-center space-x-2 md:flex">
-          <h1 className="text-foreground whitespace-nowrap text-sm font-medium">
-            {envelope.title}
-          </h1>
-
-          <Badge>
-            {match(recipient.role)
-              .with(RecipientRole.VIEWER, () => <Trans>Viewer</Trans>)
-              .with(RecipientRole.SIGNER, () => <Trans>Signer</Trans>)
-              .with(RecipientRole.APPROVER, () => <Trans>Approver</Trans>)
-              .with(RecipientRole.ASSISTANT, () => <Trans>Assistant</Trans>)
-              .otherwise(() => null)}
-          </Badge>
+            <Badge variant="secondary">
+              <Trans>Approver</Trans>
+            </Badge>
+          </div>
         </div>
-      </div>
 
-      {/* Right side - Desktop content */}
-      <div className="hidden items-center space-x-2 lg:flex">
-        <p className="text-muted-foreground mr-2 flex-shrink-0 text-sm">
-          <Plural
-            one="1 Field Remaining"
-            other="# Fields Remaining"
-            value={recipientFieldsRemaining.length}
+        <div className="flex items-center space-x-2">
+          <p className="text-muted-foreground mr-2 flex-shrink-0 text-sm">
+            <Plural
+              one="1 Field Remaining"
+              other="# Fields Remaining"
+              value={recipientFieldsRemaining.length}
+            />
+          </p>
+
+          <DocumentSigningCompleteDialog
+            isSubmitting={isPending}
+            onSignatureComplete={handleOnCompleteClick}
+            documentTitle={envelope.title}
+            fields={recipientFieldsRemaining}
+            fieldsValidated={handleOnNextFieldClick}
+            recipient={recipient}
+            // Todo: Envelopes
+            allowDictateNextSigner={envelope.documentMeta.allowDictateNextSigner}
+            // defaultNextSigner={
+            //   nextRecipient
+            //     ? { name: nextRecipient.name, email: nextRecipient.email }
+            //     : undefined
+            // }
+            // Todo: Envelopes - use
+            // buttonSize="sm"
           />
-        </p>
-
-        <EnvelopeSignerCompleteDialog />
-      </div>
-
-      {/* Mobile Actions button */}
-      <div className="flex-shrink-0 lg:hidden">
-        <MobileDropdownMenu />
+        </div>
       </div>
     </nav>
   );
 };
-
-const MobileDropdownMenu = () => {
-  const { envelope, recipient } = useRequiredEnvelopeSigningContext();
-
-  const { allowDocumentRejection } = useEmbedSigningContext() || {};
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm">
-          <Trans>Actions</Trans>
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="end">
-        <EnvelopeDownloadDialog
-          envelopeId={envelope.id}
-          envelopeStatus={envelope.status}
-          envelopeItems={envelope.envelopeItems}
-          token={recipient.token}
-          trigger={
-            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
-              <div>
-                <DownloadCloudIcon className="mr-2 h-4 w-4" />
-                <Trans>Download PDF</Trans>
-              </div>
-            </DropdownMenuItem>
-          }
-        />
-
-        {envelope.type === EnvelopeType.DOCUMENT && allowDocumentRejection !== false && (
-          <DocumentSigningRejectDialog
-            documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
-            token={recipient.token}
-            trigger={
-              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
-                <div>
-                  <BanIcon className="mr-2 h-4 w-4" />
-                  <Trans>Reject</Trans>
-                </div>
-              </DropdownMenuItem>
-            }
-          />
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -1,39 +1,22 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
-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 { useLingui } from '@lingui/react/macro';
+import { type Field, FieldType } from '@prisma/client';
+import Konva from 'konva';
+import type { Layer } from 'konva/lib/Layer';
 import type { KonvaEventObject } from 'konva/lib/Node';
+import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
+import { usePageContext } from 'react-pdf';
 import { match } from 'ts-pattern';
 
-import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
-import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
-import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
-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 { 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';
-import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
-import { EnvelopeRecipientFieldTooltip } from '@documenso/ui/components/document/envelope-recipient-field-tooltip';
-import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
-import { handleCheckboxFieldClick } from '~/utils/field-signing/checkbox-field';
 import { handleDropdownFieldClick } from '~/utils/field-signing/dropdown-field';
 import { handleEmailFieldClick } from '~/utils/field-signing/email-field';
 import { handleInitialsFieldClick } from '~/utils/field-signing/initial-field';
@@ -42,99 +25,102 @@ import { handleNumberFieldClick } from '~/utils/field-signing/number-field';
 import { handleSignatureFieldClick } from '~/utils/field-signing/signature-field';
 import { handleTextFieldClick } from '~/utils/field-signing/text-field';
 
-import { useRequiredDocumentSigningAuthContext } from '../document-signing/document-signing-auth-provider';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
-type GenericLocalField = TEnvelope['fields'][number] & {
-  recipient: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>;
-};
-
 export default function EnvelopeSignerPageRenderer() {
-  const { t, i18n } = useLingui();
-  const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
-  const { sessionData } = useOptionalSession();
+  const pageContext = usePageContext();
 
-  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
-  const { toast } = useToast();
+  if (!pageContext) {
+    throw new Error('Unable to find Page context.');
+  }
+
+  const { _className, page, rotate, scale } = pageContext;
+
+  if (!page) {
+    throw new Error('Attempted to render page canvas, but no page was specified.');
+  }
+
+  const { t } = useLingui();
+
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
   const {
     envelopeData,
-    recipient,
     recipientFields,
     recipientFieldsRemaining,
     showPendingFieldTooltip,
-    signField: signFieldInternal,
+    signField,
     email,
     setEmail,
     fullName,
     setFullName,
     signature,
     setSignature,
-    selectedAssistantRecipientFields,
-    selectedAssistantRecipient,
-    isDirectTemplate,
   } = useRequiredEnvelopeSigningContext();
 
-  const { onFieldSigned, onFieldUnsigned } = useEmbedSigningContext() || {};
-
-  const {
-    stage,
-    pageLayer,
-    canvasElement,
-    konvaContainer,
-    pageContext,
-    scaledViewport,
-    unscaledViewport,
-  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer));
-
-  const { _className, scale } = pageContext;
+  console.log({ fullName });
 
   const { envelope } = envelopeData;
 
-  const localPageFields = useMemo(() => {
-    let fieldsToRender = recipientFields;
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+  const konvaContainer = useRef<HTMLDivElement>(null);
 
-    if (recipient.role === RecipientRole.ASSISTANT) {
-      fieldsToRender = selectedAssistantRecipientFields;
-    }
+  const stage = useRef<Konva.Stage | null>(null);
+  const pageLayer = useRef<Layer | null>(null);
 
-    return fieldsToRender.filter(
-      (field) =>
-        field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
-    );
-  }, [recipientFields, selectedAssistantRecipientFields, pageContext.pageNumber]);
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotate }),
+    [page, rotate, scale],
+  );
 
-  /**
-   * Returns fields that have been fully signed by other recipients for this specific
-   * page.
-   */
-  const localPageOtherRecipientFields = useMemo((): GenericLocalField[] => {
-    const signedRecipients = envelope.recipients.filter(
-      (recipient) => recipient.signingStatus === SigningStatus.SIGNED,
-    );
+  const localPageFields = useMemo(
+    () =>
+      recipientFields.filter(
+        (field) =>
+          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+      ),
+    [recipientFields, pageContext.pageNumber],
+  );
 
-    return signedRecipients.flatMap((recipient) => {
-      return recipient.fields
-        .filter(
-          (field) =>
-            field.page === pageContext.pageNumber &&
-            field.envelopeItemId === currentEnvelopeItem?.id &&
-            (field.inserted || field.fieldMeta?.readOnly),
-        )
-        .map((field) => ({
-          ...field,
-          recipient: {
-            id: recipient.id,
-            name: recipient.name,
-            email: recipient.email,
-            signingStatus: recipient.signingStatus,
-            role: recipient.role,
-          },
-        }));
-    });
-  }, [envelope.recipients, pageContext.pageNumber]);
+  // Custom renderer from Konva examples.
+  useEffect(
+    function drawPageOnCanvas() {
+      if (!page) {
+        return;
+      }
 
-  const unsafeRenderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+      const { current: canvas } = canvasElement;
+      const { current: container } = konvaContainer;
+
+      if (!canvas || !container) {
+        return;
+      }
+
+      const renderContext: RenderParameters = {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
+        viewport,
+      };
+
+      const cancellable = page.render(renderContext);
+      const runningTask = cancellable;
+
+      cancellable.promise.catch(() => {
+        // Intentionally empty
+      });
+
+      void cancellable.promise.then(() => {
+        createPageCanvas(container);
+      });
+
+      return () => {
+        runningTask.cancel();
+      };
+    },
+    [page, viewport],
+  );
+
+  const renderFieldOnLayer = (unparsedField: Field) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
       return;
@@ -151,7 +137,6 @@ export default function EnvelopeSignerPageRenderer() {
     }
 
     const { fieldGroup } = renderField({
-      scale,
       pageLayer: pageLayer.current,
       field: {
         renderId: fieldToRender.id.toString(),
@@ -160,11 +145,9 @@ export default function EnvelopeSignerPageRenderer() {
         height: Number(fieldToRender.height),
         positionX: Number(fieldToRender.positionX),
         positionY: Number(fieldToRender.positionY),
-        signature: unparsedField.signature,
       },
-      translations: getClientSideFieldTranslations(i18n),
-      pageWidth: unscaledViewport.width,
-      pageHeight: unscaledViewport.height,
+      pageWidth: viewport.width,
+      pageHeight: viewport.height,
       color,
       mode: 'sign',
     });
@@ -175,36 +158,20 @@ export default function EnvelopeSignerPageRenderer() {
 
       const { width: fieldWidth, height: fieldHeight } = fieldGroup.getClientRect();
 
-      const foundField = localPageFields.find((f) => f.id === unparsedField.id);
+      const foundField = recipientFields.find((f) => f.id === unparsedField.id);
       const foundLoadingGroup = currentTarget.findOne('.loading-spinner-group');
 
       if (!foundField || foundLoadingGroup || foundField.fieldMeta?.readOnly) {
         return;
       }
 
-      let localEmail: string | null = email;
-      let localFullName: string | null = fullName;
-      let placeholderEmail: string | null = null;
-
-      if (recipient.role === RecipientRole.ASSISTANT) {
-        localEmail = selectedAssistantRecipient?.email || null;
-        localFullName = selectedAssistantRecipient?.name || null;
-      }
-
-      // Allows us let the user set a different email than their current logged in email.
-      if (isDirectTemplate) {
-        placeholderEmail = sessionData?.user?.email || email || recipient.email;
-
-        if (!placeholderEmail || placeholderEmail === DIRECT_TEMPLATE_RECIPIENT_EMAIL) {
-          placeholderEmail = null;
-        }
-      }
-
       const loadingSpinnerGroup = createSpinner({
-        fieldWidth: fieldWidth / scale,
-        fieldHeight: fieldHeight / scale,
+        fieldWidth,
+        fieldHeight,
       });
 
+      fieldGroup.add(loadingSpinnerGroup);
+
       const parsedFoundField = ZFullFieldSchema.parse(foundField);
 
       match(parsedFoundField)
@@ -212,39 +179,34 @@ export default function EnvelopeSignerPageRenderer() {
          * CHECKBOX FIELD.
          */
         .with({ type: FieldType.CHECKBOX }, (field) => {
-          const clickedCheckboxIndex = Number(target.getAttr('internalCheckboxIndex'));
+          const { fieldMeta } = field;
 
-          if (Number.isNaN(clickedCheckboxIndex)) {
-            return;
-          }
+          const { values } = fieldMeta;
 
-          handleCheckboxFieldClick({ field, clickedCheckboxIndex })
-            .then(async (payload) => {
-              if (payload) {
-                fieldGroup.add(loadingSpinnerGroup);
-                await signField(field.id, payload);
-              }
-            })
-            .finally(() => {
-              loadingSpinnerGroup.destroy();
-            });
+          const checkedValues = (values || [])
+            .map((v) => ({
+              ...v,
+              checked: v.id === target.getAttr('internalCheckboxId') ? !v.checked : v.checked,
+            }))
+            .filter((v) => v.checked);
+
+          void signField(field.id, {
+            type: FieldType.CHECKBOX,
+            value: checkedValues.map((v) => v.id),
+          }).finally(() => {
+            loadingSpinnerGroup.destroy();
+          });
         })
         /**
          * RADIO FIELD.
          */
         .with({ type: FieldType.RADIO }, (field) => {
-          const selectedRadioIndex = Number(target.getAttr('internalRadioIndex'));
-          const fieldCustomText = Number(field.customText);
+          const { fieldMeta } = foundField;
 
-          if (Number.isNaN(selectedRadioIndex)) {
-            return;
-          }
-
-          fieldGroup.add(loadingSpinnerGroup);
+          const checkedValue = target.getAttr('internalRadioValue');
 
           // Uncheck the value if it's already pressed.
-          const value =
-            field.inserted && selectedRadioIndex === fieldCustomText ? null : selectedRadioIndex;
+          const value = field.inserted && checkedValue === field.customText ? null : checkedValue;
 
           void signField(field.id, {
             type: FieldType.RADIO,
@@ -260,7 +222,6 @@ export default function EnvelopeSignerPageRenderer() {
           handleNumberFieldClick({ field, number: null })
             .then(async (payload) => {
               if (payload) {
-                fieldGroup.add(loadingSpinnerGroup);
                 await signField(field.id, payload);
               }
             })
@@ -275,7 +236,6 @@ export default function EnvelopeSignerPageRenderer() {
           handleTextFieldClick({ field, text: null })
             .then(async (payload) => {
               if (payload) {
-                fieldGroup.add(loadingSpinnerGroup);
                 await signField(field.id, payload);
               }
             })
@@ -287,11 +247,10 @@ export default function EnvelopeSignerPageRenderer() {
          * EMAIL FIELD.
          */
         .with({ type: FieldType.EMAIL }, (field) => {
-          handleEmailFieldClick({ field, email: localEmail, placeholderEmail })
+          handleEmailFieldClick({ field, email })
             .then(async (payload) => {
               if (payload) {
-                fieldGroup.add(loadingSpinnerGroup);
-                await signField(field.id, payload);
+                await signField(field.id, payload); // Todo: Envelopes - Handle errors
               }
 
               if (payload?.value) {
@@ -306,12 +265,11 @@ export default function EnvelopeSignerPageRenderer() {
          * INITIALS FIELD.
          */
         .with({ type: FieldType.INITIALS }, (field) => {
-          const initials = localFullName ? extractInitials(localFullName) : null;
+          const initials = fullName ? extractInitials(fullName) : null;
 
           handleInitialsFieldClick({ field, initials })
             .then(async (payload) => {
               if (payload) {
-                fieldGroup.add(loadingSpinnerGroup);
                 await signField(field.id, payload);
               }
             })
@@ -323,10 +281,9 @@ export default function EnvelopeSignerPageRenderer() {
          * NAME FIELD.
          */
         .with({ type: FieldType.NAME }, (field) => {
-          handleNameFieldClick({ field, name: localFullName })
+          handleNameFieldClick({ field, name: fullName })
             .then(async (payload) => {
               if (payload) {
-                fieldGroup.add(loadingSpinnerGroup);
                 await signField(field.id, payload);
               }
 
@@ -345,7 +302,6 @@ export default function EnvelopeSignerPageRenderer() {
           handleDropdownFieldClick({ field, text: null })
             .then(async (payload) => {
               if (payload) {
-                fieldGroup.add(loadingSpinnerGroup);
                 await signField(field.id, payload);
               }
 
@@ -359,8 +315,6 @@ export default function EnvelopeSignerPageRenderer() {
          * DATE FIELD.
          */
         .with({ type: FieldType.DATE }, (field) => {
-          fieldGroup.add(loadingSpinnerGroup);
-
           void signField(field.id, {
             type: FieldType.DATE,
             value: !field.inserted,
@@ -372,6 +326,7 @@ export default function EnvelopeSignerPageRenderer() {
          * SIGNATURE FIELD.
          */
         .with({ type: FieldType.SIGNATURE }, (field) => {
+          // Todo: Envelopes - Reauth
           handleSignatureFieldClick({
             field,
             signature,
@@ -381,22 +336,11 @@ export default function EnvelopeSignerPageRenderer() {
           })
             .then(async (payload) => {
               if (payload) {
-                fieldGroup.add(loadingSpinnerGroup);
+                await signField(field.id, payload);
+              }
 
-                if (payload.value) {
-                  void executeActionAuthProcedure({
-                    onReauthFormSubmit: async (authOptions) => {
-                      await signField(field.id, payload, authOptions);
-
-                      loadingSpinnerGroup.destroy();
-                    },
-                    actionTarget: field.type,
-                  });
-
-                  setSignature(payload.value);
-                } else {
-                  await signField(field.id, payload);
-                }
+              if (payload?.value) {
+                setSignature(payload.value);
               }
             })
             .finally(() => {
@@ -404,99 +348,38 @@ export default function EnvelopeSignerPageRenderer() {
             });
         })
         .exhaustive();
+
+      console.log('Field clicked');
     };
 
-    fieldGroup.off('pointerdown');
-    fieldGroup.on('pointerdown', handleFieldGroupClick);
+    fieldGroup.off('click');
+    fieldGroup.on('click', handleFieldGroupClick);
   };
 
-  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
-    try {
-      unsafeRenderFieldOnLayer(unparsedField);
-    } catch (err) {
-      console.error(err);
-      setRenderError(true);
-    }
-  };
+  /**
+   * Create the initial Konva page canvas and initialize all fields and interactions.
+   */
+  const createPageCanvas = (container: HTMLDivElement) => {
+    stage.current = new Konva.Stage({
+      container,
+      width: viewport.width,
+      height: viewport.height,
+    });
 
-  const renderFields = () => {
-    if (!pageLayer.current) {
-      console.error('Layer not loaded yet');
-      return;
-    }
+    // Create the main layer for interactive elements.
+    pageLayer.current = new Konva.Layer();
+    stage.current?.add(pageLayer.current);
 
-    // Render current recipient fields.
+    console.log({
+      localPageFields,
+    });
+
+    // Render the fields.
     for (const field of localPageFields) {
       renderFieldOnLayer(field);
     }
 
-    // Render other recipient signed and inserted fields.
-    for (const field of localPageOtherRecipientFields) {
-      try {
-        renderField({
-          scale,
-          pageLayer: pageLayer.current,
-          field: {
-            renderId: field.id.toString(),
-            ...field,
-            width: Number(field.width),
-            height: Number(field.height),
-            positionX: Number(field.positionX),
-            positionY: Number(field.positionY),
-            fieldMeta: field.fieldMeta,
-          },
-          translations: getClientSideFieldTranslations(i18n),
-          pageWidth: unscaledViewport.width,
-          pageHeight: unscaledViewport.height,
-          color: 'readOnly',
-          editable: false,
-          mode: 'sign',
-        });
-      } catch (err) {
-        console.error('Unable to render one or more fields belonging to other recipients.');
-        console.error(err);
-      }
-    }
-  };
-
-  const signField = async (
-    fieldId: number,
-    payload: TSignEnvelopeFieldValue,
-    authOptions?: TRecipientActionAuth,
-  ) => {
-    try {
-      const { inserted } = await signFieldInternal(fieldId, payload, authOptions);
-
-      // ?: The two callbacks below are used within the embedding context
-      if (inserted && onFieldSigned) {
-        const value = payload.value ? JSON.stringify(payload.value) : undefined;
-        const isBase64 = value ? isBase64Image(value) : undefined;
-
-        onFieldSigned({ fieldId, value, isBase64 });
-      }
-
-      if (!inserted && onFieldUnsigned) {
-        onFieldUnsigned({ fieldId });
-      }
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: t`Error`,
-        description: t`An error occurred while signing the field.`,
-        variant: 'destructive',
-      });
-
-      throw err;
-    }
-  };
-
-  /**
-   * Initialize the Konva page canvas and all fields and interactions.
-   */
-  const createPageCanvas = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
-    renderFields();
-    currentPageLayer.batchDraw();
+    pageLayer.current.batchDraw();
   };
 
   /**
@@ -507,67 +390,27 @@ export default function EnvelopeSignerPageRenderer() {
       return;
     }
 
-    renderFields();
+    localPageFields.forEach((field) => {
+      console.log('Field changed/inserted, rendering on canvas');
+      renderFieldOnLayer(field);
+    });
 
     pageLayer.current.batchDraw();
   }, [localPageFields, showPendingFieldTooltip, fullName, signature, email]);
 
-  /**
-   * Rerender the whole page if the selected assistant recipient changes.
-   */
-  useEffect(() => {
-    if (!pageLayer.current || !stage.current) {
-      return;
-    }
-
-    // Rerender the whole page.
-    pageLayer.current.destroyChildren();
-
-    renderFields();
-
-    pageLayer.current.batchDraw();
-  }, [selectedAssistantRecipient]);
-
   if (!currentEnvelopeItem) {
     return null;
   }
 
   return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
-      {showPendingFieldTooltip &&
-        recipientFieldsRemaining.length > 0 &&
-        recipientFieldsRemaining[0]?.envelopeItemId === currentEnvelopeItem?.id &&
-        recipientFieldsRemaining[0]?.page === pageContext.pageNumber && (
-          <EnvelopeFieldToolTip
-            key={recipientFieldsRemaining[0].id}
-            field={recipientFieldsRemaining[0]}
-            color="warning"
-          >
-            <Trans>Click to insert field</Trans>
-          </EnvelopeFieldToolTip>
-        )}
-
-      {localPageOtherRecipientFields.map((field) => (
-        <EnvelopeRecipientFieldTooltip
-          key={field.id}
-          field={field}
-          showFieldStatus={true}
-          showRecipientTooltip={true}
-        />
-      ))}
-
-      {/* The element Konva will inject it's canvas into. */}
+    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
       <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
 
-      {/* Canvas the PDF will be rendered on. */}
       <canvas
         className={`${_className}__canvas z-0`}
+        height={viewport.height}
         ref={canvasElement}
-        height={scaledViewport.height}
-        width={scaledViewport.width}
+        width={viewport.width}
       />
     </div>
   );

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

@@ -1,233 +0,0 @@
-import { useMemo } from 'react';
-
-import { useLingui } from '@lingui/react/macro';
-import { FieldType } from '@prisma/client';
-import { useNavigate, useRevalidator, useSearchParams } from 'react-router';
-
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
-import { isBase64Image } from '@documenso/lib/constants/signatures';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
-import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
-import { trpc } from '@documenso/trpc/react';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
-
-import { DocumentSigningCompleteDialog } from '../document-signing/document-signing-complete-dialog';
-import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
-
-export const EnvelopeSignerCompleteDialog = () => {
-  const navigate = useNavigate();
-  const analytics = useAnalytics();
-
-  const { t } = useLingui();
-  const { toast } = useToast();
-  const { revalidate } = useRevalidator();
-
-  const [searchParams] = useSearchParams();
-
-  const {
-    isDirectTemplate,
-    envelope,
-    setShowPendingFieldTooltip,
-    recipientFieldsRemaining,
-    recipient,
-    nextRecipient,
-    email,
-    fullName,
-  } = useRequiredEnvelopeSigningContext();
-
-  const { currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
-
-  const { onDocumentCompleted, onDocumentError } = useEmbedSigningContext() || {};
-
-  const { mutateAsync: completeDocument, isPending } =
-    trpc.recipient.completeDocumentWithToken.useMutation();
-
-  const { mutateAsync: createDocumentFromDirectTemplate } =
-    trpc.template.createDocumentFromDirectTemplate.useMutation();
-
-  const handleOnNextFieldClick = () => {
-    const nextField = recipientFieldsRemaining[0];
-
-    if (!nextField) {
-      setShowPendingFieldTooltip(false);
-      return;
-    }
-
-    if (nextField.envelopeItemId !== currentEnvelopeItem?.id) {
-      setCurrentEnvelopeItem(nextField.envelopeItemId);
-    }
-
-    const fieldTooltip = document.querySelector(`#field-tooltip`);
-
-    if (fieldTooltip) {
-      fieldTooltip.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-
-    setShowPendingFieldTooltip(true);
-  };
-
-  const handleOnCompleteClick = async (
-    nextSigner?: { name: string; email: string },
-    accessAuthOptions?: TRecipientAccessAuth,
-  ) => {
-    try {
-      await completeDocument({
-        token: recipient.token,
-        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-        accessAuthOptions,
-        ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
-      });
-
-      analytics.capture('App: Recipient has completed signing', {
-        signerId: recipient.id,
-        documentId: envelope.id,
-        timestamp: new Date().toISOString(),
-      });
-
-      if (onDocumentCompleted) {
-        onDocumentCompleted({
-          token: recipient.token,
-          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-          recipientId: recipient.id,
-          envelopeId: envelope.id,
-        });
-
-        await revalidate();
-
-        return;
-      }
-
-      if (envelope.documentMeta.redirectUrl) {
-        window.location.href = envelope.documentMeta.redirectUrl;
-      } else {
-        await navigate(`/sign/${recipient.token}/complete`);
-      }
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code !== AppErrorCode.TWO_FACTOR_AUTH_FAILED) {
-        toast({
-          title: t`Something went wrong`,
-          description: t`We were unable to submit this document at this time. Please try again later.`,
-          variant: 'destructive',
-        });
-
-        onDocumentError?.();
-      }
-
-      throw err;
-    }
-  };
-
-  /**
-   * Direct template completion flow.
-   */
-  const handleDirectTemplateCompleteClick = async (
-    nextSigner?: { name: string; email: string },
-    accessAuthOptions?: TRecipientAccessAuth,
-    recipientDetails?: { name: string; email: string },
-  ) => {
-    try {
-      let directTemplateExternalId = searchParams?.get('externalId') || undefined;
-
-      if (directTemplateExternalId) {
-        directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
-      }
-
-      if (!recipient.directToken) {
-        throw new Error('Recipient direct token is required');
-      }
-
-      const { token } = await createDocumentFromDirectTemplate({
-        directTemplateToken: recipient.directToken, // The direct template token is inserted into the recipient token for ease of use.
-        directTemplateExternalId,
-        directRecipientName: recipientDetails?.name || fullName,
-        directRecipientEmail: recipientDetails?.email || email,
-        templateUpdatedAt: envelope.updatedAt,
-        signedFieldValues: recipient.fields.map((field) => {
-          let value = field.customText;
-          let isBase64 = false;
-
-          if (field.type === FieldType.SIGNATURE && field.signature) {
-            value = field.signature.signatureImageAsBase64 || field.signature.typedSignature || '';
-            isBase64 = isBase64Image(value);
-          }
-
-          return {
-            token: '',
-            fieldId: field.id,
-            value,
-            isBase64,
-          };
-        }),
-        nextSigner,
-      });
-
-      const redirectUrl = envelope.documentMeta.redirectUrl;
-
-      if (onDocumentCompleted) {
-        await navigate({
-          pathname: `/embed/sign/${token}`,
-          search: window.location.search,
-          hash: window.location.hash,
-        });
-
-        return;
-      }
-
-      if (redirectUrl) {
-        window.location.href = redirectUrl;
-      } else {
-        await navigate(`/sign/${token}/complete`);
-      }
-    } catch (err) {
-      console.log('err', err);
-      toast({
-        title: t`Something went wrong`,
-        description: t`We were unable to submit this document at this time. Please try again later.`,
-        variant: 'destructive',
-      });
-
-      onDocumentError?.();
-
-      throw err;
-    }
-  };
-
-  const directTemplatePayload = useMemo(() => {
-    if (!isDirectTemplate) {
-      return;
-    }
-
-    return {
-      name: fullName,
-      email: email,
-    };
-  }, [email, fullName, isDirectTemplate]);
-
-  return (
-    <DocumentSigningCompleteDialog
-      isSubmitting={isPending}
-      directTemplatePayload={directTemplatePayload}
-      onSignatureComplete={
-        isDirectTemplate ? handleDirectTemplateCompleteClick : handleOnCompleteClick
-      }
-      documentTitle={envelope.title}
-      fields={recipientFieldsRemaining}
-      fieldsValidated={handleOnNextFieldClick}
-      recipient={recipient}
-      allowDictateNextSigner={Boolean(
-        nextRecipient && envelope.documentMeta.allowDictateNextSigner,
-      )}
-      defaultNextSigner={
-        nextRecipient ? { name: nextRecipient.name, email: nextRecipient.email } : undefined
-      }
-      buttonSize="sm"
-      position="center"
-    />
-  );
-};

apps/remix/app/components/general/folder/folder-grid.tsx

@@ -5,7 +5,6 @@ import { FolderType } from '@prisma/client';
 import { FolderIcon, HomeIcon } from 'lucide-react';
 import { Link } from 'react-router';
 
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
@@ -16,12 +15,10 @@ import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
 import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
 import { FolderUpdateDialog } from '~/components/dialogs/folder-update-dialog';
 import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
-import { DocumentUploadButtonLegacy } from '~/components/general/document/document-upload-button-legacy';
+import { DocumentUploadButton } from '~/components/general/document/document-upload-button';
 import { FolderCard, FolderCardEmpty } from '~/components/general/folder/folder-card';
 import { useCurrentTeam } from '~/providers/team';
 
-import { EnvelopeUploadButton } from '../envelope/envelope-upload-button';
-
 export type FolderGridProps = {
   type: FolderType;
   parentId: string | null;
@@ -29,7 +26,6 @@ export type FolderGridProps = {
 
 export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
   const team = useCurrentTeam();
-  const organisation = useCurrentOrganisation();
 
   const [isMovingFolder, setIsMovingFolder] = useState(false);
   const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
@@ -98,12 +94,13 @@ export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
         </div>
 
         <div className="flex gap-4 sm:flex-row sm:justify-end">
-          <EnvelopeUploadButton type={type} folderId={parentId || undefined} />
+          {/* Todo: Envelopes - Feature flag */}
+          {/* <EnvelopeUploadButton type={type} folderId={parentId || undefined} /> */}
 
           {type === FolderType.DOCUMENT ? (
-            <DocumentUploadButtonLegacy /> // If you delete this, delete the component as well.
+            <DocumentUploadButton />
           ) : (
-            <TemplateCreateDialog folderId={parentId ?? undefined} /> // If you delete this, delete the component as well.
+            <TemplateCreateDialog folderId={parentId ?? undefined} />
           )}
 
           <FolderCreateDialog type={type} />

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

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Download } from 'lucide-react';
+
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import type { DocumentData } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type ShareDocumentDownloadButtonProps = {
+  title: string;
+  documentData: DocumentData;
+};
+
+// Todo: Envelopes - Support multiple item downloads.
+export const ShareDocumentDownloadButton = ({
+  title,
+  documentData,
+}: ShareDocumentDownloadButtonProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const onDownloadClick = async () => {
+    try {
+      setIsDownloading(true);
+
+      await downloadPDF({ documentData, fileName: title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <Button loading={isDownloading} onClick={onDownloadClick}>
+      {!isDownloading && <Download className="mr-2 h-4 w-4" />}
+      <Trans>Download</Trans>
+    </Button>
+  );
+};

apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx

@@ -0,0 +1,167 @@
+import { type ReactNode, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { ErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
+import { useNavigate, useParams } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export interface TemplateDropZoneWrapperProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const TemplateDropZoneWrapper = ({ children, className }: TemplateDropZoneWrapperProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { folderId } = useParams();
+
+  const team = useCurrentTeam();
+
+  const navigate = useNavigate();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
+
+  const onFileDrop = async (file: File) => {
+    try {
+      setIsLoading(true);
+
+      const documentData = await putPdfFile(file);
+
+      const { legacyTemplateId: id } = await createTemplate({
+        title: file.name,
+        templateDocumentDataId: documentData.id,
+        folderId: folderId ?? undefined,
+      });
+
+      toast({
+        title: _(msg`Template uploaded`),
+        description: _(
+          msg`Your template has been uploaded successfully. You will be redirected to the template page.`,
+        ),
+        duration: 5000,
+      });
+
+      await navigate(`${formatTemplatesPath(team.url)}/${id}/edit`);
+    } catch {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`Please try again later.`),
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onFileDropRejected = (fileRejections: FileRejection[]) => {
+    if (!fileRejections.length) {
+      return;
+    }
+
+    // Since users can only upload only one file (no multi-upload), we only handle the first file rejection
+    const { file, errors } = fileRejections[0];
+
+    if (!errors.length) {
+      return;
+    }
+
+    const errorNodes = errors.map((error, index) => (
+      <span key={index} className="block">
+        {match(error.code)
+          .with(ErrorCode.FileTooLarge, () => (
+            <Trans>File is larger than {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB</Trans>
+          ))
+          .with(ErrorCode.FileInvalidType, () => <Trans>Only PDF files are allowed</Trans>)
+          .with(ErrorCode.FileTooSmall, () => <Trans>File is too small</Trans>)
+          .with(ErrorCode.TooManyFiles, () => (
+            <Trans>Only one file can be uploaded at a time</Trans>
+          ))
+          .otherwise(() => (
+            <Trans>Unknown error</Trans>
+          ))}
+      </span>
+    ));
+
+    const description = (
+      <>
+        <span className="font-medium">
+          {file.name} <Trans>couldn't be uploaded:</Trans>
+        </span>
+        {errorNodes}
+      </>
+    );
+
+    toast({
+      title: _(msg`Upload failed`),
+      description,
+      duration: 5000,
+      variant: 'destructive',
+    });
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: {
+      'application/pdf': ['.pdf'],
+    },
+    //disabled: isUploadDisabled,
+    multiple: false,
+    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
+    onDrop: ([acceptedFile]) => {
+      if (acceptedFile) {
+        void onFileDrop(acceptedFile);
+      }
+    },
+    onDropRejected: (fileRejections) => {
+      onFileDropRejected(fileRejections);
+    },
+    noClick: true,
+    noDragEventsBubbling: true,
+  });
+
+  return (
+    <div {...getRootProps()} className={cn('relative min-h-screen', className)}>
+      <input {...getInputProps()} />
+      {children}
+
+      {isDragActive && (
+        <div className="bg-muted/60 fixed left-0 top-0 z-[9999] h-full w-full backdrop-blur-[4px]">
+          <div className="pointer-events-none flex h-full w-full flex-col items-center justify-center">
+            <h2 className="text-foreground text-2xl font-semibold">
+              <Trans>Upload Template</Trans>
+            </h2>
+
+            <p className="text-muted-foreground text-md mt-4">
+              <Trans>Drag and drop your PDF file here</Trans>
+            </p>
+          </div>
+        </div>
+      )}
+
+      {isLoading && (
+        <div className="bg-muted/30 absolute inset-0 z-50 backdrop-blur-[2px]">
+          <div className="pointer-events-none flex h-1/2 w-full flex-col items-center justify-center">
+            <Loader className="text-primary h-12 w-12 animate-spin" />
+            <p className="text-foreground mt-8 font-medium">
+              <Trans>Uploading template...</Trans>
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -313,10 +313,8 @@ export const TemplateEditForm = ({
       >
         <CardContent className="p-2">
           <PDFViewer
-            key={template.envelopeItems[0].id}
-            envelopeItem={template.envelopeItems[0]}
-            token={undefined}
-            version="signed"
+            key={templateDocumentData.id}
+            documentData={templateDocumentData}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/components/general/template/template-page-view-information.tsx

@@ -7,13 +7,11 @@ import type { User } from '@prisma/client';
 import { DateTime } from 'luxon';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
-import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
 
 export type TemplatePageViewInformationProps = {
   userId: number;
   template: {
     userId: number;
-    secondaryId: string;
     createdAt: Date;
     updatedAt: Date;
     user: Pick<User, 'id' | 'name' | 'email'>;
@@ -45,10 +43,6 @@ export const TemplatePageViewInformation = ({
           .setLocale(i18n.locales?.[0] || i18n.locale)
           .toRelative(),
       },
-      {
-        description: msg`Template ID (Legacy)`,
-        value: mapSecondaryIdToTemplateId(template.secondaryId),
-      },
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, template, userId]);

apps/remix/app/components/tables/admin-leaderboard-table.tsx

@@ -2,49 +2,40 @@ import { useEffect, useMemo, useState, useTransition } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
 import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDown, Loader } from 'lucide-react';
-import { Link } from 'react-router';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { DateRange } from '@documenso/lib/types/search-params';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 import { Input } from '@documenso/ui/primitives/input';
 
-export type OrganisationOverview = {
-  id: string;
+export type SigningVolume = {
+  id: number;
   name: string;
   signingVolume: number;
   createdAt: Date;
-  customerId: string;
-  subscriptionStatus?: string;
-  isActive?: boolean;
-  teamCount?: number;
-  memberCount?: number;
+  planId: string;
 };
 
-type OrganisationOverviewTableProps = {
-  organisations: OrganisationOverview[];
+type LeaderboardTableProps = {
+  signingVolume: SigningVolume[];
   totalPages: number;
   perPage: number;
   page: number;
   sortBy: 'name' | 'createdAt' | 'signingVolume';
   sortOrder: 'asc' | 'desc';
-  dateRange: DateRange;
 };
 
-export const AdminOrganisationOverviewTable = ({
-  organisations,
+export const AdminLeaderboardTable = ({
+  signingVolume,
   totalPages,
   perPage,
   page,
   sortBy,
   sortOrder,
-  dateRange,
-}: OrganisationOverviewTableProps) => {
+}: LeaderboardTableProps) => {
   const { _, i18n } = useLingui();
 
   const [isPending, startTransition] = useTransition();
@@ -76,16 +67,17 @@ export const AdminOrganisationOverviewTable = ({
         cell: ({ row }) => {
           return (
             <div>
-              <Link
-                className="hover:underline"
-                to={`/admin/organisation-insights/${row.original.id}?dateRange=${dateRange}`}
+              <a
+                className="text-primary underline"
+                href={`https://dashboard.stripe.com/subscriptions/${row.original.planId}`}
+                target="_blank"
               >
                 {row.getValue('name')}
-              </Link>
+              </a>
             </div>
           );
         },
-        size: 240,
+        size: 250,
       },
       {
         header: () => (
@@ -93,9 +85,7 @@ export const AdminOrganisationOverviewTable = ({
             className="flex cursor-pointer items-center"
             onClick={() => handleColumnSort('signingVolume')}
           >
-            <span className="whitespace-nowrap">
-              <Trans>Document Volume</Trans>
-            </span>
+            {_(msg`Signing Volume`)}
             {sortBy === 'signingVolume' ? (
               sortOrder === 'asc' ? (
                 <ChevronUpIcon className="ml-2 h-4 w-4" />
@@ -109,23 +99,6 @@ export const AdminOrganisationOverviewTable = ({
         ),
         accessorKey: 'signingVolume',
         cell: ({ row }) => <div>{Number(row.getValue('signingVolume'))}</div>,
-        size: 160,
-      },
-      {
-        header: () => {
-          return <Trans>Teams</Trans>;
-        },
-        accessorKey: 'teamCount',
-        cell: ({ row }) => <div>{Number(row.original.teamCount) || 0}</div>,
-        size: 120,
-      },
-      {
-        header: () => {
-          return <Trans>Members</Trans>;
-        },
-        accessorKey: 'memberCount',
-        cell: ({ row }) => <div>{Number(row.original.memberCount) || 0}</div>,
-        size: 160,
       },
       {
         header: () => {
@@ -134,9 +107,7 @@ export const AdminOrganisationOverviewTable = ({
               className="flex cursor-pointer items-center"
               onClick={() => handleColumnSort('createdAt')}
             >
-              <span className="whitespace-nowrap">
-                <Trans>Created</Trans>
-              </span>
+              {_(msg`Created`)}
               {sortBy === 'createdAt' ? (
                 sortOrder === 'asc' ? (
                   <ChevronUpIcon className="ml-2 h-4 w-4" />
@@ -150,11 +121,10 @@ export const AdminOrganisationOverviewTable = ({
           );
         },
         accessorKey: 'createdAt',
-        cell: ({ row }) => i18n.date(new Date(row.original.createdAt)),
-        size: 120,
+        cell: ({ row }) => i18n.date(row.original.createdAt),
       },
-    ] satisfies DataTableColumnDef<OrganisationOverview>[];
-  }, [sortOrder, sortBy, dateRange]);
+    ] satisfies DataTableColumnDef<SigningVolume>[];
+  }, [sortOrder, sortBy]);
 
   useEffect(() => {
     startTransition(() => {
@@ -199,13 +169,13 @@ export const AdminOrganisationOverviewTable = ({
       <Input
         className="my-6 flex flex-row gap-4"
         type="text"
-        placeholder={_(msg`Search by organisation name`)}
+        placeholder={_(msg`Search by name or email`)}
         value={searchString}
         onChange={handleChange}
       />
       <DataTable
         columns={columns}
-        data={organisations}
+        data={signingVolume}
         perPage={perPage}
         currentPage={page}
         totalPages={totalPages}

apps/remix/app/components/tables/admin-organisations-table.tsx

@@ -93,31 +93,13 @@ export const AdminOrganisationsTable = ({
         ),
       },
       {
-        id: 'role',
-        header: t`Role`,
+        header: t`Status`,
         cell: ({ row }) => (
           <Badge variant="neutral">
             {row.original.owner.id === memberUserId ? t`Owner` : t`Member`}
           </Badge>
         ),
       },
-      {
-        id: 'billingStatus',
-        header: t`Status`,
-        cell: ({ row }) => {
-          const subscription = row.original.subscription;
-          const isPaid = subscription && subscription.status === 'ACTIVE';
-          return (
-            <div
-              className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
-                isPaid ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
-              }`}
-            >
-              {isPaid ? t`Paid` : t`Free`}
-            </div>
-          );
-        },
-      },
       {
         header: t`Subscription`,
         cell: ({ row }) =>
@@ -186,7 +168,7 @@ export const AdminOrganisationsTable = ({
         onPaginationChange={onPaginationChange}
         columnVisibility={{
           owner: showOwnerColumn,
-          role: memberUserId !== undefined,
+          status: memberUserId !== undefined,
         }}
         error={{
           enable: isLoadingError,

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

@@ -1,25 +1,30 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
 
-import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
-
 export type DocumentsTableActionButtonProps = {
   row: TDocumentRow;
 };
 
 export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonProps) => {
   const { user } = useSession();
+  const { toast } = useToast();
+  const { _ } = useLingui();
 
   const team = useCurrentTeam();
 
@@ -37,6 +42,39 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const documentsPath = formatDocumentsPath(team.url);
   const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
 
+  const onDownloadClick = async () => {
+    try {
+      const document = !recipient
+        ? await trpcClient.document.get.query(
+            {
+              documentId: row.id,
+            },
+            {
+              context: {
+                teamId: team?.id?.toString(),
+              },
+            },
+          )
+        : await trpcClient.document.getDocumentByToken.query({
+            token: recipient.token,
+          });
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        throw Error('No document available');
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
   if (recipient?.role === RecipientRole.CC && isComplete === false) {
     return null;
@@ -50,7 +88,6 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
     isComplete,
     isSigned,
     isCurrentTeamDocument,
-    internalVersion: row.internalVersion,
   })
     .with(
       isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
@@ -95,17 +132,10 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
       </Button>
     ))
     .with({ isComplete: true }, () => (
-      <EnvelopeDownloadDialog
-        envelopeId={row.envelopeId}
-        envelopeStatus={row.status}
-        token={recipient?.token}
-        trigger={
-          <Button className="w-32">
-            <Download className="-ml-1 mr-2 inline h-4 w-4" />
-            <Trans>Download</Trans>
-          </Button>
-        }
-      />
+      <Button className="w-32" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        <Trans>Download</Trans>
+      </Button>
     ))
     .otherwise(() => <div></div>);
 };

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

@@ -10,6 +10,7 @@ import {
   Download,
   Edit,
   EyeIcon,
+  FileDown,
   FolderInput,
   Loader,
   MoreHorizontal,
@@ -19,10 +20,12 @@ import {
 } from 'lucide-react';
 import { Link } from 'react-router';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
   DropdownMenu,
@@ -31,6 +34,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
@@ -38,8 +42,6 @@ import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialo
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
-import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
-
 export type DocumentsTableActionDropdownProps = {
   row: TDocumentRow;
   onMoveDocument?: () => void;
@@ -52,6 +54,7 @@ export const DocumentsTableActionDropdown = ({
   const { user } = useSession();
   const team = useCurrentTeam();
 
+  const { toast } = useToast();
   const { _ } = useLingui();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -71,6 +74,58 @@ export const DocumentsTableActionDropdown = ({
   const documentsPath = formatDocumentsPath(team.url);
   const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
 
+  const onDownloadClick = async () => {
+    try {
+      const document = !recipient
+        ? await trpcClient.document.get.query({
+            documentId: row.id,
+          })
+        : await trpcClient.document.getDocumentByToken.query({
+            token: recipient.token,
+          });
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onDownloadOriginalClick = async () => {
+    try {
+      const document = !recipient
+        ? await trpcClient.document.get.query({
+            documentId: row.id,
+          })
+        : await trpcClient.document.getDocumentByToken.query({
+            token: recipient.token,
+          });
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: row.title, version: 'original' });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   const nonSignedRecipients = row.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
@@ -121,19 +176,15 @@ export const DocumentsTableActionDropdown = ({
           </Link>
         </DropdownMenuItem>
 
-        <EnvelopeDownloadDialog
-          envelopeId={row.envelopeId}
-          envelopeStatus={row.status}
-          token={recipient?.token}
-          trigger={
-            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
-              <div>
-                <Download className="mr-2 h-4 w-4" />
-                <Trans>Download</Trans>
-              </div>
-            </DropdownMenuItem>
-          }
-        />
+        <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
+          <Download className="mr-2 h-4 w-4" />
+          <Trans>Download</Trans>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem onClick={onDownloadOriginalClick}>
+          <FileDown className="mr-2 h-4 w-4" />
+          <Trans>Download Original</Trans>
+        </DropdownMenuItem>
 
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
@@ -202,8 +253,7 @@ export const DocumentsTableActionDropdown = ({
       />
 
       <DocumentDuplicateDialog
-        id={row.envelopeId}
-        token={recipient?.token}
+        id={row.id}
         open={isDuplicateDialogOpen}
         onOpenChange={setDuplicateDialogOpen}
       />

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

@@ -10,9 +10,11 @@ import { DateTime } from 'luxon';
 import { Link, useSearchParams } from 'react-router';
 import { match } from 'ts-pattern';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindInboxResponse } from '@documenso/trpc/server/document-router/find-inbox.types';
 import { Button } from '@documenso/ui/primitives/button';
@@ -26,7 +28,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
-import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
 import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
 
 export type DocumentsTableProps = {
@@ -198,6 +199,28 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
     return null;
   }
 
+  const onDownloadClick = async () => {
+    try {
+      const document = await trpcClient.document.getDocumentByToken.query({
+        token: recipient.token,
+      });
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        throw Error('No document available');
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
   if (recipient?.role === RecipientRole.CC && isComplete === false) {
     return null;
@@ -207,7 +230,6 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
     isPending,
     isComplete,
     isSigned,
-    internalVersion: row.internalVersion,
   })
     .with({ isPending: true, isSigned: false }, () => (
       <Button className="w-32" asChild>
@@ -241,17 +263,10 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
       </Button>
     ))
     .with({ isComplete: true }, () => (
-      <EnvelopeDownloadDialog
-        envelopeId={row.envelopeId}
-        envelopeStatus={row.status}
-        token={recipient?.token}
-        trigger={
-          <Button className="w-32">
-            <DownloadIcon className="-ml-1 mr-2 inline h-4 w-4" />
-            <Trans>Download</Trans>
-          </Button>
-        }
-      />
+      <Button className="w-32" onClick={onDownloadClick}>
+        <DownloadIcon className="-ml-1 mr-2 inline h-4 w-4" />
+        <Trans>Download</Trans>
+      </Button>
     ))
     .otherwise(() => <div></div>);
 };

apps/remix/app/components/tables/organisation-insights-table.tsx

@@ -1,287 +0,0 @@
-import { useTransition } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Building2, Loader, TrendingUp, Users } from 'lucide-react';
-import { Link } from 'react-router';
-import { useNavigation } from 'react-router';
-
-import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { OrganisationDetailedInsights } from '@documenso/lib/server-only/admin/get-organisation-detailed-insights';
-import type { DateRange } from '@documenso/lib/types/search-params';
-import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
-import { Button } from '@documenso/ui/primitives/button';
-import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
-import { DataTable } from '@documenso/ui/primitives/data-table';
-import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
-
-import { DateRangeFilter } from '~/components/filters/date-range-filter';
-import { DocumentStatus } from '~/components/general/document/document-status';
-
-type OrganisationInsightsTableProps = {
-  insights: OrganisationDetailedInsights;
-  page: number;
-  perPage: number;
-  dateRange: DateRange;
-  view: 'teams' | 'users' | 'documents';
-};
-
-export const OrganisationInsightsTable = ({
-  insights,
-  page,
-  perPage,
-  dateRange,
-  view,
-}: OrganisationInsightsTableProps) => {
-  const { _, i18n } = useLingui();
-  const [isPending, startTransition] = useTransition();
-  const navigation = useNavigation();
-  const updateSearchParams = useUpdateSearchParams();
-
-  const isLoading = isPending || navigation.state === 'loading';
-
-  const onPaginationChange = (newPage: number, newPerPage: number) => {
-    startTransition(() => {
-      updateSearchParams({
-        page: newPage,
-        perPage: newPerPage,
-      });
-    });
-  };
-
-  const handleViewChange = (newView: 'teams' | 'users' | 'documents') => {
-    startTransition(() => {
-      updateSearchParams({
-        view: newView,
-        page: 1,
-      });
-    });
-  };
-
-  const teamsColumns = [
-    {
-      header: _(msg`Team Name`),
-      accessorKey: 'name',
-      cell: ({ row }) => <span className="block max-w-full truncate">{row.getValue('name')}</span>,
-      size: 240,
-    },
-    {
-      header: _(msg`Members`),
-      accessorKey: 'memberCount',
-      cell: ({ row }) => Number(row.getValue('memberCount')),
-      size: 120,
-    },
-    {
-      header: _(msg`Documents`),
-      accessorKey: 'documentCount',
-      cell: ({ row }) => Number(row.getValue('documentCount')),
-      size: 140,
-    },
-    {
-      header: _(msg`Created`),
-      accessorKey: 'createdAt',
-      cell: ({ row }) => i18n.date(new Date(row.getValue('createdAt'))),
-      size: 160,
-    },
-  ] satisfies DataTableColumnDef<(typeof insights.teams)[number]>[];
-
-  const usersColumns = [
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Name`)}</span>,
-      accessorKey: 'name',
-      cell: ({ row }) => (
-        <Link
-          className="block max-w-full truncate hover:underline"
-          to={`/admin/users/${row.original.id}`}
-        >
-          {(row.getValue('name') as string) || (row.getValue('email') as string)}
-        </Link>
-      ),
-      size: 220,
-    },
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Email`)}</span>,
-      accessorKey: 'email',
-      cell: ({ row }) => <span className="block max-w-full truncate">{row.getValue('email')}</span>,
-      size: 260,
-    },
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Documents Created`)}</span>,
-      accessorKey: 'documentCount',
-      cell: ({ row }) => Number(row.getValue('documentCount')),
-      size: 180,
-    },
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Documents Completed`)}</span>,
-      accessorKey: 'signedDocumentCount',
-      cell: ({ row }) => Number(row.getValue('signedDocumentCount')),
-      size: 180,
-    },
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Joined`)}</span>,
-      accessorKey: 'createdAt',
-      cell: ({ row }) => i18n.date(new Date(row.getValue('createdAt'))),
-      size: 160,
-    },
-  ] satisfies DataTableColumnDef<(typeof insights.users)[number]>[];
-
-  const documentsColumns = [
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Title`)}</span>,
-      accessorKey: 'title',
-      cell: ({ row }) => (
-        <Link
-          className="block max-w-[200px] truncate hover:underline"
-          to={`/admin/documents/${row.original.id}`}
-          title={row.getValue('title') as string}
-        >
-          {row.getValue('title')}
-        </Link>
-      ),
-      size: 200,
-    },
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Status`)}</span>,
-      accessorKey: 'status',
-      cell: ({ row }) => (
-        <DocumentStatus status={row.getValue('status') as ExtendedDocumentStatus} />
-      ),
-      size: 120,
-    },
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Team`)}</span>,
-      accessorKey: 'teamName',
-      cell: ({ row }) => (
-        <span className="block max-w-[150px] truncate" title={row.getValue('teamName') as string}>
-          {row.getValue('teamName')}
-        </span>
-      ),
-      size: 150,
-    },
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Created`)}</span>,
-      accessorKey: 'createdAt',
-      cell: ({ row }) => i18n.date(new Date(row.getValue('createdAt'))),
-      size: 140,
-    },
-    {
-      header: () => <span className="whitespace-nowrap">{_(msg`Completed`)}</span>,
-      accessorKey: 'completedAt',
-      cell: ({ row }) => {
-        const completedAt = row.getValue('completedAt') as Date | null;
-
-        return completedAt ? i18n.date(new Date(completedAt)) : '-';
-      },
-      size: 140,
-    },
-  ] satisfies DataTableColumnDef<(typeof insights.documents)[number]>[];
-
-  const getCurrentData = (): unknown[] => {
-    switch (view) {
-      case 'teams':
-        return insights.teams;
-      case 'users':
-        return insights.users;
-      case 'documents':
-        return insights.documents;
-      default:
-        return [];
-    }
-  };
-
-  const getCurrentColumns = (): DataTableColumnDef<unknown>[] => {
-    switch (view) {
-      case 'teams':
-        return teamsColumns as unknown as DataTableColumnDef<unknown>[];
-      case 'users':
-        return usersColumns as unknown as DataTableColumnDef<unknown>[];
-      case 'documents':
-        return documentsColumns as unknown as DataTableColumnDef<unknown>[];
-      default:
-        return [];
-    }
-  };
-
-  return (
-    <div className="relative">
-      {insights.summary && (
-        <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-3">
-          <SummaryCard icon={Building2} title={_(msg`Teams`)} value={insights.summary.totalTeams} />
-          <SummaryCard icon={Users} title={_(msg`Members`)} value={insights.summary.totalMembers} />
-          <SummaryCard
-            icon={TrendingUp}
-            title={_(msg`Documents Completed`)}
-            value={insights.summary.volumeThisPeriod}
-          />
-        </div>
-      )}
-
-      <div className="mb-6 flex items-center justify-between">
-        <div className="flex gap-2">
-          <Button
-            variant={view === 'teams' ? 'default' : 'outline'}
-            onClick={() => handleViewChange('teams')}
-            disabled={isLoading}
-          >
-            {_(msg`Teams`)}
-          </Button>
-          <Button
-            variant={view === 'users' ? 'default' : 'outline'}
-            onClick={() => handleViewChange('users')}
-            disabled={isLoading}
-          >
-            {_(msg`Users`)}
-          </Button>
-          <Button
-            variant={view === 'documents' ? 'default' : 'outline'}
-            onClick={() => handleViewChange('documents')}
-            disabled={isLoading}
-          >
-            {_(msg`Documents`)}
-          </Button>
-        </div>
-        <DateRangeFilter currentRange={dateRange} />
-      </div>
-
-      <div className={view === 'documents' ? 'overflow-hidden' : undefined}>
-        <DataTable<unknown, unknown>
-          columns={getCurrentColumns()}
-          data={getCurrentData()}
-          perPage={perPage}
-          currentPage={page}
-          totalPages={insights.totalPages}
-          onPaginationChange={onPaginationChange}
-        >
-          {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
-        </DataTable>
-      </div>
-
-      {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-8 w-8 animate-spin text-gray-500" />
-        </div>
-      )}
-    </div>
-  );
-};
-
-const SummaryCard = ({
-  icon: Icon,
-  title,
-  value,
-  subtitle,
-}: {
-  icon: React.ComponentType<{ className?: string }>;
-  title: string;
-  value: number;
-  subtitle?: string;
-}) => (
-  <div className="bg-card flex items-start gap-x-2 rounded-lg border px-4 py-3">
-    <Icon className="text-muted-foreground h-4 w-4 items-start" />
-    <div className="-mt-0.5 space-y-2">
-      <p className="text-muted-foreground text-sm font-medium">{title}</p>
-      <p className="text-2xl font-bold">{value}</p>
-      {subtitle && <p className="text-muted-foreground text-xs">{subtitle}</p>}
-    </div>
-  </div>
-);

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

@@ -159,7 +159,6 @@ export const TemplatesTable = ({
           return (
             <div className="flex items-center gap-x-4">
               <TemplateUseDialog
-                envelopeId={row.original.envelopeId}
                 templateId={row.original.id}
                 templateSigningOrder={row.original.templateMeta?.signingOrder}
                 documentDistributionMethod={row.original.templateMeta?.distributionMethod}

apps/remix/app/components/tables/user-organisations-table.tsx

@@ -56,14 +56,7 @@ export const UserOrganisationsTable = () => {
               avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
               primaryText={
                 <span className="text-foreground/80 font-semibold">
-                  {isPersonalLayoutMode
-                    ? _(
-                        msg({
-                          message: `Personal`,
-                          context: `Personal organisation (adjective)`,
-                        }),
-                      )
-                    : row.original.name}
+                  {isPersonalLayoutMode ? _(msg`Personal`) : row.original.name}
                 </span>
               }
               secondaryText={

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

@@ -88,12 +88,14 @@ export default function Layout({ loaderData, params, matches }: Route.ComponentP
             ? {
                 heading: msg`Organisation not found`,
                 subHeading: msg`404 Organisation not found`,
-                message: msg`The organisation you are looking for may have been removed, renamed or may have never existed.`,
+                message: msg`The organisation you are looking for may have been removed, renamed or may have never
+                  existed.`,
               }
             : {
                 heading: msg`Team not found`,
                 subHeading: msg`404 Team not found`,
-                message: msg`The team you are looking for may have been removed, renamed or may have never existed.`,
+                message: msg`The team you are looking for may have been removed, renamed or may have never
+                  existed.`,
               },
         }}
         primaryButton={
@@ -114,7 +116,7 @@ export default function Layout({ loaderData, params, matches }: Route.ComponentP
 
         {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
 
-        {banner && !hideHeader && <AppBanner banner={banner} />}
+        {banner && <AppBanner banner={banner} />}
 
         {!hideHeader && <Header />}
 

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

@@ -114,13 +114,13 @@ export default function AdminLayout() {
             variant="ghost"
             className={cn(
               'justify-start md:w-full',
-              pathname?.startsWith('/admin/organisation-insights') && 'bg-secondary',
+              pathname?.startsWith('/admin/leaderboard') && 'bg-secondary',
             )}
             asChild
           >
-            <Link to="/admin/organisation-insights">
+            <Link to="/admin/leaderboard">
               <Trophy className="mr-2 h-5 w-5" />
-              <Trans>Organisation Insights</Trans>
+              <Trans>Leaderboard</Trans>
             </Link>
           </Button>
 
@@ -128,7 +128,7 @@ export default function AdminLayout() {
             variant="ghost"
             className={cn(
               'justify-start md:w-full',
-              pathname?.startsWith('/admin/site-settings') && 'bg-secondary',
+              pathname?.startsWith('/admin/banner') && 'bg-secondary',
             )}
             asChild
           >

apps/remix/app/routes/_authenticated+/admin+/leaderboard.tsx

@@ -0,0 +1,77 @@
+import { Trans } from '@lingui/react/macro';
+
+import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
+
+import {
+  AdminLeaderboardTable,
+  type SigningVolume,
+} from '~/components/tables/admin-leaderboard-table';
+
+import type { Route } from './+types/leaderboard';
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const url = new URL(request.url);
+
+  const rawSortBy = url.searchParams.get('sortBy') || 'signingVolume';
+  const rawSortOrder = url.searchParams.get('sortOrder') || 'desc';
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const sortOrder = (['asc', 'desc'].includes(rawSortOrder) ? rawSortOrder : 'desc') as
+    | 'asc'
+    | 'desc';
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const sortBy = (
+    ['name', 'createdAt', 'signingVolume'].includes(rawSortBy) ? rawSortBy : 'signingVolume'
+  ) as 'name' | 'createdAt' | 'signingVolume';
+
+  const page = Number(url.searchParams.get('page')) || 1;
+  const perPage = Number(url.searchParams.get('perPage')) || 10;
+  const search = url.searchParams.get('search') || '';
+
+  const { leaderboard, totalPages } = await getSigningVolume({
+    search,
+    page,
+    perPage,
+    sortBy,
+    sortOrder,
+  });
+
+  const typedSigningVolume: SigningVolume[] = leaderboard.map((item) => ({
+    ...item,
+    name: item.name || '',
+    createdAt: item.createdAt || new Date(),
+  }));
+
+  return {
+    signingVolume: typedSigningVolume,
+    totalPages,
+    page,
+    perPage,
+    sortBy,
+    sortOrder,
+  };
+}
+
+export default function Leaderboard({ loaderData }: Route.ComponentProps) {
+  const { signingVolume, totalPages, page, perPage, sortBy, sortOrder } = loaderData;
+
+  return (
+    <div>
+      <div className="flex items-center">
+        <h2 className="text-4xl font-semibold">
+          <Trans>Signing Volume</Trans>
+        </h2>
+      </div>
+      <div className="mt-8">
+        <AdminLeaderboardTable
+          signingVolume={signingVolume}
+          totalPages={totalPages}
+          page={page}
+          perPage={perPage}
+          sortBy={sortBy}
+          sortOrder={sortOrder}
+        />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/organisation-insights.$id.tsx

@@ -1,59 +0,0 @@
-import { getOrganisationDetailedInsights } from '@documenso/lib/server-only/admin/get-organisation-detailed-insights';
-import type { DateRange } from '@documenso/lib/types/search-params';
-import { getAdminOrganisation } from '@documenso/trpc/server/admin-router/get-admin-organisation';
-
-import { OrganisationInsightsTable } from '~/components/tables/organisation-insights-table';
-
-import type { Route } from './+types/organisation-insights.$id';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { id } = params;
-  const url = new URL(request.url);
-
-  const page = Number(url.searchParams.get('page')) || 1;
-  const perPage = Number(url.searchParams.get('perPage')) || 10;
-  const dateRange = (url.searchParams.get('dateRange') || 'last30days') as DateRange;
-  const view = (url.searchParams.get('view') || 'teams') as 'teams' | 'users' | 'documents';
-
-  const [insights, organisation] = await Promise.all([
-    getOrganisationDetailedInsights({
-      organisationId: id,
-      page,
-      perPage,
-      dateRange,
-      view,
-    }),
-    getAdminOrganisation({ organisationId: id }),
-  ]);
-
-  return {
-    organisationId: id,
-    organisationName: organisation.name,
-    insights,
-    page,
-    perPage,
-    dateRange,
-    view,
-  };
-}
-
-export default function OrganisationInsights({ loaderData }: Route.ComponentProps) {
-  const { insights, page, perPage, dateRange, view, organisationName } = loaderData;
-
-  return (
-    <div>
-      <div className="flex items-center justify-between">
-        <h2 className="text-4xl font-semibold">{organisationName}</h2>
-      </div>
-      <div className="mt-8">
-        <OrganisationInsightsTable
-          insights={insights}
-          page={page}
-          perPage={perPage}
-          dateRange={dateRange}
-          view={view}
-        />
-      </div>
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/admin+/organisation-insights._index.tsx

@@ -1,91 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-
-import { getOrganisationInsights } from '@documenso/lib/server-only/admin/get-signing-volume';
-import type { DateRange } from '@documenso/lib/types/search-params';
-
-import { DateRangeFilter } from '~/components/filters/date-range-filter';
-import {
-  AdminOrganisationOverviewTable,
-  type OrganisationOverview,
-} from '~/components/tables/admin-organisation-overview-table';
-
-import type { Route } from './+types/organisation-insights._index';
-
-export async function loader({ request }: Route.LoaderArgs) {
-  const url = new URL(request.url);
-
-  const rawSortBy = url.searchParams.get('sortBy') || 'signingVolume';
-  const rawSortOrder = url.searchParams.get('sortOrder') || 'desc';
-
-  const isSortOrder = (value: string): value is 'asc' | 'desc' =>
-    value === 'asc' || value === 'desc';
-  const isSortBy = (value: string): value is 'name' | 'createdAt' | 'signingVolume' =>
-    value === 'name' || value === 'createdAt' || value === 'signingVolume';
-
-  const sortOrder: 'asc' | 'desc' = isSortOrder(rawSortOrder) ? rawSortOrder : 'desc';
-  const sortBy: 'name' | 'createdAt' | 'signingVolume' = isSortBy(rawSortBy)
-    ? rawSortBy
-    : 'signingVolume';
-
-  const page = Number(url.searchParams.get('page')) || 1;
-  const perPage = Number(url.searchParams.get('perPage')) || 10;
-  const search = url.searchParams.get('search') || '';
-  const dateRange = (url.searchParams.get('dateRange') || 'last30days') as DateRange;
-
-  const { organisations, totalPages } = await getOrganisationInsights({
-    search,
-    page,
-    perPage,
-    sortBy,
-    sortOrder,
-    dateRange,
-  });
-
-  const typedOrganisations: OrganisationOverview[] = organisations.map((item) => ({
-    id: String(item.id),
-    name: item.name || '',
-    signingVolume: item.signingVolume,
-    createdAt: item.createdAt || new Date(),
-    customerId: item.customerId || '',
-    subscriptionStatus: item.subscriptionStatus,
-    teamCount: item.teamCount || 0,
-    memberCount: item.memberCount || 0,
-  }));
-
-  return {
-    organisations: typedOrganisations,
-    totalPages,
-    page,
-    perPage,
-    sortBy,
-    sortOrder,
-    dateRange,
-  };
-}
-
-export default function Organisations({ loaderData }: Route.ComponentProps) {
-  const { organisations, totalPages, page, perPage, sortBy, sortOrder, dateRange } = loaderData;
-
-  return (
-    <div>
-      <div className="flex items-center justify-between">
-        <h2 className="text-4xl font-semibold">
-          <Trans>Organisation Insights</Trans>
-        </h2>
-        <DateRangeFilter currentRange={dateRange} />
-      </div>
-
-      <div className="mt-8">
-        <AdminOrganisationOverviewTable
-          organisations={organisations}
-          totalPages={totalPages}
-          page={page}
-          perPage={perPage}
-          sortBy={sortBy}
-          sortOrder={sortOrder}
-          dateRange={dateRange}
-        />
-      </div>
-    </div>
-  );
-}

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

@@ -34,7 +34,6 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { AdminOrganisationMemberUpdateDialog } from '~/components/dialogs/admin-organisation-member-update-dialog';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { SettingsHeader } from '~/components/general/settings-header';
 
@@ -72,6 +71,23 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
       },
     });
 
+  const { mutateAsync: promoteToOwner, isPending: isPromotingToOwner } =
+    trpc.admin.organisationMember.promoteToOwner.useMutation({
+      onSuccess: () => {
+        toast({
+          title: t`Success`,
+          description: t`Member promoted to owner successfully`,
+        });
+      },
+      onError: () => {
+        toast({
+          title: t`Error`,
+          description: t`We couldn't promote the member to owner. Please try again.`,
+          variant: 'destructive',
+        });
+      },
+    });
+
   const teamsColumns = useMemo(() => {
     return [
       {
@@ -104,24 +120,23 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
       },
       {
         header: t`Actions`,
-        cell: ({ row }) => {
-          const isOwner = row.original.userId === organisation?.ownerUserId;
-
-          return (
-            <div className="flex justify-end space-x-2">
-              <AdminOrganisationMemberUpdateDialog
-                trigger={
-                  <Button variant="outline">
-                    <Trans>Update role</Trans>
-                  </Button>
-                }
-                organisationId={organisationId}
-                organisationMember={row.original}
-                isOwner={isOwner}
-              />
-            </div>
-          );
-        },
+        cell: ({ row }) => (
+          <div className="flex justify-end space-x-2">
+            <Button
+              variant="outline"
+              disabled={row.original.userId === organisation?.ownerUserId}
+              loading={isPromotingToOwner}
+              onClick={async () =>
+                promoteToOwner({
+                  organisationId,
+                  userId: row.original.userId,
+                })
+              }
+            >
+              <Trans>Promote to owner</Trans>
+            </Button>
+          </div>
+        ),
       },
     ] satisfies DataTableColumnDef<TGetAdminOrganisationResponse['members'][number]>[];
   }, [organisation]);
@@ -142,7 +157,8 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
           404: {
             heading: msg`Organisation not found`,
             subHeading: msg`404 Organisation not found`,
-            message: msg`The organisation you are looking for may have been removed, renamed or may have never existed.`,
+            message: msg`The organisation you are looking for may have been removed, renamed or may have never
+                    existed.`,
           },
         }}
         primaryButton={
@@ -388,7 +404,6 @@ const OrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) =
       claims: {
         teamCount: organisation.organisationClaim.teamCount,
         memberCount: organisation.organisationClaim.memberCount,
-        envelopeItemCount: organisation.organisationClaim.envelopeItemCount,
         flags: organisation.organisationClaim.flags,
       },
       originalSubscriptionClaimId: organisation.organisationClaim.originalSubscriptionClaimId || '',
@@ -546,30 +561,6 @@ const OrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) =
           )}
         />
 
-        <FormField
-          control={form.control}
-          name="claims.envelopeItemCount"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans>Envelope Item Count</Trans>
-              </FormLabel>
-              <FormControl>
-                <Input
-                  type="number"
-                  min={1}
-                  {...field}
-                  onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
-                />
-              </FormControl>
-              <FormDescription>
-                <Trans>Maximum number of uploaded files per envelope allowed</Trans>
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
         <div>
           <FormLabel>
             <Trans>Feature Flags</Trans>