diff --git a/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx b/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx index 3ea40b12..849ff425 100644 --- a/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx +++ b/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 = ( + + {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 (
@@ -87,10 +109,39 @@ 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 9638c666..9af9fc3f 100644 --- a/src/courseware/course/sequence/lock-paywall/LockPaywall.scss +++ b/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%; } } diff --git a/src/courseware/course/sequence/lock-paywall/messages.js b/src/courseware/course/sequence/lock-paywall/messages.js index 964d33a8..0d39ec40 100644 --- a/src/courseware/course/sequence/lock-paywall/messages.js +++ b/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; diff --git a/src/generic/upgrade-notification/UpgradeNotification.jsx b/src/generic/upgrade-notification/UpgradeNotification.jsx index 32edac56..deb28bd2 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.jsx +++ b/src/generic/upgrade-notification/UpgradeNotification.jsx @@ -1,33 +1,123 @@ 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 bcd33f36..eb8f41f3 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.scss +++ b/src/generic/upgrade-notification/UpgradeNotification.scss @@ -19,11 +19,16 @@ } .upgrade-notification-ul { - padding-left: 1.25rem; + padding-left: 1.25rem !important; 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; } @@ -38,3 +43,11 @@ 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 b4510a2e..11edac2c 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 mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit 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 mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit 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 mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit 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 mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit 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 mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit 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 mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit 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 mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit 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 mission at edX'); + expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit 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 deleted file mode 100644 index 876a7cf8..00000000 --- a/src/generic/upsell-bullets/UpsellBullets.jsx +++ /dev/null @@ -1,107 +0,0 @@ -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