mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Kevin Grüneberg
740eeb8504
- 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
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
|
|
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
|
|
import { Button, Modal } from 'ui'
|
|
|
|
export interface MembersExceedLimitModalProps {
|
|
visible: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const MembersExceedLimitModal = ({ visible, onClose }: MembersExceedLimitModalProps) => {
|
|
const { data: selectedOrganization } = useSelectedOrganizationQuery()
|
|
const slug = selectedOrganization?.slug
|
|
const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery(
|
|
{ slug },
|
|
{ enabled: visible }
|
|
)
|
|
|
|
return (
|
|
<Modal
|
|
hideFooter
|
|
visible={visible}
|
|
size="medium"
|
|
header="Your organization has members who have exceeded their free project limits"
|
|
onCancel={onClose}
|
|
>
|
|
<Modal.Content>
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-foreground-light">
|
|
The following members have reached their maximum limits for the number of active free
|
|
plan projects within organizations where they are an administrator or owner:
|
|
</p>
|
|
<ul className="pl-5 text-sm list-disc text-foreground-light">
|
|
{(membersExceededLimit || []).map((member, idx: number) => (
|
|
<li key={`member-${idx}`}>
|
|
{member.username || member.primary_email} (Limit: {member.free_project_limit} free
|
|
projects)
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<p className="text-sm text-foreground-light">
|
|
These members will need to either delete, pause, or upgrade one or more of these
|
|
projects before you're able to downgrade this project.
|
|
</p>
|
|
</div>
|
|
</Modal.Content>
|
|
<Modal.Separator />
|
|
<Modal.Content className="flex items-center gap-2">
|
|
<Button htmlType="button" type="default" onClick={onClose} block>
|
|
Understood
|
|
</Button>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default MembersExceedLimitModal
|