# All files / composer/components ProductRolloutTooltip.jsx

0% Statements 0/7
0% Branches 0/2
0% Functions 0/4
0% Lines 0/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50

     import React from 'react';
    import PropTypes from 'prop-types';
    import NotificationContainer from '../components/NotificationContainer';
    import { NotificationScopes } from '../AppConstants';
    import A from '../components/A';
    import Button from '../components/Button';
    import NotificationActionCreators from '../action-creators/NotificationActionCreators';
    import styles from './css/ProductRolloutTooltip.css';

    class ProductRolloutTooltip extends React.Component {
      static propTypes = {
        visibleNotifications: PropTypes.array.isRequired,
      };

      // Prevent side-effects on composers' expanded state when clicking in the tooltip
      onTooltipClick = (e) => e.stopPropagation();

      onButtonClick = (e) => {
        e.stopPropagation();

        // There's only supposed to be one such notification at all times
        const productRolloutNotification = this.props.visibleNotifications.find((notif) => (
          notif.scope === NotificationScopes.MC_ROLLOUT_INFO
        ));

        NotificationActionCreators.removeNotification(productRolloutNotification.id);
      };

      render() {
        const notificationContainerClassNames = {
          container: this.props.isOmniboxEnabled ? styles.bottomPositionedContained : styles.container,
          notification: styles.tooltip,
        };

        return (
          <NotificationContainer
            visibleNotifications={this.props.visibleNotifications}
            classNames={notificationContainerClassNames}
            scope={NotificationScopes.MC_ROLLOUT_INFO}
            onClick={this.onTooltipClick}
          >
            <Button className={styles.button} onClick={this.onButtonClick}>Awesome, got it!</Button>
            <A href="/new-buffer-composer" target="_blank" rel="noopener noreferrer">Learn More</A>
          </NotificationContainer>
        );
      }
    }

    export default ProductRolloutTooltip;