fix: wip

.npmrc

@@ -1,3 +1 @@
 auto-install-peers = true
-legacy-peer-deps = true
-prefer-dedupe = true

apps/documentation/next.config.js

@@ -1,5 +1,3 @@
-import nextra from 'nextra';
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: [
@@ -11,10 +9,9 @@ const nextConfig = {
   ],
 };
 
-const withNextra = nextra({
+const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
-  codeHighlight: true,
 });
 
-export default withNextra(nextConfig);
+module.exports = withNextra(nextConfig);

apps/documentation/package.json

@@ -15,7 +15,7 @@
     "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
-    "next": "14.2.28",
+    "next": "14.2.6",
     "next-plausible": "^3.12.0",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",

apps/documentation/theme.config.tsx

@@ -19,22 +19,6 @@ const themeConfig: DocsThemeConfig = {
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-            !function(){
-             if (location.hostname === 'localhost') return;
-              var e="6c236490c9a68c1",
-                  t=function(){Reo.init({ clientID: e })},
-                  n=document.createElement("script");
-              n.src="https://static.reo.dev/"+e+"/reo.js";
-              n.defer=true;
-              n.onload=t;
-              document.head.appendChild(n);
-            }();
-          `,
-          }}
-        />
       </>
     );
   },

apps/openpage-api/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.5.0",
-    "next": "14.2.28"
+    "next": "14.2.6"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/remix/app/components/dialogs/document-move-to-folder-dialog.tsx

@@ -1,216 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-export type DocumentMoveToFolderDialogProps = {
-  documentId: number;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  currentFolderId?: string;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const ZMoveDocumentFormSchema = z.object({
-  folderId: z.string().nullable().optional(),
-});
-
-type TMoveDocumentFormSchema = z.infer<typeof ZMoveDocumentFormSchema>;
-
-export const DocumentMoveToFolderDialog = ({
-  documentId,
-  open,
-  onOpenChange,
-  currentFolderId,
-  ...props
-}: DocumentMoveToFolderDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
-
-  const form = useForm<TMoveDocumentFormSchema>({
-    resolver: zodResolver(ZMoveDocumentFormSchema),
-    defaultValues: {
-      folderId: currentFolderId,
-    },
-  });
-
-  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFolders.useQuery(
-    {
-      parentId: currentFolderId,
-      type: FolderType.DOCUMENT,
-    },
-    {
-      enabled: open,
-    },
-  );
-
-  const { mutateAsync: moveDocumentToFolder } = trpc.folder.moveDocumentToFolder.useMutation();
-
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-    } else {
-      form.reset({ folderId: currentFolderId });
-    }
-  }, [open, currentFolderId, form]);
-
-  const onSubmit = async (data: TMoveDocumentFormSchema) => {
-    try {
-      await moveDocumentToFolder({
-        documentId,
-        folderId: data.folderId ?? null,
-      });
-
-      toast({
-        title: _(msg`Document moved`),
-        description: _(msg`The document has been moved successfully.`),
-        variant: 'default',
-      });
-
-      onOpenChange(false);
-
-      const documentsPath = formatDocumentsPath(team?.url);
-
-      if (data.folderId) {
-        void navigate(`${documentsPath}/f/${data.folderId}`);
-      } else {
-        void navigate(documentsPath);
-      }
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`The folder you are trying to move the document to does not exist.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while moving the document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Move Document to Folder</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            <Trans>Select a folder to move this document to.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4 flex flex-col gap-y-4">
-            <FormField
-              control={form.control}
-              name="folderId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    <Trans>Folder</Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <div className="space-y-2">
-                      {isFoldersLoading ? (
-                        <div className="flex h-10 items-center justify-center">
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                        </div>
-                      ) : (
-                        <>
-                          <Button
-                            type="button"
-                            variant={field.value === null ? 'default' : 'outline'}
-                            className="w-full justify-start"
-                            onClick={() => field.onChange(null)}
-                            disabled={currentFolderId === null}
-                          >
-                            <HomeIcon className="mr-2 h-4 w-4" />
-                            <Trans>Root (No Folder)</Trans>
-                          </Button>
-
-                          {folders?.data.map((folder) => (
-                            <Button
-                              key={folder.id}
-                              type="button"
-                              variant={field.value === folder.id ? 'default' : 'outline'}
-                              className="w-full justify-start"
-                              onClick={() => field.onChange(folder.id)}
-                              disabled={currentFolderId === folder.id}
-                            >
-                              <FolderIcon className="mr-2 h-4 w-4" />
-                              {folder.name}
-                            </Button>
-                          ))}
-                        </>
-                      )}
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                <Trans>Cancel</Trans>
-              </Button>
-
-              <Button
-                type="submit"
-                disabled={
-                  isFoldersLoading || form.formState.isSubmitting || currentFolderId === null
-                }
-              >
-                <Trans>Move</Trans>
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -4,14 +4,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type Recipient, SigningStatus } from '@prisma/client';
+import type { Team } from '@prisma/client';
+import { type Document, type Recipient, SigningStatus } from '@prisma/client';
 import { History } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
-import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -43,7 +43,9 @@ import { StackAvatar } from '../general/stack-avatar';
 const FORM_ID = 'resend-email';
 
 export type DocumentResendDialogProps = {
-  document: TDocumentRow;
+  document: Document & {
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
   recipients: Recipient[];
 };
 

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

@@ -1,163 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderPlusIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-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 { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-const ZCreateFolderFormSchema = z.object({
-  name: z.string().min(1, { message: 'Folder name is required' }),
-});
-
-type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
-
-export type CreateFolderDialogProps = {
-  trigger?: React.ReactNode;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-export const CreateFolderDialog = ({ trigger, ...props }: CreateFolderDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { folderId } = useParams();
-
-  const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
-
-  const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
-
-  const { mutateAsync: createFolder } = trpc.folder.createFolder.useMutation();
-
-  const form = useForm<TCreateFolderFormSchema>({
-    resolver: zodResolver(ZCreateFolderFormSchema),
-    defaultValues: {
-      name: '',
-    },
-  });
-
-  const onSubmit = async (data: TCreateFolderFormSchema) => {
-    try {
-      const newFolder = await createFolder({
-        name: data.name,
-        parentId: folderId,
-        type: FolderType.DOCUMENT,
-      });
-
-      setIsCreateFolderOpen(false);
-
-      toast({
-        description: 'Folder created successfully',
-      });
-
-      const documentsPath = formatDocumentsPath(team?.url);
-
-      void navigate(`${documentsPath}/f/${newFolder.id}`);
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.ALREADY_EXISTS) {
-        toast({
-          title: 'Failed to create folder',
-          description: _(msg`This folder name is already taken.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: 'Failed to create folder',
-        description: _(msg`An unknown error occurred while creating the folder.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!isCreateFolderOpen) {
-      form.reset();
-    }
-  }, [isCreateFolderOpen, form]);
-
-  return (
-    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
-      <DialogTrigger asChild>
-        {trigger ?? (
-          <Button variant="outline" className="flex items-center space-x-2">
-            <FolderPlusIcon className="h-4 w-4" />
-            <span>Create Folder</span>
-          </Button>
-        )}
-      </DialogTrigger>
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create New Folder</DialogTitle>
-          <DialogDescription>
-            Enter a name for your new folder. Folders help you organize your documents.
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Folder Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="My Folder" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <DialogFooter>
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => setIsCreateFolderOpen(false)}
-              >
-                Cancel
-              </Button>
-
-              <Button type="submit">Create</Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,159 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type FolderDeleteDialogProps = {
-  folder: TFolderWithSubfolders | null;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDeleteDialogProps) => {
-  const { _ } = useLingui();
-
-  const { toast } = useToast();
-  const { mutateAsync: deleteFolder } = trpc.folder.deleteFolder.useMutation();
-
-  const deleteMessage = _(msg`delete ${folder?.name ?? 'folder'}`);
-
-  const ZDeleteFolderFormSchema = z.object({
-    confirmText: z.literal(deleteMessage, {
-      errorMap: () => ({ message: _(msg`You must type '${deleteMessage}' to confirm`) }),
-    }),
-  });
-
-  type TDeleteFolderFormSchema = z.infer<typeof ZDeleteFolderFormSchema>;
-
-  const form = useForm<TDeleteFolderFormSchema>({
-    resolver: zodResolver(ZDeleteFolderFormSchema),
-    defaultValues: {
-      confirmText: '',
-    },
-  });
-
-  const onFormSubmit = async () => {
-    if (!folder) return;
-
-    try {
-      await deleteFolder({
-        id: folder.id,
-      });
-
-      onOpenChange(false);
-
-      toast({
-        title: 'Folder deleted successfully',
-      });
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: 'Folder not found',
-          description: _(msg`The folder you are trying to delete does not exist.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: 'Failed to delete folder',
-        description: _(msg`An unknown error occurred while deleting the folder.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!isOpen) {
-      form.reset();
-    }
-  }, [isOpen]);
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Folder</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete this folder?
-            {folder && folder._count.documents > 0 && (
-              <span className="text-destructive mt-2 block">
-                This folder contains {folder._count.documents} document(s). Deleting it will also
-                delete all documents in the folder.
-              </span>
-            )}
-            {folder && folder._count.subfolders > 0 && (
-              <span className="text-destructive mt-2 block">
-                This folder contains {folder._count.subfolders} subfolder(s). Deleting it will
-                delete all subfolders and their contents.
-              </span>
-            )}
-          </DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="confirmText"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    <Trans>
-                      Confirm by typing:{' '}
-                      <span className="font-sm text-destructive font-semibold">
-                        {deleteMessage}
-                      </span>
-                    </Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <Input {...field} placeholder={deleteMessage} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <DialogFooter>
-              <Button variant="secondary" onClick={() => onOpenChange(false)}>
-                Cancel
-              </Button>
-              <Button variant="destructive" type="submit" disabled={!form.formState.isValid}>
-                Delete
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/folder-move-dialog.tsx

@@ -1,169 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type FolderMoveDialogProps = {
-  foldersData: TFolderWithSubfolders[] | undefined;
-  folder: TFolderWithSubfolders | null;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const ZMoveFolderFormSchema = z.object({
-  targetFolderId: z.string().nullable(),
-});
-
-type TMoveFolderFormSchema = z.infer<typeof ZMoveFolderFormSchema>;
-
-export const FolderMoveDialog = ({
-  foldersData,
-  folder,
-  isOpen,
-  onOpenChange,
-}: FolderMoveDialogProps) => {
-  const { _ } = useLingui();
-
-  const { toast } = useToast();
-  const { mutateAsync: moveFolder } = trpc.folder.moveFolder.useMutation();
-
-  const form = useForm<TMoveFolderFormSchema>({
-    resolver: zodResolver(ZMoveFolderFormSchema),
-    defaultValues: {
-      targetFolderId: folder?.parentId ?? null,
-    },
-  });
-
-  const onFormSubmit = async ({ targetFolderId }: TMoveFolderFormSchema) => {
-    if (!folder) return;
-
-    try {
-      await moveFolder({
-        id: folder.id,
-        parentId: targetFolderId || null,
-      });
-
-      onOpenChange(false);
-
-      toast({
-        title: 'Folder moved successfully',
-      });
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: 'Folder not found',
-          description: _(msg`The folder you are trying to move does not exist.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: 'Failed to move folder',
-        description: _(msg`An unknown error occurred while moving the folder.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!isOpen) {
-      form.reset();
-    }
-  }, [isOpen, form]);
-
-  // Filter out the current folder and only show folders of the same type
-  const filteredFolders = foldersData?.filter(
-    (f) => f.id !== folder?.id && f.type === folder?.type,
-  );
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Move Folder</DialogTitle>
-          <DialogDescription>Select a destination for this folder.</DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4 py-4">
-            <FormField
-              control={form.control}
-              name="targetFolderId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <div className="space-y-2">
-                      <Button
-                        type="button"
-                        variant={!field.value ? 'default' : 'outline'}
-                        className="w-full justify-start"
-                        disabled={!folder?.parentId}
-                        onClick={() => field.onChange(null)}
-                      >
-                        <HomeIcon className="mr-2 h-4 w-4" />
-                        Root
-                      </Button>
-
-                      {filteredFolders &&
-                        filteredFolders.map((f) => (
-                          <Button
-                            key={f.id}
-                            type="button"
-                            disabled={f.id === folder?.parentId}
-                            variant={field.value === f.id ? 'default' : 'outline'}
-                            className="w-full justify-start"
-                            onClick={() => field.onChange(f.id)}
-                          >
-                            <FolderIcon className="mr-2 h-4 w-4" />
-                            {f.name}
-                          </Button>
-                        ))}
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                Move Folder
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/folder-settings-dialog.tsx

@@ -1,173 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-export type FolderSettingsDialogProps = {
-  folder: TFolderWithSubfolders | null;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-export const ZUpdateFolderFormSchema = z.object({
-  name: z.string().min(1),
-  visibility: z.nativeEnum(DocumentVisibility).optional(),
-});
-
-export type TUpdateFolderFormSchema = z.infer<typeof ZUpdateFolderFormSchema>;
-
-export const FolderSettingsDialog = ({
-  folder,
-  isOpen,
-  onOpenChange,
-}: FolderSettingsDialogProps) => {
-  const { _ } = useLingui();
-  const team = useOptionalCurrentTeam();
-
-  const { toast } = useToast();
-  const { mutateAsync: updateFolder } = trpc.folder.updateFolder.useMutation();
-
-  const isTeamContext = !!team;
-
-  const form = useForm<z.infer<typeof ZUpdateFolderFormSchema>>({
-    resolver: zodResolver(ZUpdateFolderFormSchema),
-    defaultValues: {
-      name: folder?.name ?? '',
-      visibility: folder?.visibility ?? DocumentVisibility.EVERYONE,
-    },
-  });
-
-  useEffect(() => {
-    if (folder) {
-      form.reset({
-        name: folder.name,
-        visibility: folder.visibility ?? DocumentVisibility.EVERYONE,
-      });
-    }
-  }, [folder, form]);
-
-  const onFormSubmit = async (data: TUpdateFolderFormSchema) => {
-    if (!folder) return;
-
-    try {
-      await updateFolder({
-        id: folder.id,
-        name: data.name,
-        visibility: isTeamContext
-          ? (data.visibility ?? DocumentVisibility.EVERYONE)
-          : DocumentVisibility.EVERYONE,
-      });
-
-      toast({
-        title: _(msg`Folder updated successfully`),
-      });
-
-      onOpenChange(false);
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: _(msg`Folder not found`),
-        });
-      }
-    }
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Folder Settings</DialogTitle>
-          <DialogDescription>Manage the settings for this folder.</DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {isTeamContext && (
-              <FormField
-                control={form.control}
-                name="visibility"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Visibility</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select visibility" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value={DocumentVisibility.EVERYONE}>Everyone</SelectItem>
-                        <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
-                          Managers and above
-                        </SelectItem>
-                        <SelectItem value={DocumentVisibility.ADMIN}>Admins only</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            <DialogFooter>
-              <Button type="submit">Save Changes</Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -24,11 +24,11 @@ import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type TemplateCreateDialogProps = {
+  teamId?: number;
   templateRootPath: string;
-  folderId?: string;
 };
 
-export const TemplateCreateDialog = ({ templateRootPath, folderId }: TemplateCreateDialogProps) => {
+export const TemplateCreateDialog = ({ templateRootPath }: TemplateCreateDialogProps) => {
   const navigate = useNavigate();
 
   const { user } = useSession();
@@ -53,7 +53,6 @@ export const TemplateCreateDialog = ({ templateRootPath, folderId }: TemplateCre
       const { id } = await createTemplate({
         title: file.name,
         templateDocumentDataId: response.id,
-        folderId: folderId,
       });
 
       toast({

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

@@ -1,164 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderPlusIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-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 { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-const ZCreateFolderFormSchema = z.object({
-  name: z.string().min(1, { message: 'Folder name is required' }),
-});
-
-type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
-
-export type TemplateFolderCreateDialogProps = {
-  trigger?: React.ReactNode;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-export const TemplateFolderCreateDialog = ({
-  trigger,
-  ...props
-}: TemplateFolderCreateDialogProps) => {
-  const { toast } = useToast();
-  const { _ } = useLingui();
-  const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
-  const { folderId } = useParams();
-
-  const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
-
-  const { mutateAsync: createFolder } = trpc.folder.createFolder.useMutation();
-
-  const form = useForm<TCreateFolderFormSchema>({
-    resolver: zodResolver(ZCreateFolderFormSchema),
-    defaultValues: {
-      name: '',
-    },
-  });
-
-  const onSubmit = async (data: TCreateFolderFormSchema) => {
-    try {
-      const newFolder = await createFolder({
-        name: data.name,
-        parentId: folderId,
-        type: FolderType.TEMPLATE,
-      });
-
-      setIsCreateFolderOpen(false);
-
-      toast({
-        description: _(msg`Folder created successfully`),
-      });
-
-      const templatesPath = formatTemplatesPath(team?.url);
-
-      void navigate(`${templatesPath}/f/${newFolder.id}`);
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.ALREADY_EXISTS) {
-        toast({
-          title: _(msg`Failed to create folder`),
-          description: _(msg`This folder name is already taken.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: _(msg`Failed to create folder`),
-        description: _(msg`An unknown error occurred while creating the folder.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!isCreateFolderOpen) {
-      form.reset();
-    }
-  }, [isCreateFolderOpen, form]);
-
-  return (
-    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
-      <DialogTrigger asChild>
-        {trigger ?? (
-          <Button variant="outline" className="flex items-center space-x-2">
-            <FolderPlusIcon className="h-4 w-4" />
-            <span>Create Folder</span>
-          </Button>
-        )}
-      </DialogTrigger>
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create New Folder</DialogTitle>
-          <DialogDescription>
-            Enter a name for your new folder. Folders help you organize your templates.
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Folder Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="My Folder" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <DialogFooter>
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => setIsCreateFolderOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button type="submit">Create</Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/template-folder-delete-dialog.tsx

@@ -1,163 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type TemplateFolderDeleteDialogProps = {
-  folder: TFolderWithSubfolders | null;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-export const TemplateFolderDeleteDialog = ({
-  folder,
-  isOpen,
-  onOpenChange,
-}: TemplateFolderDeleteDialogProps) => {
-  const { _ } = useLingui();
-
-  const { toast } = useToast();
-  const { mutateAsync: deleteFolder } = trpc.folder.deleteFolder.useMutation();
-
-  const deleteMessage = _(msg`delete ${folder?.name ?? 'folder'}`);
-
-  const ZDeleteFolderFormSchema = z.object({
-    confirmText: z.literal(deleteMessage, {
-      errorMap: () => ({ message: _(msg`You must type '${deleteMessage}' to confirm`) }),
-    }),
-  });
-
-  type TDeleteFolderFormSchema = z.infer<typeof ZDeleteFolderFormSchema>;
-
-  const form = useForm<TDeleteFolderFormSchema>({
-    resolver: zodResolver(ZDeleteFolderFormSchema),
-    defaultValues: {
-      confirmText: '',
-    },
-  });
-
-  const onFormSubmit = async () => {
-    if (!folder) return;
-
-    try {
-      await deleteFolder({
-        id: folder.id,
-      });
-
-      onOpenChange(false);
-
-      toast({
-        title: 'Folder deleted successfully',
-      });
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: 'Folder not found',
-          description: _(msg`The folder you are trying to delete does not exist.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: 'Failed to delete folder',
-        description: _(msg`An unknown error occurred while deleting the folder.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!isOpen) {
-      form.reset();
-    }
-  }, [isOpen]);
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Folder</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete this folder?
-            {folder && folder._count.documents > 0 && (
-              <span className="text-destructive mt-2 block">
-                This folder contains {folder._count.documents} document(s). Deleting it will also
-                delete all documents in the folder.
-              </span>
-            )}
-            {folder && folder._count.subfolders > 0 && (
-              <span className="text-destructive mt-2 block">
-                This folder contains {folder._count.subfolders} subfolder(s). Deleting it will
-                delete all subfolders and their contents.
-              </span>
-            )}
-          </DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="confirmText"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    <Trans>
-                      Confirm by typing:{' '}
-                      <span className="font-sm text-destructive font-semibold">
-                        {deleteMessage}
-                      </span>
-                    </Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <Input {...field} placeholder={deleteMessage} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <DialogFooter>
-              <Button variant="secondary" onClick={() => onOpenChange(false)}>
-                Cancel
-              </Button>
-              <Button variant="destructive" type="submit" disabled={!form.formState.isValid}>
-                Delete
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/template-folder-move-dialog.tsx

@@ -1,175 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type TemplateFolderMoveDialogProps = {
-  foldersData: TFolderWithSubfolders[] | undefined;
-  folder: TFolderWithSubfolders | null;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const ZMoveFolderFormSchema = z.object({
-  targetFolderId: z.string().optional(),
-});
-
-type TMoveFolderFormSchema = z.infer<typeof ZMoveFolderFormSchema>;
-
-export const TemplateFolderMoveDialog = ({
-  foldersData,
-  folder,
-  isOpen,
-  onOpenChange,
-}: TemplateFolderMoveDialogProps) => {
-  const { _ } = useLingui();
-
-  const { toast } = useToast();
-  const { mutateAsync: moveFolder } = trpc.folder.moveFolder.useMutation();
-
-  const form = useForm<TMoveFolderFormSchema>({
-    resolver: zodResolver(ZMoveFolderFormSchema),
-    defaultValues: {
-      targetFolderId: folder?.parentId ?? '',
-    },
-  });
-
-  const onFormSubmit = async ({ targetFolderId }: TMoveFolderFormSchema) => {
-    if (!folder) return;
-
-    try {
-      await moveFolder({
-        id: folder.id,
-        parentId: targetFolderId ?? '',
-      });
-
-      onOpenChange(false);
-
-      toast({
-        title: 'Folder moved successfully',
-      });
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: 'Folder not found',
-          description: _(msg`The folder you are trying to move does not exist.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: 'Failed to move folder',
-        description: _(msg`An unknown error occurred while moving the folder.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!isOpen) {
-      form.reset();
-    }
-  }, [isOpen, form]);
-
-  // Filter out the current folder and only show folders of the same type
-  const filteredFolders = foldersData?.filter(
-    (f) => f.id !== folder?.id && f.type === folder?.type,
-  );
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Move Folder</DialogTitle>
-          <DialogDescription>Select a destination for this folder.</DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4 py-4">
-            <FormField
-              control={form.control}
-              name="targetFolderId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <div className="space-y-2">
-                      <Button
-                        type="button"
-                        variant={!field.value ? 'default' : 'outline'}
-                        className="w-full justify-start"
-                        disabled={!folder?.parentId}
-                        onClick={() => field.onChange(undefined)}
-                      >
-                        <HomeIcon className="mr-2 h-4 w-4" />
-                        Root
-                      </Button>
-
-                      {filteredFolders &&
-                        filteredFolders.map((f) => (
-                          <Button
-                            key={f.id}
-                            type="button"
-                            disabled={f.id === folder?.parentId}
-                            variant={field.value === f.id ? 'default' : 'outline'}
-                            className="w-full justify-start"
-                            onClick={() => field.onChange(f.id)}
-                          >
-                            <FolderIcon className="mr-2 h-4 w-4" />
-                            {f.name}
-                          </Button>
-                        ))}
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                disabled={
-                  form.formState.isSubmitting ||
-                  form.getValues('targetFolderId') === folder?.parentId
-                }
-              >
-                Move Folder
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/template-folder-settings-dialog.tsx

@@ -1,176 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-export type TemplateFolderSettingsDialogProps = {
-  folder: TFolderWithSubfolders | null;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-export const ZUpdateFolderFormSchema = z.object({
-  name: z.string().min(1),
-  visibility: z.nativeEnum(DocumentVisibility).optional(),
-});
-
-export type TUpdateFolderFormSchema = z.infer<typeof ZUpdateFolderFormSchema>;
-
-export const TemplateFolderSettingsDialog = ({
-  folder,
-  isOpen,
-  onOpenChange,
-}: TemplateFolderSettingsDialogProps) => {
-  const { _ } = useLingui();
-  const team = useOptionalCurrentTeam();
-
-  const { toast } = useToast();
-  const { mutateAsync: updateFolder } = trpc.folder.updateFolder.useMutation();
-
-  const isTeamContext = !!team;
-  const isTemplateFolder = folder?.type === FolderType.TEMPLATE;
-
-  const form = useForm<z.infer<typeof ZUpdateFolderFormSchema>>({
-    resolver: zodResolver(ZUpdateFolderFormSchema),
-    defaultValues: {
-      name: folder?.name ?? '',
-      visibility: folder?.visibility ?? DocumentVisibility.EVERYONE,
-    },
-  });
-
-  useEffect(() => {
-    if (folder) {
-      form.reset({
-        name: folder.name,
-        visibility: folder.visibility ?? DocumentVisibility.EVERYONE,
-      });
-    }
-  }, [folder, form]);
-
-  const onFormSubmit = async (data: TUpdateFolderFormSchema) => {
-    if (!folder) return;
-
-    try {
-      await updateFolder({
-        id: folder.id,
-        name: data.name,
-        visibility:
-          isTeamContext && !isTemplateFolder
-            ? (data.visibility ?? DocumentVisibility.EVERYONE)
-            : DocumentVisibility.EVERYONE,
-      });
-
-      toast({
-        title: _(msg`Folder updated successfully`),
-      });
-
-      onOpenChange(false);
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: _(msg`Folder not found`),
-        });
-      }
-    }
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Folder Settings</DialogTitle>
-          <DialogDescription>Manage the settings for this folder.</DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {isTeamContext && !isTemplateFolder && (
-              <FormField
-                control={form.control}
-                name="visibility"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Visibility</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select visibility" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value={DocumentVisibility.EVERYONE}>Everyone</SelectItem>
-                        <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
-                          Managers and above
-                        </SelectItem>
-                        <SelectItem value={DocumentVisibility.ADMIN}>Admins only</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            <DialogFooter>
-              <Button type="submit">Save Changes</Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/template-move-to-folder-dialog.tsx

@@ -1,213 +0,0 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
-import { z } from 'zod';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-export type TemplateMoveToFolderDialogProps = {
-  templateId: number;
-  templateTitle: string;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  currentFolderId?: string | null;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const ZMoveTemplateFormSchema = z.object({
-  folderId: z.string().nullable().optional(),
-});
-
-type TMoveTemplateFormSchema = z.infer<typeof ZMoveTemplateFormSchema>;
-
-export function TemplateMoveToFolderDialog({
-  templateId,
-  templateTitle,
-  isOpen,
-  onOpenChange,
-  currentFolderId,
-  ...props
-}: TemplateMoveToFolderDialogProps) {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
-
-  const form = useForm<TMoveTemplateFormSchema>({
-    resolver: zodResolver(ZMoveTemplateFormSchema),
-    defaultValues: {
-      folderId: currentFolderId ?? null,
-    },
-  });
-
-  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFolders.useQuery(
-    {
-      parentId: currentFolderId ?? null,
-      type: FolderType.TEMPLATE,
-    },
-    {
-      enabled: isOpen,
-    },
-  );
-
-  const { mutateAsync: moveTemplateToFolder } = trpc.folder.moveTemplateToFolder.useMutation();
-
-  useEffect(() => {
-    if (!isOpen) {
-      form.reset();
-    } else {
-      form.reset({ folderId: currentFolderId ?? null });
-    }
-  }, [isOpen, currentFolderId, form]);
-
-  const onSubmit = async (data: TMoveTemplateFormSchema) => {
-    try {
-      await moveTemplateToFolder({
-        templateId,
-        folderId: data.folderId ?? null,
-      });
-
-      toast({
-        title: _(msg`Template moved`),
-        description: _(msg`The template has been moved successfully.`),
-        variant: 'default',
-      });
-
-      onOpenChange(false);
-
-      const templatesPath = formatTemplatesPath(team?.url);
-
-      if (data.folderId) {
-        void navigate(`${templatesPath}/f/${data.folderId}`);
-      } else {
-        void navigate(templatesPath);
-      }
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`The folder you are trying to move the template to does not exist.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while moving the template.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Dialog {...props} open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Move Template to Folder</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            <Trans>Move &quot;{templateTitle}&quot; to a folder</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4 flex flex-col gap-y-4">
-            <FormField
-              control={form.control}
-              name="folderId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    <Trans>Folder</Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <div className="space-y-2">
-                      {isFoldersLoading ? (
-                        <div className="flex h-10 items-center justify-center">
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                        </div>
-                      ) : (
-                        <>
-                          <Button
-                            type="button"
-                            variant={field.value === null ? 'default' : 'outline'}
-                            className="w-full justify-start"
-                            onClick={() => field.onChange(null)}
-                            disabled={currentFolderId === null}
-                          >
-                            <HomeIcon className="mr-2 h-4 w-4" />
-                            <Trans>Root (No Folder)</Trans>
-                          </Button>
-
-                          {folders?.data?.map((folder) => (
-                            <Button
-                              key={folder.id}
-                              type="button"
-                              variant={field.value === folder.id ? 'default' : 'outline'}
-                              className="w-full justify-start"
-                              onClick={() => field.onChange(folder.id)}
-                              disabled={currentFolderId === folder.id}
-                            >
-                              <FolderIcon className="mr-2 h-4 w-4" />
-                              {folder.name}
-                            </Button>
-                          ))}
-                        </>
-                      )}
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                <Trans>Cancel</Trans>
-              </Button>
-
-              <Button type="submit" disabled={isFoldersLoading || form.formState.isSubmitting}>
-                <Trans>Move</Trans>
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/remix/app/components/embed/authoring/configure-document-recipients.tsx

@@ -57,7 +57,7 @@ export const ConfigureDocumentRecipients = ({
     name: 'signers',
   });
 
-  const { getValues, watch, setValue } = useFormContext<TConfigureEmbedFormSchema>();
+  const { getValues, watch } = useFormContext<TConfigureEmbedFormSchema>();
 
   const signingOrder = watch('meta.signingOrder');
 
@@ -67,16 +67,13 @@ export const ConfigureDocumentRecipients = ({
 
   const onAddSigner = useCallback(() => {
     const signerNumber = signers.length + 1;
-    const recipientSigningOrder =
-      signers.length > 0 ? (signers[signers.length - 1]?.signingOrder || 0) + 1 : 1;
 
     appendSigner({
       formId: nanoid(8),
       name: isTemplate ? `Recipient ${signerNumber}` : '',
       email: isTemplate ? `recipient.${signerNumber}@document.com` : '',
       role: RecipientRole.SIGNER,
-      signingOrder:
-        signingOrder === DocumentSigningOrder.SEQUENTIAL ? recipientSigningOrder : undefined,
+      signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder || 0) + 1 : 1,
     });
   }, [appendSigner, signers]);
 
@@ -106,7 +103,7 @@ export const ConfigureDocumentRecipients = ({
       // Update signing order for each item
       const updatedSigners = remainingSigners.map((s: SignerItem, idx: number) => ({
         ...s,
-        signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? idx + 1 : undefined,
+        signingOrder: idx + 1,
       }));
 
       // Update the form
@@ -126,7 +123,7 @@ export const ConfigureDocumentRecipients = ({
       const currentSigners = getValues('signers');
       const updatedSigners = currentSigners.map((signer: SignerItem, index: number) => ({
         ...signer,
-        signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? index + 1 : undefined,
+        signingOrder: index + 1,
       }));
 
       // Update the form with new ordering
@@ -135,16 +132,6 @@ export const ConfigureDocumentRecipients = ({
     [move, replace, getValues],
   );
 
-  const onSigningOrderChange = (signingOrder: DocumentSigningOrder) => {
-    setValue('meta.signingOrder', signingOrder);
-
-    if (signingOrder === DocumentSigningOrder.SEQUENTIAL) {
-      signers.forEach((_signer, index) => {
-        setValue(`signers.${index}.signingOrder`, index + 1);
-      });
-    }
-  };
-
   return (
     <div>
       <h3 className="text-foreground mb-1 text-lg font-medium">
@@ -165,11 +152,11 @@ export const ConfigureDocumentRecipients = ({
                 {...field}
                 id="signingOrder"
                 checked={field.value === DocumentSigningOrder.SEQUENTIAL}
-                onCheckedChange={(checked) =>
-                  onSigningOrderChange(
+                onCheckedChange={(checked) => {
+                  field.onChange(
                     checked ? DocumentSigningOrder.SEQUENTIAL : DocumentSigningOrder.PARALLEL,
-                  )
-                }
+                  );
+                }}
                 disabled={isSubmitting}
               />
             </FormControl>
@@ -197,7 +184,6 @@ export const ConfigureDocumentRecipients = ({
                 disabled={isSubmitting || !isSigningOrderEnabled}
               />
             </FormControl>
-
             <div className="flex items-center">
               <FormLabel
                 htmlFor="allowDictateNextSigner"
@@ -241,14 +227,13 @@ export const ConfigureDocumentRecipients = ({
                   key={signer.id}
                   draggableId={signer.id}
                   index={index}
-                  isDragDisabled={!isSigningOrderEnabled || isSubmitting || signer.disabled}
+                  isDragDisabled={!isSigningOrderEnabled || isSubmitting}
                 >
                   {(provided, snapshot) => (
-                    <fieldset
+                    <div
                       ref={provided.innerRef}
                       {...provided.draggableProps}
                       {...provided.dragHandleProps}
-                      disabled={signer.disabled}
                       className={cn('py-1', {
                         'bg-widget-foreground pointer-events-none rounded-md pt-2':
                           snapshot.isDragging,
@@ -364,7 +349,7 @@ export const ConfigureDocumentRecipients = ({
                                   {...field}
                                   isAssistantEnabled={isSigningOrderEnabled}
                                   onValueChange={field.onChange}
-                                  disabled={isSubmitting || snapshot.isDragging || signer.disabled}
+                                  disabled={isSubmitting || snapshot.isDragging}
                                 />
                               </FormControl>
                               <FormMessage />
@@ -375,18 +360,13 @@ export const ConfigureDocumentRecipients = ({
                         <Button
                           type="button"
                           variant="ghost"
-                          disabled={
-                            isSubmitting ||
-                            signers.length === 1 ||
-                            snapshot.isDragging ||
-                            signer.disabled
-                          }
+                          disabled={isSubmitting || signers.length === 1 || snapshot.isDragging}
                           onClick={() => removeSigner(index)}
                         >
                           <Trash className="h-4 w-4" />
                         </Button>
                       </motion.div>
-                    </fieldset>
+                    </div>
                   )}
                 </Draggable>
               ))}

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

@@ -30,15 +30,10 @@ import {
 export interface ConfigureDocumentViewProps {
   onSubmit: (data: TConfigureEmbedFormSchema) => void | Promise<void>;
   defaultValues?: Partial<TConfigureEmbedFormSchema>;
-  disableUpload?: boolean;
   isSubmitting?: boolean;
 }
 
-export const ConfigureDocumentView = ({
-  onSubmit,
-  defaultValues,
-  disableUpload,
-}: ConfigureDocumentViewProps) => {
+export const ConfigureDocumentView = ({ onSubmit, defaultValues }: ConfigureDocumentViewProps) => {
   const { isTemplate } = useConfigureDocument();
 
   const form = useForm<TConfigureEmbedFormSchema>({
@@ -52,7 +47,6 @@ export const ConfigureDocumentView = ({
           email: isTemplate ? `recipient.${1}@document.com` : '',
           role: RecipientRole.SIGNER,
           signingOrder: 1,
-          disabled: false,
         },
       ],
       meta: {
@@ -116,7 +110,7 @@ export const ConfigureDocumentView = ({
             />
           </div>
 
-          {!disableUpload && <ConfigureDocumentUpload isSubmitting={isSubmitting} />}
+          <ConfigureDocumentUpload isSubmitting={isSubmitting} />
           <ConfigureDocumentRecipients control={control} isSubmitting={isSubmitting} />
           <ConfigureDocumentAdvancedSettings control={control} isSubmitting={isSubmitting} />
 

apps/remix/app/components/embed/authoring/configure-document-view.types.ts

@@ -15,13 +15,11 @@ export const ZConfigureEmbedFormSchema = z.object({
   signers: z
     .array(
       z.object({
-        nativeId: z.number().optional(),
         formId: z.string(),
         name: z.string().min(1, { message: 'Name is required' }),
         email: z.string().email('Invalid email address'),
         role: z.enum(['SIGNER', 'CC', 'APPROVER', 'VIEWER', 'ASSISTANT']),
         signingOrder: z.number().optional(),
-        disabled: z.boolean().optional(),
       }),
     )
     .min(1, { message: 'At least one signer is required' }),
@@ -36,7 +34,7 @@ export const ZConfigureEmbedFormSchema = z.object({
     language: ZDocumentMetaLanguageSchema.optional(),
     signatureTypes: z.array(z.string()).default([]),
     signingOrder: z.enum(['SEQUENTIAL', 'PARALLEL']),
-    allowDictateNextSigner: z.boolean().default(false).optional(),
+    allowDictateNextSigner: z.boolean().default(false),
     externalId: z.string().optional(),
   }),
   documentData: z

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

@@ -2,11 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 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 type { DocumentData } from '@prisma/client';
+import { FieldType, ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { z } from 'zod';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
@@ -29,7 +30,6 @@ import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/shee
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
-import type { TConfigureFieldsFormSchema } from './configure-fields-view.types';
 import { FieldAdvancedSettingsDrawer } from './field-advanced-settings-drawer';
 
 const MIN_HEIGHT_PX = 12;
@@ -38,9 +38,28 @@ const MIN_WIDTH_PX = 36;
 const DEFAULT_HEIGHT_PX = MIN_HEIGHT_PX * 2.5;
 const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
 
+export const ZConfigureFieldsFormSchema = z.object({
+  fields: z.array(
+    z.object({
+      formId: z.string().min(1),
+      id: z.string().min(1),
+      type: z.nativeEnum(FieldType),
+      signerEmail: z.string().min(1),
+      recipientId: z.number().min(0),
+      pageNumber: z.number().min(1),
+      pageX: z.number().min(0),
+      pageY: z.number().min(0),
+      pageWidth: z.number().min(0),
+      pageHeight: z.number().min(0),
+      fieldMeta: ZFieldMetaSchema.optional(),
+    }),
+  ),
+});
+
+export type TConfigureFieldsFormSchema = z.infer<typeof ZConfigureFieldsFormSchema>;
+
 export type ConfigureFieldsViewProps = {
   configData: TConfigureEmbedFormSchema;
-  documentData?: DocumentData;
   defaultValues?: Partial<TConfigureFieldsFormSchema>;
   onBack: (data: TConfigureFieldsFormSchema) => void;
   onSubmit: (data: TConfigureFieldsFormSchema) => void;
@@ -48,14 +67,13 @@ export type ConfigureFieldsViewProps = {
 
 export const ConfigureFieldsView = ({
   configData,
-  documentData,
   defaultValues,
   onBack,
   onSubmit,
 }: ConfigureFieldsViewProps) => {
-  const { _ } = useLingui();
   const { toast } = useToast();
   const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
+  const { _ } = useLingui();
 
   // Track if we're on a mobile device
   const [isMobile, setIsMobile] = useState(false);
@@ -81,11 +99,7 @@ export const ConfigureFieldsView = ({
     };
   }, []);
 
-  const normalizedDocumentData = useMemo(() => {
-    if (documentData) {
-      return documentData;
-    }
-
+  const documentData = useMemo(() => {
     if (!configData.documentData) {
       return null;
     }
@@ -102,7 +116,7 @@ export const ConfigureFieldsView = ({
 
   const recipients = useMemo(() => {
     return configData.signers.map<Recipient>((signer, index) => ({
-      id: signer.nativeId || index,
+      id: index,
       name: signer.name || '',
       email: signer.email || '',
       role: signer.role,
@@ -115,14 +129,14 @@ export const ConfigureFieldsView = ({
       signedAt: null,
       authOptions: null,
       rejectionReason: null,
-      sendStatus: signer.disabled ? SendStatus.SENT : SendStatus.NOT_SENT,
-      readStatus: signer.disabled ? ReadStatus.OPENED : ReadStatus.NOT_OPENED,
-      signingStatus: signer.disabled ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
+      sendStatus: SendStatus.NOT_SENT,
+      readStatus: ReadStatus.NOT_OPENED,
+      signingStatus: SigningStatus.NOT_SIGNED,
     }));
   }, [configData.signers]);
 
   const [selectedRecipient, setSelectedRecipient] = useState<Recipient | null>(
-    () => recipients.find((r) => r.signingStatus === SigningStatus.NOT_SIGNED) || null,
+    () => recipients[0] || null,
   );
   const [selectedField, setSelectedField] = useState<FieldType | null>(null);
   const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
@@ -173,59 +187,34 @@ export const ConfigureFieldsView = ({
   });
 
   const onFieldCopy = useCallback(
-    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
-      const { duplicate = false, duplicateAll = false } = options ?? {};
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean }) => {
+      const { duplicate = false } = options ?? {};
 
       if (lastActiveField) {
         event?.preventDefault();
 
-        if (duplicate) {
-          const newField: TConfigureFieldsFormSchema['fields'][0] = {
-            ...structuredClone(lastActiveField),
-            nativeId: undefined,
-            formId: nanoid(12),
-            signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
-            recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
-            pageX: lastActiveField.pageX + 3,
-            pageY: lastActiveField.pageY + 3,
-          };
+        if (!duplicate) {
+          setFieldClipboard(lastActiveField);
 
-          append(newField);
-
-          return;
-        }
-
-        if (duplicateAll) {
-          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
-
-          pages.forEach((_, index) => {
-            const pageNumber = index + 1;
-
-            if (pageNumber === lastActiveField.pageNumber) {
-              return;
-            }
-
-            const newField: TConfigureFieldsFormSchema['fields'][0] = {
-              ...structuredClone(lastActiveField),
-              nativeId: undefined,
-              formId: nanoid(12),
-              signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
-              recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
-              pageNumber,
-            };
-
-            append(newField);
+          toast({
+            title: 'Copied field',
+            description: 'Copied field to clipboard',
           });
 
           return;
         }
 
-        setFieldClipboard(lastActiveField);
+        const newField: TConfigureFieldsFormSchema['fields'][0] = {
+          ...structuredClone(lastActiveField),
+          formId: nanoid(12),
+          id: nanoid(12),
+          signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+          recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+          pageX: lastActiveField.pageX + 3,
+          pageY: lastActiveField.pageY + 3,
+        };
 
-        toast({
-          title: 'Copied field',
-          description: 'Copied field to clipboard',
-        });
+        append(newField);
       }
     },
     [append, lastActiveField, selectedRecipient?.email, selectedRecipient?.id, toast],
@@ -240,8 +229,8 @@ export const ConfigureFieldsView = ({
 
         append({
           ...copiedField,
-          nativeId: undefined,
           formId: nanoid(12),
+          id: nanoid(12),
           signerEmail: selectedRecipient?.email ?? copiedField.signerEmail,
           recipientId: selectedRecipient?.id ?? copiedField.recipientId,
           pageX: copiedField.pageX + 3,
@@ -314,6 +303,7 @@ export const ConfigureFieldsView = ({
       pageY -= fieldPageHeight / 2;
 
       const field = {
+        id: nanoid(12),
         formId: nanoid(12),
         type: selectedField,
         pageNumber,
@@ -536,9 +526,9 @@ export const ConfigureFieldsView = ({
             )}
 
             <Form {...form}>
-              {normalizedDocumentData && (
+              {documentData && (
                 <div>
-                  <PDFViewer documentData={normalizedDocumentData} />
+                  <PDFViewer documentData={documentData} />
 
                   <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
                     {localFields.map((field, index) => {
@@ -558,7 +548,6 @@ export const ConfigureFieldsView = ({
                           onMove={(node) => onFieldMove(node, index)}
                           onRemove={() => remove(index)}
                           onDuplicate={() => onFieldCopy(null, { duplicate: true })}
-                          onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
                           onFocus={() => setLastActiveField(field)}
                           onBlur={() => setLastActiveField(null)}
                           onAdvancedSettings={() => {

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

@@ -1,29 +0,0 @@
-import { z } from 'zod';
-
-import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import { FieldType } from '@documenso/prisma/client';
-
-export const ZConfigureFieldsFormSchema = z.object({
-  fields: z.array(
-    z.object({
-      nativeId: z.number().optional(),
-      formId: z.string().min(1),
-      type: z.nativeEnum(FieldType),
-      signerEmail: z.string().min(1),
-      inserted: z.boolean().optional(),
-      recipientId: z.number().min(0),
-      pageNumber: z.number().min(1),
-      pageX: z.number().min(0),
-      pageY: z.number().min(0),
-      pageWidth: z.number().min(0),
-      pageHeight: z.number().min(0),
-      fieldMeta: ZFieldMetaSchema.optional(),
-    }),
-  ),
-});
-
-export type TConfigureFieldsFormSchema = z.infer<typeof ZConfigureFieldsFormSchema>;
-
-export type TConfigureFieldsFormSchemaField = z.infer<
-  typeof ZConfigureFieldsFormSchema
->['fields'][number];

apps/remix/app/components/embed/authoring/field-advanced-settings-drawer.tsx

@@ -1,5 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import type { FieldType } from '@prisma/client';
 
 import { type TFieldMetaSchema as FieldMeta } from '@documenso/lib/types/field-meta';
 import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
@@ -7,13 +8,35 @@ import { FieldAdvancedSettings } from '@documenso/ui/primitives/document-flow/fi
 import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
 import { Sheet, SheetContent, SheetTitle } from '@documenso/ui/primitives/sheet';
 
-import type { TConfigureFieldsFormSchemaField } from './configure-fields-view.types';
-
 export type FieldAdvancedSettingsDrawerProps = {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
-  currentField: TConfigureFieldsFormSchemaField | null;
-  fields: TConfigureFieldsFormSchemaField[];
+  currentField: {
+    id: string;
+    formId: string;
+    type: FieldType;
+    pageNumber: number;
+    pageX: number;
+    pageY: number;
+    pageWidth: number;
+    pageHeight: number;
+    recipientId: number;
+    signerEmail: string;
+    fieldMeta?: FieldMeta;
+  } | null;
+  fields: Array<{
+    id: string;
+    formId: string;
+    type: FieldType;
+    pageNumber: number;
+    pageX: number;
+    pageY: number;
+    pageWidth: number;
+    pageHeight: number;
+    recipientId: number;
+    signerEmail: string;
+    fieldMeta?: FieldMeta;
+  }>;
   onFieldUpdate: (formId: string, fieldMeta: FieldMeta) => void;
 };
 

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

@@ -332,7 +332,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Widget */}
         <div
           key={isExpanded ? 'expanded' : 'collapsed'}
-          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:bottom-[unset] md:top-4 md:z-auto md:w-[350px] md:px-0"
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
           <div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">

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

@@ -290,7 +290,7 @@ export const EmbedSignDocumentClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:bottom-[unset] md:top-4 md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
             <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">

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

@@ -1,182 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { ReadStatus, RecipientRole, SigningStatus } from '@prisma/client';
-import { ArrowRight, EyeIcon, XCircle } from 'lucide-react';
-import { match } from 'ts-pattern';
-
-import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
-import type { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-import { Progress } from '@documenso/ui/primitives/progress';
-
-// Get the return type from getRecipientByToken
-type RecipientWithFields = Awaited<ReturnType<typeof getRecipientByToken>>;
-
-interface DocumentEnvelope {
-  document: DocumentAndSender;
-  recipient: RecipientWithFields;
-}
-
-interface MultiSignDocumentListProps {
-  envelopes: DocumentEnvelope[];
-  onDocumentSelect: (document: DocumentEnvelope['document']) => void;
-}
-
-export function MultiSignDocumentList({ envelopes, onDocumentSelect }: MultiSignDocumentListProps) {
-  // Calculate progress
-  const completedDocuments = envelopes.filter(
-    (envelope) => envelope.recipient.signingStatus === SigningStatus.SIGNED,
-  );
-  const totalDocuments = envelopes.length;
-  const progressPercentage = (completedDocuments.length / totalDocuments) * 100;
-
-  // Find next document to sign (first one that's not signed and not rejected)
-  const nextDocumentToSign = envelopes.find(
-    (envelope) =>
-      envelope.recipient.signingStatus !== SigningStatus.SIGNED &&
-      envelope.recipient.signingStatus !== SigningStatus.REJECTED,
-  );
-
-  const allDocumentsCompleted = completedDocuments.length === totalDocuments;
-
-  const hasAssistantOrCcRecipient = envelopes.some(
-    (envelope) =>
-      envelope.recipient.role === RecipientRole.ASSISTANT ||
-      envelope.recipient.role === RecipientRole.CC,
-  );
-
-  function handleView(doc: DocumentEnvelope['document']) {
-    onDocumentSelect(doc);
-  }
-
-  function handleNextDocument() {
-    if (nextDocumentToSign) {
-      onDocumentSelect(nextDocumentToSign.document);
-    }
-  }
-
-  if (hasAssistantOrCcRecipient) {
-    return (
-      <div className="mx-auto mt-16 flex w-full max-w-lg flex-col md:mt-16 md:rounded-2xl md:border md:px-8 md:py-16 md:shadow-lg">
-        <div className="flex items-center justify-center">
-          <XCircle className="text-destructive h-16 w-16 md:h-24 md:w-24" strokeWidth={1.2} />
-        </div>
-
-        <h2 className="mt-12 text-xl font-bold md:text-2xl">
-          <Trans>It looks like we ran into an issue!</Trans>
-        </h2>
-
-        <p className="text-muted-foreground mt-6">
-          <Trans>
-            One of the documents in the current bundle has a signing role that is not compatible
-            with the current signing experience.
-          </Trans>
-        </p>
-
-        <p className="text-muted-foreground mt-2">
-          <Trans>
-            Assistants and Copy roles are currently not compatible with the multi-sign experience.
-          </Trans>
-        </p>
-
-        <p className="text-muted-foreground mt-2">
-          <Trans>Please contact the site owner for further assistance.</Trans>
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="bg-background mx-auto w-full max-w-lg md:my-12 md:rounded-2xl md:border md:p-8 md:shadow-lg">
-      <h2 className="text-foreground mb-1 text-lg font-semibold">
-        <Trans>Sign Documents</Trans>
-      </h2>
-
-      <p className="text-muted-foreground text-sm">
-        <Trans>
-          You have been requested to sign the following documents. Review each document carefully
-          and complete the signing process.
-        </Trans>
-      </p>
-
-      {/* Progress Section */}
-      <div className="mt-6">
-        <div className="flex items-center justify-between text-sm">
-          <span className="text-muted-foreground font-medium">
-            <Trans>Progress</Trans>
-          </span>
-          <span className="text-muted-foreground">
-            {completedDocuments.length} of {totalDocuments} completed
-          </span>
-        </div>
-
-        <div className="mt-4">
-          <Progress value={progressPercentage} className="h-2" />
-        </div>
-      </div>
-
-      <div className="mt-6 flex flex-col gap-4">
-        {envelopes.map((envelope) => (
-          <div
-            key={envelope.document.id}
-            className="border-border flex items-center gap-4 rounded-lg border px-4 py-2"
-          >
-            <span className="text-foreground flex-1 truncate text-sm font-medium">
-              {envelope.document.title}
-            </span>
-
-            {match(envelope.recipient)
-              .with({ signingStatus: SigningStatus.SIGNED }, () => (
-                <Badge size="small" variant="default">
-                  <Trans>Completed</Trans>
-                </Badge>
-              ))
-              .with({ signingStatus: SigningStatus.REJECTED }, () => (
-                <Badge size="small" variant="destructive">
-                  <Trans>Rejected</Trans>
-                </Badge>
-              ))
-              .with({ readStatus: ReadStatus.OPENED }, () => (
-                <Badge size="small" variant="neutral">
-                  <Trans>Viewed</Trans>
-                </Badge>
-              ))
-              .otherwise(() => null)}
-
-            <Button
-              className="-mr-2"
-              variant="outline"
-              size="sm"
-              onClick={() => handleView(envelope.document)}
-            >
-              <EyeIcon className="mr-1 h-4 w-4" />
-              <Trans>View</Trans>
-            </Button>
-          </div>
-        ))}
-      </div>
-
-      {/* Next Document Button */}
-      {!allDocumentsCompleted && nextDocumentToSign && (
-        <div className="mt-6">
-          <Button onClick={handleNextDocument} className="w-full" size="lg">
-            <Trans>View next document</Trans>
-            <ArrowRight className="ml-2 h-4 w-4" />
-          </Button>
-        </div>
-      )}
-
-      {allDocumentsCompleted && (
-        <Alert className="mt-6 text-center">
-          <AlertTitle>
-            <Trans>All documents have been completed!</Trans>
-          </AlertTitle>
-          <AlertDescription>
-            <Trans>Thank you for completing the signing process.</Trans>
-          </AlertDescription>
-        </Alert>
-      )}
-    </div>
-  );
-}

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

@@ -1,396 +0,0 @@
-import { useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, FieldType, SigningStatus } from '@prisma/client';
-import { Loader, LucideChevronDown, LucideChevronUp, X } from 'lucide-react';
-import { P, match } from 'ts-pattern';
-
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import type {
-  TRemovedSignedFieldWithTokenMutationSchema,
-  TSignFieldWithTokenMutationSchema,
-} from '@documenso/trpc/server/field-router/schema';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
-import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import PDFViewer from '@documenso/ui/primitives/pdf-viewer';
-import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useRequiredDocumentSigningContext } from '../../general/document-signing/document-signing-provider';
-import { DocumentSigningRejectDialog } from '../../general/document-signing/document-signing-reject-dialog';
-import { EmbedDocumentFields } from '../embed-document-fields';
-
-interface MultiSignDocumentSigningViewProps {
-  token: string;
-  recipientId: number;
-  onBack: () => void;
-  onDocumentCompleted?: (data: { token: string; documentId: number; recipientId: number }) => void;
-  onDocumentRejected?: (data: {
-    token: string;
-    documentId: number;
-    recipientId: number;
-    reason: string;
-  }) => void;
-  onDocumentError?: () => void;
-  onDocumentReady?: () => void;
-  isNameLocked?: boolean;
-  allowDocumentRejection?: boolean;
-}
-
-export const MultiSignDocumentSigningView = ({
-  token,
-  recipientId,
-  onBack,
-  onDocumentCompleted,
-  onDocumentRejected,
-  onDocumentError,
-  onDocumentReady,
-  isNameLocked = false,
-  allowDocumentRejection = false,
-}: MultiSignDocumentSigningViewProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { fullName, email, signature, setFullName, setSignature } =
-    useRequiredDocumentSigningContext();
-
-  const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
-
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
-
-  const { data: document, isLoading } = trpc.embeddingPresign.getMultiSignDocument.useQuery(
-    { token },
-    {
-      staleTime: 0,
-    },
-  );
-
-  const { mutateAsync: signFieldWithToken } = trpc.field.signFieldWithToken.useMutation();
-  const { mutateAsync: removeSignedFieldWithToken } =
-    trpc.field.removeSignedFieldWithToken.useMutation();
-
-  const { mutateAsync: completeDocumentWithToken } =
-    trpc.recipient.completeDocumentWithToken.useMutation();
-
-  const hasSignatureField = document?.fields.some((field) => field.type === FieldType.SIGNATURE);
-
-  const [pendingFields, completedFields] = [
-    document?.fields.filter((field) => field.recipient.signingStatus !== SigningStatus.SIGNED) ??
-      [],
-    document?.fields.filter((field) => field.recipient.signingStatus === SigningStatus.SIGNED) ??
-      [],
-  ];
-
-  const uninsertedFields = document?.fields.filter((field) => !field.inserted);
-
-  const onSignField = async (payload: TSignFieldWithTokenMutationSchema) => {
-    try {
-      await signFieldWithToken(payload);
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.UNAUTHORIZED) {
-        throw error;
-      }
-
-      console.error(err);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while signing the document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onUnsignField = async (payload: TRemovedSignedFieldWithTokenMutationSchema) => {
-    try {
-      await removeSignedFieldWithToken(payload);
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.UNAUTHORIZED) {
-        throw error;
-      }
-
-      console.error(err);
-    }
-  };
-
-  const onDocumentComplete = async () => {
-    try {
-      setIsSubmitting(true);
-
-      await completeDocumentWithToken({
-        documentId: document!.id,
-        token,
-      });
-
-      onBack();
-
-      onDocumentCompleted?.({
-        token,
-        documentId: document!.id,
-        recipientId,
-      });
-    } catch (err) {
-      onDocumentError?.();
-
-      toast({
-        title: 'Error',
-        description: 'Failed to complete the document. Please try again.',
-        variant: 'destructive',
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const onNextFieldClick = () => {
-    setShowPendingFieldTooltip(true);
-
-    setIsExpanded(false);
-  };
-
-  const onRejected = (reason: string) => {
-    if (onDocumentRejected && document) {
-      onDocumentRejected({
-        token,
-        documentId: document.id,
-        recipientId,
-        reason,
-      });
-    }
-  };
-
-  return (
-    <div className="bg-background min-h-screen overflow-hidden">
-      <div id="document-field-portal-root" className="relative h-full w-full overflow-y-auto p-8">
-        {match({ isLoading, document })
-          .with({ isLoading: true }, () => (
-            <div className="flex min-h-[400px] w-full items-center justify-center">
-              <div className="flex flex-col items-center gap-4">
-                <Loader className="text-primary h-8 w-8 animate-spin" />
-                <p className="text-muted-foreground text-sm">
-                  <Trans>Loading document...</Trans>
-                </p>
-              </div>
-            </div>
-          ))
-          .with({ isLoading: false, document: undefined }, () => (
-            <div className="flex min-h-[400px] w-full items-center justify-center">
-              <p className="text-muted-foreground text-sm">
-                <Trans>Failed to load document</Trans>
-              </p>
-            </div>
-          ))
-          .with({ document: P.nonNullable }, ({ document }) => (
-            <>
-              <div className="mx-auto flex w-full max-w-screen-xl items-baseline justify-between">
-                <div className="flex items-center gap-4">
-                  <h1 className="text-2xl font-semibold">{document.title}</h1>
-                </div>
-
-                <Button variant="ghost" size="sm" onClick={onBack} className="p-2">
-                  <X className="h-5 w-5" />
-                </Button>
-              </div>
-
-              {allowDocumentRejection && (
-                <div className="embed--Actions mb-4 mt-8 flex w-full flex-row-reverse items-baseline justify-between">
-                  <DocumentSigningRejectDialog
-                    document={document}
-                    token={token}
-                    onRejected={onRejected}
-                  />
-                </div>
-              )}
-
-              <div className="embed--DocumentContainer relative mx-auto mt-8 flex w-full max-w-screen-xl flex-col gap-x-6 gap-y-12 md:flex-row">
-                <div
-                  className={cn('embed--DocumentViewer flex-1', {
-                    'md:mx-auto md:max-w-2xl': document.status === DocumentStatus.COMPLETED,
-                  })}
-                >
-                  <PDFViewer
-                    documentData={document.documentData}
-                    onDocumentLoad={() => {
-                      setHasDocumentLoaded(true);
-                      onDocumentReady?.();
-                    }}
-                  />
-                </div>
-
-                {/* Widget */}
-                {document.status !== DocumentStatus.COMPLETED && (
-                  <div
-                    key={isExpanded ? 'expanded' : 'collapsed'}
-                    className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:bottom-[unset] md:top-0 md:z-auto md:w-[350px] md:px-0"
-                    data-expanded={isExpanded || undefined}
-                  >
-                    <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
-                      {/* Header */}
-                      <div className="embed--DocumentWidgetHeader">
-                        <div className="flex items-center justify-between gap-x-2">
-                          <h3 className="text-foreground text-xl font-semibold md:text-2xl">
-                            <Trans>Sign document</Trans>
-                          </h3>
-
-                          <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
-                            {isExpanded ? (
-                              <LucideChevronDown
-                                className="text-muted-foreground h-5 w-5"
-                                onClick={() => setIsExpanded(false)}
-                              />
-                            ) : (
-                              <LucideChevronUp
-                                className="text-muted-foreground h-5 w-5"
-                                onClick={() => setIsExpanded(true)}
-                              />
-                            )}
-                          </Button>
-                        </div>
-                      </div>
-
-                      <div className="embed--DocumentWidgetContent hidden group-data-[expanded]/document-widget:block md:block">
-                        <p className="text-muted-foreground mt-2 text-sm">
-                          <Trans>Sign the document to complete the process.</Trans>
-                        </p>
-
-                        <hr className="border-border mb-8 mt-4" />
-                      </div>
-
-                      {/* Form */}
-                      <div className="embed--DocumentWidgetForm -mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
-                        <div className="flex flex-1 flex-col gap-y-4">
-                          {
-                            <>
-                              <div>
-                                <Label htmlFor="full-name">
-                                  <Trans>Full Name</Trans>
-                                </Label>
-
-                                <Input
-                                  type="text"
-                                  id="full-name"
-                                  className="bg-background mt-2"
-                                  disabled={isNameLocked}
-                                  value={fullName}
-                                  onChange={(e) => !isNameLocked && setFullName(e.target.value)}
-                                />
-                              </div>
-
-                              <div>
-                                <Label htmlFor="email">
-                                  <Trans>Email</Trans>
-                                </Label>
-
-                                <Input
-                                  type="email"
-                                  id="email"
-                                  className="bg-background mt-2"
-                                  value={email}
-                                  disabled
-                                />
-                              </div>
-
-                              {hasSignatureField && (
-                                <div>
-                                  <Label htmlFor="Signature">
-                                    <Trans>Signature</Trans>
-                                  </Label>
-
-                                  <SignaturePadDialog
-                                    className="mt-2"
-                                    disabled={isSubmitting}
-                                    disableAnimation
-                                    value={signature ?? ''}
-                                    onChange={(v) => setSignature(v ?? '')}
-                                    typedSignatureEnabled={
-                                      document.documentMeta?.typedSignatureEnabled
-                                    }
-                                    uploadSignatureEnabled={
-                                      document.documentMeta?.uploadSignatureEnabled
-                                    }
-                                    drawSignatureEnabled={
-                                      document.documentMeta?.drawSignatureEnabled
-                                    }
-                                  />
-                                </div>
-                              )}
-                            </>
-                          }
-                        </div>
-                      </div>
-
-                      <div className="hidden flex-1 group-data-[expanded]/document-widget:block md:block" />
-
-                      <div className="embed--DocumentWidgetFooter mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
-                        {uninsertedFields.length > 0 ? (
-                          <Button className="col-start-2" onClick={onNextFieldClick}>
-                            <Trans>Next</Trans>
-                          </Button>
-                        ) : (
-                          <Button
-                            className="col-span-2"
-                            loading={isSubmitting}
-                            onClick={onDocumentComplete}
-                          >
-                            <Trans>Complete</Trans>
-                          </Button>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {hasDocumentLoaded && (
-                <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-                  {showPendingFieldTooltip && pendingFields.length > 0 && (
-                    <FieldToolTip
-                      key={pendingFields[0].id}
-                      field={pendingFields[0]}
-                      color="warning"
-                    >
-                      <Trans>Click to insert field</Trans>
-                    </FieldToolTip>
-                  )}
-                </ElementVisible>
-              )}
-
-              {/* Fields */}
-              {hasDocumentLoaded && (
-                <EmbedDocumentFields
-                  fields={pendingFields}
-                  metadata={document.documentMeta}
-                  onSignField={onSignField}
-                  onUnsignField={onUnsignField}
-                />
-              )}
-
-              {/* Completed fields */}
-              {document.status !== DocumentStatus.COMPLETED && (
-                <DocumentReadOnlyFields
-                  documentMeta={document.documentMeta ?? undefined}
-                  fields={completedFields}
-                />
-              )}
-            </>
-          ))
-          .otherwise(() => null)}
-      </div>
-    </div>
-  );
-};

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

@@ -130,7 +130,7 @@ export const DirectTemplateConfigureForm = ({
                       {...field}
                       disabled={
                         field.disabled ||
-                        derivedRecipientAccessAuth.length > 0 ||
+                        derivedRecipientAccessAuth !== null ||
                         user?.email !== undefined
                       }
                       placeholder="recipient@documenso.com"

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

@@ -1,8 +1,5 @@
-import { useState } from 'react';
-
 import { Trans } from '@lingui/react/macro';
 import type { FieldType } from '@prisma/client';
-import { ChevronLeftIcon } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
 import {
@@ -10,7 +7,6 @@ import {
   type TRecipientActionAuth,
   type TRecipientActionAuthTypes,
 } from '@documenso/lib/types/document-auth';
-import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
   DialogContent,
@@ -22,12 +18,11 @@ import {
 import { DocumentSigningAuth2FA } from './document-signing-auth-2fa';
 import { DocumentSigningAuthAccount } from './document-signing-auth-account';
 import { DocumentSigningAuthPasskey } from './document-signing-auth-passkey';
-import { DocumentSigningAuthPassword } from './document-signing-auth-password';
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 
 export type DocumentSigningAuthDialogProps = {
   title?: string;
-  availableAuthTypes: TRecipientActionAuthTypes[];
+  documentAuthType: TRecipientActionAuthTypes;
   description?: string;
   actionTarget: FieldType | 'DOCUMENT';
   open: boolean;
@@ -42,158 +37,54 @@ export type DocumentSigningAuthDialogProps = {
 export const DocumentSigningAuthDialog = ({
   title,
   description,
-  availableAuthTypes,
+  documentAuthType,
   open,
   onOpenChange,
   onReauthFormSubmit,
 }: DocumentSigningAuthDialogProps) => {
   const { recipient, user, isCurrentlyAuthenticating } = useRequiredDocumentSigningAuthContext();
 
-  // Filter out EXPLICIT_NONE from available auth types for the chooser
-  const validAuthTypes = availableAuthTypes.filter(
-    (authType) => authType !== DocumentAuth.EXPLICIT_NONE,
-  );
-
-  const [selectedAuthType, setSelectedAuthType] = useState<TRecipientActionAuthTypes | null>(() => {
-    // Auto-select if there's only one valid option
-    if (validAuthTypes.length === 1) {
-      return validAuthTypes[0];
-    }
-    // Return null if multiple options - show chooser
-    return null;
-  });
-
   const handleOnOpenChange = (value: boolean) => {
     if (isCurrentlyAuthenticating) {
       return;
     }
 
-    // Reset selected auth type when dialog closes
-    if (!value) {
-      setSelectedAuthType(() => {
-        if (validAuthTypes.length === 1) {
-          return validAuthTypes[0];
-        }
-
-        return null;
-      });
-    }
-
     onOpenChange(value);
   };
 
-  const handleBackToChooser = () => {
-    setSelectedAuthType(null);
-  };
-
-  // If no valid auth types available, don't render anything
-  if (validAuthTypes.length === 0) {
-    return null;
-  }
-
   return (
     <Dialog open={open} onOpenChange={handleOnOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>
-            {selectedAuthType && validAuthTypes.length > 1 && (
-              <div className="flex items-center gap-2">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleBackToChooser}
-                  className="h-6 w-6 p-0"
-                >
-                  <ChevronLeftIcon className="h-4 w-4" />
-                </Button>
-                <span>{title || <Trans>Sign field</Trans>}</span>
-              </div>
-            )}
-            {(!selectedAuthType || validAuthTypes.length === 1) &&
-              (title || <Trans>Sign field</Trans>)}
-          </DialogTitle>
+          <DialogTitle>{title || <Trans>Sign field</Trans>}</DialogTitle>
 
           <DialogDescription>
             {description || <Trans>Reauthentication is required to sign this field</Trans>}
           </DialogDescription>
         </DialogHeader>
 
-        {/* Show chooser if no auth type is selected and there are multiple options */}
-        {!selectedAuthType && validAuthTypes.length > 1 && (
-          <div className="space-y-4">
-            <p className="text-muted-foreground text-sm">
-              <Trans>Choose your preferred authentication method:</Trans>
-            </p>
-            <div className="grid gap-2">
-              {validAuthTypes.map((authType) => (
-                <Button
-                  key={authType}
-                  type="button"
-                  variant="outline"
-                  className="h-auto justify-start p-4"
-                  onClick={() => setSelectedAuthType(authType)}
-                >
-                  <div className="text-left">
-                    <div className="font-medium">
-                      {match(authType)
-                        .with(DocumentAuth.ACCOUNT, () => <Trans>Account</Trans>)
-                        .with(DocumentAuth.PASSKEY, () => <Trans>Passkey</Trans>)
-                        .with(DocumentAuth.TWO_FACTOR_AUTH, () => <Trans>2FA</Trans>)
-                        .with(DocumentAuth.PASSWORD, () => <Trans>Password</Trans>)
-                        .exhaustive()}
-                    </div>
-
-                    <div className="text-muted-foreground text-sm">
-                      {match(authType)
-                        .with(DocumentAuth.ACCOUNT, () => <Trans>Sign in to your account</Trans>)
-                        .with(DocumentAuth.PASSKEY, () => (
-                          <Trans>Use your passkey for authentication</Trans>
-                        ))
-                        .with(DocumentAuth.TWO_FACTOR_AUTH, () => (
-                          <Trans>Enter your 2FA code</Trans>
-                        ))
-                        .with(DocumentAuth.PASSWORD, () => <Trans>Enter your password</Trans>)
-                        .exhaustive()}
-                    </div>
-                  </div>
-                </Button>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Show the selected auth component */}
-        {selectedAuthType &&
-          match({ documentAuthType: selectedAuthType, user })
-            .with(
-              { documentAuthType: DocumentAuth.ACCOUNT },
-              { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
-              () => <DocumentSigningAuthAccount onOpenChange={onOpenChange} />,
-            )
-            .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (
-              <DocumentSigningAuthPasskey
-                open={open}
-                onOpenChange={onOpenChange}
-                onReauthFormSubmit={onReauthFormSubmit}
-              />
-            ))
-            .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
-              <DocumentSigningAuth2FA
-                open={open}
-                onOpenChange={onOpenChange}
-                onReauthFormSubmit={onReauthFormSubmit}
-              />
-            ))
-            .with({ documentAuthType: DocumentAuth.PASSWORD }, () => (
-              <DocumentSigningAuthPassword
-                open={open}
-                onOpenChange={onOpenChange}
-                onReauthFormSubmit={onReauthFormSubmit}
-              />
-            ))
-            .with({ documentAuthType: DocumentAuth.EXPLICIT_NONE }, () => null)
-            .exhaustive()}
+        {match({ documentAuthType, user })
+          .with(
+            { documentAuthType: DocumentAuth.ACCOUNT },
+            { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
+            () => <DocumentSigningAuthAccount onOpenChange={onOpenChange} />,
+          )
+          .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (
+            <DocumentSigningAuthPasskey
+              open={open}
+              onOpenChange={onOpenChange}
+              onReauthFormSubmit={onReauthFormSubmit}
+            />
+          ))
+          .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
+            <DocumentSigningAuth2FA
+              open={open}
+              onOpenChange={onOpenChange}
+              onReauthFormSubmit={onReauthFormSubmit}
+            />
+          ))
+          .with({ documentAuthType: DocumentAuth.EXPLICIT_NONE }, () => null)
+          .exhaustive()}
       </DialogContent>
     </Dialog>
   );

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

@@ -1,148 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/react/macro';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { AppError } from '@documenso/lib/errors/app-error';
-import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-import { DialogFooter } from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-
-import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
-
-export type DocumentSigningAuthPasswordProps = {
-  actionTarget?: 'FIELD' | 'DOCUMENT';
-  actionVerb?: string;
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
-  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
-};
-
-const ZPasswordAuthFormSchema = z.object({
-  password: z
-    .string()
-    .min(1, { message: 'Password is required' })
-    .max(72, { message: 'Password must be at most 72 characters long' }),
-});
-
-type TPasswordAuthFormSchema = z.infer<typeof ZPasswordAuthFormSchema>;
-
-export const DocumentSigningAuthPassword = ({
-  actionTarget = 'FIELD',
-  actionVerb = 'sign',
-  onReauthFormSubmit,
-  open,
-  onOpenChange,
-}: DocumentSigningAuthPasswordProps) => {
-  const { recipient, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
-    useRequiredDocumentSigningAuthContext();
-
-  const form = useForm<TPasswordAuthFormSchema>({
-    resolver: zodResolver(ZPasswordAuthFormSchema),
-    defaultValues: {
-      password: '',
-    },
-  });
-
-  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
-
-  const onFormSubmit = async ({ password }: TPasswordAuthFormSchema) => {
-    try {
-      setIsCurrentlyAuthenticating(true);
-
-      await onReauthFormSubmit({
-        type: DocumentAuth.PASSWORD,
-        password,
-      });
-
-      setIsCurrentlyAuthenticating(false);
-
-      onOpenChange(false);
-    } catch (err) {
-      setIsCurrentlyAuthenticating(false);
-
-      const error = AppError.parseError(err);
-      setFormErrorCode(error.code);
-
-      // Todo: Alert.
-    }
-  };
-
-  useEffect(() => {
-    form.reset({
-      password: '',
-    });
-
-    setFormErrorCode(null);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
-        <fieldset disabled={isCurrentlyAuthenticating}>
-          <div className="space-y-4">
-            {formErrorCode && (
-              <Alert variant="destructive">
-                <AlertTitle>
-                  <Trans>Unauthorized</Trans>
-                </AlertTitle>
-                <AlertDescription>
-                  <Trans>
-                    We were unable to verify your details. Please try again or contact support
-                  </Trans>
-                </AlertDescription>
-              </Alert>
-            )}
-
-            <FormField
-              control={form.control}
-              name="password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>
-                    <Trans>Password</Trans>
-                  </FormLabel>
-
-                  <FormControl>
-                    <Input
-                      type="password"
-                      placeholder="Enter your password"
-                      {...field}
-                      autoComplete="current-password"
-                    />
-                  </FormControl>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                <Trans>Cancel</Trans>
-              </Button>
-
-              <Button type="submit" loading={isCurrentlyAuthenticating}>
-                <Trans>Sign</Trans>
-              </Button>
-            </DialogFooter>
-          </div>
-        </fieldset>
-      </form>
-    </Form>
-  );
-};

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

@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 
 import { type Document, FieldType, type Passkey, type Recipient } from '@prisma/client';
+import { match } from 'ts-pattern';
 
 import type { SessionUser } from '@documenso/auth/server/lib/session/session';
 import { MAXIMUM_PASSKEYS } from '@documenso/lib/constants/auth';
@@ -32,8 +33,8 @@ export type DocumentSigningAuthContextValue = {
   recipient: Recipient;
   recipientAuthOption: TRecipientAuthOptions;
   setRecipient: (_value: Recipient) => void;
-  derivedRecipientAccessAuth: TRecipientAccessAuthTypes[];
-  derivedRecipientActionAuth: TRecipientActionAuthTypes[];
+  derivedRecipientAccessAuth: TRecipientAccessAuthTypes | null;
+  derivedRecipientActionAuth: TRecipientActionAuthTypes | null;
   isAuthRedirectRequired: boolean;
   isCurrentlyAuthenticating: boolean;
   setIsCurrentlyAuthenticating: (_value: boolean) => void;
@@ -99,7 +100,7 @@ export const DocumentSigningAuthProvider = ({
     },
     {
       placeholderData: (previousData) => previousData,
-      enabled: derivedRecipientActionAuth?.includes(DocumentAuth.PASSKEY) ?? false,
+      enabled: derivedRecipientActionAuth === DocumentAuth.PASSKEY,
     },
   );
 
@@ -120,28 +121,21 @@ export const DocumentSigningAuthProvider = ({
    * Will be `null` if the user still requires authentication, or if they don't need
    * authentication.
    */
-  const preCalculatedActionAuthOptions = useMemo(() => {
-    if (
-      !derivedRecipientActionAuth ||
-      derivedRecipientActionAuth.length === 0 ||
-      derivedRecipientActionAuth.includes(DocumentAuth.EXPLICIT_NONE)
-    ) {
-      return {
-        type: DocumentAuth.EXPLICIT_NONE,
-      };
-    }
+  const preCalculatedActionAuthOptions = match(derivedRecipientActionAuth)
+    .with(DocumentAuth.ACCOUNT, () => {
+      if (recipient.email !== user?.email) {
+        return null;
+      }
 
-    if (
-      derivedRecipientActionAuth.includes(DocumentAuth.ACCOUNT) &&
-      user?.email == recipient.email
-    ) {
       return {
         type: DocumentAuth.ACCOUNT,
       };
-    }
-
-    return null;
-  }, [derivedRecipientActionAuth, user, recipient]);
+    })
+    .with(DocumentAuth.EXPLICIT_NONE, () => ({
+      type: DocumentAuth.EXPLICIT_NONE,
+    }))
+    .with(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH, null, () => null)
+    .exhaustive();
 
   const executeActionAuthProcedure = async (options: ExecuteActionAuthProcedureOptions) => {
     // Directly run callback if no auth required.
@@ -176,8 +170,7 @@ export const DocumentSigningAuthProvider = ({
   // Assume that a user must be logged in for any auth requirements.
   const isAuthRedirectRequired = Boolean(
     derivedRecipientActionAuth &&
-      derivedRecipientActionAuth.length > 0 &&
-      !derivedRecipientActionAuth.includes(DocumentAuth.EXPLICIT_NONE) &&
+      derivedRecipientActionAuth !== DocumentAuth.EXPLICIT_NONE &&
       user?.email !== recipient.email,
   );
 
@@ -215,7 +208,7 @@ export const DocumentSigningAuthProvider = ({
           onOpenChange={() => setDocumentAuthDialogPayload(null)}
           onReauthFormSubmit={documentAuthDialogPayload.onReauthFormSubmit}
           actionTarget={documentAuthDialogPayload.actionTarget}
-          availableAuthTypes={derivedRecipientActionAuth}
+          documentAuthType={derivedRecipientActionAuth}
         />
       )}
     </DocumentSigningAuthContext.Provider>
@@ -224,7 +217,7 @@ export const DocumentSigningAuthProvider = ({
 
 type ExecuteActionAuthProcedureOptions = Omit<
   DocumentSigningAuthDialogProps,
-  'open' | 'onOpenChange' | 'documentAuthType' | 'recipientRole' | 'availableAuthTypes'
+  'open' | 'onOpenChange' | 'documentAuthType' | 'recipientRole'
 >;
 
 DocumentSigningAuthProvider.displayName = 'DocumentSigningAuthProvider';

apps/remix/app/components/general/document-signing/document-signing-auto-sign.tsx

@@ -44,7 +44,6 @@ const AUTO_SIGNABLE_FIELD_TYPES: string[] = [
 // other field types.
 const NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES: string[] = [
   DocumentAuth.PASSKEY,
-  DocumentAuth.PASSWORD,
   DocumentAuth.TWO_FACTOR_AUTH,
 ];
 
@@ -97,8 +96,8 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
     return true;
   });
 
-  const actionAuthAllowsAutoSign = derivedRecipientActionAuth.every(
-    (actionAuth) => !NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES.includes(actionAuth),
+  const actionAuthAllowsAutoSign = !NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES.includes(
+    derivedRecipientActionAuth ?? '',
   );
 
   const onSubmit = async () => {
@@ -111,16 +110,16 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
           .with(FieldType.DATE, () => new Date().toISOString())
           .otherwise(() => '');
 
-        const authOptions = match(derivedRecipientActionAuth.at(0))
+        const authOptions = match(derivedRecipientActionAuth)
           .with(DocumentAuth.ACCOUNT, () => ({
             type: DocumentAuth.ACCOUNT,
           }))
           .with(DocumentAuth.EXPLICIT_NONE, () => ({
             type: DocumentAuth.EXPLICIT_NONE,
           }))
-          .with(undefined, () => undefined)
+          .with(null, () => undefined)
           .with(
-            P.union(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH, DocumentAuth.PASSWORD),
+            P.union(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH),
             // This is a bit dirty, but the sentinel value used here is incredibly short-lived.
             () => 'NOT_SUPPORTED' as const,
           )

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

@@ -92,6 +92,8 @@ export const DocumentSigningCompleteDialog = ({
   };
 
   const onFormSubmit = async (data: TNextSignerFormSchema) => {
+    console.log('data', data);
+    console.log('form.formState.errors', form.formState.errors);
     try {
       if (allowDictateNextSigner && data.name && data.email) {
         await onSignatureComplete({ name: data.name, email: data.email });

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

@@ -166,7 +166,7 @@ export const DocumentSigningFieldContainer = ({
             </TooltipTrigger>
 
             <TooltipContent
-              className="border-0 bg-orange-300 fill-orange-300 text-orange-900"
+              className="border-0 bg-orange-300 fill-orange-300 font-bold text-orange-900"
               sideOffset={2}
             >
               {tooltipText && <p>{tooltipText}</p>}

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

@@ -1,106 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import type { DocumentData } from '@prisma/client';
-import { DateTime } from 'luxon';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
-
-import { ShareDocumentDownloadButton } from '../share-document-download-button';
-
-export type DocumentCertificateQRViewProps = {
-  documentId: number;
-  title: string;
-  documentData: DocumentData;
-  password?: string | null;
-  recipientCount?: number;
-  completedDate?: Date;
-};
-
-export const DocumentCertificateQRView = ({
-  documentId,
-  title,
-  documentData,
-  password,
-  recipientCount = 0,
-  completedDate,
-}: DocumentCertificateQRViewProps) => {
-  const { data: documentUrl } = trpc.shareLink.getDocumentInternalUrlForQRCode.useQuery({
-    documentId,
-  });
-
-  const [isDialogOpen, setIsDialogOpen] = useState(() => !!documentUrl);
-
-  const formattedDate = completedDate
-    ? DateTime.fromJSDate(completedDate).toLocaleString(DateTime.DATETIME_MED)
-    : '';
-
-  useEffect(() => {
-    if (documentUrl) {
-      setIsDialogOpen(true);
-    }
-  }, [documentUrl]);
-
-  return (
-    <div className="mx-auto w-full max-w-screen-md">
-      {/* Dialog for internal document link */}
-      {documentUrl && (
-        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>
-                <Trans>Document found in your account</Trans>
-              </DialogTitle>
-
-              <DialogDescription>
-                <Trans>
-                  This document is available in your Documenso account. You can view more details,
-                  recipients, and audit logs there.
-                </Trans>
-              </DialogDescription>
-            </DialogHeader>
-
-            <DialogFooter className="flex flex-row justify-end gap-2">
-              <Button asChild>
-                <a href={documentUrl} target="_blank" rel="noopener noreferrer">
-                  <Trans>Go to document</Trans>
-                </a>
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      )}
-
-      <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>
-
-        <ShareDocumentDownloadButton title={title} documentData={documentData} />
-      </div>
-
-      <div className="mt-12 w-full">
-        <PDFViewer key={documentData.id} documentData={documentData} password={password} />
-      </div>
-    </div>
-  );
-};

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

@@ -1,192 +0,0 @@
-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 { useDropzone } from 'react-dropzone';
-import { Link, useNavigate, useParams } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } 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 { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
-import { formatDocumentsPath } 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 { useOptionalCurrentTeam } from '~/providers/team';
-
-export interface DocumentDropZoneWrapperProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZoneWrapperProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { user } = useSession();
-  const { folderId } = useParams();
-
-  const team = useOptionalCurrentTeam();
-
-  const navigate = useNavigate();
-  const analytics = useAnalytics();
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const userTimezone =
-    TIME_ZONES.find((timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone) ??
-    DEFAULT_DOCUMENT_TIME_ZONE;
-
-  const { quota, remaining, refreshLimits } = useLimits();
-
-  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
-
-  const isUploadDisabled = remaining.documents === 0 || !user.emailVerified;
-
-  const onFileDrop = async (file: File) => {
-    if (isUploadDisabled && IS_BILLING_ENABLED()) {
-      await navigate('/settings/billing');
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-
-      const response = await putPdfFile(file);
-
-      const { id } = await createDocument({
-        title: file.name,
-        documentDataId: response.id,
-        timezone: userTimezone,
-        folderId: folderId ?? undefined,
-      });
-
-      void refreshLimits();
-
-      toast({
-        title: _(msg`Document uploaded`),
-        description: _(msg`Your document has been uploaded successfully.`),
-        duration: 5000,
-      });
-
-      analytics.capture('App: Document Uploaded', {
-        userId: user.id,
-        documentId: id,
-        timestamp: new Date().toISOString(),
-      });
-
-      await navigate(
-        folderId
-          ? `${formatDocumentsPath(team?.url)}/f/${folderId}/${id}/edit`
-          : `${formatDocumentsPath(team?.url)}/${id}/edit`,
-      );
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      const errorMessage = match(error.code)
-        .with('INVALID_DOCUMENT_FILE', () => msg`You cannot upload encrypted PDFs`)
-        .with(
-          AppErrorCode.LIMIT_EXCEEDED,
-          () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
-        )
-        .otherwise(() => msg`An error occurred while uploading your document.`);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(errorMessage),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const onFileDropRejected = () => {
-    toast({
-      title: _(msg`Your document failed to upload.`),
-      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
-      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: () => {
-      void onFileDropRejected();
-    },
-    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 Document</Trans>
-            </h2>
-
-            <p className="text-muted-foreground text-md mt-4">
-              <Trans>Drag and drop your PDF file here</Trans>
-            </p>
-
-            {isUploadDisabled && IS_BILLING_ENABLED() && (
-              <Link
-                to="/settings/billing"
-                className="mt-4 text-sm text-amber-500 hover:underline dark:text-amber-400"
-              >
-                <Trans>Upgrade your plan to upload more documents</Trans>
-              </Link>
-            )}
-
-            {!isUploadDisabled &&
-              team?.id === undefined &&
-              remaining.documents > 0 &&
-              Number.isFinite(remaining.documents) && (
-                <p className="text-muted-foreground/80 mt-4 text-sm">
-                  <Trans>
-                    {remaining.documents} of {quota.documents} documents remaining this month.
-                  </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 document...</Trans>
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

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

@@ -183,8 +183,8 @@ export const DocumentEditForm = ({
           title: data.title,
           externalId: data.externalId || null,
           visibility: data.visibility,
-          globalAccessAuth: data.globalAccessAuth ?? [],
-          globalActionAuth: data.globalActionAuth ?? [],
+          globalAccessAuth: data.globalAccessAuth ?? null,
+          globalActionAuth: data.globalActionAuth ?? null,
         },
         meta: {
           timezone,
@@ -229,7 +229,7 @@ export const DocumentEditForm = ({
           recipients: data.signers.map((signer) => ({
             ...signer,
             // Explicitly set to null to indicate we want to remove auth if required.
-            actionAuth: signer.actionAuth ?? [],
+            actionAuth: signer.actionAuth || null,
           })),
         }),
       ]);

apps/remix/app/components/general/document/document-history-sheet.tsx

@@ -81,15 +81,11 @@ export const DocumentHistorySheet = ({
    * @param text The text to format
    * @returns The formatted text
    */
-  const formatGenericText = (text?: string | string[] | null): string => {
+  const formatGenericText = (text?: string | null) => {
     if (!text) {
       return '';
     }
 
-    if (Array.isArray(text)) {
-      return text.map((t) => formatGenericText(t)).join(', ');
-    }
-
     return (text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()).replaceAll('_', ' ');
   };
 
@@ -249,19 +245,11 @@ export const DocumentHistorySheet = ({
                         values={[
                           {
                             key: 'Old',
-                            value: Array.isArray(data.from)
-                              ? data.from
-                                  .map((f) => DOCUMENT_AUTH_TYPES[f]?.value || 'None')
-                                  .join(', ')
-                              : DOCUMENT_AUTH_TYPES[data.from || '']?.value || 'None',
+                            value: DOCUMENT_AUTH_TYPES[data.from || '']?.value || 'None',
                           },
                           {
                             key: 'New',
-                            value: Array.isArray(data.to)
-                              ? data.to
-                                  .map((f) => DOCUMENT_AUTH_TYPES[f]?.value || 'None')
-                                  .join(', ')
-                              : DOCUMENT_AUTH_TYPES[data.to || '']?.value || 'None',
+                            value: DOCUMENT_AUTH_TYPES[data.to || '']?.value || 'None',
                           },
                         ]}
                       />

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

@@ -38,9 +38,6 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
   const role = recipient?.role;
 
   const documentsPath = formatDocumentsPath(document.team?.url);
-  const formatPath = document.folderId
-    ? `${documentsPath}/f/${document.folderId}/${document.id}/edit`
-    : `${documentsPath}/${document.id}/edit`;
 
   const onDownloadClick = async () => {
     try {
@@ -104,7 +101,7 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
     ))
     .with({ isComplete: false }, () => (
       <Button className="w-full" asChild>
-        <Link to={formatPath}>
+        <Link to={`${documentsPath}/${document.id}/edit`}>
           <Trans>Edit</Trans>
         </Link>
       </Button>

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

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Document, Recipient, Team, User } from '@prisma/client';
 import { DocumentStatus } from '@prisma/client';
+import type { Document, Recipient, Team, User } from '@prisma/client';
 import {
   Copy,
   Download,
@@ -15,7 +15,8 @@ import {
   Share,
   Trash2,
 } from 'lucide-react';
-import { Link, useNavigate } from 'react-router';
+import { Link } from 'react-router';
+import { useNavigate } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -98,35 +99,6 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
     }
   };
 
-  const onDownloadOriginalClick = async () => {
-    try {
-      const documentWithData = await trpcClient.document.getDocumentById.query(
-        {
-          documentId: document.id,
-        },
-        {
-          context: {
-            teamId: team?.id?.toString(),
-          },
-        },
-      );
-
-      const documentData = documentWithData?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: document.title, version: 'original' });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
   const nonSignedRecipients = document.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
@@ -156,11 +128,6 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
           </DropdownMenuItem>
         )}
 
-        <DropdownMenuItem onClick={onDownloadOriginalClick}>
-          <Download className="mr-2 h-4 w-4" />
-          <Trans>Download Original</Trans>
-        </DropdownMenuItem>
-
         <DropdownMenuItem asChild>
           <Link to={`${documentsPath}/${document.id}/logs`}>
             <ScrollTextIcon className="mr-2 h-4 w-4" />

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

@@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
-import { useNavigate, useParams } from 'react-router';
+import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -17,13 +17,7 @@ import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
-import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@documenso/ui/primitives/tooltip';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useOptionalCurrentTeam } from '~/providers/team';
@@ -36,7 +30,6 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
   const { _ } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
-  const { folderId } = useParams();
 
   const team = useOptionalCurrentTeam();
 
@@ -76,7 +69,6 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         title: file.name,
         documentDataId: response.id,
         timezone: userTimezone,
-        folderId: folderId ?? undefined,
       });
 
       void refreshLimits();
@@ -93,11 +85,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         timestamp: new Date().toISOString(),
       });
 
-      await navigate(
-        folderId
-          ? `${formatDocumentsPath(team?.url)}/f/${folderId}/${id}/edit`
-          : `${formatDocumentsPath(team?.url)}/${id}/edit`,
-      );
+      await navigate(`${formatDocumentsPath(team?.url)}/${id}/edit`);
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -133,31 +121,25 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
 
   return (
     <div className={cn('relative', className)}>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div>
-              <DocumentDropzone
-                disabled={remaining.documents === 0 || !user.emailVerified}
-                disabledMessage={disabledMessage}
-                onDrop={onFileDrop}
-                onDropRejected={onFileDropRejected}
-              />
-            </div>
-          </TooltipTrigger>
-          {team?.id === undefined &&
-            remaining.documents > 0 &&
-            Number.isFinite(remaining.documents) && (
-              <TooltipContent>
-                <p className="text-sm">
-                  <Trans>
-                    {remaining.documents} of {quota.documents} documents remaining this month.
-                  </Trans>
-                </p>
-              </TooltipContent>
-            )}
-        </Tooltip>
-      </TooltipProvider>
+      <DocumentDropzone
+        className="h-[min(400px,50vh)]"
+        disabled={remaining.documents === 0 || !user.emailVerified}
+        disabledMessage={disabledMessage}
+        onDrop={onFileDrop}
+        onDropRejected={onFileDropRejected}
+      />
+
+      <div className="absolute -bottom-6 right-0">
+        {team?.id === undefined &&
+          remaining.documents > 0 &&
+          Number.isFinite(remaining.documents) && (
+            <p className="text-muted-foreground/60 text-xs">
+              <Trans>
+                {remaining.documents} of {quota.documents} documents remaining this month.
+              </Trans>
+            </p>
+          )}
+      </div>
 
       {isLoading && (
         <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">

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

@@ -1,88 +0,0 @@
-import { FolderIcon, PinIcon } from 'lucide-react';
-
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatFolderCount } from '@documenso/lib/utils/format-folder-count';
-import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
-
-export type FolderCardProps = {
-  folder: TFolderWithSubfolders;
-  onNavigate: (folderId: string) => void;
-  onMove: (folder: TFolderWithSubfolders) => void;
-  onPin: (folderId: string) => void;
-  onUnpin: (folderId: string) => void;
-  onSettings: (folder: TFolderWithSubfolders) => void;
-  onDelete: (folder: TFolderWithSubfolders) => void;
-};
-
-export const FolderCard = ({
-  folder,
-  onNavigate,
-  onMove,
-  onPin,
-  onUnpin,
-  onSettings,
-  onDelete,
-}: FolderCardProps) => {
-  return (
-    <div
-      key={folder.id}
-      className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
-    >
-      <div className="flex items-start justify-between">
-        <button
-          className="flex items-center space-x-2 text-left"
-          onClick={() => onNavigate(folder.id)}
-        >
-          <FolderIcon className="text-documenso h-6 w-6" />
-          <div>
-            <div className="flex items-center gap-2">
-              <h3 className="font-medium">{folder.name}</h3>
-              {folder.pinned && <PinIcon className="text-documenso h-3 w-3" />}
-            </div>
-            <div className="mt-1 flex space-x-2 text-xs text-gray-500">
-              <span>
-                {formatFolderCount(
-                  folder.type === FolderType.TEMPLATE
-                    ? folder._count.templates
-                    : folder._count.documents,
-                  folder.type === FolderType.TEMPLATE ? 'template' : 'document',
-                  folder.type === FolderType.TEMPLATE ? 'templates' : 'documents',
-                )}
-              </span>
-              <span>•</span>
-              <span>{formatFolderCount(folder._count.subfolders, 'folder', 'folders')}</span>
-            </div>
-          </div>
-        </button>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="sm" className="opacity-0 group-hover:opacity-100">
-              •••
-            </Button>
-          </DropdownMenuTrigger>
-
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => onMove(folder)}>Move</DropdownMenuItem>
-            {folder.pinned ? (
-              <DropdownMenuItem onClick={() => onUnpin(folder.id)}>Unpin</DropdownMenuItem>
-            ) : (
-              <DropdownMenuItem onClick={() => onPin(folder.id)}>Pin</DropdownMenuItem>
-            )}
-            <DropdownMenuItem onClick={() => onSettings(folder)}>Settings</DropdownMenuItem>
-            <DropdownMenuItem className="text-red-500" onClick={() => onDelete(folder)}>
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-};

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

@@ -1,53 +0,0 @@
-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;
-};
-
-export const ShareDocumentDownloadButton = ({
-  title,
-  documentData,
-}: ShareDocumentDownloadButtonProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const [isDownloading, setIsDownloading] = useState(false);
-
-  const onDownloadClick = async () => {
-    try {
-      setIsDownloading(true);
-
-      await new Promise((resolve) => {
-        setTimeout(resolve, 4000);
-      });
-
-      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-edit-form.tsx

@@ -134,8 +134,8 @@ export const TemplateEditForm = ({
           title: data.title,
           externalId: data.externalId || null,
           visibility: data.visibility,
-          globalAccessAuth: data.globalAccessAuth ?? [],
-          globalActionAuth: data.globalActionAuth ?? [],
+          globalAccessAuth: data.globalAccessAuth ?? null,
+          globalActionAuth: data.globalActionAuth ?? null,
         },
         meta: {
           ...data.meta,
@@ -208,11 +208,7 @@ export const TemplateEditForm = ({
         duration: 5000,
       });
 
-      const templatePath = template.folderId
-        ? `${templateRootPath}/f/${template.folderId}`
-        : templateRootPath;
-
-      await navigate(templatePath);
+      await navigate(templateRootPath);
     } catch (err) {
       console.error(err);
 

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

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

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

@@ -14,13 +14,9 @@ import { Input } from '@documenso/ui/primitives/input';
 export type SigningVolume = {
   id: number;
   name: string;
-  email: string;
   signingVolume: number;
   createdAt: Date;
   planId: string;
-  userId?: number | null;
-  teamId?: number | null;
-  isTeam: boolean;
 };
 
 type LeaderboardTableProps = {

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

@@ -1,6 +1,7 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { Document, Recipient, Team, User } from '@prisma/client';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
@@ -8,7 +9,6 @@ import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import 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';
@@ -18,7 +18,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DocumentsTableActionButtonProps = {
-  row: TDocumentRow;
+  row: Document & {
+    user: Pick<User, 'id' | 'name' | 'email'>;
+    recipients: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
 };
 
 export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonProps) => {
@@ -40,9 +44,6 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const isCurrentTeamDocument = team && row.team?.url === team.url;
 
   const documentsPath = formatDocumentsPath(team?.url);
-  const formatPath = row.folderId
-    ? `${documentsPath}/f/${row.folderId}/${row.id}/edit`
-    : `${documentsPath}/${row.id}/edit`;
 
   const onDownloadClick = async () => {
     try {
@@ -95,7 +96,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
       isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
       () => (
         <Button className="w-32" asChild>
-          <Link to={formatPath}>
+          <Link to={`${documentsPath}/${row.id}/edit`}>
             <Edit className="-ml-1 mr-2 h-4 w-4" />
             <Trans>Edit</Trans>
           </Link>

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { Document, Recipient, Team, User } from '@prisma/client';
 import { DocumentStatus, RecipientRole } from '@prisma/client';
 import {
   CheckCircle,
@@ -10,8 +11,6 @@ import {
   Download,
   Edit,
   EyeIcon,
-  FileDown,
-  FolderInput,
   Loader,
   MoreHorizontal,
   MoveRight,
@@ -23,7 +22,6 @@ import { Link } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import 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';
@@ -45,14 +43,14 @@ import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/d
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DocumentsTableActionDropdownProps = {
-  row: TDocumentRow;
-  onMoveDocument?: () => void;
+  row: Document & {
+    user: Pick<User, 'id' | 'name' | 'email'>;
+    recipients: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
 };
 
-export const DocumentsTableActionDropdown = ({
-  row,
-  onMoveDocument,
-}: DocumentsTableActionDropdownProps) => {
+export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdownProps) => {
   const { user } = useSession();
   const team = useOptionalCurrentTeam();
 
@@ -75,9 +73,6 @@ export const DocumentsTableActionDropdown = ({
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team?.url);
-  const formatPath = row.folderId
-    ? `${documentsPath}/f/${row.folderId}/${row.id}/edit`
-    : `${documentsPath}/${row.id}/edit`;
 
   const onDownloadClick = async () => {
     try {
@@ -105,32 +100,6 @@ export const DocumentsTableActionDropdown = ({
     }
   };
 
-  const onDownloadOriginalClick = async () => {
-    try {
-      const document = !recipient
-        ? await trpcClient.document.getDocumentById.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 (
@@ -172,7 +141,7 @@ export const DocumentsTableActionDropdown = ({
         )}
 
         <DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
-          <Link to={formatPath}>
+          <Link to={`${documentsPath}/${row.id}/edit`}>
             <Edit className="mr-2 h-4 w-4" />
             <Trans>Edit</Trans>
           </Link>
@@ -183,11 +152,6 @@ export const DocumentsTableActionDropdown = ({
           <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" />
           <Trans>Duplicate</Trans>
@@ -201,13 +165,6 @@ export const DocumentsTableActionDropdown = ({
           </DropdownMenuItem>
         )}
 
-        {onMoveDocument && (
-          <DropdownMenuItem onClick={onMoveDocument} onSelect={(e) => e.preventDefault()}>
-            <FolderInput className="mr-2 h-4 w-4" />
-            <Trans>Move to Folder</Trans>
-          </DropdownMenuItem>
-        )}
-
         {/* No point displaying this if there's no functionality. */}
         {/* <DropdownMenuItem disabled>
           <XCircle className="mr-2 h-4 w-4" />

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

@@ -1,12 +1,16 @@
+import type { Document, Recipient, Team, User } from '@prisma/client';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 export type DataTableTitleProps = {
-  row: TDocumentRow;
+  row: Document & {
+    user: Pick<User, 'id' | 'name' | 'email'>;
+    team: Pick<Team, 'url'> | null;
+    recipients: Recipient[];
+  };
   teamUrl?: string;
 };
 

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

@@ -29,17 +29,11 @@ export type DocumentsTableProps = {
   data?: TFindDocumentsResponse;
   isLoading?: boolean;
   isLoadingError?: boolean;
-  onMoveDocument?: (documentId: number) => void;
 };
 
 type DocumentsTableRow = TFindDocumentsResponse['data'][number];
 
-export const DocumentsTable = ({
-  data,
-  isLoading,
-  isLoadingError,
-  onMoveDocument,
-}: DocumentsTableProps) => {
+export const DocumentsTable = ({ data, isLoading, isLoadingError }: DocumentsTableProps) => {
   const { _, i18n } = useLingui();
 
   const team = useOptionalCurrentTeam();
@@ -86,15 +80,12 @@ export const DocumentsTable = ({
           (!row.original.deletedAt || isDocumentCompleted(row.original.status)) && (
             <div className="flex items-center gap-x-4">
               <DocumentsTableActionButton row={row.original} />
-              <DocumentsTableActionDropdown
-                row={row.original}
-                onMoveDocument={onMoveDocument ? () => onMoveDocument(row.original.id) : undefined}
-              />
+              <DocumentsTableActionDropdown row={row.original} />
             </div>
           ),
       },
     ] satisfies DataTableColumnDef<DocumentsTableRow>[];
-  }, [team, onMoveDocument]);
+  }, [team]);
 
   const onPaginationChange = (page: number, perPage: number) => {
     startTransition(() => {
@@ -180,9 +171,6 @@ const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
   const isCurrentTeamDocument = teamUrl && row.team?.url === teamUrl;
 
   const documentsPath = formatDocumentsPath(isCurrentTeamDocument ? teamUrl : undefined);
-  const formatPath = row.folderId
-    ? `${documentsPath}/f/${row.folderId}/${row.id}`
-    : `${documentsPath}/${row.id}`;
 
   return match({
     isOwner,
@@ -191,7 +179,7 @@ const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
   })
     .with({ isOwner: true }, { isCurrentTeamDocument: true }, () => (
       <Link
-        to={formatPath}
+        to={`${documentsPath}/${row.id}`}
         title={row.title}
         className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
       >

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

@@ -2,16 +2,7 @@ import { useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Recipient, Template, TemplateDirectLink } from '@prisma/client';
-import {
-  Copy,
-  Edit,
-  FolderIcon,
-  MoreHorizontal,
-  MoveRight,
-  Share2Icon,
-  Trash2,
-  Upload,
-} from 'lucide-react';
+import { Copy, Edit, MoreHorizontal, MoveRight, Share2Icon, Trash2, Upload } from 'lucide-react';
 import { Link } from 'react-router';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -28,7 +19,6 @@ import { TemplateDeleteDialog } from '../dialogs/template-delete-dialog';
 import { TemplateDirectLinkDialog } from '../dialogs/template-direct-link-dialog';
 import { TemplateDuplicateDialog } from '../dialogs/template-duplicate-dialog';
 import { TemplateMoveDialog } from '../dialogs/template-move-dialog';
-import { TemplateMoveToFolderDialog } from '../dialogs/template-move-to-folder-dialog';
 
 export type TemplatesTableActionDropdownProps = {
   row: Template & {
@@ -60,18 +50,13 @@ export const TemplatesTableActionDropdown = ({
   const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
   const [isMoveDialogOpen, setMoveDialogOpen] = useState(false);
-  const [isMoveToFolderDialogOpen, setMoveToFolderDialogOpen] = useState(false);
 
   const isOwner = row.userId === user.id;
   const isTeamTemplate = row.teamId === teamId;
 
-  const formatPath = row.folderId
-    ? `${templateRootPath}/f/${row.folderId}/${row.id}/edit`
-    : `${templateRootPath}/${row.id}/edit`;
-
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger data-testid="template-table-action-btn">
+      <DropdownMenuTrigger>
         <MoreHorizontal className="text-muted-foreground h-5 w-5" />
       </DropdownMenuTrigger>
 
@@ -79,7 +64,7 @@ export const TemplatesTableActionDropdown = ({
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
         <DropdownMenuItem disabled={!isOwner && !isTeamTemplate} asChild>
-          <Link to={formatPath}>
+          <Link to={`${templateRootPath}/${row.id}/edit`}>
             <Edit className="mr-2 h-4 w-4" />
             <Trans>Edit</Trans>
           </Link>
@@ -98,11 +83,6 @@ export const TemplatesTableActionDropdown = ({
           <Trans>Direct link</Trans>
         </DropdownMenuItem>
 
-        <DropdownMenuItem onClick={() => setMoveToFolderDialogOpen(true)}>
-          <FolderIcon className="mr-2 h-4 w-4" />
-          <Trans>Move to Folder</Trans>
-        </DropdownMenuItem>
-
         {!teamId && !row.teamId && (
           <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
             <MoveRight className="mr-2 h-4 w-4" />
@@ -155,14 +135,6 @@ export const TemplatesTableActionDropdown = ({
         onOpenChange={setDeleteDialogOpen}
         onDelete={onDelete}
       />
-
-      <TemplateMoveToFolderDialog
-        templateId={row.id}
-        templateTitle={row.title}
-        isOpen={isMoveToFolderDialogOpen}
-        onOpenChange={setMoveToFolderDialogOpen}
-        currentFolderId={row.folderId}
-      />
     </DropdownMenu>
   );
 };

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

@@ -54,11 +54,6 @@ export const TemplatesTable = ({
   const formatTemplateLink = (row: TemplatesTableRow) => {
     const isCurrentTeamTemplate = team?.url && row.team?.url === team?.url;
     const path = formatTemplatesPath(isCurrentTeamTemplate ? team?.url : undefined);
-
-    if (row.folderId) {
-      return `${path}/f/${row.folderId}/${row.id}`;
-    }
-
     return `${path}/${row.id}`;
   };
 

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

@@ -90,7 +90,7 @@ export default function AdminDocumentsPage() {
               <TooltipTrigger>
                 <Link to={`/admin/users/${row.original.user.id}`}>
                   <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
-                    <AvatarFallback className="text-muted-foreground text-xs">
+                    <AvatarFallback className="text-xs text-gray-400">
                       {avatarFallbackText}
                     </AvatarFallback>
                   </Avatar>
@@ -99,7 +99,7 @@ export default function AdminDocumentsPage() {
 
               <TooltipContent className="flex max-w-xs items-center gap-2">
                 <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
-                  <AvatarFallback className="text-muted-foreground text-xs">
+                  <AvatarFallback className="text-xs text-gray-400">
                     {avatarFallbackText}
                   </AvatarFallback>
                 </Avatar>

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

@@ -2,10 +2,7 @@ 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 { AdminLeaderboardTable } from '~/components/tables/admin-leaderboard-table';
 
 import type { Route } from './+types/leaderboard';
 
@@ -28,7 +25,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const perPage = Number(url.searchParams.get('perPage')) || 10;
   const search = url.searchParams.get('search') || '';
 
-  const { leaderboard, totalPages } = await getSigningVolume({
+  const { leaderboard: signingVolume, totalPages } = await getSigningVolume({
     search,
     page,
     perPage,
@@ -36,14 +33,8 @@ export async function loader({ request }: Route.LoaderArgs) {
     sortOrder,
   });
 
-  const typedSigningVolume: SigningVolume[] = leaderboard.map((item) => ({
-    ...item,
-    name: item.name || '',
-    createdAt: item.createdAt || new Date(),
-  }));
-
   return {
-    signingVolume: typedSigningVolume,
+    signingVolume,
     totalPages,
     page,
     perPage,
@@ -57,11 +48,9 @@ export default function Leaderboard({ loaderData }: Route.ComponentProps) {
 
   return (
     <div>
-      <div className="flex items-center">
-        <h2 className="text-4xl font-semibold">
-          <Trans>Signing Volume</Trans>
-        </h2>
-      </div>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Signing Volume</Trans>
+      </h2>
       <div className="mt-8">
         <AdminLeaderboardTable
           signingVolume={signingVolume}

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

@@ -64,10 +64,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
-  if (document?.folderId) {
-    throw redirect(documentRootPath);
-  }
-
   const documentVisibility = document?.visibility;
   const currentTeamMemberRole = team?.currentTeamMember?.role;
   const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);

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

@@ -49,10 +49,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
-  if (document?.folderId) {
-    throw redirect(documentRootPath);
-  }
-
   const documentVisibility = document?.visibility;
   const currentTeamMemberRole = team?.currentTeamMember?.role;
   const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
@@ -87,10 +83,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
   });
 
   return superLoaderJson({
-    document: {
-      ...document,
-      folder: null,
-    },
+    document,
     documentRootPath,
     isDocumentEnterprise,
   });

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

@@ -43,26 +43,24 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
-  const document = await getDocumentById({
-    documentId,
-    userId: user.id,
-    teamId: team?.id,
-  }).catch(() => null);
+  // Todo: Get full document instead?
+  const [document, recipients] = await Promise.all([
+    getDocumentById({
+      documentId,
+      userId: user.id,
+      teamId: team?.id,
+    }).catch(() => null),
+    getRecipientsForDocument({
+      documentId,
+      userId: user.id,
+      teamId: team?.id,
+    }),
+  ]);
 
   if (!document || !document.documentData) {
     throw redirect(documentRootPath);
   }
 
-  if (document.folderId) {
-    throw redirect(documentRootPath);
-  }
-
-  const recipients = await getRecipientsForDocument({
-    documentId,
-    userId: user.id,
-    teamId: team?.id,
-  });
-
   return {
     document,
     documentRootPath,

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

@@ -1,12 +1,10 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate, useSearchParams } from 'react-router';
+import { useSearchParams } from 'react-router';
 import { Link } from 'react-router';
 import { z } from 'zod';
 
-import { FolderType } from '@documenso/lib/types/folder-type';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
@@ -16,21 +14,12 @@ import {
   type TFindDocumentsInternalResponse,
   ZFindDocumentsInternalRequestSchema,
 } from '@documenso/trpc/server/document-router/schema';
-import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
-import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
-import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
-import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
 import { DocumentSearch } from '~/components/general/document/document-search';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { DocumentUploadDropzone } from '~/components/general/document/document-upload';
-import { FolderCard } from '~/components/general/folder/folder-card';
 import { PeriodSelector } from '~/components/general/period-selector';
 import { DocumentsTable } from '~/components/tables/documents-table';
 import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
@@ -54,22 +43,9 @@ const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
 
 export default function DocumentsPage() {
   const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-
-  const [isMovingDocument, setIsMovingDocument] = useState(false);
-  const [documentToMove, setDocumentToMove] = useState<number | null>(null);
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
 
   const team = useOptionalCurrentTeam();
 
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
   const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
     [ExtendedDocumentStatus.DRAFT]: 0,
     [ExtendedDocumentStatus.PENDING]: 0,
@@ -90,18 +66,9 @@ export default function DocumentsPage() {
     },
   );
 
-  const {
-    data: foldersData,
-    isLoading: isFoldersLoading,
-    refetch: refetchFolders,
-  } = trpc.folder.getFolders.useQuery({
-    type: FolderType.DOCUMENT,
-    parentId: null,
-  });
-
+  // Refetch the documents when the team URL changes.
   useEffect(() => {
     void refetch();
-    void refetchFolders();
   }, [team?.url]);
 
   const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
@@ -126,265 +93,76 @@ export default function DocumentsPage() {
     }
   }, [data?.stats]);
 
-  const navigateToFolder = (folderId?: string | null) => {
-    const documentsPath = formatDocumentsPath(team?.url);
-
-    if (folderId) {
-      void navigate(`${documentsPath}/f/${folderId}`);
-    } else {
-      void navigate(documentsPath);
-    }
-  };
-
-  const handleViewAllFolders = () => {
-    void navigate(`${formatDocumentsPath(team?.url)}/folders`);
-  };
-
   return (
-    <DocumentDropZoneWrapper>
-      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div className="flex flex-1 items-center">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-              onClick={() => navigateToFolder(null)}
-            >
-              <HomeIcon className="h-4 w-4" />
-              <span>Home</span>
-            </Button>
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <DocumentUploadDropzone />
 
-            {foldersData?.breadcrumbs.map((folder) => (
-              <div key={folder.id} className="flex items-center space-x-2">
-                <span>/</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
-                  onClick={() => navigateToFolder(folder.id)}
+      <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
+        <div className="flex flex-row items-center">
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+              <AvatarFallback className="text-xs text-gray-400">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="text-4xl font-semibold">
+            <Trans>Documents</Trans>
+          </h1>
+        </div>
+
+        <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
+          <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
+            <TabsList>
+              {[
+                ExtendedDocumentStatus.INBOX,
+                ExtendedDocumentStatus.PENDING,
+                ExtendedDocumentStatus.COMPLETED,
+                ExtendedDocumentStatus.DRAFT,
+                ExtendedDocumentStatus.ALL,
+              ].map((value) => (
+                <TabsTrigger
+                  key={value}
+                  className="hover:text-foreground min-w-[60px]"
+                  value={value}
+                  asChild
                 >
-                  <FolderIcon className="h-4 w-4" />
-                  <span>{folder.name}</span>
-                </Button>
-              </div>
-            ))}
-          </div>
+                  <Link to={getTabHref(value)} preventScrollReset>
+                    <DocumentStatus status={value} />
 
-          <div className="flex gap-4 sm:flex-row sm:justify-end">
-            <DocumentUploadDropzone />
-            <CreateFolderDialog />
+                    {value !== ExtendedDocumentStatus.ALL && (
+                      <span className="ml-1 inline-block opacity-50">{stats[value]}</span>
+                    )}
+                  </Link>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+
+          {team && <DocumentsTableSenderFilter teamId={team.id} />}
+
+          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+            <PeriodSelector />
+          </div>
+          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+            <DocumentSearch initialValue={findDocumentSearchParams.query} />
           </div>
         </div>
-
-        {isFoldersLoading ? (
-          <div className="mt-6 flex justify-center">
-            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          </div>
-        ) : (
-          <>
-            {foldersData?.folders?.some((folder) => folder.pinned) && (
-              <div className="mt-6">
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                  {foldersData.folders
-                    .filter((folder) => folder.pinned)
-                    .map((folder) => (
-                      <FolderCard
-                        key={folder.id}
-                        folder={folder}
-                        onNavigate={navigateToFolder}
-                        onMove={(folder) => {
-                          setFolderToMove(folder);
-                          setIsMovingFolder(true);
-                        }}
-                        onPin={(folderId) => void pinFolder({ folderId })}
-                        onUnpin={(folderId) => void unpinFolder({ folderId })}
-                        onSettings={(folder) => {
-                          setFolderToSettings(folder);
-                          setIsSettingsFolderOpen(true);
-                        }}
-                        onDelete={(folder) => {
-                          setFolderToDelete(folder);
-                          setIsDeletingFolder(true);
-                        }}
-                      />
-                    ))}
-                </div>
-              </div>
-            )}
-
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  ?.filter((folder) => !folder.pinned)
-                  .slice(0, 12)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={navigateToFolder}
-                      onMove={(folder) => {
-                        setFolderToMove(folder);
-                        setIsMovingFolder(true);
-                      }}
-                      onPin={(folderId) => void pinFolder({ folderId })}
-                      onUnpin={(folderId) => void unpinFolder({ folderId })}
-                      onSettings={(folder) => {
-                        setFolderToSettings(folder);
-                        setIsSettingsFolderOpen(true);
-                      }}
-                      onDelete={(folder) => {
-                        setFolderToDelete(folder);
-                        setIsDeletingFolder(true);
-                      }}
-                    />
-                  ))}
-              </div>
-
-              <div className="mt-6 flex items-center justify-center">
-                {foldersData && foldersData.folders?.length > 12 && (
-                  <Button
-                    variant="link"
-                    size="sm"
-                    className="text-muted-foreground hover:text-foreground"
-                    onClick={() => void handleViewAllFolders()}
-                  >
-                    View all folders
-                  </Button>
-                )}
-              </div>
-            </div>
-          </>
-        )}
-
-        <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
-          <div className="flex flex-row items-center">
-            {team && (
-              <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
-                {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-                <AvatarFallback className="text-muted-foreground text-xs">
-                  {team.name.slice(0, 1)}
-                </AvatarFallback>
-              </Avatar>
-            )}
-
-            <h2 className="text-4xl font-semibold">
-              <Trans>Documents</Trans>
-            </h2>
-          </div>
-
-          <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-            <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
-              <TabsList>
-                {[
-                  ExtendedDocumentStatus.INBOX,
-                  ExtendedDocumentStatus.PENDING,
-                  ExtendedDocumentStatus.COMPLETED,
-                  ExtendedDocumentStatus.DRAFT,
-                  ExtendedDocumentStatus.ALL,
-                ].map((value) => (
-                  <TabsTrigger
-                    key={value}
-                    className="hover:text-foreground min-w-[60px]"
-                    value={value}
-                    asChild
-                  >
-                    <Link to={getTabHref(value)} preventScrollReset>
-                      <DocumentStatus status={value} />
-
-                      {value !== ExtendedDocumentStatus.ALL && (
-                        <span className="ml-1 inline-block opacity-50">{stats[value]}</span>
-                      )}
-                    </Link>
-                  </TabsTrigger>
-                ))}
-              </TabsList>
-            </Tabs>
-
-            {team && <DocumentsTableSenderFilter teamId={team.id} />}
-
-            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-              <PeriodSelector />
-            </div>
-            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-              <DocumentSearch initialValue={findDocumentSearchParams.query} />
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-8">
-          <div>
-            {data &&
-            data.count === 0 &&
-            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
-              <DocumentsTableEmptyState
-                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
-              />
-            ) : (
-              <DocumentsTable
-                data={data}
-                isLoading={isLoading}
-                isLoadingError={isLoadingError}
-                onMoveDocument={(documentId) => {
-                  setDocumentToMove(documentId);
-                  setIsMovingDocument(true);
-                }}
-              />
-            )}
-          </div>
-        </div>
-
-        {documentToMove && (
-          <DocumentMoveToFolderDialog
-            documentId={documentToMove}
-            open={isMovingDocument}
-            onOpenChange={(open) => {
-              setIsMovingDocument(open);
-
-              if (!open) {
-                setDocumentToMove(null);
-              }
-            }}
-          />
-        )}
-
-        <FolderMoveDialog
-          foldersData={foldersData?.folders}
-          folder={folderToMove}
-          isOpen={isMovingFolder}
-          onOpenChange={(open) => {
-            setIsMovingFolder(open);
-
-            if (!open) {
-              setFolderToMove(null);
-            }
-          }}
-        />
-
-        <FolderSettingsDialog
-          folder={folderToSettings}
-          isOpen={isSettingsFolderOpen}
-          onOpenChange={(open) => {
-            setIsSettingsFolderOpen(open);
-
-            if (!open) {
-              setFolderToSettings(null);
-            }
-          }}
-        />
-
-        <FolderDeleteDialog
-          folder={folderToDelete}
-          isOpen={isDeletingFolder}
-          onOpenChange={(open) => {
-            setIsDeletingFolder(open);
-
-            if (!open) {
-              setFolderToDelete(null);
-            }
-          }}
-        />
       </div>
-    </DocumentDropZoneWrapper>
+
+      <div className="mt-8">
+        <div>
+          {data && data.count === 0 ? (
+            <DocumentsTableEmptyState
+              status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
+            />
+          ) : (
+            <DocumentsTable data={data} isLoading={isLoading} isLoadingError={isLoadingError} />
+          )}
+        </div>
+      </div>
+    </div>
   );
 }

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

@@ -1,272 +0,0 @@
-import { useLingui } from '@lingui/react';
-import { Plural, Trans } from '@lingui/react/macro';
-import { DocumentStatus, TeamMemberRole } from '@prisma/client';
-import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
-import { Link, redirect } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
-import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
-import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
-import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
-
-import { DocumentHistorySheet } from '~/components/general/document/document-history-sheet';
-import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
-import { DocumentPageViewDropdown } from '~/components/general/document/document-page-view-dropdown';
-import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
-import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
-import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
-import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
-import {
-  DocumentStatus as DocumentStatusComponent,
-  FRIENDLY_STATUS_MAP,
-} from '~/components/general/document/document-status';
-import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import type { Route } from './+types/documents.f.$folderId.$id._index';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  const { id, folderId } = params;
-
-  const documentId = Number(id);
-
-  const documentRootPath = formatDocumentsPath(team?.url);
-
-  if (!documentId || !folderId) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  const document = await getDocumentById({
-    documentId,
-    userId: user.id,
-    teamId: team?.id,
-    folderId,
-  }).catch(() => null);
-
-  if (document?.teamId && !team?.url) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  const documentVisibility = document?.visibility;
-  const currentTeamMemberRole = team?.currentTeamMember?.role;
-  const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
-  let canAccessDocument = true;
-
-  if (team && !isRecipient && document?.userId !== user.id) {
-    canAccessDocument = match([documentVisibility, currentTeamMemberRole])
-      .with([DocumentVisibility.EVERYONE, TeamMemberRole.ADMIN], () => true)
-      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MANAGER], () => true)
-      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MEMBER], () => true)
-      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.ADMIN], () => true)
-      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.MANAGER], () => true)
-      .with([DocumentVisibility.ADMIN, TeamMemberRole.ADMIN], () => true)
-      .otherwise(() => false);
-  }
-
-  if (!document || !document.documentData || (team && !canAccessDocument)) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (team && !canAccessDocument) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (document.folderId !== folderId) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  // Todo: Get full document instead?
-  const [recipients, fields] = await Promise.all([
-    getRecipientsForDocument({
-      documentId,
-      teamId: team?.id,
-      userId: user.id,
-    }),
-    getFieldsForDocument({
-      documentId,
-      userId: user.id,
-      teamId: team?.id,
-    }),
-  ]);
-
-  const documentWithRecipients = {
-    ...document,
-    recipients,
-  };
-
-  return superLoaderJson({
-    document: documentWithRecipients,
-    documentRootPath,
-    fields,
-    folderId,
-  });
-}
-
-export default function DocumentPage() {
-  const loaderData = useSuperLoaderData<typeof loader>();
-
-  const { _ } = useLingui();
-  const { user } = useSession();
-
-  const { document, documentRootPath, fields, folderId } = loaderData;
-
-  const { recipients, documentData, documentMeta } = document;
-
-  // This was a feature flag. Leave to false since it's not ready.
-  const isDocumentHistoryEnabled = false;
-
-  return (
-    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-      {document.status === DocumentStatus.PENDING && (
-        <DocumentRecipientLinkCopyDialog recipients={recipients} />
-      )}
-
-      <Link
-        to={folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath}
-        className="flex items-center text-[#7AC455] hover:opacity-80"
-      >
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        <Trans>Documents</Trans>
-      </Link>
-
-      <div className="flex flex-row justify-between truncate">
-        <div>
-          <h1
-            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
-            title={document.title}
-          >
-            {document.title}
-          </h1>
-
-          <div className="mt-2.5 flex items-center gap-x-6">
-            <DocumentStatusComponent
-              inheritColor
-              status={document.status}
-              className="text-muted-foreground"
-            />
-
-            {recipients.length > 0 && (
-              <div className="text-muted-foreground flex items-center">
-                <Users2 className="mr-2 h-5 w-5" />
-
-                <StackAvatarsWithTooltip
-                  recipients={recipients}
-                  documentStatus={document.status}
-                  position="bottom"
-                >
-                  <span>
-                    <Trans>{recipients.length} Recipient(s)</Trans>
-                  </span>
-                </StackAvatarsWithTooltip>
-              </div>
-            )}
-
-            {document.deletedAt && (
-              <Badge variant="destructive">
-                <Trans>Document deleted</Trans>
-              </Badge>
-            )}
-          </div>
-        </div>
-
-        {isDocumentHistoryEnabled && (
-          <div className="self-end">
-            <DocumentHistorySheet documentId={document.id} userId={user.id}>
-              <Button variant="outline">
-                <Clock9 className="mr-1.5 h-4 w-4" />
-                <Trans>Document history</Trans>
-              </Button>
-            </DocumentHistorySheet>
-          </div>
-        )}
-      </div>
-
-      <div className="mt-6 grid w-full grid-cols-12 gap-8">
-        <Card
-          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
-          gradient
-        >
-          <CardContent className="p-2">
-            <PDFViewer document={document} key={documentData.id} documentData={documentData} />
-          </CardContent>
-        </Card>
-
-        {document.status === DocumentStatus.PENDING && (
-          <DocumentReadOnlyFields fields={fields} documentMeta={documentMeta || undefined} />
-        )}
-
-        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-          <div className="space-y-6">
-            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
-              <div className="flex flex-row items-center justify-between px-4">
-                <h3 className="text-foreground text-2xl font-semibold">
-                  {_(FRIENDLY_STATUS_MAP[document.status].labelExtended)}
-                </h3>
-
-                <DocumentPageViewDropdown document={document} />
-              </div>
-
-              <p className="text-muted-foreground mt-2 px-4 text-sm">
-                {match(document.status)
-                  .with(DocumentStatus.COMPLETED, () => (
-                    <Trans>This document has been signed by all recipients</Trans>
-                  ))
-                  .with(DocumentStatus.REJECTED, () => (
-                    <Trans>This document has been rejected by a recipient</Trans>
-                  ))
-                  .with(DocumentStatus.DRAFT, () => (
-                    <Trans>This document is currently a draft and has not been sent</Trans>
-                  ))
-                  .with(DocumentStatus.PENDING, () => {
-                    const pendingRecipients = recipients.filter(
-                      (recipient) => recipient.signingStatus === 'NOT_SIGNED',
-                    );
-
-                    return (
-                      <Plural
-                        value={pendingRecipients.length}
-                        one="Waiting on 1 recipient"
-                        other="Waiting on # recipients"
-                      />
-                    );
-                  })
-                  .exhaustive()}
-              </p>
-
-              <div className="mt-4 border-t px-4 pt-4">
-                <DocumentPageViewButton document={document} />
-              </div>
-            </section>
-
-            {/* Document information section. */}
-            <DocumentPageViewInformation document={document} userId={user.id} />
-
-            {/* Recipients section. */}
-            <DocumentPageViewRecipients document={document} documentRootPath={documentRootPath} />
-
-            {/* Recent activity section. */}
-            <DocumentPageViewRecentActivity documentId={document.id} userId={user.id} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,155 +0,0 @@
-import { Plural, Trans } from '@lingui/react/macro';
-import { TeamMemberRole } from '@prisma/client';
-import { ChevronLeft, Users2 } from 'lucide-react';
-import { Link, redirect } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
-import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
-import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-
-import { DocumentEditForm } from '~/components/general/document/document-edit-form';
-import { DocumentStatus } from '~/components/general/document/document-status';
-import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import type { Route } from './+types/documents.$id.edit';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  const { id, folderId } = params;
-
-  const documentId = Number(id);
-
-  const documentRootPath = formatDocumentsPath(team?.url);
-
-  if (!documentId || Number.isNaN(documentId)) {
-    throw redirect(documentRootPath);
-  }
-
-  if (!folderId) {
-    throw redirect(documentRootPath);
-  }
-
-  const document = await getDocumentWithDetailsById({
-    documentId,
-    userId: user.id,
-    teamId: team?.id,
-    folderId,
-  }).catch(() => null);
-
-  if (document?.teamId && !team?.url) {
-    throw redirect(documentRootPath);
-  }
-
-  const documentVisibility = document?.visibility;
-  const currentTeamMemberRole = team?.currentTeamMember?.role;
-  const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
-  let canAccessDocument = true;
-
-  if (!isRecipient && document?.userId !== user.id) {
-    canAccessDocument = match([documentVisibility, currentTeamMemberRole])
-      .with([DocumentVisibility.EVERYONE, TeamMemberRole.ADMIN], () => true)
-      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MANAGER], () => true)
-      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MEMBER], () => true)
-      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.ADMIN], () => true)
-      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.MANAGER], () => true)
-      .with([DocumentVisibility.ADMIN, TeamMemberRole.ADMIN], () => true)
-      .otherwise(() => false);
-  }
-
-  if (!document) {
-    throw redirect(documentRootPath);
-  }
-
-  if (team && !canAccessDocument) {
-    throw redirect(documentRootPath);
-  }
-
-  if (document.folderId !== folderId) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (isDocumentCompleted(document.status)) {
-    throw redirect(`${documentRootPath}/${documentId}`);
-  }
-
-  const isDocumentEnterprise = await isUserEnterprise({
-    userId: user.id,
-    teamId: team?.id,
-  });
-
-  return superLoaderJson({
-    document: {
-      ...document,
-      folder: null,
-    },
-    documentRootPath,
-    isDocumentEnterprise,
-    folderId,
-  });
-}
-
-export default function DocumentEditPage() {
-  const { document, documentRootPath, isDocumentEnterprise, folderId } =
-    useSuperLoaderData<typeof loader>();
-
-  const { recipients } = document;
-
-  return (
-    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-      <Link
-        to={`${documentRootPath}/f/${folderId}`}
-        className="flex items-center text-[#7AC455] hover:opacity-80"
-      >
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        <Trans>Documents</Trans>
-      </Link>
-
-      <h1
-        className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
-        title={document.title}
-      >
-        {document.title}
-      </h1>
-
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
-
-        {recipients.length > 0 && (
-          <div className="text-muted-foreground flex items-center">
-            <Users2 className="mr-2 h-5 w-5" />
-
-            <StackAvatarsWithTooltip
-              recipients={recipients}
-              documentStatus={document.status}
-              position="bottom"
-            >
-              <span>
-                <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
-              </span>
-            </StackAvatarsWithTooltip>
-          </div>
-        )}
-      </div>
-
-      <DocumentEditForm
-        className="mt-6"
-        initialDocument={document}
-        documentRootPath={documentRootPath}
-        isDocumentEnterprise={isDocumentEnterprise}
-      />
-    </div>
-  );
-}

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

@@ -1,199 +0,0 @@
-import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { Recipient } from '@prisma/client';
-import { ChevronLeft } from 'lucide-react';
-import { DateTime } from 'luxon';
-import { Link, redirect } from 'react-router';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
-import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
-import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { Card } from '@documenso/ui/primitives/card';
-
-import { DocumentAuditLogDownloadButton } from '~/components/general/document/document-audit-log-download-button';
-import { DocumentCertificateDownloadButton } from '~/components/general/document/document-certificate-download-button';
-import {
-  DocumentStatus as DocumentStatusComponent,
-  FRIENDLY_STATUS_MAP,
-} from '~/components/general/document/document-status';
-import { DocumentLogsTable } from '~/components/tables/document-logs-table';
-
-import type { Route } from './+types/documents.f.$folderId.$id.logs';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  const { id, folderId } = params;
-
-  const documentId = Number(id);
-
-  const documentRootPath = formatDocumentsPath(team?.url);
-
-  if (!documentId || Number.isNaN(documentId)) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (!folderId) {
-    throw redirect(documentRootPath);
-  }
-
-  // Todo: Get full document instead?
-  const [document, recipients] = await Promise.all([
-    getDocumentById({
-      documentId,
-      userId: user.id,
-      teamId: team?.id,
-      folderId,
-    }).catch(() => null),
-    getRecipientsForDocument({
-      documentId,
-      userId: user.id,
-      teamId: team?.id,
-    }),
-  ]);
-
-  if (!document || !document.documentData) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  if (document.folderId !== folderId) {
-    throw redirect(documentRootPath);
-  }
-
-  return {
-    document,
-    documentRootPath,
-    recipients,
-    folderId,
-  };
-}
-
-export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps) {
-  const { document, documentRootPath, recipients, folderId } = loaderData;
-
-  const { _, i18n } = useLingui();
-
-  const documentInformation: { description: MessageDescriptor; value: string }[] = [
-    {
-      description: msg`Document title`,
-      value: document.title,
-    },
-    {
-      description: msg`Document ID`,
-      value: document.id.toString(),
-    },
-    {
-      description: msg`Document status`,
-      value: _(FRIENDLY_STATUS_MAP[document.status].label),
-    },
-    {
-      description: msg`Created by`,
-      value: document.user.name
-        ? `${document.user.name} (${document.user.email})`
-        : document.user.email,
-    },
-    {
-      description: msg`Date created`,
-      value: DateTime.fromJSDate(document.createdAt)
-        .setLocale(i18n.locales?.[0] || i18n.locale)
-        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
-    },
-    {
-      description: msg`Last updated`,
-      value: DateTime.fromJSDate(document.updatedAt)
-        .setLocale(i18n.locales?.[0] || i18n.locale)
-        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
-    },
-    {
-      description: msg`Time zone`,
-      value: document.documentMeta?.timezone ?? 'N/A',
-    },
-  ];
-
-  const formatRecipientText = (recipient: Recipient) => {
-    let text = recipient.email;
-
-    if (recipient.name) {
-      text = `${recipient.name} (${recipient.email})`;
-    }
-
-    return `[${recipient.role}] ${text}`;
-  };
-
-  return (
-    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-      <Link
-        to={`${documentRootPath}/f/${folderId}/${document.id}`}
-        className="flex items-center text-[#7AC455] hover:opacity-80"
-      >
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        <Trans>Document</Trans>
-      </Link>
-
-      <div className="flex flex-col">
-        <div>
-          <h1
-            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
-            title={document.title}
-          >
-            {document.title}
-          </h1>
-        </div>
-        <div className="mt-1 flex flex-col justify-between sm:flex-row">
-          <div className="mt-2.5 flex items-center gap-x-6">
-            <DocumentStatusComponent
-              inheritColor
-              status={document.status}
-              className="text-muted-foreground"
-            />
-          </div>
-          <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
-            <DocumentCertificateDownloadButton
-              className="mr-2"
-              documentId={document.id}
-              documentStatus={document.status}
-            />
-
-            <DocumentAuditLogDownloadButton documentId={document.id} />
-          </div>
-        </div>
-      </div>
-
-      <section className="mt-6">
-        <Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient>
-          {documentInformation.map((info, i) => (
-            <div className="text-foreground text-sm" key={i}>
-              <h3 className="font-semibold">{_(info.description)}</h3>
-              <p className="text-muted-foreground truncate">{info.value}</p>
-            </div>
-          ))}
-
-          <div className="text-foreground text-sm">
-            <h3 className="font-semibold">Recipients</h3>
-            <ul className="text-muted-foreground list-inside list-disc">
-              {recipients.map((recipient) => (
-                <li key={`recipient-${recipient.id}`}>
-                  <span className="-ml-2">{formatRecipientText(recipient)}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </Card>
-      </section>
-
-      <section className="mt-6">
-        <DocumentLogsTable documentId={document.id} />
-      </section>
-    </div>
-  );
-}

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

@@ -1,374 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate, useParams, useSearchParams } from 'react-router';
-import { Link } from 'react-router';
-import { z } from 'zod';
-
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { parseToIntegerArray } from '@documenso/lib/utils/params';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
-import { trpc } from '@documenso/trpc/react';
-import {
-  type TFindDocumentsInternalResponse,
-  ZFindDocumentsInternalRequestSchema,
-} from '@documenso/trpc/server/document-router/schema';
-import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-
-import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
-import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
-import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
-import { DocumentSearch } from '~/components/general/document/document-search';
-import { DocumentStatus } from '~/components/general/document/document-status';
-import { DocumentUploadDropzone } from '~/components/general/document/document-upload';
-import { FolderCard } from '~/components/general/folder/folder-card';
-import { PeriodSelector } from '~/components/general/period-selector';
-import { DocumentsTable } from '~/components/tables/documents-table';
-import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
-import { DocumentsTableSenderFilter } from '~/components/tables/documents-table-sender-filter';
-import { useOptionalCurrentTeam } from '~/providers/team';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Documents');
-}
-
-const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
-  status: true,
-  period: true,
-  page: true,
-  perPage: true,
-  query: true,
-}).extend({
-  senderIds: z.string().transform(parseToIntegerArray).optional().catch([]),
-});
-
-export default function DocumentsPage() {
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-
-  const [isMovingDocument, setIsMovingDocument] = useState(false);
-  const [documentToMove, setDocumentToMove] = useState<number | null>(null);
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
-  const { folderId } = useParams();
-
-  const team = useOptionalCurrentTeam();
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
-    [ExtendedDocumentStatus.DRAFT]: 0,
-    [ExtendedDocumentStatus.PENDING]: 0,
-    [ExtendedDocumentStatus.COMPLETED]: 0,
-    [ExtendedDocumentStatus.REJECTED]: 0,
-    [ExtendedDocumentStatus.INBOX]: 0,
-    [ExtendedDocumentStatus.ALL]: 0,
-  });
-
-  const findDocumentSearchParams = useMemo(
-    () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
-    [searchParams],
-  );
-
-  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocumentsInternal.useQuery(
-    {
-      ...findDocumentSearchParams,
-      folderId,
-    },
-  );
-
-  const {
-    data: foldersData,
-    isLoading: isFoldersLoading,
-    refetch: refetchFolders,
-  } = trpc.folder.getFolders.useQuery({
-    parentId: folderId,
-  });
-
-  useEffect(() => {
-    void refetch();
-    void refetchFolders();
-  }, [team?.url]);
-
-  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
-    const params = new URLSearchParams(searchParams);
-
-    params.set('status', value);
-
-    if (value === ExtendedDocumentStatus.ALL) {
-      params.delete('status');
-    }
-
-    if (params.has('page')) {
-      params.delete('page');
-    }
-
-    return `${formatDocumentsPath(team?.url)}/f/${folderId}?${params.toString()}`;
-  };
-
-  useEffect(() => {
-    if (data?.stats) {
-      setStats(data.stats);
-    }
-  }, [data?.stats]);
-
-  const navigateToFolder = (folderId?: string | null) => {
-    const documentsPath = formatDocumentsPath(team?.url);
-
-    if (folderId) {
-      void navigate(`${documentsPath}/f/${folderId}`);
-    } else {
-      void navigate(documentsPath);
-    }
-  };
-
-  return (
-    <DocumentDropZoneWrapper>
-      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div className="flex flex-1 items-center">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-              onClick={() => navigateToFolder(null)}
-            >
-              <HomeIcon className="h-4 w-4" />
-              <span>Home</span>
-            </Button>
-
-            {foldersData?.breadcrumbs.map((folder) => (
-              <div key={folder.id} className="flex items-center space-x-2">
-                <span>/</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
-                  onClick={() => navigateToFolder(folder.id)}
-                >
-                  <FolderIcon className="h-4 w-4" />
-                  <span>{folder.name}</span>
-                </Button>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex gap-4 sm:flex-row sm:justify-end">
-            <DocumentUploadDropzone />
-            <CreateFolderDialog />
-          </div>
-        </div>
-
-        {isFoldersLoading ? (
-          <div className="mt-6 flex justify-center">
-            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          </div>
-        ) : (
-          <>
-            {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
-              <div className="mt-6">
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                  {foldersData.folders
-                    .filter((folder) => folder.pinned)
-                    .map((folder) => (
-                      <FolderCard
-                        key={folder.id}
-                        folder={folder}
-                        onNavigate={navigateToFolder}
-                        onMove={(folder) => {
-                          setFolderToMove(folder);
-                          setIsMovingFolder(true);
-                        }}
-                        onPin={(folderId) => void pinFolder({ folderId })}
-                        onUnpin={(folderId) => void unpinFolder({ folderId })}
-                        onSettings={(folder) => {
-                          setFolderToSettings(folder);
-                          setIsSettingsFolderOpen(true);
-                        }}
-                        onDelete={(folder) => {
-                          setFolderToDelete(folder);
-                          setIsDeletingFolder(true);
-                        }}
-                      />
-                    ))}
-                </div>
-              </div>
-            )}
-
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  .filter((folder) => !folder.pinned)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={navigateToFolder}
-                      onMove={(folder) => {
-                        setFolderToMove(folder);
-                        setIsMovingFolder(true);
-                      }}
-                      onPin={(folderId) => void pinFolder({ folderId })}
-                      onUnpin={(folderId) => void unpinFolder({ folderId })}
-                      onSettings={(folder) => {
-                        setFolderToSettings(folder);
-                        setIsSettingsFolderOpen(true);
-                      }}
-                      onDelete={(folder) => {
-                        setFolderToDelete(folder);
-                        setIsDeletingFolder(true);
-                      }}
-                    />
-                  ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
-          <div className="flex flex-row items-center">
-            {team && (
-              <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
-                {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-                <AvatarFallback className="text-muted-foreground text-xs">
-                  {team.name.slice(0, 1)}
-                </AvatarFallback>
-              </Avatar>
-            )}
-
-            <h2 className="text-4xl font-semibold">
-              <Trans>Documents</Trans>
-            </h2>
-          </div>
-
-          <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-            <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
-              <TabsList>
-                {[
-                  ExtendedDocumentStatus.INBOX,
-                  ExtendedDocumentStatus.PENDING,
-                  ExtendedDocumentStatus.COMPLETED,
-                  ExtendedDocumentStatus.DRAFT,
-                  ExtendedDocumentStatus.ALL,
-                ].map((value) => (
-                  <TabsTrigger
-                    key={value}
-                    className="hover:text-foreground min-w-[60px]"
-                    value={value}
-                    asChild
-                  >
-                    <Link to={getTabHref(value)} preventScrollReset>
-                      <DocumentStatus status={value} />
-
-                      {value !== ExtendedDocumentStatus.ALL && (
-                        <span className="ml-1 inline-block opacity-50">{stats[value]}</span>
-                      )}
-                    </Link>
-                  </TabsTrigger>
-                ))}
-              </TabsList>
-            </Tabs>
-
-            {team && <DocumentsTableSenderFilter teamId={team.id} />}
-
-            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-              <PeriodSelector />
-            </div>
-            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-              <DocumentSearch initialValue={findDocumentSearchParams.query} />
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-8">
-          <div>
-            {data &&
-            data.count === 0 &&
-            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
-              <DocumentsTableEmptyState
-                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
-              />
-            ) : (
-              <DocumentsTable
-                data={data}
-                isLoading={isLoading}
-                isLoadingError={isLoadingError}
-                onMoveDocument={(documentId) => {
-                  setDocumentToMove(documentId);
-                  setIsMovingDocument(true);
-                }}
-              />
-            )}
-          </div>
-        </div>
-
-        {documentToMove && (
-          <DocumentMoveToFolderDialog
-            documentId={documentToMove}
-            open={isMovingDocument}
-            onOpenChange={(open) => {
-              setIsMovingDocument(open);
-
-              if (!open) {
-                setDocumentToMove(null);
-              }
-            }}
-            currentFolderId={folderId}
-          />
-        )}
-
-        <FolderMoveDialog
-          foldersData={foldersData?.folders}
-          folder={folderToMove}
-          isOpen={isMovingFolder}
-          onOpenChange={(open) => {
-            setIsMovingFolder(open);
-
-            if (!open) {
-              setFolderToMove(null);
-            }
-          }}
-        />
-
-        <FolderSettingsDialog
-          folder={folderToSettings}
-          isOpen={isSettingsFolderOpen}
-          onOpenChange={(open) => {
-            setIsSettingsFolderOpen(open);
-
-            if (!open) {
-              setFolderToSettings(null);
-            }
-          }}
-        />
-
-        <FolderDeleteDialog
-          folder={folderToDelete}
-          isOpen={isDeletingFolder}
-          onOpenChange={(open) => {
-            setIsDeletingFolder(open);
-
-            if (!open) {
-              setFolderToDelete(null);
-            }
-          }}
-        />
-      </div>
-    </DocumentDropZoneWrapper>
-  );
-}

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

@@ -1,181 +0,0 @@
-import { useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate } from 'react-router';
-
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
-import { FolderCard } from '~/components/general/folder/folder-card';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Documents');
-}
-
-export default function DocumentsFoldersPage() {
-  const navigate = useNavigate();
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
-  const { data: foldersData, isLoading: isFoldersLoading } = trpc.folder.getFolders.useQuery({
-    type: FolderType.DOCUMENT,
-    parentId: null,
-  });
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const navigateToFolder = (folderId?: string | null) => {
-    const documentsPath = formatDocumentsPath();
-
-    if (folderId) {
-      void navigate(`${documentsPath}/f/${folderId}`);
-    } else {
-      void navigate(documentsPath);
-    }
-  };
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex flex-1 items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-            onClick={() => navigateToFolder(null)}
-          >
-            <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
-          </Button>
-        </div>
-
-        <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
-          <CreateFolderDialog />
-        </div>
-      </div>
-
-      <div className="mt-6">
-        {isFoldersLoading ? (
-          <div className="mt-6 flex justify-center">
-            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          </div>
-        ) : (
-          <>
-            {foldersData?.folders?.some((folder) => folder.pinned) && (
-              <div className="mt-6">
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                  {foldersData.folders
-                    .filter((folder) => folder.pinned)
-                    .map((folder) => (
-                      <FolderCard
-                        key={folder.id}
-                        folder={folder}
-                        onNavigate={navigateToFolder}
-                        onMove={(folder) => {
-                          setFolderToMove(folder);
-                          setIsMovingFolder(true);
-                        }}
-                        onPin={(folderId) => void pinFolder({ folderId })}
-                        onUnpin={(folderId) => void unpinFolder({ folderId })}
-                        onSettings={(folder) => {
-                          setFolderToSettings(folder);
-                          setIsSettingsFolderOpen(true);
-                        }}
-                        onDelete={(folder) => {
-                          setFolderToDelete(folder);
-                          setIsDeletingFolder(true);
-                        }}
-                      />
-                    ))}
-                </div>
-              </div>
-            )}
-
-            <div className="mt-12">
-              <h1 className="truncate text-2xl font-semibold md:text-3xl">
-                <Trans>All Folders</Trans>
-              </h1>
-
-              <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  .filter((folder) => !folder.pinned)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={navigateToFolder}
-                      onMove={(folder) => {
-                        setFolderToMove(folder);
-                        setIsMovingFolder(true);
-                      }}
-                      onPin={(folderId) => void pinFolder({ folderId })}
-                      onUnpin={(folderId) => void unpinFolder({ folderId })}
-                      onSettings={(folder) => {
-                        setFolderToSettings(folder);
-                        setIsSettingsFolderOpen(true);
-                      }}
-                      onDelete={(folder) => {
-                        setFolderToDelete(folder);
-                        setIsDeletingFolder(true);
-                      }}
-                    />
-                  ))}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      <FolderMoveDialog
-        foldersData={foldersData?.folders}
-        folder={folderToMove}
-        isOpen={isMovingFolder}
-        onOpenChange={(open) => {
-          setIsMovingFolder(open);
-
-          if (!open) {
-            setFolderToMove(null);
-          }
-        }}
-      />
-
-      <FolderSettingsDialog
-        folder={folderToSettings}
-        isOpen={isSettingsFolderOpen}
-        onOpenChange={(open) => {
-          setIsSettingsFolderOpen(open);
-
-          if (!open) {
-            setFolderToSettings(null);
-          }
-        }}
-      />
-
-      <FolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open) => {
-          setIsDeletingFolder(open);
-
-          if (!open) {
-            setFolderToDelete(null);
-          }
-        }}
-      />
-    </div>
-  );
-}

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

@@ -1,5 +0,0 @@
-import DocumentPage, { loader } from '~/routes/_authenticated+/documents.f.$folderId.$id._index';
-
-export { loader };
-
-export default DocumentPage;

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

@@ -1,5 +0,0 @@
-import DocumentEditPage, { loader } from '~/routes/_authenticated+/documents.f.$folderId.$id.edit';
-
-export { loader };
-
-export default DocumentEditPage;

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

@@ -1,5 +0,0 @@
-import DocumentLogsPage, { loader } from '~/routes/_authenticated+/documents.f.$folderId.$id.logs';
-
-export { loader };
-
-export default DocumentLogsPage;

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

@@ -1,5 +0,0 @@
-import DocumentsPage, { meta } from '~/routes/_authenticated+/documents.f.$folderId._index';
-
-export { meta };
-
-export default DocumentsPage;

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

@@ -1,5 +0,0 @@
-import DocumentsFoldersPage, { meta } from '~/routes/_authenticated+/documents.folders._index';
-
-export { meta };
-
-export default DocumentsFoldersPage;

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

@@ -1,5 +0,0 @@
-import TemplatePage, { loader } from '~/routes/_authenticated+/templates.f.$folderId.$id._index';
-
-export { loader };
-
-export default TemplatePage;

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

@@ -1,5 +0,0 @@
-import TemplateEditPage, { loader } from '~/routes/_authenticated+/templates.f.$folderId.$id.edit';
-
-export { loader };
-
-export default TemplateEditPage;

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

@@ -1,5 +0,0 @@
-import TemplatesPage, { meta } from '~/routes/_authenticated+/templates.f.$folderId._index';
-
-export { meta };
-
-export default TemplatesPage;

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

@@ -1,5 +0,0 @@
-import TemplatesFoldersPage, { meta } from '~/routes/_authenticated+/templates.folders._index';
-
-export { meta };
-
-export default TemplatesFoldersPage;

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

@@ -55,10 +55,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(templateRootPath);
   }
 
-  if (template.folderId) {
-    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}`);
-  }
-
   return superLoaderJson({
     user,
     team,

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

@@ -45,20 +45,13 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(templateRootPath);
   }
 
-  if (template.folderId) {
-    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}/edit`);
-  }
-
   const isTemplateEnterprise = await isUserEnterprise({
     userId: user.id,
     teamId: team?.id,
   });
 
   return superLoaderJson({
-    template: {
-      ...template,
-      folder: null,
-    },
+    template,
     isTemplateEnterprise,
     templateRootPath,
   });
@@ -72,11 +65,7 @@ export default function TemplateEditPage() {
       <div className="flex flex-col justify-between sm:flex-row">
         <div>
           <Link
-            to={
-              template.folderId
-                ? `${templateRootPath}/f/${template.folderId}/${template.id}`
-                : `${templateRootPath}/${template.id}`
-            }
+            to={`${templateRootPath}/${template.id}`}
             className="flex items-center text-[#7AC455] hover:opacity-80"
           >
             <ChevronLeft className="mr-2 inline-block h-5 w-5" />

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

@@ -1,23 +1,15 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { Bird, FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate, useSearchParams } from 'react-router';
+import { Bird } from 'lucide-react';
+import { useSearchParams } from 'react-router';
 
-import { FolderType } from '@documenso/lib/types/folder-type';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
 
 import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
-import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
-import { TemplateFolderDeleteDialog } from '~/components/dialogs/template-folder-delete-dialog';
-import { TemplateFolderMoveDialog } from '~/components/dialogs/template-folder-move-dialog';
-import { TemplateFolderSettingsDialog } from '~/components/dialogs/template-folder-settings-dialog';
-import { FolderCard } from '~/components/general/folder/folder-card';
 import { TemplatesTable } from '~/components/tables/templates-table';
 import { useOptionalCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -27,21 +19,10 @@ export function meta() {
 }
 
 export default function TemplatesPage() {
-  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
   const team = useOptionalCurrentTeam();
 
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
   const page = Number(searchParams.get('page')) || 1;
   const perPage = Number(searchParams.get('perPage')) || 10;
 
@@ -53,165 +34,19 @@ export default function TemplatesPage() {
     perPage: perPage,
   });
 
-  const {
-    data: foldersData,
-    isLoading: isFoldersLoading,
-    refetch: refetchFolders,
-  } = trpc.folder.getFolders.useQuery({
-    type: FolderType.TEMPLATE,
-    parentId: null,
-  });
-
+  // Refetch the templates when the team URL changes.
   useEffect(() => {
     void refetch();
-    void refetchFolders();
   }, [team?.url]);
 
-  const navigateToFolder = (folderId?: string | null) => {
-    const templatesPath = formatTemplatesPath(team?.url);
-
-    if (folderId) {
-      void navigate(`${templatesPath}/f/${folderId}`);
-    } else {
-      void navigate(templatesPath);
-    }
-  };
-
-  const handleNavigate = (folderId: string) => {
-    navigateToFolder(folderId);
-  };
-
-  const handleMove = (folder: TFolderWithSubfolders) => {
-    setFolderToMove(folder);
-    setIsMovingFolder(true);
-  };
-
-  const handlePin = (folderId: string) => {
-    void pinFolder({ folderId });
-  };
-
-  const handleUnpin = (folderId: string) => {
-    void unpinFolder({ folderId });
-  };
-
-  const handleSettings = (folder: TFolderWithSubfolders) => {
-    setFolderToSettings(folder);
-    setIsSettingsFolderOpen(true);
-  };
-
-  const handleDelete = (folder: TFolderWithSubfolders) => {
-    setFolderToDelete(folder);
-    setIsDeletingFolder(true);
-  };
-
-  const handleViewAllFolders = () => {
-    void navigate(`${formatTemplatesPath(team?.url)}/folders`);
-  };
-
   return (
     <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div className="flex flex-1 items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-            onClick={() => navigateToFolder(null)}
-          >
-            <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
-          </Button>
-
-          {foldersData?.breadcrumbs.map((folder) => (
-            <div key={folder.id} className="flex items-center space-x-2">
-              <span>/</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
-                onClick={() => navigateToFolder(folder.id)}
-              >
-                <FolderIcon className="h-4 w-4" />
-                <span>{folder.name}</span>
-              </Button>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex gap-4 sm:flex-row sm:justify-end">
-          <TemplateCreateDialog templateRootPath={templateRootPath} />
-          <TemplateFolderCreateDialog />
-        </div>
-      </div>
-
-      {isFoldersLoading ? (
-        <div className="mt-6 flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      ) : (
-        <>
-          {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData.folders
-                  .filter((folder) => folder.pinned)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={handleNavigate}
-                      onMove={handleMove}
-                      onPin={handlePin}
-                      onUnpin={handleUnpin}
-                      onSettings={handleSettings}
-                      onDelete={handleDelete}
-                    />
-                  ))}
-              </div>
-            </div>
-          )}
-
-          <div className="mt-6">
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-              {foldersData?.folders
-                ?.filter((folder) => !folder.pinned)
-                .slice(0, 12)
-                .map((folder) => (
-                  <FolderCard
-                    key={folder.id}
-                    folder={folder}
-                    onNavigate={handleNavigate}
-                    onMove={handleMove}
-                    onPin={handlePin}
-                    onUnpin={handleUnpin}
-                    onSettings={handleSettings}
-                    onDelete={handleDelete}
-                  />
-                ))}
-            </div>
-
-            <div className="mt-6 flex items-center justify-center">
-              {foldersData && foldersData.folders?.length > 12 && (
-                <Button
-                  variant="link"
-                  size="sm"
-                  className="text-muted-foreground hover:text-foreground"
-                  onClick={() => void handleViewAllFolders()}
-                >
-                  View all folders
-                </Button>
-              )}
-            </div>
-          </div>
-        </>
-      )}
-
-      <div className="mt-12">
+      <div className="flex items-baseline justify-between">
         <div className="flex flex-row items-center">
           {team && (
             <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
               {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-              <AvatarFallback className="text-muted-foreground text-xs">
+              <AvatarFallback className="text-xs text-gray-400">
                 {team.name.slice(0, 1)}
               </AvatarFallback>
             </Avatar>
@@ -222,71 +57,38 @@ export default function TemplatesPage() {
           </h1>
         </div>
 
-        <div className="mt-8">
-          {data && data.count === 0 ? (
-            <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
-              <Bird className="h-12 w-12" strokeWidth={1.5} />
-
-              <div className="text-center">
-                <h3 className="text-lg font-semibold">
-                  <Trans>We're all empty</Trans>
-                </h3>
-
-                <p className="mt-2 max-w-[50ch]">
-                  <Trans>
-                    You have not yet created any templates. To create a template please upload one.
-                  </Trans>
-                </p>
-              </div>
-            </div>
-          ) : (
-            <TemplatesTable
-              data={data}
-              isLoading={isLoading}
-              isLoadingError={isLoadingError}
-              documentRootPath={documentRootPath}
-              templateRootPath={templateRootPath}
-            />
-          )}
+        <div>
+          <TemplateCreateDialog templateRootPath={templateRootPath} teamId={team?.id} />
         </div>
       </div>
 
-      <TemplateFolderMoveDialog
-        foldersData={foldersData?.folders}
-        folder={folderToMove}
-        isOpen={isMovingFolder}
-        onOpenChange={(open) => {
-          setIsMovingFolder(open);
+      <div className="relative mt-5">
+        {data && data.count === 0 ? (
+          <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
+            <Bird className="h-12 w-12" strokeWidth={1.5} />
 
-          if (!open) {
-            setFolderToMove(null);
-          }
-        }}
-      />
+            <div className="text-center">
+              <h3 className="text-lg font-semibold">
+                <Trans>We're all empty</Trans>
+              </h3>
 
-      <TemplateFolderSettingsDialog
-        folder={folderToSettings}
-        isOpen={isSettingsFolderOpen}
-        onOpenChange={(open) => {
-          setIsSettingsFolderOpen(open);
-
-          if (!open) {
-            setFolderToSettings(null);
-          }
-        }}
-      />
-
-      <TemplateFolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open) => {
-          setIsDeletingFolder(open);
-
-          if (!open) {
-            setFolderToDelete(null);
-          }
-        }}
-      />
+              <p className="mt-2 max-w-[50ch]">
+                <Trans>
+                  You have not yet created any templates. To create a template please upload one.
+                </Trans>
+              </p>
+            </div>
+          </div>
+        ) : (
+          <TemplatesTable
+            data={data}
+            isLoading={isLoading}
+            isLoadingError={isLoadingError}
+            documentRootPath={documentRootPath}
+            templateRootPath={templateRootPath}
+          />
+        )}
+      </div>
     </div>
   );
 }

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

@@ -1,230 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { DocumentSigningOrder, SigningStatus } from '@prisma/client';
-import { ChevronLeft, LucideEdit } from 'lucide-react';
-import { Link, redirect, useNavigate } from 'react-router';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
-
-import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
-import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
-import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
-import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
-import { TemplatePageViewDocumentsTable } from '~/components/general/template/template-page-view-documents-table';
-import { TemplatePageViewInformation } from '~/components/general/template/template-page-view-information';
-import { TemplatePageViewRecentActivity } from '~/components/general/template/template-page-view-recent-activity';
-import { TemplatePageViewRecipients } from '~/components/general/template/template-page-view-recipients';
-import { TemplateType } from '~/components/general/template/template-type';
-import { TemplatesTableActionDropdown } from '~/components/tables/templates-table-action-dropdown';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import type { Route } from './+types/templates.$id._index';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  const { id, folderId } = params;
-
-  const templateId = Number(id);
-  const templateRootPath = formatTemplatesPath(team?.url);
-  const documentRootPath = formatDocumentsPath(team?.url);
-
-  if (!templateId || Number.isNaN(templateId)) {
-    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
-  }
-
-  const template = await getTemplateById({
-    id: templateId,
-    userId: user.id,
-    teamId: team?.id,
-    folderId,
-  }).catch(() => null);
-
-  if (!template || !template.templateDocumentData || (template?.teamId && !team?.url)) {
-    throw redirect(folderId ? `${templateRootPath}/f/${folderId}` : templateRootPath);
-  }
-
-  if (!template.folderId) {
-    throw redirect(`${templateRootPath}/${templateId}`);
-  }
-
-  if (template.folderId !== folderId) {
-    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}`);
-  }
-
-  return superLoaderJson({
-    user,
-    team,
-    template,
-    templateRootPath,
-    documentRootPath,
-  });
-}
-
-export default function TemplatePage() {
-  const { user, team, template, templateRootPath, documentRootPath } =
-    useSuperLoaderData<typeof loader>();
-
-  const { templateDocumentData, fields, recipients, templateMeta } = template;
-
-  const navigate = useNavigate();
-
-  // Remap to fit the DocumentReadOnlyFields component.
-  const readOnlyFields = fields.map((field) => {
-    const recipient = recipients.find((recipient) => recipient.id === field.recipientId) || {
-      name: '',
-      email: '',
-      signingStatus: SigningStatus.NOT_SIGNED,
-    };
-
-    return {
-      ...field,
-      recipient,
-      signature: null,
-    };
-  });
-
-  const mockedDocumentMeta = templateMeta
-    ? {
-        ...templateMeta,
-        signingOrder: templateMeta.signingOrder || DocumentSigningOrder.SEQUENTIAL,
-        documentId: 0,
-      }
-    : undefined;
-
-  return (
-    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-      <Link to={templateRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        <Trans>Templates</Trans>
-      </Link>
-
-      <div className="flex flex-row justify-between truncate">
-        <div>
-          <h1
-            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
-            title={template.title}
-          >
-            {template.title}
-          </h1>
-
-          <div className="mt-2.5 flex items-center">
-            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
-
-            {template.directLink?.token && (
-              <TemplateDirectLinkBadge
-                className="ml-4"
-                token={template.directLink.token}
-                enabled={template.directLink.enabled}
-              />
-            )}
-          </div>
-        </div>
-
-        <div className="mt-2 flex flex-row space-x-4 sm:mt-0 sm:self-end">
-          <TemplateDirectLinkDialogWrapper template={template} />
-
-          <TemplateBulkSendDialog templateId={template.id} recipients={template.recipients} />
-
-          <Button className="w-full" asChild>
-            <Link to={`${templateRootPath}/${template.id}/edit`}>
-              <LucideEdit className="mr-1.5 h-3.5 w-3.5" />
-              <Trans>Edit Template</Trans>
-            </Link>
-          </Button>
-        </div>
-      </div>
-
-      <div className="mt-6 grid w-full grid-cols-12 gap-8">
-        <Card
-          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
-          gradient
-        >
-          <CardContent className="p-2">
-            <PDFViewer document={template} key={template.id} documentData={templateDocumentData} />
-          </CardContent>
-        </Card>
-
-        <DocumentReadOnlyFields
-          fields={readOnlyFields}
-          showFieldStatus={false}
-          documentMeta={mockedDocumentMeta}
-        />
-
-        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-          <div className="space-y-6">
-            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
-              <div className="flex flex-row items-center justify-between px-4">
-                <h3 className="text-foreground text-2xl font-semibold">
-                  <Trans>Template</Trans>
-                </h3>
-
-                <div>
-                  <TemplatesTableActionDropdown
-                    row={template}
-                    teamId={team?.id}
-                    templateRootPath={templateRootPath}
-                    onDelete={async () => navigate(templateRootPath)}
-                    onMove={async ({ teamUrl, templateId }) =>
-                      navigate(`${formatTemplatesPath(teamUrl)}/${templateId}`)
-                    }
-                  />
-                </div>
-              </div>
-
-              <p className="text-muted-foreground mt-2 px-4 text-sm">
-                <Trans>Manage and view template</Trans>
-              </p>
-
-              <div className="mt-4 border-t px-4 pt-4">
-                <TemplateUseDialog
-                  templateId={template.id}
-                  templateSigningOrder={template.templateMeta?.signingOrder}
-                  recipients={template.recipients}
-                  documentRootPath={documentRootPath}
-                  trigger={
-                    <Button className="w-full">
-                      <Trans>Use</Trans>
-                    </Button>
-                  }
-                />
-              </div>
-            </section>
-
-            {/* Template information section. */}
-            <TemplatePageViewInformation template={template} userId={user.id} />
-
-            {/* Recipients section. */}
-            <TemplatePageViewRecipients template={template} templateRootPath={templateRootPath} />
-
-            {/* Recent activity section. */}
-            <TemplatePageViewRecentActivity
-              documentRootPath={documentRootPath}
-              templateId={template.id}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="mt-16" id="documents">
-        <h1 className="mb-4 text-2xl font-bold">
-          <Trans>Documents created from template</Trans>
-        </h1>
-
-        <TemplatePageViewDocumentsTable templateId={template.id} />
-      </div>
-    </div>
-  );
-}

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

@@ -1,122 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { ChevronLeft } from 'lucide-react';
-import { Link, redirect } from 'react-router';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
-import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
-
-import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
-import { TemplateEditForm } from '~/components/general/template/template-edit-form';
-import { TemplateType } from '~/components/general/template/template-type';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import { TemplateDirectLinkDialogWrapper } from '../../components/dialogs/template-direct-link-dialog-wrapper';
-import type { Route } from './+types/templates.$id.edit';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  let team: TGetTeamByUrlResponse | null = null;
-
-  if (params.teamUrl) {
-    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
-  }
-
-  const { id } = params;
-
-  const templateId = Number(id);
-  const templateRootPath = formatTemplatesPath(team?.url);
-
-  if (!templateId || Number.isNaN(templateId)) {
-    throw redirect(templateRootPath);
-  }
-
-  const template = await getTemplateById({
-    id: templateId,
-    userId: user.id,
-    teamId: team?.id,
-  }).catch(() => null);
-
-  if (!template || !template.templateDocumentData) {
-    throw redirect(templateRootPath);
-  }
-
-  if (!template.folderId) {
-    throw redirect(`${templateRootPath}/${templateId}/edit`);
-  }
-
-  if (template.folderId !== params.folderId) {
-    throw redirect(`${templateRootPath}/f/${template.folderId}/${templateId}/edit`);
-  }
-
-  const isTemplateEnterprise = await isUserEnterprise({
-    userId: user.id,
-    teamId: team?.id,
-  });
-
-  return superLoaderJson({
-    template: {
-      ...template,
-      folder: null,
-    },
-    isTemplateEnterprise,
-    templateRootPath,
-  });
-}
-
-export default function TemplateEditPage() {
-  const { template, isTemplateEnterprise, templateRootPath } = useSuperLoaderData<typeof loader>();
-
-  return (
-    <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
-      <div className="flex flex-col justify-between sm:flex-row">
-        <div>
-          <Link
-            to={
-              template.folderId
-                ? `${templateRootPath}/f/${template.folderId}/${template.id}`
-                : `${templateRootPath}/${template.id}`
-            }
-            className="flex items-center text-[#7AC455] hover:opacity-80"
-          >
-            <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-            <Trans>Template</Trans>
-          </Link>
-
-          <h1
-            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
-            title={template.title}
-          >
-            {template.title}
-          </h1>
-
-          <div className="mt-2.5 flex items-center">
-            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
-
-            {template.directLink?.token && (
-              <TemplateDirectLinkBadge
-                className="ml-4"
-                token={template.directLink.token}
-                enabled={template.directLink.enabled}
-              />
-            )}
-          </div>
-        </div>
-
-        <div className="mt-2 sm:mt-0 sm:self-end">
-          <TemplateDirectLinkDialogWrapper template={template} />
-        </div>
-      </div>
-
-      <TemplateEditForm
-        className="mt-6"
-        initialTemplate={template}
-        templateRootPath={templateRootPath}
-        isEnterprise={isTemplateEnterprise}
-      />
-    </div>
-  );
-}

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

@@ -1,369 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { Bird, FolderIcon, HomeIcon, Loader2, PinIcon } from 'lucide-react';
-import { useNavigate, useParams, useSearchParams } from 'react-router';
-
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
-
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
-import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
-import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
-import { TemplatesTable } from '~/components/tables/templates-table';
-import { useOptionalCurrentTeam } from '~/providers/team';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Templates');
-}
-
-export default function TemplatesPage() {
-  const [searchParams] = useSearchParams();
-  const { folderId } = useParams();
-  const navigate = useNavigate();
-
-  const team = useOptionalCurrentTeam();
-
-  const page = Number(searchParams.get('page')) || 1;
-  const perPage = Number(searchParams.get('perPage')) || 10;
-
-  const documentRootPath = formatDocumentsPath(team?.url);
-  const templateRootPath = formatTemplatesPath(team?.url);
-
-  const { data, isLoading, isLoadingError, refetch } = trpc.template.findTemplates.useQuery({
-    page: page,
-    perPage: perPage,
-    folderId: folderId,
-  });
-
-  const {
-    data: foldersData,
-    isLoading: isFoldersLoading,
-    refetch: refetchFolders,
-  } = trpc.folder.getFolders.useQuery({
-    parentId: folderId,
-    type: FolderType.TEMPLATE,
-  });
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-
-  useEffect(() => {
-    void refetch();
-    void refetchFolders();
-  }, [team?.url]);
-
-  const navigateToFolder = (folderId?: string) => {
-    const templatesPath = formatTemplatesPath(team?.url);
-
-    if (folderId) {
-      void navigate(`${templatesPath}/f/${folderId}`);
-    } else {
-      void navigate(templatesPath);
-    }
-  };
-
-  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div className="flex flex-1 items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-            onClick={() => navigateToFolder()}
-          >
-            <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
-          </Button>
-
-          {foldersData?.breadcrumbs.map((folder) => (
-            <div key={folder.id} className="flex items-center space-x-2">
-              <span>/</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
-                onClick={() => navigateToFolder(folder.id)}
-              >
-                <FolderIcon className="h-4 w-4" />
-                <span>{folder.name}</span>
-              </Button>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex gap-4 sm:flex-row sm:justify-end">
-          <TemplateFolderCreateDialog />
-          <TemplateCreateDialog templateRootPath={templateRootPath} folderId={folderId} />
-        </div>
-      </div>
-
-      {isFoldersLoading ? (
-        <div className="mt-6 flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      ) : (
-        <>
-          {foldersData?.folders.some((folder) => folder.pinned) && (
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  .filter((folder) => folder.pinned)
-                  .map((folder) => (
-                    <div
-                      key={folder.id}
-                      className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
-                    >
-                      <div className="flex items-start justify-between">
-                        <button
-                          className="flex items-center space-x-2 text-left"
-                          onClick={() => navigateToFolder(folder.id)}
-                        >
-                          <FolderIcon className="text-documenso h-6 w-6" />
-                          <div>
-                            <div className="flex items-center gap-2">
-                              <h3 className="font-medium">{folder.name}</h3>
-                              <PinIcon className="text-documenso h-3 w-3" />
-                            </div>
-                            <div className="mt-1 flex space-x-2 text-xs text-gray-500">
-                              <span>{folder._count.templates || 0} templates</span>
-                              <span>•</span>
-                              <span>{folder._count.subfolders} folders</span>
-                            </div>
-                          </div>
-                        </button>
-
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              className="opacity-0 group-hover:opacity-100"
-                            >
-                              •••
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={() => {
-                                setFolderToMove(folder);
-                                setIsMovingFolder(true);
-                              }}
-                            >
-                              Move
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              onClick={() => {
-                                void unpinFolder({ folderId: folder.id });
-                              }}
-                            >
-                              Unpin
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              onClick={() => {
-                                setFolderToSettings(folder);
-                                setIsSettingsFolderOpen(true);
-                              }}
-                            >
-                              Settings
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              className="text-red-500"
-                              onClick={() => {
-                                setFolderToDelete(folder);
-                                setIsDeletingFolder(true);
-                              }}
-                            >
-                              Delete
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </div>
-                  ))}
-              </div>
-            </div>
-          )}
-
-          <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-            {foldersData?.folders
-              .filter((folder) => !folder.pinned)
-              .map((folder) => (
-                <div
-                  key={folder.id}
-                  className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
-                >
-                  <div className="flex items-start justify-between">
-                    <button
-                      className="flex items-center space-x-2 text-left"
-                      onClick={() => navigateToFolder(folder.id)}
-                    >
-                      <FolderIcon className="text-documenso h-6 w-6" />
-                      <div>
-                        <h3 className="font-medium">{folder.name}</h3>
-                        <div className="mt-1 flex space-x-2 text-xs text-gray-500">
-                          <span>{folder._count.templates || 0} templates</span>
-                          <span>•</span>
-                          <span>{folder._count.subfolders} folders</span>
-                        </div>
-                      </div>
-                    </button>
-
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="opacity-0 group-hover:opacity-100"
-                        >
-                          •••
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setFolderToMove(folder);
-                            setIsMovingFolder(true);
-                          }}
-                        >
-                          Move
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            void pinFolder({ folderId: folder.id });
-                          }}
-                        >
-                          Pin
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setFolderToSettings(folder);
-                            setIsSettingsFolderOpen(true);
-                          }}
-                        >
-                          Settings
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          className="text-red-500"
-                          onClick={() => {
-                            setFolderToDelete(folder);
-                            setIsDeletingFolder(true);
-                          }}
-                        >
-                          Delete
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                </div>
-              ))}
-          </div>
-        </>
-      )}
-
-      <div className="relative mt-12">
-        <div className="flex flex-row items-center">
-          {team && (
-            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
-              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-              <AvatarFallback className="text-muted-foreground text-xs">
-                {team.name.slice(0, 1)}
-              </AvatarFallback>
-            </Avatar>
-          )}
-
-          <h1 className="truncate text-2xl font-semibold md:text-3xl">
-            <Trans>Templates</Trans>
-          </h1>
-        </div>
-
-        <div className="mt-8">
-          {data && data.count === 0 ? (
-            <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
-              <Bird className="h-12 w-12" strokeWidth={1.5} />
-
-              <div className="text-center">
-                <h3 className="text-lg font-semibold">
-                  <Trans>We're all empty</Trans>
-                </h3>
-
-                <p className="mt-2 max-w-[50ch]">
-                  <Trans>
-                    You have not yet created any templates. To create a template please upload one.
-                  </Trans>
-                </p>
-              </div>
-            </div>
-          ) : (
-            <TemplatesTable
-              data={data}
-              isLoading={isLoading}
-              isLoadingError={isLoadingError}
-              documentRootPath={documentRootPath}
-              templateRootPath={templateRootPath}
-            />
-          )}
-        </div>
-      </div>
-
-      <FolderMoveDialog
-        foldersData={foldersData?.folders}
-        folder={folderToMove}
-        isOpen={isMovingFolder}
-        onOpenChange={(open) => {
-          setIsMovingFolder(open);
-
-          if (!open) {
-            setFolderToMove(null);
-          }
-        }}
-      />
-
-      <FolderSettingsDialog
-        folder={folderToSettings}
-        isOpen={isSettingsFolderOpen}
-        onOpenChange={(open) => {
-          setIsSettingsFolderOpen(open);
-
-          if (!open) {
-            setFolderToSettings(null);
-          }
-        }}
-      />
-
-      <FolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open) => {
-          setIsDeletingFolder(open);
-
-          if (!open) {
-            setFolderToDelete(null);
-          }
-        }}
-      />
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/templates.folders._index.tsx

@@ -1,181 +0,0 @@
-import { useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import { HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate } from 'react-router';
-
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { TemplateFolderCreateDialog } from '~/components/dialogs/template-folder-create-dialog';
-import { TemplateFolderDeleteDialog } from '~/components/dialogs/template-folder-delete-dialog';
-import { TemplateFolderMoveDialog } from '~/components/dialogs/template-folder-move-dialog';
-import { TemplateFolderSettingsDialog } from '~/components/dialogs/template-folder-settings-dialog';
-import { FolderCard } from '~/components/general/folder/folder-card';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Templates');
-}
-
-export default function TemplatesFoldersPage() {
-  const navigate = useNavigate();
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
-
-  const { data: foldersData, isLoading: isFoldersLoading } = trpc.folder.getFolders.useQuery({
-    type: FolderType.TEMPLATE,
-    parentId: null,
-  });
-
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
-  const navigateToFolder = (folderId?: string | null) => {
-    const templatesPath = formatTemplatesPath();
-
-    if (folderId) {
-      void navigate(`${templatesPath}/f/${folderId}`);
-    } else {
-      void navigate(templatesPath);
-    }
-  };
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex flex-1 items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-            onClick={() => navigateToFolder(null)}
-          >
-            <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
-          </Button>
-        </div>
-
-        <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
-          <TemplateFolderCreateDialog />
-        </div>
-      </div>
-
-      <div className="mt-6">
-        {isFoldersLoading ? (
-          <div className="mt- flex justify-center">
-            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          </div>
-        ) : (
-          <>
-            {foldersData?.folders?.some((folder) => folder.pinned) && (
-              <div className="mt-6">
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                  {foldersData.folders
-                    .filter((folder) => folder.pinned)
-                    .map((folder) => (
-                      <FolderCard
-                        key={folder.id}
-                        folder={folder}
-                        onNavigate={navigateToFolder}
-                        onMove={(folder) => {
-                          setFolderToMove(folder);
-                          setIsMovingFolder(true);
-                        }}
-                        onPin={(folderId) => void pinFolder({ folderId })}
-                        onUnpin={(folderId) => void unpinFolder({ folderId })}
-                        onSettings={(folder) => {
-                          setFolderToSettings(folder);
-                          setIsSettingsFolderOpen(true);
-                        }}
-                        onDelete={(folder) => {
-                          setFolderToDelete(folder);
-                          setIsDeletingFolder(true);
-                        }}
-                      />
-                    ))}
-                </div>
-              </div>
-            )}
-
-            <div className="mt-12">
-              <h1 className="truncate text-2xl font-semibold md:text-3xl">
-                <Trans>All Folders</Trans>
-              </h1>
-
-              <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData?.folders
-                  .filter((folder) => !folder.pinned)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onNavigate={navigateToFolder}
-                      onMove={(folder) => {
-                        setFolderToMove(folder);
-                        setIsMovingFolder(true);
-                      }}
-                      onPin={(folderId) => void pinFolder({ folderId })}
-                      onUnpin={(folderId) => void unpinFolder({ folderId })}
-                      onSettings={(folder) => {
-                        setFolderToSettings(folder);
-                        setIsSettingsFolderOpen(true);
-                      }}
-                      onDelete={(folder) => {
-                        setFolderToDelete(folder);
-                        setIsDeletingFolder(true);
-                      }}
-                    />
-                  ))}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      <TemplateFolderMoveDialog
-        foldersData={foldersData?.folders}
-        folder={folderToMove}
-        isOpen={isMovingFolder}
-        onOpenChange={(open: boolean) => {
-          setIsMovingFolder(open);
-
-          if (!open) {
-            setFolderToMove(null);
-          }
-        }}
-      />
-
-      <TemplateFolderSettingsDialog
-        folder={folderToSettings}
-        isOpen={isSettingsFolderOpen}
-        onOpenChange={(open: boolean) => {
-          setIsSettingsFolderOpen(open);
-
-          if (!open) {
-            setFolderToSettings(null);
-          }
-        }}
-      />
-
-      <TemplateFolderDeleteDialog
-        folder={folderToDelete}
-        isOpen={isDeletingFolder}
-        onOpenChange={(open: boolean) => {
-          setIsDeletingFolder(open);
-
-          if (!open) {
-            setFolderToDelete(null);
-          }
-        }}
-      />
-    </div>
-  );
-}

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

@@ -3,13 +3,10 @@ import { useLingui } from '@lingui/react';
 import { FieldType, SigningStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
 import { redirect } from 'react-router';
-import { prop, sortBy } from 'remeda';
 import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
-import { renderSVG } from 'uqr';
 
 import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
 import {
   RECIPIENT_ROLES_DESCRIPTION,
@@ -18,7 +15,6 @@ import {
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 import { getDocumentCertificateAuditLogs } from '@documenso/lib/server-only/document/get-document-certificate-audit-logs';
-import { getTeamById } from '@documenso/lib/server-only/team/get-team';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { getTranslations } from '@documenso/lib/utils/i18n';
@@ -64,10 +60,6 @@ export async function loader({ request }: Route.LoaderArgs) {
     throw redirect('/');
   }
 
-  const team = document.teamId
-    ? await getTeamById({ teamId: document.teamId, userId: document.userId })
-    : null;
-
   const isPlatformDocument = await isDocumentPlatform(document);
 
   const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
@@ -80,7 +72,6 @@ export async function loader({ request }: Route.LoaderArgs) {
 
   return {
     document,
-    team,
     documentLanguage,
     isPlatformDocument,
     auditLogs,
@@ -98,7 +89,7 @@ export async function loader({ request }: Route.LoaderArgs) {
  * Update: Maybe <Trans> tags work now after RR7 migration.
  */
 export default function SigningCertificate({ loaderData }: Route.ComponentProps) {
-  const { document, team, documentLanguage, isPlatformDocument, auditLogs, messages } = loaderData;
+  const { document, documentLanguage, isPlatformDocument, auditLogs, messages } = loaderData;
 
   const { i18n, _ } = useLingui();
 
@@ -134,30 +125,18 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
       recipientAuth: recipient.authOptions,
     });
 
-    const insertedAuditLogsWithFieldAuth = sortBy(
-      auditLogs.DOCUMENT_FIELD_INSERTED.filter(
-        (log) => log.data.recipientId === recipient.id && log.data.fieldSecurity,
-      ),
-      [prop('createdAt'), 'desc'],
-    );
-
-    const actionAuthMethod = insertedAuditLogsWithFieldAuth.at(0)?.data?.fieldSecurity?.type;
-
-    let authLevel = match(actionAuthMethod)
+    let authLevel = match(extractedAuthMethods.derivedRecipientActionAuth)
       .with('ACCOUNT', () => _(msg`Account Re-Authentication`))
       .with('TWO_FACTOR_AUTH', () => _(msg`Two-Factor Re-Authentication`))
-      .with('PASSWORD', () => _(msg`Password Re-Authentication`))
       .with('PASSKEY', () => _(msg`Passkey Re-Authentication`))
       .with('EXPLICIT_NONE', () => _(msg`Email`))
-      .with(undefined, () => null)
+      .with(null, () => null)
       .exhaustive();
 
     if (!authLevel) {
-      const accessAuthMethod = extractedAuthMethods.derivedRecipientAccessAuth.at(0);
-
-      authLevel = match(accessAuthMethod)
+      authLevel = match(extractedAuthMethods.derivedRecipientAccessAuth)
         .with('ACCOUNT', () => _(msg`Account Authentication`))
-        .with(undefined, () => _(msg`Email`))
+        .with(null, () => _(msg`Email`))
         .exhaustive();
     }
 
@@ -362,19 +341,8 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
         </CardContent>
       </Card>
 
-      {!isPlatformDocument && !team?.teamGlobalSettings?.brandingHidePoweredBy && (
-        <div className="my-8 flex-row-reverse space-y-4">
-          <div className="flex items-end justify-end gap-x-4">
-            <div
-              className="flex h-24 w-24 justify-center"
-              dangerouslySetInnerHTML={{
-                __html: renderSVG(`${NEXT_PUBLIC_WEBAPP_URL()}/share/${document.qrToken}`, {
-                  ecc: 'Q',
-                }),
-              }}
-            />
-          </div>
-
+      {isPlatformDocument && (
+        <div className="my-8 flex-row-reverse">
           <div className="flex items-end justify-end gap-x-4">
             <p className="flex-shrink-0 text-sm font-medium print:text-xs">
               {_(msg`Signing certificate provided by`)}:

apps/remix/app/routes/_recipient+/d.$token+/_index.tsx

@@ -47,9 +47,9 @@ export async function loader({ params, request }: Route.LoaderArgs) {
   });
 
   // Ensure typesafety when we add more options.
-  const isAccessAuthValid = match(derivedRecipientAccessAuth.at(0))
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
     .with(DocumentAccessAuth.ACCOUNT, () => Boolean(session.user))
-    .with(undefined, () => true)
+    .with(null, () => true)
     .exhaustive();
 
   if (!isAccessAuthValid) {
@@ -60,10 +60,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   return superLoaderJson({
     isAccessAuthValid: true,
-    template: {
-      ...template,
-      folder: null,
-    },
+    template,
     directTemplateRecipient,
   } as const);
 }

apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx

@@ -119,7 +119,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
   return (
     <div
       className={cn(
-        '-mx-4 flex flex-col items-center overflow-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
+        '-mx-4 flex flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
         { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
       )}
     >

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

@@ -1,11 +0,0 @@
-import { Outlet } from 'react-router';
-
-export default function Layout() {
-  return (
-    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
-      <div className="relative w-full">
-        <Outlet />
-      </div>
-    </main>
-  );
-}

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

@@ -22,11 +22,6 @@ const IMAGE_SIZE = {
 export const loader = async ({ params }: Route.LoaderArgs) => {
   const { slug } = params;
 
-  // QR codes are not supported for OpenGraph images
-  if (slug.startsWith('qr_')) {
-    return new Response('Not found', { status: 404 });
-  }
-
   const baseUrl = NEXT_PUBLIC_WEBAPP_URL();
 
   const [interSemiBold, interRegular, caveatRegular] = await Promise.all([

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

@@ -1,17 +1,10 @@
-import { redirect, useLoaderData } from 'react-router';
+import { redirect } from 'react-router';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { getDocumentByAccessToken } from '@documenso/lib/server-only/document/get-document-by-access-token';
-
-import { DocumentCertificateQRView } from '~/components/general/document/document-certificate-qr-view';
 
 import type { Route } from './+types/share.$slug';
 
 export function meta({ params: { slug } }: Route.MetaArgs) {
-  if (slug.startsWith('qr_')) {
-    return undefined;
-  }
-
   return [
     { title: 'Documenso - Share' },
     { description: 'I just signed a document in style with Documenso!' },
@@ -50,23 +43,11 @@ export function meta({ params: { slug } }: Route.MetaArgs) {
   ];
 }
 
-export const loader = async ({ request, params: { slug } }: Route.LoaderArgs) => {
-  if (slug.startsWith('qr_')) {
-    const document = await getDocumentByAccessToken({ token: slug });
-
-    if (!document) {
-      throw redirect('/');
-    }
-
-    return {
-      document,
-    };
-  }
-
+export const loader = ({ request }: Route.LoaderArgs) => {
   const userAgent = request.headers.get('User-Agent') ?? '';
 
   if (/bot|facebookexternalhit|WhatsApp|google|bing|duckduckbot|MetaInspector/i.test(userAgent)) {
-    return {};
+    return null;
   }
 
   // Is hardcoded because this whole meta is hardcoded anyway for Documenso.
@@ -74,20 +55,5 @@ export const loader = async ({ request, params: { slug } }: Route.LoaderArgs) =>
 };
 
 export default function SharePage() {
-  const { document } = useLoaderData<typeof loader>();
-
-  if (document) {
-    return (
-      <DocumentCertificateQRView
-        documentId={document.id}
-        title={document.title}
-        documentData={document.documentData}
-        password={document.documentMeta?.password}
-        recipientCount={document.recipients?.length ?? 0}
-        completedDate={document.completedAt ?? undefined}
-      />
-    );
-  }
-
   return <div></div>;
 }

apps/remix/app/routes/api+/branding.logo.team.$teamId.ts

@@ -24,27 +24,36 @@ export async function loader({ params }: Route.LoaderArgs) {
     },
   });
 
-  if (!settings || !settings.brandingLogo) {
+  console.log('########################');
+  console.log('########################');
+  console.log('########################');
+  console.log('########################');
+  console.log('########################');
+
+  if (!settings || !settings.brandingEnabled) {
+    console.log('----------------------------');
     return Response.json(
       {
         status: 'error',
-        message: 'Logo not found',
+        message: 'Not found',
       },
       { status: 404 },
     );
   }
 
-  if (!settings.brandingEnabled) {
+  if (!settings.brandingLogo) {
+    console.log('!!!!!!!!!!!!!!!!!!!!!!!!');
     return Response.json(
       {
         status: 'error',
-        message: 'Branding is not enabled',
+        message: 'Not found',
       },
-      { status: 400 },
+      { status: 404 },
     );
   }
 
   const file = await getFileServerSide(JSON.parse(settings.brandingLogo)).catch((e) => {
+    console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@');
     console.error(e);
   });
 

apps/remix/app/routes/embed+/_v0+/direct.$url.tsx

@@ -68,9 +68,9 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     }),
   ]);
 
-  const isAccessAuthValid = match(derivedRecipientAccessAuth.at(0))
-    .with(DocumentAccessAuth.ACCOUNT, () => !!user)
-    .with(undefined, () => true)
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user !== null)
+    .with(null, () => true)
     .exhaustive();
 
   if (!isAccessAuthValid) {

apps/remix/app/routes/embed+/_v0+/sign.$url.tsx

@@ -81,9 +81,9 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     documentAuth: document.authOptions,
   });
 
-  const isAccessAuthValid = match(derivedRecipientAccessAuth.at(0))
-    .with(DocumentAccessAuth.ACCOUNT, () => user && user.email === recipient.email)
-    .with(undefined, () => true)
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user !== null)
+    .with(null, () => true)
     .exhaustive();
 
   if (!isAccessAuthValid) {

apps/remix/app/routes/embed+/v1+/authoring+/_layout.tsx

@@ -1,102 +0,0 @@
-import { useLayoutEffect } from 'react';
-
-import { Outlet, useLoaderData } from 'react-router';
-
-import { isCommunityPlan } from '@documenso/ee/server-only/util/is-community-plan';
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
-import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
-import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
-import { TrpcProvider } from '@documenso/trpc/react';
-
-import { ZBaseEmbedAuthoringSchema } from '~/types/embed-authoring-base-schema';
-import { injectCss } from '~/utils/css-vars';
-
-import type { Route } from './+types/_layout';
-
-export const loader = async ({ request }: Route.LoaderArgs) => {
-  const url = new URL(request.url);
-
-  const token = url.searchParams.get('token');
-
-  if (!token) {
-    return {
-      hasValidToken: false,
-      token,
-    };
-  }
-
-  const result = await verifyEmbeddingPresignToken({ token }).catch(() => null);
-
-  let hasPlatformPlan = false;
-  let hasEnterprisePlan = false;
-  let hasCommunityPlan = false;
-
-  if (result) {
-    [hasCommunityPlan, hasPlatformPlan, hasEnterprisePlan] = await Promise.all([
-      isCommunityPlan({
-        userId: result.userId,
-        teamId: result.teamId ?? undefined,
-      }),
-      isDocumentPlatform({
-        userId: result.userId,
-        teamId: result.teamId,
-      }),
-      isUserEnterprise({
-        userId: result.userId,
-        teamId: result.teamId ?? undefined,
-      }),
-    ]);
-  }
-
-  return {
-    hasValidToken: !!result,
-    token,
-    hasCommunityPlan,
-    hasPlatformPlan,
-    hasEnterprisePlan,
-  };
-};
-
-export default function AuthoringLayout() {
-  const { hasValidToken, token, hasCommunityPlan, hasPlatformPlan, hasEnterprisePlan } =
-    useLoaderData<typeof loader>();
-
-  useLayoutEffect(() => {
-    try {
-      const hash = window.location.hash.slice(1);
-
-      const result = ZBaseEmbedAuthoringSchema.safeParse(
-        JSON.parse(decodeURIComponent(atob(hash))),
-      );
-
-      if (!result.success) {
-        return;
-      }
-
-      const { css, cssVars, darkModeDisabled } = result.data;
-
-      if (darkModeDisabled) {
-        document.documentElement.classList.add('dark-mode-disabled');
-      }
-
-      if (hasCommunityPlan || hasPlatformPlan || hasEnterprisePlan) {
-        injectCss({
-          css,
-          cssVars,
-        });
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  }, []);
-
-  if (!hasValidToken) {
-    return <div>Invalid embedding presign token provided</div>;
-  }
-
-  return (
-    <TrpcProvider headers={{ authorization: `Bearer ${token}` }}>
-      <Outlet />
-    </TrpcProvider>
-  );
-}

apps/remix/app/routes/embed+/v1+/authoring+/document.edit.$id.tsx

@@ -1,314 +0,0 @@
-import { useLayoutEffect, useMemo, useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { DocumentDistributionMethod, DocumentSigningOrder, SigningStatus } from '@prisma/client';
-import { redirect, useLoaderData } from 'react-router';
-
-import {
-  DEFAULT_DOCUMENT_DATE_FORMAT,
-  isValidDateFormat,
-} from '@documenso/lib/constants/date-formats';
-import { DocumentSignatureType } from '@documenso/lib/constants/document';
-import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
-import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
-import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
-import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
-import { nanoid } from '@documenso/lib/universal/id';
-import { trpc } from '@documenso/trpc/react';
-import { Stepper } from '@documenso/ui/primitives/stepper';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
-import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
-import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
-import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fields-view';
-import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
-import {
-  type TBaseEmbedAuthoringSchema,
-  ZBaseEmbedAuthoringSchema,
-} from '~/types/embed-authoring-base-schema';
-
-import type { Route } from './+types/document.edit.$id';
-
-export const loader = async ({ request, params }: Route.LoaderArgs) => {
-  const { id } = params;
-
-  const url = new URL(request.url);
-
-  // We know that the token is present because we're checking it in the parent _layout route
-  const token = url.searchParams.get('token') || '';
-
-  // We also know that the token is valid, but we need the userId + teamId
-  const result = await verifyEmbeddingPresignToken({ token }).catch(() => null);
-
-  if (!result) {
-    throw new Error('Invalid token');
-  }
-
-  const documentId = Number(id);
-
-  if (!documentId || Number.isNaN(documentId)) {
-    redirect(`/embed/v1/authoring/error/not-found?documentId=${documentId}`);
-  }
-
-  const document = await getDocumentWithDetailsById({
-    documentId,
-    userId: result?.userId,
-    teamId: result?.teamId ?? undefined,
-  }).catch(() => null);
-
-  if (!document) {
-    throw redirect(`/embed/v1/authoring/error/not-found?documentId=${documentId}`);
-  }
-
-  const fields = document.fields.map((field) => ({
-    ...field,
-    positionX: field.positionX.toNumber(),
-    positionY: field.positionY.toNumber(),
-    width: field.width.toNumber(),
-    height: field.height.toNumber(),
-  }));
-
-  return {
-    document: {
-      ...document,
-      fields,
-    },
-  };
-};
-
-export default function EmbeddingAuthoringDocumentEditPage() {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { document } = useLoaderData<typeof loader>();
-
-  const signatureTypes = useMemo(() => {
-    const types: string[] = [];
-
-    if (document.documentMeta?.drawSignatureEnabled) {
-      types.push(DocumentSignatureType.DRAW);
-    }
-
-    if (document.documentMeta?.typedSignatureEnabled) {
-      types.push(DocumentSignatureType.TYPE);
-    }
-
-    if (document.documentMeta?.uploadSignatureEnabled) {
-      types.push(DocumentSignatureType.UPLOAD);
-    }
-
-    return types;
-  }, [document.documentMeta]);
-
-  const [configuration, setConfiguration] = useState<TConfigureEmbedFormSchema | null>(() => ({
-    title: document.title,
-    documentData: undefined,
-    meta: {
-      subject: document.documentMeta?.subject ?? undefined,
-      message: document.documentMeta?.message ?? undefined,
-      distributionMethod:
-        document.documentMeta?.distributionMethod ?? DocumentDistributionMethod.EMAIL,
-      emailSettings: document.documentMeta?.emailSettings ?? ZDocumentEmailSettingsSchema.parse({}),
-      timezone: document.documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
-      signingOrder: document.documentMeta?.signingOrder ?? DocumentSigningOrder.PARALLEL,
-      allowDictateNextSigner: document.documentMeta?.allowDictateNextSigner ?? false,
-      language: isValidLanguageCode(document.documentMeta?.language)
-        ? document.documentMeta.language
-        : undefined,
-      signatureTypes: signatureTypes,
-      dateFormat: isValidDateFormat(document.documentMeta?.dateFormat)
-        ? document.documentMeta?.dateFormat
-        : DEFAULT_DOCUMENT_DATE_FORMAT,
-      redirectUrl: document.documentMeta?.redirectUrl ?? undefined,
-    },
-    signers: document.recipients.map((recipient) => ({
-      nativeId: recipient.id,
-      formId: nanoid(8),
-      name: recipient.name,
-      email: recipient.email,
-      role: recipient.role,
-      signingOrder: recipient.signingOrder ?? undefined,
-      disabled: recipient.signingStatus !== SigningStatus.NOT_SIGNED,
-    })),
-  }));
-
-  const [fields, setFields] = useState<TConfigureFieldsFormSchema | null>(() => ({
-    fields: document.fields.map((field) => ({
-      nativeId: field.id,
-      formId: nanoid(8),
-      type: field.type,
-      signerEmail:
-        document.recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
-      inserted: field.inserted,
-      recipientId: field.recipientId,
-      pageNumber: field.page,
-      pageX: field.positionX,
-      pageY: field.positionY,
-      pageWidth: field.width,
-      pageHeight: field.height,
-      fieldMeta: field.fieldMeta ?? undefined,
-    })),
-  }));
-
-  const [features, setFeatures] = useState<TBaseEmbedAuthoringSchema['features'] | null>(null);
-  const [externalId, setExternalId] = useState<string | null>(null);
-  const [currentStep, setCurrentStep] = useState(1);
-
-  const { mutateAsync: updateEmbeddingDocument } =
-    trpc.embeddingPresign.updateEmbeddingDocument.useMutation();
-
-  const handleConfigurePageViewSubmit = (data: TConfigureEmbedFormSchema) => {
-    // Store the configuration data and move to the field placement stage
-    setConfiguration(data);
-    setFields((fieldData) => {
-      if (!fieldData) {
-        return fieldData;
-      }
-
-      const signerEmails = data.signers.map((signer) => signer.email);
-
-      return {
-        fields: fieldData.fields.filter((field) => signerEmails.includes(field.signerEmail)),
-      };
-    });
-    setCurrentStep(2);
-  };
-
-  const handleBackToConfig = (data: TConfigureFieldsFormSchema) => {
-    // Return to the configuration view but keep the data
-    setFields(data);
-    setCurrentStep(1);
-  };
-
-  const handleConfigureFieldsSubmit = async (data: TConfigureFieldsFormSchema) => {
-    try {
-      if (!configuration) {
-        toast({
-          variant: 'destructive',
-          title: _(msg`Error`),
-          description: _(msg`Please configure the document first`),
-        });
-
-        return;
-      }
-
-      const fields = data.fields;
-
-      // Use the externalId from the URL fragment if available
-      const documentExternalId = externalId || configuration.meta.externalId;
-
-      const updateResult = await updateEmbeddingDocument({
-        documentId: document.id,
-        title: configuration.title,
-        externalId: documentExternalId,
-        meta: {
-          ...configuration.meta,
-          drawSignatureEnabled: configuration.meta.signatureTypes
-            ? configuration.meta.signatureTypes.length === 0 ||
-              configuration.meta.signatureTypes.includes(DocumentSignatureType.DRAW)
-            : undefined,
-          typedSignatureEnabled: configuration.meta.signatureTypes
-            ? configuration.meta.signatureTypes.length === 0 ||
-              configuration.meta.signatureTypes.includes(DocumentSignatureType.TYPE)
-            : undefined,
-          uploadSignatureEnabled: configuration.meta.signatureTypes
-            ? configuration.meta.signatureTypes.length === 0 ||
-              configuration.meta.signatureTypes.includes(DocumentSignatureType.UPLOAD)
-            : undefined,
-        },
-        recipients: configuration.signers.map((signer) => ({
-          id: signer.nativeId,
-          name: signer.name,
-          email: signer.email,
-          role: signer.role,
-          signingOrder: signer.signingOrder,
-          fields: fields
-            .filter((field) => field.signerEmail === signer.email)
-            // There's a gnarly discriminated union that makes this hard to satisfy, we're casting for the second
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            .map<any>((f) => ({
-              ...f,
-              id: f.nativeId,
-              pageX: f.pageX,
-              pageY: f.pageY,
-              width: f.pageWidth,
-              height: f.pageHeight,
-            })),
-        })),
-      });
-
-      toast({
-        title: _(msg`Success`),
-        description: _(msg`Document updated successfully`),
-      });
-
-      // Send a message to the parent window with the document details
-      if (window.parent !== window) {
-        window.parent.postMessage(
-          {
-            type: 'document-updated',
-            documentId: updateResult.documentId,
-            externalId: documentExternalId,
-          },
-          '*',
-        );
-      }
-    } catch (err) {
-      console.error('Error updating document:', err);
-
-      toast({
-        variant: 'destructive',
-        title: _(msg`Error`),
-        description: _(msg`Failed to update document`),
-      });
-    }
-  };
-
-  useLayoutEffect(() => {
-    try {
-      const hash = window.location.hash.slice(1);
-
-      const result = ZBaseEmbedAuthoringSchema.safeParse(
-        JSON.parse(decodeURIComponent(atob(hash))),
-      );
-
-      if (!result.success) {
-        return;
-      }
-
-      setFeatures(result.data.features);
-
-      // Extract externalId from the parsed data if available
-      if (result.data.externalId) {
-        setExternalId(result.data.externalId);
-      }
-    } catch (err) {
-      console.error('Error parsing embedding params:', err);
-    }
-  }, []);
-
-  return (
-    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg p-6">
-      <ConfigureDocumentProvider isTemplate={false} features={features ?? {}}>
-        <Stepper currentStep={currentStep} setCurrentStep={setCurrentStep}>
-          <ConfigureDocumentView
-            defaultValues={configuration ?? undefined}
-            disableUpload={true}
-            onSubmit={handleConfigurePageViewSubmit}
-          />
-
-          <ConfigureFieldsView
-            configData={configuration!}
-            documentData={document.documentData}
-            defaultValues={fields ?? undefined}
-            onBack={handleBackToConfig}
-            onSubmit={handleConfigureFieldsSubmit}
-          />
-        </Stepper>
-      </ConfigureDocumentProvider>
-    </div>
-  );
-}

apps/remix/app/routes/embed+/v1+/authoring+/template.edit.$id.tsx

@@ -1,314 +0,0 @@
-import { useLayoutEffect, useMemo, useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { DocumentDistributionMethod, DocumentSigningOrder, SigningStatus } from '@prisma/client';
-import { redirect, useLoaderData } from 'react-router';
-
-import {
-  DEFAULT_DOCUMENT_DATE_FORMAT,
-  isValidDateFormat,
-} from '@documenso/lib/constants/date-formats';
-import { DocumentSignatureType } from '@documenso/lib/constants/document';
-import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
-import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
-import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
-import { nanoid } from '@documenso/lib/universal/id';
-import { trpc } from '@documenso/trpc/react';
-import { Stepper } from '@documenso/ui/primitives/stepper';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
-import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
-import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
-import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fields-view';
-import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
-import {
-  type TBaseEmbedAuthoringSchema,
-  ZBaseEmbedAuthoringSchema,
-} from '~/types/embed-authoring-base-schema';
-
-import type { Route } from './+types/document.edit.$id';
-
-export const loader = async ({ request, params }: Route.LoaderArgs) => {
-  const { id } = params;
-
-  const url = new URL(request.url);
-
-  // We know that the token is present because we're checking it in the parent _layout route
-  const token = url.searchParams.get('token') || '';
-
-  // We also know that the token is valid, but we need the userId + teamId
-  const result = await verifyEmbeddingPresignToken({ token }).catch(() => null);
-
-  if (!result) {
-    throw new Error('Invalid token');
-  }
-
-  const templateId = Number(id);
-
-  if (!templateId || Number.isNaN(templateId)) {
-    redirect(`/embed/v1/authoring/error/not-found?templateId=${templateId}`);
-  }
-
-  const template = await getTemplateById({
-    id: templateId,
-    userId: result?.userId,
-    teamId: result?.teamId ?? undefined,
-  }).catch(() => null);
-
-  if (!template) {
-    throw redirect(`/embed/v1/authoring/error/not-found?templateId=${templateId}`);
-  }
-
-  const fields = template.fields.map((field) => ({
-    ...field,
-    positionX: field.positionX.toNumber(),
-    positionY: field.positionY.toNumber(),
-    width: field.width.toNumber(),
-    height: field.height.toNumber(),
-  }));
-
-  return {
-    template: {
-      ...template,
-      fields,
-    },
-  };
-};
-
-export default function EmbeddingAuthoringTemplateEditPage() {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { template } = useLoaderData<typeof loader>();
-
-  const signatureTypes = useMemo(() => {
-    const types: string[] = [];
-
-    if (template.templateMeta?.drawSignatureEnabled) {
-      types.push(DocumentSignatureType.DRAW);
-    }
-
-    if (template.templateMeta?.typedSignatureEnabled) {
-      types.push(DocumentSignatureType.TYPE);
-    }
-
-    if (template.templateMeta?.uploadSignatureEnabled) {
-      types.push(DocumentSignatureType.UPLOAD);
-    }
-
-    return types;
-  }, [template.templateMeta]);
-
-  const [configuration, setConfiguration] = useState<TConfigureEmbedFormSchema | null>(() => ({
-    title: template.title,
-    documentData: undefined,
-    meta: {
-      subject: template.templateMeta?.subject ?? undefined,
-      message: template.templateMeta?.message ?? undefined,
-      distributionMethod:
-        template.templateMeta?.distributionMethod ?? DocumentDistributionMethod.EMAIL,
-      emailSettings: template.templateMeta?.emailSettings ?? ZDocumentEmailSettingsSchema.parse({}),
-      timezone: template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
-      signingOrder: template.templateMeta?.signingOrder ?? DocumentSigningOrder.PARALLEL,
-      allowDictateNextSigner: template.templateMeta?.allowDictateNextSigner ?? false,
-      language: isValidLanguageCode(template.templateMeta?.language)
-        ? template.templateMeta.language
-        : undefined,
-      signatureTypes: signatureTypes,
-      dateFormat: isValidDateFormat(template.templateMeta?.dateFormat)
-        ? template.templateMeta?.dateFormat
-        : DEFAULT_DOCUMENT_DATE_FORMAT,
-      redirectUrl: template.templateMeta?.redirectUrl ?? undefined,
-    },
-    signers: template.recipients.map((recipient) => ({
-      nativeId: recipient.id,
-      formId: nanoid(8),
-      name: recipient.name,
-      email: recipient.email,
-      role: recipient.role,
-      signingOrder: recipient.signingOrder ?? undefined,
-      disabled: recipient.signingStatus !== SigningStatus.NOT_SIGNED,
-    })),
-  }));
-
-  const [fields, setFields] = useState<TConfigureFieldsFormSchema | null>(() => ({
-    fields: template.fields.map((field) => ({
-      nativeId: field.id,
-      formId: nanoid(8),
-      type: field.type,
-      signerEmail:
-        template.recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
-      inserted: field.inserted,
-      recipientId: field.recipientId,
-      pageNumber: field.page,
-      pageX: field.positionX,
-      pageY: field.positionY,
-      pageWidth: field.width,
-      pageHeight: field.height,
-      fieldMeta: field.fieldMeta ?? undefined,
-    })),
-  }));
-
-  const [features, setFeatures] = useState<TBaseEmbedAuthoringSchema['features'] | null>(null);
-  const [externalId, setExternalId] = useState<string | null>(null);
-  const [currentStep, setCurrentStep] = useState(1);
-
-  const { mutateAsync: updateEmbeddingTemplate } =
-    trpc.embeddingPresign.updateEmbeddingTemplate.useMutation();
-
-  const handleConfigurePageViewSubmit = (data: TConfigureEmbedFormSchema) => {
-    // Store the configuration data and move to the field placement stage
-    setConfiguration(data);
-    setFields((fieldData) => {
-      if (!fieldData) {
-        return fieldData;
-      }
-
-      const signerEmails = data.signers.map((signer) => signer.email);
-
-      return {
-        fields: fieldData.fields.filter((field) => signerEmails.includes(field.signerEmail)),
-      };
-    });
-    setCurrentStep(2);
-  };
-
-  const handleBackToConfig = (data: TConfigureFieldsFormSchema) => {
-    // Return to the configuration view but keep the data
-    setFields(data);
-    setCurrentStep(1);
-  };
-
-  const handleConfigureFieldsSubmit = async (data: TConfigureFieldsFormSchema) => {
-    try {
-      if (!configuration) {
-        toast({
-          variant: 'destructive',
-          title: _(msg`Error`),
-          description: _(msg`Please configure the document first`),
-        });
-
-        return;
-      }
-
-      const fields = data.fields;
-
-      // Use the externalId from the URL fragment if available
-      const templateExternalId = externalId || configuration.meta.externalId;
-
-      const updateResult = await updateEmbeddingTemplate({
-        templateId: template.id,
-        title: configuration.title,
-        externalId: templateExternalId,
-        meta: {
-          ...configuration.meta,
-          drawSignatureEnabled: configuration.meta.signatureTypes
-            ? configuration.meta.signatureTypes.length === 0 ||
-              configuration.meta.signatureTypes.includes(DocumentSignatureType.DRAW)
-            : undefined,
-          typedSignatureEnabled: configuration.meta.signatureTypes
-            ? configuration.meta.signatureTypes.length === 0 ||
-              configuration.meta.signatureTypes.includes(DocumentSignatureType.TYPE)
-            : undefined,
-          uploadSignatureEnabled: configuration.meta.signatureTypes
-            ? configuration.meta.signatureTypes.length === 0 ||
-              configuration.meta.signatureTypes.includes(DocumentSignatureType.UPLOAD)
-            : undefined,
-        },
-        recipients: configuration.signers.map((signer) => ({
-          id: signer.nativeId,
-          name: signer.name,
-          email: signer.email,
-          role: signer.role,
-          signingOrder: signer.signingOrder,
-          fields: fields
-            .filter((field) => field.signerEmail === signer.email)
-            // There's a gnarly discriminated union that makes this hard to satisfy, we're casting for the second
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            .map<any>((f) => ({
-              ...f,
-              id: f.nativeId,
-              pageX: f.pageX,
-              pageY: f.pageY,
-              width: f.pageWidth,
-              height: f.pageHeight,
-            })),
-        })),
-      });
-
-      toast({
-        title: _(msg`Success`),
-        description: _(msg`Template updated successfully`),
-      });
-
-      // Send a message to the parent window with the template details
-      if (window.parent !== window) {
-        window.parent.postMessage(
-          {
-            type: 'template-updated',
-            templateId: updateResult.templateId,
-            externalId: templateExternalId,
-          },
-          '*',
-        );
-      }
-    } catch (err) {
-      console.error('Error updating template:', err);
-
-      toast({
-        variant: 'destructive',
-        title: _(msg`Error`),
-        description: _(msg`Failed to update template`),
-      });
-    }
-  };
-
-  useLayoutEffect(() => {
-    try {
-      const hash = window.location.hash.slice(1);
-
-      const result = ZBaseEmbedAuthoringSchema.safeParse(
-        JSON.parse(decodeURIComponent(atob(hash))),
-      );
-
-      if (!result.success) {
-        return;
-      }
-
-      setFeatures(result.data.features);
-
-      // Extract externalId from the parsed data if available
-      if (result.data.externalId) {
-        setExternalId(result.data.externalId);
-      }
-    } catch (err) {
-      console.error('Error parsing embedding params:', err);
-    }
-  }, []);
-
-  return (
-    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg p-6">
-      <ConfigureDocumentProvider isTemplate={false} features={features ?? {}}>
-        <Stepper currentStep={currentStep} setCurrentStep={setCurrentStep}>
-          <ConfigureDocumentView
-            defaultValues={configuration ?? undefined}
-            disableUpload={true}
-            onSubmit={handleConfigurePageViewSubmit}
-          />
-
-          <ConfigureFieldsView
-            configData={configuration!}
-            documentData={template.templateDocumentData}
-            defaultValues={fields ?? undefined}
-            onBack={handleBackToConfig}
-            onSubmit={handleConfigureFieldsSubmit}
-          />
-        </Stepper>
-      </ConfigureDocumentProvider>
-    </div>
-  );
-}

apps/remix/app/routes/embed+/v1+/multisign+/_index.tsx

@@ -1,325 +0,0 @@
-import { useEffect, useLayoutEffect, useState } from 'react';
-
-import { SigningStatus } from '@prisma/client';
-import { useRevalidator } from 'react-router';
-
-import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { isCommunityPlan as isUserCommunityPlan } from '@documenso/ee/server-only/util/is-community-plan';
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
-import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
-import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
-import { getTeamById } from '@documenso/lib/server-only/team/get-team';
-
-import { BrandingLogo } from '~/components/general/branding-logo';
-import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
-import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
-import { DocumentSigningRecipientProvider } from '~/components/general/document-signing/document-signing-recipient-provider';
-import { ZSignDocumentEmbedDataSchema } from '~/types/embed-document-sign-schema';
-import { injectCss } from '~/utils/css-vars';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import { MultiSignDocumentList } from '../../../../components/embed/multisign/multi-sign-document-list';
-import { MultiSignDocumentSigningView } from '../../../../components/embed/multisign/multi-sign-document-signing-view';
-import type { Route } from './+types/_index';
-
-export async function loader({ request }: Route.LoaderArgs) {
-  const { user } = await getOptionalSession(request);
-
-  const url = new URL(request.url);
-
-  const tokens = url.searchParams.getAll('token');
-
-  const envelopes = await Promise.all(
-    tokens.map(async (token) => {
-      const document = await getDocumentAndSenderByToken({
-        token,
-      });
-
-      const recipient = await getRecipientByToken({ token });
-
-      return { document, recipient };
-    }),
-  );
-
-  // Check the first envelope for whitelabelling settings (assuming all docs are from same team)
-  const firstDocument = envelopes[0]?.document;
-
-  if (!firstDocument) {
-    return superLoaderJson({
-      envelopes,
-      user,
-      hidePoweredBy: false,
-      allowWhitelabelling: false,
-    });
-  }
-
-  const team = firstDocument.teamId
-    ? await getTeamById({ teamId: firstDocument.teamId, userId: firstDocument.userId }).catch(
-        () => null,
-      )
-    : null;
-
-  const [isPlatformDocument, isEnterpriseDocument, isCommunityPlan] = await Promise.all([
-    isDocumentPlatform(firstDocument),
-    isUserEnterprise({
-      userId: firstDocument.userId,
-      teamId: firstDocument.teamId ?? undefined,
-    }),
-    isUserCommunityPlan({
-      userId: firstDocument.userId,
-      teamId: firstDocument.teamId ?? undefined,
-    }),
-  ]);
-
-  const hidePoweredBy = team?.teamGlobalSettings?.brandingHidePoweredBy ?? false;
-  const allowWhitelabelling = isCommunityPlan || isPlatformDocument || isEnterpriseDocument;
-
-  return superLoaderJson({
-    envelopes,
-    user,
-    hidePoweredBy,
-    allowWhitelabelling,
-  });
-}
-
-export default function MultisignPage() {
-  const { envelopes, user, hidePoweredBy, allowWhitelabelling } =
-    useSuperLoaderData<typeof loader>();
-  const revalidator = useRevalidator();
-
-  const [selectedDocument, setSelectedDocument] = useState<
-    (typeof envelopes)[number]['document'] | null
-  >(null);
-
-  // Additional state for embed functionality
-  const [hasFinishedInit, setHasFinishedInit] = useState(false);
-  const [isNameLocked, setIsNameLocked] = useState(false);
-  const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
-  const [showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
-    useState(false);
-  const [embedFullName, setEmbedFullName] = useState('');
-
-  // Check if all documents are completed
-  const isCompleted = envelopes.every(
-    (envelope) => envelope.recipient.signingStatus === SigningStatus.SIGNED,
-  );
-
-  const selectedRecipient = selectedDocument
-    ? envelopes.find((e) => e.document.id === selectedDocument.id)?.recipient
-    : null;
-
-  const onSelectDocument = (document: (typeof envelopes)[number]['document']) => {
-    setSelectedDocument(document);
-  };
-
-  const onBackToDocumentList = () => {
-    setSelectedDocument(null);
-    // Revalidate to fetch fresh data when returning to document list
-    void revalidator.revalidate();
-  };
-
-  const onDocumentCompleted = (data: {
-    token: string;
-    documentId: number;
-    recipientId: number;
-  }) => {
-    // Send postMessage for individual document completion
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'document-completed',
-          data: {
-            token: data.token,
-            documentId: data.documentId,
-            recipientId: data.recipientId,
-          },
-        },
-        '*',
-      );
-    }
-  };
-
-  const onDocumentRejected = (data: {
-    token: string;
-    documentId: number;
-    recipientId: number;
-    reason: string;
-  }) => {
-    // Send postMessage for document rejection
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'document-rejected',
-          data: {
-            token: data.token,
-            documentId: data.documentId,
-            recipientId: data.recipientId,
-            reason: data.reason,
-          },
-        },
-        '*',
-      );
-    }
-  };
-
-  const onDocumentError = () => {
-    // Send postMessage for document error
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'document-error',
-          data: null,
-        },
-        '*',
-      );
-    }
-  };
-
-  const onDocumentReady = () => {
-    // Send postMessage when document is ready
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'document-ready',
-          data: null,
-        },
-        '*',
-      );
-    }
-  };
-
-  const onAllDocumentsCompleted = () => {
-    // Send postMessage for all documents completion
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          action: 'all-documents-completed',
-          data: {
-            documents: envelopes.map((envelope) => ({
-              token: envelope.recipient.token,
-              documentId: envelope.document.id,
-              recipientId: envelope.recipient.id,
-              action:
-                envelope.recipient.signingStatus === SigningStatus.SIGNED
-                  ? 'document-completed'
-                  : 'document-rejected',
-              reason:
-                envelope.recipient.signingStatus === SigningStatus.REJECTED
-                  ? envelope.recipient.rejectionReason
-                  : undefined,
-            })),
-          },
-        },
-        '*',
-      );
-    }
-  };
-
-  useEffect(() => {
-    if (
-      envelopes.every((envelope) => envelope.recipient.signingStatus !== SigningStatus.NOT_SIGNED)
-    ) {
-      onAllDocumentsCompleted();
-    }
-  }, [envelopes]);
-
-  useLayoutEffect(() => {
-    const hash = window.location.hash.slice(1);
-
-    try {
-      const data = ZSignDocumentEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
-
-      if (!isCompleted && data.name) {
-        setEmbedFullName(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);
-      setShowOtherRecipientsCompletedFields(!!data.showOtherRecipientsCompletedFields);
-
-      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 two setters are stable we still want to ensure we're avoiding
-    // !: re-renders.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // If a document is selected, show the signing view
-  if (selectedDocument && selectedRecipient) {
-    // Determine the full name to use - prioritize embed data, then user name, then recipient name
-    const fullNameToUse =
-      embedFullName ||
-      (user?.email === selectedRecipient.email ? user?.name : selectedRecipient.name) ||
-      '';
-
-    return (
-      <div className="p-4">
-        <DocumentSigningProvider
-          email={selectedRecipient.email}
-          fullName={fullNameToUse}
-          signature={user?.email === selectedRecipient.email ? user?.signature : undefined}
-          typedSignatureEnabled={selectedDocument.documentMeta?.typedSignatureEnabled}
-          uploadSignatureEnabled={selectedDocument.documentMeta?.uploadSignatureEnabled}
-          drawSignatureEnabled={selectedDocument.documentMeta?.drawSignatureEnabled}
-        >
-          <DocumentSigningAuthProvider
-            documentAuthOptions={selectedDocument.authOptions}
-            recipient={selectedRecipient}
-            user={user}
-          >
-            <DocumentSigningRecipientProvider recipient={selectedRecipient} targetSigner={null}>
-              <MultiSignDocumentSigningView
-                token={selectedRecipient.token}
-                recipientId={selectedRecipient.id}
-                onBack={onBackToDocumentList}
-                onDocumentCompleted={onDocumentCompleted}
-                onDocumentRejected={onDocumentRejected}
-                onDocumentError={onDocumentError}
-                onDocumentReady={onDocumentReady}
-                isNameLocked={isNameLocked}
-              />
-            </DocumentSigningRecipientProvider>
-          </DocumentSigningAuthProvider>
-        </DocumentSigningProvider>
-
-        {!hidePoweredBy && (
-          <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
-            <span>Powered by</span>
-            <BrandingLogo className="ml-2 inline-block h-[14px]" />
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  // Otherwise, show the document list
-  return (
-    <div className="p-4">
-      <MultiSignDocumentList envelopes={envelopes} onDocumentSelect={onSelectDocument} />
-
-      {!hidePoweredBy && (
-        <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
-          <span>Powered by</span>
-          <BrandingLogo className="ml-2 inline-block h-[14px]" />
-        </div>
-      )}
-    </div>
-  );
-}

apps/remix/app/routes/embed+/v1.authoring+/_layout.tsx

@@ -0,0 +1,66 @@
+import { useLayoutEffect, useState } from 'react';
+
+import { Outlet } from 'react-router';
+
+import { TrpcProvider, trpc } from '@documenso/trpc/react';
+
+import { EmbedClientLoading } from '~/components/embed/embed-client-loading';
+import { ZBaseEmbedAuthoringSchema } from '~/types/embed-authoring-base-schema';
+import { injectCss } from '~/utils/css-vars';
+
+export default function AuthoringLayout() {
+  const [token, setToken] = useState('');
+
+  const {
+    mutateAsync: verifyEmbeddingPresignToken,
+    isPending: isVerifyingEmbeddingPresignToken,
+    data: isVerified,
+  } = trpc.embeddingPresign.verifyEmbeddingPresignToken.useMutation();
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      const result = ZBaseEmbedAuthoringSchema.safeParse(
+        JSON.parse(decodeURIComponent(atob(hash))),
+      );
+
+      if (!result.success) {
+        return;
+      }
+
+      const { token, css, cssVars, darkModeDisabled } = result.data;
+
+      if (darkModeDisabled) {
+        document.documentElement.classList.add('dark-mode-disabled');
+      }
+
+      injectCss({
+        css,
+        cssVars,
+      });
+
+      void verifyEmbeddingPresignToken({ token }).then((result) => {
+        if (result.success) {
+          setToken(token);
+        }
+      });
+    } catch (err) {
+      console.error('Error verifying embedding presign token:', err);
+    }
+  }, []);
+
+  if (isVerifyingEmbeddingPresignToken) {
+    return <EmbedClientLoading />;
+  }
+
+  if (typeof isVerified !== 'undefined' && !isVerified.success) {
+    return <div>Invalid embedding presign token</div>;
+  }
+
+  return (
+    <TrpcProvider headers={{ authorization: `Bearer ${token}` }}>
+      <Outlet />
+    </TrpcProvider>
+  );
+}

apps/remix/app/routes/embed+/v1.authoring+/document.create.tsx

@@ -12,8 +12,10 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
 import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
 import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
-import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fields-view';
-import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
+import {
+  ConfigureFieldsView,
+  type TConfigureFieldsFormSchema,
+} from '~/components/embed/authoring/configure-fields-view';
 import {
   type TBaseEmbedAuthoringSchema,
   ZBaseEmbedAuthoringSchema,
@@ -69,8 +71,6 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
       // Use the externalId from the URL fragment if available
       const documentExternalId = externalId || configuration.meta.externalId;
 
-      const signatureTypes = configuration.meta.signatureTypes ?? [];
-
       const createResult = await createEmbeddingDocument({
         title: configuration.title,
         documentDataId: documentData.id,
@@ -78,11 +78,14 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
         meta: {
           ...configuration.meta,
           drawSignatureEnabled:
-            signatureTypes.length === 0 || signatureTypes.includes(DocumentSignatureType.DRAW),
+            configuration.meta.signatureTypes.length === 0 ||
+            configuration.meta.signatureTypes.includes(DocumentSignatureType.DRAW),
           typedSignatureEnabled:
-            signatureTypes.length === 0 || signatureTypes.includes(DocumentSignatureType.TYPE),
+            configuration.meta.signatureTypes.length === 0 ||
+            configuration.meta.signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled:
-            signatureTypes.length === 0 || signatureTypes.includes(DocumentSignatureType.UPLOAD),
+            configuration.meta.signatureTypes.length === 0 ||
+            configuration.meta.signatureTypes.includes(DocumentSignatureType.UPLOAD),
         },
         recipients: configuration.signers.map((signer) => ({
           name: signer.name,
@@ -123,7 +126,7 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
 
       // Navigate to the completion page instead of the document details page
       await navigate(
-        `/embed/v1/authoring/completed/create?documentId=${createResult.documentId}&externalId=${documentExternalId}#${hash}`,
+        `/embed/v1/authoring/create-completed?documentId=${createResult.documentId}&externalId=${documentExternalId}#${hash}`,
       );
     } catch (err) {
       console.error('Error creating document:', err);

apps/remix/app/routes/embed+/v1.authoring+/template.create.tsx

@@ -11,8 +11,10 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
 import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
 import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
-import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fields-view';
-import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
+import {
+  ConfigureFieldsView,
+  type TConfigureFieldsFormSchema,
+} from '~/components/embed/authoring/configure-fields-view';
 import {
   type TBaseEmbedAuthoringSchema,
   ZBaseEmbedAuthoringSchema,
@@ -46,6 +48,8 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
 
   const handleConfigureFieldsSubmit = async (data: TConfigureFieldsFormSchema) => {
     try {
+      console.log('configuration', configuration);
+      console.log('data', data);
       if (!configuration || !configuration.documentData) {
         toast({
           variant: 'destructive',
@@ -113,7 +117,7 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
 
       // Navigate to the completion page instead of the template details page
       await navigate(
-        `/embed/v1/authoring/completed/create?templateId=${createResult.templateId}&externalId=${metaWithExternalId.externalId}#${hash}`,
+        `/embed/v1/authoring/create-completed?templateId=${createResult.templateId}&externalId=${metaWithExternalId.externalId}#${hash}`,
       );
     } catch (err) {
       console.error('Error creating template:', err);

apps/remix/app/storage/lang-cookie.server.ts

@@ -1,10 +1,6 @@
 import { createCookie } from 'react-router';
 
-import { env } from '@documenso/lib/utils/env';
-
 export const langCookie = createCookie('lang', {
   path: '/',
   maxAge: 60 * 60 * 24 * 365 * 2,
-  httpOnly: true,
-  secure: env('NODE_ENV') === 'production',
 });

apps/remix/app/types/embed-multisign-document-schema.ts

@@ -1,17 +0,0 @@
-import { z } from 'zod';
-
-import { ZBaseEmbedDataSchema } from './embed-base-schemas';
-
-export const ZEmbedMultiSignDocumentSchema = ZBaseEmbedDataSchema.extend({
-  email: z
-    .union([z.literal(''), z.string().email()])
-    .optional()
-    .transform((value) => value || undefined),
-  lockEmail: z.boolean().optional().default(false),
-  name: z
-    .string()
-    .optional()
-    .transform((value) => value || undefined),
-  lockName: z.boolean().optional().default(false),
-  allowDocumentRejection: z.boolean().optional(),
-});

apps/remix/package.json

@@ -33,8 +33,8 @@
     "@lingui/react": "^5.2.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
-    "@react-router/node": "^7.6.0",
-    "@react-router/serve": "^7.6.0",
+    "@react-router/node": "^7.1.5",
+    "@react-router/serve": "^7.1.5",
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
     "autoprefixer": "^10.4.13",
@@ -49,8 +49,8 @@
     "luxon": "^3.4.0",
     "papaparse": "^5.4.1",
     "plausible-tracker": "^0.3.9",
-    "posthog-js": "^1.245.0",
-    "posthog-node": "^4.17.0",
+    "posthog-js": "^1.224.0",
+    "posthog-node": "^4.8.1",
     "react": "^18",
     "react-call": "^1.3.0",
     "react-dom": "^18",
@@ -59,7 +59,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^5.4.0",
     "react-rnd": "^10.4.1",
-    "react-router": "^7.6.0",
+    "react-router": "^7.1.5",
     "recharts": "^2.7.2",
     "remeda": "^2.17.3",
     "remix-themes": "^2.0.4",
@@ -75,9 +75,9 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@lingui/babel-plugin-lingui-macro": "^5.2.0",
-    "@lingui/vite-plugin": "^5.3.1",
-    "@react-router/dev": "^7.6.0",
-    "@react-router/remix-routes-option-adapter": "^7.6.0",
+    "@lingui/vite-plugin": "^5.2.0",
+    "@react-router/dev": "^7.1.5",
+    "@react-router/remix-routes-option-adapter": "^7.1.5",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
@@ -91,14 +91,14 @@
     "@types/react-dom": "^18",
     "@types/ua-parser-js": "^0.7.39",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.25.4",
+    "esbuild": "0.24.2",
     "remix-flat-routes": "^0.8.4",
     "rollup": "^4.34.5",
     "tsx": "^4.19.2",
     "typescript": "5.6.2",
-    "vite": "^6.3.5",
+    "vite": "^6.1.0",
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "1.12.0-rc.0"
+  "version": "1.10.0-rc.5"
 }

apps/remix/vite.config.ts

@@ -35,27 +35,12 @@ export default defineConfig({
   ],
   ssr: {
     noExternal: ['react-dropzone', 'plausible-tracker', 'pdfjs-dist'],
-    external: [
-      '@node-rs/bcrypt',
-      '@prisma/client',
-      '@documenso/tailwind-config',
-      'playwright',
-      'playwright-core',
-      '@playwright/browser-chromium',
-    ],
+    external: ['@node-rs/bcrypt', '@prisma/client', '@documenso/tailwind-config'],
   },
   optimizeDeps: {
     entries: ['./app/**/*', '../../packages/ui/**/*', '../../packages/lib/**/*'],
     include: ['prop-types', 'file-selector', 'attr-accept'],
-    exclude: [
-      'node_modules',
-      '@node-rs/bcrypt',
-      '@documenso/pdf-sign',
-      'sharp',
-      'playwright',
-      'playwright-core',
-      '@playwright/browser-chromium',
-    ],
+    exclude: ['node_modules', '@node-rs/bcrypt', '@documenso/pdf-sign', 'sharp'],
   },
   resolve: {
     alias: {
@@ -83,8 +68,7 @@ export default defineConfig({
         '@documenso/pdf-sign',
         '@aws-sdk/cloudfront-signer',
         'nodemailer',
-        /playwright/,
-        '@playwright/browser-chromium',
+        'playwright',
       ],
     },
   },