fix: Handle ach case

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

@@ -75,7 +75,9 @@ function CurrentOrgPlan() {
         />
       ) : null}
       <InfoMessageStripeCallback
-        hasUnverifiedPaymentMethods={hasUnverifiedPaymentMethods}
+        awaitingInitialPaymentMethodVerification={
+          awaitingInitialPaymentMethodVerification
+        }
       />
       {isDelinquent ? <DelinquentAlert /> : null}
       {data?.plan ? (

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

@@ -13,7 +13,9 @@ const wrapper =
 describe('InfoMessageStripeCallback', () => {
   describe('when rendering without success or cancel in the url', () => {
     const { container } = render(
-      <InfoMessageStripeCallback hasUnverifiedPaymentMethods={false} />,
+      <InfoMessageStripeCallback
+        awaitingInitialPaymentMethodVerification={false}
+      />,
       {
         wrapper: wrapper('/account/gh/codecov'),
       }
@@ -27,7 +29,9 @@ describe('InfoMessageStripeCallback', () => {
   describe('when rendering with success in the url', () => {
     it('renders a success message', async () => {
       render(
-        <InfoMessageStripeCallback hasUnverifiedPaymentMethods={false} />,
+        <InfoMessageStripeCallback
+          awaitingInitialPaymentMethodVerification={false}
+        />,
         {
           wrapper: wrapper('/account/gh/codecov?success'),
         }
@@ -39,10 +43,12 @@ describe('InfoMessageStripeCallback', () => {
     })
   })
 
-  describe('when hasUnverifiedPaymentMethods is true', () => {
+  describe('when awaitingInitialPaymentMethodVerification is true', () => {
     it('does not enders a success message even at ?success', async () => {
       const { container } = render(
-        <InfoMessageStripeCallback hasUnverifiedPaymentMethods={true} />,
+        <InfoMessageStripeCallback
+          awaitingInitialPaymentMethodVerification={true}
+        />,
         {
           wrapper: wrapper('/account/gh/codecov?success'),
         }

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

@@ -6,15 +6,15 @@ import Message from 'old_ui/Message'
 // Stripe redirects to this page with ?success or ?cancel in the URL
 // this component takes care of rendering a message if it is successful
 function InfoMessageStripeCallback({
-  hasUnverifiedPaymentMethods,
+  awaitingInitialPaymentMethodVerification,
 }: {
-  hasUnverifiedPaymentMethods: boolean
+  awaitingInitialPaymentMethodVerification: boolean
 }) {
   const urlParams = qs.parse(useLocation().search, {
     ignoreQueryPrefix: true,
   })
 
-  if ('success' in urlParams && !hasUnverifiedPaymentMethods)
+  if ('success' in urlParams && !awaitingInitialPaymentMethodVerification)
     return (
       <div className="col-start-1 col-end-13 mb-4">
         <Message variant="success">

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

@@ -297,7 +297,8 @@ type SetupArgs = {
   hasSentryPlans?: boolean
   monthlyPlan?: boolean
   planUserCount?: number
-  hasUnverifiedPaymentMethod?: boolean
+  hasUnverifiedPaymentMethods?: boolean
+  subscriptionHasDefaultPaymentMethod?: boolean
 }
 
 describe('UpgradeForm', () => {
@@ -310,7 +311,8 @@ describe('UpgradeForm', () => {
     hasSentryPlans = false,
     monthlyPlan = true,
     planUserCount = 1,
-    hasUnverifiedPaymentMethod = false,
+    hasUnverifiedPaymentMethods = false,
+    subscriptionHasDefaultPaymentMethod = true,
   }: SetupArgs) {
     const addNotification = vi.fn()
     const user = userEvent.setup()
@@ -319,6 +321,16 @@ describe('UpgradeForm', () => {
 
     server.use(
       http.get(`/internal/:provider/:owner/account-details/`, () => {
+        if (!subscriptionHasDefaultPaymentMethod) {
+          return HttpResponse.json({
+            ...mockAccountDetailsBasic,
+            subscriptionDetail: {
+              ...mockAccountDetailsBasic.subscriptionDetail,
+              defaultPaymentMethod: null,
+            },
+          })
+        }
+
         if (planValue === Plans.USERS_BASIC) {
           return HttpResponse.json(mockAccountDetailsBasic)
         } else if (planValue === Plans.USERS_PR_INAPPM) {
@@ -408,7 +420,7 @@ describe('UpgradeForm', () => {
           data: {
             owner: {
               billing: {
-                unverifiedPaymentMethods: hasUnverifiedPaymentMethod
+                unverifiedPaymentMethods: hasUnverifiedPaymentMethods
                   ? [
                       {
                         paymentMethodId: 'asdf',
@@ -436,7 +448,8 @@ describe('UpgradeForm', () => {
       it('shows modal when form is submitted', async () => {
         const { user } = setup({
           planValue: Plans.USERS_BASIC,
-          hasUnverifiedPaymentMethod: true,
+          hasUnverifiedPaymentMethods: true,
+          subscriptionHasDefaultPaymentMethod: false,
         })
         render(<UpgradeForm {...props} />, { wrapper: wrapper() })
 
@@ -457,7 +470,7 @@ describe('UpgradeForm', () => {
       it('does not show modal when no unverified payment methods', async () => {
         const { user } = setup({
           planValue: Plans.USERS_BASIC,
-          hasUnverifiedPaymentMethod: false,
+          hasUnverifiedPaymentMethods: false,
         })
         render(<UpgradeForm {...props} />, { wrapper: wrapper() })
 

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

@@ -94,13 +94,17 @@ function UpgradeForm({ selectedPlan, setSelectedPlan }: UpgradeFormProps) {
   const newPlan = watch('newPlan')
   const seats = watch('seats')
 
+  const awaitingInitialPaymentMethodVerification =
+    !!unverifiedPaymentMethods?.length &&
+    !accountDetails?.subscriptionDetail?.defaultPaymentMethod
+
   useEffect(() => {
     // This is necessary because the validity of seats depends on the value of newPlan
     trigger('seats')
   }, [newPlan, trigger])
 
   const onSubmit = handleSubmit((data) => {
-    if (unverifiedPaymentMethods?.length) {
+    if (awaitingInitialPaymentMethodVerification) {
       setFormData(data)
       setShowModal(true)
     } else {