From 6b281c68b87c8a6520313c82a9cd758f014503d0 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 28 Aug 2024 09:25:12 -0400 Subject: [PATCH] Show remove commitment warning when switching from "Partner - Financial" to another status is commitment or frequency is set. --- .../EditPartnershipInfoModal.test.tsx | 118 +++++++++++++++--- .../EditPartnershipInfoModal.tsx | 80 +++++++++++- 2 files changed, 173 insertions(+), 25 deletions(-) diff --git a/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.test.tsx b/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.test.tsx index 7f4963043..b4403125b 100644 --- a/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.test.tsx @@ -200,38 +200,118 @@ describe('EditPartnershipInfoModal', () => { }); it('should handle editing status | Non-Financial', async () => { - const { getByLabelText, getByText } = render( - - - - - - - - - , - ); + const { getByLabelText, getByText, getByRole, getByTestId, queryByText } = + render( + + + + + + + + + , + ); 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( + + + + + + + + + , + ); + 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(() => diff --git a/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx b/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx index a5775c246..3f43ec2ea 100644 --- a/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx +++ b/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx @@ -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, @@ -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'; @@ -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 }) => ({ @@ -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, ); @@ -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 ( - updateStatus(e.target.value as StatusEnum, setFieldValue) + updateStatus( + e.target.value as StatusEnum, + setFieldValue, + status, + pledgeAmount, + pledgeFrequency, + ) } MenuProps={{ anchorOrigin: { @@ -357,6 +390,41 @@ export const EditPartnershipInfoModal: React.FC< + {showRemoveCommitmentWarning && ( + + + + {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 }, + )} + + + {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?', + )} + + + + + + + + )}