Add Static Banner

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: {

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 { queryByTestId } = render(
+      <ThemeProvider theme={theme}>
+        <SnackbarProvider>
+          <MockedProvider mocks={GetThisWeekDefaultMocks()} addTypename={false}>
+            <Dashboard accountListId="abc" data={data} />
+          </MockedProvider>
+        </SnackbarProvider>
+      </ThemeProvider>,
+    );
+
+    expect(queryByTestId('staticBanner')).not.toBeInTheDocument();
+  });
+});

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,7 @@ const variants = {
     },
   },
 };
+const shouldShowBanner = process.env.SHOW_BANNER === 'true';
 
 const Dashboard = ({ data, accountListId }: Props): ReactElement => {
   return (
@@ -39,6 +41,11 @@ const Dashboard = ({ data, accountListId }: Props): ReactElement => {
             exit="exit"
             variants={variants}
           >
+            {shouldShowBanner && (
+              <div data-testid="staticBanner">
+                <StaticBanner />
+              </div>
+            )}
             <Grid container spacing={3} alignItems="stretch">
               <Grid xs={12} sm={8} item>
                 <MonthlyGoal

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

@@ -0,0 +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(
+    <GqlMockedProvider<{ userOrganizationAccounts: GetUsersOrganizationsQuery }>
+      mocks={{
+        mockResponse,
+      }}
+    >
+      <StaticBanner />
+    </GqlMockedProvider>,
+  );
+
+  expect(queryByTestId('nonCruOrgReminder')).toBeInTheDocument();
+});

src/components/Shared/staticBanner/StaticBanner.tsx

@@ -0,0 +1,44 @@
+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';
+}
+
+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;
+
+  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"
+      >
+        {t('read this communication.')}
+      </Link>
+    </Alert>
+  ) : null;
+};

src/components/Shared/staticBanner/getOrganizationType.graphql

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