feature/WELLMS-299

package.json

@@ -74,6 +74,7 @@
     "rc-drawer": "^4.4.3",
     "rc-tree-select": "^5.8.0",
     "react": "^18||^17",
+    "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
     "react-grid-system": "^8.1.9",
     "react-i18next": "^12.2.0",

src/components/atoms/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ interface TabProps {
   label: string;
   key: number;
   component: ReactNode;
+  hidden?: boolean;
 }
 
 export interface TabsProps extends ExtendableStyledComponent {
@@ -83,6 +84,10 @@ export const Tabs: React.FC<TabsProps> = (props) => {
       <div className={"tabs-menu"}>
         <div className={"tabs-menu-inner"}>
           {tabs.map((tab) => {
+            if (tab.hidden) {
+              return null;
+            }
+
             return (
               <button
                 type={"button"}

src/components/atoms/TreeSelect/index.tsx

@@ -3,7 +3,7 @@ import ReactTreeSelect, {
   TreeSelectProps as ReactTreeSelectProps,
 } from "rc-tree-select";
 import styled from "styled-components";
-import { AiOutlineRight, AiOutlineDown } from "react-icons/ai";
+import { AiOutlineRight } from "react-icons/ai";
 import { getFontFromTheme } from "../../../theme/provider";
 import { getStylesBasedOnTheme } from "../../../utils/utils";
 export type TreeSelectProps<ValueType> = Omit<
@@ -157,7 +157,6 @@ export const TreeSelect = <ValueType,>({
         {...props}
         placeholder={placeholder}
         switcherIcon={<AiOutlineRight />}
-        inputIcon={<AiOutlineDown />}
         treeNodeLabelProp="label"
         getPopupContainer={() => wrapperRef.current as HTMLDivElement}
       />

src/components/organisms/CourseAgenda/CourseAgenda.tsx

@@ -48,6 +48,7 @@ interface CourseAgendaProps
   lessons: Lesson[];
   currentTopicId: number;
   onCourseFinished: () => void;
+  unlockAllTopics?: boolean;
 }
 
 const StyledSection = styled("section")`
@@ -90,6 +91,7 @@ export const CourseAgenda: FC<CourseAgendaProps> = (props) => {
     finishedTopicIds,
     currentTopicId,
     onCourseFinished,
+    unlockAllTopics,
   } = props;
   const { t } = useTranslation();
 
@@ -193,6 +195,7 @@ export const CourseAgenda: FC<CourseAgendaProps> = (props) => {
         <article>
           {lessons.map((lesson, index) => (
             <CourseAgendaLesson
+              unlockAllTopics={unlockAllTopics}
               defaultOpen={lesson.topics?.some(
                 (topic) => topic.id === currentNotLockedTopicId
               )}

src/components/organisms/CourseAgenda/_components/CourseAgendaLesson.tsx

@@ -21,6 +21,7 @@ interface CourseAgendaLessonProps
   currentTopicId?: number;
   defaultOpen?: boolean;
   onCourseFinished: () => void;
+  unlockAllTopics?: boolean;
 }
 
 const StyledLessonItem = styled.div`
@@ -314,6 +315,7 @@ const CourseAgendaLesson: React.FC<CourseAgendaLessonProps> = (props) => {
     currentTopicId,
     defaultOpen = false,
     onCourseFinished,
+    unlockAllTopics,
   } = props;
   const { t } = useTranslation();
   const {
@@ -412,10 +414,12 @@ const CourseAgendaLesson: React.FC<CourseAgendaLessonProps> = (props) => {
       )}
       <ul
         className={`lesson__topics ${
-          lessonHasLockedTopic || isLessonLocked ? "lesson__topics--locked" : ""
+          (lessonHasLockedTopic || isLessonLocked) && !unlockAllTopics
+            ? "lesson__topics--locked"
+            : ""
         }`}
       >
-        {(lessonHasLockedTopic || isLessonLocked) && (
+        {(lessonHasLockedTopic || isLessonLocked) && !unlockAllTopics && (
           <li
             className={`lesson__overlay ${
               totalHeightOfOverlay === 1 && "lesson__overlay--row"
@@ -471,7 +475,12 @@ const CourseAgendaLesson: React.FC<CourseAgendaLessonProps> = (props) => {
 
           return (
             <CourseAgendaTopic
-              clickable={open && !lockedTopicsIds.includes(topic.id)}
+              clickable={
+                unlockAllTopics ||
+                (!unlockAllTopics &&
+                  open &&
+                  !lockedTopicsIds.includes(topic.id))
+              }
               key={topicIndex}
               topic={topic}
               index={topicIndex + 1}