@edx/frontend-app-alacarte-checkout 1.0.0

package/dist/components/PaymentForm/PaymentForm.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button, Form, Spinner } from '@openedx/paragon';
+import { useIntl, getAppConfig } from '@openedx/frontend-base';
+import PaymentFields from '../PaymentFields/PaymentFields';
+import { appId, COUNTRIES_REQUIRING_EXTRA_CONFIRM, BILLING_COUNTRIES, } from '../../constants';
+import { fetchIpGeolocation, fetchPublicIp } from '../../utils/provision';
+import messages from './Messages';
+const PaymentForm = ({ billing, setField, numberMountRef, expiryMountRef, cvcMountRef, cardError, stripeReady, sessionReady, submitting, onPlaceOrder, priceToShow, cycleToShow, trialEnd, promoAmount = '39', promoMonths = 3, monthlyRegularAmount = '59', geolocationUrl, }) => {
+    var _a, _b;
+    const { formatMessage } = useIntl();
+    const config = getAppConfig(appId);
+    const tosUrl = config.TOS_URL;
+    const refundPolicyUrl = config.REFUND_POLICY_URL;
+    const [paymentMethod, setPaymentMethod] = useState('card');
+    const [confirmed, setConfirmed] = useState(false);
+    const [extraConfirmed, setExtraConfirmed] = useState(false);
+    const showExtraConfirm = COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(billing.country);
+    const extraConfirmMessage = billing.country === 'CA'
+        ? messages.canadaQuebecConfirm
+        : messages.ukWithdrawalConfirm;
+    const extraConfirmId = billing.country === 'CA'
+        ? 'canadaQuebecConfirm'
+        : 'ukWithdrawalConfirm';
+    useEffect(() => {
+        if (!geolocationUrl)
+            return;
+        void fetchPublicIp()
+            .then((ipAddress) => fetchIpGeolocation(geolocationUrl, ipAddress))
+            .then((geolocation) => {
+            var _a;
+            const countryCode = (_a = geolocation.country_code) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+            if (countryCode && BILLING_COUNTRIES.some(([code]) => code === countryCode)) {
+                setField('country', countryCode);
+            }
+        })
+            .catch(() => undefined);
+    }, [geolocationUrl, setField]);
+    const needsStripe = paymentMethod !== 'paypal';
+    const busy = submitting || (needsStripe && !stripeReady) || !sessionReady;
+    let buttonLabel = paymentMethod === 'paypal'
+        ? formatMessage(messages.continueWithPaypal)
+        : formatMessage(messages.confirmSubscription);
+    if (submitting)
+        buttonLabel = formatMessage(messages.processing);
+    else if (!sessionReady || (needsStripe && !stripeReady))
+        buttonLabel = formatMessage(messages.loadingPayment);
+    const isMonthly = cycleToShow === 'monthly';
+    const frequency = cycleToShow === 'annual' ? 'year' : 'month';
+    const trialDays = 7;
+    const pricing = isMonthly
+        ? formatMessage(messages.termsPricingMonthly, {
+            promoAmount,
+            promoMonths,
+            regularAmount: monthlyRegularAmount,
+        })
+        : formatMessage(messages.termsPricingAnnual, {
+            amount: (_a = priceToShow === null || priceToShow === void 0 ? void 0 : priceToShow.amount) !== null && _a !== void 0 ? _a : '',
+            frequency,
+        });
+    const recurringConfirmText = isMonthly
+        ? formatMessage(messages.recurringConfirmMonthly, {
+            promoAmount,
+            promoMonths,
+            regularAmount: monthlyRegularAmount,
+        })
+        : formatMessage(messages.recurringConfirmAnnual, {
+            amount: (_b = priceToShow === null || priceToShow === void 0 ? void 0 : priceToShow.amount) !== null && _b !== void 0 ? _b : '',
+        });
+    const termsNoticeValues = {
+        pricing,
+        termsLink: formatMessage(messages.termsOfUse),
+        refundLink: formatMessage(messages.refundPolicy),
+    };
+    const termsText = isMonthly
+        ? formatMessage(messages.termsNotice, Object.assign(Object.assign({}, termsNoticeValues), { trialDays, date: trialEnd !== null && trialEnd !== void 0 ? trialEnd : '{date}' }))
+        : formatMessage(messages.termsNoticeAnnual, termsNoticeValues);
+    const buildConsent = () => {
+        const consentParts = [termsText, recurringConfirmText];
+        if (showExtraConfirm) {
+            consentParts.push(formatMessage(extraConfirmMessage));
+        }
+        return {
+            tConsentRecurring: confirmed,
+            tConsentUkCa: showExtraConfirm ? extraConfirmed : 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) })] }), _jsxs("div", { className: `payment-form__card-panel${paymentMethod === 'card' ? '' : ' payment-form__card-panel--collapsed'}`, "aria-hidden": paymentMethod !== 'card', 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) => {
+                                                    const selectedCountry = e.target.value;
+                                                    setField('country', selectedCountry);
+                                                    setExtraConfirmed(false);
+                                                }, children: BILLING_COUNTRIES.map((country) => {
+                                                    return (_jsx("option", { value: country[0], children: country[1] }, country[0]));
+                                                }) })] })] })] }), _jsx("div", { className: `my-3 payment-form__method payment-form__method--hidden${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: `my-3 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: isMonthly
+                    ? formatMessage(messages.termsNotice, {
+                        trialDays,
+                        date: trialEnd !== null && trialEnd !== void 0 ? trialEnd : '{date}',
+                        pricing,
+                        termsLink: (_jsx("a", { className: "text-gray-700", href: tosUrl, children: formatMessage(messages.termsOfUse) })),
+                        refundLink: (_jsx("a", { className: "text-gray-700", href: refundPolicyUrl, children: formatMessage(messages.refundPolicy) })),
+                    })
+                    : formatMessage(messages.termsNoticeAnnual, {
+                        pricing,
+                        termsLink: (_jsx("a", { className: "text-gray-700", href: tosUrl, children: formatMessage(messages.termsOfUse) })),
+                        refundLink: (_jsx("a", { className: "text-gray-700", href: refundPolicyUrl, children: formatMessage(messages.refundPolicy) })),
+                    }) }), _jsx(Form.Group, { controlId: "recurringConfirm", className: "mb-3 payment-form__confirm", children: _jsx(Form.Checkbox, { id: "recurringConfirm", checked: confirmed, onChange: (e) => setConfirmed(e.target.checked), children: _jsx("span", { className: "text-gray-700 payment-form__confirm-label", children: recurringConfirmText }) }) }), showExtraConfirm && (_jsx(Form.Group, { controlId: extraConfirmId, className: "mb-4 payment-form__confirm", children: _jsx(Form.Checkbox, { id: extraConfirmId, checked: extraConfirmed, onChange: (e) => setExtraConfirmed(e.target.checked), children: _jsx("span", { className: "text-gray-700 payment-form__confirm-label", children: formatMessage(extraConfirmMessage) }) }) })), _jsxs(Button, { variant: "brand", className: "payment-form__submit", onClick: () => {
+                    if (paymentMethod !== 'googlepay') {
+                        onPlaceOrder(buildConsent(), paymentMethod);
+                    }
+                }, disabled: (needsStripe && !stripeReady)
+                    || submitting
+                    || !confirmed
+                    || paymentMethod === 'googlepay'
+                    || (showExtraConfirm && !extraConfirmed), 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, { useEffect, useState } from 'react';\nimport type { Ref } from 'react';\nimport { Button, Form, Spinner } from '@openedx/paragon';\nimport { useIntl, getAppConfig } from '@openedx/frontend-base';\nimport PaymentFields from '../PaymentFields/PaymentFields';\nimport type { BillingInfo, CheckoutConsent, PaymentMethod, SupportedPaymentMethod } from '../../types';\nimport type { PlanPrice } from '../../utils/billingDetails';\nimport {\n  appId,\n  COUNTRIES_REQUIRING_EXTRA_CONFIRM,\n  BILLING_COUNTRIES,\n} from '../../constants';\nimport { fetchIpGeolocation, fetchPublicIp } from '../../utils/provision';\nimport messages from './Messages';\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, paymentMethod: SupportedPaymentMethod) => void,\n  priceToShow: PlanPrice | null,\n  cycleToShow: string,\n  trialEnd?: string,\n  userCountry?: string | null,\n  /** Promotional monthly price e.g. \"39\" — monthly plans only. */\n  promoAmount?: string,\n  /** Length of the promotional period in months. */\n  promoMonths?: number,\n  /** Regular monthly price after the promo period e.g. \"59\". */\n  monthlyRegularAmount?: string,\n  geolocationUrl?: string,\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  promoAmount = '39',\n  promoMonths = 3,\n  monthlyRegularAmount = '59',\n  geolocationUrl,\n}: PaymentFormProps) => {\n  const { formatMessage } = useIntl();\n  const config = getAppConfig(appId);\n  const tosUrl = config.TOS_URL as string;\n  const refundPolicyUrl = config.REFUND_POLICY_URL as string;\n  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>('card');\n  const [confirmed, setConfirmed] = useState(false);\n  const [extraConfirmed, setExtraConfirmed] = useState(false);\n\n  const showExtraConfirm = COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(billing.country);\n  const extraConfirmMessage = billing.country === 'CA'\n    ? messages.canadaQuebecConfirm\n    : messages.ukWithdrawalConfirm;\n  const extraConfirmId = billing.country === 'CA'\n    ? 'canadaQuebecConfirm'\n    : 'ukWithdrawalConfirm';\n\n  useEffect(() => {\n    if (!geolocationUrl) return;\n\n    void fetchPublicIp()\n      .then((ipAddress) => fetchIpGeolocation(geolocationUrl, ipAddress))\n      .then((geolocation) => {\n        const countryCode = geolocation.country_code?.toUpperCase();\n        if (countryCode && BILLING_COUNTRIES.some(([code]) => code === countryCode)) {\n          setField('country', countryCode);\n        }\n      })\n      .catch(() => undefined);\n  }, [geolocationUrl, setField]);\n\n  const needsStripe = paymentMethod !== 'paypal';\n  const busy = submitting || (needsStripe && !stripeReady) || !sessionReady;\n\n  let buttonLabel = paymentMethod === 'paypal'\n    ? formatMessage(messages.continueWithPaypal)\n    : formatMessage(messages.confirmSubscription);\n  if (submitting) buttonLabel = formatMessage(messages.processing);\n  else if (!sessionReady || (needsStripe && !stripeReady)) buttonLabel = formatMessage(messages.loadingPayment);\n\n  const isMonthly = cycleToShow === 'monthly';\n  const frequency = cycleToShow === 'annual' ? 'year' : 'month';\n  const trialDays = 7;\n  const pricing = isMonthly\n    ? formatMessage(messages.termsPricingMonthly, {\n        promoAmount,\n        promoMonths,\n        regularAmount: monthlyRegularAmount,\n      })\n    : formatMessage(messages.termsPricingAnnual, {\n        amount: priceToShow?.amount ?? '',\n        frequency,\n      });\n  const recurringConfirmText = isMonthly\n    ? formatMessage(messages.recurringConfirmMonthly, {\n        promoAmount,\n        promoMonths,\n        regularAmount: monthlyRegularAmount,\n      })\n    : formatMessage(messages.recurringConfirmAnnual, {\n        amount: priceToShow?.amount ?? '',\n      });\n\n  const termsNoticeValues = {\n    pricing,\n    termsLink: formatMessage(messages.termsOfUse),\n    refundLink: formatMessage(messages.refundPolicy),\n  };\n\n  const termsText = isMonthly\n    ? formatMessage(messages.termsNotice, {\n        ...termsNoticeValues,\n        trialDays,\n        date: trialEnd ?? '{date}',\n      })\n    : formatMessage(messages.termsNoticeAnnual, termsNoticeValues);\n\n  const buildConsent = (): CheckoutConsent => {\n    const consentParts = [termsText, recurringConfirmText];\n    if (showExtraConfirm) {\n      consentParts.push(formatMessage(extraConfirmMessage));\n    }\n    return {\n      tConsentRecurring: confirmed,\n      tConsentUkCa: showExtraConfirm ? extraConfirmed : 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          {/* Keep Stripe host nodes mounted so Elements stay interactive after toggling methods. */}\n          <div\n            className={`payment-form__card-panel${paymentMethod === 'card' ? '' : ' payment-form__card-panel--collapsed'}`}\n            aria-hidden={paymentMethod !== 'card'}\n          >\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                  const selectedCountry = e.target.value;\n                  setField('country', selectedCountry);\n                  setExtraConfirmed(false);\n                }}\n              >\n                {BILLING_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        </div>\n\n        {/* ── Google Pay (hidden for now) ── */}\n        <div\n          className={`my-3 payment-form__method payment-form__method--hidden${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={`my-3 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        {isMonthly\n          ? formatMessage(messages.termsNotice, {\n              trialDays,\n              date: trialEnd ?? '{date}',\n              pricing,\n              termsLink: (\n                <a\n                  className=\"text-gray-700\"\n                  href={tosUrl}\n                >\n                  {formatMessage(messages.termsOfUse)}\n                </a>\n              ),\n              refundLink: (\n                <a\n                  className=\"text-gray-700\"\n                  href={refundPolicyUrl}\n                >\n                  {formatMessage(messages.refundPolicy)}\n                </a>\n              ),\n            })\n          : formatMessage(messages.termsNoticeAnnual, {\n              pricing,\n              termsLink: (\n                <a\n                  className=\"text-gray-700\"\n                  href={tosUrl}\n                >\n                  {formatMessage(messages.termsOfUse)}\n                </a>\n              ),\n              refundLink: (\n                <a\n                  className=\"text-gray-700\"\n                  href={refundPolicyUrl}\n                >\n                  {formatMessage(messages.refundPolicy)}\n                </a>\n              ),\n            })}\n      </p>\n\n      {/* ── Checkboxes ── */}\n      <Form.Group controlId=\"recurringConfirm\" className=\"mb-3 payment-form__confirm\">\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 payment-form__confirm-label\">\n            {recurringConfirmText}\n          </span>\n        </Form.Checkbox>\n      </Form.Group>\n\n      {showExtraConfirm && (\n        <Form.Group controlId={extraConfirmId} className=\"mb-4 payment-form__confirm\">\n          <Form.Checkbox\n            id={extraConfirmId}\n            checked={extraConfirmed}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n              setExtraConfirmed(e.target.checked)}\n          >\n            <span className=\"text-gray-700 payment-form__confirm-label\">\n              {formatMessage(extraConfirmMessage)}\n            </span>\n          </Form.Checkbox>\n        </Form.Group>\n      )}\n\n      {/* ── Submit ── */}\n      <Button\n        variant=\"brand\"\n        className=\"payment-form__submit\"\n        onClick={() => {\n          if (paymentMethod !== 'googlepay') {\n            onPlaceOrder(buildConsent(), paymentMethod);\n          }\n        }}\n        disabled={\n          (needsStripe && !stripeReady)\n          || submitting\n          || !confirmed\n          || paymentMethod === 'googlepay'\n          || (showExtraConfirm && !extraConfirmed)\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,108 @@
+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;
+    };
+    processingSpinner: {
+        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,114 @@
+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',
+    },
+    // ProcessingScreen
+    processingSpinner: {
+        id: 'checkout.processingScreen.spinner',
+        defaultMessage: 'Loading',
+        description: 'Screen reader text for the full-screen loader after Stripe return',
+    },
+    // 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,mBAAmB;IACnB,iBAAiB,EAAE;QACjB,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,mEAAmE;KACjF;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  // ProcessingScreen\n  processingSpinner: {\n    id: 'checkout.processingScreen.spinner',\n    defaultMessage: 'Loading',\n    description: 'Screen reader text for the full-screen loader after Stripe return',\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,24 @@
+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 declare const ProcessingScreen: () => 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,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Icon, Spinner } 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 }) }))] }));
+};
+// ---------------------------------------------------------------------------
+// ProcessingScreen — full-screen loader while confirming a 3DS return
+// ---------------------------------------------------------------------------
+export const ProcessingScreen = () => {
+    const { formatMessage } = useIntl();
+    return (_jsx("div", { className: "processing-screen", role: "status", "aria-live": "polite", children: _jsx(Spinner, { animation: "border", screenReaderText: formatMessage(messages.processingSpinner) }) }));
+};
+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, Spinner } 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// ProcessingScreen — full-screen loader while confirming a 3DS return\n// ---------------------------------------------------------------------------\n\nexport const ProcessingScreen = () => {\n  const { formatMessage } = useIntl();\n  return (\n    <div className=\"processing-screen\" role=\"status\" aria-live=\"polite\">\n      <Spinner\n        animation=\"border\"\n        screenReaderText={formatMessage(messages.processingSpinner)}\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.aca.checkout";
+export declare const acaCheckoutRole = "org.openedx.frontend.role.aca.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.
+ */
+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 selected billing countries show it.
+ */
+export declare const COUNTRIES_REQUIRING_EXTRA_CONFIRM: readonly string[];
+/** Billing country dropdown options for the supported countries in this checkout flow. */
+export declare const BILLING_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;
+            };
+        };
+    };
+};