@edx/frontend-plugin-advertisements 1.26.8 → 1.27.0

package/dist/upgrade-notification/ExperimentalUpgradeNotification.js

@@ -12,13 +12,14 @@ var _analytics = require("@edx/frontend-platform/analytics");
 var _paragon = require("@openedx/paragon");
 var _icons = require("@openedx/paragon/icons");
 var _reactSdk = require("@optimizely/react-sdk");
-var _localStorage = require("@src/data/localStorage");
 var _upgradeButton = require("@src/generic/upgrade-button");
-var _messages = _interopRequireDefault(require("@src/generic/messages"));
 var _modelStore = require("@src/generic/model-store");
 var _data = require("../data");
+var _ExperimentalUpsellTable = _interopRequireDefault(require("../upsell-bullets/ExperimentalUpsellTable"));
+var _ExperimentalUpsellBullets = _interopRequireDefault(require("../upsell-bullets/ExperimentalUpsellBullets"));
 var _certificatePreview = _interopRequireDefault(require("./certificate-preview"));
-var _upsellBullets = require("../upsell-bullets");
+var _generic = require("./generic");
+var _messages = _interopRequireDefault(require("./messages"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -28,259 +29,51 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint import/no-unresolved: 0 */
-const UpsellNoFBECardContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
-  className: "fa-ul upgrade-notification-ul pt-0",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.VerifiedCertBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.SupportMissionBullet, {})]
-});
-const ExperimentUpsellNoFBECardContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
-  className: "fa-ul upgrade-notification-ul pt-0",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.VerifiedCertBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.LifetimeAccessBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.AdditionalToolsBullet, {})]
-});
-const UpsellFBEFarAwayCardContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
-  className: "fa-ul upgrade-notification-ul",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.VerifiedCertBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.UnlockGradedBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.FullAccessBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.SupportMissionBullet, {})]
-});
-const ExperimentUpsellFBEFarAwayCardContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
-  className: "fa-ul upgrade-notification-ul",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.VerifiedCertBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.LifetimeAccessBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.GradesAndFeedbackBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.AdditionalToolsBullet, {})]
-});
-const UpsellFBESoonCardContent = _ref => {
+const getVariation = _ref => {
   let {
-    accessExpirationDate,
-    timezoneFormatArgs
+    isFBE,
+    variationKey,
+    enabled
   } = _ref;
-  const includingAnyProgress = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: "font-weight-bold",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-      id: "learning.generic.upgradeNotification.expirationAccessLoss.progress",
-      defaultMessage: "including any progress"
-    })
-  });
-  const date = /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedDate, _objectSpread({
-    day: "numeric",
-    month: "long",
-    value: new Date(accessExpirationDate)
-  }, timezoneFormatArgs), "accessDate");
-  const benefitsOfUpgrading = /*#__PURE__*/(0, _jsxRuntime.jsx)("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-",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-      id: "learning.generic.upgradeNotification.expirationVerifiedCert.benefits",
-      defaultMessage: "benefits of upgrading"
-    })
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "upgrade-notification-text",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-        id: "learning.generic.upgradeNotification.expirationAccessLoss",
-        defaultMessage: "You will lose all access to this course, {includingAnyProgress}, on {date}.",
-        values: {
-          includingAnyProgress,
-          date
-        }
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-        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
-        }
-      })
-    })]
-  });
-};
-UpsellFBESoonCardContent.propTypes = {
-  accessExpirationDate: _propTypes.default.PropTypes.instanceOf(Date).isRequired,
-  timezoneFormatArgs: _propTypes.default.shape({
-    timeZone: _propTypes.default.string
-  })
-};
-UpsellFBESoonCardContent.defaultProps = {
-  timezoneFormatArgs: {}
-};
-const PastExpirationCardContent = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-  className: "upgrade-notification-text",
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-      id: "learning.generic.upgradeNotification.pastExpiration.content",
-      defaultMessage: "The upgrade deadline for this course passed. To upgrade, enroll in the next available session."
-    })
-  })
-});
-const ExpirationCountdown = _ref2 => {
-  let {
-    courseId,
-    hoursToExpiration,
-    setupgradeNotificationCurrentState,
-    type
-  } = _ref2;
-  let expirationText;
-  if (hoursToExpiration >= 24) {
-    // More than 1 day left
-    // setupgradeNotificationCurrentState is available in NotificationTray (not course home)
-    if (setupgradeNotificationCurrentState) {
-      if (type === 'access') {
-        setupgradeNotificationCurrentState('accessDaysLeft');
-        (0, _localStorage.setLocalStorage)(`upgradeNotificationCurrentState.${courseId}`, 'accessDaysLeft');
-      }
-      if (type === 'offer') {
-        setupgradeNotificationCurrentState('FPDdaysLeft');
-        (0, _localStorage.setLocalStorage)(`upgradeNotificationCurrentState.${courseId}`, 'FPDdaysLeft');
-      }
-    }
-    expirationText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-      id: "learning.generic.upgradeNotification.expirationDays",
-      defaultMessage: `{dayCount, number} {dayCount, plural,
-          one {day}
-          other {days}} left`,
-      values: {
-        dayCount: Math.floor(hoursToExpiration / 24)
-      }
-    });
-  } else if (hoursToExpiration >= 1) {
-    // More than 1 hour left
-    // setupgradeNotificationCurrentState is available in NotificationTray (not course home)
-    if (setupgradeNotificationCurrentState) {
-      if (type === 'access') {
-        setupgradeNotificationCurrentState('accessHoursLeft');
-        (0, _localStorage.setLocalStorage)(`upgradeNotificationCurrentState.${courseId}`, 'accessHoursLeft');
-      }
-      if (type === 'offer') {
-        setupgradeNotificationCurrentState('FPDHoursLeft');
-        (0, _localStorage.setLocalStorage)(`upgradeNotificationCurrentState.${courseId}`, 'FPDHoursLeft');
-      }
-    }
-    expirationText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-      id: "learning.generic.upgradeNotification.expirationHours",
-      defaultMessage: `{hourCount, number} {hourCount, plural,
-          one {hour}
-          other {hours}} left`,
-      values: {
-        hourCount: hoursToExpiration
-      }
-    });
-  } else {
-    // Less than 1 hour
-    // setupgradeNotificationCurrentState is available in NotificationTray (not course home)
-    if (setupgradeNotificationCurrentState) {
-      if (type === 'access') {
-        setupgradeNotificationCurrentState('accessLastHour');
-        (0, _localStorage.setLocalStorage)(`upgradeNotificationCurrentState.${courseId}`, 'accessLastHour');
-      }
-      if (type === 'offer') {
-        setupgradeNotificationCurrentState('FPDLastHour');
-        (0, _localStorage.setLocalStorage)(`upgradeNotificationCurrentState.${courseId}`, 'FPDLastHour');
-      }
+  const {
+    VARIATIONS
+  } = _data.OPTIMIZELY_VTR_SIDEBAR_EXPERIMENT;
+  if (enabled) {
+    switch (variationKey) {
+      case VARIATIONS.TABLE:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExperimentalUpsellTable.default, {
+          isFBE
+        });
+      case VARIATIONS.BULLETS:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExperimentalUpsellBullets.default, {
+          isFBE
+        });
+      default:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_generic.UpsellFarAwayCardContent, {
+          isFBE
+        });
     }
-    expirationText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-      id: "learning.generic.upgradeNotification.expirationMinutes",
-      defaultMessage: "Less than 1 hour left"
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "upsell-warning",
-    children: expirationText
-  });
-};
-ExpirationCountdown.propTypes = {
-  courseId: _propTypes.default.string.isRequired,
-  hoursToExpiration: _propTypes.default.number.isRequired,
-  setupgradeNotificationCurrentState: _propTypes.default.func,
-  type: _propTypes.default.string
-};
-ExpirationCountdown.defaultProps = {
-  setupgradeNotificationCurrentState: null,
-  type: null
-};
-const AccessExpirationDateBanner = _ref3 => {
-  let {
-    courseId,
-    accessExpirationDate,
-    timezoneFormatArgs,
-    setupgradeNotificationCurrentState
-  } = _ref3;
-  if (setupgradeNotificationCurrentState) {
-    setupgradeNotificationCurrentState('accessDateView');
-    (0, _localStorage.setLocalStorage)(`upgradeNotificationCurrentState.${courseId}`, 'accessDateView');
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "upsell-warning-light",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-      id: "learning.generic.upgradeNotification.expiration",
-      defaultMessage: "Course access will expire {date}",
-      values: {
-        date: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedDate, _objectSpread({
-          day: "numeric",
-          month: "long",
-          value: accessExpirationDate
-        }, timezoneFormatArgs), "accessExpireDate")
-      }
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_generic.UpsellFarAwayCardContent, {
+    isFBE
   });
 };
-AccessExpirationDateBanner.propTypes = {
-  courseId: _propTypes.default.string.isRequired,
-  accessExpirationDate: _propTypes.default.PropTypes.instanceOf(Date).isRequired,
-  timezoneFormatArgs: _propTypes.default.shape({
-    timeZone: _propTypes.default.string
-  }),
-  setupgradeNotificationCurrentState: _propTypes.default.func
-};
-AccessExpirationDateBanner.defaultProps = {
-  timezoneFormatArgs: {},
-  setupgradeNotificationCurrentState: null
-};
-const PastExpirationDateBanner = _ref4 => {
-  let {
-    courseId,
-    accessExpirationDate,
-    timezoneFormatArgs,
-    setupgradeNotificationCurrentState
-  } = _ref4;
-  if (setupgradeNotificationCurrentState) {
-    setupgradeNotificationCurrentState('PastExpirationDate');
-    (0, _localStorage.setLocalStorage)(`upgradeNotificationCurrentState.${courseId}`, 'PastExpirationDate');
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "upsell-warning",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-      id: "learning.generic.upgradeNotification.pastExpiration.banner",
-      defaultMessage: "Upgrade deadline passed on {date}",
-      values: {
-        date: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedDate, _objectSpread({
-          day: "numeric",
-          month: "long",
-          value: accessExpirationDate
-        }, timezoneFormatArgs), "accessExpireDate")
-      }
-    })
-  });
-};
-PastExpirationDateBanner.propTypes = {
-  courseId: _propTypes.default.string.isRequired,
-  accessExpirationDate: _propTypes.default.PropTypes.instanceOf(Date).isRequired,
-  timezoneFormatArgs: _propTypes.default.shape({
-    timeZone: _propTypes.default.string
-  }),
-  setupgradeNotificationCurrentState: _propTypes.default.func
-};
-PastExpirationDateBanner.defaultProps = {
-  timezoneFormatArgs: {},
-  setupgradeNotificationCurrentState: null
-};
-const ExperimentalUpgradeNotification = _ref5 => {
+const ExperimentalUpgradeNotification = _ref2 => {
   let {
     id,
     courseId,
     setNotificationCurrentState,
     toggleSidebar,
     optimizely
-  } = _ref5;
+  } = _ref2;
   const pluginLocationId = id;
+  const {
+    KEY: experimentKey,
+    VARIATIONS
+  } = _data.OPTIMIZELY_VTR_SIDEBAR_EXPERIMENT;
+  const {
+    formatMessage
+  } = (0, _i18n.useIntl)();
   const {
     org,
     userTimezone,
@@ -295,7 +88,6 @@ const ExperimentalUpgradeNotification = _ref5 => {
     offer,
     timeOffsetMillis
   } = (0, _modelStore.useModel)('outline', courseId);
-  const intl = (0, _i18n.useIntl)();
   const dateNow = Date.now();
   const timezoneFormatArgs = userTimezone ? {
     timeZone: userTimezone
@@ -303,10 +95,11 @@ const ExperimentalUpgradeNotification = _ref5 => {
   const correctedTime = new Date(dateNow + timeOffsetMillis);
   const accessExpirationDate = accessExpiration ? new Date(accessExpiration.expirationDate) : null;
   const pastExpirationDeadline = accessExpiration ? new Date(dateNow) > accessExpirationDate : false;
-  const shouldDisplayBorder = pluginLocationId !== 'outline_tab_notifications';
+  const shouldDisplayBorder = pluginLocationId.includes('outline');
   const upsellPageName = pluginLocationId === 'outline_tab_notifications' ? 'course_home' : 'in_course';
   const setupgradeNotificationCurrentState = setNotificationCurrentState;
-  const [decision] = (0, _reactSdk.useDecision)(_data.OPTIMIZELY_VTR_COPY_CHANGE_EXPERIMENT_KEY);
+  const isFBE = !!accessExpiration && !!datesBannerInfo?.contentTypeGatingEnabled;
+  const [decision] = (0, _reactSdk.useDecision)(experimentKey);
   const {
     enabled,
     variationKey
@@ -315,7 +108,7 @@ const ExperimentalUpgradeNotification = _ref5 => {
   // Experiment specific properties or data should not be sent to the tracking logs, so break this
   // object out to ensure it is only sent to Segment and not the tracking logs.
   const experimentProperties = {
-    experiment_key: _data.OPTIMIZELY_VTR_COPY_CHANGE_EXPERIMENT_KEY,
+    experiment_key: experimentKey,
     variation_key: variationKey
   };
   const eventProperties = {
@@ -369,78 +162,63 @@ const ExperimentalUpgradeNotification = _ref5 => {
   */
   let upgradeNotificationHeaderText;
   let expirationBanner;
-  let upsellMessage;
+  let upsellMessage = getVariation({
+    enabled,
+    variationKey,
+    isFBE
+  });
   let callToActionButton;
   let offerCode;
-  if (!!accessExpiration && !!datesBannerInfo?.contentTypeGatingEnabled) {
+  if (isFBE) {
     const hoursToAccessExpiration = Math.floor((accessExpirationDate - correctedTime) / 1000 / 60 / 60);
     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);
-        upgradeNotificationHeaderText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-          id: "learning.generic.upgradeNotification.firstTimeLearnerDiscount",
-          defaultMessage: "{percentage}% First-Time Learner Discount",
-          values: {
-            percentage: offer.percentage
-          }
+        upgradeNotificationHeaderText = formatMessage(_messages.default.firstTimeLearnerDiscountHeader, {
+          percentage: offer.percentage
         });
-        expirationBanner = /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpirationCountdown, {
+        expirationBanner = /*#__PURE__*/(0, _jsxRuntime.jsx)(_generic.ExpirationCountdown, {
           courseId: courseId,
           hoursToExpiration: hoursToDiscountExpiration,
           setupgradeNotificationCurrentState: setupgradeNotificationCurrentState,
           type: "offer"
         });
       } else {
-        upgradeNotificationHeaderText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-          id: "learning.generic.upgradeNotification.accessExpiration",
-          defaultMessage: "Upgrade your course today"
-        });
-        expirationBanner = /*#__PURE__*/(0, _jsxRuntime.jsx)(AccessExpirationDateBanner, {
+        upgradeNotificationHeaderText = formatMessage(_messages.default.accessExpirationHeader);
+        expirationBanner = /*#__PURE__*/(0, _jsxRuntime.jsx)(_generic.AccessExpirationDateBanner, {
           courseId: courseId,
           accessExpirationDate: accessExpirationDate,
           timezoneFormatArgs: timezoneFormatArgs,
           setupgradeNotificationCurrentState: setupgradeNotificationCurrentState
         });
       }
-      upsellMessage = variationKey === _data.OPTIMIZELY_VTR_COPY_CHANGE_EXPERIMENT_VARIATION_KEYS.CERTIFICATE_PREVIEW_WITH_COPY && enabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ExperimentUpsellFBEFarAwayCardContent, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(UpsellFBEFarAwayCardContent, {});
     } else if (hoursToAccessExpiration < 7 * 24 && hoursToAccessExpiration >= 0) {
       // more urgent messaging if there's less than 7 days left to access expiration
-      upgradeNotificationHeaderText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-        id: "learning.generic.upgradeNotification.accessExpirationUrgent",
-        defaultMessage: "Course Access Expiration"
-      });
-      expirationBanner = /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpirationCountdown, {
+      upgradeNotificationHeaderText = formatMessage(_messages.default.accessExpirationUrgentHeader);
+      expirationBanner = /*#__PURE__*/(0, _jsxRuntime.jsx)(_generic.ExpirationCountdown, {
         courseId: courseId,
         hoursToExpiration: hoursToAccessExpiration,
         setupgradeNotificationCurrentState: setupgradeNotificationCurrentState,
         type: "access"
       });
-      upsellMessage = /*#__PURE__*/(0, _jsxRuntime.jsx)(UpsellFBESoonCardContent, {
-        accessExpirationDate: accessExpirationDate,
-        timezoneFormatArgs: timezoneFormatArgs
-      });
+      if (variationKey === VARIATIONS.OFF) {
+        upsellMessage = /*#__PURE__*/(0, _jsxRuntime.jsx)(_generic.UpsellFBESoonCardContent, {
+          accessExpirationDate: accessExpirationDate,
+          timezoneFormatArgs: timezoneFormatArgs
+        });
+      }
     } else {
       // access expiration deadline has passed
-      upgradeNotificationHeaderText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-        id: "learning.generic.upgradeNotification.accessExpirationPast",
-        defaultMessage: "Course Access Expiration"
-      });
-      expirationBanner = /*#__PURE__*/(0, _jsxRuntime.jsx)(PastExpirationDateBanner, {
+      upgradeNotificationHeaderText = formatMessage(_messages.default.accessExpirationPastHeader);
+      expirationBanner = /*#__PURE__*/(0, _jsxRuntime.jsx)(_generic.PastExpirationDateBanner, {
         courseId: courseId,
         accessExpirationDate: accessExpirationDate,
         timezoneFormatArgs: timezoneFormatArgs,
         setupgradeNotificationCurrentState: setupgradeNotificationCurrentState
       });
-      upsellMessage = /*#__PURE__*/(0, _jsxRuntime.jsx)(PastExpirationCardContent, {});
+      upsellMessage = /*#__PURE__*/(0, _jsxRuntime.jsx)(_generic.PastExpirationCardContent, {});
     }
-  } else {
-    // FBE is turned off
-    upgradeNotificationHeaderText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-      id: "learning.generic.upgradeNotification.pursueAverifiedCertificate",
-      defaultMessage: "Pursue a verified certificate"
-    });
-    upsellMessage = variationKey === _data.OPTIMIZELY_VTR_COPY_CHANGE_EXPERIMENT_VARIATION_KEYS.CERTIFICATE_PREVIEW_WITH_COPY && enabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ExperimentUpsellNoFBECardContent, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(UpsellNoFBECardContent, {});
   }
   if (pastExpirationDeadline) {
     callToActionButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Button, {
@@ -448,7 +226,7 @@ const ExperimentalUpgradeNotification = _ref5 => {
       onClick: logClickPastExpiration,
       href: marketingUrl,
       block: true,
-      children: "View Course Details"
+      children: formatMessage(_messages.default.pastExpirationCallToActionLabel)
     });
   } else {
     callToActionButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_upgradeButton.UpgradeButton, {
@@ -462,32 +240,26 @@ const ExperimentalUpgradeNotification = _ref5 => {
     // if there's a first purchase discount, message the code at the bottom
     offerCode = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "text-center discount-info",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.FormattedMessage, {
-        id: "learning.generic.upgradeNotification.code",
-        defaultMessage: "Use code {code} at checkout",
-        values: {
-          code: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "font-weight-bold",
-            children: offer.code
-          })
-        }
+      children: formatMessage(_messages.default.discountCodeMessage, {
+        code: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "font-weight-bold",
+          children: offer.code
+        })
       })
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
     className: (0, _classnames.default)('upgrade-notification small', {
-      'card mb-4': shouldDisplayBorder
+      'pgn__card pgn__card-light card mb-4 rounded': shouldDisplayBorder
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       id: "courseHome-upgradeNotification",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_certificatePreview.default, {
-        courseId: courseId
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
-        className: (0, _classnames.default)('h5 upgrade-notification-header', {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+        className: (0, _classnames.default)('upgrade-notification-header', {
           'd-flex align-items-center mr-2 ml-4 my-1.5 font-size-18': !!toggleSidebar
         }),
         id: "outline-sidebar-upgrade-header",
-        children: [upgradeNotificationHeaderText, !!toggleSidebar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [formatMessage(_messages.default.pursueCertificateMessage), !!toggleSidebar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "d-inline-flex ml-auto",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.IconButton, {
             src: _icons.Close,
@@ -495,9 +267,14 @@ const ExperimentalUpgradeNotification = _ref5 => {
             iconAs: _paragon.Icon,
             onClick: toggleSidebar,
             className: "icon-hover",
-            alt: intl.formatMessage(_messages.default.close)
+            alt: formatMessage(_messages.default.closeAlt)
           })
         })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_certificatePreview.default, {
+        courseId: courseId
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        className: "ml-4",
+        children: upgradeNotificationHeaderText
       }), expirationBanner, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "upgrade-notification-message",
         children: upsellMessage
@@ -520,5 +297,5 @@ ExperimentalUpgradeNotification.defaultProps = {
   setNotificationCurrentState: null,
   toggleSidebar: null
 };
-var _default = exports.default = (0, _i18n.injectIntl)((0, _reactSdk.withOptimizely)(ExperimentalUpgradeNotification));
+var _default = exports.default = (0, _reactSdk.withOptimizely)(ExperimentalUpgradeNotification);
 //# sourceMappingURL=ExperimentalUpgradeNotification.js.map