diff --git a/apps/remix/app/components/general/envelope-editor/recipient-row.tsx b/apps/remix/app/components/general/envelope-editor/recipient-row.tsx index 338e02b35..37a237136 100644 --- a/apps/remix/app/components/general/envelope-editor/recipient-row.tsx +++ b/apps/remix/app/components/general/envelope-editor/recipient-row.tsx @@ -11,7 +11,6 @@ import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipien import { cn } from '@documenso/ui/lib/utils'; import { Button } from '@documenso/ui/primitives/button'; import { FormControl, FormField, FormItem, FormMessage } from '@documenso/ui/primitives/form/form'; -import { Input } from '@documenso/ui/primitives/input'; import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; import { useLingui } from '@lingui/react/macro'; import { EnvelopeType, type RecipientRole } from '@prisma/client'; @@ -23,9 +22,7 @@ type TEditorSigner = TEditorRecipientsFormSchema['signers'][number]; export type RecipientRowProps = { signerIndex: number; signer: TEditorSigner; - stepCount: number; isSequential: boolean; - isGrouped: boolean; isInputDisabled: boolean; canBeModified: boolean; isRemoveDisabled: boolean; @@ -33,7 +30,6 @@ export type RecipientRowProps = { dragHandleProps?: DraggableProvidedDragHandleProps | null; recipientSuggestions: RecipientAutoCompleteOption[]; isLoadingSuggestions: boolean; - onSigningOrderChange: (signerIndex: number, value: string) => void; onRoleChange: (signerIndex: number, role: RecipientRole) => void; onRemove: (signerIndex: number) => void; onAutoCompleteSelect: (signerIndex: number, suggestion: RecipientAutoCompleteOption) => void; @@ -43,9 +39,7 @@ export type RecipientRowProps = { export const RecipientRow = ({ signerIndex, signer, - stepCount, isSequential, - isGrouped, isInputDisabled, canBeModified, isRemoveDisabled, @@ -53,7 +47,6 @@ export const RecipientRow = ({ dragHandleProps, recipientSuggestions, isLoadingSuggestions, - onSigningOrderChange, onRoleChange, onRemove, onAutoCompleteSelect, @@ -81,52 +74,19 @@ export const RecipientRow = ({
{isSequential && !isCcRecipient(signer) && ( - ( - - - - - - - { - field.onChange(e); - onSigningOrderChange(signerIndex, e.target.value); - }} - onBlur={(e) => { - field.onBlur(); - onSigningOrderChange(signerIndex, e.target.value); - }} - disabled={isFieldDisabled} - /> - - - - )} - /> + + + )} - + {/* + Note: `type="RECIPIENT"` already scopes this droppable to recipient-row + drags — `isDropDisabled` must not be toggled based on the active drag, + as @hello-pangea/dnd snapshots it at drag start. + */} + {(droppableProvided, droppableSnapshot) => { const isJoinTarget = draggingType === 'RECIPIENT' && droppableSnapshot.isDraggingOver; const isHighlighted = isCombineTarget || isJoinTarget; @@ -108,7 +107,7 @@ export const RecipientStepCard = ({ - Step {step.order} + Group {step.order} {isGroup && ( @@ -156,7 +155,6 @@ export const RecipientStepCard = ({ signerIndex={signerIndex} signer={member} isSequential={true} - isGrouped={isGroup} isInputDisabled={memberSnapshot.isDragging || draggableSnapshot.isDragging} canBeModified={canBeModified} isRemoveDisabled={isRemoveDisabled} diff --git a/apps/remix/app/components/general/envelope-editor/recipient-step-list.tsx b/apps/remix/app/components/general/envelope-editor/recipient-step-list.tsx index c934e3bbf..8a631cc04 100644 --- a/apps/remix/app/components/general/envelope-editor/recipient-step-list.tsx +++ b/apps/remix/app/components/general/envelope-editor/recipient-step-list.tsx @@ -10,7 +10,7 @@ import { reorderStep, ungroupStep, } from '@documenso/lib/utils/recipient-groups'; -import { canEditorRecipientBeModified, isAssistantLastSigner, isCcRecipient } from '@documenso/lib/utils/recipients'; +import { canEditorRecipientBeModified, isAssistantLastSigner } from '@documenso/lib/utils/recipients'; import { trpc } from '@documenso/trpc/react'; import type { RecipientAutoCompleteOption } from '@documenso/ui/components/recipient/recipient-autocomplete-input'; import { cn } from '@documenso/ui/lib/utils'; @@ -26,22 +26,26 @@ import { type DraggingType, RecipientStepCard } from './recipient-step-card'; type TEditorSigner = TEditorRecipientsFormSchema['signers'][number]; +// Notes: +// - `type="RECIPIENT"` already scopes these droppables to recipient-row drags, +// and `isDropDisabled` must not be toggled based on the active drag, as +// @hello-pangea/dnd snapshots it at drag start (before state updates land). +// - The gap must keep a CONSTANT size: droppable geometry is captured when a +// drag starts, so resizing during the drag would leave the visible strip and +// the actual hit area in different places. Only colors may change mid-drag. const RecipientStepGap = ({ gapIndex, draggingType }: { gapIndex: number; draggingType: DraggingType }) => ( - + {(provided, snapshot) => (
-
{provided.placeholder}
+ {provided.placeholder}
)}
@@ -81,7 +85,6 @@ export const RecipientStepList = ({ showAdvancedSettings }: RecipientStepListPro const { steps, ccRecipients } = useMemo(() => groupRecipientsBySigningOrder(watchedSigners), [watchedSigners]); - const stepCount = steps.length; const isRemoveDisabled = watchedSigners.length === 1; const flatIndexByFormId = useMemo( @@ -115,51 +118,6 @@ export const RecipientStepList = ({ showAdvancedSettings }: RecipientStepListPro [form, t, toast], ); - const handleSigningOrderChange = useCallback( - (signerIndex: number, newOrderString: string) => { - const trimmedOrderString = newOrderString.trim(); - - if (!trimmedOrderString) { - return; - } - - const newOrder = Number(trimmedOrderString); - - if (!Number.isInteger(newOrder) || newOrder < 1) { - return; - } - - const currentSigners = form.getValues('signers'); - const signer = currentSigners[signerIndex]; - - if (!signer || isCcRecipient(signer)) { - return; - } - - const { steps: currentSteps } = groupRecipientsBySigningOrder(currentSigners); - - const currentStepIndex = currentSteps.findIndex((step) => - step.members.some((member) => member.formId === signer.formId), - ); - const targetStepIndex = newOrder - 1; - - if (targetStepIndex === currentStepIndex) { - return; - } - - // Typing an existing step number joins that step's group; an - // out-of-bounds number extracts the recipient to a standalone step at - // the end. - const updatedSigners = - targetStepIndex >= currentSteps.length - ? extractRecipientToNewStep(currentSigners, signer.formId, currentSteps.length, canSignerBeModified) - : moveRecipientToStep(currentSigners, signer.formId, targetStepIndex, canSignerBeModified); - - applySigners(updatedSigners, { warnWhenAssistantLast: signer.role === RecipientRole.ASSISTANT }); - }, - [form, canSignerBeModified, applySigners], - ); - const handleRoleChange = useCallback( (signerIndex: number, role: RecipientRole) => { const currentSigners = form.getValues('signers'); @@ -291,11 +249,9 @@ export const RecipientStepList = ({ showAdvancedSettings }: RecipientStepListPro ); const sharedRowProps = { - stepCount, showAdvancedSettings, recipientSuggestions, isLoadingSuggestions: isLoading, - onSigningOrderChange: handleSigningOrderChange, onRoleChange: handleRoleChange, onRemove: handleRemove, onAutoCompleteSelect: handleAutoCompleteSelect, @@ -324,7 +280,6 @@ export const RecipientStepList = ({ showAdvancedSettings }: RecipientStepListPro signerIndex={index} signer={signer} isSequential={false} - isGrouped={false} isInputDisabled={false} canBeModified={canSignerBeModified(signer)} isRemoveDisabled={isRemoveDisabled} @@ -386,7 +341,6 @@ export const RecipientStepList = ({ showAdvancedSettings }: RecipientStepListPro signerIndex={flatIndexByFormId.get(signer.formId) ?? -1} signer={signer} isSequential={true} - isGrouped={false} isInputDisabled={false} canBeModified={canSignerBeModified(signer)} isRemoveDisabled={isRemoveDisabled}