Merge Develop onto Main

.github/pull_request_template.md

@@ -5,6 +5,9 @@
 ### Why did you make the changes?
 
 <!--- PR CHECKLIST: PLEASE REMOVE BEFORE SUBMITTING —>
-- [ ] You have answered the above questions.
-- [ ] You have followed the contributing guidelines in the CONTRIBUTING.md file
-- [ ] You have a descriptive and concise PR title.
+Before submitting, check that you have completed the following tasks:
+- [ ] Answered the questions above.
+- [ ] Read Chayn's Contributing Guidelines in the CONTRIBUTING.md file.
+- [ ] Enabled "Allow edits and access to secrets by maintainers" on this PR.
+- [ ] If applicable, include images in the description.
+After submitting, please be available for discussion. Thank you!

app/api.ts

@@ -12,7 +12,7 @@ import { Course, Courses } from './coursesSlice';
 import { PartnerAccess, PartnerAccesses } from './partnerAccessSlice';
 import { PartnerAdmin } from './partnerAdminSlice';
 import { Partner, PartnerFeature } from './partnersSlice';
-import { RootState } from './store';
+import { AppState } from './store';
 import { Subscription, Subscriptions, User } from './userSlice';
 
 export interface GetUserResponse {
@@ -34,7 +34,7 @@ interface WhatsappUnsubscribePayload {
 const baseQuery = fetchBaseQuery({
   baseUrl: process.env.NEXT_PUBLIC_API_URL,
   prepareHeaders: (headers, { getState }) => {
-    const user = (getState() as RootState).user;
+    const user = (getState() as AppState).user;
     const token = user.token;
 
     if (token) {

app/coursesSlice.tsx

@@ -1,8 +1,6 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { WritableDraft } from 'immer/dist/internal';
+import { Draft, createSlice } from '@reduxjs/toolkit';
 import { STORYBLOK_STORY_STATUS } from '../constants/enums';
 import { api } from './api';
-import type { RootState } from './store';
 import { User } from './userSlice';
 
 export interface Session {
@@ -50,7 +48,7 @@ export interface Courses extends Array<Course> {}
 
 const initialState: Courses = [];
 
-const mergeUpdatedCourse = (state: WritableDraft<Courses>, payload: Course) => {
+const mergeUpdatedCourse = (state: Draft<Courses>, payload: Course) => {
   const course = state.filter((course) => course.id === payload.id);
 
   if (course) {
@@ -89,5 +87,4 @@ const slice = createSlice({
 
 const { actions, reducer } = slice;
 export const { clearCoursesSlice } = actions;
-export const selectCourses = (state: RootState) => state.courses;
 export default reducer;

app/partnerAccessSlice.tsx

@@ -2,7 +2,6 @@ import { createSlice } from '@reduxjs/toolkit';
 import { getPartnerContent, PartnerContent } from '../constants/partners';
 import { api } from './api';
 import { Partner } from './partnersSlice';
-import type { RootState } from './store';
 
 export interface PartnerAccess {
   id: string;
@@ -61,5 +60,4 @@ const slice = createSlice({
 
 const { actions, reducer } = slice;
 export const { clearPartnerAccessesSlice } = actions;
-export const selectPartnerAccesses = (state: RootState) => state.partnerAccesses;
 export default reducer;

app/partnerAdminSlice.tsx

@@ -1,7 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { getPartnerContent, PartnerContent } from '../constants/partners';
 import { api, GetUserResponse } from './api';
-import type { RootState } from './store';
 
 export interface PartnerAdmin {
   id: string | null;
@@ -55,5 +54,4 @@ const slice = createSlice({
 
 const { actions, reducer } = slice;
 export const { clearPartnerAdminSlice } = actions;
-export const selectPartnerAdmin = (state: RootState) => state.partnerAdmin;
 export default reducer;

app/partnersSlice.tsx

@@ -1,7 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { api } from './api';
 import { PartnerAccess } from './partnerAccessSlice';
-import type { RootState } from './store';
 
 export interface Feature {
   name: string;
@@ -87,5 +86,4 @@ const slice = createSlice({
 
 const { actions, reducer } = slice;
 export const { clearPartnersSlice } = actions;
-export const selectPartners = (state: RootState) => state.partners;
 export default reducer;

app/store.ts

@@ -1,15 +1,13 @@
-import { configureStore, ThunkAction } from '@reduxjs/toolkit';
+import { Action, ThunkAction, configureStore } from '@reduxjs/toolkit';
 import { createWrapper } from 'next-redux-wrapper';
-import { Action } from 'redux';
 import { api } from './api';
 import coursesReducer from './coursesSlice';
 import partnerAccessesReducer from './partnerAccessSlice';
 import partnerAdminReducer from './partnerAdminSlice';
 import partnersReducer from './partnersSlice';
 import userReducer from './userSlice';
-let store: ReturnType<typeof configStore>;
 
-const configStore = () =>
+const makeStore = () =>
   configureStore({
     reducer: {
       [api.reducerPath]: api.reducer,
@@ -22,13 +20,10 @@ const configStore = () =>
     middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware),
   });
 
-export const makeStore = () => {
-  store = configStore();
-  return store;
-};
 
 export type AppStore = ReturnType<typeof makeStore>;
-export type RootState = ReturnType<AppStore['getState']>;
-export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action>;
+export type AppState = ReturnType<AppStore['getState']>;
+export type AppDispatch = AppStore['dispatch'];
+export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, AppState, unknown, Action>;
 
 export const wrapper = createWrapper<AppStore>(makeStore);

app/userSlice.tsx

@@ -2,7 +2,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { LANGUAGES } from '../constants/enums';
 import { api, GetUserResponse } from './api';
 import { PartnerAccesses } from './partnerAccessSlice';
-import type { RootState } from './store';
 
 export interface User {
   loading: boolean;
@@ -134,5 +133,4 @@ const isSubscriptionActive = (subscription: Subscription): subscription is Activ
 
 const { actions, reducer } = slice;
 export const { clearUserSlice, setUserToken, setUserLoading, setAuthStateLoading } = actions;
-export const selectCurrentUser = (state: RootState) => state.user;
 export default reducer;

components/cards/CourseCard.tsx

@@ -12,11 +12,11 @@ import {
   IconButton,
   Typography,
 } from '@mui/material';
+import { ISbStoryData } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
-import { StoryData } from 'storyblok-js-client';
 import { PROGRESS_STATUS } from '../../constants/enums';
 import { iconTextRowStyle, rowStyle } from '../../styles/common';
 import { courseIsLiveNow, courseIsLiveSoon } from '../../utils/courseLiveStatus';
@@ -69,7 +69,7 @@ const statusRowStyle = {
 };
 
 interface CourseCardProps {
-  course: StoryData;
+  course: ISbStoryData;
   courseProgress: PROGRESS_STATUS | null;
   liveCourseAccess: boolean;
 }

components/cards/SessionCard.tsx

@@ -9,9 +9,9 @@ import {
   IconButton,
   Typography,
 } from '@mui/material';
+import { ISbStoryData } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
-import { StoryData } from 'storyblok-js-client';
 import { rowStyle } from '../../styles/common';
 import Link from '../common/Link';
 import { SessionProgressDisplay } from '../session/SessionProgressDisplay';
@@ -52,7 +52,7 @@ const cardActionStyle = {
 } as const;
 
 interface SessionCardProps {
-  session: StoryData;
+  session: ISbStoryData;
   sessionSubtitle: string;
   storyblokCourseId: number;
 }
@@ -81,7 +81,7 @@ const SessionCard = (props: SessionCardProps) => {
       >
         <CardContent sx={cardContentStyle}>
           <Box sx={cardContentRowStyles}>
-            <SessionProgressDisplay session={session} storyblokCourseId={storyblokCourseId} />
+            <SessionProgressDisplay sessionId={session.id} storyblokCourseId={storyblokCourseId} />
             <Typography flex={1} component="h3" variant="h3">
               {session.content.name}
             </Typography>

components/common/Column.tsx

@@ -3,12 +3,34 @@ import { Box } from '@mui/system';
 interface ColumnProps {
   children: any;
   width?: string;
+  horizontalAlignment?: string;
 }
 
 const Column = (props: ColumnProps) => {
-  const { width, children } = props;
+  const { width, children, horizontalAlignment } = props;
 
   const columnStyles = {
+    'h3:only-child': { marginBottom: 0 },
+    ...(horizontalAlignment && {
+      textAlign:
+        horizontalAlignment === 'center'
+          ? { xs: 'center', md: 'center' }
+          : horizontalAlignment === 'right'
+          ? { xs: 'right', md: 'right' }
+          : horizontalAlignment === 'mobile-left-desktop-center'
+          ? { xs: 'left', md: 'center' }
+          : { xs: 'left', md: 'left' },
+    }),
+    ...(horizontalAlignment && {
+      justifyContent:
+        horizontalAlignment === 'center'
+          ? 'center'
+          : horizontalAlignment === 'right'
+          ? 'flex-end'
+          : horizontalAlignment === 'mobile-left-desktop-center'
+          ? { xs: 'flex-start', md: 'center' }
+          : 'flex-start',
+    }),
     width:
       width === 'extra-small'
         ? {
@@ -27,6 +49,10 @@ const Column = (props: ColumnProps) => {
         ? { xs: '100%', md: '80%' }
         : width === 'full-width'
         ? { xs: `100%`, md: '100%' }
+        : width === 'mobile-large-desktop-full'
+        ? { xs: `60%`, md: '100%' }
+        : width === 'mobile-med-desktop-full'
+        ? { xs: `40%`, md: '100%' }
         : { xs: `100%`, md: 'auto' },
     ...(!width ? { flex: { md: 1 } } : {}),
   };

components/common/NoDataAvailable.tsx

@@ -0,0 +1,14 @@
+import { Box, Typography } from '@mui/material';
+import { useTranslations } from 'next-intl';
+
+const NoDataAvailable = () => {
+  const t = useTranslations('Shared.noDataAvailable');
+
+  return (
+    <Box m={10}>
+      <Typography>{t('title')}</Typography>
+    </Box>
+  );
+};
+
+export default NoDataAvailable;

components/common/Quote.tsx

@@ -1,10 +1,10 @@
 import { useTheme } from '@mui/material';
 import { Box } from '@mui/system';
-import { Richtext } from 'storyblok-js-client';
+import { ISbRichtext } from '@storyblok/react';
 import { richtextContentStyle } from '../../styles/common';
 
 interface QuoteProps {
-  text: Richtext | string;
+  text: ISbRichtext | string;
   textSize: string;
   iconColor: string;
 }
@@ -19,18 +19,18 @@ const Quote = (props: QuoteProps) => {
     textSize === 'extra-small'
       ? { xs: 0.875, md: 1 }
       : textSize === 'small'
-      ? { xs: 1, md: 1.125 }
-      : textSize === 'large'
-      ? { xs: 1.25, md: 1.5 }
-      : textSize === 'extra-large'
-      ? { xs: 1.5, md: 1.75 }
-      : { xs: 1.125, md: 1.25 }; // default / medium
+        ? { xs: 1, md: 1.125 }
+        : textSize === 'large'
+          ? { xs: 1.25, md: 1.5 }
+          : textSize === 'extra-large'
+            ? { xs: 1.5, md: 1.75 }
+            : { xs: 1.125, md: 1.25 }; // default / medium
   const quotePosition =
     textSize === 'extra-small'
       ? { top: '-4px', left: '0' }
       : textSize === 'small'
-      ? { top: '-8px', left: '0' }
-      : { top: '-16px', left: '-8px' }; // medium/ large/ extra large
+        ? { top: '-8px', left: '0' }
+        : { top: '-16px', left: '-8px' }; // medium/ large/ extra large
   const containerStyle = {
     fontFamily: 'Montserrat, sans-serif',
     fontStyle: 'italic',

components/common/Row.tsx

@@ -6,27 +6,36 @@ interface RowProps {
   numberOfColumns: number;
   horizontalAlignment: string;
   verticalAlignment: string;
+  gap?: string;
 }
 
 const Row = (props: RowProps) => {
-  const { children, horizontalAlignment, verticalAlignment, numberOfColumns } = props;
+  const { children, horizontalAlignment, verticalAlignment, numberOfColumns, gap } = props;
+  const calculatedGap =
+    gap === 'none'
+      ? 0
+      : { xs: 3, sm: 8 / numberOfColumns, md: 10 / numberOfColumns, lg: 16 / numberOfColumns };
 
   const rowStyles = {
     width: '100%',
-    gap: { xs: 3, sm: 8 / numberOfColumns, md: 10 / numberOfColumns, lg: 16 / numberOfColumns },
+    gap: calculatedGap,
     ...rowStyle,
     textAlign:
       horizontalAlignment === 'center'
         ? 'center'
         : horizontalAlignment === 'right'
         ? 'right'
+        : horizontalAlignment === 'mobile-left-desktop-center'
+        ? { xs: 'left', md: 'center' }
         : 'left',
     ...(horizontalAlignment && {
       justifyContent:
         horizontalAlignment === 'center'
           ? 'center'
           : horizontalAlignment === 'right'
           ? 'flex-end'
+          : horizontalAlignment === 'mobile-left-desktop-center'
+          ? { xs: 'flex-start', md: 'center' }
           : 'flex-start',
     }),
     ...(verticalAlignment && {

components/course/CourseHeader.tsx

@@ -1,30 +1,25 @@
 import { Button } from '@mui/material';
+import { ISbRichtext } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
-import { useEffect } from 'react';
-import { StoryData } from 'storyblok-js-client';
 import { PROGRESS_STATUS } from '../../constants/enums';
-import { COURSE_OVERVIEW_VIEWED } from '../../constants/events';
-import logEvent from '../../utils/logEvent';
 import Link from '../common/Link';
 import Header from '../layout/Header';
 
 export interface CourseHeaderProps {
-  story: StoryData;
+  name: string;
+  description: ISbRichtext;
+  image_with_background: { filename: string; alt: string };
   courseProgress: PROGRESS_STATUS;
   eventData: {};
 }
 const CourseHeader = (props: CourseHeaderProps) => {
-  const { story, courseProgress, eventData } = props;
-
-  useEffect(() => {
-    logEvent(COURSE_OVERVIEW_VIEWED, eventData);
-  });
+  const { name, description, image_with_background, courseProgress, eventData } = props;
 
   const headerProps = {
-    title: story.content.name,
-    introduction: story.content.description,
-    imageSrc: story.content.image_with_background?.filename,
-    translatedImageAlt: story.content.image_with_background?.alt,
+    title: name,
+    introduction: description,
+    imageSrc: image_with_background?.filename,
+    translatedImageAlt: image_with_background?.alt,
     progressStatus: courseProgress,
   };