[MPDX-7894] Migrate from HelpScout beacon to Helpjuice beacon

README.md

@@ -69,12 +69,11 @@ Note: there is a test account you can use. Get this from another developer if yo
 - `DATADOG_APP_ID` - Datadog tracking application ID.
 - `DATADOG_CLIENT_TOKEN` - Datadog tracking client token.
 - `DD_ENV` - Datadog environment.
-- `BEACON_TOKEN` - HelpScout beacon token
-- `HS_CONTACTS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the contacts page
-- `HS_CONTACTS_CONTACT_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the contact page
-- `HS_HOME_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the dashboard page
-- `HS_REPORTS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the reports pages
-- `HS_TASKS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the tasks page
+- `HELPJUICE_ORIGIN` - Helpjuice origin for documentation and user support (example: `https://www.helpducks.org`)
+- `HELPJUICE_KNOWLEDGE_BASE_URL` - Knowledge base page to make the Helpjuice "Visit Knowledge Base" page link to (example: `https://www.helpducks.org/mpdx`)
+- `HELP_URL_COACHING_ACTIVITY` - Link to an article explaining the coaching activity table
+- `HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS` - Link to an article explaining the coaching appointments and results table
+- `HELP_URL_SETUP_FIND_ORGANIZATION` - Link to an article explaining how to find an organization
 - `PRIVACY_POLICY_URL` - URL of the privacy policy
 - `TERMS_OF_USE_URL` - URL of the terms of use
 - `DISABLE_SETUP_TOUR` - Set to `true` to disable starting users on the welcome tour. This should be removed from the codebase once tools are live.

__tests__/util/setup.ts

@@ -25,8 +25,6 @@ expect.extend({
   toHaveGraphqlOperation,
 });
 
-window.Beacon = jest.fn();
-
 window.document.createRange = (): Range =>
   ({
     setStart: jest.fn(),

next.config.js

@@ -41,7 +41,6 @@ const config = {
     SITE_URL: siteUrl,
     CLIENT_ID: process.env.CLIENT_ID ?? '4027334344069527005',
     CLIENT_SECRET: process.env.CLIENT_SECRET,
-    BEACON_TOKEN: process.env.BEACON_TOKEN,
     AUTH_PROVIDER: process.env.AUTH_PROVIDER ?? 'OKTA',
     OKTA_CLIENT_ID: process.env.OKTA_CLIENT_ID ?? '0oa1n0gjoy3j5Ycdg0h8',
     OKTA_CLIENT_SECRET: process.env.OKTA_CLIENT_SECRET,
@@ -76,25 +75,13 @@ const config = {
         process.env.DATADOG_APP_ID &&
         process.env.DATADOG_CLIENT_TOKEN,
     ).toString(),
-    HS_COACHING_ACTIVITY_SUMMARY: process.env.HS_COACHING_ACTIVITY_SUMMARY,
-    HS_COACHING_ACTIVITY: process.env.HS_COACHING_ACTIVITY,
-    HS_COACHING_APPOINTMENTS_AND_RESULTS:
-      process.env.HS_COACHING_APPOINTMENTS_AND_RESULTS,
-    HS_COACHING_COMMITMENTS: process.env.HS_COACHING_COMMITMENTS,
-    HS_COACHING_OUTSTANDING_RECURRING_COMMITMENTS:
-      process.env.HS_COACHING_OUTSTANDING_RECURRING_COMMITMENTS,
-    HS_COACHING_OUTSTANDING_SPECIAL_NEEDS:
-      process.env.HS_COACHING_OUTSTANDING_SPECIAL_NEEDS,
-    HS_COACHING_SUGGESTIONS: process.env.HS_COACHING_SUGGESTIONS,
-    HS_CONTACTS_CONTACT_SUGGESTIONS:
-      process.env.HS_CONTACTS_CONTACT_SUGGESTIONS,
-    HS_CONTACTS_SUGGESTIONS: process.env.HS_CONTACTS_SUGGESTIONS,
-    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,
+    HELPJUICE_ORIGIN: process.env.HELPJUICE_ORIGIN,
+    HELPJUICE_KNOWLEDGE_BASE_URL: process.env.HELPJUICE_KNOWLEDGE_BASE_URL,
+    HELP_URL_COACHING_ACTIVITY: process.env.HELP_URL_COACHING_ACTIVITY,
+    HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS:
+      process.env.HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS,
+    HELP_URL_SETUP_FIND_ORGANIZATION:
+      process.env.HELP_URL_SETUP_FIND_ORGANIZATION,
     ALERT_MESSAGE: process.env.ALERT_MESSAGE,
     PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
     TERMS_OF_USE_URL: process.env.TERMS_OF_USE_URL,

pages/_app.page.tsx

@@ -21,7 +21,7 @@
 import Rollbar from 'rollbar';
 import DataDog from 'src/components/DataDog/DataDog';
 import { GlobalStyles } from 'src/components/GlobalStyles/GlobalStyles';
-import HelpscoutBeacon from 'src/components/Helpscout/HelpscoutBeacon';
+import { Helpjuice } from 'src/components/Helpjuice/Helpjuice';
 import PrimaryLayout from 'src/components/Layouts/Primary';
 import Loading from 'src/components/Loading';
 import { RouterGuard } from 'src/components/RouterGuard/RouterGuard';
@@ -36,7 +36,7 @@
 import makeClient from 'src/lib/apollo/client';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import './helpscout.css';
+import './helpjuice.css';
 import './print.css';
 
 export type PageWithLayout = NextPage & {
@@ -170,7 +170,6 @@
         <ErrorBoundary>
           <AppSettingsProvider>
             <SessionProvider session={session}>
-              <HelpscoutBeacon />
               <I18nextProvider i18n={i18n}>
                 <StyledEngineProvider injectFirst>
                   <CacheProvider value={emotionCache}>
@@ -203,6 +202,7 @@
                 </StyledEngineProvider>
               </I18nextProvider>
               <DataDog />
+              <Helpjuice />
             </SessionProvider>
             {process.env.ALERT_MESSAGE ? (
               <AlertBanner

pages/_document.page.tsx

@@ -22,6 +22,33 @@
             href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap"
             rel="stylesheet"
           />
+          {process.env.HELPJUICE_ORIGIN && (
+            <link
+              rel="stylesheet"
+              href={`${process.env.HELPJUICE_ORIGIN}/swifty.css`}
+            />
+          )}
+          {/* The swifty.js script initializes in response to a DOMContentLoaded
+           * event, but that event has fired by the time the script is executed
+           * when using the Next.js <Script> component. To workaround this, we
+           * have to use a native <script> element and cannot use async or
+           * defer. This is not ideal for first-load performance and should be
+           * switched to <Script> as soon as Helpjuice can fix their swifty.js
+           * script.
+           */}
+          {process.env.HELPJUICE_ORIGIN && (
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `window.helpjuice_account_url = '${process.env.HELPJUICE_ORIGIN}';
+window.helpjuice_contact_us_url = '${process.env.HELPJUICE_ORIGIN}/contact-us';
+window.helpjuiceSwiftyConfig = { widgetPosition: 'bottomRight' };
+window.helpjuiceSwiftyUrlMap = {};`,
+              }}
+            />
+          )}
+          {process.env.HELPJUICE_ORIGIN && (
+            <script src={`${process.env.HELPJUICE_ORIGIN}/swifty.js`} />
+          )}
           {process.env.DATADOG_CONFIGURED === 'true' && (
             <Script id="datadog-rum" strategy="afterInteractive">
               {`!function(a,e,t,n,s){a=a[s]=a[s]||{q:[],onReady:function(e){a.q.push(e)}},(s=e.createElement(t)).async=1,s.src=n,(n=e.getElementsByTagName(t)[0]).parentNode.insertBefore(s,n)}(window,document,"script","https://www.datadoghq-browser-agent.com/datadog-rum-v5.js","DD_RUM"),DD_RUM.onReady(function(){DD_RUM.init({clientToken:"${process.env.DATADOG_CLIENT_TOKEN}",applicationId:"${process.env.DATADOG_APP_ID}",site:"datadoghq.com",service:"mpdx-web-react",sessionSampleRate:100,sessionReplaySampleRate:20,trackUserInteractions:!0,trackResources:!0,trackLongTasks:!0,defaultPrivacyLevel:"mask-user-input",env:"${process.env.DD_ENV}",allowedTracingUrls:["${process.env.API_URL}"]})});`}

pages/accountLists/[accountListId].page.tsx

@@ -11,7 +11,6 @@ import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import useTaskModal from 'src/hooks/useTaskModal';
 import makeSsrClient from 'src/lib/apollo/ssrClient';
-import { suggestArticles } from 'src/lib/helpScout';
 import {
   GetDashboardDocument,
   GetDashboardQuery,
@@ -33,10 +32,6 @@ const AccountListIdPage = ({
     useState<AddMenuItemsEnum | null>(null);
   const [dialogOpen, setDialogOpen] = useState(false);
 
-  useEffect(() => {
-    suggestArticles('HS_HOME_SUGGESTIONS');
-  }, []);
-
   useEffect(() => {
     if (!modal || dialogOpen) {
       return;

pages/accountLists/[accountListId]/contacts/ContactsWrapper.tsx

@@ -2,7 +2,6 @@ import { useRouter } from 'next/router';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ContactsProvider } from 'src/components/Contacts/ContactsContext/ContactsContext';
 import { ContactFilterSetInput } from 'src/graphql/types.generated';
-import { suggestArticles } from 'src/lib/helpScout';
 import { sanitizeFilters } from 'src/lib/sanitizeFilters';
 
 interface Props {
@@ -45,12 +44,6 @@ export const ContactsWrapper: React.FC<Props> = ({ children }) => {
     });
   }, [sanitizedFilters, isReady]);
 
-  useEffect(() => {
-    suggestArticles(
-      contactId ? 'HS_CONTACTS_CONTACT_SUGGESTIONS' : 'HS_CONTACTS_SUGGESTIONS',
-    );
-  }, [contactId]);
-
   return (
     <ContactsProvider
       urlFilters={urlFilters}

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

@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import {
@@ -9,17 +9,12 @@
 import Loading from 'src/components/Loading';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 
 const CoachingReportPage = (): ReactElement => {
   const { t } = useTranslation();
   const accountListId = useAccountListId();
   const { appName } = useGetAppSettings();
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   return (
     <>
       <Head>

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

@@ -1,6 +1,6 @@
 import Head from 'next/head';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
@@ -13,7 +13,6 @@
 } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 
 const DesignationAccountsReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -26,10 +25,6 @@
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };

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

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +15,6 @@ import {
 } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsWrapper } from '../../contacts/ContactsWrapper';
 
@@ -31,10 +30,6 @@ const DonationsReportPage: React.FC = () => {
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const selectedContactId = getQueryParam(router.query, 'contactId');
 
   const handleNavListToggle = () => {

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

@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,6 @@
 } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 
 const ExpectedMonthlyTotalReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -27,10 +26,6 @@
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };

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

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +16,6 @@ import {
 import { FourteenMonthReportCurrencyType } from 'src/graphql/types.generated';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsWrapper } from '../../contacts/ContactsWrapper';
 
@@ -33,10 +32,6 @@ const PartnerCurrencyReportPage: React.FC = () => {
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };

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

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { sortBy } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { ReportContactFilterSetInput } from 'pages/api/graphql-rest.page.generated';
@@ -22,7 +22,6 @@ import {
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import { useDebouncedValue } from 'src/hooks/useDebounce';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { useContactFiltersQuery } from '../../contacts/Contacts.generated';
 import { ContactsWrapper } from '../../contacts/ContactsWrapper';
@@ -87,10 +86,6 @@ const PartnerGivingAnalysisReportPage: React.FC = () => {
     return [reportFilterGroup, ...groups];
   }, [filterData]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleSelectContact = (contactId: string) => {
     router.push(
       `/accountLists/${accountListId}/reports/partnerGivingAnalysis/${contactId}`,

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

@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,6 @@
 } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 
 const ResponsibilityCentersReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -26,10 +25,6 @@
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };

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

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +16,6 @@ import {
 import { FourteenMonthReportCurrencyType } from 'src/graphql/types.generated';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsWrapper } from '../../contacts/ContactsWrapper';
 
@@ -33,10 +32,6 @@ const SalaryCurrencyReportPage: React.FC = () => {
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };