@edx/frontend-app-subscription-manage 1.3.2 → 1.4.0

package/dist/app.js

@@ -5,8 +5,8 @@ const app = {
     appId,
     routes,
     slots,
-    // Environment-specific values (STRIPE_PUBLIC_KEY, VIAX_API_URL) are supplied
-    // by site.config.{dev,stage,prod}.tsx at site build time.
+    // Environment-specific values (VIAX_API_URL, STRIPE_PUBLIC_KEY, …) are
+    // supplied by site.config.{dev,stage,prod}.tsx at site build time.
     config: {},
 };
 export default app;

package/dist/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,GAAG,GAAQ;IACf,KAAK;IACL,MAAM;IACN,KAAK;IACL,6EAA6E;IAC7E,0DAA0D;IAC1D,MAAM,EAAE,EAAE;CACX,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { App } from '@openedx/frontend-base';\nimport { appId } from '@src/constants';\nimport routes from '@src/routes';\nimport slots from '@src/slots';\n\nconst app: App = {\n  appId,\n  routes,\n  slots,\n  // Environment-specific values (STRIPE_PUBLIC_KEY, VIAX_API_URL) are supplied\n  // by site.config.{dev,stage,prod}.tsx at site build time.\n  config: {},\n};\n\nexport default app;\n"]}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,GAAG,GAAQ;IACf,KAAK;IACL,MAAM;IACN,KAAK;IACL,uEAAuE;IACvE,mEAAmE;IACnE,MAAM,EAAE,EAAE;CACX,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { App } from '@openedx/frontend-base';\nimport { appId } from '@src/constants';\nimport routes from '@src/routes';\nimport slots from '@src/slots';\n\nconst app: App = {\n  appId,\n  routes,\n  slots,\n  // Environment-specific values (VIAX_API_URL, STRIPE_PUBLIC_KEY, …) are\n  // supplied by site.config.{dev,stage,prod}.tsx at site build time.\n  config: {},\n};\n\nexport default app;\n"]}

package/dist/components/ActiveSubscription/ActiveSubscription.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { CurrentUserSubscriberResult } from '../../types';
+interface ActiveSubscriptionProps {
+    subscriber: CurrentUserSubscriberResult | null;
+}
+declare const ActiveSubscription: React.FC<ActiveSubscriptionProps>;
+export default ActiveSubscription;

package/dist/components/ActiveSubscription/ActiveSubscription.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Icon } from '@openedx/paragon';
+import { SpinnerIcon } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+import { Link } from 'react-router-dom';
+import { formatDisplayDate } from '../../utils/formatDate';
+import { resolvePlanLabel } from '../../utils/subscriptionView';
+import { MANAGE_PAGE_PATH } from '../../constants';
+import UpdatePaymentMethodModal from '../UpdatePaymentMethodModal/UpdatePaymentMethodModal';
+import messages from '../messages';
+const ActiveSubscription = ({ subscriber }) => {
+    const { formatMessage } = useIntl();
+    const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
+    const plan = resolvePlanLabel(subscriber);
+    const sinceDate = formatDisplayDate(subscriber === null || subscriber === void 0 ? void 0 : subscriber.subscriptionStartDate);
+    const nextPayment = formatDisplayDate(subscriber === null || subscriber === void 0 ? void 0 : subscriber.currentPeriodEnd);
+    const canUpdatePayment = Boolean(subscriber === null || subscriber === void 0 ? void 0 : subscriber.subscriptionBiId);
+    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.active.heading']) }), sinceDate && (_jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['manage.active.since'], { date: sinceDate }) })), _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: [_jsxs("div", { className: "manage-card__status-row d-flex align-items-center mb-1", children: [_jsx(Icon, { src: SpinnerIcon, className: "manage-card__status-badge manage-card__status-badge--sync flex-shrink-0", "aria-hidden": true }), _jsx("span", { className: "manage-card__status-label font-weight-bold text-primary-500", children: formatMessage(plan === 'annual'
+                                            ? messages['manage.active.statusAnnual']
+                                            : messages['manage.active.statusMonthly']) })] }), nextPayment && (_jsx("p", { className: "manage-card__body text-gray-700 mb-0", children: formatMessage(messages['manage.active.nextPayment'], { date: nextPayment }) }))] }), _jsx("div", { className: "manage-card__actions manage-card__actions--row d-flex flex-wrap align-items-center flex-shrink-0 justify-content-end", children: _jsx(Button, { className: "manage-btn manage-btn--dark", variant: "primary", onClick: () => setIsPaymentModalOpen(true), disabled: !canUpdatePayment, children: formatMessage(messages['manage.active.updatePayment']) }) })] }), _jsxs("p", { className: "manage-cancel-prompt mt-3 text-right text-gray-700 small", children: [formatMessage(messages['manage.active.cancelPrompt']), ' ', _jsx(Link, { className: "manage-cancel-prompt__link text-info-500 font-weight-bold text-decoration-none", to: `/${MANAGE_PAGE_PATH}/cancel`, children: formatMessage(messages['manage.active.cancelLink']) })] }), _jsx(UpdatePaymentMethodModal, { isOpen: isPaymentModalOpen, onClose: () => setIsPaymentModalOpen(false), subscriptionBiId: subscriber === null || subscriber === void 0 ? void 0 : subscriber.subscriptionBiId, nextBillingDate: nextPayment })] }));
+};
+export default ActiveSubscription;
+//# sourceMappingURL=ActiveSubscription.js.map

package/dist/components/ActiveSubscription/ActiveSubscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveSubscription.js","sourceRoot":"","sources":["../../../src/components/ActiveSubscription/ActiveSubscription.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Button, Icon } from '@openedx/paragon';\nimport { SpinnerIcon } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport { Link } from 'react-router-dom';\n\nimport type { CurrentUserSubscriberResult } from '../../types';\nimport { formatDisplayDate } from '../../utils/formatDate';\nimport { resolvePlanLabel } from '../../utils/subscriptionView';\nimport { MANAGE_PAGE_PATH } from '../../constants';\nimport UpdatePaymentMethodModal from '../UpdatePaymentMethodModal/UpdatePaymentMethodModal';\nimport messages from '../messages';\n\ninterface ActiveSubscriptionProps {\n  subscriber: CurrentUserSubscriberResult | null,\n}\n\nconst ActiveSubscription: React.FC<ActiveSubscriptionProps> = ({ subscriber }) => {\n  const { formatMessage } = useIntl();\n  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);\n  const plan = resolvePlanLabel(subscriber);\n  const sinceDate = formatDisplayDate(subscriber?.subscriptionStartDate);\n  const nextPayment = formatDisplayDate(subscriber?.currentPeriodEnd);\n  const canUpdatePayment = Boolean(subscriber?.subscriptionBiId);\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.active.heading'])}\n      </h2>\n      {sinceDate && (\n        <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n          {formatMessage(messages['manage.active.since'], { date: sinceDate })}\n        </p>\n      )}\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          <div className=\"manage-card__status-row d-flex align-items-center mb-1\">\n            <Icon\n              src={SpinnerIcon}\n              className=\"manage-card__status-badge manage-card__status-badge--sync flex-shrink-0\"\n              aria-hidden\n            />\n            <span className=\"manage-card__status-label font-weight-bold text-primary-500\">\n              {formatMessage(\n                plan === 'annual'\n                  ? messages['manage.active.statusAnnual']\n                  : messages['manage.active.statusMonthly'],\n              )}\n            </span>\n          </div>\n          {nextPayment && (\n            <p className=\"manage-card__body text-gray-700 mb-0\">\n              {formatMessage(messages['manage.active.nextPayment'], { date: nextPayment })}\n            </p>\n          )}\n        </div>\n        <div className=\"manage-card__actions manage-card__actions--row d-flex flex-wrap align-items-center flex-shrink-0 justify-content-end\">\n          <Button\n            className=\"manage-btn manage-btn--dark\"\n            variant=\"primary\"\n            onClick={() => setIsPaymentModalOpen(true)}\n            disabled={!canUpdatePayment}\n          >\n            {formatMessage(messages['manage.active.updatePayment'])}\n          </Button>\n        </div>\n      </div>\n\n      <p className=\"manage-cancel-prompt mt-3 text-right text-gray-700 small\">\n        {formatMessage(messages['manage.active.cancelPrompt'])}\n        {' '}\n        <Link className=\"manage-cancel-prompt__link text-info-500 font-weight-bold text-decoration-none\" to={`/${MANAGE_PAGE_PATH}/cancel`}>\n          {formatMessage(messages['manage.active.cancelLink'])}\n        </Link>\n      </p>\n\n      <UpdatePaymentMethodModal\n        isOpen={isPaymentModalOpen}\n        onClose={() => setIsPaymentModalOpen(false)}\n        subscriptionBiId={subscriber?.subscriptionBiId}\n        nextBillingDate={nextPayment}\n      />\n    </section>\n  );\n};\n\nexport default ActiveSubscription;\n"]}

package/dist/components/BecomeSubscriber/BecomeSubscriber.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface BecomeSubscriberProps {
+    price?: string | null;
+    currency?: string | null;
+}
+declare const BecomeSubscriber: React.FC<BecomeSubscriberProps>;
+export default BecomeSubscriber;

package/dist/components/BecomeSubscriber/BecomeSubscriber.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { getCheckoutUrl, getLearnMoreUrl } from '../../utils/urls';
+import messages from '../messages';
+const BecomeSubscriber = ({ price = null, currency = null, }) => {
+    const { formatMessage } = useIntl();
+    const checkoutUrl = getCheckoutUrl();
+    const learnMoreUrl = getLearnMoreUrl();
+    const hasPrice = Boolean(price);
+    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.none.heading']) }), _jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['manage.none.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: formatMessage(messages['manage.none.cardTitle']) }), _jsx("p", { className: "manage-card__body text-gray-700 mb-0", children: hasPrice
+                                    ? formatMessage(messages['manage.none.cardBody'], {
+                                        price,
+                                        currency: currency !== null && currency !== void 0 ? currency : '',
+                                    })
+                                    : formatMessage(messages['manage.none.cardBodyNoPrice']) })] }), _jsxs("div", { className: "manage-card__actions d-flex flex-wrap align-items-center flex-shrink-0", children: [_jsx("a", { className: "manage-card__link text-gray-700 small", href: learnMoreUrl, target: "_blank", rel: "noopener noreferrer", children: formatMessage(messages['manage.none.learnMore']) }), _jsx(Button, { className: "manage-btn manage-btn--brand", href: checkoutUrl, children: formatMessage(messages['manage.none.subscribe']) })] })] })] }));
+};
+export default BecomeSubscriber;
+//# sourceMappingURL=BecomeSubscriber.js.map

package/dist/components/BecomeSubscriber/BecomeSubscriber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BecomeSubscriber.js","sourceRoot":"","sources":["../../../src/components/BecomeSubscriber/BecomeSubscriber.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,QAAQ,MAAM,aAAa,CAAC;AAOnC,MAAM,gBAAgB,GAAoC,CAAC,EACzD,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,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAEhC,OAAO,CACL,mBAAS,SAAS,EAAC,qBAAqB,aACtC,aAAI,SAAS,EAAC,iEAAiE,YAC5E,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC,GAC5C,EACL,YAAG,SAAS,EAAC,6CAA6C,YACvD,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC,GAChD,EAEJ,eAAK,SAAS,EAAC,yHAAyH,aACtI,eAAK,SAAS,EAAC,sBAAsB,aACnC,aAAI,SAAS,EAAC,2DAA2D,YACtE,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAAC,GAC9C,EACL,YAAG,SAAS,EAAC,sCAAsC,YAChD,QAAQ;oCACP,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE;wCAC9C,KAAK;wCACL,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE;qCACzB,CAAC;oCACJ,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,6BAA6B,CAAC,CAAC,GACxD,IACA,EACN,eAAK,SAAS,EAAC,wEAAwE,aACrF,YAAG,SAAS,EAAC,uCAAuC,EAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,YAC/G,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAAC,GAC/C,EACJ,KAAC,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAE,WAAW,YAEhB,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAAC,GAC1C,IACL,IACF,IACE,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import React from 'react';\nimport { Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { getCheckoutUrl, getLearnMoreUrl } from '../../utils/urls';\nimport messages from '../messages';\n\ninterface BecomeSubscriberProps {\n  price?: string | null,\n  currency?: string | null,\n}\n\nconst BecomeSubscriber: React.FC<BecomeSubscriberProps> = ({\n  price = null,\n  currency = null,\n}) => {\n  const { formatMessage } = useIntl();\n  const checkoutUrl = getCheckoutUrl();\n  const learnMoreUrl = getLearnMoreUrl();\n  const hasPrice = Boolean(price);\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.none.heading'])}\n      </h2>\n      <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n        {formatMessage(messages['manage.none.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            {formatMessage(messages['manage.none.cardTitle'])}\n          </h3>\n          <p className=\"manage-card__body text-gray-700 mb-0\">\n            {hasPrice\n              ? formatMessage(messages['manage.none.cardBody'], {\n                  price,\n                  currency: currency ?? '',\n                })\n              : formatMessage(messages['manage.none.cardBodyNoPrice'])}\n          </p>\n        </div>\n        <div className=\"manage-card__actions d-flex flex-wrap align-items-center flex-shrink-0\">\n          <a className=\"manage-card__link text-gray-700 small\" href={learnMoreUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n            {formatMessage(messages['manage.none.learnMore'])}\n          </a>\n          <Button\n            className=\"manage-btn manage-btn--brand\"\n            href={checkoutUrl}\n          >\n            {formatMessage(messages['manage.none.subscribe'])}\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default BecomeSubscriber;\n"]}

package/dist/components/CancelConfirmation/CancelConfirmation.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { CurrentUserSubscriberResult, SubscriptionEnrollment } from '../../types';
+interface CancelConfirmationProps {
+    subscriber: CurrentUserSubscriberResult | null;
+    enrollments: SubscriptionEnrollment[];
+    isEnrollmentsLoading?: boolean;
+    isCanceling?: boolean;
+    cancelError?: boolean;
+    onConfirmCancel: () => void;
+}
+declare const CancelConfirmation: React.FC<CancelConfirmationProps>;
+export default CancelConfirmation;

package/dist/components/CancelConfirmation/CancelConfirmation.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Spinner } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { useNavigate } from 'react-router-dom';
+import { MANAGE_PAGE_PATH } from '../../constants';
+import { formatDisplayDate } from '../../utils/formatDate';
+import EnrolledCoursesList from '../EnrolledCoursesList/EnrolledCoursesList';
+import messages from '../messages';
+const CancelConfirmation = ({ subscriber, enrollments, isEnrollmentsLoading = false, isCanceling = false, cancelError = false, onConfirmCancel, }) => {
+    var _a;
+    const { formatMessage } = useIntl();
+    const navigate = useNavigate();
+    const expireDate = formatDisplayDate((_a = subscriber === null || subscriber === void 0 ? void 0 : subscriber.currentPeriodEnd) !== null && _a !== void 0 ? _a : subscriber === null || subscriber === void 0 ? void 0 : subscriber.subscriptionEndDate);
+    return (_jsxs("div", { className: "manage-cancel py-5", children: [_jsx("h1", { className: "manage-cancel__title h2 font-weight-bold text-primary-500 mb-3", children: formatMessage(messages['manage.cancel.title']) }), _jsx("p", { className: "manage-cancel__body text-gray-700 mb-4", children: expireDate
+                    ? formatMessage(messages['manage.cancel.body'], { date: expireDate })
+                    : formatMessage(messages['manage.cancel.bodyNoDate']) }), _jsx(EnrolledCoursesList, { enrollments: enrollments, isLoading: isEnrollmentsLoading }), isEnrollmentsLoading && (_jsx("div", { className: "d-flex justify-content-center py-4", children: _jsx(Spinner, { animation: "border", screenReaderText: formatMessage(messages['manage.loading']) }) })), cancelError && (_jsx(Alert, { variant: "danger", className: "mt-3", children: formatMessage(messages['manage.cancel.error']) })), _jsxs("div", { className: "manage-cancel__actions d-flex flex-column flex-md-row justify-content-md-end mt-4", children: [_jsx(Button, { className: "manage-btn manage-btn--outline-brand w-100 w-md-auto", variant: "outline-primary", onClick: () => navigate(`/${MANAGE_PAGE_PATH}`), disabled: isCanceling, children: formatMessage(messages['manage.cancel.keep']) }), _jsx(Button, { className: "manage-btn manage-btn--brand w-100 w-md-auto", onClick: onConfirmCancel, disabled: isCanceling, children: isCanceling
+                            ? formatMessage(messages['manage.cancel.confirming'])
+                            : formatMessage(messages['manage.cancel.confirm']) })] })] }));
+};
+export default CancelConfirmation;
+//# sourceMappingURL=CancelConfirmation.js.map

package/dist/components/CancelConfirmation/CancelConfirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CancelConfirmation.js","sourceRoot":"","sources":["../../../src/components/CancelConfirmation/CancelConfirmation.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,mBAAmB,MAAM,4CAA4C,CAAC;AAC7E,OAAO,QAAQ,MAAM,aAAa,CAAC;AAWnC,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,UAAU,EACV,WAAW,EACX,oBAAoB,GAAG,KAAK,EAC5B,WAAW,GAAG,KAAK,EACnB,WAAW,GAAG,KAAK,EACnB,eAAe,GAChB,EAAE,EAAE;;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,UAAU,GAAG,iBAAiB,CAClC,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,gBAAgB,mCAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,mBAAmB,CAChE,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,oBAAoB,aACjC,aAAI,SAAS,EAAC,gEAAgE,YAC3E,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC,GAC5C,EACL,YAAG,SAAS,EAAC,wCAAwC,YAClD,UAAU;oBACT,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;oBACrE,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CAAC,GACrD,EAEJ,KAAC,mBAAmB,IAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,oBAAoB,GAC/B,EAED,oBAAoB,IAAI,CACvB,cAAK,SAAS,EAAC,oCAAoC,YACjD,KAAC,OAAO,IACN,SAAS,EAAC,QAAQ,EAClB,gBAAgB,EAAE,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,GAC3D,GACE,CACP,EAEA,WAAW,IAAI,CACd,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,YACrC,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC,GACzC,CACT,EAED,eAAK,SAAS,EAAC,mFAAmF,aAChG,KAAC,MAAM,IACL,SAAS,EAAC,sDAAsD,EAChE,OAAO,EAAC,iBAAiB,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,gBAAgB,EAAE,CAAC,EAC/C,QAAQ,EAAE,WAAW,YAEpB,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC,GACvC,EACT,KAAC,MAAM,IACL,SAAS,EAAC,8CAA8C,EACxD,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,WAAW,YAEpB,WAAW;4BACV,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CAAC;4BACrD,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAAC,GAC7C,IACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import React from 'react';\nimport { Alert, Button, Spinner } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { useNavigate } from 'react-router-dom';\n\nimport { MANAGE_PAGE_PATH } from '../../constants';\nimport type {\n  CurrentUserSubscriberResult,\n  SubscriptionEnrollment,\n} from '../../types';\nimport { formatDisplayDate } from '../../utils/formatDate';\nimport EnrolledCoursesList from '../EnrolledCoursesList/EnrolledCoursesList';\nimport messages from '../messages';\n\ninterface CancelConfirmationProps {\n  subscriber: CurrentUserSubscriberResult | null,\n  enrollments: SubscriptionEnrollment[],\n  isEnrollmentsLoading?: boolean,\n  isCanceling?: boolean,\n  cancelError?: boolean,\n  onConfirmCancel: () => void,\n}\n\nconst CancelConfirmation: React.FC<CancelConfirmationProps> = ({\n  subscriber,\n  enrollments,\n  isEnrollmentsLoading = false,\n  isCanceling = false,\n  cancelError = false,\n  onConfirmCancel,\n}) => {\n  const { formatMessage } = useIntl();\n  const navigate = useNavigate();\n  const expireDate = formatDisplayDate(\n    subscriber?.currentPeriodEnd ?? subscriber?.subscriptionEndDate,\n  );\n\n  return (\n    <div className=\"manage-cancel py-5\">\n      <h1 className=\"manage-cancel__title h2 font-weight-bold text-primary-500 mb-3\">\n        {formatMessage(messages['manage.cancel.title'])}\n      </h1>\n      <p className=\"manage-cancel__body text-gray-700 mb-4\">\n        {expireDate\n          ? formatMessage(messages['manage.cancel.body'], { date: expireDate })\n          : formatMessage(messages['manage.cancel.bodyNoDate'])}\n      </p>\n\n      <EnrolledCoursesList\n        enrollments={enrollments}\n        isLoading={isEnrollmentsLoading}\n      />\n\n      {isEnrollmentsLoading && (\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      {cancelError && (\n        <Alert variant=\"danger\" className=\"mt-3\">\n          {formatMessage(messages['manage.cancel.error'])}\n        </Alert>\n      )}\n\n      <div className=\"manage-cancel__actions d-flex flex-column flex-md-row justify-content-md-end mt-4\">\n        <Button\n          className=\"manage-btn manage-btn--outline-brand w-100 w-md-auto\"\n          variant=\"outline-primary\"\n          onClick={() => navigate(`/${MANAGE_PAGE_PATH}`)}\n          disabled={isCanceling}\n        >\n          {formatMessage(messages['manage.cancel.keep'])}\n        </Button>\n        <Button\n          className=\"manage-btn manage-btn--brand w-100 w-md-auto\"\n          onClick={onConfirmCancel}\n          disabled={isCanceling}\n        >\n          {isCanceling\n            ? formatMessage(messages['manage.cancel.confirming'])\n            : formatMessage(messages['manage.cancel.confirm'])}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default CancelConfirmation;\n"]}

package/dist/components/CancelSuccess/CancelSuccess.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { CurrentUserSubscriberResult } from '../../types';
+interface CancelSuccessProps {
+    subscriber: CurrentUserSubscriberResult | null;
+}
+declare const CancelSuccess: React.FC<CancelSuccessProps>;
+export default CancelSuccess;

package/dist/components/CancelSuccess/CancelSuccess.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { formatDisplayDate } from '../../utils/formatDate';
+import { getLearnerDashboardUrl } from '../../utils/urls';
+import messages from '../messages';
+const CancelSuccess = ({ subscriber }) => {
+    var _a;
+    const { formatMessage } = useIntl();
+    const accessUntil = formatDisplayDate((_a = subscriber === null || subscriber === void 0 ? void 0 : subscriber.currentPeriodEnd) !== null && _a !== void 0 ? _a : subscriber === null || subscriber === void 0 ? void 0 : subscriber.subscriptionEndDate);
+    const dashboardUrl = getLearnerDashboardUrl();
+    return (_jsxs("div", { className: "manage-cancel-success d-flex flex-column align-items-stretch py-5", children: [_jsxs("div", { className: "manage-cancel-success__copy", children: [_jsx("h1", { className: "manage-cancel-success__title h2 font-weight-bold text-primary-500 mb-3", children: formatMessage(messages['manage.cancelSuccess.title']) }), _jsx("p", { className: "manage-cancel-success__body text-primary-500 mb-0", children: accessUntil
+                            ? formatMessage(messages['manage.cancelSuccess.body'], { date: accessUntil })
+                            : formatMessage(messages['manage.cancelSuccess.bodyNoDate']) })] }), _jsx(Button, { className: "manage-btn manage-btn--dark align-self-end", href: dashboardUrl, children: formatMessage(messages['manage.cancelSuccess.return']) })] }));
+};
+export default CancelSuccess;
+//# sourceMappingURL=CancelSuccess.js.map

package/dist/components/CancelSuccess/CancelSuccess.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CancelSuccess.js","sourceRoot":"","sources":["../../../src/components/CancelSuccess/CancelSuccess.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,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAMnC,MAAM,aAAa,GAAiC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;;IACrE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,WAAW,GAAG,iBAAiB,CACnC,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,gBAAgB,mCAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,mBAAmB,CAChE,CAAC;IACF,MAAM,YAAY,GAAG,sBAAsB,EAAE,CAAC;IAE9C,OAAO,CACL,eAAK,SAAS,EAAC,mEAAmE,aAChF,eAAK,SAAS,EAAC,6BAA6B,aAC1C,aAAI,SAAS,EAAC,wEAAwE,YACnF,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC,GACnD,EACL,YAAG,SAAS,EAAC,mDAAmD,YAC7D,WAAW;4BACV,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;4BAC7E,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,iCAAiC,CAAC,CAAC,GAC5D,IACA,EACN,KAAC,MAAM,IAAC,SAAS,EAAC,4CAA4C,EAAC,IAAI,EAAE,YAAY,YAC9E,aAAa,CAAC,QAAQ,CAAC,6BAA6B,CAAC,CAAC,GAChD,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,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 { getLearnerDashboardUrl } from '../../utils/urls';\nimport messages from '../messages';\n\ninterface CancelSuccessProps {\n  subscriber: CurrentUserSubscriberResult | null,\n}\n\nconst CancelSuccess: React.FC<CancelSuccessProps> = ({ subscriber }) => {\n  const { formatMessage } = useIntl();\n  const accessUntil = formatDisplayDate(\n    subscriber?.currentPeriodEnd ?? subscriber?.subscriptionEndDate,\n  );\n  const dashboardUrl = getLearnerDashboardUrl();\n\n  return (\n    <div className=\"manage-cancel-success d-flex flex-column align-items-stretch py-5\">\n      <div className=\"manage-cancel-success__copy\">\n        <h1 className=\"manage-cancel-success__title h2 font-weight-bold text-primary-500 mb-3\">\n          {formatMessage(messages['manage.cancelSuccess.title'])}\n        </h1>\n        <p className=\"manage-cancel-success__body text-primary-500 mb-0\">\n          {accessUntil\n            ? formatMessage(messages['manage.cancelSuccess.body'], { date: accessUntil })\n            : formatMessage(messages['manage.cancelSuccess.bodyNoDate'])}\n        </p>\n      </div>\n      <Button className=\"manage-btn manage-btn--dark align-self-end\" href={dashboardUrl}>\n        {formatMessage(messages['manage.cancelSuccess.return'])}\n      </Button>\n    </div>\n  );\n};\n\nexport default CancelSuccess;\n"]}

package/dist/components/CanceledSubscription/CanceledSubscription.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { CurrentUserSubscriberResult } from '../../types';
+interface RenewActions {
+    onRenew: () => void;
+}
+interface CanceledSubscriptionProps extends RenewActions {
+    subscriber: CurrentUserSubscriberResult | null;
+}
+export declare const RenewBanner: React.FC<RenewActions & {
+    expireDate: string | null;
+}>;
+declare const CanceledSubscription: React.FC<CanceledSubscriptionProps>;
+export default CanceledSubscription;

package/dist/components/CanceledSubscription/CanceledSubscription.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { formatDisplayDate } from '../../utils/formatDate';
+import { resolvePlanLabel } from '../../utils/subscriptionView';
+import messages from '../messages';
+export const RenewBanner = ({ expireDate, onRenew, }) => {
+    const { formatMessage } = useIntl();
+    if (!expireDate) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "manage-renew-banner__content", children: [_jsx("h2", { className: "manage-renew-banner__title h3 font-weight-bold text-primary-500 mb-2", children: formatMessage(messages['manage.canceled.bannerTitle']) }), _jsx("p", { className: "manage-renew-banner__body text-primary-500 mb-0", children: formatMessage(messages['manage.canceled.bannerBody'], { date: expireDate }) })] }), _jsx("div", { className: "manage-renew-banner__actions", children: _jsx(Button, { className: "manage-btn manage-btn--brand", onClick: onRenew, children: formatMessage(messages['manage.canceled.renew']) }) })] }));
+};
+const CanceledSubscription = ({ subscriber, onRenew, }) => {
+    var _a, _b;
+    const { formatMessage } = useIntl();
+    const plan = resolvePlanLabel(subscriber);
+    const sinceDate = formatDisplayDate(subscriber === null || subscriber === void 0 ? void 0 : subscriber.subscriptionStartDate);
+    const canceledOn = formatDisplayDate((_b = (_a = subscriber === null || subscriber === void 0 ? void 0 : subscriber.canceledAt) !== null && _a !== void 0 ? _a : subscriber === null || subscriber === void 0 ? void 0 : subscriber.subscriptionEndDate) !== null && _b !== void 0 ? _b : subscriber === null || subscriber === void 0 ? void 0 : subscriber.currentPeriodEnd);
+    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.active.heading']) }), sinceDate && (_jsx("p", { className: "manage-section__subtitle text-gray-700 mb-3", children: formatMessage(messages['manage.active.since'], { date: sinceDate }) })), _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: [_jsxs("div", { className: "manage-card__status-row d-flex align-items-center mb-1", children: [_jsx("span", { className: "manage-card__status-badge manage-card__status-badge--cancel flex-shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "manage-card__status-label font-weight-bold text-primary-500", children: formatMessage(plan === 'annual'
+                                            ? messages['manage.canceled.statusAnnual']
+                                            : messages['manage.canceled.statusMonthly']) })] }), _jsx("p", { className: "manage-card__body text-gray-700 mb-0", children: canceledOn
+                                    ? formatMessage(messages['manage.canceled.noPayments'], { date: canceledOn })
+                                    : formatMessage(messages['manage.canceled.noPaymentsNoDate']) })] }), _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", onClick: onRenew, children: formatMessage(messages['manage.canceled.renew']) }) })] })] }));
+};
+export default CanceledSubscription;
+//# sourceMappingURL=CanceledSubscription.js.map

package/dist/components/CanceledSubscription/CanceledSubscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanceledSubscription.js","sourceRoot":"","sources":["../../../src/components/CanceledSubscription/CanceledSubscription.tsx"],"names":[],"mappings":"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","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 { resolvePlanLabel } from '../../utils/subscriptionView';\nimport messages from '../messages';\n\ninterface RenewActions {\n  onRenew: () => void,\n}\n\ninterface CanceledSubscriptionProps extends RenewActions {\n  subscriber: CurrentUserSubscriberResult | null,\n}\n\nexport const RenewBanner: React.FC<RenewActions & { expireDate: string | null }> = ({\n  expireDate,\n  onRenew,\n}) => {\n  const { formatMessage } = useIntl();\n\n  if (!expireDate) {\n    return null;\n  }\n\n  return (\n    <>\n      <div className=\"manage-renew-banner__content\">\n        <h2 className=\"manage-renew-banner__title h3 font-weight-bold text-primary-500 mb-2\">\n          {formatMessage(messages['manage.canceled.bannerTitle'])}\n        </h2>\n        <p className=\"manage-renew-banner__body text-primary-500 mb-0\">\n          {formatMessage(messages['manage.canceled.bannerBody'], { date: expireDate })}\n        </p>\n      </div>\n      <div className=\"manage-renew-banner__actions\">\n        <Button\n          className=\"manage-btn manage-btn--brand\"\n          onClick={onRenew}\n        >\n          {formatMessage(messages['manage.canceled.renew'])}\n        </Button>\n      </div>\n    </>\n  );\n};\n\nconst CanceledSubscription: React.FC<CanceledSubscriptionProps> = ({\n  subscriber,\n  onRenew,\n}) => {\n  const { formatMessage } = useIntl();\n  const plan = resolvePlanLabel(subscriber);\n  const sinceDate = formatDisplayDate(subscriber?.subscriptionStartDate);\n  const canceledOn = formatDisplayDate(\n    subscriber?.canceledAt ?? subscriber?.subscriptionEndDate ?? subscriber?.currentPeriodEnd,\n  );\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.active.heading'])}\n      </h2>\n      {sinceDate && (\n        <p className=\"manage-section__subtitle text-gray-700 mb-3\">\n          {formatMessage(messages['manage.active.since'], { date: sinceDate })}\n        </p>\n      )}\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          <div className=\"manage-card__status-row d-flex align-items-center mb-1\">\n            <span className=\"manage-card__status-badge manage-card__status-badge--cancel flex-shrink-0\" aria-hidden=\"true\" />\n            <span className=\"manage-card__status-label font-weight-bold text-primary-500\">\n              {formatMessage(\n                plan === 'annual'\n                  ? messages['manage.canceled.statusAnnual']\n                  : messages['manage.canceled.statusMonthly'],\n              )}\n            </span>\n          </div>\n          <p className=\"manage-card__body text-gray-700 mb-0\">\n            {canceledOn\n              ? formatMessage(messages['manage.canceled.noPayments'], { date: canceledOn })\n              : formatMessage(messages['manage.canceled.noPaymentsNoDate'])}\n          </p>\n        </div>\n        <div className=\"manage-card__actions d-flex flex-wrap align-items-center flex-shrink-0\">\n          <Button\n            className=\"manage-btn manage-btn--brand\"\n            onClick={onRenew}\n          >\n            {formatMessage(messages['manage.canceled.renew'])}\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default CanceledSubscription;\n"]}

package/dist/components/EnrolledCoursesList/EnrolledCoursesList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SubscriptionEnrollment } from '../../types';
+interface EnrolledCoursesListProps {
+    enrollments: SubscriptionEnrollment[];
+    isLoading?: boolean;
+}
+declare const EnrolledCoursesList: React.FC<EnrolledCoursesListProps>;
+export default EnrolledCoursesList;

package/dist/components/EnrolledCoursesList/EnrolledCoursesList.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Image } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+const EnrolledCoursesList = ({ enrollments, isLoading = false, }) => {
+    const { formatMessage } = useIntl();
+    if (isLoading || enrollments.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "manage-courses", children: [_jsx("h3", { className: "manage-courses__heading font-weight-bold text-primary-500 mb-3", children: formatMessage(messages['manage.cancel.coursesHeading'], {
+                    count: enrollments.length,
+                }) }), _jsx("ul", { className: "manage-courses__list list-unstyled m-0 p-0 bg-white border rounded", children: enrollments.map((enrollment) => {
+                    var _a, _b, _c, _d, _e;
+                    const showCertificate = enrollment.hasCertificate
+                        || ((_a = enrollment.status) !== null && _a !== void 0 ? _a : '').toUpperCase() === 'COMPLETED';
+                    return (_jsxs("li", { className: "manage-courses__item d-flex align-items-start border-bottom p-3", children: [_jsx("div", { className: "manage-courses__logo-wrap flex-shrink-0 mr-3", children: enrollment.imageUrl || enrollment.orgLogoUrl ? (_jsx(Image, { className: "manage-courses__logo border bg-white rounded", src: enrollment.imageUrl || enrollment.orgLogoUrl || '', alt: (_c = (_b = enrollment.courseName) !== null && _b !== void 0 ? _b : enrollment.orgName) !== null && _c !== void 0 ? _c : '' })) : (_jsx("div", { className: "manage-courses__logo manage-courses__logo--placeholder border rounded" })) }), _jsxs("div", { className: "manage-courses__meta flex-grow-1", children: [enrollment.courseSlug ? (_jsx("a", { className: "manage-courses__title font-weight-bold text-primary-500 d-inline-block mb-1", href: `/${enrollment.courseSlug}`, children: (_d = enrollment.courseName) !== null && _d !== void 0 ? _d : enrollment.courseRunKey })) : (_jsx("span", { className: "manage-courses__title manage-courses__title--static font-weight-bold text-primary-500 d-inline-block text-decoration-none mb-1", children: (_e = enrollment.courseName) !== null && _e !== void 0 ? _e : enrollment.courseRunKey })), enrollment.orgName && (_jsx("p", { className: "manage-courses__org text-gray-700 small mb-0", children: enrollment.orgName })), showCertificate && (_jsx(Button, { size: "sm", variant: "outline-primary", className: "manage-btn manage-btn--outline-dark d-md-none mt-2", href: enrollment.certificateUrl || undefined, children: formatMessage(messages['manage.cancel.viewCertificate']) }))] }), showCertificate && (_jsx("div", { className: "d-none d-md-block flex-shrink-0 align-self-center ml-3", children: _jsx(Button, { size: "sm", variant: "outline-primary", className: "manage-btn manage-btn--outline-dark", href: enrollment.certificateUrl || undefined, children: formatMessage(messages['manage.cancel.viewCertificate']) }) }))] }, enrollment.biId));
+                }) })] }));
+};
+export default EnrolledCoursesList;
+//# sourceMappingURL=EnrolledCoursesList.js.map

package/dist/components/EnrolledCoursesList/EnrolledCoursesList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnrolledCoursesList.js","sourceRoot":"","sources":["../../../src/components/EnrolledCoursesList/EnrolledCoursesList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAOnC,MAAM,mBAAmB,GAAuC,CAAC,EAC/D,WAAW,EACX,SAAS,GAAG,KAAK,GAClB,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,IAAI,SAAS,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,aAAI,SAAS,EAAC,gEAAgE,YAC3E,aAAa,CAAC,QAAQ,CAAC,8BAA8B,CAAC,EAAE;oBACvD,KAAK,EAAE,WAAW,CAAC,MAAM;iBAC1B,CAAC,GACC,EACL,aAAI,SAAS,EAAC,oEAAoE,YAC/E,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;;oBAC9B,MAAM,eAAe,GAAG,UAAU,CAAC,cAAc;2BAC5C,CAAC,MAAA,UAAU,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC;oBAE7D,OAAO,CACL,cAEE,SAAS,EAAC,iEAAiE,aAE3E,cAAK,SAAS,EAAC,8CAA8C,YAC1D,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAC9C,KAAC,KAAK,IACJ,SAAS,EAAC,8CAA8C,EACxD,GAAG,EAAE,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,UAAU,IAAI,EAAE,EACvD,GAAG,EAAE,MAAA,MAAA,UAAU,CAAC,UAAU,mCAAI,UAAU,CAAC,OAAO,mCAAI,EAAE,GACtD,CACH,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,uEAAuE,GAAG,CAC1F,GACG,EACN,eAAK,SAAS,EAAC,kCAAkC,aAC9C,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CACvB,YACE,SAAS,EAAC,6EAA6E,EACvF,IAAI,EAAE,IAAI,UAAU,CAAC,UAAU,EAAE,YAEhC,MAAA,UAAU,CAAC,UAAU,mCAAI,UAAU,CAAC,YAAY,GAC/C,CACL,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,gIAAgI,YAC7I,MAAA,UAAU,CAAC,UAAU,mCAAI,UAAU,CAAC,YAAY,GAC5C,CACR,EACA,UAAU,CAAC,OAAO,IAAI,CACrB,YAAG,SAAS,EAAC,8CAA8C,YAAE,UAAU,CAAC,OAAO,GAAK,CACrF,EACA,eAAe,IAAI,CAClB,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,iBAAiB,EACzB,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAE,UAAU,CAAC,cAAc,IAAI,SAAS,YAE3C,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,CAAC,GAClD,CACV,IACG,EACL,eAAe,IAAI,CAClB,cAAK,SAAS,EAAC,wDAAwD,YACrE,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,iBAAiB,EACzB,SAAS,EAAC,qCAAqC,EAC/C,IAAI,EAAE,UAAU,CAAC,cAAc,IAAI,SAAS,YAE3C,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,CAAC,GAClD,GACL,CACP,KApDI,UAAU,CAAC,IAAI,CAqDjB,CACN,CAAC;gBACJ,CAAC,CAAC,GACC,IACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import React from 'react';\nimport { Button, Image } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport type { SubscriptionEnrollment } from '../../types';\nimport messages from '../messages';\n\ninterface EnrolledCoursesListProps {\n  enrollments: SubscriptionEnrollment[],\n  isLoading?: boolean,\n}\n\nconst EnrolledCoursesList: React.FC<EnrolledCoursesListProps> = ({\n  enrollments,\n  isLoading = false,\n}) => {\n  const { formatMessage } = useIntl();\n\n  if (isLoading || enrollments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"manage-courses\">\n      <h3 className=\"manage-courses__heading font-weight-bold text-primary-500 mb-3\">\n        {formatMessage(messages['manage.cancel.coursesHeading'], {\n          count: enrollments.length,\n        })}\n      </h3>\n      <ul className=\"manage-courses__list list-unstyled m-0 p-0 bg-white border rounded\">\n        {enrollments.map((enrollment) => {\n          const showCertificate = enrollment.hasCertificate\n            || (enrollment.status ?? '').toUpperCase() === 'COMPLETED';\n\n          return (\n            <li\n              key={enrollment.biId}\n              className=\"manage-courses__item d-flex align-items-start border-bottom p-3\"\n            >\n              <div className=\"manage-courses__logo-wrap flex-shrink-0 mr-3\">\n                {enrollment.imageUrl || enrollment.orgLogoUrl ? (\n                  <Image\n                    className=\"manage-courses__logo border bg-white rounded\"\n                    src={enrollment.imageUrl || enrollment.orgLogoUrl || ''}\n                    alt={enrollment.courseName ?? enrollment.orgName ?? ''}\n                  />\n                ) : (\n                  <div className=\"manage-courses__logo manage-courses__logo--placeholder border rounded\" />\n                )}\n              </div>\n              <div className=\"manage-courses__meta flex-grow-1\">\n                {enrollment.courseSlug ? (\n                  <a\n                    className=\"manage-courses__title font-weight-bold text-primary-500 d-inline-block mb-1\"\n                    href={`/${enrollment.courseSlug}`}\n                  >\n                    {enrollment.courseName ?? enrollment.courseRunKey}\n                  </a>\n                ) : (\n                  <span className=\"manage-courses__title manage-courses__title--static font-weight-bold text-primary-500 d-inline-block text-decoration-none mb-1\">\n                    {enrollment.courseName ?? enrollment.courseRunKey}\n                  </span>\n                )}\n                {enrollment.orgName && (\n                  <p className=\"manage-courses__org text-gray-700 small mb-0\">{enrollment.orgName}</p>\n                )}\n                {showCertificate && (\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline-primary\"\n                    className=\"manage-btn manage-btn--outline-dark d-md-none mt-2\"\n                    href={enrollment.certificateUrl || undefined}\n                  >\n                    {formatMessage(messages['manage.cancel.viewCertificate'])}\n                  </Button>\n                )}\n              </div>\n              {showCertificate && (\n                <div className=\"d-none d-md-block flex-shrink-0 align-self-center ml-3\">\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline-primary\"\n                    className=\"manage-btn manage-btn--outline-dark\"\n                    href={enrollment.certificateUrl || undefined}\n                  >\n                    {formatMessage(messages['manage.cancel.viewCertificate'])}\n                  </Button>\n                </div>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default EnrolledCoursesList;\n"]}

package/dist/components/HelpFooter/HelpFooter.d.ts

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

package/dist/components/HelpFooter/HelpFooter.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import { ExternalLinkIcon } from '../../icons';
+import { getLearnerHelpCenterUrl } from '../../utils/urls';
+import messages from '../messages';
+const HelpFooter = () => {
+    const { formatMessage } = useIntl();
+    const helpUrl = getLearnerHelpCenterUrl();
+    return (_jsx("div", { className: "manage-help mt-5 pt-4 border-top", children: _jsxs("p", { className: "manage-help__text text-gray-700 small mb-0", children: [formatMessage(messages['manage.help.prefix']), ' ', _jsxs("a", { className: "manage-help__link font-weight-bold text-primary-500 d-inline-flex align-items-center", href: helpUrl, target: "_blank", rel: "noopener noreferrer", children: [formatMessage(messages['manage.help.link']), _jsx(ExternalLinkIcon, { className: "manage-help__icon ml-2", size: 14 })] })] }) }));
+};
+export default HelpFooter;
+//# sourceMappingURL=HelpFooter.js.map

package/dist/components/HelpFooter/HelpFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpFooter.js","sourceRoot":"","sources":["../../../src/components/HelpFooter/HelpFooter.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,UAAU,GAAa,GAAG,EAAE;IAChC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,uBAAuB,EAAE,CAAC;IAE1C,OAAO,CACL,cAAK,SAAS,EAAC,kCAAkC,YAC/C,aAAG,SAAS,EAAC,4CAA4C,aACtD,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC,EAC7C,GAAG,EACJ,aACE,SAAS,EAAC,sFAAsF,EAChG,IAAI,EAAE,OAAO,EACb,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,aAExB,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,EAC5C,KAAC,gBAAgB,IAAC,SAAS,EAAC,wBAAwB,EAAC,IAAI,EAAE,EAAE,GAAI,IAC/D,IACF,GACA,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { ExternalLinkIcon } from '../../icons';\nimport { getLearnerHelpCenterUrl } from '../../utils/urls';\nimport messages from '../messages';\n\nconst HelpFooter: React.FC = () => {\n  const { formatMessage } = useIntl();\n  const helpUrl = getLearnerHelpCenterUrl();\n\n  return (\n    <div className=\"manage-help mt-5 pt-4 border-top\">\n      <p className=\"manage-help__text text-gray-700 small mb-0\">\n        {formatMessage(messages['manage.help.prefix'])}\n        {' '}\n        <a\n          className=\"manage-help__link font-weight-bold text-primary-500 d-inline-flex align-items-center\"\n          href={helpUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {formatMessage(messages['manage.help.link'])}\n          <ExternalLinkIcon className=\"manage-help__icon ml-2\" size={14} />\n        </a>\n      </p>\n    </div>\n  );\n};\n\nexport default HelpFooter;\n"]}

package/dist/components/OrderHistoryHeader/OrderHistoryHeader.d.ts

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

package/dist/components/OrderHistoryHeader/OrderHistoryHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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']) })] }));
+};
+export default OrderHistoryHeader;
+//# sourceMappingURL=OrderHistoryHeader.js.map

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

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

package/dist/components/PaymentHistory/PaymentHistory.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { CurrentUserSubscriberResult, PaymentHistoryItem } from '../../types';
+interface PaymentHistoryProps {
+    subscriber: CurrentUserSubscriberResult | null;
+    invoices: PaymentHistoryItem[];
+    isLoading?: boolean;
+    isError?: boolean;
+}
+declare const PaymentHistory: React.FC<PaymentHistoryProps>;
+export default PaymentHistory;

package/dist/components/PaymentHistory/PaymentHistory.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Spinner } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { formatDisplayDate, formatNumericDate } from '../../utils/formatDate';
+import { formatMoney } from '../../utils/invoiceAmount';
+import messages from '../messages';
+const PaymentHistory = ({ subscriber, invoices, isLoading = false, isError = false, }) => {
+    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'], {
+                    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) => {
+                    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']);
+                    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 || '—' })] })] })] }, invoice.biId));
+                }) }))] }));
+};
+export default PaymentHistory;
+//# sourceMappingURL=PaymentHistory.js.map

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

@@ -0,0 +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\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                </dl>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </section>\n  );\n};\n\nexport default PaymentHistory;\n"]}

package/dist/components/RenewSubscriptionModal/RenewSubscriptionModal.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface RenewSubscriptionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    isConfirming?: boolean;
+    confirmError?: boolean;
+    subscriptionBiId: string | null | undefined;
+    renewalDate: string | null;
+    price: string | null;
+    currency: string | null;
+    cycle?: 'monthly' | 'annual';
+    /** ISO 3166-1 alpha-2 — shows UK/CA consent when GB or CA. */
+    userCountry?: string | null;
+}
+declare const RenewSubscriptionModal: React.FC<RenewSubscriptionModalProps>;
+export default RenewSubscriptionModal;

package/dist/components/RenewSubscriptionModal/RenewSubscriptionModal.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Alert, Button, Form, ModalDialog, Spinner, } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { COUNTRIES_REQUIRING_EXTRA_CONFIRM } from '../../constants';
+import { useSubscriptionPaymentMethodQuery, useViaxClient, useViaxSession, } from '../../data/hooks/useManageQueries';
+import UpdatePaymentMethodModal from '../UpdatePaymentMethodModal/UpdatePaymentMethodModal';
+import messages from '../messages';
+const CARD_ICON = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 4C0 3.46957 0.210714 2.96086 0.585786 2.58579C0.960859 2.21071 1.46957 2 2 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4H0ZM0 6V12C0 12.5304 0.210714 13.0391 0.585786 13.4142C0.960859 13.7893 1.46957 14 2 14H14C14.5304 14 15.0391 13.7893 15.4142 13.4142C15.7893 13.0391 16 12.5304 16 12V6H0ZM3 11C3 10.7348 3.10536 10.4804 3.29289 10.2929C3.48043 10.1054 3.73478 10 4 10H5C5.26522 10 5.51957 10.1054 5.70711 10.2929C5.89464 10.4804 6 10.7348 6 11C6 11.2652 5.89464 11.5196 5.70711 11.7071C5.51957 11.8946 5.26522 12 5 12H4C3.73478 12 3.48043 11.8946 3.29289 11.7071C3.10536 11.5196 3 11.2652 3 11Z", fill: "#0270DE" }) }));
+const RenewSubscriptionModal = ({ isOpen, onClose, onConfirm, isConfirming = false, confirmError = false, subscriptionBiId, renewalDate, price, currency, cycle = 'monthly', userCountry = null, }) => {
+    var _a, _b;
+    const { formatMessage } = useIntl();
+    const client = useViaxClient();
+    const { sessionReady } = useViaxSession(client);
+    const paymentMethodQuery = useSubscriptionPaymentMethodQuery(client, sessionReady, subscriptionBiId, isOpen);
+    const [confirmed, setConfirmed] = useState(false);
+    const [ukCaConfirmed, setUkCaConfirmed] = useState(false);
+    const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
+    const showExtraConfirm = Boolean(userCountry && COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(userCountry));
+    const frequency = cycle === 'annual' ? 'year' : 'month';
+    const cycleLabel = cycle === 'annual' ? 'annual' : 'monthly';
+    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;
+    useEffect(() => {
+        if (isOpen) {
+            setConfirmed(false);
+            setUkCaConfirmed(false);
+            setIsPaymentModalOpen(false);
+        }
+    }, [isOpen]);
+    const canConfirm = confirmed
+        && (!showExtraConfirm || ukCaConfirmed)
+        && !isConfirming
+        && Boolean(subscriptionBiId);
+    const title = displayPrice
+        ? formatMessage(messages['manage.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'], {
+                                        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']) })),
+                                    }) }), _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) => {
+                                            setConfirmed(e.target.checked);
+                                        }, children: _jsx("span", { className: "text-primary-500", children: formatMessage(messages['manage.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']) })] }) })] }), _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

@@ -0,0 +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 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\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            <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      <UpdatePaymentMethodModal\n        isOpen={isPaymentModalOpen}\n        onClose={() => setIsPaymentModalOpen(false)}\n        subscriptionBiId={subscriptionBiId}\n        nextBillingDate={renewalDate}\n      />\n    </>\n  );\n};\n\nexport default RenewSubscriptionModal;\n"]}

package/dist/components/ResubscribeCard/ResubscribeCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { CurrentUserSubscriberResult } from '../../types';
+interface ResubscribeCardProps {
+    subscriber: CurrentUserSubscriberResult | null;
+    price?: string | null;
+    currency?: string | null;
+}
+declare const ResubscribeCard: React.FC<ResubscribeCardProps>;
+export default ResubscribeCard;