require approving before launching for self service challenges

Author: doctorhilarius

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -46,7 +46,8 @@ const ChallengeViewTabs = ({
   projectPhases,
   assignYourselfCopilot,
   showRejectChallengeModal,
-  loggedInUser
+  loggedInUser,
+  onApproveChallenge
 }) => {
   const [selectedTab, setSelectedTab] = useState(0)
 
@@ -85,7 +86,9 @@ const ChallengeViewTabs = ({
 
   const isSelfService = challenge.legacy.selfService
   const isDraft = challenge.status.toUpperCase() === CHALLENGE_STATUS.DRAFT
-  const launchText = `${isSelfService && isDraft ? 'Approve and ' : ''}Launch`
+  // if this isn't self-service, permit launching if the challenge is draft
+  // OR if this is self-service, permit launching if the challenge is approved
+  const canLaunch = (!isSelfService && isDraft) || challenge.status.toUpperCase() === CHALLENGE_STATUS.APPROVED
   const isCopilot = challenge.legacy.selfServiceCopilot === loggedInUser.handle
 
   return (
@@ -117,12 +120,12 @@ const ChallengeViewTabs = ({
         >
           {(isDraft || challenge.status === 'New') && !isSelfService &&
             (<div className={styles['cancel-button']}><CancelDropDown challenge={challenge} onSelectMenu={cancelChallenge} /></div>)}
-          {isDraft && (!isSelfService || isCopilot) && (
+          {canLaunch && (
             <div className={styles.button}>
               {challenge.legacyId || isTask ? (
                 <PrimaryButton
-                  text={launchText}
-                  type={'info'}
+                  text='Launch'
+                  type='info'
                   onClick={onLaunchChallenge}
                 />
               ) : (
@@ -133,6 +136,15 @@ const ChallengeViewTabs = ({
               )}
             </div>
           )}
+          {isDraft && isSelfService && (
+            <div className={styles.button}>
+              <PrimaryButton
+                text='Approve'
+                type='info'
+                onClick={onApproveChallenge}
+              />
+            </div>
+          )}
           {isTask && challenge.status === 'Active' && (
             <div className={styles.button}>
               {assignedMemberDetails ? (
@@ -153,8 +165,8 @@ const ChallengeViewTabs = ({
           {isSelfService && isDraft && isCopilot && (
             <div className={styles.button}>
               <PrimaryButton
-                text={'Reject challenge'}
-                type={'danger'}
+                text='Reject challenge'
+                type='danger'
                 onClick={showRejectChallengeModal}
               />
             </div>
@@ -228,6 +240,7 @@ const ChallengeViewTabs = ({
           projectPhases={projectPhases}
           assignYourselfCopilot={assignYourselfCopilot}
           showRejectChallengeModal={showRejectChallengeModal}
+          onApproveChallenge={onApproveChallenge}
         />
       )}
       {selectedTab === 1 && (
@@ -267,7 +280,8 @@ ChallengeViewTabs.propTypes = {
   projectPhases: PropTypes.arrayOf(PropTypes.object),
   assignYourselfCopilot: PropTypes.func.isRequired,
   showRejectChallengeModal: PropTypes.func.isRequired,
-  loggedInUser: PropTypes.object.isRequired
+  loggedInUser: PropTypes.object.isRequired,
+  onApproveChallenge: PropTypes.func
 }
 
 export default ChallengeViewTabs

src/config/constants.js

@@ -167,6 +167,7 @@ export const CHALLENGE_STATUS = {
   ACTIVE: 'ACTIVE',
   NEW: 'NEW',
   DRAFT: 'DRAFT',
+  APPROVED: 'APPROVED',
   COMPLETED: 'COMPLETED',
   CANCELLED: 'CANCELLED'
 }

src/containers/ChallengeEditor/index.js

@@ -77,6 +77,7 @@ class ChallengeEditor extends Component {
     this.closeRejectModal = this.closeRejectModal.bind(this)
     this.rejectChallenge = this.rejectChallenge.bind(this)
     this.onChangeCancelReason = this.onChangeCancelReason.bind(this)
+    this.onApproveChallenge = this.onApproveChallenge.bind(this)
   }
 
   componentDidMount () {
@@ -203,6 +204,20 @@ class ChallengeEditor extends Component {
     }
   }
 
+  async onApproveChallenge () {
+    const { partiallyUpdateChallengeDetails, challengeDetails } = this.props
+    const newStatus = 'Approved'
+    await partiallyUpdateChallengeDetails(challengeDetails.id, {
+      status: newStatus
+    })
+    this.setState({
+      challengeDetails: {
+        ...challengeDetails,
+        status: newStatus
+      }
+    })
+  }
+
   async cancelChallenge (challenge, cancelReason) {
     const { partiallyUpdateChallengeDetails, history } = this.props
 
@@ -580,6 +595,7 @@ class ChallengeEditor extends Component {
               assignYourselfCopilot={this.assignYourselfCopilot}
               showRejectChallengeModal={this.showRejectChallengeModal}
               loggedInUser={loggedInUser}
+              onApproveChallenge={this.onApproveChallenge}
             />
           )}
         />