Untitled

/**
 *
 * UsersEnterAndLeave
 *
 */

import React from 'react';
import { Row, Col, Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
import NumberFormat from 'react-number-format';
import PropTypes from 'prop-types';
import { FormattedHTMLMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { BaseContainer, SlideTitle, RbLoader, ErrorData } from 'components/ui';
import { connectionCheck } from '../../utils/connectionCheck';
import { secondsToHms, urlNameChange } from '../../utils/rbCommonFunctions';
import messages from './messages';

class UsersEnterAndLeave extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      slideTitleAnim: '',
      isRendered: false,
    };
    this.getLandingRowContents = this.getLandingRowContents.bind(this);
    this.getExitRowContents = this.getExitRowContents.bind(this);
    this.listEditing = this.listEditing.bind(this);
    this.afterSlideChange = this.afterSlideChange.bind(this);
    this.beforeSlideChange = this.beforeSlideChange.bind(this);
  }

  componentDidMount() {
    if (this.props.firstSlide) {
      this.afterSlideChange();
    }
  }

  beforeSlideChange() {
    setTimeout(() => {
      this.setState({
        slideTitleAnim: '',
        isRendered: false,
      });
    }, 1000);
  }

  afterSlideChange() {
    this.setState({
      isRendered: true,
      slideTitleAnim: 'fade-in',
    });
  }

  getExitRowContents(
    exitpagesAndExits,
    exitpagesAndPageviews,
    exitpagesAndExitRate,
    isEmptyExitpagesAndPageviews,
    isEmptyExitpagesAndExitRate,
  ) {
    const rows = [];

    for (let i = 0; i < exitpagesAndExits.length; i += 1) {
      let tempPageviews;
      let tempExitRate;

      if (!isEmptyExitpagesAndPageviews) {
        tempPageviews = exitpagesAndPageviews.find(
          item => item.name === exitpagesAndExits[i].name,
        );
      }

      let exitRateWhenNull = '-';

      if (!isEmptyExitpagesAndExitRate) {
        tempExitRate = exitpagesAndExitRate.find(
          item => item.name === exitpagesAndExits[i].name,
        );
        if (
          tempExitRate === undefined &&
          tempPageviews !== undefined &&
          tempPageviews.pageviews !== 0
        ) {
          exitRateWhenNull = parseInt(
            (exitpagesAndExits[i].sessions / tempPageviews.sessions) * 100,
            10,
          );
        }
      }

      rows.push(
        <tr
          key={i}
          className={i % 2 === 1 ? 'table-row-odd' : 'table-row-even'}
        >
          <td>{exitpagesAndExits[i].name}</td>
          <td>
            <NumberFormat
              value={exitpagesAndExits[i].sessions}
              displayType="text"
              thousandSeparator
            />
          </td>
          {isEmptyExitpagesAndPageviews ? null : (
            <td>
              <NumberFormat
                value={
                  tempPageviews === undefined ? '-' : tempPageviews.sessions
                }
                displayType="text"
                thousandSeparator
              />
            </td>
          )}
          {isEmptyExitpagesAndExitRate ? null : (
            <td>
              {tempExitRate === undefined
                ? exitRateWhenNull
                : parseFloat(tempExitRate.sessions).toFixed(2)}
            </td>
          )}
        </tr>,
      );

      if (rows.length === 5) {
        break;
      }
    }
    return rows;
  }

  getLandingRowContents(
    landingpagesAndSessinons,
    landingpagesAndSessionsRate,
    landingpagesAndAvgSessionDuration,
    landingpagesAndTransactions,
    landingpagesAndRevenue,
    isEmptyLandingpagesAndSessionsRate,
    isEmptyLandingpagesAndAvgSessionDuration,
    isEmptyLandingpagesAndTransactions,
    isEmptyLandingpagesAndRevenue,
  ) {
    const rows = [];

    for (let i = 0; i < landingpagesAndSessinons.length; i += 1) {
      let tempSessionsRate;
      let tempAvgSessionDuration;
      let tempTransactions;
      let tempRevenue;

      if (!isEmptyLandingpagesAndSessionsRate) {
        tempSessionsRate = landingpagesAndSessionsRate.find(
          item => item.name === landingpagesAndSessinons[i].name,
        );
      }

      if (!isEmptyLandingpagesAndAvgSessionDuration) {
        tempAvgSessionDuration = landingpagesAndAvgSessionDuration.find(
          item => item.name === landingpagesAndSessinons[i].name,
        );
      }

      if (!isEmptyLandingpagesAndTransactions) {
        tempTransactions = landingpagesAndTransactions.find(
          item => item.name === landingpagesAndSessinons[i].name,
        );
      }

      if (!isEmptyLandingpagesAndRevenue) {
        tempRevenue = landingpagesAndRevenue.find(
          item => item.name === landingpagesAndSessinons[i].name,
        );
      }

      rows.push(
        <tr
          key={i}
          className={i % 2 === 1 ? 'table-row-odd' : 'table-row-even'}
        >
          <td>{landingpagesAndSessinons[i].name}</td>

          <td>
            <NumberFormat
              value={landingpagesAndSessinons[i].sessions}
              displayType="text"
              thousandSeparator
            />
          </td>

          {isEmptyLandingpagesAndSessionsRate ? null : (
            <td>
              {tempSessionsRate === undefined
                ? '-'
                : parseFloat(tempSessionsRate.sessions).toFixed(2)}
            </td>
          )}

          {isEmptyLandingpagesAndAvgSessionDuration ? null : (
            <td>
              {tempAvgSessionDuration === undefined
                ? '00:00:00'
                : secondsToHms(tempAvgSessionDuration.sessions)}
            </td>
          )}

          {isEmptyLandingpagesAndTransactions ? null : (
            <td>
              <NumberFormat
                value={
                  tempTransactions === undefined
                    ? '-'
                    : tempTransactions.sessions
                }
                displayType="text"
                thousandSeparator
              />
            </td>
          )}

          {isEmptyLandingpagesAndRevenue ? null : (
            <td>
              <NumberFormat
                value={tempRevenue === undefined ? '-' : tempRevenue.sessions}
                displayType="text"
                thousandSeparator
                decimalSeparator="."
                decimalScale={2}
                fixedDecimalScale
                prefix="$"
              />
            </td>
          )}
        </tr>,
      );

      if (rows.length === 5) {
        break;
      }
    }
    return rows;
  }

  listEditing(list) {
    return list
      .filter(item => item.name.search('Change') === -1)
      .map(item => ({
        name: item.name,
        sessions: item.sessions,
      }))
      .sort((a, b) => (a.sessions < b.sessions ? 1 : -1));
  }

  renderTable() {
    const { data } = this.props && this.props.report;
    const gaData = data && data.analytics;
    const connectList = data && data.connectList;

    let totalSessions = 0;
    let exitpagesAndExits;
    let exitpagesAndPageviews;
    let exitpagesAndExitRate;
    let landingpagesAndSessinons;
    let landingpagesAndSessionsRate;
    let landingpagesAndAvgSessionDuration;
    let landingpagesAndTransactions;
    let landingpagesAndRevenue;

    let isEmptyExitpagesAndPageviews = false;
    let isEmptyExitpagesAndExitRate = false;
    let isEmptyLandingpagesAndSessionsRate = false;
    let isEmptyLandingpagesAndAvgSessionDuration = false;
    let isEmptyLandingpagesAndTransactions = false;
    let isEmptyLandingpagesAndRevenue = false;

    const isConnectionError = !connectionCheck(connectList, 'GOOGLE');
    let isError = false;
    let isLandingError = false;
    let isExitError = false;
    let errorMessageType;
    let isAnalyticsError = false;

    if (!data) {
      isError = true;
      errorMessageType = 'errorMessage';
    } else if (isConnectionError || !gaData) {
      isAnalyticsError = true;
      errorMessageType = 'googleErrorMessage';
    }

    if (!isError && !isConnectionError && !isAnalyticsError) {
      totalSessions = gaData.basic.sessions;
      exitpagesAndExits = this.listEditing(gaData.exitpagesAndExits);
      exitpagesAndPageviews = this.listEditing(gaData.exitpagesAndPageviews);
      exitpagesAndExitRate = this.listEditing(gaData.exitpagesAndExitRate);
      landingpagesAndSessinons = this.listEditing(
        gaData.landingpagesAndSessinons,
      );
      landingpagesAndSessionsRate = this.listEditing(
        gaData.landingpagesAndSessionsRate,
      );
      landingpagesAndAvgSessionDuration = this.listEditing(
        gaData.landingpagesAndAvgSessionDuration,
      );
      landingpagesAndTransactions = this.listEditing(
        gaData.landingpagesAndTransactions,
      );
      landingpagesAndRevenue = this.listEditing(gaData.landingpagesAndRevenue);

      exitpagesAndExits = urlNameChange(
        exitpagesAndExits,
        '/',
        'Homepage',
      );
      exitpagesAndPageviews = urlNameChange(
        exitpagesAndPageviews,
        '/',
        'Homepage',
      );
      exitpagesAndExitRate = urlNameChange(
        exitpagesAndExitRate,
        '/',
        'Homepage',
      );
      landingpagesAndSessinons = urlNameChange(
        landingpagesAndSessinons,
        '/',
        'Homepage',
      );
      landingpagesAndSessionsRate = urlNameChange(
        landingpagesAndSessionsRate,
        '/',
        'Homepage',
      );
      landingpagesAndAvgSessionDuration = urlNameChange(
        landingpagesAndAvgSessionDuration,
        '/',
        'Homepage',
      );
      landingpagesAndTransactions = urlNameChange(
        landingpagesAndTransactions,
        '/',
        'Homepage',
      );
      landingpagesAndRevenue = urlNameChange(
        landingpagesAndRevenue,
        '/',
        'Homepage',
      );

      isEmptyExitpagesAndPageviews =
        !exitpagesAndPageviews || exitpagesAndPageviews.length === 0;
      isEmptyExitpagesAndExitRate =
        !exitpagesAndExitRate || exitpagesAndExitRate.length === 0;
      isEmptyLandingpagesAndSessionsRate =
        !landingpagesAndSessionsRate ||
        landingpagesAndSessionsRate.length === 0;
      isEmptyLandingpagesAndAvgSessionDuration =
        !landingpagesAndAvgSessionDuration ||
        landingpagesAndAvgSessionDuration.length === 0;
      isEmptyLandingpagesAndTransactions =
        !landingpagesAndTransactions ||
        landingpagesAndTransactions.length === 0;
      isEmptyLandingpagesAndRevenue =
        !landingpagesAndRevenue || landingpagesAndRevenue.length === 0;

      if (!landingpagesAndSessinons || landingpagesAndSessinons.length === 0) {
        isLandingError = true;
        errorMessageType = 'noDataErrorMessage';
      }

      if (!exitpagesAndExits || exitpagesAndExits.length === 0) {
        isExitError = true;
        errorMessageType = 'noDataErrorMessage';
      }
    }

    if (isError || isConnectionError || isLandingError || isAnalyticsError) {
      landingpagesAndRevenue = [
        { name: '/', sessions: 6380000 },
        { name: '/homepageChange', sessions: 3 },
      ];
      landingpagesAndSessinons = [
        { name: '/', sessions: 3000 },
        { name: '/homepageChange', sessions: 1287 },
      ];
      landingpagesAndSessionsRate = [
        { name: '/', sessions: 5.2 },
        { name: '/homepageChange', sessions: 3 },
      ];
      landingpagesAndAvgSessionDuration = [
        { name: '/', sessions: 123 },
        { name: '/homepageChange', sessions: 58 },
      ];
      landingpagesAndTransactions = [
        { name: '/', sessions: 3200 },
        { name: '/homepageChange', sessions: 3 },
      ];
    }

    if (isError || isConnectionError || isExitError || isAnalyticsError) {
      exitpagesAndExits = [
        { name: '/', sessions: 52 },
        { name: '/commercial-listings', sessions: 34 },
        { name: '/contact-us', sessions: 13 },
        { name: '/directory', sessions: 3 },
      ];
      exitpagesAndExitRate = [
        { name: '/', sessions: 52 },
        { name: '/commercial-listings', sessions: 34 },
        { name: '/contact-us', sessions: 13 },
        { name: '/directory', sessions: 3 },
      ];
      exitpagesAndPageviews = [
        { name: '/', sessions: 52 },
        { name: '/commercial-listings', sessions: 34 },
        { name: '/contact-us', sessions: 13 },
        { name: '/directory', sessions: 3 },
      ];
    }

    return (
      <div  style={{width:750,right: 280}} className="full-height">
        {isError || isConnectionError || isAnalyticsError ? (
          <ErrorData errorMessageType={errorMessageType} />
        ) : null}
        <Row className="equal">
          <Col sm={12} className="v-middle">
            <SlideTitle
              className={this.state.slideTitleAnim}
              message={this.props.content.title || messages.title}
            />
            <FormattedHTMLMessage {...messages.slideTitle}>
              {title => (
                <Helmet>
                  <title>{title}</title>
                </Helmet>
              )}
            </FormattedHTMLMessage>

            {
              <div className="table-centering table-alignment">
                <Table
                  className={
                    isError ||
                    isConnectionError ||
                    isLandingError ||
                    isAnalyticsError
                      ? 'table-breakdown-error'
                      : 'table-breakdown'
                  }
                  responsive
                  striped
                  bordered
                  condensed
                >
                  <thead>
                    <tr>
                      <OverlayTrigger
                        overlay={
                          <Tooltip id="landingPageDesc">
                            <FormattedHTMLMessage
                              {...messages.landingPageDesc}
                            />
                          </Tooltip>
                        }
                        placement="top"
                        delayShow={300}
                        delayHide={150}
                      >
                        <th>
                          <FormattedHTMLMessage {...messages.landingPage} />
                          <br />
                          <FormattedHTMLMessage {...messages.topFive} />
                        </th>
                      </OverlayTrigger>

                      <OverlayTrigger
                        overlay={
                          <Tooltip id="sessionsDesc">
                            <FormattedHTMLMessage {...messages.sessionsDesc} />
                          </Tooltip>
                        }
                        placement="top"
                        delayShow={300}
                        delayHide={150}
                      >
                        <th>
                          <FormattedHTMLMessage {...messages.sessions} />
                          <br />
                          (<FormattedHTMLMessage
                            {...messages.totalSessions}
                          />: {totalSessions})
                        </th>
                      </OverlayTrigger>

                      {isEmptyLandingpagesAndSessionsRate ? null : (
                        <OverlayTrigger
                          overlay={
                            <Tooltip id="pageSessionsDesc">
                              <FormattedHTMLMessage
                                {...messages.pageSessionsDesc}
                              />
                            </Tooltip>
                          }
                          placement="top"
                          delayShow={300}
                          delayHide={150}
                        >
                          <th>
                            <FormattedHTMLMessage {...messages.pageSessions} />
                          </th>
                        </OverlayTrigger>
                      )}
                      {isEmptyLandingpagesAndAvgSessionDuration ? null : (
                        <OverlayTrigger
                          overlay={
                            <Tooltip id="avgSessionDurationDesc">
                              <FormattedHTMLMessage
                                {...messages.avgSessionDurationDesc}
                              />
                            </Tooltip>
                          }
                          placement="top"
                          delayShow={300}
                          delayHide={150}
                        >
                          <th>
                            <FormattedHTMLMessage
                              {...messages.avgSessionDuration}
                            />
                          </th>
                        </OverlayTrigger>
                      )}
                      {isEmptyLandingpagesAndTransactions ? null : (
                        <OverlayTrigger
                          overlay={
                            <Tooltip id="transactionsDesc">
                              <FormattedHTMLMessage
                                {...messages.transactionsDesc}
                              />
                            </Tooltip>
                          }
                          placement="top"
                          delayShow={300}
                          delayHide={150}
                        >
                          <th>
                            <FormattedHTMLMessage {...messages.transactions} />
                          </th>
                        </OverlayTrigger>
                      )}
                      {isEmptyLandingpagesAndRevenue ? null : (
                        <OverlayTrigger
                          overlay={
                            <Tooltip id="revenueDesc">
                              <FormattedHTMLMessage {...messages.revenueDesc} />
                            </Tooltip>
                          }
                          placement="top"
                          delayShow={300}
                          delayHide={150}
                        >
                          <th>
                            <FormattedHTMLMessage {...messages.revenue} />
                          </th>
                        </OverlayTrigger>
                      )}
                    </tr>
                  </thead>
                  <tbody className="table-body">
                    {this.getLandingRowContents(
                      landingpagesAndSessinons,
                      landingpagesAndSessionsRate,
                      landingpagesAndAvgSessionDuration,
                      landingpagesAndTransactions,
                      landingpagesAndRevenue,
                      isEmptyLandingpagesAndSessionsRate,
                      isEmptyLandingpagesAndAvgSessionDuration,
                      isEmptyLandingpagesAndTransactions,
                      isEmptyLandingpagesAndRevenue,
                    )}
                  </tbody>
                </Table>
                {isLandingError ? (
                  <ErrorData errorMessageType={errorMessageType} />
                ) : null}
              </div>
            }

            <div className="table-centering table-alignment">
              <Table
                className={
                  isError ||
                  isConnectionError ||
                  isExitError ||
                  isAnalyticsError
                    ? 'table-breakdown-error'
                    : 'table-breakdown'
                }
                responsive
                striped
                bordered
                condensed
              >
                <thead>
                  <tr>
                    <OverlayTrigger
                      overlay={
                        <Tooltip id="exitPagesDesc">
                          <FormattedHTMLMessage {...messages.exitPagesDesc} />
                        </Tooltip>
                      }
                      placement="top"
                      delayShow={300}
                      delayHide={150}
                    >
                      <th>
                        <FormattedHTMLMessage {...messages.exitPages} />
                        <br />
                        <FormattedHTMLMessage {...messages.topFive} />
                      </th>
                    </OverlayTrigger>

                    <OverlayTrigger
                      overlay={
                        <Tooltip id="exitsDesc">
                          <FormattedHTMLMessage {...messages.exitsDesc} />
                        </Tooltip>
                      }
                      placement="top"
                      delayShow={300}
                      delayHide={150}
                    >
                      <th>
                        <FormattedHTMLMessage {...messages.exits} />
                      </th>
                    </OverlayTrigger>

                    {isEmptyExitpagesAndPageviews ? null : (
                      <OverlayTrigger
                        overlay={
                          <Tooltip id="pagesviewsDesc">
                            <FormattedHTMLMessage
                              {...messages.pagesviewsDesc}
                            />
                          </Tooltip>
                        }
                        placement="top"
                        delayShow={300}
                        delayHide={150}
                      >
                        <th>
                          <FormattedHTMLMessage {...messages.pagesviews} />
                        </th>
                      </OverlayTrigger>
                    )}
                    {isEmptyExitpagesAndExitRate ? null : (
                      <OverlayTrigger
                        overlay={
                          <Tooltip id="exitRateDesc">
                            <FormattedHTMLMessage {...messages.exitRateDesc} />
                          </Tooltip>
                        }
                        placement="top"
                        delayShow={300}
                        delayHide={150}
                      >
                        <th>
                          <FormattedHTMLMessage {...messages.exitRate} />
                        </th>
                      </OverlayTrigger>
                    )}
                  </tr>
                </thead>
                <tbody className="table-body">
                  {this.getExitRowContents(
                    exitpagesAndExits,
                    exitpagesAndPageviews,
                    exitpagesAndExitRate,
                    isEmptyExitpagesAndPageviews,
                    isEmptyExitpagesAndExitRate,
                  )}
                </tbody>
              </Table>
              {isExitError ? (
                <ErrorData errorMessageType={errorMessageType} />
              ) : null}
            </div>
          </Col>
        </Row>
      </div>
    );
  }

  render() {
    return (
      <BaseContainer>
        {!this.state.isRendered ? (
          <Row className="equal">
            <RbLoader />
          </Row>
        ) : (
          this.renderTable()
        )}
      </BaseContainer>
    );
  }
}

UsersEnterAndLeave.propTypes = {
  report: PropTypes.object,
  firstSlide: PropTypes.bool,
  messagesId: PropTypes.string,
  errorContent: PropTypes.object,
};

export default UsersEnterAndLeave;