mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 07:09:07 +03:00
Kanishk Dudeja
be3737d9d0
### Summary This PR refactors the billing address form to use Stripe AddressElement on both the org billing page and the missing-address modal, adding Google Maps autocomplete and country-aware state/province inputs. ### Testing - Address element renders on org billing page, autocomplete works, and state/province options update per country. - Existing billing address data loads correctly into the form. - Need to verify this with invalid country/state as well. - Save enables only when the form is dirty after editing address or tax ID fields. - Cancel restores both address and tax ID to the original values. - Submitting with missing required address fields shows a validation toast. - Tax ID options are filtered by the selected billing country. - Tax-ID-only edits submit successfully without interacting with the address form. - Without billing write permission, address fields are read-only. - Update billing address modal behaves the same as the org billing page. - Address element appearance looks correct in both light and dark mode. - Payment method form remains unchanged and still uses floating labels. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Billing form now uses Stripe Address Element via Stripe Elements with an embedded custom font and theme-aware appearance; tax-ID entry remains separate. * **Bug Fixes** * Stronger address validation and submit gating, improved dirty-state tracking, explicit save confirmation and reset behavior, and clearer error toasts on update failures. * **Tests** * Expanded tests covering hook behavior, address element validation, submit gating, payloads, reset, and permission scenarios. * **Style** * Adjusted billing email form spacing/layout. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
export default ComponentA