Refactor Chat to Messaging service (#1142)

README.md

@@ -288,16 +288,16 @@ If it says your account it already registered and you can’t remember the passw
 
 Our preview urls work almost exactly like our live website, except for:
 
-- When you open chat, it will show a fake set of ‘chat team’ members available.
-- When you send a chat, no-one will reply.
-- We might have also set the chat text to be different on staging/preview, if we are testing options.
+- When you open messaging, it will show a fake set of ‘chat team’ members available.
+- When you send a message, no-one will reply.
+- We might have also set the message text to be different on staging/preview, if we are testing options.
 - When you go to book a therapy session, you will see fake therapists.
 - When you book a therapy session, it won’t actually book a session with anyone.
 - When you get the email confirmation of a therapy session, it won’t show the same email as we send to Bumble/Badoo users.
 
 You might want to use the live site if:
 
-- You want to test something about chat
+- You want to test something about messaging
 - You want to book a therapy session with one of the therapists as part of their onboarding
 - A bug has been reported but you can’t see it on preview, so you want to see if it’s only affecting the live site
 - To test features that only work on production e.g. Hotjar

components/crisp/CrispIframe.tsx

@@ -0,0 +1,105 @@
+import { Box } from '@mui/material';
+import { CHAT_MESSAGE_COMPOSED, CHAT_MESSAGE_SENT, CHAT_VIEWED } from '../../constants/events';
+import { useTypedSelector } from '../../hooks/store';
+import logEvent, { getEventUserData } from '../../utils/logEvent';
+
+const iframeContainerStyle = {
+  width: '100%',
+  height: '400px',
+  marginTop: { md: -2 },
+  marginBottom: 3,
+  maxHeight: '70vh',
+  borderTopLeftRadius: 16,
+  borderTopRightRadius: 16,
+  borderTop: '4px solid white',
+  overflow: 'hidden',
+} as const;
+
+const iframeStyle = {
+  marginTop: -158,
+  borderRadius: 16,
+  maxHeight: 'calc(70vh + 158px)',
+} as const;
+
+export const CrispIframe = () => {
+  const userEmail = useTypedSelector((state) => state.user.email);
+  const userSignUpLanguage = useTypedSelector((state) => state.user.signUpLanguage);
+  const userCrispTokenId = useTypedSelector((state) => state.user.crispTokenId);
+  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
+  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
+  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
+  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
+
+  const iframeLoaded = async () => {
+    const iframeWindow: any = (document.getElementById('crispIframe') as HTMLIFrameElement)
+      ?.contentWindow;
+    const crisp = iframeWindow?.$crisp;
+
+    if (!crisp) return;
+
+    // Set crisp settings on the iframe window - these will be used by the following crisp script
+    iframeWindow.CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID;
+    iframeWindow.CRISP_RUNTIME_CONFIG = {
+      lock_maximized: true,
+      lock_full_view: true,
+      cross_origin_cookies: true,
+      locale: userSignUpLanguage,
+    };
+
+    if (userCrispTokenId) {
+      iframeWindow.CRISP_TOKEN_ID = userCrispTokenId;
+    }
+
+    // Create the crisp script and insert it to the iframe
+    const iframeDocument = iframeWindow.document;
+    const iframeScript = iframeDocument.createElement('script');
+    iframeScript.src = 'https://client.crisp.chat/l.js';
+    iframeScript.async = 1;
+    iframeDocument.getElementsByTagName('head')[0].appendChild(iframeScript);
+
+    // Once the crisp script is loaded, setup event listeners
+    iframeScript.onload = () => {
+      let composeEventSent = false;
+
+      logEvent(CHAT_VIEWED, eventUserData);
+
+      if (process.env.NEXT_PUBLIC_ENV === 'production') {
+        crisp.push(['safe', true]); // Turns on safe mode = turns off errors in production
+      }
+      crisp.push(['set', 'user:email', [userEmail]]);
+
+      crisp.push([
+        'on',
+        'message:compose:sent',
+        () => {
+          if (!composeEventSent) {
+            logEvent(CHAT_MESSAGE_COMPOSED, eventUserData);
+            composeEventSent = true;
+          }
+        },
+      ]);
+
+      crisp.push([
+        'on',
+        'message:sent',
+        () => {
+          logEvent(CHAT_MESSAGE_SENT, eventUserData);
+          composeEventSent = false;
+        },
+      ]);
+    };
+  };
+
+  return (
+    <Box sx={iframeContainerStyle}>
+      <iframe
+        id="crispIframe"
+        height="550px"
+        width="100%"
+        style={iframeStyle}
+        src={'/crisp.html'} // Basic window object for iframe, crisp setup exists in onLoad function
+        onLoad={iframeLoaded}
+      />
+    </Box>
+  );
+};

components/forms/RegisterForm.tsx

@@ -32,7 +32,7 @@ import { setUserLoading } from '../../store/userSlice';
 import theme from '../../styles/theme';
 import { getErrorMessage } from '../../utils/errorMessage';
 import hasAutomaticAccessFeature from '../../utils/hasAutomaticAccessCodeFeature';
-import logEvent, { getEventUserResponseData } from '../../utils/logEvent';
+import logEvent, { getEventUserData } from '../../utils/logEvent';
 import Link from '../common/Link';
 
 const containerStyle = {
@@ -137,7 +137,11 @@ const RegisterForm = (props: RegisterFormProps) => {
     });
 
     if (userResponse?.data && userResponse.data.user.id) {
-      const eventUserData = getEventUserResponseData(userResponse.data);
+      const eventUserData = getEventUserData(
+        userResponse.data.user.createdAt,
+        userResponse.data.partnerAccesses,
+        userResponse.data.partnerAdmin,
+      );
 
       logEvent(REGISTER_SUCCESS, eventUserData);
       try {

components/layout/Header.tsx

@@ -42,8 +42,8 @@ const headerContainerStyle = {
 
 const imageContainerStyle = {
   position: 'relative',
-  width: { xs: 190, lg: 200 },
-  height: { xs: 190, lg: 200 },
+  width: { xs: 200, md: 250 },
+  height: { xs: 200, md: 250 },
   marginLeft: { xs: 'auto', md: 0 },
   marginRight: { xs: '1rem', md: '8%' },
   marginTop: { sm: '5rem', md: 0 },

components/layout/SecondaryNav.tsx

@@ -79,12 +79,12 @@ const SecondaryNav = ({ currentPage }: { currentPage: string }) => {
       qaId: 'secondary-nav-courses-button',
     },
     {
-      label: t('chat'),
+      label: t('messaging'),
       icon: <SecondaryNavIcon src={chatIcon} alt={t('alt.chatIcon')} />,
-      ariaLabel: t('chat'),
-      href: '/chat',
+      ariaLabel: t('messaging'),
+      href: '/messaging',
       event: SECONDARY_HEADER_CHAT_CLICKED,
-      qaId: 'secondary-nav-chat-button',
+      qaId: 'secondary-nav-messaging-button',
     },
 
     {

components/layout/SecondaryNavigationDrawerLinks.tsx

@@ -93,8 +93,8 @@ const SecondaryNavigationDrawerLinks = (props: NavigationMenuProps) => {
         icon: <SecondaryNavIcon src={courseIcon} alt={t('alt.courseIcon')} />,
       },
       {
-        label: t('chat'),
-        href: '/chat',
+        label: t('messaging'),
+        href: '/messaging',
         event: DRAWER_CHAT_CLICKED,
         icon: <SecondaryNavIcon src={chatIcon} alt={t('alt.chatIcon')} />,
       },

components/storyblok/StoryblokAccordion.tsx

@@ -17,7 +17,7 @@ import { RichTextOptions } from '../../utils/richText';
 
 const containerStyle = {
   width: '100%',
-  maxWidth: 800,
+  maxWidth: 725,
   marginBottom: 5,
 } as const;
 
@@ -38,6 +38,7 @@ interface StoryblokAccordionItemProps {
   _editable: string;
   body: any;
   title: string;
+  title_size: 'small' | 'large';
   icon: { filename: string; alt: string };
 }
 interface StoryblokAccordionProps {
@@ -72,7 +73,7 @@ const StoryblokAccordion = (props: StoryblokAccordionProps) => {
             aria-controls={`panel${i}-content`}
             id={`panel${i}-header`}
           >
-            {ai.icon && (
+            {ai.icon?.filename && (
               <Icon
                 sx={{
                   position: 'relative',
@@ -96,7 +97,7 @@ const StoryblokAccordion = (props: StoryblokAccordionProps) => {
               <Typography
                 sx={{ marginBottom: 0, maxWidth: 800 }}
                 component="h3"
-                variant="h3"
+                variant={ai.title_size === 'small' ? 'body1' : 'h3'}
                 textAlign="left"
               >
                 {ai.title}