v1.9.1-rc.9

Fix optional fields blocking the signature process in embeds

.env.example

@@ -1,4 +1,5 @@
 # [[AUTH]]
+NEXTAUTH_URL="http://localhost:3000"
 NEXTAUTH_SECRET="secret"
 
 # [[CRYPTO]]
@@ -18,10 +19,14 @@ NEXT_PRIVATE_OIDC_WELL_KNOWN=""
 NEXT_PRIVATE_OIDC_CLIENT_ID=""
 NEXT_PRIVATE_OIDC_CLIENT_SECRET=""
 NEXT_PRIVATE_OIDC_PROVIDER_LABEL="OIDC"
+# This can be used to still allow signups for OIDC connections
+# when signup is disabled via `NEXT_PUBLIC_DISABLE_SIGNUP`
+NEXT_PRIVATE_OIDC_ALLOW_SIGNUP=""
 NEXT_PRIVATE_OIDC_SKIP_VERIFY=""
 
 # [[URLS]]
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
+NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
 # URL used by the web app to request itself (e.g. local background jobs)
 NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
 
@@ -108,9 +113,13 @@ NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT=5
 # [[STRIPE]]
 NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
+NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
+NEXT_PUBLIC_STRIPE_ENTERPRISE_PLAN_MONTHLY_PRICE_ID=
 
 # [[BACKGROUND JOBS]]
 NEXT_PRIVATE_JOBS_PROVIDER="local"
+NEXT_PRIVATE_TRIGGER_API_KEY=
+NEXT_PRIVATE_TRIGGER_API_URL=
 NEXT_PRIVATE_INNGEST_EVENT_KEY=
 
 # [[FEATURES]]
@@ -126,5 +135,10 @@ E2E_TEST_AUTHENTICATE_USERNAME="Test User"
 E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
 E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
 
+# This is only required for the marketing site
+# [[REDIS]]
+NEXT_PRIVATE_REDIS_URL=
+NEXT_PRIVATE_REDIS_TOKEN=
+
 # [[LOGGER]]
 NEXT_PRIVATE_LOGGER_HONEY_BADGER_API_KEY=

.eslintrc.cjs

@@ -5,7 +5,6 @@ module.exports = {
   rules: {
     '@next/next/no-img-element': 'off',
     'no-unreachable': 'error',
-    'react-hooks/exhaustive-deps': 'off',
   },
   settings: {
     next: {

.github/actions/cache-build/action.yml

@@ -0,0 +1,23 @@
+name: Cache production build binaries
+description: 'Cache or restore if necessary'
+inputs:
+  node_version:
+    required: false
+    default: v20.x
+runs:
+  using: 'composite'
+  steps:
+    - name: Cache production build
+      uses: actions/cache@v3
+      id: production-build-cache
+      with:
+        path: |
+          ${{ github.workspace }}/apps/web/.next
+          **/.turbo/**
+          **/dist/**
+
+        key: prod-build-${{ github.run_id }}-${{ hashFiles('package-lock.json') }}
+        restore-keys: prod-build-
+
+    - run: npm run build
+      shell: bash

.github/actions/node-install/action.yml

@@ -2,7 +2,7 @@ name: 'Setup node and cache node_modules'
 inputs:
   node_version:
     required: false
-    default: v22.x
+    default: v20.x
 
 runs:
   using: 'composite'

.github/workflows/ci.yml

@@ -26,8 +26,7 @@ jobs:
       - name: Copy env
         run: cp .env.example .env
 
-      - name: Build app
-        run: npm run build
+      - uses: ./.github/actions/cache-build
 
   build_docker:
     name: Build Docker Image

.github/workflows/clean-cache.yml

@@ -0,0 +1,29 @@
+name: cleanup caches by a branch
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cleanup
+        run: |
+          gh extension install actions/gh-actions-cache
+
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH -L 100 | cut -f 1 )
+
+          ## Setting this to not fail the workflow while deleting cache keys. 
+          set +e
+          echo "Deleting caches..."
+          for cacheKey in $cacheKeysForPR
+          do
+              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          REPO: ${{ github.repository }}
+          BRANCH: refs/pull/${{ github.event.pull_request.number }}/merge

.github/workflows/codeql-analysis.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   analyze:
     name: Analyze
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     permissions:
       actions: read
       contents: read
@@ -30,8 +30,7 @@ jobs:
 
       - uses: ./.github/actions/node-install
 
-      - name: Build app
-        run: npm run build
+      - uses: ./.github/actions/cache-build
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v3

.github/workflows/e2e-tests.yml

@@ -1,7 +1,7 @@
 name: Playwright Tests
 on:
   push:
-    branches: ['main', 'feat/rr7']
+    branches: ['main']
   pull_request:
     branches: ['main']
 jobs:
@@ -28,11 +28,7 @@ jobs:
       - name: Seed the database
         run: npm run prisma:seed
 
-      - name: Build app
-        run: npm run build
-
-      - name: Install playwright browsers
-        run: npx playwright install --with-deps
+      - uses: ./.github/actions/cache-build
 
       - name: Run Playwright tests
         run: npm run ci

.gitpod.yml

@@ -4,7 +4,9 @@ tasks:
       npm run dx:up &&
       cp .env.example .env &&
       set -a; source .env &&
+      export NEXTAUTH_URL="$(gp url 3000)" &&
       export NEXT_PUBLIC_WEBAPP_URL="$(gp url 3000)" &&
+      export NEXT_PUBLIC_MARKETING_URL="$(gp url 3001)"
     command: npm run d
 
 ports:

.husky/commit-msg

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

.husky/pre-commit

@@ -1,9 +1,15 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
 SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
 
+echo "Copying pdf.js"
+npm run copy:pdfjs --workspace apps/**
+
 echo "Copying .well-known/ contents"
 node "$MONOREPO_ROOT/scripts/copy-wellknown.cjs"
 
-git add "$MONOREPO_ROOT/apps/remix/public/"
+git add "$MONOREPO_ROOT/apps/web/public/"
 
 npx lint-staged

.npmrc

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

README.md

@@ -1,3 +1,7 @@
+> 🚨 We are live on Product Hunt 🎉  Check out our latest launch: <a href="https://documen.so/sign-everywhere">The Platform Plan</a>!
+
+<a href="https://www.producthunt.com/posts/documenso-platform-plan?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-documenso&#0045;platform&#0045;plan" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=670576&theme=light" alt="Documenso&#0032;Platform&#0032;Plan - Whitelabeled&#0032;signing&#0032;flows&#0032;in&#0032;your&#0032;product | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 
 <p align="center" style="margin-top: 20px">
@@ -69,9 +73,9 @@ Contact us if you are interested in our Enterprise plan for large organizations
 <a href="https://cal.com/timurercan/enterprise-customers?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
 
 ## Tech Stack
-
 <p align="left">
   <a href="https://www.typescriptlang.org"><img src="https://shields.io/badge/TypeScript-3178C6?logo=TypeScript&logoColor=FFF&style=flat-square" alt="TypeScript"></a>
+  <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/next.js-000000?style=flat-square&logo=nextdotjs&logoColor=white" alt="NextJS"></a>
   <a href="https://prisma.io"><img width="122" height="20" src="http://made-with.prisma.io/indigo.svg" alt="Made with Prisma" /></a>
   <a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/tailwindcss-0F172A?&logo=tailwindcss" alt="Tailwind CSS"></a>
   <a href=""><img src="" alt=""></a>
@@ -81,17 +85,20 @@ Contact us if you are interested in our Enterprise plan for large organizations
   <a href=""><img src="" alt=""></a>
 </p>
 
+
 - [Typescript](https://www.typescriptlang.org/) - Language
-- [ReactRouter](https://reactrouter.com/) - Framework
-- [Prisma](https://www.prisma.io/) - ORM
+- [Next.js](https://nextjs.org/) - Framework
+- [Prisma](https://www.prisma.io/)  - ORM
 - [Tailwind](https://tailwindcss.com/) - CSS
 - [shadcn/ui](https://ui.shadcn.com/) - Component Library
+- [NextAuth.js](https://next-auth.js.org/) - Authentication
 - [react-email](https://react.email/) - Email Templates
 - [tRPC](https://trpc.io/) - API
 - [@documenso/pdf-sign](https://www.npmjs.com/package/@documenso/pdf-sign) - PDF Signatures (launching soon)
 - [React-PDF](https://github.com/wojtekmaj/react-pdf) - Viewing PDFs
 - [PDF-Lib](https://github.com/Hopding/pdf-lib) - PDF manipulation
 - [Stripe](https://stripe.com/) - Payments
+- [Vercel](https://vercel.com) - Hosting
 
 <!-- - Support for [opensignpdf (requires Java on server)](https://github.com/open-pdf-sign) is currently planned. -->
 
@@ -101,7 +108,7 @@ Contact us if you are interested in our Enterprise plan for large organizations
 
 To run Documenso locally, you will need
 
-- Node.js (v22 or above)
+- Node.js (v18 or above)
 - Postgres SQL Database
 - Docker (optional)
 
@@ -164,8 +171,10 @@ git clone https://github.com/<your-username>/documenso
 
 4. Set the following environment variables:
 
+   - NEXTAUTH_URL
    - NEXTAUTH_SECRET
    - NEXT_PUBLIC_WEBAPP_URL
+   - NEXT_PUBLIC_MARKETING_URL
    - NEXT_PRIVATE_DATABASE_URL
    - NEXT_PRIVATE_DIRECT_DATABASE_URL
    - NEXT_PRIVATE_SMTP_FROM_NAME
@@ -234,14 +243,16 @@ cp .env.example .env
 
 The following environment variables must be set:
 
+- `NEXTAUTH_URL`
 - `NEXTAUTH_SECRET`
 - `NEXT_PUBLIC_WEBAPP_URL`
+- `NEXT_PUBLIC_MARKETING_URL`
 - `NEXT_PRIVATE_DATABASE_URL`
 - `NEXT_PRIVATE_DIRECT_DATABASE_URL`
 - `NEXT_PRIVATE_SMTP_FROM_NAME`
 - `NEXT_PRIVATE_SMTP_FROM_ADDRESS`
 
-> If you are using a reverse proxy in front of Documenso, don't forget to provide the public URL for the `NEXT_PUBLIC_WEBAPP_URL` variable!
+> If you are using a reverse proxy in front of Documenso, don't forget to provide the public URL for both `NEXTAUTH_URL` and `NEXT_PUBLIC_WEBAPP_URL` variables!
 
 Now you can install the dependencies and build it:
 

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

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start -p 3002",
     "lint:fix": "next lint --fix",
-    "clean": "rimraf .next && rimraf node_modules"
+    "clean": "rimraf .next && rimraf node_modules",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
     "@documenso/assets": "*",
@@ -15,7 +16,7 @@
     "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
-    "next": "14.2.28",
+    "next": "14.2.6",
     "next-plausible": "^3.12.0",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",

apps/documentation/pages/developers/embedding/_meta.json

@@ -7,5 +7,5 @@
   "preact": "Preact Integration",
   "angular": "Angular Integration",
   "css-variables": "CSS Variables",
-  "authoring": "Authoring"
-}
+  "web-components": "Web Components"
+}

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

@@ -73,14 +73,15 @@ These customization options are available for both Direct Templates and Signing
 
 We support embedding across a range of popular JavaScript frameworks, including:
 
-| Framework | Package                                                                            |
-| --------- | ---------------------------------------------------------------------------------- |
-| React     | [@documenso/embed-react](https://www.npmjs.com/package/@documenso/embed-react)     |
-| Preact    | [@documenso/embed-preact](https://www.npmjs.com/package/@documenso/embed-preact)   |
-| Vue       | [@documenso/embed-vue](https://www.npmjs.com/package/@documenso/embed-vue)         |
-| Svelte    | [@documenso/embed-svelte](https://www.npmjs.com/package/@documenso/embed-svelte)   |
-| Solid     | [@documenso/embed-solid](https://www.npmjs.com/package/@documenso/embed-solid)     |
-| Angular   | [@documenso/embed-angular](https://www.npmjs.com/package/@documenso/embed-angular) |
+| Framework        | Package                                                                                      |
+| ---------        | ----------------------------------------------------------------------------------           |
+| React            | [@documenso/embed-react](https://www.npmjs.com/package/@documenso/embed-react)               |
+| Preact           | [@documenso/embed-preact](https://www.npmjs.com/package/@documenso/embed-preact)             |
+| Vue              | [@documenso/embed-vue](https://www.npmjs.com/package/@documenso/embed-vue)                   |
+| Svelte           | [@documenso/embed-svelte](https://www.npmjs.com/package/@documenso/embed-svelte)             |
+| Solid            | [@documenso/embed-solid](https://www.npmjs.com/package/@documenso/embed-solid)               |
+| Angular          | [@documenso/embed-angular](https://www.npmjs.com/package/@documenso/embed-angular)           |
+| Web Components   | [@documenso/embed-webcomponent](https://www.npmjs.com/package/@documenso/embed-webcomponent) |
 
 Additionally, we provide **web components** for more generalized use. However, please note that web components are still in their early stages and haven't been extensively tested.
 
@@ -166,22 +167,10 @@ Once you've obtained the appropriate tokens, you can integrate the signing exper
 - [Svelte](/developers/embedding/svelte)
 - [Solid](/developers/embedding/solid)
 - [Angular](/developers/embedding/angular)
+- [Web Components](/developers/embedding/web-components)
 
 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)
@@ -190,5 +179,5 @@ For detailed implementation instructions and code examples, see our [Embedded Au
 - [Solid Integration](/developers/embedding/solid)
 - [Preact Integration](/developers/embedding/preact)
 - [Angular Integration](/developers/embedding/angular)
+- [Web Components](/developers/embedding/web-components)
 - [CSS Variables](/developers/embedding/css-variables)
-- [Embedded Authoring](/developers/embedding/authoring)

apps/documentation/pages/developers/embedding/web-components.mdx

@@ -0,0 +1,89 @@
+---
+title: Web Components Integration
+description: Learn how to use our embedding SDK via Web Components on a framework-less web application.
+---
+
+# Web Components Integration
+
+Our Web Components SDK provides a simple way to embed a signing experience within your framework-less web application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-webcomponent
+```
+
+Then in your html file, add the following to add the script, replacing the path with the proper path to the web component script.
+
+```html
+<script src="YOUR_PATH_HERE"></script>
+```
+
+## Usage
+
+To embed a signing experience, you'll need to provide the token for the document you want to embed. This can be done in a few different ways, depending on your use case.
+
+### Direct Link Template
+
+If you have a direct link template, you can simply provide the token for the template to the `documenso-embed-direct-template` tag.
+
+```html
+<documenso-embed-direct-template
+  token="YOUR_TOKEN_HERE"
+</documenso-embed-direct-template>
+```
+
+#### Attributes
+
+| Attribute                | Type                | Description                                                                                |
+| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
+| token               | string              | The token for the document you want to embed                                               |
+| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
+| name                | string (optional)   | The name the signer that will be used by default for signing                               |
+| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
+| email               | string (optional)   | The email the signer that will be used by default for signing                              |
+| lockEmail           | boolean (optional)  | Whether or not the email field should be locked disallowing modifications                  |
+| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
+| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
+| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |
+| onFieldSigned       | function (optional) | A callback function that will be called when a field is signed                             |
+| onFieldUnsigned     | function (optional) | A callback function that will be called when a field is unsigned                           |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `documenso-embed-sign-document` tag.
+
+```html
+<documenso-embed-sign-document
+  token="YOUR_TOKEN_HERE"
+</documenso-embed-sign-document>
+```
+
+#### Attributes
+
+| Attribute                | Type                | Description                                                                                |
+| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
+| token               | string              | The token for the document you want to embed                                               |
+| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
+| name                | string (optional)   | The name the signer that will be used by default for signing                               |
+| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
+| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
+| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
+| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |
+
+### Creating via JavaScript
+
+You can also create the tag element using javascript, for dynamic generation of either modes. For example, this would add the sign document embed to the DOM.
+
+```javascript
+document.getElementById('my-wrapper-here').innerHTML = '';
+
+const tag = document.createElement('documenso-embed-sign-document');
+tag.setAttribute('token', data.token);
+tag.style.width = '100%';
+tag.style.height = '100%';
+
+document.getElementById('my-wrapper-here').appendChild(tag);
+```

apps/documentation/pages/developers/local-development/index.mdx

@@ -16,16 +16,18 @@ Pick the one that fits your needs the best.
 ## Tech Stack
 
 - [Typescript](https://www.typescriptlang.org/) - Language
-- [React Router](https://reactrouter.com/) - Framework
+- [Next.js](https://nextjs.org/) - Framework
 - [Prisma](https://www.prisma.io/) - ORM
 - [Tailwind](https://tailwindcss.com/) - CSS
 - [shadcn/ui](https://ui.shadcn.com/) - Component Library
+- [NextAuth.js](https://next-auth.js.org/) - Authentication
 - [react-email](https://react.email/) - Email Templates
 - [tRPC](https://trpc.io/) - API
 - [@documenso/pdf-sign](https://www.npmjs.com/package/@documenso/pdf-sign) - PDF Signatures
 - [React-PDF](https://github.com/wojtekmaj/react-pdf) - Viewing PDFs
 - [PDF-Lib](https://github.com/Hopding/pdf-lib) - PDF manipulation
 - [Stripe](https://stripe.com/) - Payments
+- [Vercel](https://vercel.com) - Hosting
 
 <div className="mt-16 flex items-center justify-center gap-4">
   <a href="https://documen.so/discord">

apps/documentation/pages/developers/local-development/manual.mdx

@@ -32,8 +32,10 @@ Run `npm i` in the root directory to install the dependencies required for the p
 Set up the following environment variables in the `.env` file:
 
 ```bash
+NEXTAUTH_URL
 NEXTAUTH_SECRET
 NEXT_PUBLIC_WEBAPP_URL
+NEXT_PUBLIC_MARKETING_URL
 NEXT_PRIVATE_DATABASE_URL
 NEXT_PRIVATE_DIRECT_DATABASE_URL
 NEXT_PRIVATE_SMTP_FROM_NAME

apps/documentation/pages/developers/local-development/translations.mdx

@@ -13,13 +13,35 @@ Documenso uses the following stack to handle translations:
 
 Additional reading can be found in the [Lingui documentation](https://lingui.dev/introduction).
 
+## Requirements
+
+You **must** insert **`setupI18nSSR()`** when creating any of the following files:
+
+- Server layout.tsx
+- Server page.tsx
+- Server loading.tsx
+
+Server meaning it does not have `'use client'` in it.
+
+```tsx
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
+export default function SomePage() {
+  setupI18nSSR(); // Required if there are translations within the page, or nested in components.
+
+  // Rest of code...
+}
+```
+
+Additional information can be found [here.](https://lingui.dev/tutorials/react-rsc#pages-layouts-and-lingui)
+
 ## Quick guide
 
 If you require more in-depth information, please see the [Lingui documentation](https://lingui.dev/introduction).
 
 ### HTML
 
-Wrap all text to translate in **`<Trans></Trans>`** tags exported from **@lingui/react/macro**.
+Wrap all text to translate in **`<Trans></Trans>`** tags exported from **@lingui/macro** (not @lingui/react).
 
 ```html
 <h1>
@@ -42,9 +64,8 @@ For text that is broken into elements, but represent a whole sentence, you must
 ### Constants outside of react components
 
 ```tsx
-import { msg } from '@lingui/core/macro';
+import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
 
 // Wrap text in msg`text to translate` when it's in a constant here, or another file/package.
 export const CONSTANT_WITH_MSG = {
@@ -77,13 +98,31 @@ Lingui provides a Plural component to make it easy. See full documentation [here
 
 Lingui provides a [DateTime instance](https://lingui.dev/ref/core#i18n.date) with the configured locale.
 
+#### Server components
+
+Note that the i18n instance is coming from **setupI18nSSR**.
+
 ```tsx
 import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
 export const SomeComponent = () => {
-  const { i18n } = useLingui();
+  const { i18n } = setupI18nSSR();
 
   return <Trans>The current date is {i18n.date(new Date(), { dateStyle: 'short' })}</Trans>;
 };
 ```
+
+#### Client components
+
+Note that the i18n instance is coming from the **import**.
+
+```tsx
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+export const SomeComponent = () => {
+  return <Trans>The current date is {i18n.date(new Date(), { dateStyle: 'short' })}</Trans>;
+};
+```

apps/documentation/pages/developers/self-hosting/how-to.mdx

@@ -5,7 +5,7 @@ description: Learn how to self-host Documenso on your server or cloud infrastruc
 
 import { Callout, Steps } from 'nextra/components';
 
-import { CallToAction } from '../../../components/call-to-action';
+import { CallToAction } from '@documenso/ui/components/call-to-action';
 
 # Self Hosting
 
@@ -35,8 +35,10 @@ cp .env.example .env
 Open the `.env` file and fill in the following variables:
 
 ```bash
+- NEXTAUTH_URL
 - NEXTAUTH_SECRET
 - NEXT_PUBLIC_WEBAPP_URL
+- NEXT_PUBLIC_MARKETING_URL
 - NEXT_PRIVATE_DATABASE_URL
 - NEXT_PRIVATE_DIRECT_DATABASE_URL
 - NEXT_PRIVATE_SMTP_FROM_NAME
@@ -44,8 +46,8 @@ Open the `.env` file and fill in the following variables:
 ```
 
 <Callout type="info">
-  If you use a reverse proxy in front of Documenso, don't forget to provide the public URL for the
-  `NEXT_PUBLIC_WEBAPP_URL` variable!
+  If you use a reverse proxy in front of Documenso, don't forget to provide the public URL for both
+  the `NEXTAUTH_URL` and `NEXT_PUBLIC_WEBAPP_URL` variables!
 </Callout>
 
 ### Install the Dependencies
@@ -169,6 +171,7 @@ Run the Docker container with the required environment variables:
 ```bash
 docker run -d \
  -p 3000:3000 \
+ -e NEXTAUTH_URL="<your-nextauth-url>"
  -e NEXTAUTH_SECRET="<your-nextauth-secret>"
  -e NEXT_PRIVATE_ENCRYPTION_KEY="<your-next-private-encryption-key>"
  -e NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="<your-next-private-encryption-secondary-key>"
@@ -197,6 +200,7 @@ The environment variables listed above are a subset of those available for confi
 | Variable                                     | Description                                                                                         |
 | -------------------------------------------- | --------------------------------------------------------------------------------------------------- |
 | `PORT`                                       | The port on which the Documenso application runs. It defaults to `3000`.                            |
+| `NEXTAUTH_URL`                               | The URL for the NextAuth.js authentication service.                                                 |
 | `NEXTAUTH_SECRET`                            | The secret key used by NextAuth.js for encryption and signing.                                      |
 | `NEXT_PRIVATE_ENCRYPTION_KEY`                | The primary encryption key for symmetric encryption and decryption (at least 32 characters).        |
 | `NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY`      | The secondary encryption key for symmetric encryption and decryption (at least 32 characters).      |

apps/documentation/pages/developers/self-hosting/index.mdx

@@ -3,7 +3,7 @@ title: Getting Started with Self-Hosting
 description: A step-by-step guide to setting up and hosting your own Documenso instance.
 ---
 
-import { CallToAction } from '../../../components/call-to-action';
+import { CallToAction } from '@documenso/ui/components/call-to-action';
 
 # Getting Started with Self-Hosting
 

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/lib/add-zero-month.ts

@@ -1,54 +0,0 @@
-import { DateTime } from 'luxon';
-
-export interface TransformedData {
-  labels: string[];
-  datasets: Array<{
-    label: string;
-    data: number[];
-  }>;
-}
-
-export function addZeroMonth(transformedData: TransformedData): TransformedData {
-  const result = {
-    labels: [...transformedData.labels],
-    datasets: transformedData.datasets.map((dataset) => ({
-      label: dataset.label,
-      data: [...dataset.data],
-    })),
-  };
-
-  if (result.labels.length === 0) {
-    return result;
-  }
-
-  if (result.datasets.every((dataset) => dataset.data[0] === 0)) {
-    return result;
-  }
-
-  try {
-    let firstMonth = DateTime.fromFormat(result.labels[0], 'MMM yyyy');
-    if (!firstMonth.isValid) {
-      const formats = ['MMM yyyy', 'MMMM yyyy', 'MM/yyyy', 'yyyy-MM'];
-
-      for (const format of formats) {
-        firstMonth = DateTime.fromFormat(result.labels[0], format);
-        if (firstMonth.isValid) break;
-      }
-
-      if (!firstMonth.isValid) {
-        console.warn(`Could not parse date: "${result.labels[0]}"`);
-        return transformedData;
-      }
-    }
-
-    const zeroMonth = firstMonth.minus({ months: 1 }).toFormat('MMM yyyy');
-    result.labels.unshift(zeroMonth);
-    result.datasets.forEach((dataset) => {
-      dataset.data.unshift(0);
-    });
-
-    return result;
-  } catch (error) {
-    return transformedData;
-  }
-}

apps/openpage-api/lib/growth/get-monthly-completed-document.ts

@@ -1,9 +1,7 @@
-import { DocumentStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
-
-import { addZeroMonth } from '../add-zero-month';
+import { DocumentStatus } from '@documenso/prisma/client';
 
 export const getCompletedDocumentsMonthly = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
@@ -37,7 +35,7 @@ export const getCompletedDocumentsMonthly = async (type: 'count' | 'cumulative'
     ],
   };
 
-  return addZeroMonth(transformedData);
+  return transformedData;
 };
 
 export type GetCompletedDocumentsMonthlyResult = Awaited<

apps/openpage-api/lib/growth/get-signer-conversion.ts

@@ -2,8 +2,6 @@ import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
 
-import { addZeroMonth } from '../add-zero-month';
-
 export const getSignerConversionMonthly = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
     .selectFrom('Recipient')
@@ -36,7 +34,7 @@ export const getSignerConversionMonthly = async (type: 'count' | 'cumulative' =
     ],
   };
 
-  return addZeroMonth(transformedData);
+  return transformedData;
 };
 
 export type GetSignerConversionMonthlyResult = Awaited<

apps/openpage-api/lib/growth/get-user-monthly-growth.ts

@@ -2,8 +2,6 @@ import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
 
-import { addZeroMonth } from '../add-zero-month';
-
 export const getUserMonthlyGrowth = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
     .selectFrom('User')
@@ -34,7 +32,7 @@ export const getUserMonthlyGrowth = async (type: 'count' | 'cumulative' = 'count
     ],
   };
 
-  return addZeroMonth(transformedData);
+  return transformedData;
 };
 
 export type GetUserMonthlyGrowthResult = Awaited<ReturnType<typeof getUserMonthlyGrowth>>;

apps/openpage-api/lib/transform-data.ts

@@ -1,7 +1,5 @@
 import { DateTime } from 'luxon';
 
-import { addZeroMonth } from './add-zero-month';
-
 type MetricKeys = {
   stars: number;
   forks: number;
@@ -39,77 +37,31 @@ export function transformData({
   data: DataEntry;
   metric: MetricKey;
 }): TransformData {
-  try {
-    if (!data || Object.keys(data).length === 0) {
-      return {
-        labels: [],
-        datasets: [{ label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`, data: [] }],
-      };
-    }
+  const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
+    const [yearA, monthA] = dateA.split('-').map(Number);
+    const [yearB, monthB] = dateB.split('-').map(Number);
 
-    const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
-      try {
-        const [yearA, monthA] = dateA.split('-').map(Number);
-        const [yearB, monthB] = dateB.split('-').map(Number);
+    return DateTime.local(yearA, monthA).toMillis() - DateTime.local(yearB, monthB).toMillis();
+  });
 
-        if (isNaN(yearA) || isNaN(monthA) || isNaN(yearB) || isNaN(monthB)) {
-          console.warn(`Invalid date format: ${dateA} or ${dateB}`);
-          return 0;
-        }
-
-        return DateTime.local(yearA, monthA).toMillis() - DateTime.local(yearB, monthB).toMillis();
-      } catch (error) {
-        console.error('Error sorting entries:', error);
-        return 0;
-      }
+  const labels = sortedEntries.map(([date]) => {
+    const [year, month] = date.split('-');
+    const dateTime = DateTime.fromObject({
+      year: Number(year),
+      month: Number(month),
     });
+    return dateTime.toFormat('MMM yyyy');
+  });
 
-    const labels = sortedEntries.map(([date]) => {
-      try {
-        const [year, month] = date.split('-');
-
-        if (!year || !month || isNaN(Number(year)) || isNaN(Number(month))) {
-          console.warn(`Invalid date format: ${date}`);
-          return date;
-        }
-
-        const dateTime = DateTime.fromObject({
-          year: Number(year),
-          month: Number(month),
-        });
-
-        if (!dateTime.isValid) {
-          console.warn(`Invalid DateTime object for: ${date}`);
-          return date;
-        }
-
-        return dateTime.toFormat('MMM yyyy');
-      } catch (error) {
-        console.error('Error formatting date:', error, date);
-        return date;
-      }
-    });
-
-    const transformedData = {
-      labels,
-      datasets: [
-        {
-          label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
-          data: sortedEntries.map(([_, stats]) => {
-            const value = stats[metric];
-            return typeof value === 'number' && !isNaN(value) ? value : 0;
-          }),
-        },
-      ],
-    };
-
-    return addZeroMonth(transformedData);
-  } catch (error) {
-    return {
-      labels: [],
-      datasets: [{ label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`, data: [] }],
-    };
-  }
+  return {
+    labels,
+    datasets: [
+      {
+        label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
+        data: sortedEntries.map(([_, stats]) => stats[metric]),
+      },
+    ],
+  };
 }
 
 // To be on the safer side

apps/openpage-api/package.json

@@ -7,12 +7,13 @@
     "build": "next build",
     "start": "next start",
     "lint:fix": "next lint --fix",
-    "clean": "rimraf .next && rimraf node_modules"
+    "clean": "rimraf .next && rimraf node_modules",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.5.0",
-    "next": "14.2.28"
+    "next": "14.2.6"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/remix/.bin/build.sh

@@ -1,37 +0,0 @@
-#!/usr/bin/env bash
-
-# Exit on error.
-set -e
-
-SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
-WEB_APP_DIR="$SCRIPT_DIR/.."
-
-# Store the original directory
-ORIGINAL_DIR=$(pwd)
-
-# Set up trap to ensure we return to original directory
-trap 'cd "$ORIGINAL_DIR"' EXIT
-
-cd "$WEB_APP_DIR"
-
-start_time=$(date +%s)
-
-echo "[Build]: Extracting and compiling translations"
-npm run translate --prefix ../../
-
-echo "[Build]: Building app"
-npm run build:app
-
-echo "[Build]: Building server"
-npm run build:server
-
-# Copy over the entry point for the server.
-cp server/main.js build/server/main.js
-
-# Copy over all web.js translations
-cp -r ../../packages/lib/translations build/server/hono/packages/lib/translations
-
-# Time taken
-end_time=$(date +%s)
-
-echo "[Build]: Done in $((end_time - start_time)) seconds"

apps/remix/.bin/stripe-dev.sh

@@ -1,77 +0,0 @@
-#!/usr/bin/env bash
-
-# Set Error handling
-set -eu
-
-SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
-WEB_APP_DIR="$SCRIPT_DIR/.."
-
-# Store the original directory
-ORIGINAL_DIR=$(pwd)
-
-# Set up trap to ensure we return to original directory
-trap 'cd "$ORIGINAL_DIR"' EXIT
-
-cd "$WEB_APP_DIR"
-
-# Define env file paths
-ENV_LOCAL_FILE="../../.env.local"
-
-# Function to load environment variable from env files
-load_env_var() {
-  local var_name=$1
-  local var_value=""
-
-  if [ -f "$ENV_LOCAL_FILE" ]; then
-    var_value=$(grep "^$var_name=" "$ENV_LOCAL_FILE" | cut -d '=' -f2)
-  fi
-
-  # Remove quotes if present
-  var_value=$(echo "$var_value" | sed 's/^"\(.*\)"$/\1/' | sed "s/^'\(.*\)'$/\1/")
-
-  echo "$var_value"
-}
-
-NEXT_PUBLIC_FEATURE_BILLING_ENABLED=$(load_env_var "NEXT_PUBLIC_FEATURE_BILLING_ENABLED")
-
-# Check if NEXT_PUBLIC_FEATURE_BILLING_ENABLED is equal to true
-if [ "$NEXT_PUBLIC_FEATURE_BILLING_ENABLED" != "true" ]; then
-  echo "[ERROR]: NEXT_PUBLIC_FEATURE_BILLING_ENABLED must be enabled."
-  exit 1
-fi
-
-# 1. Load NEXT_PRIVATE_STRIPE_API_KEY from env files
-NEXT_PRIVATE_STRIPE_API_KEY=$(load_env_var "NEXT_PRIVATE_STRIPE_API_KEY")
-
-# Check if NEXT_PRIVATE_STRIPE_API_KEY exists
-if [ -z "$NEXT_PRIVATE_STRIPE_API_KEY" ]; then
-  echo "[ERROR]: NEXT_PRIVATE_STRIPE_API_KEY not found in environment files."
-  echo "[ERROR]: Please make sure it's set in $ENV_LOCAL_FILE"
-  exit 1
-fi
-
-# 2. Check if stripe CLI is installed
-if ! command -v stripe &> /dev/null; then
-  echo "[ERROR]: Stripe CLI is not installed or not in PATH."
-  echo "[ERROR]: Please install the Stripe CLI: https://stripe.com/docs/stripe-cli"
-  exit 1
-fi
-
-# 3. Check if NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET env key exists
-NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=$(load_env_var "NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET")
-
-if [ -z "$NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET" ]; then
-  echo "╔═════════════════════════════════════════════════════════════════════╗"
-  echo "║                                                                     ║"
-  echo "║  ! WARNING: NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET MISSING !            ║"
-  echo "║                                                                     ║"
-  echo "║  Copy the webhook signing secret which will appear in the terminal  ║"
-  echo "║  soon into the env file.                                            ║"
-  echo "║                                                                     ║"
-  echo "║  The webhook secret will start with whsec_...                       ║"
-  echo "║                                                                     ║"
-  echo "╚═════════════════════════════════════════════════════════════════════╝"
-fi
-
-echo "[INFO]: Starting Stripe webhook listener..."
-stripe listen --api-key "$NEXT_PRIVATE_STRIPE_API_KEY" --forward-to http://localhost:3000/api/stripe/webhook

apps/remix/.dockerignore

@@ -1,4 +0,0 @@
-.react-router
-build
-node_modules
-README.md

apps/remix/.gitignore

@@ -1,9 +0,0 @@
-.DS_Store
-/node_modules/
-
-# React Router
-/.react-router/
-/build/
-
-# Vite
-vite.config.*.timestamp*

apps/remix/Dockerfile

@@ -1,22 +0,0 @@
-FROM node:20-alpine AS development-dependencies-env
-COPY . /app
-WORKDIR /app
-RUN npm ci
-
-FROM node:20-alpine AS production-dependencies-env
-COPY ./package.json package-lock.json /app/
-WORKDIR /app
-RUN npm ci --omit=dev
-
-FROM node:20-alpine AS build-env
-COPY . /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN npm run build
-
-FROM node:20-alpine
-COPY ./package.json package-lock.json /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["npm", "run", "start"]

apps/remix/Dockerfile.bun

@@ -1,25 +0,0 @@
-FROM oven/bun:1 AS dependencies-env
-COPY . /app
-
-FROM dependencies-env AS development-dependencies-env
-COPY ./package.json bun.lockb /app/
-WORKDIR /app
-RUN bun i --frozen-lockfile
-
-FROM dependencies-env AS production-dependencies-env
-COPY ./package.json bun.lockb /app/
-WORKDIR /app
-RUN bun i --production
-
-FROM dependencies-env AS build-env
-COPY ./package.json bun.lockb /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN bun run build
-
-FROM dependencies-env
-COPY ./package.json bun.lockb /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["bun", "run", "start"]

apps/remix/Dockerfile.pnpm

@@ -1,26 +0,0 @@
-FROM node:20-alpine AS dependencies-env
-RUN npm i -g pnpm
-COPY . /app
-
-FROM dependencies-env AS development-dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-WORKDIR /app
-RUN pnpm i --frozen-lockfile
-
-FROM dependencies-env AS production-dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-WORKDIR /app
-RUN pnpm i --prod --frozen-lockfile
-
-FROM dependencies-env AS build-env
-COPY ./package.json pnpm-lock.yaml /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN pnpm build
-
-FROM dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["pnpm", "start"]

apps/remix/README.md

@@ -1,100 +0,0 @@
-# Welcome to React Router!
-
-A modern, production-ready template for building full-stack React applications using React Router.
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
-
-## Features
-
-- 🚀 Server-side rendering
-- ⚡️ Hot Module Replacement (HMR)
-- 📦 Asset bundling and optimization
-- 🔄 Data loading and mutations
-- 🔒 TypeScript by default
-- 🎉 TailwindCSS for styling
-- 📖 [React Router docs](https://reactrouter.com/)
-
-## Getting Started
-
-### Installation
-
-Install the dependencies:
-
-```bash
-npm install
-```
-
-### Development
-
-Start the development server with HMR:
-
-```bash
-npm run dev
-```
-
-Your application will be available at `http://localhost:5173`.
-
-## Building for Production
-
-Create a production build:
-
-```bash
-npm run build
-```
-
-## Deployment
-
-### Docker Deployment
-
-This template includes three Dockerfiles optimized for different package managers:
-
-- `Dockerfile` - for npm
-- `Dockerfile.pnpm` - for pnpm
-- `Dockerfile.bun` - for bun
-
-To build and run using Docker:
-
-```bash
-# For npm
-docker build -t my-app .
-
-# For pnpm
-docker build -f Dockerfile.pnpm -t my-app .
-
-# For bun
-docker build -f Dockerfile.bun -t my-app .
-
-# Run the container
-docker run -p 3000:3000 my-app
-```
-
-The containerized application can be deployed to any platform that supports Docker, including:
-
-- AWS ECS
-- Google Cloud Run
-- Azure Container Apps
-- Digital Ocean App Platform
-- Fly.io
-- Railway
-
-### DIY Deployment
-
-If you're familiar with deploying Node applications, the built-in app server is production-ready.
-
-Make sure to deploy the output of `npm run build`
-
-```
-├── package.json
-├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
-├── build/
-│   ├── client/    # Static assets
-│   └── server/    # Server-side code
-```
-
-## Styling
-
-This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
-
----
-
-Built with ❤️ using React Router.

apps/remix/app/app.css

@@ -1,24 +0,0 @@
-@import '@documenso/ui/styles/theme.css';
-
-@font-face {
-  font-family: 'Inter';
-  src: url('/public/fonts/inter-regular.ttf') format('ttf');
-  /* font-weight: 400;
-  font-style: normal;
-  font-display: swap; */
-}
-
-@font-face {
-  font-family: 'Caveat';
-  src: url('/public/fonts/caveat.ttf') format('ttf');
-  /* font-weight: 400;
-  font-style: normal;
-  font-display: swap; */
-}
-
-@layer base {
-  :root {
-    --font-sans: 'Inter';
-    --font-signature: 'Caveat';
-  }
-}

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

@@ -1,206 +0,0 @@
-import { useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/react/macro';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { 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 { DocumentSigningDisclosure } from '../general/document-signing/document-signing-disclosure';
-
-export type NextSigner = {
-  name: string;
-  email: string;
-};
-
-type ConfirmationDialogProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: (nextSigner?: NextSigner) => void;
-  hasUninsertedFields: boolean;
-  isSubmitting: boolean;
-  allowDictateNextSigner?: boolean;
-  defaultNextSigner?: NextSigner;
-};
-
-const ZNextSignerFormSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
-});
-
-type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
-
-export function AssistantConfirmationDialog({
-  isOpen,
-  onClose,
-  onConfirm,
-  hasUninsertedFields,
-  isSubmitting,
-  allowDictateNextSigner = false,
-  defaultNextSigner,
-}: ConfirmationDialogProps) {
-  const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
-
-  const form = useForm<TNextSignerFormSchema>({
-    resolver: zodResolver(ZNextSignerFormSchema),
-    defaultValues: {
-      name: defaultNextSigner?.name ?? '',
-      email: defaultNextSigner?.email ?? '',
-    },
-  });
-
-  const onOpenChange = () => {
-    if (isSubmitting) {
-      return;
-    }
-
-    form.reset({
-      name: defaultNextSigner?.name ?? '',
-      email: defaultNextSigner?.email ?? '',
-    });
-
-    onClose();
-  };
-
-  const handleSubmit = () => {
-    // Validate the form and submit it if dictate signer is enabled.
-    if (allowDictateNextSigner) {
-      void form.handleSubmit(onConfirm)();
-      return;
-    }
-
-    onConfirm();
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <Form {...form}>
-          <form>
-            <fieldset disabled={isSubmitting} className="border-none p-0">
-              <DialogHeader>
-                <DialogTitle>
-                  <Trans>Complete Document</Trans>
-                </DialogTitle>
-                <DialogDescription>
-                  <Trans>
-                    Are you sure you want to complete the document? This action cannot be undone.
-                    Please ensure that you have completed prefilling all relevant fields before
-                    proceeding.
-                  </Trans>
-                </DialogDescription>
-              </DialogHeader>
-
-              <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>
-
-                        <Button
-                          type="button"
-                          className="mt-2"
-                          variant="outline"
-                          size="sm"
-                          onClick={() => setIsEditingNextSigner((prev) => !prev)}
-                        >
-                          <Trans>Update Recipient</Trans>
-                        </Button>
-                      </div>
-                    )}
-
-                    {isEditingNextSigner && (
-                      <div className="flex flex-col gap-4 md:flex-row">
-                        <FormField
-                          control={form.control}
-                          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>
-                    )}
-                  </div>
-                )}
-
-                <DocumentSigningDisclosure className="mt-4" />
-              </div>
-
-              <DialogFooter className="mt-4">
-                <Button type="button" variant="secondary" onClick={onClose} disabled={isSubmitting}>
-                  <Trans>Cancel</Trans>
-                </Button>
-                <Button
-                  type="button"
-                  variant={hasUninsertedFields ? 'destructive' : 'default'}
-                  disabled={isSubmitting}
-                  onClick={handleSubmit}
-                  loading={isSubmitting}
-                >
-                  {hasUninsertedFields ? <Trans>Proceed</Trans> : <Trans>Continue</Trans>}
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/remix/app/components/embed/authoring/configure-document-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-authentication-required.tsx

@@ -1,49 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-
-import { SignInForm } from '~/components/forms/signin';
-import { BrandingLogo } from '~/components/general/branding-logo';
-
-export type EmbedAuthenticationRequiredProps = {
-  email?: string;
-  returnTo: string;
-  isGoogleSSOEnabled?: boolean;
-  isOIDCSSOEnabled?: boolean;
-  oidcProviderLabel?: string;
-};
-
-export const EmbedAuthenticationRequired = ({
-  email,
-  returnTo,
-  // isGoogleSSOEnabled,
-  // isOIDCSSOEnabled,
-  // oidcProviderLabel,
-}: EmbedAuthenticationRequiredProps) => {
-  return (
-    <div className="flex min-h-[100dvh] w-full items-center justify-center">
-      <div className="flex w-full max-w-md flex-col">
-        <BrandingLogo className="h-8" />
-
-        <Alert className="mt-8" variant="warning">
-          <AlertDescription>
-            <Trans>
-              To view this document you need to be signed into your account, please sign in to
-              continue.
-            </Trans>
-          </AlertDescription>
-        </Alert>
-
-        <SignInForm
-          // Embed currently not supported.
-          // isGoogleSSOEnabled={isGoogleSSOEnabled}
-          // isOIDCSSOEnabled={isOIDCSSOEnabled}
-          // oidcProviderLabel={oidcProviderLabel}
-          className="mt-4"
-          initialEmail={email}
-          returnTo={returnTo}
-        />
-      </div>
-    </div>
-  );
-};

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

@@ -1,28 +0,0 @@
-import { type TSiteSettingsBannerSchema } from '@documenso/lib/server-only/site-settings/schemas/banner';
-
-export type AppBannerProps = {
-  banner: TSiteSettingsBannerSchema;
-};
-
-export const AppBanner = ({ banner }: AppBannerProps) => {
-  if (!banner.enabled) {
-    return null;
-  }
-
-  return (
-    <div className="mb-2" style={{ background: banner.data.bgColor }}>
-      <div
-        className="mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium"
-        style={{ color: banner.data.textColor }}
-      >
-        <div className="flex items-center">
-          <span dangerouslySetInnerHTML={{ __html: banner.data.content }} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// Banner
-// Custom Text
-// Custom Text with Custom Icon

apps/remix/app/components/general/billing-portal-button.tsx

@@ -1,48 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type BillingPortalButtonProps = {
-  buttonProps?: React.ComponentProps<typeof Button>;
-  children?: React.ReactNode;
-};
-
-export const BillingPortalButton = ({ buttonProps, children }: BillingPortalButtonProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: createBillingPortal, isPending } =
-    trpc.profile.createBillingPortal.useMutation({
-      onSuccess: (sessionUrl) => {
-        window.open(sessionUrl, '_blank');
-      },
-      onError: (err) => {
-        let description = _(
-          msg`We are unable to proceed to the billing portal at this time. Please try again, or contact support.`,
-        );
-
-        if (err.message === 'CUSTOMER_NOT_FOUND') {
-          description = _(
-            msg`You do not currently have a customer record, this should not happen. Please contact support for assistance.`,
-          );
-        }
-
-        toast({
-          title: _(msg`Something went wrong`),
-          description,
-          variant: 'destructive',
-          duration: 10000,
-        });
-      },
-    });
-
-  return (
-    <Button {...buttonProps} onClick={async () => createBillingPortal()} loading={isPending}>
-      {children || <Trans>Manage Subscription</Trans>}
-    </Button>
-  );
-};

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

@@ -1,340 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/react/macro';
-import { RecipientRole } from '@prisma/client';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-import { DialogFooter } from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
-import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
-
-import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
-
-export type DocumentSigningAuth2FAProps = {
-  actionTarget?: 'FIELD' | 'DOCUMENT';
-  actionVerb?: string;
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
-  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
-};
-
-const Z2FAAuthFormSchema = z.object({
-  token: z
-    .string()
-    .min(4, { message: 'Token must at least 4 characters long' })
-    .max(10, { message: 'Token must be at most 10 characters long' }),
-});
-
-type T2FAAuthFormSchema = z.infer<typeof Z2FAAuthFormSchema>;
-
-export const DocumentSigningAuth2FA = ({
-  actionTarget = 'FIELD',
-  actionVerb = 'sign',
-  onReauthFormSubmit,
-  open,
-  onOpenChange,
-}: DocumentSigningAuth2FAProps) => {
-  const { recipient, user, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
-    useRequiredDocumentSigningAuthContext();
-  const { toast } = useToast();
-
-  const form = useForm<T2FAAuthFormSchema>({
-    resolver: zodResolver(Z2FAAuthFormSchema),
-    defaultValues: {
-      token: '',
-    },
-  });
-
-  const [is2FASetupSuccessful, setIs2FASetupSuccessful] = useState(false);
-  const [isEmailCodeSent, setIsEmailCodeSent] = useState(false);
-  const [isEmailCodeSending, setIsEmailCodeSending] = useState(false);
-  const [canResendEmail, setCanResendEmail] = useState(true);
-  const [resendCountdown, setResendCountdown] = useState(0);
-  const countdownTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const [verificationMethod, setVerificationMethod] = useState<'app' | 'email'>(
-    user?.twoFactorEnabled ? 'app' : 'email',
-  );
-  const emailSendInitiatedRef = useRef(false);
-
-  const sendVerificationMutation = trpc.auth.sendEmailVerification.useMutation({
-    onSuccess: () => {
-      setIsEmailCodeSent(true);
-      setCanResendEmail(false);
-      setResendCountdown(60);
-
-      countdownTimerRef.current = setInterval(() => {
-        setResendCountdown((prev) => {
-          if (prev <= 1) {
-            if (countdownTimerRef.current) {
-              clearInterval(countdownTimerRef.current);
-            }
-            setCanResendEmail(true);
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-
-      toast({
-        title: 'Verification code sent',
-        description: `A verification code has been sent to ${recipient.email}`,
-      });
-    },
-    onError: (error) => {
-      console.error('Failed to send verification code', error);
-      toast({
-        title: 'Failed to send verification code',
-        description: 'Please try again or contact support',
-        variant: 'destructive',
-      });
-    },
-    onSettled: () => {
-      setIsEmailCodeSending(false);
-    },
-  });
-
-  const verifyCodeMutation = trpc.auth.verifyEmailCode.useMutation();
-
-  const sendEmailVerificationCode = async () => {
-    try {
-      setIsEmailCodeSending(true);
-      await sendVerificationMutation.mutateAsync({
-        recipientId: recipient.id,
-      });
-    } catch (error) {
-      toast({
-        title: 'Failed to send verification code',
-        description: 'Please try again.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    return () => {
-      if (countdownTimerRef.current) {
-        clearInterval(countdownTimerRef.current);
-      }
-    };
-  }, []);
-
-  const onFormSubmit = async ({ token }: T2FAAuthFormSchema) => {
-    try {
-      setIsCurrentlyAuthenticating(true);
-
-      if (verificationMethod === 'email') {
-        await verifyCodeMutation.mutateAsync({
-          code: token,
-          recipientId: recipient.id,
-        });
-      }
-
-      await onReauthFormSubmit({
-        type: DocumentAuth.TWO_FACTOR_AUTH,
-        token,
-      });
-
-      setIsCurrentlyAuthenticating(false);
-      onOpenChange(false);
-    } catch (err) {
-      setIsCurrentlyAuthenticating(false);
-
-      toast({
-        title: 'Unauthorized',
-        description: 'We were unable to verify your details.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    form.reset({
-      token: '',
-    });
-
-    setIs2FASetupSuccessful(false);
-    setIsEmailCodeSent(false);
-
-    if (open && !user?.twoFactorEnabled) {
-      setVerificationMethod('email');
-    }
-  }, [open, user?.twoFactorEnabled, form]);
-
-  useEffect(() => {
-    if (!open || verificationMethod !== 'email') {
-      emailSendInitiatedRef.current = false;
-    }
-  }, [open, verificationMethod]);
-
-  useEffect(() => {
-    if (open && verificationMethod === 'email' && !isEmailCodeSent && !isEmailCodeSending) {
-      if (!emailSendInitiatedRef.current) {
-        emailSendInitiatedRef.current = true;
-        void sendEmailVerificationCode();
-      }
-    }
-  }, [open, verificationMethod, isEmailCodeSent, isEmailCodeSending]);
-
-  if (verificationMethod === 'app' && !user?.twoFactorEnabled && !is2FASetupSuccessful) {
-    return (
-      <div className="space-y-4">
-        <Tabs
-          value={verificationMethod}
-          onValueChange={(val) => setVerificationMethod(val as 'app' | 'email')}
-        >
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="app">Authenticator App</TabsTrigger>
-            <TabsTrigger value="email">Email Verification</TabsTrigger>
-          </TabsList>
-        </Tabs>
-
-        <Alert variant="warning">
-          <AlertDescription>
-            <p>
-              {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT' ? (
-                <Trans>You need to setup 2FA to mark this document as viewed.</Trans>
-              ) : (
-                `You need to setup 2FA to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`
-              )}
-            </p>
-
-            <p className="mt-2">
-              <Trans>
-                By enabling 2FA, you will be required to enter a code from your authenticator app
-                every time you sign in using email password.
-              </Trans>
-            </p>
-          </AlertDescription>
-        </Alert>
-        <DialogFooter>
-          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            <Trans>Close</Trans>
-          </Button>
-
-          <EnableAuthenticatorAppDialog onSuccess={() => setIs2FASetupSuccessful(true)} />
-        </DialogFooter>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {user?.twoFactorEnabled && (
-        <Tabs
-          value={verificationMethod}
-          onValueChange={(val) => setVerificationMethod(val as 'app' | 'email')}
-        >
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="app">Authenticator App</TabsTrigger>
-            <TabsTrigger value="email">Email Verification</TabsTrigger>
-          </TabsList>
-        </Tabs>
-      )}
-
-      {verificationMethod === 'email' && (
-        <Alert variant="secondary">
-          <AlertDescription>
-            {isEmailCodeSent ? (
-              <p>
-                <Trans>
-                  A verification code has been sent to {recipient.email}. Please enter it below to
-                  continue.
-                </Trans>
-              </p>
-            ) : (
-              <p>
-                <Trans>
-                  We'll send a verification code to {recipient.email} to verify your identity.
-                </Trans>
-              </p>
-            )}
-          </AlertDescription>
-        </Alert>
-      )}
-
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onFormSubmit)}>
-          <fieldset disabled={isCurrentlyAuthenticating}>
-            <div className="space-y-4">
-              <FormField
-                control={form.control}
-                name="token"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel required>
-                      {verificationMethod === 'app' ? (
-                        <Trans>2FA token</Trans>
-                      ) : (
-                        <Trans>Verification code</Trans>
-                      )}
-                    </FormLabel>
-
-                    <FormControl>
-                      <PinInput {...field} value={field.value ?? ''} maxLength={6}>
-                        {Array(6)
-                          .fill(null)
-                          .map((_, i) => (
-                            <PinInputGroup key={i}>
-                              <PinInputSlot index={i} />
-                            </PinInputGroup>
-                          ))}
-                      </PinInput>
-                    </FormControl>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {verificationMethod === 'email' && (
-                <div className="flex justify-center">
-                  <Button
-                    type="button"
-                    variant="link"
-                    disabled={isEmailCodeSending || !canResendEmail}
-                    onClick={() => void sendEmailVerificationCode()}
-                  >
-                    {isEmailCodeSending ? (
-                      <Trans>Sending...</Trans>
-                    ) : !canResendEmail ? (
-                      <Trans>Resend code ({resendCountdown}s)</Trans>
-                    ) : (
-                      <Trans>Resend code</Trans>
-                    )}
-                  </Button>
-                </div>
-              )}
-
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                  <Trans>Cancel</Trans>
-                </Button>
-
-                <Button type="submit" loading={isCurrentlyAuthenticating}>
-                  <Trans>{actionTarget === 'DOCUMENT' ? 'Sign Document' : 'Sign Field'}</Trans>
-                </Button>
-              </DialogFooter>
-            </div>
-          </fieldset>
-        </form>
-      </Form>
-    </div>
-  );
-};

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

@@ -1,314 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/react/macro';
-import type { Field } from '@prisma/client';
-import { RecipientRole } from '@prisma/client';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import { z } from 'zod';
-
-import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  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 { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
-
-export type DocumentSigningCompleteDialogProps = {
-  isSubmitting: boolean;
-  documentTitle: string;
-  fields: Field[];
-  fieldsValidated: () => void | Promise<void>;
-  onSignatureComplete: (nextSigner?: { name: string; email: string }) => void | Promise<void>;
-  role: RecipientRole;
-  disabled?: boolean;
-  allowDictateNextSigner?: boolean;
-  defaultNextSigner?: {
-    name: string;
-    email: string;
-  };
-};
-
-const ZNextSignerFormSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
-});
-
-type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
-
-export const DocumentSigningCompleteDialog = ({
-  isSubmitting,
-  documentTitle,
-  fields,
-  fieldsValidated,
-  onSignatureComplete,
-  role,
-  disabled = false,
-  allowDictateNextSigner = false,
-  defaultNextSigner,
-}: DocumentSigningCompleteDialogProps) => {
-  const [showDialog, setShowDialog] = useState(false);
-  const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
-
-  const form = useForm<TNextSignerFormSchema>({
-    resolver: allowDictateNextSigner ? zodResolver(ZNextSignerFormSchema) : undefined,
-    defaultValues: {
-      name: defaultNextSigner?.name ?? '',
-      email: defaultNextSigner?.email ?? '',
-    },
-  });
-
-  const isComplete = useMemo(() => !fieldsContainUnsignedRequiredField(fields), [fields]);
-
-  const handleOpenChange = (open: boolean) => {
-    if (form.formState.isSubmitting || !isComplete) {
-      return;
-    }
-
-    if (open) {
-      form.reset({
-        name: defaultNextSigner?.name ?? '',
-        email: defaultNextSigner?.email ?? '',
-      });
-    }
-
-    setIsEditingNextSigner(false);
-    setShowDialog(open);
-  };
-
-  const onFormSubmit = async (data: TNextSignerFormSchema) => {
-    console.log('data', data);
-    console.log('form.formState.errors', form.formState.errors);
-    try {
-      if (allowDictateNextSigner && data.name && data.email) {
-        await onSignatureComplete({ name: data.name, email: data.email });
-      } else {
-        await onSignatureComplete();
-      }
-    } catch (error) {
-      console.error('Error completing signature:', error);
-    }
-  };
-
-  const isNextSignerValid = !allowDictateNextSigner || (form.watch('name') && form.watch('email'));
-
-  return (
-    <Dialog open={showDialog} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>
-        <Button
-          className="w-full"
-          type="button"
-          size="lg"
-          onClick={fieldsValidated}
-          loading={isSubmitting}
-          disabled={disabled}
-        >
-          {match({ isComplete, role })
-            .with({ isComplete: false }, () => <Trans>Next field</Trans>)
-            .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
-            .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
-              <Trans>Mark as viewed</Trans>
-            ))
-            .with({ isComplete: true }, () => <Trans>Complete</Trans>)
-            .exhaustive()}
-        </Button>
-      </DialogTrigger>
-
-      <DialogContent>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
-              <DialogTitle>
-                <div className="text-foreground text-xl font-semibold">
-                  {match(role)
-                    .with(RecipientRole.VIEWER, () => <Trans>Complete Viewing</Trans>)
-                    .with(RecipientRole.SIGNER, () => <Trans>Complete Signing</Trans>)
-                    .with(RecipientRole.APPROVER, () => <Trans>Complete Approval</Trans>)
-                    .with(RecipientRole.CC, () => <Trans>Complete Viewing</Trans>)
-                    .with(RecipientRole.ASSISTANT, () => <Trans>Complete Assisting</Trans>)
-                    .exhaustive()}
-                </div>
-              </DialogTitle>
-
-              <div className="text-muted-foreground max-w-[50ch]">
-                {match(role)
-                  .with(RecipientRole.VIEWER, () => (
-                    <span>
-                      <Trans>
-                        <span className="inline-flex flex-wrap">
-                          You are about to complete viewing "
-                          <span className="inline-block max-w-[11rem] truncate align-baseline">
-                            {documentTitle}
-                          </span>
-                          ".
-                        </span>
-                        <br /> Are you sure?
-                      </Trans>
-                    </span>
-                  ))
-                  .with(RecipientRole.SIGNER, () => (
-                    <span>
-                      <Trans>
-                        <span className="inline-flex flex-wrap">
-                          You are about to complete signing "
-                          <span className="inline-block max-w-[11rem] truncate align-baseline">
-                            {documentTitle}
-                          </span>
-                          ".
-                        </span>
-                        <br /> Are you sure?
-                      </Trans>
-                    </span>
-                  ))
-                  .with(RecipientRole.APPROVER, () => (
-                    <span>
-                      <Trans>
-                        <span className="inline-flex flex-wrap">
-                          You are about to complete approving{' '}
-                          <span className="inline-block max-w-[11rem] truncate align-baseline">
-                            "{documentTitle}"
-                          </span>
-                          .
-                        </span>
-                        <br /> Are you sure?
-                      </Trans>
-                    </span>
-                  ))
-                  .otherwise(() => (
-                    <span>
-                      <Trans>
-                        <span className="inline-flex flex-wrap">
-                          You are about to complete viewing "
-                          <span className="inline-block max-w-[11rem] truncate align-baseline">
-                            {documentTitle}
-                          </span>
-                          ".
-                        </span>
-                        <br /> Are you sure?
-                      </Trans>
-                    </span>
-                  ))}
-              </div>
-
-              {allowDictateNextSigner && (
-                <div className="mt-4 flex flex-col gap-4">
-                  {!isEditingNextSigner && (
-                    <div>
-                      <p className="text-muted-foreground text-sm">
-                        The next recipient to sign this document will be{' '}
-                        <span className="font-semibold">{form.watch('name')}</span> (
-                        <span className="font-semibold">{form.watch('email')}</span>).
-                      </p>
-
-                      <Button
-                        type="button"
-                        className="mt-2"
-                        variant="outline"
-                        size="sm"
-                        onClick={() => setIsEditingNextSigner((prev) => !prev)}
-                      >
-                        <Trans>Update Recipient</Trans>
-                      </Button>
-                    </div>
-                  )}
-
-                  {isEditingNextSigner && (
-                    <div className="flex flex-col gap-4 md:flex-row">
-                      <FormField
-                        control={form.control}
-                        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>
-                  )}
-                </div>
-              )}
-
-              <DocumentSigningDisclosure className="mt-4" />
-
-              <DialogFooter className="mt-4">
-                <div className="flex w-full flex-1 flex-nowrap gap-4">
-                  <Button
-                    type="button"
-                    className="flex-1"
-                    variant="secondary"
-                    onClick={() => setShowDialog(false)}
-                    disabled={form.formState.isSubmitting}
-                  >
-                    <Trans>Cancel</Trans>
-                  </Button>
-
-                  <Button
-                    type="submit"
-                    className="flex-1"
-                    disabled={!isComplete || !isNextSignerValid}
-                    loading={form.formState.isSubmitting}
-                  >
-                    {match(role)
-                      .with(RecipientRole.VIEWER, () => <Trans>Mark as Viewed</Trans>)
-                      .with(RecipientRole.SIGNER, () => <Trans>Sign</Trans>)
-                      .with(RecipientRole.APPROVER, () => <Trans>Approve</Trans>)
-                      .with(RecipientRole.CC, () => <Trans>Mark as Viewed</Trans>)
-                      .with(RecipientRole.ASSISTANT, () => <Trans>Complete</Trans>)
-                      .exhaustive()}
-                  </Button>
-                </div>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

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

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

@@ -1,86 +0,0 @@
-import { createContext, useContext, useState } from 'react';
-
-import { isBase64Image } from '@documenso/lib/constants/signatures';
-
-export type DocumentSigningContextValue = {
-  fullName: string;
-  setFullName: (_value: string) => void;
-  email: string;
-  setEmail: (_value: string) => void;
-  signature: string | null;
-  setSignature: (_value: string | null) => void;
-};
-
-const DocumentSigningContext = createContext<DocumentSigningContextValue | null>(null);
-
-export const useDocumentSigningContext = () => {
-  return useContext(DocumentSigningContext);
-};
-
-export const useRequiredDocumentSigningContext = () => {
-  const context = useDocumentSigningContext();
-
-  if (!context) {
-    throw new Error('Signing context is required');
-  }
-
-  return context;
-};
-
-export interface DocumentSigningProviderProps {
-  fullName?: string | null;
-  email?: string | null;
-  signature?: string | null;
-  typedSignatureEnabled?: boolean;
-  uploadSignatureEnabled?: boolean;
-  drawSignatureEnabled?: boolean;
-  children: React.ReactNode;
-}
-
-export const DocumentSigningProvider = ({
-  fullName: initialFullName,
-  email: initialEmail,
-  signature: initialSignature,
-  typedSignatureEnabled = true,
-  uploadSignatureEnabled = true,
-  drawSignatureEnabled = true,
-  children,
-}: DocumentSigningProviderProps) => {
-  const [fullName, setFullName] = useState(initialFullName || '');
-  const [email, setEmail] = useState(initialEmail || '');
-
-  // Ensure the user signature doesn't show up if it's not allowed.
-  const [signature, setSignature] = useState(
-    (() => {
-      const sig = initialSignature || '';
-      const isBase64 = isBase64Image(sig);
-
-      if (isBase64 && (uploadSignatureEnabled || drawSignatureEnabled)) {
-        return sig;
-      }
-
-      if (!isBase64 && typedSignatureEnabled) {
-        return sig;
-      }
-
-      return null;
-    })(),
-  );
-
-  return (
-    <DocumentSigningContext.Provider
-      value={{
-        fullName,
-        setFullName,
-        email,
-        setEmail,
-        signature,
-        setSignature,
-      }}
-    >
-      {children}
-    </DocumentSigningContext.Provider>
-  );
-};
-
-DocumentSigningProvider.displayName = 'DocumentSigningProvider';

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

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

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

@@ -1,192 +0,0 @@
-import { type ReactNode, useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
-import { useDropzone } from 'react-dropzone';
-import { Link, useNavigate, useParams } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-export interface DocumentDropZoneWrapperProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZoneWrapperProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { user } = useSession();
-  const { folderId } = useParams();
-
-  const team = useOptionalCurrentTeam();
-
-  const navigate = useNavigate();
-  const analytics = useAnalytics();
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const userTimezone =
-    TIME_ZONES.find((timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone) ??
-    DEFAULT_DOCUMENT_TIME_ZONE;
-
-  const { quota, remaining, refreshLimits } = useLimits();
-
-  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
-
-  const isUploadDisabled = remaining.documents === 0 || !user.emailVerified;
-
-  const onFileDrop = async (file: File) => {
-    if (isUploadDisabled && IS_BILLING_ENABLED()) {
-      await navigate('/settings/billing');
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-
-      const response = await putPdfFile(file);
-
-      const { id } = await createDocument({
-        title: file.name,
-        documentDataId: response.id,
-        timezone: userTimezone,
-        folderId: folderId ?? undefined,
-      });
-
-      void refreshLimits();
-
-      toast({
-        title: _(msg`Document uploaded`),
-        description: _(msg`Your document has been uploaded successfully.`),
-        duration: 5000,
-      });
-
-      analytics.capture('App: Document Uploaded', {
-        userId: user.id,
-        documentId: id,
-        timestamp: new Date().toISOString(),
-      });
-
-      await navigate(
-        folderId
-          ? `${formatDocumentsPath(team?.url)}/f/${folderId}/${id}/edit`
-          : `${formatDocumentsPath(team?.url)}/${id}/edit`,
-      );
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      const errorMessage = match(error.code)
-        .with('INVALID_DOCUMENT_FILE', () => msg`You cannot upload encrypted PDFs`)
-        .with(
-          AppErrorCode.LIMIT_EXCEEDED,
-          () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
-        )
-        .otherwise(() => msg`An error occurred while uploading your document.`);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(errorMessage),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const onFileDropRejected = () => {
-    toast({
-      title: _(msg`Your document failed to upload.`),
-      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
-      duration: 5000,
-      variant: 'destructive',
-    });
-  };
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: {
-      'application/pdf': ['.pdf'],
-    },
-    //disabled: isUploadDisabled,
-    multiple: false,
-    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
-    onDrop: ([acceptedFile]) => {
-      if (acceptedFile) {
-        void onFileDrop(acceptedFile);
-      }
-    },
-    onDropRejected: () => {
-      void onFileDropRejected();
-    },
-    noClick: true,
-    noDragEventsBubbling: true,
-  });
-
-  return (
-    <div {...getRootProps()} className={cn('relative min-h-screen', className)}>
-      <input {...getInputProps()} />
-      {children}
-
-      {isDragActive && (
-        <div className="bg-muted/60 fixed left-0 top-0 z-[9999] h-full w-full backdrop-blur-[4px]">
-          <div className="pointer-events-none flex h-full w-full flex-col items-center justify-center">
-            <h2 className="text-foreground text-2xl font-semibold">
-              <Trans>Upload Document</Trans>
-            </h2>
-
-            <p className="text-muted-foreground text-md mt-4">
-              <Trans>Drag and drop your PDF file here</Trans>
-            </p>
-
-            {isUploadDisabled && IS_BILLING_ENABLED() && (
-              <Link
-                to="/settings/billing"
-                className="mt-4 text-sm text-amber-500 hover:underline dark:text-amber-400"
-              >
-                <Trans>Upgrade your plan to upload more documents</Trans>
-              </Link>
-            )}
-
-            {!isUploadDisabled &&
-              team?.id === undefined &&
-              remaining.documents > 0 &&
-              Number.isFinite(remaining.documents) && (
-                <p className="text-muted-foreground/80 mt-4 text-sm">
-                  <Trans>
-                    {remaining.documents} of {quota.documents} documents remaining this month.
-                  </Trans>
-                </p>
-              )}
-          </div>
-        </div>
-      )}
-
-      {isLoading && (
-        <div className="bg-muted/30 absolute inset-0 z-50 backdrop-blur-[2px]">
-          <div className="pointer-events-none flex h-1/2 w-full flex-col items-center justify-center">
-            <Loader className="text-primary h-12 w-12 animate-spin" />
-            <p className="text-foreground mt-8 font-medium">
-              <Trans>Uploading document...</Trans>
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

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

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

apps/remix/app/components/general/generic-error-layout.tsx

@@ -1,125 +0,0 @@
-import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { motion } from 'framer-motion';
-import { ChevronLeft } from 'lucide-react';
-import { Link, useNavigate } from 'react-router';
-
-import backgroundPattern from '@documenso/assets/images/background-pattern.png';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-type ErrorCodeMap = Record<
-  number,
-  { subHeading: MessageDescriptor; heading: MessageDescriptor; message: MessageDescriptor }
->;
-
-export type GenericErrorLayoutProps = {
-  children?: React.ReactNode;
-  errorCode?: number;
-  errorCodeMap?: ErrorCodeMap;
-  /**
-   * The primary button to display. If left as undefined, the default /documents link will be displayed.
-   *
-   * Set to null if you want no button.
-   */
-  primaryButton?: React.ReactNode | null;
-
-  /**
-   * The secondary button to display. If left as undefined, the default back button will be displayed.
-   *
-   * Set to null if you want no button.
-   */
-  secondaryButton?: React.ReactNode | null;
-};
-
-export const defaultErrorCodeMap: ErrorCodeMap = {
-  404: {
-    subHeading: msg`404 not found`,
-    heading: msg`Oops! Something went wrong.`,
-    message: msg`The page you are looking for was moved, removed, renamed or might never have existed.`,
-  },
-  500: {
-    subHeading: msg`500 Internal Server Error`,
-    heading: msg`Oops! Something went wrong.`,
-    message: msg`An unexpected error occurred.`,
-  },
-};
-
-export const GenericErrorLayout = ({
-  children,
-  errorCode,
-  errorCodeMap = defaultErrorCodeMap,
-  primaryButton,
-  secondaryButton,
-}: GenericErrorLayoutProps) => {
-  const navigate = useNavigate();
-  const { _ } = useLingui();
-
-  const team = useOptionalCurrentTeam();
-
-  const { subHeading, heading, message } =
-    errorCodeMap[errorCode || 500] ?? defaultErrorCodeMap[500];
-
-  return (
-    <div className="fixed inset-0 z-0 flex h-screen w-screen items-center justify-center">
-      <div className="absolute -inset-24 -z-10">
-        <motion.div
-          className="flex h-full w-full items-center justify-center"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
-        >
-          <img
-            src={backgroundPattern}
-            alt="background pattern"
-            className="-ml-[50vw] -mt-[15vh] h-full scale-100 object-cover md:scale-100 lg:scale-[100%] dark:contrast-[70%] dark:invert dark:sepia"
-            style={{
-              mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
-              WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
-            }}
-          />
-        </motion.div>
-      </div>
-
-      <div className="inset-0 mx-auto flex h-full flex-grow items-center justify-center px-6 py-32">
-        <div>
-          <p className="text-muted-foreground font-semibold">{_(subHeading)}</p>
-
-          <h1 className="mt-3 text-2xl font-bold md:text-3xl">{_(heading)}</h1>
-
-          <p className="text-muted-foreground mt-4 text-sm">{_(message)}</p>
-
-          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
-            {secondaryButton ||
-              (secondaryButton !== null && (
-                <Button
-                  variant="ghost"
-                  className="w-32"
-                  onClick={() => {
-                    void navigate(-1);
-                  }}
-                >
-                  <ChevronLeft className="mr-2 h-4 w-4" />
-                  <Trans>Go Back</Trans>
-                </Button>
-              ))}
-
-            {primaryButton ||
-              (primaryButton !== null && (
-                <Button asChild>
-                  <Link to={formatDocumentsPath(team?.url)}>
-                    <Trans>Documents</Trans>
-                  </Link>
-                </Button>
-              ))}
-
-            {children}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

apps/remix/app/components/general/legacy-field-warning-popover.tsx

@@ -1,112 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { AlertCircle } from 'lucide-react';
-import { useRevalidator } from 'react-router';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { PopoverHover } from '@documenso/ui/primitives/popover';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type LegacyFieldWarningPopoverProps = {
-  type?: 'document' | 'template';
-  documentId?: number;
-  templateId?: number;
-};
-
-export const LegacyFieldWarningPopover = ({
-  type = 'document',
-  documentId,
-  templateId,
-}: LegacyFieldWarningPopoverProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const revalidator = useRevalidator();
-
-  const { mutateAsync: updateTemplate, isPending: isUpdatingTemplate } =
-    trpc.template.updateTemplate.useMutation();
-  const { mutateAsync: updateDocument, isPending: isUpdatingDocument } =
-    trpc.document.updateDocument.useMutation();
-
-  const onUpdateFieldsClick = async () => {
-    if (type === 'document') {
-      if (!documentId) {
-        return;
-      }
-
-      await updateDocument({
-        documentId,
-        data: {
-          useLegacyFieldInsertion: false,
-        },
-      });
-    }
-
-    if (type === 'template') {
-      if (!templateId) {
-        return;
-      }
-
-      await updateTemplate({
-        templateId,
-        data: {
-          useLegacyFieldInsertion: false,
-        },
-      });
-    }
-
-    void revalidator.revalidate();
-
-    toast({
-      title: _(msg`Fields updated`),
-      description: _(
-        msg`The fields have been updated to the new field insertion method successfully`,
-      ),
-    });
-  };
-
-  return (
-    <PopoverHover
-      side="bottom"
-      trigger={
-        <Button variant="outline" className="h-9 w-9 p-0">
-          <span className="sr-only">
-            {type === 'document' ? (
-              <Trans>Document is using legacy field insertion</Trans>
-            ) : (
-              <Trans>Template is using legacy field insertion</Trans>
-            )}
-          </span>
-          <AlertCircle className="h-5 w-5" />
-        </Button>
-      }
-    >
-      <p className="text-muted-foreground text-sm">
-        {type === 'document' ? (
-          <Trans>
-            This document is using legacy field insertion, we recommend using the new field
-            insertion method for more accurate results.
-          </Trans>
-        ) : (
-          <Trans>
-            This template is using legacy field insertion, we recommend using the new field
-            insertion method for more accurate results.
-          </Trans>
-        )}
-      </p>
-
-      <div className="mt-2 flex w-full items-center justify-end">
-        <Button
-          type="button"
-          size="sm"
-          loading={isUpdatingDocument || isUpdatingTemplate}
-          onClick={onUpdateFieldsClick}
-        >
-          <Trans>Update Fields</Trans>
-        </Button>
-      </div>
-    </PopoverHover>
-  );
-};

apps/remix/app/components/general/portal.tsx

@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { createPortal } from 'react-dom';
-
-type PortalComponentProps = {
-  children: React.ReactNode;
-  target: string;
-};
-
-export const PortalComponent = ({ children, target }: PortalComponentProps) => {
-  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    setPortalRoot(document.getElementById(target));
-  }, [target]);
-
-  return portalRoot ? createPortal(children, portalRoot) : null;
-};

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

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

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

@@ -1,47 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { WebhookTriggerEvents } from '@prisma/client';
-
-import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
-import { MultiSelect, type Option } from '@documenso/ui/primitives/multiselect';
-
-type WebhookMultiSelectComboboxProps = {
-  listValues: string[];
-  onChange: (_values: string[]) => void;
-};
-
-const triggerEvents = Object.values(WebhookTriggerEvents).map((event) => ({
-  value: event,
-  label: toFriendlyWebhookEventName(event),
-}));
-
-export const WebhookMultiSelectCombobox = ({
-  listValues,
-  onChange,
-}: WebhookMultiSelectComboboxProps) => {
-  const { _ } = useLingui();
-
-  const value = listValues.map((event) => ({
-    value: event,
-    label: toFriendlyWebhookEventName(event),
-  }));
-
-  const onMutliSelectChange = (options: Option[]) => {
-    onChange(options.map((option) => option.value));
-  };
-
-  return (
-    <MultiSelect
-      commandProps={{
-        label: _(msg`Select triggers`),
-      }}
-      defaultOptions={triggerEvents}
-      value={value}
-      onChange={onMutliSelectChange}
-      placeholder={_(msg`Select triggers`)}
-      hideClearAllButton
-      hidePlaceholderWhenSelected
-      emptyIndicator={<p className="text-center text-sm">No triggers available</p>}
-    />
-  );
-};

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

@@ -1,215 +0,0 @@
-import { useMemo, useTransition } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Loader } from 'lucide-react';
-import { DateTime } from 'luxon';
-import { Link } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
-import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
-import { DataTable } from '@documenso/ui/primitives/data-table';
-import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-import { TableCell } from '@documenso/ui/primitives/table';
-
-import { DocumentStatus } from '~/components/general/document/document-status';
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
-import { DocumentsTableActionButton } from './documents-table-action-button';
-import { DocumentsTableActionDropdown } from './documents-table-action-dropdown';
-
-export type DocumentsTableProps = {
-  data?: TFindDocumentsResponse;
-  isLoading?: boolean;
-  isLoadingError?: boolean;
-  onMoveDocument?: (documentId: number) => void;
-};
-
-type DocumentsTableRow = TFindDocumentsResponse['data'][number];
-
-export const DocumentsTable = ({
-  data,
-  isLoading,
-  isLoadingError,
-  onMoveDocument,
-}: DocumentsTableProps) => {
-  const { _, i18n } = useLingui();
-
-  const team = useOptionalCurrentTeam();
-  const [isPending, startTransition] = useTransition();
-
-  const updateSearchParams = useUpdateSearchParams();
-
-  const columns = useMemo(() => {
-    return [
-      {
-        header: _(msg`Created`),
-        accessorKey: 'createdAt',
-        cell: ({ row }) =>
-          i18n.date(row.original.createdAt, { ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }),
-      },
-      {
-        header: _(msg`Title`),
-        cell: ({ row }) => <DataTableTitle row={row.original} teamUrl={team?.url} />,
-      },
-      {
-        id: 'sender',
-        header: _(msg`Sender`),
-        cell: ({ row }) => row.original.user.name ?? row.original.user.email,
-      },
-      {
-        header: _(msg`Recipient`),
-        accessorKey: 'recipient',
-        cell: ({ row }) => (
-          <StackAvatarsWithTooltip
-            recipients={row.original.recipients}
-            documentStatus={row.original.status}
-          />
-        ),
-      },
-      {
-        header: _(msg`Status`),
-        accessorKey: 'status',
-        cell: ({ row }) => <DocumentStatus status={row.original.status} />,
-        size: 140,
-      },
-      {
-        header: _(msg`Actions`),
-        cell: ({ row }) =>
-          (!row.original.deletedAt || isDocumentCompleted(row.original.status)) && (
-            <div className="flex items-center gap-x-4">
-              <DocumentsTableActionButton row={row.original} />
-              <DocumentsTableActionDropdown
-                row={row.original}
-                onMoveDocument={onMoveDocument ? () => onMoveDocument(row.original.id) : undefined}
-              />
-            </div>
-          ),
-      },
-    ] satisfies DataTableColumnDef<DocumentsTableRow>[];
-  }, [team, onMoveDocument]);
-
-  const onPaginationChange = (page: number, perPage: number) => {
-    startTransition(() => {
-      updateSearchParams({
-        page,
-        perPage,
-      });
-    });
-  };
-
-  const results = data ?? {
-    data: [],
-    perPage: 10,
-    currentPage: 1,
-    totalPages: 1,
-  };
-
-  return (
-    <div className="relative">
-      <DataTable
-        columns={columns}
-        data={results.data}
-        perPage={results.perPage}
-        currentPage={results.currentPage}
-        totalPages={results.totalPages}
-        onPaginationChange={onPaginationChange}
-        columnVisibility={{
-          sender: team !== undefined,
-        }}
-        error={{
-          enable: isLoadingError || false,
-        }}
-        skeleton={{
-          enable: isLoading || false,
-          rows: 5,
-          component: (
-            <>
-              <TableCell>
-                <Skeleton className="h-4 w-40 rounded-full" />
-              </TableCell>
-              <TableCell>
-                <Skeleton className="h-4 w-20 rounded-full" />
-              </TableCell>
-              <TableCell className="py-4">
-                <div className="flex w-full flex-row items-center">
-                  <Skeleton className="h-10 w-10 flex-shrink-0 rounded-full" />
-                </div>
-              </TableCell>
-              <TableCell>
-                <Skeleton className="h-4 w-20 rounded-full" />
-              </TableCell>
-              <TableCell>
-                <Skeleton className="h-10 w-24 rounded" />
-              </TableCell>
-            </>
-          ),
-        }}
-      >
-        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
-      </DataTable>
-
-      {isPending && (
-        <div className="bg-background/50 absolute inset-0 flex items-center justify-center">
-          <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      )}
-    </div>
-  );
-};
-
-type DataTableTitleProps = {
-  row: DocumentsTableRow;
-  teamUrl?: string;
-};
-
-const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
-  const { user } = useSession();
-
-  const recipient = row.recipients.find((recipient) => recipient.email === user.email);
-
-  const isOwner = row.user.id === user.id;
-  const isRecipient = !!recipient;
-  const isCurrentTeamDocument = teamUrl && row.team?.url === teamUrl;
-
-  const documentsPath = formatDocumentsPath(isCurrentTeamDocument ? teamUrl : undefined);
-  const formatPath = row.folderId
-    ? `${documentsPath}/f/${row.folderId}/${row.id}`
-    : `${documentsPath}/${row.id}`;
-
-  return match({
-    isOwner,
-    isRecipient,
-    isCurrentTeamDocument,
-  })
-    .with({ isOwner: true }, { isCurrentTeamDocument: true }, () => (
-      <Link
-        to={formatPath}
-        title={row.title}
-        className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
-      >
-        {row.title}
-      </Link>
-    ))
-    .with({ isRecipient: true }, () => (
-      <Link
-        to={`/sign/${recipient?.token}`}
-        title={row.title}
-        className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
-      >
-        {row.title}
-      </Link>
-    ))
-    .otherwise(() => (
-      <span className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]">
-        {row.title}
-      </span>
-    ));
-};

apps/remix/app/entry.client.tsx

@@ -1,48 +0,0 @@
-import { StrictMode, startTransition, useEffect } from 'react';
-
-import { i18n } from '@lingui/core';
-import { detect, fromHtmlTag } from '@lingui/detect-locale';
-import { I18nProvider } from '@lingui/react';
-import posthog from 'posthog-js';
-import { hydrateRoot } from 'react-dom/client';
-import { HydratedRouter } from 'react-router/dom';
-
-import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
-import { dynamicActivate } from '@documenso/lib/utils/i18n';
-
-function PosthogInit() {
-  const postHogConfig = extractPostHogConfig();
-
-  useEffect(() => {
-    if (postHogConfig) {
-      posthog.init(postHogConfig.key, {
-        api_host: postHogConfig.host,
-        capture_exceptions: true,
-      });
-    }
-  }, []);
-
-  return null;
-}
-
-async function main() {
-  const locale = detect(fromHtmlTag('lang')) || 'en';
-
-  await dynamicActivate(locale);
-
-  startTransition(() => {
-    hydrateRoot(
-      document,
-      <StrictMode>
-        <I18nProvider i18n={i18n}>
-          <HydratedRouter />
-        </I18nProvider>
-
-        <PosthogInit />
-      </StrictMode>,
-    );
-  });
-}
-
-// eslint-disable-next-line @typescript-eslint/no-floating-promises
-main();

apps/remix/app/entry.server.tsx

@@ -1,82 +0,0 @@
-import { i18n } from '@lingui/core';
-import { I18nProvider } from '@lingui/react';
-import { createReadableStreamFromReadable } from '@react-router/node';
-import { isbot } from 'isbot';
-import { PassThrough } from 'node:stream';
-import type { RenderToPipeableStreamOptions } from 'react-dom/server';
-import { renderToPipeableStream } from 'react-dom/server';
-import type { AppLoadContext, EntryContext } from 'react-router';
-import { ServerRouter } from 'react-router';
-
-import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
-import { dynamicActivate, extractLocaleData } from '@documenso/lib/utils/i18n';
-
-import { langCookie } from './storage/lang-cookie.server';
-
-export const streamTimeout = 5_000;
-
-export default async function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  routerContext: EntryContext,
-  _loadContext: AppLoadContext,
-) {
-  let language = await langCookie.parse(request.headers.get('cookie') ?? '');
-
-  if (!APP_I18N_OPTIONS.supportedLangs.includes(language)) {
-    language = extractLocaleData({ headers: request.headers }).lang;
-  }
-
-  await dynamicActivate(language);
-
-  return new Promise((resolve, reject) => {
-    let shellRendered = false;
-    const userAgent = request.headers.get('user-agent');
-
-    // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
-    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
-    const readyOption: keyof RenderToPipeableStreamOptions =
-      (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
-
-    const { pipe, abort } = renderToPipeableStream(
-      <I18nProvider i18n={i18n}>
-        <ServerRouter context={routerContext} url={request.url} />
-      </I18nProvider>,
-      {
-        [readyOption]() {
-          shellRendered = true;
-          const body = new PassThrough();
-          const stream = createReadableStreamFromReadable(body);
-
-          responseHeaders.set('Content-Type', 'text/html');
-
-          resolve(
-            new Response(stream, {
-              headers: responseHeaders,
-              status: responseStatusCode,
-            }),
-          );
-
-          pipe(body);
-        },
-        onShellError(error: unknown) {
-          reject(error);
-        },
-        onError(error: unknown) {
-          responseStatusCode = 500;
-          // Log streaming rendering errors from inside the shell.  Don't log
-          // errors encountered during initial shell rendering since they'll
-          // reject and get logged in handleDocumentRequest.
-          if (shellRendered) {
-            console.error(error);
-          }
-        },
-      },
-    );
-
-    // Abort the rendering stream after the `streamTimeout` so it has time to
-    // flush down the rejected boundaries
-    setTimeout(abort, streamTimeout + 1000);
-  });
-}

apps/remix/app/root.tsx

@@ -1,183 +0,0 @@
-import { useEffect } from 'react';
-
-import Plausible from 'plausible-tracker';
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  data,
-  isRouteErrorResponse,
-  useLoaderData,
-  useLocation,
-} from 'react-router';
-import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from 'remix-themes';
-
-import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { SessionProvider } from '@documenso/lib/client-only/providers/session';
-import { APP_I18N_OPTIONS, type SupportedLanguageCodes } from '@documenso/lib/constants/i18n';
-import { type TGetTeamsResponse, getTeams } from '@documenso/lib/server-only/team/get-teams';
-import { createPublicEnv, env } from '@documenso/lib/utils/env';
-import { extractLocaleData } from '@documenso/lib/utils/i18n';
-import { TrpcProvider } from '@documenso/trpc/react';
-import { Toaster } from '@documenso/ui/primitives/toaster';
-import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
-
-import type { Route } from './+types/root';
-import stylesheet from './app.css?url';
-import { GenericErrorLayout } from './components/general/generic-error-layout';
-import { langCookie } from './storage/lang-cookie.server';
-import { themeSessionResolver } from './storage/theme-session.server';
-import { appMetaTags } from './utils/meta';
-
-const { trackPageview } = Plausible({
-  domain: 'documenso.com',
-  trackLocalhost: false,
-});
-
-export const links: Route.LinksFunction = () => [
-  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-  {
-    rel: 'preconnect',
-    href: 'https://fonts.gstatic.com',
-    crossOrigin: 'anonymous',
-  },
-  {
-    rel: 'stylesheet',
-    href: 'https://fonts.googleapis.com/css2?family=Caveat:wght@400..600&display=swap',
-  },
-  {
-    rel: 'stylesheet',
-    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
-  },
-  { rel: 'stylesheet', href: stylesheet },
-];
-
-export function meta() {
-  return appMetaTags();
-}
-
-/**
- * Don't revalidate (run the loader on sequential navigations) on the root layout
- *
- * Update values via providers.
- */
-export const shouldRevalidate = () => false;
-
-export async function loader({ request }: Route.LoaderArgs) {
-  const session = await getOptionalSession(request);
-
-  let teams: TGetTeamsResponse = [];
-
-  if (session.isAuthenticated) {
-    teams = await getTeams({ userId: session.user.id });
-  }
-
-  const { getTheme } = await themeSessionResolver(request);
-
-  let lang: SupportedLanguageCodes = await langCookie.parse(request.headers.get('cookie') ?? '');
-
-  if (!APP_I18N_OPTIONS.supportedLangs.includes(lang)) {
-    lang = extractLocaleData({ headers: request.headers }).lang;
-  }
-
-  return data(
-    {
-      lang,
-      theme: getTheme(),
-      session: session.isAuthenticated
-        ? {
-            user: session.user,
-            session: session.session,
-            teams,
-          }
-        : null,
-      publicEnv: createPublicEnv(),
-    },
-    {
-      headers: {
-        'Set-Cookie': await langCookie.serialize(lang),
-      },
-    },
-  );
-}
-
-export function Layout({ children }: { children: React.ReactNode }) {
-  const { theme } = useLoaderData<typeof loader>() || {};
-
-  const location = useLocation();
-
-  useEffect(() => {
-    if (env('NODE_ENV') === 'production') {
-      trackPageview();
-    }
-  }, [location.pathname]);
-
-  return (
-    <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
-      <LayoutContent>{children}</LayoutContent>
-    </ThemeProvider>
-  );
-}
-
-export function LayoutContent({ children }: { children: React.ReactNode }) {
-  const { publicEnv, session, lang, ...data } = useLoaderData<typeof loader>() || {};
-
-  const [theme] = useTheme();
-
-  return (
-    <html translate="no" lang={lang} data-theme={theme} className={theme ?? ''}>
-      <head>
-        <meta charSet="utf-8" />
-        <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" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="manifest" href="/site.webmanifest" />
-        <meta name="google" content="notranslate" />
-        <Meta />
-        <Links />
-        <meta name="google" content="notranslate" />
-        <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
-
-        {/* Fix: https://stackoverflow.com/questions/21147149/flash-of-unstyled-content-fouc-in-firefox-only-is-ff-slow-renderer */}
-        <script>0</script>
-      </head>
-      <body>
-        <SessionProvider initialSession={session}>
-          <TooltipProvider>
-            <TrpcProvider>
-              {children}
-
-              <Toaster />
-            </TrpcProvider>
-          </TooltipProvider>
-        </SessionProvider>
-
-        <ScrollRestoration />
-        <Scripts />
-
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `window.__ENV__ = ${JSON.stringify(publicEnv)}`,
-          }}
-        />
-      </body>
-    </html>
-  );
-}
-
-export default function App() {
-  return <Outlet />;
-}
-
-export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  const errorCode = isRouteErrorResponse(error) ? error.status : 500;
-
-  if (errorCode !== 404) {
-    console.error('[RootErrorBoundary]', error);
-  }
-
-  return <GenericErrorLayout errorCode={errorCode} />;
-}

apps/remix/app/routes.ts

@@ -1,13 +0,0 @@
-import { remixRoutesOptionAdapter } from '@react-router/remix-routes-option-adapter';
-import { flatRoutes } from 'remix-flat-routes';
-
-export default remixRoutesOptionAdapter((defineRoutes) => {
-  return flatRoutes('routes', defineRoutes, {
-    ignoredRouteFiles: ['**/.*'], // Ignore dot files (like .DS_Store)
-    //appDir: 'app',
-    //routeDir: 'routes',
-    //basePath: '/',
-    //paramPrefixChar: '$',
-    //routeRegex: /(([+][\/\\][^\/\\:?*]+)|[\/\\]((index|route|layout|page)|(_[^\/\\:?*]+)|([^\/\\:?*]+\.route)))\.(ts|tsx|js|jsx|md|mdx)$$/,
-  });
-});

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

@@ -1,65 +0,0 @@
-import { Outlet, redirect } from 'react-router';
-
-import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { getLimits } from '@documenso/ee/server-only/limits/client';
-import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
-import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
-
-import { AppBanner } from '~/components/general/app-banner';
-import { Header } from '~/components/general/app-header';
-import { VerifyEmailBanner } from '~/components/general/verify-email-banner';
-
-import type { Route } from './+types/_layout';
-
-/**
- * Don't revalidate (run the loader on sequential navigations)
- *
- * Update values via providers.
- */
-export const shouldRevalidate = () => false;
-
-export async function loader({ request }: Route.LoaderArgs) {
-  const requestHeaders = Object.fromEntries(request.headers.entries());
-
-  const session = await getOptionalSession(request);
-
-  if (!session.isAuthenticated) {
-    throw redirect('/signin');
-  }
-
-  const [limits, banner] = await Promise.all([
-    getLimits({ headers: requestHeaders }),
-    getSiteSettings().then((settings) =>
-      settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
-    ),
-  ]);
-
-  return {
-    banner,
-    limits,
-  };
-}
-
-export default function Layout({ loaderData }: Route.ComponentProps) {
-  const { user, teams } = useSession();
-
-  const { banner, limits } = loaderData;
-
-  return (
-    <LimitsProvider initialValue={limits}>
-      <div id="portal-header"></div>
-
-      {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
-
-      {banner && <AppBanner banner={banner} />}
-
-      <Header user={user} teams={teams} />
-
-      <main className="mt-8 pb-8 md:mt-12 md:pb-12">
-        <Outlet />
-      </main>
-    </LimitsProvider>
-  );
-}

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

@@ -1,9 +0,0 @@
-import { redirect } from 'react-router';
-
-export function loader() {
-  throw redirect('/admin/stats');
-}
-
-export default function AdminPage() {
-  // Redirect page.
-}

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

@@ -1,122 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { BarChart3, FileStack, Settings, Trophy, Users, Wallet2 } from 'lucide-react';
-import { Link, Outlet, redirect, useLocation } from 'react-router';
-
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { isAdmin } from '@documenso/lib/utils/is-admin';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-
-import type { Route } from './+types/_layout';
-
-export async function loader({ request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  if (!user || !isAdmin(user)) {
-    throw redirect('/documents');
-  }
-}
-
-export default function AdminLayout() {
-  const { pathname } = useLocation();
-
-  return (
-    <div className="mx-auto mt-16 w-full max-w-screen-xl px-4 md:px-8">
-      <div className="grid grid-cols-12 md:mt-8 md:gap-8">
-        <div
-          className={cn(
-            'col-span-12 flex gap-x-2.5 gap-y-2 overflow-hidden overflow-x-auto md:col-span-3 md:flex md:flex-col',
-          )}
-        >
-          <Button
-            variant="ghost"
-            className={cn(
-              'justify-start md:w-full',
-              pathname?.startsWith('/admin/stats') && 'bg-secondary',
-            )}
-            asChild
-          >
-            <Link to="/admin/stats">
-              <BarChart3 className="mr-2 h-5 w-5" />
-              <Trans>Stats</Trans>
-            </Link>
-          </Button>
-
-          <Button
-            variant="ghost"
-            className={cn(
-              'justify-start md:w-full',
-              pathname?.startsWith('/admin/users') && 'bg-secondary',
-            )}
-            asChild
-          >
-            <Link to="/admin/users">
-              <Users className="mr-2 h-5 w-5" />
-              <Trans>Users</Trans>
-            </Link>
-          </Button>
-
-          <Button
-            variant="ghost"
-            className={cn(
-              'justify-start md:w-full',
-              pathname?.startsWith('/admin/documents') && 'bg-secondary',
-            )}
-            asChild
-          >
-            <Link to="/admin/documents">
-              <FileStack className="mr-2 h-5 w-5" />
-              <Trans>Documents</Trans>
-            </Link>
-          </Button>
-
-          <Button
-            variant="ghost"
-            className={cn(
-              'justify-start md:w-full',
-              pathname?.startsWith('/admin/subscriptions') && 'bg-secondary',
-            )}
-            asChild
-          >
-            <Link to="/admin/subscriptions">
-              <Wallet2 className="mr-2 h-5 w-5" />
-              <Trans>Subscriptions</Trans>
-            </Link>
-          </Button>
-
-          <Button
-            variant="ghost"
-            className={cn(
-              'justify-start md:w-full',
-              pathname?.startsWith('/admin/leaderboard') && 'bg-secondary',
-            )}
-            asChild
-          >
-            <Link to="/admin/leaderboard">
-              <Trophy className="mr-2 h-5 w-5" />
-              <Trans>Leaderboard</Trans>
-            </Link>
-          </Button>
-
-          <Button
-            variant="ghost"
-            className={cn(
-              'justify-start md:w-full',
-              pathname?.startsWith('/admin/banner') && 'bg-secondary',
-            )}
-            asChild
-          >
-            <Link to="/admin/site-settings">
-              <Settings className="mr-2 h-5 w-5" />
-              <Trans>Site Settings</Trans>
-            </Link>
-          </Button>
-        </div>
-
-        <div className="col-span-12 mt-12 md:col-span-9 md:mt-0">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,167 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { SigningStatus } from '@prisma/client';
-import { DateTime } from 'luxon';
-import { Link, redirect } from 'react-router';
-
-import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
-import { trpc } from '@documenso/trpc/react';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@documenso/ui/primitives/accordion';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@documenso/ui/primitives/tooltip';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { AdminDocumentDeleteDialog } from '~/components/dialogs/admin-document-delete-dialog';
-import { DocumentStatus } from '~/components/general/document/document-status';
-import { AdminDocumentRecipientItemTable } from '~/components/tables/admin-document-recipient-item-table';
-
-import type { Route } from './+types/documents.$id';
-
-export async function loader({ params }: Route.LoaderArgs) {
-  const id = Number(params.id);
-
-  if (isNaN(id)) {
-    throw redirect('/admin/documents');
-  }
-
-  const document = await getEntireDocument({ id });
-
-  return { document };
-}
-
-export default function AdminDocumentDetailsPage({ loaderData }: Route.ComponentProps) {
-  const { document } = loaderData;
-
-  const { _, i18n } = useLingui();
-  const { toast } = useToast();
-
-  const { mutate: resealDocument, isPending: isResealDocumentLoading } =
-    trpc.admin.resealDocument.useMutation({
-      onSuccess: () => {
-        toast({
-          title: _(msg`Success`),
-          description: _(msg`Document resealed`),
-        });
-      },
-      onError: () => {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`Failed to reseal document`),
-          variant: 'destructive',
-        });
-      },
-    });
-
-  return (
-    <div>
-      <div className="flex items-start justify-between">
-        <div className="flex items-center gap-x-4">
-          <h1 className="text-2xl font-semibold">{document.title}</h1>
-          <DocumentStatus status={document.status} />
-        </div>
-
-        {document.deletedAt && (
-          <Badge size="large" variant="destructive">
-            <Trans>Deleted</Trans>
-          </Badge>
-        )}
-      </div>
-
-      <div className="text-muted-foreground mt-4 text-sm">
-        <div>
-          <Trans>Created on</Trans>: {i18n.date(document.createdAt, DateTime.DATETIME_MED)}
-        </div>
-
-        <div>
-          <Trans>Last updated at</Trans>: {i18n.date(document.updatedAt, DateTime.DATETIME_MED)}
-        </div>
-      </div>
-
-      <hr className="my-4" />
-
-      <h2 className="text-lg font-semibold">
-        <Trans>Admin Actions</Trans>
-      </h2>
-
-      <div className="mt-2 flex gap-x-4">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                loading={isResealDocumentLoading}
-                disabled={document.recipients.some(
-                  (recipient) =>
-                    recipient.signingStatus !== SigningStatus.SIGNED &&
-                    recipient.signingStatus !== SigningStatus.REJECTED,
-                )}
-                onClick={() => resealDocument({ id: document.id })}
-              >
-                <Trans>Reseal document</Trans>
-              </Button>
-            </TooltipTrigger>
-
-            <TooltipContent className="max-w-[40ch]">
-              <Trans>
-                Attempts sealing the document again, useful for after a code change has occurred to
-                resolve an erroneous document.
-              </Trans>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-
-        <Button variant="outline" asChild>
-          <Link to={`/admin/users/${document.userId}`}>
-            <Trans>Go to owner</Trans>
-          </Link>
-        </Button>
-      </div>
-
-      <hr className="my-4" />
-      <h2 className="text-lg font-semibold">
-        <Trans>Recipients</Trans>
-      </h2>
-
-      <div className="mt-4">
-        <Accordion type="multiple" className="space-y-4">
-          {document.recipients.map((recipient) => (
-            <AccordionItem
-              key={recipient.id}
-              value={recipient.id.toString()}
-              className="rounded-lg border"
-            >
-              <AccordionTrigger className="px-4">
-                <div className="flex items-center gap-x-4">
-                  <h4 className="font-semibold">{recipient.name}</h4>
-                  <Badge size="small" variant="neutral">
-                    {recipient.email}
-                  </Badge>
-                </div>
-              </AccordionTrigger>
-
-              <AccordionContent className="border-t px-4 pt-4">
-                <AdminDocumentRecipientItemTable recipient={recipient} />
-              </AccordionContent>
-            </AccordionItem>
-          ))}
-        </Accordion>
-      </div>
-
-      <hr className="my-4" />
-
-      {document && <AdminDocumentDeleteDialog document={document} />}
-    </div>
-  );
-}

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

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

apps/remix/app/routes/_authenticated+/admin+/site-settings.tsx

@@ -1,224 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { useForm } from 'react-hook-form';
-import { useRevalidator } from 'react-router';
-import type { z } from 'zod';
-
-import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
-import {
-  SITE_SETTINGS_BANNER_ID,
-  ZSiteSettingsBannerSchema,
-} from '@documenso/lib/server-only/site-settings/schemas/banner';
-import { trpc as trpcReact } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { ColorPicker } from '@documenso/ui/primitives/color-picker';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Switch } from '@documenso/ui/primitives/switch';
-import { Textarea } from '@documenso/ui/primitives/textarea';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { SettingsHeader } from '~/components/general/settings-header';
-
-import type { Route } from './+types/site-settings';
-
-const ZBannerFormSchema = ZSiteSettingsBannerSchema;
-
-type TBannerFormSchema = z.infer<typeof ZBannerFormSchema>;
-
-export async function loader() {
-  const banner = await getSiteSettings().then((settings) =>
-    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
-  );
-
-  return { banner };
-}
-
-export default function AdminBannerPage({ loaderData }: Route.ComponentProps) {
-  const { banner } = loaderData;
-
-  const { toast } = useToast();
-  const { _ } = useLingui();
-  const { revalidate } = useRevalidator();
-
-  const form = useForm<TBannerFormSchema>({
-    resolver: zodResolver(ZBannerFormSchema),
-    defaultValues: {
-      id: SITE_SETTINGS_BANNER_ID,
-      enabled: banner?.enabled ?? false,
-      data: {
-        content: banner?.data?.content ?? '',
-        bgColor: banner?.data?.bgColor ?? '#000000',
-        textColor: banner?.data?.textColor ?? '#FFFFFF',
-      },
-    },
-  });
-
-  const enabled = form.watch('enabled');
-
-  const { mutateAsync: updateSiteSetting, isPending: isUpdateSiteSettingLoading } =
-    trpcReact.admin.updateSiteSetting.useMutation();
-
-  const onBannerUpdate = async ({ id, enabled, data }: TBannerFormSchema) => {
-    try {
-      await updateSiteSetting({
-        id,
-        enabled,
-        data,
-      });
-
-      toast({
-        title: _(msg`Banner Updated`),
-        description: _(msg`Your banner has been updated successfully.`),
-        duration: 5000,
-      });
-
-      await revalidate();
-    } catch (err) {
-      toast({
-        title: _(msg`An unknown error occurred`),
-        variant: 'destructive',
-        description: _(
-          msg`We encountered an unknown error while attempting to update the banner. Please try again later.`,
-        ),
-      });
-    }
-  };
-
-  return (
-    <div>
-      <SettingsHeader
-        title={_(msg`Site Settings`)}
-        subtitle={_(msg`Manage your site settings here`)}
-      />
-
-      <div className="mt-8">
-        <div>
-          <h2 className="font-semibold">
-            <Trans>Site Banner</Trans>
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm">
-            <Trans>
-              The site banner is a message that is shown at the top of the site. It can be used to
-              display important information to your users.
-            </Trans>
-          </p>
-
-          <Form {...form}>
-            <form
-              className="mt-4 flex flex-col rounded-md"
-              onSubmit={form.handleSubmit(onBannerUpdate)}
-            >
-              <div className="mt-4 flex flex-col gap-4 md:flex-row">
-                <FormField
-                  control={form.control}
-                  name="enabled"
-                  render={({ field }) => (
-                    <FormItem className="flex-1">
-                      <FormLabel>
-                        <Trans>Enabled</Trans>
-                      </FormLabel>
-
-                      <FormControl>
-                        <div>
-                          <Switch checked={field.value} onCheckedChange={field.onChange} />
-                        </div>
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-
-                <fieldset
-                  className="flex flex-col gap-4 md:flex-row"
-                  disabled={!enabled}
-                  aria-disabled={!enabled}
-                >
-                  <FormField
-                    control={form.control}
-                    name="data.bgColor"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>
-                          <Trans>Background Color</Trans>
-                        </FormLabel>
-
-                        <FormControl>
-                          <div>
-                            <ColorPicker {...field} />
-                          </div>
-                        </FormControl>
-
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="data.textColor"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>
-                          <Trans>Text Color</Trans>
-                        </FormLabel>
-
-                        <FormControl>
-                          <div>
-                            <ColorPicker {...field} />
-                          </div>
-                        </FormControl>
-
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </fieldset>
-              </div>
-
-              <fieldset disabled={!enabled} aria-disabled={!enabled}>
-                <FormField
-                  control={form.control}
-                  name="data.content"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        <Trans>Content</Trans>
-                      </FormLabel>
-
-                      <FormControl>
-                        <Textarea className="h-32 resize-none" {...field} />
-                      </FormControl>
-
-                      <FormDescription>
-                        <Trans>The content to show in the banner, HTML is allowed</Trans>
-                      </FormDescription>
-
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </fieldset>
-
-              <Button
-                type="submit"
-                loading={isUpdateSiteSettingLoading}
-                className="mt-4 justify-end self-end"
-              >
-                <Trans>Update Banner</Trans>
-              </Button>
-            </form>
-          </Form>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,52 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-
-import { getPricesByPlan } from '@documenso/ee/server-only/stripe/get-prices-by-plan';
-import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
-import { findUsers } from '@documenso/lib/server-only/user/get-all-users';
-
-import { AdminDashboardUsersTable } from '~/components/tables/admin-dashboard-users-table';
-
-import type { Route } from './+types/users._index';
-
-export async function loader({ request }: Route.LoaderArgs) {
-  const url = new URL(request.url);
-
-  const page = Number(url.searchParams.get('page')) || 1;
-  const perPage = Number(url.searchParams.get('perPage')) || 10;
-  const search = url.searchParams.get('search') || '';
-
-  const [{ users, totalPages }, individualPrices] = await Promise.all([
-    findUsers({ username: search, email: search, page, perPage }),
-    getPricesByPlan([STRIPE_PLAN_TYPE.REGULAR, STRIPE_PLAN_TYPE.COMMUNITY]).catch(() => []),
-  ]);
-
-  const individualPriceIds = individualPrices.map((price) => price.id);
-
-  return {
-    users,
-    totalPages,
-    individualPriceIds,
-    page,
-    perPage,
-  };
-}
-
-export default function AdminManageUsersPage({ loaderData }: Route.ComponentProps) {
-  const { users, totalPages, individualPriceIds, page, perPage } = loaderData;
-
-  return (
-    <div>
-      <h2 className="text-4xl font-semibold">
-        <Trans>Manage users</Trans>
-      </h2>
-
-      <AdminDashboardUsersTable
-        users={users}
-        individualPriceIds={individualPriceIds}
-        totalPages={totalPages}
-        page={page}
-        perPage={perPage}
-      />
-    </div>
-  );
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-import { redirect } from 'react-router';
-
-export function loader() {
-  throw redirect('/settings/profile');
-}

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

@@ -1,29 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { Outlet } from 'react-router';
-
-import { SettingsDesktopNav } from '~/components/general/settings-nav-desktop';
-import { SettingsMobileNav } from '~/components/general/settings-nav-mobile';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Settings');
-}
-
-export default function SettingsLayout() {
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <h1 className="text-4xl font-semibold">
-        <Trans>Settings</Trans>
-      </h1>
-
-      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <SettingsDesktopNav className="hidden md:col-span-3 md:flex" />
-        <SettingsMobileNav className="col-span-12 mb-8 md:hidden" />
-
-        <div className="col-span-12 md:col-span-9">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/settings+/profile.tsx

@@ -1,32 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-
-import { AccountDeleteDialog } from '~/components/dialogs/account-delete-dialog';
-import { AvatarImageForm } from '~/components/forms/avatar-image';
-import { ProfileForm } from '~/components/forms/profile';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Profile');
-}
-
-export default function SettingsProfile() {
-  const { _ } = useLingui();
-
-  return (
-    <div>
-      <SettingsHeader
-        title={_(msg`Profile`)}
-        subtitle={_(msg`Here you can edit your personal details.`)}
-      />
-
-      <AvatarImageForm className="mb-8 max-w-xl" />
-      <ProfileForm className="mb-8 max-w-xl" />
-
-      <hr className="my-4 max-w-xl" />
-
-      <AccountDeleteDialog className="max-w-xl" />
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/settings+/security.activity.tsx

@@ -1,28 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-
-import { SettingsHeader } from '~/components/general/settings-header';
-import { SettingsSecurityActivityTable } from '~/components/tables/settings-security-activity-table';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Security activity');
-}
-
-export default function SettingsSecurityActivity() {
-  const { _ } = useLingui();
-
-  return (
-    <div>
-      <SettingsHeader
-        title={_(msg`Security activity`)}
-        subtitle={_(msg`View all security activity related to your account.`)}
-        hideDivider={true}
-      />
-
-      <div className="mt-4">
-        <SettingsSecurityActivityTable />
-      </div>
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/settings+/security.passkeys.tsx

@@ -1,31 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-
-import { PasskeyCreateDialog } from '~/components/dialogs/passkey-create-dialog';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { SettingsSecurityPasskeyTable } from '~/components/tables/settings-security-passkey-table';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags('Manage passkeys');
-}
-
-export default function SettingsPasskeys() {
-  const { _ } = useLingui();
-
-  return (
-    <div>
-      <SettingsHeader
-        title={_(msg`Passkeys`)}
-        subtitle={_(msg`Manage your passkeys.`)}
-        hideDivider={true}
-      >
-        <PasskeyCreateDialog />
-      </SettingsHeader>
-
-      <div className="mt-4">
-        <SettingsSecurityPasskeyTable />
-      </div>
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/settings+/tokens.tsx

@@ -1,116 +0,0 @@
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { TeamMemberRole } from '@prisma/client';
-import { DateTime } from 'luxon';
-
-import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-import { AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-
-import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
-import { ApiTokenForm } from '~/components/forms/token';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-export default function ApiTokensPage() {
-  const { i18n } = useLingui();
-
-  const { data: tokens } = trpc.apiToken.getTokens.useQuery();
-
-  const team = useOptionalCurrentTeam();
-
-  return (
-    <div>
-      <SettingsHeader
-        title={<Trans>API Tokens</Trans>}
-        subtitle={
-          <Trans>
-            On this page, you can create and manage API tokens. See our{' '}
-            <a
-              className="text-primary underline"
-              href={'https://docs.documenso.com/developers/public-api'}
-              target="_blank"
-            >
-              Documentation
-            </a>{' '}
-            for more information.
-          </Trans>
-        }
-      />
-
-      {team && team?.currentTeamMember.role !== TeamMemberRole.ADMIN ? (
-        <Alert
-          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
-          variant="warning"
-        >
-          <div>
-            <AlertTitle>
-              <Trans>Unauthorized</Trans>
-            </AlertTitle>
-            <AlertDescription className="mr-2">
-              <Trans>You need to be an admin to manage API tokens.</Trans>
-            </AlertDescription>
-          </div>
-        </Alert>
-      ) : (
-        <>
-          <ApiTokenForm className="max-w-xl" tokens={tokens} />
-
-          <hr className="mb-4 mt-8" />
-
-          <h4 className="text-xl font-medium">
-            <Trans>Your existing tokens</Trans>
-          </h4>
-
-          {tokens && tokens.length === 0 && (
-            <div className="mb-4">
-              <p className="text-muted-foreground mt-2 text-sm italic">
-                <Trans>Your tokens will be shown here once you create them.</Trans>
-              </p>
-            </div>
-          )}
-
-          {tokens && tokens.length > 0 && (
-            <div className="mt-4 flex max-w-xl flex-col gap-y-4">
-              {tokens.map((token) => (
-                <div key={token.id} className="border-border rounded-lg border p-4">
-                  <div className="flex items-center justify-between gap-x-4">
-                    <div>
-                      <h5 className="text-base">{token.name}</h5>
-
-                      <p className="text-muted-foreground mt-2 text-xs">
-                        <Trans>
-                          Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}
-                        </Trans>
-                      </p>
-                      {token.expires ? (
-                        <p className="text-muted-foreground mt-1 text-xs">
-                          <Trans>
-                            Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}
-                          </Trans>
-                        </p>
-                      ) : (
-                        <p className="text-muted-foreground mt-1 text-xs">
-                          <Trans>Token doesn't have an expiration date</Trans>
-                        </p>
-                      )}
-                    </div>
-
-                    <div>
-                      <TokenDeleteDialog token={token}>
-                        <Button variant="destructive">
-                          <Trans>Delete</Trans>
-                        </Button>
-                      </TokenDeleteDialog>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}