From 1d79e797e3623ccbca20260cf1cbf6265516bb76 Mon Sep 17 00:00:00 2001
From: Ellie Re'em <eleanor.reem@hotmail.co.uk>
Date: Mon, 1 Apr 2024 16:25:48 +0200
Subject: [PATCH] feat: display courses when not signed in

---
 components/cards/CourseCard.tsx | 38 +++++++++++++++++++------
 pages/courses/index.tsx         | 50 ++++++++++++++++++++++++++++++++-
 2 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/components/cards/CourseCard.tsx b/components/cards/CourseCard.tsx
index 610b5e098..6fa89af73 100644
--- a/components/cards/CourseCard.tsx
+++ b/components/cards/CourseCard.tsx
@@ -72,10 +72,11 @@ interface CourseCardProps {
   course: ISbStoryData;
   courseProgress: PROGRESS_STATUS | null;
   liveCourseAccess: boolean;
+  clickable?: boolean;
 }
 
 const CourseCard = (props: CourseCardProps) => {
-  const { course, courseProgress, liveCourseAccess } = props;
+  const { course, courseProgress, liveCourseAccess, clickable = true } = props;
   const [expanded, setExpanded] = useState<boolean>(false);
   const t = useTranslations('Courses');
   const router = useRouter();
@@ -91,12 +92,33 @@ const CourseCard = (props: CourseCardProps) => {
 
   return (
     <Card sx={cardStyle}>
-      <CardActionArea
-        sx={cardActionStyle}
-        component={Link}
-        href={`/${course.full_slug}`}
-        aria-label={`${t('navigateToCourse')} ${course.content.name}`}
-      >
+      {clickable ? (
+        <CardActionArea
+          sx={cardActionStyle}
+          component={Link}
+          href={`/${course.full_slug}`}
+          aria-label={`${t('navigateToCourse')} ${course.content.name}`}
+        >
+          <CardContent sx={cardContentStyle}>
+            <Box sx={imageContainerStyle}>
+              <Image
+                alt={course.content.image.alt}
+                src={course.content.image.filename}
+                layout="fill"
+                objectFit="contain"
+              />
+            </Box>
+            <Box flex={1}>
+              <Typography component="h3" variant="h3">
+                {course.content.name}
+              </Typography>
+              {!!courseProgress && courseProgress !== PROGRESS_STATUS.NOT_STARTED && (
+                <ProgressStatus status={courseProgress} />
+              )}
+            </Box>
+          </CardContent>
+        </CardActionArea>
+      ) : (
         <CardContent sx={cardContentStyle}>
           <Box sx={imageContainerStyle}>
             <Image
@@ -115,7 +137,7 @@ const CourseCard = (props: CourseCardProps) => {
             )}
           </Box>
         </CardContent>
-      </CardActionArea>
+      )}
       <CardActions sx={cardActionsStyle}>
         {courseComingSoon && (!courseLiveSoon || !liveCourseAccess) && (
           <Box sx={statusRowStyle}>
diff --git a/pages/courses/index.tsx b/pages/courses/index.tsx
index 628348dee..314319c7a 100644
--- a/pages/courses/index.tsx
+++ b/pages/courses/index.tsx
@@ -61,13 +61,15 @@ const CourseList: NextPage<Props> = ({ stories }) => {
   }, []);
 
   useEffect(() => {
+    const referralPartner = window.localStorage.getItem('referralPartner');
+
     if (partnerAdmin && partnerAdmin.partner) {
       const partnerName = partnerAdmin.partner.name;
       const coursesWithAccess = stories.filter((course) =>
         course.content.included_for_partners.includes(partnerName),
       );
       setLoadedCourses(coursesWithAccess);
-    } else if (partnerAccesses.length > 0) {
+    } else if (partnerAccesses && partnerAccesses.length > 0) {
       let userPartners: Array<string> = [];
 
       partnerAccesses.map((partnerAccess) => {
@@ -80,6 +82,13 @@ const CourseList: NextPage<Props> = ({ stories }) => {
         userPartners.some((partner) => story.content.included_for_partners.includes(partner)),
       );
       setLoadedCourses(coursesWithAccess);
+    } else if (referralPartner) {
+      const coursesWithAccess = stories.filter((story) =>
+        story.content.included_for_partners.includes(
+          referralPartner.charAt(0).toUpperCase() + referralPartner.slice(1),
+        ),
+      );
+      setLoadedCourses(coursesWithAccess);
     } else {
       const coursesWithAccess = stories.filter((story) =>
         story.content.included_for_partners.includes('Public'),
@@ -114,6 +123,45 @@ const CourseList: NextPage<Props> = ({ stories }) => {
           imageSrc={headerProps.imageSrc}
           imageAlt={headerProps.imageAlt}
         />
+        <Container sx={containerStyle}>
+          {loadedCourses === null ? (
+            <LoadingContainer />
+          ) : loadedCourses.length === 0 ? (
+            // Leaving blank instead of saying no courses are available
+            <Box></Box>
+          ) : (
+            <Box sx={rowStyle}>
+              <Box sx={cardColumnStyle}>
+                {loadedCourses?.map((course, index) => {
+                  if (index % 2 === 1) return;
+                  return (
+                    <CourseCard
+                      key={course.id}
+                      clickable={false}
+                      course={course}
+                      courseProgress={null}
+                      liveCourseAccess={false}
+                    />
+                  );
+                })}
+              </Box>
+              <Box sx={cardColumnStyle}>
+                {loadedCourses?.map((course, index) => {
+                  if (index % 2 === 0) return;
+                  return (
+                    <CourseCard
+                      key={course.id}
+                      clickable={false}
+                      course={course}
+                      courseProgress={null}
+                      liveCourseAccess={false}
+                    />
+                  );
+                })}
+              </Box>
+            </Box>
+          )}
+        </Container>
         <SignUpBanner />
       </Box>
     );