@edx/frontend-app-subscription-manage 1.18.1 → 1.19.0

package/dist/components/OrderHistoryHeader/OrderHistoryHeader.js

@@ -3,7 +3,7 @@ import { useIntl } from '@openedx/frontend-base';
 import messages from '../messages';
 const OrderHistoryHeader = () => {
     const { formatMessage } = useIntl();
-    return (_jsxs("header", { className: "manage-header", children: [_jsx("h1", { className: "manage-header__title h1 font-weight-bold text-primary-500 mb-2", children: formatMessage(messages['manage.header.title']) }), _jsx("p", { className: "manage-header__subtitle text-gray-700 mb-0", children: formatMessage(messages['manage.header.subtitle']) })] }));
+    return (_jsxs("header", { className: "manage-header", children: [_jsx("h1", { className: "manage-header__title h1 font-weight-bold text-primary-500 mb-2", children: formatMessage(messages['order-history.header.title']) }), _jsx("p", { className: "manage-header__subtitle text-gray-700 mb-1", children: formatMessage(messages['order-history.header.subtitle']) })] }));
 };
 export default OrderHistoryHeader;
 //# sourceMappingURL=OrderHistoryHeader.js.map

package/dist/components/OrderHistoryHeader/OrderHistoryHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderHistoryHeader.js","sourceRoot":"","sources":["../../../src/components/OrderHistoryHeader/OrderHistoryHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,kBAAkB,GAAa,GAAG,EAAE;IACxC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,kBAAQ,SAAS,EAAC,eAAe,aAC/B,aAAI,SAAS,EAAC,gEAAgE,YAC3E,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC,GAC5C,EACL,YAAG,SAAS,EAAC,4CAA4C,YACtD,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC,GAChD,IACG,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport messages from '../messages';\n\nconst OrderHistoryHeader: React.FC = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <header className=\"manage-header\">\n      <h1 className=\"manage-header__title h1 font-weight-bold text-primary-500 mb-2\">\n        {formatMessage(messages['manage.header.title'])}\n      </h1>\n      <p className=\"manage-header__subtitle text-gray-700 mb-0\">\n        {formatMessage(messages['manage.header.subtitle'])}\n      </p>\n    </header>\n  );\n};\n\nexport default OrderHistoryHeader;\n"]}
+{"version":3,"file":"OrderHistoryHeader.js","sourceRoot":"","sources":["../../../src/components/OrderHistoryHeader/OrderHistoryHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,kBAAkB,GAAa,GAAG,EAAE;IACxC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,kBAAQ,SAAS,EAAC,eAAe,aAC/B,aAAI,SAAS,EAAC,gEAAgE,YAC3E,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC,GACnD,EACL,YAAG,SAAS,EAAC,4CAA4C,YACtD,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,CAAC,GACvD,IACG,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport messages from '../messages';\n\nconst OrderHistoryHeader: React.FC = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <header className=\"manage-header\">\n      <h1 className=\"manage-header__title h1 font-weight-bold text-primary-500 mb-2\">\n        {formatMessage(messages['order-history.header.title'])}\n      </h1>\n      <p className=\"manage-header__subtitle text-gray-700 mb-1\">\n        {formatMessage(messages['order-history.header.subtitle'])}\n      </p>\n    </header>\n  );\n};\n\nexport default OrderHistoryHeader;\n"]}

package/dist/components/PaymentHistory/PaymentHistory.js

@@ -8,18 +8,18 @@ const PaymentHistory = ({ subscriber, invoices, isLoading = false, isError = fal
     const { formatMessage } = useIntl();
     const nextPayment = formatDisplayDate(subscriber === null || subscriber === void 0 ? void 0 : subscriber.currentPeriodEnd);
     const hasSubscription = Boolean(subscriber === null || subscriber === void 0 ? void 0 : subscriber.subscriptionBiId);
-    return (_jsxs("section", { className: "manage-section manage-payment-history mt-4", children: [_jsx("h2", { className: "manage-section__title h3 font-weight-bold text-primary-500 mb-1", children: formatMessage(messages['manage.paymentHistory.heading']) }), nextPayment && (_jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['manage.paymentHistory.nextPayment'], {
+    return (_jsxs("section", { className: "manage-section manage-payment-history mt-4", children: [_jsx("h2", { className: "manage-section__title h3 font-weight-bold text-primary-500 mb-1", children: formatMessage(messages['order-history.paymentHistory.heading']) }), nextPayment && (_jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['order-history.paymentHistory.nextPayment'], {
                     date: nextPayment,
-                }) })), !hasSubscription && (_jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['manage.paymentHistory.noSubscription']) })), hasSubscription && isLoading && (_jsx("div", { className: "d-flex justify-content-center py-4", children: _jsx(Spinner, { animation: "border", screenReaderText: formatMessage(messages['manage.loading']) }) })), hasSubscription && isError && (_jsx(Alert, { variant: "danger", children: formatMessage(messages['manage.paymentHistory.error']) })), hasSubscription && !isLoading && !isError && invoices.length === 0 && (_jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['manage.paymentHistory.empty']) })), hasSubscription && !isLoading && !isError && invoices.length > 0 && (_jsx("ul", { className: "manage-payment-history__tiles list-unstyled mb-0", children: invoices.map((invoice) => {
+                }) })), !hasSubscription && (_jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['order-history.paymentHistory.noSubscription']) })), hasSubscription && isLoading && (_jsx("div", { className: "d-flex justify-content-center py-4", children: _jsx(Spinner, { animation: "border", screenReaderText: formatMessage(messages['order-history.loading']) }) })), hasSubscription && isError && (_jsx(Alert, { variant: "danger", children: formatMessage(messages['order-history.paymentHistory.error']) })), hasSubscription && !isLoading && !isError && invoices.length === 0 && (_jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['order-history.paymentHistory.empty']) })), hasSubscription && !isLoading && !isError && invoices.length > 0 && (_jsx("ul", { className: "manage-payment-history__tiles list-unstyled mb-0", children: invoices.map((invoice) => {
                     var _a;
                     const startOfService = (_a = formatNumericDate(invoice.periodStart)) !== null && _a !== void 0 ? _a : formatNumericDate(invoice.billDate);
                     const title = formatMessage(invoice.isTrial
-                        ? messages['manage.paymentHistory.desc.trial']
-                        : messages['manage.paymentHistory.tileTitle']);
+                        ? messages['order-history.paymentHistory.desc.trial']
+                        : messages['order-history.paymentHistory.tileTitle']);
                     const paymentMethodLabel = invoice.paymentProcessor
                         ? formatMessage(messages[`manage.paymentHistory.method.${invoice.paymentProcessor}`])
                         : null;
-                    return (_jsxs("li", { className: "manage-payment-history__tile bg-white border rounded", children: [_jsx("h3", { className: "manage-payment-history__tile-title h5 font-weight-bold text-primary-500 mb-3", children: title }), _jsxs("dl", { className: "manage-payment-history__meta mb-0", children: [_jsxs("div", { className: "manage-payment-history__meta-row", children: [_jsx("dt", { className: "manage-payment-history__label font-weight-bold text-gray-700 mb-0", children: formatMessage(messages['manage.paymentHistory.startOfService']) }), _jsx("dd", { className: "manage-payment-history__value text-gray-700 mb-0", children: startOfService !== null && startOfService !== void 0 ? startOfService : '—' })] }), _jsxs("div", { className: "manage-payment-history__meta-row", children: [_jsx("dt", { className: "manage-payment-history__label font-weight-bold text-gray-700 mb-0", children: formatMessage(messages['manage.paymentHistory.totalCost']) }), _jsx("dd", { className: "manage-payment-history__value text-gray-700 mb-0", children: formatMoney(invoice.amount, invoice.currency) })] }), _jsxs("div", { className: "manage-payment-history__meta-row", children: [_jsx("dt", { className: "manage-payment-history__label font-weight-bold text-gray-700 mb-0", children: formatMessage(messages['manage.paymentHistory.orderNumber']) }), _jsx("dd", { className: "manage-payment-history__value text-gray-700 mb-0", children: invoice.orderNumber || '—' })] }), paymentMethodLabel && (_jsxs("div", { className: "manage-payment-history__meta-row", children: [_jsx("dt", { className: "manage-payment-history__label font-weight-bold text-gray-700 mb-0", children: formatMessage(messages['manage.paymentHistory.paymentMethod']) }), _jsx("dd", { className: "manage-payment-history__value text-gray-700 mb-0", children: paymentMethodLabel })] }))] })] }, invoice.biId));
+                    return (_jsxs("li", { className: "manage-payment-history__tile bg-white border rounded", children: [_jsx("h3", { className: "manage-payment-history__tile-title h5 font-weight-bold text-primary-500 mb-3", children: title }), _jsxs("dl", { className: "manage-payment-history__meta mb-0", children: [_jsxs("div", { className: "manage-payment-history__meta-row", children: [_jsx("dt", { className: "manage-payment-history__label font-weight-bold text-gray-700 mb-0", children: formatMessage(messages['order-history.paymentHistory.startOfService']) }), _jsx("dd", { className: "manage-payment-history__value text-gray-700 mb-0", children: startOfService !== null && startOfService !== void 0 ? startOfService : '—' })] }), _jsxs("div", { className: "manage-payment-history__meta-row", children: [_jsx("dt", { className: "manage-payment-history__label font-weight-bold text-gray-700 mb-0", children: formatMessage(messages['order-history.paymentHistory.totalCost']) }), _jsx("dd", { className: "manage-payment-history__value text-gray-700 mb-0", children: formatMoney(invoice.amount, invoice.currency) })] }), _jsxs("div", { className: "manage-payment-history__meta-row", children: [_jsx("dt", { className: "manage-payment-history__label font-weight-bold text-gray-700 mb-0", children: formatMessage(messages['order-history.paymentHistory.orderNumber']) }), _jsx("dd", { className: "manage-payment-history__value text-gray-700 mb-0", children: invoice.orderNumber || '—' })] }), paymentMethodLabel && (_jsxs("div", { className: "manage-payment-history__meta-row", children: [_jsx("dt", { className: "manage-payment-history__label font-weight-bold text-gray-700 mb-0", children: formatMessage(messages['order-history.paymentHistory.paymentMethod']) }), _jsx("dd", { className: "manage-payment-history__value text-gray-700 mb-0", children: paymentMethodLabel })] }))] })] }, invoice.biId));
                 }) }))] }));
 };
 export default PaymentHistory;

package/dist/components/PaymentHistory/PaymentHistory.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentHistory.js","sourceRoot":"","sources":["../../../src/components/PaymentHistory/PaymentHistory.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Alert, Spinner } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport type { CurrentUserSubscriberResult, PaymentHistoryItem } from '../../types';\nimport { formatDisplayDate, formatNumericDate } from '../../utils/formatDate';\nimport { formatMoney } from '../../utils/invoiceAmount';\nimport messages from '../messages';\n\ninterface PaymentHistoryProps {\n  subscriber: CurrentUserSubscriberResult | null,\n  invoices: PaymentHistoryItem[],\n  isLoading?: boolean,\n  isError?: boolean,\n}\n\nconst PaymentHistory: React.FC<PaymentHistoryProps> = ({\n  subscriber,\n  invoices,\n  isLoading = false,\n  isError = false,\n}) => {\n  const { formatMessage } = useIntl();\n  const nextPayment = formatDisplayDate(subscriber?.currentPeriodEnd);\n  const hasSubscription = Boolean(subscriber?.subscriptionBiId);\n\n  return (\n    <section className=\"manage-section manage-payment-history mt-4\">\n      <h2 className=\"manage-section__title h3 font-weight-bold text-primary-500 mb-1\">\n        {formatMessage(messages['manage.paymentHistory.heading'])}\n      </h2>\n\n      {nextPayment && (\n        <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n          {formatMessage(messages['manage.paymentHistory.nextPayment'], {\n            date: nextPayment,\n          })}\n        </p>\n      )}\n\n      {!hasSubscription && (\n        <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n          {formatMessage(messages['manage.paymentHistory.noSubscription'])}\n        </p>\n      )}\n\n      {hasSubscription && isLoading && (\n        <div className=\"d-flex justify-content-center py-4\">\n          <Spinner\n            animation=\"border\"\n            screenReaderText={formatMessage(messages['manage.loading'])}\n          />\n        </div>\n      )}\n\n      {hasSubscription && isError && (\n        <Alert variant=\"danger\">\n          {formatMessage(messages['manage.paymentHistory.error'])}\n        </Alert>\n      )}\n\n      {hasSubscription && !isLoading && !isError && invoices.length === 0 && (\n        <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n          {formatMessage(messages['manage.paymentHistory.empty'])}\n        </p>\n      )}\n\n      {hasSubscription && !isLoading && !isError && invoices.length > 0 && (\n        <ul className=\"manage-payment-history__tiles list-unstyled mb-0\">\n          {invoices.map((invoice) => {\n            const startOfService = formatNumericDate(invoice.periodStart)\n              ?? formatNumericDate(invoice.billDate);\n            const title = formatMessage(\n              invoice.isTrial\n                ? messages['manage.paymentHistory.desc.trial']\n                : messages['manage.paymentHistory.tileTitle'],\n            );\n            const paymentMethodLabel = invoice.paymentProcessor\n              ? formatMessage(messages[`manage.paymentHistory.method.${invoice.paymentProcessor}`])\n              : null;\n\n            return (\n              <li\n                key={invoice.biId}\n                className=\"manage-payment-history__tile bg-white border rounded\"\n              >\n                <h3 className=\"manage-payment-history__tile-title h5 font-weight-bold text-primary-500 mb-3\">\n                  {title}\n                </h3>\n                <dl className=\"manage-payment-history__meta mb-0\">\n                  <div className=\"manage-payment-history__meta-row\">\n                    <dt className=\"manage-payment-history__label font-weight-bold text-gray-700 mb-0\">\n                      {formatMessage(messages['manage.paymentHistory.startOfService'])}\n                    </dt>\n                    <dd className=\"manage-payment-history__value text-gray-700 mb-0\">\n                      {startOfService ?? '—'}\n                    </dd>\n                  </div>\n                  <div className=\"manage-payment-history__meta-row\">\n                    <dt className=\"manage-payment-history__label font-weight-bold text-gray-700 mb-0\">\n                      {formatMessage(messages['manage.paymentHistory.totalCost'])}\n                    </dt>\n                    <dd className=\"manage-payment-history__value text-gray-700 mb-0\">\n                      {formatMoney(invoice.amount, invoice.currency)}\n                    </dd>\n                  </div>\n                  <div className=\"manage-payment-history__meta-row\">\n                    <dt className=\"manage-payment-history__label font-weight-bold text-gray-700 mb-0\">\n                      {formatMessage(messages['manage.paymentHistory.orderNumber'])}\n                    </dt>\n                    <dd className=\"manage-payment-history__value text-gray-700 mb-0\">\n                      {invoice.orderNumber || '—'}\n                    </dd>\n                  </div>\n                  {paymentMethodLabel && (\n                    <div className=\"manage-payment-history__meta-row\">\n                      <dt className=\"manage-payment-history__label font-weight-bold text-gray-700 mb-0\">\n                        {formatMessage(messages['manage.paymentHistory.paymentMethod'])}\n                      </dt>\n                      <dd className=\"manage-payment-history__value text-gray-700 mb-0\">\n                        {paymentMethodLabel}\n                      </dd>\n                    </div>\n                  )}\n                </dl>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </section>\n  );\n};\n\nexport default PaymentHistory;\n"]}
+{"version":3,"file":"PaymentHistory.js","sourceRoot":"","sources":["../../../src/components/PaymentHistory/PaymentHistory.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Alert, Spinner } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport type { CurrentUserSubscriberResult, PaymentHistoryItem } from '../../types';\nimport { formatDisplayDate, formatNumericDate } from '../../utils/formatDate';\nimport { formatMoney } from '../../utils/invoiceAmount';\nimport messages from '../messages';\n\ninterface PaymentHistoryProps {\n  subscriber: CurrentUserSubscriberResult | null,\n  invoices: PaymentHistoryItem[],\n  isLoading?: boolean,\n  isError?: boolean,\n}\n\nconst PaymentHistory: React.FC<PaymentHistoryProps> = ({\n  subscriber,\n  invoices,\n  isLoading = false,\n  isError = false,\n}) => {\n  const { formatMessage } = useIntl();\n  const nextPayment = formatDisplayDate(subscriber?.currentPeriodEnd);\n  const hasSubscription = Boolean(subscriber?.subscriptionBiId);\n\n  return (\n    <section className=\"manage-section manage-payment-history mt-4\">\n      <h2 className=\"manage-section__title h3 font-weight-bold text-primary-500 mb-1\">\n        {formatMessage(messages['order-history.paymentHistory.heading'])}\n      </h2>\n\n      {nextPayment && (\n        <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n          {formatMessage(messages['order-history.paymentHistory.nextPayment'], {\n            date: nextPayment,\n          })}\n        </p>\n      )}\n\n      {!hasSubscription && (\n        <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n          {formatMessage(messages['order-history.paymentHistory.noSubscription'])}\n        </p>\n      )}\n\n      {hasSubscription && isLoading && (\n        <div className=\"d-flex justify-content-center py-4\">\n          <Spinner\n            animation=\"border\"\n            screenReaderText={formatMessage(messages['order-history.loading'])}\n          />\n        </div>\n      )}\n\n      {hasSubscription && isError && (\n        <Alert variant=\"danger\">\n          {formatMessage(messages['order-history.paymentHistory.error'])}\n        </Alert>\n      )}\n\n      {hasSubscription && !isLoading && !isError && invoices.length === 0 && (\n        <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n          {formatMessage(messages['order-history.paymentHistory.empty'])}\n        </p>\n      )}\n\n      {hasSubscription && !isLoading && !isError && invoices.length > 0 && (\n        <ul className=\"manage-payment-history__tiles list-unstyled mb-0\">\n          {invoices.map((invoice) => {\n            const startOfService = formatNumericDate(invoice.periodStart)\n              ?? formatNumericDate(invoice.billDate);\n            const title = formatMessage(\n              invoice.isTrial\n                ? messages['order-history.paymentHistory.desc.trial']\n                : messages['order-history.paymentHistory.tileTitle'],\n            );\n            const paymentMethodLabel = invoice.paymentProcessor\n              ? formatMessage(messages[`manage.paymentHistory.method.${invoice.paymentProcessor}`])\n              : null;\n\n            return (\n              <li\n                key={invoice.biId}\n                className=\"manage-payment-history__tile bg-white border rounded\"\n              >\n                <h3 className=\"manage-payment-history__tile-title h5 font-weight-bold text-primary-500 mb-3\">\n                  {title}\n                </h3>\n                <dl className=\"manage-payment-history__meta mb-0\">\n                  <div className=\"manage-payment-history__meta-row\">\n                    <dt className=\"manage-payment-history__label font-weight-bold text-gray-700 mb-0\">\n                      {formatMessage(messages['order-history.paymentHistory.startOfService'])}\n                    </dt>\n                    <dd className=\"manage-payment-history__value text-gray-700 mb-0\">\n                      {startOfService ?? '—'}\n                    </dd>\n                  </div>\n                  <div className=\"manage-payment-history__meta-row\">\n                    <dt className=\"manage-payment-history__label font-weight-bold text-gray-700 mb-0\">\n                      {formatMessage(messages['order-history.paymentHistory.totalCost'])}\n                    </dt>\n                    <dd className=\"manage-payment-history__value text-gray-700 mb-0\">\n                      {formatMoney(invoice.amount, invoice.currency)}\n                    </dd>\n                  </div>\n                  <div className=\"manage-payment-history__meta-row\">\n                    <dt className=\"manage-payment-history__label font-weight-bold text-gray-700 mb-0\">\n                      {formatMessage(messages['order-history.paymentHistory.orderNumber'])}\n                    </dt>\n                    <dd className=\"manage-payment-history__value text-gray-700 mb-0\">\n                      {invoice.orderNumber || '—'}\n                    </dd>\n                  </div>\n                  {paymentMethodLabel && (\n                    <div className=\"manage-payment-history__meta-row\">\n                      <dt className=\"manage-payment-history__label font-weight-bold text-gray-700 mb-0\">\n                        {formatMessage(messages['order-history.paymentHistory.paymentMethod'])}\n                      </dt>\n                      <dd className=\"manage-payment-history__value text-gray-700 mb-0\">\n                        {paymentMethodLabel}\n                      </dd>\n                    </div>\n                  )}\n                </dl>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </section>\n  );\n};\n\nexport default PaymentHistory;\n"]}

package/dist/components/RefundNotice/RefundNotice.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const RefundNotice: React.FC;
+export default RefundNotice;

package/dist/components/RefundNotice/RefundNotice.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getAppConfig, useIntl } from '@openedx/frontend-base';
+import { appId, BILLING_SUPPORT_EMAIL } from '../../constants';
+import messages from './messages';
+const RefundNotice = () => {
+    const { formatMessage } = useIntl();
+    const config = getAppConfig(appId);
+    const refundPolicyUrl = config.REFUND_POLICY_URL;
+    return (_jsxs("section", { className: "refund-notice p-4 mb-1 mt-5", "aria-labelledby": "refund-notice-title", children: [_jsx("h3", { id: "refund-notice-title", className: "h3 font-weight-bold text-primary-700 mb-3 refundTitle", children: formatMessage(messages.title) }), _jsx("p", { className: "lead text-gray-700 mb-0 refundBody", children: formatMessage(messages.body, {
+                    emailLink: _jsx("a", { href: `mailto:${BILLING_SUPPORT_EMAIL}`, children: BILLING_SUPPORT_EMAIL }),
+                    refundPolicyLink: (_jsx("a", { href: refundPolicyUrl, target: "_blank", rel: "noopener noreferrer", children: formatMessage(messages.refundPolicyLink) })),
+                }) })] }));
+};
+export default RefundNotice;
+//# sourceMappingURL=RefundNotice.js.map

package/dist/components/RefundNotice/RefundNotice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefundNotice.js","sourceRoot":"","sources":["../../../src/components/RefundNotice/RefundNotice.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,YAAY,GAAa,GAAG,EAAE;IAClC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,eAAe,GAAG,MAAM,CAAC,iBAAuC,CAAC;IAEvE,OAAO,CACL,mBAAS,SAAS,EAAC,6BAA6B,qBAAiB,qBAAqB,aACpF,aAAI,EAAE,EAAC,qBAAqB,EAAC,SAAS,EAAC,uDAAuD,YAC3F,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC3B,EACL,YAAG,SAAS,EAAC,oCAAoC,YAC9C,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE;oBAC5B,SAAS,EAAE,YAAG,IAAI,EAAE,UAAU,qBAAqB,EAAE,YAAG,qBAAqB,GAAK;oBAClF,gBAAgB,EAAE,CAChB,YAAG,IAAI,EAAE,eAAe,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,YAChE,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,GACvC,CACL;iBACF,CAAC,GACA,IACI,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React from 'react';\nimport { getAppConfig, useIntl } from '@openedx/frontend-base';\nimport { appId, BILLING_SUPPORT_EMAIL } from '../../constants';\nimport messages from './messages';\n\nconst RefundNotice: React.FC = () => {\n  const { formatMessage } = useIntl();\n  const config = getAppConfig(appId);\n  const refundPolicyUrl = config.REFUND_POLICY_URL as string | undefined;\n\n  return (\n    <section className=\"refund-notice p-4 mb-1 mt-5\" aria-labelledby=\"refund-notice-title\">\n      <h3 id=\"refund-notice-title\" className=\"h3 font-weight-bold text-primary-700 mb-3 refundTitle\">\n        {formatMessage(messages.title)}\n      </h3>\n      <p className=\"lead text-gray-700 mb-0 refundBody\">\n        {formatMessage(messages.body, {\n          emailLink: <a href={`mailto:${BILLING_SUPPORT_EMAIL}`}>{BILLING_SUPPORT_EMAIL}</a>,\n          refundPolicyLink: (\n            <a href={refundPolicyUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n              {formatMessage(messages.refundPolicyLink)}\n            </a>\n          ),\n        })}\n      </p>\n    </section>\n  );\n};\n\nexport default RefundNotice;\n"]}

package/dist/components/RefundNotice/messages.d.ts

@@ -0,0 +1,18 @@
+declare const messages: {
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    body: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    refundPolicyLink: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/components/RefundNotice/messages.js

@@ -0,0 +1,20 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    title: {
+        id: 'orderHistory.refundNotice.title',
+        defaultMessage: 'Need a refund?',
+        description: 'Heading for the order history refund notice.',
+    },
+    body: {
+        id: 'orderHistory.refundNotice.body',
+        defaultMessage: 'For course or program refunds, contact {emailLink}. See our {refundPolicyLink} for details.',
+        description: 'Refund support instructions shown to learners with a purchase.',
+    },
+    refundPolicyLink: {
+        id: 'orderHistory.refundNotice.refundPolicyLink',
+        defaultMessage: 'Refund Policy',
+        description: 'Link text for the refund policy.',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/components/RefundNotice/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/components/RefundNotice/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,8CAA8C;KAC5D;IACD,IAAI,EAAE;QACJ,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,6FAA6F;QAC7G,WAAW,EAAE,gEAAgE;KAC9E;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,4CAA4C;QAChD,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,kCAAkC;KAChD;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  title: {\n    id: 'orderHistory.refundNotice.title',\n    defaultMessage: 'Need a refund?',\n    description: 'Heading for the order history refund notice.',\n  },\n  body: {\n    id: 'orderHistory.refundNotice.body',\n    defaultMessage: 'For course or program refunds, contact {emailLink}. See our {refundPolicyLink} for details.',\n    description: 'Refund support instructions shown to learners with a purchase.',\n  },\n  refundPolicyLink: {\n    id: 'orderHistory.refundNotice.refundPolicyLink',\n    defaultMessage: 'Refund Policy',\n    description: 'Link text for the refund policy.',\n  },\n});\n\nexport default messages;\n"]}

package/dist/components/RenewSubscriptionModal/RenewSubscriptionModal.js

@@ -23,8 +23,8 @@ const RenewSubscriptionModal = ({ isOpen, onClose, onConfirm, isConfirming = fal
     const displayPrice = price !== null && price !== void 0 ? price : '';
     const displayCurrency = currency !== null && currency !== void 0 ? currency : 'USD';
     const last4 = (_b = (_a = paymentMethodQuery.data) === null || _a === void 0 ? void 0 : _a.last4) !== null && _b !== void 0 ? _b : null;
-    const { paymentMethod } = getCommonTrackingProps();
-    const isPayPal = (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.toLowerCase()) === 'paypal';
+    const { payment_method } = getCommonTrackingProps();
+    const isPayPal = (payment_method === null || payment_method === void 0 ? void 0 : payment_method.toLowerCase()) === 'paypal';
     useEffect(() => {
         if (isOpen) {
             setConfirmed(false);
@@ -37,30 +37,30 @@ const RenewSubscriptionModal = ({ isOpen, onClose, onConfirm, isConfirming = fal
         && !isConfirming
         && Boolean(subscriptionBiId);
     const title = displayPrice
-        ? formatMessage(messages['manage.renewModal.title'], {
+        ? formatMessage(messages['order-history.renewModal.title'], {
             price: displayPrice,
             frequency,
         })
-        : formatMessage(messages['manage.renewModal.titleNoPrice']);
-    return (_jsxs(_Fragment, { children: [_jsxs(ModalDialog, { title: title, isOpen: isOpen && !isPaymentModalOpen, onClose: onClose, size: "lg", hasCloseButton: true, isOverflowVisible: false, isFullscreenOnMobile: true, className: "manage-renew-modal", children: [_jsx(ModalDialog.Header, { children: _jsx(ModalDialog.Title, { children: title }) }), _jsx(ModalDialog.Body, { children: _jsxs("div", { className: "manage-renew-modal__content", children: [_jsx("p", { className: "manage-renew-modal__intro text-primary-500 mb-4", children: formatMessage(messages['manage.renewModal.body'], {
+        : formatMessage(messages['order-history.renewModal.titleNoPrice']);
+    return (_jsxs(_Fragment, { children: [_jsxs(ModalDialog, { title: title, isOpen: isOpen && !isPaymentModalOpen, onClose: onClose, size: "lg", hasCloseButton: true, isOverflowVisible: false, isFullscreenOnMobile: true, className: "manage-renew-modal", children: [_jsx(ModalDialog.Header, { children: _jsx(ModalDialog.Title, { children: title }) }), _jsx(ModalDialog.Body, { children: _jsxs("div", { className: "manage-renew-modal__content", children: [_jsx("p", { className: "manage-renew-modal__intro text-primary-500 mb-4", children: formatMessage(messages['order-history.renewModal.body'], {
                                         date: renewalDate !== null && renewalDate !== void 0 ? renewalDate : '{date}',
                                         price: displayPrice,
                                         frequency,
                                         currency: displayCurrency,
-                                        termsLink: (_jsx("a", { href: "/terms", target: "_blank", rel: "noreferrer", children: formatMessage(messages['manage.renewModal.termsOfUse']) })),
-                                        refundLink: (_jsx("a", { href: "/refund-policy", target: "_blank", rel: "noreferrer", children: formatMessage(messages['manage.renewModal.refundPolicy']) })),
-                                    }) }), !isPayPal && (_jsxs("div", { className: "manage-renew-modal__payment mb-4", children: [_jsx("h3", { className: "manage-renew-modal__payment-heading font-weight-bold text-primary-500 mb-3", children: formatMessage(messages['manage.renewModal.paymentMethod']) }), paymentMethodQuery.isPending ? (_jsx("div", { className: "d-flex align-items-center py-2", children: _jsx(Spinner, { animation: "border", size: "sm", screenReaderText: formatMessage(messages['manage.loading']) }) })) : (_jsxs("label", { className: "manage-renew-modal__card-row d-flex align-items-center mb-3", htmlFor: "renew-payment-card", children: [_jsx("input", { id: "renew-payment-card", type: "radio", name: "renewPaymentMethod", checked: true, readOnly: true, className: "manage-renew-modal__radio m-0" }), CARD_ICON, _jsxs("span", { className: "manage-renew-modal__card-label font-weight-bold text-info-500", children: [formatMessage(messages['manage.renewModal.card']), last4 ? ` *${last4}` : ''] })] })), _jsx(Button, { className: "manage-btn manage-btn--outline-dark manage-renew-modal__update-payment d-inline-flex", variant: "outline-primary", onClick: () => setIsPaymentModalOpen(true), disabled: !subscriptionBiId, children: formatMessage(messages['manage.renewModal.updatePayment']) })] })), _jsx(Form.Group, { controlId: "renewRecurringConfirm", className: "mb-2", children: _jsx(Form.Checkbox, { id: "renewRecurringConfirm", checked: confirmed, onChange: (e) => {
+                                        termsLink: (_jsx("a", { href: "/terms", target: "_blank", rel: "noreferrer", children: formatMessage(messages['order-history.renewModal.termsOfUse']) })),
+                                        refundLink: (_jsx("a", { href: "/refund-policy", target: "_blank", rel: "noreferrer", children: formatMessage(messages['order-history.renewModal.refundPolicy']) })),
+                                    }) }), !isPayPal && (_jsxs("div", { className: "manage-renew-modal__payment mb-4", children: [_jsx("h3", { className: "manage-renew-modal__payment-heading font-weight-bold text-primary-500 mb-3", children: formatMessage(messages['order-history.renewModal.paymentMethod']) }), paymentMethodQuery.isPending ? (_jsx("div", { className: "d-flex align-items-center py-2", children: _jsx(Spinner, { animation: "border", size: "sm", screenReaderText: formatMessage(messages['order-history.loading']) }) })) : (_jsxs("label", { className: "manage-renew-modal__card-row d-flex align-items-center mb-3", htmlFor: "renew-payment-card", children: [_jsx("input", { id: "renew-payment-card", type: "radio", name: "renewPaymentMethod", checked: true, readOnly: true, className: "manage-renew-modal__radio m-0" }), CARD_ICON, _jsxs("span", { className: "manage-renew-modal__card-label font-weight-bold text-info-500", children: [formatMessage(messages['order-history.renewModal.card']), last4 ? ` *${last4}` : ''] })] })), _jsx(Button, { className: "manage-btn manage-btn--outline-dark manage-renew-modal__update-payment d-inline-flex", variant: "outline-primary", onClick: () => setIsPaymentModalOpen(true), disabled: !subscriptionBiId, children: formatMessage(messages['order-history.renewModal.updatePayment']) })] })), _jsx(Form.Group, { controlId: "renewRecurringConfirm", className: "mb-2", children: _jsx(Form.Checkbox, { id: "renewRecurringConfirm", checked: confirmed, onChange: (e) => {
                                             setConfirmed(e.target.checked);
-                                        }, children: _jsx("span", { className: "text-primary-500", children: formatMessage(messages['manage.renewModal.recurringConfirm'], {
+                                        }, children: _jsx("span", { className: "text-primary-500", children: formatMessage(messages['order-history.renewModal.recurringConfirm'], {
                                                 cycle: cycleLabel,
                                                 price: displayPrice,
                                                 frequency,
                                                 currency: displayCurrency,
                                             }) }) }) }), showExtraConfirm && (_jsx(Form.Group, { controlId: "renewUkCaConfirm", className: "mb-3", children: _jsx(Form.Checkbox, { id: "renewUkCaConfirm", checked: ukCaConfirmed, onChange: (e) => {
                                             setUkCaConfirmed(e.target.checked);
-                                        }, children: _jsx("span", { className: "text-primary-500", children: formatMessage(messages['manage.renewModal.ukCaConfirm']) }) }) })), confirmError && (_jsx(Alert, { variant: "danger", className: "mt-2", children: formatMessage(messages['manage.canceled.renewError']) })), _jsx(Button, { className: "manage-btn manage-btn--brand manage-renew-modal__confirm mt-3", onClick: onConfirm, disabled: !canConfirm, children: isConfirming
-                                        ? formatMessage(messages['manage.canceled.renewing'])
-                                        : formatMessage(messages['manage.renewModal.confirm']) })] }) })] }), !isPayPal && (_jsx(UpdatePaymentMethodModal, { isOpen: isPaymentModalOpen, onClose: () => setIsPaymentModalOpen(false), subscriptionBiId: subscriptionBiId, nextBillingDate: renewalDate }))] }));
+                                        }, children: _jsx("span", { className: "text-primary-500", children: formatMessage(messages['order-history.renewModal.ukCaConfirm']) }) }) })), confirmError && (_jsx(Alert, { variant: "danger", className: "mt-2", children: formatMessage(messages['order-history.canceled.renewError']) })), _jsx(Button, { className: "manage-btn manage-btn--brand manage-renew-modal__confirm mt-3", onClick: onConfirm, disabled: !canConfirm, children: isConfirming
+                                        ? formatMessage(messages['order-history.canceled.renewing'])
+                                        : formatMessage(messages['order-history.renewModal.confirm']) })] }) })] }), !isPayPal && (_jsx(UpdatePaymentMethodModal, { isOpen: isPaymentModalOpen, onClose: () => setIsPaymentModalOpen(false), subscriptionBiId: subscriptionBiId, nextBillingDate: renewalDate }))] }));
 };
 export default RenewSubscriptionModal;
 //# sourceMappingURL=RenewSubscriptionModal.js.map

package/dist/components/RenewSubscriptionModal/RenewSubscriptionModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenewSubscriptionModal.js","sourceRoot":"","sources":["../../../src/components/RenewSubscriptionModal/RenewSubscriptionModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Alert,\n  Button,\n  Form,\n  ModalDialog,\n  Spinner,\n} from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { COUNTRIES_REQUIRING_EXTRA_CONFIRM } from '../../constants';\nimport {\n  useSubscriptionPaymentMethodQuery,\n  useViaxClient,\n  useViaxSession,\n} from '../../data/hooks/useManageQueries';\nimport UpdatePaymentMethodModal from '../UpdatePaymentMethodModal/UpdatePaymentMethodModal';\nimport { getCommonTrackingProps } from '@src/tracking/trackingContext';\nimport messages from '../messages';\n\ninterface RenewSubscriptionModalProps {\n  isOpen: boolean,\n  onClose: () => void,\n  onConfirm: () => void,\n  isConfirming?: boolean,\n  confirmError?: boolean,\n  subscriptionBiId: string | null | undefined,\n  renewalDate: string | null,\n  price: string | null,\n  currency: string | null,\n  cycle?: 'monthly' | 'annual',\n  /** ISO 3166-1 alpha-2 — shows UK/CA consent when GB or CA. */\n  userCountry?: string | null,\n}\n\nconst CARD_ICON = (\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    aria-hidden=\"true\"\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);\n\nconst RenewSubscriptionModal: React.FC<RenewSubscriptionModalProps> = ({\n  isOpen,\n  onClose,\n  onConfirm,\n  isConfirming = false,\n  confirmError = false,\n  subscriptionBiId,\n  renewalDate,\n  price,\n  currency,\n  cycle = 'monthly',\n  userCountry = null,\n}) => {\n  const { formatMessage } = useIntl();\n  const client = useViaxClient();\n  const { sessionReady } = useViaxSession(client);\n  const paymentMethodQuery = useSubscriptionPaymentMethodQuery(\n    client,\n    sessionReady,\n    subscriptionBiId,\n    isOpen,\n  );\n\n  const [confirmed, setConfirmed] = useState(false);\n  const [ukCaConfirmed, setUkCaConfirmed] = useState(false);\n  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);\n\n  const showExtraConfirm = Boolean(\n    userCountry && COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(userCountry),\n  );\n  const frequency = cycle === 'annual' ? 'year' : 'month';\n  const cycleLabel = cycle === 'annual' ? 'annual' : 'monthly';\n  const displayPrice = price ?? '';\n  const displayCurrency = currency ?? 'USD';\n  const last4 = paymentMethodQuery.data?.last4 ?? null;\n  const { paymentMethod } = getCommonTrackingProps();\n  const isPayPal = paymentMethod?.toLowerCase() === 'paypal';\n\n  useEffect(() => {\n    if (isOpen) {\n      setConfirmed(false);\n      setUkCaConfirmed(false);\n      setIsPaymentModalOpen(false);\n    }\n  }, [isOpen]);\n\n  const canConfirm = confirmed\n    && (!showExtraConfirm || ukCaConfirmed)\n    && !isConfirming\n    && Boolean(subscriptionBiId);\n\n  const title = displayPrice\n    ? formatMessage(messages['manage.renewModal.title'], {\n        price: displayPrice,\n        frequency,\n      })\n    : formatMessage(messages['manage.renewModal.titleNoPrice']);\n\n  return (\n    <>\n      <ModalDialog\n        title={title}\n        isOpen={isOpen && !isPaymentModalOpen}\n        onClose={onClose}\n        size=\"lg\"\n        hasCloseButton\n        isOverflowVisible={false}\n        isFullscreenOnMobile\n        className=\"manage-renew-modal\"\n      >\n        <ModalDialog.Header>\n          <ModalDialog.Title>{title}</ModalDialog.Title>\n        </ModalDialog.Header>\n\n        <ModalDialog.Body>\n          <div className=\"manage-renew-modal__content\">\n            <p className=\"manage-renew-modal__intro text-primary-500 mb-4\">\n              {formatMessage(messages['manage.renewModal.body'], {\n                date: renewalDate ?? '{date}',\n                price: displayPrice,\n                frequency,\n                currency: displayCurrency,\n                termsLink: (\n                  <a href=\"/terms\" target=\"_blank\" rel=\"noreferrer\">\n                    {formatMessage(messages['manage.renewModal.termsOfUse'])}\n                  </a>\n                ),\n                refundLink: (\n                  <a href=\"/refund-policy\" target=\"_blank\" rel=\"noreferrer\">\n                    {formatMessage(messages['manage.renewModal.refundPolicy'])}\n                  </a>\n                ),\n              })}\n            </p>\n\n            {!isPayPal && (\n              <div className=\"manage-renew-modal__payment mb-4\">\n                <h3 className=\"manage-renew-modal__payment-heading font-weight-bold text-primary-500 mb-3\">\n                  {formatMessage(messages['manage.renewModal.paymentMethod'])}\n                </h3>\n\n                {paymentMethodQuery.isPending ? (\n                  <div className=\"d-flex align-items-center py-2\">\n                    <Spinner\n                      animation=\"border\"\n                      size=\"sm\"\n                      screenReaderText={formatMessage(messages['manage.loading'])}\n                    />\n                  </div>\n                ) : (\n                  <label className=\"manage-renew-modal__card-row d-flex align-items-center mb-3\" htmlFor=\"renew-payment-card\">\n                    <input\n                      id=\"renew-payment-card\"\n                      type=\"radio\"\n                      name=\"renewPaymentMethod\"\n                      checked\n                      readOnly\n                      className=\"manage-renew-modal__radio m-0\"\n                    />\n                    {CARD_ICON}\n                    <span className=\"manage-renew-modal__card-label font-weight-bold text-info-500\">\n                      {formatMessage(messages['manage.renewModal.card'])}\n                      {last4 ? ` *${last4}` : ''}\n                    </span>\n                  </label>\n                )}\n\n                <Button\n                  className=\"manage-btn manage-btn--outline-dark manage-renew-modal__update-payment d-inline-flex\"\n                  variant=\"outline-primary\"\n                  onClick={() => setIsPaymentModalOpen(true)}\n                  disabled={!subscriptionBiId}\n                >\n                  {formatMessage(messages['manage.renewModal.updatePayment'])}\n                </Button>\n              </div>\n            )}\n            <Form.Group controlId=\"renewRecurringConfirm\" className=\"mb-2\">\n              <Form.Checkbox\n                id=\"renewRecurringConfirm\"\n                checked={confirmed}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                  setConfirmed(e.target.checked);\n                }}\n              >\n                <span className=\"text-primary-500\">\n                  {formatMessage(messages['manage.renewModal.recurringConfirm'], {\n                    cycle: cycleLabel,\n                    price: displayPrice,\n                    frequency,\n                    currency: displayCurrency,\n                  })}\n                </span>\n              </Form.Checkbox>\n            </Form.Group>\n\n            {showExtraConfirm && (\n              <Form.Group controlId=\"renewUkCaConfirm\" className=\"mb-3\">\n                <Form.Checkbox\n                  id=\"renewUkCaConfirm\"\n                  checked={ukCaConfirmed}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                    setUkCaConfirmed(e.target.checked);\n                  }}\n                >\n                  <span className=\"text-primary-500\">\n                    {formatMessage(messages['manage.renewModal.ukCaConfirm'])}\n                  </span>\n                </Form.Checkbox>\n              </Form.Group>\n            )}\n\n            {confirmError && (\n              <Alert variant=\"danger\" className=\"mt-2\">\n                {formatMessage(messages['manage.canceled.renewError'])}\n              </Alert>\n            )}\n\n            <Button\n              className=\"manage-btn manage-btn--brand manage-renew-modal__confirm mt-3\"\n              onClick={onConfirm}\n              disabled={!canConfirm}\n            >\n              {isConfirming\n                ? formatMessage(messages['manage.canceled.renewing'])\n                : formatMessage(messages['manage.renewModal.confirm'])}\n            </Button>\n          </div>\n        </ModalDialog.Body>\n      </ModalDialog>\n\n      {!isPayPal && (\n        <UpdatePaymentMethodModal\n          isOpen={isPaymentModalOpen}\n          onClose={() => setIsPaymentModalOpen(false)}\n          subscriptionBiId={subscriptionBiId}\n          nextBillingDate={renewalDate}\n        />\n      )}\n    </>\n  );\n};\n\nexport default RenewSubscriptionModal;\n"]}
+{"version":3,"file":"RenewSubscriptionModal.js","sourceRoot":"","sources":["../../../src/components/RenewSubscriptionModal/RenewSubscriptionModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Alert,\n  Button,\n  Form,\n  ModalDialog,\n  Spinner,\n} from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { COUNTRIES_REQUIRING_EXTRA_CONFIRM } from '../../constants';\nimport {\n  useSubscriptionPaymentMethodQuery,\n  useViaxClient,\n  useViaxSession,\n} from '../../data/hooks/useManageQueries';\nimport UpdatePaymentMethodModal from '../UpdatePaymentMethodModal/UpdatePaymentMethodModal';\nimport { getCommonTrackingProps } from '@src/tracking/trackingContext';\nimport messages from '../messages';\n\ninterface RenewSubscriptionModalProps {\n  isOpen: boolean,\n  onClose: () => void,\n  onConfirm: () => void,\n  isConfirming?: boolean,\n  confirmError?: boolean,\n  subscriptionBiId: string | null | undefined,\n  renewalDate: string | null,\n  price: string | null,\n  currency: string | null,\n  cycle?: 'monthly' | 'annual',\n  /** ISO 3166-1 alpha-2 — shows UK/CA consent when GB or CA. */\n  userCountry?: string | null,\n}\n\nconst CARD_ICON = (\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    aria-hidden=\"true\"\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);\n\nconst RenewSubscriptionModal: React.FC<RenewSubscriptionModalProps> = ({\n  isOpen,\n  onClose,\n  onConfirm,\n  isConfirming = false,\n  confirmError = false,\n  subscriptionBiId,\n  renewalDate,\n  price,\n  currency,\n  cycle = 'monthly',\n  userCountry = null,\n}) => {\n  const { formatMessage } = useIntl();\n  const client = useViaxClient();\n  const { sessionReady } = useViaxSession(client);\n  const paymentMethodQuery = useSubscriptionPaymentMethodQuery(\n    client,\n    sessionReady,\n    subscriptionBiId,\n    isOpen,\n  );\n\n  const [confirmed, setConfirmed] = useState(false);\n  const [ukCaConfirmed, setUkCaConfirmed] = useState(false);\n  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);\n\n  const showExtraConfirm = Boolean(\n    userCountry && COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(userCountry),\n  );\n  const frequency = cycle === 'annual' ? 'year' : 'month';\n  const cycleLabel = cycle === 'annual' ? 'annual' : 'monthly';\n  const displayPrice = price ?? '';\n  const displayCurrency = currency ?? 'USD';\n  const last4 = paymentMethodQuery.data?.last4 ?? null;\n  const { payment_method } = getCommonTrackingProps();\n  const isPayPal = payment_method?.toLowerCase() === 'paypal';\n\n  useEffect(() => {\n    if (isOpen) {\n      setConfirmed(false);\n      setUkCaConfirmed(false);\n      setIsPaymentModalOpen(false);\n    }\n  }, [isOpen]);\n\n  const canConfirm = confirmed\n    && (!showExtraConfirm || ukCaConfirmed)\n    && !isConfirming\n    && Boolean(subscriptionBiId);\n\n  const title = displayPrice\n    ? formatMessage(messages['order-history.renewModal.title'], {\n        price: displayPrice,\n        frequency,\n      })\n    : formatMessage(messages['order-history.renewModal.titleNoPrice']);\n\n  return (\n    <>\n      <ModalDialog\n        title={title}\n        isOpen={isOpen && !isPaymentModalOpen}\n        onClose={onClose}\n        size=\"lg\"\n        hasCloseButton\n        isOverflowVisible={false}\n        isFullscreenOnMobile\n        className=\"manage-renew-modal\"\n      >\n        <ModalDialog.Header>\n          <ModalDialog.Title>{title}</ModalDialog.Title>\n        </ModalDialog.Header>\n\n        <ModalDialog.Body>\n          <div className=\"manage-renew-modal__content\">\n            <p className=\"manage-renew-modal__intro text-primary-500 mb-4\">\n              {formatMessage(messages['order-history.renewModal.body'], {\n                date: renewalDate ?? '{date}',\n                price: displayPrice,\n                frequency,\n                currency: displayCurrency,\n                termsLink: (\n                  <a href=\"/terms\" target=\"_blank\" rel=\"noreferrer\">\n                    {formatMessage(messages['order-history.renewModal.termsOfUse'])}\n                  </a>\n                ),\n                refundLink: (\n                  <a href=\"/refund-policy\" target=\"_blank\" rel=\"noreferrer\">\n                    {formatMessage(messages['order-history.renewModal.refundPolicy'])}\n                  </a>\n                ),\n              })}\n            </p>\n\n            {!isPayPal && (\n              <div className=\"manage-renew-modal__payment mb-4\">\n                <h3 className=\"manage-renew-modal__payment-heading font-weight-bold text-primary-500 mb-3\">\n                  {formatMessage(messages['order-history.renewModal.paymentMethod'])}\n                </h3>\n\n                {paymentMethodQuery.isPending ? (\n                  <div className=\"d-flex align-items-center py-2\">\n                    <Spinner\n                      animation=\"border\"\n                      size=\"sm\"\n                      screenReaderText={formatMessage(messages['order-history.loading'])}\n                    />\n                  </div>\n                ) : (\n                  <label className=\"manage-renew-modal__card-row d-flex align-items-center mb-3\" htmlFor=\"renew-payment-card\">\n                    <input\n                      id=\"renew-payment-card\"\n                      type=\"radio\"\n                      name=\"renewPaymentMethod\"\n                      checked\n                      readOnly\n                      className=\"manage-renew-modal__radio m-0\"\n                    />\n                    {CARD_ICON}\n                    <span className=\"manage-renew-modal__card-label font-weight-bold text-info-500\">\n                      {formatMessage(messages['order-history.renewModal.card'])}\n                      {last4 ? ` *${last4}` : ''}\n                    </span>\n                  </label>\n                )}\n\n                <Button\n                  className=\"manage-btn manage-btn--outline-dark manage-renew-modal__update-payment d-inline-flex\"\n                  variant=\"outline-primary\"\n                  onClick={() => setIsPaymentModalOpen(true)}\n                  disabled={!subscriptionBiId}\n                >\n                  {formatMessage(messages['order-history.renewModal.updatePayment'])}\n                </Button>\n              </div>\n            )}\n            <Form.Group controlId=\"renewRecurringConfirm\" className=\"mb-2\">\n              <Form.Checkbox\n                id=\"renewRecurringConfirm\"\n                checked={confirmed}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                  setConfirmed(e.target.checked);\n                }}\n              >\n                <span className=\"text-primary-500\">\n                  {formatMessage(messages['order-history.renewModal.recurringConfirm'], {\n                    cycle: cycleLabel,\n                    price: displayPrice,\n                    frequency,\n                    currency: displayCurrency,\n                  })}\n                </span>\n              </Form.Checkbox>\n            </Form.Group>\n\n            {showExtraConfirm && (\n              <Form.Group controlId=\"renewUkCaConfirm\" className=\"mb-3\">\n                <Form.Checkbox\n                  id=\"renewUkCaConfirm\"\n                  checked={ukCaConfirmed}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                    setUkCaConfirmed(e.target.checked);\n                  }}\n                >\n                  <span className=\"text-primary-500\">\n                    {formatMessage(messages['order-history.renewModal.ukCaConfirm'])}\n                  </span>\n                </Form.Checkbox>\n              </Form.Group>\n            )}\n\n            {confirmError && (\n              <Alert variant=\"danger\" className=\"mt-2\">\n                {formatMessage(messages['order-history.canceled.renewError'])}\n              </Alert>\n            )}\n\n            <Button\n              className=\"manage-btn manage-btn--brand manage-renew-modal__confirm mt-3\"\n              onClick={onConfirm}\n              disabled={!canConfirm}\n            >\n              {isConfirming\n                ? formatMessage(messages['order-history.canceled.renewing'])\n                : formatMessage(messages['order-history.renewModal.confirm'])}\n            </Button>\n          </div>\n        </ModalDialog.Body>\n      </ModalDialog>\n\n      {!isPayPal && (\n        <UpdatePaymentMethodModal\n          isOpen={isPaymentModalOpen}\n          onClose={() => setIsPaymentModalOpen(false)}\n          subscriptionBiId={subscriptionBiId}\n          nextBillingDate={renewalDate}\n        />\n      )}\n    </>\n  );\n};\n\nexport default RenewSubscriptionModal;\n"]}

package/dist/components/ResubscribeCard/ResubscribeCard.js

@@ -12,14 +12,14 @@ const ResubscribeCard = ({ subscriber, price = null, currency = null, }) => {
     const displayPrice = (subscriber === null || subscriber === void 0 ? void 0 : subscriber.amount) || price || null;
     const displayCurrency = (subscriber === null || subscriber === void 0 ? void 0 : subscriber.currency) || currency || null;
     const hasPrice = Boolean(displayPrice);
-    return (_jsxs("section", { className: "manage-section mt-4", children: [_jsx("h2", { className: "manage-section__title h3 font-weight-bold text-primary-500 mb-1", children: formatMessage(messages['manage.expired.heading']) }), _jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['manage.expired.subheading']) }), _jsxs("div", { className: "manage-card d-flex flex-column flex-md-row align-items-md-center justify-content-md-between bg-white border p-4 rounded", children: [_jsxs("div", { className: "manage-card__content", children: [_jsx("h3", { className: "manage-card__title font-weight-bold text-primary-500 mb-1", children: hasPrice
-                                    ? formatMessage(messages['manage.expired.resubscribeTitle'], {
+    return (_jsxs("section", { className: "manage-section mt-4", children: [_jsx("h2", { className: "manage-section__title h3 font-weight-bold text-primary-500 mb-1", children: formatMessage(messages['order-history.expired.heading']) }), _jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['order-history.expired.subheading']) }), _jsxs("div", { className: "manage-card d-flex flex-column flex-md-row align-items-md-center justify-content-md-between bg-white border p-4 rounded", children: [_jsxs("div", { className: "manage-card__content", children: [_jsx("h3", { className: "manage-card__title font-weight-bold text-primary-500 mb-1", children: hasPrice
+                                    ? formatMessage(messages['order-history.expired.resubscribeTitle'], {
                                         price: displayPrice,
                                         currency: displayCurrency !== null && displayCurrency !== void 0 ? displayCurrency : '',
                                     })
-                                    : formatMessage(messages['manage.expired.resubscribeTitleNoPrice']) }), _jsx("p", { className: "manage-card__body text-gray-700 mb-0", children: canceledOn
-                                    ? formatMessage(messages['manage.expired.canceledOn'], { date: canceledOn })
-                                    : formatMessage(messages['manage.expired.canceledOnNoDate']) })] }), _jsx("div", { className: "manage-card__actions d-flex flex-wrap align-items-center flex-shrink-0", children: _jsx(Button, { className: "manage-btn manage-btn--brand", href: checkoutUrl, children: formatMessage(messages['manage.canceled.renew']) }) })] })] }));
+                                    : formatMessage(messages['order-history.expired.resubscribeTitleNoPrice']) }), _jsx("p", { className: "manage-card__body text-gray-700 mb-0", children: canceledOn
+                                    ? formatMessage(messages['order-history.expired.canceledOn'], { date: canceledOn })
+                                    : formatMessage(messages['order-history.expired.canceledOnNoDate']) })] }), _jsx("div", { className: "manage-card__actions d-flex flex-wrap align-items-center flex-shrink-0", children: _jsx(Button, { className: "manage-btn manage-btn--brand", href: checkoutUrl, children: formatMessage(messages['order-history.canceled.renew']) }) })] })] }));
 };
 export default ResubscribeCard;
 //# sourceMappingURL=ResubscribeCard.js.map

package/dist/components/ResubscribeCard/ResubscribeCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResubscribeCard.js","sourceRoot":"","sources":["../../../src/components/ResubscribeCard/ResubscribeCard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAQnC,MAAM,eAAe,GAAmC,CAAC,EACvD,UAAU,EACV,KAAK,GAAG,IAAI,EACZ,QAAQ,GAAG,IAAI,GAChB,EAAE,EAAE;;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,UAAU,GAAG,iBAAiB,CAClC,MAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,mBAAmB,mCAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,gBAAgB,CAC1F,CAAC;IACF,MAAM,YAAY,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,KAAI,KAAK,IAAI,IAAI,CAAC;IACzD,MAAM,eAAe,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,KAAI,QAAQ,IAAI,IAAI,CAAC;IACjE,MAAM,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IAEvC,OAAO,CACL,mBAAS,SAAS,EAAC,qBAAqB,aACtC,aAAI,SAAS,EAAC,iEAAiE,YAC5E,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC,GAC/C,EACL,YAAG,SAAS,EAAC,6CAA6C,YACvD,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,GACnD,EAEJ,eAAK,SAAS,EAAC,yHAAyH,aACtI,eAAK,SAAS,EAAC,sBAAsB,aACnC,aAAI,SAAS,EAAC,2DAA2D,YACtE,QAAQ;oCACP,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,iCAAiC,CAAC,EAAE;wCACzD,KAAK,EAAE,YAAY;wCACnB,QAAQ,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE;qCAChC,CAAC;oCACJ,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,wCAAwC,CAAC,CAAC,GAClE,EACL,YAAG,SAAS,EAAC,sCAAsC,YAChD,UAAU;oCACT,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;oCAC5E,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,iCAAiC,CAAC,CAAC,GAC5D,IACA,EACN,cAAK,SAAS,EAAC,wEAAwE,YACrF,KAAC,MAAM,IAAC,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAE,WAAW,YAC/D,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAAC,GAC1C,GACL,IACF,IACE,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React from 'react';\nimport { Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport type { CurrentUserSubscriberResult } from '../../types';\nimport { formatDisplayDate } from '../../utils/formatDate';\nimport { getCheckoutUrl } from '../../utils/urls';\nimport messages from '../messages';\n\ninterface ResubscribeCardProps {\n  subscriber: CurrentUserSubscriberResult | null,\n  price?: string | null,\n  currency?: string | null,\n}\n\nconst ResubscribeCard: React.FC<ResubscribeCardProps> = ({\n  subscriber,\n  price = null,\n  currency = null,\n}) => {\n  const { formatMessage } = useIntl();\n  const checkoutUrl = getCheckoutUrl();\n  const canceledOn = formatDisplayDate(\n    subscriber?.canceledAt ?? subscriber?.subscriptionEndDate ?? subscriber?.currentPeriodEnd,\n  );\n  const displayPrice = subscriber?.amount || price || null;\n  const displayCurrency = subscriber?.currency || currency || null;\n  const hasPrice = Boolean(displayPrice);\n\n  return (\n    <section className=\"manage-section mt-4\">\n      <h2 className=\"manage-section__title h3 font-weight-bold text-primary-500 mb-1\">\n        {formatMessage(messages['manage.expired.heading'])}\n      </h2>\n      <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n        {formatMessage(messages['manage.expired.subheading'])}\n      </p>\n\n      <div className=\"manage-card d-flex flex-column flex-md-row align-items-md-center justify-content-md-between bg-white border p-4 rounded\">\n        <div className=\"manage-card__content\">\n          <h3 className=\"manage-card__title font-weight-bold text-primary-500 mb-1\">\n            {hasPrice\n              ? formatMessage(messages['manage.expired.resubscribeTitle'], {\n                  price: displayPrice,\n                  currency: displayCurrency ?? '',\n                })\n              : formatMessage(messages['manage.expired.resubscribeTitleNoPrice'])}\n          </h3>\n          <p className=\"manage-card__body text-gray-700 mb-0\">\n            {canceledOn\n              ? formatMessage(messages['manage.expired.canceledOn'], { date: canceledOn })\n              : formatMessage(messages['manage.expired.canceledOnNoDate'])}\n          </p>\n        </div>\n        <div className=\"manage-card__actions d-flex flex-wrap align-items-center flex-shrink-0\">\n          <Button className=\"manage-btn manage-btn--brand\" href={checkoutUrl}>\n            {formatMessage(messages['manage.canceled.renew'])}\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default ResubscribeCard;\n"]}
+{"version":3,"file":"ResubscribeCard.js","sourceRoot":"","sources":["../../../src/components/ResubscribeCard/ResubscribeCard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAQnC,MAAM,eAAe,GAAmC,CAAC,EACvD,UAAU,EACV,KAAK,GAAG,IAAI,EACZ,QAAQ,GAAG,IAAI,GAChB,EAAE,EAAE;;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,UAAU,GAAG,iBAAiB,CAClC,MAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,mBAAmB,mCAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,gBAAgB,CAC1F,CAAC;IACF,MAAM,YAAY,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,KAAI,KAAK,IAAI,IAAI,CAAC;IACzD,MAAM,eAAe,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,KAAI,QAAQ,IAAI,IAAI,CAAC;IACjE,MAAM,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IAEvC,OAAO,CACL,mBAAS,SAAS,EAAC,qBAAqB,aACtC,aAAI,SAAS,EAAC,iEAAiE,YAC5E,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,CAAC,GACtD,EACL,YAAG,SAAS,EAAC,6CAA6C,YACvD,aAAa,CAAC,QAAQ,CAAC,kCAAkC,CAAC,CAAC,GAC1D,EAEJ,eAAK,SAAS,EAAC,yHAAyH,aACtI,eAAK,SAAS,EAAC,sBAAsB,aACnC,aAAI,SAAS,EAAC,2DAA2D,YACtE,QAAQ;oCACP,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,wCAAwC,CAAC,EAAE;wCAChE,KAAK,EAAE,YAAY;wCACnB,QAAQ,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE;qCAChC,CAAC;oCACJ,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,+CAA+C,CAAC,CAAC,GACzE,EACL,YAAG,SAAS,EAAC,sCAAsC,YAChD,UAAU;oCACT,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,kCAAkC,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;oCACnF,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,wCAAwC,CAAC,CAAC,GACnE,IACA,EACN,cAAK,SAAS,EAAC,wEAAwE,YACrF,KAAC,MAAM,IAAC,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAE,WAAW,YAC/D,aAAa,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CAAC,GACjD,GACL,IACF,IACE,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React from 'react';\nimport { Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport type { CurrentUserSubscriberResult } from '../../types';\nimport { formatDisplayDate } from '../../utils/formatDate';\nimport { getCheckoutUrl } from '../../utils/urls';\nimport messages from '../messages';\n\ninterface ResubscribeCardProps {\n  subscriber: CurrentUserSubscriberResult | null,\n  price?: string | null,\n  currency?: string | null,\n}\n\nconst ResubscribeCard: React.FC<ResubscribeCardProps> = ({\n  subscriber,\n  price = null,\n  currency = null,\n}) => {\n  const { formatMessage } = useIntl();\n  const checkoutUrl = getCheckoutUrl();\n  const canceledOn = formatDisplayDate(\n    subscriber?.canceledAt ?? subscriber?.subscriptionEndDate ?? subscriber?.currentPeriodEnd,\n  );\n  const displayPrice = subscriber?.amount || price || null;\n  const displayCurrency = subscriber?.currency || currency || null;\n  const hasPrice = Boolean(displayPrice);\n\n  return (\n    <section className=\"manage-section mt-4\">\n      <h2 className=\"manage-section__title h3 font-weight-bold text-primary-500 mb-1\">\n        {formatMessage(messages['order-history.expired.heading'])}\n      </h2>\n      <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n        {formatMessage(messages['order-history.expired.subheading'])}\n      </p>\n\n      <div className=\"manage-card d-flex flex-column flex-md-row align-items-md-center justify-content-md-between bg-white border p-4 rounded\">\n        <div className=\"manage-card__content\">\n          <h3 className=\"manage-card__title font-weight-bold text-primary-500 mb-1\">\n            {hasPrice\n              ? formatMessage(messages['order-history.expired.resubscribeTitle'], {\n                  price: displayPrice,\n                  currency: displayCurrency ?? '',\n                })\n              : formatMessage(messages['order-history.expired.resubscribeTitleNoPrice'])}\n          </h3>\n          <p className=\"manage-card__body text-gray-700 mb-0\">\n            {canceledOn\n              ? formatMessage(messages['order-history.expired.canceledOn'], { date: canceledOn })\n              : formatMessage(messages['order-history.expired.canceledOnNoDate'])}\n          </p>\n        </div>\n        <div className=\"manage-card__actions d-flex flex-wrap align-items-center flex-shrink-0\">\n          <Button className=\"manage-btn manage-btn--brand\" href={checkoutUrl}>\n            {formatMessage(messages['order-history.canceled.renew'])}\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default ResubscribeCard;\n"]}

package/dist/components/UpdatePaymentMethodModal/UpdatePaymentMethodModal.js

@@ -56,7 +56,7 @@ const PaymentForm = ({ subscriptionBiId, onClose, onSuccess, }) => {
         }
         const trimmedPostal = postalCode.trim();
         if (!trimmedPostal) {
-            setCardError(formatMessage(messages['manage.updatePayment.postalRequired']));
+            setCardError(formatMessage(messages['order-history.updatePayment.postalRequired']));
             return;
         }
         setIsSubmitting(true);
@@ -71,7 +71,7 @@ const PaymentForm = ({ subscriptionBiId, onClose, onSuccess, }) => {
                 },
             });
             if (error || !(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
-                setCardError((error === null || error === void 0 ? void 0 : error.message) || formatMessage(messages['manage.updatePayment.error']));
+                setCardError((error === null || error === void 0 ? void 0 : error.message) || formatMessage(messages['order-history.updatePayment.error']));
                 return;
             }
             const mutationArgs = {
@@ -84,25 +84,25 @@ const PaymentForm = ({ subscriptionBiId, onClose, onSuccess, }) => {
         }
         catch (err) {
             if (err instanceof PaymentMethodValidationError) {
-                setCardError(formatMessage(messages['manage.updatePayment.invalidCard']));
+                setCardError(formatMessage(messages['order-history.updatePayment.invalidCard']));
                 return;
             }
             const message = err instanceof Error && err.message
                 ? err.message
-                : formatMessage(messages['manage.updatePayment.error']);
+                : formatMessage(messages['order-history.updatePayment.error']);
             setCardError(message);
         }
         finally {
             setIsSubmitting(false);
         }
     });
-    return (_jsxs("form", { className: "manage-update-payment", onSubmit: handleSubmit, children: [_jsx("p", { className: "manage-update-payment__intro text-primary-500 mb-4", children: formatMessage(messages['manage.updatePayment.intro']) }), cardError && (_jsx(Alert, { variant: "danger", className: "mb-4", children: cardError })), _jsx("h3", { className: "manage-update-payment__section font-weight-bold text-primary-500 mb-3", children: formatMessage(messages['manage.updatePayment.sectionTitle']) }), _jsxs("div", { className: "manage-update-payment__row manage-update-payment__row--card mb-0", children: [_jsxs(Form.Group, { className: "manage-update-payment__field manage-update-payment__field--card-number mb-3", children: [_jsx(Form.Label, { className: "manage-update-payment__label d-block text-primary-500 mb-1", children: formatMessage(messages['manage.updatePayment.cardNumber']) }), _jsx("div", { className: "manage-update-payment__element bg-white d-flex align-items-center", children: _jsx(CardNumberElement, { options: {
+    return (_jsxs("form", { className: "manage-update-payment", onSubmit: handleSubmit, children: [_jsx("p", { className: "manage-update-payment__intro text-primary-500 mb-4", children: formatMessage(messages['order-history.updatePayment.intro']) }), cardError && (_jsx(Alert, { variant: "danger", className: "mb-4", children: cardError })), _jsx("h3", { className: "manage-update-payment__section font-weight-bold text-primary-500 mb-3", children: formatMessage(messages['order-history.updatePayment.sectionTitle']) }), _jsxs("div", { className: "manage-update-payment__row manage-update-payment__row--card mb-0", children: [_jsxs(Form.Group, { className: "manage-update-payment__field manage-update-payment__field--card-number mb-3", children: [_jsx(Form.Label, { className: "manage-update-payment__label d-block text-primary-500 mb-1", children: formatMessage(messages['order-history.updatePayment.cardNumber']) }), _jsx("div", { className: "manage-update-payment__element bg-white d-flex align-items-center", children: _jsx(CardNumberElement, { options: {
                                         style: ELEMENT_STYLE,
                                         showIcon: true,
                                         placeholder: '1234 1234 1234 1234',
-                                    } }) })] }), _jsxs(Form.Group, { className: "manage-update-payment__field manage-update-payment__field--cvc mb-3", children: [_jsx(Form.Label, { className: "manage-update-payment__label d-block text-primary-500 mb-1", children: formatMessage(messages['manage.updatePayment.cvc']) }), _jsxs("div", { className: "manage-update-payment__element manage-update-payment__element--cvc bg-white d-flex align-items-center", children: [_jsx(CardCvcElement, { options: { style: ELEMENT_STYLE, placeholder: 'CVC' } }), _jsx(Icon, { src: CreditCard, className: "manage-update-payment__cvc-icon", "aria-hidden": true })] })] }), _jsxs(Form.Group, { className: "manage-update-payment__field manage-update-payment__field--expiry mb-3", children: [_jsx(Form.Label, { className: "manage-update-payment__label d-block text-primary-500 mb-1", children: formatMessage(messages['manage.updatePayment.expiry']) }), _jsx("div", { className: "manage-update-payment__element bg-white d-flex align-items-center", children: _jsx(CardExpiryElement, { options: { style: ELEMENT_STYLE, placeholder: 'MM / YY' } }) })] })] }), _jsx("div", { className: "manage-update-payment__row manage-update-payment__row--postal mb-0", children: _jsxs(Form.Group, { className: "manage-update-payment__field manage-update-payment__field--postal mb-3", children: [_jsx(Form.Label, { className: "manage-update-payment__label d-block text-primary-500 mb-1", children: formatMessage(messages['manage.updatePayment.postal']) }), _jsx("div", { className: "manage-update-payment__element bg-white d-flex align-items-center", children: _jsx("input", { className: "manage-update-payment__control w-100 m-0 p-0 bg-transparent border-0", type: "text", name: "postal-code", value: postalCode, onChange: (e) => setPostalCode(e.target.value), autoComplete: "postal-code", required: true }) })] }) }), _jsxs(ActionRow, { className: "manage-update-payment__actions mt-4 w-100 justify-content-end flex-wrap flex-column-reverse flex-sm-row align-items-stretch align-items-sm-center", children: [_jsx(Button, { type: "button", variant: "tertiary", className: "w-100 w-sm-auto", onClick: onClose, disabled: isSubmitting, children: formatMessage(messages['manage.updatePayment.close']) }), _jsx(Button, { type: "submit", variant: "primary", className: "manage-btn manage-btn--dark w-100 w-sm-auto", disabled: !stripe || isSubmitting, children: isSubmitting
-                            ? formatMessage(messages['manage.updatePayment.submitting'])
-                            : formatMessage(messages['manage.updatePayment.submit']) })] })] }));
+                                    } }) })] }), _jsxs(Form.Group, { className: "manage-update-payment__field manage-update-payment__field--cvc mb-3", children: [_jsx(Form.Label, { className: "manage-update-payment__label d-block text-primary-500 mb-1", children: formatMessage(messages['order-history.updatePayment.cvc']) }), _jsxs("div", { className: "manage-update-payment__element manage-update-payment__element--cvc bg-white d-flex align-items-center", children: [_jsx(CardCvcElement, { options: { style: ELEMENT_STYLE, placeholder: 'CVC' } }), _jsx(Icon, { src: CreditCard, className: "manage-update-payment__cvc-icon", "aria-hidden": true })] })] }), _jsxs(Form.Group, { className: "manage-update-payment__field manage-update-payment__field--expiry mb-3", children: [_jsx(Form.Label, { className: "manage-update-payment__label d-block text-primary-500 mb-1", children: formatMessage(messages['order-history.updatePayment.expiry']) }), _jsx("div", { className: "manage-update-payment__element bg-white d-flex align-items-center", children: _jsx(CardExpiryElement, { options: { style: ELEMENT_STYLE, placeholder: 'MM / YY' } }) })] })] }), _jsx("div", { className: "manage-update-payment__row manage-update-payment__row--postal mb-0", children: _jsxs(Form.Group, { className: "manage-update-payment__field manage-update-payment__field--postal mb-3", children: [_jsx(Form.Label, { className: "manage-update-payment__label d-block text-primary-500 mb-1", children: formatMessage(messages['order-history.updatePayment.postal']) }), _jsx("div", { className: "manage-update-payment__element bg-white d-flex align-items-center", children: _jsx("input", { className: "manage-update-payment__control w-100 m-0 p-0 bg-transparent border-0", type: "text", name: "postal-code", value: postalCode, onChange: (e) => setPostalCode(e.target.value), autoComplete: "postal-code", required: true }) })] }) }), _jsxs(ActionRow, { className: "manage-update-payment__actions mt-4 w-100 justify-content-end flex-wrap flex-column-reverse flex-sm-row align-items-stretch align-items-sm-center", children: [_jsx(Button, { type: "button", variant: "tertiary", className: "w-100 w-sm-auto", onClick: onClose, disabled: isSubmitting, children: formatMessage(messages['order-history.updatePayment.close']) }), _jsx(Button, { type: "submit", variant: "primary", className: "manage-btn manage-btn--dark w-100 w-sm-auto", disabled: !stripe || isSubmitting, children: isSubmitting
+                            ? formatMessage(messages['order-history.updatePayment.submitting'])
+                            : formatMessage(messages['order-history.updatePayment.submit']) })] })] }));
 };
 const UpdatePaymentMethodModal = ({ isOpen, onClose, subscriptionBiId, nextBillingDate, }) => {
     const { formatMessage } = useIntl();
@@ -127,17 +127,17 @@ const UpdatePaymentMethodModal = ({ isOpen, onClose, subscriptionBiId, nextBilli
         onClose();
     }, [onClose]);
     const title = step === 'success'
-        ? formatMessage(messages['manage.updatePayment.successTitle'])
-        : formatMessage(messages['manage.updatePayment.title']);
+        ? formatMessage(messages['order-history.updatePayment.successTitle'])
+        : formatMessage(messages['order-history.updatePayment.title']);
     const canShowForm = Boolean(publishableKey && subscriptionBiId && stripePromise);
     const elementsOptions = useMemo(() => ({
         fonts: [{ cssSrc: 'https://fonts.googleapis.com/css?family=Open+Sans' }],
     }), []);
     return (_jsxs(ModalDialog, { title: title, isOpen: isOpen, onClose: handleClose, size: "lg", hasCloseButton: true, isOverflowVisible: false, isFullscreenOnMobile: true, className: "manage-update-payment-modal", children: [_jsx(ModalDialog.Header, { children: _jsx(ModalDialog.Title, { children: title }) }), _jsx(ModalDialog.Body, { children: step === 'success' ? (_jsxs("div", { className: "manage-update-payment manage-update-payment--success", children: [_jsx("p", { className: "manage-update-payment__intro text-primary-500 mb-0", children: nextBillingDate
-                                ? formatMessage(messages['manage.updatePayment.successBody'], {
+                                ? formatMessage(messages['order-history.updatePayment.successBody'], {
                                     date: nextBillingDate,
                                 })
-                                : formatMessage(messages['manage.updatePayment.successBodyNoDate']) }), _jsx(ActionRow, { className: "manage-update-payment__actions mt-4 w-100 justify-content-end flex-wrap", children: _jsx(Button, { variant: "primary", className: "manage-btn manage-btn--dark", onClick: handleClose, children: formatMessage(messages['manage.updatePayment.close']) }) })] })) : !canShowForm ? (_jsx(Alert, { variant: "warning", children: formatMessage(messages['manage.updatePayment.stripeMissing']) })) : (_jsx(Elements, { stripe: stripePromise, options: elementsOptions, children: _jsx(PaymentForm, { subscriptionBiId: subscriptionBiId, onClose: handleClose, onSuccess: () => setStep('success') }) })) })] }));
+                                : formatMessage(messages['order-history.updatePayment.successBodyNoDate']) }), _jsx(ActionRow, { className: "manage-update-payment__actions mt-4 w-100 justify-content-end flex-wrap", children: _jsx(Button, { variant: "primary", className: "manage-btn manage-btn--dark", onClick: handleClose, children: formatMessage(messages['order-history.updatePayment.close']) }) })] })) : !canShowForm ? (_jsx(Alert, { variant: "warning", children: formatMessage(messages['order-history.updatePayment.stripeMissing']) })) : (_jsx(Elements, { stripe: stripePromise, options: elementsOptions, children: _jsx(PaymentForm, { subscriptionBiId: subscriptionBiId, onClose: handleClose, onSuccess: () => setStep('success') }) })) })] }));
 };
 export default UpdatePaymentMethodModal;
 //# sourceMappingURL=UpdatePaymentMethodModal.js.map

package/dist/components/UpdatePaymentMethodModal/UpdatePaymentMethodModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"UpdatePaymentMethodModal.js","sourceRoot":"","sources":["../../../src/components/UpdatePaymentMethodModal/UpdatePaymentMethodModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  Alert,\n  Form,\n  ModalDialog,\n  Button,\n  ActionRow,\n  Icon,\n} from '@openedx/paragon';\nimport { getAppConfig, useIntl } from '@openedx/frontend-base';\nimport { CreditCard } from '@openedx/paragon/icons';\nimport {\n  Elements,\n  CardNumberElement,\n  CardCvcElement,\n  CardExpiryElement,\n  useElements,\n  useStripe,\n} from '@stripe/react-stripe-js';\nimport { loadStripe, type Stripe } from '@stripe/stripe-js';\n\nimport { appId } from '../../constants';\nimport { PaymentMethodValidationError } from '../../data/services/subscription/validateCartPaymentMethod';\nimport {\n  useUpdatePaymentMethodMutation,\n  useValidateCartPaymentMethodMutation,\n  useViaxClient,\n} from '../../data/hooks/useManageQueries';\nimport messages from '../messages';\n\nconst ELEMENT_STYLE = {\n  base: {\n    color: '#00262b',\n    fontSize: '16px',\n    lineHeight: '24px',\n    fontFamily: '\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif',\n    fontSmoothing: 'antialiased',\n    '::placeholder': {\n      color: '#707070',\n    },\n  },\n  invalid: {\n    color: '#b91c1c',\n    iconColor: '#b91c1c',\n  },\n};\n\ninterface UpdatePaymentMethodModalProps {\n  isOpen: boolean,\n  onClose: () => void,\n  subscriptionBiId: string | null | undefined,\n  nextBillingDate: string | null,\n}\n\ninterface PaymentFormProps {\n  subscriptionBiId: string,\n  onClose: () => void,\n  onSuccess: () => void,\n}\n\nconst PaymentForm: React.FC<PaymentFormProps> = ({\n  subscriptionBiId,\n  onClose,\n  onSuccess,\n}) => {\n  const { formatMessage } = useIntl();\n  const stripe = useStripe();\n  const elements = useElements();\n  const client = useViaxClient();\n  const validateMutation = useValidateCartPaymentMethodMutation(client);\n  const updateMutation = useUpdatePaymentMethodMutation(client);\n\n  const [postalCode, setPostalCode] = useState('');\n  const [cardError, setCardError] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const handleSubmit = async (event: React.FormEvent) => {\n    event.preventDefault();\n    setCardError(null);\n\n    if (!stripe || !elements) {\n      return;\n    }\n\n    const cardNumber = elements.getElement(CardNumberElement);\n    if (!cardNumber) {\n      return;\n    }\n\n    const trimmedPostal = postalCode.trim();\n    if (!trimmedPostal) {\n      setCardError(formatMessage(messages['manage.updatePayment.postalRequired']));\n      return;\n    }\n\n    setIsSubmitting(true);\n    try {\n      const { error, paymentMethod } = await stripe.createPaymentMethod({\n        type: 'card',\n        card: cardNumber,\n        billing_details: {\n          address: {\n            postal_code: trimmedPostal,\n          },\n        },\n      });\n\n      if (error || !paymentMethod?.id) {\n        setCardError(error?.message || formatMessage(messages['manage.updatePayment.error']));\n        return;\n      }\n\n      const mutationArgs = {\n        biId: subscriptionBiId,\n        tStripePaymentMethodId: paymentMethod.id,\n      };\n\n      await validateMutation.mutateAsync(mutationArgs);\n      await updateMutation.mutateAsync(mutationArgs);\n      onSuccess();\n    } catch (err) {\n      if (err instanceof PaymentMethodValidationError) {\n        setCardError(formatMessage(messages['manage.updatePayment.invalidCard']));\n        return;\n      }\n      const message = err instanceof Error && err.message\n        ? err.message\n        : formatMessage(messages['manage.updatePayment.error']);\n      setCardError(message);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <form className=\"manage-update-payment\" onSubmit={handleSubmit}>\n      <p className=\"manage-update-payment__intro text-primary-500 mb-4\">\n        {formatMessage(messages['manage.updatePayment.intro'])}\n      </p>\n\n      {cardError && (\n        <Alert variant=\"danger\" className=\"mb-4\">\n          {cardError}\n        </Alert>\n      )}\n\n      <h3 className=\"manage-update-payment__section font-weight-bold text-primary-500 mb-3\">\n        {formatMessage(messages['manage.updatePayment.sectionTitle'])}\n      </h3>\n\n      <div className=\"manage-update-payment__row manage-update-payment__row--card mb-0\">\n        <Form.Group className=\"manage-update-payment__field manage-update-payment__field--card-number mb-3\">\n          <Form.Label className=\"manage-update-payment__label d-block text-primary-500 mb-1\">\n            {formatMessage(messages['manage.updatePayment.cardNumber'])}\n          </Form.Label>\n          <div className=\"manage-update-payment__element bg-white d-flex align-items-center\">\n            <CardNumberElement\n              options={{\n                style: ELEMENT_STYLE,\n                showIcon: true,\n                placeholder: '1234 1234 1234 1234',\n              }}\n            />\n          </div>\n        </Form.Group>\n\n        <Form.Group className=\"manage-update-payment__field manage-update-payment__field--cvc mb-3\">\n          <Form.Label className=\"manage-update-payment__label d-block text-primary-500 mb-1\">\n            {formatMessage(messages['manage.updatePayment.cvc'])}\n          </Form.Label>\n          <div className=\"manage-update-payment__element manage-update-payment__element--cvc bg-white d-flex align-items-center\">\n            <CardCvcElement options={{ style: ELEMENT_STYLE, placeholder: 'CVC' }} />\n            <Icon\n              src={CreditCard}\n              className=\"manage-update-payment__cvc-icon\"\n              aria-hidden\n            />\n          </div>\n        </Form.Group>\n\n        <Form.Group className=\"manage-update-payment__field manage-update-payment__field--expiry mb-3\">\n          <Form.Label className=\"manage-update-payment__label d-block text-primary-500 mb-1\">\n            {formatMessage(messages['manage.updatePayment.expiry'])}\n          </Form.Label>\n          <div className=\"manage-update-payment__element bg-white d-flex align-items-center\">\n            <CardExpiryElement options={{ style: ELEMENT_STYLE, placeholder: 'MM / YY' }} />\n          </div>\n        </Form.Group>\n      </div>\n\n      <div className=\"manage-update-payment__row manage-update-payment__row--postal mb-0\">\n        <Form.Group className=\"manage-update-payment__field manage-update-payment__field--postal mb-3\">\n          <Form.Label className=\"manage-update-payment__label d-block text-primary-500 mb-1\">\n            {formatMessage(messages['manage.updatePayment.postal'])}\n          </Form.Label>\n          <div className=\"manage-update-payment__element bg-white d-flex align-items-center\">\n            <input\n              className=\"manage-update-payment__control w-100 m-0 p-0 bg-transparent border-0\"\n              type=\"text\"\n              name=\"postal-code\"\n              value={postalCode}\n              onChange={(e) => setPostalCode(e.target.value)}\n              autoComplete=\"postal-code\"\n              required\n            />\n          </div>\n        </Form.Group>\n      </div>\n\n      <ActionRow className=\"manage-update-payment__actions mt-4 w-100 justify-content-end flex-wrap flex-column-reverse flex-sm-row align-items-stretch align-items-sm-center\">\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          className=\"w-100 w-sm-auto\"\n          onClick={onClose}\n          disabled={isSubmitting}\n        >\n          {formatMessage(messages['manage.updatePayment.close'])}\n        </Button>\n        <Button\n          type=\"submit\"\n          variant=\"primary\"\n          className=\"manage-btn manage-btn--dark w-100 w-sm-auto\"\n          disabled={!stripe || isSubmitting}\n        >\n          {isSubmitting\n            ? formatMessage(messages['manage.updatePayment.submitting'])\n            : formatMessage(messages['manage.updatePayment.submit'])}\n        </Button>\n      </ActionRow>\n    </form>\n  );\n};\n\nconst UpdatePaymentMethodModal: React.FC<UpdatePaymentMethodModalProps> = ({\n  isOpen,\n  onClose,\n  subscriptionBiId,\n  nextBillingDate,\n}) => {\n  const { formatMessage } = useIntl();\n  const config = getAppConfig(appId);\n  const publishableKey = (config.STRIPE_PUBLIC_KEY as string | undefined) || '';\n  const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | null>(null);\n  const [step, setStep] = useState<'form' | 'success'>('form');\n\n  useEffect(() => {\n    if (!publishableKey) {\n      setStripePromise(null);\n      return;\n    }\n    setStripePromise(loadStripe(publishableKey));\n  }, [publishableKey]);\n\n  useEffect(() => {\n    if (isOpen) {\n      setStep('form');\n    }\n  }, [isOpen]);\n\n  const handleClose = useCallback(() => {\n    setStep('form');\n    onClose();\n  }, [onClose]);\n\n  const title = step === 'success'\n    ? formatMessage(messages['manage.updatePayment.successTitle'])\n    : formatMessage(messages['manage.updatePayment.title']);\n\n  const canShowForm = Boolean(publishableKey && subscriptionBiId && stripePromise);\n\n  const elementsOptions = useMemo(() => ({\n    fonts: [{ cssSrc: 'https://fonts.googleapis.com/css?family=Open+Sans' }],\n  }), []);\n\n  return (\n    <ModalDialog\n      title={title}\n      isOpen={isOpen}\n      onClose={handleClose}\n      size=\"lg\"\n      hasCloseButton\n      isOverflowVisible={false}\n      isFullscreenOnMobile\n      className=\"manage-update-payment-modal\"\n    >\n      <ModalDialog.Header>\n        <ModalDialog.Title>{title}</ModalDialog.Title>\n      </ModalDialog.Header>\n\n      <ModalDialog.Body>\n        {step === 'success' ? (\n          <div className=\"manage-update-payment manage-update-payment--success\">\n            <p className=\"manage-update-payment__intro text-primary-500 mb-0\">\n              {nextBillingDate\n                ? formatMessage(messages['manage.updatePayment.successBody'], {\n                    date: nextBillingDate,\n                  })\n                : formatMessage(messages['manage.updatePayment.successBodyNoDate'])}\n            </p>\n            <ActionRow className=\"manage-update-payment__actions mt-4 w-100 justify-content-end flex-wrap\">\n              <Button\n                variant=\"primary\"\n                className=\"manage-btn manage-btn--dark\"\n                onClick={handleClose}\n              >\n                {formatMessage(messages['manage.updatePayment.close'])}\n              </Button>\n            </ActionRow>\n          </div>\n        ) : !canShowForm ? (\n          <Alert variant=\"warning\">\n            {formatMessage(messages['manage.updatePayment.stripeMissing'])}\n          </Alert>\n        ) : (\n          <Elements stripe={stripePromise} options={elementsOptions}>\n            <PaymentForm\n              subscriptionBiId={subscriptionBiId!}\n              onClose={handleClose}\n              onSuccess={() => setStep('success')}\n            />\n          </Elements>\n        )}\n      </ModalDialog.Body>\n    </ModalDialog>\n  );\n};\n\nexport default UpdatePaymentMethodModal;\n"]}
+{"version":3,"file":"UpdatePaymentMethodModal.js","sourceRoot":"","sources":["../../../src/components/UpdatePaymentMethodModal/UpdatePaymentMethodModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  Alert,\n  Form,\n  ModalDialog,\n  Button,\n  ActionRow,\n  Icon,\n} from '@openedx/paragon';\nimport { getAppConfig, useIntl } from '@openedx/frontend-base';\nimport { CreditCard } from '@openedx/paragon/icons';\nimport {\n  Elements,\n  CardNumberElement,\n  CardCvcElement,\n  CardExpiryElement,\n  useElements,\n  useStripe,\n} from '@stripe/react-stripe-js';\nimport { loadStripe, type Stripe } from '@stripe/stripe-js';\n\nimport { appId } from '../../constants';\nimport { PaymentMethodValidationError } from '../../data/services/subscription/validateCartPaymentMethod';\nimport {\n  useUpdatePaymentMethodMutation,\n  useValidateCartPaymentMethodMutation,\n  useViaxClient,\n} from '../../data/hooks/useManageQueries';\nimport messages from '../messages';\n\nconst ELEMENT_STYLE = {\n  base: {\n    color: '#00262b',\n    fontSize: '16px',\n    lineHeight: '24px',\n    fontFamily: '\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif',\n    fontSmoothing: 'antialiased',\n    '::placeholder': {\n      color: '#707070',\n    },\n  },\n  invalid: {\n    color: '#b91c1c',\n    iconColor: '#b91c1c',\n  },\n};\n\ninterface UpdatePaymentMethodModalProps {\n  isOpen: boolean,\n  onClose: () => void,\n  subscriptionBiId: string | null | undefined,\n  nextBillingDate: string | null,\n}\n\ninterface PaymentFormProps {\n  subscriptionBiId: string,\n  onClose: () => void,\n  onSuccess: () => void,\n}\n\nconst PaymentForm: React.FC<PaymentFormProps> = ({\n  subscriptionBiId,\n  onClose,\n  onSuccess,\n}) => {\n  const { formatMessage } = useIntl();\n  const stripe = useStripe();\n  const elements = useElements();\n  const client = useViaxClient();\n  const validateMutation = useValidateCartPaymentMethodMutation(client);\n  const updateMutation = useUpdatePaymentMethodMutation(client);\n\n  const [postalCode, setPostalCode] = useState('');\n  const [cardError, setCardError] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const handleSubmit = async (event: React.FormEvent) => {\n    event.preventDefault();\n    setCardError(null);\n\n    if (!stripe || !elements) {\n      return;\n    }\n\n    const cardNumber = elements.getElement(CardNumberElement);\n    if (!cardNumber) {\n      return;\n    }\n\n    const trimmedPostal = postalCode.trim();\n    if (!trimmedPostal) {\n      setCardError(formatMessage(messages['order-history.updatePayment.postalRequired']));\n      return;\n    }\n\n    setIsSubmitting(true);\n    try {\n      const { error, paymentMethod } = await stripe.createPaymentMethod({\n        type: 'card',\n        card: cardNumber,\n        billing_details: {\n          address: {\n            postal_code: trimmedPostal,\n          },\n        },\n      });\n\n      if (error || !paymentMethod?.id) {\n        setCardError(error?.message || formatMessage(messages['order-history.updatePayment.error']));\n        return;\n      }\n\n      const mutationArgs = {\n        biId: subscriptionBiId,\n        tStripePaymentMethodId: paymentMethod.id,\n      };\n\n      await validateMutation.mutateAsync(mutationArgs);\n      await updateMutation.mutateAsync(mutationArgs);\n      onSuccess();\n    } catch (err) {\n      if (err instanceof PaymentMethodValidationError) {\n        setCardError(formatMessage(messages['order-history.updatePayment.invalidCard']));\n        return;\n      }\n      const message = err instanceof Error && err.message\n        ? err.message\n        : formatMessage(messages['order-history.updatePayment.error']);\n      setCardError(message);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <form className=\"manage-update-payment\" onSubmit={handleSubmit}>\n      <p className=\"manage-update-payment__intro text-primary-500 mb-4\">\n        {formatMessage(messages['order-history.updatePayment.intro'])}\n      </p>\n\n      {cardError && (\n        <Alert variant=\"danger\" className=\"mb-4\">\n          {cardError}\n        </Alert>\n      )}\n\n      <h3 className=\"manage-update-payment__section font-weight-bold text-primary-500 mb-3\">\n        {formatMessage(messages['order-history.updatePayment.sectionTitle'])}\n      </h3>\n\n      <div className=\"manage-update-payment__row manage-update-payment__row--card mb-0\">\n        <Form.Group className=\"manage-update-payment__field manage-update-payment__field--card-number mb-3\">\n          <Form.Label className=\"manage-update-payment__label d-block text-primary-500 mb-1\">\n            {formatMessage(messages['order-history.updatePayment.cardNumber'])}\n          </Form.Label>\n          <div className=\"manage-update-payment__element bg-white d-flex align-items-center\">\n            <CardNumberElement\n              options={{\n                style: ELEMENT_STYLE,\n                showIcon: true,\n                placeholder: '1234 1234 1234 1234',\n              }}\n            />\n          </div>\n        </Form.Group>\n\n        <Form.Group className=\"manage-update-payment__field manage-update-payment__field--cvc mb-3\">\n          <Form.Label className=\"manage-update-payment__label d-block text-primary-500 mb-1\">\n            {formatMessage(messages['order-history.updatePayment.cvc'])}\n          </Form.Label>\n          <div className=\"manage-update-payment__element manage-update-payment__element--cvc bg-white d-flex align-items-center\">\n            <CardCvcElement options={{ style: ELEMENT_STYLE, placeholder: 'CVC' }} />\n            <Icon\n              src={CreditCard}\n              className=\"manage-update-payment__cvc-icon\"\n              aria-hidden\n            />\n          </div>\n        </Form.Group>\n\n        <Form.Group className=\"manage-update-payment__field manage-update-payment__field--expiry mb-3\">\n          <Form.Label className=\"manage-update-payment__label d-block text-primary-500 mb-1\">\n            {formatMessage(messages['order-history.updatePayment.expiry'])}\n          </Form.Label>\n          <div className=\"manage-update-payment__element bg-white d-flex align-items-center\">\n            <CardExpiryElement options={{ style: ELEMENT_STYLE, placeholder: 'MM / YY' }} />\n          </div>\n        </Form.Group>\n      </div>\n\n      <div className=\"manage-update-payment__row manage-update-payment__row--postal mb-0\">\n        <Form.Group className=\"manage-update-payment__field manage-update-payment__field--postal mb-3\">\n          <Form.Label className=\"manage-update-payment__label d-block text-primary-500 mb-1\">\n            {formatMessage(messages['order-history.updatePayment.postal'])}\n          </Form.Label>\n          <div className=\"manage-update-payment__element bg-white d-flex align-items-center\">\n            <input\n              className=\"manage-update-payment__control w-100 m-0 p-0 bg-transparent border-0\"\n              type=\"text\"\n              name=\"postal-code\"\n              value={postalCode}\n              onChange={(e) => setPostalCode(e.target.value)}\n              autoComplete=\"postal-code\"\n              required\n            />\n          </div>\n        </Form.Group>\n      </div>\n\n      <ActionRow className=\"manage-update-payment__actions mt-4 w-100 justify-content-end flex-wrap flex-column-reverse flex-sm-row align-items-stretch align-items-sm-center\">\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          className=\"w-100 w-sm-auto\"\n          onClick={onClose}\n          disabled={isSubmitting}\n        >\n          {formatMessage(messages['order-history.updatePayment.close'])}\n        </Button>\n        <Button\n          type=\"submit\"\n          variant=\"primary\"\n          className=\"manage-btn manage-btn--dark w-100 w-sm-auto\"\n          disabled={!stripe || isSubmitting}\n        >\n          {isSubmitting\n            ? formatMessage(messages['order-history.updatePayment.submitting'])\n            : formatMessage(messages['order-history.updatePayment.submit'])}\n        </Button>\n      </ActionRow>\n    </form>\n  );\n};\n\nconst UpdatePaymentMethodModal: React.FC<UpdatePaymentMethodModalProps> = ({\n  isOpen,\n  onClose,\n  subscriptionBiId,\n  nextBillingDate,\n}) => {\n  const { formatMessage } = useIntl();\n  const config = getAppConfig(appId);\n  const publishableKey = (config.STRIPE_PUBLIC_KEY as string | undefined) || '';\n  const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | null>(null);\n  const [step, setStep] = useState<'form' | 'success'>('form');\n\n  useEffect(() => {\n    if (!publishableKey) {\n      setStripePromise(null);\n      return;\n    }\n    setStripePromise(loadStripe(publishableKey));\n  }, [publishableKey]);\n\n  useEffect(() => {\n    if (isOpen) {\n      setStep('form');\n    }\n  }, [isOpen]);\n\n  const handleClose = useCallback(() => {\n    setStep('form');\n    onClose();\n  }, [onClose]);\n\n  const title = step === 'success'\n    ? formatMessage(messages['order-history.updatePayment.successTitle'])\n    : formatMessage(messages['order-history.updatePayment.title']);\n\n  const canShowForm = Boolean(publishableKey && subscriptionBiId && stripePromise);\n\n  const elementsOptions = useMemo(() => ({\n    fonts: [{ cssSrc: 'https://fonts.googleapis.com/css?family=Open+Sans' }],\n  }), []);\n\n  return (\n    <ModalDialog\n      title={title}\n      isOpen={isOpen}\n      onClose={handleClose}\n      size=\"lg\"\n      hasCloseButton\n      isOverflowVisible={false}\n      isFullscreenOnMobile\n      className=\"manage-update-payment-modal\"\n    >\n      <ModalDialog.Header>\n        <ModalDialog.Title>{title}</ModalDialog.Title>\n      </ModalDialog.Header>\n\n      <ModalDialog.Body>\n        {step === 'success' ? (\n          <div className=\"manage-update-payment manage-update-payment--success\">\n            <p className=\"manage-update-payment__intro text-primary-500 mb-0\">\n              {nextBillingDate\n                ? formatMessage(messages['order-history.updatePayment.successBody'], {\n                    date: nextBillingDate,\n                  })\n                : formatMessage(messages['order-history.updatePayment.successBodyNoDate'])}\n            </p>\n            <ActionRow className=\"manage-update-payment__actions mt-4 w-100 justify-content-end flex-wrap\">\n              <Button\n                variant=\"primary\"\n                className=\"manage-btn manage-btn--dark\"\n                onClick={handleClose}\n              >\n                {formatMessage(messages['order-history.updatePayment.close'])}\n              </Button>\n            </ActionRow>\n          </div>\n        ) : !canShowForm ? (\n          <Alert variant=\"warning\">\n            {formatMessage(messages['order-history.updatePayment.stripeMissing'])}\n          </Alert>\n        ) : (\n          <Elements stripe={stripePromise} options={elementsOptions}>\n            <PaymentForm\n              subscriptionBiId={subscriptionBiId!}\n              onClose={handleClose}\n              onSuccess={() => setStep('success')}\n            />\n          </Elements>\n        )}\n      </ModalDialog.Body>\n    </ModalDialog>\n  );\n};\n\nexport default UpdatePaymentMethodModal;\n"]}