// @flow
import $ from 'jquery';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
import classnames from 'classnames';
import { ConsentControls } from './ConsentControls';
import { changeConsent } from '../state/consent';
import type { AppState } from '../state/reducers';
import './ConsentComponent.css';

type Props = {
  isNewMember: boolean,
  isRequiredNew: boolean,
  consented: ?boolean,
  variant: string,
  dispatch: (action: any) => void,
};

class ConsentComponent extends Component {
  props: Props;

  changeConsent = (consented: boolean) => {
    this.props.dispatch(changeConsent(consented));
  };

  shortLabels() {
    switch (this.props.variant) {
      case 'simple':
        return true;
      default:
        return false;
    }
  }

  componentDidUpdate() {
    $.publish('sidebar:height_change');
  }

  render() {
    const { consented, shouldRender, shouldRenderHidden, variant } = this.props;
    if (!shouldRender) return null;

    const classNames = classnames('ConsentComponent', variant, {
      'hidden-irrelevant': shouldRenderHidden,
    });

    return (
      <div className={classNames}>
        <div className="ConsentComponent--opt-in-reason opt-in-reason">
          <FormattedHTMLMessage id="consent.opt_in_reason" />
        </div>
        <div className={classnames('ConsentComponent--prompt', variant)}>
          <ConsentControls
            consented={consented}
            onChange={this.changeConsent}
            shortLabels={this.shortLabels()}
          />
        </div>
        {consented === false && (
          <div className="ConsentComponent--opt-out-warn">
            <h5 className="ConsentComponent--opt-out-warn-title">
              <FormattedHTMLMessage id="consent.opt_out_warn_title" />
            </h5>
            <p className="ConsentComponent--opt-out-warn-message">
              <FormattedHTMLMessage id="consent.opt_out_warn_message" />
            </p>
          </div>
        )}
        <div className="ConsentComponent--how-to-opt-out how-to-opt-out">
          <FormattedHTMLMessage id="consent.how_to_opt_out" />
        </div>
      </div>
    );
  }
}

const mapStateToProps = ({ member, consent }: AppState) => {
  const { consented, variant, isRequiredNew, isRequiredExisting } = consent;
  const shouldRender =
    (member && isRequiredExisting) || (!member && isRequiredNew);
  const shouldRenderHidden = !!member;

  return {
    shouldRenderHidden,
    shouldRender,
    consented,
    variant,
  };
};
export default connect(mapStateToProps)(ConsentComponent);

@@ -422,45 +422,51 @@
 %7B%0A  
-isNewMember: boolean,%0A  isRequiredNew
+shouldRenderHidden: boolean,%0A  shouldRender
 : bo

Fix flow annotations for ConsentComponent props