diff --git a/src/course-home/data/__factories__/index.js b/src/course-home/data/__factories__/index.js index e8ebf460..e421d00c 100644 --- a/src/course-home/data/__factories__/index.js +++ b/src/course-home/data/__factories__/index.js @@ -2,4 +2,4 @@ import './courseHomeMetadata.factory'; import './datesTabData.factory'; import './outlineTabData.factory'; import './progressTabData.factory'; -import './upgradeCardData.factory'; +import './upgradeNotificationData.factory'; diff --git a/src/course-home/data/__factories__/upgradeCardData.factory.js b/src/course-home/data/__factories__/upgradeNotificationData.factory.js similarity index 93% rename from src/course-home/data/__factories__/upgradeCardData.factory.js rename to src/course-home/data/__factories__/upgradeNotificationData.factory.js index fcabc3d4..fcb75241 100644 --- a/src/course-home/data/__factories__/upgradeCardData.factory.js +++ b/src/course-home/data/__factories__/upgradeNotificationData.factory.js @@ -1,6 +1,6 @@ import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies -Factory.define('upgradeCardData') +Factory.define('upgradeNotificationData') .option('host', 'http://localhost:18000') .option('dateBlocks', []) .option('offer', null) diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx index fae369f3..43ef5bec 100644 --- a/src/course-home/outline-tab/OutlineTab.jsx +++ b/src/course-home/outline-tab/OutlineTab.jsx @@ -16,7 +16,7 @@ import genericMessages from '../../generic/messages'; import messages from './messages'; import Section from './Section'; import UpdateGoalSelector from './widgets/UpdateGoalSelector'; -import UpgradeCard from './widgets/UpgradeCard'; +import UpgradeNotification from '../../generic/upgrade-notification/UpgradeNotification'; import { useAccessExpirationAlertMasquerade } from '../../alerts/access-expiration-alert'; import useCertificateAvailableAlert from './alerts/certificate-status-alert'; import useCourseEndAlert from './alerts/course-end-alert'; @@ -219,7 +219,7 @@ function OutlineTab({ intl }) { { MMP2P.state.isEnabled ? : ( -
{verifiedMode ? ( - { it('renders upgrade card', async () => { await fetchAndRender(); - const upgradeCard = document.querySelector('.upgrade-card'); + const UpgradeNotification = document.querySelector('.upgrade-notification'); - expect(upgradeCard).toBeInTheDocument(); + expect(UpgradeNotification).toBeInTheDocument(); expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument(); expect(screen.queryByText('You have no new notifications at this time.')).not.toBeInTheDocument(); }); diff --git a/src/generic/upgrade-card/UpgradeCard.jsx b/src/generic/upgrade-notification/UpgradeNotification.jsx similarity index 78% rename from src/generic/upgrade-card/UpgradeCard.jsx rename to src/generic/upgrade-notification/UpgradeNotification.jsx index 5fe848f0..2123df57 100644 --- a/src/generic/upgrade-card/UpgradeCard.jsx +++ b/src/generic/upgrade-notification/UpgradeNotification.jsx @@ -14,26 +14,26 @@ function UpsellNoFBECardContent() { const verifiedCertLink = ( ); return ( -
    +
    • - +
    • - + @@ -59,7 +59,7 @@ function UpsellFBEFarAwayCardContent() { const gradedAssignments = ( @@ -68,7 +68,7 @@ function UpsellFBEFarAwayCardContent() { const fullAccess = ( @@ -77,42 +77,42 @@ function UpsellFBEFarAwayCardContent() { const nonProfitMission = ( ); return ( -
        +
        • - +
        • - +
        • - +
        • - + @@ -125,7 +125,7 @@ function UpsellFBESoonCardContent({ accessExpirationDate, timezoneFormatArgs }) const includingAnyProgress = ( @@ -144,17 +144,17 @@ function UpsellFBESoonCardContent({ accessExpirationDate, timezoneFormatArgs }) const benefitsOfUpgrading = ( ); return ( -
          +

          @@ -190,7 +190,7 @@ function ExpirationCountdown({ hoursToExpiration }) { if (hoursToExpiration >= 24) { expirationText = ( = 1) { expirationText = ( ); @@ -230,7 +230,7 @@ function AccessExpirationDateBanner({ accessExpirationDate, timezoneFormatArgs } return (

          {offer.code}), @@ -344,9 +344,9 @@ function UpgradeCard({ if (hoursToAccessExpiration >= (7 * 24)) { if (offer) { // countdown to the first purchase discount if there is one const hoursToDiscountExpiration = Math.floor((new Date(offer.expirationDate) - correctedTime) / 1000 / 60 / 60); - upgradeCardHeaderText = ( + upgradeNotificationHeaderText = ( ; } else { - upgradeCardHeaderText = ( + upgradeNotificationHeaderText = ( ); @@ -370,9 +370,9 @@ function UpgradeCard({ } upsellMessage = ; } else { // more urgent messaging if there's less than 7 days left to access expiration - upgradeCardHeaderText = ( + upgradeNotificationHeaderText = ( ); @@ -385,9 +385,9 @@ function UpgradeCard({ ); } } else { // FBE is turned off - upgradeCardHeaderText = ( + upgradeNotificationHeaderText = ( ); @@ -395,26 +395,26 @@ function UpgradeCard({ } return ( -
          -

          - {upgradeCardHeaderText} +
          +

          + {upgradeNotificationHeaderText}

          {expirationBanner} -
          +
          {upsellMessage}
          {offerCode}
          ); } -UpgradeCard.propTypes = { +UpgradeNotification.propTypes = { courseId: PropTypes.string.isRequired, org: PropTypes.string.isRequired, accessExpiration: PropTypes.shape({ @@ -436,7 +436,7 @@ UpgradeCard.propTypes = { shouldDisplayBorder: PropTypes.bool, }; -UpgradeCard.defaultProps = { +UpgradeNotification.defaultProps = { accessExpiration: null, contentTypeGatingEnabled: false, offer: null, @@ -446,4 +446,4 @@ UpgradeCard.defaultProps = { shouldDisplayBorder: null, }; -export default injectIntl(UpgradeCard); +export default injectIntl(UpgradeNotification); diff --git a/src/generic/upgrade-card/UpgradeCard.scss b/src/generic/upgrade-notification/UpgradeNotification.scss similarity index 74% rename from src/generic/upgrade-card/UpgradeCard.scss rename to src/generic/upgrade-notification/UpgradeNotification.scss index bbb56139..e94a1be6 100644 --- a/src/generic/upgrade-card/UpgradeCard.scss +++ b/src/generic/upgrade-notification/UpgradeNotification.scss @@ -1,8 +1,8 @@ -.upgrade-card { +.upgrade-notification { border-radius: 0 !important; } -.upgrade-card-header { +.upgrade-notification-header { margin: 1.25rem; } @@ -18,22 +18,22 @@ padding: 0.5rem 1.25rem; } -.upgrade-card-ul { +.upgrade-notification-ul { margin-left: 3rem; padding-top: 0.875rem; padding-right: 1.25rem; } -.upgrade-card-li { +.upgrade-notification-li { left: -2.125rem; top: 0 !important; } -.upgrade-card-text { +.upgrade-notification-text { padding: 0.875rem 1.25rem 0 1.25rem; } -.upgrade-card-button { +.upgrade-notification-button { width: 90%; margin: 0 auto; margin-bottom: 1.25rem; @@ -49,6 +49,6 @@ text-decoration: underline; } -.upgrade-card .upgrade-card-message a { +.upgrade-notification .upgrade-notification-message a { color: $primary-500; } \ No newline at end of file diff --git a/src/generic/upgrade-card/UpgradeCard.test.jsx b/src/generic/upgrade-notification/UpgradeNotification.test.jsx similarity index 98% rename from src/generic/upgrade-card/UpgradeCard.test.jsx rename to src/generic/upgrade-notification/UpgradeNotification.test.jsx index 370bf785..4f827362 100644 --- a/src/generic/upgrade-card/UpgradeCard.test.jsx +++ b/src/generic/upgrade-notification/UpgradeNotification.test.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { Factory } from 'rosie'; import { initializeMockApp, render, screen } from '../../setupTest'; -import UpgradeCard from './UpgradeCard'; +import UpgradeNotification from './UpgradeNotification'; initializeMockApp(); jest.mock('@edx/frontend-platform/analytics'); @@ -11,10 +11,10 @@ jest .spyOn(global.Date, 'now') .mockImplementation(() => dateNow.valueOf()); -describe('Upgrade Card', () => { +describe('Upgrade Notification', () => { function buildAndRender(attributes) { - const upgradeCardData = Factory.build('upgradeCardData', { ...attributes }); - render(); + const upgradeNotificationData = Factory.build('upgradeNotificationData', { ...attributes }); + render(); } it('does not render when there is no verified mode', async () => { diff --git a/src/index.scss b/src/index.scss index 6de59277..fcbf0c8c 100755 --- a/src/index.scss +++ b/src/index.scss @@ -380,7 +380,7 @@ @import 'courseware/course/content-tools/contentTools.scss'; @import 'course-home/dates-tab/Badge.scss'; @import 'course-home/dates-tab/Day.scss'; -@import 'generic/upgrade-card/UpgradeCard.scss'; +@import 'generic/upgrade-notification/UpgradeNotification.scss'; @import 'course-home/outline-tab/widgets/ProctoringInfoPanel.scss'; @import 'course-home/progress-tab/course-completion/CompletionDonutChart.scss'; @import 'course-home/progress-tab/grades/course-grade/GradeBar.scss';