add zendesk (#2156)

* MVP zendesk provider

* hide zendesk on mobile

* hide zendesk chat bubble on mobile too

* made mobile selector more robust

* made user menu full width

* removed zendesk react and instead use Nextjs Script

* updated NEXT_PUBLIC_ZENDESK_KEY env in example

Author: PeerRich

apps/api

@@ -99,3 +99,6 @@ CALENDSO_ENCRYPTION_KEY=
 
 # Intercom Config
 NEXT_PUBLIC_INTERCOM_APP_ID=
+
+# Zendesk Config
+NEXT_PUBLIC_ZENDESK_KEY=

apps/web/.env.example

@@ -19,7 +19,8 @@ import { Toaster } from "react-hot-toast";
 
 import LicenseBanner from "@ee/components/LicenseBanner";
 import TrialBanner from "@ee/components/TrialBanner";
-import HelpMenuItemDynamic from "@ee/lib/intercom/HelpMenuItemDynamic";
+import IntercomMenuItem from "@ee/lib/intercom/IntercomMenuItem";
+import ZendeskMenuItem from "@ee/lib/zendesk/ZendeskMenuItem";
 
 import classNames from "@lib/classNames";
 import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants";
@@ -459,7 +460,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               viewBox="0 0 2447.6 2452.5"
               className={classNames(
                 "text-gray-500 group-hover:text-gray-700",
-                "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2"
+                "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-4 rtl:ml-4"
               )}
               xmlns="http://www.w3.org/2000/svg">
               <g clipRule="evenodd" fillRule="evenodd">
@@ -489,7 +490,8 @@ 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>
-        <HelpMenuItemDynamic />
+        <IntercomMenuItem />
+        <ZendeskMenuItem />
         <DropdownMenuSeparator className="h-px bg-gray-200" />
         <DropdownMenuItem>
           <a

apps/web/components/Shell.tsx

@@ -29,7 +29,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
         {...props}
         className={`${
           props.portalled ? `` : `md:-ml-[55px]`
-        } z-10 mt-1 -ml-0 w-48 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
+        } z-10 mt-1 -ml-0 w-full origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
         ref={forwardedRef}>
         {children}
       </DropdownMenuPrimitive.Content>

apps/web/components/ui/Dropdown.tsx

@@ -0,0 +1,33 @@
+import { ChatAltIcon } from "@heroicons/react/solid";
+import { useIntercom } from "react-use-intercom";
+
+import classNames from "@lib/classNames";
+import { useLocale } from "@lib/hooks/useLocale";
+
+import { DropdownMenuItem } from "@components/ui/Dropdown";
+
+export default function IntercomMenuItem() {
+  const { t } = useLocale();
+  const { boot, show } = useIntercom();
+  if (!process.env.NEXT_PUBLIC_INTERCOM_APP_ID) return null;
+  else
+    return (
+      <DropdownMenuItem>
+        <button
+          onClick={() => {
+            boot();
+            show();
+          }}
+          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>
+    );
+}

apps/web/ee/lib/intercom/HelpMenuItem.tsx

@@ -0,0 +1,39 @@
+import { ChatAltIcon } from "@heroicons/react/solid";
+import Script from "next/script";
+import { useState } from "react";
+
+import classNames from "@lib/classNames";
+import { useLocale } from "@lib/hooks/useLocale";
+
+import { DropdownMenuItem } from "@components/ui/Dropdown";
+
+const ZENDESK_KEY = process.env.NEXT_PUBLIC_ZENDESK_KEY;
+
+export default function ZendeskMenuItem() {
+  const [active, setActive] = useState(false);
+  const { t } = useLocale();
+
+  if (!process.env.NEXT_PUBLIC_ZENDESK_KEY) return null;
+  else
+    return (
+      <>
+        <DropdownMenuItem>
+          <button
+            onClick={() => setActive(true)}
+            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 && (
+          <Script id="ze-snippet" src={"https://static.zdassets.com/ekr/snippet.js?key=" + ZENDESK_KEY} />
+        )}
+      </>
+    );
+}

apps/web/ee/lib/intercom/HelpMenuItemDynamic.tsx

@@ -155,9 +155,12 @@
   }
 }
 
-/* hide intercom chat bubble on mobile */
+/* hide chat bubble on mobile */
 @media only screen and (max-width: 768px) {
-  .intercom-launcher-frame {
+  #launcher {
+    display: none !important;
+  }
+  div[role="presentation"] > iframe {
     display: none !important;
   }
 }
@@ -169,13 +172,6 @@
   }
 }
 
-/* hide intercom chat bubble on mobile */
-@media only screen and (max-width: 768px) {
-  .intercom-launcher-frame {
-    display: none !important;
-  }
-}
-
 .react-multi-email > [type="text"] {
   @apply focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:text-sm;
 }