@xo-union/tk-component-header-nav/lib/components/HeaderNav/TopLevelMessageBar/index.js

import React, { useState } from "react";
import { useClickTracker } from "@xo-union/tk-component-analytics";
import { compose } from "@xo-union/react-css-modules";
import { Link } from "@tkww/orion-web-ds-action";
import { MessageBar } from "@tkww/orion-web-ds-message-bar";
import BlankButton from "@xo-union/component-blank-button";
import styles from "./styles.module.css";
import { useHeaderNavContext } from "../Context.js";

// eslint-disable-next-line react/prop-types
const TopLevelMessageBar = _ref => {
  let {
    isEnabled
  } = _ref;
  const [isVisible, setIsVisible] = useState(true);
  const {
    links
  } = useHeaderNavContext();
  const handleCloseBarClick = () => {
    sessionStorage.setItem('tk-header-rewards-bar-dismissed', 'true');
    setIsVisible(false);
  };
  const handleAnalyticsClick = useClickTracker({
    eventName: 'CTA Clicked',
    product: 'global banner',
    eventData: {
      product_area: 'Rewards Promo banner'
    }
  });
  return /*#__PURE__*/React.createElement(MessageBar, {
    onClick: handleAnalyticsClick,
    onCloseButtonClick: handleCloseBarClick,
    classes: compose({
      container: styles.container,
      'is-hidden': styles['is-hidden'],
      content: styles.content
    }),
    slots: {
      closeButton: {
        'data-trackable-selection': 'X',
        // Cast it as BlankButton because of the resets from MessageBar are not loading
        as: BlankButton,
        treatAs: 'button'
      }
    },
    visible: isVisible && isEnabled
  }, "Earn cash as you plan. Get a $20 gift card for every 200 points with", ' ', /*#__PURE__*/React.createElement(Link, {
    href: links.DASHBOARD_REWARDS,
    target: "_blank"
  }, "The Knot Rewards"));
};
export default TopLevelMessageBar;