Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Progressive Registration #3893

Merged
merged 4 commits into from
Apr 20, 2020
Merged

Progressive Registration #3893

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b10c94f
Progressive Registration
suppermancool Apr 13, 2020
c89607d
Progressive Registration Feedback for loading/role/field problem
suppermancool Apr 15, 2020
f878f10
Progressive Registration Feedback for loading 2nd
suppermancool Apr 17, 2020
33e7d71
fix problem with loading poisition + hide/show profiile
suppermancool Apr 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
263 changes: 206 additions & 57 deletions src/projects/create/components/FillProjectDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,42 @@ import _ from 'lodash'
import React, { Component } from 'react'
import PT from 'prop-types'
import cn from 'classnames'
import { connect } from 'react-redux'

import './FillProjectDetails.scss'
import ProjectBasicDetailsForm from '../components/ProjectBasicDetailsForm'
import HeaderWithProgress from './HeaderWithProgress'
import UpdateUserInfo from './UpdateUserInfo'
import { formatProfileSettings } from '../../../routes/settings/helpers/settings'
import {
getProfileSettings,
saveProfileSettings,
uploadProfilePhoto,
} from '../../../routes/settings/actions/index'
import {
ROLE_TOPCODER_USER,
ROLE_CONNECT_COPILOT,
ROLE_CONNECT_MANAGER,
ROLE_CONNECT_ACCOUNT_MANAGER,
ROLE_CONNECT_COPILOT_MANAGER,
ROLE_ADMINISTRATOR,
ROLE_CONNECT_ADMIN,
ROLE_BUSINESS_DEVELOPMENT_REPRESENTATIVE,
ROLE_PRESALES,
ROLE_ACCOUNT_EXECUTIVE,
ROLE_PROGRAM_MANAGER,
ROLE_SOLUTION_ARCHITECT,
ROLE_PROJECT_MANAGER,
} from '../../../config/constants'

class FillProjectDetails extends Component {
class FillProjectDetails extends Component {
constructor(props) {
super(props)
this.createMarkup = this.createMarkup.bind(this)
this.handleStepChange = this.handleStepChange.bind(this)
this.state = { project: {}, currentWizardStep: null }
this.openUserSettings = this.openUserSettings.bind(this)
this.closeUserSettings = this.closeUserSettings.bind(this)
this.state = { project: {}, currentWizardStep: null, showUpdateUser: false }
}

componentWillMount() {
Expand All @@ -24,27 +49,60 @@ class FillProjectDetails extends Component {
}

handleStepChange(currentWizardStep) {
this.setState({currentWizardStep})
this.setState({ currentWizardStep })
}

shouldComponentUpdate(nextProps, nextState) {
return !(
_.isEqual(nextProps.project, this.props.project)
&& _.isEqual(nextProps.dirtyProject, this.props.dirtyProject)
&& _.isEqual(nextState.project, this.state.project)
&& _.isEqual(nextProps.error, this.props.error)
&& _.isEqual(nextState.currentWizardStep, this.state.currentWizardStep)
&& _.isEqual(nextProps.projectTemplates, this.props.projectTemplates)
_.isEqual(nextProps.project, this.props.project) &&
_.isEqual(nextProps.dirtyProject, this.props.dirtyProject) &&
_.isEqual(nextState.project, this.state.project) &&
_.isEqual(nextProps.error, this.props.error) &&
_.isEqual(nextState.currentWizardStep, this.state.currentWizardStep) &&
_.isEqual(nextState.showUpdateUser, this.state.showUpdateUser) &&
_.isEqual(nextProps.projectTemplates, this.props.projectTemplates) &&
_.isEqual(nextProps.isMissingUserInfo, this.props.isMissingUserInfo) &&
_.isEqual(
nextProps.isLoadedProfileSetting,
this.props.isLoadedProfileSetting
)
)
}

createMarkup(projectTemplate) {
return {__html: _.get(projectTemplate, 'scope.formTitle', `Let's setup your ${ projectTemplate.name } project`) }
return {
__html: _.get(
projectTemplate,
'scope.formTitle',
`Let's setup your ${projectTemplate.name} project`
),
}
}

openUserSettings() {
this.setState({ showUpdateUser: true })
}

closeUserSettings() {
this.setState({ showUpdateUser: false })
}

render() {
const { project, processing, submitBtnText, projectTemplates, dirtyProject, productTemplates, productCategories, shouldUpdateTemplate } = this.props
const { currentWizardStep } = this.state
const {
project,
processing,
submitBtnText,
projectTemplates,
dirtyProject,
productTemplates,
productCategories,
shouldUpdateTemplate,
getProfileSettings,
profileSettings,
isMissingUserInfo,
isLoadedProfileSetting,
} = this.props
const { currentWizardStep, showUpdateUser } = this.state
const projectTemplateId = _.get(project, 'templateId')
const projectTemplate = _.find(projectTemplates, { id: projectTemplateId })
const formDisclaimer = _.get(projectTemplate, 'scope.formDisclaimer')
Expand All @@ -56,13 +114,17 @@ class FillProjectDetails extends Component {
if (!_.get(template, 'wizard.enabled')) {
header = (
<div className="text-header-wrapper">
<h1 dangerouslySetInnerHTML = {this.createMarkup(projectTemplate)} />
<h1 dangerouslySetInnerHTML={this.createMarkup(projectTemplate)} />
</div>
)
} else {
const currentSection = currentWizardStep && template.sections[currentWizardStep.sectionIndex]
const currentSection =
currentWizardStep && template.sections[currentWizardStep.sectionIndex]

if (!currentSection || currentSection && !currentSection.hideFormHeader) {
if (
!currentSection ||
(currentSection && !currentSection.hideFormHeader)
) {
header = (
<HeaderWithProgress
template={template}
Expand All @@ -77,53 +139,63 @@ class FillProjectDetails extends Component {
return (
<div
className={cn('FillProjectDetailsWrapper', {
[`form-theme-${template.theme}`]: template.theme
[`form-theme-${template.theme}`]: template.theme,
})}
>
<div className="FillProjectDetails">
<div className="header">
{header}
</div>
<section className="two-col-content content">
<div className="container">
<div className="left-area">
<div className="left-area-content">
<ProjectBasicDetailsForm
project={project}
dirtyProject={dirtyProject}
template={template}
isEditable
submitHandler={this.props.onCreateProject}
addAttachment={this.props.addAttachment}
updateAttachment={this.props.updateAttachment}
removeAttachment={this.props.removeAttachment}
attachmentsStorePath={this.props.attachmentsStorePath}
canManageAttachments={this.props.canManageAttachments}
saving={processing}
onProjectChange={this.props.onProjectChange}
submitBtnText={ submitBtnText }
productTemplates={productTemplates}
onStepChange={this.handleStepChange}
productCategories={productCategories}
shouldUpdateTemplate={shouldUpdateTemplate}
/>
</div>
{formDisclaimer && (
<div className="left-area-footer">
<span>{formDisclaimer}</span>
{showUpdateUser ? (
<UpdateUserInfo
{...this.props}
closeUserSettings={this.closeUserSettings}
/>
) : (
<div className="FillProjectDetails">
<div className="header">{header}</div>
<section className="two-col-content content">
<div className="container">
<div className="left-area">
<div className="left-area-content">
<ProjectBasicDetailsForm
getProfileSettings={getProfileSettings}
profileSettings={profileSettings}
project={project}
dirtyProject={dirtyProject}
template={template}
isEditable
submitHandler={this.props.onCreateProject}
addAttachment={this.props.addAttachment}
updateAttachment={this.props.updateAttachment}
removeAttachment={this.props.removeAttachment}
attachmentsStorePath={this.props.attachmentsStorePath}
canManageAttachments={this.props.canManageAttachments}
saving={processing}
onProjectChange={this.props.onProjectChange}
submitBtnText={submitBtnText}
productTemplates={productTemplates}
onStepChange={this.handleStepChange}
productCategories={productCategories}
shouldUpdateTemplate={shouldUpdateTemplate}
isMissingUserInfo={isMissingUserInfo}
isLoadedProfileSetting={isLoadedProfileSetting}
openUserSettings={this.openUserSettings}
/>
</div>
)}
{formDisclaimer && (
<div className="left-area-footer">
<span>{formDisclaimer}</span>
</div>
)}
</div>
</div>
</div>
</section>
</div>
</section>
</div>
)}
</div>
)
}
}

FillProjectDetails.defaultProps = {
shouldUpdateTemplate: false
shouldUpdateTemplate: false,
}

FillProjectDetails.propTypes = {
Expand All @@ -138,11 +210,88 @@ FillProjectDetails.propTypes = {
userRoles: PT.arrayOf(PT.string),
processing: PT.bool,
templates: PT.array.isRequired,
error: PT.oneOfType([
PT.bool,
PT.object
]),
error: PT.oneOfType([PT.bool, PT.object]),
shouldUpdateTemplate: PT.bool,
profileSettings: PT.object.isRequired,
getProfileSettings: PT.func.isRequired,
isMissingUserInfo: PT.bool.isRequired,
isLoadedProfileSetting: PT.bool.isRequired,
}

const mapStateToProps = ({ settings, loadUser }) => {
const powerUserRoles = [
ROLE_CONNECT_COPILOT,
ROLE_CONNECT_MANAGER,
ROLE_CONNECT_ACCOUNT_MANAGER,
ROLE_CONNECT_ADMIN,
ROLE_ADMINISTRATOR,
ROLE_CONNECT_COPILOT_MANAGER,
]
const managerRoles = [
ROLE_ADMINISTRATOR,
ROLE_CONNECT_ADMIN,
ROLE_CONNECT_MANAGER,
]
const topCoderRoles = [
ROLE_TOPCODER_USER,
ROLE_CONNECT_COPILOT,
ROLE_CONNECT_MANAGER,
ROLE_CONNECT_ACCOUNT_MANAGER,
ROLE_CONNECT_ADMIN,
ROLE_ADMINISTRATOR,
ROLE_CONNECT_COPILOT_MANAGER,
ROLE_BUSINESS_DEVELOPMENT_REPRESENTATIVE,
ROLE_PRESALES,
ROLE_ACCOUNT_EXECUTIVE,
ROLE_PROGRAM_MANAGER,
ROLE_SOLUTION_ARCHITECT,
ROLE_PROJECT_MANAGER,
]
const isTopcoderUser =
_.intersection(loadUser.user.roles, topCoderRoles).length > 0
let isMissingUserInfo = true
const profileSettings = formatProfileSettings(settings.profile.traits)
if (isTopcoderUser) {
isMissingUserInfo =
!profileSettings.firstName ||
!profileSettings.lastName ||
!profileSettings.country ||
!profileSettings.timeZone ||
!profileSettings.workingHourStart ||
!profileSettings.workingHourEnd
} else {
isMissingUserInfo =
!profileSettings.firstName ||
!profileSettings.lastName ||
!profileSettings.title ||
!profileSettings.companyName ||
!profileSettings.businessEmail ||
!profileSettings.businessPhone
}

return {
profileSettings: {
...settings.profile,
settings: profileSettings,
},
isLoadedProfileSetting: !_.isEmpty(profileSettings),
user: loadUser.user,
isCustomer:
_.intersection(loadUser.user.roles, powerUserRoles).length === 0,
isManager: _.intersection(loadUser.user.roles, managerRoles).length > 0,
isCopilot: _.some(
loadUser.user.roles,
(role) => role === ROLE_CONNECT_COPILOT
),
isTopcoderUser,
isMissingUserInfo,
}
}

const mapDispatchToProps = {
getProfileSettings,
saveProfileSettings,
uploadProfilePhoto,
}

export default FillProjectDetails
export default connect(mapStateToProps, mapDispatchToProps)(FillProjectDetails)
Loading