Preferences - Connect Services Page

next.config.js

@@ -50,6 +50,7 @@ module.exports = withPlugins([
       API_URL: process.env.API_URL ?? 'https://api.stage.mpdx.org/graphql',
       REST_API_URL:
         process.env.REST_API_URL ?? 'https://api.stage.mpdx.org/api/v2/',
+      OAUTH_URL: process.env.OAUTH_URL ?? 'https://auth.stage.mpdx.org',
       SITE_URL: siteUrl,
       CLIENT_ID: process.env.CLIENT_ID ?? '4027334344069527005',
       CLIENT_SECRET: process.env.CLIENT_SECRET,
@@ -104,6 +105,9 @@ 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_SETTINGS_SERVICES_SUGGESTIONS:
+        process.env.HS_SETTINGS_SERVICES_SUGGESTIONS,
+      HS_SETUP_FIND_ORGANIZATION: process.env.HS_SETUP_FIND_ORGANIZATION,
       ALERT_MESSAGE: process.env.ALERT_MESSAGE,
     },
     experimental: {

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+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>
+  );
+};

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

@@ -0,0 +1,90 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GetServerSideProps } from 'next';
+import { getToken } from 'next-auth/jwt';
+import { useRouter } from 'next/router';
+import { suggestArticles } from 'src/lib/helpScout';
+import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup';
+import { TheKeyAccordion } from 'src/components/Settings/integrations/Key/TheKeyAccordion';
+import { OrganizationAccordion } from 'src/components/Settings/integrations/Organization/OrganizationAccordion';
+import { GoogleAccordion } from 'src/components/Settings/integrations/Google/GoogleAccordion';
+import { MailchimpAccordion } from 'src/components/Settings/integrations/Mailchimp/MailchimpAccordion';
+import { PrayerlettersAccordion } from 'src/components/Settings/integrations/Prayerletters/PrayerlettersAccordion';
+import { ChalklineAccordion } from 'src/components/Settings/integrations/Chalkline/ChalklineAccordion';
+import { SettingsWrapper } from '../wrapper';
+import { IntegrationsContextProvider } from './IntegrationsContext';
+
+interface Props {
+  apiToken: string;
+}
+
+const Integrations = ({ apiToken }: Props): ReactElement => {
+  const { t } = useTranslation();
+  const { query } = useRouter();
+  const [expandedPanel, setExpandedPanel] = useState(
+    (query?.selectedTab as string) || '',
+  );
+
+  useEffect(() => {
+    suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS');
+  }, []);
+
+  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="">
+          <TheKeyAccordion
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+          <OrganizationAccordion
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+        </AccordionGroup>
+        <AccordionGroup title={t('External Services')}>
+          <GoogleAccordion
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+          <MailchimpAccordion
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+          <PrayerlettersAccordion
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+          <ChalklineAccordion
+            handleAccordionChange={handleAccordionChange}
+            expandedPanel={expandedPanel}
+          />
+        </AccordionGroup>
+      </IntegrationsContextProvider>
+    </SettingsWrapper>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async ({ req }) => {
+  const jwtToken = (await getToken({
+    req,
+    secret: process.env.JWT_SECRET as string,
+  })) as { apiToken: string } | null;
+  const apiToken = jwtToken?.apiToken;
+
+  return {
+    props: {
+      apiToken,
+    },
+  };
+};
+
+export default Integrations;

pages/accountLists/[accountListId]/settings/wrapper.tsx

@@ -0,0 +1,74 @@
+import { Box, Container } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { useState } from 'react';
+import Head from 'next/head';
+import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
+import {
+  MultiPageHeader,
+  HeaderTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageHeader';
+
+const PageContentWrapper = styled(Container)(({ theme }) => ({
+  paddingTop: theme.spacing(3),
+  paddingBottom: theme.spacing(3),
+}));
+
+interface SettingsWrapperProps {
+  pageTitle: string;
+  pageHeading: string;
+  children?: React.ReactNode;
+}
+
+export const SettingsWrapper: React.FC<SettingsWrapperProps> = ({
+  pageTitle,
+  pageHeading,
+  children,
+}) => {
+  const { appName } = useGetAppSettings();
+  const [isNavListOpen, setNavListOpen] = useState(false);
+  const handleNavListToggle = () => {
+    setNavListOpen(!isNavListOpen);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>
+          {appName} | {pageTitle}
+        </title>
+      </Head>
+      <Box component="main">
+        <SidePanelsLayout
+          isScrollBox={false}
+          leftPanel={
+            <MultiPageMenu
+              isOpen={isNavListOpen}
+              selectedId="responsibilityCenters"
+              onClose={handleNavListToggle}
+              navType={NavTypeEnum.Settings}
+            />
+          }
+          leftOpen={isNavListOpen}
+          leftWidth="290px"
+          mainContent={
+            <>
+              <MultiPageHeader
+                isNavListOpen={isNavListOpen}
+                onNavListToggle={handleNavListToggle}
+                title={pageHeading}
+                rightExtra={null}
+                headerType={HeaderTypeEnum.Settings}
+              />
+              <PageContentWrapper maxWidth="lg">{children}</PageContentWrapper>
+            </>
+          }
+        />
+      </Box>
+    </>
+  );
+};

pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/datahandler.ts

@@ -0,0 +1,3 @@
+export const SendToChalkline = (): string => {
+  return 'success';
+};

pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/resolvers.ts

@@ -0,0 +1,15 @@
+import { Resolvers } from '../../../../../../graphql-rest.page.generated';
+
+const SendToChalklineResolvers: Resolvers = {
+  Mutation: {
+    sendToChalkline: async (
+      _source,
+      { input: { accountListId } },
+      { dataSources },
+    ) => {
+      return dataSources.mpdxRestApi.sendToChalkline(accountListId);
+    },
+  },
+};
+
+export { SendToChalklineResolvers };

pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/sendToChalkline.graphql

@@ -0,0 +1,7 @@
+extend type Mutation {
+  sendToChalkline(input: SendToChalklineInput!): String!
+}
+
+input SendToChalklineInput {
+  accountListId: ID!
+}

pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/createGoogleIntegration.graphql

@@ -0,0 +1,29 @@
+extend type Mutation {
+  createGoogleIntegration(
+    input: CreateGoogleIntegrationInput!
+  ): GoogleAccountIntegration!
+}
+
+input CreateGoogleIntegrationInput {
+  googleAccountId: ID!
+  googleIntegration: GoogleAccountIntegrationInput
+  accountListId: String!
+}
+
+input GoogleAccountIntegrationInput {
+  overwrite: Boolean
+  calendarIntegration: Boolean
+  calendarId: String
+  calendarIntegrations: [String]
+  calendarName: String
+  calendars: [GoogleAccountIntegrationCalendarsInput]
+  createdAt: String
+  updatedAt: String
+  id: String
+  updatedInDbAt: String
+}
+
+input GoogleAccountIntegrationCalendarsInput {
+  id: String
+  name: String
+}

pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/datahandler.ts

@@ -0,0 +1,55 @@
+import { snakeToCamel } from 'src/lib/snakeToCamel';
+
+export interface CreateGoogleIntegrationResponse {
+  id: string;
+  type: string;
+  attributes: Omit<CreateGoogleIntegrationAttributes, 'id'>;
+  relationships: relationships;
+}
+
+type relationships = {
+  account_list: object[];
+  google_account: object[];
+};
+
+export interface CreateGoogleIntegrationAttributes {
+  calendar_id: string;
+  calendar_integration: boolean;
+  calendar_integrations: string[];
+  calendar_name: string;
+  calendars: calendars[];
+  created_at: string;
+  updated_at: string;
+  id: string;
+  updated_in_db_at: string;
+}
+
+interface CreateGoogleIntegrationAttributesCamel {
+  calendarId: string;
+  calendarIntegration: boolean;
+  calendarIntegrations: string[];
+  calendarName: string;
+  calendars: calendars[];
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  updatedInDbAt: string;
+}
+type calendars = {
+  id: string;
+  name: string;
+};
+
+export const CreateGoogleIntegration = (
+  data: CreateGoogleIntegrationResponse,
+): CreateGoogleIntegrationAttributesCamel => {
+  const attributes = {} as Omit<CreateGoogleIntegrationAttributesCamel, 'id'>;
+  Object.keys(data.attributes).forEach((key) => {
+    attributes[snakeToCamel(key)] = data.attributes[key];
+  });
+
+  return {
+    id: data.id,
+    ...attributes,
+  };
+};

pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/resolvers.ts

@@ -0,0 +1,19 @@
+import { Resolvers } from '../../../../../../graphql-rest.page.generated';
+
+const CreateGoogleIntegrationResolvers: Resolvers = {
+  Mutation: {
+    createGoogleIntegration: async (
+      _source,
+      { input: { googleAccountId, googleIntegration, accountListId } },
+      { dataSources },
+    ) => {
+      return dataSources.mpdxRestApi.createGoogleIntegration(
+        googleAccountId,
+        googleIntegration,
+        accountListId,
+      );
+    },
+  },
+};
+
+export { CreateGoogleIntegrationResolvers };

pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/datahandler.ts

@@ -0,0 +1,9 @@
+export type DeleteGoogleAccountResponse = {
+  success: boolean;
+};
+
+export const DeleteGoogleAccount = (): DeleteGoogleAccountResponse => {
+  return {
+    success: true,
+  };
+};

pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/deleteGoogleAccount.graphql

@@ -0,0 +1,13 @@
+extend type Mutation {
+  deleteGoogleAccount(
+    input: DeleteGoogleAccountInput!
+  ): GoogleAccountDeletionResponse!
+}
+
+input DeleteGoogleAccountInput {
+  accountId: ID!
+}
+
+type GoogleAccountDeletionResponse {
+  success: Boolean!
+}

pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/resolvers.ts

@@ -0,0 +1,15 @@
+import { Resolvers } from '../../../../../../graphql-rest.page.generated';
+
+const DeleteGoogleAccountResolvers: Resolvers = {
+  Mutation: {
+    deleteGoogleAccount: async (
+      _source,
+      { input: { accountId } },
+      { dataSources },
+    ) => {
+      return dataSources.mpdxRestApi.deleteGoogleAccount(accountId);
+    },
+  },
+};
+
+export { DeleteGoogleAccountResolvers };