Appeals - Add warning and tooltip to Received title and pledge status dropdown

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

@@ -8,6 +8,7 @@ import {
   IconButton,
   Menu,
   MenuItem,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -163,7 +164,29 @@ export const ContactFlowColumn: React.FC<Props> = ({
     <Card>
       <ContainerBox p={2} data-testid="column-header" color={color}>
         <Box width="80%">
-          <ColumnTitle variant="h6">{title}</ColumnTitle>
+          {appealStatus === AppealStatusEnum.ReceivedNotProcessed ? (
+            <Tooltip
+              title={
+                <>
+                  <Typography>
+                    {t(
+                      'Do not move a contact into this column called "Received". Due to an outdated feature, contacts must first be moved to "Committed". If the gift has been recorded, you can then move the contact into the column called "Given".',
+                    )}
+                  </Typography>
+
+                  <Typography>
+                    {t(
+                      'In a few cases, the contact may automatically move backward from "Given" to "Received" if the processing is not complete. This behavior is due to the current system design, which we plan to update, but the work will take time and needs to be scheduled.',
+                    )}
+                  </Typography>
+                </>
+              }
+            >
+              <ColumnTitle variant="h6">{title}</ColumnTitle>
+            </Tooltip>
+          ) : (
+            <ColumnTitle variant="h6">{title}</ColumnTitle>
+          )}
         </Box>
         <Box display="flex" alignItems="center">
           <Typography>{data?.contacts.totalCount || 0}</Typography>

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

@@ -432,4 +432,47 @@ describe('PledgeModal', () => {
     expect(getByRole('option', { name: 'Received' })).toBeInTheDocument();
     expect(queryByRole('option', { name: 'Given' })).not.toBeInTheDocument();
   });
+
+  describe('Warning when switching status to Received', () => {
+    test.each([
+      {
+        testName: 'New Pledge should show warnings',
+        pledge: undefined,
+        expectToFindWarnings: true,
+      },
+      {
+        testName: 'Existing Pledge should show warnings',
+        pledge: {
+          ...defaultPledge,
+          status: PledgeStatusEnum.NotReceived,
+        },
+        expectToFindWarnings: true,
+      },
+      {
+        testName:
+          'Existing Pledge with status "Received" should not show warnings',
+        pledge: {
+          ...defaultPledge,
+          status: PledgeStatusEnum.ReceivedNotProcessed,
+        },
+        expectToFindWarnings: false,
+      },
+    ])('$testName', ({ pledge, expectToFindWarnings }) => {
+      const { getByRole, queryByTestId } = render(
+        <Components pledge={pledge} />,
+      );
+
+      userEvent.click(getByRole('combobox', { name: 'Status' }));
+      userEvent.click(getByRole('option', { name: 'Received' }));
+
+      const warning = queryByTestId('received-warnings');
+      if (expectToFindWarnings) {
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(warning).toBeInTheDocument();
+      } else {
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(warning).not.toBeInTheDocument();
+      }
+    });
+  });
 });

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

@@ -210,6 +210,7 @@ export const PledgeModal: React.FC<PledgeModalProps> = ({
         onSubmit={onSubmit}
       >
         {({
+          values: { status },
           setFieldValue,
           handleSubmit,
           isSubmitting,
@@ -427,6 +428,26 @@ export const PledgeModal: React.FC<PledgeModalProps> = ({
                   </FormControl>
                 </Grid>
               </Grid>
+              {status === PledgeStatusEnum.ReceivedNotProcessed &&
+                initialValues.status !== status && (
+                  <Alert
+                    severity="warning"
+                    sx={{ marginTop: 2 }}
+                    data-testid="received-warnings"
+                  >
+                    <Typography>
+                      {t(
+                        'Do not move a contact into this column called "Received". Due to an outdated feature, contacts must first be moved to "Committed". If the gift has been recorded, you can then move the contact into the column called "Given".',
+                      )}
+                    </Typography>
+
+                    <Typography>
+                      {t(
+                        'In a few cases, the contact may automatically move backward from "Given" to "Received" if the processing is not complete. This behavior is due to the current system design, which we plan to update, but the work will take time and needs to be scheduled.',
+                      )}
+                    </Typography>
+                  </Alert>
+                )}
             </DialogContent>
             <DialogActions>
               <CancelButton onClick={handleClose} disabled={isSubmitting} />