feat: video resources updates incl next button (#1567)

annarhughes · web-flow · commit eff352ccc294 · 2025-09-03T16:57:28.000+01:00
* card tweaks

* next resource button
diff --git a/components/cards/CourseCard.tsx b/components/cards/CourseCard.tsx
@@ -75,8 +75,8 @@ const cardActionsStyle = {
 
 const imageContainerStyle = {
   position: 'relative',
-  width: { xs: 100, md: 100, lg: 120 },
-  height: { xs: 100, md: 100, lg: 120 },
+  width: 100,
+  height: 100,
 };
 
 interface CourseCardProps {
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -40,8 +40,8 @@ const headerContainerStyle = {
 
 const imageContainerStyle = {
   position: 'relative',
-  width: { xs: 150, md: 250 },
-  height: { xs: 150, md: 250 },
+  width: { xs: 150, md: 210 },
+  height: { xs: 150, md: 210 },
   marginLeft: { xs: 'auto', md: 0 },
   marginRight: { xs: '1rem', md: '8%' },
   marginTop: 0,
@@ -117,7 +117,7 @@ const Header = (props: HeaderProps) => {
         </IconButton>
         {children && <Box sx={childrenContentStyle}>{children}</Box>}
         <Box sx={textContentStyle}>
-          <Typography variant="h1" component="h1" marginBottom={{ md: '2.5rem' }}>
+          <Typography variant="h1" component="h1">
             {title}
           </Typography>
           {getIntroduction()}
diff --git a/components/pages/MessagingPage.tsx b/components/pages/MessagingPage.tsx
@@ -52,7 +52,7 @@ export default function MessagingPage({ story }: Props) {
       <Header {...headerProps} />
       {userId ? (
         <>
-          <Container sx={{ backgroundColor: 'secondary.light', pt: 2 }}>
+          <Container sx={{ backgroundColor: 'secondary.light', pt: 0 }}>
             <Typography variant="h2" sx={{ mb: { xs: 4, md: 8 } }}>
               {t('messageHeading')}
             </Typography>
diff --git a/components/resources/ResourceConversationHeader.tsx b/components/resources/ResourceConversationHeader.tsx
@@ -4,16 +4,17 @@ import Header from '@/components/layout/Header';
 import { ResourceConversationAudio } from '@/components/resources/ResourceConversationAudio';
 import { Link as i18nLink } from '@/i18n/routing';
 import { PROGRESS_STATUS } from '@/lib/constants/enums';
+import getNextResourceButtonLabel from '@/lib/utils/getNextResourceButtonLabel';
 import { RichTextOptions } from '@/lib/utils/richText';
 import illustrationCourses from '@/public/illustration_courses.svg';
 import { breadcrumbButtonStyle } from '@/styles/common';
+import { ArrowForward } from '@mui/icons-material';
 import { Box, Button } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { render, StoryblokRichtext } from 'storyblok-rich-text-react-renderer';
 
 const audioContainerStyle = {
   mt: { xs: 4, md: 6 },
-  mb: 3,
 } as const;
 
 interface ResourceConversationHeaderProps {
@@ -24,6 +25,7 @@ interface ResourceConversationHeaderProps {
   resourceProgress: PROGRESS_STATUS;
   audio: { filename: string };
   audio_transcript: StoryblokRichtext;
+  nextResourceHref: string | undefined;
   eventData: { [key: string]: any };
 }
 
@@ -36,6 +38,7 @@ export const ResourceConversationHeader = (props: ResourceConversationHeaderProp
     resourceProgress,
     audio,
     audio_transcript,
+    nextResourceHref,
     eventData,
   } = props;
   const t = useTranslations('Resources');
@@ -56,6 +59,18 @@ export const ResourceConversationHeader = (props: ResourceConversationHeaderProp
               audio_transcript={audio_transcript}
             />
           </Box>
+          {nextResourceHref && (
+            <Button
+              variant="contained"
+              color="secondary"
+              sx={{ width: 'fit-content', ml: 'auto' }}
+              href={nextResourceHref}
+              endIcon={<ArrowForward />}
+              component={i18nLink}
+            >
+              {t(getNextResourceButtonLabel(nextResourceHref))}
+            </Button>
+          )}
         </Box>
       }
       imageSrc={header_image?.filename || illustrationCourses}
diff --git a/components/resources/ResourceShortsHeader.tsx b/components/resources/ResourceShortsHeader.tsx
@@ -6,9 +6,11 @@ import { Link as i18nLink } from '@/i18n/routing';
 import { PROGRESS_STATUS } from '@/lib/constants/enums';
 import { RESOURCE_SHORT_VIDEO_VISIT_SESSION } from '@/lib/constants/events';
 import { getDefaultFullSlug } from '@/lib/utils/getDefaultFullSlug';
+import getNextResourceButtonLabel from '@/lib/utils/getNextResourceButtonLabel';
 import logEvent from '@/lib/utils/logEvent';
 import { breadcrumbButtonStyle, columnStyle, rowStyle } from '@/styles/common';
 import theme from '@/styles/theme';
+import { ArrowForward } from '@mui/icons-material';
 import { Box, Button, Container, Typography } from '@mui/material';
 import { ISbStoryData } from '@storyblok/react/rsc';
 import { useLocale, useTranslations } from 'next-intl';
@@ -36,6 +38,7 @@ interface ResourceShortHeaderProps {
   relatedCourse?: ISbStoryData;
   video: { url: string };
   video_transcript: StoryblokRichtext;
+  nextResourceHref: string | undefined;
   eventData: { [key: string]: any };
 }
 
@@ -48,6 +51,7 @@ export const ResourceShortHeader = (props: ResourceShortHeaderProps) => {
     resourceProgress,
     video,
     video_transcript,
+    nextResourceHref,
     eventData,
   } = props;
   const t = useTranslations('Resources');
@@ -132,6 +136,18 @@ export const ResourceShortHeader = (props: ResourceShortHeaderProps) => {
             </Button>
           </Box>
         )}
+        {!relatedCourse && !relatedSession && nextResourceHref && (
+          <Button
+            variant="contained"
+            color="secondary"
+            sx={{ width: 'fit-content' }}
+            href={nextResourceHref}
+            endIcon={<ArrowForward />}
+            component={i18nLink}
+          >
+            {t(getNextResourceButtonLabel(nextResourceHref))}
+          </Button>
+        )}
       </Box>
     </Container>
   );
diff --git a/components/resources/ResourceSingleVideoHeader.tsx b/components/resources/ResourceSingleVideoHeader.tsx
@@ -4,6 +4,7 @@ import ProgressStatus from '@/components/common/ProgressStatus';
 import { ResourceSingleVideo } from '@/components/resources/ResourceSingleVideo';
 import { Link as i18nLink } from '@/i18n/routing';
 import { PROGRESS_STATUS, STORYBLOK_TAGS } from '@/lib/constants/enums';
+import getNextResourceButtonLabel from '@/lib/utils/getNextResourceButtonLabel';
 import { RichTextOptions } from '@/lib/utils/richText';
 import { breadcrumbButtonStyle, columnStyle, rowStyle } from '@/styles/common';
 import theme from '@/styles/theme';
@@ -127,7 +128,7 @@ export const ResourceSingleVideoHeader = (props: ResourceSingleVideoHeaderProps)
                 endIcon={<ArrowForward />}
                 component={i18nLink}
               >
-                {t('nextVideoButtonLabel')}
+                {t(getNextResourceButtonLabel(nextResourceHref))}
               </Button>
             )}
           </Box>
diff --git a/components/storyblok/StoryblokAccordion.tsx b/components/storyblok/StoryblokAccordion.tsx
@@ -102,7 +102,7 @@ const StoryblokAccordion = (props: StoryblokAccordionProps) => {
           id={ai.accordion_id ?? undefined}
           ref={ai.accordion_id === accordionInUrl ? scrollRef : undefined}
           key={`panel${i}`}
-          defaultExpanded={false}
+          defaultExpanded={accordionInUrl === ai.accordion_id}
           onChange={handleChange(ai.title)}
           sx={themes[theme]}
         >
diff --git a/components/storyblok/StoryblokResourceConversationPage.tsx b/components/storyblok/StoryblokResourceConversationPage.tsx
@@ -109,6 +109,11 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
     logEvent(RESOURCE_CONVERSATION_VIEWED, eventData);
   }, []);
 
+  const nextResourceHref = useMemo(() => {
+    const nextResourceSlug = related_content[0]?.full_slug;
+    return nextResourceSlug ? `/${nextResourceSlug}` : undefined;
+  }, [related_content]);
+
   if (userAccess === undefined) return <LoadingContainer />;
   if (!userAccess) return <ContentUnavailable />;
 
@@ -135,6 +140,7 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
           resourceProgress,
           audio,
           audio_transcript,
+          nextResourceHref,
           eventData,
         }}
       />
diff --git a/components/storyblok/StoryblokResourceShortPage.tsx b/components/storyblok/StoryblokResourceShortPage.tsx
@@ -125,6 +125,11 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
     logEvent(RESOURCE_SHORT_VIDEO_VIEWED, eventData);
   }, []);
 
+  const nextResourceHref = useMemo(() => {
+    const nextResourceSlug = related_content[0]?.full_slug;
+    return nextResourceSlug ? `/${nextResourceSlug}` : undefined;
+  }, [related_content]);
+
   if (userAccess === undefined) return <LoadingContainer />;
   if (!userAccess) return <ContentUnavailable />;
 
@@ -154,6 +159,7 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
           relatedCourse: related_course,
           video,
           video_transcript,
+          nextResourceHref,
           eventData,
         }}
       />
diff --git a/components/storyblok/StoryblokTeamMemberCard.tsx b/components/storyblok/StoryblokTeamMemberCard.tsx
@@ -73,19 +73,6 @@ const iconRowStyles = {
   position: 'relative',
 } as const;
 
-const fadeOut = {
-  ':after': {
-    content: '""',
-    background: 'linear-gradient(90deg,rgba(254, 246, 242, 0) 0%, rgba(254, 246, 242, 1) 100%)',
-    opacity: 0.9,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    width: 20,
-    height: '100%',
-  },
-};
-
 const iconStyles = {
   mt: { xs: 0.25, md: 0 },
   width: { xs: 20, md: 24 },
@@ -136,7 +123,7 @@ const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
     website,
     website_title,
     team_page_section,
-    cardExpandable = false,
+    cardExpandable = true,
   } = props;
 
   const [expanded, setExpanded] = useState<boolean>(!cardExpandable);
@@ -204,13 +191,13 @@ const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
               </Box>
             )}
             {show_short_bio && website?.url && (
-              <Box sx={{ ...iconRowStyles }}>
+              <Box sx={iconRowStyles}>
                 <LinkIcon color="error" sx={iconStyles} />
                 <Link
                   id="website-link"
                   variant="body2"
                   href={website.url}
-                  sx={{ ...websiteHeaderLinkStyle, ...fadeOut }}
+                  sx={websiteHeaderLinkStyle}
                 >
                   {websiteTitle}
                 </Link>
diff --git a/i18n/messages/resources/de.json b/i18n/messages/resources/de.json
@@ -5,6 +5,8 @@
     "backToVideos": "Zurück zu den Videos",
     "backToSomatics": "Zurück zu den Somatik",
     "nextVideoButtonLabel": "Nächstes Video",
+    "nextConversationButtonLabel": "Nächstes Gespräch",
+    "nextSessionButtonLabel": "Nächste Sitzung",
     "conversations": "Gespräche",
     "shorts": "Kurzfilme",
     "videos": "Videos",
diff --git a/i18n/messages/resources/en.json b/i18n/messages/resources/en.json
@@ -5,6 +5,8 @@
     "backToVideos": "Back to videos",
     "backToSomatics": "Back to somatics",
     "nextVideoButtonLabel": "Next video",
+    "nextConversationButtonLabel": "Next conversation",
+    "nextSessionButtonLabel": "Next session",
     "conversations": "Conversations",
     "shorts": "Shorts",
     "videos": "Videos",
diff --git a/i18n/messages/resources/es.json b/i18n/messages/resources/es.json
@@ -5,6 +5,8 @@
     "backToVideos": "Volver a los vídeos",
     "backToSomatics": "Volver a los somática",
     "nextVideoButtonLabel": "Siguiente vídeo",
+    "nextConversationButtonLabel": "Siguiente conversación",
+    "nextSessionButtonLabel": "Siguiente sesión",
     "conversations": "Conversaciones",
     "shorts": "Cortos",
     "videos": "Vídeos",
diff --git a/i18n/messages/resources/fr.json b/i18n/messages/resources/fr.json
@@ -5,6 +5,8 @@
     "backToVideos": "Retour aux vidéos",
     "backToSomatics": "Retour aux Somatique",
     "nextVideoButtonLabel": "Vidéo suivante",
+    "nextConversationButtonLabel": "Conversation suivante",
+    "nextSessionButtonLabel": "Session suivante",
     "conversations": "Conversations",
     "shorts": "Courte",
     "videos": "Vidéos",
diff --git a/i18n/messages/resources/hi.json b/i18n/messages/resources/hi.json
@@ -4,7 +4,9 @@
     "backToShorts": "Clips par vaapas jaaen",
     "backToVideos": "Videos par wapas jaein",
     "backToSomatics": "Somatics par wapas jaein",
-    "nextVideoButtonLabel": "Agle video",
+    "nextVideoButtonLabel": "Agla video",
+    "nextConversationButtonLabel": "Agli conversation",
+    "nextSessionButtonLabel": "Agla session",
     "conversations": "Bātcīt",
     "shorts": "Clips",
     "videos": "Videos",
diff --git a/i18n/messages/resources/pt.json b/i18n/messages/resources/pt.json
@@ -5,6 +5,8 @@
     "backToVideos": "Voltar aos vídeos",
     "backToSomatics": "Voltar aos somática",
     "nextVideoButtonLabel": "Próximo vídeo",
+    "nextConversationButtonLabel": "Próxima conversa",
+    "nextSessionButtonLabel": "Próxima sessão",
     "conversations": "Conversas",
     "shorts": "Curtas",
     "videos": "Vídeos",
diff --git a/lib/utils/getNextResourceButtonLabel.ts b/lib/utils/getNextResourceButtonLabel.ts
@@ -0,0 +1,9 @@
+export default function getNextResourceButtonLabel(nextResourceHref: string) {
+  if (nextResourceHref.includes('/conversations/')) {
+    return 'nextConversationButtonLabel';
+  } else if (nextResourceHref.includes('/courses/')) {
+    return 'nextSessionButtonLabel';
+  } else {
+    return 'nextVideoButtonLabel';
+  }
+}
diff --git a/lib/utils/richText.tsx b/lib/utils/richText.tsx
@@ -10,6 +10,7 @@ import StoryblokRow from '@/components/storyblok/StoryblokRow';
 import StoryblokRowColumnBlock from '@/components/storyblok/StoryblokRowColumnBlock';
 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 { Link as i18nLink } from '@/i18n/routing';
@@ -37,6 +38,7 @@ export const RichTextOptions: RenderOptions = {
     ['button']: (props: any) => <StoryblokButton {...props} />,
     ['statement']: (props: any) => <StoryblokStatement {...props} />,
     ['accordion']: (props: any) => <StoryblokAccordion {...props} />,
+    ['team_member']: (props: any) => <StoryblokTeamMemberCard {...props} />,
     ['team_members_cards']: (props: any) => <StoryblokTeamMembersCards {...props} />,
     ['carousel']: (props: any) => <StoryblokCarousel {...props} />,
     ['spacer']: (props: any) => <StoryblokSpacer {...props} />,
diff --git a/styles/theme.ts b/styles/theme.ts
@@ -51,7 +51,8 @@ let theme = createTheme({
       fontFamily: 'var(--font-montserrat)',
       fontSize: '2.25rem',
       fontWeight: 400,
-      marginBottom: '1.75rem',
+      marginBottom: '1.5rem',
+      lineHeight: 1.4,
     },
     h2: {
       fontFamily: 'var(--font-montserrat)',
@@ -78,16 +79,10 @@ let theme = createTheme({
     body1: {
       fontSize: '1rem',
       lineHeight: 1.5,
-      '@media (min-width:1200px)': {
-        fontSize: '1.125rem',
-      },
     },
     body2: {
       fontSize: '0.875rem',
       lineHeight: 1.5,
-      '@media (min-width:1200px)': {
-        fontSize: '1rem',
-      },
     },
   },
 });

Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,7 @@ const StoryblokAccordion = (props: StoryblokAccordionProps) => {`
`102`	`102`	`id={ai.accordion_id ?? undefined}`
`103`	`103`	`ref={ai.accordion_id === accordionInUrl ? scrollRef : undefined}`
`104`	`104`	key={`panel${i}`}
`105`		`- defaultExpanded={false}`
	`105`	`+ defaultExpanded={accordionInUrl === ai.accordion_id}`
`106`	`106`	`onChange={handleChange(ai.title)}`
`107`	`107`	`sx={themes[theme]}`
`108`	`108`	`>`