Merge branch 'develop' into fix/pwa-banner

Author: kyleecodes

app/[locale]/therapy/book-session/BookTherapyPage.tsx

@@ -1,16 +1,34 @@
+import NoDataAvailable from '@/components/common/NoDataAvailable';
+import { getStoryblokStory } from '@/lib/storyblok';
 import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
-import { getTranslations } from 'next-intl/server';
 import BookTherapyPage from './BookTherapyPage';
 
 type Params = Promise<{ locale: string }>;
 
+async function getStory(locale: string) {
+  return await getStoryblokStory('therapy/book-session', locale);
+}
+
 export async function generateMetadata({ params }: { params: Params }) {
   const { locale } = await params;
-  const t = await getTranslations({ locale, namespace: 'Therapy' });
+  const story = await getStory(locale);
+  if (!story) return;
 
-  return generateMetadataBasic({ title: t('title') });
+  return generateMetadataBasic({
+    title: story.content.title,
+    description: story.content.seo_description,
+  });
 }
 
-export default function Page() {
-  return <BookTherapyPage />;
+export default async function Page({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  const story = await getStory(locale);
+
+  if (!story) {
+    return <NoDataAvailable />;
+  }
+
+  return <BookTherapyPage story={story} />;
 }
+
+export const revalidate = 14400; // invalidate every 4 hours

app/[locale]/therapy/book-session/page.tsx

@@ -39,7 +39,11 @@ const Faqs = (props: FaqsProps) => {
   return (
     <Box>
       {faqList.map((faq, i) => (
-        <Accordion key={`panel${i}`} onChange={handleChange(faq.title)}>
+        <Accordion
+          key={`panel${i}`}
+          onChange={handleChange(faq.title)}
+          sx={{ backgroundColor: 'secondary.light' }}
+        >
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
             aria-controls={`panel${i}-content`}

app/[locale]/therapy/confirmed-session/ConfirmedTherapyPage.tsx

@@ -12,19 +12,20 @@ export interface ImageTextItem {
   illustrationAlt: string;
 }
 
-interface ImageTextGridProps {
+interface ImageTextRowProps {
   items: Array<ImageTextItem>;
   translations: string;
 }
 
 const containerStyle = {
   ...rowStyle,
-  width: { xs: '100%', md: '60%' },
+  width: 'calc(100% + 2rem)',
+  mx: '-1rem',
 } as const;
 
 const itemContainerStyle = {
   position: 'relative',
-  width: { xs: '100%', sm: '50%' },
+  width: { xs: '100%', sm: '50%', md: '25%' },
   paddingX: 2,
   paddingY: 1,
   alignText: 'center',
@@ -34,13 +35,13 @@ const imageContainerStyle = {
   position: 'relative',
   width: 100,
   height: 100,
-  marginY: 3,
+  marginY: '1rem !important',
   marginX: 'auto',
 
   ...richtextContentStyle,
 } as const;
 
-const ImageTextGrid = (props: ImageTextGridProps) => {
+const ImageTextRow = (props: ImageTextRowProps) => {
   const { items, translations } = props;
 
   const t = useTranslations(translations);
@@ -61,11 +62,11 @@ const ImageTextGrid = (props: ImageTextGridProps) => {
               }}
             />
           </Box>
-          <Typography>{t(item.text)}</Typography>
+          <Typography variant="body2">{t(item.text)}</Typography>
         </Box>
       ))}
     </Box>
   );
 };
 
-export default ImageTextGrid;
+export default ImageTextRow;

app/[locale]/therapy/confirmed-session/page.tsx

@@ -18,7 +18,7 @@ import theme from '@/styles/theme';
 import { Box, Container, Grid, Typography, useMediaQuery } from '@mui/material';
 import { ISbStoryData } from '@storyblok/react/rsc';
 import Cookies from 'js-cookie';
-import { useLocale, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import ResourceCarousel from '../common/ResourceCarousel';
@@ -35,8 +35,6 @@ interface Props {
   shorts: ISbStoryData[];
 }
 export default function CoursesPage({ courseStories, conversations, shorts }: Props) {
-  const locale = useLocale();
-
   const [loadedCourses, setLoadedCourses] = useState<ISbStoryData[] | null>(null);
   const [loadedShorts, setLoadedShorts] = useState<ISbStoryData[] | null>(null);
   const [coursesStarted, setCoursesStarted] = useState<Array<string>>([]);
@@ -60,14 +58,6 @@ export default function CoursesPage({ courseStories, conversations, shorts }: Pr
 
   const t = useTranslations('Courses');
 
-  const slidesPerView = {
-    xs: 1,
-    sm: 2,
-    md: 3,
-    lg: 3,
-    xl: 3,
-  };
-
   const headerProps = {
     title: t('title'),
     introduction: t('introduction'),

components/common/Faqs.tsx

@@ -2,7 +2,7 @@
 
 import { SignUpBanner } from '@/components/banner/SignUpBanner';
 import ImageTextColumn from '@/components/common/ImageTextColumn';
-import { ImageTextItem } from '@/components/common/ImageTextGrid';
+import { ImageTextItem } from '@/components/common/ImageTextRow';
 import WhatsappSubscribeForm from '@/components/forms/WhatsappSubscribeForm';
 import WhatsappUnsubscribeForm from '@/components/forms/WhatsappUnsubscribeForm';
 import Header, { HeaderProps } from '@/components/layout/Header';

components/common/ImageTextGrid.tsx renamed to components/common/ImageTextRow.tsx

@@ -31,7 +31,6 @@ const containerStyle = {
 
 const accordionDetail = {
   textAlign: 'left',
-  backgroundColor: 'rgba(0, 0, 0, 0.09)',
 } as const;
 
 const themes = {
@@ -42,27 +41,10 @@ const themes = {
         display: 'none',
       },
     },
-    '&.Mui-expanded': {
-      '& .MuiAccordionDetails-root': {
-        borderTop: '1px solid rgba(0, 0, 0, 0.08)',
-      },
-    },
   }, // uses default styling
   secondary: {
     '& .MuiAccordionSummary-expandIconWrapper': { color: 'primary.dark' },
     backgroundColor: 'paleSecondaryLight',
-    '&.MuiAccordion-root': {
-      margin: 0,
-      '&:before': {
-        display: 'none',
-      },
-    },
-    '&.Mui-expanded': {
-      '& .MuiAccordionDetails-root': {
-        backgroundColor: 'rgba(0, 0, 0, 0.09)',
-        borderTop: '1px solid rgba(0, 0, 0, 0.08)',
-      },
-    },
   },
 };
 
@@ -113,6 +95,7 @@ const StoryblokAccordion = (props: StoryblokAccordionProps) => {
     <Box sx={containerStyle} {...storyblokEditable({ _uid, _editable, accordion_items, theme })}>
       {accordion_items.map((ai, i) => (
         <Accordion
+          data-testid="accordion-item"
           id={ai.accordion_id ?? undefined}
           ref={ai.accordion_id === accordionInUrl ? scrollRef : undefined}
           key={`panel${i}`}

components/pages/CoursesPage.tsx

@@ -13,6 +13,7 @@ import { useState } from 'react';
 import { render } from 'storyblok-rich-text-react-renderer';
 
 const cardStyle = {
+  textAlign: 'left',
   alignSelf: 'flex-start',
   width: '100%',
   backgroundColor: 'background.default',
@@ -78,7 +79,7 @@ const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
 
   return (
     <Card
-      data-testid="TeamMemberCard"
+      data-testid="team-member-card"
       sx={cardStyle}
       {...storyblokEditable({
         _uid,

components/pages/NotesPage.tsx

@@ -14,6 +14,7 @@ const cardColumnStyle = {
 
 const cardColumnRowStyle = {
   ...rowStyle,
+  width: '100%',
   marginTop: { xs: 2, md: 5 },
 } as const;
 
@@ -38,7 +39,7 @@ const StoryblokTeamMembersCards = (props: StoryblokTeamMembersCardsProps) => {
       <Box sx={cardColumnStyle}>
         {leftTeamMemberCards.map((teamMemberCard) => (
           <StoryblokTeamMemberCard
-            key={`${teamMemberCard.name}_team_member`}
+            key={`${teamMemberCard._uid}_team_member`}
             {...teamMemberCard}
             cardExpandable={cards_expandable}
           />
@@ -47,7 +48,7 @@ const StoryblokTeamMembersCards = (props: StoryblokTeamMembersCardsProps) => {
       <Box sx={cardColumnStyle}>
         {rightTeamMemberCards.map((teamMemberCard) => (
           <StoryblokTeamMemberCard
-            key={`${teamMemberCard.name}_team_member`}
+            key={`${teamMemberCard._uid}_team_member`}
             {...teamMemberCard}
             cardExpandable={cards_expandable}
           />