From 44a98decd8c535cc4bdb266f288269f33839516f Mon Sep 17 00:00:00 2001 From: Will James Date: Mon, 28 Oct 2024 11:55:38 -0400 Subject: [PATCH] MPDX-8384- Tasks modal - task type reset (#1152) * Keeps valid actions when task phase changes. --- .../Form/LogForm/TaskModalLogForm.test.tsx | 62 +++++++++++++++++++ .../Modal/Form/LogForm/TaskModalLogForm.tsx | 13 +++- .../Task/Modal/Form/TaskModalForm.test.tsx | 36 +++++++++++ .../Task/Modal/Form/TaskModalForm.tsx | 12 +++- .../Task/Modal/Form/TaskModalHelper.ts | 62 +++++++++++++------ 5 files changed, 165 insertions(+), 20 deletions(-) diff --git a/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx b/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx index f0a5e5aa2..b39cec626 100644 --- a/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx +++ b/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx @@ -548,5 +548,67 @@ describe('TaskModalLogForm', () => { getByText(/The contact's status has been updated/), ).toBeInTheDocument(); }); + + it('Keeps valid actions when task phase changes', async () => { + const { getByRole, findByRole, getByLabelText } = render( + + + + + + + + + , + ); + + userEvent.click(getByRole('combobox', { name: 'Task Type' })); + userEvent.click(await findByRole('option', { name: 'Initiation' })); + expect(getByRole('combobox', { name: 'Task Type' })).toHaveValue( + 'Initiation', + ); + + userEvent.click(getByRole('combobox', { name: 'Action' })); + userEvent.click(await findByRole('option', { name: 'Phone Call' })); + expect(getByRole('combobox', { name: 'Action' })).toHaveValue( + 'Phone Call', + ); + + userEvent.click(getByRole('combobox', { name: 'Task Type' })); + userEvent.click(await findByRole('option', { name: 'Appointment' })); + expect(getByRole('combobox', { name: 'Task Type' })).toHaveValue( + 'Appointment', + ); + expect(getByRole('combobox', { name: 'Action' })).toHaveValue( + 'Phone Call', + ); + await waitFor(() => { + expect(getByLabelText(/Task Name/i)).toHaveValue('Phone Appointment'); + }); + + userEvent.click(getByRole('combobox', { name: 'Task Type' })); + userEvent.click(await findByRole('option', { name: 'Follow-Up' })); + expect(getByRole('combobox', { name: 'Task Type' })).toHaveValue( + 'Follow-Up', + ); + + expect(getByRole('textbox', { name: 'Subject' })).toHaveValue( + 'Phone Call To Follow Up', + ); + + userEvent.click(getByRole('combobox', { name: 'Task Type' })); + userEvent.click(await findByRole('option', { name: 'Follow-Up' })); + + expect(getByRole('combobox', { name: 'Action' })).toHaveValue( + 'Phone Call', + ); + + expect(getByRole('textbox', { name: 'Subject' })).toHaveValue( + 'Phone Call To Follow Up', + ); + }); }); }); diff --git a/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx b/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx index 98babc1e2..0c1b0c564 100644 --- a/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx +++ b/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx @@ -293,6 +293,11 @@ const TaskModalLogForm = ({ phaseData?.results?.tags?.map((tag) => getValueFromIdValue(tag)) || [], [phaseData], ); + + const focusActivity = (): void => { + setTimeout(() => activityRef?.current?.focus(), 50); + }; + return ( { + const activities = + (phase && activitiesByPhase.get(phase)) || []; handleTaskPhaseChange({ phase, setFieldValue, @@ -355,8 +362,12 @@ const TaskModalLogForm = ({ setActionSelected, setPhaseId, setSelectedSuggestedTags, + activities, + focusActivity, + activityType, + constants, + setFieldTouched, }); - setTimeout(() => activityRef.current?.focus(), 50); }} required onBlur={handleBlur('taskPhase')} diff --git a/src/components/Task/Modal/Form/TaskModalForm.test.tsx b/src/components/Task/Modal/Form/TaskModalForm.test.tsx index 40576b5bb..3967ed7a2 100644 --- a/src/components/Task/Modal/Form/TaskModalForm.test.tsx +++ b/src/components/Task/Modal/Form/TaskModalForm.test.tsx @@ -505,5 +505,41 @@ describe('TaskModalForm', () => { getByText(/The contact's status has been updated/), ).toBeInTheDocument(); }); + + it('Keeps valid actions when task phase changes', async () => { + const { getByRole, findByRole } = render( + + + + + + + + + , + ); + userEvent.click(getByRole('combobox', { name: 'Task Type' })); + expect( + await findByRole('option', { name: 'Partner Care' }), + ).toBeInTheDocument(); + + expect(getByRole('combobox', { name: 'Action' })).toHaveValue( + 'In Person', + ); + userEvent.click(getByRole('combobox', { name: 'Task Type' })); + userEvent.click(await findByRole('option', { name: 'Follow-Up' })); + + expect(getByRole('combobox', { name: 'Action' })).toHaveValue( + 'In Person', + ); + + expect(getByRole('textbox', { name: 'Subject' })).toHaveValue( + 'Follow Up In Person', + ); + }); }); }); diff --git a/src/components/Task/Modal/Form/TaskModalForm.tsx b/src/components/Task/Modal/Form/TaskModalForm.tsx index ce414b415..91d922c9c 100644 --- a/src/components/Task/Modal/Form/TaskModalForm.tsx +++ b/src/components/Task/Modal/Form/TaskModalForm.tsx @@ -393,6 +393,10 @@ const TaskModalForm = ({ [phaseData, resultSelected, actionSelected], ); + const focusActivity = (): void => { + setTimeout(() => activityRef?.current?.focus(), 50); + }; + return ( { + const activities = + (phase && activitiesByPhase.get(phase)) || []; handleTaskPhaseChange({ phase, setFieldValue, @@ -457,8 +463,12 @@ const TaskModalForm = ({ setActionSelected, setPhaseId, setSelectedSuggestedTags, + activities, + focusActivity, + activityType, + constants, + setFieldTouched, }); - setTimeout(() => activityRef?.current?.focus(), 50); }} inputRef={firstFocusRef} required diff --git a/src/components/Task/Modal/Form/TaskModalHelper.ts b/src/components/Task/Modal/Form/TaskModalHelper.ts index 74028caa3..935691a49 100644 --- a/src/components/Task/Modal/Form/TaskModalHelper.ts +++ b/src/components/Task/Modal/Form/TaskModalHelper.ts @@ -35,6 +35,11 @@ export type HandleTaskPhaseChangeProps = { setActionSelected: SetActionSelected; setPhaseId: SetPhaseId; setSelectedSuggestedTags: React.Dispatch>; + activities: ActivityTypeEnum[]; + focusActivity: () => void; + activityType: ActivityTypeEnum | undefined; + constants: Constants; + setFieldTouched: SetFieldTouched; }; export type HandleTaskActionChangeProps = { @@ -60,9 +65,17 @@ export const handleTaskPhaseChange = ({ setActionSelected, setPhaseId, setSelectedSuggestedTags, + activities, + focusActivity, + activityType, + constants, + setFieldTouched, }: HandleTaskPhaseChangeProps): void => { setFieldValue('taskPhase', phase); - setFieldValue('activityType', ''); + const activitySelection = activities.find((activity) => + activityType?.includes(activity.replace(phase + '_', '')), + ) as ActivityTypeEnum; + setFieldValue('activityType', activitySelection || ''); setFieldValue('subject', ''); setFieldValue('displayResult', null); setFieldValue('result', null); @@ -71,6 +84,10 @@ export const handleTaskPhaseChange = ({ setActionSelected(null); setPhaseId(phase); setSelectedSuggestedTags([]); + setTaskName(constants, activitySelection, setFieldValue, setFieldTouched); + if (!activitySelection) { + focusActivity(); + } }; export const handleTaskActionChange = ({ @@ -82,23 +99,7 @@ export const handleTaskActionChange = ({ }: HandleTaskActionChangeProps): void => { setFieldValue('activityType', activityType); setActionSelected(activityType || null); - const activity = constants?.activities?.find( - (activity) => activity.id === activityType, - ); - if (activity) { - setFieldValue( - 'subject', - activity?.name - ? activity.name - .split(' ') - .map((word) => { - return word[0].toUpperCase() + word.substring(1); - }) - .join(' ') - : '', - ); - } - setTimeout(() => setFieldTouched('activityType', true)); + setTaskName(constants, activityType, setFieldValue, setFieldTouched); }; export const handleResultChange = ({ @@ -189,3 +190,28 @@ export const extractSuggestedTags = ( }); return { additionalTags, suggestedTags }; }; + +const setTaskName = ( + constants: Constants, + activityType: ActivityTypeEnum | null, + setFieldValue: SetFieldValue, + setFieldTouched: SetFieldTouched, +) => { + const activity = constants?.activities?.find( + (activity) => activity.id === activityType, + ); + if (activity) { + setFieldValue( + 'subject', + activity?.name + ? activity.name + .split(' ') + .map((word) => { + return word[0].toUpperCase() + word.substring(1); + }) + .join(' ') + : '', + ); + } + setTimeout(() => setFieldTouched('activityType', true)); +};