MPDX-7829 Ministries Have Self Service MPDX Donor/Account Removal Capability

pages/accountLists/[accountListId]/settings/organizations/OrganizationsContext.tsx

@@ -2,6 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react';
 
 export type OrganizationsContextType = {
   selectedOrganizationId: string;
+  selectedOrganizationName: string;
   search: string;
   setSearch: Dispatch<SetStateAction<string>>;
   clearFilters: () => void;
@@ -12,16 +13,30 @@ export const OrganizationsContext =
 interface OrganizationsContextProviderProps {
   children: React.ReactNode;
   selectedOrganizationId: string;
+  selectedOrganizationName: string;
   search: string;
   setSearch: Dispatch<SetStateAction<string>>;
   clearFilters: () => void;
 }
 export const OrganizationsContextProvider: React.FC<
   OrganizationsContextProviderProps
-> = ({ children, selectedOrganizationId, search, setSearch, clearFilters }) => {
+> = ({
+  children,
+  selectedOrganizationId,
+  selectedOrganizationName,
+  search,
+  setSearch,
+  clearFilters,
+}) => {
   return (
     <OrganizationsContext.Provider
-      value={{ selectedOrganizationId, search, setSearch, clearFilters }}
+      value={{
+        selectedOrganizationId,
+        selectedOrganizationName,
+        search,
+        setSearch,
+        clearFilters,
+      }}
     >
       {children}
     </OrganizationsContext.Provider>

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

@@ -1,11 +1,12 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 import PersonSearchIcon from '@mui/icons-material/PersonSearch';
 import {
   Autocomplete,
   Box,
   InputAdornment,
   Skeleton,
   TextField,
+  Tooltip,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -29,23 +30,39 @@
 
 const AccountListsOrganizations = (): ReactElement => {
   const { t } = useTranslation();
-  const [search, setSearch] = useState('');
-  const matches = useMediaQuery('(max-width:600px)');
   const [selectedOrganization, setSelectedOrganization] = useState<
     SettingsOrganizationFragment | null | undefined
-  >();
+  >(null);
+
+  const [search, setSearch] = useState('');
+  const isNarrowScreen = useMediaQuery('(max-width:600px)');
+
   const { data } = useOrganizationsQuery();
   const organizations = data?.getOrganizations.organizations;
   const contactSearch = useDebouncedValue(search, 1000);
 
   const clearFilters = () => {
     setSearch('');
-    setSelectedOrganization(undefined);
+  };
+
+  useEffect(() => {
+    if (!window?.localStorage) {
+      return;
+    }
+    const savedOrg = window.localStorage.getItem('admin-org');
+    savedOrg && setSelectedOrganization(JSON.parse(savedOrg));
+  }, []);
+
+  const handleSelectedOrgChange = (organization): void => {
+    const org = organizations?.find((org) => org?.id === organization);
+    setSelectedOrganization(org);
+    org && window.localStorage.setItem(`admin-org`, JSON.stringify(org));
   };
 
   return (
     <OrganizationsContextProvider
       selectedOrganizationId={selectedOrganization?.id ?? ''}
+      selectedOrganizationName={selectedOrganization?.name ?? ''}
       search={contactSearch}
       setSearch={setSearch}
       clearFilters={clearFilters}
@@ -64,31 +81,39 @@
         {organizations?.length && (
           <HeaderAndDropdown>
             <Box>
-              <TextField
-                label={t('Search Account Lists')}
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                fullWidth
-                multiline
-                inputProps={{ 'aria-label': 'Search Account Lists' }}
-                style={{
-                  width: matches ? '150px' : '250px',
-                }}
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <PersonSearchIcon />
-                    </InputAdornment>
-                  ),
-                }}
-              />
+              {selectedOrganization && (
+                <Tooltip
+                  title={t('Search by name, email or account number')}
+                  placement={'bottom'}
+                  arrow
+                >
+                  <TextField
+                    label={t('Search Account Lists')}
+                    value={search}
+                    onChange={(e) => {
+                      setSearch(e.target.value);
+                    }}
+                    fullWidth
+                    inputProps={{ 'aria-label': 'Search Account Lists' }}
+                    style={{
+                      width: isNarrowScreen ? '150px' : '250px',
+                    }}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <PersonSearchIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                  />
+                </Tooltip>
+              )}
             </Box>
             <Box>
               <Autocomplete
                 style={{
-                  width: matches ? '150px' : '250px',
+                  width: isNarrowScreen ? '150px' : '350px',
                 }}
-                autoSelect
                 autoHighlight
                 options={organizations?.map((org) => org?.id) || []}
                 getOptionLabel={(orgId) =>
@@ -104,12 +129,9 @@
                   />
                 )}
                 value={selectedOrganization?.id ?? null}
-                onChange={(_, organization): void => {
-                  const org = organizations?.find(
-                    (org) => org?.id === organization,
-                  );
-                  setSelectedOrganization(org);
-                }}
+                onChange={(_, organization): void =>
+                  handleSelectedOrgChange(organization)
+                }
               />
             </Box>
           </HeaderAndDropdown>

pages/accountLists/[accountListId]/settings/organizations/contacts.page.tsx

@@ -6,6 +6,7 @@ import {
   InputAdornment,
   Skeleton,
   TextField,
+  Tooltip,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -30,7 +31,7 @@ const HeaderAndDropdown = styled(Box)(() => ({
 const OrganizationsContacts = (): ReactElement => {
   const { t } = useTranslation();
   const [search, setSearch] = useState('');
-  const matches = useMediaQuery('(max-width:600px)');
+  const isNarrowScreen = useMediaQuery('(max-width:600px)');
   const [selectedOrganization, setSelectedOrganization] = useState<
     SettingsOrganizationFragment | null | undefined
   >();
@@ -47,6 +48,7 @@ const OrganizationsContacts = (): ReactElement => {
   return (
     <OrganizationsContextProvider
       selectedOrganizationId={selectedOrganization?.id ?? ''}
+      selectedOrganizationName={selectedOrganization?.name ?? ''}
       search={contactSearch}
       setSearch={setSearch}
       clearFilters={clearFilters}
@@ -66,32 +68,36 @@ const OrganizationsContacts = (): ReactElement => {
           <HeaderAndDropdown>
             <Box>
               {selectedOrganization && (
-                <TextField
-                  label={t('Search Contacts')}
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  fullWidth
-                  multiline
-                  inputProps={{ 'aria-label': 'Search Contacts' }}
-                  style={{
-                    width: matches ? '150px' : '250px',
-                  }}
-                  InputProps={{
-                    startAdornment: (
-                      <InputAdornment position="start">
-                        <PersonSearchIcon />
-                      </InputAdornment>
-                    ),
-                  }}
-                />
+                <Tooltip
+                  title={t('Search by name, phone, email or partner number')}
+                  placement={'bottom'}
+                  arrow
+                >
+                  <TextField
+                    label={t('Search Contacts')}
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    fullWidth
+                    inputProps={{ 'aria-label': 'Search Contacts' }}
+                    style={{
+                      width: isNarrowScreen ? '150px' : '250px',
+                    }}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <PersonSearchIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                  />
+                </Tooltip>
               )}
             </Box>
             <Box>
               <Autocomplete
                 style={{
-                  width: matches ? '150px' : '250px',
+                  width: isNarrowScreen ? '150px' : '350px',
                 }}
-                autoSelect
                 autoHighlight
                 options={organizations?.map((org) => org?.id) || []}
                 getOptionLabel={(orgId) =>

pages/api/Schema/Settings/Organizations/SearchOrganizationsAccountLists/SearchOrganizationsAccountLists.graphql

@@ -18,6 +18,7 @@ type SearchOrganizationsAccountListsResponse {
 type OrganizationsAccountList {
   id: ID!
   name: String!
+  organizationCount: Int
   designationAccounts: [AccountListDesignationAccounts]
   accountListUsers: [AccountListUsers]
   accountListUsersInvites: [AccountListInvites]
@@ -36,7 +37,10 @@ type AccountListUsers {
   userFirstName: String
   userLastName: String
   allowDeletion: Boolean
+  userId: ID
+  lastSyncedAt: String
   userEmailAddresses: [AccountListEmailAddresses]
+  organizationCount: Int
 }
 
 type AccountListInvites {

pages/api/Schema/Settings/Organizations/SearchOrganizationsAccountLists/datahandler.ts

@@ -43,8 +43,8 @@
 type AccountListIncludedTypes = {
   id: string;
   type: string;
   attributes: any;
   relationships: any;
 };
 
 interface SearchOrganizationsAccountListsReturned {
@@ -76,6 +76,7 @@
 type SearchOrganizationsAccountListsAccountList = {
   name: string;
   id: string;
+  organizationCount: number;
   designationAccounts: {
     displayName: string;
     id: string;
@@ -89,6 +90,9 @@
     userFirstName: string;
     userLastName: string;
     allowDeletion: boolean;
+    userId: string;
+    lastSyncedAt: string;
+    organizationCount: number;
     userEmailAddresses: EmailAddress[];
   }[];
   accountListUsersInvites: AccountListInvite[];

pages/api/Schema/Settings/Organizations/SearchOrganizationsContacts/SearchOrganizationsContacts.graphql

@@ -17,7 +17,6 @@ type SearchOrganizationsContactsResponse {
 
 type OrganizationsContact {
   id: ID!
-  allowDeletion: Boolean!
   name: String!
   squareAvatar: String
   people: [ContactPeople]!
@@ -67,8 +66,8 @@ type ContactPeopleAccountLists {
 
 type ContactPeopleAccountListsUsers {
   id: ID
-  firstName: String
-  lastName: String
-  emailAddresses: [ContactPeopleEmailAddresses]
+  userFirstName: String
+  userLastName: String
+  userEmailAddresses: [ContactPeopleEmailAddresses]
   phoneNumbers: [ContactPeoplePhoneNumbers]
 }

pages/api/Schema/Settings/Organizations/SearchOrganizationsContacts/datahandler.ts

@@ -42,8 +42,8 @@
 type ContactIncludedTypes = {
   id: string;
   type: string;
   attributes: any;
   relationships: any;
 };
 
 interface SearchOrganizationsContactsReturned {
@@ -82,9 +82,9 @@
     name: string;
     accountListUsers: {
       id: string;
-      firstName: string;
-      lastName: string;
-      emailAddresses: EmailAddress[];
+      userFirstName: string;
+      userLastName: string;
+      userEmailAddresses: EmailAddress[];
     }[];
   };
   addresses: {

pages/api/graphql-rest.page.ts

@@ -1202,7 +1202,7 @@ class MpdxRestApi extends RESTDataSource {
   ) {
     const include =
       'people,people.email_addresses,people.phone_numbers,addresses,account_list,' +
-      'account_list.account_list_users,account_list.account_list_users.email_addresses';
+      'account_list.account_list_users,account_list.account_list_users.user_email_addresses';
     const filters =
       `filter[organization_id]=${organizationId}` +
       `&filter[wildcard_search]=${search}` +
@@ -1213,7 +1213,7 @@ class MpdxRestApi extends RESTDataSource {
       '&fields[email_addresses]=email,primary,historic' +
       '&fields[phone_numbers]=number,primary,historic' +
       '&fields[account_lists]=name,account_list_users' +
-      '&fields[account_list_users]=first_name,last_name,email_addresses' +
+      '&fields[account_list_users]=user_first_name,user_last_name,user_email_addresses' +
       '&fields[addresses]=primary_mailing_address,street,city,state,postal_code';
 
     const data: SearchOrganizationsContactsResponse = await this.get(
@@ -1256,9 +1256,9 @@ class MpdxRestApi extends RESTDataSource {
       : '';
     const filters = `filter[wildcard_search]=${search}` + organizationIdFilter;
     const fields =
-      'fields[account_lists]=name,account_list_coaches,account_list_users,account_list_invites,designation_accounts' +
+      'fields[account_lists]=name,account_list_coaches,account_list_users,account_list_invites,designation_accounts,organization_count' +
       '&fields[account_list_coaches]=coach_first_name,coach_last_name,coach_email_addresses' +
-      '&fields[account_list_users]=user_first_name,user_last_name,user_email_addresses,allow_deletion' +
+      '&fields[account_list_users]=user_first_name,user_last_name,user_email_addresses,allow_deletion,user_id,last_synced_at,organization_count' +
       '&fields[email_addresses]=email,primary' +
       '&fields[designation_accounts]=display_name,organization' +
       '&fields[organizations]=name' +

src/components/InfiniteList/InfiniteList.tsx

@@ -66,24 +66,24 @@
 
 export interface InfiniteListProps<T, C> {
   loading: boolean;
+  disableHover?: boolean;
   EmptyPlaceholder?: ReactElement | null;
   ItemOverride?: React.ComponentType<ItemProps> | null;
   itemContent: ItemContent<T, C>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   context?: any;
   groupBy?: (item: T) => { label: string; order?: number };
-  disableHover?: boolean;
 }
 
 export const InfiniteList = <T, C>({
   loading,
+  disableHover = false,
   data = [],
   EmptyPlaceholder = null,
   ItemOverride = null,
   context,
   groupBy,
   itemContent,
-  disableHover = false,
   ...props
 }: Omit<GroupedVirtuosoProps<T, C>, 'groupCounts' | 'itemContent'> &
   InfiniteListProps<T, C>): ReactElement => {
@@ -109,6 +109,11 @@
       ScrollSeekPlaceholder: SkeletonItem,
       ...props.components,
     },
+    scrollSeekConfiguration: {
+      enter: (velocity) => Math.abs(velocity) > 200,
+      exit: (velocity) => Math.abs(velocity) < 10,
+      ...props.scrollSeekConfiguration,
+    },
     overscan: 2000,
   };