Add flyover box and button to toggle it for the REV1512 experiment

This part would be trickier to do in optimizely so adding it in react REV-1512
2020-12-10 08:14:46 -05:00
3 changed files with 97 additions and 28 deletions
--- 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 (
    <>
      <Helmet>
@@ -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 */
      />
      <AlertList topic="sequence" />
      <Sequence
@@ -76,6 +103,8 @@ function Course({
        unitNavigationHandler={unitNavigationHandler}
        nextSequenceHandler={nextSequenceHandler}
        previousSequenceHandler={previousSequenceHandler}
+        isREV1512FlyoverVisible={isREV1512FlyoverVisible} /* This line should be reverted after REV1512 experiment */
+        REV1512FlyoverEnabled={REV1512FlyoverEnabled} /* This line should be reverted after REV1512 experiment */
      />
      {celebrationOpen && (
        <CelebrationModal
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -36,6 +36,8 @@ export default function CourseBreadcrumbs({
  courseId,
  sectionId,
  sequenceId,
+  toggleREV1512Flyover, /* 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);
@@ -82,6 +84,22 @@ export default function CourseBreadcrumbs({
            {label}
          </CourseBreadcrumb>
        ))}
+        {/* The below block of code should be reverted after the REV1512 experiment */}
+        {REV1512FlyoverEnabled
+        && (
+        <div
+          className="toggleFlyoverButton"
+          aria-hidden="true"
+          style={{ marginLeft: 'auto', marginTop: '-16px' }}
+          onClick={() => {
+            toggleREV1512Flyover();
+          }}
+        >
+          <svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.5" y="0.5" width="53" height="39" rx="1.5" fill="white" stroke="#E7E8E9" /><path d="M36 20C36 15.6 32.4 12 28 12C27.7 12 27.5 12.2 27.5 12.5C27.5 12.8 27.7 13 28 13C31.85 13 35 16.15 35 20C35 23.85 31.85 27 28 27C24.15 27 21 23.85 21 20C21 19.7 20.8 19.5 20.5 19.5C20.3 19.5 20.1 19.65 20.05 19.8C20 19.85 20 19.95 20 20C20 24.4 23.6 28 28 28C32.4 28 36 24.4 36 20Z" fill="black" stroke="black" strokeWidth="0.6" /><path d="M23.1065 14.52C22.9403 14.36 22.691 14.36 22.5247 14.52C22.3585 14.68 22.3585 14.92 22.5247 15.08C22.6078 15.16 22.7325 15.2 22.8156 15.2C22.9403 15.2 23.0234 15.16 23.1065 15.08C23.2312 14.96 23.2312 14.68 23.1065 14.52Z" fill="black" stroke="black" strokeWidth="0.6" /><path d="M27.6848 15.2C27.3939 15.2 27.2 15.3973 27.2 15.6932V19.6384C27.2 19.6877 27.2 19.7863 27.2484 19.8356C27.2969 19.8849 27.2969 19.9343 27.3454 19.9836L29.5757 22.2521C29.6727 22.3507 29.8181 22.4 29.9151 22.4C30.0121 22.4 30.1575 22.3507 30.2545 22.2521C30.4484 22.0548 30.4484 21.7589 30.2545 21.5617L28.1696 19.4411V15.6932C28.1696 15.3973 27.9757 15.2 27.6848 15.2Z" fill="black" stroke="black" strokeWidth="0.6" /><circle cx="35.5" cy="14.5" r="4.5" fill="#C32D3A" />
+          </svg>
+        </div>
+        )}
      </ol>
    </nav>
  );
@@ -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 = {
--- 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 (
-      <div className="sequence-container">
-        <div className="sequence">
-          <SequenceNavigation
-            sequenceId={sequenceId}
-            unitId={unitId}
-            className="mb-4"
-            nextSequenceHandler={() => {
-              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()}
-          />
-          <div className="unit-container flex-grow-1">
-            <SequenceContent
-              courseId={courseId}
-              gated={gated}
+      <div>
+        <div className="sequence-container" style={{ display: 'inline-flex', flexDirection: 'row' }}>
+          <div className="sequence" style={{ width: '100%' }}>
+            <SequenceNavigation
              sequenceId={sequenceId}
              unitId={unitId}
-              unitLoadedHandler={handleUnitLoaded}
+              className="mb-4"
+              nextSequenceHandler={() => {
+                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 && (
+            <div className="unit-container flex-grow-1">
+              <SequenceContent
+                courseId={courseId}
+                gated={gated}
+                sequenceId={sequenceId}
+                unitId={unitId}
+                unitLoadedHandler={handleUnitLoaded}
+              />
+              {unitHasLoaded && (
              <UnitNavigation
                sequenceId={sequenceId}
                unitId={unitId}
@@ -180,8 +183,23 @@ function Sequence({
                }}
                goToCourseExitPage={() => goToCourseExitPage()}
              />
-            )}
+              )}
+            </div>
          </div>
+          {/* This block of code should be reverted post REV1512 experiment */}
+          {REV1512FlyoverEnabled && isREV1512FlyoverVisible() && (
+            <div
+              className="rev-1512-box"
+              style={{
+                border: 'solid 1px #e1dddb',
+                height: '393px',
+                width: '330px',
+                verticalAlign: 'top',
+                marginLeft: '20px',
+                padding: '20px',
+              }}
+            />
+          )}
        </div>
        <CourseLicense license={course.license || undefined} />
      </div>
@@ -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 = {