## 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
## 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>
## Context
Main fix is to ensure that the tooltip here is scrollable - but also
adding some refactors
This is the org billing page when downgrading an org
### Before
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/6094c2e6-c1bb-460f-a2d2-347c1d7d2e77"
/>
### After
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/9d0ac9a6-6e89-4758-af14-8144a8a86469"
/>
## Changes involved
- Use HoverCard for invoice estimate in plan confirmation dialog
- Also nudge the UI a little, e.g use a separate column for the compute
prices + adjust text color to improve clarity
- Refactor usage of `any` for some of the TS declarations
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added an invoice estimate tooltip in subscription settings showing
monthly charges with plan fees, combined compute rows, per-project
compute costs, optional compute credits, and a total monthly estimate.
* **Refactor**
* Simplified the plan update flow by consolidating subscription preview
handling and extracting the invoice UI into the new tooltip component.
* **Chores**
* Improved internal type definitions for subscription preview data and
pricing tier identifiers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- **Subscription downgrade dialog**: The plan name row was being hidden
in the charge breakdown when `changeType === 'downgrade'`, so users
downgrading (e.g. Team → Pro) couldn't see which plan the cost referred
to. Removed the downgrade exclusion so the plan name row renders
consistently across upgrade/downgrade flows.
- **Credit Top Up dialog**: The submit button only
reflected `executingTopUp`/`paymentConfirmationLoading`, but
the `onSubmit` handler runs several async steps first (hCaptcha, billing
profile validation, Stripe `createPaymentMethod`) before the mutation
flips `isPending`. That left a clickable window where users could
trigger multiple top-ups. Added `form.formState.isSubmitting` to
both `loading` and `disabled` so the button is locked for the full
submit lifecycle.
## Test plan
- [ ] Downgrade from Team → Pro and confirm the Pro plan row appears in
the charge breakdown
- [ ] Open Credit Top Up, submit, and rapidly click the Top Up button —
verify only one charge is initiated
- [ ] Verify Top Up button shows a loading state immediately on click
(before the mutation starts)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Consistently show subscription plan cost during billing adjustments,
including downgrades.
* Improve Top Up button to reflect form submission state and prevent
duplicate submissions.
* **Style**
* Enhanced text contrast for better readability in billing information
displays.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
## Summary
- Show the plan name row in the monthly invoice estimate tooltip even
when the organization has no projects, so the section no longer appears
headerless next to the tax line.
## Test plan
- [ ] Open an org with no projects → Subscription plan update dialog →
hover the "Monthly invoice estimate" tooltip → verify the plan name +
price row is visible.
- [ ] Repeat on an org with projects → verify plan, Compute row, and
project breakdown all still render as before.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Improved rendering of the Monthly invoice estimate table in the
subscription plan update dialog, with reorganized display logic for plan
and project billing rows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Reorders the itemized charge breakdown in the subscription upgrade
preview dialog to: Plan → Tax → Subtotal → Unused Time → Credits. Also
appends a "Includes proportional tax if applicable" note to the unused
time tooltip when tax is being applied, so users understand the prorated
credit already reflects tax.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Reorganized proration breakdown display order in subscription plan
updates for improved clarity.
* Enhanced unused time charge tooltip to conditionally include tax
information.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes#44872
The "Empty organization" admonition in the subscription upgrade dialog
checks `.length === 5` instead of `.length === 0`. The warning text says
"This organization has no active projects" but only shows for orgs with
exactly 5 active projects.
Introduced in #44494 (b9e83b25).
The adjacent `.length === 1` check for the single-project note is
correct, confirming this is a count comparison that should be `0`.
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## Summary
Reorder AddPaymentMethodForm and PaymentMethodSelection to use a dry run
validation → Stripe payment setup → real update flow:
- Validate address and tax ID via `dry_run: true` before touching Stripe
- Proceed with Stripe payment method creation / 3DS only if validation
passes
- Persist the customer profile update with dry run disabled after Stripe
succeeds
- Add `dry_run` support
to `useOrganizationCustomerProfileUpdateMutation`
- Add `getFormValues()` to `PaymentMethodElementRef` to read address and
tax ID form state
- Delete the now-unused `organization-tax-id-update-mutation.ts`
## Test plan
### Adding a Payment Method
From the billing dashboard `/org/_/billing`:
- [ ] Add a payment method with a valid tax ID: should dry-run
validate, then create the payment method via Stripe, then persist the
billing profile
- [ ] Add a payment method with an invalid tax ID: should show a
validation error from the dry run and not proceed to Stripe payment
setup
- [ ] Add a payment method with the "primary billing address" checkbox
unchecked: should skip the customer profile update entirely and only
create the payment method
- [ ] Add a payment method where Stripe 3DS fails: billing profile
should not be persisted (only the dry run ran)
### Credit Top Up
- [ ] Top up credits with a new payment method and valid tax ID: should
dry-run validate, then create the payment method, then process the
top-up
- [ ] Top up credits with a new payment method and invalid tax ID:
should show a validation error from the dry run and not proceed to
Stripe payment method creation
### Plan Upgrade
- [ ] Upgrade plan with a new payment method and valid tax ID: should
dry-run validate before creating the payment method
- [ ] Upgrade plan with a new payment method and invalid tax ID: should
show a validation error and not proceed to Stripe
- [ ] Upgrade plan with an existing payment method: should proceed
without dry-run validation
## Summary
- Passes billing address and tax ID from the payment form to the
subscription preview endpoint, so taxes are recalculated live as the
user updates their details
- Debounces address/tax ID changes (1s) in `NewPaymentMethodElement` to
avoid excessive API calls while typing
- Decouples the preview refetch from the payment form's mount state -
uses `keepPreviousData` so the form stays mounted and the breakdown dims
with `opacity-50` instead of unmounting/remounting during refetches.
Shimmer skeleton only shows on initial load.
- Disables the "Confirm upgrade" button while a refetch is in progress
to prevent submitting with stale tax data
- Respects the "Use address as my org's billing address" checkbox: the
preview should mirror what will actually happen - if the checkbox is
unchecked, the address won't be saved to Orb, so it shouldn't be used
for the tax estimate either. Otherwise the user sees one price and gets
charged another. The logic for this lives in `PlanUpdateSidePanel`
``` mermaid
flowchart TD
A[User opens upgrade dialog] --> B[Fetch subscription preview]
B --> C[Show payment form + price breakdown]
C --> D[User edits address or tax ID]
D -->|1s debounce| E{Use as billing address?}
E -->|Yes| F[Re-fetch preview with new address]
E -->|No| G[Re-fetch preview without address override]
F --> H[Update breakdown — form stays mounted]
G --> H
H --> C
```
## Test plan
- [x] Open the plan upgrade dialog, verify the payment form and
breakdown load normally on first open
- [x] Change the billing address country - verify the breakdown dims
briefly and updates with new tax amounts without the payment form
unmounting
- [x] Toggle the tax ID on/off and change its value - verify the
preview refreshes after ~1s debounce
- [x] Confirm the upgrade button is disabled while the preview is
refetching
- [x] Uncheck "Use address as my org's billing address" - verify the
preview refetches without address/tax overrides
- [x] Re-check the checkbox - verify the preview refetches again with
the current form address
- [x] Assert that adding a new billing address in the CreditTopUp form
works and saves the address
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Payment and subscription flows now propagate billing address and tax
ID via new callbacks; subscription preview requests include these values
and preserve prior results while fetching.
* Preview updates are debounced to reduce noise; loading state disables
confirm actions and visually dims charge breakdown.
* **UX**
* Address input emits complete normalized address updates (empty second
line cleared).
* Tax ID input emits updates and explicit clears (null).
* “Use address as my org's billing address” is now controlled and
reports changes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR moves the client-side "Charge Today" calculation to the backend
- relying on the `preview` endpoint data to show the `Charge Today`,
`Prorated Credits` and `Customer Balance` in the Subscription Upgrade
Preview.
It also includes fields for displaying Tax information in the preview,
only for enabled orgs. Do note that at the moment the Tax Preview will
not change if the address in the Subscription Preview changes, that will
be tackled in a follow-up PR.
## Changes
- Replace client-side charge calculation with backend data: The upgrade
dialog previously computed the prorated credit and total charge locally
(using subscription period timestamps and plan prices). This PR uses the
`upfront_charge` object returned by the subscription preview API
instead.
- Display itemized tax breakdown: When the backend returns tax data, the
dialog now shows a line-by-line breakdown: plan cost → subtotal (if
different) → tax (with rate %) → total charged today.
- Use `tax_status` from the subscription preview to conditionally show
tax details, and display a warning when tax calculation fails.
## Testing
### No taxes - Upgrade from Free to Paid Plan
- With a Free Org with a billing address in Canada or any other
non-enabled jurisdiction, start the upgrade to the Pro Plan
- Assert that only the Charge Today field is shown in the summary
<img width="410" height="298" alt="image"
src="https://github.com/user-attachments/assets/e8c7e12e-833d-41d5-aec3-00092b12782f"
/>
### Taxes - Upgrade Plan
- Update an Org's Orb Customer on the Free or Pro Plan with the
`automatic_tax_enabled: true` flag.
```
curl --location --request PUT 'https://api.withorb.com/v1/customers/external_customer_id/{ORG_SLUG}' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'Authorization: ••••••' \
--data '{
"tax_configuration": {
"tax_exempt": false,
"tax_provider": "numeral",
"automatic_tax_enabled": true
}
}'
```
- Update the Org address to a valid taxable address, like:
```
"address": {
"country": "US",
"line1": "100 Congress Ave",
"city": "Austin",
"state": "TX",
"postal_code": "78701"
}
```
- Assert that the tax information is shown in the preview, including Tax
Rate, Prorated credits (if applicable), Customer balance (if applicable)
and the price of the intended plan.
<img width="465" height="470" alt="image"
src="https://github.com/user-attachments/assets/dd6a7e27-1708-48a8-bbf3-5435e6d582c2"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added itemized breakdown of subscription charges, including plan cost,
unused time credits, subtotal, and applicable taxes.
* Enhanced billing estimates with detailed tax information display.
* **Improvements**
* Updated "Charge today" calculations to reflect real-time preview data
for greater accuracy.
* Improved billing estimate UI layout and clarity with better
organization of charge details.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>
This is the third and final PR to complete the new connect sheet.
First: https://github.com/supabase/supabase/pull/42367
Second: https://github.com/supabase/supabase/pull/42373
This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.
To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs
* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates
* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors
* **Chores**
* ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* 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
* Remove usage of useProjectsQuery in SupportForm -> AIAssistantOption
* Remove usage of useProjectsQuery in PlanUpdateSidePanel
* Remove usage of useProjectsQuery in NoProjectsOnPaidPlan
* Remove useProjectsQuery in IntegrationPanels
* Remove useProjectsQuery from IntegrationPanels 2
* Remove useProjectsQuery from IntegrationConnection
* Remove console log
* Small change
* Update Supabase docs URLs to use env variable
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for documentation links
This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for all documentation links
This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* replace more instances
* ci: Autofix updates from GitHub workflow
* remaining instances
* fix duplicate useRouter
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@users.noreply.github.com>
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.
* basic typography classes
* Clean up classes for where we use h1 tags
* Clean up classes for where we use h2, h3, h4
* Clean up classes for where we use h6
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
- 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
When changing the plan while also creating a payment method in the same breath, some customers double-clicked the confirm button leading to a double-submission and possibly leading to a state where the customer gets charged, but the plan change is not going through.
- 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
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
Gildas Garcia