2018-01-11 18:13:14 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import translate from 'translations';
|
|
|
|
import Stepper from 'react-stepper-horizontal';
|
|
|
|
import { showNotification, TShowNotification } from 'actions/notifications';
|
|
|
|
import { AppState } from 'reducers';
|
|
|
|
import Modal, { IButton } from 'components/ui/Modal';
|
|
|
|
import './index.scss';
|
|
|
|
import {
|
|
|
|
startOnboardSession,
|
|
|
|
TStartOnboardSession,
|
|
|
|
decrementSlide,
|
|
|
|
TDecrementSlide,
|
|
|
|
incrementSlide,
|
|
|
|
TIncrementSlide,
|
|
|
|
resumeSlide,
|
|
|
|
TResumeSlide
|
|
|
|
} from 'actions/onboardStatus';
|
|
|
|
import {
|
|
|
|
WelcomeSlide,
|
|
|
|
NotABankSlide,
|
|
|
|
InterfaceSlide,
|
|
|
|
BlockchainSlide,
|
|
|
|
WhySlide,
|
2018-02-07 04:28:28 +00:00
|
|
|
WhyMyCrypto,
|
2018-01-11 18:13:14 +00:00
|
|
|
SecureSlideOne,
|
|
|
|
SecureSlideTwo,
|
|
|
|
SecureSlideThree,
|
|
|
|
FinalSlide
|
|
|
|
} from './components';
|
2018-05-11 15:15:32 +00:00
|
|
|
import { ONBOARD_LOCAL_STORAGE_KEY, NUMBER_OF_ONBOARD_SLIDES } from 'utils/localStorage';
|
2018-01-11 18:13:14 +00:00
|
|
|
|
|
|
|
interface State {
|
|
|
|
isOpen: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
sessionStarted: boolean;
|
|
|
|
slideNumber: number;
|
|
|
|
startOnboardSession: TStartOnboardSession;
|
|
|
|
resumeSlide: TResumeSlide;
|
|
|
|
decrementSlide: TDecrementSlide;
|
|
|
|
incrementSlide: TIncrementSlide;
|
|
|
|
showNotification: TShowNotification;
|
|
|
|
}
|
|
|
|
|
|
|
|
class OnboardModal extends React.Component<Props, State> {
|
2018-01-13 08:26:08 +00:00
|
|
|
private modal: Modal | null = null;
|
|
|
|
|
2018-03-07 23:36:05 +00:00
|
|
|
constructor(props: Props) {
|
2018-01-11 18:13:14 +00:00
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
isOpen: false
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
public componentDidMount() {
|
|
|
|
const { sessionStarted } = this.props;
|
|
|
|
const currentSlide = Number(localStorage.getItem(ONBOARD_LOCAL_STORAGE_KEY)) || 0;
|
|
|
|
|
|
|
|
if (!sessionStarted) {
|
|
|
|
this.props.startOnboardSession();
|
|
|
|
if (currentSlide === 0) {
|
|
|
|
this.setState({
|
|
|
|
isOpen: true
|
|
|
|
});
|
|
|
|
}
|
2018-05-11 15:15:32 +00:00
|
|
|
if (currentSlide > 0 && currentSlide < NUMBER_OF_ONBOARD_SLIDES) {
|
2018-01-11 18:13:14 +00:00
|
|
|
this.props.resumeSlide(currentSlide);
|
|
|
|
this.setState({
|
|
|
|
isOpen: true
|
|
|
|
});
|
|
|
|
|
2018-03-22 03:50:25 +00:00
|
|
|
const onboardResumeMessage = translate('ONBOARD_RESUME');
|
2018-01-11 18:13:14 +00:00
|
|
|
|
2018-01-13 08:26:08 +00:00
|
|
|
// Wait a sec so it doesn't get lost in the page-load
|
|
|
|
setTimeout(() => {
|
|
|
|
this.props.showNotification('info', onboardResumeMessage, 6000);
|
|
|
|
}, 1200);
|
2018-01-11 18:13:14 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
public render() {
|
|
|
|
const { isOpen } = this.state;
|
|
|
|
const { slideNumber } = this.props;
|
|
|
|
|
|
|
|
const firstButtons: IButton[] = [
|
|
|
|
{
|
2018-05-11 15:15:32 +00:00
|
|
|
disabled: slideNumber === NUMBER_OF_ONBOARD_SLIDES,
|
2018-03-22 03:50:25 +00:00
|
|
|
text: translate('ACTION_6'),
|
2018-01-11 18:13:14 +00:00
|
|
|
type: 'primary',
|
|
|
|
onClick: this.handleNextSlide
|
|
|
|
},
|
|
|
|
{
|
|
|
|
disabled: slideNumber === 1,
|
2018-03-22 03:50:25 +00:00
|
|
|
text: translate('ACTION_4'),
|
2018-01-11 18:13:14 +00:00
|
|
|
type: 'default',
|
|
|
|
onClick: this.handlePreviousSlide
|
|
|
|
}
|
|
|
|
];
|
|
|
|
const lastButtons: IButton[] = [
|
|
|
|
{
|
2018-03-22 03:50:25 +00:00
|
|
|
text: translate('ACTION_10'),
|
2018-01-11 18:13:14 +00:00
|
|
|
type: 'primary',
|
|
|
|
onClick: this.closeModal
|
|
|
|
},
|
|
|
|
{
|
2018-03-22 03:50:25 +00:00
|
|
|
text: translate('ACTION_4'),
|
2018-01-11 18:13:14 +00:00
|
|
|
type: 'default',
|
|
|
|
onClick: this.handlePreviousSlide
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
2018-05-11 15:15:32 +00:00
|
|
|
const buttons = slideNumber === NUMBER_OF_ONBOARD_SLIDES ? lastButtons : firstButtons;
|
|
|
|
const steps = new Array(NUMBER_OF_ONBOARD_SLIDES).fill({});
|
2018-01-11 18:13:14 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="OnboardModal">
|
2018-04-25 03:26:53 +00:00
|
|
|
<Modal isOpen={isOpen} buttons={buttons} maxWidth={800} handleClose={this.closeModal}>
|
2018-01-11 18:13:14 +00:00
|
|
|
<div className="OnboardModal-stepper">
|
|
|
|
<Stepper
|
|
|
|
steps={steps}
|
|
|
|
activeColor="#0e97c0"
|
|
|
|
activeStep={slideNumber - 1}
|
|
|
|
completeColor="#0e97c0"
|
|
|
|
circleTop={1}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="OnboardModal-onboardSlide">{this.renderSlide()}</div>
|
|
|
|
</Modal>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
public closeModal = () => {
|
|
|
|
this.setState({ isOpen: false });
|
|
|
|
};
|
|
|
|
|
|
|
|
public changeOnboardStatus = (slideNumber: number) => {
|
|
|
|
localStorage.setItem(ONBOARD_LOCAL_STORAGE_KEY, String(slideNumber));
|
|
|
|
};
|
|
|
|
|
|
|
|
private renderSlide = () => {
|
|
|
|
const slides = [
|
|
|
|
<WelcomeSlide key={1} />,
|
|
|
|
<NotABankSlide key={2} />,
|
|
|
|
<InterfaceSlide key={3} />,
|
|
|
|
<BlockchainSlide key={4} />,
|
|
|
|
<WhySlide key={5} />,
|
2018-02-07 04:28:28 +00:00
|
|
|
<WhyMyCrypto key={6} />,
|
2018-01-11 18:13:14 +00:00
|
|
|
<SecureSlideOne key={7} />,
|
|
|
|
<SecureSlideTwo key={8} />,
|
|
|
|
<SecureSlideThree key={9} />,
|
|
|
|
<FinalSlide key={10} closeModal={this.closeModal} />
|
|
|
|
];
|
|
|
|
|
2018-05-11 15:15:32 +00:00
|
|
|
if (slides.length !== NUMBER_OF_ONBOARD_SLIDES) {
|
|
|
|
console.log('Slides length do not match const NUMBER_OF_ONBOARD_SLIDES');
|
2018-01-11 18:13:14 +00:00
|
|
|
}
|
|
|
|
const currentSlideIndex = this.props.slideNumber - 1;
|
|
|
|
|
|
|
|
return slides[currentSlideIndex];
|
|
|
|
};
|
|
|
|
|
|
|
|
private handlePreviousSlide = () => {
|
|
|
|
const prevSlideNum = this.props.slideNumber - 1;
|
|
|
|
localStorage.setItem(ONBOARD_LOCAL_STORAGE_KEY, String(prevSlideNum));
|
|
|
|
this.props.decrementSlide();
|
2018-01-13 08:26:08 +00:00
|
|
|
if (this.modal) {
|
2018-03-08 19:28:43 +00:00
|
|
|
this.modal.modalBody.scrollContentToTop();
|
2018-01-13 08:26:08 +00:00
|
|
|
}
|
2018-01-11 18:13:14 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
private handleNextSlide = () => {
|
|
|
|
const nextSlideNum = this.props.slideNumber + 1;
|
|
|
|
localStorage.setItem(ONBOARD_LOCAL_STORAGE_KEY, String(nextSlideNum));
|
|
|
|
this.props.incrementSlide();
|
2018-01-13 08:26:08 +00:00
|
|
|
if (this.modal) {
|
2018-03-08 19:28:43 +00:00
|
|
|
this.modal.modalBody.scrollContentToTop();
|
2018-01-13 08:26:08 +00:00
|
|
|
}
|
2018-01-11 18:13:14 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
function mapStateToProps(state: AppState) {
|
|
|
|
return {
|
|
|
|
sessionStarted: state.onboardStatus.sessionStarted,
|
|
|
|
slideNumber: state.onboardStatus.slideNumber
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, {
|
|
|
|
startOnboardSession,
|
|
|
|
resumeSlide,
|
|
|
|
decrementSlide,
|
|
|
|
incrementSlide,
|
|
|
|
showNotification
|
|
|
|
})(OnboardModal);
|