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

.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: v22.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/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

@@ -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

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/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/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/remix/.bin/build.sh

@@ -1,7 +1,7 @@
-#!/usr/bin/env sh
+#!/usr/bin/env bash
 
 # Exit on error.
-set -eo pipefail
+set -e
 
 SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 WEB_APP_DIR="$SCRIPT_DIR/.."

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

@@ -1,4 +1,7 @@
+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 {
@@ -9,64 +12,171 @@ import {
   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: () => 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>
-        <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>
+        <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="flex flex-col gap-4">
-          <DocumentSigningDisclosure />
-        </div>
+              <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>
 
-        <DialogFooter className="mt-4">
-          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
-            Cancel
-          </Button>
-          <Button
-            variant={hasUninsertedFields ? 'destructive' : 'default'}
-            onClick={onConfirm}
-            disabled={isSubmitting}
-            loading={isSubmitting}
-          >
-            {isSubmitting ? 'Submitting...' : hasUninsertedFields ? 'Proceed' : 'Continue'}
-          </Button>
-        </DialogFooter>
+                    <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

@@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
-import { match } from 'ts-pattern';
+import { P, match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
@@ -28,7 +28,6 @@ type DocumentDeleteDialogProps = {
   onDelete?: () => Promise<void> | void;
   status: DocumentStatus;
   documentTitle: string;
-  teamId?: number;
   canManageDocument: boolean;
 };
 
@@ -146,7 +145,7 @@ export const DocumentDeleteDialog = ({
                   </ul>
                 </AlertDescription>
               ))
-              .with(DocumentStatus.COMPLETED, () => (
+              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED), () => (
                 <AlertDescription>
                   <p>
                     <Trans>By deleting this document, the following will occur:</Trans>

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

@@ -16,7 +16,7 @@ import {
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 type DocumentDuplicateDialogProps = {
   id: number;
@@ -34,7 +34,7 @@ export const DocumentDuplicateDialog = ({
   const { toast } = useToast();
   const { _ } = useLingui();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery(
     {

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

@@ -1,124 +0,0 @@
-import { useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { trpc } from '@documenso/trpc/react';
-import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-type DocumentMoveDialogProps = {
-  documentId: number;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const DocumentMoveDialog = ({ documentId, open, onOpenChange }: DocumentMoveDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
-
-  const { data: teams, isPending: isLoadingTeams } = trpc.team.getTeams.useQuery();
-
-  const { mutateAsync: moveDocument, isPending } = trpc.document.moveDocumentToTeam.useMutation({
-    onSuccess: () => {
-      toast({
-        title: _(msg`Document moved`),
-        description: _(msg`The document has been successfully moved to the selected team.`),
-        duration: 5000,
-      });
-
-      onOpenChange(false);
-    },
-    onError: (error) => {
-      toast({
-        title: _(msg`Error`),
-        description: error.message || _(msg`An error occurred while moving the document.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    },
-  });
-
-  const onMove = async () => {
-    if (!selectedTeamId) {
-      return;
-    }
-
-    await moveDocument({ documentId, teamId: selectedTeamId });
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Move Document to Team</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <Trans>Select a team to move this document to. This action cannot be undone.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
-          <SelectTrigger>
-            <SelectValue placeholder={_(msg`Select a team`)} />
-          </SelectTrigger>
-          <SelectContent>
-            {isLoadingTeams ? (
-              <SelectItem value="loading" disabled>
-                <Trans>Loading teams...</Trans>
-              </SelectItem>
-            ) : (
-              teams?.map((team) => (
-                <SelectItem key={team.id} value={team.id.toString()}>
-                  <div className="flex items-center gap-4">
-                    <Avatar className="h-8 w-8">
-                      {team.avatarImageId && (
-                        <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
-                      )}
-
-                      <AvatarFallback className="text-sm text-gray-400">
-                        {team.name.slice(0, 1).toUpperCase()}
-                      </AvatarFallback>
-                    </Avatar>
-
-                    <span>{team.name}</span>
-                  </div>
-                </SelectItem>
-              ))
-            )}
-          </SelectContent>
-        </Select>
-
-        <DialogFooter>
-          <Button variant="secondary" onClick={() => onOpenChange(false)}>
-            <Trans>Cancel</Trans>
-          </Button>
-          <Button onClick={onMove} loading={isPending} disabled={!selectedTeamId || isPending}>
-            {isPending ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -36,7 +36,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 import { StackAvatar } from '../general/stack-avatar';
 
@@ -59,7 +59,7 @@ export type TResendDocumentFormSchema = z.infer<typeof ZResendDocumentFormSchema
 
 export const DocumentResendDialog = ({ document, recipients }: DocumentResendDialogProps) => {
   const { user } = useSession();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const { toast } = useToast();
   const { _ } = useLingui();

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

@@ -4,7 +4,7 @@ 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 { 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,9 +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 { 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';
@@ -46,15 +50,13 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCurrentTeam } from '~/providers/team';
-
-export type TeamMemberInviteDialogProps = {
+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) => {
@@ -84,18 +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 TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDialogProps) => {
+export const OrganisationMemberInviteDialog = ({
+  trigger,
+  ...props
+}: OrganisationMemberInviteDialogProps) => {
   const [open, setOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [invitationType, setInvitationType] = useState<TabTypes>('INDIVIDUAL');
@@ -103,48 +108,49 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useCurrentTeam();
+  const organisation = useCurrentOrganisation();
 
-  const form = useForm<TInviteTeamMembersFormSchema>({
-    resolver: zodResolver(ZInviteTeamMembersFormSchema),
+  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: team.id,
+      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,
       });
 
@@ -153,7 +159,7 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
       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',
       });
@@ -183,17 +189,17 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
 
           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');
@@ -229,7 +235,7 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
     });
 
     downloadFile({
-      filename: 'documenso-team-member-invites-template.csv',
+      filename: 'documenso-organisation-member-invites-template.csv',
       data: blob,
     });
   };
@@ -251,7 +257,7 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
       <DialogContent position="center">
         <DialogHeader>
           <DialogTitle>
-            <Trans>Invite team members</Trans>
+            <Trans>Invite organisation members</Trans>
           </DialogTitle>
 
           <DialogDescription className="mt-4">
@@ -284,8 +290,11 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
                   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`}
@@ -306,12 +315,12 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
 
                         <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>
@@ -321,13 +330,13 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
                                   </SelectTrigger>
 
                                   <SelectContent position="popper">
-                                    {TEAM_MEMBER_ROLE_HIERARCHY[team.currentTeamMember.role].map(
-                                      (role) => (
-                                        <SelectItem key={role} value={role}>
-                                          {_(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
-                                        </SelectItem>
-                                      ),
-                                    )}
+                                    {ORGANISATION_MEMBER_ROLE_HIERARCHY[
+                                      organisation.currentOrganisationRole
+                                    ].map((role) => (
+                                      <SelectItem key={role} value={role}>
+                                        {_(ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
+                                      </SelectItem>
+                                    ))}
                                   </SelectContent>
                                 </Select>
                               </FormControl>
@@ -342,8 +351,8 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
                             '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>
@@ -356,7 +365,7 @@ export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDi
                     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/public-profile-template-manage-dialog.tsx

@@ -49,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 & {
@@ -95,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-checkout-create-dialog.tsx

@@ -1,188 +0,0 @@
-import { useMemo, useState } from 'react';
-
-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 { AnimatePresence, motion } from 'framer-motion';
-import { Loader, TagIcon } from 'lucide-react';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type TeamCheckoutCreateDialogProps = {
-  pendingTeamId: number | null;
-  onClose: () => void;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const MotionCard = motion(Card);
-
-export const TeamCheckoutCreateDialog = ({
-  pendingTeamId,
-  onClose,
-  ...props
-}: TeamCheckoutCreateDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const [interval, setInterval] = useState<'monthly' | 'yearly'>('monthly');
-
-  const { data, isLoading } = trpc.team.getTeamPrices.useQuery();
-
-  const { mutateAsync: createCheckout, isPending: isCreatingCheckout } =
-    trpc.team.createTeamPendingCheckout.useMutation({
-      onSuccess: (checkoutUrl) => {
-        window.open(checkoutUrl, '_blank');
-        onClose();
-      },
-      onError: () =>
-        toast({
-          title: _(msg`Something went wrong`),
-          description: _(
-            msg`We were unable to create a checkout session. Please try again, or contact support`,
-          ),
-          variant: 'destructive',
-        }),
-    });
-
-  const selectedPrice = useMemo(() => {
-    if (!data) {
-      return null;
-    }
-
-    return data[interval];
-  }, [data, interval]);
-
-  const handleOnOpenChange = (open: boolean) => {
-    if (pendingTeamId === null) {
-      return;
-    }
-
-    if (!open) {
-      onClose();
-    }
-  };
-
-  if (pendingTeamId === null) {
-    return null;
-  }
-
-  return (
-    <Dialog {...props} open={pendingTeamId !== null} onOpenChange={handleOnOpenChange}>
-      <DialogContent position="center">
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Team checkout</Trans>
-          </DialogTitle>
-
-          <DialogDescription className="mt-4">
-            <Trans>Payment is required to finalise the creation of your team.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        {(isLoading || !data) && (
-          <div className="flex h-20 items-center justify-center text-sm">
-            {isLoading ? (
-              <Loader className="text-documenso h-6 w-6 animate-spin" />
-            ) : (
-              <p>
-                <Trans>Something went wrong</Trans>
-              </p>
-            )}
-          </div>
-        )}
-
-        {data && selectedPrice && !isLoading && (
-          <div>
-            <Tabs
-              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-              onValueChange={(value) => setInterval(value as 'monthly' | 'yearly')}
-              value={interval}
-              className="mb-4"
-            >
-              <TabsList className="w-full">
-                {[data.monthly, data.yearly].map((price) => (
-                  <TabsTrigger key={price.priceId} className="w-full" value={price.interval}>
-                    {price.friendlyInterval}
-                  </TabsTrigger>
-                ))}
-              </TabsList>
-            </Tabs>
-
-            <AnimatePresence mode="wait">
-              <MotionCard
-                key={selectedPrice.priceId}
-                initial={{ opacity: 0, y: 15 }}
-                animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
-                exit={{ opacity: 0, transition: { duration: 0.15 } }}
-              >
-                <CardContent className="flex h-full flex-col p-6">
-                  {selectedPrice.interval === 'monthly' ? (
-                    <div className="text-muted-foreground text-lg font-medium">
-                      $50 USD <span className="text-xs">per month</span>
-                    </div>
-                  ) : (
-                    <div className="text-muted-foreground flex items-center justify-between text-lg font-medium">
-                      <span>
-                        $480 USD <span className="text-xs">per year</span>
-                      </span>
-                      <div className="bg-primary text-primary-foreground ml-2 inline-flex flex-row items-center justify-center rounded px-2 py-1 text-xs">
-                        <TagIcon className="mr-1 h-4 w-4" />
-                        20% off
-                      </div>
-                    </div>
-                  )}
-
-                  <div className="text-muted-foreground mt-1.5 text-sm">
-                    <p>
-                      <Trans>This price includes minimum 5 seats.</Trans>
-                    </p>
-
-                    <p className="mt-1">
-                      <Trans>Adding and removing seats will adjust your invoice accordingly.</Trans>
-                    </p>
-                  </div>
-                </CardContent>
-              </MotionCard>
-            </AnimatePresence>
-
-            <DialogFooter className="mt-4">
-              <Button
-                type="button"
-                variant="secondary"
-                disabled={isCreatingCheckout}
-                onClick={() => onClose()}
-              >
-                <Trans>Cancel</Trans>
-              </Button>
-
-              <Button
-                type="submit"
-                loading={isCreatingCheckout}
-                onClick={async () =>
-                  createCheckout({
-                    interval: selectedPrice.interval,
-                    pendingTeamId,
-                  })
-                }
-              >
-                <Trans>Checkout</Trans>
-              </Button>
-            </DialogFooter>
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -7,15 +7,18 @@ 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 { useNavigate } 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 { ZCreateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+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,
@@ -34,29 +37,37 @@ import {
   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 = ZCreateTeamMutationSchema.pick({
+const ZCreateTeamFormSchema = ZCreateTeamRequestSchema.pick({
   teamName: true,
   teamUrl: true,
+  inheritMembers: true,
 });
 
 type TCreateTeamFormSchema = z.infer<typeof ZCreateTeamFormSchema>;
 
-export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) => {
+export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { refreshSession } = useSession();
 
-  const navigate = useNavigate();
   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({
@@ -64,24 +75,25 @@ export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) =
     defaultValues: {
       teamName: '',
       teamUrl: '',
+      inheritMembers: true,
     },
   });
 
-  const { mutateAsync: createTeam } = trpc.team.createTeam.useMutation();
+  const { mutateAsync: createTeam } = trpc.team.create.useMutation();
 
-  const onFormSubmit = async ({ teamName, teamUrl }: TCreateTeamFormSchema) => {
+  const onFormSubmit = async ({ teamName, teamUrl, inheritMembers }: TCreateTeamFormSchema) => {
     try {
-      const response = await createTeam({
+      await createTeam({
+        organisationId: organisation.id,
         teamName,
         teamUrl,
+        inheritMembers,
       });
 
       setOpen(false);
 
-      if (response.paymentRequired) {
-        await navigate(`/settings/teams?tab=pending&checkout=${response.pendingTeamId}`);
-        return;
-      }
+      await onCreated?.();
+      await refreshSession();
 
       toast({
         title: _(msg`Success`),
@@ -114,6 +126,22 @@ export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) =
     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);
@@ -145,89 +173,141 @@ export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) =
             <Trans>Create team</Trans>
           </DialogTitle>
 
-          <DialogDescription className="mt-4">
+          <DialogDescription>
             <Trans>Create a team to collaborate with your team members.</Trans>
           </DialogDescription>
         </DialogHeader>
 
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset
-              className="flex h-full flex-col space-y-4"
-              disabled={form.formState.isSubmitting}
+        {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"
             >
-              <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);
+              <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>
 
-                          const urlField = form.getValues('teamUrl');
-                          if (urlField === oldGeneratedUrl) {
-                            form.setValue('teamUrl', newGeneratedUrl);
-                          }
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
 
-                          field.onChange(event);
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+        {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);
 
-              <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>
-                    )}
+                            const urlField = form.getValues('teamUrl');
+                            if (urlField === oldGeneratedUrl) {
+                              form.setValue('teamUrl', newGeneratedUrl);
+                            }
 
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+                            field.onChange(event);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
 
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                  <Trans>Cancel</Trans>
-                </Button>
+                <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>
+                      )}
 
-                <Button
-                  type="submit"
-                  data-testid="dialog-create-team-button"
-                  loading={form.formState.isSubmitting}
-                >
-                  <Trans>Create Team</Trans>
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
+                      <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

@@ -8,6 +8,7 @@ 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';
@@ -35,15 +36,22 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type TeamDeleteDialogProps = {
   teamId: number;
   teamName: string;
+  redirectTo?: string;
   trigger?: React.ReactNode;
 };
 
-export const TeamDeleteDialog = ({ trigger, teamId, teamName }: TeamDeleteDialogProps) => {
+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}`);
 
@@ -60,19 +68,23 @@ export const TeamDeleteDialog = ({ trigger, teamId, teamName }: TeamDeleteDialog
     },
   });
 
-  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,
       });
 
-      await navigate('/settings/teams');
+      if (redirectTo) {
+        await navigate(redirectTo);
+      }
 
       setOpen(false);
     } catch (err) {
@@ -113,7 +125,7 @@ export const TeamDeleteDialog = ({ trigger, teamId, teamName }: TeamDeleteDialog
       <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

@@ -61,12 +61,12 @@ export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDi
     },
   });
 
-  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,

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

@@ -48,7 +48,7 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
   const { revalidate } = useRevalidator();
 
   const { mutateAsync: deleteTeamEmail, isPending: isDeletingTeamEmail } =
-    trpc.team.deleteTeamEmail.useMutation({
+    trpc.team.email.delete.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -67,7 +67,7 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
     });
 
   const { mutateAsync: deleteTeamEmailVerification, isPending: isDeletingTeamEmailVerification } =
-    trpc.team.deleteTeamEmailVerification.useMutation({
+    trpc.team.email.verification.delete.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),

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

@@ -61,7 +61,7 @@ export const TeamEmailUpdateDialog = ({
     },
   });
 
-  const { mutateAsync: updateTeamEmail } = trpc.team.updateTeamEmail.useMutation();
+  const { mutateAsync: updateTeamEmail } = trpc.team.email.update.useMutation();
 
   const onFormSubmit = async ({ name }: TUpdateTeamEmailFormSchema) => {
     try {

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-leave-dialog.tsx

@@ -1,117 +0,0 @@
-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 { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
-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 TeamLeaveDialogProps = {
-  teamId: number;
-  teamName: string;
-  teamAvatarImageId?: string | null;
-  role: TeamMemberRole;
-  trigger?: React.ReactNode;
-};
-
-export const TeamLeaveDialog = ({
-  trigger,
-  teamId,
-  teamName,
-  teamAvatarImageId,
-  role,
-}: TeamLeaveDialogProps) => {
-  const [open, setOpen] = useState(false);
-
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: leaveTeam, isPending: isLeavingTeam } = trpc.team.leaveTeam.useMutation({
-    onSuccess: () => {
-      toast({
-        title: _(msg`Success`),
-        description: _(msg`You have successfully left this team.`),
-        duration: 5000,
-      });
-
-      setOpen(false);
-    },
-    onError: () => {
-      toast({
-        title: _(msg`An unknown error occurred`),
-        description: _(
-          msg`We encountered an unknown error while attempting to leave this team. Please try again later.`,
-        ),
-        variant: 'destructive',
-        duration: 10000,
-      });
-    },
-  });
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isLeavingTeam && setOpen(value)}>
-      <DialogTrigger asChild>
-        {trigger ?? (
-          <Button variant="destructive">
-            <Trans>Leave team</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 team.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Alert variant="neutral" padding="tight">
-          <AvatarWithText
-            avatarClass="h-12 w-12"
-            avatarSrc={formatAvatarUrl(teamAvatarImageId)}
-            avatarFallback={teamName.slice(0, 1).toUpperCase()}
-            primaryText={teamName}
-            secondaryText={_(TEAM_MEMBER_ROLE_MAP[role])}
-          />
-        </Alert>
-
-        <fieldset disabled={isLeavingTeam}>
-          <DialogFooter>
-            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-              <Trans>Cancel</Trans>
-            </Button>
-
-            <Button
-              type="submit"
-              variant="destructive"
-              loading={isLeavingTeam}
-              onClick={async () => leaveTeam({ teamId })}
-            >
-              <Trans>Leave</Trans>
-            </Button>
-          </DialogFooter>
-        </fieldset>
-      </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

@@ -22,9 +22,9 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type TeamMemberDeleteDialogProps = {
   teamId: number;
   teamName: string;
-  teamMemberId: number;
-  teamMemberName: string;
-  teamMemberEmail: string;
+  memberId: string;
+  memberName: string;
+  memberEmail: string;
   trigger?: React.ReactNode;
 };
 
@@ -32,17 +32,17 @@ export const TeamMemberDeleteDialog = ({
   trigger,
   teamId,
   teamName,
-  teamMemberId,
-  teamMemberName,
-  teamMemberEmail,
+  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`),
@@ -69,7 +69,7 @@ export const TeamMemberDeleteDialog = ({
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="secondary">
-            <Trans>Delete team member</Trans>
+            <Trans>Remove team member</Trans>
           </Button>
         )}
       </DialogTrigger>
@@ -91,9 +91,9 @@ export const TeamMemberDeleteDialog = ({
         <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>
 
@@ -107,9 +107,9 @@ export const TeamMemberDeleteDialog = ({
               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

@@ -43,9 +43,9 @@ 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({
@@ -58,9 +58,9 @@ export const TeamMemberUpdateDialog = ({
   currentUserTeamRole,
   trigger,
   teamId,
-  teamMemberId,
-  teamMemberName,
-  teamMemberRole,
+  memberId,
+  memberName,
+  memberTeamRole,
   ...props
 }: TeamMemberUpdateDialogProps) => {
   const [open, setOpen] = useState(false);
@@ -71,17 +71,17 @@ export const TeamMemberUpdateDialog = ({
   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,
         },
@@ -89,7 +89,7 @@ export const TeamMemberUpdateDialog = ({
 
       toast({
         title: _(msg`Success`),
-        description: _(msg`You have updated ${teamMemberName}.`),
+        description: _(msg`You have updated ${memberName}.`),
         duration: 5000,
       });
 
@@ -112,7 +112,7 @@ export const TeamMemberUpdateDialog = ({
 
     form.reset();
 
-    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, teamMemberRole)) {
+    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, memberTeamRole)) {
       setOpen(false);
 
       toast({
@@ -121,7 +121,7 @@ export const TeamMemberUpdateDialog = ({
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentUserTeamRole, teamMemberRole, form, toast]);
+  }, [open, currentUserTeamRole, memberTeamRole, form, toast]);
 
   return (
     <Dialog
@@ -143,9 +143,9 @@ export const TeamMemberUpdateDialog = ({
             <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/team-transfer-dialog.tsx

@@ -1,272 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { useRevalidator } from 'react-router';
-import { z } from 'zod';
-
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-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 { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type TeamTransferDialogProps = {
-  teamId: number;
-  teamName: string;
-  ownerUserId: number;
-  trigger?: React.ReactNode;
-};
-
-export const TeamTransferDialog = ({
-  trigger,
-  teamId,
-  teamName,
-  ownerUserId,
-}: TeamTransferDialogProps) => {
-  const [open, setOpen] = useState(false);
-
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { revalidate } = useRevalidator();
-
-  const { mutateAsync: requestTeamOwnershipTransfer } =
-    trpc.team.requestTeamOwnershipTransfer.useMutation();
-
-  const {
-    data,
-    refetch: refetchTeamMembers,
-    isPending: loadingTeamMembers,
-    isLoadingError: loadingTeamMembersError,
-  } = trpc.team.getTeamMembers.useQuery({
-    teamId,
-  });
-
-  const confirmTransferMessage = _(msg`transfer ${teamName}`);
-
-  const ZTransferTeamFormSchema = z.object({
-    teamName: z.literal(confirmTransferMessage, {
-      errorMap: () => ({ message: `You must enter '${confirmTransferMessage}' to proceed` }),
-    }),
-    newOwnerUserId: z.string(),
-    clearPaymentMethods: z.boolean(),
-  });
-
-  const form = useForm<z.infer<typeof ZTransferTeamFormSchema>>({
-    resolver: zodResolver(ZTransferTeamFormSchema),
-    defaultValues: {
-      teamName: '',
-      clearPaymentMethods: false,
-    },
-  });
-
-  const onFormSubmit = async ({
-    newOwnerUserId,
-    clearPaymentMethods,
-  }: z.infer<typeof ZTransferTeamFormSchema>) => {
-    try {
-      await requestTeamOwnershipTransfer({
-        teamId,
-        newOwnerUserId: Number.parseInt(newOwnerUserId),
-        clearPaymentMethods,
-      });
-
-      await revalidate();
-
-      toast({
-        title: _(msg`Success`),
-        description: _(msg`An email requesting the transfer of this team has been sent.`),
-        duration: 5000,
-      });
-
-      setOpen(false);
-    } catch (err) {
-      toast({
-        title: _(msg`An unknown error occurred`),
-        description: _(
-          msg`We encountered an unknown error while attempting to request a transfer of this team. Please try again later.`,
-        ),
-        variant: 'destructive',
-        duration: 10000,
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-    }
-  }, [open, form]);
-
-  useEffect(() => {
-    if (open && loadingTeamMembersError) {
-      void refetchTeamMembers();
-    }
-  }, [open, loadingTeamMembersError, refetchTeamMembers]);
-
-  const teamMembers = data
-    ? data.filter((teamMember) => teamMember.userId !== ownerUserId)
-    : undefined;
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
-      <DialogTrigger asChild>
-        {trigger ?? (
-          <Button variant="outline" className="bg-background">
-            <Trans>Transfer team</Trans>
-          </Button>
-        )}
-      </DialogTrigger>
-
-      {teamMembers && teamMembers.length > 0 ? (
-        <DialogContent position="center">
-          <DialogHeader>
-            <DialogTitle>
-              <Trans>Transfer team</Trans>
-            </DialogTitle>
-
-            <DialogDescription className="mt-4">
-              <Trans>Transfer ownership of this team to a selected team member.</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="newOwnerUserId"
-                  render={({ field }) => (
-                    <FormItem className="w-full">
-                      <FormLabel required>
-                        <Trans>New team owner</Trans>
-                      </FormLabel>
-                      <FormControl>
-                        <Select {...field} onValueChange={field.onChange}>
-                          <SelectTrigger className="text-muted-foreground">
-                            <SelectValue />
-                          </SelectTrigger>
-
-                          <SelectContent position="popper">
-                            {teamMembers.map((teamMember) => (
-                              <SelectItem
-                                key={teamMember.userId}
-                                value={teamMember.userId.toString()}
-                              >
-                                {teamMember.user.name} ({teamMember.user.email})
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="teamName"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        <Trans>
-                          Confirm by typing{' '}
-                          <span className="text-destructive">{confirmTransferMessage}</span>
-                        </Trans>
-                      </FormLabel>
-                      <FormControl>
-                        <Input className="bg-background" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <Alert variant="neutral">
-                  <AlertDescription>
-                    <ul className="list-outside list-disc space-y-2 pl-4">
-                      {IS_BILLING_ENABLED() && (
-                        <li>
-                          <Trans>
-                            Any payment methods attached to this team will remain attached to this
-                            team. Please contact us if you need to update this information.
-                          </Trans>
-                        </li>
-                      )}
-                      <li>
-                        <Trans>
-                          The selected team member will receive an email which they must accept
-                          before the team is transferred
-                        </Trans>
-                      </li>
-                    </ul>
-                  </AlertDescription>
-                </Alert>
-
-                <DialogFooter>
-                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                    <Trans>Cancel</Trans>
-                  </Button>
-
-                  <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
-                    <Trans>Request transfer</Trans>
-                  </Button>
-                </DialogFooter>
-              </fieldset>
-            </form>
-          </Form>
-        </DialogContent>
-      ) : (
-        <DialogContent
-          position="center"
-          className="text-muted-foreground flex items-center justify-center py-16 text-sm"
-        >
-          {loadingTeamMembers ? (
-            <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
-          ) : (
-            <p className="text-center text-sm">
-              {loadingTeamMembersError ? (
-                <Trans>An error occurred while loading team members. Please try again later.</Trans>
-              ) : (
-                <Trans>You must have at least one other team member to transfer ownership.</Trans>
-              )}
-            </p>
-          )}
-        </DialogContent>
-      )}
-    </Dialog>
-  );
-};

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

@@ -21,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),
@@ -46,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

@@ -24,7 +24,7 @@ import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type TemplateCreateDialogProps = {
-  teamId?: number;
+  teamId: number;
   templateRootPath: string;
 };
 

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

@@ -1,158 +0,0 @@
-import { useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { match } from 'ts-pattern';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { trpc } from '@documenso/trpc/react';
-import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-type TemplateMoveDialogProps = {
-  templateId: number;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-  onMove?: ({
-    templateId,
-    teamUrl,
-  }: {
-    templateId: number;
-    teamUrl: string;
-  }) => Promise<void> | void;
-};
-
-export const TemplateMoveDialog = ({
-  templateId,
-  open,
-  onOpenChange,
-  onMove,
-}: TemplateMoveDialogProps) => {
-  const { toast } = useToast();
-  const { _ } = useLingui();
-
-  const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
-
-  const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
-
-  const { mutateAsync: moveTemplate, isPending } = trpc.template.moveTemplateToTeam.useMutation({
-    onSuccess: async () => {
-      const team = teams?.find((team) => team.id === selectedTeamId);
-
-      if (team) {
-        await onMove?.({ templateId, teamUrl: team.url });
-      }
-
-      toast({
-        title: _(msg`Template moved`),
-        description: _(msg`The template has been successfully moved to the selected team.`),
-        duration: 5000,
-      });
-
-      onOpenChange(false);
-    },
-    onError: (err) => {
-      const error = AppError.parseError(err);
-
-      const errorMessage = match(error.code)
-        .with(
-          AppErrorCode.NOT_FOUND,
-          () => msg`Template not found or already associated with a team.`,
-        )
-        .with(AppErrorCode.UNAUTHORIZED, () => msg`You are not a member of this team.`)
-        .otherwise(() => msg`An error occurred while moving the template.`);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(errorMessage),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    },
-  });
-
-  const handleOnMove = async () => {
-    if (!selectedTeamId) {
-      return;
-    }
-
-    await moveTemplate({ templateId, teamId: selectedTeamId });
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Move Template to Team</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <Trans>Select a team to move this template to. This action cannot be undone.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
-          <SelectTrigger>
-            <SelectValue placeholder={_(msg`Select a team`)} />
-          </SelectTrigger>
-          <SelectContent>
-            {isLoadingTeams ? (
-              <SelectItem value="loading" disabled>
-                <Trans>Loading teams...</Trans>
-              </SelectItem>
-            ) : (
-              teams?.map((team) => (
-                <SelectItem key={team.id} value={team.id.toString()}>
-                  <div className="flex items-center gap-4">
-                    <Avatar className="h-8 w-8">
-                      {team.avatarImageId && (
-                        <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
-                      )}
-
-                      <AvatarFallback className="text-sm text-gray-400">
-                        {team.name.slice(0, 1).toUpperCase()}
-                      </AvatarFallback>
-                    </Avatar>
-
-                    <span>{team.name}</span>
-                  </div>
-                </SelectItem>
-              ))
-            )}
-          </SelectContent>
-        </Select>
-
-        <DialogFooter>
-          <Button variant="secondary" onClick={() => onOpenChange(false)}>
-            <Trans>Cancel</Trans>
-          </Button>
-          <Button
-            onClick={handleOnMove}
-            loading={isPending}
-            disabled={!selectedTeamId || isPending}
-          >
-            {isPending ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -30,7 +30,7 @@ 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 TokenDeleteDialogProps = {
   token: Pick<ApiToken, 'id' | 'name'>;
@@ -42,7 +42,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [isOpen, setIsOpen] = useState(false);
 

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

@@ -9,7 +9,7 @@ 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,
@@ -34,11 +34,11 @@ 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 { WebhookMultiSelectCombobox } from '../general/webhook-multiselect-combobox';
 
-const ZCreateWebhookFormSchema = ZCreateWebhookMutationSchema.omit({ teamId: true });
+const ZCreateWebhookFormSchema = ZCreateWebhookRequestSchema.omit({ teamId: true });
 
 type TCreateWebhookFormSchema = z.infer<typeof ZCreateWebhookFormSchema>;
 
@@ -50,7 +50,7 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [open, setOpen] = useState(false);
 
@@ -78,7 +78,7 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
         eventTriggers,
         secret,
         webhookUrl,
-        teamId: team?.id,
+        teamId: team.id,
       });
 
       setOpen(false);

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

@@ -30,7 +30,7 @@ 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 WebhookDeleteDialogProps = {
   webhook: Pick<Webhook, 'id' | 'webhookUrl'>;
@@ -42,7 +42,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [open, setOpen] = useState(false);
 
@@ -67,7 +67,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
 
   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`),

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

@@ -3,8 +3,8 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type DocumentData, type Field, FieldType } from '@prisma/client';
 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';
@@ -13,6 +13,10 @@ 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 { trpc } from '@documenso/trpc/react';
 import type {
@@ -21,12 +25,11 @@ 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 { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
-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 { BrandingLogo } from '~/components/general/branding-logo';
@@ -65,16 +68,8 @@ export const EmbedDirectTemplateClientPage = ({
 
   const [searchParams] = useSearchParams();
 
-  const {
-    fullName,
-    email,
-    signature,
-    signatureValid,
-    setFullName,
-    setEmail,
-    setSignature,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
+  const { fullName, email, signature, setFullName, setEmail, setSignature } =
+    useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
@@ -92,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),
   ];
 
@@ -110,7 +105,7 @@ export const EmbedDirectTemplateClientPage = ({
 
         const newField: DirectTemplateLocalField = structuredClone({
           ...field,
-          customText: payload.value,
+          customText: payload.value ?? '',
           inserted: true,
           signedValue: payload,
         });
@@ -121,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;
         }
 
@@ -180,7 +177,7 @@ export const EmbedDirectTemplateClientPage = ({
   };
 
   const onNextFieldClick = () => {
-    validateFieldsInserted(localFields);
+    validateFieldsInserted(pendingFields);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -188,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);
@@ -205,12 +198,6 @@ export const EmbedDirectTemplateClientPage = ({
         directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
       }
 
-      localFields.forEach((field) => {
-        if (!field.signedValue) {
-          throw new Error('Invalid configuration');
-        }
-      });
-
       const {
         documentId,
         token: documentToken,
@@ -221,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) {
@@ -347,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">
@@ -415,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>
 

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

@@ -10,7 +10,6 @@ export type EmbedDocumentCompletedPageProps = {
 };
 
 export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
-  console.log({ signature });
   return (
     <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">

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

@@ -54,6 +54,8 @@ export const EmbedDocumentFields = ({
               onSignField={onSignField}
               onUnsignField={onUnsignField}
               typedSignatureEnabled={metadata?.typedSignatureEnabled}
+              uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
+              drawSignatureEnabled={metadata?.drawSignatureEnabled}
             />
           ))
           .with(FieldType.INITIALS, () => (

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

@@ -1,4 +1,4 @@
-import { useEffect, useId, useLayoutEffect, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -15,18 +15,19 @@ 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 { 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 { 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 { BrandingLogo } from '~/components/general/branding-logo';
@@ -36,6 +37,7 @@ import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-sc
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { DocumentSigningRecipientProvider } from '../general/document-signing/document-signing-recipient-provider';
 import { DocumentSigningRejectDialog } from '../general/document-signing/document-signing-reject-dialog';
+import { DocumentReadOnlyFields } from '../general/document/document-read-only-fields';
 import { EmbedClientLoading } from './embed-client-loading';
 import { EmbedDocumentCompleted } from './embed-document-completed';
 import { EmbedDocumentFields } from './embed-document-fields';
@@ -47,6 +49,7 @@ export type EmbedSignDocumentClientPageProps = {
   documentData: DocumentData;
   recipient: RecipientWithFields;
   fields: Field[];
+  completedFields: DocumentField[];
   metadata?: DocumentMeta | TemplateMeta | null;
   isCompleted?: boolean;
   hidePoweredBy?: boolean;
@@ -60,6 +63,7 @@ export const EmbedSignDocumentClientPage = ({
   documentData,
   recipient,
   fields,
+  completedFields,
   metadata,
   isCompleted,
   hidePoweredBy = false,
@@ -69,15 +73,8 @@ export const EmbedSignDocumentClientPage = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const {
-    fullName,
-    email,
-    signature,
-    signatureValid,
-    setFullName,
-    setSignature,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
+  const { fullName, email, signature, setFullName, setSignature } =
+    useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
@@ -92,6 +89,8 @@ 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);
 
@@ -101,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);
@@ -121,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);
@@ -206,6 +208,7 @@ export const EmbedSignDocumentClientPage = ({
       // 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');
@@ -287,7 +290,7 @@ export const EmbedSignDocumentClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit 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="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
@@ -418,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>
@@ -467,9 +454,7 @@ export const EmbedSignDocumentClientPage = ({
                 ) : (
                   <Button
                     className={allowDocumentRejection ? 'col-start-2' : 'col-span-2'}
-                    disabled={
-                      isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
-                    }
+                    disabled={isThrottled}
                     loading={isSubmitting}
                     onClick={() => throttledOnCompleteClick()}
                   >
@@ -490,6 +475,9 @@ export const EmbedSignDocumentClientPage = ({
 
           {/* Fields */}
           <EmbedDocumentFields fields={fields} metadata={metadata} />
+
+          {/* Completed fields */}
+          <DocumentReadOnlyFields documentMeta={metadata || undefined} fields={completedFields} />
         </div>
 
         {!hidePoweredBy && (

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

@@ -6,10 +6,10 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { flushSync } from 'react-dom';
 import { useForm } from 'react-hook-form';
-import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
 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,7 +42,7 @@ export type TDisable2FAForm = z.infer<typeof ZDisable2FAForm>;
 export const DisableAuthenticatorAppDialog = () => {
   const { _ } = useLingui();
   const { toast } = useToast();
-  const { revalidate } = useRevalidator();
+  const { refreshSession } = useSession();
 
   const [isOpen, setIsOpen] = useState(false);
   const [twoFactorDisableMethod, setTwoFactorDisableMethod] = useState<'totp' | 'backup'>('totp');
@@ -92,7 +92,7 @@ export const DisableAuthenticatorAppDialog = () => {
         onCloseTwoFactorDisableDialog();
       });
 
-      await revalidate();
+      await refreshSession();
     } catch (_err) {
       toast({
         title: _(msg`Unable to disable two-factor authentication`),

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

@@ -5,12 +5,12 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
-import { useRevalidator } from 'react-router';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
 import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -48,7 +48,7 @@ export type EnableAuthenticatorAppDialogProps = {
 export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorAppDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-  const { revalidate } = useRevalidator();
+  const { refreshSession } = useSession();
 
   const [isOpen, setIsOpen] = useState(false);
   const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
@@ -74,6 +74,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     try {
       const data = await authClient.twoFactor.setup();
+      await refreshSession();
 
       setSetup2FAData(data);
     } catch (err) {
@@ -92,6 +93,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
   const onEnable2FAFormSubmit = async ({ token }: TEnable2FAForm) => {
     try {
       const data = await authClient.twoFactor.enable({ code: token });
+      await refreshSession();
 
       setRecoveryCodes(data.recoveryCodes);
       onSuccess?.();
@@ -139,7 +141,6 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
       setRecoveryCodes(null);
-      void revalidate();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -1,17 +1,14 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import type { Team, TeamGlobalSettings } from '@prisma/client';
+import type { TeamGlobalSettings } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
-import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -25,12 +22,11 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { Switch } from '@documenso/ui/primitives/switch';
 import { Textarea } from '@documenso/ui/primitives/textarea';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
 
-const ZTeamBrandingPreferencesFormSchema = z.object({
+const ZBrandingPreferencesFormSchema = z.object({
   brandingEnabled: z.boolean(),
   brandingLogo: z
     .instanceof(File)
@@ -44,74 +40,36 @@ const ZTeamBrandingPreferencesFormSchema = z.object({
   brandingCompanyDetails: z.string().max(500).optional(),
 });
 
-type TTeamBrandingPreferencesFormSchema = z.infer<typeof ZTeamBrandingPreferencesFormSchema>;
+export type TBrandingPreferencesFormSchema = z.infer<typeof ZBrandingPreferencesFormSchema>;
 
-export type TeamBrandingPreferencesFormProps = {
-  team: Team;
-  settings?: TeamGlobalSettings | null;
+type SettingsSubset = Pick<
+  TeamGlobalSettings,
+  'brandingEnabled' | 'brandingLogo' | 'brandingUrl' | 'brandingCompanyDetails'
+>;
+
+export type BrandingPreferencesFormProps = {
+  settings: SettingsSubset;
+  onFormSubmit: (data: TBrandingPreferencesFormSchema) => Promise<void>;
 };
 
-export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPreferencesFormProps) {
-  const { _ } = useLingui();
-  const { toast } = useToast();
+export function BrandingPreferencesForm({ settings, onFormSubmit }: BrandingPreferencesFormProps) {
+  const { t } = useLingui();
 
   const [previewUrl, setPreviewUrl] = useState<string>('');
   const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
 
-  const { mutateAsync: updateTeamBrandingSettings } =
-    trpc.team.updateTeamBrandingSettings.useMutation();
-
-  const form = useForm<TTeamBrandingPreferencesFormSchema>({
+  const form = useForm<TBrandingPreferencesFormSchema>({
     defaultValues: {
       brandingEnabled: settings?.brandingEnabled ?? false,
       brandingUrl: settings?.brandingUrl ?? '',
       brandingLogo: undefined,
       brandingCompanyDetails: settings?.brandingCompanyDetails ?? '',
     },
-    resolver: zodResolver(ZTeamBrandingPreferencesFormSchema),
+    resolver: zodResolver(ZBrandingPreferencesFormSchema),
   });
 
   const isBrandingEnabled = form.watch('brandingEnabled');
 
-  const onSubmit = async (data: TTeamBrandingPreferencesFormSchema) => {
-    try {
-      const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails } = data;
-
-      let uploadedBrandingLogo = settings?.brandingLogo;
-
-      if (brandingLogo) {
-        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
-      }
-
-      if (brandingLogo === null) {
-        uploadedBrandingLogo = '';
-      }
-
-      await updateTeamBrandingSettings({
-        teamId: team.id,
-        settings: {
-          brandingEnabled,
-          brandingLogo: uploadedBrandingLogo,
-          brandingUrl,
-          brandingCompanyDetails,
-        },
-      });
-
-      toast({
-        title: _(msg`Branding preferences updated`),
-        description: _(msg`Your branding preferences have been updated`),
-      });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(
-          msg`We were unable to update your branding preferences at this time, please try again later`,
-        ),
-        variant: 'destructive',
-      });
-    }
-  };
-
   useEffect(() => {
     if (settings?.brandingLogo) {
       const file = JSON.parse(settings.brandingLogo);
@@ -142,11 +100,8 @@ export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPref
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <fieldset
-          className="flex h-full max-w-xl flex-col gap-y-4"
-          disabled={form.formState.isSubmitting}
-        >
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset className="flex h-full flex-col gap-y-4" disabled={form.formState.isSubmitting}>
           <FormField
             control={form.control}
             name="brandingEnabled"
@@ -192,7 +147,8 @@ export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPref
                         />
                       ) : (
                         <div className="bg-muted/20 dark:bg-muted text-muted-foreground relative flex h-full w-full items-center justify-center text-sm">
-                          Please upload a logo
+                          <Trans>Please upload a logo</Trans>
+
                           {!hasLoadedPreview && (
                             <div className="bg-muted dark:bg-muted absolute inset-0 z-[999] flex items-center justify-center">
                               <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
@@ -291,7 +247,7 @@ export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPref
 
                   <FormControl>
                     <Textarea
-                      placeholder={_(msg`Enter your brand details`)}
+                      placeholder={t`Enter your brand details`}
                       className="min-h-[100px] resize-y"
                       disabled={!isBrandingEnabled}
                       {...field}
@@ -308,7 +264,7 @@ export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPref
 
           <div className="flex flex-row justify-end space-x-4">
             <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Save</Trans>
+              <Trans>Update</Trans>
             </Button>
           </div>
         </fieldset>

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

@@ -0,0 +1,363 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type { TeamGlobalSettings } from '@prisma/client';
+import { DocumentVisibility } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { DOCUMENT_SIGNATURE_TYPES, DocumentSignatureType } from '@documenso/lib/constants/document';
+import {
+  SUPPORTED_LANGUAGES,
+  SUPPORTED_LANGUAGE_CODES,
+  isValidLanguageCode,
+} from '@documenso/lib/constants/i18n';
+import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
+import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+/**
+ * Can't infer this from the schema since we need to keep the schema inside the component to allow
+ * it to be dynamic.
+ */
+export type TDocumentPreferencesFormSchema = {
+  documentVisibility: DocumentVisibility | null;
+  documentLanguage: (typeof SUPPORTED_LANGUAGE_CODES)[number] | null;
+  includeSenderDetails: boolean | null;
+  includeSigningCertificate: boolean | null;
+  signatureTypes: DocumentSignatureType[];
+};
+
+type SettingsSubset = Pick<
+  TeamGlobalSettings,
+  | 'documentVisibility'
+  | 'documentLanguage'
+  | 'includeSenderDetails'
+  | 'includeSigningCertificate'
+  | 'typedSignatureEnabled'
+  | 'uploadSignatureEnabled'
+  | 'drawSignatureEnabled'
+>;
+
+export type DocumentPreferencesFormProps = {
+  settings: SettingsSubset;
+  canInherit: boolean;
+  onFormSubmit: (data: TDocumentPreferencesFormSchema) => Promise<void>;
+};
+
+export const DocumentPreferencesForm = ({
+  settings,
+  onFormSubmit,
+  canInherit,
+}: DocumentPreferencesFormProps) => {
+  const { t } = useLingui();
+  const { user } = useSession();
+
+  const placeholderEmail = user.email ?? 'user@example.com';
+
+  const ZDocumentPreferencesFormSchema = z.object({
+    documentVisibility: z.nativeEnum(DocumentVisibility).nullable(),
+    documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES).nullable(),
+    includeSenderDetails: z.boolean().nullable(),
+    includeSigningCertificate: z.boolean().nullable(),
+    signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(canInherit ? 0 : 1, {
+      message: msg`At least one signature type must be enabled`.id,
+    }),
+  });
+
+  const form = useForm<TDocumentPreferencesFormSchema>({
+    defaultValues: {
+      documentVisibility: settings.documentVisibility,
+      documentLanguage: isValidLanguageCode(settings.documentLanguage)
+        ? settings.documentLanguage
+        : null,
+      includeSenderDetails: settings.includeSenderDetails,
+      includeSigningCertificate: settings.includeSigningCertificate,
+      signatureTypes: extractTeamSignatureSettings({ ...settings }),
+    },
+    resolver: zodResolver(ZDocumentPreferencesFormSchema),
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset
+          className="flex h-full max-w-2xl flex-col gap-y-6"
+          disabled={form.formState.isSubmitting}
+        >
+          <FormField
+            control={form.control}
+            name="documentVisibility"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Document Visibility</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value === null ? '-1' : field.value}
+                    onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                  >
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value={DocumentVisibility.EVERYONE}>
+                        <Trans>Everyone can access and view the document</Trans>
+                      </SelectItem>
+                      <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+                        <Trans>Only managers and above can access and view the document</Trans>
+                      </SelectItem>
+                      <SelectItem value={DocumentVisibility.ADMIN}>
+                        <Trans>Only admins can access and view the document</Trans>
+                      </SelectItem>
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>Controls the default visibility of an uploaded document.</Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="documentLanguage"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Document Language</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value === null ? '-1' : field.value}
+                    onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                  >
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
+                        <SelectItem key={code} value={code}>
+                          {language.full}
+                        </SelectItem>
+                      ))}
+
+                      <SelectItem value={'-1'}>
+                        <Trans>Inherit from organisation</Trans>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls the default language of an uploaded document. This will be used as the
+                    language in email communications with the recipients.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="signatureTypes"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel className="flex flex-row items-center">
+                  <Trans>Default Signature Settings</Trans>
+                  <DocumentSignatureSettingsTooltip />
+                </FormLabel>
+
+                <FormControl>
+                  <MultiSelectCombobox
+                    options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
+                      label: t(option.label),
+                      value: option.value,
+                    }))}
+                    selectedValues={field.value}
+                    onChange={field.onChange}
+                    className="bg-background w-full"
+                    enableSearch={false}
+                    emptySelectionPlaceholder={
+                      canInherit ? t`Inherit from organisation` : t`Select signature types`
+                    }
+                    testId="signature-types-combobox"
+                  />
+                </FormControl>
+
+                {form.formState.errors.signatureTypes ? (
+                  <FormMessage />
+                ) : (
+                  <FormDescription>
+                    <Trans>
+                      Controls which signatures are allowed to be used when signing a document.
+                    </Trans>
+                  </FormDescription>
+                )}
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="includeSenderDetails"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Send on Behalf of Team</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value === null ? '-1' : field.value.toString()}
+                    onValueChange={(value) =>
+                      field.onChange(value === 'true' ? true : value === 'false' ? false : null)
+                    }
+                  >
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value="true">
+                        <Trans>Yes</Trans>
+                      </SelectItem>
+
+                      <SelectItem value="false">
+                        <Trans>No</Trans>
+                      </SelectItem>
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <div className="pt-2">
+                  <div className="text-muted-foreground text-xs font-medium">
+                    <Trans>Preview</Trans>
+                  </div>
+
+                  <Alert variant="neutral" className="mt-1 px-2.5 py-1.5 text-sm">
+                    {field.value ? (
+                      <Trans>
+                        "{placeholderEmail}" on behalf of "Team Name" has invited you to sign
+                        "example document".
+                      </Trans>
+                    ) : (
+                      <Trans>"Team Name" has invited you to sign "example document".</Trans>
+                    )}
+                  </Alert>
+                </div>
+
+                <FormDescription>
+                  <Trans>
+                    Controls the formatting of the message that will be sent when inviting a
+                    recipient to sign a document. If a custom message has been provided while
+                    configuring the document, it will be used instead.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="includeSigningCertificate"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Include the Signing Certificate in the Document</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value === null ? '-1' : field.value.toString()}
+                    onValueChange={(value) =>
+                      field.onChange(value === 'true' ? true : value === 'false' ? false : null)
+                    }
+                  >
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value="true">
+                        <Trans>Yes</Trans>
+                      </SelectItem>
+
+                      <SelectItem value="false">
+                        <Trans>No</Trans>
+                      </SelectItem>
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls whether the signing certificate will be included in the document when
+                    it is downloaded. The signing certificate can still be downloaded from the logs
+                    page separately.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <Button type="submit" loading={form.formState.isSubmitting}>
+              <Trans>Update</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

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

@@ -0,0 +1,177 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import type { z } from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+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 { ZUpdateOrganisationRequestSchema } from '@documenso/trpc/server/organisation-router/update-organisation.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZOrganisationUpdateFormSchema = ZUpdateOrganisationRequestSchema.shape.data.pick({
+  name: true,
+  url: true,
+});
+
+type TOrganisationUpdateFormSchema = z.infer<typeof ZOrganisationUpdateFormSchema>;
+
+export const OrganisationUpdateForm = () => {
+  const navigate = useNavigate();
+  const organisation = useCurrentOrganisation();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const form = useForm({
+    resolver: zodResolver(ZOrganisationUpdateFormSchema),
+    defaultValues: {
+      name: organisation.name,
+      url: organisation.url,
+    },
+  });
+
+  const { mutateAsync: updateOrganisation } = trpc.organisation.update.useMutation();
+
+  const onFormSubmit = async ({ name, url }: TOrganisationUpdateFormSchema) => {
+    try {
+      await updateOrganisation({
+        data: {
+          name,
+          url,
+        },
+        organisationId: organisation.id,
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Your organisation has been successfully updated.`),
+        duration: 5000,
+      });
+
+      form.reset({
+        name,
+        url,
+      });
+
+      if (url !== organisation.url) {
+        await navigate(`/org/${url}/settings`);
+      }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('url', {
+          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 update your organisation. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel required>
+                  <Trans>Organisation Name</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="url"
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel required>
+                  <Trans>Organisation URL</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                {!form.formState.errors.url && (
+                  <span className="text-foreground/50 text-xs font-normal">
+                    {field.value ? (
+                      `${NEXT_PUBLIC_WEBAPP_URL()}/org/${field.value}`
+                    ) : (
+                      <Trans>A unique URL to identify your organisation</Trans>
+                    )}
+                  </span>
+                )}
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <AnimatePresence>
+              {form.formState.isDirty && (
+                <motion.div
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  exit={{
+                    opacity: 0,
+                  }}
+                >
+                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
+                    <Trans>Reset</Trans>
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <Button
+              type="submit"
+              className="transition-opacity"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting}
+            >
+              <Trans>Update organisation</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

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

@@ -19,12 +19,15 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-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';
 
 export const ZProfileFormSchema = z.object({
-  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
-  signature: z.string().min(1, 'Signature Pad cannot be empty'),
+  name: z
+    .string()
+    .trim()
+    .min(1, { message: msg`Please enter a valid name.`.id }),
+  signature: z.string().min(1, { message: msg`Signature Pad cannot be empty.`.id }),
 });
 
 export const ZTwoFactorAuthTokenSchema = z.object({
@@ -109,22 +112,20 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
             </Label>
             <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
           </div>
+
           <FormField
             control={form.control}
             name="signature"
-            render={({ field: { onChange } }) => (
+            render={({ field: { onChange, value } }) => (
               <FormItem>
                 <FormLabel>
                   <Trans>Signature</Trans>
                 </FormLabel>
                 <FormControl>
-                  <SignaturePad
-                    className="h-44 w-full"
+                  <SignaturePadDialog
                     disabled={isSubmitting}
-                    containerClassName={cn('rounded-lg border bg-background')}
-                    defaultValue={user.signature ?? undefined}
+                    value={value}
                     onChange={(v) => onChange(v ?? '')}
-                    allowTypedSignature={true}
                   />
                 </FormControl>
                 <FormMessage />
@@ -134,7 +135,7 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
         </fieldset>
 
         <Button type="submit" loading={isSubmitting} className="self-end">
-          {isSubmitting ? <Trans>Updating profile...</Trans> : <Trans>Update profile</Trans>}
+          <Trans>Update profile</Trans>
         </Button>
       </form>
     </Form>

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

@@ -16,8 +16,8 @@ import { AppError } from '@documenso/lib/errors/app-error';
 import { formatUserProfilePath } from '@documenso/lib/utils/public-profiles';
 import {
   MAX_PROFILE_BIO_LENGTH,
-  ZUpdatePublicProfileMutationSchema,
-} from '@documenso/trpc/server/profile-router/schema';
+  ZUpdateTeamPublicProfileMutationSchema,
+} from '@documenso/trpc/server/team-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -32,7 +32,7 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export const ZPublicProfileFormSchema = ZUpdatePublicProfileMutationSchema.pick({
+export const ZPublicProfileFormSchema = ZUpdateTeamPublicProfileMutationSchema.pick({
   bio: true,
   enabled: true,
   url: true,
@@ -43,7 +43,7 @@ export type TPublicProfileFormSchema = z.infer<typeof ZPublicProfileFormSchema>;
 export type PublicProfileFormProps = {
   className?: string;
   profileUrl?: string | null;
-  teamUrl?: string;
+  teamUrl: string;
   onProfileUpdate: (data: TPublicProfileFormSchema) => Promise<unknown>;
   profile: UserProfile | TeamProfile;
 };

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

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

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

@@ -1,11 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { AnimatePresence, motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
@@ -15,7 +14,6 @@ import { z } from 'zod';
 import communityCardsImage from '@documenso/assets/images/community-cards.png';
 import { authClient } from '@documenso/auth/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
@@ -30,14 +28,11 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { PasswordInput } from '@documenso/ui/primitives/password-input';
-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 { UserProfileSkeleton } from '~/components/general/user-profile-skeleton';
 import { UserProfileTimur } from '~/components/general/user-profile-timur';
 
-type SignUpStep = 'BASIC_DETAILS' | 'CLAIM_USERNAME';
-
 export const ZSignUpFormSchema = z
   .object({
     name: z
@@ -47,14 +42,6 @@ export const ZSignUpFormSchema = z
     email: z.string().email().min(1),
     password: ZPasswordSchema,
     signature: z.string().min(1, { message: msg`We need your signature to sign documents`.id }),
-    url: z
-      .string()
-      .trim()
-      .toLowerCase()
-      .min(1, { message: msg`We need a username to create your profile`.id })
-      .regex(/^[a-z0-9-]+$/, {
-        message: msg`Username can only container alphanumeric characters and dashes.`.id,
-      }),
   })
   .refine(
     (data) => {
@@ -71,8 +58,6 @@ export const signupErrorMessages: Record<string, MessageDescriptor> = {
   SIGNUP_DISABLED: msg`Signups are disabled.`,
   [AppErrorCode.ALREADY_EXISTS]: msg`User with this email already exists. Please use a different email address.`,
   [AppErrorCode.INVALID_REQUEST]: msg`We were unable to create your account. Please review the information you provided and try again.`,
-  PROFILE_URL_TAKEN: msg`This username has already been taken`,
-  PREMIUM_PROFILE_URL: msg`Only subscribers can have a username shorter than 6 characters`,
 };
 
 export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
@@ -97,19 +82,14 @@ export const SignUpForm = ({
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
-  const [step, setStep] = useState<SignUpStep>('BASIC_DETAILS');
-
   const utmSrc = searchParams.get('utm_source') ?? null;
 
-  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
-
   const form = useForm<TSignUpFormSchema>({
     values: {
       name: '',
       email: initialEmail ?? '',
       password: '',
       signature: '',
-      url: '',
     },
     mode: 'onBlur',
     resolver: zodResolver(ZSignUpFormSchema),
@@ -117,17 +97,13 @@ export const SignUpForm = ({
 
   const isSubmitting = form.formState.isSubmitting;
 
-  const name = form.watch('name');
-  const url = form.watch('url');
-
-  const onFormSubmit = async ({ name, email, password, signature, url }: TSignUpFormSchema) => {
+  const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
     try {
       await authClient.emailPassword.signUp({
         name,
         email,
         password,
         signature,
-        url,
       });
 
       await navigate(`/unverified-account`);
@@ -150,26 +126,11 @@ export const SignUpForm = ({
 
       const errorMessage = signupErrorMessages[error.code] ?? signupErrorMessages.INVALID_REQUEST;
 
-      if (error.code === 'PROFILE_URL_TAKEN' || error.code === 'PREMIUM_PROFILE_URL') {
-        form.setError('url', {
-          type: 'manual',
-          message: _(errorMessage),
-        });
-      } else {
-        toast({
-          title: _(msg`An error occurred`),
-          description: _(errorMessage),
-          variant: 'destructive',
-        });
-      }
-    }
-  };
-
-  const onNextClick = async () => {
-    const valid = await form.trigger(['name', 'email', 'password', 'signature']);
-
-    if (valid) {
-      setStep('CLAIM_USERNAME');
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
     }
   };
 
@@ -231,59 +192,30 @@ export const SignUpForm = ({
             <Trans>User profiles are here!</Trans>
           </div>
 
-          <AnimatePresence>
-            {step === 'BASIC_DETAILS' ? (
-              <motion.div className="w-full max-w-md" layoutId="user-profile">
-                <UserProfileTimur
-                  rows={2}
-                  className="bg-background border-border rounded-2xl border shadow-md"
-                />
-              </motion.div>
-            ) : (
-              <motion.div className="w-full max-w-md" layoutId="user-profile">
-                <UserProfileSkeleton
-                  user={{ name, url }}
-                  rows={2}
-                  className="bg-background border-border rounded-2xl border shadow-md"
-                />
-              </motion.div>
-            )}
-          </AnimatePresence>
+          <div className="w-full max-w-md">
+            <UserProfileTimur
+              rows={2}
+              className="bg-background border-border rounded-2xl border shadow-md"
+            />
+          </div>
 
           <div />
         </div>
       </div>
 
       <div className="border-border dark:bg-background relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
-        {step === 'BASIC_DETAILS' && (
-          <div className="h-20">
-            <h1 className="text-xl font-semibold md:text-2xl">
-              <Trans>Create a new account</Trans>
-            </h1>
+        <div className="h-20">
+          <h1 className="text-xl font-semibold md:text-2xl">
+            <Trans>Create a new account</Trans>
+          </h1>
 
-            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
-              <Trans>
-                Create your account and start using state-of-the-art document signing. Open and
-                beautiful signing is within your grasp.
-              </Trans>
-            </p>
-          </div>
-        )}
-
-        {step === 'CLAIM_USERNAME' && (
-          <div className="h-20">
-            <h1 className="text-xl font-semibold md:text-2xl">
-              <Trans>Claim your username now</Trans>
-            </h1>
-
-            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
-              <Trans>
-                You will get notified & be able to set up your documenso public profile when we
-                launch the feature.
-              </Trans>
-            </p>
-          </div>
-        )}
+          <p className="text-muted-foreground mt-2 text-xs md:text-sm">
+            <Trans>
+              Create your account and start using state-of-the-art document signing. Open and
+              beautiful signing is within your grasp.
+            </Trans>
+          </p>
+        </div>
 
         <hr className="-mx-6 my-4" />
 
@@ -292,245 +224,170 @@ export const SignUpForm = ({
             className="flex w-full flex-1 flex-col gap-y-4"
             onSubmit={form.handleSubmit(onFormSubmit)}
           >
-            {step === 'BASIC_DETAILS' && (
-              <fieldset
-                className={cn(
-                  'flex h-[550px] w-full flex-col gap-y-4',
-                  (isGoogleSSOEnabled || isOIDCSSOEnabled) && 'h-[650px]',
+            <fieldset
+              className={cn(
+                'flex h-[550px] w-full flex-col gap-y-4',
+                (isGoogleSSOEnabled || isOIDCSSOEnabled) && 'h-[650px]',
+              )}
+              disabled={isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Full Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
-                disabled={isSubmitting}
-              >
-                <FormField
-                  control={form.control}
-                  name="name"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        <Trans>Full Name</Trans>
-                      </FormLabel>
-                      <FormControl>
-                        <Input type="text" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
+              />
 
-                <FormField
-                  control={form.control}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        <Trans>Email Address</Trans>
-                      </FormLabel>
-                      <FormControl>
-                        <Input type="email" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="password"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        <Trans>Password</Trans>
-                      </FormLabel>
-
-                      <FormControl>
-                        <PasswordInput {...field} />
-                      </FormControl>
-
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="signature"
-                  render={({ field: { onChange } }) => (
-                    <FormItem>
-                      <FormLabel>
-                        <Trans>Sign Here</Trans>
-                      </FormLabel>
-                      <FormControl>
-                        <SignaturePad
-                          className="h-36 w-full"
-                          disabled={isSubmitting}
-                          containerClassName="mt-2 rounded-lg border bg-background"
-                          onChange={(v) => onChange(v ?? '')}
-                        />
-                      </FormControl>
-
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                {(isGoogleSSOEnabled || isOIDCSSOEnabled) && (
-                  <>
-                    <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
-                      <div className="bg-border h-px flex-1" />
-                      <span className="text-muted-foreground bg-transparent">
-                        <Trans>Or</Trans>
-                      </span>
-                      <div className="bg-border h-px flex-1" />
-                    </div>
-                  </>
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Email Address</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input type="email" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
+              />
 
-                {isGoogleSSOEnabled && (
-                  <>
-                    <Button
-                      type="button"
-                      size="lg"
-                      variant={'outline'}
-                      className="bg-background text-muted-foreground border"
-                      disabled={isSubmitting}
-                      onClick={onSignUpWithGoogleClick}
-                    >
-                      <FcGoogle className="mr-2 h-5 w-5" />
-                      <Trans>Sign Up with Google</Trans>
-                    </Button>
-                  </>
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Password</Trans>
+                    </FormLabel>
+
+                    <FormControl>
+                      <PasswordInput {...field} />
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
                 )}
+              />
 
-                {isOIDCSSOEnabled && (
-                  <>
-                    <Button
-                      type="button"
-                      size="lg"
-                      variant={'outline'}
-                      className="bg-background text-muted-foreground border"
-                      disabled={isSubmitting}
-                      onClick={onSignUpWithOIDCClick}
-                    >
-                      <FaIdCardClip className="mr-2 h-5 w-5" />
-                      <Trans>Sign Up with OIDC</Trans>
-                    </Button>
-                  </>
+              <FormField
+                control={form.control}
+                name="signature"
+                render={({ field: { onChange, value } }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Sign Here</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <SignaturePadDialog
+                        disabled={isSubmitting}
+                        value={value}
+                        onChange={(v) => onChange(v ?? '')}
+                      />
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
                 )}
+              />
 
-                <p className="text-muted-foreground mt-4 text-sm">
-                  <Trans>
-                    Already have an account?{' '}
-                    <Link to="/signin" className="text-documenso-700 duration-200 hover:opacity-70">
-                      Sign in instead
-                    </Link>
-                  </Trans>
-                </p>
-              </fieldset>
-            )}
-
-            {step === 'CLAIM_USERNAME' && (
-              <fieldset
-                className={cn(
-                  'flex h-[550px] w-full flex-col gap-y-4',
-                  isGoogleSSOEnabled && 'h-[650px]',
-                )}
-                disabled={isSubmitting}
-              >
-                <FormField
-                  control={form.control}
-                  name="url"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        <Trans>Public profile username</Trans>
-                      </FormLabel>
-
-                      <FormControl>
-                        <Input type="text" className="mb-2 mt-2 lowercase" {...field} />
-                      </FormControl>
-
-                      <FormMessage />
-
-                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block max-w-[16rem] truncate rounded-md border px-2 py-1 text-sm lowercase">
-                        {baseUrl.host}/u/{field.value || '<username>'}
-                      </div>
-                    </FormItem>
-                  )}
-                />
-              </fieldset>
-            )}
-
-            <div className="mt-6">
-              {step === 'BASIC_DETAILS' && (
-                <p className="text-muted-foreground text-sm">
-                  <span className="font-medium">
-                    <Trans>Basic details</Trans>
-                  </span>{' '}
-                  1/2
-                </p>
+              {(isGoogleSSOEnabled || isOIDCSSOEnabled) && (
+                <>
+                  <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+                    <div className="bg-border h-px flex-1" />
+                    <span className="text-muted-foreground bg-transparent">
+                      <Trans>Or</Trans>
+                    </span>
+                    <div className="bg-border h-px flex-1" />
+                  </div>
+                </>
               )}
 
-              {step === 'CLAIM_USERNAME' && (
-                <p className="text-muted-foreground text-sm">
-                  <span className="font-medium">
-                    <Trans>Claim username</Trans>
-                  </span>{' '}
-                  2/2
-                </p>
+              {isGoogleSSOEnabled && (
+                <>
+                  <Button
+                    type="button"
+                    size="lg"
+                    variant={'outline'}
+                    className="bg-background text-muted-foreground border"
+                    disabled={isSubmitting}
+                    onClick={onSignUpWithGoogleClick}
+                  >
+                    <FcGoogle className="mr-2 h-5 w-5" />
+                    <Trans>Sign Up with Google</Trans>
+                  </Button>
+                </>
               )}
 
-              <div className="bg-foreground/40 relative mt-4 h-1.5 rounded-full">
-                <motion.div
-                  layout="size"
-                  layoutId="document-flow-container-step"
-                  className="bg-documenso absolute inset-y-0 left-0 rounded-full"
-                  style={{
-                    width: step === 'BASIC_DETAILS' ? '50%' : '100%',
-                  }}
-                />
-              </div>
-            </div>
-
-            <div className="flex items-center gap-x-4">
-              {/* Go back button, disabled if step is basic details */}
-              <Button
-                type="button"
-                size="lg"
-                variant="secondary"
-                className="flex-1"
-                disabled={step === 'BASIC_DETAILS' || form.formState.isSubmitting}
-                onClick={() => setStep('BASIC_DETAILS')}
-              >
-                <Trans>Back</Trans>
-              </Button>
-
-              {/* Continue button */}
-              {step === 'BASIC_DETAILS' && (
-                <Button
-                  type="button"
-                  size="lg"
-                  className="flex-1 disabled:cursor-not-allowed"
-                  loading={form.formState.isSubmitting}
-                  onClick={onNextClick}
-                >
-                  <Trans>Next</Trans>
-                </Button>
+              {isOIDCSSOEnabled && (
+                <>
+                  <Button
+                    type="button"
+                    size="lg"
+                    variant={'outline'}
+                    className="bg-background text-muted-foreground border"
+                    disabled={isSubmitting}
+                    onClick={onSignUpWithOIDCClick}
+                  >
+                    <FaIdCardClip className="mr-2 h-5 w-5" />
+                    <Trans>Sign Up with OIDC</Trans>
+                  </Button>
+                </>
               )}
 
-              {/* Sign up button */}
-              {step === 'CLAIM_USERNAME' && (
-                <Button
-                  loading={form.formState.isSubmitting}
-                  disabled={!form.formState.isValid}
-                  type="submit"
-                  size="lg"
-                  className="flex-1"
-                >
-                  <Trans>Complete</Trans>
-                </Button>
-              )}
-            </div>
+              <p className="text-muted-foreground mt-4 text-sm">
+                <Trans>
+                  Already have an account?{' '}
+                  <Link to="/signin" className="text-documenso-700 duration-200 hover:opacity-70">
+                    Sign in instead
+                  </Link>
+                </Trans>
+              </p>
+            </fieldset>
+
+            <Button
+              loading={form.formState.isSubmitting}
+              disabled={!form.formState.isValid}
+              type="submit"
+              size="lg"
+              className="mt-6 w-full"
+            >
+              <Trans>Complete</Trans>
+            </Button>
           </form>
         </Form>
+        <p className="text-muted-foreground mt-6 text-xs">
+          <Trans>
+            By proceeding, you agree to our{' '}
+            <Link
+              to="https://documen.so/terms"
+              target="_blank"
+              className="text-documenso-700 duration-200 hover:opacity-70"
+            >
+              Terms of Service
+            </Link>{' '}
+            and{' '}
+            <Link
+              to="https://documen.so/privacy"
+              target="_blank"
+              className="text-documenso-700 duration-200 hover:opacity-70"
+            >
+              Privacy Policy
+            </Link>
+            .
+          </Trans>
+        </p>
       </div>
     </div>
   );

apps/remix/app/components/forms/subscription-claim-form.tsx

@@ -0,0 +1,155 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import type { SubscriptionClaim } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
+import { ZCreateSubscriptionClaimRequestSchema } from '@documenso/trpc/server/admin-router/create-subscription-claim.types';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+export type SubscriptionClaimFormValues = z.infer<typeof ZCreateSubscriptionClaimRequestSchema>;
+
+type SubscriptionClaimFormProps = {
+  subscriptionClaim: Omit<SubscriptionClaim, 'id' | 'createdAt' | 'updatedAt'>;
+  onFormSubmit: (data: SubscriptionClaimFormValues) => Promise<void>;
+  formSubmitTrigger?: React.ReactNode;
+};
+
+export const SubscriptionClaimForm = ({
+  subscriptionClaim,
+  onFormSubmit,
+  formSubmitTrigger,
+}: SubscriptionClaimFormProps) => {
+  const { t } = useLingui();
+
+  const form = useForm<SubscriptionClaimFormValues>({
+    resolver: zodResolver(ZCreateSubscriptionClaimRequestSchema),
+    defaultValues: {
+      name: subscriptionClaim.name,
+      teamCount: subscriptionClaim.teamCount,
+      memberCount: subscriptionClaim.memberCount,
+      flags: subscriptionClaim.flags,
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Name</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input placeholder={t`Enter claim name`} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="teamCount"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Team Count</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    min={0}
+                    {...field}
+                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                  />
+                </FormControl>
+                <FormDescription>
+                  <Trans>Number of teams allowed. 0 = Unlimited</Trans>
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="memberCount"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Member Count</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    min={0}
+                    {...field}
+                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                  />
+                </FormControl>
+                <FormDescription>
+                  <Trans>Number of members allowed. 0 = Unlimited</Trans>
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div>
+            <FormLabel>
+              <Trans>Feature Flags</Trans>
+            </FormLabel>
+
+            <div className="mt-2 space-y-2 rounded-md border p-4">
+              {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(({ key, label }) => (
+                <FormField
+                  key={key}
+                  control={form.control}
+                  name={`flags.${key}`}
+                  render={({ field }) => (
+                    <FormItem className="flex items-center space-x-2">
+                      <FormControl>
+                        <div className="flex items-center">
+                          <Checkbox
+                            id={`flag-${key}`}
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+
+                          <label
+                            className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
+                            htmlFor={`flag-${key}`}
+                          >
+                            {label}
+                          </label>
+                        </div>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              ))}
+            </div>
+          </div>
+
+          {formSubmitTrigger}
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

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

@@ -1,311 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { Team, TeamGlobalSettings } from '@prisma/client';
-import { DocumentVisibility } from '@prisma/client';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import {
-  SUPPORTED_LANGUAGES,
-  SUPPORTED_LANGUAGE_CODES,
-  isValidLanguageCode,
-} from '@documenso/lib/constants/i18n';
-import { trpc } from '@documenso/trpc/react';
-import { Alert } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '@documenso/ui/primitives/form/form';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { Switch } from '@documenso/ui/primitives/switch';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-const ZTeamDocumentPreferencesFormSchema = z.object({
-  documentVisibility: z.nativeEnum(DocumentVisibility),
-  documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES),
-  includeSenderDetails: z.boolean(),
-  typedSignatureEnabled: z.boolean(),
-  includeSigningCertificate: z.boolean(),
-});
-
-type TTeamDocumentPreferencesFormSchema = z.infer<typeof ZTeamDocumentPreferencesFormSchema>;
-
-export type TeamDocumentPreferencesFormProps = {
-  team: Team;
-  settings?: TeamGlobalSettings | null;
-};
-
-export const TeamDocumentPreferencesForm = ({
-  team,
-  settings,
-}: TeamDocumentPreferencesFormProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { user } = useSession();
-
-  const placeholderEmail = user.email ?? 'user@example.com';
-
-  const { mutateAsync: updateTeamDocumentPreferences } =
-    trpc.team.updateTeamDocumentSettings.useMutation();
-
-  const form = useForm<TTeamDocumentPreferencesFormSchema>({
-    defaultValues: {
-      documentVisibility: settings?.documentVisibility ?? 'EVERYONE',
-      documentLanguage: isValidLanguageCode(settings?.documentLanguage)
-        ? settings?.documentLanguage
-        : 'en',
-      includeSenderDetails: settings?.includeSenderDetails ?? false,
-      typedSignatureEnabled: settings?.typedSignatureEnabled ?? true,
-      includeSigningCertificate: settings?.includeSigningCertificate ?? true,
-    },
-    resolver: zodResolver(ZTeamDocumentPreferencesFormSchema),
-  });
-
-  const includeSenderDetails = form.watch('includeSenderDetails');
-
-  const onSubmit = async (data: TTeamDocumentPreferencesFormSchema) => {
-    try {
-      const {
-        documentVisibility,
-        documentLanguage,
-        includeSenderDetails,
-        includeSigningCertificate,
-        typedSignatureEnabled,
-      } = data;
-
-      await updateTeamDocumentPreferences({
-        teamId: team.id,
-        settings: {
-          documentVisibility,
-          documentLanguage,
-          includeSenderDetails,
-          typedSignatureEnabled,
-          includeSigningCertificate,
-        },
-      });
-
-      toast({
-        title: _(msg`Document preferences updated`),
-        description: _(msg`Your document preferences have been updated`),
-      });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong!`),
-        description: _(
-          msg`We were unable to update your document preferences at this time, please try again later`,
-        ),
-      });
-    }
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <fieldset
-          className="flex h-full max-w-xl flex-col gap-y-6"
-          disabled={form.formState.isSubmitting}
-        >
-          <FormField
-            control={form.control}
-            name="documentVisibility"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Default Document Visibility</Trans>
-                </FormLabel>
-
-                <FormControl>
-                  <Select {...field} onValueChange={field.onChange}>
-                    <SelectTrigger className="bg-background text-muted-foreground">
-                      <SelectValue />
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectItem value={DocumentVisibility.EVERYONE}>
-                        <Trans>Everyone can access and view the document</Trans>
-                      </SelectItem>
-                      <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
-                        <Trans>Only managers and above can access and view the document</Trans>
-                      </SelectItem>
-                      <SelectItem value={DocumentVisibility.ADMIN}>
-                        <Trans>Only admins can access and view the document</Trans>
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-
-                <FormDescription>
-                  <Trans>Controls the default visibility of an uploaded document.</Trans>
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="documentLanguage"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Default Document Language</Trans>
-                </FormLabel>
-
-                <FormControl>
-                  <Select {...field} onValueChange={field.onChange}>
-                    <SelectTrigger className="bg-background text-muted-foreground">
-                      <SelectValue />
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
-                        <SelectItem key={code} value={code}>
-                          {language.full}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-
-                <FormDescription>
-                  <Trans>
-                    Controls the default language of an uploaded document. This will be used as the
-                    language in email communications with the recipients.
-                  </Trans>
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="includeSenderDetails"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Send on Behalf of Team</Trans>
-                </FormLabel>
-
-                <div>
-                  <FormControl className="block">
-                    <Switch
-                      ref={field.ref}
-                      name={field.name}
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </div>
-
-                <div className="pt-2">
-                  <div className="text-muted-foreground text-xs font-medium">
-                    <Trans>Preview</Trans>
-                  </div>
-
-                  <Alert variant="neutral" className="mt-1 px-2.5 py-1.5 text-sm">
-                    {includeSenderDetails ? (
-                      <Trans>
-                        "{placeholderEmail}" on behalf of "{team.name}" has invited you to sign
-                        "example document".
-                      </Trans>
-                    ) : (
-                      <Trans>"{team.name}" has invited you to sign "example document".</Trans>
-                    )}
-                  </Alert>
-                </div>
-
-                <FormDescription>
-                  <Trans>
-                    Controls the formatting of the message that will be sent when inviting a
-                    recipient to sign a document. If a custom message has been provided while
-                    configuring the document, it will be used instead.
-                  </Trans>
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="typedSignatureEnabled"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Enable Typed Signature</Trans>
-                </FormLabel>
-
-                <div>
-                  <FormControl className="block">
-                    <Switch
-                      ref={field.ref}
-                      name={field.name}
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </div>
-
-                <FormDescription>
-                  <Trans>
-                    Controls whether the recipients can sign the documents using a typed signature.
-                    Enable or disable the typed signature globally.
-                  </Trans>
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="includeSigningCertificate"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Include the Signing Certificate in the Document</Trans>
-                </FormLabel>
-
-                <div>
-                  <FormControl className="block">
-                    <Switch
-                      ref={field.ref}
-                      name={field.name}
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </div>
-
-                <FormDescription>
-                  <Trans>
-                    Controls whether the signing certificate will be included in the document when
-                    it is downloaded. The signing certificate can still be downloaded from the logs
-                    page separately.
-                  </Trans>
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-
-          <div className="flex flex-row justify-end space-x-4">
-            <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Save</Trans>
-            </Button>
-          </div>
-        </fieldset>
-      </form>
-    </Form>
-  );
-};

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

@@ -10,7 +10,7 @@ import type { z } from 'zod';
 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 { ZUpdateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { ZUpdateTeamRequestSchema } from '@documenso/trpc/server/team-router/update-team.types';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
@@ -29,7 +29,7 @@ export type UpdateTeamDialogProps = {
   teamUrl: string;
 };
 
-const ZTeamUpdateFormSchema = ZUpdateTeamMutationSchema.shape.data.pick({
+const ZTeamUpdateFormSchema = ZUpdateTeamRequestSchema.shape.data.pick({
   name: true,
   url: true,
 });
@@ -49,7 +49,7 @@ export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
     },
   });
 
-  const { mutateAsync: updateTeam } = trpc.team.updateTeam.useMutation();
+  const { mutateAsync: updateTeam } = trpc.team.update.useMutation();
 
   const onFormSubmit = async ({ name, url }: TTeamUpdateFormSchema) => {
     try {

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

@@ -1,10 +1,8 @@
 import { type HTMLAttributes, useEffect, useState } from 'react';
 
 import { MenuIcon, SearchIcon } from 'lucide-react';
-import { Link, useLocation, useParams } from 'react-router';
+import { Link, useParams } from 'react-router';
 
-import type { SessionUser } from '@documenso/auth/server/lib/session/session';
-import type { TGetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
 import { getRootHref } from '@documenso/lib/utils/params';
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -15,14 +13,10 @@ import { AppNavDesktop } from './app-nav-desktop';
 import { AppNavMobile } from './app-nav-mobile';
 import { MenuSwitcher } from './menu-switcher';
 
-export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
-  user: SessionUser;
-  teams: TGetTeamsResponse;
-};
+export type HeaderProps = HTMLAttributes<HTMLDivElement>;
 
-export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
+export const Header = ({ className, ...props }: HeaderProps) => {
   const params = useParams();
-  const { pathname } = useLocation();
 
   const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
@@ -38,16 +32,6 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
     return () => window.removeEventListener('scroll', onScroll);
   }, []);
 
-  const isPathTeamUrl = (teamUrl: string) => {
-    if (!pathname || !pathname.startsWith(`/t/`)) {
-      return false;
-    }
-
-    return pathname.split('/')[2] === teamUrl;
-  };
-
-  const selectedTeam = teams?.find((team) => isPathTeamUrl(team.url));
-
   return (
     <header
       className={cn(
@@ -59,7 +43,7 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
     >
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
         <Link
-          to={`${getRootHref(params, { returnEmptyRootString: true })}/documents`}
+          to={`${getRootHref(params, { returnEmptyRootString: true })}`}
           className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
         >
           <BrandingLogo className="h-6 w-auto" />
@@ -67,11 +51,8 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
 
         <AppNavDesktop setIsCommandMenuOpen={setIsCommandMenuOpen} />
 
-        <div
-          className="flex gap-x-4 md:ml-8"
-          title={selectedTeam ? selectedTeam.name : (user.name ?? '')}
-        >
-          <MenuSwitcher user={user} teams={teams} />
+        <div className="flex gap-x-4 md:ml-8">
+          <MenuSwitcher />
         </div>
 
         <div className="flex flex-row items-center space-x-4 md:hidden">

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

@@ -4,6 +4,8 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { motion } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 import { Search } from 'lucide-react';
 import { Link, useLocation, useParams } from 'react-router';
 
@@ -55,28 +57,39 @@ export const AppNavDesktop = ({
       )}
       {...props}
     >
-      <div className="flex items-baseline gap-x-6">
-        {navigationLinks.map(({ href, label }) => (
-          <Link
-            key={href}
-            to={`${rootHref}${href}`}
-            className={cn(
-              'text-muted-foreground dark:text-muted-foreground/60 focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-              {
-                'text-foreground dark:text-muted-foreground': pathname?.startsWith(
-                  `${rootHref}${href}`,
-                ),
-              },
-            )}
-          >
-            {_(label)}
-          </Link>
-        ))}
+      <div>
+        <AnimatePresence>
+          {params.teamUrl && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="flex items-baseline gap-x-6"
+            >
+              {navigationLinks.map(({ href, label }) => (
+                <Link
+                  key={href}
+                  to={`${rootHref}${href}`}
+                  className={cn(
+                    'text-muted-foreground dark:text-muted-foreground/60 focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+                    {
+                      'text-foreground dark:text-muted-foreground': pathname?.startsWith(
+                        `${rootHref}${href}`,
+                      ),
+                    },
+                  )}
+                >
+                  {_(label)}
+                </Link>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
       </div>
 
       <Button
         variant="outline"
-        className="text-muted-foreground flex w-96 items-center justify-between rounded-lg"
+        className="text-muted-foreground flex w-full max-w-96 items-center justify-between rounded-lg"
         onClick={() => setIsCommandMenuOpen(true)}
       >
         <div className="flex items-center">

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

@@ -1,62 +1,48 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
-import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import type { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
+import type { InternalClaimPlans } from '@documenso/ee/server-only/stripe/get-internal-claim-plans';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
-import { toHumanPrice } from '@documenso/lib/universal/stripe/to-human-price';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type Interval = keyof PriceIntervals;
-
-const INTERVALS: Interval[] = ['day', 'week', 'month', 'year'];
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-const isInterval = (value: unknown): value is Interval => INTERVALS.includes(value as Interval);
-
-const FRIENDLY_INTERVALS: Record<Interval, MessageDescriptor> = {
-  day: msg`Daily`,
-  week: msg`Weekly`,
-  month: msg`Monthly`,
-  year: msg`Yearly`,
-};
-
 const MotionCard = motion(Card);
 
 export type BillingPlansProps = {
-  prices: PriceIntervals;
+  plans: InternalClaimPlans;
 };
 
-export const BillingPlans = ({ prices }: BillingPlansProps) => {
+export const BillingPlans = ({ plans }: BillingPlansProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const isMounted = useIsMounted();
 
-  const [interval, setInterval] = useState<Interval>('month');
+  const organisation = useCurrentOrganisation();
+
+  const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
   const [checkoutSessionPriceId, setCheckoutSessionPriceId] = useState<string | null>(null);
 
-  const { mutateAsync: createCheckoutSession } = trpc.profile.createCheckoutSession.useMutation();
+  const { mutateAsync: createSubscription } = trpc.billing.subscription.create.useMutation();
 
   const onSubscribeClick = async (priceId: string) => {
     try {
       setCheckoutSessionPriceId(priceId);
 
-      const url = await createCheckoutSession({ priceId });
+      const { redirectUrl } = await createSubscription({
+        organisationId: organisation.id,
+        priceId,
+      });
 
-      if (!url) {
-        throw new Error('Unable to create session');
-      }
-
-      window.open(url);
+      window.open(redirectUrl, '_blank');
     } catch (_err) {
       toast({
         title: _(msg`Something went wrong`),
@@ -68,24 +54,37 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
     }
   };
 
+  const pricesToDisplay = useMemo(() => {
+    const prices = [];
+
+    for (const plan of Object.values(plans)) {
+      if (plan[interval] && plan[interval].isVisibleInApp) {
+        prices.push(plan[interval]);
+      }
+    }
+
+    return prices;
+  }, [plans, interval]);
+
   return (
     <div>
-      <Tabs value={interval} onValueChange={(value) => isInterval(value) && setInterval(value)}>
+      <Tabs
+        value={interval}
+        onValueChange={(value) => setInterval(value as 'monthlyPrice' | 'yearlyPrice')}
+      >
         <TabsList>
-          {INTERVALS.map(
-            (interval) =>
-              prices[interval].length > 0 && (
-                <TabsTrigger key={interval} className="min-w-[150px]" value={interval}>
-                  {_(FRIENDLY_INTERVALS[interval])}
-                </TabsTrigger>
-              ),
-          )}
+          <TabsTrigger className="min-w-[150px]" value="monthlyPrice">
+            <Trans>Monthly</Trans>
+          </TabsTrigger>
+          <TabsTrigger className="min-w-[150px]" value="yearlyPrice">
+            <Trans>Yearly</Trans>
+          </TabsTrigger>
         </TabsList>
       </Tabs>
 
       <div className="mt-8 grid gap-8 lg:grid-cols-2 2xl:grid-cols-3">
         <AnimatePresence mode="wait">
-          {prices[interval].map((price) => (
+          {pricesToDisplay.map((price) => (
             <MotionCard
               key={price.id}
               initial={{ opacity: isMounted ? 0 : 1, y: isMounted ? 20 : 0 }}
@@ -96,8 +95,14 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
                 <CardTitle>{price.product.name}</CardTitle>
 
                 <div className="text-muted-foreground mt-2 text-lg font-medium">
-                  ${toHumanPrice(price.unit_amount ?? 0)} {price.currency.toUpperCase()}{' '}
-                  <span className="text-xs">per {interval}</span>
+                  {price.friendlyPrice + ' '}
+                  <span className="text-xs">
+                    {interval === 'monthlyPrice' ? (
+                      <Trans>per month</Trans>
+                    ) : (
+                      <Trans>per year</Trans>
+                    )}
+                  </span>
                 </div>
 
                 <div className="text-muted-foreground mt-1.5 text-sm">

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

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

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -113,7 +113,11 @@ export const DirectTemplatePageView = ({
 
       const redirectUrl = template.templateMeta?.redirectUrl;
 
-      await (redirectUrl ? navigate(redirectUrl) : navigate(`/sign/${token}/complete`));
+      if (redirectUrl) {
+        window.location.href = redirectUrl;
+      } else {
+        await navigate(`/sign/${token}/complete`);
+      }
     } catch (err) {
       toast({
         title: _(msg`Something went wrong`),

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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Field, Recipient, Signature } from '@prisma/client';
@@ -24,7 +24,6 @@ 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 {
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
@@ -35,7 +34,7 @@ import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/ty
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useStep } from '@documenso/ui/primitives/stepper';
 
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
@@ -73,8 +72,7 @@ export const DirectTemplateSigningForm = ({
   template,
   onSubmit,
 }: DirectTemplateSigningFormProps) => {
-  const { fullName, signature, signatureValid, setFullName, setSignature } =
-    useRequiredDocumentSigningContext();
+  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
 
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
@@ -91,7 +89,7 @@ export const DirectTemplateSigningForm = ({
 
         const tempField: DirectTemplateLocalField = {
           ...field,
-          customText: value.value,
+          customText: value.value ?? '',
           inserted: true,
           signedValue: value,
         };
@@ -102,8 +100,8 @@ export const DirectTemplateSigningForm = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64: value.value.startsWith('data:') ? value.value : null,
-            typedSignature: value.value.startsWith('data:') ? null : value.value,
+            signatureImageAsBase64: value.value?.startsWith('data:') ? value.value : null,
+            typedSignature: value.value && !value.value.startsWith('data:') ? value.value : null,
           } satisfies Signature;
         }
 
@@ -135,8 +133,6 @@ export const DirectTemplateSigningForm = ({
     );
   };
 
-  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
-
   const uninsertedFields = useMemo(() => {
     return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
   }, [localFields]);
@@ -149,10 +145,6 @@ export const DirectTemplateSigningForm = ({
   const handleSubmit = async () => {
     setValidateUninsertedFields(true);
 
-    if (hasSignatureField && !signatureValid) {
-      return;
-    }
-
     const isFieldsValid = validateFieldsInserted(localFields);
 
     if (!isFieldsValid) {
@@ -170,6 +162,55 @@ export const DirectTemplateSigningForm = ({
     // Do not reset to false since we do a redirect.
   };
 
+  useEffect(() => {
+    const updatedFields = [...localFields];
+
+    localFields.forEach((field) => {
+      const index = updatedFields.findIndex((f) => f.id === field.id);
+      let value = '';
+
+      match(field.type)
+        .with(FieldType.TEXT, () => {
+          const meta = field.fieldMeta ? ZTextFieldMeta.safeParse(field.fieldMeta) : null;
+
+          if (meta?.success) {
+            value = meta.data.text ?? '';
+          }
+        })
+        .with(FieldType.NUMBER, () => {
+          const meta = field.fieldMeta ? ZNumberFieldMeta.safeParse(field.fieldMeta) : null;
+
+          if (meta?.success) {
+            value = meta.data.value ?? '';
+          }
+        })
+        .with(FieldType.DROPDOWN, () => {
+          const meta = field.fieldMeta ? ZDropdownFieldMeta.safeParse(field.fieldMeta) : null;
+
+          if (meta?.success) {
+            value = meta.data.defaultValue ?? '';
+          }
+        });
+
+      if (value) {
+        const signedValue = {
+          token: directRecipient.token,
+          fieldId: field.id,
+          value,
+        };
+
+        updatedFields[index] = {
+          ...field,
+          customText: value,
+          inserted: true,
+          signedValue,
+        };
+      }
+    });
+
+    setLocalFields(updatedFields);
+  }, []);
+
   return (
     <DocumentSigningRecipientProvider recipient={directRecipient}>
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
@@ -191,6 +232,8 @@ export const DirectTemplateSigningForm = ({
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
                   typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+                  uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+                  drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
                 />
               ))
               .with(FieldType.INITIALS, () => (
@@ -335,19 +378,15 @@ export const DirectTemplateSigningForm = ({
                 <Trans>Signature</Trans>
               </Label>
 
-              <Card className="mt-2" gradient degrees={-120}>
-                <CardContent className="p-0">
-                  <SignaturePad
-                    className="h-44 w-full"
-                    disabled={isSubmitting}
-                    defaultValue={signature ?? undefined}
-                    onChange={(value) => {
-                      setSignature(value);
-                    }}
-                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
-                  />
-                </CardContent>
-              </Card>
+              <SignaturePadDialog
+                className="mt-2"
+                disabled={isSubmitting}
+                value={signature ?? ''}
+                onChange={(value) => setSignature(value)}
+                typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+                uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+                drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
+              />
             </div>
           </div>
         </div>

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

@@ -97,6 +97,10 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
+      if (!isLengthConditionMet) {
+        return;
+      }
+
       const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
@@ -194,18 +198,30 @@ export const DocumentSigningCheckboxField = ({
 
       setCheckedValues(updatedValues);
 
-      await removeSignedFieldWithToken({
+      const removePayload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
 
-      if (updatedValues.length > 0) {
-        await signFieldWithToken({
+      if (onUnsignField) {
+        await onUnsignField(removePayload);
+      } else {
+        await removeSignedFieldWithToken(removePayload);
+      }
+
+      if (updatedValues.length > 0 && shouldAutoSignField) {
+        const signPayload: TSignFieldWithTokenMutationSchema = {
           token: recipient.token,
           fieldId: field.id,
           value: toCheckboxValue(updatedValues),
           isBase64: true,
-        });
+        };
+
+        if (onSignField) {
+          await onSignField(signPayload);
+        } else {
+          await signFieldWithToken(signPayload);
+        }
       }
     } catch (err) {
       console.error(err);

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

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

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

@@ -181,6 +181,23 @@ export const DocumentSigningFieldContainer = ({
           </button>
         )}
 
+        {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&
+          field.fieldMeta?.label && (
+            <div
+              className={cn(
+                'absolute -top-16 left-0 right-0 rounded-md p-2 text-center text-xs text-gray-700',
+                {
+                  'bg-foreground/5 border-border border': !field.inserted,
+                },
+                {
+                  'bg-documenso-200 border-primary border': field.inserted,
+                },
+              )}
+            >
+              {field.fieldMeta.label}
+            </div>
+          )}
+
         {children}
       </FieldRootContainer>
     </div>

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

@@ -18,14 +18,16 @@ import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 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 { AssistantConfirmationDialog } from '../../dialogs/assistant-confirmation-dialog';
+import {
+  AssistantConfirmationDialog,
+  type NextSigner,
+} from '../../dialogs/assistant-confirmation-dialog';
 import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 
@@ -59,15 +61,17 @@ export const DocumentSigningForm = ({
 
   const assistantSignersId = useId();
 
-  const { fullName, signature, setFullName, setSignature, signatureValid, setSignatureValid } =
-    useRequiredDocumentSigningContext();
+  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
   const [isAssistantSubmitting, setIsAssistantSubmitting] = useState(false);
 
-  const { mutateAsync: completeDocumentWithToken } =
-    trpc.recipient.completeDocumentWithToken.useMutation();
+  const {
+    mutateAsync: completeDocumentWithToken,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
 
   const assistantForm = useForm<{ selectedSignerId: number | undefined }>({
     defaultValues: {
@@ -75,10 +79,8 @@ export const DocumentSigningForm = ({
     },
   });
 
-  const { handleSubmit, formState } = useForm();
-
   // Keep the loading state going if successful since the redirect may take some time.
-  const isSubmitting = formState.isSubmitting || formState.isSubmitSuccessful;
+  const isSubmitting = isPending || isSuccess;
 
   const fieldsRequiringValidation = useMemo(
     () => fields.filter(isFieldUnsignedAndRequired),
@@ -100,22 +102,6 @@ export const DocumentSigningForm = ({
     validateFieldsInserted(fieldsRequiringValidation);
   };
 
-  const onFormSubmit = async () => {
-    setValidateUninsertedFields(true);
-
-    const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
-
-    if (hasSignatureField && !signatureValid) {
-      return;
-    }
-
-    if (!isFieldsValid) {
-      return;
-    }
-
-    await completeDocument();
-  };
-
   const onAssistantFormSubmit = () => {
     if (uninsertedRecipientFields.length > 0) {
       return;
@@ -124,11 +110,11 @@ export const DocumentSigningForm = ({
     setIsConfirmationDialogOpen(true);
   };
 
-  const handleAssistantConfirmDialogSubmit = async () => {
+  const handleAssistantConfirmDialogSubmit = async (nextSigner?: NextSigner) => {
     setIsAssistantSubmitting(true);
 
     try {
-      await completeDocument();
+      await completeDocument(undefined, nextSigner);
     } catch (err) {
       toast({
         title: 'Error',
@@ -141,12 +127,18 @@ export const DocumentSigningForm = ({
     }
   };
 
-  const completeDocument = async (authOptions?: TRecipientActionAuth) => {
-    await completeDocumentWithToken({
+  const completeDocument = async (
+    authOptions?: TRecipientActionAuth,
+    nextSigner?: { email: string; name: string },
+  ) => {
+    const payload = {
       token: recipient.token,
       documentId: document.id,
       authOptions,
-    });
+      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
+    };
+
+    await completeDocumentWithToken(payload);
 
     analytics.capture('App: Recipient has completed signing', {
       signerId: recipient.id,
@@ -161,6 +153,29 @@ export const DocumentSigningForm = ({
     }
   };
 
+  const nextRecipient = useMemo(() => {
+    if (
+      !document.documentMeta?.signingOrder ||
+      document.documentMeta.signingOrder !== 'SEQUENTIAL'
+    ) {
+      return undefined;
+    }
+
+    const sortedRecipients = allRecipients.sort((a, b) => {
+      // Sort by signingOrder first (nulls last), then by id
+      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
+      if (a.signingOrder === null) return 1;
+      if (b.signingOrder === null) return -1;
+      if (a.signingOrder === b.signingOrder) return a.id - b.id;
+      return a.signingOrder - b.signingOrder;
+    });
+
+    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
+    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
+      ? sortedRecipients[currentIndex + 1]
+      : undefined;
+  }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
+
   return (
     <div
       className={cn(
@@ -210,12 +225,19 @@ export const DocumentSigningForm = ({
 
                   <DocumentSigningCompleteDialog
                     isSubmitting={isSubmitting}
-                    onSignatureComplete={handleSubmit(onFormSubmit)}
                     documentTitle={document.title}
                     fields={fields}
                     fieldsValidated={fieldsValidated}
+                    onSignatureComplete={async (nextSigner) => {
+                      await completeDocument(undefined, nextSigner);
+                    }}
                     role={recipient.role}
-                    disabled={!isRecipientsTurn}
+                    allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
+                    defaultNextSigner={
+                      nextRecipient
+                        ? { name: nextRecipient.name, email: nextRecipient.email }
+                        : undefined
+                    }
                   />
                 </div>
               </div>
@@ -294,9 +316,8 @@ export const DocumentSigningForm = ({
                     className="w-full"
                     size="lg"
                     loading={isAssistantSubmitting}
-                    disabled={isAssistantSubmitting || uninsertedRecipientFields.length > 0}
                   >
-                    {isAssistantSubmitting ? <Trans>Submitting...</Trans> : <Trans>Continue</Trans>}
+                    <Trans>Continue</Trans>
                   </Button>
                 </div>
 
@@ -306,14 +327,26 @@ export const DocumentSigningForm = ({
                   onClose={() => !isAssistantSubmitting && setIsConfirmationDialogOpen(false)}
                   onConfirm={handleAssistantConfirmDialogSubmit}
                   isSubmitting={isAssistantSubmitting}
+                  allowDictateNextSigner={
+                    nextRecipient && document.documentMeta?.allowDictateNextSigner
+                  }
+                  defaultNextSigner={
+                    nextRecipient
+                      ? { name: nextRecipient.name, email: nextRecipient.email }
+                      : undefined
+                  }
                 />
               </form>
             </>
           ) : (
             <>
-              <form onSubmit={handleSubmit(onFormSubmit)}>
+              <div>
                 <p className="text-muted-foreground mt-2 text-sm">
-                  <Trans>Please review the document before signing.</Trans>
+                  {recipient.role === RecipientRole.APPROVER && !hasSignatureField ? (
+                    <Trans>Please review the document before approving.</Trans>
+                  ) : (
+                    <Trans>Please review the document before signing.</Trans>
+                  )}
                 </p>
 
                 <hr className="border-border mb-8 mt-4" />
@@ -337,64 +370,59 @@ export const DocumentSigningForm = ({
                       />
                     </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={isSubmitting}
-                            defaultValue={signature ?? undefined}
-                            onValidityChange={(isValid) => {
-                              setSignatureValid(isValid);
-                            }}
-                            onChange={(value) => {
-                              if (signatureValid) {
-                                setSignature(value);
-                              }
-                            }}
-                            allowTypedSignature={document.documentMeta?.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>
-                  </div>
-
-                  <div className="flex flex-col gap-4 md:flex-row">
-                    <Button
-                      type="button"
-                      className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
-                      variant="secondary"
-                      size="lg"
-                      disabled={typeof window !== 'undefined' && window.history.length <= 1}
-                      onClick={async () => navigate(-1)}
-                    >
-                      <Trans>Cancel</Trans>
-                    </Button>
-
-                    <DocumentSigningCompleteDialog
-                      isSubmitting={isSubmitting}
-                      onSignatureComplete={handleSubmit(onFormSubmit)}
-                      documentTitle={document.title}
-                      fields={fields}
-                      fieldsValidated={fieldsValidated}
-                      role={recipient.role}
-                      disabled={!isRecipientsTurn}
-                    />
+                        <SignaturePadDialog
+                          className="mt-2"
+                          disabled={isSubmitting}
+                          value={signature ?? ''}
+                          onChange={(v) => setSignature(v ?? '')}
+                          typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+                          uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
+                          drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
+                        />
+                      </div>
+                    )}
                   </div>
                 </fieldset>
-              </form>
+
+                <div className="mt-6 flex flex-col gap-4 md:flex-row">
+                  <Button
+                    type="button"
+                    className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+                    variant="secondary"
+                    size="lg"
+                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
+                    onClick={async () => navigate(-1)}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <DocumentSigningCompleteDialog
+                    isSubmitting={isSubmitting || isAssistantSubmitting}
+                    documentTitle={document.title}
+                    fields={fields}
+                    fieldsValidated={fieldsValidated}
+                    disabled={!isRecipientsTurn}
+                    onSignatureComplete={async (nextSigner) => {
+                      await completeDocument(undefined, nextSigner);
+                    }}
+                    role={recipient.role}
+                    allowDictateNextSigner={
+                      nextRecipient && document.documentMeta?.allowDictateNextSigner
+                    }
+                    defaultNextSigner={
+                      nextRecipient
+                        ? { name: nextRecipient.name, email: nextRecipient.email }
+                        : undefined
+                    }
+                  />
+                </div>
+              </div>
             </>
           )}
         </div>

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

@@ -40,34 +40,33 @@ import { DocumentReadOnlyFields } from '~/components/general/document/document-r
 
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
-export type SigningPageViewProps = {
-  document: DocumentAndSender;
+export type DocumentSigningPageViewProps = {
   recipient: RecipientWithFields;
+  document: DocumentAndSender;
   fields: Field[];
   completedFields: CompletedField[];
   isRecipientsTurn: boolean;
   allRecipients?: RecipientWithFields[];
+  includeSenderDetails: boolean;
 };
 
 export const DocumentSigningPageView = ({
-  document,
   recipient,
+  document,
   fields,
   completedFields,
   isRecipientsTurn,
   allRecipients = [],
-}: SigningPageViewProps) => {
+  includeSenderDetails,
+}: DocumentSigningPageViewProps) => {
   const { documentData, documentMeta } = document;
 
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
 
-  const shouldUseTeamDetails =
-    document.teamId && document.team?.teamGlobalSettings?.includeSenderDetails === false;
-
   let senderName = document.user.name ?? '';
   let senderEmail = `(${document.user.email})`;
 
-  if (shouldUseTeamDetails) {
+  if (includeSenderDetails) {
     senderName = document.team?.name ?? '';
     senderEmail = document.team?.teamEmail?.email ? `(${document.team.teamEmail.email})` : '';
   }
@@ -92,7 +91,7 @@ export const DocumentSigningPageView = ({
             <span className="text-muted-foreground">
               {match(recipient.role)
                 .with(RecipientRole.VIEWER, () =>
-                  document.teamId && !shouldUseTeamDetails ? (
+                  includeSenderDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to view this document
                     </Trans>
@@ -101,7 +100,7 @@ export const DocumentSigningPageView = ({
                   ),
                 )
                 .with(RecipientRole.SIGNER, () =>
-                  document.teamId && !shouldUseTeamDetails ? (
+                  includeSenderDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to sign this document
                     </Trans>
@@ -110,7 +109,7 @@ export const DocumentSigningPageView = ({
                   ),
                 )
                 .with(RecipientRole.APPROVER, () =>
-                  document.teamId && !shouldUseTeamDetails ? (
+                  includeSenderDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to approve this document
                     </Trans>
@@ -119,7 +118,7 @@ export const DocumentSigningPageView = ({
                   ),
                 )
                 .with(RecipientRole.ASSISTANT, () =>
-                  document.teamId && !shouldUseTeamDetails ? (
+                  includeSenderDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to assist this document
                     </Trans>
@@ -157,7 +156,7 @@ export const DocumentSigningPageView = ({
           </div>
         </div>
 
-        <DocumentReadOnlyFields fields={completedFields} />
+        <DocumentReadOnlyFields documentMeta={documentMeta || undefined} fields={completedFields} />
 
         {recipient.role !== RecipientRole.ASSISTANT && (
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />
@@ -177,6 +176,8 @@ export const DocumentSigningPageView = ({
                     key={field.id}
                     field={field}
                     typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+                    uploadSignatureEnabled={documentMeta?.uploadSignatureEnabled}
+                    drawSignatureEnabled={documentMeta?.drawSignatureEnabled}
                   />
                 ))
                 .with(FieldType.INITIALS, () => (

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

@@ -1,4 +1,6 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useState } from 'react';
+
+import { isBase64Image } from '@documenso/lib/constants/signatures';
 
 export type DocumentSigningContextValue = {
   fullName: string;
@@ -7,8 +9,6 @@ export type DocumentSigningContextValue = {
   setEmail: (_value: string) => void;
   signature: string | null;
   setSignature: (_value: string | null) => void;
-  signatureValid: boolean;
-  setSignatureValid: (_valid: boolean) => void;
 };
 
 const DocumentSigningContext = createContext<DocumentSigningContextValue | null>(null);
@@ -31,6 +31,9 @@ export interface DocumentSigningProviderProps {
   fullName?: string | null;
   email?: string | null;
   signature?: string | null;
+  typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
   children: React.ReactNode;
 }
 
@@ -38,18 +41,31 @@ export const DocumentSigningProvider = ({
   fullName: initialFullName,
   email: initialEmail,
   signature: initialSignature,
+  typedSignatureEnabled = true,
+  uploadSignatureEnabled = true,
+  drawSignatureEnabled = true,
   children,
 }: DocumentSigningProviderProps) => {
   const [fullName, setFullName] = useState(initialFullName || '');
   const [email, setEmail] = useState(initialEmail || '');
-  const [signature, setSignature] = useState(initialSignature || null);
-  const [signatureValid, setSignatureValid] = useState(true);
 
-  useEffect(() => {
-    if (initialSignature) {
-      setSignature(initialSignature);
-    }
-  }, [initialSignature]);
+  // Ensure the user signature doesn't show up if it's not allowed.
+  const [signature, setSignature] = useState(
+    (() => {
+      const sig = initialSignature || '';
+      const isBase64 = isBase64Image(sig);
+
+      if (isBase64 && (uploadSignatureEnabled || drawSignatureEnabled)) {
+        return sig;
+      }
+
+      if (!isBase64 && typedSignatureEnabled) {
+        return sig;
+      }
+
+      return null;
+    })(),
+  );
 
   return (
     <DocumentSigningContext.Provider
@@ -60,8 +76,6 @@ export const DocumentSigningProvider = ({
         setEmail,
         signature,
         setSignature,
-        signatureValid,
-        setSignatureValid,
       }}
     >
       {children}

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

@@ -31,10 +31,7 @@ import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZRejectDocumentFormSchema = z.object({
-  reason: z
-    .string()
-    .min(5, msg`Please provide a reason`)
-    .max(500, msg`Reason must be less than 500 characters`),
+  reason: z.string().max(500, msg`Reason must be less than 500 characters`),
 });
 
 type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;

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

@@ -17,7 +17,6 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -29,11 +28,14 @@ import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
+
 export type DocumentSigningSignatureFieldProps = {
   field: FieldWithSignature;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
   typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
 };
 
 export const DocumentSigningSignatureField = ({
@@ -41,6 +43,8 @@ export const DocumentSigningSignatureField = ({
   onSignField,
   onUnsignField,
   typedSignatureEnabled,
+  uploadSignatureEnabled,
+  drawSignatureEnabled,
 }: DocumentSigningSignatureFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -52,12 +56,8 @@ export const DocumentSigningSignatureField = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [fontSize, setFontSize] = useState(2);
 
-  const {
-    signature: providedSignature,
-    setSignature: setProvidedSignature,
-    signatureValid,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
+  const { signature: providedSignature, setSignature: setProvidedSignature } =
+    useRequiredDocumentSigningContext();
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
@@ -89,7 +89,7 @@ export const DocumentSigningSignatureField = ({
   }, [field.inserted, signature?.signatureImageAsBase64]);
 
   const onPreSign = () => {
-    if (!providedSignature || !signatureValid) {
+    if (!providedSignature) {
       setShowSignatureModal(true);
       return false;
     }
@@ -102,6 +102,7 @@ export const DocumentSigningSignatureField = ({
   const onDialogSignClick = () => {
     setShowSignatureModal(false);
     setProvidedSignature(localSignature);
+
     if (!localSignature) {
       return;
     }
@@ -116,14 +117,14 @@ export const DocumentSigningSignatureField = ({
     try {
       const value = signature || providedSignature;
 
-      if (!value || (signature && !signatureValid)) {
+      if (!value) {
         setShowSignatureModal(true);
         return;
       }
 
       const isTypedSignature = !value.startsWith('data:image');
 
-      if (isTypedSignature && !typedSignatureEnabled) {
+      if (isTypedSignature && typedSignatureEnabled === false) {
         toast({
           title: _(msg`Error`),
           description: _(msg`Typed signatures are not allowed. Please draw your signature.`),
@@ -275,29 +276,14 @@ export const DocumentSigningSignatureField = ({
             </Trans>
           </DialogTitle>
 
-          <div className="">
-            <Label htmlFor="signature">
-              <Trans>Signature</Trans>
-            </Label>
-
-            <div className="border-border mt-2 rounded-md border">
-              <SignaturePad
-                id="signature"
-                className="h-44 w-full"
-                onChange={(value) => setLocalSignature(value)}
-                allowTypedSignature={typedSignatureEnabled}
-                onValidityChange={(isValid) => {
-                  setSignatureValid(isValid);
-                }}
-              />
-            </div>
-
-            {!signatureValid && (
-              <div className="text-destructive mt-2 text-sm">
-                <Trans>Signature is too small. Please provide a more complete signature.</Trans>
-              </div>
-            )}
-          </div>
+          <SignaturePad
+            className="mt-2"
+            value={localSignature ?? ''}
+            onChange={({ value }) => setLocalSignature(value)}
+            typedSignatureEnabled={typedSignatureEnabled}
+            uploadSignatureEnabled={uploadSignatureEnabled}
+            drawSignatureEnabled={drawSignatureEnabled}
+          />
 
           <DocumentSigningDisclosure />
 
@@ -317,7 +303,7 @@ export const DocumentSigningSignatureField = ({
               <Button
                 type="button"
                 className="flex-1"
-                disabled={!localSignature || !signatureValid}
+                disabled={!localSignature}
                 onClick={() => onDialogSignClick()}
               >
                 <Trans>Sign</Trans>

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

@@ -1,9 +1,10 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus } from '@prisma/client';
+import type { DocumentStatus } from '@prisma/client';
 import { DownloadIcon } from 'lucide-react';
 
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -76,7 +77,7 @@ export const DocumentCertificateDownloadButton = ({
       className={cn('w-full sm:w-auto', className)}
       loading={isPending}
       variant="outline"
-      disabled={documentStatus !== DocumentStatus.COMPLETED}
+      disabled={!isDocumentCompleted(documentStatus)}
       onClick={() => void onDownloadCertificatesClick()}
     >
       {!isPending && <DownloadIcon className="mr-1.5 h-4 w-4" />}

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

@@ -5,6 +5,7 @@ import { useLingui } from '@lingui/react';
 import { DocumentDistributionMethod, DocumentStatus } from '@prisma/client';
 import { useNavigate, useSearchParams } from 'react-router';
 
+import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
@@ -28,13 +29,12 @@ import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentEditFormProps = {
   className?: string;
   initialDocument: TDocument;
   documentRootPath: string;
-  isDocumentEnterprise: boolean;
 };
 
 type EditDocumentStep = 'settings' | 'signers' | 'fields' | 'subject';
@@ -44,7 +44,6 @@ export const DocumentEditForm = ({
   className,
   initialDocument,
   documentRootPath,
-  isDocumentEnterprise,
 }: DocumentEditFormProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
@@ -52,7 +51,7 @@ export const DocumentEditForm = ({
   const navigate = useNavigate();
 
   const [searchParams] = useSearchParams();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
 
@@ -71,7 +70,7 @@ export const DocumentEditForm = ({
 
   const { recipients, fields } = document;
 
-  const { mutateAsync: updateDocument } = trpc.document.setSettingsForDocument.useMutation({
+  const { mutateAsync: updateDocument } = trpc.document.updateDocument.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
       utils.document.getDocumentWithDetailsById.setData(
@@ -174,7 +173,7 @@ export const DocumentEditForm = ({
 
   const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
     try {
-      const { timezone, dateFormat, redirectUrl, language } = data.meta;
+      const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;
 
       await updateDocument({
         documentId: document.id,
@@ -190,6 +189,9 @@ export const DocumentEditForm = ({
           dateFormat,
           redirectUrl,
           language: isValidLanguageCode(language) ? language : undefined,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
         },
       });
 
@@ -213,6 +215,13 @@ export const DocumentEditForm = ({
           signingOrder: data.signingOrder,
         }),
 
+        updateDocument({
+          documentId: document.id,
+          meta: {
+            allowDictateNextSigner: data.allowDictateNextSigner,
+          },
+        }),
+
         setRecipients({
           documentId: document.id,
           recipients: data.signers.map((signer) => ({
@@ -242,14 +251,6 @@ export const DocumentEditForm = ({
         fields: data.fields,
       });
 
-      await updateDocument({
-        documentId: document.id,
-
-        meta: {
-          typedSignatureEnabled: data.typedSignatureEnabled,
-        },
-      });
-
       // Clear all field data from localStorage
       for (let i = 0; i < localStorage.length; i++) {
         const key = localStorage.key(i);
@@ -352,10 +353,9 @@ export const DocumentEditForm = ({
               key={recipients.length}
               documentFlow={documentFlow.settings}
               document={document}
-              currentTeamMemberRole={team?.currentTeamMember?.role}
+              currentTeamMemberRole={team.currentTeamRole}
               recipients={recipients}
               fields={fields}
-              isDocumentEnterprise={isDocumentEnterprise}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
               onSubmit={onAddSettingsFormSubmit}
             />
@@ -365,8 +365,8 @@ export const DocumentEditForm = ({
               documentFlow={documentFlow.signers}
               recipients={recipients}
               signingOrder={document.documentMeta?.signingOrder}
+              allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
               fields={fields}
-              isDocumentEnterprise={isDocumentEnterprise}
               onSubmit={onAddSignersFormSubmit}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
@@ -378,8 +378,7 @@ export const DocumentEditForm = ({
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
-              typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
-              teamId={team?.id}
+              teamId={team.id}
             />
 
             <AddSubjectFormPartial

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

@@ -9,6 +9,7 @@ import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
@@ -32,7 +33,7 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
 
   const isRecipient = !!recipient;
   const isPending = document.status === DocumentStatus.PENDING;
-  const isComplete = document.status === DocumentStatus.COMPLETED;
+  const isComplete = isDocumentCompleted(document);
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
 

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

@@ -20,6 +20,7 @@ import { useNavigate } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -36,7 +37,7 @@ import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialo
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentPageViewDropdownProps = {
   document: Document & {
@@ -52,7 +53,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const { _ } = useLingui();
 
   const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -63,7 +64,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const isDraft = document.status === DocumentStatus.DRAFT;
   const isPending = document.status === DocumentStatus.PENDING;
   const isDeleted = document.deletedAt !== null;
-  const isComplete = document.status === DocumentStatus.COMPLETED;
+  const isComplete = isDocumentCompleted(document);
   const isCurrentTeamDocument = team && document.team?.url === team.url;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 

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

@@ -17,6 +17,7 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatSigningLink } from '@documenso/lib/utils/recipients';
 import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
@@ -48,7 +49,7 @@ export const DocumentPageViewRecipients = ({
           <Trans>Recipients</Trans>
         </h1>
 
-        {document.status !== DocumentStatus.COMPLETED && (
+        {!isDocumentCompleted(document.status) && (
           <Link
             to={`${documentRootPath}/${document.id}/edit?step=signers`}
             title={_(msg`Modify recipients`)}

apps/remix/app/components/general/document/document-read-only-fields.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta } from '@prisma/client';
+import type { DocumentMeta, TemplateMeta } from '@prisma/client';
 import { FieldType, SigningStatus } from '@prisma/client';
 import { Clock, EyeOffIcon } from 'lucide-react';
 import { P, match } from 'ts-pattern';
@@ -27,7 +27,7 @@ import { PopoverHover } from '@documenso/ui/primitives/popover';
 
 export type DocumentReadOnlyFieldsProps = {
   fields: DocumentField[];
-  documentMeta?: DocumentMeta;
+  documentMeta?: DocumentMeta | TemplateMeta;
   showFieldStatus?: boolean;
 };
 

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'react';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { CheckCircle2, Clock, File } from 'lucide-react';
+import { CheckCircle2, Clock, File, XCircle } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@@ -36,6 +36,12 @@ export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus>
     icon: File,
     color: 'text-yellow-500 dark:text-yellow-200',
   },
+  REJECTED: {
+    label: msg`Rejected`,
+    labelExtended: msg`Document rejected`,
+    icon: XCircle,
+    color: 'text-red-500 dark:text-red-300',
+  },
   INBOX: {
     label: msg`Inbox`,
     labelExtended: msg`Document inbox`,

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

@@ -20,7 +20,7 @@ import { cn } from '@documenso/ui/lib/utils';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentUploadDropzoneProps = {
   className?: string;
@@ -31,7 +31,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
   const { toast } = useToast();
   const { user } = useSession();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const navigate = useNavigate();
   const analytics = useAnalytics();

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

@@ -62,7 +62,7 @@ export const GenericErrorLayout = ({
   const team = useOptionalCurrentTeam();
 
   const { subHeading, heading, message } =
-    errorCodeMap[errorCode || 404] ?? defaultErrorCodeMap[500];
+    errorCodeMap[errorCode || 500] ?? defaultErrorCodeMap[500];
 
   return (
     <div className="fixed inset-0 z-0 flex h-screen w-screen items-center justify-center">

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

@@ -1,21 +1,29 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { motion } from 'framer-motion';
-import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
+import {
+  Building2Icon,
+  ChevronsUpDown,
+  Plus,
+  Settings2Icon,
+  SettingsIcon,
+  UsersIcon,
+} from 'lucide-react';
 import { Link, useLocation } from 'react-router';
 
 import { authClient } from '@documenso/auth/client';
-import type { SessionUser } from '@documenso/auth/server/lib/session/session';
-import { TEAM_MEMBER_ROLE_MAP, TEAM_URL_REGEX } from '@documenso/lib/constants/teams';
-import type { TGetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { EXTENDED_ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations';
+import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { isAdmin } from '@documenso/lib/utils/is-admin';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { LanguageSwitcherDialog } from '@documenso/ui/components/common/language-switcher-dialog';
 import { cn } from '@documenso/ui/lib/utils';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -24,71 +32,59 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
-const MotionLink = motion(Link);
+import { useOptionalCurrentTeam } from '~/providers/team';
 
-export type MenuSwitcherProps = {
-  user: SessionUser;
-  teams: TGetTeamsResponse;
-};
-
-export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProps) => {
+export const MenuSwitcher = () => {
   const { _ } = useLingui();
 
+  const { user, organisations } = useSession();
+
   const { pathname } = useLocation();
 
+  const [isOpen, setIsOpen] = useState(false);
   const [languageSwitcherOpen, setLanguageSwitcherOpen] = useState(false);
+  const [hoveredOrgId, setHoveredOrgId] = useState<string | null>(null);
 
   const isUserAdmin = isAdmin(user);
 
-  const { data: teamsQueryResult } = trpc.team.getTeams.useQuery(undefined, {
-    initialData: initialTeamsData,
-  });
-
-  const teams = teamsQueryResult && teamsQueryResult.length > 0 ? teamsQueryResult : null;
-
-  const isPathTeamUrl = (teamUrl: string) => {
-    if (!pathname || !pathname.startsWith(`/t/`)) {
+  const isPathOrgUrl = (orgUrl: string) => {
+    if (!pathname || !pathname.startsWith(`/org/`)) {
       return false;
     }
 
-    return pathname.split('/')[2] === teamUrl;
+    return pathname.split('/')[2] === orgUrl;
   };
 
-  const selectedTeam = teams?.find((team) => isPathTeamUrl(team.url));
+  const selectedOrg = organisations.find((org) => isPathOrgUrl(org.url));
+  const hoveredOrg = organisations.find((org) => org.id === hoveredOrgId);
 
-  const formatAvatarFallback = (teamName?: string) => {
-    if (teamName !== undefined) {
-      return teamName.slice(0, 1).toUpperCase();
+  const currentOrganisation = useOptionalCurrentOrganisation();
+  const currentTeam = useOptionalCurrentTeam();
+
+  // Use hovered org for teams display if available,
+  // otherwise use current team's org if in a team,
+  // finally fallback to selected org
+  const displayedOrg = hoveredOrg || currentOrganisation || selectedOrg;
+
+  const formatAvatarFallback = (name?: string) => {
+    if (name !== undefined) {
+      return name.slice(0, 1).toUpperCase();
     }
 
     return user.name ? extractInitials(user.name) : user.email.slice(0, 1).toUpperCase();
   };
 
-  const formatSecondaryAvatarText = (team?: typeof selectedTeam) => {
-    if (!team) {
-      return _(msg`Personal Account`);
-    }
-
-    if (team.ownerUserId === user.id) {
-      return _(msg`Owner`);
-    }
-
-    return _(TEAM_MEMBER_ROLE_MAP[team.currentTeamMember.role]);
-  };
-
   /**
    * Formats the redirect URL so we can switch between documents and templates page
-   * seemlessly between teams and personal accounts.
+   * seemlessly between organisations and personal accounts.
    */
-  const formatRedirectUrlOnSwitch = (teamUrl?: string) => {
-    const baseUrl = teamUrl ? `/t/${teamUrl}` : '';
+  const formatRedirectUrlOnSwitch = (orgUrl?: string) => {
+    const baseUrl = orgUrl ? `/org/${orgUrl}` : '';
 
-    const currentPathname = (pathname ?? '/').replace(TEAM_URL_REGEX, '');
+    const currentPathname = (pathname ?? '/').replace(/^\/org\/[^/]+/, '');
 
     if (currentPathname === '/templates') {
       return `${baseUrl}/templates`;
@@ -97,8 +93,45 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
     return baseUrl;
   };
 
+  const dropdownMenuAvatarText = useMemo(() => {
+    if (currentTeam) {
+      return {
+        avatarSrc: formatAvatarUrl(currentTeam.avatarImageId),
+        avatarFallback: formatAvatarFallback(currentTeam.name),
+        primaryText: currentTeam.name,
+        secondaryText: _(EXTENDED_TEAM_MEMBER_ROLE_MAP[currentTeam.currentTeamRole]),
+      };
+    }
+
+    if (currentOrganisation) {
+      return {
+        avatarSrc: formatAvatarUrl(currentOrganisation.avatarImageId),
+        avatarFallback: formatAvatarFallback(currentOrganisation.name),
+        primaryText: currentOrganisation.name,
+        secondaryText: _(
+          EXTENDED_ORGANISATION_MEMBER_ROLE_MAP[currentOrganisation.currentOrganisationRole],
+        ),
+      };
+    }
+
+    return {
+      avatarSrc: formatAvatarUrl(user.avatarImageId),
+      avatarFallback: formatAvatarFallback(user.name ?? user.email),
+      primaryText: user.name,
+      secondaryText: _(msg`Personal Account`),
+    };
+  }, [currentTeam, currentOrganisation, user]);
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      setHoveredOrgId(currentOrganisation?.id || null);
+    }
+
+    setIsOpen(open);
+  };
+
   return (
-    <DropdownMenu>
+    <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
       <DropdownMenuTrigger asChild>
         <Button
           data-testid="menu-switcher"
@@ -106,12 +139,10 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
           className="relative flex h-12 flex-row items-center px-0 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent md:px-2"
         >
           <AvatarWithText
-            avatarSrc={formatAvatarUrl(
-              selectedTeam ? selectedTeam.avatarImageId : user.avatarImageId,
-            )}
-            avatarFallback={formatAvatarFallback(selectedTeam?.name)}
-            primaryText={selectedTeam ? selectedTeam.name : user.name}
-            secondaryText={formatSecondaryAvatarText(selectedTeam)}
+            avatarSrc={dropdownMenuAvatarText.avatarSrc}
+            avatarFallback={dropdownMenuAvatarText.avatarFallback}
+            primaryText={dropdownMenuAvatarText.primaryText}
+            secondaryText={dropdownMenuAvatarText.secondaryText}
             rightSideComponent={
               <ChevronsUpDown className="text-muted-foreground ml-auto h-4 w-4" />
             }
@@ -121,166 +152,196 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className={cn('z-[60] ml-6 w-full md:ml-0', teams ? 'min-w-[20rem]' : 'min-w-[12rem]')}
+        className={cn('divide-border z-[60] ml-6 flex w-full min-w-[40rem] divide-x p-0 md:ml-0')}
         align="end"
         forceMount
       >
-        {teams ? (
-          <>
-            <DropdownMenuLabel>
-              <Trans>Personal</Trans>
-            </DropdownMenuLabel>
-
-            <DropdownMenuItem asChild>
-              <Link to={formatRedirectUrlOnSwitch()}>
-                <AvatarWithText
-                  avatarSrc={formatAvatarUrl(user.avatarImageId)}
-                  avatarFallback={formatAvatarFallback()}
-                  primaryText={user.name}
-                  secondaryText={formatSecondaryAvatarText()}
-                  rightSideComponent={
-                    !pathname?.startsWith(`/t/`) && (
-                      <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
-                    )
-                  }
-                />
-              </Link>
-            </DropdownMenuItem>
-
-            <DropdownMenuSeparator className="mt-2" />
-
-            <DropdownMenuLabel>
-              <div className="flex flex-row items-center justify-between">
-                <p>
-                  <Trans>Teams</Trans>
-                </p>
-
-                <div className="flex flex-row space-x-2">
-                  <DropdownMenuItem asChild>
-                    <Button
-                      title={_(msg`Manage teams`)}
-                      variant="ghost"
-                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
-                      asChild
-                    >
-                      <Link to="/settings/teams">
-                        <Settings2 className="h-4 w-4" />
-                      </Link>
-                    </Button>
-                  </DropdownMenuItem>
-
-                  <DropdownMenuItem asChild>
-                    <Button
-                      title={_(msg`Create team`)}
-                      variant="ghost"
-                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
-                      asChild
-                    >
-                      <Link to="/settings/teams?action=add-team">
-                        <Plus className="h-4 w-4" />
-                      </Link>
-                    </Button>
-                  </DropdownMenuItem>
-                </div>
-              </div>
-            </DropdownMenuLabel>
-
-            <div className="custom-scrollbar max-h-[40vh] overflow-auto">
-              {teams.map((team) => (
-                <DropdownMenuItem asChild key={team.id}>
-                  <MotionLink
-                    initial="initial"
-                    animate="initial"
-                    whileHover="animate"
-                    to={formatRedirectUrlOnSwitch(team.url)}
-                  >
-                    <AvatarWithText
-                      avatarSrc={formatAvatarUrl(team.avatarImageId)}
-                      avatarFallback={formatAvatarFallback(team.name)}
-                      primaryText={team.name}
-                      textSectionClassName="w-[200px]"
-                      secondaryText={
-                        <div className="relative w-full">
-                          <motion.span
-                            className="overflow-hidden"
-                            variants={{
-                              initial: { opacity: 1, translateY: 0 },
-                              animate: { opacity: 0, translateY: '100%' },
-                            }}
-                          >
-                            {formatSecondaryAvatarText(team)}
-                          </motion.span>
-
-                          <motion.span
-                            className="absolute inset-0"
-                            variants={{
-                              initial: { opacity: 0, translateY: '100%' },
-                              animate: { opacity: 1, translateY: 0 },
-                            }}
-                          >{`/t/${team.url}`}</motion.span>
-                        </div>
-                      }
-                      rightSideComponent={
-                        isPathTeamUrl(team.url) && (
-                          <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
-                        )
-                      }
-                    />
-                  </MotionLink>
-                </DropdownMenuItem>
-              ))}
+        <div className="flex h-[400px] w-full divide-x">
+          {/* Organisations column */}
+          <div className="flex w-1/3 flex-col">
+            <div className="flex h-12 items-center border-b p-2">
+              <h3 className="text-muted-foreground flex items-center px-2 text-sm font-medium">
+                <Building2Icon className="mr-2 h-3.5 w-3.5" />
+                <Trans>Organisations</Trans>
+              </h3>
             </div>
-          </>
-        ) : (
-          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
-            <Link
-              to="/settings/teams?action=add-team"
-              className="flex items-center justify-between"
-            >
-              <Trans>Create team</Trans>
-              <Plus className="ml-2 h-4 w-4" />
-            </Link>
-          </DropdownMenuItem>
-        )}
+            <div className="flex-1 space-y-1 overflow-y-auto p-1.5">
+              {organisations.map((org) => (
+                <div
+                  className="group relative"
+                  key={org.id}
+                  onMouseEnter={() => setHoveredOrgId(org.id)}
+                >
+                  <DropdownMenuItem
+                    className={cn(
+                      'text-muted-foreground w-full px-4 py-2',
+                      org.id === currentOrganisation?.id && !hoveredOrgId && 'bg-accent',
+                      org.id === hoveredOrgId && 'bg-accent',
+                    )}
+                    asChild
+                  >
+                    <Link to={`/org/${org.url}`} className="flex items-center space-x-2 pr-8">
+                      <span
+                        className={cn('min-w-0 flex-1 truncate', {
+                          'font-semibold': org.id === selectedOrg?.id,
+                        })}
+                      >
+                        {org.name}
+                      </span>
+                    </Link>
+                  </DropdownMenuItem>
 
-        <DropdownMenuSeparator />
+                  {canExecuteOrganisationAction(
+                    'MANAGE_ORGANISATION',
+                    org.currentOrganisationRole,
+                  ) && (
+                    <div className="absolute bottom-0 right-0 top-0 flex items-center justify-center">
+                      <Link
+                        to={`/org/${org.url}/settings`}
+                        className="text-muted-foreground mr-2 rounded-sm border p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                      >
+                        <Settings2Icon className="h-3.5 w-3.5" />
+                      </Link>
+                    </div>
+                  )}
+                </div>
+              ))}
 
-        {isUserAdmin && (
-          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
-            <Link to="/admin">
-              <Trans>Admin panel</Trans>
-            </Link>
-          </DropdownMenuItem>
-        )}
+              <Button variant="ghost" className="w-full justify-start" asChild>
+                <Link to="/settings/organisations?action=add-organisation">
+                  <Plus className="mr-2 h-4 w-4" />
+                  <Trans>Create Organisation</Trans>
+                </Link>
+              </Button>
+            </div>
+          </div>
 
-        <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
-          <Link to="/settings/profile">
-            <Trans>User settings</Trans>
-          </Link>
-        </DropdownMenuItem>
+          {/* Teams column */}
+          <div className="flex w-1/3 flex-col">
+            <div className="flex h-12 items-center border-b p-2">
+              <h3 className="text-muted-foreground flex items-center px-2 text-sm font-medium">
+                <UsersIcon className="mr-2 h-3.5 w-3.5" />
+                <Trans>Teams</Trans>
+              </h3>
+            </div>
+            <div className="flex-1 space-y-1 overflow-y-auto p-1.5">
+              <AnimateGenericFadeInOut key={displayedOrg ? 'displayed-org' : 'no-org'}>
+                {hoveredOrg ? (
+                  hoveredOrg.teams.map((team) => (
+                    <div className="group relative" key={team.id}>
+                      <DropdownMenuItem
+                        className={cn(
+                          'text-muted-foreground w-full px-4 py-2',
+                          team.id === currentTeam?.id && 'bg-accent',
+                        )}
+                        asChild
+                      >
+                        <Link to={`/t/${team.url}`} className="flex items-center space-x-2 pr-8">
+                          <span
+                            className={cn('min-w-0 flex-1 truncate', {
+                              'font-semibold': team.id === currentTeam?.id,
+                            })}
+                          >
+                            {team.name}
+                          </span>
+                        </Link>
+                      </DropdownMenuItem>
 
-        {selectedTeam &&
-          canExecuteTeamAction('MANAGE_TEAM', selectedTeam.currentTeamMember.role) && (
-            <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
-              <Link to={`/t/${selectedTeam.url}/settings`}>
-                <Trans>Team settings</Trans>
-              </Link>
-            </DropdownMenuItem>
-          )}
+                      {canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
+                        <div className="absolute bottom-0 right-0 top-0 flex items-center justify-center">
+                          <Link
+                            to={`/t/${team.url}/settings`}
+                            className="text-muted-foreground mr-2 rounded-sm border p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                          >
+                            <Settings2Icon className="h-3.5 w-3.5" />
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                  ))
+                ) : (
+                  <div className="text-muted-foreground my-12 flex items-center justify-center px-2 text-center text-sm">
+                    <Trans>Select an organisation to view teams</Trans>
+                  </div>
+                )}
 
-        <DropdownMenuItem
-          className="text-muted-foreground px-4 py-2"
-          onClick={() => setLanguageSwitcherOpen(true)}
-        >
-          <Trans>Language</Trans>
-        </DropdownMenuItem>
+                {displayedOrg && (
+                  <Button variant="ghost" className="w-full justify-start" asChild>
+                    <Link to={`/org/${displayedOrg.url}/settings/teams?action=add-team`}>
+                      <Plus className="mr-2 h-4 w-4" />
+                      <Trans>Create Team</Trans>
+                    </Link>
+                  </Button>
+                )}
+              </AnimateGenericFadeInOut>
+            </div>
+          </div>
 
-        <DropdownMenuItem
-          className="text-destructive/90 hover:!text-destructive px-4 py-2"
-          onSelect={async () => authClient.signOut()}
-        >
-          <Trans>Sign Out</Trans>
-        </DropdownMenuItem>
+          {/* Settings column */}
+          <div className="flex w-1/3 flex-col">
+            <div className="flex h-12 items-center border-b p-2">
+              <h3 className="text-muted-foreground flex items-center px-2 text-sm font-medium">
+                <SettingsIcon className="mr-2 h-3.5 w-3.5" />
+                <Trans>Settings</Trans>
+              </h3>
+            </div>
+            <div className="flex-1 overflow-y-auto p-1.5">
+              {isUserAdmin && (
+                <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                  <Link to="/admin">
+                    <Trans>Admin panel</Trans>
+                  </Link>
+                </DropdownMenuItem>
+              )}
+
+              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                <Link to="/dashboard">
+                  <Trans>Dashboard</Trans>
+                </Link>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                <Link to="/settings/profile">
+                  <Trans>Account</Trans>
+                </Link>
+              </DropdownMenuItem>
+
+              {currentOrganisation &&
+                canExecuteOrganisationAction(
+                  'MANAGE_ORGANISATION',
+                  currentOrganisation.currentOrganisationRole,
+                ) && (
+                  <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                    <Link to={`/org/${currentOrganisation.url}/settings`}>
+                      <Trans>Organisation settings</Trans>
+                    </Link>
+                  </DropdownMenuItem>
+                )}
+
+              {currentTeam && canExecuteTeamAction('MANAGE_TEAM', currentTeam.currentTeamRole) && (
+                <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                  <Link to={`/t/${currentTeam.url}/settings`}>
+                    <Trans>Team settings</Trans>
+                  </Link>
+                </DropdownMenuItem>
+              )}
+
+              <DropdownMenuItem
+                className="text-muted-foreground px-4 py-2"
+                onClick={() => setLanguageSwitcherOpen(true)}
+              >
+                <Trans>Language</Trans>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                className="text-muted-foreground hover:!text-muted-foreground px-4 py-2"
+                onSelect={async () => authClient.signOut()}
+              >
+                <Trans>Sign Out</Trans>
+              </DropdownMenuItem>
+            </div>
+          </div>
+        </div>
       </DropdownMenuContent>
 
       <LanguageSwitcherDialog open={languageSwitcherOpen} setOpen={setLanguageSwitcherOpen} />

apps/remix/app/components/general/organisations/organisation-billing-banner.tsx

@@ -3,12 +3,12 @@ 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 { SubscriptionStatus } from '@prisma/client';
 import { AlertTriangle } from 'lucide-react';
 import { match } from 'ts-pattern';
 
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -21,30 +21,28 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type TeamLayoutBillingBannerProps = {
+export type OrganisationBillingBannerProps = {
   subscriptionStatus: SubscriptionStatus;
-  teamId: number;
-  userRole: TeamMemberRole;
 };
 
-export const TeamLayoutBillingBanner = ({
+export const OrganisationBillingBanner = ({
   subscriptionStatus,
-  teamId,
-  userRole,
-}: TeamLayoutBillingBannerProps) => {
+}: OrganisationBillingBannerProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const { mutateAsync: createBillingPortal, isPending } =
-    trpc.team.createBillingPortal.useMutation();
+  const organisation = useCurrentOrganisation();
+
+  const { mutateAsync: manageSubscription, isPending } =
+    trpc.billing.subscription.manage.useMutation();
 
   const handleCreatePortal = async () => {
     try {
-      const sessionUrl = await createBillingPortal({ teamId });
+      const { redirectUrl } = await manageSubscription({ organisationId: organisation.id });
 
-      window.open(sessionUrl, '_blank');
+      window.open(redirectUrl, '_blank');
 
       setIsOpen(false);
     } catch (err) {
@@ -125,7 +123,7 @@ export const TeamLayoutBillingBanner = ({
             ))
             .otherwise(() => null)}
 
-          {canExecuteTeamAction('MANAGE_BILLING', userRole) && (
+          {canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
             <DialogFooter>
               <Button loading={isPending} onClick={handleCreatePortal}>
                 <Trans>Resolve payment</Trans>

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

@@ -0,0 +1,58 @@
+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 { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationBillingPortalButtonProps = {
+  buttonProps?: React.ComponentProps<typeof Button>;
+};
+
+export const OrganisationBillingPortalButton = ({
+  buttonProps,
+}: OrganisationBillingPortalButtonProps) => {
+  const organisation = useCurrentOrganisation();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: manageSubscription, isPending } =
+    trpc.billing.subscription.manage.useMutation();
+
+  const canManageBilling = canExecuteOrganisationAction(
+    'MANAGE_BILLING',
+    organisation.currentOrganisationRole,
+  );
+
+  const handleCreatePortal = async () => {
+    try {
+      const { redirectUrl } = await manageSubscription({ organisationId: organisation.id });
+
+      window.open(redirectUrl, '_blank');
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We are unable to proceed to the billing portal at this time. Please try again, or contact support.`,
+        ),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+  };
+
+  return (
+    <Button
+      {...buttonProps}
+      onClick={async () => handleCreatePortal()}
+      loading={isPending}
+      disabled={!canManageBilling}
+    >
+      <Trans>Manage billing</Trans>
+    </Button>
+  );
+};

apps/remix/app/components/general/organisations/organisation-invitations.tsx

@@ -1,11 +1,12 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
+import { OrganisationMemberInviteStatus } from '@prisma/client';
 import { AnimatePresence } from 'framer-motion';
 import { BellIcon } from 'lucide-react';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { formatTeamUrl } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
@@ -21,14 +22,16 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export const TeamInvitations = () => {
-  const { data, isLoading } = trpc.team.getTeamInvitations.useQuery();
+export const OrganisationInvitations = ({ className }: { className?: string }) => {
+  const { data, isLoading } = trpc.organisation.member.invite.getMany.useQuery({
+    status: OrganisationMemberInviteStatus.PENDING,
+  });
 
   return (
     <AnimatePresence>
       {data && data.length > 0 && !isLoading && (
         <AnimateGenericFadeInOut>
-          <Alert variant="secondary">
+          <Alert variant="secondary" className={className}>
             <div className="flex h-full flex-row items-center p-2">
               <BellIcon className="mr-4 h-5 w-5 text-blue-800" />
 
@@ -37,12 +40,12 @@ export const TeamInvitations = () => {
                   value={data.length}
                   one={
                     <span>
-                      You have <strong>1</strong> pending team invitation
+                      You have <strong>1</strong> pending invitation
                     </span>
                   }
                   other={
                     <span>
-                      You have <strong>#</strong> pending team invitations
+                      You have <strong>#</strong> pending invitations
                     </span>
                   }
                 />
@@ -66,12 +69,12 @@ export const TeamInvitations = () => {
                         value={data.length}
                         one={
                           <span>
-                            You have <strong>1</strong> pending team invitation
+                            You have <strong>1</strong> pending invitation
                           </span>
                         }
                         other={
                           <span>
-                            You have <strong>#</strong> pending team invitations
+                            You have <strong>#</strong> pending invitations
                           </span>
                         }
                       />
@@ -80,24 +83,26 @@ export const TeamInvitations = () => {
 
                   <ul className="-mx-6 -mb-6 max-h-[80vh] divide-y overflow-auto px-6 pb-6 xl:max-h-[70vh]">
                     {data.map((invitation) => (
-                      <li key={invitation.teamId}>
-                        <AvatarWithText
-                          avatarSrc={formatAvatarUrl(invitation.team.avatarImageId)}
-                          className="w-full max-w-none py-4"
-                          avatarFallback={invitation.team.name.slice(0, 1)}
-                          primaryText={
-                            <span className="text-foreground/80 font-semibold">
-                              {invitation.team.name}
-                            </span>
-                          }
-                          secondaryText={formatTeamUrl(invitation.team.url)}
-                          rightSideComponent={
-                            <div className="ml-auto space-x-2">
-                              <DeclineTeamInvitationButton teamId={invitation.team.id} />
-                              <AcceptTeamInvitationButton teamId={invitation.team.id} />
-                            </div>
-                          }
-                        />
+                      <li key={invitation.id}>
+                        <Alert variant="neutral" className="p-0 px-4">
+                          <AvatarWithText
+                            avatarSrc={formatAvatarUrl(invitation.organisation.avatarImageId)}
+                            className="w-full max-w-none py-4"
+                            avatarFallback={invitation.organisation.name.slice(0, 1)}
+                            primaryText={
+                              <span className="text-foreground/80 font-semibold">
+                                {invitation.organisation.name}
+                              </span>
+                            }
+                            secondaryText={`/orgs/${invitation.organisation.url}`}
+                            rightSideComponent={
+                              <div className="ml-auto space-x-2">
+                                <DeclineOrganisationInvitationButton token={invitation.token} />
+                                <AcceptOrganisationInvitationButton token={invitation.token} />
+                              </div>
+                            }
+                          />
+                        </Alert>
                       </li>
                     ))}
                   </ul>
@@ -111,26 +116,29 @@ export const TeamInvitations = () => {
   );
 };
 
-const AcceptTeamInvitationButton = ({ teamId }: { teamId: number }) => {
+const AcceptOrganisationInvitationButton = ({ token }: { token: string }) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { refreshSession } = useSession();
 
   const {
-    mutateAsync: acceptTeamInvitation,
+    mutateAsync: acceptOrganisationInvitation,
     isPending,
     isSuccess,
-  } = trpc.team.acceptTeamInvitation.useMutation({
-    onSuccess: () => {
+  } = trpc.organisation.member.invite.accept.useMutation({
+    onSuccess: async () => {
+      await refreshSession();
+
       toast({
         title: _(msg`Success`),
-        description: _(msg`Accepted team invitation`),
+        description: _(msg`Invitation accepted`),
         duration: 5000,
       });
     },
     onError: () => {
       toast({
         title: _(msg`Something went wrong`),
-        description: _(msg`Unable to join this team at this time.`),
+        description: _(msg`Unable to join this organisation at this time.`),
         variant: 'destructive',
         duration: 10000,
       });
@@ -139,7 +147,7 @@ const AcceptTeamInvitationButton = ({ teamId }: { teamId: number }) => {
 
   return (
     <Button
-      onClick={async () => acceptTeamInvitation({ teamId })}
+      onClick={async () => acceptOrganisationInvitation({ token })}
       loading={isPending}
       disabled={isPending || isSuccess}
     >
@@ -148,26 +156,29 @@ const AcceptTeamInvitationButton = ({ teamId }: { teamId: number }) => {
   );
 };
 
-const DeclineTeamInvitationButton = ({ teamId }: { teamId: number }) => {
+const DeclineOrganisationInvitationButton = ({ token }: { token: string }) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { refreshSession } = useSession();
 
   const {
-    mutateAsync: declineTeamInvitation,
+    mutateAsync: declineOrganisationInvitation,
     isPending,
     isSuccess,
-  } = trpc.team.declineTeamInvitation.useMutation({
-    onSuccess: () => {
+  } = trpc.organisation.member.invite.decline.useMutation({
+    onSuccess: async () => {
+      await refreshSession();
+
       toast({
         title: _(msg`Success`),
-        description: _(msg`Declined team invitation`),
+        description: _(msg`Invitation declined`),
         duration: 5000,
       });
     },
     onError: () => {
       toast({
         title: _(msg`Something went wrong`),
-        description: _(msg`Unable to decline this team invitation at this time.`),
+        description: _(msg`Unable to decline this invitation at this time.`),
         variant: 'destructive',
         duration: 10000,
       });
@@ -176,7 +187,7 @@ const DeclineTeamInvitationButton = ({ teamId }: { teamId: number }) => {
 
   return (
     <Button
-      onClick={async () => declineTeamInvitation({ teamId })}
+      onClick={async () => declineOrganisationInvitation({ token })}
       loading={isPending}
       disabled={isPending || isSuccess}
       variant="ghost"

apps/remix/app/components/general/refresh-on-focus.tsx

@@ -2,6 +2,9 @@ import { useCallback, useEffect } from 'react';
 
 import { useRevalidator } from 'react-router';
 
+/**
+ * Not really used anymore, this causes random 500s when the user refreshes while this occurs.
+ */
 export const RefreshOnFocus = () => {
   const { revalidate, state } = useRevalidator();