Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MPDX-8130 - Add Remove commitment warning on the Edit Partnership modal #1015

Merged
merged 1 commit into from
Aug 28, 2024
Merged

MPDX-8130 - Add Remove commitment warning on the Edit Partnership modal #1015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 99 additions & 19 deletions ...ctDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,38 +200,118 @@ describe('EditPartnershipInfoModal', () => {
});

it('should handle editing status | Non-Financial', async () => {
const { getByLabelText, getByText } = render(
<SnackbarProvider>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<ThemeProvider theme={theme}>
<GqlMockedProvider>
<EditPartnershipInfoModal
contact={contactMock}
handleClose={handleClose}
/>
</GqlMockedProvider>
</ThemeProvider>
</LocalizationProvider>
</SnackbarProvider>,
);
const { getByLabelText, getByText, getByRole, getByTestId, queryByText } =
render(
<SnackbarProvider>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<ThemeProvider theme={theme}>
<GqlMockedProvider>
<EditPartnershipInfoModal
contact={contactMock}
handleClose={handleClose}
/>
</GqlMockedProvider>
</ThemeProvider>
</LocalizationProvider>
</SnackbarProvider>,
);
const statusInput = getByLabelText('Status');
const amountInput = getByLabelText('Amount');
const frequencyInput = getByLabelText('Frequency');
const frequencyInput = getByRole('combobox', { name: 'Frequency' });

expect(statusInput.textContent).toEqual('Partner - Financial');

expect(amountInput).toHaveValue(50);
expect(frequencyInput.textContent).toEqual('Every 2 Months');

userEvent.click(statusInput);
userEvent.click(getByText('Ask In Future'));

// Values get reset and inputs becomes disabled when status is not PARTNER_FINANCIAL
expect(getByTestId('removeCommitmentMessage')).toBeInTheDocument();
userEvent.click(getByRole('button', { name: 'No' }));

expect(amountInput).toHaveValue(50);
expect(frequencyInput.textContent).toEqual('Every 2 Months');
expect(getByText('Every 2 Months')).toBeInTheDocument();

userEvent.click(statusInput);
userEvent.click(getByText('Partner - Financial'));

userEvent.click(statusInput);
userEvent.click(getByText('Ask In Future'));

expect(getByTestId('removeCommitmentMessage')).toBeInTheDocument();
userEvent.click(getByRole('button', { name: 'Yes' }));

expect(amountInput).toHaveValue(0);
expect(amountInput).toBeDisabled();
expect(queryByText('Every 2 Months')).not.toBeInTheDocument();
expect(statusInput.textContent).toEqual('Ask In Future');

// these are flaky for some reason, disabling for now
// await waitFor(() => expect(frequencyInput.textContent).toBe(''));
// await waitFor(() => expect(frequencyInput).toBeDisabled());
userEvent.click(getByText('Save'));
await waitFor(() =>
expect(mockEnqueue).toHaveBeenCalledWith(
'Partnership information updated successfully.',
{
variant: 'success',
},
),
);
expect(handleClose).toHaveBeenCalled();
});

it('should handle when remove commitment warning shows', async () => {
const { getByLabelText, getByText, getByRole, getByTestId, queryByTestId } =
render(
<SnackbarProvider>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<ThemeProvider theme={theme}>
<GqlMockedProvider>
<EditPartnershipInfoModal
contact={contactMock}
handleClose={handleClose}
/>
</GqlMockedProvider>
</ThemeProvider>
</LocalizationProvider>
</SnackbarProvider>,
);
const statusInput = getByLabelText('Status');
const amountInput = getByLabelText('Amount');
const frequencyInput = getByRole('combobox', { name: 'Frequency' });

// Clear amount and frequency
userEvent.click(statusInput);
userEvent.click(getByText('Ask In Future'));
userEvent.click(getByRole('button', { name: 'Yes' }));

// Due to the amount being zero, we don't show the remove commitment message
userEvent.click(statusInput);
userEvent.click(getByText('Partner - Financial'));
userEvent.click(statusInput);
userEvent.click(getByText('Ask In Future'));
expect(queryByTestId('removeCommitmentMessage')).not.toBeInTheDocument();

// If frequency and not amount is set we show the remove commitment message
userEvent.click(statusInput);
userEvent.click(getByText('Partner - Financial'));
userEvent.click(frequencyInput);
userEvent.click(getByText('Every 2 Months'));
expect(amountInput).toHaveValue(0);
userEvent.click(statusInput);
userEvent.click(getByText('Ask In Future'));
expect(getByTestId('removeCommitmentMessage')).toBeInTheDocument();

// Clear amount and frequency
userEvent.click(getByRole('button', { name: 'Yes' }));

// If amount and not frequency is set we show the remove commitment message
userEvent.click(statusInput);
userEvent.click(getByText('Partner - Financial'));
userEvent.type(amountInput, '50');
userEvent.click(statusInput);
userEvent.click(getByText('Ask In Future'));
expect(getByTestId('removeCommitmentMessage')).toBeInTheDocument();

userEvent.click(getByText('Save'));
await waitFor(() =>
Expand Down
80 changes: 74 additions & 6 deletions ...ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, { ReactElement, useState } from 'react';
import InfoIcon from '@mui/icons-material/InfoOutlined';
import {
Alert,
Autocomplete,
Box,
Button,
Checkbox,
CircularProgress,
DialogActions,
Expand Down Expand Up @@ -34,6 +36,7 @@ import {
SendNewsletterEnum,
StatusEnum,
} from 'src/graphql/types.generated';
import useGetAppSettings from 'src/hooks/useGetAppSettings';
import { nullableDateTime } from 'src/lib/formikHelpers';
import { getPledgeCurrencyOptions } from 'src/lib/getCurrencyOptions';
import { getLocalizedContactStatus } from 'src/utils/functions/getLocalizedContactStatus';
Expand Down Expand Up @@ -71,6 +74,13 @@ const TextFieldInteractive = styled(TextField, {
},
}));

const RemoveCommitmentActions = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-end',
width: '100%',
gap: theme.spacing(1),
}));

const SelectInteractive = styled(Select, {
shouldForwardProp: (prop) => prop !== 'isDisabled',
})<{ isDisabled?: boolean }>(({ isDisabled }) => ({
Expand Down Expand Up @@ -120,9 +130,12 @@ export const EditPartnershipInfoModal: React.FC<
EditPartnershipInfoModalProps
> = ({ contact, handleClose }) => {
const { t } = useTranslation();
const { appName } = useGetAppSettings();
const accountListId = useAccountListId();
const constants = useApiConstants();
const [referredByName, setReferredByName] = useState('');
const [showRemoveCommitmentWarning, setShowRemoveCommitmentWarning] =
useState(false);
const referredContactIds = contact.contactReferralsToMe.nodes.map(
(referral) => referral.referredBy.id,
);
Expand Down Expand Up @@ -260,16 +273,30 @@ export const EditPartnershipInfoModal: React.FC<
};

const updateStatus = (
status: StatusEnum,
newStatus: StatusEnum,
setFieldValue: (name: string, value: StatusEnum | number | null) => void,
oldStatus?: StatusEnum | null,
pledgeAmount?: number | null,
pledgeFrequency?: PledgeFrequencyEnum | null,
) => {
setFieldValue('status', status);
if (status !== StatusEnum.PartnerFinancial) {
setFieldValue('pledgeAmount', 0);
setFieldValue('pledgeFrequency', null);
setFieldValue('status', newStatus);
if (
newStatus !== StatusEnum.PartnerFinancial &&
oldStatus === StatusEnum.PartnerFinancial &&
((pledgeAmount && pledgeAmount > 0) || pledgeFrequency)
) {
setShowRemoveCommitmentWarning(true);
}
};

const removeCommittedDetails = (
setFieldValue: (name: string, value: StatusEnum | number | null) => void,
) => {
setFieldValue('pledgeAmount', 0);
setFieldValue('pledgeFrequency', null);
setShowRemoveCommitmentWarning(false);
};

return (
<Modal
isOpen={true}
Expand Down Expand Up @@ -330,7 +357,13 @@ export const EditPartnershipInfoModal: React.FC<
labelId="status-select-label"
value={status}
onChange={(e) =>
updateStatus(e.target.value as StatusEnum, setFieldValue)
updateStatus(
e.target.value as StatusEnum,
setFieldValue,
status,
pledgeAmount,
pledgeFrequency,
)
}
MenuProps={{
anchorOrigin: {
Expand All @@ -357,6 +390,41 @@ export const EditPartnershipInfoModal: React.FC<
</Select>
</FormControl>
</ContactInputWrapper>
{showRemoveCommitmentWarning && (
<ContactInputWrapper data-testid="removeCommitmentMessage">
<Alert severity="warning">
<Typography>
{t(
'{{appName}} uses your contact status, commitment amount, and frequency together to calculate many things, including your progress towards your goal and notification alerts.',
{ appName },
)}
</Typography>
<Typography my={'10px'}>
{t(
'If you are switching this contact away from Partner - Financial status, their commitment amount and frequency will no longer be included in calculations. Would you like to remove their commitment amount and frequency, as well?',
)}
</Typography>
<RemoveCommitmentActions>
<Button
color="inherit"
size="small"
variant="contained"
onClick={() => setShowRemoveCommitmentWarning(false)}
>
{t('No')}
</Button>
<Button
color="primary"
size="small"
variant="contained"
onClick={() => removeCommittedDetails(setFieldValue)}
>
{t('Yes')}
</Button>
</RemoveCommitmentActions>
</Alert>
</ContactInputWrapper>
)}
<ContactInputWrapper>
<TextFieldInteractive
label={t('Amount')}
Expand Down
Loading