diff --git a/src/containers/Chat/ChatMessages/ChatMessages.test.tsx b/src/containers/Chat/ChatMessages/ChatMessages.test.tsx index 1a032a6ed..e5f8e119b 100644 --- a/src/containers/Chat/ChatMessages/ChatMessages.test.tsx +++ b/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(); @@ -258,6 +259,7 @@ const mocks = [ loadMoreQuery(0, 40, { id: '2', searchGroup: true }), markAsReadMock('2'), markAsReadMock('3'), + getWhatsAppManagedPhonesStatusMock, ]; export const chatMocks = mocks; diff --git a/src/containers/Chat/ChatMessages/StatusBar/StatusBar.test.tsx b/src/containers/Chat/ChatMessages/StatusBar/StatusBar.test.tsx new file mode 100644 index 000000000..8bb34b2a9 --- /dev/null +++ b/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 ( + + + + + + ); +}; + +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(); + }); +}); diff --git a/src/containers/Chat/ChatMessages/StatusBar/StatusBar.tsx b/src/containers/Chat/ChatMessages/StatusBar/StatusBar.tsx index e9c0d6101..f11dc37f4 100644 --- a/src/containers/Chat/ChatMessages/StatusBar/StatusBar.tsx +++ b/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 ( -
+
Attention! {statusMessage}
diff --git a/src/graphql/queries/WaGroups.ts b/src/graphql/queries/WaGroups.ts index 3d4b82bba..bce6e7051 100644 --- a/src/graphql/queries/WaGroups.ts +++ b/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 + } + } +`; diff --git a/src/mocks/StatusBar.ts b/src/mocks/StatusBar.ts new file mode 100644 index 000000000..3769349b2 --- /dev/null +++ b/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', + }, + ], + }, + }, +};