Merge pull request #4299 from CDharmateja/project-defaults-billing-account

Billing account field in project defaults

Author: maxceem

src/api/billingAccounts.js

@@ -0,0 +1,14 @@
+import { axiosInstance as axios } from './requestInterceptor'
+import { TC_API_URL } from '../config/constants'
+
+/**
+ * Get billing accounts based on project id
+ *
+ * @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,92 @@
+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 existentBillingAccount = _.find(state.billingAccounts, {
+              tcBillingAccountId: this.props.billingAccountId
+            })
+            if (!existentBillingAccount) {
+              const billingAccountObj = {
+                name: '<Assigned Account>',
+                tcBillingAccountId: this.props.billingAccountId
+              }
+              return {
+                billingAccounts: [...state.billingAccounts, billingAccountObj],
+                selectedBillingAccount: this.mapOpts(billingAccountObj)
+              }
+            } else {
+              return {
+                selectedBillingAccount: this.mapOpts(existentBillingAccount)
+              }
+            }
+          })
+        }
+      })
+      .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() {
+    return (
+      <div className={styles.container}>
+        <div className={styles.fieldName}>Choose a Billing Account</div>
+        <Select
+          placeholder={
+            this.state.billingAccounts.length > 0 
+              ? 'Select billing account'
+              : 'No Billing Account Available'
+          }
+          onChange={this.handleChange}
+          value={this.state.selectedBillingAccount}
+          options={this.state.billingAccounts.map(this.mapOpts)}
+          isDisabled={this.state.billingAccounts.length === 0}
+        />
+        <a
+          className={styles.manageBillingAccountLink}
+          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,15 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.container {
+  .fieldName {
+    margin-bottom: 10px;
+  }
+  .manageBillingAccountLink {
+    display: block;
+    color: $tc-dark-blue-110;
+    margin-top: 10px;
+    &:hover {
+      color: inherit;
+    }
+  }
+}

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/GroupsField/GroupsField.module.scss

@@ -1,6 +1,6 @@
 .container {
-  margin: 10px 0;
+  margin: 10px 0 20px 0;
+  .fieldName {
+    margin-bottom: 10px;
+  }
 }
-.fieldName {
-  margin-bottom: 10px;
-}