Merge branch 'dev' of github.com:appirio-tech/connect-app into dev

Author: maxceem

src/components/Select/FormsySelect.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { HOC as hoc } from 'formsy-react'
+
+import Select from './Select'
+
+/**
+ * This component is a formsy wrapper for the Select component
+ * @param {Object} props Component props
+ */
+const FormsySelect = props => {
+  // when setValueOnly is set to true, formsy should submit the 'option.value' instead of the whole 'option' object
+  const { onChange, setValueOnly, options } = props
+  const selectedOption = props.getValue()
+
+  const onSelectionChange = selectedOption => {
+    props.setValue(setValueOnly ? selectedOption.value : selectedOption)
+    onChange && onChange(selectedOption)
+  }
+  const value = setValueOnly
+    ? _.find(options, o => o.value === selectedOption)
+    : selectedOption
+
+  return <Select {...props} value={value} onChange={onSelectionChange} />
+}
+
+FormsySelect.PropTypes = {
+  onChange: PropTypes.func,
+  setValueOnly: PropTypes.bool,
+  options: PropTypes.array.isRequired
+}
+
+export default hoc(FormsySelect)

src/projects/create/components/HeaderWithProgress.js

@@ -20,9 +20,7 @@ function HeaderWithProgress({project, template, currentWizardStep, hidePrice}) {
       <div styleName="content">
         <div styleName="title-estimate">
           <h3>{currentStep.title}</h3>
-          { !hidePrice ?
-            <div>From ${numberWithCommas(priceEstimate)}</div> : ''
-          }
+          { false && !hidePrice && (<div>From ${numberWithCommas(priceEstimate)}</div>) }
         </div>
         <div styleName="progress-bar">
           <div styleName="progress" style={{width: (progress*100)+'%'}} />

src/projects/create/components/ProjectEstimation.js

@@ -67,7 +67,7 @@ function ProjectEstimation({
           return renderBlock({ ...item, duration: duration ? duration : null })
         })}
       </ul>
-      {showPrice && (
+      { false && showPrice && (
         <h3>Our estimate is from <span>$</span>{numberWithCommas(priceEstimate)}</h3>
       )}
     </div>

src/projects/detail/components/ProjectEstimationSection/ProjectEstimationSection.jsx

@@ -4,14 +4,10 @@ import PropTypes from 'prop-types'
 import { withRouter } from 'react-router-dom'
 import { connect } from 'react-redux'
 import cn from 'classnames'
-import Sticky from '../../../components/Sticky'
-import MediaQuery from 'react-responsive'
 import SidebarNav from './SidebarNav'
-import { PROJECT_ROLE_OWNER, PROJECT_ROLE_CUSTOMER, SCREEN_BREAKPOINT_MD } from '../../../config/constants'
+import { PROJECT_ROLE_OWNER, PROJECT_ROLE_CUSTOMER } from '../../../config/constants'
 import { updateProject } from '../../actions/project'
-import { isProjectEstimationPresent } from '../../../helpers/projectHelper'
 import ReviewProjectButton from './ReviewProjectButton'
-import ProjectEstimationSection from './ProjectEstimationSection'
 import './ProjectSpecSidebar.scss'
 
 const calcProgress = (project, subSection) => {
@@ -119,17 +115,13 @@ class ProjectSpecSidebar extends Component {
     const showReviewBtn = project.status === 'draft' &&
       _.indexOf([PROJECT_ROLE_OWNER, PROJECT_ROLE_CUSTOMER], currentMemberRole) > -1
 
-    const hasEstimation = isProjectEstimationPresent(project)
-
     return (
       <div className={cn('projectSpecSidebar', { 'has-review-btn': showReviewBtn })}>
         <h4 className="titles gray-font">Sections</h4>
         <div className="list-group">
           <SidebarNav items={navItems} />
         </div>
 
-        {hasEstimation && <ProjectEstimationSection project={project} />}
-
         { showReviewBtn &&
         <div>
           <div className="text-box">
@@ -147,17 +139,6 @@ class ProjectSpecSidebar extends Component {
           />
         </div>
         }
-        {!showReviewBtn && hasEstimation &&
-          <MediaQuery maxWidth={SCREEN_BREAKPOINT_MD - 1}>
-            <div className="sticky-estimation-only">
-              <Sticky top={0}>
-                <div className="btn-boxs">
-                  <ProjectEstimationSection project={project} />
-                </div>
-              </Sticky>
-            </div>
-          </MediaQuery>
-        }
       </div>
     )
   }

src/projects/detail/components/ProjectEstimationSection/ProjectEstimationSection.scss

@@ -8,46 +8,21 @@ import React from 'react'
 import PT from 'prop-types'
 import cn from 'classnames'
 
-import Sticky from 'react-stickynode'
-import MediaQuery from 'react-responsive'
-import ProjectEstimationSection from '../ProjectEstimationSection'
-import { SCREEN_BREAKPOINT_MD } from '../../../../config/constants'
-import { isProjectEstimationPresent } from '../../../../helpers/projectHelper'
-
 import './ReviewProjectButton.scss'
 
-const ReviewProjectButton = ({ project, disabled, onClick, wrapperClass }) => {
+const ReviewProjectButton = ({ disabled, onClick, wrapperClass }) => {
   const submitButton = (
     <button className="tc-btn tc-btn-primary tc-btn-md"
       onClick={onClick}
       disabled={disabled}
     >Submit for Review</button>
   )
 
-  const hasEstimation = isProjectEstimationPresent(project)
-
   return (
     <div styleName={cn('container', wrapperClass)}>
-      <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
-        {(matches) => {
-          if (matches) {
-            return (
-              <div className="btn-boxs">
-                {submitButton}
-              </div>
-            )
-          } else {
-            return (
-              <Sticky top={0}>
-                <div className={cn('btn-boxs', { 'has-estimation': hasEstimation })}>
-                  {hasEstimation && <ProjectEstimationSection project={project} />}
-                  {submitButton}
-                </div>
-              </Sticky>
-            )
-          }
-        }}
-      </MediaQuery>
+      <div className="btn-boxs">
+        {submitButton}
+      </div>
     </div>
   )
 }
@@ -58,7 +33,7 @@ ReviewProjectButton.defaultProps =  {
 
 ReviewProjectButton.propTypes = {
   disabled: PT.bool,
-  project: PT.object.isRequired,
+  project: PT.object,
   onClick: PT.func.isRequired,
   wrapperClass: PT.string
 }

src/projects/detail/components/ProjectEstimationSection/index.js

@@ -9,11 +9,13 @@
   flex-grow: 1;
   margin: auto;
   margin-top: 20px;
+  margin-bottom: 260px; // gives space to show country selection list
 
   @media screen and (max-width: $screen-md - 1px) {
     padding: 0;
     margin: 0;
     max-width: none;
+    margin-bottom: 260px; // gives space to show country selection list in mobile view
   }
 }