Add billing account start / end date to project page

Author: jmgasper

.circleci/config.yml

@@ -150,7 +150,7 @@ workflows:
           context : org-global
           filters: &filters-dev
             branches:
-              only: ['develop', 'jira-vuln-2333']
+              only: ['develop', 'jira-vuln-2333', 'justin-fixes']
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

src/components/ChallengesComponent/ChallengeList/ChallengeList.module.scss

@@ -20,6 +20,14 @@
       padding-bottom: 10px;
     }
   }
+
+  .title {
+    font-weight: bold;
+  }
+  .error {
+      font-weight: bold;
+      color: #BE405E;
+  }
 }
 
 .header {

src/components/ChallengesComponent/ChallengeList/index.js

@@ -125,6 +125,10 @@ class ChallengeList extends Component {
       partiallyUpdateChallengeDetails,
       deleteChallenge,
       isBillingAccountExpired,
+      billingStartDate,
+      billingEndDate,
+      isBillingAccountLoadingFailed,
+      isBillingAccountLoading,
       selfService
     } = this.props
     if (warnMessage) {
@@ -172,14 +176,29 @@ class ChallengeList extends Component {
     return (
       <div className={styles.list}>
         <div className={styles.row}>
-          <DebounceInput
-            className={styles.challengeInput}
-            minLength={2}
-            debounceTimeout={300}
-            placeholder='Search Challenges'
-            onChange={(e) => this.updateSearchParam(e.target.value, status)}
-            value={searchText}
-          />
+          {!isBillingAccountLoading && !isBillingAccountLoadingFailed && !isBillingAccountExpired && (
+            <div className={'col-9'}>
+              Billing Account: {status} Start Date {billingStartDate} End Date {billingEndDate}
+            </div>
+          )}
+          {!isBillingAccountLoading && !isBillingAccountLoadingFailed && isBillingAccountExpired && (
+            <div className={'col-9'}>
+              Billing Account: <span className={styles.title}>INACTIVE</span> Start Date {billingStartDate} End Date {billingEndDate}
+            </div>
+          )}
+          {!isBillingAccountLoading && isBillingAccountLoadingFailed && (
+            <div className={'col-9'}><span className={styles.error}>Billing Account failed to load</span></div>
+          )}
+          <div className={'col-3'}>
+            <DebounceInput
+              className={styles.challengeInput}
+              minLength={2}
+              debounceTimeout={300}
+              placeholder='Search Challenges'
+              onChange={(e) => this.updateSearchParam(e.target.value, status)}
+              value={searchText}
+            />
+          </div>
         </div>
         {activeProject && (<Tabs
           selectedIndex={selectedTab}
@@ -307,6 +326,10 @@ ChallengeList.propTypes = {
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
   isBillingAccountExpired: PropTypes.bool,
+  billingStartDate: PropTypes.string,
+  billingEndDate: PropTypes.string,
+  isBillingAccountLoadingFailed: PropTypes.bool,
+  isBillingAccountLoading: PropTypes.bool,
   selfService: PropTypes.bool,
   auth: PropTypes.object.isRequired
 }

src/components/ChallengesComponent/index.js

@@ -28,6 +28,10 @@ const ChallengesComponent = ({
   partiallyUpdateChallengeDetails,
   deleteChallenge,
   isBillingAccountExpired,
+  billingStartDate,
+  billingEndDate,
+  isBillingAccountLoadingFailed,
+  isBillingAccountLoading,
   selfService,
   auth
 }) => {
@@ -78,6 +82,10 @@ const ChallengesComponent = ({
               partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
               deleteChallenge={deleteChallenge}
               isBillingAccountExpired={isBillingAccountExpired}
+              billingStartDate={billingStartDate}
+              billingEndDate={billingEndDate}
+              isBillingAccountLoadingFailed={isBillingAccountLoadingFailed}
+              isBillingAccountLoading={isBillingAccountLoading}
               selfService={selfService}
               auth={auth}
             />
@@ -106,6 +114,10 @@ ChallengesComponent.propTypes = {
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
   isBillingAccountExpired: PropTypes.bool,
+  billingStartDate: PropTypes.string,
+  billingEndDate: PropTypes.string,
+  isBillingAccountLoadingFailed: PropTypes.bool,
+  isBillingAccountLoading: PropTypes.bool,
   selfService: PropTypes.bool,
   auth: PropTypes.object.isRequired
 }

src/containers/Challenges/index.js

@@ -87,6 +87,10 @@ class Challenges extends Component {
       partiallyUpdateChallengeDetails,
       deleteChallenge,
       isBillingAccountExpired,
+      billingStartDate,
+      billingEndDate,
+      isBillingAccountLoadingFailed,
+      isBillingAccountLoading,
       selfService,
       auth
     } = this.props
@@ -155,6 +159,10 @@ class Challenges extends Component {
           partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
           deleteChallenge={deleteChallenge}
           isBillingAccountExpired={isBillingAccountExpired}
+          billingStartDate={billingStartDate}
+          billingEndDate={billingEndDate}
+          isBillingAccountLoadingFailed={isBillingAccountLoadingFailed}
+          isBillingAccountLoading={isBillingAccountLoading}
           selfService={selfService}
           auth={auth}
         />
@@ -186,6 +194,10 @@ Challenges.propTypes = {
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
   isBillingAccountExpired: PropTypes.bool,
+  billingStartDate: PropTypes.string,
+  billingEndDate: PropTypes.string,
+  isBillingAccountLoadingFailed: PropTypes.bool,
+  isBillingAccountLoading: PropTypes.bool,
   selfService: PropTypes.bool,
   auth: PropTypes.object.isRequired
 }
@@ -197,6 +209,10 @@ const mapStateToProps = ({ challenges, sidebar, projects, auth }) => ({
   projects: sidebar.projects,
   projectDetail: projects.projectDetail,
   isBillingAccountExpired: projects.isBillingAccountExpired,
+  billingStartDate: projects.billingStartDate,
+  billingEndDate: projects.billingEndDate,
+  isBillingAccountLoadingFailed: projects.isBillingAccountLoadingFailed,
+  isBillingAccountLoading: projects.isBillingAccountLoading,
   auth: auth
 })
 

src/reducers/projects.js

@@ -13,12 +13,32 @@ import {
   LOAD_PROJECT_PHASES_PENDING,
   LOAD_PROJECT_PHASES_SUCCESS
 } from '../config/constants'
+import moment from 'moment-timezone'
+
+/**
+ * checks if billing is expired or not
+ * @param {boolean} active if billing account is active or not
+ * @param {string} endDate the end date
+ * @returns if billing expired or not
+ */
+const checkBillingExpired = (active, endDate) => {
+  if (active) {
+    if (moment().isBefore(endDate)) {
+      return false
+    }
+    return true
+  }
+  return true
+}
 
 const initialState = {
   isLoading: false,
   projectDetail: {},
   isBillingAccountExpired: false,
   isBillingAccountLoading: false,
+  isBillingAccountLoadingFailed: false,
+  billingStartDate: null,
+  billingEndDate: null,
   isPhasesLoading: false,
   phases: []
 }
@@ -42,19 +62,27 @@ export default function (state = initialState, action) {
       return {
         ...state,
         isBillingAccountLoading: true,
-        isBillingAccountExpired: false
+        isBillingAccountExpired: false,
+        billingStartDate: '',
+        billingEndDate: ''
       }
     case LOAD_PROJECT_BILLING_ACCOUNT_SUCCESS:
       return {
         ...state,
         isBillingAccountLoading: false,
-        isBillingAccountExpired: !action.payload.active
+        isBillingAccountExpired: checkBillingExpired(action.payload.active, action.payload.endDate),
+        billingStartDate: action.payload.startDate,
+        billingEndDate: action.payload.endDate,
+        isBillingAccountLoadingFailed: false
       }
     case LOAD_PROJECT_BILLING_ACCOUNT_FAILURE:
       return {
         ...state,
         isBillingAccountLoading: false,
-        isBillingAccountExpired: false
+        isBillingAccountExpired: false,
+        billingStartDate: '',
+        billingEndDate: '',
+        isBillingAccountLoadingFailed: true
       }
     case LOAD_PROJECT_PHASES_PENDING:
       return {