## 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>
* chore: link to upgrade existing org
Billing papercut: Customers regularly create a new organization on a paid plan instead of upgrading their existing one. To mitigate that we will now show a small text allowing customers to jump into the subscription upgrade side panel of an existing organization.
* Update NewOrgForm.tsx
* fix Kevin's code
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* RQ convert mutateAsync calls to mutate where possible, otherwise add try finally blocks
* Skip eligibility query if project status is coming up
* Small UI update to replicas side panel
* Update apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Add error handling in CIDR
* Prettier lint
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* feat: add session timeout configs
* Regenerate the api file.
* Fix bunch of type errors caused by regenerating the api file.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Move all studio files from /studio to /apps/studio.
* Move studio specific prettier ignores.
* Fix the ui references from studio.
* Fix the css imports.
* Fix all package.json issues.
* Fix the prettier setup for the studio app.
* Add .turbo folder to prettierignore.
* Fix the github workflows.
Gildas Garcia
