@edx/frontend-app-alacarte-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,12 @@
+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.
+};
+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,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.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,26 @@
+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`;
+    const geolocationUrl = `${isDevelopment ? 'https://courses.stage.edx.org' : LMS_BASE_URL}/api/geolocation/lookup`;
+    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, geolocationUrl: geolocationUrl, learnerDashboardUrl: `${LMS_BASE_URL}/dashboard`, homeUrl: LMS_BASE_URL || '/', 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;IAC1G,MAAM,cAAc,GAAG,GAAG,aAAa,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,YAAY,yBAAyB,CAAC;IAElH,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,cAAc,EAAE,cAAc,EAC9B,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  const geolocationUrl = `${isDevelopment ? 'https://courses.stage.edx.org' : LMS_BASE_URL}/api/geolocation/lookup`;\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        geolocationUrl={geolocationUrl}\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

@@ -0,0 +1,7 @@
+export declare const CardBrands: () => import("react/jsx-runtime").JSX.Element;
+export declare const PayPalWordmark: () => 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

@@ -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 = ({ ariaLabel = 'edX Plus', } = {}) => (_jsx("span", { className: "brand-marks__edx-logo", children: _jsxs("svg", { width: "48", height: "25", viewBox: "0 0 48 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": ariaLabel, children: [_jsxs("g", { clipPath: "url(#clip0_4947_41473)", children: [_jsx("path", { d: "M28.4709 3.95479L29.3304 0H4.13314L0 19.0065H21.0675L19.9082 24.1061H40.0865L44.5391 3.95479H28.4709Z", fill: "#00262B" }), _jsx("path", { d: "M8.58538 16.5826C8.01563 16.5826 7.47552 16.4938 6.96835 16.3131C6.46118 16.1323 6.01658 15.8659 5.64114 15.517C5.2624 15.165 4.966 14.7337 4.74535 14.2199C4.5247 13.7061 4.41602 13.1163 4.41602 12.4503C4.41602 11.54 4.54775 10.7091 4.81122 9.96067C5.07468 9.21221 5.44024 8.57157 5.91119 8.0356C6.38214 7.49963 6.9453 7.08734 7.60067 6.79239C8.25604 6.50062 8.97728 6.35156 9.75781 6.35156C10.2847 6.35156 10.7853 6.44036 11.2563 6.61796C11.7305 6.79556 12.1422 7.05245 12.4979 7.3918C12.8535 7.73114 13.1368 8.1466 13.3442 8.64452C13.555 9.13926 13.6571 9.70695 13.6571 10.3508C13.6571 10.4491 13.6538 10.5632 13.6472 10.6933C13.6406 10.8265 13.6308 10.9597 13.6176 11.096C13.6044 11.2324 13.5912 11.3688 13.5814 11.4988C13.5682 11.6288 13.5517 11.743 13.5353 11.8318H6.13843C6.13184 11.9174 6.12855 11.9999 6.12526 12.0792C6.12196 12.1585 6.12196 12.2409 6.12196 12.3266C6.12196 12.834 6.19771 13.2653 6.3492 13.6237C6.5007 13.9821 6.6983 14.2738 6.9453 14.499C7.189 14.7242 7.46564 14.8891 7.76863 14.9906C8.07162 15.0921 8.38119 15.1428 8.69076 15.1428C9.36919 15.1428 9.91589 15.0286 10.3276 14.8035C10.7392 14.5783 11.0554 14.2707 11.2694 13.8869H13.0116C12.9029 14.2675 12.7251 14.6195 12.4781 14.9494C12.2311 15.2792 11.9182 15.5646 11.5395 15.8056C11.1608 16.0467 10.7228 16.237 10.2255 16.3733C9.73146 16.516 9.18147 16.5826 8.58538 16.5826ZM11.9281 10.5601C11.9347 10.5284 11.938 10.4744 11.9413 10.3888C11.9446 10.3064 11.9446 10.2239 11.9446 10.1446C11.9446 9.82112 11.8952 9.51349 11.7964 9.22172C11.6976 8.93312 11.5494 8.67623 11.3518 8.4574C11.1542 8.23857 10.9105 8.06414 10.6174 7.93411C10.3243 7.80726 9.98505 7.74066 9.59973 7.74066C9.20452 7.74066 8.83896 7.80726 8.49646 7.94363C8.15395 8.07683 7.84108 8.27029 7.56444 8.51766C7.28451 8.76503 7.0441 9.05998 6.83991 9.40566C6.63572 9.75135 6.47435 10.1351 6.35579 10.5569L11.9281 10.5601Z", fill: "white" }), _jsx("path", { d: "M18.3352 16.5837C17.8215 16.5837 17.3373 16.4918 16.8862 16.3046C16.435 16.1175 16.0398 15.8511 15.7006 15.5023C15.3613 15.1534 15.0913 14.7316 14.897 14.2369C14.6994 13.7421 14.6006 13.1903 14.6006 12.5782C14.6006 11.9851 14.6632 11.4174 14.785 10.8783C14.9102 10.3392 15.0847 9.83489 15.3119 9.37503C15.5392 8.912 15.8158 8.49654 16.1353 8.12231C16.4547 7.74808 16.8104 7.43094 17.2023 7.16771C17.5942 6.90448 18.0158 6.7015 18.4703 6.56196C18.9247 6.42242 19.399 6.34947 19.893 6.34947C20.2618 6.34947 20.6109 6.39705 20.9435 6.49536C21.2762 6.59368 21.5792 6.73005 21.8492 6.90448C22.1193 7.07891 22.3498 7.28822 22.5441 7.53559C22.7384 7.78297 22.88 8.05254 22.9689 8.34748H23.1204L24.3884 2.59766H26.0548L23.0085 16.4061H21.4277L21.7241 15.0583H21.5726C21.1971 15.5276 20.7295 15.8987 20.163 16.1714C19.5966 16.4473 18.9873 16.5837 18.3352 16.5837ZM18.8589 15.1629C19.3924 15.1629 19.8864 15.0424 20.3409 14.8014C20.7953 14.5603 21.1905 14.2305 21.5265 13.8119C21.8624 13.3932 22.1259 12.9017 22.3169 12.3372C22.5079 11.7726 22.6034 11.1606 22.6034 10.5072C22.6034 10.0854 22.5441 9.70803 22.4223 9.36869C22.3004 9.03252 22.1291 8.74709 21.9085 8.5124C21.6845 8.27771 21.4178 8.09377 21.0983 7.96691C20.7822 7.83688 20.4232 7.77345 20.0214 7.77345C19.4945 7.77345 19.0071 7.88762 18.5559 8.1128C18.1047 8.33797 17.7161 8.65194 17.3835 9.05789C17.0541 9.46066 16.7939 9.94272 16.6029 10.5009C16.4119 11.0591 16.3164 11.6743 16.3164 12.3403C16.3164 12.7558 16.379 13.1364 16.5041 13.4852C16.6293 13.8341 16.8005 14.1322 17.0245 14.3796C17.2484 14.6269 17.5119 14.8204 17.8248 14.9568C18.131 15.0931 18.4768 15.1629 18.8589 15.1629Z", fill: "white" }), _jsx("path", { d: "M46.6871 6.46441C46.506 6.46441 46.3347 6.43269 46.1766 6.36609C46.0185 6.29949 45.8769 6.21069 45.7584 6.09335C45.6365 5.976 45.5443 5.8428 45.4751 5.69057C45.406 5.53834 45.373 5.37343 45.373 5.199C45.373 5.02457 45.406 4.85966 45.4751 4.70743C45.5443 4.5552 45.6365 4.41882 45.7584 4.30465C45.8802 4.18731 46.0185 4.09851 46.1766 4.03191C46.3347 3.96531 46.506 3.93359 46.6871 3.93359C46.8682 3.93359 47.0395 3.96531 47.1976 4.03191C47.3556 4.09851 47.4972 4.18731 47.6158 4.30465C47.7377 4.422 47.8299 4.5552 47.899 4.70743C47.9682 4.85966 48.0011 5.02457 48.0011 5.199C48.0011 5.37343 47.9682 5.53834 47.899 5.69057C47.8299 5.8428 47.7377 5.97918 47.6158 6.09335C47.494 6.20752 47.3556 6.29949 47.1976 6.36609C47.0395 6.43269 46.8682 6.46441 46.6871 6.46441ZM46.6871 6.22972C46.8847 6.22972 47.0658 6.18215 47.2272 6.09018C47.3886 5.9982 47.517 5.87135 47.6158 5.71595C47.7113 5.56055 47.7607 5.38612 47.7607 5.19583C47.7607 5.00554 47.7113 4.83111 47.6158 4.67571C47.5203 4.52031 47.3886 4.39662 47.2272 4.30148C47.0658 4.20951 46.8847 4.16194 46.6871 4.16194C46.4895 4.16194 46.3084 4.20951 46.147 4.30148C45.9856 4.39345 45.8572 4.52031 45.7584 4.67571C45.6629 4.83111 45.6135 5.00554 45.6135 5.19583C45.6135 5.38612 45.6629 5.56055 45.7584 5.71595C45.8539 5.87135 45.9856 5.99503 46.147 6.09018C46.3084 6.18215 46.4895 6.22972 46.6871 6.22972ZM46.2392 5.76669V4.59643H46.8221C46.8847 4.59643 46.944 4.60911 47 4.63765C47.0592 4.6662 47.1053 4.70743 47.1416 4.76134C47.1811 4.81526 47.1976 4.88186 47.1976 4.96114C47.1976 5.04043 47.1778 5.1102 47.1383 5.16729C47.0988 5.22437 47.0494 5.26877 46.9901 5.30049C46.9308 5.3322 46.8682 5.34489 46.8056 5.34489H46.3545V5.18631H46.7497C46.8056 5.18631 46.855 5.16729 46.9012 5.12923C46.944 5.09117 46.967 5.03409 46.967 4.96431C46.967 4.89137 46.944 4.83746 46.9012 4.80574C46.8583 4.77403 46.8089 4.75817 46.7562 4.75817H46.45V5.76669H46.2392ZM46.9473 5.22437L47.2502 5.76669H47.0131L46.72 5.22437H46.9473Z", fill: "#00262B" }), _jsx("path", { d: "M40.9978 6.55273H37.2796L33.2288 11.386H33.0279L30.8839 6.55273H27.1262L30.3471 13.5743L23.3916 21.5093H27.0571L31.5228 16.4096H31.8225L34.2366 21.5093H37.9251L34.3584 13.9232L40.9978 6.55273Z", fill: "white" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_4947_41473", children: _jsx("rect", { width: "48", height: "24.1061", fill: "white" }) }) })] }) }));
+//# 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":";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;AAMF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,GAAG,UAAU,MACG,EAAE,EAAE,EAAE,CAAC,CAChC,eAAM,SAAS,EAAC,uBAAuB,YACrC,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,KAAK,gBACE,SAAS,aAErB,aAAG,QAAQ,EAAC,wBAAwB,aAClC,eACE,CAAC,EAAC,uGAAuG,EACzG,IAAI,EAAC,SAAS,GACd,EACF,eACE,CAAC,EAAC,w0DAAw0D,EAC10D,IAAI,EAAC,OAAO,GACZ,EACF,eACE,CAAC,EAAC,qmDAAqmD,EACvmD,IAAI,EAAC,OAAO,GACZ,EACF,eACE,CAAC,EAAC,y6DAAy6D,EAC36D,IAAI,EAAC,SAAS,GACd,EACF,eACE,CAAC,EAAC,kMAAkM,EACpM,IAAI,EAAC,OAAO,GACZ,IACA,EACJ,yBACE,mBAAU,EAAE,EAAC,kBAAkB,YAC7B,eAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAG,GACxC,GACN,IACH,GACD,CACR,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\ninterface EdxUnlimitedLogoProps {\n  ariaLabel?: string,\n}\n\nexport const EdxUnlimitedLogo = ({\n  ariaLabel = 'edX Plus',\n}: EdxUnlimitedLogoProps = {}) => (\n  <span className=\"brand-marks__edx-logo\">\n    <svg\n      width=\"48\"\n      height=\"25\"\n      viewBox=\"0 0 48 25\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      aria-label={ariaLabel}\n    >\n      <g clipPath=\"url(#clip0_4947_41473)\">\n        <path\n          d=\"M28.4709 3.95479L29.3304 0H4.13314L0 19.0065H21.0675L19.9082 24.1061H40.0865L44.5391 3.95479H28.4709Z\"\n          fill=\"#00262B\"\n        />\n        <path\n          d=\"M8.58538 16.5826C8.01563 16.5826 7.47552 16.4938 6.96835 16.3131C6.46118 16.1323 6.01658 15.8659 5.64114 15.517C5.2624 15.165 4.966 14.7337 4.74535 14.2199C4.5247 13.7061 4.41602 13.1163 4.41602 12.4503C4.41602 11.54 4.54775 10.7091 4.81122 9.96067C5.07468 9.21221 5.44024 8.57157 5.91119 8.0356C6.38214 7.49963 6.9453 7.08734 7.60067 6.79239C8.25604 6.50062 8.97728 6.35156 9.75781 6.35156C10.2847 6.35156 10.7853 6.44036 11.2563 6.61796C11.7305 6.79556 12.1422 7.05245 12.4979 7.3918C12.8535 7.73114 13.1368 8.1466 13.3442 8.64452C13.555 9.13926 13.6571 9.70695 13.6571 10.3508C13.6571 10.4491 13.6538 10.5632 13.6472 10.6933C13.6406 10.8265 13.6308 10.9597 13.6176 11.096C13.6044 11.2324 13.5912 11.3688 13.5814 11.4988C13.5682 11.6288 13.5517 11.743 13.5353 11.8318H6.13843C6.13184 11.9174 6.12855 11.9999 6.12526 12.0792C6.12196 12.1585 6.12196 12.2409 6.12196 12.3266C6.12196 12.834 6.19771 13.2653 6.3492 13.6237C6.5007 13.9821 6.6983 14.2738 6.9453 14.499C7.189 14.7242 7.46564 14.8891 7.76863 14.9906C8.07162 15.0921 8.38119 15.1428 8.69076 15.1428C9.36919 15.1428 9.91589 15.0286 10.3276 14.8035C10.7392 14.5783 11.0554 14.2707 11.2694 13.8869H13.0116C12.9029 14.2675 12.7251 14.6195 12.4781 14.9494C12.2311 15.2792 11.9182 15.5646 11.5395 15.8056C11.1608 16.0467 10.7228 16.237 10.2255 16.3733C9.73146 16.516 9.18147 16.5826 8.58538 16.5826ZM11.9281 10.5601C11.9347 10.5284 11.938 10.4744 11.9413 10.3888C11.9446 10.3064 11.9446 10.2239 11.9446 10.1446C11.9446 9.82112 11.8952 9.51349 11.7964 9.22172C11.6976 8.93312 11.5494 8.67623 11.3518 8.4574C11.1542 8.23857 10.9105 8.06414 10.6174 7.93411C10.3243 7.80726 9.98505 7.74066 9.59973 7.74066C9.20452 7.74066 8.83896 7.80726 8.49646 7.94363C8.15395 8.07683 7.84108 8.27029 7.56444 8.51766C7.28451 8.76503 7.0441 9.05998 6.83991 9.40566C6.63572 9.75135 6.47435 10.1351 6.35579 10.5569L11.9281 10.5601Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M18.3352 16.5837C17.8215 16.5837 17.3373 16.4918 16.8862 16.3046C16.435 16.1175 16.0398 15.8511 15.7006 15.5023C15.3613 15.1534 15.0913 14.7316 14.897 14.2369C14.6994 13.7421 14.6006 13.1903 14.6006 12.5782C14.6006 11.9851 14.6632 11.4174 14.785 10.8783C14.9102 10.3392 15.0847 9.83489 15.3119 9.37503C15.5392 8.912 15.8158 8.49654 16.1353 8.12231C16.4547 7.74808 16.8104 7.43094 17.2023 7.16771C17.5942 6.90448 18.0158 6.7015 18.4703 6.56196C18.9247 6.42242 19.399 6.34947 19.893 6.34947C20.2618 6.34947 20.6109 6.39705 20.9435 6.49536C21.2762 6.59368 21.5792 6.73005 21.8492 6.90448C22.1193 7.07891 22.3498 7.28822 22.5441 7.53559C22.7384 7.78297 22.88 8.05254 22.9689 8.34748H23.1204L24.3884 2.59766H26.0548L23.0085 16.4061H21.4277L21.7241 15.0583H21.5726C21.1971 15.5276 20.7295 15.8987 20.163 16.1714C19.5966 16.4473 18.9873 16.5837 18.3352 16.5837ZM18.8589 15.1629C19.3924 15.1629 19.8864 15.0424 20.3409 14.8014C20.7953 14.5603 21.1905 14.2305 21.5265 13.8119C21.8624 13.3932 22.1259 12.9017 22.3169 12.3372C22.5079 11.7726 22.6034 11.1606 22.6034 10.5072C22.6034 10.0854 22.5441 9.70803 22.4223 9.36869C22.3004 9.03252 22.1291 8.74709 21.9085 8.5124C21.6845 8.27771 21.4178 8.09377 21.0983 7.96691C20.7822 7.83688 20.4232 7.77345 20.0214 7.77345C19.4945 7.77345 19.0071 7.88762 18.5559 8.1128C18.1047 8.33797 17.7161 8.65194 17.3835 9.05789C17.0541 9.46066 16.7939 9.94272 16.6029 10.5009C16.4119 11.0591 16.3164 11.6743 16.3164 12.3403C16.3164 12.7558 16.379 13.1364 16.5041 13.4852C16.6293 13.8341 16.8005 14.1322 17.0245 14.3796C17.2484 14.6269 17.5119 14.8204 17.8248 14.9568C18.131 15.0931 18.4768 15.1629 18.8589 15.1629Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M46.6871 6.46441C46.506 6.46441 46.3347 6.43269 46.1766 6.36609C46.0185 6.29949 45.8769 6.21069 45.7584 6.09335C45.6365 5.976 45.5443 5.8428 45.4751 5.69057C45.406 5.53834 45.373 5.37343 45.373 5.199C45.373 5.02457 45.406 4.85966 45.4751 4.70743C45.5443 4.5552 45.6365 4.41882 45.7584 4.30465C45.8802 4.18731 46.0185 4.09851 46.1766 4.03191C46.3347 3.96531 46.506 3.93359 46.6871 3.93359C46.8682 3.93359 47.0395 3.96531 47.1976 4.03191C47.3556 4.09851 47.4972 4.18731 47.6158 4.30465C47.7377 4.422 47.8299 4.5552 47.899 4.70743C47.9682 4.85966 48.0011 5.02457 48.0011 5.199C48.0011 5.37343 47.9682 5.53834 47.899 5.69057C47.8299 5.8428 47.7377 5.97918 47.6158 6.09335C47.494 6.20752 47.3556 6.29949 47.1976 6.36609C47.0395 6.43269 46.8682 6.46441 46.6871 6.46441ZM46.6871 6.22972C46.8847 6.22972 47.0658 6.18215 47.2272 6.09018C47.3886 5.9982 47.517 5.87135 47.6158 5.71595C47.7113 5.56055 47.7607 5.38612 47.7607 5.19583C47.7607 5.00554 47.7113 4.83111 47.6158 4.67571C47.5203 4.52031 47.3886 4.39662 47.2272 4.30148C47.0658 4.20951 46.8847 4.16194 46.6871 4.16194C46.4895 4.16194 46.3084 4.20951 46.147 4.30148C45.9856 4.39345 45.8572 4.52031 45.7584 4.67571C45.6629 4.83111 45.6135 5.00554 45.6135 5.19583C45.6135 5.38612 45.6629 5.56055 45.7584 5.71595C45.8539 5.87135 45.9856 5.99503 46.147 6.09018C46.3084 6.18215 46.4895 6.22972 46.6871 6.22972ZM46.2392 5.76669V4.59643H46.8221C46.8847 4.59643 46.944 4.60911 47 4.63765C47.0592 4.6662 47.1053 4.70743 47.1416 4.76134C47.1811 4.81526 47.1976 4.88186 47.1976 4.96114C47.1976 5.04043 47.1778 5.1102 47.1383 5.16729C47.0988 5.22437 47.0494 5.26877 46.9901 5.30049C46.9308 5.3322 46.8682 5.34489 46.8056 5.34489H46.3545V5.18631H46.7497C46.8056 5.18631 46.855 5.16729 46.9012 5.12923C46.944 5.09117 46.967 5.03409 46.967 4.96431C46.967 4.89137 46.944 4.83746 46.9012 4.80574C46.8583 4.77403 46.8089 4.75817 46.7562 4.75817H46.45V5.76669H46.2392ZM46.9473 5.22437L47.2502 5.76669H47.0131L46.72 5.22437H46.9473Z\"\n          fill=\"#00262B\"\n        />\n        <path\n          d=\"M40.9978 6.55273H37.2796L33.2288 11.386H33.0279L30.8839 6.55273H27.1262L30.3471 13.5743L23.3916 21.5093H27.0571L31.5228 16.4096H31.8225L34.2366 21.5093H37.9251L34.3584 13.9232L40.9978 6.55273Z\"\n          fill=\"white\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_4947_41473\">\n          <rect width=\"48\" height=\"24.1061\" fill=\"white\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </span>\n);\n"]}

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

@@ -0,0 +1,26 @@
+import type { CourseDetail } from '../../types';
+export type BillingCycle = 'monthly' | 'annual';
+export interface CartSummaryProps {
+    productTitle?: string;
+    productBlurb?: string;
+    /** Promotional monthly price amount e.g. "39" */
+    monthlyAmount?: string;
+    /** Regular monthly price after the promo period e.g. "59" */
+    monthlyRegularAmount?: string;
+    /** Length of the promotional period in months */
+    promoMonths?: number;
+    /** Annual price amount e.g. "299" */
+    annualAmount?: string;
+    currency?: string;
+    activeSubscriberCount?: number | null;
+    defaultCycle?: BillingCycle;
+    monthlyRenewalLabel?: string;
+    annualRenewalLabel?: string;
+    /** Called when the learner switches monthly ↔ annual. */
+    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, 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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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, 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 = !!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 Plus" }), _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: [isMonthly && (_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,
+                                                            months: promoMonths,
+                                                        }) }), _jsx("div", { className: "small text-gray-900 font-weight-bold", children: formatMessage(messages.regularPrice, {
+                                                            amount: monthlyRegularAmount,
+                                                            currency,
+                                                        }) })] })) : (_jsx("div", { className: "small text-gray-900 font-weight-bold", children: formatMessage(messages.priceDisplay, {
+                                                    amount: annualAmount,
+                                                    frequency: 'year',
+                                                    currency,
+                                                }) }))] })] }), 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: isMonthly
+                                    ? formatMessage(messages.todaysTotalValue)
+                                    : formatMessage(messages.todaysTotalAnnualValue, {
+                                        amount: annualAmount,
+                                        currency,
+                                    }) })] })] }), 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 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 Plus\" />\n            <div>\n              <p className=\"font-weight-bold mb-0 text-primary-500\">{title}</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              {isMonthly && (\n                <div className=\"text-success font-weight-bold small\">\n                  {formatMessage(messages.trialLabel)}\n                </div>\n              )}\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={() =>\n                  onCycleChange?.(isMonthly ? 'annual' : 'monthly')}\n              >\n                {formatMessage(\n                  isMonthly\n                    ? messages.switchToAnnual\n                    : 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            {isMonthly\n              ? formatMessage(messages.todaysTotalValue)\n              : formatMessage(messages.todaysTotalAnnualValue, {\n                  amount: annualAmount,\n                  currency,\n                })}\n          </span>\n        </Card.Section>\n      </Card>\n\n      {course && <CourseEnrollmentCard course={course} variant=\"checkout\" />}\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,103 @@
+declare const messages: {
+    summaryHeading: {
+        id: string;
+        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;
+        description: string;
+    };
+    annualSubscription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    trialLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    promotionalPrice: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    regularPrice: {
+        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;
+    };
+    todaysTotalAnnualValue: {
+        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;