From 8917b88a5a763aea34179d398ae2b07ab80d949f Mon Sep 17 00:00:00 2001
From: Attiya Ishaque <atiya.ishaq@arbisoft.com>
Date: Tue, 7 Sep 2021 17:21:37 +0500
Subject: [PATCH] fix: design issue in discount experiment (#428)

---
 src/_style.scss                           | 17 +++++++++++-
 src/base-component/DiscountBanner.jsx     | 32 +++++++++++++++++------
 src/base-component/LargeLeftLayout.jsx    | 22 +++++++++++-----
 src/base-component/MediumLayout.jsx       | 14 +++++++---
 src/base-component/SideDiscountBanner.jsx | 12 ++++++++-
 src/base-component/SmallLayout.jsx        | 15 ++++++++---
 src/base-component/messages.jsx           |  5 ++++
 7 files changed, 95 insertions(+), 22 deletions(-)

diff --git a/src/_style.scss b/src/_style.scss
index 2f711e43..173a6947 100644
--- a/src/_style.scss
+++ b/src/_style.scss
@@ -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) {
diff --git a/src/base-component/DiscountBanner.jsx b/src/base-component/DiscountBanner.jsx
index ddbba816..067a5dcd 100644
--- a/src/base-component/DiscountBanner.jsx
+++ b/src/base-component/DiscountBanner.jsx
@@ -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);
diff --git a/src/base-component/LargeLeftLayout.jsx b/src/base-component/LargeLeftLayout.jsx
index 48b57a9d..873cabe4 100644
--- a/src/base-component/LargeLeftLayout.jsx
+++ b/src/base-component/LargeLeftLayout.jsx
@@ -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>
diff --git a/src/base-component/MediumLayout.jsx b/src/base-component/MediumLayout.jsx
index d3f1577f..e653159b 100644
--- a/src/base-component/MediumLayout.jsx
+++ b/src/base-component/MediumLayout.jsx
@@ -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>
diff --git a/src/base-component/SideDiscountBanner.jsx b/src/base-component/SideDiscountBanner.jsx
index 2270190e..2702d880 100644
--- a/src/base-component/SideDiscountBanner.jsx
+++ b/src/base-component/SideDiscountBanner.jsx
@@ -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>
diff --git a/src/base-component/SmallLayout.jsx b/src/base-component/SmallLayout.jsx
index a2097a77..9f677291 100644
--- a/src/base-component/SmallLayout.jsx
+++ b/src/base-component/SmallLayout.jsx
@@ -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>
diff --git a/src/base-component/messages.jsx b/src/base-component/messages.jsx
index 96d61392..13191f8a 100644
--- a/src/base-component/messages.jsx
+++ b/src/base-component/messages.jsx
@@ -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',