Merge pull request #1138 from chaynHQ/develop

Merge Develop onto Main
chaynHQ · Sep 16, 2024 · 02034c8 · 02034c8
2 parents 863b07a + 6df6559
commit 02034c8
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 48 deletions.
diff --git a/components/banner/SignUpBanner.tsx b/components/banner/SignUpBanner.tsx
@@ -29,7 +29,7 @@ export const SignUpBanner = () => {
   }, []);
 
   return (
-    <Container sx={containerStyle}>
+    <Container id="signup-banner" sx={containerStyle}>
       <Typography variant="h2" component="h2" mb={2}>
         {t('signUpTodayPromo.title')}
       </Typography>

diff --git a/components/cards/SessionCard.tsx b/components/cards/SessionCard.tsx
@@ -11,6 +11,7 @@ import {
 } from '@mui/material';
 import { ISbStoryData } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { rowStyle } from '../../styles/common';
 import Link from '../common/Link';
@@ -55,14 +56,29 @@ interface SessionCardProps {
   session: ISbStoryData;
   sessionSubtitle: string;
   storyblokCourseId: number;
-  clickable: boolean;
+  isLoggedIn: boolean;
 }
 
 const SessionCard = (props: SessionCardProps) => {
-  const { session, sessionSubtitle, storyblokCourseId, clickable } = props;
+  const { session, sessionSubtitle, storyblokCourseId, isLoggedIn } = props;
   const [expanded, setExpanded] = useState<boolean>(false);
 
   const t = useTranslations('Courses');
+  const router = useRouter();
+
+  const scrollToSignupBanner = () => {
+    if (isLoggedIn) {
+      router.push(`/${session.full_slug}`);
+    } else {
+      const signupBanner = document.getElementById('signup-banner');
+
+      if (signupBanner) {
+        const scrollToY = signupBanner.getBoundingClientRect().top + window.scrollY - 136;
+
+        window.scrollTo({ top: scrollToY, behavior: 'smooth' });
+      }
+    }
+  };
 
   const handleExpandClick = () => {
     setExpanded(!expanded);
@@ -74,27 +90,13 @@ const SessionCard = (props: SessionCardProps) => {
 
   return (
     <Card sx={cardStyle}>
-      {clickable ? (
-        <CardActionArea
-          sx={cardActionStyle}
-          component={Link}
-          href={`/${session.full_slug}`}
-          aria-label={`${t('navigateToSession')} ${session.name}`}
-        >
-          <CardContent sx={cardContentStyle}>
-            <Box sx={cardContentRowStyles}>
-              <SessionProgressDisplay
-                sessionId={session.id}
-                storyblokCourseId={storyblokCourseId}
-              />
-              <Typography flex={1} component="h3" variant="h3">
-                {session.content.name}
-              </Typography>
-            </Box>
-            <Typography color="grey.700">{sessionSubtitle}</Typography>
-          </CardContent>
-        </CardActionArea>
-      ) : (
+      <CardActionArea
+        sx={cardActionStyle}
+        {...(isLoggedIn
+          ? { onClick: scrollToSignupBanner }
+          : { href: `/${session.full_slug}`, component: Link })}
+        aria-label={`${t('navigateToSession')} ${session.name}`}
+      >
         <CardContent sx={cardContentStyle}>
           <Box sx={cardContentRowStyles}>
             <SessionProgressDisplay sessionId={session.id} storyblokCourseId={storyblokCourseId} />
@@ -104,7 +106,7 @@ const SessionCard = (props: SessionCardProps) => {
           </Box>
           <Typography color="grey.700">{sessionSubtitle}</Typography>
         </CardContent>
-      )}
+      </CardActionArea>
       <CardActions sx={cardActionsStyle}>
         <IconButton
           sx={{ marginLeft: 'auto' }}

diff --git a/components/storyblok/StoryblokCoursePage.tsx b/components/storyblok/StoryblokCoursePage.tsx
@@ -19,6 +19,7 @@ import { determineCourseProgress } from '../../utils/courseProgress';
 import hasAccessToPage from '../../utils/hasAccessToPage';
 import { getEventUserData, logEvent } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
+import { SignUpBanner } from '../banner/SignUpBanner';
 
 const containerStyle = {
   backgroundColor: 'secondary.light',
@@ -217,7 +218,7 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
                             session={session}
                             sessionSubtitle={position}
                             storyblokCourseId={storyId}
-                            clickable={isLoggedIn}
+                            isLoggedIn={isLoggedIn}
                           />
                         );
                       })}
@@ -229,6 +230,7 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
           </>
         )}
       </Container>
+      {!isLoggedIn && <SignUpBanner />}
     </Box>
   );
 };

diff --git a/cypress/integration/tests/welcome.badoo.cy.tsx b/cypress/integration/tests/welcome.badoo.cy.tsx
@@ -23,20 +23,14 @@ describe('Welcome badoo page should display', () => {
     );
   });
   it('about the program content', () => {
-    cy.checkImage('person with legs crossed holding heart', 'badoo_welcome_1');
-    cy.get('h2').should('contain', 'About the program');
-    cy.get('p').should(
-      'contain',
-      'Everyone’s healing journey is different. When we experience trauma due to sexual assault and relationship abuse, we may need support. Badoo partnered with Bloom to create a free, curated, online trauma support program for survivors. This program has been developed based on feedback from the global Badoo and Bloom communities.',
+    cy.checkImage(
+      'Illustration of a person sitting down with a laptop. Illustrations of video, messaging and flowers are included.',
+      'landing_page_illo',
     );
-  });
-
-  it('about Bloom content', () => {
-    cy.checkImage('leaves with a rose bloom', 'leaf_mix_bloom');
-    cy.get('h2').should('contain', 'About Bloom');
+    cy.get('h2').should('contain', 'About the program');
     cy.get('p').should(
       'contain',
-      'Bloom informs and empowers survivors by offering remote courses that combine the insights of survivors globally on trauma and gender-based violence with therapeutic practices to heal from trauma. Bloom is a programme by Chayn.',
+      'Everyone’s healing journey is different. When we experience trauma such as sexual assault and relationship abuse, we may need support to manage the aftermath effects. Badoo has partnered with Bloom to create a free, custom curated online trauma support program for survivors of sexual assault and relationship abuse. This program has been developed based on feedback from the global Badoo and Bloom communities.',
     );
   });
 
@@ -49,15 +43,6 @@ describe('Welcome badoo page should display', () => {
     );
   });
 
-  it('about you content', () => {
-    cy.checkImage('leaves with fire', 'leaf_mix_fire');
-    cy.get('h2').should('contain', 'About you');
-    cy.get('p').should(
-      'contain',
-      'The programme is available to any Badoo user who reports sexual abuse or assault to Badoo, regardless of your background, race, age, disability, religion or belief, sexuality, gender identity or expression, or life circumstances – we are here for you.',
-    );
-  });
-
   describe('for a non-logged in user', () => {
     it('get started button', () => {
       cy.get('a[href="/auth/register?partner=badoo"]').should('contain', 'Get started');

diff --git a/pages/courses/image-based-abuse-and-rebuilding-ourselves/index.tsx b/pages/courses/image-based-abuse-and-rebuilding-ourselves/index.tsx
@@ -6,7 +6,6 @@ import StoryblokCoursePage, {
 } from '../../../components/storyblok/StoryblokCoursePage';
 import { getStoryblokPageProps } from '../../../utils/getStoryblokPageProps';
 
-import { SignUpBanner } from '../../../components/banner/SignUpBanner';
 import { useTypedSelector } from '../../../hooks/store';
 interface Props {
   story: ISbStoryData | null;
@@ -23,7 +22,6 @@ const CourseOverview: NextPage<Props> = ({ story }) => {
   return (
     <>
       <StoryblokCoursePage {...(story.content as StoryblokCoursePageProps)} storyId={story.id} />
-      {!userId && <SignUpBanner />}
     </>
   );
 };