From 30c6b2376651bd18a664da59db473c8c1f5a0de0 Mon Sep 17 00:00:00 2001
From: Zacharis278 <zhancock@edx.org>
Date: Fri, 28 Jun 2024 09:20:35 -0400
Subject: [PATCH] feat: add upsell bullets back in, required by lock paywall

---
 src/generic/upsell-bullets/UpsellBullets.jsx  | 105 ++++++++++++++++++
 src/generic/upsell-bullets/UpsellBullets.scss |  13 +++
 .../upsell-bullets/UpsellBullets.test.jsx     |  35 ++++++
 3 files changed, 153 insertions(+)
 create mode 100644 src/generic/upsell-bullets/UpsellBullets.jsx
 create mode 100644 src/generic/upsell-bullets/UpsellBullets.scss
 create mode 100644 src/generic/upsell-bullets/UpsellBullets.test.jsx

diff --git a/src/generic/upsell-bullets/UpsellBullets.jsx b/src/generic/upsell-bullets/UpsellBullets.jsx
new file mode 100644
index 00000000..e631ebae
--- /dev/null
+++ b/src/generic/upsell-bullets/UpsellBullets.jsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+const CheckmarkBullet = () => (
+  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+);
+
+// Must be child of a <ul className="fa-ul">
+export const VerifiedCertBullet = () => {
+  const verifiedCertLink = (
+    <a className="inline-link-underline font-weight-bold" rel="noopener noreferrer" target="_blank" href={`${getConfig().MARKETING_SITE_BASE_URL}/verified-certificate`}>
+      <FormattedMessage
+        id="learning.generic.upsell.verifiedCertBullet.verifiedCert"
+        defaultMessage="verified certificate"
+        description="Bolded words 'verified certificate', which is the name of credential the learner receives."
+      />
+    </a>
+  );
+  return (
+    <li className="upsell-bullet">
+      <CheckmarkBullet />
+      <FormattedMessage
+        id="learning.generic.upsell.verifiedCertBullet"
+        defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resumé"
+        description="Bullet showcasing benefit of earned credential."
+        values={{ verifiedCertLink }}
+      />
+    </li>
+  );
+};
+
+// Must be child of a <ul className="fa-ul">
+export const UnlockGradedBullet = () => {
+  const gradedAssignmentsInBoldText = (
+    <span className="font-weight-bold">
+      <FormattedMessage
+        id="learning.generic.upsell.unlockGradedBullet.gradedAssignments"
+        defaultMessage="graded assignments"
+        description="Bolded words 'graded assignments', which are the bolded portion of a bullet point highlighting that course content is unlocked when purchasing an upgrade. Graded assignments are any course content that is graded and are unlocked by upgrading to verified certificates."
+      />
+    </span>
+  );
+  return (
+    <li className="upsell-bullet">
+      <CheckmarkBullet />
+      <FormattedMessage
+        id="learning.generic.upsell.unlockGradedBullet"
+        defaultMessage="Unlock your access to all course activities, including {gradedAssignmentsInBoldText}"
+        description="Bullet showcasing benefit of additional course material."
+        values={{ gradedAssignmentsInBoldText }}
+      />
+    </li>
+  );
+};
+
+// Must be child of a <ul className="fa-ul">
+export const FullAccessBullet = () => {
+  const fullAccessInBoldText = (
+    <span className="font-weight-bold">
+      <FormattedMessage
+        id="learning.generic.upsell.fullAccessBullet.fullAccess"
+        defaultMessage="Full access"
+        description="Bolded phrase 'Full access', which is the bolded portion of a bullet point highlighting that access to course content will not have time limits."
+      />
+    </span>
+  );
+  return (
+    <li className="upsell-bullet">
+      <CheckmarkBullet />
+      <FormattedMessage
+        id="learning.generic.upsell.fullAccessBullet"
+        defaultMessage="{fullAccessInBoldText} to course content and materials, even after the course ends"
+        description="Bullet showcasing upgrade lifts access durations."
+        values={{ fullAccessInBoldText }}
+      />
+    </li>
+  );
+};
+
+// Must be child of a <ul className="fa-ul">
+export const SupportMissionBullet = () => {
+  const missionInBoldText = (
+    <span className="font-weight-bold">
+      <FormattedMessage
+        id="learning.generic.upsell.supportMissionBullet.mission"
+        defaultMessage="mission"
+        description="Bolded word 'mission', which is the bolded portion of a bullet point encouraging the learner to support the goals of the website."
+      />
+    </span>
+  );
+  return (
+    <li className="upsell-bullet">
+      <CheckmarkBullet />
+      <FormattedMessage
+        id="learning.generic.upsell.supportMissionBullet"
+        defaultMessage="Support our {missionInBoldText} at {siteName}"
+        description="Bullet encouraging user to support edX's goals."
+        values={{ missionInBoldText, siteName: getConfig().SITE_NAME }}
+      />
+    </li>
+  );
+};
diff --git a/src/generic/upsell-bullets/UpsellBullets.scss b/src/generic/upsell-bullets/UpsellBullets.scss
new file mode 100644
index 00000000..0cf75905
--- /dev/null
+++ b/src/generic/upsell-bullets/UpsellBullets.scss
@@ -0,0 +1,13 @@
+.upsell-bullet > .fa-li {
+    left: -31px;
+    padding-right: 22px;
+}
+
+.inline-link-underline {
+  text-decoration: underline;
+}
+
+.upsell-bullet a {
+  color: $primary-500;
+}
+
diff --git a/src/generic/upsell-bullets/UpsellBullets.test.jsx b/src/generic/upsell-bullets/UpsellBullets.test.jsx
new file mode 100644
index 00000000..daf74943
--- /dev/null
+++ b/src/generic/upsell-bullets/UpsellBullets.test.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {
+  initializeMockApp,
+  render,
+  screen,
+} from '../../setupTest';
+
+import {
+  VerifiedCertBullet,
+  UnlockGradedBullet,
+  FullAccessBullet,
+  SupportMissionBullet,
+} from './UpsellBullets';
+
+initializeMockApp();
+
+describe('UpsellBullets', () => {
+  const bullets = (
+    <>
+      <VerifiedCertBullet />
+      <UnlockGradedBullet />
+      <FullAccessBullet />
+      <SupportMissionBullet />
+    </>
+  );
+
+  it('upsell bullet text properly rendered', async () => {
+    render(bullets);
+    expect(screen.getByText(/Earn a.*?of completion to showcase on your resumé/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resumé');
+    expect(screen.getByText(/Unlock your access/s).textContent).toMatch('Unlock your access to all course activities, including graded assignments');
+    expect(screen.getByText(/to course content and materials/s).textContent).toMatch('Full access to course content and materials, even after the course ends');
+    expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX');
+  });
+});