feat: add default recipients for teams and orgs (#2248)

2026-07-24 00:43:40 +10:00 · 2026-01-13 11:32:00 +02:00
parent 5bc73a7471
commit bb3e9583e4
24 changed files with 734 additions and 24 deletions
@@ -0,0 +1,90 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { RecipientRole } from '@prisma/client';
+
+import type { TDefaultRecipient } from '@documenso/lib/types/default-recipients';
+import { trpc } from '@documenso/trpc/react';
+import { MultiSelect, type Option } from '@documenso/ui/primitives/multiselect';
+
+type DefaultRecipientsMultiSelectComboboxProps = {
+  listValues: TDefaultRecipient[];
+  onChange: (_values: TDefaultRecipient[]) => void;
+  teamId?: number;
+  organisationId?: string;
+};
+
+export const DefaultRecipientsMultiSelectCombobox = ({
+  listValues,
+  onChange,
+  teamId,
+  organisationId,
+}: DefaultRecipientsMultiSelectComboboxProps) => {
+  const { _ } = useLingui();
+
+  const { data: organisationData, isLoading: isLoadingOrganisation } =
+    trpc.organisation.member.find.useQuery(
+      {
+        organisationId: organisationId!,
+        query: '',
+        page: 1,
+        perPage: 100,
+      },
+      {
+        enabled: !!organisationId,
+      },
+    );
+
+  const { data: teamData, isLoading: isLoadingTeam } = trpc.team.member.find.useQuery(
+    {
+      teamId: teamId!,
+      query: '',
+      page: 1,
+      perPage: 100,
+    },
+    {
+      enabled: !!teamId,
+    },
+  );
+
+  const members = organisationId ? organisationData?.data : teamData?.data;
+  const isLoading = organisationId ? isLoadingOrganisation : isLoadingTeam;
+
+  const options = members?.map((member) => ({
+    value: member.email,
+    label: member.name ? `${member.name} (${member.email})` : member.email,
+  }));
+
+  const value = listValues.map((recipient) => ({
+    value: recipient.email,
+    label: recipient.name ? `${recipient.name} (${recipient.email})` : recipient.email,
+  }));
+
+  const onSelectionChange = (selected: Option[]) => {
+    const updatedRecipients = selected.map((option) => {
+      const existingRecipient = listValues.find((r) => r.email === option.value);
+      const member = members?.find((m) => m.email === option.value);
+
+      return {
+        email: option.value,
+        name: member?.name || option.value,
+        role: existingRecipient?.role ?? RecipientRole.CC,
+      };
+    });
+
+    onChange(updatedRecipients);
+  };
+
+  return (
+    <MultiSelect
+      commandProps={{ label: _(msg`Select recipients`) }}
+      options={options}
+      value={value}
+      onChange={onSelectionChange}
+      placeholder={_(msg`Select recipients`)}
+      hideClearAllButton
+      hidePlaceholderWhenSelected
+      loadingIndicator={isLoading ? <p className="text-center text-sm">Loading...</p> : undefined}
+      emptyIndicator={<p className="text-center text-sm">No members found</p>}
+    />
+  );
+};
@@ -306,7 +306,7 @@ export const EnvelopeEditorUploadPage = () => {
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            style={provided.draggableProps.style}
-                            className={`bg-accent/50 flex items-center justify-between rounded-lg p-3 transition-shadow ${
+                            className={`flex items-center justify-between rounded-lg bg-accent/50 p-3 transition-shadow ${
                              snapshot.isDragging ? 'shadow-md' : ''
                            }`}
                          >
@@ -332,7 +332,7 @@ export const EnvelopeEditorUploadPage = () => {
                                  <p className="text-sm font-medium">{localFile.title}</p>
                                )}

-                                <div className="text-muted-foreground text-xs">
+                                <div className="text-xs text-muted-foreground">
                                  {localFile.isUploading ? (
                                    <Trans>Uploading</Trans>
                                  ) : localFile.isError ? (
@@ -345,13 +345,13 @@ export const EnvelopeEditorUploadPage = () => {
                            <div className="flex items-center space-x-2">
                              {localFile.isUploading && (
                                <div className="flex h-6 w-10 items-center justify-center">
-                                  <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+                                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                                </div>
                              )}

                              {localFile.isError && (
                                <div className="flex h-6 w-10 items-center justify-center">
-                                  <FileWarningIcon className="text-destructive h-4 w-4" />
+                                  <FileWarningIcon className="h-4 w-4 text-destructive" />
                                </div>
                              )}

@@ -21,17 +21,17 @@ export default function DocumentEditSkeleton() {
      </div>

      <div className="mt-4 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
-        <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
+        <div className="col-span-12 rounded-xl border-2 border-border bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7 dark:bg-background">
          <div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
-            <Loader className="text-documenso h-12 w-12 animate-spin" />
+            <Loader className="h-12 w-12 animate-spin text-documenso" />

-            <p className="text-muted-foreground mt-4">
+            <p className="mt-4 text-muted-foreground">
              <Trans>Loading document...</Trans>
            </p>
          </div>
        </div>

-        <div className="bg-background border-border col-span-12 rounded-xl border-2 before:rounded-xl lg:col-span-6 xl:col-span-5" />
+        <div className="col-span-12 rounded-xl border-2 border-border bg-background before:rounded-xl lg:col-span-6 xl:col-span-5" />
      </div>
    </div>
  );