[PROD] Beta Release 0.5.0

src/components/ChallengeEditor/ChallengeView/index.js

@@ -21,6 +21,7 @@ import PhaseInput from '../../PhaseInput'
 import LegacyLinks from '../../LegacyLinks'
 import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
+import { isBetaMode } from '../../../util/cookie'
 import { loadGroupDetails } from '../../../actions/challenges'
 import Tooltip from '../../Tooltip'
 import { MESSAGE, REVIEW_TYPES } from '../../../config/constants'
@@ -37,7 +38,8 @@ const ChallengeView = ({
   assignedMemberDetails,
   enableEdit,
   onLaunchChallenge,
-  onCloseTask }) => {
+  onCloseTask
+}) => {
   const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
 
@@ -148,7 +150,6 @@ const ChallengeView = ({
                 <span><span className={styles.fieldTitle}>Challenge Name:</span> {challenge.name}</span>
               </div>
             </div>
-            <NDAField challenge={challenge} readOnly />
             {isTask && <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly /> }
             <CopilotField challenge={{
               copilot
@@ -179,11 +180,26 @@ const ChallengeView = ({
                 </label>
               </div>
             </div>
-            {openAdvanceSettings && (<div className={cn(styles.row, styles.topRow)}>
-              <div className={styles.col}>
-                <span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
-              </div>
-            </div>)}
+            {openAdvanceSettings && (
+              <>
+                <NDAField beta challenge={challenge} readOnly />
+                <div className={cn(styles.row, styles.topRow)}>
+                  <div className={styles.col}>
+                    <span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
+                  </div>
+                </div>
+                {isBetaMode() && (
+                  <div className={styles.row}>
+                    <div className={styles.col}>
+                      <span>
+                        <span className={styles.fieldTitle}>Billing Account Id:</span>
+                        {projectDetail.billingAccountId}
+                      </span>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
             {
               <div className={styles.PhaseRow}>
                 <PhaseInput

src/components/ChallengeEditor/NDAField/NDAField.module.scss

@@ -8,18 +8,114 @@
   align-content: space-between;
   justify-content: flex-start;
 
-  .tcCheckbox {
-    @include tc-checkbox;
+  .fieldTitle {
+    @include roboto-bold();
+    font-size: 16px;
+    line-height: 19px;
+    font-weight: 500;
+    color: $tc-gray-80;
+    margin-right: 10px;
+  }
+
+  .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;
+      margin-bottom: auto;
+      margin-top: auto;
+      padding-top: 10px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      span {
+        color: $tc-red;
+      }
+    }
+
+    &.col2 {
+      align-self: flex-end;
+      width: 80%;
+      margin-bottom: auto;
+      margin-top: auto;
+      display: flex;
+      flex-direction: row;
+      max-width: 600px;
+      min-width: 600px;
+    }
+  }
+
+  .col1 {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    max-width: 0;
+    min-width: 0;
+    margin-right: 0;
+    width: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  .col2 {
+    width: auto;
+
+    .subGroup {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .subRow {
+        display: flex;
+        align-items: center;
+        margin-bottom: 18px;
+      }
+
+      .subRow:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .tcRadioButton {
+    .tc-radioButton-label {
+      @include roboto-light();
+
+      line-height: 17px;
+      font-weight: 300;
+      margin-left: 21px;
+      user-select: none;
+      cursor: pointer;
+      width: 195px;
+      font-size: 14px;
+      color: #3d3d3d;
+    }
 
     height: 18px;
-    width: 210px;
+    width: 80px;
     margin: 0;
     padding: 0;
     vertical-align: bottom;
     position: relative;
     display: inline-block;
 
-    input[type='checkbox'] {
+    input[type=radio] {
       display: none;
     }
 
@@ -31,54 +127,52 @@
       cursor: pointer;
       position: absolute;
       display: inline-block;
-      width: 14px;
-      height: 14px;
+      width: 16px;
+      height: 16px;
+      border-radius: 8px;
       top: 0;
       left: 0;
       border: none;
       box-shadow: none;
       background: $tc-gray-30;
       transition: all 0.15s ease-in-out;
 
-
-      &.readOnly {
-        cursor: auto;
-      }
-
       &::after {
         opacity: 0;
         content: '';
         position: absolute;
-        width: 9px;
-        height: 5px;
+        width: 8px;
+        height: 8px;
         background: transparent;
-        top: 2px;
-        left: 2px;
-        border-top: none;
-        border-right: none;
-        transform: rotate(-45deg);
+        top: 4px;
+        left: 4px;
+        border: 4px solid $tc-blue-20;
+        border-radius: 4px;
         transition: all 0.15s ease-in-out;
       }
 
       &:hover::after {
         opacity: 0.3;
       }
-      &:hover:read-only::after {
-        opacity: 0;
-      }
 
       div {
         margin-left: 24px;
         width: 300px;
       }
     }
 
-    input[type='checkbox']:checked ~ label {
+    input[type=radio]:checked ~ label {
       background: $tc-blue-20;
     }
 
-    input[type='checkbox']:checked + label::after {
+    input[type=radio]:checked + label::after {
+      opacity: 1;
       border-color: $white;
     }
   }
+
+  &.error {
+    color: $tc-red;
+    margin-top: -25px;
+  }
 }

src/components/ChallengeEditor/NDAField/index.js

@@ -1,26 +1,52 @@
 import _ from 'lodash'
 import React from 'react'
 import PropTypes from 'prop-types'
+import cn from 'classnames'
 import styles from './NDAField.module.scss'
 import { DEFAULT_NDA_UUID } from '../../../config/constants'
 
 const NDAField = ({ challenge, toggleNdaRequire, readOnly }) => {
   const isRequiredNda = challenge.terms && _.some(challenge.terms, { id: DEFAULT_NDA_UUID })
+
+  if (readOnly) {
+    return (
+      <div className={styles.row}>
+        <div className={cn(styles.field, styles.col1, styles.fieldTitle)}>NDA Required :</div>
+        <div className={cn(styles.field, styles.col2)}>
+          { isRequiredNda ? 'Yes' : 'No' }
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className={styles.row}>
-      <div className={styles.tcCheckbox}>
-        <input
-          name='isRequiredNda'
-          type='checkbox'
-          id='isRequiredNda'
-          checked={isRequiredNda}
-          onChange={toggleNdaRequire}
-          readOnly={readOnly}
-        />
-        <label htmlFor='isRequiredNda' className={readOnly ? styles.readOnly : ''}>
-          <div>NDA Required</div>
-          <input type='hidden' />
-        </label>
+      <div className={cn(styles.field, styles.col1, styles.fieldTitle)}>NDA Required :</div>
+      <div className={cn(styles.field, styles.col2)}>
+        <div className={styles.tcRadioButton}>
+          <input
+            name='nda'
+            type='radio'
+            id='nda-yes'
+            checked={isRequiredNda}
+            onChange={toggleNdaRequire}
+          />
+          <label className={styles['tc-RadioButton-label']} htmlFor='nda-yes'>
+            <div>Yes</div>
+          </label>
+        </div>
+        <div className={styles.tcRadioButton}>
+          <input
+            name='nda'
+            type='radio'
+            id='nda-no'
+            checked={!isRequiredNda}
+            onChange={toggleNdaRequire}
+          />
+          <label className={styles['tc-RadioButton-label']} htmlFor='nda-no'>
+            <div>No</div>
+          </label>
+        </div>
       </div>
     </div>
   )

src/components/ChallengeEditor/index.js

@@ -50,6 +50,7 @@ import LegacyLinks from '../LegacyLinks'
 import AssignedMemberField from './AssignedMember-Field'
 import Tooltip from '../Tooltip'
 import { getResourceRoleByName } from '../../util/tc'
+import { isBetaMode } from '../../util/cookie'
 
 const theme = {
   container: styles.modalContainer
@@ -195,7 +196,8 @@ class ChallengeEditor extends Component {
         challengeData.copilot = copilot || copilotFromResources
         challengeData.reviewer = reviewer || reviewerFromResources
         const challengeDetail = { ...challengeData }
-        const isOpenAdvanceSettings = challengeDetail.groups.length > 0
+        const isRequiredNda = challengeDetail.terms && _.some(challengeDetail.terms, { id: DEFAULT_NDA_UUID })
+        const isOpenAdvanceSettings = challengeDetail.groups.length > 0 || isRequiredNda
         setState({
           challenge: challengeDetail,
           assignedMemberDetails,
@@ -809,7 +811,7 @@ class ChallengeEditor extends Component {
 
   async createNewChallenge () {
     if (!this.props.isNew) return
-    const { metadata, createChallenge } = this.props
+    const { metadata, createChallenge, projectDetail } = this.props
     const { name, trackId, typeId } = this.state.challenge
     const { timelineTemplates } = metadata
     const isDesignChallenge = trackId === DES_TRACK_ID
@@ -838,6 +840,14 @@ class ChallengeEditor extends Component {
       terms: [{ id: DEFAULT_TERM_UUID, roleId: SUBMITTER_ROLE_UUID }]
       // prizeSets: this.getDefaultPrizeSets()
     }
+    if (isBetaMode() && projectDetail.terms) {
+      const currTerms = new Set(newChallenge.terms.map(term => term.id))
+      newChallenge.terms.push(
+        ...projectDetail.terms
+          .filter(term => !currTerms.has(term))
+          .map(term => ({ id: term, roleId: SUBMITTER_ROLE_UUID }))
+      )
+    }
     const discussions = this.getDiscussionsConfig(newChallenge)
     if (discussions) {
       newChallenge.discussions = discussions
@@ -1359,7 +1369,6 @@ class ChallengeEditor extends Component {
               </div>
             </div>
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
-            <NDAField challenge={challenge} toggleNdaRequire={this.toggleNdaRequire} />
             {isTask && (
               <AssignedMemberField
                 challenge={challenge}
@@ -1392,9 +1401,20 @@ class ChallengeEditor extends Component {
             </div>
             { isOpenAdvanceSettings && (
               <React.Fragment>
+                <NDAField challenge={challenge} toggleNdaRequire={this.toggleNdaRequire} />
                 {/* remove terms field and use default term */}
                 {false && (<TermsField terms={metadata.challengeTerms} challenge={challenge} onUpdateMultiSelect={this.onUpdateMultiSelect} />)}
                 <GroupsField onUpdateMultiSelect={this.onUpdateMultiSelect} challenge={challenge} />
+                {isBetaMode() && (
+                  <div className={styles.row}>
+                    <div className={styles.col}>
+                      <span>
+                        <span className={styles.fieldTitle}>Billing Account Id:</span>
+                        {projectDetail.billingAccountId}
+                      </span>
+                    </div>
+                  </div>
+                )}
               </React.Fragment>
             )}
             {!isTask && (