MPDX-9604 Hide save button when no changes present

src/components/HrTools/MinistryPartnerReminders/PartnerRemindersReport.test.tsx

@@ -125,17 +125,10 @@ describe('PartnerRemindersReport', () => {
     await waitFor(() => expect(onNavListToggle).toHaveBeenCalled());
   });
 
-  it('should show saved snackbar when save is clicked with no changes', async () => {
-    mockEnqueue.mockClear();
-    const { getByRole } = render(<TestComponent />);
-
-    userEvent.click(getByRole('button', { name: 'Save' }));
+  it('should hide save button when no changes are made', async () => {
+    const { queryByRole } = render(<TestComponent />);
 
-    await waitFor(() =>
-      expect(mockEnqueue).toHaveBeenCalledWith('No changes have been made', {
-        variant: 'info',
-      }),
-    );
+    expect(queryByRole('button', { name: 'Save' })).not.toBeInTheDocument();
   });
 
   it('should render reminder data in table', async () => {

src/components/HrTools/MinistryPartnerReminders/PartnerRemindersReport.tsx

@@ -89,38 +89,6 @@ export const PartnerRemindersReport: React.FC<MPRemindersReportProps> = ({
     window.print();
   };
 
-  const handleSave = async (values: RowValues) => {
-    const updates = Object.entries(values.status)
-      .filter(([id, statusCd]) => initialValues.status[id] !== statusCd)
-      .map(([id, statusCd]) => {
-        return {
-          rowId: id,
-          statusCd,
-        };
-      });
-
-    if (updates.length === 0) {
-      enqueueSnackbar(t('No changes have been made'), { variant: 'info' });
-      return;
-    }
-
-    await updateMutation({
-      variables: {
-        input: {
-          accountListId: accountListId ?? '',
-          designationNumber,
-          updates,
-        },
-      },
-      onCompleted: () => {
-        enqueueSnackbar(t('Changes saved'), { variant: 'success' });
-      },
-      onError: () => {
-        enqueueSnackbar(t('Error saving changes'), { variant: 'error' });
-      },
-    });
-  };
-
   const transformedData: ReminderData[] = useMemo(
     () =>
       reminders
@@ -157,13 +125,42 @@ export const PartnerRemindersReport: React.FC<MPRemindersReportProps> = ({
     [transformedData],
   );
 
+  const getUpdates = (values: RowValues) => {
+    return Object.entries(values.status)
+      .filter(([id, statusCd]) => initialValues.status[id] !== statusCd)
+      .map(([id, statusCd]) => {
+        return {
+          rowId: id,
+          statusCd,
+        };
+      });
+  };
+
+  const handleSave = async (values: RowValues) => {
+    await updateMutation({
+      variables: {
+        input: {
+          accountListId: accountListId ?? '',
+          designationNumber,
+          updates: getUpdates(values),
+        },
+      },
+      onCompleted: () => {
+        enqueueSnackbar(t('Changes saved'), { variant: 'success' });
+      },
+      onError: () => {
+        enqueueSnackbar(t('Error saving changes'), { variant: 'error' });
+      },
+    });
+  };
+
   return (
     <Formik<RowValues>
       initialValues={initialValues}
       onSubmit={handleSave}
       enableReinitialize
     >
-      {({ submitForm }) => (
+      {({ submitForm, values }) => (
         <Box>
           <SimpleScreenOnly>
             <MultiPageHeader
@@ -216,10 +213,10 @@ export const PartnerRemindersReport: React.FC<MPRemindersReportProps> = ({
                     </Typography>
 
                     <Typography sx={{ marginTop: 3, lineHeight: 1.5 }}>
-                      When you&apos;re done, click the &quot;Save&quot; button
-                      at the bottom of the page. Wondering how the{' '}
-                      <i>Reminder System</i> works and how it differs from the
-                      Receipting System? Check out{' '}
+                      When you&apos;re done, a &quot;Save&quot; button will
+                      appear at the top of the page. Click it to save your
+                      changes. Wondering how the <i>Reminder System</i> works
+                      and how it differs from the Receipting System? Check out{' '}
                       <Link
                         sx={{
                           color: theme.palette.primary.main,
@@ -238,9 +235,11 @@ export const PartnerRemindersReport: React.FC<MPRemindersReportProps> = ({
                 <Box mb={2}>
                   <Box mb={2}>
                     <SimpleScreenOnly>
-                      <Button variant="contained" onClick={submitForm}>
-                        {t('Save')}
-                      </Button>
+                      {getUpdates(values).length > 0 && (
+                        <Button variant="contained" onClick={submitForm}>
+                          {t('Save')}
+                        </Button>
+                      )}
                     </SimpleScreenOnly>
                   </Box>
                   <Typography>