feat: add all checkout options on the pro page (#8082)

* feat: add all checkout options on the pro page

* refactor: handle error cases in useCreateCheckout

* fix(hooks): handle error when activeTeam or user is invalid

* fix(Import): fix CTA URL for PrivateRepoFreeTeam component

Author: alexnm

packages/app/src/app/components/CreateSandbox/CreateSandbox.tsx

@@ -183,7 +183,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
 
   const onCreateCheckout = () => {
     createCheckout({
-      utm_source: 'dashboard_upgrade_banner',
+      trackingLocation: 'dashboard_upgrade_banner',
     });
   };
 

packages/app/src/app/components/CreateSandbox/Import/InactiveTeam.tsx

@@ -23,7 +23,7 @@ export const InactiveTeam: React.FC = () => {
         <MessageStripe.Action
           onClick={() => {
             createCheckout({
-              utm_source: 'max_public_repos',
+              trackingLocation: 'max_public_repos',
             });
 
             track(getEventName(false, isBillingManager), EVENT_PROPS);

packages/app/src/app/components/CreateSandbox/Import/MaxPublicRepos.tsx

@@ -26,7 +26,7 @@ export const MaxPublicRepos: React.FC = () => {
         <MessageStripe.Action
           onClick={() => {
             createCheckout({
-              utm_source: 'max_public_repos',
+              trackingLocation: 'max_public_repos',
             });
 
             track(

packages/app/src/app/components/CreateSandbox/Import/PrivateRepoFreeTeam.tsx

@@ -1,5 +1,5 @@
 import track from '@codesandbox/common/lib/utils/analytics';
-import { Element, Link as StyledLink } from '@codesandbox/components';
+import { Link as StyledLink } from '@codesandbox/components';
 import { useCreateCheckout } from 'app/hooks';
 import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
 import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
@@ -20,14 +20,16 @@ export const PrivateRepoFreeTeam: React.FC = () => {
    * Can't checkout? '/docs/learn/introduction/workspace#managing-teams-and-subscriptions'
    */
 
-  const ctaURL = ((): string | false => {
+  const ctaURL = ((): string | null => {
+    if (isPersonalSpace) {
+      return '/pro';
+    }
+
     if (!canCheckout) {
-      return isPersonalSpace
-        ? '/pro'
-        : '/docs/learn/plans/workspace#managing-teams-and-subscriptions';
+      return '/docs/learn/plans/workspace#managing-teams-and-subscriptions';
     }
 
-    return false;
+    return null;
   })();
 
   return (
@@ -49,7 +51,7 @@ export const PrivateRepoFreeTeam: React.FC = () => {
             modals.newSandboxModal.close();
           } else {
             createCheckout({
-              utm_source: 'dashboard_import_limits',
+              trackingLocation: 'dashboard_import_limits',
             });
           }
 
@@ -59,11 +61,7 @@ export const PrivateRepoFreeTeam: React.FC = () => {
           });
         }}
       >
-        upgrade to{' '}
-        <Element as="span" css={{ textTransform: 'uppercase' }}>
-          pro
-        </Element>
-        .
+        upgrade to Pro.
       </StyledLink>
     </>
   );

packages/app/src/app/hooks/useCreateCheckout.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useAppState, useEffects } from 'app/overmind';
+import { useActions, useAppState, useEffects } from 'app/overmind';
 import { useLocation } from 'react-router';
 import { dashboard as dashboardURLs } from '@codesandbox/common/lib/utils/url-generator';
 import track from '@codesandbox/common/lib/utils/analytics';
@@ -12,11 +12,10 @@ type CheckoutStatus =
   | { status: 'error'; error: string };
 
 export type CheckoutOptions = {
-  recurring_interval?: 'month' | 'year';
-  success_path?: string;
-  cancel_path?: string;
-  team_id?: string;
-  utm_source:
+  interval?: 'month' | 'year';
+  cancelPath?: string;
+  createTeam?: boolean;
+  trackingLocation:
     | 'settings_upgrade'
     | 'dashboard_upgrade_banner'
     | 'dashboard_import_limits'
@@ -67,7 +66,8 @@ export const useCreateCheckout = (): [
   (args: CheckoutOptions) => Promise<void>,
   boolean
 ] => {
-  const { activeTeam, isProcessingPayment } = useAppState();
+  const { activeTeam, isProcessingPayment, user } = useAppState();
+  const actions = useActions();
   const { isFree } = useWorkspaceSubscription();
   const { isBillingManager } = useWorkspaceAuthorization();
   const [status, setStatus] = useState<CheckoutStatus>({ status: 'idle' });
@@ -85,30 +85,50 @@ export const useCreateCheckout = (): [
   }, [isProcessingPayment]);
 
   async function createCheckout({
-    recurring_interval = 'month',
-    cancel_path = pathname + search,
-    success_path = dashboardURLs.settings(activeTeam),
-    team_id = activeTeam!,
-    utm_source,
+    interval = 'month',
+    cancelPath = pathname + search,
+    createTeam,
+    trackingLocation,
   }: CheckoutOptions): Promise<void> {
     try {
       setStatus({ status: 'loading' });
 
+      if (!activeTeam || !user) {
+        // Should not happen but it's done for typing reasons
+        throw new Error('Invalid activeTeam or user');
+      }
+
+      let teamId = activeTeam;
+
+      if (createTeam) {
+        const newTeam = await actions.dashboard.createTeam({
+          teamName: `${user.username}'s pro`,
+        });
+
+        teamId = newTeam.id;
+      }
+
+      const successPath = createTeam
+        ? dashboardURLs.recent(teamId, {
+            new_workspace: 'true',
+          })
+        : dashboardURLs.settings(teamId);
+
       const payload = await api.stripeCreateCheckout({
-        success_path: addStripeSuccessParam(success_path, utm_source),
-        cancel_path: addStripeCancelParam(cancel_path),
-        team_id,
-        recurring_interval,
+        success_path: addStripeSuccessParam(successPath, trackingLocation),
+        cancel_path: addStripeCancelParam(cancelPath),
+        team_id: teamId,
+        recurring_interval: interval,
       });
 
       if (payload.stripeCheckoutUrl) {
         track('Subscription - Checkout successfully created', {
-          source: utm_source,
+          source: trackingLocation,
         });
         window.location.href = payload.stripeCheckoutUrl;
       } else {
         track('Subscription - Failed to create checkout', {
-          source: utm_source,
+          source: trackingLocation,
         });
       }
     } catch (err) {

packages/app/src/app/pages/Dashboard/Components/Repository/stripes.tsx

@@ -39,7 +39,7 @@ export const PrivateRepoFreeTeam: React.FC = () => {
               window.location.href = '/pro';
             } else {
               createCheckout({
-                utm_source: 'dashboard_private_repo_upgrade',
+                trackingLocation: 'dashboard_private_repo_upgrade',
               });
             }
           }}
@@ -66,7 +66,7 @@ export const MaxReposFreeTeam: React.FC = () => {
           disabled={checkout.status === 'loading'}
           onClick={() => {
             createCheckout({
-              utm_source: 'dashboard_private_repo_upgrade',
+              trackingLocation: 'dashboard_private_repo_upgrade',
             });
 
             track(getEventName(isEligibleForTrial, isBillingManager), {

packages/app/src/app/pages/Dashboard/Components/TeamSubscriptionOptions/TeamSubscriptionOptions.tsx

@@ -1,40 +1,55 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ComboButton, Stack, Text } from '@codesandbox/components';
 import track from '@codesandbox/common/lib/utils/analytics';
 import { useCreateCheckout } from 'app/hooks';
 import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
+import { useEffects } from 'app/overmind';
 
 type TeamSubscriptionOptionsProps = {
   buttonVariant?: React.ComponentProps<typeof ComboButton>['variant'];
   buttonStyles?: React.ComponentProps<typeof ComboButton>['customStyles'];
   ctaCopy?: string;
-  trackingLocation: string;
+  trackingLocation: 'settings_upgrade' | 'pro_page';
+  createTeam?: boolean;
 };
 export const TeamSubscriptionOptions: React.FC<TeamSubscriptionOptionsProps> = ({
   buttonVariant,
   buttonStyles,
   ctaCopy,
   trackingLocation,
+  createTeam,
 }) => {
   const { isEligibleForTrial } = useWorkspaceSubscription();
+  const effects = useEffects();
 
   const [checkout, createCheckout, canCheckout] = useCreateCheckout();
   const disabled = checkout.status === 'loading';
 
+  useEffect(() => {
+    if (checkout.status === 'error') {
+      effects.notificationToast.error(
+        `Could not create stripe checkout link. ${checkout.error}`
+      );
+    }
+  }, [checkout]);
+
   const createMonthlyCheckout = () => {
     createCheckout({
-      utm_source: 'settings_upgrade',
+      trackingLocation,
+      createTeam,
     });
   };
 
   const createYearlyCheckout = () => {
     createCheckout({
-      recurring_interval: 'year',
-      utm_source: 'settings_upgrade',
+      interval: 'year',
+      trackingLocation,
+      createTeam,
     });
   };
 
-  if (!canCheckout) {
+  // Only show this for existing teams, not for the create team flow
+  if (!createTeam && !canCheckout) {
     return (
       <Text as="p" variant="body" css={{ marginTop: 0 }}>
         Contact your team admin to upgrade.

packages/app/src/app/pages/Dashboard/Components/UpgradeBanner/UpgradeBanner.tsx

@@ -74,7 +74,7 @@ export const UpgradeBanner: React.FC = () => {
             }
 
             createCheckout({
-              utm_source: 'restrictions_banner',
+              trackingLocation: 'restrictions_banner',
             });
           }}
           autoWidth

packages/app/src/app/pages/Dashboard/Components/shared/InactiveTeamStripe.tsx

@@ -20,7 +20,7 @@ export const InactiveTeamStripe: React.FC = ({ children }) => {
             });
 
             createCheckout({
-              utm_source: 'restrictions_banner',
+              trackingLocation: 'restrictions_banner',
             });
           }}
         >

packages/app/src/app/pages/Dashboard/Content/routes/Sandboxes/MaxSandboxesRestrictionsBanner.tsx

@@ -33,7 +33,7 @@ export const MaxSandboxesRestrictionsBanner: React.FC = () => {
             }
 
             createCheckout({
-              utm_source: 'restrictions_banner',
+              trackingLocation: 'restrictions_banner',
             });
           }}
         >

packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/ManageSubscription/upgrade.tsx

@@ -51,7 +51,7 @@ export const Upgrade = () => {
 
         <TeamSubscriptionOptions
           buttonVariant="trial"
-          trackingLocation="Team Settings"
+          trackingLocation="settings_upgrade"
         />
       </Stack>
     </Card>

packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/WorkspaceSettings.tsx

@@ -251,7 +251,7 @@ export const WorkspaceSettings: React.FC = () => {
               }
 
               createCheckout({
-                utm_source: 'dashboard_workspace_settings',
+                trackingLocation: 'dashboard_workspace_settings',
               });
             }}
           >

packages/app/src/app/pages/Pro/Create.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Helmet } from 'react-helmet';
-import { useAppState, useActions, useEffects } from 'app/overmind';
+import { useAppState } from 'app/overmind';
 import {
   ThemeProvider,
   Stack,
@@ -17,30 +17,14 @@ import {
   ORGANIZATION_CONTACT_LINK,
 } from 'app/constants';
 import { usePriceCalculation } from 'app/hooks/usePriceCalculation';
-import { useCreateCheckout } from 'app/hooks';
-import { dashboard as dashboardURLs } from '@codesandbox/common/lib/utils/url-generator';
 import { SubscriptionCard } from './components/SubscriptionCard';
-import type { CTA } from './components/SubscriptionCard';
 import { PricingTable } from './components/PricingTable';
 import { StyledPricingDetailsText } from './components/elements';
 import { NewTeamModal } from '../Dashboard/Components/NewTeamModal';
+import { TeamSubscriptionOptions } from '../Dashboard/Components/TeamSubscriptionOptions/TeamSubscriptionOptions';
 
 export const ProCreate = () => {
-  const { hasLoadedApp, isLoggedIn, userCanStartTrial, user } = useAppState();
-  const actions = useActions();
-  const effects = useEffects();
-  const [isLoading, setIsLoading] = useState(false);
-  const [checkout, createCheckout] = useCreateCheckout();
-
-  useEffect(() => {
-    if (checkout.status === 'error') {
-      setIsLoading(false);
-
-      effects.notificationToast.error(
-        `Could not create stripe checkout link. ${checkout.error}`
-      );
-    }
-  }, [checkout]);
+  const { hasLoadedApp, isLoggedIn } = useAppState();
 
   const oneSeatPrice = usePriceCalculation({
     billingInterval: 'year',
@@ -54,27 +38,6 @@ export const ProCreate = () => {
 
   if (!hasLoadedApp || !isLoggedIn) return null;
 
-  const newWorkspaceCTA: CTA = {
-    text: userCanStartTrial ? 'Start trial' : 'Upgrade to Pro',
-    isLoading,
-    variant: 'dark',
-    onClick: async () => {
-      setIsLoading(true);
-      const newTeam = await actions.dashboard.createTeam({
-        teamName: `${user.username}'s pro`,
-      });
-
-      await createCheckout({
-        team_id: newTeam.id,
-        success_path: dashboardURLs.recent(newTeam.id, {
-          new_workspace: 'true',
-        }),
-        utm_source: 'pro_page',
-      });
-      setIsLoading(false);
-    },
-  };
-
   return (
     <ThemeProvider>
       <Helmet>
@@ -141,7 +104,20 @@ export const ProCreate = () => {
               title="Pro"
               features={TEAM_PRO_FEATURES_WITH_PILLS}
               isHighlighted
-              cta={newWorkspaceCTA}
+              customCta={
+                <TeamSubscriptionOptions
+                  buttonVariant="dark"
+                  buttonStyles={{
+                    padding: '12px 20px !important', // Otherwise it gets overridden.
+                    fontSize: '16px',
+                    lineHeight: '24px',
+                    fontWeight: 500,
+                    height: 'auto',
+                  }}
+                  createTeam
+                  trackingLocation="pro_page"
+                />
+              }
             >
               <Stack gap={1} direction="vertical">
                 <Text size={32} weight="500">

packages/app/src/app/pages/Pro/Upgrade.tsx

@@ -224,7 +224,7 @@ export const ProUpgrade = () => {
                             fontWeight: 500,
                             height: 'auto',
                           }}
-                          trackingLocation="subscription page"
+                          trackingLocation="pro_page"
                         />
                       ),
                     }