feat: add resume subscription functionality in OrganizationSettings for improved user control over billing

components/settings/OrganizationSettings.tsx

@@ -16,7 +16,7 @@ import {
   OrganizationInvitation,
   Organization
 } from '@/lib/api/organization'
-import { getSubscription, createPortalSession, getInvoices, cancelSubscription, changePlan, createCheckoutSession, SubscriptionDetails, Invoice } from '@/lib/api/billing'
+import { getSubscription, createPortalSession, getInvoices, cancelSubscription, resumeSubscription, changePlan, createCheckoutSession, SubscriptionDetails, Invoice } from '@/lib/api/billing'
 import { TRAFFIC_TIERS, PLAN_ID_SOLO, getTierIndexForLimit, getLimitForTierIndex, getSitesLimitForPlan } from '@/lib/plans'
 import { getAuditLog, AuditLogEntry, GetAuditLogParams } from '@/lib/api/audit'
 import { getNotificationSettings, updateNotificationSettings } from '@/lib/api/notification-settings'
@@ -83,6 +83,7 @@ export default function OrganizationSettings() {
   const [isRedirectingToPortal, setIsRedirectingToPortal] = useState(false)
   const [cancelLoadingAction, setCancelLoadingAction] = useState<'period_end' | 'immediate' | null>(null)
   const [showCancelPrompt, setShowCancelPrompt] = useState(false)
+  const [isResuming, setIsResuming] = useState(false)
   const [showChangePlanModal, setShowChangePlanModal] = useState(false)
   const [changePlanTierIndex, setChangePlanTierIndex] = useState(2)
   const [changePlanYearly, setChangePlanYearly] = useState(false)
@@ -328,6 +329,19 @@ export default function OrganizationSettings() {
     }
   }
 
+  const handleResumeSubscription = async () => {
+    setIsResuming(true)
+    try {
+      await resumeSubscription()
+      toast.success('Subscription will continue. Cancellation has been undone.')
+      loadSubscription()
+    } catch (error: any) {
+      toast.error(getAuthErrorMessage(error) || error.message || 'Failed to resume subscription')
+    } finally {
+      setIsResuming(false)
+    }
+  }
+
   const openChangePlanModal = () => {
     if (subscription?.pageview_limit != null && subscription.pageview_limit > 0) {
       setChangePlanTierIndex(getTierIndexForLimit(subscription.pageview_limit))
@@ -813,7 +827,8 @@ export default function OrganizationSettings() {
 
                     {/* Cancel-at-period-end notice */}
                     {subscription.cancel_at_period_end && (
-                      <div className="p-4 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800 rounded-2xl">
+                      <div className="p-4 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                        <div>
                           <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
                             Your subscription will end on{' '}
                             <span className="font-semibold">
@@ -827,6 +842,16 @@ export default function OrganizationSettings() {
                             You keep full access until then. Your data is retained for 30 days after. Use "Change plan" to resubscribe.
                           </p>
                         </div>
+                        <Button
+                          variant="secondary"
+                          onClick={handleResumeSubscription}
+                          disabled={isResuming}
+                          isLoading={isResuming}
+                          className="shrink-0"
+                        >
+                          Keep my subscription
+                        </Button>
+                      </div>
                     )}
 
                     {/* Plan & Usage card */}

lib/api/billing.ts

@@ -74,6 +74,13 @@ export async function cancelSubscription(params?: CancelSubscriptionParams): Pro
   })
 }
 
+/** Clears cancel_at_period_end so the subscription continues past the current period. */
+export async function resumeSubscription(): Promise<{ ok: boolean }> {
+  return await billingFetch<{ ok: boolean }>('/api/billing/resume', {
+    method: 'POST',
+  })
+}
+
 export interface ChangePlanParams {
   plan_id: string
   interval: string