Preferences connect services

next.config.js

@@ -51,6 +51,7 @@ module.exports = withPlugins([
       REST_API_URL:
         process.env.REST_API_URL ?? 'https://api.stage.mpdx.org/api/v2/',
       SITE_URL: siteUrl,
+      OAUTH_URL: process.env.OAUTH_URL ?? 'https://auth.stage.mpdx.org',
       CLIENT_ID: process.env.CLIENT_ID ?? '4027334344069527005',
       CLIENT_SECRET: process.env.CLIENT_SECRET,
       BEACON_TOKEN: process.env.BEACON_TOKEN,
@@ -94,6 +95,7 @@ module.exports = withPlugins([
       HS_HOME_SUGGESTIONS: process.env.HS_HOME_SUGGESTIONS,
       HS_REPORTS_SUGGESTIONS: process.env.HS_REPORTS_SUGGESTIONS,
       HS_TASKS_SUGGESTIONS: process.env.HS_TASKS_SUGGESTIONS,
+      HS_SETUP_FIND_ORGANIZATION: process.env.HS_SETUP_FIND_ORGANIZATION,
       ALERT_MESSAGE: process.env.ALERT_MESSAGE,
     },
     experimental: {

pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx

@@ -8,7 +8,11 @@ import Loading from 'src/components/Loading';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
+
 import { suggestArticles } from 'src/lib/helpScout';
 
 const DesignationAccountsReportPageWrapper = styled(Box)(({ theme }) => ({
@@ -42,12 +46,13 @@ const DesignationAccountsReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="designationAccounts"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx

@@ -9,11 +9,14 @@ import Loading from 'src/components/Loading';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsPage } from '../../contacts/ContactsPage';
 import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel';
 import { suggestArticles } from 'src/lib/helpScout';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 
 const DonationsReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -55,12 +58,13 @@ const DonationsReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="donations"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx

@@ -10,7 +10,10 @@ import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import { ExpectedMonthlyTotalReport } from '../../../../src/components/Reports/ExpectedMonthlyTotalReport/ExpectedMonthlyTotalReport';
 import { suggestArticles } from 'src/lib/helpScout';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 
 const ExpectedMonthlyTotalReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -43,12 +46,13 @@ const ExpectedMonthlyTotalReportPage = (): ReactElement => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="expectedMonthlyTotal"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx

@@ -10,7 +10,10 @@ import Loading from 'src/components/Loading';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel';
@@ -55,12 +58,13 @@ const PartnerCurrencyReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="partnerCurrency"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx

@@ -8,7 +8,10 @@ import Loading from 'src/components/Loading';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { suggestArticles } from 'src/lib/helpScout';
 
 const ResponsibilityCentersReportPageWrapper = styled(Box)(({ theme }) => ({
@@ -42,12 +45,13 @@ const ResponsibilityCentersReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="responsibilityCenters"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx

@@ -10,7 +10,10 @@ import Loading from 'src/components/Loading';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel';
@@ -55,12 +58,13 @@ const SalaryCurrencyReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="salaryCurrency"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

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

@@ -0,0 +1,109 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SettingsWrapper } from './wrapper';
+import { suggestArticles } from 'src/lib/helpScout';
+import { GetServerSideProps } from 'next';
+import { getSession } from 'next-auth/react';
+import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup';
+import { TheKeyAccordian } from 'src/components/Settings/integrations/Key/TheKeyAccordian';
+import { OrganizationAccordian } from 'src/components/Settings/integrations/Organization/OrganizationAccordian';
+import { GoogleAccordian } from 'src/components/Settings/integrations/Google/GoogleAccordian';
+import { MailchimpAccordian } from 'src/components/Settings/integrations/Mailchimp/MailchimpAccordian';
+import { PrayerlettersAccordian } from 'src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian';
+import { ChalklineAccordian } from 'src/components/Settings/integrations/Chalkline/ChalklineAccordian';
+
+interface Props {
+  apiToken: string;
+  selectedTab: string;
+}
+
+export type IntegrationsContextType = {
+  apiToken: string;
+};
+export const IntegrationsContext =
+  React.createContext<IntegrationsContextType | null>(null);
+
+interface IntegrationsContextProviderProps {
+  children: React.ReactNode;
+  apiToken: string;
+}
+export const IntegrationsContextProvider: React.FC<
+  IntegrationsContextProviderProps
+> = ({ children, apiToken }) => {
+  return (
+    <IntegrationsContext.Provider value={{ apiToken }}>
+      {children}
+    </IntegrationsContext.Provider>
+  );
+};
+
+const Integrations = ({ apiToken, selectedTab }: Props): ReactElement => {
+  const { t } = useTranslation();
+  const [expandedPanel, setExpandedPanel] = useState('');
+
+  useEffect(() => {
+    suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS');
+    setExpandedPanel(selectedTab);
+  }, []);
+
+  const handleAccordionChange = (panel: string) => {
+    const panelLowercase = panel.toLowerCase();
+    setExpandedPanel(expandedPanel === panelLowercase ? '' : panelLowercase);
+  };
+
+  return (
+    <SettingsWrapper
+      pageTitle={t('Connect Services')}
+      pageHeading={t('Connect Services')}
+    >
+      <IntegrationsContextProvider apiToken={apiToken}>
+        <AccordionGroup title="">
+          <TheKeyAccordian
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+          <OrganizationAccordian
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+        </AccordionGroup>
+        <AccordionGroup title={t('External Services')}>
+          <GoogleAccordian
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+          <MailchimpAccordian
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+          <PrayerlettersAccordian
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+          <ChalklineAccordian
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+        </AccordionGroup>
+      </IntegrationsContextProvider>
+    </SettingsWrapper>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async ({
+  query,
+  req,
+}) => {
+  const session = await getSession({ req });
+  const apiToken = session?.user?.apiToken ?? null;
+  const selectedTab = query?.selectedTab ?? '';
+
+  return {
+    props: {
+      apiToken,
+      selectedTab,
+    },
+  };
+};
+
+export default Integrations;