diff --git a/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx b/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx index 849ff425..3ea40b12 100644 --- a/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx +++ b/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx @@ -1,10 +1,8 @@ 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 { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { Alert } from '@edx/paragon'; import { Locked } from '@edx/paragon/icons'; import messages from './messages'; @@ -12,6 +10,12 @@ 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, @@ -56,32 +60,6 @@ function LockPaywall({ }); }; - const verifiedCertLink = ( - - {intl.formatMessage(messages['learn.lockPaywall.list.bullet1.linktext'])} - - ); - - const gradedAssignments = ( - - {intl.formatMessage(messages['learn.lockPaywall.list.bullet2.boldtext'])} - - ); - const fullAccess = ( - - {intl.formatMessage(messages['learn.lockPaywall.list.bullet3.boldtext'])} - - ); - const nonProfitMission = ( - - {intl.formatMessage(messages['learn.lockPaywall.list.bullet4.boldtext'])} - - ); - return (
@@ -109,39 +87,10 @@ function LockPaywall({ {intl.formatMessage(messages['learn.lockPaywall.list.intro'])}
diff --git a/src/courseware/course/sequence/lock-paywall/LockPaywall.scss b/src/courseware/course/sequence/lock-paywall/LockPaywall.scss index 9af9fc3f..9638c666 100644 --- a/src/courseware/course/sequence/lock-paywall/LockPaywall.scss +++ b/src/courseware/course/sequence/lock-paywall/LockPaywall.scss @@ -6,14 +6,8 @@ color: $primary-700; } -.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%; +@media only screen and (min-width: 992px) and (max-width: 1100px) { + .list-div { + width: 62%; } } diff --git a/src/courseware/course/sequence/lock-paywall/messages.js b/src/courseware/course/sequence/lock-paywall/messages.js index 0d39ec40..964d33a8 100644 --- a/src/courseware/course/sequence/lock-paywall/messages.js +++ b/src/courseware/course/sequence/lock-paywall/messages.js @@ -21,26 +21,6 @@ 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; diff --git a/src/generic/upgrade-notification/UpgradeNotification.jsx b/src/generic/upgrade-notification/UpgradeNotification.jsx index deb28bd2..32edac56 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.jsx +++ b/src/generic/upgrade-notification/UpgradeNotification.jsx @@ -1,123 +1,33 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { faCheck } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics'; import { FormattedDate, FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n'; -import { getConfig } from '@edx/frontend-platform'; import { setLocalStorage } from '../../data/localStorage'; - import { UpgradeButton } from '../upgrade-button'; +import { + VerifiedCertBullet, + UnlockGradedBullet, + FullAccessBullet, + SupportMissionBullet, +} from '../upsell-bullets/UpsellBullets'; function UpsellNoFBECardContent() { - const verifiedCertLink = ( - - - - ); - return ( ); } function UpsellFBEFarAwayCardContent() { - const verifiedCertLink = ( - - - - ); - - const gradedAssignments = ( - - - - ); - - const fullAccess = ( - - - - ); - - const nonProfitMission = ( - - - - ); - return ( ); } diff --git a/src/generic/upgrade-notification/UpgradeNotification.scss b/src/generic/upgrade-notification/UpgradeNotification.scss index eb8f41f3..bcd33f36 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.scss +++ b/src/generic/upgrade-notification/UpgradeNotification.scss @@ -19,16 +19,11 @@ } .upgrade-notification-ul { - padding-left: 1.25rem !important; + padding-left: 1.25rem; padding-top: 0.875rem; padding-right: 1.25rem; } -.upgrade-notification-li { - left: -2.125rem; - top: 0 !important; -} - .upgrade-notification-text { padding: 0.875rem 1.25rem 0 1.25rem; } @@ -43,11 +38,3 @@ padding-top: .75rem; padding-bottom: .75rem; } - -.inline-link-underline { - text-decoration: underline; -} - -.upgrade-notification .upgrade-notification-message a { - color: $primary-500; -} \ No newline at end of file diff --git a/src/generic/upgrade-notification/UpgradeNotification.test.jsx b/src/generic/upgrade-notification/UpgradeNotification.test.jsx index 11edac2c..b4510a2e 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.test.jsx +++ b/src/generic/upgrade-notification/UpgradeNotification.test.jsx @@ -51,7 +51,7 @@ describe('Upgrade Notification', () => { buildAndRender(); expect(screen.getByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument(); 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(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX'); expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument(); }); @@ -65,7 +65,7 @@ describe('Upgrade Notification', () => { }); expect(screen.getByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument(); 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(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX'); expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument(); }); @@ -75,7 +75,7 @@ describe('Upgrade Notification', () => { }); expect(screen.getByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument(); 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(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX'); expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument(); }); @@ -94,7 +94,7 @@ describe('Upgrade Notification', () => { }); expect(screen.getByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument(); 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(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX'); expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)'); expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout'); }); @@ -161,7 +161,7 @@ describe('Upgrade Notification', () => { 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 non-profit mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX'); expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument(); }); @@ -189,7 +189,7 @@ describe('Upgrade Notification', () => { 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 non-profit mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX'); expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)'); expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout'); }); @@ -218,7 +218,7 @@ describe('Upgrade Notification', () => { 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 non-profit mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX'); expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)'); expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout'); }); @@ -247,7 +247,7 @@ describe('Upgrade Notification', () => { 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 non-profit mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX'); expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)'); expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout'); }); diff --git a/src/generic/upsell-bullets/UpsellBullets.jsx b/src/generic/upsell-bullets/UpsellBullets.jsx new file mode 100644 index 00000000..876a7cf8 --- /dev/null +++ b/src/generic/upsell-bullets/UpsellBullets.jsx @@ -0,0 +1,107 @@ +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'; + +function CheckmarkBullet() { + return ( + + ); +} + +// Must be child of a