[REV-2127] feat: update gated content lock screen to Value Prop designs (#394)

src/courseware/course/sequence/lock-paywall/LockPaywall.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLock } from '@fortawesome/free-solid-svg-icons';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Alert, Button, Icon,
+} from '@edx/paragon';
+import { Locked } from '@edx/paragon/icons';
 import messages from './messages';
-import VerifiedCert from '../../../../generic/assets/edX_certificate.png';
+import certificateLocked from '../../../../generic/assets/edX_locked_certificate.png';
 import { useModel } from '../../../../generic/model-store';
+import './LockPaywall.scss';
 
 function LockPaywall({
   intl,
@@ -42,33 +46,128 @@ function LockPaywall({
       pageName: 'in_course',
     });
   };
+
+  const lockIcon = (
+    <Icon
+      className="float-left"
+      src={Locked}
+      aria-hidden="true"
+    />
+  );
+
+  const verifiedCertLink = (
+    <Alert.Link
+      href="https://www.edx.org/verified-certificate"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {intl.formatMessage(messages['learn.lockPaywall.list.bullet1.linktext'])}
+    </Alert.Link>
+  );
+
+  const gradedAssignments = (
+    <span className="font-weight-bold">
+      {intl.formatMessage(messages['learn.lockPaywall.list.bullet2.boldtext'])}
+    </span>
+  );
+  const fullAccess = (
+    <span className="font-weight-bold">
+      {intl.formatMessage(messages['learn.lockPaywall.list.bullet3.boldtext'])}
+    </span>
+  );
+  const nonProfit = (
+    <span className="font-weight-bold">
+      {intl.formatMessage(messages['learn.lockPaywall.list.bullet4.boldtext'])}
+    </span>
+  );
+
   return (
-    <div className="border border-gray rounded d-flex justify-content-between mt-2 p-3">
-      <div>
-        <h4 className="font-weight-bold mb-2">
-          <FontAwesomeIcon icon={faLock} className="text-black mr-2 ml-1" style={{ fontSize: '2rem' }} />
-          <span>{intl.formatMessage(messages['learn.lockPaywall.title'])}</span>
-        </h4>
-        <p className="mb-0">
-          <span>{intl.formatMessage(messages['learn.lockPaywall.content'])}</span>
-          &nbsp;
-          <a className="lock_paywall_upgrade_link" href={upgradeUrl} onClick={logClick}>
+    <Alert variant="light" aria-live="off">
+      <div className="row">
+        <div className="col-auto px-0">
+          {lockIcon}
+        </div>
+
+        <div className="col">
+          <h4 aria-level="3">
+            <span>{intl.formatMessage(messages['learn.lockPaywall.title'])}</span>
+          </h4>
+
+          <div className="mb-2 upgrade-intro">
+            {intl.formatMessage(messages['learn.lockPaywall.content'])}
+          </div>
+
+          <div className="d-flex flex-row flex-wrap">
+            <div style={{ float: 'left' }} className="mr-3 mb-2">
+              <img
+                alt={intl.formatMessage(messages['learn.lockPaywall.example.alt'])}
+                src={certificateLocked}
+                className="border-0 certificate-image-banner"
+                style={{ height: '128px', width: '175px' }}
+              />
+            </div>
+
+            <div className="mw-xs list-div">
+              <div className="mb-2">
+                {intl.formatMessage(messages['learn.lockPaywall.list.intro'])}
+              </div>
+              <ul className="fa-ul ml-4 pl-2">
+                <li>
+                  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+                  <FormattedMessage
+                    id="gatedContent.paragraph.bulletOne"
+                    defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
+                    values={{ verifiedCertLink }}
+                    className="bullet-text"
+                  />
+                </li>
+                <li>
+                  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+                  <FormattedMessage
+                    id="gatedContent.paragraph.bulletTwo"
+                    defaultMessage="Unlock access to all course activities, including {gradedAssignments}"
+                    values={{ gradedAssignments }}
+                  />
+                </li>
+                <li>
+                  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+                  <FormattedMessage
+                    id="gatedContent.paragraph.bulletThree"
+                    defaultMessage="{fullAccess} to course content and materials, even after the course ends"
+                    values={{ fullAccess }}
+                  />
+                </li>
+                <li>
+                  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+                  <FormattedMessage
+                    id="gatedContent.paragraph.bulletFour"
+                    defaultMessage="Support our {nonProfit} mission at edX"
+                    values={{ nonProfit }}
+                  />
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="col-md-auto p-md-0 d-md-flex align-items-md-center mr-md-3"
+          style={{ textAlign: 'right' }}
+        >
+          <Button
+            className="lock_paywall_upgrade_link"
+            href={upgradeUrl}
+            onClick={logClick}
+            role="link"
+          >
             {intl.formatMessage(messages['learn.lockPaywall.upgrade.link'], {
               currencySymbol,
               price,
             })}
-          </a>
-        </p>
+          </Button>
+        </div>
       </div>
-      <div>
-        <img
-          alt={intl.formatMessage(messages['learn.lockPaywall.example.alt'])}
-          src={VerifiedCert}
-          className="border-0"
-          style={{ height: '70px' }}
-        />
-      </div>
-    </div>
+    </Alert>
   );
 }
 LockPaywall.propTypes = {

src/courseware/course/sequence/lock-paywall/LockPaywall.scss

@@ -0,0 +1,12 @@
+
+// Temporary CSS intervention until paragon list items will support icons (PAR-429)
+.fa-li {
+    left: -31px !important;
+    padding-right: 22px;
+}
+
+    @media only screen and (min-width: 992px) and (max-width: 1100px) {
+        .list-div {
+            width: 62%;
+    }
+}