replace discord with intercom pop up (#3839)

dashboard/src/assets/chat.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4666 9.86644V5.06644C19.4666 3.88823 18.5114 2.93311 17.3332 2.93311H4.53324C3.35503 2.93311 2.3999 3.88823 2.3999 5.06644V13.4143C2.3999 14.5925 3.35503 15.5476 4.53324 15.5476H6.2028V19.9998L10.655 15.5476H10.9332M16.4405 18.2838L19.2231 21.0664V18.2838H19.4666C20.6448 18.2838 21.5999 17.3287 21.5999 16.1505V12.5331C21.5999 11.3549 20.6448 10.3998 19.4666 10.3998H13.0666C11.8884 10.3998 10.9332 11.3549 10.9332 12.5331V16.1505C10.9332 17.3287 11.8884 18.2838 13.0666 18.2838H16.4405Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/main/home/navbar/Help.tsx

@@ -1,35 +1,26 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
+import community from "assets/chat.svg";
+import { useIntercom } from "lib/hooks/useIntercom";
 
-import { Context } from "shared/Context";
-import discordLogo from "../../../assets/discord.svg";
+type HelpProps = {};
 
-type PropsType = {};
+const Help: React.FC<HelpProps> = () => {
+  const [showHelpDropdown, setShowHelpDropdown] = useState(false);
 
-type StateType = {
-  showHelpDropdown: boolean;
-};
-
-export default class Help extends Component<PropsType, StateType> {
-  state = {
-    showHelpDropdown: false,
-  };
+  const { showIntercomWithMessage } = useIntercom();
 
-  renderHelpDropdown = () => {
-    if (this.state.showHelpDropdown) {
+  const renderHelpDropdown = () => {
+    if (showHelpDropdown) {
       return (
         <>
           <CloseOverlay
-            onClick={() =>
-              this.setState({
-                showHelpDropdown: false,
-              })
-            }
+            onClick={() => setShowHelpDropdown(false)}
           />
           <Dropdown dropdownWidth="155px" dropdownMaxHeight="300px">
             <Option
               onClick={() => {
-                window.open("https://docs.porter.run", "_blank").focus();
+                window.open("https://docs.porter.run", "_blank")?.focus();
               }}
             >
               <i className="material-icons-outlined">book</i>
@@ -37,11 +28,11 @@ export default class Help extends Component<PropsType, StateType> {
             </Option>
             <Option
               onClick={() => {
-                window.open("https://discord.gg/Vbse9vJtPU", "_blank").focus();
+                showIntercomWithMessage({ message: "I need help with...", delaySeconds: 0 });
               }}
             >
-              <Icon src={discordLogo} />
-              Community
+              <Icon src={community} />
+              Talk to us
             </Option>
           </Dropdown>
         </>
@@ -49,26 +40,18 @@ export default class Help extends Component<PropsType, StateType> {
     }
   };
 
-  render() {
-    return (
-      <FeedbackButton selected={this.state.showHelpDropdown === true}>
-        <Flex
-          onClick={() =>
-            this.setState({
-              showHelpDropdown: !this.state.showHelpDropdown,
-            })
-          }
-        >
-          <i className="material-icons-outlined">help_outline</i>
-          Help
-        </Flex>
-        {this.renderHelpDropdown()}
-      </FeedbackButton>
-    );
-  }
-}
+  return (
+    <FeedbackButton selected={showHelpDropdown === true}>
+      <Flex onClick={() => setShowHelpDropdown(!showHelpDropdown)}>
+        <i className="material-icons-outlined">help_outline</i>
+        Help
+      </Flex>
+      {renderHelpDropdown()}
+    </FeedbackButton>
+  );
+};
 
-Help.contextType = Context;
+export default Help;
 
 const Option = styled.div`
   margin-left: 12px;