fix(already-cancelled-sub): UI should allow restoring subscription

Author: icecrasher321

apps/sim/app/api/billing/portal/route.ts

@@ -1,6 +1,6 @@
 import { db } from '@sim/db'
 import { subscription as subscriptionTable, user } from '@sim/db/schema'
-import { and, eq } from 'drizzle-orm'
+import { and, eq, or } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { getSession } from '@/lib/auth'
 import { requireStripeClient } from '@/lib/billing/stripe-client'
@@ -38,7 +38,10 @@ export async function POST(request: NextRequest) {
         .where(
           and(
             eq(subscriptionTable.referenceId, organizationId),
-            eq(subscriptionTable.status, 'active')
+            or(
+              eq(subscriptionTable.status, 'active'),
+              eq(subscriptionTable.cancelAtPeriodEnd, true)
+            )
           )
         )
         .limit(1)

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx

@@ -12,7 +12,6 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useSession, useSubscription } from '@/lib/auth-client'
 import { createLogger } from '@/lib/logs/console/logger'
 import { getBaseUrl } from '@/lib/urls/utils'
@@ -202,7 +201,9 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
     <>
       <div className='flex items-center justify-between'>
         <div>
-          <span className='font-medium text-sm'>Manage Subscription</span>
+          <span className='font-medium text-sm'>
+            {isCancelAtPeriodEnd ? 'Restore Subscription' : 'Manage Subscription'}
+          </span>
           {isCancelAtPeriodEnd && (
             <p className='mt-1 text-muted-foreground text-xs'>
               You'll keep access until {formatDate(periodEndDate)}
@@ -217,22 +218,24 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
             'h-8 rounded-[8px] font-medium text-xs transition-all duration-200',
             error
               ? 'border-red-500 text-red-500 dark:border-red-500 dark:text-red-500'
-              : 'text-muted-foreground hover:border-red-500 hover:bg-red-500 hover:text-white dark:hover:border-red-500 dark:hover:bg-red-500'
+              : isCancelAtPeriodEnd
+                ? 'text-muted-foreground hover:border-green-500 hover:bg-green-500 hover:text-white dark:hover:border-green-500 dark:hover:bg-green-500'
+                : 'text-muted-foreground hover:border-red-500 hover:bg-red-500 hover:text-white dark:hover:border-red-500 dark:hover:bg-red-500'
           )}
         >
-          {error ? 'Error' : 'Manage'}
+          {error ? 'Error' : isCancelAtPeriodEnd ? 'Restore' : 'Manage'}
         </Button>
       </div>
 
       <AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>
-              {isCancelAtPeriodEnd ? 'Manage' : 'Cancel'} {subscription.plan} subscription?
+              {isCancelAtPeriodEnd ? 'Restore' : 'Cancel'} {subscription.plan} subscription?
             </AlertDialogTitle>
             <AlertDialogDescription>
               {isCancelAtPeriodEnd
-                ? 'Your subscription is set to cancel at the end of the billing period. You can reactivate it or manage other settings.'
+                ? 'Your subscription is set to cancel at the end of the billing period. Would you like to keep your subscription active?'
                 : `You'll be redirected to Stripe to manage your subscription. You'll keep access until ${formatDate(
                     periodEndDate
                   )}, then downgrade to free plan.`}{' '}
@@ -260,10 +263,10 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
           <AlertDialogFooter className='flex'>
             <AlertDialogCancel
               className='h-9 w-full rounded-[8px]'
-              onClick={handleKeep}
+              onClick={isCancelAtPeriodEnd ? () => setIsDialogOpen(false) : handleKeep}
               disabled={isLoading}
             >
-              Keep Subscription
+              {isCancelAtPeriodEnd ? 'Cancel' : 'Keep Subscription'}
             </AlertDialogCancel>
 
             {(() => {
@@ -275,23 +278,13 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
                   : false)
               ) {
                 return (
-                  <TooltipProvider delayDuration={0}>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <div className='w-full'>
-                          <AlertDialogAction
-                            disabled
-                            className='h-9 w-full cursor-not-allowed rounded-[8px] bg-muted text-muted-foreground opacity-50'
-                          >
-                            Continue
-                          </AlertDialogAction>
-                        </div>
-                      </TooltipTrigger>
-                      <TooltipContent side='top'>
-                        <p>Subscription will be cancelled at end of billing period</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                  <AlertDialogAction
+                    onClick={handleKeep}
+                    className='h-9 w-full rounded-[8px] bg-green-500 text-white transition-all duration-200 hover:bg-green-600 dark:bg-green-500 dark:hover:bg-green-600'
+                    disabled={isLoading}
+                  >
+                    {isLoading ? 'Restoring...' : 'Restore Subscription'}
+                  </AlertDialogAction>
                 )
               }
               return (