From dfb152ab8c7d2f5b0b53a4e7e531a058145259fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= Date: Wed, 10 Sep 2025 13:54:36 +0800 Subject: [PATCH] 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 | 1 - .../interfaces/Billing/Payment/AddPaymentMethodForm.tsx | 2 +- .../Payment}/PaymentMethods/ChangePaymentMethodModal.tsx | 0 .../Payment}/PaymentMethods/CreditCard.tsx | 0 .../Payment}/PaymentMethods/CurrentPaymentMethod.tsx | 0 .../Payment}/PaymentMethods/DeletePaymentMethodModal.tsx | 0 .../Payment}/PaymentMethods/NewPaymentMethodElement.tsx | 5 ++++- .../Payment}/PaymentMethods/PaymentMethods.tsx | 0 .../Organization/BillingSettings/BillingSettings.tsx | 2 +- .../interfaces/Organization/BillingSettings/CreditTopUp.tsx | 2 +- .../BillingSettings/Subscription/PaymentMethodSelection.tsx | 2 +- .../Subscription/SubscriptionPlanUpdateDialog.tsx | 2 +- .../components/interfaces/Organization/NewOrg/NewOrgForm.tsx | 2 +- 13 files changed, 10 insertions(+), 8 deletions(-) rename apps/studio/components/interfaces/{Organization/BillingSettings => Billing/Payment}/PaymentMethods/ChangePaymentMethodModal.tsx (100%) rename apps/studio/components/interfaces/{Organization/BillingSettings => Billing/Payment}/PaymentMethods/CreditCard.tsx (100%) rename apps/studio/components/interfaces/{Organization/BillingSettings => Billing/Payment}/PaymentMethods/CurrentPaymentMethod.tsx (100%) rename apps/studio/components/interfaces/{Organization/BillingSettings => Billing/Payment}/PaymentMethods/DeletePaymentMethodModal.tsx (100%) rename apps/studio/components/interfaces/{Organization/BillingSettings => Billing/Payment}/PaymentMethods/NewPaymentMethodElement.tsx (99%) rename apps/studio/components/interfaces/{Organization/BillingSettings => Billing/Payment}/PaymentMethods/PaymentMethods.tsx (100%) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 414afee868f..1d8b37fb1e6 100644 --- a/.github/CODEOWNERS +++ b/.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 diff --git a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx index 9e7a6dec940..55ac23228a4 100644 --- a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx +++ b/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' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/ChangePaymentMethodModal.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/ChangePaymentMethodModal.tsx similarity index 100% rename from apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/ChangePaymentMethodModal.tsx rename to apps/studio/components/interfaces/Billing/Payment/PaymentMethods/ChangePaymentMethodModal.tsx diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/CreditCard.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx similarity index 100% rename from apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/CreditCard.tsx rename to apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/CurrentPaymentMethod.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx similarity index 100% rename from apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/CurrentPaymentMethod.tsx rename to apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/DeletePaymentMethodModal.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/DeletePaymentMethodModal.tsx similarity index 100% rename from apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/DeletePaymentMethodModal.tsx rename to apps/studio/components/interfaces/Billing/Payment/PaymentMethods/DeletePaymentMethodModal.tsx diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/NewPaymentMethodElement.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx similarity index 99% rename from apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/NewPaymentMethodElement.tsx rename to apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx index 11a41994047..62a0fb75d62 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/NewPaymentMethodElement.tsx +++ b/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' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/PaymentMethods.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx similarity index 100% rename from apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/PaymentMethods.tsx rename to apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx index b705417e487..884b39bee9e 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx +++ b/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 = () => { diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx index 0638818ac92..233e7f97047 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx +++ b/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) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx index 8f60d2a372f..efc02871bd7 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx +++ b/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) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx index 46a5c8d0223..279e1240dcf 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx +++ b/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) diff --git a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx index d45d3c039d0..bd6f53ceb29 100644 --- a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx +++ b/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',