Fix stripe redirect for onboarding flow

Author: MananTank

apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -32,6 +32,7 @@ type PricingCardProps = {
   current?: boolean;
   canTrialGrowth?: boolean;
   activeTrialEndsAt?: string;
+  redirectPath: string;
 };
 
 export const PricingCard: React.FC<PricingCardProps> = ({
@@ -42,6 +43,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   current = false,
   canTrialGrowth = false,
   activeTrialEndsAt,
+  redirectPath,
 }) => {
   const plan = TEAM_PLANS[billingPlan];
   const isCustomPrice = typeof plan.price === "string";
@@ -129,6 +131,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
               variant={cta.variant || "outline"}
               teamSlug={teamSlug}
               sku={billingPlan === "starter" ? "plan:starter" : "plan:growth"}
+              redirectPath={redirectPath}
             >
               {cta.title}
             </CheckoutButton>

apps/dashboard/src/app/login/LoginPage.tsx

@@ -151,7 +151,11 @@ function PageContent(props: {
   if (screen.id === "onboarding") {
     return (
       <Suspense fallback={<LoadingCard />}>
-        <LazyOnboardingUI account={screen.account} onComplete={onComplete} />
+        <LazyOnboardingUI
+          account={screen.account}
+          onComplete={onComplete}
+          redirectPath={props.nextPath || "/team"}
+        />
       </Suspense>
     );
   }

apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx

@@ -9,6 +9,7 @@ export function OnboardingChoosePlan(props: {
   skipPlan: () => Promise<void>;
   canTrialGrowth: boolean;
   teamSlug: string;
+  redirectPath: string;
 }) {
   return (
     <div>
@@ -29,6 +30,7 @@ export function OnboardingChoosePlan(props: {
               category: "account",
             },
           }}
+          redirectPath={props.redirectPath}
         />
 
         <PricingCard
@@ -45,6 +47,7 @@ export function OnboardingChoosePlan(props: {
           }}
           canTrialGrowth={props.canTrialGrowth}
           highlighted
+          redirectPath={props.redirectPath}
         />
       </div>
 

apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx

@@ -20,6 +20,8 @@ type OnboardingScreen =
 function OnboardingUI(props: {
   account: Account;
   onComplete: () => void;
+  // path to redirect from stripe
+  redirectPath: string;
 }) {
   const { account } = props;
   const [screen, setScreen] = useState<OnboardingScreen>({ id: "onboarding" });
@@ -128,6 +130,7 @@ function OnboardingUI(props: {
 
       {screen.id === "plan" && (
         <OnboardingChoosePlan
+          redirectPath={props.redirectPath}
           teamSlug={screen.team.slug}
           skipPlan={async () => {
             await skipOnboarding().catch(() => {});

apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx

@@ -18,6 +18,7 @@ export const BillingPricing: React.FC<BillingPricingProps> = ({
   team,
   trialPeriodEndedAt,
 }) => {
+  const pagePath = `/team/${team.slug}/~/settings/billing`;
   const validTeamPlan = getValidTeamPlan(team);
   const contactUsHref = "/contact-us";
 
@@ -102,6 +103,7 @@ export const BillingPricing: React.FC<BillingPricingProps> = ({
     <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
       {/* Starter */}
       <PricingCard
+        redirectPath={pagePath}
         billingPlan="starter"
         current={validTeamPlan === "starter"}
         cta={
@@ -120,6 +122,7 @@ export const BillingPricing: React.FC<BillingPricingProps> = ({
 
       {/* Growth */}
       <PricingCard
+        redirectPath={pagePath}
         billingPlan="growth"
         activeTrialEndsAt={
           validTeamPlan === "growth" ? trialPeriodEndedAt : undefined
@@ -149,6 +152,7 @@ export const BillingPricing: React.FC<BillingPricingProps> = ({
       />
 
       <PricingCard
+        redirectPath={pagePath}
         billingPlan="pro"
         teamSlug={team.slug}
         current={validTeamPlan === "pro"}