-
Notifications
You must be signed in to change notification settings - Fork 203
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add upsell bullets back in, required by lock paywall
- Loading branch information
1 parent
db114cb
commit 71d23af
Showing
3 changed files
with
153 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
}); | ||
}); |