@edx/frontend-plugin-advertisements 2.24.3 → 2.26.0

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);
+    }
+  }
+}

package/dist/subscription-upsell/SubscriptionUpgradeCard.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _frontendPlatform = require("@edx/frontend-platform");
+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 _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 */
+
+/** The sidebar card (Figma 3331-33999): certificate preview, Buy vs Subscribe table, buttons. */const SubscriptionUpgradeCard = _ref => {
+  let {
+    courseId,
+    withBorder,
+    onSubscribeClick,
+    onPurchaseClick,
+    onUpgradeEvent,
+    onUpgraded,
+    onClose,
+    banner
+  } = _ref;
+  const {
+    formatMessage
+  } = (0, _i18n.useIntl)();
+  const offer = (0, _useSubscriptionOffer.default)(courseId);
+  if (!offer || !offer.canPurchase && !offer.canSubscribe && !offer.canUpgradeInPlace) {
+    return null;
+  }
+  const {
+    coursePrice,
+    subscribePrice
+  } = offer;
+  const included = /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Icon, {
+    src: _icons.CheckCircle,
+    screenReaderText: formatMessage(_messages2.default.includedAlt)
+  });
+  const notIncluded = /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Icon, {
+    src: _icons.CloseSmall,
+    screenReaderText: formatMessage(_messages2.default.notIncludedAlt)
+  });
+
+  // Columns follow the buttons; a subscriber gets Upgrade now and nothing to compare.
+  const showSubscribeColumn = offer.canSubscribe;
+  const showBuyColumn = offer.canPurchase;
+  const showTable = !offer.canUpgradeInPlace && (showSubscribeColumn || showBuyColumn);
+  const rows = [showSubscribeColumn && offer.hasTrial && {
+    key: 'free-trial',
+    label: formatMessage(_messages2.default.featureFreeTrial),
+    buy: false
+  }, showSubscribeColumn && {
+    key: 'change-courses',
+    label: formatMessage(_messages2.default.featureChangeCourses),
+    buy: false
+  }, {
+    key: 'certificates',
+    label: formatMessage(_messages2.default.featureCertificates, {
+      certificateLink: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paragon.Hyperlink, {
+        destination: `${(0, _frontendPlatform.getConfig)().MARKETING_SITE_BASE_URL}/verified-certificate`,
+        children: formatMessage(_messages2.default.featureCertificatesLink)
+      })
+    }),
+    buy: true
+  }, {
+    key: 'graded-assignments',
+    label: formatMessage(_messages2.default.featureGradedAssignments),
+    buy: true
+  }, {
+    key: 'unlimited-access',
+    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.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
+    }), banner, showTable && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "px-4 small",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        className: "mb-4 primary-500",
+        children: formatMessage(_messages2.default.benefitsHeader)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+        className: "w-100 text-center subscription-comparison-table",
+        "data-testid": "subscription-card-table",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+              scope: "col",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "sr-only",
+                children: formatMessage(_messages2.default.featureColumn)
+              })
+            }), showBuyColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+              scope: "col",
+              className: "audit-cell top-audit-border font-weight-normal",
+              "data-testid": "subscription-card-buy-header",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "center-items flex-column",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: formatMessage(_messages2.default.buyColumn)
+                }), coursePrice && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: coursePrice
+                })]
+              })
+            }), showSubscribeColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+              scope: "col",
+              className: "verified-cell top-verified-border",
+              "data-testid": "subscription-card-subscribe-header",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "center-items flex-column",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: formatMessage(_messages2.default.subscribeColumn)
+                }), subscribePrice && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "font-weight-normal",
+                  children: subscribePrice
+                })]
+              })
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+          children: rows.map((row, index) => {
+            const last = index === rows.length - 1;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+              "data-testid": `subscription-card-row-${row.key}`,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                scope: "row",
+                className: (0, _classnames.default)('feature-cell text-left font-weight-normal', {
+                  'bottom-no-border': last
+                }),
+                children: row.label
+              }), showBuyColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                className: (0, _classnames.default)('audit-cell', {
+                  'bottom-audit-border': last
+                }),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "center-items",
+                  children: row.buy ? included : notIncluded
+                })
+              }), showSubscribeColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                className: (0, _classnames.default)('verified-cell', {
+                  'bottom-verified-border': last
+                }),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "center-items",
+                  children: included
+                })
+              })]
+            }, row.key);
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubscriptionUpsell.default, {
+      courseId: courseId,
+      className: "px-4 pb-4 pt-3",
+      onSubscribeClick: onSubscribeClick,
+      onPurchaseClick: onPurchaseClick,
+      onUpgradeEvent: onUpgradeEvent,
+      onUpgraded: onUpgraded
+    })]
+  });
+};
+SubscriptionUpgradeCard.propTypes = {
+  courseId: _propTypes.default.string.isRequired,
+  withBorder: _propTypes.default.bool,
+  onSubscribeClick: _propTypes.default.func,
+  onPurchaseClick: _propTypes.default.func,
+  onUpgradeEvent: _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,
+  onClose: undefined,
+  banner: undefined
+};
+var _default = exports.default = SubscriptionUpgradeCard;
+//# sourceMappingURL=SubscriptionUpgradeCard.js.map

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

@@ -0,0 +1 @@
+{"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","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","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 || (!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      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":[]}