Feature/billing account protection (#4394)

* fix: issue #4391

* Deployable feature branch

Co-authored-by: yoution <zhuyan207@gmail.com>

Author: vikasrohit

.circleci/config.yml

@@ -128,7 +128,7 @@ workflows:
             - build-dev
           filters:
             branches:
-              only: ['dev', 'feature/cf-2.20']
+              only: ['dev', 'feature/billing_account_protection']
 
       - deployTest01:
           context : org-global

src/projects/detail/components/BillingAccountField/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import moment from 'moment'
+import _ from 'lodash'
 import {HOC as hoc} from 'formsy-react'
 
 import Select from '../../../../components/Select/Select'
@@ -27,6 +28,8 @@ class BillingAccountField extends React.Component {
       isLoading: true,
       billingAccounts: [],
       selectedBillingAccount: null,
+      defaultBillingAccount: null,
+      isDefaultBillingAccountExpired: false,
     }
 
     this.handleChange = this.handleChange.bind(this)
@@ -60,6 +63,10 @@ class BillingAccountField extends React.Component {
             })
 
             billingAccounts = [selectedBillingAccount, ...billingAccounts]
+            this.setState({
+              defaultBillingAccount: selectedBillingAccount,
+              isDefaultBillingAccountExpired: this.props.isExpired
+            })
           }
         }
 
@@ -74,11 +81,16 @@ class BillingAccountField extends React.Component {
   handleChange(value) {
     this.setState({ selectedBillingAccount: value })
     this.props.setValue(value ? value.value : null)
+    this.props.setBillingAccountExpired && this.props.setBillingAccountExpired(this.isCurrentBillingAccountExpired(value))
+  }
+
+  isCurrentBillingAccountExpired(nextSelectedBillingAccount) {
+    const {defaultBillingAccount, isDefaultBillingAccountExpired, selectedBillingAccount} = this.state
+    return isDefaultBillingAccountExpired && _.get(defaultBillingAccount, 'value') === _.get(nextSelectedBillingAccount || selectedBillingAccount, 'value')
   }
 
   render() {
 
-    const {isExpired} = this.props
     const placeholder = this.state.billingAccounts.length > 0
       ? 'Select billing account'
       : 'No Billing Account Available'
@@ -94,7 +106,7 @@ class BillingAccountField extends React.Component {
           isDisabled={this.state.billingAccounts.length === 0}
           showDropdownIndicator
         />
-        {isExpired && <span className="error-message">Expired</span>}
+        {this.isCurrentBillingAccountExpired() &&  <span className="error-message">Expired</span>}
         {this.state.selectedBillingAccount && (
           <div className={styles.manageBillingAccountLinkWrapper}>
             <a

src/projects/detail/components/EditProjectDefaultsForm/EditProjectDefaultsForm.jsx

@@ -18,11 +18,13 @@ class EditProjectDefaultsForm extends React.Component {
 
     this.state = {
       enableButton: false,
-      isLoading: true
+      isLoading: true,
+      isBillingAccountExpired: false,
     }
 
     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
+    this.setBillingAccountExpired = this.setBillingAccountExpired.bind(this)
   }
 
   componentDidMount() {
@@ -35,6 +37,11 @@ class EditProjectDefaultsForm extends React.Component {
     }
   }
 
+  setBillingAccountExpired(value) {
+    this.setState({
+      isBillingAccountExpired: value
+    })
+  }
   handleChange(changed) {
     const keys = _.intersection(Object.keys(changed), Object.keys(this.state.project))
     const reqProjectState = keys.reduce((acc, curr) => {
@@ -88,13 +95,14 @@ class EditProjectDefaultsForm extends React.Component {
               projectId={this.state.project.id}
               isExpired={this.props.isBillingAccountExpired}
               value={this.state.project.billingAccountId}
+              setBillingAccountExpired={this.setBillingAccountExpired}
             />
           </div>
           <div className="section-footer section-footer-spec">
             <button
               className="tc-btn tc-btn-primary tc-btn-md"
               type="submit"
-              disabled={!this.state.enableButton}
+              disabled={this.state.isBillingAccountExpired || !this.state.enableButton}
             >
               Save
             </button>