npm - @edx/frontend-app-subscription-manage - Versions diffs - 1.18.2 → 1.20.0 - Mend

@edx/frontend-app-subscription-manage 1.18.2 → 1.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/dist/components/RefundNotice/RefundNotice.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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 { 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['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"]}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,+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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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['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"]}