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 && (