text: import React from 'react';
  import PropTypes from 'prop-types';
  import { compose } from 'redux';
  import { connect } from 'react-redux';
  import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
  import { isScrollingDisabled } from '../../ducks/UI.duck';
  import { TopbarContainer } from '../../containers';
  import {
    Page,
    LayoutSideNavigation,
    LayoutWrapperMain,
    LayoutWrapperSideNav,
    LayoutWrapperTopbar,
    LayoutWrapperFooter,
    PrivacyPolicy,
    Footer,
  } from '../../components';
  import config from '../../config';
  
  import css from './FAQsPage.module.css';
  import FAQs from '../../components/FAQs/FAQs';
  
  const FAQsPageComponent = props => {
    const { scrollingDisabled, intl } = props;
  
    const tabs = [
      {
        text: intl.formatMessage({ id: 'FAQsPage.privacyTabTitle' }),
        selected: false,
        linkProps: {
          name: 'FAQsPage',
        },
      },
      {
        text: intl.formatMessage({ id: 'FAQsPage.tosTabTitle' }),
        selected: false,
        linkProps: {
          name: 'TermsOfServicePage',
        },
      },
      {
        text: intl.formatMessage({ id: 'FAQsPage.ewTabTitle' }),
        selected: false,
        linkProps: {
          name: 'ExperienceWaviers',
        },
      },
      {
        text: intl.formatMessage({ id: 'FAQsPage.heading' }),
        selected: true,
        linkProps: {
          name: 'FAQsPage',
        },
      },
    ];
    const siteTitle = config.siteTitle;
    const schemaTitle = intl.formatMessage({ id: 'FAQsPage.schemaTitle' }, { siteTitle });
    const schema = {
      '@context': 'http://schema.org',
      '@type': 'WebPage',
      name: schemaTitle,
    };
    return (
      <Page title={schemaTitle} scrollingDisabled={scrollingDisabled} schema={schema}>
        <LayoutSideNavigation>
          <LayoutWrapperTopbar>
            <TopbarContainer currentPage="FAQsPage" />
          </LayoutWrapperTopbar>
          <LayoutWrapperSideNav tabs={tabs} />
          <LayoutWrapperMain>
            <div className={css.content}>
              <h1 className={css.heading}>
                <FormattedMessage id="FAQsPage.heading" />
              </h1>
              <FAQs />
            </div>
          </LayoutWrapperMain>
          <LayoutWrapperFooter>
            <Footer />
          </LayoutWrapperFooter>
        </LayoutSideNavigation>
      </Page>
    );
  };
  
  const { bool } = PropTypes;
  
  FAQsPageComponent.propTypes = {
    scrollingDisabled: bool.isRequired,
  
    // from injectIntl
    intl: intlShape.isRequired,
  };
  
  const mapStateToProps = state => {
    return {
      scrollingDisabled: isScrollingDisabled(state),
    };
  };
  
  const FAQsPage = compose(
    connect(mapStateToProps),
    injectIntl
  )(FAQsPageComponent);
  
  export default FAQsPage;
  