Fix: Billing fail/success toasts (#3516)

packages/frontend-2/components/header/NavUserMenu.vue

@@ -190,9 +190,6 @@ const toggleSettingsDialog = (target: AvailableSettingsMenuKeys) => {
 const deleteSettingsQuery = (): void => {
   const currentQueryParams = { ...route.query }
   delete currentQueryParams.settings
-  delete currentQueryParams.workspace
-  delete currentQueryParams.error
-
   router.push({ query: currentQueryParams })
 }
 
@@ -202,8 +199,6 @@ const openFeedbackDialog = () => {
 
 onMounted(() => {
   const settingsQuery = route.query?.settings
-  const workspaceQuery = route.query?.workspace
-  const errorQuery = route.query?.error
 
   if (settingsQuery && isString(settingsQuery)) {
     if (settingsQuery.includes('server') && !isAdmin.value) {
@@ -215,22 +210,6 @@ onMounted(() => {
       return
     }
 
-    if (workspaceQuery && isString(workspaceQuery)) {
-      workspaceSettingsDialogTarget.value = workspaceQuery
-
-      if (errorQuery && isString(errorQuery)) {
-        triggerNotification({
-          type: ToastNotificationType.Danger,
-          title: errorQuery
-        })
-      } else {
-        triggerNotification({
-          type: ToastNotificationType.Success,
-          title: 'SSO settings successfully updated'
-        })
-      }
-    }
-
     showSettingsDialog.value = true
     settingsDialogTarget.value = settingsQuery
     deleteSettingsQuery()

packages/frontend-2/components/settings/workspaces/Billing.vue

@@ -135,13 +135,6 @@ const props = defineProps<{
 }>()
 
 const isBillingIntegrationEnabled = useIsBillingIntegrationEnabled()
-const seatPrices = ref({
-  [WorkspacePlans.Team]: pricingPlansConfig.plans[WorkspacePlans.Team].cost,
-  [WorkspacePlans.Pro]: pricingPlansConfig.plans[WorkspacePlans.Pro].cost,
-  [WorkspacePlans.Business]: pricingPlansConfig.plans[WorkspacePlans.Business].cost
-})
-
-const route = useRoute()
 const { result: workspaceResult } = useQuery(
   settingsWorkspaceBillingQuery,
   () => ({
@@ -151,7 +144,13 @@ const { result: workspaceResult } = useQuery(
     enabled: isBillingIntegrationEnabled
   })
 )
-const { billingPortalRedirect, cancelCheckoutSession } = useBillingActions()
+const { billingPortalRedirect } = useBillingActions()
+
+const seatPrices = ref({
+  [WorkspacePlans.Team]: pricingPlansConfig.plans[WorkspacePlans.Team].cost,
+  [WorkspacePlans.Pro]: pricingPlansConfig.plans[WorkspacePlans.Pro].cost,
+  [WorkspacePlans.Business]: pricingPlansConfig.plans[WorkspacePlans.Business].cost
+})
 
 const currentPlan = computed(() => workspaceResult.value?.workspace.plan)
 const subscription = computed(() => workspaceResult.value?.workspace.subscription)
@@ -192,13 +191,4 @@ const nextPaymentDue = computed(() =>
 const isAdmin = computed(
   () => workspaceResult.value?.workspace.role === Roles.Workspace.Admin
 )
-
-onMounted(() => {
-  const paymentStatusQuery = route.query?.payment_status
-  const sessionIdQuery = route.query?.session_id
-
-  if (sessionIdQuery && String(paymentStatusQuery) === WorkspacePlanStatuses.Canceled) {
-    cancelCheckoutSession(String(sessionIdQuery), props.workspaceId)
-  }
-})
 </script>

packages/frontend-2/components/workspace/ProjectList.vue

@@ -127,7 +127,7 @@ import {
   SettingMenuKeys,
   type AvailableSettingsMenuKeys
 } from '~/lib/settings/helpers/types'
-
+import { useBillingActions } from '~/lib/billing/composables/actions'
 graphql(`
   fragment WorkspaceProjectList_ProjectCollection on ProjectCollection {
     totalCount
@@ -138,6 +138,7 @@ graphql(`
   }
 `)
 
+const { validateCheckoutSession } = useBillingActions()
 const { workspaceMixpanelUpdateGroup } = useWorkspacesMixpanel()
 const areQueriesLoading = useQueryLoading()
 const route = useRoute()
@@ -280,6 +281,7 @@ onResult((queryResult) => {
     useHeadSafe({
       title: queryResult.data.workspaceBySlug.name
     })
+    validateCheckoutSession(queryResult.data.workspaceBySlug.id)
   }
 })
 </script>

packages/frontend-2/lib/billing/composables/actions.ts

@@ -5,10 +5,15 @@ import type {
   BillingInterval
 } from '~/lib/common/generated/gql/graphql'
 import { settingsBillingCancelCheckoutSessionMutation } from '~/lib/settings/graphql/mutations'
+import { WorkspacePlanStatuses } from '~/lib/common/generated/gql/graphql'
+import { ToastNotificationType, useGlobalToast } from '~~/lib/common/composables/toast'
 import { useMixpanel } from '~/lib/core/composables/mp'
 
 export const useBillingActions = () => {
   const mixpanel = useMixpanel()
+  const route = useRoute()
+  const router = useRouter()
+  const { triggerNotification } = useGlobalToast()
   const { client: apollo } = useApolloClient()
   const { mutate: cancelCheckoutSessionMutation } = useMutation(
     settingsBillingCancelCheckoutSessionMutation
@@ -58,9 +63,35 @@ export const useBillingActions = () => {
     })
   }
 
+  const validateCheckoutSession = (workspaceId: string) => {
+    const sessionIdQuery = route.query?.session_id
+    const paymentStatusQuery = route.query?.payment_status
+
+    if (sessionIdQuery && paymentStatusQuery) {
+      if (paymentStatusQuery === WorkspacePlanStatuses.Canceled) {
+        cancelCheckoutSession(String(sessionIdQuery), workspaceId)
+        triggerNotification({
+          type: ToastNotificationType.Danger,
+          title: 'Your payment was canceled'
+        })
+      } else {
+        triggerNotification({
+          type: ToastNotificationType.Success,
+          title: 'Your workspace plan was successfully updated'
+        })
+      }
+
+      const currentQueryParams = { ...route.query }
+      delete currentQueryParams.session_id
+      delete currentQueryParams.payment_status
+      router.push({ query: currentQueryParams })
+    }
+  }
+
   return {
     billingPortalRedirect,
     upgradePlanRedirect,
-    cancelCheckoutSession
+    cancelCheckoutSession,
+    validateCheckoutSession
   }
 }