fix: wip

.cursorrules

@@ -1,7 +1,4 @@
-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
@@ -9,25 +6,20 @@ 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
-- Use TypeScript for all code; prefer types over interfaces
+- Avoid enums; use maps instead
 - 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
@@ -36,40 +28,21 @@ 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
 
-React forms
+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
 
-- Use zod for form validation react-hook-form for forms
+Key Conventions:
-- Look at TeamCreateDialog.tsx as an example of form usage
+- Use 'nuqs' for URL search parameter state management
-- 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
+- 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
 
-TRPC Specifics
+Follow Next.js docs for Data Fetching, Rendering, and Routing
-
-- 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

@@ -0,0 +1,23 @@
+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,8 +26,7 @@ jobs:
       - name: Copy env
         run: cp .env.example .env
 
-      - name: Build app
+      - uses: ./.github/actions/cache-build
-        run: npm run build
 
   build_docker:
     name: Build Docker Image

.github/workflows/clean-cache.yml

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

.github/workflows/codeql-analysis.yml

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

.github/workflows/e2e-tests.yml

@@ -28,8 +28,7 @@ jobs:
       - name: Seed the database
         run: npm run prisma:seed
 
-      - name: Build app
+      - uses: ./.github/actions/cache-build
-        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={{
-    primary: '#0000FF',
+    colorPrimary: '#0000FF',
-    background: '#F5F5F5',
+    colorBackground: '#F5F5F5',
-    radius: '8px',
+    borderRadius: '8px',
   }}
 />
 ```

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

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

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

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

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

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

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

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

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

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

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

@@ -532,93 +532,3 @@ 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

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

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

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

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

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

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

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

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

@@ -1,7 +1,5 @@
 import { DateTime } from 'luxon';
 
-import { addZeroMonth } from './add-zero-month';
-
 type MetricKeys = {
   stars: number;
   forks: number;
@@ -39,77 +37,31 @@ export function transformData({
   data: DataEntry;
   metric: MetricKey;
 }): TransformData {
-  try {
-    if (!data || Object.keys(data).length === 0) {
-      return {
-        labels: [],
-        datasets: [{ label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`, data: [] }],
-      };
-    }
-
   const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
-      try {
     const [yearA, monthA] = dateA.split('-').map(Number);
     const [yearB, monthB] = dateB.split('-').map(Number);
 
-        if (isNaN(yearA) || isNaN(monthA) || isNaN(yearB) || isNaN(monthB)) {
-          console.warn(`Invalid date format: ${dateA} or ${dateB}`);
-          return 0;
-        }
-
     return DateTime.local(yearA, monthA).toMillis() - DateTime.local(yearB, monthB).toMillis();
-      } catch (error) {
-        console.error('Error sorting entries:', error);
-        return 0;
-      }
   });
 
   const labels = sortedEntries.map(([date]) => {
-      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 = {
+  return {
     labels,
     datasets: [
       {
         label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
-          data: sortedEntries.map(([_, stats]) => {
+        data: sortedEntries.map(([_, stats]) => stats[metric]),
-            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 bash
+#!/usr/bin/env sh
 
 # Exit on error.
-set -e
+set -eo pipefail
 
 SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 WEB_APP_DIR="$SCRIPT_DIR/.."

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

@@ -1,7 +1,4 @@
-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 {
@@ -12,171 +9,64 @@ 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: (nextSigner?: NextSigner) => void;
+  onConfirm: () => void;
   hasUninsertedFields: boolean;
   isSubmitting: boolean;
-  allowDictateNextSigner?: boolean;
-  defaultNextSigner?: NextSigner;
 };
 
-const ZNextSignerFormSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
-});
-
-type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
-
 export function AssistantConfirmationDialog({
   isOpen,
   onClose,
   onConfirm,
   hasUninsertedFields,
   isSubmitting,
-  allowDictateNextSigner = false,
-  defaultNextSigner,
 }: ConfirmationDialogProps) {
-  const form = useForm<TNextSignerFormSchema>({
-    resolver: zodResolver(ZNextSignerFormSchema),
-    defaultValues: {
-      name: defaultNextSigner?.name ?? '',
-      email: defaultNextSigner?.email ?? '',
-    },
-  });
-
   const onOpenChange = () => {
     if (isSubmitting) {
       return;
     }
 
-    form.reset({
-      name: defaultNextSigner?.name ?? '',
-      email: defaultNextSigner?.email ?? '',
-    });
-
     onClose();
   };
 
-  const handleSubmit = () => {
-    // Validate the form and submit it if dictate signer is enabled.
-    if (allowDictateNextSigner) {
-      void form.handleSubmit(onConfirm)();
-      return;
-    }
-
-    onConfirm();
-  };
-
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
-        <Form {...form}>
-          <form>
-            <fieldset disabled={isSubmitting} className="border-none p-0">
         <DialogHeader>
           <DialogTitle>
             <Trans>Complete Document</Trans>
           </DialogTitle>
           <DialogDescription>
             <Trans>
-                    Are you sure you want to complete the document? This action cannot be undone.
+              Are you sure you want to complete the document? This action cannot be undone. Please
-                    Please ensure that you have completed prefilling all relevant fields before
+              ensure that you have completed prefilling all relevant fields before proceeding.
-                    proceeding.
             </Trans>
           </DialogDescription>
         </DialogHeader>
 
-              <div className="mt-4 flex flex-col gap-4">
+        <div className="flex flex-col gap-4">
-                {allowDictateNextSigner && (
+          <DocumentSigningDisclosure />
-                  <div className="my-2">
-                    <p className="text-muted-foreground mb-1 text-sm font-semibold">
-                      The next recipient to sign this document will be{' '}
-                    </p>
-
-                    <div className="flex flex-col gap-4 rounded-xl border p-4 md:flex-row">
-                      <FormField
-                        control={form.control}
-                        name="name"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Name</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                className="mt-2"
-                                placeholder="Enter the next signer's name"
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="email"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Email</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                type="email"
-                                className="mt-2"
-                                placeholder="Enter the next signer's email"
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                <DocumentSigningDisclosure className="mt-4" />
         </div>
 
         <DialogFooter className="mt-4">
-                <Button type="button" variant="secondary" onClick={onClose} disabled={isSubmitting}>
+          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
-                  <Trans>Cancel</Trans>
+            Cancel
           </Button>
           <Button
-                  type="button"
             variant={hasUninsertedFields ? 'destructive' : 'default'}
+            onClick={onConfirm}
             disabled={isSubmitting}
-                  onClick={handleSubmit}
             loading={isSubmitting}
           >
-                  {hasUninsertedFields ? <Trans>Proceed</Trans> : <Trans>Continue</Trans>}
+            {isSubmitting ? 'Submitting...' : hasUninsertedFields ? 'Proceed' : 'Continue'}
           </Button>
         </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
       </DialogContent>
     </Dialog>
   );

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

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

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

@@ -1,92 +0,0 @@
-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 { P, match } from 'ts-pattern';
+import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
@@ -28,6 +28,7 @@ type DocumentDeleteDialogProps = {
   onDelete?: () => Promise<void> | void;
   status: DocumentStatus;
   documentTitle: string;
+  teamId?: number;
   canManageDocument: boolean;
 };
 
@@ -145,7 +146,7 @@ export const DocumentDeleteDialog = ({
                   </ul>
                 </AlertDescription>
               ))
-              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED), () => (
+              .with(DocumentStatus.COMPLETED, () => (
                 <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 { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } from '~/providers/team';
 
 type DocumentDuplicateDialogProps = {
   id: number;
@@ -34,7 +34,7 @@ export const DocumentDuplicateDialog = ({
   const { toast } = useToast();
   const { _ } = useLingui();
 
-  const team = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery(
     {

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

@@ -0,0 +1,124 @@
+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 { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } 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 = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   const { toast } = useToast();
   const { _ } = useLingui();

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

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

@@ -1,163 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { 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

@@ -1,253 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
-import { 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

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

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

@@ -1,123 +0,0 @@
-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-update-dialog.tsx

@@ -1,207 +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 { 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 { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type ManagePublicTemplateDialogProps = {
   directTemplates: (Template & {
@@ -95,7 +95,7 @@ export const ManagePublicTemplateDialog = ({
 
   const [open, onOpenChange] = useState(isOpen);
 
-  const team = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(initialTemplateId);
 

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

@@ -0,0 +1,188 @@
+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, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -7,18 +7,15 @@ 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 { ZCreateTeamRequestSchema } from '@documenso/trpc/server/team-router/create-team.types';
+import { ZCreateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
-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,
@@ -37,37 +34,29 @@ 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 = ZCreateTeamRequestSchema.pick({
+const ZCreateTeamFormSchema = ZCreateTeamMutationSchema.pick({
   teamName: true,
   teamUrl: true,
-  inheritMembers: true,
 });
 
 type TCreateTeamFormSchema = z.infer<typeof ZCreateTeamFormSchema>;
 
-export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDialogProps) => {
+export const TeamCreateDialog = ({ trigger, ...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({
@@ -75,25 +64,24 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
     defaultValues: {
       teamName: '',
       teamUrl: '',
-      inheritMembers: true,
     },
   });
 
-  const { mutateAsync: createTeam } = trpc.team.create.useMutation();
+  const { mutateAsync: createTeam } = trpc.team.createTeam.useMutation();
 
-  const onFormSubmit = async ({ teamName, teamUrl, inheritMembers }: TCreateTeamFormSchema) => {
+  const onFormSubmit = async ({ teamName, teamUrl }: TCreateTeamFormSchema) => {
     try {
-      await createTeam({
+      const response = await createTeam({
-        organisationId: organisation.id,
         teamName,
         teamUrl,
-        inheritMembers,
       });
 
       setOpen(false);
 
-      await onCreated?.();
+      if (response.paymentRequired) {
-      await refreshSession();
+        await navigate(`/settings/teams?tab=pending&checkout=${response.pendingTeamId}`);
+        return;
+      }
 
       toast({
         title: _(msg`Success`),
@@ -126,22 +114,6 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
     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);
@@ -173,37 +145,11 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
             <Trans>Create team</Trans>
           </DialogTitle>
 
-          <DialogDescription>
+          <DialogDescription className="mt-4">
             <Trans>Create a team to collaborate with your team members.</Trans>
           </DialogDescription>
         </DialogHeader>
 
-        {dialogState === 'loading' && <SpinnerBox className="py-32" />}
-
-        {dialogState === 'alert' && (
-          <>
-            <Alert
-              className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-              variant="neutral"
-            >
-              <AlertDescription className="mr-2">
-                <Trans>
-                  You have reached the maximum number of teams for your plan. Please contact sales
-                  at <a href="mailto:support@documenso.com">support@documenso.com</a> if you would
-                  like to adjust your plan.
-                </Trans>
-              </AlertDescription>
-            </Alert>
-
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                <Trans>Cancel</Trans>
-              </Button>
-            </DialogFooter>
-          </>
-        )}
-
-        {dialogState === 'form' && (
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
             <fieldset
@@ -266,31 +212,6 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
                 )}
               />
 
-                <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>
@@ -307,7 +228,6 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
             </fieldset>
           </form>
         </Form>
-        )}
       </DialogContent>
     </Dialog>
   );

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

@@ -8,7 +8,6 @@ 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';
@@ -36,22 +35,15 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type TeamDeleteDialogProps = {
   teamId: number;
   teamName: string;
-  redirectTo?: string;
   trigger?: React.ReactNode;
 };
 
-export const TeamDeleteDialog = ({
+export const TeamDeleteDialog = ({ trigger, teamId, teamName }: TeamDeleteDialogProps) => {
-  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}`);
 
@@ -68,23 +60,19 @@ export const TeamDeleteDialog = ({
     },
   });
 
-  const { mutateAsync: deleteTeam } = trpc.team.delete.useMutation();
+  const { mutateAsync: deleteTeam } = trpc.team.deleteTeam.useMutation();
 
   const onFormSubmit = async () => {
     try {
       await deleteTeam({ teamId });
 
-      await refreshSession();
-
       toast({
         title: _(msg`Success`),
         description: _(msg`Your team has been successfully deleted.`),
         duration: 5000,
       });
 
-      if (redirectTo) {
+      await navigate('/settings/teams');
-        await navigate(redirectTo);
-      }
 
       setOpen(false);
     } catch (err) {
@@ -125,7 +113,7 @@ export const TeamDeleteDialog = ({
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="destructive">
-            <Trans>Delete</Trans>
+            <Trans>Delete team</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: sendTeamEmailVerification, isPending } =
+  const { mutateAsync: createTeamEmailVerification, isPending } =
-    trpc.team.email.verification.send.useMutation();
+    trpc.team.createTeamEmailVerification.useMutation();
 
   const onFormSubmit = async ({ name, email }: TCreateTeamEmailFormSchema) => {
     try {
-      await sendTeamEmailVerification({
+      await createTeamEmailVerification({
         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.email.delete.useMutation({
+    trpc.team.deleteTeamEmail.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -67,7 +67,7 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
     });
 
   const { mutateAsync: deleteTeamEmailVerification, isPending: isDeletingTeamEmailVerification } =
-    trpc.team.email.verification.delete.useMutation({
+    trpc.team.deleteTeamEmailVerification.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.email.update.useMutation();
+  const { mutateAsync: updateTeamEmail } = trpc.team.updateTeamEmail.useMutation();
 
   const onFormSubmit = async ({ name }: TUpdateTeamEmailFormSchema) => {
     try {

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

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

@@ -1,139 +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 { 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

@@ -1,211 +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 { 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

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

@@ -1,304 +0,0 @@
-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;
-  memberId: string;
+  teamMemberId: number;
-  memberName: string;
+  teamMemberName: string;
-  memberEmail: string;
+  teamMemberEmail: string;
   trigger?: React.ReactNode;
 };
 
@@ -32,17 +32,17 @@ export const TeamMemberDeleteDialog = ({
   trigger,
   teamId,
   teamName,
-  memberId,
+  teamMemberId,
-  memberName,
+  teamMemberName,
-  memberEmail,
+  teamMemberEmail,
 }: TeamMemberDeleteDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { mutateAsync: deleteTeamMember, isPending: isDeletingTeamMember } =
+  const { mutateAsync: deleteTeamMembers, isPending: isDeletingTeamMember } =
-    trpc.team.member.delete.useMutation({
+    trpc.team.deleteTeamMembers.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -69,7 +69,7 @@ export const TeamMemberDeleteDialog = ({
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="secondary">
-            <Trans>Remove team member</Trans>
+            <Trans>Delete team member</Trans>
           </Button>
         )}
       </DialogTrigger>
@@ -91,9 +91,9 @@ export const TeamMemberDeleteDialog = ({
         <Alert variant="neutral" padding="tight">
           <AvatarWithText
             avatarClass="h-12 w-12"
-            avatarFallback={memberName.slice(0, 1).toUpperCase()}
+            avatarFallback={teamMemberName.slice(0, 1).toUpperCase()}
-            primaryText={<span className="font-semibold">{memberName}</span>}
+            primaryText={<span className="font-semibold">{teamMemberName}</span>}
-            secondaryText={memberEmail}
+            secondaryText={teamMemberEmail}
           />
         </Alert>
 
@@ -107,9 +107,9 @@ export const TeamMemberDeleteDialog = ({
               type="submit"
               variant="destructive"
               loading={isDeletingTeamMember}
-              onClick={async () => deleteTeamMember({ teamId, memberId })}
+              onClick={async () => deleteTeamMembers({ teamId, teamMemberIds: [teamMemberId] })}
             >
-              <Trans>Remove</Trans>
+              <Trans>Delete</Trans>
             </Button>
           </DialogFooter>
         </fieldset>

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

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

@@ -43,9 +43,9 @@ export type TeamMemberUpdateDialogProps = {
   currentUserTeamRole: TeamMemberRole;
   trigger?: React.ReactNode;
   teamId: number;
-  memberId: string;
+  teamMemberId: number;
-  memberName: string;
+  teamMemberName: string;
-  memberTeamRole: TeamMemberRole;
+  teamMemberRole: TeamMemberRole;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 const ZUpdateTeamMemberFormSchema = z.object({
@@ -58,9 +58,9 @@ export const TeamMemberUpdateDialog = ({
   currentUserTeamRole,
   trigger,
   teamId,
-  memberId,
+  teamMemberId,
-  memberName,
+  teamMemberName,
-  memberTeamRole,
+  teamMemberRole,
   ...props
 }: TeamMemberUpdateDialogProps) => {
   const [open, setOpen] = useState(false);
@@ -71,17 +71,17 @@ export const TeamMemberUpdateDialog = ({
   const form = useForm<ZUpdateTeamMemberSchema>({
     resolver: zodResolver(ZUpdateTeamMemberFormSchema),
     defaultValues: {
-      role: memberTeamRole,
+      role: teamMemberRole,
     },
   });
 
-  const { mutateAsync: updateTeamMember } = trpc.team.member.update.useMutation();
+  const { mutateAsync: updateTeamMember } = trpc.team.updateTeamMember.useMutation();
 
   const onFormSubmit = async ({ role }: ZUpdateTeamMemberSchema) => {
     try {
       await updateTeamMember({
         teamId,
-        memberId,
+        teamMemberId,
         data: {
           role,
         },
@@ -89,7 +89,7 @@ export const TeamMemberUpdateDialog = ({
 
       toast({
         title: _(msg`Success`),
-        description: _(msg`You have updated ${memberName}.`),
+        description: _(msg`You have updated ${teamMemberName}.`),
         duration: 5000,
       });
 
@@ -112,7 +112,7 @@ export const TeamMemberUpdateDialog = ({
 
     form.reset();
 
-    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, memberTeamRole)) {
+    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, teamMemberRole)) {
       setOpen(false);
 
       toast({
@@ -121,7 +121,7 @@ export const TeamMemberUpdateDialog = ({
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentUserTeamRole, memberTeamRole, form, toast]);
+  }, [open, currentUserTeamRole, teamMemberRole, form, toast]);
 
   return (
     <Dialog
@@ -143,9 +143,9 @@ export const TeamMemberUpdateDialog = ({
             <Trans>Update team member</Trans>
           </DialogTitle>
 
-          <DialogDescription>
+          <DialogDescription className="mt-4">
             <Trans>
-              You are currently updating <span className="font-bold">{memberName}.</span>
+              You are currently updating <span className="font-bold">{teamMemberName}.</span>
             </Trans>
           </DialogDescription>
         </DialogHeader>

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

@@ -0,0 +1,272 @@
+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 { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } 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 = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   const form = useForm<TBulkSendFormSchema>({
     resolver: zodResolver(ZBulkSendFormSchema),
@@ -114,7 +114,7 @@ export const TemplateBulkSendDialog = ({
     <Dialog>
       <DialogTrigger asChild>
         {trigger ?? (
-          <Button>
+          <Button variant="outline">
             <Upload className="mr-2 h-4 w-4" />
             <Trans>Bulk Send via CSV</Trans>
           </Button>

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

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

@@ -0,0 +1,158 @@
+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 { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } 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 = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   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 { ZCreateWebhookRequestSchema } from '@documenso/trpc/server/webhook-router/schema';
+import { ZCreateWebhookMutationSchema } 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 { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } from '~/providers/team';
 
 import { WebhookMultiSelectCombobox } from '../general/webhook-multiselect-combobox';
 
-const ZCreateWebhookFormSchema = ZCreateWebhookRequestSchema.omit({ teamId: true });
+const ZCreateWebhookFormSchema = ZCreateWebhookMutationSchema.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 = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   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 { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } 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 = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   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 { DocumentMeta, Recipient, Signature, TemplateMeta } from '@prisma/client';
 import { type DocumentData, type Field, FieldType } from '@prisma/client';
+import type { DocumentMeta, Recipient, Signature, TemplateMeta } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSearchParams } from 'react-router';
@@ -13,10 +13,6 @@ 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 {
@@ -25,11 +21,12 @@ 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 { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
@@ -68,8 +65,16 @@ export const EmbedDirectTemplateClientPage = ({
 
   const [searchParams] = useSearchParams();
 
-  const { fullName, email, signature, setFullName, setEmail, setSignature } =
+  const {
-    useRequiredDocumentSigningContext();
+    fullName,
+    email,
+    signature,
+    signatureValid,
+    setFullName,
+    setEmail,
+    setSignature,
+    setSignatureValid,
+  } = useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
@@ -87,7 +92,7 @@ export const EmbedDirectTemplateClientPage = ({
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
 
   const [pendingFields, _completedFields] = [
-    localFields.filter((field) => isFieldUnsignedAndRequired(field)),
+    localFields.filter((field) => !field.inserted),
     localFields.filter((field) => field.inserted),
   ];
 
@@ -105,7 +110,7 @@ export const EmbedDirectTemplateClientPage = ({
 
         const newField: DirectTemplateLocalField = structuredClone({
           ...field,
-          customText: payload.value ?? '',
+          customText: payload.value,
           inserted: true,
           signedValue: payload,
         });
@@ -116,10 +121,8 @@ export const EmbedDirectTemplateClientPage = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64:
+            signatureImageAsBase64: payload.value.startsWith('data:') ? payload.value : null,
-              payload.value && payload.value.startsWith('data:') ? payload.value : null,
+            typedSignature: payload.value.startsWith('data:') ? null : payload.value,
-            typedSignature:
-              payload.value && !payload.value.startsWith('data:') ? payload.value : null,
           } satisfies Signature;
         }
 
@@ -177,7 +180,7 @@ export const EmbedDirectTemplateClientPage = ({
   };
 
   const onNextFieldClick = () => {
-    validateFieldsInserted(pendingFields);
+    validateFieldsInserted(localFields);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -185,7 +188,11 @@ export const EmbedDirectTemplateClientPage = ({
 
   const onCompleteClick = async () => {
     try {
-      const valid = validateFieldsInserted(pendingFields);
+      if (hasSignatureField && !signatureValid) {
+        return;
+      }
+
+      const valid = validateFieldsInserted(localFields);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -198,6 +205,12 @@ export const EmbedDirectTemplateClientPage = ({
         directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
       }
 
+      localFields.forEach((field) => {
+        if (!field.signedValue) {
+          throw new Error('Invalid configuration');
+        }
+      });
+
       const {
         documentId,
         token: documentToken,
@@ -208,11 +221,13 @@ export const EmbedDirectTemplateClientPage = ({
         directRecipientName: fullName,
         directRecipientEmail: email,
         templateUpdatedAt: updatedAt,
-        signedFieldValues: localFields
+        signedFieldValues: localFields.map((field) => {
-          .filter((field) => {
+          if (!field.signedValue) {
-            return field.signedValue && (isRequiredField(field) || field.inserted);
+            throw new Error('Invalid configuration');
-          })
+          }
-          .map((field) => field.signedValue!),
+
+          return field.signedValue;
+        }),
       });
 
       if (window.parent) {
@@ -400,26 +415,42 @@ export const EmbedDirectTemplateClientPage = ({
                   />
                 </div>
 
-                {hasSignatureField && (
                 <div>
                   <Label htmlFor="Signature">
                     <Trans>Signature</Trans>
                   </Label>
 
-                    <SignaturePadDialog
+                  <Card className="mt-2" gradient degrees={-120}>
-                      className="mt-2"
+                    <CardContent className="p-0">
+                      <SignaturePad
+                        className="h-44 w-full"
                         disabled={isThrottled || isSubmitting}
-                      disableAnimation
+                        defaultValue={signature ?? undefined}
-                      value={signature ?? ''}
+                        onChange={(value) => {
-                      onChange={(v) => setSignature(v ?? '')}
+                          setSignature(value);
-                      typedSignatureEnabled={metadata?.typedSignatureEnabled}
+                        }}
-                      uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
+                        onValidityChange={(isValid) => {
-                      drawSignatureEnabled={metadata?.drawSignatureEnabled}
+                          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>
               </div>
+            </div>
 
             <div className="hidden flex-1 group-data-[expanded]/document-widget:block md:block" />
 

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

@@ -10,6 +10,7 @@ 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,8 +54,6 @@ 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, useMemo, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -15,19 +15,18 @@ 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 { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
@@ -37,7 +36,6 @@ 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';
@@ -49,7 +47,6 @@ export type EmbedSignDocumentClientPageProps = {
   documentData: DocumentData;
   recipient: RecipientWithFields;
   fields: Field[];
-  completedFields: DocumentField[];
   metadata?: DocumentMeta | TemplateMeta | null;
   isCompleted?: boolean;
   hidePoweredBy?: boolean;
@@ -63,7 +60,6 @@ export const EmbedSignDocumentClientPage = ({
   documentData,
   recipient,
   fields,
-  completedFields,
   metadata,
   isCompleted,
   hidePoweredBy = false,
@@ -73,8 +69,15 @@ export const EmbedSignDocumentClientPage = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { fullName, email, signature, setFullName, setSignature } =
+  const {
-    useRequiredDocumentSigningContext();
+    fullName,
+    email,
+    signature,
+    signatureValid,
+    setFullName,
+    setSignature,
+    setSignatureValid,
+  } = useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
@@ -89,8 +92,6 @@ 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);
 
@@ -100,26 +101,19 @@ export const EmbedSignDocumentClientPage = ({
   const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
 
   const [pendingFields, _completedFields] = [
-    fields.filter(
+    fields.filter((field) => field.recipientId === recipient.id && !field.inserted),
-      (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(fieldsRequiringValidation);
+    validateFieldsInserted(fields);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -127,7 +121,11 @@ export const EmbedSignDocumentClientPage = ({
 
   const onCompleteClick = async () => {
     try {
-      const valid = validateFieldsInserted(fieldsRequiringValidation);
+      if (hasSignatureField && !signatureValid) {
+        return;
+      }
+
+      const valid = validateFieldsInserted(fields);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -208,7 +206,6 @@ 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');
@@ -421,24 +418,40 @@ export const EmbedSignDocumentClientPage = ({
                         />
                       </div>
 
-                      {hasSignatureField && (
                       <div>
                         <Label htmlFor="Signature">
                           <Trans>Signature</Trans>
                         </Label>
 
-                          <SignaturePadDialog
+                        <Card className="mt-2" gradient degrees={-120}>
-                            className="mt-2"
+                          <CardContent className="p-0">
+                            <SignaturePad
+                              className="h-44 w-full"
                               disabled={isThrottled || isSubmitting}
-                            disableAnimation
+                              defaultValue={signature ?? undefined}
-                            value={signature ?? ''}
+                              onChange={(value) => {
-                            onChange={(v) => setSignature(v ?? '')}
+                                setSignature(value);
-                            typedSignatureEnabled={metadata?.typedSignatureEnabled}
+                              }}
-                            uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
+                              onValidityChange={(isValid) => {
-                            drawSignatureEnabled={metadata?.drawSignatureEnabled}
+                                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>
                     </>
                   )}
                 </div>
@@ -454,7 +467,9 @@ export const EmbedSignDocumentClientPage = ({
                 ) : (
                   <Button
                     className={allowDocumentRejection ? 'col-start-2' : 'col-span-2'}
-                    disabled={isThrottled}
+                    disabled={
+                      isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
+                    }
                     loading={isSubmitting}
                     onClick={() => throttledOnCompleteClick()}
                   >
@@ -475,9 +490,6 @@ 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 { refreshSession } = useSession();
+  const { revalidate } = useRevalidator();
 
   const [isOpen, setIsOpen] = useState(false);
   const [twoFactorDisableMethod, setTwoFactorDisableMethod] = useState<'totp' | 'backup'>('totp');
@@ -92,7 +92,7 @@ export const DisableAuthenticatorAppDialog = () => {
         onCloseTwoFactorDisableDialog();
       });
 
-      await refreshSession();
+      await revalidate();
     } 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 { refreshSession } = useSession();
+  const { revalidate } = useRevalidator();
 
   const [isOpen, setIsOpen] = useState(false);
   const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
@@ -74,7 +74,6 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     try {
       const data = await authClient.twoFactor.setup();
-      await refreshSession();
 
       setSetup2FAData(data);
     } catch (err) {
@@ -93,7 +92,6 @@ 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?.();
@@ -141,6 +139,7 @@ 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/document-preferences-form.tsx

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

@@ -1,177 +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 { 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,15 +19,12 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZProfileFormSchema = z.object({
-  name: z
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
-    .string()
+  signature: z.string().min(1, 'Signature Pad cannot be empty'),
-    .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({
@@ -112,20 +109,22 @@ 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, value } }) => (
+            render={({ field: { onChange } }) => (
               <FormItem>
                 <FormLabel>
                   <Trans>Signature</Trans>
                 </FormLabel>
                 <FormControl>
-                  <SignaturePadDialog
+                  <SignaturePad
+                    className="h-44 w-full"
                     disabled={isSubmitting}
-                    value={value}
+                    containerClassName={cn('rounded-lg border bg-background')}
+                    defaultValue={user.signature ?? undefined}
                     onChange={(v) => onChange(v ?? '')}
+                    allowTypedSignature={true}
                   />
                 </FormControl>
                 <FormMessage />
@@ -135,7 +134,7 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
         </fieldset>
 
         <Button type="submit" loading={isSubmitting} className="self-end">
-          <Trans>Update profile</Trans>
+          {isSubmitting ? <Trans>Updating 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,
-  ZUpdateTeamPublicProfileMutationSchema,
+  ZUpdatePublicProfileMutationSchema,
-} from '@documenso/trpc/server/team-router/schema';
+} from '@documenso/trpc/server/profile-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 = ZUpdateTeamPublicProfileMutationSchema.pick({
+export const ZPublicProfileFormSchema = ZUpdatePublicProfileMutationSchema.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 = '/dashboard';
+const LOGIN_REDIRECT_PATH = '/documents';
 
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),

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

@@ -1,10 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 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';
@@ -14,6 +15,7 @@ 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';
@@ -28,11 +30,14 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 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
@@ -42,6 +47,14 @@ 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) => {
@@ -58,6 +71,8 @@ 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>;
@@ -82,14 +97,19 @@ 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),
@@ -97,13 +117,17 @@ export const SignUpForm = ({
 
   const isSubmitting = form.formState.isSubmitting;
 
-  const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
+  const name = form.watch('name');
+  const url = form.watch('url');
+
+  const onFormSubmit = async ({ name, email, password, signature, url }: TSignUpFormSchema) => {
     try {
       await authClient.emailPassword.signUp({
         name,
         email,
         password,
         signature,
+        url,
       });
 
       await navigate(`/unverified-account`);
@@ -126,12 +150,27 @@ 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');
+    }
   };
 
   const onSignUpWithGoogleClick = async () => {
@@ -192,18 +231,31 @@ export const SignUpForm = ({
             <Trans>User profiles are here!</Trans>
           </div>
 
-          <div className="w-full max-w-md">
+          <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"
                 />
-          </div>
+              </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 />
         </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>
@@ -216,6 +268,22 @@ export const SignUpForm = ({
               </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>
+        )}
 
         <hr className="-mx-6 my-4" />
 
@@ -224,6 +292,7 @@ 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',
@@ -284,15 +353,16 @@ export const SignUpForm = ({
                 <FormField
                   control={form.control}
                   name="signature"
-                render={({ field: { onChange, value } }) => (
+                  render={({ field: { onChange } }) => (
                     <FormItem>
                       <FormLabel>
                         <Trans>Sign Here</Trans>
                       </FormLabel>
                       <FormControl>
-                      <SignaturePadDialog
+                        <SignaturePad
+                          className="h-36 w-full"
                           disabled={isSubmitting}
-                        value={value}
+                          containerClassName="mt-2 rounded-lg border bg-background"
                           onChange={(v) => onChange(v ?? '')}
                         />
                       </FormControl>
@@ -355,39 +425,112 @@ export const SignUpForm = ({
                   </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>
+              )}
+
+              {step === 'CLAIM_USERNAME' && (
+                <p className="text-muted-foreground text-sm">
+                  <span className="font-medium">
+                    <Trans>Claim username</Trans>
+                  </span>{' '}
+                  2/2
+                </p>
+              )}
+
+              <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>
+              )}
+
+              {/* Sign up button */}
+              {step === 'CLAIM_USERNAME' && (
                 <Button
                   loading={form.formState.isSubmitting}
                   disabled={!form.formState.isValid}
                   type="submit"
                   size="lg"
-              className="mt-6 w-full"
+                  className="flex-1"
                 >
                   <Trans>Complete</Trans>
                 </Button>
+              )}
+            </div>
           </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

@@ -1,155 +0,0 @@
-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-branding-preferences-form.tsx

@@ -1,14 +1,17 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { TeamGlobalSettings } from '@prisma/client';
+import type { Team, 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 {
@@ -22,11 +25,12 @@ 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 ZBrandingPreferencesFormSchema = z.object({
+const ZTeamBrandingPreferencesFormSchema = z.object({
   brandingEnabled: z.boolean(),
   brandingLogo: z
     .instanceof(File)
@@ -40,36 +44,74 @@ const ZBrandingPreferencesFormSchema = z.object({
   brandingCompanyDetails: z.string().max(500).optional(),
 });
 
-export type TBrandingPreferencesFormSchema = z.infer<typeof ZBrandingPreferencesFormSchema>;
+type TTeamBrandingPreferencesFormSchema = z.infer<typeof ZTeamBrandingPreferencesFormSchema>;
 
-type SettingsSubset = Pick<
+export type TeamBrandingPreferencesFormProps = {
-  TeamGlobalSettings,
+  team: Team;
-  'brandingEnabled' | 'brandingLogo' | 'brandingUrl' | 'brandingCompanyDetails'
+  settings?: TeamGlobalSettings | null;
->;
-
-export type BrandingPreferencesFormProps = {
-  settings: SettingsSubset;
-  onFormSubmit: (data: TBrandingPreferencesFormSchema) => Promise<void>;
 };
 
-export function BrandingPreferencesForm({ settings, onFormSubmit }: BrandingPreferencesFormProps) {
+export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPreferencesFormProps) {
-  const { t } = useLingui();
+  const { _ } = useLingui();
+  const { toast } = useToast();
 
   const [previewUrl, setPreviewUrl] = useState<string>('');
   const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
 
-  const form = useForm<TBrandingPreferencesFormSchema>({
+  const { mutateAsync: updateTeamBrandingSettings } =
+    trpc.team.updateTeamBrandingSettings.useMutation();
+
+  const form = useForm<TTeamBrandingPreferencesFormSchema>({
     defaultValues: {
       brandingEnabled: settings?.brandingEnabled ?? false,
       brandingUrl: settings?.brandingUrl ?? '',
       brandingLogo: undefined,
       brandingCompanyDetails: settings?.brandingCompanyDetails ?? '',
     },
-    resolver: zodResolver(ZBrandingPreferencesFormSchema),
+    resolver: zodResolver(ZTeamBrandingPreferencesFormSchema),
   });
 
   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);
@@ -100,8 +142,11 @@ export function BrandingPreferencesForm({ settings, onFormSubmit }: BrandingPref
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <fieldset className="flex h-full flex-col gap-y-4" disabled={form.formState.isSubmitting}>
+        <fieldset
+          className="flex h-full max-w-xl flex-col gap-y-4"
+          disabled={form.formState.isSubmitting}
+        >
           <FormField
             control={form.control}
             name="brandingEnabled"
@@ -147,8 +192,7 @@ export function BrandingPreferencesForm({ settings, onFormSubmit }: BrandingPref
                         />
                       ) : (
                         <div className="bg-muted/20 dark:bg-muted text-muted-foreground relative flex h-full w-full items-center justify-center text-sm">
-                          <Trans>Please upload a logo</Trans>
+                          Please upload a logo
-
                           {!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" />
@@ -247,7 +291,7 @@ export function BrandingPreferencesForm({ settings, onFormSubmit }: BrandingPref
 
                   <FormControl>
                     <Textarea
-                      placeholder={t`Enter your brand details`}
+                      placeholder={_(msg`Enter your brand details`)}
                       className="min-h-[100px] resize-y"
                       disabled={!isBrandingEnabled}
                       {...field}
@@ -264,7 +308,7 @@ export function BrandingPreferencesForm({ settings, onFormSubmit }: BrandingPref
 
           <div className="flex flex-row justify-end space-x-4">
             <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Update</Trans>
+              <Trans>Save</Trans>
             </Button>
           </div>
         </fieldset>

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

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

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

@@ -1,8 +1,10 @@
 import { type HTMLAttributes, useEffect, useState } from 'react';
 
 import { MenuIcon, SearchIcon } from 'lucide-react';
-import { Link, useParams } from 'react-router';
+import { Link, useLocation, 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';
 
@@ -13,10 +15,14 @@ import { AppNavDesktop } from './app-nav-desktop';
 import { AppNavMobile } from './app-nav-mobile';
 import { MenuSwitcher } from './menu-switcher';
 
-export type HeaderProps = HTMLAttributes<HTMLDivElement>;
+export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
+  user: SessionUser;
+  teams: TGetTeamsResponse;
+};
 
-export const Header = ({ className, ...props }: HeaderProps) => {
+export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
   const params = useParams();
+  const { pathname } = useLocation();
 
   const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
@@ -32,6 +38,16 @@ export const Header = ({ className, ...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(
@@ -43,7 +59,7 @@ export const Header = ({ className, ...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 })}`}
+          to={`${getRootHref(params, { returnEmptyRootString: true })}/documents`}
           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" />
@@ -51,8 +67,11 @@ export const Header = ({ className, ...props }: HeaderProps) => {
 
         <AppNavDesktop setIsCommandMenuOpen={setIsCommandMenuOpen} />
 
-        <div className="flex gap-x-4 md:ml-8">
+        <div
-          <MenuSwitcher />
+          className="flex gap-x-4 md:ml-8"
+          title={selectedTeam ? selectedTeam.name : (user.name ?? '')}
+        >
+          <MenuSwitcher user={user} teams={teams} />
         </div>
 
         <div className="flex flex-row items-center space-x-4 md:hidden">

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

@@ -4,8 +4,6 @@ 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';
 
@@ -57,15 +55,7 @@ export const AppNavDesktop = ({
       )}
       {...props}
     >
-      <div>
+      <div className="flex items-baseline gap-x-6">
-        <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}
@@ -82,14 +72,11 @@ export const AppNavDesktop = ({
             {_(label)}
           </Link>
         ))}
-            </motion.div>
-          )}
-        </AnimatePresence>
       </div>
 
       <Button
         variant="outline"
-        className="text-muted-foreground flex w-full max-w-96 items-center justify-between rounded-lg"
+        className="text-muted-foreground flex 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,48 +1,62 @@
-import { useMemo, useState } from 'react';
+import { 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 { InternalClaimPlans } from '@documenso/ee/server-only/stripe/get-internal-claim-plans';
+import type { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { toHumanPrice } from '@documenso/lib/universal/stripe/to-human-price';
 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 = {
-  plans: InternalClaimPlans;
+  prices: PriceIntervals;
 };
 
-export const BillingPlans = ({ plans }: BillingPlansProps) => {
+export const BillingPlans = ({ prices }: BillingPlansProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const isMounted = useIsMounted();
 
-  const organisation = useCurrentOrganisation();
+  const [interval, setInterval] = useState<Interval>('month');
-
-  const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
   const [checkoutSessionPriceId, setCheckoutSessionPriceId] = useState<string | null>(null);
 
-  const { mutateAsync: createSubscription } = trpc.billing.subscription.create.useMutation();
+  const { mutateAsync: createCheckoutSession } = trpc.profile.createCheckoutSession.useMutation();
 
   const onSubscribeClick = async (priceId: string) => {
     try {
       setCheckoutSessionPriceId(priceId);
 
-      const { redirectUrl } = await createSubscription({
+      const url = await createCheckoutSession({ priceId });
-        organisationId: organisation.id,
-        priceId,
-      });
 
-      window.open(redirectUrl, '_blank');
+      if (!url) {
+        throw new Error('Unable to create session');
+      }
+
+      window.open(url);
     } catch (_err) {
       toast({
         title: _(msg`Something went wrong`),
@@ -54,37 +68,24 @@ export const BillingPlans = ({ plans }: 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
+      <Tabs value={interval} onValueChange={(value) => isInterval(value) && setInterval(value)}>
-        value={interval}
-        onValueChange={(value) => setInterval(value as 'monthlyPrice' | 'yearlyPrice')}
-      >
         <TabsList>
-          <TabsTrigger className="min-w-[150px]" value="monthlyPrice">
+          {INTERVALS.map(
-            <Trans>Monthly</Trans>
+            (interval) =>
-          </TabsTrigger>
+              prices[interval].length > 0 && (
-          <TabsTrigger className="min-w-[150px]" value="yearlyPrice">
+                <TabsTrigger key={interval} className="min-w-[150px]" value={interval}>
-            <Trans>Yearly</Trans>
+                  {_(FRIENDLY_INTERVALS[interval])}
                 </TabsTrigger>
+              ),
+          )}
         </TabsList>
       </Tabs>
 
       <div className="mt-8 grid gap-8 lg:grid-cols-2 2xl:grid-cols-3">
         <AnimatePresence mode="wait">
-          {pricesToDisplay.map((price) => (
+          {prices[interval].map((price) => (
             <MotionCard
               key={price.id}
               initial={{ opacity: isMounted ? 0 : 1, y: isMounted ? 20 : 0 }}
@@ -95,14 +96,8 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
                 <CardTitle>{price.product.name}</CardTitle>
 
                 <div className="text-muted-foreground mt-2 text-lg font-medium">
-                  {price.friendlyPrice + ' '}
+                  ${toHumanPrice(price.unit_amount ?? 0)} {price.currency.toUpperCase()}{' '}
-                  <span className="text-xs">
+                  <span className="text-xs">per {interval}</span>
-                    {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

@@ -0,0 +1,48 @@
+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-configure-form.tsx

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

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

@@ -113,11 +113,7 @@ export const DirectTemplatePageView = ({
 
       const redirectUrl = template.templateMeta?.redirectUrl;
 
-      if (redirectUrl) {
+      await (redirectUrl ? navigate(redirectUrl) : navigate(`/sign/${token}/complete`));
-        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 { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Field, Recipient, Signature } from '@prisma/client';
@@ -24,6 +24,7 @@ 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,
@@ -34,7 +35,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 { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useStep } from '@documenso/ui/primitives/stepper';
 
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
@@ -72,7 +73,8 @@ export const DirectTemplateSigningForm = ({
   template,
   onSubmit,
 }: DirectTemplateSigningFormProps) => {
-  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
+  const { fullName, signature, signatureValid, setFullName, setSignature } =
+    useRequiredDocumentSigningContext();
 
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
@@ -89,7 +91,7 @@ export const DirectTemplateSigningForm = ({
 
         const tempField: DirectTemplateLocalField = {
           ...field,
-          customText: value.value ?? '',
+          customText: value.value,
           inserted: true,
           signedValue: value,
         };
@@ -100,8 +102,8 @@ export const DirectTemplateSigningForm = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64: value.value?.startsWith('data:') ? value.value : null,
+            signatureImageAsBase64: value.value.startsWith('data:') ? value.value : null,
-            typedSignature: value.value && !value.value.startsWith('data:') ? value.value : null,
+            typedSignature: value.value.startsWith('data:') ? null : value.value,
           } satisfies Signature;
         }
 
@@ -133,6 +135,8 @@ export const DirectTemplateSigningForm = ({
     );
   };
 
+  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
+
   const uninsertedFields = useMemo(() => {
     return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
   }, [localFields]);
@@ -145,6 +149,10 @@ export const DirectTemplateSigningForm = ({
   const handleSubmit = async () => {
     setValidateUninsertedFields(true);
 
+    if (hasSignatureField && !signatureValid) {
+      return;
+    }
+
     const isFieldsValid = validateFieldsInserted(localFields);
 
     if (!isFieldsValid) {
@@ -162,55 +170,6 @@ 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} />
@@ -232,8 +191,6 @@ export const DirectTemplateSigningForm = ({
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
                   typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
-                  uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
-                  drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
                 />
               ))
               .with(FieldType.INITIALS, () => (
@@ -378,15 +335,19 @@ export const DirectTemplateSigningForm = ({
                 <Trans>Signature</Trans>
               </Label>
 
-              <SignaturePadDialog
+              <Card className="mt-2" gradient degrees={-120}>
-                className="mt-2"
+                <CardContent className="p-0">
+                  <SignaturePad
+                    className="h-44 w-full"
                     disabled={isSubmitting}
-                value={signature ?? ''}
+                    defaultValue={signature ?? undefined}
-                onChange={(value) => setSignature(value)}
+                    onChange={(value) => {
-                typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+                      setSignature(value);
-                uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+                    }}
-                drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
+                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
                   />
+                </CardContent>
+              </Card>
             </div>
           </div>
         </div>

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

@@ -97,10 +97,6 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      if (!isLengthConditionMet) {
-        return;
-      }
-
       const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
@@ -198,30 +194,18 @@ export const DocumentSigningCheckboxField = ({
 
       setCheckedValues(updatedValues);
 
-      const removePayload: TRemovedSignedFieldWithTokenMutationSchema = {
+      await removeSignedFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-      };
+      });
 
-      if (onUnsignField) {
+      if (updatedValues.length > 0) {
-        await onUnsignField(removePayload);
+        await signFieldWithToken({
-      } 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);
@@ -270,19 +254,19 @@ export const DocumentSigningCheckboxField = ({
               {validationSign?.label} {checkboxValidationLength}
             </FieldToolTip>
           )}
-          <div className="z-50 flex flex-col gap-y-2">
+          <div className="z-50 my-0.5 flex flex-col gap-y-1">
             {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
               const itemValue = item.value || `empty-value-${item.id}`;
 
               return (
                 <div key={index} className="flex items-center gap-x-1.5">
                   <Checkbox
-                    className="h-4 w-4"
+                    className="h-3 w-3"
                     id={`checkbox-${index}`}
                     checked={checkedValues.includes(itemValue)}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                   />
-                  <Label htmlFor={`checkbox-${index}`}>
+                  <Label htmlFor={`checkbox-${index}`} className="text-xs font-normal">
                     {item.value.includes('empty-value-') ? '' : item.value}
                   </Label>
                 </div>
@@ -293,7 +277,7 @@ export const DocumentSigningCheckboxField = ({
       )}
 
       {field.inserted && (
-        <div className="flex flex-col gap-y-1">
+        <div className="my-0.5 flex flex-col gap-y-1">
           {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
             const itemValue = item.value || `empty-value-${item.id}`;
 
@@ -306,7 +290,7 @@ export const DocumentSigningCheckboxField = ({
                   disabled={isLoading}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />
-                <Label htmlFor={`checkbox-${index}`} className="text-xs">
+                <Label htmlFor={`checkbox-${index}`} className="text-xs font-normal">
                   {item.value.includes('empty-value-') ? '' : item.value}
                 </Label>
               </div>

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

@@ -1,12 +1,8 @@
 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';
@@ -17,15 +13,6 @@ 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';
 
@@ -34,23 +21,11 @@ export type DocumentSigningCompleteDialogProps = {
   documentTitle: string;
   fields: Field[];
   fieldsValidated: () => void | Promise<void>;
-  onSignatureComplete: (nextSigner?: { name: string; email: string }) => void | Promise<void>;
+  onSignatureComplete: () => 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,
@@ -59,54 +34,19 @@ 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 (form.formState.isSubmitting || !isComplete) {
+    if (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>
@@ -118,36 +58,21 @@ export const DocumentSigningCompleteDialog = ({
           loading={isSubmitting}
           disabled={disabled}
         >
-          {match({ isComplete, role })
+          {isComplete ? <Trans>Complete</Trans> : <Trans>Next field</Trans>}
-            .with({ isComplete: false }, () => <Trans>Next field</Trans>)
-            .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
-            .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
-              <Trans>Mark as viewed</Trans>
-            ))
-            .with({ isComplete: true }, () => <Trans>Complete</Trans>)
-            .exhaustive()}
         </Button>
       </DialogTrigger>
 
       <DialogContent>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
         <DialogTitle>
           <div className="text-foreground text-xl font-semibold">
-                  {match(role)
+            {role === RecipientRole.VIEWER && <Trans>Complete Viewing</Trans>}
-                    .with(RecipientRole.VIEWER, () => <Trans>Complete Viewing</Trans>)
+            {role === RecipientRole.SIGNER && <Trans>Complete Signing</Trans>}
-                    .with(RecipientRole.SIGNER, () => <Trans>Complete Signing</Trans>)
+            {role === RecipientRole.APPROVER && <Trans>Complete Approval</Trans>}
-                    .with(RecipientRole.APPROVER, () => <Trans>Complete Approval</Trans>)
-                    .with(RecipientRole.CC, () => <Trans>Complete Viewing</Trans>)
-                    .with(RecipientRole.ASSISTANT, () => <Trans>Complete Assisting</Trans>)
-                    .exhaustive()}
           </div>
         </DialogTitle>
 
         <div className="text-muted-foreground max-w-[50ch]">
-                {match(role)
+          {role === RecipientRole.VIEWER && (
-                  .with(RecipientRole.VIEWER, () => (
             <span>
               <Trans>
                 <span className="inline-flex flex-wrap">
@@ -160,8 +85,8 @@ export const DocumentSigningCompleteDialog = ({
                 <br /> Are you sure?
               </Trans>
             </span>
-                  ))
+          )}
-                  .with(RecipientRole.SIGNER, () => (
+          {role === RecipientRole.SIGNER && (
             <span>
               <Trans>
                 <span className="inline-flex flex-wrap">
@@ -174,8 +99,8 @@ export const DocumentSigningCompleteDialog = ({
                 <br /> Are you sure?
               </Trans>
             </span>
-                  ))
+          )}
-                  .with(RecipientRole.APPROVER, () => (
+          {role === RecipientRole.APPROVER && (
             <span>
               <Trans>
                 <span className="inline-flex flex-wrap">
@@ -188,126 +113,37 @@ export const DocumentSigningCompleteDialog = ({
                 <br /> Are you sure?
               </Trans>
             </span>
-                  ))
-                  .otherwise(() => (
-                    <span>
-                      <Trans>
-                        <span className="inline-flex flex-wrap">
-                          You are about to complete viewing "
-                          <span className="inline-block max-w-[11rem] truncate align-baseline">
-                            {documentTitle}
-                          </span>
-                          ".
-                        </span>
-                        <br /> Are you sure?
-                      </Trans>
-                    </span>
-                  ))}
-              </div>
-
-              {allowDictateNextSigner && (
-                <div className="mt-4 flex flex-col gap-4">
-                  {!isEditingNextSigner && (
-                    <div>
-                      <p className="text-muted-foreground text-sm">
-                        The next recipient to sign this document will be{' '}
-                        <span className="font-semibold">{form.watch('name')}</span> (
-                        <span className="font-semibold">{form.watch('email')}</span>).
-                      </p>
-
-                      <Button
-                        type="button"
-                        className="mt-2"
-                        variant="outline"
-                        size="sm"
-                        onClick={() => setIsEditingNextSigner((prev) => !prev)}
-                      >
-                        <Trans>Update Recipient</Trans>
-                      </Button>
-                    </div>
-                  )}
-
-                  {isEditingNextSigner && (
-                    <div className="flex flex-col gap-4 md:flex-row">
-                      <FormField
-                        control={form.control}
-                        name="name"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Name</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                className="mt-2"
-                                placeholder="Enter the next signer's name"
-                              />
-                            </FormControl>
-
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="email"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Email</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                type="email"
-                                className="mt-2"
-                                placeholder="Enter the next signer's email"
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
           )}
         </div>
-              )}
 
         <DocumentSigningDisclosure className="mt-4" />
 
-              <DialogFooter className="mt-4">
+        <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)}
+              onClick={() => {
-                    disabled={form.formState.isSubmitting}
+                setShowDialog(false);
+              }}
             >
               <Trans>Cancel</Trans>
             </Button>
 
             <Button
-                    type="submit"
+              type="button"
               className="flex-1"
-                    disabled={!isComplete || !isNextSignerValid}
+              disabled={!isComplete}
-                    loading={form.formState.isSubmitting}
+              loading={isSubmitting}
+              onClick={onSignatureComplete}
             >
-                    {match(role)
+              {role === RecipientRole.VIEWER && <Trans>Mark as Viewed</Trans>}
-                      .with(RecipientRole.VIEWER, () => <Trans>Mark as Viewed</Trans>)
+              {role === RecipientRole.SIGNER && <Trans>Sign</Trans>}
-                      .with(RecipientRole.SIGNER, () => <Trans>Sign</Trans>)
+              {role === RecipientRole.APPROVER && <Trans>Approve</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-date-field.tsx

@@ -151,12 +151,10 @@ export const DocumentSigningDateField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-muted-foreground dark:text-background/80 w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
+                '!text-center': parsedFieldMeta?.textAlign === 'center',
-                'text-center':
+                '!text-right': parsedFieldMeta?.textAlign === 'right',
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >

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

@@ -136,12 +136,10 @@ export const DocumentSigningEmailField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-muted-foreground dark:text-background/80 w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
+                '!text-center': parsedFieldMeta?.textAlign === 'center',
-                'text-center':
+                '!text-right': parsedFieldMeta?.textAlign === 'right',
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >

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

@@ -18,16 +18,14 @@ 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 { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import {
+import { AssistantConfirmationDialog } from '../../dialogs/assistant-confirmation-dialog';
-  AssistantConfirmationDialog,
-  type NextSigner,
-} from '../../dialogs/assistant-confirmation-dialog';
 import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 
@@ -61,17 +59,15 @@ export const DocumentSigningForm = ({
 
   const assistantSignersId = useId();
 
-  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
+  const { fullName, signature, setFullName, setSignature, signatureValid, setSignatureValid } =
+    useRequiredDocumentSigningContext();
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
   const [isAssistantSubmitting, setIsAssistantSubmitting] = useState(false);
 
-  const {
+  const { mutateAsync: completeDocumentWithToken } =
-    mutateAsync: completeDocumentWithToken,
+    trpc.recipient.completeDocumentWithToken.useMutation();
-    isPending,
-    isSuccess,
-  } = trpc.recipient.completeDocumentWithToken.useMutation();
 
   const assistantForm = useForm<{ selectedSignerId: number | undefined }>({
     defaultValues: {
@@ -79,8 +75,10 @@ export const DocumentSigningForm = ({
     },
   });
 
+  const { handleSubmit, formState } = useForm();
+
   // Keep the loading state going if successful since the redirect may take some time.
-  const isSubmitting = isPending || isSuccess;
+  const isSubmitting = formState.isSubmitting || formState.isSubmitSuccessful;
 
   const fieldsRequiringValidation = useMemo(
     () => fields.filter(isFieldUnsignedAndRequired),
@@ -102,6 +100,22 @@ 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;
@@ -110,11 +124,11 @@ export const DocumentSigningForm = ({
     setIsConfirmationDialogOpen(true);
   };
 
-  const handleAssistantConfirmDialogSubmit = async (nextSigner?: NextSigner) => {
+  const handleAssistantConfirmDialogSubmit = async () => {
     setIsAssistantSubmitting(true);
 
     try {
-      await completeDocument(undefined, nextSigner);
+      await completeDocument();
     } catch (err) {
       toast({
         title: 'Error',
@@ -127,18 +141,12 @@ export const DocumentSigningForm = ({
     }
   };
 
-  const completeDocument = async (
+  const completeDocument = async (authOptions?: TRecipientActionAuth) => {
-    authOptions?: TRecipientActionAuth,
+    await completeDocumentWithToken({
-    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,
@@ -153,29 +161,6 @@ 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(
@@ -225,19 +210,12 @@ 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}
-                    allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
+                    disabled={!isRecipientsTurn}
-                    defaultNextSigner={
-                      nextRecipient
-                        ? { name: nextRecipient.name, email: nextRecipient.email }
-                        : undefined
-                    }
                   />
                 </div>
               </div>
@@ -316,8 +294,9 @@ export const DocumentSigningForm = ({
                     className="w-full"
                     size="lg"
                     loading={isAssistantSubmitting}
+                    disabled={isAssistantSubmitting || uninsertedRecipientFields.length > 0}
                   >
-                    <Trans>Continue</Trans>
+                    {isAssistantSubmitting ? <Trans>Submitting...</Trans> : <Trans>Continue</Trans>}
                   </Button>
                 </div>
 
@@ -327,26 +306,14 @@ 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>
             </>
           ) : (
             <>
-              <div>
+              <form onSubmit={handleSubmit(onFormSubmit)}>
                 <p className="text-muted-foreground mt-2 text-sm">
-                  {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" />
@@ -370,27 +337,41 @@ export const DocumentSigningForm = ({
                       />
                     </div>
 
-                    {hasSignatureField && (
                     <div>
                       <Label htmlFor="Signature">
                         <Trans>Signature</Trans>
                       </Label>
 
-                        <SignaturePadDialog
+                      <Card className="mt-2" gradient degrees={-120}>
-                          className="mt-2"
+                        <CardContent className="p-0">
+                          <SignaturePad
+                            className="h-44 w-full"
                             disabled={isSubmitting}
-                          value={signature ?? ''}
+                            defaultValue={signature ?? undefined}
-                          onChange={(v) => setSignature(v ?? '')}
+                            onValidityChange={(isValid) => {
-                          typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+                              setSignatureValid(isValid);
-                          uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
+                            }}
-                          drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
+                            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>
-                </fieldset>
+                  </div>
 
-                <div className="mt-6 flex flex-col gap-4 md:flex-row">
+                  <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"
@@ -403,26 +384,17 @@ export const DocumentSigningForm = ({
                     </Button>
 
                     <DocumentSigningCompleteDialog
-                    isSubmitting={isSubmitting || isAssistantSubmitting}
+                      isSubmitting={isSubmitting}
+                      onSignatureComplete={handleSubmit(onFormSubmit)}
                       documentTitle={document.title}
                       fields={fields}
                       fieldsValidated={fieldsValidated}
-                    disabled={!isRecipientsTurn}
-                    onSignatureComplete={async (nextSigner) => {
-                      await completeDocument(undefined, nextSigner);
-                    }}
                       role={recipient.role}
-                    allowDictateNextSigner={
+                      disabled={!isRecipientsTurn}
-                      nextRecipient && document.documentMeta?.allowDictateNextSigner
-                    }
-                    defaultNextSigner={
-                      nextRecipient
-                        ? { name: nextRecipient.name, email: nextRecipient.email }
-                        : undefined
-                    }
                     />
                   </div>
-              </div>
+                </fieldset>
+              </form>
             </>
           )}
         </div>

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

@@ -182,12 +182,10 @@ export const DocumentSigningNameField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-muted-foreground dark:text-background/80 w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
+                '!text-center': parsedFieldMeta?.textAlign === 'center',
-                'text-center':
+                '!text-right': parsedFieldMeta?.textAlign === 'right',
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >

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

@@ -272,12 +272,10 @@ export const DocumentSigningNumberField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-muted-foreground dark:text-background/80 w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
+                '!text-center': parsedFieldMeta?.textAlign === 'center',
-                'text-center':
+                '!text-right': parsedFieldMeta?.textAlign === 'right',
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >

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

@@ -19,6 +19,7 @@ import {
 import type { CompletedField } from '@documenso/lib/types/fields';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@@ -36,37 +37,37 @@ import { DocumentSigningRadioField } from '~/components/general/document-signing
 import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
-import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
-export type DocumentSigningPageViewProps = {
+export type SigningPageViewProps = {
-  recipient: RecipientWithFields;
   document: DocumentAndSender;
+  recipient: RecipientWithFields;
   fields: Field[];
   completedFields: CompletedField[];
   isRecipientsTurn: boolean;
   allRecipients?: RecipientWithFields[];
-  includeSenderDetails: boolean;
 };
 
 export const DocumentSigningPageView = ({
-  recipient,
   document,
+  recipient,
   fields,
   completedFields,
   isRecipientsTurn,
   allRecipients = [],
-  includeSenderDetails,
+}: SigningPageViewProps) => {
-}: 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 (includeSenderDetails) {
+  if (shouldUseTeamDetails) {
     senderName = document.team?.name ?? '';
     senderEmail = document.team?.teamEmail?.email ? `(${document.team.teamEmail.email})` : '';
   }
@@ -91,7 +92,7 @@ export const DocumentSigningPageView = ({
             <span className="text-muted-foreground">
               {match(recipient.role)
                 .with(RecipientRole.VIEWER, () =>
-                  includeSenderDetails ? (
+                  document.teamId && !shouldUseTeamDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to view this document
                     </Trans>
@@ -100,7 +101,7 @@ export const DocumentSigningPageView = ({
                   ),
                 )
                 .with(RecipientRole.SIGNER, () =>
-                  includeSenderDetails ? (
+                  document.teamId && !shouldUseTeamDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to sign this document
                     </Trans>
@@ -109,7 +110,7 @@ export const DocumentSigningPageView = ({
                   ),
                 )
                 .with(RecipientRole.APPROVER, () =>
-                  includeSenderDetails ? (
+                  document.teamId && !shouldUseTeamDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to approve this document
                     </Trans>
@@ -118,7 +119,7 @@ export const DocumentSigningPageView = ({
                   ),
                 )
                 .with(RecipientRole.ASSISTANT, () =>
-                  includeSenderDetails ? (
+                  document.teamId && !shouldUseTeamDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to assist this document
                     </Trans>
@@ -156,7 +157,7 @@ export const DocumentSigningPageView = ({
           </div>
         </div>
 
-        <DocumentReadOnlyFields documentMeta={documentMeta || undefined} fields={completedFields} />
+        <DocumentReadOnlyFields fields={completedFields} />
 
         {recipient.role !== RecipientRole.ASSISTANT && (
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />
@@ -176,8 +177,6 @@ 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,6 +1,4 @@
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
-
-import { isBase64Image } from '@documenso/lib/constants/signatures';
 
 export type DocumentSigningContextValue = {
   fullName: string;
@@ -9,6 +7,8 @@ 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,9 +31,6 @@ export interface DocumentSigningProviderProps {
   fullName?: string | null;
   email?: string | null;
   signature?: string | null;
-  typedSignatureEnabled?: boolean;
-  uploadSignatureEnabled?: boolean;
-  drawSignatureEnabled?: boolean;
   children: React.ReactNode;
 }
 
@@ -41,31 +38,18 @@ 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);
 
-  // Ensure the user signature doesn't show up if it's not allowed.
+  useEffect(() => {
-  const [signature, setSignature] = useState(
+    if (initialSignature) {
-    (() => {
+      setSignature(initialSignature);
-      const sig = initialSignature || '';
-      const isBase64 = isBase64Image(sig);
-
-      if (isBase64 && (uploadSignatureEnabled || drawSignatureEnabled)) {
-        return sig;
     }
-
+  }, [initialSignature]);
-      if (!isBase64 && typedSignatureEnabled) {
-        return sig;
-      }
-
-      return null;
-    })(),
-  );
 
   return (
     <DocumentSigningContext.Provider
@@ -76,6 +60,8 @@ export const DocumentSigningProvider = ({
         setEmail,
         signature,
         setSignature,
+        signatureValid,
+        setSignatureValid,
       }}
     >
       {children}

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

@@ -157,17 +157,20 @@ export const DocumentSigningRadioField = ({
       )}
 
       {!field.inserted && (
-        <RadioGroup onValueChange={(value) => handleSelectItem(value)} className="z-10">
+        <RadioGroup
+          onValueChange={(value) => handleSelectItem(value)}
+          className="z-10 my-0.5 gap-y-1"
+        >
           {values?.map((item, index) => (
             <div key={index} className="flex items-center gap-x-1.5">
               <RadioGroupItem
-                className="h-4 w-4 shrink-0"
+                className="h-3 w-3 shrink-0"
                 value={item.value}
                 id={`option-${index}`}
                 checked={item.checked}
               />
 
-              <Label htmlFor={`option-${index}`}>
+              <Label htmlFor={`option-${index}`} className="text-xs font-normal">
                 {item.value.includes('empty-value-') ? '' : item.value}
               </Label>
             </div>
@@ -176,7 +179,7 @@ export const DocumentSigningRadioField = ({
       )}
 
       {field.inserted && (
-        <RadioGroup className="gap-y-1">
+        <RadioGroup className="my-0.5 gap-y-1">
           {values?.map((item, index) => (
             <div key={index} className="flex items-center gap-x-1.5">
               <RadioGroupItem
@@ -185,7 +188,7 @@ export const DocumentSigningRadioField = ({
                 id={`option-${index}`}
                 checked={item.value === field.customText}
               />
-              <Label htmlFor={`option-${index}`} className="text-xs">
+              <Label htmlFor={`option-${index}`} className="text-xs font-normal">
                 {item.value.includes('empty-value-') ? '' : item.value}
               </Label>
             </div>

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

@@ -31,7 +31,10 @@ import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZRejectDocumentFormSchema = z.object({
-  reason: z.string().max(500, msg`Reason must be less than 500 characters`),
+  reason: z
+    .string()
+    .min(5, msg`Please provide a reason`)
+    .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,6 +17,7 @@ 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';
 
@@ -28,14 +29,11 @@ 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 = ({
@@ -43,8 +41,6 @@ export const DocumentSigningSignatureField = ({
   onSignField,
   onUnsignField,
   typedSignatureEnabled,
-  uploadSignatureEnabled,
-  drawSignatureEnabled,
 }: DocumentSigningSignatureFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -56,8 +52,12 @@ export const DocumentSigningSignatureField = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [fontSize, setFontSize] = useState(2);
 
-  const { signature: providedSignature, setSignature: setProvidedSignature } =
+  const {
-    useRequiredDocumentSigningContext();
+    signature: providedSignature,
+    setSignature: setProvidedSignature,
+    signatureValid,
+    setSignatureValid,
+  } = useRequiredDocumentSigningContext();
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
@@ -89,7 +89,7 @@ export const DocumentSigningSignatureField = ({
   }, [field.inserted, signature?.signatureImageAsBase64]);
 
   const onPreSign = () => {
-    if (!providedSignature) {
+    if (!providedSignature || !signatureValid) {
       setShowSignatureModal(true);
       return false;
     }
@@ -102,7 +102,6 @@ export const DocumentSigningSignatureField = ({
   const onDialogSignClick = () => {
     setShowSignatureModal(false);
     setProvidedSignature(localSignature);
-
     if (!localSignature) {
       return;
     }
@@ -117,14 +116,14 @@ export const DocumentSigningSignatureField = ({
     try {
       const value = signature || providedSignature;
 
-      if (!value) {
+      if (!value || (signature && !signatureValid)) {
         setShowSignatureModal(true);
         return;
       }
 
       const isTypedSignature = !value.startsWith('data:image');
 
-      if (isTypedSignature && typedSignatureEnabled === false) {
+      if (isTypedSignature && !typedSignatureEnabled) {
         toast({
           title: _(msg`Error`),
           description: _(msg`Typed signatures are not allowed. Please draw your signature.`),
@@ -276,14 +275,29 @@ export const DocumentSigningSignatureField = ({
             </Trans>
           </DialogTitle>
 
+          <div className="">
+            <Label htmlFor="signature">
+              <Trans>Signature</Trans>
+            </Label>
+
+            <div className="border-border mt-2 rounded-md border">
               <SignaturePad
-            className="mt-2"
+                id="signature"
-            value={localSignature ?? ''}
+                className="h-44 w-full"
-            onChange={({ value }) => setLocalSignature(value)}
+                onChange={(value) => setLocalSignature(value)}
-            typedSignatureEnabled={typedSignatureEnabled}
+                allowTypedSignature={typedSignatureEnabled}
-            uploadSignatureEnabled={uploadSignatureEnabled}
+                onValidityChange={(isValid) => {
-            drawSignatureEnabled={drawSignatureEnabled}
+                  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>
 
           <DocumentSigningDisclosure />
 
@@ -303,7 +317,7 @@ export const DocumentSigningSignatureField = ({
               <Button
                 type="button"
                 className="flex-1"
-                disabled={!localSignature}
+                disabled={!localSignature || !signatureValid}
                 onClick={() => onDialogSignClick()}
               >
                 <Trans>Sign</Trans>

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

@@ -277,12 +277,11 @@ export const DocumentSigningTextField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-muted-foreground dark:text-background/80 w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
+                // Todo: Test
-                'text-center':
+                '!text-center': parsedFieldMeta?.textAlign === 'center',
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                '!text-right': parsedFieldMeta?.textAlign === 'right',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >
@@ -304,11 +303,9 @@ export const DocumentSigningTextField = ({
               id="custom-text"
               placeholder={parsedFieldMeta?.placeholder ?? _(msg`Enter your text here`)}
               className={cn('mt-2 w-full rounded-md', {
-                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                'border-2 border-red-300 text-left ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
                   userInputHasErrors,
-                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center': parsedFieldMeta?.textAlign === 'center',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
                 'text-right': parsedFieldMeta?.textAlign === 'right',
               })}
               value={localText}

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

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

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

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

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

@@ -9,7 +9,6 @@ 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';
@@ -33,7 +32,7 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
 
   const isRecipient = !!recipient;
   const isPending = document.status === DocumentStatus.PENDING;
-  const isComplete = isDocumentCompleted(document);
+  const isComplete = document.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
 

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

@@ -20,7 +20,6 @@ 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';
@@ -37,7 +36,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 { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DocumentPageViewDropdownProps = {
   document: Document & {
@@ -53,7 +52,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const { _ } = useLingui();
 
   const navigate = useNavigate();
-  const team = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -64,7 +63,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 = isDocumentCompleted(document);
+  const isComplete = document.status === DocumentStatus.COMPLETED;
   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,7 +17,6 @@ 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';
@@ -49,7 +48,7 @@ export const DocumentPageViewRecipients = ({
           <Trans>Recipients</Trans>
         </h1>
 
-        {!isDocumentCompleted(document.status) && (
+        {document.status !== DocumentStatus.COMPLETED && (
           <Link
             to={`${documentRootPath}/${document.id}/edit?step=signers`}
             title={_(msg`Modify recipients`)}

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

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

apps/remix/app/components/general/document/document-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, XCircle } from 'lucide-react';
+import { CheckCircle2, Clock, File } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@@ -36,12 +36,6 @@ 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 { useCurrentTeam } from '~/providers/team';
+import { useOptionalCurrentTeam } 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 = useCurrentTeam();
+  const team = useOptionalCurrentTeam();
 
   const navigate = useNavigate();
   const analytics = useAnalytics();