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

README.md

@@ -247,14 +247,14 @@ Now you can install the dependencies and build it:
 
 ```
 npm i
-npm run build
+npm run build:web
 npm run prisma:migrate-deploy
 ```
 
 Finally, you can start it with:
 
 ```
-cd apps/remix
+cd apps/web
 npm run start
 ```
 
@@ -275,7 +275,7 @@ After=network.target
 Environment=PATH=/path/to/your/node/binaries
 Type=simple
 User=www-data
-WorkingDirectory=/var/www/documenso/apps/remix
+WorkingDirectory=/var/www/documenso/apps/web
 ExecStart=/usr/bin/next start -p 3500
 TimeoutSec=15
 Restart=always

apps/documentation/.gitignore

@@ -34,8 +34,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# next-sitemap output
-/public/sitemap.xml
-/public/robots.txt
-/public/sitemap-*.xml

apps/documentation/next-sitemap.config.js

@@ -1,5 +0,0 @@
-/** @type {import('next-sitemap').IConfig} */
-module.exports = {
-  siteUrl: 'https://docs.documenso.com', // Replace with your actual site URL
-  generateRobotsTxt: true, // Generates robots.txt
-};

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

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev -p 3002",
-    "build": "next build && next-sitemap",
+    "build": "next build",
     "start": "next start -p 3002",
     "lint:fix": "next lint --fix",
     "clean": "rimraf .next && rimraf node_modules"
@@ -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",
@@ -26,7 +26,6 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "next-sitemap": "^4.2.3",
     "typescript": "5.6.2"
   }
-}
+}

apps/documentation/pages/developers/_meta.json

@@ -5,7 +5,6 @@
     "title": "Development & Deployment"
   },
   "local-development": "Local Development",
-  "developer-mode": "Developer Mode",
   "self-hosting": "Self Hosting",
   "contributing": "Contributing",
   "-- API & Integration Guides": {

apps/documentation/pages/developers/developer-mode/field-coordinates.mdx

@@ -1,18 +0,0 @@
----
-title: Field Coordinates
-description: Learn how to get the coordinates of a field in a document.
----
-
-## Field Coordinates
-
-Field coordinates represent the position of a field in a document. They are returned in the `pageX` and `pageY` properties of the field.
-
-To enable field coordinates, you can use the `devmode` query parameter.
-
-```bash
-https://app.documenso.com/documents/<document-id>/edit?devmode=true
-```
-
-You should then see the coordinates on top of each field.
-
-![Field Coordinates](/developer-mode/field-coordinates.webp)

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

@@ -6,12 +6,11 @@
     "title": "How To Use"
   },
   "get-started": "Get Started",
-  "profile": "Public Profile",
-  "organisations": "Organisations",
-  "documents": "Documents",
+  "profile": "User Profile",
+  "signing-documents": "Signing Documents",
   "templates": "Templates",
-  "branding": "Branding",
   "direct-links": "Direct Signing Links",
+  "teams": "Teams",
   "-- Legal Overview": {
     "type": "separator",
     "title": "Legal Overview"
@@ -19,4 +18,4 @@
   "fair-use": "Fair Use Policy",
   "licenses": "Licenses",
   "compliance": "Compliance"
-}
+}

apps/documentation/pages/users/branding.mdx

@@ -1,28 +0,0 @@
----
-title: Branding Preferences
-description: Learn how to set the branding preferences for your team account.
----
-
-import Image from 'next/image';
-
-import { Callout, Steps } from 'nextra/components';
-
-# Branding Preferences
-
-Branding preferences allow you to set the default settings when emailing documents to your recipients.
-
-## Preferences
-
-Branding preferences can be set on either the organisation or team level.
-
-By default, teams inherit the preferences from the organisation. You can override these preferences on the team level at any time.
-
-To access the preferences, navigate to either the organisation or teams settings page and click the **Preferences** tab. This page contains both the preferences for documents and branding, the branding section is located at the bottom of the page.
-
-![A screenshot of the organisation's document preferences page](/organisations/organisation-branding.webp)
-
-On this page, you can:
-
-- **Upload a Logo** - Upload your team's logo to be displayed instead of the default Documenso logo.
-- **Set the Brand Website** - Enter the URL of your team's website to be displayed in the email communications sent by the team.
-- **Add Additional Brand Details** - You can add additional information to display at the bottom of the emails sent by the team. This can include contact information, social media links, and other relevant details.

apps/documentation/pages/users/documents/_meta.json

@@ -1,5 +0,0 @@
-{
-  "sending-documents": "Sending Documents",
-  "document-preferences": "Document Preferences",
-  "document-visibility": "Document Visibility"
-}

apps/documentation/pages/users/documents/document-preferences.mdx

@@ -1,42 +0,0 @@
----
-title: Preferences
-description: Learn how to manage your team's global preferences.
----
-
-import Image from 'next/image';
-
-import { Callout, Steps } from 'nextra/components';
-
-# Document Preferences
-
-Document preferences allow you to set the default settings when creating new documents and templates.
-
-For example, you can set the default language for documents sent by the team, or set the allowed signatures types.
-
-## Preferences
-
-Document preferences can be set on either the organisation or team level.
-
-By default, teams inherit the preferences from the organisation. You can override these preferences on the team level at any time.
-
-To access the preferences, navigate to either the organisation or teams settings page and click the **Preferences** tab.
-
-![A screenshot of the organisation's document preferences page](/organisations/organisation-document-preferences.webp)
-
-- **Document Visibility** - Set the default visibility of the documents created by team members. Learn more about [document visibility](/users/documents/document-visibility).
-- **Default Document Language** - This setting allows you to set the default language for the documents uploaded in the organisation. The default language is used as the default language in the email communications with the document recipients.
-- **Signature Settings** - Controls what signatures are allowed to be used when signing the documents.
-- **Sender Details** - Set whether the sender's name should be included in the emails sent by the team. See more below [sender details](/users/documents/document-preferences#sender-details).
-- **Include the Signing Certificate** - This setting controls whether the signing certificate should be included in the signed documents. If enabled, the signing certificate is included in the signed documents. If disabled, the signing certificate is not included in the signed documents. Regardless of this setting, the signing certificate is always available in the document's audit log page.
-
-Document visibility, language and signature settings can be overriden on a per document basis.
-
-### Sender Details
-
-If the **Sender Details** setting is enabled, the emails sent by the team will include the sender's name. The email will say:
-
-> "Example User" on behalf of "Example Team" has invited you to sign "document.pdf"
-
-If the **Sender Details** setting is disabled, the emails sent by the team will not include the sender's name. The email will say:
-
-> "Example Team" has invited you to sign "document.pdf"

apps/documentation/pages/users/get-started/account-creation.mdx

@@ -10,7 +10,7 @@ import { Callout, Steps } from 'nextra/components';
 <Steps>
 ### Pick a Plan
 
-The first step to start using Documenso is to pick a plan and create an account. At the moment of writing this guide, we have 3 plans available: Free, Individual, Teams and Platform.
+The first step to start using Documenso is to pick a plan and create an account. At the moment of writing this guide, we have 3 plans available: Free, Individual, and Teams.
 
 Explore each plan's features and choose the one that best suits your needs. The [pricing page](https://documen.so/pricing) has more information about the plans.
 
@@ -28,6 +28,6 @@ You can claim a premium username by upgrading to a paid plan. After upgrading to
 
 ### Optional: Create a Team
 
-If you are working with others, you can create a team and invite your team members to collaborate on your documents. More information about teams is available in the [Teams section](/users/organisations/teams).
+If you are working with others, you can create a team and invite your team members to collaborate on your documents. More information about teams is available in the [Teams section](/users/get-started/teams).
 
 </Steps>

apps/documentation/pages/users/get-started/teams.mdx

@@ -0,0 +1,99 @@
+---
+title: Teams
+description: Learn how to create and manage teams in Documenso.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Teams
+
+Documenso allows you to create teams to collaborate with others on creating and signing documents.
+
+<Steps>
+
+### Create a New Team
+
+Anyone can create a team from their account by clicking on the "+" (plus) button in the "Teams" section from the account dropdown.
+
+![Documenso account dropdown menu](/get-started-images/add-team.webp)
+
+Each team is a separate entity with its members, documents, and templates. You can create as many teams as you like but remember that each team is billed separately.
+
+<Callout type="info">You can transfer the ownership of the team at any time.</Callout>
+
+### Name and URL
+
+Clicking the "+" button will open a modal where you must pick your team's name and URL. The URL is the team's identifier and will link to the team's page and settings. An example URL would be:
+
+```bash
+https://app.documenso.com/t/<your-team-name>
+```
+
+![Documenso create team modal](/get-started-images/add-team-2.webp)
+
+You can select a different name and URL for your team, but we recommend using the same or similar name.
+
+### Invite Team Members
+
+After creating the team, you can invite team members by navigating to the "Members" tab in the team settings and clicking the "Invite member" button.
+
+To access the team settings, click on the team's name in the account dropdown and select the appropriate team. Lastly, click again on the avatar and then "Team Settings".
+
+Or you can copy this URL:
+
+```bash
+https://app.documenso.com/t/<your-team-name>/settings/members
+```
+
+Once you click on the "Invite member" button, you will be prompted to enter the email address of the person you want to invite. You can also select the role of the person you are inviting.
+
+![Invite team members in Documenso dashboard](/get-started-images/add-team-members-documenso.webp)
+
+You can also bulk-invite members by uploading a CSV file with the email addresses and roles of the people you want to invite.
+
+The table below shows how the CSV file should be structured:
+
+| Email address              | Role    |
+| -------------------------- | ------- |
+| team-admin@documenso.com   | Admin   |
+| team-manager@documenso.com | Manager |
+| team-member@documenso.com  | Member  |
+
+<Callout type="info">
+  The basic team plan includes 5 members. You can invite as many members as you like by upgrading
+  your team's seats on the team's billing page.
+</Callout>
+
+#### Roles
+
+You can assign different permissions to team members based on their roles. The roles available are:
+
+|  Role   | Create, Edit, Send Documents | Manage Users | Manage Admins | Settings | Billing | Delete/ Transfer |
+| :-----: | :--------------------------: | :----------: | :-----------: | :------: | :-----: | :--------------: |
+| Member  |              ✅              |      ❌      |      ❌       |    ❌    |   ❌    |        ❌        |
+| Manager |              ✅              |      ✅      |      ❌       |    ✅    |   ✅    |        ❌        |
+|  Admin  |              ✅              |      ✅      |      ✅       |    ✅    |   ✅    |        ❌        |
+|  Owner  |              ✅              |      ✅      |      ✅       |    ✅    |   ✅    |        ✅        |
+
+### Set a Team Email
+
+You can add a team email to make signing and sending documents easier. Adding a team email allows you to:
+
+- See a signing request sent to this email (Team Inbox)
+- See all documents sent on behalf of the team
+
+### (Optional) Transfer Team Ownership
+
+You can transfer the team's ownership at any time. To do this, navigate to the "General" tab in the team settings and click the "Transfer team" button.
+
+Use this URL to get to the team settings:
+
+```bash
+https://app.documenso.com/t/<your-team-name>/settings
+```
+
+### [Send your First Document](https://app.documenso.com/)
+
+</Steps>

apps/documentation/pages/users/organisations/_meta.json

@@ -1,7 +0,0 @@
-{
-  "index": "Introduction",
-  "members": "Members",
-  "groups": "Groups",
-  "teams": "Teams",
-  "billing": "Billing"
-}

apps/documentation/pages/users/organisations/billing.mdx

@@ -1,19 +0,0 @@
----
-title: Billing
-description: Learn how to manage your organisation's billing and subscription.
----
-
-import Image from 'next/image';
-
-import { Callout, Steps } from 'nextra/components';
-
-### Billing and Subscription Management
-
-Organisations handle billing centrally, making it easier to manage:
-
-- **Unified Billing**: One subscription covers all teams in the organisation
-- **Seat Management**: Add or remove seats across all teams automatically (Teams plan)
-
-You can change plans, view invoices and manage your subscription from the billing page which is accessible from the organisation settings.
-
-![A screenshot of the organisation's billing page](/organisations/organisations-billing.webp)

apps/documentation/pages/users/organisations/groups.mdx

@@ -1,75 +0,0 @@
----
-title: Preferences
-description: Learn how to manage your team's global preferences.
----
-
-import Image from 'next/image';
-
-import { Callout, Steps } from 'nextra/components';
-
-# Organisation Groups
-
-Organisation groups are a powerful administrative tool that streamlines user management across your entire organisation. Instead of manually assigning individual users to multiple teams, groups allow you to manage access at scale.
-
-This automated approach ensures consistent permissions while reducing administrative overhead for tasks like onboarding employees or managing contractor access.
-
-## Understanding groups
-
-### Key Benefits
-
-- **Instant Access Management**: New hires get immediate, appropriate access across all relevant teams
-- **Bulk Operations**: Remove an entire group (like a departing contractor team) and all members lose access simultaneously
-- **Role Consistency**: Ensure the same role is applied consistently across teams—no more accidentally giving admin access when member access was intended
-- **Audit Trail**: Easily track which groups have access to which teams
-
-### Example use case: Legal Compliance Team
-
-Imagine you have a legal compliance team that needs access to review documents across all departments. Instead of manually adding each legal team member to every departmental team (Sales, Marketing, HR, Operations), you can:
-
-1. Create a "Legal Compliance" group with the "Member" Organisation Role
-2. Add legal team members to this group
-3. Assign the "Legal Compliance" group to the required teams
-
-Now, when Sarah from Legal joins the company, you can simply add her to the "Legal Compliance" group. Once added, she automatically gains access to all teams the "Legal Compliance" group is assigned to.
-
-When John from Legal leaves the company, you remove him from the group and his access is instantly revoked across all teams.
-
-## Getting started with groups
-
-Navigate to the "Groups" section in your organisation settings to create and manage groups.
-
-There are two types of roles when using groups:
-
-- **Organisation Role**: A global organisation role given to all members of the group
-- **Team Role**: A team role you select when assigning the group to a team
-
-You should generally have the "Organisation Role" set to "Organisation Member", otherwise these members would by default have access to all teams anyway due to the high organisation role.
-
-### Creating Custom Groups
-
-When creating a custom group, you can:
-
-1. **Name the Group**: Give it a descriptive name that reflects its purpose
-2. **Set Organisation Role**: Define the default **organisation role** for group members
-3. **Add Members**: Include organisation members in the group
-
-![Organisation group creation](/organisations/organisation-group-create.webp)
-
-### Manage Custom Groups
-
-By clicking the "Manage" button on a custom group, you can view all teams it is assigned to and modify the group's settings.
-
-![Organisation group management](/organisations/organisation-group-manage.webp)
-
-### Assigning a group to a team
-
-To assign a group to a team, you need to navigate to the team settings and click the "Groups" tab.
-
-![Organisation group assignment](/organisations/organisation-group-assignment.webp)
-
-From here, click the "Add groups" button to begin the process of assigning a group to a team. Once you have added the group you can see that the members have been automatically added to the team in the members tab.
-
-## What's next?
-
-- [Create Your First Team](/users/organisations/teams)
-- [Manage Default Settings](/users/documents/document-preferences)

apps/documentation/pages/users/organisations/index.mdx

@@ -1,65 +0,0 @@
----
-title: Organisations
-description: Learn how to create and manage organisations in Documenso.
----
-
-import Image from 'next/image';
-
-import { Callout, Steps } from 'nextra/components';
-
-# Organisations
-
-Organisations allow you to manage multiple teams and users under a single managed entity. This powerful feature enables enterprise-level collaboration and streamlined management across your entire organisation.
-
-## What are Organisations?
-
-Organisations are the top-level entity in Documenso's hierarchy structure:
-
-![Organisations diagram](/organisations/organisations-basic-diagram.webp)
-
-Each organisation can contain multiple teams, and each team can have multiple members. This structure provides:
-
-- **Centralized Management**: Control multiple teams from a single organisational dashboard
-- **Unified Billing**: Manage billing and subscriptions at the organisation level
-- **Access Control**: Define roles and groups across the entire organisation
-- **Group Management**: Create custom groups to organise members and control team access
-- **Global Settings**: Apply consistent settings across all teams in your organisation
-
-## Create a new organisation
-
-You can create multiple organisations, but each organisation will be billed separately.
-
-<Steps>
-
-### Creating Organisations
-
-To create a new organisation, navigate to the organisation section in your account settings and click the "Create Organisation" button.
-
-![Create organisation in Documenso dashboard](/organisations/organisations-create.webp)
-
-### Select your plan
-
-Choose from our range of plans for your new organisation. If you want to instead upgrade your current organisation, you can do so by going into your settings billing page and upgrade it there.
-
-### Name setup
-
-When creating an organisation, you'll need to provide:
-
-- **Organisation Name**: The display name for your organisation
-
-</Steps>
-
-Once your organisation is established, you can create teams to organise your work and collaborate effectively. Each team operates independently but inherits organisation-level settings and branding.
-
-## Best Practices for Organisation Management
-
-1. **Use groups effectively**: Leverage groups to simplify permission management
-2. **Set default settings**: Configure organisation-wide settings for consistency
-
-## What's next?
-
-- [Create Your First Team](/users/organisations/teams)
-- [Invite Organisation Members](/users/organisations/members)
-- [Create Organisation Groups](/users/organisations/groups)
-- [Manage Default Settings](/users/documents/document-preferences)
-- [Manage Default Branding](/users/branding)

apps/documentation/pages/users/organisations/members.mdx

@@ -1,65 +0,0 @@
----
-title: Members
-description: Learn how to invite and manage your organisation's members.
----
-
-import Image from 'next/image';
-
-import { Callout, Steps } from 'nextra/components';
-
-# Organisation Members
-
-Organisation members are the core users of your organisation. They are the ones who can access the team resources and collaborate with other members.
-
-## Organisation Roles
-
-You can assign different permissions to organisation members by using roles. The roles available are:
-
-|         Role         | Manage Settings/Teams/Members | Billing | Delete Organisation |
-| :------------------: | :---------------------------: | :-----: | ------------------- |
-|  Organisation Owner  |              ✅               |   ✅    | ✅                  |
-|  Organisation Admin  |              ✅               |   ✅    | ✅                  |
-| Organisation Manager |              ✅               |   ❌    | ❌                  |
-| Organisation Member  |              ❌               |   ❌    | ❌                  |
-
-<Callout type="info">
-  Organisation admins and managers will automatically have access to all teams as the "Team Admin"
-  role. When creating a team you can also decide whether to automatically allow normal members to
-  access it by default as well.
-</Callout>
-
-## Invite Organisation Members
-
-To invite organisation members, you need to be an organisation owner, admin or manager.
-
-1. Open the menu switcher top right
-2. Hover over your new organisation and click the settings icon
-3. Navigate to the "Members" tab
-4. Click "Invite Member"
-
-Once you click on the "Invite member" button, you will be prompted to enter the email address of the person you want to invite. You can also select the role of the person you are inviting.
-
-![Invite organisation members](/organisations/organisations-member-invite.webp)
-
-You can also bulk-invite members by uploading a CSV file with the email addresses and roles of the people you want to invite.
-
-The table below shows how the CSV file should be structured:
-
-| Email address             | Role    |
-| ------------------------- | ------- |
-| org-admin@documenso.com   | Admin   |
-| org-manager@documenso.com | Manager |
-| org-member@documenso.com  | Member  |
-
-<Callout type="info">
-  The basic team plan includes 5 organisation members. Going over the 5 members will charge your
-  organisation according to the seat plan pricing.
-</Callout>
-
-## Manage Organisation Members
-
-On the same page, you can change the organisation member's roles or remove them from the organisation.
-
-## What's next?
-
-- [Use groups to organise your members](/users/organisations/groups)

apps/documentation/pages/users/organisations/teams.mdx

@@ -1,121 +0,0 @@
----
-title: Teams
-description: Learn how to create and manage teams in Documenso.
----
-
-import Image from 'next/image';
-
-import { Callout, Steps } from 'nextra/components';
-
-# Teams
-
-Documenso teams allow you to collaborate with others on creating, sending and receiving documents within your organisation. Teams operate within the organisational structure and inherit settings and branding from their parent organisation.
-
-## Team Structure
-
-Teams provide focused collaboration spaces while benefiting from organisation-level management and settings.
-
-Each team within an organisation has its own:
-
-- Team members and roles
-- Documents and templates
-- Team-specific settings (that can override organisation defaults)
-- Team email and branding (if enabled)
-
-## Creating a Team
-
-Only members with the "Organisation Admin" or "Organisation Manager" role can create teams.
-
-<Steps>
-
-### Create Team
-
-To create a team, navigate to the organisation settings page and click the "Teams" tab. Then you can click the "Create Team" button.
-
-![Create Team Dialog](/teams/team-create.webp)
-
-### Name and URL
-
-When creating a team, you'll need to provide:
-
-- **Team Name**: The display name for your team
-- **Team URL**: A unique identifier for your team
-
-The team URL will follow this format:
-
-```bash
-https://app.documenso.com/t/<team-url>
-```
-
-You can select different names and URLs for your team, but we recommend using the same or similar names for consistency.
-
-![Documenso create team modal](/teams/team-create-dialog.webp)
-
-You can also decide whether to automatically inherit members from the organisation into the team. This means that all members of the organisation will have access to this team.
-
-Members with the "Organisation Admin" or "Organisation Manager" role will be assigned as "Team Admin" regardless of this setting. This will only affect members with the "Organisation Member" role, who will be added to the team as a "Team Member".
-
-Disabling this setting will remove all these members automatically. This can always be turned on or off later in the teams member settings page.
-
-</Steps>
-
-## Team Members
-
-After creating the team, you can add organisation members into your team using two methods:
-
-- Directly adding members to the team
-- Add members using groups
-
-### Directly adding members
-
-1. Navigate to the team settings member page
-2. Click the "Add Members" button
-3. Choose which members you want to add
-4. Assign the team roles for each team member
-
-If you want to add people outside of the organisation, you will need to invite them to the organisation first.
-
-See the [organisation members](/users/organisations/members#invite-organisation-members) page for more information.
-
-### Adding members using groups
-
-1. Navigate to the teams settings groups page
-2. Click the "Add groups" button
-3. Choose which groups you want to add
-4. Assign the team roles for each group
-
-See the [organisation groups](/users/organisations/groups) page for more information.
-
-### Team Member Roles
-
-You can assign different permissions to team members based on their roles. The roles available are:
-
-|     Role     | Manage Documents | Manage Team | Delete Team |
-| :----------: | :--------------: | :---------: | :---------: |
-|  Team Admin  |        ✅        |     ✅      |     ✅      |
-| Team Manager |        ✅        |     ✅      |     ❌      |
-| Team Member  |        ✅        |     ❌      |     ❌      |
-
-These roles can be used for document visibility and management as well.
-
-## Set a Team Email
-
-You can add a team email which allows you to:
-
-- See signing requests sent to this email (Team Inbox)
-- See documents sent from this email
-- Send documents on behalf of the team
-- Maintain consistent team branding in communications
-
-## Team Settings and Branding
-
-You can override preferences and settings from the Organisation on the Team level. See the following pages for more information:
-
-- [Document preferences](/users/documents/document-preferences)
-- [Branding preferences](/users/branding/branding-preferences)
-
-## What's next?
-
-- [Send your first document](/users/documents/sending-documents)
-- [Setup your default document preferences](/users/documents/document-preferences)
-- [Setup your default branding preferences](/users/branding)

apps/documentation/pages/users/profile.mdx

@@ -1,5 +1,5 @@
 ---
-title: Public Profile
+title: User Profile
 description: Learn how to set up your public profile on Documenso.
 ---
 
@@ -15,7 +15,7 @@ Documenso allows you to create a public profile to share your templates for anyo
 
 ### Navigate to Your Profile Settings
 
-Click on your profile picture in the top right corner and select "Settings" or "Team Settings". Then, navigate to the "Public Profile" tab to configure your profile.
+Click on your profile picture in the top right corner and select "User settings". Then, navigate to the "Public Profile" tab to configure your profile.
 
 ![The profile settings page](/public-profile/documenso-public-profile-settings.webp)
 
@@ -45,8 +45,6 @@ You can choose to make your profile public or private. Only you can access it if
 
 To make your profile public, toggle the switch to the right ("Show") at the top right-hand side of the page.
 
-![An example of a enabling a public profile on Documenso](/public-profile/documenso-enable-public-profile-settings.webp)
-
 ### (Optional) Link Templates
 
 Linking templates to your profile is optional, but it's what makes your profile helpful. Linking templates allow people to sign documents directly from your profile. As a result, we recommend linking at least one template you want to share with others.

apps/documentation/pages/users/signing-documents/_meta.json

@@ -0,0 +1,4 @@
+{
+  "index": "Send Documents",
+  "fields": "Document Fields"
+}

apps/documentation/pages/users/signing-documents/index.mdx

@@ -115,7 +115,7 @@ All fields can be placed anywhere on the document and resized as needed.
 
 <Callout type="info">
   Learn more about the available field types and how to use them on the [Fields
-  page](/users/documents/fields).
+  page](signing-documents/fields).
 </Callout>
 
 #### Signature Required

apps/documentation/pages/users/teams/_meta.json

@@ -0,0 +1,6 @@
+{
+  "preferences": "Preferences",
+  "document-visibility": "Document Visibility",
+  "sender-details": "Email Sender Details",
+  "branding-preferences": "Branding Preferences"
+}

apps/documentation/pages/users/teams/branding-preferences.mdx

@@ -0,0 +1,16 @@
+---
+title: Branding Preferences
+description: Learn how to set the branding preferences for your team account.
+---
+
+# Branding Preferences
+
+You can set the branding preferences for your team account by going to the **Branding Preferences** tab in the team's settings dashboard.
+
+![A screenshot of the team's branding preferences page](/teams/team-branding-preferences.webp)
+
+On this page, you can:
+
+- **Upload a Logo** - Upload your team's logo to be displayed instead of the default Documenso logo.
+- **Set the Brand Website** - Enter the URL of your team's website to be displayed in the email communications sent by the team.
+- **Add Additional Brand Details** - You can add additional information to display at the bottom of the emails sent by the team. This can include contact information, social media links, and other relevant details.

apps/documentation/pages/users/teams/document-visibility.mdx

@@ -5,25 +5,19 @@ description: Learn how to control the visibility of your team documents.
 
 import { Callout } from 'nextra/components';
 
-# Document Visibility
+# Team's Document Visibility
 
-The default document visibility option allows you to control who can view and access the documents uploaded within a team.
-
-This value can either be set in the [document preferences](/users/documents/document-preferences), or when you [create the document](/users/documents/send-document)
-
-## Document Visibility Options
-
-The document visibility can be set to one of the following options:
+The default document visibility option allows you to control who can view and access the documents uploaded to your team account. The document visibility can be set to one of the following options:
 
 - **Everyone** - The document is visible to all team members.
 - **Managers and above** - The document is visible to team members with the role of _Manager or above_ and _Admin_.
 - **Admin only** - The document is only visible to the team's admins.
 
-The default document visibility is set to "_EVERYONE_" by default. You can change this setting by going to the [document preferences page](/users/documents/document-preferences) and selecting a different visibility option.
+![A screenshot of the document visibility selector from the team's global preferences page](/teams/team-preferences-document-visibility.webp)
 
-![Document visibility preference](/organisations/organisation-document-visibility.webp)
+The default document visibility is set to "_EVERYONE_" by default. You can change this setting by going to the [team's general preferences page](/users/teams/preferences) and selecting a different visibility option.
 
-## How it works
+Here's how it works:
 
 - If a user with the "_Member_" role creates a document and the default document visibility is set to "_Everyone_", the document's visibility is set to "_EVERYONE_".
   - The user can't change the visibility of the document in the document editor.

apps/documentation/pages/users/teams/preferences.mdx

@@ -0,0 +1,19 @@
+---
+title: Preferences
+description: Learn how to manage your team's global preferences.
+---
+
+# Preferences
+
+You can manage your team's global preferences by clicking on the **Preferences** tab in the team's settings dashboard.
+
+![A screenshot of the team's global preferences page](/teams/team-preferences.webp)
+
+The preferences page allows you to update the following settings:
+
+- **Document Visibility** - Set the default visibility of the documents created by team members. Learn more about [document visibility](/users/teams/document-visibility).
+- **Default Document Language** - This setting allows you to set the default language for the documents uploaded in the team account. The default language is used as the default language in the email communications with the document recipients. You can change the language for individual documents when uploading them.
+- **Sender Details** - Set whether the sender's name should be included in the emails sent by the team. Learn more about [sender details](/users/teams/sender-details).
+- **Typed Signature** - It controls whether the document recipients can sign the documents with a typed signature or not. If enabled, the recipients can sign the document using either a drawn or a typed signature. If disabled, the recipients can only sign the documents usign a drawn signature. This setting can also be changed for individual documents when uploading them.
+- **Include the Signing Certificate** - This setting controls whether the signing certificate should be included in the signed documents. If enabled, the signing certificate is included in the signed documents. If disabled, the signing certificate is not included in the signed documents. Regardless of this setting, the signing certificate is always available in the document's audit log page.
+- **Branding Preferences** - Set the branding preferences and defaults for the team account. Learn more about [branding preferences](/users/teams/branding-preferences).

apps/documentation/pages/users/teams/sender-details.mdx

@@ -0,0 +1,14 @@
+---
+title: Email Sender Details
+description: Learn how to update the sender details for your team's email notifications.
+---
+
+## Sender Details
+
+If the **Sender Details** setting is enabled, the emails sent by the team will include the sender's name. The email will say:
+
+> "Example User" on behalf of "Example Team" has invited you to sign "document.pdf"
+
+If the **Sender Details** setting is disabled, the emails sent by the team will not include the sender's name. The email will say:
+
+> "Example Team" has invited you to sign "document.pdf"

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 {
@@ -142,11 +141,11 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
           .with('SELECT', () => (
             <DialogHeader>
               <DialogTitle>
-                <Trans>Add groups</Trans>
+                <Trans>Add members</Trans>
               </DialogTitle>
 
               <DialogDescription>
-                <Trans>Select groups of members to add to the team.</Trans>
+                <Trans>Select members or groups of members to add to the team.</Trans>
               </DialogDescription>
             </DialogHeader>
           ))

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