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

fix: design issue in discount experiment (#428)

Browse Source
This commit is contained in:
Attiya Ishaque
2021-09-07 17:21:37 +05:00
committed by GitHub
parent 53e40480f2
commit 8917b88a5a
7 changed files with 95 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/_style.scss
View File

@@ -513,6 +513,21 @@ 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;
@@ -689,7 +704,7 @@ select.form-control {
.dashed-border {
border-style: dashed;
border-width: thin;
padding: 0.5rem 1rem;
padding: 0.5rem;
}
@media (min-width: 1024px) {

32
src/base-component/DiscountBanner.jsx
View File

@@ -2,14 +2,17 @@ import React, { useState } from 'react';
import ClipboardJS from 'clipboard';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import { faCut } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { PageBanner } from '@edx/paragon';
import { Toast, PageBanner } from '@edx/paragon';
import messages from './messages';
export default function DiscountExperimentBanner() {
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>
@@ -23,13 +26,19 @@ export default function DiscountExperimentBanner() {
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-1">
<span className="mr-3">
<FormattedMessage
id="top.discount.message.body"
defaultMessage="Get {discount} your first verified certificate* with code"
@@ -39,17 +48,24 @@ export default function DiscountExperimentBanner() {
}}
/>
</span>
<span className="dashed-border p-1 d-inline-flex flex-wrap align-items-center">
<span id="edx-welcome" className="font-weight-bold">EDXWELCOME</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"
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);

22
src/base-component/LargeLeftLayout.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import classNames from 'classnames';
@@ -9,19 +9,28 @@ import ClipboardJS from 'clipboard';
import { faCut } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Toast } from '@edx/paragon';
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
return (
<div className="min-vh-100 pr-0 mt-lg-n2 d-flex align-items-center">
<Toast
onClose={() => setToastShow(false)}
show={showToast}
>
{intl.formatMessage(messages['code.copied'])}
</Toast>
<svg className={classNames(
'large-screen-svg-line',
{
'variation1-bar-color mt-n5 pt-0': experimentName === 'variation1' && isRegistrationPage,
'variation1-bar-color mt-n6 pt-0 ml-5': experimentName === 'variation1' && isRegistrationPage,
'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
'ml-5': experimentName !== 'variation1' || !isRegistrationPage,
},
@@ -30,7 +39,7 @@ const LargeLeftLayout = (props) => {
<line x1="50" y1="0" x2="10" y2="215" />
</svg>
<div className={classNames({ 'pl-4': experimentName === 'variation1' && isRegistrationPage })}>
<h1 className="large-heading">
<h1 className={classNames('large-heading', { 'mb-4.5': experimentName === 'variation1' && isRegistrationPage })}>
{intl.formatMessage(messages['start.learning'])}
<span
className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
@@ -40,17 +49,18 @@ const LargeLeftLayout = (props) => {
</span>
</h1>
{experimentName === 'variation1' && isRegistrationPage ? (
<span className="text-light-300">
<span className="lead mr-2.5">
<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"
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>

14
src/base-component/MediumLayout.jsx
View File

@@ -1,10 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import classNames from 'classnames';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import { Hyperlink, Image } from '@edx/paragon';
import { Hyperlink, Image, Toast } from '@edx/paragon';
import PropTypes from 'prop-types';
import ClipboardJS from 'clipboard';
@@ -16,6 +16,7 @@ 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
return (
@@ -26,6 +27,12 @@ const MediumLayout = (props) => {
},
)}
>
<Toast
onClose={() => setToastShow(false)}
show={showToast}
>
{intl.formatMessage(messages['code.copied'])}
</Toast>
<div className="col-md-10 p-0 screen-header-primary">
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image alt="edx" className="logo" src={getConfig().LOGO_WHITE_URL} />
@@ -57,10 +64,11 @@ const MediumLayout = (props) => {
<span className="dashed-border h5 text-white">
<span id="edx-welcome" className="edx-welcome">EDXWELCOME </span>
<FontAwesomeIcon
className="text-light-700 copyIcon ml-1"
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>

12
src/base-component/SideDiscountBanner.jsx
View File

@@ -12,15 +12,25 @@ export default function SideDiscountBanner() {
/>
</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}certificate* with code"
defaultMessage="Get {discountText} your first verified {lineBreak} {certificateMsg}"
description="Message body for edX discount"
values={{
discountText: getDiscountText(),
lineBreak: <br />,
certificateMsg: getCerificateMsg(),
}}
/>
</span>

15
src/base-component/SmallLayout.jsx
View File

@@ -1,10 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import classNames from 'classnames';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import { Hyperlink, Image } from '@edx/paragon';
import { Hyperlink, Image, Toast } from '@edx/paragon';
import PropTypes from 'prop-types';
@@ -17,10 +17,18 @@ 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
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="edx" className="logo" src={getConfig().LOGO_WHITE_URL} />
</Hyperlink>
@@ -51,10 +59,11 @@ const SmallLayout = (props) => {
<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"
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>

5
src/base-component/messages.jsx
View File

@@ -11,6 +11,11 @@ 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',