Merge pull request #1211 from appirio-tech/feature/second-level-project-category-performance

Feature/second level project category performance

Author: vikasrohit

src/projects/create/components/FillProjectDetails.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import React, { PropTypes as PT, Component } from 'react'
+import { Link } from 'react-router'
 import Sticky from 'react-stickynode'
 
 import config from '../../../config/projectWizard'
@@ -34,9 +35,9 @@ class FillProjectDetails extends Component  {
 
   render() {
     const { project, dirtyProject, processing, submitBtnText, userRoles } = this.props
+    const isLoggedIn = userRoles && userRoles.length
+    const logoTargetUrl = isLoggedIn ? '/projects' : '/'
     const product = _.get(project, 'details.products[0]')
-    // const projectName = _.get(project, 'name')
-    // const projectRef = _.get(project, 'details.utm.code', '')
     const projectTypeId = _.get(project, 'type')
     const subConfig = config[_.findKey(config, {id : projectTypeId})]
     const productName = _.findKey(subConfig.subtypes, {id : product})
@@ -48,8 +49,8 @@ class FillProjectDetails extends Component  {
     return (
       <div className="FillProjectDetailsWrapper">
         <div className="header headerFillProjectDetails">
-          { (!userRoles || !userRoles.length) && <SVGIconImage filePath="connect-logo-mono" className="connectLogo" />}
-          { (!userRoles || !userRoles.length) && <button className="tc-btn tc-btn-default tc-btn-sm" onClick={ this.props.onChangeProjectType }><SVGIconImage filePath="arrows-undo" />Change project type</button> }
+          { !isLoggedIn && <Link className="logo" to={logoTargetUrl} target="_self"><SVGIconImage filePath="connect-logo-mono" className="connectLogo"/></Link>}
+          { !isLoggedIn && <button className="tc-btn tc-btn-default tc-btn-sm" onClick={ this.props.onChangeProjectType }><SVGIconImage filePath="arrows-undo" />Change project type</button> }
         </div>
         <div className="FillProjectDetails">
           <div className="header">

src/projects/create/components/IncompleteProjectConfirmation.js

@@ -1,13 +1,15 @@
 import React, { PropTypes as PT } from 'react'
+import { Link } from 'react-router'
 import SVGIconImage from '../../../components/SVGIconImage'
 import './IncompleteProjectConfirmation.scss'
 
-function IncompleteProjectConfirmation({ loadIncompleteProject, removeIncompleteProject }) {
-  
+function IncompleteProjectConfirmation({ loadIncompleteProject, removeIncompleteProject, userRoles }) {
+  const isLoggedIn = userRoles && userRoles.length
+  const logoTargetUrl = isLoggedIn ? '/projects' : '/'
   return (
     <div className="IncompleteProjectConfirmation">
       <div className="header">
-        <SVGIconImage filePath="connect-logo-mono" />
+        { !isLoggedIn && <Link className="logo" to={logoTargetUrl} target="_self"><SVGIconImage filePath="connect-logo-mono" className="connectLogo"/></Link>}
       </div>
       <h3>Welcome back!</h3>
       <h5>You started a project with us recently.</h5>

src/projects/create/components/ProjectWizard.jsx

@@ -161,7 +161,6 @@ class ProjectWizard extends Component {
     window.scrollTo(0, 0)
     const { onStepChange, onProjectUpdate } = this.props
     const products = findProductsOfCategory(projectType)
-    console.log(products, 'products')
     const updateQuery = { }
     // restore common fields from dirty project
     // this.restoreCommonDetails(products, updateQuery, detailsQuery)
@@ -325,9 +324,11 @@ class ProjectWizard extends Component {
         <IncompleteProjectConfirmation
           loadIncompleteProject={ this.loadIncompleteProject }
           removeIncompleteProject={ this.removeIncompleteProject }
+          userRoles={ userRoles }
         />
         <SelectProjectType
           onProjectTypeChange={ this.updateProjectType }
+          userRoles={ userRoles }
         />
         <SelectProduct
           onProductChange={ this.updateProducts }

src/projects/create/components/SelectProduct.js

@@ -1,4 +1,5 @@
 import React, { PropTypes as PT } from 'react'
+import { Link } from 'react-router'
 import config from '../../../config/projectWizard'
 import ProductCard from './ProductCard'
 import SVGIconImage from '../../../components/SVGIconImage'
@@ -7,6 +8,8 @@ import './SelectProduct.scss'
 
 function SelectProduct(props) {
   const { userRoles, projectType, onChangeProjectType } = props
+  const isLoggedIn = userRoles && userRoles.length
+  const logoTargetUrl = isLoggedIn ? '/projects' : '/'
   const cards = []
   for (const key in config) {
     const type = config[key]
@@ -33,8 +36,8 @@ function SelectProduct(props) {
   return (
     <div>
       <div className="header headerSelectProduct">
-        { (!userRoles || !userRoles.length) && <SVGIconImage filePath="connect-logo-mono" />}
-        { (!userRoles || !userRoles.length) && <button className="tc-btn tc-btn-default tc-btn-sm" onClick={ onChangeProjectType }><SVGIconImage filePath="arrows-undo" />Change project type</button> }
+        { !isLoggedIn && <Link className="logo" to={logoTargetUrl} target="_self"><SVGIconImage filePath="connect-logo-mono" className="connectLogo"/></Link>}
+        { !isLoggedIn && <button className="tc-btn tc-btn-default tc-btn-sm" onClick={ onChangeProjectType }><SVGIconImage filePath="arrows-undo" />Change project type</button> }
       </div>
       <div className="SelectProduct">
         <h1> { projectCategory.name } projects </h1>

src/projects/create/components/SelectProjectType.jsx

@@ -1,4 +1,5 @@
 import React, { PropTypes as PT } from 'react'
+import { Link } from 'react-router'
 import config from '../../../config/projectWizard'
 import ProjectTypeCard from './ProjectTypeCard'
 import SVGIconImage from '../../../components/SVGIconImage'
@@ -7,6 +8,8 @@ import './SelectProjectType.scss'
 
 function SelectProjectType(props) {
   const { userRoles } = props
+  const isLoggedIn = userRoles && userRoles.length
+  const logoTargetUrl = isLoggedIn ? '/projects' : '/'
   const cards = []
   for (const key in config) {
     const item = config[key]
@@ -26,7 +29,7 @@ function SelectProjectType(props) {
   return (
     <div>
       <div className="header headerSelectProjectType">
-        { (!userRoles || !userRoles.length) && <SVGIconImage filePath="connect-logo-mono" className="connectLogo"/>}
+        { !isLoggedIn && <Link className="logo" to={logoTargetUrl} target="_self"><SVGIconImage filePath="connect-logo-mono" className="connectLogo"/></Link>}
       </div>
       <div className="SelectProjectType">
         <h1>Create a new project</h1>

src/projects/list/components/Projects/ProjectsView.jsx

@@ -10,6 +10,7 @@ import Walkthrough from '../Walkthrough/Walkthrough'
 
 import UserWithName from '../../../../components/User/UserWithName'
 import CoderBot from '../../../../components/CoderBot/CoderBot'
+import { findCategory } from '../../../../config/projectWizard'
 import { ROLE_CONNECT_MANAGER, ROLE_CONNECT_COPILOT, PROJECT_STATUS } from '../../../../config/constants'
 
 // This handles showing a spinner while the state is being loaded async
@@ -32,17 +33,15 @@ const EnhancedGrid = enhance(GridView)
 require('./ProjectsView.scss')
 
 /*eslint-disable quote-props */
-const projectTypeMap = {
-  'generic': 'Work Project',
-  'visual_design': 'Design',
-  'visual_prototype': 'Design & Prototype',
-  'app_dev': 'Full App'
-}
 const projectTypeClassMap = {
-  'generic': 'purple-block',
-  'visual_design': 'blue-block',
-  'visual_prototype': 'blue-block',
-  'app_dev': 'green-block'
+  'generic'             : 'purple-block',
+  'visual_design'       : 'blue-block',
+  'visual_prototype'    : 'blue-block',
+  'app_dev'             : 'green-block',
+  'app'                 : 'green-block',
+  'website'             : 'green-block',
+  'chatbot'             : 'green-block',
+  'quality_assurance'   : 'green-block',
 }
 /*eslint-enable */
 
@@ -79,11 +78,12 @@ const ProjectsView = props => {
         const url = `/projects/${item.id}`
         const code = _.get(item, 'details.utm.code', '')
         const projectTypeClass = projectTypeClassMap[item.type]
+        const projectType = _.get(findCategory(item.type), 'name', '')
         return (
           <div className="spacing">
             <Link to={url} className="link-title">{item.name}</Link>
             <div className="project-metadata">
-              <span className={ projectTypeClass }>{projectTypeMap[item.type]}</span>
+              <span className={ projectTypeClass }>{ projectType }</span>
               { code && <span className="item-ref-code txt-gray-md">Ref: {code}</span> }
               <span className="txt-time">{moment(item.createdAt).format('DD MMM YYYY')}</span>
             </div>