Merge pull request #1201 from topcoder-platform/develop

Prod Release - Registrations and Submissions for Challenges

Author: vikasrohit

.circleci/config.yml

@@ -81,8 +81,7 @@ workflows:
           context : org-global
           filters:
             branches:
-              only:
-                - develop
+              only: ['develop', 'feature/bug-bash-jun']
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/constants/development.js

@@ -18,8 +18,11 @@ module.exports = {
   TERMS_API_URL: `${DEV_API_HOSTNAME}/v5/terms`,
   RESOURCES_API_URL: `${DEV_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${DEV_API_HOSTNAME}/v5/resource-roles`,
+  SUBMISSIONS_API_URL: `${DEV_API_HOSTNAME}/v5/submissions`,
   PLATFORMS_V4_API_URL: `${DEV_API_HOSTNAME}/v4/platforms`,
   TECHNOLOGIES_V4_API_URL: `${DEV_API_HOSTNAME}/v4/technologies`,
+  SUBMISSION_REVIEW_APP_URL: `https://submission-review.${DOMAIN}/challenges`,
+  STUDIO_URL: `https://studio.${DOMAIN}`,
   CONNECT_APP_URL: `https://connect.${DOMAIN}`,
   DIRECT_PROJECT_URL: `https://www.${DOMAIN}/direct`,
   ONLINE_REVIEW_URL: `https://software.${DOMAIN}`,

config/constants/production.js

@@ -18,8 +18,11 @@ module.exports = {
   TERMS_API_URL: `${PROD_API_HOSTNAME}/v5/terms`,
   RESOURCES_API_URL: `${PROD_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${PROD_API_HOSTNAME}/v5/resource-roles`,
+  SUBMISSIONS_API_URL: `${PROD_API_HOSTNAME}/v5/submissions`,
   PLATFORMS_V4_API_URL: `${PROD_API_HOSTNAME}/v4/platforms`,
   TECHNOLOGIES_V4_API_URL: `${PROD_API_HOSTNAME}/v4/technologies`,
+  SUBMISSION_REVIEW_APP_URL: `https://submission-review.${DOMAIN}/challenges`,
+  STUDIO_URL: `https://studio.${DOMAIN}`,
   CONNECT_APP_URL: `https://connect.${DOMAIN}`,
   DIRECT_PROJECT_URL: `https://www.${DOMAIN}/direct`,
   ONLINE_REVIEW_URL: `https://software.${DOMAIN}`,

package.json

@@ -63,6 +63,7 @@
     "prop-types": "^15.6.2",
     "qs": "^6.7.0",
     "query-string": "^6.12.1",
+    "rc-dropdown": "^3.2.0",
     "rc-time-picker": "^3.6.4",
     "react": "^16.7.0",
     "react-app-polyfill": "^0.2.0",

src/actions/challengeSubmissions.js

@@ -0,0 +1,14 @@
+import { fetchSubmissions } from '../services/challenges'
+
+import { LOAD_CHALLENGE_SUBMISSIONS } from '../config/constants'
+
+export function loadSubmissions (challengeId) {
+  return dispatch => {
+    if (challengeId) {
+      dispatch({
+        type: LOAD_CHALLENGE_SUBMISSIONS,
+        payload: fetchSubmissions(challengeId)
+      })
+    }
+  }
+}

src/assets/images/arrow-down.svg

@@ -0,0 +1,142 @@
+@import "../../../styles/includes";
+
+.menus {
+  outline: none;
+  position: relative;
+  list-style-type: none;
+  padding: 0;
+  margin: 2px 0 0 0;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 5px #ccc;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+  cursor: pointer;
+
+  .menu {
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    &:hover {
+      background-color: #d5d5d5;
+    }
+  }
+}
+
+.pop-container {
+  height: 100%;
+}
+
+.modalContainer {
+  padding: 0;
+  position: fixed;
+  overflow: auto;
+  z-index: 10000;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: auto;
+  max-width: none;
+  transform: none;
+  background: transparent;
+  color: $text-color;
+  opacity: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .contentContainer {
+    box-sizing: border-box;
+    background: red;
+    opacity: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    border-radius: 6px;
+    margin: 0 auto;
+    width: 600px;
+    padding: 30px;
+
+    .content {
+      padding: 30px;
+      width: 100%;
+      height: 100%;
+    }
+
+    .title {
+      @include roboto-bold();
+
+      font-size: 30px;
+      line-height: 36px;
+      margin-bottom: 30px;
+      margin-top: 0;
+
+    }
+
+    span {
+      @include roboto;
+
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 26px;
+    }
+
+    &.confirm {
+      width: 999px;
+
+      .buttonGroup {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        .buttonSizeA {
+          width: 193px;
+          height: 40px;
+          margin-right: 33px;
+
+          span {
+            font-size: 18px;
+            font-weight: 500;
+          }
+        }
+
+        .buttonSizeB{
+          width: 160px;
+          height: 40px;
+
+          span {
+            font-size: 18px;
+            font-weight: 500;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    .buttonGroup {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 30px;
+
+      .button {
+        width: 135px;
+        height: 40px;
+        margin-right: 66px;
+
+        span {
+          font-size: 18px;
+          font-weight: 500;
+        }
+      }
+
+      .button:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}

src/assets/images/check-mark.svg

@@ -0,0 +1,74 @@
+import React, { useState, useRef } from 'react'
+import PropTypes from 'prop-types'
+import Dropdown from 'rc-dropdown'
+import styles from './Cancel-DropDown.module.scss'
+import { CANCEL_REASONS } from '../../../config/constants'
+import cn from 'classnames'
+import 'rc-dropdown/assets/index.css'
+import { PrimaryButton } from '../../Buttons'
+import ConfirmationModal from '../../Modal/ConfirmationModal'
+import _ from 'lodash'
+
+const theme = {
+  container: styles.modalContainer
+}
+const CancelDropDown = ({ challenge, onSelectMenu }) => {
+  const [cancelReason, setCancelReason] = useState('')
+  const [showModal, setShowModal] = useState(false)
+  const popupContainerEl = useRef(null)
+
+  const onSelect = v => {
+    setCancelReason(v)
+    setShowModal(true)
+  }
+
+  const menu = (
+    <div className={cn(styles['menus'])}>
+      {_.map(CANCEL_REASONS, r => {
+        return (
+          <div
+            className={styles.menu}
+            onClick={() => {
+              onSelect(r)
+            }}
+          >
+            {r}
+          </div>
+        )
+      })}
+    </div>
+  )
+
+  return (
+    <>
+      <Dropdown trigger={['click']} overlay={menu} animation='slide-up' getPopupContainer={() => {
+        return popupContainerEl.current
+      }}>
+        <div ref={popupContainerEl} className={styles['pop-container']}>
+          <PrimaryButton text={'Cancel'} type={'danger'} />
+        </div>
+      </Dropdown>
+      {showModal && (
+        <ConfirmationModal
+          message={'Do you want to cancel the challenge ?'}
+          theme={theme}
+          cancelText='Cancel'
+          confirmText='Continue'
+          onCancel={() => {
+            setShowModal(false)
+          }}
+          onConfirm={() => { onSelectMenu(challenge, cancelReason) }}
+        />
+      )}
+    </>
+  )
+}
+
+CancelDropDown.defaultProps = {}
+
+CancelDropDown.propTypes = {
+  challenge: PropTypes.shape().isRequired,
+  onSelectMenu: PropTypes.func.isRequired
+}
+
+export default CancelDropDown