New onboarding plan by BOHEUS · Pull Request #17776 · twentyhq/twenty

BOHEUS · 2026-02-08T13:23:49Z

Fixes github.com/twentyhq/core-team-issues/issues/637

greptile-apps · 2026-02-08T13:25:54Z

Greptile Overview

Greptile Summary

This PR adds a plan query parameter that hydrates billingCheckoutSessionState so the onboarding “Choose your plan” page can deep-link to a specific plan. The onboarding page’s footer links are also updated to switch between Pro and Enterprise by navigating to AppPath.PlanRequired with ?plan=....

Key integration point: useInitializeQueryParamState reads window.location.search and writes to Recoil, which ChooseYourPlanContent then uses to determine the current plan and which plan-switch link to render.

Confidence Score: 2/5

This PR has a couple of user-facing runtime issues that should be fixed before merge.
Score is reduced due to (1) a Recoil state update happening during render in ChooseYourPlanContent, and (2) an inconsistent BillingPlanKey enum import between query-param hydration and UI comparisons, which can break plan toggling/conditional rendering when initialized from the URL.
packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx; packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts

Important Files Changed

Filename	Overview
packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts	Adds support for a `plan` query param to update `billingCheckoutSessionState`; main concern is BillingPlanKey enum source mismatch with onboarding UI comparisons.
packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx	Replaces pricing link with plan-toggle links (adds `?plan=`) but currently updates Recoil state during render, which can cause render/update loops.

Sequence Diagram

sequenceDiagram
  participant User as User
  participant Page as ChooseYourPlanContent
  participant Recoil as Recoil
  participant Init as useInitializeQueryParamState
  participant URL as URLSearchParams

  User->>Page: Navigate to /onboarding (PlanRequired)
  Page->>Init: initializeQueryParamState()
  Init->>URL: Read window.location.search
  URL-->>Init: plan=pro|enterprise (optional)
  Init->>Recoil: set(billingCheckoutSessionState.plan)
  Recoil-->>Page: billingCheckoutSessionState updated
  Page->>Page: Render links based on currentPlanKey
  Page-->>User: Shows plan toggle link

greptile-apps

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2026-02-08T13:26:01Z

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts

 import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
 import deepEqual from 'deep-equal';
+import { BillingPlanKey } from '~/generated/graphql';



Mismatched BillingPlanKey enum

This hook sets BillingCheckoutSession.plan using BillingPlanKey from ~/generated/graphql (e.g. BillingPlanKey.PRO), but ChooseYourPlanContent compares currentPlanKey against BillingPlanKey from ~/generated-metadata/graphql. If these are different generated enum objects, strict equality checks like currentPlanKey === BillingPlanKey.PRO will fail, leading to wrong plan-specific UI when the plan is initialized from query params. Align the enum source used across both places (one canonical import).

greptile-apps · 2026-02-08T13:26:03Z

Additional Comments (1)

packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx
State update during render

setVerifyEmailRedirectPath(undefined) is called during render when verifyEmailRedirectPath is defined (lines 108-110). This triggers a state update while rendering, which React/Recoil can warn about and can cause repeated renders for users who land here with that state set. This should be moved into a useEffect or otherwise handled outside the render path.

Copilot

Pull request overview

Updates the onboarding “Choose your plan” step to let users switch between Pro and Organization (Enterprise) plans via a ?plan= query parameter, removing the previous external “Change Plan” link.

Changes:

Remove the “Change Plan” link to the external pricing page from the onboarding plan step.
Add “Pro plan” / “Organization plan” links that navigate to /plan-required?plan=....
Extend query-param hydration to support a plan parameter that updates billingCheckoutSessionState.plan.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx	Replaces the external plan-change link with internal links that toggle the plan via `?plan=`.
packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts	Adds query-param handling for `plan=pro

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-08T13:29:07Z

packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx

+          <ClickToActionLink href={AppPath.PlanRequired.concat('?plan=enterprise')}>
+            <Trans>Organization plan</Trans>
+          </ClickToActionLink>
+        ) : (
+          <ClickToActionLink href={AppPath.PlanRequired.concat('?plan=pro')}>
+            <Trans>Pro plan</Trans>


The plan switch links are manually built with AppPath.PlanRequired.concat('?plan=...'). There’s already a buildAppPathWithQueryParams(AppPath.PlanRequired, {...}) helper used elsewhere for this route; using it here would improve readability/consistency and avoid subtle mistakes when more params are added later.

Copilot · 2026-02-08T13:29:07Z

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts

+                const updatedBillingCheckoutSession: BillingCheckoutSession = {
+                  plan: changedPlan,
+                  interval: billingCheckoutSession.interval,
+                  requirePaymentMethod:
+                    billingCheckoutSession.requirePaymentMethod,
+                };
+                set(billingCheckoutSessionState, updatedBillingCheckoutSession);


The new plan query-param handler always calls set(billingCheckoutSessionState, ...) when the param is valid, even if the current session already has the requested plan. This can trigger unnecessary state updates/rerenders on every navigation where ?plan= is present; consider checking billingCheckoutSession.plan !== changedPlan (similar to the deepEqual guard used in the billingCheckoutSession handler) before calling set.

Suggested change

const updatedBillingCheckoutSession: BillingCheckoutSession = {

plan: changedPlan,

interval: billingCheckoutSession.interval,

requirePaymentMethod:

billingCheckoutSession.requirePaymentMethod,

};

set(billingCheckoutSessionState, updatedBillingCheckoutSession);

if (billingCheckoutSession.plan !== changedPlan) {

const updatedBillingCheckoutSession: BillingCheckoutSession = {

plan: changedPlan,

interval: billingCheckoutSession.interval,

requirePaymentMethod:

billingCheckoutSession.requirePaymentMethod,

};

set(

billingCheckoutSessionState,

updatedBillingCheckoutSession,

);

}

cubic-dev-ai

1 issue found across 2 files

Prompt for AI agents (all issues)


Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts">

<violation number="1" location="packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts:50">
P2: `plan` builds the new `billingCheckoutSessionState` from a snapshot captured before earlier handlers run, so when both `billingCheckoutSession` and `plan` query params are present, the `plan` handler can overwrite the state set by `billingCheckoutSession` with stale values. Use the functional updater form of `set` to merge with the latest pending state.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts

github-actions · 2026-02-08T13:36:28Z

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:38043

This environment will automatically shut down when the PR is closed or after 5 hours.

cubic-dev-ai

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (all issues)


Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts">

<violation number="1" location="packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts:61">
P2: The `plan` handler compares against a stale Recoil snapshot. If both `billingCheckoutSession` and `plan` query params are present, the earlier handler can queue a plan update but this check uses the old snapshot and may skip the override when the initial state matches the URL plan, preventing the URL plan from taking precedence.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts

charlesBochet · 2026-02-09T21:08:31Z

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts

              );
            }
          },
+          plan: (value: string) => {


I'm a bit lost here, why do we need a dedicated entry for plan? I would expect it to be part of billingCheckoutSession handled above?

According to the issue, new plan parameter should be introduced, I assumed it should be only within planRequired page when user wants to change the plan and billingCheckoutSession should be left as is in pricing page

charlesBochet · 2026-02-09T21:11:09Z

packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx

+        <span />
+        {currentPlanKey === BillingPlanKey.PRO ? (
+          <ClickToActionLink
+            href={AppPath.PlanRequired.concat('?plan=enterprise')}


this concatenation does not seem to be enough, we should create a link with a full billingSessionState

@charlesBochet just to be clear, said plan parameter shouldn't be used and instead should we use billingCheckoutSession everywhere? If so, I'll quickly add changes

yes, I think so, that's the purpose of this existing query param, let's use it

charlesBochet

Thanks @BOHEUS, I've left comments

charlesBochet · 2026-02-12T17:27:57Z

@BOHEUS could you fix the conflits and we are good to go :)

BOHEUS · 2026-02-12T17:54:55Z

Done @charlesBochet

github-actions · 2026-02-17T18:12:40Z

Thanks @BOHEUS for your contribution!
This marks your 53rd PR on the repo. You're top 1% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter

twenty-eng-sync · 2026-02-17T18:13:18Z

Hey @charlesBochet! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!

BOHEUS and others added 2 commits February 8, 2026 14:22

Add plan param

2ee5032

Merge branch 'twentyhq:main' into new-onboarding-plan

ff062c8

Copilot AI review requested due to automatic review settings February 8, 2026 13:23

Copilot started reviewing on behalf of BOHEUS February 8, 2026 13:24 View session

greptile-apps bot reviewed Feb 8, 2026

View reviewed changes

Copilot AI reviewed Feb 8, 2026

View reviewed changes

cubic-dev-ai bot reviewed Feb 8, 2026

View reviewed changes

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts Outdated Show resolved Hide resolved

Review fix and lint

848a3ec

cubic-dev-ai bot reviewed Feb 8, 2026

View reviewed changes

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts Outdated Show resolved Hide resolved

charlesBochet reviewed Feb 9, 2026

View reviewed changes

charlesBochet requested changes Feb 9, 2026

View reviewed changes

charlesBochet self-assigned this Feb 9, 2026

charlesBochet added the -PR: awaiting author label Feb 9, 2026

Charles review fix

14d196a

charlesBochet approved these changes Feb 12, 2026

View reviewed changes

BOHEUS added 2 commits February 12, 2026 17:33

Merge branch 'main' into new-onboarding-plan

5aa15ee

Lint

1c27ce0

charlesBochet merged commit 171efe2 into twentyhq:main Feb 17, 2026
62 checks passed

greptile-apps bot mentioned this pull request Feb 17, 2026

i18n - translations #18013

Merged

BOHEUS deleted the new-onboarding-plan branch February 17, 2026 19:43

Conversation

BOHEUS commented Feb 8, 2026

Uh oh!

greptile-apps bot commented Feb 8, 2026

Greptile Overview

Greptile Summary

Confidence Score: 2/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot commented Feb 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

charlesBochet Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

BOHEUS Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

charlesBochet Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

BOHEUS Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

charlesBochet Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

BOHEUS Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

charlesBochet left a comment

Choose a reason for hiding this comment

Uh oh!

charlesBochet commented Feb 12, 2026

Uh oh!

BOHEUS commented Feb 12, 2026

Uh oh!

Uh oh!

github-actions bot commented Feb 17, 2026

Uh oh!

twenty-eng-sync bot commented Feb 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Feb 8, 2026 •

edited

Loading

BOHEUS Feb 10, 2026 •

edited

Loading