@edx/frontend-app-alacarte-checkout 1.0.0 → 1.2.0

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

@@ -22,5 +22,5 @@ export interface CartSummaryProps {
     /** 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;
+declare const CartSummary: ({ productTitle, productBlurb, activeSubscriberCount, learnerCount: learnerCountProp, course, }: CartSummaryProps) => import("react/jsx-runtime").JSX.Element;
 export default CartSummary;

package/dist/components/CartSummary/CartSummary.js

@@ -1,41 +1,27 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Card, Icon, Skeleton } from '@openedx/paragon';
+import { Group } from '@openedx/paragon/icons';
 import { useIntl } from '@openedx/frontend-base';
 import { EdxUnlimitedLogo } from '../BrandMarks/BrandMarks';
 import CourseEnrollmentCard from '../CourseEnrollmentCard/CourseEnrollmentCard';
+import PromoCode from '../PromoCode/PromoCode';
 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, }) => {
+import learnersIcon from './world-icon.svg';
+import institutionsIcon from './student-icon.svg';
+const CartSummary = ({ productTitle, productBlurb, activeSubscriberCount, 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;
+    // TODO: replace with the real subtotal/total and currency once wired to checkout state.
+    const subtotalAmount = '219.00';
+    const totalAmount = '219.00';
+    const currency = 'USD';
     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) })] })] })] })] }));
+                                    }))] })] }), _jsx(Card.Divider, {}), _jsx(Card.Section, { className: "p-0 py-3", children: course ? (_jsx(CourseEnrollmentCard, { course: course, variant: "summary" })) : (_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: "cart-summary__subtotal-row d-flex justify-content-between align-items-center p-0 pt-3", children: [_jsx("span", { className: "cart-summary__subtotal text-gray-900", children: formatMessage(messages.subtotal) }), _jsx("span", { className: "cart-summary__subtotal text-gray-900", children: formatMessage(messages.subtotalAmount, { amount: subtotalAmount, currency }) })] }), _jsxs(Card.Section, { className: "d-flex justify-content-between align-items-center p-0", children: [_jsx("span", { className: "cart-summary__total-label text-gray-900", children: formatMessage(messages.todaysTotal) }), _jsx("span", { className: "cart-summary__total-value mb-0 text-gray-900", children: formatMessage(messages.todaysTotalValue, { amount: totalAmount, currency }) })] })] }), _jsx(PromoCode, {}), _jsxs("div", { className: "cart-summary__stats d-none d-lg-flex", children: [_jsxs("div", { className: "cart-summary__stat d-flex align-items-center mr-4", children: [_jsx("img", { src: learnersIcon, alt: "", width: 50, height: 50, className: "mr-2" }), _jsxs("div", { children: [_jsx("p", { className: "cart-summary__stat-count font-weight-bold text-gray-500 mb-0", children: formatMessage(messages.learnersCount) }), _jsx("p", { className: "cart-summary__stat-label text-gray-500 mb-0", children: formatMessage(messages.learnersLabel) })] })] }), _jsxs("div", { className: "cart-summary__stat d-flex align-items-center", children: [_jsx("img", { src: institutionsIcon, alt: "", width: 50, height: 50, className: "mr-2" }), _jsxs("div", { children: [_jsx("p", { className: "cart-summary__stat-count font-weight-bold text-gray-500 mb-0", children: formatMessage(messages.institutionsCount) }), _jsx("p", { className: "cart-summary__stat-label text-gray-500 mb-0", children: formatMessage(messages.institutionsLabel) })] })] })] })] }));
 };
 export default CartSummary;
 //# sourceMappingURL=CartSummary.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CartSummary.js","sourceRoot":"","sources":["../../../src/components/CartSummary/CartSummary.tsx"],"names":[],"mappings":"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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"]}
+{"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, Card, Icon, Skeleton } from '@openedx/paragon';\nimport { Group } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport { EdxUnlimitedLogo } from '../BrandMarks/BrandMarks';\nimport CourseEnrollmentCard from '../CourseEnrollmentCard/CourseEnrollmentCard';\nimport PromoCode from '../PromoCode/PromoCode';\nimport type { CourseDetail } from '../../types';\nimport messages from './Messages';\nimport learnersIcon from './world-icon.svg';\nimport institutionsIcon from './student-icon.svg';\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  activeSubscriberCount,\n  learnerCount: learnerCountProp,\n  course = null,\n}: CartSummaryProps) => {\n  const { formatMessage } = useIntl();\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  // TODO: replace with the real subtotal/total and currency once wired to checkout state.\n  const subtotalAmount = '219.00';\n  const totalAmount = '219.00';\n  const currency = 'USD';\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          {course ? (\n            <CourseEnrollmentCard course={course} variant=\"summary\" />\n          ) : (\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          )}\n        </Card.Section>\n\n        <Card.Divider />\n\n        <Card.Section className=\"cart-summary__subtotal-row d-flex justify-content-between align-items-center p-0 pt-3\">\n          <span className=\"cart-summary__subtotal text-gray-900\">\n            {formatMessage(messages.subtotal)}\n          </span>\n          <span className=\"cart-summary__subtotal text-gray-900\">\n            {formatMessage(messages.subtotalAmount, { amount: subtotalAmount, currency })}\n          </span>\n        </Card.Section>\n\n        <Card.Section className=\"d-flex justify-content-between align-items-center p-0\">\n          <span className=\"cart-summary__total-label text-gray-900\">\n            {formatMessage(messages.todaysTotal)}\n          </span>\n          <span className=\"cart-summary__total-value mb-0 text-gray-900\">\n            {formatMessage(messages.todaysTotalValue, { amount: totalAmount, currency })}\n          </span>\n        </Card.Section>\n      </Card>\n\n      <PromoCode />\n\n      {/* Stats row */}\n      <div className=\"cart-summary__stats d-none d-lg-flex\">\n        <div className=\"cart-summary__stat d-flex align-items-center mr-4\">\n          <img src={learnersIcon} alt=\"\" width={50} height={50} className=\"mr-2\" />\n          <div>\n            <p className=\"cart-summary__stat-count font-weight-bold text-gray-500 mb-0\">\n              {formatMessage(messages.learnersCount)}\n            </p>\n            <p className=\"cart-summary__stat-label text-gray-500 mb-0\">\n              {formatMessage(messages.learnersLabel)}\n            </p>\n          </div>\n        </div>\n        <div className=\"cart-summary__stat d-flex align-items-center\">\n          <img src={institutionsIcon} alt=\"\" width={50} height={50} className=\"mr-2\" />\n          <div>\n            <p className=\"cart-summary__stat-count font-weight-bold text-gray-500 mb-0\">\n              {formatMessage(messages.institutionsCount)}\n            </p>\n            <p className=\"cart-summary__stat-label text-gray-500 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

@@ -24,32 +24,12 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    monthlySubscription: {
+    subtotal: {
         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: {
+    subtotalAmount: {
         id: string;
         defaultMessage: string;
         description: string;
@@ -64,21 +44,6 @@ declare const messages: {
         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;

package/dist/components/CartSummary/Messages.js

@@ -18,7 +18,7 @@ const messages = defineMessages({
     },
     learnersSubscribed: {
         id: 'checkout.cartSummary.learnersSubscribed',
-        defaultMessage: '{count} learners subscribed',
+        defaultMessage: '{count} already enrolled',
         description: 'Badge showing number of active learners',
     },
     loadingSubscribers: {
@@ -26,35 +26,15 @@ const messages = defineMessages({
         defaultMessage: 'Loading subscriber count',
         description: 'Accessible label for the subscriber count skeleton',
     },
-    monthlySubscription: {
-        id: 'checkout.cartSummary.monthlySubscription',
-        defaultMessage: 'Monthly subscription',
-        description: 'Label for monthly billing cycle',
+    subtotal: {
+        id: 'checkout.cartSummary.subtotal',
+        defaultMessage: 'Subtotal',
+        description: 'Label for the subtotal row',
     },
-    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',
-    },
-    promotionalPrice: {
-        id: 'checkout.cartSummary.promotionalPrice',
-        defaultMessage: '${amount}/mo for {months} months',
-        description: 'Promotional monthly price for an introductory period e.g. $39/mo for 3 months',
-    },
-    regularPrice: {
-        id: 'checkout.cartSummary.regularPrice',
-        defaultMessage: 'then ${amount}/mo {currency}',
-        description: 'Regular monthly price after the promotional period e.g. then $59/mo USD',
-    },
-    priceDisplay: {
-        id: 'checkout.cartSummary.priceDisplay',
-        defaultMessage: '${amount}/{frequency} {currency}',
-        description: 'Price display e.g. $299/year USD',
+    subtotalAmount: {
+        id: 'checkout.cartSummary.subtotalAmount',
+        defaultMessage: '${amount} {currency}',
+        description: 'Formatted subtotal with currency code e.g. $219.00 USD',
     },
     todaysTotal: {
         id: 'checkout.cartSummary.todaysTotal',
@@ -63,23 +43,8 @@ const messages = defineMessages({
     },
     todaysTotalValue: {
         id: 'checkout.cartSummary.todaysTotalValue',
-        defaultMessage: '$0',
-        description: "Today's total amount during trial (monthly only)",
-    },
-    todaysTotalAnnualValue: {
-        id: 'checkout.cartSummary.todaysTotalAnnualValue',
         defaultMessage: '${amount} {currency}',
-        description: "Today's total for annual plans with no trial e.g. $299 USD",
-    },
-    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',
+        description: "Formatted today's total with currency code e.g. $219.00 USD",
     },
     learnersCount: {
         id: 'checkout.cartSummary.learnersCount',

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

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

@@ -73,7 +73,7 @@ const Checkout = (_a) => {
     if (showProcessing) {
         return _jsx(ProcessingScreen, {});
     }
-    return (_jsxs(Row, { className: "checkout__container bg-light-200", children: [_jsx(CountryUnavailableModal, { isOpen: isBillingCountryBlocked, homeUrl: homeUrl }), _jsx(Col, { xs: 12, className: "d-lg-none", children: _jsx("h1", { className: "font-weight-bold text-primary-900", children: "Checkout alacarte" }) }), _jsx(Col, { xs: 12, children: _jsxs(Row, { className: "flex-column-reverse gap-5 flex-lg-row", children: [_jsx(Col, { xs: 12, lg: 7, xxl: 9, className: "payment__options", children: _jsxs("div", { children: [_jsx("h1", { className: "font-weight-bold text-primary-900 d-none d-lg-block", children: "Checkout alacarte" }), c.error && (_jsx(Alert, { variant: "danger", icon: ErrorIcon, dismissible: true, onClose: c.clearError, children: c.error })), showForm && (_jsxs(_Fragment, { children: [c.phase === 'failed' && (_jsx(Alert, { variant: "danger", icon: ErrorIcon, className: "mb-3", children: failedMessage
+    return (_jsxs(Row, { className: "checkout__container bg-light-200", children: [_jsx(CountryUnavailableModal, { isOpen: isBillingCountryBlocked, homeUrl: homeUrl }), _jsx(Col, { xs: 12, className: "d-lg-none", children: _jsx("h1", { className: "font-weight-bold text-primary-900", children: "Checkout" }) }), _jsx(Col, { xs: 12, children: _jsxs(Row, { className: "flex-column-reverse gap-5 flex-lg-row", children: [_jsx(Col, { xs: 12, lg: 7, xxl: 9, className: "payment__options", children: _jsxs("div", { children: [_jsx("h1", { className: "font-weight-bold text-primary-900 d-none d-lg-block mb-4", children: "Checkout" }), c.error && (_jsx(Alert, { variant: "danger", icon: ErrorIcon, dismissible: true, onClose: c.clearError, children: c.error })), showForm && (_jsxs(_Fragment, { children: [c.phase === 'failed' && (_jsx(Alert, { variant: "danger", icon: ErrorIcon, className: "mb-3", children: failedMessage
                                                     || formatMessage(messages.paymentProcessingDescription) })), _jsx(PaymentForm, { billing: c.billing, setField: c.setField, numberMountRef: c.numberMountRef, expiryMountRef: c.expiryMountRef, cvcMountRef: c.cvcMountRef, cardError: c.cardError, stripeReady: c.stripeReady, sessionReady: c.sessionReady, submitting: c.processingSubscription, onPlaceOrder: c.placeOrder, trialEnd: selectedCycle === 'monthly' ? displayEnd : undefined, priceToShow: selectedCycle === 'monthly' ? monthlyPrice : annualPrice, cycleToShow: selectedCycle === 'monthly' ? 'monthly' : 'annual', userCountry: c.userCountry, geolocationUrl: props.geolocationUrl, monthlyRegularAmount: monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.amount })] })), c.phase === 'success' && (_jsx(SuccessScreen, { subscriptionBiId: ((_d = c.subscriptionDetails) === null || _d === void 0 ? void 0 : _d.biId) || '', cardLast4: ((_e = c.subscriptionDetails) === null || _e === void 0 ? void 0 : _e.cardLast4) || '', purchaseDate: displayStart, trialStart: purchasedCycle === 'monthly' ? displayStart : undefined, trialEnd: purchasedCycle === 'monthly' ? displayEnd : undefined, priceToShow: purchasedCycle === 'monthly'
                                             ? monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.label
                                             : annualPrice === null || annualPrice === void 0 ? void 0 : annualPrice.label, cycleToShow: purchasedCycle === 'monthly' ? 'monthly' : 'annual', courseLabel: courseLabel, onFindCourse: handleStartCourse })), c.phase === 'blocked' && (_jsx(BlockedScreen, { detail: c.lastComment }))] }) }), _jsx(Col, { xs: 12, lg: 5, xxl: 3, className: "payment__summary", children: c.phase === 'success' ? (_jsx(EnrollmentSummary, { amount: purchasedPrice === null || purchasedPrice === void 0 ? void 0 : purchasedPrice.amount, monthlyRegularAmount: monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.amount, currency: purchasedPrice === null || purchasedPrice === void 0 ? void 0 : purchasedPrice.currency, cycleToShow: purchasedCycle, course: c.course, onStartCourse: handleStartCourse })) : (_jsx(CartSummary, { monthlyRegularAmount: monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.amount, annualAmount: annualPrice === null || annualPrice === void 0 ? void 0 : annualPrice.amount, currency: (_f = monthlyPrice === null || monthlyPrice === void 0 ? void 0 : monthlyPrice.currency) !== null && _f !== void 0 ? _f : annualPrice === null || annualPrice === void 0 ? void 0 : annualPrice.currency, monthlyRenewalLabel: getRenewalLabel(c.billingPlans, 'monthly'), annualRenewalLabel: getRenewalLabel(c.billingPlans, 'annual'), activeSubscriberCount: c.activeSubscriberCount, defaultCycle: selectedCycle, onCycleChange: c.processingSubscription ? undefined : c.setCycle, course: c.course })) })] }) })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"Checkout.js","sourceRoot":"","sources":["../../../src/components/Checkout/Checkout.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Alert, Col, Row } from '@openedx/paragon';\nimport { Error as ErrorIcon } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport useCheckout from '../../data/hooks/useCheckout';\nimport type { UseCheckoutOptions } from '../../data/hooks/useCheckout';\nimport { ALLOWED_CHECKOUT_COUNTRIES, GATE_CHECK_COUNTRY } from '../../constants';\nimport CartSummary from '../CartSummary/CartSummary';\nimport EnrollmentSummary from '../EnrollmentSummary/EnrollmentSummary';\nimport PaymentForm from '../PaymentForm/PaymentForm';\nimport CountryUnavailableModal from '../CountryUnavailableModal/CountryUnavailableModal';\nimport { getPlanPrice, getRenewalLabel } from '../../utils/billingDetails';\nimport { getTrialDateRange } from '@src/utils';\nimport { getLearnerFacingCheckoutMessage } from '../../utils/checkoutErrors';\nimport { SuccessScreen, BlockedScreen, ProcessingScreen } from '../StatusScreens/StatusScreens';\nimport type { BillingCycle } from '../../types';\nimport messages from './Messages';\n\n/** Resolve purchased cycle from subscription details, falling back to checkout selection. */\nfunction resolvePurchasedCycle(\n  selectedCycle: BillingCycle,\n  planName?: string | null,\n  renewalType?: string | null,\n): BillingCycle {\n  const haystack = `${planName ?? ''} ${renewalType ?? ''}`.toLowerCase();\n  if (haystack.includes('annual') || haystack.includes('year')) return 'annual';\n  if (haystack.includes('month')) return 'monthly';\n  return selectedCycle;\n}\n\nexport type CheckoutProps = UseCheckoutOptions & {\n  /** Homepage URL for the country-unavailable modal CTA. */\n  homeUrl?: string,\n  /** Endpoint used to look up the representative IP for a selected country. */\n  geolocationUrl?: string,\n};\n\nconst Checkout = ({\n  homeUrl = '/',\n  ...props\n}: CheckoutProps) => {\n  const { formatMessage } = useIntl();\n  const c = useCheckout(props);\n\n  const showProcessing\n    = c.returningFromStripe\n      && c.processingSubscription\n      && c.phase !== 'success'\n      && c.phase !== 'blocked'\n      && c.phase !== 'failed';\n  const showForm\n    = !showProcessing\n      && (c.phase === 'init'\n        || c.phase === 'ready'\n        || c.phase === 'failed'\n        || c.phase === 'processing');\n  const monthlyPrice = getPlanPrice(c.billingPlans, 'monthly');\n  const annualPrice = getPlanPrice(c.billingPlans, 'annual');\n  const failedMessage = getLearnerFacingCheckoutMessage(c.lastComment);\n\n  const { displayStart, displayEnd } = getTrialDateRange();\n\n  const isBillingCountryBlocked = GATE_CHECK_COUNTRY\n    && !!c.billing.country\n    && !ALLOWED_CHECKOUT_COUNTRIES.includes(c.billing.country);\n\n  const selectedCycle: BillingCycle = c.selectedCycle;\n\n  const purchasedCycle = resolvePurchasedCycle(\n    selectedCycle,\n    c.subscriptionDetails?.planName,\n    c.subscriptionDetails?.renewalType,\n  );\n  const purchasedPrice = getPlanPrice(c.billingPlans, purchasedCycle);\n\n  const handleStartCourse = () => {\n    if (c.course?.tUrlCourse) {\n      window.location.href = c.course.tUrlCourse;\n    } else {\n      window.location.href = '/subscription-search';\n    }\n  };\n\n  const courseLabel = c.course\n    ? [c.course.tBrandText, c.course.maName].filter(Boolean).join(': ')\n    : null;\n\n  if (showProcessing) {\n    return <ProcessingScreen />;\n  }\n\n  return (\n    <Row className=\"checkout__container bg-light-200\">\n      <CountryUnavailableModal\n        isOpen={isBillingCountryBlocked}\n        homeUrl={homeUrl}\n      />\n      <Col xs={12} className=\"d-lg-none\">\n        <h1 className=\"font-weight-bold text-primary-900\">Checkout alacarte</h1>\n      </Col>\n      <Col xs={12}>\n        <Row className=\"flex-column-reverse gap-5 flex-lg-row\">\n          {/* ── LEFT ── */}\n          <Col xs={12} lg={7} xxl={9} className=\"payment__options\">\n            <div>\n              <h1 className=\"font-weight-bold text-primary-900 d-none d-lg-block\">\n                Checkout alacarte\n              </h1>\n              {c.error && (\n                <Alert\n                  variant=\"danger\"\n                  icon={ErrorIcon}\n                  dismissible\n                  onClose={c.clearError}\n                >\n                  {c.error}\n                </Alert>\n              )}\n\n              {showForm && (\n                <>\n                  {c.phase === 'failed' && (\n                    <Alert variant=\"danger\" icon={ErrorIcon} className=\"mb-3\">\n                      {failedMessage\n                      || formatMessage(messages.paymentProcessingDescription)}\n                    </Alert>\n                  )}\n                  <PaymentForm\n                    billing={c.billing}\n                    setField={c.setField}\n                    numberMountRef={c.numberMountRef}\n                    expiryMountRef={c.expiryMountRef}\n                    cvcMountRef={c.cvcMountRef}\n                    cardError={c.cardError}\n                    stripeReady={c.stripeReady}\n                    sessionReady={c.sessionReady}\n                    submitting={c.processingSubscription}\n                    onPlaceOrder={c.placeOrder}\n                    trialEnd={selectedCycle === 'monthly' ? displayEnd : undefined}\n                    priceToShow={\n                      selectedCycle === 'monthly' ? monthlyPrice : annualPrice\n                    }\n                    cycleToShow={\n                      selectedCycle === 'monthly' ? 'monthly' : 'annual'\n                    }\n                    userCountry={c.userCountry}\n                    geolocationUrl={props.geolocationUrl}\n                    monthlyRegularAmount={monthlyPrice?.amount}\n                  />\n                </>\n              )}\n\n              {c.phase === 'success' && (\n                <SuccessScreen\n                  subscriptionBiId={c.subscriptionDetails?.biId || ''}\n                  cardLast4={c.subscriptionDetails?.cardLast4 || ''}\n                  purchaseDate={displayStart}\n                  trialStart={purchasedCycle === 'monthly' ? displayStart : undefined}\n                  trialEnd={purchasedCycle === 'monthly' ? displayEnd : undefined}\n                  priceToShow={\n                    purchasedCycle === 'monthly'\n                      ? monthlyPrice?.label\n                      : annualPrice?.label\n                  }\n                  cycleToShow={\n                    purchasedCycle === 'monthly' ? 'monthly' : 'annual'\n                  }\n                  courseLabel={courseLabel}\n                  onFindCourse={handleStartCourse}\n                />\n              )}\n\n              {c.phase === 'blocked' && (\n                <BlockedScreen detail={c.lastComment} />\n              )}\n            </div>\n          </Col>\n\n          {/* ── RIGHT — swaps to EnrollmentSummary on success ── */}\n          <Col xs={12} lg={5} xxl={3} className=\"payment__summary\">\n            {c.phase === 'success' ? (\n              <EnrollmentSummary\n                amount={purchasedPrice?.amount}\n                monthlyRegularAmount={monthlyPrice?.amount}\n                currency={purchasedPrice?.currency}\n                cycleToShow={purchasedCycle}\n                course={c.course}\n                onStartCourse={handleStartCourse}\n              />\n            ) : (\n              <CartSummary\n                monthlyRegularAmount={monthlyPrice?.amount}\n                annualAmount={annualPrice?.amount}\n                currency={monthlyPrice?.currency ?? annualPrice?.currency}\n                monthlyRenewalLabel={getRenewalLabel(c.billingPlans, 'monthly')}\n                annualRenewalLabel={getRenewalLabel(c.billingPlans, 'annual')}\n                activeSubscriberCount={c.activeSubscriberCount}\n                defaultCycle={selectedCycle}\n                onCycleChange={c.processingSubscription ? undefined : c.setCycle}\n                course={c.course}\n              />\n            )}\n          </Col>\n        </Row>\n      </Col>\n    </Row>\n  );\n};\n\nexport default Checkout;\n"]}
+{"version":3,"file":"Checkout.js","sourceRoot":"","sources":["../../../src/components/Checkout/Checkout.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Alert, Col, Row } from '@openedx/paragon';\nimport { Error as ErrorIcon } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport useCheckout from '../../data/hooks/useCheckout';\nimport type { UseCheckoutOptions } from '../../data/hooks/useCheckout';\nimport { ALLOWED_CHECKOUT_COUNTRIES, GATE_CHECK_COUNTRY } from '../../constants';\nimport CartSummary from '../CartSummary/CartSummary';\nimport EnrollmentSummary from '../EnrollmentSummary/EnrollmentSummary';\nimport PaymentForm from '../PaymentForm/PaymentForm';\nimport CountryUnavailableModal from '../CountryUnavailableModal/CountryUnavailableModal';\nimport { getPlanPrice, getRenewalLabel } from '../../utils/billingDetails';\nimport { getTrialDateRange } from '@src/utils';\nimport { getLearnerFacingCheckoutMessage } from '../../utils/checkoutErrors';\nimport { SuccessScreen, BlockedScreen, ProcessingScreen } from '../StatusScreens/StatusScreens';\nimport type { BillingCycle } from '../../types';\nimport messages from './Messages';\n\n/** Resolve purchased cycle from subscription details, falling back to checkout selection. */\nfunction resolvePurchasedCycle(\n  selectedCycle: BillingCycle,\n  planName?: string | null,\n  renewalType?: string | null,\n): BillingCycle {\n  const haystack = `${planName ?? ''} ${renewalType ?? ''}`.toLowerCase();\n  if (haystack.includes('annual') || haystack.includes('year')) return 'annual';\n  if (haystack.includes('month')) return 'monthly';\n  return selectedCycle;\n}\n\nexport type CheckoutProps = UseCheckoutOptions & {\n  /** Homepage URL for the country-unavailable modal CTA. */\n  homeUrl?: string,\n  /** Endpoint used to look up the representative IP for a selected country. */\n  geolocationUrl?: string,\n};\n\nconst Checkout = ({\n  homeUrl = '/',\n  ...props\n}: CheckoutProps) => {\n  const { formatMessage } = useIntl();\n  const c = useCheckout(props);\n\n  const showProcessing\n    = c.returningFromStripe\n      && c.processingSubscription\n      && c.phase !== 'success'\n      && c.phase !== 'blocked'\n      && c.phase !== 'failed';\n  const showForm\n    = !showProcessing\n      && (c.phase === 'init'\n        || c.phase === 'ready'\n        || c.phase === 'failed'\n        || c.phase === 'processing');\n  const monthlyPrice = getPlanPrice(c.billingPlans, 'monthly');\n  const annualPrice = getPlanPrice(c.billingPlans, 'annual');\n  const failedMessage = getLearnerFacingCheckoutMessage(c.lastComment);\n\n  const { displayStart, displayEnd } = getTrialDateRange();\n\n  const isBillingCountryBlocked = GATE_CHECK_COUNTRY\n    && !!c.billing.country\n    && !ALLOWED_CHECKOUT_COUNTRIES.includes(c.billing.country);\n\n  const selectedCycle: BillingCycle = c.selectedCycle;\n\n  const purchasedCycle = resolvePurchasedCycle(\n    selectedCycle,\n    c.subscriptionDetails?.planName,\n    c.subscriptionDetails?.renewalType,\n  );\n  const purchasedPrice = getPlanPrice(c.billingPlans, purchasedCycle);\n\n  const handleStartCourse = () => {\n    if (c.course?.tUrlCourse) {\n      window.location.href = c.course.tUrlCourse;\n    } else {\n      window.location.href = '/subscription-search';\n    }\n  };\n\n  const courseLabel = c.course\n    ? [c.course.tBrandText, c.course.maName].filter(Boolean).join(': ')\n    : null;\n\n  if (showProcessing) {\n    return <ProcessingScreen />;\n  }\n\n  return (\n    <Row className=\"checkout__container bg-light-200\">\n      <CountryUnavailableModal\n        isOpen={isBillingCountryBlocked}\n        homeUrl={homeUrl}\n      />\n      <Col xs={12} className=\"d-lg-none\">\n        <h1 className=\"font-weight-bold text-primary-900\">Checkout</h1>\n      </Col>\n      <Col xs={12}>\n        <Row className=\"flex-column-reverse gap-5 flex-lg-row\">\n          {/* ── LEFT ── */}\n          <Col xs={12} lg={7} xxl={9} className=\"payment__options\">\n            <div>\n              <h1 className=\"font-weight-bold text-primary-900 d-none d-lg-block mb-4\">\n                Checkout\n              </h1>\n              {c.error && (\n                <Alert\n                  variant=\"danger\"\n                  icon={ErrorIcon}\n                  dismissible\n                  onClose={c.clearError}\n                >\n                  {c.error}\n                </Alert>\n              )}\n\n              {showForm && (\n                <>\n                  {c.phase === 'failed' && (\n                    <Alert variant=\"danger\" icon={ErrorIcon} className=\"mb-3\">\n                      {failedMessage\n                      || formatMessage(messages.paymentProcessingDescription)}\n                    </Alert>\n                  )}\n                  <PaymentForm\n                    billing={c.billing}\n                    setField={c.setField}\n                    numberMountRef={c.numberMountRef}\n                    expiryMountRef={c.expiryMountRef}\n                    cvcMountRef={c.cvcMountRef}\n                    cardError={c.cardError}\n                    stripeReady={c.stripeReady}\n                    sessionReady={c.sessionReady}\n                    submitting={c.processingSubscription}\n                    onPlaceOrder={c.placeOrder}\n                    trialEnd={selectedCycle === 'monthly' ? displayEnd : undefined}\n                    priceToShow={\n                      selectedCycle === 'monthly' ? monthlyPrice : annualPrice\n                    }\n                    cycleToShow={\n                      selectedCycle === 'monthly' ? 'monthly' : 'annual'\n                    }\n                    userCountry={c.userCountry}\n                    geolocationUrl={props.geolocationUrl}\n                    monthlyRegularAmount={monthlyPrice?.amount}\n                  />\n                </>\n              )}\n\n              {c.phase === 'success' && (\n                <SuccessScreen\n                  subscriptionBiId={c.subscriptionDetails?.biId || ''}\n                  cardLast4={c.subscriptionDetails?.cardLast4 || ''}\n                  purchaseDate={displayStart}\n                  trialStart={purchasedCycle === 'monthly' ? displayStart : undefined}\n                  trialEnd={purchasedCycle === 'monthly' ? displayEnd : undefined}\n                  priceToShow={\n                    purchasedCycle === 'monthly'\n                      ? monthlyPrice?.label\n                      : annualPrice?.label\n                  }\n                  cycleToShow={\n                    purchasedCycle === 'monthly' ? 'monthly' : 'annual'\n                  }\n                  courseLabel={courseLabel}\n                  onFindCourse={handleStartCourse}\n                />\n              )}\n\n              {c.phase === 'blocked' && (\n                <BlockedScreen detail={c.lastComment} />\n              )}\n            </div>\n          </Col>\n\n          {/* ── RIGHT — swaps to EnrollmentSummary on success ── */}\n          <Col xs={12} lg={5} xxl={3} className=\"payment__summary\">\n            {c.phase === 'success' ? (\n              <EnrollmentSummary\n                amount={purchasedPrice?.amount}\n                monthlyRegularAmount={monthlyPrice?.amount}\n                currency={purchasedPrice?.currency}\n                cycleToShow={purchasedCycle}\n                course={c.course}\n                onStartCourse={handleStartCourse}\n              />\n            ) : (\n              <CartSummary\n                monthlyRegularAmount={monthlyPrice?.amount}\n                annualAmount={annualPrice?.amount}\n                currency={monthlyPrice?.currency ?? annualPrice?.currency}\n                monthlyRenewalLabel={getRenewalLabel(c.billingPlans, 'monthly')}\n                annualRenewalLabel={getRenewalLabel(c.billingPlans, 'annual')}\n                activeSubscriberCount={c.activeSubscriberCount}\n                defaultCycle={selectedCycle}\n                onCycleChange={c.processingSubscription ? undefined : c.setCycle}\n                course={c.course}\n              />\n            )}\n          </Col>\n        </Row>\n      </Col>\n    </Row>\n  );\n};\n\nexport default Checkout;\n"]}

package/dist/components/CourseEnrollmentCard/CourseEnrollmentCard.d.ts

@@ -1,5 +1,5 @@
 import type { CourseDetail } from '../../types';
-export type CourseEnrollmentCardVariant = 'checkout' | 'success';
+export type CourseEnrollmentCardVariant = 'checkout' | 'success' | 'summary';
 export interface CourseEnrollmentCardProps {
     course: CourseDetail;
     variant?: CourseEnrollmentCardVariant;

package/dist/components/CourseEnrollmentCard/CourseEnrollmentCard.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@openedx/paragon';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Icon } from '@openedx/paragon';
+import { Monitor } from '@openedx/paragon/icons';
 import { useIntl } from '@openedx/frontend-base';
 import messages from './Messages';
 const CourseEnrollmentCard = ({ course, variant = 'checkout', onStartCourse, }) => {
@@ -25,7 +26,11 @@ const CourseEnrollmentCard = ({ course, variant = 'checkout', onStartCourse, })
     const successLabel = brand
         ? formatMessage(messages.successCourseLabel, { brand, courseName })
         : formatMessage(messages.successCourseLabelNoBrand, { courseName });
-    return (_jsx("div", { className: `course-enrollment-card course-enrollment-card--${variant}`, children: _jsxs("div", { className: "course-enrollment-card__body d-flex align-items-start", children: [_jsx("div", { className: "course-enrollment-card__image-wrap flex-shrink-0 mr-3", children: course.imageUrl ? (_jsx("img", { src: course.imageUrl, alt: formatMessage(messages.courseImageAlt, { courseName }), className: "course-enrollment-card__image" })) : (_jsx("div", { className: "course-enrollment-card__image course-enrollment-card__image--placeholder", "aria-hidden": "true" })) }), _jsx("div", { className: "course-enrollment-card__content flex-grow-1", children: variant === 'checkout' ? (_jsx("p", { className: "course-enrollment-card__copy mb-0 small", children: checkoutCopy })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "course-enrollment-card__copy font-weight-bold mb-2 small", children: successLabel }), _jsx(Button, { variant: "brand", size: "sm", className: "course-enrollment-card__cta", onClick: handleStartCourse, disabled: !course.tUrlCourse && !onStartCourse, children: formatMessage(messages.startCourse) })] })) })] }) }));
+    const summaryTitle = brand
+        ? formatMessage(messages.summaryCourseTitle, { brand, courseName })
+        : formatMessage(messages.summaryCourseTitleNoBrand, { courseName });
+    const certificateBadge = (_jsxs("span", { className: "course-enrollment-card__certificate-badge", children: [_jsx(Icon, { src: Monitor, className: "course-enrollment-card__certificate-icon" }), formatMessage(messages.verifiedCertificate)] }));
+    return (_jsx("div", { className: `course-enrollment-card course-enrollment-card--${variant}`, children: _jsxs("div", { className: "course-enrollment-card__body d-flex align-items-start", children: [_jsx("div", { className: `course-enrollment-card__image-wrap flex-shrink-0${variant === 'summary' ? '' : ' mr-3'}`, children: course.imageUrl ? (_jsx("img", { src: course.imageUrl, alt: formatMessage(messages.courseImageAlt, { courseName }), className: "course-enrollment-card__image" })) : (_jsx("div", { className: "course-enrollment-card__image course-enrollment-card__image--placeholder", "aria-hidden": "true" })) }), _jsxs("div", { className: "course-enrollment-card__content flex-grow-1", children: [certificateBadge, variant === 'summary' ? (_jsx("p", { className: "course-enrollment-card__title font-weight-bold mb-0", children: summaryTitle })) : variant === 'checkout' ? (_jsx("p", { className: "course-enrollment-card__copy mb-0 small", children: checkoutCopy })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "course-enrollment-card__copy font-weight-bold mb-2 small", children: successLabel }), _jsx(Button, { variant: "brand", size: "sm", className: "course-enrollment-card__cta", onClick: handleStartCourse, disabled: !course.tUrlCourse && !onStartCourse, children: formatMessage(messages.startCourse) })] }))] })] }) }));
 };
 export default CourseEnrollmentCard;
 //# sourceMappingURL=CourseEnrollmentCard.js.map

package/dist/components/CourseEnrollmentCard/CourseEnrollmentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CourseEnrollmentCard.js","sourceRoot":"","sources":["../../../src/components/CourseEnrollmentCard/CourseEnrollmentCard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAUlC,MAAM,oBAAoB,GAAG,CAAC,EAC5B,MAAM,EACN,OAAO,GAAG,UAAU,EACpB,aAAa,GACa,EAAE,EAAE;;IAC9B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,KAAK,GAAG,MAAA,MAAA,MAAM,CAAC,UAAU,0CAAE,IAAI,EAAE,mCAAI,EAAE,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC;IAEjC,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,aAAa,EAAE,CAAC;YAClB,aAAa,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;YACtB,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,sBAAsB,CAAC;QAChD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;QACnE,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,yBAAyB,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;IAEtE,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;QACnE,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,yBAAyB,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;IAEtE,OAAO,CACL,cACE,SAAS,EAAE,kDAAkD,OAAO,EAAE,YAEtE,eAAK,SAAS,EAAC,uDAAuD,aACpE,cAAK,SAAS,EAAC,uDAAuD,YACnE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjB,cACE,GAAG,EAAE,MAAM,CAAC,QAAQ,EACpB,GAAG,EAAE,aAAa,CAAC,QAAQ,CAAC,cAAc,EAAE,EAAE,UAAU,EAAE,CAAC,EAC3D,SAAS,EAAC,+BAA+B,GACzC,CACH,CAAC,CAAC,CAAC,CACF,cACE,SAAS,EAAC,0EAA0E,iBACxE,MAAM,GAClB,CACH,GACG,EAEN,cAAK,SAAS,EAAC,6CAA6C,YACzD,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,CACxB,YAAG,SAAS,EAAC,yCAAyC,YACnD,YAAY,GACX,CACL,CAAC,CAAC,CAAC,CACF,8BACE,YAAG,SAAS,EAAC,0DAA0D,YACpE,YAAY,GACX,EACJ,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,CAAC,aAAa,YAE7C,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAC7B,IACR,CACJ,GACG,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import React from 'react';\nimport { Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport type { CourseDetail } from '../../types';\nimport messages from './Messages';\n\nexport type CourseEnrollmentCardVariant = 'checkout' | 'success';\n\nexport interface CourseEnrollmentCardProps {\n  course: CourseDetail,\n  variant?: CourseEnrollmentCardVariant,\n  onStartCourse?: () => void,\n}\n\nconst CourseEnrollmentCard = ({\n  course,\n  variant = 'checkout',\n  onStartCourse,\n}: CourseEnrollmentCardProps) => {\n  const { formatMessage } = useIntl();\n  const brand = course.tBrandText?.trim() ?? '';\n  const courseName = course.maName;\n\n  const handleStartCourse = () => {\n    if (onStartCourse) {\n      onStartCourse();\n      return;\n    }\n    if (course.tUrlCourse) {\n      window.location.href = course.tUrlCourse;\n    } else {\n      window.location.href = '/subscription-search';\n    }\n  };\n\n  const checkoutCopy = brand\n    ? formatMessage(messages.checkoutEnrollCopy, { brand, courseName })\n    : formatMessage(messages.checkoutEnrollCopyNoBrand, { courseName });\n\n  const successLabel = brand\n    ? formatMessage(messages.successCourseLabel, { brand, courseName })\n    : formatMessage(messages.successCourseLabelNoBrand, { courseName });\n\n  return (\n    <div\n      className={`course-enrollment-card course-enrollment-card--${variant}`}\n    >\n      <div className=\"course-enrollment-card__body d-flex align-items-start\">\n        <div className=\"course-enrollment-card__image-wrap flex-shrink-0 mr-3\">\n          {course.imageUrl ? (\n            <img\n              src={course.imageUrl}\n              alt={formatMessage(messages.courseImageAlt, { courseName })}\n              className=\"course-enrollment-card__image\"\n            />\n          ) : (\n            <div\n              className=\"course-enrollment-card__image course-enrollment-card__image--placeholder\"\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n\n        <div className=\"course-enrollment-card__content flex-grow-1\">\n          {variant === 'checkout' ? (\n            <p className=\"course-enrollment-card__copy mb-0 small\">\n              {checkoutCopy}\n            </p>\n          ) : (\n            <>\n              <p className=\"course-enrollment-card__copy font-weight-bold mb-2 small\">\n                {successLabel}\n              </p>\n              <Button\n                variant=\"brand\"\n                size=\"sm\"\n                className=\"course-enrollment-card__cta\"\n                onClick={handleStartCourse}\n                disabled={!course.tUrlCourse && !onStartCourse}\n              >\n                {formatMessage(messages.startCourse)}\n              </Button>\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default CourseEnrollmentCard;\n"]}
+{"version":3,"file":"CourseEnrollmentCard.js","sourceRoot":"","sources":["../../../src/components/CourseEnrollmentCard/CourseEnrollmentCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, Icon } from '@openedx/paragon';\nimport { Monitor } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport type { CourseDetail } from '../../types';\nimport messages from './Messages';\n\nexport type CourseEnrollmentCardVariant = 'checkout' | 'success' | 'summary';\n\nexport interface CourseEnrollmentCardProps {\n  course: CourseDetail,\n  variant?: CourseEnrollmentCardVariant,\n  onStartCourse?: () => void,\n}\n\nconst CourseEnrollmentCard = ({\n  course,\n  variant = 'checkout',\n  onStartCourse,\n}: CourseEnrollmentCardProps) => {\n  const { formatMessage } = useIntl();\n  const brand = course.tBrandText?.trim() ?? '';\n  const courseName = course.maName;\n\n  const handleStartCourse = () => {\n    if (onStartCourse) {\n      onStartCourse();\n      return;\n    }\n    if (course.tUrlCourse) {\n      window.location.href = course.tUrlCourse;\n    } else {\n      window.location.href = '/subscription-search';\n    }\n  };\n\n  const checkoutCopy = brand\n    ? formatMessage(messages.checkoutEnrollCopy, { brand, courseName })\n    : formatMessage(messages.checkoutEnrollCopyNoBrand, { courseName });\n\n  const successLabel = brand\n    ? formatMessage(messages.successCourseLabel, { brand, courseName })\n    : formatMessage(messages.successCourseLabelNoBrand, { courseName });\n\n  const summaryTitle = brand\n    ? formatMessage(messages.summaryCourseTitle, { brand, courseName })\n    : formatMessage(messages.summaryCourseTitleNoBrand, { courseName });\n\n  const certificateBadge = (\n    <span className=\"course-enrollment-card__certificate-badge\">\n      <Icon src={Monitor} className=\"course-enrollment-card__certificate-icon\" />\n      {formatMessage(messages.verifiedCertificate)}\n    </span>\n  );\n\n  return (\n    <div\n      className={`course-enrollment-card course-enrollment-card--${variant}`}\n    >\n      <div className=\"course-enrollment-card__body d-flex align-items-start\">\n        <div\n          className={`course-enrollment-card__image-wrap flex-shrink-0${variant === 'summary' ? '' : ' mr-3'}`}\n        >\n          {course.imageUrl ? (\n            <img\n              src={course.imageUrl}\n              alt={formatMessage(messages.courseImageAlt, { courseName })}\n              className=\"course-enrollment-card__image\"\n            />\n          ) : (\n            <div\n              className=\"course-enrollment-card__image course-enrollment-card__image--placeholder\"\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n\n        <div className=\"course-enrollment-card__content flex-grow-1\">\n          {certificateBadge}\n\n          {variant === 'summary' ? (\n            <p className=\"course-enrollment-card__title font-weight-bold mb-0\">\n              {summaryTitle}\n            </p>\n          ) : variant === 'checkout' ? (\n            <p className=\"course-enrollment-card__copy mb-0 small\">\n              {checkoutCopy}\n            </p>\n          ) : (\n            <>\n              <p className=\"course-enrollment-card__copy font-weight-bold mb-2 small\">\n                {successLabel}\n              </p>\n              <Button\n                variant=\"brand\"\n                size=\"sm\"\n                className=\"course-enrollment-card__cta\"\n                onClick={handleStartCourse}\n                disabled={!course.tUrlCourse && !onStartCourse}\n              >\n                {formatMessage(messages.startCourse)}\n              </Button>\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default CourseEnrollmentCard;\n"]}

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

@@ -29,5 +29,20 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    verifiedCertificate: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    summaryCourseTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    summaryCourseTitleNoBrand: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/components/CourseEnrollmentCard/Messages.js

@@ -30,6 +30,21 @@ const messages = defineMessages({
         defaultMessage: 'Course image for {courseName}',
         description: 'Alt text for the course card thumbnail',
     },
+    verifiedCertificate: {
+        id: 'checkout.courseEnrollmentCard.verifiedCertificate',
+        defaultMessage: 'Verified certificate',
+        description: 'Badge label indicating the enrollment includes a verified certificate',
+    },
+    summaryCourseTitle: {
+        id: 'checkout.courseEnrollmentCard.summaryCourseTitle',
+        defaultMessage: '{brand}: {courseName}',
+        description: 'Course title shown in the order summary card, in place of the generic product name',
+    },
+    summaryCourseTitleNoBrand: {
+        id: 'checkout.courseEnrollmentCard.summaryCourseTitleNoBrand',
+        defaultMessage: '{courseName}',
+        description: 'Course title in the order summary card when partner brand is unavailable',
+    },
 });
 export default messages;
 //# sourceMappingURL=Messages.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/CourseEnrollmentCard/Messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,kBAAkB,EAAE;QAClB,EAAE,EAAE,kDAAkD;QACtD,cAAc,EAAE,6DAA6D;QAC7E,WAAW,EAAE,yDAAyD;KACvE;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,yDAAyD;QAC7D,cAAc,EAAE,oDAAoD;QACpE,WAAW,EAAE,2DAA2D;KACzE;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,kDAAkD;QACtD,cAAc,EAAE,wBAAwB;QACxC,WAAW,EAAE,mDAAmD;KACjE;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,yDAAyD;QAC7D,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,0EAA0E;KACxF;IACD,WAAW,EAAE;QACX,EAAE,EAAE,2CAA2C;QAC/C,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,gDAAgD;KAC9D;IACD,cAAc,EAAE;QACd,EAAE,EAAE,8CAA8C;QAClD,cAAc,EAAE,+BAA+B;QAC/C,WAAW,EAAE,wCAAwC;KACtD;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  checkoutEnrollCopy: {\n    id: 'checkout.courseEnrollmentCard.checkoutEnrollCopy',\n    defaultMessage: \"After checkout you'll be enrolled in {brand}: {courseName}.\",\n    description: 'Enrollment preview copy on the checkout summary sidebar',\n  },\n  checkoutEnrollCopyNoBrand: {\n    id: 'checkout.courseEnrollmentCard.checkoutEnrollCopyNoBrand',\n    defaultMessage: \"After checkout you'll be enrolled in {courseName}.\",\n    description: 'Enrollment preview copy when partner brand is unavailable',\n  },\n  successCourseLabel: {\n    id: 'checkout.courseEnrollmentCard.successCourseLabel',\n    defaultMessage: '{brand}: {courseName}.',\n    description: 'Course label on the post-checkout enrollment card',\n  },\n  successCourseLabelNoBrand: {\n    id: 'checkout.courseEnrollmentCard.successCourseLabelNoBrand',\n    defaultMessage: '{courseName}.',\n    description: 'Course label on the post-checkout card when partner brand is unavailable',\n  },\n  startCourse: {\n    id: 'checkout.courseEnrollmentCard.startCourse',\n    defaultMessage: 'Start course',\n    description: 'CTA to open the enrolled course after checkout',\n  },\n  courseImageAlt: {\n    id: 'checkout.courseEnrollmentCard.courseImageAlt',\n    defaultMessage: 'Course image for {courseName}',\n    description: 'Alt text for the course card thumbnail',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/CourseEnrollmentCard/Messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,kBAAkB,EAAE;QAClB,EAAE,EAAE,kDAAkD;QACtD,cAAc,EAAE,6DAA6D;QAC7E,WAAW,EAAE,yDAAyD;KACvE;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,yDAAyD;QAC7D,cAAc,EAAE,oDAAoD;QACpE,WAAW,EAAE,2DAA2D;KACzE;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,kDAAkD;QACtD,cAAc,EAAE,wBAAwB;QACxC,WAAW,EAAE,mDAAmD;KACjE;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,yDAAyD;QAC7D,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,0EAA0E;KACxF;IACD,WAAW,EAAE;QACX,EAAE,EAAE,2CAA2C;QAC/C,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,gDAAgD;KAC9D;IACD,cAAc,EAAE;QACd,EAAE,EAAE,8CAA8C;QAClD,cAAc,EAAE,+BAA+B;QAC/C,WAAW,EAAE,wCAAwC;KACtD;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,mDAAmD;QACvD,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,uEAAuE;KACrF;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,kDAAkD;QACtD,cAAc,EAAE,uBAAuB;QACvC,WAAW,EAAE,oFAAoF;KAClG;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,yDAAyD;QAC7D,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,0EAA0E;KACxF;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  checkoutEnrollCopy: {\n    id: 'checkout.courseEnrollmentCard.checkoutEnrollCopy',\n    defaultMessage: \"After checkout you'll be enrolled in {brand}: {courseName}.\",\n    description: 'Enrollment preview copy on the checkout summary sidebar',\n  },\n  checkoutEnrollCopyNoBrand: {\n    id: 'checkout.courseEnrollmentCard.checkoutEnrollCopyNoBrand',\n    defaultMessage: \"After checkout you'll be enrolled in {courseName}.\",\n    description: 'Enrollment preview copy when partner brand is unavailable',\n  },\n  successCourseLabel: {\n    id: 'checkout.courseEnrollmentCard.successCourseLabel',\n    defaultMessage: '{brand}: {courseName}.',\n    description: 'Course label on the post-checkout enrollment card',\n  },\n  successCourseLabelNoBrand: {\n    id: 'checkout.courseEnrollmentCard.successCourseLabelNoBrand',\n    defaultMessage: '{courseName}.',\n    description: 'Course label on the post-checkout card when partner brand is unavailable',\n  },\n  startCourse: {\n    id: 'checkout.courseEnrollmentCard.startCourse',\n    defaultMessage: 'Start course',\n    description: 'CTA to open the enrolled course after checkout',\n  },\n  courseImageAlt: {\n    id: 'checkout.courseEnrollmentCard.courseImageAlt',\n    defaultMessage: 'Course image for {courseName}',\n    description: 'Alt text for the course card thumbnail',\n  },\n  verifiedCertificate: {\n    id: 'checkout.courseEnrollmentCard.verifiedCertificate',\n    defaultMessage: 'Verified certificate',\n    description: 'Badge label indicating the enrollment includes a verified certificate',\n  },\n  summaryCourseTitle: {\n    id: 'checkout.courseEnrollmentCard.summaryCourseTitle',\n    defaultMessage: '{brand}: {courseName}',\n    description: 'Course title shown in the order summary card, in place of the generic product name',\n  },\n  summaryCourseTitleNoBrand: {\n    id: 'checkout.courseEnrollmentCard.summaryCourseTitleNoBrand',\n    defaultMessage: '{courseName}',\n    description: 'Course title in the order summary card when partner brand is unavailable',\n  },\n});\n\nexport default messages;\n"]}

package/dist/components/ExpressCheckout/ExpressCheckout.d.ts

@@ -0,0 +1,2 @@
+declare const ExpressCheckout: () => import("react/jsx-runtime").JSX.Element;
+export default ExpressCheckout;

package/dist/components/ExpressCheckout/ExpressCheckout.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import { PayPalWordmark } from '../BrandMarks/BrandMarks';
+import messages from './Messages';
+const AppleLogo = () => (_jsxs("svg", { width: "16", height: "19", viewBox: "0 0 16 19", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M13.05 10.1c-.02-2.09 1.71-3.09 1.79-3.14-.98-1.43-2.5-1.63-3.04-1.65-1.29-.13-2.53.76-3.19.76-.66 0-1.68-.74-2.76-.72-1.4.02-2.71.82-3.43 2.06-1.48 2.56-.38 6.36 1.06 8.44.7 1.02 1.54 2.16 2.63 2.12 1.06-.04 1.46-.68 2.74-.68 1.28 0 1.64.68 2.76.66 1.14-.02 1.86-1.04 2.56-2.06.8-1.19 1.13-2.34 1.15-2.4-.03-.01-2.2-.84-2.27-3.39z", fill: "#fff" }), _jsx("path", { d: "M11.03 3.86c.58-.71.98-1.68.87-2.66-.84.03-1.87.56-2.47 1.26-.54.62-1.02 1.63-.89 2.58.94.07 1.9-.48 2.49-1.18z", fill: "#fff" })] }));
+const GooglePayIcon = () => (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", "aria-hidden": "true", children: [_jsx("path", { d: "M10.2 8.2v3.32h4.6c-.2 1.06-.8 1.96-1.7 2.56v2.13h2.75c1.6-1.48 2.53-3.66 2.53-6.25 0-.6-.05-1.18-.15-1.75l-8.03-.01z", fill: "#4285F4" }), _jsx("path", { d: "M10.2 18c2.3 0 4.23-.76 5.65-2.06l-2.75-2.13c-.76.51-1.74.82-2.9.82-2.23 0-4.12-1.5-4.79-3.53H2.58v2.2A9.2 9.2 0 0010.2 18z", fill: "#34A853" }), _jsx("path", { d: "M5.41 11.1a5.53 5.53 0 010-3.53v-2.2H2.58a9.2 9.2 0 000 7.93l2.83-2.2z", fill: "#FBBC05" }), _jsx("path", { d: "M10.2 4.04c1.25 0 2.38.43 3.26 1.28l2.44-2.44A9.09 9.09 0 0010.2 0a9.2 9.2 0 00-7.62 4.6l2.83 2.2c.67-2.02 2.56-2.76 4.79-2.76z", fill: "#EA4335" })] }));
+const ExpressCheckout = () => {
+    const { formatMessage } = useIntl();
+    return (_jsxs("div", { className: "express-checkout", children: [_jsx("h3", { className: "express-checkout__heading", children: formatMessage(messages.heading) }), _jsxs("div", { className: "express-checkout__buttons", children: [_jsx("button", { type: "button", disabled: true, "aria-label": formatMessage(messages.paypal), className: "express-checkout__button express-checkout__button--paypal", children: _jsx(PayPalWordmark, {}) }), _jsxs("button", { type: "button", disabled: true, "aria-label": formatMessage(messages.applePay), className: "express-checkout__button express-checkout__button--apple-pay", children: [_jsx(AppleLogo, {}), "Pay"] }), _jsxs("button", { type: "button", disabled: true, "aria-label": formatMessage(messages.googlePay), className: "express-checkout__button express-checkout__button--google-pay", children: [_jsx(GooglePayIcon, {}), "Pay"] })] })] }));
+};
+export default ExpressCheckout;
+//# sourceMappingURL=ExpressCheckout.js.map

package/dist/components/ExpressCheckout/ExpressCheckout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressCheckout.js","sourceRoot":"","sources":["../../../src/components/ExpressCheckout/ExpressCheckout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,aAC5E,eACE,CAAC,EAAC,6UAA6U,EAC/U,IAAI,EAAC,MAAM,GACX,EACF,eACE,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,MAAM,GACX,IACE,CACP,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAC1B,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,aAChE,eACE,CAAC,EAAC,uHAAuH,EACzH,IAAI,EAAC,SAAS,GACd,EACF,eACE,CAAC,EAAC,6HAA6H,EAC/H,IAAI,EAAC,SAAS,GACd,EACF,eACE,CAAC,EAAC,wEAAwE,EAC1E,IAAI,EAAC,SAAS,GACd,EACF,eACE,CAAC,EAAC,iIAAiI,EACnI,IAAI,EAAC,SAAS,GACd,IACE,CACP,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,eAAK,SAAS,EAAC,kBAAkB,aAC/B,aAAI,SAAS,EAAC,2BAA2B,YACtC,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,GAC7B,EACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,iBACE,IAAI,EAAC,QAAQ,EACb,QAAQ,sBACI,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAC1C,SAAS,EAAC,2DAA2D,YAErE,KAAC,cAAc,KAAG,GACX,EACT,kBACE,IAAI,EAAC,QAAQ,EACb,QAAQ,sBACI,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAC5C,SAAS,EAAC,8DAA8D,aAExE,KAAC,SAAS,KAAG,WAEN,EACT,kBACE,IAAI,EAAC,QAAQ,EACb,QAAQ,sBACI,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,EAC7C,SAAS,EAAC,+DAA+D,aAEzE,KAAC,aAAa,KAAG,WAEV,IACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport { PayPalWordmark } from '../BrandMarks/BrandMarks';\nimport messages from './Messages';\n\nconst AppleLogo = () => (\n  <svg width=\"16\" height=\"19\" viewBox=\"0 0 16 19\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M13.05 10.1c-.02-2.09 1.71-3.09 1.79-3.14-.98-1.43-2.5-1.63-3.04-1.65-1.29-.13-2.53.76-3.19.76-.66 0-1.68-.74-2.76-.72-1.4.02-2.71.82-3.43 2.06-1.48 2.56-.38 6.36 1.06 8.44.7 1.02 1.54 2.16 2.63 2.12 1.06-.04 1.46-.68 2.74-.68 1.28 0 1.64.68 2.76.66 1.14-.02 1.86-1.04 2.56-2.06.8-1.19 1.13-2.34 1.15-2.4-.03-.01-2.2-.84-2.27-3.39z\"\n      fill=\"#fff\"\n    />\n    <path\n      d=\"M11.03 3.86c.58-.71.98-1.68.87-2.66-.84.03-1.87.56-2.47 1.26-.54.62-1.02 1.63-.89 2.58.94.07 1.9-.48 2.49-1.18z\"\n      fill=\"#fff\"\n    />\n  </svg>\n);\n\nconst GooglePayIcon = () => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n    <path\n      d=\"M10.2 8.2v3.32h4.6c-.2 1.06-.8 1.96-1.7 2.56v2.13h2.75c1.6-1.48 2.53-3.66 2.53-6.25 0-.6-.05-1.18-.15-1.75l-8.03-.01z\"\n      fill=\"#4285F4\"\n    />\n    <path\n      d=\"M10.2 18c2.3 0 4.23-.76 5.65-2.06l-2.75-2.13c-.76.51-1.74.82-2.9.82-2.23 0-4.12-1.5-4.79-3.53H2.58v2.2A9.2 9.2 0 0010.2 18z\"\n      fill=\"#34A853\"\n    />\n    <path\n      d=\"M5.41 11.1a5.53 5.53 0 010-3.53v-2.2H2.58a9.2 9.2 0 000 7.93l2.83-2.2z\"\n      fill=\"#FBBC05\"\n    />\n    <path\n      d=\"M10.2 4.04c1.25 0 2.38.43 3.26 1.28l2.44-2.44A9.09 9.09 0 0010.2 0a9.2 9.2 0 00-7.62 4.6l2.83 2.2c.67-2.02 2.56-2.76 4.79-2.76z\"\n      fill=\"#EA4335\"\n    />\n  </svg>\n);\n\nconst ExpressCheckout = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <div className=\"express-checkout\">\n      <h3 className=\"express-checkout__heading\">\n        {formatMessage(messages.heading)}\n      </h3>\n      <div className=\"express-checkout__buttons\">\n        <button\n          type=\"button\"\n          disabled\n          aria-label={formatMessage(messages.paypal)}\n          className=\"express-checkout__button express-checkout__button--paypal\"\n        >\n          <PayPalWordmark />\n        </button>\n        <button\n          type=\"button\"\n          disabled\n          aria-label={formatMessage(messages.applePay)}\n          className=\"express-checkout__button express-checkout__button--apple-pay\"\n        >\n          <AppleLogo />\n          Pay\n        </button>\n        <button\n          type=\"button\"\n          disabled\n          aria-label={formatMessage(messages.googlePay)}\n          className=\"express-checkout__button express-checkout__button--google-pay\"\n        >\n          <GooglePayIcon />\n          Pay\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default ExpressCheckout;\n"]}

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

@@ -0,0 +1,23 @@
+declare const messages: {
+    heading: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    paypal: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    applePay: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    googlePay: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;