npm - @burdenoff/microfe-billing - Versions diffs - 2026.731.1 → 2026.802.1 - Mend

@burdenoff/microfe-billing 2026.731.1 → 2026.802.1

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 (50) hide show

package/dist/billing/modules/subscriptions/pages/SubscriptionDetailPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubscriptionDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/SubscriptionDetailPage.tsx"],"sourcesContent":["/*\n Subscriptions Module - Subscription Detail Page\n * Displays detailed information about a single subscription\n /\n\nimport { type FC, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useSubscription, useSubscriptionMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useGetDefaultBillingAccountDashboardQuery } from '../../../../generated/global-operations';\nimport { useWorkspaceQuotaOverview } from '../../usage/hooks/useUsage';\nimport {\n formatCurrency,\n formatDate,\n formatPlanDuration,\n formatSubscriptionStatus,\n formatPercentage,\n formatBytes,\n} from '../../../shared/utils/format';\nimport { getSubscriptionStatusColor, getQuotaProgressColor } from '../../../shared/utils/status';\nimport { Card, StatusPill, ProgressBar } from '../../../shared/ui';\nimport {\n CTAOverflowMenu,\n EmphasisPanel,\n PagePurpose,\n NextSteps,\n type CTAAction,\n type NextStep,\n} from '@burdenoff/fe-libs/ui';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport type {\n SubscriptionStatus,\n QuotaAssignment,\n AddonSubscription,\n SubscriptionHistory,\n Transaction,\n} from '../../../shared/types';\nimport { PricingModel } from '../../../shared/types';\nimport { ManageSeatsModal } from '../components/ManageSeatsModal';\nimport {\n WorkspaceQuotaAssignmentModal,\n type WorkspaceQuotaToAssign,\n} from '../../checkout/components/WorkspaceQuotaAssignmentModal';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { WorkspaceQuotaOverviewItem } from '../../usage/hooks/useUsage';\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction formatQuotaDisplayName(name: string, context?: Record<string, unknown> \| null): string {\n if (context?.displayName && typeof context.displayName === 'string') return context.displayName;\n if (context?.label && typeof context.label === 'string') return context.label;\n const parts = name.split('.');\n const meaningful = parts.length > 1 ? parts.slice(1) : parts;\n return meaningful\n .map((p) => p.replace(/_/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase()))\n .join(' ');\n}\n\nfunction formatResetPeriod(period: string): string {\n if (period === 'DAILY') return 'Resets daily';\n if (period === 'MONTHLY') return 'Resets monthly';\n return '';\n}\n\n// ============================================================================\n// Page Component\n// ============================================================================\n\nexport const SubscriptionDetailPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const { subscriptionId } = useParams<{ subscriptionId: string }>();\n const navigateTo = useBillingNavigate();\n const { emit } = useBillingEventEmitter();\n const { orgId } = useBilling();\n const permissions = useBillingPermissions();\n const { selectedAccountId } = useBillingAccountSelection({\n orgId,\n syncFromUrl: true,\n urlParamName: 'billingAccountId',\n });\n const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n fetchPolicy: 'cache-first',\n });\n const billingAccountId =\n selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n const { subscription, isLoading, error, refetch } = useSubscription(\n subscriptionId,\n billingAccountId\n );\n const { cancelSubscription, isCanceling, updateSubscriptionSeats, isUpdatingSeats } =\n useSubscriptionMutations();\n\n const { workspaceId } = useBilling();\n\n // Workspace quota overview — used to detect if quotas are already active and show live usage\n const { overview: wsQuotaOverview, refetch: refetchWsOverview } = useWorkspaceQuotaOverview(\n workspaceId ?? undefined\n );\n\n // Modal state\n const [showCancelModal, setShowCancelModal] = useState(false);\n const [showManageSeatsModal, setShowManageSeatsModal] = useState(false);\n const [showAssignWorkspaceModal, setShowAssignWorkspaceModal] = useState(false);\n const [cancelReason, setCancelReason] = useState('');\n const [cancelError, setCancelError] = useState<string \| null>(null);\n\n // Handle cancel subscription\n const handleCancelSubscription = async () => {\n if (!subscription) return;\n\n setCancelError(null);\n try {\n await cancelSubscription({\n billingAccountId: billingAccountId ?? subscription.billingAccountId,\n subscriptionId: subscription.id,\n reason: cancelReason \|\| 'User requested cancellation',\n });\n emit('billing.subscription.cancelled', {\n route: '/billing/subscriptions',\n entityId: subscription.id,\n source: 'subscription-detail',\n reason: cancelReason \|\| 'User requested cancellation',\n });\n setShowCancelModal(false);\n setCancelReason('');\n await refetch();\n } catch (err) {\n setCancelError(err instanceof Error ? err.message : 'Failed to cancel subscription');\n }\n };\n\n // Permission check\n if (!permissions.canViewSubscriptions) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center\">\n <svg\n className=\"size-6 text-text-secondary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n />\n </svg>\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n <p className=\"text-sm text-text-secondary max-w-sm\">\n You don't have permission to view this subscription.\n </p>\n </div>\n </div>\n );\n }\n\n // Loading state\n if (isLoading) {\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n <div className=\"flex items-center gap-4\">\n <div className=\"size-10 bg-bg-sunken animate-pulse rounded-button\" />\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n </div>\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <div className=\"lg:col-span-2 space-y-6\">\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 space-y-4\">\n <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n // Error state\n if (error \|\| !subscription) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n <svg\n className=\"size-6 text-status-error-text\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.subscriptions.notFound', 'Subscription not found')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {error?.message \|\| 'The subscription you are looking for does not exist.'}\n </p>\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Back to Subscriptions\n </button>\n </div>\n </div>\n );\n }\n\n const plan = subscription.plan;\n const quotas = subscription.quotas \|\| [];\n const addons = subscription.addonSubscriptions \|\| [];\n const transactions = subscription.transactions \|\| [];\n const history = subscription.history \|\| [];\n const statusColor = getSubscriptionStatusColor(subscription.status);\n const isActive = subscription.status === ('active' as SubscriptionStatus);\n\n // Workspace quota assignments that belong to this subscription\n const wsAssignmentsForSub = wsQuotaOverview.filter(\n (item) => item.assignment.subscriptionId === subscription.id && item.assignment.isActive\n );\n // Assigned if subscription field is set OR workspace assignments already exist\n const isAssignedToWorkspace =\n !!subscription.assignedWorkspaceId \|\| wsAssignmentsForSub.length > 0;\n\n // Calculate days remaining\n const endDate = new Date(subscription.endDate);\n const startDate = new Date(subscription.startDate);\n const now = new Date();\n const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 60 * 60 * 24));\n const daysRemaining = Math.max(\n 0,\n Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))\n );\n const progressPercentage = Math.round(((totalDays - daysRemaining) / totalDays) * 100);\n\n // Recommended next actions for this subscription\n const nextSteps: NextStep[] = [\n ...(isActive && permissions.canUpdateSubscription\n ? [\n {\n id: 'change-plan',\n label: 'Review or change your plan',\n description: 'Upgrade, downgrade, or compare what each tier includes.',\n onClick: () =>\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${subscription.id}/upgrade`,\n billingAccountId ?? subscription.billingAccountId\n )\n ),\n },\n ]\n : []),\n ...(isActive && workspaceId && !isAssignedToWorkspace\n ? [\n {\n id: 'activate-workspace',\n label: 'Activate quotas for your workspace',\n description: 'Turn on the workspace-scoped limits included in this plan.',\n onClick: () => setShowAssignWorkspaceModal(true),\n },\n ]\n : []),\n {\n id: 'track-usage',\n label: 'Track your usage',\n description: 'See how much of your included quota you have consumed.',\n onClick: () =>\n navigateTo(\n withBillingAccountId('/usage', billingAccountId ?? subscription.billingAccountId)\n ),\n },\n {\n id: 'view-invoices',\n label: 'Review invoices & payments',\n description: 'Check what has been billed for this subscription.',\n onClick: () =>\n navigateTo(\n withBillingAccountId('/invoices', billingAccountId ?? subscription.billingAccountId)\n ),\n },\n ];\n\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n {/* Header /}\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n <div className=\"flex items-start gap-4\">\n <button\n type=\"button\"\n aria-label=\"Back to subscriptions\"\n onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200\"\n >\n <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M15 19l-7-7 7-7\"\n />\n </svg>\n </button>\n <div>\n <div className=\"flex items-center gap-3 flex-wrap\">\n <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n {plan?.name \|\| 'Subscription'}\n </h1>\n <StatusPill status={statusColor} dot pulse={isActive}>\n {formatSubscriptionStatus(subscription.status)}\n </StatusPill>\n </div>\n <p className=\"text-sm text-text-secondary mt-1\">\n {plan?.pricingModel === PricingModel.PER_SEAT && plan.pricePerSeat\n ? `${formatCurrency(plan.pricePerSeat, plan.currency)} / seat / ${formatPlanDuration(plan.duration)} · ${subscription.seatCount ?? plan.minSeats ?? 1} seats = ${formatCurrency(plan.pricePerSeat (subscription.seatCount ?? plan.minSeats ?? 1), plan.currency)} / ${formatPlanDuration(plan.duration)}`\n : plan\n ? `${formatCurrency(plan.price, plan.currency)} / ${formatPlanDuration(plan.duration)}`\n : 'Unknown plan'}\n </p>\n <PagePurpose className=\"mt-3\">\n {tr(\n 'billing.subscriptions.detailPurpose',\n 'Everything about this subscription in one view — its billing period, the quotas and add-ons it includes, recent charges and its full status history. Use it to track what you are getting, activate workspace quotas, change your plan, or cancel.'\n )}\n </PagePurpose>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <CTAOverflowMenu\n primary={\n isActive && permissions.canUpdateSubscription\n ? {\n label: 'Change Plan',\n onSelect: () =>\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${subscription.id}/upgrade`,\n billingAccountId ?? subscription.billingAccountId\n )\n ),\n }\n : undefined\n }\n actions={\n [\n ...(isActive &&\n permissions.canUpdateSubscription &&\n plan?.pricingModel === PricingModel.PER_SEAT\n ? [\n {\n label: 'Manage Seats',\n onSelect: () => setShowManageSeatsModal(true),\n },\n ]\n : []),\n ...(isActive && permissions.canCancelSubscription && !subscription.canceledAt\n ? [\n {\n label: isCanceling ? 'Canceling…' : 'Cancel Subscription',\n onSelect: () => setShowCancelModal(true),\n disabled: isCanceling,\n intent: 'destructive' as const,\n },\n ]\n : []),\n ] satisfies CTAAction[]\n }\n />\n {subscription.canceledAt && (\n <span className=\"px-4 py-2 text-sm font-medium text-status-warning-text bg-status-warning-bg-subtle rounded-button\">\n Cancellation Scheduled\n </span>\n )}\n </div>\n </div>\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/* Main Content /}\n <div className=\"lg:col-span-2 space-y-6\">\n {/ Period Progress — primary status emphasis zone /}\n {isActive && (\n <EmphasisPanel className=\"p-5\">\n <div className=\"flex items-center justify-between mb-4\">\n <h2 className=\"text-base font-semibold text-text-primary\">Current Period</h2>\n <span className=\"text-sm text-text-secondary tabular-nums\">\n {daysRemaining} days remaining\n </span>\n </div>\n <div className=\"space-y-2\">\n <ProgressBar\n value={progressPercentage}\n status=\"primary\"\n size=\"md\"\n aria-label=\"Billing period progress\"\n />\n <div className=\"flex items-center justify-between text-sm text-text-secondary\">\n <span>{formatDate(subscription.startDate, 'short')}</span>\n <span>{formatDate(subscription.endDate, 'short')}</span>\n </div>\n </div>\n </EmphasisPanel>\n )}\n\n {/ Plan Quotas /}\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">\n Plan Quotas\n {quotas.length > 0 && (\n <span className=\"ml-2 text-sm font-normal text-text-muted tabular-nums\">\n ({quotas.length})\n </span>\n )}\n </h2>\n <p className=\"text-sm text-text-secondary mt-0.5\">Limits included in your plan</p>\n </div>\n <div className=\"p-5\">\n {quotas.length === 0 ? (\n <p className=\"text-sm text-text-secondary\">\n No quotas assigned to this subscription.\n </p>\n ) : (\n <div className=\"space-y-3\">\n {quotas.map((quota) => (\n <QuotaUsageItem key={quota.id} quota={quota} />\n ))}\n </div>\n )}\n </div>\n </Card>\n\n {/ Workspace Quotas /}\n {isActive && workspaceId && (\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle flex items-center justify-between gap-4\">\n <div>\n <h2 className=\"text-base font-semibold text-text-primary\">Workspace Quotas</h2>\n <p className=\"text-sm text-text-secondary mt-0.5\">\n Active limits for your workspace\n </p>\n </div>\n {isAssignedToWorkspace ? (\n <StatusPill status=\"success\" dot>\n Active\n </StatusPill>\n ) : (\n <button\n type=\"button\"\n onClick={() => setShowAssignWorkspaceModal(true)}\n className=\"px-3 py-1.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Activate for Workspace\n </button>\n )}\n </div>\n\n <div className=\"p-5\">\n {isAssignedToWorkspace ? (\n wsAssignmentsForSub.length > 0 ? (\n <div className=\"space-y-3\">\n {wsAssignmentsForSub.map((item) => (\n <WorkspaceQuotaItem key={item.assignment.id} item={item} />\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-secondary\">\n Quotas are activated on workspace{' '}\n <span className=\"font-mono text-xs text-text-primary bg-bg-sunken/60 rounded px-1.5 py-0.5\">\n {subscription.assignedWorkspaceId}\n </span>\n . Usage data will appear here once quotas are consumed.\n </p>\n )\n ) : (\n <div className=\"flex items-start gap-3\">\n <div className=\"size-8 rounded-full bg-status-warning-bg-subtle flex items-center justify-center shrink-0 mt-0.5\">\n <svg\n className=\"size-4 text-status-warning-text\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n </div>\n <div>\n <p className=\"text-sm font-medium text-text-primary\">\n Workspace quotas not activated yet\n </p>\n <p className=\"text-sm text-text-secondary mt-0.5\">\n Click{' '}\n <button\n type=\"button\"\n onClick={() => setShowAssignWorkspaceModal(true)}\n className=\"text-text-link hover:underline font-medium\"\n >\n Activate for Workspace\n </button>{' '}\n to enable the workspace-scoped limits included in this plan.\n </p>\n </div>\n </div>\n )}\n </div>\n\n {showAssignWorkspaceModal && (\n <WorkspaceQuotaAssignmentModal\n billingAccountId={billingAccountId ?? subscription.billingAccountId}\n subscriptionId={subscription.id}\n quotas={[] as WorkspaceQuotaToAssign[]}\n workspaces={[{ id: workspaceId, name: 'Current workspace' }]}\n currentWorkspaceId={workspaceId}\n onAssigned={() => {\n setShowAssignWorkspaceModal(false);\n void refetch();\n void refetchWsOverview();\n }}\n onSkip={() => setShowAssignWorkspaceModal(false)}\n />\n )}\n </Card>\n )}\n\n {/ Addons /}\n {addons.length > 0 && (\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">\n Addons{' '}\n <span className=\"text-sm font-normal text-text-muted tabular-nums\">\n ({addons.length})\n </span>\n </h2>\n </div>\n <div className=\"p-5\">\n <div className=\"space-y-3\">\n {addons.map((addonSub) => (\n <AddonItem key={addonSub.id} addonSubscription={addonSub} />\n ))}\n </div>\n </div>\n </Card>\n )}\n\n {/ Recent Transactions /}\n {transactions.length > 0 && (\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">Recent Transactions</h2>\n </div>\n <div className=\"divide-y divide-border-subtle\">\n {transactions.slice(0, 5).map((transaction) => (\n <TransactionItem key={transaction.id} transaction={transaction} />\n ))}\n </div>\n {transactions.length > 5 && (\n <div className=\"p-4 text-center border-t border-border-subtle\">\n <button type=\"button\" className=\"text-sm text-text-link hover:underline\">\n View all transactions\n </button>\n </div>\n )}\n </Card>\n )}\n </div>\n\n {/ Sidebar /}\n <div className=\"space-y-6 lg:sticky lg:top-6 lg:self-start\">\n {/ Next steps guidance /}\n <NextSteps storageKey=\"billing-subscription-detail\" steps={nextSteps} />\n\n {/ Subscription Details /}\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">Details</h2>\n </div>\n <div className=\"p-5 space-y-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Subscription ID</p>\n <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">\n {subscription.id}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Plan</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{plan?.name \|\| 'Unknown'}</p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Billing Account</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {subscription.billingAccount?.name \|\| 'Unknown'}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Start Date</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatDate(subscription.startDate)}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">End Date</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatDate(subscription.endDate)}\n </p>\n </div>\n {subscription.nextBillingDate && (\n <div>\n <p className=\"text-sm text-text-secondary\">Next Billing</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatDate(subscription.nextBillingDate)}\n </p>\n </div>\n )}\n <div>\n <p className=\"text-sm text-text-secondary\">Auto Renewal</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {subscription.autoRenewal ? 'Enabled' : 'Disabled'}\n </p>\n </div>\n {subscription.paymentGateway && (\n <div>\n <p className=\"text-sm text-text-secondary\">Payment Gateway</p>\n <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n {subscription.paymentGateway}\n </p>\n </div>\n )}\n </div>\n </Card>\n\n {/ History /}\n {history.length > 0 && (\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">History</h2>\n </div>\n <div className=\"p-5\">\n <div className=\"space-y-3\">\n {history.slice(0, 5).map((item) => (\n <HistoryItem key={item.id} item={item} />\n ))}\n </div>\n </div>\n </Card>\n )}\n </div>\n </div>\n\n {/ Manage Seats Modal /}\n {showManageSeatsModal && subscription && (\n <ManageSeatsModal\n subscription={subscription}\n onClose={() => setShowManageSeatsModal(false)}\n onConfirm={async (seatCount) => {\n await updateSubscriptionSeats({ subscriptionId: subscription.id, seatCount });\n await refetch();\n }}\n isLoading={isUpdatingSeats}\n />\n )}\n\n {/ Cancel Subscription Modal /}\n {showCancelModal && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n <div\n className=\"absolute inset-0 bg-overlay-scrim\"\n onClick={() => setShowCancelModal(false)}\n />\n <div\n className=\"relative bg-bg-elevated border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] w-full max-w-md mx-4 p-6\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"cancel-subscription-title\"\n >\n <h3\n id=\"cancel-subscription-title\"\n className=\"text-lg font-semibold text-text-primary mb-2\"\n >\n Cancel Subscription\n </h3>\n <p className=\"text-sm text-text-secondary mb-4\">\n Are you sure you want to cancel this subscription? Your subscription will remain\n active until{' '}\n <span className=\"font-medium text-text-primary\">\n {formatDate(subscription.endDate)}\n </span>\n , but will not renew automatically.\n </p>\n\n <div className=\"mb-4\">\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Reason for cancellation (optional)\n </label>\n <textarea\n value={cancelReason}\n onChange={(e) => setCancelReason(e.target.value)}\n placeholder=\"Please share why you're canceling...\"\n className=\"w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent resize-none\"\n rows={3}\n />\n </div>\n\n {cancelError && (\n <div className=\"mb-4 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-card\">\n <p className=\"text-sm text-status-error-text\">{cancelError}</p>\n </div>\n )}\n\n <div className=\"flex items-center justify-end gap-3\">\n <button\n type=\"button\"\n onClick={() => {\n setShowCancelModal(false);\n setCancelReason('');\n setCancelError(null);\n }}\n className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n >\n Keep Subscription\n </button>\n <button\n type=\"button\"\n onClick={handleCancelSubscription}\n disabled={isCanceling}\n className=\"px-4 py-2 text-sm font-medium bg-action-danger-bg text-action-danger-text rounded-button hover:bg-action-danger-bgHover transition-colors duration-200 disabled:opacity-50\"\n >\n {isCanceling ? 'Canceling...' : 'Confirm Cancellation'}\n </button>\n </div>\n </div>\n </div>\n )}\n </div>\n );\n};\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\nconst QuotaUsageItem: FC<{ quota: QuotaAssignment }> = ({ quota }) => {\n const context = quota.context as\n \| { displayName?: string; label?: string; description?: string }\n \| null\n \| undefined;\n const displayName = formatQuotaDisplayName(quota.name, context as Record<string, unknown> \| null);\n const description =\n context?.description && typeof context.description === 'string' ? context.description : null;\n const limits = quota.limits as { value?: number } \| null;\n const limit = limits?.value ?? 0;\n const used = quota.currentUsageSum ?? 0;\n const percentage = limit > 0 ? Math.min(100, (used / limit) 100) : 0;\n const isBytes = quota.name.includes('bytes') \|\| quota.name.includes('storage');\n const isPooled = quota.quotaType === 'POOLED';\n\n return (\n <div className=\"p-4 rounded-card border border-border-seam bg-bg-surface\">\n <div className=\"flex items-start justify-between gap-4 mb-2\">\n <div className=\"min-w-0\">\n <p className=\"font-medium text-text-primary truncate\">{displayName}</p>\n {description && (\n <p className=\"text-xs text-text-secondary mt-0.5 line-clamp-2\">{description}</p>\n )}\n </div>\n <span className=\"text-sm font-medium text-text-primary shrink-0 tabular-nums\">\n {isBytes ? formatBytes(used) : used.toLocaleString()}\n {' / '}\n {limit > 0 ? (isBytes ? formatBytes(limit) : limit.toLocaleString()) : '∞'}\n </span>\n </div>\n\n {limit > 0 && (\n <div className=\"h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2\">\n <div\n className={`h-full rounded-full transition-all duration-300 ${getQuotaProgressColor(percentage)}`}\n style={{ width: `${percentage}%` }}\n />\n </div>\n )}\n\n <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n <span className=\"px-1.5 py-0.5 rounded bg-bg-sunken font-medium\">\n {isPooled ? 'Shared' : 'Per Workspace'}\n </span>\n <div className=\"flex items-center gap-3\">\n {quota.endtime && <span>Expires {formatDate(quota.endtime, 'short')}</span>}\n {limit > 0 && (\n <span\n className={\n percentage >= 90\n ? 'text-status-error-text font-medium'\n : percentage >= 70\n ? 'text-status-warning-text font-medium'\n : ''\n }\n >\n {formatPercentage(percentage)} used\n </span>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nconst WorkspaceQuotaItem: FC<{ item: WorkspaceQuotaOverviewItem }> = ({ item }) => {\n const { assignment, effectiveUsed, usagePercentage } = item;\n const displayName = formatQuotaDisplayName(assignment.quotaName);\n const hasLimit = !assignment.noLimit && assignment.limit !== null;\n const limit = assignment.limit ?? 0;\n const isBytes =\n assignment.quotaName.includes('bytes') \|\| assignment.quotaName.includes('storage');\n const resetLabel = formatResetPeriod(assignment.resetPeriod);\n\n return (\n <div className=\"p-4 rounded-card border border-border-seam bg-bg-surface\">\n <div className=\"flex items-start justify-between gap-4 mb-2\">\n <div className=\"min-w-0\">\n <p className=\"font-medium text-text-primary truncate\">{displayName}</p>\n <p className=\"text-xs text-text-secondary mt-0.5\">\n {assignment.quotaMode === 'pooled' ? 'Pooled across workspaces' : 'Dedicated'}\n {resetLabel && ` · ${resetLabel}`}\n </p>\n </div>\n <span className=\"text-sm font-medium text-text-primary shrink-0 tabular-nums\">\n {isBytes ? formatBytes(effectiveUsed) : effectiveUsed.toLocaleString()}\n {' / '}\n {assignment.noLimit\n ? '∞'\n : hasLimit\n ? isBytes\n ? formatBytes(limit)\n : limit.toLocaleString()\n : '∞'}\n </span>\n </div>\n\n {hasLimit && (\n <div className=\"h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2\">\n <div\n className={`h-full rounded-full transition-all duration-300 ${getQuotaProgressColor(usagePercentage)}`}\n style={{ width: `${Math.min(100, usagePercentage)}%` }}\n />\n </div>\n )}\n\n <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n <span>Since {formatDate(assignment.createdAt, 'short')}</span>\n {hasLimit && (\n <span\n className={\n usagePercentage >= 90\n ? 'text-status-error-text font-medium'\n : usagePercentage >= 70\n ? 'text-status-warning-text font-medium'\n : ''\n }\n >\n {formatPercentage(usagePercentage)} used\n </span>\n )}\n </div>\n </div>\n );\n};\n\nconst AddonItem: FC<{ addonSubscription: AddonSubscription }> = ({ addonSubscription }) => {\n const addon = addonSubscription.addon;\n return (\n <div className=\"flex items-center justify-between p-3 rounded-card border border-border-seam bg-bg-sunken\">\n <div>\n <p className=\"font-medium text-text-primary\">{addon?.name \|\| 'Unknown Addon'}</p>\n <p className=\"text-sm text-text-secondary\">Qty: {addonSubscription.quantity}</p>\n </div>\n {addon && (\n <p className=\"text-sm font-medium text-text-primary tabular-nums\">\n {formatCurrency(addon.price * addonSubscription.quantity, addon.currency)}\n </p>\n )}\n </div>\n );\n};\n\nconst TransactionItem: FC<{ transaction: Transaction }> = ({ transaction }) => {\n return (\n <div className=\"flex items-center justify-between px-5 py-4 hover:bg-bg-sunken transition-colors\">\n <div>\n <p className=\"font-medium text-text-primary capitalize\">{transaction.type}</p>\n <p className=\"text-sm text-text-secondary\">{formatDate(transaction.createdAt, 'short')}</p>\n </div>\n <div className=\"text-right\">\n <p\n className={`font-medium tabular-nums ${transaction.type === 'refund' ? 'text-status-error-text' : 'text-text-primary'}`}\n >\n {transaction.type === 'refund' ? '-' : ''}\n {formatCurrency(transaction.amount, transaction.currency)}\n </p>\n <p className=\"text-sm text-text-secondary capitalize\">{transaction.status}</p>\n </div>\n </div>\n );\n};\n\nconst HistoryItem: FC<{ item: SubscriptionHistory }> = ({ item }) => {\n return (\n <div className=\"flex items-start gap-3\">\n <div className=\"size-2 rounded-full bg-text-muted mt-2 shrink-0\" />\n <div>\n <p className=\"text-sm text-text-primary\">\n <span className=\"capitalize\">{item.fromStatus}</span>\n {' → '}\n <span className=\"capitalize font-medium\">{item.toStatus}</span>\n </p>\n {item.reason && <p className=\"text-xs text-text-secondary mt-0.5\">{item.reason}</p>}\n <p className=\"text-xs text-text-secondary mt-0.5\">{formatDate(item.createdAt, 'short')}</p>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAS,EAAuB,GAAc,GAAkD;AAC9F,KAAI,GAAS,eAAe,OAAO,EAAQ,eAAgB,SAAU,QAAO,EAAQ;AACpF,KAAI,GAAS,SAAS,OAAO,EAAQ,SAAU,SAAU,QAAO,EAAQ;CACxE,IAAM,IAAQ,EAAK,MAAM,IAAI;AAE7B,SADmB,EAAM,SAAS,IAAI,EAAM,MAAM,EAAE,GAAG,GAEpD,KAAK,MAAM,EAAE,QAAQ,MAAM,IAAI,CAAC,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC,CAAC,CACzE,KAAK,IAAI;;AAGd,SAAS,EAAkB,GAAwB;AAGjD,QAFI,MAAW,UAAgB,iBAC3B,MAAW,YAAkB,mBAC1B;;AAOT,IAAa,UAAmC;CAC9C,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,EAAE,sBAAmB,IAAuC,EAC5D,IAAa,IAAoB,EACjC,EAAE,YAAS,GAAwB,EACnC,EAAE,aAAU,GAAY,EACxB,IAAc,IAAuB,EACrC,EAAE,0BAAsB,EAA2B;EACvD;EACA,aAAa;EACb,cAAc;EACf,CAAC,EACI,EAAE,MAAM,OAA8B,EAA0C,EACpF,aAAa,eACd,CAAC,EACI,IACJ,MAAqB,IAA2B,0BAA0B,MAAM,KAAA,GAC5E,EAAE,iBAAc,eAAW,UAAO,eAAY,EAClD,GACA,EACD,EACK,EAAE,uBAAoB,gBAAa,4BAAyB,uBAChE,IAA0B,EAEtB,EAAE,mBAAgB,GAAY,EAG9B,EAAE,UAAU,GAAiB,SAAS,OAAsB,GAChE,KAAe,KAAA,EAChB,EAGK,CAAC,IAAiB,KAAsB,EAAS,GAAM,EACvD,CAAC,IAAsB,KAA2B,EAAS,GAAM,EACjE,CAAC,IAA0B,KAA+B,EAAS,GAAM,EACzE,CAAC,GAAc,KAAmB,EAAS,GAAG,EAC9C,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAG7D,KAA2B,YAAY;AACtC,SAEL;KAAe,KAAK;AACpB,OAAI;AAcF,IAbA,MAAM,EAAmB;KACvB,kBAAkB,KAAoB,EAAa;KACnD,gBAAgB,EAAa;KAC7B,QAAQ,KAAgB;KACzB,CAAC,EACF,EAAK,kCAAkC;KACrC,OAAO;KACP,UAAU,EAAa;KACvB,QAAQ;KACR,QAAQ,KAAgB;KACzB,CAAC,EACF,EAAmB,GAAM,EACzB,EAAgB,GAAG,EACnB,MAAM,GAAS;YACR,GAAK;AACZ,MAAe,aAAe,QAAQ,EAAI,UAAU,gCAAgC;;;;AAKxF,KAAI,CAAC,EAAY,qBACf,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eAA0C;KAAkB,CAAA;IAC1E,kBAAC,KAAD;KAAG,WAAU;eAAuC;KAEhD,CAAA;IACA;;EACF,CAAA;AAKV,KAAI,GACF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAK,WAAU,qDAAsD,CAAA,EACrE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,CAC3D;MACN,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,EAC/D,kBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA,CAC7D;;IACF,CAAA;GACF,CAAA,CACF;;AAKV,KAAI,KAAS,CAAC,EACZ,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,kCAAkC,yBAAyB;KAC5D,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,GAAO,WAAW;KACjB,CAAA;IACJ,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,EAAqB,kBAAkB,EAAiB,CAAC;KACnF,WAAU;eACX;KAEQ,CAAA;IACL;;EACF,CAAA;CAIV,IAAM,IAAO,EAAa,MACpB,IAAS,EAAa,UAAU,EAAE,EAClC,IAAS,EAAa,sBAAsB,EAAE,EAC9C,IAAe,EAAa,gBAAgB,EAAE,EAC9C,IAAU,EAAa,WAAW,EAAE,EACpC,KAAc,GAA2B,EAAa,OAAO,EAC7D,IAAW,EAAa,WAAY,UAGpC,IAAsB,EAAgB,QACzC,MAAS,EAAK,WAAW,mBAAmB,EAAa,MAAM,EAAK,WAAW,SACjF,EAEK,IACJ,CAAC,CAAC,EAAa,uBAAuB,EAAoB,SAAS,GAG/D,IAAU,IAAI,KAAK,EAAa,QAAQ,EACxC,KAAY,IAAI,KAAK,EAAa,UAAU,EAC5C,qBAAM,IAAI,MAAM,EAChB,IAAY,KAAK,MAAM,EAAQ,SAAS,GAAG,GAAU,SAAS,KAAK,MAAO,KAAK,KAAK,IAAI,EACxF,IAAgB,KAAK,IACzB,GACA,KAAK,MAAM,EAAQ,SAAS,GAAG,GAAI,SAAS,KAAK,MAAO,KAAK,KAAK,IAAI,CACvE,EACK,KAAqB,KAAK,OAAQ,IAAY,KAAiB,IAAa,IAAI,EAGhF,KAAwB;EAC5B,GAAI,KAAY,EAAY,wBACxB,CACE;GACE,IAAI;GACJ,OAAO;GACP,aAAa;GACb,eACE,EACE,EACE,kBAAkB,EAAa,GAAG,WAClC,KAAoB,EAAa,iBAClC,CACF;GACJ,CACF,GACD,EAAE;EACN,GAAI,KAAY,KAAe,CAAC,IAC5B,CACE;GACE,IAAI;GACJ,OAAO;GACP,aAAa;GACb,eAAe,EAA4B,GAAK;GACjD,CACF,GACD,EAAE;EACN;GACE,IAAI;GACJ,OAAO;GACP,aAAa;GACb,eACE,EACE,EAAqB,UAAU,KAAoB,EAAa,iBAAiB,CAClF;GACJ;EACD;GACE,IAAI;GACJ,OAAO;GACP,aAAa;GACb,eACE,EACE,EAAqB,aAAa,KAAoB,EAAa,iBAAiB,CACrF;GACJ;EACF;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,cAAW;MACX,eAAe,EAAW,EAAqB,kBAAkB,EAAiB,CAAC;MACnF,WAAU;gBAEV,kBAAC,OAAD;OAAK,WAAU;OAAS,MAAK;OAAO,SAAQ;OAAY,QAAO;iBAC7D,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACC,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;kBACX,GAAM,QAAQ;QACZ,CAAA,EACL,kBAAC,GAAD;QAAY,QAAQ;QAAa,KAAA;QAAI,OAAO;kBACzC,GAAyB,EAAa,OAAO;QACnC,CAAA,CACT;;MACN,kBAAC,KAAD;OAAG,WAAU;iBACV,GAAM,iBAAiB,EAAa,YAAY,EAAK,eAClD,GAAG,EAAe,EAAK,cAAc,EAAK,SAAS,CAAC,YAAY,EAAmB,EAAK,SAAS,CAAC,KAAK,EAAa,aAAa,EAAK,YAAY,EAAE,WAAW,EAAe,EAAK,gBAAgB,EAAa,aAAa,EAAK,YAAY,IAAI,EAAK,SAAS,CAAC,KAAK,EAAmB,EAAK,SAAS,KACvS,IACE,GAAG,EAAe,EAAK,OAAO,EAAK,SAAS,CAAC,KAAK,EAAmB,EAAK,SAAS,KACnF;OACJ,CAAA;MACJ,kBAAC,GAAD;OAAa,WAAU;iBACpB,EACC,uCACA,qPACD;OACW,CAAA;MACV,EAAA,CAAA,CACF;QAEN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,IAAD;MACE,SACE,KAAY,EAAY,wBACpB;OACE,OAAO;OACP,gBACE,EACE,EACE,kBAAkB,EAAa,GAAG,WAClC,KAAoB,EAAa,iBAClC,CACF;OACJ,GACD,KAAA;MAEN,SACE,CACE,GAAI,KACJ,EAAY,yBACZ,GAAM,iBAAiB,EAAa,WAChC,CACE;OACE,OAAO;OACP,gBAAgB,EAAwB,GAAK;OAC9C,CACF,GACD,EAAE,EACN,GAAI,KAAY,EAAY,yBAAyB,CAAC,EAAa,aAC/D,CACE;OACE,OAAO,IAAc,eAAe;OACpC,gBAAgB,EAAmB,GAAK;OACxC,UAAU;OACV,QAAQ;OACT,CACF,GACD,EAAE,CACP;MAEH,CAAA,EACD,EAAa,cACZ,kBAAC,QAAD;MAAM,WAAU;gBAAoG;MAE7G,CAAA,CAEL;OACF;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEG,KACC,kBAAC,IAAD;OAAe,WAAU;iBAAzB,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA4C;SAAmB,CAAA,EAC7E,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CACG,GAAc,kBACV;WACH;WACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD;SACE,OAAO;SACP,QAAO;SACP,MAAK;SACL,cAAW;SACX,CAAA,EACF,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,QAAD,EAAA,UAAO,EAAW,EAAa,WAAW,QAAQ,EAAQ,CAAA,EAC1D,kBAAC,QAAD,EAAA,UAAO,EAAW,EAAa,SAAS,QAAQ,EAAQ,CAAA,CACpD;WACF;UACQ;;MAIlB,kBAAC,GAAD;OAAM,WAAU;iBAAhB,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAd,CAA0D,eAEvD,EAAO,SAAS,KACf,kBAAC,QAAD;UAAM,WAAU;oBAAhB;WAAwE;WACpE,EAAO;WAAO;WACX;YAEN;YACL,kBAAC,KAAD;SAAG,WAAU;mBAAqC;SAAgC,CAAA,CAC9E;WACN,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAO,WAAW,IACjB,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAEvC,CAAA,GAEJ,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAO,KAAK,MACX,kBAAC,IAAD,EAAsC,UAAS,EAA1B,EAAM,GAAoB,CAC/C;SACE,CAAA;QAEJ,CAAA,CACD;;MAGN,KAAY,KACX,kBAAC,GAAD;OAAM,WAAU;iBAAhB;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;UAAI,WAAU;oBAA4C;UAAqB,CAAA,EAC/E,kBAAC,KAAD;UAAG,WAAU;oBAAqC;UAE9C,CAAA,CACA,EAAA,CAAA,EACL,IACC,kBAAC,GAAD;UAAY,QAAO;UAAU,KAAA;oBAAI;UAEpB,CAAA,GAEb,kBAAC,UAAD;UACE,MAAK;UACL,eAAe,EAA4B,GAAK;UAChD,WAAU;oBACX;UAEQ,CAAA,CAEP;;QAEN,kBAAC,OAAD;SAAK,WAAU;mBACZ,IACC,EAAoB,SAAS,IAC3B,kBAAC,OAAD;UAAK,WAAU;oBACZ,EAAoB,KAAK,MACxB,kBAAC,IAAD,EAAmD,SAAQ,EAAlC,EAAK,WAAW,GAAkB,CAC3D;UACE,CAAA,GAEN,kBAAC,KAAD;UAAG,WAAU;oBAAb;WAA2C;WACP;WAClC,kBAAC,QAAD;YAAM,WAAU;sBACb,EAAa;YACT,CAAA;;WAEL;cAGN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD;WAAK,WAAU;qBACb,kBAAC,OAAD;YACE,WAAU;YACV,MAAK;YACL,SAAQ;YACR,QAAO;sBAEP,kBAAC,QAAD;aACE,eAAc;aACd,gBAAe;aACf,aAAa;aACb,GAAE;aACF,CAAA;YACE,CAAA;WACF,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAwC;WAEjD,CAAA,EACJ,kBAAC,KAAD;WAAG,WAAU;qBAAb;YAAkD;YAC1C;YACN,kBAAC,UAAD;aACE,MAAK;aACL,eAAe,EAA4B,GAAK;aAChD,WAAU;uBACX;aAEQ,CAAA;YAAC;YAAI;YAEZ;aACA,EAAA,CAAA,CACF;;SAEJ,CAAA;QAEL,MACC,kBAAC,GAAD;SACE,kBAAkB,KAAoB,EAAa;SACnD,gBAAgB,EAAa;SAC7B,QAAQ,EAAE;SACV,YAAY,CAAC;UAAE,IAAI;UAAa,MAAM;UAAqB,CAAC;SAC5D,oBAAoB;SACpB,kBAAkB;AAGX,UAFL,EAA4B,GAAM,EAC7B,GAAS,EACT,IAAmB;;SAE1B,cAAc,EAA4B,GAAM;SAChD,CAAA;QAEC;;MAIR,EAAO,SAAS,KACf,kBAAC,GAAD;OAAM,WAAU;iBAAhB,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBAAd;UAA0D;UACjD;UACP,kBAAC,QAAD;WAAM,WAAU;qBAAhB;YAAmE;YAC/D,EAAO;YAAO;YACX;;UACJ;;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAO,KAAK,MACX,kBAAC,IAAD,EAA6B,mBAAmB,GAAY,EAA5C,EAAS,GAAmC,CAC5D;SACE,CAAA;QACF,CAAA,CACD;;MAIR,EAAa,SAAS,KACrB,kBAAC,GAAD;OAAM,WAAU;iBAAhB;QACE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,MAAD;UAAI,WAAU;oBAA4C;UAAwB,CAAA;SAC9E,CAAA;QACN,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAa,MAAM,GAAG,EAAE,CAAC,KAAK,MAC7B,kBAAC,IAAD,EAAmD,gBAAe,EAA5C,EAAY,GAAgC,CAClE;SACE,CAAA;QACL,EAAa,SAAS,KACrB,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,UAAD;UAAQ,MAAK;UAAS,WAAU;oBAAyC;UAEhE,CAAA;SACL,CAAA;QAEH;;MAEL;QAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,IAAD;OAAW,YAAW;OAA8B,OAAO;OAAa,CAAA;MAGxE,kBAAC,GAAD;OAAM,WAAU;iBAAhB,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBAA4C;SAAY,CAAA;QAClE,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAmB,CAAA,EAC9D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAa;UACZ,CAAA,CACA,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAQ,CAAA,EACnD,kBAAC,KAAD;UAAG,WAAU;oBAAoC,GAAM,QAAQ;UAAc,CAAA,CACzE,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAmB,CAAA,EAC9D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAa,gBAAgB,QAAQ;UACpC,CAAA,CACA,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAc,CAAA,EACzD,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAW,EAAa,UAAU;UACjC,CAAA,CACA,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAY,CAAA,EACvD,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAW,EAAa,QAAQ;UAC/B,CAAA,CACA,EAAA,CAAA;SACL,EAAa,mBACZ,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAgB,CAAA,EAC3D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAW,EAAa,gBAAgB;UACvC,CAAA,CACA,EAAA,CAAA;SAER,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAgB,CAAA,EAC3D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAa,cAAc,YAAY;UACtC,CAAA,CACA,EAAA,CAAA;SACL,EAAa,kBACZ,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAmB,CAAA,EAC9D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAa;UACZ,CAAA,CACA,EAAA,CAAA;SAEJ;UACD;;MAGN,EAAQ,SAAS,KAChB,kBAAC,GAAD;OAAM,WAAU;iBAAhB,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBAA4C;SAAY,CAAA;QAClE,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAQ,MAAM,GAAG,EAAE,CAAC,KAAK,MACxB,kBAAC,IAAD,EAAiC,SAAQ,EAAvB,EAAK,GAAkB,CACzC;SACE,CAAA;QACF,CAAA,CACD;;MAEL;OACF;;GAGL,MAAwB,KACvB,kBAAC,IAAD;IACgB;IACd,eAAe,EAAwB,GAAM;IAC7C,WAAW,OAAO,MAAc;AAE9B,KADA,MAAM,EAAwB;MAAE,gBAAgB,EAAa;MAAI;MAAW,CAAC,EAC7E,MAAM,GAAS;;IAEjB,WAAW;IACX,CAAA;GAIH,MACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KACE,WAAU;KACV,eAAe,EAAmB,GAAM;KACxC,CAAA,EACF,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,cAAW;KACX,mBAAgB;eAJlB;MAME,kBAAC,MAAD;OACE,IAAG;OACH,WAAU;iBACX;OAEI,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAgD;QAEjC;QACb,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAW,EAAa,QAAQ;SAC5B,CAAA;;QAEL;;MAEJ,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,SAAD;QAAO,WAAU;kBAAmD;QAE5D,CAAA,EACR,kBAAC,YAAD;QACE,OAAO;QACP,WAAW,MAAM,EAAgB,EAAE,OAAO,MAAM;QAChD,aAAY;QACZ,WAAU;QACV,MAAM;QACN,CAAA,CACE;;MAEL,KACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAkC;QAAgB,CAAA;OAC3D,CAAA;MAGR,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe;AAGb,SAFA,EAAmB,GAAM,EACzB,EAAgB,GAAG,EACnB,EAAe,KAAK;;QAEtB,WAAU;kBACX;QAEQ,CAAA,EACT,kBAAC,UAAD;QACE,MAAK;QACL,SAAS;QACT,UAAU;QACV,WAAU;kBAET,IAAc,iBAAiB;QACzB,CAAA,CACL;;MACF;OACF;;GAEJ;;GAQJ,MAAkD,EAAE,eAAY;CACpE,IAAM,IAAU,EAAM,SAIhB,IAAc,EAAuB,EAAM,MAAM,EAA0C,EAC3F,IACJ,GAAS,eAAe,OAAO,EAAQ,eAAgB,WAAW,EAAQ,cAAc,MAEpF,IADS,EAAM,QACC,SAAS,GACzB,IAAO,EAAM,mBAAmB,GAChC,IAAa,IAAQ,IAAI,KAAK,IAAI,KAAM,IAAO,IAAS,IAAI,GAAG,GAC/D,IAAU,EAAM,KAAK,SAAS,QAAQ,IAAI,EAAM,KAAK,SAAS,UAAU,EACxE,IAAW,EAAM,cAAc;AAErC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAA0C;MAAgB,CAAA,EACtE,KACC,kBAAC,KAAD;MAAG,WAAU;gBAAmD;MAAgB,CAAA,CAE9E;QACN,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IAAU,EAAY,EAAK,GAAG,EAAK,gBAAgB;MACnD;MACA,IAAQ,IAAK,IAAU,EAAY,EAAM,GAAG,EAAM,gBAAgB,GAAI;MAClE;OACH;;GAEL,IAAQ,KACP,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,mDAAmD,EAAsB,EAAW;KAC/F,OAAO,EAAE,OAAO,GAAG,EAAW,IAAI;KAClC,CAAA;IACE,CAAA;GAGR,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eACb,IAAW,WAAW;KAClB,CAAA,EACP,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,EAAM,WAAW,kBAAC,QAAD,EAAA,UAAA,CAAM,YAAS,EAAW,EAAM,SAAS,QAAQ,CAAQ,EAAA,CAAA,EAC1E,IAAQ,KACP,kBAAC,QAAD;MACE,WACE,KAAc,KACV,uCACA,KAAc,KACZ,yCACA;gBANV,CASG,EAAiB,EAAW,EAAC,QACzB;QAEL;OACF;;GACF;;GAIJ,MAAgE,EAAE,cAAW;CACjF,IAAM,EAAE,eAAY,kBAAe,uBAAoB,GACjD,IAAc,EAAuB,EAAW,UAAU,EAC1D,IAAW,CAAC,EAAW,WAAW,EAAW,UAAU,MACvD,IAAQ,EAAW,SAAS,GAC5B,IACJ,EAAW,UAAU,SAAS,QAAQ,IAAI,EAAW,UAAU,SAAS,UAAU,EAC9E,IAAa,EAAkB,EAAW,YAAY;AAE5D,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAA0C;MAAgB,CAAA,EACvE,kBAAC,KAAD;MAAG,WAAU;gBAAb,CACG,EAAW,cAAc,WAAW,6BAA6B,aACjE,KAAc,MAAM,IACnB;QACA;QACN,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IAAU,EAAY,EAAc,GAAG,EAAc,gBAAgB;MACrE;MACA,EAAW,UACR,MACA,IACE,IACE,EAAY,EAAM,GAClB,EAAM,gBAAgB,GACxB;MACD;OACH;;GAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,mDAAmD,EAAsB,EAAgB;KACpG,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,EAAgB,CAAC,IAAI;KACtD,CAAA;IACE,CAAA;GAGR,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD,EAAA,UAAA,CAAM,UAAO,EAAW,EAAW,WAAW,QAAQ,CAAQ,EAAA,CAAA,EAC7D,KACC,kBAAC,QAAD;KACE,WACE,KAAmB,KACf,uCACA,KAAmB,KACjB,yCACA;eANV,CASG,EAAiB,EAAgB,EAAC,QAC9B;OAEL;;GACF;;GAIJ,MAA2D,EAAE,2BAAwB;CACzF,IAAM,IAAQ,EAAkB;AAChC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;GAAG,WAAU;aAAiC,GAAO,QAAQ;GAAoB,CAAA,EACjF,kBAAC,KAAD;GAAG,WAAU;aAAb,CAA2C,SAAM,EAAkB,SAAa;KAC5E,EAAA,CAAA,EACL,KACC,kBAAC,KAAD;GAAG,WAAU;aACV,EAAe,EAAM,QAAQ,EAAkB,UAAU,EAAM,SAAS;GACvE,CAAA,CAEF;;GAIJ,MAAqD,EAAE,qBAEzD,kBAAC,OAAD;CAAK,WAAU;WAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;EAAG,WAAU;YAA4C,EAAY;EAAS,CAAA,EAC9E,kBAAC,KAAD;EAAG,WAAU;YAA+B,EAAW,EAAY,WAAW,QAAQ;EAAK,CAAA,CACvF,EAAA,CAAA,EACN,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,KAAD;GACE,WAAW,4BAA4B,EAAY,SAAS,WAAW,2BAA2B;aADpG,CAGG,EAAY,SAAS,WAAW,MAAM,IACtC,EAAe,EAAY,QAAQ,EAAY,SAAS,CACvD;MACJ,kBAAC,KAAD;GAAG,WAAU;aAA0C,EAAY;GAAW,CAAA,CAC1E;IACF;IAIJ,MAAkD,EAAE,cAEtD,kBAAC,OAAD;CAAK,WAAU;WAAf,CACE,kBAAC,OAAD,EAAK,WAAU,mDAAoD,CAAA,EACnE,kBAAC,OAAD,EAAA,UAAA;EACE,kBAAC,KAAD;GAAG,WAAU;aAAb;IACE,kBAAC,QAAD;KAAM,WAAU;eAAc,EAAK;KAAkB,CAAA;IACpD;IACD,kBAAC,QAAD;KAAM,WAAU;eAA0B,EAAK;KAAgB,CAAA;IAC7D;;EACH,EAAK,UAAU,kBAAC,KAAD;GAAG,WAAU;aAAsC,EAAK;GAAW,CAAA;EACnF,kBAAC,KAAD;GAAG,WAAU;aAAsC,EAAW,EAAK,WAAW,QAAQ;GAAK,CAAA;EACvF,EAAA,CAAA,CACF"}
1	+ {"version":3,"file":"SubscriptionDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/SubscriptionDetailPage.tsx"],"sourcesContent":["/*\n Subscriptions Module - Subscription Detail Page\n * Displays detailed information about a single subscription\n /\n\nimport { type FC, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useSubscription, useSubscriptionMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useGetDefaultBillingAccountDashboardQuery } from '../../../../generated/global-operations';\nimport { useWorkspaceQuotaOverview } from '../../usage/hooks/useUsage';\nimport {\n formatCurrency,\n formatDate,\n formatPlanDuration,\n formatSubscriptionStatus,\n formatPercentage,\n formatBytes,\n} from '../../../shared/utils/format';\nimport { getSubscriptionStatusColor, getQuotaProgressColor } from '../../../shared/utils/status';\nimport { Card, StatusPill, ProgressBar } from '../../../shared/ui';\nimport {\n CTAOverflowMenu,\n EmphasisPanel,\n PagePurpose,\n NextSteps,\n type CTAAction,\n type NextStep,\n} from '@burdenoff/fe-libs/ui';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport type {\n SubscriptionStatus,\n QuotaAssignment,\n AddonSubscription,\n SubscriptionHistory,\n Transaction,\n} from '../../../shared/types';\nimport { PricingModel } from '../../../shared/types';\nimport { ManageSeatsModal } from '../components/ManageSeatsModal';\nimport {\n WorkspaceQuotaAssignmentModal,\n type WorkspaceQuotaToAssign,\n} from '../../checkout/components/WorkspaceQuotaAssignmentModal';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { WorkspaceQuotaOverviewItem } from '../../usage/hooks/useUsage';\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction formatQuotaDisplayName(name: string, context?: Record<string, unknown> \| null): string {\n if (context?.displayName && typeof context.displayName === 'string') return context.displayName;\n if (context?.label && typeof context.label === 'string') return context.label;\n const parts = name.split('.');\n const meaningful = parts.length > 1 ? parts.slice(1) : parts;\n return meaningful\n .map((p) => p.replace(/_/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase()))\n .join(' ');\n}\n\nfunction formatResetPeriod(period: string): string {\n if (period === 'DAILY') return 'Resets daily';\n if (period === 'MONTHLY') return 'Resets monthly';\n return '';\n}\n\n// ============================================================================\n// Page Component\n// ============================================================================\n\nexport const SubscriptionDetailPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const { subscriptionId } = useParams<{ subscriptionId: string }>();\n const navigateTo = useBillingNavigate();\n const { emit } = useBillingEventEmitter();\n const { orgId } = useBilling();\n const permissions = useBillingPermissions();\n const { selectedAccountId } = useBillingAccountSelection({\n orgId,\n syncFromUrl: true,\n urlParamName: 'billingAccountId',\n });\n const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n fetchPolicy: 'cache-first',\n });\n const billingAccountId =\n selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n const { subscription, isLoading, error, refetch } = useSubscription(\n subscriptionId,\n billingAccountId\n );\n const { cancelSubscription, isCanceling, updateSubscriptionSeats, isUpdatingSeats } =\n useSubscriptionMutations();\n\n const { workspaceId } = useBilling();\n\n // Workspace quota overview — used to detect if quotas are already active and show live usage\n const { overview: wsQuotaOverview, refetch: refetchWsOverview } = useWorkspaceQuotaOverview(\n workspaceId ?? undefined\n );\n\n // Modal state\n const [showCancelModal, setShowCancelModal] = useState(false);\n const [showManageSeatsModal, setShowManageSeatsModal] = useState(false);\n const [showAssignWorkspaceModal, setShowAssignWorkspaceModal] = useState(false);\n const [cancelReason, setCancelReason] = useState('');\n const [cancelError, setCancelError] = useState<string \| null>(null);\n\n // Handle cancel subscription\n const handleCancelSubscription = async () => {\n if (!subscription) return;\n\n setCancelError(null);\n try {\n await cancelSubscription({\n billingAccountId: billingAccountId ?? subscription.billingAccountId,\n subscriptionId: subscription.id,\n reason: cancelReason \|\| 'User requested cancellation',\n });\n emit('billing.subscription.cancelled', {\n route: '/billing/subscriptions',\n entityId: subscription.id,\n source: 'subscription-detail',\n reason: cancelReason \|\| 'User requested cancellation',\n });\n setShowCancelModal(false);\n setCancelReason('');\n await refetch();\n } catch (err) {\n setCancelError(err instanceof Error ? err.message : 'Failed to cancel subscription');\n }\n };\n\n // Permission check\n if (!permissions.canViewSubscriptions) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center\">\n <svg\n className=\"size-6 text-text-secondary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n />\n </svg>\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n <p className=\"text-sm text-text-secondary max-w-sm\">\n You don't have permission to view this subscription.\n </p>\n </div>\n </div>\n );\n }\n\n // Loading state\n if (isLoading) {\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n <div className=\"flex items-center gap-4\">\n <div className=\"size-10 bg-bg-sunken animate-pulse rounded-button\" />\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n </div>\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <div className=\"lg:col-span-2 space-y-6\">\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 space-y-4\">\n <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n // Error state\n if (error \|\| !subscription) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n <svg\n className=\"size-6 text-status-error-text\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.subscriptions.notFound', 'Subscription not found')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {error?.message \|\| 'The subscription you are looking for does not exist.'}\n </p>\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Back to Subscriptions\n </button>\n </div>\n </div>\n );\n }\n\n const plan = subscription.plan;\n const quotas = subscription.quotas \|\| [];\n const addons = subscription.addonSubscriptions \|\| [];\n const transactions = subscription.transactions \|\| [];\n const history = subscription.history \|\| [];\n const statusColor = getSubscriptionStatusColor(subscription.status);\n const isActive = subscription.status === ('active' as SubscriptionStatus);\n\n // Workspace quota assignments that belong to this subscription\n const wsAssignmentsForSub = wsQuotaOverview.filter(\n (item) => item.assignment.subscriptionId === subscription.id && item.assignment.isActive\n );\n // Assigned if subscription field is set OR workspace assignments already exist\n const isAssignedToWorkspace =\n !!subscription.assignedWorkspaceId \|\| wsAssignmentsForSub.length > 0;\n\n // Calculate days remaining\n const endDate = new Date(subscription.endDate);\n const startDate = new Date(subscription.startDate);\n const now = new Date();\n const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 60 * 60 * 24));\n const daysRemaining = Math.max(\n 0,\n Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))\n );\n const progressPercentage = Math.round(((totalDays - daysRemaining) / totalDays) * 100);\n\n // Recommended next actions for this subscription\n const nextSteps: NextStep[] = [\n ...(isActive && permissions.canUpdateSubscription\n ? [\n {\n id: 'change-plan',\n label: 'Review or change your plan',\n description: 'Upgrade, downgrade, or compare what each tier includes.',\n onClick: () =>\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${subscription.id}/upgrade`,\n billingAccountId ?? subscription.billingAccountId\n )\n ),\n },\n ]\n : []),\n ...(isActive && workspaceId && !isAssignedToWorkspace\n ? [\n {\n id: 'activate-workspace',\n label: 'Activate quotas for your workspace',\n description: 'Turn on the workspace-scoped limits included in this plan.',\n onClick: () => setShowAssignWorkspaceModal(true),\n },\n ]\n : []),\n {\n id: 'track-usage',\n label: 'Track your usage',\n description: 'See how much of your included quota you have consumed.',\n onClick: () =>\n navigateTo(\n withBillingAccountId('/usage', billingAccountId ?? subscription.billingAccountId)\n ),\n },\n {\n id: 'view-invoices',\n label: 'Review invoices & payments',\n description: 'Check what has been billed for this subscription.',\n onClick: () =>\n navigateTo(\n withBillingAccountId('/invoices', billingAccountId ?? subscription.billingAccountId)\n ),\n },\n ];\n\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n {/* Header /}\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n <div className=\"flex items-start gap-4\">\n <button\n type=\"button\"\n aria-label=\"Back to subscriptions\"\n onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200\"\n >\n <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M15 19l-7-7 7-7\"\n />\n </svg>\n </button>\n <div>\n <div className=\"flex items-center gap-3 flex-wrap\">\n <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n {plan?.name \|\| 'Subscription'}\n </h1>\n <StatusPill status={statusColor} dot pulse={isActive}>\n {formatSubscriptionStatus(subscription.status)}\n </StatusPill>\n </div>\n <p className=\"text-sm text-text-secondary mt-1\">\n {plan?.pricingModel === PricingModel.PER_SEAT && plan.pricePerSeat\n ? `${formatCurrency(plan.pricePerSeat, plan.currency)} / seat / ${formatPlanDuration(plan.duration)} · ${subscription.seatCount ?? plan.minSeats ?? 1} seats = ${formatCurrency(plan.pricePerSeat (subscription.seatCount ?? plan.minSeats ?? 1), plan.currency)} / ${formatPlanDuration(plan.duration)}`\n : plan\n ? `${formatCurrency(plan.price, plan.currency)} / ${formatPlanDuration(plan.duration)}`\n : 'Unknown plan'}\n </p>\n <PagePurpose className=\"mt-3\">\n {tr(\n 'billing.subscriptions.detailPurpose',\n 'Everything about this subscription in one view — its billing period, the quotas and add-ons it includes, recent charges and its full status history. Use it to track what you are getting, activate workspace quotas, change your plan, or cancel.'\n )}\n </PagePurpose>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <CTAOverflowMenu\n primary={\n isActive && permissions.canUpdateSubscription\n ? {\n label: 'Change Plan',\n onSelect: () =>\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${subscription.id}/upgrade`,\n billingAccountId ?? subscription.billingAccountId\n )\n ),\n }\n : undefined\n }\n actions={\n [\n ...(isActive &&\n permissions.canUpdateSubscription &&\n plan?.pricingModel === PricingModel.PER_SEAT\n ? [\n {\n label: 'Manage Seats',\n onSelect: () => setShowManageSeatsModal(true),\n },\n ]\n : []),\n ...(isActive && permissions.canCancelSubscription && !subscription.canceledAt\n ? [\n {\n label: isCanceling ? 'Canceling…' : 'Cancel Subscription',\n onSelect: () => setShowCancelModal(true),\n disabled: isCanceling,\n intent: 'destructive' as const,\n },\n ]\n : []),\n ] satisfies CTAAction[]\n }\n />\n {subscription.canceledAt && (\n <span className=\"px-4 py-2 text-sm font-medium text-status-warning-text bg-status-warning-bg-subtle rounded-button\">\n Cancellation Scheduled\n </span>\n )}\n </div>\n </div>\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/* Main Content /}\n <div className=\"lg:col-span-2 space-y-6\">\n {/ Period Progress — primary status emphasis zone /}\n {isActive && (\n <EmphasisPanel className=\"p-5\">\n <div className=\"flex items-center justify-between mb-4\">\n <h2 className=\"text-base font-semibold text-text-primary\">Current Period</h2>\n <span className=\"text-sm text-text-secondary tabular-nums\">\n {daysRemaining} days remaining\n </span>\n </div>\n <div className=\"space-y-2\">\n <ProgressBar\n value={progressPercentage}\n status=\"primary\"\n size=\"md\"\n aria-label=\"Billing period progress\"\n />\n <div className=\"flex items-center justify-between text-sm text-text-secondary\">\n <span>{formatDate(subscription.startDate, 'short')}</span>\n <span>{formatDate(subscription.endDate, 'short')}</span>\n </div>\n </div>\n </EmphasisPanel>\n )}\n\n {/ Plan Quotas /}\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">\n Plan Quotas\n {quotas.length > 0 && (\n <span className=\"ml-2 text-sm font-normal text-text-muted tabular-nums\">\n ({quotas.length})\n </span>\n )}\n </h2>\n <p className=\"text-sm text-text-secondary mt-0.5\">Limits included in your plan</p>\n </div>\n <div className=\"p-5\">\n {quotas.length === 0 ? (\n <p className=\"text-sm text-text-secondary\">\n No quotas assigned to this subscription.\n </p>\n ) : (\n <div className=\"space-y-3\">\n {quotas.map((quota) => (\n <QuotaUsageItem key={quota.id} quota={quota} />\n ))}\n </div>\n )}\n </div>\n </Card>\n\n {/ Workspace Quotas /}\n {isActive && workspaceId && (\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle flex items-center justify-between gap-4\">\n <div>\n <h2 className=\"text-base font-semibold text-text-primary\">Workspace Quotas</h2>\n <p className=\"text-sm text-text-secondary mt-0.5\">\n Active limits for your workspace\n </p>\n </div>\n {isAssignedToWorkspace ? (\n <StatusPill status=\"success\" dot>\n Active\n </StatusPill>\n ) : (\n <button\n type=\"button\"\n onClick={() => setShowAssignWorkspaceModal(true)}\n className=\"px-3 py-1.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Activate for Workspace\n </button>\n )}\n </div>\n\n <div className=\"p-5\">\n {isAssignedToWorkspace ? (\n wsAssignmentsForSub.length > 0 ? (\n <div className=\"space-y-3\">\n {wsAssignmentsForSub.map((item) => (\n <WorkspaceQuotaItem key={item.assignment.id} item={item} />\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-secondary\">\n Quotas are activated on workspace{' '}\n <span className=\"font-mono text-xs text-text-primary bg-bg-sunken/60 rounded px-1.5 py-0.5\">\n {subscription.assignedWorkspaceId}\n </span>\n . Usage data will appear here once quotas are consumed.\n </p>\n )\n ) : (\n <div className=\"flex items-start gap-3\">\n <div className=\"size-8 rounded-full bg-status-warning-bg-subtle flex items-center justify-center shrink-0 mt-0.5\">\n <svg\n className=\"size-4 text-status-warning-text\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n </div>\n <div>\n <p className=\"text-sm font-medium text-text-primary\">\n Workspace quotas not activated yet\n </p>\n <p className=\"text-sm text-text-secondary mt-0.5\">\n Click{' '}\n <button\n type=\"button\"\n onClick={() => setShowAssignWorkspaceModal(true)}\n className=\"text-text-link hover:underline font-medium\"\n >\n Activate for Workspace\n </button>{' '}\n to enable the workspace-scoped limits included in this plan.\n </p>\n </div>\n </div>\n )}\n </div>\n\n {showAssignWorkspaceModal && (\n <WorkspaceQuotaAssignmentModal\n billingAccountId={billingAccountId ?? subscription.billingAccountId}\n subscriptionId={subscription.id}\n quotas={[] as WorkspaceQuotaToAssign[]}\n workspaces={[{ id: workspaceId, name: 'Current workspace' }]}\n currentWorkspaceId={workspaceId}\n onAssigned={() => {\n setShowAssignWorkspaceModal(false);\n void refetch();\n void refetchWsOverview();\n }}\n onSkip={() => setShowAssignWorkspaceModal(false)}\n />\n )}\n </Card>\n )}\n\n {/ Addons /}\n {addons.length > 0 && (\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">\n Addons{' '}\n <span className=\"text-sm font-normal text-text-muted tabular-nums\">\n ({addons.length})\n </span>\n </h2>\n </div>\n <div className=\"p-5\">\n <div className=\"space-y-3\">\n {addons.map((addonSub) => (\n <AddonItem key={addonSub.id} addonSubscription={addonSub} />\n ))}\n </div>\n </div>\n </Card>\n )}\n\n {/ Recent Transactions /}\n {transactions.length > 0 && (\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">Recent Transactions</h2>\n </div>\n <div className=\"divide-y divide-border-subtle\">\n {transactions.slice(0, 5).map((transaction) => (\n <TransactionItem key={transaction.id} transaction={transaction} />\n ))}\n </div>\n {transactions.length > 5 && (\n <div className=\"p-4 text-center border-t border-border-subtle\">\n <button type=\"button\" className=\"text-sm text-text-link hover:underline\">\n View all transactions\n </button>\n </div>\n )}\n </Card>\n )}\n </div>\n\n {/ Sidebar /}\n <div className=\"space-y-6 lg:sticky lg:top-6 lg:self-start\">\n {/ Next steps guidance /}\n <NextSteps storageKey=\"billing-subscription-detail\" steps={nextSteps} />\n\n {/ Subscription Details /}\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">Details</h2>\n </div>\n <div className=\"p-5 space-y-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Subscription ID</p>\n <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">\n {subscription.id}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Plan</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{plan?.name \|\| 'Unknown'}</p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Billing Account</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {subscription.billingAccount?.name \|\| 'Unknown'}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Start Date</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatDate(subscription.startDate)}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">End Date</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatDate(subscription.endDate)}\n </p>\n </div>\n {subscription.nextBillingDate && (\n <div>\n <p className=\"text-sm text-text-secondary\">Next Billing</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatDate(subscription.nextBillingDate)}\n </p>\n </div>\n )}\n <div>\n <p className=\"text-sm text-text-secondary\">Auto Renewal</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {subscription.autoRenewal ? 'Enabled' : 'Disabled'}\n </p>\n </div>\n {subscription.paymentGateway && (\n <div>\n <p className=\"text-sm text-text-secondary\">Payment Gateway</p>\n <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n {subscription.paymentGateway}\n </p>\n </div>\n )}\n </div>\n </Card>\n\n {/ History /}\n {history.length > 0 && (\n <Card className=\"overflow-hidden\">\n <div className=\"p-5 border-b border-border-subtle\">\n <h2 className=\"text-base font-semibold text-text-primary\">History</h2>\n </div>\n <div className=\"p-5\">\n <div className=\"space-y-3\">\n {history.slice(0, 5).map((item) => (\n <HistoryItem key={item.id} item={item} />\n ))}\n </div>\n </div>\n </Card>\n )}\n </div>\n </div>\n\n {/ Manage Seats Modal /}\n {showManageSeatsModal && subscription && (\n <ManageSeatsModal\n subscription={subscription}\n onClose={() => setShowManageSeatsModal(false)}\n onConfirm={async (seatCount) => {\n await updateSubscriptionSeats({ subscriptionId: subscription.id, seatCount });\n await refetch();\n }}\n isLoading={isUpdatingSeats}\n />\n )}\n\n {/ Cancel Subscription Modal /}\n {showCancelModal && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n <div\n className=\"absolute inset-0 bg-overlay-scrim\"\n onClick={() => setShowCancelModal(false)}\n />\n <div\n className=\"relative bg-bg-elevated border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] w-full max-w-md mx-4 p-6\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"cancel-subscription-title\"\n >\n <h3\n id=\"cancel-subscription-title\"\n className=\"text-lg font-semibold text-text-primary mb-2\"\n >\n Cancel Subscription\n </h3>\n <p className=\"text-sm text-text-secondary mb-4\">\n Are you sure you want to cancel this subscription? Your subscription will remain\n active until{' '}\n <span className=\"font-medium text-text-primary\">\n {formatDate(subscription.endDate)}\n </span>\n , but will not renew automatically.\n </p>\n\n <div className=\"mb-4\">\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Reason for cancellation (optional)\n </label>\n <textarea\n value={cancelReason}\n onChange={(e) => setCancelReason(e.target.value)}\n placeholder=\"Please share why you're canceling...\"\n className=\"w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent resize-none\"\n rows={3}\n />\n </div>\n\n {cancelError && (\n <div className=\"mb-4 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-card\">\n <p className=\"text-sm text-status-error-text\">{cancelError}</p>\n </div>\n )}\n\n <div className=\"flex items-center justify-end gap-3\">\n <button\n type=\"button\"\n onClick={() => {\n setShowCancelModal(false);\n setCancelReason('');\n setCancelError(null);\n }}\n className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n >\n Keep Subscription\n </button>\n <button\n type=\"button\"\n onClick={handleCancelSubscription}\n disabled={isCanceling}\n className=\"px-4 py-2 text-sm font-medium bg-action-danger-bg text-action-danger-text rounded-button hover:bg-action-danger-bgHover transition-colors duration-200 disabled:opacity-50\"\n >\n {isCanceling ? 'Canceling...' : 'Confirm Cancellation'}\n </button>\n </div>\n </div>\n </div>\n )}\n </div>\n );\n};\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\nconst QuotaUsageItem: FC<{ quota: QuotaAssignment }> = ({ quota }) => {\n const context = quota.context as\n { displayName?: string; label?: string; description?: string } \| null \| undefined;\n const displayName = formatQuotaDisplayName(quota.name, context as Record<string, unknown> \| null);\n const description =\n context?.description && typeof context.description === 'string' ? context.description : null;\n const limits = quota.limits as { value?: number } \| null;\n const limit = limits?.value ?? 0;\n const used = quota.currentUsageSum ?? 0;\n const percentage = limit > 0 ? Math.min(100, (used / limit) 100) : 0;\n const isBytes = quota.name.includes('bytes') \|\| quota.name.includes('storage');\n const isPooled = quota.quotaType === 'POOLED';\n\n return (\n <div className=\"p-4 rounded-card border border-border-seam bg-bg-surface\">\n <div className=\"flex items-start justify-between gap-4 mb-2\">\n <div className=\"min-w-0\">\n <p className=\"font-medium text-text-primary truncate\">{displayName}</p>\n {description && (\n <p className=\"text-xs text-text-secondary mt-0.5 line-clamp-2\">{description}</p>\n )}\n </div>\n <span className=\"text-sm font-medium text-text-primary shrink-0 tabular-nums\">\n {isBytes ? formatBytes(used) : used.toLocaleString()}\n {' / '}\n {limit > 0 ? (isBytes ? formatBytes(limit) : limit.toLocaleString()) : '∞'}\n </span>\n </div>\n\n {limit > 0 && (\n <div className=\"h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2\">\n <div\n className={`h-full rounded-full transition-all duration-300 ${getQuotaProgressColor(percentage)}`}\n style={{ width: `${percentage}%` }}\n />\n </div>\n )}\n\n <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n <span className=\"px-1.5 py-0.5 rounded bg-bg-sunken font-medium\">\n {isPooled ? 'Shared' : 'Per Workspace'}\n </span>\n <div className=\"flex items-center gap-3\">\n {quota.endtime && <span>Expires {formatDate(quota.endtime, 'short')}</span>}\n {limit > 0 && (\n <span\n className={\n percentage >= 90\n ? 'text-status-error-text font-medium'\n : percentage >= 70\n ? 'text-status-warning-text font-medium'\n : ''\n }\n >\n {formatPercentage(percentage)} used\n </span>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nconst WorkspaceQuotaItem: FC<{ item: WorkspaceQuotaOverviewItem }> = ({ item }) => {\n const { assignment, effectiveUsed, usagePercentage } = item;\n const displayName = formatQuotaDisplayName(assignment.quotaName);\n const hasLimit = !assignment.noLimit && assignment.limit !== null;\n const limit = assignment.limit ?? 0;\n const isBytes =\n assignment.quotaName.includes('bytes') \|\| assignment.quotaName.includes('storage');\n const resetLabel = formatResetPeriod(assignment.resetPeriod);\n\n return (\n <div className=\"p-4 rounded-card border border-border-seam bg-bg-surface\">\n <div className=\"flex items-start justify-between gap-4 mb-2\">\n <div className=\"min-w-0\">\n <p className=\"font-medium text-text-primary truncate\">{displayName}</p>\n <p className=\"text-xs text-text-secondary mt-0.5\">\n {assignment.quotaMode === 'pooled' ? 'Pooled across workspaces' : 'Dedicated'}\n {resetLabel && ` · ${resetLabel}`}\n </p>\n </div>\n <span className=\"text-sm font-medium text-text-primary shrink-0 tabular-nums\">\n {isBytes ? formatBytes(effectiveUsed) : effectiveUsed.toLocaleString()}\n {' / '}\n {assignment.noLimit\n ? '∞'\n : hasLimit\n ? isBytes\n ? formatBytes(limit)\n : limit.toLocaleString()\n : '∞'}\n </span>\n </div>\n\n {hasLimit && (\n <div className=\"h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2\">\n <div\n className={`h-full rounded-full transition-all duration-300 ${getQuotaProgressColor(usagePercentage)}`}\n style={{ width: `${Math.min(100, usagePercentage)}%` }}\n />\n </div>\n )}\n\n <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n <span>Since {formatDate(assignment.createdAt, 'short')}</span>\n {hasLimit && (\n <span\n className={\n usagePercentage >= 90\n ? 'text-status-error-text font-medium'\n : usagePercentage >= 70\n ? 'text-status-warning-text font-medium'\n : ''\n }\n >\n {formatPercentage(usagePercentage)} used\n </span>\n )}\n </div>\n </div>\n );\n};\n\nconst AddonItem: FC<{ addonSubscription: AddonSubscription }> = ({ addonSubscription }) => {\n const addon = addonSubscription.addon;\n return (\n <div className=\"flex items-center justify-between p-3 rounded-card border border-border-seam bg-bg-sunken\">\n <div>\n <p className=\"font-medium text-text-primary\">{addon?.name \|\| 'Unknown Addon'}</p>\n <p className=\"text-sm text-text-secondary\">Qty: {addonSubscription.quantity}</p>\n </div>\n {addon && (\n <p className=\"text-sm font-medium text-text-primary tabular-nums\">\n {formatCurrency(addon.price * addonSubscription.quantity, addon.currency)}\n </p>\n )}\n </div>\n );\n};\n\nconst TransactionItem: FC<{ transaction: Transaction }> = ({ transaction }) => {\n return (\n <div className=\"flex items-center justify-between px-5 py-4 hover:bg-bg-sunken transition-colors\">\n <div>\n <p className=\"font-medium text-text-primary capitalize\">{transaction.type}</p>\n <p className=\"text-sm text-text-secondary\">{formatDate(transaction.createdAt, 'short')}</p>\n </div>\n <div className=\"text-right\">\n <p\n className={`font-medium tabular-nums ${transaction.type === 'refund' ? 'text-status-error-text' : 'text-text-primary'}`}\n >\n {transaction.type === 'refund' ? '-' : ''}\n {formatCurrency(transaction.amount, transaction.currency)}\n </p>\n <p className=\"text-sm text-text-secondary capitalize\">{transaction.status}</p>\n </div>\n </div>\n );\n};\n\nconst HistoryItem: FC<{ item: SubscriptionHistory }> = ({ item }) => {\n return (\n <div className=\"flex items-start gap-3\">\n <div className=\"size-2 rounded-full bg-text-muted mt-2 shrink-0\" />\n <div>\n <p className=\"text-sm text-text-primary\">\n <span className=\"capitalize\">{item.fromStatus}</span>\n {' → '}\n <span className=\"capitalize font-medium\">{item.toStatus}</span>\n </p>\n {item.reason && <p className=\"text-xs text-text-secondary mt-0.5\">{item.reason}</p>}\n <p className=\"text-xs text-text-secondary mt-0.5\">{formatDate(item.createdAt, 'short')}</p>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/billing/modules/subscriptions/pages/UpgradeSubscriptionPage.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { useSubscription as l } from "../hooks/useSubscriptions.js";
 import "../hooks/index.js";
 import { useMemo as u, useState as d } from "react";
 import { AlertCircle as f, ArrowLeft as p, ArrowRight as m, CheckCircle as h, ChevronDown as g, ChevronUp as _, Infinity as v, Loader2 as y, Package as b, Sparkles as x } from "lucide-react";
-import { useParams as S } from "react-router-dom";
+import { useParams as S } from "react-router";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 import { useI18n as E } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { PagePurpose as D } from "@burdenoff/fe-libs/ui";

package/dist/billing/modules/subscriptions/pages/UpgradeSubscriptionPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UpgradeSubscriptionPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/UpgradeSubscriptionPage.tsx"],"sourcesContent":["/*\n Change Plan Page\n * Allows users to change their current subscription to a different plan\n * Shows plan features in collapsible sections for easy comparison\n /\n\nimport { type FC, useState, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport {\n ArrowLeft,\n ArrowRight,\n Loader2,\n Package,\n CheckCircle,\n AlertCircle,\n ChevronDown,\n ChevronUp,\n Sparkles,\n Infinity as InfinityIcon,\n} from 'lucide-react';\n\nimport { useSubscription } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { formatCurrency, formatPlanDuration } from '../../../shared/utils/format';\nimport {\n useGetAllPlansQuery,\n useGetDefaultBillingAccountDashboardQuery,\n} from '../../../../generated/global-operations';\nimport type { Plan, PlanDuration, SubscriptionStatus } from '../../../shared/types';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\n\n// Helper type for plan features\ninterface PlanFeature {\n id: string;\n quotaId?: string;\n quota?: {\n id: string;\n name: string;\n limits?: Record<string, number \| string \| boolean>;\n reusable?: boolean;\n quotaType?: string;\n };\n}\n\n// Helper function to format limit values nicely\nconst formatLimitValue = (value: number \| string \| boolean): string => {\n if (typeof value === 'boolean') {\n return value ? 'Yes' : 'No';\n }\n if (typeof value === 'number') {\n if (value === -1 \|\| value === Infinity) return 'Unlimited';\n if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;\n if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;\n return value.toLocaleString();\n }\n return String(value);\n};\n\n// Helper function to get a user-friendly limit key name\nconst formatLimitKey = (key: string): string => {\n return key\n .replace(/_/g, ' ')\n .replace(/([A-Z])/g, ' $1')\n .replace(/^./, (str) => str.toUpperCase())\n .trim();\n};\n\n// Helper function to aggregate features by quotaId\n// Combines limits for features with the same quota\nconst aggregateFeaturesByQuota = (features: PlanFeature[]): PlanFeature[] => {\n const quotaMap = new Map<string, PlanFeature>();\n\n for (const feature of features) {\n const quotaId = feature.quotaId \|\| feature.quota?.id;\n if (!quotaId \|\| !feature.quota) continue;\n\n const existing = quotaMap.get(quotaId);\n if (existing && existing.quota) {\n // Aggregate limits - sum numeric values\n const existingLimits = existing.quota.limits \|\| {};\n const newLimits = feature.quota.limits \|\| {};\n const combinedLimits: Record<string, number \| string \| boolean> = { ...existingLimits };\n\n for (const [key, value] of Object.entries(newLimits)) {\n if (typeof value === 'number' && typeof combinedLimits[key] === 'number') {\n // Sum numeric values (but keep -1/unlimited as unlimited)\n const existingVal = combinedLimits[key] as number;\n if (existingVal === -1 \|\| value === -1) {\n combinedLimits[key] = -1; // Unlimited stays unlimited\n } else {\n combinedLimits[key] = existingVal + value;\n }\n } else if (!(key in combinedLimits)) {\n combinedLimits[key] = value;\n }\n }\n\n existing.quota = {\n ...existing.quota,\n limits: combinedLimits,\n };\n } else {\n // Clone the feature to avoid mutating original\n quotaMap.set(quotaId, {\n ...feature,\n quota: feature.quota\n ? {\n ...feature.quota,\n limits: feature.quota.limits ? { ...feature.quota.limits } : undefined,\n }\n : undefined,\n });\n }\n }\n\n return Array.from(quotaMap.values());\n};\n\n// Collapsible Features Component\ninterface CollapsibleFeaturesProps {\n features: PlanFeature[];\n isExpanded: boolean;\n onToggle: () => void;\n variant?: 'current' \| 'available';\n}\n\nconst CollapsibleFeatures: FC<CollapsibleFeaturesProps> = ({\n features,\n isExpanded,\n onToggle,\n variant = 'available',\n}) => {\n // Aggregate features with same quotaId\n const aggregatedFeatures = useMemo(() => aggregateFeaturesByQuota(features), [features]);\n const featureCount = aggregatedFeatures.length;\n\n if (featureCount === 0) {\n return <p className=\"text-xs text-text-secondary italic\">No features defined</p>;\n }\n\n return (\n <div className=\"mt-2\">\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation();\n onToggle();\n }}\n className={`flex items-center gap-1.5 text-xs font-medium transition-colors ${\n variant === 'current'\n ? 'text-text-secondary hover:text-text-primary'\n : 'text-text-link hover:text-text-link'\n }`}\n >\n <Sparkles className=\"size-3\" />\n <span>\n {featureCount} feature{featureCount !== 1 ? 's' : ''}\n </span>\n {isExpanded ? <ChevronUp className=\"size-3\" /> : <ChevronDown className=\"size-3\" />}\n </button>\n\n {isExpanded && (\n <div className={`mt-2 space-y-2 ${variant === 'current' ? 'pl-0' : 'pl-1'}`}>\n {aggregatedFeatures.map((feature) => {\n const quota = feature.quota;\n if (!quota) return null;\n\n const limits = quota.limits \|\| {};\n const limitEntries = Object.entries(limits);\n\n return (\n <div\n key={feature.id}\n className={`rounded-button p-2 ${\n variant === 'current' ? 'bg-bg-sunken' : 'bg-[var(--color-accent-soft)]'\n }`}\n >\n <p\n className={`text-xs font-medium ${\n variant === 'current' ? 'text-text-primary' : 'text-text-primary'\n }`}\n >\n {quota.name}\n </p>\n {limitEntries.length > 0 && (\n <div className=\"mt-1 flex flex-wrap gap-x-3 gap-y-1\">\n {limitEntries.map(([key, value]) => (\n <div\n key={key}\n className=\"flex items-center gap-1 text-xs text-text-secondary\"\n >\n <span className=\"opacity-70\">{formatLimitKey(key)}:</span>\n <span className=\"font-medium text-text-primary flex items-center gap-0.5\">\n {value === -1 \|\| value === Infinity ? (\n <>\n <InfinityIcon className=\"size-3\" />\n <span className=\"sr-only\">Unlimited</span>\n </>\n ) : (\n formatLimitValue(value as number \| string \| boolean)\n )}\n </span>\n </div>\n ))}\n </div>\n )}\n {quota.reusable && (\n <span className=\"inline-block mt-1 text-[10px] px-1.5 py-0.5 rounded bg-status-success-bg-subtle text-status-success-text\">\n Reusable\n </span>\n )}\n </div>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport const UpgradeSubscriptionPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const { subscriptionId } = useParams<{ subscriptionId: string }>();\n const navigateTo = useBillingNavigate();\n const { orgId } = useBilling();\n const permissions = useBillingPermissions();\n const { selectedAccountId } = useBillingAccountSelection({\n orgId,\n syncFromUrl: true,\n urlParamName: 'billingAccountId',\n });\n\n const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n fetchPolicy: 'cache-first',\n });\n const billingAccountId =\n selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n const { subscription, isLoading: subscriptionLoading } = useSubscription(\n subscriptionId,\n billingAccountId\n );\n\n // Fetch available plans (includes features)\n const { data: plansData, loading: plansLoading } = useGetAllPlansQuery();\n\n // State\n const [selectedPlanId, setSelectedPlanId] = useState<string \| null>(null);\n const [expandedFeatures, setExpandedFeatures] = useState<Record<string, boolean>>({});\n\n // Get all plans including current for feature lookup\n const allPlans = useMemo(() => {\n return (plansData?.getAllPlans \|\| []) as Plan[];\n }, [plansData]);\n\n // Get current plan with features from allPlans\n const currentPlanWithFeatures = useMemo(() => {\n const currentPlanId = subscription?.planId;\n return allPlans.find((p) => p.id === currentPlanId) \|\| null;\n }, [allPlans, subscription?.planId]);\n\n // Filter plans - show all other active plans (same product if productID exists, otherwise all)\n const availablePlans = useMemo(() => {\n const currentPlanId = subscription?.planId;\n const currentProductId = subscription?.plan?.productID;\n\n return allPlans\n .filter((plan) => {\n // Always exclude current plan\n if (plan.id === currentPlanId) return false;\n // Only show active plans\n if (!plan.isActive) return false;\n // If we have productID, filter by same product\n if (currentProductId) {\n return plan.productID === currentProductId;\n }\n // If no productID, show all active plans\n return true;\n })\n .sort((a, b) => a.price - b.price);\n }, [allPlans, subscription]);\n\n const selectedPlan = useMemo(() => {\n return availablePlans.find((p) => p.id === selectedPlanId) \|\| null;\n }, [availablePlans, selectedPlanId]);\n\n const isDowngrade =\n selectedPlan !== null && selectedPlan.price < (subscription?.plan?.price ?? 0);\n\n // Toggle feature expansion\n const toggleFeatures = (planId: string) => {\n setExpandedFeatures((prev) => ({\n ...prev,\n [planId]: !prev[planId],\n }));\n };\n\n // Handle proceed to checkout\n const handleProceedToCheckout = () => {\n if (!subscription \|\| !selectedPlan) return;\n const currentPrice = subscription.plan?.price ?? 0;\n const isDowngrade = selectedPlan.price < currentPrice;\n navigateTo(`/checkout/${selectedPlan.id}`, {\n state: {\n purchaseType: 'PLAN',\n // Upgrade: old quotas transfer to new plan immediately\n // Downgrade: old plan runs to natural expiry, auto-renewal cancelled\n ...(isDowngrade\n ? { downgradeFromSubscriptionId: subscription.id }\n : { upgradeFromSubscriptionId: subscription.id }),\n currentPlanName: subscription.plan?.name,\n billingAccountId: subscription.billingAccountId,\n },\n });\n };\n\n // Permission check\n if (!permissions.canUpdateSubscription) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n <AlertCircle className=\"size-6 text-text-secondary\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n <p className=\"text-sm text-text-secondary max-w-sm\">\n You don't have permission to change subscriptions.\n </p>\n </div>\n </div>\n );\n }\n\n // Loading state\n if (subscriptionLoading \|\| plansLoading) {\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <Loader2 className=\"size-8 animate-spin mx-auto text-text-link\" />\n <p className=\"text-text-secondary\">Loading plans…</p>\n </div>\n </div>\n );\n }\n\n // Subscription not found\n if (!subscription) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <AlertCircle className=\"size-12 mx-auto text-status-error-text\" />\n <h2 className=\"text-lg font-semibold text-text-primary\">Subscription not found</h2>\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button\"\n >\n {tr('billing.subscriptions.backToSubscriptions', 'Back to Subscriptions')}\n </button>\n </div>\n </div>\n );\n }\n\n // Subscription is not active (already upgraded/canceled/etc)\n const isActive = subscription.status === ('active' as SubscriptionStatus);\n if (!isActive) {\n return (\n <div className=\"max-w-2xl mx-auto p-6 space-y-6\">\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(withBillingAccountId(`/subscriptions/${subscriptionId}`, billingAccountId))\n }\n className=\"flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('billing.subscriptions.backToSubscription', 'Back to Subscription')}\n </button>\n\n <div className=\"text-center space-y-4 py-12\">\n <AlertCircle className=\"size-12 mx-auto text-status-warning-text\" />\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.subscriptions.cannotChangePlan', 'Cannot Change Plan')}\n </h2>\n <p className=\"text-sm text-text-secondary max-w-md mx-auto\">\n {tr(\n 'billing.subscriptions.notActiveMessage',\n 'This subscription is no longer active. You can only change plans for active subscriptions.'\n )}\n </p>\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button\"\n >\n {tr('billing.subscriptions.viewAll', 'View All Subscriptions')}\n </button>\n </div>\n </div>\n );\n }\n\n // No other plans available\n if (availablePlans.length === 0) {\n return (\n <div className=\"max-w-2xl mx-auto p-6 space-y-6\">\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(withBillingAccountId(`/subscriptions/${subscriptionId}`, billingAccountId))\n }\n className=\"flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('billing.subscriptions.backToSubscription', 'Back to Subscription')}\n </button>\n\n <div className=\"text-center space-y-4 py-12\">\n <Package className=\"size-12 mx-auto text-text-secondary\" />\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.subscriptions.noPlansAvailable', 'No Other Plans Available')}\n </h2>\n <p className=\"text-sm text-text-secondary max-w-md mx-auto\">\n {tr(\n 'billing.subscriptions.noPlansMessage',\n 'There are no other active plans available for this product.'\n )}\n </p>\n </div>\n </div>\n );\n }\n\n const currentPlanFeatures = (currentPlanWithFeatures?.features \|\| []) as PlanFeature[];\n\n return (\n <div className=\"max-w-3xl mx-auto p-6 space-y-6\">\n {/ Header /}\n <div>\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(withBillingAccountId(`/subscriptions/${subscriptionId}`, billingAccountId))\n }\n className=\"flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary mb-4\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('billing.subscriptions.backToSubscription', 'Back to Subscription')}\n </button>\n\n <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n {tr('billing.subscriptions.changeYourPlan', 'Change Your Plan')}\n </h1>\n <p className=\"text-text-secondary mt-1\">\n Switch from <span className=\"font-medium\">{subscription.plan?.name}</span> to a different\n plan\n </p>\n <PagePurpose className=\"mt-3\">\n {tr(\n 'billing.subscriptions.upgradePurpose',\n 'Move this subscription to a different plan — upgrade for more capacity or downgrade to save. Compare what each plan includes and see how the change affects your billing before you confirm.'\n )}\n </PagePurpose>\n </div>\n\n {/ Current Plan Card /}\n <div className=\"bg-bg-sunken border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-start justify-between\">\n <div className=\"flex-1\">\n <p className=\"text-sm text-text-secondary\">Current Plan</p>\n <p className=\"font-semibold text-text-primary\">{subscription.plan?.name}</p>\n\n {/ Current Plan Features - Collapsible /}\n <CollapsibleFeatures\n features={currentPlanFeatures}\n isExpanded={expandedFeatures['current'] \|\| false}\n onToggle={() => toggleFeatures('current')}\n variant=\"current\"\n />\n </div>\n <div className=\"text-right shrink-0 ml-4\">\n <p className=\"text-sm text-text-secondary\">Price</p>\n <p className=\"font-semibold text-text-primary\">\n {formatCurrency(subscription.plan?.price \|\| 0, subscription.plan?.currency \|\| 'USD')}\n <span className=\"text-sm font-normal text-text-secondary\">\n {' '}\n / {formatPlanDuration((subscription.plan?.duration \|\| 'monthly') as PlanDuration)}\n </span>\n </p>\n </div>\n </div>\n </div>\n\n {/ Available Plans /}\n <div className=\"space-y-3\">\n <h2 className=\"text-lg font-semibold text-text-primary\">Select New Plan</h2>\n <div className=\"grid gap-3\">\n {availablePlans.map((plan) => {\n const priceDiff = plan.price - (subscription.plan?.price \|\| 0);\n const isSelected = selectedPlanId === plan.id;\n const planFeatures = (plan.features \|\| []) as PlanFeature[];\n const isFeaturesExpanded = expandedFeatures[plan.id] \|\| false;\n\n return (\n <div\n key={plan.id}\n className={`rounded-lg border transition-all ${\n isSelected\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-2 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle bg-bg-surface hover:border-border-strong'\n }`}\n >\n {/ Plan Header - Clickable for selection /}\n <button\n type=\"button\"\n onClick={() => setSelectedPlanId(plan.id)}\n className=\"w-full p-4 text-left\"\n >\n <div className=\"flex items-start justify-between\">\n <div className=\"flex items-start gap-3\">\n <div\n className={`size-5 mt-0.5 rounded-full border-2 flex items-center justify-center shrink-0 ${\n isSelected\n ? 'border-border-strong bg-action-primary-bg'\n : 'border-border-default'\n }`}\n >\n {isSelected && <CheckCircle className=\"size-3 text-action-primary-text\" />}\n </div>\n <div className=\"flex-1\">\n <p className=\"font-semibold text-text-primary\">{plan.name}</p>\n {priceDiff !== 0 && (\n <p\n className={`text-sm ${priceDiff > 0 ? 'text-status-warning-text' : 'text-status-success-text'}`}\n >\n {priceDiff > 0 ? '+' : ''}\n {formatCurrency(priceDiff, plan.currency)} /{' '}\n {formatPlanDuration(plan.duration)}\n </p>\n )}\n </div>\n </div>\n <div className=\"text-right shrink-0 ml-4\">\n <p className=\"font-bold text-text-primary\">\n {formatCurrency(plan.price, plan.currency)}\n </p>\n <p className=\"text-sm text-text-secondary\">\n / {formatPlanDuration(plan.duration)}\n </p>\n </div>\n </div>\n </button>\n\n {/ Features Section - Below the main content /}\n <div className=\"px-4 pb-4 pt-0 ml-8\">\n <CollapsibleFeatures\n features={planFeatures}\n isExpanded={isFeaturesExpanded}\n onToggle={() => toggleFeatures(plan.id)}\n variant=\"available\"\n />\n </div>\n </div>\n );\n })}\n </div>\n </div>\n\n {/ Summary & Action /}\n {selectedPlan &&\n (() => {\n const currentAggregatedCount = aggregateFeaturesByQuota(currentPlanFeatures).length;\n const selectedPlanFeatures = (selectedPlan.features \|\| []) as PlanFeature[];\n const selectedAggregatedCount = aggregateFeaturesByQuota(selectedPlanFeatures).length;\n\n return (\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4 space-y-4\">\n {/ Plan change visualization /}\n <div className=\"flex items-center justify-center gap-4 py-2\">\n <div className=\"text-center\">\n <p className=\"text-xs text-text-secondary\">From</p>\n <p className=\"font-medium text-text-primary\">{subscription.plan?.name}</p>\n <p className=\"text-xs text-text-secondary\">\n {currentAggregatedCount} feature{currentAggregatedCount !== 1 ? 's' : ''}\n </p>\n </div>\n <ArrowRight className=\"size-5 text-text-secondary\" />\n <div className=\"text-center\">\n <p className=\"text-xs text-text-secondary\">To</p>\n <p className=\"font-medium text-text-link\">{selectedPlan.name}</p>\n <p className=\"text-xs text-text-secondary\">\n {selectedAggregatedCount} feature{selectedAggregatedCount !== 1 ? 's' : ''}\n </p>\n </div>\n </div>\n\n {/ Info message /}\n <p className=\"text-sm text-text-secondary text-center\">\n You'll be taken to checkout to select payment method and complete the change.\n </p>\n\n {/ Action Buttons */}\n <div className=\"flex items-center justify-end gap-3 pt-2 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(\n withBillingAccountId(`/subscriptions/${subscriptionId}`, billingAccountId)\n )\n }\n className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary\"\n >\n Cancel\n </button>\n <button\n type=\"button\"\n onClick={handleProceedToCheckout}\n className=\"px-6 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n >\n {isDowngrade ? 'Downgrade Plan' : 'Upgrade Plan'}\n </button>\n </div>\n </div>\n );\n })()}\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"UpgradeSubscriptionPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/UpgradeSubscriptionPage.tsx"],"sourcesContent":["/*\n Change Plan Page\n * Allows users to change their current subscription to a different plan\n * Shows plan features in collapsible sections for easy comparison\n /\n\nimport { type FC, useState, useMemo } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport {\n ArrowLeft,\n ArrowRight,\n Loader2,\n Package,\n CheckCircle,\n AlertCircle,\n ChevronDown,\n ChevronUp,\n Sparkles,\n Infinity as InfinityIcon,\n} from 'lucide-react';\n\nimport { useSubscription } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { formatCurrency, formatPlanDuration } from '../../../shared/utils/format';\nimport {\n useGetAllPlansQuery,\n useGetDefaultBillingAccountDashboardQuery,\n} from '../../../../generated/global-operations';\nimport type { Plan, PlanDuration, SubscriptionStatus } from '../../../shared/types';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\n\n// Helper type for plan features\ninterface PlanFeature {\n id: string;\n quotaId?: string;\n quota?: {\n id: string;\n name: string;\n limits?: Record<string, number \| string \| boolean>;\n reusable?: boolean;\n quotaType?: string;\n };\n}\n\n// Helper function to format limit values nicely\nconst formatLimitValue = (value: number \| string \| boolean): string => {\n if (typeof value === 'boolean') {\n return value ? 'Yes' : 'No';\n }\n if (typeof value === 'number') {\n if (value === -1 \|\| value === Infinity) return 'Unlimited';\n if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;\n if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;\n return value.toLocaleString();\n }\n return String(value);\n};\n\n// Helper function to get a user-friendly limit key name\nconst formatLimitKey = (key: string): string => {\n return key\n .replace(/_/g, ' ')\n .replace(/([A-Z])/g, ' $1')\n .replace(/^./, (str) => str.toUpperCase())\n .trim();\n};\n\n// Helper function to aggregate features by quotaId\n// Combines limits for features with the same quota\nconst aggregateFeaturesByQuota = (features: PlanFeature[]): PlanFeature[] => {\n const quotaMap = new Map<string, PlanFeature>();\n\n for (const feature of features) {\n const quotaId = feature.quotaId \|\| feature.quota?.id;\n if (!quotaId \|\| !feature.quota) continue;\n\n const existing = quotaMap.get(quotaId);\n if (existing && existing.quota) {\n // Aggregate limits - sum numeric values\n const existingLimits = existing.quota.limits \|\| {};\n const newLimits = feature.quota.limits \|\| {};\n const combinedLimits: Record<string, number \| string \| boolean> = { ...existingLimits };\n\n for (const [key, value] of Object.entries(newLimits)) {\n if (typeof value === 'number' && typeof combinedLimits[key] === 'number') {\n // Sum numeric values (but keep -1/unlimited as unlimited)\n const existingVal = combinedLimits[key] as number;\n if (existingVal === -1 \|\| value === -1) {\n combinedLimits[key] = -1; // Unlimited stays unlimited\n } else {\n combinedLimits[key] = existingVal + value;\n }\n } else if (!(key in combinedLimits)) {\n combinedLimits[key] = value;\n }\n }\n\n existing.quota = {\n ...existing.quota,\n limits: combinedLimits,\n };\n } else {\n // Clone the feature to avoid mutating original\n quotaMap.set(quotaId, {\n ...feature,\n quota: feature.quota\n ? {\n ...feature.quota,\n limits: feature.quota.limits ? { ...feature.quota.limits } : undefined,\n }\n : undefined,\n });\n }\n }\n\n return Array.from(quotaMap.values());\n};\n\n// Collapsible Features Component\ninterface CollapsibleFeaturesProps {\n features: PlanFeature[];\n isExpanded: boolean;\n onToggle: () => void;\n variant?: 'current' \| 'available';\n}\n\nconst CollapsibleFeatures: FC<CollapsibleFeaturesProps> = ({\n features,\n isExpanded,\n onToggle,\n variant = 'available',\n}) => {\n // Aggregate features with same quotaId\n const aggregatedFeatures = useMemo(() => aggregateFeaturesByQuota(features), [features]);\n const featureCount = aggregatedFeatures.length;\n\n if (featureCount === 0) {\n return <p className=\"text-xs text-text-secondary italic\">No features defined</p>;\n }\n\n return (\n <div className=\"mt-2\">\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation();\n onToggle();\n }}\n className={`flex items-center gap-1.5 text-xs font-medium transition-colors ${\n variant === 'current'\n ? 'text-text-secondary hover:text-text-primary'\n : 'text-text-link hover:text-text-link'\n }`}\n >\n <Sparkles className=\"size-3\" />\n <span>\n {featureCount} feature{featureCount !== 1 ? 's' : ''}\n </span>\n {isExpanded ? <ChevronUp className=\"size-3\" /> : <ChevronDown className=\"size-3\" />}\n </button>\n\n {isExpanded && (\n <div className={`mt-2 space-y-2 ${variant === 'current' ? 'pl-0' : 'pl-1'}`}>\n {aggregatedFeatures.map((feature) => {\n const quota = feature.quota;\n if (!quota) return null;\n\n const limits = quota.limits \|\| {};\n const limitEntries = Object.entries(limits);\n\n return (\n <div\n key={feature.id}\n className={`rounded-button p-2 ${\n variant === 'current' ? 'bg-bg-sunken' : 'bg-[var(--color-accent-soft)]'\n }`}\n >\n <p\n className={`text-xs font-medium ${\n variant === 'current' ? 'text-text-primary' : 'text-text-primary'\n }`}\n >\n {quota.name}\n </p>\n {limitEntries.length > 0 && (\n <div className=\"mt-1 flex flex-wrap gap-x-3 gap-y-1\">\n {limitEntries.map(([key, value]) => (\n <div\n key={key}\n className=\"flex items-center gap-1 text-xs text-text-secondary\"\n >\n <span className=\"opacity-70\">{formatLimitKey(key)}:</span>\n <span className=\"font-medium text-text-primary flex items-center gap-0.5\">\n {value === -1 \|\| value === Infinity ? (\n <>\n <InfinityIcon className=\"size-3\" />\n <span className=\"sr-only\">Unlimited</span>\n </>\n ) : (\n formatLimitValue(value as number \| string \| boolean)\n )}\n </span>\n </div>\n ))}\n </div>\n )}\n {quota.reusable && (\n <span className=\"inline-block mt-1 text-[10px] px-1.5 py-0.5 rounded bg-status-success-bg-subtle text-status-success-text\">\n Reusable\n </span>\n )}\n </div>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport const UpgradeSubscriptionPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const { subscriptionId } = useParams<{ subscriptionId: string }>();\n const navigateTo = useBillingNavigate();\n const { orgId } = useBilling();\n const permissions = useBillingPermissions();\n const { selectedAccountId } = useBillingAccountSelection({\n orgId,\n syncFromUrl: true,\n urlParamName: 'billingAccountId',\n });\n\n const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n fetchPolicy: 'cache-first',\n });\n const billingAccountId =\n selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n const { subscription, isLoading: subscriptionLoading } = useSubscription(\n subscriptionId,\n billingAccountId\n );\n\n // Fetch available plans (includes features)\n const { data: plansData, loading: plansLoading } = useGetAllPlansQuery();\n\n // State\n const [selectedPlanId, setSelectedPlanId] = useState<string \| null>(null);\n const [expandedFeatures, setExpandedFeatures] = useState<Record<string, boolean>>({});\n\n // Get all plans including current for feature lookup\n const allPlans = useMemo(() => {\n return (plansData?.getAllPlans \|\| []) as Plan[];\n }, [plansData]);\n\n // Get current plan with features from allPlans\n const currentPlanWithFeatures = useMemo(() => {\n const currentPlanId = subscription?.planId;\n return allPlans.find((p) => p.id === currentPlanId) \|\| null;\n }, [allPlans, subscription?.planId]);\n\n // Filter plans - show all other active plans (same product if productID exists, otherwise all)\n const availablePlans = useMemo(() => {\n const currentPlanId = subscription?.planId;\n const currentProductId = subscription?.plan?.productID;\n\n return allPlans\n .filter((plan) => {\n // Always exclude current plan\n if (plan.id === currentPlanId) return false;\n // Only show active plans\n if (!plan.isActive) return false;\n // If we have productID, filter by same product\n if (currentProductId) {\n return plan.productID === currentProductId;\n }\n // If no productID, show all active plans\n return true;\n })\n .sort((a, b) => a.price - b.price);\n }, [allPlans, subscription]);\n\n const selectedPlan = useMemo(() => {\n return availablePlans.find((p) => p.id === selectedPlanId) \|\| null;\n }, [availablePlans, selectedPlanId]);\n\n const isDowngrade =\n selectedPlan !== null && selectedPlan.price < (subscription?.plan?.price ?? 0);\n\n // Toggle feature expansion\n const toggleFeatures = (planId: string) => {\n setExpandedFeatures((prev) => ({\n ...prev,\n [planId]: !prev[planId],\n }));\n };\n\n // Handle proceed to checkout\n const handleProceedToCheckout = () => {\n if (!subscription \|\| !selectedPlan) return;\n const currentPrice = subscription.plan?.price ?? 0;\n const isDowngrade = selectedPlan.price < currentPrice;\n navigateTo(`/checkout/${selectedPlan.id}`, {\n state: {\n purchaseType: 'PLAN',\n // Upgrade: old quotas transfer to new plan immediately\n // Downgrade: old plan runs to natural expiry, auto-renewal cancelled\n ...(isDowngrade\n ? { downgradeFromSubscriptionId: subscription.id }\n : { upgradeFromSubscriptionId: subscription.id }),\n currentPlanName: subscription.plan?.name,\n billingAccountId: subscription.billingAccountId,\n },\n });\n };\n\n // Permission check\n if (!permissions.canUpdateSubscription) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n <AlertCircle className=\"size-6 text-text-secondary\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n <p className=\"text-sm text-text-secondary max-w-sm\">\n You don't have permission to change subscriptions.\n </p>\n </div>\n </div>\n );\n }\n\n // Loading state\n if (subscriptionLoading \|\| plansLoading) {\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <Loader2 className=\"size-8 animate-spin mx-auto text-text-link\" />\n <p className=\"text-text-secondary\">Loading plans…</p>\n </div>\n </div>\n );\n }\n\n // Subscription not found\n if (!subscription) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <AlertCircle className=\"size-12 mx-auto text-status-error-text\" />\n <h2 className=\"text-lg font-semibold text-text-primary\">Subscription not found</h2>\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button\"\n >\n {tr('billing.subscriptions.backToSubscriptions', 'Back to Subscriptions')}\n </button>\n </div>\n </div>\n );\n }\n\n // Subscription is not active (already upgraded/canceled/etc)\n const isActive = subscription.status === ('active' as SubscriptionStatus);\n if (!isActive) {\n return (\n <div className=\"max-w-2xl mx-auto p-6 space-y-6\">\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(withBillingAccountId(`/subscriptions/${subscriptionId}`, billingAccountId))\n }\n className=\"flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('billing.subscriptions.backToSubscription', 'Back to Subscription')}\n </button>\n\n <div className=\"text-center space-y-4 py-12\">\n <AlertCircle className=\"size-12 mx-auto text-status-warning-text\" />\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.subscriptions.cannotChangePlan', 'Cannot Change Plan')}\n </h2>\n <p className=\"text-sm text-text-secondary max-w-md mx-auto\">\n {tr(\n 'billing.subscriptions.notActiveMessage',\n 'This subscription is no longer active. You can only change plans for active subscriptions.'\n )}\n </p>\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button\"\n >\n {tr('billing.subscriptions.viewAll', 'View All Subscriptions')}\n </button>\n </div>\n </div>\n );\n }\n\n // No other plans available\n if (availablePlans.length === 0) {\n return (\n <div className=\"max-w-2xl mx-auto p-6 space-y-6\">\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(withBillingAccountId(`/subscriptions/${subscriptionId}`, billingAccountId))\n }\n className=\"flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('billing.subscriptions.backToSubscription', 'Back to Subscription')}\n </button>\n\n <div className=\"text-center space-y-4 py-12\">\n <Package className=\"size-12 mx-auto text-text-secondary\" />\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.subscriptions.noPlansAvailable', 'No Other Plans Available')}\n </h2>\n <p className=\"text-sm text-text-secondary max-w-md mx-auto\">\n {tr(\n 'billing.subscriptions.noPlansMessage',\n 'There are no other active plans available for this product.'\n )}\n </p>\n </div>\n </div>\n );\n }\n\n const currentPlanFeatures = (currentPlanWithFeatures?.features \|\| []) as PlanFeature[];\n\n return (\n <div className=\"max-w-3xl mx-auto p-6 space-y-6\">\n {/ Header /}\n <div>\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(withBillingAccountId(`/subscriptions/${subscriptionId}`, billingAccountId))\n }\n className=\"flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary mb-4\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('billing.subscriptions.backToSubscription', 'Back to Subscription')}\n </button>\n\n <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n {tr('billing.subscriptions.changeYourPlan', 'Change Your Plan')}\n </h1>\n <p className=\"text-text-secondary mt-1\">\n Switch from <span className=\"font-medium\">{subscription.plan?.name}</span> to a different\n plan\n </p>\n <PagePurpose className=\"mt-3\">\n {tr(\n 'billing.subscriptions.upgradePurpose',\n 'Move this subscription to a different plan — upgrade for more capacity or downgrade to save. Compare what each plan includes and see how the change affects your billing before you confirm.'\n )}\n </PagePurpose>\n </div>\n\n {/ Current Plan Card /}\n <div className=\"bg-bg-sunken border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-start justify-between\">\n <div className=\"flex-1\">\n <p className=\"text-sm text-text-secondary\">Current Plan</p>\n <p className=\"font-semibold text-text-primary\">{subscription.plan?.name}</p>\n\n {/ Current Plan Features - Collapsible /}\n <CollapsibleFeatures\n features={currentPlanFeatures}\n isExpanded={expandedFeatures['current'] \|\| false}\n onToggle={() => toggleFeatures('current')}\n variant=\"current\"\n />\n </div>\n <div className=\"text-right shrink-0 ml-4\">\n <p className=\"text-sm text-text-secondary\">Price</p>\n <p className=\"font-semibold text-text-primary\">\n {formatCurrency(subscription.plan?.price \|\| 0, subscription.plan?.currency \|\| 'USD')}\n <span className=\"text-sm font-normal text-text-secondary\">\n {' '}\n / {formatPlanDuration((subscription.plan?.duration \|\| 'monthly') as PlanDuration)}\n </span>\n </p>\n </div>\n </div>\n </div>\n\n {/ Available Plans /}\n <div className=\"space-y-3\">\n <h2 className=\"text-lg font-semibold text-text-primary\">Select New Plan</h2>\n <div className=\"grid gap-3\">\n {availablePlans.map((plan) => {\n const priceDiff = plan.price - (subscription.plan?.price \|\| 0);\n const isSelected = selectedPlanId === plan.id;\n const planFeatures = (plan.features \|\| []) as PlanFeature[];\n const isFeaturesExpanded = expandedFeatures[plan.id] \|\| false;\n\n return (\n <div\n key={plan.id}\n className={`rounded-lg border transition-all ${\n isSelected\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-2 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle bg-bg-surface hover:border-border-strong'\n }`}\n >\n {/ Plan Header - Clickable for selection /}\n <button\n type=\"button\"\n onClick={() => setSelectedPlanId(plan.id)}\n className=\"w-full p-4 text-left\"\n >\n <div className=\"flex items-start justify-between\">\n <div className=\"flex items-start gap-3\">\n <div\n className={`size-5 mt-0.5 rounded-full border-2 flex items-center justify-center shrink-0 ${\n isSelected\n ? 'border-border-strong bg-action-primary-bg'\n : 'border-border-default'\n }`}\n >\n {isSelected && <CheckCircle className=\"size-3 text-action-primary-text\" />}\n </div>\n <div className=\"flex-1\">\n <p className=\"font-semibold text-text-primary\">{plan.name}</p>\n {priceDiff !== 0 && (\n <p\n className={`text-sm ${priceDiff > 0 ? 'text-status-warning-text' : 'text-status-success-text'}`}\n >\n {priceDiff > 0 ? '+' : ''}\n {formatCurrency(priceDiff, plan.currency)} /{' '}\n {formatPlanDuration(plan.duration)}\n </p>\n )}\n </div>\n </div>\n <div className=\"text-right shrink-0 ml-4\">\n <p className=\"font-bold text-text-primary\">\n {formatCurrency(plan.price, plan.currency)}\n </p>\n <p className=\"text-sm text-text-secondary\">\n / {formatPlanDuration(plan.duration)}\n </p>\n </div>\n </div>\n </button>\n\n {/ Features Section - Below the main content /}\n <div className=\"px-4 pb-4 pt-0 ml-8\">\n <CollapsibleFeatures\n features={planFeatures}\n isExpanded={isFeaturesExpanded}\n onToggle={() => toggleFeatures(plan.id)}\n variant=\"available\"\n />\n </div>\n </div>\n );\n })}\n </div>\n </div>\n\n {/ Summary & Action /}\n {selectedPlan &&\n (() => {\n const currentAggregatedCount = aggregateFeaturesByQuota(currentPlanFeatures).length;\n const selectedPlanFeatures = (selectedPlan.features \|\| []) as PlanFeature[];\n const selectedAggregatedCount = aggregateFeaturesByQuota(selectedPlanFeatures).length;\n\n return (\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4 space-y-4\">\n {/ Plan change visualization /}\n <div className=\"flex items-center justify-center gap-4 py-2\">\n <div className=\"text-center\">\n <p className=\"text-xs text-text-secondary\">From</p>\n <p className=\"font-medium text-text-primary\">{subscription.plan?.name}</p>\n <p className=\"text-xs text-text-secondary\">\n {currentAggregatedCount} feature{currentAggregatedCount !== 1 ? 's' : ''}\n </p>\n </div>\n <ArrowRight className=\"size-5 text-text-secondary\" />\n <div className=\"text-center\">\n <p className=\"text-xs text-text-secondary\">To</p>\n <p className=\"font-medium text-text-link\">{selectedPlan.name}</p>\n <p className=\"text-xs text-text-secondary\">\n {selectedAggregatedCount} feature{selectedAggregatedCount !== 1 ? 's' : ''}\n </p>\n </div>\n </div>\n\n {/ Info message /}\n <p className=\"text-sm text-text-secondary text-center\">\n You'll be taken to checkout to select payment method and complete the change.\n </p>\n\n {/ Action Buttons */}\n <div className=\"flex items-center justify-end gap-3 pt-2 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(\n withBillingAccountId(`/subscriptions/${subscriptionId}`, billingAccountId)\n )\n }\n className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary\"\n >\n Cancel\n </button>\n <button\n type=\"button\"\n onClick={handleProceedToCheckout}\n className=\"px-6 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n >\n {isDowngrade ? 'Downgrade Plan' : 'Upgrade Plan'}\n </button>\n </div>\n </div>\n );\n })()}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/billing/providers/BillingProvider.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { createContext as e, useContext as t } from "react";
-import { MemoryRouter as n } from "react-router-dom";
+import { MemoryRouter as n } from "react-router";
 import { PermissionProvider as r } from "@burdenoff/fe-libs/shared/providers/shell";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/billing/providers/BillingProvider.tsx

package/dist/billing/providers/BillingProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BillingProvider.js","names":[],"sources":["../../../src/billing/providers/BillingProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { createContext, useContext } from 'react';\nimport { MemoryRouter } from 'react-router~~-dom~~';\nimport { PermissionProvider } from '@burdenoff/fe-libs/shared/providers/shell';\nimport type { BillingRootProps } from '../types';\n\n/*\n Context value for Billing microfrontend\n /\ntype BillingContextValue = BillingRootProps;\n\nconst BillingContext = createContext<BillingContextValue \| null>(null);\n\n/\n Hook to access Billing context\n /\nexport const useBilling = () => {\n const context = useContext(BillingContext);\n if (!context) {\n throw new Error('useBilling must be used within BillingProvider');\n }\n return context;\n};\n\n/\n Provider component for Billing microfrontend\n * Sets up routing and context\n \n When integrated into a shell (basePath provided), the shell already has a router\n * so we don't create another one. When standalone (no basePath), use MemoryRouter.\n */\nexport const BillingProvider: FC<PropsWithChildren<BillingRootProps>> = ({\n children,\n basePath,\n navigate,\n currentUser,\n workspaceId,\n orgId,\n productId,\n apiGatewayUrl,\n authToken,\n stripePublishableKey,\n razorpayKey,\n onSubscriptionCreate,\n onSubscriptionUpdate,\n onPaymentProcess,\n registerNavItems,\n registerFooterItems,\n}) => {\n const contextValue: BillingContextValue = {\n basePath,\n navigate,\n currentUser,\n workspaceId,\n orgId,\n productId,\n apiGatewayUrl,\n authToken,\n stripePublishableKey,\n razorpayKey,\n onSubscriptionCreate,\n onSubscriptionUpdate,\n onPaymentProcess,\n registerNavItems,\n registerFooterItems,\n };\n\n const content = (\n <BillingContext.Provider value={contextValue}>\n <PermissionProvider scopeId={orgId} gateway=\"global\">\n {children}\n </PermissionProvider>\n </BillingContext.Provider>\n );\n\n // When integrated into a shell (basePath provided), the shell already has a router\n // so we don't create another one. When standalone (no basePath), use MemoryRouter.\n if (basePath) {\n return content;\n }\n\n // Standalone mode: create MemoryRouter for independent operation\n return <MemoryRouter>{content}</MemoryRouter>;\n};\n"],"mappings":";;;;;AAWA,IAAM,IAAiB,EAA0C,KAAK,EAKzD,UAAmB;CAC9B,IAAM,IAAU,EAAW,EAAe;AAC1C,KAAI,CAAC,EACH,OAAU,MAAM,iDAAiD;AAEnE,QAAO;GAUI,KAA4D,EACvE,aACA,aACA,aACA,gBACA,gBACA,UACA,cACA,kBACA,cACA,yBACA,gBACA,yBACA,yBACA,qBACA,qBACA,6BACI;CACJ,IAAM,IAAoC;EACxC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EAEK,IACJ,kBAAC,EAAe,UAAhB;EAAyB,OAAO;YAC9B,kBAAC,GAAD;GAAoB,SAAS;GAAO,SAAQ;GACzC;GACkB,CAAA;EACG,CAAA;AAU5B,QALI,IACK,IAIF,kBAAC,GAAD,EAAA,UAAe,GAAuB,CAAA"}
1	+ {"version":3,"file":"BillingProvider.js","names":[],"sources":["../../../src/billing/providers/BillingProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { createContext, useContext } from 'react';\nimport { MemoryRouter } from 'react-router';\nimport { PermissionProvider } from '@burdenoff/fe-libs/shared/providers/shell';\nimport type { BillingRootProps } from '../types';\n\n/*\n Context value for Billing microfrontend\n /\ntype BillingContextValue = BillingRootProps;\n\nconst BillingContext = createContext<BillingContextValue \| null>(null);\n\n/\n Hook to access Billing context\n /\nexport const useBilling = () => {\n const context = useContext(BillingContext);\n if (!context) {\n throw new Error('useBilling must be used within BillingProvider');\n }\n return context;\n};\n\n/\n Provider component for Billing microfrontend\n * Sets up routing and context\n \n When integrated into a shell (basePath provided), the shell already has a router\n * so we don't create another one. When standalone (no basePath), use MemoryRouter.\n */\nexport const BillingProvider: FC<PropsWithChildren<BillingRootProps>> = ({\n children,\n basePath,\n navigate,\n currentUser,\n workspaceId,\n orgId,\n productId,\n apiGatewayUrl,\n authToken,\n stripePublishableKey,\n razorpayKey,\n onSubscriptionCreate,\n onSubscriptionUpdate,\n onPaymentProcess,\n registerNavItems,\n registerFooterItems,\n}) => {\n const contextValue: BillingContextValue = {\n basePath,\n navigate,\n currentUser,\n workspaceId,\n orgId,\n productId,\n apiGatewayUrl,\n authToken,\n stripePublishableKey,\n razorpayKey,\n onSubscriptionCreate,\n onSubscriptionUpdate,\n onPaymentProcess,\n registerNavItems,\n registerFooterItems,\n };\n\n const content = (\n <BillingContext.Provider value={contextValue}>\n <PermissionProvider scopeId={orgId} gateway=\"global\">\n {children}\n </PermissionProvider>\n </BillingContext.Provider>\n );\n\n // When integrated into a shell (basePath provided), the shell already has a router\n // so we don't create another one. When standalone (no basePath), use MemoryRouter.\n if (basePath) {\n return content;\n }\n\n // Standalone mode: create MemoryRouter for independent operation\n return <MemoryRouter>{content}</MemoryRouter>;\n};\n"],"mappings":";;;;;AAWA,IAAM,IAAiB,EAA0C,KAAK,EAKzD,UAAmB;CAC9B,IAAM,IAAU,EAAW,EAAe;AAC1C,KAAI,CAAC,EACH,OAAU,MAAM,iDAAiD;AAEnE,QAAO;GAUI,KAA4D,EACvE,aACA,aACA,aACA,gBACA,gBACA,UACA,cACA,kBACA,cACA,yBACA,gBACA,yBACA,yBACA,qBACA,qBACA,6BACI;CACJ,IAAM,IAAoC;EACxC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EAEK,IACJ,kBAAC,EAAe,UAAhB;EAAyB,OAAO;YAC9B,kBAAC,GAAD;GAAoB,SAAS;GAAO,SAAQ;GACzC;GACkB,CAAA;EACG,CAAA;AAU5B,QALI,IACK,IAIF,kBAAC,GAAD,EAAA,UAAe,GAAuB,CAAA"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-billing",
-  "version": "2026.731.1",
+  "version": "2026.802.1",
   "description": "Billing microfrontend for Burdenoff products",
   "type": "module",
   "files": [
@@ -43,14 +43,14 @@
   },
   "dependencies": {
     "@apollo/client": "^4.1.4",
-    "@burdenoff/fe-libs": "2026.625.5",
+    "@burdenoff/fe-libs": "2026.801.1",
     "@tanstack/react-query": "^5.90.16",
     "clsx": "^2.1.1",
     "graphql": "^16.10.0",
     "lucide-react": "^0.468.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.3",
+    "react-router": "^8.3.0",
     "tailwind-merge": "^3.4.0",
     "zustand": "^5.0.3"
   },