added helpscout (#2204)

* added helpscout

* nit

* moved all help apps into its own component

* added helpscout to .env.example
This commit is contained in:
Peer Richelsen 2022-03-18 15:09:13 +00:00 committed by GitHub
parent 3c845cb226
commit 94f6c80d57
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 100 additions and 7 deletions

View file

@ -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=

View file

@ -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

View file

@ -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 />
</>
);
}

View file

@ -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" />}
</>
);
}

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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>

View file

@ -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",

View file

@ -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 */

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