@kiwicom/smart-faq/lib/shared/StaticFAQ/SearchBar.js

Smart FAQ

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _Search = _interopRequireDefault(require("@kiwicom/orbit-components/lib/icons/Search"));

var _context = require("@kiwicom/nitro/lib/services/intl/context");

var _reactRouter = require("react-router");

var _Input = _interopRequireDefault(require("../../SmartFAQ/common/Input"));

var _SearchState = require("../../SmartFAQ/context/SearchState");

var _trackers = require("../../shared/helpers/analytics/trackers");

var _functionUtils = require("../../SmartFAQ/helpers/functionUtils");

var _tracker = require("../../shared/cuckoo/tracker");

// @flow
var logSearchQuery = (0, _functionUtils.debounce)(function (query) {
  (0, _trackers.simpleTracker)('smartFAQBookingOverview', {
    action: 'search',
    searchedText: query.toLowerCase()
  });
  (0, _tracker.track)('FAQs', 'search', {
    searchedText: query.toLowerCase()
  });
});

var SearchBar = function SearchBar(_ref) {
  var history = _ref.history,
      autofocus = _ref.autofocus;
  return React.createElement(_SearchState.SearchState.Consumer, null, function (_ref2) {
    var searchText = _ref2.searchText,
        changeSearchText = _ref2.changeSearchText,
        incrementQueriesCount = _ref2.incrementQueriesCount,
        resetQueriesCount = _ref2.resetQueriesCount;
    var isSearching = searchText.length > 0;

    var onSearchCancel = function onSearchCancel() {
      changeSearchText('');
      resetQueriesCount();
    };

    var onSearchChange = function onSearchChange(e
    /*: SyntheticInputEvent<HTMLInputElement>*/
    ) {
      var query = e.target.value;

      if (query.length) {
        incrementQueriesCount();
        changeSearchText(query);

        if (query.length >= 2) {
          logSearchQuery(query);
        }
      } else {
        onSearchCancel();
      }
    };

    return React.createElement(_context.Consumer, null, function (intl) {
      var placeholder = intl.translate("smartfaq.search_input.placeholder");
      return React.createElement(_Input.default, {
        value: searchText,
        onChange: onSearchChange,
        placeholder: placeholder,
        icon: React.createElement(_Search.default, {
          customColor: "#bac7d5"
        }),
        onReset: isSearching ? onSearchCancel : undefined,
        onFocus: function onFocus() {
          return history.push('/faq');
        },
        dataCy: "input-staticFAQ",
        autoFocus: autofocus
      });
    });
  });
};

var _default = (0, _reactRouter.withRouter)(SearchBar);

exports.default = _default;