Skip to content

Commit e0ffb96

Browse files
author
Vikas Agarwal
committed
Squashed commit with resolved conflict
1 parent ef5c331 commit e0ffb96

16 files changed

+290
-44
lines changed

‎.circleci/config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ workflows:
7171
- test
7272
filters:
7373
branches:
74-
only: ['dev', 'feature/plan-timeline-events-settings']
74+
only: ['dev', 'feature/plan-timeline-events-settings', 'feature/loginFlow']
7575
- deployTest02:
7676
requires:
7777
- test

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
"webpack-merge": "^4.1.1"
7979
},
8080
"dependencies": {
81-
"appirio-tech-react-components": "github:appirio-tech/react-components#feature/connectv2",
81+
"appirio-tech-react-components": "github:appirio-tech/react-components#feature/loginFlow",
8282
"axios": "^0.13.1",
8383
"classnames": "^2.2.3",
8484
"coffeescript": "^1.12.7",

‎src/components/Home/Home.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react'
22
import { connect } from 'react-redux'
3-
import { withRouter, Link } from 'react-router-dom'
3+
import { withRouter } from 'react-router-dom'
44
import './Home.scss'
55
import homeImgSrc from '../../assets/images/hero-tc-landing.png'
6-
import { DOMAIN } from '../../config/constants'
6+
import { DOMAIN, ACCOUNTS_APP_REGISTER_URL } from '../../config/constants'
77

88
class Home extends React.Component {
99
constructor(props) {
@@ -18,6 +18,7 @@ class Home extends React.Component {
1818
}
1919

2020
render() {
21+
const registerUrl = ACCOUNTS_APP_REGISTER_URL;
2122
const learnMoreUrl = 'https://www.' + DOMAIN +'/about-topcoder/connect/'
2223
return (
2324
<div className="content content-home">
@@ -31,7 +32,7 @@ class Home extends React.Component {
3132
<p>Companies and agencies, from the world’s largest to the Valley’s newest, use crowdsourcing to deliver high-quality assets, faster.</p>
3233
<p>Connect guides you through the entire crowdsourcing process, from entering requirements to receiving final deliverables, and it facilitates collaboration between your project team and Topcoder community members working on your project.</p>
3334
<div className="button-bar">
34-
<Link to="/new-project" className="tc-btn tc-btn-primary">Start a project</Link>
35+
<a href={ registerUrl } className="tc-btn tc-btn-primary">Start a project</a>
3536
<a href={ learnMoreUrl } className="tc-link">Learn more about Connect</a>
3637
</div>
3738
</div>

‎src/config/constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -440,6 +440,7 @@ export const SEGMENT_KEY = process.env.CONNECT_SEGMENT_KEY
440440
*/
441441
export const DOMAIN = process.env.domain || 'topcoder.com'
442442
export const CONNECT_DOMAIN = `connect.${DOMAIN}`
443+
export const CONNECT_MAIN_PAGE_URL = `http://connect.${DOMAIN}`
443444
export const ACCOUNTS_APP_CONNECTOR_URL = process.env.ACCOUNTS_APP_CONNECTOR_URL
444445
export const ACCOUNTS_APP_LOGIN_URL = process.env.ACCOUNTS_APP_LOGIN_URL || `https://accounts.${DOMAIN}/#!/connect`
445446
export const ACCOUNTS_APP_REGISTER_URL = process.env.ACCOUNTS_APP_REGISTER_URL || `https://accounts.${DOMAIN}/#!/connect/registration`

‎src/projects/create/components/FillProjectDetails.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import _ from 'lodash'
22
import React, { Component } from 'react'
33
import PT from 'prop-types'
4-
import Sticky from 'react-stickynode'
54

65
import './FillProjectDetails.scss'
76
import ProjectBasicDetailsForm from '../components/ProjectBasicDetailsForm'
8-
import ProjectOutline from '../components/ProjectOutline'
97
import ModalControl from '../../../components/ModalControl'
108
import TailLeft from '../../../assets/icons/arrows-16px-1_tail-left.svg'
119

@@ -28,7 +26,6 @@ class FillProjectDetails extends Component {
2826
return !(
2927
_.isEqual(nextProps.project, this.props.project)
3028
&& _.isEqual(nextState.project, this.state.project)
31-
&& _.isEqual(nextProps.dirtyProject, this.props.dirtyProject)
3229
&& _.isEqual(nextProps.error, this.props.error)
3330
)
3431
}
@@ -38,7 +35,7 @@ class FillProjectDetails extends Component {
3835
}
3936

4037
render() {
41-
const { project, dirtyProject, processing, submitBtnText, onBackClick, projectTemplates } = this.props
38+
const { project, processing, submitBtnText, onBackClick, projectTemplates } = this.props
4239
const projectTemplateId = _.get(project, 'templateId')
4340
const projectTemplate = _.find(projectTemplates, { id: projectTemplateId })
4441
const formDisclaimer = _.get(projectTemplate, 'scope.formDisclaimer')
@@ -77,12 +74,6 @@ class FillProjectDetails extends Component {
7774
</div>
7875
)}
7976
</div>
80-
<div className="right-area">
81-
<Sticky top={20}>
82-
<ProjectOutline project={ dirtyProject } projectTemplates={ projectTemplates } />
83-
<div className="right-area-footer">In 24 hours our project managers will contact you for more information and a detailed quote that accurately reflects your project needs.</div>
84-
</Sticky>
85-
</div>
8677
</div>
8778
</section>
8879
</div>

‎src/projects/create/components/FillProjectDetails.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@
2121

2222
.FillProjectDetails {
2323
h1 {
24+
margin-top: 30px;
2425
@extend .wizardHeadline;
2526

2627
@media screen and (max-width: $screen-md - 1px) {
28+
margin-top: 0;
2729
font-size: 20px;
2830
line-height: 24px;
2931
margin-bottom: 0;

‎src/projects/create/components/IncompleteProjectConfirmation.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import React from 'react'
22
import PT from 'prop-types'
33
import './IncompleteProjectConfirmation.scss'
4-
import ConnectLogoMono from '../../../assets/icons/connect-logo-mono.svg'
54

65

76
function IncompleteProjectConfirmation({ loadIncompleteProject, removeIncompleteProject }) {
87
// const isLoggedIn = userRoles && userRoles.length
98
return (
109
<div className="IncompleteProjectConfirmation">
11-
<div className="header">
12-
<ConnectLogoMono className="connectLogo"/>
13-
</div>
1410
<h3>Welcome back!</h3>
1511
<h5>You started a project with us recently.</h5>
1612
<p>Do you want to continue where you left off or create a new project?</p>

‎src/projects/create/components/ProjectSubmitted.jsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react'
2+
import PT from 'prop-types'
3+
4+
require('./ProjectSubmitted.scss')
5+
import {
6+
CONNECT_DOMAIN
7+
} from '../../../config/constants'
8+
9+
class ProjectSubmitted extends React.Component {
10+
constructor(props) {
11+
super(props)
12+
13+
this.copyToClipboard = this.copyToClipboard.bind(this)
14+
this.state = {
15+
domain: `${CONNECT_DOMAIN}/`,
16+
url: `projects/${props.params.status || props.projectId}`
17+
}
18+
}
19+
20+
copyToClipboard() {
21+
const textField = document.createElement('textarea')
22+
textField.innerText = `${this.state.domain}${this.state.url}`
23+
document.body.appendChild(textField)
24+
textField.select()
25+
document.execCommand('copy')
26+
textField.remove()
27+
}
28+
29+
render() {
30+
return (
31+
<div className="ProjectSubmitted flex column middle center tc-ui">
32+
<div className="container flex column middle center">
33+
<div className="title">Good job!</div>
34+
<div className="sub-title">Your project has been submitted</div>
35+
<div className="content">
36+
A member of our team will be reaching out to you shortly to continue building your project plan.
37+
<br />
38+
<br />
39+
Here is your Topcoder project link if you want to share it with members of your team, or directly log in to your Topcoder project dashboard.
40+
</div>
41+
<div className="project-link-container flex row middle center">
42+
{ `${this.state.domain}${this.state.url}` }
43+
</div>
44+
<div className="button-container flex row middle center">
45+
<a type="button" onClick={this.copyToClipboard} className="copy-link-btn tc-btn tc-btn-sm tc-btn-default flex middle center" disabled={false}>Copy link</a>
46+
<a href={this.state.url} type="button" className="go-to-project-dashboard-btn tc-btn tc-btn-sm tc-btn-primary flex middle center" disabled={false}>Go to project dashboard</a>
47+
</div>
48+
</div>
49+
</div>
50+
)
51+
}
52+
}
53+
54+
ProjectSubmitted.defaultProps = {
55+
vm: {},
56+
params: {},
57+
}
58+
59+
ProjectSubmitted.propTypes = {
60+
vm: PT.any,
61+
params: PT.any,
62+
}
63+
64+
export default ProjectSubmitted

‎src/projects/create/components/ProjectSubmitted.scss‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@import '~tc-ui/src/styles/tc-includes';
2+
@import '~appirio-tech-react-components/components/Wizard/screen-size.scss';
3+
4+
:global {
5+
.ProjectSubmitted {
6+
font-family: "Roboto", Arial, Helvetica, sans-serif;
7+
8+
.container {
9+
width: 90%;
10+
11+
.title {
12+
color: #1E1E1F;
13+
font-size: 32px;
14+
font-weight: 300;
15+
line-height: 35px;
16+
margin-top: 50px;
17+
18+
@include mobile {
19+
font-size: 24px;
20+
}
21+
}
22+
23+
.sub-title {
24+
color: #85807C;
25+
font-size: 12px;
26+
font-weight: 400;
27+
line-height: 20px;
28+
margin-top: 15px;
29+
text-transform: uppercase;
30+
}
31+
32+
.content {
33+
color: #151516;
34+
font-size: 15px;
35+
font-weight: 400;
36+
margin-top: 50px;
37+
line-height: 25px;
38+
padding: 0;
39+
40+
b {
41+
font-weight: bold;
42+
}
43+
}
44+
45+
.project-link-container {
46+
background-color: #F1F0F0;
47+
border-radius: 6px;
48+
height: 60px;
49+
width: 100%;
50+
color: $tc-dark-blue;
51+
font-size: 18px;
52+
font-weight: 400;
53+
text-align: center;
54+
margin-top: 40px;
55+
display: flex;
56+
}
57+
58+
.button-container {
59+
margin-top: 30px;
60+
.copy-link-btn {
61+
margin-left: 10px;
62+
margin-right: 10px;
63+
}
64+
}
65+
}
66+
}
67+
}
68+

‎src/projects/create/components/ProjectWizard.jsx‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import SelectProjectTemplate from './SelectProjectTemplate'
1010
import SelectProjectType from './SelectProjectType'
1111
import IncompleteProjectConfirmation from './IncompleteProjectConfirmation'
1212
import FillProjectDetails from './FillProjectDetails'
13+
import ProjectSubmitted from './ProjectSubmitted'
14+
1315
import update from 'react-addons-update'
1416
import { LS_INCOMPLETE_PROJECT, PROJECT_REF_CODE_MAX_LENGTH } from '../../../config/constants'
1517
import './ProjectWizard.scss'
@@ -19,6 +21,7 @@ const WZ_STEP_SELECT_PROJ_TYPE = 1
1921
const WZ_STEP_SELECT_PROJ_TEMPLATE = 2
2022
const WZ_STEP_FILL_PROJ_DETAILS = 3
2123
const WZ_STEP_ERROR_CREATING_PROJ = 4
24+
const WZ_STEP_PROJECT_SUBMITTED = 5
2225

2326
class ProjectWizard extends Component {
2427

@@ -46,19 +49,32 @@ class ProjectWizard extends Component {
4649
}
4750

4851
componentDidMount() {
49-
const { onStepChange, projectTemplates } = this.props
52+
const { onStepChange, projectTemplates, createdProject } = this.props
5053
const params = this.props.match.params
5154

5255
// load incomplete project from local storage
5356
const incompleteProjectStr = window.localStorage.getItem(LS_INCOMPLETE_PROJECT)
54-
if (incompleteProjectStr) {
57+
58+
if ((params && params.project === 'submitted') || createdProject) {
59+
const wizardStep = WZ_STEP_PROJECT_SUBMITTED
60+
const updateQuery = {}
61+
this.setState({
62+
project: update(this.state.project, updateQuery),
63+
dirtyProject: update(this.state.dirtyProject, updateQuery),
64+
wizardStep,
65+
isProjectDirty: false
66+
}, () => {
67+
typeof onStepChange === 'function' && onStepChange(this.state.wizardStep, this.state.project)
68+
})
69+
} else if (incompleteProjectStr) {
5570
const incompleteProject = JSON.parse(incompleteProjectStr)
5671
const incompleteProjectTemplateId = _.get(incompleteProject, 'templateId')
5772
const incompleteProjectTemplate = _.find(projectTemplates, pt => pt.id === incompleteProjectTemplateId)
5873
let wizardStep = WZ_STEP_INCOMP_PROJ_CONF
5974
let updateQuery = {}
6075
if (incompleteProjectTemplate && params && params.project) {
6176
const projectTemplate = getProjectTemplateByAlias(projectTemplates, params.project)
77+
6278
if (projectTemplate) {
6379
// load project details page directly
6480
if (projectTemplate.key === incompleteProjectTemplate.key) {
@@ -71,6 +87,7 @@ class ProjectWizard extends Component {
7187
}
7288
}
7389
}
90+
7491
this.setState({
7592
project: update(this.state.project, updateQuery),
7693
dirtyProject: update(this.state.dirtyProject, updateQuery),
@@ -109,7 +126,7 @@ class ProjectWizard extends Component {
109126
}
110127

111128
componentWillReceiveProps(nextProps) {
112-
const { onStepChange } = nextProps
129+
const { onStepChange, createdProject } = nextProps
113130
const params = nextProps.match.params
114131
const type = _.get(nextProps.project, 'type', null)
115132
const projectTemplateId = _.get(nextProps.project, 'templateId', null)
@@ -123,6 +140,9 @@ class ProjectWizard extends Component {
123140
updateQuery['details'] = { $set : {} }
124141
wizardStep = WZ_STEP_SELECT_PROJ_TYPE
125142
}
143+
if (createdProject) {
144+
wizardStep = WZ_STEP_PROJECT_SUBMITTED
145+
}
126146
// if wizard step deduced above and stored in state are not the same, update the state
127147
if (wizardStep && this.state.wizardStep !== wizardStep) {
128148
this.setState({
@@ -155,8 +175,11 @@ class ProjectWizard extends Component {
155175
if (!urlAlias) return
156176

157177
const projectType = getProjectTypeByAlias(projectTypes, urlAlias)
158-
// first try the path param to be a project type
159-
if (projectType) {
178+
// first try the path param to be a final step
179+
if (projectType === 'submitted') {
180+
return WZ_STEP_PROJECT_SUBMITTED
181+
} if (projectType) {
182+
// try the path param to be a project type
160183
updateQuery['type'] = { $set : projectType.key }
161184
return WZ_STEP_SELECT_PROJ_TEMPLATE
162185
} else {
@@ -403,8 +426,9 @@ class ProjectWizard extends Component {
403426
}
404427

405428
render() {
406-
const { processing, showModal, userRoles, projectTemplates, projectTypes } = this.props
429+
const { processing, showModal, userRoles, projectTemplates, projectTypes, projectId, match } = this.props
407430
const { project, dirtyProject, wizardStep } = this.state
431+
const params = match.params
408432

409433
return (
410434
<Wizard
@@ -413,7 +437,7 @@ class ProjectWizard extends Component {
413437
onCancel={this.handleWizardCancel}
414438
onStepChange={ this.handleStepChange }
415439
step={wizardStep}
416-
shouldRenderBackButton={ (step) => step > 1 }
440+
shouldRenderBackButton={ (step) => step > 1 && step !== 5 }
417441
>
418442
<IncompleteProjectConfirmation
419443
loadIncompleteProject={ this.loadIncompleteProject }
@@ -443,6 +467,14 @@ class ProjectWizard extends Component {
443467
userRoles={ userRoles }
444468
onBackClick={() => this.handleStepChange(wizardStep - 1)}
445469
/>
470+
<div />
471+
<ProjectSubmitted
472+
project={ project }
473+
projectTemplates={ projectTemplates }
474+
dirtyProject={ dirtyProject }
475+
params={ params }
476+
projectId={ projectId }
477+
/>
446478
</Wizard>
447479
)
448480
}
@@ -497,7 +529,8 @@ ProjectWizard.Steps = {
497529
WZ_STEP_SELECT_PROJ_TYPE,
498530
WZ_STEP_SELECT_PROJ_TEMPLATE,
499531
WZ_STEP_FILL_PROJ_DETAILS,
500-
WZ_STEP_ERROR_CREATING_PROJ
532+
WZ_STEP_ERROR_CREATING_PROJ,
533+
WZ_STEP_PROJECT_SUBMITTED
501534
}
502535

503536
export default withRouter(ProjectWizard)

0 commit comments

Comments
 (0)