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
This commit is contained in:
parent
04cd821a57
commit
9831845d27
11 changed files with 1145 additions and 107 deletions
2
apps/api
2
apps/api
|
@ -1 +1 @@
|
|||
Subproject commit 63e0ca33e95583a5e2aae69195af052fd0d9aef8
|
||||
Subproject commit 378cbf8f3a67ea7877296f1da02edb2b6e3efbce
|
|
@ -99,3 +99,6 @@ CALENDSO_ENCRYPTION_KEY=
|
|||
|
||||
# Intercom Config
|
||||
NEXT_PUBLIC_INTERCOM_APP_ID=
|
||||
|
||||
# Zendesk Config
|
||||
NEXT_PUBLIC_ZENDESK_KEY=
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,33 +0,0 @@
|
|||
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";
|
||||
|
||||
const HelpMenuItem = () => {
|
||||
const { t } = useLocale();
|
||||
const { boot, show } = useIntercom();
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpMenuItem;
|
|
@ -1,8 +0,0 @@
|
|||
import dynamic from "next/dynamic";
|
||||
import { Fragment } from "react";
|
||||
|
||||
const HelpMenuItemDynamic = process.env.NEXT_PUBLIC_INTERCOM_APP_ID
|
||||
? dynamic(() => import("./HelpMenuItem"))
|
||||
: Fragment;
|
||||
|
||||
export default HelpMenuItemDynamic;
|
33
apps/web/ee/lib/intercom/IntercomMenuItem.tsx
Normal file
33
apps/web/ee/lib/intercom/IntercomMenuItem.tsx
Normal file
|
@ -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>
|
||||
);
|
||||
}
|
39
apps/web/ee/lib/zendesk/ZendeskMenuItem.tsx
Normal file
39
apps/web/ee/lib/zendesk/ZendeskMenuItem.tsx
Normal file
|
@ -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} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -1 +1 @@
|
|||
Subproject commit 822263db61f0fc40034a20916fc4a21abbed8572
|
||||
Subproject commit 7f0e321c333c63158af536a814dd4f4cb477c89a
|
Loading…
Reference in a new issue