diff --git a/src/course-home/data/__factories__/upgradeNotificationData.factory.js b/src/course-home/data/__factories__/upgradeNotificationData.factory.js
index fcb75241..6411f7e2 100644
--- a/src/course-home/data/__factories__/upgradeNotificationData.factory.js
+++ b/src/course-home/data/__factories__/upgradeNotificationData.factory.js
@@ -8,6 +8,7 @@ Factory.define('upgradeNotificationData')
.option('accessExpiration', null)
.option('contentTypeGatingEnabled', false)
.attr('courseId', 'course-v1:edX+DemoX+Demo_Course')
+ .attr('upsellPageName', 'test')
.attr('verifiedMode', ['host'], (host) => ({
access_expiration_date: '2050-01-01T12:00:00',
currency: 'USD',
diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx
index a6183bfb..3b14199e 100644
--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/src/course-home/outline-tab/OutlineTab.jsx
@@ -224,11 +224,12 @@ function OutlineTab({ intl }) {
verifiedMode={verifiedMode}
accessExpiration={accessExpiration}
contentTypeGatingEnabled={datesBannerInfo.contentTypeGatingEnabled}
+ upsellPageName="course_home"
userTimezone={userTimezone}
+ shouldDisplayBorder
timeOffsetMillis={timeOffsetMillis}
courseId={courseId}
org={org}
- shouldDisplayBorder
/>
)}
{intl.formatMessage(messages.noNotificationsMessage)}
} diff --git a/src/generic/upgrade-notification/UpgradeNotification.jsx b/src/generic/upgrade-notification/UpgradeNotification.jsx index c929c90d..935a51f9 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.jsx +++ b/src/generic/upgrade-notification/UpgradeNotification.jsx @@ -265,10 +265,11 @@ function UpgradeNotification({ courseId, offer, org, + shouldDisplayBorder, timeOffsetMillis, + upsellPageName, userTimezone, verifiedMode, - shouldDisplayBorder, }) { const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {}; const correctedTime = new Date(Date.now() + timeOffsetMillis); @@ -305,9 +306,9 @@ function UpgradeNotification({ sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', { ...eventProperties, linkCategory: 'green_upgrade', - linkName: 'course_home_green', + linkName: `${upsellPageName}_green`, linkType: 'button', - pageName: 'course_home', + pageName: upsellPageName, }); }; @@ -427,24 +428,25 @@ UpgradeNotification.propTypes = { percentage: PropTypes.number, code: PropTypes.string, }), + shouldDisplayBorder: PropTypes.bool, timeOffsetMillis: PropTypes.number, + upsellPageName: PropTypes.string.isRequired, userTimezone: PropTypes.string, verifiedMode: PropTypes.shape({ currencySymbol: PropTypes.string.isRequired, price: PropTypes.number.isRequired, upgradeUrl: PropTypes.string.isRequired, }), - shouldDisplayBorder: PropTypes.bool, }; UpgradeNotification.defaultProps = { accessExpiration: null, contentTypeGatingEnabled: false, offer: null, + shouldDisplayBorder: null, timeOffsetMillis: 0, userTimezone: null, verifiedMode: null, - shouldDisplayBorder: null, }; export default injectIntl(UpgradeNotification); diff --git a/src/generic/upgrade-notification/UpgradeNotification.test.jsx b/src/generic/upgrade-notification/UpgradeNotification.test.jsx index e2b1f68a..d00dea67 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.test.jsx +++ b/src/generic/upgrade-notification/UpgradeNotification.test.jsx @@ -1,7 +1,14 @@ import React from 'react'; import { Factory } from 'rosie'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; -import { initializeMockApp, render, screen } from '../../setupTest'; +import { + fireEvent, + initializeMockApp, + render, + screen, + waitFor, +} from '../../setupTest'; import UpgradeNotification from './UpgradeNotification'; initializeMockApp(); @@ -17,6 +24,24 @@ describe('Upgrade Notification', () => { render(