Revert "refactor: create generic bullets to reuse in all upsell messaging (#689)" (#696)

This reverts commit 8735f219e9.

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+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 } from '@edx/paragon';
 import { Locked } from '@edx/paragon/icons';
 import messages from './messages';
@@ -10,12 +12,6 @@ import certificateLocked from '../../../../generic/assets/edX_locked_certificate
 import { useModel } from '../../../../generic/model-store';
 import useWindowSize, { responsiveBreakpoints } from '../../../../generic/tabs/useWindowSize';
 import { UpgradeButton } from '../../../../generic/upgrade-button';
-import {
-  VerifiedCertBullet,
-  UnlockGradedBullet,
-  FullAccessBullet,
-  SupportMissionBullet,
-} from '../../../../generic/upsell-bullets/UpsellBullets';
 
 function LockPaywall({
   intl,
@@ -60,6 +56,32 @@ function LockPaywall({
     });
   };
 
+  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 nonProfitMission = (
+    <span className="font-weight-bold">
+      {intl.formatMessage(messages['learn.lockPaywall.list.bullet4.boldtext'])}
+    </span>
+  );
+
   return (
     <Alert variant="light" aria-live="off" icon={Locked} className="lock-paywall-container">
       <div className="row">
@@ -87,10 +109,39 @@ function LockPaywall({
                 {intl.formatMessage(messages['learn.lockPaywall.list.intro'])}
               </div>
               <ul className="fa-ul ml-4 pl-2">
-                <VerifiedCertBullet />
-                <UnlockGradedBullet />
-                <FullAccessBullet />
-                <SupportMissionBullet />
+                <li>
+                  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+                  <FormattedMessage
+                    id="gatedContent.paragraph.bulletOne"
+                    defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resumé"
+                    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 {nonProfitMission} at edX"
+                    values={{ nonProfitMission }}
+                  />
+                </li>
               </ul>
             </div>
           </div>

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

@@ -6,8 +6,14 @@
     color: $primary-700;
 }
 
-@media only screen and (min-width: 992px) and (max-width: 1100px) {
-    .list-div {
-        width: 62%;
+.fa-li {
+    left: -31px !important;
+    padding-right: 22px;
+    top: 0;
+}
+
+    @media only screen and (min-width: 992px) and (max-width: 1100px) {
+        .list-div {
+            width: 62%;
     }
 }

src/courseware/course/sequence/lock-paywall/messages.js

@@ -21,6 +21,26 @@ const messages = defineMessages({
     defaultMessage: 'When you upgrade, you:',
     description: 'Text displayed to introduce the list of benefits from upgrading.',
   },
+  'learn.lockPaywall.list.bullet1.linktext': {
+    id: 'learn.lockPaywall.list.bullet1.linktext',
+    defaultMessage: 'verified certificate',
+    description: 'Link text for verified certificate info page.',
+  },
+  'learn.lockPaywall.list.bullet2.boldtext': {
+    id: 'learn.lockPaywall.list.bullet2.boldtext',
+    defaultMessage: 'graded assignments',
+    description: 'Bolded text for graded assignments.',
+  },
+  'learn.lockPaywall.list.bullet3.boldtext': {
+    id: 'learn.lockPaywall.list.bullet3.boldtext',
+    defaultMessage: 'Full access',
+    description: 'Bolded text for full access.',
+  },
+  'learn.lockPaywall.list.bullet4.boldtext': {
+    id: 'learn.lockPaywall.list.bullet4.boldtext',
+    defaultMessage: 'non-profit mission',
+    description: 'Bolded text to highlight our non-profit status.',
+  },
 });
 
 export default messages;