@edx/frontend-app-subscription-checkout 1.5.0 → 1.7.0

package/dist/app.js

@@ -5,12 +5,8 @@ const app = {
     appId,
     routes,
     slots,
-    // Environment-specific values (STRIPE_PUBLIC_KEY, VIAX_API_URL,
-    // ENABLE_ANNUAL_BILLING) are supplied by site.config.{dev,stage,prod}.tsx
-    // at site build time.
-    config: {
-        ENABLE_ANNUAL_BILLING: false,
-    },
+    // Environment-specific values (STRIPE_PUBLIC_KEY, VIAX_API_URL)
+    // are supplied by site.config.{dev,stage,prod}.tsx at site build time.
 };
 export default app;
 //# sourceMappingURL=app.js.map

package/dist/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,GAAG,GAAQ;IACf,KAAK;IACL,MAAM;IACN,KAAK;IACL,gEAAgE;IAChE,0EAA0E;IAC1E,sBAAsB;IACtB,MAAM,EAAE;QACN,qBAAqB,EAAE,KAAK;KAC7B;CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { App } from '@openedx/frontend-base';\nimport { appId } from '@src/constants';\nimport routes from '@src/routes';\nimport slots from '@src/slots';\n\nconst app: App = {\n  appId,\n  routes,\n  slots,\n  // Environment-specific values (STRIPE_PUBLIC_KEY, VIAX_API_URL,\n  // ENABLE_ANNUAL_BILLING) are supplied by site.config.{dev,stage,prod}.tsx\n  // at site build time.\n  config: {\n    ENABLE_ANNUAL_BILLING: false,\n  },\n};\n\nexport default app;\n"]}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,GAAG,GAAQ;IACf,KAAK;IACL,MAAM;IACN,KAAK;IACL,gEAAgE;IAChE,uEAAuE;CACxE,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { App } from '@openedx/frontend-base';\nimport { appId } from '@src/constants';\nimport routes from '@src/routes';\nimport slots from '@src/slots';\n\nconst app: App = {\n  appId,\n  routes,\n  slots,\n  // Environment-specific values (STRIPE_PUBLIC_KEY, VIAX_API_URL)\n  // are supplied by site.config.{dev,stage,prod}.tsx at site build time.\n};\n\nexport default app;\n"]}

package/dist/checkoutPage/CheckoutPage.js

@@ -10,7 +10,6 @@ const CheckoutPage = () => {
     const LMS_BASE_URL = siteConfig.lmsBaseUrl.replace(/\/$/, '');
     const stripePublishableKey = config.STRIPE_PUBLIC_KEY;
     const apiUrl = config.VIAX_API_URL;
-    const enableAnnualBilling = Boolean(config.ENABLE_ANNUAL_BILLING);
     const isDevelopment = siteConfig.environment === 'development';
     const edxSessionUrl = `${isDevelopment ? 'https://courses.stage.edx.org' : LMS_BASE_URL}/api/edx-session`;
     console.log('siteConfig ===> ', siteConfig);
@@ -21,7 +20,7 @@ const CheckoutPage = () => {
     if (!stripePublishableKey || !apiUrl || !edxSessionUrl) {
         return (_jsx(PageWrapper, { children: _jsxs(Alert, { variant: "danger", children: ["We're having trouble loading the checkout. Please refresh the page or try again in a few moments. If the problem persists,", ' ', _jsx("a", { href: "https://courses.edx.org/support/contact_us", children: "contact support" }), "."] }) }));
     }
-    return (_jsx(PageWrapper, { children: _jsx(CheckoutGate, { stripePublishableKey: stripePublishableKey, apiUrl: apiUrl, edxSessionUrl: edxSessionUrl, enableAnnualBilling: enableAnnualBilling, learnerDashboardUrl: `${LMS_BASE_URL}/dashboard`, homeUrl: LMS_BASE_URL || '/', onComplete: (_subscriptionBiId) => {
+    return (_jsx(PageWrapper, { children: _jsx(CheckoutGate, { stripePublishableKey: stripePublishableKey, apiUrl: apiUrl, edxSessionUrl: edxSessionUrl, learnerDashboardUrl: `${LMS_BASE_URL}/dashboard`, homeUrl: LMS_BASE_URL || '/', onComplete: (_subscriptionBiId) => {
                 console.log(_subscriptionBiId);
                 // window.location.href = `/checkout/confirmation?sub=${_subscriptionBiId ?? ''}`;
                 // Success screen.

package/dist/checkoutPage/CheckoutPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutPage.js","sourceRoot":"","sources":["../../src/checkoutPage/CheckoutPage.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,YAAY,MAAM,yCAAyC,CAAC;AAEnE,MAAM,WAAW,GAA4C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7E,KAAC,SAAS,cAAE,QAAQ,GAAa,CAClC,CAAC;AAEF,MAAM,YAAY,GAAa,GAAG,EAAE;IAClC,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,oBAAoB,GAAG,MAAM,CAAC,iBAA2B,CAAC;IAChE,MAAM,MAAM,GAAG,MAAM,CAAC,YAAsB,CAAC;IAC7C,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;IAClE,MAAM,aAAa,GAAG,UAAU,CAAC,WAAW,KAAK,aAAa,CAAC;IAC/D,MAAM,aAAa,GAAG,GAAG,aAAa,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,YAAY,kBAAkB,CAAC;IAE1G,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IAC5C,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IACrC,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,oBAAoB,CAAC,CAAC;IAChE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACnC,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,aAAa,CAAC,CAAC;IAElD,IAAI,CAAC,oBAAoB,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;QACvD,OAAO,CACL,KAAC,WAAW,cACV,MAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,2IAEwC,GAAG,EAChE,YAAG,IAAI,EAAC,4CAA4C,gCAEhD,SAEE,GACI,CACf,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,WAAW,cACV,KAAC,YAAY,IACX,oBAAoB,EAAE,oBAAoB,EAC1C,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,GAAG,YAAY,YAAY,EAChD,OAAO,EAAE,YAAY,IAAI,GAAG,EAC5B,UAAU,EAAE,CAAC,iBAAiB,EAAE,EAAE;gBAChC,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;gBAC/B,kFAAkF;gBAClF,kBAAkB;YACpB,CAAC,GACD,GACU,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React from 'react';\nimport { Alert, Container } from '@openedx/paragon';\nimport { getAppConfig, getSiteConfig } from '@openedx/frontend-base';\nimport { appId } from '@src/constants';\nimport CheckoutGate from '../components/CheckoutGate/CheckoutGate';\n\nconst PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n  <Container>{children}</Container>\n);\n\nconst CheckoutPage: React.FC = () => {\n  const config = getAppConfig(appId);\n  const siteConfig = getSiteConfig();\n  const LMS_BASE_URL = siteConfig.lmsBaseUrl.replace(/\\/$/, '');\n  const stripePublishableKey = config.STRIPE_PUBLIC_KEY as string;\n  const apiUrl = config.VIAX_API_URL as string;\n  const enableAnnualBilling = Boolean(config.ENABLE_ANNUAL_BILLING);\n  const isDevelopment = siteConfig.environment === 'development';\n  const edxSessionUrl = `${isDevelopment ? 'https://courses.stage.edx.org' : LMS_BASE_URL}/api/edx-session`;\n\n  console.log('siteConfig ===> ', siteConfig);\n  console.log('config ====> ', config);\n  console.log('stripePublishableKey ===> ', stripePublishableKey);\n  console.log('apiURL ==> ', apiUrl);\n  console.log('edxSessionUrl ===> ', edxSessionUrl);\n\n  if (!stripePublishableKey || !apiUrl || !edxSessionUrl) {\n    return (\n      <PageWrapper>\n        <Alert variant=\"danger\">\n          We&apos;re having trouble loading the checkout. Please refresh the\n          page or try again in a few moments. If the problem persists,{' '}\n          <a href=\"https://courses.edx.org/support/contact_us\">\n            contact support\n          </a>\n          .\n        </Alert>\n      </PageWrapper>\n    );\n  }\n\n  return (\n    <PageWrapper>\n      <CheckoutGate\n        stripePublishableKey={stripePublishableKey}\n        apiUrl={apiUrl}\n        edxSessionUrl={edxSessionUrl}\n        enableAnnualBilling={enableAnnualBilling}\n        learnerDashboardUrl={`${LMS_BASE_URL}/dashboard`}\n        homeUrl={LMS_BASE_URL || '/'}\n        onComplete={(_subscriptionBiId) => {\n          console.log(_subscriptionBiId);\n          // window.location.href = `/checkout/confirmation?sub=${_subscriptionBiId ?? ''}`;\n          // Success screen.\n        }}\n      />\n    </PageWrapper>\n  );\n};\n\nexport default CheckoutPage;\n"]}
+{"version":3,"file":"CheckoutPage.js","sourceRoot":"","sources":["../../src/checkoutPage/CheckoutPage.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,YAAY,MAAM,yCAAyC,CAAC;AAEnE,MAAM,WAAW,GAA4C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7E,KAAC,SAAS,cAAE,QAAQ,GAAa,CAClC,CAAC;AAEF,MAAM,YAAY,GAAa,GAAG,EAAE;IAClC,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,oBAAoB,GAAG,MAAM,CAAC,iBAA2B,CAAC;IAChE,MAAM,MAAM,GAAG,MAAM,CAAC,YAAsB,CAAC;IAC7C,MAAM,aAAa,GAAG,UAAU,CAAC,WAAW,KAAK,aAAa,CAAC;IAC/D,MAAM,aAAa,GAAG,GAAG,aAAa,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,YAAY,kBAAkB,CAAC;IAE1G,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IAC5C,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IACrC,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,oBAAoB,CAAC,CAAC;IAChE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACnC,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,aAAa,CAAC,CAAC;IAElD,IAAI,CAAC,oBAAoB,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;QACvD,OAAO,CACL,KAAC,WAAW,cACV,MAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,2IAEwC,GAAG,EAChE,YAAG,IAAI,EAAC,4CAA4C,gCAEhD,SAEE,GACI,CACf,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,WAAW,cACV,KAAC,YAAY,IACX,oBAAoB,EAAE,oBAAoB,EAC1C,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,GAAG,YAAY,YAAY,EAChD,OAAO,EAAE,YAAY,IAAI,GAAG,EAC5B,UAAU,EAAE,CAAC,iBAAiB,EAAE,EAAE;gBAChC,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;gBAC/B,kFAAkF;gBAClF,kBAAkB;YACpB,CAAC,GACD,GACU,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React from 'react';\nimport { Alert, Container } from '@openedx/paragon';\nimport { getAppConfig, getSiteConfig } from '@openedx/frontend-base';\nimport { appId } from '@src/constants';\nimport CheckoutGate from '../components/CheckoutGate/CheckoutGate';\n\nconst PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n  <Container>{children}</Container>\n);\n\nconst CheckoutPage: React.FC = () => {\n  const config = getAppConfig(appId);\n  const siteConfig = getSiteConfig();\n  const LMS_BASE_URL = siteConfig.lmsBaseUrl.replace(/\\/$/, '');\n  const stripePublishableKey = config.STRIPE_PUBLIC_KEY as string;\n  const apiUrl = config.VIAX_API_URL as string;\n  const isDevelopment = siteConfig.environment === 'development';\n  const edxSessionUrl = `${isDevelopment ? 'https://courses.stage.edx.org' : LMS_BASE_URL}/api/edx-session`;\n\n  console.log('siteConfig ===> ', siteConfig);\n  console.log('config ====> ', config);\n  console.log('stripePublishableKey ===> ', stripePublishableKey);\n  console.log('apiURL ==> ', apiUrl);\n  console.log('edxSessionUrl ===> ', edxSessionUrl);\n\n  if (!stripePublishableKey || !apiUrl || !edxSessionUrl) {\n    return (\n      <PageWrapper>\n        <Alert variant=\"danger\">\n          We&apos;re having trouble loading the checkout. Please refresh the\n          page or try again in a few moments. If the problem persists,{' '}\n          <a href=\"https://courses.edx.org/support/contact_us\">\n            contact support\n          </a>\n          .\n        </Alert>\n      </PageWrapper>\n    );\n  }\n\n  return (\n    <PageWrapper>\n      <CheckoutGate\n        stripePublishableKey={stripePublishableKey}\n        apiUrl={apiUrl}\n        edxSessionUrl={edxSessionUrl}\n        learnerDashboardUrl={`${LMS_BASE_URL}/dashboard`}\n        homeUrl={LMS_BASE_URL || '/'}\n        onComplete={(_subscriptionBiId) => {\n          console.log(_subscriptionBiId);\n          // window.location.href = `/checkout/confirmation?sub=${_subscriptionBiId ?? ''}`;\n          // Success screen.\n        }}\n      />\n    </PageWrapper>\n  );\n};\n\nexport default CheckoutPage;\n"]}

package/dist/components/BrandMarks/BrandMarks.d.ts

@@ -1,3 +1,7 @@
 export declare const CardBrands: () => import("react/jsx-runtime").JSX.Element;
 export declare const PayPalWordmark: () => import("react/jsx-runtime").JSX.Element;
-export declare const EdxUnlimitedLogo: () => import("react/jsx-runtime").JSX.Element;
+interface EdxUnlimitedLogoProps {
+    ariaLabel?: string;
+}
+export declare const EdxUnlimitedLogo: ({ ariaLabel, }?: EdxUnlimitedLogoProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BrandMarks/BrandMarks.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import edxLogo from './edx.svg';
 const Visa = () => (_jsxs("svg", { width: "34", height: "22", viewBox: "0 0 34 22", role: "img", "aria-label": "Visa", children: [_jsx("rect", { width: "34", height: "22", rx: "3", fill: "#1A1F71" }), _jsx("text", { x: "17", y: "15", textAnchor: "middle", fontFamily: "Arial, sans-serif", fontWeight: "700", fontStyle: "italic", fontSize: "10", fill: "#fff", children: "VISA" })] }));
 const Mastercard = () => (_jsxs("svg", { width: "34", height: "22", viewBox: "0 0 34 22", role: "img", "aria-label": "Mastercard", children: [_jsx("rect", { width: "34", height: "22", rx: "3", fill: "#fff", stroke: "#E6E6E6" }), _jsx("circle", { cx: "14", cy: "11", r: "6", fill: "#EB001B" }), _jsx("circle", { cx: "20", cy: "11", r: "6", fill: "#F79E1B", fillOpacity: "0.9" })] }));
 const Amex = () => (_jsxs("svg", { width: "34", height: "22", viewBox: "0 0 34 22", role: "img", "aria-label": "American Express", children: [_jsx("rect", { width: "34", height: "22", rx: "3", fill: "#1F72CD" }), _jsx("text", { x: "17", y: "14", textAnchor: "middle", fontFamily: "Arial, sans-serif", fontWeight: "700", fontSize: "6.5", fill: "#fff", children: "AMEX" })] }));
 const Discover = () => (_jsxs("svg", { width: "34", height: "22", viewBox: "0 0 34 22", role: "img", "aria-label": "Discover", children: [_jsx("rect", { width: "34", height: "22", rx: "3", fill: "#fff", stroke: "#E6E6E6" }), _jsx("circle", { cx: "25", cy: "11", r: "4", fill: "#F47216" }), _jsx("text", { x: "13", y: "14", textAnchor: "middle", fontFamily: "Arial, sans-serif", fontWeight: "700", fontSize: "5", fill: "#231F20", children: "DISCVR" })] }));
 export const CardBrands = () => (_jsxs("div", { className: "brand-marks__card-brands", children: [_jsx(Visa, {}), _jsx(Mastercard, {}), _jsx(Amex, {}), _jsx(Discover, {})] }));
 export const PayPalWordmark = () => (_jsxs("span", { className: "brand-marks__paypal", children: [_jsx("span", { className: "brand-marks__paypal-pay", children: "Pay" }), _jsx("span", { className: "brand-marks__paypal-pal", children: "Pal" })] }));
-export const EdxUnlimitedLogo = () => (_jsx("div", { className: "brand-marks__edx-logo", "aria-label": "edX unlimited", children: _jsxs("div", { className: "brand-marks__edx-logo-text", children: [_jsx("div", { className: "brand-marks__edx-logo-edx", children: "edX" }), _jsx("div", { className: "brand-marks__edx-logo-unlimited", children: "unlimited" })] }) }));
+export const EdxUnlimitedLogo = ({ ariaLabel = 'edX Subscription', } = {}) => (_jsx("span", { className: "brand-marks__edx-logo", children: _jsx("img", { src: edxLogo, alt: ariaLabel, width: 48, height: 25 }) }));
 //# sourceMappingURL=BrandMarks.js.map

package/dist/components/BrandMarks/BrandMarks.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrandMarks.js","sourceRoot":"","sources":["../../../src/components/BrandMarks/BrandMarks.tsx"],"names":[],"mappings":";AAEA,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,gBAAY,MAAM,aAC1E,eAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,EACrD,eACE,CAAC,EAAC,IAAI,EACN,CAAC,EAAC,IAAI,EACN,UAAU,EAAC,QAAQ,EACnB,UAAU,EAAC,mBAAmB,EAC9B,UAAU,EAAC,KAAK,EAChB,SAAS,EAAC,QAAQ,EAClB,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,MAAM,qBAGN,IACH,CACP,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,KAAK,gBACC,YAAY,aAEvB,eAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,GAAG,EACnE,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,EAC/C,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,KAAK,GAAG,IAC7D,CACP,CAAC;AAEF,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,KAAK,gBACC,kBAAkB,aAE7B,eAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,EACrD,eACE,CAAC,EAAC,IAAI,EACN,CAAC,EAAC,IAAI,EACN,UAAU,EAAC,QAAQ,EACnB,UAAU,EAAC,mBAAmB,EAC9B,UAAU,EAAC,KAAK,EAChB,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,MAAM,qBAGN,IACH,CACP,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CACrB,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,KAAK,gBACC,UAAU,aAErB,eAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,GAAG,EACnE,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,EAC/C,eACE,CAAC,EAAC,IAAI,EACN,CAAC,EAAC,IAAI,EACN,UAAU,EAAC,QAAQ,EACnB,UAAU,EAAC,mBAAmB,EAC9B,UAAU,EAAC,KAAK,EAChB,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,SAAS,uBAGT,IACH,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAC9B,eAAK,SAAS,EAAC,0BAA0B,aACvC,KAAC,IAAI,KAAG,EACR,KAAC,UAAU,KAAG,EACd,KAAC,IAAI,KAAG,EACR,KAAC,QAAQ,KAAG,IACR,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CAClC,gBAAM,SAAS,EAAC,qBAAqB,aACnC,eAAM,SAAS,EAAC,yBAAyB,oBAAW,EACpD,eAAM,SAAS,EAAC,yBAAyB,oBAAW,IAC/C,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CACpC,cAAK,SAAS,EAAC,uBAAuB,gBAAY,eAAe,YAC/D,eAAK,SAAS,EAAC,4BAA4B,aACzC,cAAK,SAAS,EAAC,2BAA2B,oBAAU,EACpD,cAAK,SAAS,EAAC,iCAAiC,0BAAgB,IAC5D,GACF,CACP,CAAC","sourcesContent":["import React from 'react';\n\nconst Visa = () => (\n  <svg width=\"34\" height=\"22\" viewBox=\"0 0 34 22\" role=\"img\" aria-label=\"Visa\">\n    <rect width=\"34\" height=\"22\" rx=\"3\" fill=\"#1A1F71\" />\n    <text\n      x=\"17\"\n      y=\"15\"\n      textAnchor=\"middle\"\n      fontFamily=\"Arial, sans-serif\"\n      fontWeight=\"700\"\n      fontStyle=\"italic\"\n      fontSize=\"10\"\n      fill=\"#fff\"\n    >\n      VISA\n    </text>\n  </svg>\n);\n\nconst Mastercard = () => (\n  <svg\n    width=\"34\"\n    height=\"22\"\n    viewBox=\"0 0 34 22\"\n    role=\"img\"\n    aria-label=\"Mastercard\"\n  >\n    <rect width=\"34\" height=\"22\" rx=\"3\" fill=\"#fff\" stroke=\"#E6E6E6\" />\n    <circle cx=\"14\" cy=\"11\" r=\"6\" fill=\"#EB001B\" />\n    <circle cx=\"20\" cy=\"11\" r=\"6\" fill=\"#F79E1B\" fillOpacity=\"0.9\" />\n  </svg>\n);\n\nconst Amex = () => (\n  <svg\n    width=\"34\"\n    height=\"22\"\n    viewBox=\"0 0 34 22\"\n    role=\"img\"\n    aria-label=\"American Express\"\n  >\n    <rect width=\"34\" height=\"22\" rx=\"3\" fill=\"#1F72CD\" />\n    <text\n      x=\"17\"\n      y=\"14\"\n      textAnchor=\"middle\"\n      fontFamily=\"Arial, sans-serif\"\n      fontWeight=\"700\"\n      fontSize=\"6.5\"\n      fill=\"#fff\"\n    >\n      AMEX\n    </text>\n  </svg>\n);\n\nconst Discover = () => (\n  <svg\n    width=\"34\"\n    height=\"22\"\n    viewBox=\"0 0 34 22\"\n    role=\"img\"\n    aria-label=\"Discover\"\n  >\n    <rect width=\"34\" height=\"22\" rx=\"3\" fill=\"#fff\" stroke=\"#E6E6E6\" />\n    <circle cx=\"25\" cy=\"11\" r=\"4\" fill=\"#F47216\" />\n    <text\n      x=\"13\"\n      y=\"14\"\n      textAnchor=\"middle\"\n      fontFamily=\"Arial, sans-serif\"\n      fontWeight=\"700\"\n      fontSize=\"5\"\n      fill=\"#231F20\"\n    >\n      DISCVR\n    </text>\n  </svg>\n);\n\nexport const CardBrands = () => (\n  <div className=\"brand-marks__card-brands\">\n    <Visa />\n    <Mastercard />\n    <Amex />\n    <Discover />\n  </div>\n);\n\nexport const PayPalWordmark = () => (\n  <span className=\"brand-marks__paypal\">\n    <span className=\"brand-marks__paypal-pay\">Pay</span>\n    <span className=\"brand-marks__paypal-pal\">Pal</span>\n  </span>\n);\n\nexport const EdxUnlimitedLogo = () => (\n  <div className=\"brand-marks__edx-logo\" aria-label=\"edX unlimited\">\n    <div className=\"brand-marks__edx-logo-text\">\n      <div className=\"brand-marks__edx-logo-edx\">edX</div>\n      <div className=\"brand-marks__edx-logo-unlimited\">unlimited</div>\n    </div>\n  </div>\n);\n"]}
+{"version":3,"file":"BrandMarks.js","sourceRoot":"","sources":["../../../src/components/BrandMarks/BrandMarks.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport edxLogo from './edx.svg';\n\nconst Visa = () => (\n  <svg width=\"34\" height=\"22\" viewBox=\"0 0 34 22\" role=\"img\" aria-label=\"Visa\">\n    <rect width=\"34\" height=\"22\" rx=\"3\" fill=\"#1A1F71\" />\n    <text\n      x=\"17\"\n      y=\"15\"\n      textAnchor=\"middle\"\n      fontFamily=\"Arial, sans-serif\"\n      fontWeight=\"700\"\n      fontStyle=\"italic\"\n      fontSize=\"10\"\n      fill=\"#fff\"\n    >\n      VISA\n    </text>\n  </svg>\n);\n\nconst Mastercard = () => (\n  <svg\n    width=\"34\"\n    height=\"22\"\n    viewBox=\"0 0 34 22\"\n    role=\"img\"\n    aria-label=\"Mastercard\"\n  >\n    <rect width=\"34\" height=\"22\" rx=\"3\" fill=\"#fff\" stroke=\"#E6E6E6\" />\n    <circle cx=\"14\" cy=\"11\" r=\"6\" fill=\"#EB001B\" />\n    <circle cx=\"20\" cy=\"11\" r=\"6\" fill=\"#F79E1B\" fillOpacity=\"0.9\" />\n  </svg>\n);\n\nconst Amex = () => (\n  <svg\n    width=\"34\"\n    height=\"22\"\n    viewBox=\"0 0 34 22\"\n    role=\"img\"\n    aria-label=\"American Express\"\n  >\n    <rect width=\"34\" height=\"22\" rx=\"3\" fill=\"#1F72CD\" />\n    <text\n      x=\"17\"\n      y=\"14\"\n      textAnchor=\"middle\"\n      fontFamily=\"Arial, sans-serif\"\n      fontWeight=\"700\"\n      fontSize=\"6.5\"\n      fill=\"#fff\"\n    >\n      AMEX\n    </text>\n  </svg>\n);\n\nconst Discover = () => (\n  <svg\n    width=\"34\"\n    height=\"22\"\n    viewBox=\"0 0 34 22\"\n    role=\"img\"\n    aria-label=\"Discover\"\n  >\n    <rect width=\"34\" height=\"22\" rx=\"3\" fill=\"#fff\" stroke=\"#E6E6E6\" />\n    <circle cx=\"25\" cy=\"11\" r=\"4\" fill=\"#F47216\" />\n    <text\n      x=\"13\"\n      y=\"14\"\n      textAnchor=\"middle\"\n      fontFamily=\"Arial, sans-serif\"\n      fontWeight=\"700\"\n      fontSize=\"5\"\n      fill=\"#231F20\"\n    >\n      DISCVR\n    </text>\n  </svg>\n);\n\nexport const CardBrands = () => (\n  <div className=\"brand-marks__card-brands\">\n    <Visa />\n    <Mastercard />\n    <Amex />\n    <Discover />\n  </div>\n);\n\nexport const PayPalWordmark = () => (\n  <span className=\"brand-marks__paypal\">\n    <span className=\"brand-marks__paypal-pay\">Pay</span>\n    <span className=\"brand-marks__paypal-pal\">Pal</span>\n  </span>\n);\n\ninterface EdxUnlimitedLogoProps {\n  ariaLabel?: string,\n}\n\nexport const EdxUnlimitedLogo = ({\n  ariaLabel = 'edX Subscription',\n}: EdxUnlimitedLogoProps = {}) => (\n  <span className=\"brand-marks__edx-logo\">\n    <img\n      src={edxLogo}\n      alt={ariaLabel}\n      width={48}\n      height={25}\n    />\n  </span>\n);\n"]}

package/dist/components/CartSummary/CartSummary.d.ts

@@ -16,16 +16,11 @@ export interface CartSummaryProps {
     defaultCycle?: BillingCycle;
     monthlyRenewalLabel?: string;
     annualRenewalLabel?: string;
-    /** Called when the learner switches monthly ↔ annual (requires enableAnnualBilling). */
+    /** Called when the learner switches monthly ↔ annual. */
     onCycleChange?: (cycle: BillingCycle) => void;
-    /**
-     * When true, shows the Switch to annual/monthly control.
-     * Controlled via ENABLE_ANNUAL_BILLING in site.config.*.tsx.
-     */
-    enableAnnualBilling?: boolean;
     learnerCount?: number;
     /** When set, shows the course enrollment preview card below the summary card. */
     course?: CourseDetail | null;
 }
-declare const CartSummary: ({ productTitle, productBlurb, monthlyAmount, monthlyRegularAmount, promoMonths, annualAmount, currency, activeSubscriberCount, defaultCycle, onCycleChange, enableAnnualBilling, learnerCount: learnerCountProp, course, }: CartSummaryProps) => import("react/jsx-runtime").JSX.Element;
+declare const CartSummary: ({ productTitle, productBlurb, monthlyAmount, monthlyRegularAmount, promoMonths, annualAmount, currency, activeSubscriberCount, defaultCycle, onCycleChange, learnerCount: learnerCountProp, course, }: CartSummaryProps) => import("react/jsx-runtime").JSX.Element;
 export default CartSummary;

package/dist/components/CartSummary/CartSummary.js

@@ -1,18 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Badge, Button, Card, Icon } from '@openedx/paragon';
+import { Badge, Button, Card, Icon, Skeleton } from '@openedx/paragon';
 import { Group, People, Institution } from '@openedx/paragon/icons';
 import { useIntl } from '@openedx/frontend-base';
 import { EdxUnlimitedLogo } from '../BrandMarks/BrandMarks';
 import CourseEnrollmentCard from '../CourseEnrollmentCard/CourseEnrollmentCard';
 import messages from './Messages';
-const CartSummary = ({ productTitle = 'edX Subscription', productBlurb = 'Subscribe and get access to hundreds of courses and programs.', monthlyAmount = '39', monthlyRegularAmount = '59', promoMonths = 3, annualAmount = '299', currency = 'USD', activeSubscriberCount, defaultCycle = 'monthly', onCycleChange, enableAnnualBilling = false, learnerCount: learnerCountProp = 2203, course = null, }) => {
+const CartSummary = ({ productTitle, productBlurb, monthlyAmount = '39', monthlyRegularAmount = '59', promoMonths = 3, annualAmount = '299', currency = 'USD', activeSubscriberCount, defaultCycle = 'monthly', onCycleChange, learnerCount: learnerCountProp, course = null, }) => {
+    var _a;
     const { formatMessage } = useIntl();
     const isMonthly = defaultCycle === 'monthly';
-    const showCycleToggle = enableAnnualBilling && !!onCycleChange;
-    const learnerCount = (activeSubscriberCount != null ? activeSubscriberCount : learnerCountProp).toLocaleString();
-    return (_jsxs("div", { className: "cart-summary ", children: [_jsxs(Card, { className: "cart-summary__card p-3", children: [_jsxs(Card.Section, { className: "d-flex justify-content-between align-items-center p-0 pb-3", children: [_jsx("span", { className: "font-weight-bold text-gray-900", children: formatMessage(messages.summaryHeading) }), _jsxs(Badge, { variant: "light", className: "d-flex align-items-center px-2 py-1", children: [_jsx(Icon, { src: Group, className: "mr-1", style: { width: '1rem', height: '1rem' } }), formatMessage(messages.learnersSubscribed, {
-                                        count: learnerCount,
-                                    })] })] }), _jsx(Card.Divider, {}), _jsx(Card.Section, { className: "p-0 py-3", children: _jsxs("div", { className: "d-flex align-items-start", children: [_jsx(EdxUnlimitedLogo, {}), _jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-0 text-primary-500", children: productTitle }), _jsx("p", { className: "small mb-0 text-gray-900", children: productBlurb })] })] }) }), _jsx(Card.Divider, {}), _jsxs(Card.Section, { className: "p-0 py-3", children: [_jsxs("div", { className: "d-flex justify-content-between align-items-start mb-1", children: [_jsx("span", { className: "small text-gray-900", children: isMonthly
+    const showCycleToggle = !!onCycleChange;
+    const title = productTitle !== null && productTitle !== void 0 ? productTitle : formatMessage(messages.productTitle);
+    const blurb = productBlurb !== null && productBlurb !== void 0 ? productBlurb : formatMessage(messages.productBlurb);
+    const subscriberCount = (_a = activeSubscriberCount !== null && activeSubscriberCount !== void 0 ? activeSubscriberCount : learnerCountProp) !== null && _a !== void 0 ? _a : null;
+    const isSubscriberCountLoading = subscriberCount == null;
+    return (_jsxs("div", { className: "cart-summary ", children: [_jsxs(Card, { className: "cart-summary__card p-3", children: [_jsxs(Card.Section, { className: "d-flex justify-content-between align-items-center p-0 pb-3", children: [_jsx("span", { className: "font-weight-bold text-gray-900", children: formatMessage(messages.summaryHeading) }), _jsxs(Badge, { variant: "light", className: "d-flex align-items-center px-2 py-1", children: [_jsx(Icon, { src: Group, className: "mr-1", style: { width: '1rem', height: '1rem' } }), isSubscriberCountLoading ? (_jsx("span", { className: "cart-summary__count-skeleton", "aria-busy": "true", "aria-label": formatMessage(messages.loadingSubscribers), "data-testid": "subscriber-count-skeleton", children: _jsx(Skeleton, { width: 96, height: 12 }) })) : (formatMessage(messages.learnersSubscribed, {
+                                        count: subscriberCount.toLocaleString(),
+                                    }))] })] }), _jsx(Card.Divider, {}), _jsx(Card.Section, { className: "p-0 py-3", children: _jsxs("div", { className: "d-flex align-items-start", children: [_jsx(EdxUnlimitedLogo, { ariaLabel: "edX Subscription" }), _jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-0 text-primary-500", children: title }), _jsx("p", { className: "small mb-0 text-gray-900", children: blurb })] })] }) }), _jsx(Card.Divider, {}), _jsxs(Card.Section, { className: "p-0 pt-3 pb-0", children: [_jsxs("div", { className: "d-flex justify-content-between align-items-start mb-1", children: [_jsx("span", { className: "small text-gray-900", children: isMonthly
                                             ? formatMessage(messages.monthlySubscription)
                                             : formatMessage(messages.annualSubscription) }), _jsxs("div", { className: "cart-summary__pricing text-right", children: [_jsx("div", { className: "text-success font-weight-bold small", children: formatMessage(messages.trialLabel) }), isMonthly ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "small text-gray-900 font-weight-bold", children: formatMessage(messages.promotionalPrice, {
                                                             amount: monthlyAmount,
@@ -24,7 +28,7 @@ const CartSummary = ({ productTitle = 'edX Subscription', productBlurb = 'Subscr
                                                     amount: annualAmount,
                                                     frequency: 'year',
                                                     currency,
-                                                }) }))] })] }), showCycleToggle && (_jsx("div", { className: "mt-2", children: _jsx(Button, { variant: "link", className: "cart-summary__cycle-toggle p-0", onClick: () => onCycleChange === null || onCycleChange === void 0 ? void 0 : onCycleChange(isMonthly ? 'annual' : 'monthly'), children: formatMessage(isMonthly ? messages.switchToAnnual : messages.switchToMonthly) }) }))] }), _jsxs(Card.Section, { className: "d-flex justify-content-between align-items-center px-0", children: [_jsx("span", { className: "font-weight-bold text-gray-900", children: formatMessage(messages.todaysTotal) }), _jsx("span", { className: "font-weight-bold mb-0 text-gray-900", children: formatMessage(messages.todaysTotalValue) })] })] }), course && (_jsx(CourseEnrollmentCard, { course: course, variant: "checkout" })), _jsxs("div", { className: "cart-summary__stats d-none d-lg-flex mt-3", children: [_jsxs("div", { className: "cart-summary__stat d-flex align-items-center mr-4", children: [_jsx(Icon, { src: People, className: "mr-2 text-muted", style: { width: '1.5rem', height: '1.5rem' } }), _jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-0", children: formatMessage(messages.learnersCount) }), _jsx("p", { className: "text-muted small mb-0", children: formatMessage(messages.learnersLabel) })] })] }), _jsxs("div", { className: "cart-summary__stat d-flex align-items-center", children: [_jsx(Icon, { src: Institution, className: "mr-2 text-muted", style: { width: '1.5rem', height: '1.5rem' } }), _jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-0", children: formatMessage(messages.institutionsCount) }), _jsx("p", { className: "text-muted small mb-0", children: formatMessage(messages.institutionsLabel) })] })] })] })] }));
+                                                }) }))] })] }), showCycleToggle && (_jsx("div", { className: "mt-1", children: _jsx(Button, { variant: "link", className: "cart-summary__cycle-toggle p-0", onClick: () => onCycleChange === null || onCycleChange === void 0 ? void 0 : onCycleChange(isMonthly ? 'annual' : 'monthly'), children: formatMessage(isMonthly ? messages.switchToAnnual : messages.switchToMonthly) }) }))] }), _jsxs(Card.Section, { className: "d-flex justify-content-between align-items-center p-0 pt-1", children: [_jsx("span", { className: "font-weight-bold text-gray-900", children: formatMessage(messages.todaysTotal) }), _jsx("span", { className: "font-weight-bold mb-0 text-gray-900", children: formatMessage(messages.todaysTotalValue) })] })] }), course && (_jsx(CourseEnrollmentCard, { course: course, variant: "checkout" })), _jsxs("div", { className: "cart-summary__stats d-none d-lg-flex mt-3", children: [_jsxs("div", { className: "cart-summary__stat d-flex align-items-center mr-4", children: [_jsx(Icon, { src: People, className: "mr-2 text-muted", style: { width: '1.5rem', height: '1.5rem' } }), _jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-0", children: formatMessage(messages.learnersCount) }), _jsx("p", { className: "text-muted small mb-0", children: formatMessage(messages.learnersLabel) })] })] }), _jsxs("div", { className: "cart-summary__stat d-flex align-items-center", children: [_jsx(Icon, { src: Institution, className: "mr-2 text-muted", style: { width: '1.5rem', height: '1.5rem' } }), _jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-0", children: formatMessage(messages.institutionsCount) }), _jsx("p", { className: "text-muted small mb-0", children: formatMessage(messages.institutionsLabel) })] })] })] })] }));
 };
 export default CartSummary;
 //# sourceMappingURL=CartSummary.js.map

package/dist/components/CartSummary/CartSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"CartSummary.js","sourceRoot":"","sources":["../../../src/components/CartSummary/CartSummary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,oBAAoB,MAAM,8CAA8C,CAAC;AAEhF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAgClC,MAAM,WAAW,GAAG,CAAC,EACnB,YAAY,GAAG,kBAAkB,EACjC,YAAY,GAAG,+DAA+D,EAC9E,aAAa,GAAG,IAAI,EACpB,oBAAoB,GAAG,IAAI,EAC3B,WAAW,GAAG,CAAC,EACf,YAAY,GAAG,KAAK,EACpB,QAAQ,GAAG,KAAK,EAChB,qBAAqB,EACrB,YAAY,GAAG,SAAS,EACxB,aAAa,EACb,mBAAmB,GAAG,KAAK,EAC3B,YAAY,EAAE,gBAAgB,GAAG,IAAI,EACrC,MAAM,GAAG,IAAI,GACI,EAAE,EAAE;IACrB,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,SAAS,GAAG,YAAY,KAAK,SAAS,CAAC;IAC7C,MAAM,eAAe,GAAG,mBAAmB,IAAI,CAAC,CAAC,aAAa,CAAC;IAE/D,MAAM,YAAY,GAAG,CACnB,qBAAqB,IAAI,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,gBAAgB,CACzE,CAAC,cAAc,EAAE,CAAC;IAEnB,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,MAAC,IAAI,IAAC,SAAS,EAAC,wBAAwB,aACtC,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,4DAA4D,aAClF,eAAM,SAAS,EAAC,gCAAgC,YAC7C,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,GAClC,EACP,MAAC,KAAK,IACJ,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,qCAAqC,aAE/C,KAAC,IAAI,IACH,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GACxC,EACD,aAAa,CAAC,QAAQ,CAAC,kBAAkB,EAAE;wCAC1C,KAAK,EAAE,YAAY;qCACpB,CAAC,IACI,IACK,EAEf,KAAC,IAAI,CAAC,OAAO,KAAG,EAEhB,KAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,UAAU,YAChC,eAAK,SAAS,EAAC,0BAA0B,aACvC,KAAC,gBAAgB,KAAG,EACpB,0BACE,YAAG,SAAS,EAAC,wCAAwC,YAClD,YAAY,GACX,EACJ,YAAG,SAAS,EAAC,0BAA0B,YAAE,YAAY,GAAK,IACtD,IACF,GACO,EAEf,KAAC,IAAI,CAAC,OAAO,KAAG,EAEhB,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,UAAU,aAChC,eAAK,SAAS,EAAC,uDAAuD,aACpE,eAAM,SAAS,EAAC,qBAAqB,YAClC,SAAS;4CACR,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC;4CAC7C,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,GACzC,EACP,eAAK,SAAS,EAAC,kCAAkC,aAC/C,cAAK,SAAS,EAAC,qCAAqC,YACjD,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,GAC/B,EACL,SAAS,CAAC,CAAC,CAAC,CACX,8BACE,cAAK,SAAS,EAAC,sCAAsC,YAClD,aAAa,CAAC,QAAQ,CAAC,gBAAgB,EAAE;4DACxC,MAAM,EAAE,aAAa;4DACrB,MAAM,EAAE,WAAW;yDACpB,CAAC,GACE,EACN,cAAK,SAAS,EAAC,sCAAsC,YAClD,aAAa,CAAC,QAAQ,CAAC,YAAY,EAAE;4DACpC,MAAM,EAAE,oBAAoB;4DAC5B,QAAQ;yDACT,CAAC,GACE,IACL,CACJ,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,sCAAsC,YAClD,aAAa,CAAC,QAAQ,CAAC,YAAY,EAAE;oDACpC,MAAM,EAAE,YAAY;oDACpB,SAAS,EAAE,MAAM;oDACjB,QAAQ;iDACT,CAAC,GACE,CACP,IACG,IACF,EACL,eAAe,IAAI,CAClB,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,gCAAgC,EAC1C,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,YAE/D,aAAa,CACZ,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAC/D,GACM,GACL,CACP,IACY,EAEf,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,wDAAwD,aAC9E,eAAM,SAAS,EAAC,gCAAgC,YAC7C,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAC/B,EACP,eAAM,SAAS,EAAC,qCAAqC,YAClD,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,GACpC,IACM,IACV,EAEN,MAAM,IAAI,CACT,KAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,UAAU,GAAG,CAC5D,EAGD,eAAK,SAAS,EAAC,2CAA2C,aACxD,eAAK,SAAS,EAAC,mDAAmD,aAChE,KAAC,IAAI,IACH,GAAG,EAAE,MAAM,EACX,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,GAC5C,EACF,0BACE,YAAG,SAAS,EAAC,uBAAuB,YACjC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,GACpC,EACJ,YAAG,SAAS,EAAC,uBAAuB,YACjC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,GACpC,IACA,IACF,EACN,eAAK,SAAS,EAAC,8CAA8C,aAC3D,KAAC,IAAI,IACH,GAAG,EAAE,WAAW,EAChB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,GAC5C,EACF,0BACE,YAAG,SAAS,EAAC,uBAAuB,YACjC,aAAa,CAAC,QAAQ,CAAC,iBAAiB,CAAC,GACxC,EACJ,YAAG,SAAS,EAAC,uBAAuB,YACjC,aAAa,CAAC,QAAQ,CAAC,iBAAiB,CAAC,GACxC,IACA,IACF,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import React from 'react';\nimport { Badge, Button, Card, Icon } from '@openedx/paragon';\nimport { Group, People, Institution } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport { EdxUnlimitedLogo } from '../BrandMarks/BrandMarks';\nimport CourseEnrollmentCard from '../CourseEnrollmentCard/CourseEnrollmentCard';\nimport type { CourseDetail } from '../../types';\nimport messages from './Messages';\n\nexport type BillingCycle = 'monthly' | 'annual';\n\nexport interface CartSummaryProps {\n  productTitle?: string,\n  productBlurb?: string,\n  /** Promotional monthly price amount e.g. \"39\" */\n  monthlyAmount?: string,\n  /** Regular monthly price after the promo period e.g. \"59\" */\n  monthlyRegularAmount?: string,\n  /** Length of the promotional period in months */\n  promoMonths?: number,\n  /** Annual price amount e.g. \"299\" */\n  annualAmount?: string,\n  currency?: string,\n  activeSubscriberCount?: number | null,\n  defaultCycle?: BillingCycle,\n  monthlyRenewalLabel?: string,\n  annualRenewalLabel?: string,\n  /** Called when the learner switches monthly ↔ annual (requires enableAnnualBilling). */\n  onCycleChange?: (cycle: BillingCycle) => void,\n  /**\n   * When true, shows the Switch to annual/monthly control.\n   * Controlled via ENABLE_ANNUAL_BILLING in site.config.*.tsx.\n   */\n  enableAnnualBilling?: boolean,\n  learnerCount?: number,\n  /** When set, shows the course enrollment preview card below the summary card. */\n  course?: CourseDetail | null,\n}\n\nconst CartSummary = ({\n  productTitle = 'edX Subscription',\n  productBlurb = 'Subscribe and get access to hundreds of courses and programs.',\n  monthlyAmount = '39',\n  monthlyRegularAmount = '59',\n  promoMonths = 3,\n  annualAmount = '299',\n  currency = 'USD',\n  activeSubscriberCount,\n  defaultCycle = 'monthly',\n  onCycleChange,\n  enableAnnualBilling = false,\n  learnerCount: learnerCountProp = 2203,\n  course = null,\n}: CartSummaryProps) => {\n  const { formatMessage } = useIntl();\n  const isMonthly = defaultCycle === 'monthly';\n  const showCycleToggle = enableAnnualBilling && !!onCycleChange;\n\n  const learnerCount = (\n    activeSubscriberCount != null ? activeSubscriberCount : learnerCountProp\n  ).toLocaleString();\n\n  return (\n    <div className=\"cart-summary \">\n      <Card className=\"cart-summary__card p-3\">\n        <Card.Section className=\"d-flex justify-content-between align-items-center p-0 pb-3\">\n          <span className=\"font-weight-bold text-gray-900\">\n            {formatMessage(messages.summaryHeading)}\n          </span>\n          <Badge\n            variant=\"light\"\n            className=\"d-flex align-items-center px-2 py-1\"\n          >\n            <Icon\n              src={Group}\n              className=\"mr-1\"\n              style={{ width: '1rem', height: '1rem' }}\n            />\n            {formatMessage(messages.learnersSubscribed, {\n              count: learnerCount,\n            })}\n          </Badge>\n        </Card.Section>\n\n        <Card.Divider />\n\n        <Card.Section className=\"p-0 py-3\">\n          <div className=\"d-flex align-items-start\">\n            <EdxUnlimitedLogo />\n            <div>\n              <p className=\"font-weight-bold mb-0 text-primary-500\">\n                {productTitle}\n              </p>\n              <p className=\"small mb-0 text-gray-900\">{productBlurb}</p>\n            </div>\n          </div>\n        </Card.Section>\n\n        <Card.Divider />\n\n        <Card.Section className=\"p-0 py-3\">\n          <div className=\"d-flex justify-content-between align-items-start mb-1\">\n            <span className=\"small text-gray-900\">\n              {isMonthly\n                ? formatMessage(messages.monthlySubscription)\n                : formatMessage(messages.annualSubscription)}\n            </span>\n            <div className=\"cart-summary__pricing text-right\">\n              <div className=\"text-success font-weight-bold small\">\n                {formatMessage(messages.trialLabel)}\n              </div>\n              {isMonthly ? (\n                <>\n                  <div className=\"small text-gray-900 font-weight-bold\">\n                    {formatMessage(messages.promotionalPrice, {\n                      amount: monthlyAmount,\n                      months: promoMonths,\n                    })}\n                  </div>\n                  <div className=\"small text-gray-900 font-weight-bold\">\n                    {formatMessage(messages.regularPrice, {\n                      amount: monthlyRegularAmount,\n                      currency,\n                    })}\n                  </div>\n                </>\n              ) : (\n                <div className=\"small text-gray-900 font-weight-bold\">\n                  {formatMessage(messages.priceDisplay, {\n                    amount: annualAmount,\n                    frequency: 'year',\n                    currency,\n                  })}\n                </div>\n              )}\n            </div>\n          </div>\n          {showCycleToggle && (\n            <div className=\"mt-2\">\n              <Button\n                variant=\"link\"\n                className=\"cart-summary__cycle-toggle p-0\"\n                onClick={() => onCycleChange?.(isMonthly ? 'annual' : 'monthly')}\n              >\n                {formatMessage(\n                  isMonthly ? messages.switchToAnnual : messages.switchToMonthly,\n                )}\n              </Button>\n            </div>\n          )}\n        </Card.Section>\n\n        <Card.Section className=\"d-flex justify-content-between align-items-center px-0\">\n          <span className=\"font-weight-bold text-gray-900\">\n            {formatMessage(messages.todaysTotal)}\n          </span>\n          <span className=\"font-weight-bold mb-0 text-gray-900\">\n            {formatMessage(messages.todaysTotalValue)}\n          </span>\n        </Card.Section>\n      </Card>\n\n      {course && (\n        <CourseEnrollmentCard course={course} variant=\"checkout\" />\n      )}\n\n      {/* Stats row */}\n      <div className=\"cart-summary__stats d-none d-lg-flex mt-3\">\n        <div className=\"cart-summary__stat d-flex align-items-center mr-4\">\n          <Icon\n            src={People}\n            className=\"mr-2 text-muted\"\n            style={{ width: '1.5rem', height: '1.5rem' }}\n          />\n          <div>\n            <p className=\"font-weight-bold mb-0\">\n              {formatMessage(messages.learnersCount)}\n            </p>\n            <p className=\"text-muted small mb-0\">\n              {formatMessage(messages.learnersLabel)}\n            </p>\n          </div>\n        </div>\n        <div className=\"cart-summary__stat d-flex align-items-center\">\n          <Icon\n            src={Institution}\n            className=\"mr-2 text-muted\"\n            style={{ width: '1.5rem', height: '1.5rem' }}\n          />\n          <div>\n            <p className=\"font-weight-bold mb-0\">\n              {formatMessage(messages.institutionsCount)}\n            </p>\n            <p className=\"text-muted small mb-0\">\n              {formatMessage(messages.institutionsLabel)}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default CartSummary;\n"]}
+{"version":3,"file":"CartSummary.js","sourceRoot":"","sources":["../../../src/components/CartSummary/CartSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Badge, Button, Card, Icon, Skeleton } from '@openedx/paragon';\nimport { Group, People, Institution } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport { EdxUnlimitedLogo } from '../BrandMarks/BrandMarks';\nimport CourseEnrollmentCard from '../CourseEnrollmentCard/CourseEnrollmentCard';\nimport type { CourseDetail } from '../../types';\nimport messages from './Messages';\n\nexport type BillingCycle = 'monthly' | 'annual';\n\nexport interface CartSummaryProps {\n  productTitle?: string,\n  productBlurb?: string,\n  /** Promotional monthly price amount e.g. \"39\" */\n  monthlyAmount?: string,\n  /** Regular monthly price after the promo period e.g. \"59\" */\n  monthlyRegularAmount?: string,\n  /** Length of the promotional period in months */\n  promoMonths?: number,\n  /** Annual price amount e.g. \"299\" */\n  annualAmount?: string,\n  currency?: string,\n  activeSubscriberCount?: number | null,\n  defaultCycle?: BillingCycle,\n  monthlyRenewalLabel?: string,\n  annualRenewalLabel?: string,\n  /** Called when the learner switches monthly ↔ annual. */\n  onCycleChange?: (cycle: BillingCycle) => void,\n  learnerCount?: number,\n  /** When set, shows the course enrollment preview card below the summary card. */\n  course?: CourseDetail | null,\n}\n\nconst CartSummary = ({\n  productTitle,\n  productBlurb,\n  monthlyAmount = '39',\n  monthlyRegularAmount = '59',\n  promoMonths = 3,\n  annualAmount = '299',\n  currency = 'USD',\n  activeSubscriberCount,\n  defaultCycle = 'monthly',\n  onCycleChange,\n  learnerCount: learnerCountProp,\n  course = null,\n}: CartSummaryProps) => {\n  const { formatMessage } = useIntl();\n  const isMonthly = defaultCycle === 'monthly';\n  const showCycleToggle = !!onCycleChange;\n  const title = productTitle ?? formatMessage(messages.productTitle);\n  const blurb = productBlurb ?? formatMessage(messages.productBlurb);\n\n  const subscriberCount = activeSubscriberCount ?? learnerCountProp ?? null;\n  const isSubscriberCountLoading = subscriberCount == null;\n\n  return (\n    <div className=\"cart-summary \">\n      <Card className=\"cart-summary__card p-3\">\n        <Card.Section className=\"d-flex justify-content-between align-items-center p-0 pb-3\">\n          <span className=\"font-weight-bold text-gray-900\">\n            {formatMessage(messages.summaryHeading)}\n          </span>\n          <Badge\n            variant=\"light\"\n            className=\"d-flex align-items-center px-2 py-1\"\n          >\n            <Icon\n              src={Group}\n              className=\"mr-1\"\n              style={{ width: '1rem', height: '1rem' }}\n            />\n            {isSubscriberCountLoading ? (\n              <span\n                className=\"cart-summary__count-skeleton\"\n                aria-busy=\"true\"\n                aria-label={formatMessage(messages.loadingSubscribers)}\n                data-testid=\"subscriber-count-skeleton\"\n              >\n                <Skeleton width={96} height={12} />\n              </span>\n            ) : (\n              formatMessage(messages.learnersSubscribed, {\n                count: subscriberCount.toLocaleString(),\n              })\n            )}\n          </Badge>\n        </Card.Section>\n\n        <Card.Divider />\n\n        <Card.Section className=\"p-0 py-3\">\n          <div className=\"d-flex align-items-start\">\n            <EdxUnlimitedLogo ariaLabel=\"edX Subscription\" />\n            <div>\n              <p className=\"font-weight-bold mb-0 text-primary-500\">\n                {title}\n              </p>\n              <p className=\"small mb-0 text-gray-900\">{blurb}</p>\n            </div>\n          </div>\n        </Card.Section>\n\n        <Card.Divider />\n\n        <Card.Section className=\"p-0 pt-3 pb-0\">\n          <div className=\"d-flex justify-content-between align-items-start mb-1\">\n            <span className=\"small text-gray-900\">\n              {isMonthly\n                ? formatMessage(messages.monthlySubscription)\n                : formatMessage(messages.annualSubscription)}\n            </span>\n            <div className=\"cart-summary__pricing text-right\">\n              <div className=\"text-success font-weight-bold small\">\n                {formatMessage(messages.trialLabel)}\n              </div>\n              {isMonthly ? (\n                <>\n                  <div className=\"small text-gray-900 font-weight-bold\">\n                    {formatMessage(messages.promotionalPrice, {\n                      amount: monthlyAmount,\n                      months: promoMonths,\n                    })}\n                  </div>\n                  <div className=\"small text-gray-900 font-weight-bold\">\n                    {formatMessage(messages.regularPrice, {\n                      amount: monthlyRegularAmount,\n                      currency,\n                    })}\n                  </div>\n                </>\n              ) : (\n                <div className=\"small text-gray-900 font-weight-bold\">\n                  {formatMessage(messages.priceDisplay, {\n                    amount: annualAmount,\n                    frequency: 'year',\n                    currency,\n                  })}\n                </div>\n              )}\n            </div>\n          </div>\n          {showCycleToggle && (\n            <div className=\"mt-1\">\n              <Button\n                variant=\"link\"\n                className=\"cart-summary__cycle-toggle p-0\"\n                onClick={() => onCycleChange?.(isMonthly ? 'annual' : 'monthly')}\n              >\n                {formatMessage(\n                  isMonthly ? messages.switchToAnnual : messages.switchToMonthly,\n                )}\n              </Button>\n            </div>\n          )}\n        </Card.Section>\n\n        <Card.Section className=\"d-flex justify-content-between align-items-center p-0 pt-1\">\n          <span className=\"font-weight-bold text-gray-900\">\n            {formatMessage(messages.todaysTotal)}\n          </span>\n          <span className=\"font-weight-bold mb-0 text-gray-900\">\n            {formatMessage(messages.todaysTotalValue)}\n          </span>\n        </Card.Section>\n      </Card>\n\n      {course && (\n        <CourseEnrollmentCard course={course} variant=\"checkout\" />\n      )}\n\n      {/* Stats row */}\n      <div className=\"cart-summary__stats d-none d-lg-flex mt-3\">\n        <div className=\"cart-summary__stat d-flex align-items-center mr-4\">\n          <Icon\n            src={People}\n            className=\"mr-2 text-muted\"\n            style={{ width: '1.5rem', height: '1.5rem' }}\n          />\n          <div>\n            <p className=\"font-weight-bold mb-0\">\n              {formatMessage(messages.learnersCount)}\n            </p>\n            <p className=\"text-muted small mb-0\">\n              {formatMessage(messages.learnersLabel)}\n            </p>\n          </div>\n        </div>\n        <div className=\"cart-summary__stat d-flex align-items-center\">\n          <Icon\n            src={Institution}\n            className=\"mr-2 text-muted\"\n            style={{ width: '1.5rem', height: '1.5rem' }}\n          />\n          <div>\n            <p className=\"font-weight-bold mb-0\">\n              {formatMessage(messages.institutionsCount)}\n            </p>\n            <p className=\"text-muted small mb-0\">\n              {formatMessage(messages.institutionsLabel)}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default CartSummary;\n"]}

package/dist/components/CartSummary/Messages.d.ts

@@ -4,11 +4,26 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    productTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    productBlurb: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     learnersSubscribed: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    loadingSubscribers: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     monthlySubscription: {
         id: string;
         defaultMessage: string;

package/dist/components/CartSummary/Messages.js

@@ -6,11 +6,26 @@ const messages = defineMessages({
         defaultMessage: 'Summary',
         description: 'Heading for the order summary card',
     },
+    productTitle: {
+        id: 'checkout.cartSummary.productTitle',
+        defaultMessage: 'edX Subscription',
+        description: 'Product name shown in the order summary card',
+    },
+    productBlurb: {
+        id: 'checkout.cartSummary.productBlurb',
+        defaultMessage: 'Subscribe and get access to hundreds of courses and programs.',
+        description: 'Short product description under the name in the order summary card',
+    },
     learnersSubscribed: {
         id: 'checkout.cartSummary.learnersSubscribed',
         defaultMessage: '{count} learners subscribed',
         description: 'Badge showing number of active learners',
     },
+    loadingSubscribers: {
+        id: 'checkout.cartSummary.loadingSubscribers',
+        defaultMessage: 'Loading subscriber count',
+        description: 'Accessible label for the subscriber count skeleton',
+    },
     monthlySubscription: {
         id: 'checkout.cartSummary.monthlySubscription',
         defaultMessage: 'Monthly subscription',

package/dist/components/CartSummary/Messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/CartSummary/Messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,cAAc;IACd,cAAc,EAAE;QACd,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,oCAAoC;KAClD;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,6BAA6B;QAC7C,WAAW,EAAE,yCAAyC;KACvD;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,0CAA0C;QAC9C,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,iCAAiC;KAC/C;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,gCAAgC;KAC9C;IACD,UAAU,EAAE;QACV,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,wBAAwB;KACtC;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,kCAAkC;QAClD,WAAW,EAAE,+EAA+E;KAC7F;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,8BAA8B;QAC9C,WAAW,EAAE,yEAAyE;KACvF;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,kCAAkC;QAClD,WAAW,EAAE,kCAAkC;KAChD;IACD,WAAW,EAAE;QACX,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,mCAAmC;KACjD;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,IAAI;QACpB,WAAW,EAAE,mCAAmC;KACjD;IACD,cAAc,EAAE;QACd,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,iDAAiD;KAC/D;IACD,eAAe,EAAE;QACf,EAAE,EAAE,sCAAsC;QAC1C,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,kDAAkD;KAChE;IACD,aAAa,EAAE;QACb,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE,qBAAqB;KACnC;IACD,aAAa,EAAE;QACb,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,qCAAqC;KACnD;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,wCAAwC;QAC5C,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE,gCAAgC;KAC9C;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,wCAAwC;QAC5C,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,yCAAyC;KACvD;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  // CartSummary\n  summaryHeading: {\n    id: 'checkout.cartSummary.summaryHeading',\n    defaultMessage: 'Summary',\n    description: 'Heading for the order summary card',\n  },\n  learnersSubscribed: {\n    id: 'checkout.cartSummary.learnersSubscribed',\n    defaultMessage: '{count} learners subscribed',\n    description: 'Badge showing number of active learners',\n  },\n  monthlySubscription: {\n    id: 'checkout.cartSummary.monthlySubscription',\n    defaultMessage: 'Monthly subscription',\n    description: 'Label for monthly billing cycle',\n  },\n  annualSubscription: {\n    id: 'checkout.cartSummary.annualSubscription',\n    defaultMessage: 'Annual subscription',\n    description: 'Label for annual billing cycle',\n  },\n  trialLabel: {\n    id: 'checkout.cartSummary.trialLabel',\n    defaultMessage: '7-day free trial',\n    description: 'Free trial badge label',\n  },\n  promotionalPrice: {\n    id: 'checkout.cartSummary.promotionalPrice',\n    defaultMessage: '${amount}/mo for {months} months',\n    description: 'Promotional monthly price for an introductory period e.g. $39/mo for 3 months',\n  },\n  regularPrice: {\n    id: 'checkout.cartSummary.regularPrice',\n    defaultMessage: 'then ${amount}/mo {currency}',\n    description: 'Regular monthly price after the promotional period e.g. then $59/mo USD',\n  },\n  priceDisplay: {\n    id: 'checkout.cartSummary.priceDisplay',\n    defaultMessage: '${amount}/{frequency} {currency}',\n    description: 'Price display e.g. $299/year USD',\n  },\n  todaysTotal: {\n    id: 'checkout.cartSummary.todaysTotal',\n    defaultMessage: \"Today's total\",\n    description: \"Label for today's total price row\",\n  },\n  todaysTotalValue: {\n    id: 'checkout.cartSummary.todaysTotalValue',\n    defaultMessage: '$0',\n    description: \"Today's total amount during trial\",\n  },\n  switchToAnnual: {\n    id: 'checkout.cartSummary.switchToAnnual',\n    defaultMessage: 'Switch to annual',\n    description: 'Toggle button label to switch to annual billing',\n  },\n  switchToMonthly: {\n    id: 'checkout.cartSummary.switchToMonthly',\n    defaultMessage: 'Switch to monthly',\n    description: 'Toggle button label to switch to monthly billing',\n  },\n  learnersCount: {\n    id: 'checkout.cartSummary.learnersCount',\n    defaultMessage: '100M',\n    description: 'Total learners stat',\n  },\n  learnersLabel: {\n    id: 'checkout.cartSummary.learnersLabel',\n    defaultMessage: 'Learners',\n    description: 'Label under the learners count stat',\n  },\n  institutionsCount: {\n    id: 'checkout.cartSummary.institutionsCount',\n    defaultMessage: '250+',\n    description: 'Expert institutions count stat',\n  },\n  institutionsLabel: {\n    id: 'checkout.cartSummary.institutionsLabel',\n    defaultMessage: 'Expert institutions',\n    description: 'Label under the institutions count stat',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/CartSummary/Messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,cAAc;IACd,cAAc,EAAE;QACd,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,oCAAoC;KAClD;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,8CAA8C;KAC5D;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,+DAA+D;QAC/E,WAAW,EAAE,oEAAoE;KAClF;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,6BAA6B;QAC7C,WAAW,EAAE,yCAAyC;KACvD;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,0BAA0B;QAC1C,WAAW,EAAE,oDAAoD;KAClE;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,0CAA0C;QAC9C,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,iCAAiC;KAC/C;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,gCAAgC;KAC9C;IACD,UAAU,EAAE;QACV,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,wBAAwB;KACtC;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,kCAAkC;QAClD,WAAW,EAAE,+EAA+E;KAC7F;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,8BAA8B;QAC9C,WAAW,EAAE,yEAAyE;KACvF;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,kCAAkC;QAClD,WAAW,EAAE,kCAAkC;KAChD;IACD,WAAW,EAAE;QACX,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,mCAAmC;KACjD;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,IAAI;QACpB,WAAW,EAAE,mCAAmC;KACjD;IACD,cAAc,EAAE;QACd,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,iDAAiD;KAC/D;IACD,eAAe,EAAE;QACf,EAAE,EAAE,sCAAsC;QAC1C,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,kDAAkD;KAChE;IACD,aAAa,EAAE;QACb,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE,qBAAqB;KACnC;IACD,aAAa,EAAE;QACb,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,qCAAqC;KACnD;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,wCAAwC;QAC5C,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE,gCAAgC;KAC9C;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,wCAAwC;QAC5C,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,yCAAyC;KACvD;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  // CartSummary\n  summaryHeading: {\n    id: 'checkout.cartSummary.summaryHeading',\n    defaultMessage: 'Summary',\n    description: 'Heading for the order summary card',\n  },\n  productTitle: {\n    id: 'checkout.cartSummary.productTitle',\n    defaultMessage: 'edX Subscription',\n    description: 'Product name shown in the order summary card',\n  },\n  productBlurb: {\n    id: 'checkout.cartSummary.productBlurb',\n    defaultMessage: 'Subscribe and get access to hundreds of courses and programs.',\n    description: 'Short product description under the name in the order summary card',\n  },\n  learnersSubscribed: {\n    id: 'checkout.cartSummary.learnersSubscribed',\n    defaultMessage: '{count} learners subscribed',\n    description: 'Badge showing number of active learners',\n  },\n  loadingSubscribers: {\n    id: 'checkout.cartSummary.loadingSubscribers',\n    defaultMessage: 'Loading subscriber count',\n    description: 'Accessible label for the subscriber count skeleton',\n  },\n  monthlySubscription: {\n    id: 'checkout.cartSummary.monthlySubscription',\n    defaultMessage: 'Monthly subscription',\n    description: 'Label for monthly billing cycle',\n  },\n  annualSubscription: {\n    id: 'checkout.cartSummary.annualSubscription',\n    defaultMessage: 'Annual subscription',\n    description: 'Label for annual billing cycle',\n  },\n  trialLabel: {\n    id: 'checkout.cartSummary.trialLabel',\n    defaultMessage: '7-day free trial',\n    description: 'Free trial badge label',\n  },\n  promotionalPrice: {\n    id: 'checkout.cartSummary.promotionalPrice',\n    defaultMessage: '${amount}/mo for {months} months',\n    description: 'Promotional monthly price for an introductory period e.g. $39/mo for 3 months',\n  },\n  regularPrice: {\n    id: 'checkout.cartSummary.regularPrice',\n    defaultMessage: 'then ${amount}/mo {currency}',\n    description: 'Regular monthly price after the promotional period e.g. then $59/mo USD',\n  },\n  priceDisplay: {\n    id: 'checkout.cartSummary.priceDisplay',\n    defaultMessage: '${amount}/{frequency} {currency}',\n    description: 'Price display e.g. $299/year USD',\n  },\n  todaysTotal: {\n    id: 'checkout.cartSummary.todaysTotal',\n    defaultMessage: \"Today's total\",\n    description: \"Label for today's total price row\",\n  },\n  todaysTotalValue: {\n    id: 'checkout.cartSummary.todaysTotalValue',\n    defaultMessage: '$0',\n    description: \"Today's total amount during trial\",\n  },\n  switchToAnnual: {\n    id: 'checkout.cartSummary.switchToAnnual',\n    defaultMessage: 'Switch to annual',\n    description: 'Toggle button label to switch to annual billing',\n  },\n  switchToMonthly: {\n    id: 'checkout.cartSummary.switchToMonthly',\n    defaultMessage: 'Switch to monthly',\n    description: 'Toggle button label to switch to monthly billing',\n  },\n  learnersCount: {\n    id: 'checkout.cartSummary.learnersCount',\n    defaultMessage: '100M',\n    description: 'Total learners stat',\n  },\n  learnersLabel: {\n    id: 'checkout.cartSummary.learnersLabel',\n    defaultMessage: 'Learners',\n    description: 'Label under the learners count stat',\n  },\n  institutionsCount: {\n    id: 'checkout.cartSummary.institutionsCount',\n    defaultMessage: '250+',\n    description: 'Expert institutions count stat',\n  },\n  institutionsLabel: {\n    id: 'checkout.cartSummary.institutionsLabel',\n    defaultMessage: 'Expert institutions',\n    description: 'Label under the institutions count stat',\n  },\n});\n\nexport default messages;\n"]}

package/dist/components/Checkout/Checkout.d.ts

@@ -2,11 +2,6 @@ import type { UseCheckoutOptions } from '../../data/hooks/useCheckout';
 export type CheckoutProps = UseCheckoutOptions & {
     /** Homepage URL for the country-unavailable modal CTA. */
     homeUrl?: string;
-    /**
-     * When true, learners can switch between monthly and annual billing.
-     * Sourced from ENABLE_ANNUAL_BILLING in site.config.*.tsx.
-     */
-    enableAnnualBilling?: boolean;
 };
-declare const Checkout: ({ homeUrl, enableAnnualBilling, ...props }: CheckoutProps) => import("react/jsx-runtime").JSX.Element;
+declare const Checkout: ({ homeUrl, ...props }: CheckoutProps) => import("react/jsx-runtime").JSX.Element;
 export default Checkout;

package/dist/components/Checkout/Checkout.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
 import { Alert, Col, Row } from '@openedx/paragon';
 import { Error as ErrorIcon } from '@openedx/paragon/icons';
 import useCheckout from '../../data/hooks/useCheckout';
@@ -33,13 +32,8 @@ function resolvePurchasedCycle(selectedCycle, planName, renewalType) {
 }
 const Checkout = (_a) => {
     var _b, _c, _d, _e, _f;
-    var { homeUrl = '/', enableAnnualBilling = false } = _a, props = __rest(_a, ["homeUrl", "enableAnnualBilling"]);
+    var { homeUrl = '/' } = _a, props = __rest(_a, ["homeUrl"]);
     const c = useCheckout(props);
-    useEffect(() => {
-        if (!enableAnnualBilling && c.selectedCycle !== 'monthly') {
-            c.setCycle('monthly');
-        }
-    }, [enableAnnualBilling, c.selectedCycle, c.setCycle]);
     const showForm = c.phase === 'init'
         || c.phase === 'ready'
         || c.phase === 'failed'
@@ -51,10 +45,7 @@ const Checkout = (_a) => {
     const isBillingCountryBlocked = GATE_CHECK_COUNTRY
         && !!c.billing.country
         && !ALLOWED_CHECKOUT_COUNTRIES.includes(c.billing.country);
-    // Keep annual selection only when the feature flag is on.
-    const selectedCycle = enableAnnualBilling
-        ? c.selectedCycle
-        : 'monthly';
+    const selectedCycle = c.selectedCycle;
     const purchasedCycle = resolvePurchasedCycle(selectedCycle, (_b = c.subscriptionDetails) === null || _b === void 0 ? void 0 : _b.planName, (_c = c.subscriptionDetails) === null || _c === void 0 ? void 0 : _c.renewalType);
     const purchasedPrice = getPlanPrice(c.billingPlans, purchasedCycle);
     const handleStartCourse = () => {
@@ -70,9 +61,9 @@ const Checkout = (_a) => {
         ? [c.course.tBrandText, c.course.maName].filter(Boolean).join(': ')
         : null;
     return (_jsxs(Row, { className: "checkout__container bg-light-200", children: [_jsx(CountryUnavailableModal, { isOpen: isBillingCountryBlocked, homeUrl: homeUrl }), _jsx(Col, { xs: 12, className: "d-lg-none", children: _jsx("h1", { className: "font-weight-bold text-primary-900", children: "Checkout" }) }), _jsx(Col, { xs: 12, children: _jsxs(Row, { className: "flex-column-reverse gap-5 flex-lg-row", children: [_jsx(Col, { xs: 12, lg: 7, xxl: 9, className: "payment__options", children: _jsxs("div", { children: [_jsx("h1", { className: "font-weight-bold text-primary-900 d-none d-lg-block", children: "Checkout" }), c.error && (_jsx(Alert, { variant: "danger", icon: ErrorIcon, dismissible: true, onClose: c.clearError, children: c.error })), showForm && (_jsxs(_Fragment, { children: [c.phase === 'failed' && (_jsx(Alert, { variant: "danger", icon: ErrorIcon, className: "mb-3", children: c.lastComment
-                                                    || 'Your payment could not be processed. Please check your card details and try again.' })), _jsx(PaymentForm, { billing: c.billing, setField: c.setField, numberMountRef: c.numberMountRef, expiryMountRef: c.expiryMountRef, cvcMountRef: c.cvcMountRef, cardError: c.cardError, stripeReady: c.stripeReady, sessionReady: c.sessionReady, submitting: isSubmitting, onPlaceOrder: c.placeOrder, trialEnd: displayEnd, priceToShow: selectedCycle === 'monthly' ? monthlyPrice : annualPrice, cycleToShow: selectedCycle === 'monthly' ? 'monthly' : 'annual', userCountry: c.userCountry })] })), c.phase === 'success' && (_jsx(SuccessScreen, { subscriptionBiId: ((_d = c.subscriptionDetails) === null || _d === void 0 ? void 0 : _d.biId) || '', cardLast4: ((_e = c.subscriptionDetails) === null || _e === void 0 ? void 0 : _e.cardLast4) || '', purchaseDate: displayStart, trialStart: displayStart, trialEnd: displayEnd, priceToShow: purchasedCycle === 'monthly'
+                                                    || 'Your payment could not be processed. Please check your card details and try again.' })), _jsx(PaymentForm, { billing: c.billing, setField: c.setField, numberMountRef: c.numberMountRef, expiryMountRef: c.expiryMountRef, cvcMountRef: c.cvcMountRef, cardError: c.cardError, stripeReady: c.stripeReady, sessionReady: c.sessionReady, submitting: isSubmitting, onPlaceOrder: c.placeOrder, trialEnd: displayEnd, priceToShow: selectedCycle === 'monthly' ? monthlyPrice : annualPrice, cycleToShow: selectedCycle === 'monthly' ? 'monthly' : 'annual', userCountry: c.userCountry, monthlyRegularAmount: monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.amount })] })), c.phase === 'success' && (_jsx(SuccessScreen, { subscriptionBiId: ((_d = c.subscriptionDetails) === null || _d === void 0 ? void 0 : _d.biId) || '', cardLast4: ((_e = c.subscriptionDetails) === null || _e === void 0 ? void 0 : _e.cardLast4) || '', purchaseDate: displayStart, trialStart: displayStart, trialEnd: displayEnd, priceToShow: purchasedCycle === 'monthly'
                                             ? monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.label
-                                            : annualPrice === null || annualPrice === void 0 ? void 0 : annualPrice.label, cycleToShow: purchasedCycle === 'monthly' ? 'monthly' : 'annual', courseLabel: courseLabel, onFindCourse: handleStartCourse })), c.phase === 'blocked' && (_jsx(BlockedScreen, { detail: c.lastComment }))] }) }), _jsx(Col, { xs: 12, lg: 5, xxl: 3, className: "payment__summary", children: c.phase === 'success' ? (_jsx(EnrollmentSummary, { amount: purchasedPrice === null || purchasedPrice === void 0 ? void 0 : purchasedPrice.amount, currency: purchasedPrice === null || purchasedPrice === void 0 ? void 0 : purchasedPrice.currency, cycleToShow: purchasedCycle, course: c.course, onStartCourse: handleStartCourse })) : (_jsx(CartSummary, { monthlyRegularAmount: monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.amount, annualAmount: annualPrice === null || annualPrice === void 0 ? void 0 : annualPrice.amount, currency: (_f = monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.currency) !== null && _f !== void 0 ? _f : annualPrice === null || annualPrice === void 0 ? void 0 : annualPrice.currency, monthlyRenewalLabel: getRenewalLabel(c.billingPlans, 'monthly'), annualRenewalLabel: getRenewalLabel(c.billingPlans, 'annual'), activeSubscriberCount: c.activeSubscriberCount, defaultCycle: selectedCycle, onCycleChange: c.setCycle, enableAnnualBilling: enableAnnualBilling, course: c.course })) })] }) })] }));
+                                            : annualPrice === null || annualPrice === void 0 ? void 0 : annualPrice.label, cycleToShow: purchasedCycle === 'monthly' ? 'monthly' : 'annual', courseLabel: courseLabel, onFindCourse: handleStartCourse })), c.phase === 'blocked' && (_jsx(BlockedScreen, { detail: c.lastComment }))] }) }), _jsx(Col, { xs: 12, lg: 5, xxl: 3, className: "payment__summary", children: c.phase === 'success' ? (_jsx(EnrollmentSummary, { amount: purchasedPrice === null || purchasedPrice === void 0 ? void 0 : purchasedPrice.amount, monthlyRegularAmount: monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.amount, currency: purchasedPrice === null || purchasedPrice === void 0 ? void 0 : purchasedPrice.currency, cycleToShow: purchasedCycle, course: c.course, onStartCourse: handleStartCourse })) : (_jsx(CartSummary, { monthlyRegularAmount: monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.amount, annualAmount: annualPrice === null || annualPrice === void 0 ? void 0 : annualPrice.amount, currency: (_f = monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.currency) !== null && _f !== void 0 ? _f : annualPrice === null || annualPrice === void 0 ? void 0 : annualPrice.currency, monthlyRenewalLabel: getRenewalLabel(c.billingPlans, 'monthly'), annualRenewalLabel: getRenewalLabel(c.billingPlans, 'annual'), activeSubscriberCount: c.activeSubscriberCount, defaultCycle: selectedCycle, onCycleChange: c.setCycle, course: c.course })) })] }) })] }));
 };
 export default Checkout;
 //# sourceMappingURL=Checkout.js.map

package/dist/components/Checkout/Checkout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkout.js","sourceRoot":"","sources":["../../../src/components/Checkout/Checkout.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport { Alert, Col, Row } from '@openedx/paragon';\nimport { Error as ErrorIcon } from '@openedx/paragon/icons';\nimport useCheckout from '../../data/hooks/useCheckout';\nimport type { UseCheckoutOptions } from '../../data/hooks/useCheckout';\nimport { ALLOWED_CHECKOUT_COUNTRIES, GATE_CHECK_COUNTRY } from '../../constants';\nimport CartSummary from '../CartSummary/CartSummary';\nimport EnrollmentSummary from '../EnrollmentSummary/EnrollmentSummary';\nimport PaymentForm from '../PaymentForm/PaymentForm';\nimport CountryUnavailableModal from '../CountryUnavailableModal/CountryUnavailableModal';\nimport { getPlanPrice, getRenewalLabel } from '../../utils/billingDetails';\nimport { getTrialDateRange } from '@src/utils';\nimport { SuccessScreen, BlockedScreen } from '../StatusScreens/StatusScreens';\nimport type { BillingCycle } from '../../types';\n\n/** Resolve purchased cycle from subscription details, falling back to checkout selection. */\nfunction resolvePurchasedCycle(\n  selectedCycle: BillingCycle,\n  planName?: string | null,\n  renewalType?: string | null,\n): BillingCycle {\n  const haystack = `${planName ?? ''} ${renewalType ?? ''}`.toLowerCase();\n  if (haystack.includes('annual') || haystack.includes('year')) return 'annual';\n  if (haystack.includes('month')) return 'monthly';\n  return selectedCycle;\n}\n\nexport type CheckoutProps = UseCheckoutOptions & {\n  /** Homepage URL for the country-unavailable modal CTA. */\n  homeUrl?: string,\n  /**\n   * When true, learners can switch between monthly and annual billing.\n   * Sourced from ENABLE_ANNUAL_BILLING in site.config.*.tsx.\n   */\n  enableAnnualBilling?: boolean,\n};\n\nconst Checkout = ({\n  homeUrl = '/',\n  enableAnnualBilling = false,\n  ...props\n}: CheckoutProps) => {\n  const c = useCheckout(props);\n\n  useEffect(() => {\n    if (!enableAnnualBilling && c.selectedCycle !== 'monthly') {\n      c.setCycle('monthly');\n    }\n  }, [enableAnnualBilling, c.selectedCycle, c.setCycle]);\n\n  const showForm\n    = c.phase === 'init'\n      || c.phase === 'ready'\n      || c.phase === 'failed'\n      || c.phase === 'processing';\n  const monthlyPrice = getPlanPrice(c.billingPlans, 'monthly');\n  const annualPrice = getPlanPrice(c.billingPlans, 'annual');\n  const isSubmitting = c.processingSubscription;\n\n  const { displayStart, displayEnd } = getTrialDateRange();\n\n  const isBillingCountryBlocked = GATE_CHECK_COUNTRY\n    && !!c.billing.country\n    && !ALLOWED_CHECKOUT_COUNTRIES.includes(c.billing.country);\n\n  // Keep annual selection only when the feature flag is on.\n  const selectedCycle: BillingCycle = enableAnnualBilling\n    ? c.selectedCycle\n    : 'monthly';\n\n  const purchasedCycle = resolvePurchasedCycle(\n    selectedCycle,\n    c.subscriptionDetails?.planName,\n    c.subscriptionDetails?.renewalType,\n  );\n  const purchasedPrice = getPlanPrice(c.billingPlans, purchasedCycle);\n\n  const handleStartCourse = () => {\n    if (c.course?.tUrlCourse) {\n      window.location.href = c.course.tUrlCourse;\n    } else {\n      window.location.href = '/subscription-search';\n    }\n  };\n\n  const courseLabel = c.course\n    ? [c.course.tBrandText, c.course.maName].filter(Boolean).join(': ')\n    : null;\n\n  return (\n    <Row className=\"checkout__container bg-light-200\">\n      <CountryUnavailableModal\n        isOpen={isBillingCountryBlocked}\n        homeUrl={homeUrl}\n      />\n      <Col xs={12} className=\"d-lg-none\">\n        <h1 className=\"font-weight-bold text-primary-900\">Checkout</h1>\n      </Col>\n      <Col xs={12}>\n        <Row className=\"flex-column-reverse gap-5 flex-lg-row\">\n          {/* ── LEFT ── */}\n          <Col xs={12} lg={7} xxl={9} className=\"payment__options\">\n            <div>\n              <h1 className=\"font-weight-bold text-primary-900 d-none d-lg-block\">\n                Checkout\n              </h1>\n              {c.error && (\n                <Alert\n                  variant=\"danger\"\n                  icon={ErrorIcon}\n                  dismissible\n                  onClose={c.clearError}\n                >\n                  {c.error}\n                </Alert>\n              )}\n\n              {showForm && (\n                <>\n                  {c.phase === 'failed' && (\n                    <Alert variant=\"danger\" icon={ErrorIcon} className=\"mb-3\">\n                      {c.lastComment\n                      || 'Your payment could not be processed. Please check your card details and try again.'}\n                    </Alert>\n                  )}\n                  <PaymentForm\n                    billing={c.billing}\n                    setField={c.setField}\n                    numberMountRef={c.numberMountRef}\n                    expiryMountRef={c.expiryMountRef}\n                    cvcMountRef={c.cvcMountRef}\n                    cardError={c.cardError}\n                    stripeReady={c.stripeReady}\n                    sessionReady={c.sessionReady}\n                    submitting={isSubmitting}\n                    onPlaceOrder={c.placeOrder}\n                    trialEnd={displayEnd}\n                    priceToShow={\n                      selectedCycle === 'monthly' ? monthlyPrice : annualPrice\n                    }\n                    cycleToShow={\n                      selectedCycle === 'monthly' ? 'monthly' : 'annual'\n                    }\n                    userCountry={c.userCountry}\n                  />\n                </>\n              )}\n\n              {c.phase === 'success' && (\n                <SuccessScreen\n                  subscriptionBiId={c.subscriptionDetails?.biId || ''}\n                  cardLast4={c.subscriptionDetails?.cardLast4 || ''}\n                  purchaseDate={displayStart}\n                  trialStart={displayStart}\n                  trialEnd={displayEnd}\n                  priceToShow={\n                    purchasedCycle === 'monthly'\n                      ? monthlyPrice?.label\n                      : annualPrice?.label\n                  }\n                  cycleToShow={\n                    purchasedCycle === 'monthly' ? 'monthly' : 'annual'\n                  }\n                  courseLabel={courseLabel}\n                  onFindCourse={handleStartCourse}\n                />\n              )}\n\n              {c.phase === 'blocked' && (\n                <BlockedScreen detail={c.lastComment} />\n              )}\n            </div>\n          </Col>\n\n          {/* ── RIGHT — swaps to EnrollmentSummary on success ── */}\n          <Col xs={12} lg={5} xxl={3} className=\"payment__summary\">\n            {c.phase === 'success' ? (\n              <EnrollmentSummary\n                amount={purchasedPrice?.amount}\n                currency={purchasedPrice?.currency}\n                cycleToShow={purchasedCycle}\n                course={c.course}\n                onStartCourse={handleStartCourse}\n              />\n            ) : (\n              <CartSummary\n                monthlyRegularAmount={monthlyPrice?.amount}\n                annualAmount={annualPrice?.amount}\n                currency={monthlyPrice?.currency ?? annualPrice?.currency}\n                monthlyRenewalLabel={getRenewalLabel(c.billingPlans, 'monthly')}\n                annualRenewalLabel={getRenewalLabel(c.billingPlans, 'annual')}\n                activeSubscriberCount={c.activeSubscriberCount}\n                defaultCycle={selectedCycle}\n                onCycleChange={c.setCycle}\n                enableAnnualBilling={enableAnnualBilling}\n                course={c.course}\n              />\n            )}\n          </Col>\n        </Row>\n      </Col>\n    </Row>\n  );\n};\n\nexport default Checkout;\n"]}
+{"version":3,"file":"Checkout.js","sourceRoot":"","sources":["../../../src/components/Checkout/Checkout.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Alert, Col, Row } from '@openedx/paragon';\nimport { Error as ErrorIcon } from '@openedx/paragon/icons';\nimport useCheckout from '../../data/hooks/useCheckout';\nimport type { UseCheckoutOptions } from '../../data/hooks/useCheckout';\nimport { ALLOWED_CHECKOUT_COUNTRIES, GATE_CHECK_COUNTRY } from '../../constants';\nimport CartSummary from '../CartSummary/CartSummary';\nimport EnrollmentSummary from '../EnrollmentSummary/EnrollmentSummary';\nimport PaymentForm from '../PaymentForm/PaymentForm';\nimport CountryUnavailableModal from '../CountryUnavailableModal/CountryUnavailableModal';\nimport { getPlanPrice, getRenewalLabel } from '../../utils/billingDetails';\nimport { getTrialDateRange } from '@src/utils';\nimport { SuccessScreen, BlockedScreen } from '../StatusScreens/StatusScreens';\nimport type { BillingCycle } from '../../types';\n\n/** Resolve purchased cycle from subscription details, falling back to checkout selection. */\nfunction resolvePurchasedCycle(\n  selectedCycle: BillingCycle,\n  planName?: string | null,\n  renewalType?: string | null,\n): BillingCycle {\n  const haystack = `${planName ?? ''} ${renewalType ?? ''}`.toLowerCase();\n  if (haystack.includes('annual') || haystack.includes('year')) return 'annual';\n  if (haystack.includes('month')) return 'monthly';\n  return selectedCycle;\n}\n\nexport type CheckoutProps = UseCheckoutOptions & {\n  /** Homepage URL for the country-unavailable modal CTA. */\n  homeUrl?: string,\n};\n\nconst Checkout = ({\n  homeUrl = '/',\n  ...props\n}: CheckoutProps) => {\n  const c = useCheckout(props);\n\n  const showForm\n    = c.phase === 'init'\n      || c.phase === 'ready'\n      || c.phase === 'failed'\n      || c.phase === 'processing';\n  const monthlyPrice = getPlanPrice(c.billingPlans, 'monthly');\n  const annualPrice = getPlanPrice(c.billingPlans, 'annual');\n  const isSubmitting = c.processingSubscription;\n\n  const { displayStart, displayEnd } = getTrialDateRange();\n\n  const isBillingCountryBlocked = GATE_CHECK_COUNTRY\n    && !!c.billing.country\n    && !ALLOWED_CHECKOUT_COUNTRIES.includes(c.billing.country);\n\n  const selectedCycle: BillingCycle = c.selectedCycle;\n\n  const purchasedCycle = resolvePurchasedCycle(\n    selectedCycle,\n    c.subscriptionDetails?.planName,\n    c.subscriptionDetails?.renewalType,\n  );\n  const purchasedPrice = getPlanPrice(c.billingPlans, purchasedCycle);\n\n  const handleStartCourse = () => {\n    if (c.course?.tUrlCourse) {\n      window.location.href = c.course.tUrlCourse;\n    } else {\n      window.location.href = '/subscription-search';\n    }\n  };\n\n  const courseLabel = c.course\n    ? [c.course.tBrandText, c.course.maName].filter(Boolean).join(': ')\n    : null;\n\n  return (\n    <Row className=\"checkout__container bg-light-200\">\n      <CountryUnavailableModal\n        isOpen={isBillingCountryBlocked}\n        homeUrl={homeUrl}\n      />\n      <Col xs={12} className=\"d-lg-none\">\n        <h1 className=\"font-weight-bold text-primary-900\">Checkout</h1>\n      </Col>\n      <Col xs={12}>\n        <Row className=\"flex-column-reverse gap-5 flex-lg-row\">\n          {/* ── LEFT ── */}\n          <Col xs={12} lg={7} xxl={9} className=\"payment__options\">\n            <div>\n              <h1 className=\"font-weight-bold text-primary-900 d-none d-lg-block\">\n                Checkout\n              </h1>\n              {c.error && (\n                <Alert\n                  variant=\"danger\"\n                  icon={ErrorIcon}\n                  dismissible\n                  onClose={c.clearError}\n                >\n                  {c.error}\n                </Alert>\n              )}\n\n              {showForm && (\n                <>\n                  {c.phase === 'failed' && (\n                    <Alert variant=\"danger\" icon={ErrorIcon} className=\"mb-3\">\n                      {c.lastComment\n                      || 'Your payment could not be processed. Please check your card details and try again.'}\n                    </Alert>\n                  )}\n                  <PaymentForm\n                    billing={c.billing}\n                    setField={c.setField}\n                    numberMountRef={c.numberMountRef}\n                    expiryMountRef={c.expiryMountRef}\n                    cvcMountRef={c.cvcMountRef}\n                    cardError={c.cardError}\n                    stripeReady={c.stripeReady}\n                    sessionReady={c.sessionReady}\n                    submitting={isSubmitting}\n                    onPlaceOrder={c.placeOrder}\n                    trialEnd={displayEnd}\n                    priceToShow={\n                      selectedCycle === 'monthly' ? monthlyPrice : annualPrice\n                    }\n                    cycleToShow={\n                      selectedCycle === 'monthly' ? 'monthly' : 'annual'\n                    }\n                    userCountry={c.userCountry}\n                    monthlyRegularAmount={monthlyPrice?.amount}\n                  />\n                </>\n              )}\n\n              {c.phase === 'success' && (\n                <SuccessScreen\n                  subscriptionBiId={c.subscriptionDetails?.biId || ''}\n                  cardLast4={c.subscriptionDetails?.cardLast4 || ''}\n                  purchaseDate={displayStart}\n                  trialStart={displayStart}\n                  trialEnd={displayEnd}\n                  priceToShow={\n                    purchasedCycle === 'monthly'\n                      ? monthlyPrice?.label\n                      : annualPrice?.label\n                  }\n                  cycleToShow={\n                    purchasedCycle === 'monthly' ? 'monthly' : 'annual'\n                  }\n                  courseLabel={courseLabel}\n                  onFindCourse={handleStartCourse}\n                />\n              )}\n\n              {c.phase === 'blocked' && (\n                <BlockedScreen detail={c.lastComment} />\n              )}\n            </div>\n          </Col>\n\n          {/* ── RIGHT — swaps to EnrollmentSummary on success ── */}\n          <Col xs={12} lg={5} xxl={3} className=\"payment__summary\">\n            {c.phase === 'success' ? (\n              <EnrollmentSummary\n                amount={purchasedPrice?.amount}\n                monthlyRegularAmount={monthlyPrice?.amount}\n                currency={purchasedPrice?.currency}\n                cycleToShow={purchasedCycle}\n                course={c.course}\n                onStartCourse={handleStartCourse}\n              />\n            ) : (\n              <CartSummary\n                monthlyRegularAmount={monthlyPrice?.amount}\n                annualAmount={annualPrice?.amount}\n                currency={monthlyPrice?.currency ?? annualPrice?.currency}\n                monthlyRenewalLabel={getRenewalLabel(c.billingPlans, 'monthly')}\n                annualRenewalLabel={getRenewalLabel(c.billingPlans, 'annual')}\n                activeSubscriberCount={c.activeSubscriberCount}\n                defaultCycle={selectedCycle}\n                onCycleChange={c.setCycle}\n                course={c.course}\n              />\n            )}\n          </Col>\n        </Row>\n      </Col>\n    </Row>\n  );\n};\n\nexport default Checkout;\n"]}

package/dist/components/EnrollmentSummary/EnrollmentSummary.d.ts

@@ -4,6 +4,12 @@ export interface EnrollmentSummaryProps {
     productBlurb?: string;
     /** e.g. "59" or "396" from getBillingPlans */
     amount?: string;
+    /** Promotional monthly price e.g. "39" — monthly plans only. */
+    promoAmount?: string;
+    /** Length of the promotional period in months. */
+    promoMonths?: number;
+    /** Regular monthly price after the promo period e.g. "59". */
+    monthlyRegularAmount?: string;
     /** e.g. "USD" */
     currency?: string;
     /** Billing cycle for the purchased plan. */
@@ -12,5 +18,5 @@ export interface EnrollmentSummaryProps {
     course?: CourseDetail | null;
     onStartCourse?: () => void;
 }
-declare const EnrollmentSummary: ({ productTitle, productBlurb, amount, currency, cycleToShow, course, onStartCourse, }: EnrollmentSummaryProps) => import("react/jsx-runtime").JSX.Element;
+declare const EnrollmentSummary: ({ productTitle, productBlurb, amount, promoAmount, promoMonths, monthlyRegularAmount, currency, cycleToShow, course, onStartCourse, }: EnrollmentSummaryProps) => import("react/jsx-runtime").JSX.Element;
 export default EnrollmentSummary;

package/dist/components/EnrollmentSummary/EnrollmentSummary.js

@@ -1,23 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Card } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import { EdxUnlimitedLogo } from '../BrandMarks/BrandMarks';
 import CourseEnrollmentCard from '../CourseEnrollmentCard/CourseEnrollmentCard';
 import messages from './Messages';
-const EnrollmentSummary = ({ productTitle = 'edX Plus', productBlurb = 'Access to hundreds of courses and programs.', amount, currency = 'USD', cycleToShow = 'monthly', course = null, onStartCourse, }) => {
+const EnrollmentSummary = ({ productTitle = 'edX Plus', productBlurb = 'Access to hundreds of courses and programs.', amount, promoAmount = '39', promoMonths = 3, monthlyRegularAmount, currency = 'USD', cycleToShow = 'monthly', course = null, onStartCourse, }) => {
     const { formatMessage } = useIntl();
     const isMonthly = cycleToShow === 'monthly';
     const frequency = isMonthly ? 'month' : 'year';
     const cycleLabel = isMonthly
         ? formatMessage(messages.monthlySubscription)
         : formatMessage(messages.annualSubscription);
-    return (_jsxs("div", { className: "enrollment-summary", children: [_jsxs(Card, { className: "enrollment-summary__card p-3", children: [_jsx(Card.Section, { className: "p-0 pb-3", children: _jsx("p", { className: "font-weight-bold mb-0 text-gray-900", children: formatMessage(messages.purchaseSummary) }) }), _jsx(Card.Divider, {}), _jsx(Card.Section, { className: "p-0 py-3", children: _jsxs("div", { className: "d-flex align-items-start", children: [_jsx(EdxUnlimitedLogo, {}), _jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-0 text-primary-500", children: productTitle }), _jsx("p", { className: "small mb-0 text-gray-900", children: productBlurb })] })] }) }), _jsx(Card.Divider, {}), _jsx(Card.Section, { className: "p-0 pt-3 pb-2", children: _jsxs("div", { className: "d-flex justify-content-between align-items-start", children: [_jsx("span", { className: "small text-gray-900", children: cycleLabel }), _jsx("span", { className: "small text-gray-900 font-weight-bold", children: amount
-                                        ? formatMessage(messages.priceDisplay, {
+    const regularMonthlyAmount = monthlyRegularAmount !== null && monthlyRegularAmount !== void 0 ? monthlyRegularAmount : amount;
+    return (_jsxs("div", { className: "enrollment-summary", children: [_jsxs(Card, { className: "enrollment-summary__card p-3", children: [_jsx(Card.Section, { className: "p-0 pb-3", children: _jsx("p", { className: "font-weight-bold mb-0 text-gray-900", children: formatMessage(messages.purchaseSummary) }) }), _jsx(Card.Divider, {}), _jsx(Card.Section, { className: "p-0 py-3", children: _jsxs("div", { className: "d-flex align-items-start", children: [_jsx(EdxUnlimitedLogo, {}), _jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-0 text-primary-500", children: productTitle }), _jsx("p", { className: "small mb-0 text-gray-900", children: productBlurb })] })] }) }), _jsx(Card.Divider, {}), _jsx(Card.Section, { className: "p-0 pt-3 pb-2", children: _jsxs("div", { className: "d-flex justify-content-between align-items-start", children: [_jsx("span", { className: "small text-gray-900", children: cycleLabel }), _jsx("div", { className: "enrollment-summary__pricing text-right", children: isMonthly ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "small text-gray-900 font-weight-bold", children: formatMessage(messages.promotionalPrice, {
+                                                    amount: promoAmount,
+                                                    months: promoMonths,
+                                                }) }), regularMonthlyAmount && (_jsx("div", { className: "small text-gray-900", children: formatMessage(messages.regularPrice, {
+                                                    amount: regularMonthlyAmount,
+                                                }) }))] })) : (amount && (_jsx("div", { className: "small text-gray-900 font-weight-bold", children: formatMessage(messages.priceDisplay, {
                                             amount,
                                             frequency,
                                             currency,
-                                        })
-                                        : null })] }) }), _jsxs(Card.Section, { className: "d-flex justify-content-between align-items-center px-0 pt-1", children: [_jsx("span", { className: "font-weight-bold text-gray-900", children: formatMessage(messages.todaysTotal) }), _jsx("span", { className: "font-weight-bold mb-0 text-success", children: formatMessage(messages.todaysTotalValue) })] })] }), course && (_jsx(CourseEnrollmentCard, { course: course, variant: "success", onStartCourse: onStartCourse }))] }));
+                                        }) }))) })] }) }), _jsxs(Card.Section, { className: "d-flex justify-content-between align-items-center px-0 pt-1", children: [_jsx("span", { className: "font-weight-bold text-gray-900", children: formatMessage(messages.todaysTotal) }), _jsx("span", { className: "font-weight-bold mb-0 text-success", children: formatMessage(messages.todaysTotalValue) })] })] }), course && (_jsx(CourseEnrollmentCard, { course: course, variant: "success", onStartCourse: onStartCourse }))] }));
 };
 export default EnrollmentSummary;
 //# sourceMappingURL=EnrollmentSummary.js.map