feat(checkout v3): Full screen (#98540)

<img width="1037" height="857" alt="Screenshot 2025-08-29 at 3 53 07 PM"
src="https://github.com/user-attachments/assets/b7ea3229-1194-40da-8fd8-0f383746d303"
/>

on small screens:

<img width="354" height="762" alt="Screenshot 2025-08-29 at 3 52 48 PM"
src="https://github.com/user-attachments/assets/ba81602e-e284-44f6-b935-7b6d8be46857"
/>

on very large screens, we center the content:
<img width="989" height="687" alt="Screenshot 2025-08-29 at 3 52 07 PM"
src="https://github.com/user-attachments/assets/00e33955-d6aa-4e2e-86a8-b927a85f811e"
/>

Author: isabellaenriquez

static/gsApp/components/organizationSubscriptionContext.tsx

@@ -0,0 +1,19 @@
+import type React from 'react';
+
+import OrganizationContainer from 'sentry/views/organizationContainer';
+
+import SubscriptionContext from 'getsentry/components/subscriptionContext';
+
+type Props = {
+  children: React.JSX.Element;
+};
+
+function OrganizationSubscriptionContext({children}: Props) {
+  return (
+    <OrganizationContainer>
+      <SubscriptionContext>{children}</SubscriptionContext>
+    </OrganizationContainer>
+  );
+}
+
+export default OrganizationSubscriptionContext;

static/gsApp/hooks/rootRoutes.tsx

@@ -1,5 +1,26 @@
 import type {SentryRouteObject} from 'sentry/components/route';
+import {makeLazyloadComponent as make} from 'sentry/makeLazyloadComponent';
+import errorHandler from 'sentry/utils/errorHandler';
 
-const rootRoutes = (): SentryRouteObject => ({});
+import OrganizationSubscriptionContext from 'getsentry/components/organizationSubscriptionContext';
+
+const rootRoutes = (): SentryRouteObject => ({
+  children: [
+    {
+      // TODO(checkout v3): change this to the correct path (/settings/billing/checkout/)
+      // when GA'd
+      path: '/checkout-v3/',
+      component: errorHandler(OrganizationSubscriptionContext),
+      deprecatedRouteProps: true,
+      customerDomainOnlyRoute: true,
+      children: [
+        {
+          index: true,
+          component: make(() => import('getsentry/views/decideCheckout')),
+        },
+      ],
+    },
+  ],
+});
 
 export default rootRoutes;

static/gsApp/hooks/settingsRoutes.tsx

@@ -23,6 +23,7 @@ const settingsRoutes = (): SentryRouteObject => ({
           redirectTo: 'overview/',
         },
         {
+          // TODO(checkout v3): This should be removed when checkout v3 is GA'd
           path: 'checkout/',
           name: 'Change',
           component: errorHandler(SubscriptionContext),

static/gsApp/views/amCheckout/cart.spec.tsx

@@ -23,6 +23,7 @@ describe('Cart', () => {
   const billingConfig = BillingConfigFixture(PlanTier.AM3);
   const props = {
     ...routerProps,
+    navigate: jest.fn(),
     isNewCheckout: true,
   };
   const businessPlan = PlanDetailsLookupFixture('am3_business')!;

static/gsApp/views/amCheckout/checkoutOverview.spec.tsx

@@ -16,7 +16,6 @@ describe('CheckoutOverview', () => {
   const api = new MockApiClient();
   const {organization, routerProps} = initializeOrg();
   const subscription = SubscriptionFixture({organization, plan: 'am1_f'});
-  const params = {};
 
   const billingConfig = BillingConfigFixture(PlanTier.AM2);
   const teamPlanAnnual = PlanDetailsLookupFixture('am1_team_auf')!;
@@ -52,7 +51,7 @@ describe('CheckoutOverview', () => {
         api={api}
         checkoutTier={PlanTier.AM2}
         onToggleLegacy={jest.fn()}
-        params={params}
+        navigate={jest.fn()}
       />
     );
 
@@ -86,7 +85,7 @@ describe('CheckoutOverview', () => {
         checkoutTier={PlanTier.AM1}
         location={LocationFixture({hash: '#step3'})}
         onToggleLegacy={jest.fn()}
-        params={params}
+        navigate={jest.fn()}
       />
     );
 

static/gsApp/views/amCheckout/checkoutOverviewV2.spec.tsx

@@ -14,7 +14,6 @@ describe('CheckoutOverviewV2', () => {
   const api = new MockApiClient();
   const {organization, routerProps} = initializeOrg();
   const subscription = SubscriptionFixture({organization, plan: 'am3_f'});
-  const params = {};
 
   const billingConfig = BillingConfigFixture(PlanTier.AM3);
   const teamPlanAnnual = PlanDetailsLookupFixture('am3_team_auf')!;
@@ -50,7 +49,7 @@ describe('CheckoutOverviewV2', () => {
         api={api}
         checkoutTier={PlanTier.AM3}
         onToggleLegacy={jest.fn()}
-        params={params}
+        navigate={jest.fn()}
       />
     );