## Context
Replaces all usage of `form.watch()` to use `useWatch` instead + follows
the "name what you watch" convention as specified in the react-hook-form
skills.
There's also a small refactor in `SmtpForm.tsx` which removes the
unnecessary use of a `useState` to track if SMTP is enabled or not
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Updated many Studio forms to watch specific fields more precisely,
improving live UI updates for previews, warnings, conditional sections,
and validation messages.
* Enhanced responsiveness across settings, authentication, billing,
storage, integrations, and support flows while keeping save/update
behavior the same.
* **Refined Experiences**
* Improved the analytics table creation flow with tighter, enum-based
column type validation and structured, type-specific column options.
* **Preserved Behavior**
* Maintained existing permission checks, submission flows, and
account-management workflows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.
`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.
**Changed:**
- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory
**Removed:**
- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)
## To test
- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
* Removed the legacy Admonition import entry point.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Summary
Since #47293, an API failure on a signup / org-creation /
project-creation form emitted `dashboard_error_created` twice:
`useTrackFunnelError` fired the origin-tagged event and the global
`ToastErrorTracker` independently fired the legacy untagged
`source:'toast'` event for the same toast, each behind its own 10%
sampling draw. I verified the twin rate empirically at 8-11% of
origin-tagged funnel toasts, exactly the floor for two independent 10%
draws, meaning the twin co-fires for effectively every funnel error
([Hex
thread](https://app.hex.tech/supabase/thread/019f3bc1-3a5c-7200-9122-8e3439bfbe8c)).
Any consumer counting funnel errors without an `origin IS NOT NULL`
filter saw ~2x inflation.
The fix makes `ToastErrorTracker` the sole emitter of `source:'toast'`
events, so the duplicate is unrepresentable rather than suppressed.
Funnel call sites pass the id returned by `toast.error()` into
`trackFunnelError`, which registers the funnel properties against that
toast id instead of firing its own event – the tracker then emits a
single `dashboard_error_created` enriched with `origin` /
`errorCategory` / `errorReason` / `errorCode` for registered toasts, and
the plain untagged event otherwise. The `'toast'` overload of
`trackFunnelError` requires the toast id, so a missed pairing is a
compile error rather than a silent double count. Registration is
unconditional and there's only one sampling draw, so suppression can't
lose a sampling race. `'form'`-sourced funnel events are unchanged.
## Changes
- `lib/toast-errors.tsx`: toast-id → funnel-properties registry
(`registerFunnelErrorToast`); `ToastErrorTracker` emits one (optionally
enriched) event per error toast under a single 10% draw, deleting
entries once consumed
- `lib/telemetry/use-track-funnel-error.ts`: overloaded signature –
`'toast'` requires the id returned by `toast.error()` (type-enforced),
`'form'` keeps direct emission with its own sampling
- Update the 7 funnel `toast.error` call sites in `NewOrgForm`,
`SignUpForm`, and `pages/new/[slug]` to pass the toast id
- Component tests for the tracker (previously uncovered), including an
end-to-end test through `useTrackFunnelError`
- Code hygiene (also flagged by CodeRabbit): all four
`dashboard_error_created` emitters (toast, form, `AlertError`,
`ErrorMatcher`) independently encoded the 10% draw – downstream analysis
assumes a uniform sampling multiplier across sources, so one site
drifting would silently skew comparisons. The rate and the draw now live
in one place (`isDashboardErrorSampled()` in
`lib/telemetry/error-sampling.ts`). No behavior change.
- Mount `ToastErrorTracker` in the TanStack root (`routes/__root.tsx`),
mirroring `pages/_app.tsx`. The TanStack tree mounted `Toaster` but
never the tracker, so untagged toast error telemetry has never fired in
that flavour – and with the tracker now the sole emitter, the missing
mount would have silently dropped funnel toast events there too. Side
effect once the TanStack flavour ships: untagged `source:'toast'` volume
from it goes from zero to normal.
## Testing
Component-tested (`apps/studio/lib/toast-errors.test.tsx`):
- [x] Unregistered error toast fires exactly one untagged
`dashboard_error_created {source:'toast'}`
- [x] Registered funnel toast fires exactly one event, enriched with
`origin`/`errorCategory`/`errorReason`/`errorCode`
- [x] `useTrackFunnelError` with a toast id routes through the tracker
as a single enriched event
- [x] Non-error toasts ignored; the 10% sampling gate still applies
Full Studio unit suite passes (392 files / 4371 tests), plus typecheck
and lint.
Also verified end-to-end in a local browser (TanStack flavour, sample
rate temporarily forced to 1): a failed signup produced exactly one
`dashboard_error_created` with `{source:'toast', origin:'signup',
errorCategory:'api', errorReason:'email_already_registered',
errorCode:403}` and no untagged twin (two independent trials); an
unregistered error toast produced exactly one plain `{source:'toast'}`;
a client-side validation failure produced exactly one `{source:'form',
origin:'signup', errorCategory:'validation',
errorReason:'email_invalid'}`; success toasts produced nothing.
Post-deploy I'll re-run the twin-rate query from the Hex thread; the
untagged-twin rate on funnel pages should decay to ~0 as stale bundles
reload over 2-3 days.
## Notes
- Origin-tagged funnel toast events now ride the tracker's single 10%
draw instead of their own independent draw – statistically identical
volume, but the event fires on the tracker's next effect rather than
synchronously at the call site (irrelevant for PostHog)
- Registration must happen in the same synchronous block as
`toast.error()` (documented on the `TrackFunnelError` type) – all
current call sites comply
- The invalid Postgres version toast in `pages/new/[slug].tsx` (~line
416) needs no special-casing: unregistered toasts keep the plain
untagged event, so its telemetry is preserved
- Heads-up for `dashboard_error_created` consumers: overall untagged
`source:'toast'` volume will dip slightly after this deploys, since
funnel-page twins disappear. A volume monitor seeing that drop is this
fix landing, not a tracking regression (same class as the intended
GROWTH-893 sampling-unification drop).
## Linear
- fixes GROWTH-965
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Enhanced error telemetry for organization creation, sign-up, payment,
and project-creation flows by associating failures with toast
identifiers and enriched funnel context.
* Standardized dashboard error sampling logic across error handling
components for consistency.
* **Tests**
* Added comprehensive test coverage for toast error tracking, including
funnel registration, deduplication, filtering, and sampling behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Summary
The creation-funnel instrumentation that shipped Jun 25 (#47291, #47293)
had real gaps, surfaced by the weekly telemetry audit and confirmed
against production PostHog data before I touched code. The two automated
reports also contradicted each other on `errorReason`; I checked
production (every value is a controlled slug) and the emit path (only
`useTrackFunnelError` sets it, and it only accepts classified slugs), so
I left the type as-is rather than add a cross-package abstraction for a
risk that cannot occur today.
## Changes
- Classify HTTP 401/403/404 API errors as `unauthorized` / `forbidden` /
`not_found` instead of the catch-all `other`. In production the
`org_creation` `other` bucket was ~96% 401s (~1,300 real over 4 days),
invisible in reason breakdowns. The status-code fallback runs after the
message-pattern match, so specific reasons still win and it only rescues
errors that would otherwise be `other`.
- Add a single `tier` property (`tier_free` / `tier_pro` / `tier_payg` /
`tier_team`) to `organization_creation_completed`, which previously
carried no properties. One canonical billing slug (matching
`SubscriptionTier`) instead of two overlapping plan/tier fields, so the
org-creation funnel segments cleanly by tier and joins against
subscription data. `tier_payg` is uncapped PRO.
- Freeze the submitted tier at submit time (snapshot in `createOrg`)
rather than reading live form state in the success callback, so the
event records the tier that was actually created even if the user edits
the form during the async payment flow.
- Emit `project_creation_form_exposed` with `surface: 'vercel'` on the
integration deploy-button project-creation page (the enum value existed
but was never fired). Gated on the URL `slug` so the impression is
captured as soon as the form renders, matching the sibling exposure hook
on that page.
I also checked the confirm-modal error path flagged in the insights
post: it already classifies via the shared
`useProjectCreateMutation.onError`, so adding instrumentation there
would double-count. No change made.
## Testing
These are analytics events with no UI change, so correctness is in what
lands in PostHog. Post-deploy validation I will run against production
(project 34344):
- `dashboard_error_created` where `origin='org_creation'` and
`errorReason='other'` drops ~96%, with `unauthorized` / `not_found`
appearing.
- `organization_creation_completed.tier` populated on 100% of new events
with one of the four tier slugs.
- `project_creation_form_exposed` with `surface='vercel'` goes from 0 to
greater than 0.
## Linear
- fixes GROWTH-948
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added telemetry for organization creation completion that includes the
selected billing tier.
* Added one-time telemetry when the Vercel project creation form is
exposed.
* **Bug Fixes**
* Improved API error classification to more accurately distinguish
unauthorized, forbidden, and not found responses.
* **Documentation**
* Updated telemetry event definitions to require tier metadata for
organization creation events.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## Summary
Adds frontend funnel telemetry to the organization-creation and
project-creation flows in Studio, so each is measurable as a funnel
(form exposed → completed) entirely from frontend events. Feeds the KPI
3 FE Benchmark Friction dashboard. Org creation had zero frontend funnel
events before this (only a backend event that fires across every
surface), and project creation had no clean form-view impression.
## Changes
- Define `organization_creation_form_exposed`,
`organization_creation_completed`, and `project_creation_form_exposed`
in the telemetry constants.
- Fire `organization_creation_form_exposed` when the new-org form
renders, gated on the profile resolving so pre-auth redirects are not
counted. Fire `organization_creation_completed` from the create success
callback, covering both the free and the paid pending-payment-intent
paths, attaching the new org slug as the organization group.
- Fire `project_creation_form_exposed` once the org and the
create-project permission have resolved, so it anchors on the form being
visible rather than the route loading. Project completion reuses the
existing client-side success event, so no duplicate completion event was
added.
## Notes
I chose exposed → completed over exposed → submitted. The org slug only
exists after the create API resolves, so the completion event is the
only org-funnel event that can carry the organization group; a
submit-time event cannot, which would break org-level segmentation. A
pageview is not a sufficient exposure anchor either: pageview capture is
off, and the manual pageview fires on route change before the form is
interactive (pre-auth redirect, async permission load, the no-org
redirect).
The `completed` verb follows the repo's approved-verb list
(`.claude/skills/telemetry-standards`); the repo previously migrated
`branch_merge_succeeded` to `branch_merge_completed` for the same
reason.
## Testing
Tested on the preview deploy:
- [x] `/dashboard/new` while signed in →
`organization_creation_form_exposed` fires once.
- [x] Create a free org → `organization_creation_completed` fires with
the organization group set.
- [x] `/dashboard/new/[slug]` with create permission →
`project_creation_form_exposed` fires once with `surface=main` and the
organization group.
- [x] No event re-fires on re-render or tab refocus.
Post-deploy: confirm in PostHog prod (project 34344) via HogQL that each
event fires with the expected properties and the organization / project
group set.
## Linear
- fixes FE-3690
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added improved tracking for organization and project creation flows,
including when forms are shown and when organization creation completes.
* Captures creation metadata to support better reporting on onboarding
and setup progress.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
The KPI-3 friction dashboard needs to know *why* users hit errors on the
signup, project-creation, and org-creation funnels, not just that they
did. The existing `dashboard_error_created` event already fires for
these paths (10% sampled, with `$pathname`), but carries no reason:
~98.5% of events have no `errorType` and no property carries an error
message. This adds PII-safe classification computed client-side from a
controlled vocabulary, so raw error text never leaves the browser.
Validation errors (previously invisible, since they are inline form
errors that never raise a toast) are now captured on invalid submit.
## Changes
- Extend `dashboard_error_created` with `origin`, `errorCategory`,
`errorReason`, `errorCode`, and a `form` source value
- Add a pure, unit-tested classifier (`funnel-errors.ts`) and a
10%-sampled tracking hook (`use-track-funnel-error.ts`); the classifier
maps errors to stable slugs and emits only slugs + HTTP status, never
raw message text
- Classify signup errors (API failures + validation) in `SignUpForm`
- Classify project-creation errors (API failures, OrioleDB guard,
validation) in the new-project wizard
- Classify org-creation errors (API failures, payment/card declines,
confirm-subscription, validation) in `NewOrgForm`
## Testing
13 unit tests cover every classifier branch (validation / api / network
/ payment, status-code handling, message-pattern matching, and
fallbacks).
To verify on the Vercel preview (events are 10% sampled; set the sample
rate to 1 locally to observe each fire):
- Signup with a weak but non-empty password: `origin=signup,
source=form, errorCategory=validation, errorReason=password_invalid`
- Signup with an already-registered email: `origin=signup, source=toast,
errorCategory=api, errorReason=email_already_registered`
- New project with an empty name: `origin=project_creation, source=form,
errorReason=project_name_invalid`
- New org with an empty name: `origin=org_creation, source=form,
errorReason=org_name_missing`
- New org with a declined test card: `origin=org_creation,
errorCategory=payment`
PII: raw `error.message` is never sent; only controlled slugs and HTTP
status. Dashboard consumers must filter `origin IS NOT NULL` so these do
not collide with the generic toast events the global tracker still
emits.
## Linear
- fixes FE-3691
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added improved, categorized telemetry for signup, project creation,
and organization creation errors, including payment,
subscription-change, and validation failures.
* Extended dashboard error events with optional structured diagnostics
(origin, category, reason, and optional error code) and support for
form-origin reporting.
* **Bug Fixes**
* Improved project-creation handling to record a validation telemetry
event when an Oriole image is unavailable.
* Ensured payment-related and subscription-change failures are captured
consistently alongside existing user toasts.
* **Tests**
* Added unit tests covering API/network/validation/Stripe error
classification and reason mapping.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
If a user switches account without an explicit log out via the
dashboard, landing back on `/org` will redirect users to the last
visited organization as stored in local storage, in which it can result
in the following state if the last visited organization does not exist
in the current account
<img width="2538" height="1060" alt="image"
src="https://github.com/user-attachments/assets/270e482a-3515-48ef-898b-87e76fce80d6"
/>
## Changes involved
Am opting to scope the last visited organization to the user profile
instead - this would be a bit more cleaner than trying to actively clear
the last visited org slug from local storage with implicit account
changes as there's no deterministic way to track that (afaik) from FE
side of things
## To test
Can reproduce the problem as such
- Ensure that you have 2 accounts to log in with, and one account has an
org that the other is not a part of
- For the organization that has the "extra" org, ensure that you click
into it so that the last visited org slug is saved in local storage
- Mimic changing accounts by visiting
`/auth/v1/authorize?provider=github` (using the domain for the env that
you're testing on - e.g localhost:8000 for local, or green for staging
preview)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Unified “last visited organization” handling across the Studio UI with
a shared hook, improving consistency for home/dashboard return,
cancel/back navigation, and account routing.
* **Bug Fixes**
* Updated redirects to only route to an organization when a valid
last-visited value is available; otherwise users go to the general
organizations page.
* Kept MFA enrollment and factor delete/leave flows aligned to the
unified last-visited organization value.
* **Tests**
* Updated onboarding and layout tests to match the new last-visited
organization storage key format and hook/query success behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Bug fix
## What is the current behavior?
returnTo is not correctly validated
## What is the new behavior?
returnTo is validated
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved validation of redirect URLs used after organization creation;
when a return URL is provided it is now validated before redirecting,
while auth-related query parameters are still preserved.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Refactor. Resolves FE-3216.
## What is the current behavior?
The AWS Marketplace create-organisation dialog owns its own copy of the
organisation name, type, and company-size form fields. It’s duplicative
and has drifted from the normal `/new` organisation form, making the AWS
flow harder to keep aligned.
This is stacked on #46058.
## What is the new behavior?
- Extracts the shared organisation details schema, defaults, option
constants, and fields from the normal `NewOrgForm`
- Reuses those shared fields in both the full organisation creation form
and the AWS Marketplace create-and-link dialog
- Keeps the AWS Marketplace flow anchored in the onboarding interstitial
rather than routing through `/new`
- Keeps the AWS-specific buyer ID, AWS-managed organisation endpoint,
create-and-link success state, and modal dismissal behaviour
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Link AWS Marketplace
Supabase-3742FEDF-53BD-4E80-926D-498B2EA94773"
src="https://github.com/user-attachments/assets/617ee422-1cf0-4858-801b-a4ee5ee402c9"
/> | <img width="1024" height="759" alt="Link AWS Marketplace
Supabase-0FEE2292-CB9F-43AA-B131-B6A549890970"
src="https://github.com/user-attachments/assets/ff017468-f8ac-469a-bb17-eea07842306f"
/> |
## Additional context
The shared field extraction is intentionally limited to organisation
details. Billing, plan selection, spend cap, Stripe, captcha, and the
`/new/[slug]` redirect behaviour stay owned by `NewOrgForm`; AWS
Marketplace keeps its separate create-and-link container because AWS
owns the billing contract.
## Validation
- `pnpm --filter studio exec vitest --run
tests/pages/aws-marketplace-onboarding.test.tsx`
- `pnpm --filter studio lint:ratchet --rule no-restricted-exports`
- `git diff --check`
Full Studio typecheck was also run, but it currently fails on existing
unrelated repo-wide React/implicit-any errors outside this diff.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved AWS Marketplace organization creation dialog to prevent
accidental closure while the creation process is in progress.
* **Improvements**
* Standardized organization details form handling across different
organization creation flows for improved consistency and user
experience.
* **Tests**
* Added comprehensive test coverage for the AWS Marketplace organization
creation workflow, including form submission, validation, and state
transitions.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46087?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Select` components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- Show a `ShimmeringLoader` skeleton in the new-org form while the
creation preview is fetching for the first time, so users see feedback
after entering their billing address.
- Disable the **Create organization** button while the preview is
refetching, to prevent submitting on stale totals.
- Replace the inline charge summary with the
shared `ChargeBreakdown` component, extending it with an
optional `subtotalLabel` prop (defaults to `"Subtotal"`, `"Plan
price"` here) to preserve the existing copy.
## Test plan
- [ ] Navigate to `/new` → pick Pro/Team → enter a billing address →
confirm shimmer shows until the first preview resolves.
- [ ] Change address/tax ID → confirm existing totals fade to 50% while
refetching and the submit button is disabled during the fetch.
- [ ] Confirm the breakdown still renders "Plan price", "Tax (x%)", and
"Total due today" correctly
- [ ] FREE plan path unaffected — no preview request, submit button
behaves as before.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Organization creation form now displays loading placeholders while
billing preview data is being fetched, providing clearer visual feedback
during the calculation process
* Submit button is now properly disabled during billing information
retrieval
* Billing breakdown display has been refined for improved consistency
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
When creating a new paid organization, if the backend rejects the
request (e.g. invalid tax ID, invalid billing address, name conflict,
rate-limit), the Stripe payment UI was torn down and remounted empty.
## Solution
- Remove `resetPaymentMethod()` from the org-create mutation's
`onError`. Server-side validation failures don't consume or invalidate
the Stripe payment method, so there's no reason to tear down the
Elements.
- Collapse the paid-plan submit flow so that `createPaymentMethod()` is
called on every attempt (not just the first). This materializes a fresh
`PaymentMethod` from whatever is currently in the Stripe Elements -
correctly capturing edits the user made between attempts (including card
number changes), and guaranteeing the latest address/tax ID are sent.
## Test plan
- [ ] Go to `/new`, pick **Pro**, fill a valid card (`4242 4242 4242
4242`) and address, tick "I'm purchasing as a business", select a tax ID
type and enter an **invalid** tax ID value → submit
- [ ] Confirm: error toast appears, card number + address fields + tax
ID selector + tax ID value remain populated, loading state clears
- [ ] Correct the tax ID and resubmit → confirm the network request
contains the **corrected** `tax_id` (not `undefined`) and succeeds
- [ ] Regression: create a Free org still works
- [ ] Regression: a 3DS failure on a paid org still resets the payment
method (that path goes through `PaymentConfirmation.onError`,
unchanged). Use card `4000002760003184`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved payment method handling during organization creation for paid
plans. The system now consistently attempts to create payment methods
and properly handles failures. Payment information is preserved on
errors, providing a more reliable organization setup experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.
## Solution
- Remove the suffix
- Update all usages
- Call the new `POST /platform/organizations/preview-creation` endpoint
when creating an organization on a paid plan to show a tax breakdown
before submission
- Preview is triggered reactively when the user completes the billing
address in the Stripe AddressElement (debounced, same pattern as
subscription upgrades)
- Displays plan price, tax line (with percentage), and total due today -
hides the plan price row when there's no tax adjustment
## Test plan
- [ ] Create a new org on the Free plan - no preview should appear
- [ ] Create a new org on Pro/Team - fill in billing address with all
fields including name
- [ ] Verify tax preview appears after address is complete (1s
debounce)
- [ ] Verify tax line shows for taxable jurisdictions (NY Zip Code
10001), hidden for non-taxable
- [ ] Verify plan price row is hidden when total equals plan price (no
tax)
- [ ] Change address country - verify preview updates
- [ ] Add a tax ID - verify preview updates
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Pricing preview during organization signup that shows plan price
differences, tax details (rate/amount or estimation failure), and “Total
due today.”
* Preview updates reactively based on selected plan and spend cap (PRO
without spend cap treated as PAYG) and appears only for paid plans after
preview initialization.
* Debounced billing address and tax ID input collection for accurate
previews; panel opacity reduced while fetching.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* fix: confirmation modal org creation
The button when confirming org creation was not working as it was just returning early.
The submit handler is triggered both on initially clicking the "Create organization" button and on the confirmation button, but it always early returns if the customer has other free plan orgs with projects, so it doesn't let the customer submit the form
12:44
How to reproduce:
- Create a free plan org with an active project
- Create a new paid plan organization
- Confirmation modal appears
- Clicking the button just closes the modal and does not create the org as there is an early return in the onSubmit handler
Moved away from ConfirmationModal to an inline info instead
* Update NewOrgForm.tsx
* Nit refactor
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Swap project query to fix team role picker
* Cleanup
* Fetch the projects in all cases, instead of only when there's no scoped roles.
* Make the projects fetch only when the panel is visible.
* Nit
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* basic fixes
* improve form contents
* fix border clipping
* remove redundant animation and classes
* polish confirm org
* improvements
* fix header rounding
* prevent password managers from appearing
* Fix the handling of token when redirecting back. Use nuqs for getting URL params. Simplify some logic.
* Minor fix to the useEffect for org name.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* CmdK OrgProjectSwitcher to swap useProjectsQuery with useProjectsInfiniteQuery
* Remove usage of useProjectsQuery in ProjectDropdown
* Remove usage of useProjectsQuery in NotificationsPopover
* Remove usage of useProjectsQuery in NotificationsFilter
* Remove usage of useProjectsQuery from LoadingState
* Clean
* Remove usage of getProjects from org-ai-details and fix missing key props in AIOnboarding
* Remove useAutoProjectsPrefetch from org/[slug]/index
* Fix TS + clean up
* Clean
* Remove usage of useProjectsQuery in NewOrgForm
Security approval is required for PCI compliance. This means we need security approval wherever we embed Stripe for payment methods.
Security approval was previously very coarse and most billing changes required security approval unnecessarily.
This PR aims to move all files relevant for payment method display/changes into a single folder and adjusts the ownership to only require security approval for that.
- Mandatory address input when adding a new payment method
- Removed the global HCaptcha store that wasn't used consistently and would sometimes block payment method changes
- Remove the custom billing address data & tax id form on org creation and plan upgrades in favour of Stripe's `AddressElement`
- Unify usage of the Stripe payment elements into a single component
- Customers can mark "Purchasing as a business" and will then be able to put down a tax id
- Adjusted billing address form to have better labels + tax id is filtered down to selected country
- Adjusted Stripe Elements styling to use floating labels (otherwise very hard to use with address element) + additional styling changes
- New flag to filter out payment methods that do not have an address for org upgrades and credit top ups, this will be enforced a few days after rolling this out
- Added Google Maps Places API integration for address auto-completion via Stripe AddressElement
- Upgraded Stripe dependencies
- Slight adjustments to styling of plan upgrade modal
- Remove captcha for downgrades to Free, it is not needed
- Properly handle 3DS if customer has multiple payment methods
- Move payment method invalidation to react-query
This PR implements the new flow to confirm subscription upgrades using Orb pending changes. This is backwards compatible and based on a flag exposed by the backend (`subscriptionPreview.pending_subscription_flow`).
Just like the organization creation, the entire flow is slightly different - instead of creating a payment method separately, the payment method is added inline while doing the upgrade and then attached to the customer. If payment fails, the upgrade will not go through. If payment requires additional action, the user needs to confirm the payment before allowing the upgrade.
For testing the new flow locally, toggle the flag in `flags.ts` on the backend.
Changes include
- No longer rely on the `changeType` from the plans endpoint as this is regularly out-of-sync and displays wrong up/downgrade info due to race conditions
- `readOnly` mode for Stripe elements if anything is loading/submitting
- Reduced prop drilling for some components
- Hide payment method and address selection on downgrade
- Prefill email in Stripe form to set up Link faster or connect faster
- Overwrite a bit of styling so it looks less foreign
- Moved the Payment component from the NewOrgForm into it's own file and renamed it
Adds support for the new Orb pending subscription change flow that has been added to the backend.
By default, the new feature is disabled (enabled after merge on staging). If disabled, this should work just like before with the regular `confirmPayment` function that triggers 3DS if needed and properly lets a user confirm their additional factor.
With the new flag, we only create a payment method, as we will do another payment intent that is set up for future usage and that may require 3DS - so we avoid the possible double confirmation (setup confirmation + payment intent). The organization creation endpoint can either return a full organization (i.e. on Free Plan or immediate payment success) or a payment_intent_secret. In case of the secret being returned, we need to confirm the secret with the Stripe SDK.
Moved the Stripe Elements further down to avoid the entire form reloading (especially billing address) in case of a payment failure.
* Add another page for claiming a project.
* Fix a misspell.
* Minor fixes.
* Comment some test code.
* Update the design on the confirm step.
* Reorganize the authorize page. Bunch of design fixes for the claim page.
* Fix
* Delete added files my mistake.
* Separate claim-project and authorize pages. Minor design fixes.
* Add more logs to the generate claim button.
* snapshot.
* Add more copy to the three steps.
* Make the claim URL button better.
* Add missing comma.
* Fix unneeded changes.
* Make the header full width.
* Fix all comments by Joshen.
* Clean up extra code.
* Forgotten some things to clean.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
When translation tools go over prices, they wrongfully convert USD into other currencies without changing the price. $25 becomes Rp25 (Rupiah).
By using `translate='no'` we avoid the translation of pricing info. There are some tooltips left that are not covered yet, but this should be the majority already.
Kept the docs Pricing component as simple as possible, just wrapping in a span to avoid translation, not modifying any formatting.
We currently get support requests about adding or amending invoices due to no billing address being set. Changes in this PR:
- Unify tax id and billing address into a single form
- Add ability to set billing name that diverges from org name
- Add ability to set billing address & tax id during org creation (only paid plans)
- Add ability to set billing address & tax id during plan upgrade
* refactor telemetry to only send events on path change no query
* fix type error
* add comment explaining weird type cast
* undo telemetry
* use local state
* rm comments
* cleanup fns
* handle query params on first render
* use zod for validation
* transform to uppercase
* track source when viewing plans
* remove log
* rename event
* Update apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx
Co-authored-by: Long Hoang <1732217+loong@users.noreply.github.com>
* Update apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingMetric.tsx
Co-authored-by: Long Hoang <1732217+loong@users.noreply.github.com>
* Update apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx
Co-authored-by: Long Hoang <1732217+loong@users.noreply.github.com>
* Update apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx
Co-authored-by: Long Hoang <1732217+loong@users.noreply.github.com>
* added docs for tracking
* prettier
* chore: rename origins to give more hints on where these are coming from
---------
Co-authored-by: Long Hoang <1732217+loong@users.noreply.github.com>
* Add types to the stripe API calls.
* Add a warning and redirect to new org if the user doesn't have an org. Refactor the new org page to keep the state in url.
* Simplify the plans listing.
* Revert some CSS changes.
* feat: prefill first org name and first project name
* chore: move prefill logic to new page
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Add lucide-react to docs (to make the autocomplete work).
* Migrate the docs app icons.
* Migrate the ui-patterns.
* Remove the old icons from ui package.
* Migrate the www app from react-feather icons.
* Migrate all of studio icons.
* Migrate the only component in design-system.
* Fix an old import in ui package. Revert an import in docs app.
* Fix some pages in www.
* Remove unneeded files used in generation of icons.
* Fix a prettier error.
* Fix more issues in www.
* Fix an issue in Log Date picker.
* Replace all string sizes with number sizes because the icons grew in some cases.
* Fix more imports in security page.
* Fix an extra import.
* Remove the size prop from all icons if they're in a button and they match the button size.
* Minor fixes for docs and www.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Update the design of the sonner toasts. Add the close button by default.
* Migrate studio and www apps to use the SonnerToaster.
* Migrate all toasts from studio.
* Migrate all leftover toasts in studio.
* Add a new toast component with progress. Use it in studio.
* Migrate the design-system app.
* Refactor the consent toast to use sonner.
* Switch docs to use the new sonner toasts.
* Remove toast examples from the design-system app.
* Remove all toast-related components and old code.
* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.
* Fix the width of the toast progress.
* Use text-foreground-lighter instead of muted for ToastProgress text
* Rename ToastProgress to SonnerProgress.
* Shorten the text in sonner progress.
* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.
* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).
* Fix the playwright tests.
* Refactor imports to use ui instead of @ui.
* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.
* Remove react-hot-toast lib.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
