feat: add plain chat buttons

novuhq · Dec 4, 2024 · 4764e11 · 4764e11
1 parent 4b0e6e2
commit 4764e11
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 27 deletions.
diff --git 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
@@ -52,7 +52,16 @@
       type="text/javascript"
     ></script>
     <% } %>
-
+    <% if (env.VITE_PLAIN_SUPPORT_CHAT_APP_ID) { %>
+      <script>
+        (function(d, script) {
+          script = d.createElement('script');
+          script.async = false;
+          script.src = 'https://chat.cdn-plain.com/index.js';
+          d.getElementsByTagName('head')[0].appendChild(script);
+        }(document));
+      </script>
+    <% } %>
     <div id="root" class="h-full"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git 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 (
-    <button id="intercom-launcher" tabIndex={-1} className="flex items-center justify-center">
+    <button
+      id="intercom-launcher"
+      tabIndex={-1}
+      className="flex items-center justify-center"
+      onClick={showPlainLiveChat}
+    >
       <HeaderButton label="Help">
-        <RiCustomerService2Line className="text-foreground-600 size-4" />
+        <RiQuestionFill className="text-foreground-600 size-4" />
       </HeaderButton>
     </button>
   );

diff --git 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
@@ -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
@@ -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);
+      }
     }
   };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;