From 39f7af8a233c86994527e63ddb183d209afdcf5d Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 24 May 2022 22:34:48 +0800
Subject: [PATCH] Allow access to billing pages in connecting state

---
 .../layouts/ProjectLayout/ProjectLayout.tsx   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index 9198a55b1b9..c646ddc0887 100644
--- a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -91,16 +91,24 @@ interface ContentWrapperProps {
 const ContentWrapper: FC<ContentWrapperProps> = observer(({ isLoading, children }) => {
   const { ui } = useStore()
   const router = useRouter()
+
+  const routesToIgnorePostgrestConnection = [
+    '/project/[ref]/reports',
+    '/project/[ref]/settings/general',
+    '/project/[ref]/settings/database',
+    '/project/[ref]/settings/billing',
+    '/project/[ref]/settings/billing/update',
+    '/project/[ref]/settings/billing/update/free',
+    '/project/[ref]/settings/billing/update/pro',
+  ]
+
   const requiresDbConnection: boolean = router.pathname !== '/project/[ref]/settings/general'
-  const requiresPostgrestConnection =
-    [
-      '/project/[ref]/settings/general',
-      '/project/[ref]/reports',
-      '/project/[ref]/settings/database',
-    ].includes(router.pathname) === false
+  const requiresPostgrestConnection = !routesToIgnorePostgrestConnection.includes(router.pathname)
+
   const isProjectBuilding = [PROJECT_STATUS.COMING_UP, PROJECT_STATUS.RESTORING].includes(
     ui.selectedProject?.status ?? ''
   )
+
   const isProjectOffline = ui.selectedProject?.postgrestStatus === 'OFFLINE'
 
   return (