@edx/frontend-app-subscription-manage 1.0.1 → 1.2.0

package/dist/components/CourseEnrollmentCard/Messages.js

@@ -0,0 +1,35 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    checkoutEnrollCopy: {
+        id: 'checkout.courseEnrollmentCard.checkoutEnrollCopy',
+        defaultMessage: "After checkout you'll be enrolled in {brand}: {courseName}.",
+        description: 'Enrollment preview copy on the checkout summary sidebar',
+    },
+    checkoutEnrollCopyNoBrand: {
+        id: 'checkout.courseEnrollmentCard.checkoutEnrollCopyNoBrand',
+        defaultMessage: "After checkout you'll be enrolled in {courseName}.",
+        description: 'Enrollment preview copy when partner brand is unavailable',
+    },
+    successCourseLabel: {
+        id: 'checkout.courseEnrollmentCard.successCourseLabel',
+        defaultMessage: '{brand}: {courseName}.',
+        description: 'Course label on the post-checkout enrollment card',
+    },
+    successCourseLabelNoBrand: {
+        id: 'checkout.courseEnrollmentCard.successCourseLabelNoBrand',
+        defaultMessage: '{courseName}.',
+        description: 'Course label on the post-checkout card when partner brand is unavailable',
+    },
+    startCourse: {
+        id: 'checkout.courseEnrollmentCard.startCourse',
+        defaultMessage: 'Start course',
+        description: 'CTA to open the enrolled course after checkout',
+    },
+    courseImageAlt: {
+        id: 'checkout.courseEnrollmentCard.courseImageAlt',
+        defaultMessage: 'Course image for {courseName}',
+        description: 'Alt text for the course card thumbnail',
+    },
+});
+export default messages;
+//# sourceMappingURL=Messages.js.map

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

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

package/dist/components/EdxUnlimitedBanner/EdxUnlimitedBanner.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface EdxUnlimitedBannerProps {
+    headlinePre?: string;
+    headlinePost?: string;
+    body?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    setShowLandingPage?: (show: boolean) => void;
+}
+declare const EdxUnlimitedBanner: React.FC<EdxUnlimitedBannerProps>;
+export default EdxUnlimitedBanner;

package/dist/components/EdxUnlimitedBanner/EdxUnlimitedBanner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EdxUnlimitedBadge = () => (_jsxs("span", { className: "edx-banner__badge", "aria-label": "edX unlimited", children: [_jsx("span", { className: "edx-banner__badge-edx", children: "edX" }), _jsx("span", { className: "edx-banner__badge-unlimited", children: "unlimited" })] }));
+const BulletIcon = () => (_jsx("span", { className: "edx-banner__bullet", "aria-hidden": "true", children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: [_jsx("circle", { cx: "6", cy: "6", r: "3", fill: "#fff" }), _jsx("circle", { cx: "6", cy: "1.5", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "6", cy: "10.5", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "1.5", cy: "6", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "10.5", cy: "6", r: "1.5", fill: "#fff" })] }) }));
+const EdxUnlimitedBanner = ({ headlinePre = 'Never stop learning with', headlinePost = '', body = 'Access 850 courses and programs from world-class institutions — all included for $39 a month. Expand your skills, grow your career, and keep learning for life.', ctaLabel = 'Start 7-day free trial', ctaHref = '#', imageUrl, imageAlt = 'Student learning online', setShowLandingPage, }) => (_jsxs("div", { className: "edx-banner", children: [_jsxs("div", { className: "edx-banner__content", children: [_jsxs("div", { className: "edx-banner__eyebrow", children: [_jsx(BulletIcon, {}), _jsxs("h2", { className: "edx-banner__headline", children: [headlinePre, " ", _jsx(EdxUnlimitedBadge, {}), headlinePost && ` ${headlinePost}`] })] }), _jsx("p", { className: "edx-banner__body", children: body }), _jsx("div", { className: "edx-banner__cta-wrapper", children: _jsx("a", { href: ctaHref, className: "edx-banner__cta", onClick: setShowLandingPage
+                            ? (e) => {
+                                e.preventDefault();
+                                setShowLandingPage(false);
+                            }
+                            : undefined, children: ctaLabel }) })] }), imageUrl && (_jsx("div", { className: "edx-banner__photo", "aria-hidden": "true", children: _jsx("img", { src: imageUrl, alt: imageAlt }) })), !imageUrl && (_jsx("div", { className: "edx-banner__placeholder", "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", opacity: "0.3", children: [_jsx("rect", { x: "8", y: "8", width: "32", height: "32", rx: "16", stroke: "#fff", strokeWidth: "2" }), _jsx("path", { d: "M24 20a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM12 36c0-6.627 5.373-12 12-12s12 5.373 12 12", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round" })] }) }))] }));
+export default EdxUnlimitedBanner;
+//# sourceMappingURL=EdxUnlimitedBanner.js.map

package/dist/components/EdxUnlimitedBanner/EdxUnlimitedBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdxUnlimitedBanner.js","sourceRoot":"","sources":["../../../src/components/EdxUnlimitedBanner/EdxUnlimitedBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\ninterface EdxUnlimitedBannerProps {\n  headlinePre?: string,\n  headlinePost?: string,\n  body?: string,\n  ctaLabel?: string,\n  ctaHref?: string,\n  imageUrl?: string,\n  imageAlt?: string,\n  setShowLandingPage?: (show: boolean) => void,\n}\n\nconst EdxUnlimitedBadge = () => (\n  <span className=\"edx-banner__badge\" aria-label=\"edX unlimited\">\n    <span className=\"edx-banner__badge-edx\">edX</span>\n    <span className=\"edx-banner__badge-unlimited\">unlimited</span>\n  </span>\n);\n\nconst BulletIcon = () => (\n  <span className=\"edx-banner__bullet\" aria-hidden=\"true\">\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <circle cx=\"6\" cy=\"6\" r=\"3\" fill=\"#fff\" />\n      <circle cx=\"6\" cy=\"1.5\" r=\"1.5\" fill=\"#fff\" />\n      <circle cx=\"6\" cy=\"10.5\" r=\"1.5\" fill=\"#fff\" />\n      <circle cx=\"1.5\" cy=\"6\" r=\"1.5\" fill=\"#fff\" />\n      <circle cx=\"10.5\" cy=\"6\" r=\"1.5\" fill=\"#fff\" />\n    </svg>\n  </span>\n);\n\nconst EdxUnlimitedBanner: React.FC<EdxUnlimitedBannerProps> = ({\n  headlinePre = 'Never stop learning with',\n  headlinePost = '',\n  body = 'Access 850 courses and programs from world-class institutions — all included for $39 a month. Expand your skills, grow your career, and keep learning for life.',\n  ctaLabel = 'Start 7-day free trial',\n  ctaHref = '#',\n  imageUrl,\n  imageAlt = 'Student learning online',\n  setShowLandingPage,\n}) => (\n  <div className=\"edx-banner\">\n    {/* ── Left: text content ── */}\n    <div className=\"edx-banner__content\">\n      <div className=\"edx-banner__eyebrow\">\n        <BulletIcon />\n        <h2 className=\"edx-banner__headline\">\n          {headlinePre} <EdxUnlimitedBadge />\n          {headlinePost && ` ${headlinePost}`}\n        </h2>\n      </div>\n\n      <p className=\"edx-banner__body\">{body}</p>\n\n      <div className=\"edx-banner__cta-wrapper\">\n        <a\n          href={ctaHref}\n          className=\"edx-banner__cta\"\n          onClick={\n            setShowLandingPage\n              ? (e) => {\n                  e.preventDefault();\n                  setShowLandingPage(false);\n                }\n              : undefined\n          }\n        >\n          {ctaLabel}\n        </a>\n      </div>\n    </div>\n\n    {/* ── Right: photo ── */}\n    {imageUrl && (\n      <div className=\"edx-banner__photo\" aria-hidden=\"true\">\n        <img src={imageUrl} alt={imageAlt} />\n      </div>\n    )}\n\n    {/* Placeholder when no imageUrl */}\n    {!imageUrl && (\n      <div className=\"edx-banner__placeholder\" aria-hidden=\"true\">\n        <svg\n          width=\"48\"\n          height=\"48\"\n          viewBox=\"0 0 48 48\"\n          fill=\"none\"\n          opacity=\"0.3\"\n        >\n          <rect\n            x=\"8\"\n            y=\"8\"\n            width=\"32\"\n            height=\"32\"\n            rx=\"16\"\n            stroke=\"#fff\"\n            strokeWidth=\"2\"\n          />\n          <path\n            d=\"M24 20a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM12 36c0-6.627 5.373-12 12-12s12 5.373 12 12\"\n            stroke=\"#fff\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </div>\n    )}\n  </div>\n);\n\nexport default EdxUnlimitedBanner;\n"]}

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

@@ -0,0 +1,15 @@
+import type { CourseDetail } from '../../types';
+export interface EnrollmentSummaryProps {
+    productTitle?: string;
+    productBlurb?: string;
+    /** e.g. "39" */
+    amount?: string;
+    /** e.g. "USD" */
+    currency?: string;
+    cycleToShow?: string;
+    /** When set, shows the enrolled course card below the purchase summary. */
+    course?: CourseDetail | null;
+    onStartCourse?: () => void;
+}
+declare const EnrollmentSummary: ({ productTitle, productBlurb, amount, currency, cycleToShow, course, onStartCourse, }: EnrollmentSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export default EnrollmentSummary;

package/dist/components/EnrollmentSummary/EnrollmentSummary.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { EdxUnlimitedLogo } from '../BrandMarks/BrandMarks';
+import CourseEnrollmentCard from '../CourseEnrollmentCard/CourseEnrollmentCard';
+import messages from './Messages';
+const EnrollmentSummary = ({ productTitle = 'edX Subscription', productBlurb = 'Subscribe and get access to hundreds of courses and programs.', amount, currency = 'USD', cycleToShow = 'monthly', course = null, onStartCourse, }) => {
+    const { formatMessage } = useIntl();
+    const isMonthly = cycleToShow === 'monthly';
+    const frequency = isMonthly ? 'month' : 'year';
+    const cycleLabel = isMonthly
+        ? formatMessage(messages.monthlySubscription)
+        : formatMessage(messages.annualSubscription);
+    return (_jsxs("div", { className: "enrollment-summary", children: [_jsxs(Card, { className: "enrollment-summary", children: [_jsxs(Card.Section, { children: [_jsx("p", { className: "font-weight-bold mb-3", children: formatMessage(messages.purchaseSummary) }), _jsxs("div", { className: "d-flex align-items-start mb-3", children: [_jsx(EdxUnlimitedLogo, {}), _jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-1", style: { fontSize: '0.9rem' }, children: productTitle }), _jsx("p", { className: "text-muted mb-0", style: { fontSize: '0.82rem' }, children: productBlurb })] })] }), _jsxs("div", { className: "d-flex justify-content-between align-items-center mb-1", children: [_jsx("span", { className: "small text-muted", children: cycleLabel }), amount && (_jsx("span", { className: "small font-weight-bold", children: formatMessage(messages.priceDisplay, {
+                                            amount,
+                                            frequency,
+                                            currency,
+                                        }) }))] })] }), _jsx(Card.Divider, {}), _jsxs(Card.Section, { className: "d-flex justify-content-between align-items-center", children: [_jsx("span", { className: "font-weight-bold", children: formatMessage(messages.todaysTotal) }), _jsx("span", { className: "font-weight-bold text-success", children: formatMessage(messages.todaysTotalValue) })] })] }), course && (_jsx(CourseEnrollmentCard, { course: course, variant: "success", onStartCourse: onStartCourse }))] }));
+};
+export default EnrollmentSummary;
+//# sourceMappingURL=EnrollmentSummary.js.map

package/dist/components/EnrollmentSummary/EnrollmentSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnrollmentSummary.js","sourceRoot":"","sources":["../../../src/components/EnrollmentSummary/EnrollmentSummary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,oBAAoB,MAAM,8CAA8C,CAAC;AAEhF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAelC,MAAM,iBAAiB,GAAG,CAAC,EACzB,YAAY,GAAG,kBAAkB,EACjC,YAAY,GAAG,+DAA+D,EAC9E,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,SAAS,EACvB,MAAM,GAAG,IAAI,EACb,aAAa,GACU,EAAE,EAAE;IAC3B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,SAAS,GAAG,WAAW,KAAK,SAAS,CAAC;IAC5C,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC/C,MAAM,UAAU,GAAG,SAAS;QAC1B,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC;QAC7C,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAE/C,OAAO,CACL,eAAK,SAAS,EAAC,oBAAoB,aACjC,MAAC,IAAI,IAAC,SAAS,EAAC,oBAAoB,aAClC,MAAC,IAAI,CAAC,OAAO,eACX,YAAG,SAAS,EAAC,uBAAuB,YACjC,aAAa,CAAC,QAAQ,CAAC,eAAe,CAAC,GACtC,EAEJ,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,gBAAgB,KAAG,EACpB,0BACE,YAAG,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAC/D,YAAY,GACX,EACJ,YAAG,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,YAC1D,YAAY,GACX,IACA,IACF,EAEN,eAAK,SAAS,EAAC,wDAAwD,aACrE,eAAM,SAAS,EAAC,kBAAkB,YAAE,UAAU,GAAQ,EACrD,MAAM,IAAI,CACT,eAAM,SAAS,EAAC,wBAAwB,YACrC,aAAa,CAAC,QAAQ,CAAC,YAAY,EAAE;4CACpC,MAAM;4CACN,SAAS;4CACT,QAAQ;yCACT,CAAC,GACG,CACR,IACG,IACO,EAEf,KAAC,IAAI,CAAC,OAAO,KAAG,EAEhB,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,mDAAmD,aACzE,eAAM,SAAS,EAAC,kBAAkB,YAC/B,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAC/B,EACP,eAAM,SAAS,EAAC,+BAA+B,YAC5C,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,GACpC,IACM,IACV,EAEN,MAAM,IAAI,CACT,KAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,EACd,OAAO,EAAC,SAAS,EACjB,aAAa,EAAE,aAAa,GAC5B,CACH,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import React from 'react';\nimport { Card } from '@openedx/paragon';\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 interface EnrollmentSummaryProps {\n  productTitle?: string,\n  productBlurb?: string,\n  /** e.g. \"39\" */\n  amount?: string,\n  /** e.g. \"USD\" */\n  currency?: string,\n  cycleToShow?: string,\n  /** When set, shows the enrolled course card below the purchase summary. */\n  course?: CourseDetail | null,\n  onStartCourse?: () => void,\n}\n\nconst EnrollmentSummary = ({\n  productTitle = 'edX Subscription',\n  productBlurb = 'Subscribe and get access to hundreds of courses and programs.',\n  amount,\n  currency = 'USD',\n  cycleToShow = 'monthly',\n  course = null,\n  onStartCourse,\n}: EnrollmentSummaryProps) => {\n  const { formatMessage } = useIntl();\n\n  const isMonthly = cycleToShow === 'monthly';\n  const frequency = isMonthly ? 'month' : 'year';\n  const cycleLabel = isMonthly\n    ? formatMessage(messages.monthlySubscription)\n    : formatMessage(messages.annualSubscription);\n\n  return (\n    <div className=\"enrollment-summary\">\n      <Card className=\"enrollment-summary\">\n        <Card.Section>\n          <p className=\"font-weight-bold mb-3\">\n            {formatMessage(messages.purchaseSummary)}\n          </p>\n\n          <div className=\"d-flex align-items-start mb-3\">\n            <EdxUnlimitedLogo />\n            <div>\n              <p className=\"font-weight-bold mb-1\" style={{ fontSize: '0.9rem' }}>\n                {productTitle}\n              </p>\n              <p className=\"text-muted mb-0\" style={{ fontSize: '0.82rem' }}>\n                {productBlurb}\n              </p>\n            </div>\n          </div>\n\n          <div className=\"d-flex justify-content-between align-items-center mb-1\">\n            <span className=\"small text-muted\">{cycleLabel}</span>\n            {amount && (\n              <span className=\"small font-weight-bold\">\n                {formatMessage(messages.priceDisplay, {\n                  amount,\n                  frequency,\n                  currency,\n                })}\n              </span>\n            )}\n          </div>\n        </Card.Section>\n\n        <Card.Divider />\n\n        <Card.Section className=\"d-flex justify-content-between align-items-center\">\n          <span className=\"font-weight-bold\">\n            {formatMessage(messages.todaysTotal)}\n          </span>\n          <span className=\"font-weight-bold text-success\">\n            {formatMessage(messages.todaysTotalValue)}\n          </span>\n        </Card.Section>\n      </Card>\n\n      {course && (\n        <CourseEnrollmentCard\n          course={course}\n          variant=\"success\"\n          onStartCourse={onStartCourse}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default EnrollmentSummary;\n"]}

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

@@ -0,0 +1,33 @@
+declare const messages: {
+    purchaseSummary: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    monthlySubscription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    annualSubscription: {
+        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;
+    };
+};
+export default messages;

package/dist/components/EnrollmentSummary/Messages.js

@@ -0,0 +1,35 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    purchaseSummary: {
+        id: 'checkout.enrollmentSummary.purchaseSummary',
+        defaultMessage: 'Purchase summary',
+        description: 'Heading for the purchase summary card on the success screen',
+    },
+    monthlySubscription: {
+        id: 'checkout.enrollmentSummary.monthlySubscription',
+        defaultMessage: 'Monthly subscription',
+        description: 'Label for monthly billing cycle in purchase summary',
+    },
+    annualSubscription: {
+        id: 'checkout.enrollmentSummary.annualSubscription',
+        defaultMessage: 'Annual subscription',
+        description: 'Label for annual billing cycle in purchase summary',
+    },
+    priceDisplay: {
+        id: 'checkout.enrollmentSummary.priceDisplay',
+        defaultMessage: '${amount}/{frequency} USD',
+        description: 'Price display in the purchase summary',
+    },
+    todaysTotal: {
+        id: 'checkout.enrollmentSummary.todaysTotal',
+        defaultMessage: "Today's total",
+        description: "Label for today's total row",
+    },
+    todaysTotalValue: {
+        id: 'checkout.enrollmentSummary.todaysTotalValue',
+        defaultMessage: '$0',
+        description: "Today's total value during trial period",
+    },
+});
+export default messages;
+//# sourceMappingURL=Messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/EnrollmentSummary/Messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,eAAe,EAAE;QACf,EAAE,EAAE,4CAA4C;QAChD,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,6DAA6D;KAC3E;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,gDAAgD;QACpD,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,qDAAqD;KACnE;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,+CAA+C;QACnD,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,oDAAoD;KAClE;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,2BAA2B;QAC3C,WAAW,EAAE,uCAAuC;KACrD;IACD,WAAW,EAAE;QACX,EAAE,EAAE,wCAAwC;QAC5C,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,6BAA6B;KAC3C;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,IAAI;QACpB,WAAW,EAAE,yCAAyC;KACvD;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  purchaseSummary: {\n    id: 'checkout.enrollmentSummary.purchaseSummary',\n    defaultMessage: 'Purchase summary',\n    description: 'Heading for the purchase summary card on the success screen',\n  },\n  monthlySubscription: {\n    id: 'checkout.enrollmentSummary.monthlySubscription',\n    defaultMessage: 'Monthly subscription',\n    description: 'Label for monthly billing cycle in purchase summary',\n  },\n  annualSubscription: {\n    id: 'checkout.enrollmentSummary.annualSubscription',\n    defaultMessage: 'Annual subscription',\n    description: 'Label for annual billing cycle in purchase summary',\n  },\n  priceDisplay: {\n    id: 'checkout.enrollmentSummary.priceDisplay',\n    defaultMessage: '${amount}/{frequency} USD',\n    description: 'Price display in the purchase summary',\n  },\n  todaysTotal: {\n    id: 'checkout.enrollmentSummary.todaysTotal',\n    defaultMessage: \"Today's total\",\n    description: \"Label for today's total row\",\n  },\n  todaysTotalValue: {\n    id: 'checkout.enrollmentSummary.todaysTotalValue',\n    defaultMessage: '$0',\n    description: \"Today's total value during trial period\",\n  },\n});\n\nexport default messages;\n"]}

package/dist/components/PaymentFields/PaymentFields.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'react';
+export interface PaymentFieldsProps {
+    numberMountRef: Ref<HTMLDivElement>;
+    expiryMountRef: Ref<HTMLDivElement>;
+    cvcMountRef: Ref<HTMLDivElement>;
+    cardError: string;
+}
+declare const PaymentFields: ({ numberMountRef, expiryMountRef, cvcMountRef, cardError, }: PaymentFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export default PaymentFields;

package/dist/components/PaymentFields/PaymentFields.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Form } from '@openedx/paragon';
+import { STRIPE_FIELD_STYLE } from '../../constants';
+import { CardBrands } from '../BrandMarks/BrandMarks';
+const PaymentFields = ({ numberMountRef, expiryMountRef, cvcMountRef, cardError, }) => (_jsxs("div", { className: "payment--field", children: [_jsxs("div", { className: "d-flex flex-column mb-3 gap-4", children: [_jsxs(Form.Group, { controlId: "cardNumber", className: "mb-0 flex-grow-1", children: [_jsx(Form.Label, { className: "text-gray-900 m-0 x-small", children: "Card number" }), _jsxs("div", { className: "form-control", style: STRIPE_FIELD_STYLE, children: [_jsx("div", { ref: numberMountRef, className: "flex-grow-1" }), _jsx(CardBrands, {})] })] }), _jsxs("div", { className: "d-flex gap-4", children: [_jsxs(Form.Group, { controlId: "cardExpiry", className: "card__expiry mb-0 w-50", children: [_jsx(Form.Label, { className: "text-gray-900 m-0 x-small", children: "Expiration" }), _jsx("div", { className: "form-control", style: STRIPE_FIELD_STYLE, children: _jsx("div", { ref: expiryMountRef, className: "flex-grow-1" }) })] }), _jsxs(Form.Group, { controlId: "cardCvc", className: "card__cvc mb-0 w-50", children: [_jsx(Form.Label, { className: "text-gray-900 m-0 x-small", children: "CVC" }), _jsx("div", { className: "form-control", style: STRIPE_FIELD_STYLE, children: _jsx("div", { ref: cvcMountRef, className: "flex-grow-1" }) })] })] })] }), cardError && _jsx("p", { className: "text-danger small mb-2", children: cardError })] }));
+export default PaymentFields;
+//# sourceMappingURL=PaymentFields.js.map

package/dist/components/PaymentFields/PaymentFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentFields.js","sourceRoot":"","sources":["../../../src/components/PaymentFields/PaymentFields.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAStD,MAAM,aAAa,GAAG,CAAC,EACrB,cAAc,EACd,cAAc,EACd,WAAW,EACX,SAAS,GACU,EAAE,EAAE,CAAC,CACxB,eAAK,SAAS,EAAC,gBAAgB,aAE7B,eAAK,SAAS,EAAC,+BAA+B,aAE5C,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,kBAAkB,aAC7D,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,2BAA2B,4BAEpC,EACb,eAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,kBAAkB,aACrD,cAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,aAAa,GAAG,EACpD,KAAC,UAAU,KAAG,IACV,IACK,EAEb,eAAK,SAAS,EAAC,cAAc,aAE3B,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,wBAAwB,aACnE,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,2BAA2B,2BAEpC,EACb,cAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,kBAAkB,YACrD,cAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,aAAa,GAAG,GAChD,IACK,EAGb,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,qBAAqB,aAC7D,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,2BAA2B,oBAAiB,EAClE,cAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,kBAAkB,YACrD,cAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,aAAa,GAAG,GAC7C,IACK,IACT,IACF,EAEL,SAAS,IAAI,YAAG,SAAS,EAAC,wBAAwB,YAAE,SAAS,GAAK,IAC/D,CACP,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React from 'react';\nimport type { Ref } from 'react';\nimport { Form } from '@openedx/paragon';\nimport { STRIPE_FIELD_STYLE } from '../../constants';\nimport { CardBrands } from '../BrandMarks/BrandMarks';\n\nexport interface PaymentFieldsProps {\n  numberMountRef: Ref<HTMLDivElement>,\n  expiryMountRef: Ref<HTMLDivElement>,\n  cvcMountRef: Ref<HTMLDivElement>,\n  cardError: string,\n}\n\nconst PaymentFields = ({\n  numberMountRef,\n  expiryMountRef,\n  cvcMountRef,\n  cardError,\n}: PaymentFieldsProps) => (\n  <div className=\"payment--field\">\n    {/* Single-row wrapper on desktop, stacked on mobile */}\n    <div className=\"d-flex flex-column mb-3 gap-4\">\n      {/* Card number — grows to fill available space */}\n      <Form.Group controlId=\"cardNumber\" className=\"mb-0 flex-grow-1\">\n        <Form.Label className=\"text-gray-900 m-0 x-small\">\n          Card number\n        </Form.Label>\n        <div className=\"form-control\" style={STRIPE_FIELD_STYLE}>\n          <div ref={numberMountRef} className=\"flex-grow-1\" />\n          <CardBrands />\n        </div>\n      </Form.Group>\n\n      <div className=\"d-flex gap-4\">\n        {/* Expiry — fixed width on desktop */}\n        <Form.Group controlId=\"cardExpiry\" className=\"card__expiry mb-0 w-50\">\n          <Form.Label className=\"text-gray-900 m-0 x-small\">\n            Expiration\n          </Form.Label>\n          <div className=\"form-control\" style={STRIPE_FIELD_STYLE}>\n            <div ref={expiryMountRef} className=\"flex-grow-1\" />\n          </div>\n        </Form.Group>\n\n        {/* CVC — fixed width on desktop */}\n        <Form.Group controlId=\"cardCvc\" className=\"card__cvc mb-0 w-50\">\n          <Form.Label className=\"text-gray-900 m-0 x-small\">CVC</Form.Label>\n          <div className=\"form-control\" style={STRIPE_FIELD_STYLE}>\n            <div ref={cvcMountRef} className=\"flex-grow-1\" />\n          </div>\n        </Form.Group>\n      </div>\n    </div>\n\n    {cardError && <p className=\"text-danger small mb-2\">{cardError}</p>}\n  </div>\n);\n\nexport default PaymentFields;\n"]}

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

@@ -0,0 +1,88 @@
+declare const messages: {
+    selectPaymentMethod: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    needAssistance: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    needAssistanceBody: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    learnerHelpCenter: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    card: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    googlePay: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    paypal: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    termsNotice: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    termsOfUse: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    refundPolicy: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    recurringConfirm: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    ukCaResidentConfirm: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    confirmSubscription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    processing: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    loadingPayment: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    country: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    spinnerScreenReaderText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/components/PaymentForm/Messages.js

@@ -0,0 +1,95 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    // Section headings
+    selectPaymentMethod: {
+        id: 'checkout.paymentForm.selectPaymentMethod',
+        defaultMessage: 'Select Payment Method',
+        description: 'Heading for the payment method selection section',
+    },
+    needAssistance: {
+        id: 'checkout.paymentForm.needAssistance',
+        defaultMessage: 'Need assistance?',
+        description: 'Help text heading',
+    },
+    needAssistanceBody: {
+        id: 'checkout.paymentForm.needAssistanceBody',
+        defaultMessage: 'Visit the {link} to review purchase and refund policies.',
+        description: 'Help text with learner help center link',
+    },
+    learnerHelpCenter: {
+        id: 'checkout.paymentForm.learnerHelpCenter',
+        defaultMessage: 'Learner Help Center',
+        description: 'Learner help center link text',
+    },
+    // Payment method options
+    card: {
+        id: 'checkout.paymentForm.card',
+        defaultMessage: 'Card',
+        description: 'Credit/debit card payment method label',
+    },
+    googlePay: {
+        id: 'checkout.paymentForm.googlePay',
+        defaultMessage: 'Google Pay',
+        description: 'Google Pay payment method label',
+    },
+    paypal: {
+        id: 'checkout.paymentForm.paypal',
+        defaultMessage: 'PayPal',
+        description: 'PayPal payment method label',
+    },
+    // Terms
+    termsNotice: {
+        id: 'checkout.paymentForm.termsNotice',
+        defaultMessage: 'Your subscription will start today with a 7-day free trial. Your subscription automatically renews on {renewalDate} for {price}/{frequency} USD (inclusive of applicable taxes). Cancel your subscription anytime from your dashboard. By clicking "Confirm subscription" you agree to our {termsLink}, and {refundLink}.',
+        description: 'Subscription terms notice shown before the confirm button',
+    },
+    termsOfUse: {
+        id: 'checkout.paymentForm.termsOfUse',
+        defaultMessage: 'Terms of Use',
+        description: 'Terms of Use link text',
+    },
+    refundPolicy: {
+        id: 'checkout.paymentForm.refundPolicy',
+        defaultMessage: 'Refund Policy',
+        description: 'Refund Policy link text',
+    },
+    // Checkboxes
+    recurringConfirm: {
+        id: 'checkout.paymentForm.recurringConfirm',
+        defaultMessage: 'I agree to enroll in a recurring {cycle} subscription for {price}/{frequency} USD.',
+        description: 'First checkbox confirming recurring charge',
+    },
+    ukCaResidentConfirm: {
+        id: 'checkout.paymentForm.ukCaResidentConfirm',
+        defaultMessage: 'Second checkbox only for UK and CA residents',
+        description: 'Second checkbox for UK and CA residents',
+    },
+    // Submit button
+    confirmSubscription: {
+        id: 'checkout.paymentForm.confirmSubscription',
+        defaultMessage: 'Confirm subscription',
+        description: 'Submit button label',
+    },
+    processing: {
+        id: 'checkout.paymentForm.processing',
+        defaultMessage: 'Processing…',
+        description: 'Submit button label while processing',
+    },
+    loadingPayment: {
+        id: 'checkout.paymentForm.loadingPayment',
+        defaultMessage: 'Loading payment…',
+        description: 'Submit button label while Stripe loads',
+    },
+    country: {
+        id: 'checkout.paymentForm.country',
+        defaultMessage: 'Country',
+        description: 'Country selector label',
+    },
+    spinnerScreenReaderText: {
+        id: 'checkout.paymentForm.spinnerScreenReaderText',
+        defaultMessage: 'Working',
+        description: 'Screen reader text for the loading spinner',
+    },
+});
+export default messages;
+//# sourceMappingURL=Messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/PaymentForm/Messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,mBAAmB;IACnB,mBAAmB,EAAE;QACnB,EAAE,EAAE,0CAA0C;QAC9C,cAAc,EAAE,uBAAuB;QACvC,WAAW,EAAE,kDAAkD;KAChE;IACD,cAAc,EAAE;QACd,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,mBAAmB;KACjC;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,0DAA0D;QAC1E,WAAW,EAAE,yCAAyC;KACvD;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,wCAAwC;QAC5C,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,+BAA+B;KAC7C;IAED,yBAAyB;IACzB,IAAI,EAAE;QACJ,EAAE,EAAE,2BAA2B;QAC/B,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE,wCAAwC;KACtD;IACD,SAAS,EAAE;QACT,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,YAAY;QAC5B,WAAW,EAAE,iCAAiC;KAC/C;IACD,MAAM,EAAE;QACN,EAAE,EAAE,6BAA6B;QACjC,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,6BAA6B;KAC3C;IAED,QAAQ;IACR,WAAW,EAAE;QACX,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,2TAA2T;QAC3U,WAAW,EAAE,2DAA2D;KACzE;IACD,UAAU,EAAE;QACV,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,wBAAwB;KACtC;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,yBAAyB;KACvC;IAED,aAAa;IACb,gBAAgB,EAAE;QAChB,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,oFAAoF;QACpG,WAAW,EAAE,4CAA4C;KAC1D;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,0CAA0C;QAC9C,cAAc,EAAE,8CAA8C;QAC9D,WAAW,EAAE,yCAAyC;KACvD;IAED,gBAAgB;IAChB,mBAAmB,EAAE;QACnB,EAAE,EAAE,0CAA0C;QAC9C,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,UAAU,EAAE;QACV,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,aAAa;QAC7B,WAAW,EAAE,sCAAsC;KACpD;IACD,cAAc,EAAE;QACd,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,wCAAwC;KACtD;IACD,OAAO,EAAE;QACP,EAAE,EAAE,8BAA8B;QAClC,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,wBAAwB;KACtC;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,8CAA8C;QAClD,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,4CAA4C;KAC1D;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  // Section headings\n  selectPaymentMethod: {\n    id: 'checkout.paymentForm.selectPaymentMethod',\n    defaultMessage: 'Select Payment Method',\n    description: 'Heading for the payment method selection section',\n  },\n  needAssistance: {\n    id: 'checkout.paymentForm.needAssistance',\n    defaultMessage: 'Need assistance?',\n    description: 'Help text heading',\n  },\n  needAssistanceBody: {\n    id: 'checkout.paymentForm.needAssistanceBody',\n    defaultMessage: 'Visit the {link} to review purchase and refund policies.',\n    description: 'Help text with learner help center link',\n  },\n  learnerHelpCenter: {\n    id: 'checkout.paymentForm.learnerHelpCenter',\n    defaultMessage: 'Learner Help Center',\n    description: 'Learner help center link text',\n  },\n\n  // Payment method options\n  card: {\n    id: 'checkout.paymentForm.card',\n    defaultMessage: 'Card',\n    description: 'Credit/debit card payment method label',\n  },\n  googlePay: {\n    id: 'checkout.paymentForm.googlePay',\n    defaultMessage: 'Google Pay',\n    description: 'Google Pay payment method label',\n  },\n  paypal: {\n    id: 'checkout.paymentForm.paypal',\n    defaultMessage: 'PayPal',\n    description: 'PayPal payment method label',\n  },\n\n  // Terms\n  termsNotice: {\n    id: 'checkout.paymentForm.termsNotice',\n    defaultMessage: 'Your subscription will start today with a 7-day free trial. Your subscription automatically renews on {renewalDate} for {price}/{frequency} USD (inclusive of applicable taxes). Cancel your subscription anytime from your dashboard. By clicking \"Confirm subscription\" you agree to our {termsLink}, and {refundLink}.',\n    description: 'Subscription terms notice shown before the confirm button',\n  },\n  termsOfUse: {\n    id: 'checkout.paymentForm.termsOfUse',\n    defaultMessage: 'Terms of Use',\n    description: 'Terms of Use link text',\n  },\n  refundPolicy: {\n    id: 'checkout.paymentForm.refundPolicy',\n    defaultMessage: 'Refund Policy',\n    description: 'Refund Policy link text',\n  },\n\n  // Checkboxes\n  recurringConfirm: {\n    id: 'checkout.paymentForm.recurringConfirm',\n    defaultMessage: 'I agree to enroll in a recurring {cycle} subscription for {price}/{frequency} USD.',\n    description: 'First checkbox confirming recurring charge',\n  },\n  ukCaResidentConfirm: {\n    id: 'checkout.paymentForm.ukCaResidentConfirm',\n    defaultMessage: 'Second checkbox only for UK and CA residents',\n    description: 'Second checkbox for UK and CA residents',\n  },\n\n  // Submit button\n  confirmSubscription: {\n    id: 'checkout.paymentForm.confirmSubscription',\n    defaultMessage: 'Confirm subscription',\n    description: 'Submit button label',\n  },\n  processing: {\n    id: 'checkout.paymentForm.processing',\n    defaultMessage: 'Processing…',\n    description: 'Submit button label while processing',\n  },\n  loadingPayment: {\n    id: 'checkout.paymentForm.loadingPayment',\n    defaultMessage: 'Loading payment…',\n    description: 'Submit button label while Stripe loads',\n  },\n  country: {\n    id: 'checkout.paymentForm.country',\n    defaultMessage: 'Country',\n    description: 'Country selector label',\n  },\n  spinnerScreenReaderText: {\n    id: 'checkout.paymentForm.spinnerScreenReaderText',\n    defaultMessage: 'Working',\n    description: 'Screen reader text for the loading spinner',\n  },\n});\n\nexport default messages;\n"]}

package/dist/components/PaymentForm/PaymentForm.d.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'react';
+import type { BillingInfo, CheckoutConsent } from '../../types';
+import type { PlanPrice } from '../../utils/billingDetails';
+export interface PaymentFormProps {
+    billing: BillingInfo;
+    setField: (field: keyof BillingInfo, value: string) => void;
+    numberMountRef: Ref<HTMLDivElement>;
+    expiryMountRef: Ref<HTMLDivElement>;
+    cvcMountRef: Ref<HTMLDivElement>;
+    cardError: string;
+    stripeReady: boolean;
+    sessionReady: boolean;
+    submitting: boolean;
+    onPlaceOrder: (consent: CheckoutConsent) => void;
+    priceToShow: PlanPrice | null;
+    cycleToShow: string;
+    trialEnd?: string;
+    userCountry?: string | null;
+}
+declare const PaymentForm: ({ billing, setField, numberMountRef, expiryMountRef, cvcMountRef, cardError, stripeReady, sessionReady, submitting, onPlaceOrder, priceToShow, cycleToShow, trialEnd, userCountry, }: PaymentFormProps) => import("react/jsx-runtime").JSX.Element;
+export default PaymentForm;

package/dist/components/PaymentForm/PaymentForm.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Form, Spinner } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import PaymentFields from '../PaymentFields/PaymentFields';
+import { COUNTRIES_REQUIRING_EXTRA_CONFIRM, COUNTRIES } from '../../constants';
+import messages from './Messages';
+const PaymentForm = ({ billing, setField, numberMountRef, expiryMountRef, cvcMountRef, cardError, stripeReady, sessionReady, submitting, onPlaceOrder, priceToShow, cycleToShow, trialEnd, userCountry, }) => {
+    var _a;
+    const { formatMessage } = useIntl();
+    const [paymentMethod, setPaymentMethod] = useState('card');
+    const [confirmed, setConfirmed] = useState(false);
+    const [ukCaConfirmed, setUkCaConfirmed] = useState(false);
+    const showExtraConfirm = !!userCountry && COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(userCountry);
+    const busy = submitting || !stripeReady || !sessionReady;
+    let buttonLabel = formatMessage(messages.confirmSubscription);
+    if (submitting)
+        buttonLabel = formatMessage(messages.processing);
+    else if (!sessionReady)
+        buttonLabel = formatMessage(messages.loadingPayment);
+    else if (!stripeReady)
+        buttonLabel = formatMessage(messages.loadingPayment);
+    const amount = (_a = priceToShow === null || priceToShow === void 0 ? void 0 : priceToShow.amount) !== null && _a !== void 0 ? _a : '';
+    const frequency = cycleToShow === 'annual' ? 'year' : 'month';
+    const buildConsent = () => {
+        const termsText = formatMessage(messages.termsNotice, {
+            renewalDate: trialEnd !== null && trialEnd !== void 0 ? trialEnd : '{date}',
+            price: amount,
+            frequency,
+            termsLink: formatMessage(messages.termsOfUse),
+            refundLink: formatMessage(messages.refundPolicy),
+        });
+        const recurringText = formatMessage(messages.recurringConfirm, {
+            cycle: cycleToShow,
+            price: amount,
+            frequency,
+        });
+        const consentParts = [termsText, recurringText];
+        if (showExtraConfirm) {
+            consentParts.push(formatMessage(messages.ukCaResidentConfirm));
+        }
+        return {
+            tConsentRecurring: confirmed,
+            tConsentUkCa: showExtraConfirm ? ukCaConfirmed : null,
+            tConsentAt: new Date().toISOString(),
+            tConsentText: consentParts.join('\n\n'),
+        };
+    };
+    return (_jsxs("div", { className: "payment-form bg-white", children: [_jsx("h2", { className: "payment-form__heading font-weight-bold mb-3 text-primary-500", children: formatMessage(messages.selectPaymentMethod) }), _jsxs("p", { className: "payment-form__help small mb-4", children: [_jsx("strong", { className: "d-block text-primary-500", children: formatMessage(messages.needAssistance) }), ' ', _jsx("span", { className: "text-gray-700", children: formatMessage(messages.needAssistanceBody, {
+                            link: (_jsx("a", { href: "https://support.edx.org", target: "_blank", rel: "noreferrer", className: "text-gray-700", children: formatMessage(messages.learnerHelpCenter) })),
+                        }) })] }), _jsxs("div", { className: "payment-form__methods mb-4", children: [_jsxs("div", { className: `payment-form__method${paymentMethod === 'card' ? ' payment-form__method--selected' : ''}`, children: [_jsxs("label", { htmlFor: "paymentMethod-card", className: "payment-form__method-header", children: [_jsx("input", { id: "paymentMethod-card", type: "radio", name: "paymentMethod", value: "card", checked: paymentMethod === 'card', onChange: () => setPaymentMethod('card'), className: "payment-form__radio" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 4C0 3.46957 0.210714 2.96086 0.585786 2.58579C0.960859 2.21071 1.46957 2 2 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4H0ZM0 6V12C0 12.5304 0.210714 13.0391 0.585786 13.4142C0.960859 13.7893 1.46957 14 2 14H14C14.5304 14 15.0391 13.7893 15.4142 13.4142C15.7893 13.0391 16 12.5304 16 12V6H0ZM3 11C3 10.7348 3.10536 10.4804 3.29289 10.2929C3.48043 10.1054 3.73478 10 4 10H5C5.26522 10 5.51957 10.1054 5.70711 10.2929C5.89464 10.4804 6 10.7348 6 11C6 11.2652 5.89464 11.5196 5.70711 11.7071C5.51957 11.8946 5.26522 12 5 12H4C3.73478 12 3.48043 11.8946 3.29289 11.7071C3.10536 11.5196 3 11.2652 3 11Z", fill: "#0270DE" }) }), _jsx("span", { className: "payment-form__method-name text-info-500", children: formatMessage(messages.card) })] }), paymentMethod === 'card' && (_jsxs("div", { className: "payment-form__card-panel", children: [_jsx(PaymentFields, { numberMountRef: numberMountRef, expiryMountRef: expiryMountRef, cvcMountRef: cvcMountRef, cardError: cardError }), _jsxs(Form.Group, { controlId: "country", className: "mt-3 mb-0 payment__field--country", children: [_jsx(Form.Label, { className: "small m-0 x-small", children: formatMessage(messages.country) }), _jsx(Form.Control, { as: "select", value: billing.country, onChange: (e) => setField('country', e.target.value), children: COUNTRIES.map((country) => {
+                                                    return (_jsx("option", { value: country[0], children: country[1] }, country[0]));
+                                                }) })] })] }))] }), _jsx("div", { className: `my-3 payment-form__method${paymentMethod === 'googlepay' ? ' payment-form__method--selected' : ''}`, children: _jsxs("label", { htmlFor: "paymentMethod-googlepay", className: "payment-form__method-header", children: [_jsx("input", { id: "paymentMethod-googlepay", type: "radio", name: "paymentMethod", value: "googlepay", checked: paymentMethod === 'googlepay', onChange: () => setPaymentMethod('googlepay'), className: "payment-form__radio" }), _jsx("span", { className: "payment-form__method-icon payment-form__method-icon--gpay", "aria-hidden": "true", children: "G" }), _jsx("span", { className: "payment-form__method-name", children: formatMessage(messages.googlePay) })] }) }), _jsx("div", { className: `payment-form__method${paymentMethod === 'paypal' ? ' payment-form__method--selected' : ''}`, children: _jsxs("label", { htmlFor: "paymentMethod-paypal", className: "payment-form__method-header", children: [_jsx("input", { id: "paymentMethod-paypal", type: "radio", name: "paymentMethod", value: "paypal", checked: paymentMethod === 'paypal', onChange: () => setPaymentMethod('paypal'), className: "payment-form__radio" }), _jsx("span", { className: "payment-form__method-icon payment-form__method-icon--paypal", "aria-hidden": "true", children: "P" }), _jsx("span", { className: "payment-form__method-name", children: formatMessage(messages.paypal) })] }) })] }), _jsx("p", { className: "payment-form__terms text-gray-700 mb-3", children: formatMessage(messages.termsNotice, {
+                    renewalDate: trialEnd !== null && trialEnd !== void 0 ? trialEnd : '{date}',
+                    price: amount,
+                    frequency,
+                    termsLink: (_jsx("a", { className: "text-gray-700", href: "/terms", target: "_blank", rel: "noreferrer", children: formatMessage(messages.termsOfUse) })),
+                    refundLink: (_jsx("a", { className: "text-gray-700", href: "/refund-policy", target: "_blank", rel: "noreferrer", children: formatMessage(messages.refundPolicy) })),
+                }) }), _jsx(Form.Group, { controlId: "recurringConfirm", className: "mb-2", children: _jsx(Form.Checkbox, { id: "recurringConfirm", checked: confirmed, onChange: (e) => setConfirmed(e.target.checked), children: _jsx("span", { className: "text-gray-700", children: formatMessage(messages.recurringConfirm, {
+                            cycle: cycleToShow,
+                            price: amount,
+                            frequency,
+                        }) }) }) }), showExtraConfirm && (_jsx(Form.Group, { controlId: "ukCaConfirm", className: "mb-4", children: _jsx(Form.Checkbox, { id: "ukCaConfirm", checked: ukCaConfirmed, onChange: (e) => setUkCaConfirmed(e.target.checked), children: _jsx("span", { className: "text-gray-700", children: formatMessage(messages.ukCaResidentConfirm) }) }) })), _jsxs(Button, { variant: "brand", className: "payment-form__submit", onClick: () => onPlaceOrder(buildConsent()), disabled: !stripeReady
+                    || submitting
+                    || !confirmed
+                    || (showExtraConfirm && !ukCaConfirmed), children: [busy && (_jsx(Spinner, { animation: "border", size: "sm", className: "mr-2", screenReaderText: formatMessage(messages.spinnerScreenReaderText) })), buttonLabel] })] }));
+};
+export default PaymentForm;
+//# sourceMappingURL=PaymentForm.js.map

package/dist/components/PaymentForm/PaymentForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentForm.js","sourceRoot":"","sources":["../../../src/components/PaymentForm/PaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport type { Ref } from 'react';\nimport { Button, Form, Spinner } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport PaymentFields from '../PaymentFields/PaymentFields';\nimport type { BillingInfo, CheckoutConsent } from '../../types';\nimport type { PlanPrice } from '../../utils/billingDetails';\nimport { COUNTRIES_REQUIRING_EXTRA_CONFIRM, COUNTRIES } from '../../constants';\nimport messages from './Messages';\n\ntype PaymentMethod = 'card' | 'googlepay' | 'paypal';\n\nexport interface PaymentFormProps {\n  billing: BillingInfo,\n  setField: (field: keyof BillingInfo, value: string) => void,\n  numberMountRef: Ref<HTMLDivElement>,\n  expiryMountRef: Ref<HTMLDivElement>,\n  cvcMountRef: Ref<HTMLDivElement>,\n  cardError: string,\n  stripeReady: boolean,\n  sessionReady: boolean,\n  submitting: boolean,\n  onPlaceOrder: (consent: CheckoutConsent) => void,\n  priceToShow: PlanPrice | null,\n  cycleToShow: string,\n  trialEnd?: string,\n  userCountry?: string | null,\n}\n\nconst PaymentForm = ({\n  billing,\n  setField,\n  numberMountRef,\n  expiryMountRef,\n  cvcMountRef,\n  cardError,\n  stripeReady,\n  sessionReady,\n  submitting,\n  onPlaceOrder,\n  priceToShow,\n  cycleToShow,\n  trialEnd,\n  userCountry,\n}: PaymentFormProps) => {\n  const { formatMessage } = useIntl();\n  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>('card');\n  const [confirmed, setConfirmed] = useState(false);\n  const [ukCaConfirmed, setUkCaConfirmed] = useState(false);\n\n  const showExtraConfirm\n    = !!userCountry && COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(userCountry);\n\n  const busy = submitting || !stripeReady || !sessionReady;\n\n  let buttonLabel = formatMessage(messages.confirmSubscription);\n  if (submitting) buttonLabel = formatMessage(messages.processing);\n  else if (!sessionReady) buttonLabel = formatMessage(messages.loadingPayment);\n  else if (!stripeReady) buttonLabel = formatMessage(messages.loadingPayment);\n\n  const amount = priceToShow?.amount ?? '';\n  const frequency = cycleToShow === 'annual' ? 'year' : 'month';\n\n  const buildConsent = (): CheckoutConsent => {\n    const termsText = formatMessage(messages.termsNotice, {\n      renewalDate: trialEnd ?? '{date}',\n      price: amount,\n      frequency,\n      termsLink: formatMessage(messages.termsOfUse),\n      refundLink: formatMessage(messages.refundPolicy),\n    });\n    const recurringText = formatMessage(messages.recurringConfirm, {\n      cycle: cycleToShow,\n      price: amount,\n      frequency,\n    });\n    const consentParts = [termsText, recurringText];\n    if (showExtraConfirm) {\n      consentParts.push(formatMessage(messages.ukCaResidentConfirm));\n    }\n    return {\n      tConsentRecurring: confirmed,\n      tConsentUkCa: showExtraConfirm ? ukCaConfirmed : null,\n      tConsentAt: new Date().toISOString(),\n      tConsentText: consentParts.join('\\n\\n'),\n    };\n  };\n\n  return (\n    <div className=\"payment-form bg-white\">\n      <h2 className=\"payment-form__heading font-weight-bold mb-3 text-primary-500\">\n        {formatMessage(messages.selectPaymentMethod)}\n      </h2>\n\n      <p className=\"payment-form__help small mb-4\">\n        <strong className=\"d-block text-primary-500\">\n          {formatMessage(messages.needAssistance)}\n        </strong>{' '}\n        <span className=\"text-gray-700\">\n          {formatMessage(messages.needAssistanceBody, {\n            link: (\n              <a\n                href=\"https://support.edx.org\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                className=\"text-gray-700\"\n              >\n                {formatMessage(messages.learnerHelpCenter)}\n              </a>\n            ),\n          })}\n        </span>\n      </p>\n\n      {/* ── Payment method accordion ── */}\n      <div className=\"payment-form__methods mb-4\">\n        {/* ── Card ── */}\n        <div\n          className={`payment-form__method${paymentMethod === 'card' ? ' payment-form__method--selected' : ''}`}\n        >\n          {/* Header row — always visible */}\n          <label\n            htmlFor=\"paymentMethod-card\"\n            className=\"payment-form__method-header\"\n          >\n            <input\n              id=\"paymentMethod-card\"\n              type=\"radio\"\n              name=\"paymentMethod\"\n              value=\"card\"\n              checked={paymentMethod === 'card'}\n              onChange={() => setPaymentMethod('card')}\n              className=\"payment-form__radio\"\n            />\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M0 4C0 3.46957 0.210714 2.96086 0.585786 2.58579C0.960859 2.21071 1.46957 2 2 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4H0ZM0 6V12C0 12.5304 0.210714 13.0391 0.585786 13.4142C0.960859 13.7893 1.46957 14 2 14H14C14.5304 14 15.0391 13.7893 15.4142 13.4142C15.7893 13.0391 16 12.5304 16 12V6H0ZM3 11C3 10.7348 3.10536 10.4804 3.29289 10.2929C3.48043 10.1054 3.73478 10 4 10H5C5.26522 10 5.51957 10.1054 5.70711 10.2929C5.89464 10.4804 6 10.7348 6 11C6 11.2652 5.89464 11.5196 5.70711 11.7071C5.51957 11.8946 5.26522 12 5 12H4C3.73478 12 3.48043 11.8946 3.29289 11.7071C3.10536 11.5196 3 11.2652 3 11Z\"\n                fill=\"#0270DE\"\n              />\n            </svg>\n            <span className=\"payment-form__method-name text-info-500\">\n              {formatMessage(messages.card)}\n            </span>\n          </label>\n\n          {/* Expanded panel — only when selected */}\n          {paymentMethod === 'card' && (\n            <div className=\"payment-form__card-panel\">\n              <PaymentFields\n                numberMountRef={numberMountRef}\n                expiryMountRef={expiryMountRef}\n                cvcMountRef={cvcMountRef}\n                cardError={cardError}\n              />\n              <Form.Group\n                controlId=\"country\"\n                className=\"mt-3 mb-0 payment__field--country\"\n              >\n                <Form.Label className=\"small m-0 x-small\">\n                  {formatMessage(messages.country)}\n                </Form.Label>\n                <Form.Control\n                  as=\"select\"\n                  value={billing.country}\n                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>\n                    setField('country', e.target.value)}\n                >\n                  {COUNTRIES.map((country) => {\n                    return (\n                      <option key={country[0]} value={country[0]}>\n                        {country[1]}\n                      </option>\n                    );\n                  })}\n                </Form.Control>\n              </Form.Group>\n            </div>\n          )}\n        </div>\n\n        {/* ── Google Pay ── */}\n        <div\n          className={`my-3 payment-form__method${paymentMethod === 'googlepay' ? ' payment-form__method--selected' : ''}`}\n        >\n          <label\n            htmlFor=\"paymentMethod-googlepay\"\n            className=\"payment-form__method-header\"\n          >\n            <input\n              id=\"paymentMethod-googlepay\"\n              type=\"radio\"\n              name=\"paymentMethod\"\n              value=\"googlepay\"\n              checked={paymentMethod === 'googlepay'}\n              onChange={() => setPaymentMethod('googlepay')}\n              className=\"payment-form__radio\"\n            />\n            <span\n              className=\"payment-form__method-icon payment-form__method-icon--gpay\"\n              aria-hidden=\"true\"\n            >\n              G\n            </span>\n            <span className=\"payment-form__method-name\">\n              {formatMessage(messages.googlePay)}\n            </span>\n          </label>\n        </div>\n\n        {/* ── PayPal ── */}\n        <div\n          className={`payment-form__method${paymentMethod === 'paypal' ? ' payment-form__method--selected' : ''}`}\n        >\n          <label\n            htmlFor=\"paymentMethod-paypal\"\n            className=\"payment-form__method-header\"\n          >\n            <input\n              id=\"paymentMethod-paypal\"\n              type=\"radio\"\n              name=\"paymentMethod\"\n              value=\"paypal\"\n              checked={paymentMethod === 'paypal'}\n              onChange={() => setPaymentMethod('paypal')}\n              className=\"payment-form__radio\"\n            />\n            <span\n              className=\"payment-form__method-icon payment-form__method-icon--paypal\"\n              aria-hidden=\"true\"\n            >\n              P\n            </span>\n            <span className=\"payment-form__method-name\">\n              {formatMessage(messages.paypal)}\n            </span>\n          </label>\n        </div>\n      </div>\n\n      {/* ── Terms ── */}\n      <p className=\"payment-form__terms text-gray-700 mb-3\">\n        {formatMessage(messages.termsNotice, {\n          renewalDate: trialEnd ?? '{date}',\n          price: amount,\n          frequency,\n          termsLink: (\n            <a\n              className=\"text-gray-700\"\n              href=\"/terms\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              {formatMessage(messages.termsOfUse)}\n            </a>\n          ),\n          refundLink: (\n            <a\n              className=\"text-gray-700\"\n              href=\"/refund-policy\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              {formatMessage(messages.refundPolicy)}\n            </a>\n          ),\n        })}\n      </p>\n\n      {/* ── Checkboxes ── */}\n      <Form.Group controlId=\"recurringConfirm\" className=\"mb-2\">\n        <Form.Checkbox\n          id=\"recurringConfirm\"\n          checked={confirmed}\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n            setConfirmed(e.target.checked)}\n        >\n          <span className=\"text-gray-700\">\n            {formatMessage(messages.recurringConfirm, {\n              cycle: cycleToShow,\n              price: amount,\n              frequency,\n            })}\n          </span>\n        </Form.Checkbox>\n      </Form.Group>\n\n      {showExtraConfirm && (\n        <Form.Group controlId=\"ukCaConfirm\" className=\"mb-4\">\n          <Form.Checkbox\n            id=\"ukCaConfirm\"\n            checked={ukCaConfirmed}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n              setUkCaConfirmed(e.target.checked)}\n          >\n            <span className=\"text-gray-700\">\n              {formatMessage(messages.ukCaResidentConfirm)}\n            </span>\n          </Form.Checkbox>\n        </Form.Group>\n      )}\n\n      {/* ── Submit ── */}\n      <Button\n        variant=\"brand\"\n        className=\"payment-form__submit\"\n        onClick={() => onPlaceOrder(buildConsent())}\n        disabled={\n          !stripeReady\n          || submitting\n          || !confirmed\n          || (showExtraConfirm && !ukCaConfirmed)\n        }\n      >\n        {busy && (\n          <Spinner\n            animation=\"border\"\n            size=\"sm\"\n            className=\"mr-2\"\n            screenReaderText={formatMessage(messages.spinnerScreenReaderText)}\n          />\n        )}\n        {buttonLabel}\n      </Button>\n    </div>\n  );\n};\n\nexport default PaymentForm;\n"]}