chore: merged main

2026-07-26 18:04:55 +10:00 · 2026-06-09 08:32:31 +03:00
parent 6be76034b4 ecc98fbd41
commit e36d83ba65
130 changed files with 7382 additions and 1508 deletions
@@ -14,13 +14,22 @@ import {
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
-import { CommandDialog } from '@documenso/ui/primitives/command';
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@documenso/ui/primitives/command';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
 import { useLingui } from '@lingui/react/macro';
 import type { FieldType } from '@prisma/client';
 import Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { Transformer } from 'konva/lib/shapes/Transformer';
-import { CopyPlusIcon, SquareStackIcon, TrashIcon, UserCircleIcon } from 'lucide-react';
+import { CopyPlusIcon, ShapesIcon, SquareStackIcon, TrashIcon, UserCircleIcon } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';

 import { fieldButtonList } from './envelope-editor-fields-drag-drop';
@@ -470,6 +479,22 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
    }
  };

+  const changeSelectedFieldsType = (type: FieldType) => {
+    const fields = selectedKonvaFieldGroups
+      .map((field) => editorFields.getFieldByFormId(field.id()))
+      .filter((field) => field !== undefined);
+
+    for (const field of fields) {
+      if (field.type !== type) {
+        editorFields.updateFieldByFormId(field.formId, {
+          type,
+          fieldMeta: structuredClone(FIELD_META_DEFAULT_VALUES[type]),
+          id: undefined,
+        });
+      }
+    }
+  };
+
  const duplicatedSelectedFields = () => {
    const fields = selectedKonvaFieldGroups
      .map((field) => editorFields.getFieldByFormId(field.id()))
@@ -554,6 +579,7 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
          handleDuplicateSelectedFieldsOnAllPages={duplicatedSelectedFieldsOnAllPages}
          handleDeleteSelectedFields={deletedSelectedFields}
          handleChangeRecipient={changeSelectedFieldsRecipients}
+          handleChangeFieldType={changeSelectedFieldsType}
          selectedFieldFormId={selectedKonvaFieldGroups.map((field) => field.id())}
          style={{
            position: 'absolute',
@@ -602,6 +628,7 @@ type FieldActionButtonsProps = React.HTMLAttributes<HTMLDivElement> & {
  handleDuplicateSelectedFieldsOnAllPages: () => void;
  handleDeleteSelectedFields: () => void;
  handleChangeRecipient: (recipientId: number) => void;
+  handleChangeFieldType: (type: FieldType) => void;
  selectedFieldFormId: string[];
 };

@@ -610,15 +637,40 @@ const FieldActionButtons = ({
  handleDuplicateSelectedFieldsOnAllPages,
  handleDeleteSelectedFields,
  handleChangeRecipient,
+  handleChangeFieldType,
  selectedFieldFormId,
  ...props
 }: FieldActionButtonsProps) => {
  const { t } = useLingui();

  const [showRecipientSelector, setShowRecipientSelector] = useState(false);
+  const [showFieldTypeSelector, setShowFieldTypeSelector] = useState(false);

  const { editorFields, envelope } = useCurrentEnvelopeEditor();

+  /**
+   * Decide the preselected field type in the command input.
+   *
+   * If all fields share the same type, use that as the default selection.
+   * Otherwise show no preselection.
+   */
+  const preselectedFieldType = useMemo(() => {
+    if (selectedFieldFormId.length === 0) {
+      return null;
+    }
+
+    const fields = editorFields.localFields.filter((field) => selectedFieldFormId.includes(field.formId));
+
+    if (fields.length === 0) {
+      return null;
+    }
+
+    const firstType = fields[0].type;
+    const isTypesSame = fields.every((field) => field.type === firstType);
+
+    return isTypesSame ? firstType : null;
+  }, [editorFields.localFields, selectedFieldFormId]);
+
  /**
   * Decide the preselected recipient in the command input.
   *
@@ -656,6 +708,7 @@ const FieldActionButtons = ({
    <div className="flex flex-col items-center" {...props}>
      <div className="group flex w-fit items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5">
        <button
+          type="button"
          title={t`Change Recipient`}
          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
          onClick={() => setShowRecipientSelector(true)}
@@ -665,6 +718,17 @@ const FieldActionButtons = ({
        </button>

        <button
+          type="button"
+          title={t`Change Field Type`}
+          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+          onClick={() => setShowFieldTypeSelector(true)}
+          onTouchEnd={() => setShowFieldTypeSelector(true)}
+        >
+          <ShapesIcon className="h-3 w-3" />
+        </button>
+
+        <button
+          type="button"
          title={t`Duplicate`}
          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
          onClick={handleDuplicateSelectedFields}
@@ -674,6 +738,7 @@ const FieldActionButtons = ({
        </button>

        <button
+          type="button"
          title={t`Duplicate on all pages`}
          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
          onClick={handleDuplicateSelectedFieldsOnAllPages}
@@ -683,6 +748,7 @@ const FieldActionButtons = ({
        </button>

        <button
+          type="button"
          title={t`Remove`}
          className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
          onClick={handleDeleteSelectedFields}
@@ -705,6 +771,41 @@ const FieldActionButtons = ({
          fields={envelope.fields}
        />
      </CommandDialog>
+
+      <CommandDialog position="start" open={showFieldTypeSelector} onOpenChange={setShowFieldTypeSelector}>
+        <Command defaultValue={preselectedFieldType ? t(FRIENDLY_FIELD_TYPE[preselectedFieldType]) : undefined}>
+          <CommandInput placeholder={t`Select a field type`} />
+
+          <CommandList>
+            <CommandEmpty>
+              <span className="inline-block px-4 text-muted-foreground">
+                {t`No field type matching this description was found.`}
+              </span>
+            </CommandEmpty>
+
+            <CommandGroup>
+              {fieldButtonList.map((field) => {
+                const FieldIcon = field.icon;
+                const label = t(FRIENDLY_FIELD_TYPE[field.type]);
+
+                return (
+                  <CommandItem
+                    key={field.type}
+                    className="px-2"
+                    onSelect={() => {
+                      handleChangeFieldType(field.type);
+                      setShowFieldTypeSelector(false);
+                    }}
+                  >
+                    <FieldIcon className="mr-2 h-4 w-4" />
+                    <span className="truncate">{label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
    </div>
  );
 };
@@ -21,6 +21,7 @@ import {
 } from '@documenso/ui/components/recipient/recipient-autocomplete-input';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 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, CardDescription, CardHeader, CardTitle } from '@documenso/ui/primitives/card';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
@@ -586,6 +587,9 @@ export const EnvelopeEditorRecipientForm = () => {
    }
  }, [formValues]);

+  const recipientCountLimit = organisation.organisationClaim.recipientCount;
+  const isOverRecipientLimit = recipientCountLimit > 0 && signers.length > recipientCountLimit;
+
  return (
    <Card backdropBlur={false} className="border">
      <CardHeader className="flex flex-row justify-between">
@@ -650,6 +654,17 @@ export const EnvelopeEditorRecipientForm = () => {
      </CardHeader>

      <CardContent>
+        {isOverRecipientLimit && (
+          <Alert variant="destructive" className="mb-4">
+            <AlertDescription>
+              <Trans>
+                This envelope cannot have more than {recipientCountLimit} recipients. Please contact support if you need
+                more.
+              </Trans>
+            </AlertDescription>
+          </Alert>
+        )}
+
        <Form {...form}>
          <div
            className={cn('-mt-2 mb-2 space-y-4 rounded-md bg-accent/50 p-4', {
@@ -9,7 +9,7 @@ import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { ZDocumentAccessAuthTypesSchema, ZDocumentActionAuthTypesSchema } from '@documenso/lib/types/document-auth';
-import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { DocumentEmailEvents, ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
 import {
  type TDocumentMetaDateFormat,
  ZDocumentMetaDateFormatSchema,
@@ -39,6 +39,7 @@ import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expira
 import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
 import { TemplateTypeSelect, TemplateTypeTooltip } from '@documenso/ui/components/template/template-type-select';
 import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { CardDescription, CardHeader, CardTitle } from '@documenso/ui/primitives/card';
 import { Combobox } from '@documenso/ui/primitives/combobox';
@@ -114,7 +115,7 @@ export const ZAddSettingsFormSchema = z.object({
  }),
 });

-type EnvelopeEditorSettingsTabType = 'general' | 'reminders' | 'email' | 'security';
+type EnvelopeEditorSettingsTabType = 'general' | 'reminders' | 'notifications' | 'security';

 const tabs = [
  {
@@ -130,10 +131,10 @@ const tabs = [
    description: msg`Configure signing reminder settings for the document.`,
  },
  {
-    id: 'email',
-    title: msg`Email`,
+    id: 'notifications',
+    title: msg`Notifications`,
    icon: MailIcon,
-    description: msg`Configure email settings for the document.`,
+    description: msg`Configure notification settings for the document.`,
  },
  {
    id: 'security',
@@ -143,6 +144,18 @@ const tabs = [
  },
 ] as const;

+// Recipient-facing notification events. These are suppressed at send time
+// when distributionMethod is not EMAIL (see extractDerivedDocumentEmailSettings),
+// so the UI mirrors that by disabling the matching checkboxes.
+const RECIPIENT_EMAIL_EVENTS = [
+  DocumentEmailEvents.RecipientSigningRequest,
+  DocumentEmailEvents.RecipientRemoved,
+  DocumentEmailEvents.RecipientSigned,
+  DocumentEmailEvents.DocumentPending,
+  DocumentEmailEvents.DocumentCompleted,
+  DocumentEmailEvents.DocumentDeleted,
+] as const;
+
 type TAddSettingsFormSchema = z.infer<typeof ZAddSettingsFormSchema>;

 type EnvelopeEditorSettingsDialogProps = {
@@ -205,6 +218,8 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
    );

  const emailSettings = form.watch('meta.emailSettings');
+  const distributionMethod = form.watch('meta.distributionMethod');
+  const isEmailDistribution = distributionMethod === DocumentDistributionMethod.EMAIL;

  const { data: emailData, isLoading: isLoadingEmails } = trpc.enterprise.organisation.email.find.useQuery(
    {
@@ -334,7 +349,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit

          <nav className="col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 px-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2">
            {tabs.map((tab) => {
-              if (tab.id === 'email' && !settings.allowConfigureDistribution) {
+              if (tab.id === 'notifications' && !settings.allowConfigureDistribution) {
                return null;
              }

@@ -730,7 +745,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                      )}
                    />
                  ))
-                  .with({ activeTab: 'email', settings: { allowConfigureDistribution: true } }, () => (
+                  .with({ activeTab: 'notifications', settings: { allowConfigureDistribution: true } }, () => (
                    <>
                      {settings.allowConfigureEmailSender && organisation.organisationClaim.flags.emailDomains && (
                        <FormField
@@ -747,6 +762,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                                  {...field}
                                  value={field.value === null ? '-1' : field.value}
                                  onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                                  disabled={!isEmailDistribution}
                                >
                                  <SelectTrigger loading={isLoadingEmails} className="bg-background">
                                    <SelectValue />
@@ -783,7 +799,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                              </FormLabel>

                              <FormControl>
-                                <Input {...field} />
+                                <Input {...field} disabled={!isEmailDistribution} />
                              </FormControl>

                              <FormMessage />
@@ -804,7 +820,7 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                            </FormLabel>

                            <FormControl>
-                              <Input {...field} />
+                              <Input {...field} disabled={!isEmailDistribution} />
                            </FormControl>

                            <FormMessage />
@@ -832,7 +848,11 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                            </FormLabel>

                            <FormControl>
-                              <Textarea className="h-16 resize-none bg-background" {...field} />
+                              <Textarea
+                                className="h-16 resize-none bg-background"
+                                {...field}
+                                disabled={!isEmailDistribution}
+                              />
                            </FormControl>

                            <FormMessage />
@@ -843,7 +863,19 @@ export const EnvelopeEditorSettingsDialog = ({ trigger, ...props }: EnvelopeEdit
                      <DocumentEmailCheckboxes
                        value={emailSettings}
                        onChange={(value) => form.setValue('meta.emailSettings', value)}
+                        hiddenEvents={isEmailDistribution ? undefined : RECIPIENT_EMAIL_EVENTS}
                      />
+
+                      {!isEmailDistribution && (
+                        <Alert variant="warning">
+                          <AlertDescription>
+                            <Trans>
+                              Email distribution needs to be enabled in the general settings tab to configure recipient
+                              email related settings.
+                            </Trans>
+                          </AlertDescription>
+                        </Alert>
+                      )}
                    </>
                  ))
                  .with({ activeTab: 'security' }, () => (