added helpscout (#2204)
* added helpscout * nit * moved all help apps into its own component * added helpscout to .env.example
This commit is contained in:
parent
3c845cb226
commit
94f6c80d57
11 changed files with 100 additions and 7 deletions
|
@ -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=
|
||||
|
|
|
@ -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
|
||||
|
|
13
apps/web/ee/components/support/HelpMenuItem.tsx
Normal file
13
apps/web/ee/components/support/HelpMenuItem.tsx
Normal 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 />
|
||||
</>
|
||||
);
|
||||
}
|
42
apps/web/ee/lib/helpscout/HelpscoutMenuItem.tsx
Normal file
42
apps/web/ee/lib/helpscout/HelpscoutMenuItem.tsx
Normal 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" />}
|
||||
</>
|
||||
);
|
||||
}
|
10
apps/web/ee/lib/helpscout/provider.tsx
Normal file
10
apps/web/ee/lib/helpscout/provider.tsx
Normal 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;
|
8
apps/web/ee/lib/helpscout/providerDynamic.tsx
Normal file
8
apps/web/ee/lib/helpscout/providerDynamic.tsx
Normal 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;
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
|
Loading…
Reference in a new issue