feat: billing

.github/workflows/e2e-tests.yml

@@ -31,9 +31,6 @@ jobs:
       - name: Build app
         run: npm run build
 
-      - name: Install playwright browsers
-        run: npx playwright install --with-deps
-
       - name: Run Playwright tests
         run: npm run ci
         env:

.husky/commit-msg

@@ -1 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
 npm run commitlint -- $1

.husky/pre-commit

@@ -1,3 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
 SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
 

.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/pages/developers/embedding/_meta.json

@@ -6,6 +6,5 @@
   "solid": "Solid Integration",
   "preact": "Preact Integration",
   "angular": "Angular Integration",
-  "css-variables": "CSS Variables",
-  "authoring": "Authoring"
-}
+  "css-variables": "CSS Variables"
+}

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

@@ -1,167 +0,0 @@
----
-title: Authoring
-description: Learn how to use embedded authoring to create documents and templates in your application
----
-
-# Embedded Authoring
-
-In addition to embedding signing experiences, Documenso now supports embedded authoring, allowing you to integrate document and template creation directly within your application.
-
-## How Embedded Authoring Works
-
-The embedded authoring feature enables your users to create new documents without leaving your application. This process works through secure presign tokens that authenticate the embedding session and manage permissions.
-
-## Creating Documents with Embedded Authoring
-
-To implement document creation in your application, use the `EmbedCreateDocument` component from our SDK:
-
-```jsx
-import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
-
-const DocumentCreator = () => {
-  // You'll need to obtain a presign token using your API key
-  const presignToken = 'YOUR_PRESIGN_TOKEN';
-
-  return (
-    <div style={{ height: '800px', width: '100%' }}>
-      <EmbedCreateDocument
-        presignToken={presignToken}
-        externalId="order-12345"
-        onDocumentCreated={(data) => {
-          console.log('Document created with ID:', data.documentId);
-          console.log('External reference ID:', data.externalId);
-        }}
-      />
-    </div>
-  );
-};
-```
-
-## Obtaining a Presign Token
-
-Before using the `EmbedCreateDocument` component, you'll need to obtain a presign token from your backend. This token authorizes the embedding session.
-
-You can create a presign token by making a request to:
-
-```
-POST /api/v2-beta/embedding/create-presign-token
-```
-
-This API endpoint requires authentication with your Documenso API key. The token has a default expiration of 1 hour, but you can customize this duration based on your security requirements.
-
-You can find more details on this request at our [API Documentation](https://openapi.documenso.com/reference#tag/embedding)
-
-## Configuration Options
-
-The `EmbedCreateDocument` component accepts several configuration options:
-
-| Option             | Type    | Description                                                        |
-| ------------------ | ------- | ------------------------------------------------------------------ |
-| `presignToken`     | string  | **Required**. The authentication token for the embedding session.  |
-| `externalId`       | string  | Optional reference ID from your system to link with the document.  |
-| `host`             | string  | Optional custom host URL. Defaults to `https://app.documenso.com`. |
-| `css`              | string  | Optional custom CSS to style the embedded component.               |
-| `cssVars`          | object  | Optional CSS variables for colors, spacing, and more.              |
-| `darkModeDisabled` | boolean | Optional flag to disable dark mode.                                |
-| `className`        | string  | Optional CSS class name for the iframe.                            |
-
-## Feature Toggles
-
-You can customize the authoring experience by enabling or disabling specific features:
-
-```jsx
-<EmbedCreateDocument
-  presignToken="YOUR_PRESIGN_TOKEN"
-  features={{
-    allowConfigureSignatureTypes: true,
-    allowConfigureLanguage: true,
-    allowConfigureDateFormat: true,
-    allowConfigureTimezone: true,
-    allowConfigureRedirectUrl: true,
-    allowConfigureCommunication: true,
-  }}
-/>
-```
-
-## Handling Document Creation Events
-
-The `onDocumentCreated` callback is triggered when a document is successfully created, providing both the document ID and your external reference ID:
-
-```jsx
-<EmbedCreateDocument
-  presignToken="YOUR_PRESIGN_TOKEN"
-  externalId="order-12345"
-  onDocumentCreated={(data) => {
-    // Navigate to a success page
-    navigate(`/documents/success?id=${data.documentId}`);
-
-    // Or update your database with the document ID
-    updateOrderDocument(data.externalId, data.documentId);
-  }}
-/>
-```
-
-## Styling the Embedded Component
-
-You can customize the appearance of the embedded component using standard CSS classes:
-
-```jsx
-<EmbedCreateDocument
-  className="h-screen w-full rounded-lg border-none shadow-md"
-  presignToken="YOUR_PRESIGN_TOKEN"
-  css={`
-    .documenso-embed {
-      border-radius: 8px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-  `}
-  cssVars={{
-    primary: '#0000FF',
-    background: '#F5F5F5',
-    radius: '8px',
-  }}
-/>
-```
-
-## Complete Integration Example
-
-Here's a complete example of integrating document creation in a React application:
-
-```tsx
-import { useState } from 'react';
-
-import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
-
-function DocumentCreator() {
-  // In a real application, you would fetch this token from your backend
-  // using your API key at /api/v2-beta/embedding/create-presign-token
-  const presignToken = 'YOUR_PRESIGN_TOKEN';
-  const [documentId, setDocumentId] = useState<number | null>(null);
-
-  if (documentId) {
-    return (
-      <div>
-        <h2>Document Created Successfully!</h2>
-        <p>Document ID: {documentId}</p>
-        <button onClick={() => setDocumentId(null)}>Create Another Document</button>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ height: '800px', width: '100%' }}>
-      <EmbedCreateDocument
-        presignToken={presignToken}
-        externalId="order-12345"
-        onDocumentCreated={(data) => {
-          setDocumentId(data.documentId);
-        }}
-      />
-    </div>
-  );
-}
-
-export default DocumentCreator;
-```
-
-With embedded authoring, your users can seamlessly create documents within your application, enhancing the overall user experience and streamlining document workflows.

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

@@ -169,19 +169,6 @@ Once you've obtained the appropriate tokens, you can integrate the signing exper
 
 If you're using **web components**, the integration process is slightly different. Keep in mind that web components are currently less tested but can still provide flexibility for general use cases.
 
-## Embedded Authoring
-
-In addition to embedding signing experiences, Documenso now supports **embedded authoring**, allowing your users to create documents and templates directly within your application.
-
-With embedded authoring, you can:
-
-- Create new documents with custom fields
-- Configure document properties and settings
-- Set up recipients and signing workflows
-- Customize the authoring experience
-
-For detailed implementation instructions and code examples, see our [Embedded Authoring](/developers/embedding/authoring) guide.
-
 ## Related
 
 - [React Integration](/developers/embedding/react)
@@ -191,4 +178,3 @@ For detailed implementation instructions and code examples, see our [Embedded Au
 - [Preact Integration](/developers/embedding/preact)
 - [Angular Integration](/developers/embedding/angular)
 - [CSS Variables](/developers/embedding/css-variables)
-- [Embedded Authoring](/developers/embedding/authoring)

apps/documentation/providers/plausible.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import NextPlausibleProvider from 'next-plausible';

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/admin-organisation-create-dialog.tsx

@@ -1,197 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
-import type { z } from 'zod';
-
-import { AppError } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import { ZCreateAdminOrganisationRequestSchema } from '@documenso/trpc/server/admin-router/create-admin-organisation.types';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-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';
-
-export type OrganisationCreateDialogProps = {
-  trigger?: React.ReactNode;
-  ownerUserId: number;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const ZCreateAdminOrganisationFormSchema = ZCreateAdminOrganisationRequestSchema.shape.data.pick({
-  name: true,
-});
-
-type TCreateOrganisationFormSchema = z.infer<typeof ZCreateAdminOrganisationFormSchema>;
-
-export const AdminOrganisationCreateDialog = ({
-  trigger,
-  ownerUserId,
-  ...props
-}: OrganisationCreateDialogProps) => {
-  const { t } = useLingui();
-  const { toast } = useToast();
-
-  const [open, setOpen] = useState(false);
-
-  const navigate = useNavigate();
-
-  const form = useForm({
-    resolver: zodResolver(ZCreateAdminOrganisationFormSchema),
-    defaultValues: {
-      name: '',
-    },
-  });
-
-  const { mutateAsync: createOrganisation } = trpc.admin.organisation.create.useMutation();
-
-  const onFormSubmit = async ({ name }: TCreateOrganisationFormSchema) => {
-    try {
-      const { organisationId } = await createOrganisation({
-        ownerUserId,
-        data: {
-          name,
-        },
-      });
-
-      await navigate(`/admin/organisations/${organisationId}`);
-
-      setOpen(false);
-
-      toast({
-        title: t`Success`,
-        description: t`Organisation created`,
-        duration: 5000,
-      });
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      console.error(error);
-
-      toast({
-        title: t`An unknown error occurred`,
-        description: t`We encountered an unknown error while attempting to create a organisation. Please try again later.`,
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    form.reset();
-  }, [open, form]);
-
-  return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
-      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
-        {trigger ?? (
-          <Button className="flex-shrink-0" variant="secondary">
-            <Trans>Create organisation</Trans>
-          </Button>
-        )}
-      </DialogTrigger>
-
-      <DialogContent position="center">
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Create organisation</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            <Trans>Create an organisation for this user</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset
-              className="flex h-full flex-col space-y-4"
-              disabled={form.formState.isSubmitting}
-            >
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel required>
-                      <Trans>Organisation Name</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Input {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <Alert variant="neutral">
-                <AlertDescription className="mt-0">
-                  <Trans>
-                    You will need to configure any claims or subscription after creating this
-                    organisation
-                  </Trans>
-                </AlertDescription>
-              </Alert>
-
-              {/* <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Default claim ID</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Input {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      <Trans>Leave blank to use the default free claim</Trans>
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              /> */}
-
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                  <Trans>Cancel</Trans>
-                </Button>
-
-                <Button
-                  type="submit"
-                  data-testid="dialog-create-organisation-button"
-                  loading={form.formState.isSubmitting}
-                >
-                  <Trans>Create</Trans>
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/assistant-confirmation-dialog.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
@@ -57,8 +55,6 @@ export function AssistantConfirmationDialog({
   allowDictateNextSigner = false,
   defaultNextSigner,
 }: ConfirmationDialogProps) {
-  const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
-
   const form = useForm<TNextSignerFormSchema>({
     resolver: zodResolver(ZNextSignerFormSchema),
     defaultValues: {
@@ -111,72 +107,53 @@ export function AssistantConfirmationDialog({
 
               <div className="mt-4 flex flex-col gap-4">
                 {allowDictateNextSigner && (
-                  <div className="mt-4 flex flex-col gap-4">
-                    {!isEditingNextSigner && (
-                      <div>
-                        <p className="text-muted-foreground text-sm">
-                          The next recipient to sign this document will be{' '}
-                          <span className="font-semibold">{form.watch('name')}</span> (
-                          <span className="font-semibold">{form.watch('email')}</span>).
-                        </p>
+                  <div className="my-2">
+                    <p className="text-muted-foreground mb-1 text-sm font-semibold">
+                      The next recipient to sign this document will be{' '}
+                    </p>
 
-                        <Button
-                          type="button"
-                          className="mt-2"
-                          variant="outline"
-                          size="sm"
-                          onClick={() => setIsEditingNextSigner((prev) => !prev)}
-                        >
-                          <Trans>Update Recipient</Trans>
-                        </Button>
-                      </div>
-                    )}
+                    <div className="flex flex-col gap-4 rounded-xl border p-4 md:flex-row">
+                      <FormField
+                        control={form.control}
+                        name="name"
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormLabel>
+                              <Trans>Name</Trans>
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...field}
+                                className="mt-2"
+                                placeholder="Enter the next signer's name"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
 
-                    {isEditingNextSigner && (
-                      <div className="flex flex-col gap-4 md:flex-row">
-                        <FormField
-                          control={form.control}
-                          name="name"
-                          render={({ field }) => (
-                            <FormItem className="flex-1">
-                              <FormLabel>
-                                <Trans>Name</Trans>
-                              </FormLabel>
-                              <FormControl>
-                                <Input
-                                  {...field}
-                                  className="mt-2"
-                                  placeholder="Enter the next signer's name"
-                                />
-                              </FormControl>
-
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        <FormField
-                          control={form.control}
-                          name="email"
-                          render={({ field }) => (
-                            <FormItem className="flex-1">
-                              <FormLabel>
-                                <Trans>Email</Trans>
-                              </FormLabel>
-                              <FormControl>
-                                <Input
-                                  {...field}
-                                  type="email"
-                                  className="mt-2"
-                                  placeholder="Enter the next signer's email"
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      </div>
-                    )}
+                      <FormField
+                        control={form.control}
+                        name="email"
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormLabel>
+                              <Trans>Email</Trans>
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...field}
+                                type="email"
+                                className="mt-2"
+                                placeholder="Enter the next signer's email"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
                   </div>
                 )}
 

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

@@ -52,7 +52,7 @@ export const DocumentDuplicateDialog = ({
       }
     : undefined;
 
-  const documentsPath = formatDocumentsPath(team.url);
+  const documentsPath = formatDocumentsPath(team?.url);
 
   const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
     trpcReact.document.duplicateDocument.useMutation({

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

@@ -1,217 +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 { useCurrentTeam } 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 = useCurrentTeam();
-
-  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,
-      });
-
-      const documentsPath = formatDocumentsPath(team.url);
-
-      if (data.folderId) {
-        await navigate(`${documentsPath}/f/${data.folderId}`);
-      } else {
-        await navigate(documentsPath);
-      }
-
-      toast({
-        title: _(msg`Document moved`),
-        description: _(msg`The document has been moved successfully.`),
-        variant: 'default',
-      });
-
-      onOpenChange(false);
-    } 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 { useCurrentTeam } 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 = useCurrentTeam();
-
-  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);
-
-      const documentsPath = formatDocumentsPath(team.url);
-
-      await navigate(`${documentsPath}/f/${newFolder.id}`);
-
-      toast({
-        description: 'Folder created successfully',
-      });
-    } 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 organise 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/organisation-create-dialog.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -14,7 +12,6 @@ import type { z } from 'zod';
 
 import type { InternalClaimPlans } from '@documenso/ee/server-only/stripe/get-internal-claim-plans';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
@@ -50,16 +47,15 @@ export type OrganisationCreateDialogProps = {
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-export const ZCreateOrganisationFormSchema = ZCreateOrganisationRequestSchema.pick({
+const ZCreateOrganisationFormSchema = ZCreateOrganisationRequestSchema.pick({
   name: true,
 });
 
-export type TCreateOrganisationFormSchema = z.infer<typeof ZCreateOrganisationFormSchema>;
+type TCreateOrganisationFormSchema = z.infer<typeof ZCreateOrganisationFormSchema>;
 
 export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCreateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
-  const { refreshSession } = useSession();
 
   const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
@@ -94,12 +90,8 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
 
       if (response.paymentRequired) {
         window.open(response.checkoutUrl, '_blank');
-        setOpen(false);
-
-        return;
       }
 
-      await refreshSession();
       setOpen(false);
 
       toast({
@@ -251,19 +243,6 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
   );
 };
 
-// This is separated from the internal claims constant because we need to use the msg
-// macro which would cause import issues.
-const internalClaimsDescription: {
-  [key in INTERNAL_CLAIM_ID]: MessageDescriptor | string;
-} = {
-  [INTERNAL_CLAIM_ID.FREE]: msg`5 Documents a month`,
-  [INTERNAL_CLAIM_ID.INDIVIDUAL]: msg`Unlimited documents, API and more`,
-  [INTERNAL_CLAIM_ID.TEAM]: msg`Embedding, 5 members included and more`,
-  [INTERNAL_CLAIM_ID.PLATFORM]: msg`Whitelabeling, unlimited members and more`,
-  [INTERNAL_CLAIM_ID.ENTERPRISE]: '',
-  [INTERNAL_CLAIM_ID.EARLY_ADOPTER]: '',
-};
-
 type BillingPlanFormProps = {
   value: string;
   onChange: (priceId: string) => void;
@@ -282,14 +261,14 @@ const BillingPlanForm = ({
   const [billingPeriod, setBillingPeriod] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
 
   const dynamicPlans = useMemo(() => {
-    return [INTERNAL_CLAIM_ID.INDIVIDUAL, INTERNAL_CLAIM_ID.TEAM, INTERNAL_CLAIM_ID.PLATFORM].map(
+    return [INTERNAL_CLAIM_ID.INDIVIDUAL, INTERNAL_CLAIM_ID.PRO, INTERNAL_CLAIM_ID.PLATFORM].map(
       (planId) => {
         const plan = plans[planId];
 
         return {
           id: planId,
           name: plan.name,
-          description: parseMessageDescriptorMacro(t, internalClaimsDescription[planId]),
+          description: parseMessageDescriptorMacro(t, plan.description),
           monthlyPrice: plan.monthlyPrice,
           yearlyPrice: plan.yearlyPrice,
         };

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

@@ -9,7 +9,6 @@ import { useNavigate } from 'react-router';
 import { z } from 'zod';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -43,7 +42,6 @@ export const OrganisationDeleteDialog = ({ trigger }: OrganisationDeleteDialogPr
 
   const { _ } = useLingui();
   const { toast } = useToast();
-  const { refreshSession } = useSession();
 
   const organisation = useCurrentOrganisation();
 
@@ -75,7 +73,6 @@ export const OrganisationDeleteDialog = ({ trigger }: OrganisationDeleteDialogPr
       });
 
       await navigate('/settings/organisations');
-      await refreshSession();
 
       setOpen(false);
     } catch (err) {

apps/remix/app/components/dialogs/organisation-group-create-dialog.tsx

@@ -9,8 +9,10 @@ import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
-import { EXTENDED_ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
+import {
+  ORGANISATION_MEMBER_ROLE_HIERARCHY,
+  ORGANISATION_MEMBER_ROLE_MAP,
+} from '@documenso/lib/constants/organisations';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateOrganisationGroupRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation-group.types';
@@ -187,7 +189,7 @@ export const OrganisationGroupCreateDialog = ({
                             organisation.currentOrganisationRole
                           ].map((role) => (
                             <SelectItem key={role} value={role}>
-                              {t(EXTENDED_ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
+                              {t(ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
                             </SelectItem>
                           ))}
                         </SelectContent>

apps/remix/app/components/dialogs/organisation-leave-dialog.tsx

@@ -4,7 +4,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import type { OrganisationMemberRole } from '@prisma/client';
 
-import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
+import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { trpc } from '@documenso/trpc/react';
 import { Alert } from '@documenso/ui/primitives/alert';

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -13,14 +13,13 @@ import { z } from 'zod';
 
 import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
-import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
-import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
+import {
+  ORGANISATION_MEMBER_ROLE_HIERARCHY,
+  ORGANISATION_MEMBER_ROLE_MAP,
+} from '@documenso/lib/constants/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateOrganisationMemberInvitesRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation-member-invites.types';
 import { cn } from '@documenso/ui/lib/utils';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
@@ -48,7 +47,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@documenso/ui/primitives/select';
-import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -136,10 +134,6 @@ export const OrganisationMemberInviteDialog = ({
   const { mutateAsync: createOrganisationMemberInvites } =
     trpc.organisation.member.invite.createMany.useMutation();
 
-  const { data: fullOrganisation } = trpc.organisation.get.useQuery({
-    organisationReference: organisation.id,
-  });
-
   const onAddOrganisationMemberInvite = () => {
     appendOrganisationMemberInvite({
       email: '',
@@ -172,27 +166,6 @@ export const OrganisationMemberInviteDialog = ({
     }
   };
 
-  const dialogState = useMemo(() => {
-    if (!fullOrganisation) {
-      return 'loading';
-    }
-
-    if (!IS_BILLING_ENABLED()) {
-      return 'form';
-    }
-
-    if (fullOrganisation.organisationClaim.memberCount === 0) {
-      return 'form';
-    }
-
-    // This is probably going to screw us over in the future.
-    if (fullOrganisation.organisationClaim.originalSubscriptionClaimId !== INTERNAL_CLAIM_ID.TEAM) {
-      return 'alert';
-    }
-
-    return 'form';
-  }, [fullOrganisation]);
-
   useEffect(() => {
     if (!open) {
       form.reset();
@@ -292,186 +265,159 @@ export const OrganisationMemberInviteDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        {dialogState === 'loading' && <SpinnerBox className="py-32" />}
+        <Tabs
+          defaultValue="INDIVIDUAL"
+          value={invitationType}
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          onValueChange={(value) => setInvitationType(value as TabTypes)}
+        >
+          <TabsList className="w-full">
+            <TabsTrigger value="INDIVIDUAL" className="hover:text-foreground w-full">
+              <MailIcon size={20} className="mr-2" />
+              <Trans>Invite Members</Trans>
+            </TabsTrigger>
 
-        {dialogState === 'alert' && (
-          <>
-            <Alert
-              className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-              variant="neutral"
-            >
-              <AlertDescription>
-                <Trans>
-                  Your plan does not support inviting members. Please upgrade or your plan or
-                  contact sales at <a href="mailto:support@documenso.com">support@documenso.com</a>{' '}
-                  if you would like to discuss your options.
-                </Trans>
-              </AlertDescription>
-            </Alert>
+            <TabsTrigger value="BULK" className="hover:text-foreground w-full">
+              <UsersIcon size={20} className="mr-2" /> <Trans>Bulk Import</Trans>
+            </TabsTrigger>
+          </TabsList>
 
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                <Trans>Cancel</Trans>
-              </Button>
-            </DialogFooter>
-          </>
-        )}
+          <TabsContent value="INDIVIDUAL">
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onFormSubmit)}>
+                <fieldset
+                  className="flex h-full flex-col space-y-4"
+                  disabled={form.formState.isSubmitting}
+                >
+                  <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                    {organisationMemberInvites.map((organisationMemberInvite, index) => (
+                      <div
+                        className="flex w-full flex-row space-x-4"
+                        key={organisationMemberInvite.id}
+                      >
+                        <FormField
+                          control={form.control}
+                          name={`invitations.${index}.email`}
+                          render={({ field }) => (
+                            <FormItem className="w-full">
+                              {index === 0 && (
+                                <FormLabel required>
+                                  <Trans>Email address</Trans>
+                                </FormLabel>
+                              )}
+                              <FormControl>
+                                <Input className="bg-background" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
 
-        {dialogState === 'form' && (
-          <Tabs
-            defaultValue="INDIVIDUAL"
-            value={invitationType}
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            onValueChange={(value) => setInvitationType(value as TabTypes)}
-          >
-            <TabsList className="w-full">
-              <TabsTrigger value="INDIVIDUAL" className="hover:text-foreground w-full">
-                <MailIcon size={20} className="mr-2" />
-                <Trans>Invite Members</Trans>
-              </TabsTrigger>
+                        <FormField
+                          control={form.control}
+                          name={`invitations.${index}.organisationRole`}
+                          render={({ field }) => (
+                            <FormItem className="w-full">
+                              {index === 0 && (
+                                <FormLabel required>
+                                  <Trans>Organisation Role</Trans>
+                                </FormLabel>
+                              )}
+                              <FormControl>
+                                <Select {...field} onValueChange={field.onChange}>
+                                  <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                                    <SelectValue />
+                                  </SelectTrigger>
 
-              <TabsTrigger value="BULK" className="hover:text-foreground w-full">
-                <UsersIcon size={20} className="mr-2" /> <Trans>Bulk Import</Trans>
-              </TabsTrigger>
-            </TabsList>
+                                  <SelectContent position="popper">
+                                    {ORGANISATION_MEMBER_ROLE_HIERARCHY[
+                                      organisation.currentOrganisationRole
+                                    ].map((role) => (
+                                      <SelectItem key={role} value={role}>
+                                        {_(ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
 
-            <TabsContent value="INDIVIDUAL">
-              <Form {...form}>
-                <form onSubmit={form.handleSubmit(onFormSubmit)}>
-                  <fieldset
-                    className="flex h-full flex-col space-y-4"
-                    disabled={form.formState.isSubmitting}
-                  >
-                    <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
-                      {organisationMemberInvites.map((organisationMemberInvite, index) => (
-                        <div
-                          className="flex w-full flex-row space-x-4"
-                          key={organisationMemberInvite.id}
+                        <button
+                          type="button"
+                          className={cn(
+                            'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                            index === 0 ? 'mt-8' : 'mt-0',
+                          )}
+                          disabled={organisationMemberInvites.length === 1}
+                          onClick={() => removeOrganisationMemberInvite(index)}
                         >
-                          <FormField
-                            control={form.control}
-                            name={`invitations.${index}.email`}
-                            render={({ field }) => (
-                              <FormItem className="w-full">
-                                {index === 0 && (
-                                  <FormLabel required>
-                                    <Trans>Email address</Trans>
-                                  </FormLabel>
-                                )}
-                                <FormControl>
-                                  <Input className="bg-background" {...field} />
-                                </FormControl>
-                                <FormMessage />
-                              </FormItem>
-                            )}
-                          />
+                          <Trash className="h-5 w-5" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
 
-                          <FormField
-                            control={form.control}
-                            name={`invitations.${index}.organisationRole`}
-                            render={({ field }) => (
-                              <FormItem className="w-full">
-                                {index === 0 && (
-                                  <FormLabel required>
-                                    <Trans>Organisation Role</Trans>
-                                  </FormLabel>
-                                )}
-                                <FormControl>
-                                  <Select {...field} onValueChange={field.onChange}>
-                                    <SelectTrigger className="text-muted-foreground max-w-[200px]">
-                                      <SelectValue />
-                                    </SelectTrigger>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    className="w-fit"
+                    onClick={() => onAddOrganisationMemberInvite()}
+                  >
+                    <PlusCircle className="mr-2 h-4 w-4" />
+                    <Trans>Add more</Trans>
+                  </Button>
 
-                                    <SelectContent position="popper">
-                                      {ORGANISATION_MEMBER_ROLE_HIERARCHY[
-                                        organisation.currentOrganisationRole
-                                      ].map((role) => (
-                                        <SelectItem key={role} value={role}>
-                                          {_(ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
-                                        </SelectItem>
-                                      ))}
-                                    </SelectContent>
-                                  </Select>
-                                </FormControl>
-                                <FormMessage />
-                              </FormItem>
-                            )}
-                          />
-
-                          <button
-                            type="button"
-                            className={cn(
-                              'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
-                              index === 0 ? 'mt-8' : 'mt-0',
-                            )}
-                            disabled={organisationMemberInvites.length === 1}
-                            onClick={() => removeOrganisationMemberInvite(index)}
-                          >
-                            <Trash className="h-5 w-5" />
-                          </button>
-                        </div>
-                      ))}
-                    </div>
-
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant="outline"
-                      className="w-fit"
-                      onClick={() => onAddOrganisationMemberInvite()}
-                    >
-                      <PlusCircle className="mr-2 h-4 w-4" />
-                      <Trans>Add more</Trans>
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                      <Trans>Cancel</Trans>
                     </Button>
 
-                    <DialogFooter>
-                      <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                        <Trans>Cancel</Trans>
-                      </Button>
+                    <Button type="submit" loading={form.formState.isSubmitting}>
+                      {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
+                      <Trans>Invite</Trans>
+                    </Button>
+                  </DialogFooter>
+                </fieldset>
+              </form>
+            </Form>
+          </TabsContent>
 
-                      <Button type="submit" loading={form.formState.isSubmitting}>
-                        {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
-                        <Trans>Invite</Trans>
-                      </Button>
-                    </DialogFooter>
-                  </fieldset>
-                </form>
-              </Form>
-            </TabsContent>
+          <TabsContent value="BULK">
+            <div className="mt-4 space-y-4">
+              <Card gradient className="h-32">
+                <CardContent
+                  className="text-muted-foreground/80 hover:text-muted-foreground/90 flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 transition-colors"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <Upload className="h-5 w-5" />
 
-            <TabsContent value="BULK">
-              <div className="mt-4 space-y-4">
-                <Card gradient className="h-32">
-                  <CardContent
-                    className="text-muted-foreground/80 hover:text-muted-foreground/90 flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 transition-colors"
-                    onClick={() => fileInputRef.current?.click()}
-                  >
-                    <Upload className="h-5 w-5" />
+                  <p className="mt-1 text-sm">
+                    <Trans>Click here to upload</Trans>
+                  </p>
 
-                    <p className="mt-1 text-sm">
-                      <Trans>Click here to upload</Trans>
-                    </p>
+                  <input
+                    onChange={onFileInputChange}
+                    type="file"
+                    ref={fileInputRef}
+                    accept=".csv"
+                    hidden
+                  />
+                </CardContent>
+              </Card>
 
-                    <input
-                      onChange={onFileInputChange}
-                      type="file"
-                      ref={fileInputRef}
-                      accept=".csv"
-                      hidden
-                    />
-                  </CardContent>
-                </Card>
-
-                <DialogFooter>
-                  <Button type="button" variant="secondary" onClick={downloadTemplate}>
-                    <Download className="mr-2 h-4 w-4" />
-                    <Trans>Template</Trans>
-                  </Button>
-                </DialogFooter>
-              </div>
-            </TabsContent>
-          </Tabs>
-        )}
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={downloadTemplate}>
+                  <Download className="mr-2 h-4 w-4" />
+                  <Trans>Template</Trans>
+                </Button>
+              </DialogFooter>
+            </div>
+          </TabsContent>
+        </Tabs>
       </DialogContent>
     </Dialog>
   );

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

@@ -9,8 +9,10 @@ import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
-import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
+import {
+  ORGANISATION_MEMBER_ROLE_HIERARCHY,
+  ORGANISATION_MEMBER_ROLE_MAP,
+} from '@documenso/lib/constants/organisations';
 import { isOrganisationRoleWithinUserHierarchy } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';

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

@@ -12,7 +12,7 @@ import type { z } from 'zod';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { IS_BILLING_ENABLED, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateTeamRequestSchema } from '@documenso/trpc/server/team-router/create-team.types';
@@ -131,10 +131,6 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
       return 'loading';
     }
 
-    if (!IS_BILLING_ENABLED()) {
-      return 'form';
-    }
-
     if (fullOrganisation.organisationClaim.teamCount === 0) {
       return 'form';
     }
@@ -190,7 +186,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
               className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
               variant="neutral"
             >
-              <AlertDescription className="mt-0">
+              <AlertDescription className="mr-2">
                 <Trans>
                   You have reached the maximum number of teams for your plan. Please contact sales
                   at <a href="mailto:support@documenso.com">support@documenso.com</a> if you would

apps/remix/app/components/dialogs/team-group-create-dialog.tsx

@@ -8,8 +8,7 @@ import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
-import { TEAM_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/teams';
-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {

apps/remix/app/components/dialogs/team-group-update-dialog.tsx

@@ -9,8 +9,10 @@ import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { TEAM_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/teams';
-import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import {
+  EXTENDED_TEAM_MEMBER_ROLE_MAP,
+  TEAM_MEMBER_ROLE_HIERARCHY,
+} from '@documenso/lib/constants/teams';
 import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';

apps/remix/app/components/dialogs/team-inherit-member-disable-dialog.tsx

@@ -1,93 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro';
-import type { TeamGroup } from '@prisma/client';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useCurrentTeam } from '~/providers/team';
-
-type TeamMemberInheritDisableDialogProps = {
-  group: TeamGroup;
-};
-
-export const TeamMemberInheritDisableDialog = ({ group }: TeamMemberInheritDisableDialogProps) => {
-  const { toast } = useToast();
-  const { t } = useLingui();
-
-  const team = useCurrentTeam();
-
-  const deleteGroupMutation = trpc.team.group.delete.useMutation({
-    onSuccess: () => {
-      toast({
-        title: t`Access disabled`,
-        duration: 5000,
-      });
-    },
-    onError: () => {
-      toast({
-        title: t`Something went wrong`,
-        description: t`We encountered an unknown error while attempting to disable access.`,
-        variant: 'destructive',
-        duration: 5000,
-      });
-    },
-  });
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">
-          <Trans>Disable access</Trans>
-        </Button>
-      </DialogTrigger>
-
-      <DialogContent position="center">
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Are you sure?</Trans>
-          </DialogTitle>
-
-          <DialogDescription className="mt-4">
-            <Trans>
-              You are about to remove default access to this team for all organisation members. Any
-              members not explicitly added to this team will no longer have access.
-            </Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              <Trans>Cancel</Trans>
-            </Button>
-          </DialogClose>
-
-          <Button
-            type="submit"
-            variant="destructive"
-            loading={deleteGroupMutation.isPending}
-            onClick={() =>
-              deleteGroupMutation.mutate({
-                teamId: team.id,
-                teamGroupId: group.id,
-              })
-            }
-          >
-            <Trans>Disable</Trans>
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/team-inherit-member-enable-dialog.tsx

@@ -1,109 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro';
-import { OrganisationGroupType, OrganisationMemberRole, TeamMemberRole } from '@prisma/client';
-
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useCurrentTeam } from '~/providers/team';
-
-export const TeamMemberInheritEnableDialog = () => {
-  const organisation = useCurrentOrganisation();
-  const team = useCurrentTeam();
-
-  const { toast } = useToast();
-  const { t } = useLingui();
-
-  const { mutateAsync: createTeamGroups, isPending } = trpc.team.group.createMany.useMutation({
-    onSuccess: () => {
-      toast({
-        title: t`Access enabled`,
-        duration: 5000,
-      });
-    },
-    onError: () => {
-      toast({
-        title: t`Something went wrong`,
-        description: t`We encountered an unknown error while attempting to enable access.`,
-        variant: 'destructive',
-        duration: 5000,
-      });
-    },
-  });
-
-  const organisationGroupQuery = trpc.organisation.group.find.useQuery({
-    organisationId: organisation.id,
-    perPage: 1,
-    types: [OrganisationGroupType.INTERNAL_ORGANISATION],
-    organisationRoles: [OrganisationMemberRole.MEMBER],
-  });
-
-  const enableAccessGroup = async () => {
-    if (!organisationGroupQuery.data?.data[0]?.id) {
-      return;
-    }
-
-    await createTeamGroups({
-      teamId: team.id,
-      groups: [
-        {
-          organisationGroupId: organisationGroupQuery.data?.data[0]?.id,
-          teamRole: TeamMemberRole.MEMBER,
-        },
-      ],
-    });
-  };
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">
-          <Trans>Enable access</Trans>
-        </Button>
-      </DialogTrigger>
-
-      <DialogContent position="center">
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Are you sure?</Trans>
-          </DialogTitle>
-
-          <DialogDescription className="mt-4">
-            <Trans>
-              You are about to give all organisation members access to this team under their
-              organisation role.
-            </Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              <Trans>Cancel</Trans>
-            </Button>
-          </DialogClose>
-
-          <Button
-            type="submit"
-            disabled={organisationGroupQuery.isPending}
-            loading={isPending}
-            onClick={enableAccessGroup}
-          >
-            <Trans>Enable</Trans>
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/team-member-create-dialog.tsx

@@ -8,8 +8,7 @@ import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
-import { TEAM_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/teams';
-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {

apps/remix/app/components/dialogs/team-member-delete-dialog.tsx

@@ -5,7 +5,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 
 import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -25,7 +25,6 @@ export type TeamMemberDeleteDialogProps = {
   memberId: string;
   memberName: string;
   memberEmail: string;
-  isInheritMemberEnabled: boolean | null;
   trigger?: React.ReactNode;
 };
 
@@ -36,7 +35,6 @@ export const TeamMemberDeleteDialog = ({
   memberId,
   memberName,
   memberEmail,
-  isInheritMemberEnabled,
 }: TeamMemberDeleteDialogProps) => {
   const [open, setOpen] = useState(false);
 
@@ -90,42 +88,29 @@ export const TeamMemberDeleteDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        {isInheritMemberEnabled ? (
-          <Alert variant="neutral">
-            <AlertDescription>
-              <Trans>
-                You cannot remove members from this team if the inherit member feature is enabled.
-              </Trans>
-            </AlertDescription>
-          </Alert>
-        ) : (
-          <Alert variant="neutral" padding="tight">
-            <AvatarWithText
-              avatarClass="h-12 w-12"
-              avatarFallback={memberName.slice(0, 1).toUpperCase()}
-              primaryText={<span className="font-semibold">{memberName}</span>}
-              secondaryText={memberEmail}
-            />
-          </Alert>
-        )}
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarFallback={memberName.slice(0, 1).toUpperCase()}
+            primaryText={<span className="font-semibold">{memberName}</span>}
+            secondaryText={memberEmail}
+          />
+        </Alert>
 
         <fieldset disabled={isDeletingTeamMember}>
           <DialogFooter>
             <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-              <Trans>Close</Trans>
+              <Trans>Cancel</Trans>
             </Button>
 
-            {!isInheritMemberEnabled && (
-              <Button
-                type="submit"
-                variant="destructive"
-                disabled={Boolean(isInheritMemberEnabled)}
-                loading={isDeletingTeamMember}
-                onClick={async () => deleteTeamMember({ teamId, memberId })}
-              >
-                <Trans>Remove</Trans>
-              </Button>
-            )}
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isDeletingTeamMember}
+              onClick={async () => deleteTeamMember({ teamId, memberId })}
+            >
+              <Trans>Remove</Trans>
+            </Button>
           </DialogFooter>
         </fieldset>
       </DialogContent>

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

@@ -9,8 +9,7 @@ import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { TEAM_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/teams';
-import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -171,7 +170,7 @@ export const TeamMemberUpdateDialog = ({
                         <SelectContent className="w-full" position="popper">
                           {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
                             <SelectItem key={role} value={role}>
-                              {_(EXTENDED_TEAM_MEMBER_ROLE_MAP[role]) ?? role}
+                              {_(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
                             </SelectItem>
                           ))}
                         </SelectContent>

apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx

@@ -114,7 +114,7 @@ export const TemplateBulkSendDialog = ({
     <Dialog>
       <DialogTrigger asChild>
         {trigger ?? (
-          <Button variant="outline">
+          <Button>
             <Upload className="mr-2 h-4 w-4" />
             <Trans>Bulk Send via CSV</Trans>
           </Button>

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-direct-link-dialog.tsx

@@ -15,7 +15,6 @@ import { P, match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { DIRECT_TEMPLATE_DOCUMENTATION } from '@documenso/lib/constants/template';
@@ -76,8 +75,6 @@ export const TemplateDirectLinkDialog = ({
     token ? 'MANAGE' : 'ONBOARD',
   );
 
-  const organisation = useCurrentOrganisation();
-
   const validDirectTemplateRecipients = useMemo(
     () =>
       template.recipients.filter(
@@ -240,7 +237,7 @@ export const TemplateDirectLinkDialog = ({
                         templates.{' '}
                         <Link
                           className="mt-1 block underline underline-offset-4"
-                          to={`/o/${organisation.url}/settings/billing`}
+                          to="/settings/billing"
                         >
                           Upgrade your account to continue!
                         </Link>

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

@@ -1,165 +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 { useCurrentTeam } 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 { folderId } = useParams();
-
-  const navigate = useNavigate();
-  const team = useCurrentTeam();
-
-  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 organise 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 { useCurrentTeam } 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 = useCurrentTeam();
-
-  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-advanced-settings.tsx

@@ -1,355 +0,0 @@
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { DocumentDistributionMethod } from '@prisma/client';
-import { InfoIcon } from 'lucide-react';
-import type { Control } from 'react-hook-form';
-import { useFormContext } from 'react-hook-form';
-
-import { DATE_FORMATS } from '@documenso/lib/constants/date-formats';
-import { DOCUMENT_SIGNATURE_TYPES } from '@documenso/lib/constants/document';
-import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
-import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
-import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
-import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
-import { Combobox } from '@documenso/ui/primitives/combobox';
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-import { Textarea } from '@documenso/ui/primitives/textarea';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
-
-import { useConfigureDocument } from './configure-document-context';
-import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
-
-interface ConfigureDocumentAdvancedSettingsProps {
-  control: Control<TConfigureEmbedFormSchema>;
-  isSubmitting: boolean;
-}
-
-export const ConfigureDocumentAdvancedSettings = ({
-  control,
-  isSubmitting,
-}: ConfigureDocumentAdvancedSettingsProps) => {
-  const { _ } = useLingui();
-
-  const form = useFormContext<TConfigureEmbedFormSchema>();
-  const { features } = useConfigureDocument();
-
-  const { watch, setValue } = form;
-
-  // Lift watch() calls to reduce re-renders
-  const distributionMethod = watch('meta.distributionMethod');
-  const emailSettings = watch('meta.emailSettings');
-  const isEmailDistribution = distributionMethod === DocumentDistributionMethod.EMAIL;
-
-  return (
-    <div>
-      <h3 className="text-foreground mb-1 text-lg font-medium">
-        <Trans>Advanced Settings</Trans>
-      </h3>
-
-      <p className="text-muted-foreground mb-6 text-sm">
-        <Trans>Configure additional options and preferences</Trans>
-      </p>
-
-      <Tabs defaultValue="general">
-        <TabsList className="mb-6 inline-flex">
-          <TabsTrigger value="general" className="px-4">
-            <Trans>General</Trans>
-          </TabsTrigger>
-
-          {features.allowConfigureCommunication && (
-            <TabsTrigger value="communication" className="px-4">
-              <Trans>Communication</Trans>
-            </TabsTrigger>
-          )}
-        </TabsList>
-
-        <TabsContent value="general" className="mt-0">
-          <div className="flex flex-col space-y-6">
-            {/* <FormField
-              control={control}
-              name="meta.externalId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="flex flex-row items-center">
-                    <Trans>External ID</Trans>
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <InfoIcon className="mx-2 h-4 w-4" />
-                      </TooltipTrigger>
-                      <TooltipContent className="text-muted-foreground max-w-xs">
-                        <Trans>
-                          Add an external ID to the document. This can be used to identify the
-                          document in external systems.
-                        </Trans>
-                      </TooltipContent>
-                    </Tooltip>
-                  </FormLabel>
-                  <FormControl>
-                    <Input className="bg-background" {...field} disabled={isSubmitting} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            /> */}
-
-            {features.allowConfigureSignatureTypes && (
-              <FormField
-                control={control}
-                name="meta.signatureTypes"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Allowed Signature Types</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <MultiSelectCombobox
-                        options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
-                          label: _(option.label),
-                          value: option.value,
-                        }))}
-                        selectedValues={field.value}
-                        onChange={field.onChange}
-                        className="bg-background w-full"
-                        emptySelectionPlaceholder="Select signature types"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            {features.allowConfigureLanguage && (
-              <FormField
-                control={control}
-                name="meta.language"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Language</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Select {...field} onValueChange={field.onChange} disabled={isSubmitting}>
-                        <SelectTrigger className="bg-background">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
-                            <SelectItem key={code} value={code}>
-                              {language.full}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            {features.allowConfigureDateFormat && (
-              <FormField
-                control={control}
-                name="meta.dateFormat"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Date Format</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Select {...field} onValueChange={field.onChange} disabled={isSubmitting}>
-                        <SelectTrigger className="bg-background">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {DATE_FORMATS.map((format) => (
-                            <SelectItem key={format.key} value={format.value}>
-                              {format.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            {features.allowConfigureTimezone && (
-              <FormField
-                control={control}
-                name="meta.timezone"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Time Zone</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Combobox
-                        className="bg-background"
-                        options={TIME_ZONES}
-                        {...field}
-                        onChange={(value) => value && field.onChange(value)}
-                        disabled={isSubmitting}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            {features.allowConfigureRedirectUrl && (
-              <FormField
-                control={control}
-                name="meta.redirectUrl"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="flex flex-row items-center">
-                      <Trans>Redirect URL</Trans>
-                      <Tooltip>
-                        <TooltipTrigger>
-                          <InfoIcon className="mx-2 h-4 w-4" />
-                        </TooltipTrigger>
-                        <TooltipContent className="text-muted-foreground max-w-xs">
-                          <Trans>
-                            Add a URL to redirect the user to once the document is signed
-                          </Trans>
-                        </TooltipContent>
-                      </Tooltip>
-                    </FormLabel>
-                    <FormControl>
-                      <Input className="bg-background" {...field} disabled={isSubmitting} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-          </div>
-        </TabsContent>
-
-        {features.allowConfigureCommunication && (
-          <TabsContent value="communication" className="mt-0">
-            <div className="flex flex-col space-y-6">
-              <FormField
-                control={control}
-                name="meta.distributionMethod"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Distribution Method</Trans>
-                    </FormLabel>
-
-                    <FormControl>
-                      <Select {...field} onValueChange={field.onChange} disabled={isSubmitting}>
-                        <SelectTrigger className="bg-background">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value={DocumentDistributionMethod.EMAIL}>
-                            <Trans>Email</Trans>
-                          </SelectItem>
-                          <SelectItem value={DocumentDistributionMethod.NONE}>
-                            <Trans>None</Trans>
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </FormControl>
-
-                    <FormDescription>
-                      <Trans>
-                        Choose how to distribute your document to recipients. Email will send
-                        notifications, None will generate signing links for manual distribution.
-                      </Trans>
-                    </FormDescription>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <fieldset
-                className="flex flex-col space-y-6 disabled:cursor-not-allowed disabled:opacity-60"
-                disabled={!isEmailDistribution}
-              >
-                <FormField
-                  control={control}
-                  name="meta.subject"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel htmlFor="subject">
-                        <Trans>
-                          Subject <span className="text-muted-foreground">(Optional)</span>
-                        </Trans>
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          id="subject"
-                          className="bg-background mt-2"
-                          disabled={isSubmitting || !isEmailDistribution}
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={control}
-                  name="meta.message"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel htmlFor="message">
-                        <Trans>
-                          Message <span className="text-muted-foreground">(Optional)</span>
-                        </Trans>
-                      </FormLabel>
-                      <FormControl>
-                        <Textarea
-                          id="message"
-                          className="bg-background mt-2 h-32 resize-none"
-                          disabled={isSubmitting || !isEmailDistribution}
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <DocumentSendEmailMessageHelper />
-
-                <DocumentEmailCheckboxes
-                  className={`mt-2 ${!isEmailDistribution ? 'pointer-events-none' : ''}`}
-                  value={emailSettings}
-                  onChange={(value) => setValue('meta.emailSettings', value)}
-                />
-              </fieldset>
-            </div>
-          </TabsContent>
-        )}
-      </Tabs>
-    </div>
-  );
-};

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

@@ -1,68 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export type ConfigureDocumentContext = {
-  // General
-  isTemplate: boolean;
-  isPersisted: boolean;
-  // Features
-  features: {
-    allowConfigureSignatureTypes?: boolean;
-    allowConfigureLanguage?: boolean;
-    allowConfigureDateFormat?: boolean;
-    allowConfigureTimezone?: boolean;
-    allowConfigureRedirectUrl?: boolean;
-    allowConfigureCommunication?: boolean;
-  };
-};
-
-const ConfigureDocumentContext = createContext<ConfigureDocumentContext | null>(null);
-
-export type ConfigureDocumentProviderProps = {
-  isTemplate?: boolean;
-  isPersisted?: boolean;
-  features: {
-    allowConfigureSignatureTypes?: boolean;
-    allowConfigureLanguage?: boolean;
-    allowConfigureDateFormat?: boolean;
-    allowConfigureTimezone?: boolean;
-    allowConfigureRedirectUrl?: boolean;
-    allowConfigureCommunication?: boolean;
-  };
-  children: React.ReactNode;
-};
-
-export const ConfigureDocumentProvider = ({
-  isTemplate,
-  isPersisted,
-  features,
-  children,
-}: ConfigureDocumentProviderProps) => {
-  return (
-    <ConfigureDocumentContext.Provider
-      value={{
-        isTemplate: isTemplate ?? false,
-        isPersisted: isPersisted ?? false,
-        features: {
-          allowConfigureSignatureTypes: features.allowConfigureSignatureTypes ?? true,
-          allowConfigureLanguage: features.allowConfigureLanguage ?? true,
-          allowConfigureDateFormat: features.allowConfigureDateFormat ?? true,
-          allowConfigureTimezone: features.allowConfigureTimezone ?? true,
-          allowConfigureRedirectUrl: features.allowConfigureRedirectUrl ?? true,
-          allowConfigureCommunication: features.allowConfigureCommunication ?? true,
-        },
-      }}
-    >
-      {children}
-    </ConfigureDocumentContext.Provider>
-  );
-};
-
-export const useConfigureDocument = () => {
-  const context = useContext(ConfigureDocumentContext);
-
-  if (!context) {
-    throw new Error('useConfigureDocument must be used within a ConfigureDocumentProvider');
-  }
-
-  return context;
-};

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

@@ -1,413 +0,0 @@
-import { useCallback, useRef } from 'react';
-
-import type { DropResult, SensorAPI } from '@hello-pangea/dnd';
-import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
-import { motion } from 'framer-motion';
-import { GripVertical, HelpCircle, Plus, Trash } from 'lucide-react';
-import { nanoid } from 'nanoid';
-import type { Control } from 'react-hook-form';
-import { useFieldArray, useFormContext, useFormState } from 'react-hook-form';
-
-import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Checkbox } from '@documenso/ui/primitives/checkbox';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
-
-import { useConfigureDocument } from './configure-document-context';
-import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
-
-// Define a type for signer items
-type SignerItem = TConfigureEmbedFormSchema['signers'][number];
-
-export interface ConfigureDocumentRecipientsProps {
-  control: Control<TConfigureEmbedFormSchema>;
-  isSubmitting: boolean;
-}
-
-export const ConfigureDocumentRecipients = ({
-  control,
-  isSubmitting,
-}: ConfigureDocumentRecipientsProps) => {
-  const { _ } = useLingui();
-  const { isTemplate } = useConfigureDocument();
-
-  const $sensorApi = useRef<SensorAPI | null>(null);
-
-  const {
-    fields: signers,
-    append: appendSigner,
-    remove: removeSigner,
-    replace,
-    move,
-  } = useFieldArray({
-    control,
-    name: 'signers',
-  });
-
-  const { getValues, watch, setValue } = useFormContext<TConfigureEmbedFormSchema>();
-
-  const signingOrder = watch('meta.signingOrder');
-
-  const { errors } = useFormState({
-    control,
-  });
-
-  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,
-    });
-  }, [appendSigner, signers]);
-
-  const isSigningOrderEnabled = signingOrder === DocumentSigningOrder.SEQUENTIAL;
-
-  const handleSigningOrderChange = useCallback(
-    (index: number, newOrderString: string) => {
-      const trimmedOrderString = newOrderString.trim();
-      if (!trimmedOrderString) {
-        return;
-      }
-
-      const newOrder = Number(trimmedOrderString);
-      if (!Number.isInteger(newOrder) || newOrder < 1) {
-        return;
-      }
-
-      // Get current form values to preserve unsaved input data
-      const currentSigners = getValues('signers') || [...signers];
-      const signer = currentSigners[index];
-
-      // Remove signer from current position and insert at new position
-      const remainingSigners = currentSigners.filter((_: unknown, idx: number) => idx !== index);
-      const newPosition = Math.min(Math.max(0, newOrder - 1), currentSigners.length - 1);
-      remainingSigners.splice(newPosition, 0, signer);
-
-      // Update signing order for each item
-      const updatedSigners = remainingSigners.map((s: SignerItem, idx: number) => ({
-        ...s,
-        signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? idx + 1 : undefined,
-      }));
-
-      // Update the form
-      replace(updatedSigners);
-    },
-    [signers, replace, getValues],
-  );
-
-  const onDragEnd = useCallback(
-    (result: DropResult) => {
-      if (!result.destination) return;
-
-      // Use the move function from useFieldArray which preserves input values
-      move(result.source.index, result.destination.index);
-
-      // Update signing orders after move
-      const currentSigners = getValues('signers');
-      const updatedSigners = currentSigners.map((signer: SignerItem, index: number) => ({
-        ...signer,
-        signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? index + 1 : undefined,
-      }));
-
-      // Update the form with new ordering
-      replace(updatedSigners);
-    },
-    [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">
-        <Trans>Recipients</Trans>
-      </h3>
-
-      <p className="text-muted-foreground mb-6 text-sm">
-        <Trans>Add signers and configure signing preferences</Trans>
-      </p>
-
-      <FormField
-        control={control}
-        name="meta.signingOrder"
-        render={({ field }) => (
-          <FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
-            <FormControl>
-              <Checkbox
-                {...field}
-                id="signingOrder"
-                checked={field.value === DocumentSigningOrder.SEQUENTIAL}
-                onCheckedChange={(checked) =>
-                  onSigningOrderChange(
-                    checked ? DocumentSigningOrder.SEQUENTIAL : DocumentSigningOrder.PARALLEL,
-                  )
-                }
-                disabled={isSubmitting}
-              />
-            </FormControl>
-            <FormLabel
-              htmlFor="signingOrder"
-              className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              <Trans>Enable signing order</Trans>
-            </FormLabel>
-          </FormItem>
-        )}
-      />
-
-      <FormField
-        control={control}
-        name="meta.allowDictateNextSigner"
-        render={({ field: { value, ...field } }) => (
-          <FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
-            <FormControl>
-              <Checkbox
-                {...field}
-                id="allowDictateNextSigner"
-                checked={value}
-                onCheckedChange={field.onChange}
-                disabled={isSubmitting || !isSigningOrderEnabled}
-              />
-            </FormControl>
-
-            <div className="flex items-center">
-              <FormLabel
-                htmlFor="allowDictateNextSigner"
-                className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              >
-                <Trans>Allow signers to dictate next signer</Trans>
-              </FormLabel>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="text-muted-foreground ml-1 cursor-help">
-                    <HelpCircle className="h-3.5 w-3.5" />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent className="max-w-80 p-4">
-                  <p>
-                    <Trans>
-                      When enabled, signers can choose who should sign next in the sequence instead
-                      of following the predefined order.
-                    </Trans>
-                  </p>
-                </TooltipContent>
-              </Tooltip>
-            </div>
-          </FormItem>
-        )}
-      />
-
-      <DragDropContext
-        onDragEnd={onDragEnd}
-        sensors={[
-          (api: SensorAPI) => {
-            $sensorApi.current = api;
-          },
-        ]}
-      >
-        <Droppable droppableId="signers">
-          {(provided) => (
-            <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-2">
-              {signers.map((signer, index) => (
-                <Draggable
-                  key={signer.id}
-                  draggableId={signer.id}
-                  index={index}
-                  isDragDisabled={!isSigningOrderEnabled || isSubmitting || signer.disabled}
-                >
-                  {(provided, snapshot) => (
-                    <fieldset
-                      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,
-                      })}
-                    >
-                      <motion.div
-                        className={cn('flex items-end gap-2 pb-2', {
-                          'border-destructive/50': errors?.signers?.[index],
-                        })}
-                      >
-                        {isSigningOrderEnabled && (
-                          <FormField
-                            control={control}
-                            name={`signers.${index}.signingOrder`}
-                            render={({ field }) => (
-                              <FormItem
-                                className={cn('flex w-16 flex-none items-center gap-x-1', {
-                                  'mb-6':
-                                    errors?.signers?.[index] &&
-                                    !errors?.signers?.[index]?.signingOrder,
-                                })}
-                              >
-                                <GripVertical className="h-5 w-5 flex-shrink-0 opacity-40" />
-                                <FormControl>
-                                  <Input
-                                    type="number"
-                                    max={signers.length}
-                                    min={1}
-                                    className="w-full text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                                    {...field}
-                                    disabled={isSubmitting || snapshot.isDragging}
-                                    onChange={(e) => {
-                                      field.onChange(e);
-                                    }}
-                                    onBlur={(e) => {
-                                      field.onBlur();
-                                      handleSigningOrderChange(index, e.target.value);
-                                    }}
-                                  />
-                                </FormControl>
-                                <FormMessage />
-                              </FormItem>
-                            )}
-                          />
-                        )}
-
-                        <FormField
-                          control={control}
-                          name={`signers.${index}.name`}
-                          render={({ field }) => (
-                            <FormItem
-                              className={cn('flex-1', {
-                                'mb-6': errors?.signers?.[index] && !errors?.signers?.[index]?.name,
-                              })}
-                            >
-                              <FormLabel className="sr-only">
-                                <Trans>Name</Trans>
-                              </FormLabel>
-                              <FormControl>
-                                <Input
-                                  placeholder={_(msg`Name`)}
-                                  className="w-full"
-                                  {...field}
-                                  disabled={isSubmitting || snapshot.isDragging}
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        <FormField
-                          control={control}
-                          name={`signers.${index}.email`}
-                          render={({ field }) => (
-                            <FormItem
-                              className={cn('flex-1', {
-                                'mb-6':
-                                  errors?.signers?.[index] && !errors?.signers?.[index]?.email,
-                              })}
-                            >
-                              <FormLabel className="sr-only">
-                                <Trans>Email</Trans>
-                              </FormLabel>
-                              <FormControl>
-                                <Input
-                                  type="email"
-                                  placeholder={_(msg`Email`)}
-                                  className="w-full"
-                                  {...field}
-                                  disabled={isSubmitting || snapshot.isDragging}
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        <FormField
-                          control={control}
-                          name={`signers.${index}.role`}
-                          render={({ field }) => (
-                            <FormItem
-                              className={cn('flex-none', {
-                                'mb-6': errors?.signers?.[index] && !errors?.signers?.[index]?.role,
-                              })}
-                            >
-                              <FormLabel className="sr-only">
-                                <Trans>Role</Trans>
-                              </FormLabel>
-                              <FormControl>
-                                <RecipientRoleSelect
-                                  {...field}
-                                  isAssistantEnabled={isSigningOrderEnabled}
-                                  onValueChange={field.onChange}
-                                  disabled={isSubmitting || snapshot.isDragging || signer.disabled}
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          disabled={
-                            isSubmitting ||
-                            signers.length === 1 ||
-                            snapshot.isDragging ||
-                            signer.disabled
-                          }
-                          onClick={() => removeSigner(index)}
-                        >
-                          <Trash className="h-4 w-4" />
-                        </Button>
-                      </motion.div>
-                    </fieldset>
-                  )}
-                </Draggable>
-              ))}
-              {provided.placeholder}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
-
-      <div className="mt-4 flex justify-end">
-        <Button
-          type="button"
-          variant="outline"
-          className="w-auto"
-          disabled={isSubmitting}
-          onClick={onAddSigner}
-        >
-          <Plus className="-ml-1 mr-2 h-5 w-5" />
-          <Trans>Add Signer</Trans>
-        </Button>
-      </div>
-    </div>
-  );
-};

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

@@ -1,238 +0,0 @@
-import { useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { Cloud, FileText, Loader, X } from 'lucide-react';
-import { useDropzone } from 'react-dropzone';
-import { useFormContext } from 'react-hook-form';
-
-import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useConfigureDocument } from './configure-document-context';
-import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
-
-export interface ConfigureDocumentUploadProps {
-  isSubmitting?: boolean;
-}
-
-export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocumentUploadProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { isPersisted } = useConfigureDocument();
-
-  const form = useFormContext<TConfigureEmbedFormSchema>();
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Watch the documentData field from the form
-  const documentData = form.watch('documentData');
-
-  const onFileDrop = async (acceptedFiles: File[]) => {
-    try {
-      const file = acceptedFiles[0];
-
-      if (!file) {
-        return;
-      }
-
-      setIsLoading(true);
-
-      // Convert file to UInt8Array
-      const arrayBuffer = await file.arrayBuffer();
-      const uint8Array = new Uint8Array(arrayBuffer);
-
-      // Store file metadata and UInt8Array in form data
-      form.setValue('documentData', {
-        name: file.name,
-        type: file.type,
-        size: file.size,
-        data: uint8Array, // Store as UInt8Array
-      });
-
-      // Auto-populate title if it's empty
-      const currentTitle = form.getValues('title');
-
-      if (!currentTitle) {
-        // Get filename without extension
-        const fileNameWithoutExtension = file.name.replace(/\.[^/.]+$/, '');
-        form.setValue('title', fileNameWithoutExtension);
-      }
-    } catch (error) {
-      console.error('Error uploading file', error);
-
-      toast({
-        title: _(msg`Error uploading file`),
-        description: _(msg`There was an error uploading your file. Please try again.`),
-        variant: 'destructive',
-        duration: 5000,
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const onDropRejected = () => {
-    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 onRemoveFile = () => {
-    if (isPersisted) {
-      toast({
-        title: _(msg`Cannot remove document`),
-        description: _(msg`The document is already saved and cannot be changed.`),
-        duration: 5000,
-        variant: 'destructive',
-      });
-      return;
-    }
-
-    form.unregister('documentData');
-  };
-
-  const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 Bytes';
-
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`;
-  };
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: {
-      'application/pdf': ['.pdf'],
-    },
-    maxSize: APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024,
-    multiple: false,
-    disabled: isSubmitting || isLoading || isPersisted,
-    onDrop: (files) => {
-      void onFileDrop(files);
-    },
-    onDropRejected,
-  });
-
-  return (
-    <div>
-      <FormField
-        control={form.control}
-        name="documentData"
-        render={() => (
-          <FormItem>
-            <FormLabel required>
-              <Trans>Upload Document</Trans>
-            </FormLabel>
-
-            <div className="relative">
-              {!documentData ? (
-                <div className="relative">
-                  <FormControl>
-                    <div
-                      {...getRootProps()}
-                      className={cn(
-                        'border-border bg-background relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed transition',
-                        {
-                          'border-primary/50 bg-primary/5': isDragActive,
-                          'hover:bg-muted/30':
-                            !isDragActive && !isSubmitting && !isLoading && !isPersisted,
-                          'cursor-not-allowed opacity-60': isSubmitting || isLoading || isPersisted,
-                        },
-                      )}
-                    >
-                      <input {...getInputProps()} />
-
-                      <div className="flex flex-col items-center justify-center gap-y-2 px-4 py-4 text-center">
-                        <Cloud
-                          className={cn('h-10 w-10', {
-                            'text-primary': isDragActive,
-                            'text-muted-foreground': !isDragActive,
-                          })}
-                        />
-
-                        <div
-                          className={cn('flex flex-col space-y-1', {
-                            'text-primary': isDragActive,
-                            'text-muted-foreground': !isDragActive,
-                          })}
-                        >
-                          <p className="text-sm font-medium">
-                            {isDragActive ? (
-                              <Trans>Drop your document here</Trans>
-                            ) : isPersisted ? (
-                              <Trans>Document is already uploaded</Trans>
-                            ) : (
-                              <Trans>Drag and drop or click to upload</Trans>
-                            )}
-                          </p>
-                          <p className="text-xs">
-                            {isPersisted ? (
-                              <Trans>This document cannot be changed</Trans>
-                            ) : (
-                              <Trans>
-                                .PDF documents accepted (max {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB)
-                              </Trans>
-                            )}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </FormControl>
-
-                  {isLoading && (
-                    <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
-                      <Loader className="text-muted-foreground h-10 w-10 animate-spin" />
-                    </div>
-                  )}
-                </div>
-              ) : (
-                <div className="mt-2 rounded-lg border p-4">
-                  <div className="flex items-center gap-x-4">
-                    <div className="bg-primary/10 text-primary flex h-12 w-12 items-center justify-center rounded-md">
-                      <FileText className="h-6 w-6" />
-                    </div>
-
-                    <div className="flex-1">
-                      <div className="text-sm font-medium">{documentData.name}</div>
-                      <div className="text-muted-foreground text-xs">
-                        {formatFileSize(documentData.size)}
-                      </div>
-                    </div>
-
-                    {!isPersisted && (
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        onClick={onRemoveFile}
-                        disabled={isSubmitting}
-                        className="h-8 w-8 p-0"
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </div>
-  );
-};

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

@@ -1,137 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/react/macro';
-import { DocumentDistributionMethod, DocumentSigningOrder, RecipientRole } from '@prisma/client';
-import { nanoid } from 'nanoid';
-import { useForm } from 'react-hook-form';
-
-import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
-import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-
-import { ConfigureDocumentAdvancedSettings } from './configure-document-advanced-settings';
-import { useConfigureDocument } from './configure-document-context';
-import { ConfigureDocumentRecipients } from './configure-document-recipients';
-import { ConfigureDocumentUpload } from './configure-document-upload';
-import {
-  type TConfigureEmbedFormSchema,
-  ZConfigureEmbedFormSchema,
-} from './configure-document-view.types';
-
-export interface ConfigureDocumentViewProps {
-  onSubmit: (data: TConfigureEmbedFormSchema) => void | Promise<void>;
-  defaultValues?: Partial<TConfigureEmbedFormSchema>;
-  disableUpload?: boolean;
-  isSubmitting?: boolean;
-}
-
-export const ConfigureDocumentView = ({
-  onSubmit,
-  defaultValues,
-  disableUpload,
-}: ConfigureDocumentViewProps) => {
-  const { isTemplate } = useConfigureDocument();
-
-  const form = useForm<TConfigureEmbedFormSchema>({
-    resolver: zodResolver(ZConfigureEmbedFormSchema),
-    defaultValues: {
-      title: defaultValues?.title || '',
-      signers: defaultValues?.signers || [
-        {
-          formId: nanoid(8),
-          name: isTemplate ? `Recipient ${1}` : '',
-          email: isTemplate ? `recipient.${1}@document.com` : '',
-          role: RecipientRole.SIGNER,
-          signingOrder: 1,
-          disabled: false,
-        },
-      ],
-      meta: {
-        subject: defaultValues?.meta?.subject || '',
-        message: defaultValues?.meta?.message || '',
-        distributionMethod:
-          defaultValues?.meta?.distributionMethod || DocumentDistributionMethod.EMAIL,
-        emailSettings: defaultValues?.meta?.emailSettings || ZDocumentEmailSettingsSchema.parse({}),
-        dateFormat: defaultValues?.meta?.dateFormat || DEFAULT_DOCUMENT_DATE_FORMAT,
-        timezone: defaultValues?.meta?.timezone || DEFAULT_DOCUMENT_TIME_ZONE,
-        redirectUrl: defaultValues?.meta?.redirectUrl || '',
-        language: defaultValues?.meta?.language || 'en',
-        signatureTypes: defaultValues?.meta?.signatureTypes || [],
-        signingOrder: defaultValues?.meta?.signingOrder || DocumentSigningOrder.PARALLEL,
-        allowDictateNextSigner: defaultValues?.meta?.allowDictateNextSigner || false,
-        externalId: defaultValues?.meta?.externalId || '',
-      },
-      documentData: defaultValues?.documentData,
-    },
-  });
-
-  const { control, handleSubmit } = form;
-
-  const isSubmitting = form.formState.isSubmitting;
-
-  const onFormSubmit = handleSubmit(onSubmit);
-
-  return (
-    <div className="flex w-full flex-col space-y-8">
-      <div>
-        <h2 className="text-foreground mb-1 text-xl font-semibold">
-          {isTemplate ? <Trans>Configure Template</Trans> : <Trans>Configure Document</Trans>}
-        </h2>
-
-        <p className="text-muted-foreground text-sm">
-          {isTemplate ? (
-            <Trans>Set up your template properties and recipient information</Trans>
-          ) : (
-            <Trans>Set up your document properties and recipient information</Trans>
-          )}
-        </p>
-      </div>
-
-      <Form {...form}>
-        <div className="flex flex-col space-y-8">
-          <div>
-            <FormField
-              control={control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>
-                    <Trans>Title</Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <Input {...field} disabled={isSubmitting} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-
-          {!disableUpload && <ConfigureDocumentUpload isSubmitting={isSubmitting} />}
-          <ConfigureDocumentRecipients control={control} isSubmitting={isSubmitting} />
-          <ConfigureDocumentAdvancedSettings control={control} isSubmitting={isSubmitting} />
-
-          <div className="flex justify-end">
-            <Button
-              type="button"
-              onClick={onFormSubmit}
-              disabled={isSubmitting}
-              className="w-full sm:w-auto"
-            >
-              <Trans>Continue</Trans>
-            </Button>
-          </div>
-        </div>
-      </Form>
-    </div>
-  );
-};

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

@@ -1,50 +0,0 @@
-import { z } from 'zod';
-
-import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
-import { DocumentDistributionMethod } from '@documenso/prisma/generated/types';
-import {
-  ZDocumentMetaDateFormatSchema,
-  ZDocumentMetaLanguageSchema,
-} from '@documenso/trpc/server/document-router/schema';
-
-// Define the schema for configuration
-export type TConfigureEmbedFormSchema = z.infer<typeof ZConfigureEmbedFormSchema>;
-
-export const ZConfigureEmbedFormSchema = z.object({
-  title: z.string().min(1, { message: 'Title is required' }),
-  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' }),
-  meta: z.object({
-    subject: z.string().optional(),
-    message: z.string().optional(),
-    distributionMethod: z.nativeEnum(DocumentDistributionMethod),
-    emailSettings: ZDocumentEmailSettingsSchema,
-    dateFormat: ZDocumentMetaDateFormatSchema.optional(),
-    timezone: z.string().min(1, 'Timezone is required'),
-    redirectUrl: z.string().optional(),
-    language: ZDocumentMetaLanguageSchema.optional(),
-    signatureTypes: z.array(z.string()).default([]),
-    signingOrder: z.enum(['SEQUENTIAL', 'PARALLEL']),
-    allowDictateNextSigner: z.boolean().default(false).optional(),
-    externalId: z.string().optional(),
-  }),
-  documentData: z
-    .object({
-      name: z.string(),
-      type: z.string(),
-      size: z.number(),
-      data: z.instanceof(Uint8Array), // UInt8Array can't be directly validated by zod
-    })
-    .optional(),
-});

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

@@ -1,672 +0,0 @@
-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 { ChevronsUpDown } from 'lucide-react';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { useHotkeys } from 'react-hotkeys-hook';
-
-import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
-import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import { base64 } from '@documenso/lib/universal/base64';
-import { nanoid } from '@documenso/lib/universal/id';
-import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
-import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { FieldItem } from '@documenso/ui/primitives/document-flow/field-item';
-import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
-import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { FieldSelector } from '@documenso/ui/primitives/field-selector';
-import { Form } from '@documenso/ui/primitives/form/form';
-import PDFViewer from '@documenso/ui/primitives/pdf-viewer';
-import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
-import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
-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;
-const MIN_WIDTH_PX = 36;
-
-const DEFAULT_HEIGHT_PX = MIN_HEIGHT_PX * 2.5;
-const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
-
-export type ConfigureFieldsViewProps = {
-  configData: TConfigureEmbedFormSchema;
-  documentData?: DocumentData;
-  defaultValues?: Partial<TConfigureFieldsFormSchema>;
-  onBack: (data: TConfigureFieldsFormSchema) => void;
-  onSubmit: (data: TConfigureFieldsFormSchema) => void;
-};
-
-export const ConfigureFieldsView = ({
-  configData,
-  documentData,
-  defaultValues,
-  onBack,
-  onSubmit,
-}: ConfigureFieldsViewProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
-
-  // Track if we're on a mobile device
-  const [isMobile, setIsMobile] = useState(false);
-
-  // State for managing the mobile drawer
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-
-  // Check for mobile viewport on component mount and resize
-  useEffect(() => {
-    const checkIfMobile = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-
-    // Initial check
-    checkIfMobile();
-
-    // Add resize listener
-    window.addEventListener('resize', checkIfMobile);
-
-    // Cleanup
-    return () => {
-      window.removeEventListener('resize', checkIfMobile);
-    };
-  }, []);
-
-  const normalizedDocumentData = useMemo(() => {
-    if (documentData) {
-      return documentData;
-    }
-
-    if (!configData.documentData) {
-      return null;
-    }
-
-    const data = base64.encode(configData.documentData?.data);
-
-    return {
-      id: 'preview',
-      type: 'BYTES_64',
-      data,
-      initialData: data,
-    } satisfies DocumentData;
-  }, [configData.documentData]);
-
-  const recipients = useMemo(() => {
-    return configData.signers.map<Recipient>((signer, index) => ({
-      id: signer.nativeId || index,
-      name: signer.name || '',
-      email: signer.email || '',
-      role: signer.role,
-      signingOrder: signer.signingOrder || null,
-      documentId: null,
-      templateId: null,
-      token: '',
-      documentDeletedAt: null,
-      expired: null,
-      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,
-    }));
-  }, [configData.signers]);
-
-  const [selectedRecipient, setSelectedRecipient] = useState<Recipient | null>(
-    () => recipients.find((r) => r.signingStatus === SigningStatus.NOT_SIGNED) || null,
-  );
-  const [selectedField, setSelectedField] = useState<FieldType | null>(null);
-  const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
-  const [coords, setCoords] = useState({
-    x: 0,
-    y: 0,
-  });
-  const [activeFieldId, setActiveFieldId] = useState<string | null>(null);
-  const [lastActiveField, setLastActiveField] = useState<
-    TConfigureFieldsFormSchema['fields'][0] | null
-  >(null);
-  const [fieldClipboard, setFieldClipboard] = useState<
-    TConfigureFieldsFormSchema['fields'][0] | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [currentField, setCurrentField] = useState<TConfigureFieldsFormSchema['fields'][0] | null>(
-    null,
-  );
-
-  const fieldBounds = useRef({
-    height: DEFAULT_HEIGHT_PX,
-    width: DEFAULT_WIDTH_PX,
-  });
-
-  const selectedRecipientIndex = recipients.findIndex((r) => r.id === selectedRecipient?.id);
-  const selectedRecipientStyles = useRecipientColors(
-    selectedRecipientIndex === -1 ? 0 : selectedRecipientIndex,
-  );
-
-  const form = useForm<TConfigureFieldsFormSchema>({
-    defaultValues: {
-      fields: defaultValues?.fields ?? [],
-    },
-  });
-
-  const { control, handleSubmit } = form;
-
-  const onFormSubmit = handleSubmit(onSubmit);
-
-  const {
-    append,
-    remove,
-    update,
-    fields: localFields,
-  } = useFieldArray({
-    control: control,
-    name: 'fields',
-  });
-
-  const onFieldCopy = useCallback(
-    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
-      const { duplicate = false, duplicateAll = 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,
-          };
-
-          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);
-          });
-
-          return;
-        }
-
-        setFieldClipboard(lastActiveField);
-
-        toast({
-          title: 'Copied field',
-          description: 'Copied field to clipboard',
-        });
-      }
-    },
-    [append, lastActiveField, selectedRecipient?.email, selectedRecipient?.id, toast],
-  );
-
-  const onFieldPaste = useCallback(
-    (event: KeyboardEvent) => {
-      if (fieldClipboard) {
-        event.preventDefault();
-
-        const copiedField = structuredClone(fieldClipboard);
-
-        append({
-          ...copiedField,
-          nativeId: undefined,
-          formId: nanoid(12),
-          signerEmail: selectedRecipient?.email ?? copiedField.signerEmail,
-          recipientId: selectedRecipient?.id ?? copiedField.recipientId,
-          pageX: copiedField.pageX + 3,
-          pageY: copiedField.pageY + 3,
-        });
-      }
-    },
-    [append, fieldClipboard, selectedRecipient?.email, selectedRecipient?.id],
-  );
-
-  useHotkeys(['ctrl+c', 'meta+c'], (evt) => onFieldCopy(evt));
-  useHotkeys(['ctrl+v', 'meta+v'], (evt) => onFieldPaste(evt));
-  useHotkeys(['ctrl+d', 'meta+d'], (evt) => onFieldCopy(evt, { duplicate: true }));
-
-  const onMouseMove = useCallback(
-    (event: MouseEvent) => {
-      if (!selectedField) return;
-
-      setIsFieldWithinBounds(
-        isWithinPageBounds(
-          event,
-          PDF_VIEWER_PAGE_SELECTOR,
-          fieldBounds.current.width,
-          fieldBounds.current.height,
-        ),
-      );
-
-      setCoords({
-        x: event.clientX - fieldBounds.current.width / 2,
-        y: event.clientY - fieldBounds.current.height / 2,
-      });
-    },
-    [isWithinPageBounds, selectedField],
-  );
-
-  const onMouseClick = useCallback(
-    (event: MouseEvent) => {
-      if (!selectedField || !selectedRecipient) {
-        return;
-      }
-
-      const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
-
-      if (
-        !$page ||
-        !isWithinPageBounds(
-          event,
-          PDF_VIEWER_PAGE_SELECTOR,
-          fieldBounds.current.width,
-          fieldBounds.current.height,
-        )
-      ) {
-        return;
-      }
-
-      const { top, left, height, width } = getBoundingClientRect($page);
-
-      const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10);
-
-      // Calculate x and y as a percentage of the page width and height
-      let pageX = ((event.pageX - left) / width) * 100;
-      let pageY = ((event.pageY - top) / height) * 100;
-
-      // Get the bounds as a percentage of the page width and height
-      const fieldPageWidth = (fieldBounds.current.width / width) * 100;
-      const fieldPageHeight = (fieldBounds.current.height / height) * 100;
-
-      // And center it based on the bounds
-      pageX -= fieldPageWidth / 2;
-      pageY -= fieldPageHeight / 2;
-
-      const field = {
-        formId: nanoid(12),
-        type: selectedField,
-        pageNumber,
-        pageX,
-        pageY,
-        pageWidth: fieldPageWidth,
-        pageHeight: fieldPageHeight,
-        recipientId: selectedRecipient.id,
-        signerEmail: selectedRecipient.email,
-        fieldMeta: undefined,
-      };
-
-      append(field);
-
-      // Automatically open advanced settings for field types that need configuration
-      if (ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING.includes(selectedField)) {
-        setCurrentField(field);
-        setShowAdvancedSettings(true);
-      }
-
-      setSelectedField(null);
-    },
-    [append, getPage, isWithinPageBounds, selectedField, selectedRecipient],
-  );
-
-  const onFieldResize = useCallback(
-    (node: HTMLElement, index: number) => {
-      const field = localFields[index];
-
-      const $page = window.document.querySelector<HTMLElement>(
-        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
-      );
-
-      if (!$page) {
-        return;
-      }
-
-      const {
-        x: pageX,
-        y: pageY,
-        width: pageWidth,
-        height: pageHeight,
-      } = getFieldPosition($page, node);
-
-      update(index, {
-        ...field,
-        pageX,
-        pageY,
-        pageWidth,
-        pageHeight,
-      });
-    },
-    [getFieldPosition, localFields, update],
-  );
-
-  const onFieldMove = useCallback(
-    (node: HTMLElement, index: number) => {
-      const field = localFields[index];
-
-      const $page = window.document.querySelector<HTMLElement>(
-        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
-      );
-
-      if (!$page) {
-        return;
-      }
-
-      const { x: pageX, y: pageY } = getFieldPosition($page, node);
-
-      update(index, {
-        ...field,
-        pageX,
-        pageY,
-      });
-    },
-    [getFieldPosition, localFields, update],
-  );
-
-  const handleUpdateFieldMeta = useCallback(
-    (formId: string, fieldMeta: TFieldMetaSchema) => {
-      const fieldIndex = localFields.findIndex((field) => field.formId === formId);
-
-      if (fieldIndex !== -1) {
-        const parsedFieldMeta = ZFieldMetaSchema.parse(fieldMeta);
-
-        update(fieldIndex, {
-          ...localFields[fieldIndex],
-          fieldMeta: parsedFieldMeta,
-        });
-      }
-    },
-    [localFields, update],
-  );
-
-  useEffect(() => {
-    if (selectedField) {
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('mouseup', onMouseClick);
-    }
-
-    return () => {
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', onMouseClick);
-    };
-  }, [onMouseClick, onMouseMove, selectedField]);
-
-  useEffect(() => {
-    const observer = new MutationObserver((_mutations) => {
-      const $page = document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
-
-      if (!$page) {
-        return;
-      }
-
-      fieldBounds.current = {
-        height: Math.max(DEFAULT_HEIGHT_PX),
-        width: Math.max(DEFAULT_WIDTH_PX),
-      };
-    });
-
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  // Close drawer when a field is selected on mobile
-  useEffect(() => {
-    if (isMobile && selectedField) {
-      setIsDrawerOpen(false);
-    }
-  }, [isMobile, selectedField]);
-
-  return (
-    <>
-      <div className="grid w-full grid-cols-12 gap-4">
-        {/* Desktop sidebar */}
-        {!isMobile && (
-          <div className="order-2 col-span-12 md:order-1 md:col-span-4">
-            <div className="bg-widget border-border sticky top-4 max-h-[calc(100vh-2rem)] rounded-lg border p-4 pb-6">
-              <h2 className="mb-1 text-lg font-medium">
-                <Trans>Configure Fields</Trans>
-              </h2>
-
-              <p className="text-muted-foreground mb-6 text-sm">
-                <Trans>Configure the fields you want to place on the document.</Trans>
-              </p>
-
-              <RecipientSelector
-                selectedRecipient={selectedRecipient}
-                onSelectedRecipientChange={setSelectedRecipient}
-                recipients={recipients}
-                className="w-full"
-              />
-
-              <hr className="my-6" />
-
-              <div className="space-y-2">
-                <FieldSelector
-                  selectedField={selectedField}
-                  onSelectedFieldChange={setSelectedField}
-                  className="w-full"
-                  disabled={!selectedRecipient}
-                />
-              </div>
-
-              <div className="mt-6 flex gap-2">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  className="flex-1"
-                  loading={form.formState.isSubmitting}
-                  onClick={() => onBack(form.getValues())}
-                >
-                  <Trans>Back</Trans>
-                </Button>
-
-                <Button
-                  className="flex-1"
-                  type="button"
-                  loading={form.formState.isSubmitting}
-                  disabled={!form.formState.isValid}
-                  onClick={async () => onFormSubmit()}
-                >
-                  <Trans>Save</Trans>
-                </Button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        <div className={cn('order-1 col-span-12 md:order-2', !isMobile && 'md:col-span-8')}>
-          <div className="relative">
-            {selectedField && (
-              <div
-                className={cn(
-                  'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
-                  selectedRecipientStyles.base,
-                  {
-                    '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
-                    'dark:text-black/60': isFieldWithinBounds,
-                  },
-                  selectedField === 'SIGNATURE' && 'font-signature',
-                )}
-                style={{
-                  top: coords.y,
-                  left: coords.x,
-                  height: fieldBounds.current.height,
-                  width: fieldBounds.current.width,
-                }}
-              >
-                <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
-                  {_(FRIENDLY_FIELD_TYPE[selectedField])}
-                </span>
-              </div>
-            )}
-
-            <Form {...form}>
-              {normalizedDocumentData && (
-                <div>
-                  <PDFViewer documentData={normalizedDocumentData} />
-
-                  <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-                    {localFields.map((field, index) => {
-                      const recipientIndex = recipients.findIndex(
-                        (r) => r.id === field.recipientId,
-                      );
-
-                      return (
-                        <FieldItem
-                          key={field.formId}
-                          field={field}
-                          minHeight={MIN_HEIGHT_PX}
-                          minWidth={MIN_WIDTH_PX}
-                          defaultHeight={DEFAULT_HEIGHT_PX}
-                          defaultWidth={DEFAULT_WIDTH_PX}
-                          onResize={(node) => onFieldResize(node, index)}
-                          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={() => {
-                            setCurrentField(field);
-                            setShowAdvancedSettings(true);
-                          }}
-                          recipientIndex={recipientIndex}
-                          active={activeFieldId === field.formId}
-                          onFieldActivate={() => setActiveFieldId(field.formId)}
-                          onFieldDeactivate={() => setActiveFieldId(null)}
-                          disabled={selectedRecipient?.id !== field.recipientId}
-                        />
-                      );
-                    })}
-                  </ElementVisible>
-                </div>
-              )}
-            </Form>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile Floating Action Bar and Drawer */}
-      {isMobile && (
-        <Sheet open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
-          <SheetTrigger asChild>
-            <div className="bg-widget border-border fixed bottom-6 left-6 right-6 z-50 flex items-center justify-between gap-2 rounded-lg border p-4">
-              <span className="text-lg font-medium">
-                <Trans>Configure Fields</Trans>
-              </span>
-
-              <button
-                type="button"
-                className="border-border text-muted-foreground inline-flex h-10 w-10 items-center justify-center rounded-lg border"
-              >
-                <ChevronsUpDown className="h-6 w-6" />
-              </button>
-            </div>
-          </SheetTrigger>
-
-          <SheetContent
-            position="bottom"
-            size="xl"
-            className="bg-widget h-fit max-h-[80vh] overflow-y-auto rounded-t-xl p-4"
-          >
-            <h2 className="mb-1 text-lg font-medium">
-              <Trans>Configure Fields</Trans>
-            </h2>
-
-            <p className="text-muted-foreground mb-6 text-sm">
-              <Trans>Configure the fields you want to place on the document.</Trans>
-            </p>
-
-            <RecipientSelector
-              selectedRecipient={selectedRecipient}
-              onSelectedRecipientChange={setSelectedRecipient}
-              recipients={recipients}
-              className="w-full"
-            />
-
-            <hr className="my-6" />
-
-            <div className="space-y-2">
-              <FieldSelector
-                selectedField={selectedField}
-                onSelectedFieldChange={(field) => {
-                  setSelectedField(field);
-                  if (field) {
-                    setIsDrawerOpen(false);
-                  }
-                }}
-                className="w-full"
-                disabled={!selectedRecipient}
-              />
-            </div>
-
-            <div className="mt-6 flex gap-2">
-              <Button
-                type="button"
-                variant="ghost"
-                className="flex-1"
-                loading={form.formState.isSubmitting}
-                onClick={() => onBack(form.getValues())}
-              >
-                <Trans>Back</Trans>
-              </Button>
-
-              <Button
-                className="flex-1"
-                type="button"
-                loading={form.formState.isSubmitting}
-                disabled={!form.formState.isValid}
-                onClick={async () => onFormSubmit()}
-              >
-                <Trans>Save</Trans>
-              </Button>
-            </div>
-          </SheetContent>
-        </Sheet>
-      )}
-
-      <FieldAdvancedSettingsDrawer
-        isOpen={showAdvancedSettings}
-        onOpenChange={setShowAdvancedSettings}
-        currentField={currentField}
-        fields={localFields}
-        onFieldUpdate={handleUpdateFieldMeta}
-      />
-    </>
-  );
-};

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,60 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-
-import { type TFieldMetaSchema as FieldMeta } from '@documenso/lib/types/field-meta';
-import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
-import { FieldAdvancedSettings } from '@documenso/ui/primitives/document-flow/field-item-advanced-settings';
-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[];
-  onFieldUpdate: (formId: string, fieldMeta: FieldMeta) => void;
-};
-
-export const FieldAdvancedSettingsDrawer = ({
-  isOpen,
-  onOpenChange,
-  currentField,
-  fields,
-  onFieldUpdate,
-}: FieldAdvancedSettingsDrawerProps) => {
-  const { _ } = useLingui();
-
-  if (!currentField) {
-    return null;
-  }
-
-  return (
-    <Sheet open={isOpen} onOpenChange={onOpenChange}>
-      <SheetContent position="right" size="lg" className="w-9/12 max-w-sm overflow-y-auto">
-        <SheetTitle className="sr-only">
-          {parseMessageDescriptor(
-            _,
-            msg`Configure ${parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[currentField.type])} Field`,
-          )}
-        </SheetTitle>
-
-        <FieldAdvancedSettings
-          title={msg`Advanced settings`}
-          description={msg`Configure the ${parseMessageDescriptor(
-            _,
-            FRIENDLY_FIELD_TYPE[currentField.type],
-          )} field`}
-          field={currentField}
-          fields={fields}
-          onAdvancedSettings={() => onOpenChange(false)}
-          onSave={(fieldMeta) => {
-            onFieldUpdate(currentField.formId, fieldMeta);
-            onOpenChange(false);
-          }}
-        />
-      </SheetContent>
-    </Sheet>
-  );
-};

apps/remix/app/components/embed/embed-client-loading.tsx

@@ -1,11 +1,7 @@
-import { Loader } from 'lucide-react';
-
 export const EmbedClientLoading = () => {
   return (
     <div className="bg-background fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center">
-      <Loader className="mr-2 h-4 w-4 animate-spin" />
-
-      <span>Loading...</span>
+      Loading...
     </div>
   );
 };

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

@@ -20,7 +20,6 @@ import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -38,6 +37,7 @@ import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-sc
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { DocumentSigningRecipientProvider } from '../general/document-signing/document-signing-recipient-provider';
 import { DocumentSigningRejectDialog } from '../general/document-signing/document-signing-reject-dialog';
+import { DocumentReadOnlyFields } from '../general/document/document-read-only-fields';
 import { EmbedClientLoading } from './embed-client-loading';
 import { EmbedDocumentCompleted } from './embed-document-completed';
 import { EmbedDocumentFields } from './embed-document-fields';
@@ -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/forms/avatar-image.tsx

@@ -6,6 +6,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { ErrorCode, useDropzone } from 'react-dropzone';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
@@ -28,6 +29,8 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useOptionalCurrentTeam } from '~/providers/team';
+
 export const ZAvatarImageFormSchema = z.object({
   bytes: z.string().nullish(),
 });
@@ -36,44 +39,29 @@ export type TAvatarImageFormSchema = z.infer<typeof ZAvatarImageFormSchema>;
 
 export type AvatarImageFormProps = {
   className?: string;
-  team?: {
-    id: number;
-    name: string;
-    avatarImageId: string | null;
-  };
-  organisation?: {
-    id: string;
-    name: string;
-    avatarImageId: string | null;
-  };
 };
 
-export const AvatarImageForm = ({ className, team, organisation }: AvatarImageFormProps) => {
+export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
   const { user, refreshSession } = useSession();
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const team = useOptionalCurrentTeam();
 
   const { mutateAsync: setProfileImage } = trpc.profile.setProfileImage.useMutation();
 
-  const initials = extractInitials(team?.name || organisation?.name || user.name || '');
+  const initials = extractInitials(team?.name || user.name || '');
 
   const hasAvatarImage = useMemo(() => {
     if (team) {
       return team.avatarImageId !== null;
     }
 
-    if (organisation) {
-      return organisation.avatarImageId !== null;
-    }
-
     return user.avatarImageId !== null;
-  }, [team, organisation, user.avatarImageId]);
+  }, [team, user.avatarImageId]);
 
-  const avatarImageId = team
-    ? team.avatarImageId
-    : organisation
-      ? organisation.avatarImageId
-      : user.avatarImageId;
+  const avatarImageId = team ? team.avatarImageId : user.avatarImageId;
 
   const form = useForm<TAvatarImageFormSchema>({
     values: {
@@ -112,8 +100,7 @@ export const AvatarImageForm = ({ className, team, organisation }: AvatarImageFo
     try {
       await setProfileImage({
         bytes: data.bytes,
-        teamId: team?.id ?? null,
-        organisationId: organisation?.id ?? null,
+        teamId: team?.id,
       });
 
       await refreshSession();

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

@@ -20,20 +20,14 @@ import {
   FormLabel,
 } 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 { Switch } from '@documenso/ui/primitives/switch';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
 
 const ZBrandingPreferencesFormSchema = z.object({
-  brandingEnabled: z.boolean().nullable(),
+  brandingEnabled: z.boolean(),
   brandingLogo: z
     .instanceof(File)
     .refine((file) => file.size <= MAX_FILE_SIZE, 'File size must be less than 5MB')
@@ -54,18 +48,11 @@ type SettingsSubset = Pick<
 >;
 
 export type BrandingPreferencesFormProps = {
-  canInherit?: boolean;
   settings: SettingsSubset;
   onFormSubmit: (data: TBrandingPreferencesFormSchema) => Promise<void>;
-  context: 'Team' | 'Organisation';
 };
 
-export function BrandingPreferencesForm({
-  canInherit = false,
-  settings,
-  onFormSubmit,
-  context,
-}: BrandingPreferencesFormProps) {
+export function BrandingPreferencesForm({ settings, onFormSubmit }: BrandingPreferencesFormProps) {
   const { t } = useLingui();
 
   const [previewUrl, setPreviewUrl] = useState<string>('');
@@ -73,10 +60,10 @@ export function BrandingPreferencesForm({
 
   const form = useForm<TBrandingPreferencesFormSchema>({
     defaultValues: {
-      brandingEnabled: settings.brandingEnabled ?? null,
-      brandingUrl: settings.brandingUrl ?? '',
+      brandingEnabled: settings?.brandingEnabled ?? false,
+      brandingUrl: settings?.brandingUrl ?? '',
       brandingLogo: undefined,
-      brandingCompanyDetails: settings.brandingCompanyDetails ?? '',
+      brandingCompanyDetails: settings?.brandingCompanyDetails ?? '',
     },
     resolver: zodResolver(ZBrandingPreferencesFormSchema),
   });
@@ -84,7 +71,7 @@ export function BrandingPreferencesForm({
   const isBrandingEnabled = form.watch('brandingEnabled');
 
   useEffect(() => {
-    if (settings.brandingLogo) {
+    if (settings?.brandingLogo) {
       const file = JSON.parse(settings.brandingLogo);
 
       if ('type' in file && 'data' in file) {
@@ -100,7 +87,7 @@ export function BrandingPreferencesForm({
     }
 
     setHasLoadedPreview(true);
-  }, [settings.brandingLogo]);
+  }, [settings?.brandingLogo]);
 
   // Cleanup ObjectURL on unmount or when previewUrl changes
   useEffect(() => {
@@ -120,65 +107,35 @@ export function BrandingPreferencesForm({
             name="brandingEnabled"
             render={({ field }) => (
               <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Enable Custom Branding</Trans>
-                </FormLabel>
+                <FormLabel>Enable Custom Branding</FormLabel>
 
-                <FormControl>
-                  <Select
-                    {...field}
-                    value={field.value === null ? '-1' : field.value.toString()}
-                    onValueChange={(value) =>
-                      field.onChange(value === 'true' ? true : value === 'false' ? false : null)
-                    }
-                  >
-                    <SelectTrigger
-                      className="bg-background text-muted-foreground"
-                      data-testid="enable-branding"
-                    >
-                      <SelectValue />
-                    </SelectTrigger>
-
-                    <SelectContent className="z-[9999]">
-                      <SelectItem value="true">
-                        <Trans>Yes</Trans>
-                      </SelectItem>
-
-                      <SelectItem value="false">
-                        <Trans>No</Trans>
-                      </SelectItem>
-
-                      {canInherit && (
-                        <SelectItem value={'-1'}>
-                          <Trans>Inherit from organisation</Trans>
-                        </SelectItem>
-                      )}
-                    </SelectContent>
-                  </Select>
-                </FormControl>
+                <div>
+                  <FormControl>
+                    <Switch
+                      ref={field.ref}
+                      name={field.name}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </div>
 
                 <FormDescription>
-                  {context === 'Team' ? (
-                    <Trans>Enable custom branding for all documents in this team</Trans>
-                  ) : (
-                    <Trans>Enable custom branding for all documents in this organisation</Trans>
-                  )}
+                  <Trans>Enable custom branding for all documents in this team.</Trans>
                 </FormDescription>
               </FormItem>
             )}
           />
 
           <div className="relative flex w-full flex-col gap-y-4">
-            {!isBrandingEnabled && <div className="bg-background/60 absolute inset-0 z-[9998]" />}
+            {!isBrandingEnabled && <div className="bg-background/60 absolute inset-0 z-[9999]" />}
 
             <FormField
               control={form.control}
               name="brandingLogo"
               render={({ field: { value: _value, onChange, ...field } }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Branding Logo</Trans>
-                  </FormLabel>
+                  <FormLabel>Branding Logo</FormLabel>
 
                   <div className="flex flex-col gap-4">
                     <div className="border-border bg-background relative h-48 w-full overflow-hidden rounded-lg border">
@@ -252,13 +209,6 @@ export function BrandingPreferencesForm({
 
                     <FormDescription>
                       <Trans>Upload your brand logo (max 5MB, JPG, PNG, or WebP)</Trans>
-
-                      {canInherit && (
-                        <span>
-                          {'. '}
-                          <Trans>Leave blank to inherit from the organisation.</Trans>
-                        </span>
-                      )}
                     </FormDescription>
                   </div>
                 </FormItem>
@@ -270,9 +220,7 @@ export function BrandingPreferencesForm({
               name="brandingUrl"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Brand Website</Trans>
-                  </FormLabel>
+                  <FormLabel>Brand Website</FormLabel>
 
                   <FormControl>
                     <Input
@@ -285,13 +233,6 @@ export function BrandingPreferencesForm({
 
                   <FormDescription>
                     <Trans>Your brand website URL</Trans>
-
-                    {canInherit && (
-                      <span>
-                        {'. '}
-                        <Trans>Leave blank to inherit from the organisation.</Trans>
-                      </span>
-                    )}
                   </FormDescription>
                 </FormItem>
               )}
@@ -302,9 +243,7 @@ export function BrandingPreferencesForm({
               name="brandingCompanyDetails"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Brand Details</Trans>
-                  </FormLabel>
+                  <FormLabel>Brand Details</FormLabel>
 
                   <FormControl>
                     <Textarea
@@ -317,13 +256,6 @@ export function BrandingPreferencesForm({
 
                   <FormDescription>
                     <Trans>Additional brand information to display at the bottom of emails</Trans>
-
-                    {canInherit && (
-                      <span>
-                        {'. '}
-                        <Trans>Leave blank to inherit from the organisation.</Trans>
-                      </span>
-                    )}
                   </FormDescription>
                 </FormItem>
               )}

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

@@ -14,7 +14,6 @@ import {
   SUPPORTED_LANGUAGE_CODES,
   isValidLanguageCode,
 } from '@documenso/lib/constants/i18n';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
 import { Alert } from '@documenso/ui/primitives/alert';
@@ -72,9 +71,7 @@ export const DocumentPreferencesForm = ({
   canInherit,
 }: DocumentPreferencesFormProps) => {
   const { t } = useLingui();
-  const { user, organisations } = useSession();
-
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
+  const { user } = useSession();
 
   const placeholderEmail = user.email ?? 'user@example.com';
 
@@ -108,53 +105,51 @@ export const DocumentPreferencesForm = ({
           className="flex h-full max-w-2xl flex-col gap-y-6"
           disabled={form.formState.isSubmitting}
         >
-          {!isPersonalLayoutMode && (
-            <FormField
-              control={form.control}
-              name="documentVisibility"
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Default Document Visibility</Trans>
-                  </FormLabel>
+          <FormField
+            control={form.control}
+            name="documentVisibility"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Document Visibility</Trans>
+                </FormLabel>
 
-                  <FormControl>
-                    <Select
-                      {...field}
-                      value={field.value === null ? '-1' : field.value}
-                      onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
-                    >
-                      <SelectTrigger className="bg-background text-muted-foreground">
-                        <SelectValue />
-                      </SelectTrigger>
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value === null ? '-1' : field.value}
+                    onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                  >
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
 
-                      <SelectContent>
-                        <SelectItem value={DocumentVisibility.EVERYONE}>
-                          <Trans>Everyone can access and view the document</Trans>
-                        </SelectItem>
-                        <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
-                          <Trans>Only managers and above can access and view the document</Trans>
-                        </SelectItem>
-                        <SelectItem value={DocumentVisibility.ADMIN}>
-                          <Trans>Only admins can access and view the document</Trans>
+                    <SelectContent>
+                      <SelectItem value={DocumentVisibility.EVERYONE}>
+                        <Trans>Everyone can access and view the document</Trans>
+                      </SelectItem>
+                      <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+                        <Trans>Only managers and above can access and view the document</Trans>
+                      </SelectItem>
+                      <SelectItem value={DocumentVisibility.ADMIN}>
+                        <Trans>Only admins can access and view the document</Trans>
+                      </SelectItem>
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
                         </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
 
-                        {canInherit && (
-                          <SelectItem value={'-1'}>
-                            <Trans>Inherit from organisation</Trans>
-                          </SelectItem>
-                        )}
-                      </SelectContent>
-                    </Select>
-                  </FormControl>
-
-                  <FormDescription>
-                    <Trans>Controls the default visibility of an uploaded document.</Trans>
-                  </FormDescription>
-                </FormItem>
-              )}
-            />
-          )}
+                <FormDescription>
+                  <Trans>Controls the default visibility of an uploaded document.</Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
 
           <FormField
             control={form.control}
@@ -239,74 +234,72 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
-          {!isPersonalLayoutMode && (
-            <FormField
-              control={form.control}
-              name="includeSenderDetails"
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Send on Behalf of Team</Trans>
-                  </FormLabel>
+          <FormField
+            control={form.control}
+            name="includeSenderDetails"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Send on Behalf of Team</Trans>
+                </FormLabel>
 
-                  <FormControl>
-                    <Select
-                      {...field}
-                      value={field.value === null ? '-1' : field.value.toString()}
-                      onValueChange={(value) =>
-                        field.onChange(value === 'true' ? true : value === 'false' ? false : null)
-                      }
-                    >
-                      <SelectTrigger className="bg-background text-muted-foreground">
-                        <SelectValue />
-                      </SelectTrigger>
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value === null ? '-1' : field.value.toString()}
+                    onValueChange={(value) =>
+                      field.onChange(value === 'true' ? true : value === 'false' ? false : null)
+                    }
+                  >
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
 
-                      <SelectContent>
-                        <SelectItem value="true">
-                          <Trans>Yes</Trans>
+                    <SelectContent>
+                      <SelectItem value="true">
+                        <Trans>Yes</Trans>
+                      </SelectItem>
+
+                      <SelectItem value="false">
+                        <Trans>No</Trans>
+                      </SelectItem>
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
                         </SelectItem>
-
-                        <SelectItem value="false">
-                          <Trans>No</Trans>
-                        </SelectItem>
-
-                        {canInherit && (
-                          <SelectItem value={'-1'}>
-                            <Trans>Inherit from organisation</Trans>
-                          </SelectItem>
-                        )}
-                      </SelectContent>
-                    </Select>
-                  </FormControl>
-
-                  <div className="pt-2">
-                    <div className="text-muted-foreground text-xs font-medium">
-                      <Trans>Preview</Trans>
-                    </div>
-
-                    <Alert variant="neutral" className="mt-1 px-2.5 py-1.5 text-sm">
-                      {field.value ? (
-                        <Trans>
-                          "{placeholderEmail}" on behalf of "Team Name" has invited you to sign
-                          "example document".
-                        </Trans>
-                      ) : (
-                        <Trans>"Team Name" has invited you to sign "example document".</Trans>
                       )}
-                    </Alert>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <div className="pt-2">
+                  <div className="text-muted-foreground text-xs font-medium">
+                    <Trans>Preview</Trans>
                   </div>
 
-                  <FormDescription>
-                    <Trans>
-                      Controls the formatting of the message that will be sent when inviting a
-                      recipient to sign a document. If a custom message has been provided while
-                      configuring the document, it will be used instead.
-                    </Trans>
-                  </FormDescription>
-                </FormItem>
-              )}
-            />
-          )}
+                  <Alert variant="neutral" className="mt-1 px-2.5 py-1.5 text-sm">
+                    {field.value ? (
+                      <Trans>
+                        "{placeholderEmail}" on behalf of "Team Name" has invited you to sign
+                        "example document".
+                      </Trans>
+                    ) : (
+                      <Trans>"Team Name" has invited you to sign "example document".</Trans>
+                    )}
+                  </Alert>
+                </div>
+
+                <FormDescription>
+                  <Trans>
+                    Controls the formatting of the message that will be sent when inviting a
+                    recipient to sign a document. If a custom message has been provided while
+                    configuring the document, it will be used instead.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
 
           <FormField
             control={form.control}

apps/remix/app/components/forms/organisation-update-form.tsx

@@ -8,7 +8,6 @@ import { useNavigate } from 'react-router';
 import type { z } from 'zod';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
@@ -36,8 +35,6 @@ export const OrganisationUpdateForm = () => {
   const navigate = useNavigate();
   const organisation = useCurrentOrganisation();
 
-  const { refreshSession } = useSession();
-
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -61,12 +58,6 @@ export const OrganisationUpdateForm = () => {
         organisationId: organisation.id,
       });
 
-      await refreshSession();
-
-      if (url !== organisation.url) {
-        await navigate(`/o/${url}/settings`);
-      }
-
       toast({
         title: _(msg`Success`),
         description: _(msg`Your organisation has been successfully updated.`),
@@ -77,6 +68,10 @@ export const OrganisationUpdateForm = () => {
         name,
         url,
       });
+
+      if (url !== organisation.url) {
+        await navigate(`/org/${url}/settings`);
+      }
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -133,7 +128,7 @@ export const OrganisationUpdateForm = () => {
                 {!form.formState.errors.url && (
                   <span className="text-foreground/50 text-xs font-normal">
                     {field.value ? (
-                      `${NEXT_PUBLIC_WEBAPP_URL()}/o/${field.value}`
+                      `${NEXT_PUBLIC_WEBAPP_URL()}/org/${field.value}`
                     ) : (
                       <Trans>A unique URL to identify your organisation</Trans>
                     )}

apps/remix/app/components/forms/public-profile-form.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
-import type { TeamProfile } from '@prisma/client';
+import type { TeamProfile, UserProfile } from '@prisma/client';
 import { motion } from 'framer-motion';
 import { AnimatePresence } from 'framer-motion';
 import { CheckSquareIcon, CopyIcon } from 'lucide-react';
@@ -12,14 +12,12 @@ import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { formatUserProfilePath } from '@documenso/lib/utils/public-profiles';
 import {
   MAX_PROFILE_BIO_LENGTH,
-  ZUpdateTeamRequestSchema,
-} from '@documenso/trpc/server/team-router/update-team.types';
+  ZUpdateTeamPublicProfileMutationSchema,
+} from '@documenso/trpc/server/team-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -34,10 +32,9 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCurrentTeam } from '~/providers/team';
-
-export const ZPublicProfileFormSchema = ZUpdateTeamRequestSchema.shape.data.pick({
-  profileBio: true,
+export const ZPublicProfileFormSchema = ZUpdateTeamPublicProfileMutationSchema.pick({
+  bio: true,
+  enabled: true,
   url: true,
 });
 
@@ -45,12 +42,16 @@ export type TPublicProfileFormSchema = z.infer<typeof ZPublicProfileFormSchema>;
 
 export type PublicProfileFormProps = {
   className?: string;
+  profileUrl?: string | null;
+  teamUrl: string;
   onProfileUpdate: (data: TPublicProfileFormSchema) => Promise<unknown>;
-  profile: TeamProfile;
+  profile: UserProfile | TeamProfile;
 };
 export const PublicProfileForm = ({
   className,
+  profileUrl,
   profile,
+  teamUrl,
   onProfileUpdate,
 }: PublicProfileFormProps) => {
   const { _ } = useLingui();
@@ -60,16 +61,10 @@ export const PublicProfileForm = ({
 
   const [copiedTimeout, setCopiedTimeout] = useState<NodeJS.Timeout | null>(null);
 
-  const { organisations } = useSession();
-
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
-  const team = useCurrentTeam();
-
   const form = useForm<TPublicProfileFormSchema>({
     values: {
-      url: team.url,
-      profileBio: profile?.bio ?? '',
+      url: profileUrl ?? '',
+      bio: profile?.bio ?? '',
     },
     resolver: zodResolver(ZPublicProfileFormSchema),
   });
@@ -88,13 +83,12 @@ export const PublicProfileForm = ({
 
       form.reset({
         url: data.url,
-        profileBio: data.profileBio,
+        bio: data.bio,
       });
     } catch (err) {
       const error = AppError.parseError(err);
 
       switch (error.code) {
-        case AppErrorCode.ALREADY_EXISTS:
         case 'PREMIUM_PROFILE_URL':
         case 'PROFILE_URL_TAKEN':
           form.setError('url', {
@@ -151,10 +145,10 @@ export const PublicProfileForm = ({
                   <Trans>Public profile URL</Trans>
                 </FormLabel>
                 <FormControl>
-                  <Input {...field} disabled={field.disabled || !isPersonalLayoutMode} />
+                  <Input {...field} disabled={field.disabled || teamUrl !== undefined} />
                 </FormControl>
 
-                {!isPersonalLayoutMode && (
+                {teamUrl && (
                   <p className="text-muted-foreground text-xs">
                     <Trans>
                       You can update the profile URL by updating the team URL in the general
@@ -214,7 +208,7 @@ export const PublicProfileForm = ({
 
           <FormField
             control={form.control}
-            name="profileBio"
+            name="bio"
             render={({ field }) => {
               const remaningLength = MAX_PROFILE_BIO_LENGTH - (field.value || '').length;
 
@@ -224,11 +218,13 @@ export const PublicProfileForm = ({
                   <FormControl>
                     <Textarea
                       {...field}
-                      placeholder={_(msg`Write a description to display on your public profile`)}
+                      placeholder={
+                        teamUrl ? _(msg`Write about the team`) : _(msg`Write about yourself`)
+                      }
                     />
                   </FormControl>
 
-                  {!form.formState.errors.profileBio && (
+                  {!form.formState.errors.bio && (
                     <p className="text-muted-foreground text-sm">
                       {remaningLength >= 0 ? (
                         <Plural

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

@@ -55,7 +55,7 @@ const handleFallbackErrorMessages = (code: string) => {
   return message;
 };
 
-const LOGIN_REDIRECT_PATH = '/';
+const LOGIN_REDIRECT_PATH = '/dashboard';
 
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),

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

@@ -358,6 +358,7 @@ export const SignUpForm = ({
 
             <Button
               loading={form.formState.isSubmitting}
+              disabled={!form.formState.isValid}
               type="submit"
               size="lg"
               className="mt-6 w-full"

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

@@ -8,11 +8,12 @@ import type { ApiToken } from '@prisma/client';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
-import type { z } from 'zod';
+import { z } from 'zod';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
 import { ZCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -37,7 +38,7 @@ import {
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } from '~/providers/team';
 
 export const EXPIRATION_DATES = {
   ONE_WEEK: msg`7 days`,
@@ -47,9 +48,8 @@ export const EXPIRATION_DATES = {
   ONE_YEAR: msg`12 months`,
 } as const;
 
-const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.pick({
-  tokenName: true,
-  expirationDate: true,
+const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.extend({
+  enabled: z.boolean(),
 });
 
 type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
@@ -67,7 +67,7 @@ export type ApiTokenFormProps = {
 export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
   const [, copy] = useCopyToClipboard();
 
-  const team = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -86,6 +86,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
     defaultValues: {
       tokenName: '',
       expirationDate: '',
+      enabled: false,
     },
   });
 
@@ -110,10 +111,10 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
     }
   };
 
-  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenFormSchema) => {
+  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenMutationSchema) => {
     try {
       await createTokenMutation({
-        teamId: team.id,
+        teamId: team?.id,
         tokenName,
         expirationDate: noExpirationDate ? null : expirationDate,
       });
@@ -148,10 +149,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
     <div className={cn(className)}>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset
-            className="mt-6 flex w-full flex-col gap-4"
-            disabled={form.formState.isSubmitting}
-          >
+          <fieldset className="mt-6 flex w-full flex-col gap-4">
             <FormField
               control={form.control}
               name="tokenName"
@@ -211,30 +209,47 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
                 )}
               />
 
-              <div>
-                <FormLabel className="text-muted-foreground mt-2">
-                  <Trans>Never expire</Trans>
-                </FormLabel>
-                <div className="block md:py-1.5">
-                  <Switch
-                    className="bg-background mt-2"
-                    checked={noExpirationDate}
-                    onCheckedChange={setNoExpirationDate}
-                  />
-                </div>
-              </div>
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem className="">
+                    <FormLabel className="text-muted-foreground mt-2">
+                      <Trans>Never expire</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <div className="block md:py-1.5">
+                        <Switch
+                          className="bg-background"
+                          checked={field.value}
+                          onCheckedChange={(val) => {
+                            setNoExpirationDate((prev) => !prev);
+                            field.onChange(val);
+                          }}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             </div>
 
             <Button
               type="submit"
               className="hidden md:inline-flex"
+              disabled={!form.formState.isDirty}
               loading={form.formState.isSubmitting}
             >
               <Trans>Create token</Trans>
             </Button>
 
             <div className="md:hidden">
-              <Button type="submit" loading={form.formState.isSubmitting}>
+              <Button
+                type="submit"
+                disabled={!form.formState.isDirty}
+                loading={form.formState.isSubmitting}
+              >
                 <Trans>Create token</Trans>
               </Button>
             </div>

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

@@ -9,7 +9,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router';
 import { Theme, useTheme } from 'remix-themes';
 
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import {
   DOCUMENTS_PAGE_SHORTCUT,
@@ -21,7 +20,6 @@ import {
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
 import { dynamicActivate } from '@documenso/lib/utils/i18n';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import {
@@ -35,7 +33,28 @@ import {
 } from '@documenso/ui/primitives/command';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+const DOCUMENTS_PAGES = [
+  {
+    label: msg`All documents`,
+    path: '/documents?status=ALL',
+    shortcut: DOCUMENTS_PAGE_SHORTCUT.replace('+', ''),
+  },
+  { label: msg`Draft documents`, path: '/documents?status=DRAFT' },
+  {
+    label: msg`Completed documents`,
+    path: '/documents?status=COMPLETED',
+  },
+  { label: msg`Pending documents`, path: '/documents?status=PENDING' },
+  { label: msg`Inbox documents`, path: '/documents?status=INBOX' },
+];
+
+const TEMPLATES_PAGES = [
+  {
+    label: msg`All templates`,
+    path: '/templates',
+    shortcut: TEMPLATES_PAGE_SHORTCUT.replace('+', ''),
+  },
+];
 
 const SETTINGS_PAGES = [
   {
@@ -54,10 +73,8 @@ export type AppCommandMenuProps = {
 
 export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   const { _ } = useLingui();
-  const { organisations } = useSession();
 
   const navigate = useNavigate();
-  const currentTeam = useOptionalCurrentTeam();
 
   const [isOpen, setIsOpen] = useState(() => open ?? false);
   const [search, setSearch] = useState('');
@@ -77,60 +94,6 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
       },
     );
 
-  const teamUrl = useMemo(() => {
-    let teamUrl = currentTeam?.url || null;
-
-    if (!teamUrl && isPersonalLayout(organisations)) {
-      teamUrl = organisations[0].teams[0]?.url || null;
-    }
-
-    return teamUrl;
-  }, [currentTeam, organisations]);
-
-  const documentPageLinks = useMemo(() => {
-    if (!teamUrl) {
-      return [];
-    }
-
-    return [
-      {
-        label: msg`All documents`,
-        path: `/t/${teamUrl}/documents?status=ALL`,
-        shortcut: DOCUMENTS_PAGE_SHORTCUT.replace('+', ''),
-      },
-      {
-        label: msg`Draft documents`,
-        path: `/t/${teamUrl}/documents?status=DRAFT`,
-      },
-      {
-        label: msg`Completed documents`,
-        path: `/t/${teamUrl}/documents?status=COMPLETED`,
-      },
-      {
-        label: msg`Pending documents`,
-        path: `/t/${teamUrl}/documents?status=PENDING`,
-      },
-      {
-        label: msg`Inbox documents`,
-        path: `/t/${teamUrl}/documents?status=INBOX`,
-      },
-    ];
-  }, [currentTeam, organisations]);
-
-  const templatePageLinks = useMemo(() => {
-    if (!teamUrl) {
-      return [];
-    }
-
-    return [
-      {
-        label: msg`All templates`,
-        path: `/t/${teamUrl}/templates`,
-        shortcut: TEMPLATES_PAGE_SHORTCUT.replace('+', ''),
-      },
-    ];
-  }, [currentTeam, organisations]);
-
   const searchResults = useMemo(() => {
     if (!searchDocumentsData) {
       return [];
@@ -182,8 +145,8 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   };
 
   const goToSettings = useCallback(() => push(SETTINGS_PAGES[0].path), [push]);
-  const goToDocuments = useCallback(() => push(documentPageLinks[0].path), [push]);
-  const goToTemplates = useCallback(() => push(templatePageLinks[0].path), [push]);
+  const goToDocuments = useCallback(() => push(DOCUMENTS_PAGES[0].path), [push]);
+  const goToTemplates = useCallback(() => push(TEMPLATES_PAGES[0].path), [push]);
 
   useHotkeys(['ctrl+k', 'meta+k'], toggleOpen, { preventDefault: true });
   useHotkeys(SETTINGS_PAGE_SHORTCUT, goToSettings);
@@ -234,16 +197,12 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
         )}
         {!currentPage && (
           <>
-            {documentPageLinks.length > 0 && (
-              <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Documents`)}>
-                <Commands push={push} pages={documentPageLinks} />
-              </CommandGroup>
-            )}
-            {templatePageLinks.length > 0 && (
-              <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Templates`)}>
-                <Commands push={push} pages={templatePageLinks} />
-              </CommandGroup>
-            )}
+            <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Documents`)}>
+              <Commands push={push} pages={DOCUMENTS_PAGES} />
+            </CommandGroup>
+            <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Templates`)}>
+              <Commands push={push} pages={TEMPLATES_PAGES} />
+            </CommandGroup>
             <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Settings`)}>
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>

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

@@ -1,13 +1,10 @@
 import { type HTMLAttributes, useEffect, useState } from 'react';
 
-import { InboxIcon, MenuIcon, SearchIcon } from 'lucide-react';
+import { MenuIcon, SearchIcon } from 'lucide-react';
 import { Link, useParams } from 'react-router';
 
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { getRootHref } from '@documenso/lib/utils/params';
 import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
 
@@ -15,15 +12,12 @@ import { AppCommandMenu } from './app-command-menu';
 import { AppNavDesktop } from './app-nav-desktop';
 import { AppNavMobile } from './app-nav-mobile';
 import { MenuSwitcher } from './menu-switcher';
-import { OrgMenuSwitcher } from './org-menu-switcher';
 
 export type HeaderProps = HTMLAttributes<HTMLDivElement>;
 
 export const Header = ({ className, ...props }: HeaderProps) => {
   const params = useParams();
 
-  const { organisations } = useSession();
-
   const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
   const [scrollY, setScrollY] = useState(0);
@@ -57,21 +51,8 @@ export const Header = ({ className, ...props }: HeaderProps) => {
 
         <AppNavDesktop setIsCommandMenuOpen={setIsCommandMenuOpen} />
 
-        <Button asChild variant="outline" className="relative hidden h-10 w-10 rounded-lg md:flex">
-          <Link to="/inbox" className="relative block h-10 w-10">
-            <InboxIcon className="text-muted-foreground hover:text-foreground h-5 w-5 flex-shrink-0 transition-colors" />
-
-            {/* Todo: Add counter. */}
-            {/* {unreadCount > 0 && (
-              <span className="bg-muted text-muted-foreground absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full text-[10px]">
-                1
-              </span>
-            )} */}
-          </Link>
-        </Button>
-
-        <div className="md:ml-4">
-          {isPersonalLayout(organisations) ? <MenuSwitcher /> : <OrgMenuSwitcher />}
+        <div className="flex gap-x-4 md:ml-8">
+          <MenuSwitcher />
         </div>
 
         <div className="flex flex-row items-center space-x-4 md:hidden">

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -7,14 +7,22 @@ import { Trans } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { AnimatePresence } from 'framer-motion';
 import { Search } from 'lucide-react';
-import { Link, useLocation } from 'react-router';
+import { Link, useLocation, useParams } from 'react-router';
 
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { getRootHref } from '@documenso/lib/utils/params';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+const navigationLinks = [
+  {
+    href: '/documents',
+    label: msg`Documents`,
+  },
+  {
+    href: '/templates',
+    label: msg`Templates`,
+  },
+];
 
 export type AppNavDesktopProps = HTMLAttributes<HTMLDivElement> & {
   setIsCommandMenuOpen: (value: boolean) => void;
@@ -26,13 +34,13 @@ export const AppNavDesktop = ({
   ...props
 }: AppNavDesktopProps) => {
   const { _ } = useLingui();
-  const { organisations } = useSession();
 
   const { pathname } = useLocation();
+  const params = useParams();
 
   const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
-  const currentTeam = useOptionalCurrentTeam();
+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
 
   useEffect(() => {
     const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
@@ -41,29 +49,6 @@ export const AppNavDesktop = ({
     setModifierKey(isMacOS ? '⌘' : 'Ctrl');
   }, []);
 
-  const menuNavigationLinks = useMemo(() => {
-    let teamUrl = currentTeam?.url || null;
-
-    if (!teamUrl && isPersonalLayout(organisations)) {
-      teamUrl = organisations[0].teams[0]?.url || null;
-    }
-
-    if (!teamUrl) {
-      return [];
-    }
-
-    return [
-      {
-        href: `/t/${teamUrl}/documents`,
-        label: msg`Documents`,
-      },
-      {
-        href: `/t/${teamUrl}/templates`,
-        label: msg`Templates`,
-      },
-    ];
-  }, [currentTeam, organisations]);
-
   return (
     <div
       className={cn(
@@ -74,21 +59,23 @@ export const AppNavDesktop = ({
     >
       <div>
         <AnimatePresence>
-          {menuNavigationLinks.length > 0 && (
+          {params.teamUrl && (
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
               className="flex items-baseline gap-x-6"
             >
-              {menuNavigationLinks.map(({ href, label }) => (
+              {navigationLinks.map(({ href, label }) => (
                 <Link
                   key={href}
-                  to={href}
+                  to={`${rootHref}${href}`}
                   className={cn(
                     'text-muted-foreground dark:text-muted-foreground/60 focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
                     {
-                      'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
+                      'text-foreground dark:text-muted-foreground': pathname?.startsWith(
+                        `${rootHref}${href}`,
+                      ),
                     },
                   )}
                 >

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -1,73 +1,48 @@
-import { useMemo } from 'react';
-
-import { useLingui } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Link } from 'react-router';
+import { Link, useParams } from 'react-router';
 
 import LogoImage from '@documenso/assets/logo.png';
 import { authClient } from '@documenso/auth/client';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { getRootHref } from '@documenso/lib/utils/params';
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
-
 export type AppNavMobileProps = {
   isMenuOpen: boolean;
   onMenuOpenChange?: (_value: boolean) => void;
 };
 
 export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps) => {
-  const { t } = useLingui();
+  const { _ } = useLingui();
 
-  const { organisations } = useSession();
-
-  const currentTeam = useOptionalCurrentTeam();
+  const params = useParams();
 
   const handleMenuItemClick = () => {
     onMenuOpenChange?.(false);
   };
 
-  const menuNavigationLinks = useMemo(() => {
-    let teamUrl = currentTeam?.url || null;
+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
 
-    if (!teamUrl && isPersonalLayout(organisations)) {
-      teamUrl = organisations[0].teams[0]?.url || null;
-    }
-
-    if (!teamUrl) {
-      return [
-        {
-          href: '/inbox',
-          text: t`Inbox`,
-        },
-        {
-          href: '/settings/profile',
-          text: t`Settings`,
-        },
-      ];
-    }
-
-    return [
-      {
-        href: `/t/${teamUrl}/documents`,
-        label: t`Documents`,
-      },
-      {
-        href: `/t/${teamUrl}/templates`,
-        label: t`Templates`,
-      },
-      {
-        href: '/inbox',
-        text: t`Inbox`,
-      },
-      {
-        href: '/settings/profile',
-        text: t`Settings`,
-      },
-    ];
-  }, [currentTeam, organisations]);
+  const menuNavigationLinks = [
+    {
+      href: `${rootHref}/documents`,
+      text: msg`Documents`,
+    },
+    {
+      href: `${rootHref}/templates`,
+      text: msg`Templates`,
+    },
+    {
+      href: '/settings/teams',
+      text: msg`Teams`,
+    },
+    {
+      href: '/settings/profile',
+      text: msg`Settings`,
+    },
+  ];
 
   return (
     <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
@@ -90,7 +65,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
               to={href}
               onClick={() => handleMenuItemClick()}
             >
-              {text}
+              {_(text)}
             </Link>
           ))}
 

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

@@ -1,45 +1,19 @@
 import { useMemo, useState } from 'react';
 
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Building2Icon, PlusIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
 
 import type { InternalClaimPlans } from '@documenso/ee/server-only/stripe/get-internal-claim-plans';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
-import {
-  Dialog,
-  DialogClose,
-  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 { Label } from '@documenso/ui/primitives/label';
-import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { ZCreateOrganisationFormSchema } from '../dialogs/organisation-create-dialog';
-
 const MotionCard = motion(Card);
 
 export type BillingPlansProps = {
@@ -47,20 +21,45 @@ export type BillingPlansProps = {
 };
 
 export const BillingPlans = ({ plans }: BillingPlansProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
   const isMounted = useIsMounted();
 
+  const organisation = useCurrentOrganisation();
+
   const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
+  const [checkoutSessionPriceId, setCheckoutSessionPriceId] = useState<string | null>(null);
+
+  const { mutateAsync: createSubscription } = trpc.billing.subscription.create.useMutation();
+
+  const onSubscribeClick = async (priceId: string) => {
+    try {
+      setCheckoutSessionPriceId(priceId);
+
+      const { redirectUrl } = await createSubscription({
+        organisationId: organisation.id,
+        priceId,
+      });
+
+      window.open(redirectUrl, '_blank');
+    } catch (_err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while trying to create a checkout session.`),
+        variant: 'destructive',
+      });
+    } finally {
+      setCheckoutSessionPriceId(null);
+    }
+  };
 
   const pricesToDisplay = useMemo(() => {
     const prices = [];
 
     for (const plan of Object.values(plans)) {
       if (plan[interval] && plan[interval].isVisibleInApp) {
-        prices.push({
-          ...plan[interval],
-          memberCount: plan.memberCount,
-          claim: plan.id,
-        });
+        prices.push(plan[interval]);
       }
     }
 
@@ -126,12 +125,14 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
 
                 <div className="flex-1" />
 
-                <BillingDialog
-                  priceId={price.id}
-                  planName={price.product.name}
-                  memberCount={price.memberCount}
-                  claim={price.claim}
-                />
+                <Button
+                  className="mt-4"
+                  disabled={checkoutSessionPriceId !== null}
+                  loading={checkoutSessionPriceId === price.id}
+                  onClick={() => void onSubscribeClick(price.id)}
+                >
+                  <Trans>Subscribe</Trans>
+                </Button>
               </CardContent>
             </MotionCard>
           ))}
@@ -140,178 +141,3 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
     </div>
   );
 };
-
-const BillingDialog = ({
-  priceId,
-  planName,
-  claim,
-}: {
-  priceId: string;
-  planName: string;
-  memberCount: number;
-  claim: string;
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { t } = useLingui();
-  const { toast } = useToast();
-
-  const organisation = useCurrentOrganisation();
-
-  const [subscriptionOption, setSubscriptionOption] = useState<'update' | 'create'>(
-    organisation.type === 'PERSONAL' && claim === INTERNAL_CLAIM_ID.INDIVIDUAL
-      ? 'update'
-      : 'create',
-  );
-
-  const [step, setStep] = useState(0);
-
-  const form = useForm({
-    resolver: zodResolver(ZCreateOrganisationFormSchema),
-    defaultValues: {
-      name: '',
-    },
-  });
-
-  const { mutateAsync: createSubscription, isPending: isCreatingSubscription } =
-    trpc.billing.subscription.create.useMutation();
-
-  const { mutateAsync: createOrganisation, isPending: isCreatingOrganisation } =
-    trpc.organisation.create.useMutation();
-
-  const isPending = isCreatingSubscription || isCreatingOrganisation;
-
-  const onSubscribeClick = async () => {
-    try {
-      let redirectUrl = '';
-
-      if (subscriptionOption === 'update') {
-        const createSubscriptionResponse = await createSubscription({
-          organisationId: organisation.id,
-          priceId,
-        });
-
-        redirectUrl = createSubscriptionResponse.redirectUrl;
-      } else {
-        const createOrganisationResponse = await createOrganisation({
-          name: form.getValues('name'),
-          priceId,
-        });
-
-        if (!createOrganisationResponse.paymentRequired) {
-          setIsOpen(false);
-          return;
-        }
-
-        redirectUrl = createOrganisationResponse.checkoutUrl;
-      }
-
-      window.location.href = redirectUrl;
-    } catch (_err) {
-      toast({
-        title: t`Something went wrong`,
-        description: t`An error occurred while trying to create a checkout session.`,
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(value) => !isPending && setIsOpen(value)}>
-      <DialogTrigger asChild>
-        <Button>
-          <Trans>Subscribe</Trans>
-        </Button>
-      </DialogTrigger>
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Subscribe</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            <Trans>You are about to subscribe to the {planName}</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        {step === 0 ? (
-          <div>
-            <RadioGroup
-              className="space-y-2"
-              value={subscriptionOption}
-              onValueChange={(value) => setSubscriptionOption(value as 'update' | 'create')}
-            >
-              <div className="flex items-start space-x-3 space-y-0">
-                <RadioGroupItem value="update" id="update" />
-                <div className="space-y-1.5 leading-none">
-                  <Label htmlFor="update" className="flex items-center gap-2 font-medium">
-                    <Building2Icon className="h-4 w-4" />
-                    <Trans>Update current organisation</Trans>
-                  </Label>
-                  <p className="text-muted-foreground text-sm">
-                    <Trans>
-                      Upgrade <strong>{organisation.name}</strong> to {planName}
-                    </Trans>
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex items-start space-x-3 space-y-0">
-                <RadioGroupItem value="create" id="create" />
-                <div className="space-y-1.5 leading-none">
-                  <Label htmlFor="create" className="flex items-center gap-2 font-medium">
-                    <PlusIcon className="h-4 w-4" />
-                    <Trans>Create separate organisation</Trans>
-                  </Label>
-                  <p className="text-muted-foreground text-sm">
-                    <Trans>
-                      Create a new organisation with {planName} plan. Keep your current organisation
-                      on it's current plan
-                    </Trans>
-                  </p>
-                </div>
-              </div>
-            </RadioGroup>
-          </div>
-        ) : (
-          <Form {...form}>
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>
-                    <Trans>Organisation Name</Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <Input {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </Form>
-        )}
-
-        <DialogFooter>
-          <DialogClose>
-            <Button disabled={isPending} variant="secondary">
-              <Trans>Close</Trans>
-            </Button>
-          </DialogClose>
-
-          {subscriptionOption === 'create' && step === 0 ? (
-            <Button className="mt-4" loading={isPending} onClick={() => setStep(1)}>
-              <Trans>Continue</Trans>
-            </Button>
-          ) : (
-            <Button className="mt-4" loading={isPending} onClick={() => void onSubscribeClick()}>
-              <Trans>Checkout</Trans>
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -9,10 +9,6 @@ import { z } from 'zod';
 
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { TTemplate } from '@documenso/lib/types/template';
-import {
-  DocumentReadOnlyFields,
-  mapFieldsWithRecipients,
-} from '@documenso/ui/components/document/document-read-only-fields';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -20,6 +16,7 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { ShowFieldItem } from '@documenso/ui/primitives/document-flow/show-field-item';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import {
   Form,
@@ -100,16 +97,14 @@ export const DirectTemplateConfigureForm = ({
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded && (
-          <DocumentReadOnlyFields
-            fields={mapFieldsWithRecipients(
-              directTemplateRecipient.fields,
-              recipientsWithBlankDirectRecipientEmail,
-            )}
-            recipientIds={recipients.map((recipient) => recipient.id)}
-            showRecipientColors={true}
-          />
-        )}
+        {isDocumentPdfLoaded &&
+          directTemplateRecipient.fields.map((field, index) => (
+            <ShowFieldItem
+              key={index}
+              field={field}
+              recipients={recipientsWithBlankDirectRecipientEmail}
+            />
+          ))}
 
         <Form {...form}>
           <fieldset
@@ -130,7 +125,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/direct-template/direct-template-page.tsx

@@ -8,7 +8,6 @@ import { useNavigate, useSearchParams } from 'react-router';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { TTemplate } from '@documenso/lib/types/template';
-import { isRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { trpc } from '@documenso/trpc/react';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
@@ -104,17 +103,11 @@ export const DirectTemplatePageView = ({
         directRecipientEmail: recipient.email,
         templateUpdatedAt: template.updatedAt,
         signedFieldValues: fields.map((field) => {
-          if (isRequiredField(field) && !field.signedValue) {
+          if (!field.signedValue) {
             throw new Error('Invalid configuration');
           }
 
-          return {
-            token: field.signedValue?.token ?? '',
-            fieldId: field.signedValue?.fieldId ?? 0,
-            value: field.signedValue?.value,
-            isBase64: field.signedValue?.isBase64,
-            authOptions: field.signedValue?.authOptions,
-          };
+          return field.signedValue;
         }),
       });
 

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

@@ -17,7 +17,6 @@ import {
   ZTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import type { TTemplate } from '@documenso/lib/types/template';
-import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
@@ -79,10 +78,6 @@ export const DirectTemplateSigningForm = ({
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const fieldsRequiringValidation = useMemo(() => {
-    return localFields.filter((field) => isFieldUnsignedAndRequired(field));
-  }, [localFields]);
-
   const { currentStep, totalSteps, previousStep } = useStep();
 
   const onSignField = (value: TSignFieldWithTokenMutationSchema) => {
@@ -139,18 +134,18 @@ export const DirectTemplateSigningForm = ({
   };
 
   const uninsertedFields = useMemo(() => {
-    return sortFieldsByPosition(fieldsRequiringValidation);
+    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
   }, [localFields]);
 
   const fieldsValidated = () => {
     setValidateUninsertedFields(true);
-    validateFieldsInserted(fieldsRequiringValidation);
+    validateFieldsInserted(localFields);
   };
 
   const handleSubmit = async () => {
     setValidateUninsertedFields(true);
 
-    const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
+    const isFieldsValid = validateFieldsInserted(localFields);
 
     if (!isFieldsValid) {
       return;

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-checkbox-field.tsx

@@ -97,12 +97,6 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      // Do nothing, this should only happen when the user clicks the field, but
-      // misses the checkbox which triggers this callback.
-      if (checkedValues.length === 0) {
-        return;
-      }
-
       if (!isLengthConditionMet) {
         return;
       }
@@ -276,26 +270,21 @@ export const DocumentSigningCheckboxField = ({
               {validationSign?.label} {checkboxValidationLength}
             </FieldToolTip>
           )}
-          <div className="z-50 my-0.5 flex flex-col gap-y-1">
+          <div className="z-50 flex flex-col gap-y-2">
             {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
               const itemValue = item.value || `empty-value-${item.id}`;
 
               return (
-                <div key={index} className="flex items-center">
+                <div key={index} className="flex items-center gap-x-1.5">
                   <Checkbox
-                    className="h-3 w-3"
-                    id={`checkbox-${field.id}-${item.id}`}
+                    className="h-4 w-4"
+                    id={`checkbox-${index}`}
                     checked={checkedValues.includes(itemValue)}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                   />
-                  {!item.value.includes('empty-value-') && item.value && (
-                    <Label
-                      htmlFor={`checkbox-${field.id}-${item.id}`}
-                      className="text-foreground ml-1.5 text-xs font-normal"
-                    >
-                      {item.value}
-                    </Label>
-                  )}
+                  <Label htmlFor={`checkbox-${index}`}>
+                    {item.value.includes('empty-value-') ? '' : item.value}
+                  </Label>
                 </div>
               );
             })}
@@ -304,27 +293,22 @@ export const DocumentSigningCheckboxField = ({
       )}
 
       {field.inserted && (
-        <div className="my-0.5 flex flex-col gap-y-1">
+        <div className="flex flex-col gap-y-1">
           {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
             const itemValue = item.value || `empty-value-${item.id}`;
 
             return (
-              <div key={index} className="flex items-center">
+              <div key={index} className="flex items-center gap-x-1.5">
                 <Checkbox
                   className="h-3 w-3"
-                  id={`checkbox-${field.id}-${item.id}`}
+                  id={`checkbox-${index}`}
                   checked={parsedCheckedValues.includes(itemValue)}
                   disabled={isLoading}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />
-                {!item.value.includes('empty-value-') && item.value && (
-                  <Label
-                    htmlFor={`checkbox-${field.id}-${item.id}`}
-                    className="text-foreground ml-1.5 text-xs font-normal"
-                  >
-                    {item.value}
-                  </Label>
-                )}
+                <Label htmlFor={`checkbox-${index}`} className="text-xs">
+                  {item.value.includes('empty-value-') ? '' : item.value}
+                </Label>
               </div>
             );
           })}

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 });
@@ -279,7 +281,7 @@ export const DocumentSigningCompleteDialog = ({
                 <div className="flex w-full flex-1 flex-nowrap gap-4">
                   <Button
                     type="button"
-                    className="flex-1"
+                    className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                     variant="secondary"
                     onClick={() => setShowDialog(false)}
                     disabled={form.formState.isSubmitting}

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

@@ -142,7 +142,7 @@ export const DocumentSigningDateField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Date</Trans>
         </p>
       )}
@@ -151,10 +151,12 @@ export const DocumentSigningDateField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-foreground w-full whitespace-nowrap text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                '!text-center': parsedFieldMeta?.textAlign === 'center',
-                '!text-right': parsedFieldMeta?.textAlign === 'right',
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >

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

@@ -177,11 +177,15 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {!field.inserted && (
-          <p className="group-hover:text-primary text-foreground flex flex-col items-center justify-center duration-200">
+          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
             <Select value={localChoice} onValueChange={handleSelectItem}>
               <SelectTrigger
                 className={cn(
-                  'text-foreground z-10 h-full w-full border-none ring-0 focus:border-none focus:ring-0',
+                  'text-muted-foreground z-10 h-full w-full border-none ring-0 focus:ring-0',
+                  {
+                    'hover:text-red-300': parsedFieldMeta.required,
+                    'hover:text-yellow-300': !parsedFieldMeta.required,
+                  },
                 )}
               >
                 <SelectValue
@@ -201,7 +205,7 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {field.inserted && (
-          <p className="text-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
             {field.customText}
           </p>
         )}

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

@@ -1,6 +1,7 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -13,14 +14,10 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -123,18 +120,34 @@ export const DocumentSigningEmailField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Email</Trans>
-        </DocumentSigningFieldsUninserted>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText}
-        </DocumentSigningFieldsInserted>
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
+            {field.customText}
+          </p>
+        </div>
       )}
     </DocumentSigningFieldContainer>
   );

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

@@ -2,14 +2,12 @@ import React from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { FieldType } from '@prisma/client';
-import { TooltipArrow } from '@radix-ui/react-tooltip';
 import { X } from 'lucide-react';
 
 import { type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
-import { RECIPIENT_COLOR_STYLES } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
@@ -130,51 +128,57 @@ export const DocumentSigningFieldContainer = ({
   };
 
   return (
-    <div className={cn('[container-type:size]')}>
-      <FieldRootContainer color={RECIPIENT_COLOR_STYLES.green} field={field}>
+    <div className={cn('[container-type:size]', { group: type === 'Checkbox' })}>
+      <FieldRootContainer field={field}>
         {!field.inserted && !loading && !readOnlyField && (
           <button
             type="submit"
-            className="absolute inset-0 z-10 h-full w-full rounded-[2px]"
+            className="absolute inset-0 z-10 h-full w-full rounded-md border"
             onClick={async () => handleInsertField()}
           />
         )}
 
         {readOnlyField && (
           <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
-            <span className="bg-foreground/50 text-background rounded-xl p-2">
+            <span className="bg-foreground/50 dark:bg-background/50 text-background dark:text-foreground rounded-xl p-2">
               <Trans>Read only field</Trans>
             </span>
           </button>
         )}
 
+        {type === 'Date' && field.inserted && !loading && !readOnlyField && (
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <button
+                className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+                onClick={onRemoveSignedFieldClick}
+              >
+                <Trans>Remove</Trans>
+              </button>
+            </TooltipTrigger>
+
+            {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
+          </Tooltip>
+        )}
+
         {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
           <button
-            className="absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
+            className="dark:bg-background absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
             onClick={() => void onClearCheckBoxValues(type)}
           >
-            <span className="rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
+            <span className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
               <X className="h-4 w-4" />
             </span>
           </button>
         )}
 
-        {type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
-          <Tooltip delayDuration={0}>
-            <TooltipTrigger asChild>
-              <button className="absolute inset-0 z-10" onClick={onRemoveSignedFieldClick}></button>
-            </TooltipTrigger>
-
-            <TooltipContent
-              className="border-0 bg-orange-300 fill-orange-300 text-orange-900"
-              sideOffset={2}
-            >
-              {tooltipText && <p>{tooltipText}</p>}
-
-              <Trans>Remove</Trans>
-              <TooltipArrow />
-            </TooltipContent>
-          </Tooltip>
+        {type !== 'Date' && type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <button
+            className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+            onClick={onRemoveSignedFieldClick}
+          >
+            <Trans>Remove</Trans>
+          </button>
         )}
 
         {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&

apps/remix/app/components/general/document-signing/document-signing-fields.tsx

@@ -1,51 +0,0 @@
-import { Loader } from 'lucide-react';
-
-import { cn } from '@documenso/ui/lib/utils';
-
-export const DocumentSigningFieldsLoader = () => {
-  return (
-    <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-      <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-    </div>
-  );
-};
-
-export const DocumentSigningFieldsUninserted = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
-      {children}
-    </p>
-  );
-};
-
-type DocumentSigningFieldsInsertedProps = {
-  children: React.ReactNode;
-
-  /**
-   * The text alignment of the field.
-   *
-   * Defaults to left.
-   */
-  textAlign?: 'left' | 'center' | 'right';
-};
-
-export const DocumentSigningFieldsInserted = ({
-  children,
-  textAlign = 'left',
-}: DocumentSigningFieldsInsertedProps) => {
-  return (
-    <div className="flex h-full w-full items-center">
-      <p
-        className={cn(
-          'text-foreground w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-          {
-            '!text-center': textAlign === 'center',
-            '!text-right': textAlign === 'right',
-          },
-        )}
-      >
-        {children}
-      </p>
-    </div>
-  );
-};

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

@@ -1,12 +1,12 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { ZInitialsFieldMeta } from '@documenso/lib/types/field-meta';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -17,11 +17,6 @@ import type {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -55,9 +50,6 @@ export const DocumentSigningInitialsField = ({
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
-  const safeFieldMeta = ZInitialsFieldMeta.safeParse(field.fieldMeta);
-  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
-
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
       const value = initials ?? '';
@@ -130,18 +122,22 @@ export const DocumentSigningInitialsField = ({
       onRemove={onRemove}
       type="Initials"
     >
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Initials</Trans>
-        </DocumentSigningFieldsUninserted>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
-        </DocumentSigningFieldsInserted>
+        </p>
       )}
     </DocumentSigningFieldContainer>
   );

apps/remix/app/components/general/document-signing/document-signing-name-field.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 { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -15,6 +16,7 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
@@ -23,11 +25,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -169,18 +166,34 @@ export const DocumentSigningNameField = ({
       onRemove={onRemove}
       type="Name"
     >
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>
+        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
           <Trans>Name</Trans>
-        </DocumentSigningFieldsUninserted>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText}
-        </DocumentSigningFieldsInserted>
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
+            {field.customText}
+          </p>
+        </div>
       )}
 
       <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
@@ -189,7 +202,7 @@ export const DocumentSigningNameField = ({
             <Trans>
               Sign as
               <div>
-                {recipient.name} <div className="text-foreground">({recipient.email})</div>
+                {recipient.name} <div className="text-muted-foreground">({recipient.email})</div>
               </div>
             </Trans>
           </DialogTitle>
@@ -211,7 +224,7 @@ export const DocumentSigningNameField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="flex-1"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 onClick={() => {
                   setShowFullNameModal(false);

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { Hash, Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
@@ -24,11 +25,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 type ValidationErrors = {
@@ -249,16 +245,45 @@ export const DocumentSigningNumberField = ({
       onRemove={onRemove}
       type="Number"
     >
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>{fieldDisplayName}</DocumentSigningFieldsUninserted>
+        <p
+          className={cn(
+            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
+            {
+              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
+              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
+            },
+          )}
+        >
+          <span className="flex items-center justify-center gap-x-1">
+            <Hash className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{fieldDisplayName}</span>
+          </span>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText}
-        </DocumentSigningFieldsInserted>
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
+            {field.customText}
+          </p>
+        </div>
       )}
 
       <Dialog open={showNumberModal} onOpenChange={setShowNumberModal}>
@@ -314,7 +339,7 @@ export const DocumentSigningNumberField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="flex-1"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 onClick={() => {
                   setShowNumberModal(false);

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

@@ -19,7 +19,6 @@ import {
 import type { CompletedField } from '@documenso/lib/types/fields';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@@ -37,6 +36,7 @@ import { DocumentSigningRadioField } from '~/components/general/document-signing
 import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
@@ -156,11 +156,7 @@ export const DocumentSigningPageView = ({
           </div>
         </div>
 
-        <DocumentReadOnlyFields
-          documentMeta={documentMeta || undefined}
-          fields={completedFields}
-          showRecipientTooltip={true}
-        />
+        <DocumentReadOnlyFields documentMeta={documentMeta || undefined} fields={completedFields} />
 
         {recipient.role !== RecipientRole.ASSISTANT && (
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -20,7 +21,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import { DocumentSigningFieldsLoader } from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningRadioFieldProps = {
@@ -150,52 +150,44 @@ export const DocumentSigningRadioField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Radio">
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <RadioGroup
-          onValueChange={(value) => handleSelectItem(value)}
-          className="z-10 my-0.5 gap-y-1"
-        >
+        <RadioGroup onValueChange={(value) => handleSelectItem(value)} className="z-10">
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center">
+            <div key={index} className="flex items-center gap-x-1.5">
               <RadioGroupItem
-                className="h-3 w-3 shrink-0"
+                className="h-4 w-4 shrink-0"
                 value={item.value}
-                id={`option-${field.id}-${item.id}`}
+                id={`option-${index}`}
                 checked={item.checked}
               />
-              {!item.value.includes('empty-value-') && item.value && (
-                <Label
-                  htmlFor={`option-${field.id}-${item.id}`}
-                  className="text-foreground ml-1.5 text-xs font-normal"
-                >
-                  {item.value}
-                </Label>
-              )}
+
+              <Label htmlFor={`option-${index}`}>
+                {item.value.includes('empty-value-') ? '' : item.value}
+              </Label>
             </div>
           ))}
         </RadioGroup>
       )}
 
       {field.inserted && (
-        <RadioGroup className="my-0.5 gap-y-1">
+        <RadioGroup className="gap-y-1">
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center">
+            <div key={index} className="flex items-center gap-x-1.5">
               <RadioGroupItem
                 className="h-3 w-3"
                 value={item.value}
-                id={`option-${field.id}-${item.id}`}
+                id={`option-${index}`}
                 checked={item.value === field.customText}
               />
-              {!item.value.includes('empty-value-') && item.value && (
-                <Label
-                  htmlFor={`option-${field.id}-${item.id}`}
-                  className="text-foreground ml-1.5 text-xs font-normal"
-                >
-                  {item.value}
-                </Label>
-              )}
+              <Label htmlFor={`option-${index}`} className="text-xs">
+                {item.value.includes('empty-value-') ? '' : item.value}
+              </Label>
             </div>
           ))}
         </RadioGroup>

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

@@ -242,7 +242,7 @@ export const DocumentSigningSignatureField = ({
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground group-hover:text-recipient-green text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200">
+        <p className="group-hover:text-primary font-signature text-muted-foreground text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200 group-hover:text-yellow-300">
           <Trans>Signature</Trans>
         </p>
       )}
@@ -259,7 +259,7 @@ export const DocumentSigningSignatureField = ({
         <div ref={containerRef} className="flex h-full w-full items-center justify-center p-2">
           <p
             ref={signatureRef}
-            className="font-signature text-muted-foreground w-full overflow-hidden break-all text-center leading-tight duration-200"
+            className="font-signature text-muted-foreground dark:text-background w-full overflow-hidden break-all text-center leading-tight duration-200"
             style={{ fontSize: `${fontSize}rem` }}
           >
             {signature?.typedSignature}
@@ -291,7 +291,7 @@ export const DocumentSigningSignatureField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="flex-1"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 onClick={() => {
                   setShowSignatureModal(false);

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
+import { Loader, Type } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
@@ -24,11 +25,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningTextFieldProps = {
@@ -252,20 +248,49 @@ export const DocumentSigningTextField = ({
       onRemove={onRemove}
       type="Text"
     >
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>
-          {fieldDisplayName || <Trans>Text</Trans>}
-        </DocumentSigningFieldsUninserted>
+        <p
+          className={cn(
+            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
+            {
+              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
+              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
+            },
+          )}
+        >
+          <span className="flex items-center justify-center gap-x-1">
+            <Type className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+              {fieldDisplayName || <Trans>Text</Trans>}
+            </span>
+          </span>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText.length < 20
-            ? field.customText
-            : field.customText.substring(0, 20) + '...'}
-        </DocumentSigningFieldsInserted>
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
+            {field.customText.length < 20
+              ? field.customText
+              : field.customText.substring(0, 20) + '...'}
+          </p>
+        </div>
       )}
 
       <Dialog open={showCustomTextModal} onOpenChange={setShowCustomTextModal}>
@@ -279,9 +304,11 @@ export const DocumentSigningTextField = ({
               id="custom-text"
               placeholder={parsedFieldMeta?.placeholder ?? _(msg`Enter your text here`)}
               className={cn('mt-2 w-full rounded-md', {
-                'border-2 border-red-300 text-left ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
                   userInputHasErrors,
-                'text-center': parsedFieldMeta?.textAlign === 'center',
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
                 'text-right': parsedFieldMeta?.textAlign === 'right',
               })}
               value={localText}
@@ -327,8 +354,8 @@ export const DocumentSigningTextField = ({
             <div className="mt-4 flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
-                className="flex-1"
                 onClick={() => {
                   setShowCustomTextModal(false);
                   setLocalCustomText('');

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,190 +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 { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-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 { useCurrentTeam } 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 = useCurrentTeam();
-
-  const navigate = useNavigate();
-  const analytics = useAnalytics();
-  const organisation = useCurrentOrganisation();
-
-  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(`/o/${organisation.url}/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(`${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={`/o/${organisation.url}/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

@@ -181,8 +181,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,
@@ -227,7 +227,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

@@ -19,7 +19,7 @@ export type DocumentPageViewButtonProps = {
   document: Document & {
     user: Pick<User, 'id' | 'name' | 'email'>;
     recipients: Recipient[];
-    team: Pick<Team, 'id' | 'url'>;
+    team: Pick<Team, 'id' | 'url'> | null;
   };
 };
 
@@ -37,8 +37,7 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
 
-  const documentsPath = formatDocumentsPath(document.team.url);
-  const formatPath = `${documentsPath}/${document.id}/edit`;
+  const documentsPath = formatDocumentsPath(document.team?.url);
 
   const onDownloadClick = async () => {
     try {
@@ -102,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';
@@ -67,7 +68,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const isCurrentTeamDocument = team && document.team?.url === team.url;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
-  const documentsPath = formatDocumentsPath(team.url);
+  const documentsPath = formatDocumentsPath(team?.url);
 
   const onDownloadClick = async () => {
     try {
@@ -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-read-only-fields.tsx

@@ -0,0 +1,171 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentMeta, TemplateMeta } from '@prisma/client';
+import { FieldType, SigningStatus } from '@prisma/client';
+import { Clock, EyeOffIcon } from 'lucide-react';
+import { P, match } from 'ts-pattern';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+
+export type DocumentReadOnlyFieldsProps = {
+  fields: DocumentField[];
+  documentMeta?: DocumentMeta | TemplateMeta;
+  showFieldStatus?: boolean;
+};
+
+export const DocumentReadOnlyFields = ({
+  documentMeta,
+  fields,
+  showFieldStatus = true,
+}: DocumentReadOnlyFieldsProps) => {
+  const { _ } = useLingui();
+
+  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
+
+  const handleHideField = (fieldId: string) => {
+    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
+  };
+
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map(
+        (field) =>
+          !hiddenFieldIds[field.secondaryId] && (
+            <FieldRootContainer
+              field={field}
+              key={field.id}
+              cardClassName="border-gray-300/50 !shadow-none backdrop-blur-[1px] bg-gray-50 ring-0 ring-offset-0"
+            >
+              <div className="absolute -right-3 -top-3">
+                <PopoverHover
+                  trigger={
+                    <Avatar className="dark:border-foreground h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
+                      <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
+                        {extractInitials(field.recipient.name || field.recipient.email)}
+                      </AvatarFallback>
+                    </Avatar>
+                  }
+                  contentProps={{
+                    className: 'relative flex w-fit flex-col p-4 text-sm',
+                  }}
+                >
+                  {showFieldStatus && (
+                    <Badge
+                      className="mx-auto mb-1 py-0.5"
+                      variant={
+                        field.recipient.signingStatus === SigningStatus.SIGNED
+                          ? 'default'
+                          : 'secondary'
+                      }
+                    >
+                      {field.recipient.signingStatus === SigningStatus.SIGNED ? (
+                        <>
+                          <SignatureIcon className="mr-1 h-3 w-3" />
+                          <Trans>Signed</Trans>
+                        </>
+                      ) : (
+                        <>
+                          <Clock className="mr-1 h-3 w-3" />
+                          <Trans>Pending</Trans>
+                        </>
+                      )}
+                    </Badge>
+                  )}
+
+                  <p className="text-center font-semibold">
+                    <span>{parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])} field</span>
+                  </p>
+
+                  <p className="text-muted-foreground mt-1 text-center text-xs">
+                    {field.recipient.name
+                      ? `${field.recipient.name} (${field.recipient.email})`
+                      : field.recipient.email}{' '}
+                  </p>
+
+                  <button
+                    className="absolute right-0 top-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
+                    onClick={() => handleHideField(field.secondaryId)}
+                    title="Hide field"
+                  >
+                    <EyeOffIcon className="h-3 w-3" />
+                  </button>
+                </PopoverHover>
+              </div>
+
+              <div className="text-muted-foreground dark:text-background/70 break-all text-sm">
+                {field.recipient.signingStatus === SigningStatus.SIGNED &&
+                  match(field)
+                    .with({ type: FieldType.SIGNATURE }, (field) =>
+                      field.signature?.signatureImageAsBase64 ? (
+                        <img
+                          src={field.signature.signatureImageAsBase64}
+                          alt="Signature"
+                          className="h-full w-full object-contain dark:invert"
+                        />
+                      ) : (
+                        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl">
+                          {field.signature?.typedSignature}
+                        </p>
+                      ),
+                    )
+                    .with(
+                      {
+                        type: P.union(
+                          FieldType.NAME,
+                          FieldType.INITIALS,
+                          FieldType.EMAIL,
+                          FieldType.NUMBER,
+                          FieldType.RADIO,
+                          FieldType.CHECKBOX,
+                          FieldType.DROPDOWN,
+                        ),
+                      },
+                      () => field.customText,
+                    )
+                    .with({ type: FieldType.TEXT }, () => field.customText.substring(0, 20) + '...')
+                    .with({ type: FieldType.DATE }, () =>
+                      convertToLocalSystemFormat(
+                        field.customText,
+                        documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+                        documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+                      ),
+                    )
+                    .with({ type: FieldType.FREE_SIGNATURE }, () => null)
+                    .exhaustive()}
+
+                {field.recipient.signingStatus === SigningStatus.NOT_SIGNED && (
+                  <p
+                    className={cn('text-muted-foreground text-lg duration-200', {
+                      'font-signature sm:text-xl md:text-2xl':
+                        field.type === FieldType.SIGNATURE ||
+                        field.type === FieldType.FREE_SIGNATURE,
+                    })}
+                  >
+                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
+                  </p>
+                )}
+              </div>
+            </FieldRootContainer>
+          ),
+      )}
+    </ElementVisible>
+  );
+};

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

@@ -3,12 +3,12 @@ import { useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { useNavigate, useParams } from 'react-router';
+import { Loader } from 'lucide-react';
+import { useNavigate } 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 { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -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 { useCurrentTeam } from '~/providers/team';
@@ -36,13 +30,11 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
   const { _ } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
-  const { folderId } = useParams();
 
   const team = useCurrentTeam();
 
   const navigate = useNavigate();
   const analytics = useAnalytics();
-  const organisation = useCurrentOrganisation();
 
   const userTimezone =
     TIME_ZONES.find((timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone) ??
@@ -55,12 +47,10 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
   const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
   const disabledMessage = useMemo(() => {
-    if (organisation.subscription && remaining.documents === 0) {
-      return msg`Document upload disabled due to unpaid invoices`;
-    }
-
     if (remaining.documents === 0) {
-      return msg`You have reached your document limit.`;
+      return team
+        ? msg`Document upload disabled due to unpaid invoices`
+        : msg`You have reached your document limit.`;
     }
 
     if (!user.emailVerified) {
@@ -79,13 +69,10 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         title: file.name,
         documentDataId: response.id,
         timezone: userTimezone,
-        folderId: folderId ?? undefined,
       });
 
       void refreshLimits();
 
-      await navigate(`${formatDocumentsPath(team.url)}/${id}/edit`);
-
       toast({
         title: _(msg`Document uploaded`),
         description: _(msg`Your document has been uploaded successfully.`),
@@ -97,6 +84,8 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         documentId: id,
         timestamp: new Date().toISOString(),
       });
+
+      await navigate(`${formatDocumentsPath(team?.url)}/${id}/edit`);
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -132,33 +121,31 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
 
   return (
     <div className={cn('relative', className)}>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div>
-              <DocumentDropzone
-                loading={isLoading}
-                disabled={remaining.documents === 0 || !user.emailVerified}
-                disabledMessage={disabledMessage}
-                onDrop={onFileDrop}
-                onDropRejected={onFileDropRejected}
-              />
-            </div>
-          </TooltipTrigger>
+      <DocumentDropzone
+        className="h-[min(400px,50vh)]"
+        disabled={remaining.documents === 0 || !user.emailVerified}
+        disabledMessage={disabledMessage}
+        onDrop={onFileDrop}
+        onDropRejected={onFileDropRejected}
+      />
 
-          {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>
+      <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">
+          <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
+        </div>
+      )}
     </div>
   );
 };

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