WhatsApp From: Add Sync Button on WhatsApp Forms List Page

src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.test.tsx

@@ -7,6 +7,8 @@ import {
   WHATSAPP_FORM_MOCKS,
   deactivateWhatsappForm,
   deactivateWhatsappFormError,
+  syncWhatsappFormQueryWithErrors,
+  syncWhatsappForm,
 } from 'mocks/WhatsAppForm';
 import { MockedProvider } from '@apollo/client/testing';
 import WhatsAppForms from '../WhatsAppForms';
@@ -211,4 +213,32 @@ describe('<WhatsAppFormList />', () => {
       expect(errorSpy).toHaveBeenCalled();
     });
   });
+
+  test('clicking on sync button should sync whatsapp forms', async () => {
+    const { getByTestId } = render(wrapper([syncWhatsappForm]));
+    const notificationSpy = vi.spyOn(Notification, 'setNotification');
+
+    const syncButton = await waitFor(() => getByTestId('syncWhatsappForm'));
+    fireEvent.click(syncButton);
+
+    await waitFor(() => {
+      expect(notificationSpy).toHaveBeenCalled();
+    });
+
+    expect(notificationSpy).toHaveBeenCalledWith('WhatsApp Forms synced successfully', 'success');
+  });
+
+  test('sync whatsapp forms shows error notification on failure', async () => {
+    const { getByTestId } = render(wrapper([syncWhatsappFormQueryWithErrors]));
+    const notificationSpy = vi.spyOn(Notification, 'setNotification');
+
+    const syncButton = await waitFor(() => getByTestId('syncWhatsappForm'));
+    fireEvent.click(syncButton);
+
+    await waitFor(() => {
+      expect(notificationSpy).toHaveBeenCalled();
+    });
+
+    expect(notificationSpy).toHaveBeenCalledWith('Sorry, failed to sync whatsapp forms updates.', 'warning');
+  });
 });

src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.tsx

@@ -5,13 +5,20 @@ import { whatsappFormsInfo } from 'common/HelpData';
 import { setErrorMessage, setNotification } from 'common/notification';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import { List } from 'containers/List/List';
-import { ACTIVATE_FORM, DEACTIVATE_FORM, DELETE_FORM, PUBLISH_FORM } from 'graphql/mutations/WhatsAppForm';
+import {
+  ACTIVATE_FORM,
+  DEACTIVATE_FORM,
+  DELETE_FORM,
+  PUBLISH_FORM,
+  SYNC_WHATSAPP_FORM,
+} from 'graphql/mutations/WhatsAppForm';
 import { GET_WHATSAPP_FORM, LIST_WHATSAPP_FORMS } from 'graphql/queries/WhatsAppForm';
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { formatError } from '../WhatsAppForms';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import { Button } from 'components/UI/Form/Button/Button';
 
 import styles from './WhatsAppFormList.module.css';
 
@@ -22,6 +29,7 @@ const queries = {
   deleteItemQuery: DELETE_FORM,
   getItemQuery: GET_WHATSAPP_FORM,
   publishFlowQuery: PUBLISH_FORM,
+  syncWhatsappForm: SYNC_WHATSAPP_FORM,
 };
 
 const getName = (name: string) => <div className={styles.NameText}>{name}</div>;
@@ -72,6 +80,7 @@ export const WhatsAppFormList = () => {
   const [formId, setFormId] = useState<string | null>(null);
   const [dialogType, setDialogType] = useState<'publish' | 'inactive' | 'activate' | null>(null);
   const [filter, setFilter] = useState<any>('all');
+  const [syncWhatsappFormLoad, setSyncWhatsappFormLoad] = useState(false);
 
   const navigate = useNavigate();
 
@@ -85,6 +94,27 @@ export const WhatsAppFormList = () => {
       setErrorMessage(formatError(errors.message), 'An error occurred');
     },
   });
+  const handleFormUpdates = () => {
+    setSyncWhatsappFormLoad(true);
+    syncWhatsappForm();
+  };
+
+  const [syncWhatsappForm] = useMutation(SYNC_WHATSAPP_FORM, {
+    fetchPolicy: 'network-only',
+    onCompleted: (data) => {
+      const errors = data?.syncWhatsappForm?.errors;
+      if (errors?.length) {
+        setNotification('Sorry, failed to sync whatsapp forms updates.', 'warning');
+      } else {
+        setNotification('WhatsApp Forms synced successfully', 'success');
+      }
+      setSyncWhatsappFormLoad(false);
+    },
+    onError: () => {
+      setNotification('Sorry, failed to sync whatsapp forms updates.', 'warning');
+      setSyncWhatsappFormLoad(false);
+    },
+  });
 
   const [activateForm, { loading: activateFormLoading }] = useMutation(ACTIVATE_FORM, {
     onCompleted: () => {
@@ -199,6 +229,19 @@ export const WhatsAppFormList = () => {
       </Select>
     </FormControl>
   );
+  const secondaryButton = (
+    <Button
+      variant="outlined"
+      color="primary"
+      loading={syncWhatsappFormLoad}
+      className={styles.HsmUpdates}
+      data-testid="syncWhatsappForm"
+      onClick={() => handleFormUpdates()}
+      aria-hidden="true"
+    >
+      Sync Whatsapp Form
+    </Button>
+  );
 
   let dialog = null;
   if (formId && dialogType) {
@@ -246,6 +289,7 @@ export const WhatsAppFormList = () => {
         listItem="listWhatsappForms"
         listItemName="form"
         pageLink="whatsapp-forms"
+        secondaryButton={secondaryButton}
         columnNames={columnNames}
         columns={getColumns}
         columnStyles={columnStyles}

src/graphql/mutations/WhatsAppForm.ts

@@ -89,3 +89,14 @@ export const ACTIVATE_FORM = gql`
     }
   }
 `;
+
+export const SYNC_WHATSAPP_FORM = gql`
+  mutation syncWhatsappForm {
+    syncWhatsappForm {
+      message
+      errors {
+        message
+      }
+    }
+  }
+`;

src/mocks/WhatsAppForm.tsx

@@ -1,4 +1,10 @@
-import { CREATE_FORM, UPDATE_FORM, PUBLISH_FORM, DEACTIVATE_FORM } from 'graphql/mutations/WhatsAppForm';
+import {
+  CREATE_FORM,
+  UPDATE_FORM,
+  PUBLISH_FORM,
+  DEACTIVATE_FORM,
+  SYNC_WHATSAPP_FORM,
+} from 'graphql/mutations/WhatsAppForm';
 import { GET_WHATSAPP_FORM, LIST_FORM_CATEGORIES, LIST_WHATSAPP_FORMS } from 'graphql/queries/WhatsAppForm';
 
 export const formJson = {
@@ -61,6 +67,19 @@ const whatsappFormCategories = {
   },
 };
 
+const syncWhatsappForm = {
+  request: {
+    query: SYNC_WHATSAPP_FORM,
+  },
+  result: {
+    data: {
+      syncWhatsappForm: {
+        message: 'WhatsApp Forms synced successfully',
+        errors: null,
+      },
+    },
+  },
+};
 const createdWhatsAppFormQuery = {
   request: {
     query: CREATE_FORM,
@@ -348,6 +367,41 @@ const editWhatsAppForm = {
   },
 };
 
+const syncWhatsappFormQueryWithErrors = {
+  request: {
+    query: SYNC_WHATSAPP_FORM,
+  },
+  result: {
+    data: {
+      syncWhatsappForm: {
+        whatsappForm: null,
+        errors: [
+          {
+            message: 'Something went wrong',
+          },
+        ],
+      },
+    },
+  },
+};
+
+const syncWhatsappFormError = {
+  request: {
+    query: SYNC_WHATSAPP_FORM,
+  },
+  result: {
+    data: {
+      syncWhatsappForm: {
+        whatsappForm: null,
+        errors: [
+          {
+            message: 'Something went wrong',
+          },
+        ],
+      },
+    },
+  },
+};
 export const WHATSAPP_FORM_MOCKS = [
   whatsappFormCategories,
   createdWhatsAppFormQuery,
@@ -360,3 +414,5 @@ export const WHATSAPP_FORM_MOCKS = [
   listWhatsappFormswithoutopts,
   createdWhatsAppFormQueryWithErrors,
 ];
+
+export { syncWhatsappFormQueryWithErrors, syncWhatsappForm, syncWhatsappFormError };