@edx/frontend-app-subscription-checkout 1.0.0

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":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAG3D,OAAO,EAAE,iCAAiC,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,QAAQ,MAAM,YAAY,CAAC;AAqBlC,MAAM,WAAW,GAAG,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,cAAc,EACd,cAAc,EACd,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,QAAQ,EACR,WAAW,GACM,EAAE,EAAE;;IACrB,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAgB,MAAM,CAAC,CAAC;IAC1E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,gBAAgB,GAClB,CAAC,CAAC,WAAW,IAAI,iCAAiC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE7E,MAAM,IAAI,GAAG,UAAU,IAAI,CAAC,WAAW,IAAI,CAAC,YAAY,CAAC;IAEzD,IAAI,WAAW,GAAG,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAC9D,IAAI,UAAU;QAAE,WAAW,GAAG,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;SAC5D,IAAI,CAAC,YAAY;QAAE,WAAW,GAAG,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;SACxE,IAAI,CAAC,WAAW;QAAE,WAAW,GAAG,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IAE5E,MAAM,MAAM,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,mCAAI,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAE9D,MAAM,YAAY,GAAG,GAAoB,EAAE;QACzC,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,WAAW,EAAE;YACpD,WAAW,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,QAAQ;YACjC,KAAK,EAAE,MAAM;YACb,SAAS;YACT,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC;YAC7C,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,YAAY,CAAC;SACjD,CAAC,CAAC;QACH,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,gBAAgB,EAAE;YAC7D,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,MAAM;YACb,SAAS;SACV,CAAC,CAAC;QACH,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAChD,IAAI,gBAAgB,EAAE,CAAC;YACrB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACjE,CAAC;QACD,OAAO;YACL,iBAAiB,EAAE,SAAS;YAC5B,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI;YACrD,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;YACpC,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;SACxC,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,aAAI,SAAS,EAAC,8DAA8D,YACzE,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC,GACzC,EAEL,aAAG,SAAS,EAAC,+BAA+B,aAC1C,iBAAQ,SAAS,EAAC,0BAA0B,YACzC,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,GAChC,EAAC,GAAG,EACb,eAAM,SAAS,EAAC,eAAe,YAC5B,aAAa,CAAC,QAAQ,CAAC,kBAAkB,EAAE;4BAC1C,IAAI,EAAE,CACJ,YACE,IAAI,EAAC,yBAAyB,EAC9B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,SAAS,EAAC,eAAe,YAExB,aAAa,CAAC,QAAQ,CAAC,iBAAiB,CAAC,GACxC,CACL;yBACF,CAAC,GACG,IACL,EAGJ,eAAK,SAAS,EAAC,4BAA4B,aAEzC,eACE,SAAS,EAAE,uBAAuB,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,aAGrG,iBACE,OAAO,EAAC,oBAAoB,EAC5B,SAAS,EAAC,6BAA6B,aAEvC,gBACE,EAAE,EAAC,oBAAoB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,aAAa,KAAK,MAAM,EACjC,QAAQ,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC,EACxC,SAAS,EAAC,qBAAqB,GAC/B,EACF,cACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,YAEX,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,2nBAA2nB,EAC7nB,IAAI,EAAC,SAAS,GACd,GACE,EACN,eAAM,SAAS,EAAC,yCAAyC,YACtD,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,GACxB,IACD,EAGP,aAAa,KAAK,MAAM,IAAI,CAC3B,eAAK,SAAS,EAAC,0BAA0B,aACvC,KAAC,aAAa,IACZ,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,GACpB,EACF,MAAC,IAAI,CAAC,KAAK,IACT,SAAS,EAAC,SAAS,EACnB,SAAS,EAAC,mCAAmC,aAE7C,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,mBAAmB,YACtC,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,GACrB,EACb,KAAC,IAAI,CAAC,OAAO,IACX,EAAE,EAAC,QAAQ,EACX,KAAK,EAAE,OAAO,CAAC,OAAO,EACtB,QAAQ,EAAE,CAAC,CAAuC,EAAE,EAAE,CACpD,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,YAEpC,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;oDACzB,OAAO,CACL,iBAAyB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YACvC,OAAO,CAAC,CAAC,CAAC,IADA,OAAO,CAAC,CAAC,CAAC,CAEd,CACV,CAAC;gDACJ,CAAC,CAAC,GACW,IACJ,IACT,CACP,IACG,EAGN,cACE,SAAS,EAAE,4BAA4B,aAAa,KAAK,WAAW,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,YAE/G,iBACE,OAAO,EAAC,yBAAyB,EACjC,SAAS,EAAC,6BAA6B,aAEvC,gBACE,EAAE,EAAC,yBAAyB,EAC5B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,aAAa,KAAK,WAAW,EACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAC7C,SAAS,EAAC,qBAAqB,GAC/B,EACF,eACE,SAAS,EAAC,2DAA2D,iBACzD,MAAM,kBAGb,EACP,eAAM,SAAS,EAAC,2BAA2B,YACxC,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,GAC7B,IACD,GACJ,EAGN,cACE,SAAS,EAAE,uBAAuB,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,YAEvG,iBACE,OAAO,EAAC,sBAAsB,EAC9B,SAAS,EAAC,6BAA6B,aAEvC,gBACE,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,KAAK,QAAQ,EACnC,QAAQ,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAC1C,SAAS,EAAC,qBAAqB,GAC/B,EACF,eACE,SAAS,EAAC,6DAA6D,iBAC3D,MAAM,kBAGb,EACP,eAAM,SAAS,EAAC,2BAA2B,YACxC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,GAC1B,IACD,GACJ,IACF,EAGN,YAAG,SAAS,EAAC,wCAAwC,YAClD,aAAa,CAAC,QAAQ,CAAC,WAAW,EAAE;oBACnC,WAAW,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,QAAQ;oBACjC,KAAK,EAAE,MAAM;oBACb,SAAS;oBACT,SAAS,EAAE,CACT,YACE,SAAS,EAAC,eAAe,EACzB,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,YAEf,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,GACjC,CACL;oBACD,UAAU,EAAE,CACV,YACE,SAAS,EAAC,eAAe,EACzB,IAAI,EAAC,gBAAgB,EACrB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,YAEf,aAAa,CAAC,QAAQ,CAAC,YAAY,CAAC,GACnC,CACL;iBACF,CAAC,GACA,EAGJ,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,kBAAkB,EAAC,SAAS,EAAC,MAAM,YACvD,KAAC,IAAI,CAAC,QAAQ,IACZ,EAAE,EAAC,kBAAkB,EACrB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE,CACnD,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAEhC,eAAM,SAAS,EAAC,eAAe,YAC5B,aAAa,CAAC,QAAQ,CAAC,gBAAgB,EAAE;4BACxC,KAAK,EAAE,WAAW;4BAClB,KAAK,EAAE,MAAM;4BACb,SAAS;yBACV,CAAC,GACG,GACO,GACL,EAEZ,gBAAgB,IAAI,CACnB,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,aAAa,EAAC,SAAS,EAAC,MAAM,YAClD,KAAC,IAAI,CAAC,QAAQ,IACZ,EAAE,EAAC,aAAa,EAChB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE,CACnD,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAEpC,eAAM,SAAS,EAAC,eAAe,YAC5B,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC,GACvC,GACO,GACL,CACd,EAGD,MAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,sBAAsB,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC,EAC3C,QAAQ,EACN,CAAC,WAAW;uBACT,UAAU;uBACV,CAAC,SAAS;uBACV,CAAC,gBAAgB,IAAI,CAAC,aAAa,CAAC,aAGxC,IAAI,IAAI,CACP,KAAC,OAAO,IACN,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,MAAM,EAChB,gBAAgB,EAAE,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,GACjE,CACH,EACA,WAAW,IACL,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","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"]}

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

@@ -0,0 +1,103 @@
+declare const messages: {
+    successHeadline: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    successSubheadline: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    successSubheadlineWithCourse: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    findACourse: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    startCourse: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    viewReceipt: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    whatsIncluded: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    benefit1: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    benefit1WithCourse: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    benefit2: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    benefit3: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    benefit4: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    orderNumber: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    purchaseDate: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    cancelNotice: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    blockedHeading: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    blockedDefault: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    paymentFailedHeading: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    paymentFailedDefault: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    tryAgain: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/components/StatusScreens/Messages.js

@@ -0,0 +1,108 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    // SuccessScreen
+    successHeadline: {
+        id: 'checkout.successScreen.headline',
+        defaultMessage: "You're ready to begin learning.",
+        description: 'Main headline on the success screen',
+    },
+    successSubheadline: {
+        id: 'checkout.successScreen.subheadline',
+        defaultMessage: 'Your subscription is now active. Below is a summary of your order.',
+        description: 'Subheadline on the success screen',
+    },
+    successSubheadlineWithCourse: {
+        id: 'checkout.successScreen.subheadlineWithCourse',
+        defaultMessage: "Your subscription is now active (and you're enrolled in {courseLabel}). Below is a summary of your order.",
+        description: 'Subheadline on the success screen when the user enrolled in a specific course',
+    },
+    findACourse: {
+        id: 'checkout.successScreen.findACourse',
+        defaultMessage: "Let's find a course",
+        description: 'Primary CTA button on the success screen',
+    },
+    startCourse: {
+        id: 'checkout.successScreen.startCourse',
+        defaultMessage: 'Start course',
+        description: 'Primary CTA when the user enrolled in a specific course at checkout',
+    },
+    viewReceipt: {
+        id: 'checkout.successScreen.viewReceipt',
+        defaultMessage: 'View receipt',
+        description: 'View receipt link on the success screen',
+    },
+    whatsIncluded: {
+        id: 'checkout.successScreen.whatsIncluded',
+        defaultMessage: "What's included in your subscription",
+        description: 'Section heading for subscription benefits list',
+    },
+    benefit1: {
+        id: 'checkout.successScreen.benefit1',
+        defaultMessage: 'Access to graded assignments and exams in all courses you enroll in',
+        description: 'First subscription benefit',
+    },
+    benefit1WithCourse: {
+        id: 'checkout.successScreen.benefit1WithCourse',
+        defaultMessage: 'Access to graded assignments and exams in {courseLabel} and all courses you enroll in',
+        description: 'First subscription benefit when a specific course was enrolled at checkout',
+    },
+    benefit2: {
+        id: 'checkout.successScreen.benefit2',
+        defaultMessage: 'Shareable certificate upon completion',
+        description: 'Second subscription benefit',
+    },
+    benefit3: {
+        id: 'checkout.successScreen.benefit3',
+        defaultMessage: '24/7 global support',
+        description: 'Third subscription benefit',
+    },
+    benefit4: {
+        id: 'checkout.successScreen.benefit4',
+        defaultMessage: 'Early access to edX learning features',
+        description: 'Fourth subscription benefit',
+    },
+    orderNumber: {
+        id: 'checkout.successScreen.orderNumber',
+        defaultMessage: 'Order number',
+        description: 'Order number label',
+    },
+    purchaseDate: {
+        id: 'checkout.successScreen.purchaseDate',
+        defaultMessage: 'Purchase date',
+        description: 'Purchase date label',
+    },
+    cancelNotice: {
+        id: 'checkout.successScreen.cancelNotice',
+        defaultMessage: 'To avoid being charged, cancel your subscription by {trialEnd} from your dashboard.',
+        description: 'Trial cancellation reminder at the bottom of the success screen',
+    },
+    // BlockedScreen
+    blockedHeading: {
+        id: 'checkout.blockedScreen.heading',
+        defaultMessage: 'Order blocked',
+        description: 'Heading shown when order is blocked',
+    },
+    blockedDefault: {
+        id: 'checkout.blockedScreen.defaultMessage',
+        defaultMessage: 'We were unable to complete this order. Please contact support if you believe this is an error.',
+        description: 'Default blocked message when no detail is provided',
+    },
+    // PaymentFailedScreen
+    paymentFailedHeading: {
+        id: 'checkout.paymentFailedScreen.heading',
+        defaultMessage: 'Payment failed',
+        description: 'Heading shown when payment fails',
+    },
+    paymentFailedDefault: {
+        id: 'checkout.paymentFailedScreen.defaultMessage',
+        defaultMessage: 'Your card could not be processed. Please check your card details and try again.',
+        description: 'Default payment failed message',
+    },
+    tryAgain: {
+        id: 'checkout.paymentFailedScreen.tryAgain',
+        defaultMessage: 'Try again',
+        description: 'Try again button label',
+    },
+});
+export default messages;
+//# sourceMappingURL=Messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/StatusScreens/Messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,gBAAgB;IAChB,eAAe,EAAE;QACf,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,iCAAiC;QACjD,WAAW,EAAE,qCAAqC;KACnD;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,oEAAoE;QACpF,WAAW,EAAE,mCAAmC;KACjD;IACD,4BAA4B,EAAE;QAC5B,EAAE,EAAE,8CAA8C;QAClD,cAAc,EAAE,2GAA2G;QAC3H,WAAW,EAAE,+EAA+E;KAC7F;IACD,WAAW,EAAE;QACX,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,0CAA0C;KACxD;IACD,WAAW,EAAE;QACX,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,qEAAqE;KACnF;IACD,WAAW,EAAE;QACX,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,yCAAyC;KACvD;IACD,aAAa,EAAE;QACb,EAAE,EAAE,sCAAsC;QAC1C,cAAc,EAAE,sCAAsC;QACtD,WAAW,EAAE,gDAAgD;KAC9D;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,qEAAqE;QACrF,WAAW,EAAE,4BAA4B;KAC1C;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,2CAA2C;QAC/C,cAAc,EAAE,uFAAuF;QACvG,WAAW,EAAE,4EAA4E;KAC1F;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,uCAAuC;QACvD,WAAW,EAAE,6BAA6B;KAC3C;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,4BAA4B;KAC1C;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,uCAAuC;QACvD,WAAW,EAAE,6BAA6B;KAC3C;IACD,WAAW,EAAE;QACX,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,oBAAoB;KAClC;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,qFAAqF;QACrG,WAAW,EAAE,iEAAiE;KAC/E;IAED,gBAAgB;IAChB,cAAc,EAAE;QACd,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,qCAAqC;KACnD;IACD,cAAc,EAAE;QACd,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,gGAAgG;QAChH,WAAW,EAAE,oDAAoD;KAClE;IAED,sBAAsB;IACtB,oBAAoB,EAAE;QACpB,EAAE,EAAE,sCAAsC;QAC1C,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,kCAAkC;KAChD;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,iFAAiF;QACjG,WAAW,EAAE,gCAAgC;KAC9C;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,WAAW;QAC3B,WAAW,EAAE,wBAAwB;KACtC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  // SuccessScreen\n  successHeadline: {\n    id: 'checkout.successScreen.headline',\n    defaultMessage: \"You're ready to begin learning.\",\n    description: 'Main headline on the success screen',\n  },\n  successSubheadline: {\n    id: 'checkout.successScreen.subheadline',\n    defaultMessage: 'Your subscription is now active. Below is a summary of your order.',\n    description: 'Subheadline on the success screen',\n  },\n  successSubheadlineWithCourse: {\n    id: 'checkout.successScreen.subheadlineWithCourse',\n    defaultMessage: \"Your subscription is now active (and you're enrolled in {courseLabel}). Below is a summary of your order.\",\n    description: 'Subheadline on the success screen when the user enrolled in a specific course',\n  },\n  findACourse: {\n    id: 'checkout.successScreen.findACourse',\n    defaultMessage: \"Let's find a course\",\n    description: 'Primary CTA button on the success screen',\n  },\n  startCourse: {\n    id: 'checkout.successScreen.startCourse',\n    defaultMessage: 'Start course',\n    description: 'Primary CTA when the user enrolled in a specific course at checkout',\n  },\n  viewReceipt: {\n    id: 'checkout.successScreen.viewReceipt',\n    defaultMessage: 'View receipt',\n    description: 'View receipt link on the success screen',\n  },\n  whatsIncluded: {\n    id: 'checkout.successScreen.whatsIncluded',\n    defaultMessage: \"What's included in your subscription\",\n    description: 'Section heading for subscription benefits list',\n  },\n  benefit1: {\n    id: 'checkout.successScreen.benefit1',\n    defaultMessage: 'Access to graded assignments and exams in all courses you enroll in',\n    description: 'First subscription benefit',\n  },\n  benefit1WithCourse: {\n    id: 'checkout.successScreen.benefit1WithCourse',\n    defaultMessage: 'Access to graded assignments and exams in {courseLabel} and all courses you enroll in',\n    description: 'First subscription benefit when a specific course was enrolled at checkout',\n  },\n  benefit2: {\n    id: 'checkout.successScreen.benefit2',\n    defaultMessage: 'Shareable certificate upon completion',\n    description: 'Second subscription benefit',\n  },\n  benefit3: {\n    id: 'checkout.successScreen.benefit3',\n    defaultMessage: '24/7 global support',\n    description: 'Third subscription benefit',\n  },\n  benefit4: {\n    id: 'checkout.successScreen.benefit4',\n    defaultMessage: 'Early access to edX learning features',\n    description: 'Fourth subscription benefit',\n  },\n  orderNumber: {\n    id: 'checkout.successScreen.orderNumber',\n    defaultMessage: 'Order number',\n    description: 'Order number label',\n  },\n  purchaseDate: {\n    id: 'checkout.successScreen.purchaseDate',\n    defaultMessage: 'Purchase date',\n    description: 'Purchase date label',\n  },\n  cancelNotice: {\n    id: 'checkout.successScreen.cancelNotice',\n    defaultMessage: 'To avoid being charged, cancel your subscription by {trialEnd} from your dashboard.',\n    description: 'Trial cancellation reminder at the bottom of the success screen',\n  },\n\n  // BlockedScreen\n  blockedHeading: {\n    id: 'checkout.blockedScreen.heading',\n    defaultMessage: 'Order blocked',\n    description: 'Heading shown when order is blocked',\n  },\n  blockedDefault: {\n    id: 'checkout.blockedScreen.defaultMessage',\n    defaultMessage: 'We were unable to complete this order. Please contact support if you believe this is an error.',\n    description: 'Default blocked message when no detail is provided',\n  },\n\n  // PaymentFailedScreen\n  paymentFailedHeading: {\n    id: 'checkout.paymentFailedScreen.heading',\n    defaultMessage: 'Payment failed',\n    description: 'Heading shown when payment fails',\n  },\n  paymentFailedDefault: {\n    id: 'checkout.paymentFailedScreen.defaultMessage',\n    defaultMessage: 'Your card could not be processed. Please check your card details and try again.',\n    description: 'Default payment failed message',\n  },\n  tryAgain: {\n    id: 'checkout.paymentFailedScreen.tryAgain',\n    defaultMessage: 'Try again',\n    description: 'Try again button label',\n  },\n});\n\nexport default messages;\n"]}

package/dist/components/StatusScreens/StatusScreens.d.ts

@@ -0,0 +1,23 @@
+export interface SuccessScreenProps {
+    subscriptionBiId?: string;
+    orderNumber?: string;
+    purchaseDate?: string;
+    trialStart?: string;
+    trialEnd?: string;
+    onFindCourse?: () => void;
+    cardLast4?: string;
+    priceToShow?: string;
+    cycleToShow?: string;
+    /** e.g. "StanfordOnline: Algorithms: Design and Analysis" — enables course-aware copy. */
+    courseLabel?: string | null;
+}
+export declare const SuccessScreen: ({ subscriptionBiId, orderNumber, purchaseDate, trialEnd, onFindCourse, courseLabel, }: SuccessScreenProps) => import("react/jsx-runtime").JSX.Element;
+export interface BlockedScreenProps {
+    detail?: string;
+}
+export declare const BlockedScreen: ({ detail }: BlockedScreenProps) => import("react/jsx-runtime").JSX.Element;
+export interface PaymentFailedScreenProps {
+    detail?: string;
+    onBack: () => void;
+}
+export declare const PaymentFailedScreen: ({ detail, onBack, }: PaymentFailedScreenProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/StatusScreens/StatusScreens.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Icon } from '@openedx/paragon';
+import { Error as ErrorIcon, Block } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+import messages from './Messages';
+export const SuccessScreen = ({ subscriptionBiId, orderNumber, purchaseDate, trialEnd, onFindCourse, courseLabel = null, }) => {
+    var _a;
+    const { formatMessage } = useIntl();
+    const displayOrderNumber = (_a = orderNumber !== null && orderNumber !== void 0 ? orderNumber : subscriptionBiId) !== null && _a !== void 0 ? _a : '—';
+    const hasCourse = !!courseLabel;
+    return (_jsxs("div", { className: "success-screen", children: [_jsx("h1", { className: "success-screen__headline font-weight-bold mb-2", children: formatMessage(messages.successHeadline) }), _jsx("p", { className: "text-muted mb-4", children: hasCourse
+                    ? formatMessage(messages.successSubheadlineWithCourse, { courseLabel })
+                    : formatMessage(messages.successSubheadline) }), _jsx("div", { className: "success-screen__ctas d-flex align-items-center mb-5", children: _jsx(Button, { variant: "brand", className: "success-screen__cta-primary mr-3", onClick: onFindCourse, children: formatMessage(hasCourse ? messages.startCourse : messages.findACourse) }) }), _jsxs("div", { className: "row", children: [_jsxs("div", { className: "col-12 col-md-7 mb-4", children: [_jsx("h2", { className: "h5 font-weight-bold mb-3", children: formatMessage(messages.whatsIncluded) }), _jsxs("ul", { className: "success-screen__benefits pl-4", children: [_jsx("li", { className: "mb-2", children: hasCourse
+                                            ? formatMessage(messages.benefit1WithCourse, { courseLabel })
+                                            : formatMessage(messages.benefit1) }), _jsx("li", { className: "mb-2", children: formatMessage(messages.benefit2) }), _jsx("li", { className: "mb-2", children: formatMessage(messages.benefit3) }), _jsx("li", { className: "mb-2", children: formatMessage(messages.benefit4) })] })] }), _jsxs("div", { className: "col-12 col-md-5 mb-4", children: [displayOrderNumber && (_jsxs("div", { className: "mb-3", children: [_jsx("p", { className: "font-weight-bold mb-0", children: formatMessage(messages.orderNumber) }), _jsx("p", { className: "text-muted mb-0", children: displayOrderNumber })] })), purchaseDate && (_jsxs("div", { children: [_jsx("p", { className: "font-weight-bold mb-0", children: formatMessage(messages.purchaseDate) }), _jsx("p", { className: "text-muted mb-0", children: purchaseDate })] }))] })] }), _jsx("hr", {}), trialEnd && (_jsx("p", { className: "text-muted small mt-3", children: formatMessage(messages.cancelNotice, { trialEnd }) }))] }));
+};
+export const BlockedScreen = ({ detail }) => {
+    const { formatMessage } = useIntl();
+    return (_jsxs("div", { className: "blocked-screen text-center py-5", children: [_jsx(Icon, { src: Block, className: "blocked-screen__icon text-danger mb-3" }), _jsx("h3", { className: "font-weight-bold", children: formatMessage(messages.blockedHeading) }), _jsx("p", { className: "text-muted", children: detail || formatMessage(messages.blockedDefault) })] }));
+};
+export const PaymentFailedScreen = ({ detail, onBack, }) => {
+    const { formatMessage } = useIntl();
+    return (_jsxs("div", { className: "payment-failed-screen text-center py-4", children: [_jsx(Icon, { src: ErrorIcon, className: "payment-failed-screen__icon text-danger mb-3" }), _jsx("h3", { className: "font-weight-bold mb-2", children: formatMessage(messages.paymentFailedHeading) }), _jsx("p", { className: "payment-failed-screen__detail text-muted mb-4", children: detail || formatMessage(messages.paymentFailedDefault) }), _jsx(Button, { variant: "brand", className: "w-100", onClick: onBack, children: formatMessage(messages.tryAgain) })] }));
+};
+//# sourceMappingURL=StatusScreens.js.map

package/dist/components/StatusScreens/StatusScreens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusScreens.js","sourceRoot":"","sources":["../../../src/components/StatusScreens/StatusScreens.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, Icon } from '@openedx/paragon';\nimport { Error as ErrorIcon, Block } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from './Messages';\n\n// ---------------------------------------------------------------------------\n// SuccessScreen\n// ---------------------------------------------------------------------------\n\nexport interface SuccessScreenProps {\n  subscriptionBiId?: string,\n  orderNumber?: string,\n  purchaseDate?: string,\n  trialStart?: string,\n  trialEnd?: string,\n  onFindCourse?: () => void,\n  cardLast4?: string,\n  priceToShow?: string,\n  cycleToShow?: string,\n  /** e.g. \"StanfordOnline: Algorithms: Design and Analysis\" — enables course-aware copy. */\n  courseLabel?: string | null,\n}\n\nexport const SuccessScreen = ({\n  subscriptionBiId,\n  orderNumber,\n  purchaseDate,\n  trialEnd,\n  onFindCourse,\n  courseLabel = null,\n}: SuccessScreenProps) => {\n  const { formatMessage } = useIntl();\n\n  const displayOrderNumber = orderNumber ?? subscriptionBiId ?? '—';\n  const hasCourse = !!courseLabel;\n\n  return (\n    <div className=\"success-screen\">\n      <h1 className=\"success-screen__headline font-weight-bold mb-2\">\n        {formatMessage(messages.successHeadline)}\n      </h1>\n\n      <p className=\"text-muted mb-4\">\n        {hasCourse\n          ? formatMessage(messages.successSubheadlineWithCourse, { courseLabel })\n          : formatMessage(messages.successSubheadline)}\n      </p>\n\n      {/* ── CTAs ── */}\n      <div className=\"success-screen__ctas d-flex align-items-center mb-5\">\n        <Button\n          variant=\"brand\"\n          className=\"success-screen__cta-primary mr-3\"\n          onClick={onFindCourse}\n        >\n          {formatMessage(hasCourse ? messages.startCourse : messages.findACourse)}\n        </Button>\n        {/* View receipt button hidden temporarily */}\n      </div>\n\n      {/* ── Two column: benefits + order details ── */}\n      <div className=\"row\">\n        <div className=\"col-12 col-md-7 mb-4\">\n          <h2 className=\"h5 font-weight-bold mb-3\">\n            {formatMessage(messages.whatsIncluded)}\n          </h2>\n          <ul className=\"success-screen__benefits pl-4\">\n            <li className=\"mb-2\">\n              {hasCourse\n                ? formatMessage(messages.benefit1WithCourse, { courseLabel })\n                : formatMessage(messages.benefit1)}\n            </li>\n            <li className=\"mb-2\">{formatMessage(messages.benefit2)}</li>\n            <li className=\"mb-2\">{formatMessage(messages.benefit3)}</li>\n            <li className=\"mb-2\">{formatMessage(messages.benefit4)}</li>\n          </ul>\n        </div>\n\n        <div className=\"col-12 col-md-5 mb-4\">\n          {displayOrderNumber && (\n            <div className=\"mb-3\">\n              <p className=\"font-weight-bold mb-0\">\n                {formatMessage(messages.orderNumber)}\n              </p>\n              <p className=\"text-muted mb-0\">{displayOrderNumber}</p>\n            </div>\n          )}\n          {purchaseDate && (\n            <div>\n              <p className=\"font-weight-bold mb-0\">\n                {formatMessage(messages.purchaseDate)}\n              </p>\n              <p className=\"text-muted mb-0\">{purchaseDate}</p>\n            </div>\n          )}\n        </div>\n      </div>\n\n      <hr />\n\n      {/* ── Trial cancellation notice ── */}\n      {trialEnd && (\n        <p className=\"text-muted small mt-3\">\n          {formatMessage(messages.cancelNotice, { trialEnd })}\n        </p>\n      )}\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// BlockedScreen\n// ---------------------------------------------------------------------------\n\nexport interface BlockedScreenProps {\n  detail?: string,\n}\n\nexport const BlockedScreen = ({ detail }: BlockedScreenProps) => {\n  const { formatMessage } = useIntl();\n  return (\n    <div className=\"blocked-screen text-center py-5\">\n      <Icon src={Block} className=\"blocked-screen__icon text-danger mb-3\" />\n      <h3 className=\"font-weight-bold\">\n        {formatMessage(messages.blockedHeading)}\n      </h3>\n      <p className=\"text-muted\">\n        {detail || formatMessage(messages.blockedDefault)}\n      </p>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PaymentFailedScreen\n// ---------------------------------------------------------------------------\n\nexport interface PaymentFailedScreenProps {\n  detail?: string,\n  onBack: () => void,\n}\n\nexport const PaymentFailedScreen = ({\n  detail,\n  onBack,\n}: PaymentFailedScreenProps) => {\n  const { formatMessage } = useIntl();\n  return (\n    <div className=\"payment-failed-screen text-center py-4\">\n      <Icon\n        src={ErrorIcon}\n        className=\"payment-failed-screen__icon text-danger mb-3\"\n      />\n      <h3 className=\"font-weight-bold mb-2\">\n        {formatMessage(messages.paymentFailedHeading)}\n      </h3>\n      <p className=\"payment-failed-screen__detail text-muted mb-4\">\n        {detail || formatMessage(messages.paymentFailedDefault)}\n      </p>\n      <Button variant=\"brand\" className=\"w-100\" onClick={onBack}>\n        {formatMessage(messages.tryAgain)}\n      </Button>\n    </div>\n  );\n};\n"]}

package/dist/constants.d.ts

@@ -0,0 +1,59 @@
+import type { CSSProperties } from 'react';
+export declare const appId = "org.openedx.frontend.app.subscription.checkout";
+export declare const subscriptionCheckoutRole = "org.openedx.frontend.role.subscription.checkout";
+export declare const STATUS: {
+    readonly IN_CART: "IN_CART";
+    readonly CONFIRM: "CONFIRM";
+    readonly SANCTION_STARTED: "SANCTION_STARTED";
+    readonly SANCTION_PASSED: "SANCTION_PASSED";
+    readonly SANCTION_BLOCK: "SANCTION_BLOCK";
+    readonly STRIPE_STARTED: "STRIPE_STARTED";
+    readonly STRIPE_SUBSCRIBED: "STRIPE_SUBSCRIBED";
+    readonly STRIPE_CONFIRMATION_REQUIRED: "STRIPE_CONFIRMATION_REQUIRED";
+    readonly STRIPE_FAIL: "STRIPE_FAIL";
+    readonly SUBSCRIPTION_CREATED: "SUBSCRIPTION_CREATED";
+};
+export type Status = typeof STATUS[keyof typeof STATUS];
+export type Phase = 'init' | 'ready' | 'processing' | 'threeds' | 'success' | 'blocked' | 'failed';
+export declare const TERMINAL_STATES: Status[];
+export declare const STATUS_LABELS: Record<string, string>;
+export declare const isTerminalStatus: (status: Status | null | undefined) => boolean;
+/** UI phase derived from the raw bpStatus code + cart readiness. */
+export declare function phaseFor(status: Status | null, ready: boolean): Phase;
+export declare const DEFAULTS: {
+    apiUrl: string;
+    confirmIntentUrl: string;
+    customerUid: string;
+    salableUid: string;
+    billingPlanUid: string;
+};
+export declare const LS_KEYS: {
+    biId: string;
+    uid: string;
+};
+/** When false, the country check is skipped — all countries can access checkout. */
+export declare const GATE_CHECK_COUNTRY = true;
+/**
+ * ISO 3166-1 alpha-2 country codes that are permitted to complete checkout.
+ * Add or remove codes here to open or restrict access by country.
+ * e.g. ['US', 'CA', 'GB'] to allow US, Canada, and UK.
+ */
+export declare const ALLOWED_CHECKOUT_COUNTRIES: readonly string[];
+/**
+ * ISO 3166-1 alpha-2 country codes that require the extra billing-consent checkbox.
+ * Add or remove codes here to control which residents see the second checkbox.
+ */
+export declare const COUNTRIES_REQUIRING_EXTRA_CONFIRM: readonly string[];
+export declare const COUNTRIES: readonly (readonly [string, string])[];
+export declare const STRIPE_FIELD_STYLE: CSSProperties;
+export declare const STRIPE_ELEMENT_OPTS: {
+    style: {
+        base: {
+            fontSize: string;
+            color: string;
+            '::placeholder': {
+                color: string;
+            };
+        };
+    };
+};