feat(growth): signup flow changes

[sedson]

No description provided.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

Replaces the guest/member paywall with a multi-plan model (tiers: haiku, sonnet, opus) and updates checkout flows to pass a tier through stripe → auth service clients. Adds a new Signup component and routes /signup to it, removes the Onboarding component and its route/registration, and updates interactive onboarding to redirect when the tutorial is already completed. Removes several cursor-pointer classes across auth forms and standardizes disabled behavior using opacity/pointer-events. Service client signatures and calls were extended to accept an optional tier parameter.

Poem

🐰 I nibble code and hop with glee,
New plans sprout—haiku, sonnet, opus three.
Signup’s a door; onboarding’s walked away,
Tiers carried through the checkout’s gentle sway.
My whiskers twitch—toward brighter pathways I play ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	No description was provided by the author, making it impossible to assess whether it is related to the changeset.	Add a pull request description explaining the changes, objectives, and rationale for the signup flow refactoring.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title 'feat(growth): signup flow changes' is clearly related to the main changes in the changeset, which involves refactoring the signup and onboarding flow components, removing the old Onboarding component, and introducing a new Signup component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch seamus/onboaring-flow

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Preview: https://seamus-onboaring-flow-tofety.preview.macro.com/app (0500bfe)

[sedson]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

js/app/packages/service-clients/service-auth/client.ts (1)

406-421: 🛠️ Refactor suggestion | 🟠 Major

Reuse the generated checkout-tier type.

CreateCheckoutSessionRequest already narrows tier to StripeProductTier; widening it to string here drops compile-time validation at the network boundary. Please type this arg from the generated request model so invalid tiers cannot compile through to /user/stripe/checkout.

As per coding guidelines, js/app/**/*.{ts,tsx}: Use type-driven design with types guiding function composition. DO NOT USE any

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@js/app/packages/service-clients/service-auth/client.ts` around lines 406 -
421, The createCheckoutSession function's args currently type tier as string
which widens and bypasses the generated
CreateCheckoutSessionRequest/StripeProductTier validation; change the args shape
to use the generated request type (or at least type the tier as
StripeProductTier from the generated model) so the function signature aligns
with CreateCheckoutSessionRequest and preserves compile-time checking before
calling fetchWithAuth(`/user/stripe/checkout`); update the parameter type
reference in createCheckoutSession and any destructuring/JSON body usage to
match CreateCheckoutSessionRequest/StripeProductTier.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@js/app/packages/app/component/auth/Signup.tsx`:
- Around line 97-105: The clickable Google sign-up element in Signup.tsx is a
<div> using onClick (startGoogleLogin) and lacks keyboard support; replace it
with a semantic <button> (or add role="button", tabindex="0" and keyDown handler
invoking startGoogleLogin) so keyboard users can activate it, preserve existing
classes and the IconGoogle markup, and ensure focus/hover styles remain
consistent and accessible.
- Around line 119-125: The terms and privacy anchor hrefs in Signup.tsx are
using absolute paths ("/terms", "/privacy") while other auth links use the
ROUTER_BASE_CONCAT prefix; update the two anchors in the Signup component to use
`${ROUTER_BASE_CONCAT}terms` and `${ROUTER_BASE_CONCAT}privacy` (or the
equivalent string concatenation used in this file) so they resolve under the app
base path, and apply the same change in LoginOptions and Onboarding components
if those files also use bare "/terms" or "/privacy".

In
`@js/app/packages/app/component/interactive-onboarding/lessons/choose-plan.tsx`:
- Around line 53-69: The component's handleCheckout directly calls
stripeServiceClient.createCheckoutSession and manages network/loading/error
state locally; move that network call into the queries package by adding a
Tanstack query mutation (e.g., createCheckoutSessionMutation in queries) that
calls stripeServiceClient.createCheckoutSession, then import and use that
mutation in this component instead of calling the service client directly.
Replace the local pending/error handling (setLoading, loading()) with the
mutation's status (mutation.isLoading, mutation.isError) and perform side
effects in the mutation callbacks: onSuccess should
analytics.track('subscription_start', { type: tier }) and redirect via
window.location.href to the returned URL, and onError should
toast.failure('Failed to start checkout...') (and clear any local state if still
used). Ensure no direct references to stripeServiceClient remain in this file
and the new mutation is the single caller of the client.

In `@js/app/packages/app/component/paywall/PaywallComponent.tsx`:
- Around line 48-55: handleCheckout currently calls
stripeServiceClient.createCheckoutSession directly (bypassing the data layer);
extract that call into a TanStack Query mutation in the queries package (create
a new mutation—e.g., createCheckoutSessionMutation) which invokes
stripeServiceClient.createCheckoutSession with the same arguments, then replace
the direct call in PaywallComponent.handleCheckout to call the mutation's
mutateAsync (or mutate) and derive button/loading/error state from the
mutation's status; preserve the existing props.cb invocation and ensure you pass
the same parameters (props.customType or props.errorKey and tier) through the
mutation API so the component no longer calls any service-clients directly.

In `@js/app/packages/app/component/Root.tsx`:
- Around line 255-257: The route object currently uses an unnecessary inline
component factory; replace the component field that is set to "() => <Signup />"
with the direct component reference "Signup" in the route entry so the route's
component property points to the Signup component itself (locate the route
object where path: '/signup' and component is currently an arrow returning
<Signup />).

In `@js/app/packages/service-clients/service-stripe/client.ts`:
- Around line 36-49: Update the createCheckoutSession API to accept a single
options object instead of positional parameters: change the signature of
createCheckoutSession to (opts: { type?: string; discount?: string; tier?:
AuthTierType }) and map opts.type/discount/tier into the
authServiceClient.createCheckoutSession payload (preserve gaClientId via
getGaClientId()). Update all callers to pass createCheckoutSession({ tier }) or
createCheckoutSession({ type, discount, tier }) rather than
createCheckoutSession('', undefined, tier). Ensure the parameter type uses the
specific narrowed tier type from the auth client (no any) and that optional
fields default to null where the auth call expects null (e.g., discount ?? null,
gaClientId ?? null).

---

Outside diff comments:
In `@js/app/packages/service-clients/service-auth/client.ts`:
- Around line 406-421: The createCheckoutSession function's args currently type
tier as string which widens and bypasses the generated
CreateCheckoutSessionRequest/StripeProductTier validation; change the args shape
to use the generated request type (or at least type the tier as
StripeProductTier from the generated model) so the function signature aligns
with CreateCheckoutSessionRequest and preserves compile-time checking before
calling fetchWithAuth(`/user/stripe/checkout`); update the parameter type
reference in createCheckoutSession and any destructuring/JSON body usage to
match CreateCheckoutSessionRequest/StripeProductTier.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 308569ce-ec0e-4cfd-ab21-8d2a5e2cc7bd

📥 Commits

Reviewing files that changed from the base of the PR and between abb324e and b1c91ee.

📒 Files selected for processing (9)

• js/app/packages/app/component/Root.tsx
• js/app/packages/app/component/auth/EmailForm.tsx
• js/app/packages/app/component/auth/LoginOptions.tsx
• js/app/packages/app/component/auth/Signup.tsx
• js/app/packages/app/component/auth/VerifyForm.tsx
• js/app/packages/app/component/interactive-onboarding/lessons/choose-plan.tsx
• js/app/packages/app/component/paywall/PaywallComponent.tsx
• js/app/packages/service-clients/service-auth/client.ts
• js/app/packages/service-clients/service-stripe/client.ts