[NOREF] HelpScout POC (#666)

* HelpScout POC enabled with LaunchDarkly * Revert changes to NDAWrapper that were from testing
CMS-Enterprise · Aug 22, 2023 · d32a4be · d32a4be
1 parent d4b1058
commit d32a4be
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 18 deletions.
diff --git a/.envrc b/.envrc
@@ -67,6 +67,9 @@ export REACT_APP_LD_CLIENT_ID=632afde9635ca2116a04e82e # Points to our "local" e
 export LD_TIMEOUT_SECONDS=30
 export FLAGDATA_FILE="./cypress/fixtures/flagdata.json" # File to load LD flag data from when FLAG_SOURCE=FILE
 
+# HelpScout configuration
+export REACT_APP_BEACON_ID="ad55e329-4722-4a83-b3d6-07af22f6edea"
+
 # Default minio credentials for local use
 export MINIO_HOST=localhost:9005
 export MINIO_ADDRESS="http://$MINIO_HOST"

diff --git a/.github/workflows/deploy_to_environment.yml b/.github/workflows/deploy_to_environment.yml
@@ -108,6 +108,7 @@ jobs:
           OKTA_CLIENT_ID: ${{ secrets.OKTA_CLIENT_ID }}
           OKTA_SERVER_ID: ${{ secrets.OKTA_SERVER_ID }}
           STATIC_S3_BUCKET: ${{ secrets.STATIC_S3_BUCKET }}
+          REACT_APP_BEACON_ID: ${{ secrets.REACT_APP_BEACON_ID }}
         run: |
           ./scripts/release_static
       - name: Invalidate CloudFront cache 

diff --git a/docker-compose.override.yml b/docker-compose.override.yml
@@ -43,6 +43,7 @@ services:
       - REACT_APP_LD_USER_HASH
       - REACT_APP_LD_CLIENT_ID
       - REACT_APP_LOCAL_AUTH_ENABLED
+      - REACT_APP_BEACON_ID
       - CHOKIDAR_USEPOLLING=true
       - ESLINT_NO_DEV_ERRORS=true
       - PORT=3005

diff --git a/public/index.html b/public/index.html
@@ -30,6 +30,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>CMS MINT</title>
+    <script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
   </head>
   <body>
     <noscript>Use MINT to go through the set of steps needed to get a Lifecycle ID from the Governance Review Board</noscript>

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -27,6 +27,7 @@ declare global {
 
    interface Window {
     Cypress: any;
+    Beacon: any;
     store: any;
   }
 }
diff --git a/src/types/flags.ts b/src/types/flags.ts
@@ -3,6 +3,7 @@ export type Flags = {
   downgradeAssessmentTeam: boolean;
   hideGroupView: boolean;
   shareExportEnabled: boolean;
+  helpScoutEnabled: boolean;
 };
 
 export type FlagsState = {

diff --git a/src/utils/user.test.ts b/src/utils/user.test.ts
@@ -42,7 +42,8 @@ describe('user', () => {
             downgradeAssessmentTeam: true,
             hideITLeadExperience: false,
             hideGroupView: true,
-            shareExportEnabled: false
+            shareExportEnabled: false,
+            helpScoutEnabled: false
           })
         ).toBe(false);
       });

diff --git a/src/views/App/index.tsx b/src/views/App/index.tsx
@@ -17,6 +17,7 @@ import { MessageProvider } from 'hooks/useMessage';
 import usePrevLocation from 'hooks/usePrevious';
 import AccessibilityStatement from 'views/AccessibilityStatement';
 import AuthenticationWrapper from 'views/AuthenticationWrapper';
+import BeaconWrapper from 'views/BeaconWrapper';
 import Cookies from 'views/Cookies';
 import FlagsWrapper from 'views/FlagsWrapper';
 import HelpAndKnowledge from 'views/HelpAndKnowledge';
@@ -232,22 +233,24 @@ const App = () => {
                 <MessageProvider>
                   <FlagsWrapper>
                     <UserInfoWrapper>
-                      <NDAWrapper>
-                        <ModelAccessWrapper>
-                          <ModelInfoWrapper>
-                            <TimeOutWrapper>
-                              <NavContextProvider>
-                                <PageWrapper>
-                                  <Header />
-                                  <TaskListBannerAlert />
-                                  <AppRoutes />
-                                  <Footer />
-                                </PageWrapper>
-                              </NavContextProvider>
-                            </TimeOutWrapper>
-                          </ModelInfoWrapper>
-                        </ModelAccessWrapper>
-                      </NDAWrapper>
+                      <BeaconWrapper>
+                        <NDAWrapper>
+                          <ModelAccessWrapper>
+                            <ModelInfoWrapper>
+                              <TimeOutWrapper>
+                                <NavContextProvider>
+                                  <PageWrapper>
+                                    <Header />
+                                    <TaskListBannerAlert />
+                                    <AppRoutes />
+                                    <Footer />
+                                  </PageWrapper>
+                                </NavContextProvider>
+                              </TimeOutWrapper>
+                            </ModelInfoWrapper>
+                          </ModelAccessWrapper>
+                        </NDAWrapper>
+                      </BeaconWrapper>
                     </UserInfoWrapper>
                   </FlagsWrapper>
                 </MessageProvider>

diff --git a/src/views/BeaconWrapper/index.tsx b/src/views/BeaconWrapper/index.tsx
@@ -0,0 +1,46 @@
+import React, { ReactNode, useEffect } from 'react';
+import { useOktaAuth } from '@okta/okta-react';
+import { useFlags } from 'launchdarkly-react-client-sdk';
+
+const BEACON_ID = process.env.REACT_APP_BEACON_ID;
+
+// BeaconWrapper manages the state necessary for child components to
+// use the useBeacon hook.
+const BeaconWrapper = ({ children }: { children: ReactNode }) => {
+  const [beaconInitialized, setBeaconInitialized] = React.useState(false);
+  const { authState } = useOktaAuth();
+  const flags = useFlags();
+
+  // Initialize / destroy the beacon based on authentication state
+  useEffect(() => {
+    const shouldShowBeacon =
+      authState?.isAuthenticated && flags?.helpScoutEnabled;
+    if (shouldShowBeacon && !beaconInitialized) {
+      window.Beacon('init', BEACON_ID);
+      setBeaconInitialized(true);
+
+      // Only identify if we have the information to do so
+      const name = authState?.idToken?.claims?.name;
+      const email = authState?.idToken?.claims?.email;
+      if (name && email) {
+        window.Beacon('identify', {
+          name,
+          email
+        });
+      }
+    } else if (!shouldShowBeacon && beaconInitialized) {
+      window.Beacon('destroy');
+      setBeaconInitialized(false);
+    }
+  }, [
+    authState?.isAuthenticated,
+    authState?.idToken?.claims?.name,
+    authState?.idToken?.claims?.email,
+    flags?.helpScoutEnabled,
+    beaconInitialized
+  ]);
+
+  return <>{children}</>;
+};
+
+export default BeaconWrapper;
diff --git a/src/views/FlagsWrapper/index.tsx b/src/views/FlagsWrapper/index.tsx
@@ -36,7 +36,8 @@ const UserTargetingWrapper = ({ children }: WrapperProps) => {
             hideITLeadExperience: true,
             downgradeAssessmentTeam: false,
             hideGroupView: true,
-            shareExportEnabled: false
+            shareExportEnabled: false,
+            helpScoutEnabled: false
           }
         });