chore: crisp integration (#552)

* feat: block sync

* chore: crisp integration

* fix: chat with us icon

apps/app/components/workspace/help-section.tsx

@@ -1,8 +1,14 @@
 import { useState, useRef, FC } from "react";
-import { Transition } from "@headlessui/react";
+
 import Link from "next/link";
+
+// headless ui
+import { Transition } from "@headlessui/react";
+// hooks
+import useTheme from "hooks/use-theme";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // icons
-import { ArrowLongLeftIcon, InboxIcon } from "@heroicons/react/24/outline";
+import { ArrowLongLeftIcon, ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
 import {
   QuestionMarkCircleIcon,
   BoltIcon,
@@ -10,9 +16,6 @@ import {
   DiscordIcon,
   GithubIcon,
 } from "components/icons";
-// hooks
-import useTheme from "hooks/use-theme";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
 const helpOptions = [
   {
@@ -31,9 +34,10 @@ const helpOptions = [
     Icon: GithubIcon,
   },
   {
-    name: "Email us",
-    href: "mailto:hello@plane.so",
-    Icon: InboxIcon,
+    name: "Chat with us",
+    href: null,
+    onClick: () => (window as any).$crisp.push(["do", "chat:show"]),
+    Icon: ChatBubbleOvalLeftEllipsisIcon,
   },
 ];
 
@@ -119,20 +123,35 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
           leaveTo="transform opacity-0 scale-95"
         >
           <div
-            className={`absolute bottom-2 ${helpOptionMode}  space-y-2 rounded-sm bg-white py-3 shadow-md`}
+            className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-white p-1 shadow-md`}
             ref={helpOptionsRef}
           >
-            {helpOptions.map(({ name, Icon, href }) => (
-              <Link href={href} key={name}>
-                <a
-                  target="_blank"
-                  className="mx-3 flex items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-2 text-xs hover:bg-gray-100"
-                >
-                  <Icon className="h-5 w-5 text-gray-500" />
-                  <span className="text-sm">{name}</span>
-                </a>
-              </Link>
-            ))}
+            {helpOptions.map(({ name, Icon, href, onClick }) => {
+              if (href)
+                return (
+                  <Link href={href} key={name}>
+                    <a
+                      target="_blank"
+                      className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-gray-100"
+                    >
+                      <Icon className="h-4 w-4 text-gray-500" />
+                      <span className="text-sm">{name}</span>
+                    </a>
+                  </Link>
+                );
+              else
+                return (
+                  <button
+                    key={name}
+                    type="button"
+                    onClick={onClick ? onClick : undefined}
+                    className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-gray-100"
+                  >
+                    <Icon className="h-4 w-4 text-gray-500" />
+                    <span className="text-sm">{name}</span>
+                  </button>
+                );
+            })}
           </div>
         </Transition>
       </div>

apps/app/constants/crisp.tsx

@@ -0,0 +1,44 @@
+import useUser from "hooks/use-user";
+import { useCallback, useEffect } from "react";
+
+declare global {
+  interface Window {
+    $crisp: any;
+    CRISP_WEBSITE_ID: any;
+  }
+}
+
+const Crisp = () => {
+  const { user } = useUser();
+
+  const validateCurrentUser = useCallback(() => {
+    const currentUser = user ? user : null;
+
+    if (currentUser && currentUser.email) return currentUser.email;
+
+    return null;
+  }, [user]);
+
+  useEffect(() => {
+    if (typeof window && validateCurrentUser()) {
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_ID;
+      (function () {
+        var d = document;
+        var s = d.createElement("script");
+        s.src = "https://client.crisp.chat/l.js";
+        s.async = true;
+        d.getElementsByTagName("head")[0].appendChild(s);
+        // defining email when logged in
+        if (validateCurrentUser()) {
+          window.$crisp.push(["set", "user:email", [validateCurrentUser()]]);
+          window.$crisp.push(["do", "chat:hide"]);
+          window.$crisp.push(["do", "chat:close"]);
+        }
+      })();
+    }
+  }, [validateCurrentUser]);
+
+  return <></>;
+};
+export default Crisp;

apps/app/pages/_app.tsx

@@ -1,3 +1,5 @@
+import dynamic from "next/dynamic";
+
 // styles
 import "styles/globals.css";
 import "styles/editor.css";
@@ -16,6 +18,8 @@ import { ThemeContextProvider } from "contexts/theme.context";
 // types
 import type { AppProps } from "next/app";
 
+const CrispWithNoSSR = dynamic(() => import("constants/crisp"), { ssr: false });
+
 // nprogress
 NProgress.configure({ showSpinner: false });
 Router.events.on("routeChangeStart", NProgress.start);
@@ -27,6 +31,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     <UserProvider>
       <ToastContextProvider>
         <ThemeContextProvider>
+          <CrispWithNoSSR />
           <Component {...pageProps} />
         </ThemeContextProvider>
       </ToastContextProvider>

turbo.json

@@ -13,7 +13,8 @@
     "NEXT_PUBLIC_GITHUB_APP_NAME",
     "NEXT_PUBLIC_ENABLE_SENTRY",
     "NEXT_PUBLIC_ENABLE_OAUTH",
-    "NEXT_PUBLIC_UNSPLASH_ACCESS"
+    "NEXT_PUBLIC_UNSPLASH_ACCESS",
+    "NEXT_PUBLIC_CRISP_ID"
   ],
   "pipeline": {
     "build": {