diff --git a/lms/static/sass/features/_course-upgrade-message.scss b/lms/static/sass/features/_course-upgrade-message.scss index 698e2aabfa..4dc85a691c 100644 --- a/lms/static/sass/features/_course-upgrade-message.scss +++ b/lms/static/sass/features/_course-upgrade-message.scss @@ -1,152 +1,39 @@ /* - NOTE: If you make significant changes to the design, remember to update the Segment event properties and change - the creative property. This will allow us to better track individual performance of each style of the message. - Search for the courseware_verified_certificate_upsell promotion ID. - */ +NOTE: If you make significant changes to the design, remember to update the Segment event properties and change +the creative property. This will allow us to better track individual performance of each style of the message. +Search for the courseware_verified_certificate_upsell promotion ID. +*/ -// Expanded upgrade message -.vc-message { - background: $lms-hero-color; - color: $white; - padding: $baseline; - position: relative; - margin: 0 0 $baseline; - - // CSS animation for smooth height transition - -webkit-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - - &::after { - content: ""; - display: table; - clear: both; - } - - // Message copy - .vc-title { - font-size: 1.25rem; - font-weight: $font-weight-light; - margin-bottom: 1rem; - width: calc(100% - 70px); - } - - .vc-selling-points { - @include padding-left(0); - - font-size: 0.825rem; - margin: 1rem 0; - display: table; - - > .vc-selling-point { - list-style: none; - display: table-row; - - &::before { - content: "\2022"; - display: table-cell; - - @include padding-right($baseline/2); - } - - &::after { - content: ""; - display: table-row; - height: 0.25rem; - } - } - } - - // Upgrade button - .btn-upgrade { - color: theme-color("inverse"); - background-color: theme-color("purchase"); - font-size: $font-size-base; - -webkit-transition: $btn-transition; - transition: $btn-transition; - - &:hover { - background-color: theme-color("success"); - } - } - - // Show/hide button - .vc-toggle { - @include right($baseline/2); - - top: $baseline/2; - position: absolute; - color: theme-color("inverse"); - - &:hover { - cursor: pointer; - text-decoration: none; - color: theme-color("light"); - } - } - - // Cert image - .vc-hero { - @include float(right); - @include padding-left(1rem); - - clear: both; - - img { - @include float(right); - - clear: both; - width: 250px; - } - } +.section.section-upgrade { + border-left: solid 1px #d9d9d9; + border-bottom: solid 1px #d9d9d9; + border-right: solid 1px #d9d9d9; + border-top: 5px solid #008100; + padding: 20px; } -// Collapsed upgrade message -.vc-message.polite { - @include padding($baseline/2, 0, $baseline/2, $baseline); - padding-top: $baseline/2; - padding-bottom: $baseline/2; - min-height: 46px; - display: flex; - align-items: center; - - .vc-title { - @include margin-right(auto); - - margin: 0; - flex-grow: 1; - } - - .vc-cta { - flex-grow: 1; - } - - .vc-toggle { - @include right(0); - - margin: 0 $baseline/2; - order: 99; - position: relative; - white-space: nowrap; - width: $baseline*6; - top: 0; - } - - .vc-fade:not(.vc-polite-only) { - display: none; - } - - @include media-breakpoint-down(sm) { - flex-flow: row wrap; - - .vc-title { - width: auto; - margin-bottom: $baseline/2; - } - } +.section.section-upgrade .btn-link { + font-weight: normal; } -@media (max-width: $grid-breakpoints-sm) { - .vc-message .vc-hero { - display: none !important; - } +.section.section-upgrade .btn-upgrade { + background-color: #008100; + border-color: #008100; +} + +.section-upgrade .upgrade-container { + float: right; + text-align: center; +} + +.section.section-upgrade p { + margin: 0.5em 0; +} + +.btn-brand { + color: white !important; +} + +.section.section-upgrade img { + width: 43%; } diff --git a/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html b/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html index b753b1b4c9..24664ad44f 100644 --- a/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html +++ b/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html @@ -29,30 +29,6 @@
-
- -
@@ -110,6 +86,21 @@
+
+

Pursue a verified certificate

+
+

+ + Upgrade $49 + +

+

+
+ +

Important Course Dates

diff --git a/openedx/features/course_experience/static/course_experience/js/CourseHome.js b/openedx/features/course_experience/static/course_experience/js/CourseHome.js index e8c411b8a9..7ee8023cc4 100644 --- a/openedx/features/course_experience/static/course_experience/js/CourseHome.js +++ b/openedx/features/course_experience/static/course_experience/js/CourseHome.js @@ -144,75 +144,17 @@ export class CourseHome { // eslint-disable-line import/prefer-default-export ); } - /** - * Persists the collapsed state of the upgrade message. If the message is collapsed, - * this information is persisted to local storage. Expanding the message *removes* the - * key from local storage. - */ - persistUpgradeMessageState(collapsed) { - if (window.localStorage) { - if (collapsed) { - window.localStorage.setItem(this.msgStateStorageKey, true); - } else { - window.localStorage.removeItem(this.msgStateStorageKey); - } - } - } - configureUpgradeMessage() { - const $vcMessage = $('.vc-message'); - const $vcDismissToggle = $('.vc-toggle', $vcMessage); const logEventProperties = { courseRunKey: this.courseRunKey }; - Logger.log('edx.bi.course.upgrade.hero.displayed', logEventProperties); - - // Get height of container and button - let vcHeight = $vcMessage.outerHeight(); - - // Update based on window - window.onresize = () => { - if (!$vcMessage.hasClass('polite')) { - vcHeight = $vcMessage.outerHeight(); - } - }; - - function collapseMessage(duration = 400) { - $('.vc-fade').fadeOut(duration, () => { - $vcDismissToggle.text(gettext('Show more')).attr('aria-expanded', false); - $('.vc-polite-only').fadeIn(duration); - $vcMessage.height('auto').addClass('polite'); - }); - } - - // Use the previously-persisted state to determine the initial display state of the message. - if (window.localStorage && window.localStorage.getItem(this.msgStateStorageKey)) { - collapseMessage(0); - } - $vcMessage.show(); - - $vcDismissToggle.click(() => { - if ($vcMessage.hasClass('polite')) { - // Expand message - Logger.log('edx.bi.course.upgrade.hero.expanded', logEventProperties); - this.persistUpgradeMessageState(false); - - $('.vc-fade').fadeOut(400); - $vcMessage.animate({ height: vcHeight }, 400, () => { - $vcMessage.height('auto').removeClass('polite'); - $vcDismissToggle.text(gettext('Show less')).attr('aria-expanded', true); - $('.vc-fade').fadeIn(400); - }); - } else { - // Collapse message - Logger.log('edx.bi.course.upgrade.hero.collapsed', logEventProperties); - this.persistUpgradeMessageState(true); - collapseMessage(); - } + Logger.log('edx.bi.course.upgrade.sidebarupsell.displayed', logEventProperties); + $('.section-upgrade .btn-upgrade').click(() => { + Logger.log('edx.bi.course.upgrade.sidebarupsell.clicked', logEventProperties); + Logger.log('edx.course.enrollment.upgrade.clicked', { location: 'sidebar-message' }); }); - - $('.btn-upgrade', $vcMessage).click(() => { - Logger.log('edx.bi.course.upgrade.hero.clicked', logEventProperties); - Logger.log('edx.course.enrollment.upgrade.clicked', { location: 'hero' }); + $('.promo-learn-more').click(() => { + $('.action-toggle-verification-sock').click(); + $('.action-toggle-verification-sock')[0].scrollIntoView({ behavior: 'smooth', alignToTop: true }); }); } } diff --git a/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js b/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js index 45958cc5b9..a7c918769b 100644 --- a/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js +++ b/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js @@ -50,54 +50,21 @@ describe('Course Home factory', () => { describe('Upgrade message events', () => { const segmentEventProperties = { promotion_id: 'courseware_verified_certificate_upsell', - creative: 'original_hero', + creative: 'sidebarupsell', name: 'In-Course Verification Prompt', - position: 'hero', + position: 'sidebar-message', }; it('should send events to Segment and edX on initial load', () => { expect(window.analytics.track).toHaveBeenCalledWith('Promotion Viewed', segmentEventProperties); - expect(Logger.log).toHaveBeenCalledWith('edx.bi.course.upgrade.hero.displayed', { courseRunKey: runKey }); + expect(Logger.log).toHaveBeenCalledWith('edx.bi.course.upgrade.sidebarupsell.displayed', { courseRunKey: runKey }); }); it('should send events to Segment and edX after clicking the upgrade button ', () => { - $('.vc-message .btn-upgrade').click(); + $('.section-upgrade .btn-upgrade').click(); expect(window.analytics.track).toHaveBeenCalledWith('Promotion Viewed', segmentEventProperties); - expect(Logger.log).toHaveBeenCalledWith('edx.bi.course.upgrade.hero.clicked', { courseRunKey: runKey }); - expect(Logger.log).toHaveBeenCalledWith('edx.course.enrollment.upgrade.clicked', { location: 'hero' }); - }); - }); - - describe('upgrade message display toggle', () => { - let $message; - let $toggle; - - beforeEach(() => { - $.fx.off = true; - - $message = $('.vc-message'); - $toggle = $('.vc-toggle', $message); - expect($message.length).toEqual(1); - expect($toggle.length).toEqual(1); - }); - - it('hides/shows the message and writes/removes a key from local storage', () => { - // NOTE (CCB): Ideally this should be two tests--one for collapse, another for expansion. - // After a couple hours I have been unable to make these two tests pass, probably due to - // issues with the initial state of local storage. - expect($message.is(':visible')).toBeTruthy(); - expect($message.hasClass('polite')).toBeFalsy(); - expect($toggle.text().trim()).toEqual('Show less'); - - $toggle.click(); - expect($message.hasClass('polite')).toBeTruthy(); - expect($toggle.text().trim()).toEqual('Show more'); - expect(window.localStorage.getItem(home.msgStateStorageKey)).toEqual('true'); - - $toggle.click(); - expect($message.hasClass('polite')).toBeFalsy(); - expect($toggle.text().trim()).toEqual('Show less'); - expect(window.localStorage.getItem(home.msgStateStorageKey)).toBeNull(); + expect(Logger.log).toHaveBeenCalledWith('edx.bi.course.upgrade.sidebarupsell.clicked', { courseRunKey: runKey }); + expect(Logger.log).toHaveBeenCalledWith('edx.course.enrollment.upgrade.clicked', { location: 'sidebar-message' }); }); }); }); diff --git a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html index 3a87bca28e..dc7f460b9f 100644 --- a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html +++ b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html @@ -58,40 +58,6 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
- - % if upgrade_url and upgrade_price: -
- -
- % endif - % if course_home_message_fragment: ${HTML(course_home_message_fragment.body_html())} % endif @@ -147,6 +113,23 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
% endif + % if upgrade_url and upgrade_price: +
+

${_("Pursue a verified certificate")}

+
+

+ + ${_("Upgrade ({price})").format(price=upgrade_price)} + +

+

+
+ +
+ % endif % if dates_fragment:
${HTML(dates_fragment.body_html())} diff --git a/openedx/features/course_experience/tests/views/test_course_home.py b/openedx/features/course_experience/tests/views/test_course_home.py index 4fea646283..6bced59fbc 100644 --- a/openedx/features/course_experience/tests/views/test_course_home.py +++ b/openedx/features/course_experience/tests/views/test_course_home.py @@ -512,15 +512,15 @@ class CourseHomeFragmentViewTests(ModuleStoreTestCase): def assert_upgrade_message_not_displayed(self): response = self.client.get(self.url) - self.assertNotIn('vc-message', response.content) + self.assertNotIn('section-upgrade', response.content) def assert_upgrade_message_displayed(self): response = self.client.get(self.url) - self.assertIn('vc-message', response.content) + self.assertIn('section-upgrade', response.content) url = EcommerceService().get_checkout_page_url(self.verified_mode.sku) - self.assertIn(''.format(price=self.verified_mode.min_price), response.content) + self.assertIn('Upgrade (${price})'.format(price=self.verified_mode.min_price), response.content) def test_no_upgrade_message_if_logged_out(self): self.client.logout()