Skip to content

Commit

Permalink
Cleaned up all references to REV-1512's value prop experiment (opened…
Browse files Browse the repository at this point in the history 
…x#379)

Cleaned up all references to REV-1512's value prop experiment [REV-2123]
  • Loading branch information
@inventhouse
inventhouse authored Mar 15, 2021
1 parent 413b189 commit ab98cca
Show file tree
Hide file tree
Showing 11 changed files with 10 additions and 673 deletions.
3 changes: 1 addition & 2 deletions src/alerts/offer-alert/OfferAlert.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ function OfferAlert({ intl, payload }) {

return (
<Alert type={ALERT_TYPES.INFO}>
{/* the first-purchase-offer-banner class can be removed post REV-1512 experiment */}
<span className="font-weight-bold first-purchase-offer-banner">
<span className="font-weight-bold">
<FormattedMessage
id="learning.offer.header"
defaultMessage="Upgrade by {date} and save {percentage}% [{fullPricing}]"
Expand Down
37 changes: 1 addition & 36 deletions src/courseware/course/Course.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { useDispatch } from 'react-redux';
Expand Down Expand Up @@ -57,35 +57,6 @@ function Course({
courseId, sequenceId, unitId, celebrateFirstSection, dispatch, celebrations,
);

// 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 userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
const isMobile = Boolean(
userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i),
);
const [REV1512FlyoverVisible, setREV1512FlyoverVisible] = useState(isMobile ? false : !(getCookie(`REV1512FlyoverVisible${courseId}`) === 'false'));
const isREV1512FlyoverVisible = () => REV1512FlyoverEnabled && (REV1512FlyoverVisible || getCookie('REV1512FlyoverVisible') === 'true');
const toggleREV1512Flyover = () => {
const setCookie = (cookieName, value, domain) => {
const cookieDomain = (typeof domain === 'undefined') ? '' : `domain=${domain};`;
const exdate = new Date();
exdate.setHours(exdate.getHours() + 4);
const cookieValue = `${escape(value)}; expires=${exdate.toUTCString()}`;
document.cookie = `${cookieName}=${cookieValue};${cookieDomain}path=/`;
};
const isVisible = isREV1512FlyoverVisible();
setCookie(`REV1512FlyoverVisible${courseId}`, !isVisible);
setREV1512FlyoverVisible(!isVisible);
};
// The above block of code should be reverted after the REV1512 experiment

/** [MM-P2P] Experiment */
const MMP2P = initCoursewareMMP2P(courseId, sequenceId, unitId);

Expand All @@ -109,9 +80,6 @@ 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 */
isREV1512FlyoverVisible={isREV1512FlyoverVisible} /* This line should be reverted after REV1512 experiment */
//* * [MM-P2P] Experiment */
mmp2p={MMP2P}
/>
Expand All @@ -123,9 +91,6 @@ function Course({
unitNavigationHandler={unitNavigationHandler}
nextSequenceHandler={nextSequenceHandler}
previousSequenceHandler={previousSequenceHandler}
toggleREV1512Flyover={toggleREV1512Flyover} /* This line should be reverted after REV1512 experiment */
isREV1512FlyoverVisible={isREV1512FlyoverVisible} /* This line should be reverted after REV1512 experiment */
REV1512FlyoverEnabled={REV1512FlyoverEnabled} /* This line should be reverted after REV1512 experiment */
//* * [MM-P2P] Experiment */
mmp2p={MMP2P}
/>
Expand Down
30 changes: 1 addition & 29 deletions src/courseware/course/CourseBreadcrumbs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,6 @@ 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 */
isREV1512FlyoverVisible, /* This line should be reverted after the REV1512 experiment */
/** [MM-P2P] Experiment */
mmp2p,
}) {
Expand All @@ -62,12 +59,6 @@ export default function CourseBreadcrumbs({
return [];
}, [courseStatus, sequenceStatus]);

// These should be reverted after the REV1512 experiment
const userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
const isMobile = Boolean(
userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i),
);

return (
<nav aria-label="breadcrumb" className="my-4">
<ol className="list-unstyled d-flex m-0">
Expand Down Expand Up @@ -96,22 +87,7 @@ export default function CourseBreadcrumbs({
{label}
</CourseBreadcrumb>
))}
{/* The below block of code should be reverted after the REV1512 experiment */}
{/** [MM-P2P] Experiment (additional conditional) */}
{REV1512FlyoverEnabled && !mmp2p.state.isEnabled && !isMobile && (
<div
className="toggleFlyoverButton"
aria-hidden="true"
style={{ marginLeft: 'auto', marginTop: '-16px', borderBottom: isREV1512FlyoverVisible() ? '2px solid #00262b' : 'none' }}
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>
)}

{/** [MM-P2P] Experiment */}
{mmp2p.state.isEnabled && (
<MMP2PFlyoverTrigger options={mmp2p} />
Expand All @@ -125,10 +101,6 @@ 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 */
isREV1512FlyoverVisible: PropTypes.func.isRequired, /* This line should be reverted after the REV1512 experiment */

/** [MM-P2P] Experiment */
mmp2p: PropTypes.shape({
state: PropTypes.shape({
Expand Down
189 changes: 4 additions & 185 deletions src/courseware/course/sequence/Sequence.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useSelector } from 'react-redux';
import { history } from '@edx/frontend-platform';

// These should be reverted after the REV1512 experiment
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';

import PageLoading from '../../../generic/PageLoading';
import { UserMessagesContext, ALERT_TYPES } from '../../../generic/user-messages';
import { useModel } from '../../../generic/model-store';
Expand All @@ -25,165 +21,9 @@ import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
import SequenceContent from './SequenceContent';

/** [MM-P2P] Experiment */
import { isMobile } from '../../../experiments/mm-p2p/utils';
import { MMP2PFlyover, MMP2PFlyoverMobile } from '../../../experiments/mm-p2p';

function REV1512Flyover({ toggleREV1512Flyover }) {
// This component should be reverted after the REV1512 experiment
return (
<div
className="rev-1512-box"
style={{
border: 'solid 1px #e1dddb',
height: '393px',
width: '330px',
verticalAlign: 'top',
marginLeft: '20px',
padding: '0 20px 20px 20px',
}}
>
<div
className="rev-1512-notification-div"
style={{
margin: '0 -20px 15px',
padding: '9px 20px 0',
fontSize: '16px',
}}
>
<span className="rev-1512-notification-span">Notifications</span>
<span
onClick={() => {
toggleREV1512Flyover();
}}
className="hideFlyover"
onKeyPress={(event) => {
if (event.key === 'Enter') {
toggleREV1512Flyover();
}
}}
role="button"
tabIndex={0}
>
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{
float: 'right',
marginTop: '5.5px',
}}
>
<path d="M9.60625 7L13.5152 3.09102C13.9949 2.61133 13.9949 1.83359 13.5152 1.35352L12.6465 0.484766C12.1668 0.00507814 11.3891 0.00507814 10.909 0.484766L7 4.39375L3.09102 0.484766C2.61133 0.00507814 1.83359 0.00507814 1.35352 0.484766L0.484766 1.35352C0.00507814 1.8332 0.00507814 2.61094 0.484766 3.09102L4.39375 7L0.484766 10.909C0.00507814 11.3887 0.00507814 12.1664 0.484766 12.6465L1.35352 13.5152C1.8332 13.9949 2.61133 13.9949 3.09102 13.5152L7 9.60625L10.909 13.5152C11.3887 13.9949 12.1668 13.9949 12.6465 13.5152L13.5152 12.6465C13.9949 12.1668 13.9949 11.3891 13.5152 10.909L9.60625 7Z" fill="black" />
</svg>
</span>
<div
className="rev-1512-notification-block"
style={{
height: '9px',
background: '#F9F9F9',
margin: '7px -20px 0',
borderTop: '1px solid rgb(225, 221, 219)',
borderBottom: '1px solid rgb(225, 221, 219)',
}}
/>
</div>
<div className="rev-1512-optimizely-flyover-container" />
</div>
);
}
REV1512Flyover.propTypes = {
toggleREV1512Flyover: PropTypes.func.isRequired,
};

function REV1512FlyoverMobile({ toggleREV1512Flyover }) {
// This component should be reverted after the REV1512 experiment
return (
<div
className="rev-1512-box"
style={{
verticalAlign: 'top',
padding: '0 20px 20px 20px',
position: 'fixed',
backgroundColor: 'white',
zIndex: 1,
height: '100%',
width: '100%',
top: 0,
left: 0,
}}
>
<div
className="rev-1512-mobile-return-div"
style={{
margin: '0 -20px',
padding: '9px 20px 15px',
fontSize: '16px',
borderBottom: '1px solid rgb(225, 221, 219)',
}}
>
<span
className="rev-1512-mobile-return-span"
onClick={toggleREV1512Flyover}
onKeyPress={(event) => {
if (event.key === 'Enter') {
toggleREV1512Flyover();
}
}}
role="button"
tabIndex={0}
style={{
color: '#00262B',
cursor: 'pointer',
}}
>
<FontAwesomeIcon
icon={faChevronLeft}
className="mr-2 fa-lg"
style={{
marginBottom: 2,
}}
/>
<span className="rev-1512-mobile-return-text">
Back to course
</span>
</span>
</div>
<div
className="rev-1512-notification-div"
style={{
margin: '0 -20px 15px',
padding: '9px 20px 0',
fontSize: '16px',
}}
>
<span
className="rev-1512-notification-span"
style={{
color: '#00262B',
}}
>
Notifications
</span>
<div
className="rev-1512-notification-block"
style={{
height: '9px',
background: '#F9F9F9',
margin: '7px -20px 0',
borderTop: '1px solid rgb(225, 221, 219)',
borderBottom: '1px solid rgb(225, 221, 219)',
}}
/>
</div>
<div className="rev-1512-optimizely-flyover-container" />
</div>
);
}
REV1512FlyoverMobile.propTypes = {
toggleREV1512Flyover: PropTypes.func.isRequired,
};

function Sequence({
unitId,
sequenceId,
Expand All @@ -192,10 +32,6 @@ 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 */
toggleREV1512Flyover, /* This line should be reverted after the REV1512 experiment */
/** [MM-P2P] Experiment */
mmp2p,
}) {
const course = useModel('coursewareMeta', courseId);
Expand All @@ -212,12 +48,6 @@ function Sequence({
}
};

// These should be reverted after the REV1512 experiment:
const userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
const isMobile = Boolean(
userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i),
);

const handlePrevious = () => {
const previousIndex = sequence.unitIds.indexOf(unitId) - 1;
if (previousIndex >= 0) {
Expand Down Expand Up @@ -320,9 +150,7 @@ function Sequence({
sequenceId={sequenceId}
unitId={unitId}
className="mb-4"
toggleREV1512Flyover={toggleREV1512Flyover} /* This line should be reverted after REV1512 experiment */
REV1512FlyoverEnabled={REV1512FlyoverEnabled} /* This line should be reverted after REV1512 experiment */
isREV1512FlyoverVisible={isREV1512FlyoverVisible} /* should be reverted after REV1512 experiment */

/** [MM-P2P] Experiment */
mmp2p={mmp2p}

Expand Down Expand Up @@ -367,16 +195,10 @@ function Sequence({
)}
</div>
</div>
{/* This block of code should be reverted post REV1512 experiment */}
{/** [MM-P2P] Experiment (additional conditional) */}
{!mmp2p.state.isEnabled && REV1512FlyoverEnabled && isREV1512FlyoverVisible() && (
isMobile
? <REV1512FlyoverMobile toggleREV1512Flyover={toggleREV1512Flyover} />
: <REV1512Flyover toggleREV1512Flyover={toggleREV1512Flyover} />
)}

{/** [MM-P2P] Experiment */}
{(mmp2p.state.isEnabled && mmp2p.flyover.isVisible) && (
isMobile
isMobile()
? <MMP2PFlyoverMobile options={mmp2p} />
: <MMP2PFlyover options={mmp2p} />
)}
Expand All @@ -402,9 +224,6 @@ Sequence.propTypes = {
nextSequenceHandler: PropTypes.func.isRequired,
previousSequenceHandler: PropTypes.func.isRequired,
intl: intlShape.isRequired,
toggleREV1512Flyover: PropTypes.func.isRequired, /* This line should be reverted after the REV1512 experiment */
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 */

/** [MM-P2P] Experiment */
mmp2p: PropTypes.shape({
Expand Down
Loading

0 comments on commit ab98cca

Please sign in to comment.