diff --git a/src/components/ChallengeEditor/ChallengeView/index.js b/src/components/ChallengeEditor/ChallengeView/index.js index b34550c9..b9d14f53 100644 --- a/src/components/ChallengeEditor/ChallengeView/index.js +++ b/src/components/ChallengeEditor/ChallengeView/index.js @@ -9,6 +9,7 @@ import xss from 'xss' import { PrimaryButton } from '../../Buttons' import Track from '../../Track' import NDAField from '../NDAField' +import UseSchedulingAPIField from '../UseSchedulingAPIField' import CopilotField from '../Copilot-Field' import ChallengeScheduleField from '../ChallengeSchedule-Field' import TextEditorField from '../TextEditor-Field' @@ -198,6 +199,9 @@ const ChallengeView = ({ )} + {isBetaMode() && ( + + )} )} { diff --git a/src/components/ChallengeEditor/UseSchedulingAPIField/UseSchedulingAPIField.module.scss b/src/components/ChallengeEditor/UseSchedulingAPIField/UseSchedulingAPIField.module.scss new file mode 100644 index 00000000..e656d519 --- /dev/null +++ b/src/components/ChallengeEditor/UseSchedulingAPIField/UseSchedulingAPIField.module.scss @@ -0,0 +1,84 @@ +@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; + + .tcCheckbox { + @include tc-checkbox; + + height: 18px; + width: 210px; + margin: 0; + padding: 0; + vertical-align: bottom; + position: relative; + display: inline-block; + + input[type='checkbox'] { + display: none; + } + + label { + @include roboto-light(); + + line-height: 17px; + font-weight: 300; + cursor: pointer; + position: absolute; + display: inline-block; + width: 14px; + height: 14px; + 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; + background: transparent; + top: 2px; + left: 2px; + border-top: none; + border-right: none; + transform: rotate(-45deg); + 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 { + background: $tc-blue-20; + } + + input[type='checkbox']:checked + label::after { + border-color: $white; + } + } +} diff --git a/src/components/ChallengeEditor/UseSchedulingAPIField/index.js b/src/components/ChallengeEditor/UseSchedulingAPIField/index.js new file mode 100644 index 00000000..2941e1ba --- /dev/null +++ b/src/components/ChallengeEditor/UseSchedulingAPIField/index.js @@ -0,0 +1,39 @@ +import _ from 'lodash' +import React from 'react' +import PropTypes from 'prop-types' +import styles from './UseSchedulingAPIField.module.scss' + +const UseSchedulingAPIField = ({ challenge, toggleUseSchedulingAPI, readOnly }) => { + const useSchedulingAPI = _.get(challenge, 'legacy.useSchedulingAPI', false) + return ( +
+
+ + +
+
+ ) +} + +UseSchedulingAPIField.defaultProps = { + toggleUseSchedulingAPI: () => {}, + readOnly: false +} + +UseSchedulingAPIField.propTypes = { + challenge: PropTypes.shape().isRequired, + toggleUseSchedulingAPI: PropTypes.func, + readOnly: PropTypes.bool +} + +export default UseSchedulingAPIField diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js index b08a5bfa..75f8f723 100644 --- a/src/components/ChallengeEditor/index.js +++ b/src/components/ChallengeEditor/index.js @@ -49,6 +49,7 @@ import PhaseInput from '../PhaseInput' import LegacyLinks from '../LegacyLinks' import AssignedMemberField from './AssignedMember-Field' import Tooltip from '../Tooltip' +import UseSchedulingAPIField from './UseSchedulingAPIField' import { getResourceRoleByName } from '../../util/tc' import { isBetaMode } from '../../util/cookie' @@ -98,6 +99,7 @@ class ChallengeEditor extends Component { this.updateFileTypesMetadata = this.updateFileTypesMetadata.bind(this) this.toggleAdvanceSettings = this.toggleAdvanceSettings.bind(this) this.toggleNdaRequire = this.toggleNdaRequire.bind(this) + this.toggleUseSchedulingAPI = this.toggleUseSchedulingAPI.bind(this) this.removePhase = this.removePhase.bind(this) this.resetPhase = this.resetPhase.bind(this) this.savePhases = this.savePhases.bind(this) @@ -595,6 +597,14 @@ class ChallengeEditor extends Component { this.setState({ challenge: newChallenge }) } + toggleUseSchedulingAPI () { + const { challenge } = this.state + const newChallenge = { ...challenge } + const useSchedulingApi = !_.get(newChallenge, 'legacy.useSchedulingAPI', false) + _.set(newChallenge, 'legacy.useSchedulingAPI', useSchedulingApi) + this.setState({ challenge: newChallenge }) + } + /** * Remove Phase from challenge Phases list * @param index @@ -1415,6 +1425,9 @@ class ChallengeEditor extends Component { )} + {isBetaMode() && ( + + )} )} {!isTask && (