Address comments

studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx

@@ -27,11 +27,11 @@ const AddNewPaymentMethodModal = ({
   onConfirm,
 }: AddNewPaymentMethodModalProps) => {
   const { ui } = useStore()
+  const { isDarkMode } = useTheme()
   const [intent, setIntent] = useState<any>()
   const selectedOrganization = useSelectedOrganization()
 
   const captchaLoaded = useIsHCaptchaLoaded()
-
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const [captchaRef, setCaptchaRef] = useState<HCaptcha | null>(null)
 
@@ -53,6 +53,15 @@ const AddNewPaymentMethodModal = ({
   }, [])
 
   useEffect(() => {
+    const initSetupIntent = async (hcaptchaToken: string | undefined) => {
+      const slug = selectedOrganization?.slug
+      if (!slug) return console.error('Slug is required')
+      if (!hcaptchaToken) return console.error('HCaptcha token required')
+
+      setIntent(undefined)
+      setupIntent({ slug, hcaptchaToken })
+    }
+
     const loadPaymentForm = async () => {
       if (visible && captchaRef && captchaLoaded) {
         let token = captchaToken
@@ -79,17 +88,6 @@ const AddNewPaymentMethodModal = ({
     captchaRef?.resetCaptcha()
   }
 
-  const initSetupIntent = async (hcaptchaToken: string | undefined) => {
-    const slug = selectedOrganization?.slug
-    if (!slug) return console.error('Slug is required')
-    if (!hcaptchaToken) return console.error('HCaptcha token required')
-
-    setIntent(undefined)
-    setupIntent({ slug, hcaptchaToken })
-  }
-
-  const { isDarkMode } = useTheme()
-
   const options = {
     clientSecret: intent ? intent.client_secret : '',
     appearance: { theme: isDarkMode ? 'night' : 'flat', labels: 'floating' },

studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx

@@ -15,8 +15,6 @@ import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { Button, IconPause } from 'ui'
 
-export interface PauseProjectButtonProps {}
-
 const PauseProjectButton = () => {
   const queryClient = useQueryClient()
   const { ui } = useStore()

studio/components/layouts/ProjectLayout/PausingState.tsx

@@ -1,11 +1,34 @@
-import { Project } from 'types'
+import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'common'
 import { Badge, IconCircle, IconLoader } from 'ui'
 
+import { useProjectStatusQuery } from 'data/projects/project-status-query'
+import { invalidateProjectsQuery } from 'data/projects/projects-query'
+import { PROJECT_STATUS } from 'lib/constants'
+import { timeout } from 'lib/helpers'
+import { Project } from 'types'
+
 export interface PausingStateProps {
   project: Project
 }
 
 const PausingState = ({ project }: PausingStateProps) => {
+  const { ref } = useParams()
+  const queryClient = useQueryClient()
+  const { refetch } = useProjectStatusQuery(
+    { projectRef: ref },
+    {
+      onSuccess: async (res) => {
+        if ([PROJECT_STATUS.GOING_DOWN, PROJECT_STATUS.PAUSING].includes(res.status)) {
+          await timeout(2000)
+          refetch()
+        } else if (PROJECT_STATUS.INACTIVE) {
+          await invalidateProjectsQuery(queryClient)
+        }
+      },
+    }
+  )
+
   return (
     <div className="mx-auto my-16 w-full max-w-7xl space-y-16">
       <div className="mx-6 space-y-16">

studio/data/projects/keys.ts

@@ -1,5 +1,6 @@
 export const projectKeys = {
   list: () => ['all-projects'] as const,
+  status: (projectRef: string | undefined) => ['project', projectRef, 'status'] as const,
   types: (projectRef: string | undefined) => ['project', projectRef, 'types'] as const,
   detail: (projectRef: string | undefined) => ['project', projectRef, 'detail'] as const,
   readonlyStatusList: () => ['projects', 'readonly-statuses'] as const,

studio/data/projects/project-status-query.ts

@@ -0,0 +1,37 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+
+import { get } from 'data/fetchers'
+import { ResponseError } from 'types'
+import { projectKeys } from './keys'
+
+export type ProjectStatusVariables = {
+  projectRef?: string
+}
+
+export async function getProjectStatus(
+  { projectRef }: ProjectStatusVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) throw new Error('Project ref is required')
+
+  const { data, error } = await get(`/platform/projects/{ref}/status`, {
+    params: { path: { ref: projectRef } },
+    signal,
+  })
+
+  if (error) throw error
+  return data as { status: string }
+}
+
+export type ProjectStatusData = Awaited<ReturnType<typeof getProjectStatus>>
+export type ProjectStatusError = ResponseError
+
+export const useProjectStatusQuery = <TData = ProjectStatusData>(
+  { projectRef }: ProjectStatusVariables,
+  { enabled = true, ...options }: UseQueryOptions<ProjectStatusData, ProjectStatusError, TData> = {}
+) =>
+  useQuery<ProjectStatusData, ProjectStatusError, TData>(
+    projectKeys.status(projectRef),
+    ({ signal }) => getProjectStatus({ projectRef }, signal),
+    { enabled: enabled && typeof projectRef !== 'undefined', ...options }
+  )