feat(console): support plan subscription from the tenant landing page (#4799)

packages/console/src/cloud/AppRoutes.tsx

@@ -1,8 +1,10 @@
 import { Route, Routes } from 'react-router-dom';
 
+import { isDevFeaturesEnabled } from '@/consts/env';
 import ProtectedRoutes from '@/containers/ProtectedRoutes';
-import { GlobalAnonymousRoute } from '@/contexts/TenantsProvider';
+import { GlobalAnonymousRoute, GlobalRoute } from '@/contexts/TenantsProvider';
 import Callback from '@/pages/Callback';
+import CheckoutSuccessCallback from '@/pages/CheckoutSuccessCallback';
 
 import * as styles from './AppRoutes.module.scss';
 import Main from './pages/Main';
@@ -16,6 +18,12 @@ function AppRoutes() {
         <Route path={GlobalAnonymousRoute.Callback} element={<Callback />} />
         <Route path={GlobalAnonymousRoute.SocialDemoCallback} element={<SocialDemoCallback />} />
         <Route element={<ProtectedRoutes />}>
+          {isDevFeaturesEnabled && (
+            <Route
+              path={GlobalRoute.CheckoutSuccessCallback}
+              element={<CheckoutSuccessCallback />}
+            />
+          )}
           <Route index element={<Main />} />
         </Route>
       </Routes>

packages/console/src/consts/subscriptions.ts

@@ -11,5 +11,3 @@ export const reservedPlanIdOrder: string[] = [
 ];
 
 export const checkoutStateQueryKey = 'checkout-state';
-
-export const checkoutSuccessCallbackPath = 'checkout-success';

packages/console/src/contexts/TenantsProvider.tsx

@@ -25,7 +25,17 @@ export enum GlobalAnonymousRoute {
   SocialDemoCallback = '/social-demo-callback',
 }
 
-const anonymousRoutes: Readonly<string[]> = Object.freeze(Object.values(GlobalAnonymousRoute));
+/**
+ * The reserved routes that need tenant access.
+ */
+export enum GlobalRoute {
+  CheckoutSuccessCallback = '/checkout-success-callback',
+}
+
+const reservedRoutes: Readonly<string[]> = Object.freeze([
+  ...Object.values(GlobalAnonymousRoute),
+  ...Object.values(GlobalRoute),
+]);
 
 /**
  * The current tenant status of access validation. When it's `validated`, it indicates that a
@@ -128,7 +138,7 @@ function TenantsProvider({ children }: Props) {
       return defaultTenantId;
     }
 
-    if (!match || anonymousRoutes.includes(match.pathname)) {
+    if (!match || reservedRoutes.includes(match.pathname)) {
       return '';
     }
 

packages/console/src/hooks/use-subscribe.ts

@@ -6,13 +6,10 @@ import { useTranslation } from 'react-i18next';
 
 import { toastResponseError, useCloudApi } from '@/cloud/hooks/use-cloud-api';
 import { type CreateTenantData } from '@/components/CreateTenantModal/type';
-import {
-  ReservedPlanId,
-  checkoutStateQueryKey,
-  checkoutSuccessCallbackPath,
-} from '@/consts/subscriptions';
-import { TenantsContext } from '@/contexts/TenantsProvider';
+import { ReservedPlanId, checkoutStateQueryKey } from '@/consts/subscriptions';
+import { GlobalRoute, TenantsContext } from '@/contexts/TenantsProvider';
 import { createLocalCheckoutSession } from '@/utils/checkout';
+import { dropLeadingSlash } from '@/utils/url';
 
 import useTenantPathname from './use-tenant-pathname';
 
@@ -44,7 +41,7 @@ const useSubscribe = () => {
     });
 
     const successCallbackUrl = getUrl(
-      `${checkoutSuccessCallbackPath}?${successSearchParam.toString()}`
+      `${dropLeadingSlash(GlobalRoute.CheckoutSuccessCallback)}?${successSearchParam.toString()}`
     ).href;
 
     const { redirectUri, sessionId } = await cloudApi.post('/api/checkout-session', {

packages/console/src/pages/ConsoleRoutes/index.tsx

@@ -5,16 +5,17 @@ import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
 import { SWRConfig } from 'swr';
 
 import { isCloud } from '@/consts/env';
-import { checkoutSuccessCallbackPath } from '@/consts/subscriptions';
 import AppBoundary from '@/containers/AppBoundary';
 import AppContent, { RedirectToFirstItem } from '@/containers/AppContent';
 import ConsoleContent from '@/containers/ConsoleContent';
 import ProtectedRoutes from '@/containers/ProtectedRoutes';
 import TenantAccess from '@/containers/TenantAccess';
+import { GlobalRoute } from '@/contexts/TenantsProvider';
 import Toast from '@/ds-components/Toast';
 import useSwrOptions from '@/hooks/use-swr-options';
 import Callback from '@/pages/Callback';
 import Welcome from '@/pages/Welcome';
+import { dropLeadingSlash } from '@/utils/url';
 
 import CheckoutSuccessCallback from '../CheckoutSuccessCallback';
 import HandleSocialCallback from '../Profile/containers/HandleSocialCallback';
@@ -49,7 +50,10 @@ export function ConsoleRoutes() {
           <Route path="handle-social" element={<HandleSocialCallback />} />
           <Route element={<TenantAccess />}>
             {isCloud && (
-              <Route path={checkoutSuccessCallbackPath} element={<CheckoutSuccessCallback />} />
+              <Route
+                path={dropLeadingSlash(GlobalRoute.CheckoutSuccessCallback)}
+                element={<CheckoutSuccessCallback />}
+              />
             )}
             <Route element={<AppContent />}>
               <Route index element={<RedirectToFirstItem />} />

packages/console/src/utils/url.ts

@@ -10,3 +10,5 @@ export const isInCallback = () =>
   ['/callback', '-callback'].some((path) => window.location.pathname.endsWith(path));
 
 export const isAbsoluteUrl = (url?: string) => Boolean(trySafe(() => url && new URL(url)));
+
+export const dropLeadingSlash = (path: string) => path.replace(/^\/+/, '');