feat(dal,web): add plain support service hash for live chat

apps/api/src/.env.development

@@ -89,3 +89,4 @@ HUBSPOT_PRIVATE_APP_ACCESS_TOKEN=
 CLERK_ISSUER_URL=
 CLERK_WEBHOOK_SECRET=
 PLAIN_SUPPORT_KEY='PLAIN_SUPPORT_KEY'
+PLAIN_IDENTITY_VERIFICATION_SECRET_KEY='PLAIN_IDENTITY_VERIFICATION_SECRET_KEY'

apps/api/src/.env.production

@@ -76,3 +76,4 @@ HUBSPOT_PRIVATE_APP_ACCESS_TOKEN=
 CLERK_ISSUER_URL=
 CLERK_WEBHOOK_SECRET=
 PLAIN_SUPPORT_KEY='PLAIN_SUPPORT_KEY'
+PLAIN_IDENTITY_VERIFICATION_SECRET_KEY='PLAIN_IDENTITY_VERIFICATION_SECRET_KEY'

apps/api/src/.env.test

@@ -116,4 +116,5 @@ CLERK_PEM_PUBLIC_KEY=
 TUNNEL_BASE_ADDRESS=example.com
 API_ROOT_URL=http://localhost:1337
 PLAIN_SUPPORT_KEY='PLAIN_SUPPORT_KEY'
+PLAIN_IDENTITY_VERIFICATION_SECRET_KEY='PLAIN_IDENTITY_VERIFICATION_SECRET_KEY'
 NOVU_INTERNAL_SECRET_KEY=test

apps/api/src/.example.env

@@ -84,4 +84,5 @@ CLERK_LONG_LIVED_TOKEN=
 
 TUNNEL_BASE_ADDRESS=
 PLAIN_SUPPORT_KEY='PLAIN_SUPPORT_KEY'
+PLAIN_IDENTITY_VERIFICATION_SECRET_KEY='PLAIN_IDENTITY_VERIFICATION_SECRET_KEY'
 NOVU_INTERNAL_SECRET_KEY=

apps/api/src/app/user/dtos/user-response.dto.ts

@@ -4,6 +4,9 @@ import { IUserEntity, JobTitleEnum } from '@novu/shared';
 export class ServicesHashesDto {
   @ApiProperty()
   intercom?: string;
+
+  @ApiProperty()
+  plain?: string;
 }
 
 export class UserResponseDto implements IUserEntity {

apps/web/.env.sample

@@ -19,3 +19,4 @@ IS_MULTI_TENANCY_ENABLED=
 REACT_APP_CLERK_PUBLISHABLE_KEY=
 REACT_APP_IS_EE_AUTH_ENABLED=
 FRONT_BASE_CONTEXT_PATH=
+REACT_APP_PLAIN_SUPPORT_CHAT_APP_ID=

apps/web/.example.env

@@ -15,3 +15,4 @@ REACT_APP_MAIL_SERVER_DOMAIN=
 REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID=
 IS_TEMPLATE_STORE_ENABLED=
 REACT_APP_NOVU_GTM_ID=
+REACT_APP_PLAIN_SUPPORT_CHAT_APP_ID=

apps/web/public/index.html

@@ -208,5 +208,15 @@
       type="text/javascript"
     ></script>
     <% } %>
+    <% if ( process.env.REACT_APP_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>
+    <% } %>
   </body>
 </html>

apps/web/src/components/layout/components/SupportModal.tsx

@@ -64,7 +64,8 @@ export const SupportModal: FC<SupportModalProps> = ({ isOpen, toggleOpen }) => {
           <HStack justify={'space-between'}>
             <div>
               <HStack gap="50" className={css({ color: 'typography.text.secondary' })}>
-                You can also email us as at<a href="mailto:[email protected]">[email protected]</a>
+                You can also email us at
+                <a href="mailto:[email protected]">[email protected]</a>
               </HStack>
             </div>
             <Button size={'md'} disabled={!isValid} onClick={handleSubmit(onSubmit)}>

apps/web/src/components/layout/components/v2/HeaderNav.tsx

@@ -1,6 +1,12 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ActionIcon, Header } from '@mantine/core';
-import { IconHelpOutline, IconOutlineChat, IconOutlineLibraryBooks, IconOutlineGroup } from '@novu/novui/icons';
+import {
+  IconHelpOutline,
+  IconOutlineChat,
+  IconOutlineLibraryBooks,
+  IconOutlineGroup,
+  IconOutlineMail,
+} from '@novu/novui/icons';
 import { Tooltip, Dropdown } from '@novu/design-system';
 import { css } from '@novu/novui/css';
 import { HStack } from '@novu/novui/jsx';
@@ -19,18 +25,58 @@ import { WorkflowHeaderBackButton } from './WorkflowHeaderBackButton';
 import { SupportModal } from '../SupportModal';
 
 export function HeaderNav() {
-  const { currentUser } = useAuth();
+  const { currentUser, currentOrganization } = useAuth();
   const [isSupportModalOpened, setIsSupportModalOpened] = useState(false);
   const isV2Enabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_V2_ENABLED);
 
   useBootIntercom();
+  // variable to check if it's the first render for. Needed for Plain live chat initialization
+  const [isFirstRender, setIsFirstRender] = useState(true);
+  const isLiveChatVisible =
+    process.env.REACT_APP_PLAIN_SUPPORT_CHAT_APP_ID &&
+    IS_NOVU_PROD_STAGING &&
+    currentOrganization?.apiServiceLevel !== 'free' &&
+    currentUser?.servicesHashes?.plain;
 
   const { Icon, themeLabel, toggleColorScheme } = useThemeChange();
 
   const toggleSupportModalShow = () => {
     setIsSupportModalOpened((previous) => !previous);
   };
 
+  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',
+          },
+        ],
+        entryPoint: 'default',
+        theme: 'light',
+
+        customerDetails: {
+          email: currentUser?.email,
+          emailHash: currentUser?.servicesHashes?.plain,
+        },
+      });
+    }
+    setIsFirstRender(false);
+  }, [isLiveChatVisible, currentUser]);
+
+  const showLiveChat = () => {
+    if (currentUser?.servicesHashes?.plain && process.env.REACT_APP_PLAIN_SUPPORT_CHAT_APP_ID) {
+      // @ts-ignore
+      window.Plain.open();
+    }
+  };
+
   return (
     <Header
       height={`${HEADER_NAV_HEIGHT}px`}
@@ -81,16 +127,26 @@ export function HeaderNav() {
                   </HStack>
                 </a>
               </Dropdown.Item>
-
               <Dropdown.Item
                 onClick={() => {
                   toggleSupportModalShow();
                 }}
               >
                 <HStack>
-                  <IconOutlineChat /> Contact Us
+                  <IconOutlineMail /> Contact Us
                 </HStack>
               </Dropdown.Item>
+              {isLiveChatVisible && (
+                <Dropdown.Item
+                  onClick={() => {
+                    showLiveChat();
+                  }}
+                >
+                  <HStack>
+                    <IconOutlineChat /> Live Chat
+                  </HStack>
+                </Dropdown.Item>
+              )}
             </Dropdown>
           ) : (
             <a href={discordInviteUrl} target="_blank" rel="noopener noreferrer">

libs/application-generic/src/.env.test

@@ -86,3 +86,4 @@ NOVU_SMS_INTEGRATION_ACCOUNT_SID=test
 NOVU_SMS_INTEGRATION_TOKEN=test
 NOVU_SMS_INTEGRATION_SENDER=1234567890
 PLAIN_SUPPORT_KEY='PLAIN_SUPPORT_KEY'
+PLAIN_IDENTITY_VERIFICATION_SECRET_KEY='PLAIN_IDENTITY_VERIFICATION_SECRET_KEY'

libs/dal/src/repositories/user/user.entity.ts

@@ -50,7 +50,7 @@ export class UserEntity implements IUserEntity {
     lastFailedAttempt: string;
   };
 
-  servicesHashes?: { intercom?: string };
+  servicesHashes?: { intercom?: string; plain?: string };
 
   jobTitle?: JobTitleEnum;
 

libs/dal/src/repositories/user/user.schema.ts

@@ -38,6 +38,7 @@ const userSchema = new Schema<UserDBModel>(
     },
     servicesHashes: {
       intercom: Schema.Types.String,
+      plain: Schema.Types.String,
     },
     jobTitle: Schema.Types.String,
     externalId: Schema.Types.String,

packages/shared/src/entities/user/user.interface.ts

@@ -2,6 +2,7 @@ import { JobTitleEnum } from '../../types';
 
 export interface IServicesHashes {
   intercom?: string;
+  plain?: string;
 }
 export interface IUserEntity {
   _id: string;