Billing account field in project default

Author: CDharmateja

src/api/billingAccounts.js

@@ -0,0 +1,14 @@
+import { axiosInstance as axios } from './requestInterceptor'
+import { TC_API_URL } from '../config/constants'
+
+/**
+ * Get a user groups based on it's member id and membership type
+ *
+ * @param {String} projectId Id of the project
+ *
+ * @returns {Promise<Object>} Billing accounts data
+ */
+export function fetchBillingAccounts(projectId) {
+  return axios.get(`${TC_API_URL}/v5/projects/${projectId}/billingAccounts`)
+}
+

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

@@ -0,0 +1,98 @@
+import React from 'react'
+import {HOC as hoc} from 'formsy-react'
+
+import Select from '../../../../components/Select/Select'
+import {fetchBillingAccounts} from '../../../../api/billingAccounts'
+import {SALESFORCE_PROJECT_LEAD_LINK} from '../../../../config/constants'
+
+import styles from './styles.module.scss'
+
+class BillingAccountField extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      billingAccounts: [],
+      selectedBillingAccount: this.props.billingAccountId
+    }
+
+    this.handleChange = this.handleChange.bind(this)
+    this.mapOpts = this.mapOpts.bind(this)
+  }
+
+  componentDidMount() {
+    fetchBillingAccounts(this.props.projectId)
+      .then(({data: billingAccounts}) => this.setState({billingAccounts}))
+      .then(() => {
+        if (this.props.billingAccountId) {
+          this.setState(state => {
+            const filteredArray = state.billingAccounts.filter(
+              ({tcBillingAccountId}) =>
+                tcBillingAccountId === this.props.billingAccountId
+            )
+            if (filteredArray.length === 0) {
+              const billingAccountObj = {
+                name: '<Assigned Account>',
+                tcBillingAccountId: this.props.billingAccountId
+              }
+              return {
+                billingAccounts: [...state.billingAccounts, billingAccountObj],
+                selectedBillingAccount: this.mapOpts(billingAccountObj)
+              }
+            } else {
+              return {
+                selectedBillingAccount: this.mapOpts(filteredArray[0])
+              }
+            }
+          })
+        }
+      })
+      .catch(console.error)
+  }
+
+  handleChange(value) {
+    this.setState({selectedBillingAccount: value})
+    this.props.setValue(value.value)
+  }
+
+  mapOpts(opt) {
+    return {
+      label: `${opt.name} (${opt.tcBillingAccountId})`,
+      value: opt.tcBillingAccountId
+    }
+  }
+
+  render() {
+    const mapOpts = opt => ({
+      label: `${opt.name} (${opt.tcBillingAccountId})`,
+      value: opt.tcBillingAccountId
+    })
+    return (
+      <div className={styles.container}>
+        <div>Choose a Billing Account</div>
+        <Select
+          placeholder={
+            this.state.billingAccounts.length > 0 
+              ? 'Select billing account'
+              : 'No Billing Account Available'
+          }
+          heightAuto
+          onChange={this.handleChange}
+          value={this.state.selectedBillingAccount}
+          options={this.state.billingAccounts.map(mapOpts)}
+          isDisabled={this.state.billingAccounts.length === 0}
+        />
+        <a
+          className="tc-link"
+          href={`${SALESFORCE_PROJECT_LEAD_LINK}${this.props.projectId}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Manage the billing account in Salesforce
+        </a>
+      </div>
+    )
+  }
+}
+
+export default hoc(BillingAccountField)

src/projects/detail/components/BillingAccountField/styles.module.scss

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

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

@@ -6,6 +6,7 @@ const Formsy = FormsyForm.Formsy
 import { updateProject } from '../../../actions/project'
 import NDAField from '../NDAField'
 import GroupsField from '../GroupsField'
+import BillingAccountField from '../BillingAccountField'
 
 import './EditProjectDefaultsForm.scss'
 
@@ -40,7 +41,7 @@ class EditProjectDefaultsForm extends React.Component {
     }, {})
     const project = _.assign({}, this.state.project, reqProjectState)
     this.setState({project})
-    const isProjectEqual = _.isEqual(this.state.project, this.props.project)
+    const isProjectEqual = _.isEqual(project, this.props.project)
     if (!isProjectEqual && !this.state.enableButton) {
       this.setState({enableButton: true})
     } else if (isProjectEqual && this.state.enableButton !== false) {
@@ -80,6 +81,11 @@ class EditProjectDefaultsForm extends React.Component {
               name="groups"
               value={this.state.project.groups}
             />
+            <BillingAccountField
+              name="billingAccountId"
+              projectId={this.state.project.id}
+              billingAccountId={this.state.project.billingAccountId}
+            />
           </div>
           <div className="section-footer section-footer-spec">
             <button

src/projects/detail/components/EditProjectDefaultsForm/EditProjectDefaultsForm.scss

@@ -6,6 +6,9 @@
     .container {
       padding: 50px 0 70px 0;
       margin: 0 50px 20px 50px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
     }
     .radio-group-options {
       flex-direction: column;

src/projects/detail/components/GroupsField/GroupsField.module.scss

@@ -1,6 +1,5 @@
 .container {
-  margin: 10px 0;
-}
-.fieldName {
-  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }

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

@@ -67,7 +67,7 @@ class GroupsField extends React.Component {
   render() {
     return (
       <div className={styles.container}>
-        <div className={styles.fieldName}>Intended Work Groups</div>
+        <div>Intended Work Groups</div>
         <FormsySelect
           name="groups-field"
           isMulti