Preferences notifications

pages/accountLists/[accountListId]/settings/notifications.page.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { NotificationsTable } from 'src/components/Settings/notifications/NotificationsTable';
+import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { SettingsWrapper } from './wrapper';
+
+const Notifications: React.FC = () => {
+  const { t } = useTranslation();
+  const { appName } = useGetAppSettings();
+
+  return (
+    <SettingsWrapper
+      pageTitle={t('Notifications')}
+      pageHeading={t('Notifications')}
+    >
+      <Box component="section" marginTop={3}>
+        <p>
+          {t(
+            `Based on an analysis of a partner's giving history, {{appName}} can
+          notify you of events that you will probably want to follow up on. The
+          detection logic is based on a set of rules that are right most of the
+          time, but you will still want to verify an event manually before
+          contacting the partner.`,
+            { appName },
+          )}
+        </p>
+      </Box>
+      <Box component="section" marginTop={1}>
+        <p>
+          {t(
+            `For each event {{appName}} can notify you via email and also create a task
+          entry reminding you to do something about it. The options below allow
+          you to control that behavior.`,
+            { appName },
+          )}
+        </p>
+      </Box>
+      <NotificationsTable />
+    </SettingsWrapper>
+  );
+};
+
+export default Notifications;

src/components/Settings/integrations/Organization/OrganizationAccordion.test.tsx

@@ -12,7 +12,7 @@ import theme from '../../../../theme';
 import { OrganizationAccordion } from './OrganizationAccordion';
 import {
   GetOrganizationsQuery,
-  GetUsersOrganizationsQuery,
+  GetUsersOrganizationsAccountsQuery,
 } from './Organizations.generated';
 
 jest.mock('next-auth/react');
@@ -64,7 +64,7 @@ const GetOrganizationsMock: Pick<
   },
 ];
 
-const GetUsersOrganizationsMock: Array<
+const GetUsersOrganizationsAccountsMock: Array<
   Pick<
     Types.OrganizationAccount,
     'latestDonationDate' | 'lastDownloadedAt' | 'username' | 'id'
@@ -93,8 +93,8 @@ const standardMocks = {
   GetOrganizations: {
     organizations: GetOrganizationsMock,
   },
-  GetUsersOrganizations: {
-    userOrganizationAccounts: GetUsersOrganizationsMock,
+  GetUsersOrganizationsAccounts: {
+    userOrganizationAccounts: GetUsersOrganizationsAccountsMock,
   },
 };
 
@@ -140,13 +140,13 @@ describe('OrganizationAccordion', () => {
         <Components>
           <GqlMockedProvider<{
             GetOrganizations: GetOrganizationsQuery;
-            GetUsersOrganizations: GetUsersOrganizationsQuery;
+            GetUsersOrganizationsAccounts: GetUsersOrganizationsAccountsQuery;
           }>
             mocks={{
               GetOrganizations: {
                 organizations: [],
               },
-              GetUsersOrganizations: {
+              GetUsersOrganizationsAccounts: {
                 userOrganizationAccounts: [],
               },
             }}
@@ -180,7 +180,7 @@ describe('OrganizationAccordion', () => {
         <Components>
           <GqlMockedProvider<{
             GetOrganizations: GetOrganizationsQuery;
-            GetUsersOrganizations: GetUsersOrganizationsQuery;
+            GetUsersOrganizationsAccounts: GetUsersOrganizationsAccountsQuery;
           }>
             mocks={mocks}
           >
@@ -198,7 +198,7 @@ describe('OrganizationAccordion', () => {
 
       await waitFor(() => {
         expect(
-          getByText(GetUsersOrganizationsMock[0].organization.name),
+          getByText(GetUsersOrganizationsAccountsMock[0].organization.name),
         ).toBeInTheDocument();
 
         expect(getByText('Last Updated')).toBeInTheDocument();
@@ -219,13 +219,13 @@ describe('OrganizationAccordion', () => {
 
     it('should render Ministry Account Organization', async () => {
       const mutationSpy = jest.fn();
-      mocks.GetUsersOrganizations.userOrganizationAccounts[0].organization.apiClass =
+      mocks.GetUsersOrganizationsAccounts.userOrganizationAccounts[0].organization.apiClass =
         'Siebel';
       const { getByText, queryByText } = render(
         <Components>
           <GqlMockedProvider<{
             GetOrganizations: GetOrganizationsQuery;
-            GetUsersOrganizations: GetUsersOrganizationsQuery;
+            GetUsersOrganizationsAccounts: GetUsersOrganizationsAccountsQuery;
           }>
             mocks={mocks}
             onCall={mutationSpy}
@@ -261,19 +261,19 @@ describe('OrganizationAccordion', () => {
         'SyncOrganizationAccount',
       );
       expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({
-        id: mocks.GetUsersOrganizations.userOrganizationAccounts[0].id,
+        id: mocks.GetUsersOrganizationsAccounts.userOrganizationAccounts[0].id,
       });
     });
 
     it('should render Login Organization', async () => {
       const mutationSpy = jest.fn();
-      mocks.GetUsersOrganizations.userOrganizationAccounts[0].organization.apiClass =
+      mocks.GetUsersOrganizationsAccounts.userOrganizationAccounts[0].organization.apiClass =
         'DataServer';
       const { getByText, getByTestId } = render(
         <Components>
           <GqlMockedProvider<{
             GetOrganizations: GetOrganizationsQuery;
-            GetUsersOrganizations: GetUsersOrganizationsQuery;
+            GetUsersOrganizationsAccounts: GetUsersOrganizationsAccountsQuery;
           }>
             mocks={mocks}
             onCall={mutationSpy}
@@ -300,15 +300,15 @@ describe('OrganizationAccordion', () => {
 
     it('should render OAuth Organization', async () => {
       const mutationSpy = jest.fn();
-      mocks.GetUsersOrganizations.userOrganizationAccounts[0].organization.apiClass =
+      mocks.GetUsersOrganizationsAccounts.userOrganizationAccounts[0].organization.apiClass =
         'DataServer';
-      mocks.GetUsersOrganizations.userOrganizationAccounts[0].organization.oauth =
+      mocks.GetUsersOrganizationsAccounts.userOrganizationAccounts[0].organization.oauth =
         true;
       const { getByText, queryByTestId } = render(
         <Components>
           <GqlMockedProvider<{
             GetOrganizations: GetOrganizationsQuery;
-            GetUsersOrganizations: GetUsersOrganizationsQuery;
+            GetUsersOrganizationsAccounts: GetUsersOrganizationsAccountsQuery;
           }>
             mocks={mocks}
             onCall={mutationSpy}
@@ -345,7 +345,7 @@ describe('OrganizationAccordion', () => {
         <Components>
           <GqlMockedProvider<{
             GetOrganizations: GetOrganizationsQuery;
-            GetUsersOrganizations: GetUsersOrganizationsQuery;
+            GetUsersOrganizationsAccounts: GetUsersOrganizationsAccountsQuery;
           }>
             mocks={mocks}
             onCall={mutationSpy}
@@ -376,7 +376,8 @@ describe('OrganizationAccordion', () => {
           'DeleteOrganizationAccount',
         );
         expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({
-          id: mocks.GetUsersOrganizations.userOrganizationAccounts[0].id,
+          id: mocks.GetUsersOrganizationsAccounts.userOrganizationAccounts[0]
+            .id,
         });
         expect(mockEnqueue).toHaveBeenCalledWith(
           '{{appName}} removed your organization integration',
@@ -386,15 +387,15 @@ describe('OrganizationAccordion', () => {
     });
 
     it("should not render Organization's download and last gift date", async () => {
-      mocks.GetUsersOrganizations.userOrganizationAccounts[0].lastDownloadedAt =
+      mocks.GetUsersOrganizationsAccounts.userOrganizationAccounts[0].lastDownloadedAt =
         null;
-      mocks.GetUsersOrganizations.userOrganizationAccounts[0].latestDonationDate =
+      mocks.GetUsersOrganizationsAccounts.userOrganizationAccounts[0].latestDonationDate =
         null;
       const { queryByText } = render(
         <Components>
           <GqlMockedProvider<{
             GetOrganizations: GetOrganizationsQuery;
-            GetUsersOrganizations: GetUsersOrganizationsQuery;
+            GetUsersOrganizationsAccounts: GetUsersOrganizationsAccountsQuery;
           }>
             mocks={mocks}
           >

src/components/Settings/integrations/Organization/OrganizationAccordion.tsx

@@ -25,7 +25,7 @@ import { OrganizationImportDataSyncModal } from './Modals/OrganizationImportData
 import { getOauthUrl } from './OrganizationService';
 import {
   useDeleteOrganizationAccountMutation,
-  useGetUsersOrganizationsQuery,
+  useGetUsersOrganizationsAccountsQuery,
   useSyncOrganizationAccountMutation,
 } from './Organizations.generated';
 
@@ -100,7 +100,7 @@ export const OrganizationAccordion: React.FC<OrganizationAccordionProps> = ({
     data,
     loading,
     refetch: refetchOrganizations,
-  } = useGetUsersOrganizationsQuery();
+  } = useGetUsersOrganizationsAccountsQuery();
   const organizations = data?.userOrganizationAccounts;
 
   const handleReconnect = async (organizationId) => {

src/components/Settings/integrations/Organization/Organizations.graphql

@@ -8,7 +8,7 @@ query getOrganizations {
   }
 }
 
-query GetUsersOrganizations {
+query GetUsersOrganizationsAccounts {
   userOrganizationAccounts {
     organization {
       apiClass

src/components/Settings/notifications/Notifications.graphql

@@ -0,0 +1,23 @@
+query NotificationsPreferences($accountListId: ID!) {
+  notificationPreferences(accountListId: $accountListId) {
+    nodes {
+      id
+      app
+      email
+      notificationType {
+        id
+        descriptionTemplate
+        type
+      }
+      task
+    }
+  }
+}
+
+query NotificationTypes {
+  notificationTypes {
+    id
+    type
+    descriptionTemplate
+  }
+}