Rename UpgradeCard to UpgradeNotification

2021-06-28 18:10:42 -04:00
parent 1a5c6a8319
commit ae842b8c24
9 changed files with 68 additions and 68 deletions
--- 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';
--- a/src/course-home/data/factories/upgradeNotificationData.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)
--- 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
              ? <MMP2PFlyover isStatic options={MMP2P} />
              : (
-                <UpgradeCard
+                <UpgradeNotification
                  offer={offer}
                  verifiedMode={verifiedMode}
                  accessExpiration={accessExpiration}
--- a/src/courseware/course/NotificationTray.jsx
+++ b/src/courseware/course/NotificationTray.jsx
@@ -9,7 +9,7 @@ import { ArrowBackIos, Close } from '@edx/paragon/icons';
 import messages from './messages';
 import { useModel } from '../../generic/model-store';
 import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWindowSize';
-import UpgradeCard from '../../generic/upgrade-card/UpgradeCard';
+import UpgradeNotification from '../../generic/upgrade-notification/UpgradeNotification';

 function NotificationTray({
  intl, toggleNotificationTray,
@@ -49,7 +49,7 @@ function NotificationTray({
      <div className="notification-tray-divider" />
      <div>{verifiedMode
        ? (
-          <UpgradeCard
+          <UpgradeNotification
            offer={offer}
            verifiedMode={verifiedMode}
            accessExpiration={accessExpiration}
--- a/src/courseware/course/NotificationTray.test.jsx
+++ b/src/courseware/course/NotificationTray.test.jsx
@@ -56,9 +56,9 @@ describe('NotificationTray', () => {

  it('renders upgrade card', async () => {
    await fetchAndRender(<NotificationTray />);
-    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();
  });
--- a/src/generic/upgrade-notification/UpgradeNotification.jsx
+++ b/src/generic/upgrade-notification/UpgradeNotification.jsx
@@ -14,26 +14,26 @@ function UpsellNoFBECardContent() {
  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.outline.widgets.upgradeCard.verifiedCertLink"
+        id="learning.generic.upgradeNotification.verifiedCertLink"
        defaultMessage="verified certificate"
      />
    </a>
  );

  return (
-    <ul className="fa-ul upgrade-card-ul pt-0">
+    <ul className="fa-ul upgrade-notification-ul pt-0">
      <li>
-        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <span className="fa-li upgrade-notification-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
-          id="learning.outline.widgets.upgradeCard.verifiedCertMessage"
+          id="learning.generic.upgradeNotification.verifiedCertMessage"
          defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
          values={{ verifiedCertLink }}
        />
      </li>
      <li>
-        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <span className="fa-li upgrade-notification-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
-          id="learning.outline.widgets.upgradeCard.nonProfitMission"
+          id="learning.generic.upgradeNotification.noFBE.nonProfitMission"
          defaultMessage="Support our {nonProfitMission} at edX"
          values={{
            nonProfitMission: (
@@ -50,7 +50,7 @@ function UpsellFBEFarAwayCardContent() {
  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.outline.widgets.upgradeCard.verifiedCertLink"
+        id="learning.generic.upgradeNotification.verifiedCertLink"
        defaultMessage="verified certificate"
      />
    </a>
@@ -59,7 +59,7 @@ function UpsellFBEFarAwayCardContent() {
  const gradedAssignments = (
    <span className="font-weight-bold">
      <FormattedMessage
-        id="learning.outline.widgets.upgradeCard.gradedAssignments"
+        id="learning.generic.upgradeNotification.gradedAssignments"
        defaultMessage="graded assignments"
      />
    </span>
@@ -68,7 +68,7 @@ function UpsellFBEFarAwayCardContent() {
  const fullAccess = (
    <span className="font-weight-bold">
      <FormattedMessage
-        id="learning.upgradeCard.verifiedCertLink"
+        id="learning.generic.upgradeNotification.verifiedCertLink.fullAccess"
        defaultMessage="Full access"
      />
    </span>
@@ -77,42 +77,42 @@ function UpsellFBEFarAwayCardContent() {
  const nonProfitMission = (
    <span className="font-weight-bold">
      <FormattedMessage
-        id="learning.upgradeCard.nonProfitMission"
+        id="learning.generic.upgradeNotification.FBE.nonProfitMission"
        defaultMessage="non-profit mission"
      />
    </span>
  );

  return (
-    <ul className="fa-ul upgrade-card-ul">
+    <ul className="fa-ul upgrade-notification-ul">
      <li>
-        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <span className="fa-li upgrade-notification-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
-          id="learning.outline.widgets.upgradeCard.verifiedCertMessage"
+          id="learning.generic.upgradeNotification.verifiedCertMessage"
          defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
          values={{ verifiedCertLink }}
        />
      </li>
      <li>
-        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <span className="fa-li upgrade-notification-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
-          id="learning.outline.widgets.upgradeCard.unlockGraded"
+          id="learning.generic.upgradeNotification.unlockGraded"
          defaultMessage="Unlock your access to all course activities, including {gradedAssignments}"
          values={{ gradedAssignments }}
        />
      </li>
      <li>
-        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <span className="fa-li upgrade-notification-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
-          id="learning.outline.widgets.upgradeCard.fullAccess"
+          id="learning.generic.upgradeNotification.fullAccess"
          defaultMessage="{fullAccess} to course content and materials, even after the course ends"
          values={{ fullAccess }}
        />
      </li>
      <li>
-        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <span className="fa-li upgrade-notification-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
-          id="learning.outline.widgets.upgradeCard.nonProfitMission"
+          id="learning.generic.upgradeNotification.nonProfitMission"
          defaultMessage="Support our {nonProfitMission} at edX"
          values={{ nonProfitMission }}
        />
@@ -125,7 +125,7 @@ function UpsellFBESoonCardContent({ accessExpirationDate, timezoneFormatArgs })
  const includingAnyProgress = (
    <span className="font-weight-bold">
      <FormattedMessage
-        id="learning.upgradeCard.expirationAccessLoss.progress"
+        id="learning.generic.upgradeNotification.expirationAccessLoss.progress"
        defaultMessage="including any progress"
      />
    </span>
@@ -144,17 +144,17 @@ function UpsellFBESoonCardContent({ accessExpirationDate, timezoneFormatArgs })
  const benefitsOfUpgrading = (
    <a className="inline-link-underline font-weight-bold" rel="noopener noreferrer" target="_blank" href="https://support.edx.org/hc/en-us/articles/360013426573-What-are-the-differences-between-audit-free-and-verified-paid-courses-">
      <FormattedMessage
-        id="learning.outline.widgets.upgradeCard.expirationVerifiedCert.benefits"
+        id="learning.generic.upgradeNotification.expirationVerifiedCert.benefits"
        defaultMessage="benefits of upgrading"
      />
    </a>
  );

  return (
-    <div className="upgrade-card-text">
+    <div className="upgrade-notification-text">
      <p>
        <FormattedMessage
-          id="learning.outline.widgets.upgradeCard.expirationAccessLoss"
+          id="learning.generic.upgradeNotification.expirationAccessLoss"
          defaultMessage="You will lose all access to this course, {includingAnyProgress}, on {date}."
          values={{
            includingAnyProgress,
@@ -164,7 +164,7 @@ function UpsellFBESoonCardContent({ accessExpirationDate, timezoneFormatArgs })
      </p>
      <p>
        <FormattedMessage
-          id="learning.outline.widgets.upgradeCard.expirationVerifiedCert"
+          id="learning.generic.upgradeNotification.expirationVerifiedCert"
          defaultMessage="Upgrading your course enables you to pursue a verified certificate and unlocks numerous features. Learn more about the {benefitsOfUpgrading}."
          values={{ benefitsOfUpgrading }}
        />
@@ -190,7 +190,7 @@ function ExpirationCountdown({ hoursToExpiration }) {
  if (hoursToExpiration >= 24) {
    expirationText = (
      <FormattedMessage
-        id="learning.outline.widgets.upgradeCard.expirationDays"
+        id="learning.generic.upgradeNotification.expirationDays"
        defaultMessage={`{dayCount, number} {dayCount, plural, 
          one {day}
          other {days}} left`}
@@ -202,7 +202,7 @@ function ExpirationCountdown({ hoursToExpiration }) {
  } else if (hoursToExpiration >= 1) {
    expirationText = (
      <FormattedMessage
-        id="learning.outline.widgets.upgradeCard.expirationHours"
+        id="learning.generic.upgradeNotification.expirationHours"
        defaultMessage={`{hourCount, number} {hourCount, plural,
          one {hour}
          other {hours}} left`}
@@ -214,7 +214,7 @@ function ExpirationCountdown({ hoursToExpiration }) {
  } else {
    expirationText = (
      <FormattedMessage
-        id="learning.outline.widgets.upgradeCard.expirationMinutes"
+        id="learning.generic.upgradeNotification.expirationMinutes"
        defaultMessage="Less than 1 hour left"
      />
    );
@@ -230,7 +230,7 @@ function AccessExpirationDateBanner({ accessExpirationDate, timezoneFormatArgs }
  return (
    <div className="upsell-warning-light">
      <FormattedMessage
-        id="learning.outline.widgets.upgradeCard.expiration"
+        id="learning.generic.upgradeNotification.expiration"
        defaultMessage="Course access will expire {date}"
        values={{
          date: (
@@ -259,7 +259,7 @@ AccessExpirationDateBanner.defaultProps = {
  timezoneFormatArgs: {},
 };

-function UpgradeCard({
+function UpgradeNotification({
  accessExpiration,
  contentTypeGatingEnabled,
  courseId,
@@ -313,12 +313,12 @@ function UpgradeCard({

  /*
  There are 4 parts that change in the upgrade card:
-    upgradeCardHeaderText
+    upgradeNotificationHeaderText
    expirationBanner
    upsellMessage
    offerCode
  */
-  let upgradeCardHeaderText;
+  let upgradeNotificationHeaderText;
  let expirationBanner;
  let upsellMessage;
  let offerCode;
@@ -331,7 +331,7 @@ function UpgradeCard({
      offerCode = (
        <div className="text-center discount-info">
          <FormattedMessage
-            id="learning.outline.widgets.upgradeCard.code"
+            id="learning.generic.upgradeNotification.code"
            defaultMessage="Use code {code} at checkout"
            values={{
              code: (<span className="font-weight-bold">{offer.code}</span>),
@@ -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 = (
          <FormattedMessage
-            id="learning.outline.widgets.upgradeCard.firstTimeLearnerDiscount"
+            id="learning.generic.upgradeNotification.firstTimeLearnerDiscount"
            defaultMessage="{percentage}% First-Time Learner Discount"
            values={{
              percentage: (offer.percentage),
@@ -355,9 +355,9 @@ function UpgradeCard({
        );
        expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToDiscountExpiration} />;
      } else {
-        upgradeCardHeaderText = (
+        upgradeNotificationHeaderText = (
          <FormattedMessage
-            id="learning.outline.widgets.upgradeCard.accessExpiration"
+            id="learning.generic.upgradeNotification.accessExpiration"
            defaultMessage="Upgrade your course today"
          />
        );
@@ -370,9 +370,9 @@ function UpgradeCard({
      }
      upsellMessage = <UpsellFBEFarAwayCardContent />;
    } else { // more urgent messaging if there's less than 7 days left to access expiration
-      upgradeCardHeaderText = (
+      upgradeNotificationHeaderText = (
        <FormattedMessage
-          id="learning.outline.widgets.upgradeCard.accessExpirationUrgent"
+          id="learning.generic.upgradeNotification.accessExpirationUrgent"
          defaultMessage="Course Access Expiration"
        />
      );
@@ -385,9 +385,9 @@ function UpgradeCard({
      );
    }
  } else { // FBE is turned off
-    upgradeCardHeaderText = (
+    upgradeNotificationHeaderText = (
      <FormattedMessage
-        id="learning.outline.widgets.upgradeCard.pursueAverifiedCertificate"
+        id="learning.generic.upgradeNotification.pursueAverifiedCertificate"
        defaultMessage="Pursue a verified certificate"
      />
    );
@@ -395,26 +395,26 @@ function UpgradeCard({
  }

  return (
-    <section className={classNames('upgrade-card small', { 'card mb-4': shouldDisplayBorder })}>
-      <h2 className="h5 upgrade-card-header" id="outline-sidebar-upgrade-header">
-        {upgradeCardHeaderText}
+    <section className={classNames('upgrade-notification small', { 'card mb-4': shouldDisplayBorder })}>
+      <h2 className="h5 upgrade-notification-header" id="outline-sidebar-upgrade-header">
+        {upgradeNotificationHeaderText}
      </h2>
      {expirationBanner}
-      <div className="upgrade-card-message">
+      <div className="upgrade-notification-message">
        {upsellMessage}
      </div>
      <UpgradeButton
        offer={offer}
        onClick={logClick}
        verifiedMode={verifiedMode}
-        className="upgrade-card-button"
+        className="upgrade-notification-button"
      />
      {offerCode}
    </section>
  );
 }

-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);
--- a/src/generic/upgrade-notification/UpgradeNotification.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;
 }
--- a/src/generic/upgrade-notification/UpgradeNotification.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(<UpgradeCard {...upgradeCardData} />);
+    const upgradeNotificationData = Factory.build('upgradeNotificationData', { ...attributes });
+    render(<UpgradeNotification {...upgradeNotificationData} />);
  }

  it('does not render when there is no verified mode', async () => {
--- 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';