From 330e698696ca4da24d354b696705c4cc4b021aae Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 23 Mar 2022 17:26:53 +0800
Subject: [PATCH] Remove stripe web portal usage in new project page

---
 .../Billing/Subscription/Subscription.tsx     |  2 +-
 studio/pages/new/[slug].tsx                   | 56 +++++++------------
 .../[ref]/settings/billing/update/pro.tsx     |  2 +-
 3 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/studio/components/interfaces/Billing/Subscription/Subscription.tsx b/studio/components/interfaces/Billing/Subscription/Subscription.tsx
index 7478c9335f4..ac978f61063 100644
--- a/studio/components/interfaces/Billing/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/Billing/Subscription/Subscription.tsx
@@ -7,7 +7,7 @@ import { Dictionary } from '@supabase/grid'
 
 import { formatBytes } from 'lib/helpers'
 import { STRIPE_PRODUCT_IDS } from 'lib/constants'
-import { SubscriptionStats, useStore, useFlag, useSubscriptionStats } from 'hooks'
+import { useStore, useFlag, useSubscriptionStats } from 'hooks'
 import CostBreakdownRow from './CostBreakdownRow'
 import { StripeSubscription } from './Subscription.types'
 import { deriveFeatureCost, deriveProductCost } from '../PAYGUsage/PAYGUsage.utils'
diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index 97f2d8fdec0..6b012084196 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -9,9 +9,10 @@ import { toJS } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { Button, Listbox, IconUsers, IconAlertCircle, Input, IconLoader } from '@supabase/ui'
 
-import { API_URL } from 'lib/constants'
+import { getURL, passwordStrength } from 'lib/helpers'
 import { post } from 'lib/common/fetch'
 import {
+  API_URL,
   PROVIDERS,
   REGIONS,
   REGIONS_DEFAULT,
@@ -20,16 +21,13 @@ import {
   PRICING_PLANS_DEFAULT,
   DEFAULT_FREE_PROJECTS_LIMIT,
 } from 'lib/constants'
+import { useStore, withAuth, useSubscriptionStats } from 'hooks'
 
-import { useStore, withAuth } from 'hooks'
 import { WizardLayout } from 'components/layouts'
-import { getURL } from 'lib/helpers'
-
 import Panel from 'components/to-be-cleaned/Panel'
 import InformationBox from 'components/ui/InformationBox'
-import { passwordStrength } from 'lib/helpers'
 import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
-import { useSubscriptionStats } from 'hooks'
+import { AddNewPaymentMethodModal } from 'components/interfaces/Billing'
 
 interface StripeCustomer {
   paymentMethods: any
@@ -121,6 +119,13 @@ export const Wizard = observer(() => {
     router.push(`/new/${organizations[0].slug}`)
   }
 
+  useEffect(() => {
+    // User added a new payment method
+    if (router.query.setup_intent && router.query.redirect_status) {
+      ui.setNotification({ category: 'success', message: 'Successfully added new payment method' })
+    }
+  }, [])
+
   useEffect(() => {
     async function loadStripeAccountAsync(id: string) {
       const res = await fetchStripeAccount(id)
@@ -407,39 +412,11 @@ const FreeProjectLimitWarning = ({ limit }: { limit: number }) => {
 
 const EmptyPaymentMethodWarning = observer(
   ({ stripeCustomerId }: { stripeCustomerId: string | undefined }) => {
-    const router = useRouter()
     const { ui } = useStore()
+    const slug = ui.selectedOrganization?.slug
 
-    const [loading, setLoading] = useState<boolean>(false)
+    const [showAddPaymentMethodModal, setShowAddPaymentMethodModal] = useState<boolean>(false)
 
-    /**
-     * Get a link and then redirect them
-     * path is used to determine what path inside billing portal to redirect to
-     */
-    async function redirectToPortal(path?: any) {
-      if (stripeCustomerId) {
-        setLoading(true)
-        const response = await post(`${API_URL}/stripe/checkout`, {
-          stripe_customer_id: stripeCustomerId,
-          returnTo: `${getURL()}${router.asPath}`,
-        })
-        if (response.error) {
-          ui.setNotification({
-            category: 'error',
-            message: `Failed to redirect: ${response.error.message}`,
-          })
-          setLoading(false)
-        } else {
-          const { setupCheckoutPortal } = response
-          window.location.replace(`${setupCheckoutPortal}${path ? path : ''}`)
-        }
-      } else {
-        ui.setNotification({
-          category: 'error',
-          message: `Invalid customer ID`,
-        })
-      }
-    }
     return (
       <div className="mt-4">
         <InformationBox
@@ -453,12 +430,17 @@ const EmptyPaymentMethodWarning = observer(
                 You need to add a payment method for your organization before creating a paid
                 project.
               </p>
-              <Button loading={loading} type="secondary" onClick={() => redirectToPortal()}>
+              <Button type="secondary" onClick={() => setShowAddPaymentMethodModal(true)}>
                 Add a payment method
               </Button>
             </div>
           }
         />
+        <AddNewPaymentMethodModal
+          visible={showAddPaymentMethodModal}
+          returnUrl={`${getURL()}/new/${slug}`}
+          onCancel={() => setShowAddPaymentMethodModal(false)}
+        />
       </div>
     )
   }
diff --git a/studio/pages/project/[ref]/settings/billing/update/pro.tsx b/studio/pages/project/[ref]/settings/billing/update/pro.tsx
index 01f11969b52..9ff03dafda0 100644
--- a/studio/pages/project/[ref]/settings/billing/update/pro.tsx
+++ b/studio/pages/project/[ref]/settings/billing/update/pro.tsx
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 
 import { withAuth, useStore } from 'hooks'
-import { get, post } from 'lib/common/fetch'
+import { get } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 
 import { BillingLayout } from 'components/layouts'