Add tests and add useMemo for checking the organization

src/components/Shared/staticBanner/StaticBanner.test.tsx

@@ -1,79 +1,81 @@
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { GetUsersOrganizationsQuery } from './getOrganizationType.generated';
 import { StaticBanner } from './StaticBanner';
 
-const mockResponse = {
-  userOrganizationAccounts: [
-    {
-      __typename: 'OrganizationAccount',
-      organization: {
-        __typename: 'Organization',
-        apiClass: 'OfflineOrg',
-        id: '0673b517-4f4d-4c47-965e-0757a198a8a4',
-        name: 'Cru - New Staff',
-        oauth: false,
-        organizationType: 'Non-Cru',
+const mockResponseNonCru = {
+  GetUsersOrganizations: {
+    userOrganizationAccounts: [
+      {
+        __typename: 'OrganizationAccount',
+        organization: {
+          __typename: 'Organization',
+          organizationType: 'Non-Cru',
+        },
       },
-      latestDonationDate: null,
-      lastDownloadedAt: '2023-10-25T06:14:34-07:00',
-      username: null,
-    },
-    {
-      __typename: 'OrganizationAccount',
-      organization: {
-        __typename: 'Organization',
-        apiClass: 'OfflineOrg',
-        id: '1a122b65-d98f-45c7-a2ab-c3c62da63405',
-        name: 'Campus Crusade for Christ - Egypt',
-        oauth: false,
-        organizationType: 'Non-Cru',
+      {
+        __typename: 'OrganizationAccount',
+        organization: {
+          __typename: 'Organization',
+          organizationType: 'Non-Cru',
+        },
       },
-      latestDonationDate: null,
-      lastDownloadedAt: '2023-10-25T06:14:34-07:00',
-      username: null,
-    },
-    {
-      __typename: 'OrganizationAccount',
-      organization: {
-        __typename: 'Organization',
-        apiClass: 'Siebel',
-        id: '7ab3ec4b-7108-40bf-a998-ce813d10c821',
-        name: 'Cru - United States of America',
-        oauth: false,
-        organizationType: 'Non-Cru',
+    ],
+  },
+};
+const mockResponseCru = {
+  GetUsersOrganizations: {
+    userOrganizationAccounts: [
+      {
+        __typename: 'OrganizationAccount',
+        organization: {
+          __typename: 'Organization',
+          organizationType: 'Cru',
+        },
       },
-      latestDonationDate: null,
-      lastDownloadedAt: '2023-10-25T06:14:35-07:00',
-      username: null,
-    },
-    {
-      __typename: 'OrganizationAccount',
-      organization: {
-        __typename: 'Organization',
-        apiClass: 'OfflineOrg',
-        id: 'b213e64b-7e76-4ef1-b756-075ec52b61d7',
-        name: 'Center for Bio-Ethical Reform',
-        oauth: false,
-        organizationType: 'Non-Cru',
+      {
+        __typename: 'OrganizationAccount',
+        organization: {
+          __typename: 'Organization',
+          organizationType: 'Non-Cru',
+        },
       },
-      latestDonationDate: null,
-      lastDownloadedAt: '2023-10-25T06:14:34-07:00',
-      username: null,
-    },
-  ],
+    ],
+  },
 };
 
-test('static banner displays', () => {
+test('static banner displays for user in Non-Cru org', async () => {
   const { queryByTestId } = render(
-    <GqlMockedProvider<{ userOrganizationAccounts: GetUsersOrganizationsQuery }>
+    <GqlMockedProvider<{
+      GetUsersOrganizations: GetUsersOrganizationsQuery;
+    }>
       mocks={{
-        mockResponse,
+        mockResponseNonCru,
       }}
     >
       <StaticBanner />
     </GqlMockedProvider>,
   );
 
-  expect(queryByTestId('nonCruOrgReminder')).toBeInTheDocument();
+  await waitFor(() =>
+    expect(queryByTestId('nonCruOrgReminder')).toBeInTheDocument(),
+  );
+});
+
+test('static banner does not display for user in a Cru org', async () => {
+  const { queryByTestId } = render(
+    <GqlMockedProvider<{
+      GetUsersOrganizations: GetUsersOrganizationsQuery;
+    }>
+      mocks={{
+        mockResponseCru,
+      }}
+    >
+      <StaticBanner />
+    </GqlMockedProvider>,
+  );
+
+  await waitFor(() =>
+    expect(queryByTestId('nonCruOrgReminder')).not.toBeInTheDocument(),
+  );
 });

src/components/Shared/staticBanner/StaticBanner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Alert from '@mui/material/Alert';
 import { Link } from '@mui/material';
@@ -12,21 +12,18 @@ export const StaticBanner: React.FC<StaticBannerProps> = ({
   severity = 'warning',
 }) => {
   const { t } = useTranslation();
-  let showBanner = false;
-  let non_cru_user = true;
 
   const { data, loading } = useGetUsersOrganizationsQuery();
-  data?.userOrganizationAccounts.map((org) => {
-    if (
-      org.organization.organizationType === 'Cru-International' ||
-      org.organization.organizationType === 'Cru'
-    ) {
-      non_cru_user = false;
-    }
-  });
-  showBanner = !loading && non_cru_user;
+  const nonCruUser = useMemo(() => {
+    const foundCruOrg = data?.userOrganizationAccounts.find(
+      (org) =>
+        org.organization.organizationType === 'Cru-International' ||
+        org.organization.organizationType === 'Cru',
+    );
+    return !foundCruOrg;
+  }, [data]);
 
-  return !loading && showBanner ? (
+  return !loading && nonCruUser ? (
     <Alert severity={severity}>
       {t(
         `Due to data privacy regulations and costs, Cru will no longer be able to host MPDX data for non-Cru/non-CCCI ministries. This means that MPDX will no longer be available for use outside of Cru/CCCI.  Your data in MPDX will be deleted if you don't export it from MPDX by January 31, 2024 or let us know why you might need an extension. For more information and to take action, `,

src/components/Shared/staticBanner/getOrganizationType.graphql

@@ -1,14 +1,7 @@
 query GetUsersOrganizations {
   userOrganizationAccounts {
     organization {
-      apiClass
-      id
-      name
-      oauth
       organizationType
     }
-    latestDonationDate
-    lastDownloadedAt
-    username
   }
 }