@edx/frontend-plugin-advertisements 2.25.0 → 2.26.1

package/dist/data/__factories__/extraOffer.factory.js

@@ -6,8 +6,8 @@ var _rosie = require("rosie");
 // The `extra_offer` block of the course home metadata API, as the MFE stores it (camel-cased).
 // Shape from edx-subscription's devstack mock, branch abhalsod/LP-1415-devstack-offer-mock.
 // status is the Viax status; isSubscriber and freeTrialEligible are null when it is UNKNOWN;
-// subscribeUrl is null when Subscribe should not be offered.
-_rosie.Factory.define('extraOffer').option('checkoutHost', 'https://checkout.example.com').attr('inCatalog', true).attr('status', 'NOT_SUBSCRIBED').attr('isSubscriber', false).attr('freeTrialEligible', true).attr('subscribeUrl', ['checkoutHost'], host => `${host}/subscribe?course_run_key=course-v1:edX+DemoX+Demo_Course`).attr('price', () => ({
+// subscribeUrl is null when Subscribe should not be offered; its shape follows the real checkout link.
+_rosie.Factory.define('extraOffer').option('checkoutHost', 'https://checkout.example.com').attr('inCatalog', true).attr('status', 'NOT_SUBSCRIBED').attr('isSubscriber', false).attr('freeTrialEligible', true).attr('subscribeUrl', ['checkoutHost'], host => `${host}/checkout?plan=monthly&course_run_key=${encodeURIComponent('course-v1:edX+DemoX+Demo_Course')}`).attr('price', () => ({
   amount: '39.00',
   currency: 'USD',
   billingPeriod: 'month'

package/dist/data/__factories__/extraOffer.factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"extraOffer.factory.js","names":["_rosie","require","Factory","define","option","attr","host","amount","currency","billingPeriod"],"sources":["../../../src/data/__factories__/extraOffer.factory.js"],"sourcesContent":["import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies\n\n// The `extra_offer` block of the course home metadata API, as the MFE stores it (camel-cased).\n// Shape from edx-subscription's devstack mock, branch abhalsod/LP-1415-devstack-offer-mock.\n// status is the Viax status; isSubscriber and freeTrialEligible are null when it is UNKNOWN;\n// subscribeUrl is null when Subscribe should not be offered.\nFactory.define('extraOffer')\n  .option('checkoutHost', 'https://checkout.example.com')\n  .attr('inCatalog', true)\n  .attr('status', 'NOT_SUBSCRIBED')\n  .attr('isSubscriber', false)\n  .attr('freeTrialEligible', true)\n  .attr('subscribeUrl', ['checkoutHost'], (host) => `${host}/subscribe?course_run_key=course-v1:edX+DemoX+Demo_Course`)\n  .attr('price', () => ({ amount: '39.00', currency: 'USD', billingPeriod: 'month' }));\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAiC;;AAEjC;AACA;AACA;AACA;AACAC,cAAO,CAACC,MAAM,CAAC,YAAY,CAAC,CACzBC,MAAM,CAAC,cAAc,EAAE,8BAA8B,CAAC,CACtDC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CACvBA,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAChCA,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAC3BA,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAC/BA,IAAI,CAAC,cAAc,EAAE,CAAC,cAAc,CAAC,EAAGC,IAAI,IAAK,GAAGA,IAAI,2DAA2D,CAAC,CACpHD,IAAI,CAAC,OAAO,EAAE,OAAO;EAAEE,MAAM,EAAE,OAAO;EAAEC,QAAQ,EAAE,KAAK;EAAEC,aAAa,EAAE;AAAQ,CAAC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"extraOffer.factory.js","names":["_rosie","require","Factory","define","option","attr","host","encodeURIComponent","amount","currency","billingPeriod"],"sources":["../../../src/data/__factories__/extraOffer.factory.js"],"sourcesContent":["import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies\n\n// The `extra_offer` block of the course home metadata API, as the MFE stores it (camel-cased).\n// Shape from edx-subscription's devstack mock, branch abhalsod/LP-1415-devstack-offer-mock.\n// status is the Viax status; isSubscriber and freeTrialEligible are null when it is UNKNOWN;\n// subscribeUrl is null when Subscribe should not be offered; its shape follows the real checkout link.\nFactory.define('extraOffer')\n  .option('checkoutHost', 'https://checkout.example.com')\n  .attr('inCatalog', true)\n  .attr('status', 'NOT_SUBSCRIBED')\n  .attr('isSubscriber', false)\n  .attr('freeTrialEligible', true)\n  .attr('subscribeUrl', ['checkoutHost'], (host) => `${host}/checkout?plan=monthly&course_run_key=${encodeURIComponent('course-v1:edX+DemoX+Demo_Course')}`)\n  .attr('price', () => ({ amount: '39.00', currency: 'USD', billingPeriod: 'month' }));\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAiC;;AAEjC;AACA;AACA;AACA;AACAC,cAAO,CAACC,MAAM,CAAC,YAAY,CAAC,CACzBC,MAAM,CAAC,cAAc,EAAE,8BAA8B,CAAC,CACtDC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CACvBA,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAChCA,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAC3BA,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAC/BA,IAAI,CAAC,cAAc,EAAE,CAAC,cAAc,CAAC,EAAGC,IAAI,IAAK,GAAGA,IAAI,yCAAyCC,kBAAkB,CAAC,iCAAiC,CAAC,EAAE,CAAC,CACzJF,IAAI,CAAC,OAAO,EAAE,OAAO;EAAEG,MAAM,EAAE,OAAO;EAAEC,QAAQ,EAAE,KAAK;EAAEC,aAAa,EAAE;AAAQ,CAAC,CAAC,CAAC","ignoreList":[]}

package/dist/data/lms_api.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SubscriptionUpgradeError = void 0;
+exports.fetchEnrollmentMode = fetchEnrollmentMode;
 exports.fetchOrg = fetchOrg;
 exports.fetchVerifiedName = fetchVerifiedName;
 exports.upgradeEnrollmentWithSubscription = upgradeEnrollmentWithSubscription;
@@ -73,4 +74,20 @@ async function upgradeEnrollmentWithSubscription(courseRunKey) {
     });
   }
 }
+
+/**
+ * The current learner's enrollment mode in a course run, such as 'audit' or 'verified', or null when it
+ * cannot be read or the learner has no active enrollment.
+ */
+async function fetchEnrollmentMode(courseRunKey) {
+  const url = `${(0, _frontendPlatform.getConfig)().LMS_BASE_URL}/api/enrollment/v1/enrollment/${courseRunKey}`;
+  try {
+    const {
+      data
+    } = await (0, _auth.getAuthenticatedHttpClient)().get(url);
+    return data?.is_active && data.mode || null;
+  } catch (error) {
+    return null;
+  }
+}
 //# sourceMappingURL=lms_api.js.map

package/dist/data/lms_api.js.map

@@ -1 +1 @@
-{"version":3,"file":"lms_api.js","names":["_frontendPlatform","require","_auth","fetchOrg","org","LmsApiUrl","getConfig","LMS_BASE_URL","orgUrl","URL","data","getAuthenticatedHttpClient","get","href","error","camelCaseObject","fetchVerifiedName","verifiedNameUrl","SubscriptionUpgradeError","Error","constructor","message","code","status","arguments","length","undefined","name","exports","upgradeEnrollmentWithSubscription","courseRunKey","url","post","response"],"sources":["../../src/data/lms_api.js"],"sourcesContent":["import { getConfig, camelCaseObject } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\nexport async function fetchOrg(org) {\n  const LmsApiUrl = getConfig().LMS_BASE_URL;\n  const orgUrl = new URL(`${LmsApiUrl}/api/organizations/v0/organizations/${org}/`);\n\n  let data;\n  try {\n    ({ data } = await getAuthenticatedHttpClient().get(orgUrl.href));\n  } catch (error) {\n    data = null;\n  }\n  return camelCaseObject(data);\n}\n\nexport async function fetchVerifiedName() {\n  const LmsApiUrl = getConfig().LMS_BASE_URL;\n  const verifiedNameUrl = new URL(`${LmsApiUrl}/api/edx_name_affirmation/v1/verified_name`);\n  let data;\n  try {\n    ({ data } = await getAuthenticatedHttpClient().get(verifiedNameUrl.href));\n  } catch (error) {\n    data = null;\n  }\n  return camelCaseObject(data);\n}\n\nexport class SubscriptionUpgradeError extends Error {\n  constructor(message, { code, status } = {}) {\n    super(message);\n    this.name = 'SubscriptionUpgradeError';\n    this.code = code;\n    this.status = status;\n  }\n}\n\n/**\n * Upgrade a subscriber's enrollment in place. Resolves with the LMS response, e.g. { success, status: 'PENDING' }.\n * Unlike the fetches above, errors are not swallowed: rejects with SubscriptionUpgradeError (code, status).\n */\nexport async function upgradeEnrollmentWithSubscription(courseRunKey) {\n  const url = `${getConfig().LMS_BASE_URL}/api/subscription/enrollment/upgrade/`;\n  try {\n    const { data } = await getAuthenticatedHttpClient().post(url, { courseRunKey });\n    return camelCaseObject(data);\n  } catch (error) {\n    const { status, data } = error.response || {};\n    throw new SubscriptionUpgradeError(data?.error || error.message, { code: data?.code, status });\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEO,eAAeE,QAAQA,CAACC,GAAG,EAAE;EAClC,MAAMC,SAAS,GAAG,IAAAC,2BAAS,EAAC,CAAC,CAACC,YAAY;EAC1C,MAAMC,MAAM,GAAG,IAAIC,GAAG,CAAC,GAAGJ,SAAS,uCAAuCD,GAAG,GAAG,CAAC;EAEjF,IAAIM,IAAI;EACR,IAAI;IACF,CAAC;MAAEA;IAAK,CAAC,GAAG,MAAM,IAAAC,gCAA0B,EAAC,CAAC,CAACC,GAAG,CAACJ,MAAM,CAACK,IAAI,CAAC;EACjE,CAAC,CAAC,OAAOC,KAAK,EAAE;IACdJ,IAAI,GAAG,IAAI;EACb;EACA,OAAO,IAAAK,iCAAe,EAACL,IAAI,CAAC;AAC9B;AAEO,eAAeM,iBAAiBA,CAAA,EAAG;EACxC,MAAMX,SAAS,GAAG,IAAAC,2BAAS,EAAC,CAAC,CAACC,YAAY;EAC1C,MAAMU,eAAe,GAAG,IAAIR,GAAG,CAAC,GAAGJ,SAAS,4CAA4C,CAAC;EACzF,IAAIK,IAAI;EACR,IAAI;IACF,CAAC;MAAEA;IAAK,CAAC,GAAG,MAAM,IAAAC,gCAA0B,EAAC,CAAC,CAACC,GAAG,CAACK,eAAe,CAACJ,IAAI,CAAC;EAC1E,CAAC,CAAC,OAAOC,KAAK,EAAE;IACdJ,IAAI,GAAG,IAAI;EACb;EACA,OAAO,IAAAK,iCAAe,EAACL,IAAI,CAAC;AAC9B;AAEO,MAAMQ,wBAAwB,SAASC,KAAK,CAAC;EAClDC,WAAWA,CAACC,OAAO,EAAyB;IAAA,IAAvB;MAAEC,IAAI;MAAEC;IAAO,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;IACxC,KAAK,CAACH,OAAO,CAAC;IACd,IAAI,CAACM,IAAI,GAAG,0BAA0B;IACtC,IAAI,CAACL,IAAI,GAAGA,IAAI;IAChB,IAAI,CAACC,MAAM,GAAGA,MAAM;EACtB;AACF;;AAEA;AACA;AACA;AACA;AAHAK,OAAA,CAAAV,wBAAA,GAAAA,wBAAA;AAIO,eAAeW,iCAAiCA,CAACC,YAAY,EAAE;EACpE,MAAMC,GAAG,GAAG,GAAG,IAAAzB,2BAAS,EAAC,CAAC,CAACC,YAAY,uCAAuC;EAC9E,IAAI;IACF,MAAM;MAAEG;IAAK,CAAC,GAAG,MAAM,IAAAC,gCAA0B,EAAC,CAAC,CAACqB,IAAI,CAACD,GAAG,EAAE;MAAED;IAAa,CAAC,CAAC;IAC/E,OAAO,IAAAf,iCAAe,EAACL,IAAI,CAAC;EAC9B,CAAC,CAAC,OAAOI,KAAK,EAAE;IACd,MAAM;MAAES,MAAM;MAAEb;IAAK,CAAC,GAAGI,KAAK,CAACmB,QAAQ,IAAI,CAAC,CAAC;IAC7C,MAAM,IAAIf,wBAAwB,CAACR,IAAI,EAAEI,KAAK,IAAIA,KAAK,CAACO,OAAO,EAAE;MAAEC,IAAI,EAAEZ,IAAI,EAAEY,IAAI;MAAEC;IAAO,CAAC,CAAC;EAChG;AACF","ignoreList":[]}
+{"version":3,"file":"lms_api.js","names":["_frontendPlatform","require","_auth","fetchOrg","org","LmsApiUrl","getConfig","LMS_BASE_URL","orgUrl","URL","data","getAuthenticatedHttpClient","get","href","error","camelCaseObject","fetchVerifiedName","verifiedNameUrl","SubscriptionUpgradeError","Error","constructor","message","code","status","arguments","length","undefined","name","exports","upgradeEnrollmentWithSubscription","courseRunKey","url","post","response","fetchEnrollmentMode","is_active","mode"],"sources":["../../src/data/lms_api.js"],"sourcesContent":["import { getConfig, camelCaseObject } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\nexport async function fetchOrg(org) {\n  const LmsApiUrl = getConfig().LMS_BASE_URL;\n  const orgUrl = new URL(`${LmsApiUrl}/api/organizations/v0/organizations/${org}/`);\n\n  let data;\n  try {\n    ({ data } = await getAuthenticatedHttpClient().get(orgUrl.href));\n  } catch (error) {\n    data = null;\n  }\n  return camelCaseObject(data);\n}\n\nexport async function fetchVerifiedName() {\n  const LmsApiUrl = getConfig().LMS_BASE_URL;\n  const verifiedNameUrl = new URL(`${LmsApiUrl}/api/edx_name_affirmation/v1/verified_name`);\n  let data;\n  try {\n    ({ data } = await getAuthenticatedHttpClient().get(verifiedNameUrl.href));\n  } catch (error) {\n    data = null;\n  }\n  return camelCaseObject(data);\n}\n\nexport class SubscriptionUpgradeError extends Error {\n  constructor(message, { code, status } = {}) {\n    super(message);\n    this.name = 'SubscriptionUpgradeError';\n    this.code = code;\n    this.status = status;\n  }\n}\n\n/**\n * Upgrade a subscriber's enrollment in place. Resolves with the LMS response, e.g. { success, status: 'PENDING' }.\n * Unlike the fetches above, errors are not swallowed: rejects with SubscriptionUpgradeError (code, status).\n */\nexport async function upgradeEnrollmentWithSubscription(courseRunKey) {\n  const url = `${getConfig().LMS_BASE_URL}/api/subscription/enrollment/upgrade/`;\n  try {\n    const { data } = await getAuthenticatedHttpClient().post(url, { courseRunKey });\n    return camelCaseObject(data);\n  } catch (error) {\n    const { status, data } = error.response || {};\n    throw new SubscriptionUpgradeError(data?.error || error.message, { code: data?.code, status });\n  }\n}\n\n/**\n * The current learner's enrollment mode in a course run, such as 'audit' or 'verified', or null when it\n * cannot be read or the learner has no active enrollment.\n */\nexport async function fetchEnrollmentMode(courseRunKey) {\n  const url = `${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment/${courseRunKey}`;\n  try {\n    const { data } = await getAuthenticatedHttpClient().get(url);\n    return (data?.is_active && data.mode) || null;\n  } catch (error) {\n    return null;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/paywall/LockPaywall.js

@@ -18,6 +18,8 @@ var _auth = require("@edx/frontend-platform/auth");
 var _analytics = require("@edx/frontend-platform/analytics");
 var _upsellBullets = require("../generic/upsell-bullets");
 var _cohesion = require("../cohesion");
+var _subscriptionUpsell = require("../subscription-upsell");
+var _SubscriptionPaywall = _interopRequireDefault(require("./SubscriptionPaywall"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -43,6 +45,7 @@ const LockPaywall = _ref => {
   const {
     conversion
   } = (0, _cohesion.useCohesion)(courseId);
+  const subscriptionOffer = (0, _subscriptionUpsell.useSubscriptionOffer)(courseId);
 
   // the following variables are set and used for responsive layout to work with
   // whether the NotificationTray is open or not and if there's an offer with longer text
@@ -57,9 +60,6 @@ const LockPaywall = _ref => {
     org_key: org,
     courserun_key: courseId
   };
-  const {
-    userId
-  } = (0, _auth.getAuthenticatedUser)();
   const handleUpgradeClick = () => {
     (0, _analytics.sendTrackEvent)('edx.bi.ecommerce.upsell_links_clicked', _objectSpread(_objectSpread({}, eventProperties), {}, {
       linkCategory: '(none)',
@@ -69,6 +69,29 @@ const LockPaywall = _ref => {
     }));
     conversion('Upgraded');
   };
+  const handleSubscribeClick = () => {
+    (0, _analytics.sendTrackEvent)('edx.bi.ecommerce.upsell_links_clicked', _objectSpread(_objectSpread({}, eventProperties), {}, {
+      linkCategory: '(none)',
+      linkName: 'in_course_subscribe',
+      linkType: 'link',
+      pageName: 'in_course'
+    }));
+    conversion('Subscribe Clicked'); // on the click, before checkout
+  };
+
+  // Learners who can subscribe get the Subscribe banner (Figma shows Subscribe only) and subscribers
+  // get the same banner with Upgrade now. Unknown status keeps the paywall below.
+  if (!pastExpirationDeadline && (subscriptionOffer?.canSubscribe || subscriptionOffer?.canUpgradeInPlace)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubscriptionPaywall.default, {
+      courseId: courseId,
+      offer: subscriptionOffer,
+      onSubscribeClick: handleSubscribeClick,
+      onUpgradeEvent: stage => stage === 'succeeded' && handleUpgradeClick()
+    });
+  }
+  const {
+    userId
+  } = (0, _auth.getAuthenticatedUser)();
   const handleUpgradeClickPastExpiration = () => {
     (0, _analytics.sendTrackEvent)('edx.bi.ecommerce.gated_content.past_expiration.link_clicked', _objectSpread(_objectSpread({}, eventProperties), {}, {
       linkCategory: 'gated_content',

package/dist/paywall/LockPaywall.js.map

@@ -1 +1 @@
-{"version":3,"file":"LockPaywall.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_i18n","_paragon","_icons","_messages","_edX_locked_certificate","_modelStore","_upgradeButton","_auth","_analytics","_upsellBullets","_cohesion","_jsxRuntime","e","__esModule","default","ownKeys","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_toPropertyKey","value","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","LockPaywall","_ref","courseId","intl","useIntl","course","useModel","accessExpiration","marketingUrl","offer","org","verifiedMode","conversion","useCohesion","shouldDisplayGatedContentTwoColumnsHalf","useWindowSize","width","breakpoints","large","minWidth","shouldWrapTextOnButton","extraSmall","accessExpirationDate","Date","expirationDate","pastExpirationDeadline","now","eventProperties","org_key","courserun_key","userId","getAuthenticatedUser","handleUpgradeClick","sendTrackEvent","linkCategory","linkName","linkType","pageName","handleUpgradeClickPastExpiration","jsx","Alert","variant","icon","Locked","className","children","jsxs","formatMessage","messages","Hyperlink","destination","onClick","target","id","defaultMessage","description","classNames","style","float","alt","src","certificateLocked","height","VerifiedCertBullet","UnlockGradedBullet","FullAccessBullet","SupportMissionBullet","UpgradeButton","whiteSpace","propTypes","PropTypes","string","isRequired","_default","exports"],"sources":["../../src/paywall/LockPaywall.jsx"],"sourcesContent":["/* eslint import/no-unresolved: 0 */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport {\n  Alert, breakpoints, Hyperlink, useWindowSize,\n} from '@openedx/paragon';\nimport { Locked } from '@openedx/paragon/icons';\nimport messages from '@src/courseware/course/sequence/lock-paywall/messages';\nimport certificateLocked from '@src/generic/assets/edX_locked_certificate.png';\nimport { useModel } from '@src/generic/model-store';\nimport { UpgradeButton } from '@src/generic/upgrade-button';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\n\nimport {\n  VerifiedCertBullet,\n  UnlockGradedBullet,\n  FullAccessBullet,\n  SupportMissionBullet,\n} from '../generic/upsell-bullets';\nimport { useCohesion } from '../cohesion';\n\nconst LockPaywall = ({\n  courseId,\n}) => {\n  const intl = useIntl();\n  const course = useModel('coursewareMeta', courseId);\n  const {\n    accessExpiration,\n    marketingUrl,\n    offer,\n  } = course;\n\n  const {\n    org, verifiedMode,\n  } = useModel('courseHomeMeta', courseId);\n\n  const { conversion } = useCohesion(courseId);\n\n  // the following variables are set and used for responsive layout to work with\n  // whether the NotificationTray is open or not and if there's an offer with longer text\n  const shouldDisplayGatedContentTwoColumnsHalf = useWindowSize().width <= breakpoints.large.minWidth;\n  const shouldWrapTextOnButton = useWindowSize().width > breakpoints.extraSmall.minWidth;\n\n  const accessExpirationDate = accessExpiration ? new Date(accessExpiration.expirationDate) : null;\n  const pastExpirationDeadline = accessExpiration ? new Date(Date.now()) > accessExpirationDate : false;\n\n  if (!verifiedMode) {\n    return null;\n  }\n\n  const eventProperties = {\n    org_key: org,\n    courserun_key: courseId,\n  };\n\n  const { userId } = getAuthenticatedUser();\n\n  const handleUpgradeClick = () => {\n    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {\n      ...eventProperties,\n      linkCategory: '(none)',\n      linkName: 'in_course_upgrade',\n      linkType: 'link',\n      pageName: 'in_course',\n    });\n\n    conversion('Upgraded');\n  };\n\n  const handleUpgradeClickPastExpiration = () => {\n    sendTrackEvent('edx.bi.ecommerce.gated_content.past_expiration.link_clicked', {\n      ...eventProperties,\n      linkCategory: 'gated_content',\n      linkName: 'course_details',\n      linkType: 'link',\n      pageName: 'in_course',\n    });\n  };\n\n  return (\n    <Alert variant=\"light\" aria-live=\"off\" icon={Locked} className=\"lock-paywall-container\" data-testid=\"lock-paywall-lock-paywall-test-id\">\n      <div className=\"row\">\n        <div className=\"col\">\n          <h4 aria-level=\"3\">\n            <span>{intl.formatMessage(messages['learn.lockPaywall.title'])}</span>\n          </h4>\n          {pastExpirationDeadline ? (\n            <div className=\"mb-2 upgrade-intro\" data-testid=\"lock-paywall-past-expiration\">\n              {intl.formatMessage(messages['learn.lockPaywall.content.pastExpiration'])}\n              <Hyperlink\n                destination={marketingUrl}\n                onClick={handleUpgradeClickPastExpiration(eventProperties)}\n                target=\"_blank\"\n                data-testid=\"lock-paywall-past-expiration-link\"\n              >\n                {intl.formatMessage(messages['learn.lockPaywall.courseDetails'])}\n                <span>\n                  {intl.formatMessage({\n                    id: 'learn.lockPaywall.content.link.new-tab.screenreader-only.message',\n                    defaultMessage: 'in a new tab',\n                    description: 'Screenreader only text for new tab link',\n                  })}\n                </span>\n              </Hyperlink>\n            </div>\n          ) : (\n            <div className=\"mb-2 upgrade-intro\">\n              {intl.formatMessage(messages['learn.lockPaywall.content'])}\n            </div>\n          )}\n\n          <div className={classNames('d-inline-flex flex-row', { 'flex-wrap': shouldDisplayGatedContentTwoColumnsHalf })}>\n            <div style={{ float: 'left' }} className=\"mr-3 mb-2\">\n              <img\n                alt={intl.formatMessage(messages['learn.lockPaywall.example.alt'])}\n                src={certificateLocked}\n                className=\"border-0 certificate-image-banner\"\n                style={{ height: '128px', width: '175px' }}\n              />\n            </div>\n\n            <div className=\"mw-xs list-div\">\n              <div className=\"mb-2\">\n                {intl.formatMessage(messages['learn.lockPaywall.list.intro'])}\n              </div>\n              <ul className=\"fa-ul ml-4 pl-2\">\n                <VerifiedCertBullet />\n                <UnlockGradedBullet />\n                <FullAccessBullet />\n                <SupportMissionBullet />\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        {pastExpirationDeadline\n          ? null\n          : (\n            <div\n              className={\n                classNames('d-flex flex-column align-items-md-center text-right justify-content-center', {\n                  'col-md-4 mx-md-3': !shouldDisplayGatedContentTwoColumnsHalf, 'col-md-6': shouldDisplayGatedContentTwoColumnsHalf,\n                })\n              }\n            >\n              <UpgradeButton\n                offer={offer}\n                onClick={() => handleUpgradeClick(eventProperties, userId)}\n                verifiedMode={verifiedMode}\n                style={{ whiteSpace: shouldWrapTextOnButton ? 'nowrap' : null }}\n                data-testid=\"upgrade-button\"\n              />\n            </div>\n          )}\n      </div>\n    </Alert>\n  );\n};\nLockPaywall.propTypes = {\n  courseId: PropTypes.string.isRequired,\n};\n\nexport default LockPaywall;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"LockPaywall.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_i18n","_paragon","_icons","_messages","_edX_locked_certificate","_modelStore","_upgradeButton","_auth","_analytics","_upsellBullets","_cohesion","_subscriptionUpsell","_SubscriptionPaywall","_jsxRuntime","e","__esModule","default","ownKeys","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_toPropertyKey","value","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","LockPaywall","_ref","courseId","intl","useIntl","course","useModel","accessExpiration","marketingUrl","offer","org","verifiedMode","conversion","useCohesion","subscriptionOffer","useSubscriptionOffer","shouldDisplayGatedContentTwoColumnsHalf","useWindowSize","width","breakpoints","large","minWidth","shouldWrapTextOnButton","extraSmall","accessExpirationDate","Date","expirationDate","pastExpirationDeadline","now","eventProperties","org_key","courserun_key","handleUpgradeClick","sendTrackEvent","linkCategory","linkName","linkType","pageName","handleSubscribeClick","canSubscribe","canUpgradeInPlace","jsx","onSubscribeClick","onUpgradeEvent","stage","userId","getAuthenticatedUser","handleUpgradeClickPastExpiration","Alert","variant","icon","Locked","className","children","jsxs","formatMessage","messages","Hyperlink","destination","onClick","target","id","defaultMessage","description","classNames","style","float","alt","src","certificateLocked","height","VerifiedCertBullet","UnlockGradedBullet","FullAccessBullet","SupportMissionBullet","UpgradeButton","whiteSpace","propTypes","PropTypes","string","isRequired","_default","exports"],"sources":["../../src/paywall/LockPaywall.jsx"],"sourcesContent":["/* eslint import/no-unresolved: 0 */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport {\n  Alert, breakpoints, Hyperlink, useWindowSize,\n} from '@openedx/paragon';\nimport { Locked } from '@openedx/paragon/icons';\nimport messages from '@src/courseware/course/sequence/lock-paywall/messages';\nimport certificateLocked from '@src/generic/assets/edX_locked_certificate.png';\nimport { useModel } from '@src/generic/model-store';\nimport { UpgradeButton } from '@src/generic/upgrade-button';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\n\nimport {\n  VerifiedCertBullet,\n  UnlockGradedBullet,\n  FullAccessBullet,\n  SupportMissionBullet,\n} from '../generic/upsell-bullets';\nimport { useCohesion } from '../cohesion';\nimport { useSubscriptionOffer } from '../subscription-upsell';\nimport SubscriptionPaywall from './SubscriptionPaywall';\n\nconst LockPaywall = ({\n  courseId,\n}) => {\n  const intl = useIntl();\n  const course = useModel('coursewareMeta', courseId);\n  const {\n    accessExpiration,\n    marketingUrl,\n    offer,\n  } = course;\n\n  const {\n    org, verifiedMode,\n  } = useModel('courseHomeMeta', courseId);\n\n  const { conversion } = useCohesion(courseId);\n  const subscriptionOffer = useSubscriptionOffer(courseId);\n\n  // the following variables are set and used for responsive layout to work with\n  // whether the NotificationTray is open or not and if there's an offer with longer text\n  const shouldDisplayGatedContentTwoColumnsHalf = useWindowSize().width <= breakpoints.large.minWidth;\n  const shouldWrapTextOnButton = useWindowSize().width > breakpoints.extraSmall.minWidth;\n\n  const accessExpirationDate = accessExpiration ? new Date(accessExpiration.expirationDate) : null;\n  const pastExpirationDeadline = accessExpiration ? new Date(Date.now()) > accessExpirationDate : false;\n\n  if (!verifiedMode) {\n    return null;\n  }\n\n  const eventProperties = {\n    org_key: org,\n    courserun_key: courseId,\n  };\n\n  const handleUpgradeClick = () => {\n    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {\n      ...eventProperties,\n      linkCategory: '(none)',\n      linkName: 'in_course_upgrade',\n      linkType: 'link',\n      pageName: 'in_course',\n    });\n\n    conversion('Upgraded');\n  };\n\n  const handleSubscribeClick = () => {\n    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {\n      ...eventProperties,\n      linkCategory: '(none)',\n      linkName: 'in_course_subscribe',\n      linkType: 'link',\n      pageName: 'in_course',\n    });\n    conversion('Subscribe Clicked'); // on the click, before checkout\n  };\n\n  // Learners who can subscribe get the Subscribe banner (Figma shows Subscribe only) and subscribers\n  // get the same banner with Upgrade now. Unknown status keeps the paywall below.\n  if (!pastExpirationDeadline && (subscriptionOffer?.canSubscribe || subscriptionOffer?.canUpgradeInPlace)) {\n    return (\n      <SubscriptionPaywall\n        courseId={courseId}\n        offer={subscriptionOffer}\n        onSubscribeClick={handleSubscribeClick}\n        onUpgradeEvent={(stage) => stage === 'succeeded' && handleUpgradeClick()}\n      />\n    );\n  }\n\n  const { userId } = getAuthenticatedUser();\n\n  const handleUpgradeClickPastExpiration = () => {\n    sendTrackEvent('edx.bi.ecommerce.gated_content.past_expiration.link_clicked', {\n      ...eventProperties,\n      linkCategory: 'gated_content',\n      linkName: 'course_details',\n      linkType: 'link',\n      pageName: 'in_course',\n    });\n  };\n\n  return (\n    <Alert variant=\"light\" aria-live=\"off\" icon={Locked} className=\"lock-paywall-container\" data-testid=\"lock-paywall-lock-paywall-test-id\">\n      <div className=\"row\">\n        <div className=\"col\">\n          <h4 aria-level=\"3\">\n            <span>{intl.formatMessage(messages['learn.lockPaywall.title'])}</span>\n          </h4>\n          {pastExpirationDeadline ? (\n            <div className=\"mb-2 upgrade-intro\" data-testid=\"lock-paywall-past-expiration\">\n              {intl.formatMessage(messages['learn.lockPaywall.content.pastExpiration'])}\n              <Hyperlink\n                destination={marketingUrl}\n                onClick={handleUpgradeClickPastExpiration(eventProperties)}\n                target=\"_blank\"\n                data-testid=\"lock-paywall-past-expiration-link\"\n              >\n                {intl.formatMessage(messages['learn.lockPaywall.courseDetails'])}\n                <span>\n                  {intl.formatMessage({\n                    id: 'learn.lockPaywall.content.link.new-tab.screenreader-only.message',\n                    defaultMessage: 'in a new tab',\n                    description: 'Screenreader only text for new tab link',\n                  })}\n                </span>\n              </Hyperlink>\n            </div>\n          ) : (\n            <div className=\"mb-2 upgrade-intro\">\n              {intl.formatMessage(messages['learn.lockPaywall.content'])}\n            </div>\n          )}\n\n          <div className={classNames('d-inline-flex flex-row', { 'flex-wrap': shouldDisplayGatedContentTwoColumnsHalf })}>\n            <div style={{ float: 'left' }} className=\"mr-3 mb-2\">\n              <img\n                alt={intl.formatMessage(messages['learn.lockPaywall.example.alt'])}\n                src={certificateLocked}\n                className=\"border-0 certificate-image-banner\"\n                style={{ height: '128px', width: '175px' }}\n              />\n            </div>\n\n            <div className=\"mw-xs list-div\">\n              <div className=\"mb-2\">\n                {intl.formatMessage(messages['learn.lockPaywall.list.intro'])}\n              </div>\n              <ul className=\"fa-ul ml-4 pl-2\">\n                <VerifiedCertBullet />\n                <UnlockGradedBullet />\n                <FullAccessBullet />\n                <SupportMissionBullet />\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        {pastExpirationDeadline\n          ? null\n          : (\n            <div\n              className={\n                classNames('d-flex flex-column align-items-md-center text-right justify-content-center', {\n                  'col-md-4 mx-md-3': !shouldDisplayGatedContentTwoColumnsHalf, 'col-md-6': shouldDisplayGatedContentTwoColumnsHalf,\n                })\n              }\n            >\n              <UpgradeButton\n                offer={offer}\n                onClick={() => handleUpgradeClick(eventProperties, userId)}\n                verifiedMode={verifiedMode}\n                style={{ whiteSpace: shouldWrapTextOnButton ? 'nowrap' : null }}\n                data-testid=\"upgrade-button\"\n              />\n            </div>\n          )}\n      </div>\n    </Alert>\n  );\n};\nLockPaywall.propTypes = {\n  courseId: PropTypes.string.isRequired,\n};\n\nexport default LockPaywall;\n"],"mappings":"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","ignoreList":[]}

package/dist/paywall/SubscriptionPaywall.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _i18n = require("@edx/frontend-platform/i18n");
+var _paragon = require("@openedx/paragon");
+var _icons = require("@openedx/paragon/icons");
+var _messages = _interopRequireDefault(require("@src/courseware/course/sequence/lock-paywall/messages"));
+var _edX_locked_certificate = _interopRequireDefault(require("@src/generic/assets/edX_locked_certificate.png"));
+var _upsellBullets = require("../generic/upsell-bullets");
+var _subscriptionUpsell = require("../subscription-upsell");
+var _messages2 = _interopRequireDefault(require("../subscription-upsell/messages"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint import/no-unresolved: 0 */
+
+/** The locked graded content banner (Figma 3484-70965): Subscribe, or Upgrade now for a subscriber. */const SubscriptionPaywall = _ref => {
+  let {
+    courseId,
+    offer,
+    onSubscribeClick,
+    onUpgradeEvent
+  } = _ref;
+  const {
+    formatMessage
+  } = (0, _i18n.useIntl)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Alert, {
+    variant: "light",
+    "aria-live": "off",
+    icon: _icons.Locked,
+    className: "bg-light-200 border-0 shadow-sm p-4",
+    "data-testid": "subscription-paywall",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.Stack, {
+      direction: "horizontal",
+      gap: 4,
+      className: "flex-column flex-md-row align-items-start align-items-md-center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.Stack, {
+        gap: 2,
+        className: "flex-grow-1",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Alert.Heading, {
+          as: "h3",
+          className: "h6 font-weight-bold text-primary-500 mb-0",
+          children: formatMessage(_messages.default['learn.lockPaywall.title'])
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "mb-0",
+          children: formatMessage(_messages.default['learn.lockPaywall.content'])
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.Stack, {
+          direction: "horizontal",
+          gap: 3,
+          className: "flex-wrap",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Image, {
+            src: _edX_locked_certificate.default,
+            alt: formatMessage(_messages.default['learn.lockPaywall.example.alt']),
+            width: 175,
+            height: 128
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.Stack, {
+            gap: 2,
+            role: "list",
+            className: "align-self-center upsell-bullets",
+            style: {
+              flex: '1 1 16rem'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.VerifiedCertBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.UnlockGradedBullet, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_upsellBullets.FullAccessBullet, {})]
+          })]
+        })]
+      }), offer.canUpgradeInPlace ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_subscriptionUpsell.SubscriptionUpsell, {
+        courseId: courseId,
+        className: "flex-shrink-0",
+        onUpgradeEvent: onUpgradeEvent
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Button, {
+        variant: "primary",
+        size: "sm",
+        className: "rounded-pill",
+        href: offer.subscribeUrl,
+        onClick: onSubscribeClick,
+        children: formatMessage(_messages2.default.subscribe)
+      })]
+    })
+  });
+};
+SubscriptionPaywall.propTypes = {
+  courseId: _propTypes.default.string.isRequired,
+  offer: _propTypes.default.shape({
+    canUpgradeInPlace: _propTypes.default.bool,
+    subscribeUrl: _propTypes.default.string
+  }).isRequired,
+  onSubscribeClick: _propTypes.default.func,
+  onUpgradeEvent: _propTypes.default.func
+};
+SubscriptionPaywall.defaultProps = {
+  onSubscribeClick: undefined,
+  onUpgradeEvent: undefined
+};
+var _default = exports.default = SubscriptionPaywall;
+//# sourceMappingURL=SubscriptionPaywall.js.map

package/dist/paywall/SubscriptionPaywall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionPaywall.js","names":["_react","_interopRequireDefault","require","_propTypes","_i18n","_paragon","_icons","_messages","_edX_locked_certificate","_upsellBullets","_subscriptionUpsell","_messages2","_jsxRuntime","e","__esModule","default","SubscriptionPaywall","_ref","courseId","offer","onSubscribeClick","onUpgradeEvent","formatMessage","useIntl","jsx","Alert","variant","icon","Locked","className","children","jsxs","Stack","direction","gap","Heading","as","lockPaywallMessages","Image","src","certificateLocked","alt","width","height","role","style","flex","VerifiedCertBullet","UnlockGradedBullet","FullAccessBullet","canUpgradeInPlace","SubscriptionUpsell","Button","size","href","subscribeUrl","onClick","subscriptionMessages","subscribe","propTypes","PropTypes","string","isRequired","shape","bool","func","defaultProps","undefined","_default","exports"],"sources":["../../src/paywall/SubscriptionPaywall.jsx"],"sourcesContent":["/* eslint import/no-unresolved: 0 */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport {\n  Alert, Button, Image, Stack,\n} from '@openedx/paragon';\nimport { Locked } from '@openedx/paragon/icons';\nimport lockPaywallMessages from '@src/courseware/course/sequence/lock-paywall/messages';\nimport certificateLocked from '@src/generic/assets/edX_locked_certificate.png';\n\nimport { VerifiedCertBullet, UnlockGradedBullet, FullAccessBullet } from '../generic/upsell-bullets';\nimport { SubscriptionUpsell } from '../subscription-upsell';\nimport subscriptionMessages from '../subscription-upsell/messages';\n\n/** The locked graded content banner (Figma 3484-70965): Subscribe, or Upgrade now for a subscriber. */\nconst SubscriptionPaywall = ({\n  courseId, offer, onSubscribeClick, onUpgradeEvent,\n}) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Alert\n      variant=\"light\"\n      aria-live=\"off\"\n      icon={Locked}\n      className=\"bg-light-200 border-0 shadow-sm p-4\"\n      data-testid=\"subscription-paywall\"\n    >\n      {/* The button is not in Alert's actions: elm-theme turns primary buttons there into brand (orange) buttons. */}\n      <Stack\n        direction=\"horizontal\"\n        gap={4}\n        className=\"flex-column flex-md-row align-items-start align-items-md-center\"\n      >\n        <Stack gap={2} className=\"flex-grow-1\">\n          <Alert.Heading as=\"h3\" className=\"h6 font-weight-bold text-primary-500 mb-0\">\n            {formatMessage(lockPaywallMessages['learn.lockPaywall.title'])}\n          </Alert.Heading>\n          <p className=\"mb-0\">{formatMessage(lockPaywallMessages['learn.lockPaywall.content'])}</p>\n          <Stack direction=\"horizontal\" gap={3} className=\"flex-wrap\">\n            <Image\n              src={certificateLocked}\n              alt={formatMessage(lockPaywallMessages['learn.lockPaywall.example.alt'])}\n              width={175}\n              height={128}\n            />\n            {/* Let the bullet text wrap before the whole list drops under the image. */}\n            <Stack gap={2} role=\"list\" className=\"align-self-center upsell-bullets\" style={{ flex: '1 1 16rem' }}>\n              <VerifiedCertBullet />\n              <UnlockGradedBullet />\n              <FullAccessBullet />\n            </Stack>\n          </Stack>\n        </Stack>\n        {offer.canUpgradeInPlace ? (\n          <SubscriptionUpsell courseId={courseId} className=\"flex-shrink-0\" onUpgradeEvent={onUpgradeEvent} />\n        ) : (\n          <Button variant=\"primary\" size=\"sm\" className=\"rounded-pill\" href={offer.subscribeUrl} onClick={onSubscribeClick}>\n            {formatMessage(subscriptionMessages.subscribe)}\n          </Button>\n        )}\n      </Stack>\n    </Alert>\n  );\n};\n\nSubscriptionPaywall.propTypes = {\n  courseId: PropTypes.string.isRequired,\n  offer: PropTypes.shape({\n    canUpgradeInPlace: PropTypes.bool,\n    subscribeUrl: PropTypes.string,\n  }).isRequired,\n  onSubscribeClick: PropTypes.func,\n  onUpgradeEvent: PropTypes.func,\n};\n\nSubscriptionPaywall.defaultProps = {\n  onSubscribeClick: undefined,\n  onUpgradeEvent: undefined,\n};\n\nexport default SubscriptionPaywall;\n"],"mappings":"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","ignoreList":[]}

package/dist/subscription-upsell/SubscriptionUpgradeCard.js

@@ -12,10 +12,11 @@ var _i18n = require("@edx/frontend-platform/i18n");
 var _paragon = require("@openedx/paragon");
 var _icons = require("@openedx/paragon/icons");
 var _certificatePreview = _interopRequireDefault(require("../upgrade-notification/certificate-preview"));
+var _messages = _interopRequireDefault(require("../upgrade-notification/messages"));
 require("../generic/upsell-bullets/UpsellTable.scss");
 var _SubscriptionUpsell = _interopRequireDefault(require("./SubscriptionUpsell"));
 var _useSubscriptionOffer = _interopRequireDefault(require("./useSubscriptionOffer"));
-var _messages = _interopRequireDefault(require("./messages"));
+var _messages2 = _interopRequireDefault(require("./messages"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint import/no-unresolved: 0 */
@@ -27,13 +28,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     onSubscribeClick,
     onPurchaseClick,
     onUpgradeEvent,
-    onUpgraded
+    onUpgraded,
+    onClose,
+    banner
   } = _ref;
   const {
     formatMessage
   } = (0, _i18n.useIntl)();
   const offer = (0, _useSubscriptionOffer.default)(courseId);
-  if (!offer || !offer.canPurchase && !offer.canSubscribe && !offer.canUpgradeInPlace) {
+  if (!offer?.hasUpsell) {
     return null;
   }
   const {
@@ -42,11 +45,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   } = offer;
   const included = /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Icon, {
     src: _icons.CheckCircle,
-    screenReaderText: formatMessage(_messages.default.includedAlt)
+    screenReaderText: formatMessage(_messages2.default.includedAlt)
   });
   const notIncluded = /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Icon, {
     src: _icons.CloseSmall,
-    screenReaderText: formatMessage(_messages.default.notIncludedAlt)
+    screenReaderText: formatMessage(_messages2.default.notIncludedAlt)
   });
 
   // Columns follow the buttons; a subscriber gets Upgrade now and nothing to compare.
@@ -55,45 +58,57 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   const showTable = !offer.canUpgradeInPlace && (showSubscribeColumn || showBuyColumn);
   const rows = [showSubscribeColumn && offer.hasTrial && {
     key: 'free-trial',
-    label: formatMessage(_messages.default.featureFreeTrial),
+    label: formatMessage(_messages2.default.featureFreeTrial),
     buy: false
   }, showSubscribeColumn && {
     key: 'change-courses',
-    label: formatMessage(_messages.default.featureChangeCourses),
+    label: formatMessage(_messages2.default.featureChangeCourses),
     buy: false
   }, {
     key: 'certificates',
-    label: formatMessage(_messages.default.featureCertificates, {
+    label: formatMessage(_messages2.default.featureCertificates, {
       certificateLink: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Hyperlink, {
         destination: `${(0, _frontendPlatform.getConfig)().MARKETING_SITE_BASE_URL}/verified-certificate`,
-        children: formatMessage(_messages.default.featureCertificatesLink)
+        children: formatMessage(_messages2.default.featureCertificatesLink)
       })
     }),
     buy: true
   }, {
     key: 'graded-assignments',
-    label: formatMessage(_messages.default.featureGradedAssignments),
+    label: formatMessage(_messages2.default.featureGradedAssignments),
     buy: true
   }, {
     key: 'unlimited-access',
-    label: formatMessage(_messages.default.featureUnlimitedAccess),
+    label: formatMessage(_messages2.default.featureUnlimitedAccess),
     buy: true
   }].filter(Boolean);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
     className: (0, _classnames.default)('upgrade-notification subscription-upgrade-card small', {
       'pgn__card pgn__card-light card mb-4 rounded': withBorder
     }),
+    id: "courseHome-upgradeNotification",
     "data-testid": "subscription-upgrade-card",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-      className: "upgrade-notification-header h4 px-4 pt-4 mb-3",
-      children: formatMessage(_messages.default.cardHeader)
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.Stack, {
+      direction: "horizontal",
+      className: "align-items-start px-4 pt-4 mb-3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: "upgrade-notification-header h4 mb-0",
+        children: formatMessage(_messages2.default.cardHeader)
+      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.IconButton, {
+        className: "ml-auto",
+        src: _icons.Close,
+        iconAs: _paragon.Icon,
+        size: "sm",
+        alt: formatMessage(_messages.default.closeAlt),
+        onClick: onClose
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_certificatePreview.default, {
       courseId: courseId
-    }), showTable && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), banner, showTable && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "px-4 small",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
         className: "mb-4 primary-500",
-        children: formatMessage(_messages.default.benefitsHeader)
+        children: formatMessage(_messages2.default.benefitsHeader)
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
         className: "w-100 text-center subscription-comparison-table",
         "data-testid": "subscription-card-table",
@@ -103,7 +118,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
               scope: "col",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "sr-only",
-                children: formatMessage(_messages.default.featureColumn)
+                children: formatMessage(_messages2.default.featureColumn)
               })
             }), showBuyColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
               scope: "col",
@@ -112,7 +127,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "center-items flex-column",
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  children: formatMessage(_messages.default.buyColumn)
+                  children: formatMessage(_messages2.default.buyColumn)
                 }), coursePrice && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   children: coursePrice
                 })]
@@ -124,7 +139,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "center-items flex-column",
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  children: formatMessage(_messages.default.subscribeColumn)
+                  children: formatMessage(_messages2.default.subscribeColumn)
                 }), subscribePrice && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "font-weight-normal",
                   children: subscribePrice
@@ -180,14 +195,20 @@ SubscriptionUpgradeCard.propTypes = {
   onSubscribeClick: _propTypes.default.func,
   onPurchaseClick: _propTypes.default.func,
   onUpgradeEvent: _propTypes.default.func,
-  onUpgraded: _propTypes.default.func
+  onUpgraded: _propTypes.default.func,
+  // The courseware sidebar widget passes its toggle so the card can close it.
+  onClose: _propTypes.default.func,
+  // Host content shown under the certificate preview, such as the access expiration countdown.
+  banner: _propTypes.default.node
 };
 SubscriptionUpgradeCard.defaultProps = {
   withBorder: false,
   onSubscribeClick: undefined,
   onPurchaseClick: undefined,
   onUpgradeEvent: undefined,
-  onUpgraded: undefined
+  onUpgraded: undefined,
+  onClose: undefined,
+  banner: undefined
 };
 var _default = exports.default = SubscriptionUpgradeCard;
 //# sourceMappingURL=SubscriptionUpgradeCard.js.map

package/dist/subscription-upsell/SubscriptionUpgradeCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionUpgradeCard.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_frontendPlatform","_i18n","_paragon","_icons","_certificatePreview","_SubscriptionUpsell","_useSubscriptionOffer","_messages","_jsxRuntime","e","__esModule","default","SubscriptionUpgradeCard","_ref","courseId","withBorder","onSubscribeClick","onPurchaseClick","onUpgradeEvent","onUpgraded","formatMessage","useIntl","offer","useSubscriptionOffer","canPurchase","canSubscribe","canUpgradeInPlace","coursePrice","subscribePrice","included","jsx","Icon","src","CheckCircle","screenReaderText","messages","includedAlt","notIncluded","CloseSmall","notIncludedAlt","showSubscribeColumn","showBuyColumn","showTable","rows","hasTrial","key","label","featureFreeTrial","buy","featureChangeCourses","featureCertificates","certificateLink","Hyperlink","destination","getConfig","MARKETING_SITE_BASE_URL","children","featureCertificatesLink","featureGradedAssignments","featureUnlimitedAccess","filter","Boolean","jsxs","className","classNames","cardHeader","benefitsHeader","scope","featureColumn","buyColumn","subscribeColumn","map","row","index","last","length","propTypes","PropTypes","string","isRequired","bool","func","defaultProps","undefined","_default","exports"],"sources":["../../src/subscription-upsell/SubscriptionUpgradeCard.jsx"],"sourcesContent":["/* eslint import/no-unresolved: 0 */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Hyperlink, Icon } from '@openedx/paragon';\nimport { CheckCircle, CloseSmall } from '@openedx/paragon/icons';\n\nimport CertificatePreview from '../upgrade-notification/certificate-preview';\nimport '../generic/upsell-bullets/UpsellTable.scss';\nimport SubscriptionUpsell from './SubscriptionUpsell';\nimport useSubscriptionOffer from './useSubscriptionOffer';\nimport messages from './messages';\n\n/** The sidebar card (Figma 3331-33999): certificate preview, Buy vs Subscribe table, buttons. */\nconst SubscriptionUpgradeCard = ({\n  courseId,\n  withBorder,\n  onSubscribeClick,\n  onPurchaseClick,\n  onUpgradeEvent,\n  onUpgraded,\n}) => {\n  const { formatMessage } = useIntl();\n  const offer = useSubscriptionOffer(courseId);\n\n  if (!offer || (!offer.canPurchase && !offer.canSubscribe && !offer.canUpgradeInPlace)) {\n    return null;\n  }\n\n  const { coursePrice, subscribePrice } = offer;\n  const included = <Icon src={CheckCircle} screenReaderText={formatMessage(messages.includedAlt)} />;\n  const notIncluded = <Icon src={CloseSmall} screenReaderText={formatMessage(messages.notIncludedAlt)} />;\n\n  // Columns follow the buttons; a subscriber gets Upgrade now and nothing to compare.\n  const showSubscribeColumn = offer.canSubscribe;\n  const showBuyColumn = offer.canPurchase;\n  const showTable = !offer.canUpgradeInPlace && (showSubscribeColumn || showBuyColumn);\n\n  const rows = [\n    showSubscribeColumn && offer.hasTrial\n      && { key: 'free-trial', label: formatMessage(messages.featureFreeTrial), buy: false },\n    showSubscribeColumn\n      && { key: 'change-courses', label: formatMessage(messages.featureChangeCourses), buy: false },\n    {\n      key: 'certificates',\n      label: formatMessage(messages.featureCertificates, {\n        certificateLink: (\n          <Hyperlink destination={`${getConfig().MARKETING_SITE_BASE_URL}/verified-certificate`}>\n            {formatMessage(messages.featureCertificatesLink)}\n          </Hyperlink>\n        ),\n      }),\n      buy: true,\n    },\n    { key: 'graded-assignments', label: formatMessage(messages.featureGradedAssignments), buy: true },\n    { key: 'unlimited-access', label: formatMessage(messages.featureUnlimitedAccess), buy: true },\n  ].filter(Boolean);\n\n  return (\n    <section\n      className={classNames('upgrade-notification subscription-upgrade-card small', {\n        'pgn__card pgn__card-light card mb-4 rounded': withBorder,\n      })}\n      data-testid=\"subscription-upgrade-card\"\n    >\n      <h2 className=\"upgrade-notification-header h4 px-4 pt-4 mb-3\">{formatMessage(messages.cardHeader)}</h2>\n      <CertificatePreview courseId={courseId} />\n      {showTable && (\n        <div className=\"px-4 small\">\n          <h3 className=\"mb-4 primary-500\">{formatMessage(messages.benefitsHeader)}</h3>\n          <table className=\"w-100 text-center subscription-comparison-table\" data-testid=\"subscription-card-table\">\n            <thead>\n              <tr>\n                <th scope=\"col\"><span className=\"sr-only\">{formatMessage(messages.featureColumn)}</span></th>\n                {showBuyColumn && (\n                  <th scope=\"col\" className=\"audit-cell top-audit-border font-weight-normal\" data-testid=\"subscription-card-buy-header\">\n                    <div className=\"center-items flex-column\">\n                      <span>{formatMessage(messages.buyColumn)}</span>\n                      {coursePrice && <span>{coursePrice}</span>}\n                    </div>\n                  </th>\n                )}\n                {showSubscribeColumn && (\n                  <th scope=\"col\" className=\"verified-cell top-verified-border\" data-testid=\"subscription-card-subscribe-header\">\n                    <div className=\"center-items flex-column\">\n                      <span>{formatMessage(messages.subscribeColumn)}</span>\n                      {subscribePrice && <span className=\"font-weight-normal\">{subscribePrice}</span>}\n                    </div>\n                  </th>\n                )}\n              </tr>\n            </thead>\n            <tbody>\n              {rows.map((row, index) => {\n                const last = index === rows.length - 1;\n                return (\n                  <tr key={row.key} data-testid={`subscription-card-row-${row.key}`}>\n                    <th scope=\"row\" className={classNames('feature-cell text-left font-weight-normal', { 'bottom-no-border': last })}>\n                      {row.label}\n                    </th>\n                    {showBuyColumn && (\n                      <td className={classNames('audit-cell', { 'bottom-audit-border': last })}>\n                        <div className=\"center-items\">{row.buy ? included : notIncluded}</div>\n                      </td>\n                    )}\n                    {showSubscribeColumn && (\n                      <td className={classNames('verified-cell', { 'bottom-verified-border': last })}>\n                        <div className=\"center-items\">{included}</div>\n                      </td>\n                    )}\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n        </div>\n      )}\n      <SubscriptionUpsell\n        courseId={courseId}\n        className=\"px-4 pb-4 pt-3\"\n        onSubscribeClick={onSubscribeClick}\n        onPurchaseClick={onPurchaseClick}\n        onUpgradeEvent={onUpgradeEvent}\n        onUpgraded={onUpgraded}\n      />\n    </section>\n  );\n};\n\nSubscriptionUpgradeCard.propTypes = {\n  courseId: PropTypes.string.isRequired,\n  withBorder: PropTypes.bool,\n  onSubscribeClick: PropTypes.func,\n  onPurchaseClick: PropTypes.func,\n  onUpgradeEvent: PropTypes.func,\n  onUpgraded: PropTypes.func,\n};\n\nSubscriptionUpgradeCard.defaultProps = {\n  withBorder: false,\n  onSubscribeClick: undefined,\n  onPurchaseClick: undefined,\n  onUpgradeEvent: undefined,\n  onUpgraded: undefined,\n};\n\nexport default SubscriptionUpgradeCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SubscriptionUpgradeCard.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_frontendPlatform","_i18n","_paragon","_icons","_certificatePreview","_messages","_SubscriptionUpsell","_useSubscriptionOffer","_messages2","_jsxRuntime","e","__esModule","default","SubscriptionUpgradeCard","_ref","courseId","withBorder","onSubscribeClick","onPurchaseClick","onUpgradeEvent","onUpgraded","onClose","banner","formatMessage","useIntl","offer","useSubscriptionOffer","hasUpsell","coursePrice","subscribePrice","included","jsx","Icon","src","CheckCircle","screenReaderText","messages","includedAlt","notIncluded","CloseSmall","notIncludedAlt","showSubscribeColumn","canSubscribe","showBuyColumn","canPurchase","showTable","canUpgradeInPlace","rows","hasTrial","key","label","featureFreeTrial","buy","featureChangeCourses","featureCertificates","certificateLink","Hyperlink","destination","getConfig","MARKETING_SITE_BASE_URL","children","featureCertificatesLink","featureGradedAssignments","featureUnlimitedAccess","filter","Boolean","jsxs","className","classNames","id","Stack","direction","cardHeader","IconButton","Close","iconAs","size","alt","upgradeNotificationMessages","closeAlt","onClick","benefitsHeader","scope","featureColumn","buyColumn","subscribeColumn","map","row","index","last","length","propTypes","PropTypes","string","isRequired","bool","func","node","defaultProps","undefined","_default","exports"],"sources":["../../src/subscription-upsell/SubscriptionUpgradeCard.jsx"],"sourcesContent":["/* eslint import/no-unresolved: 0 */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport {\n  Hyperlink, Icon, IconButton, Stack,\n} from '@openedx/paragon';\nimport { CheckCircle, Close, CloseSmall } from '@openedx/paragon/icons';\n\nimport CertificatePreview from '../upgrade-notification/certificate-preview';\nimport upgradeNotificationMessages from '../upgrade-notification/messages';\nimport '../generic/upsell-bullets/UpsellTable.scss';\nimport SubscriptionUpsell from './SubscriptionUpsell';\nimport useSubscriptionOffer from './useSubscriptionOffer';\nimport messages from './messages';\n\n/** The sidebar card (Figma 3331-33999): certificate preview, Buy vs Subscribe table, buttons. */\nconst SubscriptionUpgradeCard = ({\n  courseId,\n  withBorder,\n  onSubscribeClick,\n  onPurchaseClick,\n  onUpgradeEvent,\n  onUpgraded,\n  onClose,\n  banner,\n}) => {\n  const { formatMessage } = useIntl();\n  const offer = useSubscriptionOffer(courseId);\n\n  if (!offer?.hasUpsell) {\n    return null;\n  }\n\n  const { coursePrice, subscribePrice } = offer;\n  const included = <Icon src={CheckCircle} screenReaderText={formatMessage(messages.includedAlt)} />;\n  const notIncluded = <Icon src={CloseSmall} screenReaderText={formatMessage(messages.notIncludedAlt)} />;\n\n  // Columns follow the buttons; a subscriber gets Upgrade now and nothing to compare.\n  const showSubscribeColumn = offer.canSubscribe;\n  const showBuyColumn = offer.canPurchase;\n  const showTable = !offer.canUpgradeInPlace && (showSubscribeColumn || showBuyColumn);\n\n  const rows = [\n    showSubscribeColumn && offer.hasTrial\n      && { key: 'free-trial', label: formatMessage(messages.featureFreeTrial), buy: false },\n    showSubscribeColumn\n      && { key: 'change-courses', label: formatMessage(messages.featureChangeCourses), buy: false },\n    {\n      key: 'certificates',\n      label: formatMessage(messages.featureCertificates, {\n        certificateLink: (\n          <Hyperlink destination={`${getConfig().MARKETING_SITE_BASE_URL}/verified-certificate`}>\n            {formatMessage(messages.featureCertificatesLink)}\n          </Hyperlink>\n        ),\n      }),\n      buy: true,\n    },\n    { key: 'graded-assignments', label: formatMessage(messages.featureGradedAssignments), buy: true },\n    { key: 'unlimited-access', label: formatMessage(messages.featureUnlimitedAccess), buy: true },\n  ].filter(Boolean);\n\n  return (\n    <section\n      className={classNames('upgrade-notification subscription-upgrade-card small', {\n        'pgn__card pgn__card-light card mb-4 rounded': withBorder,\n      })}\n      id=\"courseHome-upgradeNotification\"\n      data-testid=\"subscription-upgrade-card\"\n    >\n      <Stack direction=\"horizontal\" className=\"align-items-start px-4 pt-4 mb-3\">\n        <h2 className=\"upgrade-notification-header h4 mb-0\">{formatMessage(messages.cardHeader)}</h2>\n        {onClose && (\n          <IconButton\n            className=\"ml-auto\"\n            src={Close}\n            iconAs={Icon}\n            size=\"sm\"\n            alt={formatMessage(upgradeNotificationMessages.closeAlt)}\n            onClick={onClose}\n          />\n        )}\n      </Stack>\n      <CertificatePreview courseId={courseId} />\n      {banner}\n      {showTable && (\n        <div className=\"px-4 small\">\n          <h3 className=\"mb-4 primary-500\">{formatMessage(messages.benefitsHeader)}</h3>\n          <table className=\"w-100 text-center subscription-comparison-table\" data-testid=\"subscription-card-table\">\n            <thead>\n              <tr>\n                <th scope=\"col\"><span className=\"sr-only\">{formatMessage(messages.featureColumn)}</span></th>\n                {showBuyColumn && (\n                  <th scope=\"col\" className=\"audit-cell top-audit-border font-weight-normal\" data-testid=\"subscription-card-buy-header\">\n                    <div className=\"center-items flex-column\">\n                      <span>{formatMessage(messages.buyColumn)}</span>\n                      {coursePrice && <span>{coursePrice}</span>}\n                    </div>\n                  </th>\n                )}\n                {showSubscribeColumn && (\n                  <th scope=\"col\" className=\"verified-cell top-verified-border\" data-testid=\"subscription-card-subscribe-header\">\n                    <div className=\"center-items flex-column\">\n                      <span>{formatMessage(messages.subscribeColumn)}</span>\n                      {subscribePrice && <span className=\"font-weight-normal\">{subscribePrice}</span>}\n                    </div>\n                  </th>\n                )}\n              </tr>\n            </thead>\n            <tbody>\n              {rows.map((row, index) => {\n                const last = index === rows.length - 1;\n                return (\n                  <tr key={row.key} data-testid={`subscription-card-row-${row.key}`}>\n                    <th scope=\"row\" className={classNames('feature-cell text-left font-weight-normal', { 'bottom-no-border': last })}>\n                      {row.label}\n                    </th>\n                    {showBuyColumn && (\n                      <td className={classNames('audit-cell', { 'bottom-audit-border': last })}>\n                        <div className=\"center-items\">{row.buy ? included : notIncluded}</div>\n                      </td>\n                    )}\n                    {showSubscribeColumn && (\n                      <td className={classNames('verified-cell', { 'bottom-verified-border': last })}>\n                        <div className=\"center-items\">{included}</div>\n                      </td>\n                    )}\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n        </div>\n      )}\n      <SubscriptionUpsell\n        courseId={courseId}\n        className=\"px-4 pb-4 pt-3\"\n        onSubscribeClick={onSubscribeClick}\n        onPurchaseClick={onPurchaseClick}\n        onUpgradeEvent={onUpgradeEvent}\n        onUpgraded={onUpgraded}\n      />\n    </section>\n  );\n};\n\nSubscriptionUpgradeCard.propTypes = {\n  courseId: PropTypes.string.isRequired,\n  withBorder: PropTypes.bool,\n  onSubscribeClick: PropTypes.func,\n  onPurchaseClick: PropTypes.func,\n  onUpgradeEvent: PropTypes.func,\n  onUpgraded: PropTypes.func,\n  // The courseware sidebar widget passes its toggle so the card can close it.\n  onClose: PropTypes.func,\n  // Host content shown under the certificate preview, such as the access expiration countdown.\n  banner: PropTypes.node,\n};\n\nSubscriptionUpgradeCard.defaultProps = {\n  withBorder: false,\n  onSubscribeClick: undefined,\n  onPurchaseClick: undefined,\n  onUpgradeEvent: undefined,\n  onUpgraded: undefined,\n  onClose: undefined,\n  banner: undefined,\n};\n\nexport default SubscriptionUpgradeCard;\n"],"mappings":"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","ignoreList":[]}