Skip to content

Commit 44a98de

Browse files
wjames111wjames111
authored
MPDX-8384- Tasks modal - task type reset (#1152)
* Keeps valid actions when task phase changes.
1 parent 54916e3 commit 44a98de

5 files changed

Lines changed: 165 additions & 20 deletions

File tree

‎src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -548,5 +548,67 @@ describe('TaskModalLogForm', () => {
548548
getByText(/The contact's status has been updated/),
549549
).toBeInTheDocument();
550550
});
551+
552+
it('Keeps valid actions when task phase changes', async () => {
553+
const { getByRole, findByRole, getByLabelText } = render(
554+
<ThemeProvider theme={theme}>
555+
<LocalizationProvider dateAdapter={AdapterLuxon}>
556+
<SnackbarProvider>
557+
<GqlMockedProvider>
558+
<TaskModalLogForm
559+
accountListId={accountListId}
560+
onClose={jest.fn()}
561+
/>
562+
</GqlMockedProvider>
563+
</SnackbarProvider>
564+
</LocalizationProvider>
565+
</ThemeProvider>,
566+
);
567+
568+
userEvent.click(getByRole('combobox', { name: 'Task Type' }));
569+
userEvent.click(await findByRole('option', { name: 'Initiation' }));
570+
expect(getByRole('combobox', { name: 'Task Type' })).toHaveValue(
571+
'Initiation',
572+
);
573+
574+
userEvent.click(getByRole('combobox', { name: 'Action' }));
575+
userEvent.click(await findByRole('option', { name: 'Phone Call' }));
576+
expect(getByRole('combobox', { name: 'Action' })).toHaveValue(
577+
'Phone Call',
578+
);
579+
580+
userEvent.click(getByRole('combobox', { name: 'Task Type' }));
581+
userEvent.click(await findByRole('option', { name: 'Appointment' }));
582+
expect(getByRole('combobox', { name: 'Task Type' })).toHaveValue(
583+
'Appointment',
584+
);
585+
expect(getByRole('combobox', { name: 'Action' })).toHaveValue(
586+
'Phone Call',
587+
);
588+
await waitFor(() => {
589+
expect(getByLabelText(/Task Name/i)).toHaveValue('Phone Appointment');
590+
});
591+
592+
userEvent.click(getByRole('combobox', { name: 'Task Type' }));
593+
userEvent.click(await findByRole('option', { name: 'Follow-Up' }));
594+
expect(getByRole('combobox', { name: 'Task Type' })).toHaveValue(
595+
'Follow-Up',
596+
);
597+
598+
expect(getByRole('textbox', { name: 'Subject' })).toHaveValue(
599+
'Phone Call To Follow Up',
600+
);
601+
602+
userEvent.click(getByRole('combobox', { name: 'Task Type' }));
603+
userEvent.click(await findByRole('option', { name: 'Follow-Up' }));
604+
605+
expect(getByRole('combobox', { name: 'Action' })).toHaveValue(
606+
'Phone Call',
607+
);
608+
609+
expect(getByRole('textbox', { name: 'Subject' })).toHaveValue(
610+
'Phone Call To Follow Up',
611+
);
612+
});
551613
});
552614
});

‎src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,11 @@ const TaskModalLogForm = ({
293293
phaseData?.results?.tags?.map((tag) => getValueFromIdValue(tag)) || [],
294294
[phaseData],
295295
);
296+
297+
const focusActivity = (): void => {
298+
setTimeout(() => activityRef?.current?.focus(), 50);
299+
};
300+
296301
return (
297302
<Formik
298303
initialValues={initialTask}
@@ -348,15 +353,21 @@ const TaskModalLogForm = ({
348353
contactPhase={phaseData?.id}
349354
inputRef={firstFocusRef}
350355
onChange={(phase) => {
356+
const activities =
357+
(phase && activitiesByPhase.get(phase)) || [];
351358
handleTaskPhaseChange({
352359
phase,
353360
setFieldValue,
354361
setResultSelected,
355362
setActionSelected,
356363
setPhaseId,
357364
setSelectedSuggestedTags,
365+
activities,
366+
focusActivity,
367+
activityType,
368+
constants,
369+
setFieldTouched,
358370
});
359-
setTimeout(() => activityRef.current?.focus(), 50);
360371
}}
361372
required
362373
onBlur={handleBlur('taskPhase')}

‎src/components/Task/Modal/Form/TaskModalForm.test.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -505,5 +505,41 @@ describe('TaskModalForm', () => {
505505
getByText(/The contact's status has been updated/),
506506
).toBeInTheDocument();
507507
});
508+
509+
it('Keeps valid actions when task phase changes', async () => {
510+
const { getByRole, findByRole } = render(
511+
<ThemeProvider theme={theme}>
512+
<LocalizationProvider dateAdapter={AdapterLuxon}>
513+
<SnackbarProvider>
514+
<GqlMockedProvider>
515+
<TaskModalForm
516+
accountListId={accountListId}
517+
onClose={onClose}
518+
task={mockCompletedTask}
519+
/>
520+
</GqlMockedProvider>
521+
</SnackbarProvider>
522+
</LocalizationProvider>
523+
</ThemeProvider>,
524+
);
525+
userEvent.click(getByRole('combobox', { name: 'Task Type' }));
526+
expect(
527+
await findByRole('option', { name: 'Partner Care' }),
528+
).toBeInTheDocument();
529+
530+
expect(getByRole('combobox', { name: 'Action' })).toHaveValue(
531+
'In Person',
532+
);
533+
userEvent.click(getByRole('combobox', { name: 'Task Type' }));
534+
userEvent.click(await findByRole('option', { name: 'Follow-Up' }));
535+
536+
expect(getByRole('combobox', { name: 'Action' })).toHaveValue(
537+
'In Person',
538+
);
539+
540+
expect(getByRole('textbox', { name: 'Subject' })).toHaveValue(
541+
'Follow Up In Person',
542+
);
543+
});
508544
});
509545
});

‎src/components/Task/Modal/Form/TaskModalForm.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,10 @@ const TaskModalForm = ({
393393
[phaseData, resultSelected, actionSelected],
394394
);
395395

396+
const focusActivity = (): void => {
397+
setTimeout(() => activityRef?.current?.focus(), 50);
398+
};
399+
396400
return (
397401
<Formik
398402
initialValues={initialTask}
@@ -450,15 +454,21 @@ const TaskModalForm = ({
450454
value={taskPhase}
451455
contactPhase={phaseData?.id}
452456
onChange={(phase) => {
457+
const activities =
458+
(phase && activitiesByPhase.get(phase)) || [];
453459
handleTaskPhaseChange({
454460
phase,
455461
setFieldValue,
456462
setResultSelected,
457463
setActionSelected,
458464
setPhaseId,
459465
setSelectedSuggestedTags,
466+
activities,
467+
focusActivity,
468+
activityType,
469+
constants,
470+
setFieldTouched,
460471
});
461-
setTimeout(() => activityRef?.current?.focus(), 50);
462472
}}
463473
inputRef={firstFocusRef}
464474
required

‎src/components/Task/Modal/Form/TaskModalHelper.ts‎

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ export type HandleTaskPhaseChangeProps = {
3535
setActionSelected: SetActionSelected;
3636
setPhaseId: SetPhaseId;
3737
setSelectedSuggestedTags: React.Dispatch<React.SetStateAction<string[]>>;
38+
activities: ActivityTypeEnum[];
39+
focusActivity: () => void;
40+
activityType: ActivityTypeEnum | undefined;
41+
constants: Constants;
42+
setFieldTouched: SetFieldTouched;
3843
};
3944

4045
export type HandleTaskActionChangeProps = {
@@ -60,9 +65,17 @@ export const handleTaskPhaseChange = ({
6065
setActionSelected,
6166
setPhaseId,
6267
setSelectedSuggestedTags,
68+
activities,
69+
focusActivity,
70+
activityType,
71+
constants,
72+
setFieldTouched,
6373
}: HandleTaskPhaseChangeProps): void => {
6474
setFieldValue('taskPhase', phase);
65-
setFieldValue('activityType', '');
75+
const activitySelection = activities.find((activity) =>
76+
activityType?.includes(activity.replace(phase + '_', '')),
77+
) as ActivityTypeEnum;
78+
setFieldValue('activityType', activitySelection || '');
6679
setFieldValue('subject', '');
6780
setFieldValue('displayResult', null);
6881
setFieldValue('result', null);
@@ -71,6 +84,10 @@ export const handleTaskPhaseChange = ({
7184
setActionSelected(null);
7285
setPhaseId(phase);
7386
setSelectedSuggestedTags([]);
87+
setTaskName(constants, activitySelection, setFieldValue, setFieldTouched);
88+
if (!activitySelection) {
89+
focusActivity();
90+
}
7491
};
7592

7693
export const handleTaskActionChange = ({
@@ -82,23 +99,7 @@ export const handleTaskActionChange = ({
8299
}: HandleTaskActionChangeProps): void => {
83100
setFieldValue('activityType', activityType);
84101
setActionSelected(activityType || null);
85-
const activity = constants?.activities?.find(
86-
(activity) => activity.id === activityType,
87-
);
88-
if (activity) {
89-
setFieldValue(
90-
'subject',
91-
activity?.name
92-
? activity.name
93-
.split(' ')
94-
.map((word) => {
95-
return word[0].toUpperCase() + word.substring(1);
96-
})
97-
.join(' ')
98-
: '',
99-
);
100-
}
101-
setTimeout(() => setFieldTouched('activityType', true));
102+
setTaskName(constants, activityType, setFieldValue, setFieldTouched);
102103
};
103104

104105
export const handleResultChange = ({
@@ -189,3 +190,28 @@ export const extractSuggestedTags = (
189190
});
190191
return { additionalTags, suggestedTags };
191192
};
193+
194+
const setTaskName = (
195+
constants: Constants,
196+
activityType: ActivityTypeEnum | null,
197+
setFieldValue: SetFieldValue,
198+
setFieldTouched: SetFieldTouched,
199+
) => {
200+
const activity = constants?.activities?.find(
201+
(activity) => activity.id === activityType,
202+
);
203+
if (activity) {
204+
setFieldValue(
205+
'subject',
206+
activity?.name
207+
? activity.name
208+
.split(' ')
209+
.map((word) => {
210+
return word[0].toUpperCase() + word.substring(1);
211+
})
212+
.join(' ')
213+
: '',
214+
);
215+
}
216+
setTimeout(() => setFieldTouched('activityType', true));
217+
};

0 commit comments

Comments
 (0)