Merge pull request #1015 from CruGlobal/commitment-removal-warning

MPDX-8130 - Add Remove commitment warning on the Edit Partnership modal
CruGlobal · Aug 28, 2024 · 9c76c5c · 9c76c5c
2 parents f7e9100 + 6b281c6
commit 9c76c5c
Show file tree

Hide file tree

Showing 2 changed files with 173 additions and 25 deletions.
diff --git a/...ctDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.test.tsx b/...ctDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.test.tsx
@@ -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(() =>

diff --git a/...ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx b/...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 (
     <Modal
       isOpen={true}
@@ -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: {
@@ -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')}