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, WhyMyCrypto, SecureSlideOne, SecureSlideTwo, SecureSlideThree, FinalSlide } from './components'; const ONBOARD_LOCAL_STORAGE_KEY = 'onboardStatus'; const NUMBER_OF_SLIDES = 10; 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 { private modal: Modal | null = null; constructor(props: Props) { 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 }); } if (currentSlide > 0 && currentSlide < NUMBER_OF_SLIDES) { this.props.resumeSlide(currentSlide); this.setState({ isOpen: true }); const onboardResumeMessage = translate('ONBOARD_RESUME'); // Wait a sec so it doesn't get lost in the page-load setTimeout(() => { this.props.showNotification('info', onboardResumeMessage, 6000); }, 1200); } } } public render() { const { isOpen } = this.state; const { slideNumber } = this.props; const firstButtons: IButton[] = [ { disabled: slideNumber === NUMBER_OF_SLIDES, text: translate('ACTION_6'), type: 'primary', onClick: this.handleNextSlide }, { disabled: slideNumber === 1, text: translate('ACTION_4'), type: 'default', onClick: this.handlePreviousSlide } ]; const lastButtons: IButton[] = [ { text: translate('ACTION_10'), type: 'primary', onClick: this.closeModal }, { text: translate('ACTION_4'), type: 'default', onClick: this.handlePreviousSlide } ]; const buttons = slideNumber === NUMBER_OF_SLIDES ? lastButtons : firstButtons; const steps = new Array(NUMBER_OF_SLIDES).fill({}); return (
(slideNumber === NUMBER_OF_SLIDES ? this.closeModal : null)} >
{this.renderSlide()}
); } public closeModal = () => { this.setState({ isOpen: false }); }; public changeOnboardStatus = (slideNumber: number) => { localStorage.setItem(ONBOARD_LOCAL_STORAGE_KEY, String(slideNumber)); }; private renderSlide = () => { const slides = [ , , , , , , , , , ]; if (slides.length !== NUMBER_OF_SLIDES) { console.log('Slides length do not match const NUMBER_OF_SLIDES'); } 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(); if (this.modal) { this.modal.modalBody.scrollContentToTop(); } }; private handleNextSlide = () => { const nextSlideNum = this.props.slideNumber + 1; localStorage.setItem(ONBOARD_LOCAL_STORAGE_KEY, String(nextSlideNum)); this.props.incrementSlide(); if (this.modal) { this.modal.modalBody.scrollContentToTop(); } }; } function mapStateToProps(state: AppState) { return { sessionStarted: state.onboardStatus.sessionStarted, slideNumber: state.onboardStatus.slideNumber }; } export default connect(mapStateToProps, { startOnboardSession, resumeSlide, decrementSlide, incrementSlide, showNotification })(OnboardModal);