From 35ed89fa87ca5873d823a50d428ea9674ef8f261 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 22 Mar 2022 14:04:47 +0800
Subject: [PATCH] Allow users to add payment method in project billing if no
 avail payment methods

---
 .../AddNewPaymentMethodModal/index.tsx        |  5 +----
 .../Billing/PaymentSummaryPanel/index.tsx     | 11 +++++++---
 .../ProUpgrade/{ProUpgrade.tsx => index.tsx}  |  2 --
 studio/components/interfaces/Billing/index.ts |  2 +-
 .../[ref]/settings/billing/update/pro.tsx     | 20 +++++++++----------
 5 files changed, 19 insertions(+), 21 deletions(-)
 rename studio/components/interfaces/Billing/ProUpgrade/{ProUpgrade.tsx => index.tsx} (99%)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/index.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/index.tsx
index be9c46dc57e..2341607f003 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/index.tsx
+++ b/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)
   }
 
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/index.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/index.tsx
index ab517c8aadc..de23d8e25a6 100644
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/index.tsx
+++ b/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}>
diff --git a/studio/components/interfaces/Billing/ProUpgrade/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade/index.tsx
similarity index 99%
rename from studio/components/interfaces/Billing/ProUpgrade/ProUpgrade.tsx
rename to studio/components/interfaces/Billing/ProUpgrade/index.tsx
index d350b853dd0..4c78d74a0be 100644
--- a/studio/components/interfaces/Billing/ProUpgrade/ProUpgrade.tsx
+++ b/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
diff --git a/studio/components/interfaces/Billing/index.ts b/studio/components/interfaces/Billing/index.ts
index 6b24fcfe902..d942ea1fe77 100644
--- a/studio/components/interfaces/Billing/index.ts
+++ b/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'
diff --git a/studio/pages/project/[ref]/settings/billing/update/pro.tsx b/studio/pages/project/[ref]/settings/billing/update/pro.tsx
index 72035f72b3d..1c8b6307ecf 100644
--- a/studio/pages/project/[ref]/settings/billing/update/pro.tsx
+++ b/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>