@edx/frontend-plugin-advertisements 2.24.2 → 2.25.0

package/dist/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "AccessExpirationAlert", {
     return _accessExpirationAlert.default;
   }
 });
+Object.defineProperty(exports, "CourseExitUpsell", {
+  enumerable: true,
+  get: function () {
+    return _courseExitUpsell.default;
+  }
+});
 Object.defineProperty(exports, "DynamicExperienceSlot", {
   enumerable: true,
   get: function () {
@@ -33,6 +39,30 @@ Object.defineProperty(exports, "SectionList", {
     return _sectionOutline.default;
   }
 });
+Object.defineProperty(exports, "SubscriptionBenefitsModal", {
+  enumerable: true,
+  get: function () {
+    return _subscriptionUpsell.SubscriptionBenefitsModal;
+  }
+});
+Object.defineProperty(exports, "SubscriptionComparisonModal", {
+  enumerable: true,
+  get: function () {
+    return _subscriptionUpsell.SubscriptionComparisonModal;
+  }
+});
+Object.defineProperty(exports, "SubscriptionUpgradeCard", {
+  enumerable: true,
+  get: function () {
+    return _subscriptionUpsell.SubscriptionUpgradeCard;
+  }
+});
+Object.defineProperty(exports, "SubscriptionUpsell", {
+  enumerable: true,
+  get: function () {
+    return _subscriptionUpsell.SubscriptionUpsell;
+  }
+});
 Object.defineProperty(exports, "UclWrapper", {
   enumerable: true,
   get: function () {
@@ -57,15 +87,23 @@ Object.defineProperty(exports, "UpsellBullets", {
     return _generic.UpsellBullets;
   }
 });
+Object.defineProperty(exports, "useSubscriptionOffer", {
+  enumerable: true,
+  get: function () {
+    return _subscriptionUpsell.useSubscriptionOffer;
+  }
+});
 var _upgradeNotification = _interopRequireDefault(require("./upgrade-notification"));
 var _paywall = _interopRequireDefault(require("./paywall"));
 var _upgradeModal = _interopRequireDefault(require("./upgrade-modal"));
 var _accessExpirationAlert = _interopRequireDefault(require("./access-expiration-alert"));
 var _upgradeToCompleteAlert = _interopRequireDefault(require("./upgrade-to-complete-alert"));
+var _courseExitUpsell = _interopRequireDefault(require("./course-exit-upsell"));
 var _generic = require("./generic");
 var _sectionOutline = _interopRequireDefault(require("./section-outline"));
 var _dynamicExperienceSlot = _interopRequireDefault(require("./dynamic-experience-slot"));
 var _uclWrapper = _interopRequireDefault(require("./ucl-wrapper"));
+var _subscriptionUpsell = require("./subscription-upsell");
 require("./index.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_upgradeNotification","_interopRequireDefault","require","_paywall","_upgradeModal","_accessExpirationAlert","_upgradeToCompleteAlert","_generic","_sectionOutline","_dynamicExperienceSlot","_uclWrapper","e","__esModule","default"],"sources":["../src/index.jsx"],"sourcesContent":["import UpgradeNotification from './upgrade-notification';\nimport LockPaywall from './paywall';\nimport NextUnitButton from './upgrade-modal';\nimport AccessExpirationAlert from './access-expiration-alert';\nimport UpgradeToCompleteAlert from './upgrade-to-complete-alert';\nimport { UpsellBullets } from './generic';\nimport SectionList from './section-outline';\nimport DynamicExperienceSlot from './dynamic-experience-slot';\nimport UclWrapper from './ucl-wrapper';\nimport './index.scss';\n\nexport {\n  UpgradeNotification,\n  LockPaywall,\n  NextUnitButton,\n  AccessExpirationAlert,\n  UpgradeToCompleteAlert,\n  UpsellBullets,\n  SectionList,\n  DynamicExperienceSlot,\n  UclWrapper,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,oBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,sBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,uBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,sBAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,WAAA,GAAAT,sBAAA,CAAAC,OAAA;AACAA,OAAA;AAAsB,SAAAD,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_upgradeNotification","_interopRequireDefault","require","_paywall","_upgradeModal","_accessExpirationAlert","_upgradeToCompleteAlert","_courseExitUpsell","_generic","_sectionOutline","_dynamicExperienceSlot","_uclWrapper","_subscriptionUpsell","e","__esModule","default"],"sources":["../src/index.jsx"],"sourcesContent":["import UpgradeNotification from './upgrade-notification';\nimport LockPaywall from './paywall';\nimport NextUnitButton from './upgrade-modal';\nimport AccessExpirationAlert from './access-expiration-alert';\nimport UpgradeToCompleteAlert from './upgrade-to-complete-alert';\nimport CourseExitUpsell from './course-exit-upsell';\nimport { UpsellBullets } from './generic';\nimport SectionList from './section-outline';\nimport DynamicExperienceSlot from './dynamic-experience-slot';\nimport UclWrapper from './ucl-wrapper';\nimport {\n  useSubscriptionOffer,\n  SubscriptionUpsell,\n  SubscriptionUpgradeCard,\n  SubscriptionBenefitsModal,\n  SubscriptionComparisonModal,\n} from './subscription-upsell';\nimport './index.scss';\n\nexport {\n  UpgradeNotification,\n  LockPaywall,\n  NextUnitButton,\n  AccessExpirationAlert,\n  UpgradeToCompleteAlert,\n  CourseExitUpsell,\n  UpsellBullets,\n  SectionList,\n  DynamicExperienceSlot,\n  UclWrapper,\n  useSubscriptionOffer,\n  SubscriptionUpsell,\n  SubscriptionUpgradeCard,\n  SubscriptionBenefitsModal,\n  SubscriptionComparisonModal,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,oBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,sBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,uBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,sBAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,WAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,mBAAA,GAAAV,OAAA;AAOAA,OAAA;AAAsB,SAAAD,uBAAAY,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/dist/subscription-upsell/SubscriptionBenefitsModal.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BENEFITS_MODAL_VARIANT = 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 _useSubscriptionOffer = _interopRequireDefault(require("./useSubscriptionOffer"));
+var _messages = _interopRequireDefault(require("./messages"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint import/no-unresolved: 0 */
+
+const BENEFITS_MODAL_VARIANT = exports.BENEFITS_MODAL_VARIANT = {
+  FREE_TRIAL: 'freeTrial',
+  LAUNCH: 'launch'
+};
+
+/** The benefits pop-up (Figma 3339-7937 free trial, 3482-70647 launch). Nothing opens it yet. */
+const SubscriptionBenefitsModal = _ref => {
+  let {
+    courseId,
+    isOpen,
+    onClose,
+    variant,
+    onSubscribeClick,
+    onPurchaseClick
+  } = _ref;
+  const {
+    formatMessage
+  } = (0, _i18n.useIntl)();
+  const offer = (0, _useSubscriptionOffer.default)(courseId);
+  if (!offer || !offer.canSubscribe) {
+    return null;
+  }
+  const {
+    hasTrial,
+    purchaseUrl,
+    canPurchase,
+    coursePrice
+  } = offer;
+  const isFreeTrial = variant === BENEFITS_MODAL_VARIANT.FREE_TRIAL && hasTrial;
+  const title = formatMessage(isFreeTrial ? _messages.default.modalTitleFreeTrial : _messages.default.modalTitleLaunch);
+  const ctaVariant = isFreeTrial ? 'primary' : 'brand'; // Figma: dark on free trial, brand on launch
+
+  const benefits = [{
+    key: 'certificates',
+    title: formatMessage(_messages.default.benefitCertificatesTitle),
+    body: formatMessage(_messages.default.benefitCertificatesBody)
+  }, {
+    key: 'change-course',
+    title: formatMessage(_messages.default.benefitChangeCourseTitle),
+    body: formatMessage(_messages.default.benefitChangeCourseBody)
+  }, hasTrial && {
+    key: 'trial',
+    title: formatMessage(_messages.default.benefitTrialTitle),
+    body: formatMessage(_messages.default.benefitTrialBody)
+  }].filter(Boolean);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.ModalDialog, {
+    title: title,
+    isOpen: isOpen,
+    onClose: onClose,
+    size: "lg",
+    hasCloseButton: true,
+    isFullscreenOnMobile: true,
+    isOverflowVisible: false,
+    className: "subscription-benefits-modal",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.ModalDialog.Header, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "font-weight-bold mb-2",
+        "data-testid": "subscription-modal-brand",
+        children: formatMessage(_messages.default.brand)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.ModalDialog.Title, {
+        as: "h2",
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "mt-2 mb-0",
+        children: formatMessage(_messages.default.modalSubtitle)
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.ModalDialog.Body, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: "list-unstyled bg-white rounded p-4 mb-0",
+        children: benefits.map(benefit => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: "d-flex mb-3",
+          "data-testid": `subscription-modal-benefit-${benefit.key}`,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Icon, {
+            src: _icons.CheckCircleOutline,
+            className: "mr-2 flex-shrink-0"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "font-weight-bold",
+              children: benefit.title
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: benefit.body
+            })]
+          })]
+        }, benefit.key))
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.ModalDialog.Footer, {
+      className: "flex-column align-items-end",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.ActionRow, {
+        children: [canPurchase && /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Button, {
+          as: "a",
+          href: purchaseUrl,
+          variant: `outline-${ctaVariant}`,
+          onClick: onPurchaseClick,
+          "data-testid": "subscription-modal-purchase-button",
+          children: coursePrice ? formatMessage(_messages.default.earnCertificateFor, {
+            price: coursePrice
+          }) : formatMessage(_messages.default.purchaseNoPrice)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Button, {
+          as: "a",
+          href: offer.subscribeUrl,
+          variant: ctaVariant,
+          onClick: onSubscribeClick,
+          "data-testid": "subscription-modal-subscribe-button",
+          children: formatMessage(_messages.default.continueToCheckout)
+        })]
+      }), isFreeTrial && /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+        className: "mt-1",
+        "data-testid": "subscription-modal-cancel-anytime",
+        children: formatMessage(_messages.default.cancelAnytime)
+      })]
+    })]
+  });
+};
+SubscriptionBenefitsModal.propTypes = {
+  courseId: _propTypes.default.string.isRequired,
+  isOpen: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  variant: _propTypes.default.oneOf(Object.values(BENEFITS_MODAL_VARIANT)),
+  onSubscribeClick: _propTypes.default.func,
+  onPurchaseClick: _propTypes.default.func
+};
+SubscriptionBenefitsModal.defaultProps = {
+  variant: BENEFITS_MODAL_VARIANT.LAUNCH,
+  onSubscribeClick: undefined,
+  onPurchaseClick: undefined
+};
+var _default = exports.default = SubscriptionBenefitsModal;
+//# sourceMappingURL=SubscriptionBenefitsModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionBenefitsModal.js","names":["_react","_interopRequireDefault","require","_propTypes","_i18n","_paragon","_icons","_useSubscriptionOffer","_messages","_jsxRuntime","e","__esModule","default","BENEFITS_MODAL_VARIANT","exports","FREE_TRIAL","LAUNCH","SubscriptionBenefitsModal","_ref","courseId","isOpen","onClose","variant","onSubscribeClick","onPurchaseClick","formatMessage","useIntl","offer","useSubscriptionOffer","canSubscribe","hasTrial","purchaseUrl","canPurchase","coursePrice","isFreeTrial","title","messages","modalTitleFreeTrial","modalTitleLaunch","ctaVariant","benefits","key","benefitCertificatesTitle","body","benefitCertificatesBody","benefitChangeCourseTitle","benefitChangeCourseBody","benefitTrialTitle","benefitTrialBody","filter","Boolean","jsxs","ModalDialog","size","hasCloseButton","isFullscreenOnMobile","isOverflowVisible","className","children","Header","jsx","brand","Title","as","modalSubtitle","Body","map","benefit","Icon","src","CheckCircleOutline","Footer","ActionRow","Button","href","onClick","earnCertificateFor","price","purchaseNoPrice","subscribeUrl","continueToCheckout","cancelAnytime","propTypes","PropTypes","string","isRequired","bool","func","oneOf","Object","values","defaultProps","undefined","_default"],"sources":["../../src/subscription-upsell/SubscriptionBenefitsModal.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  ActionRow, Button, Icon, ModalDialog,\n} from '@openedx/paragon';\nimport { CheckCircleOutline } from '@openedx/paragon/icons';\n\nimport useSubscriptionOffer from './useSubscriptionOffer';\nimport messages from './messages';\n\nexport const BENEFITS_MODAL_VARIANT = {\n  FREE_TRIAL: 'freeTrial',\n  LAUNCH: 'launch',\n};\n\n/** The benefits pop-up (Figma 3339-7937 free trial, 3482-70647 launch). Nothing opens it yet. */\nconst SubscriptionBenefitsModal = ({\n  courseId,\n  isOpen,\n  onClose,\n  variant,\n  onSubscribeClick,\n  onPurchaseClick,\n}) => {\n  const { formatMessage } = useIntl();\n  const offer = useSubscriptionOffer(courseId);\n\n  if (!offer || !offer.canSubscribe) {\n    return null;\n  }\n\n  const {\n    hasTrial, purchaseUrl, canPurchase, coursePrice,\n  } = offer;\n  const isFreeTrial = variant === BENEFITS_MODAL_VARIANT.FREE_TRIAL && hasTrial;\n  const title = formatMessage(isFreeTrial ? messages.modalTitleFreeTrial : messages.modalTitleLaunch);\n  const ctaVariant = isFreeTrial ? 'primary' : 'brand'; // Figma: dark on free trial, brand on launch\n\n  const benefits = [\n    {\n      key: 'certificates',\n      title: formatMessage(messages.benefitCertificatesTitle),\n      body: formatMessage(messages.benefitCertificatesBody),\n    },\n    {\n      key: 'change-course',\n      title: formatMessage(messages.benefitChangeCourseTitle),\n      body: formatMessage(messages.benefitChangeCourseBody),\n    },\n    hasTrial && {\n      key: 'trial',\n      title: formatMessage(messages.benefitTrialTitle),\n      body: formatMessage(messages.benefitTrialBody),\n    },\n  ].filter(Boolean);\n\n  return (\n    <ModalDialog\n      title={title}\n      isOpen={isOpen}\n      onClose={onClose}\n      size=\"lg\"\n      hasCloseButton\n      isFullscreenOnMobile\n      isOverflowVisible={false}\n      className=\"subscription-benefits-modal\"\n    >\n      <ModalDialog.Header>\n        <p className=\"font-weight-bold mb-2\" data-testid=\"subscription-modal-brand\">{formatMessage(messages.brand)}</p>\n        <ModalDialog.Title as=\"h2\">{title}</ModalDialog.Title>\n        <p className=\"mt-2 mb-0\">{formatMessage(messages.modalSubtitle)}</p>\n      </ModalDialog.Header>\n      <ModalDialog.Body>\n        <ul className=\"list-unstyled bg-white rounded p-4 mb-0\">\n          {benefits.map((benefit) => (\n            <li key={benefit.key} className=\"d-flex mb-3\" data-testid={`subscription-modal-benefit-${benefit.key}`}>\n              <Icon src={CheckCircleOutline} className=\"mr-2 flex-shrink-0\" />\n              <div>\n                <div className=\"font-weight-bold\">{benefit.title}</div>\n                <div>{benefit.body}</div>\n              </div>\n            </li>\n          ))}\n        </ul>\n      </ModalDialog.Body>\n      <ModalDialog.Footer className=\"flex-column align-items-end\">\n        <ActionRow>\n          {canPurchase && (\n            <Button\n              as=\"a\"\n              href={purchaseUrl}\n              variant={`outline-${ctaVariant}`}\n              onClick={onPurchaseClick}\n              data-testid=\"subscription-modal-purchase-button\"\n            >\n              {coursePrice\n                ? formatMessage(messages.earnCertificateFor, { price: coursePrice })\n                : formatMessage(messages.purchaseNoPrice)}\n            </Button>\n          )}\n          <Button\n            as=\"a\"\n            href={offer.subscribeUrl}\n            variant={ctaVariant}\n            onClick={onSubscribeClick}\n            data-testid=\"subscription-modal-subscribe-button\"\n          >\n            {formatMessage(messages.continueToCheckout)}\n          </Button>\n        </ActionRow>\n        {isFreeTrial && (\n          <small className=\"mt-1\" data-testid=\"subscription-modal-cancel-anytime\">{formatMessage(messages.cancelAnytime)}</small>\n        )}\n      </ModalDialog.Footer>\n    </ModalDialog>\n  );\n};\n\nSubscriptionBenefitsModal.propTypes = {\n  courseId: PropTypes.string.isRequired,\n  isOpen: PropTypes.bool.isRequired,\n  onClose: PropTypes.func.isRequired,\n  variant: PropTypes.oneOf(Object.values(BENEFITS_MODAL_VARIANT)),\n  onSubscribeClick: PropTypes.func,\n  onPurchaseClick: PropTypes.func,\n};\n\nSubscriptionBenefitsModal.defaultProps = {\n  variant: BENEFITS_MODAL_VARIANT.LAUNCH,\n  onSubscribeClick: undefined,\n  onPurchaseClick: undefined,\n};\n\nexport default SubscriptionBenefitsModal;\n"],"mappings":"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","ignoreList":[]}

package/dist/subscription-upsell/SubscriptionComparisonModal.js

@@ -0,0 +1,248 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _i18n = require("@edx/frontend-platform/i18n");
+var _paragon = require("@openedx/paragon");
+var _icons = require("@openedx/paragon/icons");
+var _useSubscriptionOffer = _interopRequireDefault(require("./useSubscriptionOffer"));
+var _messages = _interopRequireDefault(require("./messages"));
+require("./SubscriptionComparisonModal.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/* eslint import/no-unresolved: 0 */
+
+const SUBSCRIBE = 'subscribe';
+const BUY = 'buy';
+
+/** Subscribe vs Buy course pop-up (Figma 3339-8172); one column at a time on small screens. */
+const SubscriptionComparisonModal = _ref => {
+  let {
+    courseId,
+    isOpen,
+    onClose,
+    onSubscribeClick,
+    onPurchaseClick
+  } = _ref;
+  const {
+    formatMessage
+  } = (0, _i18n.useIntl)();
+  const offer = (0, _useSubscriptionOffer.default)(courseId);
+  const isSmallScreen = (0, _paragon.useWindowSize)().width < _paragon.breakpoints.medium.minWidth;
+  const [activePlan, setActivePlan] = (0, _react.useState)(SUBSCRIBE);
+  if (!offer || !offer.canSubscribe) {
+    return null;
+  }
+  const {
+    hasTrial,
+    purchaseUrl,
+    canPurchase,
+    coursePrice,
+    subscribePrice
+  } = offer;
+  const included = /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Icon, {
+    src: _icons.CheckCircle,
+    screenReaderText: formatMessage(_messages.default.includedAlt)
+  });
+  const notIncluded = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "sr-only",
+    children: formatMessage(_messages.default.notIncludedAlt)
+  });
+  const cell = value => {
+    if (value === true) {
+      return included;
+    }
+    if (value === false) {
+      return notIncluded;
+    }
+    return value || null;
+  };
+  const subscribePriceCell = subscribePrice && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "font-weight-bold",
+    children: subscribePrice
+  });
+  const buyPriceCell = coursePrice && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "font-weight-bold",
+      children: coursePrice
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+      children: formatMessage(_messages.default.oneTimePurchase)
+    })]
+  });
+  const rows = [{
+    key: 'price',
+    label: formatMessage(_messages.default.rowPrice),
+    [SUBSCRIBE]: subscribePriceCell,
+    [BUY]: buyPriceCell
+  }, {
+    key: 'unlimited-access',
+    label: formatMessage(_messages.default.featureUnlimitedAccess),
+    [SUBSCRIBE]: true,
+    [BUY]: true
+  }, {
+    key: 'certificates',
+    label: formatMessage(_messages.default.rowEarnCertificates),
+    [SUBSCRIBE]: formatMessage(_messages.default.certificatesUnlimited),
+    [BUY]: formatMessage(_messages.default.certificatesOne)
+  }, {
+    key: 'graded-assignments',
+    label: formatMessage(_messages.default.featureGradedAssignments),
+    [SUBSCRIBE]: true,
+    [BUY]: true
+  }, {
+    key: 'change-courses',
+    label: formatMessage(_messages.default.featureChangeCourses),
+    [SUBSCRIBE]: true,
+    [BUY]: false
+  }, {
+    key: 'cancel-anytime',
+    label: formatMessage(_messages.default.cancelAnytime),
+    [SUBSCRIBE]: true,
+    [BUY]: false
+  }, hasTrial && {
+    key: 'free-trial',
+    label: formatMessage(_messages.default.featureFreeTrial),
+    [SUBSCRIBE]: true,
+    [BUY]: false
+  }].filter(Boolean);
+  const plans = [{
+    key: SUBSCRIBE,
+    name: formatMessage(_messages.default.subscribeColumn),
+    className: 'plan-subscribe'
+  }, canPurchase && {
+    key: BUY,
+    name: formatMessage(_messages.default.buyCourseColumn),
+    className: 'plan-buy'
+  }].filter(Boolean);
+  // The selected plan can vanish, e.g. Buy was selected and the course lost its purchase link.
+  const activeKey = plans.some(plan => plan.key === activePlan) ? activePlan : plans[0].key;
+  const visiblePlans = isSmallScreen ? plans.filter(plan => plan.key === activeKey) : plans;
+  const activeIndex = plans.findIndex(plan => plan.key === activeKey);
+  const showPlanAt = index => setActivePlan(plans[(index + plans.length) % plans.length].key);
+  const title = formatMessage(_messages.default.comparisonTitle);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.ModalDialog, {
+    title: title,
+    isOpen: isOpen,
+    onClose: onClose,
+    size: "lg",
+    hasCloseButton: true,
+    isFullscreenOnMobile: true,
+    isOverflowVisible: false,
+    className: "subscription-comparison-modal",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.ModalDialog.Header, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.ModalDialog.Title, {
+        as: "h2",
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "mt-2 mb-0",
+        children: formatMessage(_messages.default.comparisonSubtitle)
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.ModalDialog.Body, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+        className: "w-100 text-center subscription-comparison-table",
+        "data-testid": "subscription-comparison-table",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+              scope: "col",
+              className: "feature-header",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "sr-only",
+                children: formatMessage(_messages.default.featureColumn)
+              })
+            }), visiblePlans.map(plan => /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+              scope: "col",
+              className: plan.className,
+              "data-testid": `subscription-comparison-header-${plan.key}`,
+              children: plan.name
+            }, plan.key))]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+          children: rows.map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            "data-testid": `subscription-comparison-row-${row.key}`,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+              scope: "row",
+              className: "feature-cell",
+              children: row.label
+            }), visiblePlans.map(plan => /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              className: plan.className,
+              "data-testid": `subscription-comparison-cell-${row.key}-${plan.key}`,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "center-items flex-column",
+                children: cell(row[plan.key])
+              })
+            }, plan.key))]
+          }, row.key))
+        })]
+      }), isSmallScreen && plans.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "d-flex align-items-center justify-content-center mt-3",
+        "data-testid": "subscription-comparison-controls",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.IconButton, {
+          src: _icons.ChevronLeft,
+          iconAs: _paragon.Icon,
+          alt: formatMessage(_messages.default.previousPlan),
+          onClick: () => showPlanAt(activeIndex - 1)
+        }), plans.map(plan => /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: (0, _classnames.default)('btn btn-link p-1', {
+            'font-weight-bold': plan.key === activeKey
+          }),
+          "aria-pressed": plan.key === activeKey,
+          "aria-label": formatMessage(_messages.default.showPlan, {
+            plan: plan.name
+          }),
+          onClick: () => setActivePlan(plan.key),
+          children: plan.key === activeKey ? '●' : '○'
+        }, plan.key)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.IconButton, {
+          src: _icons.ChevronRight,
+          iconAs: _paragon.Icon,
+          alt: formatMessage(_messages.default.nextPlan),
+          onClick: () => showPlanAt(activeIndex + 1)
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.ModalDialog.Footer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_paragon.ActionRow, {
+        className: (0, _classnames.default)({
+          'subscription-comparison-actions-stacked': isSmallScreen
+        }),
+        "data-testid": "subscription-comparison-actions",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Button, {
+          as: "a",
+          href: offer.subscribeUrl,
+          variant: "primary",
+          onClick: onSubscribeClick,
+          "data-testid": "subscription-comparison-subscribe-button",
+          children: formatMessage(hasTrial ? _messages.default.startFreeTrial : _messages.default.subscribe)
+        }), canPurchase && /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Button, {
+          as: "a",
+          href: purchaseUrl,
+          variant: "outline-primary",
+          onClick: onPurchaseClick,
+          "data-testid": "subscription-comparison-purchase-button",
+          children: coursePrice ? formatMessage(_messages.default.buyFor, {
+            price: coursePrice
+          }) : formatMessage(_messages.default.purchaseNoPrice)
+        })]
+      })
+    })]
+  });
+};
+SubscriptionComparisonModal.propTypes = {
+  courseId: _propTypes.default.string.isRequired,
+  isOpen: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  onSubscribeClick: _propTypes.default.func,
+  onPurchaseClick: _propTypes.default.func
+};
+SubscriptionComparisonModal.defaultProps = {
+  onSubscribeClick: undefined,
+  onPurchaseClick: undefined
+};
+var _default = exports.default = SubscriptionComparisonModal;
+//# sourceMappingURL=SubscriptionComparisonModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionComparisonModal.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_i18n","_paragon","_icons","_useSubscriptionOffer","_messages","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SUBSCRIBE","BUY","SubscriptionComparisonModal","_ref","courseId","isOpen","onClose","onSubscribeClick","onPurchaseClick","formatMessage","useIntl","offer","useSubscriptionOffer","isSmallScreen","useWindowSize","width","breakpoints","medium","minWidth","activePlan","setActivePlan","useState","canSubscribe","hasTrial","purchaseUrl","canPurchase","coursePrice","subscribePrice","included","jsx","Icon","src","CheckCircle","screenReaderText","messages","includedAlt","notIncluded","className","children","notIncludedAlt","cell","value","subscribePriceCell","buyPriceCell","jsxs","Fragment","oneTimePurchase","rows","key","label","rowPrice","featureUnlimitedAccess","rowEarnCertificates","certificatesUnlimited","certificatesOne","featureGradedAssignments","featureChangeCourses","cancelAnytime","featureFreeTrial","filter","Boolean","plans","name","subscribeColumn","buyCourseColumn","activeKey","some","plan","visiblePlans","activeIndex","findIndex","showPlanAt","index","length","title","comparisonTitle","ModalDialog","size","hasCloseButton","isFullscreenOnMobile","isOverflowVisible","Header","Title","as","comparisonSubtitle","Body","scope","featureColumn","map","row","IconButton","ChevronLeft","iconAs","alt","previousPlan","onClick","type","classNames","showPlan","ChevronRight","nextPlan","Footer","ActionRow","Button","href","subscribeUrl","variant","startFreeTrial","subscribe","buyFor","price","purchaseNoPrice","propTypes","PropTypes","string","isRequired","bool","func","defaultProps","undefined","_default","exports"],"sources":["../../src/subscription-upsell/SubscriptionComparisonModal.jsx"],"sourcesContent":["/* eslint import/no-unresolved: 0 */\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport {\n  ActionRow, breakpoints, Button, Icon, IconButton, ModalDialog, useWindowSize,\n} from '@openedx/paragon';\nimport { ChevronLeft, ChevronRight, CheckCircle } from '@openedx/paragon/icons';\n\nimport useSubscriptionOffer from './useSubscriptionOffer';\nimport messages from './messages';\nimport './SubscriptionComparisonModal.scss';\n\nconst SUBSCRIBE = 'subscribe';\nconst BUY = 'buy';\n\n/** Subscribe vs Buy course pop-up (Figma 3339-8172); one column at a time on small screens. */\nconst SubscriptionComparisonModal = ({\n  courseId,\n  isOpen,\n  onClose,\n  onSubscribeClick,\n  onPurchaseClick,\n}) => {\n  const { formatMessage } = useIntl();\n  const offer = useSubscriptionOffer(courseId);\n  const isSmallScreen = useWindowSize().width < breakpoints.medium.minWidth;\n  const [activePlan, setActivePlan] = useState(SUBSCRIBE);\n\n  if (!offer || !offer.canSubscribe) {\n    return null;\n  }\n\n  const {\n    hasTrial, purchaseUrl, canPurchase, coursePrice, subscribePrice,\n  } = offer;\n\n  const included = <Icon src={CheckCircle} screenReaderText={formatMessage(messages.includedAlt)} />;\n  const notIncluded = <span className=\"sr-only\">{formatMessage(messages.notIncludedAlt)}</span>;\n  const cell = (value) => {\n    if (value === true) { return included; }\n    if (value === false) { return notIncluded; }\n    return value || null;\n  };\n\n  const subscribePriceCell = subscribePrice && <div className=\"font-weight-bold\">{subscribePrice}</div>;\n  const buyPriceCell = coursePrice && (\n    <>\n      <div className=\"font-weight-bold\">{coursePrice}</div>\n      <small>{formatMessage(messages.oneTimePurchase)}</small>\n    </>\n  );\n\n  const rows = [\n    {\n      key: 'price', label: formatMessage(messages.rowPrice), [SUBSCRIBE]: subscribePriceCell, [BUY]: buyPriceCell,\n    },\n    {\n      key: 'unlimited-access', label: formatMessage(messages.featureUnlimitedAccess), [SUBSCRIBE]: true, [BUY]: true,\n    },\n    {\n      key: 'certificates',\n      label: formatMessage(messages.rowEarnCertificates),\n      [SUBSCRIBE]: formatMessage(messages.certificatesUnlimited),\n      [BUY]: formatMessage(messages.certificatesOne),\n    },\n    {\n      key: 'graded-assignments', label: formatMessage(messages.featureGradedAssignments), [SUBSCRIBE]: true, [BUY]: true,\n    },\n    {\n      key: 'change-courses', label: formatMessage(messages.featureChangeCourses), [SUBSCRIBE]: true, [BUY]: false,\n    },\n    {\n      key: 'cancel-anytime', label: formatMessage(messages.cancelAnytime), [SUBSCRIBE]: true, [BUY]: false,\n    },\n    hasTrial && {\n      key: 'free-trial', label: formatMessage(messages.featureFreeTrial), [SUBSCRIBE]: true, [BUY]: false,\n    },\n  ].filter(Boolean);\n\n  const plans = [\n    { key: SUBSCRIBE, name: formatMessage(messages.subscribeColumn), className: 'plan-subscribe' },\n    canPurchase && { key: BUY, name: formatMessage(messages.buyCourseColumn), className: 'plan-buy' },\n  ].filter(Boolean);\n  // The selected plan can vanish, e.g. Buy was selected and the course lost its purchase link.\n  const activeKey = plans.some((plan) => plan.key === activePlan) ? activePlan : plans[0].key;\n  const visiblePlans = isSmallScreen ? plans.filter((plan) => plan.key === activeKey) : plans;\n  const activeIndex = plans.findIndex((plan) => plan.key === activeKey);\n  const showPlanAt = (index) => setActivePlan(plans[(index + plans.length) % plans.length].key);\n\n  const title = formatMessage(messages.comparisonTitle);\n\n  return (\n    <ModalDialog\n      title={title}\n      isOpen={isOpen}\n      onClose={onClose}\n      size=\"lg\"\n      hasCloseButton\n      isFullscreenOnMobile\n      isOverflowVisible={false}\n      className=\"subscription-comparison-modal\"\n    >\n      <ModalDialog.Header>\n        <ModalDialog.Title as=\"h2\">{title}</ModalDialog.Title>\n        <p className=\"mt-2 mb-0\">{formatMessage(messages.comparisonSubtitle)}</p>\n      </ModalDialog.Header>\n      <ModalDialog.Body>\n        <table className=\"w-100 text-center subscription-comparison-table\" data-testid=\"subscription-comparison-table\">\n          <thead>\n            <tr>\n              <th scope=\"col\" className=\"feature-header\"><span className=\"sr-only\">{formatMessage(messages.featureColumn)}</span></th>\n              {visiblePlans.map((plan) => (\n                <th scope=\"col\" key={plan.key} className={plan.className} data-testid={`subscription-comparison-header-${plan.key}`}>\n                  {plan.name}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map((row) => (\n              <tr key={row.key} data-testid={`subscription-comparison-row-${row.key}`}>\n                <th scope=\"row\" className=\"feature-cell\">{row.label}</th>\n                {visiblePlans.map((plan) => (\n                  <td key={plan.key} className={plan.className} data-testid={`subscription-comparison-cell-${row.key}-${plan.key}`}>\n                    <div className=\"center-items flex-column\">{cell(row[plan.key])}</div>\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n        {isSmallScreen && plans.length > 1 && (\n          <div className=\"d-flex align-items-center justify-content-center mt-3\" data-testid=\"subscription-comparison-controls\">\n            <IconButton\n              src={ChevronLeft}\n              iconAs={Icon}\n              alt={formatMessage(messages.previousPlan)}\n              onClick={() => showPlanAt(activeIndex - 1)}\n            />\n            {plans.map((plan) => (\n              <button\n                type=\"button\"\n                key={plan.key}\n                className={classNames('btn btn-link p-1', { 'font-weight-bold': plan.key === activeKey })}\n                aria-pressed={plan.key === activeKey}\n                aria-label={formatMessage(messages.showPlan, { plan: plan.name })}\n                onClick={() => setActivePlan(plan.key)}\n              >\n                {plan.key === activeKey ? '●' : '○'}\n              </button>\n            ))}\n            <IconButton\n              src={ChevronRight}\n              iconAs={Icon}\n              alt={formatMessage(messages.nextPlan)}\n              onClick={() => showPlanAt(activeIndex + 1)}\n            />\n          </div>\n        )}\n      </ModalDialog.Body>\n      <ModalDialog.Footer>\n        <ActionRow\n          className={classNames({ 'subscription-comparison-actions-stacked': isSmallScreen })}\n          data-testid=\"subscription-comparison-actions\"\n        >\n          <Button\n            as=\"a\"\n            href={offer.subscribeUrl}\n            variant=\"primary\"\n            onClick={onSubscribeClick}\n            data-testid=\"subscription-comparison-subscribe-button\"\n          >\n            {formatMessage(hasTrial ? messages.startFreeTrial : messages.subscribe)}\n          </Button>\n          {canPurchase && (\n            <Button\n              as=\"a\"\n              href={purchaseUrl}\n              variant=\"outline-primary\"\n              onClick={onPurchaseClick}\n              data-testid=\"subscription-comparison-purchase-button\"\n            >\n              {coursePrice\n                ? formatMessage(messages.buyFor, { price: coursePrice })\n                : formatMessage(messages.purchaseNoPrice)}\n            </Button>\n          )}\n        </ActionRow>\n      </ModalDialog.Footer>\n    </ModalDialog>\n  );\n};\n\nSubscriptionComparisonModal.propTypes = {\n  courseId: PropTypes.string.isRequired,\n  isOpen: PropTypes.bool.isRequired,\n  onClose: PropTypes.func.isRequired,\n  onSubscribeClick: PropTypes.func,\n  onPurchaseClick: PropTypes.func,\n};\n\nSubscriptionComparisonModal.defaultProps = {\n  onSubscribeClick: undefined,\n  onPurchaseClick: undefined,\n};\n\nexport default SubscriptionComparisonModal;\n"],"mappings":"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","ignoreList":[]}

package/dist/subscription-upsell/SubscriptionComparisonModal.scss

@@ -0,0 +1,66 @@
+// Scoped to the modal so the sidebar card's UpsellTable styles stay untouched.
+.subscription-comparison-modal {
+  .subscription-comparison-table {
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow: hidden;
+    border-radius: var(--pgn-size-border-radius-base);
+
+    th,
+    td {
+      padding: 1rem 0.75rem;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+    }
+
+    thead th {
+      padding: 1.5rem 0.75rem;
+      font-weight: 700;
+      border-bottom: 0;
+    }
+
+    .feature-header {
+      background: transparent;
+    }
+
+    .feature-cell {
+      text-align: left;
+      color: var(--pgn-color-gray-700);
+      background-color: var(--pgn-color-light-300);
+      border-bottom-color: var(--pgn-color-light-500);
+    }
+
+    // Brand teal with white text; lighter shades are the same token under a white overlay,
+    // kept light enough for white text to stay above 4.5:1 on both themes.
+    .plan-subscribe,
+    .plan-buy {
+      color: var(--pgn-color-white);
+      background-color: var(--pgn-color-primary-500);
+    }
+
+    thead .plan-subscribe {
+      background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
+    }
+
+    .plan-buy {
+      background-image: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28));
+    }
+
+    thead .plan-buy {
+      background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14));
+    }
+
+    .pgn__icon {
+      color: var(--pgn-color-white);
+    }
+  }
+
+  .subscription-comparison-actions-stacked {
+    flex-direction: column;
+    align-items: stretch;
+
+    > * + * {
+      margin-inline-start: 0;
+      margin-top: var(--pgn-spacing-action-row-gap-y, 0.75rem);
+    }
+  }
+}