feat: Add course review section in course about page (#700)

.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'

.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'

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 && <CourseSkills />}
-            {catalog.containsContentItems ? (
+            {catalog.containsContentItems && (
               <>
                 <CourseRunCards />
                 <SubsidyRequestButton />
+              </>
+            )}
+          </Col>
+          <Col xs={12} lg={{ span: 4, offset: 1 }} className="mt-3 mt-lg-0">
+            <img src={course.image.src} alt="course preview" className="w-100" />
+          </Col>
+          <Col xs={12} lg={12}>
+            {catalog.containsContentItems ? (
+              <>
+                {features.ENABLE_COURSE_REVIEW && <CourseReview />}
                 {defaultProgram && (
                   <p className="font-weight-bold mt-3 mb-0">
                     This course is part of a {formatProgramType(defaultProgram.type)}.
@@ -100,11 +112,6 @@ const CourseHeader = () => {
               </p>
             )}
           </Col>
-          {course.image?.src && (
-            <Col xs={12} lg={{ span: 4, offset: 1 }} className="mt-3 mt-lg-0">
-              <img src={course.image.src} alt="course preview" className="w-100" />
-            </Col>
-          )}
         </Row>
       </Container>
     </div>

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 = () => (
+  <Container className="ml-0 pl-0">
+    <Row className="mt-3.5 mb-1.5">
+      <Col sm={12}><h3>The Impact:</h3></Col>
+    </Row>
+    <Row>
+      <Col sm className="mr-4">
+        <h1 className="number-color mb-0">300</h1>
+        <div>learners took this course in the last 12 months</div>
+      </Col>
+      <Col sm className="mr-4">
+        <div className="d-flex align-items-center"><h1 className="number-color mb-0">4.5</h1><Icon className="star-color" src={StarFilled} />
+        </div>
+        <div><b>average rating</b> for this course on a 5-star scale</div>
+      </Col>
+      <Col sm className="mr-4">
+        <h1 className="number-color mb-0">85%</h1>
+        <div>are confident this course will help them <b>reach their goals</b></div>
+      </Col>
+      <Col sm className="mr-4">
+        <h1 className="number-color mb-0">40%</h1>
+        <div>of the learners took this course to <b>learn new skills</b></div>
+      </Col>
+    </Row>
+    <Row className="mt-3.5 mb-4.5">
+      <Col sm={12}><span>450 learner took this course in 2022 in comparison to 300 learners in 2021</span></Col>
+    </Row>
+  </Container>
+);
+export default CourseReview;

src/components/course/styles/_CourseReview.scss

@@ -0,0 +1,6 @@
+.number-color {
+  color: $info-500;
+}
+.star-color {
+  color: rgba(240, 204, 1);
+}

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';

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),

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";