Andal.LND/frontend-app-learning
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REV-1517] Add Notification header and X to hide the flyover (#313)

Browse Source 
* Add back classes to first purchase offer banner that are used in the REV-1512 optimizely test

* Add notification header with an X to hide the flyover box
This commit is contained in:
Matthew Piatetsky
2020-12-16 12:35:05 -05:00
committed by GitHub
parent 2fc4c8c153
commit 255e36baa8
2 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/courseware/course/Course.jsx
View File

@@ -104,6 +104,7 @@ 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 */
/>

43
src/courseware/course/sequence/Sequence.jsx
View File

@@ -30,6 +30,7 @@ function Sequence({
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 */
}) {
const course = useModel('courses', courseId);
const sequence = useModel('sequences', sequenceId);
@@ -196,9 +197,46 @@ function Sequence({
width: '330px',
verticalAlign: 'top',
marginLeft: '20px',
padding: '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">Notification</span>
<svg
onClick={() => {
toggleREV1512Flyover();
}}
className="hideFlyover"
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>
<div
className="rev-1512-notification-block"
style={{
height: '9px',
background: '#F9F9F9',
margin: '7px -20px 0',
border: '1px solid rgb(225, 221, 219)',
}}
/>
</div>
</div>
)}
</div>
<CourseLicense license={course.license || undefined} />
@@ -222,6 +260,7 @@ 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 */
};