handle upgrade flow

Author: suejung-sentry

src/pages/PlanPage/PlanPage.jsx

@@ -8,16 +8,21 @@ import config from 'config'
 
 import { SentryRoute } from 'sentry'
 
+import { useAccountDetails } from 'services/account'
 import { Theme, useThemeContext } from 'shared/ThemeContext'
+import A from 'ui/A'
+import { Alert } from 'ui/Alert'
 import LoadingLogo from 'ui/LoadingLogo'
 
 import { PlanProvider } from './context'
 import PlanBreadcrumb from './PlanBreadcrumb'
 import { PlanPageDataQueryOpts } from './queries/PlanPageDataQueryOpts'
 import Tabs from './Tabs'
 
+
 import { StripeAppearance } from '../../stripe'
 
+
 const CancelPlanPage = lazy(() => import('./subRoutes/CancelPlanPage'))
 const CurrentOrgPlan = lazy(() => import('./subRoutes/CurrentOrgPlan'))
 const InvoicesPage = lazy(() => import('./subRoutes/InvoicesPage'))
@@ -40,13 +45,27 @@ function PlanPage() {
   const { data: ownerData } = useSuspenseQueryV5(
     PlanPageDataQueryOpts({ owner, provider })
   )
+  const { data: accountDetails } = useAccountDetails({
+    provider,
+    owner,
+  })
+
   const { theme } = useThemeContext()
   const isDarkMode = theme !== Theme.LIGHT
 
   if (config.IS_SELF_HOSTED || !ownerData?.isCurrentUserPartOfOrg) {
     return <Redirect to={`/${provider}/${owner}`} />
   }
 
+  const isAwaitingVerification =
+    accountDetails?.unverifiedPaymentMethods?.length
+  // const isAwaitingFirstPaymentMethodVerification =
+  //   !accountDetails?.subscriptionDetail?.defaultPaymentMethod &&
+  //   isAwaitingVerification
+
+  // const hasSuccessfulDefaultPaymentMethod =
+  //   accountDetails?.subscriptionDetail?.defaultPaymentMethod
+
   return (
     <div className="flex flex-col gap-4">
       <Tabs />
@@ -61,6 +80,14 @@ function PlanPage() {
       >
         <PlanProvider>
           <PlanBreadcrumb />
+          {isAwaitingVerification ? (
+            <UnverifiedPaymentMethodAlert
+              url={
+                accountDetails?.unverifiedPaymentMethods?.[0]
+                  ?.hostedVerificationLink
+              }
+            />
+          ) : null}
           <Suspense fallback={<Loader />}>
             <Switch>
               <SentryRoute path={path} exact>
@@ -91,3 +118,27 @@ function PlanPage() {
 }
 
 export default PlanPage
+
+// eslint-disable-next-line react/prop-types
+const UnverifiedPaymentMethodAlert = ({ url }) => {
+  return (
+    <>
+      <Alert variant={'warning'}>
+        <Alert.Title>New Payment Method Awaiting Verification</Alert.Title>
+        <Alert.Description>
+          Your new payment method requires verification.{' '}
+          <A
+            href={url}
+            isExternal={true}
+            hook="stripe-payment-method-verification"
+            to={undefined}
+          >
+            Click here
+          </A>{' '}
+          to complete the verification process.
+        </Alert.Description>
+      </Alert>
+      <br />
+    </>
+  )
+}

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.tsx

@@ -40,9 +40,11 @@ function CurrentOrgPlan() {
     })
   )
 
-  const isAwaitingFirstPaymentMethodVerification = false
   const isAwaitingVerification =
     accountDetails?.unverifiedPaymentMethods?.length
+  const isAwaitingFirstPaymentMethodVerification =
+    !accountDetails?.subscriptionDetail?.defaultPaymentMethod &&
+    isAwaitingVerification
 
   const scheduledPhase = accountDetails?.scheduleDetail?.scheduledPhase
   // customer is delinquent until their first payment method is verified
@@ -71,14 +73,6 @@ function CurrentOrgPlan() {
 
   return (
     <div className="w-full lg:w-4/5">
-      {isAwaitingVerification ? (
-        <UnverifiedPaymentMethodAlert
-          url={
-            accountDetails?.unverifiedPaymentMethods?.[0]
-              ?.hostedVerificationLink
-          }
-        />
-      ) : null}
       {planUpdatedNotification.isCancellation ? (
         <InfoAlertCancellation
           subscriptionDetail={accountDetails?.subscriptionDetail}
@@ -178,27 +172,4 @@ const DelinquentAlert = () => {
   )
 }
 
-const UnverifiedPaymentMethodAlert = ({ url }: { url: string | undefined }) => {
-  return (
-    <>
-      <Alert variant={'warning'}>
-        <Alert.Title>New Payment Method Awaiting Verification</Alert.Title>
-        <Alert.Description>
-          Your new payment method requires verification. Click{' '}
-          <A
-            href={url}
-            isExternal={true}
-            hook="stripe-payment-method-verification"
-            to={undefined}
-          >
-            here
-          </A>{' '}
-          to complete the verification process.
-        </Alert.Description>
-      </Alert>
-      <br />
-    </>
-  )
-}
-
 export default CurrentOrgPlan

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/UpgradeForm.tsx

@@ -93,7 +93,19 @@ function UpgradeForm({ selectedPlan, setSelectedPlan }: UpgradeFormProps) {
   return (
     <form
       className="flex flex-col gap-6 border p-4 text-ds-gray-default md:w-2/3"
-      onSubmit={handleSubmit(upgradePlan)}
+      onSubmit={handleSubmit((data) => {
+        if (accountDetails?.unverifiedPaymentMethods?.length) {
+          if (
+            window.confirm(
+              'You have a payment method awaiting verification. Are you sure you want to proceed with upgrading your plan? This will cancel the existing action.'
+            )
+          ) {
+            upgradePlan(data)
+          }
+        } else {
+          upgradePlan(data)
+        }
+      })}
     >
       <div className="flex flex-col gap-1">
         <h3 className="font-semibold">Organization</h3>