@edx/frontend-app-subscription-checkout 1.0.0

package/README.rst

@@ -0,0 +1,235 @@
+frontend-template-application
+#############################
+
+|license-badge| |status-badge| |ci-badge|
+
+⚠️ Warning ⚠️
+***************
+
+This template produces a `frontend-base`_ application: a library that plugs
+into the Open edX frontend shell, rather than a standalone micro-frontend
+bundled with its own webpack build. If you are looking for the legacy
+standalone MFE template (pre-``frontend-base``), see `the master branch`_.
+
+.. _frontend-base: https://github.com/openedx/frontend-base
+.. _the master branch: https://github.com/openedx/frontend-template-application/tree/master
+
+Purpose
+*******
+
+This repository is a template for Open edX frontend applications built on
+``frontend-base``. It is flagged as a Template Repository, meaning it can be
+used as a basis for new GitHub repositories by clicking the green "Use this
+template" button above. The rest of this document describes how to work with
+your new frontend application **after you've created a new repository from
+the template.**
+
+Getting Started
+***************
+
+After copying the template repository, you'll want to do a find-and-replace
+to replace all instances of ``frontend-template-application`` with the name
+of your new repository. You should also pick a new ``appId`` and role name
+in ``src/constants.ts``, and a friendly title in ``public/index.html``.
+
+Prerequisites
+=============
+
+`Tutor`_ is currently recommended as the development environment for your
+new app. You can refer to the `relevant tutor-mfe documentation`_ to get
+started using it.
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+Cloning and Startup
+===================
+
+In the following steps, replace "[PLACEHOLDER]" with the name of the repo
+you created when copying this template above.
+
+1. Clone your new repo:
+
+   ``git clone https://github.com/openedx/frontend-app-[PLACEHOLDER].git``
+
+2. Use the version of Node specified in the ``.nvmrc`` file.
+
+   Using other major versions of Node *may* work, but is unsupported. This
+   repository includes an ``.nvmrc`` file to help set the correct Node
+   version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+3. Install npm dependencies:
+
+   ``cd frontend-app-[PLACEHOLDER] && npm install``
+
+4. (Optional) Update the port and public path used for local development by
+   editing the ``dev`` script in ``package.json``. The default is
+   ``PORT=8080 PUBLIC_PATH=/template``.
+
+5. Start the dev server:
+
+   ``npm run dev``
+
+The dev server will be available at
+`http://apps.local.openedx.io:8080 <http://apps.local.openedx.io:8080>`_
+(or whatever port you configured), under the public path you configured.
+
+Local Development Against frontend-base
+=======================================
+
+To develop your app and a local checkout of ``frontend-base`` in tandem, use
+the built-in npm workspace support:
+
+.. code-block:: sh
+
+    mkdir -p packages/frontend-base
+    sudo mount --bind /path/to/frontend-base packages/frontend-base
+    npm install
+    npm run dev:packages
+
+Bind mounts are used instead of symlinks because Node resolves symlinks to
+their real paths, which breaks hoisted dependency resolution. When you are
+done, unmount with ``sudo umount packages/frontend-base``.
+
+Making Your New Project's README File
+=====================================
+
+Move ``README-template-frontend-app.rst`` to your project's ``README.rst``
+file. Please fill out all the sections - this helps other developers
+understand your app, how to install it, and how to use it.
+
+Developing
+**********
+
+This section concerns development of ``frontend-template-application``
+itself, not the templated copy.
+
+One of the goals of this repository is for it to function correctly as a
+frontend-base application (``npm install && npm run dev``) even if no
+modifications are made. This ensures that developers get a *practical*
+working example, not just a theoretical one.
+
+This also means, of course, that any committed code should be tested and
+subject to both CI and branch protection rules.
+
+Project Structure
+=================
+
+The layout follows the standard `frontend-base app layout`_:
+
+- ``src/app.ts`` - the app configuration imported by ``site.config.*.tsx``
+- ``src/constants.ts`` - the app's ``appId`` and role identifiers
+- ``src/index.ts`` - the package's public exports (this is a library)
+- ``src/routes.tsx`` - the app's react-router routes
+- ``src/Main.tsx`` - the root component for the app's routes
+- ``src/slots.tsx`` - the slot operations the app applies to the shell
+- ``src/slots/`` - the slots this app offers to consumers
+- ``src/style.scss`` - app-scoped runtime styles
+
+For more, see the `frontend-base migration how-to`_.
+
+.. _frontend-base app layout: https://github.com/openedx/frontend-base/blob/main/docs/how_tos/migrate-frontend-app.md#src-file-structure
+.. _frontend-base migration how-to: https://github.com/openedx/frontend-base/blob/main/docs/how_tos/migrate-frontend-app.md
+
+Build Process Notes
+===================
+
+**Library build**
+
+``npm run build`` compiles the library into ``dist/`` via ``tsc`` and
+``tsc-alias``. This is what gets published and consumed by sites.
+
+**CI build**
+
+``npm run build:ci`` runs ``openedx build`` against ``site.config.ci.tsx``
+so webpack traverses the full app graph. This catches issues (like broken
+lazy-loaded imports) that ``tsc`` and Jest would not surface.
+
+Internationalization
+====================
+
+Please refer to the `frontend-base i18n howto`_ for documentation on
+internationalization.
+
+.. _frontend-base i18n howto: https://github.com/openedx/frontend-base/blob/main/docs/how_tos/i18n.rst
+
+Getting Help
+************
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the
+community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_. Because this is a
+frontend repository, the best place to discuss it would be in the
+`#wg-frontend channel`_.
+
+For anything non-trivial, the best path is to open an issue in this
+repository with as many details about the issue you are facing as you can
+provide.
+
+https://github.com/openedx/frontend-template-application/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/getting-help
+
+License
+*******
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+Contributing
+************
+
+Contributions are very welcome. Please read `How To Contribute`_ for details.
+
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features. However, please make
+sure to have a discussion about your new feature idea with the maintainers
+prior to beginning development to maximize the chances of your change being
+accepted. You can start a conversation by creating a new issue on this repo
+summarizing your idea.
+
+The Open edX Code of Conduct
+****************************
+
+All community members are expected to follow the `Open edX Code of
+Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+People
+******
+
+The assigned maintainers for this component and other project details may
+be found in `Backstage`_. Backstage pulls this data from the
+``catalog-info.yaml`` file in this repo.
+
+.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-template-application
+
+Reporting Security Issues
+*************************
+
+Please do not report security issues in public, and email
+security@openedx.org instead.
+
+.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-template-application.svg
+    :target: https://github.com/openedx/frontend-template-application/blob/main/LICENSE
+    :alt: License
+
+.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
+
+.. |ci-badge| image:: https://github.com/openedx/frontend-template-application/actions/workflows/ci.yml/badge.svg
+    :target: https://github.com/openedx/frontend-template-application/actions/workflows/ci.yml
+    :alt: Continuous Integration

package/dist/Main.d.ts

@@ -0,0 +1,3 @@
+import './style.scss';
+declare const Main: () => import("react/jsx-runtime").JSX.Element;
+export default Main;

package/dist/Main.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CurrentAppProvider, getSiteConfig, useIntl, } from '@openedx/frontend-base';
+import { Helmet } from 'react-helmet';
+import { Outlet } from 'react-router-dom';
+import { appId } from './constants';
+import messages from './messages';
+import './style.scss';
+const Main = () => {
+    const { formatMessage } = useIntl();
+    return (_jsxs(CurrentAppProvider, { appId: appId, children: [_jsx(Helmet, { children: _jsx("title", { children: formatMessage(messages['template.page.title'], {
+                        siteName: getSiteConfig().siteName,
+                    }) }) }), _jsx("main", { className: "d-flex flex-column flex-grow-1", children: _jsx(Outlet, {}) })] }));
+};
+export default Main;
+//# sourceMappingURL=Main.js.map

package/dist/Main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../src/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,OAAO,GACR,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,cAAc,CAAC;AAEtB,MAAM,IAAI,GAAG,GAAG,EAAE;IAChB,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,OAAO,CACL,MAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,aAC9B,KAAC,MAAM,cACL,0BACG,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE;wBAC9C,QAAQ,EAAE,aAAa,EAAE,CAAC,QAAQ;qBACnC,CAAC,GACI,GACD,EACT,eAAM,SAAS,EAAC,gCAAgC,YAC9C,KAAC,MAAM,KAAG,GACL,IACY,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  CurrentAppProvider,\n  getSiteConfig,\n  useIntl,\n} from '@openedx/frontend-base';\nimport { Helmet } from 'react-helmet';\nimport { Outlet } from 'react-router-dom';\nimport { appId } from './constants';\nimport messages from './messages';\n\nimport './style.scss';\n\nconst Main = () => {\n  const { formatMessage } = useIntl();\n  return (\n    <CurrentAppProvider appId={appId}>\n      <Helmet>\n        <title>\n          {formatMessage(messages['template.page.title'], {\n            siteName: getSiteConfig().siteName,\n          })}\n        </title>\n      </Helmet>\n      <main className=\"d-flex flex-column flex-grow-1\">\n        <Outlet />\n      </main>\n    </CurrentAppProvider>\n  );\n};\n\nexport default Main;\n"]}

package/dist/app.d.ts

@@ -0,0 +1,3 @@
+import { App } from '@openedx/frontend-base';
+declare const app: App;
+export default app;

package/dist/app.js

@@ -0,0 +1,13 @@
+import { appId } from './constants';
+import routes from './routes';
+import slots from './slots';
+const app = {
+    appId,
+    routes,
+    slots,
+    // Environment-specific values (STRIPE_PUBLIC_KEY, VIAX_API_URL) are supplied
+    // by site.config.{dev,stage,prod}.tsx at site build time.
+    config: {},
+};
+export default app;
+//# sourceMappingURL=app.js.map

package/dist/app.js.map

@@ -0,0 +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,6EAA6E;IAC7E,0DAA0D;IAC1D,MAAM,EAAE,EAAE;CACX,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) are supplied\n  // by site.config.{dev,stage,prod}.tsx at site build time.\n  config: {},\n};\n\nexport default app;\n"]}

package/dist/checkoutPage/CheckoutPage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CheckoutPage: React.FC;
+export default CheckoutPage;

package/dist/checkoutPage/CheckoutPage.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Container } from '@openedx/paragon';
+import { getAppConfig, getSiteConfig } from '@openedx/frontend-base';
+import { appId } from '../constants';
+import CheckoutGate from '../components/CheckoutGate/CheckoutGate';
+const PageWrapper = ({ children }) => (_jsx(Container, { children: children }));
+const CheckoutPage = () => {
+    const config = getAppConfig(appId);
+    const siteConfig = getSiteConfig();
+    const LMS_BASE_URL = siteConfig.lmsBaseUrl.replace(/\/$/, '');
+    const stripePublishableKey = config.STRIPE_PUBLIC_KEY;
+    const apiUrl = config.VIAX_API_URL;
+    const isDevelopment = siteConfig.environment === 'development';
+    const edxSessionUrl = `${isDevelopment ? 'https://courses.stage.edx.org' : LMS_BASE_URL}/api/edx-session`;
+    console.log('siteConfig ===> ', siteConfig);
+    console.log('config ====> ', config);
+    console.log('stripePublishableKey ===> ', stripePublishableKey);
+    console.log('apiURL ==> ', apiUrl);
+    console.log('edxSessionUrl ===> ', edxSessionUrl);
+    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, learnerDashboardUrl: `${LMS_BASE_URL}/dashboard`, onComplete: (_subscriptionBiId) => {
+                console.log(_subscriptionBiId);
+                // window.location.href = `/checkout/confirmation?sub=${_subscriptionBiId ?? ''}`;
+                // Success screen.
+            } }) }));
+};
+export default CheckoutPage;
+//# sourceMappingURL=CheckoutPage.js.map

package/dist/checkoutPage/CheckoutPage.js.map

@@ -0,0 +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,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,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        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

@@ -0,0 +1,3 @@
+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;

package/dist/components/BrandMarks/BrandMarks.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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" })] }) }));
+//# sourceMappingURL=BrandMarks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BrandMarks.js","sourceRoot":"","sources":["../../../src/components/BrandMarks/BrandMarks.tsx"],"names":[],"mappings":"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","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"]}

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

@@ -0,0 +1,21 @@
+import type { CourseDetail } from '../../types';
+export type BillingCycle = 'monthly' | 'annual';
+export interface CartSummaryProps {
+    productTitle?: string;
+    productBlurb?: string;
+    /** Monthly price amount e.g. "39" */
+    monthlyAmount?: string;
+    /** Annual price amount e.g. "299" */
+    annualAmount?: string;
+    currency?: string;
+    activeSubscriberCount?: number | null;
+    defaultCycle?: BillingCycle;
+    monthlyRenewalLabel?: string;
+    annualRenewalLabel?: string;
+    onCycleChange?: (cycle: BillingCycle) => void;
+    learnerCount?: number;
+    /** When set, shows the course enrollment preview card below the summary card. */
+    course?: CourseDetail | null;
+}
+declare const CartSummary: ({ productTitle, productBlurb, monthlyAmount, annualAmount, currency, activeSubscriberCount, defaultCycle, onCycleChange, learnerCount: learnerCountProp, course, }: CartSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export default CartSummary;

package/dist/components/CartSummary/CartSummary.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Badge, Card, Icon } 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', annualAmount = '299', currency = 'USD', activeSubscriberCount, defaultCycle = 'monthly', onCycleChange, learnerCount: learnerCountProp = 2203, course = null, }) => {
+    const { formatMessage } = useIntl();
+    const [cycle, setCycle] = useState(defaultCycle);
+    const isMonthly = cycle === 'monthly';
+    const handleToggle = () => {
+        const next = isMonthly ? 'annual' : 'monthly';
+        setCycle(next);
+        onCycleChange === null || onCycleChange === void 0 ? void 0 : onCycleChange(next);
+    };
+    const frequency = isMonthly ? 'month' : 'year';
+    const amount = isMonthly ? monthlyAmount : annualAmount;
+    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-center mb-1", children: [_jsx("span", { className: "small text-gray-900", children: isMonthly
+                                            ? formatMessage(messages.monthlySubscription)
+                                            : formatMessage(messages.annualSubscription) }), _jsx("span", { className: "text-success font-weight-bold small", children: formatMessage(messages.trialLabel) })] }), _jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [_jsx("button", { type: "button", className: "btn btn-link p-0 small", onClick: handleToggle, children: isMonthly
+                                            ? formatMessage(messages.switchToAnnual)
+                                            : formatMessage(messages.switchToMonthly) }), _jsxs("span", { className: "small text-gray-900 font-weight-bold", children: ["$", amount, "/", frequency, " ", currency] })] })] }), _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) })] })] })] })] }));
+};
+export default CartSummary;
+//# sourceMappingURL=CartSummary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CartSummary.js","sourceRoot":"","sources":["../../../src/components/CartSummary/CartSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Badge, 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  /** Monthly price amount e.g. \"39\" */\n  monthlyAmount?: string,\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  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 = 'edX Subscription',\n  productBlurb = 'Subscribe and get access to hundreds of courses and programs.',\n  monthlyAmount = '39',\n  annualAmount = '299',\n  currency = 'USD',\n  activeSubscriberCount,\n  defaultCycle = 'monthly',\n  onCycleChange,\n  learnerCount: learnerCountProp = 2203,\n  course = null,\n}: CartSummaryProps) => {\n  const { formatMessage } = useIntl();\n  const [cycle, setCycle] = useState<BillingCycle>(defaultCycle);\n\n  const isMonthly = cycle === 'monthly';\n\n  const handleToggle = () => {\n    const next: BillingCycle = isMonthly ? 'annual' : 'monthly';\n    setCycle(next);\n    onCycleChange?.(next);\n  };\n\n  const frequency = isMonthly ? 'month' : 'year';\n  const amount = isMonthly ? monthlyAmount : annualAmount;\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-center mb-1\">\n            <span className=\"small text-gray-900\">\n              {isMonthly\n                ? formatMessage(messages.monthlySubscription)\n                : formatMessage(messages.annualSubscription)}\n            </span>\n            <span className=\"text-success font-weight-bold small\">\n              {formatMessage(messages.trialLabel)}\n            </span>\n          </div>\n          <div className=\"d-flex justify-content-between align-items-center\">\n            <button\n              type=\"button\"\n              className=\"btn btn-link p-0 small\"\n              onClick={handleToggle}\n            >\n              {isMonthly\n                ? formatMessage(messages.switchToAnnual)\n                : formatMessage(messages.switchToMonthly)}\n            </button>\n            <span className=\"small text-gray-900 font-weight-bold\">\n              ${amount}/{frequency} {currency}\n            </span>\n          </div>\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"]}

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

@@ -0,0 +1,73 @@
+declare const messages: {
+    summaryHeading: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    learnersSubscribed: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    monthlySubscription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    annualSubscription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    trialLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    priceDisplay: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    todaysTotal: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    todaysTotalValue: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    switchToAnnual: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    switchToMonthly: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    learnersCount: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    learnersLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    institutionsCount: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    institutionsLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/components/CartSummary/Messages.js

@@ -0,0 +1,76 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    // CartSummary
+    summaryHeading: {
+        id: 'checkout.cartSummary.summaryHeading',
+        defaultMessage: 'Summary',
+        description: 'Heading for the order summary card',
+    },
+    learnersSubscribed: {
+        id: 'checkout.cartSummary.learnersSubscribed',
+        defaultMessage: '{count} learners subscribed',
+        description: 'Badge showing number of active learners',
+    },
+    monthlySubscription: {
+        id: 'checkout.cartSummary.monthlySubscription',
+        defaultMessage: 'Monthly subscription',
+        description: 'Label for monthly billing cycle',
+    },
+    annualSubscription: {
+        id: 'checkout.cartSummary.annualSubscription',
+        defaultMessage: 'Annual subscription',
+        description: 'Label for annual billing cycle',
+    },
+    trialLabel: {
+        id: 'checkout.cartSummary.trialLabel',
+        defaultMessage: '7-day free trial',
+        description: 'Free trial badge label',
+    },
+    priceDisplay: {
+        id: 'checkout.cartSummary.priceDisplay',
+        defaultMessage: '${amount}/{frequency} USD',
+        description: 'Price display e.g. $39/month USD',
+    },
+    todaysTotal: {
+        id: 'checkout.cartSummary.todaysTotal',
+        defaultMessage: "Today's total",
+        description: "Label for today's total price row",
+    },
+    todaysTotalValue: {
+        id: 'checkout.cartSummary.todaysTotalValue',
+        defaultMessage: '$0',
+        description: "Today's total amount during trial",
+    },
+    switchToAnnual: {
+        id: 'checkout.cartSummary.switchToAnnual',
+        defaultMessage: 'Switch to annual',
+        description: 'Toggle button label to switch to annual billing',
+    },
+    switchToMonthly: {
+        id: 'checkout.cartSummary.switchToMonthly',
+        defaultMessage: 'Switch to monthly',
+        description: 'Toggle button label to switch to monthly billing',
+    },
+    learnersCount: {
+        id: 'checkout.cartSummary.learnersCount',
+        defaultMessage: '100M',
+        description: 'Total learners stat',
+    },
+    learnersLabel: {
+        id: 'checkout.cartSummary.learnersLabel',
+        defaultMessage: 'Learners',
+        description: 'Label under the learners count stat',
+    },
+    institutionsCount: {
+        id: 'checkout.cartSummary.institutionsCount',
+        defaultMessage: '250+',
+        description: 'Expert institutions count stat',
+    },
+    institutionsLabel: {
+        id: 'checkout.cartSummary.institutionsLabel',
+        defaultMessage: 'Expert institutions',
+        description: 'Label under the institutions count stat',
+    },
+});
+export default messages;
+//# sourceMappingURL=Messages.js.map

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

@@ -0,0 +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,YAAY,EAAE;QACZ,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,2BAA2B;QAC3C,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  priceDisplay: {\n    id: 'checkout.cartSummary.priceDisplay',\n    defaultMessage: '${amount}/{frequency} USD',\n    description: 'Price display e.g. $39/month 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

@@ -0,0 +1,4 @@
+import type { UseCheckoutOptions } from '../../data/hooks/useCheckout';
+export type CheckoutProps = UseCheckoutOptions;
+declare const Checkout: (props: CheckoutProps) => import("react/jsx-runtime").JSX.Element;
+export default Checkout;