application/components/support.js

import React from 'react';
import moment from 'moment-timezone';
import Paper from 'material-ui/Paper';
import RaisedButton from 'material-ui/RaisedButton';
import FontIcon from 'material-ui/FontIcon';
import Subheader from 'material-ui/Subheader';
import Divider from 'material-ui/Divider';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';

import {Row, Col} from './flexbox';
import Config from './../config';
import CurrentUser from './../current-user';

class Support extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            status: {
                indicator: 'none',
                description: 'Checking...'
            }
        };

        this.interval = false;

        this.pollStatuspage = this.pollStatuspage.bind(this);
    }

    pollStatuspage() {
        this.sp.status({
            success : (data) => {
                this.setState({'status': data.status});
            }
        });
    }

    componentWillMount() {
        this.initStatusPage.call(this);
    }

    initStatusPage() {
        if (typeof StatusPage == 'undefined') {
            setTimeout(() => {
                this.initStatusPage.call(this);
            }, 1000);
            return;
        }

        this.sp = new StatusPage.page({page : 'p5v3w1gsm6f7'});
        this.interval = setInterval(this.pollStatuspage, 30000);
        this.pollStatuspage();
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        const n = '%0A';
        const sp = '%20';
        const mailSubject = encodeURIComponent('CEO Support request');
        const mailContent = encodeURIComponent('---- Please keep the following to help us investigate the problem ----') + n
                          + encodeURIComponent('Client Code: ' + Config.get('client_code')) + n
                          + encodeURIComponent('Publication: ' + Config.get('publication_srn')) + n
                          + encodeURIComponent('User: ' + CurrentUser.getSrn()) + n
                          + encodeURIComponent('Site Offset: ' + Config.get('publication_timezone')) + n
                          + encodeURIComponent('User Offset: ' + moment.tz.guess()) + n
                          + encodeURIComponent('API Version: ' + Config.get('system_version')) + n
                          + encodeURIComponent('APP Version: ' + Config.get('system_version')) + n
                          + encodeURIComponent('ADB Enabled: ' + Config.get('_adb')) + n
                          + encodeURIComponent('------- END DEBUG ------') + n;

        return (
            <div className="setting-root">
                <Row>
                    <Col xs={12} md={10} lg={9} offsetMd={1} offsetLg={1}>
                        <Paper className='padded'>
                            <h1>Halp!</h1>

                            <Row>
                                <Col xs={4}>
                                    <p>
                                        SNworks maintains a <a href="https://snworks.zendesk.com/hc/en-us" target="_blank">Knowledge Base</a> of quick hits and helpful articles.
                                    </p>
                                    <p>
                                        You can also <a href={'mailto:support@getsnworks.com?subject=' + mailSubject + '&body=' + mailContent}>email us.</a>
                                    </p>

                                    <RaisedButton
                                        label='Contact Support'
                                        primary={true}
                                        href={'mailto:support@getsnworks.com?subject=' + mailSubject + '&body=' + mailContent}
                                        icon={<FontIcon className="fa fa-life-ring"></FontIcon>}
                                        />

                                    <div className={'status ' + this.state.status.indicator} style={{marginTop: '20px'}}>
                                        <h5>Current System Status:</h5>
                                        {this.state.status.description}
                                    </div>
                                </Col>
                                <Col xs={8}>

                                    <p className='small'>
                                        <strong>Publication ID:</strong>
                                        <br />
                                        {Config.get('publication_srn')}
                                    </p>
                                    <Divider />
                                    <p className='small'>
                                        <strong>User ID:</strong>
                                        <br />
                                        {CurrentUser.getSrn()}
                                    </p>
                                    <Divider />
                                    <p className='small'>
                                        <strong>Site Timezone:</strong>
                                        <br />
                                        {Config.get('publication_timezone')}
                                    </p>
                                    <Divider />
                                    <p className='small'>
                                        <strong>Local Timezone:</strong>
                                        <br />
                                        {moment.tz.guess()}
                                    </p>
                                    <Divider />
                                    <p className='small'>
                                        <strong>User Agent:</strong>
                                        <br />
                                        {navigator.userAgent}
                                    </p>
                                    <Divider />
                                    <p className='small'>
                                        <strong>Reporting API Version:</strong>
                                        <br />
                                        {Config.get('system_version')}
                                    </p>
                                    <Divider />
                                    <p className='small'>
                                        <strong>Reporting APP Version:</strong>
                                        <br />
                                        {Config.get('system_version')}
                                    </p>
                                    <Divider />
                                    {/*
                                        ADB is an obfuscated reference to adblocker.
                                        We just call it ADB so folks don't get prickly
                                        about why we check it.

                                        AdBlocker can cause a number of resource loading
                                        issues so it's helpful to know if it's active.
                                    */}
                                    <p className='small'>
                                        <strong>ADB Enabled:</strong>
                                        <br />
                                        {Config.get('_adb') ? 'Yes' : 'No'}
                                    </p>
                                </Col>
                            </Row>
                        </Paper>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default Support;