import React, { PureComponent } from 'react';
import Joyride from 'react-joyride';
import { setStorage, getStorage, setDone, isDone } from '../../../common/utils/storageManager';
import { translate } from '../../../common/i18n';
import welcome from './welcome';

const setDoneCheck = () => {
    const doNotAskCheck = document.getElementById('do-not-ask-me-again');
    if (doNotAskCheck && doNotAskCheck.checked) {
        setDone('welcomeFinished');
    }
};

class Tour extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            steps: welcome,
        };
    }
    componentWillMount() {
        if (window) {
            window.tour = {
                next: () => this.joyride.next(),
                stop: () => {
                    setDoneCheck();
                    setStorage('closedTourPopup', Date.now());
                    this.joyride.stop();
                },
            };
        }
    }
    render() {
        const callback = data => {
            if (data.index === 0 && data.type === 'step:after') {
                setDoneCheck();
            }
        };
        const shouldShowTourPopup = () => {
            const dayHasPassed = () => {
                const timeDifference = Date.now() - (parseInt(getStorage('closedTourPopup')) || 0);
                return timeDifference > 24 * 60 * 60 * 1000;
            };
            return !isDone('welcomeFinished') && dayHasPassed();
        };
        return (
            shouldShowTourPopup() && (
                <div className="tour-first-pop-up">
                    <Joyride
                        autoStart
                        run
                        keyboardNavigation={false}
                        showOverlay={false}
                        type="continuous"
                        locale={{
                            next: translate('Next'),
                            back: translate('Back'),
                            last: translate('Done'),
                        }}
                        ref={e => {
                            this.joyride = e;
                        }}
                        steps={this.state.steps}
                        callback={callback}
                    />
                </div>
            )
        );
    }
}

export default Tour;

@@ -84,16 +84,23 @@
 import %7B
+ set as
  setStor
@@ -103,16 +103,23 @@
 Storage,
+ get as
  getStor

Fix aliases