MPDX-8187 + MPDX-8188 Add more warning messages when dragging contact…

… to different columns. (#1056)

* Add more warning messages when dragging contact to different columns.

src/components/Tool/Appeal/Flow/ContactFlow.test.tsx

@@ -431,7 +431,7 @@ describe('ContactFlow', () => {
 
       await waitFor(() =>
         expect(mockEnqueue).toHaveBeenCalledWith(
-          'Unable to move contact here as gift has not been received by Cru.',
+          'Unable to move contact to the "Received" column as gift has not been received by Cru. Status set to "Committed".',
           {
             variant: 'warning',
           },
@@ -559,7 +559,7 @@ describe('ContactFlow', () => {
 
       await waitFor(() =>
         expect(mockEnqueue).toHaveBeenCalledWith(
-          'Unable to move contact to Committed as part of the pledge has been Received.',
+          'Unable to move contact to the "Committed" column as part of the pledge has been Received.',
           {
             variant: 'warning',
           },

src/components/Tool/Appeal/Flow/ContactFlow.tsx

@@ -17,6 +17,7 @@ import { DynamicDeletePledgeModal } from '../Modals/DeletePledgeModal/DynamicDel
 import { useUpdateAccountListPledgeMutation } from '../Modals/PledgeModal/ContactPledge.generated';
 import { DynamicPledgeModal } from '../Modals/PledgeModal/DynamicPledgeModal';
 import { DynamicUpdateDonationsModal } from '../Modals/UpdateDonationsModal/DynamicUpdateDonationsModal';
+import handleReceivedSnackBarNotifications from '../Shared/handleReceivedSnackBarNotifications/handleReceivedSnackBarNotifications';
 import { ContactFlowColumn } from './ContactFlowColumn/ContactFlowColumn';
 import { ContactFlowDragLayer } from './ContactFlowDragLayer/ContactFlowDragLayer';
 import { DraggedContact } from './ContactFlowRow/ContactFlowRow';
@@ -100,6 +101,8 @@ export const ContactFlow: React.FC<ContactFlowProps> = ({
     useState(false);
 
   const [contact, setContact] = useState<DraggedContact | null>(null);
+  const [selectedAppealStatus, setSelectedAppealStatus] =
+    useState<AppealStatusEnum | null>(null);
 
   const [updateAccountListPledge] = useUpdateAccountListPledgeMutation();
 
@@ -124,6 +127,7 @@ export const ContactFlow: React.FC<ContactFlowProps> = ({
     }
 
     setContact(contact);
+    setSelectedAppealStatus(newAppealStatus);
 
     switch (newAppealStatus) {
       case AppealStatusEnum.Excluded:
@@ -166,41 +170,12 @@ export const ContactFlow: React.FC<ContactFlowProps> = ({
               const newStatus =
                 data.data?.updateAccountListPledge?.pledge.status;
 
-              if (
-                newStatus === PledgeStatusEnum.NotReceived &&
-                newAppealStatus === AppealStatusEnum.ReceivedNotProcessed
-              ) {
-                enqueueSnackbar(
-                  t(
-                    'Unable to move contact here as gift has not been received by Cru.',
-                  ),
-                  {
-                    variant: 'warning',
-                  },
-                );
-              } else if (
-                newStatus === PledgeStatusEnum.Processed &&
-                (newAppealStatus === AppealStatusEnum.ReceivedNotProcessed ||
-                  newAppealStatus === AppealStatusEnum.NotReceived)
-              ) {
-                enqueueSnackbar(
-                  t(
-                    'Unable to move contact here as this gift is already processed.',
-                  ),
-                  {
-                    variant: 'warning',
-                  },
-                );
-              } else {
-                enqueueSnackbar(
-                  t(
-                    'Unable to move contact to Committed as part of the pledge has been Received.',
-                  ),
-                  {
-                    variant: 'warning',
-                  },
-                );
-              }
+              handleReceivedSnackBarNotifications({
+                dbStatus: newStatus,
+                selectedAppealStatus: newAppealStatus,
+                t,
+                enqueueSnackbar,
+              });
             },
           });
         } else {
@@ -275,6 +250,7 @@ export const ContactFlow: React.FC<ContactFlowProps> = ({
         <DynamicPledgeModal
           contact={contact}
           pledge={contact.pledge}
+          selectedAppealStatus={selectedAppealStatus}
           handleClose={() => setPledgeModalOpen(false)}
         />
       )}

src/components/Tool/Appeal/Modals/PledgeModal/ContactPledge.graphql

@@ -6,6 +6,7 @@ mutation CreateAccountListPledge(
       id
       amount
       amountCurrency
+      status
     }
   }
 }

src/components/Tool/Appeal/Modals/PledgeModal/PledgeModal.test.tsx

@@ -13,11 +13,16 @@ import { PledgeStatusEnum } from 'src/graphql/types.generated';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
 import {
+  AppealStatusEnum,
   AppealsContext,
   AppealsType,
 } from '../../AppealsContext/AppealsContext';
 import { AppealContactInfoFragment } from '../../AppealsContext/contacts.generated';
 import { defaultContact } from '../../List/ContactRow/ContactRowMock';
+import {
+  CreateAccountListPledgeMutation,
+  UpdateAccountListPledgeMutation,
+} from './ContactPledge.generated';
 import { PledgeModal } from './PledgeModal';
 
 const accountListId = 'abc';
@@ -26,20 +31,73 @@ const router = {
   query: { accountListId },
   isReady: true,
 };
+const defaultPledge = {
+  id: 'pledgeId',
+  amount: 110,
+  amountCurrency: 'USD',
+  appeal: {
+    id: appealId,
+  },
+  expectedDate: '2024-08-08',
+  status: PledgeStatusEnum.NotReceived,
+};
 const handleClose = jest.fn();
 const mutationSpy = jest.fn();
+const mockEnqueue = jest.fn();
+jest.mock('notistack', () => ({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ...jest.requireActual('notistack'),
+  useSnackbar: () => {
+    return {
+      enqueueSnackbar: mockEnqueue,
+    };
+  },
+}));
+
+const defaultUpdateAccountListPledge = {
+  pledge: {
+    id: defaultPledge.id,
+    status: PledgeStatusEnum.NotReceived,
+  },
+};
+const defaultCreateAccountListPledge = {
+  pledge: {
+    id: 'abc',
+    status: PledgeStatusEnum.NotReceived,
+    amount: defaultPledge.amount,
+    amountCurrency: defaultPledge.amountCurrency,
+  },
+};
 
 interface ComponentsProps {
   pledge?: AppealContactInfoFragment['pledges'][0];
+  selectedAppealStatus?: AppealStatusEnum;
+  updateAccountListPledge?: UpdateAccountListPledgeMutation['updateAccountListPledge'];
+  createAccountListPledge?: CreateAccountListPledgeMutation['createAccountListPledge'];
 }
 
-const Components = ({ pledge = undefined }: ComponentsProps) => (
+const Components = ({
+  pledge = undefined,
+  selectedAppealStatus,
+  updateAccountListPledge = defaultUpdateAccountListPledge,
+  createAccountListPledge = defaultCreateAccountListPledge,
+}: ComponentsProps) => (
   <I18nextProvider i18n={i18n}>
     <LocalizationProvider dateAdapter={AdapterLuxon}>
       <SnackbarProvider>
         <ThemeProvider theme={theme}>
           <TestRouter router={router}>
-            <GqlMockedProvider onCall={mutationSpy}>
+            <GqlMockedProvider<{
+              UpdateAccountListPledge: UpdateAccountListPledgeMutation;
+              CreateAccountListPledge: CreateAccountListPledgeMutation;
+            }>
+              onCall={mutationSpy}
+              mocks={{
+                UpdateAccountListPledge: { updateAccountListPledge },
+                CreateAccountListPledge: { createAccountListPledge },
+              }}
+            >
               <AppealsWrapper>
                 <AppealsContext.Provider
                   value={
@@ -53,6 +111,7 @@ const Components = ({ pledge = undefined }: ComponentsProps) => (
                     handleClose={handleClose}
                     contact={defaultContact}
                     pledge={pledge}
+                    selectedAppealStatus={selectedAppealStatus}
                   />
                 </AppealsContext.Provider>
               </AppealsWrapper>
@@ -103,6 +162,126 @@ describe('PledgeModal', () => {
     expect(handleClose).toHaveBeenCalledTimes(2);
   });
 
+  describe('Warnings when trying to change pledge status but the server does not update', () => {
+    it('shows a warning when moving contact from Asked to Received', async () => {
+      const { getByRole } = render(
+        <Components
+          selectedAppealStatus={AppealStatusEnum.ReceivedNotProcessed}
+        />,
+      );
+
+      const amountInput = getByRole('textbox', { name: 'Amount' });
+      userEvent.type(amountInput, '100');
+
+      userEvent.click(getByRole('button', { name: 'Save' }));
+
+      await waitFor(() =>
+        expect(mockEnqueue).toHaveBeenCalledWith(
+          'Unable to move contact to the "Received" column as gift has not been received by Cru. Status set to "Committed".',
+          {
+            variant: 'warning',
+          },
+        ),
+      );
+      expect(mockEnqueue).toHaveBeenCalledWith(
+        'Successfully added commitment to appeal',
+        {
+          variant: 'success',
+        },
+      );
+    });
+
+    it('shows a warning when moving contact from Commitment to Received', async () => {
+      const { getByRole } = render(
+        <Components
+          pledge={defaultPledge}
+          selectedAppealStatus={AppealStatusEnum.ReceivedNotProcessed}
+        />,
+      );
+
+      userEvent.click(getByRole('button', { name: 'Save' }));
+
+      await waitFor(() =>
+        expect(mockEnqueue).toHaveBeenCalledWith(
+          'Unable to move contact to the "Received" column as gift has not been received by Cru. Status set to "Committed".',
+          {
+            variant: 'warning',
+          },
+        ),
+      );
+      expect(mockEnqueue).toHaveBeenCalledWith(
+        'Successfully edited commitment',
+        {
+          variant: 'success',
+        },
+      );
+    });
+
+    it('shows a warning when moving contact from Received to Commitment', async () => {
+      const { getByRole } = render(
+        <Components
+          pledge={defaultPledge}
+          selectedAppealStatus={AppealStatusEnum.NotReceived}
+          updateAccountListPledge={{
+            pledge: {
+              ...defaultUpdateAccountListPledge.pledge,
+              status: PledgeStatusEnum.ReceivedNotProcessed,
+            },
+          }}
+        />,
+      );
+
+      userEvent.click(getByRole('button', { name: 'Save' }));
+
+      await waitFor(() =>
+        expect(mockEnqueue).toHaveBeenCalledWith(
+          'Unable to move contact to the "Committed" column as part of the pledge has been Received.',
+          {
+            variant: 'warning',
+          },
+        ),
+      );
+      expect(mockEnqueue).toHaveBeenCalledWith(
+        'Successfully edited commitment',
+        {
+          variant: 'success',
+        },
+      );
+    });
+
+    it('shows a warning when moving contact from Processed to Commitment', async () => {
+      const { getByRole } = render(
+        <Components
+          pledge={defaultPledge}
+          selectedAppealStatus={AppealStatusEnum.NotReceived}
+          updateAccountListPledge={{
+            pledge: {
+              ...defaultUpdateAccountListPledge.pledge,
+              status: PledgeStatusEnum.Processed,
+            },
+          }}
+        />,
+      );
+
+      userEvent.click(getByRole('button', { name: 'Save' }));
+
+      await waitFor(() =>
+        expect(mockEnqueue).toHaveBeenCalledWith(
+          'Unable to move contact here as this gift is already processed.',
+          {
+            variant: 'warning',
+          },
+        ),
+      );
+      expect(mockEnqueue).toHaveBeenCalledWith(
+        'Successfully edited commitment',
+        {
+          variant: 'success',
+        },
+      );
+    });
+  });
+
   it('Add commitment', async () => {
     const { getByRole, findByText, queryByText } = render(<Components />);