402 redirect page

web/src/api/buster_rest/users/queryRequests.ts

@@ -39,7 +39,7 @@ export const prefetchGetMyUserInfo = async (
     queryFn: () => initialData!,
     initialData
   });
-  return { queryClient, initialData };
+  return queryClient;
 };
 
 export const useGetUser = (params: Parameters<typeof getUser>[0]) => {

web/src/app/app/layout.tsx

@@ -8,6 +8,7 @@ import { prefetchGetMyUserInfo } from '@/api/buster_rest';
 import { getSupabaseUserContext } from '@/lib/supabase';
 import { AppProviders } from '@/context/AppProviders';
 import { headers } from 'next/headers';
+import { queryKeys } from '@/api/query_keys';
 
 export default async function Layout({
   children
@@ -18,10 +19,19 @@ export default async function Layout({
   const pathname = headersList.get('x-pathname');
   const supabaseContext = await getSupabaseUserContext();
   const { accessToken } = supabaseContext;
-  const { initialData: userInfo, queryClient } = await prefetchGetMyUserInfo({
+  const queryClient = await prefetchGetMyUserInfo({
     jwtToken: accessToken
   });
 
+  const userInfoState = queryClient.getQueryState(queryKeys.userGetUserMyself.queryKey);
+
+  const is402Error = userInfoState?.status === 'error' && userInfoState?.error?.status === 402;
+
+  if (is402Error) {
+    return <ClientRedirect to={createBusterRoute({ route: BusterRoutes.INFO_GETTING_STARTED })} />;
+  }
+
+  const userInfo = queryClient.getQueryData(queryKeys.userGetUserMyself.queryKey);
   const newUserRoute = createBusterRoute({ route: BusterRoutes.NEW_USER });
 
   if (

web/src/app/info/getting-started/page.tsx

@@ -0,0 +1,50 @@
+import { Paragraph, Text, Title } from '@/components/ui/typography';
+import { Button } from '@/components/ui/buttons';
+import { Card, CardContent, CardFooter } from '@/components/ui/card/CardBase';
+import { BUSTER_GETTING_STARTED_URL } from '@/routes/externalRoutes';
+import { BusterLogo } from '@/assets/svg/BusterLogo';
+import { ArrowUpRight } from '@/components/ui/icons';
+
+export default function GettingStartedPage() {
+  return (
+    <div className="container flex min-h-screen w-full min-w-screen items-center justify-center py-10">
+      <Card className="w-full max-w-lg">
+        <CardContent className="space-y-4 pt-6 text-center">
+          <>
+            <div className="flex justify-center">
+              <BusterLogo className="h-10 w-10" />
+            </div>
+
+            <Title as={'h1'} variant="default">
+              Welcome to Buster!
+            </Title>
+            <Paragraph size={'md'}>
+              It looks like your organization hasn&apos;t been fully set up yet. To get started with
+              Buster, you&apos;ll need to complete the organization setup process or verify your
+              payment information.
+            </Paragraph>
+          </>
+        </CardContent>
+        <CardFooter className="w-full pt-0">
+          <a
+            href={BUSTER_GETTING_STARTED_URL}
+            target="_blank"
+            className="w-full"
+            rel="noopener noreferrer">
+            <Button
+              size="tall"
+              variant={'black'}
+              block
+              suffix={
+                <span className="text-base">
+                  <ArrowUpRight />
+                </span>
+              }>
+              Get Started
+            </Button>
+          </a>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

web/src/routes/busterRoutes/busterInfoRoutes.ts

@@ -0,0 +1,7 @@
+export enum BusterInfoRoutes {
+  INFO_GETTING_STARTED = '/info/getting-started'
+}
+
+export type BusterInfoRoutesWithArgs = {
+  [BusterInfoRoutes.INFO_GETTING_STARTED]: { route: BusterInfoRoutes.INFO_GETTING_STARTED };
+};

web/src/routes/busterRoutes/busterRoutes.ts

@@ -1,6 +1,7 @@
 import { BusterAppRoutes, BusterAppRoutesWithArgs } from './busterAppRoutes';
 import { BusterAuthRoutes, BusterAuthRoutesWithArgs } from './busterAuthRoutes';
 import { BusterEmbedRoutes, BusterEmbedRoutesWithArgs } from './busterEmbedRoutes';
+import { BusterInfoRoutes, BusterInfoRoutesWithArgs } from './busterInfoRoutes';
 import { BusterSettingsRoutes, BusterSettingsRoutesWithArgs } from './busterSettingsRoutes';
 
 export enum BusterRootRoutes {
@@ -16,6 +17,7 @@ export const BusterRoutes = {
   ...BusterAuthRoutes,
   ...BusterSettingsRoutes,
   ...BusterEmbedRoutes,
+  ...BusterInfoRoutes,
   ...BusterRootRoutes
 };
 
@@ -24,12 +26,14 @@ export type BusterRoutes =
   | BusterAuthRoutes
   | BusterSettingsRoutes
   | BusterEmbedRoutes
+  | BusterInfoRoutes
   | BusterRootRoutes;
 
 export type BusterRoutesWithArgs = BusterRootRoutesWithArgs &
   BusterAuthRoutesWithArgs &
   BusterAppRoutesWithArgs &
   BusterEmbedRoutesWithArgs &
-  BusterSettingsRoutesWithArgs;
+  BusterSettingsRoutesWithArgs &
+  BusterInfoRoutesWithArgs;
 
 export type BusterRoutesWithArgsRoute = BusterRoutesWithArgs[BusterRoutes];

web/src/routes/externalRoutes.ts

@@ -1,2 +1,3 @@
 export const BUSTER_HOME_PAGE = 'https://buster.so';
 export const BUSTER_DOCS_URL = 'https://docs.buster.so';
+export const BUSTER_GETTING_STARTED_URL = 'https://www.buster.so/get-started';