fix: Allow switching organisations if current one is blocked (#4606)

frontend/web/components/App.js

@@ -299,7 +299,8 @@ const App = class extends Component {
     }
     if (
       AccountStore.getOrganisation() &&
-      AccountStore.getOrganisation().block_access_to_admin
+      AccountStore.getOrganisation().block_access_to_admin &&
+      pathname !== '/organisations'
     ) {
       return <Blocked />
     }

frontend/web/components/Blocked.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Payment from './modals/Payment'
+import BlockedOrgInfo from './BlockedOrgInfo'
 
 const Blocked = class extends React.Component {
   static contextTypes = {
@@ -19,41 +20,31 @@ const Blocked = class extends React.Component {
       {!Utils.isSaas() ? (
         <div className='col-md-6 mt-5' id='sign-up'>
           <h1>Please get in touch</h1>
-          Your organisation has been disabled. Please get in touch so we can
-          discuss enabling your account.
-          {
-            <>
-              {' '}
-              <a
-                target='_blank'
-                href='mailto:support@flagsmith.com'
-                rel='noreferrer'
-              >
-                support@flagsmith.com
-              </a>
-              .
-            </>
-          }
+          <span className='h4'>
+            Your organisation has been disabled. Please contact Flagsmith
+            support at
+            {
+              <>
+                {' '}
+                <a
+                  target='_blank'
+                  href='mailto:support@flagsmith.com'
+                  rel='noreferrer'
+                >
+                  support@flagsmith.com
+                </a>
+                .
+              </>
+            }
+          </span>
+          <BlockedOrgInfo />
         </div>
       ) : (
         <div className='col-md-8 mt-5' id='sign-up'>
           {
             <>
-              <div>
-                <Button
-                  theme='text'
-                  onClick={() => {
-                    AppActions.logout()
-                    window.location.href = `/login`
-                  }}
-                >
-                  Return to Sign in/Sign up page
-                </Button>
-              </div>
               <Payment
-                isDisableAccountText={
-                  'Your organisation has been disabled. Please upgrade your plan or get in touch so we can discuss enabling your account.'
-                }
+                isDisableAccountText={`Your organisation has been disabled. Please upgrade your plan or contact us:`}
               />
             </>
           }

frontend/web/components/BlockedOrgInfo.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import AccountStore from 'common/stores/account-store'
+import AppActions from 'common/dispatcher/app-actions'
+
+export default function BlockedOrgInfo() {
+  return (
+    <div className='text-nowrap'>
+      <div>Organisation name: {AccountStore.getOrganisation().name}</div>
+      <div>Organisation ID: {AccountStore.getOrganisation().id}</div>
+      <div>
+        <a href='/organisations'>Switch to a different organisation</a>
+      </div>
+      <div>
+        <a
+          href='/login'
+          onClick={() => {
+            AppActions.logout()
+          }}
+        >
+          Log out
+        </a>
+      </div>
+    </div>
+  )
+}

frontend/web/components/modals/Payment.js

@@ -10,6 +10,7 @@ import Utils from 'common/utils/utils'
 import AccountProvider from 'common/providers/AccountProvider'
 import classNames from 'classnames'
 import Switch from 'components/Switch'
+import BlockedOrgInfo from 'components/BlockedOrgInfo'
 
 const PaymentButton = (props) => {
   const activeSubscription = AccountStore.getOrganisationPlan(
@@ -104,21 +105,25 @@ const Payment = class extends Component {
               ''
             return (
               <div className='col-md-12'>
-                <Row space className='mb-2'>
-                  <h5>Manage Payment Plan</h5>
+                <Row space className='mb-4'>
                   {this.props.isDisableAccountText && (
-                    <Row>
-                      <h7>
-                        {this.props.isDisableAccountText}{' '}
-                        <a
-                          target='_blank'
-                          href='mailto:support@flagsmith.com'
-                          rel='noreferrer'
-                        >
-                          support@flagsmith.com
-                        </a>
-                      </h7>
-                    </Row>
+                    <div className='d-lg-flex flex-lg-row align-items-end justify-content-between w-100 gap-4'>
+                      <div>
+                        <h4>
+                          {this.props.isDisableAccountText}{' '}
+                          <a
+                            target='_blank'
+                            href='mailto:support@flagsmith.com'
+                            rel='noreferrer'
+                          >
+                            support@flagsmith.com
+                          </a>
+                        </h4>
+                      </div>
+                      <div>
+                        <BlockedOrgInfo />
+                      </div>
+                    </div>
                   )}
                 </Row>
                 <div className='d-flex mb-4 font-weight-medium justify-content-center align-items-center gap-2'>

frontend/web/components/pages/OrganisationSettingsPage.js

@@ -457,6 +457,7 @@ const OrganisationSettingsPage = class extends Component {
                                   )}
                                 </div>
                               </Row>
+                              <h5>Manage Payment Plan</h5>
                               <Payment viewOnly={false} />
                             </div>
                           </TabItem>