refactor(billing): show success toast for 202 accepted response from subscription confirm endpoints (supabase#39823)

* refactor(billing): show success toast if backend returns 202 Accepted status code

* don't need to check slug for sub confirm endpoint

Author: kanishkdudeja

apps/studio/data/subscriptions/org-subscription-confirm-pending-change.ts

@@ -3,6 +3,7 @@ import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
+import type { components } from 'api-types'
 import { organizationKeys } from 'data/organizations/keys'
 import { subscriptionKeys } from './keys'
 import { usageKeys } from 'data/usage/keys'
@@ -63,6 +64,17 @@ export const useConfirmPendingSubscriptionChangeMutation = ({
     async onSuccess(data, variables, context) {
       const { slug } = variables
 
+      // Handle 202 Accepted - show toast and skip query invalidation
+      // The 200 success response returns void, so if data exists it must be 202
+      if (data && 'message' in data) {
+        const pendingResponse = data as components['schemas']['PendingConfirmationResponse']
+        toast.success(pendingResponse.message, {
+          dismissible: true,
+          duration: 10_000,
+        })
+        return
+      }
+
       // [Kevin] Backend can return stale data as it's waiting for the Stripe-sync to complete. Until that's solved in the backend
       // we are going back to monkey here and delay the invalidation
       await new Promise((resolve) => setTimeout(resolve, 2000))

apps/studio/data/subscriptions/org-subscription-confirm-pending-create.ts

@@ -3,10 +3,10 @@ import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
+import type { components } from 'api-types'
 import { organizationKeys } from 'data/organizations/keys'
 import { permissionKeys } from 'data/permissions/keys'
 import { castOrganizationResponseToOrganization } from 'data/organizations/organizations-query'
-import type { components } from 'api-types'
 
 export type PendingSubscriptionCreateVariables = {
   payment_intent_id: string
@@ -56,6 +56,16 @@ export const useConfirmPendingSubscriptionCreateMutation = ({
     PendingSubscriptionCreateVariables
   >((vars) => confirmPendingSubscriptionCreate(vars), {
     async onSuccess(data, variables, context) {
+      // Handle 202 Accepted - show toast and skip query updates
+      if (data && 'message' in data && !('slug' in data)) {
+        const pendingResponse = data as components['schemas']['PendingConfirmationResponse']
+        toast.success(pendingResponse.message, {
+          dismissible: true,
+          duration: 10_000,
+        })
+        return
+      }
+
       // [Joshen] We're manually updating the query client here as the org's subscription is
       // created async, and the invalidation will happen too quick where the GET organizations
       // endpoint will error out with a 500 since the subscription isn't created yet.

packages/api-types/types/platform.d.ts

@@ -7612,6 +7612,9 @@ export interface components {
       }[]
       defaultPaymentMethodId: string | null
     }
+    PendingConfirmationResponse: {
+      message: string
+    }
     PgbouncerConfigResponse: {
       connection_string: string
       db_dns_name: string
@@ -13831,6 +13834,14 @@ export interface operations {
         }
         content?: never
       }
+      202: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['PendingConfirmationResponse']
+        }
+      }
       /** @description Unauthorized */
       401: {
         headers: {
@@ -16169,6 +16180,14 @@ export interface operations {
           'application/json': components['schemas']['CreateOrganizationResponse']
         }
       }
+      202: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['PendingConfirmationResponse']
+        }
+      }
       /** @description Failed to confirm subscription changes */
       500: {
         headers: {