feat: made course content available pre login (#1094)

* feat: made course content available pre login * moved courses routes to partiallyPublicPages * changed isLoggedIn to boolean * removed signUpBanner
chaynHQ · Aug 26, 2024 · 075fb17 · 075fb17
1 parent 44e9907
commit 075fb17
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 13 deletions.
diff --git a/components/cards/SessionCard.tsx b/components/cards/SessionCard.tsx
@@ -55,10 +55,11 @@ interface SessionCardProps {
   session: ISbStoryData;
   sessionSubtitle: string;
   storyblokCourseId: number;
+  clickable: boolean;
 }
 
 const SessionCard = (props: SessionCardProps) => {
-  const { session, sessionSubtitle, storyblokCourseId } = props;
+  const { session, sessionSubtitle, storyblokCourseId, clickable } = props;
   const [expanded, setExpanded] = useState<boolean>(false);
 
   const t = useTranslations('Courses');
@@ -73,12 +74,27 @@ const SessionCard = (props: SessionCardProps) => {
 
   return (
     <Card sx={cardStyle}>
-      <CardActionArea
-        sx={cardActionStyle}
-        component={Link}
-        href={`/${session.full_slug}`}
-        aria-label={`${t('navigateToSession')} ${session.name}`}
-      >
+      {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>
+      ) : (
         <CardContent sx={cardContentStyle}>
           <Box sx={cardContentRowStyles}>
             <SessionProgressDisplay sessionId={session.id} storyblokCourseId={storyblokCourseId} />
@@ -88,7 +104,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
@@ -80,7 +80,7 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
   const courses = useTypedSelector((state) => state.courses);
-
+  const isLoggedIn = useTypedSelector((state) => Boolean(state.user.id));
   const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
   const [courseProgress, setCourseProgress] = useState<PROGRESS_STATUS>(
     PROGRESS_STATUS.NOT_STARTED,
@@ -217,6 +217,7 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
                             session={session}
                             sessionSubtitle={position}
                             storyblokCourseId={storyId}
+                            clickable={isLoggedIn}
                           />
                         );
                       })}

diff --git a/guards/AuthGuard.tsx b/guards/AuthGuard.tsx
@@ -29,6 +29,12 @@ const publicPathHeads = [
 // they are treated differently as they are not public path heads
 const partiallyPublicPages = [
   '/courses',
+  '/courses/image-based-abuse-and-rebuilding-ourselves',
+  '/courses/recovering-from-toxic-and-abusive-relationships',
+  '/courses/society-patriarchy-and-sexual-trauma',
+  '/courses/healing-from-sexual-trauma',
+  '/courses/dating-boundaries-and-relationships',
+  '/courses/reclaiming-resilience-in-your-trauma-story',
   '/activities',
   '/grounding',
   '/subscription/whatsapp',

diff --git a/pages/courses/[slug].tsx b/pages/courses/[slug].tsx
@@ -23,7 +23,9 @@ const CourseOverview: NextPage<Props> = ({ story }) => {
   }
 
   return (
-    <StoryblokCoursePage {...(story.content as StoryblokCoursePageProps)} storyId={story.id} />
+    <>
+      <StoryblokCoursePage {...(story.content as StoryblokCoursePageProps)} storyId={story.id} />
+    </>
   );
 };
 

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,19 +6,25 @@ 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;
 }
 
 const CourseOverview: NextPage<Props> = ({ story }) => {
   story = useStoryblokState(story);
 
+  const userId = useTypedSelector((state) => state.user.id);
   if (!story) {
     return <NoDataAvailable />;
   }
 
   return (
-    <StoryblokCoursePage {...(story.content as StoryblokCoursePageProps)} storyId={story.id} />
+    <>
+      <StoryblokCoursePage {...(story.content as StoryblokCoursePageProps)} storyId={story.id} />
+      {!userId && <SignUpBanner />}
+    </>
   );
 };
 

diff --git a/pages/courses/index.tsx b/pages/courses/index.tsx
@@ -151,7 +151,7 @@ const CourseList: NextPage<Props> = ({ stories }) => {
                   return (
                     <CourseCard
                       key={course.id}
-                      clickable={false}
+                      clickable={true}
                       course={course}
                       courseProgress={null}
                       liveCourseAccess={false}
@@ -165,7 +165,7 @@ const CourseList: NextPage<Props> = ({ stories }) => {
                   return (
                     <CourseCard
                       key={course.id}
-                      clickable={false}
+                      clickable={true}
                       course={course}
                       courseProgress={null}
                       liveCourseAccess={false}