added helpscout (#2204)

* added helpscout

* nit

* moved all help apps into its own component

* added helpscout to .env.example

apps/web/.env.example

@@ -102,5 +102,8 @@ NEXT_PUBLIC_INTERCOM_APP_ID=
 # Zendesk Config
 NEXT_PUBLIC_ZENDESK_KEY=
 
+# Help Scout Config
+NEXT_PUBLIC_HELPSCOUT_KEY=
+
 # Set it to "1" if you need to run E2E tests locally
 NEXT_PUBLIC_IS_E2E=

apps/web/components/Shell.tsx

@@ -26,8 +26,7 @@ import Dropdown, {
 } from "@calcom/ui/Dropdown";
 import LicenseBanner from "@ee/components/LicenseBanner";
 import TrialBanner from "@ee/components/TrialBanner";
-import IntercomMenuItem from "@ee/lib/intercom/IntercomMenuItem";
-import ZendeskMenuItem from "@ee/lib/zendesk/ZendeskMenuItem";
+import HelpMenuItem from "@ee/components/support/HelpMenuItem";
 
 import classNames from "@lib/classNames";
 import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants";
@@ -490,8 +489,9 @@ function UserDropdown({ small }: { small?: boolean }) {
             <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
           </a>
         </DropdownMenuItem>
-        <IntercomMenuItem />
-        <ZendeskMenuItem />
+
+        <HelpMenuItem />
+
         <DropdownMenuSeparator className="h-px bg-gray-200" />
         <DropdownMenuItem>
           <a

apps/web/ee/components/support/HelpMenuItem.tsx

@@ -0,0 +1,13 @@
+import HelpscoutMenuItem from "@ee/lib/helpscout/HelpscoutMenuItem";
+import IntercomMenuItem from "@ee/lib/intercom/IntercomMenuItem";
+import ZendeskMenuItem from "@ee/lib/zendesk/ZendeskMenuItem";
+
+export default function HelpMenuItem() {
+  return (
+    <>
+      <IntercomMenuItem />
+      <ZendeskMenuItem />
+      <HelpscoutMenuItem />
+    </>
+  );
+}

apps/web/ee/lib/helpscout/HelpscoutMenuItem.tsx

@@ -0,0 +1,42 @@
+import { ChatAltIcon } from "@heroicons/react/solid";
+import { useState } from "react";
+import { HelpScout, useChat } from "react-live-chat-loader";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { DropdownMenuItem } from "@calcom/ui/Dropdown";
+
+import classNames from "@lib/classNames";
+
+export default function HelpscoutMenuItem() {
+  const { t } = useLocale();
+  const [active, setActive] = useState(false);
+
+  const [state, loadChat] = useChat();
+
+  function handleClick() {
+    setActive(true);
+    loadChat({ open: true });
+  }
+
+  if (!process.env.NEXT_PUBLIC_HELPSCOUT_KEY) return null;
+  else
+    return (
+      <>
+        <DropdownMenuItem>
+          <button
+            onClick={handleClick}
+            className="flex w-full px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900">
+            <ChatAltIcon
+              className={classNames(
+                "text-neutral-400 group-hover:text-neutral-500",
+                "h-5 w-5 flex-shrink-0 ltr:mr-2"
+              )}
+              aria-hidden="true"
+            />
+            {t("help")}
+          </button>
+        </DropdownMenuItem>
+        {active && <HelpScout color="#292929" icon="message" horizontalPosition="right" zIndex="1" />}
+      </>
+    );
+}

apps/web/ee/lib/helpscout/provider.tsx

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { LiveChatLoaderProvider } from "react-live-chat-loader";
+
+const Provider: FC = ({ children }) => (
+  <LiveChatLoaderProvider providerKey={process.env.NEXT_PUBLIC_HELPSCOUT_KEY!} provider="helpScout">
+    <>{children}</>
+  </LiveChatLoaderProvider>
+);
+
+export default Provider;

apps/web/ee/lib/helpscout/providerDynamic.tsx

@@ -0,0 +1,8 @@
+import dynamic from "next/dynamic";
+import { Fragment } from "react";
+
+const DynamicHelpscoutProvider = process.env.NEXT_PUBLIC_HELPSCOUT_KEY
+  ? dynamic(() => import("./provider"))
+  : Fragment;
+
+export default DynamicHelpscoutProvider;

apps/web/ee/lib/zendesk/ZendeskMenuItem.tsx

@@ -2,10 +2,10 @@ import { ChatAltIcon } from "@heroicons/react/solid";
 import Script from "next/script";
 import { useState } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { DropdownMenuItem } from "@calcom/ui/Dropdown";
 
 import classNames from "@lib/classNames";
-import { useLocale } from "@lib/hooks/useLocale";
 
 const ZENDESK_KEY = process.env.NEXT_PUBLIC_ZENDESK_KEY;
 

apps/web/lib/app-providers.tsx

@@ -3,7 +3,10 @@ import { SessionProvider } from "next-auth/react";
 import { appWithTranslation } from "next-i18next";
 import type { AppProps as NextAppProps } from "next/app";
 import React, { ComponentProps, ReactNode } from "react";
+import { LiveChatLoaderProvider } from "react-live-chat-loader";
+import { HelpScout } from "react-live-chat-loader";
 
+import DynamicHelpscoutProvider from "@ee/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@ee/lib/intercom/providerDynamic";
 
 import usePublicPage from "@lib/hooks/usePublicPage";
@@ -55,7 +58,9 @@ const AppProviders = (props: AppPropsWithChildren) => {
         {isPublicPage ? (
           RemainingProviders
         ) : (
-          <DynamicIntercomProvider>{RemainingProviders}</DynamicIntercomProvider>
+          <DynamicHelpscoutProvider>
+            <DynamicIntercomProvider>{RemainingProviders}</DynamicIntercomProvider>
+          </DynamicHelpscoutProvider>
         )}
       </IdProvider>
     </TelemetryProvider>

apps/web/package.json

@@ -87,6 +87,7 @@
     "react-hook-form": "^7.20.4",
     "react-hot-toast": "^2.1.0",
     "react-intl": "^5.22.0",
+    "react-live-chat-loader": "^2.7.3",
     "react-multi-email": "^0.5.3",
     "react-phone-number-input": "^3.1.41",
     "react-query": "^3.33.7",

apps/web/styles/globals.css

@@ -165,12 +165,23 @@ button[role="switch"][data-state="checked"] span {
 
 /* hide chat bubble on mobile */
 @media only screen and (max-width: 768px) {
+  /* Intercom FAB*/
   #launcher {
     display: none !important;
   }
+
+  /* Zendesk FAB*/
   div[role="presentation"] > iframe {
     display: none !important;
   }
+
+  /* Helpscout FAB*/
+  .BeaconFabButtonFrame {
+    margin-left: -30px;
+    left: 50%;
+    bottom: 28px !important;
+    z-index: 1058 !important;
+  }
 }
 
 /* add padding bottom to bottom nav on standalone mode */

apps/website

@@ -1 +1 @@
-Subproject commit 0c5841db96243e93ffda5cc6c26a1ea89b4bd1e3
+Subproject commit e54a7cc0ecbb36a5a6838f77d8c19ec008c8849a