Skip to content

Commit

Permalink
MPDX-8384- Tasks modal - task type reset (#1152)
Browse files Browse the repository at this point in the history 
* Keeps valid actions when task phase changes.
  • Loading branch information
@wjames111
wjames111 authored Oct 28, 2024
1 parent 54916e3 commit 44a98de
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 20 deletions.
62 changes: 62 additions & 0 deletions src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<ThemeProvider theme={theme}>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<SnackbarProvider>
<GqlMockedProvider>
<TaskModalLogForm
accountListId={accountListId}
onClose={jest.fn()}
/>
</GqlMockedProvider>
</SnackbarProvider>
</LocalizationProvider>
</ThemeProvider>,
);

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',
);
});
});
});
13 changes: 12 additions & 1 deletion src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,11 @@ const TaskModalLogForm = ({
phaseData?.results?.tags?.map((tag) => getValueFromIdValue(tag)) || [],
[phaseData],
);

const focusActivity = (): void => {
setTimeout(() => activityRef?.current?.focus(), 50);
};

return (
<Formik
initialValues={initialTask}
Expand Down Expand Up @@ -348,15 +353,21 @@ const TaskModalLogForm = ({
contactPhase={phaseData?.id}
inputRef={firstFocusRef}
onChange={(phase) => {
const activities =
(phase && activitiesByPhase.get(phase)) || [];
handleTaskPhaseChange({
phase,
setFieldValue,
setResultSelected,
setActionSelected,
setPhaseId,
setSelectedSuggestedTags,
activities,
focusActivity,
activityType,
constants,
setFieldTouched,
});
setTimeout(() => activityRef.current?.focus(), 50);
}}
required
onBlur={handleBlur('taskPhase')}
Expand Down
36 changes: 36 additions & 0 deletions src/components/Task/Modal/Form/TaskModalForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<ThemeProvider theme={theme}>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<SnackbarProvider>
<GqlMockedProvider>
<TaskModalForm
accountListId={accountListId}
onClose={onClose}
task={mockCompletedTask}
/>
</GqlMockedProvider>
</SnackbarProvider>
</LocalizationProvider>
</ThemeProvider>,
);
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',
);
});
});
});
12 changes: 11 additions & 1 deletion src/components/Task/Modal/Form/TaskModalForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -393,6 +393,10 @@ const TaskModalForm = ({
[phaseData, resultSelected, actionSelected],
);

const focusActivity = (): void => {
setTimeout(() => activityRef?.current?.focus(), 50);
};

return (
<Formik
initialValues={initialTask}
Expand Down Expand Up @@ -450,15 +454,21 @@ const TaskModalForm = ({
value={taskPhase}
contactPhase={phaseData?.id}
onChange={(phase) => {
const activities =
(phase && activitiesByPhase.get(phase)) || [];
handleTaskPhaseChange({
phase,
setFieldValue,
setResultSelected,
setActionSelected,
setPhaseId,
setSelectedSuggestedTags,
activities,
focusActivity,
activityType,
constants,
setFieldTouched,
});
setTimeout(() => activityRef?.current?.focus(), 50);
}}
inputRef={firstFocusRef}
required
Expand Down
62 changes: 44 additions & 18 deletions src/components/Task/Modal/Form/TaskModalHelper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ export type HandleTaskPhaseChangeProps = {
setActionSelected: SetActionSelected;
setPhaseId: SetPhaseId;
setSelectedSuggestedTags: React.Dispatch<React.SetStateAction<string[]>>;
activities: ActivityTypeEnum[];
focusActivity: () => void;
activityType: ActivityTypeEnum | undefined;
constants: Constants;
setFieldTouched: SetFieldTouched;
};

export type HandleTaskActionChangeProps = {
Expand All @@ -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);
Expand All @@ -71,6 +84,10 @@ export const handleTaskPhaseChange = ({
setActionSelected(null);
setPhaseId(phase);
setSelectedSuggestedTags([]);
setTaskName(constants, activitySelection, setFieldValue, setFieldTouched);
if (!activitySelection) {
focusActivity();
}
};

export const handleTaskActionChange = ({
Expand All @@ -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 = ({
Expand Down Expand Up @@ -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));
};

0 comments on commit 44a98de

Please sign in to comment.