From 0e3fc032abb0feed2f1f9abe6805d7214c47ca1b Mon Sep 17 00:00:00 2001 From: Matthew Piatetsky Date: Thu, 10 Dec 2020 11:04:05 -0500 Subject: [PATCH] Add flyover box and button to toggle it for the REV1512 experiment (#291) This part would be trickier to do in optimizely so adding it in react REV-1512 --- src/courseware/course/Course.jsx | 31 ++++++++- src/courseware/course/CourseBreadcrumbs.jsx | 20 ++++++ src/courseware/course/sequence/Sequence.jsx | 74 +++++++++++++-------- 3 files changed, 97 insertions(+), 28 deletions(-) diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx index dd656740..63cf2f82 100644 --- a/src/courseware/course/Course.jsx +++ b/src/courseware/course/Course.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; import { useDispatch } from 'react-redux'; @@ -50,6 +50,31 @@ function Course({ const celebrateFirstSection = celebrations && celebrations.firstSection; const celebrationOpen = shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch); + // The below block of code should be reverted after the REV1512 experiment + const [REV1512FlyoverEnabled, setREV1512FlyoverEnabled] = useState(false); + window.enableREV1512Flyover = () => { + setREV1512FlyoverEnabled(true); + }; + const getCookie = (name) => { + const match = document.cookie.match(`${name}=([^;]*)`); + return match ? match[1] : undefined; + }; + const [REV1512FlyoverVisible, setREV1512FlyoverVisible] = useState(getCookie('REV1512FlyoverVisible') === 'true'); + const isREV1512FlyoverVisible = () => REV1512FlyoverEnabled && (REV1512FlyoverVisible || getCookie('REV1512FlyoverVisible') === 'true'); + const toggleREV1512Flyover = () => { + const setCookie = (cookieName, value, domain, exdays) => { + const cookieDomain = (typeof domain === 'undefined') ? '' : `domain=${domain};`; + const exdate = new Date(); + exdate.setDate(exdate.getDate() + exdays); + const cookieValue = escape(value) + ((exdays == null) ? '' : `; expires=${exdate.toUTCString()}`); + document.cookie = `${cookieName}=${cookieValue};${cookieDomain}path=/`; + }; + const isVisible = isREV1512FlyoverVisible(); + setCookie('REV1512FlyoverVisible', !isVisible); + setREV1512FlyoverVisible(!isVisible); + }; + // The above block of code should be reverted after the REV1512 experiment + return ( <> @@ -67,6 +92,8 @@ function Course({ courseId={courseId} sectionId={section ? section.id : null} sequenceId={sequenceId} + toggleREV1512Flyover={toggleREV1512Flyover} /* This line should be reverted after REV1512 experiment */ + REV1512FlyoverEnabled={REV1512FlyoverEnabled} /* This line should be reverted after REV1512 experiment */ /> {celebrationOpen && ( ))} + {/* The below block of code should be reverted after the REV1512 experiment */} + {REV1512FlyoverEnabled + && ( + + )} ); @@ -91,6 +109,8 @@ CourseBreadcrumbs.propTypes = { courseId: PropTypes.string.isRequired, sectionId: PropTypes.string, sequenceId: PropTypes.string, + toggleREV1512Flyover: PropTypes.func.isRequired, /* This line should be reverted after the REV1512 experiment */ + REV1512FlyoverEnabled: PropTypes.bool.isRequired, /* This line should be reverted after the REV1512 experiment */ }; CourseBreadcrumbs.defaultProps = { diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx index 3e44fe78..a8bb26a7 100644 --- a/src/courseware/course/sequence/Sequence.jsx +++ b/src/courseware/course/sequence/Sequence.jsx @@ -28,6 +28,8 @@ function Sequence({ nextSequenceHandler, previousSequenceHandler, intl, + isREV1512FlyoverVisible, /* This line should be reverted after the REV1512 experiment */ + REV1512FlyoverEnabled, /* This line should be reverted after the REV1512 experiment */ }) { const course = useModel('courses', courseId); const sequence = useModel('sequences', sequenceId); @@ -138,35 +140,36 @@ function Sequence({ if (sequenceStatus === 'loaded') { return ( -
-
- { - logEvent('edx.ui.lms.sequence.next_selected', 'top'); - handleNext(); - }} - onNavigate={(destinationUnitId) => { - logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId); - handleNavigate(destinationUnitId); - }} - previousSequenceHandler={() => { - logEvent('edx.ui.lms.sequence.previous_selected', 'top'); - handlePrevious(); - }} - goToCourseExitPage={() => goToCourseExitPage()} - /> -
- +
+
+ { + logEvent('edx.ui.lms.sequence.next_selected', 'top'); + handleNext(); + }} + onNavigate={(destinationUnitId) => { + logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId); + handleNavigate(destinationUnitId); + }} + previousSequenceHandler={() => { + logEvent('edx.ui.lms.sequence.previous_selected', 'top'); + handlePrevious(); + }} + goToCourseExitPage={() => goToCourseExitPage()} /> - {unitHasLoaded && ( +
+ + {unitHasLoaded && ( goToCourseExitPage()} /> - )} + )} +
+ {/* This block of code should be reverted post REV1512 experiment */} + {REV1512FlyoverEnabled && isREV1512FlyoverVisible() && ( +
+ )}
@@ -204,6 +222,8 @@ Sequence.propTypes = { nextSequenceHandler: PropTypes.func.isRequired, previousSequenceHandler: PropTypes.func.isRequired, intl: intlShape.isRequired, + isREV1512FlyoverVisible: PropTypes.func.isRequired, /* This line should be reverted after the REV1512 experiment */ + REV1512FlyoverEnabled: PropTypes.bool.isRequired, /* This line should be reverted after the REV1512 experiment */ }; Sequence.defaultProps = {