TC Billing Account Enhancement

Author: yoution

src/actions/projects.js

@@ -1,8 +1,9 @@
 import {
+  LOAD_PROJECT_BILLING_ACCOUNT,
   LOAD_CHALLENGE_MEMBERS_SUCCESS,
   LOAD_PROJECT_DETAILS
 } from '../config/constants'
-import { fetchProjectById } from '../services/projects'
+import { fetchProjectById, fetchBillingAccount } from '../services/projects'
 
 /**
  * Loads project details
@@ -19,6 +20,13 @@ export function loadProject (projectId) {
             members
           })
         }
+
+        // Loads billing account
+        dispatch({
+          type: LOAD_PROJECT_BILLING_ACCOUNT,
+          payload: fetchBillingAccount(projectId)
+        })
+
         return project
       })
     })

src/components/ChallengeEditor/ChallengeEditor.module.scss

@@ -414,6 +414,11 @@
   }
 }
 
+.expiredMessage {
+  margin-left: 20px;
+  color: $red;
+}
+
 .bottomContainer {
   display: inline-flex;
   justify-content: space-between;

src/components/ChallengeEditor/ChallengeView/ChallengeView.module.scss

@@ -255,6 +255,11 @@
   }
 }
 
+.expiredMessage {
+  margin-left: 20px;
+  color: $red;
+}
+
 .button {
   height: 40px;
   span {

src/components/ChallengeEditor/ChallengeView/index.js

@@ -31,6 +31,7 @@ const ChallengeView = ({
   projectDetail,
   challenge,
   attachments,
+  isBillingAccountExpired,
   metadata,
   challengeResources,
   token,
@@ -197,6 +198,7 @@ const ChallengeView = ({
                       <span className={styles.fieldTitle}>Billing Account Id:</span>
                       {projectDetail.billingAccountId}
                     </span>
+                    {isBillingAccountExpired && <span className={styles.expiredMessage}>Expired</span>}
                   </div>
                 </div>
                 {isBetaMode() && (
@@ -278,6 +280,7 @@ ChallengeView.propTypes = {
   }).isRequired,
   projectDetail: PropTypes.object,
   challenge: PropTypes.object,
+  isBillingAccountExpired: PropTypes.bool,
   attachments: PropTypes.array,
   metadata: PropTypes.object,
   token: PropTypes.string,

src/components/ChallengeEditor/index.js

@@ -1181,6 +1181,7 @@ class ChallengeEditor extends Component {
     } = this.state
     const {
       isNew,
+      isBillingAccountExpired,
       isLoading,
       metadata,
       uploadAttachments,
@@ -1483,6 +1484,7 @@ class ChallengeEditor extends Component {
                       <span className={styles.fieldTitle}>Billing Account Id:</span>
                       {projectDetail.billingAccountId}
                     </span>
+                    {isBillingAccountExpired && <span className={styles.expiredMessage}>Expired</span>}
                   </div>
                 </div>
                 {isBetaMode() && (
@@ -1606,6 +1608,7 @@ ChallengeEditor.propTypes = {
   projectDetail: PropTypes.object,
   challengeResources: PropTypes.arrayOf(PropTypes.object),
   isNew: PropTypes.bool.isRequired,
+  isBillingAccountExpired: PropTypes.bool,
   projectId: PropTypes.string.isRequired,
   challengeId: PropTypes.string,
   metadata: PropTypes.object.isRequired,

src/config/constants.js

@@ -44,6 +44,12 @@ export const LOAD_PROJECTS_SUCCESS = 'LOAD_PROJECTS_SUCCESS'
 export const LOAD_PROJECTS_PENDING = 'LOAD_PROJECTS_PENDING'
 export const LOAD_PROJECTS_FAILURE = 'LOAD_PROJECTS_FAILURE'
 
+// project billingAccount
+export const LOAD_PROJECT_BILLING_ACCOUNT = 'LOAD_PROJECT_BILLING_ACCOUNT'
+export const LOAD_PROJECT_BILLING_ACCOUNT_PENDING = 'LOAD_PROJECT_BILLING_ACCOUNT_PENDING'
+export const LOAD_PROJECT_BILLING_ACCOUNT_FAILURE = 'LOAD_PROJECT_BILLING_ACCOUNT_FAILURE'
+export const LOAD_PROJECT_BILLING_ACCOUNT_SUCCESS = 'LOAD_PROJECT_BILLING_ACCOUNT_SUCCESS'
+
 export const SET_ACTIVE_PROJECT = 'SET_ACTIVE_PROJECT'
 
 export const LOAD_USER_SUCCESS = 'LOAD_USER_SUCCESS'

src/containers/ChallengeEditor/index.js

@@ -236,6 +236,7 @@ class ChallengeEditor extends Component {
     const {
       match,
       isLoading,
+      isBillingAccountExpired,
       isProjectLoading,
       // challengeDetails,
       challengeResources,
@@ -316,6 +317,7 @@ class ChallengeEditor extends Component {
           <ChallengeEditorComponent
             isLoading={isLoading}
             challengeDetails={challengeDetails}
+            isBillingAccountExpired={isBillingAccountExpired}
             challengeResources={challengeResources}
             metadata={metadata}
             projectId={_.get(match.params, 'projectId', null)}
@@ -343,6 +345,7 @@ class ChallengeEditor extends Component {
         render={({ match }) => ((
           <ChallengeEditorComponent
             isLoading={isLoading}
+            isBillingAccountExpired={isBillingAccountExpired}
             challengeDetails={challengeDetails}
             challengeResources={challengeResources}
             metadata={metadata}
@@ -371,6 +374,7 @@ class ChallengeEditor extends Component {
         render={({ match }) => ((
           <ChallengeViewComponent
             isLoading={isLoading}
+            isBillingAccountExpired={isBillingAccountExpired}
             metadata={metadata}
             projectDetail={projectDetail}
             challenge={challengeDetails}
@@ -418,6 +422,7 @@ ChallengeEditor.propTypes = {
     challengeTypes: PropTypes.array
   }),
   isLoading: PropTypes.bool,
+  isBillingAccountExpired: PropTypes.bool,
   createAttachments: PropTypes.func,
   attachments: PropTypes.arrayOf(PropTypes.shape()),
   token: PropTypes.string,
@@ -441,6 +446,7 @@ const mapStateToProps = ({ projects, challenges: { challengeDetails, challengeRe
   challengeResources,
   metadata,
   isLoading,
+  isBillingAccountExpired: projects.isBillingAccountExpired,
   isProjectLoading: projects.isLoading,
   attachments,
   token,

src/containers/Challenges/index.js

@@ -185,7 +185,6 @@ const mapStateToProps = ({ challenges, sidebar, projects }) => ({
   activeProjectId: sidebar.activeProjectId,
   projects: sidebar.projects,
   projectDetail: projects.projectDetail
-
 })
 
 const mapDispatchToProps = {

src/reducers/projects.js

@@ -3,14 +3,19 @@
  */
 import _ from 'lodash'
 import {
+  LOAD_PROJECT_BILLING_ACCOUNT_PENDING,
+  LOAD_PROJECT_BILLING_ACCOUNT_SUCCESS,
+  LOAD_PROJECT_BILLING_ACCOUNT_FAILURE,
   LOAD_PROJECT_DETAILS_FAILURE,
   LOAD_PROJECT_DETAILS_PENDING,
   LOAD_PROJECT_DETAILS_SUCCESS
 } from '../config/constants'
 
 const initialState = {
   isLoading: false,
-  projectDetail: {}
+  projectDetail: {},
+  isBillingAccountExpired: false,
+  isBillingAccountLoading: false
 }
 
 export default function (state = initialState, action) {
@@ -28,6 +33,24 @@ export default function (state = initialState, action) {
         hasProjectAccess: true,
         isLoading: false
       }
+    case LOAD_PROJECT_BILLING_ACCOUNT_PENDING:
+      return {
+        ...state,
+        isBillingAccountLoading: true,
+        isBillingAccountExpired: false
+      }
+    case LOAD_PROJECT_BILLING_ACCOUNT_SUCCESS:
+      return {
+        ...state,
+        isBillingAccountLoading: false,
+        isBillingAccountExpired: !action.payload.active
+      }
+    case LOAD_PROJECT_BILLING_ACCOUNT_FAILURE:
+      return {
+        ...state,
+        isBillingAccountLoading: false,
+        isBillingAccountExpired: false
+      }
     default:
       return state
   }

src/services/projects.js

@@ -3,6 +3,18 @@ import { axiosInstance } from './axiosWithAuth'
 import * as queryString from 'query-string'
 const { PROJECT_API_URL } = process.env
 
+/**
+ * Get billing account based on project id
+ *
+ * @param {String} projectId Id of the project
+ *
+ * @returns {Promise<Object>} Billing account data
+ */
+export async function fetchBillingAccount (projectId) {
+  const response = await axiosInstance.get(`${PROJECT_API_URL}/${projectId}/billingAccount`)
+  return _.get(response, 'data')
+}
+
 /**
  * Api request for fetching member's projects
  * @returns {Promise<*>}