chore: consolidate payment method components / ownership (#38578)

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.

.github/CODEOWNERS

@@ -15,6 +15,5 @@
 
 /apps/studio/csp.js                                                 @supabase/security
 /apps/studio/components/interfaces/Billing/Payment                  @supabase/security
-/apps/studio/components/interfaces/Organization/BillingSettings/    @supabase/security
 /apps/studio/components/interfaces/Organization/Documents/          @supabase/security
 /apps/studio/pages/new/index.tsx                                    @supabase/security

apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx

@@ -2,7 +2,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import {
   NewPaymentMethodElement,
   type PaymentMethodElementRef,
-} from 'components/interfaces/Organization/BillingSettings/PaymentMethods/NewPaymentMethodElement'
+} from 'components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement'
 import { organizationKeys } from 'data/organizations/keys'
 import { useOrganizationCustomerProfileQuery } from 'data/organizations/organization-customer-profile-query'
 import { useOrganizationCustomerProfileUpdateMutation } from 'data/organizations/organization-customer-profile-update-mutation'

apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx

@@ -31,7 +31,10 @@ import {
   PopoverContent_Shadcn_ as PopoverContent,
   PopoverTrigger_Shadcn_ as PopoverTrigger,
 } from 'ui'
-import { TAX_IDS, type TaxId } from '../BillingCustomerData/TaxID.constants'
+import {
+  TAX_IDS,
+  type TaxId,
+} from '../../../Organization/BillingSettings/BillingCustomerData/TaxID.constants'
 import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { Form } from '@ui/components/shadcn/ui/form'

apps/studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx

@@ -14,7 +14,7 @@ import { BillingCustomerData } from './BillingCustomerData/BillingCustomerData'
 import BillingEmail from './BillingEmail'
 import CostControl from './CostControl/CostControl'
 import CreditBalance from './CreditBalance'
-import PaymentMethods from './PaymentMethods/PaymentMethods'
+import PaymentMethods from '../../Billing/Payment/PaymentMethods/PaymentMethods'
 import Subscription from './Subscription/Subscription'
 
 export const BillingSettings = () => {

apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx

@@ -39,7 +39,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import PaymentMethodSelection from './Subscription/PaymentMethodSelection'
 import { PaymentConfirmation } from 'components/interfaces/Billing/Payment/PaymentConfirmation'
 import { getStripeElementsAppearanceOptions } from 'components/interfaces/Billing/Payment/Payment.utils'
-import type { PaymentMethodElementRef } from './PaymentMethods/NewPaymentMethodElement'
+import type { PaymentMethodElementRef } from '../../Billing/Payment/PaymentMethods/NewPaymentMethodElement'
 
 const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)
 

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx

@@ -28,7 +28,7 @@ import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 import {
   NewPaymentMethodElement,
   type PaymentMethodElementRef,
-} from '../PaymentMethods/NewPaymentMethodElement'
+} from '../../../Billing/Payment/PaymentMethods/NewPaymentMethodElement'
 
 const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)
 

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx

@@ -26,7 +26,7 @@ import { plans as subscriptionsPlans } from 'shared-data/plans'
 import { Button, Dialog, DialogContent, Table, TableBody, TableCell, TableRow } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
-import type { PaymentMethodElementRef } from '../PaymentMethods/NewPaymentMethodElement'
+import type { PaymentMethodElementRef } from '../../../Billing/Payment/PaymentMethods/NewPaymentMethodElement'
 import PaymentMethodSelection from './PaymentMethodSelection'
 
 const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)

apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx

@@ -43,7 +43,7 @@ import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import {
   NewPaymentMethodElement,
   type PaymentMethodElementRef,
-} from '../BillingSettings/PaymentMethods/NewPaymentMethodElement'
+} from '../../Billing/Payment/PaymentMethods/NewPaymentMethodElement'
 
 const ORG_KIND_TYPES = {
   PERSONAL: 'Personal',