From 91cea2d7b76d41f89537c4d44117452b3f8a2a41 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 22 Nov 2024 19:59:22 +0000
Subject: [PATCH] [Dashboard] Fix stripe redirect for onboarding flow (#5499)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on adding a `redirectPath` prop across various components in the onboarding and billing sections of the application, enhancing navigation after specific actions.

### Detailed summary
- Added `redirectPath` prop to `LazyOnboardingUI` in `LoginPage.tsx`.
- Introduced `redirectPath` in `OnboardingChoosePlan` component.
- Passed `redirectPath` from `OnboardingUI` to `OnboardingChoosePlan`.
- Updated `PricingCard` to accept and utilize `redirectPath`.
- Implemented `redirectPath` in the `BillingPricing` component for `PricingCard` instances.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 apps/dashboard/src/@/components/blocks/pricing-card.tsx     | 3 +++
 apps/dashboard/src/app/login/LoginPage.tsx                  | 6 +++++-
 apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx      | 3 +++
 .../src/app/login/onboarding/on-boarding-ui.client.tsx      | 3 +++
 .../src/components/settings/Account/Billing/Pricing.tsx     | 4 ++++
 5 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/@/components/blocks/pricing-card.tsx b/apps/dashboard/src/@/components/blocks/pricing-card.tsx
index e293ab0b570..f427effc492 100644
--- a/apps/dashboard/src/@/components/blocks/pricing-card.tsx
+++ b/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>
diff --git a/apps/dashboard/src/app/login/LoginPage.tsx b/apps/dashboard/src/app/login/LoginPage.tsx
index 2121d552ada..67b588d4e67 100644
--- a/apps/dashboard/src/app/login/LoginPage.tsx
+++ b/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>
     );
   }
diff --git a/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx b/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx
index 37c99c3bbcb..d32c12fd4d6 100644
--- a/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx
+++ b/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>
 
diff --git a/apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx b/apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx
index 3efa11aef41..74b6271e27b 100644
--- a/apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx
+++ b/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(() => {});
diff --git a/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx b/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx
index 70ad0960a90..e24aec1a3de 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx
+++ b/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"}