Able to get br search suggestion working

app/src/ep.config.json

@@ -94,6 +94,38 @@
     "pageId": "<PAGE_ID>",
     "applicationId": "<APP_ID>"
   },
+  "bloomreachSearch": {
+    "enable": true,
+    "config": {
+      "baseUri": "http://core.dxpapi.com/api/v1/core/?",
+      "accountId": "account_id=6226",
+      "authKey": "auth_key=fcao6uq86z58xup0",
+      "domainKey": "domain_key=elastic_path",
+      "requestId": "request_id=1239723156472",
+      "brUID2":"_br_uid_2=uid%3D8030319374785%3Av%3D11.8%3Ats%3D1536857546532%3Ahc%3D111",
+      "url": "url=www.bloomique.com",
+      "refurl": "ref_url=www.bloomique.com",
+      "keywordSearchConfig": {
+        "requestType": "request_type=search",
+        "rows": "rows=10",
+        "start": "start=0",
+        "facetLimit": "facet.limit=20",
+        "fl": "fl=pid%2Ctitle%2Cbrand%2Cprice%2Csale_price%2Cpromotions%2Cthumb_image%2Csku_thumb_images%2Csku_swatch_images%2Csku_color_group%2Curl%2Cprice_range%2Csale_price_range%2Cdescription",
+        "searchType": "search_type=keyword"
+      },
+      "suggestionConfig": {
+        "baseUri": "http://suggest.dxpapi.com/api/v1/suggest/?",
+        "requestType": "request_type=suggest"
+      },
+      "productRecommendationConfig": {
+        "requestType": "request_type=mlt",
+        "rows": "rows=10",
+        "start": "start=0",
+        "facetLimit": "facet.limit=20",
+        "fl": "fl=pid%2Ctitle%2Cbrand%2Cprice%2Csale_price%2Cpromotions%2Cthumb_image%2Csku_thumb_images%2Csku_swatch_images%2Csku_color_group%2Curl%2Cprice_range%2Csale_price_range%2Cdescription"
+      }
+    }
+  },
   "GDPR": {
     "enable": false
   },

components/src/AppHeader/appheader.main.tsx

@@ -22,6 +22,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import AppHeaderSearchMain from '../AppHeaderSearch/appheadersearch.main';
+import BloomreachAppHeaderSearchMain from '../Bloomreach/bloomreach.appheadersearch.main';
 import AppHeaderLoginMain from '../AppHeaderLogin/appheaderlogin.main';
 import AppHeaderLocaleMain from '../AppHeaderLocale/appheaderlocale.main';
 import AppHeaderNavigationMain from '../AppHeaderNavigation/appheadernavigation.main';
@@ -255,7 +256,11 @@ class AppHeaderMain extends React.Component<AppHeaderMainProps, AppHeaderMainSta
 
           <div className="icons-header-container">
             <div className="search-container">
-              <AppHeaderSearchMain isMobileView={false} onSearchPage={onSearchPage} />
+              {Config.bloomreachSearch.enable ? (
+                <BloomreachAppHeaderSearchMain isMobileView={false} onSearchPage={onSearchPage} />
+              ) : (
+                <AppHeaderSearchMain isMobileView={false} onSearchPage={onSearchPage} />
+              )}
             </div>
             <div className="search-toggle-btn-container">
               <button

components/src/Bloomreach/bloomreach.appheadersearch.main.tsx

@@ -0,0 +1,163 @@
+/**
+ * Copyright © 2019 Elastic Path Software Inc. All rights reserved.
+ *
+ * This is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this license. If not, see
+ *
+ *     https://www.gnu.org/licenses/
+ *
+ *
+ */
+
+import React from 'react';
+import { bloomreachSuggestionSearch } from '../utils/BloomreachSearchService';
+import './bloomreach.headersearch.main.less';
+
+const intl = { get: str => str };
+
+interface BloomreachHeaderSearchMainProps {
+    isMobileView: boolean,
+    isFocused?: boolean,
+    onSearchPage?: (...args: any[]) => any,
+}
+interface BloomreachHeaderSearchMainState {
+    keywords: string,
+    suggestions: [],
+}
+
+class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState> {
+  private searchInput: React.RefObject<HTMLInputElement>;
+
+  static defaultProps = {
+    isFocused: false,
+    onSearchPage: () => {},
+  }
+
+  static inputOnFocusOut() {
+    const suggestionContainer = document.getElementsByClassName('suggestions');
+    if (suggestionContainer !== undefined && suggestionContainer.length > 0) {
+      suggestionContainer[0].setAttribute('style', 'display: none;');
+    }
+  }
+
+  static inputOnFocus() {
+    const suggestionContainer = document.getElementsByClassName('suggestions');
+
+    if (suggestionContainer !== undefined && suggestionContainer.length > 0) {
+      suggestionContainer[0].setAttribute('style', 'display: list-item;');
+    }
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      keywords: '',
+      suggestions: [],
+    };
+    this.searchInput = React.createRef();
+    this.handleChange = this.handleChange.bind(this);
+    this.search = this.search.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isFocused === true) {
+      setTimeout(() => {
+        this.searchInput.current.focus();
+      }, 500);
+    }
+  }
+
+  handleChange(event) {
+    const keywords = event.target.value;
+
+    bloomreachSuggestionSearch(keywords)
+      .then((res) => {
+        const brSuggestions = res.response.suggestions;
+        const suggestions = brSuggestions ? brSuggestions.map(suggestion => suggestion.dq) : [];
+
+        this.setState({
+          keywords,
+          suggestions,
+        });
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error(error.message);
+      });
+  }
+
+  search(event?: Event) {
+    const { onSearchPage } = this.props;
+    const { keywords } = this.state;
+
+    if (keywords !== '') {
+      document.querySelector('.collapsable-container').classList.remove('show');
+      onSearchPage(keywords);
+    }
+
+    this.searchInput.current.value = '';
+    if (event != null) {
+      event.preventDefault();
+    }
+  }
+
+  handleSuggestionClicked(suggestion) {
+    this.setState(
+      {
+        keywords: suggestion,
+        suggestions: [],
+      },
+      this.search,
+    );
+  }
+
+  suggestionListHelper() {
+    const { suggestions } = this.state;
+
+    return suggestions.map(suggestion => (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      <li className="suggestion-element" key={suggestion} onMouseDown={() => this.handleSuggestionClicked(suggestion)}>
+        {suggestion}
+      </li>
+    ));
+  }
+
+  suggestionsListComponent() {
+    const { suggestions } = this.state;
+    if (suggestions.length !== 0) {
+      return (
+        <ul className="suggestions">
+          { this.suggestionListHelper() }
+        </ul>
+      );
+    }
+
+    return null;
+  }
+
+  render() {
+    const { isMobileView } = this.props;
+
+    return (
+      <div className={`main-search-container ${isMobileView ? 'mobile-view' : ''}`}>
+        <form className="search-form" onSubmit={this.search}>
+          <input className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onFocus={BloomreachHeaderSearchMain.inputOnFocus} onBlur={BloomreachHeaderSearchMain.inputOnFocusOut} />
+          <div className="search-icon" />
+          {this.suggestionsListComponent()}
+        </form>
+      </div>
+    );
+  }
+}
+
+export default BloomreachHeaderSearchMain;

components/src/Bloomreach/bloomreach.headersearch.main.less

@@ -0,0 +1,126 @@
+/**
+ * Copyright © 2018 Elastic Path Software Inc. All rights reserved.
+ *
+ * This is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this license. If not, see
+ *
+ *     https://www.gnu.org/licenses/
+ *
+ *
+ */
+ @import './../../../app/src/theme/common.less';
+
+ .suggestions {
+    list-style: none;
+    margin-top: 0;
+    max-height: 143px;
+    overflow-y: auto;
+    padding-left: 40px;
+    width: 170px;
+    position: absolute;
+    background-color: rgba(0, 0, 0, .5);
+    .suggestion-element {
+      text-align: left;
+      color: white;
+      cursor: pointer;
+    }
+  }
+
+  .main-search-container {
+    width: 170px;
+    text-align: right;
+
+    .search-form {
+      position: relative;
+      display: inline-block;
+
+      .input-search {
+        background: transparent;
+        padding: 2px 0 2px 35px;
+        width: 35px;
+        transition: width 0.5s ease,
+                    border-color 0.5s,
+                    padding 0.5s ease-in;
+
+        cursor: auto;
+        color: #fff;
+        cursor: pointer;
+        outline: 0;
+        border: 0;
+        border-bottom: 1px solid transparent;
+        font-weight: 300;
+
+        &::placeholder {
+          opacity: 0.3;
+          color: #fff;
+        }
+
+        &:focus {
+          width: 170px;
+          padding-left: 40px;
+          border-bottom: 1px solid #fff;
+          cursor: auto;
+        }
+      }
+
+      .search-icon {
+        background: #ffffff00 url(../../../app/src/images/header-icons/magnifying-glass.svg) no-repeat 9px center;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 35px;
+        height: 20px;
+        pointer-events: none;
+      }
+    }
+
+    &.mobile-view {
+      width: 100%;
+      border-bottom: solid 1px #dedede;
+
+      .search-form {
+        display: block;
+
+        .input-search {
+          color: #333;
+          background-color: #fff;
+          width: 100%;
+          transition: none;
+          font-size: 18px;
+          padding: 10px 45px 10px 20px;
+          border-bottom: 0;
+
+          &::placeholder {
+            opacity: 0.3;
+            color: #000;
+          }
+
+          &:focus {
+            border-bottom: 0;
+          }
+        }
+
+        .search-icon {
+          filter: invert(100%);
+          opacity: 0.5;
+          left: auto;
+          right: 10px;
+          top: 12px;
+        }
+      }
+    }
+  }
+
+
+
+