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

package/dist/manageSubscriptionPage/ManageSubscriptionPage.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Alert, Container, Spinner, } from '@openedx/paragon';
-import { useIntl } from '@openedx/frontend-base';
-import ActiveSubscription from '../components/ActiveSubscription/ActiveSubscription';
-import BecomeSubscriber from '../components/BecomeSubscriber/BecomeSubscriber';
-import CanceledSubscription, { RenewBanner, } from '../components/CanceledSubscription/CanceledSubscription';
-import HelpFooter from '../components/HelpFooter/HelpFooter';
-import OrderHistoryHeader from '../components/OrderHistoryHeader/OrderHistoryHeader';
-import PaymentHistory from '../components/PaymentHistory/PaymentHistory';
-import RenewSubscriptionModal from '../components/RenewSubscriptionModal/RenewSubscriptionModal';
-import ResubscribeCard from '../components/ResubscribeCard/ResubscribeCard';
-import SubscriptionTabs from '../components/SubscriptionTabs/SubscriptionTabs';
-import messages from '../components/messages';
-import { useBillingPlansQuery, useIsSubscriberQuery, usePaymentHistoryQuery, useReactivateSubscriptionMutation, useViaxClient, useViaxSession, } from '../data/hooks/useManageQueries';
-import { getPaymentHistorySubscriptionIds } from '../data/services/subscription/getPaymentHistory';
-import { getPlanPrice } from '../utils/billingDetails';
-import { formatDisplayDate } from '../utils/formatDate';
-import { resolvePlanLabel, resolveSubscriptionView, } from '../utils/subscriptionView';
-const ManageSubscriptionPage = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const { formatMessage } = useIntl();
-    const [activeTab, setActiveTab] = useState('subscription');
-    const [isRenewModalOpen, setIsRenewModalOpen] = useState(false);
-    const client = useViaxClient();
-    const { sessionReady, isSessionLoading, isSessionError } = useViaxSession(client);
-    const subscriberQuery = useIsSubscriberQuery(client, sessionReady);
-    const billingPlansQuery = useBillingPlansQuery(client, sessionReady);
-    const reactivateMutation = useReactivateSubscriptionMutation(client);
-    const subscriptionBiId = (_b = (_a = subscriberQuery.data) === null || _a === void 0 ? void 0 : _a.subscriptionBiId) !== null && _b !== void 0 ? _b : null;
-    const paymentHistoryQuery = usePaymentHistoryQuery(client, sessionReady && activeTab === 'payment-history', getPaymentHistorySubscriptionIds(subscriberQuery.data));
-    const subscriber = (_c = subscriberQuery.data) !== null && _c !== void 0 ? _c : null;
-    const planCycle = resolvePlanLabel(subscriber);
-    const planPrice = getPlanPrice((_e = (_d = billingPlansQuery.data) === null || _d === void 0 ? void 0 : _d.plans) !== null && _e !== void 0 ? _e : [], planCycle);
-    const price = (_f = planPrice === null || planPrice === void 0 ? void 0 : planPrice.amount) !== null && _f !== void 0 ? _f : null;
-    const currency = (_g = planPrice === null || planPrice === void 0 ? void 0 : planPrice.currency) !== null && _g !== void 0 ? _g : null;
-    const renewalDate = formatDisplayDate((_h = subscriber === null || subscriber === void 0 ? void 0 : subscriber.currentPeriodEnd) !== null && _h !== void 0 ? _h : subscriber === null || subscriber === void 0 ? void 0 : subscriber.subscriptionEndDate);
-    const handleOpenRenewModal = () => {
-        if (!subscriptionBiId) {
-            return;
-        }
-        reactivateMutation.reset();
-        setIsRenewModalOpen(true);
-    };
-    const handleConfirmRenew = () => {
-        if (!subscriptionBiId || reactivateMutation.isPending) {
-            return;
-        }
-        reactivateMutation.mutate(subscriptionBiId);
-    };
-    useEffect(() => {
-        if (reactivateMutation.isSuccess) {
-            setIsRenewModalOpen(false);
-        }
-    }, [reactivateMutation.isSuccess]);
-    const isLoading = isSessionLoading || (sessionReady && subscriberQuery.isPending);
-    const isError = isSessionError || subscriberQuery.isError;
-    if (isLoading) {
-        return (_jsx("div", { className: "manage-page manage-page--loading d-flex justify-content-center align-items-center", children: _jsx(Spinner, { animation: "border", screenReaderText: formatMessage(messages['manage.loading']) }) }));
-    }
-    if (isError) {
-        return (_jsx("div", { className: "manage-page", children: _jsx(Container, { size: "lg", className: "manage-page__inner px-3 px-md-4 py-5", children: _jsx(Alert, { variant: "danger", children: formatMessage(messages['manage.error']) }) }) }));
-    }
-    const resolvedView = resolveSubscriptionView(subscriber);
-    const showRenewBanner = resolvedView === 'canceled_access';
-    const renewProps = {
-        onRenew: handleOpenRenewModal,
-    };
-    let subscriptionPanel;
-    switch (resolvedView) {
-        case 'active':
-            subscriptionPanel = _jsx(ActiveSubscription, { subscriber: subscriber });
-            break;
-        case 'canceled_access':
-            subscriptionPanel = (_jsx(CanceledSubscription, Object.assign({ subscriber: subscriber }, renewProps)));
-            break;
-        case 'canceled_expired':
-            subscriptionPanel = (_jsx(ResubscribeCard, { subscriber: subscriber, price: price, currency: currency }));
-            break;
-        case 'none':
-        default:
-            subscriptionPanel = (_jsx(BecomeSubscriber, { price: price, currency: currency }));
-            break;
-    }
-    return (_jsxs("div", { className: "manage-page", children: [showRenewBanner && (_jsx("div", { className: "manage-renew-banner py-5 mb-2", children: _jsx(Container, { size: "lg", className: "px-3 px-md-4", children: _jsx("div", { className: "manage-renew-banner__inner d-flex flex-column align-items-start", children: _jsx(RenewBanner, Object.assign({ expireDate: renewalDate }, renewProps)) }) }) })), _jsxs(Container, { size: "lg", className: "manage-page__inner px-3 px-md-4 py-5", children: [_jsx(OrderHistoryHeader, {}), _jsx(SubscriptionTabs, { activeTab: activeTab, onChange: setActiveTab }), activeTab === 'subscription' ? (_jsxs("div", { role: "tabpanel", id: "manage-tabpanel-subscription", "aria-labelledby": "manage-tab-subscription", children: [subscriptionPanel, _jsx(HelpFooter, {})] })) : (_jsxs("div", { role: "tabpanel", id: "manage-tabpanel-payment-history", "aria-labelledby": "manage-tab-payment-history", children: [_jsx(PaymentHistory, { subscriber: subscriber, invoices: (_j = paymentHistoryQuery.data) !== null && _j !== void 0 ? _j : [], isLoading: paymentHistoryQuery.isPending, isError: paymentHistoryQuery.isError }), _jsx(HelpFooter, {})] }))] }), _jsx(RenewSubscriptionModal, { isOpen: isRenewModalOpen, onClose: () => setIsRenewModalOpen(false), onConfirm: handleConfirmRenew, isConfirming: reactivateMutation.isPending, confirmError: reactivateMutation.isError, subscriptionBiId: subscriptionBiId, renewalDate: renewalDate, price: price, currency: currency, cycle: planCycle })] }));
-};
-export default ManageSubscriptionPage;
-//# sourceMappingURL=ManageSubscriptionPage.js.map

package/dist/manageSubscriptionPage/ManageSubscriptionPage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ManageSubscriptionPage.js","sourceRoot":"","sources":["../../src/manageSubscriptionPage/ManageSubscriptionPage.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,KAAK,EACL,SAAS,EACT,OAAO,GACR,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,kBAAkB,MAAM,qDAAqD,CAAC;AACrF,OAAO,gBAAgB,MAAM,iDAAiD,CAAC;AAC/E,OAAO,oBAAoB,EAAE,EAC3B,WAAW,GACZ,MAAM,yDAAyD,CAAC;AACjE,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAC7D,OAAO,kBAAkB,MAAM,qDAAqD,CAAC;AACrF,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,sBAAsB,MAAM,6DAA6D,CAAC;AACjG,OAAO,eAAe,MAAM,+CAA+C,CAAC;AAC5E,OAAO,gBAAgB,MAAM,iDAAiD,CAAC;AAC/E,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,iCAAiC,EACjC,aAAa,EACb,cAAc,GACf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,gCAAgC,EAAE,MAAM,iDAAiD,CAAC;AAEnG,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,sBAAsB,GAAa,GAAG,EAAE;;IAC5C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,cAAc,CAAC,CAAC;IACtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAClF,MAAM,eAAe,GAAG,oBAAoB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACnE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACrE,MAAM,kBAAkB,GAAG,iCAAiC,CAAC,MAAM,CAAC,CAAC;IACrE,MAAM,gBAAgB,GAAG,MAAA,MAAA,eAAe,CAAC,IAAI,0CAAE,gBAAgB,mCAAI,IAAI,CAAC;IACxE,MAAM,mBAAmB,GAAG,sBAAsB,CAChD,MAAM,EACN,YAAY,IAAI,SAAS,KAAK,iBAAiB,EAC/C,gCAAgC,CAAC,eAAe,CAAC,IAAI,CAAC,CACvD,CAAC;IAEF,MAAM,UAAU,GAAG,MAAA,eAAe,CAAC,IAAI,mCAAI,IAAI,CAAC;IAChD,MAAM,SAAS,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,YAAY,CAC5B,MAAA,MAAA,iBAAiB,CAAC,IAAI,0CAAE,KAAK,mCAAI,EAAE,EACnC,SAAS,CACV,CAAC;IACF,MAAM,KAAK,GAAG,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,mCAAI,IAAI,CAAC;IACxC,MAAM,QAAQ,GAAG,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mCAAI,IAAI,CAAC;IAC7C,MAAM,WAAW,GAAG,iBAAiB,CACnC,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,gBAAgB,mCAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,mBAAmB,CAChE,CAAC;IAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,kBAAkB,CAAC,KAAK,EAAE,CAAC;QAC3B,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,gBAAgB,IAAI,kBAAkB,CAAC,SAAS,EAAE,CAAC;YACtD,OAAO;QACT,CAAC;QACD,kBAAkB,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,kBAAkB,CAAC,SAAS,EAAE,CAAC;YACjC,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAC;IAEnC,MAAM,SAAS,GAAG,gBAAgB,IAAI,CAAC,YAAY,IAAI,eAAe,CAAC,SAAS,CAAC,CAAC;IAClF,MAAM,OAAO,GAAG,cAAc,IAAI,eAAe,CAAC,OAAO,CAAC;IAE1D,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,cAAK,SAAS,EAAC,mFAAmF,YAChG,KAAC,OAAO,IACN,SAAS,EAAC,QAAQ,EAClB,gBAAgB,EAAE,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,GAC3D,GACE,CACP,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,cAAK,SAAS,EAAC,aAAa,YAC1B,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sCAAsC,YACnE,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,YAAE,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAS,GAC/D,GACR,CACP,CAAC;IACJ,CAAC;IAED,MAAM,YAAY,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,YAAY,KAAK,iBAAiB,CAAC;IAC3D,MAAM,UAAU,GAAG;QACjB,OAAO,EAAE,oBAAoB;KAC9B,CAAC;IAEF,IAAI,iBAAkC,CAAC;IACvC,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,QAAQ;YACX,iBAAiB,GAAG,KAAC,kBAAkB,IAAC,UAAU,EAAE,UAAU,GAAI,CAAC;YACnE,MAAM;QACR,KAAK,iBAAiB;YACpB,iBAAiB,GAAG,CAClB,KAAC,oBAAoB,kBAAC,UAAU,EAAE,UAAU,IAAM,UAAU,EAAI,CACjE,CAAC;YACF,MAAM;QACR,KAAK,kBAAkB;YACrB,iBAAiB,GAAG,CAClB,KAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;YACF,MAAM;QACR,KAAK,MAAM,CAAC;QACZ;YACE,iBAAiB,GAAG,CAClB,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACvD,CAAC;YACF,MAAM;IACV,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aACzB,eAAe,IAAI,CAClB,cAAK,SAAS,EAAC,+BAA+B,YAC5C,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,YAC3C,cAAK,SAAS,EAAC,iEAAiE,YAC9E,KAAC,WAAW,kBACV,UAAU,EAAE,WAAW,IACnB,UAAU,EACd,GACE,GACI,GACR,CACP,EAED,MAAC,SAAS,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sCAAsC,aACnE,KAAC,kBAAkB,KAAG,EACtB,KAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,GAAI,EAEjE,SAAS,KAAK,cAAc,CAAC,CAAC,CAAC,CAC9B,eACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,8BAA8B,qBACjB,yBAAyB,aAExC,iBAAiB,EAClB,KAAC,UAAU,KAAG,IACV,CACP,CAAC,CAAC,CAAC,CACF,eACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,iCAAiC,qBACpB,4BAA4B,aAE5C,KAAC,cAAc,IACb,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,MAAA,mBAAmB,CAAC,IAAI,mCAAI,EAAE,EACxC,SAAS,EAAE,mBAAmB,CAAC,SAAS,EACxC,OAAO,EAAE,mBAAmB,CAAC,OAAO,GACpC,EACF,KAAC,UAAU,KAAG,IACV,CACP,IACS,EAEZ,KAAC,sBAAsB,IACrB,MAAM,EAAE,gBAAgB,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACzC,SAAS,EAAE,kBAAkB,EAC7B,YAAY,EAAE,kBAAkB,CAAC,SAAS,EAC1C,YAAY,EAAE,kBAAkB,CAAC,OAAO,EACxC,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,GAChB,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Alert,\n  Container,\n  Spinner,\n} from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport ActiveSubscription from '../components/ActiveSubscription/ActiveSubscription';\nimport BecomeSubscriber from '../components/BecomeSubscriber/BecomeSubscriber';\nimport CanceledSubscription, {\n  RenewBanner,\n} from '../components/CanceledSubscription/CanceledSubscription';\nimport HelpFooter from '../components/HelpFooter/HelpFooter';\nimport OrderHistoryHeader from '../components/OrderHistoryHeader/OrderHistoryHeader';\nimport PaymentHistory from '../components/PaymentHistory/PaymentHistory';\nimport RenewSubscriptionModal from '../components/RenewSubscriptionModal/RenewSubscriptionModal';\nimport ResubscribeCard from '../components/ResubscribeCard/ResubscribeCard';\nimport SubscriptionTabs from '../components/SubscriptionTabs/SubscriptionTabs';\nimport messages from '../components/messages';\nimport {\n  useBillingPlansQuery,\n  useIsSubscriberQuery,\n  usePaymentHistoryQuery,\n  useReactivateSubscriptionMutation,\n  useViaxClient,\n  useViaxSession,\n} from '../data/hooks/useManageQueries';\nimport { getPaymentHistorySubscriptionIds } from '../data/services/subscription/getPaymentHistory';\nimport type { ManageTab } from '../types';\nimport { getPlanPrice } from '../utils/billingDetails';\nimport { formatDisplayDate } from '../utils/formatDate';\nimport {\n  resolvePlanLabel,\n  resolveSubscriptionView,\n} from '../utils/subscriptionView';\n\nconst ManageSubscriptionPage: React.FC = () => {\n  const { formatMessage } = useIntl();\n  const [activeTab, setActiveTab] = useState<ManageTab>('subscription');\n  const [isRenewModalOpen, setIsRenewModalOpen] = useState(false);\n  const client = useViaxClient();\n  const { sessionReady, isSessionLoading, isSessionError } = useViaxSession(client);\n  const subscriberQuery = useIsSubscriberQuery(client, sessionReady);\n  const billingPlansQuery = useBillingPlansQuery(client, sessionReady);\n  const reactivateMutation = useReactivateSubscriptionMutation(client);\n  const subscriptionBiId = subscriberQuery.data?.subscriptionBiId ?? null;\n  const paymentHistoryQuery = usePaymentHistoryQuery(\n    client,\n    sessionReady && activeTab === 'payment-history',\n    getPaymentHistorySubscriptionIds(subscriberQuery.data),\n  );\n\n  const subscriber = subscriberQuery.data ?? null;\n  const planCycle = resolvePlanLabel(subscriber);\n  const planPrice = getPlanPrice(\n    billingPlansQuery.data?.plans ?? [],\n    planCycle,\n  );\n  const price = planPrice?.amount ?? null;\n  const currency = planPrice?.currency ?? null;\n  const renewalDate = formatDisplayDate(\n    subscriber?.currentPeriodEnd ?? subscriber?.subscriptionEndDate,\n  );\n\n  const handleOpenRenewModal = () => {\n    if (!subscriptionBiId) {\n      return;\n    }\n    reactivateMutation.reset();\n    setIsRenewModalOpen(true);\n  };\n\n  const handleConfirmRenew = () => {\n    if (!subscriptionBiId || reactivateMutation.isPending) {\n      return;\n    }\n    reactivateMutation.mutate(subscriptionBiId);\n  };\n\n  useEffect(() => {\n    if (reactivateMutation.isSuccess) {\n      setIsRenewModalOpen(false);\n    }\n  }, [reactivateMutation.isSuccess]);\n\n  const isLoading = isSessionLoading || (sessionReady && subscriberQuery.isPending);\n  const isError = isSessionError || subscriberQuery.isError;\n\n  if (isLoading) {\n    return (\n      <div className=\"manage-page manage-page--loading d-flex justify-content-center align-items-center\">\n        <Spinner\n          animation=\"border\"\n          screenReaderText={formatMessage(messages['manage.loading'])}\n        />\n      </div>\n    );\n  }\n\n  if (isError) {\n    return (\n      <div className=\"manage-page\">\n        <Container size=\"lg\" className=\"manage-page__inner px-3 px-md-4 py-5\">\n          <Alert variant=\"danger\">{formatMessage(messages['manage.error'])}</Alert>\n        </Container>\n      </div>\n    );\n  }\n\n  const resolvedView = resolveSubscriptionView(subscriber);\n  const showRenewBanner = resolvedView === 'canceled_access';\n  const renewProps = {\n    onRenew: handleOpenRenewModal,\n  };\n\n  let subscriptionPanel: React.ReactNode;\n  switch (resolvedView) {\n    case 'active':\n      subscriptionPanel = <ActiveSubscription subscriber={subscriber} />;\n      break;\n    case 'canceled_access':\n      subscriptionPanel = (\n        <CanceledSubscription subscriber={subscriber} {...renewProps} />\n      );\n      break;\n    case 'canceled_expired':\n      subscriptionPanel = (\n        <ResubscribeCard\n          subscriber={subscriber}\n          price={price}\n          currency={currency}\n        />\n      );\n      break;\n    case 'none':\n    default:\n      subscriptionPanel = (\n        <BecomeSubscriber price={price} currency={currency} />\n      );\n      break;\n  }\n\n  return (\n    <div className=\"manage-page\">\n      {showRenewBanner && (\n        <div className=\"manage-renew-banner py-5 mb-2\">\n          <Container size=\"lg\" className=\"px-3 px-md-4\">\n            <div className=\"manage-renew-banner__inner d-flex flex-column align-items-start\">\n              <RenewBanner\n                expireDate={renewalDate}\n                {...renewProps}\n              />\n            </div>\n          </Container>\n        </div>\n      )}\n\n      <Container size=\"lg\" className=\"manage-page__inner px-3 px-md-4 py-5\">\n        <OrderHistoryHeader />\n        <SubscriptionTabs activeTab={activeTab} onChange={setActiveTab} />\n\n        {activeTab === 'subscription' ? (\n          <div\n            role=\"tabpanel\"\n            id=\"manage-tabpanel-subscription\"\n            aria-labelledby=\"manage-tab-subscription\"\n          >\n            {subscriptionPanel}\n            <HelpFooter />\n          </div>\n        ) : (\n          <div\n            role=\"tabpanel\"\n            id=\"manage-tabpanel-payment-history\"\n            aria-labelledby=\"manage-tab-payment-history\"\n          >\n            <PaymentHistory\n              subscriber={subscriber}\n              invoices={paymentHistoryQuery.data ?? []}\n              isLoading={paymentHistoryQuery.isPending}\n              isError={paymentHistoryQuery.isError}\n            />\n            <HelpFooter />\n          </div>\n        )}\n      </Container>\n\n      <RenewSubscriptionModal\n        isOpen={isRenewModalOpen}\n        onClose={() => setIsRenewModalOpen(false)}\n        onConfirm={handleConfirmRenew}\n        isConfirming={reactivateMutation.isPending}\n        confirmError={reactivateMutation.isError}\n        subscriptionBiId={subscriptionBiId}\n        renewalDate={renewalDate}\n        price={price}\n        currency={currency}\n        cycle={planCycle}\n      />\n    </div>\n  );\n};\n\nexport default ManageSubscriptionPage;\n"]}