Merge pull request #1125 from topcoder-platform/hotfix/confirm-design-challenge

[DEV] [HOTFIX] confirm design challenge

Author: maxceem

config/constants/development.js

@@ -30,6 +30,7 @@ module.exports = {
   DES_TRACK_ID: '5fa04185-041f-49a6-bfd1-fe82533cd6c8',
   DS_TRACK_ID: 'c0f5d461-8219-4c14-878a-c3a3f356466d',
   QA_TRACK_ID: '36e6a8d0-7e1e-4608-a673-64279d99c115',
+  CHALLENGE_TYPE_ID: '927abff4-7af9-4145-8ba1-577c16e64e2e',
   SEGMENT_API_KEY: 'QBtLgV8vCiuRX1lDikbMjcoe9aCHkF6n',
   CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c'],
   FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,

config/constants/production.js

@@ -30,6 +30,7 @@ module.exports = {
   DES_TRACK_ID: '5fa04185-041f-49a6-bfd1-fe82533cd6c8',
   DS_TRACK_ID: 'c0f5d461-8219-4c14-878a-c3a3f356466d',
   QA_TRACK_ID: '36e6a8d0-7e1e-4608-a673-64279d99c115',
+  CHALLENGE_TYPE_ID: '927abff4-7af9-4145-8ba1-577c16e64e2e',
   SEGMENT_API_KEY: 'QSQAW5BWmZfLoKFNRgNKaqHvLDLJoGqF',
   CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c'],
   FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,

src/components/ChallengeEditor/index.js

@@ -20,6 +20,7 @@ import {
   MESSAGE,
   COMMUNITY_APP_URL,
   DES_TRACK_ID,
+  CHALLENGE_TYPE_ID,
   REVIEW_TYPES
 } from '../../config/constants'
 import { PrimaryButton, OutlineButton } from '../Buttons'
@@ -76,6 +77,7 @@ class ChallengeEditor extends Component {
       isOpenAdvanceSettings: false,
       isLoading: false,
       isSaving: false,
+      showDesignChallengeWarningModel: false,
       hasValidationErrors: false,
       challenge: {
         ...dropdowns['newChallenge']
@@ -110,9 +112,11 @@ class ChallengeEditor extends Component {
     this.onUpdateDescription = this.onUpdateDescription.bind(this)
     this.onActiveChallenge = this.onActiveChallenge.bind(this)
     this.resetModal = this.resetModal.bind(this)
+    this.resetDesignChallengeWarningModal = this.resetDesignChallengeWarningModal.bind(this)
     this.openCloseTaskConfirmation = this.openCloseTaskConfirmation.bind(this)
     this.onCloseTask = this.onCloseTask.bind(this)
     this.createNewChallenge = this.createNewChallenge.bind(this)
+    this.createNewDesignChallenge = this.createNewDesignChallenge.bind(this)
     this.getCurrentChallengeId = this.getCurrentChallengeId.bind(this)
     this.isValidChallengePrizes = this.isValidChallengePrizes.bind(this)
     this.isValidChallenge = this.isValidChallenge.bind(this)
@@ -235,6 +239,10 @@ class ChallengeEditor extends Component {
     }
   }
 
+  resetDesignChallengeWarningModal () {
+    this.setState({ showDesignChallengeWarningModel: false })
+  }
+
   resetModal () {
     this.setState({ isLoading: false, isConfirm: false, isLaunch: false, error: null, isCloseTask: false, isDeleteLaunch: false })
   }
@@ -824,12 +832,25 @@ class ChallengeEditor extends Component {
     history.push(newPath)
   };
 
+  createNewDesignChallenge () {
+    this.resetDesignChallengeWarningModal()
+    this.createNewChallenge()
+  }
+
   async createNewChallenge () {
     if (!this.props.isNew) return
     const { metadata, createChallenge, projectDetail } = this.props
-    const { name, trackId, typeId } = this.state.challenge
+    const { showDesignChallengeWarningModel, challenge: { name, trackId, typeId } } = this.state
     const { timelineTemplates } = metadata
     const isDesignChallenge = trackId === DES_TRACK_ID
+    const isChallengeType = typeId === CHALLENGE_TYPE_ID
+
+    if (!showDesignChallengeWarningModel && isDesignChallenge && isChallengeType) {
+      this.setState({
+        showDesignChallengeWarningModel: true
+      })
+      return
+    }
 
     // indicate that creating process has started
     this.setState({ isSaving: true })
@@ -1148,6 +1169,7 @@ class ChallengeEditor extends Component {
     const {
       isLaunch,
       isConfirm,
+      showDesignChallengeWarningModel,
       challenge,
       draftChallenge,
       isOpenAdvanceSettings,
@@ -1219,6 +1241,30 @@ class ChallengeEditor extends Component {
       }
     }
 
+    let designChallengeModal
+    if (showDesignChallengeWarningModel) {
+      const messageBody = (
+        <div>
+          <div>
+            At this time, Work Manager only supports single-round (no checkpoint) challenges for design. If you want to run a multi-round (has checkpoints) design challenge, please use Direct.
+          </div>
+          <div>
+            Do you want to proceed with set-up?
+          </div>
+        </div>
+      )
+      designChallengeModal = (
+        <ConfirmationModal
+          title='Reminder'
+          message={messageBody}
+          theme={theme}
+          cancelText='Cancel Set-Up'
+          confirmText='Continue Set-Up'
+          onCancel={this.resetDesignChallengeWarningModal}
+          onConfirm={this.createNewDesignChallenge}
+        />
+      )
+    }
     if (!isNew && isLaunch && !isConfirm) {
       activateModal = (
         <ConfirmationModal
@@ -1362,6 +1408,7 @@ class ChallengeEditor extends Component {
             <TypeField types={metadata.challengeTypes} onUpdateSelect={this.onUpdateSelect} challenge={challenge} />
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
           </div>
+          {showDesignChallengeWarningModel && designChallengeModal}
           { errorContainer }
           { actionButtons }
         </form>
@@ -1389,6 +1436,7 @@ class ChallengeEditor extends Component {
                 <span><span className={styles.fieldTitle}>Status:</span> {challenge.status}</span>
               </div>
             </div>
+
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
             {isTask && (
               <AssignedMemberField

src/components/Modal/ConfirmationModal.js

@@ -6,7 +6,7 @@ import styles from './ConfirmationModal.module.scss'
 import OutlineButton from '../Buttons/OutlineButton'
 import PrimaryButton from '../Buttons/PrimaryButton'
 
-const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing, onCancel, onConfirm, disableConfirmButton }) => (
+const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing, cancelText, confirmText, onCancel, onConfirm, disableConfirmButton }) => (
   <Modal theme={theme} onCancel={onCancel}>
     <div className={styles.contentContainer}>
       <div className={styles.title}>{title}</div>
@@ -15,14 +15,14 @@ const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing,
         <div className={styles.button}>
           <OutlineButton
             className={cn({ disabled: isProcessing })}
-            text={'Cancel'}
+            text={cancelText || 'Cancel'}
             type={'danger'}
             onClick={onCancel}
           />
         </div>
         <div className={styles.button}>
           <PrimaryButton
-            text={isProcessing ? 'Processing...' : 'Confirm'}
+            text={isProcessing ? 'Processing...' : confirmText || 'Confirm'}
             disabled={disableConfirmButton}
             type={'info'}
             onClick={onConfirm}
@@ -41,6 +41,8 @@ ConfirmationModal.propTypes = {
   theme: PropTypes.shape(),
   isProcessing: PropTypes.bool,
   disableConfirmButton: PropTypes.bool,
+  cancelText: PropTypes.string,
+  confirmText: PropTypes.string,
   onCancel: PropTypes.func,
   onConfirm: PropTypes.func
 }

src/components/Modal/ConfirmationModal.module.scss

@@ -84,10 +84,13 @@
     margin-top: 30px;
 
     .button {
-      width: 135px;
       height: 40px;
       margin-right: 66px;
 
+      > button {
+        padding: 0 35px;
+      }
+
       span {
         font-size: 18px;
         font-weight: 500;
@@ -98,4 +101,4 @@
       margin-right: 0;
     }
   }
-}
+}

src/config/constants.js

@@ -14,6 +14,7 @@ export const {
   DES_TRACK_ID,
   DS_TRACK_ID,
   QA_TRACK_ID,
+  CHALLENGE_TYPE_ID,
   SEGMENT_API_KEY
 } = process.env
 export const CREATE_FORUM_TYPE_IDS = typeof process.env.CREATE_FORUM_TYPE_IDS === 'string' ? process.env.CREATE_FORUM_TYPE_IDS.split(',') : process.env.CREATE_FORUM_TYPE_IDS