feat: add organisations (#1820)

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

@@ -0,0 +1,197 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import type { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateAdminOrganisationRequestSchema } from '@documenso/trpc/server/admin-router/create-admin-organisation.types';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationCreateDialogProps = {
+  trigger?: React.ReactNode;
+  ownerUserId: number;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateAdminOrganisationFormSchema = ZCreateAdminOrganisationRequestSchema.shape.data.pick({
+  name: true,
+});
+
+type TCreateOrganisationFormSchema = z.infer<typeof ZCreateAdminOrganisationFormSchema>;
+
+export const AdminOrganisationCreateDialog = ({
+  trigger,
+  ownerUserId,
+  ...props
+}: OrganisationCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const navigate = useNavigate();
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateAdminOrganisationFormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const { mutateAsync: createOrganisation } = trpc.admin.organisation.create.useMutation();
+
+  const onFormSubmit = async ({ name }: TCreateOrganisationFormSchema) => {
+    try {
+      const { organisationId } = await createOrganisation({
+        ownerUserId,
+        data: {
+          name,
+        },
+      });
+
+      await navigate(`/admin/organisations/${organisationId}`);
+
+      setOpen(false);
+
+      toast({
+        title: t`Success`,
+        description: t`Organisation created`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      console.error(error);
+
+      toast({
+        title: t`An unknown error occurred`,
+        description: t`We encountered an unknown error while attempting to create a organisation. Please try again later.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            <Trans>Create organisation</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create organisation</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Create an organisation for this user</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Organisation Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Alert variant="neutral">
+                <AlertDescription className="mt-0">
+                  <Trans>
+                    You will need to configure any claims or subscription after creating this
+                    organisation
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+
+              {/* <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Default claim ID</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      <Trans>Leave blank to use the default free claim</Trans>
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              /> */}
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button
+                  type="submit"
+                  data-testid="dialog-create-organisation-button"
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Create</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

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

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

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

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

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

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

@@ -28,7 +28,6 @@ type DocumentDeleteDialogProps = {
   onDelete?: () => Promise<void> | void;
   status: DocumentStatus;
   documentTitle: string;
-  teamId?: number;
   canManageDocument: boolean;
 };
 

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

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

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

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

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

@@ -33,7 +33,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentMoveToFolderDialogProps = {
   documentId: number;
@@ -57,8 +57,9 @@ export const DocumentMoveToFolderDialog = ({
 }: DocumentMoveToFolderDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+
   const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const form = useForm<TMoveDocumentFormSchema>({
     resolver: zodResolver(ZMoveDocumentFormSchema),
@@ -94,6 +95,14 @@ export const DocumentMoveToFolderDialog = ({
         folderId: data.folderId ?? null,
       });
 
+      const documentsPath = formatDocumentsPath(team.url);
+
+      if (data.folderId) {
+        await navigate(`${documentsPath}/f/${data.folderId}`);
+      } else {
+        await navigate(documentsPath);
+      }
+
       toast({
         title: _(msg`Document moved`),
         description: _(msg`The document has been moved successfully.`),
@@ -101,14 +110,6 @@ export const DocumentMoveToFolderDialog = ({
       });
 
       onOpenChange(false);
-
-      const documentsPath = formatDocumentsPath(team?.url);
-
-      if (data.folderId) {
-        void navigate(`${documentsPath}/f/${data.folderId}`);
-      } else {
-        void navigate(documentsPath);
-      }
     } catch (err) {
       const error = AppError.parseError(err);
 

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

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

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

@@ -34,7 +34,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 const ZCreateFolderFormSchema = z.object({
   name: z.string().min(1, { message: 'Folder name is required' }),
@@ -52,7 +52,7 @@ export const CreateFolderDialog = ({ trigger, ...props }: CreateFolderDialogProp
   const { folderId } = useParams();
 
   const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
 
@@ -75,13 +75,13 @@ export const CreateFolderDialog = ({ trigger, ...props }: CreateFolderDialogProp
 
       setIsCreateFolderOpen(false);
 
+      const documentsPath = formatDocumentsPath(team.url);
+
+      await navigate(`${documentsPath}/f/${newFolder.id}`);
+
       toast({
         description: 'Folder created successfully',
       });
-
-      const documentsPath = formatDocumentsPath(team?.url);
-
-      void navigate(`${documentsPath}/f/${newFolder.id}`);
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -124,7 +124,7 @@ export const CreateFolderDialog = ({ trigger, ...props }: CreateFolderDialogProp
         <DialogHeader>
           <DialogTitle>Create New Folder</DialogTitle>
           <DialogDescription>
-            Enter a name for your new folder. Folders help you organize your documents.
+            Enter a name for your new folder. Folders help you organise your documents.
           </DialogDescription>
         </DialogHeader>
 

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

@@ -0,0 +1,423 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+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 { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
+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'>;
+
+export const ZCreateOrganisationFormSchema = ZCreateOrganisationRequestSchema.pick({
+  name: true,
+});
+
+export type TCreateOrganisationFormSchema = z.infer<typeof ZCreateOrganisationFormSchema>;
+
+export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+  const { refreshSession } = useSession();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  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);
+
+        return;
+      }
+
+      await refreshSession();
+      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>
+  );
+};
+
+// This is separated from the internal claims constant because we need to use the msg
+// macro which would cause import issues.
+const internalClaimsDescription: {
+  [key in INTERNAL_CLAIM_ID]: MessageDescriptor | string;
+} = {
+  [INTERNAL_CLAIM_ID.FREE]: msg`5 Documents a month`,
+  [INTERNAL_CLAIM_ID.INDIVIDUAL]: msg`Unlimited documents, API and more`,
+  [INTERNAL_CLAIM_ID.TEAM]: msg`Embedding, 5 members included and more`,
+  [INTERNAL_CLAIM_ID.PLATFORM]: msg`Whitelabeling, unlimited members and more`,
+  [INTERNAL_CLAIM_ID.ENTERPRISE]: '',
+  [INTERNAL_CLAIM_ID.EARLY_ADOPTER]: '',
+};
+
+type BillingPlanFormProps = {
+  value: string;
+  onChange: (priceId: string) => void;
+  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.TEAM, INTERNAL_CLAIM_ID.PLATFORM].map(
+      (planId) => {
+        const plan = plans[planId];
+
+        return {
+          id: planId,
+          name: plan.name,
+          description: parseMessageDescriptorMacro(t, internalClaimsDescription[planId]),
+          monthlyPrice: plan.monthlyPrice,
+          yearlyPrice: plan.yearlyPrice,
+        };
+      },
+    );
+  }, [plans]);
+
+  useEffect(() => {
+    if (value === '' && !canCreateFreeOrganisation) {
+      onChange(dynamicPlans[0][billingPeriod]?.id ?? '');
+    }
+  }, [value]);
+
+  const onBillingPeriodChange = (billingPeriod: 'monthlyPrice' | 'yearlyPrice') => {
+    const plan = dynamicPlans.find((plan) => plan[billingPeriod]?.id === value);
+
+    setBillingPeriod(billingPeriod);
+
+    onChange(plan?.[billingPeriod]?.id ?? Object.keys(plans)[0]);
+  };
+
+  return (
+    <div className="space-y-4">
+      <Tabs
+        className="flex w-full items-center justify-center"
+        defaultValue="monthlyPrice"
+        value={billingPeriod}
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        onValueChange={(value) => onBillingPeriodChange(value as 'monthlyPrice' | 'yearlyPrice')}
+      >
+        <TabsList className="flex w-full justify-center">
+          <TabsTrigger className="w-full" value="monthlyPrice">
+            <Trans>Monthly</Trans>
+          </TabsTrigger>
+          <TabsTrigger className="w-full" value="yearlyPrice">
+            <Trans>Yearly</Trans>
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      <div className="mt-4 grid gap-4 text-sm">
+        <button
+          onClick={() => onChange('')}
+          className={cn(
+            'hover:border-primary flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:shadow-sm',
+            {
+              'ring-primary/10 border-primary ring-2 ring-offset-1': '' === value,
+            },
+          )}
+          disabled={!canCreateFreeOrganisation}
+        >
+          <div className="w-full text-left">
+            <div className="flex items-center justify-between">
+              <p className="text-medium">
+                <Trans>Free</Trans>
+              </p>
+
+              <Badge size="small" variant="neutral" className="ml-1.5">
+                {canCreateFreeOrganisation ? (
+                  <Trans>1 Free organisations left</Trans>
+                ) : (
+                  <Trans>0 Free organisations left</Trans>
+                )}
+              </Badge>
+            </div>
+
+            <div className="text-muted-foreground">
+              <Trans>5 documents a month</Trans>
+            </div>
+          </div>
+        </button>
+
+        {dynamicPlans.map((plan) => (
+          <button
+            key={plan[billingPeriod]?.id}
+            onClick={() => onChange(plan[billingPeriod]?.id ?? '')}
+            className={cn(
+              'hover:border-primary flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:shadow-sm',
+              {
+                'ring-primary/10 border-primary ring-2 ring-offset-1':
+                  plan[billingPeriod]?.id === value,
+              },
+            )}
+          >
+            <div className="w-full text-left">
+              <p className="font-medium">{plan.name}</p>
+              <p className="text-muted-foreground">{plan.description}</p>
+            </div>
+            <div className="whitespace-nowrap text-right text-sm font-medium">
+              <p>{plan[billingPeriod]?.friendlyPrice}</p>
+              <span className="text-muted-foreground text-xs">
+                {billingPeriod === 'monthlyPrice' ? (
+                  <Trans>per month</Trans>
+                ) : (
+                  <Trans>per year</Trans>
+                )}
+              </span>
+            </div>
+          </button>
+        ))}
+
+        <Link
+          to="https://documen.so/enterprise-cta"
+          target="_blank"
+          className="bg-muted/30 flex items-center space-x-2 rounded-md border p-4"
+        >
+          <div className="flex-1 font-normal">
+            <p className="text-muted-foreground font-medium">
+              <Trans>Enterprise</Trans>
+            </p>
+            <p className="text-muted-foreground flex flex-row items-center gap-1">
+              <Trans>Contact sales here</Trans>
+              <ExternalLinkIcon className="h-4 w-4" />
+            </p>
+          </div>
+        </Link>
+      </div>
+
+      <div className="mt-6 text-center">
+        <Link
+          to="https://documenso.com/pricing"
+          className="text-primary hover:text-primary/80 flex items-center justify-center gap-1 text-sm hover:underline"
+          target="_blank"
+        >
+          <Trans>Compare all plans and features in detail</Trans>
+          <ExternalLinkIcon className="h-4 w-4" />
+        </Link>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,166 @@
+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 { 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';
+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 { refreshSession } = useSession();
+
+  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');
+      await refreshSession();
+
+      setOpen(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+      console.error(error);
+
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to delete this organisation. Please try again later.`,
+        ),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="destructive">
+            <Trans>Delete</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure you wish to delete this organisation?</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              You are about to delete <span className="font-semibold">{organisation.name}</span>.
+              All data related to this organisation such as teams, documents, and all other
+              resources will be deleted. This action is irreversible.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="organisationName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>
+                        Confirm by typing <span className="text-destructive">{deleteMessage}</span>
+                      </Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                  <Trans>Delete</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,251 @@
+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 } from '@documenso/lib/constants/organisations';
+import { EXTENDED_ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
+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(EXTENDED_ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="memberIds"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Members</Trans>
+                    </FormLabel>
+
+                    <FormControl>
+                      <MultiSelectCombobox
+                        options={members.map((member) => ({
+                          label: member.name,
+                          value: member.id,
+                        }))}
+                        loading={isLoadingMembers}
+                        selectedValues={field.value}
+                        onChange={field.onChange}
+                        className="bg-background w-full"
+                        emptySelectionPlaceholder={t`Select members`}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>Select the members to add to this group</Trans>
+                    </FormDescription>
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button
+                  type="submit"
+                  data-testid="dialog-create-organisation-button"
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Create</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

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

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

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

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

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

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

@@ -0,0 +1,478 @@
+import { useEffect, useMemo, useRef, 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 { Download, Mail, MailIcon, PlusCircle, Trash, Upload, UsersIcon } from 'lucide-react';
+import Papa, { type ParseResult } from 'papaparse';
+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 { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
+import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
+import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateOrganisationMemberInvitesRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation-member-invites.types';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  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 { SpinnerBox } from '@documenso/ui/primitives/spinner';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationMemberInviteDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZInviteOrganisationMembersFormSchema = z
+  .object({
+    invitations: ZCreateOrganisationMemberInvitesRequestSchema.shape.invitations,
+  })
+  // Display exactly which rows are duplicates.
+  .superRefine((items, ctx) => {
+    const uniqueEmails = new Map<string, number>();
+
+    for (const [index, invitation] of items.invitations.entries()) {
+      const email = invitation.email.toLowerCase();
+
+      const firstFoundIndex = uniqueEmails.get(email);
+
+      if (firstFoundIndex === undefined) {
+        uniqueEmails.set(email, index);
+        continue;
+      }
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['invitations', index, 'email'],
+      });
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['invitations', firstFoundIndex, 'email'],
+      });
+    }
+  });
+
+type TInviteOrganisationMembersFormSchema = z.infer<typeof ZInviteOrganisationMembersFormSchema>;
+
+type TabTypes = 'INDIVIDUAL' | 'BULK';
+
+const ZImportOrganisationMemberSchema = z.array(
+  z.object({
+    email: z.string().email(),
+    organisationRole: z.nativeEnum(OrganisationMemberRole),
+  }),
+);
+
+export const OrganisationMemberInviteDialog = ({
+  trigger,
+  ...props
+}: OrganisationMemberInviteDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [invitationType, setInvitationType] = useState<TabTypes>('INDIVIDUAL');
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const organisation = useCurrentOrganisation();
+
+  const form = useForm<TInviteOrganisationMembersFormSchema>({
+    resolver: zodResolver(ZInviteOrganisationMembersFormSchema),
+    defaultValues: {
+      invitations: [
+        {
+          email: '',
+          organisationRole: OrganisationMemberRole.MEMBER,
+        },
+      ],
+    },
+  });
+
+  const {
+    append: appendOrganisationMemberInvite,
+    fields: organisationMemberInvites,
+    remove: removeOrganisationMemberInvite,
+  } = useFieldArray({
+    control: form.control,
+    name: 'invitations',
+  });
+
+  const { mutateAsync: createOrganisationMemberInvites } =
+    trpc.organisation.member.invite.createMany.useMutation();
+
+  const { data: fullOrganisation } = trpc.organisation.get.useQuery({
+    organisationReference: organisation.id,
+  });
+
+  const onAddOrganisationMemberInvite = () => {
+    appendOrganisationMemberInvite({
+      email: '',
+      organisationRole: OrganisationMemberRole.MEMBER,
+    });
+  };
+
+  const onFormSubmit = async ({ invitations }: TInviteOrganisationMembersFormSchema) => {
+    try {
+      await createOrganisationMemberInvites({
+        organisationId: organisation.id,
+        invitations,
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Organisation invitations have been sent.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to invite organisation members. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const dialogState = useMemo(() => {
+    if (!fullOrganisation) {
+      return 'loading';
+    }
+
+    if (!IS_BILLING_ENABLED()) {
+      return 'form';
+    }
+
+    if (fullOrganisation.organisationClaim.memberCount === 0) {
+      return 'form';
+    }
+
+    // This is probably going to screw us over in the future.
+    if (fullOrganisation.organisationClaim.originalSubscriptionClaimId !== INTERNAL_CLAIM_ID.TEAM) {
+      return 'alert';
+    }
+
+    return 'form';
+  }, [fullOrganisation]);
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+      setInvitationType('INDIVIDUAL');
+    }
+  }, [open, form]);
+
+  const onFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files?.length) {
+      return;
+    }
+
+    const csvFile = e.target.files[0];
+
+    Papa.parse(csvFile, {
+      skipEmptyLines: true,
+      comments: 'Work email,Job title',
+      complete: (results: ParseResult<string[]>) => {
+        const members = results.data.map((row) => {
+          const [email, role] = row;
+
+          return {
+            email: email.trim(),
+            organisationRole: role.trim().toUpperCase(),
+          };
+        });
+
+        // Remove the first row if it contains the headers.
+        if (members.length > 1 && members[0].organisationRole.toUpperCase() === 'ROLE') {
+          members.shift();
+        }
+
+        try {
+          const importedInvitations = ZImportOrganisationMemberSchema.parse(members);
+
+          form.setValue('invitations', importedInvitations);
+          form.clearErrors('invitations');
+
+          setInvitationType('INDIVIDUAL');
+        } catch (err) {
+          console.error(err);
+
+          toast({
+            title: _(msg`Something went wrong`),
+            description: _(
+              msg`Please check the CSV file and make sure it is according to our format`,
+            ),
+            variant: 'destructive',
+          });
+        }
+      },
+    });
+  };
+
+  const downloadTemplate = () => {
+    const data = [
+      { email: 'admin@documenso.com', role: 'Admin' },
+      { email: 'manager@documenso.com', role: 'Manager' },
+      { email: 'member@documenso.com', role: 'Member' },
+    ];
+
+    const csvContent =
+      'Email address,Role\n' + data.map((row) => `${row.email},${row.role}`).join('\n');
+
+    const blob = new Blob([csvContent], {
+      type: 'text/csv',
+    });
+
+    downloadFile({
+      filename: 'documenso-organisation-member-invites-template.csv',
+      data: blob,
+    });
+  };
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Invite member</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Invite organisation members</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>An email containing an invitation will be sent to each member.</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>
+                <Trans>
+                  Your plan does not support inviting members. Please upgrade or your plan or
+                  contact sales at <a href="mailto:support@documenso.com">support@documenso.com</a>{' '}
+                  if you would like to discuss your options.
+                </Trans>
+              </AlertDescription>
+            </Alert>
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+
+        {dialogState === 'form' && (
+          <Tabs
+            defaultValue="INDIVIDUAL"
+            value={invitationType}
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            onValueChange={(value) => setInvitationType(value as TabTypes)}
+          >
+            <TabsList className="w-full">
+              <TabsTrigger value="INDIVIDUAL" className="hover:text-foreground w-full">
+                <MailIcon size={20} className="mr-2" />
+                <Trans>Invite Members</Trans>
+              </TabsTrigger>
+
+              <TabsTrigger value="BULK" className="hover:text-foreground w-full">
+                <UsersIcon size={20} className="mr-2" /> <Trans>Bulk Import</Trans>
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="INDIVIDUAL">
+              <Form {...form}>
+                <form onSubmit={form.handleSubmit(onFormSubmit)}>
+                  <fieldset
+                    className="flex h-full flex-col space-y-4"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                      {organisationMemberInvites.map((organisationMemberInvite, index) => (
+                        <div
+                          className="flex w-full flex-row space-x-4"
+                          key={organisationMemberInvite.id}
+                        >
+                          <FormField
+                            control={form.control}
+                            name={`invitations.${index}.email`}
+                            render={({ field }) => (
+                              <FormItem className="w-full">
+                                {index === 0 && (
+                                  <FormLabel required>
+                                    <Trans>Email address</Trans>
+                                  </FormLabel>
+                                )}
+                                <FormControl>
+                                  <Input className="bg-background" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+
+                          <FormField
+                            control={form.control}
+                            name={`invitations.${index}.organisationRole`}
+                            render={({ field }) => (
+                              <FormItem className="w-full">
+                                {index === 0 && (
+                                  <FormLabel required>
+                                    <Trans>Organisation Role</Trans>
+                                  </FormLabel>
+                                )}
+                                <FormControl>
+                                  <Select {...field} onValueChange={field.onChange}>
+                                    <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                                      <SelectValue />
+                                    </SelectTrigger>
+
+                                    <SelectContent position="popper">
+                                      {ORGANISATION_MEMBER_ROLE_HIERARCHY[
+                                        organisation.currentOrganisationRole
+                                      ].map((role) => (
+                                        <SelectItem key={role} value={role}>
+                                          {_(ORGANISATION_MEMBER_ROLE_MAP[role]) ?? role}
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+
+                          <button
+                            type="button"
+                            className={cn(
+                              'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                              index === 0 ? 'mt-8' : 'mt-0',
+                            )}
+                            disabled={organisationMemberInvites.length === 1}
+                            onClick={() => removeOrganisationMemberInvite(index)}
+                          >
+                            <Trash className="h-5 w-5" />
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      className="w-fit"
+                      onClick={() => onAddOrganisationMemberInvite()}
+                    >
+                      <PlusCircle className="mr-2 h-4 w-4" />
+                      <Trans>Add more</Trans>
+                    </Button>
+
+                    <DialogFooter>
+                      <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                        <Trans>Cancel</Trans>
+                      </Button>
+
+                      <Button type="submit" loading={form.formState.isSubmitting}>
+                        {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
+                        <Trans>Invite</Trans>
+                      </Button>
+                    </DialogFooter>
+                  </fieldset>
+                </form>
+              </Form>
+            </TabsContent>
+
+            <TabsContent value="BULK">
+              <div className="mt-4 space-y-4">
+                <Card gradient className="h-32">
+                  <CardContent
+                    className="text-muted-foreground/80 hover:text-muted-foreground/90 flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 transition-colors"
+                    onClick={() => fileInputRef.current?.click()}
+                  >
+                    <Upload className="h-5 w-5" />
+
+                    <p className="mt-1 text-sm">
+                      <Trans>Click here to upload</Trans>
+                    </p>
+
+                    <input
+                      onChange={onFileInputChange}
+                      type="file"
+                      ref={fileInputRef}
+                      accept=".csv"
+                      hidden
+                    />
+                  </CardContent>
+                </Card>
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={downloadTemplate}>
+                    <Download className="mr-2 h-4 w-4" />
+                    <Trans>Template</Trans>
+                  </Button>
+                </DialogFooter>
+              </div>
+            </TabsContent>
+          </Tabs>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

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

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

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

@@ -49,7 +49,7 @@ import {
 import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type ManagePublicTemplateDialogProps = {
   directTemplates: (Template & {
@@ -95,7 +95,7 @@ export const ManagePublicTemplateDialog = ({
 
   const [open, onOpenChange] = useState(isOpen);
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(initialTemplateId);
 

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

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

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -7,15 +7,18 @@ import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { useSearchParams } from 'react-router';
-import { useNavigate } from 'react-router';
 import type { z } from 'zod';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_BILLING_ENABLED, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
-import { ZCreateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { ZCreateTeamRequestSchema } from '@documenso/trpc/server/team-router/create-team.types';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -34,29 +37,37 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type TeamCreateDialogProps = {
   trigger?: React.ReactNode;
+  onCreated?: () => Promise<void>;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-const ZCreateTeamFormSchema = ZCreateTeamMutationSchema.pick({
+const ZCreateTeamFormSchema = ZCreateTeamRequestSchema.pick({
   teamName: true,
   teamUrl: true,
+  inheritMembers: true,
 });
 
 type TCreateTeamFormSchema = z.infer<typeof ZCreateTeamFormSchema>;
 
-export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) => {
+export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { refreshSession } = useSession();
 
-  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
+  const organisation = useCurrentOrganisation();
 
   const [open, setOpen] = useState(false);
 
+  const { data: fullOrganisation } = trpc.organisation.get.useQuery({
+    organisationReference: organisation.id,
+  });
+
   const actionSearchParam = searchParams?.get('action');
 
   const form = useForm({
@@ -64,24 +75,25 @@ export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) =
     defaultValues: {
       teamName: '',
       teamUrl: '',
+      inheritMembers: true,
     },
   });
 
-  const { mutateAsync: createTeam } = trpc.team.createTeam.useMutation();
+  const { mutateAsync: createTeam } = trpc.team.create.useMutation();
 
-  const onFormSubmit = async ({ teamName, teamUrl }: TCreateTeamFormSchema) => {
+  const onFormSubmit = async ({ teamName, teamUrl, inheritMembers }: TCreateTeamFormSchema) => {
     try {
-      const response = await createTeam({
+      await createTeam({
+        organisationId: organisation.id,
         teamName,
         teamUrl,
+        inheritMembers,
       });
 
       setOpen(false);
 
-      if (response.paymentRequired) {
-        await navigate(`/settings/teams?tab=pending&checkout=${response.pendingTeamId}`);
-        return;
-      }
+      await onCreated?.();
+      await refreshSession();
 
       toast({
         title: _(msg`Success`),
@@ -114,6 +126,26 @@ export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) =
     return text.toLowerCase().replace(/\s+/g, '-');
   };
 
+  const dialogState = useMemo(() => {
+    if (!fullOrganisation) {
+      return 'loading';
+    }
+
+    if (!IS_BILLING_ENABLED()) {
+      return 'form';
+    }
+
+    if (fullOrganisation.organisationClaim.teamCount === 0) {
+      return 'form';
+    }
+
+    if (fullOrganisation.organisationClaim.teamCount <= fullOrganisation.teams.length) {
+      return 'alert';
+    }
+
+    return 'form';
+  }, [fullOrganisation]);
+
   useEffect(() => {
     if (actionSearchParam === 'add-team') {
       setOpen(true);
@@ -145,89 +177,141 @@ export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) =
             <Trans>Create team</Trans>
           </DialogTitle>
 
-          <DialogDescription className="mt-4">
+          <DialogDescription>
             <Trans>Create a team to collaborate with your team members.</Trans>
           </DialogDescription>
         </DialogHeader>
 
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset
-              className="flex h-full flex-col space-y-4"
-              disabled={form.formState.isSubmitting}
+        {dialogState === 'loading' && <SpinnerBox className="py-32" />}
+
+        {dialogState === 'alert' && (
+          <>
+            <Alert
+              className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+              variant="neutral"
             >
-              <FormField
-                control={form.control}
-                name="teamName"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel required>
-                      <Trans>Team Name</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        className="bg-background"
-                        {...field}
-                        onChange={(event) => {
-                          const oldGeneratedUrl = mapTextToUrl(field.value);
-                          const newGeneratedUrl = mapTextToUrl(event.target.value);
+              <AlertDescription className="mt-0">
+                <Trans>
+                  You have reached the maximum number of teams for your plan. Please contact sales
+                  at <a href="mailto:support@documenso.com">support@documenso.com</a> if you would
+                  like to adjust your plan.
+                </Trans>
+              </AlertDescription>
+            </Alert>
 
-                          const urlField = form.getValues('teamUrl');
-                          if (urlField === oldGeneratedUrl) {
-                            form.setValue('teamUrl', newGeneratedUrl);
-                          }
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
 
-                          field.onChange(event);
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+        {dialogState === 'form' && (
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="teamName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required>
+                        <Trans>Team Name</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          className="bg-background"
+                          {...field}
+                          onChange={(event) => {
+                            const oldGeneratedUrl = mapTextToUrl(field.value);
+                            const newGeneratedUrl = mapTextToUrl(event.target.value);
 
-              <FormField
-                control={form.control}
-                name="teamUrl"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel required>
-                      <Trans>Team URL</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Input className="bg-background" {...field} />
-                    </FormControl>
-                    {!form.formState.errors.teamUrl && (
-                      <span className="text-foreground/50 text-xs font-normal">
-                        {field.value ? (
-                          `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
-                        ) : (
-                          <Trans>A unique URL to identify your team</Trans>
-                        )}
-                      </span>
-                    )}
+                            const urlField = form.getValues('teamUrl');
+                            if (urlField === oldGeneratedUrl) {
+                              form.setValue('teamUrl', newGeneratedUrl);
+                            }
 
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+                            field.onChange(event);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
 
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                  <Trans>Cancel</Trans>
-                </Button>
+                <FormField
+                  control={form.control}
+                  name="teamUrl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required>
+                        <Trans>Team URL</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+                      {!form.formState.errors.teamUrl && (
+                        <span className="text-foreground/50 text-xs font-normal">
+                          {field.value ? (
+                            `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
+                          ) : (
+                            <Trans>A unique URL to identify your team</Trans>
+                          )}
+                        </span>
+                      )}
 
-                <Button
-                  type="submit"
-                  data-testid="dialog-create-team-button"
-                  loading={form.formState.isSubmitting}
-                >
-                  <Trans>Create Team</Trans>
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="inheritMembers"
+                  render={({ field }) => (
+                    <FormItem className="flex items-center space-x-2">
+                      <FormControl>
+                        <div className="flex items-center">
+                          <Checkbox
+                            id="inherit-members"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+
+                          <label
+                            className="text-muted-foreground ml-2 text-sm"
+                            htmlFor="inherit-members"
+                          >
+                            <Trans>Allow all organisation members to access this team</Trans>
+                          </label>
+                        </div>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button
+                    type="submit"
+                    data-testid="dialog-create-team-button"
+                    loading={form.formState.isSubmitting}
+                  >
+                    <Trans>Create Team</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        )}
       </DialogContent>
     </Dialog>
   );

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

@@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -35,15 +36,22 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type TeamDeleteDialogProps = {
   teamId: number;
   teamName: string;
+  redirectTo?: string;
   trigger?: React.ReactNode;
 };
 
-export const TeamDeleteDialog = ({ trigger, teamId, teamName }: TeamDeleteDialogProps) => {
+export const TeamDeleteDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  redirectTo,
+}: TeamDeleteDialogProps) => {
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { refreshSession } = useSession();
 
   const deleteMessage = _(msg`delete ${teamName}`);
 
@@ -60,19 +68,23 @@ export const TeamDeleteDialog = ({ trigger, teamId, teamName }: TeamDeleteDialog
     },
   });
 
-  const { mutateAsync: deleteTeam } = trpc.team.deleteTeam.useMutation();
+  const { mutateAsync: deleteTeam } = trpc.team.delete.useMutation();
 
   const onFormSubmit = async () => {
     try {
       await deleteTeam({ teamId });
 
+      await refreshSession();
+
       toast({
         title: _(msg`Success`),
         description: _(msg`Your team has been successfully deleted.`),
         duration: 5000,
       });
 
-      await navigate('/settings/teams');
+      if (redirectTo) {
+        await navigate(redirectTo);
+      }
 
       setOpen(false);
     } catch (err) {
@@ -113,7 +125,7 @@ export const TeamDeleteDialog = ({ trigger, teamId, teamName }: TeamDeleteDialog
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="destructive">
-            <Trans>Delete team</Trans>
+            <Trans>Delete</Trans>
           </Button>
         )}
       </DialogTrigger>

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

@@ -61,12 +61,12 @@ export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDi
     },
   });
 
-  const { mutateAsync: createTeamEmailVerification, isPending } =
-    trpc.team.createTeamEmailVerification.useMutation();
+  const { mutateAsync: sendTeamEmailVerification, isPending } =
+    trpc.team.email.verification.send.useMutation();
 
   const onFormSubmit = async ({ name, email }: TCreateTeamEmailFormSchema) => {
     try {
-      await createTeamEmailVerification({
+      await sendTeamEmailVerification({
         teamId,
         name,
         email,

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,209 @@
+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 { TEAM_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/teams';
+import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+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-inherit-member-disable-dialog.tsx

@@ -0,0 +1,93 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import type { TeamGroup } from '@prisma/client';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+type TeamMemberInheritDisableDialogProps = {
+  group: TeamGroup;
+};
+
+export const TeamMemberInheritDisableDialog = ({ group }: TeamMemberInheritDisableDialogProps) => {
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const team = useCurrentTeam();
+
+  const deleteGroupMutation = trpc.team.group.delete.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Access disabled`,
+        duration: 5000,
+      });
+    },
+    onError: () => {
+      toast({
+        title: t`Something went wrong`,
+        description: t`We encountered an unknown error while attempting to disable access.`,
+        variant: 'destructive',
+        duration: 5000,
+      });
+    },
+  });
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <Trans>Disable access</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are about to remove default access to this team for all organisation members. Any
+              members not explicitly added to this team will no longer have access.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button
+            type="submit"
+            variant="destructive"
+            loading={deleteGroupMutation.isPending}
+            onClick={() =>
+              deleteGroupMutation.mutate({
+                teamId: team.id,
+                teamGroupId: group.id,
+              })
+            }
+          >
+            <Trans>Disable</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,109 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { OrganisationGroupType, OrganisationMemberRole, TeamMemberRole } from '@prisma/client';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export const TeamMemberInheritEnableDialog = () => {
+  const organisation = useCurrentOrganisation();
+  const team = useCurrentTeam();
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const { mutateAsync: createTeamGroups, isPending } = trpc.team.group.createMany.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Access enabled`,
+        duration: 5000,
+      });
+    },
+    onError: () => {
+      toast({
+        title: t`Something went wrong`,
+        description: t`We encountered an unknown error while attempting to enable access.`,
+        variant: 'destructive',
+        duration: 5000,
+      });
+    },
+  });
+
+  const organisationGroupQuery = trpc.organisation.group.find.useQuery({
+    organisationId: organisation.id,
+    perPage: 1,
+    types: [OrganisationGroupType.INTERNAL_ORGANISATION],
+    organisationRoles: [OrganisationMemberRole.MEMBER],
+  });
+
+  const enableAccessGroup = async () => {
+    if (!organisationGroupQuery.data?.data[0]?.id) {
+      return;
+    }
+
+    await createTeamGroups({
+      teamId: team.id,
+      groups: [
+        {
+          organisationGroupId: organisationGroupQuery.data?.data[0]?.id,
+          teamRole: TeamMemberRole.MEMBER,
+        },
+      ],
+    });
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <Trans>Enable access</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are about to give all organisation members access to this team under their
+              organisation role.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button
+            type="submit"
+            disabled={organisationGroupQuery.isPending}
+            loading={isPending}
+            onClick={enableAccessGroup}
+          >
+            <Trans>Enable</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

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

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

@@ -0,0 +1,305 @@
+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 } from '@documenso/lib/constants/teams';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+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

@@ -5,7 +5,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 
 import { trpc } from '@documenso/trpc/react';
-import { Alert } from '@documenso/ui/primitives/alert';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -22,9 +22,10 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type TeamMemberDeleteDialogProps = {
   teamId: number;
   teamName: string;
-  teamMemberId: number;
-  teamMemberName: string;
-  teamMemberEmail: string;
+  memberId: string;
+  memberName: string;
+  memberEmail: string;
+  isInheritMemberEnabled: boolean | null;
   trigger?: React.ReactNode;
 };
 
@@ -32,17 +33,18 @@ export const TeamMemberDeleteDialog = ({
   trigger,
   teamId,
   teamName,
-  teamMemberId,
-  teamMemberName,
-  teamMemberEmail,
+  memberId,
+  memberName,
+  memberEmail,
+  isInheritMemberEnabled,
 }: TeamMemberDeleteDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { mutateAsync: deleteTeamMembers, isPending: isDeletingTeamMember } =
-    trpc.team.deleteTeamMembers.useMutation({
+  const { mutateAsync: deleteTeamMember, isPending: isDeletingTeamMember } =
+    trpc.team.member.delete.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -69,7 +71,7 @@ export const TeamMemberDeleteDialog = ({
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="secondary">
-            <Trans>Delete team member</Trans>
+            <Trans>Remove team member</Trans>
           </Button>
         )}
       </DialogTrigger>
@@ -88,29 +90,42 @@ export const TeamMemberDeleteDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        <Alert variant="neutral" padding="tight">
-          <AvatarWithText
-            avatarClass="h-12 w-12"
-            avatarFallback={teamMemberName.slice(0, 1).toUpperCase()}
-            primaryText={<span className="font-semibold">{teamMemberName}</span>}
-            secondaryText={teamMemberEmail}
-          />
-        </Alert>
+        {isInheritMemberEnabled ? (
+          <Alert variant="neutral">
+            <AlertDescription>
+              <Trans>
+                You cannot remove members from this team if the inherit member feature is enabled.
+              </Trans>
+            </AlertDescription>
+          </Alert>
+        ) : (
+          <Alert variant="neutral" padding="tight">
+            <AvatarWithText
+              avatarClass="h-12 w-12"
+              avatarFallback={memberName.slice(0, 1).toUpperCase()}
+              primaryText={<span className="font-semibold">{memberName}</span>}
+              secondaryText={memberEmail}
+            />
+          </Alert>
+        )}
 
         <fieldset disabled={isDeletingTeamMember}>
           <DialogFooter>
             <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-              <Trans>Cancel</Trans>
+              <Trans>Close</Trans>
             </Button>
 
-            <Button
-              type="submit"
-              variant="destructive"
-              loading={isDeletingTeamMember}
-              onClick={async () => deleteTeamMembers({ teamId, teamMemberIds: [teamMemberId] })}
-            >
-              <Trans>Delete</Trans>
-            </Button>
+            {!isInheritMemberEnabled && (
+              <Button
+                type="submit"
+                variant="destructive"
+                disabled={Boolean(isInheritMemberEnabled)}
+                loading={isDeletingTeamMember}
+                onClick={async () => deleteTeamMember({ teamId, memberId })}
+              >
+                <Trans>Remove</Trans>
+              </Button>
+            )}
           </DialogFooter>
         </fieldset>
       </DialogContent>

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

@@ -1,415 +0,0 @@
-import { useEffect, useRef, 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 { Download, Mail, MailIcon, PlusCircle, Trash, Upload, UsersIcon } from 'lucide-react';
-import Papa, { type ParseResult } from 'papaparse';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { downloadFile } from '@documenso/lib/client-only/download-file';
-import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
-import { trpc } from '@documenso/trpc/react';
-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';
-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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useCurrentTeam } from '~/providers/team';
-
-export type TeamMemberInviteDialogProps = {
-  trigger?: React.ReactNode;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const ZInviteTeamMembersFormSchema = z
-  .object({
-    invitations: ZCreateTeamMemberInvitesMutationSchema.shape.invitations,
-  })
-  // Display exactly which rows are duplicates.
-  .superRefine((items, ctx) => {
-    const uniqueEmails = new Map<string, number>();
-
-    for (const [index, invitation] of items.invitations.entries()) {
-      const email = invitation.email.toLowerCase();
-
-      const firstFoundIndex = uniqueEmails.get(email);
-
-      if (firstFoundIndex === undefined) {
-        uniqueEmails.set(email, index);
-        continue;
-      }
-
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: 'Emails must be unique',
-        path: ['invitations', index, 'email'],
-      });
-
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: 'Emails must be unique',
-        path: ['invitations', firstFoundIndex, 'email'],
-      });
-    }
-  });
-
-type TInviteTeamMembersFormSchema = z.infer<typeof ZInviteTeamMembersFormSchema>;
-
-type TabTypes = 'INDIVIDUAL' | 'BULK';
-
-const ZImportTeamMemberSchema = z.array(
-  z.object({
-    email: z.string().email(),
-    role: z.nativeEnum(TeamMemberRole),
-  }),
-);
-
-export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDialogProps) => {
-  const [open, setOpen] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [invitationType, setInvitationType] = useState<TabTypes>('INDIVIDUAL');
-
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const team = useCurrentTeam();
-
-  const form = useForm<TInviteTeamMembersFormSchema>({
-    resolver: zodResolver(ZInviteTeamMembersFormSchema),
-    defaultValues: {
-      invitations: [
-        {
-          email: '',
-          role: TeamMemberRole.MEMBER,
-        },
-      ],
-    },
-  });
-
-  const {
-    append: appendTeamMemberInvite,
-    fields: teamMemberInvites,
-    remove: removeTeamMemberInvite,
-  } = useFieldArray({
-    control: form.control,
-    name: 'invitations',
-  });
-
-  const { mutateAsync: createTeamMemberInvites } = trpc.team.createTeamMemberInvites.useMutation();
-
-  const onAddTeamMemberInvite = () => {
-    appendTeamMemberInvite({
-      email: '',
-      role: TeamMemberRole.MEMBER,
-    });
-  };
-
-  const onFormSubmit = async ({ invitations }: TInviteTeamMembersFormSchema) => {
-    try {
-      await createTeamMemberInvites({
-        teamId: team.id,
-        invitations,
-      });
-
-      toast({
-        title: _(msg`Success`),
-        description: _(msg`Team invitations have been sent.`),
-        duration: 5000,
-      });
-
-      setOpen(false);
-    } catch {
-      toast({
-        title: _(msg`An unknown error occurred`),
-        description: _(
-          msg`We encountered an unknown error while attempting to invite team members. Please try again later.`,
-        ),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-      setInvitationType('INDIVIDUAL');
-    }
-  }, [open, form]);
-
-  const onFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!e.target.files?.length) {
-      return;
-    }
-
-    const csvFile = e.target.files[0];
-
-    Papa.parse(csvFile, {
-      skipEmptyLines: true,
-      comments: 'Work email,Job title',
-      complete: (results: ParseResult<string[]>) => {
-        const members = results.data.map((row) => {
-          const [email, role] = row;
-
-          return {
-            email: email.trim(),
-            role: role.trim().toUpperCase(),
-          };
-        });
-
-        // Remove the first row if it contains the headers.
-        if (members.length > 1 && members[0].role.toUpperCase() === 'ROLE') {
-          members.shift();
-        }
-
-        try {
-          const importedInvitations = ZImportTeamMemberSchema.parse(members);
-
-          form.setValue('invitations', importedInvitations);
-          form.clearErrors('invitations');
-
-          setInvitationType('INDIVIDUAL');
-        } catch (err) {
-          console.error(err);
-
-          toast({
-            title: _(msg`Something went wrong`),
-            description: _(
-              msg`Please check the CSV file and make sure it is according to our format`,
-            ),
-            variant: 'destructive',
-          });
-        }
-      },
-    });
-  };
-
-  const downloadTemplate = () => {
-    const data = [
-      { email: 'admin@documenso.com', role: 'Admin' },
-      { email: 'manager@documenso.com', role: 'Manager' },
-      { email: 'member@documenso.com', role: 'Member' },
-    ];
-
-    const csvContent =
-      'Email address,Role\n' + data.map((row) => `${row.email},${row.role}`).join('\n');
-
-    const blob = new Blob([csvContent], {
-      type: 'text/csv',
-    });
-
-    downloadFile({
-      filename: 'documenso-team-member-invites-template.csv',
-      data: blob,
-    });
-  };
-
-  return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
-      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
-        {trigger ?? (
-          <Button variant="secondary">
-            <Trans>Invite member</Trans>
-          </Button>
-        )}
-      </DialogTrigger>
-
-      <DialogContent position="center">
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Invite team members</Trans>
-          </DialogTitle>
-
-          <DialogDescription className="mt-4">
-            <Trans>An email containing an invitation will be sent to each member.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Tabs
-          defaultValue="INDIVIDUAL"
-          value={invitationType}
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          onValueChange={(value) => setInvitationType(value as TabTypes)}
-        >
-          <TabsList className="w-full">
-            <TabsTrigger value="INDIVIDUAL" className="hover:text-foreground w-full">
-              <MailIcon size={20} className="mr-2" />
-              <Trans>Invite Members</Trans>
-            </TabsTrigger>
-
-            <TabsTrigger value="BULK" className="hover:text-foreground w-full">
-              <UsersIcon size={20} className="mr-2" /> <Trans>Bulk Import</Trans>
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="INDIVIDUAL">
-            <Form {...form}>
-              <form onSubmit={form.handleSubmit(onFormSubmit)}>
-                <fieldset
-                  className="flex h-full flex-col space-y-4"
-                  disabled={form.formState.isSubmitting}
-                >
-                  <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
-                    {teamMemberInvites.map((teamMemberInvite, index) => (
-                      <div className="flex w-full flex-row space-x-4" key={teamMemberInvite.id}>
-                        <FormField
-                          control={form.control}
-                          name={`invitations.${index}.email`}
-                          render={({ field }) => (
-                            <FormItem className="w-full">
-                              {index === 0 && (
-                                <FormLabel required>
-                                  <Trans>Email address</Trans>
-                                </FormLabel>
-                              )}
-                              <FormControl>
-                                <Input className="bg-background" {...field} />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        <FormField
-                          control={form.control}
-                          name={`invitations.${index}.role`}
-                          render={({ field }) => (
-                            <FormItem className="w-full">
-                              {index === 0 && (
-                                <FormLabel required>
-                                  <Trans>Role</Trans>
-                                </FormLabel>
-                              )}
-                              <FormControl>
-                                <Select {...field} onValueChange={field.onChange}>
-                                  <SelectTrigger className="text-muted-foreground max-w-[200px]">
-                                    <SelectValue />
-                                  </SelectTrigger>
-
-                                  <SelectContent position="popper">
-                                    {TEAM_MEMBER_ROLE_HIERARCHY[team.currentTeamMember.role].map(
-                                      (role) => (
-                                        <SelectItem key={role} value={role}>
-                                          {_(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
-                                        </SelectItem>
-                                      ),
-                                    )}
-                                  </SelectContent>
-                                </Select>
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        <button
-                          type="button"
-                          className={cn(
-                            'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
-                            index === 0 ? 'mt-8' : 'mt-0',
-                          )}
-                          disabled={teamMemberInvites.length === 1}
-                          onClick={() => removeTeamMemberInvite(index)}
-                        >
-                          <Trash className="h-5 w-5" />
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant="outline"
-                    className="w-fit"
-                    onClick={() => onAddTeamMemberInvite()}
-                  >
-                    <PlusCircle className="mr-2 h-4 w-4" />
-                    <Trans>Add more</Trans>
-                  </Button>
-
-                  <DialogFooter>
-                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                      <Trans>Cancel</Trans>
-                    </Button>
-
-                    <Button type="submit" loading={form.formState.isSubmitting}>
-                      {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
-                      <Trans>Invite</Trans>
-                    </Button>
-                  </DialogFooter>
-                </fieldset>
-              </form>
-            </Form>
-          </TabsContent>
-
-          <TabsContent value="BULK">
-            <div className="mt-4 space-y-4">
-              <Card gradient className="h-32">
-                <CardContent
-                  className="text-muted-foreground/80 hover:text-muted-foreground/90 flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 transition-colors"
-                  onClick={() => fileInputRef.current?.click()}
-                >
-                  <Upload className="h-5 w-5" />
-
-                  <p className="mt-1 text-sm">
-                    <Trans>Click here to upload</Trans>
-                  </p>
-
-                  <input
-                    onChange={onFileInputChange}
-                    type="file"
-                    ref={fileInputRef}
-                    accept=".csv"
-                    hidden
-                  />
-                </CardContent>
-              </Card>
-
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={downloadTemplate}>
-                  <Download className="mr-2 h-4 w-4" />
-                  <Trans>Template</Trans>
-                </Button>
-              </DialogFooter>
-            </div>
-          </TabsContent>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -9,7 +9,8 @@ import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { TEAM_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/teams';
+import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
 import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -43,9 +44,9 @@ export type TeamMemberUpdateDialogProps = {
   currentUserTeamRole: TeamMemberRole;
   trigger?: React.ReactNode;
   teamId: number;
-  teamMemberId: number;
-  teamMemberName: string;
-  teamMemberRole: TeamMemberRole;
+  memberId: string;
+  memberName: string;
+  memberTeamRole: TeamMemberRole;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 const ZUpdateTeamMemberFormSchema = z.object({
@@ -58,9 +59,9 @@ export const TeamMemberUpdateDialog = ({
   currentUserTeamRole,
   trigger,
   teamId,
-  teamMemberId,
-  teamMemberName,
-  teamMemberRole,
+  memberId,
+  memberName,
+  memberTeamRole,
   ...props
 }: TeamMemberUpdateDialogProps) => {
   const [open, setOpen] = useState(false);
@@ -71,17 +72,17 @@ export const TeamMemberUpdateDialog = ({
   const form = useForm<ZUpdateTeamMemberSchema>({
     resolver: zodResolver(ZUpdateTeamMemberFormSchema),
     defaultValues: {
-      role: teamMemberRole,
+      role: memberTeamRole,
     },
   });
 
-  const { mutateAsync: updateTeamMember } = trpc.team.updateTeamMember.useMutation();
+  const { mutateAsync: updateTeamMember } = trpc.team.member.update.useMutation();
 
   const onFormSubmit = async ({ role }: ZUpdateTeamMemberSchema) => {
     try {
       await updateTeamMember({
         teamId,
-        teamMemberId,
+        memberId,
         data: {
           role,
         },
@@ -89,7 +90,7 @@ export const TeamMemberUpdateDialog = ({
 
       toast({
         title: _(msg`Success`),
-        description: _(msg`You have updated ${teamMemberName}.`),
+        description: _(msg`You have updated ${memberName}.`),
         duration: 5000,
       });
 
@@ -112,7 +113,7 @@ export const TeamMemberUpdateDialog = ({
 
     form.reset();
 
-    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, teamMemberRole)) {
+    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, memberTeamRole)) {
       setOpen(false);
 
       toast({
@@ -121,7 +122,7 @@ export const TeamMemberUpdateDialog = ({
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentUserTeamRole, teamMemberRole, form, toast]);
+  }, [open, currentUserTeamRole, memberTeamRole, form, toast]);
 
   return (
     <Dialog
@@ -143,9 +144,9 @@ export const TeamMemberUpdateDialog = ({
             <Trans>Update team member</Trans>
           </DialogTitle>
 
-          <DialogDescription className="mt-4">
+          <DialogDescription>
             <Trans>
-              You are currently updating <span className="font-bold">{teamMemberName}.</span>
+              You are currently updating <span className="font-bold">{memberName}.</span>
             </Trans>
           </DialogDescription>
         </DialogHeader>
@@ -170,7 +171,7 @@ export const TeamMemberUpdateDialog = ({
                         <SelectContent className="w-full" position="popper">
                           {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
                             <SelectItem key={role} value={role}>
-                              {_(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
+                              {_(EXTENDED_TEAM_MEMBER_ROLE_MAP[role]) ?? role}
                             </SelectItem>
                           ))}
                         </SelectContent>

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

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

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

@@ -21,7 +21,7 @@ import {
 import { Form, FormControl, FormField, FormItem } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 const ZBulkSendFormSchema = z.object({
   file: z.instanceof(File),
@@ -46,7 +46,7 @@ export const TemplateBulkSendDialog = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const form = useForm<TBulkSendFormSchema>({
     resolver: zodResolver(ZBulkSendFormSchema),

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

@@ -15,6 +15,7 @@ import { P, match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { DIRECT_TEMPLATE_DOCUMENTATION } from '@documenso/lib/constants/template';
@@ -75,6 +76,8 @@ export const TemplateDirectLinkDialog = ({
     token ? 'MANAGE' : 'ONBOARD',
   );
 
+  const organisation = useCurrentOrganisation();
+
   const validDirectTemplateRecipients = useMemo(
     () =>
       template.recipients.filter(
@@ -237,7 +240,7 @@ export const TemplateDirectLinkDialog = ({
                         templates.{' '}
                         <Link
                           className="mt-1 block underline underline-offset-4"
-                          to="/settings/billing"
+                          to={`/o/${organisation.url}/settings/billing`}
                         >
                           Upgrade your account to continue!
                         </Link>

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

@@ -34,7 +34,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 const ZCreateFolderFormSchema = z.object({
   name: z.string().min(1, { message: 'Folder name is required' }),
@@ -52,10 +52,11 @@ export const TemplateFolderCreateDialog = ({
 }: TemplateFolderCreateDialogProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
-  const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
   const { folderId } = useParams();
 
+  const navigate = useNavigate();
+  const team = useCurrentTeam();
+
   const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
 
   const { mutateAsync: createFolder } = trpc.folder.createFolder.useMutation();
@@ -81,7 +82,7 @@ export const TemplateFolderCreateDialog = ({
         description: _(msg`Folder created successfully`),
       });
 
-      const templatesPath = formatTemplatesPath(team?.url);
+      const templatesPath = formatTemplatesPath(team.url);
 
       void navigate(`${templatesPath}/f/${newFolder.id}`);
     } catch (err) {
@@ -126,7 +127,7 @@ export const TemplateFolderCreateDialog = ({
         <DialogHeader>
           <DialogTitle>Create New Folder</DialogTitle>
           <DialogDescription>
-            Enter a name for your new folder. Folders help you organize your templates.
+            Enter a name for your new folder. Folders help you organise your templates.
           </DialogDescription>
         </DialogHeader>
 

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

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

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

@@ -33,7 +33,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type TemplateMoveToFolderDialogProps = {
   templateId: number;
@@ -60,7 +60,7 @@ export function TemplateMoveToFolderDialog({
   const { _ } = useLingui();
   const { toast } = useToast();
   const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const form = useForm<TMoveTemplateFormSchema>({
     resolver: zodResolver(ZMoveTemplateFormSchema),
@@ -104,7 +104,7 @@ export function TemplateMoveToFolderDialog({
 
       onOpenChange(false);
 
-      const templatesPath = formatTemplatesPath(team?.url);
+      const templatesPath = formatTemplatesPath(team.url);
 
       if (data.folderId) {
         void navigate(`${templatesPath}/f/${data.folderId}`);

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

@@ -30,7 +30,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type TokenDeleteDialogProps = {
   token: Pick<ApiToken, 'id' | 'name'>;
@@ -42,7 +42,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [isOpen, setIsOpen] = useState(false);
 

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

@@ -9,7 +9,7 @@ import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
-import { ZCreateWebhookMutationSchema } from '@documenso/trpc/server/webhook-router/schema';
+import { ZCreateWebhookRequestSchema } from '@documenso/trpc/server/webhook-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -34,11 +34,11 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 import { WebhookMultiSelectCombobox } from '../general/webhook-multiselect-combobox';
 
-const ZCreateWebhookFormSchema = ZCreateWebhookMutationSchema.omit({ teamId: true });
+const ZCreateWebhookFormSchema = ZCreateWebhookRequestSchema.omit({ teamId: true });
 
 type TCreateWebhookFormSchema = z.infer<typeof ZCreateWebhookFormSchema>;
 
@@ -50,7 +50,7 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [open, setOpen] = useState(false);
 
@@ -78,7 +78,7 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
         eventTriggers,
         secret,
         webhookUrl,
-        teamId: team?.id,
+        teamId: team.id,
       });
 
       setOpen(false);

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

@@ -30,7 +30,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type WebhookDeleteDialogProps = {
   webhook: Pick<Webhook, 'id' | 'webhookUrl'>;
@@ -42,7 +42,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [open, setOpen] = useState(false);
 
@@ -67,7 +67,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
 
   const onSubmit = async () => {
     try {
-      await deleteWebhook({ id: webhook.id, teamId: team?.id });
+      await deleteWebhook({ id: webhook.id, teamId: team.id });
 
       toast({
         title: _(msg`Webhook deleted`),