feat: billing

- Add zero month at the begining of each metric on the open page

.cursorrules

@@ -1,4 +1,7 @@
+You are an expert in TypeScript, Node.js, Remix, React, Shadcn UI and Tailwind.
+
 Code Style and Structure:
+
 - Write concise, technical TypeScript code with accurate examples
 - Use functional and declarative programming patterns; avoid classes
 - Prefer iteration and modularization over code duplication
@@ -6,20 +9,25 @@ Code Style and Structure:
 - Structure files: exported component, subcomponents, helpers, static content, types
 
 Naming Conventions:
+
 - Use lowercase with dashes for directories (e.g., components/auth-wizard)
 - Favor named exports for components
 
 TypeScript Usage:
-- Use TypeScript for all code; prefer interfaces over types
-- Avoid enums; use maps instead
+
+- Use TypeScript for all code; prefer types over interfaces
 - Use functional components with TypeScript interfaces
 
 Syntax and Formatting:
-- Use the "function" keyword for pure functions
+
+- Create functions using `const fn = () => {}`
 - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
 - Use declarative JSX
+- Never use 'use client'
+- Never use 1 line if statements
 
 Error Handling and Validation:
+
 - Prioritize error handling: handle errors and edge cases early
 - Use early returns and guard clauses
 - Implement proper error logging and user-friendly messages
@@ -28,21 +36,40 @@ Error Handling and Validation:
 - Use error boundaries for unexpected errors
 
 UI and Styling:
+
 - Use Shadcn UI, Radix, and Tailwind Aria for components and styling
 - Implement responsive design with Tailwind CSS; use a mobile-first approach
+- When using Lucide icons, prefer the longhand names, for example HomeIcon instead of Home
 
-Performance Optimization:
-- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
-- Wrap client components in Suspense with fallback
-- Use dynamic loading for non-critical components
-- Optimize images: use WebP format, include size data, implement lazy loading
+React forms
 
-Key Conventions:
-- Use 'nuqs' for URL search parameter state management
-- Optimize Web Vitals (LCP, CLS, FID)
-- Limit 'use client':
-  - Favor server components and Next.js SSR
-  - Use only for Web API access in small components
-  - Avoid for data fetching or state management
+- Use zod for form validation react-hook-form for forms
+- Look at TeamCreateDialog.tsx as an example of form usage
+- Use <Form> <FormItem> elements, and also wrap the contents of form in a fieldset which should have the :disabled attribute when the form is loading
 
-Follow Next.js docs for Data Fetching, Rendering, and Routing
+TRPC Specifics
+
+- Every route should be in it's own file, example routers/teams/create-team.ts
+- Every route should have a types file associated with it, example routers/teams/create-team.types.ts. These files should have the OpenAPI meta, and request/response zod schemas
+- The request/response schemas should be named like Z[RouteName]RequestSchema and Z[RouteName]ResponseSchema
+- Use create-team.ts and create-team.types.ts as an example when creating new routes.
+- When creating the OpenAPI meta, only use GET and POST requests, do not use any other REST methods
+- Deconstruct the input argument on it's one line of code.
+
+Toast usage
+
+- Use the t`string` macro from @lingui/react/macro to display toast messages
+
+Remix/ReactRouter Usage
+
+- Use (params: Route.Params) to get the params from the route
+- Use (loaderData: Route.LoaderData) to get the loader data from the route
+- When using loaderdata, deconstruct the data you need from the loader data inside the function body
+- Do not use json() to return data, directly return the data
+
+Translations
+
+- Use <Trans>string</Trans> to display translations in jsx code, this should be imported from @lingui/react/macro
+- Use the t`string` macro from @lingui/react/macro to display translations in typescript code
+- t should be imported as const { t } = useLingui() where useLingui is imported from @lingui/react/macro
+- String in constants should be using the t`string` macro

.env.example

@@ -1,5 +1,4 @@
 # [[AUTH]]
-NEXTAUTH_URL="http://localhost:3000"
 NEXTAUTH_SECRET="secret"
 
 # [[CRYPTO]]
@@ -19,14 +18,10 @@ 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"
 
@@ -113,13 +108,9 @@ 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]]
@@ -135,10 +126,5 @@ 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,6 +5,7 @@ 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

@@ -1,23 +0,0 @@
-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: v20.x
+    default: v22.x
 
 runs:
   using: 'composite'

.github/workflows/ci.yml

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

.github/workflows/clean-cache.yml

@@ -1,29 +0,0 @@
-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-22.04
+    runs-on: ubuntu-latest
     permissions:
       actions: read
       contents: read
@@ -30,7 +30,8 @@ jobs:
 
       - uses: ./.github/actions/node-install
 
-      - uses: ./.github/actions/cache-build
+      - name: Build app
+        run: npm run 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']
+    branches: ['main', 'feat/rr7']
   pull_request:
     branches: ['main']
 jobs:
@@ -28,7 +28,8 @@ jobs:
       - name: Seed the database
         run: npm run prisma:seed
 
-      - uses: ./.github/actions/cache-build
+      - name: Build app
+        run: npm run build
 
       - name: Run Playwright tests
         run: npm run ci

.gitpod.yml

@@ -4,9 +4,7 @@ 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/pre-commit

@@ -4,12 +4,9 @@
 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/web/public/"
+git add "$MONOREPO_ROOT/apps/remix/public/"
 
 npx lint-staged

README.md

@@ -1,7 +1,3 @@
-> 🚨 We are live on Product Hunt 🎉  Check out our latest launch: <a href="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">
@@ -73,9 +69,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>
@@ -85,20 +81,17 @@ 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
-- [Next.js](https://nextjs.org/) - Framework
-- [Prisma](https://www.prisma.io/)  - ORM
+- [ReactRouter](https://reactrouter.com/) - 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. -->
 
@@ -108,7 +101,7 @@ Contact us if you are interested in our Enterprise plan for large organizations
 
 To run Documenso locally, you will need
 
-- Node.js (v18 or above)
+- Node.js (v22 or above)
 - Postgres SQL Database
 - Docker (optional)
 
@@ -171,10 +164,8 @@ 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
@@ -243,16 +234,14 @@ 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 both `NEXTAUTH_URL` and `NEXT_PUBLIC_WEBAPP_URL` variables!
+> 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!
 
 Now you can install the dependencies and build it:
 

apps/documentation/components/call-to-action.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
-import { Button } from '../primitives/button';
-import { Card, CardContent } from '../primitives/card';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
 
 type CallToActionProps = {
   className?: string;

apps/documentation/package.json

@@ -7,8 +7,7 @@
     "build": "next build",
     "start": "next start -p 3002",
     "lint:fix": "next lint --fix",
-    "clean": "rimraf .next && rimraf node_modules",
-    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
+    "clean": "rimraf .next && rimraf node_modules"
   },
   "dependencies": {
     "@documenso/assets": "*",

apps/documentation/pages/developers/_meta.json

@@ -14,4 +14,4 @@
   "public-api": "Public API",
   "embedding": "Embedding",
   "webhooks": "Webhooks"
-}
+}

apps/documentation/pages/developers/embedding/css-variables.mdx

@@ -111,6 +111,83 @@ The colors will be automatically converted to the appropriate format internally.
 
 4. **Consistent Radius**: Use a consistent border radius value that matches your application's design system.
 
+## CSS Class Targets
+
+In addition to CSS variables, specific components in the embedded experience can be targeted using CSS classes for more granular styling:
+
+### Component Classes
+
+| Class Name                        | Description                                                             |
+| --------------------------------- | ----------------------------------------------------------------------- |
+| `.embed--Root`                    | Main container for the embedded signing experience                      |
+| `.embed--DocumentContainer`       | Container for the document and signing widget                           |
+| `.embed--DocumentViewer`          | Container for the document viewer                                       |
+| `.embed--DocumentWidget`          | The signing widget container                                            |
+| `.embed--DocumentWidgetContainer` | Outer container for the signing widget, handles positioning             |
+| `.embed--DocumentWidgetHeader`    | Header section of the signing widget                                    |
+| `.embed--DocumentWidgetContent`   | Main content area of the signing widget                                 |
+| `.embed--DocumentWidgetForm`      | Form section within the signing widget                                  |
+| `.embed--DocumentWidgetFooter`    | Footer section of the signing widget                                    |
+| `.embed--WaitingForTurn`          | Container for the waiting screen when it's not the user's turn to sign  |
+| `.embed--DocumentCompleted`       | Container for the completion screen after signing                       |
+| `.field--FieldRootContainer`      | Base container for document fields (signatures, text, checkboxes, etc.) |
+
+Field components also expose several data attributes that can be used for styling different states:
+
+| Data Attribute      | Values                                         | Description                          |
+| ------------------- | ---------------------------------------------- | ------------------------------------ |
+| `[data-field-type]` | `SIGNATURE`, `TEXT`, `CHECKBOX`, `RADIO`, etc. | The type of field                    |
+| `[data-inserted]`   | `true`, `false`                                | Whether the field has been filled    |
+| `[data-validate]`   | `true`, `false`                                | Whether the field is being validated |
+
+### Field Styling Example
+
+```css
+/* Style all field containers */
+.field--FieldRootContainer {
+  transition: all 200ms ease;
+}
+
+/* Style specific field types */
+.field--FieldRootContainer[data-field-type='SIGNATURE'] {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* Style inserted fields */
+.field--FieldRootContainer[data-inserted='true'] {
+  background-color: var(--primary);
+  opacity: 0.2;
+}
+
+/* Style fields being validated */
+.field--FieldRootContainer[data-validate='true'] {
+  border-color: orange;
+}
+```
+
+### Example Usage
+
+```css
+/* Custom styles for the document widget */
+.embed--DocumentWidget {
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+/* Custom styles for the waiting screen */
+.embed--WaitingForTurn {
+  background-color: #f9fafb;
+  padding: 2rem;
+}
+
+/* Responsive adjustments for the document container */
+@media (min-width: 768px) {
+  .embed--DocumentContainer {
+    gap: 2rem;
+  }
+}
+```
+
 ## Related
 
 - [React Integration](/developers/embedding/react)

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

@@ -52,9 +52,9 @@ Platform customers have access to advanced styling options to customize the embe
 <EmbedDirectTemplate
   token={token}
   cssVars={{
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   }}
 />
 ```

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

@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 
   return (

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

@@ -99,9 +99,9 @@ const MyEmbeddingComponent = () => {
       `}
       // CSS Variables
       cssVars={{
-        colorPrimary: '#0000FF',
-        colorBackground: '#F5F5F5',
-        borderRadius: '8px',
+        primary: '#0000FF',
+        background: '#F5F5F5',
+        radius: '8px',
       }}
       // Dark Mode Control
       darkModeDisabled={true}

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

@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 
   return (

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

@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 </script>
 

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

@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
   }
 `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 </script>
 

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

@@ -16,18 +16,16 @@ Pick the one that fits your needs the best.
 ## Tech Stack
 
 - [Typescript](https://www.typescriptlang.org/) - Language
-- [Next.js](https://nextjs.org/) - Framework
+- [React Router](https://reactrouter.com/) - 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,10 +32,8 @@ 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,35 +13,13 @@ 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/macro** (not @lingui/react).
+Wrap all text to translate in **`<Trans></Trans>`** tags exported from **@lingui/react/macro**.
 
 ```html
 <h1>
@@ -64,8 +42,9 @@ For text that is broken into elements, but represent a whole sentence, you must
 ### Constants outside of react components
 
 ```tsx
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/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 = {
@@ -98,31 +77,13 @@ 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 } = setupI18nSSR();
+  const { i18n } = useLingui();
 
   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/public-api/index.mdx

@@ -21,14 +21,25 @@ Check out the [API V1 documentation](https://app.documenso.com/api/v1/openapi) f
 
 ## API V2 - Beta
 
-Our new API V2 is currently in Beta. The new API features typed SDKs for TypeScript, Python and Go and example code for many more.
+<Callout type="warning">API V2 is currently beta, and will be subject to breaking changes</Callout>
 
-<Callout type="warning">
-  NOW IN BETA: [API V2 Documentation](https://documen.so/api-v2-docs)
+Check out the [API V2 documentation](https://documen.so/api-v2-docs) for details about the API endpoints, request parameters, response formats, and authentication methods.
+
+Our new API V2 supports the following typed SDKs:
+
+- [TypeScript](https://github.com/documenso/sdk-typescript)
+- [Python](https://github.com/documenso/sdk-python)
+- [Go](https://github.com/documenso/sdk-go)
+
+<Callout type="info">
+  For the staging API, please use the following base URL:
+  `https://stg-app.documenso.dev/api/v2-beta/`
 </Callout>
 
 🚀 [V2 Announcement](https://documen.so/sdk-blog)
 
+📖 [Documentation](https://documen.so/api-v2-docs)
+
 💬 [Leave Feedback](https://documen.so/sdk-feedback)
 
 🔔 [Breaking Changes](https://documen.so/sdk-breaking)

apps/documentation/pages/developers/public-api/reference.mdx

@@ -532,3 +532,93 @@ Replace the `text` value with the corresponding field type:
 - For the `SELECT` field it should be `select`. (check this before merge)
 
 You must pass this property at all times, even if you don't need to set any other properties. If you don't, the endpoint will throw an error.
+
+## Pre-fill Fields On Document Creation
+
+The API allows you to pre-fill fields on document creation. This is useful when you want to create a document from an existing template and pre-fill the fields with specific values.
+
+To pre-fill a field, you need to make a `POST` request to the `/api/v1/templates/{templateId}/generate-document` endpoint with the field information. Here's an example:
+
+```json
+{
+  "title": "my-document.pdf",
+  "recipients": [
+    {
+      "id": 3,
+      "name": "Example User",
+      "email": "example@documenso.com",
+      "signingOrder": 1,
+      "role": "SIGNER"
+    }
+  ],
+  "prefillFields": [
+    {
+      "id": 21,
+      "type": "text",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "my-value"
+    },
+    {
+      "id": 22,
+      "type": "number",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "123"
+    },
+    {
+      "id": 23,
+      "type": "checkbox",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": ["option-1", "option-2"]
+    }
+  ]
+}
+```
+
+Check out the endpoint in the [API V1 documentation](https://app.documenso.com/api/v1/openapi#:~:text=/%7BtemplateId%7D/-,generate,-%2Ddocument).
+
+### API V2
+
+For API V2, you need to make a `POST` request to the `/api/v2-beta/template/use` endpoint with the field(s) information. Here's an example:
+
+```json
+{
+  "templateId": 111,
+  "recipients": [
+    {
+      "id": 3,
+      "name": "Example User",
+      "email": "example@documenso.com",
+      "signingOrder": 1,
+      "role": "SIGNER"
+    }
+  ],
+  "prefillFields": [
+    {
+      "id": 21,
+      "type": "text",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "my-value"
+    },
+    {
+      "id": 22,
+      "type": "number",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "123"
+    },
+    {
+      "id": 23,
+      "type": "checkbox",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": ["option-1", "option-2"]
+    }
+  ]
+}
+```
+
+Check out the endpoint in the [API V2 documentation](https://openapi.documenso.com/reference#tag/template/POST/template/use).

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 '@documenso/ui/components/call-to-action';
+import { CallToAction } from '../../../components/call-to-action';
 
 # Self Hosting
 
@@ -35,10 +35,8 @@ 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
@@ -46,8 +44,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 both
-  the `NEXTAUTH_URL` and `NEXT_PUBLIC_WEBAPP_URL` variables!
+  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!
 </Callout>
 
 ### Install the Dependencies
@@ -171,7 +169,6 @@ 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>"
@@ -200,7 +197,6 @@ 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 '@documenso/ui/components/call-to-action';
+import { CallToAction } from '../../../components/call-to-action';
 
 # Getting Started with Self-Hosting
 

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

@@ -85,12 +85,13 @@ You can also set the recipient's role, which determines their actions and permis
 
 Documenso has 4 roles for recipients with different permissions and actions.
 
-|   Role   |                                    Function                                     | Action required | Signature |
-| :------: | :-----------------------------------------------------------------------------: | :-------------: | :-------: |
-|  Signer  |                Needs to sign signatures fields assigned to them.                |       Yes       |    Yes    |
-| Approver |          Needs to approve the document as a whole. Signature optional.          |       Yes       | Optional  |
-|  Viewer  |                   Needs to confirm they viewed the document.                    |       Yes       |    No     |
-|   BCC    | Receives a copy of the signed document after completion. No action is required. |       No        |    No     |
+|   Role    |                                    Function                                     | Action required | Signature |
+| :-------: | :-----------------------------------------------------------------------------: | :-------------: | :-------: |
+|  Signer   |                Needs to sign signatures fields assigned to them.                |       Yes       |    Yes    |
+| Approver  |          Needs to approve the document as a whole. Signature optional.          |       Yes       | Optional  |
+|  Viewer   |                   Needs to confirm they viewed the document.                    |       Yes       |    No     |
+| Assistant | Can help prepare the document by filling in fields on behalf of other signers.  |       Yes       |    No     |
+|    CC     | Receives a copy of the signed document after completion. No action is required. |       No        |    No     |
 
 ### Fields
 

apps/openpage-api/lib/add-zero-month.ts

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

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

@@ -2,6 +2,8 @@ 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')
@@ -34,7 +36,7 @@ export const getSignerConversionMonthly = async (type: 'count' | 'cumulative' =
     ],
   };
 
-  return transformedData;
+  return addZeroMonth(transformedData);
 };
 
 export type GetSignerConversionMonthlyResult = Awaited<

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

@@ -2,6 +2,8 @@ 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')
@@ -32,7 +34,7 @@ export const getUserMonthlyGrowth = async (type: 'count' | 'cumulative' = 'count
     ],
   };
 
-  return transformedData;
+  return addZeroMonth(transformedData);
 };
 
 export type GetUserMonthlyGrowthResult = Awaited<ReturnType<typeof getUserMonthlyGrowth>>;

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

@@ -1,5 +1,7 @@
 import { DateTime } from 'luxon';
 
+import { addZeroMonth } from './add-zero-month';
+
 type MetricKeys = {
   stars: number;
   forks: number;
@@ -37,31 +39,77 @@ export function transformData({
   data: DataEntry;
   metric: MetricKey;
 }): TransformData {
-  const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
-    const [yearA, monthA] = dateA.split('-').map(Number);
-    const [yearB, monthB] = dateB.split('-').map(Number);
+  try {
+    if (!data || Object.keys(data).length === 0) {
+      return {
+        labels: [],
+        datasets: [{ label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`, data: [] }],
+      };
+    }
 
-    return DateTime.local(yearA, monthA).toMillis() - DateTime.local(yearB, monthB).toMillis();
-  });
+    const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
+      try {
+        const [yearA, monthA] = dateA.split('-').map(Number);
+        const [yearB, monthB] = dateB.split('-').map(Number);
 
-  const labels = sortedEntries.map(([date]) => {
-    const [year, month] = date.split('-');
-    const dateTime = DateTime.fromObject({
-      year: Number(year),
-      month: Number(month),
+        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;
+      }
     });
-    return dateTime.toFormat('MMM yyyy');
-  });
 
-  return {
-    labels,
-    datasets: [
-      {
-        label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
-        data: sortedEntries.map(([_, stats]) => stats[metric]),
-      },
-    ],
-  };
+    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: [] }],
+    };
+  }
 }
 
 // To be on the safer side

apps/openpage-api/package.json

@@ -7,8 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint:fix": "next lint --fix",
-    "clean": "rimraf .next && rimraf node_modules",
-    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
+    "clean": "rimraf .next && rimraf node_modules"
   },
   "dependencies": {
     "@documenso/prisma": "*",

apps/remix/.bin/build.sh

@@ -0,0 +1,37 @@
+#!/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

@@ -0,0 +1,77 @@
+#!/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

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

apps/remix/.gitignore

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

apps/remix/Dockerfile

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,100 @@
+# 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

@@ -0,0 +1,24 @@
+@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/account-delete-dialog.tsx

@@ -1,12 +1,11 @@
-'use client';
-
 import { useState } from 'react';
 
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { signOut } from 'next-auth/react';
+import { Trans } from '@lingui/react/macro';
 
-import type { User } from '@documenso/prisma/client';
+import { authClient } from '@documenso/auth/client';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,12 +22,13 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type DeleteAccountDialogProps = {
+export type AccountDeleteDialogProps = {
   className?: string;
-  user: User;
 };
 
-export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProps) => {
+export const AccountDeleteDialog = ({ className }: AccountDeleteDialogProps) => {
+  const { user } = useSession();
+
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -49,7 +49,7 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
         duration: 5000,
       });
 
-      return await signOut({ callbackUrl: '/' });
+      return await authClient.signOut();
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),
@@ -118,7 +118,7 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
               </DialogHeader>
 
               {!hasTwoFactorAuthentication && (
-                <div className="mt-4">
+                <div>
                   <Label>
                     <Trans>
                       Please type{' '}

apps/remix/app/components/dialogs/admin-document-delete-dialog.tsx

@@ -1,13 +1,11 @@
-'use client';
-
 import { useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Document } from '@prisma/client';
+import { useNavigate } from 'react-router';
 
-import type { Document } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,15 +21,15 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type SuperDeleteDocumentDialogProps = {
+export type AdminDocumentDeleteDialogProps = {
   document: Document;
 };
 
-export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialogProps) => {
+export const AdminDocumentDeleteDialog = ({ document }: AdminDocumentDeleteDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const [reason, setReason] = useState('');
 
@@ -52,7 +50,7 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
         duration: 5000,
       });
 
-      router.push('/admin/documents');
+      await navigate('/admin/documents');
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),

apps/remix/app/components/dialogs/admin-user-delete-dialog.tsx

@@ -1,15 +1,13 @@
-'use client';
-
 import { useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
+import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import type { User } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -25,17 +23,15 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type DeleteUserDialogProps = {
+export type AdminUserDeleteDialogProps = {
   className?: string;
   user: User;
 };
 
-export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) => {
+export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-
-  const router = useRouter();
-
+  const navigate = useNavigate();
   const [email, setEmail] = useState('');
 
   const { mutateAsync: deleteUser, isPending: isDeletingUser } =
@@ -47,13 +43,13 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
         id: user.id,
       });
 
+      await navigate('/admin/users');
+
       toast({
         title: _(msg`Account deleted`),
         description: _(msg`The account has been deleted successfully.`),
         duration: 5000,
       });
-
-      router.push('/admin/users');
     } catch (err) {
       const error = AppError.parseError(err);
 

apps/remix/app/components/dialogs/admin-user-disable-dialog.tsx

@@ -1,13 +1,12 @@
-'use client';
-
 import { useState } from 'react';
 
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import type { User } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,12 +22,15 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type DisableUserDialogProps = {
+export type AdminUserDisableDialogProps = {
   className?: string;
   userToDisable: User;
 };
 
-export const DisableUserDialog = ({ className, userToDisable }: DisableUserDialogProps) => {
+export const AdminUserDisableDialog = ({
+  className,
+  userToDisable,
+}: AdminUserDisableDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 

apps/remix/app/components/dialogs/admin-user-enable-dialog.tsx

@@ -1,13 +1,12 @@
-'use client';
-
 import { useState } from 'react';
 
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import type { User } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,12 +22,12 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type EnableUserDialogProps = {
+export type AdminUserEnableDialogProps = {
   className?: string;
   userToEnable: User;
 };
 
-export const EnableUserDialog = ({ className, userToEnable }: EnableUserDialogProps) => {
+export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnableDialogProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
 

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

@@ -0,0 +1,183 @@
+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 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="my-2">
+                    <p className="text-muted-foreground mb-1 text-sm font-semibold">
+                      The next recipient to sign this document will be{' '}
+                    </p>
+
+                    <div className="flex flex-col gap-4 rounded-xl border p-4 md:flex-row">
+                      <FormField
+                        control={form.control}
+                        name="name"
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormLabel>
+                              <Trans>Name</Trans>
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...field}
+                                className="mt-2"
+                                placeholder="Enter the next signer's name"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <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/claim-create-dialog.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import type { z } from 'zod';
+
+import { generateDefaultSubscriptionClaim } from '@documenso/lib/utils/organisations-claims';
+import { trpc } from '@documenso/trpc/react';
+import type { ZCreateSubscriptionClaimRequestSchema } from '@documenso/trpc/server/admin-router/create-subscription-claim.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SubscriptionClaimForm } from '../forms/subscription-claim-form';
+
+export type CreateClaimFormValues = z.infer<typeof ZCreateSubscriptionClaimRequestSchema>;
+
+export const ClaimCreateDialog = () => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: createClaim, isPending } = trpc.admin.claims.create.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Subscription claim created successfully.`,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Failed to create subscription claim.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        <Button className="flex-shrink-0" variant="secondary">
+          <Trans>Create claim</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create Subscription Claim</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Fill in the details to create a new subscription claim.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <SubscriptionClaimForm
+          subscriptionClaim={{
+            ...generateDefaultSubscriptionClaim(),
+          }}
+          onFormSubmit={createClaim}
+          formSubmitTrigger={
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isPending}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" loading={isPending}>
+                <Trans>Create Claim</Trans>
+              </Button>
+            </DialogFooter>
+          }
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type ClaimDeleteDialogProps = {
+  claimId: string;
+  claimName: string;
+  claimLocked: boolean;
+  trigger: React.ReactNode;
+};
+
+export const ClaimDeleteDialog = ({
+  claimId,
+  claimName,
+  claimLocked,
+  trigger,
+}: ClaimDeleteDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: deleteClaim, isPending } = trpc.admin.claims.delete.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Subscription claim deleted successfully.`,
+      });
+
+      setOpen(false);
+    },
+    onError: (err) => {
+      console.error(err);
+
+      toast({
+        title: t`Failed to delete subscription claim.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger asChild onClick={(e) => e.stopPropagation()}>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Delete Subscription Claim</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Are you sure you want to delete the following claim?</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral">
+          <AlertDescription className="text-center font-semibold">
+            {claimLocked ? <Trans>This claim is locked and cannot be deleted.</Trans> : claimName}
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          {!claimLocked && (
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isPending}
+              onClick={async () => deleteClaim({ id: claimId })}
+            >
+              <Trans>Delete</Trans>
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/claim-update-dialog.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+
+import { trpc } from '@documenso/trpc/react';
+import type { TFindSubscriptionClaimsResponse } from '@documenso/trpc/server/admin-router/find-subscription-claims.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SubscriptionClaimForm } from '../forms/subscription-claim-form';
+
+export type ClaimUpdateDialogProps = {
+  claim: TFindSubscriptionClaimsResponse['data'][number];
+  trigger: React.ReactNode;
+};
+
+export const ClaimUpdateDialog = ({ claim, trigger }: ClaimUpdateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: updateClaim, isPending } = trpc.admin.claims.update.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Subscription claim updated successfully.`,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Failed to update subscription claim.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild onClick={(e) => e.stopPropagation()}>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Update Subscription Claim</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Modify the details of the subscription claim.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <SubscriptionClaimForm
+          subscriptionClaim={claim}
+          onFormSubmit={async (data) =>
+            await updateClaim({
+              id: claim.id,
+              data,
+            })
+          }
+          formSubmitTrigger={
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isPending}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" loading={isPending}>
+                <Trans>Update Claim</Trans>
+              </Button>
+            </DialogFooter>
+          }
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -1,13 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { match } from 'ts-pattern';
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus } from '@prisma/client';
+import { P, match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import { DocumentStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -22,26 +21,25 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type DeleteDocumentDialogProps = {
+type DocumentDeleteDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  onDelete?: () => Promise<void> | void;
   status: DocumentStatus;
   documentTitle: string;
-  teamId?: number;
   canManageDocument: boolean;
 };
 
-export const DeleteDocumentDialog = ({
+export const DocumentDeleteDialog = ({
   id,
   open,
   onOpenChange,
+  onDelete,
   status,
   documentTitle,
   canManageDocument,
-}: DeleteDocumentDialogProps) => {
-  const router = useRouter();
-
+}: DocumentDeleteDialogProps) => {
   const { toast } = useToast();
   const { refreshLimits } = useLimits();
   const { _ } = useLingui();
@@ -52,8 +50,7 @@ export const DeleteDocumentDialog = ({
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
 
   const { mutateAsync: deleteDocument, isPending } = trpcReact.document.deleteDocument.useMutation({
-    onSuccess: () => {
-      router.refresh();
+    onSuccess: async () => {
       void refreshLimits();
 
       toast({
@@ -62,8 +59,18 @@ export const DeleteDocumentDialog = ({
         duration: 5000,
       });
 
+      await onDelete?.();
+
       onOpenChange(false);
     },
+    onError: () => {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`This document could not be deleted at this time. Please try again.`),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
   });
 
   useEffect(() => {
@@ -73,19 +80,6 @@ export const DeleteDocumentDialog = ({
     }
   }, [open, status]);
 
-  const onDelete = async () => {
-    try {
-      await deleteDocument({ documentId: id });
-    } catch {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`This document could not be deleted at this time. Please try again.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    }
-  };
-
   const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value);
     setIsDeleteEnabled(event.target.value === _(deleteMessage));
@@ -151,7 +145,7 @@ export const DeleteDocumentDialog = ({
                   </ul>
                 </AlertDescription>
               ))
-              .with(DocumentStatus.COMPLETED, () => (
+              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED), () => (
                 <AlertDescription>
                   <p>
                     <Trans>By deleting this document, the following will occur:</Trans>
@@ -194,7 +188,7 @@ export const DeleteDocumentDialog = ({
           <Button
             type="button"
             loading={isPending}
-            onClick={onDelete}
+            onClick={() => void deleteDocument({ documentId: id })}
             disabled={!isDeleteEnabled && canManageDocument}
             variant="destructive"
           >

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

@@ -1,10 +1,9 @@
-import { useRouter } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useNavigate } from 'react-router';
 
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import type { Team } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -14,30 +13,37 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type DuplicateDocumentDialogProps = {
+import { useCurrentTeam } from '~/providers/team';
+
+type DocumentDuplicateDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
-  team?: Pick<Team, 'id' | 'url'>;
 };
 
-export const DuplicateDocumentDialog = ({
+export const DocumentDuplicateDialog = ({
   id,
   open,
   onOpenChange,
-  team,
-}: DuplicateDocumentDialogProps) => {
-  const router = useRouter();
+}: DocumentDuplicateDialogProps) => {
+  const navigate = useNavigate();
 
   const { toast } = useToast();
   const { _ } = useLingui();
 
-  const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery({
-    documentId: id,
-  });
+  const team = useCurrentTeam();
+
+  const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery(
+    {
+      documentId: id,
+    },
+    {
+      enabled: open === true,
+    },
+  );
 
   const documentData = document?.documentData
     ? {
@@ -50,15 +56,14 @@ export const DuplicateDocumentDialog = ({
 
   const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
     trpcReact.document.duplicateDocument.useMutation({
-      onSuccess: ({ documentId }) => {
-        router.push(`${documentsPath}/${documentId}/edit`);
-
+      onSuccess: async ({ documentId }) => {
         toast({
           title: _(msg`Document Duplicated`),
           description: _(msg`Your document has been successfully duplicated.`),
           duration: 5000,
         });
 
+        await navigate(`${documentsPath}/${documentId}/edit`);
         onOpenChange(false);
       },
     });
@@ -92,7 +97,7 @@ export const DuplicateDocumentDialog = ({
           </div>
         ) : (
           <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <LazyPDFViewer key={document?.id} documentData={documentData} />
+            <PDFViewer key={document?.id} documentData={documentData} />
           </div>
         )}
 

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

@@ -1,19 +1,18 @@
-'use client';
-
 import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Team } from '@prisma/client';
+import { type Document, type Recipient, SigningStatus } from '@prisma/client';
 import { History } from 'lucide-react';
-import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import type { Team } from '@documenso/prisma/client';
-import { type Document, type Recipient, SigningStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -37,16 +36,17 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { StackAvatar } from '~/components/(dashboard)/avatar/stack-avatar';
+import { useCurrentTeam } from '~/providers/team';
+
+import { StackAvatar } from '../general/stack-avatar';
 
 const FORM_ID = 'resend-email';
 
-export type ResendDocumentActionItemProps = {
+export type DocumentResendDialogProps = {
   document: Document & {
     team: Pick<Team, 'id' | 'url'> | null;
   };
   recipients: Recipient[];
-  team?: Pick<Team, 'id' | 'url'>;
 };
 
 export const ZResendDocumentFormSchema = z.object({
@@ -57,17 +57,15 @@ export const ZResendDocumentFormSchema = z.object({
 
 export type TResendDocumentFormSchema = z.infer<typeof ZResendDocumentFormSchema>;
 
-export const ResendDocumentActionItem = ({
-  document,
-  recipients,
-  team,
-}: ResendDocumentActionItemProps) => {
-  const { data: session } = useSession();
+export const DocumentResendDialog = ({ document, recipients }: DocumentResendDialogProps) => {
+  const { user } = useSession();
+  const team = useCurrentTeam();
+
   const { toast } = useToast();
   const { _ } = useLingui();
 
   const [isOpen, setIsOpen] = useState(false);
-  const isOwner = document.userId === session?.user?.id;
+  const isOwner = document.userId === user.id;
   const isCurrentTeamDocument = team && document.team?.url === team.url;
 
   const isDisabled =

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

@@ -0,0 +1,402 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { ExternalLinkIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { Link, useSearchParams } from 'react-router';
+import { match } from 'ts-pattern';
+import type { z } from 'zod';
+
+import type { InternalClaimPlans } from '@documenso/ee/server-only/stripe/get-internal-claim-plans';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
+import { parseMessageDescriptorMacro } from '@documenso/lib/utils/i18n';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateOrganisationRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation.types';
+import { cn } from '@documenso/ui/lib/utils';
+import { Badge } from '@documenso/ui/primitives/badge';
+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 { SpinnerBox } from '@documenso/ui/primitives/spinner';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateOrganisationFormSchema = ZCreateOrganisationRequestSchema.pick({
+  name: true,
+});
+
+type TCreateOrganisationFormSchema = z.infer<typeof ZCreateOrganisationFormSchema>;
+
+export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const actionSearchParam = searchParams?.get('action');
+
+  const [step, setStep] = useState<'billing' | 'create'>(
+    IS_BILLING_ENABLED() ? 'billing' : 'create',
+  );
+
+  const [selectedPriceId, setSelectedPriceId] = useState<string>('');
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateOrganisationFormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const { mutateAsync: createOrganisation } = trpc.organisation.create.useMutation();
+
+  const { data: plansData } = trpc.billing.plans.get.useQuery();
+
+  const onFormSubmit = async ({ name }: TCreateOrganisationFormSchema) => {
+    try {
+      const response = await createOrganisation({
+        name,
+        priceId: selectedPriceId,
+      });
+
+      if (response.paymentRequired) {
+        window.open(response.checkoutUrl, '_blank');
+      }
+
+      setOpen(false);
+
+      toast({
+        title: t`Success`,
+        description: t`Your organisation has been created.`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      console.error(error);
+
+      toast({
+        title: t`An unknown error occurred`,
+        description: t`We encountered an unknown error while attempting to create a organisation. Please try again later.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (actionSearchParam === 'add-organisation') {
+      setOpen(true);
+      updateSearchParams({ action: null });
+    }
+  }, [actionSearchParam, open]);
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            <Trans>Create organisation</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        {match(step)
+          .with('billing', () => (
+            <>
+              <DialogHeader>
+                <DialogTitle>
+                  <Trans>Select a plan</Trans>
+                </DialogTitle>
+
+                <DialogDescription>
+                  <Trans>Select a plan to continue</Trans>
+                </DialogDescription>
+              </DialogHeader>
+              <fieldset aria-label="Plan select">
+                {plansData ? (
+                  <BillingPlanForm
+                    value={selectedPriceId}
+                    onChange={setSelectedPriceId}
+                    plans={plansData.plans}
+                    canCreateFreeOrganisation={plansData.canCreateFreeOrganisation}
+                  />
+                ) : (
+                  <SpinnerBox className="py-32" />
+                )}
+
+                <DialogFooter className="mt-4">
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit" onClick={() => setStep('create')}>
+                    <Trans>Continue</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </>
+          ))
+          .with('create', () => (
+            <>
+              <DialogHeader>
+                <DialogTitle>
+                  <Trans>Create organisation</Trans>
+                </DialogTitle>
+
+                <DialogDescription>
+                  <Trans>Create an organisation to collaborate with teams</Trans>
+                </DialogDescription>
+              </DialogHeader>
+
+              <Form {...form}>
+                <form onSubmit={form.handleSubmit(onFormSubmit)}>
+                  <fieldset
+                    className="flex h-full flex-col space-y-4"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    <FormField
+                      control={form.control}
+                      name="name"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel required>
+                            <Trans>Organisation Name</Trans>
+                          </FormLabel>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <DialogFooter>
+                      {IS_BILLING_ENABLED() ? (
+                        <Button
+                          type="button"
+                          variant="secondary"
+                          onClick={() => setStep('billing')}
+                        >
+                          <Trans>Back</Trans>
+                        </Button>
+                      ) : (
+                        <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                          <Trans>Cancel</Trans>
+                        </Button>
+                      )}
+
+                      <Button
+                        type="submit"
+                        data-testid="dialog-create-organisation-button"
+                        loading={form.formState.isSubmitting}
+                      >
+                        {selectedPriceId ? <Trans>Checkout</Trans> : <Trans>Create</Trans>}
+                      </Button>
+                    </DialogFooter>
+                  </fieldset>
+                </form>
+              </Form>
+            </>
+          ))
+
+          .exhaustive()}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+type BillingPlanFormProps = {
+  value: string;
+  onChange: (priceId: string) => void;
+  plans: InternalClaimPlans;
+  canCreateFreeOrganisation: boolean;
+};
+
+const BillingPlanForm = ({
+  value,
+  onChange,
+  plans,
+  canCreateFreeOrganisation,
+}: BillingPlanFormProps) => {
+  const { t } = useLingui();
+
+  const [billingPeriod, setBillingPeriod] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
+
+  const dynamicPlans = useMemo(() => {
+    return [INTERNAL_CLAIM_ID.INDIVIDUAL, INTERNAL_CLAIM_ID.PRO, INTERNAL_CLAIM_ID.PLATFORM].map(
+      (planId) => {
+        const plan = plans[planId];
+
+        return {
+          id: planId,
+          name: plan.name,
+          description: parseMessageDescriptorMacro(t, plan.description),
+          monthlyPrice: plan.monthlyPrice,
+          yearlyPrice: plan.yearlyPrice,
+        };
+      },
+    );
+  }, [plans]);
+
+  useEffect(() => {
+    if (value === '' && !canCreateFreeOrganisation) {
+      onChange(dynamicPlans[0][billingPeriod]?.id ?? '');
+    }
+  }, [value]);
+
+  const onBillingPeriodChange = (billingPeriod: 'monthlyPrice' | 'yearlyPrice') => {
+    const plan = dynamicPlans.find((plan) => plan[billingPeriod]?.id === value);
+
+    setBillingPeriod(billingPeriod);
+
+    onChange(plan?.[billingPeriod]?.id ?? Object.keys(plans)[0]);
+  };
+
+  return (
+    <div className="space-y-4">
+      <Tabs
+        className="flex w-full items-center justify-center"
+        defaultValue="monthlyPrice"
+        value={billingPeriod}
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        onValueChange={(value) => onBillingPeriodChange(value as 'monthlyPrice' | 'yearlyPrice')}
+      >
+        <TabsList className="flex w-full justify-center">
+          <TabsTrigger className="w-full" value="monthlyPrice">
+            <Trans>Monthly</Trans>
+          </TabsTrigger>
+          <TabsTrigger className="w-full" value="yearlyPrice">
+            <Trans>Yearly</Trans>
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      <div className="mt-4 grid gap-4 text-sm">
+        <button
+          onClick={() => onChange('')}
+          className={cn(
+            'hover:border-primary flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:shadow-sm',
+            {
+              'ring-primary/10 border-primary ring-2 ring-offset-1': '' === value,
+            },
+          )}
+          disabled={!canCreateFreeOrganisation}
+        >
+          <div className="w-full text-left">
+            <div className="flex items-center justify-between">
+              <p className="text-medium">
+                <Trans>Free</Trans>
+              </p>
+
+              <Badge size="small" variant="neutral" className="ml-1.5">
+                {canCreateFreeOrganisation ? (
+                  <Trans>1 Free organisations left</Trans>
+                ) : (
+                  <Trans>0 Free organisations left</Trans>
+                )}
+              </Badge>
+            </div>
+
+            <div className="text-muted-foreground">
+              <Trans>5 documents a month</Trans>
+            </div>
+          </div>
+        </button>
+
+        {dynamicPlans.map((plan) => (
+          <button
+            key={plan[billingPeriod]?.id}
+            onClick={() => onChange(plan[billingPeriod]?.id ?? '')}
+            className={cn(
+              'hover:border-primary flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:shadow-sm',
+              {
+                'ring-primary/10 border-primary ring-2 ring-offset-1':
+                  plan[billingPeriod]?.id === value,
+              },
+            )}
+          >
+            <div className="w-full text-left">
+              <p className="font-medium">{plan.name}</p>
+              <p className="text-muted-foreground">{plan.description}</p>
+            </div>
+            <div className="whitespace-nowrap text-right text-sm font-medium">
+              <p>{plan[billingPeriod]?.friendlyPrice}</p>
+              <span className="text-muted-foreground text-xs">
+                {billingPeriod === 'monthlyPrice' ? (
+                  <Trans>per month</Trans>
+                ) : (
+                  <Trans>per year</Trans>
+                )}
+              </span>
+            </div>
+          </button>
+        ))}
+
+        <Link
+          to="https://documen.so/enterprise-cta"
+          target="_blank"
+          className="bg-muted/30 flex items-center space-x-2 rounded-md border p-4"
+        >
+          <div className="flex-1 font-normal">
+            <p className="text-muted-foreground font-medium">
+              <Trans>Enterprise</Trans>
+            </p>
+            <p className="text-muted-foreground flex flex-row items-center gap-1">
+              <Trans>Contact sales here</Trans>
+              <ExternalLinkIcon className="h-4 w-4" />
+            </p>
+          </div>
+        </Link>
+      </div>
+
+      <div className="mt-6 text-center">
+        <Link
+          to="https://documenso.com/pricing"
+          className="text-primary hover:text-primary/80 flex items-center justify-center gap-1 text-sm hover:underline"
+          target="_blank"
+        >
+          <Trans>Compare all plans and features in detail</Trans>
+          <ExternalLinkIcon className="h-4 w-4" />
+        </Link>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,163 @@
+import { useEffect, useState } 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 { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { z } from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { AppError } from '@documenso/lib/errors/app-error';
+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';
+
+export type OrganisationDeleteDialogProps = {
+  trigger?: React.ReactNode;
+};
+
+export const OrganisationDeleteDialog = ({ trigger }: OrganisationDeleteDialogProps) => {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const organisation = useCurrentOrganisation();
+
+  const deleteMessage = _(msg`delete ${organisation.name}`);
+
+  const ZDeleteOrganisationFormSchema = z.object({
+    organisationName: z.literal(deleteMessage, {
+      errorMap: () => ({ message: _(msg`You must enter '${deleteMessage}' to proceed`) }),
+    }),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(ZDeleteOrganisationFormSchema),
+    defaultValues: {
+      organisationName: '',
+    },
+  });
+
+  const { mutateAsync: deleteOrganisation } = trpc.organisation.delete.useMutation();
+
+  const onFormSubmit = async () => {
+    try {
+      await deleteOrganisation({ organisationId: organisation.id });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Your organisation has been successfully deleted.`),
+        duration: 5000,
+      });
+
+      await navigate('/settings/organisations');
+
+      setOpen(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+      console.error(error);
+
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to delete this organisation. Please try again later.`,
+        ),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="destructive">
+            <Trans>Delete</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure you wish to delete this organisation?</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              You are about to delete <span className="font-semibold">{organisation.name}</span>.
+              All data related to this organisation such as teams, documents, and all other
+              resources will be deleted. This action is irreversible.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="organisationName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>
+                        Confirm by typing <span className="text-destructive">{deleteMessage}</span>
+                      </Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                  <Trans>Delete</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,253 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { OrganisationMemberRole } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import {
+  ORGANISATION_MEMBER_ROLE_HIERARCHY,
+  ORGANISATION_MEMBER_ROLE_MAP,
+} from '@documenso/lib/constants/organisations';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateOrganisationGroupRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation-group.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  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 { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationGroupCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateOrganisationGroupFormSchema = ZCreateOrganisationGroupRequestSchema.pick({
+  name: true,
+  memberIds: true,
+  organisationRole: true,
+});
+
+type TCreateOrganisationGroupFormSchema = z.infer<typeof ZCreateOrganisationGroupFormSchema>;
+
+export const OrganisationGroupCreateDialog = ({
+  trigger,
+  ...props
+}: OrganisationGroupCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+  const organisation = useCurrentOrganisation();
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateOrganisationGroupFormSchema),
+    defaultValues: {
+      name: '',
+      organisationRole: OrganisationMemberRole.MEMBER,
+      memberIds: [],
+    },
+  });
+
+  const { mutateAsync: createOrganisationGroup } = trpc.organisation.group.create.useMutation();
+
+  const { data: membersFindResult, isLoading: isLoadingMembers } =
+    trpc.organisation.member.find.useQuery({
+      organisationId: organisation.id,
+    });
+
+  const members = membersFindResult?.data ?? [];
+
+  const onFormSubmit = async ({
+    name,
+    organisationRole,
+    memberIds,
+  }: TCreateOrganisationGroupFormSchema) => {
+    try {
+      await createOrganisationGroup({
+        organisationId: organisation.id,
+        name,
+        organisationRole,
+        memberIds,
+      });
+
+      setOpen(false);
+
+      toast({
+        title: t`Success`,
+        description: t`Group has been created.`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      console.error(error);
+
+      toast({
+        title: t`An unknown error occurred`,
+        description: t`We encountered an unknown error while attempting to create a group. Please try again later.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            <Trans>Create group</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create group</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Organise your members into groups which can be assigned to teams</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Group Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="organisationRole"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Organisation role</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="text-muted-foreground w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+
+                        <SelectContent position="popper">
+                          {ORGANISATION_MEMBER_ROLE_HIERARCHY[
+                            organisation.currentOrganisationRole
+                          ].map((role) => (
+                            <SelectItem key={role} value={role}>
+                              {t(ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="memberIds"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Members</Trans>
+                    </FormLabel>
+
+                    <FormControl>
+                      <MultiSelectCombobox
+                        options={members.map((member) => ({
+                          label: member.name,
+                          value: member.id,
+                        }))}
+                        loading={isLoadingMembers}
+                        selectedValues={field.value}
+                        onChange={field.onChange}
+                        className="bg-background w-full"
+                        emptySelectionPlaceholder={t`Select members`}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>Select the members to add to this group</Trans>
+                    </FormDescription>
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button
+                  type="submit"
+                  data-testid="dialog-create-organisation-button"
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Create</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationGroupDeleteDialogProps = {
+  organisationGroupId: string;
+  organisationGroupName: string;
+  trigger?: React.ReactNode;
+};
+
+export const OrganisationGroupDeleteDialog = ({
+  trigger,
+  organisationGroupId,
+  organisationGroupName,
+}: OrganisationGroupDeleteDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const organisation = useCurrentOrganisation();
+
+  const { mutateAsync: deleteGroup, isPending: isDeleting } =
+    trpc.organisation.group.delete.useMutation({
+      onSuccess: () => {
+        toast({
+          title: _(msg`Success`),
+          description: _(msg`You have successfully removed this group from the organisation.`),
+          duration: 5000,
+        });
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: _(msg`An unknown error occurred`),
+          description: _(
+            msg`We encountered an unknown error while attempting to remove this group. Please try again later.`,
+          ),
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeleting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Delete organisation group</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are about to remove the following group from{' '}
+              <span className="font-semibold">{organisation.name}</span>.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral">
+          <AlertDescription className="text-center font-semibold">
+            {organisationGroupName}
+          </AlertDescription>
+        </Alert>
+
+        <fieldset disabled={isDeleting}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isDeleting}
+              onClick={async () =>
+                deleteGroup({
+                  organisationId: organisation.id,
+                  groupId: organisationGroupId,
+                })
+              }
+            >
+              <Trans>Delete</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type { OrganisationMemberRole } from '@prisma/client';
+
+import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationLeaveDialogProps = {
+  organisationId: string;
+  organisationName: string;
+  organisationAvatarImageId?: string | null;
+  role: OrganisationMemberRole;
+  trigger?: React.ReactNode;
+};
+
+export const OrganisationLeaveDialog = ({
+  trigger,
+  organisationId,
+  organisationName,
+  organisationAvatarImageId,
+  role,
+}: OrganisationLeaveDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: leaveOrganisation, isPending: isLeavingOrganisation } =
+    trpc.organisation.leave.useMutation({
+      onSuccess: () => {
+        toast({
+          title: t`Success`,
+          description: t`You have successfully left this organisation.`,
+          duration: 5000,
+        });
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: t`An unknown error occurred`,
+          description: t`We encountered an unknown error while attempting to leave this organisation. Please try again later.`,
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLeavingOrganisation && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="destructive">
+            <Trans>Leave organisation</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>You are about to leave the following organisation.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarSrc={formatAvatarUrl(organisationAvatarImageId)}
+            avatarFallback={organisationName.slice(0, 1).toUpperCase()}
+            primaryText={organisationName}
+            secondaryText={t(ORGANISATION_MEMBER_ROLE_MAP[role])}
+          />
+        </Alert>
+
+        <fieldset disabled={isLeavingOrganisation}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isLeavingOrganisation}
+              onClick={async () => leaveOrganisation({ organisationId })}
+            >
+              <Trans>Leave</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,123 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationMemberDeleteDialogProps = {
+  organisationMemberId: string;
+  organisationMemberName: string;
+  organisationMemberEmail: string;
+  trigger?: React.ReactNode;
+};
+
+export const OrganisationMemberDeleteDialog = ({
+  trigger,
+  organisationMemberId,
+  organisationMemberName,
+  organisationMemberEmail,
+}: OrganisationMemberDeleteDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const organisation = useCurrentOrganisation();
+
+  const { mutateAsync: deleteOrganisationMembers, isPending: isDeletingOrganisationMember } =
+    trpc.organisation.member.delete.useMutation({
+      onSuccess: () => {
+        toast({
+          title: _(msg`Success`),
+          description: _(msg`You have successfully removed this user from the organisation.`),
+          duration: 5000,
+        });
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: _(msg`An unknown error occurred`),
+          description: _(
+            msg`We encountered an unknown error while attempting to remove this user. Please try again later.`,
+          ),
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeletingOrganisationMember && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Delete organisation member</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are about to remove the following user from{' '}
+              <span className="font-semibold">{organisation.name}</span>.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarFallback={organisationMemberName.slice(0, 1).toUpperCase()}
+            primaryText={<span className="font-semibold">{organisationMemberName}</span>}
+            secondaryText={organisationMemberEmail}
+          />
+        </Alert>
+
+        <fieldset disabled={isDeletingOrganisationMember}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isDeletingOrganisationMember}
+              onClick={async () =>
+                deleteOrganisationMembers({
+                  organisationId: organisation.id,
+                  organisationMemberId,
+                })
+              }
+            >
+              <Trans>Delete</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -1,10 +1,10 @@
-'use client';
-
 import { useEffect, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { OrganisationMemberRole } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Download, Mail, MailIcon, PlusCircle, Trash, Upload, UsersIcon } from 'lucide-react';
 import Papa, { type ParseResult } from 'papaparse';
@@ -12,10 +12,13 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { downloadFile } from '@documenso/lib/client-only/download-file';
-import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
-import { TeamMemberRole } from '@documenso/prisma/client';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import {
+  ORGANISATION_MEMBER_ROLE_HIERARCHY,
+  ORGANISATION_MEMBER_ROLE_MAP,
+} from '@documenso/lib/constants/organisations';
 import { trpc } from '@documenso/trpc/react';
-import { ZCreateTeamMemberInvitesMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { ZCreateOrganisationMemberInvitesRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation-member-invites.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -47,15 +50,13 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type InviteTeamMembersDialogProps = {
-  currentUserTeamRole: TeamMemberRole;
-  teamId: number;
+export type OrganisationMemberInviteDialogProps = {
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-const ZInviteTeamMembersFormSchema = z
+const ZInviteOrganisationMembersFormSchema = z
   .object({
-    invitations: ZCreateTeamMemberInvitesMutationSchema.shape.invitations,
+    invitations: ZCreateOrganisationMemberInvitesRequestSchema.shape.invitations,
   })
   // Display exactly which rows are duplicates.
   .superRefine((items, ctx) => {
@@ -85,23 +86,21 @@ const ZInviteTeamMembersFormSchema = z
     }
   });
 
-type TInviteTeamMembersFormSchema = z.infer<typeof ZInviteTeamMembersFormSchema>;
+type TInviteOrganisationMembersFormSchema = z.infer<typeof ZInviteOrganisationMembersFormSchema>;
 
 type TabTypes = 'INDIVIDUAL' | 'BULK';
 
-const ZImportTeamMemberSchema = z.array(
+const ZImportOrganisationMemberSchema = z.array(
   z.object({
     email: z.string().email(),
-    role: z.nativeEnum(TeamMemberRole),
+    organisationRole: z.nativeEnum(OrganisationMemberRole),
   }),
 );
 
-export const InviteTeamMembersDialog = ({
-  currentUserTeamRole,
-  teamId,
+export const OrganisationMemberInviteDialog = ({
   trigger,
   ...props
-}: InviteTeamMembersDialogProps) => {
+}: OrganisationMemberInviteDialogProps) => {
   const [open, setOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [invitationType, setInvitationType] = useState<TabTypes>('INDIVIDUAL');
@@ -109,46 +108,49 @@ export const InviteTeamMembersDialog = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const form = useForm<TInviteTeamMembersFormSchema>({
-    resolver: zodResolver(ZInviteTeamMembersFormSchema),
+  const organisation = useCurrentOrganisation();
+
+  const form = useForm<TInviteOrganisationMembersFormSchema>({
+    resolver: zodResolver(ZInviteOrganisationMembersFormSchema),
     defaultValues: {
       invitations: [
         {
           email: '',
-          role: TeamMemberRole.MEMBER,
+          organisationRole: OrganisationMemberRole.MEMBER,
         },
       ],
     },
   });
 
   const {
-    append: appendTeamMemberInvite,
-    fields: teamMemberInvites,
-    remove: removeTeamMemberInvite,
+    append: appendOrganisationMemberInvite,
+    fields: organisationMemberInvites,
+    remove: removeOrganisationMemberInvite,
   } = useFieldArray({
     control: form.control,
     name: 'invitations',
   });
 
-  const { mutateAsync: createTeamMemberInvites } = trpc.team.createTeamMemberInvites.useMutation();
+  const { mutateAsync: createOrganisationMemberInvites } =
+    trpc.organisation.member.invite.createMany.useMutation();
 
-  const onAddTeamMemberInvite = () => {
-    appendTeamMemberInvite({
+  const onAddOrganisationMemberInvite = () => {
+    appendOrganisationMemberInvite({
       email: '',
-      role: TeamMemberRole.MEMBER,
+      organisationRole: OrganisationMemberRole.MEMBER,
     });
   };
 
-  const onFormSubmit = async ({ invitations }: TInviteTeamMembersFormSchema) => {
+  const onFormSubmit = async ({ invitations }: TInviteOrganisationMembersFormSchema) => {
     try {
-      await createTeamMemberInvites({
-        teamId,
+      await createOrganisationMemberInvites({
+        organisationId: organisation.id,
         invitations,
       });
 
       toast({
         title: _(msg`Success`),
-        description: _(msg`Team invitations have been sent.`),
+        description: _(msg`Organisation invitations have been sent.`),
         duration: 5000,
       });
 
@@ -157,7 +159,7 @@ export const InviteTeamMembersDialog = ({
       toast({
         title: _(msg`An unknown error occurred`),
         description: _(
-          msg`We encountered an unknown error while attempting to invite team members. Please try again later.`,
+          msg`We encountered an unknown error while attempting to invite organisation members. Please try again later.`,
         ),
         variant: 'destructive',
       });
@@ -187,24 +189,24 @@ export const InviteTeamMembersDialog = ({
 
           return {
             email: email.trim(),
-            role: role.trim().toUpperCase(),
+            organisationRole: role.trim().toUpperCase(),
           };
         });
 
         // Remove the first row if it contains the headers.
-        if (members.length > 1 && members[0].role.toUpperCase() === 'ROLE') {
+        if (members.length > 1 && members[0].organisationRole.toUpperCase() === 'ROLE') {
           members.shift();
         }
 
         try {
-          const importedInvitations = ZImportTeamMemberSchema.parse(members);
+          const importedInvitations = ZImportOrganisationMemberSchema.parse(members);
 
           form.setValue('invitations', importedInvitations);
           form.clearErrors('invitations');
 
           setInvitationType('INDIVIDUAL');
         } catch (err) {
-          console.error(err.message);
+          console.error(err);
 
           toast({
             title: _(msg`Something went wrong`),
@@ -233,7 +235,7 @@ export const InviteTeamMembersDialog = ({
     });
 
     downloadFile({
-      filename: 'documenso-team-member-invites-template.csv',
+      filename: 'documenso-organisation-member-invites-template.csv',
       data: blob,
     });
   };
@@ -255,7 +257,7 @@ export const InviteTeamMembersDialog = ({
       <DialogContent position="center">
         <DialogHeader>
           <DialogTitle>
-            <Trans>Invite team members</Trans>
+            <Trans>Invite organisation members</Trans>
           </DialogTitle>
 
           <DialogDescription className="mt-4">
@@ -288,8 +290,11 @@ export const InviteTeamMembersDialog = ({
                   disabled={form.formState.isSubmitting}
                 >
                   <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
-                    {teamMemberInvites.map((teamMemberInvite, index) => (
-                      <div className="flex w-full flex-row space-x-4" key={teamMemberInvite.id}>
+                    {organisationMemberInvites.map((organisationMemberInvite, index) => (
+                      <div
+                        className="flex w-full flex-row space-x-4"
+                        key={organisationMemberInvite.id}
+                      >
                         <FormField
                           control={form.control}
                           name={`invitations.${index}.email`}
@@ -310,12 +315,12 @@ export const InviteTeamMembersDialog = ({
 
                         <FormField
                           control={form.control}
-                          name={`invitations.${index}.role`}
+                          name={`invitations.${index}.organisationRole`}
                           render={({ field }) => (
                             <FormItem className="w-full">
                               {index === 0 && (
                                 <FormLabel required>
-                                  <Trans>Role</Trans>
+                                  <Trans>Organisation Role</Trans>
                                 </FormLabel>
                               )}
                               <FormControl>
@@ -325,9 +330,11 @@ export const InviteTeamMembersDialog = ({
                                   </SelectTrigger>
 
                                   <SelectContent position="popper">
-                                    {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
+                                    {ORGANISATION_MEMBER_ROLE_HIERARCHY[
+                                      organisation.currentOrganisationRole
+                                    ].map((role) => (
                                       <SelectItem key={role} value={role}>
-                                        {_(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
+                                        {_(ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
                                       </SelectItem>
                                     ))}
                                   </SelectContent>
@@ -344,8 +351,8 @@ export const InviteTeamMembersDialog = ({
                             'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
                             index === 0 ? 'mt-8' : 'mt-0',
                           )}
-                          disabled={teamMemberInvites.length === 1}
-                          onClick={() => removeTeamMemberInvite(index)}
+                          disabled={organisationMemberInvites.length === 1}
+                          onClick={() => removeOrganisationMemberInvite(index)}
                         >
                           <Trash className="h-5 w-5" />
                         </button>
@@ -358,7 +365,7 @@ export const InviteTeamMembersDialog = ({
                     size="sm"
                     variant="outline"
                     className="w-fit"
-                    onClick={() => onAddTeamMemberInvite()}
+                    onClick={() => onAddOrganisationMemberInvite()}
                   >
                     <PlusCircle className="mr-2 h-4 w-4" />
                     <Trans>Add more</Trans>

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

@@ -0,0 +1,207 @@
+import { useEffect, useState } 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 { OrganisationMemberRole } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import {
+  ORGANISATION_MEMBER_ROLE_HIERARCHY,
+  ORGANISATION_MEMBER_ROLE_MAP,
+} from '@documenso/lib/constants/organisations';
+import { isOrganisationRoleWithinUserHierarchy } from '@documenso/lib/utils/organisations';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationMemberUpdateDialogProps = {
+  currentUserOrganisationRole: OrganisationMemberRole;
+  trigger?: React.ReactNode;
+  organisationId: string;
+  organisationMemberId: string;
+  organisationMemberName: string;
+  organisationMemberRole: OrganisationMemberRole;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdateOrganisationMemberFormSchema = z.object({
+  role: z.nativeEnum(OrganisationMemberRole),
+});
+
+type ZUpdateOrganisationMemberSchema = z.infer<typeof ZUpdateOrganisationMemberFormSchema>;
+
+export const OrganisationMemberUpdateDialog = ({
+  currentUserOrganisationRole,
+  trigger,
+  organisationId,
+  organisationMemberId,
+  organisationMemberName,
+  organisationMemberRole,
+  ...props
+}: OrganisationMemberUpdateDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const form = useForm<ZUpdateOrganisationMemberSchema>({
+    resolver: zodResolver(ZUpdateOrganisationMemberFormSchema),
+    defaultValues: {
+      role: organisationMemberRole,
+    },
+  });
+
+  const { mutateAsync: updateOrganisationMember } = trpc.organisation.member.update.useMutation();
+
+  const onFormSubmit = async ({ role }: ZUpdateOrganisationMemberSchema) => {
+    try {
+      await updateOrganisationMember({
+        organisationId,
+        organisationMemberId,
+        data: {
+          role,
+        },
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`You have updated ${organisationMemberName}.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to update this organisation member. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset();
+
+    if (
+      !isOrganisationRoleWithinUserHierarchy(currentUserOrganisationRole, organisationMemberRole)
+    ) {
+      setOpen(false);
+
+      toast({
+        title: _(msg`You cannot modify a organisation member who has a higher role than you.`),
+        variant: 'destructive',
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, currentUserOrganisationRole, organisationMemberRole, form, toast]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Update organisation member</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Update organisation member</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are currently updating{' '}
+              <span className="font-bold">{organisationMemberName}.</span>
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem className="w-full">
+                    <FormLabel required>
+                      <Trans>Role</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="text-muted-foreground">
+                          <SelectValue />
+                        </SelectTrigger>
+
+                        <SelectContent className="w-full" position="popper">
+                          {ORGANISATION_MEMBER_ROLE_HIERARCHY[currentUserOrganisationRole].map(
+                            (role) => (
+                              <SelectItem key={role} value={role}>
+                                {_(ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
+                              </SelectItem>
+                            ),
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter className="mt-4">
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Update</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -1,10 +1,9 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+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 { startRegistration } from '@simplewebauthn/browser';
 import { KeyRoundIcon } from 'lucide-react';
@@ -38,7 +37,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type CreatePasskeyDialogProps = {
+export type PasskeyCreateDialogProps = {
   trigger?: React.ReactNode;
   onSuccess?: () => void;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
@@ -51,7 +50,7 @@ type TCreatePasskeyFormSchema = z.infer<typeof ZCreatePasskeyFormSchema>;
 
 const parser = new UAParser();
 
-export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePasskeyDialogProps) => {
+export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCreateDialogProps) => {
   const [open, setOpen] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 

apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx

@@ -1,18 +1,17 @@
-'use client';
-
 import { useEffect, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Plural, Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import type { Template, TemplateDirectLink } from '@prisma/client';
+import { TemplateType } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { CheckCircle2Icon, CircleIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { P, match } from 'ts-pattern';
 import { z } from 'zod';
 
-import type { Template, TemplateDirectLink } from '@documenso/prisma/client';
-import { TemplateType } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import {
   MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH,
@@ -50,7 +49,7 @@ import {
 import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type ManagePublicTemplateDialogProps = {
   directTemplates: (Template & {
@@ -96,7 +95,7 @@ export const ManagePublicTemplateDialog = ({
 
   const [open, onOpenChange] = useState(isOpen);
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(initialTemplateId);
 

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

@@ -0,0 +1,314 @@
+import { useEffect, useMemo, useState } 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 { useSearchParams } from 'react-router';
+import type { z } from 'zod';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamRequestSchema } from '@documenso/trpc/server/team-router/create-team.types';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+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 { SpinnerBox } from '@documenso/ui/primitives/spinner';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamCreateDialogProps = {
+  trigger?: React.ReactNode;
+  onCreated?: () => Promise<void>;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateTeamFormSchema = ZCreateTeamRequestSchema.pick({
+  teamName: true,
+  teamUrl: true,
+  inheritMembers: true,
+});
+
+type TCreateTeamFormSchema = z.infer<typeof ZCreateTeamFormSchema>;
+
+export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { refreshSession } = useSession();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+  const organisation = useCurrentOrganisation();
+
+  const [open, setOpen] = useState(false);
+
+  const { data: fullOrganisation } = trpc.organisation.get.useQuery({
+    organisationReference: organisation.id,
+  });
+
+  const actionSearchParam = searchParams?.get('action');
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+      teamUrl: '',
+      inheritMembers: true,
+    },
+  });
+
+  const { mutateAsync: createTeam } = trpc.team.create.useMutation();
+
+  const onFormSubmit = async ({ teamName, teamUrl, inheritMembers }: TCreateTeamFormSchema) => {
+    try {
+      await createTeam({
+        organisationId: organisation.id,
+        teamName,
+        teamUrl,
+        inheritMembers,
+      });
+
+      setOpen(false);
+
+      await onCreated?.();
+      await refreshSession();
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Your team has been created.`),
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('teamUrl', {
+          type: 'manual',
+          message: _(msg`This URL is already in use.`),
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to create a team. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const mapTextToUrl = (text: string) => {
+    return text.toLowerCase().replace(/\s+/g, '-');
+  };
+
+  const dialogState = useMemo(() => {
+    if (!fullOrganisation) {
+      return 'loading';
+    }
+
+    if (fullOrganisation.organisationClaim.teamCount === 0) {
+      return 'form';
+    }
+
+    if (fullOrganisation.organisationClaim.teamCount <= fullOrganisation.teams.length) {
+      return 'alert';
+    }
+
+    return 'form';
+  }, [fullOrganisation]);
+
+  useEffect(() => {
+    if (actionSearchParam === 'add-team') {
+      setOpen(true);
+      updateSearchParams({ action: null });
+    }
+  }, [actionSearchParam, open]);
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            <Trans>Create team</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create team</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Create a team to collaborate with your team members.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        {dialogState === 'loading' && <SpinnerBox className="py-32" />}
+
+        {dialogState === 'alert' && (
+          <>
+            <Alert
+              className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+              variant="neutral"
+            >
+              <AlertDescription className="mr-2">
+                <Trans>
+                  You have reached the maximum number of teams for your plan. Please contact sales
+                  at <a href="mailto:support@documenso.com">support@documenso.com</a> if you would
+                  like to adjust your plan.
+                </Trans>
+              </AlertDescription>
+            </Alert>
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+
+        {dialogState === 'form' && (
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="teamName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required>
+                        <Trans>Team Name</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          className="bg-background"
+                          {...field}
+                          onChange={(event) => {
+                            const oldGeneratedUrl = mapTextToUrl(field.value);
+                            const newGeneratedUrl = mapTextToUrl(event.target.value);
+
+                            const urlField = form.getValues('teamUrl');
+                            if (urlField === oldGeneratedUrl) {
+                              form.setValue('teamUrl', newGeneratedUrl);
+                            }
+
+                            field.onChange(event);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="teamUrl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required>
+                        <Trans>Team URL</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+                      {!form.formState.errors.teamUrl && (
+                        <span className="text-foreground/50 text-xs font-normal">
+                          {field.value ? (
+                            `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
+                          ) : (
+                            <Trans>A unique URL to identify your team</Trans>
+                          )}
+                        </span>
+                      )}
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="inheritMembers"
+                  render={({ field }) => (
+                    <FormItem className="flex items-center space-x-2">
+                      <FormControl>
+                        <div className="flex items-center">
+                          <Checkbox
+                            id="inherit-members"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+
+                          <label
+                            className="text-muted-foreground ml-2 text-sm"
+                            htmlFor="inherit-members"
+                          >
+                            <Trans>Allow all organisation members to access this team</Trans>
+                          </label>
+                        </div>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button
+                    type="submit"
+                    data-testid="dialog-create-team-button"
+                    loading={form.formState.isSubmitting}
+                  >
+                    <Trans>Create Team</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -1,15 +1,14 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
 import { z } from 'zod';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -34,18 +33,25 @@ import { Input } from '@documenso/ui/primitives/input';
 import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type DeleteTeamDialogProps = {
+export type TeamDeleteDialogProps = {
   teamId: number;
   teamName: string;
+  redirectTo?: string;
   trigger?: React.ReactNode;
 };
 
-export const DeleteTeamDialog = ({ trigger, teamId, teamName }: DeleteTeamDialogProps) => {
-  const router = useRouter();
+export const TeamDeleteDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  redirectTo,
+}: TeamDeleteDialogProps) => {
+  const navigate = useNavigate();
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { refreshSession } = useSession();
 
   const deleteMessage = _(msg`delete ${teamName}`);
 
@@ -62,21 +68,25 @@ export const DeleteTeamDialog = ({ trigger, teamId, teamName }: DeleteTeamDialog
     },
   });
 
-  const { mutateAsync: deleteTeam } = trpc.team.deleteTeam.useMutation();
+  const { mutateAsync: deleteTeam } = trpc.team.delete.useMutation();
 
   const onFormSubmit = async () => {
     try {
       await deleteTeam({ teamId });
 
+      await refreshSession();
+
       toast({
         title: _(msg`Success`),
         description: _(msg`Your team has been successfully deleted.`),
         duration: 5000,
       });
 
-      setOpen(false);
+      if (redirectTo) {
+        await navigate(redirectTo);
+      }
 
-      router.push('/settings/teams');
+      setOpen(false);
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -115,7 +125,7 @@ export const DeleteTeamDialog = ({ trigger, teamId, teamName }: DeleteTeamDialog
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="destructive">
-            <Trans>Delete team</Trans>
+            <Trans>Delete</Trans>
           </Button>
         )}
       </DialogTrigger>

apps/remix/app/components/dialogs/team-email-add-dialog.tsx

@@ -1,15 +1,13 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+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 { Plus } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import type { z } from 'zod';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -36,7 +34,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type AddTeamEmailDialogProps = {
+export type TeamEmailAddDialogProps = {
   teamId: number;
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
@@ -48,13 +46,12 @@ const ZCreateTeamEmailFormSchema = ZCreateTeamEmailVerificationMutationSchema.pi
 
 type TCreateTeamEmailFormSchema = z.infer<typeof ZCreateTeamEmailFormSchema>;
 
-export const AddTeamEmailDialog = ({ teamId, trigger, ...props }: AddTeamEmailDialogProps) => {
-  const router = useRouter();
-
+export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const form = useForm<TCreateTeamEmailFormSchema>({
     resolver: zodResolver(ZCreateTeamEmailFormSchema),
@@ -64,12 +61,12 @@ export const AddTeamEmailDialog = ({ teamId, trigger, ...props }: AddTeamEmailDi
     },
   });
 
-  const { mutateAsync: createTeamEmailVerification, isPending } =
-    trpc.team.createTeamEmailVerification.useMutation();
+  const { mutateAsync: sendTeamEmailVerification, isPending } =
+    trpc.team.email.verification.send.useMutation();
 
   const onFormSubmit = async ({ name, email }: TCreateTeamEmailFormSchema) => {
     try {
-      await createTeamEmailVerification({
+      await sendTeamEmailVerification({
         teamId,
         name,
         email,
@@ -81,7 +78,7 @@ export const AddTeamEmailDialog = ({ teamId, trigger, ...props }: AddTeamEmailDi
         duration: 5000,
       });
 
-      router.refresh();
+      await revalidate();
 
       setOpen(false);
     } catch (err) {

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

@@ -1,15 +1,13 @@
-'use client';
-
 import { useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Prisma } from '@prisma/client';
+import { useRevalidator } from 'react-router';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import type { Prisma } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -25,7 +23,7 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type RemoveTeamEmailDialogProps = {
+export type TeamEmailDeleteDialogProps = {
   trigger?: React.ReactNode;
   teamName: string;
   team: Prisma.TeamGetPayload<{
@@ -42,16 +40,15 @@ export type RemoveTeamEmailDialogProps = {
   }>;
 };
 
-export const RemoveTeamEmailDialog = ({ trigger, teamName, team }: RemoveTeamEmailDialogProps) => {
+export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDeleteDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
   const { toast } = useToast();
-
-  const router = useRouter();
+  const { revalidate } = useRevalidator();
 
   const { mutateAsync: deleteTeamEmail, isPending: isDeletingTeamEmail } =
-    trpc.team.deleteTeamEmail.useMutation({
+    trpc.team.email.delete.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -70,7 +67,7 @@ export const RemoveTeamEmailDialog = ({ trigger, teamName, team }: RemoveTeamEma
     });
 
   const { mutateAsync: deleteTeamEmailVerification, isPending: isDeletingTeamEmailVerification } =
-    trpc.team.deleteTeamEmailVerification.useMutation({
+    trpc.team.email.verification.delete.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -97,7 +94,7 @@ export const RemoveTeamEmailDialog = ({ trigger, teamName, team }: RemoveTeamEma
       await deleteTeamEmailVerification({ teamId: team.id });
     }
 
-    router.refresh();
+    await revalidate();
   };
 
   return (
@@ -127,7 +124,7 @@ export const RemoveTeamEmailDialog = ({ trigger, teamName, team }: RemoveTeamEma
         <Alert variant="neutral" padding="tight">
           <AvatarWithText
             avatarClass="h-12 w-12"
-            avatarSrc={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
+            avatarSrc={formatAvatarUrl(team.avatarImageId)}
             avatarFallback={extractInitials(
               (team.teamEmail?.name || team.emailVerification?.name) ?? '',
             )}

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

@@ -1,17 +1,15 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { TeamEmail } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
-import type { TeamEmail } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -34,7 +32,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type UpdateTeamEmailDialogProps = {
+export type TeamEmailUpdateDialogProps = {
   teamEmail: TeamEmail;
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
@@ -45,17 +43,16 @@ const ZUpdateTeamEmailFormSchema = z.object({
 
 type TUpdateTeamEmailFormSchema = z.infer<typeof ZUpdateTeamEmailFormSchema>;
 
-export const UpdateTeamEmailDialog = ({
+export const TeamEmailUpdateDialog = ({
   teamEmail,
   trigger,
   ...props
-}: UpdateTeamEmailDialogProps) => {
-  const router = useRouter();
-
+}: TeamEmailUpdateDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const form = useForm<TUpdateTeamEmailFormSchema>({
     resolver: zodResolver(ZUpdateTeamEmailFormSchema),
@@ -64,7 +61,7 @@ export const UpdateTeamEmailDialog = ({
     },
   });
 
-  const { mutateAsync: updateTeamEmail } = trpc.team.updateTeamEmail.useMutation();
+  const { mutateAsync: updateTeamEmail } = trpc.team.email.update.useMutation();
 
   const onFormSubmit = async ({ name }: TUpdateTeamEmailFormSchema) => {
     try {
@@ -81,7 +78,7 @@ export const UpdateTeamEmailDialog = ({
         duration: 5000,
       });
 
-      router.refresh();
+      await revalidate();
 
       setOpen(false);
     } catch (err) {

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

@@ -0,0 +1,304 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { OrganisationGroupType, TeamMemberRole } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  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 { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export type TeamGroupCreateDialogProps = Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZAddTeamMembersFormSchema = z.object({
+  groups: z.array(
+    z.object({
+      organisationGroupId: z.string(),
+      teamRole: z.nativeEnum(TeamMemberRole),
+    }),
+  ),
+});
+
+type TAddTeamMembersFormSchema = z.infer<typeof ZAddTeamMembersFormSchema>;
+
+export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [step, setStep] = useState<'SELECT' | 'ROLES'>('SELECT');
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const form = useForm<TAddTeamMembersFormSchema>({
+    resolver: zodResolver(ZAddTeamMembersFormSchema),
+    defaultValues: {
+      groups: [],
+    },
+  });
+
+  const { mutateAsync: createTeamGroups } = trpc.team.group.createMany.useMutation();
+
+  const organisationGroupQuery = trpc.organisation.group.find.useQuery({
+    organisationId: team.organisationId,
+    perPage: 100, // Won't really work if they somehow have more than 100 groups.
+    types: [OrganisationGroupType.CUSTOM],
+  });
+
+  const teamGroupQuery = trpc.team.group.find.useQuery({
+    teamId: team.id,
+    perPage: 100, // Won't really work if they somehow have more than 100 groups.
+  });
+
+  const avaliableOrganisationGroups = useMemo(() => {
+    const organisationGroups = organisationGroupQuery.data?.data ?? [];
+    const teamGroups = teamGroupQuery.data?.data ?? [];
+
+    return organisationGroups.filter(
+      (group) => !teamGroups.some((teamGroup) => teamGroup.organisationGroupId === group.id),
+    );
+  }, [organisationGroupQuery, teamGroupQuery]);
+
+  const onFormSubmit = async ({ groups }: TAddTeamMembersFormSchema) => {
+    try {
+      await createTeamGroups({
+        teamId: team.id,
+        groups,
+      });
+
+      toast({
+        title: t`Success`,
+        description: t`Team members have been added.`,
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: t`An unknown error occurred`,
+        description: t`We encountered an unknown error while attempting to add team members. Please try again later.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+      setStep('SELECT');
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      // Disable automatic onOpenChange events to prevent dialog from closing if auser 'accidentally' clicks the overlay.
+      // Since it would be annoying to redo the whole process.
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        <Button variant="secondary" onClick={() => setOpen(true)}>
+          <Trans>Add groups</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent hideClose={true} position="center">
+        {match(step)
+          .with('SELECT', () => (
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Add members</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Select members or groups of members to add to the team.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+          ))
+          .with('ROLES', () => (
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Add group roles</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Configure the team roles for each group</Trans>
+              </DialogDescription>
+            </DialogHeader>
+          ))
+          .exhaustive()}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting}>
+              {step === 'SELECT' && (
+                <>
+                  <FormField
+                    control={form.control}
+                    name="groups"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Groups</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <MultiSelectCombobox
+                            options={avaliableOrganisationGroups.map((group) => ({
+                              label: group.name ?? group.organisationRole,
+                              value: group.id,
+                            }))}
+                            loading={organisationGroupQuery.isLoading || teamGroupQuery.isLoading}
+                            selectedValues={field.value.map(
+                              ({ organisationGroupId }) => organisationGroupId,
+                            )}
+                            onChange={(value) => {
+                              field.onChange(
+                                value.map((organisationGroupId) => ({
+                                  organisationGroupId,
+                                  teamRole:
+                                    field.value.find(
+                                      (value) => value.organisationGroupId === organisationGroupId,
+                                    )?.teamRole || TeamMemberRole.MEMBER,
+                                })),
+                              );
+                            }}
+                            className="bg-background w-full"
+                            emptySelectionPlaceholder={t`Select groups`}
+                          />
+                        </FormControl>
+
+                        <FormDescription>
+                          <Trans>Select groups to add to this team</Trans>
+                        </FormDescription>
+                      </FormItem>
+                    )}
+                  />
+
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                      <Trans>Cancel</Trans>
+                    </Button>
+
+                    <Button
+                      type="button"
+                      disabled={form.getValues('groups').length === 0}
+                      onClick={() => {
+                        setStep('ROLES');
+                      }}
+                    >
+                      <Trans>Next</Trans>
+                    </Button>
+                  </DialogFooter>
+                </>
+              )}
+
+              {step === 'ROLES' && (
+                <>
+                  <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                    {form.getValues('groups').map((group, index) => (
+                      <div className="flex w-full flex-row space-x-4" key={index}>
+                        <div className="w-full space-y-2">
+                          {index === 0 && (
+                            <FormLabel>
+                              <Trans>Group</Trans>
+                            </FormLabel>
+                          )}
+                          <Input
+                            readOnly
+                            className="bg-background"
+                            value={
+                              avaliableOrganisationGroups.find(
+                                ({ id }) => id === group.organisationGroupId,
+                              )?.name || t`Untitled Group`
+                            }
+                          />
+                        </div>
+
+                        <FormField
+                          control={form.control}
+                          name={`groups.${index}.teamRole`}
+                          render={({ field }) => (
+                            <FormItem className="w-full">
+                              {index === 0 && (
+                                <FormLabel required>
+                                  <Trans>Team Role</Trans>
+                                </FormLabel>
+                              )}
+                              <FormControl>
+                                <Select {...field} onValueChange={field.onChange}>
+                                  <SelectTrigger className="text-muted-foreground">
+                                    <SelectValue />
+                                  </SelectTrigger>
+
+                                  <SelectContent position="popper">
+                                    {TEAM_MEMBER_ROLE_HIERARCHY[team.currentTeamRole].map(
+                                      (role) => (
+                                        <SelectItem key={role} value={role}>
+                                          {t(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
+                                        </SelectItem>
+                                      ),
+                                    )}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+                    ))}
+                  </div>
+
+                  <DialogFooter className="mt-4">
+                    <Button type="button" variant="secondary" onClick={() => setStep('SELECT')}>
+                      <Trans>Back</Trans>
+                    </Button>
+
+                    <Button type="submit" loading={form.formState.isSubmitting}>
+                      <Trans>Create Groups</Trans>
+                    </Button>
+                  </DialogFooter>
+                </>
+              )}
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,139 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { TeamMemberRole } from '@prisma/client';
+
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export type TeamGroupDeleteDialogProps = {
+  trigger?: React.ReactNode;
+  teamGroupId: string;
+  teamGroupName: string;
+  teamGroupRole: TeamMemberRole;
+};
+
+export const TeamGroupDeleteDialog = ({
+  trigger,
+  teamGroupId,
+  teamGroupName,
+  teamGroupRole,
+}: TeamGroupDeleteDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const { mutateAsync: deleteGroup, isPending: isDeleting } = trpc.team.group.delete.useMutation({
+    onSuccess: () => {
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`You have successfully removed this group from the team.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to remove this group. Please try again later.`,
+        ),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeleting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Delete team group</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are about to remove the following group from{' '}
+              <span className="font-semibold">{team.name}</span>.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        {isTeamRoleWithinUserHierarchy(team.currentTeamRole, teamGroupRole) ? (
+          <>
+            <Alert variant="neutral">
+              <AlertDescription className="text-center font-semibold">
+                {teamGroupName}
+              </AlertDescription>
+            </Alert>
+
+            <fieldset disabled={isDeleting}>
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button
+                  type="submit"
+                  variant="destructive"
+                  loading={isDeleting}
+                  onClick={async () =>
+                    deleteGroup({
+                      teamId: team.id,
+                      teamGroupId: teamGroupId,
+                    })
+                  }
+                >
+                  <Trans>Delete</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </>
+        ) : (
+          <>
+            <Alert variant="neutral">
+              <AlertDescription className="text-center font-semibold">
+                <Trans>You cannot delete a group which has a higher role than you.</Trans>
+              </AlertDescription>
+            </Alert>
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                <Trans>Close</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,211 @@
+import { useEffect, useState } 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 { TeamMemberRole } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import {
+  EXTENDED_TEAM_MEMBER_ROLE_MAP,
+  TEAM_MEMBER_ROLE_HIERARCHY,
+} from '@documenso/lib/constants/teams';
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export type TeamGroupUpdateDialogProps = {
+  trigger?: React.ReactNode;
+  teamGroupId: string;
+  teamGroupName: string;
+  teamGroupRole: TeamMemberRole;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdateTeamGroupFormSchema = z.object({
+  role: z.nativeEnum(TeamMemberRole),
+});
+
+type ZUpdateTeamGroupSchema = z.infer<typeof ZUpdateTeamGroupFormSchema>;
+
+export const TeamGroupUpdateDialog = ({
+  trigger,
+  teamGroupId,
+  teamGroupName,
+  teamGroupRole,
+  ...props
+}: TeamGroupUpdateDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const form = useForm<ZUpdateTeamGroupSchema>({
+    resolver: zodResolver(ZUpdateTeamGroupFormSchema),
+    defaultValues: {
+      role: teamGroupRole,
+    },
+  });
+
+  const { mutateAsync: updateTeamGroup } = trpc.team.group.update.useMutation();
+
+  const onFormSubmit = async ({ role }: ZUpdateTeamGroupSchema) => {
+    try {
+      await updateTeamGroup({
+        id: teamGroupId,
+        data: {
+          teamRole: role,
+        },
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`You have updated the team group.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to update this team member. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, team.currentTeamRole, teamGroupRole, form, toast]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Update team group</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Update team group</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              You are currently updating the <span className="font-bold">{teamGroupName}</span> team
+              group.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        {isTeamRoleWithinUserHierarchy(team.currentTeamRole, teamGroupRole) ? (
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+                <FormField
+                  control={form.control}
+                  name="role"
+                  render={({ field }) => (
+                    <FormItem className="w-full">
+                      <FormLabel required>
+                        <Trans>Role</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger className="text-muted-foreground">
+                            <SelectValue />
+                          </SelectTrigger>
+
+                          <SelectContent className="w-full" position="popper">
+                            {TEAM_MEMBER_ROLE_HIERARCHY[team.currentTeamRole].map((role) => (
+                              <SelectItem key={role} value={role}>
+                                {_(EXTENDED_TEAM_MEMBER_ROLE_MAP[role]) ?? role}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter className="mt-4">
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit" loading={form.formState.isSubmitting}>
+                    <Trans>Update</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        ) : (
+          <>
+            <Alert variant="neutral">
+              <AlertDescription className="text-center font-semibold">
+                <Trans>You cannot modify a group which has a higher role than you.</Trans>
+              </AlertDescription>
+            </Alert>
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                <Trans>Close</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,304 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { TeamMemberRole } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  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 { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export type TeamMemberCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZAddTeamMembersFormSchema = z.object({
+  members: z.array(
+    z.object({
+      organisationMemberId: z.string(),
+      teamRole: z.nativeEnum(TeamMemberRole),
+    }),
+  ),
+});
+
+type TAddTeamMembersFormSchema = z.infer<typeof ZAddTeamMembersFormSchema>;
+
+export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [step, setStep] = useState<'SELECT' | 'MEMBERS'>('SELECT');
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const form = useForm<TAddTeamMembersFormSchema>({
+    resolver: zodResolver(ZAddTeamMembersFormSchema),
+    defaultValues: {
+      members: [],
+    },
+  });
+
+  const { mutateAsync: createTeamMembers } = trpc.team.member.createMany.useMutation();
+
+  const organisationMemberQuery = trpc.organisation.member.find.useQuery({
+    organisationId: team.organisationId,
+  });
+
+  const teamMemberQuery = trpc.team.member.find.useQuery({
+    teamId: team.id,
+  });
+
+  const avaliableOrganisationMembers = useMemo(() => {
+    const organisationMembers = organisationMemberQuery.data?.data ?? [];
+    const teamMembers = teamMemberQuery.data?.data ?? [];
+
+    return organisationMembers.filter(
+      (member) => !teamMembers.some((teamMember) => teamMember.id === member.id),
+    );
+  }, [organisationMemberQuery, teamMemberQuery]);
+
+  const onFormSubmit = async ({ members }: TAddTeamMembersFormSchema) => {
+    try {
+      await createTeamMembers({
+        teamId: team.id,
+        organisationMembers: members,
+      });
+
+      toast({
+        title: t`Success`,
+        description: t`Team members have been added.`,
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: t`An unknown error occurred`,
+        description: t`We encountered an unknown error while attempting to add team members. Please try again later.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+      setStep('SELECT');
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      // Disable automatic onOpenChange events to prevent dialog from closing if auser 'accidentally' clicks the overlay.
+      // Since it would be annoying to redo the whole process.
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        <Button variant="secondary" onClick={() => setOpen(true)}>
+          <Trans>Add members</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent hideClose={true} position="center">
+        {match(step)
+          .with('SELECT', () => (
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Add members</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Select members or groups of members to add to the team.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+          ))
+          .with('MEMBERS', () => (
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Add members roles</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Configure the team roles for each member</Trans>
+              </DialogDescription>
+            </DialogHeader>
+          ))
+          .exhaustive()}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting}>
+              {step === 'SELECT' && (
+                <>
+                  <FormField
+                    control={form.control}
+                    name="members"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Members</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <MultiSelectCombobox
+                            options={avaliableOrganisationMembers.map((member) => ({
+                              label: member.name,
+                              value: member.id,
+                            }))}
+                            loading={organisationMemberQuery.isLoading}
+                            selectedValues={field.value.map(
+                              (member) => member.organisationMemberId,
+                            )}
+                            onChange={(value) => {
+                              field.onChange(
+                                value.map((organisationMemberId) => ({
+                                  organisationMemberId,
+                                  teamRole:
+                                    field.value.find(
+                                      (member) =>
+                                        member.organisationMemberId === organisationMemberId,
+                                    )?.teamRole || TeamMemberRole.MEMBER,
+                                })),
+                              );
+                            }}
+                            className="bg-background w-full"
+                            emptySelectionPlaceholder={t`Select members`}
+                          />
+                        </FormControl>
+
+                        <FormDescription>
+                          <Trans>Select members to add to this team</Trans>
+                        </FormDescription>
+                      </FormItem>
+                    )}
+                  />
+
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                      <Trans>Cancel</Trans>
+                    </Button>
+
+                    <Button
+                      type="button"
+                      disabled={form.getValues('members').length === 0}
+                      onClick={() => {
+                        setStep('MEMBERS');
+                      }}
+                    >
+                      <Trans>Next</Trans>
+                    </Button>
+                  </DialogFooter>
+                </>
+              )}
+
+              {step === 'MEMBERS' && (
+                <>
+                  <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                    {form.getValues('members').map((member, index) => (
+                      <div className="flex w-full flex-row space-x-4" key={index}>
+                        <div className="w-full space-y-2">
+                          {index === 0 && (
+                            <FormLabel>
+                              <Trans>Member</Trans>
+                            </FormLabel>
+                          )}
+                          <Input
+                            readOnly
+                            className="bg-background"
+                            value={
+                              organisationMemberQuery.data?.data.find(
+                                ({ id }) => id === member.organisationMemberId,
+                              )?.name || ''
+                            }
+                          />
+                        </div>
+
+                        <FormField
+                          control={form.control}
+                          name={`members.${index}.teamRole`}
+                          render={({ field }) => (
+                            <FormItem className="w-full">
+                              {index === 0 && (
+                                <FormLabel required>
+                                  <Trans>Team Role</Trans>
+                                </FormLabel>
+                              )}
+                              <FormControl>
+                                <Select {...field} onValueChange={field.onChange}>
+                                  <SelectTrigger className="text-muted-foreground">
+                                    <SelectValue />
+                                  </SelectTrigger>
+
+                                  <SelectContent position="popper">
+                                    {TEAM_MEMBER_ROLE_HIERARCHY[team.currentTeamRole].map(
+                                      (role) => (
+                                        <SelectItem key={role} value={role}>
+                                          {t(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
+                                        </SelectItem>
+                                      ),
+                                    )}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+                    ))}
+                  </div>
+
+                  <DialogFooter className="mt-4">
+                    <Button type="button" variant="secondary" onClick={() => setStep('SELECT')}>
+                      <Trans>Back</Trans>
+                    </Button>
+
+                    <Button type="submit" loading={form.formState.isSubmitting}>
+                      <Trans>Add Members</Trans>
+                    </Button>
+                  </DialogFooter>
+                </>
+              )}
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -1,9 +1,8 @@
-'use client';
-
 import { useState } from 'react';
 
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 
 import { trpc } from '@documenso/trpc/react';
 import { Alert } from '@documenso/ui/primitives/alert';
@@ -20,30 +19,30 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type DeleteTeamMemberDialogProps = {
+export type TeamMemberDeleteDialogProps = {
   teamId: number;
   teamName: string;
-  teamMemberId: number;
-  teamMemberName: string;
-  teamMemberEmail: string;
+  memberId: string;
+  memberName: string;
+  memberEmail: string;
   trigger?: React.ReactNode;
 };
 
-export const DeleteTeamMemberDialog = ({
+export const TeamMemberDeleteDialog = ({
   trigger,
   teamId,
   teamName,
-  teamMemberId,
-  teamMemberName,
-  teamMemberEmail,
-}: DeleteTeamMemberDialogProps) => {
+  memberId,
+  memberName,
+  memberEmail,
+}: TeamMemberDeleteDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { mutateAsync: deleteTeamMembers, isPending: isDeletingTeamMember } =
-    trpc.team.deleteTeamMembers.useMutation({
+  const { mutateAsync: deleteTeamMember, isPending: isDeletingTeamMember } =
+    trpc.team.member.delete.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -70,7 +69,7 @@ export const DeleteTeamMemberDialog = ({
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="secondary">
-            <Trans>Delete team member</Trans>
+            <Trans>Remove team member</Trans>
           </Button>
         )}
       </DialogTrigger>
@@ -92,9 +91,9 @@ export const DeleteTeamMemberDialog = ({
         <Alert variant="neutral" padding="tight">
           <AvatarWithText
             avatarClass="h-12 w-12"
-            avatarFallback={teamMemberName.slice(0, 1).toUpperCase()}
-            primaryText={<span className="font-semibold">{teamMemberName}</span>}
-            secondaryText={teamMemberEmail}
+            avatarFallback={memberName.slice(0, 1).toUpperCase()}
+            primaryText={<span className="font-semibold">{memberName}</span>}
+            secondaryText={memberEmail}
           />
         </Alert>
 
@@ -108,9 +107,9 @@ export const DeleteTeamMemberDialog = ({
               type="submit"
               variant="destructive"
               loading={isDeletingTeamMember}
-              onClick={async () => deleteTeamMembers({ teamId, teamMemberIds: [teamMemberId] })}
+              onClick={async () => deleteTeamMember({ teamId, memberId })}
             >
-              <Trans>Delete</Trans>
+              <Trans>Remove</Trans>
             </Button>
           </DialogFooter>
         </fieldset>

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

@@ -1,17 +1,16 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { TeamMemberRole } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
-import { TeamMemberRole } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -40,13 +39,13 @@ import {
 } from '@documenso/ui/primitives/select';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type UpdateTeamMemberDialogProps = {
+export type TeamMemberUpdateDialogProps = {
   currentUserTeamRole: TeamMemberRole;
   trigger?: React.ReactNode;
   teamId: number;
-  teamMemberId: number;
-  teamMemberName: string;
-  teamMemberRole: TeamMemberRole;
+  memberId: string;
+  memberName: string;
+  memberTeamRole: TeamMemberRole;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 const ZUpdateTeamMemberFormSchema = z.object({
@@ -55,15 +54,15 @@ const ZUpdateTeamMemberFormSchema = z.object({
 
 type ZUpdateTeamMemberSchema = z.infer<typeof ZUpdateTeamMemberFormSchema>;
 
-export const UpdateTeamMemberDialog = ({
+export const TeamMemberUpdateDialog = ({
   currentUserTeamRole,
   trigger,
   teamId,
-  teamMemberId,
-  teamMemberName,
-  teamMemberRole,
+  memberId,
+  memberName,
+  memberTeamRole,
   ...props
-}: UpdateTeamMemberDialogProps) => {
+}: TeamMemberUpdateDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
@@ -72,17 +71,17 @@ export const UpdateTeamMemberDialog = ({
   const form = useForm<ZUpdateTeamMemberSchema>({
     resolver: zodResolver(ZUpdateTeamMemberFormSchema),
     defaultValues: {
-      role: teamMemberRole,
+      role: memberTeamRole,
     },
   });
 
-  const { mutateAsync: updateTeamMember } = trpc.team.updateTeamMember.useMutation();
+  const { mutateAsync: updateTeamMember } = trpc.team.member.update.useMutation();
 
   const onFormSubmit = async ({ role }: ZUpdateTeamMemberSchema) => {
     try {
       await updateTeamMember({
         teamId,
-        teamMemberId,
+        memberId,
         data: {
           role,
         },
@@ -90,7 +89,7 @@ export const UpdateTeamMemberDialog = ({
 
       toast({
         title: _(msg`Success`),
-        description: _(msg`You have updated ${teamMemberName}.`),
+        description: _(msg`You have updated ${memberName}.`),
         duration: 5000,
       });
 
@@ -113,7 +112,7 @@ export const UpdateTeamMemberDialog = ({
 
     form.reset();
 
-    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, teamMemberRole)) {
+    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, memberTeamRole)) {
       setOpen(false);
 
       toast({
@@ -122,7 +121,7 @@ export const UpdateTeamMemberDialog = ({
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentUserTeamRole, teamMemberRole, form, toast]);
+  }, [open, currentUserTeamRole, memberTeamRole, form, toast]);
 
   return (
     <Dialog
@@ -144,9 +143,9 @@ export const UpdateTeamMemberDialog = ({
             <Trans>Update team member</Trans>
           </DialogTitle>
 
-          <DialogDescription className="mt-4">
+          <DialogDescription>
             <Trans>
-              You are currently updating <span className="font-bold">{teamMemberName}.</span>
+              You are currently updating <span className="font-bold">{memberName}.</span>
             </Trans>
           </DialogDescription>
         </DialogHeader>

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

@@ -1,8 +1,7 @@
-'use client';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { File as FileIcon, Upload, X } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -22,7 +21,7 @@ import {
 import { Form, FormControl, FormField, FormItem } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 const ZBulkSendFormSchema = z.object({
   file: z.instanceof(File),
@@ -47,7 +46,7 @@ export const TemplateBulkSendDialog = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const form = useForm<TBulkSendFormSchema>({
     resolver: zodResolver(ZBulkSendFormSchema),

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

@@ -1,15 +1,12 @@
-'use client';
+import { useState } from 'react';
 
-import React, { useState } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { FilePlus, Loader } from 'lucide-react';
-import { useSession } from 'next-auth/react';
+import { useNavigate } from 'react-router';
 
-import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -26,21 +23,21 @@ import {
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type NewTemplateDialogProps = {
-  teamId?: number;
+type TemplateCreateDialogProps = {
+  teamId: number;
   templateRootPath: string;
 };
 
-export const NewTemplateDialog = ({ templateRootPath }: NewTemplateDialogProps) => {
-  const router = useRouter();
+export const TemplateCreateDialog = ({ templateRootPath }: TemplateCreateDialogProps) => {
+  const navigate = useNavigate();
 
-  const { data: session } = useSession();
+  const { user } = useSession();
   const { toast } = useToast();
   const { _ } = useLingui();
 
   const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
 
-  const [showNewTemplateDialog, setShowNewTemplateDialog] = useState(false);
+  const [showTemplateCreateDialog, setShowTemplateCreateDialog] = useState(false);
   const [isUploadingFile, setIsUploadingFile] = useState(false);
 
   const onFileDrop = async (file: File) => {
@@ -51,15 +48,11 @@ export const NewTemplateDialog = ({ templateRootPath }: NewTemplateDialogProps)
     setIsUploadingFile(true);
 
     try {
-      const { type, data } = await putPdfFile(file);
-      const { id: templateDocumentDataId } = await createDocumentData({
-        type,
-        data,
-      });
+      const response = await putPdfFile(file);
 
       const { id } = await createTemplate({
         title: file.name,
-        templateDocumentDataId,
+        templateDocumentDataId: response.id,
       });
 
       toast({
@@ -70,9 +63,9 @@ export const NewTemplateDialog = ({ templateRootPath }: NewTemplateDialogProps)
         duration: 5000,
       });
 
-      setShowNewTemplateDialog(false);
+      setShowTemplateCreateDialog(false);
 
-      router.push(`${templateRootPath}/${id}/edit`);
+      await navigate(`${templateRootPath}/${id}/edit`);
     } catch {
       toast({
         title: _(msg`Something went wrong`),
@@ -86,11 +79,11 @@ export const NewTemplateDialog = ({ templateRootPath }: NewTemplateDialogProps)
 
   return (
     <Dialog
-      open={showNewTemplateDialog}
-      onOpenChange={(value) => !isUploadingFile && setShowNewTemplateDialog(value)}
+      open={showTemplateCreateDialog}
+      onOpenChange={(value) => !isUploadingFile && setShowTemplateCreateDialog(value)}
     >
       <DialogTrigger asChild>
-        <Button className="cursor-pointer" disabled={!session?.user.emailVerified}>
+        <Button className="cursor-pointer" disabled={!user.emailVerified}>
           <FilePlus className="-ml-1 mr-2 h-4 w-4" />
           <Trans>New Template</Trans>
         </Button>

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

@@ -1,7 +1,6 @@
-import { useRouter } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -15,22 +14,25 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type DeleteTemplateDialogProps = {
+type TemplateDeleteDialogProps = {
   id: number;
-  teamId?: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  onDelete?: () => Promise<void> | void;
 };
 
-export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateDialogProps) => {
-  const router = useRouter();
-
+export const TemplateDeleteDialog = ({
+  id,
+  open,
+  onOpenChange,
+  onDelete,
+}: TemplateDeleteDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: deleteTemplate, isPending } = trpcReact.template.deleteTemplate.useMutation({
-    onSuccess: () => {
-      router.refresh();
+    onSuccess: async () => {
+      await onDelete?.();
 
       toast({
         title: _(msg`Template deleted`),

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

@@ -1,14 +1,12 @@
-'use client';
+import { useState } from 'react';
 
-import React, { useState } from 'react';
-
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient, Template, TemplateDirectLink } from '@prisma/client';
 import { LinkIcon } from 'lucide-react';
 
-import type { Recipient, Template, TemplateDirectLink } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { TemplateDirectLinkDialog } from '../template-direct-link-dialog';
+import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
 
 export type TemplateDirectLinkDialogWrapperProps = {
   template: Template & { directLink?: TemplateDirectLink | null; recipients: Recipient[] };

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

@@ -1,11 +1,16 @@
 import { useEffect, useMemo, useState } from 'react';
 
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import {
+  type Recipient,
+  RecipientRole,
+  type Template,
+  type TemplateDirectLink,
+} from '@prisma/client';
 import { CircleDotIcon, CircleIcon, ClipboardCopyIcon, InfoIcon, LoaderIcon } from 'lucide-react';
+import { Link, useRevalidator } from 'react-router';
 import { P, match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -14,12 +19,6 @@ import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { DIRECT_TEMPLATE_DOCUMENTATION } from '@documenso/lib/constants/template';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
-import {
-  type Recipient,
-  RecipientRole,
-  type Template,
-  type TemplateDirectLink,
-} from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -65,9 +64,9 @@ export const TemplateDirectLinkDialog = ({
   const { toast } = useToast();
   const { quota, remaining } = useLimits();
   const { _ } = useLingui();
+  const { revalidate } = useRevalidator();
 
   const [, copy] = useCopyToClipboard();
-  const router = useRouter();
 
   const [isEnabled, setIsEnabled] = useState(template.directLink?.enabled ?? false);
   const [token, setToken] = useState(template.directLink?.token ?? null);
@@ -90,12 +89,12 @@ export const TemplateDirectLinkDialog = ({
     isPending: isCreatingTemplateDirectLink,
     reset: resetCreateTemplateDirectLink,
   } = trpcReact.template.createTemplateDirectLink.useMutation({
-    onSuccess: (data) => {
+    onSuccess: async (data) => {
+      await revalidate();
+
       setToken(data.token);
       setIsEnabled(data.enabled);
       setCurrentStep('MANAGE');
-
-      router.refresh();
     },
     onError: () => {
       setSelectedRecipientId(null);
@@ -110,7 +109,9 @@ export const TemplateDirectLinkDialog = ({
 
   const { mutateAsync: toggleTemplateDirectLink, isPending: isTogglingTemplateAccess } =
     trpcReact.template.toggleTemplateDirectLink.useMutation({
-      onSuccess: (data) => {
+      onSuccess: async (data) => {
+        await revalidate();
+
         const enabledDescription = msg`Direct link signing has been enabled`;
         const disabledDescription = msg`Direct link signing has been disabled`;
 
@@ -133,7 +134,9 @@ export const TemplateDirectLinkDialog = ({
 
   const { mutateAsync: deleteTemplateDirectLink, isPending: isDeletingTemplateDirectLink } =
     trpcReact.template.deleteTemplateDirectLink.useMutation({
-      onSuccess: () => {
+      onSuccess: async () => {
+        await revalidate();
+
         onOpenChange(false);
         setToken(null);
 
@@ -143,7 +146,6 @@ export const TemplateDirectLinkDialog = ({
           duration: 5000,
         });
 
-        router.refresh();
         setToken(null);
       },
       onError: () => {
@@ -235,7 +237,7 @@ export const TemplateDirectLinkDialog = ({
                         templates.{' '}
                         <Link
                           className="mt-1 block underline underline-offset-4"
-                          href="/settings/billing"
+                          to="/settings/billing"
                         >
                           Upgrade your account to continue!
                         </Link>
@@ -436,7 +438,7 @@ export const TemplateDirectLinkDialog = ({
                       await toggleTemplateDirectLink({
                         templateId: template.id,
                         enabled: isEnabled,
-                      }).catch((e) => null);
+                      }).catch(() => null);
 
                       onOpenChange(false);
                     }}

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

@@ -1,7 +1,6 @@
-import { useRouter } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -15,28 +14,23 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type DuplicateTemplateDialogProps = {
+type TemplateDuplicateDialogProps = {
   id: number;
-  teamId?: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
-export const DuplicateTemplateDialog = ({
+export const TemplateDuplicateDialog = ({
   id,
   open,
   onOpenChange,
-}: DuplicateTemplateDialogProps) => {
-  const router = useRouter();
-
+}: TemplateDuplicateDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: duplicateTemplate, isPending } =
     trpcReact.template.duplicateTemplate.useMutation({
       onSuccess: () => {
-        router.refresh();
-
         toast({
           title: _(msg`Template duplicated`),
           description: _(msg`Your template has been duplicated successfully.`),

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

@@ -1,14 +1,14 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import { DocumentDistributionMethod, DocumentSigningOrder } from '@prisma/client';
 import { InfoIcon, Plus, Upload, X } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
 import * as z from 'zod';
 
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
@@ -18,8 +18,6 @@ import {
 } from '@documenso/lib/constants/template';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
-import type { Recipient } from '@documenso/prisma/client';
-import { DocumentDistributionMethod, DocumentSigningOrder } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -94,7 +92,7 @@ const ZAddRecipientsForNewDocumentSchema = z
 
 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
 
-export type UseTemplateDialogProps = {
+export type TemplateUseDialogProps = {
   templateId: number;
   templateSigningOrder?: DocumentSigningOrder | null;
   recipients: Recipient[];
@@ -103,19 +101,19 @@ export type UseTemplateDialogProps = {
   trigger?: React.ReactNode;
 };
 
-export function UseTemplateDialog({
+export function TemplateUseDialog({
   recipients,
   documentDistributionMethod = DocumentDistributionMethod.EMAIL,
   documentRootPath,
   templateId,
   templateSigningOrder,
   trigger,
-}: UseTemplateDialogProps) {
-  const router = useRouter();
-
+}: TemplateUseDialogProps) {
   const { toast } = useToast();
   const { _ } = useLingui();
 
+  const navigate = useNavigate();
+
   const [open, setOpen] = useState(false);
 
   const form = useForm<TAddRecipientsForNewDocumentSchema>({
@@ -179,7 +177,7 @@ export function UseTemplateDialog({
         documentPath += '?action=view-signing-links';
       }
 
-      router.push(documentPath);
+      await navigate(documentPath);
     } catch (err) {
       const error = AppError.parseError(err);
 

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

@@ -1,16 +1,13 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { ApiToken } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import type { ApiToken } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -33,35 +30,31 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type DeleteTokenDialogProps = {
-  teamId?: number;
+import { useCurrentTeam } from '~/providers/team';
+
+export type TokenDeleteDialogProps = {
   token: Pick<ApiToken, 'id' | 'name'>;
   onDelete?: () => void;
   children?: React.ReactNode;
 };
 
-export default function DeleteTokenDialog({
-  teamId,
-  token,
-  onDelete,
-  children,
-}: DeleteTokenDialogProps) {
+export default function TokenDeleteDialog({ token, onDelete, children }: TokenDeleteDialogProps) {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const router = useRouter();
+  const team = useCurrentTeam();
 
   const [isOpen, setIsOpen] = useState(false);
 
   const deleteMessage = _(msg`delete ${token.name}`);
 
-  const ZDeleteTokenDialogSchema = z.object({
+  const ZTokenDeleteDialogSchema = z.object({
     tokenName: z.literal(deleteMessage, {
       errorMap: () => ({ message: _(msg`You must enter '${deleteMessage}' to proceed`) }),
     }),
   });
 
-  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZDeleteTokenDialogSchema>;
+  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZTokenDeleteDialogSchema>;
 
   const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
     onSuccess() {
@@ -70,7 +63,7 @@ export default function DeleteTokenDialog({
   });
 
   const form = useForm<TDeleteTokenByIdMutationSchema>({
-    resolver: zodResolver(ZDeleteTokenDialogSchema),
+    resolver: zodResolver(ZTokenDeleteDialogSchema),
     values: {
       tokenName: '',
     },
@@ -80,7 +73,7 @@ export default function DeleteTokenDialog({
     try {
       await deleteTokenMutation({
         id: token.id,
-        teamId,
+        teamId: team?.id,
       });
 
       toast({
@@ -90,8 +83,6 @@ export default function DeleteTokenDialog({
       });
 
       setIsOpen(false);
-
-      router.refresh();
     } catch (error) {
       toast({
         title: _(msg`An unknown error occurred`),

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

@@ -1,18 +1,15 @@
-'use client';
-
 import { useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+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 type { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
-import { ZCreateWebhookMutationSchema } from '@documenso/trpc/server/webhook-router/schema';
+import { ZCreateWebhookRequestSchema } from '@documenso/trpc/server/webhook-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -37,25 +34,23 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
-import { TriggerMultiSelectCombobox } from './trigger-multiselect-combobox';
+import { WebhookMultiSelectCombobox } from '../general/webhook-multiselect-combobox';
 
-const ZCreateWebhookFormSchema = ZCreateWebhookMutationSchema.omit({ teamId: true });
+const ZCreateWebhookFormSchema = ZCreateWebhookRequestSchema.omit({ teamId: true });
 
 type TCreateWebhookFormSchema = z.infer<typeof ZCreateWebhookFormSchema>;
 
-export type CreateWebhookDialogProps = {
+export type WebhookCreateDialogProps = {
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogProps) => {
+export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const router = useRouter();
-
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [open, setOpen] = useState(false);
 
@@ -83,7 +78,7 @@ export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogPr
         eventTriggers,
         secret,
         webhookUrl,
-        teamId: team?.id,
+        teamId: team.id,
       });
 
       setOpen(false);
@@ -94,8 +89,6 @@ export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogPr
       });
 
       form.reset();
-
-      router.refresh();
     } catch (err) {
       toast({
         title: _(msg`Error`),
@@ -191,7 +184,7 @@ export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogPr
                       <Trans>Triggers</Trans>
                     </FormLabel>
                     <FormControl>
-                      <TriggerMultiSelectCombobox
+                      <WebhookMultiSelectCombobox
                         listValues={value}
                         onChange={(values: string[]) => {
                           onChange(values);
@@ -237,14 +230,13 @@ export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogPr
               />
 
               <DialogFooter>
-                <div className="flex w-full flex-nowrap gap-4">
-                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                    <Trans>Cancel</Trans>
-                  </Button>
-                  <Button type="submit" loading={form.formState.isSubmitting}>
-                    <Trans>Create</Trans>
-                  </Button>
-                </div>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Create</Trans>
+                </Button>
               </DialogFooter>
             </fieldset>
           </form>

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

@@ -1,16 +1,13 @@
-'use effect';
-
 import { useEffect, useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Webhook } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import type { Webhook } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -33,21 +30,19 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
-export type DeleteWebhookDialogProps = {
+export type WebhookDeleteDialogProps = {
   webhook: Pick<Webhook, 'id' | 'webhookUrl'>;
   onDelete?: () => void;
   children: React.ReactNode;
 };
 
-export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogProps) => {
+export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const router = useRouter();
-
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [open, setOpen] = useState(false);
 
@@ -72,7 +67,7 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
 
   const onSubmit = async () => {
     try {
-      await deleteWebhook({ id: webhook.id, teamId: team?.id });
+      await deleteWebhook({ id: webhook.id, teamId: team.id });
 
       toast({
         title: _(msg`Webhook deleted`),
@@ -81,8 +76,6 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
       });
 
       setOpen(false);
-
-      router.refresh();
     } catch (error) {
       toast({
         title: _(msg`An unknown error occurred`),

apps/remix/app/components/embed/embed-authentication-required.tsx

@@ -0,0 +1,49 @@
+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/embed/embed-direct-template-client-page.tsx

@@ -1,21 +1,23 @@
-'use client';
-
 import { useEffect, useLayoutEffect, useState } from 'react';
 
-import { useSearchParams } from 'next/navigation';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentMeta, Recipient, Signature, TemplateMeta } from '@prisma/client';
+import { type DocumentData, type Field, FieldType } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
+import { useSearchParams } from 'react-router';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import {
+  isFieldUnsignedAndRequired,
+  isRequiredField,
+} from '@documenso/lib/utils/advanced-fields-helpers';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
-import type { DocumentMeta, Recipient, Signature, TemplateMeta } from '@documenso/prisma/client';
-import { type DocumentData, type Field, FieldType } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
@@ -23,23 +25,22 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import type { DirectTemplateLocalField } from '~/app/(recipient)/d/[token]/sign-direct-template';
-import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
-import { Logo } from '~/components/branding/logo';
+import { BrandingLogo } from '~/components/general/branding-logo';
+import { ZDirectTemplateEmbedDataSchema } from '~/types/embed-direct-template-schema';
+import { injectCss } from '~/utils/css-vars';
 
-import { EmbedClientLoading } from '../../client-loading';
-import { EmbedDocumentCompleted } from '../../completed';
-import { EmbedDocumentFields } from '../../document-fields';
-import { injectCss } from '../../util';
-import { ZDirectTemplateEmbedDataSchema } from './schema';
+import type { DirectTemplateLocalField } from '../general/direct-template/direct-template-signing-form';
+import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
+import { EmbedClientLoading } from './embed-client-loading';
+import { EmbedDocumentCompleted } from './embed-document-completed';
+import { EmbedDocumentFields } from './embed-document-fields';
 
 export type EmbedDirectTemplateClientPageProps = {
   token: string;
@@ -49,7 +50,7 @@ export type EmbedDirectTemplateClientPageProps = {
   fields: Field[];
   metadata?: DocumentMeta | TemplateMeta | null;
   hidePoweredBy?: boolean;
-  isPlatformOrEnterprise?: boolean;
+  allowWhiteLabelling?: boolean;
 };
 
 export const EmbedDirectTemplateClientPage = ({
@@ -60,23 +61,15 @@ export const EmbedDirectTemplateClientPage = ({
   fields,
   metadata,
   hidePoweredBy = false,
-  isPlatformOrEnterprise = false,
+  allowWhiteLabelling = false,
 }: EmbedDirectTemplateClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
 
-  const {
-    fullName,
-    email,
-    signature,
-    signatureValid,
-    setFullName,
-    setEmail,
-    setSignature,
-    setSignatureValid,
-  } = useRequiredSigningContext();
+  const { fullName, email, signature, setFullName, setEmail, setSignature } =
+    useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
@@ -94,7 +87,7 @@ export const EmbedDirectTemplateClientPage = ({
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
 
   const [pendingFields, _completedFields] = [
-    localFields.filter((field) => !field.inserted),
+    localFields.filter((field) => isFieldUnsignedAndRequired(field)),
     localFields.filter((field) => field.inserted),
   ];
 
@@ -112,7 +105,7 @@ export const EmbedDirectTemplateClientPage = ({
 
         const newField: DirectTemplateLocalField = structuredClone({
           ...field,
-          customText: payload.value,
+          customText: payload.value ?? '',
           inserted: true,
           signedValue: payload,
         });
@@ -123,8 +116,10 @@ export const EmbedDirectTemplateClientPage = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64: payload.value.startsWith('data:') ? payload.value : null,
-            typedSignature: payload.value.startsWith('data:') ? null : payload.value,
+            signatureImageAsBase64:
+              payload.value && payload.value.startsWith('data:') ? payload.value : null,
+            typedSignature:
+              payload.value && !payload.value.startsWith('data:') ? payload.value : null,
           } satisfies Signature;
         }
 
@@ -182,7 +177,7 @@ export const EmbedDirectTemplateClientPage = ({
   };
 
   const onNextFieldClick = () => {
-    validateFieldsInserted(localFields);
+    validateFieldsInserted(pendingFields);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -190,11 +185,7 @@ export const EmbedDirectTemplateClientPage = ({
 
   const onCompleteClick = async () => {
     try {
-      if (hasSignatureField && !signatureValid) {
-        return;
-      }
-
-      const valid = validateFieldsInserted(localFields);
+      const valid = validateFieldsInserted(pendingFields);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -207,12 +198,6 @@ export const EmbedDirectTemplateClientPage = ({
         directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
       }
 
-      localFields.forEach((field) => {
-        if (!field.signedValue) {
-          throw new Error('Invalid configuration');
-        }
-      });
-
       const {
         documentId,
         token: documentToken,
@@ -223,13 +208,11 @@ export const EmbedDirectTemplateClientPage = ({
         directRecipientName: fullName,
         directRecipientEmail: email,
         templateUpdatedAt: updatedAt,
-        signedFieldValues: localFields.map((field) => {
-          if (!field.signedValue) {
-            throw new Error('Invalid configuration');
-          }
-
-          return field.signedValue;
-        }),
+        signedFieldValues: localFields
+          .filter((field) => {
+            return field.signedValue && (isRequiredField(field) || field.inserted);
+          })
+          .map((field) => field.signedValue!),
       });
 
       if (window.parent) {
@@ -288,7 +271,7 @@ export const EmbedDirectTemplateClientPage = ({
         document.documentElement.classList.add('dark-mode-disabled');
       }
 
-      if (isPlatformOrEnterprise) {
+      if (allowWhiteLabelling) {
         injectCss({
           css: data.css,
           cssVars: data.cssVars,
@@ -340,7 +323,7 @@ export const EmbedDirectTemplateClientPage = ({
       <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
         {/* Viewer */}
         <div className="flex-1">
-          <LazyPDFViewer
+          <PDFViewer
             documentData={documentData}
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
@@ -349,7 +332,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Widget */}
         <div
           key={isExpanded ? 'expanded' : 'collapsed'}
-          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
           <div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">
@@ -417,40 +400,24 @@ export const EmbedDirectTemplateClientPage = ({
                   />
                 </div>
 
-                <div>
-                  <Label htmlFor="Signature">
-                    <Trans>Signature</Trans>
-                  </Label>
+                {hasSignatureField && (
+                  <div>
+                    <Label htmlFor="Signature">
+                      <Trans>Signature</Trans>
+                    </Label>
 
-                  <Card className="mt-2" gradient degrees={-120}>
-                    <CardContent className="p-0">
-                      <SignaturePad
-                        className="h-44 w-full"
-                        disabled={isThrottled || isSubmitting}
-                        defaultValue={signature ?? undefined}
-                        onChange={(value) => {
-                          setSignature(value);
-                        }}
-                        onValidityChange={(isValid) => {
-                          setSignatureValid(isValid);
-                        }}
-                        allowTypedSignature={Boolean(
-                          metadata &&
-                            'typedSignatureEnabled' in metadata &&
-                            metadata.typedSignatureEnabled,
-                        )}
-                      />
-                    </CardContent>
-                  </Card>
-
-                  {hasSignatureField && !signatureValid && (
-                    <div className="text-destructive mt-2 text-sm">
-                      <Trans>
-                        Signature is too small. Please provide a more complete signature.
-                      </Trans>
-                    </div>
-                  )}
-                </div>
+                    <SignaturePadDialog
+                      className="mt-2"
+                      disabled={isThrottled || isSubmitting}
+                      disableAnimation
+                      value={signature ?? ''}
+                      onChange={(v) => setSignature(v ?? '')}
+                      typedSignatureEnabled={metadata?.typedSignatureEnabled}
+                      uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
+                      drawSignatureEnabled={metadata?.drawSignatureEnabled}
+                    />
+                  </div>
+                )}
               </div>
             </div>
 
@@ -495,7 +462,7 @@ export const EmbedDirectTemplateClientPage = ({
       {!hidePoweredBy && (
         <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
           <span>Powered by</span>
-          <Logo className="ml-2 inline-block h-[14px]" />
+          <BrandingLogo className="ml-2 inline-block h-[14px]" />
         </div>
       )}
     </div>

apps/remix/app/components/embed/embed-document-completed.tsx

@@ -1,7 +1,7 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
+import type { Signature } from '@prisma/client';
 
 import signingCelebration from '@documenso/assets/images/signing-celebration.png';
-import type { Signature } from '@documenso/prisma/client';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
 export type EmbedDocumentCompletedPageProps = {
@@ -10,9 +10,8 @@ export type EmbedDocumentCompletedPageProps = {
 };
 
 export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
-  console.log({ signature });
   return (
-    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+    <div className="embed--DocumentCompleted relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
       <h3 className="text-foreground text-2xl font-semibold">
         <Trans>Document Completed!</Trans>
       </h3>

apps/remix/app/components/embed/embed-document-fields.tsx

@@ -1,5 +1,5 @@
-'use client';
-
+import type { DocumentMeta, TemplateMeta } from '@prisma/client';
+import { type Field, FieldType } from '@prisma/client';
 import { match } from 'ts-pattern';
 
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
@@ -12,8 +12,6 @@ import {
   ZRadioFieldMeta,
   ZTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
-import type { DocumentMeta, TemplateMeta } from '@documenso/prisma/client';
-import { type Field, FieldType } from '@documenso/prisma/client';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
@@ -21,16 +19,16 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 
-import { CheckboxField } from '~/app/(signing)/sign/[token]/checkbox-field';
-import { DateField } from '~/app/(signing)/sign/[token]/date-field';
-import { DropdownField } from '~/app/(signing)/sign/[token]/dropdown-field';
-import { EmailField } from '~/app/(signing)/sign/[token]/email-field';
-import { InitialsField } from '~/app/(signing)/sign/[token]/initials-field';
-import { NameField } from '~/app/(signing)/sign/[token]/name-field';
-import { NumberField } from '~/app/(signing)/sign/[token]/number-field';
-import { RadioField } from '~/app/(signing)/sign/[token]/radio-field';
-import { SignatureField } from '~/app/(signing)/sign/[token]/signature-field';
-import { TextField } from '~/app/(signing)/sign/[token]/text-field';
+import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
+import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
+import { DocumentSigningDropdownField } from '~/components/general/document-signing/document-signing-dropdown-field';
+import { DocumentSigningEmailField } from '~/components/general/document-signing/document-signing-email-field';
+import { DocumentSigningInitialsField } from '~/components/general/document-signing/document-signing-initials-field';
+import { DocumentSigningNameField } from '~/components/general/document-signing/document-signing-name-field';
+import { DocumentSigningNumberField } from '~/components/general/document-signing/document-signing-number-field';
+import { DocumentSigningRadioField } from '~/components/general/document-signing/document-signing-radio-field';
+import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
+import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
 
 export type EmbedDocumentFieldsProps = {
   fields: Field[];
@@ -50,16 +48,18 @@ export const EmbedDocumentFields = ({
       {fields.map((field) =>
         match(field.type)
           .with(FieldType.SIGNATURE, () => (
-            <SignatureField
+            <DocumentSigningSignatureField
               key={field.id}
               field={field}
               onSignField={onSignField}
               onUnsignField={onUnsignField}
               typedSignatureEnabled={metadata?.typedSignatureEnabled}
+              uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
+              drawSignatureEnabled={metadata?.drawSignatureEnabled}
             />
           ))
           .with(FieldType.INITIALS, () => (
-            <InitialsField
+            <DocumentSigningInitialsField
               key={field.id}
               field={field}
               onSignField={onSignField}
@@ -67,7 +67,7 @@ export const EmbedDocumentFields = ({
             />
           ))
           .with(FieldType.NAME, () => (
-            <NameField
+            <DocumentSigningNameField
               key={field.id}
               field={field}
               onSignField={onSignField}
@@ -75,7 +75,7 @@ export const EmbedDocumentFields = ({
             />
           ))
           .with(FieldType.DATE, () => (
-            <DateField
+            <DocumentSigningDateField
               key={field.id}
               field={field}
               onSignField={onSignField}
@@ -85,7 +85,7 @@ export const EmbedDocumentFields = ({
             />
           ))
           .with(FieldType.EMAIL, () => (
-            <EmailField
+            <DocumentSigningEmailField
               key={field.id}
               field={field}
               onSignField={onSignField}
@@ -99,7 +99,7 @@ export const EmbedDocumentFields = ({
             };
 
             return (
-              <TextField
+              <DocumentSigningTextField
                 key={field.id}
                 field={fieldWithMeta}
                 onSignField={onSignField}
@@ -114,7 +114,7 @@ export const EmbedDocumentFields = ({
             };
 
             return (
-              <NumberField
+              <DocumentSigningNumberField
                 key={field.id}
                 field={fieldWithMeta}
                 onSignField={onSignField}
@@ -129,7 +129,7 @@ export const EmbedDocumentFields = ({
             };
 
             return (
-              <RadioField
+              <DocumentSigningRadioField
                 key={field.id}
                 field={fieldWithMeta}
                 onSignField={onSignField}
@@ -144,7 +144,7 @@ export const EmbedDocumentFields = ({
             };
 
             return (
-              <CheckboxField
+              <DocumentSigningCheckboxField
                 key={field.id}
                 field={fieldWithMeta}
                 onSignField={onSignField}
@@ -159,7 +159,7 @@ export const EmbedDocumentFields = ({
             };
 
             return (
-              <DropdownField
+              <DocumentSigningDropdownField
                 key={field.id}
                 field={fieldWithMeta}
                 onSignField={onSignField}

apps/remix/app/components/embed/embed-document-rejected.tsx

@@ -0,0 +1,33 @@
+import { Trans } from '@lingui/react/macro';
+import { XCircle } from 'lucide-react';
+
+export const EmbedDocumentRejected = () => {
+  return (
+    <div className="embed--DocumentRejected relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      <div className="flex flex-col items-center">
+        <div className="flex items-center gap-x-4">
+          <XCircle className="text-destructive h-10 w-10" />
+
+          <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            <Trans>Document Rejected</Trans>
+          </h2>
+        </div>
+
+        <div className="text-destructive mt-4 flex items-center text-center text-sm">
+          <Trans>You have rejected this document</Trans>
+        </div>
+
+        <p className="text-muted-foreground mt-6 max-w-[60ch] text-center text-sm">
+          <Trans>
+            The document owner has been notified of your decision. They may contact you with further
+            instructions if necessary.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mt-2 max-w-[60ch] text-center text-sm">
+          <Trans>No further action is required from you at this time.</Trans>
+        </p>
+      </div>
+    </div>
+  );
+};

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

@@ -1,38 +1,47 @@
-'use client';
+import { useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
 
-import { useEffect, useId, useLayoutEffect, useState } from 'react';
-
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentMeta, TemplateMeta } from '@prisma/client';
+import {
+  type DocumentData,
+  type Field,
+  FieldType,
+  RecipientRole,
+  SigningStatus,
+} from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
-import type { DocumentMeta, TemplateMeta } from '@documenso/prisma/client';
-import { type DocumentData, type Field, FieldType, RecipientRole } from '@documenso/prisma/client';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
-import { RecipientProvider } from '~/app/(signing)/sign/[token]/recipient-context';
-import { Logo } from '~/components/branding/logo';
+import { BrandingLogo } from '~/components/general/branding-logo';
+import { injectCss } from '~/utils/css-vars';
 
-import { EmbedClientLoading } from '../../client-loading';
-import { EmbedDocumentCompleted } from '../../completed';
-import { EmbedDocumentFields } from '../../document-fields';
-import { injectCss } from '../../util';
-import { ZSignDocumentEmbedDataSchema } from './schema';
+import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-schema';
+import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
+import { DocumentSigningRecipientProvider } from '../general/document-signing/document-signing-recipient-provider';
+import { DocumentSigningRejectDialog } from '../general/document-signing/document-signing-reject-dialog';
+import { DocumentReadOnlyFields } from '../general/document/document-read-only-fields';
+import { EmbedClientLoading } from './embed-client-loading';
+import { EmbedDocumentCompleted } from './embed-document-completed';
+import { EmbedDocumentFields } from './embed-document-fields';
+import { EmbedDocumentRejected } from './embed-document-rejected';
 
 export type EmbedSignDocumentClientPageProps = {
   token: string;
@@ -40,10 +49,11 @@ export type EmbedSignDocumentClientPageProps = {
   documentData: DocumentData;
   recipient: RecipientWithFields;
   fields: Field[];
+  completedFields: DocumentField[];
   metadata?: DocumentMeta | TemplateMeta | null;
   isCompleted?: boolean;
   hidePoweredBy?: boolean;
-  isPlatformOrEnterprise?: boolean;
+  allowWhitelabelling?: boolean;
   allRecipients?: RecipientWithFields[];
 };
 
@@ -53,28 +63,25 @@ export const EmbedSignDocumentClientPage = ({
   documentData,
   recipient,
   fields,
+  completedFields,
   metadata,
   isCompleted,
   hidePoweredBy = false,
-  isPlatformOrEnterprise = false,
+  allowWhitelabelling = false,
   allRecipients = [],
 }: EmbedSignDocumentClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const {
-    fullName,
-    email,
-    signature,
-    signatureValid,
-    setFullName,
-    setSignature,
-    setSignatureValid,
-  } = useRequiredSigningContext();
+  const { fullName, email, signature, setFullName, setSignature } =
+    useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
   const [hasCompletedDocument, setHasCompletedDocument] = useState(isCompleted);
+  const [hasRejectedDocument, setHasRejectedDocument] = useState(
+    recipient.signingStatus === SigningStatus.REJECTED,
+  );
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(
     allRecipients.length > 0 ? allRecipients[0].id : null,
   );
@@ -82,6 +89,10 @@ export const EmbedSignDocumentClientPage = ({
   const [isExpanded, setIsExpanded] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+  const [showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
+    useState(false);
+
+  const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
 
   const selectedSigner = allRecipients.find((r) => r.id === selectedSignerId);
   const isAssistantMode = recipient.role === RecipientRole.ASSISTANT;
@@ -89,19 +100,26 @@ export const EmbedSignDocumentClientPage = ({
   const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
 
   const [pendingFields, _completedFields] = [
-    fields.filter((field) => field.recipientId === recipient.id && !field.inserted),
+    fields.filter(
+      (field) => field.recipientId === recipient.id && isFieldUnsignedAndRequired(field),
+    ),
     fields.filter((field) => field.inserted),
   ];
 
   const { mutateAsync: completeDocumentWithToken, isPending: isSubmitting } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
+  const fieldsRequiringValidation = useMemo(
+    () => fields.filter(isFieldUnsignedAndRequired),
+    [fields],
+  );
+
   const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
 
   const assistantSignersId = useId();
 
   const onNextFieldClick = () => {
-    validateFieldsInserted(fields);
+    validateFieldsInserted(fieldsRequiringValidation);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -109,11 +127,7 @@ export const EmbedSignDocumentClientPage = ({
 
   const onCompleteClick = async () => {
     try {
-      if (hasSignatureField && !signatureValid) {
-        return;
-      }
-
-      const valid = validateFieldsInserted(fields);
+      const valid = validateFieldsInserted(fieldsRequiringValidation);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -161,6 +175,25 @@ export const EmbedSignDocumentClientPage = ({
     }
   };
 
+  const onDocumentRejected = (reason: string) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-rejected',
+          data: {
+            token,
+            documentId,
+            recipientId: recipient.id,
+            reason,
+          },
+        },
+        '*',
+      );
+    }
+
+    setHasRejectedDocument(true);
+  };
+
   useLayoutEffect(() => {
     const hash = window.location.hash.slice(1);
 
@@ -174,12 +207,14 @@ export const EmbedSignDocumentClientPage = ({
       // Since a recipient can be provided a name we can lock it without requiring
       // a to be provided by the parent application, unlike direct templates.
       setIsNameLocked(!!data.lockName);
+      setAllowDocumentRejection(!!data.allowDocumentRejection);
+      setShowOtherRecipientsCompletedFields(!!data.showOtherRecipientsCompletedFields);
 
       if (data.darkModeDisabled) {
         document.documentElement.classList.add('dark-mode-disabled');
       }
 
-      if (isPlatformOrEnterprise) {
+      if (allowWhitelabelling) {
         injectCss({
           css: data.css,
           cssVars: data.cssVars,
@@ -208,6 +243,10 @@ export const EmbedSignDocumentClientPage = ({
     }
   }, [hasFinishedInit, hasDocumentLoaded]);
 
+  if (hasRejectedDocument) {
+    return <EmbedDocumentRejected />;
+  }
+
   if (hasCompletedDocument) {
     return (
       <EmbedDocumentCompleted
@@ -225,14 +264,24 @@ export const EmbedSignDocumentClientPage = ({
   }
 
   return (
-    <RecipientProvider recipient={recipient} targetSigner={selectedSigner ?? null}>
-      <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+    <DocumentSigningRecipientProvider recipient={recipient} targetSigner={selectedSigner ?? null}>
+      <div className="embed--Root relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
         {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
 
-        <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
+        {allowDocumentRejection && (
+          <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
+            <DocumentSigningRejectDialog
+              document={{ id: documentId }}
+              token={token}
+              onRejected={onDocumentRejected}
+            />
+          </div>
+        )}
+
+        <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
           {/* Viewer */}
-          <div className="flex-1">
-            <LazyPDFViewer
+          <div className="embed--DocumentViewer flex-1">
+            <PDFViewer
               documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
@@ -241,12 +290,12 @@ export const EmbedSignDocumentClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
-            <div className="border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+            <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
               {/* Header */}
-              <div>
+              <div className="embed--DocumentWidgetHeader">
                 <div className="flex items-center justify-between gap-x-2">
                   <h3 className="text-foreground text-xl font-semibold md:text-2xl">
                     {isAssistantMode ? (
@@ -272,7 +321,7 @@ export const EmbedSignDocumentClientPage = ({
                 </div>
               </div>
 
-              <div className="hidden group-data-[expanded]/document-widget:block md:block">
+              <div className="embed--DocumentWidgetContent hidden group-data-[expanded]/document-widget:block md:block">
                 <p className="text-muted-foreground mt-2 text-sm">
                   {isAssistantMode ? (
                     <Trans>Help complete the document for other signers.</Trans>
@@ -285,7 +334,7 @@ export const EmbedSignDocumentClientPage = ({
               </div>
 
               {/* Form */}
-              <div className="-mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
+              <div className="embed--DocumentWidgetForm -mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
                 <div className="flex flex-1 flex-col gap-y-4">
                   {isAssistantMode && (
                     <div>
@@ -372,40 +421,24 @@ export const EmbedSignDocumentClientPage = ({
                         />
                       </div>
 
-                      <div>
-                        <Label htmlFor="Signature">
-                          <Trans>Signature</Trans>
-                        </Label>
+                      {hasSignatureField && (
+                        <div>
+                          <Label htmlFor="Signature">
+                            <Trans>Signature</Trans>
+                          </Label>
 
-                        <Card className="mt-2" gradient degrees={-120}>
-                          <CardContent className="p-0">
-                            <SignaturePad
-                              className="h-44 w-full"
-                              disabled={isThrottled || isSubmitting}
-                              defaultValue={signature ?? undefined}
-                              onChange={(value) => {
-                                setSignature(value);
-                              }}
-                              onValidityChange={(isValid) => {
-                                setSignatureValid(isValid);
-                              }}
-                              allowTypedSignature={Boolean(
-                                metadata &&
-                                  'typedSignatureEnabled' in metadata &&
-                                  metadata.typedSignatureEnabled,
-                              )}
-                            />
-                          </CardContent>
-                        </Card>
-
-                        {hasSignatureField && !signatureValid && (
-                          <div className="text-destructive mt-2 text-sm">
-                            <Trans>
-                              Signature is too small. Please provide a more complete signature.
-                            </Trans>
-                          </div>
-                        )}
-                      </div>
+                          <SignaturePadDialog
+                            className="mt-2"
+                            disabled={isThrottled || isSubmitting}
+                            disableAnimation
+                            value={signature ?? ''}
+                            onChange={(v) => setSignature(v ?? '')}
+                            typedSignatureEnabled={metadata?.typedSignatureEnabled}
+                            uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
+                            drawSignatureEnabled={metadata?.drawSignatureEnabled}
+                          />
+                        </div>
+                      )}
                     </>
                   )}
                 </div>
@@ -413,17 +446,15 @@ export const EmbedSignDocumentClientPage = ({
 
               <div className="hidden flex-1 group-data-[expanded]/document-widget:block md:block" />
 
-              <div className="mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
+              <div className="embed--DocumentWidgetFooter mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
                 {pendingFields.length > 0 ? (
                   <Button className="col-start-2" onClick={() => onNextFieldClick()}>
                     <Trans>Next</Trans>
                   </Button>
                 ) : (
                   <Button
-                    className="col-start-2"
-                    disabled={
-                      isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
-                    }
+                    className={allowDocumentRejection ? 'col-start-2' : 'col-span-2'}
+                    disabled={isThrottled}
                     loading={isSubmitting}
                     onClick={() => throttledOnCompleteClick()}
                   >
@@ -444,15 +475,18 @@ export const EmbedSignDocumentClientPage = ({
 
           {/* Fields */}
           <EmbedDocumentFields fields={fields} metadata={metadata} />
+
+          {/* Completed fields */}
+          <DocumentReadOnlyFields documentMeta={metadata || undefined} fields={completedFields} />
         </div>
 
         {!hidePoweredBy && (
           <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
             <span>Powered by</span>
-            <Logo className="ml-2 inline-block h-[14px]" />
+            <BrandingLogo className="ml-2 inline-block h-[14px]" />
           </div>
         )}
       </div>
-    </RecipientProvider>
+    </DocumentSigningRecipientProvider>
   );
 };

apps/remix/app/components/embed/embed-document-waiting-for-turn.tsx

@@ -1,10 +1,8 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 
-export const EmbedWaitingForTurn = () => {
+export const EmbedDocumentWaitingForTurn = () => {
   const [hasPostedMessage, setHasPostedMessage] = useState(false);
 
   useEffect(() => {
@@ -26,7 +24,7 @@ export const EmbedWaitingForTurn = () => {
   }
 
   return (
-    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+    <div className="embed--WaitingForTurn relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
       <h3 className="text-foreground text-center text-2xl font-bold">
         <Trans>Waiting for Your Turn</Trans>
       </h3>

apps/remix/app/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -1,17 +1,15 @@
-'use client';
-
 import { useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { flushSync } from 'react-dom';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { trpc } from '@documenso/trpc/react';
+import { authClient } from '@documenso/auth/client';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -42,16 +40,13 @@ export const ZDisable2FAForm = z.object({
 export type TDisable2FAForm = z.infer<typeof ZDisable2FAForm>;
 
 export const DisableAuthenticatorAppDialog = () => {
-  const router = useRouter();
-
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { refreshSession } = useSession();
 
   const [isOpen, setIsOpen] = useState(false);
   const [twoFactorDisableMethod, setTwoFactorDisableMethod] = useState<'totp' | 'backup'>('totp');
 
-  const { mutateAsync: disable2FA } = trpc.twoFactorAuthentication.disable.useMutation();
-
   const disable2FAForm = useForm<TDisable2FAForm>({
     defaultValues: {
       totpCode: '',
@@ -84,7 +79,7 @@ export const DisableAuthenticatorAppDialog = () => {
 
   const onDisable2FAFormSubmit = async ({ totpCode, backupCode }: TDisable2FAForm) => {
     try {
-      await disable2FA({ totpCode, backupCode });
+      await authClient.twoFactor.disable({ totpCode, backupCode });
 
       toast({
         title: _(msg`Two-factor authentication disabled`),
@@ -97,7 +92,7 @@ export const DisableAuthenticatorAppDialog = () => {
         onCloseTwoFactorDisableDialog();
       });
 
-      router.refresh();
+      await refreshSession();
     } catch (_err) {
       toast({
         title: _(msg`Unable to disable two-factor authentication`),

apps/remix/app/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -1,18 +1,16 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
+import { authClient } from '@documenso/auth/client';
 import { downloadFile } from '@documenso/lib/client-only/download-file';
-import { trpc } from '@documenso/trpc/react';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -50,29 +48,12 @@ export type EnableAuthenticatorAppDialogProps = {
 export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorAppDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-
-  const router = useRouter();
+  const { refreshSession } = useSession();
 
   const [isOpen, setIsOpen] = useState(false);
   const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
-
-  const { mutateAsync: enable2FA } = trpc.twoFactorAuthentication.enable.useMutation();
-
-  const {
-    mutateAsync: setup2FA,
-    data: setup2FAData,
-    isPending: isSettingUp2FA,
-  } = trpc.twoFactorAuthentication.setup.useMutation({
-    onError: () => {
-      toast({
-        title: _(msg`Unable to setup two-factor authentication`),
-        description: _(
-          msg`We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again.`,
-        ),
-        variant: 'destructive',
-      });
-    },
-  });
+  const [isSettingUp2FA, setIsSettingUp2FA] = useState(false);
+  const [setup2FAData, setSetup2FAData] = useState<{ uri: string; secret: string } | null>(null);
 
   const enable2FAForm = useForm<TEnable2FAForm>({
     defaultValues: {
@@ -83,9 +64,36 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
   const { isSubmitting: isEnabling2FA } = enable2FAForm.formState;
 
+  const setup2FA = async () => {
+    if (isSettingUp2FA) {
+      return;
+    }
+
+    setIsSettingUp2FA(true);
+    setSetup2FAData(null);
+
+    try {
+      const data = await authClient.twoFactor.setup();
+      await refreshSession();
+
+      setSetup2FAData(data);
+    } catch (err) {
+      toast({
+        title: _(msg`Unable to setup two-factor authentication`),
+        description: _(
+          msg`We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+
+    setIsSettingUp2FA(false);
+  };
+
   const onEnable2FAFormSubmit = async ({ token }: TEnable2FAForm) => {
     try {
-      const data = await enable2FA({ code: token });
+      const data = await authClient.twoFactor.enable({ code: token });
+      await refreshSession();
 
       setRecoveryCodes(data.recoveryCodes);
       onSuccess?.();
@@ -133,7 +141,6 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
       setRecoveryCodes(null);
-      router.refresh();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/remix/app/components/forms/2fa/recovery-code-list.tsx

@@ -1,4 +1,4 @@
-import { msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Copy } from 'lucide-react';