Remove Diff Paid experimental features.
This commit is contained in:
Diana Huang
@@ -1,71 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Modal, Button } from '@edx/paragon/static';
|
||||
|
||||
import ExperimentalCarousel from './ExperimentalCarousel.jsx';
|
||||
|
||||
// https://openedx.atlassian.net/browse/LEARNER-3926
|
||||
|
||||
export class PortfolioExperimentUpsellModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = { isOpen: true };
|
||||
}
|
||||
|
||||
render() {
|
||||
const slides = [
|
||||
(<div className='portfolio-slide-0'>
|
||||
<p className='description'>Upgrade to access new content: a guide for building an online portfolio and creating your first project.</p>
|
||||
<div className='checkmark-group-header'>By following the guide you will:</div>
|
||||
<ul className='upsell-modal-checkmark-group'>
|
||||
<li><span className='fa fa-check upsell-modal-checkmark' aria-hidden='true' />Use your new coding skills</li>
|
||||
<li><span className='fa fa-check upsell-modal-checkmark' aria-hidden='true' />Begin to build your portfolio</li>
|
||||
<li><span className='fa fa-check upsell-modal-checkmark' aria-hidden='true' />Share what you can do!</li>
|
||||
</ul>
|
||||
</div>),
|
||||
(<div className='portfolio-slide-1'>
|
||||
<h3 className='slide-header'><b>Use Your New Coding Skills</b></h3>
|
||||
<p>Want to practice what you've learned? We'll give you the project idea to create your own portfolio. Get creative!</p>
|
||||
</div>),
|
||||
(<div className='portfolio-slide-2'>
|
||||
<h3 className='slide-header'><b>Build Your Portfolio</b></h3>
|
||||
<p>Apply your knowledge and show them you can code - this project is the perfect start to your portfolio.</p>
|
||||
</div>),
|
||||
(<div className='portfolio-slide-3'>
|
||||
<h3 className='slide-header'><b>Share What You Can Do</b></h3>
|
||||
<p>Get tips on where to store your project and the best way to share it with employers.</p>
|
||||
</div>),
|
||||
];
|
||||
|
||||
const body = (
|
||||
<div>
|
||||
<ExperimentalCarousel id='portfolio-upsell-modal' slides={slides} />
|
||||
<img
|
||||
className="upsell-certificate"
|
||||
src="https://courses.edx.org/static/images/edx-verified-mini-cert.png"
|
||||
alt="Sample verified certificate"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={this.state.isOpen}
|
||||
className='portfolio-upsell-modal'
|
||||
title={'Portfolio Builder: My First Project'}
|
||||
onClose={() => {}}
|
||||
body={body}
|
||||
buttons={[
|
||||
(<Button
|
||||
label={'Upgrade ($100 USD)'}
|
||||
display={'Upgrade ($100 USD)'}
|
||||
buttonType='success'
|
||||
// unfortunately, Button components don't have an href attribute
|
||||
onClick={() => {}}
|
||||
/>),
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Modal, Button } from '@edx/paragon/static';
|
||||
|
||||
import ExperimentalCarousel from './ExperimentalCarousel.jsx';
|
||||
|
||||
// https://openedx.atlassian.net/browse/LEARNER-3583
|
||||
|
||||
export class UpsellExperimentModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isOpen: true,
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const slides = [
|
||||
(<div>
|
||||
<div className="my-stats-introduction">My Stats introduces new personalized views that help you track your progress towards completing your course!</div>
|
||||
<div className="my-stats-slide-header">With My Stats you will see your:</div>
|
||||
<ul className="upsell-modal-checkmark-group">
|
||||
<li><span className="fa fa-check upsell-modal-checkmark" aria-hidden="true" />Course Activity Streak (log in every week to keep your streak alive)</li>
|
||||
<li><span className="fa fa-check upsell-modal-checkmark" aria-hidden="true" />Grade Progress (see how you're tracking towards a passing grade)</li>
|
||||
<li><span className="fa fa-check upsell-modal-checkmark" aria-hidden="true" />Discussion Forum Engagements (top learners use the forums - how do you measure up?)</li>
|
||||
</ul>
|
||||
</div>),
|
||||
(<div>
|
||||
<div className="slide-header"><b>Course Activity Streak</b></div>
|
||||
<span className="course-activity-streak-information">Did you know the learners most likely to complete a course log in every week? Let us help you track your weekly streak - log in every week and learn something new! You can also see how many of the other learners in your course logged in this week.</span>
|
||||
<img
|
||||
className="feature-screenshot"
|
||||
src="https://prod-edx-mktg-edit.edx.org/sites/default/files/week_streak.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>),
|
||||
(<div>
|
||||
<div className="slide-header"><b>Grade Progress</b></div>
|
||||
<span className="grade-progress-information">Wonder how you're doing in the course so far? We can not only show you all your grades, and how much each assignment is worth, but also upcoming graded assignments. This is a great way to track what you might need to work on for a final exam.</span>
|
||||
<img
|
||||
className="feature-screenshot"
|
||||
src="https://prod-edx-mktg-edit.edx.org/sites/default/files/grading.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>),
|
||||
(<div>
|
||||
<div className="slide-header"><b>Discussion engagements</b></div>
|
||||
<span className="discussion-engagements-information">A large percentage of successful learners are engaged on the discussion forums. Compare your forum stats to previous graduates!</span>
|
||||
<img
|
||||
className="feature-screenshot"
|
||||
src="https://prod-edx-mktg-edit.edx.org/sites/default/files/discussions.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>),
|
||||
];
|
||||
const body = (
|
||||
<div>
|
||||
<ExperimentalCarousel id="upsell-modal" slides={slides} />
|
||||
<img
|
||||
className="upsell-certificate"
|
||||
src="https://courses.edx.org/static/images/edx-verified-mini-cert.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const { buttonDestinationURL } = this.props;
|
||||
return (
|
||||
<Modal
|
||||
open={this.state.isOpen}
|
||||
className="upsell-modal"
|
||||
title={"My Stats"}
|
||||
onClose={() => {}}
|
||||
body={body}
|
||||
buttons={[
|
||||
(<Button
|
||||
label={"Upgrade ($100 USD)"}
|
||||
display={"Upgrade ($100 USD)"}
|
||||
buttonType="success"
|
||||
// unfortunately, Button components don't have an href component
|
||||
onClick={() => window.location = buttonDestinationURL}
|
||||
/>),
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
UpsellExperimentModal.propTypes = {
|
||||
buttonDestinationURL: PropTypes.string.isRequired,
|
||||
};
|
||||
Reference in New Issue
Block a user