diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx
index 2dba30c18..b30026f16 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx
@@ -5,7 +5,7 @@ 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 } from 'lucide-react';
+import { CopyPlusIcon, SquareStackIcon, TrashIcon, UserCircleIcon } from 'lucide-react';
import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
@@ -20,8 +20,10 @@ 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 { fieldButtonList } from './envelope-editor-fields-drag-drop';
+import { EnvelopeRecipientSelectorCommand } from './envelope-recipient-selector';
export default function EnvelopeEditorFieldsPageRenderer() {
const { t, i18n } = useLingui();
@@ -468,6 +470,18 @@ export default function EnvelopeEditorFieldsPageRenderer() {
setSelectedFields([]);
};
+ const changeSelectedFieldsRecipients = (recipientId: number) => {
+ const fields = selectedKonvaFieldGroups
+ .map((field) => editorFields.getFieldByFormId(field.id()))
+ .filter((field) => field !== undefined);
+
+ for (const field of fields) {
+ if (field.recipientId !== recipientId) {
+ editorFields.updateFieldByFormId(field.formId, { recipientId, id: undefined });
+ }
+ }
+ };
+
const duplicatedSelectedFields = () => {
const fields = selectedKonvaFieldGroups
.map((field) => editorFields.getFieldByFormId(field.id()))
@@ -552,7 +566,12 @@ export default function EnvelopeEditorFieldsPageRenderer() {
{selectedKonvaFieldGroups.length > 0 &&
interactiveTransformer.current &&
!isFieldChanging && (
- field.id())}
style={{
position: 'absolute',
top:
@@ -569,35 +588,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
pointerEvents: 'auto',
zIndex: 50,
}}
- className="group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5"
- >
-
-
-
-
-
-
+ />
)}
{pendingFieldCreation && (
@@ -644,3 +635,119 @@ export default function EnvelopeEditorFieldsPageRenderer() {
);
}
+
+type FieldActionButtonsProps = React.HTMLAttributes & {
+ handleDuplicateSelectedFields: () => void;
+ handleDuplicateSelectedFieldsOnAllPages: () => void;
+ handleDeleteSelectedFields: () => void;
+ handleChangeRecipient: (recipientId: number) => void;
+ selectedFieldFormId: string[];
+};
+
+const FieldActionButtons = ({
+ handleDuplicateSelectedFields,
+ handleDuplicateSelectedFieldsOnAllPages,
+ handleDeleteSelectedFields,
+ handleChangeRecipient,
+ selectedFieldFormId,
+ ...props
+}: FieldActionButtonsProps) => {
+ const { t } = useLingui();
+
+ const [showRecipientSelector, setShowRecipientSelector] = useState(false);
+
+ const { editorFields, envelope } = useCurrentEnvelopeEditor();
+
+ /**
+ * Decide the preselected recipient in the command input.
+ *
+ * If all fields belong to the same recipient then use that recipient as the default.
+ *
+ * Otherwise show the placeholder.
+ */
+ const preselectedRecipient = useMemo(() => {
+ if (selectedFieldFormId.length === 0) {
+ return null;
+ }
+
+ const fields = editorFields.localFields.filter((field) =>
+ selectedFieldFormId.includes(field.formId),
+ );
+
+ const recipient = envelope.recipients.find(
+ (recipient) => recipient.id === fields[0].recipientId,
+ );
+
+ if (!recipient) {
+ return null;
+ }
+
+ const isRecipientsSame = fields.every((field) => field.recipientId === recipient.id);
+
+ if (isRecipientsSame) {
+ return recipient;
+ }
+
+ return null;
+ }, [editorFields.localFields]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ editorFields.setSelectedRecipient(recipient.id);
+ handleChangeRecipient(recipient.id);
+ setShowRecipientSelector(false);
+ }}
+ recipients={envelope.recipients}
+ fields={envelope.fields}
+ />
+
+
+ {t(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
+
+
+ {roleRecipients.length === 0 && (
+
+ No recipients with this role
+
+ )}
+
+ {roleRecipients.map((recipient) => (
+ r.id === recipient.id),
+ 0,
+ ),
+ ).comboxBoxItem,
+ {
+ 'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+ 'cursor-not-allowed': isRecipientDisabled(recipient.id),
+ },
+ )}
+ onSelect={() => {
+ if (!isRecipientDisabled(recipient.id)) {
+ onSelectedRecipientChange(recipient);
+ }
+ }}
+ >
+
+ {recipient.name && (
+
+ {recipient.name} ({recipient.email})
+
+ )}
+
+ {!recipient.name && {recipient.email}}
+
+
+
+ {!isRecipientDisabled(recipient.id) ? (
+
+ ) : (
+
+
+
+
+
+
+
+ This document has already been sent to this recipient. You can no longer
+ edit this recipient.
+
+
+
+ )}
+
+
+ ))}
+
+ ))}
+
+ );
+};
diff --git a/packages/lib/client-only/hooks/use-editor-fields.ts b/packages/lib/client-only/hooks/use-editor-fields.ts
index 921699f2b..6b0b37776 100644
--- a/packages/lib/client-only/hooks/use-editor-fields.ts
+++ b/packages/lib/client-only/hooks/use-editor-fields.ts
@@ -170,10 +170,15 @@ export const useEditorFields = ({
);
const setFieldId = (formId: string, id: number) => {
- const index = localFields.findIndex((field) => field.formId === formId);
+ const { fields } = form.getValues();
+
+ const index = fields.findIndex((field) => field.formId === formId);
if (index !== -1) {
- form.setValue(`fields.${index}.id`, id);
+ update(index, {
+ ...fields[index],
+ id,
+ });
}
};