From 62e2bcf2cae794fac593ebfab8a08406fcd3b7df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Thu, 28 Nov 2024 15:09:23 +0800
Subject: [PATCH] chore: automatically mark default payment method [GEN-12003]
 (#30707)

When customers go through the upgrade flow via the plan upgrade modal, we want to automatically confirm any newly added payment method as default payment method. We've seen some issues on Orb that customers would upgrade without a default payment method. This change should help mitigate it further.
---
 .../Billing/Payment/AddNewPaymentMethodModal.tsx          | 3 +++
 .../interfaces/Billing/Payment/AddPaymentMethodForm.tsx   | 8 +++++++-
 .../Subscription/PaymentMethodSelection.tsx               | 1 +
 .../BillingSettings/Subscription/Subscription.tsx         | 4 ++--
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx b/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx
index 8d4f50aa036..7c75bfae4e7 100644
--- a/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx
@@ -18,6 +18,7 @@ interface AddNewPaymentMethodModalProps {
   onCancel: () => void
   onConfirm: () => void
   showSetDefaultCheckbox?: boolean
+  autoMarkAsDefaultPaymentMethod?: boolean
 }
 
 const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)
@@ -28,6 +29,7 @@ const AddNewPaymentMethodModal = ({
   onCancel,
   onConfirm,
   showSetDefaultCheckbox,
+  autoMarkAsDefaultPaymentMethod,
 }: AddNewPaymentMethodModalProps) => {
   const { resolvedTheme } = useTheme()
   const [intent, setIntent] = useState<any>()
@@ -140,6 +142,7 @@ const AddNewPaymentMethodModal = ({
             onCancel={onLocalCancel}
             onConfirm={onLocalConfirm}
             showSetDefaultCheckbox={showSetDefaultCheckbox}
+            autoMarkAsDefaultPaymentMethod={autoMarkAsDefaultPaymentMethod}
           />
         </Elements>
       </Modal>
diff --git a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx
index 770d8ebbc10..cc4f888b760 100644
--- a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx
@@ -12,6 +12,7 @@ interface AddPaymentMethodFormProps {
   onCancel: () => void
   onConfirm: () => void
   showSetDefaultCheckbox?: boolean
+  autoMarkAsDefaultPaymentMethod?: boolean
 }
 
 // Stripe docs recommend to use the new SetupIntent flow over
@@ -23,6 +24,7 @@ const AddPaymentMethodForm = ({
   onCancel,
   onConfirm,
   showSetDefaultCheckbox = false,
+  autoMarkAsDefaultPaymentMethod = false,
 }: AddPaymentMethodFormProps) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -59,7 +61,11 @@ const AddPaymentMethodForm = ({
       setIsSaving(false)
       toast.error(error?.message ?? ' Failed to save card details')
     } else {
-      if (isDefault && selectedOrganization && typeof setupIntent?.payment_method === 'string') {
+      if (
+        (isDefault || autoMarkAsDefaultPaymentMethod) &&
+        selectedOrganization &&
+        typeof setupIntent?.payment_method === 'string'
+      ) {
         try {
           await markAsDefault({
             slug: selectedOrganization.slug,
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx
index 710c98f8523..f5ba6e1ec06 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx
@@ -150,6 +150,7 @@ const PaymentMethodSelection = ({
         visible={showAddNewPaymentMethodModal}
         returnUrl={`${getURL()}/org/${selectedOrganization?.slug}/billing?panel=subscriptionPlan`}
         onCancel={() => setShowAddNewPaymentMethodModal(false)}
+        autoMarkAsDefaultPaymentMethod={true}
         onConfirm={async () => {
           setShowAddNewPaymentMethodModal(false)
           toast.success('Successfully added new payment method')
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
index 57d3b730ba1..8c779f5579f 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
@@ -147,9 +147,9 @@ const Subscription = () => {
                       title="This organization is limited by the included usage"
                     >
                       <div className="[&>p]:!leading-normal prose text-sm">
-                        Projects may become unresponsive when this organization exceeds its
+                        Projects may become unresponsive when this organization exceeds its{' '}
                         <Link href={`/org/${slug}/usage`}>included usage quota</Link>. To scale
-                        seamlessly and pay for over-usage, $
+                        seamlessly and pay for over-usage,{' '}
                         {currentPlan?.id === 'free'
                           ? 'upgrade to a paid plan.'
                           : 'you can disable Spend Cap under the Cost Control settings.'}