feat: Add Payment component in the blocked page (#3068)

frontend/web/components/Blocked.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import ConfigProvider from 'common/providers/ConfigProvider'
+import Payment from 'components/modals/Payment'
 
 const Blocked = class extends React.Component {
   static contextTypes = {
@@ -14,25 +15,50 @@ const Blocked = class extends React.Component {
   }
 
   render = () => (
-    <div className='fullscreen-container maintenance fullscreen-container__grey justify-content-center'>
-      <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:[email protected]'
-              rel='noreferrer'
-            >
-              [email protected]
-            </a>
-            .
-          </>
-        }
-      </div>
+    <div className='fullscreen-container maintenance fullscreen-container__grey justify-content-center dark'>
+      {!Utils.getFlagsmithHasFeature('payments_on_blocked_page') ? (
+        <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:[email protected]'
+                rel='noreferrer'
+              >
+                [email protected]
+              </a>
+              .
+            </>
+          }
+        </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.'
+                }
+              />
+            </>
+          }
+        </div>
+      )}
     </div>
   )
 }

frontend/web/components/modals/Payment.js

@@ -31,6 +31,9 @@ const PaymentButton = (props) => {
             },
             success: (res) => {
               AppActions.updateSubscription(res)
+              if (this.props.isDisableAccount) {
+                window.location.href = `/projects`
+              }
             },
           })
         }}
@@ -99,6 +102,20 @@ const Payment = class extends Component {
               <div className='col-md-12'>
                 <Row space className='mb-4'>
                   <h5>Manage Payment Plan</h5>
+                  {this.props.isDisableAccountText && (
+                    <Row>
+                      <h7>
+                        {this.props.isDisableAccountText}{' '}
+                        <a
+                          target='_blank'
+                          href='mailto:[email protected]'
+                          rel='noreferrer'
+                        >
+                          [email protected]
+                        </a>
+                      </h7>
+                    </Row>
+                  )}
                 </Row>
                 <Row className='pricing-container align-start'>
                   <Flex className='pricing-panel p-2'>
@@ -122,13 +139,15 @@ const Payment = class extends Component {
                             <PaymentButton
                               data-cb-plan-id='startup-annual-v2'
                               className='btn btn-primary full-width mt-3'
+                              isDisableAccount={this.props.isDisableAccountText}
                             >
                               {plan.includes('startup') ? 'Purchased' : 'Buy'}
                             </PaymentButton>
                           ) : (
                             <PaymentButton
                               data-cb-plan-id='startup-v2'
                               className='btn btn-primary full-width mt-3'
+                              isDisableAccount={this.props.isDisableAccountText}
                             >
                               {plan.includes('startup') ? 'Purchased' : 'Buy'}
                             </PaymentButton>
@@ -329,13 +348,15 @@ const Payment = class extends Component {
                             <PaymentButton
                               data-cb-plan-id='scale-up-annual-v2'
                               className='btn btn-success full-width mt-3'
+                              isDisableAccount={this.props.isDisableAccountText}
                             >
                               {plan.includes('scale-up') ? 'Purchased' : 'Buy'}
                             </PaymentButton>
                           ) : (
                             <PaymentButton
                               data-cb-plan-id='scale-up-v2'
                               className='btn btn-success full-width mt-3'
+                              isDisableAccount={this.props.isDisableAccountText}
                             >
                               {plan.includes('scale-up') ? 'Purchased' : 'Buy'}
                             </PaymentButton>