feat: Remove discount banner code (#601)
This commit is contained in:
Zainab Amir
67
package-lock.json
generated
67
package-lock.json
generated
@@ -20,7 +20,6 @@
|
||||
"@fortawesome/react-fontawesome": "0.1.18",
|
||||
"@redux-devtools/extension": "3.2.2",
|
||||
"classnames": "2.3.1",
|
||||
"clipboard": "2.0.10",
|
||||
"core-js": "3.21.1",
|
||||
"extract-react-intl-messages": "4.1.1",
|
||||
"fastest-levenshtein": "1.0.12",
|
||||
@@ -9390,16 +9389,6 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/clipboard": {
|
||||
"version": "2.0.10",
|
||||
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.10.tgz",
|
||||
"integrity": "sha512-cz3m2YVwFz95qSEbCDi2fzLN/epEN9zXBvfgAoGkvGOJZATMl9gtTDVOtBYkx2ODUJl2kvmud7n32sV2BpYR4g==",
|
||||
"dependencies": {
|
||||
"good-listener": "^1.2.2",
|
||||
"select": "^1.1.2",
|
||||
"tiny-emitter": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/cliui": {
|
||||
"version": "7.0.4",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
|
||||
@@ -10722,11 +10711,6 @@
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/delegate": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
|
||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
|
||||
@@ -13794,14 +13778,6 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/good-listener": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
|
||||
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
|
||||
"dependencies": {
|
||||
"delegate": "^3.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/got": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/got/-/got-7.1.0.tgz",
|
||||
@@ -24386,11 +24362,6 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/select": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
|
||||
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
|
||||
},
|
||||
"node_modules/select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
@@ -26240,11 +26211,6 @@
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tiny-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
|
||||
@@ -35403,16 +35369,6 @@
|
||||
"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
|
||||
"dev": true
|
||||
},
|
||||
"clipboard": {
|
||||
"version": "2.0.10",
|
||||
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.10.tgz",
|
||||
"integrity": "sha512-cz3m2YVwFz95qSEbCDi2fzLN/epEN9zXBvfgAoGkvGOJZATMl9gtTDVOtBYkx2ODUJl2kvmud7n32sV2BpYR4g==",
|
||||
"requires": {
|
||||
"good-listener": "^1.2.2",
|
||||
"select": "^1.1.2",
|
||||
"tiny-emitter": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"cliui": {
|
||||
"version": "7.0.4",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
|
||||
@@ -36439,11 +36395,6 @@
|
||||
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
|
||||
"dev": true
|
||||
},
|
||||
"delegate": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
|
||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
|
||||
},
|
||||
"depd": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
|
||||
@@ -38789,14 +38740,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"good-listener": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
|
||||
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
|
||||
"requires": {
|
||||
"delegate": "^3.1.2"
|
||||
}
|
||||
},
|
||||
"got": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/got/-/got-7.1.0.tgz",
|
||||
@@ -46779,11 +46722,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"select": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
|
||||
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
|
||||
},
|
||||
"select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
@@ -48294,11 +48232,6 @@
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
|
||||
"dev": true
|
||||
},
|
||||
"tiny-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
|
||||
},
|
||||
"tiny-invariant": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
|
||||
|
||||
@@ -45,7 +45,6 @@
|
||||
"@fortawesome/react-fontawesome": "0.1.18",
|
||||
"@redux-devtools/extension": "3.2.2",
|
||||
"classnames": "2.3.1",
|
||||
"clipboard": "2.0.10",
|
||||
"core-js": "3.21.1",
|
||||
"extract-react-intl-messages": "4.1.1",
|
||||
"fastest-levenshtein": "1.0.12",
|
||||
|
||||
@@ -364,10 +364,6 @@ select.form-control {
|
||||
height: 282px;
|
||||
}
|
||||
|
||||
.variation1-medium-screen {
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
.medium-screen-svg-light,
|
||||
.medium-screen-svg-primary {
|
||||
fill: $light-200;
|
||||
@@ -503,14 +499,6 @@ select.form-control {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.variation1-bar-color {
|
||||
stroke: $brand !important;
|
||||
}
|
||||
|
||||
.variation2-bar-color {
|
||||
stroke: $accent-a !important;
|
||||
}
|
||||
|
||||
.medium-screen-svg-line {
|
||||
padding-top: 0.5rem;
|
||||
stroke: $accent-b;
|
||||
@@ -526,21 +514,6 @@ select.form-control {
|
||||
width: 4em;
|
||||
height: 72px;
|
||||
}
|
||||
.dicount-heading{
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.hover-text:hover {
|
||||
color: $black !important;
|
||||
|
||||
.hover-icon {
|
||||
color: $black !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-discount-icon:hover {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.large-heading {
|
||||
margin-left: 7px;
|
||||
@@ -703,16 +676,6 @@ select.form-control {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.discount-banner {
|
||||
background-color: #03C7E8;
|
||||
}
|
||||
|
||||
.dashed-border {
|
||||
border-style: dashed;
|
||||
border-width: thin;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.mw-500 {
|
||||
width: 500px;
|
||||
@@ -748,12 +711,6 @@ select.form-control {
|
||||
flex-direction:column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dashed-border {
|
||||
border-style: dashed;
|
||||
border-width: thin;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) and (min-width: 768px) {
|
||||
@@ -807,12 +764,6 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.variation2-text-alignment {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Smaller than Extra Small (Mobile Screens)
|
||||
@media (max-width: 464px) {
|
||||
.btn-social {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';
|
||||
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
|
||||
@@ -11,26 +11,15 @@ import MediaQuery from 'react-responsive';
|
||||
import AuthExtraLargeLayout from './AuthExtraLargeLayout';
|
||||
import AuthMediumLayout from './AuthMediumLayout';
|
||||
import AuthSmallLayout from './AuthSmallLayout';
|
||||
import DiscountExperimentBanner from './DiscountBanner';
|
||||
import LargeLayout from './LargeLayout';
|
||||
import MediumLayout from './MediumLayout';
|
||||
import SmallLayout from './SmallLayout';
|
||||
|
||||
const BaseComponent = ({ children, isRegistrationPage, showWelcomeBanner }) => {
|
||||
const BaseComponent = ({ children, showWelcomeBanner }) => {
|
||||
const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;
|
||||
const [optimizelyExperimentName, setOptimizelyExperimentName] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const { experimentName } = window;
|
||||
|
||||
if (experimentName) {
|
||||
setOptimizelyExperimentName(experimentName);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{isRegistrationPage && optimizelyExperimentName === 'variation2' ? <DiscountExperimentBanner /> : null}
|
||||
<CookiePolicyBanner languageCode={getLocale()} />
|
||||
<MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraLarge.maxWidth}>
|
||||
<div className="col-md-12 extra-large-screen-top-stripe" />
|
||||
@@ -43,35 +32,35 @@ const BaseComponent = ({ children, isRegistrationPage, showWelcomeBanner }) => {
|
||||
<MediaQuery maxWidth={breakpoints.extraSmall.maxWidth}>
|
||||
<div className="col-md-12 small-screen-top-stripe" />
|
||||
{authenticatedUser ? <AuthSmallLayout variant="xs" username={authenticatedUser.username} /> : (
|
||||
<SmallLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
|
||||
<SmallLayout />
|
||||
)}
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth}>
|
||||
<div className="col-md-12 small-screen-top-stripe" />
|
||||
{authenticatedUser ? <AuthSmallLayout username={authenticatedUser.username} /> : (
|
||||
<SmallLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
|
||||
<SmallLayout />
|
||||
)}
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.medium.maxWidth}>
|
||||
<div className="w-100 medium-screen-top-stripe" />
|
||||
{authenticatedUser ? <AuthMediumLayout username={authenticatedUser.username} /> : (
|
||||
<MediumLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
|
||||
<MediumLayout />
|
||||
)}
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={breakpoints.large.minWidth} maxWidth={breakpoints.large.maxWidth}>
|
||||
<div className="w-100 large-screen-top-stripe" />
|
||||
{authenticatedUser ? <AuthMediumLayout username={authenticatedUser.username} /> : (
|
||||
<MediumLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
|
||||
<MediumLayout />
|
||||
)}
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraLarge.maxWidth}>
|
||||
{authenticatedUser ? <AuthExtraLargeLayout username={authenticatedUser.username} /> : (
|
||||
<LargeLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
|
||||
<LargeLayout />
|
||||
)}
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={breakpoints.extraExtraLarge.minWidth} maxWidth={breakpoints.extraExtraLarge.maxWidth}>
|
||||
{authenticatedUser ? <AuthExtraLargeLayout variant="xxl" username={authenticatedUser.username} /> : (
|
||||
<LargeLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
|
||||
<LargeLayout />
|
||||
)}
|
||||
</MediaQuery>
|
||||
|
||||
@@ -84,13 +73,11 @@ const BaseComponent = ({ children, isRegistrationPage, showWelcomeBanner }) => {
|
||||
};
|
||||
|
||||
BaseComponent.defaultProps = {
|
||||
isRegistrationPage: false,
|
||||
showWelcomeBanner: false,
|
||||
};
|
||||
|
||||
BaseComponent.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
isRegistrationPage: PropTypes.bool,
|
||||
showWelcomeBanner: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { PageBanner, Toast } from '@edx/paragon';
|
||||
import { faCut } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import ClipboardJS from 'clipboard';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
const DiscountExperimentBanner = (props) => {
|
||||
const { intl } = props;
|
||||
const [show, setShow] = useState(true);
|
||||
const [showToast, setToastShow] = useState(false);
|
||||
new ClipboardJS('.copyIcon'); // eslint-disable-line no-new
|
||||
const getDiscountText = () => (
|
||||
<strong>
|
||||
15% <FormattedMessage
|
||||
id="top.discount.message.15.off"
|
||||
defaultMessage="off"
|
||||
description="Text used with discounts e.g. 15% off"
|
||||
/>
|
||||
</strong>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toast
|
||||
onClose={() => setToastShow(false)}
|
||||
show={showToast}
|
||||
>
|
||||
{intl.formatMessage(messages['code.copied'])}
|
||||
</Toast>
|
||||
<PageBanner
|
||||
show={show}
|
||||
dismissible
|
||||
onDismiss={() => { setShow(false); }}
|
||||
>
|
||||
<span className="text-primary-700 small variation2-text-alignment">
|
||||
<span className="mr-3">
|
||||
<FormattedMessage
|
||||
id="top.discount.message.body"
|
||||
defaultMessage="Get {discount} your first verified certificate* with code"
|
||||
description="Message body for edX discount"
|
||||
values={{
|
||||
discount: getDiscountText(),
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<span className="hover-text dashed-border p-1 d-inline-flex flex-wrap align-items-center">
|
||||
<span id="edx-welcome" className="font-weight-bold ">EDXWELCOME</span>
|
||||
<FontAwesomeIcon
|
||||
className="text-dark-200 copyIcon ml-2 hover-icon"
|
||||
icon={faCut}
|
||||
data-clipboard-action="copy"
|
||||
data-clipboard-target="#edx-welcome"
|
||||
onClick={() => setToastShow(true)}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</PageBanner>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
DiscountExperimentBanner.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
|
||||
};
|
||||
export default injectIntl(DiscountExperimentBanner);
|
||||
@@ -2,17 +2,16 @@ import React from 'react';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { Hyperlink, Image } from '@edx/paragon';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import LargeScreenLeftLayout from './LargeLeftLayout';
|
||||
|
||||
const LargeLayout = ({ experimentName, isRegistrationPage }) => (
|
||||
const LargeLayout = () => (
|
||||
<div className="container row p-0 m-0 large-screen-container">
|
||||
<div className="col-md-9 p-0 screen-header-primary">
|
||||
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
|
||||
<Image alt={getConfig().SITE_NAME} className="logo position-absolute" src={getConfig().LOGO_WHITE_URL} />
|
||||
</Hyperlink>
|
||||
<LargeScreenLeftLayout experimentName={experimentName} isRegistrationPage={isRegistrationPage} />
|
||||
<LargeScreenLeftLayout />
|
||||
</div>
|
||||
<div className="col-md-3 p-0 screen-polygon">
|
||||
<svg
|
||||
@@ -29,14 +28,4 @@ const LargeLayout = ({ experimentName, isRegistrationPage }) => (
|
||||
</div>
|
||||
);
|
||||
|
||||
LargeLayout.defaultProps = {
|
||||
experimentName: '',
|
||||
isRegistrationPage: false,
|
||||
};
|
||||
|
||||
LargeLayout.propTypes = {
|
||||
experimentName: PropTypes.string,
|
||||
isRegistrationPage: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default LargeLayout;
|
||||
|
||||
@@ -1,73 +1,32 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Toast } from '@edx/paragon';
|
||||
import { faCut } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import classNames from 'classnames';
|
||||
import ClipboardJS from 'clipboard';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import messages from './messages';
|
||||
import SideDiscountBanner from './SideDiscountBanner';
|
||||
|
||||
const LargeLeftLayout = (props) => {
|
||||
const { intl, isRegistrationPage, experimentName } = props;
|
||||
const [showToast, setToastShow] = useState(false);
|
||||
new ClipboardJS('.copyIcon'); // eslint-disable-line no-new
|
||||
const { intl } = props;
|
||||
|
||||
return (
|
||||
<div className="min-vh-100 d-flex justify-content-left align-items-center">
|
||||
<div className="d-flex pr-0 mt-lg-n2">
|
||||
<Toast
|
||||
onClose={() => setToastShow(false)}
|
||||
show={showToast}
|
||||
>
|
||||
{intl.formatMessage(messages['code.copied'])}
|
||||
</Toast>
|
||||
<svg
|
||||
role="img"
|
||||
aria-label=""
|
||||
focusable={false}
|
||||
className={classNames(
|
||||
'large-screen-svg-line',
|
||||
{
|
||||
'variation1-bar-color mt-n6 pt-0 ml-5': experimentName === 'variation1' && isRegistrationPage,
|
||||
'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
|
||||
'ml-5': experimentName !== 'variation1' || !isRegistrationPage,
|
||||
},
|
||||
)}
|
||||
className="large-screen-svg-line ml-5"
|
||||
>
|
||||
<line x1="50" y1="0" x2="10" y2="215" />
|
||||
</svg>
|
||||
<div className={classNames({ 'pl-4': experimentName === 'variation1' && isRegistrationPage })}>
|
||||
<h1 className={classNames('large-heading', { 'mb-4.5': experimentName === 'variation1' && isRegistrationPage })}>
|
||||
<div>
|
||||
<h1 className="large-heading">
|
||||
{intl.formatMessage(messages['start.learning'])}
|
||||
<span
|
||||
className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
|
||||
>
|
||||
<span className="text-accent-a">
|
||||
<br />
|
||||
{intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
|
||||
</span>
|
||||
</h1>
|
||||
{experimentName === 'variation1' && isRegistrationPage ? (
|
||||
<span className="text-light-300 dicount-heading">
|
||||
<span className="lead mr-3">
|
||||
<SideDiscountBanner />
|
||||
</span>
|
||||
<span className="dashed-border d-inline-flex flex-wrap align-items-center">
|
||||
<span id="edx-welcome" className="text-white edx-welcome font-weight-bold mr-1">EDXWELCOME</span>
|
||||
<FontAwesomeIcon
|
||||
className="text-light-700 copyIcon ml-1.5 hover-discount-icon"
|
||||
icon={faCut}
|
||||
data-clipboard-action="copy"
|
||||
data-clipboard-target="#edx-welcome"
|
||||
onClick={() => setToastShow(true)}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,13 +35,6 @@ const LargeLeftLayout = (props) => {
|
||||
|
||||
LargeLeftLayout.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
experimentName: PropTypes.string,
|
||||
isRegistrationPage: PropTypes.bool,
|
||||
};
|
||||
|
||||
LargeLeftLayout.defaultProps = {
|
||||
experimentName: '',
|
||||
isRegistrationPage: false,
|
||||
};
|
||||
|
||||
export default injectIntl(LargeLeftLayout);
|
||||
|
||||
@@ -1,36 +1,16 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Hyperlink, Image, Toast } from '@edx/paragon';
|
||||
import { faCut } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import classNames from 'classnames';
|
||||
import ClipboardJS from 'clipboard';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Hyperlink, Image } from '@edx/paragon';
|
||||
|
||||
import messages from './messages';
|
||||
import SideDiscountBanner from './SideDiscountBanner';
|
||||
|
||||
const MediumLayout = (props) => {
|
||||
const { intl, isRegistrationPage, experimentName } = props;
|
||||
const [showToast, setToastShow] = useState(false);
|
||||
new ClipboardJS('.copyIcon'); // eslint-disable-line no-new
|
||||
const { intl } = props;
|
||||
|
||||
return (
|
||||
<div className={classNames(
|
||||
'container row p-0 mb-3 medium-screen-container',
|
||||
{
|
||||
'variation1-medium-screen': experimentName === 'variation1' && isRegistrationPage,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<Toast
|
||||
onClose={() => setToastShow(false)}
|
||||
show={showToast}
|
||||
>
|
||||
{intl.formatMessage(messages['code.copied'])}
|
||||
</Toast>
|
||||
<div className="container row p-0 mb-3 medium-screen-container">
|
||||
<div className="col-md-10 p-0 screen-header-primary">
|
||||
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
|
||||
<Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
|
||||
@@ -40,41 +20,18 @@ const MediumLayout = (props) => {
|
||||
role="img"
|
||||
aria-label=""
|
||||
focusable={false}
|
||||
className={classNames(
|
||||
'medium-screen-svg-line pl-5',
|
||||
{
|
||||
'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
|
||||
'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
|
||||
},
|
||||
)}
|
||||
className="medium-screen-svg-line pl-5"
|
||||
>
|
||||
<line x1="50" y1="0" x2="10" y2="215" />
|
||||
</svg>
|
||||
<div className="pb-4">
|
||||
<h1 className="medium-heading">
|
||||
{intl.formatMessage(messages['start.learning'])}
|
||||
<span
|
||||
className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
|
||||
>
|
||||
<span className="text-accent-a">
|
||||
<br />
|
||||
{intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
|
||||
</span>
|
||||
</h1>
|
||||
{experimentName === 'variation1' && isRegistrationPage ? (
|
||||
<div className="text-light-300 pl-3">
|
||||
<SideDiscountBanner />
|
||||
<span className="dashed-border h5 text-white">
|
||||
<span id="edx-welcome" className="edx-welcome">EDXWELCOME </span>
|
||||
<FontAwesomeIcon
|
||||
className="text-light-700 copyIcon ml-1 hover-discount-icon"
|
||||
icon={faCut}
|
||||
data-clipboard-action="copy"
|
||||
data-clipboard-target="#edx-welcome"
|
||||
onClick={() => setToastShow(true)}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
@@ -92,13 +49,6 @@ const MediumLayout = (props) => {
|
||||
|
||||
MediumLayout.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
experimentName: PropTypes.string,
|
||||
isRegistrationPage: PropTypes.bool,
|
||||
};
|
||||
|
||||
MediumLayout.defaultProps = {
|
||||
experimentName: '',
|
||||
isRegistrationPage: false,
|
||||
};
|
||||
|
||||
export default injectIntl(MediumLayout);
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
export default function SideDiscountBanner() {
|
||||
const getDiscountText = () => (
|
||||
<span className="text-accent-a h3">
|
||||
15% <FormattedMessage
|
||||
id="side.discount.message.15.off"
|
||||
defaultMessage="off"
|
||||
description="Text used with discounts e.g. 15% off"
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
const getCerificateMsg = () => (
|
||||
<span className="dicount-heading">
|
||||
<FormattedMessage
|
||||
id="certificate.message"
|
||||
defaultMessage="certificate* with code"
|
||||
description="Text with certificate"
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className="mr-1.5">
|
||||
<FormattedMessage
|
||||
id="side.discount.message.body"
|
||||
defaultMessage="Get {discountText} your first verified {lineBreak} {certificateMsg}"
|
||||
description="Message body for edX discount"
|
||||
values={{
|
||||
discountText: getDiscountText(),
|
||||
lineBreak: <br />,
|
||||
certificateMsg: getCerificateMsg(),
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,31 +1,17 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Hyperlink, Image, Toast } from '@edx/paragon';
|
||||
import { faCut } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import classNames from 'classnames';
|
||||
import ClipboardJS from 'clipboard';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Hyperlink, Image } from '@edx/paragon';
|
||||
|
||||
import messages from './messages';
|
||||
import SideDiscountBanner from './SideDiscountBanner';
|
||||
|
||||
const SmallLayout = (props) => {
|
||||
const { intl, isRegistrationPage, experimentName } = props;
|
||||
const [showToast, setToastShow] = useState(false);
|
||||
new ClipboardJS('.copyIcon'); // eslint-disable-line no-new
|
||||
const { intl } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="small-screen-header-primary">
|
||||
<Toast
|
||||
onClose={() => setToastShow(false)}
|
||||
show={showToast}
|
||||
>
|
||||
{intl.formatMessage(messages['code.copied'])}
|
||||
</Toast>
|
||||
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
|
||||
<Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
|
||||
</Hyperlink>
|
||||
@@ -34,13 +20,7 @@ const SmallLayout = (props) => {
|
||||
role="img"
|
||||
aria-label=""
|
||||
focusable={false}
|
||||
className={classNames(
|
||||
'small-screen-svg-line',
|
||||
{
|
||||
'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
|
||||
'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
|
||||
},
|
||||
)}
|
||||
className="small-screen-svg-line"
|
||||
>
|
||||
<line x1="55" y1="0" x2="40" y2="65" />
|
||||
</svg>
|
||||
@@ -48,27 +28,10 @@ const SmallLayout = (props) => {
|
||||
<h1 className="small-heading">
|
||||
{intl.formatMessage(messages['start.learning'])}
|
||||
<br />
|
||||
<span
|
||||
className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
|
||||
>
|
||||
<span className="text-accent-a">
|
||||
{intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
|
||||
</span>
|
||||
</h1>
|
||||
{(experimentName === 'variation1' && isRegistrationPage) ? (
|
||||
<div className="small text-light-300 pl-2">
|
||||
<SideDiscountBanner />
|
||||
<span className="dashed-border h6 text-white d-inline-flex flex-wrap align-items-center">
|
||||
<span id="edx-welcome" className="edx-welcome mr-1">EDXWELCOME</span>
|
||||
<FontAwesomeIcon
|
||||
className="text-light-700 copyIcon ml-1 hover-discount-icon"
|
||||
icon={faCut}
|
||||
data-clipboard-action="copy"
|
||||
data-clipboard-target="#edx-welcome"
|
||||
onClick={() => setToastShow(true)}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,14 +41,6 @@ const SmallLayout = (props) => {
|
||||
|
||||
SmallLayout.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
experimentName: PropTypes.string,
|
||||
isRegistrationPage: PropTypes.bool,
|
||||
};
|
||||
|
||||
SmallLayout.defaultProps = {
|
||||
experimentName: '',
|
||||
isRegistrationPage: false,
|
||||
|
||||
};
|
||||
|
||||
export default injectIntl(SmallLayout);
|
||||
|
||||
@@ -11,11 +11,6 @@ const messages = defineMessages({
|
||||
defaultMessage: 'with {siteName}',
|
||||
description: 'Header text with site name for logistration MFE pages',
|
||||
},
|
||||
'code.copied': {
|
||||
id: 'code.copied',
|
||||
defaultMessage: 'Code copied',
|
||||
description: 'part of 15% discount code copied',
|
||||
},
|
||||
// authenticated user base component text
|
||||
'complete.your.profile.1': {
|
||||
id: 'complete.your.profile.1',
|
||||
|
||||
@@ -61,7 +61,7 @@ const Logistration = (props) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseComponent isRegistrationPage={selectedPage === REGISTER_PAGE}>
|
||||
<BaseComponent>
|
||||
<div>
|
||||
{institutionLogin
|
||||
? (
|
||||
|
||||
@@ -85,7 +85,6 @@ class RegistrationPage extends React.Component {
|
||||
failureCount: 0,
|
||||
startTime: Date.now(),
|
||||
totalRegistrationTime: 0,
|
||||
optimizelyExperimentName: '',
|
||||
readOnly: true,
|
||||
validatePassword: false,
|
||||
values: {},
|
||||
@@ -111,7 +110,6 @@ class RegistrationPage extends React.Component {
|
||||
payload.is_registered = this.isRegistered;
|
||||
this.props.resetRegistrationForm();
|
||||
this.props.getThirdPartyAuthContext(payload);
|
||||
this.getExperiments();
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
@@ -178,14 +176,6 @@ class RegistrationPage extends React.Component {
|
||||
return true;
|
||||
}
|
||||
|
||||
getExperiments = () => {
|
||||
const { experimentName } = window;
|
||||
|
||||
if (experimentName) {
|
||||
this.setState({ optimizelyExperimentName: experimentName });
|
||||
}
|
||||
};
|
||||
|
||||
onChangeHandler = (e) => {
|
||||
const { name, value, checked } = e.target;
|
||||
const { errors, values } = this.state;
|
||||
@@ -795,13 +785,6 @@ class RegistrationPage extends React.Component {
|
||||
thirdPartyAuthApiStatus,
|
||||
intl)}
|
||||
</Form>
|
||||
{(this.state.optimizelyExperimentName === 'variation1' || this.state.optimizelyExperimentName === 'variation2')
|
||||
? (
|
||||
<div id="certificate-msg" className="mt-4 mb-3 micro text-gray-500">
|
||||
{intl.formatMessage(messages['certificate.msg'])}
|
||||
</div>
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -300,11 +300,6 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Did you mean',
|
||||
description: 'Did you mean alert suggestion',
|
||||
},
|
||||
'certificate.msg': {
|
||||
id: 'certificate.msg',
|
||||
defaultMessage: '*Offer not eligible for GTx’s Analytics: Essential Tools and Methods MicroMasters Program, ColumbiaX’s Corporate Finance Professional Certificate Program, or courses or programs offered by Wharton, and NYIF.',
|
||||
description: 'Text for the 15% discount experiment',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
|
||||
Reference in New Issue
Block a user