Added Intercom back

adding intercom back into the app, dropdown menu and search modal

components/core/ApplicationUserControls.js

@@ -8,6 +8,7 @@ import { css } from "@emotion/react";
 import { Link } from "~/components/core/Link";
 
 import { Boundary } from "~/components/system/components/fragments/Boundary";
+import { useIntercom } from "react-use-intercom";
 
 const STYLES_HEADER = css`
   position: relative;
@@ -101,6 +102,30 @@ const STYLES_ITEM_BOX = css`
   }
 `;
 
+const OpenIntercom = ({ user, onTogglePopup }) => {
+  const { show, update } = useIntercom();
+
+  return (
+    <span
+      style={{ cursor: "pointer", display: "block" }}
+      onClick={() => {
+        onTogglePopup();
+        update({
+          name: user.data.name,
+          email: user.email,
+          customAttributes: {
+            slate_userid: user.id,
+            username: user.username,
+          },
+        });
+        show();
+      }}
+    >
+      Help
+    </span>
+  );
+};
+
 export class ApplicationUserControlsPopup extends React.Component {
   _handleAction = (props) => {
     this.props.onTogglePopup();
@@ -201,14 +226,13 @@ export class ApplicationUserControlsPopup extends React.Component {
         ],
         [
           {
-            text: "Help",
-            onClick: (e) => {
-              e.stopPropagation();
-              this._handleAction({
-                type: "SIDEBAR",
-                value: "SIDEBAR_HELP",
-              });
-            },
+            text: (
+              <OpenIntercom
+                style={{ display: "block" }}
+                user={this.props.viewer}
+                onTogglePopup={this.props.onTogglePopup}
+              />
+            ),
           },
           {
             text: "Sign out",

components/core/SearchModal.js

@@ -1256,6 +1256,8 @@ export class SearchModal extends React.Component {
               </div>
 
               <div css={STYLES_BOTTOM_BUTTONS}>
+                <OpenIntercom user={this.props.viewer} />
+
                 <span
                   style={{ marginRight: 24, cursor: "pointer" }}
                   onClick={() => {

pages/_app.js

@@ -5,6 +5,9 @@ import * as React from "react";
 
 import { Global } from "@emotion/react";
 import { injectGlobalStyles, injectCodeBlockStyles } from "~/common/styles/global";
+import { IntercomProvider } from 'react-use-intercom';
+
+const INTERCOM_APP_ID = 'jwgbampk';
 
 // NOTE(wwwjim):
 // https://nextjs.org/docs/advanced-features/custom-app
@@ -15,7 +18,9 @@ function MyApp({ Component, pageProps }) {
         <script src="//cdn.iframe.ly/embed.js" async></script>
         <Global styles={injectGlobalStyles()} />
         <Global styles={injectCodeBlockStyles()} />
-        <Component {...pageProps} />
+        <IntercomProvider appId={INTERCOM_APP_ID} autoBoot>
+          <Component {...pageProps} />
+        </IntercomProvider>
       </React.Fragment>
     </ThemeProvider>
   );