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.

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>

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,

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')

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.'}