Merge branch 'main' into feat/add-pdf-image-renderer

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import type { z } from 'zod';
 
+import type { TLicenseClaim } from '@documenso/lib/types/license';
 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';
@@ -22,7 +23,11 @@ import { SubscriptionClaimForm } from '../forms/subscription-claim-form';
 
 export type CreateClaimFormValues = z.infer<typeof ZCreateSubscriptionClaimRequestSchema>;
 
-export const ClaimCreateDialog = () => {
+type ClaimCreateDialogProps = {
+  licenseFlags?: TLicenseClaim;
+};
+
+export const ClaimCreateDialog = ({ licenseFlags }: ClaimCreateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -67,6 +72,7 @@ export const ClaimCreateDialog = () => {
             ...generateDefaultSubscriptionClaim(),
           }}
           onFormSubmit={createClaim}
+          licenseFlags={licenseFlags}
           formSubmitTrigger={
             <DialogFooter>
               <Button

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import { Trans, useLingui } from '@lingui/react/macro';
 
+import type { TLicenseClaim } from '@documenso/lib/types/license';
 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';
@@ -21,9 +22,10 @@ import { SubscriptionClaimForm } from '../forms/subscription-claim-form';
 export type ClaimUpdateDialogProps = {
   claim: TFindSubscriptionClaimsResponse['data'][number];
   trigger: React.ReactNode;
+  licenseFlags?: TLicenseClaim;
 };
 
-export const ClaimUpdateDialog = ({ claim, trigger }: ClaimUpdateDialogProps) => {
+export const ClaimUpdateDialog = ({ claim, trigger, licenseFlags }: ClaimUpdateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -69,6 +71,7 @@ export const ClaimUpdateDialog = ({ claim, trigger }: ClaimUpdateDialogProps) =>
               data,
             })
           }
+          licenseFlags={licenseFlags}
           formSubmitTrigger={
             <DialogFooter>
               <Button

apps/remix/app/components/dialogs/envelopes-bulk-delete-dialog.tsx

@@ -0,0 +1,170 @@
+import { plural } from '@lingui/core/macro';
+import { Plural, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+
+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,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EnvelopesBulkDeleteDialogProps = {
+  envelopeIds: string[];
+  envelopeType: EnvelopeType;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const EnvelopesBulkDeleteDialog = ({
+  envelopeIds,
+  envelopeType,
+  open,
+  onOpenChange,
+  onSuccess,
+  ...props
+}: EnvelopesBulkDeleteDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const trpcUtils = trpc.useUtils();
+
+  const isDocument = envelopeType === EnvelopeType.DOCUMENT;
+
+  const { mutateAsync: bulkDeleteEnvelopes, isPending } = trpc.envelope.bulk.delete.useMutation({
+    onSuccess: async (result) => {
+      // Invalidate the appropriate query based on envelope type.
+      if (isDocument) {
+        await trpcUtils.document.findDocumentsInternal.invalidate();
+      } else {
+        await trpcUtils.template.findTemplates.invalidate();
+      }
+
+      if (result.failedIds.length > 0) {
+        toast({
+          title: isDocument ? t`Documents partially deleted` : t`Templates partially deleted`,
+          description: t`${plural(result.deletedCount, {
+            one: '# item deleted.',
+            other: '# items deleted.',
+          })} ${plural(result.failedIds.length, {
+            one: '# item could not be deleted.',
+            other: '# items could not be deleted.',
+          })}`,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: isDocument ? t`Documents deleted` : t`Templates deleted`,
+          description: plural(result.deletedCount, {
+            one: '# item has been deleted.',
+            other: '# items have been deleted.',
+          }),
+          variant: 'default',
+        });
+      }
+
+      onSuccess?.();
+      onOpenChange(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Error`,
+        description: t`An error occurred while deleting the items.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isDocument ? <Trans>Delete Documents</Trans> : <Trans>Delete Templates</Trans>}
+          </DialogTitle>
+
+          <DialogDescription>
+            {isDocument ? (
+              <Plural
+                value={envelopeIds.length}
+                one="You are about to delete the selected document."
+                other="You are about to delete # documents."
+              />
+            ) : (
+              <Plural
+                value={envelopeIds.length}
+                one="You are about to delete the selected template."
+                other="You are about to delete # templates."
+              />
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>
+                Please note that this action is <strong>irreversible</strong>.
+              </Trans>
+            </p>
+
+            <p className="mt-1">
+              <Trans>Once confirmed, the following will occur:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              {isDocument ? (
+                <>
+                  <li>
+                    <Trans>Selected documents will be permanently deleted</Trans>
+                  </li>
+                  <li>
+                    <Trans>Pending documents will have their signing process cancelled</Trans>
+                  </li>
+                  <li>
+                    <Trans>All recipients will be notified</Trans>
+                  </li>
+                </>
+              ) : (
+                <>
+                  <li>
+                    <Trans>Selected templates will be permanently deleted</Trans>
+                  </li>
+                  <li>
+                    <Trans>Direct links associated with templates will be removed</Trans>
+                  </li>
+                </>
+              )}
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" disabled={isPending}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            onClick={(e) => {
+              e.preventDefault();
+              void bulkDeleteEnvelopes({ envelopeIds });
+            }}
+            loading={isPending}
+            variant="destructive"
+          >
+            <Trans>Delete</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelopes-bulk-move-dialog.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Plural, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderIcon, HomeIcon, Loader2, Search } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } 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,
+} 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 EnvelopesBulkMoveDialogProps = {
+  envelopeIds: string[];
+  envelopeType: EnvelopeType;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentFolderId?: string;
+  onSuccess?: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZBulkMoveFormSchema = z.object({
+  folderId: z.string().nullable(),
+});
+
+type TBulkMoveFormSchema = z.infer<typeof ZBulkMoveFormSchema>;
+
+export const EnvelopesBulkMoveDialog = ({
+  envelopeIds,
+  envelopeType,
+  open,
+  onOpenChange,
+  currentFolderId,
+  onSuccess,
+  ...props
+}: EnvelopesBulkMoveDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const form = useForm<TBulkMoveFormSchema>({
+    resolver: zodResolver(ZBulkMoveFormSchema),
+    defaultValues: {
+      folderId: currentFolderId ?? null,
+    },
+  });
+
+  const isDocument = envelopeType === EnvelopeType.DOCUMENT;
+
+  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFoldersInternal.useQuery(
+    {
+      parentId: currentFolderId,
+      type: envelopeType,
+    },
+    {
+      enabled: open,
+    },
+  );
+
+  const { mutateAsync: bulkMoveEnvelopes } = trpc.envelope.bulk.move.useMutation();
+
+  const trpcUtils = trpc.useUtils();
+
+  useEffect(() => {
+    if (open) {
+      setSearchTerm('');
+
+      form.reset({
+        folderId: currentFolderId,
+      });
+    }
+  }, [open, currentFolderId]);
+
+  const onSubmit = async (data: TBulkMoveFormSchema) => {
+    try {
+      await bulkMoveEnvelopes({
+        envelopeIds,
+        folderId: data.folderId,
+        envelopeType,
+      });
+
+      // Invalidate the appropriate query based on envelope type.
+      if (isDocument) {
+        await trpcUtils.document.findDocumentsInternal.invalidate();
+      } else {
+        await trpcUtils.template.findTemplates.invalidate();
+      }
+
+      toast({
+        description: t`Selected items have been moved.`,
+      });
+
+      onSuccess?.();
+      onOpenChange(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(
+          AppErrorCode.NOT_FOUND,
+          () => t`The folder you are trying to move the items to does not exist.`,
+        )
+        .with(AppErrorCode.UNAUTHORIZED, () => t`You are not allowed to move these items.`)
+        .with(AppErrorCode.INVALID_BODY, () => t`All items must be of the same type.`)
+        .otherwise(() => t`An error occurred while moving the items.`);
+
+      toast({
+        description: errorMessage,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const filteredFolders = folders?.data.filter((folder) =>
+    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isDocument ? (
+              <Trans>Move Documents to Folder</Trans>
+            ) : (
+              <Trans>Move Templates to Folder</Trans>
+            )}
+          </DialogTitle>
+
+          <DialogDescription>
+            {isDocument ? (
+              <Plural
+                value={envelopeIds.length}
+                one="Select a folder to move the selected document to."
+                other="Select a folder to move the # selected documents to."
+              />
+            ) : (
+              <Plural
+                value={envelopeIds.length}
+                one="Select a folder to move the selected template to."
+                other="Select a folder to move the # selected templates to."
+              />
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute left-2 top-3 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={t`Search folders...`}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="folderId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Folder</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <div className="max-h-96 space-y-2 overflow-y-auto">
+                      {isFoldersLoading ? (
+                        <div className="flex h-10 items-center justify-center">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        </div>
+                      ) : (
+                        <>
+                          <Button
+                            type="button"
+                            variant={field.value === null ? 'default' : 'outline'}
+                            className="w-full justify-start"
+                            onClick={() => field.onChange(null)}
+                            disabled={currentFolderId === undefined}
+                          >
+                            <HomeIcon className="mr-2 h-4 w-4" />
+                            <Trans>Home (No Folder)</Trans>
+                          </Button>
+
+                          {filteredFolders?.map((folder) => (
+                            <Button
+                              key={folder.id}
+                              type="button"
+                              variant={field.value === folder.id ? 'default' : 'outline'}
+                              className="w-full justify-start"
+                              onClick={() => field.onChange(folder.id)}
+                              disabled={currentFolderId === folder.id}
+                            >
+                              <FolderIcon className="mr-2 h-4 w-4" />
+                              {folder.name}
+                            </Button>
+                          ))}
+
+                          {searchTerm && filteredFolders?.length === 0 && (
+                            <div className="px-2 py-2 text-center text-sm text-muted-foreground">
+                              <Trans>No folders found</Trans>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                disabled={isFoldersLoading || form.formState.isSubmitting}
+                loading={form.formState.isSubmitting}
+              >
+                <Trans>Move</Trans>
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -1,10 +1,10 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, 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 { InfoIcon } from 'lucide-react';
+import { InfoIcon, UserPlusIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
@@ -13,6 +13,7 @@ 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 { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -44,6 +45,7 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { OrganisationMemberInviteDialog } from '~/components/dialogs/organisation-member-invite-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
 export type TeamMemberCreateDialogProps = {
@@ -64,11 +66,14 @@ 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 [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+  const prevInviteDialogOpenRef = useRef(false);
 
   const { t } = useLingui();
   const { toast } = useToast();
 
   const team = useCurrentTeam();
+  const utils = trpc.useUtils();
 
   const form = useForm<TAddTeamMembersFormSchema>({
     resolver: zodResolver(ZAddTeamMembersFormSchema),
@@ -96,7 +101,29 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
     );
   }, [organisationMemberQuery, teamMemberQuery]);
 
+  const hasNoAvailableMembers =
+    !organisationMemberQuery.isLoading && avaliableOrganisationMembers.length === 0;
+
   const onFormSubmit = async ({ members }: TAddTeamMembersFormSchema) => {
+    if (members.length === 0) {
+      if (hasNoAvailableMembers) {
+        setInviteDialogOpen(true);
+        return;
+      }
+
+      // Don't show error if on SELECT step - the disabled Next button already communicates this
+      if (step === 'SELECT') {
+        return;
+      }
+
+      toast({
+        title: t`No members selected`,
+        description: t`Please select at least one member to add to the team.`,
+        variant: 'destructive',
+      });
+      return;
+    }
+
     try {
       await createTeamMembers({
         teamId: team.id,
@@ -123,9 +150,20 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
     if (!open) {
       form.reset();
       setStep('SELECT');
+      setInviteDialogOpen(false);
     }
   }, [open, form]);
 
+  // Invalidate queries when invite dialog closes (transitions from true to false) to refresh available members
+  useEffect(() => {
+    if (prevInviteDialogOpenRef.current && !inviteDialogOpen) {
+      void utils.organisation.member.find.invalidate({
+        organisationId: team.organisationId,
+      });
+    }
+    prevInviteDialogOpenRef.current = inviteDialogOpen;
+  }, [inviteDialogOpen, utils, team.organisationId]);
+
   return (
     <Dialog
       {...props}
@@ -134,9 +172,11 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
       // 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>
+        {trigger ?? (
+          <Button variant="secondary" onClick={() => setOpen(true)}>
+            <Trans>Add members</Trans>
+          </Button>
+        )}
       </DialogTrigger>
 
       <DialogContent hideClose={true} position="center">
@@ -149,7 +189,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                   <TooltipTrigger asChild>
                     <InfoIcon className="mx-2 h-4 w-4" />
                   </TooltipTrigger>
-                  <TooltipContent className="text-muted-foreground z-[99999] max-w-xs">
+                  <TooltipContent className="z-[99999] max-w-xs text-muted-foreground">
                     <Trans>
                       To be able to add members to a team, you must first add them to the
                       organisation. For more information, please see the{' '}
@@ -186,7 +226,18 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
           .exhaustive()}
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+          <form
+            onSubmit={form.handleSubmit(onFormSubmit)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && form.getValues('members').length === 0) {
+                e.preventDefault();
+                if (hasNoAvailableMembers) {
+                  setInviteDialogOpen(true);
+                }
+                // Don't show toast - the disabled Next button already communicates this
+              }
+            }}
+          >
             <fieldset disabled={form.formState.isSubmitting}>
               {step === 'SELECT' && (
                 <>
@@ -194,46 +245,102 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                     control={form.control}
                     name="members"
                     render={({ field }) => (
-                      <FormItem>
+                      <FormItem className="space-y-2">
                         <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`}
-                          />
+                          {hasNoAvailableMembers ? (
+                            <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-muted-foreground/25 bg-muted/30 px-6 py-12 text-center">
+                              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+                                <UserPlusIcon className="h-6 w-6 text-muted-foreground" />
+                              </div>
+                              <h3 className="mb-2 text-sm font-semibold">
+                                <Trans>No organisation members available</Trans>
+                              </h3>
+                              <p className="mb-6 max-w-sm text-sm text-muted-foreground">
+                                <Trans>
+                                  To add members to this team, you must first add them to the
+                                  organisation.
+                                </Trans>
+                              </p>
+                              <OrganisationMemberInviteDialog
+                                open={inviteDialogOpen}
+                                onOpenChange={setInviteDialogOpen}
+                                trigger={
+                                  <Button type="button" variant="default">
+                                    <UserPlusIcon className="mr-2 h-4 w-4" />
+                                    <Trans>Invite organisation members</Trans>
+                                  </Button>
+                                }
+                              />
+                            </div>
+                          ) : (
+                            <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="w-full bg-background"
+                              emptySelectionPlaceholder={t`Select members`}
+                            />
+                          )}
                         </FormControl>
 
-                        <FormDescription>
-                          <Trans>Select members to add to this team</Trans>
-                        </FormDescription>
+                        {!hasNoAvailableMembers && (
+                          <>
+                            <FormDescription>
+                              <Trans>Select members to add to this team</Trans>
+                            </FormDescription>
+
+                            <Alert
+                              variant="neutral"
+                              className="mt-2 flex items-center gap-2 space-y-0"
+                            >
+                              <div>
+                                <UserPlusIcon className="h-5 w-5 text-muted-foreground" />
+                              </div>
+                              <AlertDescription className="mt-0 flex-1">
+                                <Trans>Can't find someone?</Trans>{' '}
+                                <OrganisationMemberInviteDialog
+                                  open={inviteDialogOpen}
+                                  onOpenChange={setInviteDialogOpen}
+                                  trigger={
+                                    <Button
+                                      type="button"
+                                      variant="link"
+                                      className="h-auto p-0 text-sm font-medium text-documenso-700 hover:text-documenso-600"
+                                    >
+                                      <Trans>Invite them to the organisation first</Trans>
+                                    </Button>
+                                  }
+                                />
+                              </AlertDescription>
+                            </Alert>
+                          </>
+                        )}
                       </FormItem>
                     )}
                   />
 
-                  <DialogFooter>
+                  <DialogFooter className="mt-4">
                     <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
                       <Trans>Cancel</Trans>
                     </Button>