From e35e849d43b51621ce3b67cbf994ac75869f4005 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Mon, 23 Oct 2023 12:54:30 -0700
Subject: [PATCH 01/10] add static banner

---
 next.config.js                                |  1 +
 src/components/Dashboard/Dashboard.test.tsx   | 46 +++++++++++++++++++
 src/components/Dashboard/Dashboard.tsx        |  6 +++
 .../Shared/staticBanner/StaticBanner.tsx      | 38 +++++++++++++++
 4 files changed, 91 insertions(+)
 create mode 100644 src/components/Shared/staticBanner/StaticBanner.tsx

diff --git a/next.config.js b/next.config.js
index 21556856c3..e1c12d7156 100644
--- a/next.config.js
+++ b/next.config.js
@@ -95,6 +95,7 @@ module.exports = withPlugins([
       HS_REPORTS_SUGGESTIONS: process.env.HS_REPORTS_SUGGESTIONS,
       HS_TASKS_SUGGESTIONS: process.env.HS_TASKS_SUGGESTIONS,
       ALERT_MESSAGE: process.env.ALERT_MESSAGE,
+      SHOW_BANNER: process.env.SHOW_BANNER,
     },
     experimental: {
       modularizeImports: {
diff --git a/src/components/Dashboard/Dashboard.test.tsx b/src/components/Dashboard/Dashboard.test.tsx
index ad2e7f804d..10c03ace2a 100644
--- a/src/components/Dashboard/Dashboard.test.tsx
+++ b/src/components/Dashboard/Dashboard.test.tsx
@@ -216,3 +216,49 @@ describe('Dashboard', () => {
     ).toEqual('Committed $700');
   });
 });
+
+describe('Static Banner', () => {
+  const OLD_ENV = process.env;
+  beforeEach(() => {
+    jest.resetModules(); // Most important - it clears the cache
+    process.env = { ...OLD_ENV }; // Make a copy
+    beforeTestResizeObserver();
+  });
+
+  afterAll(() => {
+    process.env = OLD_ENV; // Restore old environment
+    afterTestResizeObserver();
+  });
+
+  it('should show the banner if the env variable is true', () => {
+    process.env.SHOW_BANNER = 'true';
+
+    const { getByTestId } = render(
+      <ThemeProvider theme={theme}>
+        <SnackbarProvider>
+          <MockedProvider mocks={GetThisWeekDefaultMocks()} addTypename={false}>
+            <Dashboard accountListId="abc" data={data} />
+          </MockedProvider>
+        </SnackbarProvider>
+      </ThemeProvider>,
+    );
+
+    expect(getByTestId('staticBanner')).toBeInTheDocument();
+  });
+
+  it('should NOT show the banner if the env variable is false', () => {
+    process.env.SHOW_BANNER = 'false';
+
+    const { getByTestId } = render(
+      <ThemeProvider theme={theme}>
+        <SnackbarProvider>
+          <MockedProvider mocks={GetThisWeekDefaultMocks()} addTypename={false}>
+            <Dashboard accountListId="abc" data={data} />
+          </MockedProvider>
+        </SnackbarProvider>
+      </ThemeProvider>,
+    );
+
+    expect(getByTestId('staticBanner')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index b33fa9d43e..55db51c1aa 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -7,6 +7,7 @@ import MonthlyGoal from './MonthlyGoal/MonthlyGoal';
 import Balance from './Balance';
 import DonationHistories from './DonationHistories';
 import ThisWeek from './ThisWeek';
+import { StaticBanner } from '../Shared/staticBanner/StaticBanner';
 
 interface Props {
   data: GetDashboardQuery;
@@ -26,6 +27,10 @@ const variants = {
     },
   },
 };
+const checkShowBanner = function () {
+  return process.env.SHOW_BANNER;
+};
+//const showBanner = process.env.SHOW_BANNER;
 
 const Dashboard = ({ data, accountListId }: Props): ReactElement => {
   return (
@@ -39,6 +44,7 @@ const Dashboard = ({ data, accountListId }: Props): ReactElement => {
             exit="exit"
             variants={variants}
           >
+            {checkShowBanner() === 'true' ? <StaticBanner /> : null}
             <Grid container spacing={3} alignItems="stretch">
               <Grid xs={12} sm={8} item>
                 <MonthlyGoal
diff --git a/src/components/Shared/staticBanner/StaticBanner.tsx b/src/components/Shared/staticBanner/StaticBanner.tsx
new file mode 100644
index 0000000000..adfab4a824
--- /dev/null
+++ b/src/components/Shared/staticBanner/StaticBanner.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Alert from '@mui/material/Alert';
+import { Link } from '@mui/material';
+
+interface StaticBannerProps {
+  severity?: 'error' | 'info' | 'success' | 'warning';
+}
+
+export const StaticBanner: React.FC<StaticBannerProps> = ({
+  severity = 'warning',
+}) => {
+  const { t } = useTranslation();
+  let nonCruOrg = false;
+
+  const checkIfCruOrg = () => {
+    return new Promise((resolve) => {
+      resolve((nonCruOrg = true));
+    });
+  };
+  checkIfCruOrg();
+
+  return nonCruOrg ? (
+    <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, ",
+      )}
+      <Link
+        data-testid="staticBanner"
+        href="https://docs.google.com/document/d/18TnQGmshg71l3J9Gd-4ltjIjhK2PLtuG_Vc94bt6xzE/"
+        target="_blank"
+        rel="noreferrer"
+      >
+        {t('read this communication.')}
+      </Link>
+    </Alert>
+  ) : null;
+};

From 92c0b20cddde7b5d478d1fad4047186339f72163 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Tue, 24 Oct 2023 13:27:50 -0700
Subject: [PATCH 02/10] Fix test and add useeffect

---
 src/components/Dashboard/Dashboard.test.tsx   |  4 ++--
 src/components/Dashboard/Dashboard.tsx        |  7 ++----
 .../Shared/staticBanner/StaticBanner.test.tsx |  8 +++++++
 .../Shared/staticBanner/StaticBanner.tsx      | 23 ++++++++++---------
 4 files changed, 24 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Shared/staticBanner/StaticBanner.test.tsx

diff --git a/src/components/Dashboard/Dashboard.test.tsx b/src/components/Dashboard/Dashboard.test.tsx
index 10c03ace2a..0e09beae7e 100644
--- a/src/components/Dashboard/Dashboard.test.tsx
+++ b/src/components/Dashboard/Dashboard.test.tsx
@@ -249,7 +249,7 @@ describe('Static Banner', () => {
   it('should NOT show the banner if the env variable is false', () => {
     process.env.SHOW_BANNER = 'false';
 
-    const { getByTestId } = render(
+    const { queryByTestId } = render(
       <ThemeProvider theme={theme}>
         <SnackbarProvider>
           <MockedProvider mocks={GetThisWeekDefaultMocks()} addTypename={false}>
@@ -259,6 +259,6 @@ describe('Static Banner', () => {
       </ThemeProvider>,
     );
 
-    expect(getByTestId('staticBanner')).not.toBeInTheDocument();
+    expect(queryByTestId('staticBanner')).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index 55db51c1aa..1b448539bc 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -27,10 +27,7 @@ const variants = {
     },
   },
 };
-const checkShowBanner = function () {
-  return process.env.SHOW_BANNER;
-};
-//const showBanner = process.env.SHOW_BANNER;
+const shouldShowBanner = process.env.SHOW_BANNER === 'true';
 
 const Dashboard = ({ data, accountListId }: Props): ReactElement => {
   return (
@@ -44,7 +41,7 @@ const Dashboard = ({ data, accountListId }: Props): ReactElement => {
             exit="exit"
             variants={variants}
           >
-            {checkShowBanner() === 'true' ? <StaticBanner /> : null}
+            {shouldShowBanner && <StaticBanner />}
             <Grid container spacing={3} alignItems="stretch">
               <Grid xs={12} sm={8} item>
                 <MonthlyGoal
diff --git a/src/components/Shared/staticBanner/StaticBanner.test.tsx b/src/components/Shared/staticBanner/StaticBanner.test.tsx
new file mode 100644
index 0000000000..bba43f9b4f
--- /dev/null
+++ b/src/components/Shared/staticBanner/StaticBanner.test.tsx
@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import { StaticBanner } from './StaticBanner';
+
+test('static banner displays', () => {
+  const { queryByTestId } = render(<StaticBanner />);
+
+  expect(queryByTestId('staticBanner')).toBeInTheDocument();
+});
diff --git a/src/components/Shared/staticBanner/StaticBanner.tsx b/src/components/Shared/staticBanner/StaticBanner.tsx
index adfab4a824..688afdd7e3 100644
--- a/src/components/Shared/staticBanner/StaticBanner.tsx
+++ b/src/components/Shared/staticBanner/StaticBanner.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Alert from '@mui/material/Alert';
 import { Link } from '@mui/material';
@@ -11,22 +11,23 @@ export const StaticBanner: React.FC<StaticBannerProps> = ({
   severity = 'warning',
 }) => {
   const { t } = useTranslation();
-  let nonCruOrg = false;
+  const [nonCruOrg, setNonCruOrg] = useState(false);
 
-  const checkIfCruOrg = () => {
-    return new Promise((resolve) => {
-      resolve((nonCruOrg = true));
-    });
-  };
-  checkIfCruOrg();
+  useEffect(() => {
+    const checkIfCruOrg = () => {
+      return new Promise((resolve) => {
+        resolve(setNonCruOrg(true));
+      });
+    };
+    checkIfCruOrg();
+  }, []);
 
   return nonCruOrg ? (
-    <Alert severity={severity}>
+    <Alert severity={severity} data-testid="staticBanner">
       {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, ",
+        `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, `,
       )}
       <Link
-        data-testid="staticBanner"
         href="https://docs.google.com/document/d/18TnQGmshg71l3J9Gd-4ltjIjhK2PLtuG_Vc94bt6xzE/"
         target="_blank"
         rel="noreferrer"

From 848699a272adcd1f179cc536d50a974e2eefb773 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Tue, 24 Oct 2023 13:27:50 -0700
Subject: [PATCH 03/10] organizations type graphql

---
 src/components/Dashboard/Dashboard.test.tsx   |  4 +--
 src/components/Dashboard/Dashboard.tsx        |  7 ++---
 .../Shared/staticBanner/StaticBanner.test.tsx |  8 ++++++
 .../Shared/staticBanner/StaticBanner.tsx      | 27 +++++++++++--------
 .../staticBanner/getOrganizationType.graphql  | 14 ++++++++++
 5 files changed, 42 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Shared/staticBanner/StaticBanner.test.tsx
 create mode 100644 src/components/Shared/staticBanner/getOrganizationType.graphql

diff --git a/src/components/Dashboard/Dashboard.test.tsx b/src/components/Dashboard/Dashboard.test.tsx
index 10c03ace2a..0e09beae7e 100644
--- a/src/components/Dashboard/Dashboard.test.tsx
+++ b/src/components/Dashboard/Dashboard.test.tsx
@@ -249,7 +249,7 @@ describe('Static Banner', () => {
   it('should NOT show the banner if the env variable is false', () => {
     process.env.SHOW_BANNER = 'false';
 
-    const { getByTestId } = render(
+    const { queryByTestId } = render(
       <ThemeProvider theme={theme}>
         <SnackbarProvider>
           <MockedProvider mocks={GetThisWeekDefaultMocks()} addTypename={false}>
@@ -259,6 +259,6 @@ describe('Static Banner', () => {
       </ThemeProvider>,
     );
 
-    expect(getByTestId('staticBanner')).not.toBeInTheDocument();
+    expect(queryByTestId('staticBanner')).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index 55db51c1aa..cda54e598f 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -27,10 +27,7 @@ const variants = {
     },
   },
 };
-const checkShowBanner = function () {
-  return process.env.SHOW_BANNER;
-};
-//const showBanner = process.env.SHOW_BANNER;
+const shouldShowBanner = process.env.SHOW_BANNER === 'true';
 
 const Dashboard = ({ data, accountListId }: Props): ReactElement => {
   return (
@@ -44,7 +41,7 @@ const Dashboard = ({ data, accountListId }: Props): ReactElement => {
             exit="exit"
             variants={variants}
           >
-            {checkShowBanner() === 'true' ? <StaticBanner /> : null}
+            {shouldShowBanner && <StaticBanner data-testid="staticBanner" />}
             <Grid container spacing={3} alignItems="stretch">
               <Grid xs={12} sm={8} item>
                 <MonthlyGoal
diff --git a/src/components/Shared/staticBanner/StaticBanner.test.tsx b/src/components/Shared/staticBanner/StaticBanner.test.tsx
new file mode 100644
index 0000000000..aafebf4711
--- /dev/null
+++ b/src/components/Shared/staticBanner/StaticBanner.test.tsx
@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import { StaticBanner } from './StaticBanner';
+
+test('static banner displays', () => {
+  const { queryByTestId } = render(<StaticBanner />);
+
+  expect(queryByTestId('nonCruOrgReminder')).toBeInTheDocument();
+});
diff --git a/src/components/Shared/staticBanner/StaticBanner.tsx b/src/components/Shared/staticBanner/StaticBanner.tsx
index adfab4a824..49e895358d 100644
--- a/src/components/Shared/staticBanner/StaticBanner.tsx
+++ b/src/components/Shared/staticBanner/StaticBanner.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Alert from '@mui/material/Alert';
 import { Link } from '@mui/material';
+import { useGetUsersOrganizationsQuery } from './getOrganizationType.generated';
 
 interface StaticBannerProps {
   severity?: 'error' | 'info' | 'success' | 'warning';
@@ -11,22 +12,26 @@ export const StaticBanner: React.FC<StaticBannerProps> = ({
   severity = 'warning',
 }) => {
   const { t } = useTranslation();
-  let nonCruOrg = false;
+  let showBanner = false;
+  let includesCruOrg = true;
 
-  const checkIfCruOrg = () => {
-    return new Promise((resolve) => {
-      resolve((nonCruOrg = true));
-    });
-  };
-  checkIfCruOrg();
+  const { data } = useGetUsersOrganizationsQuery();
+  data?.userOrganizationAccounts.map((org) => {
+    if (
+      org.organization.organizationType === 'Cru-International' ||
+      org.organization.organizationType === 'Cru'
+    ) {
+      includesCruOrg = true;
+    }
+  });
+  showBanner = includesCruOrg ? false : true;
 
-  return nonCruOrg ? (
-    <Alert severity={severity}>
+  return showBanner ? (
+    <Alert severity={severity} data-testid="nonCruOrgReminder">
       {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, ",
+        `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, `,
       )}
       <Link
-        data-testid="staticBanner"
         href="https://docs.google.com/document/d/18TnQGmshg71l3J9Gd-4ltjIjhK2PLtuG_Vc94bt6xzE/"
         target="_blank"
         rel="noreferrer"
diff --git a/src/components/Shared/staticBanner/getOrganizationType.graphql b/src/components/Shared/staticBanner/getOrganizationType.graphql
new file mode 100644
index 0000000000..b6948d62b0
--- /dev/null
+++ b/src/components/Shared/staticBanner/getOrganizationType.graphql
@@ -0,0 +1,14 @@
+query GetUsersOrganizations {
+  userOrganizationAccounts {
+    organization {
+      apiClass
+      id
+      name
+      oauth
+      organizationType
+    }
+    latestDonationDate
+    lastDownloadedAt
+    username
+  }
+}

From ed4e90a9ee676b51f2968a98aa1c22aec6459b4d Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Fri, 27 Oct 2023 13:31:36 -0700
Subject: [PATCH 04/10] Add test data mocks and use loading before showing
 banner

---
 src/components/Dashboard/Dashboard.tsx        |  6 +-
 .../Shared/staticBanner/StaticBanner.test.tsx | 73 ++++++++++++++++++-
 .../Shared/staticBanner/StaticBanner.tsx      | 13 ++--
 3 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index cda54e598f..d6c8e04b56 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -41,7 +41,11 @@ const Dashboard = ({ data, accountListId }: Props): ReactElement => {
             exit="exit"
             variants={variants}
           >
-            {shouldShowBanner && <StaticBanner data-testid="staticBanner" />}
+            {shouldShowBanner && (
+              <div data-testid="staticBanner">
+                <StaticBanner />
+              </div>
+            )}
             <Grid container spacing={3} alignItems="stretch">
               <Grid xs={12} sm={8} item>
                 <MonthlyGoal
diff --git a/src/components/Shared/staticBanner/StaticBanner.test.tsx b/src/components/Shared/staticBanner/StaticBanner.test.tsx
index aafebf4711..8ff6191254 100644
--- a/src/components/Shared/staticBanner/StaticBanner.test.tsx
+++ b/src/components/Shared/staticBanner/StaticBanner.test.tsx
@@ -1,8 +1,79 @@
 import { render } 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',
+      },
+      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',
+      },
+      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',
+      },
+      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',
+      },
+      latestDonationDate: null,
+      lastDownloadedAt: '2023-10-25T06:14:34-07:00',
+      username: null,
+    },
+  ],
+};
+
 test('static banner displays', () => {
-  const { queryByTestId } = render(<StaticBanner />);
+  const { queryByTestId } = render(
+    <GqlMockedProvider<{ userOrganizationAccounts: GetUsersOrganizationsQuery }>
+      mocks={{
+        mockResponse,
+      }}
+    >
+      <StaticBanner />
+    </GqlMockedProvider>,
+  );
 
   expect(queryByTestId('nonCruOrgReminder')).toBeInTheDocument();
 });
diff --git a/src/components/Shared/staticBanner/StaticBanner.tsx b/src/components/Shared/staticBanner/StaticBanner.tsx
index 49e895358d..6c56144fea 100644
--- a/src/components/Shared/staticBanner/StaticBanner.tsx
+++ b/src/components/Shared/staticBanner/StaticBanner.tsx
@@ -13,25 +13,26 @@ export const StaticBanner: React.FC<StaticBannerProps> = ({
 }) => {
   const { t } = useTranslation();
   let showBanner = false;
-  let includesCruOrg = true;
+  let non_cru_user = true;
 
-  const { data } = useGetUsersOrganizationsQuery();
+  const { data, loading } = useGetUsersOrganizationsQuery();
   data?.userOrganizationAccounts.map((org) => {
     if (
       org.organization.organizationType === 'Cru-International' ||
       org.organization.organizationType === 'Cru'
     ) {
-      includesCruOrg = true;
+      non_cru_user = false;
     }
   });
-  showBanner = includesCruOrg ? false : true;
+  showBanner = !loading && non_cru_user;
 
-  return showBanner ? (
-    <Alert severity={severity} data-testid="nonCruOrgReminder">
+  return !loading && showBanner ? (
+    <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, `,
       )}
       <Link
+        data-testid="nonCruOrgReminder"
         href="https://docs.google.com/document/d/18TnQGmshg71l3J9Gd-4ltjIjhK2PLtuG_Vc94bt6xzE/"
         target="_blank"
         rel="noreferrer"

From 78cb0f03e88253318e2b8b21470f323f71e7fd30 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Tue, 31 Oct 2023 11:57:32 -0700
Subject: [PATCH 05/10] Add tests and add useMemo for checking the organization

---
 .../Shared/staticBanner/StaticBanner.test.tsx | 122 +++++++++---------
 .../Shared/staticBanner/StaticBanner.tsx      |  23 ++--
 .../staticBanner/getOrganizationType.graphql  |   7 -
 3 files changed, 72 insertions(+), 80 deletions(-)

diff --git a/src/components/Shared/staticBanner/StaticBanner.test.tsx b/src/components/Shared/staticBanner/StaticBanner.test.tsx
index 8ff6191254..283a27110a 100644
--- a/src/components/Shared/staticBanner/StaticBanner.test.tsx
+++ b/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(),
+  );
 });
diff --git a/src/components/Shared/staticBanner/StaticBanner.tsx b/src/components/Shared/staticBanner/StaticBanner.tsx
index 6c56144fea..65d2f1e34c 100644
--- a/src/components/Shared/staticBanner/StaticBanner.tsx
+++ b/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, `,
diff --git a/src/components/Shared/staticBanner/getOrganizationType.graphql b/src/components/Shared/staticBanner/getOrganizationType.graphql
index b6948d62b0..e72dea52f5 100644
--- a/src/components/Shared/staticBanner/getOrganizationType.graphql
+++ b/src/components/Shared/staticBanner/getOrganizationType.graphql
@@ -1,14 +1,7 @@
 query GetUsersOrganizations {
   userOrganizationAccounts {
     organization {
-      apiClass
-      id
-      name
-      oauth
       organizationType
     }
-    latestDonationDate
-    lastDownloadedAt
-    username
   }
 }

From 4a91583af92b30e7e932b80be71b4607b76330f9 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Thu, 2 Nov 2023 13:51:12 -0700
Subject: [PATCH 06/10] Add SHOW_BANNER env to the readme

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index c7dcebddae..afe5e506f7 100644
--- a/README.md
+++ b/README.md
@@ -60,6 +60,7 @@ Note: there is a test account you can use. Get this from another developer if yo
 - `HS_HOME_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the dashboard page
 - `HS_REPORTS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the reports pages
 - `HS_TASKS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the tasks page
+- `SHOW_BANNER` - Display a hard-coded banner on the Dashboard. Set to `true` or `false`
 
 #### Auth provider
 

From 1ed981b83bfe60b9f76cf945b871b833b71f524b Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Thu, 2 Nov 2023 13:51:55 -0700
Subject: [PATCH 07/10] Update static banner warning message text

---
 src/components/Shared/staticBanner/StaticBanner.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Shared/staticBanner/StaticBanner.tsx b/src/components/Shared/staticBanner/StaticBanner.tsx
index 65d2f1e34c..9991309836 100644
--- a/src/components/Shared/staticBanner/StaticBanner.tsx
+++ b/src/components/Shared/staticBanner/StaticBanner.tsx
@@ -26,7 +26,15 @@ export const StaticBanner: React.FC<StaticBannerProps> = ({
   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, `,
+        `Due to data privacy regulations and costs, Cru will no longer be able to host MPDX data for non-Cru/non-CCCI ministries. `,
+      )}
+      <b>
+        {t(
+          `Your data in MPDX will be deleted if you don’t export from MPDX by January 31, 2024,`,
+        )}
+      </b>
+      {t(
+        ` or let us know why you might need an extension. For more information and to take action, read `,
       )}
       <Link
         data-testid="nonCruOrgReminder"
@@ -34,7 +42,7 @@ export const StaticBanner: React.FC<StaticBannerProps> = ({
         target="_blank"
         rel="noreferrer"
       >
-        {t('read this communication.')}
+        {t('this communication.')}
       </Link>
     </Alert>
   ) : null;

From 17d3998401447e9c9b9a9925606d950deb0f5090 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Fri, 3 Nov 2023 09:48:25 -0700
Subject: [PATCH 08/10] Move shouldShowBanner inside component

---
 src/components/Dashboard/Dashboard.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index d6c8e04b56..51ff7ddb38 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -27,9 +27,10 @@ const variants = {
     },
   },
 };
-const shouldShowBanner = process.env.SHOW_BANNER === 'true';
 
 const Dashboard = ({ data, accountListId }: Props): ReactElement => {
+  const shouldShowBanner = process.env.SHOW_BANNER === 'true';
+
   return (
     <>
       <Welcome firstName={data.user.firstName ?? undefined} />
@@ -41,11 +42,7 @@ const Dashboard = ({ data, accountListId }: Props): ReactElement => {
             exit="exit"
             variants={variants}
           >
-            {shouldShowBanner && (
-              <div data-testid="staticBanner">
-                <StaticBanner />
-              </div>
-            )}
+            {shouldShowBanner && <StaticBanner data-testid="staticBanner" />}
             <Grid container spacing={3} alignItems="stretch">
               <Grid xs={12} sm={8} item>
                 <MonthlyGoal

From 21adbe47eb097f777533bcef5e7b261a9aef3220 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Wed, 8 Nov 2023 10:16:43 -0800
Subject: [PATCH 09/10] Refactor tests for static banner and move process.env
 out of component

---
 pages/accountLists/[accountListId].page.tsx   |  7 ++-
 src/components/Dashboard/Dashboard.test.tsx   | 24 +++++----
 src/components/Dashboard/Dashboard.tsx        | 11 ++--
 .../Shared/staticBanner/StaticBanner.tsx      | 50 ++++++++++---------
 4 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/pages/accountLists/[accountListId].page.tsx b/pages/accountLists/[accountListId].page.tsx
index 0ac9535dd8..7d5a2c53c9 100644
--- a/pages/accountLists/[accountListId].page.tsx
+++ b/pages/accountLists/[accountListId].page.tsx
@@ -29,6 +29,7 @@ const AccountListIdPage = ({
   const { openTaskModal } = useTaskModal();
   const [selectedMenuItem, setSelectedMenuItem] = useState(-1);
   const [dialogOpen, setDialogOpen] = useState(false);
+  const shouldShowBanner = process.env.SHOW_BANNER === 'true';
 
   useEffect(() => {
     suggestArticles('HS_HOME_SUGGESTIONS');
@@ -65,7 +66,11 @@ const AccountListIdPage = ({
           {appName} | {data.accountList.name}
         </title>
       </Head>
-      <Dashboard data={data} accountListId={accountListId} />
+      <Dashboard
+        data={data}
+        accountListId={accountListId}
+        shouldShowBanner={shouldShowBanner}
+      />
 
       {modal && renderDialog(selectedMenuItem, dialogOpen, setDialogOpen)}
     </>
diff --git a/src/components/Dashboard/Dashboard.test.tsx b/src/components/Dashboard/Dashboard.test.tsx
index 0e09beae7e..a4f9439343 100644
--- a/src/components/Dashboard/Dashboard.test.tsx
+++ b/src/components/Dashboard/Dashboard.test.tsx
@@ -218,26 +218,26 @@ describe('Dashboard', () => {
 });
 
 describe('Static Banner', () => {
-  const OLD_ENV = process.env;
   beforeEach(() => {
-    jest.resetModules(); // Most important - it clears the cache
-    process.env = { ...OLD_ENV }; // Make a copy
     beforeTestResizeObserver();
   });
 
   afterAll(() => {
-    process.env = OLD_ENV; // Restore old environment
     afterTestResizeObserver();
   });
 
-  it('should show the banner if the env variable is true', () => {
-    process.env.SHOW_BANNER = 'true';
+  it('should show the banner if the shouldShowBanner prop is true', () => {
+    const shouldShowBanner = true;
 
     const { getByTestId } = render(
       <ThemeProvider theme={theme}>
         <SnackbarProvider>
           <MockedProvider mocks={GetThisWeekDefaultMocks()} addTypename={false}>
-            <Dashboard accountListId="abc" data={data} />
+            <Dashboard
+              accountListId="abc"
+              data={data}
+              shouldShowBanner={shouldShowBanner}
+            />
           </MockedProvider>
         </SnackbarProvider>
       </ThemeProvider>,
@@ -246,14 +246,18 @@ describe('Static Banner', () => {
     expect(getByTestId('staticBanner')).toBeInTheDocument();
   });
 
-  it('should NOT show the banner if the env variable is false', () => {
-    process.env.SHOW_BANNER = 'false';
+  it('should NOT show the banner if the shouldShowBanner prop is false', () => {
+    const shouldShowBanner = false;
 
     const { queryByTestId } = render(
       <ThemeProvider theme={theme}>
         <SnackbarProvider>
           <MockedProvider mocks={GetThisWeekDefaultMocks()} addTypename={false}>
-            <Dashboard accountListId="abc" data={data} />
+            <Dashboard
+              accountListId="abc"
+              data={data}
+              shouldShowBanner={shouldShowBanner}
+            />
           </MockedProvider>
         </SnackbarProvider>
       </ThemeProvider>,
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index 51ff7ddb38..47fe509944 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -12,6 +12,7 @@ import { StaticBanner } from '../Shared/staticBanner/StaticBanner';
 interface Props {
   data: GetDashboardQuery;
   accountListId: string;
+  shouldShowBanner?: boolean;
 }
 
 const variants = {
@@ -28,9 +29,11 @@ const variants = {
   },
 };
 
-const Dashboard = ({ data, accountListId }: Props): ReactElement => {
-  const shouldShowBanner = process.env.SHOW_BANNER === 'true';
-
+const Dashboard = ({
+  data,
+  accountListId,
+  shouldShowBanner = false,
+}: Props): ReactElement => {
   return (
     <>
       <Welcome firstName={data.user.firstName ?? undefined} />
@@ -42,7 +45,7 @@ const Dashboard = ({ data, accountListId }: Props): ReactElement => {
             exit="exit"
             variants={variants}
           >
-            {shouldShowBanner && <StaticBanner data-testid="staticBanner" />}
+            {shouldShowBanner && <StaticBanner />}
             <Grid container spacing={3} alignItems="stretch">
               <Grid xs={12} sm={8} item>
                 <MonthlyGoal
diff --git a/src/components/Shared/staticBanner/StaticBanner.tsx b/src/components/Shared/staticBanner/StaticBanner.tsx
index 9991309836..6c408f08ff 100644
--- a/src/components/Shared/staticBanner/StaticBanner.tsx
+++ b/src/components/Shared/staticBanner/StaticBanner.tsx
@@ -23,27 +23,31 @@ export const StaticBanner: React.FC<StaticBannerProps> = ({
     return !foundCruOrg;
   }, [data]);
 
-  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. `,
-      )}
-      <b>
-        {t(
-          `Your data in MPDX will be deleted if you don’t export from MPDX by January 31, 2024,`,
-        )}
-      </b>
-      {t(
-        ` or let us know why you might need an extension. For more information and to take action, read `,
-      )}
-      <Link
-        data-testid="nonCruOrgReminder"
-        href="https://docs.google.com/document/d/18TnQGmshg71l3J9Gd-4ltjIjhK2PLtuG_Vc94bt6xzE/"
-        target="_blank"
-        rel="noreferrer"
-      >
-        {t('this communication.')}
-      </Link>
-    </Alert>
-  ) : null;
+  return (
+    <div data-testid="staticBanner">
+      {!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. `,
+          )}
+          <b>
+            {t(
+              `Your data in MPDX will be deleted if you don’t export from MPDX by January 31, 2024,`,
+            )}
+          </b>
+          {t(
+            ` or let us know why you might need an extension. For more information and to take action, read `,
+          )}
+          <Link
+            data-testid="nonCruOrgReminder"
+            href="https://docs.google.com/document/d/18TnQGmshg71l3J9Gd-4ltjIjhK2PLtuG_Vc94bt6xzE/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('this communication.')}
+          </Link>
+        </Alert>
+      ) : null}
+    </div>
+  );
 };

From a52647a39610e288d2b0deeaf0fc42ae5675a385 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Wed, 8 Nov 2023 13:35:40 -0800
Subject: [PATCH 10/10] Simplify tests

---
 src/components/Dashboard/Dashboard.test.tsx   | 32 ++++++++-----------
 .../Shared/staticBanner/StaticBanner.test.tsx |  8 -----
 .../Shared/staticBanner/StaticBanner.tsx      |  2 +-
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.test.tsx b/src/components/Dashboard/Dashboard.test.tsx
index a4f9439343..85a0651ecb 100644
--- a/src/components/Dashboard/Dashboard.test.tsx
+++ b/src/components/Dashboard/Dashboard.test.tsx
@@ -231,15 +231,13 @@ describe('Static Banner', () => {
 
     const { getByTestId } = render(
       <ThemeProvider theme={theme}>
-        <SnackbarProvider>
-          <MockedProvider mocks={GetThisWeekDefaultMocks()} addTypename={false}>
-            <Dashboard
-              accountListId="abc"
-              data={data}
-              shouldShowBanner={shouldShowBanner}
-            />
-          </MockedProvider>
-        </SnackbarProvider>
+        <MockedProvider>
+          <Dashboard
+            accountListId="abc"
+            data={data}
+            shouldShowBanner={shouldShowBanner}
+          />
+        </MockedProvider>
       </ThemeProvider>,
     );
 
@@ -251,15 +249,13 @@ describe('Static Banner', () => {
 
     const { queryByTestId } = render(
       <ThemeProvider theme={theme}>
-        <SnackbarProvider>
-          <MockedProvider mocks={GetThisWeekDefaultMocks()} addTypename={false}>
-            <Dashboard
-              accountListId="abc"
-              data={data}
-              shouldShowBanner={shouldShowBanner}
-            />
-          </MockedProvider>
-        </SnackbarProvider>
+        <MockedProvider>
+          <Dashboard
+            accountListId="abc"
+            data={data}
+            shouldShowBanner={shouldShowBanner}
+          />
+        </MockedProvider>
       </ThemeProvider>,
     );
 
diff --git a/src/components/Shared/staticBanner/StaticBanner.test.tsx b/src/components/Shared/staticBanner/StaticBanner.test.tsx
index 283a27110a..4505b3af6b 100644
--- a/src/components/Shared/staticBanner/StaticBanner.test.tsx
+++ b/src/components/Shared/staticBanner/StaticBanner.test.tsx
@@ -7,16 +7,12 @@ const mockResponseNonCru = {
   GetUsersOrganizations: {
     userOrganizationAccounts: [
       {
-        __typename: 'OrganizationAccount',
         organization: {
-          __typename: 'Organization',
           organizationType: 'Non-Cru',
         },
       },
       {
-        __typename: 'OrganizationAccount',
         organization: {
-          __typename: 'Organization',
           organizationType: 'Non-Cru',
         },
       },
@@ -27,16 +23,12 @@ const mockResponseCru = {
   GetUsersOrganizations: {
     userOrganizationAccounts: [
       {
-        __typename: 'OrganizationAccount',
         organization: {
-          __typename: 'Organization',
           organizationType: 'Cru',
         },
       },
       {
-        __typename: 'OrganizationAccount',
         organization: {
-          __typename: 'Organization',
           organizationType: 'Non-Cru',
         },
       },
diff --git a/src/components/Shared/staticBanner/StaticBanner.tsx b/src/components/Shared/staticBanner/StaticBanner.tsx
index 6c408f08ff..c5e21a4400 100644
--- a/src/components/Shared/staticBanner/StaticBanner.tsx
+++ b/src/components/Shared/staticBanner/StaticBanner.tsx
@@ -15,7 +15,7 @@ export const StaticBanner: React.FC<StaticBannerProps> = ({
 
   const { data, loading } = useGetUsersOrganizationsQuery();
   const nonCruUser = useMemo(() => {
-    const foundCruOrg = data?.userOrganizationAccounts.find(
+    const foundCruOrg = data?.userOrganizationAccounts.some(
       (org) =>
         org.organization.organizationType === 'Cru-International' ||
         org.organization.organizationType === 'Cru',