[WIP] Messaging service

components/storyblok/StoryblokAccordion.tsx

@@ -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}

components/storyblok/StoryblokMeetTheTeamPage.tsx

@@ -4,15 +4,13 @@ import Head from 'next/head';
 import { useEffect } from 'react';
 import { render } from 'storyblok-rich-text-react-renderer';
 import Header from '../../components/layout/Header';
-import StoryblokTeamMemberCard, {
-  StoryblokTeamMemberCardProps,
-} from '../../components/storyblok/StoryblokTeamMemberCard';
+import { StoryblokTeamMemberCardProps } from '../../components/storyblok/StoryblokTeamMemberCard';
 import { MEET_THE_TEAM_VIEWED } from '../../constants/events';
 import { useTypedSelector } from '../../hooks/store';
-import { columnStyle, rowStyle } from '../../styles/common';
 import logEvent, { getEventUserData } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
 import StoryblokPageSection, { StoryblokPageSectionProps } from './StoryblokPageSection';
+import StoryblokTeamMembersCards from './StoryblokTeamMembersCards';
 
 const coreContainerStyle = {
   backgroundColor: 'secondary.light',
@@ -22,18 +20,6 @@ const supportingContainerStyle = {
   backgroundColor: 'primary.light',
 } as const;
 
-const cardColumnStyle = {
-  ...columnStyle,
-  justifyContent: 'flex-start',
-  width: { xs: '100%', sm: 'calc(50% - 1rem)' },
-  gap: { xs: 0, sm: 2, md: 4 },
-} as const;
-
-const cardColumnRowStyle = {
-  ...rowStyle,
-  marginTop: { xs: 2, md: 5 },
-} as const;
-
 export interface StoryblokMeetTheTeamPageProps {
   _uid: string;
   _editable: string;
@@ -124,32 +110,7 @@ const StoryblokMeetTheTeamPage = (props: StoryblokMeetTheTeamPageProps) => {
           typeof core_team_description === 'string' && (
             <Typography maxWidth={650}>{core_team_description}</Typography>
           )}
-        <Box sx={cardColumnRowStyle}>
-          <Box sx={cardColumnStyle}>
-            {core_team_members.map((teamMember, index) => {
-              if (index % 2 === 1) return;
-              return (
-                <StoryblokTeamMemberCard
-                  key={`${teamMember.name}_team_member`}
-                  {...teamMember}
-                  alwaysOpen={true}
-                />
-              );
-            })}
-          </Box>
-          <Box sx={cardColumnStyle}>
-            {core_team_members.map((teamMember, index) => {
-              if (index % 2 === 0) return;
-              return (
-                <StoryblokTeamMemberCard
-                  key={`${teamMember.name}_team_member`}
-                  {...teamMember}
-                  alwaysOpen={true}
-                />
-              );
-            })}
-          </Box>
-        </Box>
+        <StoryblokTeamMembersCards team_member_items={core_team_members} cards_expandable={false} />
       </Container>
 
       {page_section_2?.length > 0 && <StoryblokPageSection {...page_section_2[0]} />}
@@ -161,24 +122,10 @@ const StoryblokMeetTheTeamPage = (props: StoryblokMeetTheTeamPageProps) => {
         {supporting_team_description && (
           <Box maxWidth={650}>{render(supporting_team_description, RichTextOptions)}</Box>
         )}
-        <Box sx={cardColumnRowStyle}>
-          <Box sx={cardColumnStyle}>
-            {supporting_team_members.map((teamMember: any, index: number) => {
-              if (index % 2 === 1) return;
-              return (
-                <StoryblokTeamMemberCard key={`${teamMember.name}_team_member`} {...teamMember} />
-              );
-            })}
-          </Box>
-          <Box sx={cardColumnStyle}>
-            {supporting_team_members.map((teamMember: any, index: number) => {
-              if (index % 2 === 0) return;
-              return (
-                <StoryblokTeamMemberCard key={`${teamMember.name}_team_member`} {...teamMember} />
-              );
-            })}
-          </Box>
-        </Box>
+        <StoryblokTeamMembersCards
+          team_member_items={supporting_team_members}
+          cards_expandable={true}
+        />
       </Container>
 
       {page_section_3?.length > 0 && <StoryblokPageSection {...page_section_3[0]} />}

components/storyblok/StoryblokTeamMemberCard.tsx

@@ -55,13 +55,13 @@ export interface StoryblokTeamMemberCardProps {
   languages: string;
   bio: ISbRichtext;
   image: { filename: string; alt: string };
-  alwaysOpen?: boolean;
+  cardExpandable?: boolean;
 }
 
 const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
-  const { _uid, _editable, name, role, languages, bio, image, alwaysOpen = false } = props;
+  const { _uid, _editable, name, role, languages, bio, image, cardExpandable = false } = props;
 
-  const [expanded, setExpanded] = useState<boolean>(alwaysOpen);
+  const [expanded, setExpanded] = useState<boolean>(!cardExpandable);
   const t = useTranslations('Shared.meetTheTeam');
 
   const handleExpandClick = () => {
@@ -85,13 +85,13 @@ const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
         languages,
         bio,
         image,
-        alwaysOpen,
+        cardExpandable,
       })}
     >
       <CardActionArea
         onClick={handleExpandClick}
         aria-label={`${t.rich('expandTeamMember', { name: name })}`}
-        disabled={alwaysOpen}
+        disabled={!cardExpandable}
       >
         <CardContent sx={cardContentStyle}>
           <Box sx={imageContainerStyle}>
@@ -118,7 +118,7 @@ const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
                 </Typography>
               </Box>
             </Box>
-            {!alwaysOpen && (
+            {cardExpandable && (
               <Box style={expandArrowStyle}>
                 <KeyboardArrowDownIcon color="error"></KeyboardArrowDownIcon>
               </Box>

components/storyblok/StoryblokTeamMembersCards.tsx

@@ -0,0 +1,58 @@
+import { Box } from '@mui/material';
+import { storyblokEditable } from '@storyblok/react';
+import { columnStyle, rowStyle } from '../../styles/common';
+import StoryblokTeamMemberCard, { StoryblokTeamMemberCardProps } from './StoryblokTeamMemberCard';
+
+const cardColumnStyle = {
+  ...columnStyle,
+  justifyContent: 'flex-start',
+  width: { xs: '100%', sm: 'calc(50% - 1rem)' },
+  gap: { xs: 0, sm: 2, md: 4 },
+} as const;
+
+const cardColumnRowStyle = {
+  ...rowStyle,
+  marginTop: { xs: 2, md: 5 },
+} as const;
+
+interface StoryblokTeamMembersCardsProps {
+  _uid?: string;
+  _editable?: string;
+  team_member_items: Array<StoryblokTeamMemberCardProps>;
+  cards_expandable: boolean;
+}
+
+const StoryblokTeamMembersCards = (props: StoryblokTeamMembersCardsProps) => {
+  const { _uid, _editable, team_member_items, cards_expandable } = props;
+
+  const leftTeamMemberCards = team_member_items.filter((card, index) => index % 2 === 0);
+  const rightTeamMemberCards = team_member_items.filter((card, index) => index % 2 === 1);
+
+  return (
+    <Box
+      sx={cardColumnRowStyle}
+      {...storyblokEditable({ _uid, _editable, team_member_items, cards_expandable })}
+    >
+      <Box sx={cardColumnStyle}>
+        {leftTeamMemberCards.map((teamMemberCard) => (
+          <StoryblokTeamMemberCard
+            key={`${teamMemberCard.name}_team_member`}
+            {...teamMemberCard}
+            cardExpandable={cards_expandable}
+          />
+        ))}
+      </Box>
+      <Box sx={cardColumnStyle}>
+        {rightTeamMemberCards.map((teamMemberCard) => (
+          <StoryblokTeamMemberCard
+            key={`${teamMemberCard.name}_team_member`}
+            {...teamMemberCard}
+            cardExpandable={cards_expandable}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default StoryblokTeamMembersCards;

config/storyblok.ts

@@ -17,6 +17,8 @@ import StoryblokSessionIbaPage from '../components/storyblok/StoryblokSessionIba
 import StoryblokSessionPage from '../components/storyblok/StoryblokSessionPage';
 import StoryblokSpacer from '../components/storyblok/StoryblokSpacer';
 import StoryblokStatement from '../components/storyblok/StoryblokStatement';
+import StoryblokTeamMemberCard from '../components/storyblok/StoryblokTeamMemberCard';
+import StoryblokTeamMembersCards from '../components/storyblok/StoryblokTeamMembersCards';
 import StoryblokVideo from '../components/storyblok/StoryblokVideo';
 import StoryblokWelcomePage from '../components/storyblok/StoryblokWelcomePage';
 
@@ -29,6 +31,8 @@ export const storyblok = storyblokInit({
     audio: StoryblokAudio,
     row: StoryblokRow,
     row_new: StoryblokRowColumnBlock,
+    team_member: StoryblokTeamMemberCard,
+    team_members_cards: StoryblokTeamMembersCards,
     quote: StoryblokQuote,
     card: StoryblokCard,
     button: StoryblokButton,

messages/chat/en.json

@@ -1,5 +1,5 @@
 {
   "Chat": {
-    "title": "1-1 Chat"
+    "chatHeading": "Tell us what’s on your mind"
   }
 }

pages/_app.tsx

@@ -12,7 +12,6 @@ import { NextPageContext } from 'next/types';
 import { Hotjar } from 'nextjs-hotjar';
 import { useEffect } from 'react';
 import { Provider } from 'react-redux';
-import CrispScript from '../components/crisp/CrispScript';
 import Consent from '../components/layout/Consent';
 import ErrorBoundary from '../components/layout/ErrorBoundary';
 import Footer from '../components/layout/Footer';
@@ -76,7 +75,6 @@ function MyApp(props: MyAppProps) {
         <Head>
           <meta name="viewport" content="initial-scale=1, width=device-width" />
         </Head>
-        <CrispScript />
         <ThemeProvider theme={theme}>
           <CssBaseline />
           <TopBar />