Enable multi-round design challenges in WM

https://topcoder.atlassian.net/browse/PROD-2894

Author: jmgasper

config/constants/development.js

@@ -43,5 +43,6 @@ module.exports = {
   // if idle for this many minutes, show user a prompt saying they'll be logged out
   IDLE_TIMEOUT_MINUTES: 10,
   // duration to show the prompt saying user will be logged out, before actually logging out the user
-  IDLE_TIMEOUT_GRACE_MINUTES: 5
+  IDLE_TIMEOUT_GRACE_MINUTES: 5,
+  MULTI_ROUND_CHALLENGE_TEMPLATE_ID: 'd4201ca4-8437-4d63-9957-3f7708184b07'
 }

config/constants/production.js

@@ -41,5 +41,6 @@ module.exports = {
   FILE_PICKER_REGION: 'us-east-1',
   FILE_PICKER_CNAME: 'fs.topcoder.com',
   IDLE_TIMEOUT_MINUTES: 10,
-  IDLE_TIMEOUT_GRACE_MINUTES: 5
+  IDLE_TIMEOUT_GRACE_MINUTES: 5,
+  MULTI_ROUND_CHALLENGE_TEMPLATE_ID: 'd4201ca4-8437-4d63-9957-3f7708184b07'
 }

src/components/ChallengeEditor/ChallengeType-Field/ChallengeType-Field.module.scss

@@ -0,0 +1,55 @@
+@import "../../../styles/includes";
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  margin: 30px 30px 0 30px;
+  align-content: space-between;
+  justify-content: flex-start;
+
+  .field {
+    @include upto-sm {
+      display: block;
+      padding-bottom: 10px;
+    }
+
+    label {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+    }
+
+    &.col1 {
+      max-width: 185px;
+      min-width: 185px;
+      margin-right: 14px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+
+      span {
+        color: $tc-red;
+      }
+    }
+
+    &.col2.error {
+      color: $tc-red;
+      margin-top: -25px;
+    }
+    &.col2 {
+      align-self: flex-end;
+      width: 80%;
+      margin-bottom: auto;
+      margin-top: auto;
+      display: flex;
+      flex-direction: row;
+      max-width: 600px;
+      min-width: 600px;
+    }
+  }
+}

src/components/ChallengeEditor/ChallengeType-Field/index.js

@@ -0,0 +1,48 @@
+import _ from 'lodash'
+import React from 'react'
+import PropTypes from 'prop-types'
+import Select from '../../Select'
+import cn from 'classnames'
+import styles from './ChallengeType-Field.module.scss'
+
+const ChallengeTypeField = ({ types, onUpdateSelect, challenge, disabled }) => {
+  return (
+    <>
+      <div className={styles.row}>
+        <div className={cn(styles.field, styles.col1)}>
+          <label htmlFor='type'>Challenge Type <span>*</span> :</label>
+        </div>
+        <div className={cn(styles.field, styles.col2, { [styles.disabled]: disabled })}>
+          <Select
+            name='challenge_type'
+            options={_.map(types, type => ({ label: type, value: type }))}
+            placeholder='Challenge Type'
+            isClearable={false}
+            onChange={(e) => onUpdateSelect(e.value, false, 'challengeType')}
+            isDisabled={disabled}
+          />
+        </div>
+      </div>
+      { challenge.submitTriggered && !challenge.challengeType && <div className={styles.row}>
+        <div className={cn(styles.field, styles.col1)} />
+        <div className={cn(styles.field, styles.col2, styles.error)}>
+          Challenge Type is required field
+        </div>
+      </div> }
+    </>
+  )
+}
+
+ChallengeTypeField.defaultProps = {
+  types: [],
+  disabled: false
+}
+
+ChallengeTypeField.propTypes = {
+  types: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  onUpdateSelect: PropTypes.func.isRequired,
+  challenge: PropTypes.shape().isRequired,
+  disabled: PropTypes.bool
+}
+
+export default ChallengeTypeField

src/components/ChallengeEditor/ChallengeView/index.js

@@ -20,8 +20,14 @@ import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
 import { isBetaMode } from '../../../util/cookie'
 import { loadGroupDetails } from '../../../actions/challenges'
-import { REVIEW_TYPES, CONNECT_APP_URL, PHASE_PRODUCT_CHALLENGE_ID_FIELD } from '../../../config/constants'
+import {
+  REVIEW_TYPES,
+  CONNECT_APP_URL,
+  PHASE_PRODUCT_CHALLENGE_ID_FIELD,
+  MULTI_ROUND_CHALLENGE_TEMPLATE_ID
+} from '../../../config/constants'
 import PhaseInput from '../../PhaseInput'
+import CheckpointPrizesField from '../CheckpointPrizes-Field'
 
 const ChallengeView = ({
   projectDetail,
@@ -91,6 +97,7 @@ const ChallengeView = ({
   const showTimeline = false // disables the timeline for time being https://github.com/topcoder-platform/challenge-engine-ui/issues/706
   const isTask = _.get(challenge, 'task.isTask', false)
   const phases = _.get(challenge, 'phases', [])
+  const showCheckpointPrizes = _.get(challenge, 'timelineTemplateId') === MULTI_ROUND_CHALLENGE_TEMPLATE_ID
 
   return (
     <div className={styles.wrapper}>
@@ -224,6 +231,11 @@ const ChallengeView = ({
               readOnly
             />}
             <ChallengePrizesField challenge={challenge} readOnly />
+            {
+              showCheckpointPrizes && (
+                <CheckpointPrizesField challenge={challenge} readOnly />
+              )
+            }
             <CopilotFeeField challenge={challenge} readOnly />
             <ChallengeTotalField challenge={challenge} />
           </div>

src/components/ChallengeEditor/CheckpointPrizes-Field/CheckpointPrizes-Field.module.scss

@@ -61,3 +61,42 @@
   color: $tc-red;
   cursor: pointer;
 }
+
+.dollarIcon {
+  margin-left: 10px;
+  color: $tc-black;
+  cursor: pointer;
+}
+
+.checkpointPrizeContainer {
+  margin: 30px 0 0 60px;
+}
+
+.checkpointLabel {
+  font-weight: 500 !important;
+  padding-left: 0 !important;
+}
+
+.checkpointPrizeContainer > div {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.checkpointPrizeInputContainer {
+  box-sizing: border-box;
+  display: flex;
+  height: 40px;
+}
+
+.checkpointPrizeAmountContainer {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: $tc-prize-bg;
+  border: 1px solid $tc-gray-40;
+  max-width: 50px;
+  min-width: 50px;
+  width: 50px;
+  border-right-width: 0;
+}

src/components/ChallengeEditor/CheckpointPrizes-Field/index.js

@@ -2,37 +2,91 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './CheckpointPrizes-Field.module.scss'
 import cn from 'classnames'
-import { range } from 'lodash'
+import _ from 'lodash'
 import { validateValue } from '../../../util/input-check'
-import { VALIDATION_VALUE_TYPE, PRIZE_SETS_TYPE, CHALLENGE_PRIZE_TYPE } from '../../../config/constants'
+import {
+  VALIDATION_VALUE_TYPE,
+  PRIZE_SETS_TYPE,
+  CHALLENGE_PRIZE_TYPE,
+  MAX_CHECKPOINT_PRIZE_COUNT,
+  DEFAULT_CHECKPOINT_PRIZE
+} from '../../../config/constants'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faDollarSign } from '@fortawesome/free-solid-svg-icons'
+import Select from '../../Select'
 
-const CheckpointPrizesField = ({ challenge, onUpdateOthers }) => {
+const CheckpointPrizesField = ({ challenge, onUpdateOthers, readOnly }) => {
   const type = PRIZE_SETS_TYPE.CHECKPOINT_PRIZES
-  const checkpointPrize = challenge.prizeSets.find(p => p.type === type) || { type: CHALLENGE_PRIZE_TYPE.USD, prizes: [] }
-  const number = checkpointPrize.prizes.length
-  const amount = checkpointPrize.prizes.length ? checkpointPrize.prizes[0].value : 0
+  const prizeSets = _.get(challenge, 'prizeSets') || []
+  const checkpointPrize = prizeSets.find(p => p.type === type) || { type: PRIZE_SETS_TYPE.CHECKPOINT_PRIZES, prizes: [], 'description': 'Checkpoint Prizes' }
+  const number = _.get(checkpointPrize, 'prizes.length') || MAX_CHECKPOINT_PRIZE_COUNT
+  const amount = _.get(checkpointPrize, 'prizes.length') ? checkpointPrize.prizes[0].value : DEFAULT_CHECKPOINT_PRIZE
+
+  // update the check point prize with default values if it's not already defined
+  if (_.get(checkpointPrize, 'prizes.length') === 0) {
+    onChange(number, amount)
+  }
 
   function onChange (number, amount) {
-    checkpointPrize.prizes = range(validateValue(number, VALIDATION_VALUE_TYPE.INTEGER))
-      .map(i => ({ type: CHALLENGE_PRIZE_TYPE.USD, value: validateValue(amount, VALIDATION_VALUE_TYPE.INTEGER, '$') }))
-    onUpdateOthers({ field: 'prizeSets', value: [...challenge.prizeSets.filter(p => p.type !== type), +number && checkpointPrize].filter(p => p) })
+    checkpointPrize.prizes = _.range(validateValue(number, VALIDATION_VALUE_TYPE.INTEGER))
+      .map(i => ({ type: CHALLENGE_PRIZE_TYPE.USD, value: +validateValue(amount, VALIDATION_VALUE_TYPE.INTEGER) }))
+    onUpdateOthers({ field: 'prizeSets', value: [...prizeSets.filter(p => p.type !== type), +number && checkpointPrize].filter(p => p) })
   }
+
   return (
-    <div className={styles.row}>
-      <div className={cn(styles.field, styles.col1)}>
-        <label htmlFor='checkpointPrizes'>Checkpoint Prizes :</label>
-      </div>
-      <div className={cn(styles.field, styles.col2)}>
-        <input id='checkNumber' name='checkNumber' type='text' placeholder='Number of checkpoint prizes' value={number} maxLength='200' onChange={e => onChange(e.target.value, amount)} />
-        <input id='checkAmount' name='checkAmount' type='text' placeholder='Amount per prizes' value={amount} maxLength='200' onChange={e => onChange(number, e.target.value)} />
+    <>
+      <div className={cn(styles.row)}>
+        <div className={cn(styles.field, styles.col1)}>
+          <label htmlFor={`checkpointPrizes`} className={styles.checkpointLabel}>Checkpoint Prizes :</label>
+        </div>
       </div>
-    </div>
+      {
+        readOnly ? (
+          <div className={styles.checkpointPrizeContainer}>
+            ${amount} for each submission up to {number} submissions
+          </div>
+        ) : (
+          <div className={styles.checkpointPrizeContainer}>
+            <div>
+              Pay
+            </div>
+            <div>
+              <div className={styles.checkpointPrizeInputContainer}>
+                <div className={styles.checkpointPrizeAmountContainer}>
+                  <FontAwesomeIcon className={styles.dollarIcon} icon={faDollarSign} />
+                </div>
+                <input id='checkpointPrize' name='checkpointPrize' type='text' placeholder='' value={amount} maxLength='7' required onChange={(e) => onChange(number, e.target.value)} />
+              </div>
+            </div>
+            <div>
+              for each submission up to
+            </div>
+            <div>
+              <Select
+                name='submissions'
+                options={_.range(1, MAX_CHECKPOINT_PRIZE_COUNT + 1).map((v) => ({ label: v, value: v }))}
+                value={{ label: number, value: number }}
+                isClearable={false}
+                onChange={e => onChange(e.value, amount)}
+                isDisabled={false}
+              />
+            </div>
+
+          </div>
+        )
+      }
+    </>
   )
 }
 
+CheckpointPrizesField.defaultProps = {
+  readOnly: false
+}
+
 CheckpointPrizesField.propTypes = {
   challenge: PropTypes.shape().isRequired,
-  onUpdateOthers: PropTypes.func.isRequired
+  onUpdateOthers: PropTypes.func,
+  readOnly: PropTypes.bool
 }
 
 export default CheckpointPrizesField

src/components/ChallengeEditor/Description-Field/index.js

@@ -5,6 +5,7 @@ import SimpleMDE from 'simplemde'
 import marked from 'marked'
 import cn from 'classnames'
 import _ from 'lodash'
+import { MULTI_ROUND_CHALLENGE_DESC_TEMPLATE, MULTI_ROUND_CHALLENGE_TEMPLATE_ID } from '../../../config/constants'
 
 class DescriptionField extends Component {
   constructor (props) {
@@ -15,6 +16,7 @@ class DescriptionField extends Component {
     }
     this.blurTheField = this.blurTheField.bind(this)
     this.updateDescriptionThrottled = _.throttle(this.updateDescription.bind(this), 10000) // 10s
+    this.onChange = this.onChange.bind(this)
   }
 
   blurTheField () {
@@ -27,13 +29,29 @@ class DescriptionField extends Component {
     onUpdateDescription(this.simplemde.value(), type)
   }
 
+  onChange (type) {
+    this.setState({ isChanged: true })
+    this.updateDescriptionThrottled(this.simplemde.value(), type)
+  }
+
   componentDidMount () {
     const { challenge, type, readOnly } = this.props
+
     if (!readOnly) {
-      this.simplemde = new SimpleMDE({ element: this.ref.current, initialValue: challenge[type] })
+      let initialValue = challenge[type]
+      const updateInitialValue = challenge.timelineTemplateId === MULTI_ROUND_CHALLENGE_TEMPLATE_ID && (
+        !initialValue || initialValue.length === 0
+      )
+      if (updateInitialValue) {
+        initialValue = MULTI_ROUND_CHALLENGE_DESC_TEMPLATE
+      }
+
+      this.simplemde = new SimpleMDE({ element: this.ref.current, initialValue })
+      if (updateInitialValue) {
+        this.onChange(type)
+      }
       this.simplemde.codemirror.on('change', () => {
-        this.setState({ isChanged: true })
-        this.updateDescriptionThrottled(this.simplemde.value(), type)
+        this.onChange(type)
       })
       this.simplemde.codemirror.on('blur', () => {
         if (this.state.isChanged) {