Added notification if maytapi phone is not active

src/containers/Chat/ChatMessages/ChatMessages.test.tsx

@@ -24,6 +24,7 @@ import { userEvent } from '@testing-library/user-event';
 import { setNotification } from 'common/notification';
 import { waGroup, waGroupcollection } from 'mocks/Groups';
 import { getContactSearchQuery } from 'mocks/Search';
+import { getWhatsAppManagedPhonesStatusMock } from 'mocks/StatusBar';
 
 vi.mock('common/notification', async (importOriginal) => {
   const mod = await importOriginal<typeof import('common/notification')>();
@@ -258,6 +259,7 @@ const mocks = [
   loadMoreQuery(0, 40, { id: '2', searchGroup: true }),
   markAsReadMock('2'),
   markAsReadMock('3'),
+  getWhatsAppManagedPhonesStatusMock,
 ];
 
 export const chatMocks = mocks;

src/containers/Chat/ChatMessages/StatusBar/StatusBar.test.tsx

@@ -0,0 +1,80 @@
+import { MemoryRouter } from 'react-router';
+import { render, screen, waitFor } from '@testing-library/react';
+import { InMemoryCache } from '@apollo/client';
+import { MockedProvider } from '@apollo/client/testing';
+import { BSPBALANCE } from 'graphql/queries/Organization';
+import {
+  getInactiveStatusMock,
+  getWhatsAppManagedPhonesStatusMock,
+  orgSuspendedMock,
+} from 'mocks/StatusBar';
+import StatusBar from './StatusBar';
+
+const cache = new InMemoryCache({
+  addTypename: false,
+});
+
+const wrapper = (bspbalance: string, mock?: any) => {
+  cache.writeQuery({
+    query: BSPBALANCE,
+    variables: { orgId: '1' },
+    data: {
+      bspbalance,
+    },
+  });
+
+  let MOCKS = [orgSuspendedMock];
+  if (mock) {
+    MOCKS = [...MOCKS, mock];
+  }
+  return (
+    <MockedProvider cache={cache} mocks={MOCKS}>
+      <MemoryRouter initialEntries={['/group/chat']}>
+        <StatusBar />
+      </MemoryRouter>
+    </MockedProvider>
+  );
+};
+
+beforeEach(() => {
+  cache.reset();
+});
+
+test('it should show error message if balance is below 1', async () => {
+  render(wrapper('{"balance":0.5}', getWhatsAppManagedPhonesStatusMock));
+
+  await waitFor(() => {
+    expect(screen.getByTestId('status-bar')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'Please recharge your Gupshup wallet immediately to continue sending messages. Users will not receive the messages that get stuck during this time.'
+      )
+    ).toBeInTheDocument();
+  });
+});
+
+test('it should show suspended message if balance is negative', async () => {
+  render(wrapper('{"balance":-1.4}', getWhatsAppManagedPhonesStatusMock));
+
+  await waitFor(() => {
+    expect(screen.getByTestId('status-bar')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'All the outgoing messages have been suspended. Please note: on recharging, the messages that were stuck will not be sent.'
+      )
+    ).toBeInTheDocument();
+  });
+});
+
+test('it should show suspended message if balance is negative', async () => {
+  render(wrapper('{"balance":14.17}', getInactiveStatusMock));
+
+  await waitFor(() => {
+    expect(screen.getByTestId('status-bar')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'One or more of your phones are not active. Please check the Maytapi console to ensure smooth message delivery.'
+      )
+    ).toBeInTheDocument();
+  });
+});

src/containers/Chat/ChatMessages/StatusBar/StatusBar.tsx

@@ -3,8 +3,11 @@ import { useQuery } from '@apollo/client';
 import { getUserSession } from 'services/AuthService';
 import { BSPBALANCE, GET_ORGANIZATION_STATUS } from 'graphql/queries/Organization';
 import styles from './StatusBar.module.css';
+import { GET_WA_MANAGED_PHONES_STATUS } from 'graphql/queries/WaGroups';
+import { useLocation } from 'react-router';
 
 const StatusBar = () => {
+  const location = useLocation();
   const variables = { organizationId: getUserSession('organizationId') };
 
   // get gupshup balance
@@ -15,6 +18,9 @@ const StatusBar = () => {
     fetchPolicy: 'cache-only',
   });
 
+  const { data } = useQuery(GET_WA_MANAGED_PHONES_STATUS);
+  const hasInactivePhone = data?.waManagedPhones?.some((phone: any) => phone.status !== 'active');
+
   if (!balanceData && !orgStatus) {
     return null;
   }
@@ -32,12 +38,15 @@ const StatusBar = () => {
     } else if (balance <= 0) {
       statusMessage =
         'All the outgoing messages have been suspended. Please note: on recharging, the messages that were stuck will not be sent.';
+    } else if (hasInactivePhone && location.pathname.includes('group')) {
+      statusMessage =
+        'One or more of your phones are not active. Please check the Maytapi console to ensure smooth message delivery.';
     }
   }
 
   if (statusMessage) {
     return (
-      <div className={styles.StatusMessage}>
+      <div data-testid="status-bar" className={styles.StatusMessage}>
         <span className={styles.StatusTitle}>Attention! </span>
         {statusMessage}
       </div>

src/graphql/queries/WaGroups.ts

@@ -181,3 +181,12 @@ export const GET_WA_GROUP = gql`
     }
   }
 `;
+
+export const GET_WA_MANAGED_PHONES_STATUS = gql`
+  query WaManagedPhones {
+    waManagedPhones {
+      status
+      phone
+    }
+  }
+`;

src/mocks/StatusBar.ts

@@ -0,0 +1,50 @@
+import { GET_ORGANIZATION_STATUS } from 'graphql/queries/Organization';
+import { GET_WA_MANAGED_PHONES_STATUS } from 'graphql/queries/WaGroups';
+
+export const orgSuspendedMock = {
+  request: {
+    query: GET_ORGANIZATION_STATUS,
+  },
+  result: {
+    data: {
+      organization: {
+        organization: {
+          isSuspended: false,
+        },
+      },
+    },
+  },
+};
+
+export const getWhatsAppManagedPhonesStatusMock = {
+  request: {
+    query: GET_WA_MANAGED_PHONES_STATUS,
+  },
+  result: {
+    data: {
+      waManagedPhones: [
+        {
+          phone: '918658048983',
+          status: 'active',
+        },
+      ],
+    },
+  },
+};
+
+export const getInactiveStatusMock = {
+  request: {
+    query: GET_WA_MANAGED_PHONES_STATUS,
+    variables: {},
+  },
+  result: {
+    data: {
+      waManagedPhones: [
+        {
+          phone: '918658048983',
+          status: 'inactive',
+        },
+      ],
+    },
+  },
+};