From 4764e11d5c24ba437ef7f5e520d338cba6e11899 Mon Sep 17 00:00:00 2001 From: Pawan Jain Date: Wed, 4 Dec 2024 19:26:00 +0530 Subject: [PATCH] feat: add plain chat buttons --- apps/dashboard/.env.example | 1 + apps/dashboard/index.html | 11 +- .../customer-support-button.tsx | 132 +++++++++++++++++- apps/dashboard/src/config/index.ts | 2 + apps/web/.env.dashboard | 1 + .../layout/components/v2/HeaderNav.tsx | 57 +++++--- 6 files changed, 177 insertions(+), 27 deletions(-) diff --git a/apps/dashboard/.env.example b/apps/dashboard/.env.example index 783f2dcda4d..442a62755f8 100644 --- a/apps/dashboard/.env.example +++ b/apps/dashboard/.env.example @@ -8,3 +8,4 @@ VITE_NOVU_APP_ID= VITE_INTERCOM_APP_ID= VITE_GTM= VITE_SELF_HOSTED= +VITE_PLAIN_SUPPORT_CHAT_APP_ID= diff --git a/apps/dashboard/index.html b/apps/dashboard/index.html index 40a53d82106..9692a986878 100644 --- a/apps/dashboard/index.html +++ b/apps/dashboard/index.html @@ -52,7 +52,16 @@ type="text/javascript" > <% } %> - + <% if (env.VITE_PLAIN_SUPPORT_CHAT_APP_ID) { %> + + <% } %>
diff --git a/apps/dashboard/src/components/header-navigation/customer-support-button.tsx b/apps/dashboard/src/components/header-navigation/customer-support-button.tsx index a01cfa9e712..68cd17c95b5 100644 --- a/apps/dashboard/src/components/header-navigation/customer-support-button.tsx +++ b/apps/dashboard/src/components/header-navigation/customer-support-button.tsx @@ -1,14 +1,140 @@ +import { useEffect, useState } from 'react'; import { useBootIntercom } from '@/hooks/use-boot-intercom'; -import { RiCustomerService2Line } from 'react-icons/ri'; +import { RiQuestionFill } from 'react-icons/ri'; import { HeaderButton } from './header-button'; +import { PLAIN_SUPPORT_CHAT_APP_ID } from '@/config'; +import { useAuth } from '@/context/auth/hooks'; export const CustomerSupportButton = () => { + const [isFirstRender, setIsFirstRender] = useState(true); + const { currentOrganization, currentUser } = useAuth(); + + const isLiveChatVisible = + currentOrganization?.apiServiceLevel !== 'free' && + currentUser?.servicesHashes?.plain && + PLAIN_SUPPORT_CHAT_APP_ID !== undefined; + useBootIntercom(); + useEffect(() => { + if (isFirstRender && isLiveChatVisible) { + try { + // @ts-ignore + window.Plain.init({ + appId: PLAIN_SUPPORT_CHAT_APP_ID, + hideLauncher: true, + title: 'Chat with us', + links: [ + { + icon: 'book', + text: 'Documentation', + url: 'https://docs.novu.co?utm_campaign=in_app_live_chat', + }, + { + icon: 'link', + text: 'Contact Sales', + url: 'https://notify.novu.co/meetings/novuhq/novu-discovery-session-rr?utm_campaign=in_app_live_chat', + }, + ], + entryPoint: 'default', + theme: 'light', + customerDetails: { + email: currentUser?.email, + emailHash: currentUser?.servicesHashes?.plain, + }, + style: { + brandColor: '#DD2450', + launcherBackgroundColor: '#FFFFFF', + launcherIconColor: '#FFFFFF', + }, + + logo: { + url: 'https://dashboard.novu.co/static/images/novu.png', + alt: 'Novu Logo', + }, + chatButtons: [ + { + icon: 'chat', + text: 'Ask a question', + threadDetails: { + // "Question" + labelTypeIds: ['lt_01JCJ36RM5P6QSYWXPB3FNC3QF'], + }, + }, + { + icon: 'bulb', + text: 'Share Feedback', + threadDetails: { + // "Insight" + labelTypeIds: ['lt_01JCKS50M6D1568DSJ1Q9CHFF2'], + }, + }, + { + icon: 'bug', + text: 'Report a bug', + form: { + fields: [ + { + type: 'dropdown', + placeholder: 'Severity of the bug..', + options: [ + { + icon: 'integration', + text: 'Unable to access the application', + threadDetails: { + // "Critical Severity, Bug" + labelTypeIds: ['lt_01JA88XK1N11JBBV55ZMYMEH85', 'lt_01JA88XK1N11JBBV55ZMYMEH85'], + }, + }, + { + icon: 'error', + text: 'Significant functionality impacted', + threadDetails: { + // "High Severity, Bug" + labelTypeIds: ['lt_01JE5V8FK3SHPR6N7XMDW8N005', 'lt_01JA88XK1N11JBBV55ZMYMEH85'], + }, + }, + { + icon: 'bug', + text: 'Minor inconvenience or issue', + threadDetails: { + // "Low Severity, Bug" + labelTypeIds: ['lt_01JE5V7R152BN3A9Z1R2251F1A', 'lt_01JA88XK1N11JBBV55ZMYMEH85'], + }, + }, + ], + }, + ], + }, + }, + ], + }); + } catch (error) { + console.error('error initializing plain chat', error); + } + } + setIsFirstRender(false); + }, [isLiveChatVisible, currentUser, isFirstRender]); + + const showPlainLiveChat = () => { + if (isLiveChatVisible) { + try { + // @ts-ignore + window?.Plain?.open(); + } catch (error) { + console.error('error opening plain chat', error); + } + } + }; return ( - ); diff --git a/apps/dashboard/src/config/index.ts b/apps/dashboard/src/config/index.ts index 12343c3ee6c..67bb8f04ff9 100644 --- a/apps/dashboard/src/config/index.ts +++ b/apps/dashboard/src/config/index.ts @@ -29,3 +29,5 @@ export const MIXPANEL_KEY = import.meta.env.VITE_MIXPANEL_KEY; export const LEGACY_DASHBOARD_URL = import.meta.env.VITE_LEGACY_DASHBOARD_URL; export const NEW_DASHBOARD_FEEDBACK_FORM_URL = import.meta.env.VITE_NEW_DASHBOARD_FEEDBACK_FORM_URL; + +export const PLAIN_SUPPORT_CHAT_APP_ID = import.meta.env.VITE_PLAIN_SUPPORT_CHAT_APP_ID; diff --git a/apps/web/.env.dashboard b/apps/web/.env.dashboard index 4616fcb4f44..af7584c54e3 100644 --- a/apps/web/.env.dashboard +++ b/apps/web/.env.dashboard @@ -21,3 +21,4 @@ REACT_APP_CLERK_PUBLISHABLE_KEY=pk_test_Zmlyc3QtYmFib29uLTUwLmNsZXJrLmFjY291bnRz REACT_APP_IS_EE_AUTH_ENABLED=true FRONT_BASE_CONTEXT_PATH=/legacy REACT_IS_UNDER_DASHBOARD=true +REACT_APP_PLAIN_SUPPORT_CHAT_APP_ID= diff --git a/apps/web/src/components/layout/components/v2/HeaderNav.tsx b/apps/web/src/components/layout/components/v2/HeaderNav.tsx index de7a75dff00..1d35d1cde6d 100644 --- a/apps/web/src/components/layout/components/v2/HeaderNav.tsx +++ b/apps/web/src/components/layout/components/v2/HeaderNav.tsx @@ -46,34 +46,45 @@ export function HeaderNav() { useEffect(() => { if (isLiveChatVisible && isFirstRender) { - // @ts-ignore - window.Plain.init({ - appId: process.env.REACT_APP_PLAIN_SUPPORT_CHAT_APP_ID, - hideLauncher: true, - title: 'Chat with us', - links: [ - { - icon: 'call', - text: 'Contact Sales', - url: 'https://notify.novu.co/meetings/novuhq/novu-discovery-session-rr?utm_campaign=in_app_live_chat', + try { + // @ts-ignore + window?.Plain?.init({ + appId: process.env.REACT_APP_PLAIN_SUPPORT_CHAT_APP_ID, + hideLauncher: true, + title: 'Chat with us', + links: [ + { + icon: 'call', + text: 'Contact Sales', + url: 'https://notify.novu.co/meetings/novuhq/novu-discovery-session-rr?utm_campaign=in_app_live_chat', + }, + ], + entryPoint: 'default', + theme: 'light', + logo: { + url: 'https://dashboard.novu.co/static/images/novu.png', + alt: 'Novu Logo', }, - ], - entryPoint: 'default', - theme: 'light', - - customerDetails: { - email: currentUser?.email, - emailHash: currentUser?.servicesHashes?.plain, - }, - }); + customerDetails: { + email: currentUser?.email, + emailHash: currentUser?.servicesHashes?.plain, + }, + }); + } catch (error) { + console.error('error initializing plain chat', error); + } } setIsFirstRender(false); - }, [isLiveChatVisible, currentUser]); + }, [isLiveChatVisible, currentUser, isFirstRender]); const showLiveChat = () => { - if (currentUser?.servicesHashes?.plain && process.env.REACT_APP_PLAIN_SUPPORT_CHAT_APP_ID) { - // @ts-ignore - window.Plain.open(); + if (isLiveChatVisible) { + try { + // @ts-ignore + window?.Plain?.open(); + } catch (error) { + console.error('error opening plain chat', error); + } } };