From 79777e3a8ac15c68896b72b642922de0f0e0dbec Mon Sep 17 00:00:00 2001 From: Zaman Afzal Date: Tue, 28 Mar 2023 01:44:16 +0500 Subject: [PATCH] feat: Add course review section in course about page (#700) --- .env | 1 + .env.development | 1 + src/components/course/CourseHeader.jsx | 19 ++++++---- src/components/course/CourseReview.jsx | 36 +++++++++++++++++++ .../course/styles/_CourseReview.scss | 6 ++++ src/config/constants.js | 1 + src/config/index.js | 2 ++ src/index.scss | 1 + 8 files changed, 61 insertions(+), 6 deletions(-) create mode 100644 src/components/course/CourseReview.jsx create mode 100644 src/components/course/styles/_CourseReview.scss diff --git a/.env b/.env index a3a3c8f6c0..df4f8d59c3 100644 --- a/.env +++ b/.env @@ -5,5 +5,6 @@ FEATURE_ENABLE_PROGRAMS=true FEATURE_PROGRAM_TYPE_FACET=true LEARNING_TYPE_FACET='true' FEATURE_ENABLE_PATHWAYS=true +FEATURE_ENABLE_COURSE_REVIEW=false FEATURE_ENABLE_PATHWAY_PROGRESS='true' FEATURE_ENABLE_MY_CAREER='true' diff --git a/.env.development b/.env.development index 86f73afe54..8ea339b668 100644 --- a/.env.development +++ b/.env.development @@ -43,6 +43,7 @@ FEATURE_ENABLE_AUTO_APPLIED_LICENSES='true' LEARNING_TYPE_FACET='true' LEARNER_SUPPORT_URL='https://support.edx.org/hc/en-us' FEATURE_ENABLE_PATHWAYS='true' +FEATURE_ENABLE_COURSE_REVIEW='true' FEATURE_ENROLL_WITH_ENTERPRISE_OFFERS='true' FEATURE_ENABLE_PATHWAY_PROGRESS='true' GETSMARTER_STUDENT_TC_URL='https://www.getsmarter.com/terms-and-conditions-for-students' diff --git a/src/components/course/CourseHeader.jsx b/src/components/course/CourseHeader.jsx index 3771118fd4..1cc09567e3 100644 --- a/src/components/course/CourseHeader.jsx +++ b/src/components/course/CourseHeader.jsx @@ -21,6 +21,8 @@ import { import { useCoursePartners } from './data/hooks'; import LicenseRequestedAlert from './LicenseRequestedAlert'; import SubsidyRequestButton from './SubsidyRequestButton'; +import CourseReview from './CourseReview'; +import { features } from '../../config'; const CourseHeader = () => { const { enterpriseConfig } = useContext(AppContext); @@ -84,10 +86,20 @@ const CourseHeader = () => { /> )} {course.skills?.length > 0 && } - {catalog.containsContentItems ? ( + {catalog.containsContentItems && ( <> + + )} + + + course preview + + + {catalog.containsContentItems ? ( + <> + {features.ENABLE_COURSE_REVIEW && } {defaultProgram && (

This course is part of a {formatProgramType(defaultProgram.type)}. @@ -100,11 +112,6 @@ const CourseHeader = () => {

)} - {course.image?.src && ( - - course preview - - )} diff --git a/src/components/course/CourseReview.jsx b/src/components/course/CourseReview.jsx new file mode 100644 index 0000000000..9c5a55a898 --- /dev/null +++ b/src/components/course/CourseReview.jsx @@ -0,0 +1,36 @@ +import { + Col, Container, Icon, Row, +} from '@edx/paragon'; +import React from 'react'; +import { StarFilled } from '@edx/paragon/icons'; + +const CourseReview = () => ( + + +

The Impact:

+ + + +

300

+
learners took this course in the last 12 months
+ + +

4.5

+
+
average rating for this course on a 5-star scale
+ + +

85%

+
are confident this course will help them reach their goals
+ + +

40%

+
of the learners took this course to learn new skills
+ + + + 450 learner took this course in 2022 in comparison to 300 learners in 2021 + + +); +export default CourseReview; diff --git a/src/components/course/styles/_CourseReview.scss b/src/components/course/styles/_CourseReview.scss new file mode 100644 index 0000000000..dec1ac48e7 --- /dev/null +++ b/src/components/course/styles/_CourseReview.scss @@ -0,0 +1,6 @@ +.number-color { + color: $info-500; +} +.star-color { + color: rgba(240, 204, 1); +} \ No newline at end of file diff --git a/src/config/constants.js b/src/config/constants.js index 09697b0676..4eaf2c7024 100644 --- a/src/config/constants.js +++ b/src/config/constants.js @@ -2,6 +2,7 @@ export const FEATURE_ENROLL_WITH_CODES = 'ENROLL_WITH_CODES'; export const FEATURE_ENABLE_PROGRAMS = 'ENABLE_PROGRAMS'; export const FEATURE_ENABLE_PATHWAYS = 'ENABLE_PATHWAYS'; +export const FEATURE_ENABLE_COURSE_REVIEW = 'ENABLE_COURSE_REVIEW'; export const FEATURE_ENABLE_PATHWAY_PROGRESS = 'ENABLE_PATHWAY_PROGRESS'; export const FEATURE_ENABLE_MY_CAREER = 'ENABLE_MY_CAREER'; export const FEATURE_PROGRAM_TYPE_FACET = 'ENABLE_PROGRAM_TYPE_FACET'; diff --git a/src/config/index.js b/src/config/index.js index 5fca4a6bb5..9d7f64bdde 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -4,6 +4,7 @@ import { FEATURE_ENROLL_WITH_CODES, FEATURE_ENABLE_PROGRAMS, FEATURE_ENABLE_PATHWAYS, + FEATURE_ENABLE_COURSE_REVIEW, FEATURE_ENABLE_PATHWAY_PROGRESS, FEATURE_ENABLE_MY_CAREER, FEATURE_PROGRAM_TYPE_FACET, @@ -18,6 +19,7 @@ export const features = { ENROLL_WITH_CODES: process.env.FEATURE_ENROLL_WITH_CODES || hasFeatureFlagEnabled(FEATURE_ENROLL_WITH_CODES), ENABLE_PROGRAMS: process.env.FEATURE_ENABLE_PROGRAMS || hasFeatureFlagEnabled(FEATURE_ENABLE_PROGRAMS), ENABLE_PATHWAYS: process.env.FEATURE_ENABLE_PATHWAYS || hasFeatureFlagEnabled(FEATURE_ENABLE_PATHWAYS), + ENABLE_COURSE_REVIEW: process.env.FEATURE_ENABLE_COURSE_REVIEW || hasFeatureFlagEnabled(FEATURE_ENABLE_COURSE_REVIEW), PROGRAM_TYPE_FACET: process.env.FEATURE_PROGRAM_TYPE_FACET || hasFeatureFlagEnabled(FEATURE_PROGRAM_TYPE_FACET), FEATURE_ENROLL_WITH_ENTERPRISE_OFFERS: process.env.FEATURE_ENROLL_WITH_ENTERPRISE_OFFERS || hasFeatureFlagEnabled(FEATURE_ENROLL_WITH_ENTERPRISE_OFFERS), diff --git a/src/index.scss b/src/index.scss index 0a22885692..dddbda2d5e 100644 --- a/src/index.scss +++ b/src/index.scss @@ -9,6 +9,7 @@ $fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome"; @import "./components/course/styles/CourseHeader"; +@import "./components/course/styles/CourseReview"; @import "./components/course/styles/CourseSidebar"; @import "./components/course/styles/ProgramSidebar"; @import "./components/course/styles/CourseSkills";