replacing intercom with helpscout (#7865)

Co-authored-by: nafees nazik <nafeesnazik21@gmail.com>

apps/web/pages/settings/billing/index.tsx

@@ -1,7 +1,6 @@
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { HelpScout, useChat } from "react-live-chat-loader";
 
+import { useIntercom } from "@calcom/features/ee/support/lib/intercom/useIntercom";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
@@ -33,15 +32,13 @@ const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
 
 const BillingView = () => {
   const { t } = useLocale();
-  const [, loadChat] = useChat();
-  const [showChat, setShowChat] = useState(false);
+  const { open } = useIntercom();
   const router = useRouter();
   const returnTo = router.asPath;
   const billingHref = `/api/integrations/stripepayment/portal?returnTo=${WEBAPP_URL}${returnTo}`;
 
   const onContactSupportClick = () => {
-    setShowChat(true);
-    loadChat({ open: true });
+    open();
   };
 
   return (
@@ -61,7 +58,6 @@ const BillingView = () => {
             {t("contact_support")}
           </Button>
         </CtaRow>
-        {showChat && <HelpScout color="#292929" icon="message" horizontalPosition="right" zIndex="1" />}
       </div>
     </>
   );

packages/features/ee/support/components/HelpMenuItem.tsx

@@ -9,6 +9,7 @@ import { FiExternalLink, FiAlertTriangle } from "@calcom/ui/components/icon";
 
 import { useFreshChat } from "../lib/freshchat/FreshChatProvider";
 import { isFreshChatEnabled } from "../lib/freshchat/FreshChatScript";
+import { isInterComEnabled, useIntercom } from "../lib/intercom/useIntercom";
 import ContactMenuItem from "./ContactMenuItem";
 
 interface HelpMenuItemProps {
@@ -17,6 +18,7 @@ interface HelpMenuItemProps {
 
 export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
   const [rating, setRating] = useState<null | string>(null);
+  const { open } = useIntercom();
   const [comment, setComment] = useState("");
   const [disableSubmit, setDisableSubmit] = useState(true);
   const [active, setActive] = useState(false);
@@ -52,20 +54,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           target="_blank"
           className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
           rel="noreferrer">
-          {t("support_documentation")}
-          <FiExternalLink
-            className={classNames(
-              "text-gray-400 group-hover:text-gray-500",
-              "ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
-            )}
-          />
-        </a>
-        <a
-          href="https://developer.cal.com/"
-          target="_blank"
-          className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-          rel="noreferrer">
-          {t("developer_documentation")}
+          {t("documentation")}
           <FiExternalLink
             className={classNames(
               "text-gray-400 group-hover:text-gray-500",
@@ -207,9 +196,12 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
             setActive(true);
             if (isFreshChatEnabled) {
               setFreshChat(true);
+            } else if (isInterComEnabled) {
+              open();
             } else {
               loadChat({ open: true });
             }
+
             onHelpItemSelect();
           }}>
           {t("contact_support")}

packages/features/ee/support/lib/freshchat/FreshChatScript.tsx

@@ -1,7 +1,9 @@
 import Script from "next/script";
+import { z } from "zod";
 
 import { trpc } from "@calcom/trpc/react";
 
+const nonEmptySchema = z.string().min(1);
 declare global {
   interface Window {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14,7 +16,8 @@ const host = process.env.NEXT_PUBLIC_FRESHCHAT_HOST;
 // eslint-disable-next-line turbo/no-undeclared-env-vars
 const token = process.env.NEXT_PUBLIC_FRESHCHAT_TOKEN;
 
-export const isFreshChatEnabled = host !== "undefined" && token !== "undefined";
+export const isFreshChatEnabled =
+  nonEmptySchema.safeParse(host).success && nonEmptySchema.safeParse(token).success;
 
 export default function FreshChatScript() {
   const { data } = trpc.viewer.me.useQuery();

packages/features/ee/support/lib/intercom/IntercomMenuItem.tsx

@@ -9,15 +9,14 @@ interface IntercomMenuItemProps {
 export default function IntercomMenuItem(props: IntercomMenuItemProps) {
   const { onHelpItemSelect } = props;
   const { t } = useLocale();
-  const { boot, show } = useIntercom();
+  const { open } = useIntercom();
   // eslint-disable-next-line turbo/no-undeclared-env-vars
   if (!process.env.NEXT_PUBLIC_INTERCOM_APP_ID) return null;
 
   return (
     <button
       onClick={() => {
-        boot();
-        show();
+        open();
         onHelpItemSelect();
       }}
       className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900">

packages/features/ee/support/lib/intercom/useIntercom.ts

@@ -1,12 +1,51 @@
 import noop from "lodash/noop";
-import { useIntercom as _useIntercom } from "react-use-intercom";
+import { useIntercom as useIntercomLib } from "react-use-intercom";
+import { z } from "zod";
 
-export const useIntercom =
-  typeof window !== "undefined" && !!process.env.NEXT_PUBLIC_INTERCOM_APP_ID
-    ? _useIntercom
-    : () => ({
+import dayjs from "@calcom/dayjs";
+import { CAL_URL } from "@calcom/lib/constants";
+import { useHasTeamPlan, useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
+import { trpc } from "@calcom/trpc/react";
+
+// eslint-disable-next-line turbo/no-undeclared-env-vars
+export const isInterComEnabled = z.string().min(1).safeParse(process.env.NEXT_PUBLIC_INTERCOM_APP_ID).success;
+
+const useIntercomHook = isInterComEnabled
+  ? useIntercomLib
+  : () => {
+      return {
         boot: noop,
         show: noop,
-      });
+      };
+    };
+
+export const useIntercom = () => {
+  const hookData = useIntercomHook();
+  const { data } = trpc.viewer.me.useQuery();
+  const { hasPaidPlan } = useHasPaidPlan();
+  const { hasTeamPlan } = useHasTeamPlan();
+
+  const open = () => {
+    hookData.boot({
+      name: data?.name ?? "",
+      email: data?.email,
+      userId: String(data?.id),
+      createdAt: String(dayjs(data?.createdDate).unix()),
+      customAttributes: {
+        //keys should be snake cased
+        user_name: data?.username,
+        link: CAL_URL + "/" + data?.username,
+        identity_provider: data?.identityProvider,
+        timezone: data?.timeZone,
+        locale: data?.locale,
+        has_paid_plan: hasPaidPlan,
+        has_team_plan: hasTeamPlan,
+        metadata: data?.metadata,
+      },
+    });
+    hookData.show();
+  };
+  return { ...hookData, open };
+};
 
 export default useIntercom;