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 414afee868..1d8b37fb1e 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 9e7a6dec94..55ac23228a 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 11a4199404..62a0fb75d6 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 b705417e48..884b39bee9 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 0638818ac9..233e7f9704 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 8f60d2a372..efc02871bd 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 46a5c8d022..279e1240dc 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 d45d3c039d..bd6f53ceb2 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',