Allow users to add payment method in project billing if no avail payment methods

studio/components/interfaces/Billing/AddNewPaymentMethodModal/index.tsx

@@ -28,10 +28,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, onCancel }) => {
   const setupIntent = async () => {
     setIntent(undefined)
     const orgSlug = ui.selectedOrganization?.slug ?? ''
-    const customerId = ui.selectedOrganization?.stripe_customer_id ?? ''
-    const intent = await post(`${API_URL}/organizations/${orgSlug}/payment/setup-intent`, {
-      customer_id: customerId,
-    })
+    const intent = await post(`${API_URL}/organizations/${orgSlug}/payments/setup-intent`, {})
     setIntent(intent)
   }
 

studio/components/interfaces/Billing/PaymentSummaryPanel/index.tsx

@@ -141,9 +141,14 @@ const PaymentSummaryPanel: FC<Props> = ({
             <p className="text-sm text-scale-1100">Retrieving payment methods</p>
           </div>
         ) : paymentMethods.length === 0 ? (
-          // [TODO] We need some UI to allow users to add payment methods here
-          <div className="flex items-center rounded-md space-x-4 px-4 py-2 bg-scale-400 border border-scale-700">
-            <div className="text-scale-1100">No methods</div>
+          <div className="flex items-center justify-between rounded-md px-4 py-2 bg-scale-400 border border-scale-700">
+            <div className="flex items-center space-x-4">
+              <IconAlertCircle size={16} />
+              <p className="text-scale-1100 text-sm">No saved payment methods</p>
+            </div>
+            <Button type="default" icon={<IconPlus />} onClick={onSelectAddNewPaymentMethod}>
+              Add new
+            </Button>
           </div>
         ) : (
           <Listbox value={selectedPaymentMethod?.id} onChange={onSelectPaymentMethod}>

studio/components/interfaces/Billing/ProUpgrade/index.tsx

@@ -1,6 +1,5 @@
 import { FC, useEffect, useState } from 'react'
 import { Transition } from '@headlessui/react'
-import { useRouter } from 'next/router'
 import { Badge, Button, IconArrowLeft, IconHelpCircle, Toggle, Modal } from '@supabase/ui'
 
 import { useStore } from 'hooks'
@@ -34,7 +33,6 @@ const ProUpgrade: FC<Props> = ({
   onSelectBack,
 }) => {
   const { ui } = useStore()
-  const router = useRouter()
 
   const { addons } = products
   const projectRef = ui.selectedProject?.ref

studio/components/interfaces/Billing/index.ts

@@ -2,7 +2,7 @@ import PAYGUsage from './PAYGUsage/PAYGUsage'
 import Subscription from './Subscription/Subscription'
 
 import PlanSelection from './PlanSelection'
-import ProUpgrade from './ProUpgrade/ProUpgrade'
+import ProUpgrade from './ProUpgrade'
 import EnterpriseRequest from './EnterpriseRequest'
 import ExitSurvey from './ExitSurvey/ExitSurvey'
 import PaymentSummaryPanel from './PaymentSummaryPanel'

studio/pages/project/[ref]/settings/billing/update/pro.tsx

@@ -36,13 +36,10 @@ const BillingUpdatePro: NextPage = () => {
     if (projectRef) {
       getStripeProducts()
       getSubscription()
+      getPaymentMethods()
     }
   }, [projectRef])
 
-  useEffect(() => {
-    if (stripeCustomerId) getStripeAccount()
-  }, [stripeCustomerId])
-
   const getStripeProducts = async () => {
     try {
       setIsLoadingProducts(true)
@@ -58,20 +55,21 @@ const BillingUpdatePro: NextPage = () => {
     }
   }
 
-  const getStripeAccount = async () => {
+  const getPaymentMethods = async () => {
+    const orgSlug = ui.selectedOrganization?.slug ?? ''
     try {
       setIsLoadingPaymentMethods(true)
-      const { paymentMethods, error: customerError } = await post(`${API_URL}/stripe/customer`, {
-        stripe_customer_id: stripeCustomerId,
-      })
-      if (customerError) throw customerError
+      const { data: paymentMethods, error } = await get(
+        `${API_URL}/organizations/${orgSlug}/payments`
+      )
+      if (error) throw error
       setIsLoadingPaymentMethods(false)
       setPaymentMethods(paymentMethods)
     } catch (error: any) {
       ui.setNotification({
         error,
         category: 'error',
-        message: `Failed to get subscription: ${error.message}`,
+        message: `Failed to get available payment methods: ${error.message}`,
       })
     }
   }
@@ -106,7 +104,7 @@ const BillingUpdatePro: NextPage = () => {
         products={products}
         currentSubscription={subscription}
         isLoadingPaymentMethods={isLoadingPaymentMethods}
-        paymentMethods={paymentMethods?.data ?? []}
+        paymentMethods={paymentMethods || []}
         onSelectBack={() => router.push(`/project/${projectRef}/settings/billing/update`)}
       />
     </BillingLayout>