137 lines
4.1 KiB
JavaScript
137 lines
4.1 KiB
JavaScript
import React from 'react';
|
||
import { connect } from 'react-redux';
|
||
import withToggle from 'Components/hocs/withToggle';
|
||
import stl from './onboardingExplore.module.css';
|
||
import FeatureItem from './FeatureItem';
|
||
import { getOnboard } from 'Duck/dashboard';
|
||
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
|
||
|
||
import { OB_TABS, onboarding as onboardingRoute } from 'App/routes'
|
||
import * as routes from '../../../routes'
|
||
|
||
const withSiteId = routes.withSiteId;
|
||
|
||
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
|
||
import { withRouter } from 'react-router';
|
||
|
||
const styles = {
|
||
// Rotation of path and trail, in number of turns (0-1)
|
||
rotation: 0,
|
||
// Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
|
||
strokeLinecap: 'butt',
|
||
|
||
// Text size
|
||
textSize: '16px',
|
||
|
||
// How long animation takes to go from one percentage to another, in seconds
|
||
pathTransitionDuration: 1,
|
||
|
||
// Can specify path transition in more detail, or remove it entirely
|
||
// pathTransition: 'none',
|
||
|
||
// Colors
|
||
pathColor: `#394EFF`,
|
||
// textColor: '#f88',
|
||
// trailColor: '#d6d6d6',
|
||
// backgroundColor: '#3e98c7',
|
||
};
|
||
|
||
@connect(state => ({
|
||
siteId: state.getIn([ 'site', 'siteId' ]),
|
||
boarding: state.getIn([ 'dashboard', 'boarding' ]),
|
||
boardingCompletion: state.getIn([ 'dashboard', 'boardingCompletion' ]),
|
||
}), {
|
||
getOnboard,
|
||
})
|
||
@withToggle('display', 'toggleModal')
|
||
@withRouter
|
||
class OnboardingExplore extends React.PureComponent {
|
||
UNSAFE_componentWillMount() {
|
||
if (this.props.boarding.size === 0) {
|
||
this.props.getOnboard();
|
||
}
|
||
}
|
||
|
||
componentDidMount() {
|
||
setTimeout(function() {
|
||
const { onComplete, boardingCompletion } = this.props;
|
||
if (typeof onComplete === 'function' && boardingCompletion >= 50) {
|
||
onComplete()
|
||
}
|
||
}.bind(this), 1000 * 60 * 2);
|
||
}
|
||
|
||
onClickOutside = () => {
|
||
if (this.props.display)
|
||
this.props.toggleModal();
|
||
}
|
||
|
||
getHeaderText = (percentage) => {
|
||
if (percentage === 0 ) {
|
||
return 'Welcome!';
|
||
} else if (percentage < 100) {
|
||
return 'Few more steps and you’re done!';
|
||
}
|
||
return 'Good Job!';
|
||
}
|
||
|
||
getOnboardingTab = (task) => {
|
||
if (task === 'Install OpenReplay')
|
||
return OB_TABS.INSTALLING;
|
||
if (task === 'Identify Users')
|
||
return OB_TABS.IDENTIFY_USERS;
|
||
if (task === 'Invite Team Members')
|
||
return OB_TABS.MANAGE_USERS;
|
||
if (task === 'Integrations')
|
||
return OB_TABS.INTEGRATIONS;
|
||
}
|
||
onClick = task => {
|
||
const { siteId, history } = this.props;
|
||
const tab = this.getOnboardingTab(task.task)
|
||
history.push(withSiteId(onboardingRoute(tab), siteId));
|
||
}
|
||
|
||
render() {
|
||
const { display, toggleModal, boarding, boardingCompletion } = this.props;
|
||
|
||
styles.pathColor = '#394EFF';
|
||
if (boardingCompletion < 50)
|
||
styles.pathColor = '#FF0000';
|
||
else if (boardingCompletion < 75)
|
||
styles.pathColor = '#FFA500';
|
||
const _styles = buildStyles(styles);
|
||
|
||
return (
|
||
<OutsideClickDetectingDiv className={ stl.wrapper } onClickOutside={this.onClickOutside}>
|
||
<button className={ stl.button } onClick={ toggleModal }>
|
||
<div className={ stl.progressWrapper }>
|
||
<CircularProgressbar value={ boardingCompletion } styles={ _styles } strokeWidth={ 12 }/>
|
||
</div>
|
||
</button>
|
||
{ display &&
|
||
<div className={ stl.modal } >
|
||
<div className={ stl.tooltipArrow } />
|
||
<div className={ stl.header }>
|
||
Make the best out of OpenReplay by completing your project setup:
|
||
</div>
|
||
|
||
<div className={ stl.content }>
|
||
<div className={ stl.list }>
|
||
{ boarding.map(task => (
|
||
<FeatureItem
|
||
key={ task.task }
|
||
label={ task.task }
|
||
completed={ task.done }
|
||
onClick={() => this.onClick(task) }
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
</OutsideClickDetectingDiv>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default OnboardingExplore;
|