🐛 (stripe) Fix plan update and management

apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/CurrentSubscriptionContent.tsx

@@ -7,6 +7,7 @@ import {
   Button,
   Heading,
 } from '@chakra-ui/react'
+import { useToast } from 'components/shared/hooks/useToast'
 import { PlanTag } from 'components/shared/PlanTag'
 import { Plan } from 'db'
 import React, { useState } from 'react'
@@ -26,38 +27,48 @@ export const CurrentSubscriptionContent = ({
   const [isCancelling, setIsCancelling] = useState(false)
   const [isRedirectingToBillingPortal, setIsRedirectingToBillingPortal] =
     useState(false)
+  const { showToast } = useToast()
 
   const cancelSubscription = async () => {
     if (!stripeId) return
     setIsCancelling(true)
-    await cancelSubscriptionQuery(stripeId)
+    const { error } = await cancelSubscriptionQuery(stripeId)
+    if (error) {
+      showToast({ description: error.message })
+      return
+    }
     onCancelSuccess()
     setIsCancelling(false)
   }
 
   const isSubscribed = (plan === Plan.STARTER || plan === Plan.PRO) && stripeId
 
-  if (isCancelling) return <Spinner colorScheme="gray" />
   return (
     <Stack gap="2">
       <Heading fontSize="3xl">Subscription</Heading>
       <HStack>
         <Text>Current workspace subscription: </Text>
-        <PlanTag plan={plan} />
-        {isSubscribed && (
-          <Link
-            as="button"
-            color="gray.500"
-            textDecor="underline"
-            fontSize="sm"
-            onClick={cancelSubscription}
-          >
-            Cancel my subscription
-          </Link>
+        {isCancelling ? (
+          <Spinner color="gray.500" size="xs" />
+        ) : (
+          <>
+            <PlanTag plan={plan} />
+            {isSubscribed && (
+              <Link
+                as="button"
+                color="gray.500"
+                textDecor="underline"
+                fontSize="sm"
+                onClick={cancelSubscription}
+              >
+                Cancel my subscription
+              </Link>
+            )}
+          </>
         )}
       </HStack>
 
-      {isSubscribed && (
+      {isSubscribed && !isCancelling && (
         <>
           <Stack gap="1">
             <Text fontSize="sm">

apps/builder/components/shared/ChangePlanForm/ChangePlanForm.tsx

@@ -35,7 +35,7 @@ export const ChangePlanForm = () => {
       selectedStorageLimitIndex === undefined
     )
       return
-    await pay({
+    const response = await pay({
       stripeId: workspace.stripeId ?? undefined,
       user,
       plan,
@@ -43,6 +43,10 @@ export const ChangePlanForm = () => {
       additionalChats: selectedChatsLimitIndex,
       additionalStorage: selectedStorageLimitIndex,
     })
+    if (typeof response === 'object' && response?.error) {
+      showToast({ description: response.error.message })
+      return
+    }
     refreshCurrentSubscriptionInfo({
       additionalChatsIndex: selectedChatsLimitIndex,
       additionalStorageIndex: selectedStorageLimitIndex,

apps/builder/components/shared/ChangePlanForm/queries/updatePlan.tsx

@@ -20,7 +20,7 @@ type UpgradeProps = {
 export const pay = async ({
   stripeId,
   ...props
-}: UpgradeProps): Promise<{ newPlan: Plan } | undefined | void> =>
+}: UpgradeProps): Promise<{ newPlan?: Plan; error?: Error } | void> =>
   isDefined(stripeId)
     ? updatePlan({ ...props, stripeId })
     : redirectToCheckout(props)
@@ -31,13 +31,13 @@ export const updatePlan = async ({
   workspaceId,
   additionalChats,
   additionalStorage,
-}: Omit<UpgradeProps, 'user'>): Promise<{ newPlan: Plan } | undefined> => {
+}: Omit<UpgradeProps, 'user'>): Promise<{ newPlan?: Plan; error?: Error }> => {
   const { data, error } = await sendRequest<{ message: string }>({
     method: 'PUT',
     url: '/api/stripe/subscription',
     body: { workspaceId, plan, stripeId, additionalChats, additionalStorage },
   })
-  if (error || !data) return
+  if (error || !data) return { error }
   return { newPlan: plan }
 }