From aedfa43d4596e558a21676c3cc1acfc875c79407 Mon Sep 17 00:00:00 2001
From: Jackie Jou <jackiejou@users.noreply.github.com>
Date: Tue, 30 Jun 2026 13:18:37 -0700
Subject: [PATCH 1/2] feat(activity-feed-v2): wire TaskFormV2 into TaskModalV2
 with edit prefill and error handling

---
 i18n/en-US.properties                         |  32 +-
 .../task-modal-v2/TaskFormV2.tsx              |  26 ++
 .../task-modal-v2/TaskModalV2.scss            |   9 +-
 .../task-modal-v2/TaskModalV2.tsx             | 298 +++++++++++++-
 .../__tests__/TaskFormV2.test.tsx             |  27 ++
 .../__tests__/TaskModalV2.test.tsx            | 382 +++++++++++++++++-
 .../task-modal-v2/messages.ts                 |  75 +++-
 7 files changed, 803 insertions(+), 46 deletions(-)

diff --git a/i18n/en-US.properties b/i18n/en-US.properties
index 36ae547e2f..dd1c21194f 100644
--- a/i18n/en-US.properties
+++ b/i18n/en-US.properties
@@ -892,14 +892,22 @@ be.taskModalV2.assigneeFieldRequiredError = Required Field
 be.taskModalV2.assigneePlaceholder = Add an assignee or group
 # Label for the assignee combobox in the task modal
 be.taskModalV2.assigneeSelectorLabel = Select Assignees
+# Label for the Cancel button in the task modal footer
+be.taskModalV2.cancelButtonLabel = Cancel
 # aria-label for the task modal close button
 be.taskModalV2.close = Close
 # Label for the checkbox that switches a task to any-assignee completion
 be.taskModalV2.completionRuleCheckboxLabel = Only one assignee is required to complete this task
 # Title of the modal for creating an approval task
 be.taskModalV2.createApprovalTask = Create Approval Task
+# Label for the Create button in the task modal footer (create mode)
+be.taskModalV2.createButtonLabel = Create
 # Title of the modal for creating a general task
 be.taskModalV2.createGeneralTask = Create General Task
+# Body text of the error notice when creating a task fails
+be.taskModalV2.createTaskErrorMessage = An error occurred while creating this task. Please try again.
+# Title of the error notice when creating or updating a task fails
+be.taskModalV2.createTaskErrorTitle = Error
 # aria-label for the calendar inside the due-date date picker
 be.taskModalV2.datePickerCalendarAriaLabel = Due date calendar
 # aria-label for the clear button on the due-date date picker
@@ -910,18 +918,38 @@ be.taskModalV2.datePickerNextMonthAriaLabel = Next month
 be.taskModalV2.datePickerOpenAriaLabel = Open due date calendar
 # aria-label for the previous-month button in the due-date date picker
 be.taskModalV2.datePickerPreviousMonthAriaLabel = Previous month
-# Label for the due-date field in the task modal
-be.taskModalV2.dueDateLabel = Due Date
+# Label for the due-date field in the task modal; due date is optional
+be.taskModalV2.dueDateLabel = Due Date (optional)
 # Title of the modal for editing an existing approval task
 be.taskModalV2.editApprovalTask = Modify Approval Task
+# Warning shown when removing assignees from an approved task fails with 403
+be.taskModalV2.editApprovalTaskForbiddenMessage = Unable to remove assignee(s) because the task is now approved.
+# Title of the warning notice when an edit partially fails (403 on update)
+be.taskModalV2.editForbiddenTitle = Task Updated with Errors
 # Title of the modal for editing an existing general task
 be.taskModalV2.editGeneralTask = Modify General Task
+# Warning shown when removing assignees from a completed task fails with 403
+be.taskModalV2.editGeneralTaskForbiddenMessage = Unable to remove assignee(s) because the task is now completed.
+# Body of the warning notice when a group assignee exceeds the per-group maximum
+be.taskModalV2.groupExceedsLimitWarningMessage = One or more groups can not receive this task as a group size cannot exceed the limit of {max} assignees per group.
+# Title of the warning notice when a group assignee exceeds the per-group maximum
+be.taskModalV2.groupExceedsLimitWarningTitle = Exceeded max assignees per group
+# aria-label for the error variant icon in the task modal inline notice
+be.taskModalV2.inlineNoticeErrorAriaLabel = Error
+# aria-label for the warning variant icon in the task modal inline notice
+be.taskModalV2.inlineNoticeWarningAriaLabel = Warning
+# aria-label for the loading indicator on the submit button while a task is saving
+be.taskModalV2.loadingAriaLabel = Loading
 # Error message when the task message field is empty on submit
 be.taskModalV2.messageFieldRequiredError = Required Field
 # Label for the message field in the task modal
 be.taskModalV2.messageLabel = Message
 # Placeholder text for the message field in the task modal
 be.taskModalV2.messagePlaceholder = Write a message
+# Label for the Update button in the task modal footer (edit mode)
+be.taskModalV2.updateButtonLabel = Update
+# Body text of the error notice when updating an existing task fails
+be.taskModalV2.updateTaskErrorMessage = An error occurred while modifying this task. Please try again.
 # Shown instead of todays date.
 be.today = today
 # Label for keywords/topics skill section in the preview sidebar
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskFormV2.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskFormV2.tsx
index b336a0dd71..40e201a162 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskFormV2.tsx
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskFormV2.tsx
@@ -36,6 +36,7 @@ export type TaskFormV2Props = {
     initialMessage?: string;
     isDisabled?: boolean;
     onSubmit: (payload: TaskFormV2SubmitPayload) => void | Promise<void>;
+    taskId?: string;
     taskType: TaskType;
 };
 
@@ -74,6 +75,7 @@ const TaskFormV2 = ({
     initialMessage = '',
     isDisabled = false,
     onSubmit,
+    taskId = '',
     taskType,
 }: TaskFormV2Props) => {
     const { formatMessage } = useIntl();
@@ -108,6 +110,25 @@ const TaskFormV2 = ({
             ? formatMessage(messages.assigneeFieldRequiredError)
             : undefined;
 
+    const resinTags = React.useMemo(() => {
+        const initialIds = new Set(initialAssignees.map(a => a.target.id));
+        const currentIds = new Set(selectedUsers.map(u => u.value));
+        const added = selectedUsers.filter(u => !initialIds.has(u.value));
+        const removed = initialAssignees.filter(a => !currentIds.has(a.target.id));
+        const userCount = added.filter(u => u.type === 'user').length;
+        const groupCount = added.filter(u => u.type === 'group').length;
+        const submitDate = dueDate ? toSubmitDate(dueDate, originalDueDateTime).getTime() : undefined;
+        return {
+            'data-resin-assigneesadded': added.map(u => u.value).join(','),
+            'data-resin-assigneesremoved': removed.map(a => a.target.id).join(','),
+            'data-resin-duedate': submitDate,
+            'data-resin-numassigneesadded': userCount,
+            'data-resin-numassigneesremoved': removed.length,
+            'data-resin-numgroupsadded': groupCount,
+            'data-resin-taskid': taskId,
+        };
+    }, [dueDate, initialAssignees, originalDueDateTime, selectedUsers, taskId]);
+
     const minCalendarDate = React.useMemo(() => {
         const todayDate = today(getLocalTimeZone());
         if (initialDueDate && initialDueDate < todayDate.toDate(getLocalTimeZone())) {
@@ -142,8 +163,10 @@ const TaskFormV2 = ({
             data-resin-tasktype={taskType}
             id={TASK_FORM_V2_ID}
             onSubmit={handleFormSubmit}
+            {...resinTags}
         >
             <UserSelectorContainer
+                data-target-id="TaskFormV2-assigneeInput"
                 disabled={isDisabled}
                 error={assigneeError}
                 fetchAvatarUrls={fetchAvatarUrls}
@@ -157,6 +180,7 @@ const TaskFormV2 = ({
             {shouldShowCompletionRule && (
                 <Checkbox.Item
                     checked={completionRule === TASK_COMPLETION_RULE_ANY}
+                    data-target-id="TaskFormV2-completionRuleCheckbox"
                     disabled={isDisabled || isCompletionRuleDisabled}
                     label={formatMessage(messages.completionRuleCheckboxLabel)}
                     name="completionRule"
@@ -167,6 +191,7 @@ const TaskFormV2 = ({
                 />
             )}
             <TextArea
+                data-target-id="TaskFormV2-messageInput"
                 disabled={isDisabled}
                 error={messageError}
                 label={formatMessage(messages.messageLabel)}
@@ -179,6 +204,7 @@ const TaskFormV2 = ({
             <DatePicker
                 calendarAriaLabel={formatMessage(messages.datePickerCalendarAriaLabel)}
                 clearDatePickerAriaLabel={formatMessage(messages.datePickerClearAriaLabel)}
+                dataTargetId="TaskFormV2-dueDateInput"
                 isDisabled={isDisabled}
                 label={formatMessage(messages.dueDateLabel)}
                 minValue={minCalendarDate}
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.scss b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.scss
index dc29cbbbae..8ed866d221 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.scss
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.scss
@@ -1,14 +1,13 @@
-// Doubled class raises specificity above Blueprint Modal.Content size="medium" max-width default.
+// Doubled class beats Blueprint Modal.Content size="medium" max-width.
 .bcs-NewTaskModal.bcs-NewTaskModal {
-    display: flex;
-    flex-direction: column;
     max-width: 480px;
-    gap: var(--bp-space-040);
 }
 
-// Override Blueprint Modal.Body padding-top via doubled-class specificity.
 .bcs-NewTaskModal-body.bcs-NewTaskModal-body {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-space-040);
     padding-top: 0;
 
     // Pins the body to the modal's max-width so chip overflow inside the
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.tsx
index b34b249eb4..89a7f6b070 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.tsx
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.tsx
@@ -2,53 +2,317 @@ import * as React from 'react';
 import { useIntl } from 'react-intl';
 import type { MessageDescriptor } from 'react-intl';
 
-import { Modal } from '@box/blueprint-web';
+import { InlineNotice, Modal } from '@box/blueprint-web';
+import type { FetchedAvatarUrls, UserContactType } from '@box/user-selector';
 
-import { TASK_EDIT_MODE_CREATE, TASK_TYPE_APPROVAL, TASK_TYPE_GENERAL } from '../../../../constants';
+import {
+    ERROR_CODE_GROUP_EXCEEDS_LIMIT,
+    TASK_COMPLETION_RULE_ALL,
+    TASK_EDIT_MODE_EDIT,
+    TASK_MAX_GROUP_ASSIGNEES,
+    TASK_TYPE_GENERAL,
+} from '../../../../constants';
 
-import type { TaskEditMode, TaskType } from '../../../../common/types/tasks';
+import type { ElementsXhrError } from '../../../../common/types/api';
+import type {
+    TaskCollabAssignee,
+    TaskCompletionRule,
+    TaskEditMode,
+    TaskNew,
+    TaskType,
+    TaskUpdatePayload,
+} from '../../../../common/types/tasks';
+import type { GroupMini, SelectorItem, UserMini } from '../../../../common/types/core';
+
+import { ACTIVITY_TARGETS, INTERACTION_TARGET } from '../../../common/interactionTargets';
+
+import TaskFormV2, { TASK_FORM_V2_ID } from './TaskFormV2';
+import type { TaskFormV2SubmitPayload } from './TaskFormV2';
+import { type RuntimeAssignee } from './utils/contactMapping';
 
 import messages from './messages';
 
 import './TaskModalV2.scss';
 
-export type TaskModalV2Props = {
-    editMode?: TaskEditMode;
+type CreateTaskCallback = (
+    text: string,
+    approvers: SelectorItem<UserMini | GroupMini>[],
+    taskType: TaskType,
+    dueDate: string | null,
+    completionRule: TaskCompletionRule,
+    onSuccess: () => void,
+    onError: (error: ElementsXhrError) => void,
+) => void;
+
+type EditTaskCallback = (
+    payload: TaskUpdatePayload,
+    onSuccess: () => void,
+    onError: (error: ElementsXhrError) => void,
+) => void;
+
+type EditModeProps = {
+    editingAssignees: RuntimeAssignee[];
+    editingTask: TaskNew;
+    editTask: EditTaskCallback;
+    mode: 'edit';
+};
+
+type CreateModeProps = {
+    editingAssignees?: never;
+    editingTask?: never;
+    editTask?: never;
+    mode?: 'create';
+};
+
+type SharedProps = {
+    createTask: CreateTaskCallback;
+    error?: ElementsXhrError;
+    fetchAvatarUrls: (contacts: UserContactType[]) => Promise<FetchedAvatarUrls>;
+    fetchUsers: (query: string) => Promise<UserContactType[]>;
     isOpen: boolean;
     onClose: () => void;
+    onSubmitError: (error: ElementsXhrError) => void;
+    onSubmitSuccess: () => void;
     taskType: TaskType;
 };
 
+export type TaskModalV2Props = SharedProps & (CreateModeProps | EditModeProps);
+
 const getTitleMessage = (taskType: TaskType, editMode: TaskEditMode): MessageDescriptor => {
-    const isCreate = editMode === TASK_EDIT_MODE_CREATE;
+    const isEdit = editMode === TASK_EDIT_MODE_EDIT;
     if (taskType === TASK_TYPE_GENERAL) {
-        return isCreate ? messages.createGeneralTaskTitle : messages.editGeneralTaskTitle;
+        return isEdit ? messages.editGeneralTaskTitle : messages.createGeneralTaskTitle;
+    }
+    return isEdit ? messages.editApprovalTaskTitle : messages.createApprovalTaskTitle;
+};
+
+const getErrorStatus = (error: ElementsXhrError | undefined): number | undefined => {
+    if (!error) {
+        return undefined;
+    }
+    if ('status' in error && typeof error.status === 'number') {
+        return error.status;
+    }
+    const { response } = error as { response?: { status?: number } };
+    return response?.status;
+};
+
+const getErrorCode = (error: ElementsXhrError | undefined): string | undefined => {
+    if (!error) {
+        return undefined;
+    }
+    if ('code' in error && typeof error.code === 'string') {
+        return error.code;
+    }
+    const { response } = error as { response?: { data?: { code?: string } } };
+    return response?.data?.code;
+};
+
+const assigneeToSelectorItem = (assignee: RuntimeAssignee): SelectorItem<UserMini | GroupMini> => ({
+    id: assignee.target.id,
+    item: assignee.target,
+    name: assignee.target.name,
+    value: assignee.target.id,
+});
+
+const diffAssignees = (
+    next: RuntimeAssignee[],
+    previous: RuntimeAssignee[],
+): { added: RuntimeAssignee[]; removed: RuntimeAssignee[] } => {
+    const previousIds = new Set(previous.map(a => a.target.id));
+    const nextIds = new Set(next.map(a => a.target.id));
+    return {
+        added: next.filter(a => !previousIds.has(a.target.id)),
+        removed: previous.filter(a => !nextIds.has(a.target.id)),
+    };
+};
+
+const parseInitialDueDate = (raw: string | null | undefined): Date | null => {
+    if (!raw) {
+        return null;
     }
-    return isCreate ? messages.createApprovalTaskTitle : messages.editApprovalTaskTitle;
+    const parsed = new Date(raw);
+    return Number.isFinite(parsed.getTime()) ? parsed : null;
 };
 
-const TaskModalV2 = ({
-    editMode = TASK_EDIT_MODE_CREATE,
-    isOpen,
-    onClose,
-    taskType = TASK_TYPE_APPROVAL,
-}: TaskModalV2Props) => {
+const TaskModalV2 = (props: TaskModalV2Props) => {
+    const {
+        createTask,
+        error,
+        fetchAvatarUrls,
+        fetchUsers,
+        isOpen,
+        onClose,
+        onSubmitError,
+        onSubmitSuccess,
+        taskType,
+    } = props;
+    const isEditMode = props.mode === 'edit';
+    const editMode: TaskEditMode = isEditMode ? 'EDIT' : 'CREATE';
+    const editingTask = isEditMode ? props.editingTask : undefined;
+    const editingAssignees = isEditMode ? props.editingAssignees : undefined;
+    const editTask = isEditMode ? props.editTask : undefined;
+
     const { formatMessage } = useIntl();
     const titleMessage = getTitleMessage(taskType, editMode);
 
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+    const initialAssignees = editingAssignees;
+    const initialMessage = editingTask?.description ?? '';
+    const initialCompletionRule = editingTask?.completion_rule ?? TASK_COMPLETION_RULE_ALL;
+    const initialDueDate = parseInitialDueDate(editingTask?.due_at ?? null);
+
     const handleOpenChange = (open: boolean) => {
         if (!open) {
             onClose();
         }
     };
 
+    const handleSuccess = React.useCallback(() => {
+        setIsSubmitting(false);
+        onSubmitSuccess();
+    }, [onSubmitSuccess]);
+
+    const handleError = React.useCallback(
+        (apiError: ElementsXhrError) => {
+            setIsSubmitting(false);
+            onSubmitError(apiError);
+        },
+        [onSubmitError],
+    );
+
+    const handleFormSubmit = (payload: TaskFormV2SubmitPayload) => {
+        setIsSubmitting(true);
+        const dueAtString = payload.dueDate ? payload.dueDate.toISOString() : null;
+
+        try {
+            if (isEditMode && editingTask && editTask) {
+                const { added, removed } = diffAssignees(payload.assignees, editingAssignees ?? []);
+                editTask(
+                    {
+                        addedAssignees: added.map(assigneeToSelectorItem),
+                        completion_rule: payload.completionRule,
+                        description: payload.message,
+                        due_at: dueAtString,
+                        id: editingTask.id,
+                        // Cast widens v1's UserMini-only target to runtime reality (group targets exist).
+                        removedAssignees: removed as unknown as TaskCollabAssignee[],
+                    },
+                    handleSuccess,
+                    handleError,
+                );
+                return;
+            }
+            createTask(
+                payload.message,
+                payload.assignees.map(assigneeToSelectorItem),
+                taskType,
+                dueAtString,
+                payload.completionRule,
+                handleSuccess,
+                handleError,
+            );
+        } catch (thrown) {
+            handleError(thrown as ElementsXhrError);
+        }
+    };
+
+    const errorNotice = React.useMemo(() => {
+        if (!error) {
+            return null;
+        }
+        const status = getErrorStatus(error);
+        const code = getErrorCode(error);
+        const isForbiddenEdit = isEditMode && status === 403;
+        const isGroupLimit = code === ERROR_CODE_GROUP_EXCEEDS_LIMIT;
+
+        if (isForbiddenEdit) {
+            const forbiddenMessage =
+                taskType === TASK_TYPE_GENERAL
+                    ? messages.editGeneralTaskForbiddenMessage
+                    : messages.editApprovalTaskForbiddenMessage;
+            return (
+                <InlineNotice
+                    title={formatMessage(messages.editForbiddenTitle)}
+                    variant="warning"
+                    variantIconAriaLabel={formatMessage(messages.inlineNoticeWarningAriaLabel)}
+                >
+                    {formatMessage(forbiddenMessage)}
+                </InlineNotice>
+            );
+        }
+
+        if (isGroupLimit) {
+            return (
+                <InlineNotice
+                    title={formatMessage(messages.groupExceedsLimitWarningTitle)}
+                    variant="warning"
+                    variantIconAriaLabel={formatMessage(messages.inlineNoticeWarningAriaLabel)}
+                >
+                    {formatMessage(messages.groupExceedsLimitWarningMessage, { max: TASK_MAX_GROUP_ASSIGNEES })}
+                </InlineNotice>
+            );
+        }
+
+        return (
+            <InlineNotice
+                title={formatMessage(messages.createTaskErrorTitle)}
+                variant="error"
+                variantIconAriaLabel={formatMessage(messages.inlineNoticeErrorAriaLabel)}
+            >
+                {formatMessage(isEditMode ? messages.updateTaskErrorMessage : messages.createTaskErrorMessage)}
+            </InlineNotice>
+        );
+    }, [error, formatMessage, isEditMode, taskType]);
+
+    const submitLabel = formatMessage(isEditMode ? messages.updateButtonLabel : messages.createButtonLabel);
+
     return (
         <Modal open={isOpen} onOpenChange={handleOpenChange}>
-            <Modal.Content className="bcs-NewTaskModal" data-testid="task-modal-v2" size="medium">
+            <Modal.Content
+                className="bcs-NewTaskModal"
+                data-resin-component="taskmodalv2"
+                data-testid="task-modal-v2"
+                size="medium"
+            >
                 <Modal.Header>{formatMessage(titleMessage)}</Modal.Header>
-                <Modal.Body>
-                    <div>Form goes here</div>
+                <Modal.Body className="bcs-NewTaskModal-body">
+                    {errorNotice}
+                    <TaskFormV2
+                        editMode={editMode}
+                        fetchAvatarUrls={fetchAvatarUrls}
+                        fetchUsers={fetchUsers}
+                        initialAssignees={initialAssignees}
+                        initialCompletionRule={initialCompletionRule}
+                        initialDueDate={initialDueDate}
+                        initialMessage={initialMessage}
+                        isDisabled={isSubmitting}
+                        onSubmit={handleFormSubmit}
+                        taskId={editingTask?.id}
+                        taskType={taskType}
+                    />
                 </Modal.Body>
+                <Modal.Footer>
+                    <Modal.Footer.SecondaryButton
+                        data-target-id="TaskModalV2-cancelButton"
+                        disabled={isSubmitting}
+                        onClick={onClose}
+                        {...{ [INTERACTION_TARGET]: ACTIVITY_TARGETS.APPROVAL_FORM_CANCEL }}
+                    >
+                        {formatMessage(messages.cancelButtonLabel)}
+                    </Modal.Footer.SecondaryButton>
+                    <Modal.Footer.PrimaryButton
+                        data-target-id="TaskModalV2-submitButton"
+                        form={TASK_FORM_V2_ID}
+                        loading={isSubmitting}
+                        loadingAriaLabel={formatMessage(messages.loadingAriaLabel)}
+                        type="submit"
+                        {...{ [INTERACTION_TARGET]: ACTIVITY_TARGETS.APPROVAL_FORM_POST }}
+                    >
+                        {submitLabel}
+                    </Modal.Footer.PrimaryButton>
+                </Modal.Footer>
                 <Modal.Close aria-label={formatMessage(messages.closeLabel)} />
             </Modal.Content>
         </Modal>
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskFormV2.test.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskFormV2.test.tsx
index 806b2cd943..3114175eba 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskFormV2.test.tsx
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskFormV2.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { act } from 'react';
 import type { UserContactType } from '@box/user-selector';
 
 import { render, screen, userEvent } from '../../../../../test-utils/testing-library';
@@ -293,4 +294,30 @@ describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskFormV2', (
         expect(payload.dueDate?.getMinutes()).toBe(30);
         expect(payload.dueDate?.getSeconds()).toBe(15);
     });
+
+    test('tags the form root with resin component, taskid, tasktype, and isediting', () => {
+        renderForm({ editMode: TASK_EDIT_MODE_EDIT, taskId: 'task-42', taskType: TASK_TYPE_GENERAL });
+        const form = document.getElementById(TASK_FORM_V2_ID);
+        expect(form).toHaveAttribute('data-resin-component', 'taskformv2');
+        expect(form).toHaveAttribute('data-resin-taskid', 'task-42');
+        expect(form).toHaveAttribute('data-resin-tasktype', TASK_TYPE_GENERAL);
+        expect(form).toHaveAttribute('data-resin-isediting', 'true');
+    });
+
+    test('reflects assignee diff counts in resin attributes', () => {
+        renderForm({
+            editMode: TASK_EDIT_MODE_EDIT,
+            initialAssignees: [buildUserAssignee('1', 'Alice'), buildUserAssignee('2', 'Bob')],
+        });
+        act(() => {
+            lastUserSelectorProps.onSelectedUsersChange?.([
+                { email: 'alice@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+                { email: '', id: 99, name: 'Engineering', type: 'group', value: '99' },
+            ]);
+        });
+        const form = document.getElementById(TASK_FORM_V2_ID);
+        expect(form).toHaveAttribute('data-resin-numassigneesadded', '0');
+        expect(form).toHaveAttribute('data-resin-numgroupsadded', '1');
+        expect(form).toHaveAttribute('data-resin-numassigneesremoved', '1');
+    });
 });
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskModalV2.test.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskModalV2.test.tsx
index 89a9dea0b2..292d805066 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskModalV2.test.tsx
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskModalV2.test.tsx
@@ -1,54 +1,396 @@
 import * as React from 'react';
+import type { UserContactType } from '@box/user-selector';
 
 import { render, screen, userEvent } from '../../../../../test-utils/testing-library';
 import {
-    TASK_EDIT_MODE_CREATE,
-    TASK_EDIT_MODE_EDIT,
+    ERROR_CODE_GROUP_EXCEEDS_LIMIT,
+    TASK_COMPLETION_RULE_ALL,
     TASK_TYPE_APPROVAL,
     TASK_TYPE_GENERAL,
 } from '../../../../../constants';
+import type { ElementsXhrError } from '../../../../../common/types/api';
+import type { TaskNew } from '../../../../../common/types/tasks';
 import TaskModalV2 from '../TaskModalV2';
+import type { RuntimeAssignee } from '../utils/contactMapping';
 
-import type { TaskModalV2Props } from '../TaskModalV2';
+type UserSelectorMockProps = {
+    disabled?: boolean;
+    error?: string;
+    label?: React.ReactNode;
+    onSelectedUsersChange?: (users: UserContactType[]) => void;
+    placeholder?: string;
+    selectedUsers?: UserContactType[];
+};
 
-describe('elements/content-sidebar/task-modal-v2/TaskModalV2', () => {
-    const renderModal = (props: Partial<TaskModalV2Props> = {}) =>
-        render(<TaskModalV2 isOpen onClose={jest.fn()} taskType={TASK_TYPE_APPROVAL} {...props} />);
+let lastUserSelectorProps: UserSelectorMockProps = {};
 
+jest.mock('@box/user-selector', () => ({
+    UserSelectorContainer: (props: UserSelectorMockProps) => {
+        lastUserSelectorProps = props;
+        return (
+            <div data-testid="user-selector">
+                <label>
+                    {props.label}
+                    <input aria-label="assignee input" data-testid="user-selector-input" />
+                </label>
+                {props.error && <span role="alert">{props.error}</span>}
+                <ul>
+                    {(props.selectedUsers ?? []).map(user => (
+                        <li data-testid="user-selector-chip" key={user.value}>
+                            {user.name}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        );
+    },
+}));
+
+jest.mock('@box/blueprint-web', () => {
+    const actual = jest.requireActual('@box/blueprint-web');
+    return {
+        ...actual,
+        DatePicker: (props: { label: React.ReactNode; value?: unknown }) => (
+            <div data-testid="date-picker">
+                <span>{props.label}</span>
+                <span data-testid="date-picker-value">{props.value ? 'has-value' : 'empty'}</span>
+            </div>
+        ),
+    };
+});
+
+const buildUserAssignee = (id: string, name: string): RuntimeAssignee => ({
+    id: '',
+    permissions: { can_delete: false, can_update: false },
+    role: 'ASSIGNEE',
+    status: 'NOT_STARTED',
+    target: { email: `${name.toLowerCase()}@example.com`, id, name, type: 'user' },
+    type: 'task_collaborator',
+});
+
+const buildEditingTask = (overrides: Partial<TaskNew> = {}): TaskNew => ({
+    assigned_to: { entries: [], limit: 25, next_marker: '' },
+    completion_rule: TASK_COMPLETION_RULE_ALL,
+    created_at: '2026-06-30T12:00:00Z',
+    created_by: {
+        id: 'creator',
+        role: 'CREATOR',
+        status: 'NOT_STARTED',
+        target: { id: 'creator', name: 'Creator', type: 'user' },
+        type: 'task_collaborator',
+    },
+    description: 'Existing task description',
+    id: 'task-1',
+    modified_at: '2026-06-30T12:00:00Z',
+    permissions: {
+        can_create_task_collaborator: true,
+        can_create_task_link: true,
+        can_delete: true,
+        can_update: true,
+    },
+    status: 'NOT_STARTED',
+    task_links: { entries: [], limit: 25, next_marker: '' },
+    task_type: TASK_TYPE_APPROVAL,
+    type: 'task',
+    ...overrides,
+});
+
+type RenderModalOptions = {
+    createTask?: jest.Mock;
+    editTask?: jest.Mock;
+    editingAssignees?: RuntimeAssignee[];
+    editingTask?: TaskNew | null;
+    error?: ElementsXhrError;
+    isOpen?: boolean;
+    onClose?: jest.Mock;
+    onSubmitError?: jest.Mock;
+    onSubmitSuccess?: jest.Mock;
+    taskType?: TaskNew['task_type'];
+};
+
+const renderModal = (options: RenderModalOptions = {}) => {
+    const createTask = options.createTask ?? jest.fn();
+    const editTask = options.editTask ?? jest.fn();
+    const fetchUsers = jest.fn().mockResolvedValue([]);
+    const fetchAvatarUrls = jest.fn().mockResolvedValue({});
+    const onClose = options.onClose ?? jest.fn();
+    const onSubmitError = options.onSubmitError ?? jest.fn();
+    const onSubmitSuccess = options.onSubmitSuccess ?? jest.fn();
+    const taskType = options.taskType ?? TASK_TYPE_APPROVAL;
+    const isOpen = options.isOpen ?? true;
+
+    const editingTask = options.editingTask ?? null;
+    const shared = {
+        createTask,
+        error: options.error,
+        fetchAvatarUrls,
+        fetchUsers,
+        isOpen,
+        onClose,
+        onSubmitError,
+        onSubmitSuccess,
+        taskType,
+    };
+    const modal = editingTask ? (
+        <TaskModalV2
+            {...shared}
+            editingAssignees={options.editingAssignees ?? []}
+            editingTask={editingTask}
+            editTask={editTask}
+            mode="edit"
+        />
+    ) : (
+        <TaskModalV2 {...shared} />
+    );
+
+    const utils = render(modal);
+    return { ...utils, createTask, editTask, fetchAvatarUrls, fetchUsers, onClose, onSubmitError, onSubmitSuccess };
+};
+
+beforeEach(() => {
+    lastUserSelectorProps = {};
+});
+
+describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2', () => {
     test('renders nothing when isOpen is false', () => {
         renderModal({ isOpen: false });
         expect(screen.queryByTestId('task-modal-v2')).not.toBeInTheDocument();
     });
 
-    test('renders the modal with a placeholder form region when isOpen is true', () => {
+    test('renders the dialog, form, and footer buttons when isOpen is true', () => {
         renderModal();
         expect(screen.getByTestId('task-modal-v2')).toBeVisible();
-        expect(screen.getByText('Form goes here')).toBeVisible();
+        expect(screen.getByTestId('user-selector')).toBeVisible();
+        expect(screen.getByRole('button', { name: /create/i })).toBeVisible();
+        expect(screen.getByRole('button', { name: /cancel/i })).toBeVisible();
     });
 
     test.each([
-        [TASK_TYPE_APPROVAL, TASK_EDIT_MODE_CREATE, 'Create Approval Task'],
-        [TASK_TYPE_APPROVAL, TASK_EDIT_MODE_EDIT, 'Modify Approval Task'],
-        [TASK_TYPE_GENERAL, TASK_EDIT_MODE_CREATE, 'Create General Task'],
-        [TASK_TYPE_GENERAL, TASK_EDIT_MODE_EDIT, 'Modify General Task'],
-    ])('renders the correct title for taskType=%s editMode=%s', (taskType, editMode, expectedTitle) => {
-        renderModal({ taskType, editMode });
-        expect(screen.getByRole('heading', { name: expectedTitle })).toBeVisible();
-    });
+        [TASK_TYPE_APPROVAL, false, 'Create Approval Task', /create/i],
+        [TASK_TYPE_GENERAL, false, 'Create General Task', /create/i],
+        [TASK_TYPE_APPROVAL, true, 'Modify Approval Task', /update/i],
+        [TASK_TYPE_GENERAL, true, 'Modify General Task', /update/i],
+    ])(
+        'renders the correct title and submit label for taskType=%s editMode=%s',
+        (taskType, isEdit, expectedTitle, submitLabelPattern) => {
+            renderModal({
+                editingTask: isEdit ? buildEditingTask({ task_type: taskType }) : null,
+                taskType,
+            });
+            expect(screen.getByRole('heading', { name: expectedTitle })).toBeVisible();
+            expect(screen.getByRole('button', { name: submitLabelPattern })).toBeVisible();
+        },
+    );
 
     test('calls onClose when the close button is clicked', async () => {
         const user = userEvent();
-        const onClose = jest.fn();
-        renderModal({ onClose });
+        const { onClose } = renderModal();
         await user.click(screen.getByRole('button', { name: 'Close' }));
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
     test('calls onClose when Escape is pressed', async () => {
         const user = userEvent();
-        const onClose = jest.fn();
-        renderModal({ onClose });
+        const { onClose } = renderModal();
         await user.keyboard('{Escape}');
         expect(onClose).toHaveBeenCalledTimes(1);
     });
+
+    test('calls onClose when Cancel is clicked', async () => {
+        const user = userEvent();
+        const { onClose } = renderModal();
+        await user.click(screen.getByRole('button', { name: /cancel/i }));
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    test('seeds the form with editingTask values when in edit mode', () => {
+        renderModal({
+            editingAssignees: [buildUserAssignee('1', 'Alice')],
+            editingTask: buildEditingTask({ description: 'Prefilled' }),
+        });
+        expect(screen.getByRole('textbox', { name: /message/i })).toHaveValue('Prefilled');
+        expect(screen.getByTestId('user-selector-chip')).toHaveTextContent('Alice');
+    });
+
+    test('calls createTask with form values on submit in create mode', async () => {
+        const user = userEvent();
+        const { createTask } = renderModal();
+        lastUserSelectorProps.onSelectedUsersChange?.([
+            { email: 'alice@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+        ]);
+        await user.type(screen.getByRole('textbox', { name: /message/i }), 'Please review');
+        await user.click(screen.getByRole('button', { name: /create/i }));
+
+        expect(createTask).toHaveBeenCalledTimes(1);
+        const [message, approvers, taskType, dueAt, completionRule] = createTask.mock.calls[0];
+        expect(message).toBe('Please review');
+        expect(approvers).toHaveLength(1);
+        expect(approvers[0]).toMatchObject({ id: '1', name: 'Alice' });
+        expect(taskType).toBe(TASK_TYPE_APPROVAL);
+        expect(dueAt).toBeNull();
+        expect(completionRule).toBe(TASK_COMPLETION_RULE_ALL);
+    });
+
+    test('calls editTask with diffed added/removed assignees on submit in edit mode', async () => {
+        const user = userEvent();
+        const alice = buildUserAssignee('1', 'Alice');
+        const bob = buildUserAssignee('2', 'Bob');
+        const { editTask } = renderModal({
+            editingAssignees: [alice, bob],
+            editingTask: buildEditingTask({ description: 'Edit me' }),
+        });
+        lastUserSelectorProps.onSelectedUsersChange?.([
+            { email: 'alice@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+            { email: 'charlie@example.com', id: 3, name: 'Charlie', type: 'user', value: '3' },
+        ]);
+        await user.click(screen.getByRole('button', { name: /update/i }));
+
+        expect(editTask).toHaveBeenCalledTimes(1);
+        const payload = editTask.mock.calls[0][0];
+        expect(payload.id).toBe('task-1');
+        expect(payload.description).toBe('Edit me');
+        expect(payload.addedAssignees).toHaveLength(1);
+        expect(payload.addedAssignees[0]).toMatchObject({ id: '3', name: 'Charlie' });
+        expect(payload.removedAssignees).toHaveLength(1);
+        expect(payload.removedAssignees[0].target).toMatchObject({ id: '2', name: 'Bob' });
+    });
+
+    test('calls onSubmitSuccess and stops loading when createTask succeeds', async () => {
+        const user = userEvent();
+        const createTask = jest.fn((_text, _approvers, _type, _due, _rule, onSuccess) => onSuccess());
+        const { onSubmitSuccess } = renderModal({ createTask });
+        lastUserSelectorProps.onSelectedUsersChange?.([
+            { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+        ]);
+        await user.type(screen.getByRole('textbox', { name: /message/i }), 'msg');
+        await user.click(screen.getByRole('button', { name: /create/i }));
+
+        expect(onSubmitSuccess).toHaveBeenCalledTimes(1);
+    });
+
+    test('calls onSubmitError when createTask fails', async () => {
+        const user = userEvent();
+        const apiError: ElementsXhrError = { status: 500 } as ElementsXhrError;
+        const createTask = jest.fn((_text, _approvers, _type, _due, _rule, _ok, onError) => onError(apiError));
+        const { onSubmitError } = renderModal({ createTask });
+        lastUserSelectorProps.onSelectedUsersChange?.([
+            { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+        ]);
+        await user.type(screen.getByRole('textbox', { name: /message/i }), 'msg');
+        await user.click(screen.getByRole('button', { name: /create/i }));
+
+        expect(onSubmitError).toHaveBeenCalledWith(apiError);
+    });
+
+    test('renders a generic error notice when error has a non-forbidden status', () => {
+        renderModal({ error: { status: 500 } as ElementsXhrError });
+        expect(screen.getByText(/An error occurred while creating this task/i)).toBeVisible();
+    });
+
+    test('renders a forbidden-edit warning notice for 403 on edit (approval task)', () => {
+        renderModal({
+            editingTask: buildEditingTask({ task_type: TASK_TYPE_APPROVAL }),
+            error: { status: 403 } as ElementsXhrError,
+            taskType: TASK_TYPE_APPROVAL,
+        });
+        expect(screen.getByText(/Unable to remove assignee\(s\) because the task is now approved\./i)).toBeVisible();
+    });
+
+    test('renders a forbidden-edit warning notice for 403 on edit (general task)', () => {
+        renderModal({
+            editingTask: buildEditingTask({ task_type: TASK_TYPE_GENERAL }),
+            error: { status: 403 } as ElementsXhrError,
+            taskType: TASK_TYPE_GENERAL,
+        });
+        expect(screen.getByText(/Unable to remove assignee\(s\) because the task is now completed\./i)).toBeVisible();
+    });
+
+    test('renders a warning notice for group-exceeds-limit errors', () => {
+        renderModal({ error: { code: ERROR_CODE_GROUP_EXCEEDS_LIMIT } as ElementsXhrError });
+        expect(screen.getByText(/Exceeded max assignees per group/i)).toBeVisible();
+        expect(screen.getByText(/cannot exceed the limit of 250 assignees per group/i)).toBeVisible();
+    });
+
+    test('forwards group selections to createTask', async () => {
+        const user = userEvent();
+        const { createTask } = renderModal();
+        lastUserSelectorProps.onSelectedUsersChange?.([
+            { email: '', id: 99, name: 'Engineering', type: 'group', value: '99' },
+        ]);
+        await user.type(screen.getByRole('textbox', { name: /message/i }), 'Group task');
+        await user.click(screen.getByRole('button', { name: /create/i }));
+
+        const approvers = createTask.mock.calls[0][1];
+        expect(approvers[0].item).toMatchObject({ id: '99', name: 'Engineering', type: 'group' });
+    });
+
+    test('disables the cancel button while submitting', async () => {
+        const user = userEvent();
+        const createTask = jest.fn();
+        renderModal({ createTask });
+        lastUserSelectorProps.onSelectedUsersChange?.([
+            { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+        ]);
+        await user.type(screen.getByRole('textbox', { name: /message/i }), 'msg');
+        await user.click(screen.getByRole('button', { name: /create/i }));
+
+        expect(screen.getByRole('button', { name: /cancel/i })).toBeDisabled();
+    });
+
+    test('tags the modal content with data-resin-component=taskmodalv2', () => {
+        renderModal();
+        expect(screen.getByTestId('task-modal-v2')).toHaveAttribute('data-resin-component', 'taskmodalv2');
+    });
+
+    test('tags the Cancel and Create buttons with data-resin-target and data-target-id', () => {
+        renderModal();
+        const cancel = screen.getByRole('button', { name: /cancel/i });
+        const submit = screen.getByRole('button', { name: /create/i });
+        expect(cancel).toHaveAttribute('data-resin-target', 'activityfeed-approvalformcancel');
+        expect(cancel).toHaveAttribute('data-target-id', 'TaskModalV2-cancelButton');
+        expect(submit).toHaveAttribute('data-resin-target', 'activityfeed-approvalformpost');
+        expect(submit).toHaveAttribute('data-target-id', 'TaskModalV2-submitButton');
+    });
+
+    test('routes a synchronous throw from createTask through onSubmitError', async () => {
+        const user = userEvent();
+        const thrown = { status: 500 } as ElementsXhrError;
+        const createTask = jest.fn(() => {
+            throw thrown;
+        });
+        const { onSubmitError } = renderModal({ createTask });
+        lastUserSelectorProps.onSelectedUsersChange?.([
+            { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+        ]);
+        await user.type(screen.getByRole('textbox', { name: /message/i }), 'msg');
+        await user.click(screen.getByRole('button', { name: /create/i }));
+
+        expect(onSubmitError).toHaveBeenCalledWith(thrown);
+        expect(screen.getByRole('button', { name: /cancel/i })).toBeEnabled();
+    });
+
+    test('falls back to a null due date when editingTask.due_at is unparseable', () => {
+        renderModal({
+            editingTask: buildEditingTask({ due_at: 'not-a-real-date' }),
+        });
+        expect(screen.getByTestId('date-picker-value')).toHaveTextContent('empty');
+    });
+
+    test('renders a forbidden-edit warning for an Axios-shaped error with response.status=403', () => {
+        const axiosLikeError = { response: { status: 403 } } as unknown as ElementsXhrError;
+        renderModal({
+            editingTask: buildEditingTask({ task_type: TASK_TYPE_GENERAL }),
+            error: axiosLikeError,
+            taskType: TASK_TYPE_GENERAL,
+        });
+        expect(screen.getByText(/Unable to remove assignee\(s\) because the task is now completed\./i)).toBeVisible();
+    });
+
+    test('renders a group-exceeds notice for an Axios-shaped error with response.data.code', () => {
+        const axiosLikeError = {
+            response: { data: { code: ERROR_CODE_GROUP_EXCEEDS_LIMIT } },
+        } as unknown as ElementsXhrError;
+        renderModal({ error: axiosLikeError });
+        expect(screen.getByText(/Exceeded max assignees per group/i)).toBeVisible();
+    });
 });
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/messages.ts b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/messages.ts
index 58018e0edf..9935ff856a 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/messages.ts
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/messages.ts
@@ -16,6 +16,11 @@ const messages = defineMessages({
         defaultMessage: 'Select Assignees',
         description: 'Label for the assignee combobox in the task modal',
     },
+    cancelButtonLabel: {
+        id: 'be.taskModalV2.cancelButtonLabel',
+        defaultMessage: 'Cancel',
+        description: 'Label for the Cancel button in the task modal footer',
+    },
     closeLabel: {
         id: 'be.taskModalV2.close',
         defaultMessage: 'Close',
@@ -31,11 +36,26 @@ const messages = defineMessages({
         defaultMessage: 'Create Approval Task',
         description: 'Title of the modal for creating an approval task',
     },
+    createButtonLabel: {
+        id: 'be.taskModalV2.createButtonLabel',
+        defaultMessage: 'Create',
+        description: 'Label for the Create button in the task modal footer (create mode)',
+    },
     createGeneralTaskTitle: {
         id: 'be.taskModalV2.createGeneralTask',
         defaultMessage: 'Create General Task',
         description: 'Title of the modal for creating a general task',
     },
+    createTaskErrorMessage: {
+        id: 'be.taskModalV2.createTaskErrorMessage',
+        defaultMessage: 'An error occurred while creating this task. Please try again.',
+        description: 'Body text of the error notice when creating a task fails',
+    },
+    createTaskErrorTitle: {
+        id: 'be.taskModalV2.createTaskErrorTitle',
+        defaultMessage: 'Error',
+        description: 'Title of the error notice when creating or updating a task fails',
+    },
     datePickerCalendarAriaLabel: {
         id: 'be.taskModalV2.datePickerCalendarAriaLabel',
         defaultMessage: 'Due date calendar',
@@ -63,19 +83,60 @@ const messages = defineMessages({
     },
     dueDateLabel: {
         id: 'be.taskModalV2.dueDateLabel',
-        defaultMessage: 'Due Date',
-        description: 'Label for the due-date field in the task modal',
+        defaultMessage: 'Due Date (optional)',
+        description: 'Label for the due-date field in the task modal; due date is optional',
     },
     editApprovalTaskTitle: {
         id: 'be.taskModalV2.editApprovalTask',
         defaultMessage: 'Modify Approval Task',
         description: 'Title of the modal for editing an existing approval task',
     },
+    editApprovalTaskForbiddenMessage: {
+        id: 'be.taskModalV2.editApprovalTaskForbiddenMessage',
+        defaultMessage: 'Unable to remove assignee(s) because the task is now approved.',
+        description: 'Warning shown when removing assignees from an approved task fails with 403',
+    },
+    editForbiddenTitle: {
+        id: 'be.taskModalV2.editForbiddenTitle',
+        defaultMessage: 'Task Updated with Errors',
+        description: 'Title of the warning notice when an edit partially fails (403 on update)',
+    },
+    editGeneralTaskForbiddenMessage: {
+        id: 'be.taskModalV2.editGeneralTaskForbiddenMessage',
+        defaultMessage: 'Unable to remove assignee(s) because the task is now completed.',
+        description: 'Warning shown when removing assignees from a completed task fails with 403',
+    },
     editGeneralTaskTitle: {
         id: 'be.taskModalV2.editGeneralTask',
         defaultMessage: 'Modify General Task',
         description: 'Title of the modal for editing an existing general task',
     },
+    groupExceedsLimitWarningMessage: {
+        id: 'be.taskModalV2.groupExceedsLimitWarningMessage',
+        defaultMessage:
+            'One or more groups can not receive this task as a group size cannot exceed the limit of {max} assignees per group.',
+        description: 'Body of the warning notice when a group assignee exceeds the per-group maximum',
+    },
+    groupExceedsLimitWarningTitle: {
+        id: 'be.taskModalV2.groupExceedsLimitWarningTitle',
+        defaultMessage: 'Exceeded max assignees per group',
+        description: 'Title of the warning notice when a group assignee exceeds the per-group maximum',
+    },
+    inlineNoticeErrorAriaLabel: {
+        id: 'be.taskModalV2.inlineNoticeErrorAriaLabel',
+        defaultMessage: 'Error',
+        description: 'aria-label for the error variant icon in the task modal inline notice',
+    },
+    inlineNoticeWarningAriaLabel: {
+        id: 'be.taskModalV2.inlineNoticeWarningAriaLabel',
+        defaultMessage: 'Warning',
+        description: 'aria-label for the warning variant icon in the task modal inline notice',
+    },
+    loadingAriaLabel: {
+        id: 'be.taskModalV2.loadingAriaLabel',
+        defaultMessage: 'Loading',
+        description: 'aria-label for the loading indicator on the submit button while a task is saving',
+    },
     messageFieldRequiredError: {
         id: 'be.taskModalV2.messageFieldRequiredError',
         defaultMessage: 'Required Field',
@@ -91,6 +152,16 @@ const messages = defineMessages({
         defaultMessage: 'Write a message',
         description: 'Placeholder text for the message field in the task modal',
     },
+    updateButtonLabel: {
+        id: 'be.taskModalV2.updateButtonLabel',
+        defaultMessage: 'Update',
+        description: 'Label for the Update button in the task modal footer (edit mode)',
+    },
+    updateTaskErrorMessage: {
+        id: 'be.taskModalV2.updateTaskErrorMessage',
+        defaultMessage: 'An error occurred while modifying this task. Please try again.',
+        description: 'Body text of the error notice when updating an existing task fails',
+    },
 });
 
 export default messages;

From ad2e1fe1b87f2aaf3cf74c6277d348cfe3e2ddb5 Mon Sep 17 00:00:00 2001
From: Jackie Jou <jackiejou@users.noreply.github.com>
Date: Tue, 30 Jun 2026 14:57:39 -0700
Subject: [PATCH 2/2] refactor(activity-feed-v2): extract TaskErrorNotice,
 share v2 types

- Move error notice into its own component plus tests
- Add types.ts; rename RuntimeAssignee to TaskAssignee
- Key TaskFormV2 on editing task id to reset state on switch
- Wrap onSelectedUsersChange in act() in TaskModalV2 tests
- Rename createTaskErrorTitle to taskErrorTitle for clarity
---
 i18n/en-US.properties                         |   4 +-
 .../task-modal-v2/TaskErrorNotice.tsx         |  86 ++++++++++
 .../task-modal-v2/TaskFormV2.tsx              |  12 +-
 .../task-modal-v2/TaskModalV2.scss            |   2 +-
 .../task-modal-v2/TaskModalV2.tsx             | 154 +++--------------
 .../__tests__/TaskErrorNotice.test.tsx        |  70 ++++++++
 .../__tests__/TaskFormV2.test.tsx             |  11 +-
 .../__tests__/TaskModalV2.test.tsx            | 160 +++++++-----------
 .../task-modal-v2/messages.ts                 |   4 +-
 .../activity-feed-v2/task-modal-v2/types.ts   |  36 ++++
 .../utils/__tests__/contactMapping.test.ts    |  10 +-
 .../task-modal-v2/utils/contactMapping.ts     |  10 +-
 12 files changed, 297 insertions(+), 262 deletions(-)
 create mode 100644 src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskErrorNotice.tsx
 create mode 100644 src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskErrorNotice.test.tsx
 create mode 100644 src/elements/content-sidebar/activity-feed-v2/task-modal-v2/types.ts

diff --git a/i18n/en-US.properties b/i18n/en-US.properties
index dd1c21194f..4bd1bca90e 100644
--- a/i18n/en-US.properties
+++ b/i18n/en-US.properties
@@ -906,8 +906,6 @@ be.taskModalV2.createButtonLabel = Create
 be.taskModalV2.createGeneralTask = Create General Task
 # Body text of the error notice when creating a task fails
 be.taskModalV2.createTaskErrorMessage = An error occurred while creating this task. Please try again.
-# Title of the error notice when creating or updating a task fails
-be.taskModalV2.createTaskErrorTitle = Error
 # aria-label for the calendar inside the due-date date picker
 be.taskModalV2.datePickerCalendarAriaLabel = Due date calendar
 # aria-label for the clear button on the due-date date picker
@@ -946,6 +944,8 @@ be.taskModalV2.messageFieldRequiredError = Required Field
 be.taskModalV2.messageLabel = Message
 # Placeholder text for the message field in the task modal
 be.taskModalV2.messagePlaceholder = Write a message
+# Title of the error notice when creating or updating a task fails
+be.taskModalV2.taskErrorTitle = Error
 # Label for the Update button in the task modal footer (edit mode)
 be.taskModalV2.updateButtonLabel = Update
 # Body text of the error notice when updating an existing task fails
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskErrorNotice.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskErrorNotice.tsx
new file mode 100644
index 0000000000..f6c6646543
--- /dev/null
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskErrorNotice.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+
+import { InlineNotice } from '@box/blueprint-web';
+
+import { ERROR_CODE_GROUP_EXCEEDS_LIMIT, TASK_MAX_GROUP_ASSIGNEES, TASK_TYPE_GENERAL } from '../../../../constants';
+
+import type { ElementsXhrError } from '../../../../common/types/api';
+import type { TaskType } from '../../../../common/types/tasks';
+
+import messages from './messages';
+
+export type TaskErrorNoticeProps = {
+    error: ElementsXhrError | undefined;
+    isEditMode: boolean;
+    taskType: TaskType;
+};
+
+const getErrorStatus = (error: ElementsXhrError): number | undefined => {
+    if ('status' in error && typeof error.status === 'number') {
+        return error.status;
+    }
+    const { response } = error as { response?: { status?: number } };
+    return response?.status;
+};
+
+const getErrorCode = (error: ElementsXhrError): string | undefined => {
+    if ('code' in error && typeof error.code === 'string') {
+        return error.code;
+    }
+    const { response } = error as { response?: { data?: { code?: string } } };
+    return response?.data?.code;
+};
+
+const TaskErrorNotice = ({ error, isEditMode, taskType }: TaskErrorNoticeProps) => {
+    const { formatMessage } = useIntl();
+
+    if (!error) {
+        return null;
+    }
+
+    const status = getErrorStatus(error);
+    const code = getErrorCode(error);
+    const isForbiddenEdit = isEditMode && status === 403;
+    const isGroupLimit = code === ERROR_CODE_GROUP_EXCEEDS_LIMIT;
+
+    if (isForbiddenEdit) {
+        const forbiddenMessage =
+            taskType === TASK_TYPE_GENERAL
+                ? messages.editGeneralTaskForbiddenMessage
+                : messages.editApprovalTaskForbiddenMessage;
+        return (
+            <InlineNotice
+                title={formatMessage(messages.editForbiddenTitle)}
+                variant="warning"
+                variantIconAriaLabel={formatMessage(messages.inlineNoticeWarningAriaLabel)}
+            >
+                {formatMessage(forbiddenMessage)}
+            </InlineNotice>
+        );
+    }
+
+    if (isGroupLimit) {
+        return (
+            <InlineNotice
+                title={formatMessage(messages.groupExceedsLimitWarningTitle)}
+                variant="warning"
+                variantIconAriaLabel={formatMessage(messages.inlineNoticeWarningAriaLabel)}
+            >
+                {formatMessage(messages.groupExceedsLimitWarningMessage, { max: TASK_MAX_GROUP_ASSIGNEES })}
+            </InlineNotice>
+        );
+    }
+
+    return (
+        <InlineNotice
+            title={formatMessage(messages.taskErrorTitle)}
+            variant="error"
+            variantIconAriaLabel={formatMessage(messages.inlineNoticeErrorAriaLabel)}
+        >
+            {formatMessage(isEditMode ? messages.updateTaskErrorMessage : messages.createTaskErrorMessage)}
+        </InlineNotice>
+    );
+};
+
+export default TaskErrorNotice;
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskFormV2.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskFormV2.tsx
index 40e201a162..b373b913e1 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskFormV2.tsx
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskFormV2.tsx
@@ -11,7 +11,8 @@ import { TASK_COMPLETION_RULE_ALL, TASK_COMPLETION_RULE_ANY, TASK_EDIT_MODE_EDIT
 
 import type { TaskCompletionRule, TaskEditMode, TaskType } from '../../../../common/types/tasks';
 
-import { mapAssigneeToUserContact, mapUserContactToAssignee, type RuntimeAssignee } from './utils/contactMapping';
+import { mapAssigneeToUserContact, mapUserContactToAssignee } from './utils/contactMapping';
+import type { TaskAssignee, TaskFormV2SubmitPayload } from './types';
 
 import messages from './messages';
 
@@ -19,18 +20,11 @@ import './TaskFormV2.scss';
 
 export const TASK_FORM_V2_ID = 'task-form-v2';
 
-export type TaskFormV2SubmitPayload = {
-    assignees: RuntimeAssignee[];
-    completionRule: TaskCompletionRule;
-    dueDate: Date | null;
-    message: string;
-};
-
 export type TaskFormV2Props = {
     editMode?: TaskEditMode;
     fetchAvatarUrls: (contacts: UserContactType[]) => Promise<FetchedAvatarUrls>;
     fetchUsers: (query: string) => Promise<UserContactType[]>;
-    initialAssignees?: RuntimeAssignee[];
+    initialAssignees?: TaskAssignee[];
     initialCompletionRule?: TaskCompletionRule;
     initialDueDate?: Date | null;
     initialMessage?: string;
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.scss b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.scss
index 8ed866d221..80862c92bf 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.scss
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.scss
@@ -1,4 +1,4 @@
-// Doubled class beats Blueprint Modal.Content size="medium" max-width.
+// Override Blueprint Modal.Content max-width; doubled selector raises specificity.
 .bcs-NewTaskModal.bcs-NewTaskModal {
     max-width: 480px;
 }
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.tsx
index 89a7f6b070..cc080017b7 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.tsx
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2.tsx
@@ -2,56 +2,27 @@ import * as React from 'react';
 import { useIntl } from 'react-intl';
 import type { MessageDescriptor } from 'react-intl';
 
-import { InlineNotice, Modal } from '@box/blueprint-web';
+import { Modal } from '@box/blueprint-web';
 import type { FetchedAvatarUrls, UserContactType } from '@box/user-selector';
 
-import {
-    ERROR_CODE_GROUP_EXCEEDS_LIMIT,
-    TASK_COMPLETION_RULE_ALL,
-    TASK_EDIT_MODE_EDIT,
-    TASK_MAX_GROUP_ASSIGNEES,
-    TASK_TYPE_GENERAL,
-} from '../../../../constants';
+import { TASK_COMPLETION_RULE_ALL, TASK_EDIT_MODE_EDIT, TASK_TYPE_GENERAL } from '../../../../constants';
 
 import type { ElementsXhrError } from '../../../../common/types/api';
-import type {
-    TaskCollabAssignee,
-    TaskCompletionRule,
-    TaskEditMode,
-    TaskNew,
-    TaskType,
-    TaskUpdatePayload,
-} from '../../../../common/types/tasks';
+import type { TaskCollabAssignee, TaskEditMode, TaskNew, TaskType } from '../../../../common/types/tasks';
 import type { GroupMini, SelectorItem, UserMini } from '../../../../common/types/core';
 
 import { ACTIVITY_TARGETS, INTERACTION_TARGET } from '../../../common/interactionTargets';
 
+import TaskErrorNotice from './TaskErrorNotice';
 import TaskFormV2, { TASK_FORM_V2_ID } from './TaskFormV2';
-import type { TaskFormV2SubmitPayload } from './TaskFormV2';
-import { type RuntimeAssignee } from './utils/contactMapping';
+import type { CreateTaskCallback, EditTaskCallback, TaskAssignee, TaskFormV2SubmitPayload } from './types';
 
 import messages from './messages';
 
 import './TaskModalV2.scss';
 
-type CreateTaskCallback = (
-    text: string,
-    approvers: SelectorItem<UserMini | GroupMini>[],
-    taskType: TaskType,
-    dueDate: string | null,
-    completionRule: TaskCompletionRule,
-    onSuccess: () => void,
-    onError: (error: ElementsXhrError) => void,
-) => void;
-
-type EditTaskCallback = (
-    payload: TaskUpdatePayload,
-    onSuccess: () => void,
-    onError: (error: ElementsXhrError) => void,
-) => void;
-
 type EditModeProps = {
-    editingAssignees: RuntimeAssignee[];
+    editingAssignees: TaskAssignee[];
     editingTask: TaskNew;
     editTask: EditTaskCallback;
     mode: 'edit';
@@ -86,29 +57,7 @@ const getTitleMessage = (taskType: TaskType, editMode: TaskEditMode): MessageDes
     return isEdit ? messages.editApprovalTaskTitle : messages.createApprovalTaskTitle;
 };
 
-const getErrorStatus = (error: ElementsXhrError | undefined): number | undefined => {
-    if (!error) {
-        return undefined;
-    }
-    if ('status' in error && typeof error.status === 'number') {
-        return error.status;
-    }
-    const { response } = error as { response?: { status?: number } };
-    return response?.status;
-};
-
-const getErrorCode = (error: ElementsXhrError | undefined): string | undefined => {
-    if (!error) {
-        return undefined;
-    }
-    if ('code' in error && typeof error.code === 'string') {
-        return error.code;
-    }
-    const { response } = error as { response?: { data?: { code?: string } } };
-    return response?.data?.code;
-};
-
-const assigneeToSelectorItem = (assignee: RuntimeAssignee): SelectorItem<UserMini | GroupMini> => ({
+const assigneeToSelectorItem = (assignee: TaskAssignee): SelectorItem<UserMini | GroupMini> => ({
     id: assignee.target.id,
     item: assignee.target,
     name: assignee.target.name,
@@ -116,9 +65,9 @@ const assigneeToSelectorItem = (assignee: RuntimeAssignee): SelectorItem<UserMin
 });
 
 const diffAssignees = (
-    next: RuntimeAssignee[],
-    previous: RuntimeAssignee[],
-): { added: RuntimeAssignee[]; removed: RuntimeAssignee[] } => {
+    next: TaskAssignee[],
+    previous: TaskAssignee[],
+): { added: TaskAssignee[]; removed: TaskAssignee[] } => {
     const previousIds = new Set(previous.map(a => a.target.id));
     const nextIds = new Set(next.map(a => a.target.id));
     return {
@@ -135,23 +84,23 @@ const parseInitialDueDate = (raw: string | null | undefined): Date | null => {
     return Number.isFinite(parsed.getTime()) ? parsed : null;
 };
 
-const TaskModalV2 = (props: TaskModalV2Props) => {
-    const {
-        createTask,
-        error,
-        fetchAvatarUrls,
-        fetchUsers,
-        isOpen,
-        onClose,
-        onSubmitError,
-        onSubmitSuccess,
-        taskType,
-    } = props;
-    const isEditMode = props.mode === 'edit';
+const TaskModalV2 = ({
+    createTask,
+    error,
+    fetchAvatarUrls,
+    fetchUsers,
+    isOpen,
+    onClose,
+    onSubmitError,
+    onSubmitSuccess,
+    taskType,
+    ...editProps
+}: TaskModalV2Props) => {
+    const isEditMode = editProps.mode === 'edit';
     const editMode: TaskEditMode = isEditMode ? 'EDIT' : 'CREATE';
-    const editingTask = isEditMode ? props.editingTask : undefined;
-    const editingAssignees = isEditMode ? props.editingAssignees : undefined;
-    const editTask = isEditMode ? props.editTask : undefined;
+    const editingTask = isEditMode ? editProps.editingTask : undefined;
+    const editingAssignees = isEditMode ? editProps.editingAssignees : undefined;
+    const editTask = isEditMode ? editProps.editTask : undefined;
 
     const { formatMessage } = useIntl();
     const titleMessage = getTitleMessage(taskType, editMode);
@@ -218,54 +167,6 @@ const TaskModalV2 = (props: TaskModalV2Props) => {
         }
     };
 
-    const errorNotice = React.useMemo(() => {
-        if (!error) {
-            return null;
-        }
-        const status = getErrorStatus(error);
-        const code = getErrorCode(error);
-        const isForbiddenEdit = isEditMode && status === 403;
-        const isGroupLimit = code === ERROR_CODE_GROUP_EXCEEDS_LIMIT;
-
-        if (isForbiddenEdit) {
-            const forbiddenMessage =
-                taskType === TASK_TYPE_GENERAL
-                    ? messages.editGeneralTaskForbiddenMessage
-                    : messages.editApprovalTaskForbiddenMessage;
-            return (
-                <InlineNotice
-                    title={formatMessage(messages.editForbiddenTitle)}
-                    variant="warning"
-                    variantIconAriaLabel={formatMessage(messages.inlineNoticeWarningAriaLabel)}
-                >
-                    {formatMessage(forbiddenMessage)}
-                </InlineNotice>
-            );
-        }
-
-        if (isGroupLimit) {
-            return (
-                <InlineNotice
-                    title={formatMessage(messages.groupExceedsLimitWarningTitle)}
-                    variant="warning"
-                    variantIconAriaLabel={formatMessage(messages.inlineNoticeWarningAriaLabel)}
-                >
-                    {formatMessage(messages.groupExceedsLimitWarningMessage, { max: TASK_MAX_GROUP_ASSIGNEES })}
-                </InlineNotice>
-            );
-        }
-
-        return (
-            <InlineNotice
-                title={formatMessage(messages.createTaskErrorTitle)}
-                variant="error"
-                variantIconAriaLabel={formatMessage(messages.inlineNoticeErrorAriaLabel)}
-            >
-                {formatMessage(isEditMode ? messages.updateTaskErrorMessage : messages.createTaskErrorMessage)}
-            </InlineNotice>
-        );
-    }, [error, formatMessage, isEditMode, taskType]);
-
     const submitLabel = formatMessage(isEditMode ? messages.updateButtonLabel : messages.createButtonLabel);
 
     return (
@@ -278,8 +179,9 @@ const TaskModalV2 = (props: TaskModalV2Props) => {
             >
                 <Modal.Header>{formatMessage(titleMessage)}</Modal.Header>
                 <Modal.Body className="bcs-NewTaskModal-body">
-                    {errorNotice}
+                    <TaskErrorNotice error={error} isEditMode={isEditMode} taskType={taskType} />
                     <TaskFormV2
+                        key={isEditMode ? `edit-${editingTask.id}` : 'create'}
                         editMode={editMode}
                         fetchAvatarUrls={fetchAvatarUrls}
                         fetchUsers={fetchUsers}
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskErrorNotice.test.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskErrorNotice.test.tsx
new file mode 100644
index 0000000000..f509d266d9
--- /dev/null
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskErrorNotice.test.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import { render, screen } from '../../../../../test-utils/testing-library';
+import { ERROR_CODE_GROUP_EXCEEDS_LIMIT, TASK_TYPE_APPROVAL, TASK_TYPE_GENERAL } from '../../../../../constants';
+import type { ElementsXhrError } from '../../../../../common/types/api';
+import TaskErrorNotice from '../TaskErrorNotice';
+
+describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskErrorNotice', () => {
+    test('renders nothing when error is undefined', () => {
+        render(<TaskErrorNotice error={undefined} isEditMode={false} taskType={TASK_TYPE_APPROVAL} />);
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    });
+
+    test('renders a generic create error notice for non-forbidden errors in create mode', () => {
+        render(
+            <TaskErrorNotice
+                error={{ status: 500 } as ElementsXhrError}
+                isEditMode={false}
+                taskType={TASK_TYPE_APPROVAL}
+            />,
+        );
+        expect(screen.getByText(/An error occurred while creating this task/i)).toBeVisible();
+    });
+
+    test('renders a generic update error notice for non-forbidden errors in edit mode', () => {
+        render(
+            <TaskErrorNotice error={{ status: 500 } as ElementsXhrError} isEditMode taskType={TASK_TYPE_APPROVAL} />,
+        );
+        expect(screen.getByText(/An error occurred while modifying this task/i)).toBeVisible();
+    });
+
+    test('renders the approval-task forbidden warning for 403 on edit', () => {
+        render(
+            <TaskErrorNotice error={{ status: 403 } as ElementsXhrError} isEditMode taskType={TASK_TYPE_APPROVAL} />,
+        );
+        expect(screen.getByText(/Unable to remove assignee\(s\) because the task is now approved\./i)).toBeVisible();
+    });
+
+    test('renders the general-task forbidden warning for 403 on edit', () => {
+        render(<TaskErrorNotice error={{ status: 403 } as ElementsXhrError} isEditMode taskType={TASK_TYPE_GENERAL} />);
+        expect(screen.getByText(/Unable to remove assignee\(s\) because the task is now completed\./i)).toBeVisible();
+    });
+
+    test('renders the group-exceeds warning with the max-assignees interpolation', () => {
+        render(
+            <TaskErrorNotice
+                error={{ code: ERROR_CODE_GROUP_EXCEEDS_LIMIT } as ElementsXhrError}
+                isEditMode={false}
+                taskType={TASK_TYPE_APPROVAL}
+            />,
+        );
+        expect(screen.getByText(/Exceeded max assignees per group/i)).toBeVisible();
+        expect(screen.getByText(/cannot exceed the limit of 250 assignees per group/i)).toBeVisible();
+    });
+
+    test('reads status from Axios-shaped error.response.status', () => {
+        const axiosForbiddenError = { response: { status: 403 } } as unknown as ElementsXhrError;
+        render(<TaskErrorNotice error={axiosForbiddenError} isEditMode taskType={TASK_TYPE_GENERAL} />);
+        expect(screen.getByText(/Unable to remove assignee\(s\) because the task is now completed\./i)).toBeVisible();
+    });
+
+    test('reads code from Axios-shaped error.response.data.code', () => {
+        const axiosGroupExceedsError = {
+            response: { data: { code: ERROR_CODE_GROUP_EXCEEDS_LIMIT } },
+        } as unknown as ElementsXhrError;
+        render(<TaskErrorNotice error={axiosGroupExceedsError} isEditMode={false} taskType={TASK_TYPE_APPROVAL} />);
+        expect(screen.getByText(/Exceeded max assignees per group/i)).toBeVisible();
+    });
+});
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskFormV2.test.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskFormV2.test.tsx
index 3114175eba..935980fd14 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskFormV2.test.tsx
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskFormV2.test.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { act } from 'react';
 import type { UserContactType } from '@box/user-selector';
 
-import { render, screen, userEvent } from '../../../../../test-utils/testing-library';
+import { act, render, screen, userEvent } from '../../../../../test-utils/testing-library';
 import {
     TASK_COMPLETION_RULE_ALL,
     TASK_COMPLETION_RULE_ANY,
@@ -12,8 +11,8 @@ import {
     TASK_TYPE_GENERAL,
 } from '../../../../../constants';
 import TaskFormV2, { TASK_FORM_V2_ID } from '../TaskFormV2';
-import type { TaskFormV2Props, TaskFormV2SubmitPayload } from '../TaskFormV2';
-import type { RuntimeAssignee } from '../utils/contactMapping';
+import type { TaskFormV2Props } from '../TaskFormV2';
+import type { TaskAssignee, TaskFormV2SubmitPayload } from '../types';
 
 type UserSelectorMockProps = {
     disabled?: boolean;
@@ -67,7 +66,7 @@ jest.mock('@box/blueprint-web', () => {
     };
 });
 
-const buildUserAssignee = (id: string, name: string): RuntimeAssignee => ({
+const buildUserAssignee = (id: string, name: string): TaskAssignee => ({
     id: '',
     permissions: { can_delete: false, can_update: false },
     role: 'ASSIGNEE',
@@ -76,7 +75,7 @@ const buildUserAssignee = (id: string, name: string): RuntimeAssignee => ({
     type: 'task_collaborator',
 });
 
-const buildGroupAssignee = (id: string, name: string): RuntimeAssignee => ({
+const buildGroupAssignee = (id: string, name: string): TaskAssignee => ({
     id: '',
     permissions: { can_delete: false, can_update: false },
     role: 'ASSIGNEE',
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskModalV2.test.tsx b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskModalV2.test.tsx
index 292d805066..d8dc08d5c3 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskModalV2.test.tsx
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/__tests__/TaskModalV2.test.tsx
@@ -1,17 +1,12 @@
 import * as React from 'react';
 import type { UserContactType } from '@box/user-selector';
 
-import { render, screen, userEvent } from '../../../../../test-utils/testing-library';
-import {
-    ERROR_CODE_GROUP_EXCEEDS_LIMIT,
-    TASK_COMPLETION_RULE_ALL,
-    TASK_TYPE_APPROVAL,
-    TASK_TYPE_GENERAL,
-} from '../../../../../constants';
+import { act, render, screen, userEvent } from '../../../../../test-utils/testing-library';
+import { TASK_COMPLETION_RULE_ALL, TASK_TYPE_APPROVAL, TASK_TYPE_GENERAL } from '../../../../../constants';
 import type { ElementsXhrError } from '../../../../../common/types/api';
 import type { TaskNew } from '../../../../../common/types/tasks';
 import TaskModalV2 from '../TaskModalV2';
-import type { RuntimeAssignee } from '../utils/contactMapping';
+import type { TaskAssignee } from '../types';
 
 type UserSelectorMockProps = {
     disabled?: boolean;
@@ -59,7 +54,7 @@ jest.mock('@box/blueprint-web', () => {
     };
 });
 
-const buildUserAssignee = (id: string, name: string): RuntimeAssignee => ({
+const buildUserAssignee = (id: string, name: string): TaskAssignee => ({
     id: '',
     permissions: { can_delete: false, can_update: false },
     role: 'ASSIGNEE',
@@ -98,43 +93,32 @@ const buildEditingTask = (overrides: Partial<TaskNew> = {}): TaskNew => ({
 type RenderModalOptions = {
     createTask?: jest.Mock;
     editTask?: jest.Mock;
-    editingAssignees?: RuntimeAssignee[];
+    editingAssignees?: TaskAssignee[];
     editingTask?: TaskNew | null;
     error?: ElementsXhrError;
     isOpen?: boolean;
-    onClose?: jest.Mock;
-    onSubmitError?: jest.Mock;
-    onSubmitSuccess?: jest.Mock;
     taskType?: TaskNew['task_type'];
 };
 
+const buildDefaultSharedProps = () => ({
+    createTask: jest.fn(),
+    fetchAvatarUrls: jest.fn().mockResolvedValue({}),
+    fetchUsers: jest.fn().mockResolvedValue([]),
+    isOpen: true,
+    onClose: jest.fn(),
+    onSubmitError: jest.fn(),
+    onSubmitSuccess: jest.fn(),
+    taskType: TASK_TYPE_APPROVAL,
+});
+
 const renderModal = (options: RenderModalOptions = {}) => {
-    const createTask = options.createTask ?? jest.fn();
-    const editTask = options.editTask ?? jest.fn();
-    const fetchUsers = jest.fn().mockResolvedValue([]);
-    const fetchAvatarUrls = jest.fn().mockResolvedValue({});
-    const onClose = options.onClose ?? jest.fn();
-    const onSubmitError = options.onSubmitError ?? jest.fn();
-    const onSubmitSuccess = options.onSubmitSuccess ?? jest.fn();
-    const taskType = options.taskType ?? TASK_TYPE_APPROVAL;
-    const isOpen = options.isOpen ?? true;
-
-    const editingTask = options.editingTask ?? null;
-    const shared = {
-        createTask,
-        error: options.error,
-        fetchAvatarUrls,
-        fetchUsers,
-        isOpen,
-        onClose,
-        onSubmitError,
-        onSubmitSuccess,
-        taskType,
-    };
+    const { editTask: editTaskOverride, editingAssignees, editingTask, ...sharedOverrides } = options;
+    const shared = { ...buildDefaultSharedProps(), ...sharedOverrides };
+    const editTask = editTaskOverride ?? jest.fn();
     const modal = editingTask ? (
         <TaskModalV2
             {...shared}
-            editingAssignees={options.editingAssignees ?? []}
+            editingAssignees={editingAssignees ?? []}
             editingTask={editingTask}
             editTask={editTask}
             mode="edit"
@@ -144,7 +128,7 @@ const renderModal = (options: RenderModalOptions = {}) => {
     );
 
     const utils = render(modal);
-    return { ...utils, createTask, editTask, fetchAvatarUrls, fetchUsers, onClose, onSubmitError, onSubmitSuccess };
+    return { ...utils, ...shared, editTask };
 };
 
 beforeEach(() => {
@@ -215,9 +199,11 @@ describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2',
     test('calls createTask with form values on submit in create mode', async () => {
         const user = userEvent();
         const { createTask } = renderModal();
-        lastUserSelectorProps.onSelectedUsersChange?.([
-            { email: 'alice@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
-        ]);
+        act(() => {
+            lastUserSelectorProps.onSelectedUsersChange?.([
+                { email: 'alice@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+            ]);
+        });
         await user.type(screen.getByRole('textbox', { name: /message/i }), 'Please review');
         await user.click(screen.getByRole('button', { name: /create/i }));
 
@@ -239,10 +225,12 @@ describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2',
             editingAssignees: [alice, bob],
             editingTask: buildEditingTask({ description: 'Edit me' }),
         });
-        lastUserSelectorProps.onSelectedUsersChange?.([
-            { email: 'alice@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
-            { email: 'charlie@example.com', id: 3, name: 'Charlie', type: 'user', value: '3' },
-        ]);
+        act(() => {
+            lastUserSelectorProps.onSelectedUsersChange?.([
+                { email: 'alice@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+                { email: 'charlie@example.com', id: 3, name: 'Charlie', type: 'user', value: '3' },
+            ]);
+        });
         await user.click(screen.getByRole('button', { name: /update/i }));
 
         expect(editTask).toHaveBeenCalledTimes(1);
@@ -259,9 +247,11 @@ describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2',
         const user = userEvent();
         const createTask = jest.fn((_text, _approvers, _type, _due, _rule, onSuccess) => onSuccess());
         const { onSubmitSuccess } = renderModal({ createTask });
-        lastUserSelectorProps.onSelectedUsersChange?.([
-            { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
-        ]);
+        act(() => {
+            lastUserSelectorProps.onSelectedUsersChange?.([
+                { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+            ]);
+        });
         await user.type(screen.getByRole('textbox', { name: /message/i }), 'msg');
         await user.click(screen.getByRole('button', { name: /create/i }));
 
@@ -273,50 +263,30 @@ describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2',
         const apiError: ElementsXhrError = { status: 500 } as ElementsXhrError;
         const createTask = jest.fn((_text, _approvers, _type, _due, _rule, _ok, onError) => onError(apiError));
         const { onSubmitError } = renderModal({ createTask });
-        lastUserSelectorProps.onSelectedUsersChange?.([
-            { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
-        ]);
+        act(() => {
+            lastUserSelectorProps.onSelectedUsersChange?.([
+                { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+            ]);
+        });
         await user.type(screen.getByRole('textbox', { name: /message/i }), 'msg');
         await user.click(screen.getByRole('button', { name: /create/i }));
 
         expect(onSubmitError).toHaveBeenCalledWith(apiError);
     });
 
-    test('renders a generic error notice when error has a non-forbidden status', () => {
+    test('renders TaskErrorNotice in the body when error is set', () => {
         renderModal({ error: { status: 500 } as ElementsXhrError });
         expect(screen.getByText(/An error occurred while creating this task/i)).toBeVisible();
     });
 
-    test('renders a forbidden-edit warning notice for 403 on edit (approval task)', () => {
-        renderModal({
-            editingTask: buildEditingTask({ task_type: TASK_TYPE_APPROVAL }),
-            error: { status: 403 } as ElementsXhrError,
-            taskType: TASK_TYPE_APPROVAL,
-        });
-        expect(screen.getByText(/Unable to remove assignee\(s\) because the task is now approved\./i)).toBeVisible();
-    });
-
-    test('renders a forbidden-edit warning notice for 403 on edit (general task)', () => {
-        renderModal({
-            editingTask: buildEditingTask({ task_type: TASK_TYPE_GENERAL }),
-            error: { status: 403 } as ElementsXhrError,
-            taskType: TASK_TYPE_GENERAL,
-        });
-        expect(screen.getByText(/Unable to remove assignee\(s\) because the task is now completed\./i)).toBeVisible();
-    });
-
-    test('renders a warning notice for group-exceeds-limit errors', () => {
-        renderModal({ error: { code: ERROR_CODE_GROUP_EXCEEDS_LIMIT } as ElementsXhrError });
-        expect(screen.getByText(/Exceeded max assignees per group/i)).toBeVisible();
-        expect(screen.getByText(/cannot exceed the limit of 250 assignees per group/i)).toBeVisible();
-    });
-
     test('forwards group selections to createTask', async () => {
         const user = userEvent();
         const { createTask } = renderModal();
-        lastUserSelectorProps.onSelectedUsersChange?.([
-            { email: '', id: 99, name: 'Engineering', type: 'group', value: '99' },
-        ]);
+        act(() => {
+            lastUserSelectorProps.onSelectedUsersChange?.([
+                { email: '', id: 99, name: 'Engineering', type: 'group', value: '99' },
+            ]);
+        });
         await user.type(screen.getByRole('textbox', { name: /message/i }), 'Group task');
         await user.click(screen.getByRole('button', { name: /create/i }));
 
@@ -328,9 +298,11 @@ describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2',
         const user = userEvent();
         const createTask = jest.fn();
         renderModal({ createTask });
-        lastUserSelectorProps.onSelectedUsersChange?.([
-            { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
-        ]);
+        act(() => {
+            lastUserSelectorProps.onSelectedUsersChange?.([
+                { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+            ]);
+        });
         await user.type(screen.getByRole('textbox', { name: /message/i }), 'msg');
         await user.click(screen.getByRole('button', { name: /create/i }));
 
@@ -359,9 +331,11 @@ describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2',
             throw thrown;
         });
         const { onSubmitError } = renderModal({ createTask });
-        lastUserSelectorProps.onSelectedUsersChange?.([
-            { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
-        ]);
+        act(() => {
+            lastUserSelectorProps.onSelectedUsersChange?.([
+                { email: 'a@example.com', id: 1, name: 'Alice', type: 'user', value: '1' },
+            ]);
+        });
         await user.type(screen.getByRole('textbox', { name: /message/i }), 'msg');
         await user.click(screen.getByRole('button', { name: /create/i }));
 
@@ -375,22 +349,4 @@ describe('elements/content-sidebar/activity-feed-v2/task-modal-v2/TaskModalV2',
         });
         expect(screen.getByTestId('date-picker-value')).toHaveTextContent('empty');
     });
-
-    test('renders a forbidden-edit warning for an Axios-shaped error with response.status=403', () => {
-        const axiosLikeError = { response: { status: 403 } } as unknown as ElementsXhrError;
-        renderModal({
-            editingTask: buildEditingTask({ task_type: TASK_TYPE_GENERAL }),
-            error: axiosLikeError,
-            taskType: TASK_TYPE_GENERAL,
-        });
-        expect(screen.getByText(/Unable to remove assignee\(s\) because the task is now completed\./i)).toBeVisible();
-    });
-
-    test('renders a group-exceeds notice for an Axios-shaped error with response.data.code', () => {
-        const axiosLikeError = {
-            response: { data: { code: ERROR_CODE_GROUP_EXCEEDS_LIMIT } },
-        } as unknown as ElementsXhrError;
-        renderModal({ error: axiosLikeError });
-        expect(screen.getByText(/Exceeded max assignees per group/i)).toBeVisible();
-    });
 });
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/messages.ts b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/messages.ts
index 9935ff856a..40bfefc5c7 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/messages.ts
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/messages.ts
@@ -51,8 +51,8 @@ const messages = defineMessages({
         defaultMessage: 'An error occurred while creating this task. Please try again.',
         description: 'Body text of the error notice when creating a task fails',
     },
-    createTaskErrorTitle: {
-        id: 'be.taskModalV2.createTaskErrorTitle',
+    taskErrorTitle: {
+        id: 'be.taskModalV2.taskErrorTitle',
         defaultMessage: 'Error',
         description: 'Title of the error notice when creating or updating a task fails',
     },
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/types.ts b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/types.ts
new file mode 100644
index 0000000000..51fb996c9c
--- /dev/null
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/types.ts
@@ -0,0 +1,36 @@
+import type { SelectorItem, GroupMini, UserMini } from '../../../../common/types/core';
+import type { ElementsXhrError } from '../../../../common/types/api';
+import type {
+    TaskCollabAssignee,
+    TaskCompletionRule,
+    TaskType,
+    TaskUpdatePayload,
+} from '../../../../common/types/tasks';
+
+// Widens TaskCollab.target to admit groups, which the collaborators endpoint returns at runtime.
+export type AssigneeTarget = UserMini | GroupMini;
+
+export type TaskAssignee = Omit<TaskCollabAssignee, 'target'> & { target: AssigneeTarget };
+
+export type CreateTaskCallback = (
+    text: string,
+    approvers: SelectorItem<UserMini | GroupMini>[],
+    taskType: TaskType,
+    dueDate: string | null,
+    completionRule: TaskCompletionRule,
+    onSuccess: () => void,
+    onError: (error: ElementsXhrError) => void,
+) => void;
+
+export type EditTaskCallback = (
+    payload: TaskUpdatePayload,
+    onSuccess: () => void,
+    onError: (error: ElementsXhrError) => void,
+) => void;
+
+export type TaskFormV2SubmitPayload = {
+    assignees: TaskAssignee[];
+    completionRule: TaskCompletionRule;
+    dueDate: Date | null;
+    message: string;
+};
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/utils/__tests__/contactMapping.test.ts b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/utils/__tests__/contactMapping.test.ts
index 8057343ab1..0ff0e25cad 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/utils/__tests__/contactMapping.test.ts
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/utils/__tests__/contactMapping.test.ts
@@ -1,11 +1,7 @@
 import type { GroupMini, SelectorItem, UserMini } from '../../../../../../common/types/core';
 
-import {
-    mapAssigneeToUserContact,
-    mapCollaboratorToUserContact,
-    mapUserContactToAssignee,
-    type RuntimeAssignee,
-} from '../contactMapping';
+import { mapAssigneeToUserContact, mapCollaboratorToUserContact, mapUserContactToAssignee } from '../contactMapping';
+import type { TaskAssignee } from '../../types';
 
 const userItem: UserMini = {
     email: 'alice@example.com',
@@ -32,7 +28,7 @@ const groupCollaborator: SelectorItem<UserMini | GroupMini> = {
     name: 'Engineering',
 };
 
-const makeAssignee = (target: UserMini | GroupMini): RuntimeAssignee => ({
+const makeAssignee = (target: UserMini | GroupMini): TaskAssignee => ({
     id: 'task_collab_1',
     permissions: { can_delete: true, can_update: true },
     role: 'ASSIGNEE',
diff --git a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/utils/contactMapping.ts b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/utils/contactMapping.ts
index 5932bd9e8f..795de088d1 100644
--- a/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/utils/contactMapping.ts
+++ b/src/elements/content-sidebar/activity-feed-v2/task-modal-v2/utils/contactMapping.ts
@@ -1,12 +1,8 @@
 import type { UserContactType } from '@box/user-selector';
 
 import type { GroupMini, SelectorItem, UserMini } from '../../../../../common/types/core';
-import type { TaskCollabAssignee } from '../../../../../common/types/tasks';
 
-type AssigneeTarget = UserMini | GroupMini;
-
-// Widens TaskCollab.target to admit groups, which the collaborators endpoint returns at runtime.
-export type RuntimeAssignee = Omit<TaskCollabAssignee, 'target'> & { target: AssigneeTarget };
+import type { AssigneeTarget, TaskAssignee } from '../types';
 
 // Non-numeric ids collapse to 0; the raw string is preserved in UserContactType.value.
 const toDisplayId = (rawId: string): number => {
@@ -33,7 +29,7 @@ export const mapCollaboratorToUserContact = (collab: SelectorItem<UserMini | Gro
     };
 };
 
-export const mapUserContactToAssignee = (contact: UserContactType): RuntimeAssignee => {
+export const mapUserContactToAssignee = (contact: UserContactType): TaskAssignee => {
     const target: AssigneeTarget =
         contact.type === 'group'
             ? { id: contact.value, name: contact.name, type: 'group' }
@@ -49,7 +45,7 @@ export const mapUserContactToAssignee = (contact: UserContactType): RuntimeAssig
     };
 };
 
-export const mapAssigneeToUserContact = (assignee: RuntimeAssignee): UserContactType => {
+export const mapAssigneeToUserContact = (assignee: TaskAssignee): UserContactType => {
     const { target } = assignee;
     const email = target.type === 'user' ? target.email ?? '' : '';